No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Qué es el Header y cómo hacer su maqueteado

6/18
Recursos

Header es una etiqueta semántica que le indica al navegador que el contenido de esta etiqueta es la cabecera de la página. Todas las etiquetas semánticas advierten sobre la parte de la página en la que se encuentra ese contenido.

Creando el header de nuestro proyecto

Continuemos justo donde nos quedamos en nuestro archivo index.html, donde ya teníamos el esqueleto básico para empezar. Vamos a crear las etiquetas una dentro de otra en el orden mostrado abajo.

  1. Lo primero, por supuesto, es abrir una etiqueta header dentro de nuestro body para delimitar toda el encabezado.
  2. nav nos indica que hay una barra de navegación dentro. Tenemos enlaces en nuestra barra de navegación.
  3. ul la usamos para crear una lista desordenada para colocar dentro los ítems.
  4. li son los ítems de una lista, sin embargo, lo que buscamos son enlaces. Para ello colocamos dentro una etiqueta ancla o a. En nuestro proyecto tenemos cuatro: Gmail, Imágenes, un ícono y una foto.
  5. a es una etiqueta para agregar enlaces a un texto.

Este es el resultado final que deberías tener dentro de tu etiqueta body hasta ahora:

6.png

En tu navegador, deberías ver algo así:
image.png
Nota: No olvides que puedes instalar el Live Server desde la pestaña de Extensiones dentro de Visual Studio Code.
image.png

O puedes instalarlo directamente desde la página principal aquí.

¡Muy bien! Más adelante aprenderemos funciones más avanzadas y a aplicar estilos.

Contribución creada con aportes de: José Miguel Veintimilla.

Aportes 214

Preguntas 22

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Mejorando el atajo quedaria asi
ul>li*4>a lo cual genera lo siguiente:

<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>

Con emmet pueden trabajar mas rapido la escritura de codigo en html

Si quieren sacar la lista completa sin necesitat de escribir codigo por codigo puedens implemente colocar esta linea en Visual Studio Code.

y presionar tabular para que se autocomplete (Si al tabular no se automcompleta borra el “$” y vuelvelo a colocar y presionas tabular) toda la lista con sus hiper vinculos les quedara algo parecido a esto.

Live Server siempre es de utilidad, pueden ver otras herramientas en el video donde Leonidas Esteban comparte su configuración de vs code https://www.youtube.com/watch?v=o8iqG4bAN0s&t=171s

Otra forma de instalar Live Server 😉
.
Primer paso

.
Segundo paso

.
Tercer paso

.
Espero que les sirva 😃





la unica que no es original es el icono de la pestaña

A pesar que ya se esto, me gusta mucho la manera como explica, de verdad que es bueno.

 ul>li*4>a
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>```

Aqui una explicacion del codigo

<!-- Comentarios Se hacen con Shift + alt + A -->
<!DOCTYPE html>
<!-- Inicio y Raóz del domumento  -->
<!-- Lang se utiliza para el idioma de tu pagina web -->
<html lang="es">

<!-- Aqui va la cabecera del codumento, se pone la información acerca del documento -->

<head>
    <!--Se utliza especificar los caracteres que tendra el sitio -->
    <meta charset="UTF-8">
    <!-- Este meta esta dividido en tres -->
    <!-- 1 <meta> es el elemento de ventana gráfica en todas las páginas web: -->
    <!-- 1. La width=device-widthparte establece el ancho de la página para seguir el ancho de la pantalla del dispositivo -->
    <!-- 2. La initial-scale=1.0parte establece el nivel de zoom inicial cuando el navegador carga la página por primera vez. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- La etiqueta <title> define el nombre del documento y se muestra en la barra de navegación o en la pestaña de la pagina -->
    <title>Google</title>
    <!-- Este es un enlace que une el index con la hoja de estilos -->
    <link rel="stylesheet" href="style.css">
</head>
<!-- Aqui termina la cabecera -->
<!-- Aqui empieza el codigo que ve el usuario    -->

<body>

</body>
<!-- Aqui termina el codigo que ve el usuario    -->

</html>
<!-- Aqui termina el codigo -->

VSCode recibe la sintaxis de Emmet. Pueden utilizar header>nav>ul>li.nav__items*4 para ahorrar tiempo en la creación de sus etiquetas.

https://docs.emmet.io/cheat-sheet/

<header>
        <nav>
            <ul>
                <li class="nav__items"></li>
                <li class="nav__items"></li>
                <li class="nav__items"></li>
                <li class="nav__items"></li>
            </ul>
        </nav>
    </header>```


