HTML 5
Tutorial de HTML
Tutorial de HTML
Tutorial de HTML para crear páginas web.
El código HTML se utiliza para almacenar el contenido de las páginas
web. Es un lenguaje basado en <etiquetas> que identifican las
diferentes secciones de un documento.
En las siguientes prácticas se verán una a una las etiquetas más
importantes del lenguaje HTML y cómo se utilizan para crear páginas
web.
1. Introducción a los ejercicios HTML y CSS
2. Estructura de una página HTML
3. Párrafos de texto
4. Encabezados de distintos niveles
5. Comentarios
6. Etiquetas de nueva línea
7. Símbolos especiales
8. Texto preformateado
9. Etiquetas de énfasis
10. Bloque de cita externa
11. Hipervínculos
12. Imágenes
13. Objetos externos
14. Combinar etiquetas imagen y link
15. Ejercicio de enlaces internos
16. Listas de datos
17. Listas anidadas
18. Definición de palabras
1
Tutorial de HTML
19. Tablas de datos
20. Unir celdas de una tabla
21. Combinar etiquetas lista y tabla
22. Combinar etiquetas imagen y tabla
23. Proyecto de página Web
24. Resumen de etiquetas HTML
Siguiente Anterior
2
Tutorial de HTML
1. Introducción a los ejercicios
HTML y CSS
Editor de texto
Para crear los archivos que se van a ver en este tutorial solo se
necesita un simple editor de texto.
En Windows, el más simple es el Block de notas, que tiene la ventaja
de encontrarse en todas las versiones de Windows.
A la hora de guardar por primera vez el código HTML o el código CSS
hay que seleccionar dos opciones para no tener problemas con el
archivo.
1. El tipo de archivo debe ser "Todos los archivos (*.*)"
Con esta opción, la extensión del archivo se podrá elegir
como .html o como .css en vez de guardar la extensión por
defecto .txt, que no serviría.
2. La codificación debe ser UTF-8
3
Tutorial de HTML
De esta forma los caracteres especiales como los acentos o la eñe
se guardarán y se visualizarán correctamente.
3. Para guardar las modificaciones posteriores del archivo .html no
es necesario repetir todo este proceso.
Simplemente selecciona en el menú Archivo... Guardar o pulsa
Ctrl-G y se guardará correctamente.
Si se quiere utilizar un editor de texto más profesional y con más
opciones el editor de texto Notepad++ es libre, gratuito y una gran
opción.
La ventaja de utilizar Notepad++ u otro editor de textos avanzado es
que estos editores hacen resaltado de sintaxis y eso ayuda mucho a
comprobar errores y evitarlos mientras se escribe el código.
Visualización en navegador y
modificaciones
Una vez guardado el archivo HTML, al pinchar sobre él se abrirá en el
navegador y podemos ver el resultado.
Para realizar modificaciones, tendremos que volver a editar el archivo
con el editor de textos. No es posible modificar un archivo HTML a
través del navegador.
Para conseguirlo debemos pulsar el botón derecho del ratón sobre el
archivo y elegir la opción Abrir con... para elegir el Block de notas.
Otra solución es arrastrar el archivo HTML sobre el Block de notas y
se abrirá su contenido para editarlo.
Errores de código
Normalmente el navegador no muestra los errores que se han
cometido al escribir el código. En ocasiones no muestra nada si el
código es incorrecto.
Para visualizar los errores de código, en el navegador Firefox
seleccionamos en el menú de Herramientas... Desarrollador Web...
Inspector
4
Tutorial de HTML
Aparecerá en la parte baja del navegador un conjunto de herramientas
muy útil para comprobar qué parte del código corresponde a la
pantalla y viceversa.
Errores habituales
Esta es una pequeña lista con los errores más habituales. Conviene
repasarla antes de buscar otros errores menos comunes.
No se ha cerrado una etiqueta correctamente. Por ejemplo, en
<h1>Título<h1> le falta la barra en la segunda etiqueta: </h1>
No se ha cerrado un comentario correctamente.
Editor de texto para Linux
Existen muchos editores de texto compatibles con el sistema operativo
Linux. Los editores por defecto tales como Pluma Text Editor o Gedit
sirven para realizar cualquier práctica de este tutorial.
Se recomienda utilizar Gedit con resaltado de sintaxis (syntax
hightlighting) para encontrar los errores con más facilidad. Para activar
esta opción hay que seleccionar en el menú View... Highlight mode... y
el lenguaje utilizado.
Siguiente Anterior
2. Estructura de una página
HTML
Una página HTML es un documento de texto que está estructurado
con etiquetas. Las etiquetas definen lo que significa cada bloque de
texto y realizan divisiones entre unos bloques de texto y otros.
En esta primera práctica vamos a crear una simple página HTML con
una estructura mínima.
5
Tutorial de HTML
Etiquetas utilizadas
<html> </html>
Etiqueta inicial y final de todos los documentos de tipo HTML.
<head> </head>
Sección de cabecera del documento. En esta sección se define
el título de la página, los estilos, etc.
<title> </title>
Título de la página HTML. Debe aparecer en la sección <head>.
<body> </body>
Cuerpo del documento. En esta sección estarán todos los
contenidos que aparecen en la página web. Textos, imágenes,
listas, tablas, etc.
<p> </p>
Etiqueta de párrafo. Engloba un párrafo de texto con varias
frases consecutivas. Terminan en un punto y aparte.
Código de la página
Plantilla de documento HTML.
<html>
<!-- Cabecera -->
<head>
<title> </title>
</head>
<!-- Cuerpo -->
<body>
6
Tutorial de HTML
</body>
</html>
Resultado
3. Párrafos de texto
Los párrafos agrupan palabras y frases que se muestran juntas. Todos
los espacios y nuevas líneas dentro de un párrafo se eliminan.
Los párrafos siempre terminan en un punto y aparte por lo que al final
del párrafo se muestra una nueva línea.
Etiquetas utilizadas
<p> </p>
Etiqueta de párrafo. Engloba un párrafo de texto con varias
frases consecutivas. Terminan en un punto y aparte.
7
Tutorial de HTML
Código de la página
8
Tutorial de HTML
Resultado
4. Encabezados de distintos
niveles
En esta práctica veremos cómo estructurar un contenido con
encabezados de diferente nivel.
En una misma página web no es recomendable utilizar más de cuatro
niveles de encabezados. El objetivo de los encabezados es estructurar
el contenido para que sea más sencillo de comprender. Si se utilizan
demasiadas divisiones, la comprensión se hace más difícil.
Etiquetas utilizadas
<h1> </h1>
Encabezado de primer nivel. Equivale a un título de capítulo.
<h2> </h2>
Encabezado de segundo nivel. Equivale a un título de sección.
<h3> </h3>
9
Tutorial de HTML
Encabezado de tercer nivel. Equivale a un título de subsección.
<h4> </h4>
Encabezado de cuarto nivel.
Código de la página
10
Tutorial de HTML
Resultado
11
Tutorial de HTML
12
Tutorial de HTML
Siguiente Anterior
5. Comentarios
Etiquetas utilizadas
<!-- comentario -->
Etiqueta para incluir un comentario dentro del código HTML. Los
comentarios sirven para explicar el código HTML pero no se
visualizarán en la página web.
Código de la página
13
Tutorial de HTML
Resultado
6. Etiquetas de nueva línea
Normalmente los caracteres de nueva línea son ignorados y todo el
texto escrito aparece junto.
Para forzar a que el navegador continúe el texto en una nueva línea es
necesario escribir la etiqueta <br>.
La etiqueta <hr> además de un salto de línea, insertará una raya
horizontal de separación.
Etiquetas utilizadas
<br>
Salto de línea. Lo que esté escrito a continuación aparecerá en
la siguiente línea en el navegador.
<hr>
Línea horizontal de separación.
14
Tutorial de HTML
Código de la página
15
Tutorial de HTML
Resultado
Siguiente Anterior
7. Símbolos especiales
Utilización de símbolos especiales escritos entre los caracteres
ampersand "&" y punto y coma ";".
Esta forma de escribir los símbolos permite que aparezcan en el
navegador los caracteres menor que "<" y mayor que ">", que de otra
forma se interpretan como inicio y final de etiqueta.
También se pueden escribir otros caracteres especiales como la Ñ
utilizando solo texto ASCII estándar en teclados que no dispongan de
estas teclas.
16
Tutorial de HTML
Código de la página
17
Tutorial de HTML
Resultado
8. Texto preformateado
Etiquetas utilizadas
<pre> </pre>
Etiqueta de texto preformateado. Se preservan todos los
espacios y saltos de línea. La fuente utilizada es de ancho fijo
(monospaced).
<code> </code>
18
Tutorial de HTML
Etiqueta para incluir código para ordenador. El tipo de letra será
de ancho fijo.
Código de la página
19
Tutorial de HTML
Resultado
Siguiente Anterior
9. Etiquetas de énfasis
El texto destacado o las palabras clave se pueden indicar con dos
etiquetas preparadas para ese cometido <em> y <strong>.
Etiquetas utilizadas
<em> </em>
Texto destacado con énfasis. El tipo de letra será itálica.
<strong> </strong>
Texto importante con énfasis fuerte. El tipo de letra será negrita.
20
Tutorial de HTML
Código de la página
Resultado
Siguiente Anterior
21
Tutorial de HTML
10. Bloque de cita externa
Etiquetas utilizadas
<blockquote cite="http://"> </blockquote>
Etiqueta que incluye una sección de texto que se ha copiado de
otra página. La etiqueta blockquote contiene un atributo cite que
describe la dirección de donde se ha tomado el texto.
Normalmente esta sección aparece desplazada hacia la
derecha.
Código de la página
22
Tutorial de HTML
Resultado
11. Hipervínculos
Los hipervínculos son enlaces desde un documento a otro documento
o a otra parte del mismo documento y permiten navegar entre
documentos con facilidad.
La letra H del nombre HTML se refiere a los Hipervínculos.
Etiquetas utilizadas
<a href="salto"> Texto </a>
Hipervínculo. En el navegador aparecerá el texto que se
encuentra entre las etiquetas. Al pinchar sobre el texto, saltará a
la referencia que contiene href.
id="nombre"
Este atributo aparece dentro de una etiqueta para darle nombre.
el nombre tiene que ser único y no repetirse, para distinguir las
etiquetas entre sí.
23
Tutorial de HTML
Archivos para descargar y pegar en el mismo directorio que la página
html que estamos escribiendo.
texto.rtf
html-link2.html
Código de la página
24
Tutorial de HTML
Resultado
25
Tutorial de HTML
26
Tutorial de HTML
12. Imágenes
Etiquetas utilizadas
<img src="imagen">
Vínculo a una imagen que se insertará en el documento.
Código de la página
Imágenes para descargar:
Playa.
Gráfico
27
Tutorial de HTML
Resultado
13. Objetos externos
Etiquetas utilizadas
<object data=""> </object>
Esta etiqueta inserta en la página HTML un elemento externo
que puede ser un archivo de texto, un vídeo, sonidos, una
28
Tutorial de HTML
página web, etc. El nombre y ruta del objeto se escribe dentro
de el atributo data.
<iframe src=""> </object>
Esta etiqueta inserta un documento externo en la página HTML
actual. Para insertar un vídeo de Youtube, hay que pinchar
sobre el vídeo con el botón derecho del ratón y seleccionar la
opción 'Copiar código de inserción'. Por último se pega ese
código dentro del documento HTML.
Descargas:
Página HTML a insertar.
Código Youtube.
<!-- Vídeo de Youtube insertado -->
<iframe width="320" height="180"
src="https://www.youtube.com/embed/cqMfPS8jPys"
frameborder="0"> </iframe>
29
Tutorial de HTML
Código de la página
30
Tutorial de HTML
Resultado
14. Combinar etiquetas imagen
y link
Estas etiquetas se pueden combinar entre sí para conseguir ambos
efectos.
En este Ejercicio HTML se insertará una imagen dentro de un
hipervínculo. Al pinchar sobre la imagen, el navegador saltará a otra
página.
31
Tutorial de HTML
Código de la página
Imágenes para descargar.
Playa.
Resultado
32
Tutorial de HTML
Siguiente Anterior
15. Ejercicio de enlaces
internos
Hacer una tabla de contenidos compuesta por una lista con enlaces
internos a cada uno de los encabezados de la página. Cada grupo
animal debe incluir una fotografía. La estructura de la página debe ser
la siguiente.
33
Tutorial de HTML
Código de la página
34
Tutorial de HTML
35
Tutorial de HTML
Resultado
36
Tutorial de HTML
37
Tutorial de HTML
Siguiente Anterior
16. Listas de datos
Etiquetas utilizadas
<ol> </ol>
Etiqueta de lista numerada.
<ul> </ul>
Etiqueta de lista no numerada.
<li> </li>
Etiqueta que contiene un elemento de la lista.
Código de la página
38
Tutorial de HTML
Resultado
17. Listas anidadas
Las listas se pueden combinar para hacer listas de listas. La mayoría
de las páginas web suelen agrupar los elementos del menú de esta
manera.
En esta práctica veremos cómo realizar una lista de animales con
jerarquía.
39
Tutorial de HTML
Código de la página
40
Tutorial de HTML
Resultado
Siguiente Anterior
18. Definición de palabras
Etiquetas utilizadas
<dl> </dl>
Etiqueta de definición de palabras.
<dt> </dt>
Palabra a definir.
<dd> </dd>
Definición de una palabra.
41
Tutorial de HTML
Código de la página
42
Tutorial de HTML
Resultado
Siguiente Anterior
19. Tablas de datos
<table> </table>
Etiqueta de tabla.
<thead> </thead>
Etiqueta la cabecera de una tabla. Está en la primera fila de una
tabla.
<tr> </tr>
Etiqueta una fila dentro de una tabla.
<th> </th>
Etiqueta cada uno de los elementos de una cabecera de tabla.
<tbody> </tbody>
Cuerpo de una tabla, donde se encuentran los contenidos de la
tabla. Permite separar la cabecera de los contenidos.
43
Tutorial de HTML
<td> </td>
Etiqueta un elemento de una tabla. Debe estar dentro de una
fila.
<!-- comentario -->
Etiqueta para incluir un comentario dentro del código HTML. Los
comentarios sirven para explicar el código HTML pero no se
visualizarán en la página web.
Código de una tabla simple
Plantilla de tabla de datos sin cabecera.
<table border="1">
44
Tutorial de HTML
<tbody>
<tr>
<td>Uno</td> <td> 1 </td>
</tr>
<tr>
<td>Dos</td> <td> 2 </td>
</tr>
</tbody>
</table>
Resultado
45
Tutorial de HTML
Código de una tabla con encabezado
Plantilla de tabla de datos con cabecera.
<table border="1">
<thead>
<tr>
<th>Columna 1</th> <th>Columna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Uno</td> <td> 1 </td>
</tr>
<tr>
46
Tutorial de HTML
<td>Dos</td> <td> 2 </td>
</tr>
</tbody>
</table>
Resultado
Siguiente Anterior
20. Unir celdas de una tabla
Etiquetas utilizadas
<td rowspan=2>
Este atributo aparece dentro de un elemento de tabla <td>.
Permite unir la celda actual con las celdas de la derecha de la
misma fila, para hacer una sola celda más grande.
<td colspan=2>
Este atributo aparece dentro de un elemento de tabla <td>.
Permite unir la celda actual con las celdas de abajo de la misma
columna, para hacer una sola celda más grande.
47
Tutorial de HTML
Código de la página
48
Tutorial de HTML
49
Tutorial de HTML
Resultado
Siguiente Anterior
21. Combinar etiquetas lista y
tabla
Estas etiquetas se pueden combinar para conseguir varios efectos
simultáneos. En este Ejercicio HTML se insertará una lista dentro de
una tabla.
50
Tutorial de HTML
Código de la página
51
Tutorial de HTML
Resultado
Siguiente Anterior
22. Combinar etiquetas imagen
y tabla
Estas etiquetas se pueden combinar entre si para conseguir los
efectos de ambas. En este Ejercicio HTML se insertará una imagen
dentro de una tabla.
52
Tutorial de HTML
Código de la página
Imágenes para descargar.
Playa.
Gráfico
53
Tutorial de HTML
Resultado
Siguiente Anterior
23. Proyecto de página Web
Escribe una página HTML para hacer una ficha con tu nombre de pila.
La página web comenzará con un nombre de pila como título,
continuará con varias informaciones sobre el nombre, tal y como se
muestra al final de esta página, y terminará con las imágenes de dos
personas famosas con ese mismo nombre y con hipervínculos a la
Wikipedia de cada famoso.
Se adjunta un ejemplo de estructura de página web para que sirva de
guía a la hora de hacer el ejercicio.
54
Tutorial de HTML
Código de la página
55
Tutorial de HTML
56
Tutorial de HTML
Resultado
57
Tutorial de HTML
58
Tutorial de HTML
Siguiente Anterior
24. Resumen de etiquetas
HTML
Etiquetas básicas
<html> </html>
Etiqueta inicial y final de todos los documentos de tipo HTML.
<head> </head>
Sección de cabecera del documento. En esta sección se define
el título de la página, los estilos, etc.
<title> </title>
Título de la página HTML. Debe aparecer en la sección <head>.
<body> </body>
Cuerpo del documento. En esta sección estarán todos los
contenidos que aparecen en la página web. Textos, imágenes,
listas, tablas, etc.
<!-- Comentario -->
Esta etiqueta es un comentario que no se verá en el navegador.
Sirve para comentar aclarar el contenido HTML y facilitar su
comprensión.
Plantilla de documento HTML.
<html>
<!-- Cabecera -->
<head>
<title> </title>
</head>
<!-- Cuerpo -->
<body>
</body>
</html>
59
Tutorial de HTML
Etiquetas de contenido
<p> </p>
Etiqueta de párrafo. Engloba un párrafo de texto con varias
frases consecutivas. Terminan en un punto y aparte.
<h1> </h1>
Encabezado de primer nivel. Equivale a un título de capítulo.
<h2> </h2>
Encabezado de segundo nivel. Equivale a un título de sección.
<h3> </h3>
Encabezado de tercer nivel. Equivale a un título de subsección.
<h4> </h4>
Encabezado de cuarto nivel.
Salto de línea
<br>
Salto de línea. Lo que esté escrito a continuación aparecerá en
la siguiente línea en el navegador.
<hr>
Línea horizontal de separación.
Tipos de texto
<em> </em>
Texto destacado con énfasis. El tipo de letra será itálica.
<strong> </strong>
Texto importante con énfasis fuerte. El tipo de letra será negrita.
<cite> </cite>
El texto interior es una cita de otra fuente o de otro autor.
<blockquote cite="http://"> </blockquote>
60
Tutorial de HTML
Etiqueta que incluye una sección de texto que se ha copiado de
otra página. La etiqueta blockquote contiene un atributo cite que
describe la dirección de donde se ha tomado el texto.
Normalmente esta sección aparece desplazada hacia la
derecha.
<pre> </pre>
Etiqueta de texto preformateado. Se preservan todos los
espacios y saltos de línea. La fuente utilizada es de ancho fijo
(monospaced).
<code> </code>
Etiqueta para incluir código para ordenador. El tipo de letra será
de ancho fijo.
Hipervínculos, imágenes y objetos
<a href="salto"> Texto </a>
Hipervínculo. En el navegador aparecerá el texto que se
encuentra entre las etiquetas. Al pinchar sobre el texto, saltará a
la referencia que contiene href.
<img src="imagen">
Vínculo a una imagen que se insertará en el documento.
<object data=""> </object>
Esta etiqueta inserta en la página HTML un elemento externo
que puede ser un archivo de texto, un vídeo, sonidos, una
página web, etc. El nombre y ruta del objeto se escribe dentro
de el atributo data.
id="nombre"
Este atributo aparece dentro de una etiqueta para darle nombre.
el nombre tiene que ser único y no repetirse, para distinguir las
etiquetas entre sí.
Listas y definiciones
<ol> </ol>
61
Tutorial de HTML
Etiqueta de lista numerada.
<ul> </ul>
Etiqueta de lista no numerada.
<li> </li>
Etiqueta que contiene un elemento de la lista.
<dl> </dl>
Etiqueta de definición de palabras.
<dt> </dt>
Palabra a definir.
<dd> </dd>
Definición de una palabra.
Tablas de datos
<table> </table>
Etiqueta de tabla.
<tr> </tr>
Etiqueta una fila dentro de una tabla.
<thead> </thead>
Etiqueta la cabecera de una tabla. Está en la primera fila de una
tabla.
<th> </th>
Etiqueta cada uno de los elementos de una cabecera de tabla.
<tbody> </tbody>
Cuerpo de una tabla, donde se encuentran los contenidos de la
tabla. Permite separar la cabecera de los contenidos.
<td> </td>
Etiqueta un elemento de una tabla. Debe estar dentro de una
fila.
62
Tutorial de HTML
<td rowspan=2>
Este atributo aparece dentro de un elemento de tabla <td>.
Permite unir la celda actual con las celdas de la derecha de la
misma fila, para hacer una sola celda más grande.
<td colspan=2>
Este atributo aparece dentro de un elemento de tabla <td>.
Permite unir la celda actual con las celdas de abajo de la misma
columna, para hacer una sola celda más grande.
Plantilla de tabla de datos sin cabecera.
<table border="1">
<tbody>
<tr>
<td>Uno</td> <td> 1 </td>
</tr>
<tr>
<td>Dos</td> <td> 2 </td>
</tr>
</tbody>
</table>
Siguiente Anterior
63
