hola si quieres aprender desarrollo web este curso es para ti aprenderás los fundamentos de

html y css paso a paso comenzaremos con html para crear la

0:15estructura de la página y luego aprenderás css para describir su presentación puedes

encontrar el código del curso en el enlace en la descripción del curso allí podrás acceder a un

0:30repositorio en hiphop donde puedes descargar los archivos y seguir el curso paso a paso
bien así que comencemos

0:45comencemos el curso viendo los tres pilares principales html css y javascript cuál es su
función en el resultado final de la página web vamos a ver comencemos con html html significa
en inglés

1:00hyper text markup language lenguaje de marcado de hipertexto es un lenguaje que nos
permite definir la estructura de la página web cómo se va a estructurar el contenido en la
presentación que va a

1:15ver el usuario puedes pensar o imaginar html como la estructura de una construcción que
consiste en columnas o en vigas o en barras en madera que más o menos definen la estructura
del resultado final más no su presentación

1:30usamos html para definir la estructura de la página web no cómo se van a presentar los
elementos sino el contenido como tal escribimos html en un archivo de tipo

1:45html y para eso usamos la extensión punto html vamos a crear este archivo en la primera
parte del curso cuando trabajemos con los elementos html y luego que tengamos toda esa
estructura

2:00vamos a comenzar a ver css en inglés significa cascading stylesheets hojas de estilo que se
van aplicando en cascada css lo usamos para definir la presentación de la estructura que

2:15definimos en html básicamente le vamos a decir al browser o el navegador como

queremos presentar cada uno de los elementos que incluimos en nuestro archivo html una
analogía de la vida real sería la presentación final de todos los acabados

2:30de una casa html sería las vigas la estructura los ladrillos pero css sería todo lo que le
agregamos por encima esta estructura para que se vea presentable como queremos que lo vea
el usuario final

2:45vamos a escribir el código css en un archivo de tipo cs efe ese archivo va a tener una
extensión punto css y finalmente nuestro tercer pilar es ya basket este es un lenguaje de
programación que nos permite añadir

3:00funcionalidad a nuestra página web hacer que la página web sea interactiva y que pueda
interactuar con el usuario y toda la funcionalidad que conocemos en las páginas web de hoy en
día que permiten que sean herramientas muy poderosas

3:15escribimos el código de javascript en un archivo de tipo llamas qué punto j ese es su

extensión estos tres componentes normalmente se almacenan o se escriben en archivos
separados cada uno con su tipo de

3:30archivo específico html css y javascript los tres archivos luego se conectan se combinan y
forman las páginas web que conocemos hoy en día durante el curso vas a aprender a trabajar
con html y css vamos a ver lo
3:45básico la parte introductoria de cada uno de estos lenguajes u herramientas que usamos
para el desarrollo web vamos a ver javascript en un próximo curso javascript aplicado al
desarrollo web pero si tenemos un curso en el canal

4:00de javascript si quieres aprender los fundamentos de este lenguaje de programación bien
así que comencemos a ver html y luego veamos css para crear una página web

4:15veamos algo que seguramente te va a resultar muy interesante y puede ser una
motivación extra para seguir experimentando mientras aprendes desarrollo web se estás
usando google chrome como tu

4:30navegador puedes hacer clic derecho en cualquier página web que estés y hacer clic aquí
el inspector eso va a abrir un panel que te va a mostrar exactamente lo que vas a

4:45aprender durante el curso html tenemos este panel con toda la estructura de la página
web el código html y en esta parte cita tenemos css tenemos todo lo que controla cómo se
muestran esos

5:00elementos en la página y aquí tenemos su estructura que es el html puedes ver que
tenemos una estructura de alguna forma con elementos anidados tenemos elementos dentro
de otros elementos puedes ver eso

5:15con estas flechitas abrimos una flechita y dentro conseguimos más elementos esto es lo
que vamos a ver durante la primera parte del curso cómo puedes usar esto que llamamos
elementos y etiquetas para crear o definir la estructura de tu

5:30página como ejemplo veamos la estructura del archivo del código html de la página de
frijol campeón español si hacemos clic derecho y luego hacemos clic en expert

5:45se abre un pan y que tenemos aquí ese pan él nos muestra la estructura html de esta
página que tenemos aquí al colocar el cursor sobre cualquiera de estos elementos podemos
ver a qué elementos se refiere en la página y puedes ver aquí

6:00que tenemos como una estructura de elementos dentro de elementos así es básicamente
cómo funciona html vamos a tener muchos elementos que conforman nuestra página web que
van a estar uno dentro del otro por ejemplo esta parte

6:15vemos que corresponde a estos elementos que tenemos aquí a partir de este que estoy
señalando y dentro de él vamos encontrando nuevos elementos uno dentro del otro así que
comencemos vamos a empezar a ver cómo puedes escoger tu

6:30editor de código para que comienzan a escribir tu archivo html para comenzar nuestra
misión de crear una página web y ver los principales

6:45componentes que puedes usar en html necesitamos la herramienta adecuada un ejemplo

es visual studio cow este es el editor de código que vamos a usar durante el curso se puede
descargar para windows o para otras plataformas

7:00dependiendo de tu sistema operativo es gratis y fue creado por microsoft otra alternativa
buenísima también es atom que es gratis se puede descargar de forma gratuita y está
disponible para windows 7 o versiones más recientes
7:15puedes acceder a brillo eléctrico en code punto visual studio puntocom para descargarlos
simplemente haces clic aquí en down down eso te va a llevar a la página donde te presentan
las distintas plataformas

7:30haces clic en el botón dependiendo de tu sistema operativo en mi caso es windows haces

clic aquí y vas a ver que se inicia la descarga y es gracias puedes cargar bien es que hoy para
windows si la descarga no inició todavía puedes

7:45hacer clic aquí para un link de descarga directo y aquí podemos ver cómo comienza la
descarga una vez que la descarga ya esté lista puedes instalarlo haciendo doble clic en el
archivo y el proceso es bastante intuitivo así que una vez que ya culmina el proceso de
instalación

8:00puedes ver una pantalla muy similar a ésta esta es la pantalla de bienvenida de bello
estudio que aquí tenemos algunas opciones para iniciar para empezar a trabajar con nuestro
editor de

8:15código y aquí en esta sección vas a ver archivos recientes si recién están instalando esta
sección va a estar vacía aquí tenemos una opción para crear un archivo nuevo para abrir un
archivo ya existente para abrir una carpeta o para

8:30ejecutar un comando en este caso vamos a abrir una carpeta vamos a abrir una carpeta
que ya yo creé en mis documentos que se llama curso de html y css hacemos clic en opel
folder y podemos llegar a la carpeta que

8:45queremos abrir o copiar la dirección aquí arriba hacemos clic en enter y luego cuando
vemos el nombre de la carpeta que queremos abrir aquí hacemos clic en select folder vemos
que tarda unos segundos en abrir y

9:00vemos que aquí en la pantalla cambio ahora tenemos una parte un panel aquí que se
llama explorer explorador en español y vemos el nombre de la carpeta curso de html y css en
el panel con unas

9:15opciones aquí también vemos el nombre de la carpeta que tenemos abierta otra opción
para realizar este mismo proceso para abrir una carpeta es hacer clic en file luego open folder
o usando estos atajos del teclado y siguiendo luego el

9:30mismo proceso llegamos a la carpeta y luego seleccionamos esa carpeta genial ya tenemos
nuestra carpeta abierta para abrir o cerrar el explorador que nos muestra el contenido de la
carpeta y

9:45aquí podemos ver algunas opciones podemos ensanchar el panel para ver estas opciones
junto con el título de la carpeta crear un archivo crear una carpeta también podemos volver a
cargar el explorador para que actualice el contenido de la carpeta y también colapsar o cerrar
las carpetas las

10:00subcarpetas que tenemos en esta carpeta en este momento la carpeta está vacía así que
vamos a comenzar a crear nuestro primer archivo el archivo html un dato curioso es que si te
gusta este

10:15tema de colores que vamos a usar durante el curso puedes descargarlo en las
extensiones es el tema oscuro de frica org and bass aquí a extensiones luego aquí en la
búsqueda de extensiones
10:30escribes recall camps dark en el tema oscuro de frica urca y aquí lo puedes ver puedes
ver el logo de frigo que haces clic aquí y como yo ya lo tengo instalado me a estas opciones
pero aquí vas a ver una opción que dice instalar install aunque genial

10:45vamos a nuestra siguiente parte del curso a comenzar a crear nuestro archivo index.hu
tml debe oye

11:00el primer paso para crear cualquier página web es crear un archivo html así que vamos a
hacerlo aquí y paso a paso hay dos formas de crear un archivo vamos a usar aquí la más directa
digamos

11:15junto al nombre de la carpeta donde queremos crear el archivo la cual tenemos abierta
en vídeo el estudio que vamos a hacer clic aquí en new file archivo nuevo vemos un campo
aquí que

11:30nos permite escribir el nombre del archivo es una estándar nombrar el archivo principal
de tu página web index.html o que hacemos clic en enter y allí vemos nuestro archivo se creó
el

11:45archivo en nuestra carpeta si vamos a la carpeta podemos confirmar que tenemos el

archivo aquí index.hr ml y puedes ver que tiene el símbolo de google chrome porque por
defecto yo tengo configurado que los archivos html se van a abrir con

12:00google chrome otra forma de crear el archivo html es ir a fallo y luego hacer clic en new
file o también usar el atajo de teclado control márgenes eso va a crear un

12:15archivo nuevo aquí que va a decir aun tyrone es decir que no tiene un título específico
asignado todavía y luego puedes guardarlo file save o 6 bass y simplemente le asignas el
nombre aquí

12:30sería index.hr ml le darías click en save si lo estás creando de esta forma ok pero como ya
lo creamos con la forma más directa ya tenemos nuestro archivo genial puedes cambiar el
tamaño de este panel hacerlo más angosto con estas

12:45flechitas si ponemos el cursor en la línea de división para abrir el archivo semos doble clic
que en este caso está abierto pero si queremos cerrarlo hacemos clic en la x y para abrirlo
nuevamente doble clic sobre el archivo

13:00y ya tenemos nuestro archivo ahora vamos a escribir la primera línea en nuestro archivo
html cuál va a ser esa línea va a ser una declaración que nos va a permitir decirle al browser
que es versión de

13:15html vamos a usar en nuestro archivo es muy importante y debería estar en todos los
archivos html que cree eso que debería ser la primera la primera línea que tengas allí vamos a
incrementar su tamaño y aquí podemos ver su estructura

13:30comenzamos con un paréntesis angular de apertura luego un signo de exclamación luego

doc type en mayúscula un espacio luego html en minúscula y un paréntesis angular de cierre
esa es la línea que le

13:45dice al browser qué versión de html vamos a usar en el archivo veamos como describe en
esta declaración en la documentación de la red de desarrolladores de mozilla aquí lo tenemos
la documentación web de
14:00la red de desarrolladores de mozilla es muy muy útil para conseguir información sobre
todos los elementos de html de cfs también cubren javascript es básicamente una
documentación que te permite aprender más sobre cada uno de los elementos vamos a hablar
más sobre la

14:15documentación en una próxima sección pero por ahora vamos a concentrarnos en este
artículo que nos explica el propósito de dos type dock type informa al navegador qué versión
de html se usó

14:30para escribir el documento es una declaración no una etiqueta no es una etiqueta como
las que vamos a usar normalmente en html com paréntesis angulares sino que es una
declaración

14:45además podemos referirnos a ella como document site declárase jones declaración de
tipo de documento o por las siglas de ted es muy útil que la documentación también se puede
leer en español como tenemos este artículo simplemente hace clic en este menú y

15:00puedes seleccionar tu idioma si haces clic en change line which que significa cambiar
idioma genial ya tenemos nuestra primera línea del archivo html

15:15así que vamos a ver en la próxima parte tres etiquetas que son esenciales para cualquier
archivo html para empezar a crear la estructura de nuestra página web tv oye

15:30comencemos viendo una definición de elemento porque los elementos en html van a ser
esenciales vamos a usar esos elementos que podemos crear para definir la estructura de
nuestra página web

15:45veamos una definición un elemento es un componente básico de un archivo html puedes

pensar en los elementos en html como ladrillos usamos los elementos para definir la
estructura de una página web

16:00en un archivo html el archivo donde vamos a escribir nuestro código los elementos van a
ser los componentes básicos de ese código y esos elementos se van a combinar para crear la

16:15estructura de la página web en inglés el elemento se denomina element que es por si en

algún momento necesitas referirte un elemento en inglés o cuando lo leas en la
documentación los elementos y las etiquetas están estrechamente

16:30relacionadas por qué porque las etiquetas no os permiten definir los elementos que
usamos en un archivo html básicamente las etiquetas son la forma de escribir esos elementos
en un archivo

16:45nosotros escribimos las etiquetas en nuestro archivo html y estas etiquetas crean los
elementos de la página web que especifican las etiquetas especifican el tipo de elemento que
se va a crear en esas partes específicas de la página web

17:00en inglés nos referimos a una etiqueta como tag o que está en inglés por si en algún
momento necesitas referirte a las tags o las etiquetas en la documentación en inglés aquí
tenemos algunos ejemplos

17:15de etiquetas en html vamos a verlas en acción ahorita en nuestro editor de código pero
ahora vamos a enfocarnos en su estructura cuando veas estos paréntesis angulares
17:30debes pensar que eso representa una etiqueta en html y lo que está dentro de la
etiqueta representa el tipo de elemento que se está creando esta es la estructura de la
etiqueta un paréntesis angular que abre en la

17:45etiqueta dentro de los paréntesis angulares el tipo de elemento y en luego el paréntesis

angular que cierran la etiqueta la mayoría de los elementos en html

18:00requieren dos etiquetas una etiqueta que se llama etiqueta de apertura como la ves aquí
por ejemplo html y una etiqueta de cierre que tenemos aquí estas etiquetas son esenciales
porque van a

18:15permitirle al browser saber dónde comienza un elemento y dónde termina recuerda que
vamos a anidar elementos y vamos a tener elementos ubicados en una secuencia también así
que es esencial que el browser sepa dónde comienza un

18:30elemento con su etiqueta de apertura y dónde termina con su etiqueta de cierre por
ejemplo en este caso la etiqueta dice html y eso debe aparecer exactamente igual en la
etiqueta de cierre para que el productor detecte que el elemento se cerró cuál es la

18:45diferencia entre la etiqueta de apertura y la etiqueta de cierre bueno esto que tenemos
aquí esta parra determina que esa etiqueta representa una etiqueta de cierre es muy
importante incluir esta

19:00barra que tenemos aquí es la única diferencia entre ambas etiquetas aquí podemos ver
un ejemplo de un elemento y de por qué también es necesario usar una etiqueta de apertura y
de cierre vemos las dos etiquetas el tipo de

19:15elementos h1 vamos a ver más sobre este tipo de elementos en tan solo unos minutos
pero básicamente lo que nos permiten es crear un encabezado un título en la página tenemos
la etiqueta de apertura la etiqueta de cierre y

19:30dentro de estas etiquetas vemos el contenido de ese elemento por eso necesitábamos
una etiqueta de apertura y una etiqueta de cierre porque nos van a permitir delimitar o
encerrar un contenido el

19:45contenido de ese elemento algunos elementos en html no necesitan etiquetas de cierre

la mayoría sí pero hay ciertos elementos que no necesitan etiquetas de cierre en inglés nos
referimos a esas etiquetas como south cloud sintax son

20:00etiquetas que digamos que se cierran solas o no requieren de una etiqueta de cierre con
la etiqueta de apertura insuficiente aquí tenemos un ejemplo ésta es una etiqueta que nos va a
permitir colocar

20:15una imagen en nuestra página web como puedes ver esta etiqueta es de apertura porque
no tiene una barra al inicio pero no necesitamos una etiqueta de cierre solo con esta etiqueta
vamos a poder especificar todo lo que necesitamos para

20:30que se presente esa imagen en la página web no necesitamos incluir nada más
simplemente es opcional agregar esta barra al final de la etiqueta cuando se cierra sola cuando
no tiene una etiqueta de cierre durante el curso no la vamos a

20:45incluir porque es opcional vamos a ver estas etiquetas y elementos en acción en nuestro
editor de código volvemos a nuestro editor de código visual estudio cavern por ahora vamos a
cerrar el explorador así podemos
21:00concentrarnos en el contenido del archivo luego de la declaración del doctor el tipo de
documento el primer elemento que vamos a incluir va a ser el elemento html que también se

21:15denomina el elemento raíz de un archivo html todos los demás elementos que van a
conformar la estructura de nuestra página deben estar contenidos dentro de este elemento
principal por eso lo

21:30llamamos el elemento raíz aquí tenemos su etiqueta de apertura y también tenemos su

etiqueta de cierre dentro de ambas etiquetas vamos a empezar a crear la estructura de la
página dentro de html dentro de este elemento vamos a tener otros dos elementos

21:45principales el primero va a ser head y el segundo va a hacer por y ellos literalmente

significan en inglés ged cabeza ivory

22:00cuerpo podríamos realizar esa analogía en cuanto a la página web todos los elementos
que van a estar dentro del elemento head son elementos que en realidad actúan detrás de
escena son elementos importantes para la página

22:15pero no van a formar la estructura principal de la página por ejemplo aquí dentro de ejes
vamos a incluir cualquier archivo externo enlaces a archivos externos que necesita la página
como archivos de css o archivos javascript y

22:30también dentro de head podemos personalizar el título de la página pero dentro del
elemento poli es donde vamos a definir la estructura de la página si omitimos head el browser
va a añadirlo automáticamente ya lo vas a ver

22:45en la herramienta de desarrolladores de chrome cuando veamos una vista previa de

nuestra página algo importante que tenemos que cambiar en dicho de estudios code cuando
trabajamos con archivos html es la

23:00intención este espacio que puedes ver aquí antes de las etiquetas head y baring
funcionalmente no tienen un impacto en html o sea si nosotros escribimos esto así la página se
va a presentar de igual

23:15forma no va a haber ningún cambio en el resultado pero siempre deberías agregar un

nivel de intenta ción a cada uno de los elementos que vas anidando que vas colocando dentro
de otros así puedes ver

23:30fácilmente la jerarquía que hay entre ellos los elementos que están dentro de otros
elementos por ejemplo aquí fácilmente podemos ver que head y boring están dentro del
elemento html y eso lo

23:45logramos visualmente agregando espacios pero aquí tenemos cuatro espacios podemos
cambiar esto porque el estándar en html es usar dos espacios en realidad cuántos espacios
usar para intentar

24:00puede ser personalizado de acuerdo a tu preferencia normalmente se usan dos o cuatro

espacios pero el estándar web recomiendo usar dos espacios al igual que la guía de estilo de
google así que vamos a usar dos espacios en lugar de

24:15cuatro y cómo podemos cambiar esto en viso destruyó con hacemos clic aquí dice
espacios 4 hacemos clic en intentar usando espacios intent using spaces y luego seleccionamos
cuantos espacios
24:30queremos usar para cada nivel de intenta ción en este caso sería 2 en lugar de 4 que es el
tamaño por defecto vamos a usar 2 ahora podemos con el

24:45atajo del teclado control y luego el corchete un corchete de apertura podemos mover el
código hacia la izquierda un nivel de intenta ción así teníamos el código antes con cuatro
espacios puedes ver aquí cuatro puntitos cada uno de los

25:00puntitos representa un espacio y si hacemos clic en control y un corchete de apertura

bajamos a dos espacios y si hacemos clic en control con un corchete de cierre volvemos a
cuatro espacios

25:15porque estamos agregando un nivel de intenta ción estos atajos de teclado son muy muy
útiles cuando estamos trabajando con un editor de código así que te recomiendo que los
anotes o los tengas allí presentes cuando trabajes con peso de estudio caber

25:30porque usamos dos espacios normalmente en vez de cuatro bueno porque el html vamos
a ir intentando cada uno de los elementos que están contenidos dentro de otros elementos y
eso va a crear una

25:45estructura que va a ser bastante profunda vamos a tener muchos niveles de intenta
acción y con dos espacios estamos ahorrando espacio horizontal para que se pueda ver mejor
y aún así se detecta a la jerarquía fácilmente con dos espacios ahora que ya tenemos esto

26:00configurado y puedes ver que aquí vamos a usar dos espacios vamos a continuar con
nuestro próximo tema vas a aprender cómo puedes especificar el idioma de la página en esta
etiqueta que tenemos aquí html esto lo veremos en la próxima parte

26:15vamos a ver cómo puedes especificar el idioma de la página en html esto es muy
importante para mejorar la accesibilidad

26:30de la página y para que el browser sepa cuál es el idioma de la página se recomienda
siempre incluyendo dentro de la etiqueta de apertura vamos a agregar algo que se llama un
atributo vamos a hablar más de los atributos más

26:45adelante pero básicamente un atributo simplemente especifica algo sobre ese elemento
en este caso vamos a especificar el idioma de todos los elementos dentro de el elemento raíz

27:00prácticamente todos los elementos de la página web estamos diciendo que van a tener
este idioma el atributo se llama line que es la abreviación de language en inglés que significa
idioma a ese

27:15atributo le vamos a asignar el valor y ese tiene que estar entre comillas todo valor que
vamos a especificar aquí de un atributo tiene que estar entre comillas y ese valor es ese en
este caso porque es el código que le asignamos al

27:30idioma español en los estándares web y en los estándares internacionales veamos una
referencia de estos códigos si buscamos en wikipedia una lista de los códigos que se asignaron
a cada uno

27:45de los idiomas aquí podemos ver la lista si buscamos en la lista español en inglés esperes
aquí lo tenemos en español y su código es efe ese es el código que nosotros vamos a
28:00escribir aquí entre comillas si fuera inglés sería en inglés ese es el código que se le asignó
genial ya sabes cómo especificar el idioma de la página web en la próxima parte vamos a ver
cómo

28:15puedes empezar a agregar elementos a tu página web dentro de la etiqueta boring de

berlín ahora vamos a comenzar a ver cómo puedes agregar elementos visibles en tu página

28:30web porque hasta ahora lo que hemos agregado al archivo simplemente va a mostrar
una página vacía vamos a probar vamos a ver la página en su estado actual si vamos a la
carpeta y hacemos doble clic en el archivo index vamos a

28:45ver una página vacía pero en realidad esta página no está vacía porque si abrimos las
herramientas de desarrolladores de chrome hacemos clic en inspector vamos a ver la
estructura html de la página aquí podemos

29:00incrementar el tamaño de la letra haciendo clic en control y luego con la ruedita del
mouse del cursor del ratón podemos ver la estructura de la página tenemos nuestro elemento
raíz html la

29:15etiqueta de apertura y la de cierre y especificamos el idioma de la página también

tenemos nuestra declaración del doctor que lo vemos aquí como en inglés luego vemos el ibón
y con sus etiquetas

29:30de apertura y de cierre puedes ver que si colocamos el cursor en bari vemos aquí una
línea naranja en la página el cuerpo si existe pero en este momento está vacío pero vamos a ir
agregando el elemento a esta estructura y cómo lo vamos a hacer bueno vamos a colocar el

29:45editor de código y la página al lado a lado para ver cómo se actualiza podemos ver los
lado a lado si eliminamos este elemento de nuestro archivo y volvemos a cargar la página
puedes ver que no pasó

30:00nada la página sigue estando en blanco pero si abrimos las herramientas de

desarrolladores de chrome vemos que igual de etiquetaje se agregó ese elemento se agrega
automáticamente

30:15cuando abrimos la página en el browser así que por ahora la vamos a omitir y vamos a
hablar más sobre head y qué elementos podemos incluir en head más adelante vamos a
trabajar con boyle dentro de x y vamos a ver un tipo de

30:30elementos llamados encabezado o título podemos crear un encabezado en inglés un

guerín con la etiqueta h seguido de un número entre 1 y 6 necesitamos la etiqueta de

30:45apertura y la etiqueta de cierre y te voy a colocar un poco más grande aquí la etiqueta de
apertura tener los paréntesis angulares y dentro h1 este es el nivel más grande de encabezado
va a tener el tamaño de letra más grande y va a tener

31:00un formato ya específico incluyendo el texto en negrita vamos a ver hola mundo vamos a
escribir este mensaje

31:15dentro de las etiquetas y este va a ser el contenido de nuestro encabezado de nuestro

título si volvemos a cargar la página vemos aquí que aparece el texto hola mundo si escribimos
eso mismo pero dentro de una etiqueta h2 un elemento h
31:302 y volvemos a cargar la página puedes ver que la letra está más pequeña así es que
podemos ir definiendo este tipo de elementos en nuestra página y ya tenemos un formato
estándar h3 es

31:45aún más pequeño h 4 más pequeño todavía pero vemos que si se mantiene el formato
en negrita h 5

32:00y finalmente h 66 niveles si luego de h 6 intentamos colocar una etiqueta llamada h 7

para un elemento h 7 veamos qué pasa ya el texto no tiene un formato

32:15específico no es un título no está en negrita no sigue esta secuencia solo podemos incluir
los números entre 1 y 6 y así es como creamos un encabezado en nuestra página recuerda las
etiquetas h

32:301 hasta h 6 etiqueta de apertura etiqueta de cierre y dentro de las etiquetas el contenido
del título del encabezado bien en la próxima parte vamos a ver cómo puedes crear un párrafo
el elemento que usamos cuando queremos

32:45incluir texto o un párrafo en nuestra página web bien ahora vamos a ir creando la
estructura definitiva de nuestra página con los elementos vamos a crear una

33:00aplicación de gatos para eso tenemos que borrar estos encabezados estos títulos
tenemos nuestra página en blanco y vamos a crear un título con el elemento h 2

33:15y luego vamos a crear un párrafo para crear un párrafo usamos este elemento el

33:30elemento p en html tenemos una etiqueta de apertura y una etiqueta de cierre y dentro
de esas etiquetas vamos a escribir el contenido del párrafo el texto haz clic aquí

33:45para ver más imágenes de gatos para poder ver el código mejor con mayor tamaño
vamos a ocultar esta barra esta

34:00barra se llama la activity by la barra de actividad podemos hacer clic derecho aquí en
algún lado de la barra y luego hacer clic aquí esconder la barra de actividad y vemos cómo se
esconde para

34:15volver a mostrar la hacemos clic en view a france y luego yo activity by y por ahora vamos
a ocultar aquí vemos haz clic aquí para ver más imágenes de gatos

34:30si volvemos a cargar la página vemos el texto que tenemos aquí y así es como creamos
un párrafo en html con la etiqueta p recuerda apertura cierre y el contenido

34:45para mostrarte cómo podemos usar esta etiqueta para crear varios párrafos aquí he
copiado y pegado voy a pegar aquí en el editor de código un texto que normalmente se puede
usar para como para

35:00guardar el lugar del texto definitivo sirve como lo que decimos en inglés un place holder
llamado lawrence gibson un texto tomado de escrituras antiguas pero en este caso ha sido
adaptado para gatitos para seguir con el tema de

35:15nuestra aplicación aquí estamos creando párrafos pero puedes ver que esos párrafos son
muy muy largos así que tendríamos que desplazarnos
35:30horizontalmente para ver su contenido lo que podemos hacer en este caso es usar un
atajo de teclado alt z cuando haces clic en alt z el código se adapta al tamaño de tu ventana así
que puedes ver que todo el contenido ahora está

35:45presentado verticalmente para que no tengamos que desplazarnos horizontalmente es

muy útil cuando necesitas como en este caso tener lado a lado tu página y tu código recuerda
al z y si vuelves a hacer clic en alt z se

36:00revierte el efecto y vuelves a tener todo en una sola línea aunque entonces aquí puedes
ver cada uno tiene su etiqueta p para cada uno de los párrafos y si volvemos a cargar la página
puedes ver

36:15que tenemos una separación entre estos elementos cada uno es un párrafo tiene su
separación y así podemos ir creando el contenido de la página si la página requiere tener texto
genial ya sabes

36:30cómo trabajar con párrafos en html con la etiqueta p así que la próxima parte vas a
aprender cómo puedes conseguir más información sobre cada uno de estos elementos en la
documentación de la red de desarrolladores de mozilla vas a aprender paso a paso cómo leerla
y cómo

36:45conseguir más información allí en la próxima parte la documentación es muy importante

porque te permite conseguir cosas nuevas

37:00sobre el lenguaje aprender más sobre cómo puedes usar cada uno de sus elementos y de
sus propiedades de sus capacidades como lenguaje así que vamos a ir a la documentación de
la red de desarrolladores de mozilla donde puedes

37:15conseguir información sobre html css y javascript para eso aquí debes buscar mdm web
box también lo puedes escribir en google o que directamente en cualquiera de los

37:30dos el resultado es exactamente el mismo y aquí llegamos a web box vamos a entrar allí y
puedes ver que la página inicialmente está en inglés pero cuando ves que aquí que tenemos es
la s esto

37:45significa que cuando busquemos en esta barra los resultados van a estar en español si no
está esta parte luego el punto org simplemente debes agregarse haces clic en enter y vuelves a
cargar la página

38:00ahora si nosotros buscamos por ejemplo la etiqueta p aquí podemos ver que el idioma de
la página actualmente está configurado a español así que los resultados que obtenemos están
en español en este caso queremos aprender más sobre la etiqueta

38:15p así que vamos a hacer clic aquí en este enlace que nos lleva a su documentación en
español comenzamos leyendo sobre esta etiqueta definición el elemento p párrafo es el

38:30apropiado para distribuir el texto en párrafos sus etiquetas son p y luego la de cierre que
tenemos aquí la de cierre es opcional vemos más información sobre este elemento y vemos
sus posibles atributos ya hablamos sobre el atributo

