Advertisement
  1. Web Design
  2. Kids

Diseño Web para niños: Estructura HTML

Scroll to top
Read Time: 7 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website
Web Design for Kids: HTML Content

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

Bienvenido a la tercera lección de nuestra serie Diseño Web para niños, estructura HTML!

Aprenderemos como escribir la estructura de nuestro sitio con HTML. Esta estructura nos pondrá listo el contenido del sitio, el cual añadiremos en la siguiente lección.

Si  fuéramos a comparar el proceso de diseño web con una construcción (como la del sitio Tuts+ Town!) el HTML sería como las bases y la estructura del edificio, es decir, es la base sobre lo que todo lo demás se construye.

¡Importante! Los archivos que serán creados en está lección pueden ser descargados haciendo clic sobre éste enlace.

¿Qué es exactamente HTML?

Aunque ya hemos hecho bastante mención de HTML, sin embargo, todavía no hemos hablado acerca de lo qué es exactamente, aparte de un “lenguaje secreto super cool”. La web, en general, es acerca de lenguajes y comunicación, y HTML es una parte importante de todo esto.

Lenguaje de Marcas de Hypertexto, HTML, es un lenguaje que marca que califica el contenido de un sitio para que un navegador lo entienda y lo muestre en pantalla. Da estructura a un archivo de texto regular que un navegador, de otro modo no sería capaz de leer.

Por ejemplo, no podemos escribir un párrafo desde el teclado en nuestro editor de texto y esperar que un navegador sepa sencillamente que esto es un párrafo. Los párrafos de texto tiene que estar dentro de la clasificación HTML correcta, un párrafo o un elemento <p> (cualquier señal de texto con buen aspecto como <p> aquí solamente muestra que este texto también es código)

Elementos

HTML está construido de elementos que tienen significados importantes, como el elemento de párrafo que se menciono arriba. Cada elemento tiene una etiqueta de apertura (al principio) y una de cierre (al final), con el contenido del sitio escrito entre estas dos etiquetas.

