Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

HTML
El idioma de Internet

Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007

El lenguaje HTML

HyperText Markup Language

Lenguaje de marcas de hipertexto

Lenguaje de computadora de sintaxis muy sencilla

9 NO es un lenguaje de programación.
9 Documentos en archivos de texto simple.
9 Texto sin formato.
Diferenciación de los distintos elementos por marcas.
Pares de marcas: <nombre> ... </nombre>
Hipertexto: vínculos con otros recursos.
9 Lugares del documento.
9 Otras páginas locales.
9 Otros sitios de Internet.

El lenguaje HTML HTML: 0 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 El lenguaje HTML

Un archivo HTML describe:

9 El contenido de una página web.
9 La forma en que se debe visualizar ese contenido
en un navegador de Internet.
Contenido de la página web:
9 Texto
Se encuentra directamente en el archivo HTML.
9 Elementos multimedia
(ilustraciones, sonidos, vídeos, ...)
Se encuentran en archivos aparte y se incluyen
en la página web mediante instrucciones HTML.
Lo más simple: sólo texto a ser visualizado.
Extensiones de archivo: html, htm

El lenguaje HTML HTML: 0 - 2

Una primera página web

Archivo HTML con sólo el texto a ser visualizado:

Ante la ley hay un guardián. Un campesino se presenta

ante el guardián y pide entrar en la ley. Pero el guardián
le dice que por el momento no puede dejarlo entrar. Tras
reflexionar, pregunta si lo dejarán entrar más tarde.
-Es posible -dice el guardián-, pero ahora no.
[...]

Creación del archivo: Editor de texto simple.

1. Abrir el Bloc de notas
2. Escribir el texto
3. Guardar el archivo con el nombre Prueba.htm

El lenguaje HTML HTML: 0 - 3

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Visualización de la página web
Todos los navegadores entienden HTML, aunque
la visualización puede resultar ligeramente distinta.
Ajustándonos al estándar, no ha de haber problemas.
Los navegadores proporcionan extensiones.
Prestaciones frente a estandarización
Carga del archivo HTML en el navegador podemos:
9 Escribir la ruta en el campo de dirección.

9 Abrir el archivo en el navegador.

9 Pulsar sobre el nombre del archivo.

El lenguaje HTML HTML: 0 - 4

Visualización de la página web

El archivo cargado en el navegador

El navegador muestra el texto del archivo HTML,

pero los resultados no son exactamente los deseados

El lenguaje HTML HTML: 0 - 5

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 ¿Cómo se interpreta el texto sin marcas?
Sin marcas, el navegador interpreta el texto como parte
de un único párrafo, sin que sirva de nada partirlo en
varios párrafos en el editor:
Prueba.htm
Ante la ley hay un guardián. Un 3 párrafos
campesino se presenta ante el
guardián y pide entrar en la ley.
Pero el guardián le dice que por
el momento no puede dejarlo entrar.
Tras reflexionar, pregunta si lo
dejarán entrar más tarde.
-Es posible -dice el guardián-,
pero ahora no.
[...]

Un sólo párrafo

El lenguaje HTML HTML: 0 - 6

Las marcas del lenguaje HTML

¿Para qué sirven las marcas del lenguaje HTML?

Para delimitar párrafos, por ejemplo. Pero también:
9 Para indicar el formato del texto.
9 Para indicar el formato de la propia página
9 Para asignar un título a la página
9 Para establecer hipervínculos
9 Para forzar saltos de línea
9 Para aplicar estilos predeterminados
9 Para incluir archivos multimedia
Y un largo etcétera…

El lenguaje HTML HTML: 0 - 7

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Las marcas del lenguaje HTML

¿Qué son las marcas que define el lenguaje HTML?

9 Texto que se distingue del texto normal
(el texto a visualizar).
9 Proporcionan al navegador instrucciones
sobre cómo construir la página web.
9 Cada instrucción se reconoce por el identificador
(etiqueta) que tiene asignado.
9 Pueden llevar información adicional asociada en
forma de atributos (opciones de la instrucción)

El lenguaje HTML HTML: 0 - 8

Las marcas del lenguaje HTML

¿Cómo son las marcas del lenguaje HTML?

9 La mayoría van en parejas:
Principio de la parte del documento afectada
(marca de apertura o de inicio)
Fin de esa parte (marca de cierre o de fin).
9 Las dos marcas usan la misma etiqueta.
9 Van encerradas entre ángulos <...>
9 Marca de apertura: etiqueta entre los ángulos.
<BODY>
9 Marca de cierre: barra delante de la etiqueta.
</BODY>
9 Mayúsculas o minúsculas.

El lenguaje HTML HTML: 0 - 9

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Un documento HTML básico

Ejemplo de documento con marcas

