TUTORIAL HTML desde Cero | COMPLETO y ACTUALIZADO en Visual Studio Code 🟠 HTML5 Para PRINCIPIANTES

hola y bienvenidos a este nuevo curso de html5 edición 2020 2021 he decidido regrabar este curso con el feedback y las respuestas que me han dado más de 50.000 usuarios tanto en youtube como manu de mí que me han ido dejando comentarios y me han mandado mensajes de los puntos buenos y malos del curso de esta forma pretendo daros un contenido mucho más actualizado con mucha más temática y sobre todo mucho más completo que el anterior el curso lo he dividido en vídeos muy cortitos y creo que el más largo dura unos 11 minutos y la mayoría son de entre 3 y 6 minutos esto lo he hecho con el objetivo de que si tenéis una duda o queréis buscar algo en concreto os cueste muy poco encontrarlo ahora si os parece bien vamos a ver el temario completo del curso para que veáis todo lo que vamos a hacer en esta nueva edición la primera parte es común a casi todos los cursos que he hecho que son los primeros pasos que creo que es necesario dar siempre que se aprende un lenguaje nuevo vamos a ver el editor de código que vamos a utilizar vamos a instalar plugins que nos van a ayudar a escribir código vamos a ver algo de vocabulario web para todas esas palabras extrañas que se oyen cuando uno inicia en el desarrollo web pues os doy una definición que todos podáis entender sobre ciertos términos que al principio serán confusos vamos a ver qué es html y un poco de su historia vamos a ver cuál es la estructura de un documento html y por último os voy a enseñar a crear un servidor de desarrollo web para poder desarrollar de forma correcta un sitio web después vamos a empezar todos los elementos de sección viendo los títulos los párrafos vamos a hablar de la semántica de html y por fin vamos a resolver esa gran duda y es el gran debate que existe sobre cuándo utilizar article y cuándo utilizarse tierra después vamos a ver los elementos a nivel de texto vamos a ver tanto enlaces como etiquetas a nivel de texto que se utilizan mucho y que conviene saber cuando son elementos de línea y cuando son elementos de bloque también vamos a hablar sobre los atributos en html que son una parte muy importante de html y vamos a ver tanto los atributos obligatorios como los atributos personalizados que en html no tienen mucha utilidad directa pero conviene que sepáis utilizar los atributos personalizados porque en un futuro os van a salvar muchas veces después vamos a ver las listas que existen en html vamos a ver las listas ordenadas las desordenadas las listas de definición y las listas anidadas además de los atributos de las listas también vamos a ver cómo funcionan las tablas y cuando utilizan las tablas vamos a ver su construcción su semántica correcta y los atributos que pueden tener una tabla además vamos a hacer un pequeño ejercicio de estilos para las tablas que sobre todo os va a servir para saber cómo no dar estilos a una tabla cuál es la forma incorrecta de dar estilos a una tabla también vamos a hablar de formularios que es uno de los puntos más importantes de todo el curso vamos a ver la estructura los tipos de input que existen cómo construir elementos seleccionables y sobre todo los atributos de los formularios que son muchísimos vamos a hablar sobre contenido embebido que serían las imágenes el audio y el vídeo os voy a enseñar a hacer imágenes responsive sim css y respecto a audio y vídeo os voy a contar las novedades que han venido con el estándar html5 punto 2 también vamos a hablar sobre etiquetas meta y sobre accesibilidad que es bastante importante y en las etiquetas meta aparte de hablaros un poquito de seo sobre cómo posicionar y ver qué podemos hacer tanto con la api de facebook y la de twitter vamos a ver el tema de los aria que son unos atributos que llegaron en el estándar 5.1 me parece o en el 5 y ayudan muchísimo para que los navegadores que no tienen una interfaz gráfica que son navegadores para gente invidente o navegadores de terminal saber cómo construir un sitio web que sea amable navegable para todo el mundo también vamos a ver una pequeña introducción a git sobre cómo crear un repositorio cómo subir todo lo que hemos hecho durante el curso hub y después vamos a crear un sitio web completo con html vamos a publicarlo de forma gratuita en varios servicios que nos ofrecen esta opción y también vamos a un dominio y un hosting para ver cómo es el panel de control y enseñaros a configurar la subida a través de ftp a ese dominio y por último os contaré los siguientes pasos que deberíais dar en el desarrollo web y lo primero va a ser cómo leer la documentación tanto de la w3c como de la mn que son los principales proveedores del estándar que estudiar después de este curso y sobre todo cómo mantenerse actualizado porque los temas tecnológicos en cuanto pasan unos meses es muy probable que hayan salido cosas nuevas y tú te hayas quedado atrás y ya para finalizar este vídeo vamos a ver algunas de las preguntas que me habéis hecho en dischord en relación al curso nuevo y son que cuánto dura el curso y la respuesta es que el curso dura aproximadamente 7 u 8 horas más o menos que si está completo el curso a esto os tengo que decir que no no existe ningún curso de html completo porque es imposible evaluar todas las situaciones posibles pero lo que sí que os puedo decir es que a día de hoy es el curso más completo y más actualizado que vais a encontrar en youtube también me habéis preguntado que dónde podéis consultar las dudas podéis dejarme las dudas tanto en los comentarios del vídeo como en la comunidad de dysport yo os recomiendo que me lo dejéis en la comunidad de discos porque hay alrededor de 600 personas ya y es muy probable que si dejáis la duda ahí os respondan en el momento de todas formas si queréis dejar un comentario en youtube yo intentaré contestarlo en cuanto lo vea y tenga tiempo os contestaré las dudas también me habéis preguntado que si voy a borrar el otro curso si no voy a dejar contenido desactualizado en el canal entonces para cuando termine este vídeo el otro curso ya no estará en youtube pero ya tendréis el nuevo y podréis empezar a verlo ya también me habéis dicho que cuando va a estar el curso completo como no quiero subir el curso de golpe para que no sature 'aces' lo que voy a hacer es subirlo a lo largo de este mes y que poco a poco vaya pudiendo verlo y asimilando lo poco a poco así que al finalizar este mes tendréis el curso completamente subido [Música] y por último me habéis preguntado que si lo voy a subir en un solo vídeo yo no soy amigo o no considero que sea útil subir el curso completo en un solo vídeo esto lo hago desde el punto de vista del aprendizaje pero también soy consciente de que hay gente que prefiere tenerlo en un solo vídeo por temas de conexión por temas de accesibilidad y porque es posible que les resulte más cómodo tenerlo en un solo vídeo yo en principio no tengo pensado subirlo en un solo vídeo pero si lo queréis me lo podéis dejar en un comentario en este vídeo o me lo podéis pedir por dispone y no tengo ningún problema en juntar todos los vídeos y subirlo directamente a youtube así que si alguien lo quiere así pues que me lo diga y no tengo ningún inconveniente en hacerlo [Música] y por último muchísimas gracias a todos bienvenidos a los que habéis llegado recientemente al canal pero sobre todo muchísimas gracias a todos los que estáis en la comunidad de discos ayudando continuamente porque yo solo no doy abasto como es evidente así que mi más sincero agradecimiento a todos los que me echáis una mano para contestar todas las dudas y todos los problemas que van surgiendo así que sin nada más que añadir muchísimas gracias y nos vemos en el siguiente vídeo ah ah [Música] en este vídeo vamos a instalar nuestro editor de código fuente que es la herramienta que vamos a utilizar para escribir código es posible que si estáis empezando algunos preguntéis porque necesitamos un editor de código fuente bien pues aquí en la wikipedia tenemos una pequeña descripción de lo que es un editor de código fuente y nos dice que es un editor de texto diseñado específicamente para editar el código fuente de programas informáticos que puede ser una aplicación individual o estar incluido en un entorno de desarrollo integrado esto es algo que si estáis empezando no merece la pena que lo investigue jce porque lo único que vais a conseguir es confundir os entonces de esto es algo que ya hablaremos mucho más adelante aquí tenemos unos cuantos pero existen muchísimos más para este curso en concreto vamos a utilizar visual estudio code vamos a buscarlo aquí en google vamos a poner visual estudio code es muy importante que cojáis visual estudio code y no visual estudio vale son dos programas distintos y lo importante es que sea visual estudio con su página oficial es coach visual estudio puntocom y para descargarlo da igual que tengáis windows mac o linux aquí si pulsáis en la flechita tenéis las tres opciones para instalarlo yo lo voy a descargar para windows y si hacemos clic aquí pues automáticamente empieza la descarga y en el caso de que no os empezará la descarga automáticamente pues tenéis aquí un link para repetir el proceso en el caso de que haya fallado vamos a hacer clic en la descarga y se nos abrirá el instalador de visual studio code esto lo podemos cerrar y la instalación es bastante sencilla vamos a aceptar el acuerdo le damos a siguiente aquí nos viene la ruta donde vamos a instalar visual studio code que podéis cambiarlo si lo necesitáis me dice que la carpeta ya está instalada porque he hecho algunas pruebas pero a vosotros esta ventana no os saldrá así que le vamos a decir que si visual studio code y aquí nos sale una serie de opciones que yo os recomiendo marcar agregar la acción abril con code al menú contextual esto significa que si hacemos clic derecho en un archivo que sea de código en esta ventana nos va a aparecer la opción a abrir con visual studio code o abrir con code entonces es muy importante que estas dos las tengáis marcadas para poder abrir los archivos de una forma rápida y además voy a crear un acceso directo en el escritorio para tenerlo aquí más a mano y después le voy a dar al siguiente e instalar una vez que se haya instalado visual studio code vamos a instalar una serie de paquetes dentro del propio programa que nos van a ayudar bastante a la realización del curso y de la escritura del código así que nos vemos en el siguiente vídeo ah [Música] la primera vez que abráis el programa os encontraréis algo parecido a esto en este punto de aquí en el último icono donde pone extensiones es donde tenemos lo que podríamos llamar la tienda de visual studio code y es todo completamente gratuito y nos permite instalar una serie de paquetes que nos van a ayudar mucho a desarrollar el primero que vamos a instalar es el paquete de español para que todos tengamos el visual studio code en español y podáis seguirme con los menús y todo eso es el primero que aparece spanish language pack for visual studio code vamos a darle aquí donde pone install se empieza a instalar y una vez que se ha instalado nos dice que si queremos reiniciar el programa para aplicar la configuración vamos a darle a reiniciar el programa se nos volverá a abrir y ahora mismo ya tenemos el piso al estudio code completamente en español vamos a volver a nuestro campo de extensiones y aquí vamos a buscar auto close no auto ring perdón auto ring en tag esto de momento no vais a saber para qué sirve porque lo único que hace es cambiar el nombre de la etiqueta de cierre que es algo que todavía no hemos visto no sabemos ni lo que es una etiqueta ni nada pero este paquete quiero que no instale jce y el auto close tag también quiero que lo instales de esto no os preocupéis porque muy prontito dentro de un par de vídeos vamos a ver qué es una etiqueta y qué significa cerrar una etiqueta y todo eso aparte de estas dos extensiones también quiero que busquéis pre tierra y esto es simplemente lo que hace es formatear nos el código para que se vea mucho más limpio con sus espacios y todo eso entonces vais a darle instalar aquí y una vez que tengáis instaladas estas extensiones ya podemos continuar con el siguiente vídeo [Música] antes de empezar a configurar cosas ya escribir código me gustaría daros una serie de vocabulario muy resumido con conceptos que como desarrolladores web os van a venir muy bien tenemos ip la ip es un identificador único de una página web es único y representa la dirección donde está el ordenador que contiene la página web que vamos a visitar esto a ejemplo de persona sería como el dni cada página web o cada sitio web va a tener una ip única que lo identifica y le dice al ordenador dónde tiene que ir para cargar esa página web cuando hablamos de un dominio o una url estamos hablando de un nombre asociado a esa ip para los humanos es mucho más fácil recordar nombres que recordar números para las máquinas no entonces lo que hacemos es darle un nombre a esos códigos ip para ayudarnos a recordar los sitios para que veáis un pequeño ejemplo si nosotros en la barra de dirección introducimos 200 16.58 por aquí ya está escrita 210 puntos 163 y le damos a intro como veis automáticamente esto se convierte en google.com eso es porque lo que hemos escrito el 216 58 210 163 corresponde a la ip de google que nosotros pongamos una ip y se convierta en el nombre del dominio es porque hay un servidor detrás que se encarga de hacer ese cambio estos servidores son los servidores dns su principal función es traducir el nombre a su identificador único pero como habéis visto si ponemos el identificador también es capaz de traducirlo al nombre eso lo hace porque tiene una serie de tablas asociadas de nombre versus ip entonces como tiene asociado cada nombre a una ip es capaz de saber a quién corresponde tanto el nombre como la ip también necesitas saber lo que es un sitio web un sitio web es un conjunto de uno o varios recursos web cuando nosotros entramos en un sitio que tiene varios enlaces como inicio servicios contacto cada uno de esos sitios es una página web y al conjunto de esas páginas web se le denomina sitio web un servidor web es un ordenador cuyo único objetivo es servir recursos web cuando la gente habla de la nube o de un servidor o cosas así es simplemente un ordenador que está preparado para recibir peticiones y devolver esa página web o ese sitio web o lo que lo que le estemos pidiendo el hosting es el almacenamiento de ese servidor web cuando se habla de contratar dominio y hosting realmente el dominio sería la url asociada a una ip y el hosting sería el disco duro del ordenador donde estamos guardando nuestro sitio web entonces aunque estas palabras suenen raras que sepáis que no va más allá de esto y por último una petición cuando se habla de peticiones es la acción de pedir recursos a ese servidor cuando nosotros ponemos la url de google.com lo que estamos haciendo es una petición al servidor de google para que nos devuelva la información de ese sitio web hacemos una búsqueda le hacemos una petición el servidor hace su proceso interno y nos devuelve la información que hemos solicitado y a esa acción se le llama petición no tiene más historia así que este pequeño resumen de vocabulario ahora mismo para html pues seguramente no haga mucha falta pero si os vais a convertir en desarrolladores web toda esta información nos va a ser muy útil en un futuro así que os lo dejo aquí para que lo podáis revisar si en algún momento os hace falta o tenéis dudas así que ahora que tenéis esta pequeña información muy resumida vamos a empezar a ver lo que es html [Música] antes de empezar a escribir código necesitamos saber qué es html para qué sirve y tener un contexto para saber lo que vamos a hacer en el curso el html es un lenguaje de marcado de hipertexto eso es lo que significan las siglas hypertext markup language esto significa que html no es un lenguaje de programación es un lenguaje de estructura o de marcado con html lo que vamos a hacer es construir la base de nuestra página web y es importante que sepáis que html es la base porque todas las páginas del mundo están creadas con html veáis la página que veáis todas tienen la misma base es el único lenguaje que tenemos para crear la base de una página web el objetivo de html es decirle al navegador y a los motores de búsqueda que son los que van a hacer posible que nuestra página sea visible para el mundo cuál es la estructura del documento que hemos escrito qué elementos tiene cómo están organizados y todo eso el html no se encarga del aspecto visual de la página una página en la que sólo utilizamos html es una página fea porque su objetivo es dar estructura y esto lo remarco porque en el anterior curso que hice de html mucha gente me ha preguntado y cómo puedo centrar esto y cómo puedo hacer que la letra sea más grande o de otro color ese no es el objetivo de html si queréis que algo sea bonito necesitáis otro lenguaje que es css que eso ya hablaremos de ello en otro curso en este curso lo que vamos a hacer es aprender a hacer una buena estructura de una página y dar unos buenos cimientos a nuestro sitio web y más adelante ya veremos cómo hacerlo bonito y cómo hacer animaciones y todo lo que queráis pero lo principal es que sepáis construir una página web sólida y con las etiquetas correctas ah [Música] en este vídeo quiero contaros cuál es la historia de html de una forma bastante resumida para que sepáis cuál es el camino que se ha seguido hasta llegar al punto que conocemos hoy en día lo primero es que en 1989 se empezó a desarrollar una forma de comunicarnos a través de internet que en su momento todavía no era html solo era un boceto de lo que se quería conseguir en 1991 se lanzó lo que se conoce como web que no es lo mismo que internet esto es un error muy común y me gustaría que conociera es la diferencia y es que la web es el conjunto de documentos que tenemos disponibles en necesito que entendáis como documento cualquier tipo de página web o sitio web y por otro lado tenemos internet internet es la infraestructura que nos permite ver esos archivos ya sean ordenadores routers antenas todo eso eso es internet pero la web es simplemente el conjunto de documentos que tenemos para visitar y esto se basa en tres conceptos http https y url http significa hypertext transfer protocol es decir es el protocolo que se debe seguir o el conjunto de normas o reglas para que lo entendáis mejor que se deben seguir a la hora de transmitir esa información con esos documentos a través de la red html es el lenguaje sobre el que está escrito todos los sitios web y url sería la dirección donde están esos sitios web cuando vosotros ponéis a google.com eso es una url y eso apunta hacia un sitio concreto que no puede estar en otro sitio digamos que es como el dni de los sitios web solo puede existir uno por cada sitio web no puede haber sitios web duplicados con la misma url en 1992 se lanzó html que no fue el primer intento pero sí fue el que ha perdurado hasta nuestros días antes se hizo ese mg/l que fue el padre digamos de html pero era muy complejo de usar entonces tim berners-lee que se le conoce como el padre de la web creo 7 ml y se desarrolló de una forma completamente abierta para que todo el mundo pudiera crear sus propios html y manejar las normas y las reglas esto con el tiempo fue cambiando evidentemente pero la idea inicial de html fue esa en 1994 se cree que se creó la w3c que es el consorcio que define los estándares de la web estos puede confundir un poco esta frase pero para hacerlo entendible a todo el mundo la w3c es la que se encarga de establecer las normas y de decir lo que está bien en lo que está mal a la hora de escribir un documento html también se encargan de css pero eso es tema para otro curso así que en este caso sólo vamos a ver la parte de la w3c que se encarga de html en 1998 se lanzó a html 4 que ha sido la versión que más tiempo ha durado de html pero esto al final no terminó de cuajar duró muchísimo tiempo pero ahora vamos a ver qué es lo que pasó en un futuro para que html 4 desapareciera en 1999 se creó html 4.1 en el mundo del desarrollo se lo conoce como xhtml 4 que sería una mezcla del lenguaje xml y html el objetivo de la w3c fue que este estándar fuera el definitivo y trabajar sobre él y de hecho después de unos años se estuvo trabajando en el estándar xhtml 2 que sería como la actualización lo que pasa es que la gente no estaba contenta el mundo de los desarrolladores no estaban contentos con esta versión de html porque era muy restrictiva había que escribir el código de una forma muy concreta y si no lo ponía si no funcionaba teníamos lo que se denominaba el modo estricto todas las etiquetas tenían que cerrarse no había no no podíamos utilizar mayúsculas había muchísimas prohibiciones y muchas normas que hacían que si no lo escribía sé exactamente cómo te marcaban las normas la página web directamente no funcionará entonces de esas quejas de la gente en 2004 se creó la uat wg esto fue una especie de consorcio paralelo a la w3c por aquel entonces sólo la w3c dictaba las normas de lo que estaba bien y lo que estaba mal y en 2004 digamos que se separó en dos caminos teníamos la w3c por un lado con el estándar xhtml y por otro lado se creó la uat wg por otro para trabajar sobre el estándar html5 en 2008 terminaron de crear html5 y se lanzó de forma independiente y con este tema pues la w3c no estaba de acuerdo ellos seguían trabajando en el x html 2 y no querían saber nada de html5 la acogida de html5 fue muy buena por el mundo de los del mundo del desarrollo y todo el mundo estaba contento con ello y se empezó a utilizar de forma masiva el tema de html5 y al final en 2014 la w3c tuvo que recular y retractarse abandonó el desarrollo de xhtml 2 y lanzó de forma oficial lo que se conoce hoy en día con el nombre del estándar html5 a día de hoy estamos con el estándar html5 punto 2 que sería la segunda actualización desde 2014 que es el alza a finales de 2017 no se sabe todavía nada sobre el estándar html5 punto 3 pero seguramente en algún momento se lance a parte de todo el tema de la historia de html también existe el otro lado de la web que se conocería como el mundo de los navegadores que si os interesa profundizar en toda la historia de los navegadores y todo lo que ha pasado con ellos tenéis un documental en youtube que pertenece a discovery chanel que si ponéis guerra de los navegadores pues tenéis un documental de 40 minutos que está bastante bien explicado y podéis conocer toda la historia desde el primer navegador hasta el navegador como la actual no porque el documental ya tiene unos años pero si podéis tener un contexto de todo lo que ocurrió desde que se creó el primer navegador hasta que chrome se lanzó así que con esta pequeña introducción y resumen de la historia de html en el siguiente vídeo vamos a empezar con la sintaxis de html y que podáis entender cómo se escribe html y qué es una etiqueta que ya hemos hablado de ello en vídeos anteriores pero vamos a ver exactamente a qué se refiere el término etiqueta así que en el siguiente vídeo empezamos a escribir código ah [Música] en este vídeo vamos a empezar a ver cómo se escribe html y cuál es su sintaxis si abrimos visual studio code lo primero que nos encontramos es que no tenemos abierta ninguna carpeta vamos a crear una carpeta en el escritorio para guardar nuestro cursor entonces botón derecho nueva carpeta y vamos a poner curso html 2020 y yo lo he escrito con esta forma con guiones y sin espacios y tal porque es importante que todo el tema de espacios mayúsculas y todo eso intentéis evitarlo siempre que podáis cuando hagáis carpetas para desarrollo intentad no poner ningún espacio ni ninguna mayúscula ni nada de eso sustituir los espacios por guiones o barras baja y no pongáis mayúsculas porque las mayúsculas suelen dar problemas cuando trabajamos en un entorno real así que intentamos poner la misma sintaxis que yo así curso guión html guión 2020 vamos a esta carpeta y la vamos a arrastrar dentro de visual studio code ahora mismo ya tenemos la carpeta abierta y nos aparece esta ventana de bienvenido que podemos cerrar sin ningún tipo de problema y vamos a crear nuestro primer documento html teneis varias opciones para hacerlo podéis hacer botón derecho en este punto de aquí y hacer clic en nuevo archivo y aquí se os creará esto lo normal para un documento html es que sea index.hr ml este es un camino que tenéis para crear el documento también podéis hacer clic en este icono de aquí que sería nuevo archivo y el resultado sería el mismo o podéis ir a archivo nuevo archivo aquí se os crearía esto y después tendréis que guardarlo o tenéis la opción de hacer control más n y conseguiría es exactamente lo mismo que si hacéis clic en nuevo archivo tenéis esas cuatro formas de crear un archivo y lo más normal es que hagáis aquí botón derecho o que hagáis clic en este icono esas son las dos que que más suele utilizar yo pero vosotros podéis elegir la que queráis voy a hacer aquí un poquito de zoom con control más para que podáis ver esto correctamente y vamos a crear una etiqueta html la sintaxis sería con este símbolo de menor que el nombre de la etiqueta y al cerrar como veis aquí esto se auto completa esto es por el plugin que hemos instalado de auto close tag que se encarga de una vez que cerramos el mayor que para para encerrar el nombre de la etiqueta pues automáticamente nos crea su etiqueta de cierre esto es importante que veáis cuál es la sintaxis esto sería lo que se denomina etiqueta de apertura que sería con el menor que el nombre de la etiqueta y el mayor que y esto de aquí abajo es lo que se denomina cierre de la etiqueta que es exactamente igual pero con esta barra que tenéis en el 7 con mayúsculas 7 tendríais el cierre de la etiqueta y entre medias de las dos es donde iría nuestro contenido aquí podríamos escribir contenido de la etiqueta [Aplausos] existen varios tipos de etiquetas y cada una representa un contenido en particular a lo largo del curso vamos a ver qué tipos de etiqueta cse si existen y para qué sirve cada una pero eso es lo más importante que tenéis que saber no todas las etiquetas sirven para poner el mismo tipo de contenido es cierto que si lo ponéis en el navegador lo vais a ver correctamente pero como ya os he mencionado al principio del curso el objetivo de html es crear las etiquetas correctas con el tipo de contenido correcto para informar a los navegadores y a los motores de búsqueda de cómo está estructurado vuestro documento entonces es muy importante que elijáis las etiquetas correctas en función del contenido que queréis poner así que en el siguiente vídeo vamos a empezar a ver las primeras etiquetas y cuál es la estructura de un documento html [Música] en este vídeo os voy a explicar cuál es la estructura de un documento html y también vamos a ver qué son los comentarios en html y para qué sirven teniendo nuestro documento abierto podemos en visual de estudio code podemos pulsar mayúsculas 1 para poner una admiración hacia abajo y si hacéis intro se os creará esta estructura que es la estructura base de un documento html aquí hay cosas que os pueden confundir como estas dos etiquetas de aquí así que las vamos a borrar de momento y vamos a ver qué es lo que tenemos y entender qué significa cada una de las cosas la primera etiqueta que nos encontramos es docta en html esta etiqueta lo que hace es definir que estándar de documento estamos siguiendo admiración doc type html representa que estamos siguiendo el estándar html5 así que vamos a ponernos al principio vamos a hacer un intro y vamos a escribir un comentario para para que nos ayude a entender cómo funcionan los comentarios y para qué sirven la sintaxis de un comentario es el menor que admiración guión guión y aquí como veis se me ha creado esto que sería el cierre del comentario todo lo que escribamos aquí es simplemente informativo para saber qué está pasando con este documento o qué significa lo que tenemos vamos a poner aquí establece el tipo de estándar del documento en este caso es html 5 vamos a hacer aquí un intro y después tenemos html blanco en esto de aquí lo de la pnc en significa que estamos estableciendo que el documento está en inglés vamos a ponerlo en español que sería lo que estamos haciendo nosotros y esto de aquí también representa lo que se conoce como atributo que es algo que veremos más adelante en el curso y profundizaremos en qué es un atributo y para qué sirven pero en este caso concreto este atributo lo que está representando es que la página está en español así que vamos a poner aquí un comentario que lo podéis hacer igual que antes o podéis utilizar un atajo de teclado que lo tenemos en archivo preferencias métodos abreviados de teclado aquí podéis consultar todos los atajos que queráis vamos a poner comentario [Aplausos] y el comentario que yo o sea el atajo que suelo utilizar yo es este alternar comentario de línea que es control y la cee con cedilla así que vamos a venir aquí y hacemos control y la hace con cedilla y nos aparece esto directo para escribir te vamos a poner aquí inicio del documento html como la etiqueta es html si nos ponemos encima nos pone el html el elemento html representa la raíz de nuestro documento html es decir que en este punto representamos el inicio del documento y como veis llega hasta el final que es donde se cierra la etiqueta después de eso tenemos el jefe el jefe lo que representa es una colección de datos o de metadatos para ser más correctos del documento estos son datos que nosotros le vamos a pasar al navegador para que interprete nuestra página web esto no tiene una representación visual pero el navegador lo entiende más adelante ya veremos qué tipos de metadatos hay y qué le podemos decir al navegador qué tipo de información le podemos pasar al navegador sobre nuestra página y aquí tenemos la etiqueta title que esto representaría lo que vemos en la pestaña cuando abrimos la página web de momento lo voy a dejar el document para que en el siguiente vídeo veáis cómo se ve aquí vamos a hacer otro comentario para eso y vamos a poner datos que le pasamos al navegador con información de nuestra la página web y por último tenemos la etiqueta body la etiqueta body representa todo el contenido de nuestra web esta parte si es visible y lo que escribamos aquí dentro si lo vamos a poder ver en nuestro navegador así que aquí arriba vamos a poner otro comentario que sea y representa todo todo mejor dicho todo el contenido de nuestra página web y como veis tanto juez como title como body tienen su correspondiente etiqueta de cierre en el siguiente vídeo vamos a ver cómo ver esta página web con algo escrito en el body y vamos a ver también cuál es la forma correcta de visualizar un sitio web porque la forma común que se suele ver no es la correcta así que en este vídeo lo que hemos visto es cómo escribir comentarios y hemos visto la estructura de un sitio web completamente básico ah [Música] ahora que ya hemos visto cómo estructurar el documento html y cuáles son las etiquetas básicas que necesita vamos a ver como visualizar todo lo que escribamos aquí en nuestro navegador aquí en el body de momento vamos a poner body de nuestra página web guardamos con control ese o en archivo guardar son las dos opciones y ahora el comportamiento normal de la gente que he visto por el otro curso que grabé anteriormente es venir a la carpeta esta de aquí y visualizar el index html de esta forma esto es una forma de verlo pero no es la forma correcta si os fijáis aquí arriba pone archivo eso significa que no estamos viendo nuestra página web desde un servidor que sería lo ideal para que todo funcionara correctamente si nosotros lo vemos así hay muchas cosas que no van a funcionar y que vamos a tener conflictos a la hora de visualizar nuestro sitio web vamos a volver a visual studio code y en nuestro panel de extensión es donde está la tienda vamos a buscar live server aquí como veis pone que lanza un servidor local de desarrollo vamos a darle instalar y ahora os explico lo que es un servidor local de desarrollo a ver si termina instalando debería tardar poquito vale ya lo tenemos y aquí abajo nos ha aparecido go live o podemos hacer botón derecho open with life server vamos a darle aquí y como veis se ha abierto esta parte es exactamente lo mismo que esto bueno esto tiene más zoom pero pero bueno eso es irrelevante completamente voy a cerrar aquí y la principal diferencia entre estos dos documentos es que en este pone archivo pero en este no eso es porque lo estamos ejecutando en un servidor de desarrollo y las páginas web están pensadas para ejecutarse desde un servidor y tener un servidor de desarrollo local implica que estamos trabajando con nuestra página como si estuviera en un servidor real técnicamente estamos utilizando un servidor real pero no es un servidor como como sería el de una página web que tenemos ya subida a internet para poder trabajar con ella entonces una de las opciones por las que os pedía que usara jce visual studio code es esta trabajar con un servidor de desarrollo en visual studio code como veis es muy muy sencillo el hecho de que abráis la página con un archivo va a implicar que muchas cosas os fallen así que siempre que estemos desarrollando debemos trabajar en un servidor de desarrollo como es el caso de life server si estáis utilizando un editor de código que no sea visual studio code buscad la forma de crear un servidor de desarrollo para trabajar porque si no es posible que algunas de las cosas que hagamos nos funcionen correctamente a parte de la ventaja de poder trabajar como si estuviéramos en un servidor life server nos permite tener recarga instantánea de los cambios vamos a ocultar esta barra de aquí con control b y aquí voy a poner body de nuestra página web en un servidor local voy a darle a control ese para guardar y como veis aquí automáticamente aparecen los cambios y sin embargo aquí esto sigue igual tendríamos que recargar para que volviera a leer el archivo y poder ver esto hay más cosas que fallaran que ya hablaremos de ella en un futuro cuando cuando estemos trabajando con enlaces y cosas así porque hay cosas que no van a funcionar correctamente así que os lo recordaré por si en ese momento a vosotros os falla y no sabéis por qué así que ahora que hemos visto cuál es la forma correcta de trabajar con un documento web en el siguiente vídeo vamos a empezar a hablar de las primeras etiquetas que vamos a utilizar además antes de que se me olvide quería comentaros lo de la etiqueta title que tenemos aquí es lo que aparece aquí arriba donde pone document y aquí pusiéramos mi primera página web y guardamos como veis aquí ya se ha cambiado y pone mi primera página web si aquí recargamos también va a aparecer mi primera página web pero como veis tenemos el mismo problema que tenemos aquí esto es por un tema de codificación los acentos pertenecen a una codificación latina que por defecto los navegadores no lo entienden salvo que se lo digamos explícitamente para ello en el head que es el punto donde le pasamos los datos importantes para el navegador vamos a poner meta y aquí ya tenemos un poco de ayuda vamos a poner meta charset aquí dentro planeta charset que sería el conjunto de caracteres y el que necesitamos es usted efe guión 8 guardamos y si ahora recargamos pues como veis esto ya se visualiza correctamente porque le estamos diciendo que estamos utilizando el set de caracteres latino entonces esta sería la forma de solucionar el problema de que esto se vea mal como veis en un servidor eso no pasa pero eso es porque el servidor de desarrollo ya está configurado con ciertas cosas si en algún momento os pasa eso con los acentos o con algún carácter extraño que sepáis que la forma de solucionarlo es con el metal charset f8 una vez visto esto ahora si en el siguiente vídeo vamos a empezar a trabajar con las primeras etiquetas de html ah [Música] en este vídeo vamos a hablar sobre los encabezados en html me voy a guiar por la m de n aunque también tenéis el link a la w3c pero la m de n es bastante más humana y está escrita de una forma mucho más entendible los elementos de encabezado implementan seis niveles de encabezado del documento van desde el h1 a starace 6 aquí tenéis unas notas de uso porque a día de hoy los encabezados tienen una representación semántica es decir que un encabezado a h1 significa una cosa y un encabezado h6 significa otra la representación visual que tienen es de más o menos tamaño de hecho si bajamos por aquí podemos ver cuál es el resultado de 11 12 13 14 15 y 16 vamos a ir a nuestro código para crear un pequeño ejemplo similar al que viene aquí con harry potter para que veáis cuál es la estructura que se debe seguir a la hora de funcionar con encabezados vamos a poner esto por aquí y vamos a crear un documento nuevo que sea títulos no no lo voy a poner con guiones títulos y párrafos e párrafos un poco html os lo pongo en español por si hay alguno que no sepa inglés pero no es recomendable utilizar nombres en español lo correcto sería poner aquí he links graves punto html esto sería lo correcto pero para que todos podáis entender lo que estamos haciendo ya que corresponde de forma didáctica lo voy a poner en castellano pero que sepáis que la forma correcta de ponerlo sería en inglés vale entonces esto lo voy a cerrar y lo voy a eliminar y aquí vamos a crear una pequeña estructura html poniendo la admiración y pulsando tabulador y aquí donde pone document vamos a poner títulos y párrafos guardamos y aquí en el body vamos a crear la estructura que tenemos en el ejemplo de la m de m vamos a poner un h lo que lo podéis escribir así tal cual y si pulsáis tabulador o intro pues la etiqueta se os va autocompletar aquí vamos a poner harry potter y a continuación de esto tendríamos un h 2 h 1 representaría el título principal de lo que estamos hablando que en este caso es harry potter y el h 2 representaría el comienzo de una sección dentro de harry potter entonces aquí vamos a poner sinopsis dentro de sinopsis tendríamos que poner pues la sinopsis de que va harry potter entonces esa parte iría dentro de una etiqueta p que sería un párrafo aquí lo que voy a hacer es rellenar con texto contexto de relleno vamos a escribir aquí loren y si pulsáis intro pues como veis se os genera un texto que simplemente sirve para rellenar para que no os ocurra esto y tengáis que hacer scroll para ver lo que estáis escribiendo vamos a venir archivo preferencias configuración y aquí vamos a escribir wrap y en este punto de aquí en editor worldgroup vamos a poner con ya lo podemos cerrar y como veis ahora lo que ha pasado es que ha roto el texto para que no para que no tengamos que hacer scroll vamos a guardar aquí voy a cerrar esto y voy a pulsar go live para que veáis el resultado en tiempo real como veis ya tenemos aquí nuestro título el subtítulo de la sección y nuestro texto vamos a seguir escribiendo el resto y tendríamos otro h2 que pondría novelas y en este punto de aquí tendríamos exactamente lo mismo podríamos poner un p con una sinopsis guardamos y aquí tendríamos la segunda parte si os dais cuenta esto es el título principal y estos dos digamos que tienen el mismo peso o el mismo significado porque son dos secciones principales dentro de la sección general entonces por eso ponemos un h 2 después ya tenemos el h3 que pertenecería a secciones dentro de novelas entonces vamos a poner aquí h3 y voy a copiar esto si me permitís para no escribir todo y dentro de este punto pues vamos a poner otro pe con el texto de relleno guardamos venimos aquí y como veis este es un poquito más pequeño pero esto es solo representación visual en el en el momento que toque hablar de css en su curso aparte ya hablaremos sobre cómo hacer que esto sea bonito pero en principio quedaos con la semántica de lo que significa como esto es un h 3 estamos representando que es parte de él h 2 que tenemos por encima que sería novelas y así podríamos continuar con todo el contenido que tenemos aquí pero lo principal que quiero que veáis es esto que un h 3 debe pertenecer a un contenido que tenga un h 2 al igual que un h 2 debe pertenecer a un contenido que tenga un h 1 y hacia abajo funciona exactamente igual si dentro de harry potter y la piedra filosofal quisiéramos incluir algún detalle o por ejemplo aquí podríamos poner a cuatro personajes o actores pues esto sería algo que pertenece a harry potter y la piedra filosofal no es una una novela aparte sino dentro de éste h3 hacemos un inciso para crear otro tipo de contenido o de párrafo que incluya esto y aquí podríamos poner un pie con un lord en esto es la estructura máxima más sencilla que existe evidentemente se pueden hacer estructuras mucho más complejas pero como es el primer vídeo quiero que veáis la base de cómo construir un encabezado con un texto entonces esto iría así en el caso de que dentro de personajes quisierais hacer algo pues podríais un h5 y después de del h5 y h6 eso es lo más importante que tenéis que recordar no utilizar un número superior si no os tenéis por encima un encabezado inferior [Música] hasta ahora hemos visto cómo construir párrafos y ponerles un título pero en una página web real necesitamos estructurar el contenido de una forma que tenga muchísimo más sentido para los navegadores para ello tenemos lo que se denominan etiquetas de sección de contenido así que vamos a crear un nuevo archivo y lo vamos a llamar sección de contenido punto html y lo que voy a hacer es copiar todo esto así que voy a hacer control a o podéis ir a selección seleccionar todo son las dos opciones y después podemos hacer botón derecho copiar o control ce y aquí en sección de contenido control uve o botón derecho pegar lo que os resulte más cómodo guardamos y ahora mismo en estos dos archivos tenemos exactamente lo mismo voy a cerrar esto para que no estorbe y nos confunda y lo que vamos a hacer es estructurar este contenido con las etiquetas de sección de contenido voy a abrir aquí un comentario para poneros las etiquetas que tendríamos heather que también hay que cerrarla voy a poner en minúscula para que no os confundáis y penséis que hay que ponerla en mayúscula tenemos que ver que sería la cabecera de nuestra página después tenemos el main que sería el contenido principal de la página y después tenemos el footer que sería el pie de página entonces vamos a utilizarlas y a colocarlas vamos a poner aquí header y en este punto lo que tendríamos que poner es nuestro menú de navegación el logotipo de la página o ese tipo de cosas así que aquí simplemente os voy a poner un comentario con lo que debería ir en ese punto tendríamos menú de navegación [Música] la relación luego en redes sociales a lo mejor si queréis poner después tendríamos la etiqueta main que la etiqueta main como su propio nombre indica es el contenido principal de la página entonces eso es este punto de aquí control x para cortar y control v para pegar y aquí ya tendríamos dentro del main del contenido principal de la página todo nuestro contenido y por último tendríamos la etiqueta footer y aquí dentro es donde pondríamos el pie de página por ejemplo podemos poner aquí curso a html 2020 2021 guardamos voy a abrir esto de aquí esto es de hab recargamos y algo está pasando vale que estoy abriendo el index html lo que quiero abrir es sección de contenido punto html y como veis en este punto de aquí tendríamos el footer todo esto de aquí sería el contenido principal de la página y por encima tenemos el header vamos a poner algo en el header como por ejemplo las secciones que vaya a tener nuestra página las diferentes páginas que vayamos a hacer y vamos a poner por ejemplo inicio vamos a poner también novelas vamos a poner películas y contacto por ejemplo con tacto vamos a echar un vistazo y como veis aquí tendríamos lo que sería nuestro menú de navegación esto evidentemente no es la mejor forma de hacerlo hay otras formas mucho mejores de hacerlo pero para que veáis el aspecto que tiene pues yo creo que os sirve de todas formas según vayamos avanzando en el curso vamos a construir esto de una forma muchísimo mejor y con más significado pero ahora que hemos visto que tenemos una etiqueta de encabezado para la parte de encabezado una parte de maine para el contenido principal y una etiqueta de footer para el pie de nuestra página en el siguiente vídeo vamos a ver más etiquetas de estructuración de contenido así que nos vemos en el siguiente [Música] en este vídeo vamos a hablar sobre otras tres etiquetas de sección de contenido y vamos a resolver una de las mayores dudas que ha existido en el otro curso de html estas tres etiquetas son sección article y a saiz y para los que habéis visto el otro curso el debate es sobre si el section contiene los artículos o sobre si los artículos contienen los sección la respuesta es que ambas opciones son son válidas os voy a dar la definición de las tres etiquetas y después haremos algunos ejemplos tanto con sección conteniendo articles como con artículos conteniendo sección para que así podéis ver en qué casos y utilizar sección como contenedor general y el cual utilizará article como contenedor general section es un contenedor genérico que agrupa contenido que está relacionado es decir cuando creamos bloques cuyo contenido es parte de un bloque total lo semánticamente correcto es utilizar un section el arctic con por su lado es un contenedor que representa contenido independiente es decir que si nosotros leemos ese fragmento que está dentro de un artículo daría igual que no hayamos leído el resto de la página porque eso por sí mismo tendría sentido y después tenemos el a6 que se utiliza para representar contenido relacionado pero que no forma parte del contenido principal por ejemplo si tenemos una página en la que estamos hablando de lenguajes de programación un contenido relacionado podría ser mira mis cursos en youtube forma parte porque también estoy hablando de lenguajes de programación y de lo que estemos hablando en la web pero no forma parte directa de lo que estoy hablando no estoy hablando de un lenguaje en concreto simplemente te estoy diciendo que puedes ir a ver esos lenguajes en mi curso entonces en ese caso utilizaríamos una etiqueta a saiz aquí os he puesto dos ejemplos tanto un sección conteniendo articles como un artículo conteniendo seccións entonces aquí he pensado en hacer un ejemplo sobre etiquetas html pero me dado cuenta de que a lo mejor lo entendéis mejor si hago un ejemplo con noticias como si fuera un periódico así que en el siguiente vídeo vamos a ver el ejemplo de un section conteniendo articles [Música] en este vídeo vamos a ver el ejemplo del que os hablaba en el vídeo anterior de un sección que contiene distintos artículos y he pensado hacerlo con noticias entonces vamos a ir al body y aquí vamos a poner un sección y dentro podríamos poner un h 2 que fueran noticias principales noticias del día sí para que veáis la semántica completa aquí tendríamos un género con un h1 que podría ser noticias nacionales por ejemplo y después podríamos tener aquí la etiqueta main esto pulsando alt lo podéis mover hacia abajo o hacia arriba si dejáis expulsado al podéis mover esto con las flechas y después tendríamos un footer con lo que se con la fecha de hoy que sería estamos aquí a 4 04/11/2010 eh entonces teniendo esta sección cada una de las noticias sería un artículo entonces aquí podríamos poner un artículo y aquí podríamos por ejemplo noticia 1 y ahora voy a esto copio noticia 2 y noticia 3 esta es la explicación sencilla pero esto semánticamente es incorrecto vale para que entendáis por qué es incorrecto y cómo detectar vosotros los fallos en vuestro html os voy a enseñar una página oficial que es válida héctor w 3 punto org y aquí lo que podemos hacer es pegar html para que nos diga si es válido o no entonces voy a seleccionar todo con controlar control c para copiar control v para pegar aquí dentro y le damos a check y aquí ya nos está marcando warnings nos dice que los artículos necesitan un header que no es capaz de identificar el header en los artículos es decir como los artículos son contenido independiente pueden tener su propio header y su propio footer por lo tanto aquí en este artículo vamos a acortar con control x esto de noticia 1 y le vamos a poner en este caso sería un h 3 porque ya tenemos un h 2 con noticias del día y este h 3 sí que podría ser nuestra noticia 1 y aquí un p con un laurent de relleno que sería la noticia en sí entonces vamos a hacer lo mismo con los otros dos h 3 noticia 2 1p y un loren y por último la noticia 3 cortamos h3 pegamos un p y un laurent controlar para seleccionar todo control ce para copiar venimos aquí seleccionamos desde aquí abajo hasta arriba borramos todo lo que hay y control v para pegar le damos a check y ahora como veis nos dice que el documento es completamente correcto que no hay ningún error ni ningún warning para mostrar entonces cuando vosotros escribáis algún tipo de código y no estéis seguros de qué semánticamente es correcto venidos a esta página pegáis el código y el validador ya os dirá si lo que habéis escrito es semánticamente correcto o deberíais utilizar algún tipo de etiqueta que no habéis puesto aquí por ejemplo en este artículo bueno en todos los artículos esto lo podíamos meter en un header porque esto es semánticamente correcto que esto tenga un header y después aquí podríamos tener un shooter que pusiera el sitio de la noticia por ejemplo la noticia 1 ocurrió yo que se madrid por ejemplo y una fecha o lo que quisiera es como como si fuera una noticia y eso lo podríamos hacer con la noticia 2 y con la noticia 3 pero voy a copiar esto simplemente para que veáis que esta opción es completamente correcta y que no da ningún tipo de fallo vamos a darle a check y como veis lo mismo el documento es perfectamente válido el tema del el header y el footer no es obligatorio pero como los artículos son contenido independiente se les permite tener esto un header con lo que necesitemos poner y un footer que explique que ponga como un pie de noticia en este caso o un pie de post si tuviéramos un por un blog con distintos post o cosas así entonces espero que con este ejemplo os haya quedado claro cómo funciona una sección con los artículos anidados y que sepáis que también podríamos tener un sección con más sección dentro es decir aquí en el main podríamos tener un h uno que pusiera sección como contenedor para que se quede marcado de que es el ejemplo y después aquí donde abrimos el section podríamos tener el h1 este como contenedor en lugar de que fuera el título principal del main y debajo de éste h1 tener un section vamos a el cierre y lo pondríamos al final del todo aquí guardamos y esto semánticamente también es válido porque sección lo que hace es agrupar contenido relacionado entonces en este caso todo lo que estamos agrupando son noticias por lo tanto es válido y en este caso todo lo que estamos agrupando son las noticias del día por lo tanto también es válido así que que sepáis que estas configuraciones son completamente válidas vamos a pegar esto por última vez aquí para que os fiéis de la w3c en lugar de fiarnos de mí vamos a pegar aquí le damos a check uy perdón a ver el h1 vale me está diciendo que tengo 2h unos y que no debería tener 2h unos entonces esto sería un h 2 esto sería un h 3 y a partir de aquí ya serían todos h4 aquí no me va a marcar error porque semánticamente sería correcto que estos también fueran h3 pero como son noticias anidadas éstos deberían ser h 4 entonces vamos a copiar esto pegamos borramos sec y ahora sí ahora es completamente válido entonces ya os digo que siempre que tengáis algún tipo de duda sobre si lo el código html que estáis viendo es correcto o no la forma correcta es esta hay una validación que no me está haciendo que el contenido está en castellano o en español pero esto lo tenemos en inglés entonces el validador no es capaz de detectar estas cosas pero que sepáis que si como lenguaje del html le estáis diciendo inglés y el contenido está en español eso sería una penalización por parte de deseo y de posicionamiento así que aseguramos de tener el lenguaje en el idioma que tengáis escrito la página en con esto visto vamos a pasar al siguiente vídeo donde vamos a hacer un ejemplo con los article encerrando sección ah [Música] en el último vídeo estuvimos viendo cómo crear un section que tenga la etiqueta article dentro en este vídeo vamos a ver la situación contraria un artículo que encierre sección en su interior os he comentado todo esto para que no estorbe y vamos a empezar justo aquí debajo vamos a poner un artículo para empezar que ya sabéis que esto representa contenido independiente y vamos a ponerle un título porque ya hemos visto en el vídeo anterior que los article necesitan un título y si no nos da un fallo aquí vamos a poner navegadores más utilizados en 2020 y aquí dentro este sería nuestro artículo principal donde donde vamos a encerrar todo el contenido independiente que hable sobre navegadores pero cada una de las noticias o cada una de las secciones mejor dicho que hable de un navegador ese sección lo que hará será dividir cada una de las partes entonces aquí vamos a poner un section y dentro vamos a ponerle un título que en este caso tendría que ser un h 3 y hablaremos sobre cron por ejemplo y aquí como no voy a poner nada de chrome pues ponemos un lorem ipsum después vamos a hablar de firefox por lo tanto esto sería otra sección divide el contenido pero sigue perteneciendo al mismo article que son navegadores más utilizados en 2020 entonces aquí un h3 para hablar de firefox y aquí vamos a poner otro lorem ipsum guardamos y como veis tenemos un article con su título y un section que también tiene un título y una descripción en este caso también podríamos crear un header y meter esto dentro y aquí debajo pues podríamos poner un footer y decirle que esto he creado por throne por ejemplo o sea por google perdón vamos a guardar voy a seleccionar todo voy a copiar vamos a venir aquí y voy a borrar todo esto control v y vamos a chequear a ver qué pasa como veis documento completamente chequeado y no hay errores ni warnings para mostrar entonces con estos demuestro que ambas opciones son completamente válidas y aprobadas por la w3c de hecho os animo a que paséis por este validador todos los códigos html que yo escriba en el curso y en el caso de que encontréis algún tipo de error o un warning que os muestre me lo hagáis saber en los comentarios o por dischord para modificar ese vídeo inmediatamente así que ahora que ya sabéis cómo comprobar si el html que estáis escribiendo es correcto vamos a pasar al siguiente vídeo dónde vamos a ver la etiqueta a saiz que como os he dicho al principio es una etiqueta muy sencilla de utilizar y que se entiende a la perfección ah [Música] ahora que ya ha quedado resuelta la batalla entre sí sección dentro de article o arte y con dentro de sección vamos a ver cómo utilizar una side que esto va a ser un vídeo muy cortito porque ya os digo que no hay mucha ciencia dentro para refrescar os digo que se utiliza para representar contenido indirectamente relacionado pero que no forma parte del contenido principal es decir nosotros tenemos una web donde hablamos de cursos de desarrollo web gratuitos y aquí pues podemos tener nuestras tarjetas con unos links que te lleven a los sitios donde están esos cursos un contenido relacionado pero que no forma parte del contenido principal podría ser esto visita a mi canal de youtube o podrías tener aquí una especie de menú con con links a cursos que no son gratuitos la página está hablando de cursos y esto sería un contenido indirectamente relacionado habla de lo mismo pero no es parte del principal en cuestiones de semántica y donde colocarlo tanto la w3c como la m de n no tiene ningún problema en que esto esté fuera del main o dentro del main en cualquiera de los dos sitios el validador os va a decir que está todo ok y que no hay ningún problema yo personalmente dada la definición de a saiz y teniendo en cuenta que es un contenido relacionado pero que no forma parte del contenido principal normalmente lo dejó fuera entonces eso ya esa opinión vuestra si en algunos casos nos viene mejor ponerlo dentro que sepáis que no hay ningún problema pero que sepáis que yo personalmente prefiero ponerlo fuera por la propia definición de la etiqueta si no forma parte del contenido principal no veo ningún sentido en meterlo dentro del mail pero eso ya es a vuestra discreción así que con este vídeo terminamos estos elementos de sección y en el siguiente os voy a hablar sobre la diferencia entre elementos de bloque y elementos de línea [Música] en este vídeo os quiero dar un poquito de teoría sobre lo que es un elemento de bloque todo lo que hemos visto hasta ahora se denominan elementos de bloque y esos elementos se denominan así porque van a ocupar todo el ancho disponible aunque su contenido no lo ocupe es decir si nosotros esto lo hacemos más grande el h1 termina aquí pero el párrafo voy a quitar esto de aquí para que lo podáis ver con control b como veis tenemos una 1 y después un p pero el pelo se coloca al lado de la h1 eso es porque es un elemento de bloque una buena forma de comprobarlo es hacer botón derecho le dais a inspeccionar y aquí se os abrirá la consola en el caso de que se os abra en otro sitio que lo más normal es que se os abra en este punto si le dais a estas tres rayitas y pulsáis aquí podréis separar esto en una ventana independiente a la izquierda del todo tenemos este icono con una flechita y si hacéis clic y os sitúa encima del elemento como veis se os pinta todo el espacio que está ocupando con el párrafo pasa exactamente lo mismo que está ocupando todo el espacio sin embargo hay otro tipo de elementos que son los que vamos a ver en la siguiente sección os voy a hacer un pequeño spoiler vamos a poner aquí span y aquí dentro voy a poner soy un elemento de línea existen otros elementos que si los seleccionamos como veis solo ocupan el espacio que ocupa su contenido si yo pusiera después de esto otro exactamente igual y pusieras hoy otro elemento de línea y guardo como veis se coloca a su lado entonces es muy importante que sepáis distinguir entre elementos de bloque y elementos de línea y de primeras puede que os suene un poco confuso pero tranquilos porque con el tiempo esto es algo que se automatiza completamente y sabéis distinguir con el tiempo perfectamente cuál es un elemento de bloque y cuál es un elemento de línea y es algo que ni siquiera tenéis que pensar que ya os sale de forma automática así que en el siguiente vídeo os voy a dejar un ejercicio de repaso y terminaríamos la sección de los elementos de bloque existen más pero de momento con esto yo creo que es suficiente para esta sección así que nos vemos en el siguiente vídeo [Música] este es el primer ejercicio que os planteo y como veréis lo he modificado un poquito para que no tengáis ningún tipo de pista todo el texto que está escrito en la página lo vais a tener en un documento txt disponible para descargar y el objetivo es que con lo que hemos visto en los vídeos anteriores iba a decir las secciones con todo eso que hemos visto construya jce de una forma semánticamente correcta el contenido de esta página me podéis mandar las soluciones a través de un mensaje privado a dischord y las incluir en el curso las más relevantes para que veáis distintas soluciones válidas a este mismo ejercicio así que sin nada más que añadir pasamos a la siguiente sección que son los elementos de línea ah [Música] en este vídeo quiero hablaros sobre los elementos de línea ya que en la sección anterior hablamos sobre los elementos de bloque aquí os he puesto los elementos de línea de los que vamos a hablar en este vídeo pero no son los únicos elementos de línea solo que quiero ir daros el contenido lo más fragmentado posible para que no se explote la cabeza y he creado un nuevo documento html elementos de línea y vamos a ir viendo cada uno de estos elementos y vamos a ver también en qué situaciones se utilizan el primero sería la etiqueta en que lo que hace es representar énfasis voy a utilizar el ejemplo que nos da la m de n que sería un p y dentro pone el dinero es importante pero la salud es lo más importante hay importante y la etiqueta en la este la está utilizando en el punto de el dinero entonces aquí ponemos en cogemos el cierre de la etiqueta y lo ponemos aquí guardamos y como veis la palabra o las palabras el dinero están apareciendo en curso en cursiva esto no significa que con la etiqueta m pongamos este texto en cursiva para eso tenemos css entonces con esto le estamos diciendo al navegador que esto de aquí tiene más importancia que el resto del texto si ordenamos este contenido con números digamos que es importante pero la salud es lo más importante esto tendría un valor de 0 y esto de el dinero tendría un valor de 1 después tenemos la etiqueta strong que sirve para dar más énfasis a un entonces en este punto de aquí vamos a poner strong cerramos la etiqueta y vamos a cortarlo de aquí con control x y lo vamos a poner en aquí aquí me he comido la la salud pegamos guardamos y como veis esto se pone en negrita pero una vez más esto nos sirve para darle negrita al texto sirve para que el navegador entienda que si esto vale 1 esto de aquí valdría 2 digamos que de toda la frase lo que está en la etiqueta strong es lo más importante de la frase después vendría lo que esté en la etiqueta en y por último lo que no esté encerrado en ninguna etiqueta eso es lo que el navegador entiende después tenemos la etiqueta small que sirve precisamente para lo contrario si yo después de esto pusiera por ejemplo saludos y lo encerraran en una etiqueta small a ver que aquí se me está rompiendo es muy y cierro la etiqueta como veis yo no quería poner small quería poner saludos y saludos como veis este texto es un poquito más pequeño que el resto con esto le estamos diciendo al navegador que esta parte en concreto tiene mucha menos relevancia para el texto que el resto del texto si el resto valía 0 pues en este caso digamos que esto podría valer menos 1 entonces siempre que a una frase le queráis dar alguna palabra que tenga menos relevancia lo tenéis que meter dentro de la etiqueta small la siguiente etiqueta de la que os quiero hablar es ver esto visual estudio court tiene un pequeño problema que he descubierto ahora mismo grabando el curso pero de momento vamos a explicar lo que es ver y después os cuento la solución al problema si nosotros tenemos un texto vamos a poner un honor en para tener un texto de relleno voy a guardar como veis aquí el texto se va a romper en función del espacio que tenga disponible vale si tiene más espacio pues entrarán más líneas y si tiene menos espacio pues entrarán menos pero es posible que en algún texto vosotros necesitéis que el texto se rompa en un punto concreto supongamos que aquí yo necesito que salte de línea pues para eso tenemos la etiqueta br y como veis da igual que haya espacio disponible porque el navegador va a forzar un salto de línea en este punto cuál es el problema que os quería comentar si hacéis botón derecho y bueno vosotros esto no lo tenéis que hacer en concreto porque yo ya lo he hecho para hacer las pruebas pero si venimos a dar formato al documento con y como formateado predeterminado dejamos pre tierra y guardamos como veis me está añadiendo esta barra esto técnicamente no es una mala práctica y es completamente válido para la w3c pero en todos los sitios tanto en mdm como en la w3c esta etiqueta siempre viene sin la barra que venga con la barra es algo que se hacía en documentos xhtml que sería la versión anterior a html5 ya os digo que esto no es un fallo ni una mala práctica ni nada pero si queréis respetar el vr sin esta barra como está en la especificación html5 pues lo que tenéis que hacer es hacer botón derecho dar formato al documento con y en lugar de elegir premier le dais a configurar el formateado predeterminado y elegís características del lenguaje html si ahora guardamos bueno aquí esto no lo sustituye porque no lo considera un error pero si quitamos la barra y guardamos ya no nos la pone entonces una vez visto esto en qué casos se suele utilizar el br si nosotros estamos estableciendo una dirección por ejemplo que los saltos de línea si son relevantes o un poema o algún tipo de texto en el que el salto de línea sí que tenga relevancia y sea importante que haya un salto de línea ahí y no en otro sitio pues para eso utilizamos la etiqueta br algo que he visto hacer en bastantes sitios por desgracia y que no debéis hacer nunca es utilizar esto br br br utilizar esto para dar separación entre dos elementos vale esto es algo estético y como es estético de esto se encarga css hacer esto es una de las peores prácticas que podéis tener a la hora de trabajar con html así que no lo hagáis jamás vamos a quitar esto y vamos a pasar a la siguiente es v w que sería el word breaking opportunity esto es un salto de línea sea el navegador le hiciera falta hacerlo es decir si nosotros tenemos un texto largo y menos a un texto perdón una palabra larga y necesitamos cortarla en el caso de que no quepa pues para eso tenemos esa etiqueta es cierto que tener una palabra lo suficientemente larga como para que no que para el navegador de primeras pues no se te ocurre ninguna pero qué pasaría si en lugar de una palabra fuera una url si nosotros tenemos esto así es posible que el curso donde no tengamos guardado está estructurado de otra forma plan cursos html barra elementos elementos de línea pues como veis en este caso ya está forzando un salto de línea porque no cabe el texto y esto sí que es algo completamente válido esta situación si se puede dar entonces si nosotros quisiéramos que esto cortará en puntos concretos como por ejemplo después de cada barra pues tendríamos que usar la etiqueta wbr entonces vamos a ponerlo justo después de la barra por ejemplo esto ya os digo que es lo que se me ha ocurrido pero qué si lo ponéis en otro sitio también sería válido vamos a ponerlo justo después de cada barra y vais a ver una cosa muy curiosa aquí está rompiendo donde yo he dicho pero si tuviera un poco más de sitio aunque yo he dicho que aquí rompa en este punto de aquí como veis el aquí también está rompiendo eso es porque los guiones los navegadores lo interpretan como si fuera una etiqueta wv r si tenéis guiones os pasa esto pero si lo tuvieras con guiones bajos o con cualquier otra forma de separación el navegador si entiende que forma parte de la misma palabra y según esto no va entrando como veis no salta un trozo salta el contenido completo yo normalmente utilizó millones salvo que en un caso concreto pues no me vengan bien los guiones pero que sepáis que esto sucede el hecho de que se rompa a la mitad incluso teniendo un wv r es porque esto de aquí tener iones si no tuvieran iones ya habéis visto que rompe completamente la palabra completa o la ruta completa en este caso ah [Música] después tenemos la etiqueta time esta etiqueta es muy claro para qué se utiliza se utiliza para representar un contenido de fecha y hora en qué casos puede ser relevante que tengamos una fecha y hora pues el ejemplo más claro que se me ocurre es cuando tenemos un blog o un post en el que se ha publicado en cierto día oa cierta hora y si es relevante que sea ese día y esa hora y no otra cualquiera entonces en ese caso si pondríamos aquí una fecha vamos a poner 24/10/2011 que es hoy a las 1035 como veis esto aparece como si lo tuviéramos dentro de cualquier otra etiqueta pero el navegador está entendiendo que esto de aquí está representando una fecha y por lo tanto le dará la importancia semántica que debería tener una fecha o una hora no es necesario que siempre esté fecha y hora o sea esto sería completamente válido si sólo tuviéramos la hora y también sería completamente válido si sólo tuviéramos la fecha yo os lo he puesto completo pero que sepáis que no tiene por qué ser completo siempre que a lo mejor sólo os hace falta a la hora o sólo os hace falta el día y es también sería válido y por último tenemos estas tres etiquetas que contradicen todo lo que os llevo diciendo todo el curso estas tres etiquetas se utilizan para dar estilo sé que suena curioso cuando os llevo repitiendo 10 millones de veces que html no es para estilo y que para eso está css pero estas etiquetas en concreto si sirven para dar estilo y solo sirven para eso si nosotros tenemos un p y aquí pongo la etiqueta y pongo el itálico qué sería lo mismo que cursiva pongo mi y pongo bolt que sería lo mismo que negrita y pongo y aquí pongo under scott and air line pues guardamos y como veis tenemos estilo dentro de html estas etiquetas aparecieron prácticamente al principio de html y se siguen manteniendo es posible que en algún momento desaparezcan pero esto seguiría siendo válido para la especificación y para la w3c de todas formas tanto la negrita como el under line se hace con css porque es es más cómodo hacerlo con css y no manchar el código con estas etiquetas solo para esto en el caso de ita liq no se suele utilizar la etiqueta y para hacer cursiva también se suele hacer desde el css pero hay un caso en el que la etiqueta y si va a ser importante y es cuando estamos trabajando con librerías de iconos eso es algo que seguramente no veamos en este curso pero cuando llevéis tiempo trabajando y necesitéis iconos es muy probable que esos iconos representados dentro de una etiqueta y para que veáis un ejemplo vamos a ir a font o son qué es una de las librerías de iconos más famosas que hay y si miramos iconos pues elegimos este por ejemplo que es el primero que sale y como veis esto está dentro de una etiqueta y lleva una clase que es la que representa el icono y tiene la etiqueta de cierre de y entonces ya os digo que el único uso que seguramente le deis a la etiqueta ahí sea la de poner iconos nada más y para terminar voy a añadir aquí dos etiquetas más que sería super índice y surf que sería su índice estas etiquetas es cierto que seguramente no las utilizamos mucho pero si os hace falta que sepáis cómo se utiliza índice me cuesta muchísimo hablar y escribir a la vez vamos a poner aquí un p diga por ejemplo 4 y 4 elevado al cuadrado se representa así y nosotros pondríamos algo así pero claro 4 elevado al cuadrado este 2 debería ser más pequeño y estar colocado al lado del 4 entonces para eso tenemos la etiqueta sub que sería el super índice entonces vamos a poner aquí el 2 lo quitamos de aquí y voy a quitar este espacio y como veis ahora 4 elevado al cuadrado se representa así y esto sí es algo que se suele ver cuando hablamos de fórmulas matemáticas y después también tenemos la etiqueta sur que sería precisamente para lo contrario cuando estamos escribiendo algún texto de química o algo así pues los subíndices si son importantes podemos poner por ejemplo y agua oxigenada tiene la fórmula ante 2 o dos esta es con mayúscula y entonces si guardamos puedes verlo así lo entendemos pero no es la forma habitual de como debería estar escrito entonces vamos a poner aquí la etiqueta sub y vamos a poner aquí el 2 y aquí exactamente igual y tenemos y aquí cerramos y de esta forma si es más común verlo y con esta última etiqueta voy a cerrar la sección de los elementos de línea y vamos a pasar a la siguiente que serían los atributos así que nos vemos en la siguiente sección ah [Música] en esta sección vamos a ver lo que son los atributos en html porque es algo que ya hemos utilizado pero lo quería darnos demasiada información de golpe así que vamos a ver lo que son los atributos son valores adicionales que configuran los elementos y ajustan su comportamiento en términos generales tenemos dos tipos de atributos los atributos comunes que son los que ya hemos visto en algunas ocasiones y la sintaxis sería el nombre del atributo igual al valor que le damos a ese atributo entre comillas y después tenemos los atributos muy lejanos que todavía no hemos visto ninguno y que su sintaxis es simplemente el nombre del atributo esto sucede porque en html hay ciertos atributos no hay muchos pero sí es cierto que algunos sí que tienen esta peculiaridad que si existen se dan como verdaderos y si no existen serán como falsos por lo tanto no necesitan que les pongamos un valor es existe o no existe si existe funciona y si no existe pues no funciona es así de sencillo así que en el siguiente vídeo vamos a repasar algún código que hemos escrito y vamos a ver los atributos que hemos utilizado en ese código ah [Música] voy a utilizar el último documento html que hemos escrito porque si os dais cuenta el número de atributos es el mismo en todo lo que hemos escrito de momento así que vamos a fijarnos en el primer atributo que tenemos que como veis es la pnc igual comillas y el valor ya hemos visto en el vídeo anterior que los atributos son valores adicionales que nos ayudan a configurar los elementos o ajustar su comportamiento en este caso lo que estamos haciendo es configurar el documento html diciéndole que su idioma va a ser español si fuera en inglés pondríamos en si fuera en alemán pues pondríamos de y así con toda la lista de idiomas que existen aquí tenemos el meta charset efe 8 bueno luego tenemos este otro meta que de momento no os voy a hablar de él porque es muy pronto para explicaros en qué consiste el meta view por pero en este en concreto como veis tenemos una etiqueta meta y después como configuración tenemos char set si nos ponemos encima ya nos avisa visual studio code con esta pequeña descripción y nos dice que es un atributo que declara la codificación de caracteres de la página entonces en este caso es utc 8 que sería el valor entonces esta es la configuración normal de los atributos tenemos el atributo igual comillas y el valor esto es lo comento para que cuando esté mencionando atributos en etiquetas nuevas y os diga esto es un atributo booleana o esto es un atributo común pues que ya sepáis que tenéis que usar esta configuración el valor igual comilla o sea el atributo perdón igual comillas y el valor y aparte de eso antes de terminar este vídeo os quiero comentar que el hecho de deciros que utilizáis visual studio code entre todas las todas las ventajas que hemos visto hay una más que no os he mencionado que es que si nos ponemos encima de una etiqueta aquí tenéis un enlace a md n reference y si hacemos click nos aparece esta ventana que nos dice si queremos abrir copiar cancelar o configurar dominios de confianza si le damos a abrir nos manda directamente a la especificación con la definición de esa etiqueta que hemos que hemos elegido si nos ponemos encima de body por ejemplo a parte de la pequeña descripción nos pasa exactamente lo mismo si no queréis que salga este mensaje vamos a darle a configurar dominios de confianza y le decimos que confíe en la mozilla de lópez entonces hacemos clic y esa ventana no volverá a salir podemos venir por ejemplo a este strong y le damos a la mn y automáticamente se os va a abrir la definición de la etiqueta strong entonces siempre que tengáis una duda respecto a cierta etiqueta para que se utilizaba o cuáles son los atributos disponibles de esa etiqueta pues simplemente os ponéis encima hacéis clic en mdm reference y aquí vais a tener toda la información de ese elemento así que una vez visto esto vamos con el siguiente vídeo y a ver algunos de los atributos más comunes que vais a utilizar ah [Música] en este vídeo vamos a ver algunos de los atributos más comunes que están disponibles para la mayoría de etiquetas en html para explicaros estos atributos voy a tener que hacer cosas que no vais a entender pero que no tengo otra forma de explicaros de todas formas tranquilos que intentaré ser lo más claro posible para que podáis seguir la explicación el primero que tenemos es class que es un atributo que se puede utilizar en la mayoría de etiquetas html y este atributo se utiliza para dar estilos a través de css si nosotros a este p que tenemos aquí le ponemos una clase y le decimos por ejemplo párrafo 1 a efectos visuales no cambia nada pero ahora mismo podemos identificar este párrafo a través de css para darle algún tipo de estilo que es para lo que está diseñado el css entonces aquí vamos a poner la etiqueta style qué sirve precisamente para poner css dentro de html y si aquí ponemos puntos párrafo 1 aquí podríamos darle estilo a ese párrafo vamos a poner por ejemplo color red guardamos y como veis esto se pone rojo de momento no quiero ahondar más en css porque todo esto es algo que ya veréis en el curso de css pero es que ya os digo que no tengo otra forma de explicaros cómo se utiliza el atributo class sin utilizar css después tenemos el atributo y de como su propio nombre indica esto es un identificador que se utiliza para seleccionar el elemento ya sea bien desde javascript que es otra cosa que llegaréis a ello si continuáis vuestra formación o para hacer navegación a través de outlast el tema de la navegación a través de anclas lo vamos a ver en la siguiente sección que va a ser la sección de los enlaces y veremos cómo se realiza la navegación a través de anclas a través de él en el identificador y de para la parte de javascript vamos a poner aquí la etiqueta script que sería la forma o una de las formas de incrustar javascript dentro de html y este pe le vamos a poner un identificador que puede ser simplemente párrafo y aquí podemos guardar ese párrafo esta parte no hace falta que la hagáis vosotros porque hay muchas cosas que no que no vais a entender pero necesito que entendáis para qué sirve este atributo entonces vamos a poner que esto es igual a documento por get there element by haití y aquí ponemos párrafo básicamente y para que entendáis un poco qué está pasando nosotros en esta p estamos guardando la referencia al elemento párrafo entonces dentro de eso pues al tener acceso a esta etiqueta pues podemos hacer cosas como por ejemplo voy a hacer un con sol punto lo que esto es simplemente para mostrar información y le voy a decir que lo ponga p punto text content que sería el contenido que tiene la etiqueta voy a guardar botón derecho de inspeccionar y esto lo voy a poner aquí debajo con nuestros tres puntitos ya lo vimos que podíamos cambiar donde se coloca esto y si venimos a la consola pues como veis aquí pone identificador voy a hacer un poquito de zoom para que no veáis mejor y si aquí en lugar de identificador pusiéramos identificador a través y d pues como veis aquí aparece ese contenido esto es algo muchísimo más avanzado que lo que quiero que veáis en html pero para que sepáis que el atributo ive sirve para esto necesitaba hacer este pequeño ejemplo lo más importante que tenéis que recordar es que un identificador no se puede repetir y debe ser único después tenemos el atributo title este atributo sirve para mostrar información de lo que estamos representando si yo aquí pongo title y como valor le pongo este es un ejemplo del atributo title y nos situamos encima con el ratón como veis nos aparece esta ventanita o este mensaje que se denomina tool tipo lo voy a poner aquí aparece el mensaje en un cultivo por si escucháis la palabra que sepáis ya lo que significa y por último tenemos el atributo data que he puesto data guión asterisco porque es un atributo que nos permite guardar algún valor en la etiqueta html esto al nivel de html no le vais a encontrar ninguna utilidad pero os aseguro que es un atributo muy importante que cuando avancéis y lleguéis a la parte de javascript este atributo os va a salvar muchas veces de romper os la cabeza para solucionar problemas vamos a poner aquí dentro del p data guión y lo que pongamos después del guión es lo que nosotros queramos la palabra que nosotros queramos para identificar vamos a poner aquí por ejemplo ejemplo y en esta parte de aquí voy a ponerle una idea también para poder localizarlo y vamos a ponerle párrafo 2 y aquí vamos a poner con el párrafo 2 para que sea más identificativo vamos a poner el documento dt elementos y este sería párrafo 2 al tener este atributo data ejemplo vamos a darle un valor que sea de datos de ejemplo en este punto de aquí podríamos hacer otra vez un con sol un color y como ya tenemos el atributo guardado podemos decirle párrafo 2 punto de set punto y el nombre que le hayamos puesto nosotros en este caso ejemplo voy a mostrar la consola otra vez aquí con solá y como veis aquí pone datos de ejemplo si yo cambiara esto si lo escribiera bien con la p pues aquí cambiaría ya os digo que esto es algo que al nivel de html no os va a resultar útil pero que necesito que conozcáis este atributo porque cuando lleguéis a la parte de javascript os va a ayudar muchísimo así que marcarlo con un color llamativo en los apuntes porque en un futuro esto os va a venir muy muy bien y estos son los atributos que quería que viéramos en este vídeo así que vamos a pasar a la siguiente sección que va a ser la de los enlaces y vais a poder ver cómo se hace la navegación a través de anclas además de otras muchas cosas que se pueden hacer con los enlaces ah [Música] en esta sección os quiero hablar sobre los enlaces los enlaces son la parte más importante de la web ya que es la que le dio el funcionamiento que hoy en día conocemos cuando nosotros buscamos algo en google como por ejemplo fondo ozone todo lo que estáis viendo aquí en azul todo esto son enlaces que nos llevan a otro sitio de no ser por los enlaces la web no sería lo que es hoy en día entonces vamos a ver cómo utilizar los enlaces y cómo configurarlos y qué opciones tienen aquí os he puesto que también son conocidos por links popularmente porque normalmente no se habla de enlaces se habla de links y su objetivo es conectar una página web con otra página web con un recurso tanto interno como externo o con otro sitio web en este caso he preparado un pequeño ejemplo para conectar a una página web con otra página web aquí he creado una carpeta que se llama web demo y tenemos el index html que tiene únicamente el título de home y tenemos contacto html que lo único que tiene es contacto una forma de movernos entre estas páginas sería a través de un link entonces vamos a ver cuál es la forma de ponerlo se establecen con el atributo que viene de alcohol vale de ancla y como veis ya nos aparece el atributo hr aquí eso es lo opuesto que tiene el atributo obligatorio hr y es donde el especificamos la ruta del recurso o sitio que queremos obtener también tiene el atributo target que eso lo vamos a ver un poquito más adelante pero de momento vamos a hacer que este enlace nos lleve a la página de contacto dentro del hr le tenemos que dar la ruta donde está en este caso como veis index y contacto están al mismo nivel eso significa que los dos están dentro de la misma carpeta entonces si aquí pusiéramos contacto punto html y guardamos bueno aquí hay que ponerle un nombre aquí vamos a poner ir a contacto guardamos y como veis nos aparece este link no os preocupéis del aspecto por defecto este es el aspecto que tienen los los links y se podría cambiar desde css pero como eso es algo estético no lo vamos a tocar desde html si nosotros hacemos clic en ir a contacto como veis aquí en la ruta ha cambiado y estamos en contacto html si ahora quisiéramos volver a la carpeta bueno al archivo index html dentro de contacto tendríamos que hacer otro link que nos devolviera allí entonces aquí vamos a poner a y aquí podríamos poner index o sea barra index.html podríamos poner index html vamos a poner aquí ir al inicio por ejemplo esto nos funcionaría podemos poner barra index.html y si le damos a ir al inicio nos llevaría a este index html que vamos a ver por qué pasa eso y podríamos poner simplemente barra si ahora volvemos a contacto y le damos aquí como veis nos lleva al mismo punto que esto suceda es algo que os quiero explicar detenidamente a través de las rutas absolutas y relativas y eso es lo que os voy a explicar en el siguiente vídeo porque lo quiero desgranar y no quiero que este vídeo sea demasiado largo así que en el siguiente vídeo vamos a ver cómo se trabaja con rutas absolutas y relativas [Música] en este vídeo vamos a ver cuál es la diferencia entre las rutas absolutas y las rutas relativas las rutas absolutas suelen tener un protocolo ya sea http y https que ya sabéis lo que es un protocolo porque lo hablamos en los primeros vídeos de vocabulario y son únicas en la red se suelen utilizar para rutas externas aquí os he puesto que se suele utilizar porque existen casos muy concretos en los que se utilizan para rutas internas pero son 1 de cada 1000 es entonces a este nivel para para vosotros en concreto si estáis empezando este se suelen utilizar lo podéis poner como siempre se utilizan entonces vamos a ver un pequeño ejemplo de una ruta absoluta para llegar a un sitio si yo quiero un enlace que nos lleve por ejemplo a google yo lo podría poner aquí google.com y aquí poner ir a google por ejemplo estoy en contacto vamos a inicio no este inicio vamos a ver aquí en contacto voy a quitar es te voy a poner index.html luego se explicó cuál es la diferencia aquí como veis los a son elementos de línea vale por eso se está colocando uno al lado del otro y vamos a hacer clic en ir a google yo hago clic y aquí el servidor nos está dando un error nos dice que no puede encontrar web de modo google.com eso es porque no estamos usando un protocolo no le estamos diciendo ni http y https por lo tanto él entiende que en google.com sería lo mismo que contacto html es un recurso que tenemos dentro de esta carpeta y tiene que buscarlo y como no lo encuentra pues nos da este error para que el navegador entienda que se tiene que ir fuera a buscar este recurso tenemos que poner el protocolo http dos puntos barra o https en el caso de que sea un recurso con seguridad vamos a guardar voy a darle atrás y le voy a decir ir a google y por alguna razón esto no se ha guardado vamos a recargar ir a google y ahora sí vale aquí como veis pone google.com pero esto es porque los navegadores te lo quitan en http para para que sea más estético si hacemos clic dentro de la url como veis sí que aparece https dos puntos www.google.com pero en cuanto nos salimos fuera lo reducen a google.com simplemente por estética y por facilidad de lectura esto es lo que se considera una ruta absoluta tenemos que salir fuera de nuestro proyecto a buscar esta dirección en el caso de las rutas relativas tenemos dos tipos de rutas relativas relativas al punto donde nos encontramos o relativas a la raíz del proyecto voy a comentar esto para que no estorbe voy a darle atrás y en este punto de aquí ir a contacto como veis pones simplemente contacto html eso es una ruta relativa al punto donde nos encontramos si yo estuviera por ejemplo en este index html y pusiera esto mismo de contacto html él buscaría dentro de estos archivos no buscaría dentro de web demo entonces ese archivo nos daría un error porque no lo encuentra para que lo veáis mucho más claro lo que voy a hacer es ir al escritorio y dentro del curso html qué es lo que tenemos abierto puede acoger solo la carpeta de web demo y la voy a arrastrar aquí dentro para abrir solo esto entonces ahora como veis sólo tenemos el index html y contacto html vamos a poner esto a este lado y ahora mismo contacto lleva a index.html y solo va a buscar en este punto si yo creara una carpeta aquí dentro y lo llamará por ejemplo páginas y me diera contacto aquí dentro y le digo que sí que lo mueva si yo ahora estoy en index.html y le digo ir a contacto esto me va a dar un fallo bueno me va a dar un fallo porque ni siquiera tengo arrancado el live server un segundo que arranque esto vale esto imagino que está todo guardado sí vamos a darle a ir a contacto y como veis me dice que no encuentra contacto html porque él sólo está buscando aquí y no lo encuentra si yo ahora quiero ir a contacto html tengo que especificar que esto está dentro de páginas barra contacto html y ahora si yo le doy a bueno recargo y le doy a ir a contacto ahora si funciona y aquí tenemos exactamente el mismo problema estamos en contacto html y dentro de esta carpeta no existe un index html yo le doy a ir a inicio y me va a decir que dentro de páginas no encuentran nada que sea index html por lo tanto necesitaríamos salir de esta carpeta y aquí es donde está este punto de aquí donde os digo que si el recurso se encuentra al mismo nivel en la misma carpeta pondremos únicamente el nombre del archivo pero en los casos en los que necesitamos salir de la carpeta actual vamos a usar punto punto barra y se pone uno por cada nivel o carpeta de la que queremos salir es decir si yo desde contacto dentro de esta carpeta quiero ir a index.html puedo poner punto punto barra y ya estoy fuera de páginas y después ya puedo buscar index.html vamos a guardar le voy a dar para atrás recargo le doy a ir a inicio y como veis ahora si funciona en este punto como veis llegará index.html es muy fácil sólo tenemos una carpeta y dos archivos en un proyecto real esto no funciona así en un proyecto real hay varias carpetas varios archivos y dependiendo del punto en el que te encuentres tendrás que calcular la ruta relativa desde ese punto como vosotros entenderéis esto en un proyecto real puede acabar siendo un dolor de cabeza tener que estar calculando el donde estoy y a dónde quiero llegar para ello existen las rutas relativas a la raíz que son las que os había puesto aquí relativas a la raíz del proyecto la raíz del proyecto es esto que tenéis aquí arriba que sería web demo que es la raíz de más alto nivel es decir aquí dentro la raíz del proyecto sería curso html 2020 y en este punto de aquí la nuestra raíz web de mar porque es la carpeta que está más arriba en este caso concreto en visual studio code no tenemos representado aquí este es el proyecto que estamos abriendo en nuestro caso el proyecto simplemente es web demo entonces vamos a volver a poner esto aquí y para establecer una ruta relativa lo único que tenemos que hacer voy a borrar index.html es empezar la ruta con una barra si nosotros empezamos la ruta con una barra le estamos diciendo que se vaya al punto más alto que pueda y que desde ahí empiece a contar entonces desde contacto si empezamos a contar desde arriba del todo aquí simplemente habría que poner index.html vamos a guardar le digo ir a contacto y si yo ahora le doy a ir a inicio como veis esto funciona perfectamente y otra cosa importante que quiero que sepáis es que si yo borro index.html guardo y lo intentó ejecutar y ahora desde contacto simplemente le digo que vaya a la barra como veis también funciona esto es porque el archivo index html es el archivo que por defecto van a intentar cargar los servidores y todos los navegadores al entrar en un sitio web si esto en lugar de index html se llamará por ejemplo home punto html vamos a ir aquí a home ir a contacto si yo desde aquí intentó volver a a la raíz que sería la barra como veis no me aparece el index html porque no encuentra un index html como no lo encuentra lo que hace es mostrarle una lista de lo que tiene para que yo haga clic en qué es lo que quiero abrir entonces por eso es muy importante que nuestro archivo principal en lo que sería el home o el punto de inicio de vuestra página se llame index.html y no de otra forma y de igual forma en este punto de aquí donde yo estoy intentando ir a contacto si pusiéramos una barra ya daría igual en qué punto esté el index.html porque podremos llegar independientemente de todo lo que haya por encima entonces es muy importante que en los enlaces internos siempre que os sea posible utilicéis rutas relativas a la raíz voy a dejar este vídeo por aquí y en el siguiente vamos a ver los atributos que podemos introducir en las etiquetas o en los links ah [Música] en este vídeo vamos a hablar de los dos atributos más importantes que tiene la etiqueta el primero es target que lo que hace es definir cómo se abrirá el recurso solicitado aquí os he puesto que por norma general siempre que uséis rutas absolutas vais a poner como valor blanco en el caso de las rutas relativas en este caso relativas a la raíz el atributo target no lo vais a utilizar prácticamente nunca vamos a hacer la prueba aquí y vamos a poner target y en el cómputo global sólo vais a utilizar dos valores o blanco o el otro que sería self self no lo vais a poner nunca porque es el valor que tiene por defecto es decir poner target self es exactamente lo mismo que no poner nada si nosotros le damos a ir a contacto esto sigue funcionando como ha venido funcionando hasta ahora pero si en lugar de self ponemos blanco y le damos a ir a contacto como veis se abre en una pestaña nueva por eso os digo que este atributo de target lo vais a utilizar casi siempre con las rutas absolutas si nosotros queremos mandar al usuario a google por el motivo que sea no tiene mucho sentido que le saquemos de nuestra página para que se venga o sea para que se vaya a google y le perdamos si aquí le damos ir a contacto no perdón ir a google aquí como veis se va a google pero ha perdido nuestra página entonces en este punto de aquí siempre que estamos utilizando las rutas absolutas para mandarle a un sitio fuera de nuestro dominio o fuera de nuestro servidor aquí es donde se suele poner blanco y me falta la hay y de esta forma lo que vamos a hacer es mandarle en este caso a google pero en una pestaña nueva y no le perdemos de este punto el otro atributo bastante importante bueno aquí os voy a poner el valor por defecto es cels y aquí entre paréntesis os pongo es como no poner nada pero viene bien que lo conozcáis por si acaso porque es posible que en algún caso raro sí que necesitáis poner este atributo o sobre escribirlo o algo así entonces os lo comento por si acaso el otro atributo del que quiero hablar del que quiero hablar es download esto es un atributo booleana que ya vimos lo que significa y sirve para descargar el recurso solicitado y aquí os he puesto que es muy importante el recurso debe tiene que estar en vuestro servidor qué significa eso vamos a comentar este enlace de google que ahora mismo ya no me va a hacer falta y este target blank lo voy a quitar ya lo tenéis puesto abajo para recordarlo y aquí vamos a usar el atributo download vamos a poner download por defecto visual estudio code nos lo completa con el igual las comillas pero en este caso no hace falta vamos a hacer clic en ir a contacto y como veis el recurso no se abre simplemente se descarga aquí yo he hecho la prueba y por eso me sale el contacto uno para comprobar que se estaba descargando realmente y si le volviera a dar pues saldría contacto 2 esto es porque en lugar de abrir el recurso lo que está haciendo es descargarlo y por qué os digo que es muy importante que esté en nuestro servidor por lo mismo que os comenté al principio del curso la importancia de tener un servidor de desarrollo vamos a abrir esta misma página pero desde la fosa desde este punto que es cuando os dije que esto no tenéis que hacerlo nunca cuando desarrollar eyes aquí como veis lo tenemos abierto como archivo si yo le diera a ir a contacto el comportamiento esperado es que se descarga el archivo vale pues hacemos clic y como veis nos dice que no se ha podido acceder al archivo esto sucede porque estamos trabajando como archivo no como servidor entonces esta es una de las razones por la que os digo que es muy importante trabajar con un servidor de desarrollo cuando estemos desarrollando qué más os puedo contar de download vamos a poner esto en grande por aquí ahí si aquí en lugar de mandarle a un recurso interno nuestro le mandaremos a google vamos a poner http dos puntos google.com com aunque nosotros no tengamos con download y le damos a ir a contacto este atributo no va a funcionar lo podemos descargar un html de otro punto con las imágenes pasaría lo mismo si yo aquí busco por ejemplo gato que seguro que hay 40 millones de fotos de gatos en google y hago botón derecho copiar bueno la voy a abrir directamente para que el link no sea demasiado largo abrir en una pestaña nueva vale copiar dirección de la imagen y aquí voy a hacer un enlace que sea a este punto de aquí y vamos a poner descargar el gato esto ya lo puedo cerrar me vengo para atrás recargo y aquí tenemos el enlace de descargar gato si yo hago clic como veis se abre esto bueno es porque no puesto download pero aunque lo pusiera no se descargaría os lo voy a demostrar vamos a borrar las comillas y el igual vamos para atrás recargamos descargar gato y como veis esto se abre no se está descargando porque este archivo de aquí no pertenece a nuestro servidor eso es porque la ruta que le estamos dando es una ruta absoluta entonces siempre que queráis que se descarga el archivo lo tenéis que tener en vuestro servidor y ya que estamos viendo una imagen vamos a aprovechar para que veáis cuál es la estructura de un sitio web cuando se usan imágenes vamos a crear aquí una carpeta que se llame assets esta carpeta es donde se guardan todos los medios externos es decir imágenes vídeos música iconos todo ese tipo de cosas suele ir en una carpeta assets y dentro de assets haremos una carpeta que en este caso va a identificar las imágenes y en este punto es donde nosotros tendríamos que guardar esta foto entonces vamos a decirle guardar imagen como vamos a venir a web demo assets imágenes y aquí en lugar de gato marrón pues lo voy a llamar gatos simplemente y ya lo tenemos guardado ahora en lugar de la imagen desde este punto yo le voy a decir que lo coja de barra assets imágenes gato punto jpg como veis visual studio code nos ayuda bastante a la hora de buscar los archivos y si yo ahora recargo esto y le doy a descargar gato como veis se descarga perfectamente esto una vez más si estuviéramos en esto así viendo esto como archivo y le diéramos a descargar gato nos diría que no se ha podido acceder al archivo así que una vez más asegurados de estar trabajando en un servidor de desarrollo y no con el enlace o con la página web como archivo así que una vez visto esto vamos a pasar al último vídeo de la sección donde os voy a contar cómo hacer la navegación a través de anclas ah [Música] en este vídeo vamos a ver cómo hacer una navegación interna dentro de nuestro sitio web aquí como veis he creado blog directamente y básicamente son todos iguales tenemos un h1 que dice blog h2 que pone post 1 2 3 4 y 5 tenemos 5 post con texto de relleno vamos a ver cómo movernos entre estos posts a través de enlaces con control ve voy a ocultar esto que tenemos aquí y aquí arriba en el body voy a crear un menú de navegación vamos a hacer una y aquí dentro de momento y sólo de forma didáctica vamos a poner aquí los enlaces y este va a ir a bosque 1 y esto mismo lo vamos a duplicar control c control 1 3 4 y 5 y vamos a ir al 2 2 al 3 al 4 y al 5 guardamos y qué está pasando aquí ah vale se ha creado por encima lo voy a poner lo voy a poner debajo del h 1 para que se vea bien aquí vale la idea es que cuando nosotros pulsemos en post uno por 23.425 la página automáticamente se vaya al punto que le corresponde para ello lo único que tenemos que hacer es establecer un ied y al punto donde queremos que vaya así que por ejemplo aquí en el h2o o en el art y con esto ya es como vosotros queráis vamos a poner una idea que diga post guión 1 aquí lo podéis poner como queráis pero si lo ponemos así hay que poner exactamente lo mismo en el h rif aquí habría que poner post guión 1 y muy importante que pongáis el hash delante para poner este símbolo no tenéis en la tecla de al xerez que es la que está a la derecha del espacio y el número 3 entonces esto mismo lo tenéis que poner en todos donde queréis que os lleve en este caso sería el 2 que el 3 el 4 y el 5 y éste y se lo tenéis que poner a cada uno de los artículos en nuestro caso aquí no sé por qué hay un sección esto sería un article&id este sería el post 2 lo que pasa es que copiado las comillas de copiado todo realmente y post 2 vamos a ponerle las comillas ahí y de hecho voy a copiar la etiqueta article entera y aquí vamos a poner los 3 post 4 y aquí el último que sería post 5 y de esta forma vamos a subir se llevó clic en post 1 nos lleva automáticamente a este punto si pulsamos en post 4 nos lleva justo a post 4 el motivo de que esto no baje más es porque la página ya no tiene más contenido y no puede hacer más scroll así que para que se quede justo el título pegado arriba lo que vamos a hacer es este p vamos a copiarlo y lo vamos a pegar un par de veces en cada artículo aquí en este también [Música] aquí aquí había cambiado el ide pero lo voy a volver a poner el artículo y de post 4 vamos a borrarlo de aquí que no es buena idea tener dos y desiguales aquí pegamos y pegamos y en el post 5 lo mismo ahora tenemos contenido suficiente como para poder hacer scroll de hecho en el post 5 nos falta un poquito así que voy a pegar una vez más para que post 5 se pueda quedar aquí vamos a subir arriba aquí y si le decimos ahora post 2 pues nos lleva al punto que queremos esto es algo bastante útil de hecho en la wikipedia esto funciona así tenemos una serie de enlaces y según vamos haciendo clic nos lleva al punto exacto donde está y esto no sólo es útil para movernos por la misma página sino que podríamos desde otra página era este punto voy a este nav de aquí voy a copiar y aquí desde index voy a pegar este mismo menú y aquí en lugar de hr post 1 le voy a dar la ruta a donde quiero que vaya que en este caso sería barra páginas blogs html y aquí ya no pondremos una barra sino que pondremos lo mismo el hash y post guión 1 y así con todos así que voy a copiar esto de aquí y un pequeño truco cuando tenemos uno cuando tenemos la vez si esto me hace caso no sé por qué se ha duplicado la ventana no quiero guardar vale un pequeño truco cuando tenemos esta situación es que si pulsamos alt y vamos haciendo clic en los sitios donde queremos escribir como en este caso tenemos que escribir exactamente lo mismo lo podemos escribir en todos los sitios a la vez entonces yo ahora le doy a un espacio y como veis se pone en todos le voy a dar para atrás control uve para pegar voy a borrar este post y le voy a dar a suprimir para quitar ese espacio guardamos y como veis ya tenemos todo copiado de una vamos a irnos a inicio que creo que es hacia atrás o no pues directamente borro esto y nos venimos a inicio hago clic en post 1 y como veis nos lleva a la página blog pero al post 1 se hiciera clic en el 4 pues nos llevaría al 4 directamente entonces esto es muy útil cuando queremos movernos entre páginas pero a un punto específico de la página y la parte más importante que tenéis que recordar es que el h red que pongáis tiene que ir con el hash y el nombre de líder que le hayas puesto si el punto donde queréis que vaya no tiene una idea esto no os va a funcionar así que recordad siempre poner el ide y en el h responder exactamente el mismo nombre pero con el hash [Música] en esta sección vamos a hablar sobre listas como veis he creado un html específico para listas y aquí os he puesto que las listas en html sirven para listar contenido en función del tipo de contenido que vayamos a listar tenemos tres tipos de listas o l son las 1 órdenes list es decir listas desordenadas y se utilizan cuando el orden de los elementos no influye como por ejemplo en una lista de la compra o el sol las órdenes list y estas se utilizan cuando el orden de los elementos si es importante como en el caso de un top10 por ejemplo y las dl serían las definición list y éstas se utilizan para hacer una lista de definiciones como por ejemplo en un diccionario estas últimas es probable que no las utilice es prácticamente nunca pero tanto las huele como las o l son muy importantes que las conozcáis porque las vais a usar bastantes veces y es muy importante también que sepáis distinguir cuándo utilizar unas y cuándo utilizar otras porque aunque a través de css les podemos dar el mismo aspecto el navegador no va a entender lo mismo cuando trabajemos con un huele que cuando trabajemos con 1 l así que en el siguiente vídeo vamos a empezar a trabajar con las huele y os voy a dar un caso de uso real donde prácticamente en todas las páginas web vais a utilizar un huele [Música] para crear una lista desordenada es tan sencillo como poner un huele y aquí dentro es donde nosotros podemos colocar los ítems de esa lista para colocar esos ítems se utiliza la etiqueta l y qué significa list a ítem es decir elemento de lista y aquí dentro podríamos poner las cosas que nos interesen en este caso voy a hacer una lista de la compra que me parece un ejemplo bastante sencillo y vamos a poner pan vamos a copiar este ley aquí debajo vamos a poner por ejemplo los juegos y por debajo vamos a poner leche guardamos y como veis la forma visual en la que se representa una lista desordenada es a través de puntos con esto el navegador nos está indicando que da igual si pan va primero o va el último lo pongamos donde lo pongamos la información que nos va a llegar es exactamente la misma un caso de uso real de un huele aparte de esto si hacéis una lista de la compra o cualquier otro tipo de listas donde el orden no importe es en los menús si nosotros nos venimos a blog aquí yo había creado una app y dentro había metido los enlaces dentro de un p esto ya os comenté que era simplemente de forma didáctica la forma correcta de hacer un menú no es esta vamos a copiar este en app con control ce y aquí en las listas vamos a pegar esto aunque bueno por semántica y lo más común es que él el huele baya debajo del nada porque lo más normal es encontrarte el nave en este punto entonces vamos a quitar este p bueno vamos a quitar vamos a seleccionar con alt apretado cada uno de estos puntos vamos a borrar los pe y vamos a crear un l y la parte que nos falta es poner aquí el huele y lo vamos a cerrar justo al final de la ley guardamos y como veis el aspecto es muy parecido pero dentro tenemos un link todos los menús de navegación se construyen de esta forma tenemos una 1 l y dentro los l y con los enlaces a los que tendrían que ir en este caso pues no va a ir a post uno ni post dos ni nada de eso pero la semántica correcta de un menú de navegación es ésta todos los menús que veis que son horizontales o se despliegan o todo eso están construidos de esta forma pero para conseguir ese efecto tenemos css así que quedamos con que esta es la semántica correcta de un menú [Música] o sea añadido en la definición que cada elemento de la lista se representa con la etiqueta l y tanto en las comunas o l esto se me olvidó ponerlo al principio pero así ya lo tenéis definido vamos a poner a esta lista un título vamos a ponerle aquí un h 2 que sea lista de la compra y para él hoy le vamos a hacer un h 2 que ponga en orden de aprendizaje aprendizaje en el desarrollo web en el desarrollo web la semántica es prácticamente la misma sólo que en lugar de 1 l ponemos 1 l y aquí pondríamos una ley con el primer elemento que sería html después tendríamos el segundo elemento que es css y por último tendríamos una ley con javascript guardamos y como veis aquí aparece en este orden aquí en este caso concreto si es importante seguir este orden no podemos aprender diseño para una estructura que no conocemos al igual que tampoco podemos aprender interactividad para un elemento para una arquitectura que no tenemos entonces aquí o en una receta de cocina o en un top10 como se había puesto el ejemplo el orden si importa visualmente ya os digo que podemos hacer que aquí en lugar de un 1 y un punto pues nos aparezcan estos puntos eso es algo que podemos hacer con css pero el navegador no va a entender lo mismo si utilizamos un órdenes list que si usamos un un orden es list así que tener muy en cuenta cuando el orden importa y cuando no para saber qué tipo de lista elegir ah [Música] el tercer y último tipo de lista que existe en html son las listas de definición esto se escribe con dl que es definición list y cada elemento de una lista de definición lleva dos etiquetas la etiqueta dt que es definición term el término que vamos a definir y de de que sería definición descripción que es la descripción del término vamos a poner aquí debajo otro ente 2 que diga lenguajes para el desarrollo por ejemplo para el desarrollo web aquí vamos a iniciar esa lista con dl y dentro ponemos una etiqueta dt y vamos a poner html debajo de b que sería la descripción y vamos a poner hyper text marca language creo que se escribe así sí lengua dos puntos es un lenguaje de marcado que se usa para estructurar datos en una página web por ejemplo guardamos bajamos un poquito y como veis este sería el término a definir y este sería la descripción de esa definición vamos a copiar este y vamos a poner otros dos simplemente para que lo veáis vamos a poner aquí el css y aquí vamos a poner kaskade está ahí sheets 2 puntos si dos puntos pero sabía dónde estaba me estaba liando con este dt es un lenguaje de diseño qué se utiliza para dar estilos el html y por último de hacer aquí un intro para que lo tengáis un poquito más separado vamos a poner aquí javascript javascript no significa nada es simplemente el nombre que le pusieron y vamos a poner que es un lenguaje de programación para dar interactividad a un sitio web javascript puede hacer muchísimas más cosas pero para no escribir demasiado pues lo voy a dejar así simplemente entonces como veis esta es la forma de crear una lista de definición pero ya os digo que muy probablemente no las utilice es prácticamente nunca pero que en el caso de que las veáis pues que no suenen raras y ya sepáis lo que son y para qué se utilizan [Música] una cosa que no os he mencionado en los vídeos anteriores sobre las listas es que se pueden construir listas anidadas teniendo en uno de los l y otro huele o un o el e según sea necesario en este caso por ejemplo os he puesto esto que dentro de un o l con él tenemos html y dentro 1 l las mezclas que podéis hacer son cualquiera o sea esto podría ser perfectamente un huele y esto también o esto 1 l y esto huele eso según nos haga falta y con el contenido que estáis representando podéis anidar todas las listas que queráis de hecho podéis anidar una lista dentro de una lista anidada si la situación lo requiere o sea que en esto tenéis todas las herramientas para construir las listas de la forma que queráis y necesitéis y por último para terminar esta sección ose pues todo aquí abajo los atributos de las listas y he creado un par de listas simplemente para que veamos los atributos que no son muchos en los vélez el único atributo que tenemos es el tipo de lista entonces aquí pondríamos uy perdón aquí huele type y tenemos disc que sería el valor por defecto como veis se queda exactamente igual tenemos square que en lugar de círculos serían cuadrados no sé si se aprecia bien creo que sí y también tenemos el valor circle que sería un círculo vacío esto es lo que podemos hacer desde html pero desde css podríamos poner como imagen de la lista o como símbolo de la lista cualquier cosa que se nos ocurra podríamos poner imágenes logotipos iconos lo que queramos entonces desde html que sepáis que tenéis esta opción para los vélez pero que desde css las opciones son prácticamente infinitas y en cuanto a los o l sí que tenemos un poquito más de opción pero no mucho tenemos type exactamente igual que los huele y aquí como veis tenemos la lista de las cosas que nos permiten poner tenemos un 1 que sería el valor por defecto por eso pone 1 2 3 tenemos la opción de poner una mayúscula y pondría abc podemos poner una minúscula y sería abc también y también tenemos la opción de la numeración en números romanos 1 2 3 con los números en mayúscula aunque suene raro o con los números en minúscula y también tenemos la opción de añadir el atributo start y con esto le decimos en qué número de la lista queremos que empiece si nosotros aquí pusiéramos un 3 por ejemplo pues esto sería 345 si pues si pusiéramos un 9 pues aquí sería 9 10 11 y exactamente igual con cualquier otro valor que pongamos si ponemos 9 pues empezaría desde la iss y si pusiéramos un 1 pues empezaría desde el 9 10 11 entonces estos son los atributos que tenemos disponibles desde html pero ya os digo que desde css podemos hacer muchísimas más cosas pero en el caso de que necesitéis tocar algo desde html pues estas son las opciones que nos ofrece ah [Música] en esta sección vamos a hablar sobre las tablas en html hace tiempo las tablas se utilizaban para colocar todo el contenido dentro de una web a día de hoy eso es algo que ya no tiene ningún sentido hacerlo porque tenemos herramientas muchísimo mejores para estructurar el contenido dentro de css entonces aquí vamos a ver cómo se usan las tablas para representar el contenido tabulado que sería el contenido que queremos mostrar dentro de una tabla cuya finalidad es que el contenido en concreto este estructurado y no haya una forma mejor que estructurar lo en una tabla aquí he cogido una imagen de referencia para que veáis un ejemplo de cómo construir una tabla y en qué caso una tabla sería un uso correcto de ella aquí como veis hay un horario de clases que encontrado por google y el objetivo es que al finalizar esta sección seáis capaces de construir esta tabla con una semántica correcta el tema de los estilos va a hacer que la tabla no se parezca mucho a esta en cuanto a aspecto pero lo más importante es que la semántica sea la correcta así que en el siguiente vídeo vamos a ver cuál es la estructura básica de una tabla y cómo se construyen las bases de una tabla e [Música] en este vídeo vamos a construir la estructura básica de nuestra tabla y para ello vamos a utilizar las tres etiquetas principales que tiene una tabla os las he puesto aquí y son table que sería la etiqueta que encierra una tabla cuando se abre el table empieza la tabla y al cerrarlo termina después tendríamos la etiqueta tr que sería table row y es la etiqueta que construye una fila de cada tabla y por último tendríamos td que sería table data que es la etiqueta que construye una celda aquí os he puesto un pequeño truco porque me han llegado bastantes comentarios de problemas para distinguir filas y columnas y lo que es una celda y todo eso entonces aquí os he puesto que el número de celdas dentro de un t r va a establecer el número de columnas de la tabla es decir si cogemos por ejemplo la segunda fila del horario de clases como veis tenemos el primer table data marcaría la hora el segundo la asignatura del lunes el tercero la del martes el cuarto la del jugué la del miércoles y así cada una de las celdas van construyendo las seis columnas que tenemos en nuestra tabla entonces lo primero que vamos a hacer es poner la etiqueta table para establecer nuestra tabla y vamos a crear nuestro primer tr esto sería un pay ball road que si yo guardo como veis no se muestra nada en absoluto aquí es donde vamos a establecer el número de celdas que va a tener dentro de nuestra tabla bueno nuestra fila en este caso entonces ponemos un tv y ponemos el primer contenido de la celda en este caso sería ocho y media el cómputo y comando con dos puntos mejor ocho y media nueve y media guardamos y aquí nos aparece el primer campo de la tabla vamos a duplicar este cd lo pegamos aquí y el segundo campo pone matemáticas matemáticas así que voy a copiar este y voy a poner todas las asignaturas de la primera fila tenemos en todos matemáticas menos en este que sería sociales guardamos y como veis voy a hacer esto más grande como veis ya tenemos la primera fila construida de momento no os preocupéis por el tema del estilo ni de los bordes ni de nada esto es simplemente para construir la estructura de la tabla el tema del aspecto es algo que ya haremos con css así que ahora mismo voy a parar el vídeo voy a construir el resto de filas y continuamos bien pues como veis ya tengo todas las celdas escritas y la única que es un poquito distinta es esta de aquí que sería la del recreo que como veis sólo tiene dos celdas eso es porque esta celda en la imagen lo veis tiene que ocupar todo esto pero eso es algo que vamos a ver en el vídeo de atributos de las tablas así que de momento ya tenemos construido el el esqueleto y el contenido de nuestra tabla en el siguiente vídeo vamos a ver cómo poner el título de la tabla la cabecera que nos falta y también nos enseñaré a poner un pie de tabla que no es obligatorio pero en algunos casos os puede venir bien saber cómo se pone así que os veo en el siguiente vídeo ah [Música] en este vídeo vamos a continuar viendo el resto de etiquetas que podemos añadir a una tabla y la primera sería como poner un título a la tabla y en la imagen veis que pone horario de clases ese sería el título de nuestra tabla aquí os he puesto que los títulos de las tablas se establecen con la etiqueta action y es una etiqueta opcional porque no todas las tablas necesitan un título y según la especificación esta etiqueta se debe colocar justo después de la etiqueta table así que vamos a bajar aquí y después de table vamos a poner nuestra etiqueta caption y aquí dentro en mayúsculas vamos a poner horario de clases guardamos y como veis aquí aparece nuestro título de la tabla más etiquetas que tenemos disponibles son las cabeceras de las tablas en nuestro caso sería lo del lunes martes miércoles jueves y viernes estas etiquetas o estas cabeceras se establecen con la etiqueta tejer y dentro vamos a poner una etiqueta tr normal para establecer la fila de la cabecera pero en el caso de las celdas en lugar de utilizar td para esas celdas en lugar de utilizar un table data vamos a utilizar un th que sería un table head entonces vamos a venir aquí debajo del título y vamos a poner nuestro vejez aquí dentro ponemos nuestro pr para la fila y dentro vamos a poner el th para cada una de las filas o sea para cada una de las celdas perdón el primero como veis lo tenemos vacío así que no voy a poner nada y los otros los voy a duplicar aquí esto sería lunes martes miércoles jueves y viernes y aquí vamos a poner el l m x jota y v guardamos y como veis ya tenemos aquí nuestra cabecera que se representa en negrita pero no no penséis que esto sirve para ponerlo en negrita porque podríamos dejarlo con un tamaño de letra normal así que ya tenemos lunes martes miércoles jueves y viernes el contenido de la tabla lo que sería todo esto de aquí en el caso de que tengamos un tejer ya estamos estableciendo grupos dentro de la tabla entonces la semántica correcta para todo el contenido de la tabla sería un body y esta etiqueta de aquí la de cierre la vamos a poner justo al final p body es opcional siempre y cuando no estemos utilizando un peje en cuanto establezcamos una cabecera el resto de bloques de la tabla tienen que estar dentro de un t body y por último tendríamos la opción que en este caso si es opcional completamente de poner la etiqueta de food esta se utiliza para poner un pie de tabla que ahora mismo vamos a establecer porque como este horario realmente no tiene un t food pues lo que vamos a hacer es poner un total de clases o total de asignaturas y ahí vamos a poner un número entonces la manera de construir un test put es exactamente igual que la de cualquier otra fila vamos a hacer aquí mi intro ponemos el tr y dentro un td en este caso vamos a poner total de asignaturas y debajo vamos a poner otro tv que tenga 1 2 3 4 5 6 7 8 9 10 11 y 12 asignaturas si contamos tutoría como asignatura pues tenemos 12 guardamos y como veis nos pone total de asignaturas 12 esta sería la estructura completa de una tabla el tejer el t body y el the food y dentro tenemos los tr para las filas y los tb para las celdas en el siguiente vídeo vamos a ver los atributos que tenemos disponibles para una tabla para poder agrupar tanto filas como columnas así que nos vemos en el siguiente vídeo ah [Música] en este vídeo vamos a ver cómo agrupar tanto celdas en columnas como en filas aquí por ejemplo tenemos el problema de que recreó está ocupando solo una celda pero necesitamos que ocupe las cinco y en el caso de total de asignaturas lo suyo sería que total de asignaturas ocupará todas estas celdas hasta el jueves y el 12 lo pusiera en el viernes por ejemplo para que quedara un poquito más estético entonces vamos a ver cómo se hace eso aquí os he puesto que para hacer que las celdas ocupen más de una fila o más de una columna tenemos dos atributos tenemos row span que sirve para que una celda ocupe más de una fila y con spam que sirve para que una celda ocupe más de una columna el valor por defecto es 1 por eso todas las celdas solo están ocupando su sitio si cambiamos row spam o call spam van a ocupar el número que nosotros le digamos vamos a ir a recreo por ejemplo aquí y lo que queremos es que ocupe más de una columna queremos que ocupe estas cinco entonces le vamos a decir aquí coles pan igual 5 guardamos y ahora mismo recreo está ocupando 5 columnas la cuestión es que no lo vemos entonces vamos a ir aquí arriba y esto lo voy a poner simplemente para que podáis tener una orientación visual de lo que pasa así que voy a poner la etiqueta style y a los tedx les voy a decir que tengan un background color por ejemplo steel blue guardamos y como veis ahora recreo ocupa todo esto porque sólo tenemos y aquí sólo tenemos un tv pero están coloreados los cinco sea cola span le dijera tres en lugar de cinco pues como veis sólo ocuparía tres columnas entonces esta es la forma de que ocupe más con coles pan en el caso de total de asignaturas tenemos el mismo problema así que vamos a venir aquí y le voy a decir coles pan 4 14 15 porque esto empieza con las horas y como veis ocupa estas 5 columnas y ahora el 12 lo tenemos aquí en el viernes esto es respecto a que ocupen más columnas para que ocupen más filas vamos a hacer un pequeño ejercicio y vamos a pensar que el profesor de música está enfermo entonces aquí estos dos nos sobrarían y tendríamos que poner en su lugar tecnología así que vamos a buscar este música que es el del lunes y en lugar en lugar de música voy a poner tecnología y aquí le voy a decir row espa 2 porque quiero que ocupe dos filas si ahora guardamos como veis el problema que tenemos es que se nos ha roto la tabla eso es porque aquí sigue habiendo un tecnología y como no lo puede colocar pues empuja esta fila hacia allá lo que tenemos que hacer es eliminar esta tecnología para que todo cuadre otra vez y como veis ahí lo tenemos esto es un problema muy común cuando se está empezando que al decirle que un elemento ocupe dos columnas o dos filas pues la tabla se rompa entonces hay que tener en cuenta que si en el lunes en este caso tenemos la primera celda que ocupe dos filas pues en el caso de aquí necesitamos una fila menos porque aquí ya la estamos ocupando y en el caso del viernes tendríamos exactamente el mismo problema aquí voy a decirle tecnología tecnología roe span 2 guardamos y volvemos a tener el problema de que el viernes que sería esta celda de aquí se nos sale fuera entonces la borramos y como veis toda la tabla recupera su aspecto natural esto es algo que os va a venir muy bien en el caso de realizar ciertos tipos de tablas en las que las celdas no tengan que ocupar lo mismo por el motivo que sea en un horario es normal que casi todas ocupen lo mismo pero en el caso de que tengáis una tabla en el que los campos no tengan que estar tan estructurados pues este ejemplo yo creo que os va a servir para que sepáis cómo ocupar más columnas o más filas ah [Música] en este vídeo vamos a ver cómo seleccionar columnas hasta ahora hemos visto que dentro de un tr podemos seleccionar si yo elijo este t r podríamos seleccionar toda la primera fila pero no tenemos forma de momento no conocemos la forma de seleccionar una sola columna la columna del lunes por ejemplo o la columna del horario eso es lo que vamos a ver en este vídeo aquí os he puesto que cuando necesitamos seleccionar una columna tenemos la etiqueta col group que nos permite seleccionar una columna en concreto dentro pondremos tantas etiquetas con como columnas tengamos y de esta forma cada etiqueta con equivaldrá a una columna siguiendo el mismo orden que tienen en la tabla vamos a venir aquí abajo para ver un ejemplo y vamos a poner cold group y dentro vamos a poner una etiqueta con de momento solo vamos a poner una ahora mismo aquí visualmente no ha cambiado nada pero vamos a hacer un pequeño ajuste en el css aquí en lugar de ted porque en este caso lo quiero seleccionar todos los cd voy a seleccionar cold y como veis como sólo hay un call lo que se ha seleccionado es la primera columna recordad que esta de aquí ocupa 415 columnas por eso se está pintando hasta aquí si esa ocupará menos que la tenemos aquí si está solo ocupará 1 que sería el valor por defecto pues sólo tendríamos esta columna pintada vale que no os confunda el hecho de que el color llega hasta aquí si ahora nosotros ponemos más etiquetas col voy a ponerlo aquí debajo col pues ahora se pintaría la primera y la segunda entonces el tema del orden que os he puesto aquí es porque esté con equivale a la primera columna el segundo a la segunda y así hasta completar todos los que tenemos en total son seis me parece 1 2 3 4 5 y 6 sí entonces también os he puesto que si necesitamos que una etiqueta col agrupe más de una columna tenemos el atributo span que funciona exactamente igual que roe spam y con spam para que lo entendáis mejor voy a hacer exactamente lo mismo que he hecho antes para daros una ayuda visual y aquí le voy a decir que me seleccione el segundo gol spam que existe aquí como veis solo se ha pintado la segunda columna vamos a venir uy me ha pasado aquí y en lugar de tener seis con lo que voy a hacer es decirle que sólo quiero 2 entonces en este caso visualmente no va a cambiar nada porque este col sigue siendo el segundo pero aquí le voy a decir espa 5 guardamos y como veis ahora este col está ocupando todo esto de aquí vamos a seleccionar el primero voy a copiar esto lo voy a poner aquí arriba y le voy a decir que al primer hijo en lugar de steel blue pues lo ponga por ejemplo un light coral por ejemplo como veis ahora el primer call ocupa todo esto de aquí hasta el jueves y el segundo pues me ocupa sólo el último trozo entonces que sepáis que la opción call group viene muy bien sobre todo para esto de dar estilos porque podríamos dar un color a cada una de las de las columnas pero también os digo que esta no es la forma correcta de darle estilo lo que pasa es que no quiero manchar el el css y el css perdón no quiero manchar el html para que no os leáis entonces el html lo intentó dejar lo más limpio posible y qué css no influye en absoluto solo lo estoy usando como ayuda visual para que podáis ver cada cosa así que con este vídeo terminamos la parte de tablas y en la siguiente sección vamos a seguir viendo otras etiquetas que se usan muchísimo pero que no puedo englobar en una sección como tablas o enlaces así que nos vemos en la siguiente sección [Música] en este vídeo bonus de las tablas os quería enseñar como quedaba con un poquito de estilo y aquí os lo he dejado arriba el css que sepáis que la forma correcta de darle estilo a una tabla es a través de css pero no de la forma que lo he hecho yo vale aquí estoy utilizando ciertos electores que son se denominan selectores de etiqueta que de esto ya ya os hablaré con detenimiento en el curso de css si queréis pasar a verlo pero que en ningún caso debéis utilizar el html para dar estilos es decir aunque lo veáis en algún sitio que nadie utilice aquí border 1 y ese tipo de cosas ni ni la etiqueta centre por ejemplo para centrar porque esta etiqueta está obsoleta desde hace pues en html5 sé se quedó obsoleta la quitaron a finales de html 4 así que unos seis o siete años que la etiqueta centre no existe entonces como veis aquí la visual studio code la pone en rojo así que en ningún caso se os ocurra poner estilos de esta forma porque eso sería una muy mala práctica y una muy mala idea así que os voy a dejar por aquí el css simplemente para que veáis que con muy poquito css la tabla coge una forma muchísimo más agradable a la vista porque si comentamos esto pues la tabla queda así como regular pero si le aplicamos un poquito de estilo tampoco mucho pues como veis ya coge un aspecto muchísimo más agradable así que vamos a continuar con la siguiente sección ya y os dejo por aquí este pequeño ejercicio de como estilizar la tabla [Música] en este vídeo vamos a ver algunas etiquetas de bloque que no he mencionado aún y que son bastante importantes porque es probable que las utilice en varios sitios web el primero va a ser address que se utiliza para aportar información de contacto para el artículo más cercano o para todo el body esta parte de aquí tenéis un ejemplo en la mn pero básicamente es que si por ejemplo tenemos un artículo que menciona un usuario o menciona una noticia y esa noticia ha ocurrido en cierta dirección en concreto pues lo suyo sería encerrarlo en la etiqueta address porque estamos guardando o imprimiendo una información que es relevante para esa noticia en concreto o para ese usuario si lo ponemos debajo en el futur por ejemplo pues esto correspondería a la información de contacto de la página o de la empresa o de la persona de la que sea la página entonces vamos a ver aquí un pequeño ejemplo de adex y lo que voy a poner es la dirección de tony stark que normalmente esto lo podríamos escribir así tony stark malibu es 10 1880 y luego está el código postal que sería 90 265 y esto pertenece a california si esto lo guardamos sería correcto estaría dentro de la etiqueta que corresponde pero habitualmente las direcciones postales no las escribimos así entonces en este caso poner un ver si sería correcto porque semánticamente y a la vista del usuario queda muchísimo más común verlos las direcciones así entonces de esta forma aquí tendríamos una dirección que nos parece una dirección y en este caso el br sería correcto y además lo estamos metiendo dentro de una etiqueta address que sería la etiqueta correcta para mostrar una dirección después tenemos la etiqueta blockquote que se utiliza hoy aquí que este salto de línea no debería estar ahí se puede se utiliza para marcar las citas a otros autores o documentos cuando nosotros hacemos referencia a un texto que hemos cogido de otra página oa una frase célebre que estamos cogiendo de algún autor normalmente esto debe ir en la etiqueta block what esta es la etiqueta de bloque para citas después en el siguiente vídeo vamos a ver que esto tiene un equivalente en el caso de que no queramos que sea de blog y que sea de línea pero de momento vamos a ver el bloc what que es de bloque recibe un atributo opcional que podemos incluir que es el atributo site esto es para poner un enlace al documento original o fuente que sepáis que esto no lo convierte en un enlace ni haciendo clic te va a llevar allí ni nada de eso es simplemente para que el navegador sepa de dónde viene esa información entonces vamos a poner aquí block boot y voy a copiar una frase que tengo por aquí aquí esto pero metido en un p y esto de aquí le podríamos poner una cita que yo lo he sacado de lo voy a copiar aquí lo he sacado de un blog así que voy a copiar esto y lo veamos para ti vale como veis esta es la forma de representar una cita en este caso es una una cita de una película pero si hacemos clic esto no nos va a llevar a ningún sitio ni nada parecido esto es simplemente información para el navegador después tenemos la etiqueta pre que se utiliza para tener el código pre formateado que necesite ser representado igual que se escribió esto se usa muchísimo cuando estamos escribiendo por ejemplo letras de canciones o algún poema o código que queremos representar visualmente entonces aquí simplemente voy a poner hola enter y voy a poner qué tal guardamos y como veis se representa exactamente igual que lo hemos escrito si yo aquí hiciera tabulación es como veis se mantendría entonces la etiqueta pre es útil en estos casos cuando nosotros queremos que el contenido se vea exactamente igual que lo hemos escrito utilizamos pre aquí no habría que utilizar un br ni nada parecido para que saltará de línea entonces que sepáis que esto sirve para pre formatear el código y normalmente la etiqueta pre suele ir acompañada cuando cuando escribimos código de la etiqueta code que la vamos a ver en el siguiente vídeo porque es de línea entonces en el siguiente vídeo vamos a ver también cómo se utiliza pre junto con code después tenemos un dip que es simplemente una división del documento semánticamente no significa absolutamente nada y es un contenedor genérico esto normalmente en el noventa y pico por ciento de los casos lo vais a utilizar para dar estilos a través de css o para utilizar algo que se denomina delegación de eventos en javascript esto de primeras entiendo que os suene raro no quiero que lo entendáis pero por lo menos que os suene el nombre entonces que sepáis que si nosotros por ejemplo tenemos una tarjeta de usuario y ponemos div aquí podríamos poner un h2 con el nombre del usuario después podríamos poner un pie con su email y después otro p con una descripción del usuario por ejemplo entonces a través de este dip nosotros podríamos dar estilos a cada uno de los elementos generar clases lo importante es que el contenido que esté dentro del dif está relacionado es decir si después hubiera otro usuario no sería correcto tenerlo así sería correcto que un día cerrará aquí y que aquí abriera otro vale eso sería lo más lo más correcto semánticamente entonces que sepáis que esto no significa nada en cuanto a semántica pero que se utiliza para dividir contenido y por último tenemos la etiqueta hr que significa horizontal room y cuyo objetivo es decirle al navegador que vamos a cambiar de tema cuando nosotros estamos hablando de un tema en concreto y en el siguiente párrafo en el siguiente artículo vamos a hablar de un tema completamente distinto la forma de decirle al navegador que cambiamos de tema es a través de una etiqueta hr visualmente como veis se representa por una línea pero que sepáis que esto lo he visto en varios blogs y en varios cursos que hr nos sirve para dibujar líneas vale hr es para informar al navegador de que vamos a hacer un cambio de tema de hecho si nos ponemos encima nos lo pone aquí el elemento hr representa una rotura de temática a nivel de párrafo por ejemplo una escena que cambia de historia o una transición hacia otro tema entonces tened en cuenta eso que hr nos sirve para dibujar líneas en el navegador sirve para cambiar de tema y de momento estas son las las etiquetas a nivel de bloque que quería que viéramos en este vídeo y en el siguiente vamos a ver un par de etiquetas a nivel de línea que también son importantes antes de pasar a la siguiente sección que ya sería más gorda así que nos vemos en el siguiente vídeo ah [Música] en este vídeo quiero que veamos otras etiquetas importantes que son de línea y además quiero contaros cómo funcionan las entidades especiales en html o lo que conocemos también como el código ascii aquí o se ha dejado un link que después veremos lo que tiene y esto os va a ayudar a escribir ciertos símbolos que no es la única forma de escribirlos pero es la forma más cómoda de escribirlos la primera etiqueta que quiero que veamos es spam que es un contenedor de línea es el equivalente adif de bloque o sea que semánticamente no significa nada y se suele usar para encerrar palabras o pequeños textos y darles estilo vamos a ver un pequeño ejemplo con spam y voy a crear aquí un paquete aun lorem y por ejemplo este trozo de aquí voy a poner spam y voy a encerrar pues pues por ejemplo estas dos palabras las voy a meter dentro de un español entonces ahora si nos venimos aquí y usamos un poco de css y yo le digo que lo que esté dentro de la etiqueta span le ponga un color red pues como veis este trozo se pone rojo entonces la etiqueta span sirve para eso simplemente para localizarlo desde javascript o para darle estilos desde css a una palabra en concreto que tenga que tener un estilo particular o a un grupo de palabras después tenemos q que sería el equivalente a blockquote pero de línea entonces aquí os he puesto que significa coat y que por eso el de bloque se llama block what es simplemente para como regla nemotécnica para que lo recordéis si os hace falta sirve para poner citas pero en línea es decir que funciona exactamente igual que el bloc cob pero para algo que necesitamos que sea un elemento en línea aquí por ejemplo podemos poner aquí para poner q y dentro por ejemplo voy a poner yo soy ironman como veis aquí nos pone estas comillas que es simplemente visual para que nosotros sepamos lo que es y la etiqueta que también admite el bloque desde el atributo perdón de cita y aquí pondríamos el link de donde viene porque básicamente es lo mismo que block quot pero para línea después tenemos la etiqueta code que es lo que os había comentado en el vídeo anterior sobre la etiqueta pre y esto nos sirve para encerrar código que queremos representar visualmente suele ir unido con la etiqueta break entonces por ejemplo si yo aquí pongo pre y dentro con una etiqueta code aquí dentro podemos escribir código que nos va a permitir que se escriba de la misma forma entonces si yo copio el ejemplo que he puesto aquí en html uy en html perdón en css si yo pongo esto así pues como veis se representa con los saltos de línea y con todo y además le estamos diciendo al navegador que esto es código entonces es importante que cuando vayamos a escribir código lo metamos dentro de la etiqueta code me refiero a escribir código que queremos que se represente visualmente no cuando escribimos cualquier código entonces aquí voy a hacer un pequeño ejemplo para daros una utilidad sobre el código ascii y lo que voy a hacer es escribir aquí un p que diga la etiqueta h 1 se utiliza para representar títulos de primer nivel guardamos y aquí he metido la pata etiqueta representar títulos vale como esto sería código esto debería ir dentro de la etiqueta code entonces vamos a meterlo ahí y cerramos si nosotros queremos poner el símbolo de la etiqueta h1 si ponemos el mayor que y después aquí el menor que vamos a tener un problema guardamos y como veis esto se convierte en un título y no es lo que queremos lo que queremos es la representación visual del menor que y del mayor que sin que se convierta en una etiqueta html entonces para ello tenemos esta tabla de código ascii que os he dejado por aquí y que como veis tiene todos los símbolos que se pueden escribir en el teclado entonces el que nos interesa en concreto para este ejemplo es a ver si lo veo este el menor que y el mayor que como veis tenemos una representación con html número y html nombre entonces podemos escribir esto de aquí o esto de aquí y tendremos el símbolo menor que vamos a hacer la prueba vamos a quitar esto y vamos a escribir el símbolo de amper sanz almohadilla 60 y punto y coma muy importante el punto y coma porque si no lo ponéis no se va a escribir el símbolo y en el otro tenemos ampersand almohadilla 62 un pico ma guardamos y si ahora venimos aquí como veis ya tenemos los dos símbolos escritos en este caso también tenemos html nombre y daría exactamente igual poner esto que poner lt tienen exactamente el mismo efecto como veis entonces todos los símbolos que tenéis escribir y que no tengáis disponibles en el teclado pues esto es una forma de escribirlos por ejemplo el símbolo del copyright se utiliza bastante os lo voy a poner aquí como un comentario vamos a poner símbolo de por pi wright y este es ampersand con peak punto y coma guardamos y aquí lo tenéis de hecho en visual studio code si escribís ampersand directamente hacéis control espacio como veis os sale una lista larguísima de todos los símbolos que podéis escribir si cogiéramos por ejemplo este no sé a qué corresponde pues como veis es una coma y al igual que este símbolo tenemos disponibles todos aquellos que se pueden escribir desde el teclado así que una vez que os he contado esto vamos a pasar a la siguiente sección [Música] en esta sección vamos a ver uno de los puntos más importantes de todo el curso y uno de los puntos también más largos de todo el curso esos son los formularios la parte más importante de los formularios es que nos permiten interactuar con el usuario hasta ahora todo lo que hemos hecho nos ha servido para pintar información ya sean títulos párrafos o estructuras de contenido menús y ese tipo de cosas con los formularios ya no pintamos información sino que le pedimos al usuario información cada vez que vosotros hacéis un login en algún sitio o ponéis vuestros datos en en cualquier tipo de campos a rellenar todo eso está construido con formularios entonces por eso os digo que esta es la parte más importante porque prácticamente todas las páginas web del mundo salvo las informativas todas tienen un formulario ya sea para acceder a la página para hacer pagos online o simplemente para apuntar vuestro correo electrónico y que os lleguen noticias de un tema concreto entonces quiero que presten especial atención a los formularios porque es un campo bastante completo y complejo porque hay muchísimas cosas que aprender de los formularios y en esta sección vamos a ver todo lo que tienen los formularios paso por paso así que en el siguiente vídeo vamos a empezar con la estructura básica de un formulario y de que se compone [Música] aquí os he puesto cuál es la estructura básica de un formulario y esta se compone de cuatro elementos tenemos la etiqueta form que sería la etiqueta que engloba todo nuestro formulario tenemos un ley bold que sería el nombre del campo a rellenar ahora sobre sobre la web lo veréis mucho más claro y después tenemos un input estos input son los campos que se dibujan para que el usuario pueda introducir información y por último tenemos un botón que sería el elemento que nos permite enviar ese formulario la parte más importante de un formulario después de rellenarlo es poder enviarlo porque si no esa información nos sirve absolutamente para nada así que vamos a crear un formulario muy sencillito para que lo veáis vamos a poner porn y como veis aquí se auto completado con acción esto es un tema que ya os explicaré para qué sirve en el punto de los atributos de los formularios pero de momento lo voy a borrar porque no pertenece a la parte de html pero aún así os voy a contar para qué sirve ese atributo después tendríamos un ley bold que sería la etiqueta el nombre del campo aquí el atributo for también lo voy a quitar y lo veremos en la parte de atributos no os preocupéis y aquí vamos a poner por ejemplo nombre y después vamos a poner un input ponemos un input aquí pone type text que esto también lo podríamos borrar sin ningún problema y aquí vamos a poner aquí debajo vamos a poner el button que es el que sirve para enviarlo entonces vamos a poner enviar formulario guardamos y como veis tenemos el ley bold que sería la parte que identifica el formulario después tenemos el input que es donde nosotros vamos a poder escribir la información y por último tenemos el botón que pone enviar formulario si nosotros le damos como veis esto se reinicia el comportamiento por defecto de un formulario es recargar la página en el en el curso de javascript ya veremos en su momento cómo evitar que esto suceda pero que sepáis que el comportamiento de un formulario es enviar se os acoger esta información y enviarla a donde se va a enviar esa información es lo que ponemos en el action si yo aquí pusiera axxion y le dijera por ejemplo enviar punto html y yo relleno esto cuando le voy a enviar formulario como veis me dice que no puede encontrar esta ruta eso es porque la ruta enviar punto html dentro de la carpeta formularios no existe esto es algo que ya vimos en las rutas tanto las absolutas como las relativas entonces esto normalmente lo que lleva es un documento de servidor que ya podría ser php y lo que se hace es bloquear el envío del formulario a través de javascript y una vez que se ha gestionado ese formulario y se han hecho las modificaciones que necesitemos después es javascript que se encarga de enviar ese formulario nosotros para usamos el envío con con javascript y después lo enviamos desde javascript pero como aquí estamos para ver la estructura cuál es la estructura correcta de un formulario y cuáles son todos los campos que se pueden incluir en un formulario pues ese tema no lo voy a tocar así que ahora que hemos visto que esta es la estructura básica de un formulario que serían los 'label los input y el botón para enviarlo en el siguiente vídeo vamos a seguir profundizando poco a poco en los formularios ah [Música] en este vídeo que lo que veamos cómo unir un 'label a un input en el vídeo anterior os ponte que existe el atributo for que se le pone a la ley bold y hay que indicar el ide que tiene el input es decir si yo aquí pongo play ball for name por ejemplo este input debe tener el ive name de esta forma si yo hago clic en el input podemos escribir pero si hago clic en él en el nombre como veis también se activa para que podamos escribir esta es la forma más común que vais a encontrar de cómo asociar un 'label a un input existe otra forma pero es probable que no la utilicen nunca o que la veáis muy muy poquito de todas formas os la voy a enseñar por si lo veis en algún momento os hace falta esa forma es poner en ley bold exactamente igual el atributo for no nos hace falta y dentro del ley ball vamos a poner el nombre en este caso y después de ley bold cosa después del texto que hemos escrito vamos a escribir nuestro input voy a borrarlo de type text porque ese es el valor que tiene por defecto y si guardamos como veis el resultado es exactamente el mismo si pinchamos aquí podemos escribir pero si hacemos clic en nombre como veis pasa exactamente lo mismo esta forma ya os digo que no es muy común porque a la hora de dar estilos a un formulario el hecho de tener el boli el input en el mismo bloque no nos permite jugar tanto con los elementos pero de todas formas si en algún momento lo veis u os hace falta hacerlo de esta forma que sepáis que es completamente válido y que la especificación dice que se puede hacer así así que en el siguiente vídeo vamos a ver bueno vamos a empezar a ver mejor dicho los tipos de input que hay porque hay bastantes así que nos vemos en el siguiente vídeo [Música] en este vídeo y en los siguientes quiero que veamos algunos de los tipos de input que existen aquí os he puesto una lista de unos cuantos pero que sepáis que existen más de todas formas os voy a dejar una lista de la documentación oficial para que veáis todo lo que hay vamos a empezar por el input de tipo botón vamos a poner esto en un forma vamos a quitar el action y aquí vamos a poner input y en el taller vamos a poner button como veis aquí aparece un botón pero no tiene texto a diferencia de si poníamos la etiqueta button y aquí podríamos enviar por ejemplo aquí sí que aparece pero en un input de tipo botón el valor que queráis que se escriba en el botón se tiene que establecer con el atributo value y aquí podríamos poner enviar y como veis sí que aparece a efectos prácticos visualmente son exactamente iguales pero hay una gran diferencia entre un input de tipo botón y una etiqueta button aquí voy a poner enviar el input simplemente para que veáis la diferencia entre uno y otro y aquí voy a poner un input normal para que tengamos un campo y veáis que se reinicia o no si yo escribo aquí y le doy a enviar input como veis el formulario nos envía un input time button nos sirve para enviar el formulario sin embargo el button que tiene el texto enviar si hacemos clic como veis si recarga la página y si envía el formulario entonces es muy importante que si ponéis un input hay botón sepáis que esto es para poner un botón en el formulario y que haga algún tipo de operación a través de javascript pero que no os va a servir para enviar el formulario entonces si vosotros quitáis esto da igual que tengáis aquí el formulario completo porque este botón no va a cumplir la función que se espera si queréis que a través de un input se pueda enviar el tipo que le tenéis que poner no es button es submit que eso es algo que os he puesto aquí el input hay submit se utiliza para enviar el formulario vale vamos a guardar y si yo ahora escribo y le doy a enviar como veis ahora sí se está enviando entonces esto es muy importante que lo sepáis ah [Música] en este vídeo vamos a seguir viendo tipos de input y voy a aprovechar para contaros pequeños trucos sobre los input de tipo fecha el primero que tenemos es el input de tipo day vamos a ponerlo aquí en put leigh que sería un campo para introducir día mes y año este campo funciona bien en todos los navegadores después tenemos el day time que ya está obsoleto y no funciona de hecho si lo ponemos vais a ver que se comporta como uno de tipo texto input day time este se comporta como un tipo texto vale no no lo uses nunca porque ya no ya no funciona y después tenemos day time local que este es para fecha y hora pero tiene la particularidad de que no funciona en firefox vamos a poner aquí day time local y como veis podemos elegir día mes y año y además una hora si aquí desplegamos es exactamente igual que el otro pero tiene este añadido que sería para poder añadir una hora y unos minutos si esto mismo lo abrimos en firefox vamos a copiar esta url las pegamos aquí como veis este campo no funciona exactamente igual que el chrome aquí este campo no tiene validez entonces aquí os he puesto un pequeño tip que es que si necesitáis en un formulario añadir fecha y hora el truco es utilizar un day time local y el valor time o sea el tipo time entonces en lugar de usar un solo input usaría un input nate las secas y un input de tipo time y como veis tenéis el input para la fecha y el input para el para la hora y si esto nuevamente lo miramos en firefox voy a copiar esto no sé por qué está aquí esto sobra si yo copio la url y la pego aquí como veis en firefox podemos elegir día mes y año y además podemos escribir una hora no se ve tan bonito como en chrome pero cumple su función de todas formas esto con css se podría convertir en un calendario mucho más bonito entonces este yo lo recomiendo utilizarlo por el tema de del soporte en todos los navegadores si lo necesitáis yo os recomiendo que utilicéis estos dos valores y por último en este vídeo tenemos el tipo mount que se utiliza para introducir un mes entonces si ponemos input type mont pues como veis si pinchamos en el calendario podemos elegir un mes y también nos deja elegir un año pulsamos en el año le damos aquí sería a julio de 2014 y tenemos el de semana que esté yo no lo he utilizado nunca pues lo voy a poner aquí porque también entraría dentro de fechas este ya os digo que yo no lo he utilizado jamás no se me ocurre un contexto pero si en algún momento os hace falta pues pues que sepáis que existe esto sería para seleccionar una semana de un año en concreto entonces eso serían los input que tenemos de tipo fecha para seleccionar tanto días meses años horas y semanas así que espero que estos tipos de imputó se hayan resuelto las dudas respecto a cómo trabajar con fechas en los formularios a [Música] en este vídeo vamos a seguir viendo tipos de input y quiero que veamos estos porque son bastante importantes y aunque en aspecto son exactamente iguales lo que quiero es enseñaros que estos mismos input en un móvil se ven de forma distinta así que vamos a crear los input de este tipo os voy a enseñar a tener una vista previa en el móvil de lo que estamos haciendo aquí y vais a ver como el teclado cambia el teclado del móvil cambia en función del campo que estemos utilizando así que aquí debajo vamos a poner un lay ball para poder tenerlos identificados y que sepáis a qué corresponde cada cosa y tenemos búsqueda vamos a poner search y lo voy a poner aquí dentro directamente porque como no necesito hacer nada más lo voy a poner aquí y voy a copiar y pegar para tenerlos todos ordenados aquí y tenemos el que sería para teléfono vamos a poner aquí teléfono de teléfono tenemos email que lo voy a poner aquí está el email tenemos password que este si se ve un poco distinto porque el campo que escribimos se queda oculto ahora lo vamos a ver y por último tenemos url url de aquí url guardamos y voy a hacer un poquito de zoom para que salten vale como veis los campos aquí se ven exactamente igual nos están correspondiendo exactamente con lo que quiero que veáis ahí serían sí sí y el que es un poco distinto es password porque cuando nosotros escribimos en lugar de salir lo que estamos escribiendo salen puntos pero que sepáis que esto sigue completamente visible o sea si viniéramos aquí a inspeccionar y aquí hay demasiado zoom de antes voy a quitar un poquito venimos a inspeccionar y donde pone time password escribimos type text quitáramos el type directamente el password que está escrito se ve perfectamente entonces que sepáis que esto es simplemente para que si tenemos un tipo password y estamos escribiendo de primeras esto esté oculto pero que esto no es seguro para nada es simplemente una forma que tiene el navegador de ocultar lo que estamos escribiendo entonces para que veáis cuál es la verdadera diferencia de utilizar estos campos en lugar de otros vamos a ver como conectar esto al móvil para que lo podáis ver vosotros en tiempo real pero antes para mejorar la estética de esto vamos a meter cada uno de estos 'label y su input lo vamos a meter dentro de un día esto es simplemente para que salten de línea y lo podamos ver bastante mejor en el móvil así que este dip lo voy a cerrar aquí aquí voy a abrir uno nuevo y esto lo mismo simplemente los voy a encerrar para que cada uno ocupe una línea y en el móvil se puedan ver de una forma muchísimo más estética y poder identificar más fácilmente cuál corresponde a cual tanto el leiv on como el input entonces este es el último lo ponemos aquí guardo y como veis ahora sí lo tenemos todos en una línea ahora tenéis varias opciones podéis darle a windows y escribir pm de esta es una opción también podéis escribir command y lo más importante es que aquí os ponga símbolo del sistema entonces si esto lo abrís como veis os aparece una consola y aquí dentro quiero que escribáis ip config todo junto y aquí os va a salir vuestra dirección de red esto es la ip de vuestro ordenador que se corresponde con este 127 puntos 0.01 esto de aquí equivale a vuestra ip que en mi caso es la 192 168 0 39 después tenemos el 2 puntos 50 y 500 que eso equivale al puerto que estamos utilizando un puerto en términos generales porque esto sería más propio de redes es un punto de acceso que tenemos para esa ip en concreto cada ip tiene varios puntos de acceso y el 5500 es el que nos ha establecido en life server entonces con estos datos vamos a abrir nuestro móvil vamos a abrir un navegador que yo lo tengo aquí y haber aquí para que se vea todo aquí dentro voy a escribir 192 puntos 168 punto 0 39 esta sería nuestra ip del ordenador después vamos a poner los dos puntos 55 0 0 y después barra formularios que es a donde queremos llegar entonces formularios y como veis ya estamos viendo nuestro proyecto en el móvil y tenemos la estructura básica y tipos de input vamos a hacer clic en tipos de input y como veis aquí tenemos exactamente lo mismo que en el móvil o sea que en el navegador perdón si pulsamos en search como veis nos aparece un teclado normal con la lupa aquí si pulsamos el teléfono nos aparece el teclado numérico para escribir un teléfono si pulsamos en email nos aparece aquí la arroba en lugar de de la lupa que no salía aquí nos sale un intro en password nos aparece un teclado normal y esta llave de aquí que nos permite sugerir una contraseña segura y administrar contraseñas y en url nos aparece un teclado normal pero en el historial de búsquedas si aquí ponemos www por ejemplo como veis aquí las sugerencias ya son de urls entonces para el tema de accesibilidad es muy importante que pongáis el campo que corresponde para lo que queréis porque como veis el móvil ayuda bastante al usuario a lo que va a escribir y esa información se la tenemos que dar nosotros en función del tipo de input que necesitemos así que una vez visto esta forma de evaluar los input desde un móvil y que vierais la importancia que tiene elegir bien el tipo de input en función de lo que necesitamos vamos a dejar este vídeo por aquí y en el siguiente vamos a ver otros tipos de input que nos faltan de toda la lista que os había dejado así que nos vemos en el siguiente vídeo [Música] en este vídeo vamos a ver estos últimos input que tengo en la lista que los he metido en este vídeo porque no pertenecen a ninguna categoría en concreto así que digamos que sólo un poco de variados o miscelánea y en el siguiente vídeo vamos a ver inputs que si puedo encajar en una categoría así que vamos a empezar con el primero que sería un input de tipo color este input lo que nos permite es mostrar esta plantilla de colores para elegir un color de primeras puede parecer que no tiene mucha utilidad pero si hacéis una página en la que el usuario pueda elegir su color o el color del texto o el color de fondo de la página o ese tipo de cosas donde el usuario tiene un poder de interacción para ciertos temas de color pues éste imputó os puede venir muy bien después tenemos el input de tipo number que evidentemente como su nombre indica es para valores numéricos si intentamos escribir texto no nos deja pero sin embargo números y además nos salen estas flechitas para subir y bajar que a tema de curiosidad se llaman widgets vale y en función del navegador pues puede cambiar su aspecto de todas formas esto a través de css y javascript se puede cambiar el aspecto que tiene pero que sepáis que este input se utiliza para temas numéricos que no sean fechas porque para fechas ya tenemos los input de tipo de it después tenemos el input de tipo range vamos a poner input reig esto lo que hace es crear una barra que puede seleccionar un rango además los input de tipo range aceptan el atributo step que lo que hace es determinar de cuánto en cuanto se mueve la barra si ponemos 10 por ejemplo como veis la barra da unos saltos más grandes también tiene el atributo min imax vamos a poner min 0 max 20 por ejemplo y esto sería cero esto sería 10 y esto sería 20 porque estamos moviendo de 10 en 10 si aquí en lugar de 10 pusiéramos 5 pues esto se movería de cinco en cinco tendríamos 0 5 10 15 y 20 este input no sé si lo vais a utilizar en algún momento pero que sepáis que podéis establecer estos valores para que el usuario pueda tener más control sobre ello también tenemos un input de tipo reset que este se utiliza sobre todo en al lado del botón submit y sirve para resetear el formulario si aquí tenemos algo escrito y pulsamos este botón digamos que todos los datos que haya en el formulario vamos a poner esto en verde por ejemplo y esto lo vamos a poner aquí y aquí escribo esto le damos a restablecer y como veis se queda con su comportamiento por defecto digamos que es como si se recargará la página pero sin tener que hacer la recarga lo que hace es borrar todos los datos introducidos en el formulario y dejarlo como estaba en un principio y por último tenemos el input de tipo texto que es importante que sepáis que se denomina de tipo texto este es el valor por defecto que esto equivale a no poner nada pero es importante que sepáis que esto sería time text porque si tenemos por ejemplo un input de tipo hidden por ejemplo que en función de lo que haya seleccionado el usuario se muestre onu desde javascript podríamos cambiar este imputa en concreto y decirle que si ha seleccionado la opción a por ejemplo pues que este tipo de input cambie de hidden a text y entonces este campo se mostraría entonces esto es algo que os puede venir muy bien saber que se llama que el tipo del campo por defecto es text para este tipo de casos así que ahora que hemos terminado con la lista que os había puesto en un principio de los inputs que existen aquí sueltos en el siguiente vídeo vamos a empezar a ver los inputs de tipos seleccionables que son los que nos permiten seleccionar ciertos valores de una lista de opciones así que nos vemos en el siguiente vídeo [Música] en este vídeo vamos a ver los input que nos permiten seleccionar elementos dentro de una lista de opciones aquí os he puesto los tres tipos que existen aunque los select realmente no son un input o son una etiqueta aparte pero como también nos permiten seleccionar elementos los ha incluido en esta categoría tenemos los primeros los impute tipo radio estos input nos permiten seleccionar una única opción de una lista de opciones relacionadas vamos a crear aquí en el formulario un input type radio y si guardamos como veis aquí nos aparece esto de aquí un botoncito que podemos seleccionar vamos a poner un lay vol y aquí le vamos a poner por ejemplo masculino íbamos a meter este input dentro de playball para tenerlos relacionados y como veis tendríamos una lista de género que lo podríamos poner aquí por ejemplo en un técnicamente tendría que ser un h 1 enero y aquí en el body vamos a poner un h 1 elementos seleccionables seleccionables y tendríamos ayuno aquí otro y aquí otro y tendríamos por ejemplo masculino o femenino desconocido por si alguien no quiere decirlo y como veis tendríamos estos inputs pero aquí veis el primer fallo que tenemos que es que nos permite seleccionar todos para ello tenemos el atributo name que ya hemos visto en otros vídeos y que sabéis que es obligatorio y aquí el name tiene que ser igual en todos los inputs que estén relacionados en este caso pondremos y enter por ejemplo que sería el género entonces este atributo lo voy a pegar en los tres y con esto le estamos informando al navegador que los tres imputan a la misma categoría y que por lo tanto solo vamos a poder seleccionar uno de los tres y además si en el caso de que tuvierais otro tipo de input radio queréis que uno de ellos salga marcado por defecto que en este caso no tendría mucho sentido pero para que lo veáis tenemos el atributo cheques que es un atributo booleana y eso ya sabéis que significa que no necesita un igual ni un valor es simplemente el atributo y de esta forma por defecto el que saldría marcado es el que tiene el atributo cheques ya os digo que en el tema del género no tendría sentido que saliera marcado uno por defecto pero el otro tipo de inputs a lo mejor si os interesa que esté marcado uno por defecto como él quiere enviar quiere que le enviemos información o ese tipo de cosas además hay otro tipo de atributo que en estos casos es obligatorio que sería el value esto nos sirve para decirle al formulario cuando lo enviemos qué valor es el que contiene el elemento en este caso aquí tendríamos que poner masculino no tiene por qué corresponder este valor con este pero sí es recomendable que sea identificativo esto cuando se envíe al servidor lo que va a recibir el servidor es vender y masculino para saber a qué categoría pertenece y cuál es el valor que ha elegido el usuario entonces en este caso aquí habría que ponerlo como femenino y en este punto como desconocido entonces así es cómo funcionan los input de tipo radio y en el siguiente vídeo vamos a ver cómo funcionan los input de tipo check box que vais a ver que es muy similar a esto [Música] en este vídeo vamos a ver cómo funcionan los input de tipo chef box vais a ver que prácticamente es lo mismo que los impute tipo radio con la diferencia de que los check box nos permiten seleccionar varias opciones de una lista de opciones relacionadas entonces vamos a poner aquí un 'label vamos a quitar el atributo for y aquí vamos a poner html así y dentro el input de tipo box y como veis lo que tenemos aquí es el elche box con el lei ball tanto aquí como en el radio si queréis que aparezca antes el símbolo antes del nombre lo único que tenéis que hacer es poner esto después simplemente y con esto se invertiría el orden no tiene más historia sino tuvierais separado el leiv o'neal input pues primero en ley bold y luego el input o primer el input y después en ley vol eso ya ya lo sabéis entonces vamos a poner este y vamos a escribir otros dos nos a copiar es de éste y éste y vamos a poner aquí css i estaba escrita al igual que los input de tipo radio necesitan el name para saber a qué categoría pertenecen y un válido entonces aquí pondríamos lane languages sí y el valor sería html y esto sería exactamente igual en todos cambiando el value y de esta forma a la hora de enviarlo al servidor pues él sabría que la categoría lenguaje es el valor que ha seleccionado el usuario o los valores que ha seleccionado pues son los que estén marcados el script y exactamente igual también tenemos el atributo cheques por si queréis que alguno salga marcado por defecto es decir si aquí ponemos cheques pues como veis es html el que aparece marcado y la principal diferencia es que aquí se lo podemos poner a varios y esto sería válido cosa que en un radio button pues no sea en un radio o en un input de tipo radio no sería válido así que esta es la forma de trabajar con los input de tipo set box y en el siguiente vídeo vamos a ver cómo trabajar con los select que digamos que son una mezcla de los dos porque nos permiten trabajar con una o varias opciones así que nos vemos en el siguiente vídeo [Música] en este vídeo vamos a ver cómo funcionan los select que no son un input de tipo select sino que son una etiqueta aparte y digamos que es una mezcla entre los radio y los check box porque nos permiten trabajar con una o con varias opciones entonces vamos a crear nuestra etiqueta select y aquí necesita un nombre aquí vamos a poner por ejemplo lenguajes en este caso no me va a hacer falta voy a dejar solo en name y como veis nos sale esta flechita para desplegar lo que pasa es que todavía no tenemos opciones dentro así que lo que voy a hacer es desplegar esto con hacer un intro y escribir las opciones que quiero que aparezcan desplegadas cada opción tiene que ir dentro de la etiqueta option o si hay y como veis hay que poner un value que sería lo que equivale a este a este valor aquí voy a poner html y el value también lo voy a poner como html entonces como veis aquí ya nos aparece la primera vamos a copiar esto y vamos a poner otros dos vamos a poner en este la css y en este vamos a poner javascript y en este bueno no puedo copiar de aquí realmente aquí javascript y esteban aquí entonces ahora si te damos como veis podemos seleccionar una de estas opciones tanto en los el radio como los chef box teníamos que poner el name en el input jr value al que correspondía en este caso el name solo lo lleva el elemento select y los value se ponen en los elementos opción esta es la opción que tenemos para elegir uno si quisiéramos que se pudiera seleccionar más de uno tenemos el atributo múltiple y de esta forma en lugar de ser un desplegable lo que tenemos es como una lista que nos permite seleccionar uno pero si pulsamos la tecla control nos permite seleccionar más de uno entonces esta es la forma de trabajar con un select de forma simple en el siguiente vídeo vamos a ver cómo trabajar con un selecto una forma un poquito más avanzada sobre todo para cuando tenemos muchísimas opciones así que nos vemos en el siguiente vídeo [Música] en este vídeo vamos a continuar viendo cómo trabajar con los select y como veis ya he creado un un select que lo he cogido prestado de md en activo ya poner mascotas en lugar de pets que básicamente es un select con las distintas mascotas que puede tener un usuario la cuestión es que aquí tenemos distintos tipos de mascotas y lo que quiero es usar una etiqueta para englobar las y que al usuario le sea más fácil elegir para ello os lo he puesto aquí que si tenemos muchas opciones podemos ordenarlas por categorías y para eso tenemos la etiqueta o group que significa option group que básicamente como su propio nombre indica sirve para agrupar opciones y con el atributo ley bold es por lo que nombrar y amos la categoría entonces aquí vamos a poner por ejemplo o group y aquí vamos a poner play ball y le voy a poner por ejemplo cuatro patas entonces esto lo cerraríamos aquí guardamos y si ahora desplegamos como veis ya lo tenemos aquí más ordenado por categorías después tendríamos otro group 'label aves por ejemplo para meter estas 2 y aquí debajo podríamos hacer una opción group con un play ball otras vamos a copiar pegamos aquí y si ahora desplegamos como veis tenemos acá las categorías bastante mejor ordenadas y que esto facilita al usuario el hecho de elegir la mascota o lo que queráis vosotros establecer en el select ah [Música] en este vídeo vamos a ver otro elemento seleccionable que vino con html5 que son los data list son muy similares a los select solo que incluyen un filtro para que se pueda buscar de una forma más sencilla vamos a crear aquí un input de tipo lista vale y este impute es el que nos va a permitir hacer el filtro necesitamos darle una lista cuál va a ser la lista que vamos a utilizar y para eso tenemos que usar el atributo list aquí voy a poner mascotas y aquí debajo es donde vamos a crear nuestro data list que va a ser la lista que vamos a utilizar para para trabajar catalyst y este data list como es la lista necesita un y de que se corresponda con la lista que le hemos dicho aquí por lo tanto esta idea tendrá que ser pets o mascotas como lo queráis poner y luego lo que tenemos dentro funciona exactamente igual que un select así que voy a copiar el de las mascotas simplemente estos de aquí voy a copiar aquí voy a copiar estos tweets voy a copiar estos también y estos dos también guardamos y como veis ahora tenemos cuando nos ponemos encima tenemos esta flecha y nos salen estos dos valores eso es porque tenemos el value y esto escrito cada uno corresponde a uno si yo en value pusiera dos por ejemplo pues al desplegar como veis la opción que sale primero es el value y por debajo sale como una pequeña descripción si la necesitáis entonces en este caso podríamos omitir todo lo que tenemos aquí esto ya es al gusto del usuario puede que en algunos casos necesitáis establecer una especie de subtítulo o una pequeña descripción entonces lo podéis poner así y la parte más significativa para utilizar un data list en lugar de un select es que tenemos incluido aquí este filtro si yo pongo a como veis sólo aparecen los que coinciden con eso si yo pudiera ver por ejemplo sólo saldría hámster pero si pongo solo te pone hámster y serpiente lo busca por el inicio de la palabra si lo que contenga esa palabra así que en los casos que queráis hacer un select con un filtro para poder filtrar los resultados y que al usuario le resulte más cómodo encontrarlos pues data lista es una opción muy buena así que vamos a dejar este vídeo por aquí y en el siguiente vamos a seguir viendo que más cosas se pueden hacer con los formularios [Música] en este vídeo vamos a ver más elementos que tenemos dentro de un formulario que nos sirven para hacer diferentes cosas el primero que quiero que veamos es fill set que se utiliza para agrupar elementos dentro de un formulario vamos a poner aquí un form y aquí dentro vamos a poner un ley vol para ley por ejemplo aquí el hombre vamos a hacer su input correspondiente y debajo vamos a hacer otro para los apellidos sub mail por ejemplo y ponemos apellidos y debajo otro input vamos a poner pib para asociarlo simplemente y the name y b surf lane hasta aquí nada nuevo si quisiéramos englobar estos dos campos para que el usuario pudiera localizar más fácilmente qué es lo que tiene que rellenar y estructurarse lo de una forma más más entendible para el navegador y para el usuario vamos a utilizar la etiqueta del set y esto lo ponemos aquí debajo englobamos dentro de feel set estéticamente como veis lo único que pasa es que aparece un borde este borde ya sabéis que desde css se puede cambiar pero para poner un nombre para que el usuario sepa que esto sería por ejemplo datos personales tenemos la etiqueta legend que está sirve para poner una etiqueta al contenido del fil set entonces vamos a poner legend y aquí dentro vamos a poner datos personales guardamos y como veis ya está puesto aquí datos personales y tenemos esto englobado lógicamente esto se podría poner un poco más bonito podríamos poner esto en un día y todo lo que vosotros queráis pero eso ya sería tema de css y de [Música] y de estética ya no sería un tema de estructura esto ayuda tanto al navegador como al usuario para estructurar los datos y saber que se espera en cada uno de los campos después tenemos el input file que lo he metido aquí aunque no sea un elemento es un tipo input pero solo con html podemos hacer muy poquito con un input file entonces os voy a enseñar cómo es simplemente para que sepáis que existe pero un input file sin sim css o sin javascript tiene muy poca es muy poco vistoso y apenas tiene funcionalidad esto sirve para cargar archivos que vayamos a enviar a través del formulario aquí le vamos a seleccionar archivo y como veis se nos abre esto y podríamos meter por ejemplo este txt y luego al enviarlo pues esto se enviaría a cancelar selecciona el archivo práctica 1 y ahí tendríamos ya cargado un elemento o un documento para enviar pero ya os digo que hace falta tanto javascript para que esto pueda hacer más cosas como mostrar una barra de progreso o mostrar la miniatura de lo que se ha subido o ese tipo de cosas y css haría falta para que esto fuera un poquito más estético después tenemos meter que esto sirve para representar el valor dentro de un rango conocido esta etiqueta es posible que no la utilice jce mucho pero os voy a enseñar cómo se ve en el formulario pero ya os digo que es raro que la utilice jce si nosotros ponemos esto como veis directamente aquí aparece una barra para meter tenemos distintos atributos que nos van a ayudar a pintar elementos en la barra el ejemplo que nos da a la md n sería para un contador de gasolina entonces vamos a poner aquí un y de well aquí vamos a poner un 'label huele y así ya lo tenemos asociado y aquí vamos a poner por ejemplo combustible esto ya os digo que os vale para cualquier cosa que queráis representar con una barra de progreso los atributos que tenemos son min que sería el mínimo que podemos tener en este caso sería cero esto lo tiene que ir aquí esto tiene que ir aquí dentro el máximo que sería el cien por cien y después podemos poner el value que queremos establecer si ponemos 50 por ejemplo pues como veis lo tenemos por la mitad voy a comentar este input para que se vea mejor y esto se dibujaría así si queremos cambiar los colores sea esto le pongo 80 sigue siendo verde y si yo le pusiera 10 sigue siendo verde pero ya por defecto tenemos ciertos valores que nos van a cambiar los colores si le decimos que el atributo bajo es 30 por ejemplo lo que esté por debajo de 30 se va a pintar amarillo tenemos el atributo high que sería alto y aquí podemos poner por ejemplo 75 y si aquí en el válido ponemos 80 pues se siga poniendo amarillo y por último tenemos el óptimo que sería cuál es el valor que nosotros consideramos óptimo entonces si le ponemos aquí 50 mientras esto no pase de 75 será verde si baja de 30 lo considerará abajo y lo pondrá en amarillo y si lo pasamos de 75 pues también lo considerará alto y lo pondrá de otro color esto es algo que se puede modificar desde css evidentemente pero viene bien que conozcáis cómo funciona esto por si en algún momento tenéis que utilizarlo la siguiente etiqueta que tenemos es progress esto se utiliza para representar el progreso de una tarea vamos a poner aquí un ley vol para estás por ejemplo y vamos a poner tarea 1 y aquí vamos a utilizar la etiqueta progress vamos a ponerle el ide estás y tenemos que establecer los atributos muy similares a los de meter o meter para saber cuánto progreso llevamos entonces vamos a ponerle un máximo que sería el cien por cien y un valium si en el value yo pongo el 75 por ejemplo pues como veis esto se rellena hasta el 75% si pusiera 10 pues se rellenaría hasta el 10% ésta también es posible que no la utilice es mucho porque hay otras formas de hacer esto de una forma interactiva además que según vaya pasando algo vaya subiendo la barra pero eso ya os digo que siempre os va a hacer falta programación con javascript para hacer este tipo de cosas así que yo os cuento que existe esta etiqueta pero ya os digo también que es posible que no la utilice nunca y por último tenemos text área que está si la vais a utilizar bastante que es para introducir texto en un formulario vamos a poner aquí text área como veis se rellenan muchas cosas pero principalmente esto es un campo que muchos conocéis que sería un campo de mensaje o de asunto o ese tipo de cosas también nos aparece esto aquí para poder cambiar el tamaño y desde css esto se podría bloquear todos estos atributos que han aparecido aparte del name que ya sabéis que es obligatorio y el ide que sería para um para un mensaje para asociarlo con el lei vol vamos a poner aquí el message y vamos a poner y también luis h y aquí en el lay volvamos a poner mensaje ya lo tendríamos asociado para escribir tenemos el número de columnas y el número de filas si aquí en columnas en lugar de 30 yo pusiera 70 pues esto sería mucho más ancho si pusiera 10 pues sería mucho más estrecho y en rose si en lugar de 10 pongo 100 pues el campo sería muchísimo más largo ya os digo que esto aún así se puede modificar si no lo bloqueamos pero desde css también le podríamos decir cuánto alto y cuánto ancho queremos darle así que con esto voy a dejar el vídeo por aquí y ya hemos visto todas las etiquetas disponibles en un formulario y en el siguiente vamos a ver los atributos más comunes que se suelen utilizar en los formularios hay bastantes atributos pero os voy a contar los los más típicos y los que seguramente utilicéis más a menudo así que nos vemos en el siguiente vídeo [Música] en este vídeo os quiero hablar sobre los atributos de los formularios no os voy a comentar todos los que hay porque hay muchísimos pero sí os voy a comentar los principales que seguramente utilicéis de todas formas os dejo un link para que veáis todos los atributos que existen y que los podéis probar y usar en función de lo que necesitéis pero en este vídeo os voy a contar para empezar el place holder que este atributo se usa bastante y lo que hace es dar una pista al usuario de lo que tiene que introducir aquí ya ha creado un pequeño formulario para los ejemplos y si aquí yo quito el valium el campo se quedaría vacío y si escribo place holder y pongo aquí por ejemplo introduce un hombre como veis aquí se dibuja y produce tu nombre y cuando el usuario hace clic puede escribir y eso se borra automáticamente para temas de estilos cuando se quiere jugar con lo que pone aquí normalmente no se utiliza place holder pero es simplemente por un tema de facilidad a la hora de dar estilos en cuestiones de html si simplemente queréis que aparezca esto aquí y que el usuario pueda escribir plays holder es la mejor opción que tenéis esto no no esto lo voy a dejar para que lo tengáis después tenemos el atributo require este significa que el campo es obligatorio es decir si yo a este imputado le pusiera red wire e intentó enviar el formulario nos aparece esto aquí diciendo que complete este campo eso significa que le estamos obligando al usuario a que rellene este campo y si escribimos algo y le doy a enviar ya se puede enviar entonces siempre que queráis que un campo sea obligatorio tenéis que poner el atributo recuay tened en cuenta que esto se puede desactivar desde el inspector de elementos que ya lo hemos visto en varias ocasiones aunque aquí tengamos un recuadro el usuario podría venir aquí a formulario y borrarlo directamente y entonces el campo dejaría de ser obligatorio y lo podría enviar por ese tema hay más validaciones que se hacen fuera de html hay validaciones que se hacen desde javascript e incluso desde el servidor entonces esto es una primera medida de seguridad pero no es la más segura de todas formas es conveniente ponerlo para que el navegador y el usuario sepa que esto es obligatorio después tenemos el atributo rizo only que lo que hace es convertir un campo en solo lectura es decir yo aquí ya tengo un value que pone hola y esto yo lo puedo cambiar y puedo escribir pero si yo pusiera aquí read only louis only lo que hacemos es convertir este campo en solo lectura aunque yo haga clic aquí lo puedo seleccionar pero no puedo escribir ni lo puedo borrar esto igualmente se puede eliminar desde el inspector de elementos pero es conveniente que los campos que tengan que estar rellenos por defecto y no se pueda modificar su valor le pongáis el reach only también tenemos la opción disable que es muy parecida que esta la voy a poner justo aquí después para que lo veáis que no es exactamente lo mismo no es lo mismo rizo only que disable si nosotros ponemos rizo only el campo se envía cuando nosotros enviamos el formulario esto se envía pero si en lugar de riz only voy a copiar esto lo voy a pegar debajo en lugar de rizzoli ponemos disabled como veis el campo ni siquiera podemos hacer clic en él no se ilumina como el otro y a la hora de enviar el formulario si tiene el atributo disable no se va a enviar esa información entonces tened cuidado cuando queráis que un campo sea de sólo lectura no pongáis disabled poned rizzoli después tenemos los atributos min max que aquí voy a cambiar el orden sé que esto no tiene nada que ver que no voy a cambiar el orden y para que estén igual los dos mini max y mean lens y max lens hacen lo que su propio nombre indica con mini max controlamos el mínimo y el máximo de un campo numérico que aquí tenemos uno input hainán ver vamos a poner te ponga un mínimo de 5 por ejemplo y un máximo de 10 si nosotros en este campo ponemos un 2 y le damos a enviar bueno éste nos va a decir que los rellenamos porque es obligatorio aquí nos va a decir que el valor debe ser superior o igual a 5 y si nos pasáramos y pusiéramos 15 por ejemplo pues nos diría que el valor debe ser inferior o igual a 10 sé que algunos me vais a preguntar si esto se puede personalizar y que no salga de esta forma esto es lo que se denomina un widget que ya os lo comenté en algún otro vídeo y por defecto el navegador tiene esos estilos se pueden modificar desde css y desde javascript el comportamiento de estas alertas pero en principio sólo con html nos tenemos que quedar con esto no tenemos otra forma de mostrarlo esto va en función del navegador el atributo min y el atributo max no tienen que ir los dos necesariamente ni son obligatorios si queréis poner solo min también os funcionaría perfectamente y aquí escribo algo y aquí pongo un 1 y esto va a seguir funcionando y si nos pasamos de 5 y ponemos un 6 pues el formulario se va a enviar sin ningún tipo de problema después tenemos midlands y más leen estos sirven para lo mismo que 1000 max pero en campos de texto con esto establecemos el mínimo y el máximo de caracteres de un campo de texto en este que tenemos aquí si yo pongo mi lente y le digo que como mínimo tiene que tener tres caracteres y que como máximo debe tener cinco por ejemplo pues a la hora de escribir voy a escribir aquí algo y en este punto si yo le digo enviar donde mi inglés tres máx leen 3 en principio está bueno pero no es obligatorio en recuay porque si no sé que me va a dejar escribir completa este campo ya que escribo un 1 solo y me dice que aumente la longitud de este texto vamos a poner 2 enviar y lo mismo como máximo o sea como mínimo tiene que tener 3 y aquí me está diciendo que actualmente el texto sólo tiene 2 si yo me pasara y pusiera 3 4 5 y 6 el sexto ya no me deja escribirlo pero en cuanto al mínimo si me lo permite entonces si queréis obligar al usuario a que un campo de texto tenga cierto número de caracteres la forma es ésta tanto el mínimo como el máximo y después tenemos selected que esto es el equivalente al cheque en los select ya vimos que si poníamos cheques en un radio button o en un check box salía marcado por defecto con selected lo que hacemos es marcar la opción por defecto en este caso por ejemplo si yo pongo selected aquí como veis por defecto sale one pero si yo guardo ahora esa leche porque es el que tiene la opción por defecto y ya para terminar este vídeo tenemos autofocus que nos ha puesto la descripción pero es para poner el poco al cargar el formulario el foco por defecto al cargar el formulario el tema del foco significa que simule que el usuario ha hecho clic cuando nosotros estamos en un campo ese campo tiene el foco que es cuando podemos escribir entonces si yo a este campo de aquí le pongo autofocus y guardamos cuando yo recargo la página como veis automáticamente sin que yo haga nada ya puedo escribir aquí eso es porque el foco se va a ese campo entonces estos son los atributos que quería que viéramos en este vídeo y ya os digo que existen muchos más y que tenéis un link para para verlo porque hay bastantes entonces echadle un vistazo a todos los atributos que hay en la documentación porque es posible que haya alguno que yo no haya mencionado y os venga bien conocerlo así que voy a dejar este vídeo por aquí y en el siguiente vamos a terminar el tema de los formularios explicando la diferencia que existe entre enviar los formularios por método get o por método post vamos a ver las dos diferencias de cómo enviar formularios a [Música] en este vídeo vamos a ver cuál es la diferencia entre enviar un formulario a través del método get y del método post este vídeo respecto a html va a ser simplemente teórico e informativo porque esta información sólo para html no sirve realmente para nada pero cuando paséis a la parte de programación con javascript saber la diferencia entre el método gate y el método post y cómo leer esa información nos va a venir muy bien así que vamos a poner aquí el action que ya vimos en vídeos anteriores y aquí simplemente voy a poner enviar punto html este este archivo no existe y nos va a dar error pero no importa después vamos a poner métodos y como veis aquí ya nos aparecen dos el método por defecto es get el método get es el método que se ejecuta cuando nosotros entramos a una página a través de la url es decir a través de aquí arriba si yo le doy a enviar como veis pone aquí enviar punto html y aquí nos dice que no puede hacer un get a formulario se enviara html ese es el método por defecto que tienen todas las páginas cuando nosotros entramos a través de la url y por otro lado tenemos el método post que este método sería el envío de formularios a través de la parte de atrás de la página por llamarlo de alguna manera si nosotros ahora le damos a enviar como veis el comportamiento es distinto no nos está diciendo que no puede hacer un get a enviar html simplemente nos da un error 405 esto significa que él ha intentado enviar esta información pero la información no ha llegado no ha encontrado el archivo para enviarle esa información entonces vamos a cambiar aquí el método get para que veáis una cosa y no le quiero dar atrás está aquí voy a recargar voy a quitar esta interrogación y cuando yo le voy a enviar aquí tenemos los campos vacíos y al darle a enviar como veis nos aparece una interrogación y nos pone que no puede hacer el get después de esta interrogación irían los campos que se están enviando del formulario por eso os he dicho en varias ocasiones que el atributo name es obligatorio porque si nosotros no lo ponemos no estamos enviando información realmente entonces aquí vamos a poner name igual a name porque esto es un nombre y en este caso vamos a poner name igual a sur name que sería el apellido si nosotros ahora le damos a enviar como veis ahora sí que aparece información tenemos name igual a vacío y sur name igual a vacío esta es la forma de enviar datos a través de la url se pone el archivo al que vamos a acceder una interrogación y después los valores como están vacíos los campos nos está enviando nada pero si ya que pusiera dorian desings por ejemplo no quiero guardar es la costumbre le doy a enviar y como veis ahora sí que aparece voy a hacer esto un poquito más grande y tenemos name igual a dorian y sur name igual a designs entonces esta es la forma en la que se están enviando datos a través del método b si yo cambiara esto por post y le doy para atrás le voy a enviar no he recargado vamos a recargar vamos a poner lo mismo dorian designs enviar aquí tenemos un error pero en la url no aparece nada en absoluto para ver cuál son los datos que estamos enviando vamos a hacer botón derecho inspeccionar y nos vamos a ir a la pestaña de network que sería la de red aquí ahora mismo no hay nada porque no lo estábamos inspeccionando pero vamos a darle para atrás le voy a dar aquí a donde pone clear para borrar todo y ahora lo voy a enviar como veis aquí tenemos este enviar html que es el que nos ha dado el error voy a hacer esto más grande para que lo podáis ver bien y los datos que estamos enviando los tenemos abajo del todo donde pone form data son los datos que estamos enviando name is earl name y estos campos se corresponden al name que nosotros le hemos puesto al input por eso os digo una vez más que es muy importante que a los formularios les pongáis un name si no se lo ponéis es como si ese campo no existiera así que una vez visto esto voy a dar por finalizado el tema de los formularios y recordad que siempre os dejo un link a la documentación oficial para que podáis revisar todo el contenido así que dejo el vídeo por aquí y nos vemos en la siguiente sección ah [Música] en esta sección os quiero hablar sobre el contenido embebido sé que de primeras es una palabra un poquito rara pero el contenido embebido es todo aquel contenido que nos traemos desde fuera eso va a incluir imágenes vídeos audio y todos esos archivos que nos traemos que no forman parte de nuestro código pero que sí tienen que formar parte de nuestro sitio web estos archivos suelen ser los que más peso o más tamaño añadir a un sitio web si nosotros cogemos cualquier web y le quitamos todas las imágenes seguramente la web ps muchísimo menos de la mitad los más conocidos son los que os comentaba imágenes audio vídeo y los hay frames que los hay frames como tal no serían contenido embebido pero como es contenido que nos traemos desde fuera os quiero hablar de ellos en esta sección la primera parte de la sección la quiero dedicar a las imágenes que son las que más se utilizan y las que más problemas suelen traer lo más importante que tenéis que saber sobre las imágenes es que tenemos dos tipos de imágenes se podrían clasificar en dos tipos generales por un lado tenemos las imágenes vectoriales que vamos a hablar de ellas en los siguientes vídeos no os preocupéis y el formato que tienen estas imágenes son svg que es el kers es que se recomienda siempre que se pueda es cierto que hay muchas ocasiones en las que no podemos usar una imagen vectorial pero todo el tema de logotipos e iconos de redes sociales y todas esas cosas si se pueden conseguir con ese eje y estas imágenes la ventaja que tienen es que no añaden nada de peso a nuestra web entonces en los siguientes vídeos vamos a ver cómo trabajar con svg y por otro lado tenemos los mapas de bits que son las imágenes que todos conocemos que son los jpg los png que suelen ser de 8 o de 24 hay dos tipos y los png se utilizan siempre y cuando se necesiten transparencias por otro lado tenemos los gif que si se necesita una imagen animada normalmente se suele recurrir al formato gif y por último tenemos el formato webp que es un formato que ha sacado google hace poco relativamente y este es el formato más recomendado siempre y cuando se trate de una imagen que no sea vectorial es muy recomendable que todas vuestras imágenes las convirtáis a web para subirlo a una web hay navegadores antiguos que no soportan huéspe y también os voy a enseñar a hacer lo que se denomina un fullback que si la palabra os suena rara es simplemente decirle al navegador usa esta imagen en formato webp y si no la entiendes pues entonces usa esta otra y esa otra pues ya se la daremos en jpg en png y gif según nos haga falta la gran ventaja del huésped aparte de que pesa muy poco es que admite tanto transparencias como animación es decir que jpg png y gif lo podemos convertir a web sin ningún tipo de problema así que en el siguiente vídeo os voy a enseñar cuál es la diferencia entre las imágenes vectoriales y las imágenes de mapa de bits para que veáis que las distintas cosas que se pueden conseguir y cuando os va a convenir más utilizar un tipo u otro ah [Música] en este vídeo quiero enseñaros la diferencia entre un svg y una imagen de mapa de bits para ello tengo aquí tres imágenes tengo esta que me hicieron es un dibujo de mi gata después tengo esta que es el dibujo de mi gato con menos resolución para que veáis cuál es la diferencia y después tengo también mi logo que le tengo a poca resolución para que veáis el resultado las tres son imágenes de bits y como veis cuando hacemos zoom pues empiezan a perder calidad esto pasa con todas las imágenes que no sean vectoriales incluso con esta que tiene bastante calidad si hacemos zoom pues hay un momento en el que se empiezan a difuminar los bordes y aparecen los bordes cerrados y todo eso entonces para que veáis la diferencia tengo esta herramienta de aquí que es una herramienta de pago y es online pero para enseñaros cuál es la diferencia y cuáles son las ventajas del svg me sirve perfectamente voy a primero el logo y lo voy a arrastrar aquí y como veis se pone a cargar la imagen la analiza y la esta victoria ando y ahora mismo si aquí hacemos zoom como veis con los svg o con las imágenes vector izadas eso no pasa como veis estos bordes cerrados aquí no existen y este tipo de imágenes por mucho zoom que hagamos nunca van a perder su calidad vamos a probar con esta que tiene un poco menos de calidad y vais a ver que el resultado es un poquito peor pero aún así es un resultado bueno evidentemente cuanto mayor calidad tenga la imagen mejor va a ser el resultado vectorizado pero es muy importante que este tipo de imágenes las 6 sólo en los casos que os hagan falta porque no todas vais a poder vector izarlas pero todo el tema de logotipos de la web en las redes sociales todo ese tipo de iconos e imágenes sencillas las podéis vector izar y como veis el resultado es bastante bueno si venimos aquí al ojo pues veis una gran diferencia si hacemos zoom en la imagen original versus el vector izado y por último para que veáis un buen resultado de calidad voy a esta imagen que como veis es bastante grande tiene 900 x 900 casi y esta como es bastante más grande y tiene mucha calidad el resultado sí que va a mejorar entonces vais a poder ver un svg bastante bien conseguido teniendo en cuenta que este programa o este esta aplicación lo hace automáticamente la verdad es que el resultado yo es el que mejor encontrado de todas las herramientas que he utilizado para vector izar esta web es la que con la que más contento estoy vamos a ver si termina que ya le queda poquito y vais a ver por ejemplo en el ojo la gran diferencia de un resultado a otro si nosotros hacemos zoom aquí y veis el ojo cuando arrastro sí que pierde calidad pero eso es porque tiene que recalcular pero en cuanto suelto como veis el resultado es bastante bueno es prácticamente perfecto entonces por qué pasa esto con los elementos vectorizado aquí tengo esto abierto y lo que tenemos aquí es un svg es un formato de archivo vectorial que solo se puede abrir en un navegador y como veis esto es la imagen realmente no es una imagen como estamos acostumbrados simplemente son coordenadas que le estamos dando al navegador para que pinte entonces eso es algo que nos va a permitir que la y que la imagen de svg nunca pierda calidad porque es el propio navegador el que calcula dónde tiene que pintar en función del zoom que hagamos así que mi recomendación es que siempre que vayáis a trabajar con logotipos iconos de redes sociales u otro tipo de iconos que no sean relevantes para la web y con los no quería decir imágenes con cualquier tipo de imagen en los que el contenido no sea relevante que simplemente sea de adorno en esos casos yo os recomiendo que utilicéis svg porque esto de aquí no añade peso a la web entonces todo lo que podáis ahorrar os de tamaño de web que os va a venir muy bien entonces os voy a dejar el link este de esta página que ya os digo que es un servicio de pago cuesta creo que son nueve o diez euros que donde estaba aquí descargar svg son 9 95 dólares al mes pero si trabajáis con esto pues os compensa en el siguiente vídeo vamos a ver cómo trabajar con imágenes que no pueden ser vector izadas porque por ejemplo es una foto de una noticia o es una foto muestra una foto de unas oficinas o lo que sea que esas fotos no tenemos opción debe actualizar las porque tienen otro tipo de datos que no que no pueden ser vectorizado entonces os voy a enseñar cuál es la mejor opción para ese tipo de imágenes y que podáis optimizar tanto el tamaño de la web como el tiempo de carga para esos casos ah [Música] en el vídeo anterior ya hemos visto cómo trabajar con svg y por qué son la mejor opción cuando no queremos perder nada de calidad en este quiero enseñaros cómo funcionan las imágenes de mapa de bits si nosotros hacemos zoom en una imagen normal el hecho de que sé de que aparezcan estos bordes cerrados y todo eso es porque estas imágenes están compuestas de píxeles es decir cada cuadradito de éstos es un píxel y a mayor tamaño de imagen más píxeles tenemos entonces el trabajar con estas imágenes aparte de añadir peso a nuestra web porque esto sí son imágenes no son como las imágenes vectoriales éstas se añaden peso y cuanto mayor resolución tenga la imagen mayor peso va a añadir a nuestra web entonces os quiero contar cuál es el formato adecuado para web para que podáis trabajar con el menor peso posible en el vídeo de presentación o xavi ha comentado que existían los png jpg y los gif los jpg son el formato más comprimido pero tiene el problema de que no soporta animaciones y tampoco soporta transparencias entonces si vuestra imagen ni tiene transparencias ni necesitáis que se mueva el formato adecuado sería el jpg después tenemos los png que como veis sí soportan transparencias aquí lo veis esto en blanco pero en realidad en la miniatura sí que se ve si se fuma aquí lo veis veis que no tiene nada más aparte de la cara del gato de ese dato en concreto y después tenemos los gif que si yo lo abro como veis esto sí soporta ser una imagen animada con movimiento esto es algo que no podemos conseguir ni con los png ni con los jpg y también nos había comentado que hay un cuarto archivo que es de google que es web aquí tengo esta web que lo que hace es convertir imágenes a webs con hace muchísimas otras cosas pero una de ellas es convertir las imágenes a webs y la ventaja de webs p aparte de que está mucho más comprimida la imagen sin perder apenas calidad es que soporta tanto jpg como png como gif entonces vamos a hacer una prueba vamos a mirar estas tres fotos vamos a darle a propiedades y como veis esto pesa 1 con 13 megas vamos a estas tres y las vamos a arrastrar aquí como veis carga las tres y le vamos a dar a iniciar conversión esto tarda relativamente poco en convertirlas ya está y ahora nos deja descargarlas y guardarlas entonces vamos a descargar esta primera esta segunda y esta tercera también tenemos la opción de descargar todo a la vez yo simplemente lo descargado por separado para que veáis que el formato es webp y el icono que aparece es el de navegador porque este es un formato que es para principalmente para web entonces esto por defecto se abre con un navegador vamos a darle aquí y mostrar en carpeta y vamos a las tres fotos convertidas y las vamos a poner en el escritorio como veis aquí son las mismas fotos aquí nos aparece con un fondo negro pero por eso no os preocupéis porque siguen teniendo la transparencia si nosotros seleccionamos estas tres y le damos a propiedades como veis esto pesa 657 katz es decir prácticamente la mitad de lo que pesaban las otras y la calidad es la misma si yo abro esto aquí y esto aquí y lo ponemos uno al lado del otro como veis la calidad es la misma prácticamente apenas ha perdido calidad y esto es exactamente lo mismo con el png vamos a abrir esto por aquí y este en web y como veis es lo mismo la calidad es la misma sin embargo esto pesa muchísimo menos tiene muchísimo menos peso porque solo esta foto son 125 casas pero la el formato webp pesa propiedades pesa 43 43 casas respecto a los 125 que pesa en png entonces esta es la mejor opción que podéis elegir para trabajar con imágenes que no puedan ser vectoriales os voy a dejar también el link del imagen online convert puntocom para que podáis convertir nuestras imágenes a web y de esa forma vais a poder ahorrar muchísimo peso en imágenes en una web en el siguiente vídeo vamos a empezar a trabajar ya con código para que veáis cómo meter imágenes dentro de un sitio web ah [Música] en este vídeo vamos a ver cómo introducir las imágenes tanto png jpg y gif y las web p dentro de nuestra página web para ello ya ha creado una carpeta y tenemos aquí el html y aquí dentro para que veáis cómo se estructura voy a crear una nueva carpeta que se va a llamar assets y dentro de esta carpeta es donde vamos a meter todo nuestro contenido externo tanto imágenes como vídeos fuentes si quisiéramos cambiar el tipo de letra audios y todo ese tipo de cosas externas y aquí dentro una nueva carpeta también que se llame imágenes y aquí dentro voy a arrastrar tanto las imágenes sin comprimir que teníamos como las de formato webp una vez que las tenemos dentro de nuestro de nuestro proyecto voy a lanzar el pre visualizador ya lo tenemos aquí y voy a poner esto a un lado y esto al otro como lo tenemos siempre voy a hacerlo un poquito más pequeño y aquí voy a poner un hace un lo que se ha contenido embebido y ya lo tenemos funcionando para usar las imágenes necesitamos la etiqueta img si nosotros escribimos img ya por defecto visual estudio code nos añade el atributo src que sería la ruta de donde está nuestra imagen y el atributo alt este atributo es obligatorio si no lo ponemos también funciona pero la w3c nos dará un error y nos dirá que este atributo es necesario ponerlo para el caso en el que no cargue la imagen o en el caso de que el usuario use un lector de navegador por el caso de ser invidente a lo mejor entonces adquiere src vamos a poner barra que ya sabéis cómo funcionan las rutas y dentro de esta barra vamos a poner assets contenido embebido barra assets barra imágenes y aquí podemos elegir cualquier imagen y nos la va a poner vamos a poner esta y como veis aquí aparece la imagen la imagen aparece muy grande voy a solucionar eso con css pero que sepáis que el tema de que la imagen se desborde y sea tan grande no es un tema de html aquí simplemente le voy a decir que todas las imágenes tengan un ancho máximo del cien por cien y de esta forma vamos a conseguir que no se desborde pero esto ya es tema de estilos esto no pertenecería a la parte de css html perdón podemos poner tanto esta imagen como cualquier otra si en lugar de aquí png yo pusiera web p como veis sería exactamente igual si ponemos un gif vamos a poner aquí imágenes vamos a poner a pikachu y como veis está todo correctamente en el atributo alt lo que tenemos que poner es la representación de la imagen o lo que queremos transmitir con esa imagen aquí por ejemplo sería pikachu bailando por ejemplo y con esto conseguimos que en el caso de que la imagen falle porque le hayan cambiado el nombre o la carpeta sea otra o esto lo estamos cargando desde un desde una nube o algo así y la imagen falle vamos a quitar aquí por ejemplo la f para que sea pikachu punto y pues con esto sigue saliendo un contenido aunque la imagen lo cargue entonces el atributo al que no se os olvide nunca ponerlo porque para que veáis la prueba voy a quitar alt vamos a venir al validador de la w3c y válida de direct input vamos a todo lo pegamos aquí creo que lo he pegado dos veces no vale téc y aquí nos dice que hay un error porque los elementos img deben tener un atributo alto excepto bajo ciertas condiciones para para que sea común ponedlo siempre las condiciones en las que no hay que poner el atributo alt son muy muy pocas entonces recordad poner siempre el atributo alt para que no tengáis ese tipo de fallo si yo vuelvo a poner esto selecciono todo lo copió venimos aquí pero borro pero por aquí todo esto fuera vuelvo a pegar ahora sí con el atributo alt le damos a check y como veis ahora está perfectamente validado lo que hemos escrito si quisiéramos trabajar con él con un svg tenemos dos opciones vamos a buscar aquí svg free para conseguir alguno en plata y con suele haber muchísimos iconos vectoriales que ayudan y que son gratis vamos a por aquí social y vamos a por ejemplo este de facebook podéis hacer botón derecho y guardar imagen como vamos a guardarlo aquí le damos a guardar y aquí ya tenemos recargar aquí los donde se ha guardado mostraron carpeta vale está en web de me lo voy a cortar lo de aquí contenido embebido assets imágenes pegar ya tenemos aquí nuestro icono de facebook y tenemos dos opciones podemos poner el ing al cual y aquí ponemos el 73 este que el auto completa ahí y aquí en alt pues en vez de picacho bailando vamos a poner el logo de facebook y lo tendríamos aquí y la otra opción es que si hacemos clic aquí como veis nos aparece pues todo el código necesario para pintar este icono todo esto deje son grupos que en esto no hace falta realmente ya haré en un futuro un curso de svg para que veáis cómo funciona y lo que podemos hacer es todo esto lo copiamos esto lo voy a comentar para que veáis la diferencia y lo pegamos aquí y como veis el resultado es exactamente el mismo en qué casos utilizar el svg así o de la otra forma que es así si vosotros necesitáis trabajar con él svg ya sea desde css o desde javascript para hacer algún tipo de programación o modificación de este svg en tiempo real necesitáis ponerlo así para poder acceder a él pero si sólo queréis poner el icono simplemente para que se muestre y darle un tamaño vamos a comentar esto por aquí no me deja porque ya está ya hay un comentario aquí voy a quitar esto de aquí comentó esto aquí vale y voy a ver comentar esta opción aquí el icono es muy grande si es lo único que queréis hacer es cambiar el tamaño no hay ningún problema porque podríamos poner aquí willis por ejemplo 30 píxeles para que solo mida 30 píxeles y ya estaría entonces siempre y cuando las modificaciones que vayáis a hacer sean únicamente de tamaño la opción más cómoda es ésta poner ls vg tal cual dentro de una etiqueta img pero si necesitáis ir más allá para cambiar colores animarlo o cualquier cosa que se os ocurra pues en ese caso seguramente si necesitéis pegar todo el código pero bueno esto es html y en principio esto sería algo bastante avanzado para vosotros así que mi recomendación si estáis empezando es que los svg los pongáis así siempre porque hasta que lleguéis a hacer modificaciones en una svg pues va a pasar algo de tiempo así que para no alargarme más voy a dejar el vídeo por aquí y en el siguiente vídeo vamos a seguir profundizando en los conceptos que necesitáis para trabajar con imágenes en web ah [Música] en este vídeo quiero hablaros sobre lo que es el device pixel rate ya que es algo muy importante cuando se trabaja en web y sobre todo cuando se trabaja para adaptar una web a un móvil cuando queremos hacer webs que sean lo que se denomina responsive es decir que se vean bien en un móvil el concepto de device pixel rate yo es muy importante este concepto representa la relación que existe entre los píxeles reales que tiene el dispositivo y los píxeles que tenemos disponibles para pintar o para dibujar contenido aquí os he dejado una página que es what is my view por the view port es una palabra que os tiene que ir sonando porque view x es el espacio que tenemos disponible para dibujar mi pantalla es de 1920 x 1080 entonces en cuanto al ancho veis que está bien que es 1920 pero el alto ya no es 1000 1080 es 969 y eso es por la distancia que tenemos desde aquí arriba donde termina la barra del navegador y a la parte de abajo entonces el trozo que se está comiendo el navegador es lo que falta aquí para los 1080 cuando nosotros tenemos este espacio para dibujar en móvil no sé no sé representa exactamente igual aquí como veis pone dpr 1 esto significa device pixel rate yo este es el tamaño natural de la pantalla la pantalla tiene 1920 píxeles x 1080 el espacio que tenemos disponible para dibujar es prácticamente el mismo eso significa que el device pixel rate yo es de 1 cuando trabajamos en un móvil esto no funciona así no suele ser uno en un móvil bueno de hecho nunca es uno en un móvil en un móvil normalmente estamos trabajando entre 2 con 4 2 con 6 y en algunos móviles incluso 3 o más de 3 para que veáis eso vamos a darle al botón derecho inspeccionar y en este icono de aquí como veis podemos convertir esto de una versión escritorio a una versión no vídeo aquí si seleccionamos el motogp 4 por ejemplo o el galaxy s 5 como veis el espacio disponible que tenemos para dibujar es 360 x 640 y esto es porque el device pixel rate yo es de 3 podéis hacer la prueba en vuestros móviles que aunque vuestros móviles sean full hd de 1920 x 1080 si os metéis en esta página vuestro device pixel rate yo seguramente esté entre 2 y 3 es lo más probable entonces con este concepto vamos a ver algunos ejemplos vamos a quitar la versión móvil y vamos a mover esto para un lado aquí voy a cargar la imagen esta que teníamos de portada contenido embebido a seis imágenes portada jpg por ejemplo para este ejemplo me da igual que sea jpg que was p hay un atributo que se le puede poner a las imágenes bueno dos realmente que le podemos poner width para establecer el ancho y le voy a poner 301 300 píxeles sólo 300 esto es algo que no es recomendable hacer vale existe el atributo width y el atributo height para el alto pero no es recomendable usar esos atributos para darle tamaño a la imagen desde el html eso es algo que se debería hacer desde css hay algunos casos en los que sí tenemos que establecerlo en la html pero son casos muy concretos y es cuando las imágenes son dinámicas y las cargamos desde javascript entonces para para el nivel en el que estáis si estáis empezando el atributo width y el atributo height queda prohibido entre comillas para el html yo lo voy a poner simplemente para para daros un ejemplo aquí la imagen mide 300 píxeles que es lo que yo le establecido entonces aunque yo haga esto más grande la imagen va a seguir midiendo 300 píxeles voy a poner el zoom a uno para que veáis desde donde contamos y en teoría si el espacio que tenemos disponible en un móvil son 360 píxeles esta imagen se debería ver bien en un móvil ya hemos visto que el espacio disponible en un móvil son 360 píxeles entonces voy a pulsar otra vez efe 12 y vamos a colocar aquí 360 píxeles si lo veis ahí arriba 358 360 vale ahí aparecía cuánto cuánto tamaño había de ventana entonces si tuviéramos un device pixel rate yo en los móviles de 1 esta imagen se vería bien pero ya os he dicho que el device píxel rate yo de los móviles suele ser dos o tres entonces vamos a poner ese device pixel rate yo vamos a subir esto a 2 sólo dos vamos a comprobar esto y vice pixel rate yo aquí pone uno pero si recargo y no es porque esto no se recarga a la vez que que el contenido aquí la imagen se nos desborda y nos aparece este scroll de aquí para ya que estamos fingiendo porque estamos en un móvil voy a poner aquí lo que había puesto antes vamos a poner aquí style y aquí img max guys cien por cien con esto vamos a conseguir que la imagen no se desborde entonces aquí estos y ya que estamos fingiendo que estamos en un móvil esto es lo que pasaría en un móvil seguramente pero tenéis que tener en cuenta que tenemos una imagen de 1000 píxeles o de 1000 ciento y algo era reducida al tamaño para que se vea bien en el móvil incluso teniendo un device pixel radio de 2 que esto lo podríamos subir más lo podríamos subir a 2 con 5 y aún así la imagen nunca desbordaría y como veis la imagen se ve más o menos bien el problema que os quiero contar es que tenemos una imagen que pesa muchísimo que tiene un tamaño enorme y en un móvil no hace falta que tenga ese tamaño entonces este es un error muy común que se tiene en desarrollo web que es utilizar la misma imagen tanto para escritorio como para móvil podemos conseguir que se vea bien en un móvil igualmente el problema es que estamos utilizando tamaños de archivo demasiado grandes para el resultado final sería mucho más lógico tener una imagen de 1000 píxeles para la versión de escritorio y una versión de 200 o 300 para la versión móvil entonces eso es lo que os voy a contar en el siguiente vídeo pero necesitaba explicaros el concepto de device pixel rate yo y que entendiera es este concepto para saber por qué hace falta hacer eso así que en el siguiente vídeo vamos a ver cómo decirle al navegador que cargue una imagen u otra en función del dispositivo [Música] en este vídeo quiero que enseñaros cómo decirle al navegador que cargue una imagen u otra en función del device pixel rate y para ello lo que he hecho ha sido crear una versión de la imagen que tenemos de portada la he creado en versión móvil que lo único que he hecho ha sido reducir el tamaño si nos venimos a detalles como veis la imagen es de 300 por 168 respecto a la que teníamos que era de mil y pico que lo tenemos aquí de 1.147 por 642 entonces voy a estas dos imágenes y las voy a meter aquí dentro y lo que voy a hacer es decirle al navegador que cargue portada mobile si tenemos un device vix el rate yo más grande de 1 y si no que cargue la normal entonces para ello vamos a crear nuestra etiqueta img y en lugar de utilizar el atributo src lo que vamos a utilizar es el atributo r sc set y aquí dentro es donde me tenemos que dar un set de imágenes por eso se llama así src set es un set de sounds es decir un set de links de donde puede cargar las imágenes en función de una condición la primera yo quiero que sea contenido embebido y 2 así embebido barra assets barra imágenes barra portada punto de web p si yo dejo esto así y guardo como veis carga esta imagen y no como no tiene más de donde cargar pues carga está porque no hay más opciones después separado por comas vamos a decirle que cargue la otra entonces voy a copiar la ruta entera voy a pegar aquí y aquí le voy a decir portada mobile y para que lo veáis más claro voy a hacer aquí un par de intros aquí para que tengáis los dos por separado voy a ocultar esto para que quepa todo en una línea y esto lo dejo así vale l'alt manos sube arriba porque cabe si yo aquí recargo como veis sigue cargando está y da igual que yo le dijera que cualquier tipo de condición porque esto es un problema entre comillas que en realidad no es un problema que tiene chrome lo que hace chrome es optimizar para él para el comportamiento entonces una vez que ha cargado la imagen ya va a cargar siempre la primera que se encuentra si yo esto lo cambiara de orden y aquí pusiera mobile y aquí cortada a secas así pues no carga nada porque aquí me equivocado y no exportada público mobile exportada lyon mobile guardo y como veis está cargando esta primera y aquí podemos recargar un montón de veces que va a dar igual porque no va a entrar a cargar esta imagen vamos a ver cómo dar condiciones para que cargue una u otra vamos a poner aquí portada mobile y arriba vamos a dejar portada a secas guardamos y tenemos ésta para decirle que en función del device pixel rate yo cargué una u otra lo que podemos hacer aquí justo después de el link de la imagen vamos a decirle que esto lo cargue con 3x esto significa que si tiene un device pixel ratio de 3 va a cargar esa imagen yo ahora aquí recargo y como veis tiene esta vamos a abrir e inspeccionar y vamos a ir a la pestaña network yo ahora aquí recargo y como veis está cargando portada web pe vamos a aumentar el device pixel rate yo a 3 vamos a subir hasta 300 ahora recargo y como veis la que ha cargado es portada mobile eso es porque aquí le hemos puesto 3x si yo le pusiera 2x cargaría antes incluso vamos a recargar y ésta está que está cargando la de móvil vamos a bajar esto a 125 por ejemplo recargamos y carga esta vamos a subir lo vamos a subirlo a 2a y esto sería justo un disco device píxel rate yo de 2 recargamos y como veis carga la de móvil entonces esta es muy buena forma de optimizar el contenido que se va a cargar para móvil o para escritorio porque si os dais cuenta vamos voy a minimizar el visual studio code y voy a hacer esto más grande para que tengáis disponible toda la información que no tan grande haber ahí y aquí os pone el tamaño de la imagen vamos a bajar a tamaño escritorio y recargamos y como veis estos son 45 casas lo que nos está diciendo esta ventana es el contenido que se está descargando para ver la la web entonces como veis esto lo único que tiene son 45 6 casas transferidos luego hay alguno más de html y tal pero lo principal es el peso de la imagen que son 40 y 56 si nosotros estuviéramos en un móvil que sería un device mix el rate yo de 2.5 por ejemplo y recargamos como veis el tiempo de transferencia se reduce muchísimo porque lo único que tiene que cargar son 18 8 casas evidentemente en una página web vamos a tener más de una imagen pero de todos los puntos donde podamos quitar contenido y peso a la web todo eso va a ayudar a que la web cargue más rápido el contenido esté bastante más optimizado entonces esta es la mejor forma que tenéis para optimizar el contenido en función del device mix el reiki o además vamos a volver a visual studio code además en el caso de que el navegador no soporte esta imagen podéis añadir otra condición y decirle aquí no lo voy a copiar el link para que en el caso de que no soporte huésped vamos a quitar esto y aquí le decimos portada jpg y en el otro sitio le decimos copiamos aquí ponemos aquí me falta una coma aquí pongo una coma pongo esto el alt sí que necesita contenido ya sabéis que es obligatorio vamos a poner imagen de portada por ejemplo para que tenga un contenido semántico interesante y vamos a abrir por ejemplo internet explorer que no soporta web entonces internet explorer venimos aquí vamos a copiar esta url y ya sé que puedo usar hecho pero hecho si soporta huéspe así que no me interesa venimos aquí y como veis pone imagen de portada esto está pasando por dos cosas principales una es que huésped no lo soporta pero es que internet explorer tampoco soporta el atributo rss set entonces para esos casos conviene añadir el atributo src que ya conocemos esto ya limita un poco las opciones que tenemos porque en src no podemos poner estas estas condiciones pero sí que podríamos tener una especie de copia de seguridad para que en el caso de que no pueda cargar nada cargué esto entonces guardamos y como veis sí que carga una imagen la optimización en internet explorer es un infierno ya os lo digo pero esta es la mejor opción que tenemos añadir el src para que en el caso de que el navegador sea muy antiguo y no soporte web puede osa web src set ni web p pues que tenga una especie de copia de seguridad para que cargue algo en el siguiente vídeo lo que vamos a ver es cómo cargar imágenes en función del ancho de la pantalla eso nos va a servir no sólo para controlar en móviles y en tablets sino también para el tamaño de la ventana para que pueda cargar más rápido en función de cuánto mira la pantalla y en esos casos si vamos a tener alguna opción más pero esta es bastante interesante sobre todo para navegadores nuevos y quería que la vierais entonces voy a dejar el vídeo por aquí y en el siguiente vídeo vamos a ver cómo establecer imágenes en función del ancho de la pantalla ah [Música] en este vídeo quiero enseñaros otra forma de hacer lo que hemos hecho en el anterior pero con una tecnología un poquito más moderna y que a día de hoy sigue siendo experimental todavía no está confirmada del todo pero ya lo soportan todos los navegadores principales entonces como ya se soporta al completo salvo internet explorer que se lo va a volver a soportar nada quitando internet explorer el resto el resto lo soportan todos así que vamos a mirarlo la etiqueta que os quiero enseñar es picture y básicamente funciona exactamente igual que el atributo rss pero nos da más opciones podemos elegir más cosas dentro de la etiqueta picture tenemos que meter la etiqueta source aquí y dentro de eso es lo que vamos a meter es cada uno de los shows que queremos entonces nosotros podríamos copiar este src ese set y voy a copiar hasta aquí por ejemplo y voy a poner las comillas de cierre guardamos y aquí en principio no funciona y da igual que recargamos porque no se va a ver nada cuando usamos la etiqueta picture tenemos que poner el fullback o la copia de seguridad de forma obligatoria igual que aquí hemos puesto emails src o sea el atributo src dentro de la etiqueta pictures tenemos que poner la etiqueta email y aquí le damos el show que va a ser nuestra copia de seguridad en este caso portada jpg guardamos y ahora como veis sí que ha funcionado si abrimos lo que teníamos abierto antes y recargamos como veis no está cargando portada jpg sino que está cargando el huésped pero no va a funcionar hasta que no tenga la etiqueta img porque si detecta que no tiene una copia por si acaso no hace nada entonces vamos a minimizar esto y vamos a ver qué más podemos hacer con la etiqueta shows vamos a comentar esto esta de aquí arriba la vamos a comentar y vamos a usar otra etiqueta source source aquí vamos a poner el src ese set osea r src set y vamos a esta imagen de aquí por ejemplo vamos a ponerlo aquí y vamos a utilizar el atributo mir ya con esto entre paréntesis le podemos decir cuál es el ancho que queremos que funcione vamos a decirle aquí por ejemplo un ancho mínimo min wef d la imagen media 1200 o 1100 vamos a poner 1200 píxeles y ahora mismo lo que va a hacer es cargar esta imagen si mi de 1200 entonces aquí voy a poner por cada móvil mejor para decirle que a partir de aquí cargue está aquí en chrome si yo hago esto como veis funciona vale esto es muy importante que lo tengáis en cuenta por aquí va cargando ahí arriba veis el número que tiene 1050 1100 y cuando lleguemos a 1200 va a cargar la imagen de móvil que pasa que lo he puesto al revés yo no quería poner mi wifi o sea he puesto a mi güiza propósito pero no es lo que quería poner de lo que quería era que esto funcionara al revés entonces con 1200 carga esta imagen pero si bajamos de 1200 como veis carga la de móvil esto evidentemente es un ejemplo muy muy brusco pero que sepáis que con esto podemos establecer lo mismo que teníamos con con el atributo src ese set web bueno este atributo que teníamos dentro de la etiqueta img lo podemos utilizar pero que además tenemos más opciones y también tenéis que recordar que es muy importante el ing porque si no lo ponemos nada de lo que hagamos va a funcionar podemos hacer esto todo lo grande que queramos que no va a parecer una imagen en ningún momento adés comentar y así tenemos la imagen de móvil y cuando estemos en algo más grande pues ya tenemos la de escritorio además esto también nos sirve para hacer lo mismo que habíamos hecho antes que aquí me he equivocado y este lo debería ser web p debería ser jpg os lo voy a dejar aquí arreglado y podemos establecer dentro del shows la propia copia de seguridad es decir aquí debajo nosotros podríamos esto de aquí copiamos ponemos una coma pegamos y aquí le decimos jpg y de esta forma en el caso de que el navegador lo soporte src ese set o web p pues vamos a tener siempre una imagen de fullback y también vamos a tener sólo en el caso en el que web no funcione pues vamos a tener la de jpg para que también carne entonces de esta forma estamos más o menos cubiertos ante todas las situaciones sé que alguno me va a preguntar que cuál es mejor utilizar si lo de img o lo de picture la cuestión es depende normalmente se utiliza más pinchos porque ofrece más opciones eso es lo más normal pero puede que en algún caso picture no se soporte por el navegador pero si se soporte mg entonces esto ya es dependiendo del caso ya os digo que por norma general lo que se suele utilizar es esto porque te da más variedad y más juego para las cosas pero he llegado el caso en el que he dicho nos sirva pues tenéis imc para jugar con ello también que sepáis que dentro de shows src set también podéis utilizar los 2x los 3x y todo eso aquí simplemente no lo he puesto porque quería que vierais el atributo media pero todas las opciones que hemos utilizado en img src se las tenéis disponibles dentro de shows src s src set dios mío qué difíciles de pronunciar esto así que en el siguiente vídeo vamos a ver cómo trabajar con audio para que veáis más opciones de contenido embebido de imágenes ya no os voy a contar nada más así que en el siguiente empezamos a trabajar con audio ah [Música] en este vídeo vamos a ver cómo introducir audio en nuestros sitios web para ello lo que voy a hacer para empezar es comentar esto para que no nos estorbe y esto lo voy a comprimir así dándole a la flecha para tener más sitio aquí en las etts ya he creado una carpeta audio y dentro tengo una canción en mp3 para introducirlo lo único que tenemos que poner es la etiqueta audio y como veis al igual que las imágenes tienen un atributo src que es el que le va a decir de dónde tiene que la canción entonces aquí vamos a poner contenido embebido assets audio o mi mp3 si aquí guardamos no aparece nada en absoluto no vemos ni un reproductor ni nada parecido para poder ver eso tenemos que utilizar el atributo controls que es un atributo booleana si nosotros guardamos como veis ahora si aparece esto y si hacemos clic en el play pues la canción se empieza a reproducir sin problemas tenemos más atributos que podemos incluir en la etiqueta audio como por ejemplo auto play que con esto lo que conseguiríamos es que la canción empezará automáticamente al cargar la página pero existe un problema con el auto play que es que los navegadores actuales están bloqueando todo el auto play siempre y cuando el contenido no esté silenciado es decir si el contenido puede molestar al usuario con audio el auto play automáticamente se desactiva es posible que todo esto en locales funcione pero cuando estemos en un dominio real y con un contenido en una url que no sea el local esto es muy probable que os falle si no tenéis en cuenta el tema del auto play se le puede añadir también el atributo mute que sería para tener el contenido silenciado y de esa forma el auto play no se bloquearía esto es lo que pasa por ejemplo con instagram que podéis tener los vídeos reproduciéndose según hacéis scroll pero no se escuchan necesitáis hacer click para que se escuchen entonces siempre y cuando el contenido esté en silenciado se puede tener el vídeo o el audio reproduciendo en el siguiente vídeo vamos a ver cómo trabajar con la etiqueta de vídeo porque de audio realmente esto es lo único que os puedo contar no hay mucho más contenido así que en el siguiente vamos a ver como trabajar con elementos de vídeo a [Música] en este vídeo vamos a ver cómo trabajar con la etiqueta vídeo y vais a ver que es muy similar a la etiqueta audio aquí ya me ha bajado un vídeo sin copyright y aquí en el src vamos a poner la ruta pueda ser contenido en movido assets vídeo crouch the band guardamos y si miramos esto pues tenemos el mismo problema que teníamos al principio con el audio que no podemos ni reproducir ni cambiar el volumen ni nada de eso para ello necesitamos el atributo controles exactamente igual que con el vídeo o sea con el audio perdón y de esta forma pues ya veis que aparece un reproductor de vídeo más acostumbrado a lo que estamos voy a hacer una cosa aquí que esto no es parte del curso pero es simplemente lo mismo que hacía con las imágenes para decirle que no que no se desborde entonces vamos a decir y más wef 100% y así tenemos el vídeo sin que haya scroll voy a quitar esto también para tener un poco más de sitio y los controles que tenemos a los controles los atributos son prácticamente los mismos podemos poner auto play y el vídeo empezaría así también tenemos el atributo nuts lo que pasa es que este vídeo en concreto no tiene audio pero podríamos ponérselo y el vídeo aparecería silenciado en el caso de que tuviera audio voy a dejar por aquí para que sepáis que este atributo es posible de hecho si veis aquí con ese atributo se tacha el símbolo del altavoz también tenemos el atributo loop que nos lo había contado en audio pero también lo tenemos disponible en audio que sirve para que en el caso de que termine se vuelva a reproducir desde el principio esto es algo que también tiene puesto instagram para que el vídeo una vez que termine vuelva a empezar desde el principio y por último un atributo que no tiene el audio por motivos que ahora veréis voy a quitar el auto play es el atributo póster esto sirve para decirle cuál va a ser nuestra imagen inicial lo que sería la miniatura si habláramos de youtube aquí podemos poner contenido embebido assets emails y vamos a poner por ejemplo portada jpg guardamos como veis aparece esto como póster y una vez que le damos al play empieza a reproducirse el vídeo ya desde el primer frame entonces con póster podéis controlar qué se va a ver antes de que se reproduzca el vídeo si pusiéramos el auto play que por eso lo he quitado no se llega a apreciar muy bien la imagen como veis aquí aparece eso durante medio segundo y empieza la reproducción del vídeo entonces esto es lo que os quería comentar sobre la etiqueta vídeo y en el siguiente vamos a hablar sobre los i frames o iframes que seguramente nunca tendrá tengáis que escribir uno de vosotros pero si os servirá para aprender a insertar contenido en vuestro en vuestra web desde sitios externos ya sea youtube vista grabé spotify o cientos de sitios que nos permiten un iframe y montarlo dentro de nuestra web pero eso ya os digo que os lo cuento en el siguiente vídeo [Música] en este vídeo quiero hablaros sobre los hay frames y lo que son básicamente un iframe es una web e introducirla dentro de la nuestra para que veáis cómo se utilizan los hay frames porque vosotros seguramente nunca tengáis que escribir uno a mano siempre los vais a utilizar para contenido de otro sitio e insertarlo en vuestra web os voy a poner el ejemplo de youtube aquí tenéis un botón de compartir y si le dais la primera opción que os sale es insertar al hacer clic youtube nos proporciona un iframe entonces si copiamos esto y lo pegamos aquí guardamos esto ya lo podemos cerrar y como veis aparece el vídeo esto no pasa solo con youtube pasa con facebook con instagram con spotify con un montón de páginas que os dan componentes para para vuestra web ya sea formularios slide de fotos menús hay muchísimas plata que proporcionan un iframe para que vosotros lo utilizáis en vuestra web el problema que tienen los hay frames principalmente vamos a darle a inspeccionar es que si vemos lo que tiene dentro un iframe vamos a bajar aquí y abrimos este iframe como veis dentro tenemos un dock type html tenemos un xerez un body o sea básicamente tenemos youtube insertado en nuestra web eso a la hora de carga de página y tratamiento de recursos y todo eso implica muchísimo más tiempo de carga aquí no porque estamos en local y básicamente estamos cargando solo un vídeo pero si os dais cuenta al recargar esto se queda negro un rato y después carga el sitio básicamente tiene que traer youtube para insertarlo aquí entonces no es buena idea abusar de los hay frames porque van a ralentizar mucho la carga de nuestro sitio web de hecho aquí como veis sólo para traer esto ha tardado son 2,3 megas y ha tardado casi dos segundos y eso teniendo en cuenta que sólo tenemos un iframe entonces como seguramente vosotros no tengáis que escribirlo nunca si en algún momento os hace falta traer un vídeo de youtube o cualquier cosa que sepáis que esta es la forma de hacerlo todos los atributos que aparecen son propios de los hay frames que tenéis la documentación oficial en el en la descripción para que lo veáis pero si yo quitara esto que sepáis que los atributos básicos son el ancho y osael si el ancho y el alto para saber el tamaño del marco que tiene que hacer y el src que también es obligatorio para decirle de dónde se trae ese iframe una vez que tenéis eso ya podéis insertar vuestro contenido en vuestro sitio web de aquí no os voy a explicar nada más sobre los hay frames podéis echar un vistazo a la documentación oficial si tenéis alguna duda o queréis investigar un poquito más pero ya os digo que no es buena idea sobrecargar una web con hay frames principalmente por el peso extra que le estáis añadiendo así que voy a dejar este vídeo por aquí y en el siguiente vamos a ver la última parte de esta sección que es la etiqueta vigor ah [Música] en este vídeo vamos a hablar sobre la etiqueta picture esta etiqueta hasta antes de empezar a grabar el curso yo pensaba que era solo para imágenes porque habitualmente solo se ve con imágenes pero según la documentación esta etiqueta sirve para meter contenido relacionado pero que es opcional que éste es decir si lo quitamos el artículo que estuviéramos leyendo sigue teniendo sentido esto es algo que hemos visto en cientos de páginas y os voy a poner un ejemplo vamos a crear aquí un pequeño artículo vamos a suponer que estamos hablando de gatos bueno aquí esto sería un h2 porque ya tengo un h1 vamos a poner aquí un p por ejemplo con un loro y otro p voy a copiar esto y lo pegamos debajo nosotros tenemos aquí contenido que está hablando sobre gatos y en un momento determinado vamos a meter una imagen de un gato que no tiene nada que ver con el artículo pero que rellena contenido y que está relacionado entonces vamos a poner figura y aquí dentro es donde meteríamos nuestra imagen vamos a poner y mgm en el src voy a este gato que buscado y lo vamos a poner aquí para copiar dirección de la imagen y ponemos esto en el alto voy a poner el gato tumbado por ejemplo esto ya no me hace falta y también voy a poner que la imagen no se desborde así que voy a poner que también esto afecte a los img ahí está y debajo seguiríamos escribiendo nuestro artículo por aquí habría que hacer un sección o un artículo cosas así pero la parte relevante de esto es que os fijéis en el uso de figure si estuviéramos hablando por ejemplo de los datos de una empresa estuviéramos escribiendo un artículo sobre una empresa y sobre las ganancias que ha tenido ese año podríamos poner un gráfico o podríamos poner una tabla con datos y después continuar el artículo es decir figure se utiliza siempre que se quiera romper el flujo del contenido con un contenido relacionado pero que no es necesario para la interpretación del artículo es decir que si lo quitamos seguiría funcionando en temas de códigos y estamos hablando sobre html o sobre css o lo que sea los fragmentos de código como no son obligatorios que no forman parte del artículo como tal también deberían ir en una etiqueta figure también tenemos de forma opcional esto no es obligatorio la etiqueta pit caption que es simplemente para ponerle un texto a la imagen aquí podríamos poner el gato común el gato como un tumbado y como veis esto aparece aquí si está este ficción cortáramos y lo pusiéramos por encima de la imagen pues saldría arriba lo más habitual es verlo debajo pero que sepáis que esto se puede colocar tanto arriba como abajo digamos que esto sería como el pie de foto entonces esta etiqueta que sepáis que aunque habitualmente se ve como imagen o sea que se que se ve su uso en imágenes no es obligatorio hacerlo con imágenes ya os digo que sirve tanto para tablas como para gráficos fragmentos de código en una cita si queréis incluir cualquier cosa que sea contenido relacionado pero que sea opcional su presencia que se pueda quitar y el artículo siga teniendo sentido así que con este vídeo cierra la sección y en el siguiente tendréis la sección de las etiquetas meta y de algunas cosillas que van incluidas en el jefe pero que no he mencionado hasta ahora así que con este vídeo despido la sección y nos vemos en la siguiente [Música] en este vídeo quiero hacer un poco de hincapié sobre el jefe y las etiquetas meta que no habíamos visto hasta ahora de momento habíamos visto sólo el meta charset que era para la codificación y el title que era el título que aparece aquí en la pestaña y lo que va a ver el usuario cuando busque cuando vaya navegando entre nuestras páginas después tenemos este meta de aquí que respecto a html no es relevante porque esto lo único que permite es que cuando trabajamos con diseños que se adaptan a móviles esto permite que funcione eso si esta etiqueta no la tuviéramos todo el tema de adaptabilidad de nuestro sitio web no funcionaría entonces usando esta como referencia quiero que veáis que la mayoría que vais a encontrar van a tener un name y un content la mayoría de etiquetas meta van a tener eso un name que hace referencia a qué tipo de metadatos le estamos dando al navegador y cuál es el contenido de ese meta dato hay uno bastante importante que es el meta descripción vamos a buscar aquí en google un ejemplo para que veáis a lo que me refiero vamos a buscar aquí m de n y aquí por ejemplo veis que aparece el sitio mtn bla bla bla bla bla todo esto de aquí es lo que deben tener escrito en el meta descripción vamos a abrir esto en una ventana nueva botón derecho ver código fuente de la página y aquí con control f voy a buscar descripción the script tierno ese no es aquí lo tenemos justo aquí tenemos una meta name descripción y un content y aquí pone el sitio mdm web those proporciona información y eso es lo mismo que tenemos aquí m de web 2 proporciona información entonces este meta conviene ponerlo para que pongáis la información de vuestro sitio web que queráis que aparezca cuando se busca vuestro sitio web entonces aquí vamos a poner meta con el atributo name que sería descripción y después un content donde podéis poner pues toda la descripción del sitio yo voy a poner un lord en simplemente para que haya algo de contenido y voy a la primera frase por ejemplo solo y así nos quedaría este meta visual studio code nos ayuda bastante porque si escribimos meta como veis aquí ya nos están apareciendo opciones si nosotros ponemos meta dos puntos vp pues como veis nos auto completa el meta view por si ponemos meta dos puntos desk nos aparecería el metano en descripción que se acaba acabamos de escribir también tenemos el meta autor por ejemplo vamos a poner aquí una etiqueta meta the name vamos a poner autor y como contenido se pondría quién es el dueño de la web o quién ha construido la web y en mi caso por ejemplo podría poner theory and the things y sé que está mal escrito que muchos me lo seguís diciendo soy consciente de que esto se escribe al revés que es gm entonces estas son algunas de las metas que os quería contar pero vamos a seguir viendo que más cosas se pueden poner en el head porque aparte de las etiquetas meta también hay ciertas opciones como poner un favicon que sería este icono que veis aquí arriba y eso os voy a contar cómo funciona en el siguiente vídeo así que nos vemos en el siguiente [Música] en este vídeo vamos a ver cómo construir nuestro favicon para ponerlo en la pestaña aquí justo arriba donde aparece esta bola del mundo pues que aparezca nuestro icono he visto por ahí en páginas y en algunos cursos que lo que os dicen es que pongáis simplemente no metano favicon que es este de aquí aquí pongáis la ruta a la imagen y ya está y con eso ya aparece y eso es cierto siempre y cuando estéis usando un navegador actualizado y no estáis visitando la página desde un móvil o desde cualquier otro sitio donde eso que estáis haciendo no funciona entonces para hacerlo bien y que veáis cuál es la forma correcta de establecer el favicon vamos a venir a esta página que es favicon guión generator punto o hereje aquí donde pone imagen te pide que selecciones un archivo yo voy a a nada por ejemplo y aquí tenemos dos opciones que nos genere sólo un favicon punto y ccoo de 16 x 16 o que nos genere todos los iconos que hacen falta para web para android para microsoft para apple y todo eso entonces vamos a darle aquí a create favicon y como veis aquí ya nos permite descargar lo que se ha generado y nos da una serie de etiquetas para nuestra cabecera vamos a darle a descargar aquí ya lo tenemos voy a abrir esto y como veis tenemos todos estos iconos disponibles vamos a minimizar el visual studio con zoom momento vamos a venir a la carpeta del curso meta y aquí dentro voy a crear una carpeta me ponga para beatles y aquí dentro voy a arrastrar todos los iconos que nos ha dado esta página vamos a poner aquí dentro de favicon todo esto ya lo podemos cerrar vamos a volver a visual studio code y como veis ahora dentro de falcons tenemos todos estos links o sea todas estas imágenes perdón esto no es cerrado y no tenía que haberlo cerrado [Música] aquí vamos a todo esto que nos da copiamos con control c y lo pegamos aquí debajo de momento lo voy a guardar porque quiero que veáis que os fijéis en esta pestaña de aquí donde está la bola del mundo y si yo ahora guardo y recargo aquí debería haber vale vale vale vale no está funcionando porque yo he metido dentro de una carpeta para bitcoins entonces lo que voy a hacer es cambiar esa ruta para que veáis cómo se cambia dado que tenemos un montón de rutas que cambiar en visual studio code vamos a hacer el control h que sería buscar y reemplazar y como veis aquí en las pruebas yo ya lo he hecho y tenemos el campo para buscar y el campo para reemplazar aquí esto está mal puesto porque no sería barra favicon sería favicon secas y si buscamos h ref igual comillas como veis se nos marcan todos los h ref igual comillas y yo lo quiero sustituir eso mismo por hr igual comillas favicon sse entonces vamos a ir sustituyendo uno por uno aquí podemos poner reemplazar o reemplazar todo yo le voy a hacer clic en reemplazar para que veáis el primero y como veis lo que nos queda es favicon se barra a pelay con 57 57 podemos ir uno por uno haciendo clic para que aparezca esto o podemos hacer clic directamente en reemplazar todo si yo ahora le doy a reemplazar todo va a haber un problema porque esto sigue siendo una coincidencia y lo que va a hacer es ponerme favicon es dos veces así que aquí voy a añadir una barra para que sólo coincidan los que empiecen por hr igual comillas barra vamos a dar a reemplazar todo y como veis como veis se ha hecho mal vamos a deshacer porque después de fabi cons yo necesito que me ponga una barra para que quede igual que esto favicon se barra y el nombre que tiene ahora así reemplazar todo ahora sí que está bien favicon es barra y el nombre del icono que quiero seleccionar vamos a cerrar esto que ya no hace falta y si hago clic bueno si yo hago control s para guardar como veis ahora si ha aparecido aquí el icono de nahla lo más importante de esto es que aunque tengamos un montón de etiquetas aquí para nuestro favicon si nosotros pulsamos f12 nos venimos aquí a la pestaña network para ver qué es lo que se está cargando exactamente igual que hicimos con el tema de las imágenes y le damos a recargar como veis solo está cargando el favicon de 32 x 32 este es el único que necesita para chrome en este caso si yo abro es por ejemplo seguramente haga falta a otro porque como esto es de microsoft es posible que necesite otro tipo de falcón vamos a pulsar efe 12 vamos a buscar network recargamos y no es el mismo family con 32 por 32 vamos a mirar internet explorer que ese sí que es posible que necesite otro vamos a pegar aquí la url [Música] que dé espacio a internet explorer madre mía ahí pegamos voy a pulsar f 12 y aquí en red nunca ha depurado con internet explorer f5 para recargar imagino si vale y aquí tipo de contenido todos aquí no aparece la imagen es curioso es curioso aquí ni siquiera cuenta si está la imagen o no e imágenes no aparece ninguna el favicon no no entra dentro de su criterio en internet explorer qué cosa más curiosa pero bueno ya veis que aquí está apareciendo el el icono y estamos en internet explorer 11 entonces dentro de dentro de esto que hemos puesto también tenemos el soporte para internet explorer 11 de todas formas aquí estas últimas etiquetas estos son para temas un poquito más avanzados pero lo podríamos quitar y no habría ningún problema podemos volver a abrir internet explorer y esto seguiría funcionando y teniendo su icono sin ningún tipo de problema vamos a esto de aquí pero el link recargo si me quiere hacer caso porque internet explorer va a su bola y como veis sigue apareciendo el favicon sin ningún tipo de problema entonces en el siguiente vídeo quiero contaros cómo utilizar librerías de iconos porque es algo que sobre todo cuando se está empezando ayuda mucho saber cuál es la mecánica para incluir librerías de iconos así que eso es lo que vamos a ver en el siguiente vídeo [Música] en este vídeo quiero enseñaros a utilizar una librería de iconos que yo creo que es una de las librerías más usadas del mundo además también me va a servir para explicaros un poquito de teoría de lo que es un cdm aquí como veis pone cdn power & kids on line of code live final del one minute un cdn en términos generales es un servidor que tiene una copia de lo que nosotros estamos solicitando casi todos los las empresas de este tipo tanto font awesome google facebook twitter todas estas tienen distintas librerías que nos dejan utilizar de forma gratuita pues esas librerías se suelen guardar en un servidor y nos proveen un link para poder utilizarlas pero ese link no está apuntando a un solo sitio entonces lo que hay es muchísimas copias de servidores que se denominan servidores réplica que tienen la misma información todos entonces cuando nosotros hacemos una petición para descargarnos esa librería en este caso la librería de iconos pues hacemos la petición al servidor más cercano y si es el servidor por lo que sea no está disponible o está saturado o el problema que sea que no nos permite acceder nos redirige directamente al servidor al siguiente servidor más cercano es así como funciona una red de cdn es cdn significa content delivery network es decir red de distribución de contenido aquí dentro de fondo son os voy a dejar el link en la descripción también vamos a darle aquí a start for free y aquí lo que nos pide es un email para crear nuestro kit de iconos así que aquí voy a poner mi email gmail.com le voy a enviar y ahora nos dice que vayamos a mirar nuestro email y aquí nos ha llegado un correo que nos dice que confirmemos nuestro email entonces hacemos clic en este punto nos redirige a fondo awesome y aquí ya nos pide crear un password yo como esta cuenta no la voy a usar voy a poner un password sencillo recordar serpas work and continuo aquí no me hace falta que lo guardes aquí pues primer nombre los vecinos en 2020 y un icono favorito pues mira que me da el ejemplo farro que por ejemplo vale aquí esto es lo que a mí me importaba que me dieran este link de aquí esto nos dice que es un código que tenemos que poner dentro del head de nuestro html entonces le voy a dar a copiar y vamos a abrir el visual studio code y aquí dentro voy a crear un archivo nuevo simplemente para que no tengáis por separado nuevo archivo e iconos punto html y ponemos la admiración tabulador esto ya sabéis cómo va y aquí dentro del head pegamos esto que nos han dado vale ya tenemos esto listo voy a minimizar esto para que no estorbe de momento y con eso ya tendríamos el acceso a la librería entonces vamos a cerrar esto y para mirar qué iconos tenemos podemos ir aquí al inicio le damos a icons aquí arriba y todos los que están coloreados en negro o en gris oscuro son los que podemos usar si queréis utilizar un filtro para ver solo los que se pueden utilizar de forma gratuita podéis hacer clic aquí donde pone free y de esta forma sólo vais a ver los que realmente podéis usar entonces por ejemplo vamos a pues a ver este el de la campana el de las notificaciones hacemos clic y como veis aquí nos da una etiqueta html hacemos clic aquí y ya está copiado en el portapapeles ahora podemos venir aquí y pegar lo guardamos vamos a lanzar esto vamos a poner esto aquí y esto aquí go live de aquí como veis ya tenemos nuestra campanita aquí podríamos poner algo por ejemplo spam icono de campana y ahí lo tendríamos entonces de esta forma tan sencilla tenéis acceso a un montón de iconos que podéis utilizar en vuestra página web para no tener que romper os la cabeza de dibujarlo ni dónde encontrarlo ni nada de eso aquí simplemente ponéis la etiqueta y ya tenéis acceso a ello además hay distintos modificadores aquí por ejemplo tenemos este que no tiene fondo que lo que cambia es farc faubel pues aquí en vez de fast que sería el solid ponemos farc esa eres de regular guardamos y como veis ahora tenemos la campana sin el relleno además esto lo bueno que tiene estos iconos es que a través de css podemos modificar los podríamos modificar el tamaño el color añadirle efectos animaciones un montón de cosas y esto es completamente gratuito entonces con esto ya tenéis algo más de información para construir vuestras páginas web y en el siguiente vídeo vamos a ver lo que son los atributos de accesibilidad que es un tema bastante importante y más a día de hoy así que nos vemos en el siguiente vídeo [Música] en este vídeo quiero hablaros sobre los atributos de accesibilidad esto es algo que daría para un curso entero solo sobre accesibilidad pero en este vídeo lo que quiero hacer es daros una pequeña introducción sobre lo que es para qué sirve y que sepáis al menos por dónde buscar y conozcáis las bases de la accesibilidad para el que no lo sepa la accesibilidad es el hecho de poder hacer una página web que sea accesible para todo el mundo independientemente de si pueden verla o no esto principalmente está diseñado para navegadores de terminal o navegadores que leen la página web y la dictan es decir un navegador por voz esto está pensado ya os digo sobre todo para personas invidentes que visiten nuestra web y tengan un navegador por voz que les vaya diciendo dónde están y por qué punto se están moviendo de nuestra web el primero que os voy a contar está index que es el más sencillo de entender si nosotros estamos en esta web y pulso tabulador como veis no pasa absolutamente nada para ello tenemos el atributo camps index que principalmente lo que hace es permitir al usuario moverse por la página e indicando un orden si nosotros ponemos aquí tap index uno en este tap index tres por ejemplo y en este dar index dos guardamos y ahora si pulsamos tabulador como veis se marca párrafo uno después párrafo tres y después párrafo dos ese es el orden que hemos dado normalmente este atributo se pone en las zonas donde queramos poder navegar a través del tabulador esto para accesibilidad viene muy bien no sólo para para temas de gente invidente que no pueda verlo sino para gente que quiera navegar a través del tabulador de una forma rápida y que pueda saltar de un campo de un formulario a otro o de una noticia a otra o ese tipo de navegación que se hace más rápida pulsando tabulador en lugar de tener que ir haciendo clic en los sitios entonces este atributo yo creo que es el más fácil de entender porque simplemente tenemos que indicar el orden en aquellos puntos donde queramos que la página navegue entonces lo más lógico evidentemente aquí sería que esto fuera está bill gates 2 y este 3 pero quería enseñaros que el orden es importante el siguiente atributo viene seguido bueno en realidad son dos atributos que sería el atributo rol y el atributo área estos los atributos si están diseñados específicamente para gente invidente que usan navegadores por voz para que podáis ver una prueba en tiempo real de cómo funciona vamos a ir a la chrome web store chrome web store y aquí vamos a buscar pero un box clásica extensión esto lo que nos va a permitir es que es una screen reader básicamente esto lo que va a hacer es leer nuestra página web y leer esos atributos tanto área como rol para saber a qué se está refiriendo la página y que podáis ver la diferencia entre ponerlos y no ponerlos entonces vamos a hacer clic aquí voy a hacer esto un poco más grande añadir a chrome añadir extensión vale ya lo tenemos cerrar y si ahora nos vamos moviendo párrafo 3 como veis párrafo 1 párrafo 2 párrafo 3 nos está dando más información sobre sobre la página web para que veáis un ejemplo real que esto suele pasar vamos a poner aquí un enlace que simplemente que no vaya a ningún sitio pero que ponga aquí leer más este es un ejemplo muy típico de un enlace a accesibilidad y si nosotros hacemos clic aquí ventana accesibilidad pestaña leer más simplemente nos está diciendo leer más eso si estamos utilizando un navegador por voz y somos una persona invidente esto no nos ofrece ningún tipo de información simplemente dice leer más pero no está diciendo leer más sobre que entonces podemos utilizar el atributo área guión 'label y aquí podemos poner la información que queremos que el navegador le vamos a poner más sobre la noticia del agua en marte por ejemplo guardamos accesibilidad y si ahora hacemos clic leer más sobre la noticia del agua en marte como veis esto sí nos está dando más información y ayuda a las personas que están utilizando este tipo de navegadores o este tipo de extensiones que les ayudan a navegar a través de internet y por último tenemos el atributo roll que básicamente lo que hace es darle al navegador información sobre qué tipo de elemento es el que estamos posicionando nos en este caso el rol sería link pero si desplegamos voy a borrar esto del link y aquí el rol igual aquí como veis a ver si esto se hace más grande para que como veis tenemos muchísimos roles para indicar qué tipo de elemento es sobre el que nos estamos posicionando de todas formas os voy a dejar varios enlaces en la descripción para que podáis investigar cómo funciona el tema de la accesibilidad porque ya os digo que esto daría para un curso entero solo sobre accesibilidad porque es un tema bastante grande y bastante complejo así que voy a dejar este vídeo por aquí y nos vemos en el siguiente [Música] en este vídeo quiero hablaros sobre el protocolo open graph y por qué es tan importante incluirlo en nuestros sitios web open graph es un protocolo que creó facebook principalmente para poder elegir cuando compartimos nuestro sitio web elegir qué es lo que se muestra en esa publicación aquí como veis tenemos los metadatos básicos que sería de 2 puntos title o dos puntos type o dos puntos emails y objetos puntos y url aquí por ejemplo tenemos un ejemplo muy bueno que si abrimos esto en una ventana nueva pues simplemente es la publicación de imdb sobre la película de la roca si nosotros cogemos este link lo copiamos y lo ponemos aquí en facebook como veis esto que aparece aquí pone el título una descripción una imagen una url y que salga esta información y no otra es gracias a este protocolo alguno puede pensar que si no se comparte en facebook que este protocolo no haría falta pero en realidad este protocolo afecta prácticamente a todo lo que compartimos ya sea en whatsapp en instagram en otras redes sociales salvo twitter porque twitter tiene la suya propia pero todo esto que compartimos o pegamos en un blog o en cualquier sitio donde podamos compartir el links pues ésta es la el protocolo que que dicta el contenido que se va a ver entonces esto recordad que es importante ponerlo en vuestras páginas porque si no lo ponéis será el propio facebook o la propia plataforma la que decida cuál es el contenido que va a mostrar y si no encuentra ningún o simplemente pondrá el link y se acabó y eso pues seguramente no sea lo que vosotros queréis así que os voy a dejar este enlace en la descripción y el seguir en el siguiente vídeo vamos a ver cómo funciona el protocolo de twitter ah [Música] en este vídeo os voy a contar cómo funciona twitter card porque es muy parecido a lo que tenemos con el protocolo open graph básicamente es lo mismo que tenemos con open graph pero exclusivo para twitter aquí tenemos las distintas tarjetas que se pueden mostrar que sería el sumar y card que sería esta tarjeta de aquí y aquí es donde os pone los meta que tenéis que utilizar básicamente es copiar esto y cambiar el content con eso ya lo tendríais además tenéis un tweeter carval y dator para saber si lo habéis hecho bien aquí pegáis la url y sabríais si lo habéis hecho bien y se muestra como vosotros queréis este es un tipo de tarjeta que tenemos tenemos el sumar y wizards emails tenemos también el player card que sería una tarjeta de un reproductor y tenemos a pepe card por si estáis compartiendo una aplicación que aquí twitter pues no lo muestra porque estas imágenes ya no existirán pero básicamente es sustituir lo que tenéis aquí puesto por el contenido que vosotros queréis si miramos aquí el tweeter cards por aquí meta tax si miramos los metatags como veis son los equivalentes twitter card es el equivalente a objetar estos no están definidos el twitter descripción es el equivalente a og descripción title title twitter emails ao gmail y el resto ya no los tiene entonces si vosotros utilizáis el protocolo open graph pero no usáis el de twitter se va a seguir mostrando porque esto se va a leer del protocolo open graph pero si queréis personalizarlo un poquito más para twitter por el motivo que sea pues lo recomendable es que utilicéis esto de hecho si cogemos el mismo enlace de antes que no tiene el protocolo de twitter y nos venimos al karbuli dator y lo pegamos como veis aquí en el log nos dice que twitter card es igual al sumar y tag found esto significa que lo que ha encontrado son los del protocolo og y como veis la información que se muestra es la misma que se mostraba en el vídeo anterior cuando lo compartíamos en facebook entonces os voy a dejar estos links bueno este link en la descripción para que podáis echarle un vistazo pero ya os digo que esto es algo que se tarda muy poquito en hacer y que podéis conseguir que vuestro contenido cuando se comparta se publique de la forma que vosotros queréis y no de la forma que la plataforma considere correcto así que con esto voy a terminar la sección y en los siguientes vídeos vamos a empezar a ver todo lo extra que no pertenecería al curso de html pero que son conocimientos que yo creo que hacen falta si os estáis iniciando en el desarrollo web así que voy a dejar el vídeo por aquí y nos vemos en la siguiente sección con una práctica de cómo construir una web completa desde cero solo con html y con esto doy por finalizado el curso de html pero no doy por finalizada vuestra formación en el inicio al desarrollo web después de esto nos queda la práctica de realizar una web completa desde cero que a día de hoy todavía no lo tengo subido al canal pero si estáis viendo este vídeo unos días después de que se haya publicado pues seguramente en la descripción ya tendréis el enlace de la lista de reproducción donde está el construir una web desde cero el siguiente paso sería el curso de introducción a git que también lo tendréis disponible dentro de unos días en mi canal y el siguiente lenguaje con el que tendríais que continuar vuestra formación sería css en mi canal podéis encontrar el curso de css que tengo que son más de 13 horas y en ese curso podréis empezar a dar estilos y diseño a vuestros sitios web para que sean mucho más estéticos y mucho más llamativos espero que te esté gustando este nuevo curso de html5 y si tienes algún tipo de duda o consulta que quieras hacerme te dejo un link en la descripción a la comunidad de dischord donde ya somos más de 600 personas y todos estamos dispuestos a echar un cable si hace falta además todos los viernes estoy en tweets a las 10 de la noche ahora en españa y ahí también contestó dudas y hago prácticas que creo que pueden ayudar a la comunidad a dar sus primeros pasos en el desarrollo web así que si te gusta este contenido y quieres estar al día te animo a que te suscribas al canal que es completamente gratuito y nos vemos en el siguiente un saludo y hasta luego [Música]