38:45online que especifica el código de idiomas por ejemplo si tenemos un párrafo en otro
idioma en nuestra página que no es el idioma principal de la página podemos agregar ese
atributo al párrafo también tenemos otros atributos sobre los cuales vamos a hablar durante
39:00el curso pero como puedes ver la documentación es muy útil además tenemos un
ejemplo de cómo podemos usar esta etiqueta o este elemento en nuestra página así podemos
conseguir información sobre cualquier

39:15elemento html que necesitemos vamos a llegar al artículo que vimos cuando creamos el
archivo index html hacemos clic en enter y aquí llegamos al artículo de docta en el que
acabamos de

39:30ver hace algunos minutos en el curso la documentación es muy útil y vamos a estar
refiriéndonos a esta documentación para html css y luego en un próximo curso también para
ya busquets así que es importante que te familiarices con la

39:45documentación recuerda para que los resultados estén en español aquí puedes agregar
es las islas también si no está configurado en

40:00español puedes hacer clic en esta opción aquí te va a dar los distintos idiomas te va a
decir los distintos idiomas español inglés o ambos genial ya sabes cómo leer la documentación
de la red de desarrolladores de mozilla en la próxima

40:15parte vamos a ver algo muy importante los comentarios te veo y cuando estés listo lista
continúa con el curso

40:30ahora vamos a hablar sobre los comentarios en html en html puedes crear un
comentario vamos a colocar nuestro editor de código en pantalla completa para verlo con más
detalle puedes crear un comentario

40:45de esta forma primero un paréntesis angular de apertura luego un signo de exclamación
seguido de dos guiones el editor de código automáticamente lo completa con el cierre del
comentario

41:00que son dos guiones seguido de un paréntesis angular y dentro de estas dos
combinaciones de símbolos dentro de estas dos estructuras vamos a escribir el contenido del
comentario por ejemplo un comentario

41:15puede ser un recordatorio de algo que está pendiente por hacer en el archivo por
ejemplo un youtube en inglés significa como una tarea pendiente por hacer youtube agregar
enlace a imágenes

41:30de gatos digamos que queremos agregar aquí un enlace a imágenes de gatos pero
todavía esta tarea está pendiente no agregamos un comentario y así nos recordamos a
nosotros mismos oa otros desarrolladores con los que estemos trabajando que esa

41:45es una tarea pendiente ese es el propósito de los comentarios con los comentarios
podemos explicar el código podemos agregar exactamente esos comentarios que sean útiles
para

42:00nosotros como desarrolladores o para otros desarrolladores que estén viendo nuestro
código los comentarios no son como tal parte del código o de la estructura final de la página
solamente están allí para dar ese mensaje cuando

42:15vemos el archivo en un editor de código no afectan para nada el resultado veamos esto si
volvemos a cargar la página vemos que todo sigue igual pero tenemos este comentario aquí
cuando veas una línea gris normalmente se coloca en gris
42:30dependiendo del tema de colores que escojas eso es un comentario hay un atajo del
teclado que puedes usar para convertir una línea en un comentario esto puede ser útil cuando
quieres experimentar o probar cómo se

42:45vería la página things una línea de código de html o si un bloque de código también para
hacer esto simplemente seleccionas la línea y haces clic en control seguido

43:00de una barra inclinada si vuelves a usar este atajo de teclado remueves el comentario
aquí puedes verlo comentario código comentario código si esta línea es un comentario eso

43:15significa que no va a aparecer en el resultado final veamos si volvemos a cargar la página

ahora vemos que esa línea no aparece aquí pero si quitamos el comentario aquí lo puedes ver
genial también si quieres

43:30comentar un bloque de código por ejemplo digamos que no tenemos este comentario y
queremos comentar estas tres líneas también hacemos clic en control y la

43:45barra inclinada y podemos ver que todos los elementos de esas líneas se vuelven parte
del comentario si guardamos el archivo y volvemos a cargar la página vemos una página vacía
porque ya no tenemos ningún código html dentro de la

44:00etiqueta by y aquí vamos a mantener nuestro comentario genial ya sabes cómo trabajar
con comentarios en html paréntesis angular signo de exclamación -- y luego jong yong y
paréntesis

44:15angular genial ahora vamos a ver una etiqueta que nos va a permitir decirle al browser
dónde está el contenido principal de nuestra página lo veremos en la próxima parte del curso

44:30ahora vamos a trabajar con el elemento main en español main significa principal esa
etiqueta va a decirle al browser dónde está ubicado el contenido principal de nuestra página
web antes de

44:45agregar mail a nuestra página vamos a crear otro título otro encabezado ese título va a
decir imágenes de gatos que en este momento tenemos tres elementos

45:00el título principal otro título más pequeño y aquí tenemos el párrafo con un contenido el
contenido principal de la página va a estar dentro de la etiqueta main que tenemos aquí
tenemos su etiqueta de

45:15apertura y tenemos su etiqueta de cierre puedes ver que es de cierre porque tenemos la
barra inclinada aquí todo el contenido principal de la página debería estar dentro de la
etiqueta main así que

45:30vamos a borrar la etiqueta de cierre de aquí y vamos a colocarla aquí luego de todos los
elementos del contenido principal de la página que hasta este momento serían estos dos
elementos no vamos a considerar el título principal

45:45como parte del contenido principal de la página en este caso también podrías incluirlo
pero qué ocurre en este momento no estamos especificando con la intención que estos
elementos van a pertenecer a

46:00main stand intentados al mismo nivel puedes ver que todos están aquí alineados
debemos intentar los un nivel más hacia la derecha y así puedes ver fácilmente que estos
elementos pertenecen a maine
46:15genial si volvemos a cargar la página puedes ver que no hubo ningún cambio pero si
tenemos un cambio en la estructura de nuestra página veamos más sobre main y por qué
deberíamos usarlo en html si vamos a la red de

46:30desarrolladores de mozilla podemos hacer clic aquí en main y vamos a este artículo main
el elemento html main representa el contenido principal de la etiqueta point

46:45de ese documento o aplicación el área principal del contenido consiste en el contenido
que está directamente relacionado o se expande sobre el tema central de un documento o la

47:00funcionalidad central de una aplicación esto es muy importante este contenido debe ser
único al documento excluyendo cualquier contenido que se repita a través de un conjunto de
documentos como barras laterales enlaces de navegación

47:15información de los derechos de autor o cualquier otra parte de la página que si se repita
no debe haber más de un elemento main y el elemento main no debe ser descendiente de
otro elemento como artículo como führer como xerez no debe

47:30ser descendiente no debe ser parte de otro elemento aquí estamos usando main para el
contenido principal de nuestra página genial ya sabes la importancia de main

47:45ahora que ya tenemos una estructura un poco más elaborada en nuestra página web
vamos a hablar un poco sobre la importancia de la intenta ción en html cuando comenzamos a
escribir el archivo hicimos un cambio aquí en la

48:00configuración para usar dos espacios para cada nivel de intenta ción como puedes ver
aquí usamos dos espacios dos circulitos aquí para cada nivel pero porque dos espacios y para
que es

48:15importante intentar nuestro código en html veamos funcionalmente en html los espacios
no tienen un propósito real funcionalmente no va a haber ninguna diferencia si

48:30escribimos este archivo de esta forma o si simplemente escribimos esto así todo al
mismo nivel de intenta ción si volvemos a cargar la página podemos ver que no hubo ningún
cambio pero si

48:45hubo un cambio importante en la facilidad de lectura del archivo este archivo no es para
nada fácil de leer no podemos ver inmediatamente no podemos identificar cuál es la
estructura o la

49:00jerarquía entre los distintos elementos de la página y esto es simplemente una página
muy sencilla imagínate una página real en la página que esté ya publicada en internet
imagínate lo difícil que

49:15sería leer ese archivo si no está intentado adecuadamente por eso es que necesitamos
los dos espacios los dos espacios por cada nivel de intenta ción como tenemos aquí esto sería
la intenta

49:30acción adecuada para el archivo usamos normalmente dos espacios en lugar de cuatro
también se podría usar cuatro es válido funcionalmente pero tendemos a usar dos en html
porque es más conciso
49:45como puedes ver la estructura cada vez se va haciendo más profunda o tiene más
elementos anidados uno dentro de otro así que usamos dos porque nos permite ver la
jerarquía y aún así es conciso no agregamos espacios innecesarios

50:00además dos espacios es lo recomendado por la guía de estilo de coco y por el consorcio
web web 13 si vemos la guía de estilo de google para html y css

50:15en esta sección que tenemos aquí hablan sobre la intenta ción y nos dicen que
deberíamos intentar usando dos espacios a la vez para cada nivel de intenta ción y también
nos advierten que no debemos mezclar

50:30espacios y tabs para intentar nuestro código si usamos espacios debemos usar espacios
en todo el archivo y se recomienda dos espacios bien ya sabes por qué es importante intentar
tu código en html no hay un

50:45impacto funcional sobre el resultado sino que nos permite escribir archivos que son más
fáciles de leer y por lo tanto más fáciles de crear de mantener y de expandir si queremos
trabajar con nuestra estructura existente y agregar

51:00nuevos elementos de así que pasemos a nuestra siguiente parte del curso cómo
podemos incluir una imagen en nuestra página vamos a tener un gatito aquí lo veremos en la
próxima parte del curso así que te espero allí

51:15genial muy buen trabajo hasta ahora veamos otros tipos de elementos con el que puedes
trabajar imágenes las imágenes se han vuelto una parte central

51:30de la web que conocemos hoy en día primero que todo para crear una imagen debes
usar la etiqueta img vamos a colocar nuestro editor de código en pantalla completa para que
podamos verlo con más detalle

51:45img esta etiqueta es una abreviación de emails en inglés esa etiqueta es una etiqueta que
se cierra automáticamente no necesitamos escribir una etiqueta de

52:00cierre para la imagen y también es opcional agregar esta barra inclinada al final es
opcional debemos especificar dónde está la imagen que queremos presentar por ejemplo si
queremos tomar la imagen de internet

52:15tenemos que especificar aquí entre comillas donde estaba ubicada esa dirección web
https en este caso vamos a colocar una imagen de un gato

52:30alojada en https vitali y luego fsc frigor gama de daxing cat esta es una imagen que ya
está alojada en internet por fritz code

52:45cam ese es el valor que le estamos asignando al atributo s rc porque src porque el inglés
está es una abreviación de short course en español significa la fuente la fuente donde estamos
tomando

53:00esa imagen es esta dirección web bien vamos a ver cómo se presenta la imagen en
nuestra página aquí puedes ver que tomo un segundito y vemos la imagen tenemos nuestro
gatito

53:15esa es la imagen que estamos incluyendo a partir de esta dirección web genial no un
atributo importante que debería tener cualquier imagen en html es el atributo alto porque
53:30out es una descripción alternativa para la imagen que se va a presentar si por ejemplo la
imagen no se descarga correctamente por una falla en internet o si el usuario está usando un
lector de

53:45pantalla ese texto se va a leer para darle mayor accesibilidad a los usuarios a nuestra
página vamos a escribir una descripción de la imagen un lindo gato naranja recostado sobre su

54:00espalda bien tenemos nuestro atributo out y para verlo en acción porque si vuelves a
cargar la página no va a haber ninguna diferencia lo que tenemos que hacer es por un segundo
interrumpir nuestra

54:15conexión a internet voy a hacer exactamente eso ya lo desactiva y ahora si volvemos a

cargar la página vemos nuestra descripción aquí un lindo gato naranja

54:30recostado sobre su espalda y vemos este simbolito que nos indica que allí había una
imagen pero no se descargó adecuadamente esa es la importancia de up le permite al usuario
tener una alternativa en texto de la imagen que se

54:45supone que debería estar allí y en el caso de un lector de pantalla esta sería la
descripción que se daría para la imagen digamos que no incluimos este atributo digamos que
lo removemos completamente desde nuestra imagen y

55:00volvemos a cargarla sin conexión a internet aquí vemos ese símbolo pero ya lo tenemos
una descripción y eso va a afectar la experiencia del usuario siempre se debería incluir este
atributo para todas las imágenes que incluyas en

55:15tu página html bien si volvemos a conectarnos a internet volvemos a ver la imagen y aquí
volvemos a incluir el atributo out genial ya sabes cómo incluir una imagen

55:30que está ya alojada en internet pero como puedes incluir una imagen desde una carpeta
en tu dispositivo veamos como lo podemos hacer si en nuestra carpeta curso de html y

55:45css donde tenemos nuestro archivo index html también agregamos una imagen digamos
lasaña ya vas a ver por qué estamos incluyendo la hazaña podemos incluir esta imagen en
nuestra página web

56:00veamos cómo si volvemos a presentar la barra de actividad que tenemos aquí a la

izquierda podemos abrir el explorador y vemos la imagen lasaña jpg no estoy

56:15usando n porque normalmente usar caracteres que no sean estándar en inglés pueden
resultar en errores inesperados así que en este caso no voy a usar la ñ para el nombre de la
imagen

56:30la podemos ver aquí vamos a necesitar otra etiqueta de imagen pero en este caso en
source en este atributo en lugar de escribir una dirección web vamos a indicar dónde está
ubicada esa imagen

56:45respecto a nuestro archivo html si está en la misma carpeta podemos simplemente usar
su nombre lasaña jpg e incluso la vemos aquí como una opción para auto completarlo

57:00veamos el resultado de nuestra página aquí podemos ver la imagen si volvemos a cargar
la página vemos la lasaña perfecto ahora qué pasa si la imagen está dentro de otra carpeta
digamos que creó una carpeta llamada
57:15imágenes ahora mueva esa imagen a la carpeta confirmó que sí quiero moverla y ahora
ves que la imagen está dentro de esa carpeta podemos confirmarlo si vamos a la carpeta
recuerda que tratamos de no

57:30introducir caracteres que no sean estándar en inglés por eso no estoy incluyendo el
acento aquí en imágenes cuál sería el cambio que debemos hacer para que esta imagen se
reconozca porque si intentamos otra vez mostrar la página

57:45vas a ver que en lugar de la lasaña vemos que allí debería haber estado una imagen pero
no se encontró porque ahora la imagen no está directamente en la misma carpeta del archivo
html está en otra carpeta así que debemos especificar

58:00el nombre de esa carpeta aquí le estamos diciendo a nuestro archivo la imagen está en la
carpeta imágenes que está ubicada en la misma carpeta que el archivo html

58:15y luego el archivo está dentro de esa carpeta eso es lo que hacemos aquí con esta barra
decimos dentro de esta carpeta está este archivo si guardamos nuestro archivo html y
volvemos a cargar

58:30la página aquí podemos ver nuestra lasaña también debemos agregarle un atributo alt a
esta imagen la hazaña en este caso para los atributos si podríamos usar la ñ para que el lector

58:45de pantalla se está configurado en español puede pronunciar la letra eñe genial ya sabes
cómo crear un elemento imagen y cómo tomar esa imagen de internet o de una carpeta en tu

59:00dispositivo siempre recuerda incluir también el atributo alt ahora pasemos a otro
elemento muy importante sin el cual la web no sería lo que es en este momento los enlaces
continuamos

59:15vamos a ver cómo puedes crear un enlace en html en html un enlace se crea usando

59:30la etiqueta a hank en inglés por eso usamos la letra recuerda a enlace podemos por
ejemplo convertir una parte de nuestro texto en un enlace eso es muy como si tenemos aquí
un párrafo y

59:45queremos convertir parte de ese texto en un enlace por ejemplo la parte que dice
imágenes de gatos simplemente vamos a colocar esto en pantalla completa para verlo con más
detalle

1:00:00simplemente escribimos la etiqueta a la de cierre debe estar al final del texto que
queremos convertir en un enlace vamos a colocar esto en una sola línea ya colocar lo más
grande para poder ver los detalles este es el texto que vamos

1:00:15a convertir en un enlace ahora si vemos la página y la volvemos a cargar veamos qué
pasa todavía el texto se muestra exactamente igual no hay ningún cambio no vemos algún
cambio visible o funcionan en el texto porque

1:00:30porque no hemos especificado a dónde queremos que lleve ese enlace en esta parte
vamos a ver los enlaces que llevan a otras páginas web por ejemplo frito el campeón español si
vamos a picar el

1:00:45campeón español en google chrome y copiamos esa dirección web esa página web
debemos especificar la aquí como el valor del atributo h ref el valor de h ref
1:01:00representa el destino de ese enlace en este caso el destino va a ser la página de freak o
camps así que aquí tenemos el resultado final veamos cómo se ve en nuestra página ahora
puedes ver que aquí

1:01:15el formato del texto cambio ahora está subrayado y lo vemos en morado porque ya yo
en mi dispositivo ya había ingresado a esa página el color sería un azul si hacemos clic en él
vamos a llegar a la página de destino

1:01:30freak o el camp en español genial no pero en este momento nuestro enlace nos está
llevando en la misma pestaña de nuestra página a la página de destino free gorka puedes ver
que todo

1:01:45ocurre en la misma pestaña y normalmente lo que queremos es que se abra el enlace

en una pestaña nueva cómo podemos hacerlo veamos aquí lo único que tenemos que agregar
a

1:02:00el elemento del enlace es otro atributo llamado targets target es un atributo que nos
va a permitir especificar donde queremos que se abra ese enlace su valor

1:02:15si es bajo plank significa que queremos abrir ese enlace en una pestaña nueva no
importa el orden en el que especificamos los atributos ok si una etiqueta tiene más de un
atributo todos van a ser considerados no importa el orden vamos a

1:02:30ver cuál es el efecto de este cambio en nuestra página si volvemos a cargar la página
visualmente no hay una diferencia pero al hacer clic en el enlace vemos que se abre una nueva
pestaña y volar aquí vemos la página en una pestaña

1:02:45nueva y nos mantenemos en nuestra página original por motivos de seguridad también
se recomienda agregar este valor que tenemos aquí este atributo red este valor

1:03:00este atributo nos permite prevenir un ataque llamado nave es un tipo de ataque en el
que la pestaña de origen se reemplaza para que el usuario ingrese sus datos y eso sería una
brecha de seguridad

1:03:15y si volvemos a cargar la página podemos ver que no se afecta para nada el
comportamiento bueno ya tenemos nuestro enlace aquí que nos lleva a una página externa
recuerda comenzamos con una

1:03:30etiqueta de apertura y luego hr que es donde vamos a llegar al hacer clic en el enlace
luego el atributo target con el valor planck para abrir en una pestaña nueva y el atributo orbe o
con estos dos valores

1:03:45separados por un espacio para prevenir ataques y aquí tenemos la etiqueta de cierre
todo esto aplica para enlaces externos que nos llevan a otra página como por ejemplo freak o
el campeón español pero también podemos crear

1:04:00enlaces internos dentro de nuestra página y también podemos convertir imágenes en

enlaces es lo que vamos a ver en las próximas partes del curso así que continuemos

1:04:15veamos cómo puedes crear enlaces que nos llevan a secciones o partes específicas de
la misma página web primero que todo vamos a expandir un poco el contenido de
1:04:30nuestra página con él loren ipsum con temática de gatos que usamos en un ejemplo
anterior eso nos va a permitir saltar de una parte de la página a otra puedes ir a la página de
flickr cam

1:04:45punto org islas español español haces clic aquí empieza es gratis puedes crear una
cuenta puedes ingresar al currículum certificación de diseño web responsivo y aquí vamos

1:05:00a la parte que nos permite crear enlaces hacia secciones internas de una página aquí
conseguimos los párrafos están en inglés los vamos a usar solo provisionalmente porque el
idioma de nuestra página especifica que están en

1:05:15español podemos cambiar el idioma de estos elementos individualmente pero como

esto es solo para fines de demostración durante esta parte en particular del curso no lo vamos
a agregar vamos a intentarlo con tres

1:05:30niveles de tentación para que estén dentro del elemento main podemos separar los
párrafos también con una línea en blanco se recomienda usar una línea en blanco para separar
partes

1:05:45importantes de la página o grupos de elementos que no estén relacionados en general

para hacer que la estructura de la página sea más fácil de identificar y yo creo que en este caso
ayuda a agregar una línea en blanco entre cada uno de los párrafos si volvemos a cargar la

1:06:00página aquí podemos ver los distintos párrafos también vamos a agregar un título
digamos h 3

1:06:15párrafo 1 luego vamos a cargar la página y aquí vemos párrafo 1 párrafo 2 estamos
simplemente agregando títulos para poder usarlos en nuestros enlaces internos párrafo 1
párrafo 2

1:06:30párrafo 3 y párrafo 4 claro en tu página web esto estaría más específico sería ya el
contenido de tu página si quisieras especificar el idioma del párrafo puedes agregar este
atributo en su etiqueta de

1:06:45apertura su idioma es inglés así que lo podemos especificar aquí en los elementos
individuales porque no es el idioma que especificamos aquí arriba pero para fines de
demostración temporalmente no vamos a incluir ese

1:07:00atributo que vamos a crear nuestro enlace interno digamos que queremos crear un
tipo de índice antes de la imagen del gatito vamos a escribir párrafo 1

1:07:15luego párrafo 2 nuevo párrafo 3 y párrafo 4 que vamos a tener sólo cuatro párrafos
aquí vamos a crear en las seis que nos lleven al título de cada uno de los párrafos

1:07:30para que cuando hagamos clic encima de ese enlace inmediatamente bajemos a donde
está ubicado ese párrafo en la página veamos cómo lo podemos hacer como queremos que
sean enlaces en lugar de

1:07:45una etiqueta p tenemos que escribir una etiqueta para convertirlo en un enlace vamos
a hacerlo para cada uno de estos elementos y ya vas a ver que vamos a especificar como el
destino aquí lo tenemos y si volvemos a cargar
1:08:00la página puedes ver que todavía en este momento no se muestran como enlaces
tenemos que especificar el destino cuál va a ser el destino el destino va a ser una parte interna
de la página por ahora

1:08:15simplemente vamos a colocar un número el numeral funciona para crear enlaces que
no te llevan a ningún lado simplemente están allí para mostrarse mostrarle al usuario que es
un enlace pero todavía no funciona son muy útiles

1:08:30durante el proceso de desarrollo ves que si hacemos clic en ellos no vamos a ningún
lado para poder desplazarnos dentro de la página tenemos que asignarle al elemento una
identificación

1:08:45única eso lo logramos con este atributo vamos a presentar el código aquí el atributo se
llama haití en inglés haití significa identificador único es como un nombre que le vamos a
asignar a ese

1:09:00elemento es único para ese elemento en toda la página web en este caso vamos a
asignarle el haití párrafo uno entre comillas y escribimos ese haití para convertir este enlace en
un enlace

1:09:15interno que nos lleve hasta este título párrafo uno tenemos que especificar como su
destino en h ref su aire párrafo 1 puedes ver que estamos conectando los porque estamos aquí

1:09:30identificando los de forma única a ese elemento decimos que su destino debe ser
dónde está este elemento en la página si guardamos el archivo y volvemos a cargar la página
hacemos clic en nuestro enlace y vamos

1:09:45directamente a ese elemento párrafo 1 que tiene ese de esta identificación única
vamos a hacerlo nuevamente para cada uno de los párrafos tenemos que agregarles el
atributo haití con un identificador

1:10:00único para el párrafo 2 asignamos creamos este de párrafo 2 para el párrafo 3 dyn
párrafo 3 puedes ver que no estoy

1:10:15incluyendo el acento para no incluir caracteres que no son estándar en inglés en este
caso si los teníamos que incluir porque es el texto que se va a mostrar al usuario pero en la
parte interna que no se va a mostrar podemos omitir

1:10:30y luego para párrafo 4 genial ahora ya cada uno tiene su haití y podemos volver aquí a
los enlaces y asignarles su destino párrafo 3 y luego

1:10:45párrafo 4 guardamos el archivo volvemos a cargar la página y si vamos aquí si subimos

aquí podemos ver que todos son enlaces y el único que vemos aquí en morado es el que ya
hicimos clic para el párrafo 1 luego para el párrafo 2 si

1:11:00hacemos clic antes lo veíamos en azul y ahora lo vemos en morado y llegamos al

párrafo 3 y finalmente al párrafo 4 en este caso los títulos no quedan aquí en el límite

1:11:15superior porque ya estamos en el final de la página no podemos bajar más para llegar a
esos elementos pero igual se presentan en la página en un rango visible así que ya sabes cómo
crear enlaces internos en tu página web
1:11:30recuerda simplemente le asignas una identificación una identificación única para ese
elemento un nombre que puedes usar para referirte a ese elemento en particular con el
atributo haití y de y

1:11:45luego cuando vas a crear el enlace te refieres a ese haití con signo de numeral un
hashtag genial en la próxima parte vamos a ver cómo puedes lograr que

1:12:00las imágenes de tu página web también funcionen como enlaces esto va a ser muy útil
y ya vas a ver cómo podemos combinar ambas etiquetas la de imagen en la cee

1:12:15bien ahora vamos a ver cómo puedes convertir estas imágenes que tenemos aquí
específicamente esta imagen del gatito en un enlace para eso lo primero que vamos a hacer es
eliminar estos

1:12:30enlaces y estos párrafos todos estos elementos no van a ser parte de la versión final de
nuestra página volvemos a cargar la página y aquí puedes ver solo las imágenes y estos títulos
y este párrafo genial ahora cómo

1:12:45podemos hacer que esta imagen actúe como un enlace en este momento si hacemos
clic sobre la imagen no ocurre nada y también observa que el cursor se mantiene intacto no
cambia pero cuando

1:13:00sea un enlace este cursor se va a volver una manito cómo podemos lograr ese efecto
primero tenemos que conseguir el elemento que queremos convertir en un enlace en este
caso este es el elemento de la imagen un lindo gato naranja recostado sobre su espalda

1:13:15vamos por un momento a presentar el código en pantalla completa la etiqueta del

elemento de la imagen se va a mantener exactamente igual lo único que debemos hacer para
convertir esa imagen

1:13:30en un enlace es rodearla con las etiquetas del elemento enlace la etiqueta a la etiqueta
de la imagen va a estar rodeada por la etiqueta de apertura

1:13:45y la etiqueta de cierre para ese elemento y vamos a especificar el destino como un
atributo aquí lo tenemos digamos que queremos que la imagen nos lleve a áfrica un campo org
extras español copiamos y pegamos esa dirección

1:14:00web de nuestro navegador de nuestro browser y lo asignamos como el valor del

atributo h breve nota qué aquí estamos creando un enlace ok

1:14:15estamos creando un enlace al rodear la etiqueta de la imagen con la etiqueta de enlace

y le estamos diciendo al browser a dónde queremos ir si hacemos clic sobre ese enlace

1:14:30volvemos a cargar la página y ahora puedes ver como el cursor cambia a una manito
cuando está sobre la imagen si hacemos clic sobre la imagen vamos directamente áfrica organ
punto org es

1:14:45nadie español y podemos volver a nuestra página anterior también todo lo que
aprendiste sobre enlaces aplica para este tipo de enlace imágenes que actúan como enlaces
puedes abrir los en una

1:15:00pestaña nueva con el atributo target guión bajo like aquí puedes volver a cargar la
página y puedes ver que se abre en una pestaña nueva y también puedes agregar el atributo
red por seguridad estos valores no operar y no
1:15:15reefer estos dos valores para el atributo real si ponemos esto en pantalla completa
puedes verlo más claro que simplemente estamos creando una como lo hacíamos
normalmente pero en lugar de texto tenemos dentro del enlace una

1:15:30imagen y todo va a funcionar exactamente igual genial ya sabes cómo crear enlaces a
partir de imágenes eso es muy muy importante y es comúnmente usado hoy en día

1:15:45cuando comenzamos a hablar sobre los enlaces en html nombramos un tipo de enlace
que es muy útil mientras estás creando la estructura de tu página web los enlaces muertos
serían la traducción

1:16:00literal en inglés se llaman the links son enlaces que no llevan a ningún lado
simplemente están allí para mostrarnos cómo se vería un enlace en ese lugar

1:16:15específico de la página y luego cuando tengamos el destino podemos simplemente

reemplazarlo en el atributo h raf son muy útiles mientras estamos construyendo la página
veamos como los puedes crear aquí tenemos dos enlaces uno en el texto

1:16:30imágenes de gatos y otro en la imagen para convertir esos enlaces en enlaces muertos
o enlaces que nos llevan a ningún lado simplemente tendríamos que borrar esta dirección de
destino y escribir un

1:16:45símbolo de numerar escribir el numeral el hashtag lo reemplazaría mos en ambos

enlaces y así el browser no va a saber a dónde debe llevarnos simplemente va a interpretar
que el enlace no lleva a

1:17:00ningún lado vamos a volver a cargar la página y si hacemos clic en el enlace

simplemente nos abre nuevamente esa página en una nueva pestaña porque estamos
indicando aquí con target que queremos que el

1:17:15resultado se abra en una pestaña nueva si no queremos que se abra en una pestaña
nueva todavía por ejemplo podemos quitar estos atributos simplemente dejamos hr cargamos
otra vez

1:17:30la página y como puedes ver el enlace al hacer clic no hace nada cuando ni siquiera lo
estamos abriendo en una pestaña nueva vamos a revertir este cambio que hicimos y vamos a
probar la imagen si hacemos clic sobre la imagen abrimos

1:17:45la misma página en una pestaña nueva y también podemos eliminar estos atributos
guardamos la página y así al hacer clic sobre la imagen no vamos a ningún lado

1:18:00revertimos el cambio nuevamente para así abrirlo en una pestaña nueva y ahora
tenemos nuestros enlaces muertos enlaces que nos llevan a ningún lado eso es muy útil por
ejemplo cuando el destino de ese enlace es una página que todavía no has completado o que
no has creado o si

1:18:15todavía no estás completamente seguro segura de a dónde debería llevar ese enlace es
muy útil durante el proceso de desarrollo web genial ya sabes cómo crear enlaces muertos en
html ya