<HTML>
<HEAD>
<TITLE>Ante la ley</TITLE> Cabecera
</HEAD>
<BODY>
<P>Ante la ley hay un guardián. Un campesino se
presenta ante el guardián y pide entrar en la
ley. Pero el guardián le dice que por el momento
Cuerpo

no puede dejarlo entrar. Tras reflexionar,

pregunta si lo dejarán entrar más tarde.</P>
<P>-Es posible -dice el guardián-, pero ahora
no.</P>
<P>[...]</P>
</BODY>
</HTML>

El lenguaje HTML HTML: 0 - 10

La página resultante en el navegador

Título

Documento

Formato por defecto

del navegador

Cuerpo

El lenguaje HTML HTML: 0 - 11

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Las marcas del documento HTML básico

<HTML> ... </HTML>

Delimita la sección de descripción de la página web.
De momento engloba todo el documento HTML.
<HEAD> ... </HEAD>
Delimita la sección de cabecera del documento.
<BODY> ... </BODY>
Delimita la sección de cuerpo del documento.
<TITLE> ... </TITLE>
Define el título del documento (título de la página web).
Aparecerá en la barra de título del navegador.
<P> ... </P>
Engloba el texto de un párrafo.

El lenguaje HTML HTML: 0 - 12

Hipertexto: inclusión de (hiper)vínculos

...
<P>-Es posible -dice el guardián-, pero ahora no.</P>
<P>[...]</P>
<P>Franz Kafka – Traducción de J.R. Wilcok</P>
</BODY>
</HTML> Texto que se pulsará para usar el vínculo

Sitio (página) de destino: //huizen.dds.nl/~nfkk/

Referencia que se establece encerrando el texto del vínculo
entre marcas <A>...</A> y definiendo la dirección de destino
con un atributo href dentro de la marca de apertura:
<P><A href="http://huizen.dds.nl/~nfkk/">Franz
Kafka</A> – Traducción de J.R. Wilcok</P>
</BODY>
</HTML>

El lenguaje HTML HTML: 0 - 13

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Los hipervínculos en el navegador

Hipervínculo

Destino

El lenguaje HTML HTML: 0 - 14

Estructura de los documentos HTML

Conjunto de elementos organizados jerárquicamente.

Cada elemento de un tipo concreto (etiqueta):
<ETIQUETA>Contenido del elemento</ETIQUETA>
Tipos: HTML, HEAD, BODY, TITLE, P, A y muchos más.
Unos elementos se encuentran dentro de otros.
Estructura jerárquica:
Documento (HTML)

Cabecera (HEAD) Cuerpo (BODY)

Título (TITLE) Párrafo (P) Párrafo (P) ...

Vínculo (A)

El lenguaje HTML HTML: 0 - 15

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Componentes de los documentos HTML

Cuatro clases de componentes:

9 Elementos
9 Atributos (propiedades)
9 Referencias a caracteres
9 Comentarios

Elementos
Se identifican delimitándolos con un par de marcas.
La etiqueta identifica el tipo de elemento.
Entre las marcas, el contenido: secuencia de texto
normal, referencias de caracteres y otros elementos.

El lenguaje HTML HTML: 0 - 16

Componentes de los documentos HTML

Elementos
Anidamiento de elementos: estructura jerárquica.
Relaciones de herencia: unos elementos padres de otros.
Los hijos adquieren automáticamente las propiedades
del padre.
Elemento raíz: el que está en lo más alto de la jerarquía
(primer nivel o nivel superior). Siempre de tipo HTML.
Contiene el resto de los elementos del documento.
A veces se puede omitir la marca de cierre.
No es una buena práctica (menor legibilidad del código).
Algunos elementos no tienen contenido:
Elementos vacíos (no hay marca de cierre).
<BR> (salto de línea)

El lenguaje HTML HTML: 0 - 17

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Componentes de los documentos HTML

Atributos
Los elementos pueden tener definidas propiedades.
Cada propiedad de un elemento representa una característica
del mismo que informa al navegador sobre un aspecto que
ha de tener en cuenta a la hora de interpretarlo (color o
fuente para el texto, destino de un hipervínculo, ...)
A cada propiedad se le asigna un valor válido.
Para cada propiedad están establecidos los valores
válidos que se le pueden asignar.
Cada tipo de elemento tiene definido su propio conjunto
de propiedades; algunos tipos de elementos no tienen
definidas propiedades (conjunto vacío).
Para muchas propiedades hay valores predeterminados.

El lenguaje HTML HTML: 0 - 18

Componentes de los documentos HTML

Atributos
Valores de las propiedades:
Pares atributo-valor dentro de la marca de apertura.

<ETIQUETA >
Lista de pares atributo-valor

Separados por espacio en blanco y en cualquier orden.

