Estructura HTML del Header: Logos, Encabezados y Botones

Clase 8 de 32 • Curso de Responsive Design: Maquetación Mobile First

Resumen

¿Qué estructura tendremos que crear en nuestro header? Vamos a analizar el diseño en Figma para determinar las etiquetas que necesitamos en el archivo HTML del proyecto en curso.

Cómo hacer la maquetación en Figma

Lo primero es crear una etiqueta img dentro del header para el logo.
Luego un contenedor div que contenga:

h1 para el título principal
p para el párrafo
Una etiqueta a para el call to action, que contenga también una etiqueta span para el pequeño ícono a su lado.

Tendríamos un código así:

    <header>
        <img src="" alt="">
        <div>
            <h1>La próxima revolución en el intercambio de criptomonedas</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span></span></a>
        </div>
    </header>

El siguiente paso es aplicar clases para llamarlas desde CSS y empezar a aplicar estilos.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).

Jonathan Garcia Centurion

student•

para agilizar el trabajo al momento de poner los textos de figma, con darle click al texto al lado derecho tenemos la opción de copy en content.

Valencia Jahaira

student•

¡Gracias! :)

Javi Johan Rodríguez Giraldo

student•

Me ahorraste 10 segundos de escritura. Eres un héroe sin capa jaja

Carlos Javier Bazan Huaman

student•

solo un H1 por pagina, eso no sabia, buen dato.

Axel Yaguana

Team Platzi•

Exacto, es por SEO. Además, se recomienda que no tenga más de 50 o 60 caracteres.

Victor Andres Castillo Zambrano

student•

yo tambien me sorprendi

Obed Paz

student•

Para los que estamos trabajando con Git y GitHub, y aun tienen dudas acerca de la mala practica de subir archivos binarios al repo, les dejo este enlace que me ayudo a entender cuando NUNCA subirlos, y cuando no hay problema en subirlos.

En este caso concluyo que no hay problema, ya que nuestros SVG pesan NADA y ademas no es un proyecto que vamos a estar cambiando mucho en el futuro. Lo que podemos hacer es crear un archivo .gitignore ignorando todos los tipos de imagenes, asi git los ignora y no los commiteamos, pero si podemos subirlos al repo remoto directamente desde GitHub.

Si estoy equivocado en algo por favor hacermelo saber. :D

Victor Andres Castillo Zambrano

student•

muchisimas gracias

Percy Buendia

student•

Es correcto que el gitignore es importante para no versionar las imágenes y no aumentar el peso en nuestro repo. Sin embargo es mejor tener las imágenes siempre fuera de nuestro repo en un servidor y llamarlas a través de su link. Esto es una buena práctica y se explica en el curso de git y github

Iván Arcos

student•

Para ahorrar tiempo, les dejo un ejemplo de lo que hace Emmet en VSCode y el link para más trucos

<header>
        img>div>h1+p+a>span
</header>

DANIEL FERNANDO GRANADOS REY

student•

En la primera parte debes hacer una correcion...

<header>
img+div>h1+p+a>span
<header>

Efraín Hernández García

student•

Tremendo trucazo para ahorrar tiempo

Ignacio Basilio

student•

