Hola a todos Yo soy dalto y les doy la bienvenida al mejor curso de html y css que van a encontrar en YouTube el

objetivo de este curso es que aprendas desde cero las dos tecnologías más importantes del mundo del desarrollo web

e incluso del mundo de la programación estoy hablando de html y css durante el curso vamos a ver la estructura de una

web etiquetas para listas enlaces multimedia formularios menús vamos a ver de semántica accesibilidad vamos a ver

todos los selectores SS todas las propiedades todos los valores todo el box model grid subgrid flexbox

animaciones herencias pseudoclases metodología Ben positions m Vamos a aprender responsive design como va First

ido Cómo subir tu página web internet y 423 523 proyectos que haremos a lo largo de todo el curso eso Y muchísimas cosas

más No pero esto es chino básico te juro que no entiendo nada tranquilo no te preocupes ese es mi trabajo Estás viendo

el canal de programación y desarrollo más grande de Argentina y posiblemente de todo lo hispana anteriormente ya hice

cursos de html y css los primeros para allá en el 2018 y otros por ahí en el 2019 2020 que por cierto fueron los

cursos más vistos de html y css de toda B hispana y el de cs es el más visto del mundo a la [ __ ] y aún así en todos

estos años aprendido lo suficiente para afirmar que sin dudas este va a ser el mejor curso de todo internet y lo mejor

es que sí es gratis se contactaron conmigo de un montón de empresas Para pedirme que haga un curso como este y de

paga y obviamente dije que no yo no hago cursos de paga jamás hice un curso de paga y jamás lo voy a hacer y tampoco te

voy a vender ningún curso avanzado ni nada después no muchos creadores dan cursos más cortos o minise secciones

para después llevarte un curso avanzado de paga entonces nunca sabes cuándo estás viendo un curso que se queda a la

mitad o no te enseñan todo porque tien un curso más avanzado este no es el caso todo lo que necesitas saber está en este

video este curso de html css es completo Mi objetivo es que salgas de acá con todos los conocimientos necesarios para

aplicar todo el contenido del curso a tu vida profesional Te voy a enseñar de una forma en la que lo vas a poder entender

incluso aunque no hayas tocado una línea de código en tu vida y tampoco importa si queres ganar 1000 2000 10,000 o

20,000 por mes este curso te viene increíble para empezar bien De hecho durante todo el curso vamos a hacer eso

proyectos que van a ser que ustedes adquieran todas las habilidades para salir con todos los conocimientos

necesarios para aplicarlos profesionalmente este curso tiene aproximadamente 95 horas de video

grabadas de las cuales después de horas y horas de editar pude convertir en 24 horas tn pulidas y super bien editadas y

con lo más importante sí 4 meses de trabajo así que créanme cuando les digo que el curso es completo de verdad A

pesar de ser educativo es muy didáctico y entretenido y te lo digo yo que a pesar de haberlo creado ya me lo vi dos

veces Mi nombre es Lucas dalto soy desarrollador hace más de un lustro o sea más de 5 años y te doy la bienvenida

al mejor curso de html y ccs de todo internet estás listo sí Obvio obvio que sí esa es la actitud

[Música] Comencemos las explicaciones que verás durante todo del curso son explicaciones

que fueron previamente ladas y probadas en grupos más pequeños para probar su efectividad Ah y suscríbite es

gratis bueno para comenzar quiero decirles que hay un dato que nos muestra cómo las personas que se adentran en

cursos de html y css suelen terminar los cursos okay sin entender mucho Cómo aplicar eso a la vida real es decir no

entienden mucho la base los trasfondos cuando aparece una nueva tecnología tampoco la terminan de entender bien y

cuando tienen que hacer una modificación en un código o construir los suyos propios tampoco terminan de comprender

los cimientos incluso tienen problemas por ejemplo errores en el código y demás y tampoco saben cómo solucionarlos

porque realmente no entienden lo que están haciendo solamente están escribiendo un código que saben que es

lo que hace ese código Pero no entienden cómo funciona realmente Entonces cuando surjan problemas o cosas no lo pueden

hacer entonces para eso que fue De hecho mi más grande error en el curso de html y css pasado lo que voy a hacer es

darles una pequeña introducción de Cómo funciona la web y después de cómo funciona html y css parece aburrido pero

créanme que no es super interesante y si entienden esto van a ver que todo el resto del curs uso les va a ser

completamente fácil okay es una sección cortita Pero con esto ya basta para que cuando arranquen a ver código ustedes

digan Ah o sea que esto hace esto Ah o sea que esta otra cosa hace esto otro Ah o sea que hacem entonces va a ser

muchísimo fácil porque no van a parar de decir ah saben por qué porque van a estar entendiendo lo que hacen y no hay

nada más hermoso que entender lo que uno hace y para eso yo no puedo arrancar a escribir código directo como dice los

anteriores cursos o como hace todo el mundo para eso tengo que explicarles qué es lo que están haciendo Qué problemas

solucionan y Por qué están haciendo lo que están haciendo okay Así que créanme que esta sección cortitas estas dos que

vamos a hacer de entendiendo la web entendiendo html y css va a ser más que suficiente para que durante todo el

curso no tengan ni una sola duda Y si la tienen se la puedan responder ustedes mismos porque va a ser muy intuitivo y

van a desarrollar su capacidad lógica que es muy importante en el mundo del desarrollo y la programación que ustedes

tengan la capacidad de desarrollar su lógica y ya con estas dos secciones lo van a poder hacer así que arranquemos

para comenzar Imagínate que abrí un archivo de video Okay un video cualquiera lo que va a suceder es que

Windows va a detectar que estás intentando abrir un archivo de video y va a abrír Telo con un reproductor de

video El que tenés predeterminado y lo vas a poder reproducir en tu computadora es decir doble clic a un video se abre

se reproduce en tu computadora pero volvamos sobre esta frase solo en tu computadora La pregunta es qué pasaría

si ahora yo quisiera que mi video lo pueda ver todo el mundo bueno Esta es la misma pregunta que se hicieron las

personas que desarrollaron la web querían compartir información para que lo que nosotros tenemos en nuestra

computadora no solo la podemos ver nosotros sino que también puede verse desde cualquier lugar del mundo y sí

nació la idea de la www o la World wide web hoy en día para que tu video sea accesible desde cualquier parte del

mundo tendríamos que configurar la computadora en la que tenemos el video para enviar datos a otras computadoras a

través de internet una vez que lo hicimos vamos a obtener un enlace ese enlace es la forma en la que todo el

mundo puede encontrar mi video es una especie de llave ya que al utilizar ese enlace en un navegador podemos Acceder

al contenido asociado a ese enlace que en este caso es el video bueno así es exactamente có funciona en realidad una

página web es como si tuviéramos un hotel en cada habitación tenés cosas diferentes en una habitación Tenés una

imagen en otra Tenés una página en otra habitación tenés un video pero si querés saber dónde está cada cosa tenés que

fijarte Cuál es el número de la habitación para que cuando quieras ver lo que tiene esa habitación puedas

encontrarla y entrar ese número sería nuestro enlace nuestra forma de acceder al contenido así como necesitas el

número correcto de habitación para poder encontrarla en la web necesitas la URL correcta para poder ver lo que tiene el

servidor que te dio esa URL básicamente si nosotros queremos que algo que está en nuestra computadora sea accesible

para todo el el mundo tenemos que cargarlo a un servidor Y darles una forma a todo el mundo de que si lo busca

en La Barrita de navegación puedan entrar Bueno esa forma se llama enlace es la url okay Y es la forma en la que

cuando nosotros escribimos por ejemplo facebook.com eso va a las computadoras que tiene Facebook que están programadas

para estar conectadas a internet y de que todo el mundo las pueda acceder nos den la página web Entonces ustedes ahora

mismo van y buscan instagram.com mosquitos de [ __ ] hijos de mil cansado me tienen cuando ustedes por ejemplo van

a instagram.com si lo hacen desde una página web lo que hace es que eso entra en realidad no son computadoras son

servidores Pero bueno vamos a hacer de cuenta que son computadoras que es casi lo mismo son servidores que lo que hacen

esos servidores detectan que alguien más quiere entrar y les devuelve el contenido dice ey Esto es lo que yo

tengo alojado Okay esta es mi computadora Esta es mi computadora guardo un video acá si quiero que todo

el mundo acceda a ese video configuro Este esta computador cita para que todo el mundo la pueda acceder me dan un

enlace ese enlace lo agarro y se lo doy a todo el mundo Entonces cuando alguien quiere Ver mi video Solo pone el enlace

y ya puede ver mi video porque el enlace lo que hace es pedirle a mi computador it que les muestre el video Eso es todo

ahora acá es donde aparece el rol de los navegadores Google mochila eh Explorer Bueno ya en el pasado quedó Amén que en

paz descanse opera eh brave todos los navegadores porque la forma en la que nuestra computadora se conecta a un

servidor como bien dijimos es pidiéndole por favorcito que le pase lo que tiene adentro Es decir desde mi computadora

Okay yo lo que hago es acceder a un enlace por ejemplo y ahí la otra computadora va a saber que yo estoy

intentando acceder a lo que tiene adentro y después va a saber si me lo da o no no me lo da viste después se puede

configurar como sea para darme el contenido o para no dármelo es decir nuestra computadora manda una petición

al servidor a través de la URL el servidor que aloja el archivo recibe esa solicitud y decide Qué hacer con ella en

la mayoría de los casos el servidor responde a algo Como por ejemplo el archivo que tenía alojado básicamente

ahora ustedes que se van a empezar a meter al mundo del desarrollo por eso también esto curso o para actualizar sus

conocimientos algo muy importante de lo que es la lógica de la programación o del mundo del desarrollo en general todo

funciona con solicitud respuesta solicitud respuesta solicitud respuesta todos los sistemas que existen en la

actualidad desde los más simples Hasta los más complejos todos funcionan bajo este mismo principio solicitud respuesta

solicitud respuesta cuando yo me conecto a una página web mi computadora está solicitándole al servidor que tiene

almacenada la página web que por favor me la muestre entienden Eso es todo supongamos que subimos un archivo de

texto simple para eso Bueno creamos un archivo llamado hola.txt que es un archivo muy simple es simplemente un

archivo que abrimos con el bloc de notas es un archivo de texto común y lo subimos a un servidor web ese servidor

web nos da un enlace para que el archivo hola. pueda ser accedido desde cualquier parte del mundo nosotros para acceder a

ese archivo enviamos desde nuestra computadora una solicitud para acceder lo y ahí es cuando el servidor responde

