Share
Bienvenido a la tercera lección de nuestra serie Diseño web para niños, Estructura HTML!
Estaremos aprendiendo cómo escribir nuestro sitio estructura con HTML. Esta estructura nos preparará para el contenido del sitio, que agregaremos en la próxima lección.
Si tuviéramos que comparar el proceso de diseño web con un edificio (¡como un edificio de Tuts + Town!), El HTML sería algo como el del edificio. Fundación y enmarcado; Es la base desde la cual se construye todo lo demás..
Importante! Los archivos que crearemos en esta lección se pueden descargar aquí..
Ya hemos mencionado mucho HTML en esta serie, pero aún no hemos hablado de lo que es exactamente, Aparte de un "lenguaje secreto super cool". La web tiene que ver con idiomas y comunicación, y HTML es una parte importante de todo esto..
El lenguaje de marcado de hipertexto, HTML, es un lenguaje que marcas El contenido de un sitio para que un navegador lo entienda y muestre. Da estructura a un archivo de texto normal que un navegador de otro modo no podría leer.
Por ejemplo, no podemos escribir un párrafo en nuestros editores de texto y esperar que un navegador simplemente sepa que es un párrafo. El texto del párrafo debe estar dentro de la marca HTML correcta, un párrafo o Elemento (cualquier texto de aspecto gracioso como el Aquí solo se muestra que este texto también es código).
HTML está construido de elementos Que tienen un significado importante, como el elemento de párrafo mencionado anteriormente. Cada elemento tiene una etiqueta de apertura (el principio) y una de cierre (el final), con el contenido del sitio escrito entre estas dos etiquetas.
Estas etiquetas de apertura y cierre para cada elemento están escritas entre paréntesis angulares (como estos: < >), aunque una etiqueta de cierre también tiene una barra inclinada (como esta: < / >).
En el curso anterior, diseñamos el diseño de nuestro sitio web y ahora es el momento de preparar la estructura o el encuadre de este diseño..
Comenzaremos esto agregando algunas notas generales a la vista previa de nuestro sitio para tener una mejor idea de cómo hacer un mejor mapa de esto..
Dentro de cuerpo De nuestro archivo html tendremos varios elementos primarios: un encabezamiento, una principal parte, y una pie de página.
También hablamos sobre cómo configurar los archivos del sitio en la lección anterior, por lo que ahora vamos a poner este conocimiento en acción!
Recuerda: "Índice" es el nombre del archivo y ".html" es la extensión, que nos indica el tipo de archivo.
Los sitios web pueden estar compuestos de muchas, muchas páginas, por lo que la página principal siempre se llama "index.html" para decir "¡Oye, aquí es donde comienza todo!"
Ahora, vamos a escribir algo de HTML.
Ahora podemos añadir nuestra estructura. Nuevamente, piense en esto como si estuviéramos armando un edificio, necesitamos colocar el encuadre.
La primera pieza de HTML que escribiremos es la que le dice al navegador: "¡Oye, este es un documento HTML!"
Entonces, debajo de eso, necesitamos el elemento:
Todo lo demás sera anidado dentro de este elemento.
"¿Como un nido de pájaro?" Bueno, tal vez más como muñecas de anidación, o para permanecer con nuestro tema de ciudad aseada, edificios anidados. Anidar es lo que sucede cuando colocamos un elemento. dentro de otro.
El bit de código a continuación muestra un elemento de párrafo anidado dentro El elemento del cuerpo, porque vive entre las etiquetas de apertura y cierre del cuerpo..
Este elemento de párrafo está anidado dentro del elemento de cuerpo..
Hacemos que el código en nuestro archivo HTML sea más fácil de leer presionando anidado Elementos más a la derecha. Me gusta esto:
Ok regresemos al trabajo
Ahora, anidado dentro de este html elemento vamos a querer agregar una cabeza elemento.
los cabeza contendrá el título de nuestra página, que se mostrará en una pestaña del navegador. Muchos nidos!
Tuts Town
Mucho de lo que se incluye en el cabeza de un documento HTML no se ve en el sitio web en sí, sino que ayuda a los motores de búsqueda, como Google, de qué trata nuestro sitio web.
Además, más adelante, cuando creemos un nuevo archivo para agregar estilos a este, conectaremos estos dos documentos juntos a través de un enlace agregado en el cabeza. Entonces, es algo así como un centro de control detrás de escena que los visitantes de nuestro sitio web no pueden ver en su mayor parte.
Todo en nuestro sitio que veremos en el navegador se anidará dentro del cuerpo, Y aquí es donde realmente comienza la diversión.!
los encabezamiento elemento no es lo mismo que el cabeza Elemento del que ya hemos hablado. los encabezamiento vive dentro del cuerpo y generalmente contiene todas las cosas en la parte superior de un sitio.
Lo primero que tenemos en la parte superior de nuestro sitio es un encabezado que contiene texto y una imagen de Tuts + Town.
Tuts Town
Solo estaremos agregando el encabezamiento Por ahora prepararse para el contenido a incluir..
La parte principal del sitio de Tuts + Town contiene la información más importante. La lista de empresas de la ciudad es de lo que trata nuestro sitio web, por lo que todo este contenido vivirá dentro de un elemento llamado principal.
Hablaremos sobre los contenedores más pequeños (como los tres grupos diferentes: Sleep, Food y Shop) dentro de este grupo más grande. principal contenedor en la siguiente lección cuando añadimos el contenido.
los pie de página Es la parte al final del sitio. Por lo general, veremos algunos enlaces aquí, como por ejemplo para Facebook y Twitter, o algún texto pequeño para que la gente sepa quién creó el sitio..
Añadiremos una oración. con orgullo diciendo que hicimos el sitio dentro de la pie de página elemento.
Recuerda: En este punto, todavía estamos agregando elementos que están anidados dentro de la cuerpo.
Ahora, vamos a hacer una revisión final de nuestra estructura HTML hasta ahora.
Es fácil olvidar las etiquetas de cierre, lo que causaría algunas errores en nuestra página web. Queremos asegurarnos de que cada etiqueta que abrimos tiene una etiqueta de cierre.
¡Parece que todo está cerrado! Es hora de comenzar a agregar contenido a esta estructura súper sólida que creamos.
HTML nos permite escribir notas útiles dentro de nuestro trabajo. Estas notas no se mostrarán en nuestro sitio web, pero son brillantes para agregar información útil para otros diseñadores que miran nuestro código.
El archivo HTML para esta lección (que puede descargar) tiene varias notas para ayudarnos a entenderlo mejor.
En esta lección aprendimos sobre lo que HTML qué es elementos son, cómo nido Estos elementos y cómo configurar una estructura HTML básica con algunos elementos contenedores comunes..
En la próxima lección, agregaremos el texto y las imágenes de nuestro sitio a la estructura recién construida.
Te veo por la ciudad!
Accentsconagua