Tema 2 Creacion Paginas Web - v3

TEMA 2: Creacin de pginas webs.
1. Conceptos Bsicos.
2. Creacin de una web.
3. HTML
Conceptos Bsicos
Pgina web: documento con informacin de inters
adaptada para internet que se puede visualizar mediante
un navegador de internet.
Sitio Web: conjunto de pginas webs con un mismo
contenido temtico vinculadas entre s y organizadas
jerrquicamente. La pgina principal suele llamarse
index.html
Conceptos Bsicos II
Hipertexto: modelo terico de organizar la informacin de
forma no secuencial.
HTML: (Hypertext Markup Language): Lenguaje usado en la
elaboracin de pginas web a partir de diferentes etiquetas.
Un documento html es un documento de texto plano con
extensin htm o html.
<etiqueta>Contenido de la etiqueta </etiqueta>.
Editor web: Programa que permite realizar todo el proceso
de generacin de una pgina web.
- Offline: Dreamweaver, Frontpage, Kompozer
- Online: Google sites (gratuito), Wix
CSS: Lenguaje que establece el formato del sitio web: fondo,
color, disposicin etc.
Creacin de una pgina web.

1. Diseo: Crear la parte visual de las pginas a alojar
en un sitio web.
2. Implementacin: Usar el cdigo HTML para crear los
distintos elementos de contenido y las hojas de estilo
CSS para la parte visual. (maquetacin).
Creacin de una web. Caractersticas de un

buen sitio web.
1. Usabilidad: capacidad de un sitio web de ser
comprendido y usado.
La navegacin ha de ser:
consistente(misma localizacin de los enlaces en las diferentes

pginas),
uniforme(misma expresin),
visible.
2. Accesibilidad: capacidad de hacer los contenidos

disponibles para todas las personas independientemente
de la discapacidad, intelectual, o fsica que puedan tener.
Por ejemplo textos Alternativos en imgenes, modo de
reproduccin por sonido.
3. Objetivo claro: tener en mente durante el diseo a que
tipo de pblico va dirigida, qu queremos conseguir con la
pgina web, (ej. Fines comerciales, educativos)
HTML : Estructura de un documento bsico.

1. Cabecera del tipo de documento: indicamos el tipo
de archivo.
<!Doctype html>
2. Cabecera del documento: informacin sobre el

documento como puede ser el formato usado en las
diferentes secciones. No visible.
<head>

</body>
HTML : Estructura de un documento bsico.

Estructura
<html>
<head>
</head>
<body>
</body>
</html>
Ejemplo
HTML : Etiquetas que van dentro de la

cabecera <head>
<title>define el ttulo de la pgina. Por lo general, el ttulo aparece en la
barra de ttulo encima de la ventana.
<link>para vincular el sitio a hojas de estilo o iconos <link
rel="stylesheet" href="/style.css" type="text/css>
<style>para colocar el estilo interno de la pgina usandoCSS
<meta>para metadatos como la autora, la licencia, el idioma, la
codificacin de caracteres, las palabras clave
<script>para agregar contenido dinmico a la pgina usando el lenguaje
de programacin web javascript
Ejemplo:
CSS, "Cascade Style Sheet", son un conjunto de instrucciones que

definen la apariencia de diversos elementos de un documento HTML.
body {
font: 10px;
text-align: center;
background-color: #ffffff;
}
p{
font-size:12ppx;
color:#0000FF;
text-align:left;
}
h1{
color:#FF0000;
text-align:left;
}
Los veremos ms adelante

.clase1{
font-style:italic;
font-size:20px;
border-bottom:1px #000000
dashed;
text-align:left;
}
#estilo1{
color:#FFFFFF;
font-size:15px;
background-color: #000000;
text-align:left;
}
CSS, "Cascade Style Sheet", son un conjunto de instrucciones que