1:18:30cubrimos los tipos principales de enlaces enlaces externos que llevan otras páginas web
enlaces dentro de la misma página enlaces con imágenes y enlaces muertos o que no
funcionan como tal como enlaces así que vamos a
1:18:45comenzar a ver otro tipo de elementos en html que es muy útil las listas listas
ordenadas y listas no ordenadas las veremos en la próxima parte buen trabajo por llegar hasta
aquí continuemos

1:19:00comenzamos con las listas no ordenadas cuando creamos una de estas listas vamos a
ver viñetas para cada uno de los elementos de la lista por ejemplo vamos

1:19:15aquí abajo de nuestras imágenes a crear una lista enumerando las cosas que los gatos
aman y que los gatos odian vamos a crear una lista no ordenada para las cosas que los gatos
aman así que

1:19:30vamos a crear aquí un encabezado listas de gatos y luego aquí vamos a crear un párrafo
que diga cosas

1:19:45que los gatos aman dos puntos vamos a volver a cargar nuestra página y aquí vemos el
texto tú vas a ver este texto y estas imágenes más pequeñas en tu navegador porque yo aquí
tengo el zoom

1:20:00en 150 puedes bajarlo o subirlo dependiendo de lo que necesites para ver en este caso
para que sea más fácil ver el resultado en dispositivos móviles aumente el zoom a

1:20:15150 ok aclarado esto vamos a continuar con nuestra lista de cosas que los gatos aman
para crear una lista no ordenada la clave es usar esta etiqueta este

1:20:30elemento y el l proviene del inglés and other list que significa lista no ordenada cuando
creamos este elemento debemos especificar cada uno de los elementos de la lista eso lo
hacemos con el elemento

1:20:45l y que en inglés significa list ait en el elemento de la lista en español para cada uno de
los elementos de la lista debemos crear una etiqueta de apertura y

1:21:00una etiqueta de cierre de tipo elegí bien esas etiquetas van a estar anidadas o
contenidas dentro del elemento de lista no ordenada eso es lo que le dice al browser que es
debe colocar viñetas

1:21:15para cada uno de estos elementos ya vas a ver el resultado vamos a escribir lo primero
que los datos aman es menta gatuna es sorprendente pero si es una planta que les encantan
los gatos puedes

1:21:30investigar más sobre esa planta en internet luego los apuntadores láser y finalmente la
lasaña genial ya tenemos nuestra lista también podemos eliminar

1:21:45este espacio esta línea en blanco porque estos dos elementos están relacionados
tenemos el título y la lista que corresponde a ese título así que podemos agruparlos
lógicamente y no incluir un espacio entre ellos solo en el archivo

1:22:00eso no va a tener ningún impacto en su presentación si cargamos nuevamente la

página aquí podemos ver cosas que los gatos aman y los tres elementos menta gatuna
apuntador slasher y lasaña por eso es que teníamos la imagen de la

1:22:15lasaña aquí ahora puedes ver el propósito de por qué incluimos la imagen de la lasaña
en nuestro proyecto por si tenías curiosidad como la imagen de la lasaña debería estar debajo
de esta lista porque el último elemento aquí es
1:22:30lasaña vamos a cambiar su ubicación en lugar de estar después de la imagen del gatito
vamos a colocarla después de la lista y puedes ver lo fácil que es hacer cambios en html
simplemente copiamos y

1:22:45pegamos este elemento debajo de la lista volvemos a cargar nuestra página y aquí está
debajo de la lista de las cosas que los gatos aman exactamente donde la necesitábamos genial
y algo que identifica a las listas no ordenadas es

1:23:00el hecho de que aquí tenemos viñetas puedes ver que tenemos viñetas en lugar de
números para las listas ordenadas y vamos a tener números en la próxima parte vamos a ver
ese tipo de listas así que continuamos

1:23:15cuando creamos una lista ordenada cada uno de los elementos de la lista tiene un
número específico veamos ahora vamos a hacer una lista ordenada para las

1:23:30cosas que los datos o bien en este caso vamos a agregar un párrafo que diga cosas que
los gatos odian tenemos dos puntos aquí y vamos a crear nuestra lista ordenada

1:23:45la única diferencia con la estructura de la lista no ordenada que tenemos aquí arriba es
que la etiqueta en lugar de ser l va a ser o l o l crea un elemento

1:24:00de tipo order list que significa lista ordenada en español dentro de ese elemento vamos
a tener un elemento les

1:24:15hay terna l y para cada uno de los elementos de la lista en este caso van a ser tres el
primero va a ser tratamientos anti pulgas el segundo va a ser truenos y el tercero
sorprendentemente va a ser otros gatos a

1:24:30menos que tengas un gatito que es muy muy sociable otros gatos también es algo que
los gatos odian ya tenemos nuestra lista ordenada aquí vamos a dejar un espacio para separar
y luego vamos a cargar la página nuevamente aquí puedes

1:24:45ver la lista ordenada cosas que los gatos odian tratamientos anti pulgas truenos y otros
gatos ahora en lugar de viñetas vemos números 1 2 y 3 tiene un orden específico en la lista y
cada

1:25:00elemento está en su posición específica genial ahora vamos a incluir otra imagen para
representar algo que los gatos odian aquí si abrimos el explorador vamos a colocar esto en
pantalla completa abrimos el explorador puedes

1:25:15ver que en la carpeta imágenes agregué una imagen llamada gatos punto jpg aquí
tenemos la imagen unos lindos gatitos esa imagen la vamos a colocar aquí abajo creamos un
elemento de imagen

1:25:30y recuerda el nombre del atributo src es una abreviación de su verse en inglés que
significa fuente en español como está dentro de la carpeta imágenes escribimos imágenes y
luego datos punto

1:25:45jpg ahora si vemos la página cerramos aquí el explorador luego cargamos la página aquí
vemos la imagen de los gatitos exactamente lo que queríamos y podemos agruparlos
lógicamente aquí podemos
1:26:00remover este espacio porque tenemos el título la lista de elementos y la imagen que
corresponde al último elemento y esa misma estructura la replicamos aquí para nuestra
segunda lista genial ya sabes

1:26:15cómo crear listas no ordenadas y listas ordenadas recuerda la única diferencia en su

estructura es la etiqueta la etiqueta l crea una lista no ordenada y la etiqueta o l crea una lista
ordenada

1:26:30y para cada uno de sus elementos debes crear un elemento de tipo l y genial buen
trabajo y ya sabes cómo crear listas en html ahora vamos a comenzar una parte del curso en la
que

1:26:45vas a ver varias etiquetas que van a ser útiles para personalizar el formato de texto y
eso es exactamente lo que vas a ver en las próximas partes así que continuemos buen trabajo
y algo puedes

1:27:00aprender html sólo necesitas entusiasmo constancia y dedicación y si estás viendo el

curso sabes que lo tienes sabes que puedes hacerlo continuemos

1:27:15si queremos que parte de nuestro texto se presente en negrita podemos usar la
etiqueta strong strong significa fuerte en español

1:27:30vamos a resaltar parte de nuestro texto digamos que queremos que la palabra o diane
esté en negrita simplemente vamos a esa palabra en nuestro párrafo y la rodeamos

1:27:45con la etiqueta strong abrimos la etiqueta y luego la cerramos después de el texto la

palabra en este caso no vamos a incluir los dos puntos en este elemento strong vamos a

1:28:00excluirlo sólo la palabra odia no si volvemos a cargar la página ahora vemos que obvian
se muestra en negrita y todo gracias al elemento oa la etiqueta strong genial ahora veamos
cómo puedes

1:28:15hacer qué parte del texto se muestre en letra cursiva en la próxima parte para que
parte del texto se muestre en

1:28:30letra cursiva debemos usar la etiqueta m digamos que en esta lista queremos resaltar
la palabra aman con letra cursiva primero buscamos ese elemento en nuestro

1:28:45archivo html y decimos aquí aman m y luego la cerramos rodeamos solamente el texto
que queremos que esté en cursiva de esta forma ahora si volvemos a cargar la página

1:29:00vemos esta parte del texto en letra cursiva cosa que los gatos aman simplemente con
rodear el texto con la etiqueta o el elemento m que se usa para enfatizar partes del contenido
genial ya sabes cómo hacer que el texto

1:29:15se muestre en negrita y en cursiva también hay otra opción que puede ser útil para
ciertas aplicaciones que es mostrar un texto tachado eso lo vamos a ver en la próxima parte

1:29:30para tachar parte de un texto digamos una palabra tenemos que rodear la palabra con
la etiqueta f s viene de la

1:29:45palabra strikes true en inglés que significa tachar vamos a ver si tenemos una lista aquí
por ejemplo digamos que en una investigación se descubrió que a los gatos ya no les gusta
tanto la lasaña así que vamos a tachar este
1:30:00elemento en la lista pero vamos a tachar los visiblemente no lo vamos a eliminar
solamente sino que va a aparecer tachado para eso agregamos este elemento s

1:30:15en nuestro archivo y rodeamos la palabra con las etiquetas seguimos incluyendo el
elemento de la lista esta etiqueta en ley pero rodeamos el texto

1:30:30con ese ahora si cargamos nuevamente la imagen vemos el texto tacha exactamente lo
que queríamos recuerda la etiqueta es el equivalente a texto tachado genial ahora vamos a ver
cómo puedes agregar

1:30:45una línea horizontal a tu página esto puede ser útil para dividir distintas secciones
puedes agregar una línea horizontal a tu página web

1:31:00por ejemplo vamos a agregar una línea antes de las listas de gatos aquí en nuestro
archivo html buscamos ese elemento lista de gatos

1:31:15antes de ese elemento escribimos la etiqueta hr la tenemos aquí esto crea un elemento
que se denomina en inglés horizon to blue horizon

1:31:30que en español se traduciría como una línea horizontal si cargamos la página

nuevamente vemos aquí esta línea horizontal podemos cambiar su aspecto también cuando
comencemos a trabajar con css pero por el momento vemos cómo se

1:31:45presenta esa línea por defecto pero puedes ver que puede actuar como un separador
de las distintas secciones de la página recuerda etiqueta hr es un elemento que no requiere
una etiqueta de

1:32:00apertura y de cierre sólo requiere la etiqueta de apertura algo parecido a la etiqueta de

imagen que se cierra automáticamente no necesita una etiqueta de cierre bien buen trabajo
continúa así

1:32:15ya estamos llegando a la última parte de la sección sobre html del curso en vamos a
hablar un poco sobre los formularios y eso es exactamente lo que vas a aprender a hacer en las
próximas partes del curso cómo crear estos elementos así que te veo allí

1:32:30para crear un elemento que representa un formulario en nuestra página usamos la

etiqueta form form significa formulario

1:32:45en español esta es la etiqueta que usamos aquí si vamos a necesitar para este
elemento una etiqueta de apertura y una etiqueta de cierre porque todos los elementos que
sean parte de ese formulario van a estar

1:33:00contenidos dentro del elemento form así que debemos intentar los uno de los
elementos que podemos tener dentro de un formulario es un campo de input input es un
elemento que vamos a usar para obtener un valor una respuesta del

1:33:15usuario por ejemplo si queremos que el usuario escriba una respuesta o ingrese un
valor podemos asignar el tipo de input como text ese sería el valor texto significa texto en
español vamos a

1:33:30pedirle al usuario que ingrese un cierto texto si vuelvo a cargar la página ahora puedes
ver al final de la página un campo que nos permite ingresar texto por
1:33:45ejemplo una ese campo cuando nosotros creemos un botón con el texto enviar de tipo
super hornet significa más o menos como enviar vamos a tener estos dos elementos de
nuestro formulario

1:34:00la respuesta del usuario va a ser ingresada aquí luego hacemos clic en enviar pero a
cual destino es sólo especificamos aquí en la etiqueta de apertura de forma ese valor va a

1:34:15corresponder a action el atributo action tiene un valor correspondiente que es el

archivo en el servidor con un nombre específico este atributo action representa la dirección en
el servidor de el programa que va a manejar esos

1:34:30datos el archivo que va a manejar esos datos por ejemplo en este caso sería el archivo
enviar respuesta en este momento como no tenemos un servidor activo no podemos mostrar
exactamente qué va a

1:34:45pasar cuando ingresemos los datos y enviamos nuestras respuestas pero tienes que
saber que esta es la dirección del archivo en el servidor vamos a volver a cargar la página y
veamos qué ocurre si ahora hacemos clic en enviar

1:35:00vemos que dice que no se pudo acceder al archivo porque porque si ves aquí arriba
estamos tratando de ingresar al archivo enviar respuesta ese archivo estaría alojado en el
servidor y manejaría las

1:35:15respuestas del usuario en el formulario genial tenemos una estructura un formulario

básico podemos agregarle un texto que le indique al usuario qué tipo de valor debe ingresar
aquí porque hasta ahora este campo en blanco no es muy

1:35:30explícito si el usuario debe ingresar un valor no va a saber necesariamente que valor

ingresar vamos a ver cómo puedes hacer esto en la próxima parte

1:35:45si queremos agregar un texto que le dé una pista al usuario sobre qué valor debe
ingresar aquí en un campo de texto usamos un atributo que se llama place holder place water
puede ser traducido

1:36:00como un marcador de posición estamos marcando o dándole una pista al usuario de

que debe ingresar aquí pero apenas el usuario comienza a escribir ese valor va a desaparecer
ese atributo

1:36:15lo debemos agregar al elemento inputs el campo de texto vamos a agregar el atributo
place holder y como valor vamos a escribir lo que

1:36:30queremos que se muestre digamos que es la url la dirección web de la foto de tu gato
digamos que el formulario nos permite indicar la dirección donde está la foto del gato que se
quiere agregar a la base

1:36:45de datos si cargamos la página nuevamente ahora puedes ver ese texto que agregamos
el place holder url de la foto de tu gato si hacemos clic todavía se muestra pero al momento
que empezamos a

1:37:00ingresar nuestro valor desaparece aparece desaparece aparece y desaparece este

atributo play shoulder es muy útil para crear formularios claros y sencillos de entender para el
usuario
1:37:15verás cómo puedes hacer que un campo sea obligatorio para enviar un formulario en la
próxima parte del curso así que continuemos

1:37:30en muchos casos vamos a necesitar que un formulario contenga ciertos valores que los
campos de esos formularios no estén vacíos por ejemplo aquí si tenemos en este campo vacío
y lo hemos escrito

1:37:45ningún valor para la dirección web o la ubicación de la foto de tu gato y hacemos clic
era enviar igual se va a intentar enviar esa respuesta aunque el campo esté vacío aunque no
exista ese valor

1:38:00para evitar esto que puede generar errores y normalmente necesitamos un conjunto
mínimo de respuestas simplemente agregamos un atributo llamado big wire este atributo

1:38:15nos permite hacer que ese campo sea requerido sea obligatorio ahora sí volvemos a
cargar la página y hacemos clic en enviar vemos este mensaje y es fill out games field por favor
complete

1:38:30este campo o por favor llene este campo e ingrese algún valor si escribimos ahora un
valor por ejemplo hola si se va a intentar enviar los datos del formulario genial simplemente
rico ayer solo esa

1:38:45palabra no necesita ningún valor aunque con incluir esa palabra ese atributo ya
estamos indicando que este campo esté input es requerido para enviar el formulario genial ya
sabes cómo hacer que un campo

1:39:00sea obligatorio en la próxima parte vamos a ver cómo puedes agregar nuevos
elementos al formulario incluyendo botones de radio y casillas de verificación que son muy
útiles para recibir una respuesta del usuario darle

1:39:15ya opciones predeterminadas eso lo veremos en las próximas partes del curso así que
continuemos

1:39:30vamos a ver un nuevo tipo de elemento input hasta ahora hemos visto solamente el
input de tipo texto pero ese no es el único tipo de elementos que podemos crear para
nuestros formularios otro elemento importantísimo es el elemento

1:39:45de tipo radio este elemento nos permite crear un botón de radio también llamado un
botón de opción alguna vez has visto ese tipo de formulario en el que solo puedes seleccionar
una opción y las opciones

1:40:00son como circulitos que puedes seleccionar con el ratón con el + ese tipo de formulario
es el que vamos a crear con este tipo de elementos si volvemos a cargar la página luego de
hacer este cambio ahora vemos este

1:40:15puntito que tenemos aquí que podemos seleccionar con el cursor pero ese puntito
como tal no es muy descriptivo tenemos que agregar el texto que corresponde a ese botón de
radio aquí lo tenemos por ejemplo esta opción

1:40:30corresponde a interior luego digamos que queremos crear otro botón de radio para
otra opción ya sé lo que estás pensando que no estoy cerrando como tal este elemento este
elemento se
1:40:45cierra automáticamente no necesita una etiqueta de cierre y aquí estamos escribiendo
un texto que no está encerrado por ninguna etiqueta pero ya va a saber qué es lo que ocurre
ya vas a ver cómo vamos a encerrar este texto

1:41:00entre viñetas interior exterior vamos a mantenernos con dos opciones para las
opciones de radio y vamos a redactar estas opciones de esta forma tu gato prefiere estar en el
interior en

1:41:15lugares techados en tu casa o cerrado o en exterior en el jardín jugando puedes

seleccionar algunas de estas dos opciones veamos qué ocurre si volvemos a

1:41:30cargar la página aquí vemos interior y exterior podemos verlos aquí pero qué ocurre si
hacemos clic en ambas opciones vemos que ambas se pueden marcar a la vez y eso no es lo
que queremos cuando tenemos ese tipo de elemento de input

1:41:45cuando usamos los botones de radio botones de opción queremos que sólo una de
esas opciones se marque a la vez si el gato prefiere exteriores no puede preferir interiores así
que queremos que se desmarque la opción anterior si

1:42:00cambiamos eso lo podemos lograr con un grupo de botones de radio lo cual vamos a
ver en la próxima parte por ahora lo que vamos a lograr con una etiqueta nueva que vamos a
ver un elemento nuevo

1:42:15es que cuando se haga clic en el texto también se seleccione el botón que corresponde
a esta opción esto es muy útil para dispositivos touch y también para accesibilidad también es
más

1:42:30sencillo para nosotros hacer clic en el texto en lugar del botoncito vamos a cargar la
página nuevamente para que las opciones no estén seleccionadas y veamos qué ocurre si
hacemos clic en el texto nada ocurre no se selecciona la opción

1:42:45el botón correspondiente como podemos lograrlo con una etiqueta llamada playbook
ese tipo de elementos lay bone literalmente significa etiqueta en

1:43:00español pero hay una sutil diferencia en inglés entre tag y leiva así que vamos a
referirnos a ella como leiv on vamos a usar la etiqueta ley book y vamos a rodear el contenido

1:43:15de ese botón de radio toda la etiqueta input todo el elemento importe y el texto va a
estar rodeado por ley vol tenemos la etiqueta de apertura y tenemos la etiqueta de cierre bien
vamos

1:43:30a volver a cargar la página y veamos si esto hizo algún cambio ahora como puedes ver
cuando hacemos clic en el texto ya se marca la opción correspondiente simplemente con
rodear los con una

1:43:45'llave' o con un elemento leyva con exterior esto no ocurre porque no está rodeado con
ley boom vamos a rodearlo con ley wood y veamos el cambio volvemos a cargar la página y
aquí lo podemos ver

1:44:00todavía no hemos solucionado ese detalle de solo marcar una opción a la vez pero si
estamos mejorando la interacción de nuestro formulario con el usuario algo útil que debes
conocer es que podemos relacionar aún más la etiqueta con el
1:44:15botón de radio a través de el atributo for a la etiqueta le podemos agregar un atributo
for cuyo valor debe ser igual a lighting de el elemento impone a quien permítanme poner esto
en pantalla

1:44:30completa para que lo veamos con más detalle a este botón de radio que tenemos aquí
le estamos asignando un haití y un identificador único cuyo valor es interior porque
corresponde de su opción

1:44:45interior le vamos a asignar el valor interior al atributo for y eso básicamente lo que
hace es conectar esa opción con la etiqueta vamos a hacer lo mismo para la segunda opción en
este caso vamos a escribir exterior

1:45:00escribimos el haití y todo se mantiene exactamente igual si volvemos a cargar la página

aquí vemos interior y exterior y todo funciona perfectamente genial ya podemos crear botones
de radio en la

1:45:15próxima parte vamos a solucionar ese problemita que nos permitía seleccionar más de
una opción a la vez así que veamos cómo podemos hacer esto en la próxima parte
continuemos

1:45:30veamos cómo podemos hacer que solo se marque una opción por cada grupo de
botones de radio para eso vamos a crear exactamente lo que acabo de mencionar un grupo de
botones de radio cuando creamos

1:45:45un grupo de botones de radio el browser va a saber que esos botones o esas opciones
pertenecen a la misma categoría digamos al mismo grupo de elementos y que solo uno puede
estar marcado a la

1:46:00vez para lograr esto solo tenemos que agregar un atributo a el elemento input de tipo
radio ese atributo se llama name aquí lo podemos ver name name que

1:46:15significa nombre en español en este caso digamos que se va a llamar ese grupo interior
exterior todos los elementos input de tipo radio que tengan este mismo nombre van a

1:46:30pertenecer al mismo grupo así que solo uno va a poder estar marcado a la vez aquí
vamos a agregarlo también para la segunda opción y volvemos a cargar la página vemos
interior exterior y ahora si

1:46:45hacemos clic en una opción y luego en otra opción vemos como la anterior se
desmarca porque sólo una puede estar marcada a la vez genial ya estamos logrando lo que
queremos para este tipo de elemento en el formulario buen trabajo

1:47:00hasta este momento los elementos en nuestra página se muestran en ciertos

1:47:15casos en la misma línea por ejemplo aquí si vamos a la parte final de nuestra página
tenemos los botones de radio botones de opción en la misma línea que el campo de texto y
también si

1:47:30presentamos nuestra página en pantalla completa vemos que el botón de enviar

también está en la misma línea ciertos elementos como las imágenes y las listas si se presentan
en sus propias líneas

1:47:45individuales pero no siempre es el caso cómo podemos especificar en html que

queremos que cada uno de estos elementos esté en su propia línea lo podemos hacer con la
etiqueta br veamos como la podemos usar si queremos que estos botones de radio estén en
líneas

1:48:00separadas lo primero que hacemos es ir a ese elemento en html interior y en luego

entre ese elemento y el siguiente

1:48:15agregamos a este elemento br viene de la palabra en inglés break que significa como
romper o separar los elementos representa un salto de línea en inglés

1:48:30un line break donde una línea termina y comienza a otra si volvemos a cargar la página
puedes ver que ahora cada uno de los botones de radio está en una línea diferente pero se
sigue cumpliendo el hecho de que sólo una opción puede estar

1:48:45marcada a la vez vamos a agregar otro salto de línea otra línea nueva entre este botón
de radio y el campo de texto que tenemos aquí si cargamos nuevamente la página vemos que
cada uno está en su

1:49:00línea correspondiente y finalmente también podemos agregar otra línea nueva antes
del botón y aquí lo tenemos cada uno en su línea correspondiente pero no tenemos que
dedicar en nuestro archivo una línea

1:49:15completa para esta etiqueta podemos simplemente agregarla al final del elemento y
eso va a indicar también que queremos que se inserte una línea nueva antes del próximo
elemento puedes ver

1:49:30que el resultado es exactamente el mismo genial ya sabes cómo puedes agregar una
línea nueva en la presentación de tu página para tener un elemento en cada línea recuerda la
etiqueta es br y es una etiqueta que no necesita una

1:49:45etiqueta de apertura y una etiqueta de cierre solo tenemos la etiqueta de apertura

vamos a ver otro tipo de elementos que podemos agregar a nuestro formulario las

1:50:00casillas de verificación donde vamos a ver los check mark o los símbolos que usamos
para marcar que algo está completado o correcto y podemos seleccionar varias opciones de
esa lista de casillas de verificación en inglés

1:50:15una casilla de verificación se denomina check box vamos a agregar estos elementos
aquí en nuestro formulario donde tenemos los botones de radio para separar en nuestro
archivo visualmente

1:50:30dónde está cada tipo de elementos vamos a agregar comentarios botones de radio
luego podemos referirnos a esta parte como texto y

1:50:45botón enviar aquí puedes ver cómo podemos usar los comentarios también para
aclarar las distintas partes de nuestra estructura y antes del texto y el botón enviar vamos

1:51:00a agregar nuestras casillas de verificación usamos el mismo tipo de elementos que
hemos estado usando hasta ahora en fort pero ahora el tipo el valor del atributo tipo va a ser
check box

1:51:15si cargamos la página nuevamente aquí puedes ver que apareció una casilla de
verificación igual que con los botones de radios botones de opción tenemos que agregar texto
para indicarle al usuario a qué corresponde esta opción
1:51:30digamos que queremos saber más sobre el gatito si es cariñoso perezoso y si es
enérgico no necesariamente una

1:51:45sola de las opciones es verdadera el gasto puede ser cariñoso y perezoso o perezoso y
enérgico o cualquier combinación de estas tres características así que las casillas de
verificación van a permitirle al usuario seleccionar

1:52:00varias opciones si es necesario vamos a cargar nuevamente la página y vemos las

casillas de verificación con su texto correspondiente cariñoso perezoso y enérgico pero lo
mismo ocurre con las

1:52:15casillas de verificación que con los botones de radio si seleccionamos el texto o

hacemos clic sobre el texto la casilla correspondiente no se marca y eso es exactamente lo que
queremos así que tenemos que hacer lo que hicimos con

1:52:30la etiqueta tenemos que agregar play bone igual que hicimos con los botones de radio
debemos rodear cada uno de estos elementos input y su texto con un elemento ley

1:52:45aquí tomamos la etiqueta de cierre exactamente igual playbook aquí al inicio y

tomamos la etiqueta de cierre

1:53:00y llevamos la etiqueta de cierre al final ahora si volvemos a cargar la página vemos aquí
que si hacemos clic en el texto se marca la casilla correspondiente exactamente lo que
queríamos

1:53:15igualmente deberíamos especificar el atributo for y el aire y de cada una de las casillas
de verificación for correspondería en este caso a cariñoso

1:53:30vamos a usar una n en lugar de la ella también podrías usar ella pero como no hemos
usado caracteres que no sean estándar en inglés hasta el momento en la parte de html vamos
a continuar con

1:53:45este estilo tenemos cariñoso y aquí en input tendríamos una id y cariñoso fort le
digamos perezoso y luego aquí tendríamos una id y que dijera perezoso

1:54:00y aquí tendríamos for enérgico no incluimos el acento y enérgico ok ya tenemos estos
atributos y lo único que nos falta es agregarle un atributo a

1:54:15estas casillas de verificación para indicar que pertenecen al mismo grupo en este caso
el comportamiento no va a cambiar como en los botones de radio porque igual vamos a poder
seleccionar

1:54:30cuántas opciones sean necesarias pero si las va a como agrupar si tienen el mismo valor
del nombre name personalidad ok name personalidad le agregamos este tributo a todos los
elementos input

1:54:45estamos agregando ese atributo al elemento input ok no al equipo el equipo de está

aquí input está aquí genial ya tenemos nuestras casillas de verificación y están funcionando

1:55:00correctamente algo muy útil también para la experiencia del usuario sería marcar una
opción por defecto tanto para los botones de radio como para las casillas de verificación que
cuando el usuario ingrese a la página
1:55:15vea una de las opciones ya marcada como lo podemos hacer con el atributo check en la
próxima parte veremos cómo puedes usar este atributo en el elemento impone así que te veo
allí en la próxima parte

1:55:30el atributo select que significa marcado en inglés nos permite marcar algunas de estas
opciones para cada uno de los

1:55:45grupos de casillas de verificación o de botones de radio simplemente tenemos que

agregar la palabra check aquí al elemento imputa únicamente for es el único que no

1:56:00pertenece a input todos los demás pertenecen a input light y el tipo el nombre y el
atributo chat que estamos agregando aquí en este caso estamos diciendo que por defecto
vamos a

1:56:15seleccionar la opción cariñoso y también vamos a seleccionar la opción interior por

defecto para los botones de radio veamos vamos aquí a quitar el espacio y

1:56:30si volvemos a cargar la página vemos las opciones marcadas por defecto interior y
cariñoso exactamente lo que queríamos recuerda que check se agrega al elemento input no al
leyton se agrega a input que

1:56:45corresponde a la casilla o al botón que va a estar marcado por defecto genial ya sabes
marcar una de estas opciones por defecto en la próxima parte vamos a ver cómo puedes usar
un atributo que va a enviar

1:57:00un valor específico al servidor cuando enviamos en los datos del formulario así que te
veo la próxima parte

1:57:15un atributo importante cuando estás creando botones de radio o casillas de

verificación es el atributo value que significa valor en español ese atributo especifica qué valor
se va a enviar al

1:57:30servidor cuando enviemos la respuesta a las respuestas del usuario porque si no

especificamos el valor el servidor va a recibir un valor genérico de que alguna de las opciones
de ese grupo fue seleccionado pero cómo va a saber el

1:57:45servidor si esa opción fue interior o exterior o si se seleccionó perezoso cariñoso o

cualquier combinación de opciones lo único que sabe es que hubo cierta opción que fue
seleccionada no su

1:58:00valor como tal y para eso está este atributo por ejemplo digamos que aquí vamos a
colocar esto en pantalla completa digamos que queremos especificar el valor de interior en
este caso valor

1:58:15sería interior valor sería interior genial eso le diría al servidor que el valor seleccionado
para el grupo

1:58:30interior exterior fue interior si esta opción está seleccionada si no vamos a ver vamos a
asignarle valor exterior a la segunda opción y así el servidor va a poder recibir esta información
de este

1:58:45grupo se seleccionó tal opción este valor y vamos a poder trabajar con ese valor en el
servidor para las casillas de verificación también podemos especificar un valor cariñoso
perezoso
1:59:00enérgico y así ya le estamos diciendo al servidor cuál fue la opción seleccionada por el
usuario la opción o las opciones porque en las casillas de verificación

