Anatomía de un documento HTML y sus elementos

4/23
Recursos

Aportes 163

Preguntas 61

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¡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💔💥!

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 🤩😂.

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

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

A partir de ahora vamos a comenzar a trabajar con nuestro editor de código, actualmente hay muchísimas opciones pero uno muy famoso es:

Visual Studio Code (También es el que usa la profesora)

y ya que estamos en VSC Sabias que Platzi tiene su propio tema?

Lo puedes descargar directamente en extensiones de VSC o haciendo clic aquí

Por ultimo si estas en Windows y quieres tener una consola mucho mas bonita que la que tienes por defecto te recomiendo Cmder

Lo puedes descargar aquí

Ahora ya eres todo un Hacker!

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

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>

No debiera centrar su clase solo en comandos para trabajar en Mac, los otros profesores han explicado el uso de los comandos para ambos, linux y mac, y hace las aclaraciones, para un principiante es romperle la cabeza buscando la información, lo retrasa y se vuelve aburrido, sino debiera ser curso para frontend en mac, y curso para frontend en linux

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

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”

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

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/

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

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.

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

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

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í

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.

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

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

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

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

Para abrir la terminal en Windows es CTRL + J

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

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.

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.

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.

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


no entendí esta parte. cómo abre ese archivo

¿Alguien más le sorprendió el comando take?
Fue tipo ¿cómo pude vivir sin él en linux? 😄

atajos de html en vs code:

1- signo ! : solo con escribir el signo ! y presionar la tecla Tab ↹ se autocompleta la estructura basica de html 5, osea, se autocompleta el siguiente codigo:

2- iniciales de una etiqueta: solo con escribir la primera inicial o las 2 primeras iniciales de una etiqueta y presionar la tecla Tab ↹ se autocompleta la etiqueta de apertura y de cierre.
por ejemplo, si se escribe bu y se presiona Tab ↹ entonces, se autocompleta <button></button> que es una etiqueta para crear botones.

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

Que hermosa que es la clase con su voz!

Para los qu no le funcione el comando **take **y usen WSL2, pueen configurar su consola con este tutorial:

https://platzi.com/tutoriales/1748-terminal/8505-configurando-wsl2-windows-terminal-y-oh-my-zsh/

live server, ext de VSC súper útil y el pan nuestro de cada día del developer.

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

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

Considero que hay que profundizar un poco más en lo que significa HTML y CSS. En esta clase sería importante decir los comandos usados para Mac, Linux y Windows porque no todos utilizamos Mac. Debería haber empezado con el paso a paso ordenado sobre como llegar a la terminal y decir este comando lo uso para “X o Y” cosa y seguir.

Por alguna extraña razon no me funciono el comando

<Take> 

en cambio me funciono un comando que aprendí en el Curso de Git y GitHub que es el comando

<mkdir> 

Para no crear confusión el comando take no existe por defecto en Gnu/Linux. Si en la terminal escriben la siguiente función:

platzi() { mkdir -p "[email protected]" && cd "[email protected]"; }
platzi Micarpeta

Es el mismo resultado, es la ejecución del comando mkdir Micarpeta y luego cd Micarpeta

Si desean tener la terminal como tiene teff:

# Instalan un nuevo shell llamado zshque 
sudo apt install zsh
# reemplaza a bash por zsh, un shell más completo
chsh -s /usr/bin/zsh
# Instala un librería que instala entre otras cosas "take"
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

Haganlo sobre una máquina virtualizada como VIrtualbox por las dudas aunque en caso de que se equivoquen no van a estropear el sistema, Más detalle en el framwork OH MY ZSH

De acuerdo con MDN Web Docs (la biblia del HTML): “Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios”

**Podemos ver todos los atributos HTML explicados eficientemente en la siguiente tabla: **https://developer.mozilla.org/es/docs/Web/HTML/Attributes

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…




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

La profe dice basicamente cada dos palabras 😕

Aprendí el comando take. No conocía ese comando tan genial.

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.

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}

Anatomía de una etiqueta HTML

// 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>
Creeria que este curso deberia ir mucho antes al menos en la ruta de desarrollo web (incluso antes que el definitivo de html y css) ya que se hablan de conceptos básicos que si no dejan de ser indispensables pero creo que seria mejor entenderlos desde un inicio, por lo que este curso deberia ser de los primeros :)

Vine a aprender de frontend y terminé encontrando el mejor comando de la vida!!, Un usando

mkdir carpeta
cd carpeta

Para crear y entrar a carpetas… Ahora lo haré todo con

take carpeta

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

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

Los que usan Windows pueden crear una carpeta y abrirla por medio del VSC o pueden crear una carpeta y arrastrarla al VSC

Espero les ayude este resumen de HTML5

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 😋

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 

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.

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

Los “Elementos vacios” son llamados “Self-Closing Tag”.

Anatomía de un documento HTML y sus elementos 😄

Elemento

<h1> Platzi </h1>

Etiqueta de apertura

Contenido

Etiqueta de cierre

Atributos

Van siempre en la etiqueta de apertura

<h1 class = ‘title’>

atributo = valor

Anidamiento

Estructurando etiquetas dependiendo de las etiquetas y el orden donde se van implementando

<section>

<h1> Platzi</h1>

<p> Tiene una comunidad</p>

<ul>
	<li> Increible</li>
	<li> Maravillosa </li>
	<li> Inigualable </li>
</ul>

</section>

Elementos vacíos

No todas las etiquetas tienen apertura y cierre

