2. Lenguajes de marcas: HTML
1. Clasificación de los lenguajes de marcas
2. HTML. Estructura y elementos.
3. Etiquetas y atributos
4. Elementos multimedia
5. XHTML
2
3. 1. Lenguajes de marcas.
Clasificación.
Un lenguaje de marcas es una forma de codificar un
documento que, junto con el texto, incorpora
etiquetas o marcas que contienen información
adicional acerca de la estructura del texto, o su
presentación
Las ‘marcas’ indican donde empieza un párrafo, si hay
tabla, o listas, etc.
3
4. Lenguajes de marcas. Clasificación.
Procedimental:
Describen operaciones tipográficas
Estructural:
Describen la estructura lógica de un documento,
pero no su tipografía
Híbrido:
Combinación de ambos
4
5. Lenguajes de marcas. Clasificación.
Documentación electrónica
RTF
TeX
Wikitexto
Tecnologías de internet
HTML, XHTML
RSS
5
6. 2. HTML. ESTRUCTURA Y
ELEMENTOS
El HTML (Hyper Text Markup Language) es el lenguaje con el
que se escriben las páginas web. Es un lenguaje de hipertexto, es
decir, un lenguaje que permite escribir texto de forma
estructurada, y que está compuesto por etiquetas, que marcan el
inicio y el fin de cada elemento del documento.
Un documento hipertexto no sólo se compone de texto, puede
contener imágenes, sonido, vídeos, etc., por lo que el resultado
puede considerarse como un documento multimedia.
Los documentos HTML deben tener la extensión html o htm,
para que puedan ser visualizados en los navegadores (programas
que permiten visualizar las páginas web).
Los navegadores se encargan de interpretar el código HTML de
los documentos, y de mostrar a los usuarios las páginas web
resultantes del código interpretado.
6
7. 2. HTML. ESTRUCTURA Y
ELEMENTOS
Inconvenientes:
Información estática (ver ej. Santillana)
Vocabulario limitado
Ventajas:
Muy sencillo
No requiere herramientas especiales
Muy difundido
7
8. 2. HTML. ESTRUCTURA Y
ELEMENTOS
Existen varias versiones (hasta la 5), ya que se han ido
incorporando etiquetas nuevas para tratar la
información multimedia, los marcos, hojas de estilo,
etc.
Es posible que distintos muestren la información de
manera distinta, o incluso que un navegador no
soporte la última versión, el HTML 5.0.
Si un navegador no reconoce una etiqueta, la ignora y
el efecto que pretendía la etiqueta no queda reflejado
en la página.
8
9. 3. Etiquetas y atributos
Etiquetas:
Las etiquetas o marcas delimitan cada uno de los
elementos que componen un documento HTML.
Existen dos tipos de etiquetas, la de comienzo de
elemento y la de fin o cierre de elemento.
Etiquetas de inicio:
<identificador_de_etiqueta>
Etiquetas de fin:
</identificador_de_etiqueta>
9
10. 3. Etiquetas y atributos
Atributo:
Propiedad que se le añade opcionalmente a una
etiqueta de inicio:
<identificador_de_etiqueta atributo1 atributo2…>
10
11. 3. Etiquetas y atributos
Ejemplo 1:
La etiqueta <p> indica un párrafo. En el ejemplo
aparece con el atributo align=“center” para centrar el
texto.
<p align="center">Bienvenidos a mi página Web</p>
11
12. 3. Etiquetas y atributos
Ejemplo 2:
La etiqueta <font> indica el tipo de fuente o texto a
utilizar. En este caso aparece con atributos que indican
el color y el tamaño del texto, y está anidada dentro de
la etiqueta <p>.
<p align="center">
<font color="#993366" size="4" face="Arial">
Bienvenidos a mi página web
</font>
</p>
12
13. 3. Etiquetas y atributos –
Estructura de página
Estructura de una página Web:
<html>
<head>
…
</head>
<body>
…
</body>
</html>
13
14. 3. Etiquetas y atributos: <html>
Identificador del tipo de documento <html>
Todas las páginas web escritas en HTML tienen que tener la
extensión html o htm. Al mismo tiempo, tienen que tener las
etiquetas fundamentales <html> y </html>.
<html>
<head>
…
</head>
<body>
…
</body>
</html>
14
15. 3. Etiquetas y atributos: <head>
Cabecera de la página <head>
Da información sobre la página: título, palabras clave para los
buscadores, autor, descripción, etc.
<html>
<head>
…
</head>
<body>
…
</body>
</html>
15
16. 3. Etiquetas y atributos: <head>
<head> admite otras etiquetas anidadas. Cabe
destacar:
<title> para poner título a la web.
<meta> para indicar autor, descipción, keywords, …
<head>...
<meta name="author" content=« Desiree Torreira »>
<meta name="description" content="Curso de HTML">
<meta name="keywords" content="código HTML etiqueta">
</head>
16
17. 3. Etiquetas y atributos: <body>
Atributos: de la etiqueta <body>
Bgcolor color de fondo
Background imagen de fondo
Text color del texto
Etiquetas anidadas : <p><br><div><table><ol><ul>
<marquee><a><img><font> y muchas más.
17