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

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

Roner Ortega Cueto

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.

Erick Vásquez López

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

Valeria Calcina Cisneros

Otra forma de instalar Live Server 😉
.
Primer paso

.
Segundo paso

.
Tercer paso

.
Espero que les sirva 😃

daniel777u

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

Michelle Verano Osorio

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

Ernesto Briceño

 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>```

dannielrazo

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 -->

Juan Camilo Vélez Granados

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

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.

<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>```

Christian Velázquez

Buen aporte lo del “live server”.

Jimmy Buriticá Londoño

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

Bernardino Villagra Baez

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

Santos Romero

Podemos instalar también desde la misma herramienta.
.

paulmanobanda

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

Fernando de Leon Gil

¡Que genial el plugin de Live Server!

7Silva

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/

Santiago Prada Betancourt

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

Brayan Laureano Paucar

Emmet es lo mejor para hacer HTML de manera rapida.

Bernardino Villagra Baez

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

Ctaracena27

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

Abril Darynka Tapia Sosa

Desde ahora me cambio a Visual Studio Code

Pedro Ricardo Muñoz Amador

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

bracey.vim

Valeria Calcina Cisneros

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.

David Axel González Flores

Super recomendado Live Server

Miguel A. López

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

Carlos Ramos

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.

Luis Pacheco

Esta clase debería estar antes de la clase anterior

Joram Pérez

Tambien aprendiendo a trabajar con BEM

Jonathan Barzola

Es un atajo de Emmet:

header>nav>ul>li*4>a

Diego Manzo

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

JLV Enterprises Colombia

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

danoct

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

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

Luis Velásquez

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.

Jesús Romero Rivera

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

JochuaOrtiz

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>

Diego Alfonso Najera Ortiz

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

Andrea Lozano Cataño

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.

Daniel Carmona

Yo usaba muchos div jaja

Camilo Joval Reynaga Cardenas

Instalar Live server - vs code

Maria Auxiliadora Sanchez

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

Jerry Gil Contreras

Gran aporte lo de Visual Studio Code Live Server

fabriziocorzini

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

Darío Germán Mansilla

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

Jose Fernando Espinosa Beltran

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.

Manuel Rivera

Esta super el plugin 😉

Brayan Alexander Ñauñay Granizo

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

César Andrés Aguilar Párraga

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

Andres Ramirez

Pueden instalar un paquete live server para ATOM de igual manera

Henry Caicedo Velasco

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

Sebastián Riátiga

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.

Sergio Díaz Fernández

EXCELLENT WORK

Juan Esteban Munoz

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.

Miguel Fernando Chanduvi Varas

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).

Jose Rios

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 ♥

Diego Morales

**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/).

Yasmil Gonzalez

hace 7 meses

El pluggins de live server tambien se puede instalar directamente desde vsc, buscar el icono de extensiones, dar enter y escribir live server lego dar enter donde dice instalar

Ángela Sofía Osorio García

`header>ul>(li>a)*4`

OSWALDO DE JESÚS MONTES CAMARILLO

¡¡Genial!! Mucha práctica!!

David Limon

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

anamadipa

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

Leidy Vaneza Vicente Ccorimanya

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.

willy jaramillo

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

JAIRO SALAZAR CASTAÑO

Gracias¡

Ricardo Alfonso Chavez Vilcapoma

Mi header

Ricardo Collado

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!

Nathalia Maya

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.

Carlos Hernández Sandoval

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”.

Leidy Vaneza Vicente Ccorimanya

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.

Elvis Paul De la Cruz Gavidia

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

ROGER COTRINA

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

Cesar Arellano Hernández

su wallpaper de escritorio es de la banda Born Of Osiris

Raúl Adolfo Sánchez Rodríguez

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:

Enrique Martonez

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

Esteban Maruri

el video de esta clase va antes

PAULO GUERRERO

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

Jully Evangelina Flórez Fonseca

Super el Live Server, me encanto lo seguire usando !

JEAN PAUL BIGOT

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

joseangelsorianogonzalez

</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

OSWALDO DE JESÚS MONTES CAMARILLO

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

Alfredo Castro

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">

Danilo Estupiñan

Gracias por los comentarios para agilizar la escritura de codigo

Carlo Wesley Martinez Ortiz

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

jorgeDavid

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

Hiram Rodriguez Gomez

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

Luis Cortes

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

Diana Carolina Gallo Lara

Woooowww.
li * 4 ❤️

Detalles que enamoran

Santiago Rodriguez Chaves

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

Francisco Encabo Servián

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.

Maycol Brayan Huancas Loayza

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.

Jorge Piero Paz Córdova

Aquí el link de instalación! 😉
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Cesar Alfredo Llacta Quispe

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

Cesar Alfredo Llacta Quispe

Probé esto y se creo todo el código

nav>ul>li*4>a

Yerson Felipe Ramirez Garnica

Recuerden colocar el css

html{
font-size: 62.5%;
}

Por asuntos del rem 😄
saludos compañeros

CHRISTIAN OLIVER SOLANO NUÑEZ

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/

Percy Flores

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

Santiago González Ortiz

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

Yimmy Cruz