Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: Contenido HTML

Scroll to top
Read Time: 9 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Bienvenidos a la cuarta lección de nuestra serie Diseño Web para Niños, Contenido HTML.

En la lección anterior, finalmente nos adentramos en la codificación al elaborar la estructura de nuestro archivo HTML con algunos elementos HTML. Ahora añadiremos contenido a nuestro sitio en ésta estructura.

Recuerda: Los archivos terminados para ésta lección pueden ser descargados aquí. Y si te estancas con algo, ¡formula preguntas en el área de comentarios en la parte inferior de ésta página!

Contenedores, Contenedores, Contenedores

Hablaremos mucho de contenedores cuando se elabora un sitio web, así que es importante entender lo que hacen.

Todo nuestro contenido necesitará estar colocado dentro de los contenedores adecuados HTML. Los contenedores están organizados con elementos HTML. Cada elemento significa algo especial para el navegador, ayudándolo a entender todo el material de la página.

Para pensar en ello de otra forma, en la ilustración de arriba el edificio contiene todo: ventanas, una puerta, y un reloj. Una de las ventanas está actuando como otro contenedor con una diseñadora de Tuts+ Town adentro.

Agregar Contenido

Ahora que tenemos nuestra estructura en su lugar, podemos llenar éstos contenedores con material. Todos los elementos que añadimos a nuestro archivo en la lección anterior nos ayudaron a organizarnos bien-nos han dado lugar para insertar nuestro texto e imágenes.

¡Comencemos desde arriba!

Header (Cabecera)

Como lo hablamos, el header es la parte superior de un sitio web y tiene su propio elemento <header>, que es el primero anidado en nuestro cuerpo.

El header generalmente contiene una introducción y una navegación (una forma de encontrar otros lugares en el sitio web) de alguna clase. Nuestro sitio web tiene un encabezado de bienvenida y una imagen bonita, ¡Así que vamos a añadirlos!

Heading (Encabezado)

Necesitamos poner "Bienvenidos a Tuts+ Town en la página, que es el principal encabezado del sitio web.

Hay seis diferentes niveles de encabezado para un sitio; h1 es el más importante, h6 es el menos importante. En HTML el texto para encabezados se escribe dentro de elementos heading: <h1>, <h2>, <h3>, <h4>, <h5>, o <h6>.

"Welcome To Tuts+ Town" es nuestro principal encabezado (es muy importante), así que escribiremos ésto dentro de las etiquetas de apertura y cierre de un elemento <h1>.

El navegador ahora reconocerá éste fragmento de texto como nuestro encabezado introductorio.

Imagen de la Ciudad

También en el encabezado tenemos una imagen encantadora de nuestra ciudad.

Dentro de nuestro directorio principal "tutstown" necesitas crear otro directorio, "images" (imágenes), y guardar todas las imágenes ahí.

Imágenes son agregadas con un elemento <img>. Dentro de ésta etiqueta necesitamos dar una ubicación a la imagen, o fuente, así:

¿Ves ese / después de src="images? Ahí hemos dicho "busca en el directorio imagenes / un archivo llamado townheader.svt".

Luego, antes de finalizar la etiqueta <img> incluiremos una descripción con un atributo alt.

Atributos son cosas que podemos agregar a elementos que ayudan a explicarlos más, o decirles como funcionar. Solo ciertos atributos funcionan con ciertos elementos. Un elemento <img> siempre tendrá un atributo src y un atributo alt.

¡Importante! Un elemento <img> se cierra solo. Ésto solo significa que la etiqueta de apertura también es la etiqueta de cierre.

¡Demos un vistazo!

¡En éste punto podemos abrir nuestro sitio web en el navegador para ver lo que hemos hecho hasta ahora! Encuentra el directorio "tutstown" y haz doble click en "index.html". Ésto debería abrir la página en tu navegador.

¡Aqui está nuestro sitio web! No hay mucho ahi ahora, pero estamos a punto de cambiar eso. De ahora en adelante, cuando quieras ver tus cambios en el navegador, puedes guardar el archivo HTML y luego refrescar (usando ese círculo con un ícono de flecha en la parte superior) la ventana del navegador.

También, notarás que no podemos ver nuestras nubes aún, porque no hemos añadido el fondo amarillo. Estaremos viendo cosas como colores de fondo, posicionamiento, y tamaño en nuestra próxima lección cuando abordemos CSS.

Sección Main (Principal)

La sección principal de nuestro sitio web incluye el grueso de la información. Contendremos todo el contenido super útil sobre nuestra ciudad dentro del elemento <main>.

Secciones

Tenemos tres grupos relacionados en nuestro sitio web que organizaremos en tres secciones. Una sección es un fragmento independiente de un sitio web que contiene información y también tiene su propio elemento <section>.

¡Más Estructura!

Dentro de nuestras secciones tenemos más marcos similares para elaborar, como contenedores para pequeños fragmentos de texto junto a las imágenes.