con el contenido del archivo hasta acá está todo bien porque nosotros podemos leer el contenido de ese archivo es

decir el contenido que tiene el archivo lo podemos leer porque es texto es muy simple es un texto que se puede leer de

tal forma que si nuestro servidor también tiene almacenado un video también lo podemos ver porque se abre

con un reproductor de video de tal forma que si el servidor también tiene almacenado una imagen Simplemente nos

muestra la imagen porque es una imagen es fácil se hable con un reproductor de imágenes pero si un servidor tiene una

página web que justamente eso es un servidor web no es un servidor que tiene alojado páginas web si el servidor tiene

una página web cuando me mande el contenido de la página web qué es lo que voy a ver en realidad el aspecto que

tiene una página web Okay en realidad es algo así esto es html pero verlo así lo vuelve ilegible nadie quiere leer una

página web así si lo tuviéramos que hacer sin navegadores la única forma de hacerlo es a través de protocolos de

conexión podemos por ejemplo ir a una terminal hacer un curl a la página web y ahí la página web nos va a devolver todo

el texto que tiene sin navegadores Esta es la única forma que tenemos de acceder a una página web esto mismo es lo que

nos va a mostrar un código que para la persona que no entiende es feo pero en realidad este código está hecho así a

propósito porque las páginas web no son más que esto un conjunto de códigos raros que está hecho para que un

navegador reciba este código y acá aparece la magia de los navegadores así como antes pusimos el ejemplo de que un

video lo abrimos con un reproductor de video Okay hay un archivo de Excel lo abrimos con Excel un archivo de

Photoshop lo abrimos con Photoshop eh una imagen lo abrimos con un reproductor de imágenes o un visor de imágenes es

decir cada archivo tiene que abrirse con un programa que sepa leer ese archivo Bueno una página web no es la diferencia

así como todos los archivos los abrimos como corresponde con programas que reproduzcan esos archivos o el contenido

que tienen adentro las páginas web se tienen que abrir con navegadores es decir la forma en la que nosotros

podemos abrir una página web es abriéndola a través de navegadores porque sí las páginas web también son

archivos no es nada de otro mundo es un archivo de de texto pero que tiene un código escrito pero la diferencia es que

estos archivos este código es leído por el navegador porque justamente esos códigos raros no están así porque sí O

sea no es que es un código raro porque es un código raro no son códigos hechos especialmente para que el navegador los

entienda y justamente muestre lo que el desarrollador quería Mostrar al escribir ese código esto por ejemplo le dice al

navegador que muestre un párrafo simple esto por ejemplo le dice que muestre un botón esto le dice que muestre una

imagen que se llama per png y así tenemos miles de ejemplos más entonces todos esos códigos raros que

vemos cuando básicamente corremos una página web en un servidor están hechos justamente para abrirlos con un

navegador Como por ejemplo Google Chrome porque ahí está los navegadores también están hechos para leer esos códigos Esa

es la funcionalidad principal que tiene un navegador es leer esos códigos raros e interpretarlos que son en realidad

códigos escritos en html y css principalmente tambén También tenemos javascript pero no lo vamos a ver ahora

enfoquémonos en html y css que es principalmente la parte visual más importante de hecho html y css son los

dos lenguaje sobre lo que está construido toda la parte visual de de todas las páginas web del mundo del 99.9

por podríamos decir entonces haciendo un repaso muy rápido acabamos de darnos cuenta de dos cosas muy importantes esos

códigos raros están hechos para que un navegador los entienda y un navegador está hecho para entender esos códigos

raros o sea se complementan entonces haciendo un repaso rápido abrimos nuestro navegador por ejemplo Chrome

escribimos la URL del servidor al que queremos pedirle que nos muestre lo que tiene adentro ese servidor recibe la

solicitud del navegador Y responde con todo el código del archivo el navegador recibe todo el código Y en lugar de

mostrarnos el código así no más todo raro lo interpreta lo entiende y lo transforma en lo que el código dice Y de

esa forma nosotros podemos ver la página web final todo ese es el proceso oculto que nosotros no vemos cuando entramos a

una página web porque la página web repito es solamente esos códigos r que vemos pero nosotros la podemos ver así

toda linda y usarla Y todo porque el navegador agarra ese código y lo que lo que hace es convertirlo en eso que

nosotros después podemos ver De hecho si ustedes quieren ver cuál es todo ese código raro que el navegador interpreta

por nosotros para que no veamos todos esos códigos feos y veamos la página web final pueden dar botón derecho a

cualquier página web y apretar en inspeccionar en inspect o inspeccionar elemento dependiendo de su sistema

operativo o el navegador que tengan ahí van a poder ver todo este código que parece relacionarse de alguna forma con

el contenido de la página no Bueno ese es código html y css las dos tecnologías principales detrás de toda la estructura

y la estética de la web justamente lo que vamos a aprender en este curso Vamos a aprender a hacer páginas web con html

y css que es la base de todo lo que es la web hoy en día ahora sí con esto entendido entendiendo más o menos Cómo

funcionan los navegadores que sabemos que los navegadores están hechos especialmente para leer esos códigos y

convertirlos en una página web tenemos que darnos cuenta cómo crear esos códigos Cómo escribir esos códigos o qué

hacen internamente Bueno vamos a ver un una breve Introducción a html y css y acá viene la parte de la lógica esto Era

una pequeña introducción ahora viene la parte lógica en serio Así que vamos con la siguiente

sección Bueno ahora que llegaste hasta acá es porque evidentemente algo te interesó y te puedo decir algo simple lo

que acabaste de ver antes no era muy divertido Esa era la única parte aburrida que iba a tener todo el curso

porque desde acá empieza lo relativamente interesante porque acá parece todo lo nuevo lo que posiblemente

no sabías y que va a empezar a desarrollar tu lógica Así que ahora sí Comencemos con esta sección que es

hermosa en la que vamos a ver cómo funciona html y css y para qué sirven y qué hacen cada uno y cómo actúan No qué

es lo que le dicen al navegador primero de todo Qué es html bueno html significa hypertext markup Language o lenguaje de

marcado de hipertexto vamos a desglosar un poco porque en sus siglas podemos encontrar un significado primero dice

lenguaje de marcado Okay Qué es un lenguaje de marcado bueno acá hay otro concepto lo que hace un lenguaje de

marcado Okay es agarrar texto y presentarlo de una forma diferente Es decir necesitan un programa o algo que

interprete qué es lo que están queriendo decir y mostrarlo hay lenguaje de marcado muy difíciles como por ejemplo

html y lenguajes más fáciles Como por ejemplo markdown que es el lenguaje por ejemplo sobre el que se construye

documentación para que podamos leer y entender funcionalidades de tecnologías por ejemplo de hecho markdown es

lenguaje de marcado ligero es de los más fáciles que hay el más fácil por no decir de alguna forma en markdown Por

ejemplo si escribimos un texto simple ese texto simple lo puede interpretar un procesador de markdown para mostrarlo de

una manera estructurada y conform por ejemplo en markdown si escribís texto con estos dos asteriscos el procesador

de markdown lo va a interpretar como texto en negrita entonces podríamos usarlo para Resaltar palabras o

conceptos en un texto por ejemplo si escribís el signo de la almohadilla y a continuación una palabra Como por

ejemplo texto se va a interpretar como un encabezado grande entonces lo podemos usar para títulos por ejemplo en cambio

en html Si queremos Resaltar un texto en negrita lo hacemos de esta forma Si queremos crear un encabezado grande lo

hacemos de esta otra Como ven es un poquito más complejo Este es el objetivo de los lenguajes de marcado que nosotros

podamos escribir texto y que ese texto sea interpretado por un programa que entienda qué es lo que queremos decir y

lo muestre en el formato que queremos básicamente para mostrarnos un resultado que es más lindo que es más agradable yo

pongo 30 signos y un texto y ese texto me lo hace todo hermoso bello Esa es la funcionalidad de los lenguajes de

marcado Ahora sí volviendo a html podemos decir que justamente es un lenguaje interpretado y acá aparece la

primera característica de Este lenguaje es interpretado Por qué Y porque para que pueda funcionar tiene que ser

interpretado por otro programa es decir hay algo que lee ese código que nosotros escribimos y lo convierte en el

resultado final eso es el intérprete es decir línea por línea va leyendo lo que escribimos y va convirtiéndolo en lo que

es el resultado final si nosotros abrimos un juego una imagen o un video Incluso en el blog de notas vamos a ver

que tiene todo un código super raro bueno eso es porque no está interpretado es un archivo final que está compilado y

lo que hacemos Es ejecutarlo y listo no necesita nada que lo interprete en cambio un lenguaje interpretado tiene el

código ejecutándose en tiempo real línea por línea así que bueno ya conocemos la primer característica de html es

interpretado Okay Okay ahora que entendí html más o menos no qué es lo que hace es decir Para qué sirve para Qué solemos

usar html bueno ahora sí comienza la explicación de verdad con html lo que hacemos Es armar la estructura de

nuestra página web así como suena literalmente armamos la estructura Esa es la palabra clave de hecho para html

si me dijeran que html tengo que definirlo con una sola palabra diría estructura literalmente cada elemento

Okay es o un bloque o algo que le da información extra al bloque o sea cualquiera de esas dos cosas nada más

por ejemplo un elemento html puede ser todo un bloque entero y adentro puede haber un textio un enlace una imagen son

cosas para decorar ese blo cada componente de html cada una de las cada cada uno de de esas de esos códigos que

escribimos Son elementos si ponemos una imagen tenemos un elemento ponemos un video tenemos otro elemento ponemos un

texto tenemos otro elemento cada cosa que ponemos es un elemento y cada elemento forma parte de esta estructura

por ejemplo podemos escribir un código que le diga al navegador e tiene que haber tres secciones y en una va a tener

cuatro enlaces para que puedas Navegar entre otras pá pgas es decir una sección de navegación después en la otra va a

tener un título un subtítulo y un párrafo grande y en la última sección va a tener cuatro campos de texto cuatro

párrafos y un botón es decir un formulario de contacto digamos y ahí tenemos nuestra web escribimos un código

html que el navegador lo interpretó y nos mostró un resultado final con html lo que hicimos fue estructurar

completamente cómo va a ser nuestra página Cuáles son los elementos que va a tener Y eso es todo lo que hace html se

crean elementos estos elementos se llaman tags o etiquetas porque lo que hacen es literalmente eso etiqueta el

