Anatomía de un documento HTML y sus elementos

¡Tranquis! No te asustes si ves que usamos la terminal 🤯. Recuerda que para ello tenemos el Curso de Introducción a la Terminal y Línea de Comandos (spoiler: cuando trabajas en desarrollo web es normal que utilices mucho la línea de comandos, simplemente porque te facilita mucho el trabajo 👀). Pero igual puedes hacerlo creando las carpetas con el gestor de ventanas de Windows o macOS 😉.
.

¿Qué es una etiqueta? 🤔

Básicamente una etiqueta representa un elemento de nuestro HTML. ¿Recuerdas cuando te dije que trabajar con HTML era decirle al navegador que agregue cualquier cosa que nosotros queramos? Bueno, eso se lo decimos por medio de etiquetas 7u7.
.
Como ya sabes, una etiqueta representa cualquier cosa que nosotros queramos agregar, pero esta etiqueta también puede tener atributos, pero… ¿Qué son los atributos? ¡Inventémonos una etiqueta! La etiqueta michi 👇:
.
<michi>Retax</michi>
.
Imagina que nuestra etiqueta inventada es capaz de pintar un michi en nuestra página web, ¡pero un michi puede ser de distintas formas! Por ejemplo, podemos tener michis blancos, negros, con rayitas, grandes, pequeños, tranquilos, etc. Entonces esas características las podríamos definir con los atributos, por ejemplo:
.
<michi color="blanco" con-rayitas="sí" tamaño="pequeño" posicion="acostado">Retax</michi>
.
¡Y esto podríamos generarnos un michi!
.

.
¡Así es como funcionan las etiquetas en HTML! 👀.
.
❗ La etiqueta <michi> no existe en HTML, fue usada para fines prácticos, no intente usarla.

☝ Ahora entendamos mejor qué significa esto de “anidar”.

.
En HTML tenemos algunas etiquetas que pueden actuar como cajas, ¡sí!, puedes imaginártelas como cajitas. Entonces ahí dentro podemos meter más etiquetas HTML (y sí, así como las cajas de Amazon, también puedes meter cajas dentro de otras cajas 😏)
.

.
Por ejemplo, la etiqueta <section> puede actuar como una caja, ¡pero la etiqueta <ul> también puede actuar como una caja! ¿Por qué tenemos tantas cajas? 🤔 Bueno, es aquí donde entra el HTML semántico, lo cual lo verás en la próxima clase 👀👉

broken heart💔💥!

Platzi se preocupa por ti, y por ello, hicieron esta cheatsheet de las etiquetas más usadas en HTML

No conocía el comando 😱😱😮:

take     // Crea una carpeta y a la vez entras en ella 

Super útil, sobretodo para los que estamos en Linux hace que dejes de pasar tiempo en cosas como crear una carpeta y de ahi entrar en ella jaja Genial 🤩😂.

Le comparto mis apuntes de la clase. 😄

Anatomía de un elemento HTML

Sintaxis

Esto nos da la estructura de casi todas las etiquetas.

Atributos

No solo se queda en etiquetas y listo, también tenemos atributos que los vamos a colocar en la etiqueta de apertura.

Los atributos nos sirven para muchas cosas y cada uno de estos dependen de los tags o etiquetas que utilicemos.

Anidamiento

Podemos colocar etiquetas dentro de otras etiquetas, las vamos a colocar según la estructura que necesitemos.

Elementos vacíos

No todos los elementos tienen etiquetas de cierre y para “funcionar” utilizan atributos.

Anatomía de un documento HTML

DOCTYPE

Le indica al navegador que el documento que está por leer es un documento HTML.

html

Es el lugar donde va a ir todo nuestro código.

head

Es una cabecera donde colocamos las cosa que no ve el usuario pero que son necesarias para que nuestro proyecto funcione, por ejemplo podemos colocar un flaticon, título, link que vayamos a necesitar.

body

