Diseño Web para Niños

Diseño Web para niños:
Estructura HTML
by Joni Trythall3 Jun 2015
Difficulty:BeginnerLength:ShortLanguages:
KidsHTML
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!”.
1 <!DOCTYPE html>
Luego, debajo de eso, necesitamos el elemento <html> :
1 <!DOCTYPE html>
2 <html>
3
4 </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.
1 <body>
2 <p>This paragraph element is nested inside the body element.</p>
3 </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!
1 <html>
2 <head>
3 <title>Tuts Town</title>
4 </head>
</html>
5
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.
1 <html>
2 <head>
3 <title>Tuts Town</title>
4 </head>
<body>
5 <header></header>
6 </body>
7 </html>
8
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 .
1 <footer> </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.
Advertisement
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.
<!-- Anything in between these set of symbols is a comment that our browser cannot
1 ->
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 anidarestos 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!

Diseño Web para Niños

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Diseño Web para Niños

Încărcat de

Drepturi de autor:

Formate disponibile

Diseño Web para niños:

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

Aprenderemos como escribir la estructura de nuestro sitio con HTML. Esta

Si fuéramos a comparar el proceso de diseño web con una construcción

¿Qué es exactamente HTML?

Lenguaje de Marcas de Hypertexto, HTML, es un lenguaje que marca

Por ejemplo, no podemos escribir un párrafo desde el teclado en nuestro editor

Planificando una Estructura

Empezaremos esto añadiendo algunas notas generales de nuestro sitio anterior

Preparando Nuestro Documento

 Primero, creamos una carpeta en nuestra computadora y la

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

Ahora, escribamos, al fin, algo de HTML.

Construyendo una Estructura

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

La muestra de código abajo muestra un elemento de párrafo anidado dentro de

Hacemos el código de nuestro archivo HTML más fácil de leer poniendo

OK, volvamos de nuevo a trabajar

El elemento head contiene la etiqueta title de nuestra página, la cual

Muchos de los elementos incluidos en el head de un documento HTML no se

La primera cosa que tenemos en la parte superior de nuestro sitio es el header,

Hablaremos de contenedores más pequeños (como los tres diferentes grupos:

Agregaremos una oración, orgullosamente diciendo que hicimos el sitio

Es muy fácil olvidar cerrar las etiquetas, lo cual puede causar

¡Bueno, parece como si todo estuviera encerrado! Es el momento de empezar

Notas rápidas sobre Notas

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

S-ar putea să vă placă și