contenido Por ejemplo si yo uso la etiqueta B Le estoy diciendo al navegador que todo lo que escriba

después de B va a ser en negrita El problema es que si yo no Cierro la etiqueta es decir si no le doy un fin

todo sería negrita es por eso que también tenemos que cerrar las etiquetas las etiquetas se cierran de la misma

forma que se abren Solo que se le debe agregar una barra entre el nombre y el primer signo de apertura de esa forma el

navegador entiende que todo lo que continúe después de esta etiqueta ya no pertenece a negrita Entonces si se fijan

literalmente estamos etiquetando un texto especial como negrita si de repente queremos hacer un título para

una sección tenemos que usar un encabezado el encabezado más grande es h1 así se llama y significa heer one

entonces con h1 abrimos etiqueta y cerramos etiqueta y todo lo que pongamos adentro va a ser interpretado como un

encabezado Esta es la funcionalidad de html literalmente definimos todos los elementos de una página es decir

etiquetamos texto y ese texto etiquetado conforma lo que conocemos como Bueno un tag o un elemento html o una etiqueta

tag es etiqueta y no no hay etiquetas para definir el tamaño del color los bordes etcétera porque esas son

características y ahora vamos a verlo bien eso cuando nosotros creamos un elemento de html ese elemento tiene

propiedades las propiedades son sus características sus cualidades un párrafo por ejemplo tiene un tamaño una

tipografía también tiene un borde o por ahí no lo tiene tiene un color un color de fondo puede tener sombras La pregunta

es todas esas propiedades Quién las Define cómo hacemos para hacerlo en html bueno normalmente las propiedades de ese

elemento son declaradas por el navegador es decir el navegador básicamente dice este elemento que está acá va a tener

todas estas propiedades y además le voy a establecer un valor para cada propiedad Entonces nosotros por ejemplo

si creamos un párrafo este se define con la etiqueta p este párrafo tiene sus propiedades el campo color no puede

quedar vacío Entonces el color del texto que le va a dar el navegador es negro el campo de tamaño Tampoco puede quedar

vacío Entonces el navegador determina un tamaño base que suele ser 16 píxeles ahora creamos un h1 que es un encabezado

el color de un h1 que normalmente Chrome pone por defecto es negro el tamaño de letra por defecto en Google Chrome para

un h1 suele ser del doble del tamaño base o sea sería el doble de 16 o sea 32 píxeles entonces para cada elemento que

creamos en html el navegador trae configurado Cuáles van a ser las propiedades de cada elemento y cuál va a

ser el valor de esa propiedad por suerte con el tiempo apareció otro lenguaje llamado css que básicamente Este

lenguaje lo que hace es decirle a todos los navegadores Cuáles son las propiedades estándar que cada elemento

html tiene que tener sirve como una guía para que todos los navegadores tengan propiedades similares y para qué

queremos esto simple Porque si nosotros tenemos 30 navegadores diferentes hace muchísimo tiempo teníamos por ejemplo a

Google Chrome teníamos al al Explorer a mochila teníamos 30,000 operadores y cada uno interpretaba las cosas como

quería Entonces por ahí uno tenía una propiedad que era sombras y otro no tenía sombras uno tenía una propiedad

que era para ver no sé eh un color de fondo y otro no tenía color de fondo Entonces ustedes escriben un código y

ese código tiene que ser diferente para cada navegador si el usuario abre con Chrome le cargamos un código si el

usuario abre con no sé con mochila le cargamos otro código y esto es inviable entonces lo que queremos nosotros es que

nosotros escribamos el código una vez y todos los navegadores lo entiendan de la misma forma para que no importa desde

dónde se abra siempre cargue el mismo contenido la página se vea igual porque nosotros todas las propiedades que

sabemos que existen las definimos eso es lo que hace css establece como un un estándar que todos los navegadores

tienen que cumplir para que nosotros lo que hagamos con ccs sea decirle Cuáles van a ser las propiedades de ese

elemento porque sí el navegador le da a los elementos las propiedades que el navegador quiere las propiedades por

defecto el navegador puede agarrar el h1 y decirle vas a tener este color este borde este texto este fondo esto esto

esto le Define todo lo que tiene pero acá aparece la magia de ccs ccs lo que hace es permitirnos a nosotros agarrar

esos elementos y modificarlos por qué Porque si todos los navegadores tienen propiedades que son todas similares lo

que podemos hacer como desarrolladores es decirle he navegador esta propiedad del modificas Ela esta propiedad del

tamaño ciasa a lo que yo te pido las sombras sácasela y le podemos decir al navegador cómo queremos nosotros que sea

cada elemento Y sí eso es lo que hace css css De hecho significa cascading Style sheets u hojas de estilo en

cascada y justamente se encarga de definir Cómo se tienen que Mostrar los elementos en una página web Entonces

html se centra en crear la estructura y crear elementos y ccs haar esos elementos que se crearon con html y les

modifica todas sus propiedades css funciona mediante reglas de estilo por ejemplo podés definir el color el tamaño

el espaciado los bordes y muchos otros aspectos de los elementos la estructura de una regla de estilo de css consta de

un selector y un bloque de declaraciones el selector hace referencia al elemento html que le querés modificar sus

propiedades y el bloque de declaraciones tiene todas las propiedades que queremos modificar y cuál va a ser el valor que

queremos que tengan por ejemplo si yo tengo varios párrafos en mi página y quiero que todos los párrafos tengan un

color azul y un tamaño de 18 píxeles voy a mi sección de css escribo un p de esa forma ya tengo seleccionados a todos los

párrafos y después lo que hago es abrir un bloque de declaraciones que se abre con llaves y adentro de ese bloque

tenemos que escribir todas las propiedades que queremos modificar y cuál va a ser el valor que queremos que

tengan esas propiedades entonces si yo quiero Modificar el color pondría color Blue ya con esto acabo de hacer una

declaración acabo de declarar que todos los párrafos van a tener un color azul Si queremos escribir otra declaración

Antes tenemos que poner un punto y coma que se usa para separar declaraciones entre sí Ahora sí ponemos font size que

significa el tamaño la letra y le damos por ejemplo 18 píxeles y ahí AC vamos hacer la segunda declaración que es

queremos que el tamaño de todos los párrafos sea de 18 píxeles esto es básicamente css Entonces ahora que

comprendimos todo esto tenemos que saber que entender bien html significa entender bien cómo escribir cada

elemento También tenemos que ver ciertas configuraciones Como por ejemplo que son los atributos tenemos que también

conocer las etiquetas aut cerra o las self closing tags tenemos que ver los tipos de etiquetas porque tenemos

etiquetas de texto tenemos semánticas tenemos estructuras tenemos las metatags También tenemos un tema eh de seo

tenemos que ver cómo cómo escribir todo para que la los navegadores lo muestren más arriba la página en Google cuando se

busque Bueno entonces eso es lo que vamos a ver en este curso en html vamos a ver todas las posibilidades que nos

brinda esta tecnología para que podamos definir y dominar por completo la creación de la estructura de una página

web eso con html y paralelamente vamos a aprender también css pero qué es lo que vamos a aprender con css vamos a ver

todas las formas que tenemos de seleccionar elementos porque podemos seleccionar un elemento puntual varios

elementos un grupo de elementos podemos separarlo por clases por ids aparecen también los pseudo elementos las

pseudoclases y además de eso tenemos 30,000 propiedades 30,000 formas de modificar y combinar los elementos para

que estéticamente queden hermosos y sea navegable y sea todo link tenemos que ver cosas como por ejemplo responsive

design que es por ejemplo que esté adaptado para que los quieran ver desde el celular desde una tablet o desde una

computadora que se pueda ver desde todo los dispositivos Porque si dejamos la resolución fija se ve solamente en uno

tenemos que ver que se adapte a todas y también la forma en la que se le suele hacer esto con una página web porque una

cosa son las herramientas y otra cosa es en la vida real y en la práctica cómo es que los desarrolladores de verdad

utilizan esas tecnologías y Cómo escriben los elementos y cómo definen sus propiedades bueno Hay muchísimas

cosas que tenemos que ver para dominar estas dos grandes tecnologías y salir hechos unos expertos haciendo páginas

web todo esto es lo que vamos a estar aprendiendo en este curso va a ser un curso super completo hice un research en

en internet y en YouTube y en un montón de lugares para ver cuáles eran todas las cosas que daban los cursos de html y

css tanto los que son solo de html solo de css y los que están juntos busquen cursos de pago busquen cursos gratis

busquen todo lo que hay disponible lo que Puedo imaginarme los mejores los que están catalogados como top Incluyendo

los de Hardware que también pude ver y créanme que con todo lo mejor de cada uno armé el mejor temario construí las

mejores clases me armé las mejores explicaciones Y esto es lo que va a resultar les puedo asegurar que es un

curso completísimo y que tiene todo realmente no van a necesitar nada más que este curso incluso les voy a dejar

tarea para que hagan les voy a dejar tareas para que puedan seguir mejorando al terminarlo y para que puedan ir

mientras van avanzando bueno es una locura vamos de poquito pero créanme que es un curso que tiene todo Ahora sí

después de esta breve pero super importante introducción vamos a comenzar Así que sí ya es momento de prender la

computadora y sentarse frente a un teclado porque lo van a necesitar porque ahora comenzamos con la parte técnica La

mejor de todas Así que vamos a la primer sección de todas que no vamos a ver código Todavía nos falta la última que

es elegir un editor de texto Así que vamos a ver cómo es esto porque vamos a configurarlo vamos a ver que es un

editor de texto y demás Así que vamos bueno en esta sección lo que vamos a hacer es una de las cosas principales

más importantes de todas que es optar por una herramienta para desarrollar esta herramienta se llama editor de

código que es En definitiva un programa que literalmente nos ayuda a escribir más rápido el código Bueno también nos

ayuda a evitar errores entre muchas otras cosas más O sea imagínense que tuviéramos que hacer una página web en

un blog de notas solo miren miren esto miren lo que es escribir una página acá No tendríamos quec unos enfermos de mi

desarrolladores utilizamos editores de código o id para programar como que editor de código o ID Bueno un ID los ID

son como editores de código pero más completos básicamente los ID son programas enteros Okay que tienen un

editor de código integrado Pero además tien muchas otras cosas más otras herramientas pero para html y css

estamos sobrados con un editor de código el más común del mundo el más el el más usado del universo hasta ahora por todos

los desarrolladores es visual Studio code a ver está desarrollado por Microsoft tampoco hay que hablar mucho

más Microsoft compró Open Ai tiene github que es la fuente de repositorios más grande del mundo Open Ai es la