Dentro de esta etiqueta es donde vamos a colocar toda nuestra estructura de HTML.

Comandos de terminal

take

Crea una carpeta y entra a la carpeta creado. Estaría sustituyendo a los comandos mkdir y cd.

take nombre-carpeta

Recuerdo que Freddy nos hizo aprendernos de memoria la estructura básica de html, en el curso de programación básica 😒😂😂

Comando de terminal: “take” para crear un directorio y entrar en el, me quedé 😮

mis oidos reventaban cada vez que decia basicamente haha xD pero es buen contenido

Pequeña explicación - Take 😃

Básicamente el comando take es la abreviación de lo que seria:

 mkdir "nombrecarpeta" && cd "nombrecarpeta"

Puedes intentar usar este mismo comando de arriba en tu terminal y veras como podemos ejecutar condiciones anidadas. 😮

Notas de la clase

<h1 class="title">Platzi</h1>

• <h1>: Etiqueta de apertura
• </h1>: Etiqueta de cierre
• Platzi: Contenido
• class: Atributo
• "title": Valor

Anidamiento: Etiquetas dentro de otras.

Estructura básica de un HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

La clase está muy bien explicada y la pedagogía está a millón, sin embargo creo está mas enfocada a los usuarios de MAC.
.
Para los que usamos windows y por consiguiente WSL 2, se nos presenta el inconveniente de no saber la ruta en la que están guardados las carpetas que creemos en la terminal de ubuntu, ya que cuando la prof crea una carpeta desde la terminal de ubuntu dentro de VS code, ella copia la ruta y abre una ventana en el navegador y pega esa ruta para visualizar los cambios que va a realizar en el editor. En mac es así, pero en WSL 2 la ruta fallará.
.
.Para nosotros en Windows, la forma de acceder a las carpetas es con //wsl$/Ubuntu-20.04+ el resto de la ruta de nuestro directorio. (Esto se pega en el navegador precedido de la palabra file: file:///wsl$/ubuntu-20-04/home/…
.
.
Espero les sirva y puedan acceder desde allí

Para los que usen Windows, abran la terminal usando CTRL + J y dentro seleccionen el símbolo “+” y seleccionen Git Bash, ya que eso es lo que se aprendió en el curso de Prework

Una vez dentro ya podermos usar los comandos aprendidos, como cd, touch, mkdir, entre otros.

PD: El comando take se usa en la terminal de macOS, aquí en windows usamos touch

Una buena extensión en visual es Live Server esto hace que puedas abrir tu HTML en el navegador y se ejecuta todos los cambios que guardes den tu código

si quieres tus letras con colores puedes usar SynthWave “84”

Para poder utilizar el comando take debes estar usando zsh como shell de tu terminal. Es común utilizar zsh con oh-my-zsh para personalizar a un siguiente nivel tu teminal
Te dejo algunos enlaces que pueden ser de ayuda

https://ohmyz.sh/
https://linuxhint.com/install_zsh_shell_ubuntu_1804/

Al dia de hoy ya se puede usar visual studio code desde el navegador sin necesidad de instalarlo en el pc, les dejo el link para que lo revisen
https://code.visualstudio.com/blogs/2021/10/20/vscode-dev

Se debe instalar ZSH
Ubuntu 20.04 LTS : https://noviello.it/es/como-instalar-zsh-en-ubuntu-20-04-lts/
Ubuntu 18.04 LTS : https://linuxhint.com/install_zsh_shell_ubuntu_1804/

Se puede realizar desde Visual Studio Code o terminal WSL.

Espero sea de ayuda.

Anatomía de un documento HTML

¿ Que es HTML ?

HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web. Además de HTML, generalmente se utilizan otras tecnologías para describir la apariencia/presentación de una página web
…

Estructura básica de un documento HTML

<!DOCTYPE html>
<html lang="en">

<head> // Etiqueta de apertura Cabecera del documento
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head> // Etiqueta de cierre de la cabecera

