Skip to content

Instantly share code, notes, and snippets.

@ta-web-mex

ta-web-mex/Elementos_de_bloque.md

Created July 9, 2018 19:41
Show Gist options
  • Save ta-web-mex/b25cf08a3b93f87a66d1fa4c0c8a1081 to your computer and use it in GitHub Desktop.
Save ta-web-mex/b25cf08a3b93f87a66d1fa4c0c8a1081 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Elementos_de_bloque.md

Elementos de bloque

Objetivos

Después de ésta lección aprenderás a:

  • Entender los elementos
  • Entender la función de la etiqueta <div>.

Introducción

En esta lección, aprenderás más sobre las etiquetas de Elemento de bloque y cómo se comportan en una página web HTML.

Comprenderás cómo crear "cajas" usando la etiqueta div para separar la página en diferentes secciones.

Además, hablaremos un poco sobre qué semántica de HTML es y qué etiquetas debería usar para crear marcas semánticas.

Elementos de bloque

Un elemento de bloque comienza una nueva línea en la página web y, si no se establece ningún ancho, amplía el ancho completo del espacio horizontal disponible de su elemento padre. Los elementos de nivel de bloque crean grandes bloques de contenido como párrafos o divisiones de página. Pueden contener elementos de línea, así como otros elementos de bloque.

<iframe height='265' scrolling='no' title='elementos de bloque' src='//codepen.io/HarlandLohora/embed/oymXKG/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen elementos de bloque by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

La etiqueta <div>

La etiqueta <div> </div> es un elemento que representa una sección Se usa comúnmente para separar secciones en la página web o ajustar el contenido para el diseño. El div no tiene ningún valor semántico (significado), como veremos en la siguiente sección.

  • Por defecto, el contenido div ocupará todo el ancho de su contenedor (<body>por defecto).

  • Si div no tiene contenido adentro, la altura será cero por defecto.

❗ Los dos puntos anteriores son muy importantes ya que pueden generar problemas si no los tienes presentes.

<iframe height='265' scrolling='no' title='Etiqueta
' src='//codepen.io/HarlandLohora/embed/pKGjme/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Etiqueta <div&rt; by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

Semantica de los elementos de bloque

¿Qué es la semantica?

Como vimos en las sección anterior, la semántica es el significado de los elemntos ó etiquetas de HTML. Al usuario final no le importa si es un div ó un p.

Pero por otro lado, la semántica le da un significado al sitio web. Revisemos la estructura de un blog.

Puede tener una introducción, cuerpo, resumen, todo compuesto por bloques de texto, encabezados e imágenes. Cada uno de esos elementos tiene un significado semántico. Cuando ve un gran texto en negrita y luego una serie de párrafos, sabe que el gran texto en negrita es un encabezado.

Sin este significado, y estos diferentes tipos de elementos su publicación de blog es simplemente un gran revoltijo.

Además, la semántica de HTML es vital para el SEO de un sitio web (Search Engine Optimization). Cuando un rastreador de SEO como Google mira algún sitio web, lee. No infiere un significado basado en lo que ve, infiere significado basado en etiquetas y atributos.

Etiquetas de diseño semántico

Gracias a HTML5, puede identificar rápidamente los bloques más comunes en una página web. Estos bloques son:

Cada elemento de seccionamiento (cuerpo, artículo, sección, navegación y aparte) puede tener su propio encabezado y pie de página.

| Etiqueta | Descripción | | Section | Secciones agrupadas en torno a un tema específico.| | Article |Composiciones completas o independientes como una publicación de blog o un widget. Como regla general, solo use si el contenido tiene sentido por sí mismo (fuente RSS, publicación de tweets, publicación de Facebook, etc.).| | Nav |Bloques de navegación| | Aside |Contenido complementario como barras laterales.| | Header |Indica el encabezado dentro de una sección.| | Footer |Indica el pie de página dentro de una sección.|

Cada elemento de seccionamiento (cuerpo, artículo, sección, navegación y aparte) puede tener su propio encabezado y pie de página.

<iframe height='265' scrolling='no' title='dKLWRP' src='//codepen.io/HarlandLohora/embed/dKLWRP/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen dKLWRP by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

Encabezados

Las etiquetas de encabezado se usan para describir encabezados de diferentes niveles de importancia.