Estas etiquetas de apertura y cierre para cada elemento están escritas dentro de corchetes angulares (como estos: < >, aunque la etiqueta de cierre tiene una barra inclinada (como esta: <  /  >).

Planificando una Estructura

En el curso anterior elaboramos nuestro diseño del sitio web y ahora es el momento de preparar la estructura, o encuadra, de este diseño.

Empezaremos esto añadiendo algunas notas generales de nuestro sitio anterior para conseguir una mejor sensación de cómo identificar mejor esto.

Dentro del body de nuestro archivo html tendremos varios elementos primarios: un header, un main y un footer

Preparando Nuestro Documento

Además, hablamos acerca de como ajustar los archivos del sitio en la lección anterior, ¡así que ahora vamos a poner este conocimiento en acción!

  • Primero, creamos una carpeta en nuestra computadora y la nombraremos “tutsfolder”.
  • Ahora, es el momento de abrir ese editor de texto que esta listo y, también, esperando que algo asombros ocurra.
  • Después, creamos una nueva carpeta con este editor (por lo general, seleccionando Archivo > Archivo Nuevo y lo guardamos como “index.html” en nuestra carpeta “tutsfolder”.

Recuerda: “index” es el nombre del archivo y “.html” es la extensión, que nos dice el tipo de archivo que es.

Los sitios web pueden estar hechos por muchas, muchísimas páginas, no obstante, la página principal siempre la llamaremos “index.html” para decir “¡Hey, aquí es donde todo empieza!”

Ahora, escribamos, al fin, algo de HTML.

Construyendo una Estructura

Ahora podemos añadir nuestra estructura. Nuevamente, piensa en esto como cuando unes la estructura de un edificio, así que necesitamos establecer la estructura en su lugar.

La primera pieza de HTML que escribiremos es el <!DOCTYPE html> el cual le dice al navegador “¡Hey, éste es un documento HTML!”.

Luego, debajo de eso, necesitamos el elemento <html>:

Todo lo demás será anidado dentro de este elemento.

Espera. ¿Anidar?

“¿Cómo los nidos de las aves?” Bueno, quizá sería mejor decir un armario de muñecas, o para no apartarnos del tema principal, edificios anidados. Anidar es lo que pasa cuando colocamos un elemento dentro de otro.

La muestra de código abajo muestra un elemento de párrafo anidado dentro de elemento body, esto debido que vive dentro de las etiquetas de elemento body.

Hacemos el código de nuestro archivo HTML más fácil de leer poniendo elementos anidados más a la derecha.  Como esto:

OK, volvamos de nuevo a trabajar

El elemento Head

Ahora, anidado dentro de este elemento html, queremos añadir el elemento head.

El elemento head contiene la etiqueta title de nuestra página, la cual muestra el titulo de nuestra página en la pestaña del navegador. ¡Mucho anidamiento!

Muchos de los elementos incluidos en el head de un documento HTML no se ve en el sitio web, sin embargo, aporta una ayuda diciéndole a los motores de búsqueda, como Google, acerca de qué trata nuestro sitio web.

Además, más adelante, cuando tengamos que crear un archivo nuevo para añadir estilos a éste, tendremos que conectar los dos documentos a través de un enlace que agregaremos en el head. Por lo tanto, esto es como si detrás del centro de las escenas de control de nuestro sitio web, los visitantes no consiguen ver la mayor parte.

El elemento Body

Todo lo que veremos en nuestro sitio en el navegador será anidado dentro del elemento body, ¡y aquí es dónde empieza la diversión!

El elemento Header

El elemento header no es lo mismo que el elemento head del que ya hemos hablado. El header vive dentro del elemento body y, por lo general, contiene todas las cosas que van en la parte superior de la página.

La primera cosa que tenemos en la parte superior de nuestro sitio es el header, el cual contiene algunos textos y una imagen de Tuts+ Town.

Solamente añadiremos el header por ahora para prepararlo para el contenido que va a ser publicado.

La parte principal

La parte principal del sitio Tuts+ Town contiene la información más importante. La lista de las empresas de la ciudad es acerca de lo que trata nuestro sitio web, así que todo este contenido vivirá dentro de un elemento llamado main.

Hablaremos de contenedores más pequeños (como los tres diferentes grupos: Sleep, Food y Shop) dentro de este contenedor más grande que es main, pero lo haremos en la próxima lección cuando añadamos contenido.

El elemento Footer

El footer es la parte al final del sitio. Por lo general, veremos algunos enlaces aquí, tales como Facebook y Twitter, o algunos textos pequeños, sólo para dejarle saber a las personas quienes crearon el sitio.

Agregaremos una oración, orgullosamente diciendo que hicimos el sitio dentro del elemento footer.

Recuerda: en este punto todavía añadiremos elementos que están anidados dentro del body.

Revisión final

Ahora, vamos hacer una revisión final de nuestra estructura HTML hasta ahora.

Es muy fácil olvidar cerrar las etiquetas, lo cual puede causar algunos errores en nuestro sitio web. Queremos asegurarnos que todas las etiquetas abiertas tienen una etiqueta de cierre.

¡Bueno, parece como si todo estuviera encerrado! Es el momento de empezar añadiendo contenido a esta estructura super sólida que hemos creado.

Notas rápidas sobre Notas

HTML nos deja escribir notas útiles dentro de nuestro trabajo. Estas notas no se muestran en nuestro sitio web, pero son magnificas para agregar pedacitos de información útiles para otros diseñadores que busquen en nuestro código. 

El archivo HTML para esta lección (el cual puedes descargar) tiene varias notas para ayudarte a entenderlo mejor.

¡Bien hecho!

En esta lección aprendimos acerca de lo que es HTML, lo que son los elementos HTML, cómo anidar estos elementos, y como ajustar una estructura básica con algunos elementos contenedores comunes. 

En la siguiente lección, continuaremos agregando texto e imagenes a nuestro sitio dentro de una estructura recien construida. 

¡Nos vemos!

¡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.