<body> // Etiqueta de apertura body, dentro va todo lo que va a ver el usuario 

</body> // Etiqueta de cierre  body

</html>

Las metaetiquetas, etiquetas meta o elementos meta (también conocidas por su nombre en inglés, metatags o meta tags) son etiquetas HTML que se incorporan en el encabezado de una página web y que resultan invisibles para un visitante, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta

Etiquetas HTML

Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:

• El carácter “menor que” <
• Una palabra o carácter que determina qué etiqueta se está escribiendo
• Cualquier número de atributos HTML que se quiera usar, escritos de la forma
  nombre=”valor”
• El carácter “mayor que” >

En la actualidad existen 142 etiquetas HTML

Atributos

La palabra atributo se encuentra definida por el diccionario de la real academia española como: “las propiedades, características o cualidades de un ser”.

Cada elementos en un documento HTML tienen atributos; estos son unos valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

Anidamiento

Cuandoi vemos un elemento entro de otro elemento en HTML, ese elemento dentro se le llama elemento anidado, hay les va un ejemplo:

Links

Referencia de Atributos HTML
Referencia de Elementos HTML
Conceptos básicos de HTML

Me habría gustado tener este curso cuando empecé con javascript. Esta excelente como curso introductorio

Otra forma sencilla de obtener la estructura de html es escribiendo nada más el signo de ! en vez de html:5

Básicamente, me quedó claro.

Como siempre, el gran Manz nos deja una tabla periódica de HTML5.
 
Tabla periódica de HTML5
 
Y su página de html
 
https://lenguajehtml.com/html/
 
Un saludo y gracias.

OSEAAAAAAAA!!! 2 HORAS PERDIDAS, comencemos con que… ¿donde dice que tenemos que ver el curso de prework?.. AHORA! ¿donde dice que tenemos que saber que la configuracion de la profe esta en ingles y en mi caso, la tengo en español… comenzando por ahi, ya estamos mal porque LOGICAMENTE, Desktop = Escritorio… pero los que NUNCA hemos utilizado la terminal de codigo en Vs, no sabemos absolutamente NADA! al punto de que nada mas con escribir la palabra Deskop en nuestra termina configurada en español JAMAAAS la vamos a conseguir… … …

Chicos es importante que vean el curso de Terminal y Linea de Comandos https://platzi.com/cursos/terminal/ el curso de Prework, y el de codestream https://platzi.com/cursos/desarrollo-moderno-codestream/ NO se salten la ruta porque eso solo los enreda mas cuando tienen que usar terminal o vscode…

Espero les ayude este resumen de HTML5

Para saber mas acerca de los comandos en vs-code

take es para crear carpetas dentro de mac, para linux es mkdir igual para windows seguido del nombre de tu carpeta!!

Hola comunidad, cuando estas creando una lista, dentro lleva los <li> para que no tengas que digitar uno por uno podes escribir li*(aqui el numero de li que quieres), ejemplo si quiero 3 li dentro de la lista escribo li*3 y me generara automaticamente.

Para mí una de las cosas mas importantes es aprender los términos para nombrar todo lo que hacemos en HTML y CSS, así a la hora de leer documentación todo es mucho más claro 😋

Como dato curioso, si desean hacer un touch desde la consola y ya tomaron el curso para manejar el windows subsystem for linux, pueden hacer un touch así:

wsl touch index.html

Hola devs, para los que venimos del Curso de Prework. Realizar lo siguiente:

1.- Abrir Windows Terminal
2.- Crear la carpeta con el comando mkdir o sudo mkdir folder && cd folder (esto hace lo mismo que el comando take)
3.- Crear el archivo con el comando touch
4.- Cargar VS digitando en el terminal: code .
5.- Activar el la extensión Live Server en VS (para que al guardar las modificaciones en VS se reflejen automaticamente en el navegador y no habría la necesidad de resfrescarlo)

Recuerda usar sudo

