En esta unidad vamos a empezar a ver las etiquetas que sirven para colocar el texto en una página web. Antes, de forma sencilla, veremos la estructura básica de una página web, también veremos una primera introducción a las hojas de estilo CSS.
En este vídeo puedes ver la estructura de una página web y párrafos de texto:
En este vídeo puedes ver las etiquetas de texto:
En este vídeo puedes ver una introducción a las hojas de estilo:
La primera línea <!DOCTYPE ... > no es propiamente una etiqueta de HTML, sino una declaración o instrucción al navegador sobre la versión de HTML que utiliza la página. Para la versión HTML 5, el tipo de documento es html: <!DOCTYPE html>
El resto del documento HTML está contenido dentro de la etiqueta <html></html>. Para indicar el idioma es conveniente añadir el atributo lang="es": <html lang="es"></html>
Dentro de la etiqueta <html>,
encontramos dos subdivisiones, la cabecera, delimitada por las
etiquetas <head></head> y el
cuerpo, delimitado por las etiquetas <body></body>. Por lo
tanto, el aspecto básico de cualquier página web, es el siguiente:
<!DOCTYPE html> <html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo contiene etiquetas
que pueden decir de qué trata la página, el título que debe de mostrar en
la barra del navegador, o código javascript y estilos, que pueden estar
en el propio encabezado o como enlaces a otros archivos. Normalmente,
lo que contiene esta etiqueta no se muestra en el navegador, es una etiqueta que contiene declaraciones sobre la página pero no contenido propiamente dicho como texto o imágenes.
Las etiquetas que pueden ir dentro de <head> son <title> <style> <base> <link> <meta> <script> <noscript>. Iremos
viendo estas etiquetas a medida que nos hagan falta ya que ahora no seríamos capaces de entender bien su significado en todos los casos.
De momento sólo comentaremos que obligatoriamente debe de contener la
etiqueta <title></title>, que
contiene el título de la página, que es lo que se ve en la barra de
título del navegador. En nuestro ejemplo de la unidad anterior el título era "Mi primera página"
Dentro de <head>, para optimizar la página para diferentes anchos de pantalla, también es conveniente definir el viewport, por ejemplo de esta forma: <meta name="viewport" content="vwidth=device.width, initial-scale=1.0"> .
En el <body> encontramos el contenido de la página, lo que se ve a través del
navegador: texto, imágenes, enlaces, tablas, etc... Por lo tanto dentro del <body> pueden ir la gran mayoría de las etiquetas html.
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.