1:59:15podemos seleccionar varias alternativas otra forma de presentar el código aquí como
ya ves que se está volviendo un poco más complicado de leer sería presentar el elemento
input de esta

1:59:30forma con esta estructura como si fuera parte de la etiqueta ley bold y si el texto
quedaría aquí pero estaría rodeado por el elemento ley bold y como puedes

1:59:45ver es más fácil de leer también podemos agregar una línea nueva un salto de línea
entre las casillas de verificación hagámoslo con la etiqueta o el elemento br vamos a insertar
una

2:00:00línea entre cada una de estas opciones y también una al final para separar el campo del
texto aquí de esta forma puedes ver cómo es más conciso el código y también es más fácil de
leer cuando ya la estructura se vuelve más complicada

2:00:15ya sabes el propósito de este atributo valor es el valor que va a recibir el servidor si esa
opción fue seleccionada para ese grupo de casillas o de botones en particular en la próxima
parte vamos

2:00:30a ver un tipo de elemento muy muy muy importante en el desarrollo web te prometo
que es uno de los elementos más importantes que vas a usar en el desarrollo web el elemento
dif lo vamos a ver en la próxima parte

2:00:45el elemento de efe es uno de los elementos más importantes en desarrollo web porque
es muy versátil es un contenedor que podemos usar para cualquier propósito es un
contenedor

2:01:00genérico digámoslo así lo usamos para crear estructuras más complejas en las páginas
web sirven para simplemente actuar como un contenedor que podemos también personalizar
cuando empezamos a

2:01:15trabajar con css y ese es uno de sus principales usos vamos a crear un pib que contenga
las listas de gatos ambas listas las cosas que los gatos aman y las cosas que los gatos o bien

2:01:30van a estar como agrupadas dentro del mismo contenedor este contenedor que
tenemos aquí el tiff tenemos una etiqueta de apertura y una etiqueta de cierre la etiqueta de
apertura va a

2:01:45estar antes de esta parte este párrafo cosas que los gatos aman y luego vamos a cerrar
ese contenedor antes de la imagen de gatos que iba a estar aquí al mismo nivel que la imagen
seleccionamos todo lo que está en el medio

2:02:00lo que se va a estar dentro de ese contenedor y lo intentamos un nivel más hacia la
derecha así estamos diciendo visualmente estamos indicando

2:02:15visualmente que todos estos elementos pertenecen a este contenedor a este día que
tenemos aquí si aplicamos por ejemplo un estilo a este tipo ese estilo con css esa configuración
de la

2:02:30presentación de los elementos va a aplicar para todos estos elementos que tenemos
aquí y ese es el principal propósito de por qué usamos un 10 en html vamos a usarlo muy muy
2:02:45frecuentemente pero en este caso si volvemos a cargar la página puedes ver quién no
hubo cambio simplemente estamos agrupando todo este contenido bajo un mismo
contenedor pero ese contenedor en este momento es invisible porque no le

2:03:00estamos asignando ninguna propiedad que lo haga visible como un color de fondo o
como cierto tamaño pero con css si vamos a poder hacerlo y vas a ver lo poderoso que pueden
ser bien ya sabes para qué

2:03:15usamos div y cuál es su etiqueta correspondiente otro elemento importante que quizás
quieras agregar a tu página web es un pie de página podemos agregar un pie de

2:03:30página aquí y yendo al final de nuestra estructura luego de maine porque porque el pie
de página no es parte del contenido principal de nuestra página así que no

2:03:45debería estar dentro de el elemento principal el elemento main debería estar luego de
maine tenemos para eso para crear un pie de página una etiqueta específica un elemento que
se llama führer führer

2:04:00significa en español pie de página dentro del fútbol podemos incluir un párrafo por
ejemplo sin derechos de autor baker cam punto org

2:04:15bien ahí tenemos nuestro párrafo en el pie de página vamos a volver a cargar la página
y aquí vemos el texto podemos agregar un enlace aquí y áfrica orcam punto org

2:04:30para eso ya sabes cómo crear un enlace usamos la etiqueta de apertura escribimos la
etiqueta de cierre aquí tenemos el enlace y tenemos

2:04:45que especificar la referencia vamos a colocar esto en pantalla completa para tener una
mejor perspectiva de la estructura aquí lo tenemos nos va a llevar a free corgan punto org
slayer español en este caso podríamos

2:05:00dejarlo ha sido también podríamos indicar que se debería abrir en una pestaña nueva
pero vamos a cargar la página y aquí vemos el enlace a áfrica punto org ya sabes cómo hacer
que el enlace se abre

2:05:15en una pestaña nueva así que si quieres puedes practicar con este enlace pero no te
parece que el texto está un poco grande para hacer un pie de página el texto tiene el mismo
tamaño que el texto principal de la página para

2:05:30indicar que el texto debería ser de un tamaño más pequeño usamos una etiqueta
específica un elemento específico que nos permite decir el browser que el texto debe ser más
pequeño vamos a ver cómo podemos hacer esto en la próxima parte

2:05:45esta etiqueta que nos permite hacer que el texto sea más pequeño se representa con
small small en español significa

2:06:00literalmente pequeño vamos a agregar esa etiqueta aquí en el texto que queremos que
sea más pequeño dentro de el párrafo dentro de la etiqueta del

2:06:15párrafo estamos haciendo que este texto sea más pequeño incluyendo el enlace
puedes ver cómo vamos como creando una jerarquía de todas estas etiquetas anidadas vamos
a volver a cargar la
2:06:30página y aquí vemos que el texto ahora es más pequeño exactamente lo que
buscábamos para el pie de página genial ya sabes que puedes usar este elemento y esta
etiqueta es mono cuando lo necesites es muy útil para un pie de página

2:06:45y finalmente para culminar la parte del curso sobre html vamos a hablar sobre head
recuerda que hablamos un poquito sobre head cuando comenzamos a crear

2:07:00nuestro archivo html head normalmente lo escribimos antes de vori vori es todo lo que
vamos a ver en la estructura de la página y head contiene lo que normalmente llamamos

2:07:15verdadera y los elementos que actúan detrás de escenas los elementos que no vemos
pero que son esenciales para que la página funcione correctamente por ejemplo si creamos un
archivo css o un archivo

2:07:30javascript y necesitamos incluirlo en nuestra página aquí escribiríamos el enlace dentro

de head también si queremos personalizar el título de la página lo que se muestra aquí en esta

2:07:45pestaña que normalmente está personalizado en las páginas web que vemos en
internet podemos hacerlo con el elemento iron título este elemento con su etiqueta de
apertura y de cierre

2:08:00personaliza el título de la página como vemos aquí app de gatos los títulos descriptivos
y detallados son un factor importante para la optimización del motor de búsqueda es en

2:08:15inglés search engine optimization así que se recomienda escribir títulos detallados
porque ayudan a los motores de búsqueda a conseguir tu página web también y el título
también es muy útil para la impresión inicial del usuario

2:08:30cuando está ingresando a la página ese es el propósito principal de head todos los
elementos que actúan detrás de escenas el más visible de todos ellos es el título que podemos
verlo aquí en la pestaña del navegador pero los demás

2:08:45actúan como detrás de escena ese es el propósito de g y siempre head y parís deben
estar dentro del elemento raíz de la etiqueta html genial ahora comencemos con la parte del

2:09:00curso sobre css vas a aprender cómo podemos combinar ambos archivos para
personalizar el aspecto de la página tv h buen trabajo ya completaste la primera

2:09:15mitad del curso y aprendiste los fundamentos de html ahora vamos a combinar ese
conocimiento con css vamos a comenzar a ver los fundamentos de css recordemos que el
inglés css significa

2:09:30cascading stylesheets estados ships significaría en español como hojas de estilo y

cascading significa que esos estilos van a caer en cascada así que en español se traducen

2:09:45como hojas de estilo en cascada hasta ahora en nuestro archivo html hemos estado
definiendo la estructura y el contenido de la página hemos incluido los títulos los contenedores
las imágenes pero no hemos especificado en

2:10:00realidad cómo queremos que esos elementos se muestren en el resultado final para
eso vamos a agregar un archivo css en ese archivo nosotros vamos a especificar el estilo de los
elementos que tenemos en nuestro archivo

2:10:15html en html definimos la estructura de la página y su contenido y en css definimos el

estilo css es un lenguaje basado en reglas
2:10:30vamos a trabajar con reglas y esas reglas determinarán el estilo que se aplicará a un
elemento oa un grupo de elementos genial comencemos la segunda parte del

2:10:45curso viendo cómo podemos escribir ese conjunto de reglas en css tenemos tres
opciones y las vamos a ver en la próxima parte tenemos tres opciones distintas para

2:11:00escribir nuestro conjunto de reglas el css las tres opciones son escribir estilos en línea
usar un bloque style o crear un archivo de tipo css para escribir todas nuestras reglas de estilo

2:11:15en ese archivo veamos la primera opción estilos en línea si escogemos usar esta opción
el estilo que vamos a asignarle a un elemento se añade directamente a la

2:11:30etiqueta de apertura de ese elemento en el archivo html vamos a especificar cómo

queremos que ese elemento html se vea en el navegador en el browser pero vamos a
especificar

2:11:45los en la etiqueta de apertura aquí tenemos un ejemplo tenemos un título un

encabezado con la etiqueta o el elemento h2 y aquí puedes ver que estamos especificando un
estilo en español está yo significa estilo y dentro de las

2:12:00comillas estamos especificando que queremos que el color de este texto sea azul blue
en inglés en español es azul nota que estamos incluyendo esta

2:12:15información como un atributo en la etiqueta de apertura del encabezado básicamente

en eso consiste en los en línea esta es la primera opción nuestra segunda opción es usar
elementos style

2:12:30cuando usamos está el que significa estilo en español añadimos ese elemento en el
elemento head de nuestro archivo html y dentro de ese elementos tallos describimos el estilo
que queremos asignarle a los elementos de nuestra

2:12:45página web básicamente agrupamos todas esas reglas bajo un mismo elemento en
lugar de hacerlo individualmente elemento por elemento en su etiqueta correspondiente
vamos a agrupar todas esas reglas en un

2:13:00mismo bloque aquí tenemos un ejemplo tenemos head aquí con su etiqueta de
apertura y de cierre y dentro de head tenemos este elemento está en su etiqueta de apertura

2:13:15y su etiqueta de cierre y dentro de ese elemento tenemos algo que se llama un selector
css esto nos permite decir que todos los títulos son los encabezados de nivel 2

2:13:30que tengan esta etiqueta deberían tener color azul vamos a repasar todos estos
elementos de la sintaxis de css durante el curso pero solo quiero que vayas viendo las
diferencias entre las tres opciones que estamos presentando antes lo hacíamos

2:13:45individualmente la etiqueta de apertura ahora estábamos refiriéndonos en forma

general por ejemplo a cualquier encabezado de nivel 2 y decimos que debe tener color azul y
finalmente nuestra

2:14:00tercera opción es crear un archivo css en esta opción creamos un archivo de tipo css
con esta extensión para definir el estilo de la página básicamente vamos a tener un archivo
html con la
2:14:15estructura y el contenido de la página y vamos a crear un archivo css que va a contener
todas esas reglas y lo que vamos a hacer es básicamente vincular el archivo css con el archivo
html

2:14:30así cuando accedemos a la página automáticamente vamos a poder usar las reglas de
estilo que tenemos en este archivo y se van a aplicar a los elementos html por eso esta opción
es recomendado porque estamos creando un archivo

2:14:45separado que es mucho más fácil de mantener y expandir también bien como ya sabes
las tres opciones que podemos usar comencemos a ver ejemplos en nuestro editor de código

2:15:00aquí tenemos nuevamente en nuestra aplicación de gatos con la que hemos estado
trabajando durante el curso y ahora vamos a ver cómo podemos agregar

2:15:15un estilo en línea en html usando css cuándo agregamos un estilo en línea básicamente
vamos al archivo html y decimos cuál es el elemento que quiero personalizar por ejemplo
digamos que

2:15:30quiero cambiar el color del texto de este título que dice app de gatos lo primero que
debo hacer es identificar cuál es el elemento al cual me refiero en html este sería el elemento
en mi

2:15:45página h2 voy a la etiqueta de apertura y en la etiqueta de apertura voy a agregar un

atributo llamado style estilo esto me va a permitir

2:16:00especificar ciertas propiedades css para ese elemento entre comillas debemos
especificar qué propiedad quiero personalizar en este caso es el color del texto

2:16:15esta es una propiedad css que nos va a permitir cambiar o personalizar el color del
texto qué color queremos asignar bueno digamos azul blue tenemos una amplia gama de
colores y también una parte del curso va a estar

2:16:30dedicada a cómo puedes escoger colores específicos en css pero por ahora vamos a
escribir palabras específicas que se refieren a colores que ya están predeterminados en css
para elementos html

2:16:45una vez que escribimos esto también vemos una cajita que nos muestra el color esto
ocurre en visual studio com no necesariamente en todos los editores de código vas a ver esto y
puedes también escoger otros colores

2:17:00en esta pantalla genial vamos a guardar el archivo y volvemos a cargar la página y aquí
vemos el título en color azul exactamente lo que esperábamos

2:17:15felicitaciones acabas de escribir tu primer estilo en línea en css este es tu inicio al

mundo de css así que continuemos viendo nuestro siguiente tema ya sabes cómo agregar una
estilo en línea este formato

2:17:30aplica para cualquier estilo que quieras asignarle a tu elemento todo lo que vas a ver de
ahora en adelante cualquier propiedad con la que vamos a trabajar puedes asignar la también
como un estilo en línea que es simplemente aquí

2:17:45escribes la propiedad seguida de dos puntos normalmente un espacio y luego el valor

de esa propiedad recuerda que el nombre del atributo es style y en español significa estilo
2:18:00ahora vamos a ver en la próxima parte cómo puedes especificar esto mismo en un
bloque style dentro del elemento head la segunda opción que vimos en las diapositivas así que
te espero' allí

2:18:15aquí tenemos nuestro estilo en línea pero si en lugar de eso queremos usar nuestra
segunda opción el elemento start

2:18:30o simplemente tenemos que borrar ese estilo en línea y aquí en nuestro elemento en
este caso va a ser debajo de 0 escribimos style vamos a colocarlo aquí más grande para que
puedas verlo con más

2:18:45detalle tenemos esta área y dentro de esta el vamos a especificar queremos que los
elementos de tipo h 2 este elemento que tenemos aquí

2:19:00tenga un color específico para eso luego de especificar el tipo de elementos con llaves
vamos a rodear el conjunto de propiedades y los valores que queremos asignarles en este caso
queremos que el

2:19:15color de ese elemento sea azul y aquí lo tenemos al final de la línea escribimos un
punto y coma eso es importante esta es la estructura básica de una

2:19:30regla en css tenemos aquí el selector en inglés se denomina selector que nos permite
decir qué tipo de elementos vamos a afectar con este estilo que tenemos aquí dentro de las
llaves en este caso a todos los elementos h 2 se

2:19:45les va a asignar un color de texto azul en nuestra página actualmente solo tenemos un
elemento h 2 pero si tuviéramos otro elemento por ejemplo digamos app de gatos 2 y
volvemos a cargar la página puedes ver que también

2:20:00es azul el texto este estilo se va a asignar a todos los elementos de este tipo hay forma
de ser más restrictivos y de solo aplicar el estilo a ciertos elementos solo vamos a ver durante
el curso por

2:20:15ahora lo aplicamos de forma general esta es una diferencia que tenemos con los estilos
en línea cuando usamos un elemento style podemos afectar o asignar ese estilo a más de un
elemento pero

2:20:30cuando escribimos aquí en la etiqueta de apertura el estilo en línea solo vamos a

afectar a ese elemento en particular mientras que aquí podríamos si queremos afectar o
aplicar ese estilo a más de un

2:20:45elemento genial vamos a ver otros ejemplos vamos a personalizar el color del texto de
los títulos los encabezados de nivel 3 vamos a asignarles un color

2:21:00verde en inglés verde es greening así que vamos a volver a cargar la página y aquí
vemos que nuestro título de nivel 3 nuestro encabezado aquí de nivel 3 es verdad se le aplicó
ese estilo según la guía de estilo de google se

2:21:15recomienda también dejar una línea en blanco entre cada una de estas reglas que
tenemos aquí key para que el archivo sea más fácil de leer estamos personalizando el estilo de
los
2:21:30elementos h2 h3 y digamos que queremos también personalizar el color de los párrafos
para eso aquí escribimos p luego llegamos a este nivel de intenta ción escribimos color
digamos por tu

2:21:45morado aquí puedes ver ese color que corresponde si volvemos a cargar la página
podemos ver que ahora todos los párrafos se muestran en morado y este es un ejemplo de
cómo puede afectar a más de un elemento en tu página aquí vemos

2:22:00también que nuestro pie de página aquí en nuestro foro también contiene un párrafo
una etiqueta para un elemento pp por eso se muestra en morado

2:22:15genial ya sabes trabajar con el bloque style ahora vamos a ver nuestra tercera opción
que es la que vamos a usar comúnmente porque como puedes ver si tenemos una página más
complicado más elaborada y empezamos a escribir todos nuestros estilos aquí en nuestro
archivo

2:22:30html rápidamente el archivo se va a volver inmanejable porque en teoría podemos

tener cientos y cientos de reglas aquí

2:22:45para personalizar cómo se ve la página y debajo tendríamos ya la estructura de la

página que de por sí ya puede ser complicada también así que para separar el propósito de
cada uno de los archivos y hacerlos más manejables y fáciles de

2:23:00expandir y de mantener entonces lo que hacemos es separar este contenido de las

reglas css en otro archivo eso es exactamente lo que vamos a hacer en la próxima parte

2:23:15veamos cómo podemos trasladar estas reglas que ya escribimos para nuestra página a
un archivo css lo primero que vamos a hacer es abrir aquí el

2:23:30explorador y vemos nuestro archivo html y nuestra carpeta de imágenes donde

teníamos las imágenes de la lasaña del gatito lo que vamos a hacer ahora es hacer clic aquí en
new file archivo nuevo

2:23:45y vamos a escribir style punto se s punto css le dice a nuestro dispositivo a nuestra
computadora que este archivo es de tipo css

2:24:00y el nombre style es un estándar que es comúnmente usado para nombrar al archivo
que contiene los estilos principales de nuestra página también puedes ver mails puntos s s
main significa principal y

2:24:15también puedes ver archivos con otros nombres hacemos clic en entero y aquí vemos
nuestro archivo nuevo en este momento el archivo está vacío pero lo que debemos hacer es
aquí podemos

2:24:30copiar y pegar nuestras reglas claro aquí vamos a tener que ajustar la intenta ción
normalmente las escribiríamos directamente en el archivo css es

2:24:45importante también intentar el contenido de las reglas esto es algo también

importante que debemos mencionar el css al igual que en html normalmente intentamos las
propiedades con dos espacios para

2:25:00cambiar el tamaño por defecto de cada nivel de intenta ción de cuatro espacios a dos
simplemente debes ver si tienes esta barrita activa o visible en tu
2:25:15editor de código envía score si la barra está visible puedes hacer clic en spaces debería
mostrar 4 por defecto luego se explica aquí intent using spaces y luego haces clic en dos ya

2:25:30después de que ves aquí el número dos si haces clic en tap se va a agregar dos espacios
por cada nivel de intenta ción exactamente lo que necesitamos y así no tenemos el riesgo de
ser inconsistentes

2:25:45y asignar cuatro espacios o dos espacios mezclados es importante ser consistente en
todo el archivo y se recomienda usar dos espacios para css y html genial estábamos viendo
cómo podemos

2:26:00combinar o vincular los archivos css html porque hasta este momento son dos archivos
separados no tienen nada en común podemos borrar esta parte y cerrar aquí para ver el
código

2:26:15si volvemos a cargar la página ahora vemos la página original sin los estilos que le
habíamos aplicado porque en este momento los archivos son dos archivos totalmente
separados no hay nada que los conecte los podemos conectar con un

2:26:30elemento que tenemos disponible en html que se llama link no es el enlace o el link al
que normalmente nos referimos cuando navegamos en internet sino que es un enlace que va a
actuar como detrás de

2:26:45escena para permitirnos acceder a otros archivos por ejemplo el archivos de ss por eso
lo escribimos o lo incluimos dentro de ge recuerda que ese contiene todos esos elementos que
actúan detrás

2:27:00de escena una vez que creamos el link debemos especificar cuál es el archivo que se va
a conectar o el archivo que se va a usar en este caso vamos a conectar nuestro archivo html
con archivo css

2:27:15como está en la misma carpeta aquí lo podemos ver en el explorador están ambos en
la misma carpeta podemos simplemente escribir el nombre del archivo si no tendríamos que
hacer igual que qué hicimos anteriormente con la imagen

2:27:30tendríamos que escribir el nombre de la carpeta primero seguido de una barra

inclinada y luego el nombre del archivo que hay aquí tenemos esto y también se recomienda

2:27:45específica del atributo brown breve es una abreviación de bilis jones y según esta
descripción el atributo denominado nombre una relación del documento vinculado al
documento actual

2:28:00que representa está el punto css para nuestro archivo html bueno es una hoja de estilo
que en inglés se denomina está aún sin hit es

2:28:15hoja y está el en estilo hoja de estilo este archivo es una hoja de estilo para nuestro
archivo actual genial ahora si volvemos a cargar nuestra página puedes ver que los estilos se
aplicaron

2:28:30exitosamente aquí podemos ver nuestro título azul nuestro subtítulo verde nuestros
párrafos morados exactamente lo que especificamos aquí el estadio punto cfs
2:28:45genial ya sabes cómo vincular o conectar ambos archivos aquí en html escribimos todo
el contenido de la página y en css especificamos cómo se van a mostrar estos elementos o ese
contenido

2:29:00recuerda en el evento sling no tiene una etiqueta de cierre se cierra automáticamente

y debes especificar la propiedad hr con el nombre o la dirección al archivo genial ahora que ya
sabes cómo trabajar con estas tres opciones y cuáles son sus

2:29:15diferencias comencemos a trabajar con los selectores css vamos a verlos en detalle y
cómo puedes usarlos para personalizar tu página web

2:29:30vamos a hablar un poquito sobre los selectores css porque ellos van a ser esenciales
durante todo el curso en realidad ya los usamos esto que

2:29:45escribimos aquí en la parte anterior será mira un selector css veámoslo con más detalle
aquí vamos a aumentar el tamaño del correo cuando nosotros escribimos aquí h2 h3 o pe por

2:30:00ejemplo estos son ejemplos estamos especificando el tipo de elemento al cual se le va

a aplicar este estilo en específico aquí podemos tener muchas muchas muchas combinaciones
de propiedades con sus valores dentro de

2:30:15las llaves y ese estilo que definamos aquí se va a aplicar para este tipo de elementos
pero esto que tenemos aquí esta primera parte es esencial porque le dice al browser al
navegador

2:30:30el tipo de elementos o el conjunto de elementos al cual se le va a aplicar ese estilo

veamos un poquito sobre los selectores css en la documentación selectores css

2:30:45los selectores definen sobre qué elementos se aplicará un conjunto de reglas css nos
permiten definir qué elementos van a estar afectados por las reglas css que escribimos
tenemos varios

2:31:00tipos de selectores el que estamos usando en este momento se denomina selector de

tipo selecciona todos los elementos todos los elementos que coinciden con el nombre del
elemento

2:31:15especificado todos los elementos con ese nombre por ejemplo si escribimos inputs se
va a aplicar a cualquier elemento de tipo import y en este caso como escribimos h2 h3 y pe

2:31:30estos elementos van a ser afectados por los estilos que especificamos también
tenemos otros tipos de selectores básicos selector de clase selector de aire y selector universal
y selector de atributos vamos a hablar durante el

2:31:45curso sobre el selector de clases el selector de haití y el selector de atributos así que
vamos a ver muchos ejemplos de cómo usarlos el selector universal es un selector que
selecciona

2:32:00todos los elementos aunque en general selecciona todos los elementos es un asterisco
por ejemplo digamos que queremos que todo el texto en nuestra página sea morado sólo un
ejemplo digamos que borra

2:32:15esto que tenemos acá y quiero que todo el texto sea morado uso este selector el
asterisco que es el selector universal y escribo color cuerpo moral ahora si volvemos a cargar la
página
2:32:30puedes ver que todo el texto todo el texto de nuestra página ahora es morado porque
se aplicó de forma universal a todos los elementos de la página que contienen texto para los
cuales puede aplicar esta propiedad específica genial

2:32:45ya sabes cómo trabajar con los selectores de tipo y con el selector universal así que en
la próxima parte vamos a ver cómo puedes trabajar con los selectores de clase las clases son
muy muy muy muy

2:33:00importantes en css y las vas a usar diariamente las vas a usar en cada proyecto que
crees con html y css así que comencemos con nuestra siguiente parte volvemos al estado de
nuestra página antes de continuar

2:33:15aquí estamos en nuestro archivo cfs hasta ahora hemos usado selectores de tipo que
van a aplicar un estilo

2:33:30específico a todos los elementos de ese tipo pero qué ocurre nosotros tenemos otro
tipo de selector que se llama selector de clase vamos a borrar ese estilo esos estilos que
habíamos asignado a los elementos de nuestra

2:33:45página y vamos a enfocarnos en los selectores de clase si vamos a la documentación de

la red de desarrolladores de mozilla en la documentación web podemos ver aquí los selectores
de clase un selector de clases selecciona todos

2:34:00los elementos que tienen el atributo class especificado cuál significa clase en español
una clase es básicamente un nombre que nosotros creamos y le

2:34:15asignamos a ciertos elementos luego con css podemos referirnos a esa clase y aplicarle
un estilo específico a todos los elementos html que tengan esa clase ya vas a ver cómo se la
podemos asignar y cuál es la

2:34:30diferencia entre un selector de tipo y un selector de clase digamos que queremos

asignar un estilo a nuestra lista no ordenada esta lista que tenemos aquí queremos

2:34:45asignarle un color de texto chocolate en inglés chocolate se escribe igual que en

español ya que le vamos a afectar con este selector de tipo a todos los elementos de tipo listas
no ordenada recuerda

2:35:00hueles listas no ordenadas y volvemos a cargar nuestra página aquí podemos ver que el
estilo se aplicó a esa lista no ordenada pero también digamos que queremos que ese mismo
estilo se le

2:35:15aplique a las listas ordenadas aquí vemos que no fue modificada a la lista ordenada
porque no la estamos seleccionando con el selector de tipo deberíamos en este caso escribir o
ly

2:35:30luego escribimos color chocolate volvemos a cargar la página y ahora si vemos que se
le aplicó el estilo pero estamos escribiendo reglas duplicadas básicamente para evitar

2:35:45repeticiones podemos usar clases selectores de clases en css con las clases podemos
simplemente agregarle la clase a algún elemento html y no afectar todos los de ese tipo por
ejemplo si
2:36:00tuviéramos varias listas no ordenadas podríamos asignarle una clase a alguna lista oa
varias listas y a otras no y así no estaríamos afectando a todas cuando usamos este selector de
tipo estamos afectando o estamos aplicando

2:36:15ese estilo a todos los elementos de ese tipo en nuestra página con las clases podemos
ser más selectivos y sólo aplicarle el estilo a los elementos que tengan esa clase así que vamos
a borrar esto por este momento y vamos a

2:36:30reemplazarlos por una clase el primer paso para crear una clase es ir a nuestro archivo
html y buscar los elementos a los cuales les queremos asignar esa clase vamos a volver a
cargar nuestra página para ver su estado

2:36:45inicial vamos a ir aquí abajo a nuestra lista no ordenada y a nuestra lista ordenada aquí
las podemos ver ambas en la pantalla tenemos aquí en nuestra lista no

2:37:00ordenada y aquí podemos ver nuestra lista ordenada que corresponden a estos dos
elementos para asignarle una clase a la lista no ordenada simplemente le agregamos el
atributo class que

2:37:15significa clase en español y entre comillas vamos a escribir el nombre de nuestra clase
ese nombre es cualquier nombre que tú quieras asignarle normalmente tratamos de ser lo
más

2:37:30concisos posible y uno de los estándares es separar las palabras con un guión entonces
por ejemplo podemos asignarle la clase lista de gato y así le vamos a aplicar el estilo que
escojamos para esa clase lista de gatos

2:37:45vamos a agregarle la s aquí ahora vamos a nuestro archivo css ya le aplicamos la clase a
un elemento en html cuando volvemos a nuestro archivo css para especificar qué estilo
queremos

2:38:00asignarle a esos elementos escribimos el nombre de la clase pero antes de ese nombre
tenemos que incluir un punto así le decimos a css que nos estamos refiriendo al nombre de
una clase con un punto aquí antes de su

2:38:15nombre luego para aplicarle el estilo escribimos la propiedad y su valor color chocolate
y si volvemos a cargar la página buena aquí lo tenemos vemos

2:38:30nuestra lista no ordenada con el color chocolate pero dijimos que las clases son muy
útiles para poder aplicarle ese mismo estilo a más de un elemento cierto cierto vas a ver lo
fácil que es

2:38:45aplicarle ese mismo estilo a otro elemento en nuestra página que no tiene nada que
ver con este tipo de elementos por ejemplo podemos asignarle esa clase a otro elemento que
no tengan nada que ver con una lista no ordenada

2:39:00vamos aquí a nuestra lista ordenada y vamos a agregarle atributo clave lista de datos
genial ya tenemos dos elementos con esa

2:39:15clase vamos a volver a cargar la página y puedes ver cómo se aplicó el estilo también a
la lista ordenada porque tiene esa clase así estamos re usando nuestro estilo que definimos
aquí si queremos que el
2:39:30elemento tenga este estilo le agregamos esta clase también podemos agregarle la clase
a otro elemento que no tenga nada que ver en este caso también podríamos ajustar

