HTML

Lenguajes de marcas y sistemas de
gestión de información
HTML
LENGUAJE DE MARCAS Y SISTEMAS DE GESTIÓN DE INFORMACIÓN
Formación
Profesional Oficial
1
Formación
Profesional Oficial
Contenido
1. ¿Qué es HTML? ..................................................................................................................... 4
2. ¿Qué es un Hipertexto?......................................................................................................... 4
3. ¿Cómo se transmite la información? .................................................................................... 4
3.1. Clientes y Servidores ..................................................................................................... 4
3.2. ¿Cómo funciona el par Cliente-Servidor? ..................................................................... 4
4. Estructura básica de una página web.................................................................................... 5
5. Herramientas para el diseño de páginas webs ..................................................................... 6
6. ¿Qué es HTML5? ................................................................................................................... 6
7. El tipo de documento ............................................................................................................ 7
8. Formato de las etiquetas HTML5 .......................................................................................... 7
9. La etiqueta html .................................................................................................................... 7
10. La cabecera........................................................................................................................ 8
10.1. Las etiquetas meta .................................................................................................... 9
11. Etiquetas.......................................................................................................................... 10
12. Presentación de texto ..................................................................................................... 11
12.1. Etiquetas para formatear texto ............................................................................... 11
12.1.1. Comentarios ............................................................................................................ 11
12.1.2. Títulos o cabeceras .................................................................................................. 12
12.1.3. Etiquetado por contenido ....................................................................................... 12
12.1.4. Enfatización ............................................................................................................. 13
12.1.5. Hojas de estilos CSS ................................................................................................. 14
12.2. Etiquetas para la estructura de contenidos: listas y tablas. .................................... 15
12.2.1. Listas ........................................................................................................................ 16
12.2.1.1. Listas ordenadas .................................................................................................. 16
12.2.1.2. Listas desordenadas ............................................................................................ 16
12.2.1.3. Listas de definición .............................................................................................. 17
12.2.2. Tablas ...................................................................................................................... 23
13. Multimedia ...................................................................................................................... 24
13.1. Etiquetas para IMAGEN ........................................................................................... 24
13.2. Etiquetas para AUDIO.............................................................................................. 24
13.3. Etiquetas para VÍDEO .............................................................................................. 24
14. Enlaces............................................................................................................................. 25
2
Formación
Profesional Oficial
14.1. Enlaces absolutos .................................................................................................... 25

14.2. Enlaces relativos ...................................................................................................... 25
14.3. Ejemplos de enlaces ................................................................................................ 26
3
Formación
Profesional Oficial
1. ¿Qué es HTML?
HTML (Hyper Text Markup Language) es un lenguaje de marcas de hipertexto.
Permite escribir texto de forma estructurada, con enlaces (hyperlinks) que conducen a
otros documentos o fuentes de información relacionadas, y con inserciones
multimedia (gráficos, imágenes, sonidos, videos, etc.).
Los archivos HTML tienen la extensión .html o .htm
2. ¿Qué es un Hipertexto?
Es el texto que, en la pantalla de un dispositivo electrónico, permite conducir a otros
textos relacionados, pulsando con el ratón en ciertas zonas sensibles y destacadas.
La forma más habitual de hipertexto en informática es la de hipervínculos.
3. ¿Cómo se transmite la información?

3.1. Clientes y Servidores
En internet la información se transmite mediante páginas HTML desde un ordenador
Servidor hacia nuestro ordenador Cliente.
Para lograr que nuestras páginas WEB estén disponibles en Internet son necesarios
varios requisitos:
Que se encuentren en un ordenador permanentemente conectado a Internet.
Que dispongamos de una dirección IP fija y conocida por los ordenadores que se
encargan de traducir las peticiones de los internautas a direcciones IP.
Que el ordenador en el que se alojan nuestras páginas disponga del software adecuado
para recibir conexiones exteriores y sea capaz de poner a disposición de los visitantes
aquello que solicitan.
Necesitamos es un Servidor WEB.
3.2. ¿Cómo funciona el par Cliente-Servidor?

El proceso de distribución de información almacenada en páginas WEB se realiza en las
siguientes etapas :
Un internauta solicita una determinada información tecleando el URL de la página o
haciendo clic en un enlace.
4
Formación
Profesional Oficial
El proveedor de acceso del internauta consulta a su servidor de nombres de dominio