Estructura de html basica

<!Doctype > identifica que trabajaremos con html 5

<head> enlaces - titulo - css - responsive

<body> </body> aqui colocaremos toda nuestra estructura html que compondrá nuestra pagina

wow no conocía el comando take ! me parece super funcional 🧐

Yo se que esto quizás fue mucha información de golpe, pero tranquilo o tranquila, siempre puedes volver a ver el video y tomar tus propios apuntes.
.
Ahora aquí te dejo algunos consejos y aclaraciones:
.
HTML NO ES UN LENGUAJE DE PROGRAMACION
Si bien HTML es Hyper Text Markup LANGUAGE (por sus siglas en ingles). Esto es un lenguaje de marcado de Hipertexto, únicamente nos ayuda a generar la estructura de nuestra pagina web. Si quieres ver esto con otro ejemplo imagina que vas a construir una casa y tu HTML serian tus estructuras de varillas.
.
HTML TIENE MUCHAS ETIQUETAS
Las etiquetas son bastante extensas pero siempre puedes consultar mas información sobre las etiquetas aquí.
.
W3School ademas de que podrás probar tus códigos directamente

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!

La estructura básica que todo aprendiz de programación debe aprender a dominar.

¡¡A darle con todo!! Maravilloso.

¡¡Magnífico!!

Comando take para crear una carpeta y entrar directamente a la carpeta creada (mejor que mkdir).

En la actualidad la mayoria de editores de texto y principalmente los ide’s, permiten crear la plantilla básica o las etiquetas que toda pagina web debe tener. A lo que se le llama estructura básica de html.

en VC la forma mas rapida de crear la estuctura HTML5 es escribiendo: ! y de ahi dando tab, y wala!

Si quieres los comandos que la profesora está usando en su terminal como TAKE o los colorcitos hermosos descargate oh-my-zsh

También la puedes descargar en windows si es que tienes una terminal con Windows Subsystem for Linux yo lo bajé por que amo los colorcitos.

Descargar Oh-my-zsh

Aquí, con ganas de volverme FullStack 😄

Apuntes de la clase:
Elemento HTML

  • Para escribir HTML debemos aprender la sintaxis de un elemento HTML.
  • Los elementos tienen una etiqueta de apertura y una de cierre (pico paréntesis).
  • Entre las etiquetas tendremos el contenido de nuestro elemento.

Atributos

  • A los elementos podemos agregar atributos.
  • Los atributos nos van a permitir realizar diferentes acciones.
  • Los atributos disponibles dependerán de las etiquetas.

Anidamiento

  • El anidamiento significa que podemos tener un elemento como contenido de otro.

Elementos vacíos

  • No todo elemento tiene etiqueta de apertura y cierra, como las imágenes.
  • Estos elementos son conocidos como elementos vacíos, pues no tienen contenido.
  • El atributo alt nos muestra su valor asignado en caso la imagen no cargue

Anatomía de un documento HTML

  • El doctype indica que versión de HTML usaremos.
  • La etiqueta html cuyo contenido será nuestro código. Ahí se suele colocar el atributo Lang para indicar el lenguaje de nuestra página.
  • La etiqueta head, tendra por contenido:
    • Etiqueta favicon, donde se define la imagen en la pestaña
    • La etiqueta title donde se define el texto en la pestaña
  • En la etiqueta body ira la parte visible de nuestro código: textos, imágenes, etc.

Para hacerlo 100% mediante la terminal, en vez de abrir el archivo usando el menú del editor, se podría poner code <nombre del archivo> en la consola

Notas 📒

✏️ Anatomía de una etiqueta HMTL

Cada etiqueta HTML tiene:

  • Etiquetas de apertura y de cierre: <></> (algunas etiquetas no requieren etiqueta de cierre )
  • Contenido: puede ser texto o otras etiquetas
  • Atributos: class = "titulo"

✏️ Anidamiento de etiquetas

Es simplemente cuando una etiqueta tiene como contenido una o más etiquetas.

✏️ Anatomía de un documento HMTL

  • Doctype: Indica que es un documento HTML y la versión que se ocupara
  • html: es la etiqueta raíz y posee un atributo llamado lang para especificar el idioma del contenido del documento (español, Inglés, etc.).
  • head: se especifican varias características del documento html como un icono, su titulo, la codificación (UTF-8 comúnmente).
  • Body: adentro de esta etiqueta van todas las etiquetas que estructuran y crean nuestra página web.

Hola amada comunidad, se que esto muchos los conocen pero no esta de mas decir que si pones el signo de admiracion en vscode, este tambien con emmet te genera la estructura basica del HTML.

Hola, muy buena clase, muy claro el curso hasta ahora y muy didáctico. Sólo como consejo, la profe tiene una muletilla y es “básicamente”, pero por lo demás muy bien, felicitaciones!

No conocia el comando take !! super me gusto muchi

Su Visual es todo de su estilo, jaja, la amo. ❤️

.

Mi html fue
Ricardo tiene ganas de
.Dormir
.Comer
.Ver una pelicula

Para los que desean usar el comando take, les dejo la guía para instalar zhs en Windows:

Lo que me estresa es que no me funcionan los comandos, entonces uno queda como en una escalera rota sin poder subir y avanzar. No puedo usar el take

Genial todos tus aportes, es tan fácil de comprender 😃

¡Awww, es la profe más sweet y a la vez precisa para explicar!
Se entiende todo muy bien (hasta ahora jeje) :’)

Etiquetas de apertura y cierre