2:39:45su nombre claro otro nombre que no sea lista de gatos pero sólo para demostrarte que
no tiene necesariamente que ser una lista vamos a volver a cargar la página y puedes ver que
el estilo se le aplica al elemento pe al

2:40:00párrafo simplemente porque tenía esa clase general no y si quieres asignarle otro estilo
además de eso otra clase escribes un espacio y luego escribes el nombre de otra clase se
puede asignar

2:40:15más de una clase al mismo elemento ya sabes cómo crear una clase en html cómo
asignarle una clase un elemento y cómo escribir la clase correspondiente

2:40:30en el archivo css recuerda siempre tienes que seguir esta estructura para escribir la
regla cuando estás refiriendo de una clase un punto esto es común que cuando estás
comenzando a trabajar con css no coloques el punto el

2:40:45punto es muy importante para que se detecte como una clase luego el nombre de la
clase y entre llaves la propiedad dos puntos un espacio el valor y punto y coma el punto y
coma también es

2:41:00importante porque marca el final de esa línea genial ya sabes cómo trabajar con
selectores de clase los vamos a usar muy a menudo ahora pasemos en nuestra siguiente parte
a ver un aspecto de desarrollo web que es importante cómo

2:41:15puedes aumentar disminuir o en general personalizar el tamaño de la letra eso lo

vamos a ver a continuación ahora vamos a ver cómo puedes

2:41:30personalizar el tamaño de la letra como puedes cambiar el tamaño de la letra con una
propiedad en css vamos por ahora a quitar las clases que habíamos asignado

2:41:45en la parte anterior a las listas y a los párrafos volvemos a cargar la página y vemos que
está en su estado original también en nuestro archivo css vamos a borrar esa regla que
teníamos allí por

2:42:00ahora vamos a volver a usar selectores de tipo es importante que practiques con todos
los tipos de selectores digamos que queremos seleccionar todos los elementos de tipo h 2 en
este caso sería este título que tenemos aquí pero si la

2:42:15página tuviera varios elementos de tipo h 2 se aplicaría el mismo estilo a todos porque
estamos usando un selector de tipo para personalizar o cambiar el tamaño de la letra

2:42:30usamos esta propiedad font-size font se puede traducir como letra o fuente en español
isa es significa tamaño así que es el tamaño de la fuente o tamaño de la letra

2:42:45hay distintas unidades que podemos usar una de ellas es px píxeles una de las más
comunes es píxeles y aquí puedes ver como inmediatamente vemos el cambio en el tamaño de
la letra podemos colocar un número muy muy grande para que puedas

2:43:00ver el resultado 50 y es obvio el cambio y también podríamos usar un valor más

pequeño y tendríamos un título más pequeño como puedes ver el tamaño de la letra no es fijo
podemos personalizarlo
2:43:15con css ahora para practicar es tu turno debajo de esta regla css selecciona con un
selector de tipo

2:43:30los elementos de tipo h3 y cambia el tamaño de la letra a 25 píxeles 25 tómate algunos

segundos si quieres pausar el vídeo mientras lo haces y luego regresa para que veamos el
resultado bueno aquí tenemos el resultado el

2:43:45selector de tipo h3 usamos llaves y luego escribimos font-size y el valor es 25 píxeles

recuerda siempre el punto y coma y recuerda que también aquí se debe dejar un espacio entre
la llave de apertura y

2:44:00el selector que esto es importante también y un espacio entre los dos puntos y el valor
eso nos ayuda a que el archivo sea más fácil de leer si volvemos a cargar la página aquí
podemos ver la diferencia ahora el título principal

2:44:15está más pequeño y el título secundario está más grande así que podemos invertir
estos valores y ahora si tiene más sentido también qué es lo que ocurre si usamos varios
selectores de tipo para

2:44:30asignar el mismo estilo por ejemplo si en lugar de tener estas reglas tuviéramos algo así
p con 620 píxeles

2:44:45luego el font-size 20 píxeles y luego el font 620 píxeles puedes ver que todos tienen

2:45:00el mismo estilo aplicado para escribir esto de forma más concisa podemos
simplemente separarlos con una coma y una línea nueva se recomienda veamos cómo huele y
le escribimos una coma

2:45:15luego huele y luego o er y así estaríamos aplicando este estilo que está entre las llaves
a estos tres tipos de elementos se pueden escribir en una misma línea pero la guía de estilo de
google recomienda escribirlas en líneas

2:45:30separadas para que sean más fáciles de detectar visualmente si volvemos a cargar la
página vemos que no hubo diferencia simplemente nuestro archivo css va a ser más conciso
más fácil de

2:45:45leer y tenemos menos repetición así que es más fácil si queremos cambiar el estilo o
actualizarlo también vamos a ver un ejemplo de un estilo que tiene más de una propiedad
porque hasta ahora los ejemplos que hemos visto solo tienen una propiedad y

2:46:00un balón digamos que queremos asignarle a los elementos de tipo l y les hay tener un
elemento de una lista el color de texto azul y también queremos personalizar el tamaño de la
letra 15

2:46:15píxeles podemos hacerlo sin ningún problema así es como puedes escribir una regla
con más de una propiedad una propiedad por línea y cada una de las líneas termina con un
punto y una

2:46:30coma y deben estar dentro de las llaves volvemos a cargar la página y ahora el estilo se
aplicó a los elementos de la lista puedes ver color azul y un tamaño de letra personalizado
también aquí
2:46:45porque son todos los elementos de tipo l otro truco interesante que seguro que te va a
gustar o que lo vas a usar en algún momento mientras trabajes con visión estudio course es
que puedes dividir la pantalla en dos para ver los dos

2:47:00archivos a la vez el archivo html y el archivo css ahorita en la presentación que tenemos
en nuestro editor de código tenemos que hacer clic en las pestañas para ir de un archivo a otro
pero siempre es más práctico tener todo a la

2:47:15vista así que podemos hacer clic aquí nos dice split editar split erector bite o split
héctor drawn podemos dividir el editor pero antes de dividirlo tenemos que estar en el archivo
que queremos

2:47:30asignar a la derecha hacemos clic aquí y vemos el archivo aquí en la derecha y lo

cerramos a la izquierda y aquí tenemos las dos pantallas en simultáneo eso es muy muy útil
cuando estás trabajando en un proyecto porque puedes ver la

2:47:45estructura de la página y el estilo que le estás aplicando otro aspecto de la letra que
puedes cambiar es la familia de la fuente el tipo de fuente por ejemplo verdana times

2:48:00new roman helvética distintos tipos de fuentes que puedes asignarle al texto de tu
página eso es lo que vamos a ver en la próxima parte así que te veo allí buen trabajo por llegar
hasta aquí ya estás avanzando en el mundo de css pasemos a nuestra siguiente parte

2:48:15veamos cómo puedes cambiar el tipo de fuente del tipo de letra con css vamos a

2:48:30borrar esta regla que teníamos aquí para concentrarnos solamente en esta propiedad
digamos que queremos cambiar el tipo de fuente el tipo de letra de los elementos h 2 que en
este caso sería

2:48:45el título principal la propiedad para lograrlo se llama font-family font es fuente y family
es familia la familia de la fuente el tipo de letra y le vamos a asignar un valor por

2:49:00ejemplo digamos verdana podemos rodear el valor entre comillas o no en este caso
porque solo una palabra si es sólo una palabra no habría problema en omitir las comillas pero
si el nombre tiene

2:49:15espacios y debemos incluir las comillas si volvemos a cargar la página puedes ver que
este tipo de letra se muestra vamos a ver más sobre esta propiedad en la documentación font-
family aquí tenemos un resumen la

2:49:30propiedad font-family y define una lista de fuentes o familias de fuentes con un orden
de prioridad para usar en un elemento seleccionado podemos especificar varias fuentes varias
familias de fuentes en orden de

2:49:45prioridad porque si una falla o no es reconocida por el navegador por el browser otras
se puede usar como un respaldo eso lo vamos a ver más adelante a diferencia de la mayoría de
las propiedades css los valores se separan

2:50:00con comas para indicar que son valores alternativos que el nombre de la familia o un
nombre genérico se especifica como el valor el nombre de la familia es el nombre de la familia
de la fuente por

2:50:15ejemplo times y helvética son nombres de familia los que contienen espacios deben
escribirse entre comillas por ejemplo aquí tenemos times new roman este nombre debe estar
rodeado por comillas pero en el caso de verdad no necesariamente porque es una sola palabra
también

2:50:30tenemos nombres genéricos se han definido los siguientes nombres genéricos serif
sans-serif course y fantasy monospace los nombres genéricos son palabras clave y no deben
ponerse

2:50:45entre comillas ok cuando uses alguno de estos nombres genéricos no deben ponerse
entre comillas aquí tenemos algunos ejemplos from spain tenemos entre comillas este nombre
de familia y aquí tenemos otro

2:51:00nombre de familia helvética pero no está entre comillas porque es una sola palabra y
finalmente tenemos como el respaldo también un nombre genérico sans-serif que no va entre
comillas porque es un nombre genérico aquí

2:51:15tenemos una nota un nombre genérico debería ser siempre el último de la lista en una
propiedad fantamady porque si ésta falla por ejemplo tenemos esto y si ésta falla tenemos
esto y los genéricos los nombres genéricos

2:51:30normalmente son reconocidos por los navegadores genial en este caso yo no estoy
agregando valor es de respaldo porque eso lo vamos a ver en tan sólo unos minutos durante el
curso vas a ver cómo puedes agregar estos valores de

2:51:45respaldo pero ahora vamos a ver cómo puedes determinar que en realidad está fuente
es verdad porque uno ve un cambio pero como determinamos en realidad que esta fuente es
verdad veamos en google chrome tenemos las

2:52:00herramientas de desarrolladores de chrome y aquí como hicimos clic derecho sobre el

título luego un inspector vamos directo a seleccionar este elemento en las herramientas las
podemos ver aquí

2:52:15anteriormente habíamos visto estas herramientas como una forma de visualizar la

estructura html de nuestra página pero también este panel que vemos aquí abajo nos presenta

2:52:30el estilo css nos presenta estas reglas que hemos creado en css y que le hemos aplicado
a estos elementos vamos a expandir este panel para verlo con más detalle si escondemos html
por el

2:52:45momento y podemos ver que tenemos un selector de tipo con familia de fuentes
verdad esto lo que nosotros escribimos en este momento pero para determinar si verdad no
se está mostrando realmente porque está reconocida por el browser o no

2:53:00tenemos que ir a este panel que dice configure en configure vamos a ver esta
presentación que nos habla de tres términos que vas a ver más adelante en el curso y aquí
abajo podemos ver esta

2:53:15parte cita que nos dice render fondo podemos traducirlo como el tipo de fuente que se
está mostrando en realidad y vemos verdad esa es la letra que en verdad se está mostrando si
hubiéramos

2:53:30asignado un tipo de fuente que no está reconocido por el browser veríamos otro valor
aquí aunque lo hubiéramos asignado uno respaldo por ejemplo cambiamos esto a cualquier
otro valor que no sea válido sólo para
2:53:45probar si volvemos a cargar la página aquí vemos otro tipo de letra y cuál es el valor
final de la fuente es times new roman se asignó por defecto en el navegador el navegador lo
asignó por defecto ahora sí volvemos a asignar

2:54:00verdad volvemos a ver aquí verdad genial ya sabes cómo usar las herramientas de
desarrolladores de google chrome para verificar que el tipo de fuente es el correcto que se
está

2:54:15mostrando esta pestaña está ellos es muy útil en esta herramienta porque aquí
podemos ver los estilos que se aplican a los elementos de nuestra estructura en html si
hacemos clic en el elemento aquí

2:54:30abajo vamos a ver los estilos que se le han aplicado las reglas que se le han aplicado
puedes ver todos estos estilos y a medida que le vayamos agregando más contenido a nuestro
archivo css vamos a

2:54:45ver como la cantidad de reglas que se muestran aquí genial pero en realidad no
estamos limitados a usar un tipo de letra específica una familia de fuentes específicas porque
google ya se encargó

2:55:00de crear un catálogo de fuentes que podemos simplemente descargar y usar en

nuestras páginas web vas a aprender cómo usarlas y cómo agregarlas a tu página en la próxima
parte continuemos

2:55:15otra opción que podemos usar para personalizar la familia de la fuente que usamos es
google phone google se encargó de crear todo una colección de fuentes que podemos
importar a nuestra página

2:55:30puede descargarlas y mostrarlas en nuestros elementos vamos a ver cómo lo puedes

hacer en lugar de verdad vamos a asignarle una una familia de fuente diferente vamos a
colocar el browser en

2:55:45pantalla completa y vamos a ir a esta página que tenemos aquí fondo punto
google.com esperamos a que se cargue y aquí puedes ver cómo se van mostrando los distintos
tipos de letra por ejemplo

2:56:00digamos que queremos usar robots en esta fuente que tenemos aquí como la podemos
asignar a este elemento que tenemos en nuestra página hacemos clic en ese elemento en
robot y podemos ver distintos estilos de esa fuente de ese

2:56:15tipo de letra podemos escoger cualquiera de estos estilos parece tipo de letra y
simplemente lo que hacemos vamos a escoger uno que sea como un intermedio aquí hacemos
clic en

2:56:30select de ese estado seleccionar este estilo y luego tenemos dos opciones en este caso
vamos a usar esta que es un link un elemento link que podemos agregar a nuestro archivo
html lo que debemos hacer es copiar estos elementos

2:56:45que es si los miras detalladamente puedes ver que son elementos de tipo link se deben
colocar en el elemento head del html ya lo copié con control se y luego si vamos aquí vamos a
el archivo

2:57:00html dentro del elemento head aquí en el medio colocamos los elementos que
acabamos de copiar los inventamos adecuadamente para que estén al mismo
2:57:15nivel para asignarle ese tipo de letra al elemento h 2 en lugar de verdad lo que
tenemos que hacer es copiar y pegar esto que tenemos aquí esto incluye la

2:57:30propiedad sounds friendly guardamos el archivo y se asigna roboto y y respaldó el tipo

de letra de respaldo sería sans series ahora si vamos a nuestra página y volvemos a cargar la
página

2:57:45podemos ver esta letra que tenemos aquí la letra que importamos ahora digamos que
queremos usar otro tipo de letra diferente vamos a volver a la página principal

2:58:00hacemos clic en el logo de google fans y por ejemplo digamos que queremos usar algo
como una letra más escrita a mano hacemos clic aquí y podemos seleccionar ese estilo ahora
vemos que no se muestra el panel porque sólo se abre ese panel

2:58:15la primera vez que seleccionamos un tipo de letra pero puedes volver a abrir ese panel
aquí en este icono que podemos ver aquí dice ver las familias seleccionadas hacemos

2:58:30clic y vemos el panel pero ahora podemos ver que se actualizó este elemento al final
así que tenemos que volver a copiar y pegar esto en nuestro archivo html para actualizarlo así
vamos a poder incluir los dos tipos de letras

2:58:45aquí borramos nuevamente pegamos los elementos y ahora puedes ver que están
actualizados tenemos dos familias de fuentes dos tipos de letra genial

2:59:00guardamos y luego vamos aquí a nuestro archivo cfs digamos que quiero asignar ese
tipo de letra nuevo al título aquí tenemos como especificar la en nuestro

2:59:15css copiamos y pegamos y aquí tenemos nuestro tipo de letra a aplicado a nuestro
elemento también podríamos personalizar el tamaño de la letra quizás 50

2:59:30genial con este enlace que tenemos actualizado estamos incluyendo estamos
descargando los dos tipos de letra o sea que podemos usar ambos tipos de letra en nuestro css

2:59:45digamos que queremos asignar robots a este elemento que tenemos aquí vamos a
asignarle ese tipo de letra a los elementos de tipo h3

3:00:00h 3 vamos a google font aquí vemos cómo lo podemos asignar robot y luego volvemos
a cargar la página y puedes ver este tipo de letra robot o asignado exactamente el estilo y
también el tipo de letra porque puedes ver que está en

3:00:15negrita que escogimos cuando seleccionamos entre los distintos estilos buen trabajo ya
sabes cómo usar grupos en la próxima parte si vamos a ver cómo podemos lograr que haya un
tipo

3:00:30de letra de respaldo lo vamos a ver en acción vamos a verlo más detalles cómo
funciona y qué es lo que ocurre si no se puede cargar esta letra en la próxima parte debe oye

3:00:45vamos a ver cómo actúan estos tipos de letra de respaldo cuando usamos cupones por
ejemplo esa fuente o ese tipo de letra se va a descargar de internet y

3:01:00digamos que internet falla o por alguna razón ese tipo de letra o ese archivo no está
disponible que es lo que va a ocurrir este tipo de letra va a venir al rescate y se va a utilizar
como un respaldo para que igual se pueda presentar la página web vamos a ver un
3:01:15ejemplo de esto pero antes vamos a seleccionar solamente un tipo más de letra para
que podamos ver el efecto vamos a escoger este en mundo libre

3:01:30que no sea tan gruesa la letra volvemos a actualizar elemento link para los elementos
link en html guardamos y ahora ya podemos usar

3:01:45gemunu libre vamos a asignar selo a los elementos que tenemos aquí a este elemento
que es un enlace vamos a asignar solo los elementos a pegamos esta propiedad y si volvemos a
cargar la

3:02:00página puedes ver que tenemos las letras personalizadas esta que tenemos aquí qué
ocurre si yo pago o deshabilitó el internet en mi caso yo puedo desactivar el internet en mi
computadora

3:02:15voy a hacerlo y vamos a ver el resultado ya de se active el internet vamos a volver a

cargar la página a ver qué ocurre aquí puedes ver que si se cargó la página correctamente y
vemos las letras por qué porque para mejorar la

3:02:30experiencia del usuario el navegador ya guardó ese tipo de letra así que se muestra
pero si entramos en el modo incógnito en el cual no tenemos esa función de que

3:02:45algo se pueda guardar y hacemos clic en enter vamos a ese mismo archivo puedes ver
que se usan otros tipos de letra porque porque estamos usando el tipo de letra de respaldo
sans-serif en lugar de

3:03:00el tipo de letra que habíamos especificado porque como no tenemos internet no se
pudo descargar ese tipo de letras y esa familia de fuentes se usa como respaldo pero igual el
usuario puede ver la página puede acceder al

3:03:15contenido puedes especificar varios tipos de letra de respaldo por si acaso alguna o
algunas no están disponibles sólo tienes que separarlas con una coma y luego un espacio
después de la coma y se van a tratar de asignar los tipos de

3:03:30letra de izquierda a derecha genial ya hemos hablado bastante sobre los tipos de letra
vamos a volver a nuestra página personalizada aquí en la próxima parte vamos a empezar a

3:03:45hablar sobre las imágenes cómo puedes cambiar o definir su tamaño y cómo puedes
personalizar su presentación con cfs así que te veo allí

3:04:00vamos a comenzar a trabajar con una parte muy importante de las páginas web las
imágenes podemos escoger su tamaño para que se presenten como nosotros queremos o
como nosotros esperamos en la página para eso

3:04:15hay una propiedad llamada web en español significa ancho probemos qué ocurre si
usamos el selector de tipo para el elemento img image imagen y la propiedad web

3:04:30el ancho puede tener varias unidades en este caso vamos a seleccionar un ancho de
200 píxeles si volvemos a cargar la página puedes ver que ahora las imágenes se muestran más
pequeñas y todas tienen

3:04:45el mismo ancho 200 píxeles pero en reajustadas y mantuvieron también sus
proporciones genial en este caso estamos afectando a todas las imágenes de la página porque
usamos el selector de tipo
3:05:00pero qué ocurre si solo queremos cambiar el ancho o aplicar ese estilo específico a
ciertas imágenes por ejemplo si queremos aplicárselo a las imágenes de gatos para eso
tenemos las clases vamos a ver cómo podemos usar una clase para

3:05:15este propósito no vamos a afectar o sea no queremos afectar la imagen de la lasaña

pero si las dos imágenes de gatos que tenemos aquí vamos a crear una clase a escribir una
clase aquí que se llame imagen de gatos

3:05:30la primera la tenemos aquí como un enlace y podemos por ejemplo antes de out
agregar class de esta forma clase imagen de gato

3:05:45y luego aquí abajo aquí imagen de gatos y agregamos la clase a las dos imágenes y
ahora nos vamos a dar

3:06:00nuestro archivo css un punto imagen de gatos debe estar escrito exactamente igual si
usamos una s aquí en plural la clase en html debe estar escrita de igual forma sino el estilo no
se va a

3:06:15aplicar lo que vamos a hacer es asignarle un ancho de 200 píxeles en él vamos a volver
a cargar la página y ahora puedes ver que esta imagen está más angosta tiene 200 píxeles esta

3:06:30imagen no fue modificada pero ya vamos a ver por qué para esta imagen no incluimos
la s así que tenemos que agregarlo y si volvemos a cargar la página ahora si vemos que la
imagen tiene un ancho de

3:06:45200 píxeles que coincide con el ancho de la imagen aquí que tenemos abajo esta
imagen no fue afectada porque no tenía esa clase imagen de gatos genial ya sabes cómo
controlar el ancho de tus

3:07:00imágenes también podemos hacerla más pequeña por ejemplo digamos 100 píxeles
exactamente como queríamos y ves que también la imagen mantiene sus proporciones en la
próxima parte vamos a ver cómo puedes agregar un borde alrededor de elementos como las
imágenes

3:07:15eso puede ayudar también a resaltar tus imágenes en tu página web o cualquier
elemento con el que estés trabajando así que te veo en la siguiente parte

3:07:30con la misma clase que creamos en la parte anterior vamos a ver cómo puedes
agregarle un borde a estas dos imágenes como lo podemos hacer con tres

3:07:45propiedades muy importantes el primero es border with wave es ancho y poner es

borde se puede traducir como el borde del elemento le asignamos un valor por ejemplo 5
píxeles cuanto mayor sea este valor más

3:08:00ancho es el borde también debemos especificar el color del borde digamos que es azul
y después border style el estilo del borde el primer estilo que vamos a ver es

3:08:15soler sólo significa sólido en español es básicamente una línea continua alrededor del
elemento si volvemos a cargar la página aquí podemos ver el resultado

3:08:30vemos un borde sólido alrededor de la imagen si cambiamos el valor del ancho del
borde podemos ver que se hace más pequeño o también podemos hacer que sea más ancho y
aquí vemos el borde
3:08:45normalmente tratamos de conseguir un balance depende de la presentación que
quieras darle el elemento el color digamos boom y luego el estilo el estilo es algo interesante
porque hay

3:09:00muchas opciones para el estilo primero esta norma que se usa para decir que no
queremos que haya ningún borde ya no queremos que haya un borde por ejemplo aquí vemos
que si ponemos no no existe el borde ya no se muestra normalmente usamos esto si ya
veníamos

3:09:15usando un estilo de borde en ciertos elementos y eso se hubiera aplicado a por

ejemplo esta imagen pero no queremos que se aplique esa imagen en particular entonces
decidimos que para esta imagen no se aplica o los que tengan esta clase

3:09:30bien otro valor que podemos usar estos tests docter significa punteado eso nos daría
un borde punteado como puedes ver aquí también podemos tener una línea

3:09:45que está conformada como por pequeños segmentos de líneas elementos aquí
pequeños como puedes ver hay pequeñas separaciones dentro de la línea este estas otra
opción stop un doble y equipo

3:10:00de ver que tenemos como un borde interno y un borde externo y la separación entre
ellos depende de este ancho que especificamos otra opción es cruz que el club es como un
surco y vas a ver que se

3:10:15se parece un surco aquí podemos ver que con los colores se genera como un efecto
visual que hace como si hubiera un surco en el marco o si el marco estuviera en tres
dimensiones otra opción es bridge beige significa

3:10:30cresta en español aquí lo podemos ver y tenemos otras dos opciones insef o out estas
son las opciones también podemos

3:10:45personalizar cada uno de los lados del borde no necesariamente porque uno de los
lados sea sólido el otro debe ser sólido podemos hacer distintas combinaciones si escribimos
un solo valor para el estilo ese estilo se va a

3:11:00aplicar a todos los lados todos los bordes del elemento aquí vemos el resultado de dos
valores sólido y potente el primer valor aplica

3:11:15para arriba y para abajo y el segundo valor aplica para la izquierda y para la derecha si
escribimos tres valores vamos a especificar por ejemplo quizás solitas y 12 si volvemos a cargar
la página

3:11:30puedes ver esta combinación vemos sólido el primer valor se aplica en la parte superior
el borde de arriba dust se explican los lados en la derecha en la izquierda y dos sets se aplica
en la parte de abajo en el borde inferior y

3:11:45también podemos simplemente especificar los cuatro valores y se van a asignar en el

orden de las agujas del reloj ya vas a ver aquí lo tenemos

3:12:00solé para arriba el borde superior dust para la derecha dos test para la parte inferior el
borde inferior y tapa para el borde izquierdo en el sentido de las agujas del reloj genial ya
sabes cómo
3:12:15personalizar el borde de los elementos de tu página web en la próxima parte vamos a
ver cómo puedes hacer que los bordes de tus imágenes o de sus elementos en html sean
redondeados esto también nos sirve para crear el efecto

3:12:30de que una imagen es circular presentar por ejemplo esta imagen como un círculo en
lugar de un cuadrado bien te veo en la siguiente parte del curso

3:12:45volvemos a nuestra página inicial ahora nuestro archivo css está vacío y queremos
crear una clase que se llama bordes redondeados el elemento que tenga esta clase va a tener
los bordes

3:13:00ligeramente redondeados normalmente usamos esta propiedad para imágenes la

propiedad se llama border beiras radio del borde y dependiendo de su valor cuanto mayor sea
el valor en píxeles mayor va a ser

3:13:15el efecto del borde redondeado ya vas a ver a qué me refiero vamos a agregarle esta
clase a la imagen del gatito nos vamos para aquí y para mostrarte que no importa el orden de
las propiedades vamos a agregarle aquí bordes

3:13:30redondeados guardamos el archivo y volvemos a cargar la página y aquí puedes ver

cómo tenemos este lindo efecto de un borde redondeado en la página cuanto mayor sea el
valor más

3:13:45visible va a ser ese efecto de redondear aquí lo podemos ver 150 así lo prácticamente
tenemos un círculo perfecto aquí es muy común en internet conseguir imágenes con los
bordes

3:14:00redondeados e incluso circulares también puedes especificar este valor como un

porcentaje eso lo vamos a ver en la próxima parte

3:14:15si queremos hacer que esta imagen sea un círculo o que tenga los bordes redondeados
como un círculo parecido un círculo usaríamos un valor cercano a 50% si volvemos a cargar la
página aquí puedes ver que la imagen como era

3:14:30cuadrada ahora se presenta como un círculo si agregamos esta clase bordes

redondeados a las otras imágenes que tenemos aquí por ejemplo la hazaña aquí y le
agregamos la clase bordes

3:14:45redondeados puedes ver cómo se redondea también la imagen en este caso como la
imagen es un rectángulo en lugar de un cuadrado no obtenemos como tal un círculo perfecto
más como un óvalo y ese ejemplo es aún

3:15:00más extremo en esta imagen le agregamos la clase bordes redondeados y aquí puedes
ver la imagen como se presenta como un óvalo también podemos disminuir este valor por

3:15:15ejemplo a 20% y vas a ver que ahora los bordes son redondeados pero nos forman
como tal un círculo un óvalo cuanto menor sea el valor menos redondeado van a ser los
bordes normalmente usamos 50% si queremos que la imagen sea circular

3:15:30ovalado genial ya sabes cómo redondear los bordes de las imágenes e incluso
presentarlas en forma de círculo en la próxima parte vamos a empezar a trabajar con los
contenedores generales los 10
3:15:45cómo podemos asignarles un color de fondo veámoslo en la próxima parte bien ahora
vamos a borrar esta regla y

3:16:00vamos a ver cómo puedes cambiar el color de fondo de un día un día vimos que es
como un contenedor con un propósito general lo usamos para actuar como un contenedor
para cualquier tipo de elemento y dijimos que los tips iban a ser muy importantes cuando
empezamos a

3:16:15trabajar con css porque podíamos asignarles un estilo y ese estilo se iba a aplicar
también a los elementos contenidos en el tiff bien así que aquí tenemos nuestro test que
teníamos en

3:16:30html que contiene las listas de las cosas que los gatos amas y las cosas que los gatos
odian también podríamos si queremos por ejemplo colocar esta imagen dentro del 10 la
imagen que corresponde

3:16:45a los gatitos vamos a empezar usando un selector de tipo vamos a seleccionar todos los
elementos de tipo tif y vamos a su color de fondo background significa fondo en español y

3:17:00color color color de fondo le vamos a asignar al color azul si volvemos a cargar la página
aquí podemos ver el color azul de fondo y confirmamos que en realidad si existía

3:17:15ese contenedor lo que es que estaba como transparente allí haciendo su función de
generar la estructura de la página pero ahorita ya podemos hacer que sea visible y podemos
confirmar que existe en este caso en tip se está extendiendo más allá

3:17:30de la imagen veamos qué ocurre si volvemos a colocar la imagen fuera del dif vamos a
copiar este elemento y lo pegamos aquí fuera del contenedor si volvemos a cargar la página
puedes

3:17:45ver que ahora en ti es como que se encogió porque ya sólo cubre hasta esta lista no
contiene a la imagen y así puedes ver visualmente qué es lo que ocurre cuando creamos un dif
en nuestra

3:18:00página estamos creando algo que está allí presente y que inicialmente es transparente
y que sirve como un contenedor para los elementos también podemos agregarle una clase
antes vamos a agregarle la clase

3:18:15con tenedor listas y así la vamos a aplicar un estilo específico y vamos a asignarle el
color plateado silver en inglés si volvemos a cargar la página aquí puedes ver también
funcionan las