Par: Atributo=valor
Valor encerrado entre comillas simples o dobles.
<A href="http://huizen.dds.nl/~nfkk/">

Atributo Valor

El lenguaje HTML HTML: 0 - 19

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Componentes de los documentos HTML

Referencias a caracteres
Caracteres especiales e internacionales.
&, delimitador o #código y punto y coma (;)
á &aacute; &#225; < &lt; > &gt;
é &eacute; &#233; & &amp;

Comentarios
Facilitan la legibilidad y comprensión del código.
El navegador los ignora.
Entre <!-- y -->.
<!-- Esto es un comentario -->
En cualquier parte excepto dentro de una marca.

El lenguaje HTML HTML: 0 - 20

Más sobre el lenguaje HTML

Creado en 1989 (CERN, Ginebra).
Diseñado para facilitar la comunicación entre sistemas
heterogéneos con multitud de formatos.
Descripción de documentos por medio de texto simple:
Independencia de la plataforma.
El navegador NCSA Mosaic adoptó HTML como
lenguaje de descripción de los documentos a visualizar,
convirtiéndolo en estándar de facto para la web.
HTML es una aplicación SGML (Standard Generalized
Markup Language); XML es otra aplicación SGML.
SGML: metalenguaje para definir otros lenguajes.
La última versión de HTML es la 4.
El organismo internacional encargado de la
estandarización de las versiones de HTML
es el World Wide Web Consortium (W3C).

El lenguaje HTML HTML: 0 - 21

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Más sobre el lenguaje HTML

¿Cómo está definido el lenguaje HTML?

Como todas las aplicaciones SGML, HTML está definido
con una Definición de tipo de documento (DTD).
La DTD establece las reglas del lenguaje para la
formación de documentos válidos (la forma de
construir marcas, las marcas contempladas y sus
atributos, las secuencias correctas, etcétera).
Lleva asociada una especificación que establece el
significado y las restricciones de las marcas y atributos.
Pueden estar definidas varias DTD para un lenguaje.
Para HTML 4 están definidas tres DTD: estricta (la
básica), transicional (elementos y atributos antiguos
que se recomienda dejar de usar) y para documentos
con marcos.

El lenguaje HTML HTML: 0 - 22

Estructura básica de un documento HTML

Todo documento HTML consta de tres secciones:

9 Declaración de la versión de HTML.
9 Cabecera con información general sobre el documento.
9 Cuerpo con la descripción del contenido del documento.

Las tres secciones se han de encontrar en ese orden.

La cabecera y el cuerpo se encuentran dentro del
elemento HTML, pero la declaración de versión no.
Aunque la declaración de la versión es opcional,
se debe incluir para que el documento se pueda
considerar totalmente correcto.
[La omitiremos normalmente por economía de espacio.]

El lenguaje HTML HTML: 0 - 23

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Estructura básica de un documento HTML

Declaración de la versión de HTML utilizada

DTD estricta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

DTD transicional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" "http://www.w3.org/TR/REC-
html40/loose.dtd">

DTD para páginas de marcos:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN" "http://www.w3.org/TR/REC-
html40/frameset.dtd">

El lenguaje HTML HTML: 0 - 24

Estructura básica de un documento HTML

Sección de cabecera del documento

Elemento de segundo nivel.
Delimitado por las marcas HEAD.
Contiene información general sobre el documento
(título, propiedades globales de estilo, etcétera).
Elemento que debe estar incluido siempre en la sección
de cabecera: TITLE (título del documento / página web).

El lenguaje HTML HTML: 0 - 25

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
 Estructura básica de un documento HTML

Cuerpo del documento

También es un elemento de segundo nivel.
Describe el contenido de la página: lo que ha de mostrar
el navegador y cómo lo ha de mostrar.
Se encuentra delimitado por las marcas BODY.
(En las páginas de marcos se usan marcas FRAMESET.)
En el cuerpo del documento puede haber infinidad de
elementos de muy diversos tipos, anidados unos dentro
de otros.
Dos tipos generales de elementos en el cuerpo:
9 Elementos estructurales (o de bloque).
9 Elementos de línea (o de texto).

El lenguaje HTML HTML: 0 - 26

Estructura básica de un documento HTML

Elementos estructurales:
Para estructurar el contenido, organizando la
información en entidades de mayor nivel, tales como
párrafos, epígrafes, tablas, listas o formularios.
Pueden contener otros elementos estructurales al igual
que texto o elementos de línea.
Su visualización suele comenzar en una nueva línea.
Elementos de línea:
Son elementos que no definen estructuras y afectan a
una parte concreta del contenido para establecer
opciones de formato, crear hipervínculos o insertar
objetos.
Sólo pueden contener texto y otros elementos de línea

El lenguaje HTML HTML: 0 - 27

Universidad Complutense de Madrid Universidade Federal de Santa Catarina