empresa que hace sistemas Como por ejemplo chat gpt que utiliza los modelos de Inteligencia artificial más avanzados

en la actualidad Entonces nada las herramientas que nos brindan Son increíbles además con todas las cosas

que trae y las extensiones que podemos agregarles se puede convertir en un ide sin problemas así que es como un editor

híbrido porque puede ser un ID o puede ser un editor lo que nosotros querramos esta flexibilidad hace que sea

espectacular de hecho hice un curso completo para utilizar visual Studio code que lo pueden ver el curso es este

que está acá está espectacular el curso o sea tocamos un montón de temas desde lo las cosas que no se imaginan en fin

Bueno vamos a descargarlo ahora bueno para arrancar venimos a Google y buscamos visual Studio code o bsc como

sea bsc es la Aviación que tiene y acá ya nos salta este que es code.visualstudio.com entramos acá se

nos va a abrir esto y esto va a adaptarse a su sistema operativo si ustedes tienen Mac se va a cargar para

Mac si ustedes tienen eh Linux se va a cargar por Linux en este caso le damos download for Windows acá se nos va a

abrir esta pestaña ponemos en dónde descargarlo lo voy a ejecutar acá Todos los cursos dicen yo no lo descargo

porque ya lo tengo no no no ustedes no saben el lío que es desinstalarse y reiniciar visual Studio code acabo de

desinstalar meelo todo para volvérmelo instalar con ustedes soy un capo Bueno le doy acá en abrir acepto el acuerdo le

damos en siguiente siguiente siguiente acá le voy a dar en crear un acceso directo en el escritorio y ahora sí le

damos todo siguiente siguiente siguiente esperamos a que se instale es bastante rápida la instalación ahí se terminó y

lo abrimos le damos ejecutar y le damos finalizar esto la verdad que es bastante simple Este es el editor de código lo

primero que tenemos que hacer es elegir el tema tenemos estos cuatro temas Okay pero estos tres es gente para gente con

problemitas Okay le vamos a dar en el Dark Modern porque es el más afable que tiene vamos a venir acá abajo y le vamos

a dar en Mark done le damos acá y ahí se nos Abre Esto bueno Esta es la interfaz inicial Okay que tiene visual Studio

code mi consejo Ahora sí es un consejo nada más véanse este curso o sea está subido pero no está publicado se publica

ahora ya en breve este fin de semana pero cuando ustedes vean este curso ya va a estar recontra publicado si ustedes

jamás en su [ __ ] vida tocaron una línea de código jamás escribieron su primer línea de código véanse el curso hasta la

sección de Explorer Okay hasta esta sección de acá nada Es solamente una recomendación pero básicamente tenemos

una opción que es Open folder yo le voy a dar clic acá en Open folder vamos a venir a escritorio voy a dar botón

derecho nuevo voy a ponerle cursito html le doy enter y se va a crear esta carpeta Okay le doy acá la selecciono Y

le doy en seleccionar carpeta como ven me va a abrir esta pestaña que me dice eh si Confío en los autores le vamos a

dar en sí y acá como ven me sale la carpeta esto que está acá vamos a darle voy a hacer un pequeño zoom Acá tengo la

carpeta ya yo puedo acá crear archivos ven puedo escribir un archivo por ejemplo un archivo texto y ya acá tengo

mi archivo de texto y acá comienzo a escribir Okay ahora ahora vamos a ver de configurarlo porque tiene varias cosas

que son interesantes y voy a eliminar este archivo esto que está acá le voy a dar en hide y acá también le voy a dar

el botón derecho hide porque quiero que nos enfoquemos ahora en esto botón derecho estas dos pestañas y hide para

comenzar vamos a crear un primer archivo que se va a llamar Index html ahora vamos a ver tranquilos ustedes háganme

caso y crenlo pongan primer archivo html Okay acá tenemos las extensiones Okay si se fijan nos va se

nos va a desplazar este menú Okay se puede desplazar este que dice recomendadas mi consejo es ciérrelo

puede estar este de popular ciérrelo con este botoncito de acá se suben los menús y acá tenemos esto que dice Search

extensions Nosotros le vamos a dar clic acá y vamos a buscar prer esto que está acá es un formateador de código fíjense

que tiene 39.8 millones de descargas le damos en install básicamente nos ayuda a identar mejor el código la palabra

identar es como una forma de decir ordenar pero ayuda por ejemplo a agregar de línea cuando son necesarios acomodar

todo el código correctamente en su lugar nos da un buen formato para el código mantiene como un un una forma del código

que nos sirve después vamos a instalar otra que se llama indent Rainbow Okay que esta para aprender va a ser Va a ser

importante que básicamente lo que hace es me agrega Estos espacios como pueden ver acá que básicamente me dicen cuándo

estamos entando correctamente no quiero explicarles mucho okay pero básicamente ven esto que está acá estas linitas

bueno Esto lo que hace esto me lo agrega esta extensión esto esto este color que me da fíjense que si yo de repente hago

esto Estos espacios que están como separados Me lo me lo agrega esta extensión que más adelante vamos a ver

para qué los necesitamos okay Porque los vamos a necesitar pero por ahora no se preocupen ni siquiera de lo que acabo de

hacer es lo más lógico que no entiendan un joraca que solamente para que vayan entendiendo un poquito También tenemos

que instalar image preview okay Que básicamente es para que podamos visualizar las imágenes que tenemos

referenciadas okay O sea cuando pasemos el mouse por encima de una ruta de imagen se muestre Cuál es la imagen que

está enlazando esto es importante porque cuando veamos cómo crear imágenes y demás vamos a tener que poner el nombre

de la imagen o la ruta de la imagen y tenemos que pasar el mouse por encima Para ver si lo hicimos bien y si lo

hicimos bien nos va a saltar la imagen y nos lo va a mostrar si no no nos va a mostrar nada Ahora vamos a instalar algo

que se llama Live server si yo por ejemplo hago una página web Okay no se olviden que las páginas web como dijimos

desde que comenzó el curso si nosotros escribimos un código ese código se lo damos al navegador y el navegador lo

interpreta pero si modificamos el archivo y lo guardamos tenemos que también actualizar y recargar la página

para que los cambios también vuelvan a cargar en cambio esto que está acá que es Live server lo que hace es nos

levanta un servidor local en el que nosotros podemos hacer cambios y esos cambios se muestran en tiempo real

Entonces le vamos a dar en instal acá abajo nos va a aparecer algo que dice Go Live Acá está y esto que dice Go Live

básicamente lo que nos va a permitir es hacer esto observen lo para que lo entiendan bien si ustedes por ejemplo le

dan escriben cualquier cosa okay Y le dan en Go Live van a ver qué es lo que pasa voy a hacer algo para que ustedes

se entiendan mejor Hola cómo va control S y se actualizó en tiempo real todo bien control S para guardar y se

actualiza en tiempo real Entonces yo puedo escribir acá y con control S lo guardo si aprietan la tecla control o en

Mac command más ese se guarda la página o sea ven que acá arriba hay un puntito este puntito significa que la página o

sea no está guardada si yo por ejemplo la guardo control S acá se recarga la página si yo escribo de vuelta fíjense

que arriba me aparece el puntito que significa Ey hay un cambio en la página que todavía no guardaste entonces dale

control S y se guarda y ahí desaparece el punto y acá se me hace el cambio se borran todo actualizan y ahí se acaba de

actualizar el cambio Bueno eso es lo que hace la extensión Live server es poder ver todos los cambios que trabajamos en

tiempo real vamos a abrir extensiones de vuelta y ahora vamos a instalar un tema porque no me gusta que se vean así los

colores o sea fíjense poner html 2.5 Y esto es un plugin que me carga toda una estructura completa fíjense los colores

que tienen a mí los colores la verdad que no me llaman mucho la tensión lo voy a dejar en mínimo Entonces yo lo que voy

a hacer va a ser instalar un color dem que esto lo que hace es cambiarme y modificarme el aspecto del editor para

eso voy a buscar pal night y me va a cargar este que está acá yo lo voy a instalar y fíjense que ni bien se

instala me va a saltar todas las opciones que tiene Yo le doy en la primera que es Midnight ahora los

colores que me puso a mí me gustan más lo voy a dejar hay otro muy común también que se llama Dark One que es muy

util ADO este de dark One el de Atom y también tenemos Dark One Pro lo pueden usar pueden usar el que quieran fíjense

que si le dan instalar lo mismo se va a instalar y les va a preguntar cuál de todas las versiones de El el Dark Pro

quieren usar supónganse que ustedes le dan acá en mix fíjense Cómo cambian los colores si se mandan una [ __ ] y lo

escriben mal pueden darle en settings donde dice tems y acá tienen color them y acá Estos son todos los temas que

están disponibles van se van moviendo con la fita para arriba y para abajo y acá pueden ver todos los disponibles que

hay yo le voy a dejar en parite porque me gusta este sobre todo para explicar además es una aspecto que no es tan tan

fuerte Porque no nos mata a la vista no nos no nos encandila ni por mucho brillo blanco ni tampoco nos genera un

contraste que nos hace mal a la vista entre un fondo negro y letras claras para mí es el es perfecto para una buena

visualización del código y si no tienen otra opción más fácil que es apretan control shift p y escriben color espacio

them y acá le dan a donde dice preference color them y aprietan ahí y se les va a abrir de vuelta esto donde

pueden deslizar y elegir o tienen otra opción que es control kt o sea aprietan la el control mientras apretan control

apretan k y t esas tres al mismo tiempo en ese orden y se los va a abrir también cualquiera de estas está bien yo lo voy

a dejar de vuelta en este lugar y ya quedamos voy a poner 20 esto solamente para que ustedes vean más grande la

letra no hace falta que aprendan a hacer esto esto lo explico en el curso de visual Studio code así que bueno ya está

ya tenemos configurado nuestro editor de código Ahora sí gente vamos directo a la sección de html vamos a comenzar con la

base de todo vamos a arrancar con el código voy a borrar esto de acá lo voy a dejar vacío en blanco así voy a hacer De

hecho voy a hacer un pequeño un pequeño zoom y ahora sí vamos a ver bien cómo funciona esto Comencemos con una pequeña

sección de html vamos Bueno antes de comenzar con la sección de html quiero dejar en clarito

dos cosas primero ustedes se pueden quedar tranquilos de que todo les va a salir bien y todo les va a funcionar

primero porque todo el código que yo escriba va a quedar en pequeñas carpetitas que yo voy a subir a un

