Diseño web para niños contenido HTML / Diseño web

Mira eso / después src = "imagenes? Allí hemos dicho "mira en la carpeta de imágenes". / para un archivo llamado townheader.svg ".

Entonces, antes de que terminemos el etiqueta incluiremos una descripción con una alt atributo.

Atributos son cosas que podemos agregar a los elementos que ayudan a explicarlos más detalladamente o les dicen cómo trabajar. Sólo ciertos atributos trabajan dentro de ciertos elementos. Un elemento siempre tendrá un src y un alt atributo.

Importante! Un elemento es de cierre automático. Esto solo significa que la etiqueta de apertura también es la etiqueta de cierre:

Echemos un vistazo!

En este punto podemos abrir nuestro sitio web en el navegador para ver Lo que hemos hecho hasta ahora! Busque la carpeta "tutstown" y haga doble clic en "index.html". Esto debería abrir la página en tu navegador..

¡Aquí está nuestro sitio web! No hay mucho ahi ahora, Pero estamos ante el cambio de eso. A partir de ahora, cuando quiera ver sus cambios en el navegador, puede salvar el archivo HTML y luego refrescar (utilizando ese pequeño círculo con un icono de flecha en la parte superior) la ventana del navegador.

Además, notará que todavía no podemos ver nuestras nubes, porque no hemos agregado el fondo amarillo. Veremos cosas como los colores de fondo, el posicionamiento y el tamaño en nuestra próxima lección cuando nos sumergamos en CSS.

Sección principal

La sección principal de nuestro sitio web incluye la mayor parte de la información. Bien Contiene Todo el contenido super útil sobre nuestra ciudad dentro de este

elemento.

   Bienvenido a Tuts + Town

Secciones

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

Más estructuración!

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

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

Veamos la estructura de esto antes de agregar el contenido real:

Ahora, hablamos de agregar imágenes antes. Esta imagen se agregará de la misma forma que nuestra imagen de encabezado, pero el nombre y la descripción del archivo serán diferentes.

Div

UNA

El elemento es un elemento contenedor más general. Nos permite agrupar partes de una página cuando ningún otro elemento parece ser un buen ajuste.

El encabezado y la lista de la tienda estarán contenidos en este

Título

Podemos ver que cada sección tiene un encabezado pequeño: Dormir, comer y comprar. Estos nos hablan de las pequeñas listas justo debajo de cada una. Ya usamos un

para nuestra introducción en la parte superior de la página, así que para estos usaremos

, Me gusta esto:

   Dormir

Liza

Hay dos tipos de listas HTML, ordenado (con números) y desordenado (con viñetas en lugar de números). Ambas son formas muy prácticas de enumerar información relacionada y cada sección de nuestro sitio contiene una breve desordenado lista

Anidados dentro de cada lista están elementos de la lista. Estos son los elementos que componen nuestra lista y están escritos en

etiquetas.
```
   
```
Campo de golf
Las listas que acabamos de juntar están destinadas a ser campo de golf a los diferentes sitios web de las tiendas, para que nuestros visitantes puedan hacer clic en ellos para obtener más información. Para convertir una palabra (o palabras) en un enlace en el que se pueda hacer clic, necesitamos envolver esa palabra dentro de ancla etiquetas Un elemento de anclaje se ve así: .
Similar a como nuestro El elemento tiene atributos especiales, la apertura. la etiqueta tendrá que contener una atributo que incluye la dirección web del sitio web al que queremos que se envíe el usuario, el href atributo.
El siguiente bit de código nos daría un enlace conectado a la palabra "aquí" que llevaría al usuario a http://tutsplus.com/
```
Para más tutoriales haz click aquí..
```
Así es exactamente como agregaremos los enlaces a nuestra lista, envolviendo cada nombre de la tienda en un ancla. Tanto las etiquetas de anclaje de apertura como de cierre estarán dentro del elemento de la lista, la

. La única diferencia es que debido a que estas no son tiendas reales, con sitios web reales, estaremos poniendo una # Para el href Valorar y hacer clic en él no nos llevará a otro sitio web..

Aquí hay un vistazo a la primera tienda en la lista:

 The Snooze Inn

Creamos una lista desordenada, anidamos un elemento de la lista dentro de esa lista y luego envolvimos el nombre de la tienda en una etiqueta de anclaje. No obstante, ten en cuenta que aún no hemos hecho ningún estilo, así que por ahora nuestra vista previa mostrará los enlaces en un azul predeterminado en lugar de naranja..

Sección de cierre

Una vez que tengamos una sección completa, tendremos que repetir estos mismos pasos exactos para las dos últimas secciones. Cada vez que necesitamos asegurarnos de que el contenido cambie; La estructura HTML será la misma para las tres secciones, pero el texto y las imágenes serán diferentes..