3:18:30clases y esto abre todo un mundo de posibilidades lo vas a ver también más adelante
cuando empecemos a ver las variables css como los días pueden ser transformados y como
pueden cambiar su forma y su aspecto para crear estructuras increíbles ahorita sólo

3:18:45estamos viendo que ellos existen en realidad y que son parte de la estructura de la
página bien hasta ahora hemos trabajado principalmente con las clases en css así que vamos a
ver cómo puedes trabajar con un haití en la próxima parte

3:19:00nuevamente comenzamos con el estado inicial de nuestra página y tenemos un archivo

css vacío porque porque vamos a
3:19:15usar idish el haití es un identificador único para un elemento en tu página si vamos aquí
a nuestro archivo html podemos ver el elemento h 2 si nosotros

3:19:30queremos asignarle un estilo solamente a ese elemento podemos asignarle un haití y

solo se va a aplicar ese estilo a ese elemento específico le tendríamos que asignar un haití por
ejemplo título a datos o título principal tu puedes

3:19:45escoger el nombre que te parezca más descriptivo y una de las convenciones es separar
las palabras con un guión al igual que hacíamos con las clases vamos a css y ahora en lugar de
escribir

3:20:00un punto como hacíamos con las clases vamos a escribir un símbolo de numeral título
up datos ese numeral le dice acs se le dice el navegador o el browser que lo que estamos
escribiendo aquí es el nombre de un ied y de un identificador

3:20:15único que vamos a asignarle como estilo a ese elemento vamos a especificar un
tamaño de letra de 30 píxeles color del texto

3:20:30va a ser verde wing el tipo de letra va a ser este que tenemos aquí que nos lo auto
completo y es con genial vamos a volver a cargar nuestra página y podemos ver el estilo
aplicado solamente a ese elemento

3:20:45vemos un tamaño de letra más grande vemos un color específico y un tipo de letra
distinto genial vamos a practicar nuevamente con digamos esta imagen que

3:21:00tenemos aquí abajo vamos a asignarle un estilo específico a ese elemento para eso
debemos conseguirlo nuestro archivo si colocamos nuestro editor de código en pantalla
completa vamos aquí y este es el elemento de la imagen de

3:21:15los gatitos y ahora le vamos a asignar una imagen de gatos si vamos a nuestro archivo
css escribimos el símbolo de numeral y colocamos el nombre de lady

3:21:30imagen de gatos s ti es único para esta imagen el estilo que vamos a aplicar se va a
aplicar solo a esta imagen por ejemplo podemos decir que queremos asignarle un borde y

3:21:45queremos que la imagen sea redondeada podemos asignar un border 22 de 50% para
que la imagen sea redondeada podemos asignar un ancho del borde el estilo va a ser sólido y
el color digamos que es marrón

3:22:00brawn si guardamos el archivo y volvemos a cargar la página aquí podemos ver el

resultado podemos verlo en pantalla completa también aquí tenemos nuestro borde sólido
alrededor de una imagen redondeada y puedes ver que nos afectó a

3:22:15ningún otro elemento en la página genial el uso de haití es muy importante también
cuando comiences a trabajar con javascript los haitís además de permitirnos especificar un
estilo único para ese elemento también nos permite

3:22:30que javascript seleccione ese elemento y actúe sobre ese elemento de forma única
genial vamos a practicar con dos elementos más cómo puedes asignarles un haití y cómo
puedes personalizar su estilo

3:22:45vamos a personalizar el estilo de la lista de las cosas que los gatos aman y la lista de las
cosas que los gatos o bien vamos a aquí tenemos que de subir un poquito y llegamos a la lista
vamos a
3:23:00asignarle una idea al elemento web y ya vas a ver qué es lo que va a pasar listo gatos
aman por ejemplo lista de las cosas que los gatos aman para no hacerlo tan largo el nombre
sólo vamos a incluir

3:23:15esas tres palabras y también vamos a asignarle aquí un haití lista gatos odian ya
tenemos los dos aires ahora vamos a especificar el estilo

3:23:30lista gatos aman vamos a asignarle un tamaño de letra de 15 píxeles luego el color
vamos a asignarle azul violeta blue bay o led y para lista gatos odian

3:23:45vamos a asignarle un tamaño de letra específico 18 píxeles y el tipo de letra va a ser

harian helvética

3:24:00y sans-serif de respaldo si guardamos el archivo y volvemos a cargar la página aquí

puedes ver el estilo aplicado a cada una de las listas y algo muy curioso es como el estilo cae en
cascada

3:24:15de allí viene el nombre css la cec en inglés significa qashqai link que cae en cascada
representa este efecto que vemos aquí cuando nosotros le asignamos al elemento huele
studying estamos

3:24:30asignando selo el elemento huele y ese elemento principal tiene tres elementos
internos o contiene tres elementos el e y el estilo como que cae en cascada a través de la
estructura que nosotros

3:24:45creamos porque puedes ver que aquí nosotros estamos especificando el color del texto
para el elemento l que es el que tiene el haití pero ese mismo color

3:25:00de texto se aplicó para los elementos l y internos aquí lo tenemos así que el estilo está
como cayendo en cascada y eso es precisamente el principio de css genial ya sabes cómo
trabajar con haití

3:25:15ccss recuerda que tienes que escribir un símbolo del numeral un hashtag seguido de el
nombre de lighting y luego las sintaxis es básicamente la misma llaves y dentro de las llaves en
cada línea una propiedad con su valor y al final de

3:25:30cada propiedad un punto y coma genial pasemos a nuestro siguiente tema vamos a
comenzar a ver algo muy muy importante en desarrollo web cómo puedes controlar el espacio
que hay alrededor de tus elementos para que se presenten como tú

3:25:45lo deseas así que continuemos te veo allí bien comenzamos viendo el concepto de
padding el padre en html es la distancia

3:26:00que hay entre el borde de un elemento html que normalmente es un cuadrado un

rectángulo y su contenido porque por ejemplo aquí tenemos una nueva estructura html de
nuestro archivo que

3:26:15solo contiene una imagen esta imagen que vemos aquí dentro de un dif st tiene un
borde específico vamos a ver cómo podemos controlar el espacio entre ese borde y el
contenido de cada uno de los

3:26:30elementos ya lo vas a ver visualmente vamos a asignarle un color de fondo el 10 que

actúa como un contenedor vamos a asignarle el color crimson si volvemos a cargar la página
aquí puedes ver dónde
3:26:45está ubicado el tiempo la imagen está alineada su esquina superior izquierda está
alineada con la esquina superior izquierda del dif por defecto y aquí podemos ver que todavía
queda un espacio

3:27:00del tiff que no está lleno el deber contiene la imagen ahora si queremos ilustrar el
efecto de agregarle padding a una imagen primero para ilustrarlo vamos a asignarle un color
de fondo amarillo si volvemos a cargar la página

3:27:15no lo vamos a ver porque en este momento la imagen llena la totalidad del elemento
imagen sé que ahorita puede parecer un poco abstracto pero sea aquí piensa como que el
elemento de la imagen llega hasta un

3:27:30borde específico que es donde ve desde el borde de la imagen pero este elemento en
html su contenido es la imagen como tal vamos a ver lo vamos a ilustrar lo añadimos un color
de fondo para

3:27:45visualizar dónde está el borde del elemento de la imagen vamos a asignarle a un ancho
luego un color vamos a asignarle el color negro porque el fondo va a ser amarillo si podemos
verlo bien

3:28:00y el estilo va a ser sólido si volvemos a cargar la página puedes ver que ahora vemos un
borde negro alrededor de el elemento en este momento la imagen llena la totalidad del
elemento de imagen pero si

3:28:15le agregamos una propiedad llamada padding y escogemos un valor por ejemplo 15
píxeles vas a ver qué es lo que ocurre aquí lo tenemos es como su margen interno lo podrías
pensar así no es un margen como tal le asignamos el nombre

3:28:30karen pérez la distancia entre ese contenido y su borde el fondo de la imagen es

amarillo por eso vemos aquí el fondo amarillo puedes pensarlo como que el elemento html

3:28:45existe y es transparente y sirve como un contenedor y su contenido como tal es la

imagen pero también podemos especificar este espacio si vamos a las herramientas de
desarrolladores de google chrome hacemos clic derecho el inspector y sobre la

3:29:00imagen del gatito podemos ver aquí aquí abajo en este panel en styles mientras
tenemos seleccionado el elemento de la imagen podemos ver aquí un elemento que se

3:29:15llama par en ese pared está ahorita seleccionando la parte amarilla que podemos ver y
dentro está el contenido hasta la imagen y luego está el borde el padre luego el borde y
después viene algo que llamamos el

3:29:30margen que lo vamos a ver en la próxima parte del curso por ahora nos centramos en
primero el contenido luego el padre que lo tenemos en amarillo luego el borde finalmente el
margen para verlo más

3:29:45claramente creo que si le asignamos el valor morado el color morado aquí y colocamos
el cursor sobre parent también se puede ver más claramente puedes ver cómo estamos
seleccionando esa parte y se vuelve violeta más claro ok recuerda

3:30:00el padre entonces es la distancia entre el contenido de un elemento html y su borde

para que hay un espacio entre el contenido y el borde del elemento porque el borde del
elemento va a ser
3:30:15esencial para determinar la distancia que hay entre un elemento y otro en la página
web genial pasemos a la siguiente parte donde vamos a ver cómo puedes asignar distintos
valores de parís para cada lado del elemento porque no

3:30:30necesariamente debemos tener el mismo paren en todos los lados del elemento así
que continuemos y pasemos a la siguiente parte

3:30:45ahora veamos cómo puedes asignarle un ar indistinto a cada uno de los lados de tu
elemento porque en este momento puedes ver que el park inn en el borde superior es igual al
parking en el borde derecho al borde izquierdo y el borde inferior

3:31:00como podemos personalizarlo para cada borde dependiendo de cómo queremos

presentar el contenido simplemente en lugar de escribir padding lo que escribimos es para ir
seguido de un

3:31:15guión y especificamos el borde al cual nos estamos refiriendo paddington es el borde

superior top es se refiere al borde superior luego podemos colocar marín brain el

3:31:30parking en el borde derecho right significa derecho el par en life lift significa izquierdo
por ejemplo 10 píxeles y finalmente padding en el borde inferior varón 10

3:31:45píxeles ahora puedes ver que la distancia entre el contenido del elemento que es la
imagen y su x ven no es la misma en la parte superior que en la parte inferior y no es la misma
en la parte izquierda que en la parte derecha

3:32:00hay una forma aún más concisa de especificar esto en lugar de tomar cuatro líneas para
especificar cada uno de los bordes simplemente podemos escribirlos en una sola línea vas a
aprender cómo en la próxima parte

3:32:15para especificar el padre indicado uno de los lados del elemento en una sola línea en
lugar de cuatro como tenemos aquí solo debemos escribir paren de

3:32:30forma general es estar en y luego especificamos los valores en el sentido de las agujas
del reloj comenzando con el borde superior que es 20 en este caso sí que podemos ya borrar
esto luego

3:32:45sería el borde derecho recuerda que el reloj hace este movimiento así que vamos del
borde superior al borde derecho el borde derecho debería tener 15 píxeles según nuestras
reglas anteriores luego en lugar de ir a la izquierda

3:33:00iríamos al borde inferior sería 5 píxeles y finalmente el borde izquierdo 10 píxeles aquí
ya podemos borrar estas dos líneas y tenemos el padre especificado para cada uno de los
valores en el sentido de

3:33:15las agujas del reloj si volvemos a cargar la página puedes ver que el efecto fue
exactamente el mismo tenemos el parís superior el derecho el inferior y el izquierdo en el
sentido de las

3:33:30agujas del reloj ya sabes cómo trabajar con el paren recuerda que es la distancia entre
el contenido de un elemento y su borde pero también podemos especificar la distancia que
debe haber entre el borde del elemento y otros
3:33:45elementos que lo contengan o que estén junto al elemento eso se denomina el margen
pasemos a la siguiente parte para comenzar a hablar sobre el margen continuamos con
nuestro ejemplo con la

3:34:00imagen del gatito y el tic que lo contiene ahora en lugar de hablar del padre vamos a
hablar del margen el margen el margen es la distancia entre el borde de un elemento por
ejemplo aquí

3:34:15tenemos el borde negro del elemento de la imagen y el borde de otros elementos que
es básicamente cómo vamos a separar los distintos elementos antes estábamos separando el
contenido de un elemento de

3:34:30su borde ahora vamos más allá del borde y separamos un borde de otro borde de otro
elemento básicamente con el margen logramos la separación entre los elementos de la página
un ejemplo es la separación entre esta imagen y su

3:34:45contenedor en este momento vemos que la esquina superior izquierda de la imagen

está alineada con su contenedor en tiff porque no vemos un borde rojo aquí que es el el 10 el
contenedor están alineados pero si queremos agregar un

3:35:00borde citó entre la imagen y su contenedor para presentación deberíamos usar el

margen para esto escribimos margen en inglés y tenemos 15 píxeles volvemos a cargar la
página y

3:35:15aquí puedes ver cómo se separan esas esquinas porque estamos agregando 15 píxeles
de distancia en el borde superior en el borde derecho en el borde inferior y en el borde
izquierdo aquí lo podemos ver en pantalla completa en este

3:35:30caso es si estamos agregando los 15 píxeles en el borde derecha pero como el 10 toma
todo el ancho de la pantalla no se nota pero si hubiera otro elemento aquí al lado tendría 15
píxeles de

3:35:45separación vamos a cambiar el color del borde a blanco para poder verlo mejor ac
puedes ver la distancia que hay entre el borde blanco y el borde del contenedor tenemos una
distancia entre ese borde y

3:36:00el borde del contenedor igual que tendríamos entre este borde y cualquier otro
elemento que esté alrededor de la imagen del gatito ese es el propósito del margen veamos en
las herramientas de desarrolladores de chrome cómo se

3:36:15presenta esta imagen hacemos clic derecho sobre el elemento luego inspector y aquí
en el panel inferior seleccionando la imagen vamos nuevamente a esta presentación que nos
habla sobre

3:36:30el contenido del elemento que es la imagen luego sobre el fading que en este
momento no existe no tenemos paren porque no lo estamos personalizando en css así que
vemos una rayita no existe luego tenemos el borde que es la línea

3:36:45blanca podemos ver cómo pasa de blanco amarillo cuando lo seleccionamos y

finalmente aquí tenemos un margen ese margen que ahorita estás viendo en naranja tiene un
valor de 15 píxeles podemos ver el número 15 aquí y
3:37:00básicamente ningún otro elemento va a estar dentro de esa distancia del elemento de
la imagen es la distancia entre este elemento y cualquier otro elemento que lo rodee o que lo
contenga

3:37:15ese es el propósito del margen en html y es muy importante comprender la diferencia

entre el margen y el par en el margen y estar en vamos a ver la diferencia entre martín y
padding más adelante en el curso unos minutos en la

3:37:30próxima parte vamos a ver cómo puedes especificar un margen diferente para cada
uno de los bordes así que veamos cómo puedes hacerlo en la próxima parte

3:37:45digamos que en lugar de tener el mismo valor para el margen en cada uno de los lados
del elemento queremos que el margen superior sea mayor que el inferior o que el derecho sea
más amplio más ancho que la

3:38:00izquierda podemos hacerlo con propiedades específicas las mismas propiedades que
teníamos comparen pero ahora tenemos margen margin top 20 margin right

3:38:1515 por ejemplo sólo un ejemplo valores de muestra margin bottom que si el margen
inferior y margin-left el margen izquierdo como tenemos especificadas cada una de estas

3:38:30propiedades de forma individual no tenemos que colocar esta propiedad si volvemos a

cargar la página puedes ver como ahora el margen izquierdo es mucho más angosto mucho
más pequeñito porque estamos asignando son los 5 píxeles a

3:38:45ese margen no necesariamente también tienes que especificar todos los márgenes por
ejemplo si no quieres que haya un margen superior simplemente no lo incluyes y de esta
forma la imagen va a estar inmediatamente

3:39:00alineada con el borde superior de su contenedor no va a haber separación también

puedes colocarlo así y puedes ver cómo simplemente podemos personalizar cómo se va a
separar nuestro elemento de otros elementos y de su contenedor genial y también hay otra

3:39:15forma mucho más concisa de escribir el margen en una sola línea al igual que hacíamos
con el par y eso lo vamos a ver en la próxima parte vamos a volver a cargar la página y vemos
nuevamente el resultado

3:39:30al igual que hacíamos con el park inn podemos especificar el marcha y en el margen en
una sola línea de esta forma escribimos margin y en

3:39:45lugar de especificar cada una de estas individualmente en la misma línea las escribimos
en el sentido de las agujas del reloj primero el margen superior luego el margen derecho que
sería 15 píxeles el margen inferior

3:40:0010 píxeles y finalmente el margen izquierdo que sería 5 píxeles vamos de esta forma
superior derecho inferior izquierdo ahora podemos borrar estas líneas y

3:40:15puedes ver cómo tenemos css mucho más conciso en una sola línea especificamos esas
cuatro propiedades también si queremos asignar el mismo margen arriba y abajo izquierda a
derecha

3:40:30simplemente lo que tenemos que hacer es especificar dos valores este se aplicaría a el
margen superior y el margen inferior y éste se aplicaría al margen izquierdo y derecho aquí lo
podemos ver podemos comprobar que se
3:40:45está aplicando estos márgenes con las herramientas de desarrolladores de chrome si
abrimos nuevamente las herramientas seleccionando la imagen

3:41:00aquí podemos ver el valor del margen superior es 20 derecho es 15 inferiores 20 e

izquierdo es 15 le asignamos superior e inferior el mismo valor y derecho izquierdo el mismo
valor con dos valores que tenemos aquí genial esta es

3:41:15otra forma también de especificar lo de forma más precisa en lugar de escribir esto
escribir valores repetidos sólo escribimos dos valores superior inferior derecho izquierdo ya
sabes cómo trabajar

3:41:30con el margen y con el padre con el margen y con el marín ahora creo que es
importante dedicar también algunos minutos a hablar sobre sus diferencias e ilustrar las
visualmente así que en la próxima parte vamos a ver en el mismo

3:41:45elemento el martín y atar en y cómo funcionan como están relacionados uno con el
otro y sus diferencias vamos a ver la diferencia entre el

3:42:00margin y el karim visualmente con la imagen del gatito en el mismo elemento vamos a
asignar margen y tar en martín y paren vamos a borrar esta propiedad por el momento y
vamos a hacer algunos ajustes

3:42:15antes de comenzar a ver las diferencias el ancho del borde lo vamos a colocar en 4
píxeles el color del borde va a ser negro y el estilo sólido ok podemos colocarlo en negro o
también dejarlo en

3:42:30blanco pero creo que en este caso el negro nos va a ilustrar más porque vamos a poder
ver el borde aquí junto al tigre así que vamos a comenzar a ver la diferencia vamos a asignar un
margen de

3:42:4525 píxeles y un párking de 25 píxeles a todos los lados del elemento imagen que vamos
a volver a cargar este elemento y aquí lo podemos ver en pantalla completa el paren la
distancia que hay entre la imagen que

3:43:00es el contenido de ese elemento y su borde el borde negro que tenemos aquí es el
borde de el elemento imagen y esta distancia que tenemos aquí amarilla este amarillo es el par
en que estamos

3:43:15asignando como tal el padre y no tiene un color no es que el padre es amarillo el color
amarillo es el fondo que le estamos asignando a ese elemento de imagen aquí lo puedes ver
estamos asignando le un color de fondo amarillo

3:43:30al elemento imagen y ese es el color que se ve aquí para ilustrar para que veamos que
si hay una distancia entre estas dos partes del elemento entre el contenido y su borde este es
el padre ahora una vez que llegamos al borde de el elemento

3:43:45tenemos una distancia externa con otros elementos eso es lo que denominamos
margen el margen es esta distancia que puedes ver en rojo entre el borde de la imagen y su
contenedor también sería la distancia entre ese

3:44:00borde y cualquier otro elemento que lo rodea ese es el margen puedes ver la diferencia
el parís se puede considerar como una distancia interna entre el borde o la frontera del
elemento y su contenido y el margen es una instancia
3:44:15externa con otros elementos veamos las herramientas de desarrolladores de chrome
seleccionamos la imagen vemos que el contenido es una imagen la imagen del gatito de 281
por

3:44:30281 su tamaño luego viene una distancia que se llama el área con un valor de 25 a cada
lado imagen paren luego vemos el borde el borde tiene un tamaño un ancho de 4

3:44:45píxeles por eso vemos el valor 4 aquí y se marca el borde en la página imagen estar en
borde y luego cuando ya vamos fuera del borde tenemos un margen de 25 píxeles esto lo
vemos aquí en naranja en

3:45:00la página y el 25 píxeles a cada lado puedes ver como el mismo elemento puede tener
karim que es como un margen interno y el margen que es la distancia entre el elemento y los
elementos que lo

3:45:15rodean veamos qué pasa si quitamos el color de fondo de estos elementos para que no
sea tan obvio que es algo que normalmente vamos a hacer en las páginas web vamos a
asignarle margen y padre y sin tener

3:45:30necesariamente un color de fondo vamos a quitar esto pero si vamos a asignarle un

borde al contenedor antes vamos a copiar estas tres propiedades para que podamos ver la
distancia que hay entre los elementos

3:45:45volvemos a cargar la página y podemos ver esto ahora este es este el contenedor que
tenemos por fuera tenemos el elemento de la imagen y no se ve ningún color de fondo pero si
vemos el espacio y eso es lo que va a ocurrir

3:46:00en las páginas web normalmente vamos a ver es un espacio en la estructura de la

página y eso nos va a permitir personalizar aún más la ubicación del contenido y de los
elementos genial ya puedes trabajar con margin y comparen

3:46:15bien ahora que ya sabes cómo trabajar comparen y con margin en css ahora vamos a
comenzar a ver un tipo de selector

3:46:30distinto inicialmente trabajamos con los selectores de clase y los selectores de haití en
este momento vamos a comenzar a trabajar con los selectores de atributo veamos la
documentación a ver qué nos

3:46:45dice sobre este tipo de selector selectores de atributos los elementos pueden tener
atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan esto
todo lo hemos visto durante el curso los

3:47:00atributos como por ejemplo hr fo out en las imágenes esos son atributos en css puedes
utilizar selectores de atributo para seleccionar elementos definidos con unos atributos
determinados

3:47:15básicamente vamos a usar los selectores de atributo para seleccionar solamente los
elementos que tienen ciertos atributos aquí tenemos algunos ejemplos selectores de presencia
y valor

3:47:30estos electores permiten seleccionar un elemento a partir de la presencia de un

atributo por ejemplo a ser rey oa partir de varias coincidencias diferentes con respecto al valor
del atributo vamos a ver algunos ejemplos en esta tabla este
3:47:45es un ejemplo de un selector de atributos por ejemplo aquí tenemos a y entre
corchetes está el título cuando usamos este selector estamos escogiendo los elementos de
tipo a que tienen el

3:48:00atributo tyrone cuando usamos esto que es un poquito más elaborado estamos
seleccionando los elementos que tengan un atributo con un valor específico por ejemplo aquí
estaríamos seleccionando todos los elementos de tipo a los

3:48:15enlaces que llevan a esta dirección web específica con este valor del atributo a ser draft
también tenemos otras variaciones pero en este curso vamos a trabajar con estos dos
ejemplos principales seleccionar los

3:48:30elementos que tengan un atributo específico y elementos que tengan un atributo con
un valor específico comencemos a ver nuestro ejemplo tenemos nuevamente nuestra página
de los gatitos

3:48:45el mismo archivo html con el que hemos estado trabajando y aquí vamos a ir a nuestro
archivo css digamos que queremos asignarle un estilo por ejemplo a todas las imágenes que
tengan el atributo out

3:49:00si sigues las recomendaciones todas las imágenes deberían tener un atributo out pero
este ejemplo es simplemente para ilustrar cómo funcionan los selectores de atributo aquí si
vamos por ejemplo a

3:49:15la imagen de la lasaña podemos ver que ese elemento tiene aquí el atributo out así que
ese elemento debería ser seleccionado al igual que cualquier otra

3:49:30imagen que tenga este atributo definido vamos a asignarle un por rangers de 50% para
que sea circular con los bordes redondeados volvemos a cargar la página y aquí podemos ver
que

3:49:45todas las imágenes han sido redondeadas porque todas tenían un atributo out como
debe ser pero ahora vamos a probar qué ocurre si le quitamos ese atributo al elemento de la
imagen de la lasaña por ejemplo esto es sólo un ejemplo para

3:50:00ilustrar cómo funcionan los selectores de atributos volvemos a cargar la página y ya

puedes ver que ahora esta imagen no fue afectada por ese estilo no se le asignó ese estilo
porque no tiene el atributo out no fue seleccionada por

3:50:15este selector de css vamos a colocar nuevamente este atributo y puedes ver como
ahora sí fue seleccionado genial ahora digamos que queremos seleccionar todos los elementos

3:50:30de tipo radio ok todos estos elementos de tipo radio que serían estos dos puntitos que
tenemos aquí si vamos a nuestro archivo html vamos a colocarlo en pantalla completa y

3:50:45llegamos a nuestro formulario vamos a los botones de radio vemos que para
seleccionar esos elementos en realidad sería un poco complicado si no usáramos selectores de
atributos por qué porque tenemos varios

3:51:00elementos del mismo tipo por ejemplo input tiempos puede ser de tipo radio pero
también puede ser de tipo chef box y también puede ser de tipo text así que si usamos
3:51:15como tal el selector de tipo input no vamos a obtener lo que queremos que solamente
seleccionar los botones de radio lo único que podríamos hacer es asignarle en una clase a
todos los botones de tipo radio pero hay una forma

3:51:30mucho más concisa de hacerlo que asignar clases porque queremos seleccionar todos
los elementos de tipo input que tienen a tributo con este valor específico el tipo de input es
radio

3:51:45entonces lo que podemos hacer es simplemente esto escribir un selector de atributo

que seleccione los elementos que tengan este atributo type igual a radio y así estaríamos
seleccionando

3:52:00todos los botones de radio de nuestra página digamos que las queremos asignar un
margen de 5 píxeles para que estén separados unos de los otros si volvemos a cargar la página
ahora podemos ver que hay más separación entre estos elementos

3:52:15porque si se les asignó el margen alrededor de ellos para exagerar lo solo ver el efecto
más claramente podemos volver a cargar la página y aquí puedes ver el efecto se les asignó un
margen si usamos las herramientas de desarrolladores de chrome

3:52:30inspeccionamos este elemento hacemos clic derecho sobre el elemento podemos

hacer clic derecho aquí luego vamos a través de la estructura

3:52:45hasta que llegamos al elemento input y aquí abajo podemos ver el panel que veíamos
antes cuando estudiamos el primer margen aquí podemos ver el margen que le asignamos 25 y
lo puedes ver resaltado en la página en naranja genial no

3:53:00estamos seleccionando todos los elementos que contienen este atributo con este valor
también podríamos ser aún más específicos y decir que todos los elementos de tipo input que
tenga este

3:53:15atributo con este valor esa es otra opción si volvemos a cargar la página puedes ver
que el efecto es exactamente el mismo pero en este caso también podríamos omitir lo si no es
necesario especificar el tipo de elemento vamos a

3:53:30colocar un margen un poco más razonable de 5 píxeles también podríamos seleccionar

todas las casillas de verificación y para eso simplemente tendríamos que escribir un selector de
atributo para

3:53:45seleccionar todos los elementos cuyo valor del atributo type sea chac vox recuerda que
las casillas de verificación tienen este valor para este atributo type igual a check box vamos a

3:54:00asignarles un margen distinto de 8 píxeles por ejemplo y aquí lo podemos ver ya están
separadas y tienen su margen propio genial igualmente podemos

3:54:15omitir input aquí y se va a seleccionar y finalmente vamos a ver algo que va a ser muy
muy útil también como puedes seleccionar los enlaces que lleven a un mismo destino a una
misma página puedes escribir un selector de atributo como

3:54:30tendríamos aquí primero escribimos el tipo de elemento que a para el anclar los
enlaces y luego decimos que queremos seleccionar todos los elementos de tipo a cuyo valor
del atributo h3
3:54:45la página de frijol camps punto org aquí podemos subir copiamos y pegamos el valor de
h red de ese enlace que queremos seleccionar de esos enlaces que queremos seleccionar y
listo ya tenemos

3:55:00nuestro selector de atributo en este caso vamos a seleccionar este enlace que lleva
áfrica ur camps y este enlace aquí que tenemos abajo que también lleva africano que cambió
de estilo le vamos a

3:55:15hacer vamos a asignarle un color verde y vamos a decir quien no queremos que el
enlace esté subrayado por ejemplo digamos que no nos gusta este formato por defecto que
tienen los enlaces que es un subrayado para quitar ese

3:55:30subrayado le asignamos a la propiedad text decoration el valor no texto significa texto

en español y decoration significa como una decoración decoración del texto ninguna no
queremos

3:55:45ninguna decoración y también queremos que el texto se presente en negrita así que
podemos asignarle este valor para la propiedad font weight font es como la letra o la fuente
weight espeso en

3:56:00español el peso de la fuente de la letra va a ser bone que en español significa negrita
queremos que el texto se muestre en negrita si volvemos a cargar la página o la puedes ver
que ahora se le

3:56:15aplicó el estilo a este enlace y también si vamos aquí abajo se le aplicó el estilo a este
enlace genial estamos seleccionando los elementos de tipo a en base al valor de su atributo ya
que si tenemos muchos

3:56:30enlaces de nuestra página que llevan al mismo destino y queremos que todos sean
consistentes podemos seleccionarlos con los selectores de atributo ahora vamos a hablar un
poco sobre las unidades relativas y las unidades absolutas