enlace que van a tener en la descripción Ese es mi repositorio de github donde ustedes van a poder ir ver lo que yo

tengo lo que ustedes tienen y comparar Incluso se van a poder descargar los archivos para que ustedes también los

puedan probar así que quédense tranquilos de que aprender y entender van a entender y van a aprender de hecho

por algo estás hasta acá no Espero que todo lo anterior lo hayas entendido es decir ya algo pudiste ver como explico y

lo segundo es que vamos a volver a las tradiciones antiguas y ahora mismo como estamos explicando html el color de

fondo es bueno lógicamente naranja porque el logo de html es naranja cuando expliquemos SS el color predominante va

a ser el Celeste Celeste azulado Y de esa forma también a ustedes también van a sentir una especie de sensación

extraña cuando me vean azul y cuando me vean naranja no que son los dos colores de html Y css eso es un detalle menor la

verdad que no aporta nada técnico técnico pero bueno a muchos de ustedes les gustaba en otros cursos que hacía lo

mismo que me decían por favor hacelo Es más si ahora tienen luces Pónganse las naranjas porque vamos a arrancar con

html para arrancar no se olviden que en html cada elemento está definido por etiquetas acá tenemos esto que está acá

y lo primero que tienen que hacer es crearse este archivo que tiene que terminar en punto html una recomendación

ahora que ustedes van a estar trabajando como desarrolladores es vengan a donde dice carpetas y acá arriba donde dice

vista Okay Tienen que darle en este tilde que dice elementos ocultos y extensiones de nombre de archivo porque

nosotros trabajamos con carpetas ocultas Como por ejemplo las que comienzan con punto y además ustedes ya saben que

todos los archivos tienen un extensión por ejemplo una imágenes pun jpg un videoos pun mp4 puede ser punto mov

también las imágenes pueden ser png jpg.jpg los audios pueden ser punto wab MP3 bueno para ver ese formato tienen

que tener activada esta opción porque muchas veces van a querer cambiarles el formato algunos archivos o crearlos

directamente desde desde su explorador de archivos y no van a poder porque Nunca van a estar modificando el formato

siempre van a estar modificando solamente el nombre entonces por eso es importante tenerla activa aunque no se

preocupen porque visual Studio code Si nos deja modificar directamente el formato y vamos a trabajar desde visual

Studio code pero digo para que no se mareen que sepan que nada lo necesitan Y por qué bueno ahora porque vamos a

trabajar con el Index y en su Index escriben todo su código el servidor al que ustedes suban

la página va a buscar dónde está el archivo Index html que va a tener el código que tienen que mostrar en este

caso por eso se llama Index que significa índice por eso es un Index es un índice y el punto html porque ese es

el formato Okay como dijimos antes yo por ejemplo Acá tengo una imagen default.jpg si la abro se me abre porque

sua una imagen Acá tengo por ejemplo otra imagen logo.png si lo ejecuto se me abre una imagen png Acá tengo el chrom

log.txt si lo ejecuto se me abre una archivo.txt que ahora se me abrí un visual Studio c porque lo tengo así

configurado pero si no es a ustedes se les abrira el blog de notas bueno las páginas web si se fijan terminan en

punto html entonces si yo ahora por ejemplo le doy doble clic acá todas las páginas se van a abrir de esta forma Así

es como abrimos una página web con doble clic y se abre la página web pero si no tuviera este punto html no la podemos

abrir y si nosotros no tenemos activada esta opción ven no vemos el punto html por eso es importante que la tengan

activada para poder ver el formato Así que nada solamente es un pequeño detalle ese bueno ahora sí podemos arrancar al

fin bueno para arrancar sabemos que el formato de un archivo en el que vamos a escribir código html tiene que tener

punto html Ya está ya lo hicimos creamos un archivo pun html de hecho acá abajo nuestro editor de código nos dice ey

estás escribiendo código html entonces las ayudas que nos va a dar los colores que nos va a poner y todo van a a ser en

html para arrancar no se olviden que todo funciona por etiquetas para abrir una etiqueta se utiliza este signo que

está acá el signo de menor que y acá ponemos el nombre de la etiqueta por ejemplo nombre No acá tiene que estar la

etiqueta Así que yo voy a poner tag porque una etiqueta en inglés se llama Tag y para no escribir etiqueta escribo

tag pero es lo mismo acá va el nombre de la etiqueta no se olviden que tenemos muchas etiquetas puede ser cualquier

etiqueta y acá va el nombre y fíjense que cuando yo pongo el otro signito que es este signo que está acá que

básicamente lo que hace es cerrarme el archivo una cosa que quiero hacer antes es darle clic acá en el Explorer para

que se me cierre voy a hacer un pequeño zoom de vuelta Ahora sí lo que quiero demostrar es que ustedes Acá lo que

están viendo Es que se cerró solo bueno este autoc Close el cerrado automático Ya lo vamos a ver pero básicamente las

etiquetas se abren así con un menor que el el nombre de la etiqueta y acá un mayor que de esta forma estamos

encerrando una apertura Así es como abrimos una etiqueta todo lo que siga de ahora en más va a ser parte de la

etiqueta si yo acá por ejemplo tuviera un negrita esto lo que hace es ponerte el texto en negrita si yo lo que tuviera

acá todo lo que siga después de acá todo lo que continúe de acá en adelante va a formar parte de negrita si yo quiero que

por ejemplo voy a escribir algo acá no voy a escribir esto yo quiero que esto que está acá ya no esté negrita qué hago

Tengo que cerrar la etiqueta para eso lo hago de esta forma y se cierra la etiqueta es igual que para abrirla Solo

que se utiliza este signito acá est esta barra que le está diciendo Ey la etiqueta llegó hasta acá entonces todo

lo que esté entre esto y esto va a formar parte de este elemento completo todo lo que esté por fuera ya va a ser

simplemente texto simple entonces esa es la estructura de una etiqueta Okay volvamos es tag contenido tag es decir

abrimos etiqueta adentro va el contenido que queremos etiquetar y cerramos el tag así funcionan la mayoría de elementos

html yo por ejemplo Quiero poner un encabezado pongo encabezado texto del encabezado cierro el encabezado Quiero

poner un párrafo pongo párrafo contenido del párrafo cierro el párrafo así como si ustedes van a WhatsApp y ponen así

texto esto que está acá en WhatsApp se muestra en negrita Bueno es lo mismo solamente que acá en vez de poner esto

ustedes ponen un tal nada Siento que estoy siendo super básico Pero hay muchísima gente que aunque ustedes no lo

crean no entiende y le cuesta entender intento hacerlo lo más abarcativo posible créanme que cuando nos metamos

en cosas más avanzadas les va a encantar que sea así Ahora parece una boludez y parece que estoy siendo muy muy flojito

sobre todo para los ya vieron alguna vez algo de código Pero los que recién están arrancando me lo van a agradecer y

cuando nos metamos en temas más avanzados también me lo van a agradecer incluso los que ya saben una cosa que

tenemos que tener en cuenta también que esto es a nivel semántico y Es que todas las etiquetas siempre tienen una función

lo que vamos a ver en este curso son las etiquetas que uno realmente utiliza para desarrollar en la vida real Hay

muchísimas que están obsoletas O sea no se usan más Hay muchísimas que directamente son nefastas que no es buen

no es recomendado utilizar por ejemplo esta etiqueta la de poner texto en negrita digamos no se suele hacer porque

lo que hacemos con html no es dar estilo Okay el estilo se da después con css normalmente cuando uno Crea una página

en html la página queda horrenda queda asquerosa y después con ccs se le da la magia uno no puede crear una página en

html con todo estilo y que la página se vea bien con html Porque después con css va a ser complicado modificarlo pero

nada eso con el tiempo lo vamos a ir viendo lo que quiero que entiendan Es que todas las etiquetas tienen un uso

todas es más cada una cumple una función muy específica por ahí van a ha etiquetas que son exactamente iguales

pero a nivel semántico no Y esto es importante porque cuando nosotros presentamos nuestra página ante los

motores de búsqueda Como por ejemplo Google hablo de esto del buscador Okay este esto es un buscador que tiene

incorporado un motor de búsqueda Y si nosotros buscamos algo por ejemplo soy dalto yo busco soy dalto acá esto que

están viendo acá Okay esto que al Buscar soy dalto hay páginas que aparecen primero porque están bien posicionadas

Es decir tienen seo bueno todas estas cosas que Google entiende que cuando buscamos en Google aparecen aparecen

porque Google entiende el contenido si ustedes le dan un significado correspondiente Google cuando lea su

página los va a posicionar más arriba o sea son son formas de hacer páginas web no solamente para que se vea estética

sino que para que también aparezcan mejor posicionadas cuando ustedes las buscan en Google que muchas veces eso es

lo importante de una página web si estamos vendiendo algo acá aparezcan resultados de tu tienda Online para

hacer eso tenés que saber usar las etiquetas Entonces ustedes van a ver que en realidad en el fondo las etiquetas

funcionan bastante similar o sea de hecho casi todas las etiquetas son iguales porque no se olviden con una

etiqueta en html Okay es literalmente como un bloquecito podemos hacer que esta que está acá y esta etiqueta sean

exactamente iguales Por qué Porque agarramos con css y a css hacem la hacemos que tengan las mismas

propiedades o si tenemos un elemento html y otro elemento html que son distintos pero ambos tienen las mismas

propiedades y los mismos valores entonces son exactamente iguales si tien mismo color mismo tamaño mismo texto son

el mismo elemento bueno acá viene la magia Cuando digo que cada etiqueta es para algo diferente no es porque

nosotros después cuando escribamos el código se van a ver diferente no necesariamente es por eso algunas

etiquetas Sí son diferentes pero lo que digo es que normalmente casi todas las etiquetas por ejemplo de texto o que

arman bloques o que arman estructuras funcionan igual a nivel código pero no a nivel semántico o sea nosotros cuando

creamos una página tenemos que hacer que cuando otro desarrollador venga y lea lo que escribimos sepa que estamos

escribiendo Ah acaba una sección Ah okay acaba una sección secundaria Ah perfecto Ah esta palabra es una palabra destacada

es una forma es una una forma correcta de trabajar escribir html que sea semántico y que cada etiqueta cumpla el

rol que tiene que cumplir esto que está acá por ejemplo son dos tipos de encabezado diferente este que está acá

es para títulos los más importantes de la página y este que está acá es para por ejemplo subtítulos importantes si yo

pongo subtítulos importantes en el lugar en donde tiene que estar el título se va a ver igual porque si lo editamos con