Ahora, revisemos el código de las tres secciones: es bastante!

    Dormir
   The Snooze Inn 
  Hotel Zzz 
 
 
 
    Comida
   Solo galletas 
  Pastel también 
 
 
 
    tienda
   Desfile de cachorros 
  Gatitos frescos

Pie de página

UNA

será el primer elemento después de la etiqueta de cierre de la

elemento; va a no estar anidado en su interior.

Luego podemos agregar nuestro elemento de pie de página a la página, que vivirá en el mismo nivel que main porque ambos están anidados dentro del cuerpo..

El único contenido que tenemos dentro de nuestro pie de página es una oración sobre quién hizo nuestro sitio (¡nosotros lo hicimos!). Este contenido será envuelto dentro de un

Elemento (párrafo) que está anidado dentro del pie de página..

 Creado con entusiasmo por los residentes que cuidan.

Vista previa completa

¿Ha estado guardando con entusiasmo el documento HTML y actualizando el navegador mientras trabajamos? ¡Yo también! Echemos un vistazo final antes de terminar:

Una mirada atrás a los elementos utilizados

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

	Mantiene todo nuestro HTML
	Donde ponemos información sobre el sitio web.
</code></td> <td>El título del sitio web.</td> </tr> <tr> <td><code><body></code></td> <td>Contiene todo el contenido de la página.</td> </tr> <tr> <td><code></code></td> <td>Mantiene nuestro mensaje de bienvenida.</td> </tr> <tr> <td> <code><h1></code> y <code><h2></code> </td> <td>Nuestros encabezados</td> </tr> <tr> <td><code><img></code></td> <td>Trae una imagen a la página.</td> </tr> <tr> <td><code><main></code></td> <td>Para el contenido principal.</td> </tr> <tr> <td><code><section></code></td> <td>Divide la página en secciones.</td> </tr> <tr> <td><code><div></code></td> <td>Un contenedor general</td> </tr> <tr> <td><code><ul></code></td> <td>Una lista desordenada de cosas.</td> </tr> <tr> <td><code><li></code></td> <td>Un elemento de lista dentro de una lista</td> </tr> <tr> <td><code><a></code></td> <td>Se utiliza para enlazar en alguna parte</td> </tr> <tr> <td><code><footer></code></td> <td>El contenido inferior</td> </tr> </tbody></table><h2>Conclusión</h2><p>En este curso, aprendimos todo sobre cómo insertar contenido en la estructura HTML super resistente que creamos con nuestro <i>manos desnudas</i> (bueno, y una computadora).</p><p>A continuación aprenderemos a <em>estilo</em> esta página para que sea lo más bonita y atractiva posible, pero también más fácil de leer y usar.</p><p>Te veo por la ciudad!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Diseño web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/webdesign/web-design-for-kids-html-structure.html">Diseño web para niños Estructura HTML</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-html-structure.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/web-design-for-kids-getting-ready-to-build-a-website.html">Diseño web para niños preparándose para construir un sitio web</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-getting-ready-to-build-a-website.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Buscar..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

Diseño web para niños contenido HTML

Contenedores, Contenedores, Contenedores

Añadiendo contenido

Encabezamiento

Título

.
"Welcome To Tuts + Town" es nuestro encabezado principal (es muy importante), por lo que escribiremos esto dentro de las etiquetas de apertura y cierre de un

elemento.

Bienvenido a Tuts + Town

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

Bienvenido a Tuts + Town

Imagen de la ciudad

Echemos un vistazo!

Sección principal

Bienvenido a Tuts + Town

Secciones

Más estructuración!

Div

Título

, Me gusta esto:

Dormir

Dormir

Liza

Campo de golf

Sección de cierre

Dormir

Comida

tienda

Pie de página

Diseño web para niños contenido HTML

Contenedores, Contenedores, Contenedores

Añadiendo contenido

Encabezamiento

Título

."Welcome To Tuts + Town" es nuestro encabezado principal (es muy importante), por lo que escribiremos esto dentro de las etiquetas de apertura y cierre de un

elemento. Bienvenido a Tuts + Town El navegador ahora reconocerá este fragmento de texto como nuestro encabezado introductorio..

Bienvenido a Tuts + Town

Imagen de la ciudad

Echemos un vistazo!

Sección principal

Bienvenido a Tuts + Town

Secciones

Más estructuración!

Div

Título

, Me gusta esto: Dormir

Dormir

Liza

Campo de golf

Sección de cierre

Dormir

Comida

tienda

Pie de página

.
"Welcome To Tuts + Town" es nuestro encabezado principal (es muy importante), por lo que escribiremos esto dentro de las etiquetas de apertura y cierre de un

elemento.

Bienvenido a Tuts + Town

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

, Me gusta esto:

Dormir