Academia crea tu webNivel Uno Iniciación

Estructura HTML head y body

Estructura HTML Head y Body

Estructura HTML head y body.


La estructura HTML esta formada de dos partes la primera denominada Head – y la segunda parte denominada body.

Zona HEAD


En la zona head definiremos los elementos HTML que no se mostraran en la pagina web pero que si nos servirá para darle diseño a la pagina,

Etiquetas imprescindibles en la zona HEAD


En la zona head RESIDEN 3 elementos imprescindibles para dar forma a la pagina web.

El primer elemento imprescindible es: la etiqueta <html lang=”ES”> Con este elemento el navegador entenderá que esta pagina web esta utilizando el idioma español para ser interpretada. Es el único elemento que esta fuera de la zona head. Nos permite definir el rango de lenguaje por defecto, en este caso el Español.

El segundo elemento imprescindible es: La etiqueta <meta charset=”utf-8″> Este elemento le informa al navegador que cargue el contenido de los párrafos de la web con las normas y reglas de escritura del abecedario español, Si no definimos este elemento El navegador no reconocerá las letras Ñ y las tildes – y en su lugar cargara la web con caracteres ilegibles.

Imagen de ejemplo al cual no se agrego el elemento meta charset utf-8 a la pagina
Imagen de ejemplo al cual no se agrego el elemento meta charset utf-8 a la pagina

El tercer elemento imprescindible: El elemento <title> </title> Es único elemento que lleva etiqueta de apertura y etiqueta de cierre dentro de la zona del HEAD. Y este elemento nos permite definir un título que se mostrara por encima de la barra de direcciones.

El elemento title nos permite definir un título por encima de la barra de direcciones
El elemento title nos permite definir un título por encima de la barra de direcciones

Ejemplo de la zona HEAD


<!DOCTYPE html>

<html lang=”ES”>

<head>

<meta charset=”utf-8″>

<title>Crea tu pagina Web</title>

</head>

</html>

Como podéis ver con estas tres etiquetas ya hemos creado nuestra zona head de la estructura HTML. Y solo el elemento title lleva etiqueta de apertura y etiqueta de cierre.

Zona BODY


En la zona del BODY definiremos el contenido que aparecerá en nuestra pagina web, tales como: títulos, párrafos, imágenes, videos o audios. Encerrando el contenido en elementos HTML como: tablas, capas y bordes, al igual que la zona HEAD tiene elementos importantes e imprescindibles que son:

Primer elemento imprescindible


El primero es el elemento HEADER no confundir con la zona head de la estructura HTML, El elemento header esta dentro de la zona del body. En el header definiremos el logo y el menú de navegación de nuestra pagina web

Ejemplo de MENÚ en el elemento HEADER dentro de la zona BODY
Ejemplo de MENÚ en el elemento HEADER dentro de la zona BODY

Segundo elemento imprescindible


El segundo es el MAIN dentro de este elemento definiremos textos descriptivos, títulos, párrafos, imágenes o videos.

En el elemento main están todos los elemento para crear el contenido de nuestra pagina web
Ejemplo del elemento main en donde están todos los elemento para crear el contenido de nuestra pagina web

Tercer elemento imprescindible


El tercer elemento en el FOOTER o pie de pagina, dentro de este elemento definiremos la descripción de nuestra empresa como son: Dirección, teléfono, correo electrónico, redes sociales y avisos legales que son: Términos y Condiciones, Política de Cookies, Política de Privacidad y mas información que podamos brindar de nosotros a los visitantes.

Ejemplo de la zona FOOTER
Ejemplo de la zona FOOTER

Ejemplo básico de la maquetación del HEAD y el BODY


<!DOCTYPE html>

<html lang=”ES”>

<head>

<meta charset=”UTF-8″>

<title>Crea tu pagina Web</title>

</head>

<body>

<header> </header>

<main> </main>

<footer> </footer>

</body>

</html>

Con este ejemplo tan sencillo ya tenemos la maquetación de la zona head y de la zona body ya podemos empezar a experimentar creando títulos, párrafos e introduciendo imágenes. Si te memorizas estos elementos principales de las paginas web llegaremos muy lejos.

Tema anterior Como crear etiquetas HTML – Siguiente tema Que es CSS?

Compartir esta web

Franklin A Vaca De la Cruz

Programador de aplicaciones para Gestión Empresarial y aplicaciones web, Suscríbete o regístrate a la web y no te pierdas temas importantes. Saludos

Deja una respuesta