(DNS), traduce la petición recibida del navegador a la dirección IP del servidor
correspondiente y se pone en contacto con dicho ordenador.
El servidor WEB recibe la petición y comprueba que la información solicitada existe y
está disponible. Si es así envía la página solicitada al ordenador que le ha realizado la
petición.
El navegador del internauta recibe, a través de su proveedor de acceso, los recursos
que constituyen la página solicitada y los organiza para presentarlos en la pantalla
según las instrucciones que contiene el código HTML de la página. Dichos recursos
están formados por el texto y los elementos multimedia que componen la página:
imágenes fijas, sonidos, imágenes en movimiento, pequeños programas.
4. Estructura básica de una página web

Tipo de documento
Cabecera
Cuerpo
Figura 1: las distintas partes que componen un documento o página HTML
Título (pestaña del navegador)
Encabezado h1
Etiqueta párrafo
Figura 2: documento HTML con contenido
5
Formación
Profesional Oficial
Figura 3: visualización en un navegador
5. Herramientas para el diseño de páginas webs

Para la creación, diseño y publicación de páginas webs necesitamos herramientas
software. Para la creación de documentos html necesitamos un editor que nos facilite
las tareas y nos permita incluir los etiqutas. Ejemplos:
• Bloc de notas
• Sublime Text
• NotePad ++
• Etc.
6. ¿Qué es HTML5?
HTML5 es un lenguaje de marcado y por tanto se construye a partir de etiquetas o
marcas.
HTML5 es una combinación de nuevas etiquetas de marcado, propiedades CSS3,
JavaScript y algunas tecnologías complementarias de apoyo.
No se diferencia entre mayúsculas y minúsculas.
No se exigen las etiquetas de cierre de los elementos.
Las comillas en los atributos son opcionales.
Debemos utilizar buenas prácticas:
• Cerrando los elementos.

• Empleando minúsculas.
• Añadiendo comillas a los atributos.
Siguen siendo buenas prácticas a mantener.
Reduciremos la probabilidad de errores.
6
Formación
Profesional Oficial
7. El tipo de documento
La primera línea de un documento HTML es la declaración de "tipo de documento" o
DOCTYPE. El objetivo de esta primera línea es aportar pistas al navegador sobre el tipo
de información que se va a encontrar en la página.
EL W3C (World Wide Web Consortium: www.w3.org), encargado de la creación de los
estándares web, define que los ficheros HTML, XML, XHTML deben tener una
declaración de tipo DOCTYPE. En el nuevo estándar HTML5 se ha reducido a:
<!DOCTYPE html>
8. Formato de las etiquetas HTML5

HTML5 es un lenguaje de marcado y por tanto se construye a partir de etiquetas o
marcas, las cuales deben seguir un determinado formato.
Un documento HTML está formado por elementos, donde cada elemento se compone
de tres partes: etiqueta inicial, contenido del elemento, y etiqueta final. Cada
elemento indica al navegador cómo presentar el contenido de dicho elemento.
Por ejemplo: un elemento con la etiqueta <p> representa un párrafo.
Figura 4: ejemplo que muestra las partes de un elemento (etiqueta) html
9. La etiqueta html
Dentro de la estructura de un documento web, después de la primera línea DOCTYPE
aparece el bloque <html> </html>.
La etiqueta <html>:
7
Formación
Profesional Oficial
• Indica al navegador que se trata de un documento HTML.

• Representa la raíz de un documento HTML.
• Es el contenedor de todos los demás elementos HTML (con excepción de la

etiqueta <!DOCTYPE>).
Algunas etiquetas contienen atributos. Los atributos proporcionan información
adicional acerca de los elementos HTML. En el siguiente ejemplo se especifica el
lenguaje (idioma) utilizado con el atributo lang.
Es en la etiqueta <html> donde se declara el idioma predeterminado del texto que va a
contener el documento HTML. El atributo utilizado es lang.
Ejemplo: <html lang="es">
10. La cabecera
Dentro de la estructura de un documento web, el primer bloque después de la
etiqueta <html> es el bloque de cabecera encerrado entre las etiquetas <head> y
</head>. Dentro de la cabecera podemos encontrar las etiquetas que aparecen en la
siguiente tabla:
<link> Referencia a hojas de estilos.
<link rel="stylesheet" href="carpeta_css/hoja_de_estilos.css">
<title> Da nombre al documento. El navegador lo presenta en la parte superior