3:56:45porque hasta ahora hemos trabajado con píxeles hemos trabajado con porcentajes y
hay otras unidades que también son importantes para desarrollo web cuáles son sus
diferencias y cómo las puedes usar todo eso lo vamos a ver en la próxima parte

3:57:00vamos a ver un ejemplo gráfico de las distintas unidades con las que puedes trabajar

3:57:15css en html este ejemplo está basado en el ejemplo de la red de desarrolladores de

mozilla vamos a ir creando tres elementos que nos van a permitir ver la diferencia entre tres
unidades

3:57:30importantes píxeles wb que es el view point y m que es otra unidad importante esta es
una unidad absoluta porque especifica exactamente el tamaño del elemento píxeles wv y m
son unidades relativas porque son relativas a otros

3:57:45valores en nuestra página por ejemplo b&w view x depende del tamaño de la pantalla
del browser y m depende del tamaño de la letra del contenedor ya vamos a ver muchos más
detalles sobre

3:58:00esto si vamos al artículo en la documentación de la red de desarrolladores de mozilla el

artículo valores y unidades css vamos a leer la introducción todas las propiedades que se
utilizan en
3:58:15el css tienen un valor o un conjunto de valores que esa propiedad admite y echar un
vistazo a cualquier página de propiedades en la red de desarrolladores de mozilla te ayudará a
comprender qué valores admite una propiedad en

3:58:30particular vamos aquí más abajo nos explican un poco sobre las unidades y podemos
aquí ver longitudes tenemos una tabla de las unidades de longitud absoluta todas las unidades
siguientes son unidades de longitud absoluta no son

3:58:45relativas a nada más y en general se considera que siempre tienen el mismo tamaño
por ejemplo ce m m m q y n pulgadas ps

3:59:00pt o px px es la unidad que hemos estado usando comúnmente hasta ahora que
representa píxeles o píxeles la mayoría de estos valores son más útiles cuando se usan en una
salida d en formato impreso que en la salida de pantalla

3:59:15por ejemplo normalmente no usamos centímetros en pantalla el único valor que usarás
de forma frecuente es píxeles como has visto hasta ahora en los ejemplos normalmente solo
hemos usado píxeles de esta tabla y luego vemos una

3:59:30tabla de unidades de longitud relativa porque son relativas porque son relativas a algo
más por ejemplo al tamaño de la letra del elemento principal o al tamaño de la ventana

3:59:45gráfica de la ventana de tu navegador la ventaja de usar unidades relativas es que con

una planificación cuidadosa puedes lograr que el tamaño del texto o de otros elementos
escalen en relación con todo lo demás en la página en la

4:00:00tabla siguiente se enumeran algunas de las unidades más útiles aquí las tenemos
podemos ver que la tenemos en nuestro ejemplo que vamos a ver ahorita esta unidad es
relativa al tamaño de la

4:00:15letra del elemento padre del elemento que lo contienen en el caso de propiedades
tipográficas como font-size y el tamaño de la fuente del propio elemento en el caso de otras
propiedades

4:00:30como web tenemos también x h rm l h y esta otra unidad la teníamos en el ejemplo w

me representa 1% del ancho de la ventana gráfica por ejemplo si tenemos 20 w sería el 20%
del ancho de

4:00:45la ventana gráfica ibh es el 1 por ciento de la altura de la ventana gráfica porque w y h
wb en inglés representa un web que significa

4:01:00ancho por eso es el ancho de la ventana gráfica y h representa height que significa
altura la altura de la ventana gráfica y también tenemos b min y b max puedes leer más sobre
la descripción de

4:01:15estas unidades en este artículo de la documento aquí vemos un ejemplo que es muy
parecido el ejemplo que vamos a hacer nuestro ejemplo está inspirado en este ejemplo que
tenemos aquí o que cualquier cosa si quieres referirte a este artículo leer más sobre estas

4:01:30unidades puedes ir al artículo valores y unidades de césar vamos a comenzar con

nuestro ejemplo tenemos esta estructura nuestro archivo html el elemento raíz

4:01:45html luego el título app de datos o vamos a cambiarle el título vamos a asignarle
prueba de unidades unidades relativas y absolutas estamos incluyendo nuestra hoja de
4:02:00estilos está el punto css y en el cuerpo tenemos un contenedor principal con un haití
contenedor principal y dentro tenemos tres contenedores 310 eso steve en lugar de actuar
como contenedores

4:02:15aquí van a actuar como cajas como rectángulos que vamos a personalizar y le estamos
asignando a estos rectángulos dos clases una clase recta para las tres y después clases

4:02:30específicas para cada uno dependiendo de su unidad de la clase px para el primero wb

para el segundo y m para el tercero bien ahora vamos a nuestro archivo css puedes ver que en
este momento en la

4:02:45página no vemos nada más que el texto porque no hemos empezado a escribir las
reglas en css vamos a personalizar el aspecto del contenedor principal el color del texto en el
contenedor

4:03:00principal va a ser blanco white vamos a asignarle 5 píxeles de parís recuerda que es la
distancia entre el contenido del elemento y su borde un tamaño de letra de 10 píxeles tamaño
de fuente

4:03:15el color de fondo va a ser amarillo y el tipo de letra va a ser verdad con estos tipos de
letras de respaldo vamos a cargar nuestra página nuevamente y aquí lo podemos ver este es

4:03:30el contenedor principal lo que luego cada uno de los contenedores va a tener su propio
color de fondo por eso es que estamos asignando el color de la letra aquí blanco porque ese
estilo se va a asignar va a quedar en cascada a los 3

4:03:45tips que él contiene si aquí nosotros le estamos asignando blanco al contenedor

principal los tres contenedores internos también van a tener la letra blanca si no cambiamos
ese valor en sus clases genial ok vamos a definir cómo se van a

4:04:00ver en general los rectángulos recuerda que cada uno de estos elementos tiene la clase
de rectángulo esos tres rectángulos van a tener un valor de pares de cinco píxeles y un margen
de

4:04:15cinco píxeles que nos estamos separando y finalmente para cada uno vamos a asignar
un color de fondo y un ancho específico con su unidad respectiva píxeles

4:04:30el color de fondo para los píxeles va a hacer crimson y vamos a asignarle un ancho de
200 píxeles si volvemos a cargar la página aquí vemos este rectángulo y ahora en la próxima
clase

4:04:45vamos a asignarle la unidad wb para que veas como esa unidad es relativa al tamaño
de la ventana del browser le asignamos un color dark magenta que es

4:05:00como un morado el ancho va a ser 20 wb esto representa el 20% del ancho de la

ventana del navegador así que si la ventana del navegador se hace más pequeña ese ancho se
va a reajustar y si se expande el ancho también se va a reajustar se va a expandir

4:05:15si volvemos a cargar la página vemos este rectángulo y finalmente vamos a agregar la
clase m le asignamos el color de fondo verde y el ancho

4:05:3015m volvemos a cargar la página y aquí tenemos nuestro elemento ahora primero que
todo vamos a ver cómo funciona los pixeles esta unidad si nosotros reajustamos el tamaño de
la ventana del navegador
4:05:45podemos ver que los pixeles se mantienen exactamente igual el tamaño el ancho de
ese rectángulo se mantiene igual pero esta cajita este rectángulo a morado que tenemos aquí
con las unidades

4:06:00de wb si se va expandiendo no sé si lo notas vamos a verlo poco a poco puedes ver

cómo se va expandiendo porque representa el 20% del ancho de la ventana del navegador

4:06:15inicialmente cuando estaba más angosta la cajita era más pequeña y cada vez se va
expandiendo más y si lo colocamos en pantalla completa es incluso más ancho más larga que
la caja roja así que

4:06:30puedes ver cómo las unidades relativas son muy útiles cuando queremos crear páginas
web responsivas que funcionen tanto para dispositivos móviles como dispositivos como la tops
o computadoras de distintos tamaños este es un ejemplo

4:06:45de una unidad relativa pero esta unidad es relativa al tamaño de la ventana del
navegador esta unidad m también es relativa pero es relativa al tamaño del texto el tamaño de
la fuente de ese elemento del

4:07:00contenedor para demostrar cómo está afectada por el tamaño de la letra vamos a
cambiar el tamaño de la letra aquí digamos 25

4:07:15este es el tamaño de la letra del contenedor principal así que su estilo se va a heredar o
va a caer en cascada y se va a aplicar a este elemento también ya vas a ver

4:07:30puedes ver como si colocamos en pantalla completa nuestro resultado ahora el ancho
de la caja verde es mucho mayor que el ancho de cualquiera de estas dos cajas que tenemos
aquí porque porque es relativo el tamaño de la letra como

4:07:45aumentamos el tamaño de la letra aumentó en esa misma proporción el tamaño de la

caja el ancho de la caja y también si disminuimos el tamaño de la letra a 5 píxeles por ejemplo
puedes ver como el tamaño de la caja se hace también más

4:08:00pequeñito en relación con las demás genial también también puedes usar esa unidad m
como una forma de reajustar el tamaño de la letra de los

4:08:15elementos internos déjame explicarte a qué me refiero si que tenemos el tamaño de la

letra con esta unidad m estamos diciendo que el tamaño de la letra debería ser 1.5 veces el
tamaño de la

4:08:30letra de su contenedor entonces si tenemos 5 píxeles el tamaño de la letra debería ser

1.5 veces ese valor veamos aquí puedes verlo puedes ver que la letra es mucho más grande
con

4:08:45respecto a las otras porque estamos diciendo que en relación con el padre o con su
contenedor este elemento debería tener un tamaño de letra mayor porque su valor es 1.5

4:09:001.5 veces el factor si fuera 0.5 el tamaño de la letra debería ser más pequeñita y aquí lo
podemos ver o si fuera por ejemplo 5 veces 5 aquí puedes ver un tamaño de letra mucho

4:09:15mucho más grande eso es lo importante de saber cómo usar o cómo trabajar con las
unidades relativas porque pueden ser muy útiles para reajustar toda la presentación de tu
página genial vamos a volver a colocar aquí un tamaño de letra
4:09:30más adecuado digamos 15 píxeles y ya sabes cómo trabajar con este tipo de unidad hay
muchas otras unidades absolutas y relativas estas son algunas de las más comunes puedes
referirte a ese artículo que vimos en la documentación para aprender más sobre

4:09:45las unidades ahora en la próxima parte vamos a probar que en realidad del elemento
policy existe y es parte de la estructura de la página eso lo vamos a hacer en tan sólo unos
segundos así que te espero allí

4:10:00ahora rápidamente vamos a ver con css que en realidad es elementos boring también
es parte de la estructura de nuestra página existe el elemento por y

4:10:15es un elemento y tienes como el elemento principal de la estructura que vemos en la

página vamos a ver que en realidad existe usando un selector de tipo y le vamos a asignar un
color de fondo tan fácil como eso así podemos determinar

4:10:30que en realidad existe si volvemos a cargar la página aquí podemos ver podemos
colocarlo en pantalla completa y vemos que el cuerpo el por y ese elemento cubre toda la
ventana del navegador en este caso le asignamos el

4:10:45color negro pero digamos que le asignamos plateado y así podemos ver también los
elementos pues todo esto es el boeing en el elemento bar y también podemos comprobar que
ese es el elemento por y que existe sin agregarle un color

4:11:00específico veamos cómo podemos hacerlo si tenemos nuestro bonito transparente y

hacemos clic en inspector se van a abrir las herramientas de desarrolladores google chrome y
aquí podemos hacer clic

4:11:15sobre la etiqueta bar y la podemos cerrar con la flechita para sólo mostrar este
elemento y podemos ver que cubre toda el área de la página web toda el área donde se
muestra la página web si reajustamos el tamaño se hace más grande

4:11:30o más pequeño el bar y ese elemento se reajusta para cubrir toda el área de la página
web genial ya comprobamos que por y en sí y también es un elemento así que

4:11:45podemos asignarle también ciertos por ejemplo estilos a ese elemento y se aplicaría
ese estilo en todos los elementos que pertenezcan a bari por ejemplo si le asignamos algún
estilo al elemento por y todos los elementos a los

4:12:00cuales se podría aplicar ese estilo a lo largo de toda esta página también tendrían ese
mismo estilo comprobemos lo por ejemplo si le asignamos un color de texto particular por
ejemplo chocolate

4:12:15hacemos clic aquí para volver a cargar la página y vemos que ahora todo el texto todos
los elementos que podían tener esta propiedad y este color tienen ese estilo esto es muy útil
cuando

4:12:30queremos definir ciertos estilos que se van a repetir en todos los elementos a los
cuales se puede aplicar ese estilo lo vamos a usar también cuando comencemos a trabajar con
las variables en css comenzaremos a verlo ya hacia el

4:12:45final del curso genial ya sabes que por existe y que puedes heredar estilos a partir de
esta regla en css
4:13:00a medida que vayamos creando estructuras más complejas en html frecuentemente
vamos a necesitar asignar varios estilos a un mismo elemento así que es importante saber
cómo se van a priorizar esos estilos si hay algún conflicto

4:13:15entre uno y el otro cuál va a ser el resultado eso es algo muy común es importante que
entiendas cómo funciona esto en css cómo podemos priorizar estilos por ejemplo si yo le
asigno dos

4:13:30clases al elemento h1 en este caso hola mundo aquí puedes ver la estructura html y
aquí tenemos point tenemos un título un encabezado h1 y aquí tenemos un enlace con el
elemento a

4:13:45por ahora vamos a trabajar con el título con el encabezado h1 aquí voy a incrementar
aún más el zoom para que puedas verlo con más detalle o que estoy en un zoom de 250 por
ciento en chrome tú lo vas a ver inicialmente más pequeño

4:14:00si estás en 100% sería algo así lo vamos a dejar en 250 ok vamos a asignarle dos clases
a este elemento texto azul y recuerda que la segunda clase la podemos escribir sólo separando

4:14:15las con un espacio vamos a colocar el editor en pantalla completa por un segundo para
que veas toda la línea completa que tenemos aquí clase texto azul y texto morado tenemos
dos clases distintas que van a tener un conflicto

4:14:30porque el texto no puede ser azul y morado a la vez alguna de las dos va a tener una
prioridad y ese va a ser el resultado final pero cuenta las dos va a ser la principal o la que iba a
tener el resultado final

4:14:45veamos si nos vamos a nuestro archivo css vamos a definir dos reglas para estas clases
para textos son el color del texto va a ser bloom azul y para texto morado el color del texto va
a ser

4:15:00propio redoble de tambores porque vamos a ver cuál es el resultado aquí lo tenemos
morado el texto se

4:15:15muestra en morado porque veamos la lógica porque inicialmente si tenemos texto azul
como la primera clase en nuestra lista de clases podríamos pensar que esa clase o ese estilo se
va a priorizar pero no el texto morado es el

4:15:30resultante y déjame decirte que el orden de las clases es sorprendentemente no

importa o no hace ningún efecto en html el orden en que escribas estas dos clases o

4:15:45cualquier número de clases no tiene efecto en el resultado final y te lo puedo mostrar

si simplemente cambiamos el orden invertimos el orden de estas dos clases volvemos a cargar
la página y puedes ver

4:16:00que sigue siendo morado así que no hay una prioridad específica entre las clases en
html donde si hay prioridad es en css porque la última clase es la que va a tener prioridad la
última clase que

4:16:15se encuentre en el archivo css en el orden en que aparezcan en este caso la clase texto
azul aparece primero que la clase texto morado y puedes pensarlo así como que a medida que
se vaya generando
4:16:30ese estilo y al final se decide que como esta es la última y hay un conflicto porque
ambas quieren asignar un color de texto especie el conflicto se resuelve asignando el último
valor que se le

4:16:45asignó a esa propiedad el valor de esa propiedad el último valor asignado está en la
última clase que se definió en css podemos comprobarlo invirtiendo el orden si ahora
escribimos la clase texto

4:17:00morado primero y luego la clase texto azul vamos a ver el resultado ahora puedes ver
que el texto es azul porque esta es la última clase que se encontró en el archivo css que aplica
para ese

4:17:15elemento entre estas dos si hay un conflicto se va a escoger el último valor que se le
asignó que es este que tenemos aquí ya sabes que el orden de las clases en html en este
atributo en

4:17:30html no tiene ningún impacto sobre el resultado sólo el orden en css vamos a ver otro
ejemplo en este caso vamos a aplicarle un estilo una clase a este enlace que tenemos aquí

4:17:45podemos quitar esta clase del elemento del título y enfocarnos en el enlace que
tenemos aquí veámoslo en pantalla completa vamos a asignarle una clase llamada sin
subrayado sin subrayado

4:18:00queremos que el enlace no esté subrayado pero vamos a ver cuál va a tener prioridad
si escribimos esto en css si usamos un selector de tipo para asignarle un

4:18:15estilo a todos los elementos de tipo a o si esto va a tener prioridad la clase que estamos
asignando le a ese elemento en particular cual crees que va a tener prioridad recuerda esa
respuesta que acabas de

4:18:30pensar y vamos a comprobar qué es lo que ocurre vamos a asignarle a los elementos
de tipo a un subrayado morado ondulado baby es ondulado y decimos underline subrayado
estamos

4:18:45especificando que queremos un subrayado morado ondulado va a ser como algo

parecido a este subrayado que vemos aquí y vamos a definir una propiedad que entra en
conflicto con lo que acabamos

4:19:00de escribir digamos que queremos que todos los elementos que tengan esta clase sin
subrayado no tengan ningún tipo de subrayado así que escogemos el valor no aquí le estamos
asignando un subrayado específico y aquí estamos

4:19:15quitando el subrayado cuál creés de las dos que tendrá prioridad bueno veámoslo
volviendo a cargar la página aquí lo podemos ver este enlace ahora no tiene subrayado así que
esta clase que

4:19:30tenemos aquí tuvo prioridad vamos a ver qué ocurre si invertimos el orden primero
estamos escribiendo el selector de clase y luego el selector de tipo veamos

4:19:45aún así el enlace no tiene ningún subrayado porque porque la clase tiene precedencia
sobre el selector más general o más genérico que selecciona todos los elementos de un tipo
específico así que ya sabes si asignas
4:20:00una clase a un elemento ese estilo va a tener prioridad sobre el estilo que asigna este a
todos los elementos de un mismo tipo por qué porque este tipo de selector es más genérico
más general y

4:20:15esta clase es más específica entonces css la prioriza se prioriza ese estilo sin importar
en qué orden estén en el archivo css si borramos esta clase aquí

4:20:30ahora vas a ver el estilo que lo hubiéramos asignado inicialmente un subrayado

ondulado morado genial estos son dos principios importantes el orden de las clases en css y
también la prioridad de los

4:20:45selectores de clases sobre los selectores de tipo también es importante que sepas si
hay alguna prioridad de los ied y sobre las clases si asignamos un estilo a una idea específico
ese estilo va a tener prioridad sobre una clase lo

4:21:00vamos a ver en la próxima parte del cusco vamos a comprobar si existe alguna
prioridad para los haitises los

4:21:15identificadores únicos sobre las clases o no veamos y comprobemos nosotros mismos si

por ejemplo le asignamos un haití al elemento h1 que tenemos aquí vamos a asignarle el haití
título porque

4:21:30digamos que sólo vamos a tener un título y también le vamos a asignar una clase
vamos a mostrar el editor en pantalla completa esa clase se va a llamar texto azul ambos
selectores van a tener una

4:21:45propiedad que va a estar en conflicto el título y el texto azul el haití y la clase van a
intentar personalizar el color del texto pero un texto no puede tener dos colores a la vez así
que vamos a ver cuál se prioriza primero

4:22:00comenzamos con el lighting el lady es título le vamos a asignar el color morado por pu y
luego vamos a definir aquí un selector

4:22:15de clase para texto azul y vamos a asignarle el color azul al texto cuál va a ser el
resultado entre el haití o la clase cuál crees que va a ganar recuerda tu respuesta y veamos el
resultado

4:22:30aquí lo tenemos el texto es morado porque el haití tiene prioridad sobre la clase como
puedes ver estamos yendo como a selectores más específicos antes teníamos selectores de
tipo que eran como los más genéricos que seleccionaban

4:22:45todos los elementos de un tipo específico luego fuimos a clases que nos permiten
asignarle un estilo a uno o más elementos y luego vamos a un selector que es aún más
específico que es el

4:23:00haití y como es el más específico es el que tiene mayor prioridad sobre las clases
inclusive y sobre los selectores de tipo no importa el orden en el cual

4:23:15escribas estas reglas en ccs vamos a comprobarlo vamos a cambiar el orden y volvemos
a cargar la página y vemos que el haití sigue teniendo prioridad general ahora vamos a ver otro
ejemplo con este enlace como hicimos en la parte
4:23:30anterior podemos ya aquí borrar este de esta clase del elemento h1 ahora vamos aquí
el elemento del enlace y vamos a agregarle un haití y una clase el haití se va a llamar enlace
principal

4:23:45y la clase se va a llamar sin subrayado tenemos un haití y una clase vamos a ver
nuevamente cuál se prioriza el haití y se llamaba enlace principal vamos a

4:24:00asignarle un color verde y vamos a personalizar el subrayado con text decoration

tenemos green verde baby para que sea ondulado y android line que es subrayado

4:24:15después de definir nuestra regla para el haití también tenemos nuestra regla para el
selector de clase sin subrayado vamos a tratar de asignar estilos que entren en conflicto el
color del texto y vamos

4:24:30a tratar de quitarle subrayado con texto gration norma veamos cuál se prioriza veamos
cuál es el resultado verde o azul si volvemos a cargar la página vemos que es verde con un
subrayado verde ondulado exactamente

4:24:45lo que definimos aquí en nuestra regla para el haití puedes ver que en este ejemplo se
sigue priorizando el haití porque es un selector más específico así que si hay alguna propiedad
que entre en conflicto con otras clases que tiene el

4:25:00elemento siempre se van a priorizar las que están en el haití que en el selector del aire
bien ya sabes que los haitises siempre se priorizan sobre clases y que las clases se priorizan
sobre los

4:25:15selectores de tipo vamos priorizando los selectores que son más específicos en la
próxima parte también vamos a ver qué ocurre si le asignamos un estilo en línea a un
elemento directamente en html

4:25:30y si tenemos en esa misma propiedad en nuestro archivo css cual será priorizado lo
veremos en la próxima parte

4:25:45veamos cuántas las tres opciones se priorizan cuando el mismo elemento tiene una
clase un haití y un estilo en línea probemos a nuestro encabezado de nuestro título le vamos a
asignar un haití

4:26:00título le vamos a asignar una clase texto azul y luego le asignamos un estilo en línea con
la propiedad de estadio que aprendiste cuando recién estábamos comenzando la parte de css
le

4:26:15vamos a asignar ese estilo en línea el color morán por paul ok y dentro de estos
electores en css en esas reglas también vamos a tratar de cambiar el color del

4:26:30texto y vamos a ver cuál es el color final que se presenta vamos a definir un selector de
clase texto azul y vamos a asignarle al color duro

4:26:45también para el lighting título vamos a asignarle el color negro también tenemos el
estilo en línea que le asigna el color morado así que veamos cuál gana

4:27:00azul negro o morado listo redoble de tambores si volvemos a cargar la página vemos
que el ganador es morado porque nuestra clase era azul nuestro haití era

4:27:15negro y finalmente el estilo en línea enamorado el estilo en línea se prioriza aún por
encima de los high de seal asignas alguna estilo en línea al elemento ese estilo se va a priorizar
4:27:30pero hay una forma de cambiar también ese comportamiento que hay por defecto o
ese resultado que por defecto si nosotros queremos que todos los elementos que tengan esta
clase por ejemplo tengan el texto de color azul

4:27:45sin importar cualquier otro conflicto que tenga con idish o con estilos en línea o con
cualquier otro selector podemos agregar aquí es un signo de exclamación y escribir
importantes que significa importante en español

4:28:00eso no le va a decir al browser al navegador que es muy importante que asigne este
valor para esa propiedad sin importar cualquier otro conflicto ahora si volvemos a cargar la
página puedes ver que ahora el resultado es un texto

4:28:15azul porque estamos indicando explícitamente que ese valor se debe asignar a esa
propiedad y vemos el resultado general no osea que si tenemos el control en nuestras manos
en realidad si queremos que sin faltas

4:28:30sin faltas sin importar cualquier conflicto que pueda ocurrir este debe ser el valor si el
elemento tiene esta clase simplemente agregamos importante también lo podemos agregar en
un haití

4:28:45si lo agregamos aquí mira el resultado ahora es negro el yang si volvemos a la

normalidad tenemos morado porque los estilos en línea tienen la mayor prioridad genial esta
parte del tema es muy muy importante porque a medida que

4:29:00crees estructuras y estilos más complicados va a empezar a surgir este tipo de conflicto
y este tipo de contradicciones en los estilos entonces es importante que sepas cómo se van a
resolver y cuál va a ser el resultado

4:29:15ahora vamos a comenzar a hablar y en las próximas partes vamos a seguir hablando

4:29:30sobre los colores en css como puedes escribir un color específico en css sin que sea una
palabra específica como blue green la primera opción es usar un código hexadecimal

4:29:45un código hexadecimal en inglés exotismo code es un código en base 16 normalmente

nosotros tenemos base 10 en el sistema

4:30:00hexadecimal base 16 que ocurre tenemos estos posibles dígitos del 0 al 9 en cuanto a
números y luego de la a a la f como letras la representaría algo parecido al 10 en el sistema
decimal

4:30:15tenemos estas posibles opciones 16 posibles opciones para cada dígito en nuestro
código y vamos a usar ese sistema extra decimal para de escribir nuestro color tiene tres
componentes principales cada color este por ejemplo

4:30:30de un número en el sistema hexadecimal tiene seis dígitos 1 2 3 4 5 6 comienza con

numeral y cada uno de esos dígitos va a estar entre 0 y 9 o en 3 efe tenemos 16 posibles
opciones para cada

4:30:45uno de los dígitos si te estás preguntando que se refiere que estos símbolos que
tenemos aquí estos son los símbolos que podemos usar en css para escribir un comentario ok
una barra inclinada con un asterisco
4:31:00y luego un asterisco y una barra inclinada para cerrar el comentario que así es como
podemos escribir comentarios en css pero retomando nuestra charla sobre los códigos
hexadecimal es este es un ejemplo de un color en esta representación

4:31:15todos los colores tienen tres componentes rojo verde y azul y estos valores que les
vamos a asignar para determinar cuánto de cada color tiene el

4:31:30resultado cuánto de rojo cuánto de verde y cuánto de azul 00 para esta componente
representa la ausencia total de ese color y el mayor valor que le podemos asignar es f o sea
que sería efe efe efe efe y ff

4:31:45en total podemos crear 16 millones de códigos para representar colores usando los
códigos extra decimales vamos a ver cómo los podemos usar con el

4:32:00ejemplo de nuestra página de gatos digamos que queremos asignarle un color de fondo
a todos los dif para eso necesitamos la propiedad background color que ya la hemos usado
anteriormente pero ahora en lugar

4:32:15escribir una palabra como por ejemplo blue o blue butler puedes ver que aquí tenemos
también sus códigos hexadecimal es correspondientes por ejemplo el blog tiene de
componente

4:32:30roja 00 luego de componente verde 00 y de componente azul efe efe vamos a probar el
código que acabamos de ver para negro si volvemos a cargar la página ahora vemos que los
tips tienen un fondo de color negro este es el único tips que

4:32:45tenemos en la página también vamos a probar qué ocurre si le asignamos a los títulos
un color de texto específico por ejemplo es vea 234 que es como un

4:33:00naranja amarillento volvemos a cargar la página y aquí vemos ese color así podemos ir
asignando los colores personalizados a cada elemento de nuestra página también por ejemplo
podemos personalizar el color del borde

4:33:15de algún elemento como una imagen digamos que seleccionamos una imagen y
queremos que la imagen sea circular o redondeada va a tener un borde de ancho de 3

4:33:30píxeles el estilo va a ser sólido y el color efe 4 034 de esta forma y así podemos ver que
se le asignó un borde de ese color específico que tenemos aquí a la

4:33:45imagen a todas las imágenes también podemos asignarle un color específico a los
enlaces por ejemplo si le asignamos el color a 73 03 aquí tenemos un color como un morado

4:34:00claro que podemos ver aquí y aquí para todos los elementos de enlace y cómo
podemos conseguir estos códigos hexadecimal es como speaker lo puedes escribir en inglés
aquí lo puedes ver

4:34:15es muy muy útil no estás trabajando con desarrollo web aquí puedes escoger el tono
del color y luego puedes personalizar lo aún más arrastrando este circulito que ves por

4:34:30acá y aquí tienes el código hexadecimal de ese color simplemente lo puedes copiar y
pegar aquí claro siempre debe tener un solo numeral antes del código y volvemos a cargar la
página y aquí
4:34:45puedes ver que ese color se le asignó a ese elemento también hay una forma de
abreviar ciertos códigos hexadecimal es para que sean más concisos porque aquí puedes ver
que tienen seis dígitos pero podemos reducir ese número en algunos casos a

4:35:00tres dígitos nada más vas a ver cómo lo puedes hacer en la próxima parte también
podemos en ciertos casos para

4:35:15ciertos colores abreviar su código hexadecimal a sólo tres dígitos esto es recomendado
también es recomendado en la guía de estilo de google y si se puede usar se recomiendo
usarlo por ejemplo si

4:35:30nuestro código es este que tenemos aquí vamos a escribir un comentario tenemos 6
dígitos los cuales están repetidos de a pares cuando esto ocurre cuando los dígitos del mismo
par son

4:35:45iguales para cada uno de los pares simplemente podemos escribir uno por cada par de
esta forma otro ejemplo sería efe efe efe efe efe este color

4:36:00podría abreviar se de esta forma y tendríamos exactamente el mismo color otro

