02 HTML 1

Construcción de Páginas Web
Curso Programador Web

Construcción de Páginas Web
 Veremos como empezar la construcción de nuestras
primeras páginas Web.
 Primero, veremos la estructura básica que debe poseer

una página Web escrita en HTML.
 Segundo, escribiremos las primeras páginas básicas.
 Tercero, visualizaremos las mismas mediante la utilización

de un navegador Web.
2 Lic. Omar Esgaib-Lic.Mauricio Merín

XHTML/HTML

HTML/XHTML
 HTML = Hyper Text Markup Language
 HTML/XHTML es un lenguaje de marcado.
 Un lenguaje de marcado esta conformado por un conjunto de

etiquetas.
 HTML utiliza etiquetas de marcado para describir páginas

Web.
 NO es un lenguaje de programación.

HTML/XHTML
 Una de sus características principales es la capacidad de
referenciar otros recursos o documentos externos, es
decir, localizados en lugares distantes.
 Los documentos HTML contiene etiquetas (tags) HTML y

texto plano
 Los documentos HTML son también denominados

páginas Web

HTML/XHTML
 Un lenguaje de marcado denota o marca zonas dentro
del contenido de un documento.
 El lenguaje de marcado HTML/XHTML está formado por

un conjunto de elementos y sus reglas de construcción.
 Estas reglas se encuentran estandarizadas.

HTML/XHTML
 Esta estandarización general permite a los diferentes
fabricantes interpretar un mismo documento de la misma
manera (o por lo menos en su mayor parte).
 Un error en la formación de un documento HTML

encontrado por el navegador hace que este intente
presentar el documento lo mejor posible.
 No hay errores de compilación ni de interpretación.

HTML/XHTML: Etiquetas y Atributos
 Las unidades básicas sobre las que se construyen las
páginas HTML son las etiquetas.
 Las etiquetas son palabras que marcan un documento,

similares a lo que serían las palabras reservadas en un
lenguaje de programación.

 Las etiquetas HTML son palabras únicas rodeadas de dos
caracteres especiales para indicar que las mismas tienen
un significado propio, y no forman parte del contenido
del documento.
 Como buena práctica, debemos recordar escribir las

etiquetas siempre en minúsculas.

 Las etiquetas se escriben dentro de los caracteres
“mayor a” y “menor a”.
 Así, una etiqueta cualquiera se escribe, dentro del código

de la página, de la siguiente manera:
<etiqueta>
 HTML está conformado por un conjunto de etiquetas

conocidad que presentan una estructuración determinada
de la información

 Por lo tanto, en un texto cualquiera, la aparición de una
etiqueta dentro del mismo denota al navegador que debe
realizar alguna acción especial a la hora de visualizar el
contenido, dependiendo de que etiqueta utilizamos.

 Ahora bien, no solo debemos indicar al navegador donde
comienza un nuevo bloque o elemento estructural
dentro del contenido, sino también indicarle donde
termina dicho bloque.

 Para esto, debemos cerrar la etiqueta.
 Cerrar una etiqueta implica escribir el opuesto de la

misma.
 El opuesto de una etiqueta es sencillamente la misma

etiqueta con una barra escrita delante de la palabra de
dicha etiqueta (dentro de los caracteres “mayor a” y
“menor a”).

 Así, el cerrar una etiqueta implicaría escribir dentro del
contenido de la misma:
</etiqueta>
 En ejemplo anterior deberíamos escribir:

 Si bien algunos navegadores son compasivos e
interpretarían (correctamente o no) los documentos
HTML que tengan etiquetas sin cerrar, debemos tomar
como regla que todas las etiquetas utilizadas deben ser
explícitamente abiertas y cerradas.
 Es decir, sus etiquetas de inicio y fin deben aparecer

escritas en el código.

 Existe una sola otra manera de abrir y cerrar etiquetas.
 Es el caso especial de algunas etiquetas que no tienen

contenido (es decir que en el mismo lugar donde se abre
la etiqueta, a continuación se cierra la misma, sin texto
intermedio).

 En este caso utilizamos la notación especial:
<etiqueta/>
 Esta notación indica que la etiqueta se abre y cierra en

dicho lugar.
 Es equivalente a escribir:
<etiqueta></etiqueta>

 Todas las etiquetas HTML/XHTML se escriben de esta
manera.
 Ahora bien, muchas veces es necesario enriquecer la

información.
 No solo es necesario marcar, mediante etiquetas, el

comienzo y fin de una parte del documento.

 La etiqueta puede contener información extra, opcional,
dentro de la misma.
 Esta información se provee mediante los atributos.
 Los atributos son palabras escritas siempre dentro de las

etiquetas de apertura.

 Se escriben dentro de los signos “mayor a” y “menor a”,
posteriormente al nombre de la etiqueta.
 Los atributos son palabras especiales, algunas se aplican a

ciertas etiquetas y otras se puede aplicar a cualquier
etiqueta.
 Además de la palabra que indica el atributo al que