css podemos hacer que se vean a nivel aspecto visual que sean idénticos Pero qué pasa cuando Google lo lea le va a

dar más importancia al h1 que al h2 Cuando quiera recomendar nuestra página no la va a poder recomendar porque no

hay estructura cuando un desarrollador quiera editar va a estar buscando el h1 y no lo va a encontrar entonces son

cosas que hacemos simplemente para que nuestra página quede mejor posicionada en los navegadores y cuando nosotros

podamos hacer otras cosas tengamos más beneficio Eso es todo lo que tienen que saber sobre la estructura de una

etiqueta httl tag contenido y se cierra de hecho fíjense que si yo hago así y escribo tag y hago así se me termina de

cerrar la etiqueta automáticamente y el cursor se me posiciona acá Entonces yo por ejemplo Quiero poner un h1 escribo

h1 okay Y acá ya me puedo poner a escribir el contenido estas son una de las ayudas que nos dan el editor de

código además de fíjense de poner esto de un color esto de de otro color en realidad es texto plano solamente que el

navegador el perdón el editor de código reconoce Qué estamos intentando escribir reconoce que es una etiqueta y por eso

me pone el nombre de la etiqueta de rojo eh estos signos me los pone más azulcito y el contenido me lo deja blanco pero

nada la verdad que hasta ahora Estamos muy simple esto es muy sencillo Ya vimos la estructura de una etiqueta entendimos

que cada etiqueta tiene un uso diferente o sea cada etiqueta es en realidad un elemento que el navegador trae por

defecto configurado con ciertas propiedades que tiene un uso específico y que también a nivel semántico cada

elemento está creado para solucionar un problema o para construir algo muy puntual lo que vamos a ir viendo ahora

es justamente cómo son cada uno de esos elementos Para qué se usan cada uno de esos elementos y Cómo podemos construir

cosas en base a estos elementos Así que vamos Ahora sí a arrancar con la base de todo y estoy hablando de párrafos y

encabezados vamos Ahora sí a ver lo más básico de lo más básico que son los párrafos y los encabezados

vamos bueno para empezar como yo tengo el navegador predeterminado que no es Google Chrome y yo quiero usar Google

Chrome es decir yo tengo opera y yo doy en Go Live si se fijan me va a abrir ópera yo no quiero esto yo quiero que me

abra Chrome para eso tengo que venir acá y poner navegador y acá me dice elige un explorador predeterminado le damos acá y

acá fíjense que esto que está acá dice navegador web buen Yo le doy clic acá y le doy en Google Chrome entonces esa

forma Ahora sí mi navegador web predeterminado va a ser Google Chrome esto es más fácil ustedes pueden buscar

También acá aplicaciones predeterminadas y también les va a saltar ven abren esto y acá se les Abre Esto entonces ahora

cada vez que ustedes abran una página web o lo que sea siempre se les va a abrir con Google Chrome esto es

buenísimo y es lo que recomiendo Pero si ustedes no llegan a saber hacerlo son medio tontos están medio gagas no se

preocupen que igual con opera funciona todo Exactamente igual así que no van a tener ningún problema de hecho opera y

casi todos los navegadores de hoy en día están basados en chromium que es la tecnología detrás del motor de Google

Pero bueno si me siguieron los pasos y les salió bien van a poder cerrar el puerto Okay ahora sí ya está cerrado lo

vuelven a correr y ahora se debería Abrir Google Chrome acá tenemos Google Chrome perfecto Pero fíjense que acá me

va a decir algo fíjense que me está diciendo que el Live reload no se puede abrir sin un una etiqueta Head o una

etiqueta Body esto es porque todas las páginas web tienen una estructura Okay esto es importante Vamos a darle en I

understand Don't show Again please y básicamente esto que está acá me está diciendo Ey tenés que crear la

estructura de una página web porque toda página web tiene una estructura si nosotros escribimos en visual Studio

code html5 html 2.5 y se nos va a cargar todo esto todo esto es la estructura de una página web Okay esto que está acá lo

vamos a borrar porque no nos interesa todavía qué joraca es esto Bueno vamos a verlo paso a paso Esta que está acá es

una etiqueta dog type que Define el la versión de html que estamos utilizando en este caso es la última Así que esto

que está acá Tiene que estar siempre es una etiqueta que no necesita cerrarse ni nada o sea es como es así tal cual lo

copian la pegan Y ya está no es que tenemos que cerrarla así poner html Y cerrar Esto no se hace No necesitamos

hacer eso la que continúa es una etiqueta que se abre acá y cierra acá Okay de hecho vamos a dejarlo así esto

que está acá es una etiqueta que se abre acá y cierra acá esto es un atributo que significa in o english lo vamos a sacar

después vamos vamos a ver bien quiero que ustedes aprendan de la forma más tranquila y entendible posible después

vamos a ir agregándole cositas esto que está acá lo que hace es definir que la estructura todo lo que va a estar acá

dentro va a ser parte de la página web Okay esto solamente para decirle al navegador Qué versión de html usamos

Pero esto ya es para hablarle directamente y decirle todo lo que esté acá dentro va a ser nuestra página web

es decir todo lo que pongamos dentro de esta etiqueta y esta etiqueta ya va a tratarse de página web si nosotros

borramos este espacio de acá y le damos enter fíjense que ya me va a posicionar el cursor acá me está posicionando el

cursor unos 1 2 3 cuatro espacios más adelante porque esto que está acá Define Cuántos espacios deja de entado en este

caso toda estructura de html está compuesta por dos cosas primero tenemos el hadad Okay que es esto que está acá

que básicamente le dice a la página web un montón de cosas de información de la página es la parte de la información de

la página lo que no podemos ver por ejemplo ponemos el title y esto que está acá es otra etiqueta que lo que está

haciendo es definir el título de la pestaña ven acá arriba que acá dice 127 70.0.15

cambiamos esto le ponemos primera Y actualizamos fíjense que ahora ya me está cambiando porque ya ya funciona en

tiempo real si nosotros acá Venimos dejamos espacio y ponemos cursito dal alto actualizamos acá va decir cursito

de alto aprendiendo html y ahí está acá tenemos el título Este título básicamente tiene que ser una

descripción de la página básicamente los títulos siempre describen todo en este caso si yo por ejemplo esta página web

se trata de no sé recetas de cocina las tres mejores recetas de cocina por ejemplo voy a darle un menos acá y ahora

sí yo tengo este texto que dice las tres mejores recetas de cocina acá me va a decir las tres mejores recetas de cocina

gis Ahí va la mejor receta de gis ahí nos queda más cortito y puedo hacer un zoom acá tenemos una página que nos está

diciendo la mejor receta de okis bueno Además del Head tenemos otra sección acá Además del Head van otras cosas va por

ejemplo el meta meta description va el meta keyword va el utf8 Hay un montón de cosas que ya vamos ir viendo con el

curso pero acá básicamente es toda la parte de información que no es visible Esto no es visible fíjense que ustedes

lo pueden ver acá arriba pero no es información visible que el navegador tenga que poner acá dentro de esta parte

blanca No eso va en una sección llamada Body el body básicamente acá va a estar toda la parte visual de nuestra página

web adentro del Body vamos a contener todo lo visible de la web de hecho si yo acá escribo cualquier cosa y actualizo

fíjense que acá ya me aparece el cambio Esta es la estructura de una página web Okay así como lo están viendo hay un doc

type que Define el tipo de versión que estamos usando esto que está acá le dice al navegador De hecho si ponen el mouse

por encima acá van a ver la definición ven el elemento html representa la raíz de un documento html y la parte visible

está en el el body De hecho si ponemos el mouse encima de Body acá nos va a decir una especie de definición de mdn

que es básicamente el developer mochilla que es una de las estandarizaciones oficiales en las que nos podemos basar

para escribir el elemento Body representa el contenido del documento y fíjense acá que el Head si ponemos el

mouse encima dice el elemento Head representa una colección de metadatos para el documento ahora vamos a ver lo

que son los metadatos esperen pero como decimos son todas cosas que no necesariamente son visibles y

normalmente toda la página web la construimos adentro de Body Así que ahora sí ya con la estructura lista

estamos listos para comenzar acá para que ustedes puedan verlo mejor voy a sacarlo y ponerle otra cosa Esto que

está acá es un mini map que si se fijan básicamente el mini map es como una especie de scroll pero que nos lleva a

una parte del código que esto sabe que podemos ver así que lo que voy a hacer es darle botón derecho y le voy a dar en

este esto que dice mini map Ahí está y ahora fíjense que tengo más espacio para escribir a mí nunca me gustó el minimap

Así que lo voy a sacar ahora sí vamos a arrancar con lo que son los párrafos y los encabezados Porque al fin y al cabo

íbamos a ver eh párrafos y encabezados y terminamos viendo la estructura básica de una página Pero bueno nada No se

preocupen porque igual era necesario vamos a comenzar con los párrafos los párrafos son esta etiqueta

p okay Que básicamente se utilizan para eso para describir párrafos acá dentro vamos a poner el contenido y acá

escribimos todo el contenido de la página yo voy a darle lorem y le voy a dar en la tecla Tab para que me salte

todo este texto y además voy a apretar alt Z o voy a apretar control shift p Word wrap y acá le voy a dar enter de

esa forma fíjense que el texto se adapta a la resolución de mi editor ven si el editor se hace más grande el texto se va

adaptando a la ventana ahí por eso es importante que tengamos esa opción activada le voy a dar en control S para

guardar Ahí está y acá ya me salta el contenido ahora Cuál es la diferencia entre escribir un párrafo por ejemplo y

directamente no escribirlo si actualizamos parece que es lo mismo hay un cambio mínimo si se fijan hay un

cambiecito mínimo esto que est p no me lo muestre más no TR decir nunca en latín si venimos acá y lo hacemos de

vuelta ven apretamos control S van a ver como que me sube un poquito porque este esta etiqueta tiene una propiedad por

efecto que nos hace que haya un poquito más de espacio entre arriba y el siguiente elemento y abajo pero bueno

eso ya lo vamos a ver más adelante cuando veamos SS parece que no hay nada pero está mal los párrafos se utilizan

para eso específicamente para escribir párrafos lo importante de los párrafos es que siempre tengan una idea y un

punto específico cada párrafo que nosotros escribamos tiene que tener un concepto una idea algo por ejemplo puede

describir eh una sección puede describir un elemento puede ser un mensaje en el chat Esto está bueno porque tiene que

describir a algo supónganse que están hablando sobre los beneficios del ejercicio un párrafo podría tratarse de