Nota: Si los cambios no se guardan y te sale error de permisos. En el terminal escribe: sudo chown -R user ~/folder ==> Esto le dará permisos de escritura a tu carpeta de proyecto.

Por otro lado:
Para utilizar el comando take, debes instalar zhs en ubuntu, dejo el link donde explica como:

Comentario: Si deseas personalizar el shell puedes instalar el complemento on-my-zsh

https://noviello.it/es/como-instalar-zsh-en-ubuntu-20-04-lts/

Se puede manejar la terminal de comando de visual studio code o la terminal de WSL.

Este tema me parecio muy bonito y queria compartirlo por si alguien tambièn busca un tema

Tambièn esta este que tambièn es muy bonito

Existen atributos compuestos y vacios :
Los compuestos llevan el nombre y valor del atributo, los vacios llevan solo el nombre del atributo.
un ejemplo de atributo vacio sería:

<video controls></video>

un ejemplo de atributo compuesto con la misma etiqueta anterior sería:

<video src="..." controls></video>

en las comillas va el valor del atributo y en una misma etiqueta puede llevar tanto atributos compuestos como vacios.

Los docmentos HTML poseen etiquetas! y la gran mayoria de estas se cumple la siguiente estrucctura para el elemento

1. Etiqueta de apertura
2. Contenido
3. Etiqueta de cierre*

<h1>Contenido</h1>

*Hay etiquetas que son auto-closing, es decir no tienen explicitamente la parte de cierre, un ejemplo son las <img />

Hola,
no sé si alguien ya lo solucionó para Windows crear la carpeta y abrirla, yo ocupe

mkdir frontend-developer

y después para abrir en el VS Code

code .

Todo en la misma terminal

Saludos compañeros, Para crear la carpeta en windows, Yo utilice:

<mkdir <<nombre de la carpeta que se desea crear>>

Luego para acceder a la carpeta se puede usar:

cd <<nombre de la carpeta creada>>

Saludos😊.

Encontré una solución con Windows, desde la terminal de VSCode al crear un directorio es con:
mkdir Frontend-Developer

Ir al directorio creado
cd Frontend-Developer

Crear el index con
type nul > index.html

pwd

ls

Hola Platzinautas. 💚👩‍🚀👨‍🚀

Quizás muchos lo conozcan pero…

🤓 Emmet es un conjunto de complementos para editores de texto que permiten la codificación y edición de alta velocidad

📌 cheat-sheet de EMMET

    section>h1+p+ul>li*2

Con este conjunto de etiquetas creamos la estructura inicial que hizo la profesora, traten de aprender un poco y les facilitar mucho el camino a largo plazo.

No se olviden de instalar todas las extenciones en VS code, Nombre: Color Highlight
ID: naumovs.color-highlight
Descripción: Highlight web colors in your editor
Versión: 2.5.0
Editor: Sergii Naumov
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Nombre: IntelliSense for CSS class names in HTML
ID: Zignd.html-css-class-completion
Descripción: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
Versión: 1.20.0
Editor: Zignd
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Nombre: Live Server
ID: ritwickdey.LiveServer
Descripción: Launch a development local Server with live reload feature for static & dynamic pages
Versión: 5.7.5
Editor: Ritwick Dey
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Nombre: Path Intellisense
ID: christian-kohler.path-intellisense
Descripción: Visual Studio Code plugin that autocompletes filenames
Versión: 2.8.0
Editor: Christian Kohler
Vínculo de VS Marketplace: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

También con solo escribir el signo ! en Visual Studio Code y presionar alt, esto de igual manera generar una plantilla o boilerplate, como también se le llama, para comenzar con tus proyectos de HTML

estoy de acuerdo con la comunidad, Tambien deberia dar los comandos para windows!

En visual studio code con sólo escribir ! y presionar tab también escribe el encabezado HTML 5

Uso mac y para la creación de la carpeta desde la terminal con el comando take no me funciono, me decia: zsh: command not found: take