Hagamos cada sección a la vez. Cada sección tiene una imagen anidada y un elemento que contiene algo de texto.

Veamos la estructura para ésto antes de que agreguemos el contenido real:

Ahora, hablamos de agregar imágenes previamente. Ésta imagen será agregada de la misma forma que nuestra imagen del header, pero el nombre del archivo y la descripción serán diferentes.

Div

Un elemento <div> es un elemento contenedor más general. Nos permite agrupar partes de una página cuando ningún otro elemento parecer ser el indicado.

El encabezado y la lista de compras serán contenidos por éste <div>.

Encabezado

Podemos ver que cada sección tiene un pequeño encabezado: Sleep (Dormir), Food (Comida) y Shop (Comprar). Éstos nos indican las pequeñas listas justo debajo de cada uno. Ya usamos un <h1> para nuestra introducción en la parte superior de la página, así que para éstos utilizaremos <h2>, así:

Listas

Hay dos tipos de listas HTML, ordenadas (con números) y desordenadas (con viñetas en lugar de números). Ambas son formas muy útiles para listar información relacionada y cada sección de nuestro sitio contiene una corta lista desordenada (<ul>) con dos elementos.

Anidados dentro de cada lista están los elementos de la lista. Éstos son los elementos que conforman nuestra lista y se escriben dentro de etiquetas <li>.

Enlaces

Las listas que acabamos de juntar serán los enlaces a los sitios web de diferentes tiendas, así nuestros visitantes pueden dar click en ellos para obtener más información. Para convertir una palabra (o palabras) en un enlace al que se le puede dar click necesitamos encerrar esa palabra dentro de etiquetas anchor (ancla). Un elemento anchor se ve así: <a>.

Similarmente a como nuestro elemento <img> tiene atributos especiales, la etiqueta de apertura <a> necesitará contener un atributo que incluya la dirección web del sitio al que queremos sea enviado el usuario, el atributo href.

El siguiente fragmento de código nos daría un enlace conectado a la palabra "aquí" que llevaría al usuario a https://tutsplus.com/

Así es exactamente como añadiremos los enlaces a nuestra lista, al encerrar el nombre de cada tienda en un anchor. Tanto la etiqueta anchor de apertura como de cierre estarán dentro del elemento de la lista, <li>. La única diferencia es que porque éstos no son tiendas reales, con sitios web reales, pondremos un # para el valor de href y dando click en él no nos llevará a otro sitio web.

Así se ve la primera tienda listada:

Creamos una lista desordenada, anidamos un elemento de lista dentro de esa lista, y luego encerramos el nombre de la tienda en una etiqueta anchor. Ten presente que no hemos aplicado ningún estilo todavía así que por ahora nuestra vista previa mostrará los enlaces en un azul predeterminado en lugar de naranja.

Sección Final

Una vez que tenemos una sección completa necesitaremos repetir los mismos pasos para las otras dos secciones. Cada vez necesitamos asegurarnos que el contenido cambia; la estructura HTML será la misma para las otras tres secciones, pero el texto y las imágenes serán diferentes.

Ahora, revisemos el código para las tres secciones-¡es mucho!

Footer (Pie)

Un <footer> será el primer elemento después de la etiqueta de cierre del elemento <main>; no estará anidado dentro.

Podemos luego añadir nuestro elemento footer a la página, que estará al mismo nivel que main porque ambos están anidados en el cuerpo.

El único contenido que tenemos dentro de nuestro footer es una oración sobre quién hizo nuestro sitio (¡nosotros lo hicimos!) Éste contenido será encerrado dentro de un elemento <p> (párrafo) que está anidado en el footer (pie).

Vista Previa Completa

¿Te has estado emocionando al guardar el documento HTML y refrescar el navegador mientras trabajamos? ¡Yo también! Echemos un vistazo final antes de terminar:

Una mirada a los elementos utilizados

Hemos hablado mucho de diferentes elementos aquí así que revisemos rápidamente los que hemos usado en nuestro archivo HTML:

<html> Contiene todo nuestro HTML
<head> Donde ponemos información sobre el sitio web
<title> El título del sitio web
<body> Contiene todo los elementos de la página
<header> Contiene nuestro mensaje de bienvenida
<h1> y <h2> Nuestros encabezados
<img> Lleva una imagen a la página
<main> Para el contenido principal
<section> Divide la página en secciones
<div> Un contenedor general
<ul> Una lista desordenada de cosas
<li> Un elemento dentro de una lista
<a> utilizado para enlazar a algún lugar
<footer> El contenido de la parte inferior

Conclusión

En éste curso aprendimos todo sobre como colocar contenido en la super robusto estructura HTML que hicimos con nuestras manos (bueno, y una computadora)

Luego aprenderemos como aplicar estilo a ésta página para hacerla tan bonita y atractiva como sea posible, pero también más fácil de leer y usar.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.