(pestaña). Lo utilizan los buscadores en las páginas de resultados (SERP -
search engine results page, páginas de resultados de los buscadores).
<title>Curso de HTML para FP</title>
<style> Para la hojas de estilos internas.
<style>
h1 {
color: #0000FF;
}
</style>
8
Formación
Profesional Oficial
<script> Llamada a scripts de JavaScript
<script src="carpeta_js/nombre_archivo.js"></script>
<meta> Juego de caracteres, palabras claves para los buscadores y otras

características.
<meta charset="UTF-8">
10.1. Las etiquetas meta

La etiqueta <meta> se utiliza para asignar valores a propiedades de un documento
(descripción del documento, autor, palabras clave, idioma del documento, etc.). Aquí
tienes unos ejemplos de etiquetas meta:
<meta charset="UTF-8">
<meta name="keywords" content="palabra clave 1, palabra clave 2, etc">
<meta name="description" content="Descripción del sitio (archivo)">
<meta name="language" content="Spanish">
<meta name="author" content="Nombre del autor">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta última etiqueta meta le da al navegador instrucciones sobre cómo controlar

las dimensiones y la escala de la página.
La parte width=device-width establece el ancho de la página para seguir el ancho
de pantalla del dispositivo (que variará según el dispositivo).
La parte initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador
carga la página por primera vez.
A continuación, un ejemplo de una página web sin la etiqueta meta viewport y con
ella, en un móvil o tablet:
9
Formación
Profesional Oficial
Figura 5 : sin la etiqueta meta viewport Figura 6: con la etiqueta meta viewport
11. Etiquetas
Etiqueta Función
 Define un comentario
<!DOCTYPE> Define el tipo de documento
<html> Define la raíz del documento
<body> Define el cuerpo del documento
<nav> El elemento <nav> define un conjunto de vínculos de
navegación.
El elemento <nav> está destinado a enlaces de navegación.

<article> Define un artículo. Un artículo debe tener sentido por sí mismo
y debería ser posible distribuirlo de forma independiente del
resto del sitio web.
Ejemplos en los que se puede utilizar un elemento <article>:
• Mensaje Foro.
• Blog post.
• Noticias.
• Comentario.
<aside> Define el contenido lateral del contenedor de una página. El
contenido de un lado debe estar relacionado con el contenido
circundante.
10
Formación
Profesional Oficial
<a> Define un enlace.

<section> Define una sección de un documento.
<footer> Define el pie de página de un documento.
<form> Define un formulario html.
<h1> a <h6> Define encabezados o títulos.
<header> Define la sección de encabezado del documento.
<iframe> Define un frame en línea.
<img> Define una imagen.
<p> Define un párrafo.
<script> Define un script del lado cliente.
<table> Define una tabla.
<title> Define un título para el documento.
12. Presentación de texto

En los siguientes apartados vamos a ver las principales etiquetas HTML para presentar
texto en nuestros documentos:
• Etiquetas para formatear texto.

• Etiquetas para la estructura de contenidos: listas y tablas.
• Etiquetas para colocar comentarios dentro de nuestros documentos y que no
aparecerán en el navegador cuando los visualicemos.
12.1. Etiquetas para formatear texto

• Comentarios.
• Títulos o cabeceras.
• Etiquetado por contenido.
• Enfatización.
• Hojas de estilos CSS.
12.1.1. Comentarios
Para insertar comentarios dentro del código html, basta con insertar el texto que
queramos comentar entre .


11
Formación
Profesional Oficial
12.1.2. Títulos o cabeceras

Para las cabeceras de contenido, el lenguaje HTML nos ofrece las etiquetas <h1> a
<h6> que nos permiten formatear los titulares con atributos ya predefinidos. Ejemplo:
Figura 5: etiquetas y resultado en el navegador
h1 es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más