Las etiquetas de encabezados se declaran como <h (número)> </ h (número>, por ejemplo

Este es el encabezado principal </ h1>. Los números de encabezado van del 1 al 6. Cuanto menor sea el número del encabezado, más importante.

<iframe height='265' scrolling='no' title='Encabezados' src='//codepen.io/HarlandLohora/embed/wXZdmr/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Encabezados by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen.</iframe>

Ejemplo

Usemos la estructura de una publicación de blog como un ejemplo de cómo estructurar encabezados.

<iframe height='265' scrolling='no' title='Ejemplo Encabezados' src='//codepen.io/HarlandLohora/embed/NzmgxL/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Ejemplo Encabezados by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

h1: el título del encabezado de la publicación será un h1. Este encabezado le dará al lector un contexto sobre la publicación completa. En este caso, el encabezado principal es Todo acerca de los perros.

h2: la mayoría de las subsecciones de la publicación del blog serán elementos h2. Este artículo está desglosado por edad, por lo que los encabezados de h2 van a ser Introducción, Cachorros (0-2 años), Perros adultos (3-8 años) y Perros mayores (8+ años).

h3 - Cada h2 está subdividido por grupos de edad. Cada h2 tiene elementos h3 para dar más detalles sobre cada grupo de edad.

h4 - Cada sección h3 está dividida además por tres categorías: Alimentación, paseos y otras cosas. Cada uno de estos elementos h4 contiene un párrafo con datos de apoyo.

p (Etiqueta de párrafo)

La etiqueta de párrafo, como se ve arriba, es un elemento de bloque que representa un párrafo o bloque de texto.

Típicamente, estas etiquetas de párrafo son procesadas por algún tipo de encabezado para declarar de qué trata el párrafo, o posiblemente otras etiquetas de párrafo.

<iframe height='265' scrolling='no' title='El significado de la vida' src='//codepen.io/HarlandLohora/embed/xzerRV/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen El significado de la vida by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

Listas

Las listas son uno de los elementos de bloque más comunes. Se utilizan para expresar datos de listas, como recetas, listas de compras o listas de tareas pendientes.

Hay dos variedades diferentes de listas.

ul (Lista desordenada) Las listas desordenadas están destinadas a ser utilizadas en situaciones donde el orden no importa. Por ejemplo, al crear una lista de compras, no le interesa particularmente el orden de los artículos a comprar.

<iframe height='265' scrolling='no' title='Lista desordenada' src='//codepen.io/HarlandLohora/embed/PagjWe/?height=265&theme-id=0&default-tab=html,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Lista desordenada by Harland Yatzet Lohora Espinoza (@HarlandLohora) on CodePen. </iframe>

El elemento

  • representa el elemento de la lista. Cada elemento en la lista estará en una nueva línea, separada por viñetas. Los elementos
  • solo deben usarse dentro de las listas. Además, los únicos hijos directos de la lista deberían ser un
  • .

    Un elemento hijo es un elemento dentro de otro elemento. El elemento principal es el elemento que contiene el elemento secundario.

    Soy un elemento hijo.</Elemento hijo> </Elemento padre>

    ol (lista ordenada)

    Las listas ordenadas están destinadas a ser utilizadas en situaciones donde el orden sí importa. Por ejemplo, si creara una receta, a menudo es importante que el orden en el que hace las cosas se siga de una manera particular:

        
    1. Agregue 1 cucharada de aceite vegetal a un sartén antiadherente
      2.   
    2. Caliente el sartén durante 2 minutos a fuego medio
      3.   
    3. Después de 2 minutos, coloca suavemente el pollo en el sartén. ¡Cuidado!
      4.   
    4. Una vez que el pollo comienza a dorarse en un lado, voltéelo al otro.
      5.   
    5. ¡Después de 2 minutos en el lado opuesto, saque el pollo de la sartén y sirva!

    Al igual que con el

      , el
        contiene elementos
      1. . Su navegador reconocerá esto y, en lugar de mostrar viñetas, representará los números en el orden correcto.

    Ejercicio: IronSkydive | Introducción

    Durante este módulo, aprenderás HTML y CSS. Ambas tecnologías combinadas te ofrecen todas las herramientas que necesitas para crear un sitio web.

    HTML sin CSS es feo, y CSS sin HTML es ... bueno, ¡nada!

    Es por eso que trabajarás en un ejercicio a lo largo de las diferentes lecciones de este módulo. Vas a crear una solución completa para practicar los diferentes conceptos que estás aprendiendo.

    Ironskydive | El sitio web de una compañía

    A Ironhack le encanta la codificación, pero también nos encanta practicar deportes extremos. En una nueva línea de productos, hemos creado una nueva compañía llamada Ironskydiving. Ofrecemos una experiencia completa de paracaidismo.

    Necesitamos que realices nuestro sitio web, porque estamos muy ocupados empezando la empresa y asegurándonos de que nuestras pólizas de seguro estén bajo control en caso de que el paracaídas de alguien no se abra (Solo es una broma).

    En este ejercicio que se hará a lo largo de las diferentes lecciones de este módulo, crearás un sitio web básico de HTML y CSS, donde practicará los diferentes conceptos que está aprendiendo.

    El resultado final se verá así:

    Realizaremos en Codepen el proyecto, así que crea un un nuevo Pen. ¿Listo para dar el salto?

    Elementos de bloque

    En esta parte del ejercicio, vas a trabajar con los elementos de bloque que acabas de aprender. Ya has visto cómo los elementos del bloque semántico nos ayudan a comprender mejor la composición de nuestro sitio web. Comencemos por crear la estructura HTML básica, que se estructurará de la siguiente manera:

    Más adelante en el ejercicio vamos a distinguir entre las diferentes secciones que tenemos. Ahora, agreguemos algunos elementos de bloque más dentro de cada elemento.

    Nav

    Crea un elemento

      con tres elementos.

      • Plan del día
      • Equipo
      • Programa

      Así debería verse nuestro menu:

      • Plan del día
      • Equipo
      • Programa

      Encabezado

      Tienes que crear dos cosas diferentes aquí:

      • Primero, crea un

        con el texto "IronSkydive"
      • Debajo del título, realiza un

        con el texto “Let the trip begin”
      • Una vez realizado, crea una etiqueta , la cual contendrá una cita

      Sección 1

      Esta sección tiene un fondo obscuro, el cual cubrirá el ancho completo del sitio web.

      Para crear este efecto más adelante, vamos a crear un contenedor dentro de la sección del contenido de la sección. Este contenedor será muy útil para establecer un ancho específico y centrar todo el contenido en la pantalla cuando lleguemos a realizar los estilos en CSS.

      Este contenedor será un

      y contendrá tres etiquetas para agregar la información debajo del encabezado.

      Inside each

      , add an

      tag for the different titles, and a paragraph for the white text. The result would be something like this:

      Sección 2

      Esta sección es bastante similar a la anterior. En este caso, la sección contendrá un título

      , con el texto "¿Cómo estructuramos el día?" Y cuatro artículos diferentes.

      Dentro de cada artículo, por el momento, vamos a tener una etiqueta

      con el título del artículo, y una

      con el contenido del artículo.

      Sección 3

      Este caso es igual que la Sección 1, tendrá un fondo oscuro y un contenedor para centrar el contenido en el interior. Al igual que en las secciones anteriores, debe agregar un título

      y un

      con una breve descripción.

      Luego, agregará tres

      vacíos que contendrán la información de cada miembro del equipo. Es suficiente tener un texto que indique los diferentes artículos:

      Sección 4

      Esta sección será muy importante en futuras iteraciones del ejercicio. Contendrá la tabla de programación y el formulario que permitirá a nuestros visitantes suscribirse y disfrutar de la experiencia de IronSkydiving.

      En este momento, es suficiente agregar dos encabezados

      diferentes con el texto:

      • Programa
      • Programar una horario

      Pie de Página

      Por último, pero no menos importante, la sección del pie de página debe contener solo una etiqueta

      . Dentro de esta
      , debe agregar varias cosas (descritas en el siguiente orden):

      • con el título "Información de contacto"
      • con la siguiente información: IronSkydive 33 Rue la Fayette, 75009 Paris, France +33 (0) 619 193 088
      • con el título "Síguenos"
      • Una lista
          con tres elementos (Twitter, Facebook, Instagram)

        Resumen

        En esta lección, has aprendido más sobre los elementos de bloque y cómo se comportan en una página web. Has visto la etiqueta

        y cómo usarla para separar secciones.

        También has aprendido la diferencia entre etiquetas semánticas y no semánticas, y cómo HTML5 introdujo algunos de los bloques más comunes utilizados en cada página web para identificar rápidamente secciones, no solo para los usuarios, sino también para el posicionamiento web SEO.

      • Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment