Curso de HTML y CSS desde CERO (Completo)
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
sí ya está estamos con nuestro entorno
de trabajo preparado bueno para arrancar
como ya sabemos los enlaces también se
pueden llegar a llamar hipervínculos De
hecho la a viene de la palabra ancle o
ancla es una la palabra clave
ancla pero básicamente es una metáfora
que así como por ejemplo un ancla en un
barco te mantiene en una ubicación
específica lo mismo sirve acá un ancla
justamente para que el usuario sepa
Hacia dónde ir a buscar un recurso nada
en fin la verdad es una definición
asquerosa no me gusta nada pud una
haberle puesto e o L la etiqueta que
vamos a ver ahora es a es esta etiqueta
de los enlaces se nos va a crear una
etiqueta completamente común Pero si acá
ponemos cualquier cosa cuando
actualicemos vamos a ver que solamente
se va a actualizar texto solamente texto
ustedes van a ver que en mi computadora
el texto se ve más grande de lo normal y
eso es porque yo tengo el zoom en ciento
y pico para que ustedes puedan leer y
ver bien todo lo mío pero si no el
código se vería así y la verdad que para
algunos es ilegible entonces por eso lo
subo a 200 por para que se vea un poco
más grande solamente por eso bueno en
fin a lo que voy es que acá tenemos un
enlace Pero yo lo que quieroo hacer es
poder cliquear okay cliquear Y que me
vaya a una página web bueno para eso
vamos a ver el primer atributo los
atributos justamente son características
de los elementos vieron las propiedades
en ccs bueno algo parecido pero esta vez
se ponen directamente en html es decir a
ver usemos la cabeza si estamos creando
una etiqueta la etiqueta lo que tiene
que hacer es redirigir a un enlace a un
lugar supónganse que vamos a hacer que
me redirijan a mi canal de YouTube este
que está acá es mi canal es youtube.com
baroid alto si yo quiero que mi canal de
YouTube se muestre tengo que crear una
ferencia de hipertexto básicamente
significa crear un enlace para eso se
utiliza la etiqueta el atributo perdón
href tamb bien Por ejemplo es un ejemplo
eh se puede definir por ejemplo el color
el tamaño las sombras solamente que no
lo hacemos desde acá lo hacemos desde
css Pero esto como es una funcionalidad
si lo tenemos que hacer desde acá porque
es algo que vuelve funcional a la
etiqueta no tiene que ver con el estilo
tiene que ver con hacerlo funcional
Porque si yo le doy click no me manda
ningún lado pero si yo quiero que me
mande a un lugar en este caso voy a
decirle Ey quiero que me mandes a a otra
cosa las comillas dobles son importantes
pueden ser comillas dobles o comillas
simples es lo mismo y acá dentro ponemos
la dirección si yo pongo youtube.com
barsy dealto vamos a hacer un espacio
hacia abajo de vuelta Aunque parezca que
sí y que esto me va a mostrar algo en
realidad no funciona si yo le doy enter
van a ver que ahora sí aparece que está
enlazado pero si yo le doy clic acá esto
lo que va a buscar es directamente una
ruta local va a buscar en mi en mi en mi
propia carpeta donde tengo alojado esto
a ver si Existe alguna carpeta que se
llame youtube.com Y eso no sucede no
existe ahora vamos a ver esto de los Si
queremos poner un enlace externo tenemos
que poner el
https do barra barra Ahora sí
actualizamos Y si le damos enter esto ya
me está mandando a mi cuenta de YouTube
volvemos para atrás y si ahora vengo acá
a esto que está acá y pongo por ejemplo
canal de YouTube Ahora vengo acá está
actualizado ven le doy enter y acá está
entonces de alguna forma lo que está acá
dentro lo que hace es definir este texto
que se va a ver Mientras que el enlace O
sea a dónde lo vamos a mandar es esto
que está acá seguramente ahora estás
viendo y diciendo Ah Mirá Qué
interesante Te recontra felicito todos
sentimos esa emoción alguna vez pero
todavía falta más hoy en día ya no es
necesario poner el https sobre todo si
estamos trabajando desde acá por lo
menos desde un servidor local para eso
componer esto es suficiente de tal forma
que si yo ahora vengo acá y le doy clic
acá Esto me manda YouTube Ven y no
necesité poner el https pero aún así hoy
por hoy se recomienda poner esto primero
por motivos de seguridad después por
motivos de posicionamiento Hay
muchísimas cosas así además aseguramos
que el enlace va a terminar acá y
definimos el protocolo o sea aunque ya
no sea necesario en html moderno poner
el https es una buena práctica dejar
esto O sea utilícelo de esta forma Hay
muchas formas de enlazar Okay páginas
web más adelante vamos a ver una sección
de rutas para que aprendan a ir hacia
donde quieran pueden moverse una carpeta
atrás una carpeta adelante eh ir a
archivos que están más atrás por ahora
lo que vamos a hacer es darle pantalla
completa y vamos a abrir el Explorer
vamos a copiar esto y pegarlo varias
veces apretamos control c y control b y
se pegan Okay vamos a cambiar el nombre
enlaces do y acá damos enlaces TR esto
que está acá vamos a crear Okay algo
para que podamos Navegar entre las
mismas páginas ya van a ver a que voy
vamos a venir al enlaces uno que es el
original y vamos a crear acá tres
enlaces para eso si quieren pueden
escribir la tecla a y darle enter y ya
esto se hace automáticamente por emet
así que ya se les posiciona el cursor
directamente acá para que escriban el
enlace en este caso voy a poner el
nombre del archivo enlaces acá me
aparecen varias opciones yo le voy a dar
acá segundo enlace okay Y acá abajo voy
a poner el tres y acá poner tercer
enlace qué jor es esto y para qué sirve
Bueno muy simple esto lo sacamos si
venimos acá vamos a ver que esto tiene
dos enlaces segundo enlace y tercer
enlace lo que está haciendo esto es
mandarme a las páginas web diferentes yo
por ejemplo acá Este es el enlaces html
el original me manda si le damos acá a
este otro archivo ven me acaba de mandar
enlaces 2. html y si le doy En tercer
enlace me acaba de mandar a la otra
página enlaces 3. html Entonces de esa
forma puedo moverme entre mis propias
páginas para eso voy a copiar esto
también tal cual y voy a venir a enlaces
2. html voy a pegarlo y voy a poner acá
enlace uno voy a poner primer enlace
Porque si yo ya estoy en el enlace dos o
sea esto que está acá es enlaces dos si
yo estoy entrando en enlaces dos no
quiero que tenga una opción para ir al
enlace dos Ya estoy en el enlace 2 tiene
que haber una opción para ir al enlace
uno y voy a venir enlace 3 y hacer lo
mismo voy a pegar esto segundo enlace y
voy a poner acá primer enlace y voy a
poner acá también enlaces normales
entonces de esta forma tengo todas las
páginas enlazadas entre sí si venimos al
navegador vamos a ver que ahora podemos
Navegar entre todos los enlaces ven este
que está acá es el original enlaces pun
html le damos clic acá y ahora Estamos
en otra página enlaces 2. html y ahora
le damos en tercer enlace y podemos
estar en en el enlace 3 y hacer
cualquiera de estas dos cosas es más les
voy a mostrar esto en el enlaces
original voy a cerrar el de listas Ahí
está en el de enlaces original acá voy a
escribir un h1 voy a poner esta es la
primer página AC voy a poner un p voy a
poner un Loren no no voy a poner ningún
Loren voy a poner Cómo se siente saber
lo básico de html Y si venimos acá y
actualizamos bien y si venimos al primer
enlace ya tenemos Esto bueno Esta es la
página ven que es Cómo se siente saber
lo básico de html esto es un párrafo y
esto es un enlace ahora voy a venir a la
página esto lo voy a copiar voy a venir
a la página dos enlaces dos y voy a
pegar esto y voy a poner esta es la
segunda página Felicidades estás en la
página dos y voy a copiar esto y pegarlo
en el enlace tres y voy a pegar esto que
está acá esta es la tercer página y acá
voy a poner felicidades esta es en la
página tres y esto lo voy a poner abajo
no Arriba voy a hacer Que aparezca abajo
acá abajo voy a hacer lo mismo acá
cortar esto y pegarlo abajo voy a esto
acomodarlo y esto pegarlo abajo y acá
también lo mismo pegarlo acá abajo y
ahora fíjense si entramos a la página
completa ya tenemos esto listo Esta es
la primer página Cómo se siente sabor lo
básico de html venimos acá esta es la
segunda página Felicidades estás en la
página dos y podemos Volver al primer
enlace ven primer enlace y de esta forma
nos movemos entre el primero y el
segundo y también tenemos el tercero
tercer enlace Felicidades está es en la
página tres Esta es la tercer página y
desde el tercer enlace podemos ver al
segundo o al primero entendés y de esta
forma podemos movernos entre páginas
esto es excelente Felicidades yast hasta
acá estás aprendiendo mucho Y esta es la
primer felicitación que les tengo que
hacer porque la realidad es que de las
cinco veces que los voy a felicitar Esta
es la primera es un super logro que
hayan llegado hasta este punto que
entiendan todo esto y que estén haciendo
lo que yo voy ha Endo a medida que lo
vamos haciendo no se olviden que la
programación y el desarrollo es
importante que todo lo que yo haga y
realice ustedes lo hagan también si yo
creo una página ustedes creen la página
porque la programación es un proceso
activo no pasivo ustedes pueden intentar
comprender lo que sucede cuando leen y
cuando ven lo que yo hago y cuando miran
Cómo enseño Pero la única forma de
aprender realmente es probando ustedes
haciéndolo ustedes escribiéndolo ustedes
y demás Así que muchachos los felicito
si acaban de crear su propio menú de
hecho esto que está acá vamos a darle
pantalla completa y abrir acá y vamos
Vamos a darle en New folder o sea nueva
carpeta y vamos a poner enlaces y esto
que está acá vamos a meter vamos a
arrastrar estos archivos estos tres
archivos a la carpeta enlace los tres
move también movemos todos de esa forma
enlaces es una carpeta completa yo puedo
venir acá Ahora sí voy a darle de vuelta
en Close server y lo voy a volver a
abrir porque fíjense que ahora me va a
tirar error porque no estamos en la
misma ruta cambiamos los archivos de
lugar Entonces tenemos que abrirlo de
vuelta ahora supónganse que ustedes lo
que quieren hacer es hacer que el enlace
se abra en otra pestaña Cómo pueden
hacer para eso bueno muy simple para eso
vamos a cerrar el enlace tres y el
enlace dos vamos a quedarnos con el
enlace uno vamos a crear un enlace abajo
y el enlace de abajo vamos a poner vamos
a poner una a y acá vamos a hacer que
haya un enlace que se abra en otra
pestaña enlace dos vamos a abrir el
mismo enlace el enlace 2. html y acá
ponemos segundo enlace pero se abre en
otra pestaña lo que acá lo vamos a sacar
ahora sí Lamentablemente voy a tener que
empezar a achicar un poco esto porque si
no no se llega a ver todo así que
acostúmbrate a ver la letra un poquito
más chica pero básicamente acá tengo a
segundo enlace a tercer enlace y acá
tenemos el segundo enlace pero que se
abre en otra pestaña una cosa que
tenemos que hacer para que esto no nos
pase como ya saben es darle en control
shift p Word wrap y le damos enter y ahí
se actualiza y se adapta al al tamaño de
mi pantalla si ustedes quieren que el
enlace se abra en otra pestaña lo que
tienen que hacer es agregarle la
propiedad llamada Target este atributo
Perdón dice ey dónde quieren abrir la
pestaña quieren abrirlo en la misma
página Este es el atributo que trae por
defecto se acuerdan que yo les dije que
todos los navegadores todas las
propiedades que le le dan a los
elementos html las autodefinen bueno el
valor por defecto de este atributo el
atributo target es self que lo que hace
ya o sea si ponemos esto así o si no lo
ponemos o si lo sacamos en el código
funciona Exactamente igual porque
internamente esto funciona con esto Qué
significa esto significa que los enlaces
se van a abrir en la misma página Yo
abro esto y no es que se me abre una
nueva pestaña no hace esto no hace eso
se abren y se mueven en la misma página
yo para hacer que no suceda eso en vez
de self en vez de guion bajo o sea piso
self tengo que poner Blank Y si
actualizo ahora si abro la pestaña hizo
que se nos abra la página en otra
pestaña Entonces si si nos movemos en
estos enlaces lo que hace es quedarse
acá pero si ahora le damos al tercero de
acá se abre en otra pestaña de hecho
para separarlos vamos a poner acá otra
cosa que es h2 enlaces Target Blank ahí
queda mucho más prolijo un h2 acá que va
a llamarse enlaces Ahí está Entonces
tenemos Esta es la primer página y vamos
a poner una web con enlaces no este es
nuestro h1 es una web con enlaces este
es nuestro h2 Cómo se siente saber lo
básico de html tenemos un párrafo y acá
tenemos dos enlaces que hace que se
muevan entre sí okay Y acá tenemos este
que está acá que es enlaces Target Blank
es un h2 Y tenemos otro enlace que se
abre en otra pestaña bueno así es como
funciona esta propiedad después tenemos
otras propiedades que acá si se fijan
nos tiran que son parent y self pero por
ahora no las vamos a ver Target Blank se
abre en otra pestaña y si no usan nada
es como si dijeran Target self que hace
que se abra en la misma pestaña un
último atributo que quiero que veamos en
cualquier elemento html ya que estamos
con atributos es title Okay si ponemos
este atributo el atributo title lo que
nos pide este atributo es información
sobre este elemento en este caso yo
puedo poner acá por ejemplo es subtítulo
de la página no Entonces cuando
actualizo vamos a ir al primer enlace
Acá está en este caso tengo que pasar el
mouse por encima de el segundo enlace si
paso el mouse por encima me dice
subtítulo de la página ven que se me
abre como este cuadradito con
información bueno eso lo hacemos con
title De hecho no solamente funciona en
los enlaces funciona en cualquier
elemento si yo por ejemplo vengo acá y
al h2 le pongo lo mismo en el h2 Cuando
paso el mod por encima me muestra
subtítulo de la página al h1 le puedo
poner un title que sea título de la
página paso el mouse por encima y título
de la página normalmente el title se
suele poner en las imágenes para que por
ejemplo si tenemos una imagen cuando
pasamos el mouse por encima de la imagen
la imagen nos diga De qué trata esa
imagen también los enlaces para que si
yo por ejemplo tengo un enlace yo le
puedo poner un title y digo enlace a la
segunda página Entonces cuando el el
usuario pase el mouse por encima le va a
decir Ey esto es un enlace a la segunda
página es como estamos dando información
de Hacia dónde va a ir cuando le dé clic
acá también lo solemos utilizar en los
formularios en algún que otro campo y a
veces en algunos botones por ejemplo un
botón de enviar formulario pero fuera de
eso son contadas las ocasiones en las
que se utiliza Más allá de eso es muy
bueno utilizar el atributo title Porque
por ejemplo las personas que son ciegas
cuando utiliza lectores de pantalla
porque no pueden ver la pantalla si
estamos por ejemplo en una imagen o en
un enlace va a leer esa etiqueta title o
sea estas tecnologías de asistencia leen
esta etiqueta title para que la gente
que no lo pueda ver no tenga problemas
al utilizarlo entonces la persona ciega
no solamente va a leer que dice segundo
enlace sino que va a saber que ese
enlace te manda por ejemplo la segunda
página otra cosa que tienen que saber es
que es una buena práctica por lo menos
en diseño hacer que cada elemento sea
reconocible por lo que es los enlaces si
se ven van a parecer subrayados por eso
cuando trabajen ustedes en css siempre
intenten que los enlaces se destaquen de
alguna forma porque si por ejemplo
ustedes en cc se hacen esto por ejemplo
este tercer enlace se va a ver
completamente negro no hay nada que
diferencie este enlace que está acá de
un texto como este sin embargo cuando le
damos clic acá nos manda al tercer
enlace por eso es importante que cada
elemento se pueda diferenciar entre Sí
por eso una forma muy común de
diferenciar enlaces es o por el
subrayado o por este colorcito Violeta
que tienen los enlaces o el azul también
puede ser es como separarlos de alguna
forma más adelante también vamos a ver
otros atributos Como por ejemplo el
atributo rel que ya son cosas más
avanzadas Pero por ahora quédense con
que esta es la forma de trabajar con
enlaces Okay esta es la forma en la que
ponemos una ruta local directamente
ponemos el nombre del archivo y cuando
queremos poner una página web de otro
lugar se pone https do bar barra y acá
el enlace por ejemplo instagram.com y
esto nos manda a Instagram pero nada eso
sería todo más adelante vamos a tener un
apartado especial okay en el que vamos a
ver las rutas porque es muy importante
ver las rutas pero ahora vamos con otra
sección chiquitita que es el tema de
elementos de bloque o sus elementos de
línea porque por ejemplo ustedes no se
pusieron a pensar porque eh felicidades
está por debajo de página Por qué
Felicidades estás en la página 3es
aparece acá y no aparece acá Por qué si
hay lugar Por qué no aparece acá Bueno
La pregunta es por qué Este sí aparece
acá o sea fíjense que segundo enlace
aparece al lado de primer enlace o sea
este que está acá no debería estar abajo
Por qué este enlace sí aparece al lado
en lugar de aparecer abajo pero por
ejemplo este que está acá no aparece acá
al lado porque Cuál es la explicación de
esto bueno esto tiene una explicación y
lo vamos a ver justamente cuando veamos
esta diferencia entre etiquetas de
bloque y etiquetas de línea porque ahora
vamos a necesitar ver esta diferencia
sobre todo cuando trabajemos con css
pero básicamente Es una diferencia que
es chiquitita de hecho va a durar muy
poquito la sección que vamos a ver a
continuación pero es importante para
después cuando veamos SS entender varias
cositas más vamos ahora mismo a ver esos
etiquetas de bloque versus etiquetas de
línea Bueno ahora lo que vamos a ver
justamente es el tema de las imágenes en
html voy a darle en esta pestañita y acá
voy a darle botón derecho New file img
html acá me carga esto lo mismo copio
todo esto lo pego acá imágenes tengo que
correr en realidad del servidor local
Ahí está y ahora sí Bueno básicamente
las imágenes se hacen con un tipo de
etiqueta que ahora vamos a ver el primer
tipo de etiqueta que se autocierre Okay
vieron que yo les dije que hay dos
formas de clasificar las etiquetas Más
allá de esto de etiquetas de blo y
etiquetas de línea porque en realidad yo
les dije que hay dos tipos de etiqueta
que son etiquetas de bloque y etiquetas
de línea pero también tenemos inline
block tenemos grid flexbox tenemos
muchas pero después tenemos otra forma
real de separarlas por lo menos en
cuanto a código Qué son las etiquetas
que necesitan tener un cont tenido
adentro por ejemplo la etiqueta párrafo
necesita que escribamos el párrafo la
etiqueta B necesita que escribamos qué
va a estar en negrita el título necesita
que escribamos Cuál es el título Pero si
yo les dijera la etiqueta imagen por
ejemplo necesitamos cerrarla img no
cerrarla y acá si ponemos algo qué se
vería se vería esto porque la etiqueta
imagen no la necesitamos cerrar entonces
Cómo podemos cargar una imagen bueno
Esto es fácil yo voy a descargar una
imagen como yo me voy a descargar esta
imagen que está acá esta no esta guardar
imagen como voy a entrar en el
escritorio tenemos el curso html y voy a
guardarla como dalto png bueno acá
tenemos Esto entonces La pregunta es
cómo puedo yo hacer para Mostrar la
imagen que me descargué que de hecho
aparece acá como ven Esta es la imagen
si queremos la podemos chequear la
podemos ver pueden ver este tipo que es
super fachero y extremadamente
importante en la industria de la
programación y el desarrollo y de hecho
este tipo casualmente tiene un canal al
que a ustedes están
suscritos Dale baja suscríbete acabo de
decir que están suscritos si yo me
equivocara estaría enseñándoles mal o
sea bueno cerramos esto yo para cargar
las imágenes tengo que utilizar Ahora sí
otro atributo que es el atributo source
se escribe src igual comillas y acá
ponemos Adivinen que ponemos Sí el
nombre de la imagen ponemos en realidad
la ruta de la imagen pero todavía como
no estamos viendo rutas nada en este
caso es lo mismo que poner el nombre de
la imagen así que ponemos dalto De hecho
acá ya nos salta ve dalto png vieron la
extensión esta extensión que está acá
que es la extensión de image preview si
le damos acá y le damos en Desactivar Yo
vengo acá Bueno ahora debería actualizar
la página ver vamos a darle en reload
Ahí está si yo pongo el mouse por en
encima no me muestra la imagen no me
está mostrando la imagen en cambio Si yo
esta la tengo activada Dónde está voy a
activar de vuelta enable Ah está
activada Ahí está activa Perdón van a
ver que si yo ahora paso el mouse por
encima ahora me está mostrando la imagen
bueno Esto es por el plugin que tenemos
justamente por eso le dije que nos lo
instalemos porque cuando trabajamos con
imágenes ponemos el mous por encima y
podemos ver cuál es la imagen que está
cargando por eso es importante ahora
sabemos que estamos accediendo
correctamente a la imagen si le damos en
control S y se guarda nada no nos va a
cargar ni porque no estamos
corriendo el servidor le damos en Go
Live y debería acá cargarnos a Acá está
si ponemos mal la ruta ustedes ponen mal
el nombre de la imagen no les va a
cargar y les va a cargar esto ya sabemos
que si queremos poner una imagen tenemos
que poner esto que está acá pero qué
pasaría si por ejemplo no carga la
imagen por algún motivo o porque se
borró del servidor o porque un error o
por algún motivo bueno el usuario tiene
que saber de qué trata la imagen incluso
para los asistentes de de los lectores
de pantalla no para la gente que no
puede ver en fin cómo hacemos para que
esto pueda verse cómo hacemos para que
alguien sepa De qué trata la imagen si
se nos rompió si pusimos mal el enlace
que no debería pasar pero bueno pero qué
pasa cuando no se puede ver la por x
motivo para eso tenemos que utilizar dos
cosas primero es la etiqueta alt que es
una etiqueta que básicamente es eh se
llama acá tenemos la descripción ves
Pero básicamente alt viene de
alternative Por qué Porque nos permite
escribir un texto en caso de que la
imagen no cargue si yo acá por ejemplo
le pongo dalto hablando refero actualizo
y acá me va a decir esto y esto es un
texto que solamente va a cargar voy a
cerrar esto Ahí está es un texto que
solamente va a cargar si la imagen no
carga correctamente si yo a esto le doy
o y actualizo ahora vamos a darle en
control menos para que lo puedan ver
bien Ahora el texto ya no aparece el
texto alt no necesita aparecer porque es
un es un texto que nosotros le decimos
al navegador Ey este texto mostrámelo en
caso de que no cargue la imagen si la
imagen carga no me lo mostrás De hecho
también nos sirve para posicionar la
página web si ustedes van a Google y
buscan una imagen este atributo que está
acá que es alt describe completamente De
qué trata la imagen es importante Por
ese motivo también hasta para el seo
porque es una buena práctica para que
nuestra página posicione mejor en los
motores de búsqueda que nosotros la
definamos porque cuando busquemos en
Google dalto hablando refachera esta
imagen es la imagen que va a salir y de
hecho otra más que podemos poner es la
etiqueta title en este caso podemos
poner title y esto nada ya saben es
cuando ponos el mouse por encima nos
dice algo por ejemplo el dalto ent ahora
pasamos el mous por encima y ahí nos
dice el dalto Ven y si la imagen no
carga y tenemos el título y la imagen
ponemos el m por encima y nos dice el
dalto Entonces nada esto en este caso la
voy a sacar la etiqueta titles porque no
me sirve voy a poner esto correctamente
así más o menos es como uno trabaja con
imágenes son etiquetas que se abren una
sola vez y no necesitan cerrarse porque
se auto cierran este texto se muestra en
negrita Por qué Porque es un negrita
adentro de un párrafo y abajo se muestra
esto que es lo que pusimos acá que está
suelto sin sin etiquetar de ninguna
forma pero qué pasa si nosotros No
cerramos la etiqueta el navegador no la
va a cerrar por nosotros esta es la
diferencia también entre este tipo de
etiqueta porque la etiqueta imagen por
ejemplo nosotros no necesitamos cerrarla
por eso se llaman self closing tags
porque se autocierre a sí mismas ahora
la pregunta es cómo podríamos hacer si
por ejemplo nosotros tuviéramos que
colocar una imagen okay que en vez de
estar acá la imagen en vez de estar acá
esté adentro de una carpeta voy a crear
una carpeta llamada imágenes nosotros
cuando tenemos 300,000 archivos le vamos
a dar en mover Ahí está van a ver que
ahora sí ya la imagen me va a dejar de
cargar Okay si ahora le voy a dar en
alto ya la imagen me deja de cargar ya
no se muestra porque ahora no está en la
misma carpeta ahora está en otra
dirección está en otro lugar y esto es
normal porque nosotros cuando creamos
páginas web tenemos muchísimos archivos
Si todos los archivos los tuviéramos ad
dentro de una misma carpeta es una mala
práctica rompe un montón de formas de
trabajo es es nefasto no se puede buscar
tenés 30,000 archivos te puedes mandar
un montón de no se hace en cambio
nosotros lo que hacemos Es crear
carpetas y separar todo por diferentes
carpetas y con diferentes estrategias
ahora no vamos a hablar de esas
estrategias pero lo que solemos hacer es
separarlo una forma muy común por
ejemplo es poner las páginas html a la
en la ruta principal y después tenemos
una carpeta con imágenes y ahí van todas
las imágenes una carpeta con javascript
y ahí va todo el javascript una carpeta
con css y ahí van todos los que son
archivos css en realidad se hace más
profundo si Incluso se se usan muchas
más carpetas pero solamente para que lo
entiendan no a nivel muy básico suele
hacer mucho esto no de Separar en
carpeta por tipos de contenido Entonces
eso es lo que se hace entonces Cómo
podemos acceder por ejemplo a una imagen
o una ruta o o no solamente esto también
funciona con el laces que ahora lo vamos
a ver en el próximo capítulo y es cómo
accedo a elementos en este caso a a
imágenes pueden ser audios también
pueden ser videos pueden ser enlaces o
páginas que están en otros lugares en
otras rutas en otras direcciones están
una carpeta atrás una carpeta delante
están en otro servidor Cómo hago para
acceder a estos contenidos bueno eso lo
vamos a ver en la siguiente sección
rutas en html y no solamente en html
porque son rutas que aplican en html en
css en javascript una forma de trabajar
con rutas Así que vamos a
ver Bueno ahora lo que vamos a ver va a
ser el tema de las rutas es bastante más
simple lo que parece pero sí es
importante dedicarle una sección
específica porque siento que ocupa lo
mismo que lo que podría ocupar otra
sección o sea es muy fácil también pero
es o sea por ahí si me pongo a hablar de
no sé imágenes y me explico me pongo a
explicarles sobre rutas va a ocupar lo
mismo hablando de rutas que lo que lo
que voy a hablar de imágenes entonces
termina siendo como una sección de
imágenes pero hablas de rutas entonces
por eso preferí separarle en otra
sección ap parte eh Porque aún así
Considero que se la merece para comenzar
tenemos dos tipos de rutas las absolutas
y las relativas las rutas absolutas son
esas rutas donde ponemos algo y es
absoluto desde donde se lo mire es un
recurso que está ahí Y está ahí si yo
por ejemplo tengo un enlace No yo quiero
ir a Instagram a dónde voy voy a
Instagram com si yo estoy des un celular
des una computadora va a ser lo mismo
voy a entrar a Instagram Quiero entrar
por ejemplo a un video mío de YouTube
quiero verme este curso de python que es
literalmente un completo desquicio es
creo que de los mejores cursos que tengo
en el canal es una locura este curso le
doy en botón derecho copiar URL del
video y se lo comparto a todos mis
amigos Pero bueno ese es otro tema y
esto que estamos viendo acá esto ya es
una URL pero es absoluta Esta es una
dirección absoluta Por qué Porque no
importa desde dónde entremos no importa
En dónde estemos siempre haciendo
referencia de a esto vamos a obtener
esta página con mi video de python
Entonces vamos a hacer un ejemplo vamos
a venir acá y poner Open file vamos a
poner rutas html yo pongo un enlace Okay
y pego esto yo sé que este este enlace
me va a llevar a curso de python
entonces vengo acá lo voy a correr en el
puerto 5500 de vuelta en el servidor y
yo sé que si le doy click acá Esto me va
a mandar a mi curso de python porque es
un enlace absoluto es una ruta absoluta
Esa es la definición correcta ruta
absoluta ahora si yo por ejemplo quiero
mandar a el enlace que está en listas
qué pasa con el enlace acá si yo estoy
acá o sea si mi si mi si este elemento
llamado listas quiero redirigir lo Qué
hago yo vengo acá y voy a poner otro
enlace que va a ser a voy a poner listas
html voy a poner apartado de listas Acá
está el apartado de listas le doy acá
click y me carga esto hasta acá está
perfecto pero qué pasa si ahora este
archivo rutas en vez de estar acá lo
vamos a meter ad dentro de la carpeta
imágenes Este es el documento acá lo
tenemos a este archivo ahora vamos a
probarlo de vuelta vamos a correr el
servidor local porque lo movimos de
lugar yo entro al curso de python y
entra al curso de python pero si de
repente entro al apartado de listas Ah
ya no está encontrando el archivo Por
qué no lo está encontrando porque esto
es una ruta relativa no es una ruta
absoluta Por qué Porque dependiendo de
donde estoy lo puedo acceder de una
forma u otra el archivo este llamado
rutas html está dentro de la carpeta
imágenes o sea que solamente va a poder
acceder a los archivos o a las carpetas
o a las imágenes que también estén
adentro de imágenes Porque si quiere
acceder archivos que estén por fuera
tiene que escribirlos de otra forma
entonces dependiendo de dónde se
encuentre mi página tengo que llamar a
imágenes archivos etcétera de otra forma
porque si mi página se encuentra la
misma carpeta lo llamo así nom más si se
encuentra una carpeta más adelante tengo
que llamarlo de otra forma si se
encuentra una carpeta más atrás tengo
que llamarlo de otra forma entonces son
rutas relativas por eso porque
dependiendo de dónde esté cada elemento
tenemos que hacer formas diferentes de
llamarlo en cambio la ruta absoluta no
importa dónde tengamos la página no
importa en qué carpeta esté mi archivo
siempre va a ser lo mismo nosotros
cuando trabajamos eh redireccionando a
otras páginas Okay lo solemos hacer con
rutas absolutas Por qué Porque hay una
forma de acceder a la ruta absoluta de
un archivo desde nuestra computadora
pero no es una buena práctica y no es
correcto todo Siempre se suele acceder
de forma relativa tenemos que saber
dónde está cada cosa y saber acceder la
en programación después se trabajan con
variables y muchas cosas más Pero ese no
es el tema lo que tenemos que hacer acá
en realidad es trabajar con rutas
relativas ahora la pregunta es Okay okay
Ya está ya entendí lo que es una ruta
absoluta entendí lo que es una ruta
relativa La pregunta es Yo sé que
dependiendo de dónde estoy tengo que
llamar a un archivo de una forma o tengo
que llamarlo de otra bueno tenemos tres
escenarios está más arriba o sea más
carpetas adelante o está más atrás más
carpetas atrás por ejemplo tenemos
listas html si entramos a imágenes
tenemos rutas html O sea que si desde
rutas queremos Llamar al archivo listas
tenemos que retroceder una carpeta para
atrás cómo hacemos eso bueno para eso
ponemos punto punto barra y lo que
hacemos con esto es decirle Ey volve una
carpeta para atrás ven en este caso si
estamos acá haciendo punto punto barra
estamos diciendo esto tuc y volvimos
para atrás una carpeta Entonces ahora lo
que hicimos es vamos de vuelta punto
punto barra y volvimos una carpeta atrás
Ahora podemos hacer más cosas podemos
seleccionar el archivo imagen el de
listas o el de párrafos y encabezados yo
le voy a dar en listas actualizo y si
ahora vengo acá y le doy enter ahora sí
me mandó al apartado de listas porque
ahora sí tenemos enlazado esto
correctamente ahora qué pasaría si fuera
al revés supónganse que yo estoy acá el
archivo lo voy a poner acá okay fíjense
que si ahora ahora este archivo lo voy a
correr de vuelta en el servidor porque
de vuelta lo cambié de posición vamos a
correrlo si yo quiero entrar Ya Bueno
ahora Cómo podemos hacer si por ejemplo
tenemos rutas acá pero ahora la la eh
listas está adentro de imágenes si
nosotros corremos esto no nos va a
cargar porque nos va a tirar error si
hacemos lo de antes dos puntos barra
barra y corremos tampoco nos va a cargar
lo que tenemos que hacer es decirle En
qué carpeta queremos entrar en este caso
fíjense que acá ya nos tiran un par de
opciones tenemos que entrar a la carpeta
imágenes le damos clic y tenemos que
entrar a la a las listas pun html le
damos clic ya pusimos correctamente la
ruta de hecho si pasamos el mous por
encima Ah ya no lo estamos viendo porque
no es ninguna imagen no es ninguna
imagen es un archivo html qué boludo que
soy De hecho acá tenemos esto okay Si
venimos acá Okay ahora sí y entramos al
enlace ahora me está volviendo a mandar
al archivo listas html Esa es la forma
de acceder a los archivos de forma
relativa de esta forma retrocedemos una
carpeta si estuviera dos carpetas atrás
retrocedemos dos carpetas una dos ahora
si está dos carpetas adelantes ponemos
el nombre de la primer carpeta si
hubiera otra carpeta ponemos el nombre
de la carpeta dos y si el archivo
estuviera ahí adentro ahí escribimos el
nombre del archivo pero si no esta es la
forma de movernos cuando está en la
misma carpeta solamente ponemos el
nombre del archivo cuando está una
carpeta atrás lo ponemos así si
estuviera dos carpetas atrás lo ponemos
así si estuviera una carpeta adelante lo
ponemos así si estuviera dos carpetas
adelante lo ponemos así Esta es la forma
en la que normalmente nosotros
trabajamos con rutas de archivos y
también sirve para todo También sirve
para imágenes si yo por ejemplo ahora en
vez de hacer esto quisiera llamar a una
imagen yo acá voy a tener la imagen okay
Y me preguntar Dónde está si yo de
vuelta le doy en dalto png la imagen no
me va a cargar voy vol para atrás la
imagen no me va a cargar voy a darle en
Word wrap rap así de vuelta me baja la
imagen no me va a cargar pero si yo de
repente ahora sí me meto en la carpeta
imágenes y me meto en dalto png ahora
actualizo y ahí sí me debe cargar porque
la carp la imagen dal alto. png está
dentro de la carpeta imágenes entonces
to que decirle al programa Ey Métete a
la carpeta imágenes y después accedé al
archivo de alto.png eso es todo ahora mi
consejo es prueben ustedes yo siempre lo
que digo a toda la gente que sigue mis
cursos entonces prueben agarren imágenes
agreguen agreguen imágenes por todos
lados agreguen carpetas agreguen muchas
carpetas métanse en jerarquía Pónganse
una carpeta detrás y prueben creen un
archivo y ese archivo tiene que acceder
a múltiples recursos puede ser un enlace
pueden ser imágenes pero las imágenes no
tienen que estar en la misma carpeta
tien que estar una carpeta arriba dos
carpetas arriba tres puede estar una
carpeta abajo una carpeta atrás Es más
también lo que puede hacer es podemos
salirnos de una carpeta y entrar a otra
carpeta por ejemplo es más fácil si
desde la carpeta enlaces voy venir a laa
a la carpeta enlaces y voy a darle new
file enlaces 5. html acá la estructura
si yo quisiera acceder a la imagen esta
imágenes de alto Cómo puedo hacer para
acceder la Bueno fíjense qué fácil si yo
acá le doy enter si Yo corro el servidor
vamos a correrlo de vuelta Van a ver que
me está tirando un error porque la
imagen no me carga Cómo tenemos que
hacer Bueno a ver estamos en la carpeta
enlaces este archivo está dentro de la
carpeta enlaces y la imagen la tenemos
adentro de la carpeta imágenes Entonces
qué tenemos que hacer primero tenemos
que salirnos una carpeta para atrás
Después tenemos que meternos en la
carpeta imágenes y ahí podemos agarrar
la imagen primero nos salimos para atrás
Después nos metemos en la carpeta
imágenes y ahora agarramos la imagen
actualizamos y ahí nos cargó
perfectamente la imagen prueben con esto
jueguen con más ejemplos diviértanse
muchachos y ahora sí vamos con la
siguiente sección porque rutas
evidentemente ya Lo acabamos de dominar
ahora lo que tenemos que continuar
viendo es formularios normalmente en
este punto yo les enseñaría sobre tablas
si bien todavía se siguen utilizando a
nivel semántico para mostrar datos que
lo vamos a ver más adelante no es un no
es el mejor momento del curso en el que
les puede enseñar tablas entonces creo
que es un elemento que deberíamos
agarrar y tirar para la sección de html
avanzado Por más que no sea avanzado
como tal la vamos a tirar para html
avanzado y la vamos a trabajar bien
después bien trabajada y ahora vamos al
apartado de formularios que es el último
apartado de todos de esta sección de
html básico después ya arrancamos con
css básico así que bueno vamos ahora sí
con la sección de
formularios bueno ahora vamos a ver
formularios que son creo que de las
cosas más importantes de desarrollo web
y estamos hablando de formularios
recuerdan que al principio del curso yo
les dije que todo estaba hecho a base de
de solicitud y respuesta es decir
petición respuesta o acción y respuesta
como acción y reacción acción y reacción
ahora vamos a ir todavía una capa de
extracción más arriba los formularios
Qué son eh básicamente la forma en la
que tenemos nosotros de pedirle datos al
usuario es una forma en la que tenemos
para decirle e Dame tu nombre Dame tu
apellido Dame un mail Dame un color
Dependiendo el tipo de dato que
querramos recopilar del usuario
utilizamos un tipo de input diferente si
queremos por ejemplo un input que nos
diga acepta los términos y condiciones
ponemos un tipo de input que es la
casilla esa si le decimos Dame tu nombre
le ponemos un campo de texto para que
escriba el nombre Si queremos decirle
Che Dame el color ponemos un campo para
que nos dé un color si le decimos de
repente decime un Rango del un al 100 y
le ponemos una Barrita para que nos diga
un Rango son ejemplos todos estos son
tipos de inputs son tipos de datos que
se le piden al usuario Por más que en el
fondo no dejan de ser siempre el mismo
dato que es un texto una cadena de texto
nada es como que en html te lo formatea
para que parezcan tipos de datos
diferentes porque a que todos sean
textos todos sean textos entre comillas
dobles o simples tod sean cadenas de
texto después lo van a ver cómo trabajan
en javascript lo que hace esto es
formatear selo de una forma muy
específica es decir las fechas se las
ponen como fechas el texto se los pone
como texto los mails se les da un
formato mail el color se usa el formato
del color entonces son cosas que por más
que no veamos nos sirve para facilitar
la interfaz No porque si tuviéramos
nosotros que andar creando y
personalizando los inputs para cada dato
nos volvemos locos html trae como unos
presets por defecto que son los que
podemos usar para pedirles diferentes
datos Así que vamos a crear unev archivo
que se va a llamar forms. html voy a
cerrar absolutamente todos acá Acá tengo
la estructura básica acá voy a ponerle
forms o formularios ahí está y para
arrancar se utiliza la etiqueta form
esto es un bloque es decir es una
etiqueta de bloque Construye un
formulario yo voy a darle en Go Live a
ver qué pasa y acá me acaba de cargar
parece que no cargó nada parece que no
sucedió nada pero si venimos al código
le damos en inspeccionar elemento acá
vemos que ya nos está tomando el
formulario ahora no hay nada porque
nosotros lo que tenemos que hacer con
este formulario es definir Cuáles son
los campos de texto que van a tener qué
es lo que le vamos a pedir a usuario
bueno ahora sí Acabo de cerrar esto para
que podamos de vuelta ver todo de forma
más amplia y lo que tengo acá es otra
etiqueta que vamos a ver ahora que es la
etiqueta input que esta es la forma en
la que vamos a decirle Ey Por favor dame
un dato Este es el input y después
tenemos que decir Ey qué tipo de input
vas a ser type en este caso type es para
de tipear no de tipo qué tipo queres
poner botón checkbox color day dat Time
estas son todas las opciones que nos
tira visual Studio code por defecto Okay
que las ordena de forma alfabética
fíjense que arranca con la b e f g y así
no a orden de forma alfabética el más
común de todos es el input input es el
input type text Este es el más común de
todos Okay si yo actualizo esto vamos a
ver que me acaba de cargar esto que está
acá y ahora sí podemos escribir texto
acá a ustedes ahora mismo habrán dicho
Ah se habrán puesto refic se habrán
puesto rec contentos yo sé que sí yo sé
que sí no dejaste tu like todavía no te
suscribiste Y estás Estás sonriendo y no
te suscribiste si te suscribiste te vas
a sentir bien con vos mismo te lo puedo
asegurar pero si no te suscribiste sos
del demonio deberías hacerlo ahora mismo
a lo que voy que acabamos de crear una
etiqueta Okay que lo que va a permitirle
al usuario es tipear texto por eso está
este type porque le vamos a decir okay
el usuario qué es lo que va a tipear
bueno va a tipear texto Si venimos acá y
creamos otro input podemos decirle al
usuario Ahora no quiero que tipe es
texto quiero que tipes por ejemplo color
entonces actualizamos y me va a cargar
esto que está acá esto que está acá por
ejemplo nos pide que seleccionemos un
color Entonces al a mí cuando yo reciba
la información del usuario me va a
aparecer un color en vez de color
también puede ser un vamos a checarlo un
poquito porque está muy grande Ahí está
también por ejemplo lo que puedo pedirle
es que me dé submit submit es el botón
de enviar que por defecto viene en
enviar pero nosotros lo podemos cambiar
y le podemos poner por ejemplo value y
le podemos poner por ejemplo mandar form
Ven y se actualiza y acá dice mandar
form value es la propiedad que en submit
aparece acá pero en otros en otros input
por ejemplo es lo que tiene adentro V
que después lo podemos borrar Si
queremos ahora vamos a ver a llegar a
eso Porque es importante este atributo
vamos a borrarlo en ambos casos Okay
pero yo les voy a mostrar los más
comunes el primero es text que es el más
común de todos otro es email Okay que es
igual que un text solamente que en lugar
de hacer texto nosotros cuando
intentemos enviar el formulario nos va a
decir que no lo podemos enviar hasta que
esto no tenga un formato de email yo por
ejemplo vengo acá escribo y si yo acá
escribo esto y le doy en enviar fíjense
que me va a decir tenés que incluir un
signo de arroba incluo un aroba me va a
decir incluye texto detrás del signo
aroba incluso texto le doy en enviar y
ahora sí se pudo enviar por qué Porque
ahora sí tenía el formato de email
básicamente es lo mismo que el input
type text Solo que me está intentando
verificar que yo ponga texto no que
ponga eh un formato de email También
tenemos el password el password Okay es
eh básicamente lo mismo que los dos
anteriores Solo que este el password
cuando nosotros escribimos algo se va a
ver de esta forma que de hecho uno de
los trucos que yo enseñé en el curso
Cuando hice trucos que solamente los
programadores sabemos hacer es si
ustedes quieren ver la contraseña Qué
hacen ponen botón derecho le dan en
inspeccionar y hacen que esto pase de
ser password a text entonces ahí
automáticamente esto puede revelar la
contraseña no Entonces es bastante
icónico tenemos entonces texto email y
password bueno Y submit tenemos también
otro que se llama checkbox que
básicamente esto es esto es para tildar
o destildar Okay por ejemplo aceptas los
términos y condiciones después tenemos
el radio que es parecido al checkbox
solamente que el radio lo que hace es
permitirnos seleccionar una de varias
opciones es decir yo por ejemplo agrego
dos radio y le puedo dar en una o en
otra ahora porque no lo tengo
configurado así pero después esto se
configura para elegir una opción de
entre varias estos son los tipos de
inputs más comunes que hay después
tienen otro que también es muy común que
lo vamos a agregar acá abajo del radio
file que esto es lo que nos permite
seleccionar un archivo le damos en
seleccionar archivo acá por ejemplo
tengo un archivo de codigo. pik que
utilicé para para el curso de git le
damos acá y se acaba de seleccionar este
archivo si yo le doy en enviar se acaba
de enviar el formulario con todos los
datos fíjense pongo esto acá pongo el
mail Okay pongo acá la contraseña hago
lo que toca hacer selecciono una archivo
por ejemplo Y le doy en enviar y ahora
lo que acaba de pasar bueno justo ahora
no pero lo que tenemos que configurar es
que cuando nosotros le demos en enviar
fíjense que todos los datos que están
adentro de este formulario es decir
todos estos Campos van a recopilar todos
los campos que teníamos guardados y se
van a enviar a un servidor o algo que lo
procese y haga algo Porque si yo quiero
recibir los datos del usuario es para
hacer algo por ejemplo voy a querer
verificar que tengo una cuenta en mi
plataforma entonces después lo logueo y
y dejo que inicie sesión o por ejemplo
si de repente está estamos trabajando
con mensajes voy a recibir el mensaje
guardarlo en mi base de datos para que
después otra persona pueda ver el
mensaje Por ejemplo entonces con esto lo
que hacemos Es definir Cuáles son los
datos que nos tiene que dar el usuario
para que con esos datos después podamos
hacer algo y después tenemos el otro que
es el último que es más importante
porque después Tenemos un montón Tenemos
un montón pero el otro que es importante
y es Útil es el de date nos pide la
fecha fíjense que acá me dice fecha
Entonces le damos acá y por ejemplo
selecciono a ver cuándo es tu fecha de
cumpleaños entonces s en mi caso el 23
de mayo por ejemplo no Entonces esta es
la fecha en la que yo cumplo años enviar
y se envían los datos después como ya
saben cada uno se puede agarrar y
personalizar por ejemplo vamos a venir a
YouTube esto que están viendo acá es un
input Pero qué pasa YouTube lo
personaliza y lo hace recont contralo
esto que está acá es un botón le damos y
es como está buscando le damos en
acceder y esto también es un input del
tipo texto porque nos está pidiendo que
tipem texto ahí está ahí me cargó ven me
pidieron los datos para qué me pidió el
dato me pidió un un dato para procesarlo
verificar si existía ese correo y cuando
existe ahora me dice ingresa tu
contraseña y acá tengo esto es un input
type password y acá podemos verificar es
un input type password si le cambiamos a
text vamos a ver nuestra contraseña pero
lo vamos a dejar en password pero nada
ese básicamente es el funcionamiento de
los inputs y por arriba Cómo se crean
formularios y campos de texto etcétera
hay cuatro Okay cuatro atributos Además
del type de un input que son muy
importantes que los conozcan uno es el
required el required lo que hace es
obligar al usuario a escribir algo si yo
por ejemplo no le pongo el requir y esto
le doy en enviar el archivo se envía
todo lo que tengo lo envía yo le pongo
required cuando envíe esto me va a decir
Ey este campo lo tenés que completar y
si no lo completo no me va a dejar
enviar el formulario escribo algo y Ups
se acaba de mandar Entonces yo por
ejemplo le doy en required a este y a
este le estoy diciendo Ey este campo y
este campo son obligatorios le damos en
enviar y me va a decir completé este
campo lo completamos y ahora me va a
decir No tampoco lo puedes enviar tenés
que enviarlo como si fuera un mail a que
le completemos el campo con el formato
que tiene que tener en este caso es un
mail tiene que tener formato de email es
una fecha tenemos que escribirlo yo por
ejemplo le doy en required escribo el
mail ta ta ta le doy en Enviar no me
deja me dice que complete este campo le
damos acá seleccionamos esto ponel
enviar y ahora sí se envió porque ahora
me seleccionó la fecha después tenemos
otro campo otra otro atributo Perdón una
cosa que no sé si sabían eh es que jamás
en mi vida Me drogué Jamás en mi vida
fumé un cigarrillo Y jamás en mi vida
tomé una gota de alcohol si lo hacés una
vez está mal igual No no va a estar
mejor porque lo haces una vez no porque
lo hago una vez cada tanto claro o sea
le peg un tiro en la piel a una persona
pero no le le pegué un tiro una vez cada
tanto Entonces qué importa no le metí un
cabezazo en la nariz a mi mamá pero la
verdad que lo hice una vez cada tanto
Entonces no está mal si algo está mal
está mal siempre okay No no va a estar
menos mal ahora que la sociedad
considere que es aceptable tomar cada
tanto a tema suyo que la sociedad
considere que es aable drogarse o ya
tema suyo pero que está mal o sea si
está mal está mal igual no nos vayamos
de tema porque yo me pongo a hablar en
los primeros cursos de html y css yo no
paraba de hablar aprendí porque me me
insultaron mucho por eso viste hay mucha
gente que le encantaba pero a muchos me
decían dalto cerrar el Quiero
aprender enfocate en enseñarme pa Y eso
hacía me enfocaba en enseñar después así
que eso estoy haciendo ahora Perdón ya
vimos Estos tipos de de inputs vimos el
atributo required y ahora tenemos dos
atributos más tenemos tres pero vamos a
ver dos un atributo es el atributo name
que este es importante porque este es
como un identificador de los inputs
nosotros cuando le mandamos un campo al
servidor porque Qué pasa ya sabemos que
los datos lo que hacemos Es procesarlos
algo va a recibir estos datos y los va a
procesar entonces lo que solemos hacer
es definir Cómo se va a llamar este
campo En este caso por ejemplo acá va a
ser el username Entonces cuando el
servidor reciba los datos de este input
si yo escribo acá cuando yo le envío
esto al servidor le va a llegar que este
campo se llama username entonces va a
poder decir Ey vamos a verificar si el
campo username es correcto pero para eso
tenemos que asignarle un nombre porque
si no no tienen nombre y no es correcto
la forma de identificar inputs es con
esto con el name no no podemos tener más
de un input con el mismo name porque no
porque son identificadores es la forma
en la que el servidor va a decir cómo se
llama este campo el nombre de este campo
es username el name de este campo es
email por ejemplo Entonces cuando yo
vaya al un lenguaje de programación voy
a agarrar y decir voy a agarrar el campo
llamado username y lo voy a mandar al
servidor para verificar que haga tal
cosa voy a agarrar el campo de email lo
voy a validar y después voy a hacer una
comprobación para poder para poder tomar
la referencia de esos Campos le ponemos
esto es decir si queremos acceder a lo
que el usuario escribe tenemos que
acceder por su nombre el nombre lo
ponemos acá después con javascript lo
más común Igualmente es por ejemplo
hacerlo en la clase o por el ID o por
otras referencias pero es una buena
práctica hacerlo por name porque es el
identificador natural en html de cada
input después tenemos otro atributo que
este es un atributo visual es decir es
visible los otros dos no porque el
require es un atributo de funcionalidad
Okay que este que está acá ven es un
tema de que me no me deja enviar el
campo hasta que algo esté completado
Entonces es un tema de funcionalidad el
name es un tema de configuración interna
no para mí para el desarrollador Pero
tenemos el Place holder Okay que el
Place holder vamos a abrar este campo
acá el Place holder lo que hace es
escribirnos un pequeño texto que
desaparece cuando el usuario arranca
escribir escribe tu nombre Entonces en
este campo dice escribe tu nombre
arranco escribir y se desaparece el Play
holder ahora borro todo Ahí me vuelve a
aparecer el Play holder eso es el Play
holder es un texto que normalmente se
usa para dar un ejemplo de lo que hay
que escribir por ejemplo acá se puede
poner escribe tu nombre se puede poner
your name por ejemplo que es más cortito
o se puede poner un ejemplo e John por
ejemplo el gran nombre John do esto es
un ejemplo no entonces acá ponemos algo
que dice e acá tenés que poner tu nombre
Okay dame un ejemplo el ejemplo es John
d bueno y después tenemos el último que
es value pero por ahora no lo vamos a
ver okay pero básicamente value es lo
que va a recibir el servidor si después
en un lenguaje de programación queremos
acceder a lo que el usuario escribió eso
es el value yo por ejemplo acá le doy en
value Hola cuando carguemos el
formulario acá me va a decir ica vamos a
poner al costado ven si yo por ejemplo
acá pongo tat Esto me va a cargar con
esto Porque si nosotros queremos decir
por ejemplo Ey pone tu nombre Lucas
dalto y le damos en enviar el servidor
lo que va a recibir va a ser ese Lucas
dalto que escribimos ese Lucas dalto se
va a guardar en value porque el value se
almacena acá pero es algo que no se
tienen que enroscar es algo que cuando
vean javascript lo pueden chequear Okay
no es el momento Así que después eso se
lo dejo ustedes para que lo vean pero
nada los anteriores sí son más
importantes por lo menos para que
entiendan ahora el name que es el
identificador el required que es para
darle funcionalidad de que se tia que
completar Sí o sí de la forma en la que
se especifica en html el Play holder
para escribir como un texto que cuando
arrancamos escribir se desaparece
obviamente no todos tienen Play Hold
holder o sea por ejemplo en el file si
ponemos Play holder y no me va a cargar
nada porque no puede haber un play
holder no todos los inputs tienen Play
holder pero sí eh los que son por
ejemplo así que tenemos que completar
con texto otra cosa que también se puede
hacer que yo directamente no la
recomiendo Es poner un mínimo y un
máximo si yo por ejemplo quiero decir Ey
acá por ejemplo tengo required no
required esto que está acá no me deja
enviar el archivo pero pongo a y lo
envío pero seamos sinceros Yo acá estoy
pidiendo un nombre quiero que una
persona me de su nombre Qué persona se
llama a nadie yo sé que el nombre un
nombre tiene por lo menos tres letras
entonces yo voy a poner el atributo
minan leng y voy a poner tres Entonces
de esa forma yo vengo acá y pongo a y no
me lo envía pongo B no me lo envía De
hecho acá me dice aumentar la longitud
del texto a tres caracteres como mínimo
no es como algo que pondría siempre Es
depende el caso depende de la situación
y demás acá en form por ejemplo También
tenemos que poner action o tenemos que
poner un meod por ejemplo method post
para que se envíe a través del método
post pero son cosas que si Les explico
ahora cre que no van a entender porque
es al pedo esto ya es para trabajar con
por ejemplo con lenguaje como javascript
que reciben esta información hacen algo
o la preparan para enviarla a otro
servidor backend pero son cosas que
Repito no van a entender mucho y se lo
puedo explicar con manzanitas porque hay
muchas cosas avanzadas que les expliqué
que igual se tenían que ver más adelante
y aún así la entendieron porque explico
muy bien Yo soy una bestia explicando
pero me parece innecesario aún así ya lo
veremos más adelante a su Debido tiempo
así que nada esta fue la sección de
formularios Así es como solemos trabajar
o crear formularios y terminamos con la
sección básica de html Ahora sí voy a
callarme la boca y arrancar con el
apartado de css que ahora sí Ahora vamos
a aprender a darle estilo a estos
elementos de bueno gente
Felicidades por completar esta sección
completa de html dije que los iba a
felicitar cco veces vamos con la
siguiente sección que es la primera de
todas las secciones de css bueno en este
caso vamos a ver la forma de enlazar ccs
arranquemos
bueno gente Bienvenidos a esta sección
inicial de css acá lo que vamos vamos a
ver básicamente de hecho ya podrán notar
los colores son los mismos que los
colores de css Y es que me ambient un
poquito para arrancar explicar css Bueno
como ya sabemos De hecho está explicado
al comienzo del curso css significa
cascading Style sheets y básicamente
significa hojas de estilo en cascada Por
qué en cascada bueno eso no le expliqué
pero básicamente significa cascada
Porque después cuando nosotros demos
estilos a los elementos Okay lo que va a
pasar va a ser que vamos a seleccionar
varios elementos no y cuando nosotros
seleccionemos varios elementos esto de
hojas de estil enc cascad principalmente
por que normalmente tenemos varias
formas de seleccionar un elemento y
dependiendo de en qué momento le demos
la propiedad o de qué forma lo
seleccionemos y demás esa hoja de estilo
podría reescribirse entonces hace una
analogía al agua viste si viene desde
más arriba o sea si tiene más
importancia estar en un nivel más alto
se reescribe todo el otro código porque
es como el mismo ejemplo del agua que
cae Ahora parece que no tiene ningún
sentido y parece que es complicado
de entender pero cuando entiendan que
hay muchas formas de seleccionar
elementos y que una es más poderosa que
otra porque puede sobreescribir de
propiedades y demás lo entender Pero qué
importa eso ahora nada porque para la
introducción de css no tiene nada que
ver ya que este es un tema un poquito
más avanzado pero dalto yo quiero que
vos me expliques css bu Está bien te voy
a explicar css pero relajate vamos a
comenzar por lo básico como ya saben css
lo utilizamos para agarrar cada
componente de html y darle un estilo
para que el conjunto de estilos que le
damos a cada elemento nos dé como
resultado final una página web estática
funcional navegable etcétera es decir no
se trata solamente de agarrar elemento
por elemento y modificarle cada una de
sus propiedades ya que eso es lo que
hacemos sino que a nivel más Macro se
trata de entender cómo funciona cada
propiedad y cómo funcionan las
combinaciones porque nosotros no hacemos
un estilo que va a ir aplicado a una
caja o a un elemento y después lo demás
lo dejamos de lado no no a nosotros nos
importa la forma en la que se relacionan
las cajas entre sí no se trata de como
creen muchos modificar todos los
elementos y cada uno por separado esos
son solamente herramientas lo que
importa también es entender la relación
entre los elementos por ejemplo un
elemento padre un elemento hijo un
Element elemento hermano un elemento
Nieto Entonces ese tipo de cosas que son
importantes que con el curso vamos a ir
viendo pero lo que vamos a aprender
ahora básicamente a lo largo de este
curso de html y css en css vamos a ver
todo sobre las propiedades más
importantes de css la que un
desarrollador utiliza en la vida
cotidiana es decir en esta sección de
css que vamos a tener una sección básica
y una sección avanzada en ambas
secciones vamos a ver no solamente las
propiedades que un desarrollador utiliza
en la vida real para desarrollar una
página web sino que también vamos a ver
la forma en la que utilizarlas y todas
las combinaciones posibles que nos dan
como resultado páginas hermosas porque a
veces hay propiedades que solamente
funcionan cuando pones las dos juntas o
sea cuando a un elemento le das una y a
otro elemento le das otra esos elementos
juntos crean algo más o se trata de
saber combinarlos también así que bueno
vamos a comenzar con el principio de
todo y es cómo integrar css como ya
saben este fue el último código html que
hicimos yo lo que les voy a recomendar
que hagan es Open folder en cursito de
html vamos a crear otra carpeta una
nueva carpeta y vamos a llamarla css le
vamos a dar en enter y vamos a darle en
seleccionar carpeta De hecho yo
modificaría todo completo acá dice
cursito html Okay pero yo le voy a
cambiar el nombre por cursito html y css
voy a cerrar el vis Studio cod porque si
no me va a dejar modificarlo Ahora sí
ahí se acaba de modificar le voy a dar
enter y voy a meter acá en una carpeta
que se llame clases html y todo lo que
hicimos antes meterlo adentro de clases
html y a esta caja le voy a poner clases
css de esta forma tenemos todo el
cursito htm1 sss acá dentro cuando
hagamos en un futuro ejercicio vamos a
crear una carpeta nueva que se va a
llamar ejercicios y acabamos a hacer los
ejercicios pero por ahora vamos a
quedarnos con estas dos ya tenemos esto
de html que esto es html básico y ahora
vamos a continuar con css vamos a
arrancar con css básico para eso lo que
yo voy a hacer es agarrar esta carpeta
arrastrarla al editor de Ah bueno está
cerrado vamos a abrirlo qué máquinas que
somos visual Studio code para eso ya
estamos acá ni arrastramos directamente
le damos en Open folder entramos a
clases css y seleccionar carpeta ahora
sí ya estamos posicionados en la carpeta
primero voy a crear un nuevo archivo que
se va a llamar un index.htm Por qué Y
porque lógicamente css no existe sin
html html es la base sobre la que vamos
a trabajar con css porque ccs sirve para
modificar elementos html y si no tenemos
elementos html qué joraca vamos a
modificar Bueno vamos a crear primero
principal una estructura básica Ahí está
voy a eliminar las cosas que todavía no
vimos para No confundirlos acá le voy a
poner enlazando ccs y acá voy a crear un
h1 muy simple título esto Solo título y
acá abajo voy voy a venir y poner un
párrafo que va a tener un contenido AC
voy darle control shift p Word wrap y ya
tenemos el Word wrap hasta acá Nada
nuevo todo lo que vimos y demás La
pregunta es no De qué forma podemos
escribir css para modificar un elemento
como ya vimos es parecido a cuando
venimos acá y ponemos la propiedad y la
modificamos por ejemplo en imágenes no
tenemos source y acá escribimos la ruta
de la imagen porque esto es un atributo
pero la diferencia es que las
propiedades de css Al fin y al cabo son
idades que contienen los elementos html
pero no son atributos como tal tenemos
que separar la diferencia entre atributo
y propiedad yo normalmente a veces
cuando estoy hablando de atributos hablo
de propiedades y me confundo medio tonto
y mientras estoy grabando no me doy
cuenta que digo propiedad pero en
realidad esto que está acá Okay es un
atributo si yo pongo el hrf el hrf es un
atributo si acá pongo color o pongo Max
min o min leng por ejemplo o lo que sea
Estos son atributos Por más que afecten
al estilo incluso del elemento son
atributos las propiedades de css acceden
de otra forma y como tiene una sintaxis
diferente de html la forma de escribir
css es muy distinta a la forma en la que
escribimos html vimos un poquito en la
introducción del curso pero vamos a
verlo bien ahora tenemos Tres formas que
son las más importantes de enlazar css
es decir Tres formas de escribir css de
tal forma que realmente podamos afectar
a los elementos una la primer forma de
todas es algo que se llama estilos en
línea Por qué se llama en línea y porque
normalmente se da estilos en una sola
línea de código acá por ejemplo le damos
Style la etiqueta Style le dice ey vamos
vamos acceder a las propiedades de css y
quiero modificarlas y acá me dice Qué
propiedad queres modificar yo voy a
mostrarles una muy básica que va a ser
color red esto lo que hace es cambiar el
color del texto entonces pongo Style
igual comillas y pongo color dos puntos
red Entonces yo le voy a dar en gol ahí
se abrió esto ya lo vamos a minimizar y
acá tenemos esto que bueno es bastante
obvio lo que sucede Y es que es un
estilo que le dimos en línea Por qué se
llama estilos en línea lo vuelvo a
repetir porque se le suele dar en una
sola línea acá también podemos dar más
estilos yo por ejemplo puedo mir acá y
decirle font size que significa tamaño
de letra le puedo dar 20 píxeles por
ejemplo y me aumenta Pero cuál es la
limitación de esto primero tenemos dos
cosas que son dos malas prácticas el
primer motivo Okay es porque tenemos que
tener un lenguaje por un lado otro
lenguaje por el otro no podemos mezclar
código html con código css con código
javascript cada lenguaje tiene que estar
en una sección específica para que si yo
quiero ir a buscar algún lugar alguna
propiedad de css yo voy a ese lugar
donde Quiero encontrar el lugar en
cambio de esta forma tengo todo separado
y no puedo darle Grand lecturas al
código sin que se me obstruya algo que
por ahí no tiene nada que ver con lo que
yo quiero leer Entonces esto no es
correcto de hacer por eso tenemos la
segunda forma de hacerlo que es
utilizando Style no como atributo sino
que como etiqueta tenemos la etiqueta
Style que lo que nos permite es ahora sí
darle estilo css yo puedo por ejemplo
ahora agarrar el p y decir mira quiero
que todos los p abro llaves y acá está
la declaración en este caso voy a poner
van a tener un color red ahora vamos a
ver bien esto y la estructura y cómo
funciona y cómo es la sintaxis ahora
estoy dándoles un pequeño spoiler de lo
que es Pero fíjense que acá ya me acaba
de cambiar el color del texto a rojo y
acá puedo darle más estilo también puedo
poner el h1 y decirle vas a tener un
color Blue por ejemplo y se me pone el
título de color azul y de esta forma es
mejor porque si yo quiero agregar más
propiedades simplemente las voy
agregando acá abajo Ven y voy agregando
propiedad tras propiedad y de esta forma
tengo todo más separado es muchísimo
Mejor aún así tampoco se recomienda
hacer esto de esta forma lo que se
recomienda es tener todo en archivos
separados porque cuando nosotros tenemos
un archivo normalmente las propiedades
que les damos no son tan poquitas como
estas un archivo puede llegar a ser
mucho más largo que esto O sea así como
lo ven gigantesco así de grande como lo
ven bueno Esto se queda incluso corto
para una el código de una página web
real entonces para que esto no suceda lo
que hacemos es utilizar la tercer forma
y la más recomendada y la práctica y la
que todas las páginas web que están bien
hechas utilizan es una etiqueta especial
que se llama link que justamente linka
una hoja de estilos en este caso vamos a
sacar esto y esta hoja de estilos se
suele poner en el Head okay entonces acá
lo que hacemos es utilizar la etiqueta
link tiene un atributo que se llama rel
que en este caso le tenemos que decir
Style sheet en este caso esto significa
hojas de estilo Okay Por qué se usa Esto
bueno rel viene de relationship y le
está diciendo Ey el archivo que vas a
vincular Qué relación tiene con esta
página actual es decir con todo este
archivo html Qué relación tiene el
archivo que vas a vincular en este caso
le voy a decir mira voy a vincular una
hoja de estilos para darle estilo a esta
página es decir voy a incluir un archivo
que va a decir y va a definir cada una
de las propiedades de esta de este de
este archivo html y después tenemos otra
propiedad que es el href en este caso no
es source y acá ponemos el enlace en
este caso por ejemplo el archivo se va a
llamar styles.css y ahora tenemos que
crear ese archivo para eso voy a venir
acá arriba y voy a darle en
styles.css lo creo voy a reducir el zoom
para que volvamos a donde estábamos
antes para verificar que esté todo
correcto funcionando todo bien y demás
voy a hacer lo mismo que hice antes voy
a seleccionar el p y le voy a dar un
color red y si esto se cambia de color
como acaba de hacer recién significa que
la hoja de estilos ya está vinculada
correctamente Esta es la forma
recomendada de enlazar una hoja de
estilos decirle al navegador Cuál es la
relación que tiene el archivo que vamos
a vincular con la página actual en este
caso es Styles sheet y después ponerle
la ruta de donde se encuentra el archivo
de css en este caso como el archivo está
en la misma carpeta con poner el nombre
Ya basta y acá estamos ya con el archivo
listo para comenzar a modificar todas y
cada una de las propiedades de estos
elementos que creamos en html Así que
ahora sí tenemos esto enlazado lo que
vamos a ver ahora muy rápidamente es
repasar hacer un repaso rápido de esto
vamos a minimizar esto un repaso rápido
de esto que son justamente eh la forma
en la que tenemos no de modificar
propiedades ya lo vimos antes pero vamos
a verlo una vez más primero y principal
lo que se hace es poner un selector es
decir Hay muchas formas de seleccionar
elementos lo vamos a ir viendo ahora en
la próxima sección posiblemente pero eh
la forma más normal de seleccionar
elementos es por el nombre del elemento
en este caso estoy seleccionando todos
los elementos p entonces para
seleccionarlo los elementos p le doy la
letra p esto que está acá se llama
selector lo primero que ponemos para
cambiar la propiedad de uno o varios
elementos es el selector tenemos que
seleccionar de alguna forma los
elementos o el elemento que queremos
modificar Entonces en este caso la forma
que tengo de seleccionarlo es la más
básica y tradicional de toda la historia
que es por el nombre del elemento se
llama p lo selecciono así perfecto
después se abren las llaves que en este
caso las llaves significa que estamos
abriendo un bloque las llaves inician y
terminan el bloque un bloque de Qué
bueno un bloque de declaraciones ahora
le damos enter y fíjense que ya se nos
posicionó el cursor acá porque ahora es
momento de comenzar a declarar decir Qué
propiedad queremos modificar y cuál va a
ser el valor que vamos a a darle a esa
propiedad yo por ejemplo tengo color y
le doy Blue lo que acabo de hacer es
decir que la propiedad que voy a
modificar se llama color le damos dos
puntos y después decimos el valor que va
a tener esa propiedad es azul Entonces
el color de los elementos p va a ser
azul Eso es todo lo que hicimos ahora lo
que vamos a ver en la próxima sección eh
vamos a ver justamente los selectores
son las formas de seleccionar uno o
varios elementos Así que vamos con la
sección de
selectores bueno ahora vamos a ver
justamente los selectores que los
selectores hacen referencia como dije
antes a la forma que tenemos de
seleccionar uno o varios elementos
dentro de un documento html no Pero esta
vez en css para poder modificarlo porque
teníamos un problema y es que si
nosotros normalmente eh queremos
seleccionar un archivo de varios no lo
podemos hacer y lo que estamos viendo
acá justamente es una de las Tres formas
que les voy a explicar ahora que son
importantes de seleccionar elementos
esta se llama selector elements o
selección por elemento esto lo que hace
es Buscar el nombre del elemento html
que se llama así y modificarlo Incluso
si nosotros creamos un elemento nuevo
nuevo elemento Jajaja va a cargar esto
que está acá que es un nuevo elemento y
si venimos acá y ponemos nuevo elemento
y hacemos lo mismo ponemos color red se
va a Modificar el nuevo elemento porque
literalmente hace eso esto es la peor
práctica del universo por favor No hagan
esto no lo hagan no creen sus propios
elementos porque no se hace pero solo
que sepan que literalmente lo que está
haciendo este selector es ir a buscar
todos los elementos que se llaman así Y
darles las propiedades que definimos en
el bloque de declaraciones vamos a
eliminar esto y vamos a eliminar el
nuevo elemento Pero tenemos otra forma
voy a poner pantalla completa y voy a
guardar esto en diferentes carpetas y la
carpeta que voy a crear se va a llamar
selectores y voy a meter estas dos acá
dentro mo Ahí está porque si no vamos a
tener que siempre andar modificando los
mismos archivos y no va a quedar para
ustedes un historial con todos los
archivos que tenemos y nada no no lo
vamos a poder hacer así que yo que
ustedes hago lo mismo y separo todos los
ejercicios en carpetas diferentes
también lo podríamos hacer con git pero
este no es un curso de git y no quiero
que se mezclen mucho el curso de git ya
salió lo pueden ver en YouTube Está
increíble y después de este curso sí por
qué no les recomendaría ver el curso de
git antes el de javascript por lo menos
el básico y después el deit bueno acá
voy a checar un poquito esto Ahora sí
voy a entrar acá Acá tengo los dos
archivos voy a cerrar el Explorer vamos
a correr en tiempo real esto porque no
nos va a cargar ahora sí este que está
acá lo sacamos ahora sí estamos bien
Vamos a crear listas por ejemplo vamos a
poner algo que se llame ingredientes
vamos a hacer de cuenta que estamos
justo en una minise sección que se
encarga de definir los ingredientes de
una receta creamos un L y adentro del l
vamos a crear cinco Li vamos a borar el
último quiero cuatro nada más el primer
elemento es por ejemplo harina el
segundo es aceite leche y sal ya está
acá tenemos todos los ingredientes de no
sé estamos inventándose una receta si yo
por ejemplo vengo acá y escribo le abro
el bloque de propiedades y acá pongo
color red ya más adelante vamos a ver
miles de propiedades para modificar
elementos ahora por ahora quedémonos con
que como esta es una clase de selectores
vamos a usar solamente esta prop durante
toda la clase para mostrar que estamos
seleccionando lo que queremos
seleccionar Pero después vamos a ver
35,000 propiedades para cada elemento y
ahí va a aparecer la magia pero por
ahora tenemos que aprender a seleccionar
elementos de hecho fíjense que acá nos
aparecen voy a darle un control más así
lo podemos ver más grande nos aparecen
varios elementos en este caso tenemos
harina aceite leche y sal Enton que acá
es un problema porque si yo por ejemplo
quisiera seleccionar solamente un
elemento no lo podría hacer porque voy a
estar seleccionando solamente a los le
qué debería hacer en ese caso utilizar
por ejemplo la etiqueta span que esta Es
solamente una etiqueta que utilizamos
para seleccionar algo muy puntual
entonces venimos acá ponemos span y ya
está Le acabamos de dar un color a esto
pero a su vez el puntito este se quedó
negro y encima esto que estamos haciendo
ni siquiera está tan bien lo podemos
hacer todavía mejor vamos a borrar el
elemento spam el elemento spam igual es
muy utilizado Okay para hacer este tipo
de cosas es muy usado pero en este caso
no lo necesitamos Porque queremos
modificar todo el lad no es que tenemos
acá varias cosas como por ejemplo una
taza de y acá acá sí ponemos harina
Entonces encerramos el harina en el span
en este caso Sí está bien porque es una
taza de y encerramos en el spam el
harina Entonces estamos diciendo Che
todo lo que esté adentro del spam hacelo
rojo Entonces en este caso Está bien
usado pero si vamos a querer modificar
todo el le completo mejor encontremos
una forma de seleccionar puntualmente
este lead para modificarlo Cómo podemos
hacer Bueno hay algo que se llama clase
básicamente lo que nos permiten las
clases es asignarle a los elementos un
nombrecito muy puntual que ese nombre se
llama clase y es la forma que tenemos de
separar a los elementos por clases
supónganse que yo digo Bueno mira quiero
que este elemento sea una caja no una
caja giratoria qué hacemos seleccionamos
todos los elementos que queremos que se
conviertan en cajas giratorias y les
asignamos la clase caja giratoria
Entonces cuando nosotros queremos
modificar todos esos elementos los
modificamos una vez y es como un preset
una plantilla Porque después cada vez
que hagamos cajas giratoria se van a
modificar todos los elementos como cajas
giratorias ahora vamos a ver para eso
tenemos que utilizar el atributo Class y
acá poner el nombre de la clase en este
caso le quiero poner por ejemplo
faltante la clase faltante por qué
Porque si yo no tengo un elemento lo voy
a poner de color rojo Entonces si de
repente faltante no no está le doy en
color red todos los elementos de la
clase faltantes se van a llamar rojos
Pero de esta forma estamos Llamando al
elemento faltante ven acá nos muestra
acá nos muestra lo que estamos llamando
estamos Llamando a una etiqueta llamada
faltante si queremos Llamar a un
elemento que tenga la clase faltante lo
mismo que antes solo que ahora con un
punto por delante un puntito Ahí está de
hecho fíjense que se nos pone de otro
color Esta es la forma que tiene visual
Studio code de decirnos entiendo que
esto es una clase y si actualizamos ahí
como podrán ver ahora se nos marca
harina en rojo y encima se nos pone este
puntito y no solamente eso Si
quisiéramos encima decir Bueno ahora
también nos falta sal tengo que ir a
comprar sal Bueno vamos a sal darle la
clase faltante actualizamos y ahora sal
también va a estar en rojo de esta forma
podemos a varios elementos agregarles
una misma clase entonces modif amos acá
todas las propiedades que queremos que
tengan estos elementos con esta clase y
todos estos elementos van a estar
modificados como nosotros queremos las
clases las podemos utilizar para muchos
elementos está bien utilizar clases para
muchos elementos Si queremos que varios
elementos sean de una clase lo podemos
hacer esa es la practicidad del uso de
clases hay un montón de estrategias Okay
que tenemos que más adelante ver para
entender cuál es la mejor forma de
elegir el nombre de una clase Porque
cuando un desarrollador viene y lee esto
tiene que entender Qué significa esta
clase con ver la clase más o menos tiene
que darse cuenta de qué hace Por qué le
puso esta clase Porque si ustedes van y
le ponen este nombre Jaja XD y ahora
vienen acá y le ponen Jaja XD y funciona
Mira funciona pero cualquier
desarrollador que venga acá le esto
decir che No entiendo qué quiso
decir acá Qué joraca quiso decir con
esto no entiendo por qué le puso hack XD
por qué lo puso de color rojo en cambio
Si yo acá le pongo por ejemplo
ingrediente faltante ingrediente
faltante vengo acá y pongo ingrediente
faltante lo que está pasando acá es que
cuando un desarrollador venga y vea Ah
okay A este elemento tiene la clase
ingrediente faltante y en Styles está
configurado de color rojo Qué significa
que todos los elementos que tengan la
clase ingrediente faltante se les va a
dar un color rojo Y eso significa que el
ingrediente falta Entonces yo por
ejemplo puedo venir acá y decirle Okay
este Li como me falta sal también va a
tener la clase ingrediente faltante le
damos enter y ahora ahora tenemos dos
ingredientes faltantes dos elementos de
clase ingrediente faltante después
tenemos otra forma de seleccionar
elementos que se llaman ids los
selectores por ID que el selector ID es
un selector que se le puede dar a un
elemento en toda la página supónganse
que yo quiero determinar un elemento
clave voy a crear otro Li Okay vo decir
este elemento tiene que ser un elemento
clave por ejemplo ingrediente secreto
ahí está el ID se selecciona con el
signo de la almohadilla O el hashtag
este signo es para el ID así como el
punto para la clase el hashtag para el
ID y acá ponemos ingrediente secreto y
acá por ejemplo le damos en color Blue y
fíjense que esto que está AC se me puso
azul yo ahora por ejemplo puedo escribir
levadura que es un elemento que un un
ingrediente de cocina que literalmente
eleva la masa la hace más esponjosa todo
ahora esto funciona Exactamente igual
por lo menos en css es decir si yo vengo
acá y a este elemento le doy ingrediente
secreto también se va a poner de este
color Vamos a ponerle ID Ahí está sí
también se va a poner de color azul No
es que no se puede pero la realidad es
que esto no es una buena práctica es
decir no se recomienda hacer esto
Incluso en javascript van a tener
problema si lo hacen así cuando trabajen
con javascript pero más allá de eso no
es recomendado esto porque esto le dice
al navegador Ey este va a ser un
identificador único para cada elemento
es decir va a haber solamente un
elemento que sea ingrediente secreto de
hecho acá pueden ver y acá te explica
ves que solamente se tiene que
identificar un solo elemento para
después utilizar o seleccionar en
javascript o en css Son elementos únicos
que necesitamos identificar de alguna
forma para después darle un estilo
especial o algo la mientras que la clase
se utiliza para definir varios elementos
de un mismo tipo podemos hacer que
muchos elementos tengan la misma clase
no podemos hacer que más de un elemento
tenga el mismo ID porque el ID es esa
forma de decir al navegador e este este
elemento va a tener este identificador
único para este elemento que después con
javascript voy a agarrar y voy a hacer
algo muy específico por ejemplo voy a
hacer que cuando se le dé clic a este
elemento se me abre una pestaña mágica
por ejemplo Entonces hasta ahora ya
vimos las Tres formas que tenemos de
seleccionar por elemento que es por
ejemplo a los le se selecciona por
elemento color Grey por ejemplo se les
da un color gris Esta es la forma que
tenemos de seleccionar por elementos de
esta forma estamos seleccionando por
clases todos los elementos con esta
clase van a tener este color y de esta
forma seleccionamos por ID acá le voy a
agregar faltante así lo dejamos lindo y
no me da ningún Toc ahora que ya más o
menos sabemos cómo seleccionar elementos
puntuales sin volvernos locos lo que
podemos hacer es ver algunas propiedades
de texto para que tampoco tengamos que
ver siempre la misma tipografía el mismo
tamaño el mismo espaciado entre textos
lo basta de ver siempre lo mismo Vamos a
aprender a darle alguna que otra
propiedad al texto hay muchos tipos de
propiedades tenemos propiedades para
darles a las cajas tenemos para agregar
sombras tenemos para cambiar las
posiciones iones Tenemos un montón de
cosas okay Y lo que vamos a ver ahora es
una de esas cosas que son las
propiedades de texto son propiedades que
afectan directamente al texto y a la
forma en la que el navegador nos
presenta el texto Así que vamos a ver
propiedades de texto a que no tengamos
tanta fald acá
vamos Bueno ahora lo que vamos a ver son
algunas propiedades de texto muy simple
no voy a explicar mucho más propiedades
de texto son propiedades que le vamos a
dar al texto para que de alguna forma se
modifican la primera de Bueno de hecho
no esto lo vamos a guardar Okay pero
vamos a cerrar esto y vamos a crear una
nueva carpeta Sí una nueva carpeta
porque con esto no nos basta es más
Vamos a darle clic a la carpeta Okay
cerrada tiene que aparec noos en Violeta
si tiene el mismo tema que yo que es
palenik le dan control c control b y
debería aparecerle la misma carpeta pero
copiada le van a cambiar el nombre
rename propiedades de texto y a la
que lo recontra remil le agarraba la
locura se pu insultar Vamos a entrar
okay Y acá tenemos esto que está acá que
es lo mismo que antes voy a checarlo un
poquito pero ahora voy a abrir voy a
cerrar esto que está acá Así nos queda
estos dos archivos abiertos que son los
dos archivos que teníamos en esta
carpeta voy a darle enter acá y ahora sí
voy a abrir el otro porque si no no se
me abren esto en el curso de vis estudio
có explico cómo solucionarlo le doy acá
para que se oculte y ahora tenemos
exactamente el mismo código Cuál es la
diferencia bueno acá vamos a borrar todo
esto así nos queda limpito y acá también
vamos a borrar todo esto así también nos
queda limpito Vamos a darle Ahora sí en
Go Live para que nos cargue esta pestaña
debería abrirse acá al costadito en vez
de enlazando css le vamos a poner
propiedades de texto en el otro archivo
le habíamos puesto un nombre malo no le
habíamos puesto ingrediente le habíamos
puesto enlazando css no no no esto que
está acá debería llamarse selectores
Ahora sí Cerramos porque si no bueno
para este ejercicio voy a agarrar
primero un h1 el mismo que teníamos
antes y poner título y voy a poner un
párrafo y el párrafo va a tener un lorem
Ahí está control shift p Word wrap y
ahora sí ya tenemos esto que está acá
bueno para comenzar yo Esto sí lo voy a
checar un poquito y un poquito más ahí
está y voy a venir acá bueno acá ya
tengo todas mis propiedades vamos a
arrancar con la primera primero vamos a
seleccionar el párrafo y vamos a
Modificar el color esto que está acá
modifica color es una propiedad directa
que podemos incluso poner font color
pero ya no se usa color es la propiedad
que vimos recién desde que comenzó el
curso que literalmente lo único que hace
es Modificar el color del texto Esta es
la propiedad que ya todos conocemos muy
simple la diferencia es que hasta ahora
venimos escribiendo red y quiero que
sepan que en un futuro vamos a ver
directamente describir y trabajar con
colores fijos Y absolutos por qué porque
esto que está acá Este red es una
palabra clave que en inglés significa
rojo Sí ya lo sabemos pero el navegador
agarra este color Y le da el color que
quiere para Google Chrome red puede
significar este rojo pero para mochilla
por suerte para mochilla y para Chrome
son lo mismo pero por ejemplo hay
navegadores que se ven afectados por el
el color que se les da no en todos los
navegadores Red va a ser exactamente el
mismo rojo en cambio más adelante vamos
a aprender a trabajar bien con colores
rgb hexadecimal y demás para que puedan
darle un color fijo y sea igual en todas
las webs pero nada por ahora vamos a
ponerle Red porque no es algo que nos
interese ahora Así que con red es más
que suficiente ya que lo que queremos
Mostrar no es un color absoluto ni
colorizar sino que entender algunas
propiedades de texto la primera es esta
que es color red la que le sigue Okay se
llama font family acá fíjense toda la
cantidad de cosas que no saltan Exacto
acá como podemos ver son tipografías
diferentes acá va la tipografía y otra
cosa que no les mostré fíjense que acá
hay un punto y coma Por qué está este
punto y coma Bueno este punto y coma lo
que hace es separarnos propiedades O sea
la última propiedad que defina no
necesita tener el punto y coma Pero
todas las demás sí porque es la forma
que tenemos de separar propiedades entre
sí acá por ejemplo voy a poner San serif
fíjense que acá me cambió la tipografía
antes estaba así cuando Le agregué la
propiedad se puso así esto literalmente
me cambia la tipografía si yo no le doy
el punto y coma y guardo fíjense que
además de que el color me lo muestra mal
acá tampoco se cambia la tipografía Y
encima Este color no funciona por eso es
importante darle el punto y coma porque
entre afirmaciones hay que separarlas
porque esto es como si yo dijera esto se
puede poner todo en un mismo párrafo no
habría problema pero en vez de ponerlo
todo en un mismo en una misma línea lo
separamos con espacios en línea así nos
queda más lindo y modificamos propiedad
tras propiedad por eso incluso es una
buena práctica siempre terminar con un
punto y coma Aunque terminar con un
punto y coma no sea necesario que
nosotros no sabemos cuánd vamos a ir a
ese elemento y modificarlo o agregarle
más propiedades Así que siempre está
bueno tener esto para que si el día de
mañana queremos venir y seguir
editándolo le damos enter y ya podemos
trabajar en otra propiedad bueno como
vimos font family nos da nos permite
elegir la tipografía una forma de poner
el font family es cco millas que es así
Simplemente escriben la tipografía por
ejemplo pongo taoma y acá me ya me lo
marca en azul entonces me pone color
taoma pongo sans serif guardo y se me
pone San serif pongo Georgia y se me
pone Georgia y después tengo la otra que
es la de con comillas podemos poner
comillas y acá escribimos la tipografía
por ejemplo taoma no que nos va a
funcionar Exactamente igual esto es
cuando la la tipografía tiene más de una
letra por ejemplo nosotros tenemos sans
serif Okay pero si en lugar de tener
sans serif la tipografía se llamara así
esto nos va a tirar un error acá tenemos
lucida sans Si nosotros quisiéramos
poner lucida sans sí o sí tenemos que
usar comillas simples vamos a actualizar
Y en este caso nuestro nuestro sistema
operativo no tiene esta tipografía pero
si la tuviera la mostraría solo para que
entiendan que cuando la el nombre de la
tipografía tiene más de una palabra si
no lo ponemos entre comillas nos va a
tirar un error así que tenemos que
ponerla entre dos palabras las que son
de una palabra se pueden poner
simplemente por el nombre de la palabra
taoma y ahí ya está o si son dos
palabras y la tipografía por defecto
viene configurada para separarse por un
guion medio también sans serif pero como
les dije antes Si sans serif no tuviera
configurado en su nombre de tipografía
este guion medio y estuviera así
tendríamos que dársela con comillas
porque si no no funcionaría lo vamos a
dejar acá la tipografía va a ser sanif
Hola les habla la versión dalto minita
de Google una cosa que el boludo de
dalto se olvidó decir es que también
pueden usar la coma y agregar otra
tipografía para que si la primer
tipografía no carga ya que está mal
escrita no es soportada por el navegador
o por algún motivo intente cargar la
segunda que pusimos si la segunda no
carga pueden poner una tercera una
cuarta y las que quieran de esa forma va
a ir probando de una en una de izquierda
a derecha hasta que alguna tipografía
agarre eso fue todo hijos de p si te
gustó esta sección de dalto versión
minita de Google deja tu like y si no
también boludas después tenemos font
size que es el tamaño del texto
normalmente por defecto como dijimos
antes font size suele ser de 16 píxeles
de hecho si le damos font size 16
pixeles van a ver que no va a cambiar
absolutamente nada porque 16 píxeles es
el tamaño por defecto en la mayoría de
los navegadores pero si le damos por
ejemplo 13 píxeles Ahí vamos a ver que
se nos achicó un poquito la el la
tipografía por qué porque esto que está
acá lo que hace es literalmente cambiar
el tamaño de la letra muy simple y
podemos medirlo en píxeles enem en rems
en porcentajes más adelante también
vamos a a ver unidades de medida no es
el momento no importa que nos enfoquemos
en eso ahora no queremos aprender a
medir o a definir medidas correctamente
eso lo vamos a ver más adelante ahora
queremos ver propiedades de texto por
eso cosas como colorizar correctamente o
aprender a a definir medidas con eh
correctas para que se adapten a todo
dispositivo para que sean absolutas o
relativas o lo que sea eso en otra
sección por ahora Lo importante es que
sepan que esta es la propiedad que nos
permite Modificar el tamaño del texto le
sigue font weight que font weight
básicamente lo que hace es poner la la
tipografía eh más o menos ancha
literalmente Define el grosor de la
tipografía ancha no gruesa Perdón
nosotros lo que haríamos normalmente
para poner esto en negrita sería poner
la etiqueta B poner así y esto se pone
todo en negrita pero si en vez de hacer
esto con la etiqueta B venimos acá y
ponemos font weight Blood Blood no
perdón bold el efecto es exactamente el
mismo solamente que ahora lo estamos
haciendo desde css y nos estamos
ahorrando escribir la etiqueta b De
hecho se recomienda hacer esto si
ustedes van a poner algo en negrita no
lo hagan con la etiqueta B háganlo con
esta etiqueta hoy por hoy ya no se usa
más la etiqueta B si por ejemplo tienen
que Resaltar la palabra Esta que está
acá porque de repente ipsum es una
palabra muy importante están hablando
por ejemplo Qué significa a una variable
en css y tienen que resaltarla el texto
variable en css esto que está acá es la
forma tenemos que resaltarlo Pero esto
tan mal No necesitamos hacer esto
puntualmente lo podemos hacer con un
spam y Modificar el spam o podemos
utilizar la etiqueta strong Esto es algo
de html no de css pero que sepan que la
propiedad strong funciona Exactamente
igual que B igual eh solamente que la
diferencia que tiene strong es que el
navegador le va a dar más importancia en
el seo o sea Google se va a fijar en la
etiqueta strong pero no se va a fijar en
la etiqueta B ent Si queremos Resaltar a
nivel semántico una palabra lo tenemos
que hacer con strong para que Google le
dé importancia la etiqueta B solamente
es para algo de estilos por eso ya que
ni se recomienda usar o son contadas las
veces en las que se puede utilizar bien
en este caso nada no quiero ver más nada
html ya veremos más adelante la sección
avanzada bueno font weight igual No no
es Blood la única que tiene de hecho
fíjense que cuando escribimos font
weight le damos en dos puntos y nos
saltan varias eh varios números bueno
tenemos del 100 a el 900 pero tenemos
que entender cómo funcionan las
tipografías normalmente las personas que
se encargan de crear tipografías lo que
hacen es definir un grosor para cada
tipografía si yo por ejemplo de alto
Quiero crear una tipografía qué hago
defino una tipografía con 100 de grosor
una tipografía con 200 de grosor una
tipografía con 300 de grosor y defino
nueve grosores diferentes para una misma
tipografía Entonces yo de esta forma
accedo a cualquiera de los nueve lo
ideal es que mientras más chiquito sea
el número más finito sea y mientras más
grande sea el número más más grueso sea
yo por ejemplo le doy F weight 100 y
actualizo van a ver que el número se
mantiene igual le doy 300 y actualizo y
sigue completamente igual le doy 50000 y
actualizo y sigue completamente igual le
doy 700 Y ahí sí hay un cambio por qué
Porque el creador de la tipografía San
serif Esta que está acá No definió ni la
100 ni la 200 ni la 300 ni la 400
Entonces definió dos una que está por
debajo de 600 y la de 600 definió las
tipografías 100 200 300 400 y 500 como
finitas del 600 al 700 Esta tipografía
es como si le pusiéramos un Blood o en
negrita ese tiene este grosor el 800
tiene este grosor super grueso y el 900
el mismo Entonces ya sabemos que del 100
al 500 es finita 700 y 600 es eh gruesa
y 800 y 900 es super gruesa Pero eso
cambia con cada tipografía yo por
ejemplo pongo taoma Okay y van a ver que
si yo acá le pongo 100 me dice que está
super finita le pongo 400 y sigue igual
500 y sigue igual 600 y ahí también me
la cambia le doy en 9900 y me la hace
igual de gruesa porque taoma no tiene
tres taoma tiene Solo dos de 100 a 500 y
de 500 a 900 pero hay tipografías que
tienen todo el rango entero 100 es Ultra
finito 200 es un poquito más grueso 300
es un poquito más grueso que 200 400 es
un poquito más grueso que 300 y siempre
los siguientes son un poquito más
gruesos que el anterior eso A nosotros
no nos importa solamente tenemos que
saber que la tipografía que descarguemos
tiene que tener varias capacidades de
anchos y a veces hay tipografías que
tienen uno solo un solo tamaño Entonces
por más que le demos 100 por más que le
demos 900 siempre va a tener el mismo
pero la mayoría de tipografías que uno
descarga tiene varios rangos Pero bueno
que sepan que eso es lo que pueden hacer
del 100 al 900 dependiendo cómo lo haya
definido el creador ojo acá porque ahora
que entendimos esto tenemos que entender
Cómo funciona el valor vol que
básicamente nos pone negrita y bolder
son Exactamente lo mismo Solo que vol
establece un peso de 700 o sea escribir
700 y escribir
es lo mismo es decir estar escribiendo
volt es como si escribiéramos 700 por
eso quería primero explicar esto de 700
la diferencia entre bt Y bolder es que
lo que hace bolder es ir un escalón más
arriba o sea detecta Cuál es el
siguiente paso si yo por ejemplo vengo
acá y le doy en sanif si yo acá por
ejemplo le doy en b b me lo va a dejar
en 700 700 es esto es lo mismo pero ya
900 por ejemplo es más grueso todavía
bueno si yo le doy en bolder lo que hace
bolder es ir un pas paso más adelante o
sea si la tipografía natural es finita
la hace gruesa y si la tipografía
natural es gruesa la hace todavía más
gruesa O sea que si el valor por defecto
de San serif fuera 700 por ejemplo ven
700 cuando nosotros aplicáramos bolder
sería el siguiente escalón o sea 800
porque ahí ya comienza a ser más gorda y
si el tamaño por defecto es 400 cuando
le diéramos en bolder iría al siguiente
escalón que es 600 pero escribir bt no
importa el contexto no importa nada
siempre va a ser 700 esta propiedad es
un poco complicada parece parece difícil
pero la verdad que es s simple solamente
Define el grosor si no entendieron un
lo que acabo de explicar nada
vayan probando 100 200 300 400 hasta que
tenga el grosor que ustedes quieren que
tenga y si ponen volt se pone Sí o sí en
negrita si la tipografía tiene
disponible la versión negrita vamos a
ver otra propiedad después tenemos font
Style esta propiedad fíjense que acá
tenemos varios valores nos vamos a
preocupar por estos los tres primeros el
primero es italic italic lo que hace es
ponernos la en cursiva o sea cursiva o
cursive o italic o itálica es cuando
tenemos la letra inclinada si no me
equivoco ocho entre ocho y 12 gr en
lugar de italic tenemos normal que este
es el valor por defecto o sea el
navegador va a configurar font Style
normal si tenemos Cualquier párrafo
excepto negrita y strong va a
configurarlo como normal y después
tenemos oblic que básicamente también
inclina la tipografía pero no tanto O
sea no la hace tan inclinada va a
parecer que son exacta exactamente
iguales porque sí en algunos casos
italic y oblique son exactamente el
mismo valor pero en tipografía así como
tenemos tipografías que te permiten
tener la letra finita la letra gruesa y
la letra super gruesa hay tipografías
que te permiten tener la letra derecha
doblada y super doblada en este caso
sans serif no nos deja por eso italic y
oblic son lo mismo pero si se pudiera
italic es bastante inclinada Y oblic es
menos inclinada y después tenemos una
propiedad experimental que salió los
navegadores modernos en las últimas
actualizaciones que llama oblicuo y acá
definimos cuán inclinado tiene que estar
por ejemplo 40 deg o 40 gr no en este
caso a mí no se me actualiza porque esta
es una función experimental que yo no
tengo habilitada pero en el futuro esto
se va a poder hacer vamos a poder
definir Cuánto se va a poder inclinar la
letra pero nada esto por ahora olvídense
solo sepan que en el futuro van a poder
inclinar la letra a lo que ustedes
quieran lo más normal cuando utilizamos
la tipografía font Style es utilizar
italic porque el valor por defecto es
normal literalmente es así es normal y
si nosotros vamos a definir normal para
eso ni lo definimos y no ponemos una
pero si queremos cambiarlo a
cursiva o itálica ponemos italic y ahí
se modifica después tenemos la propiedad
text align que básicamente lo que hace
es alinea texto dentro de su contenedor
si yo por ejemplo le doy en text align
vamos a ver que tenemos varias
propiedades Center and justify left
right Start para comenzar vamos con los
dos más básicos tenemos left que es el
valor que viene por defecto que dice e
la letra tiene que arrancar a la
izquierda porque nosotros vamos a
escribir de izquierda a derecha pero si
escribiéramos de derecha a izquier
izquierda sería right y fíjense que haí
la letra se pone de acá así por ejemplo
escriben los árabes en Arabia Saudita o
en los Países Árabes se escribe de
derecha a izquierda es el famoso right
to left en este caso como estamos en
Argentina y hablamos español nosotros
escribimos left to right o sea de
izquierda a derecha no escribimos de
derecha a izquierda entonces acá tenemos
que definir right Por qué Porque el
texto se tiene que alinear hacia la
derecha Si queremos que ser bien
argentinos Y no y hablar español ponemos
left después tenemos Center Center lo
que hace es nos la centra ni a la
izquierda ni a la derecha la deja
centrada de hecho vamos a probarlo con
el título si yo al título por ejemplo le
pongo text align left se queda ahí si le
pongo right Okay se alínea a la derecha
y si le pongo Center se centra como el
título es un elemento de bloque ocupa
todo el ancho disponible entonces estas
propiedades sirven estas propiedades lo
que hace es moverse en el rango
disponible O sea si yo por ejemplo tengo
una y tengo un texto acá a la izquierda
si ponemos right se va hacia acá okay Y
si ponemos Center se queda centrado pero
si la caja del elemento es igual de
grande que el elemento O sea si los
bordes del elemento son iguales Como por
ejemplo los elementos de línea ponemos
right ponemos left ponemos Center y le
va a chupar un huevo porque va a ser
Exactamente igual porque lo que hace
right left y Center es alinear el texto
dentro de un contenedor Y si el
contenedor tiene el mismo tamaño que
ocupa el texto no vamos a poder alinear
un entonces solamente Aplica para
elementos que que tienen su tamaño o Su
contenido más grande que el texto o
elementos de bloque por ejemplo como por
ejemplo si le damos botón derecho
inspeccionar acá podemos ver que el
título es largo acá le damos en left y
le modificamos la propiedad sigue siendo
igual de largo Pero si por ejemplo el h1
fuera Play inline esto lo vamos a ver
después ni se preocupen por lo que acabo
de hacer pero si fuera un elemento en
línea y yo por ejemplo acá le dira right
No se va a alinear a la derecha porque
la alineación es dentro del contenido Yo
acá le dira Center no se va a alinear al
centro porque ya está alineado al centro
porque el total de todo el contenido es
este lo que hace es alinear Dentro de
este fondito azul yo por ejemplo le
sacar a esto ven lo que hace es me lo
centra dentro de todo el recorrido azul
que tiene bueno acá estamos de vuelta
Solamente era para mostrarles Bueno eso
es lo que hace el Center y después
tenemos el justify el justify lo que
hace es intentar hacer que más o lo que
hace Word o Google docs básicamente
intenta que nos quede todo igual o sea
que esto nos quede así parejito que
todas las letras comiencen al principio
de la línea y que terminen acá fíjense
que si yo le saco el justify Esto está
mal porque esto que está acá termina
tera antes de que termine la línea esto
que está acá termina antes esto que está
acá termina Este es el único que termina
bien y este que está acá termina mal
pero si le damos en justify es como que
te lo justifica vamos a verlo de vuelta
en Paint lo que hace es intenta que
todos los elementos lleguen al final de
la línea porque si no una línea puedes
terminar acá una línea puede terminar
acá otra línea puede terminar acá otra
puede terminar acá Entonces cuando vamos
a leer el texto tenemos esto que es más
o menos lo que tenemos acá voy a sacarle
la propiedad justify de vuelta para que
lo vean esta línea termina acá y todo
esto lo deja libre acá esta dejó todo
esto libre entonces lo que hace justify
es hacer que esto no suceda lo que hace
es intentar hacer que todas más o menos
mientras se pueda terminen siempre al
final de la línea eso es lo que hace
justify entonces para eso lo que hace es
más o menos Le cambia el tamaño de los
espacios para que más o menos lleguen
bien al final de la línea eso es lo que
hace Esas son las cuatro más importantes
después tenemos una que es Start que
esta es como si dijéramos left Y tenemos
end que esta es como si dijéramos right
Cuál es la diferencia bueno que si
estamos en Arabia Saudita end va a ser
como si pusiéramos right y Start va a
ser como si pusiéramos end Por qué
Porque lo que hace Start dice quiero que
la letra se alinee hacia donde comenzá a
escribir yo le pongo Start nosotros en
Argentina escribimos de izquierda a
derecha Entonces el texto se alinea a la
izquierda porque comenzamos en la
izquierda pero en Arabia Saudita por
ejemplo la gente escribe de derecha a
izquierda entonces comienzan desde la
derecha entonces Start en habla hispana
va a ser izquierda pero si esto lo
aplicamos a un país de Arabia Saudita va
a ser derecha cuando estamos creando una
página web que queremos que entre gente
de todo el mundo esto es recontra útil
si escribí de izquierda a derecha te lo
pongo a la izquierda si escribís de
derecha a izquierda te lo pongo a la
derecha y end hace lo contrario Si
escribes de derecha a izquierda te lo
pongo a la izquierda Si escribes de
izquierda a derecha te lo pongo a la
derecha hasta donde termina la dirección
final Pero nada yo en este caso le voy a
dejar en left creo que el valor por
defecto es Start de esta propiedad
después tenemos text decoration text
decoration que esto lo que hace fíjense
esto tiene varias propiedades tenemos
underline que nos pone esto que está acá
que hace que parezca un enlace ven es el
sub nos subraya por abajo Tenemos
también el subrayado overline que esto
en vez de subrayar la parte de abajo del
texto nos subraya el el techito Y
tenemos Line trout que esto lo que hace
es tachar noos el texto o sea
básicamente dice Che Quieres que te
ponga una línea la línea te la pongo
abajo te la pongo arriba o te la pongo
en el
medio de hecho ustedes dicen Bueno
quiero que sea en dos quiero por arriba
y por abajo ponemos overline y además
podemos poner underline ven o sea se
pueden mezclar las propiedades no es que
son ex no hace falta que pongamos
solamente una si yo quiero que tenga un
subrayado por debajo es underline si
quiero que tenga por arriba overline y
si quiero que tenga ambas es overline
underline y ahí está y si quiero que
tenga las tres es overline underline
Line trout y ahí se pone todo pero
normalmente es utilizar dos la más común
es Line thr que la utilizamos para
tachar texto Okay es como tachamos algo
por ejemplo creamos acá un spam no un
spam que está acá un spam Ahí va ponemos
esto acá y acá lo que hacemos Es darle
esta propiedad por ejemplo al spam y le
damos esta propiedad y lo que hacemos Es
tachar este pedacito de acá y le podemos
dar por ejemplo color Brown Vamos a
darle otro color también entonces Lo
acabamos de tachar y le dimos otro color
después tenemos una otra más que se
llama blink pero esta ya no se
recomienda lo que hace es titila ya
quedó obsoleto no se usa Así que si en
algún lado lo ven
descártalo es none por lo menos para la
mayoría de los elementos es none esto
significa que nada none es nada quiero
que no tenga no tenga decoración de
texto en este caso en este elemento sí
se la voy a dejar de hecho si se dan
cuenta nosotros cuando creamos un
elemento a por ejemplo vamos a crear un
elemento a vamos a hacer que vaya a mi
canal de YouTube
https.youtube.com barsy dalto Okay acá
vamos a poner canal de dalto ahí está
este es el canal de alto fíjense que por
defecto lo que hace el navegador es
ponerle un subrayado yo puedo venir acá
y sacárselo por ejemplo poner a y a los
elementos a le voy a sacar el subrayado
text decoration No Y ahí acabo de
eliminarle El subrayado al a y sigue
funcionando Yo le doy enter y va a mi
canal de YouTube de hecho cuando
nosotros trabajemos con enlaces por
ejemplo cuando creemos barras de
navegación si ustedes por ejemplo le dan
clic acá esto que está acá es un enlace
fíjense que no tienen el subrayado solo
lo tienen cuando le ponemos el mouse
arriba Entonces lo lo que se suele hacer
después vamos a sa ver cómo hacerlo pero
cuando se le pone el mouse por encima se
le agrega el subrayado es una forma en
la que tenemos de modificar esta
propiedad No yo en este caso lo voy a
sacar porque no me interesa tener el a
ahí solamente quería que vean el ejemplo
después tenemos Line hate que es
básicamente Line hate Okay lo que Define
es el el espaciado de la letra si yo por
ejemplo vengo acá y pongo Line hte si le
doy en normal Este es el valor que tiene
por defecto es como dejale al navegador
que el navegador decida por vos si le
das en uno Este es el tamaño que tiene
es como un tamaño normal si le damos dos
va a tener el doble de espacio si le
damos tres básicamente es eso lo que
Define es el tamaño que va a haber Okay
1.5 por ejemplo la distancia que hay
entre línea y línea fíjense que si yo
selecciono esto voy a seleccionar una
sola línea por ejemplo la del medio si
yo acá le pongo 2.5 ahora tengo
seleccionado más si le pongo 5.5 la
distancia todavía es mayor Bueno eso es
lo que hace esta propiedad literalmente
Define Cuál va a ser el tamaño fíjense
que si le damos de hecho uno va a ser
del mismo tamaño de la tipografía
Entonces eso es lo que Define el Line
height el tamaño de la línea no es una
propiedad del texto pero s es una
propiedad que normalmente uno utiliza
cuando escribe código No porque nosotros
no queremos que por ejemplo esto se vea
todo junto Entonces qué hacemos la
ponemos en 1.6 por ejemplo 1.4 es una un
valor muy común 1.4 1.3 y ahí ya más o
menos sabemos que el texto está un
poquito más espaciado eso es lo que hace
esta propiedad de hecho puede tener
hasta porcentajes puede tener por
ejemplo 10% y fíjense lo que hace tiene
el 10% de una línea tenemos el 200 % Y
esto es como si pusiéramos un Line
height de dos después lo vamos a ver
cuando veamos medidas pero nada acepta
acepta de todo dice he porque es la
altura de la línea es cuánto de alto va
a tener la línea bueno eso lo definimos
acá pero también tenemos el espacio
entre letras bueno eso lo hacemos con
letter spacing de esta forma decimos Che
quiero que la letra tenga por ejemplo 10
píxeles y ahí hace que todas las letras
estén separadas las unas de las otras 10
píxeles yo por ejemplo acá le doy dos
píxeles y las letras se separan dos
píxeles pero esto lo que hace es definir
cuán separadas van a estar las letras
entre Sí de hecho hace parecer más
grande a la tipografía pero no no es que
la letra sea más grande parece más
grande pero en realidad solamente
estamos separando las letras normalmente
para botones es muy usada si yo tengo un
botón Button después vamos a ver cómo
hacer esto pongo Hola por ejemplo ven
acá tengo el botón Hola agarro el botón
pongo Button letter spacing dos píxeles
entonces ahí las letras están separadas
dos píxeles después tenemos otra más que
es text transform lo que hace es noone
ese valor que trae por defecto no
convierte ni transforma nada porque a
ver si yo digo que la si yo estoy
diciendo que la l de Loren va a ser
mayúscula y todo lo demás va a estar en
minúscula Esto va a estar en mayúscula y
demás por qué vos vas a decir a mí cómo
tiene que estar mi texto no entonces el
valor por defecto es none Pero si yo
quiero decir por ejemplo quiero que todo
el texto sea mayúscula le doy en
uppercase actualizo y ahora de repente
todo el texto se convirtió en mayúscula
Por más que si venimos acá y vemos el
código esto sigue estando en minúscula
porque yo lo escribí en minúscula pero
como tiene la propiedad text transform
uppercase literalmente me transforma
todo el texto en mayúscula y así como lo
tenemos en Upper Case también lo tenemos
en lower Case transformamos todo el
texto en minúscula si no ponemos nada
nos va a quedar como antes que yo por
ejemplo le puse la l mayúscula y la d en
mayúscula pero si se lo agregamos Ahora
ni siquiera la d ni la l van a estar
porque se transforma todo el texto en
minúscula después tenemos una bastante
curiosa que es capitalice que este es un
efecto muy común que lo que hace es me
pone la primer eh letra de cada palabra
en mayúscula ven La l mayúscula la d
mayúscula la Q en mayúscula K o sea cada
vez que iniciamos una nueva palabra cada
palabra nueva le agrega una mayúscula
ves Busca un espacio y al que sigue lo
convierte en mayúscula Busca un espacio
y al que sigue lo convierte en mayúscula
eso es una forma de verlo Yo tengo un
terrible problemita si no lo habría
visto de esa forma y después para los
Países Árabes tenemos esto que es full
withd que esto se hace en los Países
Árabes que lo que hace literalmente es
transforma el texto en un ancho completo
pero repito no nos interesa ver eso
ahora Así que lo vamos a dejar así de
hecho a nosotros ni nos afecta porque no
somos de Arabia Saudita después hay una
propiedad más que la vamos a ver cuando
veamos sombras pero se las muestro les
voy haciendo un pequeño spoiler Le acabo
de hacer un efecto de brillo Ahí está un
efecto de brillo a la letra este tipo de
cosas se puede hacer Igual Tex para mí
queda como el queda como el culo
Tex Shadow lo voy a sacar porque no me
gusta nada nada pero que sepan que
cuando veamos sombras vamos a ver todo
sobre sombras es una propiedad que se
aplica al texto pero me parece muy
pronto para verl De hecho hay otras más
que me parecen bastante pronto para
verlas tenemos por ejemplo Word wrap
break Word que esto lo que hace es me
corta las palabras tenemos Word break
break all que literalmente agarra las
palabras y me las corta a la mitad ven
esto lo corta con prioridad de cortarlo
en una sílaba esto no Esto me lo corta
así no le no le cabe una me lo corta
incluso Por más que no tenga sentido ven
me lo corta así no más no me tira la
palabra completa para abajo me la corta
yo voy a escribir un texto para que
tenga más sentido Ahí está ven pone mi
queridísimo Rey si yo le sacara esto
esto que está acá me pondría todo en una
sola línea mi queridísimo Rey me lo tira
para abajo pero con esta propiedad me lo
corta no le importa nada voy a dejar el
texto de antes y vamos a borrar estas
porque por ahora tampoco vamos a ver el
tema de de de esta ruptura porque hay
algunos efectos especiales que se pueden
hacer imagínense que están creando una
red social y de repente tienen eh tienen
que crear un chat no el chat se vuelve
demasiado largo Entonces qué hacen
cuando van a a la notificación del
mensaje usted no le pueden mostrar todo
el texto al usuario qué hacen lo que
hacen es agregar los tres puntitos como
que es un texto largo el usuario entra
al mensaje y ahí lo puedo ver completo
pero esos efectos se pueden hacer con
esto pero todavía no es momento para ver
Estas son las propiedades básicas de
texto esto normalmente es son algunas de
las cosas que le solemos dar al texto
exceptuando Line hate Esto no es una
propiedad de texto esto es una propiedad
de la línea estamos afectando dando el
tamaño de la línea porque también es
válido para cosas que tampoco son texto
Pero bueno nada sacando esto todo esto
es el son propiedades que le solemos dar
al Bueno ahora lo que vamos a ver
justamente es Cómo crear o o traer
tipografías que no están directamente en
nuestro sistema integradas a nuestra
hoja de estilos para poder bueno darle
la tipografía que se nos dé la gana a
nuestro documento html no hay dos formas
la primer forma se las voy a enseñar
Okay es la más fácil y muy simple y la
segunda ya es un poquito más avanzada la
verdad mi consejo sería que ustedes la
vean después de ver otras cosas en el
curso pero aún así la voy a enseñar si
tienen los huevos así para verla
buenísimo tema suyo pero voy a enseñar
ambas en esta sección para arrancar una
de las formas es viniendo a Google fonts
buscan Google fonts entran y acá
básicamente tienen un montón de
tipografías para elegir supónganse que
van a elegir Monserrat a mí Monserrat me
encanta es una tipografía que me gusta
mucho a ver si la encuentro Monserrat
Acá está es una tipografía que la verdad
que me gusta bastante Entonces yo la
selecciono No acá está seleccionada y yo
acá lo que tengo que hacer es
seleccionar la versión que quiero aunque
no aparezca esto que está acá son todas
Fuentes diferentes solamente que son
versiones distintas de moncerrat esto es
lo que yo les decía esto que está acá es
el el weight esto es el grosor de 100
grosor de 200 grosor de 300 grosor 400
Esta es una tipografía que ya viene con
diferentes tipos de grosor por ejemplo
También tienen por ejemplo la itálica
tienen la versión italic de 400 tienen
la versión italic de 600 tienen la 700
normal y la 700 con it italic 80000
normal y 800 con italic así tienen con
todo la verdad que está muy bueno así
que es una tipografía bastante completa
supónganse que yo por ejemplo me quiero
descargar esta que está acá la regular
la normal le doy en Select y ahí se me
va a desplegar este menú que básicamente
me va a permitir vincular a mi hoja de
estilos todas las tipografías que yo
quiera yo por ejemplo Quiero la regular
y además quiero no una volt le doy en
esta que está acá que es extra bt le doy
en Select extra volt y fíjense que acá
me está diciendo e tenés la regular 4 y
la extra B 800 Entonces yo qué hago con
esto copio todo así le doy en lo copio
es más tengo acá el botoncito de copiar
vengo acá y lo pego acá arriba en html
lo pego Ya tengo la tipografía que yo
quería Cómo accedo a esto porque ya está
cóm tengo que escribir moncerrat o cómo
hago Bueno ya la pueden usar fíjense que
acá dice por ejemplo que la tipografía
se llama mon Serrat Yo vengo acá y pongo
font family en vez de darle s serif le
doy Mont Serrat actualizo y ya tengo la
tipografía que quería Monserrat Incluso
si saco esta la saco van a ver que
realmente cambió la tipografía O sea la
tipografía que yo quería era Monserrat
Aunque no nos aparezca marcada ya
tenemos instalada La tipografía
Montserrat es más la tenemos en Tenemos
también la versión B si yo lo saco Ven
tengo la la versión natural que es la
versión que yo instalé pero después
tenemos otra forma de instalar
tipografías también que es una forma por
ahí un tanto más eh correcta diría yo
Igualmente esto que está acá no está mal
se puede hacer de esta forma pero yo
recomiendo hacer la otra forma que va
vamos a ver ahora que es configurar
nuestras propias tipografías lo
podríamos hacer en este archivo Pero yo
lo que voy a hacer es crear otro archivo
para configurarlas porque si no se nos
hace muy denso esto que está acá lo voy
a borrar no me gusta nada voy a crear un
nuevo archivo tal cual va a ser un
archivo tal cual Igualito a este solo
que en vez de llamarse styles.css lo voy
a llamar fonts.css por qué y porque va a
almacenar tipografías voy a crear un
nuevo archivo fonts pun css Acá está
para esto ojo que es un tema avanzado
Okay pero básicamente esto lo que va a
hacer va a ser permitirnos definir un
nuevo valor para una nueva propiedad en
este caso voy a escribir font Face acá
me va a saltar toda la estructura Okay
lo primero que me pide es que escriba en
font family el nombre que voy a crear en
este caso voy a hacer que el nombre de
la nueva tipografía se llame
Monserrat es más Solamente para que vean
que funciona le voy a poner dalto pero
podría llamarse Montserrat solo le estoy
poniendo de alto Para que vean que puede
llamarse como se nos de la gana para eso
se lo pongo Pero lo correcto es poner el
nombre de la tipografía la Ur nos pide
que escribamos en dónde está almacenada
la tipografía bueno nosotros lo que
vamos a hacer va a ser descargarla Así
que vamos a venir a Google fonts yo Esta
que está acá literalmente le voy a dar
en Download family y ahí se me va a
descargar completa le voy a dar en botón
derecho extraer aquí Acá tengo esto que
está acá si a ustedes no les aparece la
carpeta con las tipografías es porque no
están prueben con otra tipografía
control x para cortar vengo acá vengo
acá vengo acá y las pego acá voy a
reemplazar esto por fonts ahí está fonts
ese el la carpeta que tiene todas las
tipografías y acá si se fijan tengo
todas las tipografías tengo las Black
que son las más oscuras de todas tengo
la extra B tengo la light que las light
son las más finitas tengo las light
italic pero yo puedo configurar todas y
cada una de estas para eso tengo que
venir acá y para arrancar vamos a
configurar una tranquila que va a ser
Monserrat regular Esta que está acá esta
regular es la normal para eso voy a
decirle que está en la carpeta fonts Acá
está y la que voy a configurar es la Acá
está voy a configurar la regular también
me suele pedir el formato porque Qué
pasa si yo por ejemplo acá escribo dalto
van a ver que la tipografía de alto
existe igual podría ser incluso de alto
sin las comillas y me va a cargar igual
pero el problema no es este el problema
es que el navegador carga más rápido un
archivo si sabe de entrada de qué
formato es y no solamente eso esto puede
hacer que navegadores que no son
compatibles también nos permitan cargar
la tipografía para esto dejamos un
espacio y ponemos format y format va a
tener el nombre del formato en este caso
ttf significa true type ahí guardamos y
ahora me va a cargar de vuelta ttf
significa true type Ahora sí de esta
forma acabamos de Definir la tipografía
y yo lo que voy a decir como esta es
regular voy a decirle que el font weg de
esta tipografía Va a ser de 400 Qué
significa que si yo vengo acá esta es la
regular Sí y le digo que la tipografía
va a ser dalto pero el font weight va a
ser 400 me va a mandar a esta tipografía
yo puedo seguir definiendo voy a venir
acá abajo y ahora voy a definir Otra
ahora voy a definir dalto Pero esta vez
no voy a definir esta tipografía en este
caso la que acabamos de definir es esta
que está acá la regular pero qué pasa si
yo quisiera definir una versión en
negrita voy a definir esta que es la
Black es la más negrita de todas Yo sé
que es la Monster rat Black vengo acá y
escribo Monster rat Black y acá en vez
de darle F way 400 le doy en 900 porque
sé que es la más gruesa Entonces ahora
sí si yo vengo acá y le digo que el fway
va a ser de 90000 Adivinen me va a poner
la tipografía que establecí en 900 si le
doy 800 también porque va a estar más
cerca o sea esto funciona por cercanías
800 está más cerca de 900 que de 400
entonces por eso Si yo pongo eso me va a
dar la tipografía que yo definí en 900
si yo pongo por ejemplo 500 se va a
poner blandita por qué Porque 500 está
más cerca de 400 que de 900 si pongo 700
Bueno lo mismo se va a ir para 900
porque está más cerca de 900 que de 400
si esto Lo sacara y actualizara no
existiría pero lo tengo que dejar porque
si no lo dejo fíjense que el negrita de
verdad no me carga ahora si yo quiero
definir otra negrita por ejemplo quiero
definir otra negrita que esté intermedio
Cómo hago Bueno yo voy a definir un
punto medio acá en vez de la Black voy a
definir extra Blood extra Blood la voy a
definir y esto que está acá va a ser por
ejemplo 700 Ahí está entonces si yo
ahora vengo acá y le di 700 fíjense que
hay una pequeña diferencia entre 900 y
700 no se nota mucho pero si lo ven bien
de cerca creo que se puede notar mejor
la diferencia a ver le voy a dar en
nueve ven que es un poquito más gruesa
esta letra Yo le doy en siete es un
poquito más finita No mucho pero es un
poquito más finita después también tengo
la Blood por ejemplo vamos a ver si hay
otra que está Blood en vez de extra
Blood debe haber otra que sea Blood sí
Acá hay una que es bold yo le digo Blood
pero es bold no Blood no sé por qué le
digo Blood pero B es en negrita y esta
va a ser en 500 Por ejemplo ent si yo
ahora vengo acá y a esto le pongo 500
está la otra tipografía que es negrita
pero no tan negrita Entonces yo ya tengo
varias versiones tengo la versión de F
weight 400 que es esta la de F weight
500 que es esta la de font weight 700
que es esta y la de fontweight 900 que
es esta que es la más gorda de todas me
falta definir una que sea finita porque
si yo hasta le pongo 100 no se me pone
finita Yo quiero que sea la más finita
de todas para eso definimos la light
vengo acá y acá voy a poner extra light
y esta le pongo 100 Entonces ahora
fíjense qué finita que es extal es la
tipografía más finita de todas las
tipografías Entonces como es la más
finita le voy a poner 100 entonces
fíjense que ahora ya tengo definido
Acabo de crear la tipografía dalto que
tiene el tamaño de 100 400 700 500 y 900
voy a poner la de 500 antes así vamos en
orden progresivo 100 400 500 700 y 900 y
ahora sí muchachos ya tengo una
tipografía externa configurada puede ser
de 100 400 900 500 y va cambiando
dependiendo del weight que le dé acabo
de configurar mi propia tipografía en
este caso el nombre correcto no es dalto
es Monserrat por eso mi consejo Es que
le den el nombre correspondiente pero
esta es la forma de hacerlo nada hasta
acá llegó esta sección la verdad que si
entendieron esta sección tiren unos
huevos Así de grandes porque esta es una
sección avanzada que no sé por qué metí
acá la verdad no debería haberla metido
pero aún así dije Bueno no está mal la
voy a
meter dejen de sacar de contexto lo que
digo me tien El lapiz infra Bueno ahora
font family puede ser dalto y cada
propiedad es un archivo diferente
integramos la Black la bold la extra
bold la regular y la italic configuramos
cuál iba a ser el tamaño con el que
íbamos a llamar a cada una de esta forma
ven los tamaños y ya está tenemos listo
esto de las tipografías los recontra
felicito si lo entendieron si esta parte
no la entendieron quédense tranquilos de
que no es necesario todavía que hagan
esto es algo un poquito más avanzado por
eso si no lo entendieron mi consejo es
hagan simplemente esto mira hagan así
cierren guarden Y olvídense de lo que
les acabo de enseñar más adelante cuando
estén más avanzados en html y css
vuelvan a esta sección y les prometo que
la van a entender Pero si de entrada ya
la entendieron porque son terribles
prodigi los recontra felicito porque ya
están listos para ir a la siguiente
sección y estamos hablando de box model
es una de las cosas más importantes que
tenemos que ver porque sobre el box
model está construido todo ccs
básicamente Porque todos son cajas y
tenemos que entender cómo funcion una
caja que tiene cuatro propiedades
principales cuando sepamos cómo dominar
esas cuatro propiedades principales
vamos a poder hacer magia con ccs esa
sección sí que es necesaria la de recién
no tanto pero ahora empieza lo
importante Así que si esto no lo
entendiste repito despreocupate podés
continuar continuar no es algo para que
te estanques no es algo excluyente lo de
ahora sí así que esto hay que prestar la
atención
vamos Bueno ahora lo que vamos a ver es
el box model Qué es el box model muy
simple Box model significa modelo de
caja en español y en realidad es un
concepto no es que es una propiedad es
un concepto y este concepto lo que hace
es describir Cómo se diseñan y cómo se
deberían poner los elementos de html en
una página web es decir un elemento en
una página se considera una caja
rectangular de hecho lo que yo les dije
cuando arrancamos en la partecita html
es que todo era un bloque no en html
todo era como si fuera una cajita Bueno
eso es porque en html todo se considera
una caja rectangular todo y este modelo
lo que hace es definir Cómo esas cajas
se dimensionan cambian sus tamaños
cambian sus propiedades y demás y
también Cómo interactúan entre sí
imagina que cada elemento html en una
página web es una caja esta caja incluye
varias propiedades que definen Cómo se
muestra el elemento en la página estas
propiedades son uno contenido o content
el contenido es el ncle del box model
básicamente es el área donde se muestra
el texto Bueno también pueden ser
imágenes o cualquier otro contenido del
elemento después tenemos el padding o el
relleno pero todos le decimos padding
que es el espacio entre el contenido y
el borde del elemento este espacio
aumenta el área alrededor del contenido
dentro del elemento pero bajo el borde
literalmente lo que hace es separar más
el contenido del borde por eso es
relleno literalmente es relleno el
tercero es el borde o Border es una
línea que rodea tanto al contenido como
el padding se puede controlar el estilo
el grosor y el color del borde el borde
puede ser por ejemplo punteado puede ser
un borde lineado puede ser un borde
común puede ser más grueso más finito
puede ser rojo verde azul y por último
tenemos el margen o el margin que bueno
es el espacio alrededor de la caja que
está fuera del borde este espacio separa
el elemento de otros elementos en la
página A diferencia de todos los
anteriores el margin no forma parte de
la caja lo único que hace es separar ese
elemento de otras cajas Eso es todo lo
que hace Okay uno se encarga de el
contenido otro se encarga de la
distancia entre el contenido y los
bordes el otro son los bordes y el otro
es ya con toda esa cajita tenemos el
margen que es cuánto separamos esa caja
de otras cajas Eso es todo bueno acá yo
lo que tengo es una pequeña animación
para que veamos bien cómo funciona cada
cosa okay Quién me mandó un mensaje por
WhatsApp la que lo recontar remil
par realmente no paraba de insultar
bueno acá básicamente tenemos un ejemplo
de cómo cada propiedad afecta al
contenido en este caso por ejemplo Así
es una caja normal Okay la caja normal
con más padding con bordes y ahora con
margin y después tenemos la caja normal
y ahí tenemos todo separado el contenido
está en azul El padding está en en
celestito y los bordes están negros V
entonces este es el contenido estos son
los el padding los negro es el borde y
después el margin te muestra cómo se
separa la caja esa de las otras cajas y
al que me está mandando mensaje le voy a
ir a buscar a la caja y le Met un balazo
cces nada esto es una animación rápida
que hice simplemente para mostrarles y
también hice otra De hecho acá también
lo que se pueden fijar es fíjense que
como cuando el margen aumenta ahí
fíjense que cuando acaba de aumentar el
margen el contenido se hizo más
chiquitito bueno eso por alguna de las
propiedades que vamos a ver vamos a ver
todo esto porque todo esto es la forma
que tenemos de crear una caja además de
ese también me creé este para que
podamos ver todas las propiedades que
tiene tenemos por un lado el padding ven
que lo que hace es aumentar y disminuir
la distancia entre el contenido y los
bordes literalmente hace eso rellena es
esto que está acá esto que está acá esto
que está acá y esto que está acá es
Cuánta distancia hay entre este
contenido y los bordes de la caja
después tenemos el margin que ves lo que
hace es te separa la caja de otros
elementos ven eso hace el margen el
margen te separa una caja de otras Esto
igual lógicamente le está dando en todas
las direcciones o sea le está dando un
padding hacia arriba hacia los costados
y hacia abajo pero tranquilamente podría
darle solamente un relleno hacia arriba
y hacia Ninguno de los otros lugares el
margen podría separar la caja con lo que
está más abajo o sea podría dejar Más
margen hacia abajo o solo más margen
hacia arriba pero en este caso lo
configuré para que se pare para todos
los lados iguales O sea si esto aumenta
lo mismo hay más margen arriba y a todos
los costados si el padding aumenta es
padding hacia arriba hacia los costados
y hacia abajo acá tenemos el Border ven
esto es el borde los bordes de la caja
los configuramos de esta forma También
tenemos bordes radius que literalmente
lo que hace es ven redondea los bordes
Mientras más bordes radius hay más se
redondea y esto igual des preocúpense
que lo que acabo de hacer es yo creé una
página que básicamente lo que hace es
modifica las propiedades de css en
tiempo real esto lo hice con javascript
olvídense Pero esto que está acá es como
si vinieramos y escribiéramos padding
dos puntos y pusiéramos un valor pero en
vez de eso lo hacemos directamente desde
acá y después estas dos las puse en rojo
porque son propiedades rojas porque
tocarlas y tocarlas mal nos puede
todo fíjense que pasa si yo por ejemplo
aumento esto aumento esto y reduzco el
padding fíjense ya ven como ahí está
descentrado el contenido le aumento los
bordes pongo Border Box en vez de
content box pongo Border Box fíjense que
ahí ya veo que puede que se empiece a
romper un poco ven Entonces nada estas
son las propiedades de el box model que
son el wid y el hate para el contenido
el padding para el padding el margin
para el margin el Border para el Border
en este caso igual solamente es el
Border width Pero tenemos otras dos
propiedades de Border que ya vamos a ver
el Border radius para para el redondeo
de los bordes y esto que está acá que es
el box sizing que Define básicamente
Cómo se van a afectar entre sí las
propiedades o sea Define el ancho total
el alto total etcétera esto ya lo vamos
a ver también más adelante Pero esto
solamente una pequeña demo que les hice
para que entiendan qué es lo que vamos a
ver a continuación que básicamente es
esto que nos va a permitir crear todo
separaciones entre elementos más relleno
hacer cajas más grandes más pequeñas
cambiar tamaño de todos la
predisposición de elementos un montón de
cosas que son increíblemente importantes
porque son la base de todo css okay Así
que tenemos que ver bien esto y lo que
vamos a comenzar haciendo lo vamos a
actualizar Ahí está lo que vamos a
comenzar haciendo es entendiendo el Wi y
el he qu va a ser muy rápido esto lo voy
a cerrar y voy a volver a donde estaba
antes que es esto que está acá voy a
crear una nueva carpeta que se va a
llamar wid y hate Ahí está voy a copiar
los dos archivos que tengo acá y los voy
a pegar acá dentro y acá le voy a
reemplazar selectores por with y hate
Ahí está AC voy a poner esto lo voy a
borrar todo y voy a crear un elemento
que este es este elemento div
básicamente es un elemento que es un
elemento de bloque que no tiene ningún
tipo de funcionalidad solo es un
elemento que divide nada más es un
divisor es como crear una cajita vacía
sin nada Es solamente eso o sea si yo
por ejemplo escribo algo acá es
exactamente lo mismo que si escribirá
acá dentro solamente que esto es como
una división un bloquecito y lo que voy
a hacer va a ser esto que está acá
enlazarlo con este estilo que ya tenemos
acá dentro vamos a borrar todo esto y
vamos a dejar solamente abierto lo que
queremos que esté abierto que son estos
dos archivos esto que está acá lo
cerramos vo venir al costadito así puedo
visualizar esto voy a correr un servidor
de vuelta acá estamos vamos a darle en
Wi y he que es lo que teníamos recién
acá Está bueno yo primero voy a agarrar
la caja okay Y le voy a dar una
propiedad del fondo que vamos a ver más
adelante no se preocupen pero se llama
background voy a hacer que el fondo sea
rojo para arrancar el fondo va a ser
rojo por qué no estamos viendo el color
rojo del fondo simple porque la caja no
tiene ni ancho ni alto si le damos un
width de por ejemplo 200 píxeles tampoco
vamos a ver nada Por qué Porque falta el
height que es el alto Vamos a darle un
hate o sea un alto 200 píxeles
actualizamos Ah qué boludo estábamos
modificando el otro bueno primero voy a
borrar Esto bueno ahora sí tengo el
estilos de acá Bueno yo voy a darle
background red esto lo que hace es
agregar un fondo Ahora cuando yo escriba
hte 200 píxeles ahí ya se va a tener un
tamaño la caja voy a minimizarlo para
que lo puedan ver bien acabamos de crear
una caja yo le puedo dar que la caja sea
más ancha por ejemplo ven le puedo hacer
que sea más ancha Ahí va y la caja Ahora
tiene 400 píxeles de ancho y 200 píxeles
de alto yo puedo hacer que tenga 100
píxeles de alto o que tenga 10 píxeles o
que tenga cinco nada más Acabo de crear
una línea esto que está acá es le doy en
dos ya literalmente tengo una línea
acabo a crear una línea con css
increíble Bueno vamos a dejar en 300 por
100 acá le voy a poner un contenido por
ejemplo le voy a escribir esto y acá
tenemos esto yo por ejemplo voy a poner
un h1 acá Ahí va y al h1 le voy a poner
un texto que se llame título básicamente
lo que hace esto es permitirnos definir
los tamaños yo por ejemplo al h1 ahora
le voy a dar un background Blue Okay voy
a hacer que el fondo sea así Pero va a
tener un hate de 300 píxeles y fíjense
que se lo comió completo El hate ahora
es más grande entonces nada son estas
cosas que podemos modificar que de hecho
De nada nos sirven si no sabemos aplicar
el resto de propiedades pero nada
básicamente eso es lo que hace W y hate
nos definen el ancho y el alto de los
elementos yo por ejemplo puedo crear un
input Okay fíjense esto un input type
text acá tenemos un input que tipea
texto lo ven yo por ejemplo a este input
Vamos a darle input puedo venir y darle
un wid de 200 píxeles y fíjense que me
crece un poquito 500 píxeles y crece un
poquito 400 píxeles y lo que se suele
hacer por ejemplo para crear formularios
que estén adaptados a a celulares no es
dar un input que tenga un wid del 100%
por ejemplo ven entonces de esta forma
el tamaño va a ser siempre del total que
tenga esto por ejemplo del 80% por
ejemplo Entonces ustedes agrandan la
pantalla la ven desde un celular siempre
va a tener una resolución bastante
amplia le voy dar 90 por para que quede
más prolijo entonces creamos varios
inputs por ejemplo ven hasta creamos un
botón Vamos a ponerle submit Ahí está
hasta el botón incluso tiene esto que el
botón tiene otra propiedad que vamos a
ver más adelante que es box sizing
Border Box que por eso justamente no
tiene el mismo ancho pero lo vamos a
ocultar porque lo vamos a ver más
adelante Entonces esto se suele utilizar
mucho el wid y el hate para definir la
medida de los elementos yo por ejemplo
vengo acá y voy a poner un placeholder
contraseña no eh email acá le voy a
poner del tipo email acá le voy a poner
password Play holder contraseña por
ejemplo entonces acá Tiene que ingresar
el mail y acá Tiene que ingresar la
contraseña y acá Esto va a tener un
value Iniciar sesión Entonces yo lo que
puedo hacer acá con todos estos input
por ejemplo es meterlos ad dentro de un
formulario no vamos a poner un form y
vamos a meterlos adentro de un
formulario vamos a checar un poquito la
letra porque está muy grande ahí está
ahí tenemos todo adentro de un
formulario si yo al formulario por
ejemplo le doy un wid de 300 píxeles
también se achica el input por qué
porque el input va a tener un 90 por de
la caja contenedora si la caja
contenedora tiene 300 píxeles el 90 por
como input está adentro esto que está
acá es definir un porcentaje de la caja
que la contiene el form por ejemplo
tiene este ancho y el input tiene el 90
por de esto el 90 por de esto es esto
que está acá si el el formulario fuera
más ancho por ejemplo tuviera este ancho
ahora el input va a ser más grande por
qué Porque el formulario ahora es más
alto Entonces el 90 por de todo esto es
esto que está acá esto es el 90 por de
esto se entiende Entonces esto es
relativo Porque si la caja que contiene
a input mide 1000 píxeles y yo le pongo
90 va a ser el 90 por de 1000 o sea 900
píxeles Pero bueno nada eso quería
mostrárselos que básicamente Wi y hate
lo que hacen es determinan el ancho y el
alto del elemento y si están adentro de
otro elemento Y vos le das un valor en
porcentajes el porcentaje es respecto a
la caja que lo contiene vo decir with
50% 50% de Qué bueno quiero que tenga el
50% de ancho de la caja que lo contiene
la caja que lo contiene tiene 500
píxeles Quiero la mitad la mitad es 250
Per bueno no nos vamos a enrolar tanto
con esto más adelante lo vamos a ver
mejor pero ahora tenemos que ir a ver
otras propiedades que por ahora son más
importantes para el box model es el
modelo de caja Qué son padding margin y
Border y después Box sizing que Define
Cómo interactúan esas entre sí pero esas
tres que son importantísimas margin
padding y Border Así que vamos con la
siguiente sección en la que vamos a ver
juntas padding y margin y después vamos
a ver Border aparte pero vamos a ver
padding y margin en la próxima sección
vamos Bueno ahora nos toca hablar de dos
temas importantes que son básicamente
dos de las cosas que más importan a la
hora de trabajar con una caja en html y
css y estoy hablando de dos propiedades
que funcionan bastante parecido Solo que
afectan a cosas distintas todo a la caja
no estamos hablando del marching y el
padding vamos a arrancar con el padding
Okay que es algo Bastante interesante y
ya lo hemos visto cuando vimos el
ejemplo de prueba básicamente el padding
es ese espacio que hay entre el
contenido y el borde de una caja es
decir lo que hace es aumentar el tamaño
que hay alrededor del contenido pero
adentro de los bordes es decir si yo por
ejemplo escribo un texto podemos decir
que Esto es lo que ocupa el contenido si
yo a esto le agrego bordes así se vería
la caja tenemos un contenido y bordes
rojos esto no tiene nada de padding
porque no hay relleno entre el contenido
y los bordes no hay nada en el medio
Pero si yo esto le agrego padding
supónganse le voy a agregar un poco de
padding así veríamos la diferencia en el
elemento final es decir en un elemento
básicamente que tenemos padding como ven
hay una distancia que es todo esto que
está acá que es literalmente lo que les
decía antes es el relleno así como los
capítulos de Naruto bueno esto pero
ahora en elementos html ahora fíjense
que la caja que no tiene padding no
tiene ningún relleno o sea no hay nada
de relleno es el contenido y los bordes
están pegaditos están literalmente
bordeando el contenido de la caja si
nosotros agregamos más padding el
contenido de la caja va a estar más
separado de los bordes porque realmente
el contenido sigue sigue midiendo lo
mismo es decir el contenido siempre va a
medir igual Solo que nosotros no lo
vemos porque no lo estamos definiendo se
acuerdan de este ejercicio que hice
fíjense voy a hacer un pequeño margin
Ahí está fíjense qué pasa cuando yo por
ejemplo Tengo este sería el contenido y
yo aumento el padding lo que pasa ven Es
que la distancia entre los bordes y el
contenido aumenta y voy a agregar más
borde para que lo notemos más ven
aumenta eso es lo que está pasando
estamos aumentando nosotros no lo vemos
pero en realidad el contenido va a medir
lo mismo No es que cambia si lo
pudiéramos separar se lo mostraría pero
el contenido mide lo mismo lo que está
cambiando es el padding que es el
relleno Entonces el contenido mide lo
mismo mide Exactamente igual que acá
solo que no lo notamos porque tenemos un
padding que es un relleno que hace que
bueno se vea algo más estético el
padding es algo muy común para cualquier
cosa y es superimportante Los invito a
mi primera sección de un mundo sin
padding Así es la barra de búsqueda de
Google con padding Así es la barra de
búsqueda de Google sin padding Así es
Instagram con padding Así es Instagram
sin padding y así se ve una página web
linda con padding y así se ve una página
web linda sin padding como ven el
padding es completamente necesario
porque si no tuviéramos padding la
verdad que hay muchas cosas que serían
una por eso es importante que
cada elemento tenga su respectivo
padding para que podamos hacer una web
más hermosa yo para eso voy a darle en
Open folder clases css y voy a crear una
nueva carpeta que se va a llamar padding
y margin le damos en seleccionar carpeta
y acá estamos creamos un archivo
index.html.com armamos la estructura
básica como siempre borramos lo que por
ahora no entendemos para que no se
mareen como siempre creamos la etiqueta
link para enlazar el styles.css como
siempre minimizamos el explorador para
que no estorbe cerramos esto como
siempre y dejan like a este video no no
digas como siempre sabes que no lo
hiciste nunca hacelo por primera vez
Dale dale Bueno lo que vamos a hacer es
crear un simple elemento div que es una
división es más vamos a mostrar y
chequear el ejemplo de padding con
algunos elementos Como por ejemplo un
formulario y un par de input yo voy a
crear un formulario Okay voy a crear un
input text Place holder y acá le voy a
poner email contraseña voy a hacer este
password acá voy a poner seña Y por
último voy a crear un input submit y
esto ya por defecto tiene el valor de
enviar perfecto hasta acá estamos todo
bien A este form le vamos a poner una
clase formulario vamos a hacer una
selección múltiple control alt y la
flechita para abajo y de vuelta la
flechita para abajo y ahora podemos
escribir con tres cursores al mismo
tiempo vamos a darle la Class formulario
gu B input Ahí estamos esto porque se me
ocurrió a mí nada más ni siquiera es
necesario pero lo vamos a hacer porque
está bueno que arranquemos a trabajar
con clases y está bueno que dejemos de
trabajar con selección por elementos ya
deberíamos dejar de seleccionar
elementos Así que vamos a trabajar con
prácticas reales por eso lo hago si es
más lindo si no le pongo clase es más
lindo si no lo hago es algo Bastante
sencillo y simple de hacer pero lo voy a
hacer porque está bueno que empecemos a
aplicar otra forma de seleccionar
elementos que es lo que tendremos que
hacer en el futuro esto que está acá
utiliza la metodología bem Okay que
después también la vamos a ver un
poquito más adelante es bastante simple
es una de las tantas metodologías que
hay hoy en día existen muchas por suerte
antes era la más común pero no es
momento de explicarlo para eso voy a
venir a Styles ahora lo que voy a hacer
es darle en Go Live para que se me
cargue el servidor acá me cargó Perfecto
Bueno lo que vamos a hacer ahora probar
y chequear qué es lo que sucede si le
damos padding a el formulario vamos a
agrandar un poquito esto así lo podemos
ver mejor si yo por ejemplo selecciono
el formulario punto formulario Okay
Vamos a darle un background en este caso
va a ser red solamente para que podamos
ver el fondo como ven prácticamente el
fondo no lo podemos apreciar porque como
esto el contenido es todo lo que vemos
que está ocupando casi que no vemos un
fondo este es un elemento en bloque O
sea que va a ocupar toda la línea y el
contenido o sea el el alto del del div O
sea no te olviden que estamos en un form
Okay el form es un elemento en bloque y
si no tuviera ningún input ni siquiera
se vería el fondo porque el fondo lo
podemos ver porque ahora tiene una
altura lo que va a tener de alto este
este elemento de bloque es lo que midan
estos elementos el form el input y demás
si yo por ejemplo ahora a estos Campos
les asigno un padding formulario input
padding 20 píxeles y fíjense que lo que
acaba de pasar es que el elemento es
como que aumentó su tamaño de una forma
extraña bueno básicamente aumentamos el
relleno yo le voy a dar más chiquitito
le voy a dar 10 píxeles y ahí tenemos un
input que es un poco más agradable y
fíjense que lo que acaba de pasar es que
también puedo ver más fondo porque el
padding lo que hace es aumentar el
tamaño de la caja Es decir me está
aumentando el lugar que ocupa la caja en
la etiqueta si no tuviéramos esto
fíjense que el rojo que se ve es esto
pero si tenemos esto hay más rojo eso lo
que hace justamente es separar el
contenido de los bordes en este caso cas
estamos separando el contenido de de
esto que está acá el contenido sería
esto de los bordes que el borde lo
podemos ver Acá está bordeado en un un
borde negro si yo vengo acá por ejemplo
y al formulario le doy un padding de 10
píxeles Ahora podemos ver lo que está
pasando lo que está pasando con esto es
que el formulario está separando el
contenido de sus bordes 10 píxeles Y
ahora cuál es el contenido del
formulario y son estos tres elementos
estos tres elementos son parte del
contenido de formulario entonces lo que
estoy haciendo es hacer que se separe
todo el contenido de formulario que en
este caso son estos tres elementos 10
píxeles de cada lado cuando nosotros
estamos poniendo 10 píxeles estamos
diciendo que va a ver 10 píxeles arriba
10 píxeles al costado 10 píxeles abajo y
10 píxeles hacia allá esto de hecho es
un short hand porque en realidad es una
forma de abreviar varias propiedades yo
lo que hago con el padding Yo podría
decir padding top y acá le doy por
ejemplo 20 píxeles y lo que va a hacer
es que solamente va va a separarme el
contenido del borde de arriba 20 píxeles
Yo también puedo hacer por ejemplo
padding bottom bottom es la dirección
hacia abajo lo que está haciendo ahora
es separarme 20 píxeles el contenido con
el borde de arriba y separarme 20
píxeles el contenido con el borde de
abajo también puedo venir y decirle
padding left dos puntos y acá pongo 20
píxeles y ahora me está separando el
contenido 20 píxeles respecto al borde
de la izquierda y si ahora hago lo mismo
con padding right van a ver que si yo
pongo 20 píxeles ahora no lo estamos
apreciando pero si tuviéramos otro
elemento ento acá lo podríamos apreciar
ahora no lo podemos apreciar porque
Bueno nada no tenemos nada que nos
permita ver lo que está sucediendo pero
lo que acabamos de hacer es separar el
contenido 20 píxeles respecto al borde
de la derecha entonces lo que estamos
haciendo si nos damos cuenta es darle 20
píxeles a cada lado 20 píxeles arriba 20
píxeles abajo y 20 píxeles a los
costados los sh properties son
propiedades acortadas por eso llaman sh
hand porque es una forma de escribir
todo esto pero en vez de perder cuatro
líneas de código repitiendo lo mismo qué
hacemos decimos e que el padding Okay
sea todo 20 píxeles y fíjense que
actualizo y es exactamente lo mismo no
cambió nada esto todo esto lo ahorramos
y lo reducimos en solamente una línea de
código muy simple que es 20 píxeles y
ahí está de hecho es bastante
interesante porque el orden en el que
esto va es en el sentido de las agujas
del reloj de tal forma que si yo
quisiera definir un padding hacia arriba
de un tamaño hacia la derecha de un
tamaño hacia abajo de un tamaño y hacia
la izquierda de otro tamaño fíjense lo
que tengo que hacer voy a poner padding
10 píxeles hacia arriba y también puedo
seguir escribiendo ahora le puedo decir
hacia el costado quiero que tenga cero
píxeles hacia abajo quiero que tenga 40
píxeles y hacia la izquierda 20 píxeles
qué acabamos de hacer y esto como va en
el sentido de las agujas del reloj es
como si dijéramos padding top 10 píxeles
padding right cer píxeles en este caso
no pongo píxeles porque es es bastante
no se hace cuando nosotros escribimos
cer0 no hace falta que escribamos la
unidad de medida Por qué Porque si
tenemos cer0 cer0 va a ser siempre cero
cer píxeles va a ser cero 0 em va a ser
cer 0% Va a ser cer 0 ex va a ser cer 0
Rem va a ser cero no importa Qué unidad
de medida le demos cer0 por cualquier
cosa siempre cer0 0 * 40 es 0 0 por
10,000 es 0 0 por kilómetros es 0 0 por
metros es 0 Esto es algo que
matemáticamente tiene sentido y es si
vamos a hacer que un valor sea cero de
algo es cero absoluto Entonces es nada
el cero representa la nada entonces por
eso no hace falta que escribamos píxeles
con cero es suficiente si cambiaría si
quisiéramos poner 10 píxeles o 10 em o
10 Rem que vamos a ver más adelante las
unidades de medida pero si vamos a poner
cero no importa Qué unidad de medida sea
es lo mismo así que por eso se pone cero
entonces lo que estamos haciendo acá es
diciéndole un padding top 10 píxeles un
padding right cero también le estamos
diciendo el padding bottom 40 píxeles y
un padding left 20 píxeles escribir todo
esto es lo mismo que escribirlo Así es
decir si nosotros escribimos un solo
valor le damos eso a todos Si nosotros
pusiéramos solo ente esto Estamos
dándole 10 píxeles a todos los lados 10
arriba 10 a los costados y 10 abajo y si
escribimos los cuatro el primer valor es
el de arriba el segundo valor es el de
la derecha el tercer valor es el de
abajo y el cuarto valor es el de la
izquierda justamente piénsenlo en
sentido de las agujas del reloj tenemos
a las 12 a las 3 a las 6 y a las 9
Entonces ya sabemos que podemos utilizar
esta propiedad acortada para hacer dos
cosas Una para escribir todos los
paddings arriba a los costados y abajo
de una sola forma con un solo solo valor
y ya de esta forma nos ahorramos
escribir estas cuatro propiedades y
darles el mismo valor a todas la segunda
forma es esta que estamos ahorrándonos
darle un valor diferente a cada una es
decir ahora no tienen todas 10 píxeles
ahora esta tiene 10 est c está 40 y está
20 y lo podemos modificar Yo acá puedo
poner 100 Ven y el de arriba el padding
bueno acá lo acabo de modificar Así que
lo voy a sacar y el padding de arriba me
va a aumentar a 100 pixeles le puedo
poner cero y esto se queda en cero le
pongo 30 y esto se me quedan 30 entonces
Esto es lo pueden probar acá Tengo 40
pero le puedo poner y abajo tiene 10 le
pongo cer0 y de repente abajo tiene cer0
Entonces esto ya es como nada lo pueden
ir tanteando ustedes pero que sepan que
funciona así y tenemos una tercera forma
de usar padding Okay que es no le damos
Ni uno ni cuatro le damos solamente dos
el padding vertical y el padding
horizontal básicamente así funciona css
nos permite eh este short hand definir
tres valores diferentes Si definimos un
valor significa que eso que pusimos va
para todos los lados si ponemos cuatro
valores podemos especificar cuánto va a
tener cada lado y si ponemos dos estamos
definiendo el horizontal derecha
izquierda y el vertical arriba y abajo
si yo por ejemplo acá pongo 10 píxeles
50 píxeles esto lo voy a sacar para que
vean es como si pusiera padding top y
padding bottom van a tener 10 píxeles y
padding left y padding right van a tener
50 píxeles de vuelta en el sentido de
las agujas del reloj primero definimos
el padding vertical y después definimos
el padding horizontal arriba y abajo
esto y a los dos dos costados esto eso
es lo que estamos definiendo ven le doy
en 30 y ahí me queda cero y ahí me queda
lo que tienen que saber del padding Okay
es que afecta visualmente al a lo que va
a ocupar la caja en el espacio total
pero lo que no cambia es el tamaño del
contenido como ya sabemos el contenido
va a medir siempre lo mismo lo que hace
el padding es crear un espacio por sobre
los bordes esto dependiendo de la
propiedad que tengamos de box sizing
pero ya lo vamos a ver pero nada Está
interesante Esto es lo que hace el
padding Yo acá por ejemplo podría
dividir los inputs y hacer un formulario
estético ahora vamos a intentar hacer
algo Bastante rápido con padding vamos a
agarrar este formulario y vamos a hacer
que cada input tenga un W de 100% por
ejemplo fíjense que ahí me está ocupando
el total vamos a hacer que el padding
total sea de 30 píxeles arriba y abajo
me queda demasiado grande quiero que
arriba y abajo tenga seis píxeles y a
los costados tenga 10 entonces actualizo
y ahora sí tengo un input mucho más
lindo para mí por lo menos este botón de
enviar por ejemplo Me parece que queda
muy feo Vamos a darle una clase especial
Si yo quiero darle Dos clases a un
elemento se lo voy a mostrar ahora si yo
le Quisiera dar doble clase a un
elemento qué hago lo separo espacio y el
nombre de la otra clase formulario
submit y de esta forma el elemento tiene
dos clases tiene la clase input Pero
además tiene la clase la clase
formulario submit entonces si yo
quisiera darle estilo especialmente a
este input pongo formulario submit y
ahora sí puedo modificarlo sin problema
le puedo dar por ejemplo un letter
pacing de dos píxeles y ahí se acaba de
separar le puedo dar un text transform
en este caso le quiero dar un oper Case
Ahí va y se puso mayúscula por ejemplo
le quiero dar un background por ejemplo
red y le voy voy a dar un wid de 50% por
ejemplo y ahí tengo un formulario de
esta forma a los inputs lo mismo les voy
a dar un background Red background y
background color es lo mismo pero no no
le voy a dar red le voy a dar background
Black y color red todo el color va a ser
red acá también y el color del botón va
a ser color White Ahí está tenemos un
campo que es una porquería Pero bueno
nada acá tenemos por ejemplo para enviar
esto y acá le damos enviar el campo más
feo y asqueroso que hay por qué y porque
todavía no vimos Cómo funciona el margen
todavía no entendimos de fondo no
entendimos de colores Hay un montón de
cosas que todavía no vimos Entonces no
puedo explicárselas tampoco vimos de
colores estéticos no vimos Cómo funciona
el borde por ejemplo Porque si
supiéramos manejar los bordes y el box
sizing podríamos hacer que este
formulario se convierta en algo muy
bello tranquilos que al final estas
limitaciones que tenemos ahora Porque
llegamos solamente a este contenido css
vamos a dejar de tenerlo Pero bueno por
lo menos ya acabamos de Aprender a usar
el padding que básicamente Define esto
no acá le voy a dar en nueve y acá le
voy a dar en por ejemplo 12 Esto es lo
que me interesa a mí me interesa
entender Cómo funcionan los bordes en
este caso como verán el formulario le
dimos un padding de 30 píxeles y aún así
el padding que tiene acá no es de 30
píxeles vamos a darle un Wi del 90 por a
esto Ahí está más fácil vamos a dejarlo
ahí quiero que vean Qué pasa si yo ahora
esto le agrego margen si yo vengo acá y
le pongo margin y voy a ponerle margin
10 píxeles lo que estoy haciendo es
hacer que las cajas se separen 10
píxeles entre sí es decir 10 píxeles
hacia arriba 10 píxeles hacia abajo
hacia los costados de de hecho de esa
forma podemos evitarnos usar padding a
veces si yo saco el padding fíjense que
igual estamos viendo esto y si yo por
ejemplo saco Esto me queda Así vamos a
ver este ejemplo de otra forma Okay esto
que está acá lo voy a borrar completo y
esto que está acá voy a borrar el
contenido completo yo acá voy a hacer
cuatro divs okay Ahí está y a todos
control alt y flechita para abajo a
todos le voy a poner la clase Box
significa caja a todos los elementos de
la clase box le vamos a dar un
background por ejemplo emplo red Okay y
vamos a hacer que tengan un padding de
50 píxeles fíjense que lo que hace esto
es hacerme un cuadrado solo gigante pero
tranquilos pasa más que esto voye hacer
que tengan un he alto 50 píxeles y un
wid un ancho de 50 píxeles Vamos a darle
de 150 por 150 acá como vemos tenemos
cuatro cajas yo voy a cerrar voy a
borrar la última porque no me interesa
voy a borrar solamente la última y voy a
quedarme con estas tres aunque no lo
crean esto parece solamente un
rectángulo pero acá hay tres elementos
si le damos en inspeccionar vamos a ver
que tenemos el elemento uno el elemento
dos y el elemento tres solo que al tener
un fondo y no estar separados entre sí
no se notan Pero fíjense qué pasa si yo
por ejemplo ahora agarro esto y le digo
vas a tener un margen es decir vas a
separarte del resto de elementos de la
página unos 10 píxeles acá podemos notar
como está sucediendo lo que les
comentaba Y esto es lo que hace el
margen es una propiedad que nos permite
separar los elementos lo que nosotros le
indiquemos yo por ejemplo le doy 30
píxeles fíjense que los elementos se
separan 30 píxeles de todo lo demás 30
píxeles hacia arriba 30 hacia abajo y
demás Lo único que hay un efecto muy
común que se llama margin collapse o en
este caso colapso de márgenes que si
ustedes se ponen a pensar vamos a venir
a Paint para mostrarlo si yo por ejemplo
tengo una caja roja otra caja roja si yo
por ejemplo dejo un margen de este
tamaño Qué pasa la caja de abajo también
debería tener un margen de este tamaño
No eso es lo que pensamos es decir si la
caja tiene 10 píxeles a todos lados
deberíamos tener 10 píxeles hacia arriba
o sea acá acá esto que está acá es el
margen acá deberíamos tener 10 píxeles
esto es el doble porque tiene 10 píxeles
de abajo de la roja uno y 10 píxeles de
abajo de la roja dos Entonces debería
tener 20 píxeles y abajo lo mismo
tenemos de vuelta otros 10 píxeles no
Entonces tenemos 10 píxeles acá 20
píxeles acá y 10 píxeles acá bueno Esto
lamentablemente no funciona así el
margin los márgenes en el sentido
vertical hacia arriba y hacia abajo se
superponen o sea el margen más grande es
el que predomina es decir esto que está
acá en realidad sería así entonces acá
en vez de tener 20 píxeles tendría 10
píxeles no es como que los márgenes se
suman entre sí sino que el margen más
grande se queda acá por ejemplo si se
fijan vamos a verlo en pantalla completa
a cada una de estas tres cajas si se
fijan yo le di un margen de 30 píxeles
pero qué está pasando acá esta esto es
literalmente un cuadrado no Debería ser
así O sea acá tenemos 30 píxeles de
margen y acá tenemos 30 píxeles también
de margen cómo puede ser esto se llama
margin collapse Qué pasa cuando Pon
tenemos varios elementos los márgenes
van a colapsar entre sí esto es un
efecto que nos permite hacer mucho y no
tener que andar calculando cosas que no
nos gustan porque si esto fuera así y
nosotros quisiéramos separar todos los
elementos entre sí a más o menos 30
píxeles no lo podríamos hacer por qué
porque tendríamos que decirle Okay el
elemento este va a tener 10 píxeles a
todos lados pero abajo va a tener cinco
Porque el elemento de abajo tiene que
tener cinco hacia arriba y entre los dos
se suman y quedan 10 y hay que hacer
cálculos matemáticos todo el tiempo
entonces el margin collaps nos ahorra
esta tarea y no es que se suman si una
caja tiene 10 píxeles en todos lados y
otra caja también tiene 10 píxeles en
todos lados no es como que se superponen
y ahora la de arriba más la de abajo
suman 20 ambas van a valer 10 de hecho
la caja con el margen más alto es la que
cuenta es decir yo por ejemplo a esta
caja que está acá no vamos a ponerle
otra clase Box grande si ahora Box
grande tiene un margin de 60 píxeles lo
que va a pasar es que el margen de 60
píxeles es el que queda O sea no es que
se van a sumar y va a ser 60 más los 30
de esta sino que va a quedar el 60
porque el 60 es el número más grande sé
que es un poco complicado de entender
pero necesito que lo vean de esta forma
vamos a separarlo en dos cajas tenemos
Box un Box 2 el body tiene un margin por
defecto si le damos margin cero van a
ver que ahora de repente ya el
cuadradito se pone exactamente al borde
fíjense y lo que acabo de hacer es darle
a la caja uno un margen de 20 píxeles
ven acá le doy de 10 acá le doy de cer0
si yo le doy de 10 aumento un poquito Si
le doy 30 aumenta un poquito yo a esta
por ejemplo le saco el margin bottom de
vuelta queda así pero a la caja de abajo
le puedo agarrar y decir y poner margin
top o sea el margen de arriba de 30
píxeles y también se separa 30 píxeles
entonces es como antes lo que podemos
pensar lo que les explicaba antes era
esto lo que podemos pensar es Okay si si
yo le doy margen top 30 píxeles se
separa de la caja de arriba 30 píxeles y
si a esta le doy un margen bottom se
separa de la caja de abajo 30 píxeles si
a esta le doy un margin top Y a esta le
doy un margin bottom 30 píxeles deberían
separarse 60 en total no porque tenemos
los 30 de acá y los 30 de acá Bueno
probemos actualizo y se queda
exactamente igual este es el efecto que
les decía del margin collapse va a tomar
el margen más grande o sea si los dos
son iguales se queda con el mismo pero
si este le pongo 40 ahora el margen va a
ser de 40 si ahora le pongo 50 El margen
va a ser de 50 si a este lo igualo va a
seguir 150 ahora si este se convierte en
un margen de 60 ahora el margen más
grande va a ser el de 60 la separación
Total no es la suma del margen de abajo
de una y el margen de arriba de otra No
la separación Total que van a tener va a
ser del margen más grande el navegador
agarra y dice a ver esta se para hacia
abajo esto y esta se para hacia arriba
esto con cuál me quedo bueno me quedo
con la más grande la más grande es 60
píxeles Entonces el margen total la
separación va a ser de 60 eso es lo que
está pasando acá esto pasa normalmente
cuando tenemos dos hijos hermanos que
queremos separarlos entre sí cuando
tenemos dos elementos hermanos Es decir
hermanos significa que están uno
consecutivo al otro Es decir son están
en la misma en el mismo Rango jerárquico
por ejemplo tenemos un elemento div y
adentro de del div tenemos dos elementos
esos dos elementos son hermanos entre sí
porque tienen el mismo padre o sea están
adentro de la misma caja que los
contiene en este caso es así tenemos al
el body que es la caja padre Y estos dos
elementos que son elementos hermanos
Pero uno de los casos más comunes es
este es cuando tenemos un elemento padre
dos elementos hermanos entre sí ahí es
cuando sí ocurre pero para eso se le
suele hacer esto venimos al Body y le
damos un display Flex y un Flex
Direction column y si venimos acá ahora
ya dejó de funcionar el problema de Esto
justamente es que ahora tenemos a los
elementos como cajas flotantes esto Ya
lo vamos a ver más adelante cuando
trabajemos con justamente Flex y grid
Pero bueno nada no son cosas de las que
nos preocupemos Ahora solo que sepan que
lo pueden hacer pero después van a verse
afectado por el resto de propiedades de
flexbox no Entonces eso justamente es un
problema otra forma muy común que se
hacía antes por ejemplo era agregarle a
esto se le agregaba un padding botton
por ejemplo de un Pixel o de un padding
top Entonces de esa forma como que lo
afectaba o agregaba un padding a los
elementos y también funcionaba un mínimo
padding a los a los elementos y si tenía
l padín ya no colapsaba o también se les
agregaba un borde y tampoco colapsaba
pero ahora ya esto no funciona y colapsa
Igual también se solía agarrar el body y
al Body darle un hiden un Perdón un
overflow hidden pero como ven tampoco
funciona otra forma que tienen de
hacerlo es agregando un separador entre
medio de las cajas que quieren separar y
acá le agregan una propiedad vamos a
sacarlo ahí está en vez de agregarle un
overflow hidden acá esto lo agregan en
el separador separador overflow hidden
actualizamos y ahí se acaban de separar
estos son las dos formas que hoy
funcionan para separar en este caso muy
puntual los elementos yo no lo
recomiendo hacer de esta forma pero
tampoco recomiendo trabajar sin grid o
sin cajas flexibles Entonces al fin y al
cabo Así que hay que trabajar con esto
teniéndolo en cuenta que el margen
colapsa y tienen que ver la forma en la
que aplicar esto y utilizarlo a favor
que normalmente lo utilizamos para
sacarle provecho entonces nada el
marching y el padding son dos
propiedades muy simples literalmente
agregan un espacio okay Y en el caso del
padding agregan un relleno Eso es todo
en el caso del padding estamos agregando
todo este relleno que está por fuera del
contenido y en caso del margin estamos
agregando todo este espacio que hace que
la caja ocupe más espacio pero no afecta
el tamaño total O sea si la caja es de
100 píxeles la caja va a seguir midiendo
100 píxeles por qué Porque la caja mide
esto esto mide 100 píxeles pero le
dijimos que Tengo un margen de 10
píxeles a cada lado Entonces al tener 10
izquierda y 10 derecha ya tenés 120
porque tenés es decir tenés los 10
píxeles de acá los 100 píxeles de acá y
los otros 10 píxeles acá ahí ya tenés
120 entonces la caja mide 100 píxeles
pero el tamaño que ocupa en en el la
página es de 12 20 píxeles pero nada de
eso básicamente el margen no muestra el
color del fondo porque el margen no
forma parte de la caja eso sépanlo el
borde forma parte de la caja el padding
forma parte de la caja el contenido
forma parte de la caja Son tres
propiedades que forman parte del box
model justamente que afectan al
contenido si le damos un fondo y
aumentamos el padding Okay padding 100
píxeles vamos a ver que la la caja va a
contener ese padding y el fondo va a
verse también afectado por ese padding
pero si le damos un margin de 500 por
ejemplo margin general de 500 le da
igual le damos un margin de 200 para que
sea mejor no cambia nada el tamaño no
cambia solamente cambia el borde la
separación entre otros elementos y este
nada más ahora lo que tenemos que ver
justamente son bordes así que bueno nada
voy a dejar de hablar y vamos con la
sección de bordes tranquilos como dije
que al final de esta sección de css
vamos a ver cómo crear una tarjetita
personalizada igual como ya saben se
pueden quedar tranquilos porque al final
de este curso tenemos un apartado para
hacer un montón de ejercicios esto
simplemente para reforzar conocimientos
y para ir afianzándose para que cuando
lleguemos a la el ejercicio a todos los
ejercicios finales no nos comamos el
bajón de no entender mucho vamos a ir
teniendo práctica porque ya habremos
hecho ejercicios en el medio entonces
por eso quería hacer un ejercicio cuando
terminemos esta sección de css y otros
ejercicios a medida que vayamos
avanzando en el curso Así que
seguramente nada les va a gustar eso
porque van a salir incluso antes de
llegar a apartado avanzado ya sabiendo
Cómo hacer muchas cosas entonces por eso
me gusta hacer ejercicio pero bueno nada
no voy a hablar más vamos con la sección
de
bordes bueno Ahora quiero la verdad
antes de continuar se me ocurrió yb
vamos a ver bordes pero se me ocurrió
hacer un mini mini ejercicio para que
después cuando terminemos el apartado de
css básico hagamos dos cosas Una es
agarrar lo que hagamos ahora y mejorarlo
con lo que aprendimos y otra es hacer
otro ejercicio pero por lo menos para
que sientan que algo podemos ir haciendo
y ya que estamos en marching quiero
mostrarles otra forma también de centrar
elementos que es muy poderosa que es
usando margin auto Así que ahora vamos a
ver lo voy a abrir completo Voy a entrar
y crear una nueva carpetita que va a ser
e ejercicio Okay es una carpeta adentro
de la carpeta voy a crear Index html voy
a cerrar todo lo anterior lo cierro a la
y acá dentro también creo un
styles.css voy a dejarle el styles.css
Ahí está cierro esto y ahora sí ya
tenemos esto perfecto voy a correr el
servid el servidor así podemos ver los
cambios en tiempo real ahora lo que voy
a hacer es crear justamente un div la
clase Card Así que lo que voy a hacer es
crear una tarjeta voy a crear un h1 por
ejemplo Lucas dalto vamos a venir acá
abajo poner un h2 que va a ser un
subtítulo por ejemplo programador y
desarrollador web y acá voy a poner un
párrafo que va justamente tener lo que
hago Vamos a darle un lorem en este caso
Vamos a darle control shift p Word wrap
y hasta acá quedamos perfecto vamos a
agarrar esto y hacerlo muy estético para
eso voy a seleccionar la tarjeta Card y
le voy a dar un fondo Vamos a darle un
background le vamos a poner color coral
al Body Te juro que así no se da color
las cosas pero no quiero utilizar el rgb
para no asustarlos vamos a darle un
background Black a esto Entonces ya nos
queda esto así hasta acá Venimos bien
Vamos a darle al Body un font family
sanif Por qué no acá tenemos esto
bastante simple y vamos a hacer que todo
tenga un color White Vamos a darle al
Card text align Center Ahí está estamos
con todo centrado fíjense Qué pasa si a
la tarjeta Vamos a darle un vamos a
hacerlo más chiquito porque está muy
grande vamos a ver qué pasa si yo por
ejemplo a esto le doy un wid de 400
píxeles porque no quiero que tenga más
que 400 píxeles perfecto lo tenemos acá
la vamos a trabajar acá en 400 píxeles
ahora al h1 le quiero dar un padding top
de unos 10 píxeles así estamos un lo
tenemos un poquito más para abajo
perfecto y al h2 le quiero dar un font
size de unos 20 píxeles no 18 píxeles
Ahí está de hecho me sigue quedando
grande deberíamos hacer más chiquitito
todo vamos a hacer que esto tenga 300
píxeles Ahí está vamos a agrar un
poquito esto Ahora sí vamos a hacer que
esto tenga menos menos 14 píxeles hacer
esto que sea un poquito más grande
todavía ahí está voy a poner programador
y youtuber así me entra Ahí va
programador y youtuber y al h1 le vamos
a dar un font size de unos 22 píxeles
Ahí está al h2 lo vamos a hacer finito
font weight le vamos a dar 100 Porque
queremos que sea finito nos parece malo
si no y un letter spacing de dos píxeles
ahí me quedó un poquito más separado
bien al párrafo le vamos a dar un font
size de 11 píxeles Por qué no es más más
chiquitito 10 píxeles más chiquitito 9
píxeles Ahí está pero quiero que todavía
esto sea más alto Me parece muy ancho
todo para eso voy a todavía encoger más
esto ahí está el h2 lo encogi un poquito
más al h1 Vamos a darle un margin cero
Ahí está no No necesitamos margin en el
h1 y al párrafo le vamos a dar un
padding de 20 píxeles a ver qué pasa y
ahí se nos acaba de crear esto que está
acá le vamos a dar un background
background light coral que es un
diferente se diferencia bastante de esto
y acá básicamente el dalti te cuenta un
poco sobre el dalti vamos a duplicar el
texto esto le vamos a poner justify text
Alin justify vamos a agregarle más texto
Ahora sí fíjense okay que acabamos de
crear una tarjeta personalizada esto que
está acá es una tarjetita de
presentación Quién es Lucas dalto no es
programador y youtuber y acá lo tenemos
al dalti describiéndose a sí mismo para
sentrar esta tarjeta fíjense Qué buena
técnica podemos usar usamos un margin y
escribimos auto actualizamos y se centra
se acaba de centrar esto el margin auto
lo solemos utilizar mucho para centrar
horizontalmente los elementos Por qué
Porque el margin auto lo que hace es
centrar horizontalmente a lo ancho del
total a ver si el body tuviera un wid
del 80% fíjense que se nos va a centrar
hasta acá por qué Porque el wid el body
tiene un wid más chiquitito pero
nosotros normalmente tenemos el body que
ocupa el total del ancho Entonces eso ni
se preocupa es lo mismo vieron el textal
in que como ya vimos el textal ling lo
que hace es centrar dentro de todo Su
contenido o sea dentro de todo el ancho
disponible que tiene el contenido el
Center es al centro el left es al a la
izquierda y el right es a la derecha
bueno el margin auto funciona igual si
tenemos un contenedor que es así el
margin auto lo centra a la mitad
exactamente ahí si el contenedor fuese
un poquito más chico básicamente Lo pone
a la mitad del contenedor siempre si el
contenedor todavía es más chiquito es
así por ejemplo de vuelta lo va a
centrar a la mitad siempre lo centra a
la mitad y ahora por ejemplo lo que voy
a hacer es a esta Card darle un margin
top solo el margin top de 20 píxeles y
ahora sí tengo mi tarjeta de
presentación terminada entonces acabo de
presentarme de una forma bastante linda
y estética esto es recontra mega remil
hiper básico Pero lo podemos hacer mejor
si tuviéramos por ejemplo una imagen más
adelante vamos a ver cómo trabajar con
imágenes porque en ccs se utiliza mucho
para dar estilos de ciertas formas Pero
esto es lo que después vamos a
personalizar y nos va a quedar muy
estético pero primero necesitamos hacer
otras cosas necesitamos aprender sobre
bordes necesitamos aprender sobre
sombras necesitamos aprender también
sobre colores para poder darle buenos
colores a esto y de unidades de medida y
ya con eso gente no nos vamos a
preocupar más vamos a venir a esto y
hacerlo mucho más lindo y este va a ser
nuestro primer elemento que construyamos
con html una especie de tarjeta de
presentación Así que ahora sí vamos a
ver
bordes Bueno lo que vamos a ver ahora es
la propiedad Border esta propiedad
básicamente nos permite modificar tres
aspectos fundamentales de los bordes el
primero es el tamaño Sí todo los bordes
tienen un tamaño Bueno este tamaño es el
que nos permite modificar la propiedad
Border wid después también podemos
Modificar el estilo puede ser un
bordeado de líneas puede ser un bordeado
de puntos puede ser un doble borde es
decir el estilo del borde esto se define
con la propiedad Border Style Y por
último podemos Modificar el color pues
naranja azul verde o del color que
querramos todo eso de la propiedad
Border Okay después tenemos otra
propiedad aparte que también nos permite
Modificar un aspecto muy puntual del
borde que son los redondeos Border
radius es una propiedad que nos permite
redondear las esquinas de un elemento
todo esto es lo que podemos hacer cuando
trabajamos con bordes para comenzar yo
voy a venir acá y ya lo hice por ustedes
no les voy a romper los huevos para que
ustedes vean cómo ando creando todo el
tiempo nuevos elementos de hecho ni
siquiera se lo voy a decir esto lo voy a
hacer yo internamente siempre cada vez
que inicio una clase ya voy a tener
creada la carpeta con el índex y la hoja
de estilos en este caso creé la carpeta
bordes y adentro de bordes Tengo estos
dos esto háganlo ustedes también yo ya
no se lo voy a comentar más Solamente lo
voy a hacer y así va a quedar en este
caso tenemos justamente ya todo
preparado tenemos el título bordes y lo
que voy a hacer va a ha ser crear un
simple divisor que va a tener un
contenido va a decir hola en estilo
vamos a agarrar ese divisor y ponerle un
background Red si lo corremos vamos a
tener esto le voy a dar un wid de 200
píxeles Ahí está un margin auto Ahí está
y un text align Center bien acá tenemos
nuestro super Hola Voy a hacer un
pequeño zoom un poquito más y le voy a
dar un wid de 150 píxeles mejor acá
tenemos lo que queremos tener la
propiedad Border lo que nos permite
definir voy a volver a modificar este
div más que nada para que lo tengamos
separado Esto no se hace se suele dar
todo dentro del mismo selector dentro de
la misma regla pero aún así vamos a
dárselo aparte solo para que nos
enfoquemos en Border esto que está AC lo
voy a minimizar y ahora sí ya podemos
concentrarnos voy a venir más para abajo
lo que voy a hacer es utilizar la
propiedad Border with okay Y acá le voy
a dar por ejemplo cinco píxeles
actualizo y parece que en realidad nada
cambió Pero por qué nada cambió y porque
no tiene un color el bord todavía no
definimos Cuál va a ser su color
Entonces yo acá voy a poner Border color
y le voy a dar por ejemplo black
actualizo y ahora aunque no aparezca el
elemento tiene un Border Black Por qué
no lo estamos viendo simple todavía
tampoco definimos el estilo del elemento
para eso tenemos que decir Border Style
el estilo del elemento va a ser solid un
borde Sólido y ahora que tenemos estas
propiedades definidas ya vamos a ver
correctamente los bordes Yo acá por
ejemplo si modifico el wid van a ver que
puedo modificar el tamaño ven Mientras
más le sumo más aumenta el borde del
elemento Entonces eso es lo que sucede
Yo utilizo un borde y se bord el
elemento lo voy a dejar en tres píxeles
después tenemos el color Yo acá le puedo
dar por ejemplo en Blue le puedo dar en
Red también y parece que forma parte del
elemento pero en realidad es un borde le
puedo dar White y pasa lo mismo pero a
la inversa parece que ahora la caja es
más chica le puedo dar en Orange por
ejemplo y me quedó naranjita le puedo
dar en Green me queda verde y después
tenemos solid en solid la realidad es
que la mayoría de veces que usamos la
propiedad bord Style directamente lo
dejamos en solid porque los demás son
todos un asco pero Se los voy a mostrar
para que los vean No usted tienen que
entender que muchas de las cosas que
vamos a ver en css existen pero no se
usan como muchos tipos de sombra
solamente hay un tipo de sombra que se
suele usar las demás por ejemplo casi no
se usan hay un tipo de Border que se
suele usar que es este los demás casi no
se usan pero Se los voy a mostrar
tenemos el daset por ejemplo que ven
hace este efecto pero díganme qué página
web vieron con este efecto ninguna Ni
tampoco la van a ver tienen la otra que
es Double e tiene como un doble borde
tenemos Grove que lo que hace
básicamente es es el que tienen los
inputs por decir de alguna forma pero
tiene esto que está acá tiene este
efecto bastante extraño le voy a dar de
C para que lo puedan ver Esto es lo que
hace Este es el efecto del Group lo voy
a checar un poquito nos faltó dotted que
dotted es de puntitos ven es un fondo de
puntitos y el otro es hidden que hidden
nos oculta el borde Pero sigue
existiendo hay borde pero está oculto
para cuando decidamos llamarlo pero es
diferente poner hiden que básicamente el
borde deja de afectar al flujo del
elemento ya O sea no no forma parte del
tamaño mientras que si por ejemplo acá
ponemos solid por ejemplo o lo que
pongamos acá ponemos transparente ahora
el borde ya no va a estar afectando a la
aspecto visual Pero va a seguir
existiendo porque si esto lo reducimos
el borde Sigue estando ahí solamente que
ahora ven el borde es transparente no
tiene color vamos a dejarlo de vuelta
esto en cuatro en Black y después
tenemos otra propiedad que se llama
Border radius que Border radius es una
propiedad que nos permite decidir cuánto
queremos redondearlo lo más común es
darlo o en porcentajes o en píxeles yo
por ejemplo quiero que esto se redondee
cinco píxeles fíjense como se me acaban
de redondear los bordes quiero que se
redondee ocho píxeles se acaban de
redondear los bordes esto es muy común
por ejemplo para redondear bordecitos y
que no queden tan brutos por ejemplo
cuando estábamos haciendo la tarjeta de
presentación tranquilamente podríamos
haber redondeado esto lo voy a poner en
transparent podríamos haber redondeado
por ejemplo unos seis píxeles los bordes
de las esquinas para que la carta de
presentación no se vea tan bruta y se
podría haber hecho sin ningún tipo de
problema otra cosa que se suele hacer
por ejemplo es si le dan un 25% de
redondeo pasa esto si le dan un 50% de
redondeo pasa esto y yo le dira 1000
píxeles pasa esto la diferencia cuando
ustedes dan porcentajes es que el estilo
de redondeo es Dif diferente porque no
solamente están redondeando los bordes
sino que están yendo más allá ven Yo acá
por ejemplo pongo 20 píxeles y no pasa
nada pongo 200 píxeles No pasa nada pero
si pongo 10% ven Lo que pasa es que se
redondea de otra forma bastante
particular la forma en la que se
redondea son dos formas diferentes Si
nosotros tenemos una caja okay Si usamos
una forma común de redondear la caja lo
que hace es un redondeo de forma
cuadrado lo que hace la propiedad Border
es como partir el elemento a la mitad lo
parte a la mitad crea cuadrados en las
esquinas cuadrados que son perfectos
cuadrados Ven cuadraditos y lo que hace
es redondear esos cuadrados Entonces nos
quedaría así el borde Y esto es lo que
tenemos Cuando tenemos un elemento que
tiene un borde radius en píxeles pero si
nosotros lo que hacemos Es darle un
Border radius en porcentajes el cuadrado
no está acá la pancita se va a formar
hasta acá así funciona cuando le damos
en porcentajes ven si por ejemplo Yo acá
le doy 50% fíjense que lo que está
haciendo acá es se redondeó acá porque
es como si la cajita la tuviéramos así y
de la parte de arriba se redondeó así de
esta parte se redondeó así y de esta
esta partecita se redondeó así pero si
le damos con píxeles 100 píxeles acá se
crean como cuadraditos ven un cuadradito
acá y se redondea en este cuadradito
otro cuadradito acá y se redondea en
este otro cuadradito otro cuadradito acá
y se redondea en el cuadradito y otro
acá y se redondea el cuadradito
básicamente es Dónde está el principio
del redondeo Y dónde está el final
cuando nosotros usamos píxeles el
principio del redondeo es acá y el fin
es acá Entonces estos son los principios
y estos son los finales estos son los
vértices sobre las que se redondea
mientras que cuando usamos porcentajes
es este que es la mitad del elemento son
los vértices donde se redondean Okay
entonces uno redondea de acá a acá otro
redondea de acá hasta acá Esa es la
diferencia buen ya está creo que quedó
bastante claro soy demasiado rebuscado
en fin acá el borde radius lo vamos a
dejar de seis píxeles Es muy normal
dejar cuatro píxeles en los bordes para
que tenga un mínimo bordeado Ahora yo
les expliqué otra cosa yo dije que les
iba a enseñar usar la propiedad Border
no Border Wi Border color Border Style y
Border radius Border radius funciona
aparte Pero hay una propiedad que nos
permite reemplazar estas tres así como
padding reemplaza padding top padding
right padding bottom y padding left
cuatro propiedades en una la propiedad
Border así Border reemplaza estas tres
de acá lo primero es el Border wid en
este caso es tres píxeles lo segundo es
el estilo en este caso es solid y lo
último es el color en este caso es black
si yo borro esto de acá arriba tengo
exactamente lo mismo Border es una
propiedad que el primer parámetro que le
tenemos que pasar el primer argumento
que le pasamos el primer valor es el
tamaño el wid el segundo valor es el
estilo el Style y el tercero es el color
entonces borde tamaño estilo y color y
ya de esa forma nos ahorramos todo lo
otro y si queremos modificar solamente
una de esas tres lo hacemos en el futuro
agarramos bajamos y decimos Bueno quiero
modificar ahora el tamaño Border wid
quiero que tenga 10 píxeles y es lo
mismo nos queda con el estilo Sólido y
con el color Black pero estaríamos
modificando solo el tamaño o también
podemos modificar solamente el estilo
dejamos el tamaño pero decimos Border
Style dashed por ejemplo y nos queda
este estilo o también podemos modificar
por ejemplo el color y ahora de repente
el borde es no sé Blue y de repente se
pone el borde azul entonces podemos
modificar cualquiera de estas borde
radius sí es aparte es decir es una
propiedad que funciona aparte de hecho
supónganse que yo solamente quisiera que
exista un borde arriba por ejemplo
arriba solamente Esto es algo muy usado
yo lo uso mucho le digo nada más en vez
de Border digo Border top y de esta
forma fíjense que hay solamente un borde
arriba voy a hacer un pequeño zoom acá
para que lo vean el borde ahora está
arriba puedo decir Border left y
solamente el borde está de costado puedo
decir Border bottom Y tenemos el borde
abajo o puedo decir Border right Y
tenemos el borde a la derecha Esta es
otra forma de definir bordes Por qué
Lamentablemente con la propiedad Border
solamente no podemos hacer esto así
miren no podemos venir y poner así y que
de repente Yellow y que se definan todos
los bordes no no se puede así como lo
hacemos con padding esto no se puede
porque estaríamos definiendo tres
propiedades coma otras tres propiedades
no se puede entonces para hacerlo si
queremos definir solamente el borde de
uno de los lados Bueno lo mismo Border
top y Border top es un shh también para
que no tengamos que escribir Border top
with cinco píxeles Border Style solid
Border color Blue por ejemplo Ah perdón
Border Style quise decir Border top
Border top color Ahí va y fíjense que
esto que está acá me está definiendo
Solamente el tamaño o sea el ancho del
borde de arriba el estilo del borde de
arriba pero también puedo venir acá y
decirle ahora el Border bottom que es el
borde de abajo va a tener un wid de dos
píxeles el Border botton va a tener un
Style dashed y el Border color va a ser
shellow por ejemplo ven pero bottom
color Ahora sí entonces de esta forma
estamos modificando estas tres
propiedades de Border top estas tres
propiedades de Border bottom cómo lo
puedo simplificar esta la simplifico así
Border top 5 píxeles solid Blue y esto
lo borro y me queda exactamente igual y
esta la puedo simplificar Border bottom
dos píxeles dashed shellow esto que está
acá lo borro y me queda exactamente
igual y de esta forma con estas dos
líneas me ahorré todo lo otro ahora si
nosotros queremos que el borde sea
Exactamente igual el de arriba el de
abajo y el de los costados ahí sí usamos
Border y ahí todos los bordes son
exactamente iguales Ah otra cosa
lógicamente también podemos Modificar el
Border radius de un lugar por ejemplo
Border radius tenemos por ejemplo el
Border top left radius No acá le podemos
dar por ejemplo 20 píxeles y lo que hace
es crea el borde de arriba a la derecha
tenemos el Border top right que esto lo
que hace es el borde de arriba a la
derecha o sea este es el borde de arriba
a la izquierda Este es el borde de iba a
la derecha acá por ejemplo le puedo dar
10 píxeles y ahí se me redondea menos
después tengo el Border bottom left
radius AC por ejemplo le pongo dos
píxeles y este es el borde de abajo a la
izquierda y después tengo el mismo pero
el de la derecha Ahí está y ahora lo voy
a poner por ejemplo de 10 píxeles
Entonces ya tengo con estilo el borde de
arriba a la derecha el borde de arriba a
la izquierda el borde de abajo a la
izquierda y el borde de abajo a la
derecha si quisiéramos simplificar todas
estas propiedades por de radius ya saben
esto funciona en el en el sentido del
reloj el primero si hacemos así es como
padding se le da a todos los lados si
ponemos solamente dos por ejemplo esto
funciona en diagonal o sea el primer
valor les afecta así en diagonal o sea
el que está arriba a la izquierda y
abajo a la derecha y el segundo valor
les afecta en la otra diagonal o sea el
que está abajo a la izquierda y arriba a
la derecha Entonces el primer valor está
en la propiedad verde y el segundo valor
está en la propiedad rosa es decir este
10 píxeles es este que está acá y este
que está acá y el 50 píxeles es para
este que está acá y este que está acá y
si quisiéramos darle uno a cada uno
hacemos lo mismo yo por ejemplo AC voy a
poner Cero píxeles en este caso queda
mejor poner cero y acá voy a poner dos
píxeles y fíjense que es lo que acaba de
hacer esto el primer borde que modifica
es el de arriba este de acá el segundo
borde que modifica 50 píxeles es este
grande que está acá el tercer borde que
modifica cero es este que está acá y el
borde dos que modifica el más el otro
chiquitito es este que está acá que
apenas lo vemos pero está modificado
Vamos a darle cuatro para que se note un
poquito más ahí está entonces también
funciona en el sentido de las agujas del
reloj mi consejo como les dije es que
ahora prueben terminen este video
terminen esta sección no el curso como
tal porque es como mamá voy a ver un
video antes de irme a dormir Está bien
hijo anda ver el último video pero
después anda la cama el último video no
no cuando me refiero a terminar el video
me refiero a terminar esta sección ahora
yo ya terminamos Y eso es lo que las
tareas que les dejo prueben con Border
radio prueben con Border top con Border
bottom o sea se puede hacer magia los
bordes tienen un montón de propiedades
pero las más importantes que simplifican
todo son Border y Border radius en estas
englobamos todas las demás y si queremos
personalizar algo puntual con Border
radio ya lo podemos hacer desde acá no
hace falta que pongamos Border left
color Lo acabamos de ver recién y con
Border podemos poner Border top por
ejemplo Border Button por ejemplo que
estas sí son propiedades diferentes
Aunque afecten a lo mismo son se
escriben diferente una cosa que yo suele
hacer mucho es poner bordes arriba Okay
y bordes acá esto es muy bueno lo uso
mucho ya vamos a ver más adelante Pero
bueno De hecho si ustedes Ven por
ejemplo y creeran un input V vamos a
crear un input acá estamos vamos a sacar
el div fíjense que el input por defecto
trae sus propios bordes yo escribo acá y
el input tiene bordes yo al input le
puedo sacar por ejemplo Border none si
yo no quiero que tenga bordes escribo
none bueno acá porque es un div vamos a
sacar todo esto y vamos a poner input
ahora sí Border n y fíjense que le acabo
de sacar los borders al input Por más
que cuando pongamos el mouse encima haga
un una especie de efecto que tiene
bordes esto no tiene bordes ahora
podemos personalizar el input de una
forma muy linda miren Cómo podemos
personalizar el input ahora que
aprendimos a hacerlo dos inputs l holder
email password esto es solamente un
ejemplo ahora ya lo vamos a ver mejor
voy a poner un margin de cinco píxeles
por ejemplo ahí se separaron los inputs
entre sí voy a darles un padding de seis
píxeles 9 píxeles Ahí está voy a darles
un Border n para ocultar el borde y
después voy a hacer que solamente se
pueda ver el borde de arriba Border top
un Pixel solid y Black por ejemplo y ahí
tenemos solamente el borde de arriba y a
esto le vamos a dar un background por
ejemplo background fíjense que ahí
tenemos el input personalizado
escribimos y acá lo tenemos de hecho
Quiero un color más clarito todavía
Ghost White ahora sí no se nota mucho
pero el input no es del todo blanco no
no me gusta mucho vamos a hacerlo de
vuelta White Smoke ah a mí me gusta
mucho más fíjense ahí tenemos dos input
que son muy lindos de hecho fíjense este
efecto vamos a venir acá y vamos a darle
al Body un background color Black al
input le vamos a dar un background
transparente Ahora sí un Border top
White blanco también un Border left
Border left un Pixel solid White ahí
tenemos borde de arriba y de abajo por
ejemplo o también se le puede poner
solamente un borde de abajo por ejemplo
Border bottom y ahí tenemos un borde
abajo esto también se suele hacer mucho
y le damos un color por ejemplo un Green
Yellow y escribimos acá y fíjense este
input es un efecto muy lindo este de
hecho fíjense esto podemos poner el
borde de este color también Green Yellow
Green Yellow tenemos el el formulario de
esta forma ven así tal cual y cuando
venimos y escribimos Ahí está y ahí nos
queda esto es un efecto bastante copado
que solamente lo hacemos con borde
fíjense Qué interesante o Es más yo
puedo a esto darle un bord radius de
cinco píxeles y fíjense como el input
tiene este efecto que están viendo acá
tiene como un mini relieve el input esto
también lo podemos ver a mí esto ya no
me gusta pero se puede hacer ahora vamos
con la siguiente sección que es una
sección muy importante y estoy hablando
de Box sizing que básicamente nos va a
permitir determinar la forma en la que
cada elemento cada cada componente de la
caja el padding el borde el contenido y
el margin van a interactuar entre sí
esto es importante porque vamos a ver
cambios en la forma de trabajar con la
estructura o darle propiedades al
elemento porque ya vamos a ver no voy a
hablar más así que vamos ahora sí con
Box iing que es la propiedad que nos
permite definir muchas cosas sobre el
modelo de la caja tiene dos valores nada
más Pero tenemos que entenderlos así que
vamos
bueno a ver el box sizing Okay es una
propiedad de ccs que normalmente la
utilizamos para afectar Cómo funciona el
modelo de caja predeterminado en este
caso a ver básicamente el modelo de caja
es como los navegadores calculan el
total del tamaño de un elemento est ya
sabemos que incluye el padding el bord
el contenido etcétera ahora nosotros nos
preguntamos para cómo es esto de
calcular el total del tamaño de un
elemento bueno simple imagina que tenés
una caja en este caso es un elemento en
tu página web esa caja está compuesta
por varias capas el contenido el padding
el borde y el margen hasta acá ya
sabemos todo Ahora imagínate que le
pedes al navegador que te calcule el
tamaño total de tu caja tenés dos
opciones principales la primera es el
content box Este es el modelo de haa
tradicional y es el que viene por
defecto en todos los navegadores en este
caso el tamaño que le das a la caja solo
se aplica al contenido si decís que por
ejemplo tu caja va a tener 100 píxeles a
lo alto y a lo ancho eso significa que
solo para el contenido va a tener esas
medidas si añadís relleno borde y margen
la caja crece más de esos 100 píxeles es
como si añadiese capas adicionales a la
caja original a haciéndola todavía más
grande después apareció una nueva forma
de medirlo que es no nos vamos a
posicionar ni en la segunda capa que
sería la del padding ni tampoco en la
del margen nos vamos a posicionar en la
capa del borde cuando elegís la
propiedad Border Box estás diciendo he
navegador el tamaño que te doy para la
caja incluye el contenido el relleno y
el borde pero no el margen esto es como
tener una caja de tamaño fijo si la caja
es de 100 píxeles se va a mantener 100
píxeles sin importar cuánto relleno o
borde le pongas el contenido se va a
ajustar dentro de esta caja fija es Como
si tuvieras una caja con un tamaño
externo definido y todo lo que metas
adentro en este caso el relleno y el
borde tiene que entrar dentro de ese
espacio fijo pero básicamente es eso Si
nosotros definimos el alto y el ancho
por como viene por defecto o sea en
content Box cuando agreguemos padding
bordes y demás la caja va a seguir
aumentando el tamaño cuando lo hacemos
con Border Box Esto no es así tieneen
que ajustarse ahora vamos a ir viendo
bien con un ejemplo claro yo acá por
ejemplo voy a crear un div voy a poner
la clase Box o caja y acá voy a poner Wi
100 píxeles 100 píxeles background red
vamos a hacer dos cajas más fácil vamos
a crear dos y esta vamos a poner dos eh
clases la primera va a tener Box Box
default y el segundo va a tener Box Box
New o en este caso sería New Box Pero
bueno vamos a dejarle Box New porque sí
ahora tenemos dos clases en este caso
cada caja tiene esto esto ya lo sabemos
Vamos a darle un pequeño margen de 10
píxeles así por lo menos están separadas
un poquito al Body Vamos a darle un
margen cero para que no intervenga y ahí
sí ya tenemos todo perfecto si yo por
ejemplo agarro la caja default y le doy
un padding por ejemplo de 30 píxeles
fíjense que la caja acaba de aumentar su
tamaño si le doy un Border 5 píxeles
solid Black sigue aumentando el tamaño
acá le vamos a dar un pading de 25 para
que no se nos vaya tanto y acá un Border
de 10 fíjense que el tamaño aumenta es
decir en el primer caso tenemos el
contenido más esto y si yo le dije Che
yo quiero que tenga un largo y un alto
de 100 píxeles Pero esto claramente no
mide 100 píxeles la primer caja mide 169
píxeles casi 170 píxeles por casi 170
píxeles mientras que la caja dos mide lo
que le dijimos 100 píxeles por 100
píxeles lo que vamos a hacer ahora es
agarrar a la caja nueva y vamos a
decirle que va a tener un Box sizing
Border Box esto lo que está haciendo es
decirle Ahora quiero que te estires en
el padding y después te tires hasta el
Border o sea ahora el padding y el
Border forman parte del tamaño total Qué
significa esto que si le doy exactamente
las mismas propiedades que acá fíjense
que es la misma propiedad pero Miren lo
que está pasando acá acá lo que sucede
es que le di las mismas propiedades
solamente que como esta propiedad es
nueva vamos a achicarla un poquito para
que se vea mejor si yo le sacara Border
Box la caja se hace más grande si lo
achicar No qué está pasando acá Bueno
muy simple yo por ejemplo le vo a dar
botón derecho inspeccionar para que lo
entendamos y lo que está pasando Es que
en este caso la primer caja que usa el
tamaño tradicional para definir el
tamaño de la cajas tiene 169 a pesar de
que le dijimos que queríamos que tenga
100% mientras que la segunda caja
mantiene el 100% Esto es lo que hace
Border boox esta nueva forma No no no es
nueva revieja pero digo esta forma esta
forma moderna de utilizar el cálculo del
tamaño de caja no De hecho si venimos
para acá bajemos un poquito acá estamos
diciéndole Ey el contenido lo vamos a
ajustar antes cuando nosotros decíamos
que va a ser 100% nosotros qué hacíamos
decíamos solo el contenido va a ser 100%
por eso Si venimos acá vamos a ver que
acá Cuando definimos esto estamos
definiendo esto O sea que si la caja
tiene 25 píxeles se va a seguir sumando
si los bordes tienen más se va a seguir
sumando esa la picardía que tenemos
cuando estamos utilizando Este modelo
antiguo que por defecto es como si
pusiéramos Box sizing con content Box lo
que hace es eso es decirle Ey cuando yo
defina el ancho y el alto solamente lo
voy a definir para esta sección para el
contenido todo lo que siga después el
padding el Border y el margin van a
seguir sumando bueno el margin no forma
parte del del del espacio que ocupa la
caja pero no forma parte de la caja como
tal siguen ocupando espacio o sea el
total de la caja va a ser más fíjense
que la caja como dije mide 169 mientras
que la otra el Border Box lo que hace es
decirle Ey Por favorcito si yo te pedí
que tengas 100% 100 podrías hacer que el
contenido se adapte para que funcione y
de esta forma en lugar de que el
contenido sea 100 fíjense que si yo le
saco esto vamos a sacarle esto Ahí está
en acá en Box New ahora va a seguir
siendo de 100 Pero por qué porque no
tiene nada no tiene nada entonces no le
afecta porque el tamaño total del
contenido es de 100% todavía pero si yo
a esto de repente le agrego el padding 5
píxeles fíjense que ahora me acaba de
cambiar de repente el contenido se tuvo
que adaptar hizo un cálculo automático
ahora sabe que si el padding es de 25 en
cada lado para que el tamaño total de la
caja ha sea de 100 que es lo que le
pedimos acá va a tener que hacer que el
contenido sea de 50 por 50 Border 5
píxeles en este caso 10 píxeles sera
solid Black fíjense que ahora se adapta
a esta medida porque dice ey si yo
quiero que el tamaño total de la caja
incluyendo Border padding y contenido
sea de 100 tengo que hacer que el
contenido mida Esto entonces lo que hace
es ajusta el contenido para que si le
sumamos el padding y el Border el total
sea lo que definimos acá esto no
facilita un montón de problemas
incluyendo por ejemplo tener que andar
calculando a cada rato las cajas Porque
si nosotros decimos Che esta caja tiene
que medir tanto le vamos a agregar un
margin un Border y demás es incalculable
no podemos calcular cuánto va a medir
tenemos que sumarle por ejemplo okay O
sea que si yo quiero que tenga 100
píxeles y le estoy agregando 25 de
margen tengo que dejarlo en 50 porque 50
+ 50 es 100 entonces tengo 25 de un lado
25 del otro más 50 o sea Ahí me da 100
Ah pero tengo tengo de bord de 10 o sea
que tengo que dejarle 30 30 y 30 porque
si son 10 de un lado y 10 del otro son
20 entonces Y es imposible y así fíjense
Qué pasa así si yo hago esto voy a
sacárselo y dárselo específicamente a la
caja por default ahí fíjense que más o
menos tien las mismas medidas por qué
Porque yo salto tuve que calcular más o
menos cuánto debería tener esta caja de
W y he para que el total sea de 100
píxeles esto ya hace que no necesitemos
hacer más nada directamente le ponemos
Border Box Okay en vez de en vez de esto
le decimos Border ponete en Border Okay
maestro y fíjense que ahora tenemos el
mismo resultado y encima está mejor
calculado que no vamos a fallar va a ser
exactitud total Esto es lo que hace Box
sizing sepan que vamos a utilizar
muchísimo Box sizing Border Box así que
acostúmbrate Ahora sí vamos a ir con el
apartado de colores Vamos a aprender a
dar color es hermoso pero al fin vamos a
poder colorear Sí vamos a poder usar rgb
hsl hexadecimal vamos a poder utilizar
rgba vamos a poder utilizar el nuevo que
salió occh occh parece ruso pero lo
mejor es que no es raro ustedes van a
decir chto quiero que el color de la
caja sea bordó yo agarro y digo bueno
Vamos a ponerle a 2 1 por ejemplo ahí
tenemos un bordó que es lindo dalto Cómo
hiciste eso Yo no voy a aprender si es
fácil hacer esto lo vas a quiero que me
des un azul bueno pongo el 48 yo que me
gusta mucho es un azulcito que me gusta
mucho Ven y ahora tengo este color Y van
a poder darle el color exactamente el
color que ustedes quieran van a decir ch
alto cómo voy a aprender Y si te hubiera
mostrado hace un tiempito que ibas a
aprender todo esto te lo hubieras creído
entender todo este código que estás
entendiendo ahora no te haba parecido
chino básico Entonces esto que es más
fácil todavía lo vas a poder aprender en
menos de 30 minutos te lo puedo asegurar
y vas a aprender a dar exactamente el
color que quieras vas a decir Che Ah o
sea que este Define el rojo O sea que si
le pongo más por ahí puedo lograr un
violetita Ah esto es un Rosa Ah entonces
tengo que bajarle la fuerza le pongo
nueve acá le pongo por ahí una a Y quizá
ahí sí logre un Violeta Ah Más o menos
Ah pero está muy fuerte Claro pero esta
cama no la necesito Entonces qué hago
pongo por ahí un dos y ahí sí me quedó
mieta más fuerte y esas cosas eso que
estoy haciendo ahora lo van a poder
calcular solos porque va a ser muy fácil
y no solamente con hexadecimal lo van a
poder hacer con rgb lo van a poder hacer
con hsl así que bueno nada voy a dejarlo
en Red Esta es la última vez que vamos a
usar el color de esta forma Pónganse
contentos vamos a la sección de
colorización
vamos bueno acá lo que hice básicamente
lo mismo fue crearme estos dos archivos
para ponerme a trabajar acá y
principalmente creé un div que es el
único elemento que tengo en la en la
página que tiene la clase Box que
después traje acá en css y le di estos
estilos que pueden ver acá que
básicamente es un ancho y un alto un
color y un margen para que se separe de
los demás y lo podamos diferenciar lo
que vamos a hacer ahora es ver tres
tipos de colores diferentes pero las
tres más comunes son rgb rgba hcl hsla y
hexadecimal y hexadecimal y Alfa son las
Tres formas más comunes que tenemos de
dar color cada unao tiene sus ventajas
pero en realidad realmente en el fondo
es lo mismo Solo que se hace de una
forma diferente y bueno lo que sí hsl
tiene menos colores que rgb y
hexadecimal pero ahora vamos a ir viendo
a poquito para arrancar tenemos que
entender voy a venir a Paint Y es que
vamos a ver el más básico y el más
simple de todos que es rgb y de hecho la
gente que ya viene del diseño lo van a
ver y de hecho las personas que ya
tienen un poquito de conocimiento en el
tema Ya sabrán que rgb básicamente
significa Red Green and blue o sea son
los tres colores primarios de la luz y
va a ser más fácil cuando quiere
intentar hacer combinaciones rgb
básicamente tiene
255 posibles combinaciones para cada uno
256 combinaciones posibles para cada uno
de estos valores es decir
256 tipos de rojo 256 tipos de verde y
256 tipos de azul de tal forma que si
multiplicamos 256 * 256 * 256 me va a
dar como resultado esto que está acá que
es básicamente la cantidad de colores
que tiene rgb
16,77
7,216 Así que estas son todas las
posibilidades que tenemos con rgb y
después tenemos otro más que es el alfa
que básicamente lo vamos a ver después
pero básicamente el a del rgba significa
como dije recién Alfa y habla de la
transparencia crea otro canal de
iluminación que se llama canal Alfa que
es un canal que se encarga de controlar
la opacidad entre otras palabras de el
conjunto de estas tres capas es decir es
como si tuviéramos una capa que se
encarga de decir cuánto rojo le vamos a
dar al color otra capa que tuviéramos
que decir cuánto verde le vamos a dar al
color y otra capa que nos va a pedir
cuánto azul le queremos dar al color y
otra capa que es la última que nos va a
decir Cuánta opacidad le querés dar al
total de todo vamos a arrancar con rgb
que es simple y rgb justamente nos pide
tres valores cuando nosotros acá
escribimos un un valor el valor tiene
que estar entre 0 Y
255 acá tenemos 200 56 valores del 1 al
255 y el cer entonces son 256 porque el
cero cuenta como un número Entonces
tenemos que definir cuánto rojo va a
tener cuánto verde va a tener Y cuánto
azul Es que va a tener si yo por ejemplo
vamos a ver un ejemplo muy básico vamos
a agarrar un pincelito de acá si yo le
digo Mira Quiero poner un poquito de
rojo y también quiero poner un poquito
de Azul Por ejemplo no sé que ven
ustedes Acá pero yo acá ya puedo
apreciar una especie de Violeta no lo
que tenemos que hacer acá justamente es
Definir la cantidad de cada uno que le
vamos a echar al baldecito digamos Esto
va a ser supónganse un color ustedes
tienen que decir Che Mira de los 255
colores del rojo que hay yo le voy a
echar un poquito de rojo nada más y de
verde de verde le voy a echar menos y de
azul le voy a echar mucho entonces la
suma de todo esto nos da como resultado
un color final es eso es como tener
diferentes baldecitos e ir tirándolos
para poner la cantidad que queremos de
cada uno yo por ejemplo Acá tengo el
rojo no Si de repente digo rgb Okay acá
me vo a pedir cuánto de red le quiero
poner yo le voy a decir 255 cuánto de
verde no le voy a poner nada de verde y
cuánto de azul nada de azul Entonces
actualizo no me carga porque soy tan
que puse un cero en vez de una o
por Dios Ahora sí bu Bueno lo que
acabamos de ver es exactamente lo mismo
que escribir red actualizamos y no
cambia es lo mismo por qué Porque lo que
hicimos fue permitir que la capa del
rojo esté al máximo cargada es decir va
a tener un máximo rojo ahora si yo de
repente esto lo dejo en cero pero acá
pongo 255 va a haber un máximo verde lo
que es igual que escribir si yo de
repente escribo 255 en la capa del azul
va a tener
255 que es lo máximo en este caso es
azul puro lo mismo que escribir Blue
Ahora qué pasa si yo de repente mezclo
colores Bueno voy a mezclar el máximo
del rojo con el máximo del azul obtengo
un Violeta si le pongo un poquito más de
verde obtengo un Violeta más clarito de
esta forma obtengo un rosa si de repente
le bajo acá obtengo un azulcito no que
es un Celeste bastante lindo si yo de
repente quiero formar por ejemplo un
gris Qué hago si tuviéramos todos los
valores iguales es como si tuviéramos
una sola capa de luminosidad entonces
fíjense que si ponemos todos en 200
obtenemos grises por ejemplo Entonces
esto es un gris normal Este que está acá
es un gris más oscuro porque es menos
color este que está acá por ejemplo
sería un gris casi blanco porque estamos
casi al borde del cero O sea si ponemos
todos los ceros es como si tuviéramos un
negro si ponemos todos los
255 es como si tuviéramos un blanco si
sacamos un color absolutamente es como
si tuviéramos la mezcla de otro otros
colores ven eso es exactamente lo que
obtenemos si ustedes por ejemplo quieren
formar colores que sean estéticos Tienen
varias posibilidades una es ir probando
de esta forma o si buscan rgba picker o
rgb vienen acá rgba color picker y acá
básicamente ustedes pueden elegir el
color que quieren ven básicamente van
aumentando o disminuyendo y acá pueden
elegir un buen color para lo que ustedes
quieran entonces de esta forma ven Qué
pasa si le ponen más verde por ejemplo a
un elemento si le sacan rojo si le sacan
azul pueden ver qué es lo que está
sucediendo si le sacan opacidad si le
aumentan porque el a es justamente el
otro factor si ustedes por ejemplo
vienen acá y le ponen a Ahora les va a
pedir un cuarto valor que va a ser la
opacidad es decir cuán transparente es
es la transparencia aún así lo que
quiero hacer no es explicarles este es
explicarles el otro que es mi favorito
que es hexadecimal para eso se utiliza
este signo de la almohadilla voy a hacer
un pequeño zoom para que lo puedan ver
mejor y hexadecimal también nos permite
tener
16,77 7212 posibles combinaciones de
colores y hasta una más porque tenemos
justa Met también la capa de opacidad
Así que nos permite tener como 4000
millones de colores para esto
básicamente voy a poner un punto y coma
tenemos lo mismo es r g B Red Green blue
pero Ahora nos movemos en el rango
hexadecimal hexadecimal es un sistema
que tiene 16 posibilidades por eso exa
de 16 0 1 2 3 4 5 6 7 8 9 y acá no viene
el 10 viene el a el B el c d e f acá
tenemos seis acá tenemos otros seis O
sea que ya van 12 y acá tenemos cuatro o
sea que En total son 16 justamente
hexadecimal es un sistema de base 16 así
como el decimal es de base 10 y el
binario es de base 2 Este es un sistema
de base 16 por qué porque tiene 16
números básicamente lo que hacemos de
esta forma con rgb es utilizar vamos a
sacar esto es utilizar un hashtag y
decirle cuánto queremos de rojo cuánto
queremos de verde y cuánto queremos de
azul Si yo por ejemplo digo de rojo
quiero cero esto significa cero absoluto
cero cero si yo por ejemplo digo de
verde quiero todo verde tengo que poner
f f porque el F es totalmente verde y de
repente de azul Quiero poner nada cer
Ahora vamos a ver parece el más
complicado de todos pero para mí es el
más fácil entiendo que puede ser igual
más intuitivo rgb lo acepto pero este me
gusta mucho más 00 por ejemplo ff 00 esz
es verde absoluto Perdón por qué Porque
le estamos diciendo quiero que tengas
cero rojo todo verde y cero azul yo por
ejemplo quisiera todo azul diría así por
ejemplo de esta forma si yo por ejemplo
quisiera un azul más clarito le pondría
a más oscuro Perdón le pondría Ah yo
quisiera un Azul casi negro le pondría
tres todos tres esto es azul aunque no
aparezca pero es un azul muy oscuro 55
es un poquito más claro 77 es otro
azulcito y acá básicamente tengo que
salirme un poco del azul para mezclarlo
para que se haga más verdoso por ejemplo
Entonces qué hago digo Bueno le voy a
dar un poquito de verde voy a poner 40 y
ahí por ejemplo ya es un poquito más
verde lo voy a hacer más claro le pongo
2 a ahora es más clarito le quiero dar
un poquito más de verde todavía vamos a
ponerle 6 se Ahí va ahí se pone más
verde lo quiero un azul todavía más
claro voy a aumentar la gama del azul
entonces voy a decir cc por ejemplo y
ahí no salta este azul acá lo quiero un
poco más gris y ya sabemos que si
queremos que un color sea más gris o que
tenga menos saturación lo que tenemos
que hacer es hacer que se parezca más al
color de base sabemos que por ejemplo si
tenemos todo c Okay tenemos un gris ya
sabemos si tenemos todos a tenemos un
gris también lo sabemos Entonces yo sé
que si me acerco al seis yo por ejemplo
tengo un azul pero si me acerco al al c
por ejemplo voy a poner 666 si yo el
azul lo voy bajando por ej 88 es casi un
gris esto es más azul pero es casi un
gris Entonces esta es la magia de saber
combinar los colores la forma en la que
yo los combino no es así es con
solamente tres para mí es mejor combinar
así Hola de vuelta acá la adto versión
minita de Google quería explicarles algo
normalmente podemos decir que el
hexadecimal se separa en tres partes
rojo y tenemos el valor uno y el valor
dos verde y tenemos el valor uno y el
valor dos y lo mismo con el azul lo que
quiero que entiendan es que si hacemos
un pequeño zoom al rojo en este caso
cuando ustedes definen el primer valor
están definiendo entre los 16 posibles
rojos que hay pero si se fijan a detalle
hay una diferencia entre un rojo y otro
rojo entre cada tono hay otros 16 tonos
diferentes para eso está el segundo
valor elegimos cuál de los 16 tonos
intermedios queremos de entre los 16
tonos que hay O sea que sigue habiendo
16 combinaciones posibles para cada uno
de los 16 valores o sea son 256 colores
posibles igual que con rgb esto es lo
mismo para el verde y para el azul el
primer valor elige uno de los 16 tonos
que hay y el segundo es todavía más
específico pero como estos segundos
tonos no son tan importantes como el
primero pueden utilizar una versión
abreviada si ustedes quieren darle un
rojo oscuro no necesitan poner a a
porque ese segundo a es para elegir un
rojo todavía más exacto pero si eso no
les importa y quieren hacer más rápido
pueden poner Ah y poner a es igual a
poner a si ponen B es igual a poner BB
si ponen cer es como poner 00 O sea que
si blanco es fff F pueden ponerlo con
fff si negro es
00 pueden ponerlo con 00 de esa forma se
puede abreviar el color los dejo adalto
para que se los explique mejor cómo
Bueno en vez de poner así pongo a fd por
ejemplo y esto significa esto para rojo
esto para verde esto para azul puedo
poner por ejemplo f00 es rojo 0 f0 es
verde y 00 F es azul entonces ahí ya
saben que pueden combinar f0 F es el
mismo Violeta que teníamos cuando usamos
el rgb y pusimos 255 es más acá nos dice
cuánto es en rgb por ejemplo ven De
hecho acá justamente podemos ver cuál
color tenemos Y si queremos Modificar un
color lo podemos hacer desde uso estudio
code ven venimos acá y decimos bueno Yo
quiero tener estos colores y lo podemos
ir modificando solo que esto lo que hace
es darnos el color en rgb esa es la
no lo tenemos en hexadecimal pero
lo tenemos en rgb ahí por ejemplo con lo
que les mostré que me gustaba mucho era
48e ven porque es clarito es un azul
clarito tiene un poco de rojo y bastante
de verde y más o menos me da este
resultado otro que usaba para bordeo por
ejemplo es a22 entonces tenés es como
esto que es un bordo un rojo si se fijan
le pongo cer es un rojo máximo es así si
quiero que sea un rojo más oscuro qué
hago le bajo la fuerza pongo fd c v a y
a por ejemplo es más bajito cinco es
casi un negro le pongo un nueve es
bastante oscuro le pongo un a me gusta
más yo quiero que se note menos fuerte
qué hago le pongo por ejemplo 44 y se
hace un poco más gris Entonces se hace
un poco más claro menos opaco como que
bajas la saturación del bordón poniendo
dos más arriba y ahí me queda un bordo
Yo por eso lo pongo en a do dos y ahí me
queda este bordo imaginemos un color no
sé por ejemplo yo quiero hacer un
naranja cómo lo puedo hacer y el naranja
es básicamente tiene un poquito de rojo
un poquito de amarillo podemos intentar
llegar al naranja sabemos que el naranja
de azul no tiene nada así que le sacamos
todo el azul probamos poner a Ah y ahí
tenemos un amarillo Okay pero qué pasa
esto tiene mucho de verde para mí el
naranja tiene un poquito más de rojo o
no Entonces le vamos a aumentar el B
aumentamos el rojo aumentamos más el
rojo y ahí tenemos un naranja y Qué pasa
si queremos seguir reduciendo seguimos
reduciendo voy a reducir un poquito más
el verde le pongo un ocho por ejemplo
ahí tenemos un naranja más fuerte y de
esta forma hacemos naranjas estamos
usando el máximo del rojo y mezclándolo
un poquito con verde y ahí obtenemos
naranja dicen bueno Quiero obtener un
Celeste el Celeste no tiene nada de rojo
entonces ponemos cero rojo tiene
bastante azul y bastante de verde acá
tenemos Celeste qui hacer un Celeste más
lindo Bueno le saco un poco de verde
porque por ahí es demasiado verde le
pongo nueve ahí tenemos demasiado azul
Bueno le voy a poner un c ahí tenemos un
poquito más celestito aumentamos el
verde un poquito ponerle a a a b y ahí
tenem tenemos este celestito ven es más
es mucho Celeste aumentamos esto a no sé
d por ejemplo y ahí tenemos un Celeste
un poco más lindo así es como se suelen
trabajar los colores o sea hacer esto
esto que está acá es lo mismo que hacer
esto solamente que esto es abreviado
hacer esto es para darle mucho detalle
por ejemplo en vez de poner 00 ponen 0 e
y cambia un poquito no es mucho pero
algo cambia es un cambio mínimo pero
está en vez de ponerle 0 e le pongo 02 3
por ejemplo y me cambia mínimamente Pero
algo me cambia es como para ser más
detallista a mí me da igual Yo por eso
lo dejo cero porque sé que cuando pongo
0 es 00 si pongo B es BB Y si pongo d es
dd entonces Acá tengo otra capa que es
la capa Alfa si yo por ejemplo quiero
que tenga el máximo de opacidad le doy F
se queda así si quiero que tenga el
mínimo de opacidad le doy cero y
desaparece si quiero que tenga un
poquito más de opacidad le doy tres un
poquito más de opacidad le doy seis un
poquito más de opacidad le doy nueve y
máxima opacidad de vuelta le doy F
entonces con este último podemos manejar
la opacidad del cero vamos por el 1 2 3
4 5 6 7 8 9 a b c d e f y ahí termina
entonces pu elegir la opacidad y esta
combinación si usamos esta capa tenemos
digitalmente hablando no a nivel de
datos tenemos más de 4000 mill es más es
este número El que teníamos antes es
256 cuad por 256 nos dan los 16,000 y
pico que teníamos antes esto de vuelta
por
256000 estos son exactamente la cantidad
de colores que tenemos
4294967296 O sea que tenemos una
cantidad de colores increíbles y con
esto pueden armar su sus propias paletas
de colores esto pl forma por ejemplo es
muy utilizada no sé para programas como
Adobe premiere Hay un montón de cosas
son es recontra utilizado muchísimos
programas ustedes van a poder venir y
darle este color Y lo va a entender
ahora no tengo instalado Premier no
tengo instalado Nada para mostrárselos
Pero sí tengo instalado gimp el programa
más que hay pero está voy a
agarrar este color Y voy a usar el color
Ah y acá tenemos la anotación html
fíjense que dice notación html unos
hijos de mil ni siquiera se llama
notación html sabemos que esto es blanco
por ejemplo Pero sabemos que esto
también por ejemplo es rojo entonces
fíjense que ahí nos va a mostrar un rojo
ff00 ff y se va a hacer Violeta queremos
hacer un un azulcito ponemos 44 de rojo
88 de verde y le damos cc de azul le
damos ent y se hizo un azulcito esto
agarramos y ya podemos pintar Esto del
color que queríamos así sirve para todo
literal sirve para programas de diseño
para lo que hagamos aprender rgb y
hexadecimal les va a recontra servir
después tenemos la última forma de
colorear que les voy a enseñar ahora que
es hsl la vamos a ver rápida porque la
verdad que a mí nunca me gustó e hsl y
hsla ya saben que hsla es lo mismo pero
con una capa de de alfa el básicamente
es una rueda que nos permite seleccionar
la Matiz si ustedes ponen el hue color
picker acá van a tener básicamente un
montón de paletas para ver cómo es esta
que está acá acá tienen Esta es la
paleta genuina y la real Acá está esta
que está acá 0 gr es rojo O sea que si
ponemos 0 gr es rojo después acá sigue
la saturación que en este caso se usan
porcentajes yo por ejemplo voy a decir
100% saturado Y esta es la iluminación
en este caso 100% iluminado iluminación
o luminancia en realidad el término
correcto es luminancia Entonces si
venimos acá nos va a aparecer blanco Por
qué Porque le dimos toda la luminancia
Así que si la bajamos por ejemplo 20
vamos a tener esto Vamos a darle por
ejemplo en cero vamos a tener esto le
damos en 50 que es como el punto medio y
vamos a tener el rojo que queríamos
antes o sea los colores al 50% son los
colores la versión más fuerte del color
esto que está acá es rojo y acá podemos
empezar a movernos 120 por ejemplo es
verde y 240 es azul Esos son los puntos
que ya tienen que tener acá pueden ver
ves 240 es el azul acá tenemos el 240
que es el azul tenemos el verde que es
el 120 y acá ya pueden arrancar a medir
ya saben que por ejemplo si 120 es verde
y 240 es azul El sian está en un punto
medio ven acá Acá hay como un verde un
poco más clarito más azulado acá tenemos
como una mezcla entre el xan y el azul
el verde y ahí estamos mezclando los
colores no entonces ponemos acá por
ejemplo y estamos obteniendo un Celeste
acá ya obtenemos un verde venimos acá y
obtenemos una especie de verde más
azulcito acá obtenemos un Celeste por
decir de alguna forma y acá Le bajamos
la saturación vamos a volver al color
por ejemplo rojo también le podemos
bajar la saturación para hacerlo un
pastel los colores pastel se
caracterizan por tener poca saturación y
mucha iluminación Entonces si por
ejemplo le damos en 40% de saturación
tenemos este color Y nos falta darle
luminancia entonces venimos acá y
ponemos 80 por ejemplo y ahí tenemos un
color pastel le vamos a dar en 70 porque
por ahí es muy fuerte Ah va tenemos un
color pastel acabamos de crear un color
pastel este sería como una especie de
rojito pastel yo por ejemplo Ahora
quiero poner 30 y tengo estea especie de
amarillito pastel quiero por ejemplo un
azul pastel voy al azul que es 240 y acá
ya estoy en el azul pastel voy a ir más
por el lado del Celeste porque creo que
es un azul que siento que se inclina
hacia el Violeta entonces voy a 200 y
ahí obtengo un azul que es más celestito
puedo encontrar un punto medio y llegar
a 200 ahí está ahí encontré el azul que
quería y ahí tengo un azul pastel puedo
dejar esto por ejemplo en 65 ven ahí se
vuelve de repente un poco más oscuro y
los colores que son para usar de fondo
siempre tienen que contrastar si yo por
ejemplo tengo una letra Clara tengo que
tener un fondo oscuro porque si no no se
van a ver yo por ejemplo esto le agrego
un texto voy a poner texto Si yo quiero
que este texto se vea le voy a dar un
text align text al Center Ahí va y a
esto le voy a poner padding para que
esté super centrado padding 50 píxeles
es lo mismo que darle lo de recién Ahí
lo vamos a poder ver perfecto yo Por
ejemplo si acá le doy un color más
oscurito vamos a hacer que sea por
ejemplo que tenga 30% de del fondo qué
pasa no se termina de ver bien el texto
Qué hago entonces Bueno le voy a dar por
ejemplo un color blanco y ahí ya sé que
este color es blanco tengo un texto
blanco Vamos a darle un font family
sanif Ahí va y ya tengo el texto blanco
si yo sé que por ejemplo le voy a dar un
fondo más ito por ejemplo va a tener 85
por esto el blanco no se ve Entonces qué
hago por ahí le doy el mismo color pero
más oscuro vamos a venir acá y vamos a
hacer que esto tenga un 25 ahí fíjense
que es el mismo color pero más oscuro
Entonces es un poco más estético acá le
doy 35 Ahí está y agarro y le pongo un
Border top dos píxeles solid y le pego
este mismo acá y ahí fíjense que tengo
este color le voy a dar en 45 porque por
ahí es muy bajito y ahora sí más o menos
estamos combinando colores vamos a hacer
que tenga un padding arriba y abajo de
20 píxeles y a los costados de 50 y ahí
tenemos este texto que es como una
especie de cartelito que nos salta vamos
a hacer que sea font W blad y ahí se nos
hizo un poco más gordo el texto ya
sabemos que si tenemos un elemento que
tiene un fondo claro tenemos que hacer
que el elemento sea más oscuro en este
caso el elemento sería el texto Si el
texto tuviera un fondo más oscuro el
color de texto Debería ser más clarito
porque si no no lo podemos ver sobre
todo las personas que son daltónicas les
recontra jode esto también entonces es
importante que fondos claros texto
oscuro fondo oscuro texto Claro así que
bueno ahora mi consejo de vuelta es
jueguen prueben recontra caguen la con
esto de los colores investiguen
agárrense sus colores favoritos y si no
Y si no les importa esto ya saben
siempre tienen sus color pickers
hexadecimal picker y acá también tienen
el hexadecimal este d html color code es
muy bueno entonces por ejemplo ustedes
elijen un color van a venir acá y van a
elegir un azulcito y le van a poner este
azul y tienen este azul en hexadecimal
en rgb y en hsl los tres que Les acabo
de enseñar lo pueden ver y ahora tenemos
este rojo en hexadecimal en rgb y en hsl
cualquier forma que querramos cualquier
de las Tres formas que querramos
utilizar para colorizar el elemento el
fondo o lo que sea tenemos acá el color
html color code es el mejor picker de
todos los que yo conozco por lo menos sí
está recargado de publicidad pero la
verdad que es muy bueno dalto acá habla
tu versión minita de Google no digas
idiotes Es imbécil la mejor página para
colores es ayudam loko.com búsquenla y
ussen es genial este otro no es tan
bueno Nunca me gustó tanto pero si es
verdad que tiene un montón de color
converter rgb x hcl tiene más incluso
tiene el el cmk este por ejemplo es
magenta y Yellow que sería amarillo ven
que es una porquería no me gusta mucho
pero bueno nada vamos a volver a este yo
me quedaría con este el que yo de alto
uso es este así que yo recomiendo Este
mira no hace falta que se rompan la
cabeza encontrando la combinación
perfecta para dar con el color que
quieran pueden venir acá y lo tienen
Pero saben que si quieren colorizar
rápido y si ustedes quieren porque a ver
cuando uno Crea una página web uno Crea
una página web a nombre de algo puede
ser una empresa algo propio para eso
ustedes tienen que ya saber cuáles son
los colores que van a utilizar o sea
esto se lo digo ahora esto es un curso
no de diseño es un curso htm pero ya que
le damos les doy el consejo ustedes Está
bueno que sepan los colores rgb y demás
porque ustedes pueden ir probando e
inventando Pero la realidad Cuando uno
tiene un diseño uno va a seguir una
paleta de colores que le va a dar la
marca que van a trabajar si yo por
ejemplo quiero trabajar con No lo sé Ada
13 Yo quiero trabajar en Ada 13 Ada 13
tiene una paleta de colores entonces la
paleta de colores que tengo en a 13 es
la que utilizo para desarrollar la
página pongo Google paleta de colores no
entonces acá por ejemplo Tengo la paleta
de colores que usa Google o sea uno No
necesariamente tiene por qué elegir Qué
colores son los que va a usar la empresa
el diseñador o quien sea se los da y uno
los usa o uno puede venir acá y Buscar
generador de paleta de colores entonces
vos venís acá y venís acá paleta de
colores punto no sé qué Y acá tienen
cada uno de los colores tienen los
colores en hexadecimal Y ustedes los
copian los pegan Y ya tienen esto listo
entonces acá ya tienen esto así por
ejemplo no vamos a poner el costado y
acá vienen acá y por ejemplo dice quiero
que el fondo tenga otro color sería este
color Ahí va y les queda este texto
dicen bueno Che es un texto que para mí
es muy fuerte bueno ya saben que estos
dos primeros son para el rojo estos dos
son para el verde y estos dos son para
el azul Entonces los próximos dos que
siguen son para la opacidad yo voy a
ponerle por ejemplo 44 y ahí se me hizo
mucho más clarito el color y ya está ya
tengo el texto personalizado nada en fin
a lo que voy es a que ustedes no siempre
van a elegir los colores que tienen que
utilizar pero sí está bueno que conozcan
de la teoría para poder hacer pruebas
test y demás normalmente los colores se
los da la empresa y ustedes simplemente
los ponen Pero si son desarrolladores o
diseñadores si los quieren probar Esta
es toda la teoría de colores así que es
importante que la sepan sobre todo por
ejemplo cuando trabajamos con proyectos
o queremos aprender queremos hacer cosas
lindas y no nos importa tener una buena
paleta de colores así que nuevamente lo
hacemos a ojo pero bueno es una buena
práctica buscar y encontrar paletas que
gener ten buenos diseños así que bueno
hasta acá llegó esta sección me voy
despidiendo la realidad es que tenemos
más formas de colorizar tenemos las
versiones relativas de estas formas de
coloreo pero lo vamos a ver más adelante
porque este apartado la verdad que no
nos interesa no queremos profundizar
tanto en colores ya tenemos lo que usa
el 99% de desarrolladores web para
utilizar o para darle color a cualquier
cosa puede ser a un borde a un fondo a
un texto o a lo que sea y esta es la
forma que yo normalmente uso así que
hasta acá llegamos ahora sí lo que vamos
a ver ahora son unidades de medida que
es la forma que tenemos de medir
cualquier cosa puede ser por ejemplo
medida del viewport pueden ser
porcentajes pueden ser pixeles pueden
ser em pueden ser Rem etcétera y no todo
se mide con pixeles ese es un error que
si no lo corrigen desde ahora la van a
mucho en el futuro el margen 20
píxeles el tamaño de acá van a ser de no
sé qué Esto va a tener un padding de 20
píxeles todo todo con píxeles y no es
correcto dependiendo de la medida del
proyecto o de lo que tengamos que hacer
o de la propiedad que estemos dando se
puede usar pixeles se puede usar rems se
puede usar em se puede usar porcentajes
entonces todo Es depende y es variable
Así que lo que vamos a hacer es ver esto
de las unidades de medida Cómo
aplicarlas Qué propiedad depende de cada
cosa y y Cuándo usar cada una así que
vamos ahora sí con unidades de medida
vamos Bueno lo que vamos a ver ahora son
todos los tipos de medidas que hay las
absolutas las relativas queé usar en
cada caso hay hasta centímetros
disponibles para que utilicemos acá Así
que es mágico vamos a verlo bueno acá
tenemos el html y acá el estilo css voy
a enlazarlo está el punto cs Ya está ya
está enlazado antes de arrancar no se
olviden que para ver esta pantalla
apretan control shift Pay le dan en Open
user settings json que es un formato
archivo y acá están todas nuestras
configuraciones Okay ustedes si quieren
eh estar al día que con los atajos de
teclado para que no tengan un problema
para que se les abra algo para tener el
L de editing W wp y demás pueden copiar
exactamente esto en el settings json que
ustedes tienen que pueden acceder así ya
saben con control shif p Open user
settings ahí lo deberían abrir el Jason
modifiquen así y ahora sí ya estamos
listos para arrancar bueno para arrancar
yo acá voy a crear un div que va a tener
un h1 Vamos a ponerle título y este
vamos a poner un p y al p le vamos a
poner un lorem vamos a visualizar esto
acá y acá tenemos el contenido cargado
perfecto yo ahora voy a venir al estilos
pun css voy a seleccionar voy a
seleccionar el div le voy a dar un
background Ed Ed Ed y de esta forma está
como un fondo gris Okay le voy a dar un
pequeño padding de 20 píxeles Esto está
demasiado grande Así que lo voy a checar
un poquito ahí está al h1 le voy a dar
un margin cero Ahí está y ahora más o
menos tenemos algo Bastante más lindo
esto le voy a dar un font family San
serif así Bueno más o menos se puede
apreciar siento que esta es una
tipografía que un cambio se aprecia bien
porque acá vamos a poder notar bien el
cambio en las medidas y demás voy a
darle por último un Border left dos
píxeles solid y se lo voy a dar en 999 c
píxeles esto se va a llamar notificación
Acabo de crear como una especie de
notificación Okay acá al lado Voy a
poner un spam y el spam va a tener un
hace un momento voy a agarrar el spam y
al spam le voy a dar el mismo que le
dimos al borde y un font size de 16
píxeles y un font weight de 100 porque
está bastante amplio ah y al título le
vamos a dar un font size de 20 píxeles
así está un poquito más no de 22 24 y
vamos a poner un título por ejemplo a
recibido un mensaje y así de fácil Bueno
al texto le vamos a poner un un color un
poquito más clarito vamos a agarrar el p
y al p le vamos a dar un color 555 bueno
gente lo que tengo acá básicamente es un
div Okay que adentro tiene un h1 que
tiene un título que es este has recibido
un mensaje y acá dice hace un momento
Esto está mal acá no debería haber un h1
incluso ni siquiera Debería ser un
encabezado Pero bueno nada en este caso
lo vamos a pasar porque no estamos
preocupándonos por la semántica Así que
lo vamos a pasar por ahora tenemos un
párrafo y acá tenemos los estilos tenmos
un fondo un padding una tipografía y un
Border left a esta caja del fondo al h1
le dimos un tamaño un poquito más chico
y un margen cero al spam que es este
elemento que está acá le dimos un color
grise secit intermedio entre blanco y
negro como un gris medio un gris común
le achicamos la tipografía y le dimos un
f White 100 para que sea una tipografía
finita y al párrafo le dimos un color un
poquito más clarito porque estaba en
negro y en vez de que sea negro es decir
en vez de ser 00 quedó en 555 esto
principalmente lo estoy Armando para que
podamos Ahora sí ver y entender un
poquito Cómo funcionan las unidades de
medida Okay por un lado básicamente
tenemos la medida más básica de todas
que son los píxeles obviamente Aunque ni
siquiera sea necesario aclararlo los
píxeles son medidas absolutas
básicamente son un pequeñísimo área de
luz que tenemos en nuestra pantalla una
la parte más mínima de área de luz
disponible que tenemos en la pantalla es
el Pixel lo usamos normalmente para
definir por ejemplo el tamaño de algunos
elementos ejemplo no sé como el alto y
el ancho de las imágenes por ejemplo
también el tamaño de los textos O sea la
tipografía también se suele utilizar
mucho para los márgenes y en los
paddings o sea para definir el margin y
el padding Bueno hay otras tantas
propiedades más existen una medida
bastante raros que son eh PT que cre son
puntos y picas que básicamente provienen
del mundo de la impresión es decir
cuando nosotros vamos a crear un diseño
para imprimir lo podemos hacer de esta
forma Por ejemplo si este esto que está
acá lo fuéramos a imprimir qué haríamos
acá le pondríamos por ejemplo 12 PT 12
puntos no Entonces estamos definiendo el
tamaño de esto acá también 12 PT por
ejemplo o PC por ejemplo que en este
caso es otra cosa que el PC gigante
Estos son medidas absolutas ni vamos a
adentrarnos en los puntos y las picas
Porque nada no se usan para
absolutamente nada por lo menos no los
desarrolladores promedio o el 99% deos
no lo usan y los uso nunca pero que
sepan que está son medidas después
tenemos otras muy similares que estas sí
se usan un poquito más que son los
milímetros los centímetros y las
pulgadas yo por ejemplo digo que la caja
de fondo no vamos a hacer de cuenta que
esta es una notifica apliación yo digo
Ey Mira Quiero que el tamaño de letra o
que el padding por ejemplo sea de 4 cm
en este caso en vez de píxeles son cím
actualizamos Y fíjense que ahora el
padding es de 4 cm lógicamente en
nuestras pantallas va a cambiar el
padding dependiendo del tamaño que tenga
puede ser más o menos lógicamente es
imposible que la pantalla calcule 4 cm
exactos pero cuando nosotros Hagamos una
impresión e imprimamos el diseño esto
debería salirnos de 4 cm si le damos acá
botón derecho imprimir por ejemplo esto
que está acá ven nos permite imprimir
nos permite imprimir esto no Entonces
vamos a imprimir lo que acabamos de
crear Qué pasa la impresión que vamos a
hacer nos va a generar el padding que
pedimos de 4 cm esto se usa
principalmente para esto como dije para
medidas que después en la vida real
tienen un significado también podemos en
vez de decirle 4 cm por ejemplo decimos
20 mm que este es mucho más parecido al
que teníamos antes teníamos antes por
ejemplo 20 píxeles no 20 píxeles de
padding y era esto ahora le podemos
decir por ejemplo 20 mm por ejemplo o 2
pulgadas las pulgadas se escribe in Ahí
está in viene de inch que son pulgadas
actualizamos y ahí bueno es bastante 2
pulgadas pues ser 0.2 pulgadas ahí lo
tenemos más o menos en fin estas son
formas de medir como dije que
normalmente las utilizamos okay Para más
que nada más que nada las utilizaríamos
para definir y cosas que van a ser
aplicadas a la vida real estamos Armando
el diseño de un banner por ejemplo que
se va a imprimir perfecto teneremos
armar la portada de algo que vamos a
pegar en un mural lo hacemos de esta
forma con cosas que sabemos que van a
ser impresas o aplicadas de forma física
en algún momento utilizamos medidas que
son reales y físicas se llaman medidas
físicas son absolutas pero son físicas
porque tienen un significado real físico
en cambio el Pixel no porque un Pixel en
mi celular no es lo mismo que un Pixel
en una televisión que en un monitor que
en una tablet por ejemplo Okay y
dependiendo de cuál Entonces los píxeles
físicamente sí cambian los píxeles son
diferentes 1 cím es 1 cm no importa eh
Si estás en la china en Narnia en la
luna es de acá de allá Es un cím un c es
una medida física y también otra cosa
que no les dije es también se utiliza
para maquetar interfaces táctiles si por
ejemplo estamos desarrollando una
aplicación que la gente va una página
web que la gente va a tener que tocar en
tiempo real lo podemos definir con
milímetros centímetros Pues estamos una
app táctil Okay que se puede tocar
etcétera ahora las medidas absolutas
como tal vamos a englobar todas las que
mencionamos antes Incluyendo los píxeles
y demás son ideales cuando necesitamos
tener control y ser precisos por ejemplo
maquetación de elementos muy específicos
o cuando trabajas por ejemplo con
imágenes que tienen que tener un tamaño
fijo lo único malo es que tenemos la
limitación de que no es la mejor opción
para diseños responsive ya vamos a ver
lo que significa esto pero básicamente
es que pueda verse en cualquier
dispositivo si yo por ejemplo todo lo
defino con medidas absolutas cuando
entre del celular lo más probable es que
no se vea lindo no se va a poder ver
lindo incluso Aunque lo adaptemos es
decir hay toda una teoría del diseño que
es del responsive design que es adaptar
una página web a muchos dispositivos y
muchas resoluciones pero aún así estamos
obligados a trabajar con medidas que no
son absolutas Porque cuando trabajamos
con medidas absolutas Aunque adaptemos
nuestra página al celular no se va a ver
bien porque vamos a estar limitado
porque es una medida absoluta ahora no
vamos a hacer ningún ejercicio porque
lógicamente ya trabajamos todo el curso
con píxeles Así que no hace falta ni
pensarlo por eso vamos a pasar al
apartado de unidades relativas las
unidades relativas el la forma de
definirlo es simple es una unidad que
depende de otro valor el valor de la
unidad depende de otro valor más por
ejemplo el contenedor de por ejemplo
otro contenedor o el tamaño fuente
etcétera son importantísimas para el
responsive design Okay por ejemplo
dependen de no sé cuál sea la medida que
el navegador por defecto le da a los
elementos
o dependiendo de qué tamaño tenga el
body Esto va a tener tres veces el
tamaño del Body eso es una meda relativa
la más común y que ya vimos es el
porcentaje cuando nosotros definimos un
porcentaje significa que el porcentaje
es respecto a su contenedor esto siempre
es así es decir si yo por ejemplo a un
elemento defino ese elemento con
porcentajes ese porcentaje repito es
respecto al tamaño que lo contiene si yo
por ejemplo digo que quiero que una
tipografía vamos a hacerlo más fácil yo
por ejemplo voy a agarrar el p y le voy
a dar un background Red solo para que lo
podamos ver vamos a sacarle también el
margin por defecto arriba y abajo cero
Ahí está y vamos a sacarle el padding
okay Para que se pueda apreciar mejor si
se fijan ahora que están bien pegados
los elementos lo que yo estoy haciendo
acá Okay es el p tiene un wid del 100%
hasta acá ya lo sabemos poner Esto es lo
mismo que no ponerlo porque el wid por
defecto tiene un wid del 100% el p ya lo
sabemos si yo por ejemplo le doy un wid
del
50% lo que va a estar ocupando es el 50%
respecto al tamaño que lo contiene la
caja contenedora es el div si yo por
ejemplo al di le doy un wid de 200
píxeles por ejemplo ahora de repente el
p va a tener 100 píxeles Bueno entonces
ahora que ya entendimos más o menos Cómo
funciona esto okay el tema de las
medidas sabemos que si por ejemplo le
damos un 10% va a tener un 10% de la
caja que lo contiene O sea que si esta
tiene 400 píxeles Esto va a tener un un
10% o sea va a tener 40 píxeles poner un
p de 10% es lo mismo que poner un p de
40 píxeles sí es lo mismo si le damos en
50% significa la mitad o sea que la
mitad de de 400 píxeles es 200 o sea que
debería ser lo mismo que poner acá 200
píxeles sí es exactamente lo mismo no
cambió nada A qué voy con esto a que así
se usan los porcentajes los porcentajes
lo que hacen es definen algo respecto al
tamaño contenedor pero en el texto
funciona bastante diferente si nosotros
quisiéramos dar una medida de texto en
porcentajes Eso no se hace eso está mal
pero yo por ejemplo sé que el h1 tiene
23 píxeles yo digo bueno el h1 está
dentro del div O sea que si yo de
repente le pongo
10% significa que font size sería de 40
píxeles porque wid es 400 píxeles O sea
que el 10% es 40 píxeles o sea que si yo
hago así Esto me va a tener este tamaño
y si le doy el 10% debería funcionar
igual no no porque el font size cuando
nosotros ponemos porcentajes en el font
size lo que estamos haciendo en realidad
es definir el 10% del tamaño del font
size de la caja contenedora o sea si
esta tiene un font size de 400 píxeles
recién ahí Esto va a valer 400 40
píxeles por qué Porque lo que hacemos
acá es darle un 10% del font size de
arriba o sea que si el font size del div
es de 16 píxeles acá Estamos dándole un
10% de 16 si acá tenemos vamos a vamos a
darle a al p Okay un font size de 14
píxeles es el valor por defecto acá le
doy un font size font size de 400
píxeles fíjense que ahora sí Acabo de
aumentar este tamaño y esto es lo mismo
que poner 40 píxeles es exactamente lo
mismo por qué Porque 40 píxeles es el
10% de 400 píxeles y acá estoy
diciéndole el font size del h1 va a ser
de un 10% del font size de la caja que
lo contiene O sea div que es 400 píxeles
si acá pusiera 200 Me quedaría este
tamaño que significa que ahora el h1
mide 20 píxeles que es lo mismo que
poner el 20% es una medida relativa no
se trata de tamaños se trata de
propiedades el h1 va a tener un margen
top del 50% Qué significa esto que va a
tener un 50% de qué además el h1 está
dentro del div O sea que el margin Lo
debería tener acá No acá está haciendo
un colapso de márgenes es decir está
colapsando el margen Y en vez de hacer
un margin hacia arriba el margin lo está
teniendo el div Pero bueno eso es otro
tema yo lo hago para abajo por ejemplo
vamos a hacerlo para abajo porque si no
no nos va a funcionar margin bottom
bueno acá lo que está pasando tiene que
ver con la altura del elemento padre es
decir estamos hablando del he si yo por
ejemplo le estoy dando un margin top d
Vamos a darle que el margin sea de 100%
este 100% es la altura total y por
ejemplo lo voy a sacar si venimos acá y
le damos en inspeccionar vamos a ver que
acá el di tiene 405 con 91 píxeles SI Yo
acá le doy margin Bot de 405 píxeles me
va a bajar hasta acá y si le doy un
margen de 100% me baja Exactamente lo
mismo o sea es respecto al padre si le
damos botón derecho y le damos en
inspeccionar acá cuando pasamos el mouse
por div div es el padre div tiene de
altura de he tiene 405 con 91 píxeles de
alto o sea 496 Perdón 406 repito si yo
le doy un margin bottom
406 Esto me lo debería dejar acá o sea
que cuando yo de repente le digo Marin
bottom 100% deberían ser más o menos los
mismos Así es como funciona el mar en
los márgenes y lo mismo para la derecha
si yo por ejemplo le doy un margin left
por ejemplo del 50% voy a obtener que
esto se va a mover un 50% pero ojo del
tamaño total de la caja padre a la
derecha a la izquierda eso es lo que
hace el margin left en porcentajes aún
así el margen el los porcentajes no se
suelen usar en márgenes ni en paddings
ni en tamaños de letra Así que eso des
preocúpense o sea se suele usar cada muy
tanto por ejemplo para dar un margen del
10% o hacer que un elemento tenga un wit
del 50% pero no para mucho más realmente
Así que vamos a retroceder mucho y vamos
a dejar todo esto como estaba que la
verdad que estaba muy lindo antes del
background Red Ahí está un poquito antes
del background Red y del 23 píxeles en
font size actualizo y ahora sí me quedó
esto lindo después tenemos dos medidas
más tenemos em y Rem básicamente el em
Okay es la mejor forma para mí de
definir e muchas cosas ahora vamos a ver
pero tenemos justamente esta nueva
medida relativa que son los em y los Rem
pero vamos a ver lo que es un Rem
primero vamos a ver lo que es un m un em
va a valer lo mismo que el font size del
tamaño del elemento padre fíjense Qué
interesante esto si yo por ejemplo digo
el div Okay va a tener un font size de
30 píxeles acá le voy a dar al p un font
size de 14 píxeles para que se queden
tranquilos si yo digo que el div va a
tener un font size de 30 píxeles y yo
por ejemplo ahora a p le doy un em un em
va a ser igual a 30 píxeles Si yo al div
ahora digo que el font si va a ser de 20
y actualizo un em va a ser igual a 20
píxeles y si yo por ejemplo acá pongo 2
em Exacto significa que es el doble de
un m y si un m son 20 píxeles dos em van
a ser 40 píxeles o sea que si yo por
ejemplo tengo el div en 14 píxeles que
es el tamaño que me trae por defecto el
navegador voy a tener al párrafo de 28
píxeles pieles porque el doble de 14 es
28 entonces si yo le saco esto y pongo
2m obtengo esto pero bueno a lo que voy
es a que justamente eso es lo que hace
el em el em lo que hace es ir al
elemento padre preguntar cuál es el font
size que tiene el elemento padre y
multiplicarlo por el numerito que
tenemos acá entonces la fórmula es esto
m se reemplaza por un por y el numerito
del font size que tenemos acá que sería
este entonces 2 * 14 píxeles es 28
píxeles y tenemos Exactamente lo mismo
si acá por ejemplo tuviéramos 20 píxeles
y acá ponemos por ejemplo 3 em vamos a
tener esta letra gigante sería lo mismo
que poner 3 * 20 píxeles 3 * 20 es 60
nos queda 60 píxeles actualizo y es
exactamente lo mismo porque así es como
funciona esto los cem son estas medidas
que nos dicen agarrá el tamaño del font
size del contenedor padre y multiplicalo
por el número que te voy a dar acá si es
por 1.5 esto serían 30 por ejemplo si es
por 1 pun no sé 25 esto serían 25 y así
es un cálculo bastante fácil y bastante
simple pero la verdad que es una unidad
muy útil después tenemos el Rem el Rem
básicamente lo que hace es lo mismo que
Elm solo que en lugar de ir a buscar al
elemento padre va a buscar al elemento
raíz el elemento raíz es html yo por
ejemplo acá le pongo un Rem esto le doy
font size Y le doy 30 píxeles esto
fíjense que va a tener 30 píxeles si yo
en vez de Rem le doy em actualizo y me
queda de 20 porque la caja padre tiene
20 pero si le doy Rem no va a buscar a
la caja padre vo a buscar el elemento
raíz el elemento raíz es html entonces
va a darme 30 píxeles Si yo le pongo 40
me va a dar 40 si le pongo 10 me va a
dar 10 así funciona Rem es exactamente
lo mismo que m solamente que m Busca en
la caja padre y Rem Busca el elemento
raíz que es html vamos a sacar esto que
está acá y vamos a sacarle el tema del
Rem Ahí está si no definimos el font
size para el Rem lo Define el navegador
el tamaño por defecto de 16 píxeles es
exactamente lo mismo y otra cosa que no
les dije es que si el elemento padre no
tiene definido un font size va a buscar
al elemento más padre por ejemplo el p
está dentro del div pero el div está
dentro del P O sea que si a a p le
decimos Ey Vas a tener un em Qué
significa eso que va a ver cuál es el
font size de div y se lo va a dar a p
pero si div no tiene definido el font
size lo que va a hacer es ir más arriba
todavía va a ir a buscar a la etiqueta
que con tiene a su padre o sabe ir a
buscar a su abuelo p está dentro de div
y div no tiene div está dentro de Body
Entonces vamos a buscar en Body si Body
por ejemplo tuviera un font size de 40
píxeles ahora un em de p va a ser 40
píxeles porque como este no tiene
definido el font size se va más arriba
en la jerarquía de elementos en vez de
buscar a su padre va a buscar a su
abuelo y si hubiera otra etiqueta por
afuera de Body si Body no la tiene
definida va a buscar a la que está por
afuera de Body o sea es eso cómo va
escalando va a buscar en la etiqueta
padre del padre del padre del padre del
padre hasta que encuentre un font size y
si no encuentra en ningún lado el font
size pone el valor que le trae el
navegador por defecto que es 16 píxeles
y por ejemplo Acá no está me trae 16
píxeles pero así funciona siempre va el
elemento padre fíjense que por ejemplo
vamos a hacer la prueba con esto acá
tenemos el spam el elemento eh spam es
hijo del elemento h1 porque está adentro
del h1 y h1 tiene 23 píxeles O sea que
si al spam le damos un font size de un
em debería medir lo mismo que el h1 y si
h1 no tuviera definido 40 píxeles por
qué Porque el dim no tiene definida su
medida pero si al div le diéramos un
font size de 20 píxeles mediría 20
píxeles Es más si al h1 le pudiéramos la
medida de antes font size 23 píxeles
mediría como el font size pero si el h1
no tiene va a buscar al padre de h1 que
es div Y si el div tampoco tiene va a
buscar al padre del div que es Body Y si
el body tampoco tuviera font size y el
body tuviera otro padre iría a buscar al
padre de Body que en este caso como no
hay accede al elemento al valor defecto
que le Define el navegador por eso Si de
repente sacamos acá el font size
normalmente p tiene un m que dirían 40
píxeles bueno eso también para que lo
sepan después tenemos algo Bastante
interesante que son las medidas del
viewport a hecho no le vamos a dar un
fondo background red ahí el Red si yo
quiero que el h1 tenga la mitad de alto
de lo que tiene toda la ventana entera
yo qué hago voy y le voy a dar un he de
50% Pero eso no me va a generar lo que
yo estoy buscando para eso tengo que
darle un hate de 50 viewport hate
actualizo y ahora fíjense que me está
ocupando la mitad de lo que mide la
altura total del View por disponible si
esto fíjense que si lo achico por
ejemplo se va a achicar por qué porque
esto lo que hace es medir la mitad del
alto total es el view por disponible
Igualmente funciona así también para lo
lo ancho si yo por ejemplo le doy wid de
50 View por with que en vez de View por
hate es View por with W ahora va a medir
esto y si yo lo agrando fíjense que
siempre va a medir la mitad de la
pantalla el viewport es eso el viewport
es el ancho disponible que tenemos en la
vista esto que está acá es el viewport
esto es muy común por ejemplo para hacer
ventanas modales yo esto lo voy a sacar
y voy a sacar el fondo rojo es muy común
para hacer ventanas modales si yo por
ejemplo vamos a hacer de cuenta que esta
Esto no es una notificación es una
ventana modal que se nos abrió qué
hacemos le damos un Wi de 100 View por
he Ahí está y perdón 100 View por wid
ahí está y un hate de 100 View por hate
Ahora sí Y esto tiene un ancho
tendríamos que darle un margen Cero en
realidad margin cero Ahí está y al Body
también margin cero porque tiene
márgenes por defecto Vamos a darle
también el box sizing Border Box Ahí
está ahora sí y fíjense que está
ocupando exactamente el fíjense que no
me no me genera La Barrita de scroll si
yo le sacara el box icing Border Box me
genera como esta barra de scroll que
significa que el elemento es más grande
que el viewport entonces esto que darle
así para que el el ancho sea exactamente
de lo que yo le pida yo le estoy
diciendo que que la altura sea igual a
la altura total y que el width sea igual
al ancho total al wid total entonces de
esta forma fíjense que me está quedando
este elemento de alto como le digamos y
de ancho como le digamos esto es muy
útil por ejemplo para abrir ventanas
modales que son esas ventanitas que si
te abren por ejemplo cuando querés
cargar una notificación o algo entonces
yo por ejemplo agarro y le digo vas a
tener un 90 por de View por eh Wi y un
90 por de View por he y se nos Abre así
80 por 80 Ahí está y ahí tenemos esto y
lo centramos le damos margin auto y ahí
está lo tenemos centrado es más le damos
por ejemplo un margin top de 10 View por
hate por qué porque sabemos que si le
damos un margin top de 10 View por hate
se va a separar 10 View por hate
entonces va a tener arriba 10 View por
he de espacio abajo 10 View por he de
espacio y como tenemos 80 de alto
sumamos 100 que es el total de todo y
ahora tenemos una ventanita centrada por
ejemplo lo podemos usar para lo que hace
YouTube esto que está acá que es una
especie de modal que yo si quiero puedo
cerrar vengo acá y lo cierro esto que
está acá hace que se adapte sin importar
el tamaño ven se adapta Y esto es
buenísimo después tenemos otra medida
que le voy a poner para el costado que
se llama V Max y v min qué jorque es
esto Esto es simple si yo digo un vmax
le estoy diciendo hacé una comparación
entre el hate y el wid y dame el más
grande si el más grande es hate entonces
un V Max va a ser igual a un View por
hate y un View por me va a ser igual a
un View por weight Entonces eso es lo
que hace el Max va a ser igual al más
grande y el min va a ser igual al más
chiquito Eso es todo un View por min es
igual a un View por wid cuando el wid es
más chiquito que el he y un View por Max
es igual a un View por wid cuando el wid
es más grande que el view por he Eso es
todo después tenemos ex y ch que no lo
vamos a ver porque son como están
aplicadas a la tipografía entonces
normalmente por ejemplo lo usamos para
dárselo al Line hate O sea si yo por
ejemplo vengo acá y hago así si se fijan
el Line height es un poquito más grande
que el tamaño de la letra si yo por
ejemplo le doy un Line he de una x van a
ver que ahora sí no hay espacio
básicamente lo que hace es que el la
medida esta Va a medir lo mismo que
tiene la altura de la letra X acá exact
es así de loco pero lo que hace el X es
agarrar la x medir Cuánto mide la x y es
es un x y ch es algo parecido agarra al
cero mide el ancho del cero y cuanto ese
ancho del cero es un ch por eso super
raro no lo vamos a ver es bastante usado
para otras cosas muy puntuales pero
realmente nada es es bastante extraño
así que no lo vamos a ver por ahora pero
que sepan que existe ahora Cuándo usamos
cada uno bueno para tamaño fuente
espaciado la tipografía en general em y
Rem son ideales para armar el layout o
armar las dimensiones de los elementos
se suelen usar por ejemplo porcentaje G
em o o Rem o View por wid View por he
esto para diseño responsive pero no es
que siempre se usan píxeles o siempre se
usan rems si por ejemplo no nosotros
queremos que haya algo preciso y que
algo siempre mide igual podemos usar
pixeles si por ejemplo sabemos que una
imagen queremos que tenga esa resolución
sin importar En dónde se vea o el
dispositivo o lo que sea usamos pixeles
Por ejemplo si queremos que un elemento
tenga una resolución exacta usamos
píxeles si por ejemplo queremos hacer
que una caja tenga un borde de tres
píxeles usamos píxeles para los bordes
por ejemplo usamos píxeles ahora para
dar eh lo el font size podemos usar m mi
consejo ahora es entren a páginas web
que ustedes usen todo el tiempo o a
páginas web conocidas como YouTube
Google y demás y fíjense cómo usan las
medidas cuándo usan pixeles cuándo usan
porcentajes cuándo usan rems cuándo usan
MS Entonces fíjense eso para agarrar un
poquito más de cancha y entender el
funcionamiento que le dan normalmente
los desarrolladores a las páginas que
hoy en día son Gigantes y que son
empresas multimillonarias Por ende
deberían hacer las cosas bien Entonces
nada fíjense Cómo se usan estas medidas
en proyectos grandes para ver si pueden
aprender algo y aparte prueben hagan sus
proyectos como digo siempre y jueguen
con las medidas para ver cómo le queda
más cómodo Ahora sí vamos con la
siguiente sección y estoy hablando de
fondos tenemos mucho que ver sobre los
fondos así que no me voy a alargar mucho
más Vamos a ver
fondos bueno gente ahora vamos a ver los
fondos parece que fondos Es raro no
porque voy decir Qué propiedad le
podemos dar a un fondo lo podemos hacer
rojo verde o azul y nada más no Bueno en
realidad hay mucho para hacerle a los
fondos bueno acá vamos a crear un
elemento div muy simple le vamos a poner
la clase Box es una porquería porque a
veces trabajamos con clase y a veces no
hacemos una del trabajo con clase
vamos a agarrar y vamos a darle a el box
200 píxeles G 200 píxeles margin 20
píxeles y un background Rosita Por qué
Por qué un hombre no puede usar el color
rosa bueno en fin lo que vamos a hacer
con esto es ver esta propiedad
background vamos a ver sobre fondos como
tal como ya sabemos yo puedo agarrar y
decir la propiedad más básica de todas
que es background color y en este caso
ponemos f3e por ejemplo Y tenemos este
colorcito Okay yo antes vine usando la
propiedad background pero la propiedad
background es un shh que engloba todas
las posibilidades bueno no todas Pero
casi todas las posibilidades que tiene
background Así que lo que vamos a ver
ahora son esas otras cosas que podemos
hacer con los fondos para comenzar yo al
fondo le puedo dar una transparencia
vamos a hacer de cuenta que yo por
ejemplo tengo el body y el body va a
tener un color completamente verde ahí
está Ahora sí yo a esto le puedo dar una
transparencia para eso ya saben que
sobre el cuarto parámetro del
hexadecimal pongo por ejemplo un nueve y
ahí fíjense que de repente parece que se
me hizo gris puedo poner un ocho que
sería un gris más real y ahora está como
más verde le pongo un uno y es como que
casi hubiera desaparecido ven entonces
con esto yo lo que hago es controlar la
opacidad que tiene no con este no
Entonces yo con esto lo que hago es
controlar puedo hacer que el fondo sea
más o menos opaco Para qué joraca me
sirve esto y simple yo por ejemplo en el
Bot tengo un texto enorme la caja tiene
un position absolute un top cero que
esto es lo que suelo hacer cuando
trabajo con con modales y le damos un 9
fíjense que ahora la caja es más
transparente entonces me permite ver lo
que tiene afuera me permite ver el fondo
es el mismo efecto que veíamos cuando
subíamos algo a YouTube ven esto que
está acá todo esto negro que pueden ver
de fondo es otra capa que en realidad es
negra pero tiene la transparencia a la
mitad un poquito menos Y de esa forma
podemos ver todo el fondo que es lo
mismo que esto que está acá pero sería
básicamente una capa negra de esa forma
por ejemplo la dejamos en seis y podemos
ver el fondo Entonces yo Por ejemplo si
toco acá yo desde acá No puedo
seleccionar el texto Pero si yo vengo
acá lo estoy seleccionando pero no puedo
hacer lo mismo acá No puedo seleccionar
el texto porque hay un elemento encima
No parece porque es transparente Pero
hay un elemento encima en fin no vamos a
ver esto todavía lo del position
absolute y demás pero que sepan que
normalmente trabajar con fondos con
transparencia existente o que tengan
algo de transparencia Es muy normal esto
para no lo vamos a ver tranquilo ya
llegaremos a ese momento pero eh Nada es
una una forma de de entenderlo creoo lo
que sí vamos a ver que ya es otra
propiedad es el background imagee o
image que esto lo que nos dice es Ey
podés poner una URL y esta URL va a ser
una imagen Busco soy de alto en internet
acá aparece dalto refero que por cierto
nunca más pude acceder a mi Twitch perdí
mi contraseña los de auti jamás me
respondieron los de Twitch jamás me
respondieron Jamás nadie me dio pelota
en Twitch encima había streame cuatro o
cinco veces nada más no Stream nunca
pero aún así levantamos 12,000
seguidores voy Agar imagen mía
cualquiera Como por ejemplo Esta que
está acá voy a darle botón derecho y
copiar dirección de imagen Entonces yo
vengo acá y la pego debería saltarme la
imagen y lo que hago acá es abrir
comillas y pegar la imagen acá y ahora
sí me acaba de cargar la imagen no
aparece pero les juro que me cargó la
imagen de fondo si lo esto lo achicamos
un poquito y agrandamos esto por ejemplo
10000 por 1200 Ahí vamos a ver un
poquito más la imagen más o menos 8812
por 8812 840 Perdón soy muy exacto no
importa no importa lo que tenga lo que
acabamos de hacer es hacer que Y esto no
es una imagen eh ojo no no no no es un
div es decir esto es una caja no es una
imagen es una caja Solo que el fondo es
una imagen hicimos que el fondo de este
elemento se convierte en una imagen
Ahora qué pasa si yo por ejemplo tengo
una caja contenedora que mide lo mismo
que dijimos antes por ejemplo mide 400
píxeles por 600 supongamos Qué le pasa a
la imagen fíjense lo que está pasando se
corta bueno tenemos otra propiedad que
se llama background size y podemos darle
en porcentajes si yo le doy en auto se
queda igual si le doy en 100 100%
fíjense que lo que hace es adaptarse al
ancho total el ancho de la Im hace que
la imagen básicamente entre por lo menos
en ancho si yo acá le doy 200 píxeles no
va a entrar totalmente ven lo que hace
100% es hacer que el tamaño del fondo
sea del 100% del wid del tamaño del
elemento si yo esto le pongo 400 la
imagen crece como mi si yo acá le
pongo por ejemplo 500 ven sigue
creciendo la imagen también como mi
entonces a lo que voy con esto es
que background size lo que hace es eso
solamente Recuerden que crece como el
tamaño del elemento también podemos
darle píxeles por ejemplo yo puedo
decirle que va a medir 100 píxeles
entonces lo que hace es mide 100 píxeles
y se repite después podemos controlar
esta propiedad para que no se repita
pero en este caso se repite puede ser
que mida 200 píxeles o que por ejemplo
mida 500 como el tamaño y darle 500
píxeles es lo mismo que darle 100% Sí
también puedo poner 2 em 20m lo puedo
hacer también pero Quién hace esto con
imagen nadie pero tenemos tres
propiedades que son muy comunes dos
sobre todo la primera es contain que
contain básicamente es una propiedad que
lo que hace es obliga al contenedor a
hacer que la imagen entre si yo por
ejemplo acá le doy 600 píxeles hace que
la imagen entre se ajusta lo más posible
para que la imagen entre si le damos
100% solo se ajusta lo ancho pero si le
damos contain obliga a la imagen a
adaptarse eso es lo que hace contain
literalmente intenta hacer que en el
espacio que le dimos la imagen entre al
menos una vez V yo lo voy a agrandar de
vuelta entonces eso es lo que hace esto
fuerza al navegador a Mostrar la imagen
al menos una vez entera acá fíjense que
en este en esta resolución me la muestra
dos veces en esta resolución me la
muestra una en esta me la muestra una y
siempre va a ser lo posible para por lo
menos Mostrarme una vez la imagen
después la repite lo que lo tiene que
repetir y después tenemos el otro vamos
a hacer 400 y acá vamos a dejar 200
tenemos la otra propiedad que se llama
cover cover lo que hace es muy buena
ahora ustedes pueden decir Che dalto si
vos le das en cover es lo mismo que
darle 100% ves es lo mismo No cambia
nada pero qué pasa si yo acá por ejemplo
tengo 200 por 400 así lo vemos mejor
fíjense que acá la imagen se está
repitiendo Pero si yo de repente acá le
pongo cover lo que hace es adaptarse
100% no se adapta en cambio cover Sí se
adapta hace que la imagen no importa la
dimensión que se ajuste a la resolución
que tiene de tener ven eso es lo que
hace que no importa la resolución que la
imagen entre completa en la pantalla y
si V alto la verdad que esto está muy
lindo pero observa esto alto es un asco
no se te ve ni siquiera la cara bueno yo
puedo venir acá y poner background
position Center y ahí acabo de centrar
la imagen también le puedo decir left
también le puedo decir right yo
normalment uso Center porque uno
normalment tiene el foco del contenido
en el centro pero por ejemplo si la
resolución es esta que está acá vamos a
hacer de cuenta que la resolución es
esta y acá ya no nos sirve Center
tampoco tampoc nos sirve left tampoco
nos sirve right Entonces qué hacemos
Bueno podemos usar bottom o podemos usar
que en este caso es la ideal top y ahí
se nos agarra la cara literalmente top
es arriba bottom es abajo left es
izquierda right es derecha y centro es
el centro entonces dependiendo de lo que
tengamos podemos tener por ejemplo
incluso podemos tener esto entonces
dependiendo de lo que tengamos tenemos
que llevar la imagen para donde queremos
de eso se trata Y eso lo hacemos con
background position es bastante copada
la verdad Esta propiedad o también
podemos darle coordenadas específicas
por ejemplo queremos que que esté 10
píxeles y esto lo que va a hacer es la
va a mover 10 píxeles hacia la derecha
queremos que te muevas 100 píxeles hacia
la derecha V se mueve 100 píxeles hacia
la derecha y después podemos darle otra
que esto es para arriba y hacia abajo le
damos 100 píxeles más y se mueve hacia
abajo esta cantidad de píxeles o le
puedo dar menos 100 píxeles y se mueve
para arriba Esto entonces yo agarro y
digo Bueno vamos a probar a ver hasta
que nos dejemos hasta que podamos ver la
cara a ver cuándo podemos ver la cara
Ahí va ahí estamos viendo la cara
perfecto y acá en vez de darle 100
tampoco le quiero dar cer0 le quiero dar
menos 50 quiero que la cara esté al
principio Ahí está listo y ahí tenemos
todo esto entonces de esto se trata no
trabajar con background position pero
nada est esto es raro Normalmente se usa
se usa las direcciones Center right left
top bottom Esto es lo que se suele usar
en realidad pero también podemos decirle
e posicionate arriba y muévete primero
50 píxeles hacia la derecha por ejemplo
50 hacia la derecha 50 hacia acá y
después top por ejemplo pero nada
también lo que podemos hacer por ejemplo
es si nosotros tenemos la propiedad de
cover no y de repente decm e Quiero
poner contain por ejemplo no me gusta
que se repita me parece una bosta que la
imagen se repita qué hago bueno utilizo
background repeat Y le doy en no repeat
y no se repite y de hecho fíjense que el
color de fondo es negro todavía sigue
funcionando yo el color de fondo puedo
darle transparente y ahí me queda el
color de fondo transparente o le puedo
decir que el color de fondo sea red y se
pone rojo o por ejemplo le puedo dar un
verdecito azulado le puedo dar un Vamos
a darle más Verde más verde y vamos a
bajarle un poco el azul Y tenemos este
fondo para el elemento o también podemos
hacer otra cosa que es bastante
interesante fíjense esto nosotros
podemos hacer que por ejemplo background
size sea de 40 píxeles y no repeat lo
que hace es hace que no se repita en
ninguna dirección Pero podemos poner
repeat en x y se va a repetir solo en el
eje x o podemos poner repeat I y se va a
repetir solo en el eje I Entonces nada
esto también que sepa que existe esta
posibilidad es rara la verdad nunca la
usé hasta ahora pero existe se puede
bueno la que trae por defecto es esta
que es repeat yo lo que suelo hacer
directamente es utilizar cover y ya
cuando utilizamos cover No necesitamos
eh trabajar con repeat porque
directamente no se muestra A menos que
la posición la trabajemos con
coordenadas por ejemplo ahí sí se va a
repetir tenemos que darle background
repeat por ejemplo ahí le damos en No
repeat Y ahí no se repite estas cosas
muy puntuales sí podemos hacer así pero
nada yo no lo recomendaría y
directamente solo trabajar con
posiciones por ejemplo en este caso
sería top y ahí quedó después tenemos
otra propiedad que es bastante extraña
Qué pasaría si nosotros dijéramos Ey
quiero que la imagen se pueda ir yendo
con el scroll yo voy a hacer esto voy a
agarrar la caja esta voy a darle un wid
de El 100% Ahí está voy a darle a esta
caja un margin cero porque sabemos que
acá tenemos un scroll porque el body
tiene un margin pero si le sacamos el
margin del Body y le sacamos el margin
del div ahí tenemos este elemento Qué
pasaría si de repente yo esto lo voy a
aumentar un poquito ahí está acá voy a
poner un he de solamente 100 pixeles y
voy a poner más texto voy a venir acá y
voy a poner más texto lorem otro lorem
actualizo y tengo un scroll una barra
para hacer scroll vamos a poner el doble
de este texto vamos a llenar todo de
texto porque el ejercicio que vamos a
hacer ahora vamos a trabajar con el
scroll miren lo curioso de esta
propiedad vamos a ponérselo arriba esto
así no no afectamos esto vamos a hacerlo
un poquito más linda Porque la verdad
que no me gusta nada esto el font family
lo vamos a hacer sanif de vuelta y el
color lo vamos a dar blanco fíjense qu
curioso este efecto que nos permite
hacer la propiedad background attachment
que es este que está acá si yo le doy en
fixed actualizo la página y fíjense Qué
pasa cuando bajo literalmente me me
permite hacer este movimiento loco voy a
agarrar la imagen y ponerla abajo de
todo voy a ponerla por ejemplo por acá y
fíjense que yo tengo la imagen acá ahora
entonces me veo y esto está muy bueno
porque es un efecto muy útil para por
ejemplo cuando estamos trabajando con
una página web hacer un efecto de scroll
cuando Estamos bajando que se muestre
algo es es un efecto bastante copado lo
mejor es que acá también podemos tener
un elemento yo por ejemplo Ahora puedo
agarrar y crear otro div acá dentro okay
Y hacer que este div sea tenga la clase
por ejemplo opaco y vengo acá y y edito
este div y vo a decir que va a tener un
he del 100% un wid del 100% y un
background por ejemplo que va a ser
negro pero con una transparencia y
fíjense lo que acaba de pasar es más le
voy a dar todavía más más eh oscuro ahí
está se me hizo Acabo de crear una capa
oscura que podría ser hasta roja podría
ser una capa roja podría ser una capa
azul yo le voy a dejar en neg una capa
negra y arriba pongo texto blanco por
ejemplo pongo no sé un h2 hola Y esto es
un subtítulo lo centro voy agarrar al h2
y le voy a dar un padding de 20 píxeles
por ejemplo y un text align Center Ahí
está Está bueno porque es un efecto en
el que uno está con la página trabajando
Entonces uno ve una página muy linda no
estás viendo la página es hermosa la
página tuki tuki vas bajando y de
repente Ah mira qué efecto muy lindo
Entonces est es un efecto muy común que
se suele hacer se suele crear un
elemento como cualquier otro elemento
pero la diferencia es que cuando movés
el scroll el fondo queda muy fijo pero
nada La verdad es que después Tenemos
también local que es lo mismo lo único
que cambia es igual que la propiedad por
defecto esto que se llama scroll lo que
viene por defecto es scroll es por
defecto y es igual que local Okay
solamente que hace que la imagen cuando
desplacemos no se salga del contenedor
pero no es nada más que eso se Cab
pedazo para eso se usa scroll o fixer yo
por ejemplo en la página de a 13 utilicé
eh attachment que la verdad que es una
propiedad muy linda acá por ejemplo
tienen eh varios ejemplos ven esto es
una página web que está hecha con el
fondo fijo y después pasan el más por
encima y medio que cambia y hay otros
efectos Pero esto principalmente es
estético y está hecho con el fondo fijo
acá tienen otra esto es muy común hacer
esto dejar el fondo fijo de esta forma
es muy estético Y por último tenemos
este efecto ven que básicamente es como
si Queremos ver los diferentes colores
que tiene el iPhone Bueno Este es verde
Así se ve azul Así se ve rosa así se ve
rojo la verdad que es un efecto bastante
copado después Les explico si quieren
cómo hacerlo porque lo único que hace es
cambiar el hiu Pero bueno después
después se los explicaré a lo que voy es
que es un efecto bastante utilizado y
que es un recurso muy piola s más lejos
ven O sea yo mi propia página de al 13
también lo aplico literalmente queda
queda estético acá para hacer esto
puntual bueno acá lo aplico bueno ahora
lo que vamos a ver es el el próximo paso
de los fondos que es utilizar la
propiedad background si yo por ejemplo
sé que voy a darle una imagen un color
un size un position y un attachment uso
directamente background y a la
background nos pide los parámetros de
esta forma primero nos pide la imagen en
este caso la URL este parámetro Ya lo
descartamos tenemos la URL después nos
pide la posición en este caso es top
dejamos un espacio y escribimos top nos
descartamos esta después nos pide el
size cover después si tenemos un repeat
acá viene el repeat en este caso sería
no repeat pero no lo voy a poner porque
no no me interesa después viene el
attachment que en este caso es fixed
vamos a poner fixed Y por último el
color que en este caso es 6fa en este
caso sería 6fa y acá acabamos de definir
una 2 3 4 c propiedades background que
eran lo mismo que decir esto versus esto
hay una diferencia entre esto y esto
bastante es la diferencia con background
URL podemos Si queremos solamente poner
un color Por eso yo lo había hecho
porque podemos poner un color podemos de
hecho podemos solamente poner una imagen
y poner por ejemplo cover y a la
y fixed o sacarle el fixed y ahí ya está
Entonces es como una forma de hacerlo yo
Les recomiendo que lo prueben que lo
investiguen voy a dejar todo lo que
tenía antes pero entre el top y el cover
o sea después del background position y
el background size siempre va esta barra
que está acá es para dividirlo y ahora
sí voy a mostrarles la página y acá
funciona ven sigue funcionando
Exactamente igual si no le ponemos esto
Esta Barrita no funciona así que es
importante que pongan esa Barrita y
ahora sí la página funciona Exactamente
igual que con est esto fíjense que es
Exactamente igual pero en lugar de esto
me queda así bueno gente hasta acá
dejamos esto vamos a ir con la siguiente
propiedad que en realidad no es una
propiedad como tal sino que es un
concepto y estoy hablando de los
gradientes porque una cosa que nos faltó
de ver de fondos Es el uso de gradientes
esto es un gradiente por ejemplo ven es
un color que comienza siendo uno y se va
transformando a otro es un gradiente
bueno tenemos que ver de gradientes
ahora y ya con gradientes terminamos
todo lo que son los fondos y y los
gradientes Y todao esa bosta Así que
vamos a ver gradientes porque al fin y
al cabo es un tipo de fondo pero no sé
si si es un fondo vamos a ver gradientes
vamos Bueno ahora vamos a ver lo que son
los gradientes Okay no se olviden que
los gradientes son eh una especie de
transición entre colores A ver
matemáticamente es un aumento o
disminución de no sé una magnitud física
en función de su distancia Entonces es
eso o sea tener un gradiente significa
tener dos valores acá y que esa magnitud
se combine y haya una variación que
sería una una transición de un valor a
otro valor y Mostrar cómo los valores se
van convirtiendo en el transcurso parece
parece extraño pero permítanme
mostrárselos bueno voy a crear un div
que va a tener la clase box de vuelta
with 400 píxeles hte 400 píxeles
background red por ahora Bueno nos queda
muy grande vamos a dejarlo al 100% bien
bueno lo que vamos a hacer ahora es
darle un gradiente a este fondo para
darle ti un gradiente utilizamos la
propiedad background o la propiedad
background image que sería background
image cualquiera de las dos es
suficiente a mí me gusta dar el
gradiente con background directamente en
este caso podemos tener varios tipos de
gradientes tenemos los gradientes
lineales para arrancar que se llama
linear gradient que esto es una función
la gente que venga de programación sabrá
lo que es una función en este caso nos
pide un parámetro para hacer algo con
ello pero básicamente Esto está diciendo
que va a convertir el fondo en un
gradiente lineal y me está pidiendo dos
parámetros el primer color que en este
caso yo voy a poner red más fácil y el
segundo que yo voy a poner Green
actualizo y ahí tenemos el primer
gradiente Esto está bueno Y es muy
interesante para hacer gradientes por
ejemplo transparentes por ejemplo tengo
un gradiente negro no vamos a dejar así
y vamos a transicionar a un gradiente
White en este caso funciona Pero sería
mejor incluso poner un gradiente
transparente Ahí va y parece que es
blanco pero no es blanco realmente es
transparente si en este caso ponemos un
Body al Body le damos un background
color red por ejemplo esto se se adhiere
al fondo mientras que si ponemos White
esto queda literalmente blanco Solo que
como no tenemos un color de fondo parece
que es transparente y que no hay
variación pero en este este caso Esta es
la realidad acá le vamos a dar un margen
margin cero acá también Vamos a darle
margin cero y un wid del 100% y ahí más
o menos podemos ver un efecto que es
bastante utilizado por ejemplo para
venir y decir acá vamos a poner por
ejemplo un h1 título y esto nos sirve
para tener un contraste al h1 acá le
vamos a dar un margin cero también
porque suele tener un margin top por
defecto y un color blanco en este caso
le vamos a dar en textal Center y ahí lo
tenemos centrado va a tener un padding
de 20 píxeles y un font sanif por
ejemplo y ahí tenemos esto que fíjense
que si no tuviéramos el gradiente no se
vería tan lindo en cambio con el
gradiente tiene otro efecto de hecho
podemos hacer que ya arranque
transparente por ejemplo arranque
semitransparente Entonces es como una
especie de gradiente mínimo que repito
parece una tontería pero fíjense que sin
esto hay un cambio y esto es como algo
que lo hace más sutil Este es el
principal uso de los gradientes no es
para agarrar y hacer que de repente
tengamos un fondo que pase de rojo a
Yellow así no no no este no es el uso de
los gradientes no no no el uso de los
gradientes suele ser este principalmente
como les dije que es simplemente para
Bueno este no era así suele ser
justamente para permitirnos tener una
especie de variación del color que
tenemos o más claro o más oscuro si por
ejemplo vamos a a Box lo vamos a volver
una cajita vamos a venir a Box y a box
le vamos a dar un el wid va a ser de 200
píxeles no de 100% 200 píxeles 300 mejor
esto lo vamos a poner al revés como
segundo valor el negro y como primero el
transparente Ahí está vamos a hacer que
tenga un Border radius de cinco píxeles
Por qué no y un margin auto así está
centrado Vamos a darle un margin top de
20 píxeles arriba Ahí está y vamos a
darle un Border top tres píxeles solid y
del mismo color que al principio 00 a y
que tenga un poquito más que tenga seis
píxeles caso el borde va a ser eh 9 900
Ahí está un borde mucho más llamativo
ahí si se fijan es como que tenemos una
especie de tarjetita no el borde radio
sea de ocho píxeles siete píxeles por
ejemplo y acá tenemos justamente Un
diseño que repito suele ser bastante
estético como digo para para para
separar un fondo claro de un elemento
claro entonces pones una capa de
oscuridad y lo logras Pero esto
principalmente es para poner más abajo a
ver por ejemplo yo acá tengo una imagen
no voy de vuelta a copiar la dirección
de mi imagen pegarla acá acá nos aparece
la imagen va a tener un wid de 300
píxeles como el coso y acá tenemos este
efectio que se ve bastante lindo esto es
un efecto muy común que se suele dar
para después por ejemplo poner algún
elemento supónganse que ustedes tienen
un elemento que es un paisaje hermoso de
un árbol si ustedes quieren poner un
texto con blanco por ejemplo porque as
es el color de lo que tiene los que
están haciendo no se va a ver el color y
la realidad es que ponerle un fondo y
bajarle la opacidad hace que se vea un
poco feo o no se ve feo entonces con el
gradiente en vez de hacer eso hacemos un
efecto como este Entonces qué pasa el
gradiente en realidad tiene la función
de separar el texto que se note que es
otra capa aparte y separarlo de un color
en el que no contrasta Entonces si no
tuviéramos esto se vería así y con el
gradiente se ve así y es mucho más
estético que poner una capa arriba toda
negra y ble la opacidad Este es el
efecto más común que solemos darle a los
gradientes cuando trabajamos en en html
y css de hecho en diseño en general no
De hecho por ejemplo si ustedes vienen
acá a cualquiera de mis miniaturas si
hacen un buen zoom van a ver que yo lo
que hago justamente es un gradiente le
pongo como un fondo un poquito negro que
se va degradando a negro para poder
poner texto blanco y que se vea bien
este estos fondos que están acá suelen
ser más claros yo los oscurezco Con
gradientes que no se notan ven acá
aunque no aparezca hay un gradiente que
va de negro a el color original para qué
Para poder Poner este texto y que quede
muy fachero qué bien le han richo se ve
todo mi video ven acá hago lo mismo
quería poner este texto Claro en un
fondo que era más claro que era azul qué
hice le hice un gradiente y se vio
perfecto lo mismo con esto que está acá
el fondo era muy claro Y qué hice le
puse un gradiente de negro a más clarito
y se vio perfecto esto también nos
permite elegir la dirección porque si en
lugar de hacer que un elemento sea así
qué hacemos tenemos que hacer un
transform rotate 90d para que se rote y
hacer después todo un menjunje raro no
tranquilos tranquilos si ustedes quieren
que el la dirección de El degradado sea
de izquierda a derecha hacen lo
siguiente ponen to right y y dejar un
espacio voy a minimizarlo un poco más
hacen esto to right tenes que ir hacia
la derecha entonces actualizamos y ahora
lo que hace es el gradiente arranca
transparente va hacia la derecha en
negro o al revés vas a arrancar a la
derecha y vas a ir a la izquierda
Entonces el transparente que es el color
uno arrancó a la izquierda y terminó a
la derecha también podemos hacer bottom
o también podemos hacer tu top y estas
son todas las posibilidades que tenemos
después también podemos darle más de un
color yo puedo darle por ejemplo
transparente negro transparente y
fíjense lo que pasa me hace este efecto
yo puedo darle transparente negro y red
por ejemplo transparente negro y Green
ven me hace este efecto o sea acá por
ejemplo también agarro y vengo Y le doy
eh Blue también podemos darle más de dos
colores O sea no hace falta que le demos
solamente dos le podemos dar lo que
querramos es más Si tenemos solamente
por ejemplo supongan que tenemos dos
colores yo puedo por ejemplo decirle que
seas transparente al 30% y que sea y el
resto que sea esto Entonces el 30% es
transparente o puede ser que sea el 80 y
el 80% del total es transparente o el
10% nada más entonces estas son cosas
que las definimos yo norment Esto ni lo
toco mucho pero se puede hacer También
además de los gradientes lineales que es
este el más común También tenemos el
radial que acá no hace falta decirle tu
top porque no no funciona pero
básicamente es un es una especie de
viñeta la gente que trabaja en diseño
conocerá las viñetas esto es muy para
efectos muy puntuales Okay si yo por
ejemplo Estoy jugando un juego y en el
juego tengo que hacer una Mira la puedo
hacer con esto se encargaba de armar una
Mira para un juego esto lo que hace es
hacerme voy a poner Green para que se
note más me lo hace hacia el centro o
sea es un gradiente que no es lineal es
radial porque hace lo hace a partir de
un radio se entiende el radiante linear
lo que hace es arranca siendo negra
sigue con un color un poquito más claro
y termina con el color final y lo que
hace es agarrar esa línea y hacerla
gigante entonces les queda el degradé de
color ven acá solamente puse tres
colores pero en el medio tiene que estar
todo el degradé en cambio el radial lo
que hace es crea la línea pero lo que
hace con la línea en lugar de extenderla
así la línea lo que hace es definir un
radio y gira sobre el radio en la parte
del medio tenemos un color y en la parte
del borde tenemos otro color entonces
gira Y estás pintando todo como el
gradiente no sé cómo explicarlo la
verdad Dejad alto que sos malísimo acá
tu versión editor me llamó a mí tu
versión mini de Google para hacer unas
animaciones para que entiendan mejor
cómo funciona Gracias y Sigan viendo
pero creo que se entendió no básicamente
nos hace un círculo y más a los bordes
es de un color más al centro es de otro
color Eso es todo y después tenemos el
otro que es el conic gradient que este
es un efecto bastante raro pero está
piola por qué no por ejemplo acá le voy
a poner el color de antes que es
transparent Ahí está y me genera este
efecto es como un cono arranca va
girando y lo que hace es hacer todo un
movimiento circular que se va
convirtiendo de a poquito hasta hasta
convertir en el otro color Nada igual no
hace falta que yo soy muy técnico porque
intento explicarles hasta el origen de
Cómo se forma pero es innecesario tienen
que ver los efectos finales y así queda
gente así queda después bueno gente se
puede crear gradientes sobre imágenes
que en realidad no es un gradiente como
tal pero no nos vamos a meter muy en
fondo porque lo que un desarrollador
realmente utiliza en la vida diaria es
específicamente lo que les acabo de
mostrar recién y ni siquiera usa el
conic ni tampoco usa el radial se usa
principalmente el linear para el efecto
que les comentaba de separar un poco un
elemento que es claro de un fondo claro
o un elemento que es oscuro de un fondo
oscuro bueno gente eso fue todo sobre
gradientes ahora vamos a ir con la
última sección antes de terminar con la
sección básica de css porque estaríamos
terminando la parte básica y estoy
hablando de que vayamos a ver el
apartado de sombras esto que está acá
cuando estaba viendo esto la verdad que
me hizo acordar un poquito a las sombras
que nos permitiría crear efectos como
estos por ejemplo que es interesante lo
ven más si le sacamos el gradiente se va
a apreciar más la sombra esto es la
sombra Bueno no es momento de ver
sombras vamos a dejarlo así para que la
carpeta después cuando se las muestre
quede bien y ahora sí vamos al apartado
de sombras hay bastante por ver Ah
mentira no es bastante es bastante
poquito de hecho
vamos Bueno no sé si se dan cuenta pero
si se ponen a pensar la verdad que
venimos trabajando con bastantes estilos
últimamente es decir no solamente
estamos viendo propiedades puntuales ya
estamos trabajando con el conjunto de
propiedades que venimos Aprendiendo a lo
largo del curso es decir este por
ejemplo es todo el código css que
teníamos en el archivo que trabajamos
recién Este es el código html que
teníamos en el código que trabajamos
también reciente ahora arrancamos un
nuevo archivo pero lo que voy es como
que logramos lograron de hecho entender
un conjunto de cosas que hace un tiempo
ni se imaginaban que iban a entender y
están entendiendo las bases eso es lo
mejor sé que todavía tienen muchas dudas
pero tranquilos que le prometo
resolverlas todas y hacer que todas esas
dudas cuando ven una página deben decir
y cómo se debe hacer esto Che y cómo
joraca harán para lograr Esto bueno
tranquilos porque no se van a ir a este
curso hasta que no respondan esas dudas
que seguro tienen acá tenemos un
elemento Okay que es simplemente una
caja que tiene 300 por 400 píxeles y
demás vamos a ver cómo aplicarle una
sombra a esta caja para comenzar las
sombra son muy importantes en el diseño
web primero porque agregan profundidad y
realismo a cualquiera de los elementos
hacen los hacen ver más realistas y
hasta tridimensionales después crean
como una especie de jerarquía visual
porque es como que te ayudan a destacar
un elemento y además mejor la
legibilidad a veces cuando tienen que
andar separando contenido del fondo para
eso hay tres tipos de sombras la sombra
que le damos a la a una caja que es el
box Shadow la sombra que le damos al
texto que es el text Shadow y la sombra
que le damos a un componente x que se
llama Drop Shadow pero enfoquémonos
primero en los primeros dos Tex Shadow y
Box Shadow si yo quiero darle por
ejemplo una sombra a esta caja voy a
poner Box Shadow así y el primer
parámetro que me pide es Cuántos píxeles
quiero que se corra la sombra
horizontalmente o sea hacia la derecha
yo le puedo decir 20 píxeles por ejemplo
después me pide Cuántos píxeles o cuánto
se corre no hace falta que sean píxeles
no Cuánto se corre la sombra hacia abajo
sea de forma vertical yo también le voy
a dar otros 20 píxeles después me
pregunta cuánto queres que sea el
desenfoque de la sombra es como un
difuminado voy a darle 50 píxeles y
después me dice cuánto queres que la
sombra se expanda le voy a dar 10
píxeles y después me va a pedir el color
qué color bueno negro puro Esta es la
sombra más bruta que van a ver ahora
vamos a ir perfeccionándose
que vieron esta botella Cómo se pensaron
que iba a vivir sin agua con gas
imposible muchachos yo tomo agua con gas
si los veo en el próximo a
13 no sabes lo que es Ada 13 muchachos
yo organizo un evento por el día del
programador ustedes vien al Canal
secundario es decir adalto emprende que
posiblemente cuando Vean este video este
canal ya tenga muchísimos más
suscriptores y si no estás suscrito anda
suscribirte porque es un canal donde
tengo un curso de trading completo que
es una fantástica locura tranquilos no
es de trading cripto es de trading en
general pues operar activos de acciones
de empresas todo tipo de activo está
pegadisimo el curso si ven el banner de
mi de esto tiene una imagen esta imagen
soy yo dando una charla si buscan a 13
en Google les va a saltar a 13 es un
evento gratuito que se celebra el Día
del programador la primera edición del
evento tuvo lugar el 13 de septiembre
2023 la ucina del arte de Buenos Aires
el evento tiene como objetivo reunir a
los entusiastas de la programación con
los talleres bueno acá les dice lo que
es Ada 13 pero acá tienen lo que fue el
año pasado miren lo que fue la
presentación de bry por ejemplo al Señor
br
[Música]
de Muchas
gracias miren esto el tipo regaló libros
y todo el mundo se paraba agarrar el
libro fue una locura no fue una locura
también vio Nico de Hola
mundo fue una locura él la pasó también
la pasó reb Nico lo conocía Nico vino el
fundador de coderhouse también uno de
nael lema que es uno de los funders De
coderhouse nada después hicimos acá
hicimos acá entrevistas acá con Nico
después estuvo acá lean lean richo que
me ayudó a conducir el evento acá le
estaba haciendo una entrevista al el
pelado nerd justamente que también de
una charla por cierto acá lean bajó y se
puso a entrevistar gente se puso a
pasear Por el lugar y se puso a ver
cuáles eran los Stand que había nada
gente la verdad que este es un evento
espectacular realmente es terrible
evento vayan a inscribirse que el de
septiembre de cada año los quiero ver
ahí eh quiero que estén ahí y si ahora
mismo estás enterado del evento Andá
urgente a inscribirte que encima los
lugares son limitados el año pasado
llenaron todo ahora imagino que unos
5000 podríamos llegar a ha en total ahí
van a conocer a otros desarrolladores
van a poder hacer amigos muchísimas
gente que fue al evento me agradeció
porque en el evento en las actividades
que había terminaban conociendo a otros
programadores y se hacían amigos entre
ellos así que nada vayan que vamos a
estar conociéndonos en ese evento todos
los años pero que la comunidad se haga
más grande eso por un lado No sé por qué
me desvíe tanto del tema lo que quería
decir qué quería decir qué quería decir
yo Por qué me metí en todo este lío de
qué estaba hablando No importa De qué
estaba hablando vamos a ajustar las
sombras que es lo que nos compete como
ya sabemos el primer parámetro es
justamente el movimiento horizontal es
decir hacia Cuánto se va a mover la
sombra fíjense que también le puedo dar
valores negativos ven Pero esto es lo
que nos permite tener el primer
parámetro justamente la dirección
horizontal de la sombra esto lo voy a
dejar en cero siempre yo lo suelo dejar
en cero porque no me gusta nada esto
también es la vertical así y hacia
arriba también podemos ponerla eso es
justamente lo que nos permite este
parámetro Yo también lo suelo dejar
siempre en cero porque nunca tengo que
andar dándole sombras a estos lados esto
que está acá es el desenfoque ven si yo
por ejemplo le pongo 10 casi que no hay
desenfoque le pongo cero no hay nada y
esto que está acá es el la extensión yo
le puedo poner cer0 le puedo poner 10 le
puedo poner 40 y no no es como un borde
ojo porque este no es el borde si yo a
este fondo le doy una opacidad por
ejemplo 9 y acá le pongo -4 Hola cami te
llamo después estoy grabando hola
Después me contá Qué pasó No Dale sí
chao estás bien Sí estoy perfecto hijo
de deja de grabar No qué decís que
no si vos ibas mucho más temprano y ya
tendrías que estar ya tendrías que haber
terminado encima boludo porque literal
respeta put no está grabando vos estás
en tu casa es un bueno esto a
lo que voy es que no es un borde ojo no
funciona como los bordes esto
simplemente es la extensión de la sombra
que se va a difuminar que yo Por cierto
suelo dejar en cero y ahora sí Este es
el parámetro que que más me importa Este
es el parámetro que suelo usar y acá le
suelo dar un tamaño bastante grande
normalmente por ejemplo 55 45 30 y pico
yo por ejemplo con 40 estoy perfecto y
esto le suele agregar una transparencia
no la suelo hacer del todo negra ni
tampoco la hago de colores porque la
verdad que las sombras de colores son
todas feas no se salva ni una sola se
salva No importa que sea un 48e que es
un color bastante lindo No importa que
sea un bordó No importa que sea un
amarillo No importa que sea una especie
de que es una especie de naranja vamos a
hacerlo así que sea una especie de
naranja no se salva ninguno oj ojo
Porque estos son solamente una opinión
mía eh eso es una opinión mía y eh le
pongo en siete para que se le baje la
opacidad y así como lo ven es un efecto
suave no es muy bruto y es muy utilizado
en diseño como dije nos queda como una
especie de sensación de Resaltar el
elemento le da otro efecto más realista
lo separa del fondo Por cierto y si
ahora arrancamos a por ejemplo trabajar
vamos a poner un h2 para hacer de cuenta
que estamos trabajando en una sección
subtítulo XD y ahí tenemos el sub t XD y
ahora podemos venir acá y trabajar acá
vamos a agarrar el h2 vamos a dar un
padding de 20 pixeles por ejemplo y San
serif un color 444 porque los colores
nunca suelen ser negros del todo a mí
por lo menos no me gusta nunca que los
colores sean todos negros siempre me
gusta que sea un poquito no casi negro o
sea en este caso es esto es un gris que
lo pueden ver acá es este gris y por
ejemplo acá vamos a clavar un párrafo y
el famoso lorem mip zoom Es más no le
voy a dar un padding al h2 le voy a dar
un padding a la caja Ahí está pero le
voy a dar un box sizing Border Box
porque aumentó su tamaño yo lo quiero en
el tamaño real que definí que es 300 por
400 y el font family también se lo voy a
dar a la caja Ahí está de hecho el Line
he del párrafo lo voy a poner Line he es
más el color también del texto voy a
hacer que todo el color sea de este
color padding top cer no de 10 píxeles
de 10 píxeles está bien y acá vamos a
darle textal justify Ahí está texto
justificado y vamos a darle un Line hte
de 1.5 porque no y acá tenemos un texto
de m es una tarjetita que creamos a base
de igual el justify no me gusta mucho la
verdad font size 14 píxeles y le voy a
dar otra resolución le voy a dar 360
píxeles de alto acá tenemos nuestra
tarjetita que para mí es bastante más
linda que antes la verdad 280 Ahí está
bueno para qué hago esto realmente todo
lo que acabamos de aplicar ya lo vimos
dalto pero todo lo que estás enseñando
ya lo vimos a lo largo del curso
enseñame sombras zaco la mejor forma de
aprender Okay es aplicando todo lo que
ya sabes una y otra y otra y otra vez
para redescubrir lo que ya sabías y
sobre esa base trabajar la las nuevas
propiedades que vas aprendiendo así
aprendes en serio no aprendiendo cada
propiedad por separado y después así no
funciona vos tenés que ver el conjunto
de todo tu trabajo no todo por separado
y después unirlo porque cuando lo unas
te vas a perder Entonces tienes que
acostumbrarte a trabajar así bueno dalto
tenés razón no no no no no esta ví l
mela l mela completa se ponía returbio
bueno Esto es lo que es el box Shadow
supónganse que ahora ustedes tienen
alguna especie de problema en la cabeza
y dicen queremos darle una sombra al
texto Por qué nadie sabe pero quieren
darle sombra al texto Bueno se lo voy a
permitir para eso utilizamos una
propiedad llamada text Shadow el text
Shadow funciona igual el vertical el
movimiento horizontal el movimiento
vertical el desenfoque 40 píxeles pero
el Tex Shadow no tiene expansión O sea
no nos pide la expansión este parámetro
el cuarto que es la expansión no nos
pide porque no lo permite pero si nos
pide el color en este caso le vamos a
dar un color red para que se aprecie
bien y ahí la sombra tiene un texto
vamos a dejarlo en cuatro píxeles para
que se note porque hay que tener un
problema en la cabeza para hacer una
sombra al texto y ahí lo pueden ver Ah
no queda tan mal igual eh es el primer
ejemplo de sombra en el texto que veo
que no queda tan mal a ver si la ponemos
un poco más Clarita Che resulta que no
queda tan mal eh Me la metieron entero a
ver si le damos cinco píxeles ahí che No
puedo creer que diga que esto me gusta a
ver si le doy F 88 88 Acá está este es
el color definitivo no pued creer que me
gusta no pued creer que me gusta al
subtítulo sí que le Quedaría muy fea A
ver vamos a probar h2 y se lo vamos a
poner Aunque entiendo que debería ser
del doble puede ser la sombra Che
resulta que tampoco le quedaba tan mal
al subtítulo Uy bueno Bueno hasta acá
llegamos En este apartado Vamos a hacer
todo un poquito más chiquito Okay vamos
a hacer que el tamaño de esto sea de 13
píxeles vamos a hacer que esto tenga 340
El margen arriba sea de 30 que el h2
tenga un font size de 16 píxeles tan
chiquito 20 píxeles está bien y esto va
a tener 320 Ahora sí para qué queremos
tenerlo así bueno 330 está bien para qué
queremos
324 Perdón soy muy estricto para qué
queremos tener esto así lo queremos
tener así porque abajo vamos a poner una
una imagen para aplicar la última
propiedad de la yo voy a crear abajo una
imagen y mg y le voy a poner un source
voy a poner mi carita toda hermosa esta
cara que está acá de Famous bir days
copiar dirección de imagen y acá la pego
acá dentro perfecto acá me aparece a la
imagen le voy a dar un wid de 200
píxeles Border radius 100% sin duda se
me redondea completamente la imagen
quiero que sea más chiquito Igualmente
Quiero meterla adentro del div Ah se me
pone afuera del div por el tamaño vamos
a sacarle el he que normalmente los
elementos no necesitan que que nosotros
determinemos el alto se autodetermina
solo el alto ven yo hago así y se adapta
Entonces ahora sí yo por ejemplo tengo
esta imagen acá y lo que voy a hacer con
esta imagen le voy a hacer más
chiquitita porque siento que está
bastante grande la imagen voy a hacer de
160 píxeles Ahí está y le voy a dar en
margin auto así se centra la imagen no
se centró le chupó un huevo
completamente le recontra chupa un huevo
no se alinea porque tendríamos que darle
al Box un text Alin Center y ahí también
se va a alar el subtítulo Yo podría
venir a la imagen y a la imagen darle un
Box Shadow y el mismo que le di a la
caja voy a copiar esto que está acá y lo
voy a pegar actualizo sizing dice no Box
Shadow maestro Ah va y si se fijan
efectivamente generó una sombra la voy a
hacer más chiquita para que para que la
vean y le voy a poner bien bruta ven que
tiene una sombra O sea la sombra existe
y está pero el problema no viene en este
tipo de imágenes el problema viene
cuando de repente nosotros tenemos que
usar una imagen transparente por ejemplo
ustedes buscan el logo de Ada 13 por
ejemplo Aunque tranquilos porque vamos a
cambiar el logo no va a quedar este este
logo que está acá no sé porque qu est no
importa voy a copiar este logo Vamos a
darle en copiar dirección de imagen y
vamos a ver qué pasa si pegamos este
logo en vez de esta imagen voy a pegar
esta imagen acá aparece esto es
realmente un asco si yo le doy a sombra
a esto es realmente un asco si le saco
el borde radius la sombra es un asco y
tampoco puedo darle un text Shadow le
voy a sacar esta propiedad Ahí va y voy
a ponerle text a ver si me lo toma nada
porque no es texto es imagen Cómo puedo
hacer para darle a este fondo
transparente un color bueno para eso
utilizo la propiedad filter escribo Drop
Shadow y acá escribo como si fuera una
sombra cer píxeles cer píxeles 15
píxeles y el el color en este caso el
color sería negro y ahí acabo de generar
una sombra Es más voy a dar una sombra
de tres píxeles para que lo noten
funciona esto solamente funciona con
imágenes que tienen un canal Alfa Como
por ejemplo las que son png y lo podemos
hacer con una png que tiene fondo no
funciona y esto también nos sirve porque
por ejemplo podemos agarrar y darle un
color parecido f9 por ejemplo no sé cuál
era el color la verdad Pero nos permite
hacer este efecto le voy a dar cinco
píxeles Le acabo de dar un efecto Neón
si esto no estuviera quedaría así
entonces es mínimo el efecto pero algo
Se nota a lo que voy con esto es que
podemos hacer este tipo de sombra que
tranquilos ya vamos a ver la propiedad
filter pero como es un tipo de sombra
tenía que explicárselo entonces para las
cajas tenemos el box Shadow para el
texto tenemos el text Shadow y para
elementos como imágenes que tienen un
canal Alfa o un fondo transparente Drop
Shadow lo que hace es agarrar el
elemento bordear y darle una sombra a
los bordes en este caso al h2 le voy a
dar un margin top cinco píxeles nada más
solo de cinco píxeles le voy a sacar el
Tex Shadow le voy a dar un color 777 le
voy a dar un letter spacing tres píxeles
esto ya lo lo conocíamos quiero que esto
sea más oscurito ahora ahora me parece
bien que tenga este fondo Ahora sí font
weight 100 el font size se va a caer a
18 Esto va a aumentar a cco Ah no me
gusta nada como quedó la verdad voy a
darle el mismo efecto a acá y funciona
igual solamente que en este caso no es
óptimo usar esto sino que es mejor usar
el text Shadow Y en vez del paréntesis
ponemos los dos puntos Bueno ahí tenemos
este resultado que hicimos a base de
sombras Vamos a darle un color más
rojito porque Perdón una una sombra más
linda porque resulta que si estamos
trabajando con naranja vamos a hacer que
por lo menos todo sea naranja Ahora sí
Bueno ahora por lo menos un poco más
estético me salió récord bueno gente
Estos son todos los efectos con sombras
qué aprendimos de de esta sección de
sombras primero no hay que exagerar con
las sombras que son excesivamente
pronunciadas segundo hay que intentar
mantener una coherencia en todo el
diseño del estilo para que quede más
profesional si las sombras son
transparen tias y demás y normalmente
son negras lo mantenemos en todo el
estilo Y también tienen que probar en
varios navegadores para garantizar
compatibilidad para las cajas es Box
Shadow para el texto es Tech Shadow y
para las imágenes es filter Drop Shadow
Y por último aprendimos que tienen que
inscribirse en la 13 y nos vemos en el
próximo año No pará pará pará todavía no
todavía no pará relajad par ahora lo que
tenemos que hacer es agarrar la tarjeta
de porquería que teníamos y modificarla
para dejarla hermosa Así que antes de
volver a la sección de html para ir a la
sección avanzada de html vamos Ahora sí
a ver cómo agarrar la tarjetita de html
que creamos hace unos capítulos atrás y
dejarla bellísima lógicamente aplicando
todas las propiedades que vimos hasta
ahora no porque no podemos aplicar más
de lo que no vimos todavía Así que lo
que vimos lo vamos a aplicar Ahora sí
vamos Bueno lo que hice Por si acaso los
que no están al tanto creé una carpeta
llamada ejercicios adentro crea la
carpeta eh tarjeta de presentación y
adentro tengo el mismo código que
teníamos antes para la tarjeta esta que
es una asquerosidad y vamos a readaptar
la completamente vamos a hacerlo bien
primero el principal le vamos a asignar
clases a todo Card title Card
description y acá vamos a poner Card
content entonces este es el título de la
tarjeta Esta es la descripción de la
tarjeta y este es el contenido de la
tarjeta ahora vamos a poder hacer como
corresponde Card title Card description
o subtitle mejor subtitle y acá Card
content acá vamos a poner en vez de
description subtitle ahora sí lo tenemos
bien clasificado todo separado por
clases antes de esto vamos a crear una
imagen source y vamos a poner una foto
mía Esta es una foto mía era la vamos a
copiar dirección de imagen vamos a
pegarla acá tenemos mi imagen Vamos a
ponerle una clase Card img y vamos a
agarrar la caída darle estilo Card y mg
Vamos a darle un wid de 200 píxeles y
acá tenemos esto Vamos a darle un Border
radius 50% y ahí se redondeó
completamente por ahora venimos bien
Esto vamos a hacerlo mucho más chiquito
porque está como que muy grande ahora sí
Esto no se hace de esta forma después
vamos a ver cómo aplicar las demás
propiedades como los tipos de display y
demás que nos van a permitir hacer de
todo con esto pero bueno acá vamos a
sacarle lo que tiene porque acá por
ejemplo tenemos un padding top acá
tenemos un margin top bueno el margin
top está bien que se de es más el margin
top puede ser de hasta de 50 píxeles
Vamos a darle un padding de 20 píxeles
para arrancar acá estamos perfecto este
fondo lo vamos a sacar que no me gusta
nada este padding también lo vamos a
sacar tampoco me gusta mucho lo que sí
le podemos llegar a dar un padding que
arriba y abajo sea de 20 píxeles pero
los costados sea de Cero y ahora queda
más no no no queda más lindo un padding
de 20 píxeles a todo mejor pero que
padding bottom cero Ah queda mucho más
lindo y el padding a los costados de la
tarjeta va a ser solo de 10 píxeles Ay
mucho más lindo el fondo lo vamos a
poner de vuelta en blanco pero bien un
blanco bien Ahí está Y en vez de coral
vamos a escribir nosotros un buen color
el coral es este pero yo voy a poner por
ejemplo en rgb le voy a dar este color
no está mal por qué no dejar este color
no la verdad que es un asco Ahí está
mucho mejor lo que voy a hacer para que
destaque un poquito es ponerle una
sombra Vamos a darle un Box Shadow c
píxeles 0 píxeles 45 píxeles y un negro
con esta opacidad y nos quedó una sombra
bastante linda voy a darle en 35 píxeles
Ahí está 25 píxeles acá tenemos la
sombra bien hecha le vamos a dar un
Border radius de s 8 píxeles por qué no
ahí tenemos la tarjetita redondeada
siento que por otro lado el subtítulo
tiene mucho margin así que le vamos a
dar un margin cero Ahí está y un margin
top de cinco píxeles por qué no ay quedó
bastante lindo por otro lado el Card
content tiene un padding bastante
la verdad Así que yo diría que arriba y
abajo Solo tengo un padding de 10
píxeles Ahí está mucho mejor y un margin
a ver a ver qué pasa si le damos margin
cero no margin bottom cero Ay mucho
mejor y ahí tenemos la carta
completamente personalizada es más creo
que acá podría la carta Podría tener un
padding de 10 píxeles en total de todo
mucho mejor vamos a sacarle un poco de
contenido ahí tenemos la carta
personalizada a esto Si queremos lo
podemos poner un poco más clarito la
verdad que no no me gustó mucho este
color así que vamos a hacer un poco más
claro a ver acá y acá le vamos a
aumentar un poco más a 116 por ahí
deberíamos cambiarle el color porque es
azul Así que vamos a hacerlo de otro
color vamos a hacerlo 4 o a ver qué
color me tira no es feo este color me
gusta porque destaca bien la letra
destaca bien todo pero lo quiero más
pastel más fácil acá pongo seis acá
pongo a y acá pongo c estoy probando yo
colores a lo loco acá pongo c si el c me
gusta más este es mucho más lindo con 35
de sombra Pero esto va a tener un nueve
acá porque siento que si no es una
sombra muy o un seis un seis en 35
perfecto y ahí es leve el efecto de la
sombra pero está el efecto de la sombra
es muy chiquito pero algo se puede
apreciar Y eso es lo importante que algo
se aprecie algo se separe 30 sí 30 y voy
a ponerle un poco más de texto el doble
de hecho para que por lo menos parezca
que hay más relleno más contenido ahora
si ustedes quieren crear el mismo
elemento Qué hacen vienen al html copian
esto no le ponen a la clase Card y la
van pegando y van teniendo varias
tarjetitas no entonces ya tienen el
elemento de tarjeta es más a esta le
pueden poner por ejemplo red Card y esta
le pueden poner Green Card vienen el
estilo pun css al segundo elemento le
puse red Card y a este le puse Green
Card y voy a venir abajo de todo bueno
abajo de todo No acá abajo de Card por
orden jerárquico voy a poner red Card y
a la redc le voy a dar un background
diferente quiero que sea c A6 Ahí va
Esto no es red 64 86 mucho mejor ahí
está este color me gusta y abajo la
verde Green Card ocho y acá ponemos 5 b7
Ahí me quedó este color Perfecto Bueno
gente y acá básicamente creé una
plataforma un ejemplo que tiene tres
cartas de presentación diferentes y si
se fijan ven cada una con un color
diferente aún así todas son estéticas y
muy lindas Bueno Este es el ejercicio
que hicimos Pero antes que nos pongamos
hacer ejercicios la realidad es que para
qué les voy a enseñar a hacer algo que
realmente no se hace así es decir para
qué Por ejemplo me voy a poner a enseñar
a hacer una barra de navegación si
todavía no tenemos las herramientas que
uno utiliza realmente para hacerla para
qué me voy a poner a enseñar a hacerles
un componente de una página web si
realmente con lo que aprendimos ningún
desarrollador hace un componente
verdadero bueno y que sea de buena
calidad y funcional y óptimo no hay que
aprender varias cosas más y cuando
hagamos prácticas les voy a mostrar
prácticas reales una tarjeta de
presentación Sí la podríamos llegar a
hacer así yo quizás la haría de otra for
forma pero la verdad que no es una fea
tarjeta puede estar aplicada en una
página web sería algo quizás agradable
de ver quizás modificando algunas
cositas más pero dentro de todo está
bastante bien Yo por ejemplo ahora hago
que todas las cards sean display inline
block observen cómo las pongo todas un
al lado de las otras y les doy a todas
un margen de 40 píxeles 44 píxeles
fíjense como todas más o menos se ven
lindas realmente es un componente
agradable para una web por eso estamos
haciendo esto vense el display Line
block y el margin Esto no se ve lo vamos
a dejar así por ahora que por cierto
tengan en cuenta que esto es adaptado a
a dispositivos móviles Así que desde un
c se ve Perfecto Bueno en realidad no
porque nos falta una etiqueta que la
vamos a ver en el html avanzado que es
la de meta View para que esté adaptado a
dispositivos móviles y se vea realmente
así pero a lo que voy es que la verdad
que lo que estamos haciendo acá sí es
realista hacer otras cosas no así que lo
que vamos a hacer ahora es ir a la
sección de html avanzado y después a la
de css avanzado para que al final del
curso hagamos un montón de proyectos yo
lo que les estoy explicando es las
herramientas y cómo aplicarlas a la vida
real para que después cuando terminemos
el curso hagamos muchos proyectos muy
buenos muy útiles y que se vayan de este
curso cas as que con un portafolio de
html y css Y no van a dominar una
tecnología Si pierden tiempo al pedo
haciendo proyectos que después cuando
avancen en la tecnología lo hagan de una
forma muy diferente y quedó inútil lo
que aprendieron no eso no va a pasar
conmigo van a quedar muy profesionales
todas las cosas que hagan me cansé de
hablar vamos con la sección de vuelta de
html avanzado despedimos la de ccs y
bienvenidos a todos a la parte avanzada
del curso Así que vamos
allá bueno volvimos a la sección de html
ahora comienza una sección de html
intermedio avanzado pasa que html
realmente no hay mucho como en ccs por
eso principalmente el curso va a ser de
entender html comprenderlo al máximo lo
máximo que podamos y después css va a
predominar la mayor parte del curso de
hecho los cursos anteriores que hicimos
tenían menos de 3 horas de html y
digamos casi 10 horas de css entonces
una diferencia hay teniendo en cuenta
que encima me quedó un montón por ver de
css si lo que podemos hacer es
combinarlos para entender cómo
estructurar por ejemplo páginas web para
que después al darle estilo que de bien
Eso sí es importante en html y por eso
lo vamos a ver pero ahora vamos a entrar
en un apartado como dije intermedio
avanzado y lo primero que tenemos que
ver ahora son tres cositas Okay que no
están relacionadas entre sí pero son muy
importantes estamos hablando de los
comentarios de los metatags y del
favicon Por qué no para arrancar vamos a
definir lo que es un comentario un
comentario es un código que escribimos
que solamente es legible para el
desarrollador es decir el navegador
también lo puede leer pero no lo va a
interpretar O sea no va a hacer nada con
ello si yo por ejemplo pongo h1 escribo
algo Por cierto ya creé la carpeta y los
archivos bueno acá abrirlo como siempre
y acá como siempre tenemos esto que está
acá que es básicamente el resultado de
la visualización del encabezado h1 Pero
qué pasa si yo por ejemplo hago lo
siguiente esto es un título esto que
está acá se interpreta como como un
texto simple Pero lo que yo quiero es
dejarle un mensaje al desarrollador para
que entienda que esto es un título si se
lo pongo arriba pasará algo y no
claramente No si nosotros queremos
dejarle un comentario a los
desarrolladores para que cuando lean
este código sepan qué es lo que estamos
haciendo porque a veces aunque un código
legible se entienda como tal existen
niveles en los que realmente se vuelve
tan complejo el código que necesitamos
especificar qué es lo que hace una
sección para que entendamos o para que
sepamos Cuál es la funcionalidad de ese
elemento o componente que estamos
desarrollando Por ejemplo yo ahora voy a
hacer un comentario qué lo hacemos con
el signito eh con el que aperturamos una
etiqueta dos guiones medio okay Y para
cerrarlo hacemos lo mismo otros dos
guiones medio y este signito pero la
diferencia es que acá va el signo de
exclamación cerrándose es así tal cual y
todo lo que escribamos en el medio de
esto okay vendría siendo un un
comentario ven que acá básicamente se me
comentó todo yo lo cierro acá y esto es
un comentario es decir así como abrimos
una etiqueta Okay tenemos que poner este
signito el nombre de la etiqueta y
cerrarlo y después ponemos el contenido
de la etiqueta y después también la
cerramos los comentarios son iguales
tenemos que abrir los comentarios con
esta de esta forma que esta sería como
la etiqueta de comentario escribimos el
contenido que no va a ser leído por el
navegador y cerramos el comentario de
esta forma lo guardamos y fíjense que ya
el navegador no lo lee Obviamente si
vengo acá y le doy inspección al
elemento vamos a ver que el texto está
acá dice esto es un título y esto es un
comentario es algo para que los
desarrolladores cuando en un futuro lo
lean lo entiendan eso por un lado esto
sería como ya sabemos un comentario
después tenemos lo que son los favicons
los favicons es el iconito que aparece
arriba de una página si ustedes entran a
YouTube van a ver que acá arriba aparece
este loguito que está acá que es el
loguito de YouTube lógicamente si
entramos a Google a buscar algo vamos a
ver el loguito de Google acá arriba en
cambio en nuestra página el logo que
aparece es el logo por defecto es este
signo del mundo Cómo puedo hacer para
cambiar Esto bueno para eso usamos un
favicon para eso venimos acá y ponemos
link acá ponemos rel en rel ponemos icon
que como ya saben rel significa
relationship y le estamos diciendo e la
relación que va a tener lo que vamos a
enlazar con la página es que es un icono
es el icono de la página después nos va
a decir Okay Eh esta imagen que va a
representar a la pestañita dónde la
tenés vamos a cerrarlo primero ahí está
normalmente los iconos suelen tener dos
características que las diferencian de
las imágenes comunes primero como
sabemos que el icono se va a cargar muy
chiquitito acá arriba es decir se cargan
acá acá arriba sabemos que no tiene que
ser una imagen imagen muy grande
entonces lo que solemos hacer es tener
una imagen de 32 píxeles por 32 píxeles
o en su defecto de 64 por 64 pero es más
que suficiente tiene que ser una imagen
que no sea pesada para que no solamente
cargue más rápido la página sino que
encima se visualice bien De nada no
sirve tener una imagen 4k si se va a
cargar recontra chiquitito se va a ver
Exactamente igual que si tuviéramos una
imagen que no llega ni siquiera a 480
Entonces mejor nos encargamos de poner
una imagen chiquitita y es mejor yo por
ejemplo Busco el logo de 13 acá
seguramente vamos a encontrar esto que
está acá que es como el loguito voy a
venir a la carpeta donde tengo alojado
esto que sería acá y lo pego voy a
guardarlo como
icono.png acá lo tengo abierto lo voy a
abrir con gim básicamente tengo que
abrirlo en un programa de edición para
poder dimensionar lo es decir le voy a
dar la dimensión que necesitamos vengo
acá arrastro hasta acá y acá me carga la
imagen perfecto voy a seleccionar que el
tamaño del Lienzo de la imagen sea de 64
píxeles por 64 píxeles redimensionar y
ahí está qué hago ahora Bueno lo escalo
para que el logo me entre acá Ahí está
lo ideal es que la imagen ocupe toda la
pantalla Entonces yo en vez de ponerle
adaa voy a dejar que se vea completa La
para que se vea más grande y en mejor
calidad todo lo otro lo borro a la
ahí estamos la voy a
sobreescribir Ahora vuelvo al código y
voy a poner acá el href y voy a poner el
icono.png acá me carga y esto acá si se
fijan ya me estaría cargando el icono
pero por un tema de compatibilidad se
recomienda poner el tipo en este caso va
a ser una imagen image png esto se
recomienda poner para determinar y
establecer le al navegador queé es esto
Esto va a hacer que cargue más rápido va
a ser un tema más más interno que que
sirve ayuda y suma Ahora hay mucha gente
que pone diferentes tipos de iconos y
por ejemplo en vez de ser pun png
utiliza punto ico para que haya mucha
más compatibilidad en Windows por
ejemplo o en otros dispositivos a veces
no carga si ponemos el punto ico
Entonces es muy variable yo suelo
ponerle una imagen png que tiene un
fondo transparente y así me queda ya
para mí con esto suele ser más que
suficiente Y acá arriba visualizar yamos
el icono esto que está acá justamente
vendría siendo lo que yo les decía que
era el favicon esto así como lo ven se
llama favicon básicamente el iconito que
nos aparece acá arriba en la pestaña y
después tenemos los metadatos Okay acá
vamos a prestar atención porque vamos a
ver lo que son las los metatags los
metatags o metaetiquetas son como
etiquetas que tienen la única finalidad
Okay de describir ciertos aspectos de
nuestra página web Eso es todo proporci
información sobre nuestra web en el G
van las metaetiquetas y como ya sabemos
no son visibles para el usuario por
medio es decir quien visita nuestra
página no puede ver las metaetiquetas
pero son importantes para el seo es
decir el posicionamiento web de nuestra
página los motores de búsca es
importante también para definir Cómo se
va a mostrar nuestra página cuando un
enlace la llame en una red social ahora
vamos a ver cómo es esto y también a
veces para la accesibilidad Pero bueno
hasta acá llegue el primero es el meta
charset utf8 que de hecho si ustedes se
fijan cuando nosotros ponemos
html5 acá con el plugin de este que está
acá ya viene configurado por defecto es
decir voy a copiar esto que está acá que
es el icono voy a volver acá y lo voy a
pegar acá abajo así puedo explicarles
todo esto bueno básicamente Bueno este
atributo que está acá ya es hora de que
lo conozcamos es una buena práctica
porque básicamente le ahorra el trabajo
al navegador de intentar entender en Qué
lenguaje se encuentra el contenido de
nuestra página en este caso le decimos
Che el lenguaje está en español es es de
español así que ya con esto nos
ahorramos que la página ya tenga que
andar pensando qué lenguaje es ya está
un punto a favor el meta charset utf8
básicamente es una etiqueta es un
metatag que le está diciendo al
documento Cuál va a ser la codificación
que va a utilizar utf8 es un tipo de
codificación que utiliza caracteres
unicode que básicamente serían en este
caso este tipo de codificación permite
todos los caracteres utilizados por
todos los idiomas del mundo es decir
nosotros antes por ejemplo cuando no
teníamos esta codificación que por
suerte ahora viene en la mayoría de los
navegadores configurada por defecto
nosotros escribíamos algo y poníamos por
ejemplo un acento y el acento no se
mostraba Así es decir no se mostraba así
el acento se mostraba toda una letra
rara todo un código raro porque el
navegador no entendía los acentos porque
no lo interpretaba es decir no era capaz
de entender un acento utilizamos esto
para decirle y terminar de asegurar que
la codificación universal permita todo
todo tipo de caracteres acentos todo
todo ahora si no es necesario para qué
la ponemos Y esto no es para nosotros
posiblemente ustedes sin esto puedan
poner acentos y demás ahora si no lo
pueden poner posiblemente porque tengan
una compu muy vieja o un navegador muy
viejo o algo antiguo deben tener
entonces por eso están intentando
utilizar una codificación que no que no
es compatible con ustedes pero al poner
esto que está acá ya se elimina todo y
ya pueden ver los acentos las señas
etcétera Esto está bueno porque si hay
un porcentaje de visitantes de su página
que utiliza navegadores antiguos esto
les va a salvar la vida Bueno y por otro
lado tenemos esta otra etiqueta que está
acá que es otro meta que es un meta
viewport ya de ahora en más nos vamos a
olvidar de este atributo porque todas
las demás etiquetas tienen name name y
content nada más todas las metatags van
a tener el name que es el nombre de lo
que están declarando o definiendo de la
página Qué información estás declarando
y el contenido que va a ser qué queres
decirnos Okay este caso vamos a trabajar
con el viewport y vamos a decir que el
wid va a ser igual al wid del
dispositivo es decir el ancho total de
la página va a ser igual al ancho total
del dispositivo Esto está bueno porque
cuando tenemos por ejemplo tablets o
celulares y demás automáticamente hace
que todos los dispositivos estén
adaptados a a nuestra página al revés
que nuestra página está adaptada a todo
dispositivo Entonces ahora vamos a ver
Por qué es importante eso y después
tenemos esto que dice initial scale que
esto es para el tema del zoom si
nosotros por ejemplo venimos acá y
ponemos un zoom de 300 cuando vayamos a
una página que tiene el uno básicamente
va a volver a restablecer el zoom en uno
cuando cargas la página por primera vez
Este es el zoom que va a tener eso es lo
que hace esto básicamente se encarga de
que el dispositivo entre con un zoom
normal sin zoom y es interesante Porque
si yo por ejemplo esta etiqueta la saco
y esto le doy en inspeccionar elemento y
agrando un poquito van a ver que si yo
acá sí se ve perfectamente pero si yo
hago una prueba y veo cómo se ve por
ejemplo en un iPhone 14 Pro Max van a
ver que así es como se ve realmente se
vería así eh Y para leer el texto
tendría tendrían que hacer un zoom Y eso
está mal para eso utilizando esta
etiqueta cuando actualizamos fíjense
como ahora está un poquito más adaptado
es decir pongo un párrafo pongo un lorem
actualizo acá arriba voy a poner un h1
Okay título y fíjense cómo está mucho
más adaptado al contenido es decir esto
es lo que vería un usuario de iPhone 14
Pro Max mientras que si nosotros
sacáramos esto quiero mostrarles bien la
diferencia Así se ve en una en un iPhone
14 Pro Max pero si le pongo la etiqueta
Así es como se ve esto literalmente lo
que hace es eso es es adaptar lo que
nosotros escribimos a los demás
dispositivos Esto va a ser clave cuando
trabajemos con responsive design que es
justamente esta forma de trabajar con el
desarrollo de tal forma que lo que
hagamos esté adaptado a todos los
dispositivos no importa si un tramos de
tablet de un cellu de otro de una compu
etcétera Esto va a ser importantísimo si
le damos en meta acá tenemos un par de
meta Okay normalmente tenemos el meta
description que esto Estaría bueno poner
un una descripción de más o menos unos
100 caracteres esta página web se trata
de bla bla Bla y también se trata de bla
bla bla no sé si son 100 caracteres o no
pero más o menos esta podría ser una
descripción de una página Entonces el
contenido es De qué trata la página
después tenemos otro meta que es el meta
keyword que de hecho si quieren
ahorrarse todo esto ponen meta dos
puntos K W y le dan enter y ya carga
todo es meta keywords y acá está el
content acá van todas las palabras
claves separadas por coma Por ejemplo si
tu página web se trata de no lo sé
vender frutas y verduras tus palabras
clave van a ser frutas fruta banana
manzan 1 kg de papa estas van a ser tus
palabras clave es decir cuando alguien
busque en Google no sé eh 1 kg de papa
tu página va a tener más chance de salir
porque Google va a tener en cuenta que
tu página se trata de 1 kg de papa
lógicamente va a leer tu página Y va a
ver si es apta o no pero va a darle más
prioridad que si no lo tuviera ahí sería
todo Vamos a ponerle un título que por
ejemplo sería página de venta de fruta
después tenemos la etiqueta meta autor
que esta es una etiqueta que básicamente
Define Quién es el autor de la página y
en este caso va a ser Lucas dalto porque
yo soy el desarrollador que la creó el
autor el creador es Lucas dalto después
tenemos la etiqueta meta name robots
Okay Esta es una básicamente etiqueta
creada solamente para que los motores de
búsqueda la lean y sepan Qué hacer si el
contenido es no follow le estamos
diciendo Ey No indexes mi página es
decir no muestres mi página en los
resultados de búsqueda tenemos no sniped
que no sniped es para esto no para que
no se muestre un fragmento de nuestra
página en un navegador yo por ejemplo
Busco top mejores comidas del mundo el
resultado que me salta es un fragmento
de esta página traveler.es si yo pusiera
el No snipe no va a permitir que Google
ni ningún motor de búsqueda agarre un
fragmento de nuestra página y lo muestre
yo por ejemplo Busco Translate Okay es
un snippet del traductor de Google pero
si nosotros lo abrimos se abre en
traductor es un fragmento de código que
Google extrae con el no snippet hacemos
que eso no suceda después tenemos el no
archive okay Que Esto hace que Google no
pueda almacenar una copia de nuestra
página web en en caché básicamente no
puede almacenar información en caché
Para qué nos sirve esto simple si el
usuario tarda 3 segundos en hacer que
toda la página le cargue Qué hace Google
esa página la guarda en caché Para qué
para que cuando el usuario vuelva a
entrar no tarde 3 segundos en mostrarla
tarde menos de un segundo Entonces de
esa forma el usuario cada vez que quiera
entrar a leer algo o a ver algo Todo lo
va a tener cargado en cach entonces la
página le va a cargar más rápido porque
ya es como que la guardó Entonces esto
lo que hacemos es impedir que no la
guarden caché Está bueno cuando por
ejemplo necesitamos que nuestra página
web tenga cambios constantes siempre
tiene cambios y de hecho nuestra página
web depende de cambios Como por ejemplo
tenemos una página que se encarga
demostrar la diferencia entre el dólar
argentino y el peso el dólar o entre el
dólar y el bitcoin Cuántos dólares vale
un bitcoin necesitamos que la página
esté en constante actualización Entonces
no nos sirve de nada que eh el número
ese se guarde en caché Porque si pasan
dos horas el valor va a cambiar
necesitamos que no se archivo en cach
después tenemos el no image Index para
que no se indexen las imágenes es decir
si yo por ejemplo pongo una imagen en mi
página web si vamos a Google imágenes y
La buscamos puede aparecer la imagen
pero si le damos no image Index las
imágenes no de exam que es como algo
antio no de todas las que les estoy
diciendo normalmente no se recomienda
usar ninguna excepto para casos
puntuales pero que sepan que si quieren
lo pueden hacer También tenemos el meta
name title que esto en realidad es el
título de la página casi que ni se usa
este ya pero se puede usar venta de
frutas va a ser el título por ejemplo
esto serían las etiquetas meta comunes
Hay un montón más también hay más
valores para robots hay más valores para
todo pero ustedes cuando vayan a tener
que desarrollar sus páginas web su
necesidad que tengan la pueden Google y
la van a encontrar estos son los meta eh
los meta Met tags más comunes y después
tenemos los Open grap Met tags o los
meta name Open grap dos puntos y el
metatag para qué jorak es esto simple
ustedes por ejemplo entran a Facebook
fíjense que acá cuando yo est posteé el
curso sql esto se puso automáticamente
yo solamente puse el enlace ven acá puse
el enlace y Facebook automáticamente
cargó el título del video algo de la
descripción el enlace que sería
youtube.com y una imagen que es la
imagen de la miniatura que yo usé si yo
por ejemplo pongo youtube.com barsy
dealto Okay es decir esto es un enlace
fíjense que acá en Twitter lo que salta
es esto que está acá esto que está acá
es lo que YouTube configuró que se vea
YouTube configuró que cuando alguien
ponga mi enlace en Twitter aparezca este
enlace que está acá esto que dice soy
alto y un poquito de la descripción yo
voy a youtube.com soy de alto vengo acá
y le doy en inspeccionar vamos arriba de
todo y vemos un poco en el Gea de las
etiquetas meta que tiene Vamos a darle
meta meta vamos a ver que acá Tiene meta
name og vamos a poner og dos puntos Acá
está acá fíjense el o title dice soy
dalto entonces Twitter acá pone soy
dalto el o. image pone esta imagen
buscamos esto acá debería saltarnos esto
Perfecto es lo que nos salta y el
description determina esto Mi nombre es
Lucas dalto soy un prador Argentina y es
exactamente esto Mi nombre es Lucas
dalto PR Argentina Entonces nada eso
hace esta etiqueta tenemos og title y
acá ponemos el content y así tenemos un
montón tenemos el og image y el og
description estos son los más comunes
bueno y después tenemos el otro que es
metatag URL que este también es muy
importante pero acá por ejemplo
básicamente apareció la URL real a la
que se tiene que redirigir a la persona
que accede de esta forma ahora si
ustedes quieren ver una previsualización
de esto es fácil por un lado tienen el
de bagger de Facebook el de bager de
Facebook es este que está acá le dan
clic y se debería abrir esto y acá nos
va a pedir que iniciemos sesión Yo
lamentablemente no tengo forma de
chequear porque no tengo mi celular acá
para confirmar Así que no puedo entrar
pero esto que están viendo ahora en
pantalla es básicamente ente soy yo
haciéndolo desde mi propia casa y acá es
como realmente pueden ver y chequear que
así es como se ve si se publica desde
Facebook También tenemos el post
inspector de linkedin que si entramos
acá al post Inspector ven acá les va a
pedir una URL si yo por ejemplo pongo
youtube.com barsy alto acá van a ver
cómo se muestra esta página El linkedin
Cuando alguien la publica Cuando alguien
lo publica el linked mi mi YouTube Así
es como se muestra ahora si ustedes
quieren ver también hay uno de Twitter
que bueno Lamentablemente el preview del
Twitter car ya quedó obsoleto pero Bueno
hay un montón y si realmente quieren ver
cómo se muestran cada red social
metatags.io Esto es lo que tienen que
buscar y acá les va a funcionar
Realmente si ustedes buscan youtube.com
barsy d'alto por ejemplo esto les va a
mostrar de verdad qué es lo que se
muestra vamos a ver la pantalla completa
esto que está acá por ahora lo vamos a
pasar acá a la derecha tenemos todo así
se muestra en Google acá arriba nos dice
ven Google así se muestra con el enlace
y todo así se muestra en Twitter ya lo
vimos se muestra así así se muestra en
Facebook Así se muestra en linkedin que
esto ya también lo vimos así se muestra
en Pain V así se muestra en slack y de
esta forma nos ahorramos tener que
chequear red por red Cómo se ve esto
igual es para cuando tenemos nuestra
página web ya subida a internet que por
cierto si quieren saber cómo subir una
página web a internet hace un mes subí
un super curso de Hosting para que sepan
todo acá tienen todo sobre el
alojamiento web todo la mejor plataforma
de Hosting todo sobre configuración todo
todo lo que necesitan saber es increíble
está en este curso Así que si quieren
subir su página web a internet el
siguiente paso que tienen que hacer es
verse este curso y dura repoquito 2
horas nada más ahora si ustedes quieren
ahorrarse todo esto directamente y no
quieren andar probando Y ustedes quieren
generarlo directamente desde acá esto
les genera las tres meta attacks más
importantes que son justamente la imagen
el título y la descripción acá por
ejemplo si ustedes ponen no sé tienen
una página de frutas fruta y verdura por
ejemplo y quieren que se vea fruta y
verdura la descripción va a ser fruta y
verdura para todo el mundo tengan
frutitas gratis manzana lechuga y 1 kg
de papa y ya está Entonces qué hacemos
generamos esto le damos en Head code y
acá tenemos todo el código para copiar y
pegar en nuestra página web para que se
vea así tal cual como estamos viéndolo
acá en todas las demás plataformas la
verdad que está bueno es importante no
nos cuesta nada Está bueno cuando
ustedes realmente creen su página web
esto Ahora no pero cuando la creen y
cuando la trabajen si no la van a hacer
dinámica encárgate de chequear y ver
esto cómo hacerlo de forma nativa si la
van a hacer dinámica ya lo van a tener
que resolver con otra tecnología pero
nada investígalo que la verdad que es un
tema bastante interesante y es muy lindo
porque hace que nuestra página esté
mucho mejor posicionada encima Pero
básicamente Hasta pueden jugar bromas o
sea ustedes tranquilamente podrían hacer
que cada vez que se llame a la imagen se
muestre un pen enorme Por más que cuando
entren hay un contenido recontra
educativo o sea pueden hacer de todo
lógicamente No hagan esa estupidez que
acabo de decir pero nada que sepan que
se puede hacer de todo bueno ahora sí
terminamos esta sección de metatags
comentarios y Fabi comimos tres de las
cosas que más se usan cotidianamente en
un toque Así que ahora vamos a pasar a
ver cómo funcionan los textarea que son
importantes entender el funcionamiento
de los textarea porque básicamente son
como una especie de input pero más
grande para escribir más cantidad de
texto y tiene otra propiedad bastante
importante que podemos aprender a
trabajar así que bueno vamos a la
sección para entender Cómo funcionan los
text área Che al repedo me qued este
archivo de estilos Eh no lo usamos ni un
poquito Bueno ahora lo que vamos a ver
es el uso de los text Area qué J AC son
los text Area Bueno muy simple es
básicamente como un input Solamente que
te permite escribir más cantidad de
texto o sea texto en varias líneas pero
lógicamente tiene sus características
sus particularidades como que tiene
algunas cositas que tenemos que retocar
para que se vea como un input más yo voy
a crear un un formulario y adentro de
cada formulario voy a poner este
elemento div que va a dividir y vamos a
poner adentro un input Esto sí va a
suceder acá voy a poner un name por
ejemplo tu nombre Play holder nombre
completo vamos a crear otro input bueno
Igual acá no va a name Vamos a ponerle
type nombre completo acá va a ser type
email vamos a olvidarnos del name por
ahora y vamos a separarlo en divs
distintos no se olviden que div es un
divisor es una etiqueta que no tiene
ningún tipo de rol más adelante lo vamos
a ver pero es una etiqueta que no es
semántica para nada Es decir es
simplemente un bloque común no tiene
ningún tipo de uso específico para algo
podemos usar la cantidad de divs que
querramos siempre lo importante es
utilizar la etiqueta que tengamos que
utilizar por ejemplo en lugar de un form
no utilizamos un div Por más que
estructuralmente funcionen Exactamente
igual no usamos un form porque es la
etiqueta para formularios justo form sí
funciona un poco distinto pero lo que vo
es que tenemos un montón de etiquetas
que no como footer como asai como header
como nav y aún así no vamos a usar di
vamos a usar etiqueta correspondiente
este caso Sí porque solamente es para
separar yo tengo esto acá vamos a venir
a estilos vamos a abrir una pantalla al
lado vamos a correr el servidor para que
nos cargue lo nuevo Acá está tenemos
esto yo lo que voy a hacer es voy a
darle al Body un margin cero y voy a
venir a los inputs y darle Z Wi del 100%
en este caso como vemos tenemos un
desbordamiento por qué porque los inputs
tienen un padding y un margin mínimo si
yo por ejemplo le saco el padding en
este caso el padding va a ser cero y el
margin va a ser cero ahí se ajustaría
pero aún así tenemos el problema de los
bordes tenemos un Border y le damos none
Y ahí sí tenemos esto bien el problema
de esto es que la verdad que no se suele
trabajar así solamente para no tener La
Barrita de scroll para esto ya sabemos
qu es lo que tenemos que hacer y es
trabajar con la propiedad Box sizing
Border Box y de esta forma ya se adapta
y no tenemos que andar haciendo todo lo
anterior esto lo vamos a minimizar lo
que yo quiero hacer ahora es tener un
margin de unos 20 píxeles Esto va a
tener un un mar un margen de 20 píxeles
Perdón lo que yo quiero hacer ahora es
hacer que los div en este caso vamos a
ponerles nombres correctos vamos a poner
la clase form input Ahí está vamos a
hacerlo un poquito más chiquito para que
se entienda más y a estos divisores Les
estamos poniendo esta clase Entonces
ahora estiz la clase form input Ahí está
y ahora podemos venir acá y decirle Por
ejemplo que van a tener un padding de 20
píxeles y arriba y abajo van a tener un
padding de 10 píxeles perfecto yo al
formulario le voy a dar un background Ed
Ed Ed que es este gris que podemos
apreciar aún así arriba y abajo voy a
darle No si 10 está bien yo voy a
agarrar a los inputs y voy a darles un
padding de unos se píxeles por 12
píxeles y ahora sí tenemos unos inputs
lindos esto que está acá en vez de darle
10 le voy a dar también seis ahí estamos
y borde le voy a dar solamente un borde
left dos píxeles solid y le vamos a dar
que sea un color 666 ahí está el
problema de esto es que se nos pone un
borde en todas las direcciones para
evitar esto antes del Border left le
damos un Border none para que el borde
no exista por defecto y todas las
propiedades se configuran en cero todo
nulo y acá especificamos el Border left
lo ponemos antes porque si lo ponemos
después se sobreescribe y no tenemos
borde Entonces lo ponemos antes ya vamos
a ver más adelante en el apartado de css
intermedio Cómo funciona esto de
reescribir propiedades el Qué significa
la cascada la herencia y un par de cosas
más como la especificidad son cosas
super importantes pero por ahora no De
hecho acá le voy a dar el borde de tres
píxeles y Esto va a ser un poquito más
oscuro voy a tener nueve acá no va a ver
nombre completo sino que va a ser email
Ahí va nombre completo email voy a poner
un h2 que va a ser formulario de
contacto y voy a agarrar el h2 y le voy
a dar un textal in Center Ahí estamos y
voy a decir que el font family va a ser
san serif como me gusta a mí ahora al
formulario le voy a dar un padding 40
píxeles arriba y abajo y unos cero
píxeles a los costados y ahí tenemos
esto no me gusta voy a darle solamente
20 lo tenemos adaptado a dispositivos
móviles como ven esto en dispositivos
móviles se adapta Así que está lindo por
eso de hecho al form le vamos a usar una
propiedad llamada Max withd que Esto
hace que lo máximo que se pueda estirar
sea un número en este caso el Max withd
va a ser de 600 píxeles por ejemplo
entonces más que esto no se estira Y si
queremos que esté centrado qué hacemos
le damos un margin auto y ahí se centra
siempre entonces si esto se agranda
siempre va a estar el formulario
centrado yo por ejemplo le doy en
inspeccionar Y lo damos acá si tiene
tiene que achicar se achica pero si se
tiene que agrandar de más se centra
correctamente De hecho acá el Max wid va
a ser de 500 porque no lo necesitamos de
más de 500 tenemos el formulario de
contacto el color por defecto que le
vamos a dar al Body va a ser un Hash 444
porque no queremos que sea del todo
opaco es decir del todo negro Aunque
bueno es del todo opaco técnicamente
pero bueno y al formulario le voy a dar
una sombra le vamos a dar un Box Shadow
cer píxeles cero píxeles 45 píxeles y
vamos a hacer que tenga un color este
que es como una sombra muy leve voy a
dejarlo en siete y acá le voy a bajar a
25 lo dejo en seis y le doy en 35 y
vamos a hacer lo mismo con los inputs le
vamos a dar un Box Shadow c píxeles C
píxeles 15 píxeles le vamos a dar y un
00 un porque con esto es suficiente Y
ahora sí tenemos un formulario de
contacto ni lindo ni feo es un
formulario de contacto de hecho el h2 en
este caso no estaría mal ponerlo adentro
Así que lo vamos a dejar adentro por qué
no vamos a agarrar y darle un margin
cero y vamos a darle un margin bottom 10
píxeles para que se separe un poquito de
esto y al form sí le vamos a dar un
margin top de unos 50 píxeles para que
no esté tan arriba no tenemos nuestro
formulario de contacto Ahora yo lo que
quiero hacer es bueno crear un campo más
para que el usuario me pueda rellenar
por ejemplo No lo sé un campo de texto
no no me gusta mucho blanco creo que a
ustedes tampoco les gusta el color
blanco así que lo único que voy a hacer
va a ser cambiarle los colores vamos a
hacer que el color de fondo del Body sea
este oscurito Vamos a darle en dos do
dos y a este le vamos a dar un
background color transparent para que
sea transparente tranquilos ya aquí van
a ver cómo vamos a hacer se me acaba una
idea linda para un diseño el color acá
arriba lo vamos a dejar en no blanco
sino que en e e e es un casi blanco los
inputs van a tener un background
transparente también fíjense que feo No
está se nos fue el margin top igual no
sé por qué ah margin top acá la sombra
la tiene igual Ahora sí la sombra la
podemos hacer más pronunciada y de 55
píxeles ahora la sombra queda mucho
mejor le voy a dar una opacidad de nueve
así tampoco están exagerada Ahí está
Esto para mí es mucho más lindo para mí
De hecho una cosa que podemos llegar a
hacer es en vez del Border left darle
directamente un borde de un Pixel solid
a todo y redondeamos cuatro píxeles pero
en este caso el borde sería de un color
más oscurito sería por ejemplo de 666
nada y acá tendríamos esto esto lo hago
principalmente por ustedes para que no
tengan que andar viendo todo un texto
así esto que está acá lo vamos a poner
también vamos a bajar la intensidad al
h2 le vamos a poner un text transform
uppercase así se pone todo en mayúscula
pero también le vamos a dar un font
weight de 100 así se pone más chiquitito
y un font size 22 píxeles Ahora sí y va
a tener un padding de sí por qué no unos
10 píxeles me gusta mucho más Este
formulario de contacto si ahora hago un
zoom ven que se va adaptando a la
diferente resolución que tiene ahora
podemos escribir y fíjense que el color
va a estar en negro Así que a los inputs
tenemos que darle un color e e e Ahí
está y ahora si escribimos va a estar en
este color ahora sí me siento preparado
acá vamos también a aumentar esto vamos
a ponerlo en cuatro tres en tres está
bien Ahora sí Perdón Le juro no le saco
más tiempo la único vamos a redondear
Border radio ocho píxeles de borde Ahora
sí Che si en vez de negro le ponemos
blanco pero con dos queda un poquito
mejor en blanco No sí queda mejor en
blanco eh mucho mejor Bueno ahí está
Perdón perdón bueno mírenlo como algo
positivo estamos haciendo un ejercicio
como se lo dije antes no es que estamos
haciendo todo esto al pedo y Estamos
perdiendo horas de curso Porque después
vamos a ver solamente una propiedad No
gente hicimos un formulario de contacto
gente por más que no funcione una
hicimos el diseño de un formulario de
contacto Entonces esto es super valioso
para mí que tengan la capacidad de hacer
esto es super valioso entonces que lo
puedan desarrollar conmigo es más
valioso todavía lo que les quiero
mostrar es justamente Cómo funcionaría
una de las de los nuevos elementos que
llama textar para eso vamos a crear otro
div que también va a ser un form input
Okay y vamos a agregarle a este from
input un text Area el text Area no es
como los inputs que funcionan así y
tenemos que poner el type no no el text
área es como un elemento más es un
elemento que podemos rellenar adentro
Ven actualizo y acá tenemos el elemento
Solo que la diferencia es que podemos
escribir en este elemento y tiene esto
que a mi gusto es una porquería que
básicamente ven se trabaja de esta forma
que es eh cambiando las dimensiones de
este elemento yo lo que voy a hacer es
darle las mismas propiedades que tiene
el input para eso esto lo vamos a ver
más adelante la sección de selectores
avanzados pero una forma de seleccionar
dos elementos al mismo tiempo es con una
coma si yo pongo coma Y le doy text área
lo que acabo de hacer es darle el mismo
estilo al text arrea y al input es decir
todo este este bloque que tengo acá No
se lo di solo al input se lo doy al
input coma y al text área estos dos
elementos van a estar siendo a los que
se les va a estar aplicando estas
propiedades Entonces es útil cuando
quieren seleccionar más de un elemento
Che en este caso Esto es algo muy común
porque normalmente el text arrea tiene
casi las mismas propiedades que input
Solo que algunas específicas que los
inputs no necesitan y es lo que vamos a
ver ahora ahora el textarea tiene todo
lo que necesitamos una cosa importante
que no les mencioné es que el text arrea
fíjense tiene por defecto configurado
para que si le damos un wid de 100% no
se ponga al wid de 100% esto es por sus
propiedades iniciales las que trae
configuradas por defecto que tranquilos
que ahora las vamos a ver si ustedes
quisieran que el text ara tenga un Wi
mínimo del 100% ahí deberían poner min
withd 100% y el textarea Ahí está
teniendo un Mining wh del 100% el lo
bueno de esto es que van a evitar que se
risee hacia los costados pero solamente
hacia dentro porque para afuera se puede
cambiar la dimensión y Esto hace que se
nos cague todo o sea es decir si
nosotros podemos hacer esto de Modificar
el tamaño no sé estamos arruinando el
layout entonces para evitar esto fíjense
que yo hago esto un poquito más grande
estamos arruinando el layout Esto está
rompiendo el componente que
desarrollamos para eso usamos la
propiedad resize tenemos varios valores
el primero que viene es Boot Boot lo que
nos permite es hacer que pueda resicar
tanto en el eje x tanto en horizontal
como en el eje I que es en el eje
vertical si yo solamente quisiera que se
pueda desplazar en el eje vertical le
escribo vertical entonces de esta forma
solamente el scroll se puede hacer así
ven solamente hacia arriba y hacia abajo
el problema que tenemos con esto es que
de vuelta puede romperse esto de hecho
si actualizo la página esto se va a
cargar así y si yo hago esto fíjense Qué
pasa ven tenemos como que el texto se
nos oculta y se nos genera esta Barrita
de scroll que no es tan linda lo que
podemos hacer es venir acá y poner un
min hate por ejemplo 200 píxeles Uy
Perdón esto no esto tampoco para eso
vamos a agarrar el text arrea y
modificar específicamente el text arrea
Para no afectar a los demás elementos
Vamos a darle un wid 100% a estos y al
text aras a quien le vamos a dar un min
wid del 100% un resize vertical un min
hate 100 píxeles por ejemplo ven ahí
tiene un mínimo y un Max hate de 200
píxeles Entonces esto lo que hace es
hacer que como mínimo tenga este alto y
como máximo tenga este alto entonces más
que este Rango no nos podemos mover Esto
está bueno porque por defecto va a
cargar con el que tiene como valor
mínimo que es este esto también funciona
con placeholder o sea podemos ponerle un
placeholder deja tu mensaje y acá dejas
tu mensaje lo único que si están viendo
la tipografía que trae por defecto no va
a ser la que nosotros le pongamos el
text área trae otra tipografía aparte Si
queremos que el textarea tenga la misma
tipografía la tenemos que poner
específicamente en el text área y ahí se
pone porque si no el textarea te da de
su propia tipografía por defecto acá voy
a sacarle el padding que de 12 píxeles a
los lados voy a darle ocho y seis y de
esta forma podemos crear un elemento de
text área ahora directamente si no
queremos que se deslice ni en vertical
ni en ningún lado le damos en resize
none y ya está ya se quedó así no le
podemos cambiar el tamaño y va a quedar
ahí por más que esto crezca ya está el
tamaño no se cambia se nos va a hacer
esta Barrita de scroll y vamos a tener
que aprender a manejarla pero el tamaño
no va a cambiar a mí esto no me gusta
mucho por suerte ahora se está por
implementar una nueva funcionalidad para
que el textar se vaya adaptando al
contenido la propiedad sería form sizing
y sería content esta es una propiedad
que va a permitir que nosotros vayamos
escribiendo y que mientras escribimos el
contenido se ajusta automáticamente al
tamaño Entonces si escribimos y se hace
más grande se agranda si no se achica
por ahora no está disponible pero por
ahí cuando ustedes estén viendo este
curso ya esté disponible Así que
pruébenla si el texto se adapta funciona
si no no Esta es una nueva
característica que están implementando
ahora así que bueno ahora están viendo
en pantalla cómo funciona form sizing
content cuando el contenido crece la
caja también crece Y si el contenido se
hace más chiquito la caja también se
hace más chiquita es una propiedad nueva
para mí va a ser la mejor forma de
utilizarla porque si no tenemos que
utilizar javascript después tenemos que
utilizar javascript para que el
contenido se adapte automáticamente
Entonces eso a mí no me gusta mucho que
se adapte yo normalmente lo que suelo
hacer es el resize lo dejo en none y no
le pongo un Max hate le pongo el min
hate y ahí queda así fijo si el usuario
quiere escribir más de lo normal sigue
escribiendo abajo personalizo la barra
de scroll que después más adelante en
otro apartado van a ver cómo se puede
personalizar también La Barrita de
scroll para que sea más linda Bueno y
después Obviamente el botón que acá no
pusimos ningún botón pero también se
pondría un botón obvio no después
tenemos una propiedad para el textarea
que es rara pero se usa el read only que
esta es una propiedad para que solamente
se pueda leer si yo por ejemplo acá
escribo un texto Okay este texto no se
puede modificar Es solamente una
propiedad que es solo de lectura Esto
hace que el text área solo se pueda leer
y nada más que leerlo no voy a poder
hacer otra cosa que no sea leerlo Aunque
lo quiera modificar no puedo si lo saco
ven ya puedo modificarlo y demás es una
propiedad que es bastante Útil para por
ejemplo cuando nosotros estamos
trabajando eh mostrarle información al
usuario que no se puede modificar se lo
mostramos así después tenemos otra
propiedad que llama dice Ah otra cosa si
ustedes ven que los atributos los pongo
así require como que ya saben que es un
atributo que no necesita valores disable
como read only por ejemplo Estos son
atributos que no necesitan valor
justamente se llaman atributos booleanos
porque no necesitan valor solamente
componerlos es suficiente de hecho sus
valores son true o false si lo ponemos
es como si fuera true Entonces si si no
lo tiene puesto no cuenta si lo
activamos cuenta Por eso no necesitan
ningún valor porque son atributos que
solamente componerlos es como si ya les
dijéramos que sí son valores que
solamente funcionan por sí o por no y si
no están puestos es como si no Y si los
escribimos es como que sí Entonces no
hace falta que le escribamos acá y
pongamos así on y ahí está no así ya no
solamente componer redo es suficiente
bueno También tenemos el disable Okay
que esto básicamente lo que hace es
desactivar el campo de texto si venimos
acá y escribimos es parecido al read
only la diferencia entre disable y read
only es que cuando nosotros tenemos la
propiedad read only es importante porque
es algo que no puede podemos modificar
pero fíjense que si le doy clic elemento
hace un Focus si yo hago Focus acá
arranco escribir hago Focus acá arranco
escribir acá puedo hacer Focus Solo que
no puedo escribir y cuando este
formulario se envíe a un servidor los
datos que estén acá dentro también van a
ser enviados solamente que lo único que
no podemos hacer es escribir encima Solo
que si le damos disable acá ya
directamente no podemos hacer Focus ven
Yo le doy clic acá se hace Focus clic
acá se hace Focus acá ya no nos aparece
ese bordecito blanco porque no podemos
enfocarlo y no solamente eso cuando
mandemos el formulario este campo no se
va a enviar Esas son las dos principales
diferencias con read only solamente no
lo podemos modificar pero se puede
enfocar el campo y se puede y ese ese
dato se envía en cambio con disable no
se envía el dato y no se puede enfocar
después tenemos Max length que esto
básicamente nos dice Che cuánto podemos
escribir como máximo de texto en Twitter
por ejemplo en su momento podríamos
llegar a decir que eran 140 caracteres
bueno 140 Entonces hasta ahora solamente
podemos escribir 140 caracteres ven si
escribimos más de 140 caracteres no
podemos escribir no nos deja Por más que
est escribiendo no me deja ven borro
escribo y no me deja por qué Porque no
me deja escribir más de 140 caracteres
como si fuera Twitter ven es más lo que
solemos hacer acá es cuando detectamos
que escribió más de 140 le ponemos un
mensajito no puedes escribir más de 140
caracteres Twitter no hace esto Twitter
te deja Y si te pasas te está avisando
que te estás pasando yo no la uso esta
pero la pueden usar ustedes Entonces lo
voy a sacar también Ahí está otra cosa
es que el Play holder no se van a ver si
el textarea tiene este espacio que está
acá esto que está acá cuenta como un
espacio si ustedes quieren que el Play
holder se vea no dejan el espacio y ahí
se va a ver y después tenemos otra
propiedad que es WAP que no la vamos a
ver ahora la deberían ver cuando vean
javascript pero básicamente WAP
básicamente es una propiedad que
controla Cómo funcionan los saltos de
línea si es soft no incluye los altos de
línea en el texto y si es hard sí lo
hace pero olvídense ignoren lo no vamos
a trabajar con javes Entonces no lo
vamos a ver es irrelevante en este caso
así que olvidémonos de eso con el que
viene por defecto ya es más que
suficiente porque la mayoría de los
casos lo usamos así y si nosotros no lo
vamos a usar normalmente es porque le
vamos a dar una funcionalidad puntual
que dependa de esos espacios en línea y
para eso tenemos que saber mucho más de
programación Y si sabemos más
programación vamos a ver esta propiedad
tan básica y como manejarla así que no
hace falta ni que las explique ahora
porque es estúpido entonces bueno
básicamente acabamos de ver otra forma
de o otra forma de pedir datos no los
inputs ya sabemos que nos piden
diferentes tipos de datos Y en este caso
El problema es que no podíamos tener
ningún input que sea largo grande para
escribir muchas líneas bueno acá lo
tenemos es lo mismo que un mail venimos
acá mi nombre es Lucas dalto mi mail es
p@gmail.com y el mensaje es Hola Mi
nombre es
alto quería acercarle mi mensaje para
poder informarle que y arranco escrib un
texto termino y lo envío Punto Final
listo en este caso justo esto es
bastante chiquito Así que podría llegar
a dejar un min he de 140 píxeles por
ejemplo y ahí lo hacemos o también
pueden hacer que el ancho sea por líneas
en vez de darle un min hate acá lo que
pueden hacer por ejemplo es hacer que
tengo min hate irrelevante Como por
ejemplo 100 píxeles para que no se vea
más chiquitito pero acá en en el Play
holder hay una propiedad que se llama
columnas o rows que básicamente es la
cantidad de líneas que puede tener si yo
acá por ejemplo pongo cinco voy a
sacarle el min he Ahí está si yo pongo
seis por ejemplo siete ven cómo va
cambiando Esto bueno Esto es la cantidad
de líneas que le vamos a permitir al
usuario escribir yo por ejemplo escribo
acá y si pongo enter me tira scroll no
porque solamente se puede escribir una
línea yo le pongo dos es para que el
usuario escriba hasta dos líneas si yo
le pongo tres es para que el usuario
escriba hasta tres líneas ven cuatro Ya
me tira La Barrita esta de scroll me
mantengo tres y me mantengo Entonces yo
acá lo que hago es ponerle por ejemplo
seis para que escriba hasta seis líneas
y me ahorro el min hate porque el min
heate lo que hace es yo por ejemplo le
pongo un minh de 200 píxeles Qué pasa Yo
por ahí estoy escribiendo acá y lo que
pasa es que justo el texto se me corta
ahí y me sale esta barra Entonces yo
tengo que calcularlo Cuánto hago pongo
202 no 203 ahí me desapareció el scroll
ahí me queda justito no pero qué pasa si
de repente hago un mini zoom o lo saco o
lo o de repente cambiamos el navegador o
cambiamos una propiedad bueno para
evitar tener que calcularlo tan
exactamente en vez del min he qué
hacemos venimos acá y ponemos la
cantidad de columnas le damos ocho bueno
que se mantenga en ocho y ahora podemos
escribir hasta ocho líneas una dos 3 4 5
6 7 8 y si escribimos una más ahí se nos
pone La Barrita de scroll pero si no
hasta ocho líneas podemos escribir yo el
Rose la verdad que lo uso está piola así
que ya esto es a lección propia a pesar
del Rose siempre está bueno tener
también un min hate que en este caso le
voy a dar el min hate 101 píxeles por
ejemplo en este caso Vamos a darle 102
pues ya sabemos que funciona con 203 Así
que la mitad de 101,5 vamos a tirarle
uno más por las dudas y Esto va a ser el
mínimo Entonces si estamos en un
dispositivo móvil en donde los píxeles
miden mucho más chiquitito Esto va a
cambiar aún así le podemos dar esto con
ems por ejemplo Entonces por ejemplo acá
formulario puede tener un font family un
font size por ejemplo de 16 píxeles por
ejemplo y el form el h2 por ejemplo que
está adentro de form en vez de darle un
font size 22 píxeles le damos un font
size 1.4em por ejemplo entonces cambio
un poquito esto Sí ahí está 1.4m es
parecido a 1,13m a mí me gusta está bien
porque si de repente esto se adapta a
dispositivos móviles va a permitir hacer
que también el campo este se adapte
lógicamente en el iPhone yo directamente
le sacaría el margin top que tiene eso
lo hacemos después después le enseño
cómo hacerlo para que en dispositivos
móviles tenga un estilo y en página
tenga otro pero por ahora con esto
estamos bien es suficiente porque ya lo
tenemos adaptado a móviles ven la
realidad es que está bueno porque ahora
podemos directamente trabajar con los
tamaños completos Entonces yo por
ejemplo puedo en dispositivos móviles
hacer que la tipografía sea un poquito
más chica Entonces cuando yo sé que la
tipografía es un poquito más chica
porque por ejemplo esto no me entra en
mi celular qué hago hago para que en
dispositivos móviles un campo tenga otro
font size Entonces todos los elementos
se van a hacer más chiquitos y no va a
tener dándole uno a otro otro es decir
si yo por ejemplo acá en este formulario
solamente usara píxeles si esto fuera
muy grande para dispositivos móviles qué
hago la próxima vez vengo a este
elemento y esto lo cambio a 14 por
ejemplo entonces automáticamente todo me
cambia me cambia el texto del formulario
me cambia me cambia todo se me adapta
entonces esa es la ventaja de usar em lo
que vamos a hacer ahora es terminar acá
vamos a ir directamente a otro más es
decir vamos a ir a ver la siguiente
sección estoy hablando de labels la
sección de Label va a ser cortita Pero
creo que es importante que consideremos
los labels a la hora de desarrollar
cotidianamente Así que vamos a ver esto
de los
labels bueno básicamente lo que vamos a
ver ahora son los labels y los labels es
una forma que tenemos de etiquetar
individualmente un elemento de de de
input es decir un campo que en el mismos
datos al usuario tiene que estar
etiquetado por un Label Está bueno
porque hace que por ejemplo cuando
apretemos en el Label automáticamente se
nos haga Focus en el input no solamente
eso también mejoran la accesibilidad la
usabilidad para la gente que usa
tecnologías de accesibilidad Ah y
también a veces queda mucho más lindo
este es el formulario que teníamos
recién que lo trabajamos recién Qué
pasaría si yo a esto por ejemplo le
quisiera agregar un Label Cómo hago
simple una forma interesante es venir
acá dentro y poner Label y acá por
ejemplo pongo nombre completo acá pongo
esto y acá pongo esto en vez de nombre
completo acá puedo poner por ejemplo
email y acá mensaje entonces acá tenemos
algo que queda bastante estético pero lo
que yo voy a hacer es agarrar a estos
elementos que serían labels vamos a abar
los labels y vamos a darle directamente
un font size
0.9em Ahí estamos ahí me gusta mucho más
y vamos a darle un pequeño margin bottom
de unos cuatro pixeles para que se
separe un poco del espacio hacia abajo
bueno justamente si acá le damos un
margin Button de 40 píxeles no va a
funcionar porque los labels Son
elementos en línea y los elementos en
línea no podemos modificar les el margin
así tan fácilmente entonces para esto
voy a darles un padding directamente de
cuatro píxeles pero acá tenemos otro
problema tampoco podemos darles un
padding Entonces cómo hacemos esto
tenemos varias formas una es venir acá y
darles un margin top a estos elementos
de cuatro píxeles por ejemplo entonces
ahí se separó lo que queríamos o podemos
venir acá y darle por ejemplo un Line h
2 por ejemplo y ahí tenemos el esto lo
tenemos más separado acá le voy a dar 88
porque siento que es muy está muy grande
el texto y acá estamos ahora sí tenemos
un formulario como la gente y como se
debe lo único de esto es que tenemos una
redundancia por qué porque tenemos lo
mismo que tenemos acá lo tenemos en el
Play holder Y eso no está bien cómo
hacemos en este caso para que no parezca
redundante bueno acá ponemos un ejemplo
John email y acá ponemos ejemplo
@gmail.com por ejemplo y acá en mensaje
podemos poner deja tu mensaje y tres
puntitos suspensivos entonces de esta
forma veo que le estamos dando una idea
al usuario de qué cómo tiene que
completar cada campo también podemos
Modificar el Play holder ven que el Play
holder tiene un color como gris bueno
eso también lo podemos modificar así que
preocúpense de hecho algo que podemos
hacer por ejemplo es hacer que los
bordes sean de otro color por ejemplo
vamos a hacer que sean de un verde Neón
y al texto que está dentro le voy a
poner el mismo color Entonces cuando yo
escribo ven esto no está mal pero la
verdad que a mí no me gusta hacerlo así
ahora por qué Porque al no poder
Modificar el Play holder no entender
Cómo funciona el outline y demás yo no
no lo haría de esta forma pero nada que
sepan que lo pueden hacer también y el
texto está muy blanquito así que hasta
le podemos dar ddd darle acá también ddd
y ahí estamos Sí ahí está con ddd para
mí es mucho mejor que el e e e bueno
gente Ya está ya tenemos un formulario
ahora una cosa que no les dije que yo
les había dicho a principio del curso
que se podía hacer es que cuando
nosotros clique un Label Okay el Label
debería poder focusear el elemento para
eso tenemos que hacer que el input tenga
un ID por ejemplo ID nombre Entonces yo
en el Label pongo for y escribo nombre
vamos a checarlo un poquito más le pongo
ID nombre y al for le pongo for nombre
Entonces yo cuando cliqueo el Label ya
está está enlazado es una forma de
enlazar el elemento vamos a hacer lo
mismo acá le vamos a poner un for email
y acá le vamos a poner un ID email acá
le vamos a poner un for mensaje y acá le
vamos a poner un ID mensaje ahora sí
clique acá y se posiciona acá clique
vamos acá se posiciona acá clique acá y
se posiciona acá todo perfecto otra
forma de enlazarlo si no lo quieren
hacer con el for y con el ID es en lugar
de hacerlo así pueden ahorrarse los ID
Okay se los ahorran Pero lo que sí están
obligados a hacer es abrir el Label y
abarcar todo el input y terminarlo ahí
básicamente ahora el input estaría como
adentro del Label es una forma también
muy usada ven el Tex estaría lo mismo y
hacemos lo mismo con este Entonces nos
quedaría Así que sacar el for y acá
también tengo que sacar el for Ahora sí
apretamos email y ahora sí focuse sea el
elemento que tiene envuelto ven como
digo también para los lectores de
pantalla sirve no solamente eso también
es bueno por ejemplo para darle clic en
acepto los términos y condiciones Si yo
por ejemplo acá pongo otro div vamos a
crear otro elemento div y acá vamos a
poner en vez de esto vamos a poner un
input checkbox ven acá tenemos este
cuadradito que está acá acepto los
términos Y
conciones entonces ahí está A este input
le voy a dar una clase muy puntual
checkbox y voy a venir acá y voy a poner
checkbox y acá le voy a dar por ejemplo
que el wid sea Auto entonces ahí se
posiciona acá que es donde lo
necesitábamos acá por ejemplo voy a
hacer que el hate sea de 10 píxeles nada
más y fíjense que a veces es complicado
darle clic acá o sea realmente se vuelve
difícil darle clic al botoncito Este
Entonces qué hacemos apretamos el Label
y es como si automáticamente diéramos
clic Esto es algo Bastante piola porque
básicamente nos ahorra tener que darle a
este botoncito de acá y si el usuario le
pifia no hay problema porque Igualmente
lo podemos hacer con el Label ven es una
forma acopada de hacerlo normalmente a
los input type checkbox no se les eh da
estilo así se les da estilo por atributo
pero no llegamos a eso no lo vamos a ver
todavía aún así lo vamos a dejar todavía
así así lo pueden ver bien bueno así
funcionan los labels es importante que
los conozcan Lo único malo de utilizar
esta forma de asociar los Label con el
input es que cuando queremos que el
Label esté separado del input Ya no lo
vamos a poder hacer o sea si queremos
que el Label esté por un lado y el input
por el otro no podemos Porque ahora el
Label y el input van a estar siempre de
la mano entonces cuando no queremos esto
nada utilizamos el Label y lo asociamos
por un for O sea si por ejemplo tenemos
el Label acá arriba email y tenemos el
input acá abajo por ejemplo acá sí
ponemos for email y al input le damos ID
email el email está acá y el input está
acá abajo pero qué hacemos clique acá y
automáticamente se posiciona abajo
entonces en estos casos está bien poner
el for y el ID pero si no también está
bien pero yo prefiero ponerlo de esta
forma que es ponerlo adentro Bueno nada
ya sabemos cómo funcionan los labels no
se olviden que siempre tienen que ser
textos claros y precisos y ahora sí
vamos con la siguiente sección que vamos
a seguir viendo cosas sobre formularios
vamos a ver cómo funcionan los selects y
los options y Cómo usar los datalist con
los que son dos cosas muy interesantes
pero básicamente es como un menú
desplegable para elegir una opción es
bastante copado es como otra forma de
input pero no es un input O sea si es un
input pero no es la etiqueta input como
tal son justamente Select option y
datalist así que bueno vamos a
verlos Bueno ahora lo que vamos a ver
son los Select y los datalist y adentro
bueno cada una de estos dos tienen otro
1 elementi que son los option
básicamente los los Select son un tipo
de campo de entrada que lo que nos
permite es como seleccionar Okay una
opción de entre varias opciones es como
esa listita que se te despliega para que
elijas una de todas eso es una y los
datalist es básicamente un input en que
nosotros escribimos algo y se
autocompleta con opciones que predefin
imos es una mezcla entre un input y un
Select algo así vamos a arrancar con el
Select Yo acá por ejemplo tengo el
acepto los términos y condiciones Acá
tengo el mensaje y yo voy a crear acá
otro div esto es el código que teníamos
antes acá voy a crear otro div también
este div como ya sabemos va a tener la
clase form input y acá vamos a poner un
Select el Select es esto que está acá
que es esta Barrita desplegable como
vemos en este caso esta Barrita
desplegable no tiene opciones no tiene
nada para elegir para eso tenemos que
agregarlas es decir venimos acá y
ponemos un option y acá ponemos el la
opción uno y ahí tenemos una opción y
así podemos hacerlo varias opciones
opción dos y opción tres por ejemplo acá
tenemos tres opciones diferentes es
importante destacar que el Select
también tiene que tener un name que en
este caso por ejemplo el Select podría
llegar a ser type of user por ejemplo es
como esto sería tipo de usuario y acá el
valor va a ser este en este caso el
value por ejemplo podría llegar a ser
value user One value user two value user
3 esto esto no lo vemos Nosotros Esto es
algo interno para cuando nosotros
recibimos este código por ejemplo con
javascript saber leer este dato pero
básicamente es es el value pero lo que
el usuario ve es esto que puede elegir
estas opciones repito lo value es
importante porque va a ser el valor que
el servidor va a recibir O sea si el
usuario selecciona opción uno y envía el
formulario el servidor no va a recibir
opción uno este texto va a recibir este
texto user One es lo que el servidor va
a recibir lo podemos configurar Esto
está bueno porque es cortito y no se
olviden que no tenemos que hacer que el
servidor reciba con acentos con espacios
No todo en una sola frase todo en
minúscula y de esta forma lo
identificamos con el uno el dos y el
tres y ya está lo que hacemos después
con javascript es agarrar ese valor y
hacer algo con ese valor y si tenemos
espacios comas tildes y demás es más
difícil entonces al dope y voy a venir
acá y además de a darle al textarea y el
input esto le voy a dar a los Select y
ahora si se fijan el Select ya está pado
Exactamente igual que esto pero nos
falta el option Entonces vamos a venir
acá y vamos a hacer que el option ahora
option tenga también un background
transparent pero no podemos hacer eso
tenemos que darle un background si le
damos un background negro si se fijan va
a tener el fondo negro Entonces tenemos
que darle el mismo color que tenemos acá
por eso el color que le vamos a dar va a
ser este así que lo copiamos lo pegamos
y ahí está y si le podemos dar un
padding por ejemplo de 10 píxeles y ahí
tenemos las opciones más separadas No le
podemos dar un margin de 10 píxeles y
tenemos las opciones más separadas
tampoco por qué Porque los navegadores
por defecto vienen configurados para
bueno no eh retocar mucho esto guw Me
falta una cosita importante que es el
Label voy a copiar esto pegar el Select
acá porque me olvidé el Label Y cerrar
el Label Ahí está y acá el Label va a
tener tipo de usuario por ejemplo Esto
va a ser tipo de usuario y acá la opción
uno va a ser por ejemplo seguidor
empresa otros de esta forma el mensaje
te lo puede dejar un seguidor vamos a
poner seguidor barra a empresa otro un
seguidor seg or una empresa u otros
entonces de esta forma yo lo puedo
seleccionar y no no se puede dar ni
padding ni margin para eso tenemos que
utilizar una librería de javascript que
reemplazan el option o el Select por una
estructura html más personalizable pero
directamente yo normalmente ni lo dejo
porque no se suele hacer se personaliza
el Select y el option recibe color y
background es decir podemos cambiar el
color y podemos cambiar el background en
este caso el color viene el color que
tienen los padres que en este caso es
este que está acá Así que no hace falta
ni que lo retoques pero el background sí
porque por defecto esto ya viene con un
background y no puede ser transparente
entonces nada básicamente nos lo metió
por el y después tenemos otra opción es
decir en vez del Select podemos hacer
voy a copiar voy a hacer otro más otro d
voy a poner un comentario para
separarlos acá voy a poner Select y
option ahí está acá abajo voy a poner
text área acá voy a poner datalist Y
option entonces ahí tengo separado todo
simple inputs Entonces esta forma Acá
tengo los simple inputs y ahí está acá
tengo los simple inputs Acá tengo el
Select y el option Acá tengo el talist y
el option y acá tengo el textarea esto
es hermoso para usar el datalist Okay
tenemos que reemplazar el Select por
datalist en este caso le vamos a poner
un list acá sería por ejemplo list igual
referente por ejemplo referente
significa la persona que te refirió acá
tenemos los options Pero tiene que haber
un input la diferencia es que acá sí
debe haber un input con el ID referente
Pero esto es al revés el ID lo debe
tener el datalist y el list lo debe
tener el input es bastante raro esto
pero así es acá ponemos name por ejemplo
nombre name referente esto es
innecesario pero básicamente lo que
estamos haciendo con esto es tipo
usuario no vamos a poner referente el
referente es la persona que hizo que
conozcas la página quién te refirió
Bueno me refirió por ejemplo soy dalto
una empresa un amigo una cosa
interesante es que normalmente No
necesitamos cerrar los options Es raro
pero sí No necesitamos cerrar los
options acá no lo podemos notar porque
tengo el linked editing activado si yo
borro esto se me borra todo completo
Entonces lo borro de esta forma si
quiero hacer Que se borre esto html le
dice a los navegadores básicamente que
cuando la etiqueta option no se cierra
la puede cerrar el navegador
automáticamente si yo por ejemplo vengo
acá y le doy en inspeccionar ven acá
tenemos el Select y adentro los options
están cerrados O sea no es que el option
no se cierra el option sí se cierra solo
que si nosotros no lo cerramos lo cierra
el navegador cuál es el problema de esto
nada si si hacemos páginas web normales
las personas que tengan navegadores
antiguos no lo van a poder ver entonces
por eso es mejor intentar hacer cosas
que los navegadores antiguos sí soportan
como por ejemplo cerrar el option yo por
ahora lo voy a seguir cerrando y ahora
fíjense les quiero mostrar como funciona
el referente Yo acá arriba tengo el
Select y el option y acá abajo tengo el
datalist y el option si yo por ejemplo
acá escribo algo fíjense que acá me
salta user 1 es el valor en este caso
sería soy dalto user 2 es el valor en
este caso sería una empresa y user 3 es
el valor en este caso sería un amigo yo
acá por ejemplo estoy escribiendo algo
ven soy y acá ya me salta esta opción
para poder escribirla Entonces yo la
próxima vez no voy a tener que andar
escribiendo mucho Quién te refirió y me
refirió ah soy alto le doy acá y se pone
user 1 en este caso lo podemos hacer al
revés podemos ahorrarnos el valor ven
ahorramos el value Y si nos ahorramos el
value visualmente este campo de input se
va a autocompletar con esto Entonces
cuando nosotros mandamos este formulario
este value el value de este input
automáticamente se va a convertir en el
contenido del option ahora si ustedes no
les interesa esta forma lo pueden poner
al revés en vez de escribir el contenido
en option lo hacen así escriben el
contenido ahí adentro entonces en vez de
tenerlo como contenido lo tienen como
valor del atributo value entonces acá
escriben algo Ven y lo tienen acá pero
estas son las opciones que nosotros
definimos Entonces buscamos soy de alto
y aparece acá No necesitamos ponerlo
como opción sino que lo escribimos como
value no está mal cualquiera de las dos
es válidas pero lo pueden usar como
descripción acá por ejemplo tienen soy
alto y ponen un creador de contenido
ustedes tienen acá y acá dice referente
soy de alto y acá abajo aparece más
chiquitito ven un creador de contenido
Entonces es como la descripción que
ustedes le dan a esta opción pero lo que
se va a enviar al servidor es soy alto
no se va a enviar contenido eso es lo
que lo vuelve mejor es decir esta es una
mejor opción por eso porque lo que se
envía al servidor va a ser esto porque
es lo que se va a poner en el campo Al
fin y al cabo Y esta es como una mini
descripción para que el usuario entienda
porque por ahí es soy de alto referente
un creador de contenido Quién era soy
alto un creador de contenido Ah okay No
me acordaba el nombre de dalto pero me
acordaba que era un creador de contenido
Entonces ahora entiendo que era él
Entonces le doy ahí y ya está Así que
nada Así es como se usaría los datalist
y option y Select y option Select es
como un menú que se despliega para que
elijamos una de las opciones y eh en los
datalist son como un punto medio entre
un Select y un input Serían como un 75
por input y 25% Select más o menos pero
generan este efecto de darnos varias
opciones en una empresa voy a poner una
empresa del rubro it un amigo me
recomendó un amigo Ahora sí listo
entonces ahí tenemos varias opciones ven
un creador de contenido una empresa un
amigo me recomenda un amigo le damos acá
y se pone Esto entonces Esta es la
opción de datalist y option y ahora nos
falta ver el último de todos los últimos
dos en realidad que serían fiel setet y
Legend que son dos que están muy buenos
es interesante que los veamos y los
vamos a agregar Por qué no a esta a este
formulario lindo que estamos Armando así
que bueno y después cuando lo terminemos
le vamos a agregar un botoncito así que
bueno vamos a ver fiel setet y eh
Legend Bueno ahora lo que vamos a hacer
es ver dataset No qué estoy diciendo
alto comportate no que me quedé pensando
porque estaba acá leyendo los
comentarios de mis videos de la nada
Cuando veo este comentario que el tipo
me dice alto cuándo te lanzas al standup
sos un máquina del Sarcasmo y tienes
buenos remates Dale animate Entonces yo
agarro me quedé pensando viste digo el
tipo está viendo un curso de python me
imagino que entró para ver el curso de
python porque el tipo le interesa la
informática o el análisis de datos pero
no no el tipo eso le chupaba
completamente un huevo qué me importa el
bleet Wild deja de hablar de eso cuando
te lanzas ha ser estándar dalto yo
pensando que hay elementos madre es
buenísima buenísima No veo la hora gente
de que lleguemos al millón cuando
ustedes estén viendo este curso y
todavía no llegué al humilde millón de
Seguidores Dame una manito si lo que
viste hasta ahora en el curso sabes que
te sirvió ahora estoy haciendo un curso
por mes o sea que cursos como este que
estás viendo Ahora vas a tener un montón
de cursos así y todo gratis no te cobro
un peso estos cursos los cobran como
20000 yo no te cobro 00 te cobro cero
solamente un lcito un comentario lindo y
una suscripción entonces tírate un sub
Dame una manito pedazo de drogad bueno
ahora lo que vamos a ver va a ser fset y
el Legend el elemento fset y su
compañero Legend básicamente se usan
para agrupar y etiquetar lo que viene
siendo como los elementos dentro de un
formulario no por ejemplo tenemos un
grupo de elementos que piden datos de
contacto los etiquetamos con un fel
setet y un Legend tenemos un conjunto de
elementos que te piden información sobre
no sé métodos de pago los etiquetamos
también es más que nada para tener todo
más estructurado bueno acá tenemos el
formulario que veníamos trabajando este
tiempito vamos a abrir el estilo Acá
está sacar esto y tenemos lo que hicimos
recién no lo que venimos haciendo desde
que arrancamos a ver el textarea esto es
como un ejercicio progresivo porque
vamos enseñándolo a medida que vamos
progresando por eso la persona que
solamente entró a este video a este
curso entero para ver fiel set se va a
tener que morfar desde el apartado de
textar perdóname No mentira Si estás
entrando este video solamente para ver
este apartado des preocupate lo vas a
entender igual pero si queres ver el
resto bienvenido seas bueno en fin acá
lo que vamos a hacer va a ser encasillar
todos estos elementos en un fiel set
vamos primero a hacer un ejercicio muy
básico y muy simple vamos a crear un New
file vamos a crear la estructura básica
html 2.5 y ya ahora sí podemos dejar
todo y esto Es hermoso porque ya no
tenemos que cambiar nada porque
entendemos Todo minimizamos esto le
damos Tab Tab y acá escribimos fset y
Legend simple para que se entienda que
es simple y acá vamos a correr Esto
bueno si yo por ejemplo vamos a
redondearlo si yo tengo un input Okay
text no play holder nombre Esto me va a
pedir el nombre Esto me va a pedir el
apellido Esto me va a pedir mi edad por
ejemplo Esto va a ser un input type
number no sé por qué no expliqué los
input tye number no lo puedo creer
todavía básicamente el input tye number
lo que hace es esto ven nos permite
tener esto y si escribimos algo nos va a
dejar escribir solo números o la letra e
para que lo tengan en cuenta a esto le
voy a dar el link fieldset css esto
Vamos a darle en file save as fieldset
css y ahí parece que lo tenemos todo
super estilizado pero tranquilos que
vamos a borrar bastantes cositas vamos a
borrar todo esto que no lo necesitamos
los form input lo vamos a borrar el h2
también en este caso no tenemos un form
deberíamos crear un form no me di cuenta
ya me fui demasiado básico y pegarlo acá
dentro Ahora sí ahí entamos un poco y
vamos a darle al form Bueno ya le
habíamos dado un padding pero el padding
Ahora va a ser de 20 píxeles a todos los
lados Ahora sí y a esto le vamos a dar
en general un margin seis píxeles para
que todos los elementos se separen entre
sí y solamente hacia arriba y hacia
abajo porque hacia los costados no van a
tener margen cómo hacemos para utilizar
fieldset y Legend acá Bueno básicamente
para utilizarlo lo que hacemos Es
encasillar o agrupar por tipo de dato
que se pide Yo acá por ejemplo voy a
crear otro tipo de dato que va a ser
email acá me va a pedir el email y le
voy a pedir por ejemplo el número
teléfono entonces por eso va a ser un
número c si se fijan bueno tiene que
estar en mayúscula y en mayúscula si se
fijan le estamos pidiendo tipos de datos
diferentes acá estamos pidiendo
información básica y acá de contacto
Cómo podemos hacer para separar esto los
enc casill los etiquetamos dentro de un
Field set esto que está acá lo metemos
acá y elegimos donde termina y lo
cerramos entamos bien actualizamos y se
acaban de encerrar en un cuadrado se
encerraron en un cuadrado Pero eso no es
todo si yo acá escribo Legend okay Y
escribo un texto por ejemplo información
básica y actualizo miren lo que acaba de
pasar acabo como de seccionar Dentro de
este cuadradito voy a hacer lo mismo acá
abajo y voy a poner un fi setet y acá
voy a también encerrarlo voy a de vuelta
identar esto y acá voy a poner otro
Legend información de contacto Ahí está
y vamos a los fs separado los entre sí
vamos a cada fiel set set Vamos a darle
un margin 10 píxeles y cero píxeles a
los costados y ahí se separan entre sí
esto el problema de esto es que no se
separan tanto por eso lo que voy a hacer
yo es darles 20 píxeles a los fset y a
los forms en vez de darle tanto le voy a
dar al campo form arriba y abajo un
padding de solo 10 píxeles para que que
se equilibre un poquito y ahí está lo
que también puedo hacer es darle un
borde al fiels yo le puedo cambiar este
borde todo feo que trae por defecto ven
que es medo feo se lo puedo pued cambiar
y por ejemplo le puedo dar un Border dos
pixeles solid y le puedo dar un borde
por ejemplo 666 Ahí está que es el mismo
del color de este y ahí está separado
ven el tema es que esto nos crea como
muchas líneas no les parece Para eso
para que no no sentamos una diferencia
visual tan fuerte lo podemos poner o
todo blanco ven como lo tenemos acá
separado o podemos hacer que el borde
sea de un píxel Ahí está ven Ah lo
tenemos bien separado esto también
podemos hacer que sea más suave por
ejemplo acá le vamos a dar un nueve y
medo que pierde opacidad le voy a dar un
un seis para que quede mejor y ahí a mi
forma de ver queda mucho mejor así como
lo tenemos ahora y después al Legend le
vamos a dar un padding de cero píxeles
arriba y abajo pero si le vamos a dar
cinco píxeles a los costados para que se
separe un poquito de la línea esta yo
por ejemplo le doy 50 píxeles acá se
separa bastante de la línea yo no quiero
eso tampoco quiero 10 píxeles con seis
píxeles estoy conforme y ahí para mí
está perfecto Así que ahí me gusta de
hecho fíjense qu interesante si yo a
esto le pongo un Border de un Pixel
solid igual que al anterior fíjense que
es como se es como que se encierra todo
acá es más acá le puedo dar un
background del mismo color d d de seis y
le puedo dar un color 2 22 que es el
color de fondo Y fíjense qué efecto más
extraño que sucede no Aunque bueno en
este caso el borde fíjense que nos queda
más clarito con esto ahí entonces
deberíamos darle un color más fijo pero
bueno nada se entiende el punto creo así
particularmente a mí no me gusta Así que
no lo voy a dejar así yo lo que voy a
hacer es sacarle todo específicamente a
mí lo que me gusta es sacar todo
quedaría sin el borde también ahí está
pero si le daría al Field setet un borde
radius de seis píxeles y ahí se me
redondea ven el fi setet no de cinco lo
mismo que el input Ahí está entonces de
esta forma es como que podemos seccionar
esto y para qué les dije que lo hagamos
en un en esto aparte simple porque ahora
vamos a volver al original es decir al
que veníamos trabajando durante lo que
va del curso y vamos a intentar aplicar
lo que aprendimos a los Field set además
de crear los ejercicios de recién vamos
además a trabajar los fieldset y vamos a
intentar agregárselo acá a ver cómo nos
sale a ver a ver qué tal nos va Vamos a
encasillar todo esto en información
básica esto también lo vamos a hacer un
poquito más chiquito perdón pero vamos a
tener que empezar a chicar esto ya voy a
seleccionar todos estos que están acá
sin contar el Select el Select no es
necesario y agrandamos un poquito ahí
está para ahora poder venir acá y poner
un Field set y cerrarlo acá abajo y ahí
nos queda bien entado acá vamos a poner
un Legend Ahí está esto que está acá lo
voy a correr ahí actualicé y me queda
esto que a mí particularmente no me
estaría gustando mucho así que ahora
vamos a ver cómo lo ajustamos y al
Legend le voy a poner información básica
ahí tenemos esto que está acá repito
esto no me gusta mucho así que yo lo voy
a retocar un poco para eso voy a venir
acá al Field setet y vamos a darle un
borde radius de 5 píxeles para arrancar
Border un pixxel solid y el borde si lo
vamos a dejar como antes de 666 creo que
el mismo color Ahí está y vamos a hacer
que el Legend tenga padding de cero
arriba y abajo y seis a los costados y
fíjense ahora bastante curioso es como
que hay una distancia bastante grande
entre estos bordes a mí la verdad que no
me interesa Así que lo que voy a hacer
es a esto le voy a dar un padding cero y
vamos a pensar que lo podría llegar a
adaptar sí lo adapta el problema de esto
es que vamos a tener que separarlo ahora
para eso vamos a venir acá y vamos a
darle un margin 20 píxeles entonces lo
que yo sí voy a dejar es el padding
arriba y abajo entonces dejaría arriba
cero píxeles a los costados a la derecha
20 píxeles abajo 20 píxeles y a la
izquierda 20 píxeles y de esta forma
tenemos exactamente lo que queríamos
Ahora sí es más también podríamos llegar
a encasillar esto pero no vamos a
agregar otro campo más para que parezca
un poquito más rellenito el formulario
asunto ahí está text el asunto de tu
mensaje esta es la información básica el
nombre de la persona el mail de la
persona y lo que quiere enviar y acá ya
pasamos a la siguiente sección lo único
que el padding que tiene a los costados
Me parece muy fuerte así que en vez de
darle de 20 le voy a dar de 10 pero voy
a darle también 10 píxeles arriba y
abajo por qué no Aunque 10 me sigue
pareciendo bastante No podíamos darle
ocho y a los costados darle seis e ahí
me gusta más acá lo tenemos Entonces lo
único a información básica por ahí sí
podría ser que sea un poquito más oculto
para que no esté tan fuerte Así que al
Legend le pondría le podría dar un color
666 por ejemplo así no me queda tan
invasivo 777 ahí no me dig gusta la
información básica se resalta que es
información básica se entiende y se lee
y ya le dimos un buen uso y fíjense en
pantalla completa Cómo nos quedó este
formulario muy lindo abajo termina ahí
pero también le podemos dar un margen
abajo vamos a hacer que el formulario
abajo tenga un margin bottom de otros 50
píxeles así por lo menos podemos ver un
poquito cómo termina no 40 por lo menos
40 Está bien est es el formulario
completo que acabamos de desarrollar
fíjense hasta ahora a dónde llegamos y
todavía de curso fíjense si ustedes ya
este curso lo están viendo en YouTube
fíjense todavía Cuántas horas nos quedan
esto lo hicimos sin ver lo más
importante todavía que es grid y flexbox
grid y flexbox son las dos cosas que nos
van a permitir hacer todos los diseños
que hoy conocemos en la web los mejores
diseños que existen los hacemos con grid
y con flexbox y aún así logramos hacer
esto O sea imagínense lo que vamos a
hacer cuando conozcamos muchas mejores
propiedades de css cuando aprendamos a
desarrollar elementos en serio y cuando
hagamos proyectos Estos son solamente
mini cosas prácticas que estamos
haciendo en la idea de querer aprender
más pero imagínense cuando aprendamos en
serio o cuando nos pongamos el objetivo
de hacer un buen proyecto esto se va a
descontrolar encima se adapta diferentes
resoluciones Así se ve el formulario que
acabamos de desarrollar en un iPhone Pro
Max O sea si ustedes desarrollan esto lo
suben por ejemplo a un a un alojamiento
web y lo intentan acceder con su celular
Así se ve lo ven con una tablet se va a
ver más o menos así lo ven con una
computadora y se va a ver así es más voy
a agarrar el fondo y miren lo que voy a
hacer par que el background de Body sea
un linear gradient va a arrancar con
esto y va a terminar con esto tu bottom
pero no es background color es
background si no no nos funciona ahí
quedó fíjense lo que acabo de hacer esto
es interesante no se nota mucho Voy a
darle en 333 para que se aprecie mejor y
acá tenemos un hermoso formulario
muchachos los felicito si llegaron hasta
acá ahora vamos a aprender a crear otro
elemento muy importante de ahora sí ya
vamos basta de Los formularios basta de
hacer elementos para un formulario basta
de campos de texto basta de valores
basta vamos a hacer otra cosa por favor
Bueno sí vamos a hacer otra cosa vamos a
ver cómo funciona details y summary Okay
que son dos eh etiquetas que nos sirven
para crear justamente secciones de Fack
Es decir de de preguntas frecuentes o
menús desplegables que sean útiles si
ustedes buscan soy alto en Google ven
les va a preguntar esto si buscan Quién
es soy de alto va a saltar esto en el
canal de YouTube dedicado a enseñar
programación de mayor audiencia de la
Argentina a la y este efectio que
hace Google acá ven que podemos deslizar
esto y se abre y se cierra Ahora html
tiene personalizada una opción para
hacerlo automáticamente entonces este
efecto lo vamos a poder hacer sin lío y
sin javascript así que bueno vamos a ver
cómo es esto de details y sumary porque
nos van a permitir hacer bastantes cosas
así que
vamos Bueno ahora vamos a ver todo sobre
details y summary summary se per no
summary summary summary summary details
and summary details y summary bueno
básicamente los elementos details and
summary en html proporcionan una
funcionalidad nativa para poder crear
esta este menú desplegable no es un menú
desplegable si es un contenido
desplegable bueno acá tenemos la
estructura con el título de Tails and
summary y está enlazado al estilo acá
tenemos el estilo cerramos hacemos un
pequeño su y arrancamos básicamente
funciona así details y acá el summary
summary es el el lo que se va a ver por
ejemplo a tu mamá le encanta y ahí
tenemos a tu mamá le encanta qué le
encanta a tu mamá Bueno vamos a
definirlo le encanta ver videos de dalto
eh qué pensaste mal pensado Cuando
hacemos esto se nos despliega el menú
parece una boludez pero es interesante
porque básicamente podemos venir acá y
poner un h2 por ejemplo o podemos por
ejemplo hacer una lista desordenada y
acá es que tengo que traer supónganse
que están haciendo una lista para
decirle a la gente Che gente qué tengo
que traer al evento y le vamos a decir
bueno tenés que traer tu laptop y ganas
de codear por ejemplo entonces venimos
acá tu laptop y ganas de codear ahora
también le podemos dar estilo a esto es
decir podemos agarrar el details y darle
un background por ejemplo no sé no un
Gris para ver Cómo afecta Entonces ven
como que se va agrandando también
podemos agarrar el summary y a esto
modificarlo por ejemplo le podemos dar
un background Blue solamente ven lo que
se pone azul es esto entonces solamente
que sepan que lo pueden modificar no voy
a explicarles mucho más pero está bueno
por ejemplo para hacer un efecto que
ahora vamos a ver esto no lo hagan pero
como les estoyo este elemento lo tengo
que explicar supónganse que a este le
vamos a dar vamos a hacer que el body
tenga un fondo negro no de vuelta Body
el B con color va a ser este el color de
la página va a ser ddd de vuelta acá
tenemos Y esto no va a ser Azul va a ser
transparent de vuelta transparent Esto
va a ser transparent ambas van a ser
transparent Ahí está y el details va a
tener un bord un Pixel solid por ejemplo
del mismo color que tiene del coso ahí
le damos un padding de por ejemplo nu
píxeles y ahí se nos pone Esto entonces
ahí se despliega completo esto es más
incluso podemos acá hacer que esto tenga
un Border bottom de un Pixel solid ddd
por ejemplo ven Entonces tenemos este
esta especie de subrayado a mí no me
gusta esto porque implica separarlo del
resto y para eso Debería ser algo así el
padding se lo debería dar acá entonces
ahí es como que ven se crea este efecto
extraño pero voy a decir Che alto la
verdad que no me gusta esto Bueno si
quieren darle un estilo diferente por
ejemplo que cuando esté cerrado no tenga
Border bottom por ejemplo acá si le
damos en Border bottom n me desaparece
pero cuando yo le doy clic acá se va el
de abajo también entonces cómo puedo
hacer por ejemplo para que cuando esté
abierto tenga el borde de abajo y cuando
esté cerrado No lo tenga bueno para eso
trabajamos con details ponemos así y le
damos en Open Esta es una forma de
seleccionar cuando está abierto después
vamos a ver esta forma de seleccionar
pero no se apresur y acá vamos a
aplicarle esto Entonces cuando se abre
ven tiene el borde de abajo es más
podemos hacer otra cosa que por ejemplo
el details cuando se abra tenga No lo sé
un background un poquito más claro 5 55
por ejemplo Entonces cuando está cerrado
tiene este color cuando está abierto
tiene este color vamos a hacerlo un poco
más suave y funciona así Es más podemos
hacer otra cosa que en vez del
background a mí lo que me gusta hacer es
hacer que tenga un font weight de eh Por
ejemplo Vamos a darle un bt Entonces
cuando está abierto se se pone la letra
negrita le vamos a dar al Body un font
family San serif y ahí está ven está
cerrado Se queda así está abierto se
pone en negrita pero no me gusta porque
esto también termina afectando al
contenido que está dentro entonces la
forma en la que puedo hacerlo es agarro
el ul Y le doy el font weight de 100
Entonces de esa forma solamente es como
que se pone en weight la tipografía de
arriba Ven y esto lo de abajo no en fin
Es solamente una forma de hacer esto
Esto es muy útil por ejemplo para hacer
una sección de Fack Es decir de
preguntas frecuentes Ah para mostrar
ocultar información adicional también
está bastante bueno Esto no lo hagan
esto puntualmente porque todavía no lo
vimos Así que como no lo vimos no lo
pueden hacer pero sepan que se puede dar
estilos a cada estado por ejemplo vamos
a sacarle ahora el borde Ahí está y
vamos a darle directamente el borde al
details y listo Ahora sí pero
básicamente tengan en cuenta que esto
funciona de una forma en la que ccs me
refiero a ccs en la que nosotros podemos
darle estilo dependiendo del estado Por
ejemplo si un elemento está clique que
tenga un estilo si pasamos por el Mouse
encima de un elemento que tenga otro
estilo todas esas cosas las podemos
hacer con cc Así que tranquilos porque
ya vamos a llegar a eso a las
transiciones a las animaciones a los
efectos Hay un montón de cosas que son
importantes que ya lo vamos a hacer y no
todo se hace con javascript casi todo lo
más simple y lo más normal se suele
hacer con css Así que vamos a verlo pero
este que está acá es un buen efecto por
ejemplo creamos otro details Ven y ahí
tenemos otro más tengo que ser mayor de
edad le respondemos con un párrafo por
ejemplo sí de debés ser mayor de edad o
de loco contrario estar acompañado por
un adulto entonces ahí ves tengo el
primero tengo el segundo le puedo dar un
padding por ejemplo puedo darle Ahora sí
el padding se lo debería dar a el
details en realidad no al summary y
ahora sí ves y por ejemplo al contenido
de details le puedo dar un font size de
0.8 em más chiquito y al summary le
puedo dar un font size un em Entonces
entonces me queda como un texto un
poquito más grande le voy dar 0.7 Ahí
está y le voy a dar en color ccc pero el
summary el color va a ser claro e eh eh
Y las respuestas sí van a ser un poquito
más claritas Entonces es como que
tenemos el contenido y de otro color
esto también podríamos darle estilo al l
le podemos dar podemos hacer de todo
realmente créanme que podemos hacer de
todo simplemente es eso es como un menú
desplegable o es es una opción que nos
permite desplegar un contenido que se
nos de la gana acá podemos poner lo que
querramos así que bueno Ya más o menos
entendieron cómo funciona details y
summary así que ahora vamos a ir a la
siguiente sección para que aprendamos un
po un poquito más de cosas de los
enlaces porque hay cosas que ya que
estamos en esta instancia es posible que
ustedes ya arranquen a hacer páginas web
estáticas porque es mi consejo de hecho
el que les di que arranquen a hacer webs
para que las tengan de práctica para que
las puedan usar para para ustedes mismos
y para practicar porque el diseño
créanme que es algo que al principio no
lo captas tenés que hacer muchos diseños
para hacer cosas más lindas después si
no es complicado diseñar bien en la
primera tenés que hacer bastantes cosas
Pero aún así como van a hac estos
proyectos y van a hacer estas cosas
seguramente algo quieran subir a
internet si algo lo van a querer subir a
internet vamos a necesitar saber varias
cosas más de los enlaces podemos hacer
que un enlace te mande a diferentes
secciones de nuestra misma página
podemos hacer que un enlace al cliquear
lo se nos descargue un archivo podemos
hacer que un enlace nos abra una pestaña
para mandar un mail podemos hacer que un
enlace nos llame a un número podemos
hacer un montón de cosas hay un apartado
de seguridad y rendimiento que también
está bueno que conozcamos y privacidad
los enasis tienen como bastantes cosas
por detrás que no explique porque
estábamos en una sección básica pero
ahora que tenemos que ir a una sección
un poquito más intermedio avanzada Está
bueno que lo expliquemos Así que vamos a
ver un par de cositas que no sabíamos de
los enlaces así que Bueno vamos a
conocer estas
propiedades Bueno ahora lo que vamos a
hacer es ver un poquito más sobre enlce
porque vimos lo básico en la sección de
enlaces que vimos al principio del curso
Pero como estamos un poquito más
avanzados creo que llegó el momento
vamos a agarar el ejercicio que teníamos
antes ustedes Igualmente ya saben que
incluso si no tienen hecho este
ejercicio lo pueden hacer desde cero es
irrelevante Yo lo único que voy a hacer
va a ser esto que dice términos y
condiciones envolverlo en un enlace Ah
Ahí está para que podamos trabajarlo si
se fijan acá me debería estar
apareciendo ya para enlazar como no me
aparece le voy a dar en href y ahora sí
me salta esto que está acá yo voy a
venir a trabajar con los enlaces voy a
venir y poner a y ahora le voy a dar un
color 48 e Vamos a darle
69f que me gusta más para los fondos
claros Ahí está mucho mejor Incluso si
hacemos text decoration n creo que sí
queda bien Podemos darle click y se nota
que es un enlace es un Label pero aún
así se nota que es el tema de aceptar
los términos y condiciones hasta acá ya
lo sabemos voy a crear un terms html y
acá vamos a crear una nueva página New
file vamos a guardar como terms html
como ya sabíamos gename unos términos y
condiciones para una página web de venta
de frutas que vende frutas por internet
y no recopila ningún dato esto es
innecesario es un paso que estoy
haciendo yo solamente para para poder
tener un término Sin condiciones Nada
más dame el código html así copio y pego
revago El dalto dale más rápido dale Lo
bueno es que ahora ustedes pueden
entender todo fíjense lo que está
haciendo Acá está usando estilos en
línea dándole estilo al Body al
container al h1 lo entienden esto que
está haciendo lo entienden todo
perfectamente todo lo que hace este
código lo entienden eso es buenísimo que
espectacular que lo entiendan todo le
vamos a dar en copy code lo pegamos acá
y vamos a poner control h y vamos a
reemplazar nombre de lapra vamos a
reemplazar por tu madre damos acá que
reemplaza todos guardamos y ahora esto
nos debería llevar acá si le damos clic
acá nos lleva acá perfecto a tu madre
nos lleva buenísimo es más lo vamos a
abrir en un Target blanco hasta acá está
todo bien No voc chalto la verdad que
está fácil creaste un enlace se abre en
otra pestaña perfecto pero qué pasaría
si de repente el enlace que nosotros
tuviéramos que crear estamos creando un
enlace nuevo y el enlace que tenemos que
crear no está alojado en nuestra página
está alojado en otro lugar un enlace que
está alojado en otro lugar Qué pasa
bueno tenemos varios problemas ahí pero
ya vamos a llegar a eso vamos a arrancar
con el uso de ids Okay vamos a crear
vamos a venir a terms a la página terms
que creamos Qué pasa si yo por ejemplo
Bueno vamos a abrirlo los términos y
condiciones así se nos carga Qué pasa si
yo por ejemplo quiero ir directamente a
la sección de introducción o servicios
ofrecidos etcétera fíjense que si yo por
ejemplo acá pongo una a un enlace vamos
a abrir una y yo acá por ejemplo pongo
ir a proceso de compra por ejemplo y yo
acá pongo un hashtag Cómo jor hago para
apretar acá y que automáticamente me
lleve al vamos a meter todo dentro del
container Cómo hago para apretar acá y
que automáticamente me lleve acá que
dice proceso de compra para eso acá al
proceso de compra tengo que darle el ID
proceso o bu process para que nos quede
claro Ah ver Va qué hago acá bueno acá
le pongo el signito hashtag igual que
como cuando en css seleccionamos un
elemento por ID el mismo signo la
almohadilla y pegamos el ID y fíjense
que si ahora le damos clic acá nos manda
acá nos manda el comienzo del elemento
proceso de compra si quisiéramos que por
ejemplo vaya a la al no sé a la política
de privacidad decimos Bueno voy a crear
otro enlace para ir a ir a política
política de priva
acá tenemos otro enlace vamos a
separarlo por divs cerrarlo y abrir un
di nuevo política de privacidad es más
acá no le voy a dar en ir a le voy a dar
en solo proceso de compra y acá le voy a
dar en política de privacidad Ahí está
mucho mejor pero en vez de We process
acá le voy a dar en privacy política de
privacidad acá le voy a dar en ID
privacy Ahí está entonces qué pasa Yo
apreto en proceso de compra y me lleva a
proceso de compra apreto en política
privacidad y me lleva a política de
privacidad eso es lo que hace justamente
esta forma de utilizar el href nos
permite decidir a Qué elemento vamos a
ir es decir es un enlace que en lugar de
ir a otra página o de cargar algo y
demás es un enlace que nos manda a otro
elemento ahora supónganse que ustedes
quieren descargar un archivo con todo
este texto no porque de repente les
pinta tener el archivo descargado cómo
lo pueden descargar vamos a crear un
enlace vamos a poner un enlace que el
enlace lo que va a permitirnos es
Descargar todo vamos a poner Descargar
términos y condiciones Ahí está estamos
descargando términos y condiciones Cómo
puedo hacer para que se lo descargue
bueno primero ponemos el archivo que
queremos descargar en este caso es terms
html este es el archivo que vamos a
descargar y le vamos a dar el atributo
que dice Download Entonces si le damos
clic acá tucon se nos acaba de Descargar
esto si entramos es el archivo de hecho
fíjense que es curioso Yo también puedo
descargar el estilos.css por ejemplo
styles.css vengo acá le doy en Descargar
y que se me descargó el estilos.css en
este caso yo lo que quiero es Descargar
el terms Descargar el términos y
condiciones cualquier usuario que quiera
descargarse esta página le dan Descargar
ahora Okay hasta acá está todo bien pero
qué pasa si nosotros por ejemplo
tuviéramos que mandar al usuario a una
página web que desconocemos por ejemplo
términos y condiciones generados en
bita.com por ejemplo qué sé yo Ahí está
y esto nos manda a la página
https.
bebita.net
de compra puedes venir acá queres venir
a la política de privacidad puedes venir
acá queres Descargar el términos y
condiciones ya está te lo acabas de
descargar ahora queres saber en dónde Se
generó Se generó en bita.com Entonces
ustedes dicen Che quiero ir a esta
página el problema de esto es que
ustedes van a querer que se abra en
Target Blank y acá empiezan los
problemas cuando nosotros abrimos un
elemento en Target Blank la página a la
que estamos yendo tiene la posibilidad
de acceder a nuestro window.to opener
que no no vo meter en muchos detalles
técnicos pero es básicamente un objeto
esa ventana que le va a permitir hacer
muchas cosas al usuario puede por
ejemplo redirigir la página original a
una página web por ejemplo por ejemplo
maliciosa sin permiso entonces vos por
ejemplo estás en Facebook si Facebook
Abre tu página en Target Blank vos
podrías redirigir a la persona a una
página que se parece a Facebook pero no
es Facebook con eso se puede hacer de
hecho muchas páginas no por hacen esto
Ahora van a asociar ustedes son unos
pajeros de ahora van a suar lo
que les digo ustedes abren una página
nopor si por ejemplo entran a un enlace
ese enlace se abre en otra pestaña y esa
publicidad que se abrió cuando vuelven a
la página original esa página original
cambió y se fue a otra página Por qué
hace eso bueno porque la la pestaña que
se abrió tuvo acceso a la a la
posibilidad de modificar lo que vos
estabas viendo y te mandó otra página
entonces vos estás viendo un video no
por se te Abre una pestañita que es
publicidad y como esa esa página no hizo
algo que te voy a enseñar a hacer ahora
la página que abrió pudo Acceder al
elemento window opener y modificó la
página Entonces te redirigió a otro
lugar y vos perdiste tu video y no lo
pudiste terminar de ver bueno eso te voy
a explicar cómo evitarlo para Eso Tienen
que poner acá el rel no opener esto que
están diciendo al coso es Che no
permitas que tenga acceso al objeto
windows.to opener no va a tener acceso a
este objeto entonces de esta forma no
puede redirigir a ningún lado si estamos
mostrando el usuario un video No por ese
video se va a reproducir y la página que
se abrió No nos lo va a poder cambiar
además esto indirectamente también
mejora el rendimiento porque cuando
usamos no opener la nueva página se abre
en separado Entonces hasta puede mejorar
el rendimiento y hasta podemos evitar
ataques de fishing con esto es excelente
Ahora hay una mejor que es no referer
que no referer básicamente es igual que
no opener pero no sol m no permite que
tenga acceso al elemento al objeto
Perdón Windows opener sino que hace que
tampoco tenga los encabezados O sea que
nunca van a saber de qué página vino Si
yo por ejemplo tengo mi página web Y le
doy clic a un enlace la página web a la
que acabo de llegar va a decir Ey Esta
esta este visitante vino de la página de
dalto Pero si yo uso esto no solamente
no va a ser como antes como como el No
opener porque no va a tener acceso a
modificar mi página sino que encima no
va a saber de dónde vino o sea es
buenísimo porque solamente con el no
opener no puede modificar noos ni
redireccionar noos a ninguna otra página
pero con el no referer no puede hacer
eso y tampoco puede saber de dónde
vengo si yo por ejemplo desde una
página voy a otra la página a la que fui
sabe de dónde vine sabe que vine de la
página de ad alto pero cuando yo pongo
esto ya no sabe de dónde estoy viniendo
hace que su visita sea anónima los datos
suyos los pueden tener igual pero lo que
no tienen es De dónde vinieron Eso está
bueno porque si ustedes por ejemplo no
sé tienen están haciendo una página para
hackers y están indexando una página que
es secreta es una página pirata y demás
ustedes no quieren que el dueño de esa
página eh de la Deep web por ejemplo
sepa que los usuarios vienen de su
página web porque les pueden hacer cosas
a ustedes Entonces ustedes ponen esta
propiedad y ya no saben de dónde salió
el usuario simplemente apareció a esto
evita justamente el robo de datos y un
par de cosas más y después tenemos el no
follow que el no follow básicamente le
dice al a los motores de búsqueda Ey
esta página no la sigas no la indexes
Por qué Porque justamente la web es un
conjunto de enlaces interconectados Eso
es todo entonces cuando por ejemplo
nosotros tenemos una página web
supónganse que Facebook tiene una página
web no O es más fácil yo dalto tengo una
página web tengo una red social para
programadores si uno de mis usuarios
pone un enlace y yo no pongo el no
follow Google va a decir Ey la página de
dalto está poniendo un enlace a una
página rara Por qué me está pidiendo a
mí a Google que indexe la página rara Es
raro entonces para nosotros desligar de
lo que hacen nuestros usuarios qué
hacemos le damos en no follow para
decirle a Google que esa página no
importa no sigas ni tampoco la indexes
porque no nos interesa que la indexes
entonces yo por ejemplo tengo en mi
Twitter este enlace que está acá si yo
por ejemplo le doy botón derecho
inspeccionar van a ver que esto es un
enlace a que tiene el no opener no
referer y no follow y primero no opener
para que la página a la que yo los mando
no tenga acceso al navegador porque esto
es fácil si Twitter no tuviera no opener
y no referer yo tranquilamente puedo
enlazar mi página Entonces por ejemplo
me creo soid alti.com y me lo pongo en
Twitter y cada persona que entra a soyd
alti.com desde Twitter puede hacer que
la gente que estaba en Twitter se vaya y
se sal de Twitter y se vaya a otro lugar
y lo puedo hackear desde ahí y de esta
forma no lo hago y no follow hace que
Twitter se desligue y no pierda
posicionamiento web cada vez con una
empresa conocida que tiene buen
posicionamiento en Google le da a otro
enlace una etiqueta follow O sea que no
tiene esto que está acá Google dice ey
Twitter está enlazando esta página
Entonces esta página es más fuerte la
vamos a posicionar mejor porque si una
empresa tan grande como Twitter La
enlaza bueno igual no es Twitter es x
Pero bueno si una empresa eh tan grande
como x enlaza esta página Entonces esta
página debe ser poderosa Así que la voy
a indexar pero Twitter no hace eso
porque si hiciera eso Google no le daría
ni pelota a las recomendaciones de
Twitter porque tiene 300,000 enlaces y
la mayoría son irrelevantes Entonces qué
hac Twitter para hacer que su seo sea
más poderoso y ponen no follow pero
básicamente es para que nosotros no
perdamos posicionamiento y para no darle
entidad a los enlaces que no sabemos de
qué son Cuando tenemos un sistema
de usuarios o demás siempre se suele
poner no follow y también no opener y no
referer para todos los enlaces no opener
y no referer sobre todo cuando le
estamos dando libre albedrío a nuestros
usuarios Así que nada eso para que para
que estén al tanto bueno y después hay
otras boludeces Como por ejemplo también
ustedes pueden venir acá y hacer que
también eh No sé voy a poner otro div y
voy a hacer mandar un mail entonces acá
ponen Mi mail ponen mail do.
soto@gmail.com por ejemplo entonces
mandar un mail se les va a abrir el
correo entonces Che quiero entrada con
outlock por ejemplo cran y ahí se les va
a abrir para que ustedes manden un
correo ahora yo no tengo la sesión
iniciada pero si la tuvieran iniciada
los mandaría a su cuenta para que
ustedes ya manden un correo Es más hasta
podemos poner un sub podemos hacer de
todo investiguen la que es bastante
interesante y Es más hasta podemos
también poner un teléfono por ejemplo
tel y vamos a poner ya está el famoso
escalerita de números actualizamos y
esto me va a mandar un número para qué
si ustedes ya están desde el celular y
le dan clic a este elemento en un
navegador web se les va a abrir para que
ustedes llamen a este número No no es lo
mejor que pueden hacer la verdad pero
nada también es una opción siempre no y
ahí me estaría quedando esta paginita de
enlaces avanzados Bueno como ya saben
esto que acabamos de ver es simplemente
un apartado cortito para darle más
seguridad a nuestra página para hacer
que se posicione mejor para que tenga
por qué no un poquito de de mejor
rendimiento y que sepamos una que otra
funcionalidad interesante de los enlaces
Ahora sí la sabemos podemos avanzar
porque no podemos decir que sabemos el
sistema el avanzado si no sabemos algo
tan básico como esto Así que ahora sí
podemos continuar con lo siguiente son
las tablas Sí vamos a ver lo que son las
tablas en html que ya no se usan para
casi nada de las cosas que antes se
usaban porque antes usaban tablas para
todo las páginas web completas armaban a
base de tablas hoy ya no solamente las
utilizamos para presentar datos
tabulares que son como datos bien
estructurados y demás Entonces vamos a
ver el uso de las tablas Cuál es el
único caso en el que todavía se sigue
utilizando Y cómo estructurar una buena
tabla que esté bien semánticamente y que
podamos aprovechar su funcionalidad
bueno No hablemos más vamos a
verlo bueno gente ahora vamos a ver
sobre tablas básicamente las tablas son
una forma de organizar datos en filas y
columnas es básicamente algo muy
parecido a la forma en la que trabajan
las hojas de cálculo por ejemplo de
Excel o de Word etcétera como dije antes
las tablas hace un tiempo atrás hace un
par de años décadas incluso las tablas
se utilizaban para todo estamos hablando
de estructurar las páginas web de
definir contenido de armar bloes todo lo
hacíamos con tablas hoy en día el único
motivo que tenemos para usar tablas es
principalmente Mostrar datos tabulares
donde básicamente cada celda forma parte
de una fila y de una columna y tenemos
la necesidad de hacer algo por ejemplo
tenemos un sistema de comisiones no
entonces acá por ejemplo tenemos una
tabla nivel comisión acá me acabo crear
una especie de tabla supónganse que
ustedes por ejemplo son empleados de una
empresa y la empresa le dice ey por cada
producto mío Que vendas además voy a
pagarte un salario fijo te voy a pagar
una comisión Por ejemplo si ustedes son
personas que venden muchísimo ustedes
pueden llevarse de como máximo 10 ventas
que hagan un 10% Y si consiguen las 10
se llevan además 5 de Premio extra por
ejemplo si sos VIP nivel 2 puedes vender
hasta 12 y de cada 12 Te llevas el 12
Por Y si logras vender las 12 te llevas
5 extra si sos VIP 3 puedes vender hasta
20 de nuestro producto te llevas un 15%
de cada venta y tenés premio de $0
cuando vendiste los 20 y en el último
VIP más alto este que está acá puedes
vender hasta 50 eh de nuestras unidades
de producto y en este vip en el VIP 4
puedes vender hasta 50 productos cada
uno te va a dar un 20% de comisión y el
premio cuando vendas todos es de $
Entonces estos son datos tabulares son
datos que están estructurados por filas
por columnas cada dato por ejemplo este
pertenece a una fila y a una columna es
decir vamos a verlo de otra forma a una
fila y a una columna se entiende así si
vamos por ejemplo con el otro dato con
este dato pertenece a la misma fila pero
a otro ra columna Entonces ese es el
objetivo no de de los datos tabulares
que tengan una interrelación entre sí
que hagan algo por ejemplo si están
haciendo una compra ustedes van a un
supermercado a comprar lo pueden
presentar con una tabla cada producto
compró y abajo de todo el resumen total
por ejemplo bueno acá tengo mi código
inicial lo que es mi estructura de mi
página enlazada al estilos pun css para
arrancar una tabla se define con la
etiqueta Table Esta es la etiqueta
semántica correcta para definir una
tabla no solamente semántica sino que
funcional yo pongo código actualizamos
vamos a ver que para parce que no
sucedió nada Es simplemente una etiqueta
de bloque más efectivamente pero la
magia viene acá Okay las tablas se
separan en podemos decir varias
etiquetas Pero tenemos tres que son las
más importantes por un lado tenemos TR
que básicamente TR arma una fila y TD
Define celdas para esas filas si yo por
ejemplo acá esto lo saco Okay y pongo
algo fíjense que esto se me pone así
pero si adentro pongo un TD y acá pongo
un dato por ejemplo dato uno esto que
está acá ya cuenta como tabla ahora
vamos a ver relájense voy a agregar por
ejemplo esto que está acá vamos a
presentarlo así como dato uno dato dos y
dato tres hasta acá está todo bien yo
esto que está acá lo voy a copiar y lo
voy a pegar y ahora tengo otra fila más
entonces este es el dato uno fila dos
Este es el dato de la fila dos en dato
uno de la fila dos Este es el dato de la
fila dos y también es el dato de la fila
dos este que está acá es el de la fila
uno fila uno fila uno y ahí tenemos esto
que está así no parece muy loco vamos a
sacarle el fila porque no nos gusta
mucho có queda pero aunque no lo crean
Te estamos creando una tabla Cómo puedo
yo notar esta tabla bueno tenemos
principalmente una propiedad acá que la
vamos a modificar con Styles que va a
ser el borde vamos a agarrar a TD y a TD
le vamos a dar un Border un Pixel solid
negro vamos a dar un borde negro y ahí
ya podemos observar como la Data la
tabla ya va tomando forma entonces lo
que vamos a hacer ahora va a ser darle
al Table un wid 100% Y ahí se va adaptar
al ancho Total fíjense qué interesante
esto que tenemos por un lado las filas
que las filas están recostadas las Fil
siempre se midan de forma acostada es
como los datos acostados y las columnas
que son los datos así como a lo a lo
alto las filas son básicamente el eje de
x o en horizontal y las columnas son
sobre el eje i o en vertical no para
crear filas lo hacemos con TR como ya
vimos antes pero acá esto es interesante
porque TR viene de table Row es decir la
t viene de table y la r la r viene de
Row que significa fila entonces No
podemos crear columnas porque las
columnas básicamente las tenemos cuando
apil filas pero básicamente una columna
es la forma de leer datos de forma
vertical y la filas es de forma
horizontal O sea si tenemos muchas
columnas podemos crear filas o Podemos
tener muchas filas y se crean columnas
Esa es la magia no con TR estamos
diciéndole vas a crear una nueva fila la
fila va a tener tres datos Pero qué pasa
si por ejemplo en la fila de abajo
ponemos dos qué va a pasar y vamos a
perder el tercer dato Esta es la magia
de las filas acá podemos poner por
ejemplo cuatro datos Y ahora toda la
tabla entera se adapta para tener cuatro
datos podemos poner cinco datos toda la
tabla entera se adapta para tener cinco
datos en este caso vamos a dejarlo de
tres datos entonces acá por ejemplo lo
que vamos a tener es una tabla con los
datos de un usuario no que en realidad
después vamos a ver cómo trabajar bien
con esto porque No necesariamente usamos
las tablas para esto pero yo acá por
ejemplo puedo poner Lucas dalto y acá
puedo poner crack Entonces tengo el
nombre el apellido y un objetivo y así
lo vamos a hacer con todos Horacio
vergio injunable no sabemos Quién joraca
es elon Mask rico ent tenemos a Lucas
dalto un crack Horacio vergolio no
sabemos quién Concha es y elon Mask es
un hombre rico entonces esto que está
acá así como están son datos sueltos son
datos que no nos dicen nada Qué tenemos
que hacer Bueno ya sabemos que por un
lado tenemos filas esto que está acá la
TR crea filas Y estos los TD son cada
una de las celdas chiquititas estas ya
lo sabemos ahora También tenemos que
crear un encabezado es decir fíjense que
esto no tiene nombre es decir estas
estas tablas por defecto no tienen
ningún tipo de de Lucas Horacio yelo
estos Qué son nombres bueno Necesito
algo que me diga que son nombres esto
que son apellidos Qué joraca es son
apellidos bueno Necesito que me digan
que son apellidos esto que dice
injunable rico Qué es qué es su apodo su
Bueno es un adjetivo bueno que me diga
adjetivo para eso utilizamos un TR Okay
pero en lugar o sea vamos a crear otra
fila pero en lugar de usar TD usamos th
fíjense que si acá le cambio la H se me
cambia porque tenemos el link de editing
th y th y fíjense que lo que acaba de
pasar es que se nos
desenvolvió O sea ya no está envuelto en
los bordes que le habíamos dicho primero
y principal porque se lo estamos dando a
los TD nada más así que vamos a dárselo
también a los th Ahora sí va a estar
envuelto pero la diferencia es que ahora
sí se fijan esto por defecto trae un
textalign Center Entonces se centra
bueno Esto que está acá significa Table
cader en realidad Porque son encabezados
son los encabezados de una columna
entonces Acá tengo que poner nombre Acá
tengo que poner apellido y acá tengo que
poner adjetivo Yo sé que esto lo podría
hacer todo a base de TR y TD es más esto
que están viendo ahora lo puedo hacer
solamente con divs si quiero pued
agarrar divs y hacer esto con divs Pero
cuál es el objetivo de las tablas bueno
el objetivo de las tablas es poder
presentar datos tabulares como digo en
este caso no tenemos que usar esto no
tenemos que usar tablas para esto pero
podemos hacerlo como les dije antes por
ejemplo para mostrar No lo sé los gastos
que hicimos en algo por ejemplo entonces
acá por ejemplo ponemos producto costo
unidades por ejemplo no entonces acá
tenemos un producto cuánto cuesta y sus
unidades tenemos banana cuesta No sé 2
el kilo 3 el kilo no sé cuánto cuesta la
banana no tengo ni idea y 1 kg porque 1
kg cuesta 3 a esto también lo podemos
centrar Así que yo lo que voy a hacer va
a ser darle a todo un texta in Center
para que todo esté centrado después
Tenemos también la manzana que cuesta No
sé $ el kilogramo y después tenemos por
ejemplo el melón que cuesta $ la unidad
por ejemplo un melón cuesta esta
cantidad cuesta la unidad una unidad no
Entonces esto es una compra que hicimos
compro banana y le costó esto compro
manzana y le costó esto compro melón y
le costó Esto entonces de esta forma
estamos presentando correctamente una
tabla yo repito en vez de AC th podría
poner TD le doy a todas estas y a todas
estas le doy la clase vol por ejemplo y
vengo acá y pongo vol font weight vol y
ya está es exactamente lo mismo que
antes pero qué cambia bueno Esto no es
la forma correcta de hacerlo para eso
utilizamos th porque encima el navegador
entiende que estos son los encabezados y
nos ayuda a a tener mejor el seo es
decir nos va a posicionar mejor la
página porque cuando Google da nuest
otra página va a decir ah estos son los
encabezados Entonces no lo voy a tener
en cuenta como un dato más voy a
entender que todo lo que esté en esta
columna van a ser productos porque así
me lo dice el encabezado no voy a
considerar a productos simplemente como
un o un dato más de una tabla que no sé
qué joraca tiene No producto es un
encabezado de un conjunto de datos que
son banana manzana y melón esto que está
acá son costos TR dos y cuatro Entonces
eso es lo que nos permite hacer esto
ustedes tienen que hacerlo todo de forma
semántica como ya les expliqué antes
Bueno las secciones más que vamos a ver
un poquito más más adelante vamos a ver
bien cómo es esto de de la semántica y
Por qué es importante el uso y un poco
de accesibilidad web que creo que es
super importante pero que sepan de
entrada que cada etiqueta como dije
desde el momento uno tiene su uso
Entonces si hay una etiqueta que ya trae
esa funcionalidad lo podemos hacer De
hecho acá lo podemos ver la etiqueta th
representa un encabezado de una celda
encabezado en una tabla Eso es todo si
pasamos el mouse por encima de TD me va
a decir el elemento TD representa un una
una celda de dato o sea básicamente es
un dato una celda quees enta un dato
Mientras que el th es una celda que
representa un encabezado por eso es
importante pasamos por TR y acá dice TR
representa una fila de celdas en una
tabla esto es una celda de datos esto es
una celda de encabezados ent esto es una
fila justamente de encabezados Y esto es
una fila de datos y después por ejemplo
yo puedo venir acá abajo y Mostrar un
subtotal subtotal lo pongo con th porque
es un encabezado más y acá voy a poner
esto que está acá Igualmente esto se
trabaja de forma un poquito más compleja
pero no lo vamos a ver ahora su total n
vamos a poner total 3 + 2 + 4 es 9 y acá
lo vamos a sacar o se Acá está diciendo
que el total de todo es de nu acá le
podemos dar th porque es un encabezado y
el valor es este en este caso el
problema de esto es que esta celda que
está acá estaría ocupando justamente un
eh un solo campo y para que sea
semánticamente correcto debería ocupar
dos espacios para eso venimos abajo y le
damos acá span 2s para que ocupe dos y
en este caso ven ya tenemos que esto nos
refleja el total y el total es nu ahora
otra cosa que también tenemos que tener
en cuenta es que así como lo ven esto
podemos llegar a separarlo como una
página web vamos a checarlo un poquito
esto podemos llegar a separarlo por lo
que viene siendo el encabezado de una
tabla que sería t gead así como por
ejemplo el Head de una página web esto
puede tener un table Head que
básicamente el gas ira la parte en este
caso que Define Cuáles van a ser los
campos y después el T Body Okay que en
el T Body irían justamente todos los
datos Y acá metemos el T Body acá dentro
Ahí está y vamos a identar bien 1 2 3 4
y este que está acá un poquito para
atrás y esto que está acá sería el T fot
que es como el pie el pie de la tabla
que es como el resumen de lo que viene
siendo la tabla va acá dentro en el tf
map para abajo qué J que acabamos de
hacer simple en el jead esalto Pero por
qué te la rebusca tanto gente les juro
yo no soy no soy yo es html No me
pregunten Por qué html es así de
qué sé yo html para decirle al navegador
que está creando el encabe no el
encabezado la cabeza de una tabla que es
como normalmente cuando trabajamos en
python si ustedes vieron mi cursito de
python que está espectacular entenderán
a qué me refiero pero básicamente son
cuando llamamos a un archivo csb y demás
vieron que no le da importancia al
primer campo porque sabe que es el
encabezado bueno algo así solo que para
definirlo usamos esto para definir el
header de una columna Pero esto para
definir toda una sección entera que no
van a ser datos van a ser solamente el
nombre que se le va a dar a todo ese
conjunto de datos es como una forma de
darle más poder a esto después tenemos
el body que acá van estar todos los
datos O sea sí sí sí una columna va a
ser de producto otra de costo y una de
unidades y acá van a estar en el en el T
Body van a estar todos los productos
todos los costos y todas las unidades
separados por filas fila uno fila dos
fila tres entonces cuando venimos acá
por más que sea Exactamente lo mismo
ahora tenemos una estructura más legible
y esto es mucho mejor también porque a
nivel seo funciona mucho mejor a las
tablas normalmente les podemos dar de
estilo por ejemplo a los TD y los th por
ejemplo un padding de se seis píxeles
más o menos y ahí por lo menos tenemos
algo un poquito más lindo le vamos a dar
un font family sans serif me gusta
bastante el saneri para para enseñar yo
uso otro me gusta mucho Monserrat tengo
muchas varias tipografías la verdad que
a veces ni se me viene a la mente porque
cuando creo páginas web directamente
Busco yo en Google fonts alguna que sea
linda si va a ser un proyecto mío y y la
uso pero para enseñar me gusta mucho
esta porque siento que es super Clara
acá puedo observar sin problema esto y
de hecho acá por ejemplo a los TD les
voy a dar un color 666 Ahí está por qué
esto fácil porque de esta forma
represento los productos más oscuros y
los más claros si yo por ejemplo le
sacara esto ven que esto se vería como
muy fuerte en un negro muy fuerte si acá
le pongo esto voy a dejárselo en 444
porque por ahí es muy fuerte muy muy
suavecito es leve es un efecto mínimo eh
pero aún así Ahí está también podemos
darle por ejemplo a esto un bord radius
que va a ser un borde radius de 5
píxeles por ejemplo Pero esto a mí ya no
me me gusta porque le da un borde radius
a todo ni siquiera le daría un borde
radius de cuatro píxeles ni de dos no el
borde radius para esto no me gusta nada
lo que sí se puede hacer por ejemplo es
hacer que tengan un Border n Ahí va es
alto pero le acabas de dar un borde
Bueno pero este borde se lo vamos a dar
arriba Entonces ahí tenemos esto que
está acá y si quieren también se lo
pueden dar abajo esto ya a mí no me
gusta pero también se lo pueden dar
abajo y tienen esto que acaban de ver
acá prefiero solamente darle uno que
suele ser o el de arriba o solo el de
abajo para para hacer que se separen más
a los costados el efecto que podemos
venir acá y darle es directamente en
Table que es sell spacing pero se lo
vamos a dar al Table Entonces es Border
spacing y acá por ejemplo damos 10
píxeles entonces ahí las tablas se
separan entre sí O sea cada uno de los
campos estos ven que acá tenemos un
espacio un poquito más grande entre
estos y acá por ejemplo doy 20 píxeles
se separan más entre sí ven a mí me
gusta cuando trabajo con las
resoluciones nativas le suelo dar 12
píxeles Ven y más o menos queda así la
última no va a tener porque ya es una
completa Entonces nos queda estética y
qué s yo no sé está lindo también
podemos agarrar el Table y darle un
Border eh dos pixeles
solid negro a la tabla entera ustedes
por ejemplo agarran y le dan un wid no
sé un Max wid para que no se les de
resolucion mucho le dan 500 pixeles por
ejemplo entonces ahí ya les queda ahí le
dan un margin auto que ya sabemos que
nos encanta centrar con margin auto por
ahora y tenemos la tabla final así
entonces en este caso por ejemplo
deberíamos sacarle a este y a este la
columna de abajo no qué Dame medio rara
o qué hacemos se la sacamos Bueno lo
seleccionamos a estos puntualmente le
damos la clase total y a este le damos
la clase monto total y acá le damos por
ejemplo header total a este le damos
dato total se venimos acá y le damos
dato total coma header total y venimos
acá y le damos un Border no Entonces ahí
nos queda la tablita bastante más linda
ven e incluso yo a esta tabla si no le
pusiera bordes por ejemplo a la tabla le
podría poner un Box Shadow c píxeles C
píxeles 15 píxeles negro con un dos ahí
por ejemplo Ven y ahí tenemos una
tablita quizá un poquito más estética
Voy a darle un tres Y en vez de 15 le
voy a dar 25 ahí está el Border bottom
se lo voy a dar también con un cuatro
por qué no cuatro cuatro está perfecto y
ahí así por lo menos me gusta un poquito
más el tema de las tablas de hecho
fíjense que curioso es si le damos por
ejemplo después de darle un padding de
seis píxeles le damos un padding bottom
de 9 píxeles es como que se separa un
poquito más de abajo y queda un poco más
lindo a este le podemos dar Incluso un
poco más que el resto para que se
connote la separación le damos un
padding total de 12 píxeles y ahí está
como que estás más separaditos del resto
y Es más hasta le vamos a dar un font
size 1.2 em para que sean un poquito más
grandes y le vamos a dar un margin top
de 20 píxeles 30 30 píxeles ya está
muchachos tenemos acá una tablita creada
con html y css no lo usamos para poner
por ejemplo datos del usuario no sé
nombre apellido edad e email no no lo
usamos para tablas en donde los datos
noces necesiten estar tabulados estar
bien relacionados entre sí eh donde
podemos trabajarlo con cosas como grido
flexbox cuando veamos Más adelante las
tablas las podemos utilizar para
organizar información de forma Clara
como dije Mostrar datos que estén
organizados en filas y columnas y sea
necesario esto algunas tablas algunas
páginas muy viejas lo usan también para
maquetar formularios esto tampoco se
hace si lo ven intenten sacarlo también
se suele utilizar mucho por ejemplo para
hacer correos cuando uno desarrolla un
correo se sí se pueden hacer correos con
html fíjense este dato que les voy a
tirar ahora si ustedes por ejemplo esta
tabla así como está la copian la
seleccionan todas le dan control c así
vienen a una página cualquiera como esta
que acaban de crear la copian completa y
le dan control c vienen al mail acá como
este van a crear un mensaje nuevo y le
dan control b y se acaba de pegar su
tablita Exacto acaban de pegar la tabla
que acaban de crear y esto se puede
enviar por mail eh Yo acá puedo poner
Hola te adjunto los datos que me pediste
con los productos que compraste y sus
respectivos valores costo unidad y el
total listo Acá está y le mandan la
tablita con todo esto casi bien lindo
acá tenés maestro puse mi mail le doy en
enviar acá me llegó y acá puedo ver como
la persona que lo recibe lo ve en este
caso la persona que lo recibe lo va a
ver sin las sombras ven no no no me
aparecen las sombras pero lo más
importante que es la tabla con su estilo
y sus sus valores y todo lo tiene
perfectamente hasta la tipografía me
conservó Así que esta es la magia
justamente de de htm css no también
podemos hasta armar mails con esto
seguramente muchos de ustedes ahora
deben estar como no qué piol Hola esto
voy a mandar los mejores mails Sí con
esto también pueden construir su firma
vieron las firmas personalizadas pueden
armar una cajita con su firma que tiene
su fotito su correo su número lo que
quieran y eso lo copian y lo configuran
para que todos los mails se manden con
su firma y es buenísimo se puede hacer
de todo así que nada espero que se hayan
emocionado un poquito y si no lo van a
hacer con la siguiente sección porque lo
que vamos a ver en la siguiente sección
va a ser audio y video en html Así que
vamos hace unos 5 años todavía se seguía
hablando de Flash de tal forma que si yo
les mencionaba hace 5 años que había
páginas web hechas con Flash ustedes
iban a decir Ah sí más o menos me
acuerdo de qué trataban o juegos que se
desarrollaban con Flash todo decían Uh
hace 10 años ni descuento era lo más
normal del mundo hoy nuevamente Si uno
menciona la tecnología de Flash para
desarrollar webs se acuerdan de Flash El
signito ese el rojito Bueno hoy ese eso
ya ya prácticamente no existe se tornó
recontra inseguro no lo soporta ningún
navegador y no va no No funciona más
esto okay era lo que eh html 5 dijo Ey
no puedo depender de flash para hacer
que el contenido de video y de audio el
contenido multimedia como tal sea
cargado a través de tecnología no puedo
depender de Flash para cargar contenido
multimedia entonces en html 5
aparecieron dos etiquetas nuevas la
etiqueta de video y la etiqueta de audio
Ah se ponía historiador el tipo y la
verdad que me salió bien no me salió no
me lo van a negar estas dos etiquetas
básicamente nos permiten Reproducir la
de video a ver si alguien Adivina qué
nos permite Reproducir la etiqueta de
video bueno Es raro pero la etiqueta de
video nos permite Reproducir audio no
video No mentira Si te lo creíste te
mereces un cachetazo eh la etiqueta de
video nos permite perite Reproducir
video y la etiqueta de audio nos permite
Reproducir audio voy a venir a un video
mío que dure poco para poder
descargármelo a ver uno solo te pido
Flaco Me cago en Jerusalén uno un solo
video que dure menos de 20 minutos es
chiste hermano uno un solo video
Necesito bueno encontré este que dura 14
minutos buen acá estoy en mi carpeta la
de audio video le voy a pegar este
enlace voy a cambiar el nombre le voy a
poner video es un punto M4 me lo
descargué puede ser cualquiera voy a
agarrar la carpeta y le voy a arrastrar
vis Studio code bueno acá tenemos el
estilos el video y html el video se
reproduce perfectamente Este es un video
que hice sobre páginas web ibles que se
lo voy a recomendar más adelante No
ahora es un video de prueba que vamos a
tener que utilizar para ver esto para
crear un video es es bastante simple
utilizamos la etiqueta video okay Ahí
está y utilizamos src que significa
source es básicamente lo mismo que
utilizamos cuando ponemos una imagen y
acá ponemos el video en este caso
tenemos video. mp4 actualizamos vamos a
correr el servidor y acá lo tenemos ven
Pero qué pasa con el video que no se
reproduce bueno no se reproduce Porque
no tenemos el autoplay tenemos el
autoplay que básicamente es para que se
reproduzca automáticamente y ahí está
ahí se reproduce Esta es la forma en la
que se reproduce el video El problema es
que si yo actualizo la página desde acá
por qué no se reproduce automáticamente
qué es lo que pasa bueno el video no se
puede reproducir A menos que el usuario
haga clic o interactúe de alguna forma
en la página nosotros cuando
actualizamos el navegador le damos
control S esa interacción ya sucede
basta esa interacción ya sucede pero
nosotros tenemos que hacer algo yo Por
ejemplo si acá le doy Controls acá van a
ver que se me va a instalar esto que
está acá que dice Controls Okay si yo
doy control autl y actualizo ven ya a mí
me va a abrir que se autor Reproduce
pero en realidad usuar como un no y
Controls es el atributo que permite que
el video se reproduzca sin problema pero
el tema es que bueno además de darnos
como esta Barrita que viene por defecto
que es como una especie de controles por
defecto que el navegador trae
configurados para que podamos Reproducir
el video ver el timeline Si queremos
podemos descargarlo desde acá es algo
muy simple pero si queremos que se
reproduzca tenemos que ponerle el
atributo muted porque a nosotros sí se
nos Reproduce cuando actualizamos la
página pero cuando entramos por primera
vez no entonces ahí fíjense que si
actualizo la página Ahora sí se
actualiza cuando el usuario entra la
página el video Se puede reproducir
automáticamente sin problema pero si no
le ponemos el muted cuando actualizamos
la página el video no se va a reproducir
tiene que estar en muted para que se
reproduzca ven y que el usuario le suba
el volumen Así es como funciona en
realidad esto okay Entonces source para
el video Controls para permitir tenernos
esta Barrita para poder controlar
Reproducir adelantar etcétera autoplay
muted para que se reproduzca
automáticamente en silencio el atributo
autoplay no sirve de nada si no viene
acompañado del muted no fue hace mucho
pero hace unos años se modificó para que
a menos que el usuario de un clic no
pueda reproducirse automáticamente el
video tiene que interactuar con la
página al menos una vez ent estos son
los cuatro atributos más importantes de
un video El Controls el autoplay el
muted Y el source sobre todo el source y
el Controls estos son los dos más
importantes y acá ponemos por ejemplo un
texto tu navegador No soporta video Y si
actualizamos no no va a aparecer Que
aparezca el texto es como si no
existiera pero si de repente al video no
no carga el video porque no carga no es
que nos va a aparecer no Este es un
texto que ponemos en caso de que el
navegador efectivamente no soporte el
video si el navegador No soporta el
video y no lo puede cargar este es el
texto que va a aparecer al usuario tu
navegador No soporta video lógicamente
si el video no carga podemos darle un
alt y acá le ponemos video de webs
accesibles Entonces el video carga mal
le vamos a poner video no efectivamente
no no va a aparecer el alt Y si le
ponemos title Tampoco tampoco va a
aparecer el title si ponen mal un video
nada Son unos boludos ustedes por poner
mal el video en imágenes sí funciona
pero en video no bueno y en audio es lo
mismo esto lo pueden convertir en audio
y reproduce si si actualizamos la página
nos va a reproducir el audio Mi nombre
es Paula soy una persona ciega y te sigo
en tu canal cuál es el problema de esto
y cuando ustedes cargan un video no
pongan la etiqueta audio pongan la
etiqueta video en video sí es requisito
porque están mostrando un video entonces
publican el video pero si ustedes
quieren que esto sea un audio el archivo
que le den tiene que ser un audio por
qué Porque si no el navegador para poder
utilizar el audio tiene que cargar todo
el video completo Entonces el problema
de esto es que ustedes están haciendo
que el navegador cargue obligatoriamente
el video en MP4 y solo muestre el audio
mientras que si ustedes convierten el
video en un audio y lo convierten por
ejemplo en un audio MP3 va a pasar que
el navegador va a hacer que cargue más
rápido no lo hagan así primero
conviértalo en un audio y cuando ya
tenga formato de audio como MP3 y demás
van a ver que va a pesar no va a pesar
casi nada puede llegar a pesar 1 mega 2
megas 3 megas o dependiendo a ve si
puede pesar más dependiendo de lo que
tengan o pun wo punto ogog que es un
formato de audio pesa muy poquito y hace
que cargue mucho más rápido en el
navegador entonces Estas son las dos
etiquetas que pueden utilizar de video y
de audio lógicamente pueden hacer como
por ejemplo hace Bueno ahora YouTube ya
no lo hace más así pero en su momento lo
que hacía era te agarraba el video por
ejemplo y daba un W 100% no agarraba te
lo ponía al 100% para dispositivos
móviles pero si no es Mobile qué hacía
por ejemplo daado un Wi de no sé 100000
1280 por he 720 píxeles por ejemplo
Entonces esta era la resolución que
tenía vamos a checarlo un poquito esto y
suponiendo que el el navegador no lo
soporte te jodías y te ponía un fondo
negro vamos a hacerlo más largo solo
para que lo puedan ver vamos a hacerlo
de 100 1600 píxeles por ejemplo y vamos
a chicar un poco Esto entonces vos
tenías el video de YouTube y el video de
YouTube se veía así se veía más largo
pero el fondo era negro Entonces YouTube
funcionaba Así estaba los videos al
costado Y si el video tenía la
resolución que tenía que tener te lo
ponía así y al contrario si el video era
menos alto de lo necesario Te ponía las
barras arriba y abajo ven que en este
caso vamos a mostrárselas te las ponía
así ven La Barra arriba y abajo te ponía
las famosas barritas de video porque la
resolución de los videos de YouTube
siempre era igual entonces la resolución
de YouTube era un formato fijo era el
formato 169 No ese era la escala 169
incluso también se podían utilizar de
grad por ejemplo utilizaban background y
le daban el linear gradient o sea
arrancaban en blanco y terminaban en
negro quedaba algo así así coma y F
entonces arrancaba blanco y terminaba
blanco pero parecía que tenía como una
especie de sombra Entonces esto le daba
la sensación al usuario que veía esto
que ni arrancaba ni terminaba pero no
todo un verso nada Solo solamente un par
de propiedades que pueden aplicar a los
videos yo lo voy a sacar es más le vamos
a dejar e Vamos a darle 1480 ponele y
vamos a ponerle el background color
negro Ahí está así nos genera los bordes
a los costados y pueden ver lo que yo
les estaba comentando Pero puede ser de
cualquier color igual puede ser por
ejemplo rojo pero es rojo rarito Así que
lo vamos a dejar en en en negro y a la
bosta bueno así funciona el audio y así
funciona el video hay que dar mucha más
vuelta desde javascript se puede hacer
mucho desde javascript podemos parar los
videos aumentarlos cambiar un montón de
cosas cambiar podemos hacer magia con
javascript con los videos pero no es el
video para eso no es el momento para eso
lo que sí si quieren hacer que el video
se reproduzca en bule porque es un video
que por ejemplo va a ser un video que lo
van a querer reproducir en ble y ni
siquiera quieren que se vea el Controls
Qué hacen ponen Loop y Loop significa
ble entonces Esto hace que el video se
reproduzca en bogle Entonces tenemos el
source que nos pide la ruta de archivo
el muted que arranca el video muteado lo
mutea de entrada autoplay que estas dos
van com nadas hoy por hoy el Loop que lo
lo mete en bucle y el Controls que nos
permite tener esta barra de control y
todo eso acá y este texto como contenido
de la etiqueta que en caso de que el
navegador no soporte el video se muestra
navegadores viejos eh o para celus con
navegadores de no sé del año del pedo
también y después pueden utilizar la
etiqueta Track Okay que la etiqueta
Track es una etiqueta que nos permite
poner subtítulos Esta es una etiqueta
que no se abre ni se cierra solamente es
una etiqueta una self closing tag Okay
solamente la abrimos y ya está primero
ponemos Okay el src que va a ser el el
subtítulo en este cas en este caso tengo
caps.ttf
facto escribimos theou y ahí ya Aparecen
por defecto y tenemos que ser nosotros
quien los desactive también podemos
darle en donde dice kind y acá vamos a
poner que son captions o sub subtitles y
fíjense que ya sabemos le damos a
entender al navegador que son subtítulos
y después en este caso son captions la
min diferencia y le tenemos que decir el
idioma porque fíjense que acá nos dice
pista uno ahora vamos a darle en src
lang es de español y si ahora venimos
acá y vemos va a decir que los
subtítulos son en español acá en la mdn
web doogs tenemos justamente las
posibilidades ven los subtítulos acá les
dicen para cuándo usar subtítulos cuando
usar captions etcétera sourc slang En
realidad iría en eh justamente S como yo
les mostré si ustedes quieren que se
muestre español tienen que usar un Label
español eh Latinoamérica por ejemplo
Ahora sí les va a aparecer español
latinoamérica pero s le está informando
al navegador que el lenguaje es español
e por ejemplo es inglés br es portugués
o de Brasil y así okay Yo le pongo es de
español pero si ustedes quieren el texto
se modifica en el Label no en el source
L sino en el Label es correcto poner
todas estas que les estoy mostrando
ahora fíjense que curioso si yo por
ejemplo vengo acá y hago que el video
tenga un texto vamos a ponerlo más
adelante estamos mal entando Ahí está
text al en Center fíjense que no pasa
nada y el texto no se alinea para eso
ponemos el Track y al Track le damos un
texto al incenter y tampoco se alínea
bueno Esto es porque no se puede esto
los archivos de subtítulos ya traen los
web btt que en este caso al ser un
archivo btt tiene unas configuraciones
para hacer que estos subtítulos tengan
color estén centrados esto es un
subtítulo básico Si queremos centrarlo
tenemos que usar javascript o configurar
el archivo de subtítulos para que se
centren para que tengan otro color pero
ahora no vamos a ver eso porque ya es
demasiado ustedes con que sepan ponerlo
ya es suficiente porque como es algo que
se hace con otros lenguajes o se hace de
otra forma ustedes cuando vayan a ver
esas formma lo van a aprender por ahora
que es lo que nos compete a nosotros es
saber cómo poner subtítulos y cómo
hacerlo correctamente de hecho fíjense
que están Están bien hechos los
subtítulos Mira observen esto Este es el
archivo web btt que esto es lo que
pueden modificar ustedes Acá le
modifican las propiedades y lo pueden
modificar trabaja con esto okay Que es
una forma de hacer referencia a esto que
está acá que se se se les define como
clases a estas cositas y después se los
estilan y demás ni ni les conviene
hacerlo este es todo el archivo Okay que
lo pueden hacer lo pueden hacer Igual
solamente con modificando esto Y
utilizando css pueden cambiar el color
pero se hao un poquito más avanzado Por
eso digo que todavía no lo vamos a ver
ahora sí ya estamos listos para ver otra
sección que va a ser también bastante
cortita y bastante rápida est hablando
de cómo funciona esto de Lazy load o
Lazy loading que básicamente es un
atributo llama loading que tenemos que
aprender a usarlo con javascript después
podemos utilizar algo llamado
intersection of server Okay que es para
hacer que las cosas carguen a medida que
aumenten pero no voy a hablar mucho más
vamos a ver para qué existo qué sirve
cómo conceptualmente funciona y vamos a
aprender a aplicarlo Así que está bueno
es una de las últimas cosas que vamos a
ver en esta sección intermedio avanzada
de html pero está bueno que lo tengamos
en cuenta porque cuando trabajamos con
una web con muchas imágenes nos puede
servir Así que
vamos bueno gente ahora lo que vamos a
ver básicamente va a ser el Lazy load
Okay con html css Qué es el Lazy load
muy simple el Lazy load es un concepto
que habla de que el contenido tiene que
ir cargándose mientras el usuario va
llegando a esas secciones una página web
es así más o menos tiene este largo por
ejemplo lo que el usuario ve ni bien
entra es este cuadradito Porque si
estamos en una computadora Esto es lo
primero que el usuario ve o sea la
pantalla es así tiene es es rectangular
pero la página web sigue O sea si
hacemos scroll vamos a poder seguir
bajando a lo largo de toda la página Qué
pasa Acá hay una sección en la página
Acá hay otra Acá hay otra y Acá hay otra
el Lazy l dice si el usuario está viendo
solamente esto lo que está en rojo es lo
que el usuario todavía puede ver Okay si
está en rojo el usuario lo puede ver
entonces el usuario va a ir viendo el
resto de contenido Cómo funciona el L
simple básicamente el Lazy load dice
Mira si el usuario está acá está viendo
esto no cargues las imágenes todavía si
hay imágenes más abajo es decir si acá
por ejemplo Tenés una imagen el usuario
recién está viendo esto no hace falta
que cargues la imagen porque todavía el
usuario no llegó hasta ese momento si
vos cargas todos los elementos de una
página de golpe puede hacer que la
página se vuelva lenta porque va a tener
que cargar todos los componentes de
golpe consume más datos etcétera
entonces qué pasa primero cargar lo que
el usuario va viendo entonces haces que
sea todo más rápido Entonces cuando el
usuario llega hasta este punto ahí
cargas la imagen bueno y hice una página
con algo básico de texto okay Lo único
que voy a hacer es poner una imagen una
imagen muy simple la voy a abrir desde
la carpeta vamos a volver para atrás
vamos a entrar a imágenes y vamos a
cargar la imagen de alto. png al párrafo
le vamos a dar un he 100 View por ha y
un wiet 100 View por wiet ahí está y
vamos a darle un font size 30 píxeles
por qué no para que nos ocupe bien todo
Ahí está overflow hidden para que no se
sobresalga esto olvídense lo que acabo
de hacer no lo vamos a ver ahora bueno
la imagen no me carga fantástico vamos a
enlazarla bien porque se ve que no no no
me la está tomando Ah claro porque la
ruta fíjense la ruta no puede ser de un
Rango inferior claro esto que está acá
es solamente porque estamos en visual
Studio code porque lo que estamos
corriendo es un servidor a partir de
este archivo Si queremos que corra
tenemos que correr el servidor desde
antes o sea Open folder selecciono esta
carpeta le doy en save y acá corro el
servidor ahora entro a mi carpeta Lazy
loading y entro a enlaces pun html no sé
por qué se llama enlaces el archivo
olvídense eso es por un tema acá y acá
ahora sí me carga Por qué Porque el
servidor está cargando desde un lugar en
el que tiene as que contienen todo es
solamente eso olvídense lo que acabo de
hacer acá tenemos la imagen que agarra
cuál es el problema de esto vengo a
inspeccionar y vengo a el Network
actualizamos esto okay fíjense que acá
nos carga todo esto tenemos todo esto
que nos cargó la imagen fíjense que
cargó acá o sea abrimos la cosa y cargó
la imagen Ya está ya sabemos la imagen
le agregamos al atributo loading y le
ponemos Lazy Cuando hacemos esto
básicamente miren ahora a dónde me lo
acaba de cargar me lo cargó bastante
después O sea lo cargó después por qué
Porque primero esto lo que hace es darle
prioridad a que se cargue lo que se
tiene que que cargar y cuando estamos
lendo o llegando a la imagen ahí me la
carga fíjense que yo voy a hacer voy a
hacer esto que está acá son atributos
que ya no se usan pero es para dejar
saltos en línea actualizo y fíjense que
ahora se cargó rápido actualizo pero
ahora se cargó de vuelta más lento
actualizo se cargó rápido actualizo se
cargó pero si fíjense que siempre es lo
último que se carga lo último que se
carga es la imagen si yo le sacar el
atributo Lazy el atributo loading perdón
con la con el valor Lazy fíjense que
siempre se va a estar cargando antes se
va a estar cargando rápido acá es lo
tercero que me carga Okay es lo tercero
que me carga el problema de esto es que
cuando tenemos muchísimas imágenes y
nuestra página está sobrecargada de
imágenes o de archivos y demás el
problema de esto es que va a cargar
siempre las imágenes antes de que
termine de cargar toda la página o la
sección que estamos viendo ahora eso
puede hacer que no se carguen o estilos
o que no se carguen scripts de
javascript cuando pongamos hay muchas
cosas que no se van a poder hacer
entonces lo que hacemos es tranquilo
navegador vamos a poner loading Lazy y
la imagen cárgala cuando puedas ven
Entonces siempre es lo último que carga
Por qué Porque primero le da prioridad
al resto de cosas ahora me la está
cargando antes porque el fabcon punto
icon no se encuentra Entonces eso carga
super rápido pero la carga después
básicamente es la prioridad que le
estamos dando a la imagen en cuanto a
tiempo de carga esto es muy bueno porque
como repito si tenemos una galería
gigantesca y queremos que las cosas se
vayan cargando mientras van mientras la
persona va bajando por acá y va bajando
en scroll puede hacer que las imágenes
vayan apareciendo y se vayan cargando
según vayamos bajando el scroll hay una
una parte que hice el curso de
javascript en el nivel Master que es
este que está acá acá justamente tenemos
el Lazy load Okay acá muestro un poquito
de que que va y fíjense que acá tenemos
el ejercicio final eso es el Lazy load
es contenido que va cargando a medida
que va ignoren todo este código
javascript esto que está acá si quieren
vean el curso van a aprender De hecho no
sé por qué tiene se llama tablas el esto
esto que está no es tablas esto que está
acá es Lazy loading Ah Lazy loading y
esto que está acá no se llama la se
llama Index motherfucker Ahora sí vamos
a cargar el Index Bueno no es eso Okay
tiene unos problemas esto de Lazy
loading porque a veces cuando lo
utilizamos de forma peligrosa puede
hacer que el usuario esté navegando y no
le carguen los elementos es decir
literalmente el tipo está navegando por
la página y hay elementos que no le
carga entonces puede ser un problema Yo
por ahora les diría que no lo usen hasta
que no sea necesario cuando lo use en el
futuro les voy a explicar bien Cómo
aplicarlo a un caso de la vida real
Mientras tanto solo Está bueno que sepan
que existe pero no lo apliquemos Ahora
sí finalizamos la sección vamos ahora sí
con las últimas tres secciones que estas
son un poco más técnicas y no tan
prácticas pero que es super importante
que las tengamos en cuenta y ya con esto
arrancamos con el apartado no El más
lindo del curso porque el más lindo del
curso va a ser el de los proyectos
finales mientras vamos avanzando en el
curso más nos va a ir gustando todo lo
que vamos a ir haciendo a mí por lo
menos así que se va poniendo cada vez
más emocionante y cada vez las cosas son
más lindas van a ver vamos con la
siguiente sección que es de etiquetas
obsoletas las que no tenemos que usar
nunca y las que si ven mejor aléjense de
ellas Bueno ahora vamos a ver lo que son
las etiquetas obsoletas para arrancar
Qué son las etiquetas obsoletas Qué
joraca significa esto a ver no hay mucha
ciencia Pero si te falla un toque algún
área específica del cerebro que no te
permita entenderlo yo lo voy a hacer por
vos des preocupate con etiquetas
obsoletas nos referimos a etiquetas
obsoletas
nada joda ahora Les explico en serio
básicamente son etiquetas que queron
literalmente obsoletas o que fueron
descontinuadas no se recomiendan para
uso en html de ninguna forma ahora por
qué una etiqueta se vuelve obsoleta Y
antes teníamos muchísimas etiquetas que
se usaban todo el tiempo pero primero
los estándares mejoran Y avanzan
entonces qué significa esto y que hay
algunas etiquetas que se vuelven
innecesarias y simplemente se dejan de
usar porque se reemplazan por
alternativas mejores después por su
enfoque en ccs es decir hay etiquetas
cuya funcionalidad se puede hacer
directamente con ccs y como el objetivo
de html no es dar estilos ni modificar
la estética de un elemento y eso se
puede hacer con ccs hay etiquetas que
especialmente tenían una única función
funcionalidad de dar estilo que se
descartaron Como por ejemplo la etiqueta
No lo sé DS etiqueta font la etiqueta
Center que eso ya se hace directamente
desde css ese no es obsoleta como tal Ya
lo vamos a ver pero font y Center Sí y
daban estilo y por eso no se usan más
después tenemos el tema de la
compatibilidad y el rendimiento es decir
algunas etiquetas obsoletas pueden
causar problemas de compatibilidad
estamos hablando entre navegadores no y
afecta negativamente la página y después
accesibilidad web que eso justamente es
lo que sigue es con lo que vamos a
terminar este apartado de html
intermedio avanzado pero básicamente es
un concepto que habla de cómo hacer
páginas web para que todo el mundo las
pueda acceder no importa si sos ciego si
te falla la vista si tenés ataques de
epilepsia cuando ves imágenes raras si
tienes daltonismo no importa okay vamos
a decir que puedas entrar a una página
web igual y que la puedas Navegar Cómo
bueno parece magia pero no lo es y les
voy a explicar cómo hacerlo de hecho
creo que en Europa es una ley O sea no
puede haber O sea si es es una página
web tiene que ser sí o sí accesible
porquees Si no estás Estás cometiendo un
delito algunas etiquetas obsoletas por
ejemplo son font si yo por ejemplo acá
escribo algo ven directamente viso
estudio code ni me lo toma porque la
etiqueta ya no funciona esta etiqueta
nos permitía especificar acá como
atributos el tamaño y el color de la
fuente y un montón de cosas más por eso
ya ni se usa eso ahora todo con css
Center que tampoco se usa si yo por
ejemplo tengo un párrafo Ok tengo un
texto fíjense que el texto queda acá si
yo hacía esto y le daba Center Okay y
hacía esto Esto se me centraba ven se me
ponía acá y se me centraba eso ya no se
hace no se usa fíjense que por eso me la
marca como en Blanca porque es obsoleta
Okay las etiquetas en blanco no van
teníamos también blink okay Que ya la
habíamos visto blink pero básicamente
esta etiqueta hacía que el texto titile
ahora ya Fíjate que ni me funciona hacía
que el texto titile esto era malísimo y
no se hace no se usa tampoco teníamos
por ejemplo Big que si yo por ejemplo
tengo un texto cualquiera me hacía que
el texto sea más grande ven yo por
ejemplo pongo un párrafo común y me lo
hace así si yo al párrafo le ponía el
Big el texto era más grande Esa era la
funcionalidad que tenía Big era
agrandarme el texto ya esto tampoco se
hace lo hacemos directamente con css
esto y no se hace desde vi está mal
usábamos por ejemplo strike si queríamos
hacer esto hacamos y escribíamos por
ejemplo texto tachado y strike
literalmente nos tachaba el texto esto
tampoco poco se hace hoy por hoy se
reemplazó por Dell Okay que por ejemplo
decíamos esto no tenemos un precio nuevo
por ejemplo no sé esto tiene un precio
de 9000 era el precio esto tiene un
precio de
5999 Y antes costaba 9000 Entonces qué
hacen agárrale al estilo a este que
quede todo lindo y decíamos antes
costaba 9000 ahora cuesta 5900 Enton
para eso se puede usar se puede utilizar
para hacer referencia algo que antes sí
era pero que ahora no es por ejemplo si
yo quiero decir niño quiero decir no no
no se pronuncia niño se pronuncia niño
como es una forma No creo que se
entiende dónde voy este es el uso que se
le da el del ya no se usa más strike se
usa del pero tiene un significado
semántico también se usa s Okay para
indicar texto que ya no va en este caso
si sería lo de por ejemplo niño por
ejemplo V esto ya no va es esas dos son
El reemplazo de strike antes
utilizábamos por ejemplo TT también que
escribíamos un texto y fíjense que se
nos ponía en monospace el texto normal
se ve así y el monospace era una
tipografía especial Que la utilizábamos
para escribir código hoy por hoy Esto
tampoco se usa y lo que hacemos Es
reemplazarlo por la etiqueta code Ven y
funciona Exactamente igual Solo que
estamos diciendo el navegador que vamos
a escribir posiblemente código de algún
PR algún lenguaje de programación
entonces podemos hacer por ejemplo print
Hola mundo no entonces ahí por ejemplo
ahí por ejemplo esto que está acá se
parece mucho más a un texto que podría
escribir un editor de código que si yo
por ejemplo lo pongo así sin el code se
ve se ve raro se ve feo en cambio con el
code se ve mucho más estético y se
entiende que es código de hecho las
etiquetas code por ejemplo suelen tener
un fondo negro y un texto claro algo así
background por ejemplo se le da este
fondo y un color blanco Ahí un padding
por ejemplo no sé seis píxeles o cinco
píxeles es como Okay esto que está acá
es una línea de código no entonces
escribimos la forma de decir hola mundo
en python es dos puntos y la mostramos
la forma de decir hola mundo en python
es Hola mundo Esta es la forma correcta
de utilizar esta etiqueta se usa code ya
no se usa más TT se usa code y también
tenemos la etiqueta Okay la otra
etiqueta que es la etiqueta u si yo por
ejemplo tengo un texto no y tengo Hola
máquina Cómo andas y actualizo tengo
esto si yo por ejemplo quiero subrayar
el Máquina qué hago vengo acá y pongo la
la u así la u Esta que está acá si bien
no es obsoleta Es decir No es no es una
etiqueta que está obsoleta fíjense que
de hecho ni me la muestra en blanco No
sé si se recomienda pero hoy en día lo
más normal es hacer esto directamente
desde css entonces venimos acá y esto lo
reemplazamos por spam a esto le ponemos
una clase un área lbel toda la demás
bosta y lo subrayamos desde css No eso
por lo menos la forma más común en la
que hoy en día se hace Porque además
después te permite modificar
tener esa clase personalizada y si
queres modificar máquina y darle otras
propiedades lo vas a poder hacer
diferente de si tienes la etiqueta u y
tenés que agarrar la etiqueta u y ties
que seleccionarla en css es mejor ya
tener un selector preparado para
modificarlo de vuelta cuando se nos de
la gana bueno y después también hay un
montón de atributos que queran obsoletos
pero básicamente les digo usen esto en
su cabeza los atributos que suelen dar
estilo a un elemento desde el atributo
cosas como por ejemplo a una tabla darle
sales padding desde acá o algún atributo
que se encargue de V ir algo del estilo
directamente desde html no va y no se
hace se hace desde css eso porque por
ejemplo la etiqueta B si yo por ejemplo
quiero Resaltar la palabra máquina la
etiqueta B no es obsoleta Okay pero
tampoco se recomienda usar B por qué
porque esto se hace desde css la
etiqueta B en realidad no se debería
usar porque lo único que hace es
Resaltar un texto y si le queremos poner
a un texto algo en negrita realmente es
porque lo queremos Resaltar Y si
queremos Resaltar un texto tenemos que
usar la etiqueta strong Porque además en
seo sí tiene importancia Vamos a darle a
todo esto un font family sanif no a esto
no le vamos a dar a todo al p le vamos a
dar esto y de esta forma estamos
resaltando olo el strong funciona igual
que el B Solo que tiene un sentido
semántico que significa quiero darle
importancia a este Resaltar quiero
resaltarlo porque es una palabra
importante y después tenemos otra que es
em Okay en vez de ser strong es em que
es igual Solo que nos la pone en cursiva
la diferencia es que con em hacemos
referencia a algo Perdón hacemos énfasis
en algo si yo por ejemplo digo Hola
máquina Cómo andas lo podemos hacer con
m Pero si yo digo Hola máquina Cómo
andas ahí va con strong porque strong es
algo un poco más serio algo más
importante yo por ejemplo digo el
concepto que estás buscando es máquina
Ahí va con strong Pero si yo digo Hola
máquina Cómo andas estoy dándole énfasis
a la palabra máquina Entonces en ese
caso se pone em Pero si yo por ejemplo
dijera estamos hablando de una gran
máquina ahí ese máquina va con strong
okay Estamos hablando de una gran
máquina y ese máquina va con strong
porque es como que a pesar de que le
estamos dando énfasis le estamos dando
una importancia superior es algo un poco
más serio Mientras que el otro Es
simplemente para Resaltar por ejemplo
podemos venir acá y decir la verdad que
em
amo a tu mamá la verdad que amo a tu
mamá le estamos dando el énfasis
entendés ahora si yo pusiera por ejemplo
acá strong esto ya medio que queda raro
entendés la verdad que amo esto ya es el
Esto es para algo un poco más serio Okay
es casi igual pero diferencia que es
mínima y en una es como darle énfasis a
una palabra y en otra es como Resaltar
que es importante en fin es importante
que si quieren chequear Cuáles son las
etiquetas obsoletas si ustedes buscan m
mdn html acá tienen esto que esto es
básicamente el estándar oficial Okay
escriben html elements y este que acá
tienen todos los elementos que hoy por
hoy se siguen usando la etiqueta rtc no
se usa rb no se usa Plain text no se usa
vamos a buscar alguna que les haya
mostrado antes marky no se usa font que
les dije no se usa Es más si ustedes
entran este signito que significa está
obsoleta de preced Not For using New
websites Okay está ya está se quedó
antigua no no hay que usarla para sitios
nuevos desp tenemos este otro icono que
es el de que no es estándar Okay no
solamente no es estándar sino que ya
está obsoleta y después tenemos este que
significa es experimental o sea
posiblemente el comportamiento va a
cambiar en el futuro o hay que ver si
los los la aceptan los navegadores pero
la forma de chequear que una etiqueta es
o no es obsoleta es esta es más si
ustedes buscan el listado de etiquetas
estándar en html pueden bajar y acá por
ejemplo vamos a encontrar la página a
ver Déjenme que la encuentro bien esta
esta página que dice referencia
elementos html Esta que está acá tieren
un listado con todos los elementos html
que son estándar y que se siguen
utilizando si quieren entender bien para
qué es cada elemento y cómo se usa Esta
es la clave para encontrarlo okay Así
que con esto voy a cerrar un poco el
tema de apartado de etiquetas porque
quiero ir a la siguiente sección que voy
a mostrarles Cómo escribir un código
html semántico por ejemplo para hacer
una página web completamente común y
básica porque todavía no vimos lo Cómo
funciona un nav Cómo funciona un header
tampoco vimos por ejemplo cómo Qué
significa un footer Okay o qué es un
es una Side y son de los
elementos más comunes de una página web
no mismos lo que es un sex tenemos que
entender por lo menos los componentes
básicos de una página web para saber
cómo escribir el código html semántico
vamos a entender un poquito más lo que
existe detrás del html semántico o la
semántica y después vamos a ver
accesibilidad web Así que
vamos bueno gente ahora vamos a ver un
apartado bastante interesante que es el
de El html semántico en este caso vamos
a ver etiquetas semánticas qué jor que
es el html semántico bueno básicamente
el html semántico significa utilizar
etiquetas específicamente que tienen un
significado para dar un significado a
esas etiquetas a la sección que estamos
creando en realidad es decir la página
web tiene texto o tiene información y
esas etiquetas la utilizamos para dar
información o darle un significado eso
que estamos Armando porque la otra forma
es utilizar divs y spans para todo el
div es justamente una etiqueta genérica
de bloque y el spam es una etiqueta
genérica de línea entonces con esas dos
etiquetas podemos armar casi todo lo que
hoy conocemos en la web de hoy en día y
sí no sería un problema pero eso hace
que tengamos 300,000 desventajas primero
una falta de accesibilidad básicamente
los lectores de pantalla que en la
próxima sección es de accesibilidad Así
que no le vamos a dar mucho énfasis a
este punto pero hace que los lectores de
pantalla entiendan De qué trata cada
cosa también por temas de seo o search
engine optimization mejora la
comprensión del contenido por parte de
los motores de búsqueda lo que hace que
podamos aumentar nuestro ranking en
posicionamiento aparezcamos más arriba y
mantenibilidad hace que el código sea
más fácil de mantener y que otros
desarrolladores lo entiendan cuando lo
trabajen nosotros tenemos varias
etiquetas semánticas en este caso por
ejemplo tenemos la estructura básica de
html si yo por ejemplo quiero armar un
encabezado completo qué hago vengo acá y
pongo un header y el header básicamente
hace referencia a un encabezado es decir
es el encabezado de la página
normalmente contiene no sé imágenes
logotipos eh alguna barra de navegación
ahora por ejemplo vamos a poner La
Barrita de navegación este que está acá
es un elemento para navegar le vamos a
decir al navegador que lo que va a estar
acá dentro va a ser para navegar vamos a
crear un ul que es una lista desordenada
y adentro list que son elementos de la
lista Entonces estamos diciendo okay Que
vamos a crear un gader adentro va a
haber un lugar donde se puede Navegar va
a haber una lista de opciones y cada una
de esas opciones va a tener un enlace
por ejemplo a algo un diferente lugar de
la página ya después veremos cuál es y
de esta forma estamos creando un menú de
navegación XD y xd tenemos varias
opciones Okay esto es la forma
semánticamente correcta de hacer por
ejemplo un menú de navegación que va a
estar en una página web y acá abajo
también en el encabezado podemos tener
también por ejemplo imágenes o más cosas
que van a componer la parte principal de
la página lo que nos va a recibir
normalmente ojo que puede haber más de
un encabezado eh podemos tener un
encabezado más abajo si estamos por
ejemplo haciendo una presentación de
Powerpoint mir que las presentaciones de
Powerpoint tienen secciones encabezado
por ejemplo vamos a ver el apartado de
esto Qué es la accesibil listo ahora
vamos a ver el seo Qué es el seo Y esa
presentación que se preguntan Qué es el
seo es un encabezado entonces la página
web funciona igual podemos tener por
ejemplo una página web en el que
hablamos de diferentes temas y puede
haber varios encabezados eso no no es
ningún problema puede suceder después
tenemos justamente section vamos a acá
por ejemplo crear un section que el
section Okay suele hacer referencia a
una sección del contenido es decir
básicamente si nuestra página web se
trata de no lo sé recetas esto que está
acá podría contener el podría ser el
contenedor más grande de nuestra receta
por ejemplo un section puede ser para la
noticia no Entonces esto le podemos
poner Class notice container entonces
tiene un es un contenedor de toda la
noticia después abajo podemos tener otra
sección que va a ser el comments
Entonces esta Va a ser una sección que
contiene comentarios vamos a poder crear
una sección para poder interactuar o
comentar la noticia por ejemplo o la
receta en este casoo dice receta en
inglés contenedor de receta contenedor
de comentarios y acá arrancamos si por
ejemplo la página web principal trata
específicamente de la receta usamos otra
etiqueta entonces lo que hacemos en este
caso es poner por ejemplo un Main y
adentro ponemos el section Por qué
Porque el Main es el contenido principal
Okay el contenido principal de eh
nuestra página es decir si yo Por
ejemplo si yo por ejemplo entro a
Twitter podemos identificar que este que
está acá va a ser el de Twitter si le
damos botón derecho inspeccionar y acá
ponemos control F Main vamos a ver que
esta que está acá es específicamente la
sección Main la sección principal por
qué porque esto que está acá es una es
una barra de navegación Esto no es la el
contenido principal de Twitter esto que
está acá son contenidos apartes es decir
es un material aparte que tampoco nos
interesa sí puede ser como algo
secundario y no nos interesa pero el
contenido principal está acá dentro de
la etiqueta Main lo que hacemos Es en
globar todo el contenido que
consideramos parte principal de nuestra
web yo por ejemplo voy a poner una
noticia vamos a poner acá por ejemplo
mercado de pase de boca lo que sea
fíjense que esto que está acá es una
barra de navegación esto no es para nada
el contenido principal no entra dentro
del Main esto tampoco debería entrar
adentro del Main si yo voy a botón
derecho y Busco Main acá podemos ver que
el Main de la página empieza desde acá
ven desde acá empieza el Main de la
página y fíjense que ya terminó acá esto
que está acá es publicidad ya no es
parte del contenido principal de la
página Entonces es el objetivo del Main
en el Main vamos a tener la sección
principal o el apartado más importante
de nuestra web después tenemos el aside
que por ejemplo acá podemos tener el
Main y acá podemos tener por ejemplo el
aside que el aside sería básicamente
como una sección secundaria que está
relacionado con el contenido pero no
tanto yo por ejemplo acá en Twitter
tengo esto que está acá si damos botón
derecho le damos inspeccionar y buscamos
acá as Side no va a haber ninguna Side
me la metió Twitter Bucar noticia vamos
a ir a noticias y acá vamos a poner hoy
noticia en España en infob si yo le doy
acá botón derecho inspeccionar y busco
aside acá está fíjense que en este caso
esto es el aside Ven por qué esto es el
aside porque es una sección secundaria
pero que de alguna forma tiene que ver
con el contenido principal la página web
es de noticias esto que está acá va a
ser el Main y va a ser una noticia y acá
tenemos un contenido que No
necesariamente tiene que ser lo
principal pero es un apartado
relacionado Entonces es como la Side si
tuviéramos una forma de estructurarla si
esta fuera nuestra página web tenemos
por un lado la sección principal de
nuestro contenido por ejemplo después
tenemos el aside que es como un apartado
secundario que no nos interesa mucho si
somos más específicos acá arriba tenemos
una barra de navegación okay Para poder
Navegar Y si todavía quieren ser más
específicos acá abajo por ejemplo
solemos tener un footer o el pie de
página que el footer suele ser esto que
está acá abajo de todo ven esto que está
acá esto que está acá es el footer es
como el pie de página básicamente
incluye información de derechos de autor
enlases a términos de condiciones ayuda
F etcétera eso es el el el el footer
Ahora si me preguntan una recomendación
a mí Les recomiendo no usen etiquetas
solamente por usarlas primero fíjense
que la etiqueta tenga un sentido qué
jorque estoy haciendo Hay algún sentido
para lo que estoy haciendo Busco sea una
etiqueta parecida para hacer eso y la
utilizo por ejemplo no vamos a utilizar
un h1 para hacer que nuestra letra sea
más grande tampoco por qué Porque
estamos haciendo las cosas mal el h1
tiene un sentido que es crear el
encabezado más importante de la página
Okay el h1 tiene que haber uno por
página Entonces no puedo utilizarlo para
hacer que una letra sea grande para eso
lo hago con ccs se entiende Lo hago de
otra forma yo por ejemplo voy a escribir
un párrafo lo hago con p no con SP ni
con ninguna otra etiqueta ni con un con
un p si yo quiero que una lista lo hago
con una lista ordenada o desordenada y
su respectivo elemento de lista item
Okay el L si yo voy a Resaltar una
palabra Lu hao con strong o con m no con
b porque B no tiene significado yo a
creo una barra de navegación pongo el
nav si voy crear un encabezado uso un G
un nav si si voy a poner un footer yo
por ejemplo acá puedo poner abajo de
todo después de la sección de
comentarios acá abajo de todo voy a
poner un footer y este que está acá es
mi footer acá por ejemplo voy a poner un
párrafo que va a ser protegido por
derechos de autor ahí pongo copyright
2024 igual no es el aroba es el signo
del R el que tiene del copyright Pero
bueno vamos a hacer cuenta que está esto
que está acá va abajo de todo Hay
muchísimas formas de hacer que esto
termine abajo de todo pero no lo vamos a
ver ahora lo vamos a ver cuando
desarrollamos una página web real porque
por ahora no nos interesa Por ahora
tienen que saber que esto tiene que ir
abajo de todo de nuestra página Le acabo
de dar un par de propiedades Okay a esto
pero ustedes ignoren lo que acabo de
hacer pero básicamente Este es el footer
ven el footer es el apartado que va
abajo de todo acá abajo en el al final
de la página ves es lo mismo que esto
abajo de todo entonces eso es lo que yo
acabo de hacer ahora ven lo puse abajo
de todo esto que está AC sera el jader o
el nap porque tenemos para encabezar y
así podemos hacer una página web
gigantesca a lo largo del curso vamos a
ir viendo cómo utilizar bien estas
etiquetas porque vamos a construir cosas
ya sabemos ahora Estamos viendo las
herramientas y en el proceso También
estamos construyendo algunas cosas pero
de una forma medio así a la ligera
cuando construyamos cosas en serio vamos
a ver realmente esto pero para eso nos
falta lo último que necesitamos saber de
html para poder considerarnos listos
para poder avanzar en Nuestro camino a
la sección de ccs intermedia y ya de una
vez por todas comenzar a construir cosas
de verdad con grid y con Flex no así que
vamos con lo último de todo que es la
accesibilidad web vamos a ver este
último concepto y esta última forma de
trabajar para considerarnos listos para
ir a la sección intermedia de css y
comenzar con bueno la parte bonita no
así que vamos a ver sobre accesibilidad
web Bueno ahora vamos a ver el concepto
de accesibilidad web Okay que muchos
Pensarán de alto no necesitas una
sección específica porque lo viniste
explicando desde que comenzó el curso No
si necesitamos una sección específica de
accesibilidad web porque hay un montón
de cosas que no dije que solamente son
importantes si tenemos esta sección la
accesibilidad web se refier a la
práctica de hacer páginas web que sean
adaptables para todos dalti pero qué me
importa si solamente el 2% de personas
son ciegas o el 1% entonces a mí qué me
importa no funciona así primero segundo
no seas un hijo de put y tercero hay
leyes en Argentina no hay leyes tan
estrictas porque por ejemplo las páginas
web del estado o las que reciben plata
del Estado son las únicas que necesitan
ser accesibles pero las demás si no son
accesibles No pasa nada pero en Europa
justamente Hay un montón de problemas
que tienen que básicamente tener en
cuenta porque cuando crean una página
web si la hacen accesible nos cambia la
forma de pensar créame que lo que yo
desarrollé cuando arranqué a trabajar
accesibilidad hace unos meses lo pensas
desde un lado de verdadera inclusión y
no solamente eso sino que encima cuando
desarrollas intentas darle mucho más
sentido a todo y antes me pasaba que
cuando intentaba crear elementos o
construir cosas hay cosas que solamente
por no tener la lógica de la
accesibilidad inculcada no me daba
cuenta que podía estar haciendo mejor O
podría encontrar otra cosa mejor para
poder hacer lo mismo que estaba haciendo
Entonces este concepto Está bueno porque
no solamente nos ayuda a repensar la
forma en la que construimos todos sino
que además de rebote tenemos mucho
impacto social porque estamos ayudando a
la gente que pueda acceder impacto
económico porque si tenemos una página
web y demás lo bueno también Es que este
este tipo de impacto nos impacten más
ventas porque si estamos pensando que en
un futuro en internet tiene que pasar
Todo es decir todo el mundo no tiene que
ir a la calle a comprar va a tener que
comprar por internet va a tener que
hacer todo por internet y demás como hoy
ya sucede Mientras más personas puedan
entrar y más personas pueden usar otra
página significa Mag guita y después
también a nivel legal de regulaciones de
responsabilidad social empresarial
etcétera entonces Está bueno porque
encima nos mejora el seo o sea una
página web más accesible es una página
web con mejor posicionamiento en
buscadores Así que buenísimo si se
preguntan y cuál es el objetivo de la
accesibilidad ofrecer una página con
condiciones igualitarias que todos sin
importar sus discapacidades o sus
capacidades puedan utilizar para esto
quiero que veamos el concepto de El dom
Okay nosotros por ejemplo tenemos un
código html okay Todo muy lindo esto que
estamos viendo acá es nuestro código
html todo nuestro archivo así todo
menjunje de html bla bla bla todo esto
es nuestro código html Okay sí este es
nuestro código html ahora todo este
código extraño nosotros podemos decir Ey
nuestro código extraño lo interpreta el
navegador Como por ejemplo Google Chrome
esto debería ser del color de Google
Chrome y debería estar acá porque esto
se parece más a Google que a una página
web sin darnos cuenta hicimos el logo de
Chrome y esto que está acá sería nuestro
código html entonces decimos nosotros
nuestra página web nuestro código html
lo lee el navegador y nos da un
resultado lindo y bello que todos
podemos ver que es la página web final
bueno no Esto no es así voy a checarlo
un poco porque así funciona para una
persona completamente común y corriente
pero ahora que estamos más avanzados les
voy a explicar la realidad en realidad
Okay esto que está acá sí pasa al
navegador hasta acá está bien pero
básicamente el navegador lo que hace
después es crear algo que llamamos dom
que es básicamente un árbol que ya lo
vimos antes que es un objeto que
contiene todas las propiedades de html
no que es el famoso arbolito tenemos la
etiqueta Head la etiqueta Body adentro
de Body tenemos varias etiquetas más no
Entonces esto sería el arbolito El dom
esto que está acá lo vamos a sacar y así
es como veríamos nosotros el resultado
final Entonces tenemos el código pasa al
Google Chrome el Google Chrome crea este
árbol con toda la estructura y ese
objeto completo el document object model
que después en javascript utilizamos
para hacer muchas cosas y eso es lo que
termina haciendo que nosotros después
veamos el la página web final hermosa
pero para las tecnologías accesibles
funciona diferente una persona que es
Ciega por ejemplo no lo utiliza así lo
que hace es básicamente el navegador no
solamente crea este dom también crea
otro dom que es exactamente una copia
igual de el dom original pero que este
dom lo que hace es pasa por tecnologías
accesibles y después el usuario que con
que utiliza tecnologías accesibles puede
acceder al contenido entonces este es el
flujo real de una página web el código
html lo interpreta el navegador el
navegador crea el dom Okay después Crea
una copia del dom y este dom es el que
vemos Nosotros los comunes no sé si sea
correcta la palabra comunes Perdón me
estoy metiendo en todo este mundo recién
y después las personas con una
discapacidad visual por ejemplo tienen
la copia está hecha especialmente para
ser leída por estos eh lectores de
pantalla o tecnologías de accesibilidad
y esas tecnologías de accesibilidad son
la que le indica al usuario por ejemplo
le dice estás en un lugar de navegación
estás acá estás allá y esto es lo que
veen los usuarios finales Entonces
nosotros una persona promedio utiliza
esta forma pero la persona que tiene
activad las opciones de accesibilidad
utiliza esta otra forma entonces este es
el flujo para nosotros Este es el flujo
para las personas con discapacidad
entendiendo esto sabemos que si existe
un doble dom y demás y una tecnología lo
que tenemos que hacer es entender Cómo
crear un buen código html para que lo
puedan Navegar las personas que utilizan
esta versión que somos las versas PR
medio que no tenemos ningún tipo de
discapacidad y las personas que utilizan
esta versión que es la versión para
personas que les cuesta ver o tienen
algún tipo de discapacidad lo que habla
la accesibilidad es crear un html
principalmente o Okay también algunas
cosas de SS pero es crear webs que se
enfocan principalmente acá en las que
cuando se cree este apartado para
personas que tienen alguna discapacidad
se pueda entender porque los elementos
tienen un nombre están descritos se
define su funcionalidad y muchos cosas
más que eso es lo que vamos a ver ahora
para arrancar Voy a crear la carpeta de
accesibilidad lo primero que voy a hacer
es activar Ok la tecnología accesible El
lector de pantalla el el voiceover para
eso
apretamos control Para activarlo tenemos
que usar la teclita de Windows control y
enter y ahí se activa narrador diogo
aceptar botón narrador sendo del
narrador se pone rep Pesado ya lo sé a
veces vamos a instalar otro porque
fíjense que yo le doy enter y escribo
algo
perdón pero necesito hacer esto b
c Bueno yo lo voy a Desactivar Windows
control enter de vuelta ya está se fue
por qué lo Desactivar porque para Chrome
hay una específica este narrador es
bueno para usar Windows como tal Pero
uno que es mejor es una extensión vamos
a extensiones y visitar Chrome web Store
abr pantalla completa y acá vamos a
buscar el Chrome box el Chrome Box
básicamente este que está acá es una
extensión de Google Chrome que es es
parecida a esa pero es especial para
Chrome accesibilidad web ven ahí está
fíjense Qué pasa si yo por ejemplo vengo
acá y escribo en esta página web pongo
por ejemplo un enlace accesibilidad web
esto que está acá dice menú si yo le doy
click menú menú menú las personas que
son ciegas van a ver que dice menú Cómo
hago si yo estuviera ciego Cómo puedo
crear una página web para que este
lector pueda ayudarme a mí que soy ciego
a navegar por la página Cómo jor aca lo
puedo hacer Bueno yo voy a tener abierto
esto que está acá que que es de
extensiones para poder activar y
desactivarla Entonces ven activamos y
desactivamos porque si no nos vamos a
volver locos a lo que voy es que primero
texto alternativo si yo por ejemplo
tengo una imagen vamos a cargar una
imagen acá imagen source copiar
dirección de imagen la pego acá cierro
Acá tengo mi imagen bien
img 100% la imagen va a ser del tamaño
total Vamos a darle un más chiquita 300
píxeles y a la bosta voy a activar el
lector accesibilidad we pestaña con
barra image es una imagen con barra
image o sea si una persona ve la imagen
en realidad no la ve pero lo que digo es
que cuando intente desplazarse hacia la
imagen es lo más importante que tenga
una etiqueta alt y acá podríamos por
ejemplo dalto posando rechero
actualizamos cuando cliquen en la
imagen fachero entendés entonces lo que
está haciendo esto es permitir que la
persona que es sorda sepa que hay una
imagen te da alto posando refachera lo
mismo por ejemplo con los enlaces si yo
por ejemplo pongo un enlace vamos a
poner un a tengo un enlace a si yo acá
por ejemplo voy a hacer que la a tenga
un H ref eh Index html por ejemplo y acá
le voy a poner ir al menú accesibilidad
web ir al menú ir al menú por eso es
importante que ustedes lo tengan Y si el
enlace no dice no no Describe qué es lo
que hace en este caso por ejemplo dice
ir al menú ir al menú Es lo que dice
pero si el enlace dijera home home eso
diría home pero no sé que joraca
significa home ahora si yo acá por
ejemplo pongo le voy a poner un title y
acá en el title voy a poner algo así
como ir a la página web principal No
fíjense ahora qué pasa
enlace nada pero si le pongo un alt
fíjense Qué pasa
ahora enlace tampoco pasa nada Cuál es
el atributo que tengo que utilizar para
hacer que me permita leerlo bueno se
llama Area Label y acá en el área Label
vamos a poner enlace que redirige a la
web principal por ejemplo Entonces
fíjense esto enlace que redirige a la
web principal es buenísimo si yo por
ejemplo creo una sección de navegación
vamos a hacerlo vamos a crear una
sección de navegación vamos a poner por
ejemplo
un li no más vamos a hacer una cosa
vamos a poner un div y adentro va a
tener ul que adentro va a tener un li
por ejemplo no entonces venimos acá y
ponemos así tal cual fíjense esto activo
la extensión lista con cuatro elementos
ahora no me la reconoció como una barra
de navegación si yo quiero que me lo
reconozca como una sección de navegación
voy a ponerle nav y fíjense ahora
navegación lista con cuatro elementos
reconoce me reconoce que es una barra de
navegación se entiende eso me lo
reconoce si yo acá por ejemplo pongo un
no sé s vamos a poner un párrafo y acá
voy a poner un spam y este spam voy a
poner un título no y acá simplemente
esto lo pongo en grande fíjense esto
pestaña
título Pero esto tiene que ser un
encabezado voy a poner un h1 y voy a
probar solo de vuelta título a ver qué
pasa título título un título uno si yo
acá le pusiera un h2 título título dos
título 1 es h1 título 2 es h2 esto se
reconoce yo por ejemplo quiero a esto
describirlo vamos de vuelta a
Area Label título principal no entonces
acá pongo por ejemplo dalto es crack y
observen esto le doy cli acá
tp otra cosa importante es el tema de
los formularios si yo por ejemplo voy a
correr vamos a donde dice F set y
Legends no vamos a correr clases html
todo entero vamos a correr voy a abrir
el texa primero voy a abrir esto y
quiero ver qué pasa Nombre nombre
completo edita Tex
escribimos entrada de coroico correo
electrónico bien eso porque pusimos el
type email le doy Tab área de texto área
de texto escribo ya está vamos a venir a
fset y Legends que estos son los últimos
creo que utilizamos Este es mejor este
formulario vamos a ver qué
pasa formulario de contacto nombre
completo nombre completo es el Label me
lo está mencionando acá puedo escribir
le doy
t@gmail.com
entrada de correo electrónico acá pongo
mi correo continúo as el asunto de tu
mensaje el asunto de tu mensaje porque
pusimos unh holder continuamos tipo de
usuario seguidor barra cuadro combinado
uno de tres cuadro combinado uno de tres
AC por ejemplo lo que tiene que hacer es
seleccionar el tipo de usuario entonces
acá vamos a poner área Label y vamos a
poner selecciona el tipo de usuario y
ahí si venimos acá y volvemos a
activarla vamos a ver qué pasa cuando
volvemos a apretar ahí selecciona el
tipo de usuario y el el la persona se
puede mover de esta forma ven miren un
de TR empresa dos de TR otros tres de TR
empresa dos de TR listo dejo este
continuo acá va datal no sé por qué sin
creerlo cerré mal acá lo mismo acá el
usero no sabe qué escribir qué hacemos
en este input vamos a poner otro área
Label y vamos a definir escribe quién te
refirió por ejemplo entonces volvemos
escribe quién te refirió Ya está listo
lo logramos otra cosa que es importante
que si se fijan esto que está acá los
botones tienen que ser botones los
campos tienen que ser Campos etcétera
Porque si yo por ejemplo acá hago que en
vez de acá ha un botón por ejemplo en
vez de que haya un buton no en vez de
que haya un buton yo voy a poner Hola si
yo por ejemplo acá le doy la tecla Tab
va al elemento Hola Pero si yo acá por
ejemplo pusiera una a y esto que está
acá solamente fuera un botón Button y le
diera el estilo de un botón si yo acá
pongo la tecla Tab no va a ir acá y la
persona que no ve nunca va a poder darle
clic al botón este que está acá una
página web debería poder ser navegable
solo con la tecla Tab es decir todo lo
que se puede hacer con el Mouse y con el
click debería poder hacerse con la tecla
Tab y con el enter ese es el principio
principio más básico de todo así como
todo lo que puedes hacer con el Mouse y
con el botón de click en una página
deberías poder hacerlo también con la
tecla Tab y con la tecla enter Tenemos
también las etiquetas role que son para
dar un rol si yo por ejemplo no vamos a
hacer un ejemplo muy básico voy a cerrar
esto voy a abrir de vuelta la
accesibilidad estamos vamos a correr
Solamente vamos a correr solamente esta
que está acá si yo por ejemplo acá
supónganse que creo un div no nosotros
tenemos un atributo nativo para hacer un
acordeón por ejemplo details Okay y
después tenemos el summary tienes alguna
duda Acá está tu respuesta Pero qué pasa
si yo por ejemplo tengo algo que no
tiene porque esto ya el navegador
entiende que esto es una especie de
acordeón o es un menú desplegable Okay
no es un menú como tal pero es
básicamente un acordeón es algo que se
despliega Yo vengo acá y tengo esto subo
y tengo esto ya el navegador sabe para
qué Para qué se usa entiende la
finalidad Pero qué pasa si de repente
esto tuviera una esto no tuviera
funcionalidad nativa cómo lo tendría que
hacer y lo tendría que hacer por ejemplo
con un div y acá con otro elemento con
otro div Entonces esto con javascript lo
programo para que se abre y se cierre se
abre y se cierre pero no hace falta
porque esto ya trae ya trae Natividad
Pero si yo por ejemplo Quisiera hacer un
slider yo tengo acá un slider ID slider
Entonces yo lo que hago acá es tener
imágenes voy a poner por ejemplo esta
imagen y acá tengo un slider con
imágenes qué va a pasar acá bueno acá
tenemos que indicar que este ID va a
tener un rol o sea cuál va a ser el rol
de este ID en la página bueno el rol va
a ser slider por qué Porque va a ser un
slider que te va a ir deslizando
imágenes va a tener muchas imágenes y
vas a poder deslizar si quieren ver
cuáles son todos los rols buscan role
html tengo a la página de acá que es y
ara rols acá vamos a poder ver todos los
roles y cuáles son las etiquetas
correspondientes Por ejemplo si tenemos
cell cell significa célula O sea que el
rol de Zelda lo podemos definir con esta
etiqueta la etiqueta artículo tiene el
rol article para eso no vamos a crear un
div y darle el role artículo le vamos a
crear con esta etiqueta si por ejemplo
queremos crear una definición usamos
esta etiqueta FN que es para
definiciones si yo por ejemplo tengo un
heading yo no puedo agarrar un div o un
elemento y ponerle role heading Cuál va
a ser tu rol vas a hacer un encabezado
no porque estas etiquetas que están acá
se encargan de definir encabezados
entonces van primero si yo por ejemplo
tengo un rol de lista y ya tengo
elementos como ul y ol que se encargan
de construirnos esas listas para qué voy
a crear un div y utilizar list no
utilizo estos elementos entonces acá
pueden ver Cuáles son los elementos
justamente que no tienen ningún tipo de
etiqueta especial no y acá tenemos por
ejemplo acá tenemos el rol slider cuándo
debería utilizar un slider bueno
entramos acá y acá les va a decir mira
el slider define un input donde el
usuario selecciona un valor de un
determinado Rango área función
deslizante como el que tenemos recién es
un área que le está diciendo a la página
Okay al navegador que este elemento que
creamos acá va a tener una función de
slider va a tener una función deslizante
porque Su contenido se va a deslizar
tenemos un área de sugerencia ves el
área sugestion Si yo por ejemplo creo
ven acá tenemos un spam y quiero sugerir
algo voy a hacer una sugerencia utilizo
el rol sugestion entonces todas estas
cosas son importantes de hacer por eso
les voy a recomendar dos cosas primero
véanse este video que es el que
descargamos hace un rato y básicamente
es un video acerca de cómo hacer páginas
web inclusivas en realidad esto es un
video que habla de páginas web
accesibles y es una pequeña guía sobre
Cómo construir webs accesibles falta un
montón pero si quieren chequear que su
web se accesible le dan botón derecho
inspeccionar y acá van a tener un
apartado que dice lighthouse si le dan
en analizar page load acá básicamente la
página va a estar haciendo un análisis
interno que lo que va a hacer esto es
definir todo en este caso tiene un 100%
de performance acá me dice los tiempos
de carga todo y más abajo hay un
apartado de accesibilidad y este Esta es
la puntuación que Google Chrome nos da a
nuestra página acá nos dice por ejemplo
acá tenemos un div que es un slider
algunos Area Rolls Como por ejemplo
slide requieren atributos extra Area
para poder definirlo porque por ejemplo
esto es un slider Bueno sí sé que es
algo que se desliza Pero y cuál es el
elemento actual bueno para eso ponemos
un área value Now no entonces acá por
ejemplo tengo imagen uno por ejemplo
tenemos que definir el área value min
que sería por ejemplo imagen ahora
Estamos en la imagen tres la imagen mina
es la imagen uno y el área value Max que
sería la imagen s Por ejemplo si
actualizamos la página y volvemos a
cargarla vamos a hacer exactamente lo
mismo de vuelta ahora vamos acá la House
analizar la página vamos a ver qué pasa
y ahora bajamos un poquito más y acá me
dice que tiene valores No válidos por
qué porque esto lo que me está pidiendo
es que ponga elemento del uno al 10 qué
es esto imagen un imagen dos imagen 7 No
acá poneme solamente el número y a la
Eso es lo que me está pidiendo
Entonces esto una teoría ahora actualizo
vamos a ver de vuelta a ver vamos a
probar Cómo está ahora vamos a
analizarlo a ver si funciona bajo y
ahora sí acaba de mejorar la
accesibilidad pero ahora está en 84
puntos o sea Todavía siguen faltando
cosas acá me dice que el elemento html
no tiene un atributo lang el atributo
lang como ya sabemos les dije que Define
el idioma en este caso el idioma va a
ser español después acá me dice también
en este caso como me está diciendo que
coincide me está diciendo que Ey acá ya
dice home ya no es necesario que pongas
este área Label porque se entiende
entonces podemos sacar esto por ejemplo
y ya debería estar solucionado Entonces
si ahora venimos y actualizamos chequear
a ver cómo está Le damos el lighthouse
analizamos la página de vuelta vamos a
ver qué pasa y ahora la accesibilidad es
del 100% por qué porque tenemos todo
perfecto Esta es la forma que tenemos de
hacer página we Igualmente Hay un montón
de cosas que acá tenemos fíjense las
cosas manuales acá tenemos que ver por
ejemplo que las cosas que son
interactivas o sea con las que vamos a
interactuar tienen que ser focusa bles
esto que está acá también bueno Y acá
básicamente nos muestra un montón de
cosas okay Que básicamente el orden
visual tiene que seguir el orden del dom
y estas son básicamente cosas que
normalmente no son automáticas y que se
viene heram heramientas para hacerlo eh
son cosas que tenemos que hacer de forma
manual Entonces mi consejo es busquen
accesibilidad web acá en internet y van
a encontrar un montón de cosas o de
contenido sobre accesibilidad web pero
la verdad que lo importante es que
entiendan el concepto y no importa si no
lo hacen 100% perfecto lo importante es
que al menos tengan las cosas básicas
que por ejemplo es que todos los
elementos que van a interactuar o en los
que se puede hacer clic tengan yo por
ejemplo puedo hacer clic en una debería
también poder seleccionarlo y darle clic
se entiende seleccionarlo y darle enter
Tab enter Tab enter no hay problema pero
por ejemplo este elemento no no necesito
darle click ni nada en interactuar
Entonces no necesito focusear lo ni
hacer nada de eso entonces Esas son las
cosas que tenemos que hacer tenemos que
hacer que todos los elementos puedan ser
navegables que todos los elementos
puedan ser focusa bles si necesitan
focusear acá por ejemplo el usuario
puede venir y darle acá y fíjense que ya
se le posiciona le da Tab y puede venir
y escribir le da Tab y escribe le da Tab
y continúa ven puede bajar arriba subir
le da Tab escribe viene baja y acá ya no
puede darle al botón porque Por más que
agarremos una y lo personalicemos queda
mal Qué tengo que hacer esto tiene que
ser un boton o un input submit y acá le
ponemos enviar por ejemplo Entonces está
acá baja deja un mensaje baja y el tipo
le da enviar y el formulario se envía
ven Esa es la clave la forma si el esto
no el usu la persona no pudiera hacer
esto y no pudiera rellenar un simple
formulario Entonces estamos al horno y
la página deja de ser accesible que
tenga las cosas básicas con el tiempo
cuando arranquen a intentar hacerlo y
utilicen esta extensión que venimos
utilizando y lo prueben y hagan pruebas
con esta extensión para ver si realmente
su página funciona para personas que son
ciegas Y ustedes puedan agarrar ustedes
puedan ponerse una venda hagan este
ejercicio cuando desarrollan componentes
hagan el ejercicio final de ponerse una
venda en los ojos y activar esta
extensión y ver qué pasa si si pueden
Navegar y pueden recorrer su página y
usarla bien completamente a ciegas y si
lo pueden hacer Felicidades su página es
accesible si no muchachos no se
preocupen que de a poquito lo van a ir
aprendiendo yo estuve años enteros
escribiendo código que era cero
accesible cero y estuve muy siempre lo
que hacía era creaba webs y después las
volvía accesibles ahora ya las construyo
de entrada siendo accesibles pero por la
práctica y experiencia ustedes primero
enfóquense en lo más importante que es
la funcionalidad la forma la estructura
el estilo Y mientras lo hacen de paso
solitos se van a ir acordando de agregar
una cosa agregar otra agregar los entren
por ejemplo a Google a YouTube y vean
Cómo usan por ejemplo los roles vean
Cómo usan por ejemplo los Area labels
los Area hidden etcétera vean aprendan Y
de esa forma lo van a hacer bien si no
repito ni se preocupen muchachos porque
en la mayoría de los casos no es
necesario tan en extremo con algo tan
básico Como por ejemplo hacer que sea
navegable con el Tab y con el enter
hacer que todo pueda ser clickable hacer
que las imágenes tengan una descripción
es decir un alt ya es más que suficiente
porque es más que lo que el 90 por de
webs de hoy en día hacen pero nunca está
adás seguir aprendiendo y seguir
capacitándose así que ahora sí gente
vamos a la sección de css intermedio
vamos a olvidarnos un poquito Ahora de
esto de la accesibilidad vamos a
desarrollar componentes y crear cosas
dejando de lado la accesibil exibilidad
por un tiempito porque nos vamos a
enfocar más en crear componentes en el
estilo la lógica después cuando creemos
componentes de verdad Ahí sí vamos a
volver a la accesibilidad porque vamos a
estar más curtidos no se van a estar
preocupando por si funciona esto por si
porque no entiendo esta propiedad Porque
no entiendo esto y además por porque
encima no entiendo cómo es esto del área
Label no entiendo nada no no no vamos a
enfocarnos primero en las
funcionalidades Y a lo último cuando
arranquemos a crear componentes Ahí
vamos a enfocarnos en Cómo funcionan
esto de los áreas de los roles de los
sal etcétera por ahora vamos a
enfocarnos más en lo que venimos
haciendo desde el principio del curso
que es enseñar elementos enseñar sus
propiedades de estructura y demás Así
que ahora sí vamos con el apartado de
css que es muy importante Okay que es el
de css intermedio es lo que viene antes
de flexbox y antes de gr Así que gente
Felicidades Si llegaron hasta acá ya
están en un nivel intermedio del curso
por más que todavía falte mucho más de
la mitad los felicito Ahora sí vamos con
la sección intermedia de css arranquemos
despreocupate igual si no entendiste
esto de la accesibilidad te puedo
asegurar que es un tema super complejo
Entonces si no lo entendiste relajate
podés continuar con el curso no hace
falta que te vuelvas loco ya lo
entender bueno Bienvenidos a esta
sección intermedia de css en esta
sección vamos a ver selectores avanzados
herencia cascada especificidad pseudo
elementos pseudoclases un montón de
cosas Sí también vamos a ver object fit
y position static relative fixed
etcétera vamos a ver overflow y text
overflow vamos a ver sobre scroll vamos
a ver sobre text WAP sobre cursor sobre
overline sobre m vamos a ver varias
cosas interesantes vamos a ver todas
esas esas cosas que aportan un montón de
valor y un montón de detalle a css para
estar listos para ir al último apartado
y la última sección que son los
apartados que son tres puntualmente que
son los de flexbox los de grid y los de
animaciones que son tres apartados que
nos van a permitir estructurar y armar
cualquier cosa que querramos ahora vamos
a arrancar con el tema de los selectores
avanzados ccs básicamente funciona a
través de agarrar un elemento o
seleccionar algo y darle una propiedad
para cambiar o sobreescribir sus
propiedades hasta está todo bien esto ya
lo sabemos pero me gustaría que lo
veamos de una forma más interesante
todavía en ccs hay dos cosas que son las
más importantes para hacer lo que
querramos con ccs la primer cosa que
tenemos que saber hacer es saber cómo
darle estilo a un elemento es decir
conocer sus propiedades el color el
background eh las posiciones los tamaños
las tipo todas las formas en las que
tenemos de Modificar un elemento las
tenemos que aprender ese es el apartado
de propiedades las propiedades
justamente nos permiten esto no agarrar
y modificar cada una de las
características de un elemento las
características que sobre todo son
visibles pero el la otra parte de C s
consiste en saber seleccionar eso que
queremos modificar es decir quiero
seleccionar por ejemplo a este elemento
Pero tenemos muchísimas formas en las
que podíamos tener problemas si no
sabemos seleccionar Por ejemplo si yo
les dijera a ustedes quiero que
seleccionen a un elemento hijo cómo
harían eso quiero que seleccionen a un
elemento solamente si contiene otro
elemento por ejemplo quiero editar un
div solamente si adentro tiene un
elemento p o quiero editar un p que
tenga de hermano un h3 por ejemplo o
quiero editar un elemento en un estado
en específico por ejemplo quiero hacer
que si yo paso el mouse por encima de un
elemento el estilo de ese elemento
cambie esas son formas en las que
podemos resolver un montón de problemas
que nos pueden surgir cuando trabajamos
con css que si lo hacemos de otra forma
nos volvemos locos que antes decía con
javascript pero ahora si sabemos
seleccionar elementos correctamente
podemos darle estilo a lo que querramos
podemos poner condiciones para dar
estilos podemos hacer que encontrar
relaciones entre elementos y solamente
darle eh digamos un estilo si cumple una
condición Hay un montón de cosas que
podemos hacer entonces esa es la otra
parte de ccs es saber la mejor forma de
seleccionar elementos cuándo De qué
forma en qué contexto En qué estados
seleccionar absolutamente todo para
darle estilo a los elementos Entonces
ahora vamos a empezar a introducirnos en
esa en esa parte más de de seleccionar
por estado seleccionar a los hermanos
seleccionar con condiciones todo ese
apartado lo vamos a ver ahora para eso
tenemos que ver principalmente
selectores avanzados tenemos que
entender de herencia de cascada y de
especificidad tenemos que conocer las
pseudoclases y también los pseudo
elementos ya con eso habremos abarcado
todas las formas de seleccionar
elementos y créanme que es super
interesante Así que ahora lo que vamos a
ver justamente es esto de los selectores
avanzados Vamos a aprender a seleccionar
de forma avanzada yo acá me creé esta
mini página que básicamente es eh la
misma la misma H que habíamos hecho en
el apartado anterior de selectores solo
que ahora después del h1 agregué un
párrafo después de la lista agregué un
h2 y otro párrafo Entonces ahora vamos a
jugar un poquito con estos estilos por
si no recuerdan acá solamente agarramos
el L y le dimos color gris y a la clase
ingrediente faltante le dimos red y al
ID ingrediente secreto le dimos Blue Eso
es todo lo que hicimos por ahora vamos a
sacar Todos los estilos y ahora sí vamos
a arrancar de vuelta a trabajar para
arrancar es interesante una cosa acopada
y es que podemos dar estilo por atributo
sí el primer selector que vamos a ver es
el selector de atributos vamos a dar
estilo a un elemento En caso de que
contenga un atributo o ese atributo
tenga un valor definido Por ejemplo yo
voy a poner un imagen source vamos a
agarrar una imagen cualquiera me voy a
descargar esta imagen alto. png la voy a
guardar en la misma carpeta que la puse
avanzado pero en realidad Debería ser
selectores avanzados no importa y le voy
a llamar dalto png si guardo acá me
aparece la imagen perfecto hasta acá
está todo bien Esto que está acá vamos a
sacarlo porque por ahora es innecesario
Cómo puedo hacer para seleccionar y
modificar una imagen en caso de que
tenga el source igual a alto.png bueno
para eso vamos a seleccionar la imagen y
si yo básicamente le doy un estilo Como
por ejemplo Wi 100% ahí la imagen ocupa
todo el ancho No perfecto Cómo podemos
darle un estilo solamente en caso de que
tenga este atributo bueno para eso
ponemos los corchetes Okay que esto que
están acá es el signo de corchet voy a
hacer un pequeño zoom este que está acá
es el signo de corchetes y acá voy a
poner el atributo en este caso el
atributo es src de source y lo pongo
igual la misma sintaxis que en html en
este caso es dal alto.png y ahí si yo
por ejemplo le doy un wiet 100%
actualizo y funciona por qué porque
estoy seleccionando a la imagen fíjense
que acá me muestra qué es lo que estoy
seleccionando estoy seleccionando a
todas las imágenes que tengan
exactamente el atributo source dal alto.
png de hecho Cómo puedo hacer para
seleccionar imágenes cuyo atributo
source terminan en punto png bueno para
eso le damos en el signo del dólar este
que está acá actualizo y ahora me sigue
funcionando Por qué Porque el signo del
dólar le dice ey fíjense Acá está acá
podemos ver exactamente lo que está
pasando y está lo que está sucediendo es
vamos a seleccionar a una imagen que
tenga un source que arranque con algo y
termine con png eso es lo que hace este
signo del dólar básicamente le dice dice
puede arrancar con algo Pero tiene que
terminar con el signo dólar es eso
termina con entonces acá estamos
seleccionando las imágenes Okay que
tienen el atributo source y el valor del
atributo termina con png puede ser dalto
png Eduardo png Pepito png Entonces
ahora le estamos dando solamente un
estilo a las imágenes png Eso es todo
ahora si queremos darle un estilo a las
imágenes que arrancan con algo cómo
hacemos yo quiero hacer que arranque con
dalto por ejemplo ahí ya no me lo da el
estilo no porque este no es signo para
arrancar para arrancar usamos el
circunflejo lo pueden buscar en Google y
lo copian y lo pegan porque yo siempre
hago eso nunca lo lo busco directamente
actualizo y ahora me vuelve a funcionar
porque este signo le está diciendo okay
tiene que ser una imagen del atributo
source que arranca con dalto y después
sigue con otra cosa fíjense que antes
los tres puntos estaban al principio ah
Están al final los tres puntos
significan hay algo más entonces arranca
con dalto y continúa con lo que sea y el
signo del dólar es termina con Entonces
en este caso es circunflejo es arranca
con y el dólar o el signo del de peso es
termina con esas son las funcionalidades
o las selecciones por atributo ya
actualizo no funciona porque esto tiene
que ser un valor Exacto Ven ahora le do
el valor exacto y ahí funciona de vuelta
acá Así se selecciona por atributo
después tenemos otra forma muy
interesante de seleccionar que es
seleccionar de forma descendente Y esa
forma tiene un nombre que se llaman
selectores descendientes Por ejemplo si
yo acá fuera pongo un li suelto de la
nada y le voy a decir Jaja XD
ingrediente suelto este que está acá es
literalmente un ingrediente suelto si yo
vengo acá y le doy a los le un color red
por ejemplo se me va a estilizar este
también pero si yo quiero decirle no no
no no no quiero darle un color red
solamente a los le que están adentro de
un ul Cómo hago Bueno voy a decir ul Li
de esta forma voy a buscar un li que
esté adentro de un ul fíjense acá me
está mostrando justamente eso estamos
dandole estilos a este Li que está
adentro de unul ahora este no está de
color rojo porque no cumple la condición
el le tiene que estar adentro de un ul
Esa es la condición vamos a esto que
está acá chicar lo y adentro de esto que
está acá vamos a poner un span Okay o
más fácil un strong que acá sea
condensada este caso es leche condensada
es uno de los ingredientes leche
condensada vamos a ponerlo en minúscula
porque es medio raro leche condensada lo
puse en un strong si yo quiero darle
estilo a este strong qué hago vengo acá
y pongo strong Entonces esto que está
acá funciona por qué porque le estoy
dando un estilo a un strong que esté
adent adentro de un L y efectivamente
este strong está adentro de un l Pero
qué pasaría si yo quisiera decirle
quiero darle un estilo a un hijo directo
quiero que el estilo lo tenga un hijo
que sea directamente un hijo porque
strong es el nieto de huele no le
estamos diciendo el strong tiene que ser
hijo de helele le estamos diciendo el
strong tiene que estar adentro de un
huele es diferente o sea le estamos
diciendo el strong tiene que estar
adentro de helele puede ser cualquier
lado el strong Mientras esté adentro de
huele ya está mientras que
tranquilamente podría ser un elemento
acá otro acá otro acá Este que está acá
es el ul Okay el que está fuera de todo
y acá dentro adentro de tres elementos
más está el strong y esto me va a
funcionar pero yo quiero específicamente
que el strong sea un hijo directo no un
nieto ni un tataranieto yo quiero que
esté adentro no adentro de otro elemento
que está dentro no no adentro
directamente bueno Esto no estaría
cumpliendo la condición porque strong no
es hijo directo de huele es hijo directo
de le y le es hijo de w o sea que le sí
es un hijo directo de W pero strong es
hijo directo de del I no es un hijo
directo de huele porque está adentro del
I Okay y después está dentro de huele
cómo hacemos para darle un estilo a un
hijo directo bueno para eso usamos este
signo que significa strong tiene que ser
hijo de fíjense que acá de hecho estamos
especificando que tiene que ser este el
orden strong tiene que estar a dentro de
ul si no no funciona mientras que de la
otra forma había tres puntitos ven
fíjense que hay tres puntitos Por qué
Porque puede haber algo más strong puede
estar adentro de otro elemento que está
dentro de otro elemento que está dentro
de huele Pero de esta forma no de esta
esta forma es tiene que estar Sí o sí
como hijo tiene que estar adentro de u y
de ningún otro elemento más Solamente
adentro del l esto que está acá lo
actualizo deja de tener este color
porque no funciona si yo al strong Lo
sacara de acá okay fíjense Lo sacara de
acá y lo pusiera lo puedo poner arriba
de todo no ahora strong está adentro de
huele entonces por eso funciona Pero si
yo de vuelta lo pusiera dentro de un div
por ejemplo Ya deja de funcionar porque
ya no sería hijo directo de huele sería
hijo directo de div sería como un nieto
de huele Entonces nada es interesante
Cómo funciona esto no de los hijos
directos etcétera vamos a dejarlo acá en
este caso Vamos a ponerle un em Ahora sí
Y acá vamos a decir em pu tiene que ser
hijo directo de ul no en este caso le
vamos a darli y ahora sí tiene que ser
un hijo directo de Li que es lo que es
es un hijo directo de Li Cómo ponemos
comentarios en css simple ponemos dos
barritas y adentro ponemos este signo y
todo lo que escribamos acá dentro va a
ser un comentario ya ya vimos Cómo hacer
un comentario en html pero por las dudas
lo recuerdo y es básicamente un código
que el navegador no le da importancia
solamente es para nosotros los
desarrolladores que podamos leer en este
caso vamos a poner selector por atributo
para dejarlo bien marcado acá vamos a
poner Select selector por hijo directo y
ahí ya más o menos vamos teniendo como
una noción no selector por hijo directo
selector por atributo vamos a seguir
viendo De qué forma podemos seleccionar
vamos a ver ahora el
selector
adyacente Cómo funciona esto de los
selectores adyacentes bueno básicamente
quiero seleccionar el elemento que está
a continuación mío no el elemento que
está adentro o el que está por fuera no
no el elemento que está está quiero
seleccionar a mi hermano al próximo
elemento si yo por ejemplo quiero
seleccionar este Li que está acá eh lo
vamos a sacar Ah no vamos a hacer una
cosa Vamos a darle esto también así
tenemos descendiente a los l que están
adentro de un L y les vamos a dar un
color tienen un color gris 666 y ahora
sí Entonces tenemos tres detectores
diferentes Bueno ahora vamos a
seleccionar
adyacentes Yo quiero seleccionar quiero
seleccionar un p y voy a seleccionar a
un p que le sigue a un h1 cómo puedo
hacer eso Si yo por ejemplo acá pongo h1
y acá pongo más p vengo y acá voy a
poner por ejemplo color Blue Y fíjense
qué es lo que está estilizando c se está
estilizando el p Por qué Porque estoy
diciéndole voy a darle estilo a un p que
esté después de un h1 el estilo se lo
aplicamos al p pero solo se va a aplicar
este estilo al p si viene después de un
h1 yo ahora pongo al revés pongo p y acá
pongo h1 esto que está acá no funciona
porque el h1 no viene después del P
primero viene el p y después viene el h1
y después tenemos el otro que es el
selector de hermanos generales vamos a
ver qué pasa si ponemos otro párrafo voy
a venir acá y pegar y este que está acá
lo voy a cortar Ahí está bueno si
nosotros estamos diciéndole que a los
párrafos que le sigan a un h1 se les va
a dar un color Blu Este es un selector
adyacente Por qué Porque este es el
selector de de hermano adyacente Por qué
Porque es el elemento que le sigue
inmediatamente al anterior o sea solo se
lo va a dar al primer p que viene
después de un h1 en cambio con el
selector de hermanos generales si
actualizamos vamos a ver que a este
también se le aplica el estilo por qué
porque acá le vamos a dar a todos los p
que vengan después de un h1 es decir en
este caso acá Hay un h1 pero el selector
de hermano adyacente le va a dar estilo
solamente al primer p Por qué Porque es
un p que sigue de un h1 pero este p no
sigue inmediatamente después de un h1
sigue inmediatamente después de este
otro p Entonces si queremos darle estilo
a todos los p que vengan después de un
h1 sin importar si viene un elemento
después dos después tres después O sea
si Acá hay otro elemento ven se Acá hay
cualquier otro elemento no importa Por
qué Porque lo que hacemos con el eh
selector de hermanos generales
seleccionamos a todos los p que vengan
después O que tengan de hermano antes a
un h1 o sea es lo mismo Solo que fíjense
que de esta forma solo se le da al
primero y de esta forma se le da a todos
los que sigan porque en este caso le
estamos diciendo Ey más atrás tuyo Tenés
algún h1 que sea un hermano si la
respuesta es sí le damos color Blu
mientras que este funciona con una
lógica diferente este es he el elemento
que viene exactamente antes que el tuyo
es un h1 sí Entonces te lo damos por eso
uno es de hermano adyacente o sea le
estamos dando el estilo a un elemento
que sigue al instante Mientras que el
otro es de hermanos generales le damos
mientras sea tu hermano y venga después
perfecto si p es hermano de h1 y p viene
después de h1 ya está mientras que acá
es solamente si p le sigue
instantáneamente al h1 Esa es la
diferencia buos son los más comunes
obviamente también podemos decirle
podemos agarar y decir bueno Esto lo
vamos a borrar no supongan que esto lo
borramos quiero darle estilo a a un p
que le siga un h1 que le sigue a un p
entonces actualizo y fíjense que se va a
estilizar el otro por qué porque le
estoy diciendo le quiero dar estilo
solamente a un p que le va a seguir a un
p que le va a seguir a un h1 Entonces
estamos dando estilo a un p que le sigue
a un p que le sigue a un h1 ven entonces
así podemos hacer una cadena infinita si
quiero puedo por ejemplo darle estilo al
ul Entonces ahora le voy a dar un estilo
al ul Ven Bueno ahora no se aplicó
Porque ya tiene eh un color acá los Li
pero le puedo dar por ejemplo un
background Red poner y se va a estilizar
por qué porque le estoy dando un
background Red a un l que le siga un p
que le siga un p que le siga un h1 ven
un l que le siga un p que le siga un p
que le sigue un h1 esa sería como la
lógica no que de lo que estamos
trabajando y lo mismo con el selector de
hijos podemos darle por ejemplo estilo a
un spam que está dentro de un m que está
dentro de un li entonces acá acá pueden
ver la jerarquía ven Estamos dándole
estilo justamente a esto a un spam que
está dentro de un m que está dentro del
l o sea es más a un spam que es hijo
directo de un m que a su vez es hijo
directo de un l esto por ejemplo se
puede usar para darle un vieron cuando
tenemos un ul que adentro tiene los Li
que adentro tiene los a Bueno le damos
estilo a un a que está es hijo directo
de un li que es hijo directo de un ul O
sea fíjense qué interesante Qué es lo
que está pasando acá estamos
seleccionando un p que sea el elemento
que le sigue a h1 que está dentro de una
a que es hijo directo de un li es hijo
directo de unl eh Nada medio un mareo
pero la verdad que es bastante bastante
gracioso y curioso Estas son las formas
más comunes que tenemos de seleccionar
elementos los tipos de selectores este
es selector de atributos perdón de hijo
directo y sel vector descendiente Estas
son las formas más comunes de
seleccionar y después tenemos para
seleccionar múltiples elementos como ya
lo vimos Yo quiero darle estilo a un h1
y a un p ponemos una coma Entonces yo le
doy por ejemplo color Brown marrón le
voy le voy a estar dando estilo a los p
y a los h1 por ejemplo Pero bueno hasta
acá nos quedamos porque tenemos que ver
el siguiente concepto Porque acá si se
fijan tenemos un problemita que le
estamos dando estilo un p y le estamos
diciendo que sea Brown pero acá antes
tenía un estilo azul Entonces por qué no
funcionó Por qué no no le está dando
estilo bueno acá hay un poquito de magia
Así que no vamos a darle pelota a esto
porque es bastante interesante lo que
sucede de trasfondo y para eso tenemos
que entender Cómo funciona la herencia
la cascada y la especificidad Así que
ahora sí vamos a continuar con el
siguiente apartado que va a ser cortito
Pero va a ser eh bastante necesario que
es el de herencia Así que
vamos Bueno ahora vamos a ver la
herencia Qué es un concepto que si
vieron el curso de python y después
vieron el curso de programación
orientado objetos de python ahí hay un
apartado que explicamos la herencia que
es un concepto que viene a funcionar
bastante igual solamente que para los
que ya conocen del tema básicamente la
herencia habla de que algunas
propiedades pueden heredarse y otras no
Eso es todo ahora si no sabes un joraca
lo que acabo de explicar y no entendiste
un forongor forongor con f forongor o
soraca uh soraca Me gusta más no se
entiende un soraca soraca Uh es
buenísima soraca nada para los que No
entendieron un soraca lo que acabo de
explicar básicamente la herencia es un
concepto Okay que habla de cómo si a
veces ustedes se ponen a pensar
seleccionamos un elemento le damos un
estilo y o casualidad ese estilo se
termina aplicando al hijo y no se
termina aplicando al elemento como tal
Yo acá por ejemplo tengo una estructura
muy simple Okay es un html que tiene
solamente un div y tiene un h1 y un p al
h1 yo por ejemplo vengo Y le doy h1
color red color red se pone red Yo vengo
al párrafo y le doy color Blue y se pone
blue pero qué pasa si yo por ejemplo
agarro el body y al Body le doy un color
Brown por ejemplo o casualidad los
elementos que están dentro adquieren un
color Brown le doy botón derecho
inspeccionar el estilo está al Body Qué
significa esto que si le damos un estilo
al Body lo que está dentro también se
pone de este color bueno Esto sucede por
una propiedad que eh tiene css que
justamente habla de la herencia que es
básicamente un concepto que nos dice que
muchas de las propiedades de css No a
veces cuando le damos a un elemento sus
hijos las heredan de tal forma que si yo
por ejemplo al Body le doy un color
Brown y un font family s serif por
ejemplo todos los elementos que tengan
Body no todos los elementos de Body van
a tener las propiedades que definimos
para Body porque se van a estar Ed dando
hasta que yo las cambie yo vengo al h1
por ejemplo y ahora al h1 le doy un
color red Ahora sí el h1 va a tener un
color Red porque se lo estoy cambiando
pero si se lo saco el h1 va a tener el
color que le definía el body porque el
h1 está heredando el color de Body
también en el div yo por ejemplo se lo
di al div okay fíjense Que si se lo doy
al div también funciona Porque el div es
padre de estos dos entonces acá si
escribo un texto No pasa nada porque
este texto ya no está dentro del div
Entonces ya no ya no tiene color Brown y
font family s serif pero si de vuelta se
lo doy al Body Ahora sí porque todos los
elementos pertenecen al Body vamos a
cambiarlo para que se entienda de vuelta
esta propiedad es bastante interesante y
la podemos trabajar en css es decir hay
muchas propiedades que lógicamente No se
heredan si yo por ejemplo al div le doy
un wid del 50% no significa que los
elementos también tengan un wid del 50%
el wid no se hereda Porque si sucediera
así sería imposible trabajar con s es
pero nosotros podemos modificar cómo
funciona por defecto el comportamiento
de la herencia una cosa igual que quiero
aclarar es que el color inicial de color
en realidad es Canvas text no es initial
pero bueno eso ya es algo Bastante
complejo Así que no voy a meter ustedes
hagan de cuenta que sí si yo vengo por
ejemplo al h1 y le digo color yo puedo
decirle vas a tener un color inherit que
significa vas a heredar el color init es
como vas a heredarlo este es el valor
por defecto que tiene la propiedad No si
nosotros no definimos un color para el
h1 el color por defecto va a ser inedit
porque lo va a estar heredando va a
decir Ey voy a buscar un elemento padre
que tenga un color Porque si yo por
ejemplo al Body le doy un color Blue
fíjense que el body adquiere un color
Blue No pero en este caso está el div
que tiene un color marrón yo le voy a
sacar entonces lo que hace el h1 es Okay
vamos a heredar el color vamos a buscar
una caja que esté arriba por ejemplo el
div Y si el div que es mi padre tiene un
color me pongo del color que tiene el
div si el div no tiene el color voy a
buscar un color más arriba y así vamos
buscando un div adentro de otro div
Entonces el h1 por defecto dice vamos a
heredar el color Okay el div tiene un
color si la respuesta es sí Y tiene un
color me pongo del color que dice mi
caja padre Entonces si div tiene un
color h1 va a heredar el color de div
ahora si div no tiene un color div va a
decir okay div tiene un color no Okay
voy a preguntar a un elemento que esté
más arriba en este caso es Body Body
tiene un color si la respuesta es sí se
va a poner del color del Body porque es
la caja que está más arriba y si el body
tampoco tiene color va a ponerse del
color que el navegador diga que es negro
Entonces el h1 va a heredar el color si
div tiene se pone lo que el div tenga si
el div no tiene va a buscar un elemento
superior en este caso es el body si
hubiera un elemento que envuelva a este
div lo buscaría en ese elemento que
envuelva al div Entonces eso básicamente
es el el concepto de la herencia no va
buscando elementos que estén cada vez
más arriba y la propiedad inil lo que
hace es eso intenta agarrarse de un
elemento superior que tenga esa
propiedad definida Y si la tiene a la
pero por ejemplo en este caso le
vamos a dar un wid del 50% pero el div
tiene un wid de 50% pero si quisiéramos
que el h1 herede esta propiedad a ahora
la está heredando por qué porque wid no
tiene por defecto la propiedad el valor
inedit porque el sería una locura Si
fuera así no cada vez cada elemento que
está dentro sería de la mitad de tamaño
de los que no tiene sentido si el div
tiene un wid definido y ese Wi desde 50%
entonces el Wi del h1 va a ser de 50%
porque va a estar heredando de la caja
que está más arriba si este no lo
tuviera pero el body tuviera un wid así
por ejemplo y en este caso no pasa nada
Por qué Porque el div sí tiene un Wi
definido el Wi aunque no le demos la
propiedad directamente tiene un wid
definido que es el wid del navegador
porque un wid al ser un elemento en
línea tiene un wid del 100% que de hecho
si le damos wid 100% No cambia nada
porque los elementos en bloque por
defecto tienen un wid 100% eso eso es lo
que yo quería que ustedes observen vamos
a dar un color Blue y acá le vamos a dar
en red para que se entienda lo que voy
en este caso no vamos aar inedit como
dije es la propiedad por defecto no que
traen varios Element varias propiedades
de css de muchos eh muchos elementos y
otros no como por ejemplo el como ya les
dije que en este caso por ejemplo para
los elementos de bloques el wid es del
100% y en los elementos en línea creo
que es fit content no sé pero creo que
es auto o fit content ahora Cómo podemos
hacer si yo por ejemplo quiero decir que
el h1 no tiene que heredar el color no
lo tiene que heredar cómo hago para
decir esto tenemos otro valor que es
justamente initial que en este caso lo
que estamos haciendo es decirle que va a
tomar el valor inicial que tenía Okay
básicamente es el el valor por defecto
que carga si no lo va a estar heredando
si yo por eemplo lo saco hereda si yo le
doy initial no lo hereda Por qué Porque
initial lo que está haciendo es decirle
Ey Si tuvieras un valor inicial si no
heredaras nada y tuvieras un valor
inicial Cuál es ese valor inicial Bueno
ese valor inicial heredo font family en
este caso también es inherit Okay si
actualizamos ven que no pasa nada porque
sin pero si de vuelta le damos initial
se restablece el valor que trae el
navegador por defecto esto lo que hace
es lo mismo va a buscar al valor que
tiene el navegador por defecto y lo
restablece eso es lo que hace y después
tenemos otra que es básicamente un set
que lo que hace esta propiedad es
restablecer al valor inicial se va a
comportar como inedit y si no me lo
hereda básicamente es eso realmente
resetea el color y por último tenemos
revert Si yo por ejemplo acá vengo y
pongo revert lo que hace revert es muy
parecido Solo que acá hay una pequeña
diferencia revert es parecido a un set
solamente que revert lo que hace primero
es intentar encontrar el estilo del
usuario si el usuario definió un estilo
lo revierte a eso y si no lo revierte en
este caso a inedit cuál es el estilo del
usuario simple si el usuario se descarga
un plugin una extensión de Chrome que le
modifica el color va a ese valor si el
usuario le modifica al navegador o hace
modificaciones el usuario propio yo como
adalto me pongo a Modificar el navegador
eso es lo que va a dar eh tomar color en
revert y si no tiene nada vuelve al
valor del navegador mientras que unset
directamente lo retorna al navegador al
valor eh nativo en este caso sería iner
pero nada esto realmente no tiene mucha
parte teórica normalmente no se usa
mucho la propiedad initial un Es raro
por eso casi que ni hablamos de eso el
único caso donde se suele utilizar
incluso inedit por ejemplo es no sé si
tenemos un textarea se lo damos al
textarea porque vieron que el textarea
tiene un valor un font family Perdón por
defecto si nosotros venimos por ejemplo
al textarea Vamos a darle en clases html
y venimos a textarea lo vamos a abrir si
se fijan acá lo vamos a correr También
acá está si le sacábamos el font family
en este caso el font family lo que hacía
era ponía esta letra monoespaciada si
nosotros queremos que herede la
tipografía la va a heredar de Body que
es ssif si acá le ponemos eh No sé le
ponemos una cualquier otra tipografía
por ejemplo taoma fíjense que los inputs
De hecho tampoco me toman este valor
tienen su propia tipografía los inputs
por defecto ya traen San serif pero si
nosotros queremos que el text ara
también herede este sans serif vamos a
venir acá y sacárselo le vamos a sacar
esto esto que está acá no está heredando
la propiedad Entonces si de repente
tenemos dos problemas si acá le damos
San serif si el día de mañana venimos
acá y cambiamos por ejemplo la
tipografía a Impact por ejemplo fíjense
que el formulario cambia y se vuelve
Impact pero el input Y esto no nosotros
podemos hacer que esto suceda Entonces
al input y al text ara le vamos a dar un
font family inedit y ahora vuelven para
arriba en este caso el ya le vamos a
sacar el textar de acá Entonces ahora es
adaptativo porque si a mí me pinta darle
un font family sanif se adaptan al sans
serif si me pinta darle un taoma se
adaptan a taoma me pinta darle monospace
se adaptan a monospace entonces la
tipografía que yo defina es la que esta
este elemento va a adaptar por eso ya le
voy a dar sanif y está bueno porque lo
que acabo de hacer es hacer que yo
defina la tipografía una vez y los
elementos hereden la tipografía por eso
sí está bueno darle un font family
inedit por ejemplo a los input y a los
textar y algunos elementos muy puntuales
que tienen una tipografía muy específica
ese es uno de los usos que solemos hacer
y también al elemento a cuando tenemos
un enlace también le solemos dar un
color porque se acuerdan que los colores
si nosotros a la etiqueta a no le damos
un color y le damos color a la etiqueta
que lo contiene no se cambia de color bu
eso porque el color de a ya está
definido por el navegador en un color
azulcito o un Violeta si ya está cliqueo
si nosotros a a le damos sin edit va a
ir para arriba y ver cuál es el color
Entonces es interesante eso que en este
caso lo vamos a dejar así porque
acabamos de aprender algo nuevo y un uso
interesante no de esto así que de esta
sección rescatamos esta esta habilidad
copada de no tener que andar cambiando
la tipografía si tenemos muchos textarea
muchos input y demás no vamos a tener
que andar viniendo a la propiedad y
ponerle eh font family este Y si
cambiamos una vez la tipografía tené que
cambiarla en todos lados no le damos a
todos sin erit y la tipografía la
ponemos una sola vez y la página entera
se va a ir adaptando a la tipografía que
definamos en el body igual a veces sí
utilizamos varias tipografías en una
página pu en ese caso le dan solamente
al contenedor no a los contenedores de
esas clases le dan una clase especial y
le Adan de esas clases ahora sí
entendido este tema de herencia vamos
con el siguiente tema y estoy hablando
de la cascada y la especificidad que de
hecho la especificidad es un tema
puntual de la cascada no es como son dos
conceptos diferentes pero es como que
está dentro de cascada especificidad Así
que vamos a ver esto porque es super
importante porque no nos damos cuenta
pero nos afectan en cada cosa que
hacemos en css de hecho antes cuando les
mostré como a un a un estilo se le dio
un color y otro No A pesar de haberlo
sobreescrito no se cambiaba de color es
raro no porque tenemos estos problemas
cuando no entendemos la cascada y la
especificidad y es que vamos a tener
este maldito problema de Por qué si le
di un estilo a esto no cambió el estilo
que yo le di ese problema lo resolvemos
cuando aprendemos de estilos perdón de
especificidad y cascada Así que
vamos Bueno ahora vamos a ver el tema de
la cascada y la especificidad ccs como
ya sabemos significa cascading Style
heits o hojas de estilo en cascada y acá
viene la palabra es decir es la c de css
Así que como entenderán es algo muy
importante es una de las cosas que
componen justamente todos es normalmente
cuando ustedes están desarrollando una
página web no están trabajando en un
código escribiendo algo lo que va a
pasar es que ustedes están aplicándole
estilo a un elemento y van a ver que ese
elemento no está tomando ese estilo
Bueno eso es porque básicamente ese
estilo responde a una puntuación podemos
imaginar la especificidad como la
puntuación de un estilo si yo por
ejemplo le digo a un a un elemento Che
este elemento tiene que ser rojo y este
elemento tiene que ser azul de qué color
se va a volver azul o rojo bueno la
especificidad y la cascada se encargan
de determinar esto de resolver estos
conflictos que ocurren al sobreescribir
una propiedad en cs es decir una forma
de seleccionar u otra forma de
seleccionar o un tipo de elemento y
demás tiene más puntuación es decir más
especificidad entonces se le va dar
importancia a esa eso es lo que vamos a
ver ahora Cómo entender el tema de la
especificidad la cascada y demás y que
entiendan Cómo resolver estos conflictos
o Cómo determinar el estilo final de un
elemento entendiendo esto yo lo que voy
a hacer para arrancar va a ser agarrar
el estilos pun sss y lo voy a arrastrar
abajo Okay acá y ahí se me va a dividir
la pantalla en dos porque quiero que
veamos esto de forma más puntual voy a
crear acá un h1 okay Para que se note
bien y al h1 le voy a dar un estilo
primero le voy a poner título dos título
no título uno principal título principal
Ah va y le doy color red Nada lo de
siempre se vuelve rojo Nada nuevo pero
la cascada vamos a ver el el primer
concepto ya la cacá es un concepto que
nos dice ey el orden en el que le damos
las propiedades sí importa y si dos
reglas una regla es esto Esto es una
regla si dos reglas tienen la misma
especificidad entonces lo que vamos a
hacer para determinar Cuál va a ser el
estilo que queda va a ser el orden es
decir cada propiedad supónganse que esto
tiene un un nivel de especificidad que
justamente acá como ven es esto que dice
selector specificity que es esto que
está acá que dice que la especificidad
es c 0 1 Okay 00 1 ya vamos a entrarnos
en eso pero para para empezar pueden ver
que estamos viendo un aspecto que nunca
nos habíamos fijado si yo vengo acá y
vuelvo a agarrar ese estilo Y le doy un
color Blue por ejemplo el color que va a
tomar es azul porque acá podemos
entender Cómo funciona la cascada el
orden sí importa si venimos acá también
vamos a ver que este selector dice que
la especificidad también es 0 1 Entonces
cuando la especificidad es Exactamente
igual en ambos casos es 001 el valor
resultante es decir la propiedad que va
a quedar la regla que va a contar va a
ser la última que apliquemos yo puedo
venir acá abajo y decirle el h1 va a
tener un color transparente ahora y se
vuelve transparente y puedo seguir
bajando y seguir sobrescribiendo de
vuelta una y otra vez las propiedades y
Esto va a funcionar así con un mismo
nivel de especificidad lo que importa es
el orden de ahí viene la cascada no se
van sobrescribiendo Pero qué pasa si un
elemento tiene más especificidad bueno
que tenga más especificidad significa
que es un elemento más específico html y
css tien en configurados para que
podamos definir Cuáles elementos son más
específicos o menos específicos para eso
Si yo acá por ejemplo le doy una clase y
le voy a poner por ejemplo título ahora
no pasa nada porque la forma en la que
lo estoy seleccionando es la misma no
estoy siendo específico estoy
simplemente diciendo al h1 se lo
modifica y al h1 se lo modifica Pero si
yo quisiera ser más específico acá voy a
poner por ejemplo punto título y estoy
seleccionando el mismo elemento eh el
elemento que selecciono es el mismo pero
si actualizo el color va a ser red y si
pasamos el mod por encima vamos a ver
que ahora la especificidad cambió ahora
es 010 o sea 0 1 0 esto básicamente
significa que tiene más especificidad el
valor que menos importa es el tercero el
cero de acá el segundo que más importa
es este y el que más importa es este que
está acá que está AC lo voy a subir y
vamos a quedarnos acá en el h1 este que
está acá si se fijan tienen diferente
nivel de especificidad Entonces ahora ya
la la cascada no aplica porque la
cascada entra en juego cuando hay dos
reglas con el mismo nivel de
especificidad como esta tiene más
especificidad le da da prioridad a esto
Entonces si un elemento lo seleccionamos
por clase estamos siendo más específicos
y cuando somos más específicos css le da
prioridad no importa el orden y después
tenemos otra forma de ser más
específicos todavía y es con un ID si yo