Así que use mkdir para crear la carpeta y listo

Buen video, sin embargo no me agrada la idea que iniciar un curso con comandos en la consola. Debemos recordar que se esta tratando con usuarios principiantes.

Es importante recordar:

Las etiquetas dentro de HTML no reconocen mayusculas o minusculas, por ende, no importa como escribas las etiqueta igual se entendera:

Es recomendable escribirlas en minusculas para una mayor coherencia y entendimiento

Para el anidamiento pueden utilizar los atajos de EMMET que ya están por defecto en VSCODE quedaría así:

section>h1>p>ul>li*3 

// Es para que el navegador sepa que este archivo es un html
<! DOCTYPE html>  

//*Es para que el navegador sepa el idioma de la pagina//
<html lang = "es" > 

// Es la cabecera en ella va los links externo o interno como el link para incluir CSS, los meta 
<head>

//Esta etiqueta sirve para poder usar tildes y caracteres en html
<meta charset = "UTF-8" />

//Es el titulo que sale en la pestaña del navegador
<title> Titulo de la pagina </title

//Es la forma de vincular un archivo css a nuestro html
<link rel = "stylesheet" href="style.css" >
// Es donde ponemos el contenido de la pagina
<body>
//Encabeado 
<header>
//Etiqueta para el menu
<nav>
//Para el Pie de Pagina
<footer>

<!Doctype html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title> Proyecto 1 </title>
<link rel ="stylesheet" href="./css/estilos.css">
</head>
<body>
<header> Encabezado
<nav> Menu </nav>
</header>
<main> Contenido principal
<section> Seccion de una pagina
<article>
<ol>  //lista ordernada 
<li> Marge </li>
<li> Bart</li> 
<li> Lisa </li>
</ol>
</article>
</article>
</section>
</main>
<footer> @ByPlatzi 2021 </footer>
</body>
</html>

para escribir codigo mas rapido, por ejemplo si necesitamos escribir una lista con 4 li adentro podriamos hacerlo de la siguiente manera: ul>li*4 de esta manera se escribira un ul con 4 li dentro de ella esto ya lo tiene instalado visual studio desconozco si se puede instalar en el resto de editores

Visual Studio Code es uno de los editores mas usados en el mundo!
Para un desarrollo mas agil, con la secuencia ctrl+k ctrl+s van a los atajos de teclado (keyboard shortcuts) de VSCode, que por cierto… son personalizables!
Pueden ir a los atajos manualmente en el icono del engranaje en la esquina inferior izquierda si lo desean.

Reto pero con atom

Para escribir HTML se requiere de una etiqueta de apertura <etiqueta> y una etiqueta de cierra </etiqueta>, y en medio de estas vamos a poner lo que nosotros requerimos.
Además, a las etiquetas podemos adicionarles atributos ejemplo:
<etiqueta atributo=”valor”>contenido</etiqueta>
El anidamiento permite almacenar etiquetas dentro de una etiqueta, con el fin de darle estructura a nuestro elemento.
Elementos vacíos, no todas las etiquetas tiene apertura y cierre, como lo puede ser una etiqueta <img src=”rutaimagen.jpg”>

Es mucho mas facil escribir codigo HTML con la extencion EMMET, hace nuestra vida como desarrolladores muy facil

h1{Platzi}+p{Tiene una comunidad}+ul>li{Maravillosa}+li{Increible}

Si utilizan la terminal, para abrir vscode en la carpeta donde se encuentren, utilizan el comando;

code .

Con eso les abrirá VSCode y les mostrara los archivos que se encuentren en esa carpeta.

Saludos.

esta también puede ser una forma mas fácil y mas rápido para crear un archivo en nuestro visual estudio

como pueden ver en la imagen lo que hacemos es crear una nueva carpeta y abrir nuestro visual estudio y solo arrastramos nuestro archivo nuevo a nuestra ventana de visual estudio