Aqui tienen todo y la imagen en un URL para los que estemos usando GitHub! <3

    <header>
        <img src="https://i.postimg.cc/5yRRYxRd/logotipo-vertical.png" alt="">
        <div>
            <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
        </div>
        <a href="">Conoce Nuestros Planes <span>i</span></a>
    </header>```

Juan Christopher

student•

Gracias, por el aporte.

Reynaldo Francisco Moreno Briceño

student•

Para una mejor semantica, la etiqueta "img", debe ir dentro de una etiqueta "figure" asi.

<figure>
  <img src=" " alt=" "/>
</figure>

emanuel

student•

Buen aporte!

Juan Christopher

student•

Buen Aporte.

Juan Jiménez

student•

Composición de header:

Logotipo
Encabezado
Párrafo
Botón flotante

Código de header:

        <img src="" alt="" />
        <div>
            <h1></h1>
            <p></p>
            <a href=""><span></span></a>
        </div>

Jairo Alberto Perez Guerrero

student•

Saludos, ¿La etiqueta img no debería estar en una etiqueta picture como fue enseñado en el curso definitivo de html y css? y si no es asi ¿Cuándo debería utilizar la etiqueta picture y cuando no?

Roger Carlos Ariel Alba

student•

Hola,

Tanto picture como figure son más de valor semántico, así que es una muy buena práctica más no obligatorio.

Aquí te dejo una lectura acerca de picture

Saludos

Rodrigo Rodriguez

student•

Tengo la misma pregunta y la misma duda , ya que como dices en el curso definitivo de html y css se recomienda embeber el img en picture como una buena practica .

José Rafael Hernández Barboza

student•

Para que solo copien y peguen el texto del (h1, p y a) del header :).

Titulo principal: La próxima revolución en el intercambio de criptomonedas.
Parrafo: Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
Botón: Conoce nuestros planes

Fredy Reyes

student•

Gracias

Magalí Acevedo

student•

Nerio José Balza Durán

student•

En el inspector de elementos de figma, se puede copiar el texto.

German Enrique Ceballos Garcia

student•

Las etiquetas ancla <a href=''></a>, nos permiten utilizar su atributo href para navegar entre las diferentes secciones.
Las etiquetas <span></span>, es una etiqueta comodin que podemos utilizarla para incluir iconos.
Las páginas web solo deben tener un <h1> por temas de SEO.

Jesús Andrés Monge Loor

student•

Gracias por el resumen crack! 💚

Jose Luis Grande Acevedo

student•

Por buenas prácticas cualquier página, pantalla solo puede tener un h1 por temas de SEO. El ícono lo meteremos dentro de la etiqueta span, es una etiqueta comodín que nos ayuda justo para ese tipo de textos o iconos que incluso van adentro de una etiqueta.

 <a href="">Conoce Nuestros Planes <span></span></a>```

Jose Luis Grande Acevedo

student•

¿Qué es SEO?, ya que Diego mencionó que por temas de SEO solo puede ir un h1.

Alejandra Hincapie

student•

hola. es el posicionamiento en buscadores; los motores de búsqueda posicionan mejor a las paginas que, entre otras muchas cosas, cumplen con las reglas de semántica. el h1 es como el titulo del libro, solo debe haber uno. Curso de Buenas Prácticas de SEO

Jose Luis Grande Acevedo

student•

muchas gracias por la explicación :D

Luis Martín

student•

No es mejor poner el logo en svg? pesaría mucho menos.

Leandro Cosme Tomassini

student•

Si, yo creí lo mismo seria mucho mas liviana en formato .svg.

Leonardo Esteban Omeara Garzon

student•

¿En que casos es mejor envolver la etiqueta <img> en <figure>? pregunto esto ya que en cursos pasados el profesor hacia mucho enfasis en usar html semantico sin embargo durante los cursos en varias imágenes solo utiliza la etiqueta <img>,

Carlos Eduardo Gomez García

teacher•

Cuando necesitas SEO, por ejemplo, si una imagen es muy importante para tu texto, lo mejor es que la envuelvas en una etiqueta <figure> porque incluso hasta le puedes poner un pie de página usando <figcaption>, un ejemplo claro son las imágenes que salen en Wikipedia :D

Gerardo Castillo

student•

Adicionalmente puedes envolver la etiqueta

con su respectiva etiqueta <picture> para incluir distintas versiones de la imagen... y todo dentro de si lo deseas

Johan Echeverri

student•

Mauqetacion del Header

 <header>
        <img src="" alt="">
        <div>
            <h2>La próxima revolución en el intercambio de criptomonedas.</h2>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce Nuestros Planes <span>i</span></a>
        </div>
        
    </header>

Israel Gutierrez

student•

Aquí es donde vemos más el uso del div, si no llevas toda la.vida usandolo, para mí que nunca lo había usado se.usa más como etiqueta contenedora que por defecto tiene display block

Jhon Alexander Mondragon Trinidad

student•

Como buena practica se recomienda comentar el código, esto facilita la comunicación con el equipo ya que tus compañeros no perderán el tiempo preguntándote para la funciona del código.

Aldo Miguel Ortiz Parodi

student•

El botón lo vas a usar cuando quieras ese efecto de presionar, sino puedes usar un <a> o un <div>.

Anfernee Valera

student•

A la hora de Maquetar una de las manera que tenemos, es separar el contenido en etiquetas contenedoras.

La imagen va junto al texto? ¿Tienen relación? se puede tomar esto como una de las tantas maneras para poder dar forma al código.

Esto ayudará cuando se apliquen estilos para hacer un display, por ejemplo con flexbox, es necesario aplicarle a un padre el display flex para que sus hijos se vuelvan item flexibles, y poder manipularlos con facilidad.