importante en una página web. El lenguaje HTML nos permite establecer diferentes
cabeceras según su importancia. Cabe destacar que aunque la representación en el
navegador tenga tamaños diferentes, bajo ningún concepto deben utilizarse las
cabeceras por su tamaño, sino por su importancia y relevancia en el documento. De
hecho, a través de CSS podríamos hacer que una cabecera o encabezado h1 apareciese
en el navegador con un tamaño inferior al de un h6. No tendría sentido pero se puede
hacer.
12.1.3. Etiquetado por contenido

Según el tipo de contenido a presentar, podemos utilizar alguna de las
etiquetas que aparecen a continuación:
<abbr> El elemento HTML <abbr> (o elemento de abreviación)

representa una abreviación o acrónimo.
El atributo opcional title puede ampliar o describir la

abreviatura. Si está presente, el atributo title debe contener
la descripción completa.
<p>La <abbr title="Organización de Naciones

Unidas">ONU</abbr> es una organización...</p>
<cite> Marca una referencia a una fuente, o el autor de un texto

citado.
12
Formación
Profesional Oficial
<p><cite>Sócrates</cite> dijo: "Sólo sé que no sé nada"</p>
<q> Elemento de cita en línea. El elemento HTML <q> indica que

el texto adjunto es una cita corta en línea. La mayoría de los
navegadores modernos implementan esto rodeando el texto
entre comillas.
<p><cite>Sócrates</cite> dijo: <q>Sólo sé que no sé

nada</q></p>
<blockquote> Elemento de cita en bloque.
<blockquote>Texto de la cita</blockquote>
<code> Apropiado para marcar el código de un programa.
<code>$variable=7;</code>
<samp> Se utiliza para incluir texto en línea que representa una

muestra (o cita) de la salida de un programa de ordenador. El
contenido de esta etiqueta es renderizado generalmente
usando la tipografía monoespaciada por defecto del
navegador.
<p><samp>Hola mundo</samp></p>
12.1.4. Enfatización
Una de las características del formato de presentación del texto es la
enfatización, es decir (tipografía en negrita, subrayado, itálica, etc.). No
obstante, esto se puede y se debería realizar a través de CSS. Más adelante
entenderás las ventajas de no hacerlo en el documento HTML.
13
Formación
Profesional Oficial
<b> Negrita
<b>Hola</b>
<i> Cursiva o itálica
<i>Hola</i>
<em> Cursiva o itálica (de otra forma)
<em>Hola</em>
<u> Subraya
<u>Hola</u>
<strong> Enfatiza. Se suele mostrar en negrita.
<strong>Hola</strong>
12.1.5. Hojas de estilos CSS

Una hoja de estilos CSS (Cascading Style Sheets) se utiliza para aplicar atributos
a los elementos HTML. Consiste en un conjunto de normas de estilo que le
dicen a un navegador cómo tiene que presentar un documento HTML, XHTML o
XML.
Un documento HTML se encarga de la información (qué quiero presentar), y
CSS se encarga de la presentación (cómo lo quiero presentar).
CSS permite especificar cosas como el tamaño, el color, el tipo de fuente, el
espaciado, la ubicación de texto e imágenes en la página, márgenes, etc.
Aunque veremos CSS más adelante, sirva como muestra un ejemplo de
modificación de la presentación desde HTML mediante el atributo style. El
atributo style puede contener cualquier propiedad CSS. El siguiente ejemplo
muestra cómo cambiar el color del texto de un párrafo:
14
Formación
Profesional Oficial
<p style="color: blue;">Esto es un párrafo.</p>
Recuerda que esto se puede y se debería realizar a través de CSS. Más

adelante entenderás las ventajas de no hacerlo en el documento HTML.
EJERCICIO 1 (ejercicio_1_encabezados.html)
Con la siguiente información, realiza un documento HTML que tenga un título
de primer nivel <h1>, y los títulos de nivel <h2> y <h3> que estimes necesarios.
Debes definir un párrafo para cada título de tercer nivel que indique para qué
sirve cada tipo de dato especificado. Debes incluir un título utilizando la
etiqueta <title>.
Tipos de datos en MySQL
Cadenas
CHAR
VARCHAR
Números
TINYINT
SMALLINT
Fechas
DATE
TIME
12.2. Etiquetas para la estructura de contenidos: listas y tablas.

Podemos crear tres tipos de listas:
• Listas ordenadas.
• Listas desordenadas.
• Listas de definición.
15
Formación
Profesional Oficial
12.2.1. Listas
12.2.1.1. Listas ordenadas
Los elementos se presentan numerados:
1. Elemento 1
2. Elemento 2
3. Elemento 3
4. …
<ol>: (ordered list), etiqueta de apertura de lista ordenada. Crea una lista
ordenada con números, letras o números romanos.
Atributos (obsoletos):
• type: 1, A, a, I, i
• start: número. Indica con qué número o letra comienza la lista.
</ol>: etiqueta de cierre de lista ordenada.

<li>: (list item), etiqueta de apertura para los elementos de una lista
ordenada o desordenada.
</li>: etiqueta de cierre para los elementos de una lista ordenada o
desordenada.
Ejemplo:
<ol>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ol>
12.2.1.2. Listas desordenadas

Los elementos se presentan con una viñeta:
• Elemento 1
• Elemento 2
• …
16
Formación
Profesional Oficial
<ul>: (unordered list), etiqueta de apertura de lista desordenada. Crea una

lista desordenada con viñetas.
Atributos (obsoletos):
• type: disc (por defecto), circle, square.

</ul>: etiqueta de cierre de lista ordenada.
<li>: (list item), etiqueta de apertura para los elementos de una lista
ordenada o desordenada.
</li>: etiqueta de cierre para los elementos de una lista ordenada o
desordenada.
Ejemplo:
<ul>
<li>Primer elemento de la lista</li>
<li>Segundo elemento de la lista</li>
<li>Tercer elemento de la lista</li>
</ul>
EJERCICIO 2 (ejercicio_2_listas.html)
Crea un documento html que tenga una lista ordenada y una lista
desordenada con cinco países europeos.
EJERCICIO 2 (continuación)
En el mismo archivo del ejercicio anterior, añade una lista ordenada y una
lista desordenada con los cinco países europeos, pero en esta ocasión:
• La lista ordenada debe ser con letras minúsculas y empezar en la e.

• La lista desordenada debe ser con cuadrados.
12.2.1.3. Listas de definición

Presentan términos y definiciones con diferente tabulación:
Término 1
Definición del término 1
17
Formación
Profesional Oficial
Término 2
Término 3
Los términos pueden tener más de una definición:

Término 1
Primera definición del término 1
Segunda definición del término 1
Término 2
Término 3
Primera definición del término 3
Segunda definición del término 3
<dl>: (definition list), etiqueta de apertura de una lista de definición.

</dl>: etiqueta de cierre de una lista de definición.
<dt>: (definition term), etiqueta de apertura del término que vamos a
definir.
</dt>: etiqueta de cierre del término que vamos a definir.
<dd>: etiqueta de apertura para la definición.
</dd>: etiqueta de cierre para la definición.
18
Formación
Profesional Oficial
Ejemplo:
<dl>
<dt>Término 1</dt>
<dd>Primera definición del término 1</dd>
<dd>Segunda definición del término 1</dd>
<dt>Término 2</dt>
<dd>Definición del término 2</dd>
</dl>
En las listas ordenadas y desordenadas, podemos crear listas anidadas, es decir, una
lista dentro de otra lista. Hay que tener especial cuidado con la anidación. Ejemplo:
Leche
Huevos
Legumbres
Judías
Lentejas
Guisantes
Pan
19
Formación
Profesional Oficial
Solución errónea Solución correcta
<ul> <ul>
<li>Leche</li> <li>Leche</li>
<li>Huevos</li> <li>Huevos</li>
<li>Legumbres</li> <li>Legumbres
<ol> <ol>
<li>Judías</li> <li>Judías</li>
<li>Lentejas</li> <li>Lentejas</li>
<li>Guisantes</li> <li>Guisantes</li>
</ol> </ol>
<li>Pan</li> </li>
</ul> <li>Pan</li>
</ul>
La lista que contiene los elementos La lista que contiene los elementos
judías, lentejas, guisantes, no está judías, lentejas, guisantes, debe ser un
representada como hijo del elemento hijo del elemento legumbres. El </li> que
legumbres. El </li> que cierra legumbres cierra legumbres debe estar después de
está mal ubicado. cerrar la lista hijo.
20
Formación
Profesional Oficial
EJERCICIO 3 (ejercicio_3_listas_anidadas.html)
Realiza un documento html que tenga una lista desordenada que represente
correctamente el siguiente esquema:
Europa
España
Italia
Francia
Portugal
Suiza
Asia
Malasia
China
Japón
India
Tailandia
África
Marruecos
Argelia
Túnez
Nigeria
Sudáfrica
América
Estados Unidos
Brasil
Colombia
Ecuador
Argentina
21
Formación
Profesional Oficial
EJERCICIO 4 (ejercicio_4_listas_anidadas.html)
Realiza un documento html que tenga una lista desordenada que represente
correctamente el siguiente esquema:
Europa
España
Madrid
Toledo
Ciudad Real
Cuenca
Italia
Roma
Venecia
Florencia
Milán
Francia
París
Lyon
Nimes
Burdeos
Portugal
Lisboa
Oporto
Coimbra
Suiza
Berna
Zúrich
Basilea
22
Formación
Profesional Oficial
12.2.2. Tablas
Las tablas suponen una de las estructura más importantes para la presentación
de contenido tabulado. Están formadas por un conjunto de celdas, distribuidas
en filas y columnas.
Su estructura básica es la siguiente:
Etiqueta Descripción
<table> Etiqueta de apertura de tabla.
</table> Etiqueta de cierre de tabla.
<tr> Etiqueta de apertura (inicio) de una fila.
</tr> Etiqueta de cierre (fin) de una fila.
<td> Etiqueta de apertura (inicio) de una celda
</td> Etiqueta de cierre (fin) de una celda.
<th> Etiqueta de apertura de un encabezado.
</th> Etiqueta de cierre de un encabezado.
Funciona exactamente igual que un <td>, excepto que denota

un encabezado, no una celda normal.
Los encabezados de las tablas vienen con un estilo predeterminado: están

en negrita y centrados (incluso si no añades tu estilo propio a la tabla).
23
Formación
Profesional Oficial
13. Multimedia
• Etiquetas para IMAGEN.
• Etiquetas para AUDIO.
• Etiquetas para VÍDEO.
13.1. Etiquetas para IMAGEN

Para incluir una imagen en un documento web, utilizamos la etiqueta <img> junto con
algunos atributos:
• src: indica la ruta de la imagen.
• alt: texto alternativo.
• title: aporta información adicional en un “globo” al posicionarse sobre la
imagen.
Ejemplo: <img src="media/img/imagen.jpg" alt="texto alternativo" title=”vista de…>
13.2. Etiquetas para AUDIO

Para insertar un archivo de audio se utiliza la etiqueta <audio> y <source> y algunos
atributos como controls y src.
<audio controls>
<source src="cancion1.ogg" type="audio/ogg">
<source src="cancion1.mp3" type="audio/mpeg">
<source src="cancion1.waw" type="audio/waw”>
</audio>
13.3. Etiquetas para VÍDEO

Para insertar un archivo de vídeo se utiliza la etiqueta <video> y <source> y algunos
atributos como controls y src.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
24
Formación
Profesional Oficial
Atributos Descripción
controls muestra los controles que permiten parar, reproducir.
autoplay se reproducirá en cuanto esté listo
preload se empiece a cargar inmediatamente.

preload=“none” empieza cuando el usuario haga clic.
loop Reproducción cíclica
14. Enlaces
Un enlace es un acceso o direccionamiento:
• A una página HTML.

• A una zona dentro de una página HTML.
• A una imagen.
• A servicios como transferencia de ficheros o correo electrónico.
La etiqueta para crear un enlace <a>, y contiene algunos atributos:
<a href="destino.html" title="Descripción del destino“ alt=“Texto alternativo”
target="donde abrir el documento">Texto o imagen del enlace</a>
target=”_blank” abrirá en pestaña nueva. Por defecto, abre en la misma pestaña.
14.1. Enlaces absolutos

href=”http://www.ejemplo.es” url de un sitio web.
14.2. Enlaces relativos

href=”productos.html” archivo de mi página web.
25
Formación
Profesional Oficial
14.3. Ejemplos de enlaces
Ejemplo de enlace relativo con texto:

