YT YouTube2Text

YouTube2Text → Transcripts → Aprende HTML y CSS - Curso Desde Cero

Aprende HTML y CSS - Curso Desde Cero — Transcript

by freeCodeCamp Español · 43,175 words · 6,731 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00hola si quieres aprender desarrollo web
0:02este curso es para ti aprenderás los
0:05fundamentos de html y css paso a paso
0:09comenzaremos con html para crear la
0:12estructura de la página y luego
0:14aprenderás css para describir su
0:17presentación puedes encontrar el código
0:20del curso en el enlace en la descripción
0:23del curso allí podrás acceder a un
0:26repositorio en hiphop donde puedes
0:27descargar los archivos y seguir el curso
0:30paso a paso bien así que comencemos
0:39comencemos el curso viendo los tres
0:41pilares principales html css y
0:45javascript cuál es su función en el
0:47resultado final de la página web vamos a
0:49ver comencemos con html html significa
0:54en inglés
0:55hyper text markup language lenguaje de
0:58marcado de hipertexto es un lenguaje que
1:02nos permite definir la estructura de la
1:04página web cómo se va a estructurar el
1:08contenido en la presentación que va a
1:10ver el usuario puedes pensar o imaginar
1:13html como la estructura de una
1:16construcción que consiste en columnas o
1:19en vigas o en barras en madera que más o
1:21menos definen la estructura del
1:24resultado final más no su presentación
1:26usamos html para definir la estructura
1:29de la página web no cómo se van a
1:31presentar los elementos sino el
1:33contenido como tal
1:35escribimos html en un archivo de tipo
1:38html y para eso usamos la extensión
1:42punto html vamos a crear este archivo en
1:47la primera parte del curso cuando
1:48trabajemos con los elementos html y
1:52luego que tengamos toda esa estructura
1:53vamos a comenzar a ver css en inglés
1:57significa cascading stylesheets hojas de
2:00estilo que se van aplicando en cascada
2:03css lo usamos para definir la
2:07presentación de la estructura que
2:09definimos en html básicamente le vamos a
2:12decir al browser o el navegador como
2:15queremos presentar cada uno de los
2:16elementos que incluimos en nuestro
2:19archivo html
2:20una analogía de la vida real sería la
2:23presentación final de todos los acabados
2:26de una casa
2:27html sería las vigas la estructura los
2:30ladrillos pero css sería todo lo que le
2:33agregamos por encima esta estructura
2:35para que se vea presentable como
2:38queremos que lo vea el usuario final
2:39vamos a escribir el código css en un
2:43archivo de tipo cs efe ese archivo va a
2:46tener una extensión punto css y
2:50finalmente nuestro tercer pilar es ya
2:53basket este es un lenguaje de
2:54programación que nos permite añadir
2:57funcionalidad a nuestra página web hacer
2:59que la página web sea interactiva y que
3:02pueda interactuar con el usuario y toda
3:04la funcionalidad que conocemos en las
3:06páginas web de hoy en día que permiten
3:08que sean herramientas muy poderosas
3:10escribimos el código de javascript en un
3:12archivo de tipo llamas qué punto j ese
3:16es su extensión
3:18estos tres componentes normalmente se
3:20almacenan o se escriben en archivos
3:22separados cada uno con su tipo de
3:25archivo específico html css y javascript
3:29los tres archivos luego se conectan se
3:32combinan y forman las páginas web que
3:35conocemos hoy en día
3:36durante el curso vas a aprender a
3:38trabajar con html y css vamos a ver lo
3:42básico la parte introductoria de cada
3:44uno de estos lenguajes u herramientas
3:47que usamos para el desarrollo web
3:50vamos a ver javascript en un próximo
3:52curso javascript aplicado al desarrollo
3:54web pero si tenemos un curso en el canal
3:56de javascript si quieres aprender los
3:58fundamentos de este lenguaje de
4:00programación
4:00bien así que comencemos a ver html y
4:04luego veamos css para crear una página
4:07web
4:12veamos algo que seguramente te va a
4:14resultar muy interesante y puede ser una
4:17motivación extra para seguir
4:19experimentando mientras aprendes
4:20desarrollo web
4:24se estás usando google chrome como tu
4:26navegador puedes hacer clic derecho en
4:29cualquier página web que estés y hacer
4:32clic aquí el inspector
4:34eso va a abrir un panel que te va a
4:38mostrar exactamente lo que vas a
4:40aprender durante el curso html tenemos
4:43este panel con toda la estructura de la
4:46página web el código html y en esta
4:50parte cita tenemos css tenemos todo lo
4:53que controla cómo se muestran esos
4:56elementos en la página y aquí tenemos su
4:58estructura que es el html puedes ver que
5:02tenemos una estructura de alguna forma
5:05con elementos anidados tenemos elementos
5:07dentro de otros elementos puedes ver eso
5:11con estas flechitas abrimos una flechita
5:12y dentro conseguimos más elementos esto
5:15es lo que vamos a ver durante la primera
5:18parte del curso cómo puedes usar esto
5:21que llamamos elementos y etiquetas para
5:23crear o definir la estructura de tu
5:25página
5:28como ejemplo veamos la estructura del
5:31archivo del código html de la página de
5:34frijol campeón español si hacemos clic
5:36derecho y luego hacemos clic en expert
5:41se abre un pan y que tenemos aquí ese
5:44pan él nos muestra la estructura html de
5:47esta página que tenemos aquí al colocar
5:50el cursor sobre cualquiera de estos
5:52elementos podemos ver a qué elementos se
5:55refiere en la página y puedes ver aquí
5:57que tenemos como una estructura de
5:59elementos dentro de elementos así es
6:02básicamente cómo funciona html vamos a
6:04tener muchos elementos que conforman
6:07nuestra página web que van a estar uno
6:09dentro del otro por ejemplo esta parte
6:11vemos que corresponde a estos elementos
6:14que tenemos aquí a partir de este que
6:16estoy señalando y dentro de él vamos
6:19encontrando nuevos elementos uno dentro
6:23del otro así que comencemos vamos a
6:25empezar a ver cómo puedes escoger tu
6:27editor de código para que comienzan a
6:29escribir tu archivo html
6:36para comenzar nuestra misión de crear
6:38una página web y ver los principales
6:40componentes que puedes usar en html
6:43necesitamos la herramienta adecuada un
6:45ejemplo es visual studio cow este es el
6:49editor de código que vamos a usar
6:51durante el curso se puede descargar para
6:54windows o para otras plataformas
6:56dependiendo de tu sistema operativo es
6:59gratis y fue creado por microsoft
7:02otra alternativa buenísima también es
7:03atom que es gratis se puede descargar de
7:06forma gratuita y está disponible para
7:08windows 7 o versiones más recientes
7:11puedes acceder a brillo eléctrico en
7:14code punto visual studio puntocom
7:17para descargarlos simplemente haces clic
7:19aquí en down down eso te va a llevar a
7:22la página donde te presentan las
7:23distintas plataformas
7:25haces clic en el botón dependiendo de tu
7:28sistema operativo en mi caso es windows
7:31haces clic aquí y vas a ver que se
7:34inicia la descarga y es gracias puedes
7:35cargar bien es que hoy para windows si
7:38la descarga no inició todavía puedes
7:40hacer clic aquí para un link de descarga
7:42directo y aquí podemos ver cómo comienza
7:45la descarga una vez que la descarga ya
7:47esté lista puedes instalarlo haciendo
7:50doble clic en el archivo y el proceso es
7:52bastante intuitivo así que una vez que
7:54ya culmina el proceso de instalación
7:56puedes ver una pantalla muy similar a
7:59ésta esta es la pantalla de bienvenida
8:02de bello estudio que aquí tenemos
8:04algunas opciones para iniciar para
8:07empezar a trabajar con nuestro editor de
8:09código y aquí en esta sección vas a ver
8:12archivos recientes si recién están
8:15instalando esta sección va a estar vacía
8:16aquí tenemos una opción para crear un
8:20archivo nuevo para abrir un archivo ya
8:22existente para abrir una carpeta o para
8:25ejecutar un comando en este caso vamos a
8:27abrir una carpeta vamos a abrir una
8:30carpeta que ya yo creé en mis documentos
8:32que se llama curso de html y css
8:36hacemos clic en opel folder
8:39y podemos llegar a la carpeta que
8:42queremos abrir o copiar la dirección
8:43aquí arriba hacemos clic en enter y
8:47luego cuando vemos el nombre de la
8:49carpeta que queremos abrir aquí hacemos
8:51clic en select folder
8:54vemos que tarda unos segundos en abrir y
8:58vemos que aquí en la pantalla cambio
8:59ahora tenemos una parte un panel aquí
9:02que se llama explorer explorador en
9:05español y vemos el nombre de la carpeta
9:07curso de html y css en el panel con unas
9:11opciones aquí también vemos el nombre de
9:13la carpeta que tenemos abierta otra
9:16opción para realizar este mismo proceso
9:18para abrir una carpeta es hacer clic en
9:20file luego open folder o usando estos
9:23atajos del teclado y siguiendo luego el
9:26mismo proceso llegamos a la carpeta y
9:28luego seleccionamos esa carpeta genial
9:31ya tenemos nuestra carpeta abierta
9:35para abrir o cerrar el explorador que
9:37nos muestra el contenido de la carpeta y
9:40aquí podemos ver algunas opciones
9:42podemos ensanchar el panel para ver
9:45estas opciones junto con el título de la
9:46carpeta crear un archivo crear una
9:48carpeta también podemos volver a cargar
9:51el explorador para que actualice el
9:53contenido de la carpeta y también
9:55colapsar o cerrar las carpetas las
9:58subcarpetas que tenemos en esta carpeta
9:59en este momento la carpeta está vacía
10:02así que vamos a comenzar a crear nuestro
10:05primer archivo el archivo html
10:08un dato curioso es que si te gusta este
10:12tema de colores que vamos a usar durante
10:13el curso puedes descargarlo en las
10:16extensiones es el tema oscuro de frica
10:19org and bass aquí a extensiones luego
10:22aquí en la búsqueda de extensiones
10:24escribes recall camps dark en el tema
10:28oscuro de frica urca
10:30y aquí lo puedes ver puedes ver el logo
10:32de frigo que haces clic aquí y como yo
10:35ya lo tengo instalado me a estas
10:36opciones pero aquí vas a ver una opción
10:38que dice instalar install aunque genial
10:42vamos a nuestra siguiente parte del
10:44curso a comenzar a crear nuestro archivo
10:47index.hu tml debe oye
10:55el primer paso para crear cualquier
10:57página web es crear un archivo html
11:01así que vamos a hacerlo aquí y paso a
11:03paso hay dos formas de crear un archivo
11:07vamos a usar aquí la más directa digamos
11:11junto al nombre de la carpeta donde
11:13queremos crear el archivo la cual
11:15tenemos abierta en vídeo el estudio que
11:18vamos a hacer clic aquí en new file
11:20archivo nuevo vemos un campo aquí que
11:25nos permite escribir el nombre del
11:27archivo es una estándar nombrar el
11:30archivo principal de tu página web
11:33index.html o que hacemos clic en enter y
11:38allí vemos nuestro archivo se creó el
11:40archivo en nuestra carpeta si vamos a la
11:43carpeta podemos confirmar que tenemos el
11:45archivo aquí index.hr ml y puedes ver
11:49que tiene el símbolo de google chrome
11:51porque por defecto yo tengo configurado
11:54que los archivos html se van a abrir con
11:57google chrome
11:59otra forma de crear el archivo html es
12:02ir a fallo y luego hacer clic en new
12:05file o también usar el atajo de teclado
12:08control márgenes eso va a crear un
12:11archivo nuevo aquí que va a decir aun
12:13tyrone es decir que no tiene un título
12:16específico asignado todavía y luego
12:18puedes guardarlo file save o 6 bass y
12:23simplemente le asignas el nombre aquí
12:25sería index.hr ml le darías click en
12:29save si lo estás creando de esta forma
12:31ok pero como ya lo creamos con la forma
12:34más directa ya tenemos nuestro archivo
12:36genial puedes cambiar el tamaño de este
12:40panel hacerlo más angosto con estas
12:42flechitas si ponemos el cursor en la
12:44línea de división para abrir el archivo
12:47semos doble clic que en este caso está
12:49abierto pero si queremos cerrarlo
12:52hacemos clic en la x y para abrirlo
12:54nuevamente doble clic sobre el archivo
12:57y ya tenemos nuestro archivo ahora vamos
12:59a escribir la primera línea en nuestro
13:02archivo html
13:03cuál va a ser esa línea va a ser una
13:06declaración que nos va a permitir
13:07decirle al browser que es versión de
13:10html vamos a usar en nuestro archivo es
13:13muy importante y debería estar en todos
13:15los archivos html que cree eso que
13:18debería ser la primera la primera línea
13:20que tengas allí vamos a incrementar su
13:23tamaño y aquí podemos ver su estructura
13:25comenzamos con un paréntesis angular de
13:28apertura luego un signo de exclamación
13:31luego doc type en mayúscula un espacio
13:35luego html en minúscula y un paréntesis
13:39angular de cierre esa es la línea que le
13:42dice al browser qué versión de html
13:44vamos a usar en el archivo veamos como
13:48describe en esta declaración en la
13:50documentación de la red de
13:51desarrolladores de mozilla
13:53aquí lo tenemos la documentación web de
13:56la red de desarrolladores de mozilla es
13:58muy muy útil para conseguir información
14:00sobre todos los elementos de html de cfs
14:04también cubren javascript es básicamente
14:07una documentación que te permite
14:09aprender más sobre cada uno de los
14:10elementos vamos a hablar más sobre la
14:12documentación en una próxima sección
14:14pero por ahora vamos a concentrarnos en
14:16este artículo que nos explica el
14:18propósito de dos type dock type informa
14:22al navegador qué versión de html se usó
14:26para escribir el documento es una
14:29declaración no una etiqueta no es una
14:32etiqueta como las que vamos a usar
14:34normalmente en html com paréntesis
14:37angulares sino que es una declaración
14:39además podemos referirnos a ella como
14:43document site declárase jones
14:45declaración de tipo de documento o por
14:48las siglas de ted es muy útil que la
14:51documentación también se puede leer en
14:53español como tenemos este artículo
14:55simplemente hace clic en este menú y
14:57puedes seleccionar tu idioma si haces
14:59clic en change line which que significa
15:01cambiar idioma
15:04genial ya tenemos nuestra primera línea
15:07del archivo html
15:08así que vamos a ver en la próxima parte
15:12tres etiquetas que son esenciales para
15:15cualquier archivo html para empezar a
15:17crear la estructura de nuestra página
15:19web tv oye
15:25comencemos viendo una definición de
15:28elemento porque los elementos en html
15:31van a ser esenciales vamos a usar esos
15:34elementos que podemos crear para definir
15:37la estructura de nuestra página web
15:38veamos una definición un elemento es un
15:42componente básico de un archivo html
15:46puedes pensar en los elementos en html
15:49como ladrillos usamos los elementos para
15:53definir la estructura de una página web
15:55en un archivo html el archivo donde
15:59vamos a escribir nuestro código los
16:01elementos van a ser los componentes
16:03básicos de ese código y esos elementos
16:06se van a combinar para crear la
16:08estructura de la página web en inglés el
16:11elemento se denomina element que es por
16:15si en algún momento necesitas referirte
16:18un elemento en inglés o cuando lo leas
16:21en la documentación los elementos y las
16:24etiquetas están estrechamente
16:25relacionadas por qué porque las
16:27etiquetas no os permiten definir los
16:31elementos que usamos en un archivo html
16:35básicamente las etiquetas son la forma
16:37de escribir esos elementos en un archivo
16:40nosotros escribimos las etiquetas en
16:43nuestro archivo html y estas etiquetas
16:45crean los elementos de la página web que
16:49especifican las etiquetas especifican el
16:51tipo de elemento que se va a crear en
16:54esas partes específicas de la página web
16:56en inglés nos referimos a una etiqueta
16:59como tag o que está en inglés por si en
17:03algún momento necesitas referirte a las
17:05tags o las etiquetas en la documentación
17:07en inglés aquí tenemos algunos ejemplos
17:10de etiquetas en html vamos a verlas en
17:14acción ahorita en nuestro editor de
17:16código pero ahora vamos a enfocarnos en
17:19su estructura cuando veas estos
17:22paréntesis angulares
17:24debes pensar que eso representa una
17:27etiqueta en html y lo que está dentro de
17:30la etiqueta representa el tipo de
17:33elemento que se está creando
17:36esta es la estructura de la etiqueta un
17:39paréntesis angular que abre en la
17:40etiqueta dentro de los paréntesis
17:43angulares el tipo de elemento y en luego
17:47el paréntesis angular que cierran la
17:50etiqueta
17:52la mayoría de los elementos en html
17:55requieren dos etiquetas una etiqueta que
17:58se llama etiqueta de apertura como la
18:01ves aquí por ejemplo
18:02html y una etiqueta de cierre
18:06que tenemos aquí estas etiquetas son
18:09esenciales porque van a
18:11permitirle al browser saber dónde
18:14comienza un elemento y dónde termina
18:16recuerda que vamos a anidar elementos y
18:18vamos a tener elementos ubicados en una
18:20secuencia también así que es esencial
18:23que el browser sepa dónde comienza un
18:25elemento con su etiqueta de apertura y
18:27dónde termina con su etiqueta de cierre
18:30por ejemplo en este caso la etiqueta
18:32dice html y eso debe aparecer
18:35exactamente igual en la etiqueta de
18:38cierre para que el productor detecte que
18:40el elemento se cerró cuál es la
18:42diferencia entre la etiqueta de apertura
18:44y la etiqueta de cierre bueno esto que
18:47tenemos aquí esta parra determina que
18:50esa etiqueta representa una etiqueta de
18:53cierre es muy importante incluir esta
18:55barra que tenemos aquí es la única
18:58diferencia entre ambas etiquetas aquí
19:00podemos ver un ejemplo de un elemento y
19:03de por qué también es necesario usar una
19:05etiqueta de apertura y de cierre
19:07vemos las dos etiquetas el tipo de
19:10elementos h1 vamos a ver más sobre este
19:13tipo de elementos en tan solo unos
19:15minutos pero básicamente lo que nos
19:17permiten es crear un encabezado un
19:19título en la página tenemos la etiqueta
19:22de apertura la etiqueta de cierre y
19:24dentro de estas etiquetas vemos el
19:27contenido de ese elemento por eso
19:30necesitábamos una etiqueta de apertura y
19:32una etiqueta de cierre porque nos van a
19:34permitir
19:35delimitar o encerrar un contenido el
19:39contenido de ese elemento algunos
19:41elementos en html no necesitan etiquetas
19:45de cierre la mayoría sí pero hay ciertos
19:48elementos que no necesitan etiquetas de
19:50cierre en inglés nos referimos a esas
19:53etiquetas como south cloud sintax son
19:56etiquetas que digamos que se cierran
19:58solas o no requieren de una etiqueta de
20:01cierre con la etiqueta de apertura
20:03insuficiente
20:04aquí tenemos un ejemplo ésta es una
20:07etiqueta que nos va a permitir colocar
20:10una imagen en nuestra página web como
20:13puedes ver esta etiqueta es de apertura
20:15porque no tiene una barra al inicio pero
20:17no necesitamos una etiqueta de cierre
20:20solo con esta etiqueta vamos a poder
20:22especificar todo lo que necesitamos para
20:25que se presente esa imagen en la página
20:27web no necesitamos incluir nada más
20:30simplemente es opcional agregar esta
20:33barra al final de la etiqueta cuando se
20:36cierra sola cuando no tiene una etiqueta
20:38de cierre durante el curso no la vamos a
20:41incluir porque es opcional
20:43vamos a ver estas etiquetas y elementos
20:45en acción en nuestro editor de código
20:48volvemos a nuestro editor de código
20:50visual estudio cavern por ahora vamos a
20:53cerrar el explorador así podemos
20:55concentrarnos en el contenido del
20:57archivo luego de la declaración del
21:00doctor el tipo de documento
21:02el primer elemento que vamos a incluir
21:06va a ser el elemento html que también se
21:10denomina el elemento raíz de un archivo
21:14html
21:15todos los demás elementos que van a
21:17conformar la estructura de nuestra
21:19página deben estar contenidos dentro de
21:22este elemento principal por eso lo
21:25llamamos el elemento raíz
21:28aquí tenemos su etiqueta de apertura y
21:30también tenemos su etiqueta de cierre
21:32dentro de ambas etiquetas vamos a
21:35empezar a crear la estructura de la
21:37página
21:38dentro de html dentro de este elemento
21:41vamos a tener otros dos elementos
21:43principales
21:44el primero va a ser head y el segundo va
21:48a hacer por y ellos literalmente
21:51significan en inglés ged cabeza ivory
21:55cuerpo podríamos realizar esa analogía
21:58en cuanto a la página web
22:01todos los elementos que van a estar
22:03dentro del elemento head son elementos
22:06que en realidad actúan detrás de escena
22:08son elementos importantes para la página
22:10pero no van a formar la estructura
22:12principal de la página por ejemplo aquí
22:15dentro de ejes vamos a incluir cualquier
22:18archivo externo enlaces a archivos
22:20externos que necesita la página como
22:23archivos de css o archivos javascript y
22:26también dentro de head podemos
22:28personalizar el título de la página
22:30pero dentro del elemento poli es donde
22:33vamos a definir la estructura de la
22:35página si omitimos head el browser va a
22:39añadirlo automáticamente ya lo vas a ver
22:41en la herramienta de desarrolladores de
22:43chrome cuando veamos una vista previa de
22:46nuestra página
22:48algo importante que tenemos que cambiar
22:50en dicho de estudios code cuando
22:52trabajamos con archivos html es la
22:55intención
22:57este espacio que puedes ver aquí antes
23:00de las etiquetas head y baring
23:02funcionalmente no tienen un impacto en
23:04html o sea si nosotros escribimos esto
23:07así
23:09la página se va a presentar de igual
23:12forma no va a haber ningún cambio en el
23:14resultado pero siempre deberías agregar
23:17un nivel de intenta ción a cada uno de
23:20los elementos que vas anidando que vas
23:23colocando dentro de otros así puedes ver
23:26fácilmente la jerarquía que hay entre
23:29ellos los elementos que están dentro de
23:31otros elementos por ejemplo aquí
23:33fácilmente podemos ver que head y boring
23:36están dentro del elemento html y eso lo
23:40logramos visualmente agregando espacios
23:43pero aquí tenemos cuatro espacios
23:45podemos cambiar esto porque el estándar
23:48en html es usar dos espacios en realidad
23:53cuántos espacios usar para intentar
23:55puede ser personalizado de acuerdo a tu
23:58preferencia normalmente se usan dos o
24:00cuatro espacios pero el estándar web
24:04recomiendo usar dos espacios al igual
24:06que la guía de estilo de google así que
24:09vamos a usar dos espacios en lugar de
24:11cuatro y cómo podemos cambiar esto en
24:13viso destruyó con hacemos clic aquí dice
24:17espacios 4 hacemos clic en intentar
24:21usando espacios intent using spaces y
24:24luego seleccionamos cuantos espacios
24:26queremos usar para cada nivel de intenta
24:29ción en este caso sería 2 en lugar de 4
24:32que es el
24:35tamaño por defecto
24:37vamos a usar 2 ahora podemos con el
24:40atajo del teclado control y luego el
24:43corchete un corchete de apertura podemos
24:47mover el código hacia la izquierda un
24:49nivel de intenta ción así teníamos el
24:52código antes con cuatro espacios puedes
24:54ver aquí cuatro puntitos cada uno de los
24:56puntitos representa un espacio y si
24:59hacemos clic en control y un corchete de
25:02apertura bajamos a dos espacios y si
25:05hacemos clic en control con un corchete
25:07de cierre volvemos a cuatro espacios
25:10porque estamos agregando un nivel de
25:12intenta ción estos atajos de teclado son
25:15muy muy útiles cuando estamos trabajando
25:18con un editor de código así que te
25:20recomiendo que los anotes o los tengas
25:22allí presentes cuando trabajes con peso
25:25de estudio caber
25:26porque usamos dos espacios normalmente
25:29en vez de cuatro bueno porque el html
25:32vamos a ir intentando cada uno de los
25:35elementos que están contenidos dentro de
25:38otros elementos y eso va a crear una
25:40estructura que va a ser bastante
25:42profunda vamos a tener muchos niveles de
25:45intenta acción y con dos espacios
25:47estamos ahorrando espacio horizontal
25:49para que se pueda ver mejor y aún así se
25:51detecta a la jerarquía fácilmente con
25:53dos espacios ahora que ya tenemos esto
25:56configurado y puedes ver que aquí vamos
25:58a usar dos espacios vamos a continuar
26:01con nuestro próximo tema vas a aprender
26:04cómo puedes especificar el idioma de la
26:07página en esta etiqueta que tenemos aquí
26:09html esto lo veremos en la próxima parte
26:18vamos a ver cómo puedes especificar el
26:20idioma de la página en html esto es muy
26:24importante para mejorar la accesibilidad
26:26de la página y para que el browser sepa
26:29cuál es el idioma de la página se
26:31recomienda siempre incluyendo
26:33dentro de la etiqueta de apertura vamos
26:36a agregar algo que se llama un atributo
26:38vamos a hablar más de los atributos más
26:40adelante pero básicamente un atributo
26:43simplemente especifica algo sobre ese
26:46elemento en este caso vamos a
26:48especificar el idioma de todos los
26:52elementos dentro de el elemento raíz
26:56prácticamente todos los elementos de la
26:58página web estamos diciendo que van a
27:00tener este idioma el atributo se llama
27:03line que es la abreviación de language
27:06en inglés que significa idioma a ese
27:09atributo le vamos a asignar el valor
27:12y ese tiene que estar entre comillas
27:15todo valor que vamos a especificar aquí
27:18de un atributo tiene que estar entre
27:20comillas y ese valor es ese en este caso
27:23porque es el código que le asignamos al
27:26idioma español en los estándares web y
27:29en los estándares internacionales
27:30veamos una referencia de estos códigos
27:33si buscamos en wikipedia una lista de
27:36los códigos que se asignaron a cada uno
27:38de los idiomas aquí podemos ver la lista
27:41si buscamos en la lista español
27:45en inglés esperes
27:48aquí lo tenemos en español y su código
27:51es efe
27:53ese es el código que nosotros vamos a
27:55escribir aquí entre comillas si fuera
27:59inglés sería en inglés ese es el código
28:03que se le asignó genial ya sabes cómo
28:05especificar el idioma de la página web
28:07en la próxima parte vamos a ver cómo
28:10puedes empezar a agregar elementos a tu
28:13página web dentro de la etiqueta boring
28:16de berlín
28:21ahora vamos a comenzar a ver cómo puedes
28:23agregar elementos visibles en tu página
28:26web porque hasta ahora lo que hemos
28:29agregado al archivo simplemente va a
28:31mostrar una página vacía vamos a probar
28:33vamos a ver la página en su estado
28:36actual si vamos a la carpeta y hacemos
28:38doble clic en el archivo index vamos a
28:41ver una página vacía pero en realidad
28:44esta página no está vacía porque si
28:47abrimos las herramientas de
28:48desarrolladores de chrome hacemos clic
28:50en inspector vamos a ver la estructura
28:53html de la página aquí podemos
28:56incrementar el tamaño de la letra
28:59haciendo clic en control y luego con la
29:02ruedita del mouse del cursor del ratón
29:05podemos ver la estructura de la página
29:07tenemos nuestro elemento raíz html la
29:11etiqueta de apertura y la de cierre y
29:13especificamos el idioma de la página
29:16también tenemos nuestra declaración del
29:19doctor que lo vemos aquí como en inglés
29:21luego vemos el ibón y con sus etiquetas
29:25de apertura y de cierre puedes ver que
29:27si colocamos el cursor en bari vemos
29:30aquí una línea naranja en la página el
29:33cuerpo si existe pero en este momento
29:35está vacío pero vamos a ir agregando el
29:37elemento a esta estructura y cómo lo
29:40vamos a hacer bueno vamos a colocar el
29:42editor de código y la página al lado a
29:44lado para ver cómo se actualiza podemos
29:47ver los lado a lado si eliminamos este
29:50elemento de nuestro archivo y volvemos a
29:53cargar la página puedes ver que no pasó
29:56nada la página sigue estando en blanco
29:58pero
30:02si abrimos las herramientas de
30:04desarrolladores de chrome vemos que
30:06igual de etiquetaje se agregó ese
30:09elemento se agrega automáticamente
30:11cuando abrimos la página en el browser
30:13así que por ahora la vamos a omitir y
30:16vamos a hablar más sobre head y qué
30:18elementos podemos incluir en head más
30:19adelante vamos a trabajar con boyle
30:22dentro de x y vamos a ver un tipo de
30:25elementos llamados encabezado o título
30:27podemos crear un encabezado en inglés un
30:30guerín
30:32con la etiqueta h seguido de un número
30:36entre 1 y 6 necesitamos la etiqueta de
30:39apertura y la etiqueta de cierre y te
30:42voy a colocar un poco más grande aquí la
30:45etiqueta de apertura tener los
30:46paréntesis angulares y dentro h1 este es
30:50el nivel
30:50más grande de encabezado va a tener el
30:54tamaño de letra más grande y va a tener
30:56un formato ya específico incluyendo el
30:59texto en negrita
31:07vamos a ver
31:09hola mundo vamos a escribir este mensaje
31:12dentro de las etiquetas y este va a ser
31:14el contenido de nuestro encabezado de
31:16nuestro título si volvemos a cargar la
31:19página vemos aquí que aparece el texto
31:20hola mundo si escribimos eso mismo pero
31:24dentro de una etiqueta h2 un elemento h
31:282
31:29y volvemos a cargar la página puedes ver
31:32que la letra está más pequeña
31:34así es que podemos ir definiendo
31:37este tipo de elementos en nuestra página
31:39y ya tenemos un formato estándar h3 es
31:42aún más pequeño
31:44h 4 más pequeño todavía pero vemos que
31:48si se mantiene el formato en negrita
31:52h 5
31:57y finalmente h 66 niveles si luego de h
32:026 intentamos colocar una etiqueta
32:04llamada h 7 para un elemento h 7 veamos
32:07qué pasa ya el texto no tiene un formato
32:10específico no es un título no está en
32:12negrita no sigue esta secuencia solo
32:15podemos incluir los números entre 1 y 6
32:19y así es como creamos un encabezado en
32:21nuestra página recuerda las etiquetas h
32:241 hasta h 6 etiqueta de apertura
32:27etiqueta de cierre y dentro de las
32:30etiquetas el contenido del título del
32:33encabezado bien en la próxima parte
32:35vamos a ver cómo puedes crear un párrafo
32:38el elemento que usamos cuando queremos
32:40incluir texto o un párrafo en nuestra
32:42página web
32:48bien ahora vamos a ir creando la
32:51estructura definitiva de nuestra página
32:54con los elementos vamos a crear una
32:56aplicación de gatos para eso tenemos que
32:59borrar estos encabezados estos títulos
33:01tenemos nuestra página en blanco y vamos
33:05a crear un título con el elemento h 2
33:16y luego vamos a crear un párrafo para
33:20crear un párrafo usamos este elemento el
33:24elemento p en html tenemos una etiqueta
33:28de apertura y una etiqueta de cierre y
33:30dentro de esas etiquetas vamos a
33:33escribir el contenido del párrafo el
33:35texto
33:40haz clic aquí
33:42para ver
33:44más imágenes de
33:47gatos
33:49para poder ver el código mejor con mayor
33:52tamaño vamos a ocultar esta barra esta
33:56barra se llama la activity by la barra
33:59de actividad podemos hacer clic derecho
34:01aquí en algún lado de la barra y luego
34:04hacer clic aquí esconder la barra de
34:07actividad y vemos cómo se esconde para
34:10volver a mostrar la hacemos clic en view
34:12a france y luego yo activity by
34:18y por ahora vamos a ocultar
34:21aquí vemos haz clic aquí para ver más
34:23imágenes de gatos
34:25si volvemos a cargar la página vemos el
34:27texto que tenemos aquí y así es como
34:30creamos un párrafo en html con la
34:33etiqueta p recuerda apertura cierre y el
34:38contenido
34:39para mostrarte cómo podemos usar esta
34:42etiqueta para crear varios párrafos aquí
34:45he copiado y pegado voy a pegar aquí en
34:48el editor de código un texto que
34:52normalmente se puede usar para como para
34:55guardar el lugar del texto definitivo
34:58sirve como lo que decimos en inglés un
35:00place holder llamado lawrence gibson un
35:04texto tomado de escrituras antiguas pero
35:08en este caso ha sido adaptado para
35:10gatitos para seguir con el tema de
35:12nuestra aplicación
35:13aquí estamos creando párrafos
35:18pero puedes ver que esos párrafos son
35:20muy muy largos
35:22así que tendríamos que desplazarnos
35:24horizontalmente para ver su contenido lo
35:27que podemos hacer en este caso es usar
35:30un atajo de teclado alt z cuando haces
35:34clic en alt z el código se adapta al
35:38tamaño de tu ventana así que puedes ver
35:40que todo el contenido ahora está
35:42presentado verticalmente para que no
35:44tengamos que desplazarnos
35:45horizontalmente es muy útil cuando
35:49necesitas como en este caso tener lado a
35:51lado tu página y tu código recuerda al z
35:55y si vuelves a hacer clic en alt z se
35:57revierte el efecto y vuelves a tener
35:59todo en una sola línea aunque entonces
36:02aquí puedes ver cada uno tiene su
36:04etiqueta p
36:06para cada uno de los párrafos y si
36:08volvemos a cargar la página puedes ver
36:10que tenemos una separación entre estos
36:13elementos cada uno es un párrafo tiene
36:16su separación y así podemos ir creando
36:20el contenido de la página si la página
36:21requiere tener texto genial ya sabes
36:25cómo trabajar con párrafos en html con
36:27la etiqueta p así que la próxima parte
36:30vas a aprender cómo puedes conseguir más
36:33información sobre cada uno de estos
36:35elementos en la documentación de la red
36:38de desarrolladores de mozilla vas a
36:40aprender paso a paso cómo leerla y cómo
36:42conseguir más información allí en la
36:44próxima parte
36:50la documentación es muy importante
36:52porque te permite conseguir cosas nuevas
36:55sobre el lenguaje aprender más sobre
36:58cómo puedes usar cada uno de sus
37:00elementos y de sus propiedades de sus
37:03capacidades como lenguaje así que vamos
37:06a ir a la documentación de la red de
37:08desarrolladores de mozilla donde puedes
37:11conseguir información sobre html css y
37:14javascript
37:16para eso aquí debes buscar mdm web box
37:20también lo puedes escribir en google o
37:23que directamente en cualquiera de los
37:24dos el resultado es exactamente el mismo
37:26y aquí llegamos a web box vamos a entrar
37:31allí y puedes ver que la página
37:34inicialmente está en inglés pero cuando
37:38ves que aquí que tenemos es la s esto
37:42significa que cuando busquemos en esta
37:44barra los resultados van a estar en
37:46español si no está esta parte luego el
37:49punto org simplemente debes agregarse
37:51haces clic en enter y vuelves a cargar
37:53la página
37:54ahora si nosotros buscamos por ejemplo
37:57la etiqueta p
38:00aquí podemos ver que el idioma de la
38:02página actualmente está configurado a
38:04español así que los resultados que
38:06obtenemos están en español en este caso
38:10queremos aprender más sobre la etiqueta
38:11p así que vamos a hacer clic aquí en
38:14este enlace que nos lleva a su
38:16documentación en español
38:18comenzamos leyendo sobre esta etiqueta
38:22definición el elemento p párrafo es el
38:26apropiado para distribuir el texto en
38:28párrafos sus etiquetas son p y luego la
38:31de cierre que tenemos aquí la de cierre
38:33es opcional vemos más información sobre
38:36este elemento y vemos sus posibles
38:38atributos ya hablamos sobre el atributo
38:40online que especifica el código de
38:43idiomas por ejemplo si tenemos un
38:45párrafo en otro idioma en nuestra página
38:47que no es el idioma principal de la
38:49página podemos agregar ese atributo al
38:52párrafo también tenemos otros atributos
38:54sobre los cuales vamos a hablar durante
38:56el curso
38:58pero como puedes ver la documentación es
39:00muy útil además tenemos un ejemplo de
39:03cómo podemos usar esta etiqueta o este
39:05elemento en nuestra página así podemos
39:08conseguir información sobre cualquier
39:11elemento html que necesitemos
39:14vamos a llegar al artículo que vimos
39:16cuando creamos el archivo index html
39:20hacemos clic en enter y aquí llegamos al
39:24artículo de docta en el que acabamos de
39:26ver hace algunos minutos en el curso la
39:29documentación es muy útil y vamos a
39:32estar refiriéndonos a esta documentación
39:33para html css y luego en un próximo
39:37curso también para ya busquets así que
39:40es importante que te familiarices con la
39:42documentación
39:44recuerda para que los resultados estén
39:46en español aquí puedes agregar es las
39:50islas también si no está configurado en
39:54español puedes hacer clic en esta opción
39:57aquí te va a dar los distintos idiomas
40:00te va a decir los distintos idiomas
40:02español inglés o ambos genial ya sabes
40:06cómo leer la documentación de la red de
40:09desarrolladores de mozilla en la próxima
40:12parte vamos a ver algo muy importante
40:14los comentarios te veo y cuando estés
40:17listo lista continúa con el curso
40:25ahora vamos a hablar sobre los
40:27comentarios en html en html puedes crear
40:31un comentario
40:32vamos a colocar nuestro editor de código
40:35en pantalla completa para verlo con más
40:37detalle
40:38puedes crear un comentario
40:41de esta forma primero un paréntesis
40:43angular de apertura luego un signo de
40:47exclamación seguido de dos guiones el
40:51editor de código automáticamente lo
40:53completa con el cierre del comentario
40:55que son dos guiones seguido de un
40:58paréntesis angular y dentro de estas dos
41:01combinaciones de símbolos dentro de
41:03estas dos estructuras
41:05vamos a escribir el contenido del
41:07comentario por ejemplo un comentario
41:11puede ser un recordatorio de algo que
41:14está pendiente por hacer en el archivo
41:17por ejemplo un youtube en inglés
41:19significa como una tarea pendiente por
41:22hacer youtube agregar enlace a imágenes
41:27de gatos
41:29digamos que queremos agregar aquí un
41:31enlace a imágenes de gatos pero todavía
41:33esta tarea está pendiente no agregamos
41:36un comentario y así nos recordamos a
41:38nosotros mismos oa otros desarrolladores
41:40con los que estemos trabajando que esa
41:43es una tarea pendiente ese es el
41:44propósito de los comentarios con los
41:47comentarios podemos explicar el código
41:50podemos agregar exactamente esos
41:54comentarios que sean útiles para
41:56nosotros como desarrolladores o para
41:58otros desarrolladores que estén viendo
42:00nuestro código los comentarios no son
42:03como tal parte del código o de la
42:06estructura final de la página solamente
42:09están allí para dar ese mensaje cuando
42:11vemos el archivo en un editor de código
42:13no afectan para nada el resultado veamos
42:16esto si volvemos a cargar la página
42:18vemos que todo sigue igual pero tenemos
42:21este comentario aquí cuando veas una
42:23línea gris
42:24normalmente se coloca en gris
42:26dependiendo del tema de colores que
42:29escojas eso es un comentario
42:31hay un atajo del teclado que puedes usar
42:33para convertir una línea en un
42:35comentario esto puede ser útil cuando
42:38quieres experimentar o probar cómo se
42:41vería la página things una línea de
42:43código de html o si un bloque de código
42:47también
42:48para hacer esto simplemente seleccionas
42:51la línea y haces clic en control seguido
42:55de una barra inclinada si vuelves a usar
42:58este atajo de teclado
43:00remueves el comentario aquí puedes verlo
43:03comentario código comentario código si
43:08esta línea es un comentario eso
43:11significa que no va a aparecer en el
43:13resultado final
43:15veamos si volvemos a cargar la página
43:17ahora vemos que esa línea no aparece
43:19aquí pero si quitamos el comentario aquí
43:23lo puedes ver genial también si quieres
43:26comentar un bloque de código por ejemplo
43:29digamos que no tenemos este comentario
43:32y queremos comentar estas tres líneas
43:36también hacemos clic en control y la
43:39barra inclinada y podemos ver que todos
43:42los elementos de esas líneas se vuelven
43:45parte del comentario si guardamos el
43:48archivo y volvemos a cargar la página
43:49vemos una página vacía porque ya no
43:52tenemos ningún código html dentro de la
43:55etiqueta by y aquí vamos a mantener
43:58nuestro comentario genial ya sabes cómo
44:02trabajar con comentarios en html
44:04paréntesis angular signo de exclamación
44:07-- y luego jong yong y paréntesis
44:11angular genial ahora vamos a ver una
44:14etiqueta que nos va a permitir decirle
44:16al browser dónde está el contenido
44:18principal de nuestra página lo veremos
44:20en la próxima parte del curso
44:27ahora vamos a trabajar con el elemento
44:29main en español main significa principal
44:33esa etiqueta va a decirle al browser
44:36dónde está ubicado el contenido
44:38principal de nuestra página web antes de
44:42agregar mail a nuestra página vamos a
44:44crear otro título otro encabezado ese
44:48título va a decir imágenes de
44:51gatos que en este momento tenemos tres
44:54elementos
44:55el título principal otro título más
44:58pequeño y aquí tenemos el párrafo con un
45:01contenido
45:03el contenido principal de la página va a
45:05estar dentro de la etiqueta main que
45:08tenemos aquí tenemos su etiqueta de
45:10apertura y tenemos su etiqueta de cierre
45:13puedes ver que es de cierre porque
45:15tenemos la barra inclinada aquí todo el
45:18contenido principal de la página debería
45:20estar dentro de la etiqueta main así que
45:23vamos a borrar la etiqueta de cierre de
45:26aquí y vamos a colocarla aquí luego de
45:31todos los elementos del contenido
45:33principal de la página que hasta este
45:35momento serían estos dos elementos no
45:38vamos a considerar el título principal
45:40como parte del contenido principal de la
45:43página en este caso también podrías
45:46incluirlo
45:48pero qué ocurre en este momento no
45:50estamos especificando con la intención
45:53que estos elementos van a pertenecer a
45:56main stand intentados al mismo nivel
45:59puedes ver que todos están aquí
46:01alineados debemos intentar los un nivel
46:04más hacia la derecha y así puedes ver
46:07fácilmente que estos elementos
46:10pertenecen a maine
46:12genial si volvemos a cargar la página
46:14puedes ver que no hubo ningún cambio
46:16pero si tenemos un cambio en la
46:18estructura de nuestra página veamos más
46:21sobre main y por qué deberíamos usarlo
46:23en html si vamos a la red de
46:27desarrolladores de mozilla podemos hacer
46:29clic aquí en main y vamos a este
46:32artículo
46:33main el elemento html main representa el
46:37contenido principal de la etiqueta point
46:40de ese documento o aplicación el área
46:44principal del contenido consiste en el
46:46contenido que está directamente
46:48relacionado o se expande sobre el tema
46:52central de un documento o la
46:54funcionalidad central de una aplicación
46:57esto es muy importante este contenido
47:00debe ser único al documento excluyendo
47:04cualquier contenido que se repita a
47:06través de un conjunto de documentos como
47:08barras laterales enlaces de navegación
47:11información de los derechos de autor o
47:13cualquier otra parte de la página que si
47:15se repita no debe haber más de un
47:17elemento main
47:19y el elemento main no debe ser
47:22descendiente de otro elemento como
47:24artículo como führer como xerez no debe
47:27ser descendiente no debe ser parte de
47:29otro elemento aquí estamos usando main
47:31para el contenido principal de nuestra
47:34página genial ya sabes la importancia de
47:37main
47:43ahora que ya tenemos una estructura un
47:45poco más elaborada en nuestra página web
47:47vamos a hablar un poco sobre la
47:49importancia de la intenta ción en html
47:52cuando comenzamos a escribir el archivo
47:55hicimos un cambio aquí en la
47:57configuración para usar dos espacios
47:59para cada nivel de intenta ción como
48:02puedes ver aquí usamos dos espacios dos
48:05circulitos aquí para cada nivel pero
48:08porque dos espacios y para que es
48:10importante intentar nuestro código en
48:13html
48:15veamos
48:16funcionalmente en html los espacios no
48:20tienen un propósito real funcionalmente
48:23no va a haber ninguna diferencia si
48:26escribimos este archivo de esta forma o
48:28si simplemente escribimos esto
48:32así todo al mismo nivel de intenta ción
48:35si volvemos a cargar la página podemos
48:38ver que no hubo ningún cambio pero si
48:41hubo un cambio importante en la
48:43facilidad de lectura del archivo este
48:46archivo no es para nada fácil de leer no
48:50podemos ver inmediatamente no podemos
48:52identificar cuál es la estructura o la
48:55jerarquía entre los distintos elementos
48:57de la página y esto es simplemente una
49:00página muy sencilla imagínate una página
49:03real en la página que esté ya publicada
49:06en internet imagínate lo difícil que
49:09sería leer ese archivo si no está
49:12intentado adecuadamente por eso es que
49:15necesitamos los dos espacios los dos
49:19espacios por cada nivel de intenta ción
49:21como tenemos aquí esto sería la intenta
49:24acción adecuada para el archivo usamos
49:27normalmente dos espacios en lugar de
49:30cuatro también se podría usar cuatro es
49:33válido funcionalmente pero tendemos a
49:36usar dos en html porque es más conciso
49:40como puedes ver la estructura cada vez
49:43se va haciendo más profunda o tiene más
49:45elementos anidados uno dentro de otro
49:48así que usamos dos porque nos permite
49:50ver la jerarquía y aún así es conciso no
49:53agregamos espacios innecesarios
49:56además dos espacios es lo recomendado
49:59por la guía de estilo de coco y por el
50:01consorcio web web 13 si vemos la guía de
50:05estilo de google para html y css
50:08en esta sección que tenemos aquí hablan
50:13sobre la intenta ción y nos dicen que
50:15deberíamos intentar usando dos espacios
50:18a la vez para cada nivel de intenta ción
50:20y también nos advierten que no debemos
50:22mezclar
50:24espacios y tabs para intentar nuestro
50:27código si usamos espacios debemos usar
50:30espacios en todo el archivo y se
50:33recomienda dos espacios
50:35bien ya sabes por qué es importante
50:38intentar tu código en html no hay un
50:41impacto funcional sobre el resultado
50:43sino que nos permite escribir archivos
50:46que son más fáciles de leer y por lo
50:48tanto más fáciles de crear de mantener y
50:51de expandir si queremos trabajar con
50:54nuestra estructura existente y agregar
50:56nuevos elementos de así que pasemos a
50:59nuestra siguiente parte del curso cómo
51:02podemos incluir una imagen en nuestra
51:04página vamos a tener un gatito aquí lo
51:06veremos en la próxima parte del curso
51:08así que te espero allí
51:15genial muy buen trabajo hasta ahora
51:17veamos otros tipos de elementos con el
51:20que puedes trabajar imágenes las
51:22imágenes se han vuelto una parte central
51:25de la web que conocemos hoy en día
51:28primero que todo para crear una imagen
51:30debes usar la etiqueta img vamos a
51:35colocar nuestro editor de código en
51:37pantalla completa para que podamos verlo
51:39con más detalle
51:40img
51:42esta etiqueta es una abreviación de
51:45emails en inglés
51:47esa etiqueta es una etiqueta que se
51:50cierra automáticamente
51:52no necesitamos escribir una etiqueta de
51:54cierre para la imagen y también es
51:57opcional agregar esta barra inclinada al
52:00final es opcional
52:03debemos especificar dónde está la imagen
52:06que queremos presentar por ejemplo si
52:09queremos tomar la imagen de internet
52:11tenemos que especificar aquí entre
52:14comillas
52:15donde estaba ubicada esa dirección web
52:18https en este caso vamos a colocar una
52:22imagen de un gato
52:24alojada
52:26en https vitali y luego fsc frigor gama
52:32de daxing cat esta es una imagen que ya
52:36está alojada en internet por fritz code
52:39cam ese es el valor que le estamos
52:41asignando al atributo s rc porque src
52:45porque el inglés está es una abreviación
52:48de short course en español significa la
52:52fuente la fuente donde estamos tomando
52:55esa imagen es esta dirección web
52:59bien vamos a ver cómo se presenta la
53:03imagen en nuestra página
53:06aquí puedes ver que tomo un segundito y
53:08vemos la imagen tenemos nuestro gatito
53:11esa es la imagen que estamos incluyendo
53:13a partir de esta dirección web genial no
53:17un atributo importante que debería tener
53:20cualquier imagen en html es el atributo
53:23alto porque
53:26out es una descripción alternativa para
53:29la imagen que se va a presentar si por
53:32ejemplo la imagen no se descarga
53:34correctamente por una falla en internet
53:36o si el usuario está usando un lector de
53:39pantalla ese texto se va a leer para
53:42darle mayor accesibilidad a los usuarios
53:45a nuestra página vamos a escribir una
53:48descripción de la imagen un lindo gato
53:51naranja
53:53recostado sobre su
53:56espalda
53:58bien tenemos nuestro atributo out y para
54:03verlo en acción porque si vuelves a
54:05cargar la página no va a haber ninguna
54:07diferencia lo que tenemos que hacer es
54:10por un segundo interrumpir nuestra
54:12conexión a internet voy a hacer
54:14exactamente eso
54:17ya lo desactiva y ahora si volvemos a
54:20cargar la página vemos nuestra
54:22descripción aquí un lindo gato naranja
54:25recostado sobre su espalda y vemos este
54:28simbolito que nos indica que allí había
54:30una imagen pero no se descargó
54:32adecuadamente esa es la importancia de
54:35up le permite al usuario tener una
54:37alternativa en texto de la imagen que se
54:40supone que debería estar allí y en el
54:43caso de un lector de pantalla esta sería
54:45la descripción que se daría para la
54:47imagen digamos que no incluimos este
54:51atributo digamos que lo removemos
54:53completamente desde nuestra imagen y
54:55volvemos a cargarla sin conexión a
54:58internet aquí vemos ese símbolo pero ya
55:02lo tenemos una descripción y eso va a
55:04afectar la experiencia del usuario
55:06siempre se debería incluir este atributo
55:09para todas las imágenes que incluyas en
55:11tu página html
55:14bien si volvemos a conectarnos a
55:17internet volvemos a ver la imagen y aquí
55:19volvemos a incluir el atributo out
55:22genial ya sabes cómo incluir una imagen
55:25que está ya alojada en internet pero
55:28como puedes incluir una imagen desde una
55:31carpeta en tu dispositivo
55:33veamos como lo podemos hacer
55:37si en nuestra carpeta curso de html y
55:40css
55:41donde tenemos nuestro archivo index html
55:45también agregamos una imagen digamos
55:48lasaña ya vas a ver por qué estamos
55:51incluyendo la hazaña podemos incluir
55:53esta imagen en nuestra página web
55:56veamos cómo
55:58si volvemos a presentar
56:01la barra de actividad que tenemos aquí a
56:05la izquierda podemos abrir el explorador
56:07y vemos la imagen lasaña jpg no estoy
56:11usando n porque normalmente usar
56:14caracteres que no sean estándar en
56:16inglés pueden resultar en errores
56:18inesperados así que en este caso no voy
56:21a usar la ñ para el nombre de la imagen
56:24la podemos ver aquí vamos a necesitar
56:28otra etiqueta de imagen pero en este
56:31caso en source en este atributo en lugar
56:35de escribir una dirección web vamos a
56:38indicar dónde está ubicada esa imagen
56:40respecto a nuestro archivo html
56:43si está en la misma carpeta podemos
56:46simplemente usar su nombre
56:49lasaña jpg e incluso la vemos aquí como
56:52una opción para auto completarlo
56:55veamos el resultado de nuestra página
56:57aquí podemos ver la imagen si volvemos a
57:01cargar la página vemos la lasaña
57:03perfecto ahora qué pasa si la imagen
57:06está dentro de otra carpeta
57:08digamos que creó una carpeta llamada
57:11imágenes ahora mueva esa imagen a la
57:14carpeta
57:15confirmó que sí quiero moverla y ahora
57:18ves que la imagen está dentro de esa
57:21carpeta podemos confirmarlo si vamos a
57:24la carpeta recuerda que tratamos de no
57:27introducir caracteres que no sean
57:28estándar en inglés por eso no estoy
57:30incluyendo el acento aquí en imágenes
57:32cuál sería el cambio que debemos hacer
57:35para que esta imagen se reconozca porque
57:37si intentamos otra vez mostrar la página
57:40vas a ver que en lugar de la lasaña
57:43vemos que allí debería haber estado una
57:45imagen pero no se encontró porque ahora
57:49la imagen no está directamente en la
57:50misma carpeta del archivo html está en
57:54otra carpeta así que debemos especificar
57:56el nombre de esa carpeta
57:59aquí le estamos diciendo a nuestro
58:01archivo la imagen está en la carpeta
58:04imágenes que está ubicada en la misma
58:07carpeta que el archivo html
58:09y luego el archivo está dentro de esa
58:13carpeta eso es lo que hacemos aquí con
58:15esta barra decimos dentro de esta
58:17carpeta está este archivo si guardamos
58:22nuestro archivo html y volvemos a cargar
58:25la página aquí podemos ver
58:28nuestra lasaña también debemos agregarle
58:32un atributo alt a esta imagen la hazaña
58:36en este caso para los atributos si
58:39podríamos usar la ñ para que el lector
58:41de pantalla se está configurado en
58:43español puede pronunciar la letra eñe
58:47genial ya sabes cómo crear un elemento
58:49imagen y cómo tomar esa imagen de
58:53internet o de una carpeta en tu
58:55dispositivo siempre recuerda incluir
58:57también el atributo alt
59:00ahora pasemos a otro elemento muy
59:02importante sin el cual la web no sería
59:05lo que es en este momento los enlaces
59:08continuamos
59:15vamos a ver cómo puedes crear un enlace
59:17en html en html un enlace se crea usando
59:22la etiqueta a hank en inglés por eso
59:28usamos la letra recuerda a enlace
59:31podemos por ejemplo convertir una parte
59:34de nuestro texto en un enlace eso es muy
59:38como si tenemos aquí un párrafo y
59:41queremos convertir parte de ese texto en
59:44un enlace por ejemplo la parte que dice
59:46imágenes de gatos
59:49simplemente vamos a colocar esto en
59:51pantalla completa para verlo con más
59:53detalle
59:54simplemente escribimos la etiqueta a la
59:59de cierre debe estar al final del texto
1:00:02que queremos convertir en un enlace
1:00:04vamos a colocar esto en una sola línea
1:00:07ya colocar lo más grande para poder ver
1:00:09los detalles este es el texto que vamos
1:00:12a convertir en un enlace
1:00:14ahora si vemos la página y la volvemos a
1:00:16cargar veamos qué pasa todavía el texto
1:00:19se muestra exactamente igual no hay
1:00:21ningún cambio no vemos algún cambio
1:00:23visible o funcionan en el texto porque
1:00:26porque no hemos especificado a dónde
1:00:28queremos que lleve ese enlace en esta
1:00:31parte vamos a ver los enlaces que llevan
1:00:34a otras páginas web por ejemplo frito el
1:00:37campeón español si vamos a picar el
1:00:41campeón español en google chrome y
1:00:44copiamos esa dirección web esa página
1:00:47web
1:00:48debemos especificar la aquí como el
1:00:50valor del atributo h ref el valor de h
1:00:55ref
1:00:56representa el destino de ese enlace en
1:00:58este caso el destino va a ser la página
1:01:00de freak o camps así que aquí tenemos el
1:01:05resultado final veamos cómo se ve en
1:01:07nuestra página ahora puedes ver que aquí
1:01:10el formato del texto cambio ahora está
1:01:12subrayado y lo vemos en morado porque ya
1:01:15yo en mi dispositivo ya había ingresado
1:01:18a esa página
1:01:19el color sería un azul si hacemos clic
1:01:22en él
1:01:24vamos a llegar a la página de destino
1:01:27freak o el camp en español
1:01:29genial no pero en este momento nuestro
1:01:33enlace nos está llevando en la misma
1:01:35pestaña de nuestra página a la página de
1:01:39destino free gorka puedes ver que todo
1:01:42ocurre en la misma pestaña y normalmente
1:01:44lo que queremos es que se abra el enlace
1:01:47en una pestaña nueva cómo podemos
1:01:50hacerlo veamos aquí lo único que tenemos
1:01:53que agregar a
1:01:56el elemento del enlace es otro atributo
1:01:59llamado targets target es un atributo
1:02:03que nos va a permitir especificar donde
1:02:06queremos que se abra ese enlace su valor
1:02:09si es bajo plank significa que queremos
1:02:13abrir ese enlace en una pestaña nueva no
1:02:16importa el orden en el que especificamos
1:02:18los atributos ok si una etiqueta tiene
1:02:20más de un atributo todos van a ser
1:02:23considerados no importa el orden vamos a
1:02:26ver cuál es el efecto de este cambio en
1:02:28nuestra página si volvemos a cargar la
1:02:30página visualmente no hay una diferencia
1:02:32pero al hacer clic en el enlace vemos
1:02:35que se abre una nueva pestaña y volar
1:02:38aquí vemos la página en una pestaña
1:02:41nueva y nos mantenemos en nuestra página
1:02:44original por motivos de seguridad
1:02:46también se recomienda agregar este valor
1:02:49que tenemos aquí este atributo red
1:02:54este valor
1:02:56este atributo nos permite prevenir un
1:02:59ataque llamado nave es un tipo de ataque
1:03:03en el que la pestaña de origen se
1:03:05reemplaza para que el usuario ingrese
1:03:08sus datos y eso sería una brecha de
1:03:10seguridad
1:03:11y si volvemos a cargar la página podemos
1:03:14ver que no se afecta para nada el
1:03:16comportamiento bueno ya tenemos nuestro
1:03:19enlace aquí que nos lleva a una página
1:03:22externa recuerda comenzamos con una
1:03:25etiqueta de apertura y luego hr que es
1:03:28donde vamos a llegar al hacer clic en el
1:03:31enlace luego el atributo target con el
1:03:35valor
1:03:36planck para abrir en una pestaña nueva y
1:03:38el atributo orbe o con estos dos valores
1:03:41separados por un espacio para prevenir
1:03:44ataques y aquí tenemos la etiqueta de
1:03:47cierre todo esto aplica para enlaces
1:03:50externos que nos llevan a otra página
1:03:53como por ejemplo freak o el campeón
1:03:55español pero también podemos crear
1:03:57enlaces
1:03:58internos dentro de nuestra página y
1:04:01también podemos convertir imágenes en
1:04:03enlaces es lo que vamos a ver en las
1:04:05próximas partes del curso así que
1:04:07continuemos
1:04:13veamos cómo puedes crear enlaces que nos
1:04:16llevan a secciones o partes específicas
1:04:18de la misma página web primero que todo
1:04:22vamos a expandir un poco el contenido de
1:04:24nuestra página con él loren ipsum con
1:04:28temática de gatos que usamos en un
1:04:30ejemplo anterior eso nos va a permitir
1:04:32saltar de una parte de la página a otra
1:04:38puedes ir a la página de flickr cam
1:04:40punto org islas español español haces
1:04:44clic aquí empieza es gratis puedes crear
1:04:47una cuenta puedes ingresar al currículum
1:04:51certificación de diseño web responsivo y
1:04:53aquí vamos
1:04:55a la parte que nos permite crear enlaces
1:04:58hacia secciones internas de una página
1:05:02aquí conseguimos los párrafos están en
1:05:06inglés los vamos a usar solo
1:05:08provisionalmente porque el idioma de
1:05:09nuestra página especifica que están en
1:05:12español podemos cambiar el idioma de
1:05:14estos elementos individualmente pero
1:05:17como esto es solo para fines de
1:05:19demostración durante esta parte en
1:05:21particular del curso no lo vamos a
1:05:24agregar vamos a intentarlo con tres
1:05:27niveles de tentación para que estén
1:05:29dentro del elemento main
1:05:32podemos separar los párrafos también con
1:05:35una línea en blanco se recomienda usar
1:05:37una línea en blanco para separar partes
1:05:40importantes de la página o grupos de
1:05:42elementos que no estén relacionados en
1:05:45general para hacer que la estructura de
1:05:47la página sea más fácil de identificar y
1:05:50yo creo que en este caso ayuda a agregar
1:05:51una línea en blanco entre cada uno de
1:05:54los párrafos si volvemos a cargar la
1:05:57página aquí podemos ver los distintos
1:05:59párrafos también vamos a agregar un
1:06:02título
1:06:04digamos h 3
1:06:07párrafo 1 luego vamos a cargar la página
1:06:11y aquí vemos párrafo 1 párrafo 2
1:06:15estamos simplemente agregando
1:06:18títulos para poder usarlos en nuestros
1:06:22enlaces internos párrafo 1 párrafo 2
1:06:24párrafo 3 y
1:06:27párrafo 4 claro en tu página web esto
1:06:31estaría más específico sería ya el
1:06:33contenido de tu página si quisieras
1:06:36especificar el idioma del párrafo puedes
1:06:39agregar este atributo en su etiqueta de
1:06:41apertura su idioma es inglés así que lo
1:06:43podemos especificar aquí en los
1:06:45elementos individuales porque no es el
1:06:47idioma que especificamos aquí arriba
1:06:50pero para fines de demostración
1:06:52temporalmente no vamos a incluir ese
1:06:55atributo que vamos a crear nuestro
1:06:58enlace interno digamos que queremos
1:07:01crear un tipo de índice
1:07:04antes de la imagen del gatito vamos a
1:07:08escribir
1:07:10párrafo 1
1:07:12luego
1:07:13párrafo 2 nuevo párrafo 3 y párrafo 4
1:07:17que vamos a tener sólo cuatro párrafos
1:07:20aquí
1:07:21vamos a crear en las seis que nos lleven
1:07:24al título de cada uno de los párrafos
1:07:26para que cuando hagamos clic encima de
1:07:28ese enlace inmediatamente bajemos a
1:07:30donde está ubicado ese párrafo en la
1:07:32página
1:07:34veamos cómo lo podemos hacer como
1:07:36queremos que sean enlaces en lugar de
1:07:39una etiqueta p tenemos que escribir una
1:07:42etiqueta para convertirlo en un enlace
1:07:45vamos a hacerlo para cada uno de estos
1:07:48elementos y ya vas a ver que vamos a
1:07:50especificar como el destino
1:07:53aquí lo tenemos y si volvemos a cargar
1:07:55la página puedes ver que todavía en este
1:07:58momento no se muestran como enlaces
1:08:01tenemos que especificar el destino cuál
1:08:04va a ser el destino el destino va a ser
1:08:06una parte interna de la página por ahora
1:08:09simplemente vamos a colocar un número
1:08:13el numeral funciona para crear enlaces
1:08:16que no te llevan a ningún lado
1:08:18simplemente están allí para mostrarse
1:08:21mostrarle al usuario que es un enlace
1:08:23pero todavía no funciona son muy útiles
1:08:26durante el proceso de desarrollo ves que
1:08:29si hacemos clic en ellos no vamos a
1:08:30ningún lado para poder desplazarnos
1:08:34dentro de la página tenemos que
1:08:36asignarle al elemento una identificación
1:08:39única eso lo logramos con este atributo
1:08:43vamos a presentar el código aquí el
1:08:46atributo se llama haití en inglés haití
1:08:49significa identificador único es como un
1:08:52nombre que le vamos a asignar a ese
1:08:54elemento es único para ese elemento en
1:08:57toda la página web en este caso vamos a
1:09:00asignarle el haití párrafo uno entre
1:09:03comillas y escribimos ese haití para
1:09:07convertir este enlace en un enlace
1:09:09interno que nos lleve hasta este título
1:09:11párrafo uno tenemos que especificar como
1:09:15su destino en h ref su aire
1:09:19párrafo 1 puedes ver que estamos
1:09:22conectando los porque estamos aquí
1:09:25identificando los de forma única a ese
1:09:28elemento decimos que su destino debe ser
1:09:31dónde está este elemento en la página si
1:09:34guardamos el archivo y volvemos a cargar
1:09:37la página
1:09:38hacemos clic en nuestro enlace y vamos
1:09:41directamente a ese elemento párrafo 1
1:09:44que tiene ese de esta identificación
1:09:46única
1:09:48vamos a hacerlo nuevamente para cada uno
1:09:51de los párrafos tenemos que agregarles
1:09:53el atributo haití con un identificador
1:09:56único para el párrafo 2
1:09:59asignamos creamos este de párrafo 2
1:10:04para el párrafo 3 dyn
1:10:08párrafo 3 puedes ver que no estoy
1:10:10incluyendo el acento para no incluir
1:10:13caracteres que no son estándar en inglés
1:10:16en este caso si los teníamos que incluir
1:10:18porque es el texto que se va a mostrar
1:10:20al usuario pero en la parte interna que
1:10:22no se va a mostrar podemos omitir
1:10:26y luego para párrafo 4
1:10:29genial ahora ya cada uno tiene su haití
1:10:32y podemos volver aquí a los enlaces y
1:10:35asignarles su destino párrafo 3 y luego
1:10:39párrafo 4 guardamos el archivo volvemos
1:10:43a cargar la página y si vamos aquí si
1:10:46subimos aquí podemos ver que todos son
1:10:48enlaces y el único que vemos aquí en
1:10:51morado es el que ya hicimos clic para el
1:10:53párrafo 1 luego para el párrafo 2 si
1:10:57hacemos clic antes lo veíamos en azul y
1:10:59ahora lo vemos en morado y llegamos al
1:11:01párrafo 3
1:11:04y finalmente al párrafo 4 en este caso
1:11:08los títulos no quedan aquí en el límite
1:11:10superior porque ya estamos en el final
1:11:12de la página no podemos bajar más para
1:11:15llegar a esos elementos pero igual se
1:11:17presentan en la página en un rango
1:11:19visible así que ya sabes cómo crear
1:11:23enlaces internos en tu página web
1:11:25recuerda simplemente le asignas una
1:11:29identificación una identificación única
1:11:32para ese elemento un nombre que puedes
1:11:34usar para referirte a ese elemento en
1:11:37particular con el atributo haití y de y
1:11:41luego cuando vas a crear el enlace te
1:11:44refieres a ese haití con signo de
1:11:47numeral un hashtag genial en la próxima
1:11:51parte vamos a ver cómo puedes lograr que
1:11:55las imágenes de tu página web también
1:11:57funcionen como enlaces esto va a ser muy
1:12:00útil y ya vas a ver cómo podemos
1:12:02combinar ambas etiquetas la de imagen
1:12:05en la cee
1:12:11bien ahora vamos a ver cómo puedes
1:12:13convertir estas imágenes que tenemos
1:12:15aquí específicamente esta imagen del
1:12:18gatito en un enlace para eso lo primero
1:12:22que vamos a hacer es eliminar estos
1:12:24enlaces y estos párrafos
1:12:26todos estos elementos no van a ser parte
1:12:30de la versión final de nuestra página
1:12:33volvemos a cargar la página y aquí
1:12:35puedes ver solo las imágenes y estos
1:12:37títulos y este párrafo genial ahora cómo
1:12:41podemos hacer que esta imagen actúe como
1:12:44un enlace en este momento si hacemos
1:12:46clic sobre la imagen no ocurre nada y
1:12:49también observa que el cursor se
1:12:51mantiene intacto no cambia pero cuando
1:12:54sea un enlace este cursor se va a volver
1:12:57una manito cómo podemos lograr ese
1:13:00efecto primero tenemos que conseguir el
1:13:02elemento que queremos convertir en un
1:13:05enlace en este caso este es el elemento
1:13:08de la imagen un lindo gato naranja
1:13:10recostado sobre su espalda
1:13:12vamos por un momento a presentar el
1:13:14código en pantalla completa la etiqueta
1:13:17del elemento de la imagen se va a
1:13:20mantener exactamente igual lo único que
1:13:23debemos hacer para convertir esa imagen
1:13:25en un enlace es rodearla con las
1:13:29etiquetas del elemento enlace la
1:13:32etiqueta a la etiqueta de la imagen va a
1:13:36estar rodeada por la etiqueta de
1:13:38apertura
1:13:39y la etiqueta de cierre para ese
1:13:42elemento y vamos a especificar el
1:13:45destino como un atributo
1:13:47aquí lo tenemos
1:13:49digamos que queremos que la imagen nos
1:13:51lleve a áfrica un campo org extras
1:13:53español copiamos y pegamos esa dirección
1:13:56web de nuestro navegador de nuestro
1:13:58browser y lo asignamos como el valor del
1:14:01atributo h breve nota qué
1:14:05aquí estamos creando un enlace ok
1:14:10estamos creando un enlace
1:14:13al rodear la etiqueta de la imagen con
1:14:17la etiqueta de enlace y le estamos
1:14:20diciendo al browser a dónde queremos ir
1:14:23si hacemos clic sobre ese enlace
1:14:25volvemos a cargar la página y ahora
1:14:28puedes ver como el cursor cambia a una
1:14:31manito cuando está sobre la imagen si
1:14:35hacemos clic sobre la imagen vamos
1:14:37directamente áfrica organ punto org es
1:14:39nadie español y podemos volver a nuestra
1:14:43página anterior también todo lo que
1:14:46aprendiste sobre enlaces aplica para
1:14:49este tipo de enlace imágenes que actúan
1:14:52como enlaces puedes abrir los en una
1:14:54pestaña nueva con el atributo target
1:14:57guión bajo like aquí puedes volver a
1:15:01cargar la página y puedes ver que se
1:15:02abre en una pestaña nueva y también
1:15:05puedes agregar el atributo red por
1:15:09seguridad estos valores no operar y no
1:15:11reefer estos dos valores para el
1:15:14atributo real si ponemos esto en
1:15:16pantalla completa puedes verlo más claro
1:15:18que simplemente estamos creando una como
1:15:21lo hacíamos normalmente pero en lugar de
1:15:23texto tenemos dentro del enlace una
1:15:26imagen y todo va a funcionar exactamente
1:15:29igual genial ya sabes cómo crear enlaces
1:15:32a partir de imágenes eso es muy muy
1:15:35importante y es comúnmente usado hoy en
1:15:36día
1:15:43cuando comenzamos a hablar sobre los
1:15:45enlaces en html nombramos un tipo de
1:15:48enlace que es muy útil mientras estás
1:15:51creando la estructura de tu página web
1:15:54los enlaces muertos serían la traducción
1:15:56literal en inglés se llaman the links
1:15:59son enlaces que no llevan a ningún lado
1:16:03simplemente están allí para mostrarnos
1:16:07cómo se vería un enlace en ese lugar
1:16:09específico de la página y luego cuando
1:16:12tengamos el destino podemos simplemente
1:16:15reemplazarlo en el atributo h raf son
1:16:18muy útiles mientras estamos construyendo
1:16:20la página veamos como los puedes crear
1:16:22aquí tenemos dos enlaces uno en el texto
1:16:26imágenes de gatos y otro en la imagen
1:16:28para convertir esos enlaces en enlaces
1:16:31muertos o enlaces que nos llevan a
1:16:33ningún lado
1:16:35simplemente tendríamos que borrar esta
1:16:38dirección de destino y escribir un
1:16:41símbolo de numerar escribir el numeral
1:16:44el hashtag lo reemplazaría mos en ambos
1:16:47enlaces y así el browser no va a saber a
1:16:51dónde debe llevarnos simplemente va a
1:16:53interpretar que el enlace no lleva a
1:16:55ningún lado vamos a volver a cargar la
1:16:57página y si hacemos clic en el enlace
1:17:01simplemente
1:17:03nos abre nuevamente esa página en una
1:17:06nueva pestaña porque estamos indicando
1:17:09aquí con target que queremos que el
1:17:11resultado se abra en una pestaña nueva
1:17:13si no queremos que se abra en una
1:17:16pestaña nueva todavía por ejemplo
1:17:18podemos quitar estos atributos
1:17:20simplemente dejamos hr cargamos otra vez
1:17:24la página y como puedes ver el enlace al
1:17:27hacer clic no hace nada cuando ni
1:17:30siquiera lo estamos abriendo en una
1:17:31pestaña nueva vamos a revertir este
1:17:34cambio que hicimos y vamos a probar la
1:17:36imagen
1:17:38si hacemos clic sobre la imagen abrimos
1:17:40la misma página en una pestaña nueva
1:17:44y también podemos eliminar
1:17:47estos atributos guardamos la página y
1:17:51así al hacer clic sobre la imagen no
1:17:54vamos a ningún lado
1:17:55revertimos el cambio nuevamente para así
1:17:58abrirlo en una pestaña nueva y ahora
1:18:00tenemos nuestros enlaces muertos enlaces
1:18:03que nos llevan a ningún lado eso es muy
1:18:05útil por ejemplo cuando el destino de
1:18:07ese enlace es una página que todavía no
1:18:10has completado o que no has creado o si
1:18:12todavía no estás completamente seguro
1:18:14segura de a dónde debería llevar ese
1:18:17enlace es muy útil durante el proceso de
1:18:20desarrollo web genial ya sabes cómo
1:18:22crear enlaces muertos en html ya
1:18:26cubrimos los tipos principales de
1:18:28enlaces enlaces externos que llevan
1:18:30otras páginas web enlaces dentro de la
1:18:32misma página enlaces con imágenes y
1:18:35enlaces muertos o que no funcionan como
1:18:39tal como enlaces así que vamos a
1:18:41comenzar a ver otro tipo de elementos en
1:18:43html que es muy útil las listas listas
1:18:46ordenadas y listas no ordenadas las
1:18:49veremos en la próxima parte buen trabajo
1:18:52por llegar hasta aquí continuemos
1:18:59comenzamos con las listas no ordenadas
1:19:01cuando creamos una de estas listas vamos
1:19:04a ver viñetas para cada uno de los
1:19:07elementos de la lista por ejemplo vamos
1:19:10aquí abajo de nuestras imágenes a crear
1:19:14una lista
1:19:16enumerando las cosas que los gatos aman
1:19:19y que los gatos odian
1:19:21vamos a crear una lista no ordenada para
1:19:24las cosas que los gatos aman así que
1:19:26vamos a crear aquí un
1:19:28encabezado
1:19:30listas de gatos y luego aquí
1:19:35vamos a crear un párrafo que diga cosas
1:19:38que los gatos aman dos puntos vamos a
1:19:44volver a cargar nuestra página y aquí
1:19:46vemos el texto tú vas a ver este texto y
1:19:49estas imágenes más pequeñas en tu
1:19:51navegador porque yo aquí tengo el zoom
1:19:54en 150 puedes bajarlo o subirlo
1:19:58dependiendo de lo que
1:20:00necesites para ver en este caso para que
1:20:03sea más fácil ver el resultado en
1:20:06dispositivos móviles aumente el zoom a
1:20:09150 ok aclarado esto vamos a continuar
1:20:13con nuestra lista de cosas que los gatos
1:20:15aman
1:20:17para crear una lista no ordenada
1:20:19la clave es usar esta etiqueta este
1:20:22elemento y el l proviene del inglés and
1:20:27other list que significa lista no
1:20:30ordenada
1:20:32cuando creamos este elemento debemos
1:20:34especificar cada uno de los elementos de
1:20:37la lista eso lo hacemos con el elemento
1:20:40l y que en inglés significa list ait en
1:20:44el elemento de la lista en español para
1:20:49cada uno de los elementos de la lista
1:20:51debemos crear una etiqueta de apertura y
1:20:54una etiqueta de cierre de tipo elegí
1:20:57bien esas etiquetas van a estar anidadas
1:21:02o contenidas dentro del elemento de
1:21:04lista no ordenada eso es lo que le dice
1:21:07al browser que es debe colocar viñetas
1:21:10para cada uno de estos elementos
1:21:12ya vas a ver el resultado vamos a
1:21:16escribir
1:21:17lo primero que los datos aman es menta
1:21:20gatuna es sorprendente pero si es una
1:21:22planta que les encantan los gatos puedes
1:21:24investigar más sobre esa planta en
1:21:27internet luego los apuntadores
1:21:30láser
1:21:31y finalmente la lasaña genial ya tenemos
1:21:36nuestra lista también podemos eliminar
1:21:38este espacio esta línea en blanco porque
1:21:42estos dos elementos están relacionados
1:21:45tenemos el título y la lista que
1:21:47corresponde a ese título así que podemos
1:21:50agruparlos lógicamente y no incluir un
1:21:54espacio entre ellos solo en el archivo
1:21:56eso no va a tener ningún impacto en su
1:21:58presentación si cargamos nuevamente la
1:22:01página aquí podemos ver cosas que los
1:22:04gatos aman y los tres elementos menta
1:22:06gatuna apuntador slasher y lasaña por
1:22:09eso es que teníamos la imagen de la
1:22:11lasaña aquí ahora puedes ver el
1:22:13propósito de por qué incluimos la imagen
1:22:15de la lasaña en nuestro proyecto por si
1:22:18tenías curiosidad como la imagen de la
1:22:20lasaña debería estar debajo de esta
1:22:23lista porque el último elemento aquí es
1:22:25lasaña vamos a cambiar su ubicación en
1:22:28lugar de estar después de la imagen del
1:22:30gatito vamos a colocarla después de la
1:22:33lista
1:22:34y puedes ver lo fácil que es hacer
1:22:35cambios en html simplemente copiamos y
1:22:39pegamos este elemento debajo de la lista
1:22:42volvemos a cargar nuestra página y aquí
1:22:45está debajo de la lista de las cosas que
1:22:48los gatos aman exactamente donde la
1:22:50necesitábamos genial y algo que
1:22:53identifica a las listas no ordenadas es
1:22:55el hecho de que aquí tenemos viñetas
1:22:57puedes ver que tenemos viñetas en lugar
1:23:01de números para las listas ordenadas y
1:23:04vamos a tener números en la próxima
1:23:06parte vamos a ver ese tipo de listas así
1:23:09que continuamos
1:23:14cuando creamos una lista ordenada cada
1:23:17uno de los elementos de la lista tiene
1:23:19un número específico veamos ahora vamos
1:23:22a hacer una lista ordenada para las
1:23:25cosas que los datos o bien
1:23:28en este caso vamos a agregar un párrafo
1:23:31que diga cosas que los gatos odian
1:23:35tenemos dos puntos aquí
1:23:38y vamos a crear nuestra lista ordenada
1:23:41la única diferencia con la estructura de
1:23:44la lista no ordenada que tenemos aquí
1:23:47arriba es que la etiqueta en lugar de
1:23:50ser l va a ser o l o l crea un elemento
1:23:56de tipo order list que significa lista
1:23:59ordenada en español dentro de ese
1:24:03elemento vamos a tener un elemento les
1:24:08hay terna l y para cada uno de los
1:24:11elementos de la lista en este caso van a
1:24:15ser tres el primero va a ser
1:24:17tratamientos anti pulgas el segundo va a
1:24:20ser truenos y el tercero
1:24:23sorprendentemente va a ser otros gatos a
1:24:26menos que tengas un gatito que es muy
1:24:28muy sociable otros gatos también es algo
1:24:31que los gatos odian ya tenemos nuestra
1:24:33lista ordenada aquí vamos a dejar un
1:24:35espacio para separar y luego vamos a
1:24:38cargar la página nuevamente aquí puedes
1:24:41ver la lista ordenada cosas que los
1:24:43gatos odian tratamientos anti pulgas
1:24:45truenos y otros gatos ahora en lugar de
1:24:48viñetas vemos números 1 2 y 3 tiene un
1:24:52orden específico en la lista y cada
1:24:54elemento está en su posición específica
1:24:57genial ahora vamos a incluir otra imagen
1:25:00para representar algo que los gatos
1:25:02odian aquí si abrimos el explorador
1:25:05vamos a colocar esto en pantalla
1:25:07completa abrimos el explorador puedes
1:25:10ver que en la carpeta imágenes agregué
1:25:12una imagen llamada gatos punto jpg
1:25:16aquí tenemos la imagen unos lindos
1:25:19gatitos esa imagen la vamos a colocar
1:25:21aquí abajo creamos un elemento de imagen
1:25:25y recuerda el nombre del atributo
1:25:28src es una abreviación de su verse en
1:25:32inglés que significa fuente en español
1:25:34como está dentro de la carpeta imágenes
1:25:36escribimos imágenes y luego datos punto
1:25:40jpg ahora
1:25:43si vemos la página cerramos aquí el
1:25:46explorador luego cargamos la página aquí
1:25:49vemos la imagen de los gatitos
1:25:51exactamente lo que queríamos y podemos
1:25:54agruparlos lógicamente aquí podemos
1:25:57remover este espacio porque tenemos el
1:25:59título la lista de elementos y la imagen
1:26:02que corresponde al último elemento y esa
1:26:05misma estructura la replicamos aquí para
1:26:07nuestra segunda lista genial ya sabes
1:26:10cómo crear listas no ordenadas y listas
1:26:14ordenadas recuerda la única diferencia
1:26:16en su estructura es la etiqueta la
1:26:18etiqueta l crea una lista no ordenada y
1:26:23la etiqueta o l crea una lista ordenada
1:26:26y para cada uno de sus elementos debes
1:26:29crear un elemento de tipo l y
1:26:33genial buen trabajo y ya sabes cómo
1:26:35crear listas en html ahora vamos a
1:26:39comenzar una parte del curso en la que
1:26:41vas a ver varias etiquetas que van a ser
1:26:44útiles para personalizar el formato de
1:26:47texto y eso es exactamente lo que vas a
1:26:49ver en las próximas partes así que
1:26:52continuemos buen trabajo y algo puedes
1:26:55aprender html sólo necesitas entusiasmo
1:26:59constancia y dedicación y si estás
1:27:02viendo el curso sabes que lo tienes
1:27:03sabes que puedes hacerlo continuemos
1:27:11si queremos que parte de nuestro texto
1:27:13se presente en negrita podemos usar la
1:27:16etiqueta strong
1:27:18strong significa fuerte en español
1:27:26vamos a resaltar parte de nuestro texto
1:27:28digamos que queremos que la palabra o
1:27:30diane esté en negrita
1:27:33simplemente vamos a esa palabra en
1:27:36nuestro párrafo y la rodeamos
1:27:38con la etiqueta strong abrimos la
1:27:42etiqueta y luego la cerramos después de
1:27:46el texto la palabra en este caso no
1:27:49vamos a incluir los dos puntos en
1:27:52este elemento strong vamos a
1:27:55excluirlo sólo la palabra odia no si
1:27:59volvemos a cargar la página ahora vemos
1:28:02que obvian se muestra en negrita y todo
1:28:05gracias al elemento oa la etiqueta
1:28:07strong genial ahora veamos cómo puedes
1:28:11hacer qué parte del texto se muestre en
1:28:14letra cursiva en la próxima parte
1:28:22para que parte del texto se muestre en
1:28:24letra cursiva debemos usar la etiqueta
1:28:27m digamos que en esta lista queremos
1:28:31resaltar la palabra aman con letra
1:28:34cursiva
1:28:35primero buscamos ese elemento en nuestro
1:28:38archivo html y decimos aquí aman m y
1:28:43luego la cerramos rodeamos solamente el
1:28:47texto que queremos que esté en cursiva
1:28:49de esta forma ahora si volvemos a cargar
1:28:53la página
1:28:54vemos esta parte del texto en letra
1:28:58cursiva cosa que los gatos aman
1:29:01simplemente con rodear el texto con la
1:29:03etiqueta o el elemento m que se usa para
1:29:07enfatizar partes del contenido
1:29:09genial ya sabes cómo hacer que el texto
1:29:12se muestre en negrita y en cursiva
1:29:14también hay otra opción que puede ser
1:29:17útil para ciertas aplicaciones que es
1:29:21mostrar un texto tachado eso lo vamos a
1:29:23ver en la próxima parte
1:29:29para tachar parte de un texto digamos
1:29:32una palabra tenemos que rodear la
1:29:35palabra con la etiqueta f s viene de la
1:29:39palabra strikes true en inglés que
1:29:42significa tachar vamos a ver si tenemos
1:29:46una lista aquí por ejemplo digamos que
1:29:48en una investigación se descubrió que a
1:29:50los gatos ya no les gusta tanto la
1:29:52lasaña así que vamos a tachar este
1:29:55elemento en la lista pero vamos a tachar
1:29:58los visiblemente no lo vamos a eliminar
1:30:00solamente sino que va a aparecer tachado
1:30:03para eso agregamos este elemento
1:30:08s
1:30:09en nuestro archivo
1:30:12y rodeamos la palabra con las etiquetas
1:30:16seguimos
1:30:18incluyendo el elemento de la lista esta
1:30:22etiqueta en ley pero rodeamos el texto
1:30:25con ese ahora si cargamos nuevamente la
1:30:28imagen vemos el texto tacha exactamente
1:30:33lo que queríamos recuerda la etiqueta es
1:30:35el equivalente a texto tachado genial
1:30:39ahora vamos a ver cómo puedes agregar
1:30:41una línea horizontal a tu página
1:30:44esto puede ser útil para dividir
1:30:45distintas secciones
1:30:52puedes agregar una línea horizontal a tu
1:30:56página web
1:30:59por ejemplo vamos a agregar una línea
1:31:02antes de las listas de gatos aquí en
1:31:05nuestro archivo html
1:31:06buscamos ese elemento lista de gatos
1:31:11antes de ese elemento escribimos la
1:31:14etiqueta hr la tenemos aquí esto crea un
1:31:19elemento que se denomina en inglés
1:31:21horizon to blue horizon
1:31:24que en español se traduciría como una
1:31:27línea horizontal si cargamos la página
1:31:30nuevamente vemos aquí esta línea
1:31:32horizontal podemos cambiar su aspecto
1:31:34también cuando comencemos a trabajar con
1:31:37css pero por el momento vemos cómo se
1:31:41presenta esa línea por defecto pero
1:31:44puedes ver que puede actuar como un
1:31:47separador de las distintas secciones de
1:31:49la página recuerda etiqueta hr es un
1:31:53elemento que no requiere una etiqueta de
1:31:55apertura y de cierre sólo requiere la
1:31:58etiqueta de apertura algo parecido a la
1:32:00etiqueta de imagen que se cierra
1:32:02automáticamente no necesita una etiqueta
1:32:04de cierre bien buen trabajo continúa así
1:32:08ya estamos llegando a la última parte de
1:32:11la sección sobre html del curso en vamos
1:32:16a hablar un poco sobre los formularios y
1:32:19eso es exactamente lo que vas a aprender
1:32:20a hacer en las próximas partes del curso
1:32:23cómo crear estos elementos así que te
1:32:26veo allí
1:32:31para crear un elemento que representa un
1:32:34formulario en nuestra página usamos la
1:32:37etiqueta form form significa formulario
1:32:41en español
1:32:42esta es la etiqueta que usamos aquí si
1:32:45vamos a necesitar para este elemento una
1:32:47etiqueta de apertura y una etiqueta de
1:32:49cierre porque todos los elementos que
1:32:51sean parte de ese formulario van a estar
1:32:54contenidos dentro del elemento form así
1:32:58que debemos intentar los uno de los
1:33:00elementos que podemos tener dentro de un
1:33:02formulario es un campo de input input es
1:33:07un elemento que vamos a usar para
1:33:08obtener un valor una respuesta del
1:33:11usuario por ejemplo si queremos que el
1:33:14usuario escriba una respuesta o ingrese
1:33:17un valor podemos asignar el tipo de
1:33:19input como text ese sería el valor texto
1:33:23significa texto en español vamos a
1:33:26pedirle al usuario que ingrese un cierto
1:33:29texto si vuelvo a cargar la página ahora
1:33:33puedes ver al final de la página un
1:33:36campo que nos permite ingresar texto por
1:33:38ejemplo una ese campo
1:33:42cuando nosotros creemos un botón
1:33:45con el texto enviar de tipo super hornet
1:33:50significa más o menos como enviar vamos
1:33:53a tener estos dos elementos de nuestro
1:33:55formulario
1:33:56la respuesta del usuario va a ser
1:33:58ingresada aquí luego hacemos clic en
1:34:00enviar pero a cual destino es sólo
1:34:03especificamos aquí en la etiqueta de
1:34:05apertura de forma ese valor va a
1:34:09corresponder a action el atributo action
1:34:13tiene un valor correspondiente que es el
1:34:15archivo en el servidor con un nombre
1:34:18específico este atributo action
1:34:21representa la dirección en el servidor
1:34:24de el programa que va a manejar esos
1:34:27datos el archivo que va a manejar esos
1:34:29datos por ejemplo en este caso sería el
1:34:32archivo enviar respuesta en este momento
1:34:36como no tenemos un servidor activo no
1:34:38podemos mostrar exactamente qué va a
1:34:40pasar cuando ingresemos los datos y
1:34:43enviamos nuestras respuestas pero tienes
1:34:46que saber que esta es la dirección del
1:34:48archivo en el servidor vamos a volver a
1:34:51cargar la página y
1:34:53veamos qué ocurre si ahora hacemos clic
1:34:55en enviar
1:34:56vemos que dice que no se pudo acceder al
1:34:58archivo porque porque si ves aquí arriba
1:35:02estamos tratando de ingresar al archivo
1:35:04enviar respuesta ese archivo estaría
1:35:08alojado en el servidor y manejaría las
1:35:10respuestas del usuario en el formulario
1:35:13genial tenemos una estructura un
1:35:16formulario básico podemos agregarle un
1:35:19texto que le indique al usuario qué tipo
1:35:22de valor debe ingresar aquí porque hasta
1:35:24ahora este campo en blanco no es muy
1:35:27explícito si el usuario debe ingresar un
1:35:29valor no va a saber necesariamente que
1:35:32valor ingresar
1:35:33vamos a ver cómo puedes hacer esto en la
1:35:35próxima parte
1:35:42si queremos agregar un texto que le dé
1:35:45una pista al usuario sobre qué valor
1:35:47debe ingresar aquí en un campo de texto
1:35:50usamos un atributo que se llama place
1:35:53holder place water puede ser traducido
1:35:57como un marcador de posición
1:35:59estamos marcando o dándole una pista al
1:36:03usuario de que debe ingresar aquí pero
1:36:05apenas el usuario comienza a escribir
1:36:07ese valor va a desaparecer ese atributo
1:36:10lo debemos agregar al elemento inputs el
1:36:13campo de texto
1:36:15vamos a agregar el atributo place holder
1:36:19y como valor vamos a escribir lo que
1:36:23queremos que se muestre digamos que es
1:36:27la url la dirección web de la foto de tu
1:36:31gato
1:36:33digamos que el formulario nos permite
1:36:36indicar la dirección donde está la foto
1:36:38del gato que se quiere agregar a la base
1:36:40de datos si cargamos la página
1:36:43nuevamente ahora puedes ver ese texto
1:36:46que agregamos el place holder url de la
1:36:48foto de tu gato si hacemos clic todavía
1:36:51se muestra pero al momento que empezamos
1:36:54a
1:36:55ingresar nuestro valor desaparece
1:36:59aparece desaparece aparece y desaparece
1:37:03este atributo play shoulder es muy útil
1:37:05para crear formularios claros y
1:37:08sencillos de entender para el usuario
1:37:10verás cómo puedes hacer que un campo sea
1:37:13obligatorio para enviar un formulario en
1:37:16la próxima parte del curso así que
1:37:18continuemos
1:37:26en muchos casos vamos a necesitar que un
1:37:29formulario contenga ciertos valores que
1:37:33los campos de esos formularios no estén
1:37:35vacíos por ejemplo aquí si tenemos en
1:37:39este campo vacío y lo hemos escrito
1:37:41ningún valor para la dirección web o la
1:37:44ubicación de la foto de tu gato y
1:37:46hacemos clic era enviar igual se va a
1:37:49intentar enviar esa respuesta aunque el
1:37:52campo esté vacío aunque no exista ese
1:37:54valor
1:37:56para evitar esto que puede generar
1:37:58errores y normalmente necesitamos un
1:38:01conjunto mínimo de respuestas
1:38:03simplemente agregamos un atributo
1:38:07llamado big wire este atributo
1:38:11nos permite hacer que ese campo sea
1:38:14requerido sea obligatorio ahora sí
1:38:16volvemos a cargar la página y hacemos
1:38:19clic en enviar vemos este mensaje y es
1:38:22fill out games field por favor complete
1:38:25este campo o por favor llene este campo
1:38:28e ingrese algún valor si escribimos
1:38:31ahora un valor por ejemplo hola si se va
1:38:34a intentar enviar los datos del
1:38:36formulario
1:38:37genial simplemente rico ayer solo esa
1:38:40palabra no necesita ningún valor aunque
1:38:43con incluir esa palabra ese atributo ya
1:38:46estamos indicando que este campo esté
1:38:49input es requerido para enviar el
1:38:51formulario
1:38:52genial ya sabes cómo hacer que un campo
1:38:55sea obligatorio en la próxima parte
1:38:57vamos a ver cómo puedes agregar nuevos
1:39:01elementos al formulario incluyendo
1:39:04botones de radio y casillas de
1:39:06verificación que son muy útiles para
1:39:08recibir una respuesta del usuario darle
1:39:11ya opciones predeterminadas
1:39:13eso lo veremos en las próximas partes
1:39:15del curso así que continuemos
1:39:24vamos a ver un nuevo tipo de elemento
1:39:26input hasta ahora hemos visto solamente
1:39:30el input de tipo texto pero ese no es el
1:39:33único tipo de elementos que podemos
1:39:35crear para nuestros formularios otro
1:39:38elemento importantísimo es el elemento
1:39:41de tipo radio
1:39:43este elemento nos permite crear un botón
1:39:46de radio también llamado un botón de
1:39:49opción
1:39:50alguna vez has visto ese tipo de
1:39:52formulario en el que solo puedes
1:39:54seleccionar una opción y las opciones
1:39:57son como circulitos que puedes
1:39:59seleccionar con el ratón con el + ese
1:40:02tipo de formulario es el que vamos a
1:40:04crear con este tipo de elementos si
1:40:07volvemos a cargar la página luego de
1:40:09hacer este cambio ahora vemos este
1:40:11puntito que tenemos aquí que podemos
1:40:13seleccionar con el cursor pero ese
1:40:16puntito como tal no es muy descriptivo
1:40:17tenemos que agregar el texto que
1:40:21corresponde a ese botón de radio aquí lo
1:40:25tenemos por ejemplo esta opción
1:40:27corresponde a interior
1:40:29luego digamos que queremos crear otro
1:40:32botón de radio para otra opción ya sé lo
1:40:35que estás pensando que no estoy cerrando
1:40:38como tal este elemento este elemento se
1:40:41cierra automáticamente no necesita una
1:40:43etiqueta de cierre y aquí estamos
1:40:45escribiendo un texto que no está
1:40:47encerrado por ninguna etiqueta pero ya
1:40:51va a saber qué es lo que ocurre ya vas a
1:40:53ver cómo vamos a encerrar este texto
1:40:56entre viñetas interior exterior
1:40:59vamos a mantenernos con dos opciones
1:41:01para las opciones de radio y vamos a
1:41:05redactar estas opciones de esta forma tu
1:41:09gato prefiere estar en el interior en
1:41:12lugares techados en tu casa o cerrado o
1:41:14en exterior en el jardín jugando
1:41:18puedes seleccionar algunas de estas dos
1:41:20opciones veamos qué ocurre si volvemos a
1:41:23cargar la página aquí vemos interior y
1:41:26exterior podemos verlos aquí pero qué
1:41:30ocurre si hacemos clic en ambas opciones
1:41:34vemos que ambas se pueden marcar a la
1:41:36vez y eso no es lo que queremos cuando
1:41:39tenemos ese tipo de elemento de input
1:41:41cuando usamos los botones de radio
1:41:44botones de opción queremos que sólo una
1:41:46de esas opciones se marque a la vez si
1:41:49el gato prefiere exteriores no puede
1:41:51preferir interiores así que queremos que
1:41:54se desmarque la opción anterior si
1:41:56cambiamos eso lo podemos lograr con un
1:41:59grupo de botones de radio lo cual vamos
1:42:02a ver en la próxima parte por ahora lo
1:42:06que vamos a lograr con una etiqueta
1:42:08nueva que vamos a ver un elemento nuevo
1:42:11es que cuando se haga clic en el texto
1:42:14también se seleccione el botón que
1:42:17corresponde a esta opción esto es muy
1:42:19útil para dispositivos touch y también
1:42:23para accesibilidad también es más
1:42:25sencillo para nosotros hacer clic en el
1:42:28texto en lugar del botoncito vamos a
1:42:31cargar la página nuevamente para que las
1:42:33opciones no estén seleccionadas y veamos
1:42:36qué ocurre si hacemos clic en el texto
1:42:38nada ocurre no se selecciona la opción
1:42:42el botón correspondiente
1:42:44como podemos lograrlo con una etiqueta
1:42:47llamada playbook ese tipo de elementos
1:42:50lay bone
1:42:51literalmente significa etiqueta en
1:42:54español pero hay una sutil diferencia en
1:42:57inglés entre tag y leiva así que vamos a
1:43:01referirnos a ella como leiv on vamos a
1:43:04usar la etiqueta ley book y vamos a
1:43:07rodear el contenido
1:43:10de ese botón de radio toda la etiqueta
1:43:14input todo el elemento importe y el
1:43:16texto va a estar rodeado por ley vol
1:43:21tenemos la etiqueta de apertura y
1:43:23tenemos la etiqueta de cierre bien vamos
1:43:27a volver a cargar la página y veamos si
1:43:29esto hizo algún cambio ahora como puedes
1:43:32ver cuando hacemos clic en el texto
1:43:36ya se marca la opción correspondiente
1:43:39simplemente con rodear los con una
1:43:41'llave' o con un elemento leyva con
1:43:43exterior esto no ocurre porque no está
1:43:46rodeado con ley boom vamos a rodearlo
1:43:49con ley wood y veamos el cambio volvemos
1:43:52a cargar la página y aquí lo podemos ver
1:43:55todavía no hemos solucionado ese detalle
1:43:58de solo marcar una opción a la vez pero
1:44:00si estamos mejorando la interacción de
1:44:02nuestro formulario con el usuario algo
1:44:05útil que debes conocer es que podemos
1:44:08relacionar aún más la etiqueta con el
1:44:10botón de radio a través de el atributo
1:44:13for a la etiqueta le podemos agregar un
1:44:16atributo for cuyo valor debe ser igual a
1:44:19lighting de el elemento impone a quien
1:44:24permítanme poner esto en pantalla
1:44:26completa para que lo veamos con más
1:44:28detalle
1:44:30a este botón de radio que tenemos aquí
1:44:32le estamos asignando un haití y un
1:44:35identificador único cuyo valor es
1:44:37interior porque corresponde de su opción
1:44:40interior le vamos a asignar el valor
1:44:42interior al atributo for y eso
1:44:45básicamente lo que hace es conectar esa
1:44:48opción con la etiqueta vamos a hacer lo
1:44:52mismo para la segunda opción en este
1:44:54caso vamos a escribir exterior
1:44:56escribimos el haití y todo se mantiene
1:44:59exactamente igual si volvemos a cargar
1:45:02la página aquí vemos interior y exterior
1:45:04y todo funciona perfectamente genial ya
1:45:08podemos crear botones de radio en la
1:45:11próxima parte vamos a solucionar ese
1:45:13problemita que nos permitía seleccionar
1:45:16más de una opción a la vez así que
1:45:18veamos cómo podemos hacer esto en la
1:45:20próxima parte continuemos
1:45:27veamos cómo podemos hacer que solo se
1:45:30marque una opción por cada grupo de
1:45:32botones de radio para eso vamos a crear
1:45:35exactamente lo que acabo de mencionar un
1:45:37grupo de botones de radio cuando creamos
1:45:40un grupo de botones de radio el browser
1:45:43va a saber que esos botones o esas
1:45:46opciones pertenecen a la misma categoría
1:45:48digamos al mismo grupo de elementos y
1:45:52que solo uno puede estar marcado a la
1:45:54vez para lograr esto solo tenemos que
1:45:57agregar un atributo a el elemento input
1:46:01de tipo radio ese atributo se llama name
1:46:05aquí lo podemos ver name name que
1:46:09significa nombre en español en este caso
1:46:13digamos que se va a llamar ese grupo
1:46:16interior exterior
1:46:18todos los elementos input de tipo radio
1:46:20que tengan este mismo nombre van a
1:46:24pertenecer al mismo grupo así que solo
1:46:27uno va a poder estar marcado a la vez
1:46:30aquí vamos a agregarlo también para la
1:46:34segunda opción y volvemos a cargar la
1:46:37página
1:46:38vemos interior exterior y ahora si
1:46:40hacemos clic en una opción y luego en
1:46:42otra opción vemos como la anterior se
1:46:45desmarca porque sólo una puede estar
1:46:48marcada a la vez
1:46:50genial ya estamos logrando lo que
1:46:53queremos para este tipo de elemento en
1:46:55el formulario buen trabajo
1:47:03hasta este momento los elementos en
1:47:06nuestra página se muestran en ciertos
1:47:10casos en la misma línea por ejemplo aquí
1:47:13si vamos a la parte final de nuestra
1:47:15página tenemos los botones de radio
1:47:18botones de opción en la misma línea que
1:47:21el campo de texto y también si
1:47:25presentamos nuestra página en pantalla
1:47:28completa vemos que el botón de enviar
1:47:30también está en la misma línea ciertos
1:47:33elementos como las imágenes y las listas
1:47:35si se presentan en sus propias líneas
1:47:38individuales pero no siempre es el caso
1:47:41cómo podemos especificar en html que
1:47:45queremos que cada uno de estos elementos
1:47:47esté en su propia línea lo podemos hacer
1:47:50con la etiqueta br veamos como la
1:47:53podemos usar si queremos que estos
1:47:56botones de radio estén en líneas
1:47:58separadas
1:47:59lo primero que hacemos es ir a ese
1:48:02elemento en html interior
1:48:06y en luego entre ese elemento y el
1:48:09siguiente
1:48:10agregamos a este elemento
1:48:13br viene de la palabra en inglés break
1:48:16que significa como romper o separar los
1:48:19elementos
1:48:20representa un salto de línea en inglés
1:48:23un line break donde una línea termina y
1:48:27comienza a otra si volvemos a cargar la
1:48:30página
1:48:31puedes ver que ahora cada uno de los
1:48:33botones de radio está en una línea
1:48:35diferente pero se sigue cumpliendo el
1:48:37hecho de que sólo una opción puede estar
1:48:39marcada a la vez vamos a agregar otro
1:48:43salto de línea otra línea nueva entre
1:48:46este botón de radio y el campo de texto
1:48:49que tenemos aquí si cargamos nuevamente
1:48:52la página vemos que cada uno está en su
1:48:55línea correspondiente y finalmente
1:48:58también podemos agregar otra línea nueva
1:49:00antes del botón
1:49:03y aquí lo tenemos cada uno en su línea
1:49:06correspondiente pero no tenemos que
1:49:09dedicar en nuestro archivo una línea
1:49:11completa para esta etiqueta podemos
1:49:13simplemente agregarla al final del
1:49:15elemento y eso va a indicar también que
1:49:19queremos que se inserte una línea nueva
1:49:22antes del próximo elemento puedes ver
1:49:25que el resultado es exactamente el mismo
1:49:27genial ya sabes cómo puedes agregar una
1:49:31línea nueva en la presentación de tu
1:49:33página para tener un elemento en cada
1:49:36línea recuerda la etiqueta es br y es
1:49:39una etiqueta que no necesita una
1:49:42etiqueta de apertura y una etiqueta de
1:49:44cierre solo tenemos la etiqueta de
1:49:46apertura
1:49:52vamos a ver otro tipo de elementos que
1:49:54podemos agregar a nuestro formulario las
1:49:56casillas de verificación donde vamos a
1:49:59ver los check mark o los símbolos que
1:50:01usamos para marcar que algo está
1:50:03completado o correcto y podemos
1:50:06seleccionar varias opciones de esa lista
1:50:09de casillas de verificación en inglés
1:50:12una casilla de verificación se denomina
1:50:14check box vamos a agregar estos
1:50:17elementos aquí en nuestro formulario
1:50:19donde tenemos los botones de radio para
1:50:23separar en nuestro archivo visualmente
1:50:26dónde está cada tipo de elementos vamos
1:50:29a agregar comentarios botones de radio
1:50:34luego podemos
1:50:37referirnos a esta parte como texto y
1:50:40botón enviar
1:50:43aquí puedes ver cómo podemos usar los
1:50:45comentarios también para aclarar las
1:50:48distintas partes de nuestra estructura y
1:50:51antes del texto y el botón enviar vamos
1:50:54a agregar nuestras casillas de
1:50:56verificación usamos el mismo tipo de
1:51:00elementos que hemos estado usando hasta
1:51:02ahora en fort pero ahora el tipo el
1:51:04valor del atributo tipo va a ser check
1:51:08box
1:51:10si cargamos la página nuevamente aquí
1:51:13puedes ver que apareció una casilla de
1:51:15verificación
1:51:16igual que con los botones de radios
1:51:19botones de opción tenemos que agregar
1:51:21texto para indicarle al usuario a qué
1:51:24corresponde esta opción
1:51:26digamos que queremos saber más sobre el
1:51:29gatito si es
1:51:32cariñoso
1:51:36perezoso
1:51:38y si es enérgico no necesariamente una
1:51:41sola de las opciones es verdadera el
1:51:43gasto puede ser cariñoso y perezoso o
1:51:46perezoso y enérgico o cualquier
1:51:49combinación de estas tres
1:51:50características
1:51:51así que las casillas de verificación van
1:51:54a permitirle al usuario seleccionar
1:51:56varias opciones si es necesario vamos a
1:51:59cargar nuevamente la página y vemos las
1:52:02casillas de verificación con su texto
1:52:05correspondiente cariñoso perezoso y
1:52:07enérgico pero lo mismo ocurre con las
1:52:10casillas de verificación que con los
1:52:12botones de radio si seleccionamos el
1:52:15texto o hacemos clic sobre el texto la
1:52:17casilla correspondiente no se marca y
1:52:20eso es exactamente lo que queremos así
1:52:23que tenemos que hacer lo que hicimos con
1:52:25la etiqueta tenemos que agregar play
1:52:29bone igual que hicimos con los botones
1:52:32de radio debemos rodear cada uno de
1:52:35estos elementos input y su texto con un
1:52:38elemento ley
1:52:41aquí tomamos la etiqueta de cierre
1:52:45exactamente igual
1:52:47playbook aquí al inicio y tomamos la
1:52:52etiqueta de cierre
1:52:56y llevamos la etiqueta de cierre al
1:52:58final ahora si volvemos a cargar la
1:53:01página vemos aquí que si hacemos clic en
1:53:05el texto se marca la casilla
1:53:07correspondiente
1:53:08exactamente lo que queríamos
1:53:11igualmente deberíamos especificar el
1:53:14atributo for y el aire y de cada una de
1:53:16las casillas de verificación for
1:53:20correspondería en este caso a cariñoso
1:53:25vamos a usar una n en lugar de la ella
1:53:28también podrías usar ella pero como no
1:53:31hemos usado caracteres que no sean
1:53:33estándar en inglés hasta el momento en
1:53:35la parte de html vamos a continuar con
1:53:39este estilo tenemos cariñoso y aquí en
1:53:42input tendríamos una id y cariñoso
1:53:46fort le digamos perezoso y luego aquí
1:53:50tendríamos una id y que dijera perezoso
1:53:53y aquí tendríamos for
1:53:56enérgico no incluimos el acento y
1:54:01enérgico ok
1:54:04ya tenemos estos atributos y lo único
1:54:08que nos falta es agregarle un atributo a
1:54:10estas casillas de verificación para
1:54:13indicar que pertenecen al mismo grupo en
1:54:16este caso el comportamiento no va a
1:54:18cambiar como en los botones de radio
1:54:20porque igual vamos a poder seleccionar
1:54:22cuántas opciones sean necesarias pero si
1:54:26las va a como agrupar si tienen el mismo
1:54:30valor del nombre name personalidad
1:54:34ok name personalidad le agregamos este
1:54:38tributo a todos los elementos input
1:54:41estamos agregando ese atributo al
1:54:44elemento input ok no al equipo el equipo
1:54:49de está aquí input está aquí genial
1:54:53ya tenemos nuestras casillas de
1:54:55verificación y están funcionando
1:54:56correctamente
1:54:58algo muy útil también para la
1:55:00experiencia del usuario sería marcar una
1:55:03opción por defecto tanto para los
1:55:06botones de radio como para las casillas
1:55:08de verificación que cuando el usuario
1:55:10ingrese a la página
1:55:11vea una de las opciones ya marcada como
1:55:14lo podemos hacer con el atributo check
1:55:17en la próxima parte veremos cómo puedes
1:55:20usar este atributo en el elemento impone
1:55:23así que te veo allí en la próxima parte
1:55:31el atributo select que significa marcado
1:55:35en inglés nos permite marcar algunas de
1:55:37estas opciones para cada uno de los
1:55:40grupos de casillas de verificación o de
1:55:42botones de radio
1:55:45simplemente tenemos que agregar la
1:55:47palabra check aquí al elemento imputa
1:55:52únicamente for es el único que no
1:55:54pertenece a input todos los demás
1:55:57pertenecen a input light y el tipo el
1:56:00nombre y el atributo chat que estamos
1:56:03agregando aquí en este caso estamos
1:56:06diciendo que por defecto vamos a
1:56:08seleccionar la opción cariñoso y también
1:56:12vamos a seleccionar la opción interior
1:56:15por defecto para los botones de radio
1:56:19veamos vamos aquí a quitar el espacio y
1:56:23si volvemos a cargar la página vemos las
1:56:27opciones marcadas por defecto interior y
1:56:30cariñoso exactamente lo que queríamos
1:56:33recuerda que check se agrega al elemento
1:56:36input no al leyton se agrega a input que
1:56:41corresponde a la casilla o al botón que
1:56:44va a estar marcado por defecto genial ya
1:56:48sabes marcar una de estas opciones por
1:56:49defecto
1:56:50en la próxima parte vamos a ver cómo
1:56:53puedes usar un atributo que va a enviar
1:56:55un valor específico al servidor cuando
1:56:58enviamos en los datos del formulario así
1:57:02que te veo la próxima parte
1:57:10un atributo importante cuando estás
1:57:12creando botones de radio o casillas de
1:57:15verificación es el atributo value que
1:57:18significa valor en español ese atributo
1:57:22especifica qué valor se va a enviar al
1:57:24servidor cuando enviemos la respuesta a
1:57:28las respuestas del usuario porque si no
1:57:31especificamos el valor el servidor va a
1:57:34recibir un valor genérico de que alguna
1:57:36de las opciones de ese grupo fue
1:57:38seleccionado pero cómo va a saber el
1:57:41servidor si esa opción fue interior o
1:57:43exterior o si se seleccionó perezoso
1:57:46cariñoso o cualquier combinación de
1:57:49opciones lo único que sabe es que hubo
1:57:51cierta opción que fue seleccionada no su
1:57:54valor como tal y para eso está este
1:57:57atributo por ejemplo digamos que aquí
1:58:00vamos a colocar esto en pantalla
1:58:03completa
1:58:04digamos que queremos especificar el
1:58:06valor de interior en este caso valor
1:58:10sería interior
1:58:13valor sería interior
1:58:16genial eso le diría al servidor
1:58:19que el valor seleccionado para el grupo
1:58:24interior exterior fue interior si esta
1:58:28opción está seleccionada si no vamos a
1:58:32ver vamos a asignarle valor exterior a
1:58:35la segunda opción y así el servidor va a
1:58:39poder recibir esta información de este
1:58:41grupo se seleccionó tal opción este
1:58:44valor y vamos a poder trabajar con ese
1:58:47valor en el servidor para las casillas
1:58:49de verificación también podemos
1:58:51especificar un valor
1:58:54cariñoso
1:58:56perezoso
1:58:59enérgico y así ya le estamos diciendo al
1:59:02servidor cuál fue la opción seleccionada
1:59:04por el usuario la opción o las opciones
1:59:07porque en las casillas de verificación
1:59:09podemos seleccionar varias alternativas
1:59:12otra forma de presentar el código aquí
1:59:16como ya ves que se está volviendo un
1:59:18poco más complicado de leer sería
1:59:21presentar el elemento input de esta
1:59:25forma con esta estructura como si fuera
1:59:29parte de la etiqueta ley bold y si el
1:59:34texto quedaría aquí pero estaría rodeado
1:59:36por el elemento ley bold y como puedes
1:59:40ver es más fácil de leer
1:59:43también podemos agregar una línea nueva
1:59:47un salto de línea entre las casillas de
1:59:49verificación hagámoslo con la etiqueta o
1:59:53el elemento br vamos a insertar una
1:59:56línea entre cada una de estas opciones y
1:59:58también una al final para separar el
2:00:01campo del texto aquí de esta forma
2:00:03puedes ver cómo es más conciso el código
2:00:06y también es más fácil de leer cuando ya
2:00:08la estructura se vuelve más complicada
2:00:10ya sabes el propósito de este atributo
2:00:14valor es el valor que va a recibir el
2:00:16servidor si esa opción fue seleccionada
2:00:19para ese grupo de casillas o de botones
2:00:22en particular en la próxima parte vamos
2:00:24a ver un tipo de elemento muy muy muy
2:00:28importante en el desarrollo web te
2:00:30prometo que es uno de los elementos más
2:00:32importantes que vas a usar en el
2:00:34desarrollo web el elemento dif lo vamos
2:00:36a ver en la próxima parte
2:00:44el elemento de efe es uno de los
2:00:46elementos más importantes en desarrollo
2:00:49web porque es muy versátil es un
2:00:51contenedor que podemos usar para
2:00:53cualquier propósito es un contenedor
2:00:56genérico digámoslo así lo usamos para
2:00:59crear estructuras más complejas en las
2:01:02páginas web sirven para simplemente
2:01:05actuar como un contenedor que podemos
2:01:07también personalizar cuando empezamos a
2:01:09trabajar con css y ese es uno de sus
2:01:12principales usos vamos a crear un pib
2:01:16que contenga las listas de gatos
2:01:20ambas listas las cosas que los gatos
2:01:23aman y las cosas que los gatos o bien
2:01:25van a estar como agrupadas dentro del
2:01:28mismo contenedor este contenedor que
2:01:31tenemos aquí el tiff tenemos una
2:01:33etiqueta de apertura y una etiqueta de
2:01:36cierre la etiqueta de apertura va a
2:01:38estar antes de esta parte este párrafo
2:01:41cosas que los gatos aman y luego vamos a
2:01:45cerrar ese contenedor antes de la imagen
2:01:48de gatos que iba a estar aquí al mismo
2:01:51nivel que la imagen seleccionamos todo
2:01:54lo que está en el medio
2:01:57lo que se va a estar dentro de ese
2:01:59contenedor y lo intentamos un nivel más
2:02:03hacia la derecha así estamos diciendo
2:02:08visualmente estamos indicando
2:02:10visualmente que todos estos elementos
2:02:14pertenecen a este contenedor a este día
2:02:17que tenemos aquí si aplicamos por
2:02:20ejemplo un estilo a este tipo ese estilo
2:02:23con css esa configuración de la
2:02:26presentación de los elementos va a
2:02:29aplicar para todos estos elementos que
2:02:31tenemos aquí y ese es el principal
2:02:34propósito de por qué usamos un 10 en
2:02:37html vamos a usarlo muy muy
2:02:40frecuentemente pero en este caso si
2:02:44volvemos a cargar la página puedes ver
2:02:46quién no hubo cambio simplemente estamos
2:02:49agrupando todo este contenido bajo un
2:02:52mismo contenedor pero ese contenedor en
2:02:54este momento es invisible porque no le
2:02:57estamos asignando ninguna propiedad que
2:02:59lo haga visible como un color de fondo o
2:03:02como
2:03:03cierto tamaño pero con css si vamos a
2:03:07poder hacerlo y vas a ver lo poderoso
2:03:09que pueden ser bien ya sabes para qué
2:03:11usamos div y cuál es su etiqueta
2:03:14correspondiente
2:03:19otro elemento importante que quizás
2:03:22quieras agregar a tu página web es un
2:03:25pie de página podemos agregar un pie de
2:03:27página aquí y yendo al final de nuestra
2:03:29estructura
2:03:30luego de maine porque porque el pie de
2:03:35página no es parte del contenido
2:03:37principal de nuestra página así que no
2:03:40debería estar dentro de el elemento
2:03:43principal el elemento main debería estar
2:03:46luego de maine
2:03:47tenemos para eso para crear un pie de
2:03:50página una etiqueta específica un
2:03:52elemento que se llama führer führer
2:03:55significa en español pie de página
2:03:57dentro del fútbol podemos incluir un
2:04:00párrafo por ejemplo sin
2:04:03derechos de autor
2:04:07baker cam punto org
2:04:10bien ahí tenemos nuestro párrafo en el
2:04:14pie de página
2:04:16vamos a volver a cargar la página y aquí
2:04:19vemos el texto podemos agregar un enlace
2:04:23aquí y áfrica orcam punto org
2:04:29para eso ya sabes cómo crear un enlace
2:04:31usamos la etiqueta
2:04:34de apertura escribimos la etiqueta de
2:04:37cierre aquí tenemos el enlace y tenemos
2:04:40que especificar la referencia vamos a
2:04:43colocar esto en pantalla completa para
2:04:45tener una mejor perspectiva de la
2:04:48estructura aquí lo tenemos
2:04:51nos va a llevar a free corgan punto org
2:04:54slayer español en este caso podríamos
2:04:57dejarlo ha sido también podríamos
2:04:59indicar que se debería abrir en una
2:05:01pestaña nueva
2:05:03pero vamos a cargar la página y aquí
2:05:06vemos el enlace a áfrica punto org ya
2:05:09sabes cómo hacer que el enlace se abre
2:05:12en una pestaña nueva así que si quieres
2:05:14puedes practicar con este enlace pero no
2:05:17te parece que el texto está un poco
2:05:19grande para hacer un pie de página
2:05:21el texto tiene el mismo tamaño que el
2:05:24texto principal de la página para
2:05:27indicar que el texto debería ser de un
2:05:29tamaño más pequeño usamos una etiqueta
2:05:31específica un elemento específico que
2:05:34nos permite decir el browser que el
2:05:36texto debe ser más pequeño vamos a ver
2:05:39cómo podemos hacer esto en la próxima
2:05:41parte
2:05:46esta etiqueta que nos permite hacer que
2:05:48el texto sea más pequeño se representa
2:05:51con small small en español significa
2:05:56literalmente pequeño vamos a
2:05:59agregar esa etiqueta aquí en el texto
2:06:03que queremos que sea más pequeño dentro
2:06:06de el párrafo dentro de la etiqueta del
2:06:10párrafo estamos haciendo que este texto
2:06:12sea más pequeño incluyendo el enlace
2:06:16puedes ver cómo vamos como creando una
2:06:18jerarquía de todas estas etiquetas
2:06:21anidadas vamos a volver a cargar la
2:06:24página y aquí vemos que el texto ahora
2:06:28es más pequeño exactamente lo que
2:06:30buscábamos para el pie de página genial
2:06:33ya sabes que puedes usar este elemento y
2:06:35esta etiqueta es mono cuando lo
2:06:37necesites es muy útil para un pie de
2:06:39página
2:06:45y finalmente para culminar la parte del
2:06:49curso sobre html vamos a hablar sobre
2:06:53head recuerda que hablamos un poquito
2:06:55sobre head cuando comenzamos a crear
2:06:58nuestro archivo html
2:06:59head normalmente lo escribimos antes de
2:07:03vori vori es todo lo que vamos a ver en
2:07:06la estructura de la página y head
2:07:08contiene lo que normalmente llamamos
2:07:11verdadera
2:07:14y los elementos que actúan detrás de
2:07:16escenas los elementos que no vemos pero
2:07:19que son esenciales para que la página
2:07:21funcione correctamente por ejemplo si
2:07:24creamos un archivo css o un archivo
2:07:26javascript y necesitamos incluirlo en
2:07:29nuestra página aquí escribiríamos el
2:07:32enlace dentro de head también si
2:07:35queremos personalizar el título de la
2:07:37página lo que se muestra aquí en esta
2:07:40pestaña que normalmente está
2:07:42personalizado en las páginas web que
2:07:45vemos en internet podemos hacerlo con el
2:07:49elemento iron título este elemento con
2:07:53su etiqueta de apertura y de cierre
2:07:55personaliza el título de la página como
2:07:58vemos aquí app de gatos los títulos
2:08:02descriptivos y detallados son
2:08:06un factor importante para la
2:08:07optimización del motor de búsqueda es en
2:08:11inglés search engine optimization
2:08:13así que se recomienda escribir títulos
2:08:16detallados porque ayudan a los motores
2:08:18de búsqueda a conseguir tu página web
2:08:20también y el título también es muy útil
2:08:23para la impresión inicial del usuario
2:08:25cuando está ingresando a la página ese
2:08:28es el propósito principal de head todos
2:08:30los elementos que actúan detrás de
2:08:33escenas el más visible de todos ellos es
2:08:36el título que podemos verlo aquí en la
2:08:38pestaña del navegador pero los demás
2:08:40actúan como detrás de escena ese es el
2:08:43propósito de g y siempre head y parís
2:08:46deben estar dentro del elemento raíz de
2:08:49la etiqueta html
2:08:52genial ahora comencemos con la parte del
2:08:55curso sobre css vas a aprender cómo
2:08:58podemos combinar ambos archivos para
2:09:02personalizar el aspecto de la página tv
2:09:05h
2:09:07buen trabajo ya completaste la primera
2:09:10mitad del curso y aprendiste los
2:09:12fundamentos de html ahora vamos a
2:09:15combinar ese conocimiento con css vamos
2:09:19a comenzar a ver los fundamentos de css
2:09:22recordemos que el inglés css significa
2:09:26cascading stylesheets
2:09:28estados ships significaría en español
2:09:31como hojas de estilo y cascading
2:09:33significa que esos estilos van a caer en
2:09:36cascada así que en español se traducen
2:09:39como hojas de estilo en cascada
2:09:44hasta ahora en nuestro archivo html
2:09:47hemos estado definiendo la estructura y
2:09:49el contenido de la página hemos incluido
2:09:51los títulos los contenedores las
2:09:54imágenes pero no hemos especificado en
2:09:57realidad cómo queremos que esos
2:09:58elementos se muestren en el resultado
2:10:01final para eso vamos a agregar un
2:10:04archivo css en ese archivo nosotros
2:10:07vamos a especificar el estilo de los
2:10:10elementos que tenemos en nuestro archivo
2:10:13html
2:10:14en html definimos la estructura de la
2:10:17página y su contenido y en css definimos
2:10:20el estilo
2:10:22css es un lenguaje basado en reglas
2:10:26vamos a trabajar con reglas y esas
2:10:29reglas determinarán el estilo que se
2:10:32aplicará a un elemento oa un grupo de
2:10:35elementos
2:10:36genial comencemos la segunda parte del
2:10:38curso viendo cómo podemos escribir ese
2:10:41conjunto de reglas en css tenemos tres
2:10:45opciones y las vamos a ver en la próxima
2:10:47parte
2:10:53tenemos tres opciones distintas para
2:10:55escribir nuestro conjunto de reglas el
2:10:58css las tres opciones son escribir
2:11:01estilos en línea usar un bloque style o
2:11:05crear un archivo de tipo css para
2:11:08escribir todas nuestras reglas de estilo
2:11:10en ese archivo
2:11:12veamos la primera opción estilos en
2:11:15línea si escogemos usar esta opción el
2:11:18estilo que vamos a asignarle a un
2:11:22elemento se añade directamente a la
2:11:25etiqueta de apertura de ese elemento en
2:11:28el archivo html
2:11:30vamos a especificar cómo queremos que
2:11:33ese elemento html se vea en el navegador
2:11:36en el browser pero vamos a especificar
2:11:39los en la etiqueta de apertura aquí
2:11:42tenemos un ejemplo tenemos un título un
2:11:45encabezado con la etiqueta o el elemento
2:11:48h2 y aquí puedes ver que estamos
2:11:51especificando un estilo en español está
2:11:54yo significa estilo y dentro de las
2:11:57comillas estamos especificando que
2:11:59queremos que el color de este texto sea
2:12:04azul blue en inglés en español es azul
2:12:07nota que estamos incluyendo esta
2:12:10información como un atributo en la
2:12:13etiqueta de apertura del encabezado
2:12:16básicamente en eso consiste en los en
2:12:19línea esta es la primera opción nuestra
2:12:22segunda opción es usar elementos style
2:12:25cuando usamos está el que significa
2:12:27estilo en español añadimos ese elemento
2:12:30en el elemento head de nuestro archivo
2:12:34html
2:12:35y dentro de ese elementos tallos
2:12:38describimos el estilo que queremos
2:12:40asignarle a los elementos de nuestra
2:12:43página web
2:12:44básicamente agrupamos todas esas reglas
2:12:47bajo un mismo elemento en lugar de
2:12:50hacerlo individualmente elemento por
2:12:53elemento en su etiqueta correspondiente
2:12:55vamos a agrupar todas esas reglas en un
2:12:58mismo bloque
2:12:59aquí tenemos un ejemplo tenemos head
2:13:02aquí con su etiqueta de apertura y de
2:13:04cierre y dentro de head tenemos este
2:13:07elemento está en su etiqueta de apertura
2:13:10y su etiqueta de cierre y dentro de ese
2:13:13elemento tenemos algo que se llama un
2:13:15selector css
2:13:18esto nos permite decir que todos los
2:13:22títulos son los encabezados de nivel 2
2:13:24que tengan esta etiqueta
2:13:27deberían tener color azul vamos a
2:13:30repasar todos estos elementos de la
2:13:32sintaxis de css durante el curso pero
2:13:36solo quiero que vayas viendo las
2:13:37diferencias entre las tres opciones que
2:13:39estamos presentando antes lo hacíamos
2:13:42individualmente la etiqueta de apertura
2:13:44ahora estábamos refiriéndonos en forma
2:13:46general por ejemplo a cualquier
2:13:48encabezado de nivel 2 y decimos que debe
2:13:51tener color azul y finalmente nuestra
2:13:54tercera opción es crear un archivo css
2:13:58en esta opción creamos un archivo de
2:14:01tipo css con esta extensión para definir
2:14:04el estilo de la página básicamente vamos
2:14:08a tener un archivo html con la
2:14:10estructura y el contenido de la página y
2:14:13vamos a crear un archivo css que va a
2:14:16contener todas esas reglas
2:14:18y lo que vamos a hacer es básicamente
2:14:20vincular el archivo css con el archivo
2:14:24html
2:14:25así cuando accedemos a la página
2:14:28automáticamente vamos a poder usar las
2:14:30reglas de estilo que tenemos en este
2:14:32archivo y se van a aplicar a los
2:14:34elementos html
2:14:37por eso esta opción es recomendado
2:14:39porque estamos creando un archivo
2:14:41separado que es mucho más fácil de
2:14:43mantener y expandir también bien como ya
2:14:47sabes las tres opciones que podemos usar
2:14:49comencemos a ver ejemplos en nuestro
2:14:52editor de código
2:14:58aquí tenemos nuevamente en nuestra
2:15:01aplicación de gatos con la que hemos
2:15:03estado trabajando durante el curso y
2:15:05ahora vamos a ver cómo podemos agregar
2:15:08un estilo en línea en
2:15:11html usando css cuándo agregamos un
2:15:15estilo en línea básicamente vamos al
2:15:17archivo html
2:15:19y decimos cuál es el elemento que quiero
2:15:23personalizar por ejemplo digamos que
2:15:25quiero cambiar el color del texto de
2:15:29este título que dice app de gatos lo
2:15:32primero que debo hacer es identificar
2:15:34cuál es el elemento al cual me refiero
2:15:37en html este sería el elemento en mi
2:15:41página
2:15:42h2 voy a la etiqueta de apertura y en la
2:15:47etiqueta de apertura voy a agregar un
2:15:49atributo llamado style estilo
2:15:52esto me va a permitir
2:15:54especificar ciertas propiedades
2:15:58css para ese elemento entre comillas
2:16:02debemos especificar qué propiedad quiero
2:16:04personalizar en este caso es el color
2:16:07del texto
2:16:09esta es una propiedad css que nos va a
2:16:12permitir cambiar o personalizar el color
2:16:15del texto qué color queremos asignar
2:16:18bueno digamos azul blue
2:16:21tenemos una amplia gama de colores y
2:16:24también una parte del curso va a estar
2:16:26dedicada a cómo puedes escoger colores
2:16:29específicos en css pero por ahora vamos
2:16:33a escribir palabras específicas que se
2:16:35refieren a colores que ya están
2:16:36predeterminados en css para elementos
2:16:40html
2:16:42una vez que escribimos esto también
2:16:43vemos una cajita que nos muestra el
2:16:46color esto ocurre en visual studio com
2:16:48no necesariamente en todos los editores
2:16:51de código vas a ver esto
2:16:53y puedes también escoger otros colores
2:16:56en esta pantalla genial vamos a guardar
2:16:59el archivo y volvemos a cargar la página
2:17:01y aquí vemos el título en color azul
2:17:05exactamente lo que esperábamos
2:17:08felicitaciones acabas de escribir tu
2:17:11primer estilo en línea en css este es tu
2:17:15inicio al mundo de css así que
2:17:18continuemos viendo nuestro siguiente
2:17:20tema ya sabes cómo agregar una estilo en
2:17:22línea este formato
2:17:25aplica para cualquier estilo que quieras
2:17:27asignarle a tu elemento todo lo que vas
2:17:30a ver de ahora en adelante cualquier
2:17:32propiedad con la que vamos a trabajar
2:17:34puedes asignar la también como un estilo
2:17:37en línea que es simplemente aquí
2:17:39escribes la propiedad seguida de dos
2:17:42puntos normalmente un espacio y luego el
2:17:46valor de esa propiedad recuerda que el
2:17:49nombre del atributo es style y en
2:17:52español significa estilo
2:17:54ahora vamos a ver en la próxima parte
2:17:56cómo puedes especificar esto mismo en un
2:18:00bloque style dentro del elemento head la
2:18:04segunda opción que vimos en las
2:18:05diapositivas así que te espero' allí
2:18:14aquí tenemos nuestro estilo en línea
2:18:16pero si en lugar de eso queremos usar
2:18:18nuestra segunda opción el elemento start
2:18:21o simplemente tenemos que borrar
2:18:26ese estilo en línea y aquí en nuestro
2:18:30elemento
2:18:32en este caso va a ser debajo de 0
2:18:35escribimos style vamos a colocarlo aquí
2:18:39más grande para que puedas verlo con más
2:18:40detalle tenemos esta área y dentro de
2:18:44esta el vamos a especificar queremos que
2:18:47los elementos de tipo h 2 este elemento
2:18:51que tenemos aquí
2:18:53tenga un color específico para eso luego
2:18:57de especificar el tipo de elementos
2:19:00con llaves
2:19:02vamos a rodear el conjunto de
2:19:04propiedades y los valores que queremos
2:19:06asignarles en este caso queremos que el
2:19:10color de ese elemento sea azul y aquí lo
2:19:14tenemos al final de la línea escribimos
2:19:17un punto y coma eso es importante
2:19:19esta es la estructura básica de una
2:19:22regla en css tenemos aquí el selector en
2:19:27inglés se denomina selector que nos
2:19:30permite decir qué tipo de elementos
2:19:32vamos a afectar con este estilo que
2:19:34tenemos aquí dentro de las llaves en
2:19:36este caso a todos los elementos h 2 se
2:19:40les va a asignar un color de texto azul
2:19:42en nuestra página actualmente solo
2:19:45tenemos un elemento h 2 pero si
2:19:47tuviéramos otro elemento por ejemplo
2:19:50digamos app de gatos 2 y volvemos a
2:19:54cargar la página puedes ver que también
2:19:56es azul el texto este estilo se va a
2:19:59asignar a todos los elementos de este
2:20:02tipo hay forma de ser más restrictivos y
2:20:05de solo aplicar el estilo a ciertos
2:20:08elementos
2:20:09solo vamos a ver durante el curso por
2:20:11ahora lo aplicamos de forma general esta
2:20:14es una diferencia que tenemos con los
2:20:16estilos en línea cuando usamos un
2:20:19elemento style podemos afectar o asignar
2:20:23ese estilo a más de un elemento pero
2:20:26cuando escribimos aquí en la etiqueta de
2:20:28apertura el estilo en línea solo vamos a
2:20:32afectar a ese elemento en particular
2:20:34mientras que aquí podríamos si queremos
2:20:37afectar o aplicar ese estilo a más de un
2:20:40elemento genial vamos a ver otros
2:20:44ejemplos vamos a personalizar el color
2:20:47del texto de los títulos los encabezados
2:20:50de nivel 3 vamos a asignarles un color
2:20:54verde en inglés verde es greening así
2:20:59que vamos a volver a cargar la página y
2:21:01aquí vemos que nuestro título de nivel 3
2:21:04nuestro encabezado aquí de nivel 3
2:21:07es verdad se le aplicó ese estilo según
2:21:10la guía de estilo de google se
2:21:12recomienda también dejar una línea en
2:21:13blanco entre cada una de estas reglas
2:21:17que tenemos aquí key para que el archivo
2:21:20sea más fácil de leer estamos
2:21:22personalizando el estilo de los
2:21:24elementos h2 h3 y digamos que queremos
2:21:28también personalizar el color de los
2:21:30párrafos
2:21:32para eso aquí escribimos p
2:21:35luego llegamos a este nivel de intenta
2:21:38ción escribimos color digamos por tu
2:21:41morado aquí puedes ver ese color que
2:21:44corresponde si volvemos a cargar la
2:21:47página podemos ver que ahora todos los
2:21:48párrafos se muestran en morado y este es
2:21:52un ejemplo de cómo puede afectar a más
2:21:54de un elemento en tu página aquí vemos
2:21:57también que nuestro pie de página aquí
2:21:59en nuestro foro también contiene un
2:22:03párrafo una etiqueta para un elemento pp
2:22:05por eso se muestra en morado
2:22:10genial ya sabes trabajar con el bloque
2:22:13style ahora vamos a ver nuestra tercera
2:22:16opción que es la que vamos a usar
2:22:17comúnmente porque como puedes ver si
2:22:20tenemos una página más complicado más
2:22:22elaborada y empezamos a escribir todos
2:22:25nuestros estilos aquí en nuestro archivo
2:22:27html
2:22:29rápidamente el archivo se va a volver
2:22:32inmanejable porque en teoría podemos
2:22:35tener cientos y cientos de reglas aquí
2:22:38para personalizar cómo se ve la página y
2:22:41debajo tendríamos ya la estructura de la
2:22:45página que de por sí ya puede ser
2:22:47complicada también así que para separar
2:22:50el propósito de cada uno de los archivos
2:22:53y hacerlos más manejables y fáciles de
2:22:56expandir y de mantener entonces lo que
2:22:59hacemos es separar este contenido de las
2:23:02reglas css en otro archivo eso es
2:23:05exactamente lo que vamos a hacer en la
2:23:07próxima parte
2:23:14veamos cómo podemos trasladar estas
2:23:17reglas que ya escribimos para nuestra
2:23:20página a un archivo css lo primero que
2:23:23vamos a hacer es abrir aquí el
2:23:25explorador
2:23:26y vemos nuestro archivo html y nuestra
2:23:30carpeta de imágenes donde teníamos las
2:23:32imágenes de la lasaña del gatito lo que
2:23:35vamos a hacer ahora es hacer clic aquí
2:23:37en new file archivo nuevo
2:23:40y vamos a escribir
2:23:42style punto se s
2:23:46punto css le dice a nuestro dispositivo
2:23:50a nuestra computadora que este archivo
2:23:52es de tipo css
2:23:55y el nombre style es un estándar que es
2:23:59comúnmente usado para nombrar al archivo
2:24:02que contiene los estilos principales de
2:24:04nuestra página también puedes ver mails
2:24:07puntos s s main significa principal y
2:24:10también puedes ver archivos con otros
2:24:12nombres
2:24:16hacemos clic en entero
2:24:18y aquí vemos nuestro archivo nuevo en
2:24:21este momento el archivo está vacío pero
2:24:25lo que debemos hacer es aquí podemos
2:24:28copiar
2:24:29y pegar nuestras reglas claro aquí vamos
2:24:34a tener que ajustar la intenta ción
2:24:37normalmente las escribiríamos
2:24:39directamente en el archivo css es
2:24:42importante también intentar el contenido
2:24:44de las reglas esto es algo también
2:24:46importante que debemos mencionar el css
2:24:49al igual que en html normalmente
2:24:52intentamos
2:24:52las propiedades con dos espacios para
2:24:56cambiar el tamaño por defecto de cada
2:24:58nivel de intenta ción de cuatro espacios
2:25:01a dos simplemente debes ver si tienes
2:25:04esta barrita activa o visible en tu
2:25:07editor de código envía score si la barra
2:25:11está visible puedes hacer clic en spaces
2:25:15debería mostrar 4 por defecto
2:25:19luego se explica aquí intent using
2:25:21spaces y luego haces clic en dos ya
2:25:25después de que ves aquí el número dos si
2:25:28haces clic en tap se va a agregar dos
2:25:31espacios por cada nivel de intenta ción
2:25:34exactamente lo que necesitamos y así no
2:25:38tenemos el riesgo de ser inconsistentes
2:25:40y asignar cuatro espacios o dos espacios
2:25:43mezclados es importante ser consistente
2:25:46en todo el archivo y se recomienda usar
2:25:48dos espacios para css y html
2:25:52genial estábamos viendo cómo podemos
2:25:54combinar o vincular los archivos css
2:25:59html porque hasta este momento son dos
2:26:02archivos separados no tienen nada en
2:26:04común podemos borrar esta parte y cerrar
2:26:07aquí para ver el código
2:26:10si volvemos a cargar la página ahora
2:26:13vemos la página original sin los estilos
2:26:16que le habíamos aplicado porque en este
2:26:18momento los archivos son dos archivos
2:26:20totalmente separados no hay nada que los
2:26:22conecte los podemos conectar con un
2:26:26elemento que tenemos disponible en html
2:26:29que se llama link
2:26:32no es el enlace o el link al que
2:26:34normalmente nos referimos cuando
2:26:36navegamos en internet sino que es un
2:26:39enlace que va a actuar como detrás de
2:26:41escena para permitirnos acceder a otros
2:26:44archivos por ejemplo el archivos de ss
2:26:47por eso lo escribimos o lo incluimos
2:26:50dentro de ge recuerda que ese contiene
2:26:53todos esos elementos que actúan detrás
2:26:55de escena una vez que creamos el link
2:26:58debemos especificar cuál es el archivo
2:27:01que se va a conectar o el archivo que se
2:27:03va a usar en este caso vamos a conectar
2:27:07nuestro archivo html con archivo css
2:27:11como está en la misma carpeta aquí lo
2:27:13podemos ver en el explorador están ambos
2:27:16en la misma carpeta podemos simplemente
2:27:18escribir el nombre del archivo si no
2:27:21tendríamos que hacer igual que qué
2:27:24hicimos anteriormente con la imagen
2:27:26tendríamos que escribir el nombre de la
2:27:28carpeta primero seguido de una barra
2:27:30inclinada y luego el nombre del archivo
2:27:34que hay aquí tenemos esto y también se
2:27:37recomienda
2:27:38específica del atributo brown breve es
2:27:42una abreviación de bilis jones y según
2:27:45esta descripción el atributo
2:27:48denominado nombre una relación del
2:27:52documento vinculado al documento actual
2:27:55que representa está el punto css para
2:27:59nuestro archivo html
2:28:00bueno es una hoja de estilo que en
2:28:05inglés se denomina está aún sin hit es
2:28:08hoja y está el en estilo hoja de estilo
2:28:13este archivo es una hoja de estilo para
2:28:16nuestro archivo actual genial ahora si
2:28:20volvemos a cargar nuestra página puedes
2:28:23ver que los estilos se aplicaron
2:28:25exitosamente aquí podemos ver nuestro
2:28:27título azul nuestro subtítulo verde
2:28:30nuestros párrafos morados exactamente lo
2:28:33que especificamos aquí el estadio punto
2:28:35cfs
2:28:37genial ya sabes cómo vincular o conectar
2:28:42ambos archivos aquí en html escribimos
2:28:46todo el contenido de la página y en css
2:28:50especificamos cómo se van a mostrar
2:28:52estos elementos o ese contenido
2:28:55recuerda
2:28:56en el evento sling no tiene una etiqueta
2:29:00de cierre se cierra automáticamente
2:29:01y debes especificar la propiedad hr con
2:29:06el nombre o la dirección al archivo
2:29:08genial ahora que ya sabes cómo trabajar
2:29:11con estas tres opciones y cuáles son sus
2:29:13diferencias
2:29:14comencemos a trabajar con los selectores
2:29:16css vamos a verlos en detalle y cómo
2:29:20puedes usarlos para personalizar tu
2:29:22página web
2:29:29vamos a hablar un poquito sobre los
2:29:31selectores css porque ellos van a ser
2:29:34esenciales durante todo el curso en
2:29:36realidad ya los usamos esto que
2:29:40escribimos aquí en la parte anterior
2:29:42será mira un selector css
2:29:45veámoslo con más detalle aquí vamos a
2:29:48aumentar el tamaño del correo cuando
2:29:50nosotros escribimos aquí h2 h3 o pe por
2:29:55ejemplo estos son ejemplos
2:29:57estamos especificando el tipo de
2:30:00elemento al cual se le va a aplicar este
2:30:03estilo en específico aquí podemos tener
2:30:06muchas muchas muchas combinaciones de
2:30:10propiedades con sus valores dentro de
2:30:12las llaves y ese estilo que definamos
2:30:14aquí se va a aplicar para este tipo de
2:30:17elementos pero esto que tenemos aquí
2:30:19esta primera parte es esencial porque le
2:30:22dice al browser al navegador
2:30:25el tipo de elementos o el conjunto de
2:30:27elementos al cual se le va a aplicar ese
2:30:30estilo veamos un poquito sobre los
2:30:33selectores css en la documentación
2:30:36selectores css
2:30:39los selectores definen sobre qué
2:30:41elementos se aplicará un conjunto de
2:30:45reglas css nos permiten definir qué
2:30:49elementos van a estar afectados por las
2:30:51reglas css que escribimos tenemos varios
2:30:54tipos de selectores el que estamos
2:30:57usando en este momento se denomina
2:31:00selector de tipo selecciona todos los
2:31:03elementos todos los elementos que
2:31:05coinciden con el nombre del elemento
2:31:08especificado todos los elementos con ese
2:31:12nombre por ejemplo
2:31:15si escribimos inputs se va a aplicar a
2:31:17cualquier elemento de tipo import y en
2:31:20este caso como escribimos h2 h3 y pe
2:31:24estos elementos van a ser afectados por
2:31:27los estilos que especificamos también
2:31:30tenemos otros tipos de selectores
2:31:32básicos selector de clase selector de
2:31:36aire y selector universal y selector de
2:31:39atributos vamos a hablar durante el
2:31:42curso sobre el selector de clases el
2:31:44selector de haití y el selector de
2:31:47atributos así que vamos a ver muchos
2:31:49ejemplos de cómo usarlos el selector
2:31:51universal es un selector que selecciona
2:31:54todos los elementos aunque en general
2:31:56selecciona todos los elementos es un
2:32:00asterisco por ejemplo digamos que
2:32:03queremos que todo el texto en nuestra
2:32:04página sea
2:32:06morado sólo un ejemplo digamos que borra
2:32:11esto que tenemos acá
2:32:12y quiero que todo el texto sea morado
2:32:15uso este selector el asterisco que es el
2:32:19selector universal y escribo color
2:32:21cuerpo moral
2:32:23ahora si volvemos a cargar la página
2:32:25puedes ver que todo el texto todo el
2:32:28texto de nuestra página ahora es morado
2:32:30porque se aplicó de forma universal a
2:32:33todos los elementos de la página que
2:32:35contienen texto para los cuales puede
2:32:37aplicar esta propiedad específica genial
2:32:41ya sabes cómo trabajar con los
2:32:43selectores de tipo y con el selector
2:32:45universal
2:32:47así que en la próxima parte vamos a ver
2:32:50cómo puedes trabajar con los selectores
2:32:52de clase las clases son muy muy muy muy
2:32:56importantes en css y las vas a usar
2:32:58diariamente las vas a usar en cada
2:33:01proyecto que crees con html y css
2:33:04así que comencemos con nuestra siguiente
2:33:07parte volvemos al estado de nuestra
2:33:09página antes de continuar
2:33:16aquí estamos en nuestro archivo cfs
2:33:20hasta ahora hemos usado selectores de
2:33:22tipo que van a aplicar un estilo
2:33:25específico a todos los elementos de ese
2:33:28tipo pero qué ocurre nosotros tenemos
2:33:32otro tipo de selector que se llama
2:33:34selector de clase vamos a borrar ese
2:33:36estilo esos estilos que habíamos
2:33:38asignado a los elementos de nuestra
2:33:40página y vamos a enfocarnos en los
2:33:43selectores de clase si vamos a la
2:33:45documentación de la red de
2:33:47desarrolladores de mozilla en la
2:33:49documentación web
2:33:50podemos ver aquí los selectores de clase
2:33:53un selector de clases selecciona todos
2:33:56los elementos que tienen el atributo
2:33:59class especificado cuál significa clase
2:34:04en español una clase es básicamente un
2:34:07nombre que nosotros creamos y le
2:34:10asignamos a ciertos elementos luego con
2:34:13css podemos referirnos a esa clase y
2:34:17aplicarle un estilo específico a todos
2:34:20los elementos
2:34:21html que tengan esa clase ya vas a ver
2:34:24cómo se la podemos asignar y cuál es la
2:34:27diferencia entre un selector de tipo y
2:34:29un selector de clase
2:34:32digamos que queremos asignar un estilo a
2:34:35nuestra lista no ordenada
2:34:39esta lista que tenemos aquí queremos
2:34:41asignarle un color de texto
2:34:44chocolate en inglés chocolate se escribe
2:34:47igual que en español ya que le vamos a
2:34:50afectar con este selector de tipo a
2:34:52todos los elementos
2:34:53de tipo listas no ordenada recuerda
2:34:57hueles listas no ordenadas y volvemos a
2:34:59cargar nuestra página aquí podemos ver
2:35:02que el estilo se aplicó a esa lista no
2:35:05ordenada pero también digamos que
2:35:08queremos que ese mismo estilo se le
2:35:12aplique a las listas ordenadas aquí
2:35:14vemos que no fue modificada a la lista
2:35:18ordenada porque no la estamos
2:35:20seleccionando con el selector de tipo
2:35:22deberíamos en este caso escribir o l y
2:35:25luego escribimos color
2:35:28chocolate volvemos a cargar la página y
2:35:31ahora si vemos que se le aplicó el
2:35:34estilo pero estamos escribiendo reglas
2:35:38duplicadas básicamente para evitar
2:35:41repeticiones podemos usar clases
2:35:43selectores de clases en css con las
2:35:47clases podemos simplemente agregarle la
2:35:49clase a algún elemento html y no afectar
2:35:52todos los de ese tipo por ejemplo si
2:35:54tuviéramos varias listas no ordenadas
2:35:56podríamos asignarle una clase a alguna
2:36:00lista oa varias listas y a otras no y
2:36:03así no estaríamos afectando a todas
2:36:05cuando usamos este selector de tipo
2:36:07estamos afectando o estamos aplicando
2:36:09ese estilo a todos los elementos de ese
2:36:12tipo en nuestra página con las clases
2:36:15podemos ser más selectivos y sólo
2:36:18aplicarle el estilo a los elementos que
2:36:20tengan esa clase así que vamos a borrar
2:36:23esto por este momento y vamos a
2:36:25reemplazarlos por una clase
2:36:28el primer paso para crear una clase es
2:36:33ir a nuestro archivo html y buscar los
2:36:36elementos a los cuales les queremos
2:36:38asignar esa clase vamos a volver a
2:36:41cargar nuestra página para ver su estado
2:36:43inicial
2:36:44vamos a ir aquí abajo a nuestra lista no
2:36:48ordenada y a nuestra lista ordenada aquí
2:36:51las podemos ver ambas en la pantalla
2:36:54tenemos aquí en nuestra lista no
2:36:56ordenada y aquí podemos ver nuestra
2:36:58lista ordenada que corresponden a estos
2:37:00dos elementos para asignarle una clase a
2:37:05la lista no ordenada simplemente le
2:37:08agregamos el atributo class que
2:37:11significa clase en español y entre
2:37:14comillas vamos a escribir el nombre de
2:37:17nuestra clase ese nombre es cualquier
2:37:20nombre que tú quieras asignarle
2:37:21normalmente tratamos de ser lo más
2:37:23concisos posible y uno de los estándares
2:37:27es separar las palabras con un guión
2:37:30entonces por ejemplo podemos asignarle
2:37:34la clase lista de gato y así le vamos a
2:37:37aplicar el estilo que escojamos para esa
2:37:39clase lista de gatos
2:37:41vamos a agregarle la s aquí
2:37:44ahora vamos a nuestro archivo css ya le
2:37:47aplicamos la clase a un elemento en html
2:37:49cuando volvemos a nuestro archivo css
2:37:52para especificar qué estilo queremos
2:37:55asignarle a esos elementos
2:37:58escribimos el nombre de la clase pero
2:38:01antes de ese nombre tenemos que incluir
2:38:03un punto así le decimos a css que nos
2:38:07estamos refiriendo al nombre de una
2:38:09clase con un punto aquí antes de su
2:38:13nombre
2:38:14luego para aplicarle el estilo
2:38:17escribimos la propiedad y su valor color
2:38:20chocolate y si volvemos a cargar la
2:38:23página buena aquí lo tenemos vemos
2:38:26nuestra lista no ordenada con el color
2:38:28chocolate pero dijimos que las clases
2:38:31son muy útiles para poder aplicarle ese
2:38:34mismo estilo a más de un elemento cierto
2:38:37cierto vas a ver lo fácil que es
2:38:40aplicarle ese mismo estilo a otro
2:38:42elemento en nuestra página que no tiene
2:38:45nada que ver con este tipo de elementos
2:38:47por ejemplo podemos asignarle esa clase
2:38:49a otro elemento que no tengan nada que
2:38:52ver con una lista no ordenada
2:38:55vamos aquí a nuestra lista ordenada
2:38:58y vamos a agregarle
2:39:02atributo clave
2:39:04lista de datos
2:39:08genial ya tenemos dos elementos con esa
2:39:10clase vamos a volver a cargar la página
2:39:14y puedes ver cómo se aplicó el estilo
2:39:17también a la lista ordenada porque tiene
2:39:20esa clase
2:39:21así estamos re usando nuestro estilo que
2:39:25definimos aquí si queremos que el
2:39:27elemento tenga este estilo le agregamos
2:39:29esta clase
2:39:32también podemos agregarle la clase a
2:39:34otro elemento que no tenga nada que ver
2:39:36en este caso también podríamos ajustar
2:39:39su nombre claro otro nombre que no sea
2:39:42lista de gatos pero sólo para
2:39:45demostrarte que no tiene necesariamente
2:39:47que ser una lista vamos a volver a
2:39:52cargar la página y puedes ver que el
2:39:53estilo se le aplica al elemento pe al
2:39:57párrafo simplemente porque tenía esa
2:39:59clase general no y si quieres asignarle
2:40:03otro estilo además de eso otra clase
2:40:06escribes un espacio y luego escribes el
2:40:09nombre de otra clase se puede asignar
2:40:11más de una clase al mismo elemento
2:40:14ya sabes cómo crear una clase en html
2:40:18cómo asignarle una clase un elemento y
2:40:21cómo escribir la clase correspondiente
2:40:25en el archivo css recuerda siempre
2:40:28tienes que seguir esta estructura para
2:40:30escribir la regla cuando estás
2:40:32refiriendo de una clase un punto esto es
2:40:35común que cuando estás comenzando a
2:40:37trabajar con css no coloques el punto el
2:40:40punto es muy importante para que se
2:40:42detecte como una clase luego el nombre
2:40:45de la clase y entre llaves la propiedad
2:40:49dos puntos un espacio el valor y punto y
2:40:53coma el punto y coma también es
2:40:55importante porque marca el final de esa
2:40:58línea genial ya sabes cómo trabajar con
2:41:01selectores de clase los vamos a usar muy
2:41:04a menudo ahora pasemos en nuestra
2:41:06siguiente parte a ver un aspecto de
2:41:09desarrollo web que es importante cómo
2:41:10puedes aumentar disminuir o en general
2:41:13personalizar el tamaño de la letra eso
2:41:16lo vamos a ver a continuación
2:41:24ahora vamos a ver cómo puedes
2:41:25personalizar el tamaño de la letra como
2:41:28puedes cambiar el tamaño de la letra con
2:41:31una propiedad en css vamos por ahora a
2:41:35quitar las clases que habíamos asignado
2:41:39en la parte anterior a las listas y a
2:41:42los párrafos volvemos a cargar la página
2:41:46y vemos que está en su estado original
2:41:49también en nuestro archivo css vamos a
2:41:52borrar esa regla que teníamos allí por
2:41:55ahora vamos a volver a usar selectores
2:41:57de tipo es importante que practiques con
2:42:00todos los tipos de selectores digamos
2:42:02que queremos seleccionar todos los
2:42:04elementos de tipo h 2 en este caso sería
2:42:08este título que tenemos aquí pero si la
2:42:10página tuviera varios elementos de tipo
2:42:14h 2 se aplicaría el mismo estilo a todos
2:42:16porque estamos usando un selector de
2:42:19tipo
2:42:20para personalizar o cambiar el tamaño de
2:42:23la letra
2:42:24usamos esta propiedad
2:42:27font-size font se puede traducir como
2:42:30letra o fuente en español
2:42:33isa es significa tamaño así que es el
2:42:36tamaño de la fuente o tamaño de la letra
2:42:38hay distintas unidades que podemos usar
2:42:41una de ellas es px píxeles una de las
2:42:45más comunes es píxeles y aquí puedes ver
2:42:47como inmediatamente vemos el cambio en
2:42:50el tamaño de la letra podemos colocar un
2:42:52número muy muy grande para que puedas
2:42:55ver el resultado 50 y es obvio el cambio
2:42:59y también podríamos usar un valor más
2:43:02pequeño y tendríamos un título más
2:43:05pequeño como puedes ver el tamaño de la
2:43:08letra no es fijo podemos personalizarlo
2:43:10con css ahora para practicar es tu turno
2:43:14debajo de esta regla css
2:43:17selecciona con un selector de tipo
2:43:21los elementos de tipo h3 y cambia el
2:43:25tamaño de la letra a 25 píxeles 25
2:43:30tómate algunos segundos si quieres
2:43:31pausar el vídeo mientras lo haces y
2:43:34luego regresa para que veamos el
2:43:35resultado
2:43:36bueno aquí tenemos el resultado el
2:43:39selector de tipo h3 usamos llaves y
2:43:42luego escribimos font-size
2:43:45y el valor es 25 píxeles
2:43:48recuerda siempre el punto y coma y
2:43:51recuerda que también aquí se debe dejar
2:43:53un espacio entre la llave de apertura y
2:43:56el selector que esto es importante
2:43:58también y un espacio entre los dos
2:44:00puntos y el valor eso nos ayuda a que el
2:44:03archivo sea más fácil de leer si
2:44:05volvemos a cargar la página aquí podemos
2:44:07ver la
2:44:09diferencia ahora el título principal
2:44:11está más pequeño y el título secundario
2:44:14está más grande así que podemos invertir
2:44:16estos valores y ahora si tiene más
2:44:18sentido también qué es lo que ocurre si
2:44:22usamos varios selectores de tipo para
2:44:25asignar el mismo estilo por ejemplo
2:44:29si en lugar de tener estas reglas
2:44:31tuviéramos algo así p
2:44:35con
2:44:37620 píxeles
2:44:40luego el
2:44:43font-size
2:44:4620 píxeles y luego el font
2:44:50620 píxeles puedes ver que todos tienen
2:44:54el mismo estilo aplicado para escribir
2:44:57esto de forma más concisa podemos
2:45:00simplemente separarlos con una coma y
2:45:02una línea nueva se recomienda veamos
2:45:05cómo huele y le escribimos una coma
2:45:09luego huele y luego o er y así
2:45:12estaríamos aplicando este estilo que
2:45:16está entre las llaves a estos tres tipos
2:45:19de elementos se pueden escribir en una
2:45:22misma línea pero la guía de estilo de
2:45:24google recomienda escribirlas en líneas
2:45:27separadas para que sean más fáciles de
2:45:29detectar visualmente si volvemos a
2:45:32cargar la página vemos que no hubo
2:45:34diferencia simplemente nuestro archivo
2:45:36css va a ser más conciso más fácil de
2:45:40leer y tenemos menos repetición así que
2:45:43es más fácil si queremos cambiar el
2:45:45estilo o actualizarlo
2:45:48también vamos a ver un ejemplo de un
2:45:50estilo que tiene más de una propiedad
2:45:52porque hasta ahora los ejemplos que
2:45:54hemos visto solo tienen una propiedad y
2:45:56un balón
2:45:57digamos que queremos asignarle a los
2:46:00elementos de tipo l y les hay tener un
2:46:03elemento de una lista el color de texto
2:46:06azul y también queremos
2:46:08personalizar el tamaño de la letra 15
2:46:12píxeles podemos hacerlo sin ningún
2:46:14problema así es como puedes escribir una
2:46:16regla con más de una propiedad
2:46:20una propiedad por línea y cada una de
2:46:23las líneas termina con un punto y una
2:46:24coma y deben estar dentro de las llaves
2:46:27volvemos a cargar la página y ahora el
2:46:30estilo se aplicó a los elementos de la
2:46:34lista puedes ver color azul y un tamaño
2:46:36de letra personalizado también aquí
2:46:39porque son todos los elementos de tipo l
2:46:42otro truco interesante que seguro que te
2:46:45va a gustar o que lo vas a usar en algún
2:46:47momento mientras trabajes con visión
2:46:50estudio course es que puedes dividir la
2:46:53pantalla en dos para ver los dos
2:46:55archivos a la vez el archivo html y el
2:46:59archivo css ahorita en la presentación
2:47:02que tenemos en nuestro editor de código
2:47:04tenemos que hacer clic en las pestañas
2:47:07para ir de un archivo a otro pero
2:47:10siempre es más práctico tener todo a la
2:47:12vista así que podemos hacer clic aquí
2:47:14nos dice split editar split erector bite
2:47:18o split héctor drawn podemos dividir el
2:47:21editor pero antes de dividirlo tenemos
2:47:24que estar en el archivo que queremos
2:47:26asignar a la derecha hacemos clic aquí y
2:47:29vemos el archivo aquí en la derecha y lo
2:47:31cerramos a la izquierda y aquí tenemos
2:47:35las dos pantallas en simultáneo eso es
2:47:37muy muy útil cuando estás trabajando en
2:47:40un proyecto porque puedes ver la
2:47:41estructura de la página y el estilo que
2:47:44le estás aplicando
2:47:45otro aspecto de la letra que puedes
2:47:48cambiar es la familia de la fuente el
2:47:52tipo de fuente por ejemplo verdana times
2:47:55new roman helvética distintos tipos de
2:47:58fuentes que puedes asignarle al texto de
2:48:00tu página eso es lo que vamos a ver en
2:48:02la próxima parte así que te veo allí
2:48:05buen trabajo por llegar hasta aquí ya
2:48:07estás avanzando en el mundo de css
2:48:10pasemos a nuestra siguiente parte
2:48:18veamos cómo puedes cambiar el tipo de
2:48:21fuente del tipo de letra con css vamos a
2:48:25borrar esta regla que teníamos aquí para
2:48:28concentrarnos solamente en esta
2:48:30propiedad digamos que queremos cambiar
2:48:32el tipo de fuente el tipo de letra de
2:48:36los elementos h 2 que en este caso sería
2:48:39el título principal la propiedad para
2:48:42lograrlo se llama font-family font es
2:48:46fuente y family es familia la familia de
2:48:49la fuente el tipo de letra
2:48:51y le vamos a asignar un valor por
2:48:54ejemplo digamos verdana podemos rodear
2:48:57el valor entre comillas o no en este
2:49:00caso porque solo una palabra si es sólo
2:49:03una palabra no habría problema en omitir
2:49:07las comillas pero si el nombre tiene
2:49:09espacios y debemos incluir las comillas
2:49:12si volvemos a cargar la página puedes
2:49:15ver que este tipo de letra se muestra
2:49:18vamos a ver más sobre esta propiedad en
2:49:21la documentación
2:49:22font-family aquí tenemos un resumen la
2:49:26propiedad font-family y define una lista
2:49:29de fuentes o familias de fuentes con un
2:49:32orden de prioridad para usar en un
2:49:35elemento seleccionado podemos
2:49:37especificar varias fuentes varias
2:49:40familias de fuentes en orden de
2:49:41prioridad porque si una falla o no es
2:49:44reconocida por el navegador por el
2:49:45browser otras se puede usar como un
2:49:48respaldo eso lo vamos a ver más adelante
2:49:50a diferencia de la mayoría de las
2:49:52propiedades css los valores se separan
2:49:55con comas para indicar que son valores
2:49:57alternativos que el nombre de la familia
2:50:01o un nombre genérico se especifica como
2:50:03el valor el nombre de la familia es el
2:50:06nombre de la familia de la fuente por
2:50:08ejemplo times y helvética son nombres de
2:50:11familia los que contienen espacios deben
2:50:15escribirse entre comillas por ejemplo
2:50:17aquí tenemos times new roman este nombre
2:50:20debe estar rodeado por comillas pero en
2:50:23el caso de verdad no necesariamente
2:50:24porque es una sola palabra también
2:50:27tenemos nombres genéricos se han
2:50:29definido los siguientes nombres
2:50:31genéricos serif sans-serif course y
2:50:34fantasy monospace los nombres genéricos
2:50:38son palabras clave y no deben ponerse
2:50:40entre comillas ok cuando uses alguno de
2:50:43estos nombres genéricos no deben ponerse
2:50:45entre comillas aquí tenemos algunos
2:50:48ejemplos
2:50:49from spain tenemos entre comillas este
2:50:53nombre de familia y aquí tenemos otro
2:50:57nombre de familia helvética pero no está
2:50:59entre comillas porque es una sola
2:51:01palabra y finalmente tenemos como el
2:51:03respaldo también un nombre genérico
2:51:05sans-serif que no va entre comillas
2:51:08porque es un nombre genérico aquí
2:51:11tenemos una nota un nombre genérico
2:51:12debería ser siempre el último de la
2:51:15lista en una propiedad fantamady porque
2:51:18si ésta falla por ejemplo tenemos esto y
2:51:21si ésta falla tenemos esto y los
2:51:24genéricos los nombres genéricos
2:51:25normalmente son reconocidos por los
2:51:27navegadores genial en este caso yo no
2:51:30estoy agregando valor es de respaldo
2:51:32porque eso lo vamos a ver en tan sólo
2:51:34unos minutos durante el curso vas a ver
2:51:37cómo puedes agregar estos valores de
2:51:39respaldo pero ahora vamos a ver cómo
2:51:42puedes determinar que en realidad está
2:51:46fuente es verdad
2:51:48porque uno ve un cambio pero como
2:51:51determinamos en realidad que esta fuente
2:51:53es verdad veamos
2:51:55en google chrome tenemos las
2:51:57herramientas de desarrolladores de
2:51:59chrome y aquí como hicimos clic derecho
2:52:02sobre el título luego un inspector vamos
2:52:05directo a seleccionar este elemento en
2:52:08las herramientas las podemos ver aquí
2:52:12anteriormente habíamos visto estas
2:52:13herramientas como una forma de
2:52:15visualizar la estructura
2:52:17html de nuestra página pero también este
2:52:21panel que vemos aquí abajo nos presenta
2:52:23el estilo css nos presenta estas reglas
2:52:28que hemos creado en css y que le hemos
2:52:30aplicado a estos elementos vamos a
2:52:34expandir este panel para verlo con más
2:52:36detalle si escondemos html por el
2:52:38momento y podemos ver que tenemos un
2:52:42selector de tipo con familia de fuentes
2:52:45verdad
2:52:47esto lo que nosotros escribimos en este
2:52:49momento pero para determinar si verdad
2:52:52no se está mostrando realmente porque
2:52:55está reconocida por el browser o no
2:52:56tenemos que ir a este panel que dice
2:52:59configure
2:53:01en configure vamos a ver esta
2:53:03presentación que nos habla de tres
2:53:06términos que vas a ver más adelante en
2:53:08el curso y aquí abajo podemos ver esta
2:53:12parte cita que nos dice render fondo
2:53:14podemos traducirlo como el tipo de
2:53:17fuente que se está mostrando en realidad
2:53:19y vemos verdad esa es la letra que en
2:53:22verdad se está mostrando si hubiéramos
2:53:24asignado un tipo de fuente que no está
2:53:28reconocido por el browser veríamos otro
2:53:31valor aquí aunque lo hubiéramos asignado
2:53:33uno respaldo
2:53:35por ejemplo cambiamos esto a cualquier
2:53:37otro valor que no sea válido sólo para
2:53:40probar si volvemos a cargar la página
2:53:44aquí vemos otro tipo de letra y cuál es
2:53:47el valor final de la fuente es times new
2:53:50roman se asignó por defecto en el
2:53:53navegador el navegador lo asignó por
2:53:55defecto ahora sí volvemos a asignar
2:53:58verdad
2:53:59volvemos a ver aquí verdad
2:54:02genial ya sabes cómo usar las
2:54:04herramientas de desarrolladores de
2:54:06google chrome para verificar que el tipo
2:54:10de fuente es el correcto que se está
2:54:12mostrando
2:54:12esta pestaña está ellos es muy útil en
2:54:16esta herramienta porque aquí podemos ver
2:54:18los estilos que se aplican a los
2:54:20elementos de nuestra estructura en html
2:54:24si hacemos clic en el elemento aquí
2:54:26abajo vamos a ver los estilos que se le
2:54:29han aplicado las reglas que se le han
2:54:31aplicado puedes ver todos estos estilos
2:54:34y a medida que le vayamos agregando más
2:54:38contenido a nuestro archivo css vamos a
2:54:40ver como la cantidad de reglas que se
2:54:43muestran aquí genial pero en realidad no
2:54:46estamos limitados a usar un tipo de
2:54:49letra específica una familia de fuentes
2:54:51específicas porque google ya se encargó
2:54:54de crear un catálogo de fuentes que
2:54:57podemos simplemente descargar y usar en
2:55:00nuestras páginas web vas a aprender cómo
2:55:02usarlas y cómo agregarlas a tu página en
2:55:05la próxima parte continuemos
2:55:12otra opción que podemos usar para
2:55:15personalizar la familia de la fuente que
2:55:18usamos es google phone google se encargó
2:55:21de crear todo una colección de fuentes
2:55:24que podemos importar a nuestra página
2:55:26puede descargarlas y mostrarlas en
2:55:29nuestros elementos vamos a ver cómo lo
2:55:32puedes hacer en lugar de verdad vamos a
2:55:34asignarle una una familia de fuente
2:55:37diferente vamos a colocar el browser en
2:55:40pantalla completa y vamos a ir a esta
2:55:42página que tenemos aquí fondo punto
2:55:45google.com esperamos a que se cargue y
2:55:48aquí puedes ver cómo se van mostrando
2:55:51los distintos tipos de letra por ejemplo
2:55:55digamos que queremos usar robots en esta
2:55:58fuente que tenemos aquí como la podemos
2:56:00asignar a este elemento que tenemos en
2:56:04nuestra página hacemos clic en ese
2:56:07elemento en robot y podemos ver
2:56:09distintos estilos de esa fuente de ese
2:56:12tipo de letra podemos escoger cualquiera
2:56:14de estos estilos parece
2:56:16tipo de letra y simplemente lo que
2:56:20hacemos vamos a escoger uno que sea como
2:56:22un intermedio aquí hacemos clic en
2:56:23select de ese estado seleccionar este
2:56:26estilo y luego tenemos dos opciones en
2:56:30este caso vamos a usar esta que es un
2:56:32link un elemento link que podemos
2:56:35agregar a nuestro archivo html lo que
2:56:39debemos hacer es copiar estos elementos
2:56:41que es si los miras detalladamente
2:56:43puedes ver que son elementos de tipo
2:56:45link se deben colocar en el elemento
2:56:49head del html ya lo copié con control se
2:56:54y luego si vamos aquí vamos a el archivo
2:56:58html
2:56:59dentro del elemento head aquí en el
2:57:02medio colocamos los elementos que
2:57:05acabamos de copiar los inventamos
2:57:08adecuadamente para que estén al mismo
2:57:10nivel
2:57:12para asignarle ese tipo de letra al
2:57:15elemento h 2 en lugar de verdad lo que
2:57:19tenemos que hacer es copiar y pegar esto
2:57:22que tenemos aquí esto incluye la
2:57:24propiedad sounds friendly guardamos el
2:57:27archivo y se asigna roboto y
2:57:31y respaldó el tipo de letra de respaldo
2:57:34sería sans series ahora si vamos a
2:57:37nuestra página y volvemos a cargar la
2:57:39página
2:57:40podemos ver esta letra que tenemos aquí
2:57:43la letra que importamos
2:57:47ahora digamos que queremos usar otro
2:57:50tipo de letra diferente
2:57:52vamos a volver a la página principal
2:57:55hacemos clic en el logo de google fans y
2:57:58por ejemplo digamos que queremos usar
2:58:00algo como una letra más escrita a mano
2:58:03hacemos clic aquí y podemos seleccionar
2:58:06ese estilo ahora vemos que no se muestra
2:58:09el panel porque sólo se abre ese panel
2:58:11la primera vez que seleccionamos un tipo
2:58:14de letra pero puedes volver a abrir ese
2:58:17panel aquí
2:58:18en este icono que podemos ver aquí dice
2:58:22ver las familias seleccionadas hacemos
2:58:24clic y vemos el panel pero ahora podemos
2:58:27ver que se actualizó este elemento al
2:58:30final así que tenemos que volver a
2:58:32copiar y pegar esto en nuestro archivo
2:58:35html para actualizarlo así vamos a poder
2:58:39incluir los dos tipos de letras
2:58:44aquí borramos nuevamente pegamos los
2:58:48elementos y ahora puedes ver que están
2:58:51actualizados tenemos dos familias de
2:58:54fuentes dos tipos de letra genial
2:58:56guardamos y luego vamos aquí a nuestro
2:58:59archivo cfs digamos que quiero asignar
2:59:03ese tipo de letra nuevo al título aquí
2:59:06tenemos como especificar la en nuestro
2:59:09css copiamos y pegamos y aquí tenemos
2:59:13nuestro tipo de letra a aplicado a
2:59:16nuestro elemento
2:59:18también podríamos personalizar el tamaño
2:59:21de la letra quizás 50
2:59:26genial con este enlace que tenemos
2:59:30actualizado estamos incluyendo estamos
2:59:32descargando los dos tipos de letra o sea
2:59:35que podemos usar ambos tipos de letra en
2:59:37nuestro css
2:59:39digamos que queremos asignar robots a
2:59:42este elemento que tenemos aquí
2:59:45vamos a asignarle
2:59:48ese tipo de letra a los elementos de
2:59:50tipo h3
2:59:52h 3 vamos a google font aquí vemos cómo
2:59:57lo podemos asignar robot y luego
3:00:01volvemos a cargar la página y puedes ver
3:00:03este tipo de letra robot o asignado
3:00:06exactamente el estilo y también el tipo
3:00:09de letra porque puedes ver que está en
3:00:11negrita que escogimos cuando
3:00:14seleccionamos entre los distintos
3:00:15estilos buen trabajo ya sabes cómo usar
3:00:19grupos en la próxima parte si vamos a
3:00:22ver cómo podemos lograr que haya un tipo
3:00:26de letra de respaldo lo vamos a ver en
3:00:28acción vamos a verlo más detalles cómo
3:00:30funciona y qué es lo que ocurre si no se
3:00:32puede cargar esta letra en la próxima
3:00:35parte debe oye
3:00:42vamos a ver cómo actúan estos tipos de
3:00:44letra de respaldo cuando usamos cupones
3:00:47por ejemplo esa fuente o ese tipo de
3:00:50letra se va a descargar de internet y
3:00:54digamos que internet falla o por alguna
3:00:57razón ese tipo de letra o ese archivo no
3:01:00está disponible que es lo que va a
3:01:02ocurrir este tipo de letra va a venir al
3:01:05rescate y se va a utilizar como un
3:01:07respaldo para que igual se pueda
3:01:09presentar la página web vamos a ver un
3:01:11ejemplo de esto pero antes vamos a
3:01:13seleccionar solamente un tipo más de
3:01:16letra para que podamos ver el efecto
3:01:18vamos a escoger este en mundo libre
3:01:24que no sea tan gruesa la letra volvemos
3:01:28a actualizar
3:01:31elemento link para los elementos link en
3:01:36html guardamos y ahora ya podemos usar
3:01:40gemunu libre vamos a asignar selo a los
3:01:44elementos que tenemos aquí a este
3:01:46elemento que es un enlace vamos a
3:01:49asignar solo los elementos a pegamos
3:01:51esta propiedad y si volvemos a cargar la
3:01:55página puedes ver que tenemos las letras
3:01:58personalizadas esta que tenemos aquí qué
3:02:01ocurre si yo pago o deshabilitó el
3:02:04internet en mi caso yo puedo desactivar
3:02:07el internet en mi computadora
3:02:10voy a hacerlo y vamos a ver el resultado
3:02:12ya de se active el internet vamos a
3:02:16volver a cargar la página a ver qué
3:02:17ocurre aquí puedes ver que si se cargó
3:02:22la página correctamente y vemos las
3:02:24letras por qué porque para mejorar la
3:02:27experiencia del usuario
3:02:29el navegador ya guardó ese tipo de letra
3:02:32así que se muestra pero si entramos en
3:02:34el modo incógnito
3:02:37en el cual no tenemos esa función de que
3:02:41algo se pueda guardar y hacemos clic en
3:02:44enter vamos a ese mismo archivo puedes
3:02:47ver que se usan otros tipos de letra
3:02:50porque porque estamos usando el tipo de
3:02:54letra de respaldo sans-serif en lugar de
3:02:57el tipo de letra que habíamos
3:02:59especificado porque como no tenemos
3:03:01internet no se pudo descargar ese tipo
3:03:03de letras y esa familia de fuentes se
3:03:06usa como respaldo pero igual el usuario
3:03:08puede ver la página puede acceder al
3:03:10contenido puedes especificar varios
3:03:13tipos de letra de respaldo por si acaso
3:03:15alguna o algunas no están disponibles
3:03:17sólo tienes que separarlas con una coma
3:03:20y luego un espacio después de la coma y
3:03:23se van a tratar de asignar los tipos de
3:03:25letra de izquierda a derecha genial ya
3:03:29hemos hablado bastante sobre los tipos
3:03:31de letra vamos a volver a nuestra página
3:03:35personalizada aquí
3:03:37en la próxima parte vamos a empezar a
3:03:39hablar sobre las imágenes cómo puedes
3:03:42cambiar o definir su tamaño y cómo
3:03:45puedes personalizar su presentación con
3:03:48cfs así que te veo allí
3:03:56vamos a comenzar a trabajar con una
3:03:58parte muy importante de las páginas web
3:04:00las imágenes
3:04:02podemos escoger su tamaño para que se
3:04:04presenten como nosotros queremos o como
3:04:07nosotros esperamos en la página para eso
3:04:11hay una propiedad llamada web en español
3:04:14significa ancho
3:04:16probemos qué ocurre si usamos el
3:04:19selector de tipo para el elemento img
3:04:22image imagen y la propiedad web
3:04:26el ancho puede tener varias unidades en
3:04:29este caso vamos a seleccionar un ancho
3:04:33de 200 píxeles si volvemos a cargar la
3:04:35página puedes ver que ahora las imágenes
3:04:38se muestran más pequeñas y todas tienen
3:04:40el mismo ancho 200 píxeles pero en
3:04:44reajustadas y mantuvieron también sus
3:04:46proporciones genial en este caso estamos
3:04:49afectando a todas las imágenes de la
3:04:51página porque usamos el selector de tipo
3:04:54pero qué ocurre si solo queremos cambiar
3:04:57el ancho o aplicar ese estilo específico
3:05:00a ciertas imágenes por ejemplo si
3:05:04queremos aplicárselo a las imágenes de
3:05:06gatos para eso tenemos las clases vamos
3:05:10a ver cómo podemos usar una clase para
3:05:12este propósito no vamos a afectar o sea
3:05:14no queremos afectar la imagen de la
3:05:17lasaña pero si las dos imágenes de gatos
3:05:20que tenemos aquí vamos a crear una clase
3:05:22a escribir una clase aquí que se llame
3:05:25imagen de gatos
3:05:28la primera la tenemos aquí como un
3:05:31enlace
3:05:32y podemos por ejemplo antes de out
3:05:35agregar class de esta forma clase imagen
3:05:40de gato
3:05:44y luego aquí abajo aquí
3:05:48imagen de gatos y agregamos la clase a
3:05:52las dos imágenes y ahora nos vamos a dar
3:05:54nuestro archivo css un punto imagen de
3:05:59gatos debe estar escrito exactamente
3:06:01igual si usamos una s aquí en plural la
3:06:05clase en html debe estar escrita de
3:06:08igual forma sino el estilo no se va a
3:06:09aplicar lo que vamos a hacer es
3:06:12asignarle un ancho de 200 píxeles en él
3:06:16vamos a volver a cargar la página y
3:06:19ahora puedes ver que esta imagen está
3:06:21más angosta tiene 200 píxeles esta
3:06:25imagen no fue modificada pero ya vamos a
3:06:27ver por qué para esta imagen no
3:06:30incluimos la s así que tenemos que
3:06:33agregarlo
3:06:35y si volvemos a cargar la página ahora
3:06:38si vemos que la imagen tiene un ancho de
3:06:40200 píxeles que coincide con el ancho de
3:06:43la imagen aquí que tenemos abajo esta
3:06:45imagen no fue afectada porque no tenía
3:06:48esa clase imagen de gatos genial ya
3:06:51sabes cómo controlar el ancho de tus
3:06:54imágenes también podemos hacerla más
3:06:56pequeña por ejemplo digamos 100 píxeles
3:07:00exactamente como queríamos y ves que
3:07:02también la imagen mantiene sus
3:07:04proporciones en la próxima parte vamos a
3:07:07ver cómo puedes agregar un borde
3:07:09alrededor de elementos como las imágenes
3:07:11eso puede ayudar también a resaltar tus
3:07:14imágenes en tu página web o cualquier
3:07:17elemento con el que estés trabajando así
3:07:19que te veo en la siguiente parte
3:07:28con la misma clase que creamos en la
3:07:31parte anterior vamos a ver cómo puedes
3:07:33agregarle un borde a estas dos imágenes
3:07:35como lo podemos hacer con tres
3:07:38propiedades muy importantes el primero
3:07:41es border with wave es ancho y poner es
3:07:46borde se puede traducir como el borde
3:07:49del elemento
3:07:51le asignamos un valor por ejemplo 5
3:07:53píxeles cuanto mayor sea este valor más
3:07:56ancho es el borde también debemos
3:07:59especificar el color del borde digamos
3:08:02que es azul y después border style el
3:08:07estilo del borde
3:08:09el primer estilo que vamos a ver es
3:08:10soler sólo significa sólido en español
3:08:14es básicamente una línea continua
3:08:16alrededor del elemento si volvemos a
3:08:20cargar la página aquí podemos ver el
3:08:22resultado
3:08:23vemos un borde sólido alrededor de la
3:08:28imagen si cambiamos el valor del ancho
3:08:31del borde podemos ver que se hace más
3:08:34pequeño o también podemos hacer que sea
3:08:37más ancho y aquí vemos el borde
3:08:40normalmente tratamos de conseguir un
3:08:43balance depende de la presentación que
3:08:45quieras darle el elemento
3:08:48el color digamos boom y luego el estilo
3:08:51el estilo es algo interesante porque hay
3:08:53muchas opciones para el estilo
3:08:55primero esta norma que se usa para decir
3:09:00que no queremos que haya ningún borde ya
3:09:02no queremos que haya un borde por
3:09:04ejemplo aquí vemos que si ponemos no no
3:09:07existe el borde ya no se muestra
3:09:09normalmente usamos esto si ya veníamos
3:09:11usando un estilo de borde en ciertos
3:09:14elementos y eso se hubiera aplicado a
3:09:17por ejemplo esta imagen pero no queremos
3:09:19que se aplique esa imagen en particular
3:09:21entonces decidimos que para esta imagen
3:09:23no se aplica o los que tengan esta clase
3:09:26bien otro valor que podemos usar estos
3:09:29tests docter significa punteado eso nos
3:09:33daría un borde punteado como puedes ver
3:09:36aquí también podemos tener una línea
3:09:40que está conformada como por pequeños
3:09:43segmentos de líneas elementos aquí
3:09:45pequeños como puedes ver hay pequeñas
3:09:48separaciones dentro de la línea este
3:09:52estas otra opción stop un doble y equipo
3:09:56de ver que tenemos como un borde interno
3:09:57y un borde externo y la separación entre
3:10:00ellos depende de este ancho que
3:10:02especificamos otra opción es cruz que el
3:10:06club es como un surco y vas a ver que se
3:10:09se parece un surco aquí podemos ver que
3:10:12con los colores se genera como un efecto
3:10:15visual que hace como si hubiera un surco
3:10:17en el marco o si el marco estuviera en
3:10:19tres dimensiones
3:10:21otra opción es bridge beige significa
3:10:24cresta en español aquí lo podemos ver
3:10:29y tenemos otras dos opciones insef
3:10:34o out
3:10:38estas son las opciones también podemos
3:10:40personalizar cada uno de los lados del
3:10:43borde no necesariamente porque uno de
3:10:46los lados sea sólido el otro debe ser
3:10:48sólido podemos hacer distintas
3:10:50combinaciones si escribimos un solo
3:10:53valor para el estilo ese estilo se va a
3:10:56aplicar a todos los lados todos los
3:10:58bordes del elemento
3:11:04aquí vemos el resultado de dos valores
3:11:06sólido y potente el primer valor aplica
3:11:10para arriba y para abajo y el segundo
3:11:12valor aplica para la izquierda y para la
3:11:15derecha si escribimos tres valores vamos
3:11:18a especificar por ejemplo quizás solitas
3:11:22y 12 si volvemos a cargar la página
3:11:24puedes ver esta combinación vemos sólido
3:11:27el primer valor se aplica en la parte
3:11:30superior el borde de arriba dust se
3:11:33explican los lados en la derecha en la
3:11:36izquierda y dos sets se aplica en la
3:11:38parte de abajo en el borde inferior y
3:11:42también podemos simplemente especificar
3:11:44los cuatro valores y se van a asignar en
3:11:47el orden de las agujas del reloj ya vas
3:11:50a ver aquí lo tenemos
3:11:53solé para arriba el borde superior dust
3:11:57para la derecha dos test para la parte
3:12:00inferior el borde inferior y tapa para
3:12:03el borde izquierdo en el sentido de las
3:12:07agujas del reloj genial ya sabes cómo
3:12:10personalizar el borde de los elementos
3:12:13de tu página web en la próxima parte
3:12:16vamos a ver cómo puedes hacer que los
3:12:18bordes de tus imágenes o de sus
3:12:21elementos en html sean redondeados esto
3:12:24también nos sirve para crear el efecto
3:12:26de que una imagen es circular presentar
3:12:29por ejemplo esta imagen como un círculo
3:12:30en lugar de un cuadrado bien te veo en
3:12:33la siguiente parte del curso
3:12:40volvemos a nuestra página inicial ahora
3:12:43nuestro archivo css está vacío y
3:12:46queremos crear una clase que se llama
3:12:49bordes redondeados el elemento que tenga
3:12:53esta clase va a tener los bordes
3:12:55ligeramente redondeados normalmente
3:12:57usamos esta propiedad para imágenes la
3:13:00propiedad se llama border beiras radio
3:13:03del borde
3:13:05y dependiendo de su valor cuanto mayor
3:13:07sea el valor en píxeles mayor va a ser
3:13:10el efecto del borde redondeado ya vas a
3:13:13ver a qué me refiero vamos a agregarle
3:13:15esta clase a la imagen del gatito nos
3:13:19vamos para aquí y para mostrarte que no
3:13:22importa el orden de las propiedades
3:13:24vamos a agregarle aquí bordes
3:13:27redondeados
3:13:29guardamos el archivo y volvemos a cargar
3:13:32la página
3:13:34y aquí puedes ver cómo tenemos este
3:13:36lindo efecto de un borde redondeado en
3:13:39la página cuanto mayor sea el valor más
3:13:42visible va a ser ese efecto de redondear
3:13:44aquí lo podemos ver
3:13:46150
3:13:48así lo prácticamente tenemos un círculo
3:13:51perfecto aquí es muy común en internet
3:13:54conseguir imágenes con los bordes
3:13:56redondeados e incluso circulares también
3:13:58puedes especificar este valor como un
3:14:01porcentaje eso lo vamos a ver en la
3:14:03próxima parte
3:14:10si queremos hacer que esta imagen sea un
3:14:14círculo o que tenga los bordes
3:14:16redondeados como un círculo parecido un
3:14:18círculo usaríamos un valor cercano a 50%
3:14:22si volvemos a cargar la página aquí
3:14:24puedes ver que la imagen como era
3:14:27cuadrada ahora se presenta como un
3:14:29círculo si agregamos esta clase bordes
3:14:32redondeados a las otras imágenes que
3:14:35tenemos aquí por ejemplo la hazaña aquí
3:14:38y le agregamos la clase bordes
3:14:41redondeados
3:14:43puedes ver cómo se redondea también la
3:14:45imagen en este caso como la imagen es un
3:14:48rectángulo en lugar de un cuadrado no
3:14:50obtenemos como tal un círculo perfecto
3:14:52más como un óvalo y ese ejemplo es aún
3:14:56más extremo en esta imagen le agregamos
3:14:58la clase bordes redondeados y aquí
3:15:01puedes ver la imagen como se presenta
3:15:05como un óvalo
3:15:06también podemos disminuir este valor por
3:15:09ejemplo a 20% y vas a ver que ahora los
3:15:13bordes son redondeados pero nos forman
3:15:15como tal un círculo un óvalo cuanto
3:15:17menor sea el valor menos redondeado van
3:15:20a ser los bordes normalmente usamos 50%
3:15:24si queremos que la imagen sea circular
3:15:26ovalado genial ya sabes cómo redondear
3:15:29los bordes de las imágenes e incluso
3:15:31presentarlas en forma de círculo en la
3:15:34próxima parte vamos a empezar a trabajar
3:15:36con los contenedores generales los 10
3:15:38cómo podemos asignarles un color de
3:15:41fondo veámoslo en la próxima parte
3:15:50bien ahora vamos a borrar esta regla y
3:15:53vamos a ver cómo puedes cambiar el color
3:15:57de fondo de un día un día vimos que es
3:16:00como un contenedor con un propósito
3:16:02general lo usamos para actuar como un
3:16:04contenedor para cualquier tipo de
3:16:06elemento y dijimos que los tips iban a
3:16:09ser muy importantes cuando empezamos a
3:16:12trabajar con css porque podíamos
3:16:14asignarles un estilo y ese estilo se iba
3:16:17a aplicar también a los elementos
3:16:20contenidos en el tiff bien así que aquí
3:16:23tenemos nuestro test que teníamos en
3:16:25html que contiene las listas de las
3:16:28cosas que los gatos amas y las cosas que
3:16:30los gatos odian también podríamos si
3:16:34queremos por ejemplo colocar esta imagen
3:16:37dentro del 10 la imagen que corresponde
3:16:40a los gatitos vamos a empezar usando un
3:16:44selector de tipo vamos a seleccionar
3:16:46todos los elementos de tipo tif y vamos
3:16:50a
3:16:51su color de fondo
3:16:53background significa fondo en español y
3:16:56color color color de fondo le vamos a
3:16:59asignar al color azul
3:17:01si volvemos a cargar la página aquí
3:17:03podemos ver el color azul de fondo y
3:17:06confirmamos que en realidad si existía
3:17:09ese contenedor lo que es que estaba como
3:17:12transparente allí haciendo su función de
3:17:15generar la estructura de la página pero
3:17:17ahorita ya podemos hacer que sea visible
3:17:20y podemos confirmar que existe en este
3:17:22caso en tip se está extendiendo más allá
3:17:25de la imagen veamos qué ocurre si
3:17:28volvemos a colocar la imagen fuera del
3:17:30dif
3:17:32vamos a copiar este elemento
3:17:36y lo pegamos aquí fuera del contenedor
3:17:40si volvemos a cargar la página puedes
3:17:43ver que ahora en ti es como que se
3:17:44encogió porque ya sólo cubre hasta esta
3:17:48lista no contiene a la imagen y así
3:17:52puedes ver visualmente qué es lo que
3:17:54ocurre cuando creamos un dif en nuestra
3:17:56página estamos creando algo que está
3:17:58allí presente y que inicialmente es
3:18:00transparente y que sirve como un
3:18:02contenedor para los elementos también
3:18:04podemos agregarle una clase antes vamos
3:18:08a agregarle la clase
3:18:11con tenedor listas y así la vamos a
3:18:14aplicar un estilo específico y vamos a
3:18:17asignarle el color plateado silver en
3:18:20inglés si volvemos a cargar la página
3:18:22aquí puedes ver también funcionan las
3:18:25clases y esto abre todo un mundo de
3:18:28posibilidades lo vas a ver también más
3:18:30adelante cuando empecemos a ver las
3:18:32variables css como los días pueden ser
3:18:35transformados y como pueden cambiar su
3:18:38forma y su aspecto para crear
3:18:40estructuras increíbles ahorita sólo
3:18:42estamos viendo que ellos existen en
3:18:44realidad y que son parte de la
3:18:46estructura de la página bien hasta ahora
3:18:48hemos trabajado principalmente con las
3:18:50clases en css así que vamos a ver cómo
3:18:54puedes trabajar con un haití en la
3:18:55próxima parte
3:19:02nuevamente comenzamos con el estado
3:19:05inicial de nuestra página y tenemos un
3:19:07archivo css vacío porque porque vamos a
3:19:10usar idish el haití es un identificador
3:19:14único para un elemento en tu página si
3:19:17vamos aquí a nuestro archivo html
3:19:20podemos ver el elemento h 2 si nosotros
3:19:24queremos asignarle un estilo solamente a
3:19:28ese elemento podemos asignarle un haití
3:19:31y solo se va a aplicar ese estilo a ese
3:19:33elemento específico le tendríamos que
3:19:36asignar un haití por ejemplo título a
3:19:39datos o título principal tu puedes
3:19:42escoger el nombre que te parezca más
3:19:44descriptivo y una de las convenciones es
3:19:47separar las palabras con un guión al
3:19:49igual que hacíamos con las clases
3:19:52vamos a css y ahora en lugar de escribir
3:19:56un punto como hacíamos con las clases
3:19:58vamos a escribir un símbolo de numeral
3:20:00título up datos ese numeral le dice acs
3:20:05se le dice el navegador o el browser que
3:20:08lo que estamos escribiendo aquí es el
3:20:10nombre de un ied y de un identificador
3:20:13único
3:20:14que vamos a asignarle como estilo a ese
3:20:17elemento vamos a especificar un tamaño
3:20:20de letra de 30 píxeles color del texto
3:20:24va a ser verde wing
3:20:27el tipo de letra va a ser
3:20:30este que tenemos aquí que nos lo auto
3:20:33completo y es con genial vamos a volver
3:20:36a cargar nuestra página y podemos ver el
3:20:39estilo aplicado solamente a ese elemento
3:20:42vemos un tamaño de letra más grande
3:20:44vemos un color específico y un tipo de
3:20:46letra distinto genial vamos a practicar
3:20:50nuevamente con digamos esta imagen que
3:20:54tenemos aquí abajo vamos a asignarle un
3:20:56estilo específico a ese elemento
3:21:00para eso debemos conseguirlo nuestro
3:21:02archivo si colocamos nuestro editor de
3:21:05código en pantalla completa vamos aquí
3:21:09y este es el elemento de la imagen de
3:21:11los gatitos y ahora le vamos a asignar
3:21:15una
3:21:16imagen de gatos si vamos a nuestro
3:21:19archivo css escribimos el símbolo de
3:21:21numeral y colocamos el nombre de lady
3:21:25imagen de gatos
3:21:27s ti es único para esta imagen el estilo
3:21:30que vamos a aplicar se va a aplicar solo
3:21:33a esta imagen por ejemplo podemos decir
3:21:36que queremos asignarle un borde y
3:21:39queremos que la imagen sea redondeada
3:21:42podemos asignar un border 22 de 50% para
3:21:46que la imagen sea redondeada podemos
3:21:49asignar
3:21:51un ancho del borde el estilo va a ser
3:21:53sólido y el color digamos que es marrón
3:21:56brawn si guardamos el archivo y volvemos
3:21:59a cargar la página aquí podemos ver el
3:22:02resultado
3:22:02podemos verlo en pantalla completa
3:22:04también aquí tenemos nuestro borde
3:22:07sólido alrededor de una imagen
3:22:09redondeada y puedes ver que nos afectó a
3:22:11ningún otro elemento en la página genial
3:22:14el uso de haití es muy importante
3:22:17también cuando comiences a trabajar con
3:22:19javascript los haitís además de
3:22:21permitirnos especificar un estilo único
3:22:24para ese elemento también nos permite
3:22:26que javascript seleccione ese elemento y
3:22:29actúe sobre ese elemento de forma única
3:22:32genial vamos a practicar con dos
3:22:35elementos más cómo puedes asignarles un
3:22:37haití y cómo puedes personalizar su
3:22:39estilo
3:22:40vamos a personalizar el estilo de la
3:22:43lista de las cosas que los gatos aman y
3:22:46la lista de las cosas que los gatos o
3:22:48bien vamos a aquí tenemos que de subir
3:22:51un poquito y llegamos a la lista vamos a
3:22:55asignarle una idea al elemento web y ya
3:22:59vas a ver qué es lo que va a pasar listo
3:23:02gatos aman por ejemplo lista de las
3:23:06cosas que los gatos aman para no hacerlo
3:23:08tan largo el nombre sólo vamos a incluir
3:23:11esas tres palabras y también vamos a
3:23:13asignarle aquí un haití lista gatos
3:23:17odian
3:23:19ya tenemos los dos aires ahora vamos a
3:23:22especificar el estilo
3:23:25lista gatos aman vamos a asignarle un
3:23:29tamaño de letra de 15 píxeles
3:23:32luego el color vamos a asignarle azul
3:23:36violeta blue bay o led y para lista
3:23:40gatos odian
3:23:42vamos a asignarle un tamaño de letra
3:23:44específico 18 píxeles y el tipo de letra
3:23:49va a ser
3:23:51harian
3:23:53helvética
3:23:55y sans-serif de respaldo si guardamos el
3:23:59archivo y volvemos a cargar la página
3:24:01aquí puedes ver el estilo aplicado a
3:24:04cada una de las listas y algo muy
3:24:07curioso es como el estilo cae en cascada
3:24:09de allí viene el nombre css la cec en
3:24:13inglés significa qashqai link que cae en
3:24:16cascada representa este efecto que vemos
3:24:18aquí cuando nosotros le asignamos al
3:24:21elemento huele studying estamos
3:24:24asignando selo el elemento huele y ese
3:24:29elemento principal tiene tres elementos
3:24:33internos o contiene tres elementos el e
3:24:36y el estilo como que cae en cascada a
3:24:40través de la estructura que nosotros
3:24:42creamos porque puedes ver que aquí
3:24:43nosotros estamos especificando el color
3:24:46del texto para el elemento l que es el
3:24:50que tiene el haití pero ese mismo color
3:24:53de texto se aplicó para los elementos l
3:24:55y internos aquí lo tenemos así que el
3:25:00estilo está como cayendo en cascada y
3:25:02eso es precisamente el principio de css
3:25:05genial ya sabes cómo trabajar con haití
3:25:08ccss recuerda que tienes que escribir un
3:25:12símbolo del numeral un hashtag seguido
3:25:15de el nombre de lighting y luego las
3:25:18sintaxis es básicamente la misma llaves
3:25:21y dentro de las llaves en cada línea una
3:25:24propiedad con su valor y al final de
3:25:26cada propiedad un punto y coma genial
3:25:29pasemos a nuestro siguiente tema vamos a
3:25:31comenzar a ver algo muy muy importante
3:25:34en desarrollo web cómo puedes controlar
3:25:36el espacio que hay alrededor de tus
3:25:38elementos para que se presenten como tú
3:25:40lo deseas
3:25:41así que continuemos te veo allí
3:25:49bien comenzamos viendo el concepto de
3:25:52padding el padre en html es la distancia
3:25:56que hay entre el borde de un elemento
3:25:59html que normalmente es un cuadrado un
3:26:02rectángulo y su contenido porque por
3:26:06ejemplo aquí tenemos una nueva
3:26:07estructura html de nuestro archivo que
3:26:10solo contiene una imagen esta imagen que
3:26:13vemos aquí dentro de un dif st tiene un
3:26:18borde específico vamos a ver cómo
3:26:21podemos controlar el espacio entre ese
3:26:23borde y el contenido de cada uno de los
3:26:25elementos ya lo vas a ver visualmente
3:26:28vamos a asignarle un color de fondo
3:26:32el 10 que actúa como un contenedor vamos
3:26:36a asignarle el color crimson si volvemos
3:26:38a cargar la página aquí puedes ver dónde
3:26:41está ubicado el tiempo la imagen está
3:26:44alineada su esquina superior izquierda
3:26:46está alineada con la esquina superior
3:26:48izquierda del dif por defecto y aquí
3:26:52podemos ver que todavía queda un espacio
3:26:54del tiff que no está lleno el deber
3:26:56contiene la imagen ahora si queremos
3:27:00ilustrar el efecto de agregarle padding
3:27:03a una imagen primero para ilustrarlo
3:27:06vamos a asignarle un color de fondo
3:27:08amarillo si volvemos a cargar la página
3:27:11no lo vamos a ver porque en este momento
3:27:13la imagen llena la totalidad del
3:27:17elemento imagen
3:27:19sé que ahorita puede parecer un poco
3:27:21abstracto pero sea aquí piensa como que
3:27:23el elemento de la imagen llega hasta un
3:27:26borde específico que es donde ve desde
3:27:28el borde de la imagen
3:27:30pero este elemento en html su contenido
3:27:34es la imagen como tal
3:27:35vamos a ver lo vamos a ilustrar lo
3:27:38añadimos un color de fondo para
3:27:41visualizar dónde está el borde del
3:27:44elemento de la imagen vamos a asignarle
3:27:47a un ancho luego un color vamos a
3:27:50asignarle el color negro porque el fondo
3:27:53va a ser amarillo si podemos verlo bien
3:27:55y el estilo va a ser sólido si volvemos
3:27:58a cargar la página puedes ver que ahora
3:28:00vemos un borde negro alrededor de el
3:28:04elemento
3:28:05en este momento la imagen llena la
3:28:07totalidad del elemento de imagen pero si
3:28:11le agregamos una propiedad llamada
3:28:14padding y escogemos un valor por ejemplo
3:28:1715 píxeles vas a ver qué es lo que
3:28:20ocurre aquí lo tenemos es como su margen
3:28:24interno lo podrías pensar así no es un
3:28:26margen como tal le asignamos el nombre
3:28:28karen pérez la distancia entre ese
3:28:29contenido y su borde
3:28:32el fondo de la imagen es amarillo por
3:28:35eso vemos aquí el fondo amarillo puedes
3:28:38pensarlo como que el elemento html
3:28:40existe y es transparente
3:28:43y sirve como un contenedor y su
3:28:45contenido como tal es la imagen pero
3:28:47también podemos especificar este espacio
3:28:49si vamos a las herramientas de
3:28:51desarrolladores de google chrome hacemos
3:28:53clic derecho el inspector y sobre la
3:28:55imagen del gatito
3:28:57podemos ver aquí aquí abajo en este
3:29:00panel en styles mientras tenemos
3:29:03seleccionado el elemento de la imagen
3:29:05podemos ver aquí un elemento que se
3:29:08llama par en ese pared está ahorita
3:29:11seleccionando la parte amarilla
3:29:15que podemos ver y dentro está el
3:29:18contenido hasta la imagen y luego está
3:29:21el borde el padre luego el borde y
3:29:24después viene algo que llamamos el
3:29:26margen que lo vamos a ver en la próxima
3:29:28parte del curso por ahora nos centramos
3:29:30en primero el contenido luego el padre
3:29:33que lo tenemos en amarillo luego el
3:29:36borde
3:29:37finalmente el margen para verlo más
3:29:41claramente creo que si le asignamos el
3:29:43valor morado el color morado aquí y
3:29:46colocamos el cursor sobre parent también
3:29:48se puede ver más claramente puedes ver
3:29:51cómo estamos seleccionando esa parte y
3:29:53se vuelve violeta más claro ok recuerda
3:29:56el padre entonces es la distancia entre
3:29:59el contenido de un elemento html y su
3:30:02borde para que hay un espacio entre el
3:30:05contenido y el borde del elemento porque
3:30:07el borde del elemento va a ser
3:30:10esencial para determinar la distancia
3:30:12que hay entre un elemento y otro en la
3:30:15página web genial pasemos a la siguiente
3:30:19parte donde vamos a ver cómo puedes
3:30:20asignar distintos valores de parís para
3:30:23cada lado del elemento porque no
3:30:27necesariamente debemos tener el mismo
3:30:28paren en todos los lados del elemento
3:30:31así que continuemos y pasemos a la
3:30:34siguiente parte
3:30:40ahora veamos cómo puedes asignarle un ar
3:30:43indistinto a cada uno de los lados de tu
3:30:46elemento porque en este momento puedes
3:30:48ver que el park inn en el borde superior
3:30:51es igual al parking en el borde derecho
3:30:54al borde izquierdo y el borde inferior
3:30:56como podemos personalizarlo para cada
3:30:59borde dependiendo de cómo queremos
3:31:00presentar el contenido simplemente en
3:31:03lugar de escribir padding lo que
3:31:05escribimos es para ir seguido de un
3:31:08guión y especificamos el borde al cual
3:31:12nos estamos refiriendo paddington es el
3:31:15borde superior top es se refiere al
3:31:18borde superior
3:31:19luego podemos colocar marín brain el
3:31:23parking en el borde derecho right
3:31:26significa derecho el par en life lift
3:31:30significa izquierdo
3:31:32por ejemplo 10 píxeles y finalmente
3:31:36padding en el borde inferior varón 10
3:31:40píxeles ahora puedes ver que la
3:31:42distancia entre el contenido del
3:31:45elemento que es la imagen y su x ven no
3:31:48es la misma en la parte superior que en
3:31:50la parte inferior y no es la misma en la
3:31:52parte izquierda que en la parte derecha
3:31:55hay una forma aún más concisa de
3:31:58especificar esto en lugar de tomar
3:32:00cuatro líneas para especificar cada uno
3:32:02de los bordes simplemente podemos
3:32:06escribirlos en una sola línea vas a
3:32:08aprender cómo en la próxima parte
3:32:15para especificar el padre indicado uno
3:32:18de los lados del elemento en una sola
3:32:20línea en lugar de cuatro como tenemos
3:32:23aquí solo debemos escribir paren de
3:32:26forma general es estar en y luego
3:32:29especificamos los valores en el sentido
3:32:31de las agujas del reloj comenzando con
3:32:34el borde superior que es 20 en este caso
3:32:37sí que podemos ya borrar esto luego
3:32:40sería el borde derecho recuerda que el
3:32:43reloj hace este movimiento así que vamos
3:32:45del borde superior al borde derecho el
3:32:48borde derecho debería tener 15 píxeles
3:32:51según nuestras reglas anteriores
3:32:53luego en lugar de ir a la izquierda
3:32:55iríamos al borde inferior sería 5
3:32:58píxeles y finalmente el borde izquierdo
3:33:0110 píxeles
3:33:04aquí ya podemos borrar estas dos líneas
3:33:06y tenemos el padre especificado para
3:33:08cada uno de los valores en el sentido de
3:33:11las agujas del reloj si volvemos a
3:33:14cargar la página puedes ver que el
3:33:17efecto fue exactamente el mismo tenemos
3:33:19el parís superior el derecho el inferior
3:33:22y el izquierdo en el sentido de las
3:33:25agujas del reloj ya sabes cómo trabajar
3:33:28con el paren recuerda que es la
3:33:30distancia entre el contenido de un
3:33:31elemento y su borde pero también podemos
3:33:36especificar la distancia que debe haber
3:33:38entre el borde del elemento y otros
3:33:41elementos que lo contengan o que estén
3:33:43junto al elemento eso se denomina el
3:33:46margen pasemos a la siguiente parte para
3:33:48comenzar a hablar sobre el margen
3:33:55continuamos con nuestro ejemplo con la
3:33:57imagen del gatito y el tic que lo
3:33:59contiene ahora en lugar de hablar del
3:34:02padre vamos a hablar del margen el
3:34:04margen el margen es la distancia entre
3:34:07el borde de un elemento por ejemplo aquí
3:34:10tenemos el borde negro del elemento de
3:34:12la imagen y el borde de otros elementos
3:34:16que es básicamente cómo vamos a separar
3:34:19los distintos elementos antes estábamos
3:34:22separando el contenido de un elemento de
3:34:24su borde ahora vamos más allá del borde
3:34:27y separamos un borde de otro borde de
3:34:30otro elemento básicamente con el margen
3:34:32logramos la separación entre los
3:34:34elementos de la página un ejemplo es la
3:34:36separación entre esta imagen y su
3:34:39contenedor en este momento vemos que la
3:34:42esquina superior izquierda de la imagen
3:34:45está alineada con su contenedor en tiff
3:34:47porque no vemos un borde rojo aquí que
3:34:50es el el 10 el contenedor están
3:34:53alineados pero si queremos agregar un
3:34:55borde citó entre la imagen y su
3:34:58contenedor para presentación
3:35:01deberíamos usar el margen para esto
3:35:04escribimos margen en inglés y tenemos 15
3:35:08píxeles volvemos a cargar la página y
3:35:10aquí puedes ver cómo se separan esas
3:35:13esquinas porque estamos agregando 15
3:35:16píxeles de distancia en el borde
3:35:18superior en el borde derecho en el borde
3:35:21inferior y en el borde izquierdo aquí lo
3:35:23podemos ver en pantalla completa en este
3:35:26caso es si estamos agregando los 15
3:35:29píxeles en el borde derecha pero como el
3:35:3110 toma todo el ancho de la pantalla no
3:35:34se nota pero si hubiera otro elemento
3:35:37aquí al lado tendría 15 píxeles de
3:35:40separación vamos a cambiar el color del
3:35:44borde a blanco para poder verlo mejor ac
3:35:47puedes ver la distancia que hay entre el
3:35:51borde blanco y el borde del contenedor
3:35:54tenemos una distancia entre ese borde y
3:35:56el borde del contenedor igual que
3:35:58tendríamos entre este borde y cualquier
3:36:01otro elemento que esté alrededor de la
3:36:04imagen del gatito ese es el propósito
3:36:06del margen veamos en las herramientas de
3:36:09desarrolladores de chrome cómo se
3:36:12presenta esta imagen hacemos clic
3:36:13derecho sobre el elemento luego
3:36:15inspector
3:36:17y aquí en el panel inferior
3:36:19seleccionando la imagen vamos nuevamente
3:36:23a esta presentación que nos habla sobre
3:36:25el contenido del elemento que es la
3:36:27imagen luego sobre el fading que en este
3:36:31momento no existe no tenemos paren
3:36:33porque no lo estamos personalizando en
3:36:36css así que vemos una rayita no existe
3:36:39luego tenemos el borde que es la línea
3:36:42blanca podemos ver cómo pasa de blanco
3:36:44amarillo cuando lo seleccionamos y
3:36:47finalmente aquí tenemos un margen ese
3:36:50margen que ahorita estás viendo en
3:36:52naranja tiene un valor de 15 píxeles
3:36:55podemos ver el número 15 aquí y
3:36:57básicamente ningún otro elemento va a
3:37:00estar dentro de esa distancia del
3:37:02elemento de la imagen es la distancia
3:37:04entre este elemento y cualquier otro
3:37:06elemento que lo rodee o que lo contenga
3:37:09ese es el propósito del margen en html y
3:37:13es muy importante comprender la
3:37:15diferencia entre el margen y el par en
3:37:17el margen y estar en vamos a ver la
3:37:20diferencia entre martín y padding más
3:37:22adelante en el curso unos minutos en la
3:37:25próxima parte vamos a ver cómo puedes
3:37:27especificar un margen diferente para
3:37:30cada uno de los bordes así que veamos
3:37:32cómo puedes hacerlo en la próxima parte
3:37:41digamos que en lugar de tener el mismo
3:37:44valor para el margen en cada uno de los
3:37:47lados del elemento
3:37:49queremos que el margen superior sea
3:37:51mayor que el inferior o que el derecho
3:37:54sea más amplio más ancho que la
3:37:56izquierda podemos hacerlo con
3:37:59propiedades específicas las mismas
3:38:02propiedades que teníamos comparen pero
3:38:04ahora tenemos margen margin top 20
3:38:08margin right
3:38:1015 por ejemplo sólo un ejemplo valores
3:38:13de muestra
3:38:15margin bottom que si el margen inferior
3:38:19y margin-left el margen izquierdo como
3:38:23tenemos especificadas cada una de estas
3:38:25propiedades de forma individual no
3:38:27tenemos que colocar esta propiedad si
3:38:30volvemos a cargar la página puedes ver
3:38:33como ahora el margen izquierdo es mucho
3:38:35más angosto mucho más pequeñito porque
3:38:38estamos asignando son los 5 píxeles a
3:38:40ese margen no necesariamente también
3:38:42tienes que especificar todos los
3:38:45márgenes por ejemplo si no quieres que
3:38:47haya un margen superior
3:38:48simplemente no lo incluyes y de esta
3:38:51forma la imagen va a estar
3:38:53inmediatamente
3:38:55alineada con el borde superior de su
3:38:57contenedor no va a haber separación
3:39:00también puedes colocarlo así y puedes
3:39:02ver cómo simplemente podemos
3:39:04personalizar cómo se va a separar
3:39:05nuestro elemento de otros elementos y de
3:39:08su contenedor genial y también hay otra
3:39:12forma mucho más concisa de escribir el
3:39:14margen en una sola línea al igual que
3:39:17hacíamos con el par y eso lo vamos a ver
3:39:19en la próxima parte vamos a volver a
3:39:22cargar la página y vemos nuevamente el
3:39:24resultado
3:39:30al igual que hacíamos con el park inn
3:39:32podemos especificar el marcha y en el
3:39:35margen en una sola línea
3:39:37de esta forma escribimos margin y en
3:39:41lugar de especificar cada una de estas
3:39:43individualmente en la misma línea las
3:39:45escribimos en el sentido de las agujas
3:39:47del reloj
3:39:49primero el margen superior luego el
3:39:51margen derecho que sería 15 píxeles el
3:39:55margen inferior
3:39:5610 píxeles y finalmente el margen
3:39:59izquierdo que sería 5 píxeles vamos de
3:40:02esta forma superior derecho inferior
3:40:05izquierdo
3:40:07ahora podemos borrar estas líneas y
3:40:11puedes ver cómo tenemos css mucho más
3:40:14conciso en una sola línea especificamos
3:40:16esas cuatro propiedades también si
3:40:19queremos asignar el mismo margen
3:40:22arriba y abajo izquierda a derecha
3:40:25simplemente lo que tenemos que hacer es
3:40:27especificar dos valores este se
3:40:30aplicaría a el margen superior y el
3:40:32margen inferior y éste se aplicaría al
3:40:35margen izquierdo y derecho aquí lo
3:40:37podemos ver podemos comprobar que se
3:40:40está aplicando estos márgenes con las
3:40:44herramientas de desarrolladores de
3:40:45chrome si abrimos nuevamente las
3:40:48herramientas seleccionando la imagen
3:40:51aquí podemos ver el valor del margen
3:40:54superior es 20 derecho es 15 inferiores
3:41:0020 e izquierdo es 15 le asignamos
3:41:04superior e inferior el mismo valor y
3:41:06derecho izquierdo el mismo valor con dos
3:41:09valores que tenemos aquí genial esta es
3:41:11otra forma también de especificar lo de
3:41:13forma más precisa en lugar de escribir
3:41:16esto escribir valores repetidos sólo
3:41:18escribimos dos valores superior inferior
3:41:21derecho izquierdo ya sabes cómo trabajar
3:41:25con el margen y con el padre con el
3:41:27margen y con el marín ahora creo que es
3:41:31importante dedicar también algunos
3:41:33minutos a hablar sobre sus diferencias e
3:41:35ilustrar las visualmente así que en la
3:41:37próxima parte vamos a ver en el mismo
3:41:40elemento el martín y atar en y cómo
3:41:43funcionan como están relacionados uno
3:41:45con el otro y sus diferencias
3:41:52vamos a ver la diferencia entre el
3:41:55margin y el karim visualmente con la
3:41:58imagen del gatito en el mismo elemento
3:42:00vamos a asignar margen y tar en martín y
3:42:04paren vamos a borrar esta propiedad por
3:42:07el momento y vamos a hacer algunos
3:42:09ajustes
3:42:10antes de
3:42:12comenzar a ver las diferencias el ancho
3:42:15del borde lo vamos a colocar en 4
3:42:17píxeles el color del borde va a ser
3:42:20negro y el estilo sólido ok podemos
3:42:23colocarlo en negro o también dejarlo en
3:42:26blanco pero creo que en este caso el
3:42:29negro nos va a ilustrar más porque vamos
3:42:31a poder ver el borde aquí junto al tigre
3:42:34así que vamos a comenzar a ver la
3:42:36diferencia vamos a asignar un margen de
3:42:3825 píxeles y un párking de 25 píxeles a
3:42:43todos los lados del elemento imagen que
3:42:46vamos a volver a cargar este elemento y
3:42:49aquí lo podemos ver en pantalla completa
3:42:52el paren
3:42:54la distancia que hay entre la imagen que
3:42:57es el contenido de ese elemento y su
3:42:59borde el borde negro que tenemos aquí es
3:43:02el borde de el elemento imagen y esta
3:43:07distancia que tenemos aquí amarilla este
3:43:10amarillo es el par en que estamos
3:43:11asignando como tal el padre y no tiene
3:43:14un color no es que el padre es amarillo
3:43:17el color amarillo es el fondo que le
3:43:19estamos asignando a ese elemento de
3:43:21imagen aquí lo puedes ver estamos
3:43:23asignando le un color de fondo amarillo
3:43:26al elemento imagen y ese es el color que
3:43:29se ve aquí para ilustrar para que veamos
3:43:31que si hay una distancia entre estas dos
3:43:34partes del elemento entre el contenido y
3:43:36su borde este es el padre ahora una vez
3:43:39que llegamos al borde de el elemento
3:43:41tenemos una distancia externa
3:43:44con otros elementos eso es lo que
3:43:47denominamos margen el margen es esta
3:43:50distancia que puedes ver en rojo entre
3:43:52el borde de la imagen y su contenedor
3:43:55también sería la distancia entre ese
3:43:57borde y cualquier otro elemento que lo
3:43:59rodea ese es el margen puedes ver la
3:44:02diferencia el parís se puede considerar
3:44:05como una distancia interna entre el
3:44:08borde o la frontera del elemento y su
3:44:10contenido y el margen es una instancia
3:44:12externa con otros elementos
3:44:14veamos las herramientas de
3:44:16desarrolladores de chrome seleccionamos
3:44:18la imagen vemos que el contenido es una
3:44:21imagen la imagen del gatito de 281 por
3:44:24281 su tamaño luego viene una distancia
3:44:28que se llama el área con un valor de 25
3:44:31a cada lado
3:44:32imagen paren luego vemos el borde el
3:44:36borde tiene un tamaño un ancho de 4
3:44:39píxeles por eso vemos el valor 4 aquí y
3:44:42se marca el borde en la página imagen
3:44:46estar en borde y luego cuando ya vamos
3:44:49fuera del borde tenemos un margen de 25
3:44:51píxeles esto lo vemos aquí en naranja en
3:44:55la página y el 25 píxeles a cada lado
3:44:59puedes ver como el mismo elemento puede
3:45:01tener karim que es como un margen
3:45:03interno y el margen que es la distancia
3:45:07entre el elemento y los elementos que lo
3:45:10rodean
3:45:11veamos qué pasa si quitamos el color de
3:45:15fondo de estos elementos para que no sea
3:45:17tan obvio que es algo que normalmente
3:45:19vamos a hacer en las páginas web vamos a
3:45:21asignarle margen y padre y sin tener
3:45:24necesariamente un color de fondo
3:45:27vamos a quitar esto pero si vamos a
3:45:30asignarle un borde al contenedor antes
3:45:33vamos a copiar estas tres propiedades
3:45:37para que podamos ver la distancia que
3:45:39hay entre los elementos
3:45:40volvemos a cargar la página y podemos
3:45:43ver esto ahora este es este el
3:45:46contenedor que tenemos por fuera
3:45:48tenemos el elemento de la imagen y no se
3:45:52ve ningún color de fondo pero si vemos
3:45:55el espacio y eso es lo que va a ocurrir
3:45:57en las páginas web normalmente vamos a
3:45:59ver es un espacio en la estructura de la
3:46:02página y eso nos va a permitir
3:46:04personalizar aún más la ubicación del
3:46:07contenido y de los elementos genial ya
3:46:09puedes trabajar con margin y comparen
3:46:18bien ahora que ya sabes cómo trabajar
3:46:21comparen y con margin en css ahora vamos
3:46:24a comenzar a ver un tipo de selector
3:46:27distinto
3:46:28inicialmente trabajamos con los
3:46:30selectores de clase y los selectores de
3:46:32haití en este momento vamos a comenzar a
3:46:35trabajar con los selectores de atributo
3:46:37veamos la documentación a ver qué nos
3:46:40dice sobre este tipo de selector
3:46:42selectores de atributos los elementos
3:46:45pueden tener atributos que proporcionan
3:46:48un nivel de detalle mayor sobre el
3:46:50elemento que delimitan esto todo lo
3:46:53hemos visto durante el curso los
3:46:55atributos como por ejemplo hr fo out en
3:46:58las imágenes
3:47:00esos son atributos en css puedes
3:47:04utilizar selectores de atributo para
3:47:06seleccionar elementos definidos con unos
3:47:09atributos determinados
3:47:11básicamente vamos a usar los selectores
3:47:13de atributo para seleccionar solamente
3:47:16los elementos que tienen ciertos
3:47:18atributos
3:47:19aquí tenemos algunos ejemplos selectores
3:47:23de presencia y valor
3:47:25estos electores permiten seleccionar un
3:47:27elemento a partir de la presencia de un
3:47:30atributo por ejemplo a ser rey oa partir
3:47:33de varias coincidencias diferentes con
3:47:35respecto al valor del atributo vamos a
3:47:38ver algunos ejemplos en esta tabla este
3:47:41es un ejemplo de un selector de
3:47:42atributos por ejemplo aquí tenemos a y
3:47:47entre corchetes está el título cuando
3:47:50usamos este selector estamos escogiendo
3:47:53los elementos de tipo a que tienen el
3:47:55atributo tyrone cuando usamos esto que
3:47:59es un poquito más elaborado estamos
3:48:01seleccionando los elementos que tengan
3:48:03un atributo con un valor específico por
3:48:06ejemplo aquí estaríamos seleccionando
3:48:07todos los elementos de tipo a los
3:48:10enlaces que llevan a esta dirección web
3:48:13específica con este valor del atributo a
3:48:16ser draft
3:48:17también tenemos otras variaciones pero
3:48:20en este curso vamos a trabajar con estos
3:48:24dos ejemplos principales seleccionar los
3:48:27elementos que tengan un atributo
3:48:28específico y elementos que tengan un
3:48:31atributo con un valor específico
3:48:33comencemos a ver nuestro ejemplo tenemos
3:48:36nuevamente nuestra página de los gatitos
3:48:38el mismo archivo html con el que hemos
3:48:42estado trabajando y aquí vamos a ir a
3:48:45nuestro archivo css digamos que queremos
3:48:49asignarle un estilo por ejemplo a todas
3:48:53las imágenes que tengan el atributo out
3:48:56si sigues las recomendaciones todas las
3:48:59imágenes deberían tener un atributo out
3:49:01pero este ejemplo es simplemente para
3:49:04ilustrar cómo funcionan los selectores
3:49:06de atributo aquí si vamos por ejemplo a
3:49:10la imagen de la lasaña podemos ver que
3:49:13ese elemento tiene aquí el atributo out
3:49:17así que ese elemento debería ser
3:49:19seleccionado al igual que cualquier otra
3:49:22imagen que tenga este atributo definido
3:49:26vamos a asignarle un por rangers de 50%
3:49:32para que sea circular
3:49:34con los bordes redondeados volvemos a
3:49:37cargar la página y aquí podemos ver que
3:49:39todas las imágenes han sido redondeadas
3:49:42porque todas tenían un atributo out como
3:49:45debe ser pero ahora vamos a probar qué
3:49:47ocurre si le quitamos ese atributo al
3:49:51elemento de la imagen de la lasaña por
3:49:54ejemplo esto es sólo un ejemplo para
3:49:55ilustrar cómo funcionan los selectores
3:49:58de atributos volvemos a cargar la página
3:50:01y ya puedes ver que ahora esta imagen no
3:50:03fue afectada por ese estilo no se le
3:50:06asignó ese estilo porque no tiene el
3:50:09atributo out no fue seleccionada por
3:50:11este selector de css
3:50:14vamos a colocar nuevamente este atributo
3:50:16y puedes ver como ahora sí fue
3:50:19seleccionado genial ahora digamos que
3:50:23queremos seleccionar todos los elementos
3:50:26de tipo radio
3:50:28ok todos estos elementos de tipo radio
3:50:31que serían estos dos puntitos que
3:50:34tenemos aquí si vamos a nuestro archivo
3:50:37html
3:50:38vamos a colocarlo en pantalla completa y
3:50:41llegamos a nuestro formulario vamos a
3:50:44los botones de radio vemos que para
3:50:46seleccionar
3:50:47esos elementos en realidad sería un poco
3:50:51complicado si no usáramos selectores de
3:50:54atributos por qué porque tenemos varios
3:50:57elementos
3:50:58del mismo tipo por ejemplo input tiempos
3:51:02puede ser de tipo radio pero también
3:51:04puede ser de tipo chef box y también
3:51:07puede ser de tipo text así que si usamos
3:51:10como tal el selector de tipo input no
3:51:14vamos a obtener lo que queremos que
3:51:16solamente seleccionar los botones de
3:51:18radio lo único que podríamos hacer es
3:51:21asignarle en una clase a todos los
3:51:23botones de tipo radio pero hay una forma
3:51:26mucho más concisa de hacerlo que asignar
3:51:28clases porque queremos seleccionar todos
3:51:32los elementos de tipo input que tienen
3:51:35a tributo con este valor específico el
3:51:38tipo de input es radio
3:51:41entonces lo que podemos hacer es
3:51:43simplemente esto escribir un selector de
3:51:46atributo que seleccione los elementos
3:51:49que tengan este atributo type igual a
3:51:53radio y así estaríamos seleccionando
3:51:56todos los botones de radio de nuestra
3:51:58página digamos que las queremos asignar
3:52:00un margen de 5 píxeles para que estén
3:52:03separados unos de los otros si volvemos
3:52:06a cargar la página ahora podemos ver que
3:52:09hay más separación entre estos elementos
3:52:11porque si se les asignó el margen
3:52:13alrededor de ellos para exagerar lo solo
3:52:16ver el efecto más claramente podemos
3:52:18volver a cargar la página y aquí puedes
3:52:21ver el efecto se les asignó un margen si
3:52:24usamos las herramientas de
3:52:25desarrolladores de chrome
3:52:27inspeccionamos este elemento hacemos
3:52:29clic derecho sobre el elemento podemos
3:52:32hacer clic derecho aquí
3:52:35luego vamos a través de la estructura
3:52:38hasta que llegamos al elemento input y
3:52:42aquí abajo podemos ver el panel que
3:52:45veíamos antes cuando estudiamos el
3:52:47primer margen
3:52:49aquí podemos ver el margen que le
3:52:51asignamos 25 y lo puedes ver resaltado
3:52:54en la página en naranja genial no
3:52:56estamos seleccionando todos los
3:52:59elementos que contienen este atributo
3:53:02con este valor también podríamos ser aún
3:53:04más específicos y decir que todos los
3:53:06elementos de tipo input que tenga este
3:53:10atributo con este valor esa es otra
3:53:13opción si volvemos a cargar la página
3:53:15puedes ver que el efecto es exactamente
3:53:17el mismo pero en este caso también
3:53:19podríamos omitir lo si no es necesario
3:53:22especificar el tipo de elemento vamos a
3:53:25colocar un margen un poco más razonable
3:53:27de 5 píxeles también podríamos
3:53:31seleccionar
3:53:34todas las casillas de verificación y
3:53:36para eso simplemente tendríamos que
3:53:38escribir un selector de atributo para
3:53:41seleccionar todos los elementos cuyo
3:53:44valor del atributo type sea chac vox
3:53:47recuerda que las casillas de
3:53:49verificación tienen este valor para este
3:53:53atributo type igual a check box vamos a
3:53:57asignarles un margen distinto de 8
3:53:59píxeles por ejemplo y aquí lo podemos
3:54:02ver ya están separadas y tienen su
3:54:05margen propio genial igualmente podemos
3:54:09omitir input aquí y se va a seleccionar
3:54:12y finalmente vamos a ver algo que va a
3:54:15ser muy muy útil también como puedes
3:54:17seleccionar los enlaces que lleven a un
3:54:20mismo destino a una misma página puedes
3:54:23escribir un selector de atributo como
3:54:25tendríamos aquí primero escribimos el
3:54:28tipo de elemento que a para el anclar
3:54:32los enlaces y luego decimos que queremos
3:54:34seleccionar todos los elementos de tipo
3:54:37a cuyo valor del atributo h3
3:54:40la página de frijol camps punto org aquí
3:54:44podemos subir copiamos y pegamos el
3:54:47valor de h red de ese enlace que
3:54:50queremos seleccionar de esos enlaces que
3:54:52queremos seleccionar y listo ya tenemos
3:54:55nuestro selector de atributo en este
3:54:58caso vamos a seleccionar este enlace que
3:55:01lleva áfrica ur camps y este enlace aquí
3:55:03que tenemos abajo que también lleva
3:55:05africano que cambió de estilo le vamos a
3:55:08hacer vamos a asignarle un color verde y
3:55:12vamos a decir quien no queremos
3:55:16que el enlace esté subrayado por ejemplo
3:55:19digamos que no nos gusta este formato
3:55:22por defecto que tienen los enlaces que
3:55:24es un subrayado para quitar ese
3:55:26subrayado le asignamos a la propiedad
3:55:29text decoration el valor no
3:55:32texto significa texto en español y
3:55:35decoration significa como una decoración
3:55:38decoración del texto ninguna no queremos
3:55:41ninguna decoración y también queremos
3:55:43que el texto se presente en negrita así
3:55:46que podemos asignarle este valor para la
3:55:49propiedad font weight font es como la
3:55:52letra o la fuente weight espeso en
3:55:56español el peso de la fuente de la letra
3:55:59va a ser bone que en español significa
3:56:01negrita queremos que el texto se muestre
3:56:04en negrita si volvemos a cargar la
3:56:07página o la puedes ver que ahora se le
3:56:10aplicó el estilo a este enlace y también
3:56:13si vamos aquí abajo se le aplicó el
3:56:15estilo a este enlace
3:56:17genial estamos seleccionando
3:56:20los elementos de tipo a en base al valor
3:56:23de su atributo ya que si tenemos muchos
3:56:26enlaces de nuestra página que llevan al
3:56:28mismo destino y queremos que todos sean
3:56:31consistentes podemos seleccionarlos con
3:56:34los selectores de atributo ahora vamos a
3:56:38hablar un poco sobre las unidades
3:56:39relativas y las unidades absolutas
3:56:41porque hasta ahora hemos trabajado con
3:56:44píxeles hemos trabajado con porcentajes
3:56:47y hay otras unidades que también son
3:56:49importantes para desarrollo web cuáles
3:56:52son sus diferencias y cómo las puedes
3:56:54usar todo eso lo vamos a ver en la
3:56:56próxima parte
3:57:03vamos a ver un ejemplo gráfico de las
3:57:06distintas unidades con las que puedes
3:57:08trabajar
3:57:09css en html este ejemplo está basado en
3:57:13el ejemplo de la red de desarrolladores
3:57:15de mozilla vamos a ir creando tres
3:57:18elementos que nos van a permitir ver la
3:57:21diferencia entre tres unidades
3:57:22importantes píxeles wb que es el view
3:57:26point y m que es otra unidad importante
3:57:30esta es una unidad absoluta porque
3:57:32especifica exactamente el tamaño del
3:57:35elemento píxeles wv y m son unidades
3:57:39relativas porque son relativas a otros
3:57:42valores en nuestra página por ejemplo
3:57:44b&w view x depende del tamaño de la
3:57:49pantalla del browser y m depende del
3:57:52tamaño de la letra del contenedor ya
3:57:55vamos a ver muchos más detalles sobre
3:57:57esto si vamos al artículo en la
3:57:59documentación de la red de
3:58:01desarrolladores de mozilla el artículo
3:58:03valores y unidades css vamos a leer la
3:58:07introducción
3:58:08todas las propiedades que se utilizan en
3:58:10el css tienen un valor o un conjunto de
3:58:13valores que esa propiedad admite y echar
3:58:16un vistazo a cualquier página de
3:58:18propiedades en la red de desarrolladores
3:58:20de mozilla te ayudará a comprender qué
3:58:23valores admite una propiedad en
3:58:25particular vamos aquí más abajo nos
3:58:28explican un poco sobre las unidades y
3:58:30podemos aquí ver longitudes tenemos una
3:58:34tabla de las unidades de longitud
3:58:36absoluta todas las unidades siguientes
3:58:39son unidades de longitud absoluta no son
3:58:42relativas a nada más y en general se
3:58:44considera que siempre tienen el mismo
3:58:46tamaño
3:58:48por ejemplo ce m m m q y n pulgadas ps
3:58:54pt o px px es la unidad que hemos estado
3:58:59usando comúnmente hasta ahora que
3:59:02representa píxeles o píxeles la mayoría
3:59:05de estos valores son más útiles cuando
3:59:07se usan en una salida d en formato
3:59:09impreso que en la salida de pantalla
3:59:12por ejemplo normalmente no usamos
3:59:14centímetros en pantalla el único valor
3:59:17que usarás de forma frecuente es píxeles
3:59:20como has visto hasta ahora en los
3:59:22ejemplos normalmente solo hemos usado
3:59:24píxeles de esta tabla y luego vemos una
3:59:27tabla de unidades de longitud relativa
3:59:29porque son relativas porque son
3:59:32relativas a algo más por ejemplo al
3:59:35tamaño de la letra del elemento
3:59:37principal o al tamaño de la ventana
3:59:39gráfica de la ventana de tu navegador
3:59:43la ventaja de usar unidades relativas es
3:59:46que con una planificación cuidadosa
3:59:48puedes lograr que el tamaño del texto o
3:59:51de otros elementos escalen en relación
3:59:55con todo lo demás en la página en la
3:59:58tabla siguiente se enumeran algunas de
3:59:59las unidades más útiles aquí las tenemos
4:00:02podemos ver que la tenemos en nuestro
4:00:05ejemplo que vamos a ver ahorita
4:00:07esta unidad es relativa al tamaño de la
4:00:11letra del elemento padre del elemento
4:00:13que lo contienen en el caso de
4:00:15propiedades tipográficas como font-size
4:00:17y el tamaño de la fuente del propio
4:00:20elemento en el caso de otras propiedades
4:00:22como web tenemos también x h rm l h y
4:00:29esta otra unidad la teníamos en el
4:00:31ejemplo w me representa 1% del ancho de
4:00:35la ventana gráfica por ejemplo si
4:00:37tenemos 20 w sería el 20% del ancho de
4:00:41la ventana gráfica
4:00:43ibh es el 1 por ciento de la altura de
4:00:47la ventana gráfica porque w y h wb en
4:00:52inglés representa un web que significa
4:00:55ancho por eso es el ancho de la ventana
4:00:58gráfica y h representa height que
4:01:02significa altura la altura de la ventana
4:01:05gráfica y también tenemos b min y b max
4:01:09puedes leer más sobre la descripción de
4:01:11estas unidades en este artículo de la
4:01:13documento aquí vemos un ejemplo que es
4:01:16muy parecido el ejemplo que vamos a
4:01:18hacer nuestro ejemplo está inspirado en
4:01:21este ejemplo que tenemos aquí o que
4:01:22cualquier cosa si quieres referirte a
4:01:25este artículo leer más sobre estas
4:01:27unidades puedes ir al artículo valores y
4:01:29unidades de césar vamos a comenzar con
4:01:32nuestro ejemplo tenemos esta estructura
4:01:35nuestro archivo html el elemento raíz
4:01:38html luego el título app de datos o
4:01:42vamos a cambiarle el título vamos a
4:01:45asignarle prueba de unidades unidades
4:01:49relativas y absolutas
4:01:50estamos incluyendo nuestra hoja de
4:01:53estilos está el punto css y en el cuerpo
4:01:57tenemos un contenedor principal con un
4:02:00haití contenedor principal y dentro
4:02:03tenemos tres contenedores 310 eso steve
4:02:07en lugar de actuar como contenedores
4:02:09aquí van a actuar como cajas como
4:02:13rectángulos que vamos a
4:02:15personalizar y le estamos asignando a
4:02:18estos rectángulos dos clases una clase
4:02:20recta para las tres y después clases
4:02:24específicas para cada uno dependiendo de
4:02:27su unidad de la clase px para el primero
4:02:31wb para el segundo y m para el tercero
4:02:34bien ahora vamos a nuestro archivo css
4:02:38puedes ver que en este momento en la
4:02:41página no vemos nada más que el texto
4:02:44porque no hemos empezado a escribir las
4:02:46reglas en css vamos a personalizar el
4:02:49aspecto del contenedor principal el
4:02:52color del texto en el contenedor
4:02:54principal va a ser blanco white vamos a
4:02:56asignarle 5 píxeles de parís recuerda
4:03:00que es la distancia entre el contenido
4:03:02del elemento y su borde un tamaño de
4:03:05letra de 10 píxeles tamaño de fuente
4:03:09el color de fondo va a ser amarillo
4:03:12y el tipo de letra va a ser
4:03:15verdad con estos tipos de letras de
4:03:19respaldo vamos a cargar nuestra página
4:03:22nuevamente y aquí lo podemos ver este es
4:03:26el contenedor principal lo que luego
4:03:28cada uno de los contenedores va a tener
4:03:30su propio color de fondo por eso es que
4:03:33estamos asignando el color de la letra
4:03:35aquí blanco porque ese estilo se va a
4:03:39asignar va a quedar en cascada a los 3
4:03:41tips que él contiene si aquí nosotros le
4:03:43estamos asignando blanco al contenedor
4:03:45principal los tres contenedores internos
4:03:48también van a tener la letra blanca si
4:03:51no cambiamos ese valor en sus clases
4:03:53genial ok vamos a definir cómo se van a
4:03:57ver en general los rectángulos
4:03:59recuerda que cada uno de estos elementos
4:04:01tiene la clase de rectángulo esos tres
4:04:04rectángulos van a tener un valor de
4:04:05pares de cinco píxeles y un margen de
4:04:08cinco píxeles
4:04:10que nos estamos separando y finalmente
4:04:15para cada uno vamos a asignar un color
4:04:18de fondo y un ancho específico con su
4:04:20unidad respectiva
4:04:22píxeles
4:04:24el color de fondo para los píxeles va a
4:04:27hacer crimson y vamos a asignarle un
4:04:30ancho de 200 píxeles si volvemos a
4:04:34cargar la página aquí vemos este
4:04:36rectángulo y ahora en la próxima clase
4:04:39vamos a asignarle la unidad wb para que
4:04:42veas como esa unidad es relativa al
4:04:45tamaño de la ventana del browser le
4:04:48asignamos un color dark magenta que es
4:04:51como un morado el ancho va a ser 20 wb
4:04:56esto representa el 20% del ancho de la
4:05:00ventana del navegador así que si la
4:05:03ventana del navegador se hace más
4:05:05pequeña ese ancho se va a reajustar y si
4:05:07se expande el ancho también se va a
4:05:09reajustar se va a expandir
4:05:11si volvemos a cargar la página vemos
4:05:14este rectángulo y finalmente vamos a
4:05:18agregar la clase m le asignamos el color
4:05:21de fondo verde y el ancho
4:05:2515m volvemos a cargar la página y aquí
4:05:29tenemos nuestro elemento ahora primero
4:05:32que todo vamos a ver cómo funciona los
4:05:35pixeles esta unidad
4:05:37si nosotros reajustamos el tamaño de la
4:05:40ventana del navegador
4:05:42podemos ver que los pixeles se mantienen
4:05:44exactamente igual el tamaño el ancho de
4:05:47ese rectángulo se mantiene igual
4:05:50pero esta cajita este rectángulo a
4:05:53morado que tenemos aquí con las unidades
4:05:56de wb si se va expandiendo no sé si lo
4:05:59notas vamos a verlo poco a poco puedes
4:06:02ver cómo se va expandiendo porque
4:06:04representa el 20% del ancho de la
4:06:07ventana del navegador
4:06:10inicialmente cuando estaba más angosta
4:06:13la cajita era más pequeña y cada vez se
4:06:16va expandiendo más y si lo colocamos en
4:06:18pantalla completa es incluso más
4:06:21ancho más larga que la caja roja así que
4:06:25puedes ver cómo las unidades relativas
4:06:28son muy útiles cuando queremos crear
4:06:30páginas web responsivas que funcionen
4:06:33tanto para dispositivos móviles como
4:06:35dispositivos como la tops o computadoras
4:06:37de distintos tamaños este es un ejemplo
4:06:40de una unidad relativa pero esta unidad
4:06:43es relativa al tamaño de la ventana del
4:06:46navegador
4:06:48esta unidad m también es relativa pero
4:06:51es relativa al tamaño del texto el
4:06:54tamaño de la fuente de ese elemento del
4:06:57contenedor
4:06:59para demostrar cómo está afectada por el
4:07:02tamaño de la letra
4:07:03vamos a cambiar el tamaño de la letra
4:07:05aquí
4:07:08digamos 25
4:07:11este es el tamaño de la letra del
4:07:14contenedor principal
4:07:16así que su estilo se va a heredar o va a
4:07:20caer en cascada y se va a aplicar a este
4:07:23elemento también ya vas a ver
4:07:26puedes ver como si colocamos en pantalla
4:07:28completa nuestro resultado ahora el
4:07:32ancho de la caja verde es mucho mayor
4:07:34que el ancho de cualquiera de estas dos
4:07:36cajas que tenemos aquí porque porque es
4:07:39relativo el tamaño de la letra como
4:07:41aumentamos el tamaño de la letra aumentó
4:07:43en esa misma proporción el tamaño de la
4:07:47caja el ancho de la caja y también si
4:07:50disminuimos el tamaño de la letra a 5
4:07:52píxeles por ejemplo puedes ver como el
4:07:55tamaño de la caja se hace también más
4:07:56pequeñito
4:07:58en relación con las demás genial también
4:08:01también puedes usar esa unidad m como
4:08:05una forma de
4:08:07reajustar el tamaño de la letra de los
4:08:11elementos internos déjame explicarte a
4:08:14qué me refiero si que tenemos el tamaño
4:08:17de la letra con esta unidad m estamos
4:08:20diciendo que el tamaño de la letra
4:08:22debería ser 1.5 veces el tamaño de la
4:08:25letra de su contenedor
4:08:28entonces si tenemos 5 píxeles el tamaño
4:08:31de la letra debería ser 1.5 veces ese
4:08:35valor veamos aquí puedes verlo puedes
4:08:39ver que la letra es mucho más grande con
4:08:41respecto a las otras porque estamos
4:08:43diciendo que en relación con el padre o
4:08:45con su contenedor este elemento debería
4:08:49tener un tamaño de letra mayor porque su
4:08:51valor es 1.5
4:08:531.5 veces el factor si fuera 0.5 el
4:08:58tamaño de la letra debería ser más
4:09:01pequeñita y aquí lo podemos ver
4:09:04o si fuera por ejemplo 5 veces 5 aquí
4:09:08puedes ver un tamaño de letra mucho
4:09:09mucho más grande eso es lo importante de
4:09:13saber cómo usar o cómo trabajar con las
4:09:16unidades relativas porque pueden ser muy
4:09:18útiles para reajustar toda la
4:09:21presentación de tu página genial vamos a
4:09:23volver a colocar aquí un tamaño de letra
4:09:25más adecuado digamos 15 píxeles y ya
4:09:29sabes cómo trabajar con este tipo de
4:09:31unidad hay muchas otras unidades
4:09:33absolutas y relativas estas son algunas
4:09:35de las más comunes puedes referirte a
4:09:38ese artículo que vimos en la
4:09:39documentación para aprender más sobre
4:09:41las unidades ahora en la próxima parte
4:09:43vamos a probar que en realidad del
4:09:45elemento policy existe y es parte de la
4:09:48estructura de la página eso lo vamos a
4:09:50hacer en tan sólo unos segundos así que
4:09:52te espero allí
4:10:00ahora rápidamente vamos a ver con css
4:10:03que en realidad es elementos boring
4:10:06también es parte de la estructura de
4:10:07nuestra página existe el elemento por y
4:10:10es un elemento y tienes como el elemento
4:10:12principal de la estructura que vemos en
4:10:15la página vamos a ver que en realidad
4:10:18existe usando un selector de tipo y le
4:10:21vamos a asignar un color de fondo tan
4:10:23fácil como eso así podemos determinar
4:10:26que en realidad existe si volvemos a
4:10:28cargar la página aquí podemos ver
4:10:30podemos colocarlo en pantalla completa y
4:10:33vemos que el cuerpo el por y ese
4:10:36elemento cubre toda la ventana del
4:10:38navegador en este caso le asignamos el
4:10:40color negro pero digamos que le
4:10:42asignamos plateado y así podemos ver
4:10:45también los elementos pues todo esto es
4:10:48el boeing en el elemento bar y también
4:10:51podemos comprobar que ese es el elemento
4:10:53por y que existe sin agregarle un color
4:10:56específico veamos cómo podemos hacerlo
4:10:59si tenemos nuestro bonito transparente y
4:11:02hacemos clic en inspector se van a abrir
4:11:04las herramientas de desarrolladores
4:11:06google chrome y aquí podemos hacer clic
4:11:10sobre la etiqueta bar y la podemos
4:11:12cerrar con la flechita para sólo mostrar
4:11:15este elemento y podemos ver que cubre
4:11:17toda el área de la página web toda el
4:11:20área donde se muestra la página web si
4:11:23reajustamos el tamaño se hace más grande
4:11:25o más pequeño el bar y ese elemento se
4:11:28reajusta para cubrir toda el área de la
4:11:32página web genial ya comprobamos que por
4:11:35y en sí y también es un elemento así que
4:11:38podemos asignarle también ciertos por
4:11:40ejemplo estilos a ese elemento y se
4:11:45aplicaría ese estilo en todos los
4:11:48elementos que pertenezcan a bari por
4:11:50ejemplo si le asignamos algún estilo al
4:11:52elemento por y todos los elementos a los
4:11:56cuales se podría aplicar ese estilo a lo
4:11:59largo de toda esta página también
4:12:02tendrían ese mismo estilo comprobemos lo
4:12:05por ejemplo si le asignamos un color de
4:12:08texto particular por ejemplo chocolate
4:12:11hacemos clic aquí para volver a cargar
4:12:14la página y vemos que ahora todo el
4:12:16texto todos los elementos que podían
4:12:19tener esta propiedad y este color tienen
4:12:21ese estilo esto es muy útil cuando
4:12:24queremos definir ciertos estilos que se
4:12:27van a repetir en todos los elementos a
4:12:30los cuales se puede aplicar ese estilo
4:12:32lo vamos a usar también cuando
4:12:35comencemos a trabajar con las variables
4:12:37en css comenzaremos a verlo ya hacia el
4:12:40final del curso genial ya sabes que por
4:12:42existe y que puedes heredar estilos a
4:12:45partir de esta regla en css
4:12:54a medida que vayamos creando estructuras
4:12:56más complejas en html frecuentemente
4:13:00vamos a necesitar asignar varios estilos
4:13:03a un mismo elemento así que es
4:13:06importante saber cómo se van a priorizar
4:13:08esos estilos si hay algún conflicto
4:13:11entre uno y el otro cuál va a ser el
4:13:14resultado eso es algo muy común es
4:13:16importante que entiendas cómo funciona
4:13:18esto en css cómo podemos priorizar
4:13:21estilos por ejemplo si yo le asigno dos
4:13:25clases al elemento h1 en este caso hola
4:13:29mundo aquí puedes ver la estructura html
4:13:31y aquí tenemos point
4:13:33tenemos un título un encabezado h1 y
4:13:37aquí tenemos un enlace con el elemento a
4:13:40por ahora vamos a trabajar con el título
4:13:43con el encabezado h1 aquí voy a
4:13:45incrementar aún más el zoom para que
4:13:47puedas verlo con más detalle o que estoy
4:13:50en un zoom de 250 por ciento en chrome
4:13:53tú lo vas a ver inicialmente más pequeño
4:13:55si estás en 100% sería algo así
4:13:59lo vamos a dejar en 250 ok vamos a
4:14:02asignarle dos clases a este elemento
4:14:05texto azul y recuerda que la segunda
4:14:08clase la podemos escribir sólo separando
4:14:12las con un espacio vamos a colocar el
4:14:14editor en pantalla completa por un
4:14:16segundo para que veas toda la línea
4:14:18completa que tenemos aquí clase texto
4:14:21azul y texto morado tenemos dos clases
4:14:24distintas que van a tener un conflicto
4:14:26porque el texto no puede ser azul y
4:14:29morado a la vez alguna de las dos va a
4:14:32tener una prioridad y ese va a ser el
4:14:34resultado final pero cuenta las dos va a
4:14:37ser la principal o la que iba a tener el
4:14:40resultado final
4:14:41veamos si nos vamos a nuestro archivo
4:14:43css vamos a definir dos reglas para
4:14:49estas clases para textos son el color
4:14:52del texto va a ser bloom azul y para
4:14:54texto morado el color del texto va a ser
4:14:58propio
4:14:59redoble de tambores
4:15:02porque vamos a ver cuál es el resultado
4:15:06aquí lo tenemos morado el texto se
4:15:10muestra en morado porque veamos la
4:15:13lógica porque inicialmente si tenemos
4:15:16texto azul como la primera clase en
4:15:18nuestra lista de clases podríamos pensar
4:15:21que esa clase o ese estilo se va a
4:15:24priorizar pero no el texto morado es el
4:15:28resultante
4:15:29y déjame decirte que el orden de las
4:15:32clases es sorprendentemente no importa o
4:15:35no hace ningún efecto en html el orden
4:15:39en que escribas estas dos clases o
4:15:41cualquier número de clases no tiene
4:15:44efecto en el resultado final y te lo
4:15:47puedo mostrar si simplemente cambiamos
4:15:49el orden invertimos el orden de estas
4:15:51dos clases
4:15:52volvemos a cargar la página y puedes ver
4:15:55que sigue siendo morado así que no hay
4:15:57una prioridad específica entre las
4:16:00clases en html donde si hay prioridad es
4:16:04en css porque la última clase es la que
4:16:08va a tener prioridad la última clase que
4:16:11se encuentre en el archivo css en el
4:16:13orden en que aparezcan en este caso la
4:16:16clase texto azul aparece primero que la
4:16:19clase texto morado y puedes pensarlo así
4:16:22como que a medida que se vaya generando
4:16:25ese estilo y al final se decide que como
4:16:28esta es la última y hay un conflicto
4:16:30porque ambas quieren asignar un color de
4:16:34texto especie el conflicto se resuelve
4:16:37asignando el último valor que se le
4:16:40asignó a esa propiedad el valor de esa
4:16:42propiedad el último valor asignado está
4:16:45en la última clase que se definió en css
4:16:48podemos comprobarlo invirtiendo el orden
4:16:52si ahora escribimos la clase texto
4:16:55morado primero y luego la clase texto
4:16:57azul vamos a ver el resultado ahora
4:17:00puedes ver que el texto es azul porque
4:17:03esta es la última clase que se encontró
4:17:07en el archivo css que aplica para ese
4:17:10elemento entre estas dos si hay un
4:17:13conflicto se va a escoger el último
4:17:15valor que se le asignó que es este que
4:17:17tenemos aquí ya sabes que el orden de
4:17:21las clases en html en este atributo en
4:17:24html no tiene ningún impacto sobre el
4:17:27resultado sólo el orden en css
4:17:31vamos a ver otro ejemplo en este caso
4:17:34vamos a aplicarle un estilo una clase a
4:17:37este enlace que tenemos aquí
4:17:40podemos quitar esta clase del elemento
4:17:43del título y enfocarnos en el enlace que
4:17:46tenemos aquí veámoslo en pantalla
4:17:48completa vamos a asignarle una clase
4:17:52llamada sin subrayado sin subrayado
4:17:55queremos que el enlace no esté subrayado
4:17:58pero vamos a ver cuál va a tener
4:18:01prioridad
4:18:02si escribimos esto en css si usamos un
4:18:06selector de tipo para asignarle un
4:18:09estilo a todos los elementos de tipo a o
4:18:13si esto va a tener prioridad la clase
4:18:16que estamos asignando le a ese elemento
4:18:19en particular cual crees que va a tener
4:18:21prioridad
4:18:23recuerda esa respuesta que acabas de
4:18:25pensar y vamos a comprobar qué es lo que
4:18:28ocurre vamos a asignarle a los elementos
4:18:31de tipo a un subrayado
4:18:34morado
4:18:36ondulado baby es ondulado y decimos
4:18:39underline subrayado estamos
4:18:42especificando que queremos un subrayado
4:18:44morado ondulado va a ser como algo
4:18:47parecido a este subrayado que vemos aquí
4:18:50y vamos a definir una propiedad que
4:18:53entra en conflicto con lo que acabamos
4:18:55de escribir digamos que queremos que
4:18:58todos los elementos que tengan esta
4:19:00clase sin subrayado no tengan ningún
4:19:03tipo de subrayado así que escogemos el
4:19:06valor no aquí le estamos asignando un
4:19:09subrayado específico y aquí estamos
4:19:11quitando el subrayado
4:19:12cuál creés de las dos que tendrá
4:19:15prioridad bueno veámoslo volviendo a
4:19:18cargar la página
4:19:19aquí lo podemos ver este enlace ahora no
4:19:23tiene subrayado así que esta clase que
4:19:27tenemos aquí tuvo prioridad vamos a ver
4:19:29qué ocurre si invertimos el orden
4:19:31primero estamos escribiendo el selector
4:19:33de clase y luego el selector de tipo
4:19:36veamos
4:19:39aún así el enlace no tiene ningún
4:19:42subrayado porque porque la clase tiene
4:19:46precedencia sobre el selector más
4:19:49general o más genérico que selecciona
4:19:51todos los elementos de un tipo
4:19:52específico así que ya sabes si asignas
4:19:56una clase a un elemento ese estilo va a
4:19:59tener prioridad sobre el estilo que
4:20:02asigna este a todos los elementos de un
4:20:05mismo tipo por qué porque este tipo de
4:20:08selector es más genérico más general y
4:20:11esta clase es más específica entonces
4:20:14css la prioriza se prioriza ese estilo
4:20:18sin importar en qué orden estén en el
4:20:22archivo css si borramos esta clase aquí
4:20:26ahora vas a ver el estilo que lo
4:20:28hubiéramos asignado inicialmente un
4:20:30subrayado ondulado morado
4:20:33genial estos son dos principios
4:20:35importantes el orden de las clases en
4:20:38css y también la prioridad de los
4:20:41selectores de clases sobre los
4:20:43selectores de tipo también es importante
4:20:45que sepas si hay alguna prioridad de los
4:20:48ied y sobre las clases si asignamos un
4:20:52estilo a una idea específico ese estilo
4:20:54va a tener prioridad sobre una clase lo
4:20:57vamos a ver en la próxima parte del
4:20:59cusco
4:21:05vamos a comprobar si existe alguna
4:21:07prioridad para los haitises los
4:21:10identificadores únicos sobre las clases
4:21:12o no veamos y comprobemos nosotros
4:21:16mismos si por ejemplo le asignamos un
4:21:19haití al elemento h1 que tenemos aquí
4:21:22vamos a asignarle el haití título porque
4:21:25digamos que sólo vamos a tener un título
4:21:27y también le vamos a asignar una clase
4:21:30vamos a mostrar el editor en pantalla
4:21:33completa esa clase se va a llamar texto
4:21:37azul ambos selectores van a tener una
4:21:40propiedad que va a estar en conflicto el
4:21:42título y el texto azul el haití y la
4:21:45clase van a intentar personalizar el
4:21:48color del texto pero un texto no puede
4:21:51tener dos colores a la vez así que vamos
4:21:54a ver cuál se prioriza primero
4:21:56comenzamos con el lighting el lady es
4:21:58título le vamos a asignar el color
4:22:02morado por pu
4:22:05y luego vamos a definir aquí un selector
4:22:08de clase para texto azul y vamos a
4:22:12asignarle el color azul al texto cuál va
4:22:15a ser el resultado entre el haití o la
4:22:18clase cuál crees que va a ganar
4:22:21recuerda tu respuesta y veamos el
4:22:23resultado
4:22:25aquí lo tenemos el texto es morado
4:22:27porque el haití tiene prioridad sobre la
4:22:31clase como puedes ver estamos yendo como
4:22:33a selectores más específicos antes
4:22:37teníamos selectores de tipo que eran
4:22:39como los más genéricos que seleccionaban
4:22:42todos los elementos de un tipo
4:22:43específico luego fuimos a clases que nos
4:22:47permiten
4:22:48asignarle un estilo a uno o más
4:22:51elementos y luego vamos a un selector
4:22:54que es aún más específico que es el
4:22:56haití y como es el más específico es el
4:22:59que tiene mayor prioridad sobre las
4:23:01clases inclusive y sobre los selectores
4:23:04de tipo no importa el orden en el cual
4:23:07escribas estas reglas en ccs vamos a
4:23:12comprobarlo vamos a cambiar el orden y
4:23:15volvemos a cargar la página y vemos que
4:23:17el haití sigue teniendo prioridad
4:23:19general ahora vamos a ver otro ejemplo
4:23:22con este enlace como hicimos en la parte
4:23:24anterior podemos ya aquí borrar este de
4:23:28esta clase del elemento h1
4:23:31ahora vamos aquí el elemento del enlace
4:23:33y vamos a agregarle un haití y una clase
4:23:36el haití se va a llamar enlace principal
4:23:41y la clase se va a llamar sin subrayado
4:23:44tenemos un haití y una clase vamos a ver
4:23:47nuevamente cuál se prioriza el haití y
4:23:50se llamaba enlace principal vamos a
4:23:54asignarle un color verde y vamos a
4:23:57personalizar el subrayado con text
4:24:01decoration
4:24:02tenemos green verde baby para que sea
4:24:05ondulado y android line que es subrayado
4:24:10después de definir nuestra regla para el
4:24:12haití también tenemos nuestra regla para
4:24:15el selector de clase sin subrayado vamos
4:24:19a tratar de asignar estilos que entren
4:24:23en conflicto el color del texto y vamos
4:24:26a tratar de quitarle subrayado con texto
4:24:29gration norma
4:24:31veamos cuál se prioriza veamos cuál es
4:24:34el resultado verde o azul si volvemos a
4:24:36cargar la página vemos que es verde con
4:24:38un subrayado verde ondulado exactamente
4:24:41lo que definimos aquí en nuestra regla
4:24:44para el haití puedes ver que en este
4:24:46ejemplo se sigue priorizando el haití
4:24:48porque es un selector más específico así
4:24:52que si hay alguna propiedad que entre en
4:24:54conflicto con otras clases que tiene el
4:24:56elemento siempre se van a priorizar las
4:24:59que están en el haití que en el selector
4:25:02del aire bien ya sabes que los haitises
4:25:05siempre se priorizan sobre clases y que
4:25:07las clases se priorizan sobre los
4:25:10selectores de tipo vamos priorizando los
4:25:14selectores que son más específicos en la
4:25:17próxima parte también vamos a ver qué
4:25:19ocurre si le asignamos un estilo en
4:25:21línea a un elemento directamente en html
4:25:24y si tenemos en esa misma propiedad en
4:25:28nuestro archivo css cual será priorizado
4:25:31lo veremos en la próxima parte
4:25:41veamos cuántas las tres opciones se
4:25:43priorizan cuando el mismo elemento tiene
4:25:45una clase un haití y un estilo en línea
4:25:49probemos a nuestro encabezado de nuestro
4:25:52título le vamos a asignar un haití
4:25:55título le vamos a asignar una clase
4:25:59texto azul y luego le asignamos un
4:26:03estilo en línea con la propiedad de
4:26:05estadio que aprendiste cuando recién
4:26:08estábamos comenzando la parte de css le
4:26:11vamos a asignar
4:26:13ese estilo en línea el color
4:26:16morán por paul ok y dentro de estos
4:26:21electores en css en esas reglas también
4:26:24vamos a tratar de cambiar el color del
4:26:26texto y vamos a ver cuál es el color
4:26:29final que se presenta vamos a definir un
4:26:31selector de clase texto azul
4:26:35y vamos a asignarle al color duro
4:26:38también para el lighting título vamos a
4:26:43asignarle el color negro también tenemos
4:26:46el estilo en línea que le asigna
4:26:49el color morado así que veamos cuál gana
4:26:53azul negro o morado listo redoble de
4:26:58tambores si volvemos a cargar la página
4:27:01vemos que el ganador es morado porque
4:27:06nuestra clase era azul nuestro haití era
4:27:09negro y finalmente el estilo en línea
4:27:12enamorado el estilo en línea se prioriza
4:27:16aún por encima de los high de seal
4:27:18asignas alguna estilo en línea al
4:27:21elemento ese estilo se va a priorizar
4:27:24pero hay una forma de cambiar también
4:27:27ese comportamiento que hay por defecto o
4:27:31ese resultado que por defecto si
4:27:33nosotros queremos que todos los
4:27:36elementos que tengan esta clase por
4:27:38ejemplo tengan el texto de color azul
4:27:41sin importar cualquier otro conflicto
4:27:43que tenga con idish o con estilos en
4:27:46línea o con cualquier otro selector
4:27:48podemos agregar aquí es un signo de
4:27:51exclamación y escribir importantes que
4:27:54significa importante en español
4:27:56eso no le va a decir al browser al
4:27:59navegador que es muy importante que
4:28:01asigne este valor para esa propiedad sin
4:28:04importar cualquier otro conflicto ahora
4:28:07si volvemos a cargar la página puedes
4:28:09ver que ahora el resultado es un texto
4:28:12azul porque estamos indicando
4:28:14explícitamente que ese valor se debe
4:28:17asignar a esa propiedad
4:28:18y vemos el resultado general no osea que
4:28:22si tenemos el control en nuestras manos
4:28:24en realidad si queremos que sin faltas
4:28:27sin faltas sin importar cualquier
4:28:29conflicto que pueda ocurrir este debe
4:28:31ser el valor si el elemento tiene esta
4:28:34clase simplemente agregamos importante
4:28:37también lo podemos agregar en un haití
4:28:40si lo agregamos aquí mira el resultado
4:28:43ahora es negro el yang si volvemos a la
4:28:47normalidad tenemos morado porque los
4:28:50estilos en línea tienen la mayor
4:28:52prioridad genial esta parte del tema es
4:28:55muy muy importante porque a medida que
4:28:57crees estructuras y estilos más
4:28:59complicados va a empezar a surgir este
4:29:01tipo de conflicto y este tipo de
4:29:05contradicciones en los estilos entonces
4:29:08es importante que sepas cómo se van a
4:29:10resolver y cuál va a ser el resultado
4:29:19ahora vamos a comenzar a hablar y en las
4:29:21próximas partes vamos a seguir hablando
4:29:23sobre los colores en css como puedes
4:29:27escribir un color específico en css sin
4:29:31que sea una palabra específica como blue
4:29:33green la primera opción es usar un
4:29:37código hexadecimal
4:29:39un código hexadecimal en inglés exotismo
4:29:44code es un código en base 16 normalmente
4:29:50nosotros tenemos base 10 en el sistema
4:29:53hexadecimal base 16 que ocurre tenemos
4:29:56estos posibles dígitos del 0 al 9 en
4:30:00cuanto a números y luego de la a a la f
4:30:03como letras la representaría algo
4:30:07parecido al 10 en el sistema decimal
4:30:09tenemos estas posibles opciones 16
4:30:12posibles opciones para cada dígito en
4:30:15nuestro código y vamos a usar ese
4:30:17sistema extra decimal para de escribir
4:30:21nuestro color tiene tres componentes
4:30:23principales cada color este por ejemplo
4:30:25de un número en el sistema hexadecimal
4:30:27tiene seis dígitos 1 2 3 4 5 6 comienza
4:30:33con numeral y cada uno de esos dígitos
4:30:35va a estar entre 0 y 9 o en 3 efe
4:30:39tenemos 16 posibles opciones para cada
4:30:42uno de los dígitos si te estás
4:30:44preguntando que se refiere que estos
4:30:46símbolos que tenemos aquí estos son los
4:30:47símbolos que podemos usar en css para
4:30:50escribir un comentario
4:30:52ok una barra inclinada con un asterisco
4:30:55y luego un asterisco y una barra
4:30:57inclinada para cerrar el comentario que
4:31:00así es como podemos escribir comentarios
4:31:02en css pero retomando nuestra charla
4:31:05sobre los códigos hexadecimal es este es
4:31:08un ejemplo de un color en esta
4:31:10representación
4:31:13todos los colores tienen tres
4:31:15componentes rojo verde y azul y estos
4:31:20valores que les vamos a asignar para
4:31:22determinar cuánto de cada color tiene el
4:31:26resultado cuánto de rojo cuánto de verde
4:31:28y cuánto de azul 00 para esta componente
4:31:32representa la ausencia total de ese
4:31:34color y el mayor valor que le podemos
4:31:36asignar es f o sea que sería efe efe efe
4:31:40efe y ff
4:31:43en total podemos crear 16 millones de
4:31:47códigos para representar colores usando
4:31:50los códigos extra decimales
4:31:53vamos a ver cómo los podemos usar con el
4:31:56ejemplo de nuestra página de gatos
4:31:58digamos que queremos asignarle un color
4:32:00de fondo a todos los dif para eso
4:32:03necesitamos la propiedad background
4:32:06color que ya la hemos usado
4:32:07anteriormente pero ahora en lugar
4:32:10escribir una palabra como por ejemplo
4:32:12blue o blue butler puedes ver que aquí
4:32:15tenemos también sus códigos hexadecimal
4:32:19es correspondientes
4:32:21por ejemplo el blog tiene de componente
4:32:24roja 00 luego de componente verde 00 y
4:32:27de componente azul efe efe vamos a
4:32:30probar el código que acabamos de ver
4:32:32para negro
4:32:34si volvemos a cargar la página ahora
4:32:36vemos que los tips tienen un fondo de
4:32:38color negro este es el único tips que
4:32:41tenemos en la página también vamos a
4:32:43probar qué ocurre si le asignamos a los
4:32:47títulos un color de texto específico por
4:32:50ejemplo es vea 234 que es como un
4:32:55naranja amarillento volvemos a cargar la
4:32:58página y aquí vemos ese color así
4:33:00podemos ir asignando los colores
4:33:02personalizados a cada elemento de
4:33:04nuestra página también por ejemplo
4:33:07podemos personalizar el color del borde
4:33:10de algún elemento como una imagen
4:33:12digamos que seleccionamos una imagen y
4:33:16queremos que la imagen sea circular o
4:33:19redondeada
4:33:22va a tener un borde de ancho de 3
4:33:25píxeles
4:33:26el estilo va a ser sólido y el color
4:33:30efe 4 034 de esta forma y así podemos
4:33:36ver que se le asignó un borde de ese
4:33:38color específico que tenemos aquí a la
4:33:41imagen a todas las imágenes también
4:33:43podemos asignarle un color específico a
4:33:45los enlaces por ejemplo si le asignamos
4:33:49el color
4:33:51a 73
4:33:5203
4:33:54aquí tenemos un color como un morado
4:33:56claro que podemos ver aquí y aquí para
4:33:59todos los elementos de enlace y cómo
4:34:02podemos conseguir estos códigos
4:34:03hexadecimal es como speaker lo puedes
4:34:07escribir en inglés aquí lo puedes ver
4:34:11es muy muy útil no estás trabajando con
4:34:13desarrollo web aquí puedes escoger el
4:34:16tono del color y luego puedes
4:34:19personalizar lo aún más
4:34:22arrastrando este circulito que ves por
4:34:24acá y aquí tienes el código hexadecimal
4:34:28de ese color simplemente lo puedes
4:34:31copiar y pegar aquí claro siempre debe
4:34:35tener un solo numeral antes del código y
4:34:38volvemos a cargar la página y aquí
4:34:41puedes ver que ese color se le asignó a
4:34:43ese elemento
4:34:45también hay una forma de abreviar
4:34:47ciertos códigos hexadecimal es para que
4:34:50sean más concisos porque aquí puedes ver
4:34:52que tienen seis dígitos pero podemos
4:34:55reducir ese número en algunos casos a
4:34:57tres dígitos nada más vas a ver cómo lo
4:34:59puedes hacer en la próxima parte
4:35:07también podemos en ciertos casos para
4:35:10ciertos colores abreviar su código
4:35:12hexadecimal a sólo tres dígitos esto es
4:35:16recomendado también es recomendado en la
4:35:18guía de estilo de google y si se puede
4:35:20usar se recomiendo usarlo por ejemplo si
4:35:24nuestro código es este que tenemos aquí
4:35:29vamos a escribir un comentario
4:35:31tenemos 6 dígitos los cuales están
4:35:34repetidos de a pares cuando esto ocurre
4:35:37cuando los dígitos del mismo par son
4:35:40iguales para cada uno de los pares
4:35:43simplemente podemos escribir uno por
4:35:46cada par de esta forma
4:35:49otro ejemplo sería efe efe efe efe efe
4:35:54este color
4:35:57podría abreviar se de esta forma y
4:35:59tendríamos exactamente el mismo color
4:36:01otro ejemplo 0 0 efe efe 0 0 puedes ver
4:36:06que los dígitos están repetidos en su
4:36:08par correspondiente en su componente
4:36:10correspondiente en este caso 0 0
4:36:14corresponde a rojo luego ff a verde y 0
4:36:180 azul en este caso podemos escribir
4:36:20sólo 3 dígitos otro ejemplo efe efe 0 0
4:36:24efe efe
4:36:26aquí eliminamos los dígitos repetidos y
4:36:29tenemos este resultado ahora veamos
4:36:32estos colores en vivo y pensamos que en
4:36:34realidad son equivalentes a los
4:36:36originales algo que sí me gustaría
4:36:38resaltar en este momento es que hasta
4:36:42ahora hemos estado usando los códigos
4:36:44hexadecimal es en minúscula no los hemos
4:36:46escrito de esta forma también es válido
4:36:49escribirlos en mayúsculas efe efe efe
4:36:53efe efe y probablemente también los
4:36:55consigues de esta forma
4:36:57cualquiera de estas opciones es válida
4:37:00que es lo importante ser consistente en
4:37:04tu archivo css no mezclar mayúsculas con
4:37:07minúsculas si escogiste usar minúsculas
4:37:09debes usar minúsculas y escogiste usar
4:37:12mayúsculas continúa usando mayúsculas o
4:37:14que genial vamos a comenzar viendo
4:37:17nuestro primer ejemplo en vivo en
4:37:20nuestra página de gatos tenemos nuestro
4:37:22tips y vamos a asignarle un color de
4:37:25fondo con un valor extra decimal 0 0 efe
4:37:29efe efe efe aquí lo tenemos es como un
4:37:32azul clarito si volvemos a cargar la
4:37:35página vemos el color del dif y si
4:37:38quitamos uno de esos dígitos repetidos
4:37:40de cada par lo dejamos con sólo tres
4:37:43dígitos volvemos a cargar la página y
4:37:45puedes ver que se sigue viendo
4:37:47exactamente igual el color no hubo
4:37:49ningún cambio genial vamos a ver ahora
4:37:52el titulo h2 vamos a asignarle el color
4:37:55efe efe 0000 que es como un color
4:38:00ladrillo hacia rojo si volvemos a cargar
4:38:02la página vemos el color y podemos
4:38:05quitar uno de esos dígitos repetidos y
4:38:09aquí seguimos viendo el mismo color
4:38:11exactamente lo que tenemos es un código
4:38:13más conciso y es recomendable usarlo a
4:38:16la imagen podemos asignarle un borde
4:38:19específico de un color específico
4:38:22vamos a hacer que la imagen sea
4:38:24redondeada con un ancho de 3 píxeles
4:38:27estilo sólido
4:38:30y color va a ser 0 0 efe efe 0 0 que es
4:38:34como un verde volvemos a cargar la
4:38:37página y vemos el color verde aquí y
4:38:40luego vemos aquí con 3 dígitos nada más
4:38:43y el color se mantuvo exactamente igual
4:38:45genial finalmente vamos a ver un enlace
4:38:48vamos a cambiar el color de texto a efe
4:38:51efe 0 0 efe efe y podemos cargar otra
4:38:55vez la página vemos el color pero ahora
4:38:57podemos borrar uno de esos dígitos por
4:38:59cada par y seguimos viendo el mismo
4:39:02color es equivalente genial no es una
4:39:05forma más concisa de escribir estos
4:39:07códigos en css sólo cuando están
4:39:11repetidos en cada par o que sólo en este
4:39:14caso aplica a reducir el código a tres
4:39:16dígitos bien también hay otra forma de
4:39:20representar un color en css usando rgb
4:39:24en lugar del formato del código
4:39:26hexadecimal ambos son muy importantes y
4:39:29puedes usarlos en cfs
4:39:38ahora vamos a ver otro formato que
4:39:40podemos usar para especificar un color
4:39:43en css hasta ahora hemos usado códigos
4:39:47extra decimales para referirnos a un
4:39:49color específico pero esos colores
4:39:52también tienen otra representación
4:39:54llamada rgb r braun g green y be good
4:40:00básicamente vamos a especificar lo mismo
4:40:03pero en lugar de usar dígitos vamos a
4:40:06usar tres números el valor de cada uno
4:40:09de esos tres números va a estar entre 0
4:40:11y 255 0 indica que no hay nada de ese
4:40:16color en el resultado y 255 es el mayor
4:40:20nivel para el resultado por ejemplo este
4:40:23color que tenemos aquí 0 efe efe en
4:40:26hexadecimal tiene un valor equivalente
4:40:29en rgb podemos verlo aquí si vamos al
4:40:33color pica en google aquí podemos
4:40:36colocar el código hexadecimal 0 efe efe
4:40:40y podemos ver su equivalente y rgb área
4:40:44de red creep lo ves que son 3 números 0
4:40:49255 y
4:40:50255 estos tres números representan este
4:40:54color al igual que estos dígitos
4:40:56representaban este color 0 representa el
4:41:00componente rojo
4:41:01255 y representa el componente verde y
4:41:05255 representa el componente azul
4:41:09escribimos rgb y luego entre paréntesis
4:41:12indicamos los tres valores 0 255 y 255
4:41:18en lugar de incluir un numeral seguido
4:41:21de los dígitos para cada componente
4:41:23escribimos rgb y luego dentro de los
4:41:26paréntesis escribimos el valor para cada
4:41:29componente rojo verde y azul aquí
4:41:32tenemos otro ejemplo si vamos al color
4:41:35piquer
4:41:36y aquí copiamos y pegamos el código
4:41:38hexadecimal tenemos su equivalente en
4:41:40rgb podemos copiar y pegar estos tres
4:41:43números por ejemplo
4:41:45y luego ir a nuestro archivo css
4:41:49escribir rgb y pegar estos números
4:41:53recuerda que los números deben estar
4:41:55separados por una coma y un espacio y
4:41:58tenemos exactamente el mismo color si
4:42:00volvemos a cargar la página puedes ver
4:42:02que los colores se mantienen intactos
4:42:04porque son equivalentes veamos aquí
4:42:07también otro ejemplo el verde que
4:42:10tenemos en el borde de la imagen
4:42:12tenemos su código en hexadecimal y este
4:42:15es su cover rgb escribimos rgb
4:42:18paréntesis y dentro de los paréntesis
4:42:20los tres valores y aquí tenemos nuestro
4:42:23color resultante y finalmente para el
4:42:26enlace vamos aquí vamos aquí copiamos ex
4:42:30y copiamos y pegamos rgb rgb y entre
4:42:34paréntesis los tres valores
4:42:36volvemos a cargar la página y vemos que
4:42:39todo se mantiene igual pero ahora
4:42:41estamos especificando los colores el
4:42:43formato rgb en lugar de usar un código
4:42:46hexadecimal
4:42:47también si quieres seleccionar un color
4:42:50de esta herramienta si colocas el cursor
4:42:53sobre estos cuadraditos puedes acceder a
4:42:56una herramienta que es muy parecida al
4:42:59color piquer que estamos usando en
4:43:00google aquí puedes escoger el tono del
4:43:04color y luego puedes personalizar lo aún
4:43:07más arrastrando el circulito y también
4:43:09puedes escoger su transparencia eso le
4:43:12agrega un cuarto componente un cuarto
4:43:14elemento
4:43:15aquí dentro del paréntesis un valor
4:43:18entre 0 y 1 cuando es 1 exactamente no
4:43:21se coloca 1 significa que el color está
4:43:25allí presente y a medida que nos
4:43:27acercamos a 0 el color se va volviendo
4:43:30más transparente creo que lo podemos ver
4:43:32mejor con un tono rojizo
4:43:36aquí lo podemos ver puedes ver este de
4:43:38grade es que tenemos aquí si nos
4:43:40acercamos al valor 1 puedes ver el
4:43:43resultado un color opaco que cubre la
4:43:46superficie pero a medida que vamos
4:43:48disminuyendo el valor puedes ver 0 90 0
4:43:5180 0 70 0 50 0 40 vamos haciendo que el
4:43:56color sea más y más transparente
4:43:58entonces si por ejemplo escogemos 0 30
4:44:03aproximadamente podemos escribir aquí 0
4:44:0530 como el cuarto valor el color va a
4:44:08ser transparente volvemos a cargar la
4:44:10página y puedes ver que ahora el color
4:44:12es más transparente y se puede ver más
4:44:15clarito porque el fondo es blanco
4:44:17entonces si omitimos este valor el color
4:44:22sin transparencia en este caso cuando
4:44:24tenemos transparencia rgb se convierte
4:44:28en rgb ah ok cuando especificamos un
4:44:31cuarto valor como por ejemplo 0.4
4:44:35significa alfa en inglés alfa es el
4:44:39cuarto componente que se usa para
4:44:40especificar la transparencia del color
4:44:43que tan transparente es genial ya sabes
4:44:46cómo trabajar con los colores rgb y
4:44:49hexadecimal es ellos son muy muy muy
4:44:52útiles y también puedes usar esta
4:44:54herramienta simplemente sin añadirle
4:44:56transparencia para escoger cualquier
4:44:59color y puedes ver que es su código en
4:45:01rgb se va a actualizar aquí lo puedes
4:45:03ver se va a actualizar al color que
4:45:06escogiste esta herramienta es muy útil
4:45:09genial buen trabajo en la próxima parte
4:45:12vamos a hablar sobre las variables en
4:45:15css vas a aprender por qué son muy
4:45:18importantes y cómo las puedes usar en
4:45:20cfs
4:45:28ahora quiero presentarte a un miembro
4:45:30muy especial del curso este es
4:45:32pingüinito tan bonito que tenemos aquí
4:45:34lo creas o no este pingüino fue creado
4:45:38con html y css
4:45:40veamos los archivos porque vamos a usar
4:45:43este pingüinito como un ejemplo de cómo
4:45:46podemos usar las variables en css y por
4:45:50qué son importantes aquí tenemos los
4:45:52archivos html y css que crearon a
4:45:56nuestro pingüinito podemos verlos aquí
4:45:59lado a lado en el archivo html tenemos
4:46:02la etiqueta raíz de etiqueta principal
4:46:05tenemos nuestro link nuestro elemento
4:46:09link a nuestra hoja de estilos style ss
4:46:12y también tenemos nuestro elemento por y
4:46:16dentro de por y tenemos una secuencia de
4:46:20tips que van creando cada una de las
4:46:23partes del pingüino este es el dif
4:46:26principal que tiene la clase pingüino y
4:46:30luego tenemos dos dips que representan
4:46:33la parte inferior y superior del
4:46:35pingüino para la parte inferior tenemos
4:46:38410 su mano derecha su mano izquierda el
4:46:41pie derecho y el pie izquierdo esto que
4:46:44tenemos aquí estas cuatro partes la
4:46:46parte superior del pingüino está
4:46:49representada por esta secuencia de
4:46:51ventyx tenemos la mejilla derecha
4:46:54la mejilla izquierda la barriga el ojo
4:46:59derecho
4:47:00el ojo izquierdo y cada uno de los ojos
4:47:03tiene dentro un pequeño reflejo
4:47:07luego el color de la mejilla
4:47:10y el pico superior y el pico inferior
4:47:12que es la parte superior e inferior del
4:47:15pico genial no estos elementos mejilla
4:47:18derecha y mejilla izquierda se refieren
4:47:21a estas partes de la cara que es la
4:47:24parte derecha y la parte izquierda de la
4:47:26cara del pingüino podemos ver cada uno
4:47:29de ellos en el diseño final en el
4:47:31resultado final con las herramientas de
4:47:33desarrolladores de chrome aquí tenemos
4:47:36el sporting tenemos el 10 principal del
4:47:39pingüino y luego tenemos el pingüino
4:47:41inferior y el pingüino superior aquí lo
4:47:44tenemos el pingüino inferior está
4:47:46compuesto por la mano derecha la mano
4:47:48izquierda el pie derecho y el pie
4:47:51izquierdo el pingüino superior está
4:47:53compuesto por la mejilla derecha que
4:47:55estamos diciendo
4:47:57mejilla pero en realidad sería como la
4:47:59parte derecha de la cara luego la
4:48:02mejilla izquierda la parte izquierda de
4:48:04la cara luego su barriguita su abdomen
4:48:08el ojo derecho el ojo izquierdo y cada
4:48:10ojo tiene un reflejo puedes ver el
4:48:13diseño increíble que podemos crear
4:48:14simplemente usando tiempo
4:48:16y aquí tenemos el color de la mejilla
4:48:18derecha y el color de la mejilla
4:48:20izquierda y el pico superior el pico
4:48:22inferior ya más o menos sabes cómo es la
4:48:25estructura de pingüino ahora para lograr
4:48:28que cada uno de estos tipos se vea de la
4:48:30forma que se ve tenemos muchas reglas en
4:48:34css tenemos un archivo bastante extenso
4:48:38comparado con nuestros ejemplos
4:48:39anteriores en css y que hace algunas
4:48:42propiedades sobre las cuales quizás te
4:48:45gustaría expandir tus conocimientos en
4:48:47la documentación por ejemplo top left
4:48:50estas propiedades nos ayudan a ubicar
4:48:53ese elemento o ese tipo donde lo
4:48:56queremos
4:48:57respecto a su borde y a su contenedor y
4:49:02estos archivos nos puedes descargar en
4:49:04el repositorio de qinghai que puedes
4:49:07encontrar en la descripción del vídeo
4:49:09que así que puedes verlos con calma y
4:49:12ver cómo se crea cada uno de los
4:49:14componentes
4:49:15en esta parte del curso me gustaría que
4:49:17nos enfocaremos en las variables css
4:49:20esto es nuevo para nosotros estamos
4:49:23usando variables css para definir el
4:49:26estilo del pingüino esta es una variable
4:49:29en css y esta también cuando le
4:49:32agregamos dos guiones y lo puedes ver
4:49:35con más detalle dos guiones antes del
4:49:37nombre de la variable estamos creando
4:49:39una variable donde veas dos guiones ahí
4:49:42tienes una variable en css y puedes ver
4:49:45que el color del texto tampoco es del
4:49:47mismo color que tenemos para las
4:49:49propiedades del css sino que se ven
4:49:52blancas en el tema de fito acá que es
4:49:55una variable una variable es básicamente
4:49:57un nombre que le asignamos a un valor
4:50:00para poder usar ese nombre a lo largo de
4:50:03nuestro archivo donde necesitemos esa
4:50:06variable o ese valor podemos usar
4:50:08simplemente el nombre de la variable y
4:50:10vamos a poder usar ese valor
4:50:12indirectamente por ejemplo si necesito
4:50:15usar este valor en muchos lugares
4:50:17diferentes del archivo puedo simplemente
4:50:20definir una variable y usar ese nombre
4:50:23de la variable y escribir el valor una
4:50:25sola vez cuál va a ser la ventaja de
4:50:28hacer esto que si yo necesito cambiar
4:50:30este valor solo lo voy a cambiar en un
4:50:32lugar específico donde defino esa
4:50:35variable y donde aparezca esa variable
4:50:38el valor se va a actualizar
4:50:39automáticamente
4:50:41al igual y lo mismo ocurre con esta
4:50:44variable la definimos una sola vez y ese
4:50:47valor se va a poder reutilizar solo con
4:50:49el nombre de la variable
4:50:52veamos qué ocurre si yo cambio este
4:50:55valor a blanco way
4:50:58y el pico quiero que sea naranja
4:51:01hay dos componentes que conforman el
4:51:03pico del pingüino así que yo puedo
4:51:06reutilizar ese valor en dos lugares
4:51:09distintos y solo tengo que hacer un solo
4:51:11cambio puedes ver aquí abajo que si
4:51:15bajamos a las clases
4:51:18del pico pico superior y pico inferior
4:51:22los dos componentes del pico estamos
4:51:26usando aquí la variable
4:51:28pingüino pico y pingüino pico ya vas a
4:51:32ver cómo las podemos usar formalmente y
4:51:35por qué especificamos este valor pero lo
4:51:38importante en este momento es ver que
4:51:39estamos usando la variable para definir
4:51:41el fondo de ese elemento el color de
4:51:44fondo después de la actualización si
4:51:46volvemos a cargar la página puedes ver
4:51:49que ahora el pingüinito cambio de color
4:51:52los componentes que usan el mismo color
4:51:55que en la barriga del pingüino fueron
4:51:57actualizados la mejilla derecha y la
4:51:59mejilla izquierda y el pico también
4:52:01cambio de color al igual que sus pies
4:52:04también podemos crear otra variable
4:52:07nueva esa variable va a definir el color
4:52:11de la piel del pingüino esta piel negra
4:52:14que tenemos aquí la podemos cambiar por
4:52:17ejemplo a gris
4:52:18en la próxima parte vamos a usar esta
4:52:21variable vamos a agregar esta variable a
4:52:24las propiedades que van a hacer que
4:52:26cuando cambiemos este valor de negro a
4:52:29gris va a poder cambiar o actualizar ese
4:52:32valor donde sea necesario para que todo
4:52:35el cuerpo del pingüino se muestre gris
4:52:37en lugar de negro eso lo vamos a hacer
4:52:39en la próxima parte así que te espero
4:52:41allí
4:52:48vamos a iniciar con el valor negro para
4:52:50esta variable este color va a definir la
4:52:53piel del pingüino y vamos a usar esta
4:52:55variable donde sea necesario para
4:52:58definir el color de la piel del pingüino
4:53:00así podemos cambiarlo rapidito cuando
4:53:03tengamos todo implementado para usar el
4:53:06valor de esta variable simplemente vamos
4:53:08a los componentes que necesitan esta
4:53:11variable esos componentes son aquí
4:53:16pingüinos superior en lugar del valor
4:53:19blanco vamos a usar nuestra variable
4:53:22para que el valor que le asignemos a esa
4:53:24variable sea el color de fondo de esa
4:53:26parte del pingüino para eso escribimos
4:53:29var y dentro de los paréntesis
4:53:32escribimos el nombre de la variable
4:53:34incluyendo los dos iones que hacemos
4:53:37exactamente lo mismo aquí abajo bar
4:53:41con el nombre de la variable pingüino
4:53:44inferior luego mano derecha también
4:53:47debería ser del mismo color así que
4:53:50vamos a usar nuestra variable mano
4:53:53izquierda también debería ser del mismo
4:53:55color pingüino piel las mejillas son del
4:53:59mismo color de la barriga así que no
4:54:02necesitamos usar esa variable ya estamos
4:54:04usando otra variable los ojos si son
4:54:07negros y creo que ya con eso cubrimos
4:54:10todos los componentes que necesitan ser
4:54:13del mismo color de la piel del pingüino
4:54:15así que sólo para comprobar que todo
4:54:19está correcto cargar nuevamente la
4:54:20página no vemos ninguna diferencia hasta
4:54:23ahora porque le asignamos el color negro
4:54:26pero veamos lo fácil que va a ser
4:54:29cambiar el color de la piel del pingüino
4:54:32vamos a asignarle un color gris grave en
4:54:36inglés así con sólo cambiar el color en
4:54:39un solo lugar de tu archivo css puedes
4:54:43actualizar el valor en muchos lugares
4:54:46diferentes
4:54:47del archivo cf ya vas a ver en donde
4:54:51específicamente solo vas a poder usar
4:54:53esta variable en los elementos que son
4:54:56descendientes de donde fue definida o
4:54:59creada pingüino en este caso es el
4:55:01contenedor principal así que vamos a
4:55:04poder usar estas variables en todos los
4:55:07elementos que descienden de pingüinos
4:55:10todos los elementos que están contenidos
4:55:13dentro de el elemento con la clase
4:55:16pingüino probemos nuevamente si queremos
4:55:19cambiar el color del pingüino a rosado
4:55:21por ejemplo también lo podemos hacer o
4:55:24azul quien sabe cualquier color que te
4:55:27imagines se puede asignar al pingüino y
4:55:30cambiarlos así de fácil las variables
4:55:33son muy importantes en css porque nos
4:55:37permiten escribir archivos que son mucho
4:55:39más fáciles de mantener puedes ver lo
4:55:41fácil que fue hacer un cambio si no
4:55:43hubiéramos usado una variable tendríamos
4:55:46que hacer este cambio en cada uno de los
4:55:48elementos que quisiéramos adaptar o
4:55:51actualizar y esto nos tomaría mucho más
4:55:54pues sería mucho más difícil y además
4:55:56también tendría mucho más que
4:55:59cometiéramos errores pero qué pasa si
4:56:02hay un error por ejemplo digamos que por
4:56:06error en lugar de escribir el nombre de
4:56:08la variable lo escribimos mal
4:56:10introducimos un error de tipeo si
4:56:13volvemos a cargar la página aquí puedes
4:56:15ver que ahora el pobre pingüinito no
4:56:17tiene cabeza no tiene parte superior
4:56:20existe una forma de especificar un
4:56:23respaldo un valor de respaldo para esa
4:56:26variable por si acaso la variable no
4:56:28está disponible o si no se puede leer o
4:56:30encontrar al momento de presentar el
4:56:33resultado eso lo vamos a ver en la
4:56:36próxima parte por ahora vamos a
4:56:38devolverle su cabecita al pingüino antes
4:56:41de continuar ok te veo allí para asignar
4:56:44un valor de respaldo
4:56:51veamos cómo puedes asignarle un valor de
4:56:54respaldo a tus variables en css en la
4:56:58parte anterior vimos lo que ocurriría si
4:57:00en lugar de escribir el nombre de la
4:57:03variable
4:57:04escribimos ese nombre pero con un error
4:57:07de tipeo por ejemplo en este caso
4:57:10olvidamos la voz y el pobre pingüino
4:57:12quedó sin cabeza entonces para prevenir
4:57:16este tipo de error podemos asignar un
4:57:19valor de respaldo para que en caso de
4:57:21que esa variable no se consiga o no esté
4:57:24correcta el valor de respaldo se va a
4:57:26usar para eso solamente tenemos que
4:57:29escribir una coma un espacio después de
4:57:32la coma y el valor de respaldo en este
4:57:34caso como la variable representa un
4:57:37color escribimos el color que esa
4:57:39variable representa o el valor de
4:57:42respaldo que queremos asignarle en este
4:57:45caso vamos a asignarle el valor negro y
4:57:48si volvemos a cargar la página puedes
4:57:51ver que ahora el pingüino tiene una
4:57:53cabecita negra pero en este caso debería
4:57:56ser
4:57:57ahora vamos a
4:57:59cambiar el color de la variable a negro
4:58:03y puedes ver que ahora sí todo se
4:58:05actualizó si volvemos a escribir bien
4:58:08las variables se va a usar el valor de
4:58:10la variable cuando la variable se pueda
4:58:12usar o reconocer adecuadamente también
4:58:15deberíamos agregar este valor de
4:58:17respaldo en todos los otros lugares
4:58:19donde usamos nuestra variable
4:58:24pingüino piel pingüino piel
4:58:28y aquí ya teníamos valores de respaldo
4:58:30para las otras variables puedes ver que
4:58:34teníamos color blanco para pingüino
4:58:36barriga y color naranja para pingüino
4:58:39pico
4:58:41en caso de que esas variables no se
4:58:43detecten o no sean reconocidas por el
4:58:46navegador o por el browser entonces se
4:58:48usa el valor de respaldo
4:58:51ahora para practicar aún más cómo puedes
4:58:53usar las variables en css vamos a crear
4:58:56otra variable
4:58:58pingüino
4:59:01mejillas y vamos a asignarle el color
4:59:04rosado porque si ves aquí abajo nuestro
4:59:09archivo un poco más arriba
4:59:12la clase color mejilla derecha y color
4:59:15mejilla izquierda
4:59:17estos circulitos que tenemos aquí usan
4:59:20el color de fondo rosado pero digamos
4:59:23que queremos reemplazar este color fijo
4:59:26con una variable para poder actualizarlo
4:59:29fácilmente
4:59:31definimos esta variable pingüino
4:59:33mejillas podemos copiar y pegar ese
4:59:35nombre para no tener errores de tipeo
4:59:38posibles
4:59:40luego vamos a la clase específica y en
4:59:43la propiedad reemplazamos el valor por
4:59:45bar dentro de los paréntesis escribimos
4:59:48el nombre de la variable y luego le
4:59:51asignábamos el valor de respaldo y aquí
4:59:54hacemos lo mismo el nombre de la
4:59:55variable y el valor de respaldo genial
4:59:58ahora si volvemos a cargar la página
5:00:00todo está igual pero si cambiamos
5:00:04actualizamos el valor de la variable
5:00:08digamos a verde ahora el pingüinito va a
5:00:11tener mejillas verdes
5:00:14vemos el cambio inmediatamente y se
5:00:17aplica a ambas mejillas porque estamos
5:00:19usando la variable css genial no si la
5:00:24variable no es detectada porque digamos
5:00:27que tenemos un error de tipeo o por
5:00:31alguna razón no se detectó se va a usar
5:00:34el color de respaldo en este caso era
5:00:37rosado pero también lo podemos cambiar
5:00:39genial no vamos a volver a asignar
5:00:42mejillas rosadas buen trabajo ya sabes
5:00:45cómo trabajar con variables en css
5:00:48recuerda simplemente las defines aquí en
5:00:52alguna clase y todos los descendientes
5:00:54de ese contenedor van a poder tener
5:00:57acceso a esa variable escribimos dos
5:01:00guiones y luego el nombre de la variable
5:01:03dos puntos espacio y su valor y como
5:01:08siempre terminamos en punto y coma luego
5:01:10para usarlas escribimos var y entre
5:01:13paréntesis el nombre de la variable
5:01:16si lo deseamos una coma un espacio y un
5:01:19valor de respaldo las variables son muy
5:01:22útiles en css pero lamentablemente no
5:01:25todos los navegadores o browsers
5:01:27reconocen las variables así que tenemos
5:01:31que recurrir a ciertas medidas de
5:01:33prevención en nuestro archivo css para
5:01:37estos casos si el usuario está
5:01:38ingresando desde un navegador que no
5:01:40reconoce las variables css en la próxima
5:01:44parte vamos a ver cómo se ve nuestro
5:01:46pingüino en internet explorer es un
5:01:49navegador que no reconoce las variables
5:01:52css y luego vamos a solucionar ese
5:01:55problema con respaldos otro tipo de
5:01:58respaldos que podemos usar así que te
5:02:01veo allí es muy importante también
5:02:03pensar en la compatibilidad de tu página
5:02:05web con distintos browser
5:02:13veamos cómo se ve nuestro pingüino en un
5:02:16navegador que no reconoce en las
5:02:19variables css veamos el resultado si voy
5:02:23a mi carpeta donde tengo el archivo
5:02:25index html
5:02:26y abro ese archivo con internet explorer
5:02:30aquí puedes ver el resultado el pobre
5:02:33pingüinito sólo tiene ojos porque son
5:02:37los únicos componentes en nuestro
5:02:38archivo css que no usa una variable como
5:02:42podemos solucionar esto porque si ésta
5:02:44es nuestra página web y esto ocurre
5:02:47vamos a limitar a nuestros usuarios que
5:02:50están usando internet explorer no van a
5:02:52poder usar nuestra página en este
5:02:54navegador y siempre como desarrolladores
5:02:57web es importante pensar en la
5:02:59compatibilidad de nuestra página con
5:03:02distintos navegadores o browsers cómo
5:03:04podemos solucionar esto
5:03:06lo que podemos hacer es especificar el
5:03:09valor negro el valor que usamos como
5:03:12respaldo antes de usar la variable de
5:03:16esta forma
5:03:19si queremos que el fondo el color de
5:03:22fondo sea negro como un respaldo en
5:03:24lugar de colocarlo aquí como un respaldo
5:03:27dentro de board lo vamos a escribir
5:03:31arriba así si el navegador a interpreta
5:03:36esto correctamente pero luego no puede
5:03:39interpretar esta propiedad porque la
5:03:41variable no se reconoce simplemente este
5:03:45valor es el que se va a asignar el
5:03:47último que fue reconocido o interpretado
5:03:49así es como funciona css si defines dos
5:03:52veces una propiedad con distintos
5:03:55valores el último valor que se asignó es
5:03:58el definitivo el que se va a mostrar en
5:04:01este caso si usamos internet explorer
5:04:04este valor se va a asignar porque se va
5:04:06a reconocer pero cuando lleguemos a esta
5:04:09línea la variable no se va a reconocer
5:04:11se omiten no se modifica el valor que se
5:04:14había asignado anteriormente en este
5:04:17caso también podemos omitir aquí el
5:04:19valor de respaldo si la variable no se
5:04:21detecta este valor se va a asignar
5:04:35podemos hacer lo mismo que en todas las
5:04:39reglas que usan la variable por ahora
5:04:42vamos a concentrarnos en la variable
5:04:44pingüino piel para ver cómo aparece la
5:04:46piel en internet explorer cuando hacemos
5:04:49estos cambios ya hicimos los cambios y
5:04:52ahora vamos a abrir nuestro pingüinito
5:04:54ahora si vemos a nuestro pingüinito solo
5:04:56que hasta el momento sólo podemos ver su
5:04:59cuerpo con el color de piel negro y sus
5:05:02ojitos que están aquí escondidos y
5:05:04camuflados entre el negro vamos a hacer
5:05:07lo mismo con las otras reglas para que
5:05:10veamos nuevamente a nuestro pingüinito
5:05:12aquí abajo tenemos la variable pingüino
5:05:15barriga y queremos asignarle el valor de
5:05:19respaldo blanco para eso le asignamos
5:05:21aquí el valor blanco antes de referirnos
5:05:25a la variable si la variable se detecta
5:05:28si estamos usando por ejemplo cron
5:05:30google chrome que si detecta las
5:05:32variables css entonces este valor ya no
5:05:36se va a asignar sino que se va a asignar
5:05:38el valor de la variable
5:05:40ahora vamos a seguir agregando este
5:05:43color aquí abajo
5:05:45aquí en la regla tenemos aquí y de una
5:05:49vez vamos a hacer lo mismo con las
5:05:51partes de color anaranjado aquí aquí y
5:05:55en este caso no estamos usando variables
5:05:57para los ojos ni para los reflejos de
5:06:00los ojos si estamos usando para las
5:06:02mejillas
5:06:03así que le asignamos el valor pink
5:06:07rosado
5:06:09aquí aquí
5:06:13borramos los valores de respaldo y para
5:06:15el pico superior e inferior también
5:06:17estamos usando variables así que
5:06:22vamos a agregar el respaldo y listo ya
5:06:26llegamos al final del archivo vamos a
5:06:29guardarlo si lo volvemos a cargar en
5:06:32google chrome
5:06:34oops una de las mejillas
5:06:37desapareció aquí porque tenemos un error
5:06:41de tipeo aquí ya tenemos nuevamente
5:06:43nuestra mejilla puedes ver a nuestro
5:06:46pingüinito aquí ahora sí podemos ver el
5:06:49resultado final porque estamos dando la
5:06:51internet explorer una alternativa a las
5:06:54variables css porque no las reconoce y
5:06:58en google chrome también el resultado se
5:07:00mantuvo exactamente igual genial también
5:07:03probemos qué ocurre si estamos en un
5:07:06navegador en un browser que si detecta o
5:07:09interpreta las variables css pero
5:07:12digamos que usamos esta técnica y la
5:07:16variable tiene un error de tipeo que va
5:07:19a ocurrir si volvemos a cargar la página
5:07:22podemos ver que ahora la cabecita del
5:07:26pingüino desapareció porque
5:07:29anteriormente dijimos que en ese caso
5:07:31podríamos omitir el valor de respaldo
5:07:33pero esto es lo que podría ocurrir si lo
5:07:36hacemos porque inicialmente uno puede
5:07:38pensar eso que se puede omitir el valor
5:07:40de respaldo pero si lo hacemos si el
5:07:44browser interpreta las variables css
5:07:46corremos el riesgo de que pase
5:07:49exactamente esto porque se va a asignar
5:07:52este valor y luego se va a interpretar
5:07:55esa variable y si no se detecta la
5:07:58variable porque hay un error de tipeo
5:08:00vamos a tener este tipo de error en
5:08:02internet explorer esto no ocurriría
5:08:05porque ni siquiera interpreta las
5:08:06variables pero en google chrome si las
5:08:09interpreta y no muestra ese elemento
5:08:13así que si agregamos el valor de
5:08:15respaldo ahora sí podemos ver el
5:08:18resultado como lo queremos así que es
5:08:21recomendable incluir ese valor de
5:08:23respaldo aquí también embargo vamos a
5:08:26agregar solo a cada uno de estos
5:08:27elementos
5:08:32la acc
5:08:34va a estar a white
5:08:37estar a white white orange naranja
5:08:42ahora en naranja aquí agregamos pink
5:08:48aquí agregamos pink también
5:08:50orange
5:08:53orange y llegamos al final ya tenemos
5:08:56nuestros valores de respaldo y también
5:08:58tenemos un respaldo en caso de que el
5:09:02navegador nos detecte o no interprete
5:09:05las variables css genial buen trabajo ya
5:09:10sabes cómo trabajar con variables en css
5:09:13también es importante que comprendas
5:09:15cómo se heredan las variables css porque
5:09:18no necesariamente vas a poder utilizar
5:09:21todas las variables en todas las clases
5:09:25o todos los selectores de tu archivo css
5:09:28hay una jerarquía una herencia que va a
5:09:31ocurrir cuando defines una variable en
5:09:33css vas a aprender más sobre esta
5:09:36herencia en la próxima parte del curso
5:09:45vamos a volver a ver nuestro querido
5:09:48pingüinito para ilustrar cómo funciona
5:09:51la herencia de variables en css
5:10:00si vamos a nuestro archivo css ahora
5:10:03puedes ver que estamos usando una
5:10:04variable la variable pingüino barriga
5:10:06para definir el fondo el color del fondo
5:10:10del elemento boring el elemento
5:10:13principal de la página así tenemos todo
5:10:16el fondo de la página de un color
5:10:18específico pero qué ocurre nosotros
5:10:21estamos definiendo la variable pingüino
5:10:24barriga
5:10:25dentro de la clase pingüino eso
5:10:28significa que sólo este elemento que
5:10:32tiene la clase pingüino va a tener
5:10:35acceso a esa variable ese elemento y
5:10:37todos sus descendientes
5:10:39pero boris no es un descendiente de este
5:10:43tipo más bien dif es un descendiente de
5:10:47bonnie porque boris es el elemento
5:10:49principal es el elemento que los
5:10:52contiene a todos entonces cuando usamos
5:10:55la variable aquí vemos que el resultado
5:10:58es que se usa el color de respaldo que
5:11:00asignamos el azul claro que tenemos aquí
5:11:03porque la variable no se reconoce
5:11:06podemos lograr que esa variable se
5:11:08reconozca en vor y podemos simplemente
5:11:11agregar la pseudo clase route y en lugar
5:11:14de definir esta variable aquí dentro de
5:11:17la clase pingüino podemos definirla en
5:11:21bruto de esta forma la variable va a ser
5:11:25global porque el root va a referirse o
5:11:28va a seleccionar el elemento html el
5:11:32elemento raíz de la página así que todos
5:11:35sus descendientes todos los elementos de
5:11:38bori van a poder tener acceso a esa
5:11:41variable todos los estilos que usemos
5:11:43van a poder tener acceso a esta variable
5:11:45todas las reglas que definamos
5:11:48entonces ahora si volvemos a cargar la
5:11:51página vor y ya debería tener acceso a
5:11:53esa variable y el fondo debería ser
5:11:56rosado veamos y vuela aquí tenemos
5:12:00nuestro fondo rosado la variable
5:12:03pingüino barriga ahora es global y la
5:12:06podemos usar en nuestro elemento o parís
5:12:10en la próxima parte vamos a ver cómo
5:12:13puedes cambiar el valor de esta variable
5:12:16solo para un área específica o para un
5:12:19elemento específico de tu página web y
5:12:23sus descendientes porque no
5:12:25necesariamente queremos que el valor de
5:12:27esta variable se ha rozado en todo el
5:12:30documento puede ser que necesitemos usar
5:12:32esa variable en otro elemento y que
5:12:35tenga otro color podemos hacerlo en css
5:12:38muy fácilmente eso es lo que vas a
5:12:40aprender en la próxima parte
5:12:48vamos a ver cómo puedes cambiar el valor
5:12:51de una variable solamente para un área
5:12:54específica de tu estructura de tu página
5:12:57volvemos con nuestro pingüinito tenemos
5:13:00el mismo archivo html
5:13:03y ahora en css tenemos las variables en
5:13:08la pseudo clase brut definimos pingüino
5:13:11piel pingüino barriga pingüino pico y
5:13:13pingüino mejillas estamos también usando
5:13:17esa variable pingüino barriga para
5:13:19seleccionar el color de fondo de la
5:13:23página para el elemento bonnie pero como
5:13:26esta variable pingüino barriga es global
5:13:28se está usando el valor rosado para
5:13:31todos los elementos que usan esta
5:13:34variable pingüino barriga eso incluye
5:13:36aquí a la barriguita del pingüino y las
5:13:40mejillas que tenemos aquí las partes de
5:13:42la cara izquierda y derecha si nosotros
5:13:44queremos cambiar ese valor de esa
5:13:47variable por ejemplo blanco para que
5:13:49estas partes solamente se muestran en
5:13:52blanco podemos volver a definir esa
5:13:56variable aquí por ejemplo en pingüino
5:13:59que era el elemento principal del cuerpo
5:14:02del pingüino si lo definimos aquí vamos
5:14:05a poder usar esa variable y su valor
5:14:07nuevo actualizado en todos estos
5:14:10elementos llamados sus descendientes en
5:14:14todos los descendientes de ese tipo
5:14:16principal del pingüino
5:14:18veamos el efecto volvemos a definir la
5:14:21variable pingüino barriga y ahora le
5:14:25asignamos el valor weight blanco si
5:14:28volvemos a cargar la página ahora puedes
5:14:31ver qué lindo nuestro pingüinito que
5:14:33tiene su barriga blanca y sus mejillas
5:14:35también blancas esto simplemente está
5:14:38reemplazando el valor global el valor
5:14:41que tenía esa variable hasta que llega a
5:14:43este elemento con esta clase y luego los
5:14:47elementos descendientes de pingüino que
5:14:50tenemos aquí del elemento que tenía la
5:14:53clase pingüino también heredan ese nuevo
5:14:56valor simplemente hay que definir la
5:14:58variable nuevamente ok y la herencia de
5:15:02ese valor como se va a heredar está
5:15:05determinada por la estructura en html
5:15:09felicitaciones completaste el curso y ya
5:15:12sabes los fundamentos de html y css buen
5:15:16trabajo espero que te haya gustado el
5:15:18curso te invito a suscribirte a nuestro
5:15:21canal ya seguir aprendiendo con los
5:15:23cursos que tenemos publicados en nuestro
5:15:25canal te veo en próximos cursos

About this transcript

This page contains the full transcript of Aprende HTML y CSS - Curso Desde Cero by freeCodeCamp Español, generated from the public captions YouTube serves with the video. The transcript has 43,175 words across 6,731 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.