Buen aporte lo del “live server”.

La diagramación, también llamada a veces maquetación, es un oficio del diseño editorial que se encarga de organizar en un espacio contenidos escritos, visuales y, en algunos casos, audiovisuales en medios impresos y electrónicos, como libros, diarios y revistas.
Wikipedia

Si de repente no quieren instalar el Live Server en VS pueden utilizar prepros como alternativa.

Podemos instalar también desde la misma herramienta.
.

Y yo matándome refrescando y buscando el index de la carpeta, ja ja ja ja 😃

¡Que genial el plugin de Live Server!

Acá les dejo un cheat sheet de los Emmets mas importantes que podemos hacer en VS Code. Si prácticas mucho se vuelven parte de tu código y te hacen más divertida y menos repetitiva la maquetación.
https://docs.emmet.io/cheat-sheet/

Me parece que el curso es bueno, pero es demasiado descriptivo para lo que es la ruta de aprendizaje

Emmet es lo mejor para hacer HTML de manera rapida.

Short para crear los cuatro list item con sus respectivas etiquetas ancle li*4>a

Ya tenía instalado Live Server y no lo sabía, ni lo conocía, excelente herramienta!

Desde ahora me cambio a Visual Studio Code

Si alguien usa Vim y quiere instalar algo parecido al live server les recomiendo un plugin que se llama

bracey.vim

Maquetado del Header
.
Etiqueta semántica, son las que sirven para definir el esquema principal y nos dicen en donde estamos.
.
Repaso de etiquetas:
Nav, es una etiqueta contenedora, que indica la navegación por medio de links.
Unordered list (ul), es una etiqueta contenedora, representa una lista de ítems.

Super recomendado Live Server

No sigan sin ver este video de Leonidas sobre cómo configurar Visual Studio Core para principiantes https://youtu.be/o8iqG4bAN0s

Clase 6 - Qué es el header y cómo hacer su maquetado


¿Para qué nos sirve el elemento <header>?

  • Es una etiqueta semántica que nos permite indicarle al navegador cuál será la cabecera de la página web.

¿Para qué nos sirve el elemento <nav>?

  • Es una etiqueta semántica que nos permite indicarle al navegador una barra de navegación.

¿Cómo sabemos que debemos usar el elemento <nav>?

  • Cuando tenemos enlaces que llevan a otro lado dentro de una barra de navegación.

¿Para qué nos sirve el elemento <ul>?

  • Es una etiqueta semántica que nos permite crear una lista desordenada en nuestra página web.

¿Cómo sabemos que debemos usar el elemento <ul>?

  • Cuando necesitamos crear una lista pero el orden del contenido no nos importa.

¿Para qué nos sirve el elemento <li>?

  • Es una etiqueta semántica que nos permite agregar los items a una lista ordenada o desordenada.

¿Para qué nos sirve el elemento <a>?

  • Es una etiqueta semántica que nos permite agregar links o enlaces a nuestra página web.

¿Cómo se llama la extensión que usamos en VSC para ver en tiempo real los cambios que guardamos de nuestro proyecto?

  • Live Server.

Esta clase debería estar antes de la clase anterior

Tambien aprendiendo a trabajar con BEM

Es un atajo de Emmet:

header>nav>ul>li*4>a

El video 6 y 7 están desordenados, el 7 debería ser el 6

Creo que acá no hay un Curso de Emmet desde cero. En este link encontré uno en YouTube, puede ser pertinente hacerlo. Saludos! https://www.youtube.com/watch?v=3kW_QIpbfGg&list=PLlBLKilX0obefgsGOL-G1EmHtO_iROYN2

Les comparto un link para ver como estructurar el HTML de forma semántica

https://www.mclibre.org/consultar/htmlcss/html/html-secciones.html

Otra forma de tener un servidor de desarrollo, independiente del editor y más segura, es correr live-server desde la terminal.

# Teniendo NodeJS instalado: 
npm install -g live-server

# Desde la carpeta de nuestro proyecto corremos:
live-server --host=localhost

El “–host=localhost” es opcional, pero evita que nos expongamos innecesariamente en la red local.

No se olviden de agregar Emmet a su editor de código para codear más rápido!