<a href="inicio.html" title="Página de inicio“>Inicio</a>
Ejemplo de enlace absoluto con texto:

<a href="http://ww.audi.es" title="Ir a Audi“ target=”_blank” >Audi</a>
Ejemplo de enlace relativo con una imagen:

<a href="inicio.html" title="Página de inicio“ alt=”Texto por si falla la imagen”>
<img src=”imagen.jpg” …>
</a>
Ejemplo de enlace absoluto con una imagen:

<a href="http://ww.audi.es" title="Ir a Audi“ target=”_blank” alt=”Texto por si falla la
imagen”>
<img src=”imagen.jpg” …>
</a>
26

HTML

Cargado por

Información del documento

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

HTML

Cargado por

Copyright:

Formatos disponibles

Lenguajes de marcas y sistemas de

14.1. Enlaces absolutos .................................................................................................... 25

3. ¿Cómo se transmite la información?

3.2. ¿Cómo funciona el par Cliente-Servidor?

El proveedor de acceso del internauta consulta a su servidor de nombres de dominio

4. Estructura básica de una página web

Figura 1: las distintas partes que componen un documento o página HTML

Título (pestaña del navegador)

Figura 2: documento HTML con contenido

Figura 3: visualización en un navegador

5. Herramientas para el diseño de páginas webs

Debemos utilizar buenas prácticas:

• Cerrando los elementos.

8. Formato de las etiquetas HTML5

Figura 4: ejemplo que muestra las partes de un elemento (etiqueta) html

• Indica al navegador que se trata de un documento HTML.

• Es el contenedor de todos los demás elementos HTML (con excepción de la

<link> Referencia a hojas de estilos.

<link rel="stylesheet" href="carpeta_css/hoja_de_estilos.css">

<title> Da nombre al documento. El navegador lo presenta en la parte superior

<title>Curso de HTML para FP</title>

<style> Para la hojas de estilos internas.

<script> Llamada a scripts de JavaScript

<meta> Juego de caracteres, palabras claves para los buscadores y otras

10.1. Las etiquetas meta

Esta última etiqueta meta le da al navegador instrucciones sobre cómo controlar

El elemento <nav> está destinado a enlaces de navegación.

<a> Define un enlace.

12. Presentación de texto

• Etiquetas para formatear texto.

12.1. Etiquetas para formatear texto

12.1.2. Títulos o cabeceras

Figura 5: etiquetas y resultado en el navegador

h1 es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más

12.1.3. Etiquetado por contenido

<abbr> El elemento HTML <abbr> (o elemento de abreviación)

El atributo opcional title puede ampliar o describir la

<p>La <abbr title="Organización de Naciones

<cite> Marca una referencia a una fuente, o el autor de un texto

<p><cite>Sócrates</cite> dijo: "Sólo sé que no sé nada"</p>

<q> Elemento de cita en línea. El elemento HTML <q> indica que

<p><cite>Sócrates</cite> dijo: <q>Sólo sé que no sé

<blockquote> Elemento de cita en bloque.

<code> Apropiado para marcar el código de un programa.

<samp> Se utiliza para incluir texto en línea que representa una

<i> Cursiva o itálica

<em> Cursiva o itálica (de otra forma)

<strong> Enfatiza. Se suele mostrar en negrita.

12.1.5. Hojas de estilos CSS

<p style="color: blue;">Esto es un párrafo.</p>

Recuerda que esto se puede y se debería realizar a través de CSS. Más

12.2. Etiquetas para la estructura de contenidos: listas y tablas.

</ol>: etiqueta de cierre de lista ordenada.

12.2.1.2. Listas desordenadas

<ul>: (unordered list), etiqueta de apertura de lista desordenada. Crea una

• type: disc (por defecto), circle, square.

• La lista ordenada debe ser con letras minúsculas y empezar en la e.

12.2.1.3. Listas de definición

Los términos pueden tener más de una definición:

<dl>: (definition list), etiqueta de apertura de una lista de definición.

Solución errónea Solución correcta

<table> Etiqueta de apertura de tabla.

</table> Etiqueta de cierre de tabla.

<tr> Etiqueta de apertura (inicio) de una fila.