estamos dándole un valor, debemos proveer el valor
mismo.

 Esto lo hacemos de esta manera:
atributo=“valor”
 Una etiqueta puede no tener atributo, tener uno o

muchos.
 En caso de tener más de uno, sencillamente los

separamos por espacios.
 El orden en el que aparecen es irrelevante.

 Así:
 Nos muestra como crear un etiqueta con un atributo,

que denota un valor para el atributo id al cual le
asignamos el valor “primero”.

 Existe una regla importante a la hora de escribir etiquetas
que indica como debe ser la anidación de las mismas.
 La regla indica que:

 Al Abrir una etiqueta esta debe ser cerrada antes de abrir otra.
 O al abrir una etiqueta, esta puede dentro de sí misma abrir
varias otras etiquetas, con la condición de las mismas se cierren
en el orden inverso en el cual fueron abiertas.

 Abrir y cerrar etiquetas antes que otras:
 Abrir etiquetas anidadas, deben ser cerradas en el orden

inverso en que fueron abiertas:
¿Existe un error en la alguna sentencia?

Estructura de una Página Web

Estructura Básica de una Página Web
 La estructura básica de una página Web en forma general es
simplemente la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
</head>
<body>
</body>
</html>

DOCTYPE
<html>
<head>
</head>
<body>
</body>
</html>

DOCTYPE
 El DOCTYPE es la declaración del tipo de Documento
HTML/XHTML que se encuentra escrito a continuación.
 Es una línea escrita al comienzo del documento (antes de

cualquier otra cosa).

DOCTYPE
 Indica al navegador que tipo de documento debe esperar,
es decir, que reglas del lenguaje y versión debe utilizar
para controlar el contenido del mismo.
 El DOCTYPE no obliga al navegador a presentar el

documento de una manera u de otra sino simplemente
indica la versión que tenía en mente en utilizarse en el
momento en que se escribió el documento.

DOCTYPE
 Debemos respetar las mayúsculas y minúsculas del
mismo.
 Existen seis tipos de DOCTYPE utilizados en la

actualidad (y otros anteriores).
 Estos deben simplemente ser utilizados “de memoria”

dependiendo de que tipo de documento escribimos.

DOCTYPE
 Los DOCTYPE que pueden ser utilizados pueden verse
en la página 8 de la Bibliografía (página 18 en forma
continuada).
 Nosotros utilizaremos los referentes a HTML o XHTML

referentes a la versión 4 HTML o 1 de XHTML en su
forma tradicional o estricta.

Etiqueta html
<html>
<head>
</head>
<body>
</body>
</html>

Etiqueta html
 La etiqueta HTML delimita todo el contenido del
documento.
 Debe aparecer al comienzo (posteriormente al

DOCTYPE) y al final del mismo.
 Es sencillamente el contenedor de las demás etiquetas.

Etiqueta head
<html>
<head>
</head>
<body>
</body>
</html>

Etiqueta head
 La etiqueta head contiene información que describe el
documento.
 Además puede contener otras etiquetas como en el

ejemplo la etiqueta title, que le da el título a la página (el
título que aparece en el navegador o en la pestaña del
navegador, no en el contenido).

Etiqueta head
 En este bloque podemos referenciar o incluir archivos
externos de tipo CSS, JS, etc.
 Los elementos que se agregan en esta etiqueta no se

visualizan en el contenido de la página del navegador.

Etiqueta body
<html>
<head>
</head>
<body>
</body>
</html>

Etiqueta body
 La etiqueta body es el contenedor del contenido de la
página.
 Todo lo que vemos en la página, el contenido del

documento HTML, está escrito en alguna parte del body.
 Por tanto, debemos escribir nuestro contenido dentro de

dicha etiqueta.

Etiqueta title
<html>
<head>
</head>
<body>
</body>
</html>

Etiqueta title
 Le da el título al documento, que aparece escrito en el
navegador.

¿Cómo escribir nuestro primer
documento HTML?
 Los documentos HTML, al ser tan sencillos de escribir,
no requieren mucho para su escritura.
 No poseen compilador y son documentos en formato

texto legible, por tanto se pueden escribir en cualquier
aplicación que maneje texto como Notepad, Notepad++,
Word, etc.

Extensiones de los archivos XHTML/HTML
 Se pueden utilizar dos tipos de extensiones para este tipo de
archivos (ambas son válidas)
 .htm
 .html
 La utilización de .htm es un hábito del pasado cuando los

software solo permitían 3 caracteres en la extensión de los
archivos
 Hoy en día se utilizan indistintamente, pero la más utilizada

suele ser la extensión .html
 Ejemplo: mi_ejercicio_1.html o
mi_ejercicio_1.htm

documento HTML?
 Utilizando notepad:
 Abrir el Notepad.
 Escribir el esqueleto general de todo documento HTML:
<html>
<head>
</head>
<body>
</body>
</html>

documento HTML?
 Grabar el archivo.
 Le podemos dar el nombre que queramos.
 Lo importante es que la extensión sea HTML (elegir al grabar
SAVE AS TYPE: ALL FILES)

documento HTML?
 Grabamos.
 Abrimos el navegador (Mozilla
Firefox recomendado).
 Arrastramos el archivo hasta el
navegador (o alternativamente
elegimos Abrir Archivo dentro del
menú del navegador).

documento HTML?
 Evidentemente, al abrir el archivo no se muestra nada.
 Salvo el título, no hay contenido debido a que no

escribimos nada dentro del cuerpo (body) de nuestro
documento.

documento HTML?
 Al escribir toda nuestra página, debemos visualizarla en el
navegador. Para esto basta con darle “doble click” al
archivo o sencillamente arrastrar el archivo hasta la
ventana correspondiente al navegador Web.
 Aspectos a tener en cuenta:

 ¿Cómo se obtiene un salto de línea (enter)?
 ¿Cómo se presenta un “espacio” en el contenido? ¿Y varios?
 ¿Tabuladores?

PREGUNTAS????

Bibliografía

Bibliografía
 The Ultimate HTML Reference. Ian Lloyd.Sitepoint. 2008
 http://www.w3schools.com/
 http://www.htmlquick.com/es/
 http://www.librosweb.es/

Autores

Autores
 Omar Esgaib
 omar_esgaib@uca.edu.py
 Mauricio Merín
 mauricio_merin@uca.edu.py

02 HTML 1

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

02 HTML 1

Cargado por

Copyright:

Formatos disponibles

Construcción de Páginas Web

Curso Programador Web

 Primero, veremos la estructura básica que debe poseer

 Segundo, escribiremos las primeras páginas básicas.

 Tercero, visualizaremos las mismas mediante la utilización

2 Lic. Omar Esgaib-Lic.Mauricio Merín

Curso Programador Web

 HTML/XHTML es un lenguaje de marcado.

 Un lenguaje de marcado esta conformado por un conjunto de

 HTML utiliza etiquetas de marcado para describir páginas

4 Lic. Omar Esgaib-Lic.Mauricio Merín

 Los documentos HTML contiene etiquetas (tags) HTML y

 Los documentos HTML son también denominados

5 Lic. Omar Esgaib-Lic.Mauricio Merín

 El lenguaje de marcado HTML/XHTML está formado por

 Estas reglas se encuentran estandarizadas.

6 Lic. Omar Esgaib-Lic.Mauricio Merín

 Un error en la formación de un documento HTML

 No hay errores de compilación ni de interpretación.

7 Lic. Omar Esgaib-Lic.Mauricio Merín

 Las etiquetas son palabras que marcan un documento,

8 Lic. Omar Esgaib-Lic.Mauricio Merín

 Como buena práctica, debemos recordar escribir las

9 Lic. Omar Esgaib-Lic.Mauricio Merín

 Así, una etiqueta cualquiera se escribe, dentro del código

 HTML está conformado por un conjunto de etiquetas

10 Lic. Omar Esgaib-Lic.Mauricio Merín

11 Lic. Omar Esgaib-Lic.Mauricio Merín

12 Lic. Omar Esgaib-Lic.Mauricio Merín

 Cerrar una etiqueta implica escribir el opuesto de la

 El opuesto de una etiqueta es sencillamente la misma

13 Lic. Omar Esgaib-Lic.Mauricio Merín

 En ejemplo anterior deberíamos escribir:

14 Lic. Omar Esgaib-Lic.Mauricio Merín

 Es decir, sus etiquetas de inicio y fin deben aparecer

15 Lic. Omar Esgaib-Lic.Mauricio Merín

 Es el caso especial de algunas etiquetas que no tienen

16 Lic. Omar Esgaib-Lic.Mauricio Merín

 Esta notación indica que la etiqueta se abre y cierra en

17 Lic. Omar Esgaib-Lic.Mauricio Merín

 Ahora bien, muchas veces es necesario enriquecer la

 No solo es necesario marcar, mediante etiquetas, el

18 Lic. Omar Esgaib-Lic.Mauricio Merín

 Esta información se provee mediante los atributos.

 Los atributos son palabras escritas siempre dentro de las

19 Lic. Omar Esgaib-Lic.Mauricio Merín

 Los atributos son palabras especiales, algunas se aplican a

 Además de la palabra que indica el atributo al que

20 Lic. Omar Esgaib-Lic.Mauricio Merín

 Una etiqueta puede no tener atributo, tener uno o

 En caso de tener más de uno, sencillamente los

 El orden en el que aparecen es irrelevante.

21 Lic. Omar Esgaib-Lic.Mauricio Merín

 Nos muestra como crear un etiqueta con un atributo,

22 Lic. Omar Esgaib-Lic.Mauricio Merín

 La regla indica que:

23 Lic. Omar Esgaib-Lic.Mauricio Merín

 Abrir etiquetas anidadas, deben ser cerradas en el orden

¿Existe un error en la alguna sentencia?

24 Lic. Omar Esgaib-Lic.Mauricio Merín

Curso Programador Web

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

26 Lic. Omar Esgaib-Lic.Mauricio Merín