definen la apariencia de diversos elementos de un documento HTML.
<html>
<head>
<title>Un ejemplo practico de css en un documento externo</title>
<link rel="stylesheet" type="text/css" href=css/ejemplocss.css">
</head>
<body>
Como en la hoja de estilo hemos dicho que el body fuera con fondo blanco, con
un texto de tamaño 10 y centrado, ésta será la apariencia
principal de la página.
<p>Aquí tenemos un prrafo. Como también le hemos aplicado un estilo,
podemos ver el texto del párrafo de color azul y con un tamaño
ligeramente superior.</p>
<p id="estilo1"> A este prrafo le hemos aplicado el estilo1, por lo que el
texto tiene un fondo negro, un texto en blanco y un tamaño de 15 px.</p>
<div class="clase1">Este texto posee unas características propias de la
clase 1. No es que sea un estilo muy bonito, pero por lo menos se entiende bien,
¿¿no?? </div><br>
<h1>Y aquí tenemos un último estilo.</h1>
Pues estos han sido todos los estilos que teníamos preperados para ti.
Este tiene otra vez el estilo predeterminado para body.
</body>
</html>
HTML : Etiquetas que van dentro del

cuerpo <body> - Formato.
El contenido de la pgina debe ir entre las etiquetas<body></body>.
Comentarios: anotaciones que no se muestra en la pgina pero

permite escribir notas en el cdigo. 
<p>Prrafos. <p> Ejemplo de prrafo </p>
<br>Salto del lnea. No tiene etiqueta de cierre
Esto es una lnea. <br> Esto es otra lnea.
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>
<del>Texto tachado</del>
<hi>,i= 1, 2, 3, 4, 5, 6. Determinan las secciones del documento:
ttulo, seccin, subseccin, ...
HTML : Listas
HTML : Caracteres especiales, tablas
HTML : Atributos de las tablas
HTML . Tablas: combinar celdas.
HTML : Imgenes y fondo
HTML : Enlaces
HTML : Enlaces II
<a href="http://www.sanjosedelparque.net">
<img src="./img/logo_sjp.jpg" alt=SJP" width=200>
</a>
HTML : Estructurar una pgina
HTML : Trabajo de clase

Elegir uno de los siguientes temas:
1. Redes P2P, 2.Las licencias, 3. Software privativo y software libre,
4. Creative Commons, 5. Las Wikis, 6. Podcasting y Streaming,
7.Certificados digitales, 8.Encriptacin, 9. Cortafuegos (Firewall),
10. Programas Spyware, Antivirus, 11. Filtros de correo,
12.Cookies, 13.Proxy.
y realizar una pgina web que contenga al menos:
3 parrafos
1 tabla,
1 lista numerada o con vietas,
1 imagen
3. Diferentes tipos de enlace:
HTML : Trabajo de clase

Elegir uno de los siguientes temas:
Html
<img id=imagen1 src >
Css
#imagen1 {
width: 120px;
height: 250px;
border: none;
}
HTML : Contenedores
Ejemplos de uso de <div> id, class

Pgina web (HTML )
<div id="indice">
<br>ndice
</div>
<div class="destacado">
Este texto se destaca
mediante un estilo.
Roman"; }
</div>
Hoja de estilos (CSS)
#indice {
text-align : left;
color : red; }
.destacado {
font-weight : bold;
font-family : "Times New
<div id="articulo15" class="articulos_estandar">

Texto de un artculo
</div>
HTML : Algunas recomendaciones
HTML : Frames
http://platea.pntic.mec.es/~abercian/guiahtml
/frames.htm
http://www.w3schools.com/tags/tag_frameset.a
sp

Tema 2 Creacion Paginas Web - v3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 2 Creacion Paginas Web - v3

Cargado por

Copyright:

Formatos disponibles

TEMA 2: Creacin de pginas webs.

Creacin de una pgina web.

Creacin de una web. Caractersticas de un

consistente(misma localizacin de los enlaces en las diferentes

2. Accesibilidad: capacidad de hacer los contenidos

HTML : Estructura de un documento bsico.

2. Cabecera del documento: informacin sobre el

3. Cuerpo del documento: parte principal en la que va

HTML : Estructura de un documento bsico.

HTML : Etiquetas que van dentro de la

CSS, "Cascade Style Sheet", son un conjunto de instrucciones que

Los veremos ms adelante

CSS, "Cascade Style Sheet", son un conjunto de instrucciones que

HTML : Etiquetas que van dentro del

Comentarios: anotaciones que no se muestra en la pgina pero

HTML : Caracteres especiales, tablas

HTML : Atributos de las tablas

HTML . Tablas: combinar celdas.

HTML : Imgenes y fondo

HTML : Estructurar una pgina

HTML : Trabajo de clase

HTML : Trabajo de clase

Ejemplos de uso de <div> id, class

Hoja de estilos (CSS)

<div id="articulo15" class="articulos_estandar">

HTML : Algunas recomendaciones

También podría gustarte