mejorar la salud cardiovascular y otro párrafo podría tratarse por ejemplo de beneficios para de Salud Mental por

ejemplo entonces cada párrafo tiene que abarcar algo diferente tiene que abrir y cerrar con la misma idea con algo tiene

que haber un motivo para que exista un párrafo y después tenemos los encabezados que los encabezados son los

h1 voy a dejar un espacio acá y acá arriba voy a poner un h1 y fíjense que acá tengo mi h1 y voy a escribir algo

por ejemplo Hola Lucas actualizo y acá me salta este texto que es enorme porque es un encabezado justamente encabeza

tenemos seis tipos de encabezado tenemos h1 hasta el h6 yo acab escribir H el signo del dólar el signito del asterisco

y el seis esto le está diciendo a emet que es un plugin que me cree seis elementos de h en ordenados del uno al

seis le doy enter y ahí me los crea esto que está acá olvídense no vamos a ver emet ahora lo vamos a ver después de

hecho si quieren entender Bien emet también en el curso de visual Studio code tengo un apartado especial para

enseñarles a usar emet Pero esto ignoren ustedes por ahora yo esto lo hago simplemente para ahorrarme tiempo pero

ustedes escriban h1 y copien h1 escriban h2 háganlo así se los aclaro ahora porque me van a ver a lo largo del curso

utilizar bastante estos atajos Okay pero ustedes escriban los completo desde cero esto son cosas para la gente que ya sabe

como yo que ya ya hacemos esto y ya lo lo manejamos con mucha naturalidad Okay entonces son atajos para hacerlo Pero

ahora que ustedes están aprendiendo Está bueno que los escriban para equivocarse y cagarla y aprender y entender y

comprender no está bueno que utilice los mismos atajos que yo yo uso los atajo pero ustedes Está bueno que lo escriban

este que está acá es el texto más grande yo acá voy a poner por ejemplo título Okay y le damos enter se me actualiza

dice título acá voy a poner subtítulo y acá voy a hacer lo mismo y los voy a pegar acá todos y fíjense la diferencia

entre el h1 y el h6 Mientras más chiquito es el número más chiquito es el encabezado el h1 Okay se utiliza para

definir se utiliza una sola vez por página web se utiliza solo un h1 esto es porque el h1 básicamente tiene una

importancia muy grande en el seo seo significa search engine optimization es posicionamiento web y es esto que les

decía Google le da mucha importancia al h1 es decir el h1 es el indicador más importante del contenido de la página si

tuviéramos que decir cuál es la etiqueta más importante que le dice a Google De qué trata la página bueno esa etiqueta

es el h1 por eso tiene que haber solamente un h1 por página Porque si hay más de uno Google va a decir vos te

estás pasando de vivo estás intentando poner muchos h1 para aparecer muchas veces en Google Y eso te lo penalizó y

ahora si pones más de un h1 cagaste no te voy a mostrar Entonces por cuestiones de seo y posicionamiento el h1 se usa

Solamente una vez y ese uso tiene que ser lo más descriptivo posible además esto le da más Claridad hay algunas

tecnologías de asistencia por ejemplo la gente que es ciega y no puede ver que utiliza páginas web utilizan un

aparatito que lo que hace ese aparatito es decirles a esas personas los los contenidos entonces las tecnologías de

asistencia por ejemplo el h1 lo leen y entienden De qué trata la página por el h1 entonces Si una persona sigga está

viendo la página y tiene 3 h1 se va a confundir porque las en la tecnología de asistencia se lo va a leer mal entonces

también por tema de accesibilidad web es importante que Ustedes pongan un h1 por página después están todos los demás que

esto sí los pueden usar las veces que quieran Okay pero vamos a ver un ejemplo voy venir a Paint supónganse que

nosotros tenemos acá una página no la página está compuesta por varios bloques tenemos acá un título principal tenemos

acá dos secciones chiquititas básicamente acá nuestra página va a tener un título sería el h1 porque es el

título principal de nuestra página porque es lo que va a describir De qué trata nuestra página ahora si acá por

ejemplo estuviéramos hablando de dos cosas diferentes acá tenemos un artículo sobre algo y acá sobre otra cosa este

que está acá ya sería un subtítulo y acá también habría otro subtítulo tendríamos dos subtítulos El de acá y el de acá y

acá podemos tener un párrafo por ejemplo y ahí tenemos el contenido de la página y acá también tenemos un montón de

párrafos el h1 es lo más importante y después el h2 lo utilizamos para subtítulos pero si a su vez esta sección

que tiene subtítulos fuera todavía más chiquitita acá podemos poner otro subtítulo no sé por ejemplo punto uno

acá vamos a poner punto dos y acá vamos a poner por ejemplo punto TR por ejemplo y acá dentro ponemos todo el contenido

Entonces en este caso ahora sí tenemos la página web completa Uh Miren lo que se pegó acá arriba XD Bueno lo soluciono

y ahora vuelvo Ahora sí Bueno entonces acá tenemos por un lado el título principal es decir esto que está acá

sería el título principal Entonces es un h1 porque esto es lo más importante de la web Así que lo hacemos con un h1 acá

habría un h2 o sea este subtítulo sería un h2 como lo que describe secciones completas Entonces por nivel jerárquico

iría como primera opción de un subtítulo un h2 ven Serían como subsecciones de la sección principal que es esta Y en este

caso acá tendríamos un párrafo en este caso y acá tendríamos otros tres párrafos chiquititos y esto que está en

rojo no sería ni un h1 ni un h2 a ver si adivinan Qué sería si dijiste h3 Te felicito porque esto verde de acá

también lo deberíamos hacer con un h3 porque los encabezados son justamente eso títulos que le vamos poniendo a las

diferentes secciones voy a entrar por ejemplo acá Okay receta de gis si nosotros le damos a esta página le damos

botón derecho inspeccionar elemento acá abajo inspeccionar van a ver que esto que está acá es un h1 ven es un h1 Sí

con 30,000 cosas más esto que está acá todo esto ignoren lo lo importante es que acá voy a darle en control más para

que ustedes ust lo puedan ver bien Esto es un h1 acá ven el elemento Ven h1 y fíjense que es el título más importante

de la página si seguimos bajando vamos a encontrar esto que está acá que parece ser como otro subtítulo Ese es el título

de una sección aparte le damos en botón derecho inspeccionar Acá está es un h2 este elemento es un h2 porque es como un

subtítulo es otra sección venimos acá abajo Este es otro subtítulo Vamos a darle botón derecho inspeccionar y acá

tenemos otro h2 efectivamente esto es otro h2 y acá tenemos un un subtítulo del subtítulo le damos botón derecho

infeccionar bueno en este caso es otra cosa que es una lista ordenada porque en este caso lo que estamos haciendo es

definir algo que después vamos a ver vamos a llegar a eso pero nada a nivel estilo si solamente lo hacemos con html

lo único que hace es cambiarnos el tamaño el h1 es el más grande el h6 es el más chiquito y básicamente el h1 se

usa Solamente una vez y es la parte más importante que Define el contenido de la página El h2 se usa para poner de

subtítulos en otras secciones Y si tuviéramos secciones dentro de otras secciones ese titulo va con h3 y

mientras más abajo nos vamos metiendo más chiquito es lo que ten tenemos que usar si nuestra página principal tiene

subsecciones esas secciones tienen que usar h2 de títulos y si esas esas subsecciones a su vez tienen otra

secciones más chiquititas de títulos usamos h3 y mientras más nos vamos metiendo adentro más vamos metiéndonos

en la cantidad de encabezados que vamos a utilizar es por un tema de semántica pero ustedes tranquilamente podían usar

h1 para todas y a la [ __ ] pero no es lo recomendado bueno gente vieron que antes habíamos visto eso que decía o

listas que es una lista y no sé qué bueno ahora lo que vamos a ver justamente son listas porque es una de

las grandes partes y otro de los componentes es más importantes de una página web que son las listas que no

solamente se usan para listar elementos todas las páginas web tienen menú de navegación Bueno ese menú se construye

con listas normalmente de hecho las listas se usan para todo así que vamos a ver qué son las listas y cómo aplicarlas

Porque nada tenemos que conocerlas vamos Bueno vamos a ver ahora el apartado de listas y vamos a entender

Qué son las listas para arrancar tenemos dos tipos de listas las ordenadas o las order list y por otro lado las listas

desordenadas o las inorder list voy a entrar en Explorer de vuelta voy a cambiar el nombre como párrafos gu bajo

o piso y gu bajo piso encabezados lo guardo y ahora esto les va a quedar a ustedes para que ustedes

si quieren comparar lo que hicieron ustedes con lo que hice yo lo puedan hacer y voy a crear un nuevo archivo que

va a llamarse listas html y acá me va a cargar esto voy a cerrar este voy a cerrar el puerto y volverlo a abrir acá

se me acaba de abrir el nuevo okay Porque si no me va a funcionar y acá voy a hacer lo mismo voy a escribir html 2.5

o yo los reto a escribir la estructura desde cero doc type html html adad título listas ponen el body y acá

estamos ahora sí estamos listos para continuar esto que está acá lo vamos a de vuelta a cerrar para comenzar las

listas ordenadas se escriben así ordered list no se olviden que cada etiqueta tiene un significado y esto que está acá

ol significa ordered list entonces todo lo que esté acá dentro va a ser parte de una lista y la lista tiene a su vez mini

elemenos esos elemenos se llaman list o list item l significa list y significa item list item cerramos y acá tenemos

esto que está acá que son los list items acá básicamente vamos a poner algo por ejemplo elemento uno y si actualizamos

bueno tenemos que cerrar el servidor o recargarlo ahí está ahora sí ya funciona en tiempo real vamos a actualizar y esto

que está acá decirle que no traduzca nunca este sitio así no se me muestra más esto que es rep pesado y ahora

fíjense que me cargó con un uno adelante es decir yo acá por más que lo deje vacío Esto me va a cargar con un punto y

un uno si yo creo más listas voy a pegar un par más me van a cargar así pero los elementos están vacíos pero la etiqueta

está creada esto que está acá es una forma que tiene el navegador de mostrarnos las listas por defecto la

muestra así 1 2 3 ahora si en vez de ol vamos a poner una cosa vamos a poner elemento 1 2 3 Ahí está y acá está esto

por ejemplo lo podemos utilizar si estamos creando por ejemplo una receta de cocina como antes vimos vieron que

antes entramos a una página de cocina Bueno si entramos a una página de cocina podemos utilizar esto por ejemplo una