ejemplo 0 0 efe efe 0 0 puedes ver que los dígitos están repetidos en su par correspondiente
en su componente

4:36:15correspondiente en este caso 0 0 corresponde a rojo luego ff a verde y 0 0 azul en este

caso podemos escribir sólo 3 dígitos otro ejemplo efe efe 0 0 efe efe

4:36:30aquí eliminamos los dígitos repetidos y tenemos este resultado ahora veamos estos
colores en vivo y pensamos que en realidad son equivalentes a los originales algo que sí me
gustaría resaltar en este momento es que hasta

4:36:45ahora hemos estado usando los códigos hexadecimal es en minúscula no los hemos
escrito de esta forma también es válido escribirlos en mayúsculas efe efe efe efe efe y
probablemente también los

4:37:00consigues de esta forma cualquiera de estas opciones es válida que es lo importante

ser consistente en tu archivo css no mezclar mayúsculas con minúsculas si escogiste usar
minúsculas debes usar minúsculas y escogiste usar

4:37:15mayúsculas continúa usando mayúsculas o que genial vamos a comenzar viendo

nuestro primer ejemplo en vivo en nuestra página de gatos tenemos nuestro tips y vamos a
asignarle un color de

4:37:30fondo con un valor extra decimal 0 0 efe efe efe efe aquí lo tenemos es como un azul
clarito si volvemos a cargar la página vemos el color del dif y si quitamos uno de esos dígitos
repetidos

4:37:45de cada par lo dejamos con sólo tres dígitos volvemos a cargar la página y puedes ver
que se sigue viendo exactamente igual el color no hubo ningún cambio genial vamos a ver
ahora

4:38:00el titulo h2 vamos a asignarle el color efe efe 0000 que es como un color ladrillo hacia
rojo si volvemos a cargar la página vemos el color y podemos quitar uno de esos dígitos
repetidos y aquí seguimos viendo el mismo color
4:38:15exactamente lo que tenemos es un código más conciso y es recomendable usarlo a la
imagen podemos asignarle un borde específico de un color específico vamos a hacer que la
imagen sea

4:38:30redondeada con un ancho de 3 píxeles estilo sólido y color va a ser 0 0 efe efe 0 0 que
es como un verde volvemos a cargar la página y vemos el color verde aquí y

4:38:45luego vemos aquí con 3 dígitos nada más y el color se mantuvo exactamente igual
genial finalmente vamos a ver un enlace vamos a cambiar el color de texto a efe efe 0 0 efe efe
y podemos cargar otra vez la página vemos el color pero ahora

4:39:00podemos borrar uno de esos dígitos por cada par y seguimos viendo el mismo color es
equivalente genial no es una forma más concisa de escribir estos códigos en css sólo cuando
están

4:39:15repetidos en cada par o que sólo en este caso aplica a reducir el código a tres dígitos
bien también hay otra forma de representar un color en css usando rgb en lugar del formato
del código

4:39:30hexadecimal ambos son muy importantes y puedes usarlos en cfs ahora vamos a ver
otro formato que

4:39:45podemos usar para especificar un color en css hasta ahora hemos usado códigos extra
decimales para referirnos a un color específico pero esos colores

4:40:00también tienen otra representación llamada rgb r braun g green y be good

básicamente vamos a especificar lo mismo pero en lugar de usar dígitos vamos a usar tres
números el valor de cada uno

4:40:15de esos tres números va a estar entre 0 y 255 0 indica que no hay nada de ese color en
el resultado y 255 es el mayor nivel para el resultado por ejemplo este color que tenemos aquí
0 efe efe en

4:40:30hexadecimal tiene un valor equivalente en rgb podemos verlo aquí si vamos al color
pica en google aquí podemos colocar el código hexadecimal 0 efe efe

4:40:45y podemos ver su equivalente y rgb área de red creep lo ves que son 3 números 0 255 y
255 estos tres números representan este

4:41:00color al igual que estos dígitos representaban este color 0 representa el componente
rojo 255 y representa el componente verde y 255 representa el componente azul

4:41:15escribimos rgb y luego entre paréntesis indicamos los tres valores 0 255 y 255 en lugar
de incluir un numeral seguido de los dígitos para cada componente escribimos rgb y luego
dentro de los

4:41:30paréntesis escribimos el valor para cada componente rojo verde y azul aquí tenemos
otro ejemplo si vamos al color piquer y aquí copiamos y pegamos el código hexadecimal
tenemos su equivalente en

4:41:45rgb podemos copiar y pegar estos tres números por ejemplo y luego ir a nuestro
archivo css escribir rgb y pegar estos números recuerda que los números deben estar
4:42:00separados por una coma y un espacio y tenemos exactamente el mismo color si
volvemos a cargar la página puedes ver que los colores se mantienen intactos porque son
equivalentes veamos aquí también otro ejemplo el verde que

4:42:15tenemos en el borde de la imagen tenemos su código en hexadecimal y este es su

cover rgb escribimos rgb paréntesis y dentro de los paréntesis los tres valores y aquí tenemos
nuestro

4:42:30color resultante y finalmente para el enlace vamos aquí vamos aquí copiamos ex y
copiamos y pegamos rgb rgb y entre paréntesis los tres valores volvemos a cargar la página y
vemos que todo se mantiene igual pero ahora

4:42:45estamos especificando los colores el formato rgb en lugar de usar un código

hexadecimal también si quieres seleccionar un color de esta herramienta si colocas el cursor
sobre estos cuadraditos puedes acceder a

4:43:00una herramienta que es muy parecida al color piquer que estamos usando en google
aquí puedes escoger el tono del color y luego puedes personalizar lo aún más arrastrando el
circulito y también puedes escoger su transparencia eso le

4:43:15agrega un cuarto componente un cuarto elemento aquí dentro del paréntesis un valor
entre 0 y 1 cuando es 1 exactamente no se coloca 1 significa que el color está

4:43:30allí presente y a medida que nos acercamos a 0 el color se va volviendo más

transparente creo que lo podemos ver mejor con un tono rojizo aquí lo podemos ver puedes
ver este de grade es que tenemos aquí si nos

4:43:45acercamos al valor 1 puedes ver el resultado un color opaco que cubre la superficie
pero a medida que vamos disminuyendo el valor puedes ver 0 90 0 80 0 70 0 50 0 40 vamos
haciendo que el

4:44:00color sea más y más transparente entonces si por ejemplo escogemos 0 30

aproximadamente podemos escribir aquí 0 30 como el cuarto valor el color va a ser
transparente volvemos a cargar la

4:44:15página y puedes ver que ahora el color es más transparente y se puede ver más clarito
porque el fondo es blanco entonces si omitimos este valor el color sin transparencia en este
caso cuando

4:44:30tenemos transparencia rgb se convierte en rgb ah ok cuando especificamos un cuarto

valor como por ejemplo 0.4 significa alfa en inglés alfa es el cuarto componente que se usa
para

4:44:45especificar la transparencia del color que tan transparente es genial ya sabes cómo
trabajar con los colores rgb y hexadecimal es ellos son muy muy muy útiles y también puedes
usar esta herramienta simplemente sin añadirle

4:45:00transparencia para escoger cualquier color y puedes ver que es su código en rgb se va a
actualizar aquí lo puedes ver se va a actualizar al color que escogiste esta herramienta es muy
útil

4:45:15genial buen trabajo en la próxima parte vamos a hablar sobre las variables en css vas a
aprender por qué son muy importantes y cómo las puedes usar en cfs
4:45:30ahora quiero presentarte a un miembro muy especial del curso este es pingüinito tan
bonito que tenemos aquí lo creas o no este pingüino fue creado con html y css

4:45:45veamos los archivos porque vamos a usar este pingüinito como un ejemplo de cómo
podemos usar las variables en css y por qué son importantes aquí tenemos los archivos html y
css que crearon a

4:46:00nuestro pingüinito podemos verlos aquí lado a lado en el archivo html tenemos la
etiqueta raíz de etiqueta principal tenemos nuestro link nuestro elemento

4:46:15link a nuestra hoja de estilos style ss y también tenemos nuestro elemento por y dentro
de por y tenemos una secuencia de tips que van creando cada una de las

4:46:30partes del pingüino este es el dif principal que tiene la clase pingüino y luego tenemos
dos dips que representan la parte inferior y superior del pingüino para la parte inferior
tenemos 410 su mano derecha su mano izquierda el

4:46:45pie derecho y el pie izquierdo esto que tenemos aquí estas cuatro partes la parte
superior del pingüino está representada por esta secuencia de ventyx tenemos la mejilla
derecha

4:47:00la mejilla izquierda la barriga el ojo derecho el ojo izquierdo y cada uno de los ojos
tiene dentro un pequeño reflejo luego el color de la mejilla

4:47:15y el pico superior y el pico inferior que es la parte superior e inferior del pico genial no
estos elementos mejilla derecha y mejilla izquierda se refieren a estas partes de la cara que es
la parte derecha y la parte izquierda de la

4:47:30cara del pingüino podemos ver cada uno de ellos en el diseño final en el resultado final
con las herramientas de desarrolladores de chrome aquí tenemos el sporting tenemos el 10
principal del pingüino y luego tenemos el pingüino

4:47:45inferior y el pingüino superior aquí lo tenemos el pingüino inferior está compuesto por
la mano derecha la mano izquierda el pie derecho y el pie izquierdo el pingüino superior está
compuesto por la mejilla derecha que estamos diciendo

4:48:00mejilla pero en realidad sería como la parte derecha de la cara luego la mejilla
izquierda la parte izquierda de la cara luego su barriguita su abdomen el ojo derecho el ojo
izquierdo y cada ojo tiene un reflejo puedes ver el

4:48:15diseño increíble que podemos crear simplemente usando tiempo y aquí tenemos el
color de la mejilla derecha y el color de la mejilla izquierda y el pico superior el pico inferior ya
más o menos sabes cómo es la

4:48:30estructura de pingüino ahora para lograr que cada uno de estos tipos se vea de la
forma que se ve tenemos muchas reglas en css tenemos un archivo bastante extenso
comparado con nuestros ejemplos

4:48:45anteriores en css y que hace algunas propiedades sobre las cuales quizás te gustaría
expandir tus conocimientos en la documentación por ejemplo top left estas propiedades nos
ayudan a ubicar ese elemento o ese tipo donde lo
4:49:00queremos respecto a su borde y a su contenedor y estos archivos nos puedes descargar
en el repositorio de qinghai que puedes encontrar en la descripción del vídeo que así que
puedes verlos con calma y

4:49:15ver cómo se crea cada uno de los componentes en esta parte del curso me gustaría que
nos enfocaremos en las variables css esto es nuevo para nosotros estamos usando variables
css para definir el

4:49:30estilo del pingüino esta es una variable en css y esta también cuando le agregamos dos
guiones y lo puedes ver con más detalle dos guiones antes del nombre de la variable estamos
creando

4:49:45una variable donde veas dos guiones ahí tienes una variable en css y puedes ver que el
color del texto tampoco es del mismo color que tenemos para las propiedades del css sino que
se ven blancas en el tema de fito acá que es

4:50:00una variable una variable es básicamente un nombre que le asignamos a un valor para
poder usar ese nombre a lo largo de nuestro archivo donde necesitemos esa variable o ese
valor podemos usar simplemente el nombre de la variable y

4:50:15vamos a poder usar ese valor indirectamente por ejemplo si necesito usar este valor en
muchos lugares diferentes del archivo puedo simplemente definir una variable y usar ese
nombre de la variable y escribir el valor una

4:50:30sola vez cuál va a ser la ventaja de hacer esto que si yo necesito cambiar este valor solo
lo voy a cambiar en un lugar específico donde defino esa variable y donde aparezca esa
variable el valor se va a actualizar automáticamente

4:50:45al igual y lo mismo ocurre con esta variable la definimos una sola vez y ese valor se va a
poder reutilizar solo con el nombre de la variable veamos qué ocurre si yo cambio este

4:51:00valor a blanco way y el pico quiero que sea naranja hay dos componentes que
conforman el pico del pingüino así que yo puedo reutilizar ese valor en dos lugares

4:51:15distintos y solo tengo que hacer un solo cambio puedes ver aquí abajo que si bajamos a
las clases del pico pico superior y pico inferior los dos componentes del pico estamos

4:51:30usando aquí la variable pingüino pico y pingüino pico ya vas a ver cómo las podemos
usar formalmente y por qué especificamos este valor pero lo importante en este momento es
ver que estamos usando la variable para definir

4:51:45el fondo de ese elemento el color de fondo después de la actualización si volvemos a

cargar la página puedes ver que ahora el pingüinito cambio de color los componentes que usan
el mismo color que en la barriga del pingüino fueron

4:52:00actualizados la mejilla derecha y la mejilla izquierda y el pico también cambio de color

al igual que sus pies también podemos crear otra variable nueva esa variable va a definir el
color

4:52:15de la piel del pingüino esta piel negra que tenemos aquí la podemos cambiar por
ejemplo a gris en la próxima parte vamos a usar esta variable vamos a agregar esta variable a
las propiedades que van a hacer que
4:52:30cuando cambiemos este valor de negro a gris va a poder cambiar o actualizar ese valor
donde sea necesario para que todo el cuerpo del pingüino se muestre gris en lugar de negro
eso lo vamos a hacer en la próxima parte así que te espero allí

4:52:45vamos a iniciar con el valor negro para esta variable este color va a definir la piel del
pingüino y vamos a usar esta

4:53:00variable donde sea necesario para definir el color de la piel del pingüino así podemos
cambiarlo rapidito cuando tengamos todo implementado para usar el valor de esta variable
simplemente vamos

4:53:15a los componentes que necesitan esta variable esos componentes son aquí pingüinos
superior en lugar del valor blanco vamos a usar nuestra variable para que el valor que le
asignemos a esa variable sea el color de fondo de esa

4:53:30parte del pingüino para eso escribimos var y dentro de los paréntesis escribimos el
nombre de la variable incluyendo los dos iones que hacemos exactamente lo mismo aquí abajo
bar

4:53:45con el nombre de la variable pingüino inferior luego mano derecha también debería ser
del mismo color así que vamos a usar nuestra variable mano izquierda también debería ser del
mismo

4:54:00color pingüino piel las mejillas son del mismo color de la barriga así que no necesitamos
usar esa variable ya estamos usando otra variable los ojos si son negros y creo que ya con eso
cubrimos

4:54:15todos los componentes que necesitan ser del mismo color de la piel del pingüino así
que sólo para comprobar que todo está correcto cargar nuevamente la página no vemos
ninguna diferencia hasta ahora porque le asignamos el color negro

4:54:30pero veamos lo fácil que va a ser cambiar el color de la piel del pingüino vamos a
asignarle un color gris grave en inglés así con sólo cambiar el color en

4:54:45un solo lugar de tu archivo css puedes actualizar el valor en muchos lugares diferentes
del archivo cf ya vas a ver en donde específicamente solo vas a poder usar esta variable en los
elementos que son

4:55:00descendientes de donde fue definida o creada pingüino en este caso es el contenedor

principal así que vamos a poder usar estas variables en todos los elementos que descienden de
pingüinos

4:55:15todos los elementos que están contenidos dentro de el elemento con la clase pingüino
probemos nuevamente si queremos cambiar el color del pingüino a rosado por ejemplo
también lo podemos hacer o

4:55:30azul quien sabe cualquier color que te imagines se puede asignar al pingüino y
cambiarlos así de fácil las variables son muy importantes en css porque nos permiten escribir
archivos que son mucho más fáciles de mantener puedes ver lo

4:55:45fácil que fue hacer un cambio si no hubiéramos usado una variable tendríamos que
hacer este cambio en cada uno de los elementos que quisiéramos adaptar o actualizar y esto
nos tomaría mucho más pues sería mucho más difícil y además
4:56:00también tendría mucho más que cometiéramos errores pero qué pasa si hay un error
por ejemplo digamos que por error en lugar de escribir el nombre de la variable lo escribimos
mal

4:56:15introducimos un error de tipeo si volvemos a cargar la página aquí puedes ver que
ahora el pobre pingüinito no tiene cabeza no tiene parte superior existe una forma de
especificar un respaldo un valor de respaldo para esa

4:56:30variable por si acaso la variable no está disponible o si no se puede leer o encontrar al

momento de presentar el resultado eso lo vamos a ver en la próxima parte por ahora vamos a
devolverle su cabecita al pingüino antes

4:56:45de continuar ok te veo allí para asignar un valor de respaldo veamos cómo puedes
asignarle un valor de

4:57:00respaldo a tus variables en css en la parte anterior vimos lo que ocurriría si en lugar de
escribir el nombre de la variable escribimos ese nombre pero con un error de tipeo por
ejemplo en este caso

4:57:15olvidamos la voz y el pobre pingüino quedó sin cabeza entonces para prevenir este tipo
de error podemos asignar un valor de respaldo para que en caso de que esa variable no se
consiga o no esté correcta el valor de respaldo se va a

4:57:30usar para eso solamente tenemos que escribir una coma un espacio después de la
coma y el valor de respaldo en este caso como la variable representa un color escribimos el
color que esa

4:57:45variable representa o el valor de respaldo que queremos asignarle en este caso vamos
a asignarle el valor negro y si volvemos a cargar la página puedes ver que ahora el pingüino
tiene una cabecita negra pero en este caso debería ser

4:58:00ahora vamos a cambiar el color de la variable a negro y puedes ver que ahora sí todo se
actualizó si volvemos a escribir bien las variables se va a usar el valor de

4:58:15la variable cuando la variable se pueda usar o reconocer adecuadamente también

deberíamos agregar este valor de respaldo en todos los otros lugares donde usamos nuestra
variable

4:58:30pingüino piel pingüino piel y aquí ya teníamos valores de respaldo para las otras
variables puedes ver que teníamos color blanco para pingüino barriga y color naranja para
pingüino pico

4:58:45en caso de que esas variables no se detecten o no sean reconocidas por el navegador o
por el browser entonces se usa el valor de respaldo ahora para practicar aún más cómo puedes
usar las variables en css vamos a crear

4:59:00otra variable pingüino mejillas y vamos a asignarle el color rosado porque si ves aquí
abajo nuestro

4:59:15archivo un poco más arriba la clase color mejilla derecha y color mejilla izquierda estos
circulitos que tenemos aquí usan el color de fondo rosado pero digamos que queremos
reemplazar este color fijo
4:59:30con una variable para poder actualizarlo fácilmente definimos esta variable pingüino
mejillas podemos copiar y pegar ese nombre para no tener errores de tipeo posibles

4:59:45luego vamos a la clase específica y en la propiedad reemplazamos el valor por bar

dentro de los paréntesis escribimos el nombre de la variable y luego le asignábamos el valor de
respaldo y aquí hacemos lo mismo el nombre de la

5:00:00variable y el valor de respaldo genial ahora si volvemos a cargar la página todo está
igual pero si cambiamos actualizamos el valor de la variable digamos a verde ahora el
pingüinito va a

5:00:15tener mejillas verdes vemos el cambio inmediatamente y se aplica a ambas mejillas

porque estamos usando la variable css genial no si la

5:00:30variable no es detectada porque digamos que tenemos un error de tipeo o por alguna
razón no se detectó se va a usar el color de respaldo en este caso era rosado pero también lo
podemos cambiar

5:00:45genial no vamos a volver a asignar mejillas rosadas buen trabajo ya sabes cómo
trabajar con variables en css recuerda simplemente las defines aquí en alguna clase y todos los
descendientes

5:01:00de ese contenedor van a poder tener acceso a esa variable escribimos dos guiones y
luego el nombre de la variable dos puntos espacio y su valor y como siempre terminamos en
punto y coma luego

5:01:15para usarlas escribimos var y entre paréntesis el nombre de la variable si lo deseamos

una coma un espacio y un valor de respaldo las variables son muy útiles en css pero
lamentablemente no

5:01:30todos los navegadores o browsers reconocen las variables así que tenemos que recurrir
a ciertas medidas de prevención en nuestro archivo css para estos casos si el usuario está
ingresando desde un navegador que no

5:01:45reconoce las variables css en la próxima parte vamos a ver cómo se ve nuestro
pingüino en internet explorer es un navegador que no reconoce las variables css y luego vamos
a solucionar ese

5:02:00problema con respaldos otro tipo de respaldos que podemos usar así que te veo allí es
muy importante también pensar en la compatibilidad de tu página web con distintos browser

5:02:15veamos cómo se ve nuestro pingüino en un navegador que no reconoce en las

variables css veamos el resultado si voy a mi carpeta donde tengo el archivo

5:02:30index html y abro ese archivo con internet explorer aquí puedes ver el resultado el
pobre pingüinito sólo tiene ojos porque son los únicos componentes en nuestro archivo css
que no usa una variable como

5:02:45podemos solucionar esto porque si ésta es nuestra página web y esto ocurre vamos a
limitar a nuestros usuarios que están usando internet explorer no van a poder usar nuestra
página en este navegador y siempre como desarrolladores
5:03:00web es importante pensar en la compatibilidad de nuestra página con distintos
navegadores o browsers cómo podemos solucionar esto lo que podemos hacer es especificar
el

5:03:15valor negro el valor que usamos como respaldo antes de usar la variable de esta forma
si queremos que el fondo el color de fondo sea negro como un respaldo en

5:03:30lugar de colocarlo aquí como un respaldo dentro de board lo vamos a escribir arriba así
si el navegador a interpreta esto correctamente pero luego no puede

5:03:45interpretar esta propiedad porque la variable no se reconoce simplemente este valor

es el que se va a asignar el último que fue reconocido o interpretado así es como funciona css
si defines dos veces una propiedad con distintos

5:04:00valores el último valor que se asignó es el definitivo el que se va a mostrar en este caso
si usamos internet explorer este valor se va a asignar porque se va a reconocer pero cuando
lleguemos a esta línea la variable no se va a reconocer

5:04:15se omiten no se modifica el valor que se había asignado anteriormente en este caso
también podemos omitir aquí el valor de respaldo si la variable no se detecta este valor se va a
asignar

5:04:30podemos hacer lo mismo que en todas las reglas que usan la variable por ahora

5:04:45vamos a concentrarnos en la variable pingüino piel para ver cómo aparece la piel en
internet explorer cuando hacemos estos cambios ya hicimos los cambios y ahora vamos a abrir
nuestro pingüinito ahora si vemos a nuestro pingüinito solo

5:05:00que hasta el momento sólo podemos ver su cuerpo con el color de piel negro y sus
ojitos que están aquí escondidos y camuflados entre el negro vamos a hacer lo mismo con las
otras reglas para que

5:05:15veamos nuevamente a nuestro pingüinito aquí abajo tenemos la variable pingüino

barriga y queremos asignarle el valor de respaldo blanco para eso le asignamos aquí el valor
blanco antes de referirnos

5:05:30a la variable si la variable se detecta si estamos usando por ejemplo cron google
chrome que si detecta las variables css entonces este valor ya no se va a asignar sino que se va
a asignar el valor de la variable

5:05:45ahora vamos a seguir agregando este color aquí abajo aquí en la regla tenemos aquí y
de una vez vamos a hacer lo mismo con las partes de color anaranjado aquí aquí y

5:06:00en este caso no estamos usando variables para los ojos ni para los reflejos de los ojos si
estamos usando para las mejillas así que le asignamos el valor pink rosado aquí aquí

5:06:15borramos los valores de respaldo y para el pico superior e inferior también estamos
usando variables así que vamos a agregar el respaldo y listo ya

5:06:30llegamos al final del archivo vamos a guardarlo si lo volvemos a cargar en google

chrome oops una de las mejillas desapareció aquí porque tenemos un error

5:06:45de tipeo aquí ya tenemos nuevamente nuestra mejilla puedes ver a nuestro pingüinito
aquí ahora sí podemos ver el resultado final porque estamos dando la internet explorer una
alternativa a las variables css porque no las reconoce y
5:07:00en google chrome también el resultado se mantuvo exactamente igual genial también
probemos qué ocurre si estamos en un navegador en un browser que si detecta o

5:07:15interpreta las variables css pero digamos que usamos esta técnica y la variable tiene un
error de tipeo que va a ocurrir si volvemos a cargar la página podemos ver que ahora la
cabecita del

5:07:30pingüino desapareció porque anteriormente dijimos que en ese caso podríamos omitir
el valor de respaldo pero esto es lo que podría ocurrir si lo hacemos porque inicialmente uno
puede pensar eso que se puede omitir el valor

5:07:45de respaldo pero si lo hacemos si el browser interpreta las variables css corremos el
riesgo de que pase exactamente esto porque se va a asignar este valor y luego se va a
interpretar

5:08:00esa variable y si no se detecta la variable porque hay un error de tipeo vamos a tener
este tipo de error en internet explorer esto no ocurriría porque ni siquiera interpreta las
variables pero en google chrome si las

5:08:15interpreta y no muestra ese elemento así que si agregamos el valor de respaldo ahora
sí podemos ver el resultado como lo queremos así que es recomendable incluir ese valor de
respaldo aquí también embargo vamos a

5:08:30agregar solo a cada uno de estos elementos la acc va a estar a white

5:08:45estar a white white orange naranja ahora en naranja aquí agregamos pink aquí
agregamos pink también orange orange y llegamos al final ya tenemos

5:09:00nuestros valores de respaldo y también tenemos un respaldo en caso de que el

navegador nos detecte o no interprete las variables css genial buen trabajo ya

5:09:15sabes cómo trabajar con variables en css también es importante que comprendas cómo
se heredan las variables css porque no necesariamente vas a poder utilizar todas las variables
en todas las clases

5:09:30o todos los selectores de tu archivo css hay una jerarquía una herencia que va a ocurrir
cuando defines una variable en css vas a aprender más sobre esta herencia en la próxima parte
del curso

5:09:45vamos a volver a ver nuestro querido pingüinito para ilustrar cómo funciona la herencia
de variables en css

5:10:00si vamos a nuestro archivo css ahora puedes ver que estamos usando una variable la
variable pingüino barriga para definir el fondo el color del fondo

5:10:15del elemento boring el elemento principal de la página así tenemos todo el fondo de la
página de un color específico pero qué ocurre nosotros estamos definiendo la variable
pingüino barriga

5:10:30dentro de la clase pingüino eso significa que sólo este elemento que tiene la clase
pingüino va a tener acceso a esa variable ese elemento y todos sus descendientes

5:10:45pero boris no es un descendiente de este tipo más bien dif es un descendiente de

bonnie porque boris es el elemento principal es el elemento que los contiene a todos entonces
cuando usamos
5:11:00la variable aquí vemos que el resultado es que se usa el color de respaldo que
asignamos el azul claro que tenemos aquí porque la variable no se reconoce podemos lograr
que esa variable se reconozca en vor y podemos simplemente

5:11:15agregar la pseudo clase route y en lugar de definir esta variable aquí dentro de la clase
pingüino podemos definirla en bruto de esta forma la variable va a ser

5:11:30global porque el root va a referirse o va a seleccionar el elemento html el elemento raíz

de la página así que todos sus descendientes todos los elementos de bori van a poder tener
acceso a esa

5:11:45variable todos los estilos que usemos van a poder tener acceso a esta variable todas las
reglas que definamos entonces ahora si volvemos a cargar la página vor y ya debería tener
acceso a

5:12:00esa variable y el fondo debería ser rosado veamos y vuela aquí tenemos nuestro fondo
rosado la variable pingüino barriga ahora es global y la podemos usar en nuestro elemento o
parís

5:12:15en la próxima parte vamos a ver cómo puedes cambiar el valor de esta variable solo
para un área específica o para un elemento específico de tu página web y sus descendientes
porque no

5:12:30necesariamente queremos que el valor de esta variable se ha rozado en todo el

documento puede ser que necesitemos usar esa variable en otro elemento y que tenga otro
color podemos hacerlo en css muy fácilmente eso es lo que vas a aprender en la próxima parte

5:12:45vamos a ver cómo puedes cambiar el valor de una variable solamente para un área

5:13:00específica de tu estructura de tu página volvemos con nuestro pingüinito tenemos el

mismo archivo html y ahora en css tenemos las variables en la pseudo clase brut definimos
pingüino

5:13:15piel pingüino barriga pingüino pico y pingüino mejillas estamos también usando esa
variable pingüino barriga para seleccionar el color de fondo de la página para el elemento
bonnie pero como

5:13:30esta variable pingüino barriga es global se está usando el valor rosado para todos los
elementos que usan esta variable pingüino barriga eso incluye aquí a la barriguita del pingüino
y las mejillas que tenemos aquí las partes de

5:13:45la cara izquierda y derecha si nosotros queremos cambiar ese valor de esa variable por
ejemplo blanco para que estas partes solamente se muestran en blanco podemos volver a
definir esa

5:14:00variable aquí por ejemplo en pingüino que era el elemento principal del cuerpo del
pingüino si lo definimos aquí vamos a poder usar esa variable y su valor nuevo actualizado en
todos estos

5:14:15elementos llamados sus descendientes en todos los descendientes de ese tipo principal
del pingüino veamos el efecto volvemos a definir la variable pingüino barriga y ahora le
5:14:30asignamos el valor weight blanco si volvemos a cargar la página ahora puedes ver qué
lindo nuestro pingüinito que tiene su barriga blanca y sus mejillas también blancas esto
simplemente está reemplazando el valor global el valor

5:14:45que tenía esa variable hasta que llega a este elemento con esta clase y luego los
elementos descendientes de pingüino que tenemos aquí del elemento que tenía la clase
pingüino también heredan ese nuevo

5:15:00valor simplemente hay que definir la variable nuevamente ok y la herencia de ese valor
como se va a heredar está determinada por la estructura en html

5:15:15felicitaciones completaste el curso y ya sabes los fundamentos de html y css buen

trabajo espero que te haya gustado el curso te invito a suscribirte a nuestro canal ya seguir
aprendiendo con los cursos que tenemos publicados en nuestro canal te veo en próximos
cursos