Mi primera página web
En la descripción de una página web puedes ver la estructura elemental de este tipo de documentos en html y las etiquetas mínimas necesarias. Ahora verás el código que debes escribir para crear un página web usando HTML, la versión HTML 5 simplifica bastante el código de las páginas web.
<!doctype html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>mi primera página</title>
</head>
<body>
<h1 style="text-align: center" >Mi Primera pagina web </h1>
<hr>
<p>Esto tan sencillo es una verdadera página web, aunque le falta el contenido, pero todo llegará.</p>
</body>
</html>
Escribe este código en tu editor de textos y guárdalo con el nombre ejercicio00.html. Ábrela con el explorador que uses y verás que la página muestra la frase "Hola Mundo: Este es el contenido de la página web básica". Realmente ya sabes como crear una página web. Ahora toca ir perfeccionando y completando para mejorar tu página web. Como ves este código es más simple que el usado en versiones anteriores de HTML
La primera linea no necesita más explicaciones: solo define el tipo de documento. Es mucho más simple que la usada por los documentos escritos en HTML4.
<html></html>
Marca el inicio y fin del documento. Como ves lleva un atributo lang con el valor "es-ES". Este atributo es opcional. Indica el idioma en que se escribe la página web. Puede usarse en otros bloques de la página web.
<head></head>
Marca el inicio y fin de la cabecera del documento. Dentro va información sobre la página web. En este caso el título de la página, pero no se mostrará en el navegador.
<title></title>
Etiquetas que encierran el título de la página que se mostrará en la barra del navegador. Este valor debe cuidarse pues es útil para que los robots de los buscadores localicen la página y la sitúen en un buen lugar.
<body></body>
Marca la parte del documento donde se pone el contenido de la página web en sí, es decir, lo que se mostrará en el navegador.
Para empezar es suficiente. Fíjate en las etiquetas usadas en esta página básica, verás que:
- Las etiquetas tienen dos partes una de apertura y otra de cierre (salvo excepciones) rodeando al elemento al que afectan.
- Una etiqueta puede llevar atributos: valores que modifican su función
- La apertura se escribe entre dos ángulos <head>, <body>, <p>
- El cierre se escribe entre ángulos pero con la barra invertida antes del nombre </head>, </body>, </p>
- Las etiquetas no se pueden solapar, pero pueden estar contenidas unas en otras: <title> está contenido en <head>
<title>
</head>
Mi primera página</title>
<body>
Las etiquetas de cierre en muchas etiquetas pueden omitirse según el estandard si en el contexto se deduce el cierre, por ejemplo </li> que marca el final de un elemento en una lista podría omitirse si a continuación de ese elemento aparece otro. Es decir que la etiqueta de cierre está implicita aunque pueda no estar escrita, por ello lo aconsejable es escribir siempre las eqtiquetas de cierre de forma explicita.
<ul>
<li>Advertencias</li>
<li>Contenido</li>
</ul>
<!-- sería igual que -->
<ul>
<li>Advertencias
<li>Contenido
</ul>
Las etiquetas de cierre pueden estar implícitas en determinadas circunstancias. Pero mejor escribirlas siempre.
Los navegadores web pueden dejan pasar algunos errores de sintáxis en el código de la página, pero no debes fiarte de esto. Que tu página se vea bien no es suficiente, debe estar bien escrita. Por tanto intenta siempre escribir el código web sin errores de ningún tipo. Hay editores que advierten de los fallos de sintaxis que se puedan cometer, y además la W3C tiene heramientas online para ayudarte a detectar errores por mal uso de las marcas HTML y CSS (W3C validator).
El elemento charset nos asegura que los caracteres especiales del idioma se muestran correctamente .
Un juego de caracteres es una tabla donde se asigna un código a cada carácter.
El juego utf-8 asegura la compatibilidad del idioma en que esté escrita la página.
Revisa los ejercicios sobre HTML básico