lista ordenada para crear por ejemplo una lista de pasos a seguir primero preparar no sé una clara de huevo y la

batí bien bien bien bien después lo integras leche y batí batí bueno el listado de pasos a seguir lo podemos

hacer con esto con listas ordenadas después obviamente en ccs se les dan 30.000 estilos y se hace lindo de hecho

la página a la que entramos acá si se fijan tenía acá una sección de ingredientes y acá nos explicaba todo

paso uno paso dos paso tres si le damos botón derecho y le damos en inspeccionar acá tenemos los le ven estos le son los

list item Y esto es una ol ven dice ol porque es una lista ordenada entonces comienza acá porque esto va a ser el

contenido de la lista va a ser una lista ordenada y Acá hay cada elemento Este es un elemento Este es otro elemento Este

es otro elemento Este es otro elemento y así si se fijan cada uno de estos elementos que dice Li es algo diferente

en la lista todo esto se hace Así de lindo con css podemos agarrar todo lo que hicimos Y hacerlo más lindo vamos a

cerrar esto Incluso se le puede sacar este número por adelante yo por ejemplo vo botón derecho inspeccionar acá puedo

ver el código de mi página Ven tengo el doc type el html el Head Ahí está Yo por ejemplo acabo de hacer algo ráp en ccs

no hace falta que lo entiendan a todos los le le di un list Style known que básicamente lo que hace es le saca el

numerito que tienen adelante así como le di este estilo le puedo dar 30.000 estilos más para que termine como la

página de Oki que vimos recién Pero eso sí con css a lo que voy es que quiero que no se preocupen por eso ahora

ustedes cuando les cargue les va a cargar así pero después con c se saca y se retoca y se modifica pero esta es la

forma correcta de decirle al navegador Ey esto es una lista ordenada el orden sí importa supónganse que tienen una

página de Tops no Si tienen una página de Tops Tops 10 mejores videojuegos de habla hispana par de cuatro Qué hacen

bueno ponen una lista ordenada por qué porque cada juego va a ser mejor que el anterior desde el top 10 hasta el top 1

el uno es el mejor entonces ahí se les van a ir enumerando bla bla bla y después tenemos las listas que son

desordenadas que son un ordered list que se ponen con la u las listas desordenadas son listas que son iguales

son listas pero que el orden no importa si Nosotros sabemos que estamos trabajando en una lista en la que el

orden no importa por ejemplo una barra de navegación esto que está acá es mi repositorio de github que quer para el

curso de G que dice que lo pueden ir a ver después de este curso es muy interesante acá por ejemplo tengo un

menú Okay esto es un menú si se fijan es un menú desplegable si yo le doy botón derecho a cualquiera de estos elementos

a ver si se fijan esto es literalmente una lista es una lista de menú es un menú que tiene dentro una lista de

opciones para elegir Hacia dónde ir le do botón derecho inspeccionar y acá Efectivamente es un l dice que es un li

porque es un elemento de la lista es un list item y arriba Vamos a ver que dice H Por qué dice huele y porque acá Qué

importa el orden no home issues no es como que es algo que está relacionado entre sí y sigue un orden primero tenés

que hacer esto después poner la papa después poner los huevos poner vir el coso no es algo que tiene un orden como

una receta o por ejemplo el top 10 mejores juegos no no no va por orden es algo desordenado toma tenes una lista de

opciones para navegar en mi página acá no importa el orden por eso es una lista desordenada cuando nosotros hacemos

listas desordenadas cuando actualizamos la página control S se ponen puntitos Esta es la forma de saber que estamos

creando listas desordenadas no que tienen puntitos yo creo un cuarto elemento por ejemplo elemento cuatro le

doy en control S y se crea el elemento cuatro obviamente también se pueden sacar los puntitos todo se puede

modificar es más con ccs y javascript podría modificar este elemento para que se convierta en un juego si quiero en un

Tetris completo a ese nivel se puede personalizar Por eso digo que no se preocupen por la apariencia les voy a

mostrar algo muy interesante si ustedes van a una página cualquiera yo por ejemplo acá estoy en la mi en mi canal

de YouTube si yo le doy en botón derecho inspeccionar y voy al header que está arriba de todo y borro el Head

normalmente los estilos de css se escriben en el Head si yo borro el Head Así es como se vería la página de

YouTube Si no tuviera css así como lo están viendo ahora Así se ve se ve miren así eh así como lo ven es YouTube sin

css sin css Así se ve la página de YouTube Por qué se ve así bueno porque a YouTube no le importa cómo se ve a la

página sin css porque la página final uno no la ve sin css uno la ve con css Por eso digo ustedes ni se preocupen por

cómo se ve la página web con solo html porque eso no importa Después el estilo que le dan con css hace el efecto Miren

actualizo la página y así es la página web con css si se ve así y no les gusta esto no importa Después pueden agarrar

un elemento cambiarlo de lugar ponerlo más arriba ponerlo más aparte sacarlo de la caja en la que está todo eso se hace

con ccs por eso no se preocupen nunca por la estética de los elementos solo preocúpense por la estructura si es

correcto semánticamente estoy haciendo una receta de cocina debería poner un ul o un ul Bueno un ol estoy creando una

barra de navegación importa el orden no entonces pongo un ul estoy creando un subtítulo Okay pones un h2 eso es lo que

importa además también es importante por temas de accesibilidad como siempre así que nada básicamente así se hacen las

listas si les cuesta un poco eso de meter una etiqueta adentro de otra etiqueta imagínense cada etiqueta html

como una caja esto es una etiqueta html así tal cual esta etiqueta es html es la más importante de todas adentro de la

etiqueta html tenemos dos etiquetas importantes la etiqueta Head okay Y tenemos la etiqueta Body adentro del

Head por ejemplo tenemos otra ajita más chiquitita todavía que sería el título y adentro del Body en este caso teníamos

una lista desordenada en este caso y teníamos Bueno vamos a sacar este le porque teníamos tres elementos le y

adentro teníamos tres le pequeñitos tres ahí está así más o menos es como se como podríamos llegar a interpretar esto como

cajitas no esta etiqueta es la caja mayor adentro tenemos el Head que a su vez tiene otra cajita que es la de title

y después tenemos Body que a su vez tiene otra cajita que es sul que a su vez tiene tres cajitas más chiquititas

que son los l imagínense Elo todo como cajitas dentro de cajitas y después tenemos otra forma de verlo que es como

si fuera un árbol raíz no tenemos html que es la etiqueta principal y de esta etiqueta salen dos la primera es Head la

segunda es Body adentro del Head tenemos la etiqueta title por ejemplo adentro de del Body tenemos un ul es decir una

lista eh desordenada y adentro de esta lista desordenada tenemos tres pequeños elementos l así también es como podemos

verlo por un lado tenemos la etiqueta principal que es html que tiene Head y tiene Body Head tiene title y Body tiene

un ul y ese ul a su vez tiene tres l Y si nosotros quisiéramos podríamos seguir metiendo cosas pero así básicamente es

como funciona la estructura del árbol no de html Si queremos que es como un elemento adentro de otro adentro de otro

es más incluso hasta podemos verlo de esta forma la etiqueta hadad es el padre de title porque hadad contiene a title

la etiqueta Body es el padre de ul porque Body contiene a ul O sea la etiqueta H está dentro del Body la

etiqueta le a su vez está dentro de h o sea que u es padre de le entonces Body es padre de helele H es padre de Lee O

sea que lee es hija de helele y helele es hija de Body title es hija de hadad y hadad y Body son hijas de la etiqueta

mayor que es html etiqueta raíz O sea que html es la etiqueta padre de estas dos que están acá es una forma de verlo

no Porque después cuando trabajen con javascript o con css Hay un montón de cosas que se le da a las etiquetas padre

y hay un montón de cosas que se le da a las etiquetas hijas entonces es importante que entiendan esta diferencia

entre padres e hijos que igual tranqui porque cuando veamos SS Ya lo vamos a entender Pero básicamente las etiquetas

que contienen otras etiquetas son los padres de esas etiquetas que contienen y las etiquetas que son contenidas como

esta por ejemplo que está siendo contenida por ul O sea la etiqueta Li está adentro de ul Entonces le es la

hija que está adentro de huele está adentro del padre así que nada esto sería todo por ahora ahora sí ya estamos

dispuestos y listos para avanzar con el próximo tema y estoy hablando de enlaces Vamos a aprender a utilizar enlaces para

crear si quieren varios archivos y tener un sitio web completo porque una cosa es tener una página web otra cosa es tener

un sitio una página web es un archivo un archivo es una página si tenemos un archivo punto html este archivo esto que

estamos viendo acá ya es una página web pero un sitio web es un conjunto de páginas web son muchos archivos juntos

que se conectan entre sí Y para eso tenemos que enlazarlos para eso utilizamos una etiqueta puntual que es

la del enlace Así que vamos a ver cómo funcionan los enlaces y hay todda una teoría entera de rutas y demás Así que

ahora comienza dar poquito la parte Hardcore pero tranquilos estos cursos no son para verlos una sola vez son para

verlos una o dos veces así como cuando ves una película y hay muchas veces que cuando la ves por segunda vez entendés

un montón de cosas que antes no entendías O como cuando ves series esto es igual con los cursos mi consejo

siempre es verlos dos veces una de entrada y aprender todo y llevar todo a la práctica y otra segunda vez cuando ya

se lo vieron completo por primera vez para repasar conceptos y entender cosas que antes por ahí no les quedaron claras

Pero bueno nada eso ya decisión completamente de ustedes aún así voy a intentar hacer el mejor curso posible De

hecho si está en YouTube ahora mismo es porque me salió bien Así que ni se preocupen por eso basta de hablar vamos

con la sección de enlaces Bueno vamos a arrancar primero el principal esta sección de elemento a

o enlaces dándole de vuelta acá en Explorer y dándole New file y vamos a crear enlaces pun html le damos enter y

se nos va a abrir acá esto que está acá lo vamos a copiar tal cual vamos a cerrar este enlace con control W esta

pestaña Perdón le vamos a dar en control V corta para pegar esto o pueden hacerlo manual no hay problema y esto que está

acá lo vamos a eliminar esto para tener ya la estructura Clara es decir tenemos la estructura de una página web para que

nos pueda abrir esto Ahora sí cerramos esto volvemos a abrir el servidor se nos va a abrir esta pestaña cerramos la

anterior acá ya estamos trabajando en el enlace y acá en vez de ponerle listas le vamos a poner enlaces guardamos y ahora