y con eso ya creamos nuestro archivo en nuestro visual estudio

html, un ejemplo (curso.html)
espero que le guste este aporte ,excelente curso profe Estefany Aguilar

Para abrir la terminal en Windows es CTRL + J

44 etiquetas HTML que debes conocer

Básicamente, básicamente, me encanta la muletilla!!
El amarillo de fondo de la pantalla me produce hambre :p

take: Crear y posocionarse en una carpeta
touch :Crear un archivo nuevo
ls:listar carpetas existentes

Acabo de aprender un comando nuevo para mi uso diario.

take: Permite crear una carpeta, y posicionarnos en ella. Cool.

Pueden instalar Live Server en visual studio es un plugin que permite solo guardar y ver el contenido actualizado en el navegador

Poniendo en práctica el reto:

Excelente explicación!!

lamentablemente los comandos que muestras son para mac, los usuarios de windows no son aplicables, podrias igual colocar qué comando sirve en windows y linux para lo mismo, gracias igual.

SOLUCION
para los que le crea la carpeta con el comando **“touch” **es porque ese comando no es reconocido en windows, solo en mac y en linux. en windows se usa el comando "echo"
Lo mismo pasa con “take”, en su defecto en windows podes hacer un “mkdir” y con cd te posicionas en la carpeta que creaste. 😃

Revisar cómo hacer funcionar el comando "take" con zsh

Mis apuntes en Notion💚

<h1 class="title">Platzi <3</h1>

Reto Platzi

Clase 4 - Anatomía de un documento HTML y sus elementos

¿Cuál es la sintaxis de una etiqueta o elemento de HTML?

<h1>Platzi</h1>

• Este es el elemento u etiqueta <h1>, el cual consta de tres partes:
  • Etiqueta de apertura = <h1>
  • Contenido = Platzi (En este espacio escribiremos lo que necesitemos que agrupe la etiqueta).
  • Etiqueta de cierre = </h1>
• También podemos agregar atributos a los elementos HTML:

<h1 class="title">Platzi</h1>

• Cómo vemos los atributos siempre deben ir dentro de la etiqueta de apertura, su sintaxis es bastante simple, lo único que debemos hacer es escribir el nombre del atributo que necesitamos, seguido de ello debemos escribir el signo de igual (=) para poder asignarle un valor al atributo. Este valor debe ir encerrado entre comillas dobles.

¿Para qué nos sirven los atributos?

• Los atributos nos ayudan a agregar ciertas características a los elementos HTML.

¿Podemos usar todos los atributos en todos los elementos HTML?

• Debemos de tener en cuenta que todos los atributos no se los podemos poner a todos los elementos HTML y también hay atributos que son únicos para ciertos elementos HTML.

¿Qué es el anidamiento?

• Consiste en envolver varios elementos HTML en otros elementos HTML.

¿Qué son los elementos HTML vacíos?

• Son elementos HTML los cuales no poseen una etiqueta de cierre ni contenido. Lo único que poseen es su etiqueta de apertura y atributos:

<img src="cat.jpg" alt="cat">

¿Cuál es la estructura básica de un documento HTML?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

¿Para qué nos sirve el elemento <!DOCTYPE html>?

• Este nos permite indicarle al navegador la versión de HTML en la que estará escrito el documento.

¿Para qué nos sirve el elemento y su atributo <html lang=“en”>?

• El elemento <html> es nuestro elemento padre y será el que contenga todo nuestro código HTML. Su atributo lang nos permite indicar el idioma en el que está escrita la página web (inglés, español, etc.).

¿Qué podemos agregar en el elemento <head>?

• Favicon (icono que aparece en las pestañas de los navegadores).
• Título (Texto que aparece en las pestañas de los navegadores).
• Links/enlaces.

¿Qué se escribe dentro del elemento <body>?

• Todo el contenido y estructura de la página web.

¿Cómo podemos usar el template de la estructura básica de un archivo HTML en VSC?