haciendo el atajo mas interensante hagan esto:

ul.navbar>li.navbar__item*4>a[href=#>.navbar__link

y tendran esto :

<ul class="navbar">
				<li class="navbar__item"><a href="#>.navbar__link"></a></li>
				<li class="navbar__item"><a href="#>.navbar__link"></a></li>
				<li class="navbar__item"><a href="#>.navbar__link"></a></li>
				<li class="navbar__item"><a href="#>.navbar__link"></a></li>
			</ul>

Algo nuevo, no sabia que el live server refrescaba solo 😮

Este plugging “Live Server” de VScode es genial. Personalmente me ha ahorrado mucha energía mental al ya no tener que estar guardando y actualizando…guardando y actualizando.

Yo usaba muchos div jaja

Instalar Live server - vs code

También se puede instalar Live Server directamente en Vs Code en extensions

Gran aporte lo de Visual Studio Code Live Server

Esta muy bueno el paso a paso y tambien está muy buena la extension del live server, lo super recomiendo

Si no les funciona el live server, cierren la pestaña de su proyecto y abran la carpeta nuevamente. Luego de eso si funciona!

Me parecen excelentes estos cursos de Platzi, ayudan mucho a complementar lo aprendido en los cursos anteriores como el de Desarrollo Web y poco a poco tenemos una experiencia de aprendizaje más completa.

Esta super el plugin 😉

Porfavor alguien me podría explicar ¿para que sirven los atributos name y content dentro de la etiqueta meta?

Aquí les dejo un link donde explican como instalar live server, para ver los cambios de su proyecto en tiempo real. 🔥🔥🔥

Pueden instalar un paquete live server para ATOM de igual manera

Las abreviaciones en VSC sirven bastante
ul>li*4>a

  • Etiqueta semantica: indica en qué parte estamos de nuestra sección de código.
  • No es buena práctica únicamente utilizar etiquetas div.
  • HTML5 semántico implica ocupar las etiquetas que ofrece el código para lo que son.
  • Para los que usan Atom, el shortcut para multiples li es: li numero* + TAB.
  • Atom package para Live Server.

EXCELLENT WORK

no tenia live server, una cosa mas que aprendi y en mi codigo no coloque la etiqueta header si no que de una vez coloque el nav, me dio pero no se que piensan uds.

Existen otros valores de atributos muy utilizados como son author y description, estos pueden hacer que la pagina web aparezca mas arriba en las busquedas relevantes de los motores de busqueda (LA descripcion sobre todo) a esto es a lo que se le conoce como SEO (Optimizacion del motor de busqueda).

Los comandos para las abreviaciones se le conoce como Emmet, VS Code ya lo tiene, tienen que aprendérselo. Caso que usen otro editor, busquen la forma de agregarlo como plugin ♥

`header>ul>(li>a)*4`
**Header** es una [etiqueta semántica](https://platzi.com/clases/1802-accesibilidad-web/26072-que-es-el-html-semantico-y-por-que-es-importante/) que le indica al navegador que el contenido de esta etiqueta es la cabecera de la página. Todas las etiquetas semánticas advierten sobre la parte de la página en la que se encuentra ese contenido. ## Creando el header de nuestro proyecto Continuemos justo donde nos quedamos en nuestro archivo *index.html*, donde ya teníamos el esqueleto básico para empezar. Vamos a crear las etiquetas una dentro de otra en el orden mostrado abajo. 1. Lo primero, por supuesto, es abrir una etiqueta **header** dentro de nuestro body para delimitar toda el encabezado. 2. **nav** nos indica que hay una barra de navegación dentro. Tenemos enlaces en nuestra barra de navegación. 3. **ul** la usamos para crear una lista desordenada para colocar dentro los ítems. 4. **li** son los ítems de una lista, sin embargo, lo que buscamos son enlaces. Para ello colocamos dentro una etiqueta ancla o **a**. En nuestro proyecto tenemos cuatro: Gmail, Imágenes, un ícono y una foto. 5. **a** es una etiqueta para agregar enlaces a un texto. Este es el resultado final que deberías tener dentro de tu etiqueta **body** hasta ahora: ![6.png](https://static.platzi.com/media/articlases/Images/6%281%29.png) En tu navegador, deberías ver algo así: ![image.png](https://static.platzi.com/media/articlases/Images/image%2839%29.png) **Nota**: No olvides que puedes instalar el Live Server desde la pestaña de Extensiones dentro de *Visual Studio Code*. ![image.png](https://static.platzi.com/media/articlases/Images/image%2840%29.png) O puedes instalarlo directamente desde la página principal [aquí.](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) ¡Muy bien! Más adelante aprenderemos funciones más avanzadas y a [aplicar estilos](https://platzi.com/clases/1758-html-practico/24686-agregando-estilos-al-header/).

¡¡Genial!! Mucha práctica!!

Por un momento pense que para WSL sincronizado con VSCode no servia el Live Server, pero ya veo que si, genial…

Para usar el live Server recomiendo dar click en enable (permitir conexión) puede que por eso algunas veces no funcione.

  • Header: Es una etiqueta semantica esto nos dice practicamente donde estamos en nuestra seccion de codigo tenemos etiquetas:
    📌main
    📌foooter
    📌aside
    📌nav

  • Estas etiquetas semanticas nos dicen como desarrolladores en donde estamos en que elemento de nuestra pagina estamos por eso es muy importante usarlas, no estan buena practica ocupar puras etiquets DIV las etiquetas DIV se pueden ocupar pero no en todo el proyecto.

  • La etiquela header tiene dos elementos internos estos dos elementos internos es una etiqueta nav que nos dice que hay una barra de navegacion adentro.

yo hice el header sin las ul puse los a. directo en el nav y solamente coloque display flex justify-content end y las acomode con margin

Gracias¡

Mi header

Ahh que bien se siente volver a tener a Diego como profesor. Vengo de haber terminado el curso practico de Frontend; segui con ese, luego del curso de Html y css con Diego. y Estefany es buena, pero no explica las cosas como Diego!

Algo que descubri aunque creeria algunos ya lo saben, pero para los que no… Una forma de escribir código mas rapido

ul>li*4>a
Enter

Y aparece todo el codigo para no estar copiando y pegando.

Al inspeccionar la página de “google” me di cuenta qué está hecha con puras malas prácticas, nada de html semántico, puro “div”.

  • Live server en Visual Studio Code es una herramienta que nos permite lanzar un servidor de desarrollo local para previsualizar en el navegador lo que estamos escribiendo en nuestro editor de código.

Para instalar Live Server se me hizo mas fácil descargando al extensión dentro ve VS

Como cuando sabes que es mala practica usar solo div y miras el chrome con solo eso :v

su wallpaper de escritorio es de la banda Born Of Osiris

Hola comunidad, consulta:

Al guardar los cambios realizados en el VSC (ctrl + s) me sale el siguiente mensaje y además no me permite ver los cambios en el local host:

Hola este es el header de nustro Google clone

<code>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <link href="assets/css/style.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <nav class="navbar">
        <ul>
          <li><a href="#">Gmail</a></li>
          <li><a href="#">imágenes</a></li>
          <li>
            <span class="material-symbols-outlined apps">
              apps
            </span>
          </li>
          <li>
            <img
              class="img-perfil"
              src="https://via.placeholder.com/150
C/O https://placeholder.com/64"
              alt=""
            />
          </li>
        </ul>
      </nav>
    </header> 

Este es el css

<code> 
* {
    margin: 0;
    padding: 0;
}

body, input, button {
    color: #202124;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

header {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    width: 100%;
}

.navbar {
    margin: 15px;
}

.navbar ul {
    display: flex;

}

.navbar li {
    list-style: none;
    padding: 5px;
}

.navbar .apps {
    height: 64px;
    margin-top: -5px;
    width: auto;
}

.navbar .img-perfil {
    border-radius: 50%;
    height: 32px;
    line-height: 9;
    margin-top: -10px;
    width: 32px;
}

.navbar a {
    text-decoration: none;
}

espero que les sea de utilidad

el video de esta clase va antes

Hola team de Platzi informo que las clases 6 y 7 estan desordenadas la 7 deberia ser la 6 y viceversa.
Saludos!!

Super el Live Server, me encanto lo seguire usando !

trato de abrir live server, pero me pide un archivo o espacio de trabajo.

</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Gmail</a></li>
<li><a href="">Imagenes</a></li>
<li><a href=""></a>Icon</li>
<li><a href=""></a>Photo</li>
</ul>
</nav>
</header>

</body>
</html>

CODIGOS DE LA CLASE, TRATARE DE PONER CADA UNO EN LOS EPISODIOS

¡¡Genial la función de Live server!!


También podemos agregar el ícono (favicon) para que se muestre en la pestaña de nuestro navegador

  • Para ellos tenemos que descargar el ícono de favicon:
  • Descarga de favicon Google
  • Colocar el archivo de imagen en la misma ruta de nuestro archivo index.html
  • Agregar una etiqueta <link> debajo de nuestra etiqueta <title>
<title>Google Clone</title>
<link type="image/png" sizes="32x32" rel="icon" href="./favicon-google.png">

Gracias por los comentarios para agilizar la escritura de codigo

En el ejercicio olvide la existencia de la etiqueta nav, sentia que me faltaban cosas apesar de que me quedo. Que útil es poder revizar esto.

Le recomiendo a cualquiera aprender a usar emmet. Yo haria algo tal que header>nav>ul>li*4>a

Si están usando trabajando con WSL y quieren usar live server, deben verificar que esté instalado en WSL también.

Para copiar más rápido elementos completos, presionen **Shift **+ **Alt **+ **FlechaAbajo **para copiar la línea en la que está el cursor o las líneas que tengan seleccionadas

La extensión de LiveServer es muy útil! Existen otras que pueden ser de gran utilidad… para mas información pueden hacer el curso de prework

Woooowww.
li * 4 ❤️

Detalles que enamoran

El uso de la etiqueta nav, ul y li son la mejor forma de usar html semantico.

Aprender EMMET es lo mejor que puedes hacer como programador o maquetador. Puedes hacerlo de dos formas:
=> ul>li*4>a
=>ul>(li>a)*4

Elige la que mejor entiendas, pero aprende a escribir con EMMET y verás lo rápido que vas. Eso si! Tenlo antes todo preparado en un diagrama o un mockup de diseño así no tendrás que ir borrando a cada rato.

DEFINICIÓN
header = Es una etiqueta semántica esta nos dice practicamente en donde estamos en nuestra sección de código, Tenemos etiqueta <name>, <footer>, <aside>,<nav> y esas etiquetas semánticas nos dice como desarrolladores en donde estamos, en que elementos de nuestra página estamos, por eso es muy importante utilizarla, no es tan buena practica solo ocupar la etiqueta <div>.

La etiqueta <div> se puede ocupar pero no en todo el proyecto, cuando hablamos de HTML-5 semántico, es para ocupar la etiqueta que nos da HTML-5 para lo que son, en este caso tenemos la etiqueta <header> aqui es donde es la parte principal.

La etiqueta <header> elementos internos, estos elementos son la etiqueta <nav> que nos da a conocer que hay una barra de navegación adentro dentro de ella encontraremos lo siguientes:
Aqui tenemos la etiqueta **<ul> ** se utilizan en páginas de lenguajes de marcado de hipertexto HTML y como un elemto de estilo definido en una hoja de estilo en cascada.
Tambien tenemos la etiqueta <li> es un elemento de lista que declara cada uno de los elementos de una lista.

Instalación de Live Server desde el mismo Visual Studio Code

Probé esto y se creo todo el código

nav>ul>li*4>a

Recuerden colocar el css

html{
font-size: 62.5%;
}

Por asuntos del rem 😄
saludos compañeros

les comparto alguna de las abreviaciones
html:5
meta:vp - Etiqueta meta viewport para sitios responsivos
#contenedor -Div con el id “contenedor”
**y aquí un link **
https://parzibyte.me/blog/2018/02/08/abreviaciones-emmet-html/

Cuando le hago click derecho no me parece esa opción “live server”…
que hacer en estos casos? Porque sucede esto ?

De igual forma se puede instalar Live Server desde el propio Visual Studio Code Sólo hay que ir a la pestaña de plugins

Para USUARIOS de ATOM
Instalar Live Server
Primer Paso: Ir a File en el Menú, Ir a Settings (Configuración)

Segundo Paso: Ir a Install seguido buscamos "atom-live-server"

Tercer Paso: Instalamos el paquete correspondiente

Paso Final: Podemos acceder a live-server en nuestros proyectos dandole click dentro de nuestros paquetes y listo ya tienes live server en ATOM

Bien explicado lo del atajo para generar 4 li

RECUERDEN MEMORIZAR.

Me encanta el orden que se crea con la semantica

Un buen recurso para íconos es Fontawesome