Conocidas ya las principales características de HTML estamos listos para aprender sus principales etiquetas para
crear nuestra primera página.
Estructura de una página
Todo documento HTML está formado por los bloques que podemos apreciar en la figura. Pasemos a explicar
cada uno de ellos.
Estructura de bloques de un documento HTML.
especificar que el archivo de texto que estamos escribiendo es un documento HTML,
para ello usamos las instrucciones de inicio y fin de la etiqueta al principio y al final de la página respectivamente:
<html>
Código de la página
</html>
<html>
Código de la página
</html>
Código de la página
El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.
La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas
instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
<html>
<head>
Elementos de la cabecera
</head>
... Resto de código de la página ...
</html>
En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis:
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
<html>
<head>
<title>Mi primera página WEB</title>
</head>
</html>
El resultado de ver esta página con nuestro navegador es el que se observa en la figura. Como vemos, el
área de la pantalla donde suele estar la página está todavía vacía, pero si nos fijamos en la cabecera de la ventana del navegador vemos que el título a pasado de ser en el explorador a "Mi primera página WEB -
Nombre del explorador"
El título de la página es mostrado en la parte superior de la ventana del navegador.
Además cuando un usuario vea nuestra página y decida incluirla en su lista de webs preferidos con la opción
agregar a favoritos del menú Favoritos del navegador añadirá el nombre que le hemos dado a nuestra página en dicho menú, tal y como podemos apreciar en la figura. Aunque el nombre con el que se almacena un Favorito puede ser cambiado por el usuario, si hemos puesto un buen título, lo suficientemente descriptivo a cada una de nuestras páginas le evitaremos esa molestia.
Es importante resaltar que nada de lo que se ponga en la cabecera de la página será mostrado en la zona del
navegador dedicada a mostrar el contenido.
Esto nos induce a pensar que existe otra forma de indicar como será el contenido de la página, pues así es: el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser texto, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto.
<html>
<head>
<title>Mi primera página WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html>
En la figura siguiente podemos apreciar como muestra el navegador este código. Como vemos todo el texto
que hemos escrito entre las instrucciones de inicio y fin forman ahora el cuerpo de nuestra página.
En esta figura observamos la zona de la ventana en la que los navegadores mostrarán el texto que pongamos en el cuerpo de la página.
NOTA: Es posible que aunque no incluyamos las etiquetas html o body nuestras páginas sean visualizadas con algunos navegadores. Sin embargo no debemos confiarnos ya que lo más seguro es que con el resto de navegadores no se vean bien. Por esta razón es muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido.
No hay comentarios:
Publicar un comentario