• Escribiendo html:5 y damos tab o enter.
• Escribiendo el símbolo de exclamación de apertura (!) y dando tab o enter.

Mi practica

para crear varias etiquetas <li>
puedes escribir <li>* numero que necesitas duplicar. y listo

<!-- Un sandwichito en HTML -->

<plato>
<pan tipo=“baguette”>
<sal>
<pimienta>
<mayonesa />
<ketchup />
<tomate />
<queso />
<jamón />
</pimienta>
</sal>
</pan>
</plato>

<!-- ¡Bon appétit! -->

escribiendo ! en VS ya diseña una estructua html

<h1> Gracias profesora Aguilar </h1>
<p> me ha servido mucho esta clase </p>

Hola!
En Visual Studio Code hay una extensión llamada Live Server, ésto nos permite tener la página abierta en Google Chrome o nuestro navegador por defecto. Cuando guardamos el código, automáticamente se refresca en el navegador con los cambios. Ésto evita tener que refrescar la página cada vez que hacemos cambios.

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Realmente es muy util el poder acelerar los videos para asi ver todo de una 😃

La forma en que explica Estefany es muy amena para aprender

Usen la extension de VC que se llama live server, me lo agradecerán despues jaja.

Excelente, clase.

alguien sabe xq me sale ese simbolo de exclamacion en el live serve lo tengo instalado en obuntu tambien le sale a path intellegen

Para los que están repasando esta clase por la pregunta de, ejemplo de elementos vacios, la pregunta se refiere a ejemplo de una etiqueta que no necesita cierre. Me confundió un poco por qué se dice que está vacio pero bueno

Para los que queráis utilizar el maravilloso comando take en Ubuntu tenéis que instalar primero el shel ZSH y después su framework Oh My ZSH.

Os dejo un enlace de como lo realicé hace un rato 😉

https://pc-solucion.es/2022/06/29/instalar-el-shell-zsh-y-el-framework-oh-my-zsh/

No es necesario saber la estructura principal del html.

Recomiendo página para apoyarte en HTML, CSS y JavaScript de forma lúdica e interactiva.

https://htmlcheatsheet.com/

Hola Platzinautas. 💚👩‍🚀👨‍🚀

Aprendí este comando hace unos días y no lo vi en los comentarios entonces lo quiero compartir.

touch index.{html,js,css}

Con este comando la terminal nos va a crear tres archivos, uno con extensión .html, otro con **.js **y otro con .css

<ol> Elemento de lista ordenada
El <ol> crea una lista de elementos en orden secuencial. Cada elemento de la lista aparece numerado de forma predeterminada.
.

<ol>
<li>Prende el horno</li>
<li>Pon las galletitas</li>
<li>Espera 25 min ⏰</li>
</ol>

.
<ul> Elemento de lista desordenada
El <ul> se utiliza para crear una lista de elementos sin ningún orden en particular. Cada elemento de la lista individual tendrá una viñeta de forma predeterminada.
.

<ul>
<li>Escribe mucho código</li>
<li>Nunca pares de aprender 📚</li>
</ul>

SOLUCION

Si al intentar colocar la ruta en el navegador te aparece eso, entonces realiza lo siguiente:

En el explorador del lado izquierdo del VisualCode, encuentras las carpetas que has creado, abre en la que estas trabajando, das click derecho en Index.html luego en “reveal in explorer”

Se te abrira un explorador en la ruta del archivo

Copias la dirección del archivo y luego la pegas en tu navegador

Y LISTO

SOLUCIÓN

Si el comando take te arroja error. Sigue estos pasos. Dirígete a tu Visual Studio Code. Abres una terminal nueva.

Luego entre las opciones de la terminal, oprimes el señalado en la imagen

Seleccionas ZSH (shell Z)

Se te abrirá una nueva terminal pero ahora con ZSH (la cual posee mas integraciones de comandos)

Y LISTO el comando take ya te lo reconoce!