Fundamentos de desarrollo web: HTML y CSS

1. Introducción: Hola y bienvenidos a Fundamentos de Desarrollo Web, HTML y CSS. Soy Chris, yo autodidacta desarrollador web y el creador de dos clases exitosas aquí en Skillshare, entendiendo el desarrollo web y cómo construir eficientemente sitios WordPress con Divi. En esta clase, vamos a cubrir algo que es muy fundamental para construir para la web y que es el uso de HTML y CSS. HTML es el lenguaje de marcado que da estructura a páginas web y aplicaciones en toda la web, mientras que CSS es el lenguaje de hoja de estilo utilizado para describir la presentación del HTML. HTML y CSS trabajaron muy estrechamente juntos para crear el aspecto visual y el diseño de su sitio web o aplicación web. En esta clase, los vamos a cubrir juntos. Cualquiera que sea la ruta específica que elijas seguir como desarrollador web, una cosa es segura que vas a necesitar algún conocimiento de HTML y CSS. Si estás listo para sumergirte y aprender los fundamentos de HTML y CSS sigue viendo y te veré en el siguiente video. 2. Lo que necesitarás: Antes de empezar, vas a necesitar algunas herramientas necesarias para el desarrollo web, ya que solo estamos haciendo desarrollo web front-end, solo con HTML y CSS. Todo lo que vamos a necesitar son dos cosas, ambas están disponibles de forma gratuita. El primero es, un navegador web. Yo uso Google Chrome. Tu navegador Web para aquellos de ustedes que no han escuchado el término antes, es justo lo que usas para navegar por Internet, pero también puedes usarlo para abrir cualquier página web, aunque solo esté en tu computadora escrita en archivo de texto. Básicamente interpreta lo que estamos construyendo hoy, HTML y CSS, y lo muestra. Eso es muy importante para lo que estamos a punto de hacer. El segundo es un editor de código, y uso un átomo de código. Está desarrollado por GitHub, y es uno de los más populares, pero puedes usar lo que quieras para EVA. En cuanto a los navegadores, la mayoría de las personas usarán Firefox, Safari, Internet Explorer o Edge, que en realidad cubre el 90 por ciento de los usuarios de Internet. Firefox y Chrome, que es el que uso están disponibles en Windows, y Safari está disponible en Mac, y estoy bastante seguro de que Internet Explorer o Edge, que es una versión más reciente, es solo Microsoft Creo que eso es solo PC, pero recomendaría Chrome, Safari o Firefox. Tengo todas estas instaladas en mi computadora también. Déjame simplemente abrir Firefox también. El motivo por el que recomiendo estos tres es que todos vienen con herramientas de desarrollador. A lo que me refiero con eso es si entro a Google Chrome, que es mi navegador preferido, y presiono Alt Comando I. Esto traerá mi consola de desarrollador, y puede que no entiendas lo que está pasando en todas estas diferentes pestañas aquí, pero es muy poderoso tener esto. Esto hace que sea mucho más fácil de depurar. Podemos editar nuestro sitio web o cualquier página web sobre la marcha para probar cosas nuevas, podemos ver estilos que se están aplicando. Es muy bueno tener estas herramientas cuando estás desarrollando para la web. Safari, creo que es, llamado Inspector Web. Mostrar Inspector Web. Creo que primero tenemos que ir a una página real. Vamos a ir a Google.com.au, mostrar Web Inspector, y como puedes ver aquí abajo, tenemos una interfaz similar, y en Firefox, ¿cómo lo llaman? Consola. Yo solo uso cromo. No estoy seguro de cómo lo llaman, pero lo averiguaremos en solo un segundo. Simplemente lo llaman el inspector. Para que puedas entrar en, Herramientas, desarrollador web, y hacer clic en cualquiera de estas para obtener una interfaz similar. Verás el inspector donde podrás inspeccionar elementos consola, depurador. De nuevo, no te abrumes por todas estas cosas. Solo te estoy informando en cuanto a la elección de tu navegador. Si solo te pegas a Chrome, Firefox o Safari, estarás más que bien. Si quieres seguir lo más de cerca posible, Chrome es definitivamente una buena opción. El segundo que vas a necesitar es un editor de código. Llevo un tiempo usando Atom y me gusta mucho, pero hay otras opciones de una opciones gratuitas como Sublime Text, podrías usar Vim, o podrías usar otra llamada corchetes. Todos estos estoy bastante seguro que son gratuitos, y todos funcionan de manera similar. Nuevamente, si quieres seguir lo más de cerca posible con lo que estoy haciendo y simplemente no tienes preferencia hacia un editor de código, solo puedes elegir atom. Una cosa que debo decir es técnicamente, si estás en un PC, podrías usar el Bloc de notas para desarrollar también páginas web. Estoy bastante seguro en Mac, podría usar TextEdit teóricamente para crear documentos web, pero no obtendrás todas las características especiales que facilitan el desarrollo para la web como lo harías en un editor de código como Atom, Vim, o texto sublime. Yo recomendaría encarecidamente recoger un editor de código adecuado, y no desarrollar a través del Bloc de notas o TextEdit. De nuevo, si no sabes de qué hablo, solo descarga Atom o Sublime Text o Vim, y serás dulce. Si tienes un editor de códigos y un navegador web, estás bastante listo para salir. Esas son las dos cosas que realmente necesitas. Pero en cuanto al conocimiento, si estás empezando desde cero, si esta es tu primera vez aprendiendo sobre desarrollo web, definitivamente te recomiendo que vayas y revises uno de mis cursos anteriores, así que solo puedes dirigirte a mi perfil, y mi curso anterior, entendiendo el desarrollo web, una guía para principiantes de la web. Esto te dará una visión general de todo el desarrollo web, y por eso recomiendo encarecidamente que alguien venga a mis cursos después de ése para volver atrás y referirse a ese. Hablamos de conceptos, como HTML y CSS, pero también cómo eso encaja con la programación back-end. La diferencia entre front-end y back-end, cómo implementar tus sitios web, conseguir un servidor, todas esas cosas diferentes. Simplemente proporciono una visión general del desarrollo web en ese curso, y así lo recomiendo encarecidamente que uno primero. Solo para que lo sepas, donde HTML y CSS encajan en el panorama general del desarrollo web. De lo contrario, si sientes que tienes una buena comprensión del desarrollo web o ya has tomado este curso. Estamos prácticamente listos para sumergirnos directamente y empezar con algo de HTML. Estoy muy emocionado de empezar y te veré en el próximo video. 3. Qué es HTML y CSS: En este video, vamos a cubrir lo que es HTML y CSS. En realidad discutimos cómo HTML y CSS en una de mis clases anteriores, entendiendo el desarrollo web, así que si has tomado esta, probablemente ya tengas una comprensión bastante buena de lo que es HTML y CSS. Pero en este video y en esta clase en general, vamos a sumergirnos un poco más en él. Un buen lugar para empezar a entender HTML es la introducción en w3schools.com. Si voy a w3schools.com, hago clic en “Aprender HTML” y luego hago clic en “Introducción HTML”, habla de lo que es HTML y nos da un sencillo documento HTML. Creo que hacen un trabajo bastante bueno al resumir HTML, es sinónimo de Hyper Text Markup Language, y describe la estructura de las páginas web usando marcas. Tienes elementos que hacen los bloques de construcción de las páginas HTML, los elementos están representados por etiquetas, y dentro de las etiquetas son piezas de contenido. Algo importante a tener en cuenta es que los navegadores en realidad no muestran HTML, pero los usan para renderizar el contenido de la página. Entonces básicamente lo que vemos aquí es código que es interpretado por nuestro navegador con el fin de construir la página y ver qué es lo que ves en tu navegador. Esto es un poco meta, pero estamos en una página web en este momento. Lo que estamos viendo es los resultados de HTML y CSS juntados en nuestro navegador para crear un sitio web. Pero cómo llegamos a ese punto es a través del HTML. Tan solo para perforar este hogar, podemos ir a cualquier página web, digamos por ejemplo, esta página web, y hacer clic con el botón derecho en ella y hacer clic en “Ver fuente de la página”, y luego verás lo que en realidad se alimenta al navegador para te dan ese resultado por aquí. Este es un ejemplo bastante complicado supongo, tienes al principio, un montón de CSS aquí que está incrustado en la página. Puedes desplazarte hacia abajo y ver algunos Javascripts allí. No me confundiría demasiado con eso, pero puedes empezar a ver aquí un montón de HTML con clases y otros atributos. No espero que entiendas completamente lo que está pasando aquí, de eso se trata este curso. Pero solo quería hacer los puntos, todo lo que estás viendo en tu navegador es HTML y entre otras cosas como CSS y JavaScript. ¿ Cómo se puede pensar en HTML? A mí me gusta pensar en ello como una estructura, pero también elementos definitorios. Como puedes ver en nuestro documento aquí abajo, una vez que creamos una etiqueta, estamos definiendo, pero donde la colocamos dentro del documento, define también la estructura. Como puedes ver, esta etiqueta de párrafo está después esta etiqueta de encabezado así que si cambiáramos el orden, eso cambiaría la estructura, y como verás a medida que pasamos por el curso, podemos anidar etiquetas dentro de las etiquetas y crea, Supongo, un árbol de elementos que se conoce como el Modelo de Objetos de Documento o el DOM. De nuevo, no te preocupes demasiado por eso, vamos a cubrir el Document Object Model por mucho tiempo. Eso es un poco de cómo HTML, ¿qué es CSS? Bueno, podemos ir al elemento del menú CSS en w3schools.com e ir a la página de introducción de eso y obtenemos un poco de visión general. Básicamente, CSS describe cómo se van a mostrar los elementos HTML en su pantalla, en papel o en otros medios, como dice aquí. Es sinónimo de Hojas de Estilo en Cascading, y podemos almacenar nuestro CSS en diferentes lugares, reutilizar diferentes estilos, solo hace que todo sea más organizado cuando almacenamos CSS en archivos separados o definimos reglas dentro del mismo documento que el HTML. De nuevo, vamos a cubrir todo esto, así que lo verás pasando justo frente a ti. Pero si volvemos a la fuente de la página de cualquier sitio web, solo hagamos este sitio web porque está justo frente a nosotros, tenemos CSS justo aquí, y eso es en realidad reglas CSS incrustadas en el documento. Pero si bajamos a algún elemento, quizá podamos empezar a ver, y no estoy viendo que algo salga de inmediato, pero podemos buscar estilo, y podemos empezar a ver un elemento HTML con un atributo de estilo, donde también podemos definir algunos CSS también. Se puede ir a cualquier página web y se puede ver CSS y se puede ver HTML. Pero muchas veces, el código CSS se almacena en otro documento al que hace referencia este documento. Eso ya veremos muy pronto también. Mientras tanto, para perforar a casa la diferencia entre CSS y HTML, quiero mostrarte una página web que no tiene CSS en absoluto. Para esto, voy a necesitar cierta extensión. No necesitas descargar esta extensión, solo la descargué con el propósito de esta demostración por lo que solo puedes seguir. Pero si vamos a cualquier sitio web, vamos sólo a Google.com, y tengo esta extensión aquí que me permite desactivar todos los estilos. Puedo entrar en el menú CSS de esto, presionar “Deshabilitar todos los estilos”, y se puede ver cómo se ve la página principal de Google sin ningún CSS. Actualmente estoy conectado, por lo que hay parte de mi información ahí. Pero esencialmente se puede ver que el cuadro de búsqueda ahí, está ahí, estás recibiendo las sugerencias, supongo, esto está apareciendo y estás obteniendo los botones y las imágenes, pero está por todo el lugar y no está bien estilizado. Si lo volvemos a encender, empezarás a ver que todo está dispuesto, y puedes empezar a ver la importancia de tener CSS porque este sitio web aquí es prácticamente inutilizable. Pero para ser justos, el Internet hoy en día depende en gran medida del CSS y el estilo. Hay ejemplos que podría mostrar de los años 90 o algo así, donde no hay CSS involucrado en absoluto. En realidad sí tengo un ejemplo que mostrarte. Si voy a www-cs, encontré esta página web la cual al parecer se crea sin ningún CSS en absoluto. Pude entrar y encontrar que estaba cargando una hoja de estilo, pero sólo podemos entrar y eliminar ese enlace. Esto es más o menos como se ve un sitio web sin CSS. Como puedes ver, los enlaces aquí son de color morado o marrón oscuro, supongo, podrías llamar a eso morado oscuro, azul, o si haces clic en ellos, puedes ponerte rojo. Verás que los elementos están como apilados uno encima del otro, no hay columnas, básicamente son solo imágenes, textos. Puedes poner en negrita algún texto, eso es todo, puedes poner algunos caracteres chinos que se parecen, puedes poner en enlaces, puedes poner en esta regla horizontal, y puedes apilar enlaces uno encima del otro, pero eres bastante limitado. Es decir, en los 90, podrías ser capaz de salirte con la tuya con un sitio web como este sin CSS pero en el día y la edad de hoy, necesitas absolutamente CSS y es tan vital para hacer cualquier tipo de documento web. Espero que eso te comunique lo importante que es tener CSS junto a tu HTML, y lo juntos que son fundamentales y complementarios. Algo que mencionaré sobre HTML y CSS es que cuando empiezas a investigarlo en la web o a revisar otros cursos, podrías escuchar a personas o leer personas refiriéndose a HTML y HTML5 como si fueran cosas diferentes. Al igual que si busco HTML5 en Google, consigo un montón de artículos con HTML5 en ellos obviamente, y si busco HTML, solo obtengo HTML. Es de tipo similar, sitios web como w3schools.com, ambos tienen una página en HTML y HTML5. Puede ser bastante confuso saber, bueno, ¿qué estás aprendiendo en HTML o HTML5? Como puedes ver, HTML5 es el último lanzamiento de HTML, y ya lleva casi tres años fuera o alrededor de tres años. Definitivamente es la nueva versión de HTML que ha existido desde hace tiempo. Simplemente voy a referirme en esta clase a HTML y HTML5 como básicamente lo mismo porque deberíamos estar desarrollando en HTML5, no HTML4 si estamos aprendiendo desarrollo web hoy en 2018, o para siempre si estás escuchando en los años por venir. Lo mismo con CSS y CSS3. Si escribimos CSS, veremos todos estos enlaces, CSS3 y tienes páginas web similares que difieren de CSS a CSS3. Nuevamente, CSS3 es solo la última versión de CSS y creo que como HTML, lleva mucho tiempo fuera. Sólo voy a referirme a CSS, y CSS3 como básicamente lo mismo en este curso. Esa es suficiente teoría por ahora. No sé si necesitaba hablar de CSS y CSS3 pero es algo que me ha confundido también porque he visto HTML aquí y HTML5. La gente suele referirse a ellos como cosas separadas, pero al final del día, estamos aprendiendo HTML y CSS en 2018 o más allá. Simplemente podemos pensar en HTML y HTML5 como lo mismo. Esa es suficiente teoría por ahora. En el siguiente video, vamos a dejar de hablar de HTML y CSS y en realidad empezar a desarrollar algunos. Te veré en el siguiente video. 4. Primeros pasos con HTML: En primer lugar vamos a abrir nuestro editor de códigos. Para mí, es Atom. Si bien eso se está cargando, volveré a nuestro navegador y volvamos a visitar esa página por las escuelas W3. Entonces iré allí. Haga clic en “Aprender HTML”, haga clic en “HTML introducción”. Por lo que quiero que se desplacen hacia abajo hasta donde les muestra este sencillo documento HTML. Echemos un vistazo a lo que está pasando aquí. Hay dos partes para esto, y una son las etiquetas. Se pueden ver las etiquetas de estos menos que signo y mayor que signo con un poco de texto en el medio. Entonces está el contenido, que es sólo texto en esta instancia. Tienes Título de Página, Mi Primer Encabezado, Mi Primer Párrafo. En realidad está formateado bastante bien aquí y tu editor de código debería hacer lo mismo. Se pueden ver estas diferentes partes codificadas por colores. Por lo que puedes decir que esto es una etiqueta y puedes decir que este texto es parte de esta etiqueta desde el color. Entonces con las etiquetas, tienes etiquetas de apertura y cierre y etiquetas sin contenido. Entonces aquí arriba, por ejemplo, esta es una etiqueta que no tiene apertura o cierre. Solo necesitas poner esto una vez. Pero si miras a la siguiente etiqueta, tenemos HTML. Pero luego aquí abajo tenemos de nuevo, pero con una tajada delante, y eso denota la etiqueta de cierre. Básicamente, cualquier cosa que esté entre la etiqueta de apertura y cierre compone lo que es esa etiqueta definiendo. Eso suena abstracto pero si miramos aquí un ejemplo más concreto con el título, esto denota que el título está empezando. Después ponemos el título y luego usamos la etiqueta de cierre para decir que hemos terminado de poner el título. El título entra en lo que se llama la sección de cabecera de tu documento HTML, pero también hay una sección de cuerpo que se abre y cierra aquí. Vamos a entrar en cabeza y cuerpo en solo un minuto, pero lo que quiero atravesar aquí es que tenemos etiquetas. Esta es la base del HTML y lo que hay entre las etiquetas y lo que hay en la etiqueta aquí define el elemento. En este ejemplo acabamos de obtener texto, pero podemos poner cualquier cosa ahí, podemos poner otras etiquetas ahí dentro. Podemos poner imágenes en medio, y básicamente, esto es HTML. Este es nuestro marcado, será un ejemplo muy sencillo. Ahora lo que quiero hacer es tomar todo este ejemplo y moverlo a nuestro editor de código. Entonces solo voy a seleccionar todo. Presiona “Comando C” en un Mac para copiar. Voy a deshacerme de estos mensajes de bienvenida de atom. Voy a hacer clic en “Nuevo archivo”, y nos dan un archivo en blanco. Ahora no hay formato todavía porque no sabe qué tipo de documento es. Entonces lo que voy a hacer es hacer clic en “Archivo” y guardar esto de inmediato. Entonces lo que tienes que hacer ahora es navegar hasta donde quieras almacenarlo. medida que nos movemos a lo largo del curso, estaremos agregando más archivos, por lo que realmente deberíamos configurar un directorio de proyectos. Simplemente voy a ir al escritorio y crear proyecto HTML y Css. Sólo voy a llamarlo así. Por lo que ahora tenemos una carpeta en la que albergar nuestro proyecto. De lo que voy a nombrar esto es index.html. No tienes que llamar al tuyo index.html. El parte importante es que tienes punto HTML al final porque eso le dirá a tu computadora y cualquier otra cosa que esté tratando de interpretar qué es ese archivo, le estás diciendo específicamente que este es un documento HTML. El índice es una palabra o nombre común para dar un documento HTML que se sienta en el centro de tu proyecto. Entonces creo que índice en este caso, dot HTML es un nombre realmente apropiado. Haremos clic en “guardar” y de pronto empezarás a ver los colores vienen similares a lo que teníamos aquí. Entonces veremos algo de formato aquí y podemos ver claramente qué es una etiqueta y qué es una pieza de texto o contenido dentro de la etiqueta. El otro gran cosa de tener un editor de código es decir, puedo dar click en la apertura y resaltará el cierre para que puedas empezar a ver dónde se cierra. Si yo sólo hiciera esto y me deshiciera del cierre, eso rompería mi documento. A lo mejor seguirá apareciendo en esta instancia. Pero una vez que tienes un documento completo, definitivamente quieres estar cerrando en todo momento. Ahora solo para que sea un poco más fácil mostrar anidación, quiero sangrar el título para que puedas ver que se sienta dentro de la cabeza, y quiero sangrar esto porque se sienta en cuerpo. Si fuéramos a crear otra etiqueta y ponerla debajo, esperaría que también se tirara a través. Esto lo verás mucho en desarrollo web para presumir de anidar, pero cubriremos el anidamiento en un video futuro. Ahora mismo, sólo quería repasar las etiquetas que teníamos aquí. Mencioné que tenemos etiquetas vacías, así que no hace falta una etiqueta de cierre, pero luego tenemos estas etiquetas de apertura y cierre. En la parte superior, tenemos HTML, que define que se trata de un documento HTML. No hay mucho más que decir de esa etiqueta excepto que trate de mantener todo entre esos dos. Tenemos la sección de cabeza. la sección de cabecera se pone en sus metadatos. Vamos a hacer un video completo sobre cabeza HTML más adelante en esta clase. Pero por ahora, una de las cosas que vas a necesitar en tu página web es un título. Para que podamos poner título entre las etiquetas de cabeza. Entonces cuando veas tu documento en un navegador, tal vez vayamos ahora mismo. Lo que puedo hacer es hacer clic en “finder” nueva ventana del buscador. Puedo navegar hasta donde está mi proyecto y literalmente puedo arrastrar este index.html escribir en mi navegador. Como ven aquí, esta no es una dirección en internet, pero aún así fueron capaces de interpretarla a través de nuestro navegador porque es simplemente HTML y Css y JavaScript cuando lo agregamos a este proyecto. Entonces como puedes ver, título de la página se sienta aquí. Si iba a volver al editor de códigos y cambiar Título de página a documento HTML y haga clic en “Guardar” entonces vuelva a cargar este archivo. Ya verás que el título de esta página es ahora documento HTML. Por lo que puedes empezar a ver que aquí mismo todo dentro de la ventana de tu documento es el cuerpo. Entonces todo lo que está en cabeza, si volvemos a aquí, son cosas que respaldan eso. Entonces tienes el título en el que entra, cuando estás mirando una pestaña en Google Chrome o estás abriendo una ventana que aparecerá en la propia ventana. Puedes poner en otras cosas aquí relacionadas con SEO, puedes vincular hojas de estilo externas aquí. De nuevo, vamos a entrar en la cabeza con más detalle más adelante, pero esa es esencialmente la diferencia entre cabeza y cuerpo, que es lo que se ve aquí. Yo sí dije que cubriríamos el anidamiento en un video posterior, pero es un concepto sencillo así que lo voy a cubrir ahora mismo. Te voy a tirar algunos elementos en los que quizá no estés familiarizado ya. No te preocupes, los cubriremos más tarde. Pero sólo para demostrar la anidación, si yo fuera a agarrar esta etiqueta de párrafo, ponla aquí, llama a este segundo párrafo. Entonces dentro de aquí tener otra etiqueta div. divs son básicamente solo bloques en HTML. Entonces puedo poner en mi tercer párrafo, se puede empezar a ver la anidación pasando aquí. Entonces como puedes ver, tenemos cuerpo y dentro del cuerpo tenemos h1, P y div. Dentro de este div tenemos P más otro div, y dentro de ese div tenemos una P, eso es esencialmente anidar. Ahora mismo No va a tener mucho sentido hasta que tengamos más elementos lógicamente presentados en la página. Pero esencialmente, tienes esta etiqueta h1, una etiqueta P, y luego un div que va justo después. Si definiéramos algunos estilos en esta etiqueta div, afectaría todo lo que hay dentro de ella. A estos se les llama hijos de esta etiqueta y a esto se le llama padre. Pero de nuevo, me estoy poniendo un poco técnico aquí. No necesitamos entrar en ese detalle todavía. Pero esencialmente, vas a ver esto mucho en HTML y se llama anidación. Simplemente voy a revertir esos cambios presionando Control Z. Eso cubre más o menos el documento básico que tienes que encontramos en el ejemplo aquí. Entonces en este video, nos familiarizamos con el título, nos familiarizamos con h1 y P. Pero hay muchos más elementos para usar en HTML. Por lo que en los próximos videos, vamos a cubrir algunos de los otros elementos que pueden conformar tu documento HTML. Por lo que te veré en el siguiente video. 5. Encabezados y párrafos: En este video vamos a cubrir encabezamientos y párrafos. Ya tenemos un encabezamiento y un párrafo dentro de nuestro documento, pero realmente no explicamos cómo funcionan cada uno de estos elementos. Con etiquetas de encabezamiento, podemos volver a W3Schools y empezar a cavar un poco más en los encabezados. Pero como puedes ver, aquí tienen un gran ejemplo donde están creando seis encabezados diferentes dentro de seis tamaños diferentes. Pero en realidad, los encabezamientos son más importantes que sólo el tamaño. Los motores de búsqueda en realidad usan encabezados para indexar la estructura y el contenido de su página web. hay dos puntos importantes que mencionar sobre los encabezamientos. Volvamos a nuestro documento aquí y veamos que tenemos una etiqueta h1, ¿por qué tenemos una etiqueta h1? Bueno, h1 está destinado a ser el rubro de nivel superior. Si vuelvo a nuestro documento, voy a abrir una nueva pestaña y simplemente arrastrarla de nuevo para poder tener ambos abiertos, y si esto fuera dicho, una entrada de blog o un documento sobre página o lo que sea, digamos que es una página sobre, usarías h1 para decir “Sobre Nosotros”. Tan solo por consistencia, crearemos aquí un título que diga, “Sobre Nosotros” también. Asegúrate de que siempre estás ahorrando. Solo estoy usando Control S pero también puedes ir “File Save” ahí y voltear de nuevo a tu documento y como puedes ver, el título es sobre nosotros y el encabezado de nivel superior, que está definido por h1 está ahí. A lo mejor si estuvieras haciendo un documento, un post sobre nosotros, tendrías sobre nosotros, un primer párrafo pequeño, pero tal vez quieras algunos subtítulos también. El siguiente rubro de nivel sería h2. Acerca de nuestra historia, tal vez si esto es como una empresa o un dúo, tal vez quieras tener un encabezado de sub-nivel, y luego pondrías en otra etiqueta de párrafo tal vez y entonces podríamos tener múltiples h2's en ese nivel, si eso tiene sentido. Nuestra historia, nuestros valores, digamos poner ahí dentro, y podría arrojar más texto en estos párrafos, pero esto son sólo propósitos de demostración, obviamente. Si vuelvo a nuestro navegador y refresco, se puede ver que nuestro encabezado de nivel superior es sobre nosotros y nuestra historia y nuestros valores entran bajo eso. Ahora en HTML tienes hasta seis niveles, por lo que puedes ir más y más profundo, tal vez haya dos encabezamientos bajo nuestra historia. Por lo que irías y usarías el siguiente número h3 para profundizar y tener otro encabezado de subnivel, pero como mencionamos justo antes, también es importante qué encabezamientos estás usando para SEO. No solo pienses en h1's como la gran aversión de h2 y solo pienses en el tamaño cuando estás escribiendo tu documento HTML, definitivamente quieres seguir la estructura donde tienes tu encabezado de nivel superior, que es h1 y luego todo bajo baja en números. No se trata solo del tamaño del encabezado, también se trata de hacer que sea más legible para el usuario, sino también de decirle a los motores de búsqueda como Google, la estructura de tu página y esa es una herramienta que Google utiliza para averiguar cómo indexar tu página, pero luego también para averiguar qué tan legible es. estructura es importante para el lector, también es importante para los motores de búsqueda y todo lo que tienes que saber es que tienes que tener el rumbo uno como tu rumbo de nivel superior y luego trabajar hacia abajo desde ahí. Si vamos a tener un rumbo debajo rumbo uno, será h2 y luego rumbo debajo h2 sería h3 y así sucesivamente y así sucesivamente. La otra cosa que puedes hacer, que no es realmente un encabezamiento, es una regla horizontal. Se define con la h también. Pero básicamente, si quisiéramos tener una separación entre esos dos encabezamientos, podemos poner en una etiqueta h. Esto no es una pena, una etiqueta hr, esta es una etiquetas de autocierre, por lo que no es necesario poner ningún contenido en ella. No necesitas hacer esto, por ejemplo, puedes simplemente poner en el signo menos que, hr, mayor que signo. Volviendo a nuestra página y se puede ver que ahí hay una regla horizontal. El siguiente es párrafos y yo también me voy a referir a W3Schools. Lo importante a tener en cuenta sobre HTML y hacer párrafos es que no puedes cambiar la salida agregando espacios extra o líneas extra en tu código HTML. Esto debe definirse mediante párrafos diciendo específicamente que se quiere tener un salto de línea, y se tendrá que poner en entidades HTML y similares para obtener más espacio en blanco. De nuevo, no te preocupes demasiado por eso, estaremos cubriendo eso en una lección futura pero por ahora, solo demostremos esto. Nuestro primer párrafo, y luego dejemos espacio abajo y digamos hola, adiós. Volvamos atrás y se puede ver ese espacio en blanco más antiguo que creamos y delinean break, no se encuentra. Párrafo, si quisieras tener separación de líneas, una forma que podrías hacer eso es poniendo esto en otra etiqueta p y eso le dice a tu navegador que este es un párrafo nuevo así que ten algo de espaciado en el medio. Si quiero volver a poner eso a cómo fue, poner hola, adiós. Ahora verás que está en una nueva línea porque es un nuevo párrafo. Está en esta nueva etiqueta de párrafo pero de nuevo, el espacio en blanco en medio, no está ahí. Una forma de moverse eso es mediante el uso de la etiqueta pre. Si utilizas la etiqueta pre, se mostrará con una fuente fija y preservará tanto espacios como saltos de línea. Si vuelvo a entrar aquí y creamos un pre. En realidad, solo modifiquemos lo que ya tenemos, añadiré y volveré a eso. Ahora ese elemento de párrafo, esa etiqueta de párrafo ahora es pre etiqueta, y como puedes ver, tenemos esta fuente rara pero tenemos nuestro espaciado de líneas. No conozco una situación en la que necesitarías usar pre. A veces como desarrollador, puede ser útil mostrar código porque el código que quieres mostrar sangría y un poco de formato, pero muchas veces lo mejor es solo usar pre si lo deseabas. Extraña cantidad de espacio en blanco entre palabras, hay formas en que puedes hacerlo pero si querías separación entre tener nuevas líneas, puedes tener una nueva etiqueta p como esta. Otra forma de tener nuevas líneas es también utilizar otro código de etiqueta vacío, br. Si me meto entre estas dos palabras y meto un br, bastante seguro eso significa descanso y puedes ir por aquí y ver que ahora hay un salto de línea. Está un poco separado porque no hay relleno ni margen entre estas dos líneas. Si solo quisieras romper la línea, puedes hacer esto, pero si estuvieras escribiendo muchos párrafos, tal vez una vez los pongas en diferentes etiquetas de párrafo y tenerlo estructurado así lo hará más fácil de peinar por la pista, porque puedes definir lo grande que quieres que sea la brecha entre los diferentes párrafos. Lo mismo vale para arriba con el encabezamiento uno en tus estilos, que entraremos en CSS, podemos definir qué tan grande es este margen entre aquí y nuestro primer párrafo. Eso son más o menos encabezamientos y párrafos. Estos son los bloques de construcción más sencillos de tu documento pero en el siguiente video, vamos a entrar en tres realmente comunes que verás todo el tiempo en documentos HTML. Te veré en el siguiente video. Sigamos construyendo nuestro documento HTML en el siguiente video. 6. Enlaces, imágenes y botones: Como mencioné en el video anterior, los enlaces, las imágenes, y los botones son bastante comunes en HTML, y eso es lo que vamos a cubrir a continuación. Lo que hace cada uno de estos es bastante autoexplicativo. Simplemente voy a saltar directamente y poner algunos enlaces, botones e imágenes en nuestros proyectos de inmediato. Primero voy a necesitar una imagen, y debo admitir que no he preparado una antes, así que sólo voy a encontrar una ahora, y forzar hacia adelante. Tengo esta imagen aleatoria aquí, y lo que vamos a hacer es ponerla en el directorio del proyecto junto a mi documento HTML. Ese es un nombre loco. Sólo voy a llamar a esta foto sólo por simplicidad Estaca. Ahí tenemos una foto que podemos hacer referencia y llevar a nuestro proyecto. Voy a volver a mi editor de códigos y voy a ir tras la etiqueta headfirst heading, la etiqueta H1, y voy a crear una imagen, que es bastante simple. Simplemente hacemos una imagen así. Ahora por supuesto, si solo presiono ahí una etiqueta de imagen, realmente no va a pasar nada porque realmente no estamos diciendo el documento de dónde viene la imagen. Tiene que haber un atributo. Esta va a ser nuestra primera mirada a los atributos, pero vamos a profundizar en ello más adelante. Si hacemos un espacio después del nombre de la etiqueta y ponemos algún texto, lo veremos en marrón en mi caso particular porque estoy usando Adam. Lo que estamos haciendo aquí es asignar un atributo. Voy a presionar “Iguales” y luego voy a abrir y cerrar corchetes. Porque lo que estamos poniendo aquí dentro se llama cuerda. Una cadena es sólo un término técnico para algún texto. Pero las comillas básicamente dicen, toma esta palabra por palabra. Nuevamente, no te preocupes demasiado por toda la sintaxis aquí. Sólo tienes que saber que tienes que poner algún texto, igual, y luego algún texto del otro lado de eso es igual entre comillas. También puedes hacer cotizaciones simples también si lo prefieres. Eso, veremos las implicaciones de eso más adelante. Todo lo que necesito poner aquí es si volvemos aquí, el nombre del archivo y donde está almacenado. Al parecer está en la misma carpeta que nuestro documento HTML, solo puedo poner eso ahí. Presionaré “Guardar”. Vuelve a nuestro documento HTML y de repente ves la imagen ahí. Pero lo que va a hacer es que va a volar eso a toda la altura y anchura de la foto original. Lo que podemos hacer es poner aquí algunos otros atributos, ancho y alto. También puedes definir ancho y alto en CSS. Pero debido a que las imágenes han existido desde los primeros días del HTML, somos capaces de definir anchuras y alturas de ellas también. Lo que voy a hacer aquí es limitarlo a 100 píxeles, y la unidad para píxeles es px. No pongas un espacio en el medio. Asegúrate de tenerlo justo al lado del dígito. Entonces lo que voy a hacer es que voy a presionar “Guardar”. Voy a volver a aquí. Entonces verás que es 100 por 100, pero desafortunadamente, la imagen no estaba cuadrada para empezar, así que tienes algunos estiramientos aquí. Si voy, lo siento, lo hice un poco demasiado rápido, usando Chrome, puedo hacer clic con el botón derecho aquí, haga clic en “Inspeccionar”. Puedo ver nuestro documento HTML de forma interactiva dentro de nuestro navegador. Lo que hice justo entonces fue ir a inspeccionar ese elemento en particular y me va a mostrar la etiqueta que está creando ese elemento. Entonces lo que hice fue rondar sobre la foto. JPEG. Aquí puedo ver el tipo natural de relación de aspecto y los píxeles que era originalmente. Aquí se puede ver que estos dos números son los mismos. Si lo hago un cuadrado, se va a ver un poco raro. Permítanme hacer algunos cálculos rápidos para averiguar cómo podemos mantener esas proporciones. Queremos que sea 9.6 veces más pequeño de lo que originalmente es. Podemos poner la altura como 75. Volveré aquí, pondré la altura como 75. Eso nos debería dar más o menos alrededor de las mismas dimensiones, ahí tienes. Ahí está nuestra imagen. También podemos poner en un enlace. Podemos hacer eso usando lo que se llama etiqueta de anclaje, y es muy sencillo. Es sólo una, y luego cierras con una etiqueta y luego cualquier cosa entre estas a tags es el texto que se vincula. Sólo voy a poner, Este es un enlace, y si ahorramos, vuelve aquí. Podemos ver que ahí hay un enlace, pero está incompleto. Eso se debe a que no le hemos dado un atributo importante llamado href. Si espacio para agregar un atributo y pongo href, y uso la misma convención, igual y luego comillas dobles. Puedo vincularlo en algún lugar. Ahora en realidad no tenemos otra página a la que enlazar. Lo que sólo voy a hacer es poner un marcadores de posición aquí y un marcadores de posición común es solo un signo de hash o una libra si eres de América. Voy a presionar “Guardar”, y me voy a volver aquí. Entonces de repente podemos ver que el enlace está formateado como un enlace. No sólo se pone azul, y si hago clic en él, se pone rojo. Entonces después de haber hecho clic en él, se volverá a este color morado. También es, puedes ver mi cursor cambiar cuando lo repaso. Por aquí tengo estos textos, resaltando herramienta. Entonces por aquí tengo un cursor para indicar que puedo dar click en esto. De nuevo, no va a hacer nada porque no lo hemos vinculado a nada. Digamos que teníamos una página que se llamaba blog. Entonces volvemos atrás. Si fuera a hacer click en esto, conseguirás archivo no encontrado porque no tenemos eso. De hecho, allí hice un tipografía. Yo sólo quiero ponerlo así. Si presionamos esto, conseguiremos un blog. Pero no tenemos nada en los blogs, así que no veremos nada. Buen placeholder por ahora, es solo tener el hash o la libra, y todavía obtenemos el formateo de un link y el comportamiento de un link, simplemente no va a ninguna parte. Ahora lo último fue un botón. Supongo que un botón funciona de manera similar, pero viene con ciertos atributos o propiedades estilísticas que simplemente vienen estándar. Podemos definir un botón como este. Entonces entre las etiquetas de apertura y cierre, podemos poner en el texto que va a aparecer en el botón. Podemos decir que esto es un botón. Y', voy a guardar eso, volver atrás, y se puede ver aquí, este es un botón. Podemos lograr un look similar, estilo, una etiqueta de enlace. Pero un botón solo te da un botón directo de la puerta. Si solo quieres apagar un botón, puede ser asignarle algún JavaScript. Puedes tenerlo para que al hacer clic en este “Botón”, vamos a demostrarlo con una propiedad extra llamada on-click. Podemos simplemente hacer alerta básica, Botón clicado. No te preocupes demasiado por esto. Todo esto es JavaScript el cual no estamos cubriendo en este curso. Pero si hago clic en esto ahora, la página dice botón hizo clic. Esa es la forma en que podemos conseguir alguna interacción con botones. Pero esencialmente, muchas veces me encontraré estilizando una etiqueta de enlace para que parezca más un botón. Puedes obtener un look similar y un comportamiento similar desde un botón, como puedes desde una etiqueta de enlace. Ahí lo tienes, los bloques de construcción del HTML básico. Tenemos una imagen, tenemos un enlace que realmente no enlaza a ninguna parte, y sólo tenemos un botón aleatorio que nos dará una alerta. Como notaste, entramos un poco en atributos en este video. Nos hemos expandido solo en los nombres de las etiquetas, solo en el contenido, pero ahora también asignando atributos. En el siguiente video, vamos a profundizar en los atributos para que podamos entender cuantos más atributos son muy importantes en HTML. Te veré en el siguiente video. 7. Atributos HTML: En este breve video, solo quería hablar un poco más sobre los atributos. Como viste en el último video, usamos algunos de ellos, pero solo quería ponerme un poco más teórico aquí, que entendieras mejor los atributos y podamos seguir adelante y usarlos más a menudo sin que haya ningún confusión. Si volvemos a W3Schools y hacemos clic en el ítem de menú para atributos, aquí hay algunos realmente comunes. El atributo href que acabamos de utilizar. Damos la dirección de enlace de una etiqueta con href. De nuevo, verás que este formato continúa. Tenemos el nombre del atributo, tenemos el signo igual para la asignación, y luego tenemos un trozo de texto dentro de comillas dobles o comillas simples. Nuevamente, hicimos src en el último video, por lo que podemos dar una etiqueta de imagen, la dirección real de la imagen en la que queremos mostrar. Podemos definir ancho y alto. Otro atributo importante es la etiqueta alt. El tag alt es un atributo que especifica texto alternativo que se va a utilizar cuando no se puede mostrar una imagen. Es básicamente una forma de describir la imagen porque tal vez el título de esta imagen no sea tan descriptivo o no se sabe realmente cuál es la imagen, sobre todo cuando alguien está escuchando una página web es decir, una persona ciega. Existen ciertos lectores de pantalla que en realidad pueden leer imágenes, pero solo si se define una etiqueta alt. Si tienes una foto de una chica con chaqueta, debes poner ahí un atributo alt para compartir con el lector de pantalla cuál es la imagen en realidad. El otro punto a tener en cuenta sobre alt es que es una buena idea para propósitos SEO. Para que tu sitio web aparezca en Google con más regularidad, para tener una etiqueta alt porque entonces estás dando más información a Google para averiguar si tu artículo es relevante. Si estás escribiendo un artículo sobre chicas que usan diferentes atuendos y tenías cada una de tus etiquetas de imagen con una chica con chamarra, chica con vestido, así sucesivamente, así sucesivamente, le estás mostrando a Google que esas imágenes son realmente relevantes para el contenido de su página. Bajamos y vemos otro atributo realmente importante, y esto es colindante en CSS aquí, es el atributo de estilo. No tenemos que crear un documento CSS separado para definir estilos en un elemento. Podemos entrar derecho a un elemento, así que te mostraré aquí y podemos definir un estilo. Misma convención, estilo equivale a cotizaciones abiertas y de cierre. Podemos poner color en la ortografía americana. Digamos verde. Pones el punto y coma ahí para decir que este es el final de ese estilo y hacemos clic en “Guardar”, vuelve a aquí y podemos ver que ese párrafo es verde y podemos verlo pasando de nuevo en nuestras herramientas de desarrollador. Ese Es realmente importante, vamos a meternos más en eso en videos posteriores. Atributo de título, podemos agregar a etiquetas p para mostrar una descripción de herramientas. Esa es una pequeña característica genial. Nunca usé eso realmente sin embargo, y tenemos algunas recomendaciones aquí de W3Schools las cuales creo que son bastante buenas recomendaciones. No requiere nombres de atributos en minúscula, pero te recomiendan encarecidamente que los uses. solo es bueno tener una convención. Podríamos hacer un estilo así, pero realmente no hay necesidad. Simplemente mantén las cosas limpias y tenlas como palabra minúscula. También es importante que te asegures de usar cotizaciones. Al parecer, puedes evitarlo. Al parecer, HTML5 no requiere cotizaciones pero sigue siendo una muy buena idea tenerlas y si hay un espacio entre medio como en este ejemplo, esto se va a romper porque no sabe dónde está el atributo y su valor está terminando. Si solo pones un espacio ahí, eso podría ser un nuevo atributo. No lo sabemos. Utilice siempre las comillas. Pero no tenemos que hacer comillas dobles, podríamos hacer comillas simples también. Podríamos simplemente entrar aquí, por ejemplo y en lugar de comillas dobles, poner una sola cotización, guardar eso, volver a la página, obtenemos el mismo resultado. Eso no importa de ninguna manera podemos usar comillas simples o comillas dobles. Si hiciéramos este ejemplo aquí y pusiéramos un título en una de las p, podríamos, vamos a ver. Vamos al título aquí y digamos que este es el segundo párrafo que se llama, y luego ponemos en otras comillas dobles, segundo párrafo. A ver cómo lo hemos roto ahora. Tenemos estas comillas dobles para iniciar y finalizar el valor del atributo. Como se puede ver por la coloración aquí, parece al editor de código y al navegador que hemos terminado esa cadena. No sé qué va a pasar. Si actualizamos la página y pasamos a nuestro segundo párrafo, veremos que termina después de llamado porque ponemos una nueva comilla. Si miramos el elemento en nuestras herramientas de desarrollador, podemos ver que el segundo y párrafo han surgido y están en un color diferente y es solo un desastre. Lo que podemos hacer para evitar esto es simplemente cambiando el tipo de cotizaciones. Podemos usar comillas simples ahora en su lugar y luego podemos presionar “Guardar” y luego cuando pasemos el cursor sobre, podemos tener parte del texto que aparece entre comillas. Pero si lo querías comillas dobles por ejemplo, solo necesitamos cambiar el posicionamiento de estos. Podríamos tener, empezando con comillas simples y terminando con comillas simples, y luego esta pieza de texto en particular tiene comillas dobles que lo rodean. Si pasamos el rato, podemos ver eso. Es solo importante que si quieres cotizaciones dentro de tu texto real en tu atributo, que necesites usar lo contrario de lo que usas, el alterno. Si lo abriste con comillas dobles, vas a necesitar usar comillas simples dentro, y si lo abriste con comillas simples, vas a tener que hacer viceversa. Esa es una palabra final sobre atributos. Si quieres ponerte más nerdy y geeky al respecto, definitivamente echa un vistazo a esta página en w3schools.com. Pero esas son básicamente las cosas que quería mencionar sobre los atributos. Ahora siento que podemos seguir adelante y usar atributos a lo largo de nuestro proyecto. En el siguiente video, vamos a cubrir otros tres elementos importantes en HTML. Vamos a cubrir tablas, listas, y bloques. Te veré en el próximo. 8. Tablas, listas y bloques: En este video, vamos a cubrir tablas, listas, y bloques. Nuevamente, un gran lugar para empezar es en w3schools.com Tienen buena referencia para listas, tablas, y bloques aquí. A partir de listas, hay dos tipos de listas. Básicamente dentro de HTML, una lista desordenada, que es como puntos de punto, y una lista ordenada que es puntos que tienen un orden, por lo que en 1, 2, 3, 4. Empiezas estas listas de dos maneras diferentes. UL, para una lista desordenada así como esta y ol para una lista ordenada. Creo que si me desplaza aquí abajo, ahí estamos, ol. Eso marca la apertura de una lista. Eso marca el cierre de una lista. Entonces entre entre pondrás tus ítems de lista, que utiliza las etiquetas li. Hagámoslo ahora mismo en nuestro proyecto. Volvamos a nuestra página, navegue hasta nuestro editor de códigos. En lugar de tener aquí un párrafo, podemos tener una lista desordenada. Voy a abrir una lista desordenada y luego cerrarla enseguida para que no me olvide y luego voy a dentro de eso, poner algunos ítems de lista. Digamos integridad, digamos honestidad. Yo sólo estoy inventando cosas aquí, empoderamiento. Si presiono Guardar en eso, vuelve al documento, puedes ver aquí tenemos una lista desordenada. Para cambiar eso a una lista ordenada todo lo que necesito hacer es ir a la u y ul y cambiar eso a o para lista ordenada. Puedo volver atrás y ahora tendrá un número incrementante para cada uno de ellos. Ahora puedes llevar las listas más allá al tener tipos. Se pueden describir de diferentes maneras. Se puede hacer una lista de descripción. Honestamente, casi nunca hago este material avanzado con listas. A menudo es solo una lista desordenada o una lista ordenada y luego algunos puntos de punto. Nuevamente, puedes anidar dentro de estos también. Si querías tener un conjunto de puntos de punto dentro de un punto punto, puedes hacerlo también. Puedo poner en lista y desordenada aquí y poner en un punto sub-punto, integridad para los clientes, integridad para nuestras cosas. Guarda eso. Vuelve a aquí. Ahora se puede ver que es un sub punto de ese punto punto punto. Se pueden anidar listas ordenadas y listas desordenadas. Yo puedo cambiar eso a ordenado y ahora se puede ver se puede intercambiar los dos. Si quieres obtener más detalle con listas. Definitivamente echa un vistazo a esto en la referencia. Pero creo que más o menos cubre listas de una manera básica. No tengo que hacer cosas muy avanzadas para ser honesto. Eso cubre más o menos mucho de lo que hay que hacer con las listas. El siguiente que dije son mesas. Voy a dar click en tablas HTML aquí y puedes definir una tabla básica con la etiqueta de tabla. Entonces puedes definir una fila de tr. Puedes hacer que la primera fila sea una th, lo que significa que está ahí fila de encabezado, y luego cada celda se definirá con un td. Veamos qué tiene sentido aquí, se puede poner en una línea de tiempo aquí usando la tabla. Volveré a aquí, y crearé una tabla. Para la primera fila, va a ser una fila de encabezado así que en lugar de celdas de tabla regulares como aquí con td, vamos a dar la primera fila th. Voy a llamar a este th, enero de 2016. Entonces he sido otra. De nuevo, solo estoy inventando todo esto con fines de demostración. Ahorremos eso y veamos qué tenemos hasta ahora. Está bien. En este momento no tenemos borde de tabla, así que en realidad no verás el contorno de la tabla, pero llegaremos a eso en tan solo un segundo. Podemos agregar en una nueva fila y poner en algunas celdas de tabla ahora, que porque no es la primera fila, porque no es un encabezado, solo usará td. Después iniciamos nuestra empresa. Volviendo atrás, ahora se puede ver que está alineado en columnas, pero en realidad no se puede ver el contorno de la tabla. Si quisieras hacer eso, podemos agregar un atributo a la tabla para el borde. Echemos un vistazo a cómo hacemos eso. Si hago frontera. Ya veo que puedo aplicar algunos estilos, pero no vamos a hacer eso todavía porque aún no hemos llegado a esa parte del curso. Entonces una forma de la vieja escuela de darle una frontera a nuestra mesa es entrando aquí y escribiendo en la frontera 1. Si guardamos eso, vuelve aquí. Ahora obtenemos estas fronteras de la vieja escuela solo para ver que en realidad tenemos una mesa. Piensa que la forma moderna de hacerlo en estos días es formatear una tabla usando CSS. Pero aún no hemos llegado a CSS, así que lo guardaré un poco más tarde. Pero aquí se puede ver que tenemos una mesa. Ahora si quisiéramos agregar otra fila, podríamos hacerlo fácilmente agregando otra etiqueta tr y luego poniendo en celdas de tabla. A lo mejor podemos poner algunos comentarios sobre estos diferentes puntos de la línea de tiempo. Guarda ese movimiento y ya puedes ver que hemos añadido una nueva fila. Ahora si quieres que estas filas y columnas se expandan sobre múltiples columnas y filas, solo vamos a mostrar que ahora voy a eliminar una de las celdas de la tabla, así que sólo tenemos una aquí y ver qué hace eso. Tienes toda esta mesa, pero podemos ver que nos falta una celda aquí. ¿ Qué pasa si queremos que esta célula se extienda por toda la mesa? Bueno, podemos hacer eso dando un atributo a esta celda de tabla llamada colspan. Diré 2 porque quiero que abarque dos columnas en lugar de solo una y ahí tienes. Podemos hacer toda la alineación y el formato dentro de estas tablas, pero llegaremos a eso en CSS esencialmente si quisieras hacer lo mismo con las filas. A lo mejor agregamos en otro aquí, esto probablemente no tenga sentido, pero lo demostraré de todos modos. Podemos poner frente a esta fila lapso de tres. Presionaré Guardar en eso. Se puede ver que tenemos una columna que atraviesa tres filas. Eso son esencialmente mesas. Eso no tiene mucho sentido así que me voy a deshacer de esos tramos de filas ahora. Voy a deshacerme de esta tercera fila porque realmente no agrega nada. Ahí vamos. Tenemos un poco de historia en la que podríamos entrar, crear otra fila, otra columna poniendo en una nueva celda en cada una de estas filas. Ahí tienes, ahí hay mesas. Algo que diré de las tablas es que no confíes en ellas para estructurar tu documento HTML. Las mesas deben utilizarse sólo para las mesas. Si quisiera presentar cronología o tal vez un horario o algo que necesitara una mesa. Usaría una tabla, pero por tener columnas en una página y tener un diseño responsive. Las mesas no son las mejores y para eso lo grandioso son los bloques. Voy a volver a w3schools.com y dar clic en bloques HTML. El elemento de nivel de bloque más común que verás en HTML es de lejos la etiqueta div. Verás divs absolutamente en todas partes y un div por defecto siempre comenzará en una nueva línea y ocupará el ancho completo disponible. En lugar de hablar de ello, sólo voy a tirarlo ahora mismo y mostrarte qué es un buen lugar para ponerlo. Nuestro proyecto es un poco desordenado por el momento, pero lo que voy a hacer es poner en otra línea horizontal, poner en otro encabezamiento y digamos sólo Nuestros Servicios. Voy a poner en nuestra etiqueta div y dentro de la etiqueta div, voy a tener un poco de texto. Déjame ir a Lorem Ipsum. Este es un sitio web donde puedes obtener Lorem Ipsum. Es simplemente texto ficticio. Voy a poner eso ahí y luego voy a crear otro div debajo de él y volver a poner ese Lorem Ipsum. Yo voy a ahorrar eso, ve a aquí y verás que se rompe en una nueva línea. Pero a diferencia de los párrafos, no hay espacio entre ellos. este momento, supongo que realmente no necesariamente tiene sentido por qué tendrías un div. Pero a medida que avanzamos hacia el estilo y la estructuración de nuestro documento con CSS, verás lo flexible que es un div. Por ejemplo, si solo quisiera modificar esto sobre la marcha ahora mismo, puedo ver este div aquí. Puedo restringir el ancho del div. Voy a restringirlo a unos 100 píxeles, y entonces ahora sólo aparecerá con un ancho de 100 píxeles. Lo que puedo hacer es cambiar la pantalla para mostrar en línea. De nuevo, nos vamos a meter en esto más adelante. Pero si dijera eso para los dos divs, ancho, 100px y display inline-block. Ya verás que se presentan uno al lado del otro. Ese es solo uno de los ejemplos de cómo podemos modificar de la forma que queramos el contenido dentro de un div. Pero de nuevo, me estoy adelantando o necesitamos saber por ahora, es que los divs son buenos bloques de construcción de HTML y los verás mucho cuando estés desarrollando HTML y CSS. Tengo un elemento de nivel de bloque en HTML incluyen estos. Entonces por supuesto tienes elementos en línea. Estos no inician una nueva línea y sólo ocupan tanto ancho como sea necesario. Uno de los comunes que verás es un lapso. Un lapso te ayuda a modificar justo lo que hay dentro. No crea ningún nuevo relleno ni espaciado. De nuevo, lo mejor es mostrarte lo que quiero decir cuando digo esto. Si volviéramos a entrar en nuestro documento y yo iba a poner un lapso antes de maniquí y cerrar el lapso después. Eso me da control sobre este maniquí de una palabra. Yo puedo ir de estilo y puedo agregarle algunos estilos. Podría hacer el tamaño de la fuente mucho más grande que todo lo demás en ese párrafo. Puedo hacerlo tamaño de fuente 50 por ciento más grande y ahora se puede ver que la palabra es 50 por ciento más grande que todo lo demás en este div. Puedo usar esto para otro formato. Puedo atrevir diferentes partes. Puedo apuntar a diferentes partes, ponerles una clase. En cualquier momento que quieras apuntar o un cambio, solo una palabra o una frase, span es una buena opción. De nuevo, si te refieres al documento y a w3schools.com, ahí hay mucha información buena. Como dice aquí, el elemento div se utiliza a menudo como contenedor para otros elementos HTML. No tiene atributos requeridos, pero a menudo verás que habrá un estilo, una clase o una identificación. Estos métodos para poder apuntar y darle estilo al contenido. Casi puedes ver div como un grupo de contenido, pero también puedes hacer lo que quieras con él. Es básicamente un bloque de HTML al que puedes apuntar de forma individual y convertirlo en columnas, convertirlo en un cuadrado, convertirlo en lo que quieras. Muy ampliable. Mucho se puede hacer con div y creo que en lugar de hablar más al respecto, creo que empezarás a entender más sobre por qué div es poderoso a medida que pasamos. Especialmente una vez que nos metamos en la sección CSS, estaremos peinando muchos divs. Por ahora, eso es todo lo que necesitas saber sobre divs. Nos profundizaremos en ello a medida que avancemos. En el siguiente video, vamos a cubrir cómo elementos de diseño HTML. Espero verlos en el próximo. 9. Elementos de diseño: Muy bien, entonces en este breve video, quería repasar brevemente los elementos semánticos HTML5. Si vamos a la página de diseños HTML en w3schools.com, podemos desplazarnos aquí abajo y ver que HTML5 ofrece nuevos elementos semánticos que definen diferentes partes de la página web. Sólo para demostrar esto, aquí hay un ejemplo. En lugar de etiquetar las diferentes secciones como divs u otros elementos a nivel de bloque, lo están etiquetando con estas nuevas etiquetas, cabecera, nav, sección, artículo, a un lado, pie de página, detalles, resumen. Básicamente, lo único que realmente está sucediendo que es diferente aquí es el nombre, por lo que estos operan casi igual que un div, es simplemente más fácil de entender cuando creas un documento HTML que podrás entender la estructura y ver que esta etiqueta es un encabezado, esta etiqueta es una sección, esta etiqueta es un pie de página. Tan solo para traer esta vez, lo que quiero hacer es crear un nuevo archivo, así que voy a volver a mi Editor de código, donde tengo abierto el index.html. Voy a crear un nuevo archivo, y lo voy a guardar de inmediato para que sepamos que estamos trabajando con un documento HTML. Voy a ir a nuestro directorio de proyectos y voy a llamar a éste layout.html. Recuerda la primera parte de ese layout, no es demasiado importante. Puedes etiquetarlo lo que quieras, pero necesitas la extensión HTML de punto para que tu programa sepa que es HTML. Lo que voy a hacer es poner estas ventanas de lado a lado. En realidad antes de hacer eso, voy a “hacer clic derecho” en este ejemplo y sólo voy a copiar su ejemplo. Estoy usando el inspector aquí en Google Chrome. Es una función similar, estoy seguro en Safari y Firefox, pero básicamente, no necesariamente necesitas seguir aquí. Yo sólo voy a copiar lo que hay aquí y ponerlo en nuestro propio documento. Lo que voy a hacer es encontrar ese elemento que capte todo esto, y lo puedo ver por lo que está destacando. Vamos a “hacer clic derecho”, haga clic en “Editar como HTML”. Presione “Comando A” en un mapa para copiar todo ese HTML, tabular a través de mi layout.html, y ahora tenemos todo ese código. Pocas cosas de las que me voy a deshacer son las clases, cualquier clase porque eso va a ser tirando en una hoja de estilo que no tenemos. Eso sólo está en la página web de la W3School. También tenemos estas clases, pero podemos dejarlas un segundo. Lo que quiero mostrarles en este ejemplo es que si vamos a abrir una nueva pestaña aquí, y jalamos sobre layout.html, no se parece en nada a esto. Este es el punto que quiero atravesar aquí es que solo uso de estos elementos semánticos, no estamos dando el estilo de página. Todavía necesitamos usar CSS para obtener este diseño. Pero lo que estamos haciendo es cuando leemos el código, podemos ver, “Oh, eso es un encabezado, eso es una sección, eso es un artículo, eso es un pie de página”. Entonces también podemos en lugar de apuntar basado en clase, que es lo que tenemos aquí, podemos apuntar solo en el nombre del elemento. Pero de nuevo, me voy un poco a CSS, en que aún no nos hemos metido profundamente. Empezarás a ver eso una vez que entremos a la sección CSS. Pero en este video, solo quería compartir con ustedes estos elementos semánticos porque puede que los veas a menudo en HTML, y solo para que sepas que son más o menos lo mismo que un elemento de nivel de bloque como div, son sólo un poco más descriptivos. En el siguiente video vamos a pasar a formularios HTML. Los formularios son algo, probablemente te encuentres con muchos sitios web en desarrollo también. Entonces te veré en el siguiente video. 10. Formularios HTML: Está bien. En este video sobre formularios HTML, vamos una vez más a una referencia w3schools.com. Si te desplazas hacia abajo en este menú aquí encontrarás formularios HTML. Un formulario para aquellos de ustedes que no lo saben, creo que deberían encontrarlos mucho en línea. Debería ser bastante obvio, pero básicamente es solo esto donde tienes entrada y luego tienes un botón para enviar esos datos a algún lugar y luego obtienes un cierto resultado. Muy vago lo sé pero una vez que envías esos datos a algún lugar, puedes interpretarlos como quieras. Pero como estamos hablando solo de HTML y CSS en este curso en particular. Sólo voy a mostrarles cómo configurar realmente un formulario en el front end. Este recurso en W3Schools es bastante bueno para explicarlo. En primer lugar, vas a necesitar un elemento de forma y luego dentro de que vas a poner en diversas entradas. Entonces el tipo de entrada se determina por este atributo llamado tipo. Tenías algunos ejemplos aquí abajo. Se pueden hacer botones de radio. Puedes hacer un botón de enviar el cual en realidad enviará tu formulario y así lo que realmente hace el envío de tu formulario es que toma los datos y los envía a una página o dirección en particular. Eso lo determina la acción en la forma. También podemos establecer otros atributos en los que nos meteremos en tan solo un segundo. Se pone un poco técnico aquí con GET y post. Estas son dos formas de enviar datos. Esto se está metiendo un poco más en las cosas de back-end pero no debes preocuparte demasiado por eso. Esto es más sobre cómo configurar un formulario en HTML. Lo que voy a hacer en realidad es construir una forma en nuestro pequeño sitio web de ejemplo. Esta es la página Acerca de Nosotros y es bastante desordenado por el momento. Voy a deshacerme de este layout.html y lo voy a hacer es crear una página Contáctenos. Voy a presionar “Nuevo Archivo” y luego lo voy a guardar de inmediato para que sepa que es un archivo HTML y luego me voy a meter en los proyectos, vamos a llamarlo contact.html. Ahora lo que puedo hacer es simplemente configurar, en realidad voy a copiar algunas de estas cosas desde aquí, voy a copiar esta primera parte. Voy a copiar esta última parte. Entonces solo lo hice para ahorrar tiempo, sabía que iba a necesitar un título y un título de primer nivel. Simplemente copiaré eso al otro lado. Lo que voy a hacer es arrastrarlo a la derecha, abrir primero una nueva pestaña, y luego arrastrarla a la derecha a nuestro navegador para que podamos empezar a trabajar con ella. Ya no es página Acerca de Nosotros, así que voy a cambiar eso a Contáctenos, y luego lo que voy a hacer es poner en un div y luego poner en un formulario. Aquí estoy yo empezando un formulario y es muy simple, es solo forma. Si pongo eso, estoy bastante seguro de que no veremos nada del formulario. Todavía no hay entradas reales en él. Lo que podemos hacer es solo poner algunas entradas de texto. Hemos cubierto esto jugando en una etiqueta de formulario y ahora podemos poner en texto de tipo entrada. Entonces lo que voy a hacer es duplicar eso tres veces, pulsa “Guardar” y vuelve a la página y te mostraré lo que tenemos. Tengo estas tres cajas de texto. No hay etiquetas. No hay indicio de qué es esto. Es bastante no descriptivo pero al menos podemos ver algunas cosas dentro de nuestra forma. Lo que tenemos que hacer es darle algún formato, dar algunas etiquetas, luego también nombrar estas entradas para que no sean solo por lo mismo. El nombre es muy importante porque cuando enviamos los datos a la siguiente página o a la dirección, se va a emparejar el valor con el nombre de ese campo. En realidad se puede decir qué valor viene de dónde. Lo que voy a hacer ahora es darle un nombre a todos estos. El primero, haré nombre de pila. Segundo, apellido. En tercer lugar, el correo electrónico, y en realidad voy a hacer uno más por mensaje. Por supuesto, si solo guardamos que es solo un atributo. En realidad no va a aparecer en la página real. Lo que vamos a hacer es simplemente poner algo de texto sin procesar. Estoy haciendo para hacer nombre, apellido, correo electrónico, dirección, y su mensaje. Ahora lo otro que notarás es que todo está en la misma línea. Entonces si solo ponemos estas etiquetas va a ser todo en la misma línea. Voy a poner algunas etiquetas de descanso. En un futuro vamos a formatear esto con CSS y va a ser mucho más bonito. Pero por ahora solo podemos usar etiquetas de break para separarlas. Presionaremos “Guardar” y ahora tienes una forma muy básica, bastante fea. Pero al menos tenemos un formulario en nuestra página. Ahora este formulario no hará nada, claro, no tenemos un botón para enviar nada aún. Ese es el siguiente paso importante y lo que voy a hacer para eso es solo copiar esto. Asegúrate de que eso está dentro de las etiquetas de formulario, todo para tu formulario necesita estar dentro de esas para abrir y cerrar etiquetas de formulario. El valor aquí representa lo que va a estar en el botón. Si guardamos eso, retrocede, dirá, “presentar en el botón”. Podemos decir en lugar de eso lo que queramos, tal vez mandes mensaje. Ahorra, muévete y verás que ahora ha cambiado. Lo importante es que pones tipo enviar en lugar de escribir texto obviamente. Pero aparte de eso, casi tienes una forma y lo que quiero decir con eso es que necesitas otro atributo y eso es poner una acción en el formulario. Ahora mismo no tenemos back-end. Pero si tuviéramos un back-end, enviaríamos los datos de este formulario a una página, una página PHP o lo que sea nuestro back-end. Ese back-end tomará esos datos, validados y luego los colocará en una base de datos o iniciará el proceso. Después de que se presente el formulario, se requiere alguna programación a la que no vamos a entrar en este curso. Pero en términos de HTML, esto es básicamente como se ve una forma. Sólo te voy a dar un ejemplo aquí. Si le damos una acción a este formulario y esto es copiar exactamente lo que tienen aquí porque no tenemos que página en ninguna parte. Simplemente copiaremos eso, guarde eso. Vamos a volver a Contáctanos, vamos a ir a expandir completamente, y sólo voy a poner algunas cosas aquí. Tu mensaje, hola, y luego presionaré “Enviar mensaje” y veré qué pasa. Ya verás aquí y así será un poco confuso para las personas que son nuevas en el desarrollo web. Ya verás aquí que la primera parte es action_page.php. Que si recuerdas, ponemos como acción, y lo que se hace es un signo de interrogación y luego enviamos los pares de valor clave. Básicamente recuerda cuando dije, es importante cuando nombras tus campos. Se puede ver aquí que es nuestro campo de nombre porque lo nombramos así, y luego tenemos iguales y la entrada que ponemos. Este es el nombre y luego el valor. Entonces tenemos un fin, y luego se va de nuevo. Tenemos apellido igual a Dodd, correo electrónico igual, y así sucesivamente, así sucesivamente. Esos se llaman parámetros get y por defecto estamos enviando una solicitud get. Nuevamente, se está poniendo bastante técnico pero aquí abajo también podemos enviar una solicitud de post. En ocasiones no se quiere usar una solicitud get porque envía esta inflamación en la URL. Lo cual es un poco de riesgo para la seguridad tal vez. Si estás enviando información sensible o personal probablemente quieras usar el método de publicación y usar post, eres capaz de enviar esos datos y en realidad no se abre paso a la URL. También puede usar el conjunto de campos aquí para agrupar datos relacionados en un formulario que sea útil cuando se desea aplicar estilo. También puedes usar una etiqueta llamada leyenda que definirá una leyenda para ese conjunto de campos. Pero entraremos en formas de peinado más adelante en esta clase. Por ahora, tenemos nuestra página Contáctenos, es muy básica y fea, admito pero al menos tenemos un formulario ahí. Esperemos que eso te traiga un poco las formas caseras. En el siguiente video, vamos a repasar [inaudibles] activos, símbolos, y entidades. Te veré entonces. 11. Conjuntos de caracteres, entidades y símbolos: En este video, vamos a cubrir entidades, símbolos, y charset. Este probablemente será otro breve porque estos no suelen surgir cuando se desarrollan en HTML, al menos para mí, pero es importante saber cuáles son estos y cómo usarlos cuando sí los necesitas. Usando W3Schools, voy a dar click en Entidades HTML. Aquí verás que hay algunos caracteres reservados en HTML. Ahora bien, ¿qué significa todo eso? Bueno, sólo veamos nuestro código aquí. Algunos de estos personajes que estamos usando, estamos usando un signo menos que y un signo mayor que, bastante a menudo, estamos usando comillas, estamos usando signo igual. Estos se utilizan para conformar HTML. El problema que podrías encontrar cuando estás desarrollando HTML es que a veces solo quieres que el signo menos que, mayor que el que aparezca en tu pantalla. Pero entonces por supuesto, cuando lo estás poniendo aquí, tu software y el navegador, podrían interpretarlo como HTML, o que estás intentando crear HTML. El menor que, mayor que el ejemplo es probablemente el más común. Como puedes ver aquí, el navegador podría mezclarlas con etiquetas. Si querías escribir un signo menos que, necesitamos usar una entidad HTML. Aquí te dicen cuáles puedes usar. Si volvemos a la página Acerca de Nosotros y tal vez queremos poner en nuestro enlace, dos flechas hacia atrás. Podemos poner, creo que necesitamos poner un punto y coma después de esto, y luego presionamos Guardar. Ahora podemos ver que tenemos dos flechas o dos menos que signos. En este extremo, por el lado HTML, tienes estas entidades HTML de aspecto extraño, pero cuando llega al navegador, puedes ver que es perfectamente lo que necesitamos, dos menos que signos. Esa es una entidad HTML común ahí. Si bajamos a un espacio que no rompe. En HTML, si escribes 10 espacios en tu texto, tu navegador los eliminará todos excepto uno. Para conseguir la separación entre palabras, permitirá una, pero luego si tuvieras que poner en más espacios, simplemente lo recortará. Vamos a mostrarles un ejemplo de esto. En realidad tenemos el ejemplo aquí mismo. Hola, adiós. Si nos deshacemos de esa etiqueta br, así que está en la misma línea. puede ver que se corta a un solo espacio. No importa cuántas veces espaciemos por aquí y creemos espacio en blanco, lo corta a un carácter de espacio en blanco. ¿ Cómo logramos evitar eso? Podemos usar un espacio no rompiente. Puedo copiar esta pequeña entidad HTML y en lugar de tener todo este espacio, vas a tener algunos espacios no rompientes. Obviamente, si quieres una tonelada de espacio en blanco, esto se va a poner bastante feo, pero tal vez solo querías un poco de espacio en el medio. Ponerlo en un par de veces probablemente no sea tan grande de un trato. Ahí vas. Tenemos algunas entidades HTML para anular ese comportamiento y decirle a nuestro navegador, oye, queremos un espacio en blanco aquí no lo corten a un solo espacio. Si vuelvo a la página, nos dirá algunas otras entidades de caracteres HTML útiles. Básicamente, cada vez que estés queriendo poner uno de estos personajes en tu proyecto y estás encontrando que simplemente no está funcionando, probablemente necesites poner en una entidad de caracteres HTML. Definitivamente me referí a esta página u otras páginas en Internet para saber cuál es la entidad apropiada. Pero esencialmente, los principales son el espacio no rompiente y los símbolos que ya están en HTML, más comúnmente menor que y mayor que. Apenas brevemente ahora vamos a entrar en símbolos, y símbolos que son similares en el sentido que usamos estos códigos raros para poner un símbolo, pero no está en conflicto con los caracteres que usamos para crear HTML. En pocas palabras, si quisiéramos mostrar un signo del euro, podríamos usar una entidad HTML. Parece que puedes usar un nombre, puedes usar un número de entidad, un decimal o una referencia hexadecimal aquí. No hay necesidad de recordar todos estos. Es solo que si quieres poner un signo de euro o un signo de libra o algún símbolo extraño, solo tendrías que buscar cuál es el número, entidad o nombre y justo cómo se muestra eso. Por lo general, estas entidades y símbolos comienzan con un signo &. Si ves un & y luego un nombre, o algún código así, probablemente estés mirando un símbolo o una entidad. Sí, si necesitas poner un letrero de derechos de autor o algo así, cualquier símbolo, busca estas referencias para los símbolos. Por último, charset. Charset es algo que pones en tu metaetiqueta. Como puedes ver cuando te desplazas hacia abajo, hay algunas diferencias entre diferentes conjuntos de caracteres. A veces es posible que desee establecer el conjunto de caracteres específicamente, y luego averiguar cuál sería la diferencia en entidad haciendo ese conjunto de caracteres. Si miras aquí, muchos de ellos son más o menos iguales. Digamos aquí abajo, menos que signo es lo mismo. Mayor que signo es lo mismo en todos ellos. Es un poco difícil detectar las diferencias en realidad, pero hay algunas diferencias. Básicamente, a veces es posible que necesites elegir tu conjunto de caracteres. No es algo que hay que hacer a menudo, pero se vincula bien con entidades y símbolos. Charset será el conjunto de caracteres, entonces entidades y símbolos es lo que usarías para crear esos símbolos y caracteres a lo largo de tu proyecto. Espero que eso te diera algo de claridad para cuando veas algo como esto en HTML, sabrás que esto es probablemente un símbolo o una entidad, y puedes buscar lo que es o probarlo tú mismo e incorporarlo a tus proyectos. Eso cubre conjunto de caracteres, entidades, y símbolos. En el siguiente video vamos a terminar hablando del cuerpo HTML, y vamos a cubrir algunos otros elementos que tal vez quieras utilizar en tu proyecto. Te veré en el próximo. 12. Otros elementos del cuerpo HTML: Este es el video final que haré al cubrir los elementos del cuerpo del HTML. Hemos cubierto bastantes elementos corporales que usarías en HTML. Al menos los realmente comunes como encabezados, párrafos, botones, imágenes, enlaces, tablas. Todos estos son bastante comunes y probablemente conforman más de la mitad de cuando vas a estar desarrollando HTML, por supuesto Dibs también, aquí abajo y elementos a nivel de bloque. Pero en este video, solo quería cubrir algunos otros que quizá te encuentres. Nuevamente, si hay algo que no hayamos cubierto, HTML es bastante expansivo, así que siéntete libre de volver a este sitio web u otro sitio web y referencia. No voy a ir a explicar cada elemento HTML que está disponible porque haría el curso muy grande y así me estoy centrando en los más importantes aquí. En este video, sólo quería mostrarles algunos otros. Una es HTML Iframe. Entonces como puedes ver aquí, tenemos como casi una ventana dentro de nuestra página web. Si ves esta etiqueta, “iframe”, básicamente puedes tomar cualquier sitio web que quieras, poner la URL en esos campos SRC, y luego ciertamente tienes un sitio web dentro de tu sitio web. No es tan común porque no hay mucha razón para poner un sitio web dentro de un sitio web, pero es posible que aún lo veas. Es una especie de cosa de la vieja escuela, creo. Otra cosa que es nueva en HTML5 son los medios. Por lo que has visto incrustando imágenes, pero ahora puedes incrustar video. Antes de que saliera HTML5, muchos navegadores confiaban en flash, pero ahora si incruste un video de YouTube y cavas lo suficientemente profundo en él, verás que está usando video HTML5. Es posible que veas una etiqueta que dice video y puedes establecer el ancho y la altura y los controles, poniendo estos atributos para obtener la fuente. bastante cool. Es la nueva versión de la web, está soportando todo tipo de medios y también puedes incrustar audio también. Aquí abajo podrías ver una etiqueta de audio, funciona bastante similar a la etiqueta de video y luego si quieres bajar a esta referencia en YouTube, puedes ver que puedes reproducir un video de YouTube con un iFrame. Algunas cosas avanzadas que tienes en HTML, puedes dibujar gráficos en tu pantalla usando HTML, puedes geo-ubicar, para que puedas determinar la ubicación de la persona que usa tu sitio web en función de su navegador. Puedes arrastrar y soltar elementos, almacenamiento web, trabajadores web y esto entra un poco en el lado más complicado del HTML, y luego tienes toda esta referencia aquí. Yo sólo quería dejarlo ahí fuera con cuerpo HTML. De nuevo, hay mucha profundidad contigo entra en eso y si ves una etiqueta que no entiendes, si ves algo como esto y no sabes lo que es un Iframe, solo búscalo, solo entra en Google y sé como Iframe, por ejemplo elemento HTML, y luego empezarás a obtener toda esta información. En el siguiente video, quería cubrir la otra sección de HTML, que es la sección de cabecera. Te veré en esa. 13. Encabezado HTML: En este video, vamos a cubrir la sección principal de nuestro documento HTML. Nuevamente, vamos a hacer referencia a W3Schools.com porque tienen un artículo bastante bueno sobre los diferentes elementos que podemos incluir en una sección de cabeza. Simplemente es accesible a través de este menú aquí, puedes hacer click en cabeza HTML y luego puedes consultar los diferentes elementos que podemos poner en nuestra sección de cabezales. Por supuesto que hay tittle que ya hemos incluido en nuestro proyecto aquí. Si tuviéramos que quitar el título por completo y hacer clic en “Guardar” en eso, volver a esa página, mira lo que pasa con el título aquí. Lo que pasa es que cambia al nombre del archivo el cual no va a ser el nombre más apropiado con mayor frecuencia. Va a tener la extensión en él, índice HTML no es un encabezado o título muy fácil de usar para la página. Voy a presionar “Guardar” para llevarlo de vuelta a Sobre Nosotros. El siguiente apartado es la etiqueta de estilo y a medida que pasemos a CSS, estaremos usando la etiqueta de estilo para incrustar estilo en una página web en particular pero por ahora solo te mostraré cómo podríamos usarlo de inmediato. Voy a copiar este ejemplo aquí, ir a nuestra página pero luego entrar a nuestro editor de códigos. Voy a abrir un poco de espacio aquí en nuestra sección de cabeza y voy a poner en nuestro estilo. Con sangría, presiona “Guardar”, refresca y podemos ver que nuestro encabezado de nivel superior es rojo y, ¿qué más está definiendo? El encabezado de nivel superior es rojo, nuestro color de fondo es azul polvo y nuestro color de párrafo es azul. Esto es útil cuando solo tienes una página a la que quieres aplicar estilos, pero digamos por ejemplo que tienes un sitio web con varias páginas que vas a querer poner tus estilos en un archivo separado al que hacen referencia las páginas que lo necesitan. De hecho, si miramos el siguiente ejemplo de este documento, podemos ver el elemento de enlace que es exactamente lo que acabo de describir. Es tirar de un documento externo con tus estilos en tu proyecto. Vamos a hacer esto en la sección sobre CSS así que ahora quiero crear un archivo entero y mostrarte eso como ejemplo. Pero básicamente solo para ver cómo se ve en lugar de tener todos estos estilos, solo tendrías un enlace a una hoja de estilo externa y importaría básicamente todos esos estilos. Voy a deshacerme de ambos para esos, el siguiente es meta. El meta descripción es utilizado principalmente por los motores de búsqueda, es utilizado por los navegadores así como sobre cómo mostrar contenido y otros servicios web pero la mayor razón para usar palabras clave meta, descripciones y títulos es para los motores de búsqueda. Porque los motores de búsqueda, si escribes algo aleatorio en Google como digamos curso HTML, lo que viene aquí en estos resultados está determinado por tu meta información por lo que el SEO es muy importante y quieres tener eso optimizado. Como puedes ver aquí, podemos poner en una meta descripción, puedes poner algunas palabras clave que he oído no es demasiado relevante en el día y la edad de hoy con SEO porque Google es mucho más sofisticado que solo darle palabras clave, pero puedes definir al autor y puedes establecer cosas aleatorias como refrescar la página cada 30 segundos No estoy seguro por qué querrías hacer eso pero esa es una opción también. Un buen ejemplo aquí es dar a una página alguna descripción, palabras clave y autor. Otra cosa que puedes hacer es establecer la ventanilla. HTML 5 introdujo un nuevo método para permitir que los diseñadores web tomen el control de la ventanilla a través de la metaetiqueta. Básicamente lo que eso significa es que si comienzas a crear este diseño responsivo móvil en cualquiera de estas páginas, puede que no funcione sin poner esta pequeña etiqueta. Esto es solo un poco de requisito previo para el diseño web responsive pero nos meteremos en eso cuando hablemos de diseño responsive en la sección CSS. Otra cosa que puedes incluir en la cabeza es una etiqueta de guión. Al igual que mostramos en el ejemplo anterior, podemos incrustar algunos estilos pero también podemos incrustar scripts. En lugar de hacer eso, puedo agarrar esto y esto en realidad no va a funcionar porque no tenemos un elemento por el ID de demo que es lo que está tratando de apuntar, pero podemos poner en HTML de todos modos y creo que obtendremos probablemente un error de JavaScript aquí, estamos enviando una función. En realidad todo lo que está haciendo es enviar una función, pero de nuevo no estamos cubriendo JavaScript en este curso en particular, solo debes saber que puedes incluir JavaScript la misma manera que incluirías unas hojas de estilo así, puedes enlazar un documento JavaScript externo pero luego también puedes incrustarlo igual que hemos hecho aquí para que sus scripts se ejecuten justo en esa página. Este es algo que realmente no uso con tanta frecuencia pero puedes especificar un elemento base y da un objetivo base para todas las URL relativas de la página. También puedes ver aquí que en realidad puedes omitir cabeza y cuerpo HTML, pero realmente no lo recomendaría y W3Schools tampoco lo recomienda así que asegúrate de incluir esos elementos. Ahí tienes, aquí hay un poquito de resumen. Se puede poner un título, enlace base a un documento o recurso externo, poner metadatos sobre ese documento, incluir algo de JavaScript e incluir alguna información de estilo en la cabecera. Eso más o menos cubre la cabeza, vamos a empezar a ver como nos desarrollamos con CSS, estaremos vinculando y poniendo algunos estilos aquí para que vengan por siempre pero por ahora, el título es suficiente para ponernos en la cabeza. En el siguiente video, voy a terminar de hablar de HTML hablando de cómo podemos formatear HTML sin CSS. Eso proporcionará un buen segue en peinar nuestro documento con el siguiente tema y uno realmente importante, CSS. Te veré en el siguiente video. 14. Formato HTML: Para terminar nuestra sección sobre HTML, voy a cubrir el formato HTML. El motivo por el que dejé esto hasta el final es porque pensé que proporcionaría un buen segue en CSS y puedes empezar a ver cuáles son las opciones de formato disponibles en HTML, tan limitadas son, y cuánto más puedes lograr usando CSS. Volvamos a nuestro buen amigo w3schools.com y vamos al formato HTML. Las principales cosas que puedes hacer es texto en negrita, cursiva, enfatizar, hacerlo más pequeño y hacer subíndice y superíndice. Probablemente los principales son audaces y cursiva. Puedes bajar aquí y ver que si queremos negrita algún texto, solo podemos usar un B, pero B es una etiqueta de la vieja escuela para usar. A menudo en estos días, si quieres atrevir algo o enfatizar algo, usarías fuerte. Vamos a entrar y mostrar fuerte en acción ahora mismo. En nuestra página “Acerca de nosotros”, solo hagamos que este “hola” sea audaz. Todo lo que tenemos que hacer es envolver unas etiquetas a su alrededor y luego ciertamente tenemos fuertes. Cosas muy básicas. Una vez que vamos a HTML cursiva y EM, es algo similar. Podemos usar I para cursiva o podemos usar EM para enfatizado, y de nuevo, ha agregado importancia semántica y es más común en HTML moderno usar EM distinto de I. prácticamente nunca veo más estos días. Definitivamente recomendaría si estás haciendo cursiva, elige EM. Podemos envolver adiós en EM y luego ciertamente tenemos texto audaz y en cursiva. También puedes usar small para cuando quieras texto más pequeño dentro de un elemento de encabezado. Si tenemos sobre nosotros, y tal vez quisimos poner en texto más pequeño, nuestra historia y valores. Sólo para prefaciar lo que está por venir. Si guardo eso, verás que lo que hemos envuelto en las pequeñas etiquetas viene más pequeño, un poco más pequeño. Nuevamente, si no te gusta nada de cómo se peina esto, somos capaces de apuntar a todo en estas etiquetas. Podemos decir, quiero que elementos fuertes actúen así o se vean así. Yo quiero que EM enfatizó elementos para que se vean así. Quiero que los pequeños elementos se vean así. Eso es todo lo que podemos hacer con CSS. Si no es lo suficientemente pequeño para tu carencia, aún así úsalo porque te dará algún buen segmentación y luego te seguiré en la sección CSS, porque te mostraremos cómo peinar las cosas como quieras. Es otra para Mac, que no creo que haya usado antes. Pero puedes resaltar partes del texto. Entraré aquí y solo pondré una marca ahí. Cosas muy básicas. Solo estamos poniendo texto y estamos poniendo etiquetas que lo rodean para darle un poco de estilo. Aquí hay un montón de otros. No voy a ir a ponerlos a todos en un proyecto. Son bastante autoexplicativas. Pero sí, puedes referirlo aquí abajo y ver qué puedes hacer en HTML con formato HTML. Lo que voy a decir en el formato HTML es que es bastante limitado y por eso seguro necesitamos CSS para hacer esas hermosas páginas web. Esto actualmente se ve terrible y realmente no podemos hacer que esto se vea bien sin CSS. Pero estos elementos que aún verás a lo largo de tu tiempo mirando al HTML, porque definen importancia semántica. Si fuera a poner algún texto y luego definirlo como fuerte, eso me da un objetivo por el que pasar y en mi hoja de estilo, decir que todo el texto fuerte debe tener un estilo o comportamiento particular. Eso lo ves en la sección CSS, pero para estructurar y poder apuntar a diversas partes de tu página. Si quieres algo audaz, debes seguir usando el formato HTML como fuerte y luego si quieres cambiar ese estilo en particular, podemos hacerlo con CSS. Eso es todo lo que quería cubrir en HTML. Una vez que entiendes las etiquetas, una vez que entiendes la diferencia entre cabeza y cuerpo y entiendes atributos, estás bastante configurado con HTML que cubre la mayor parte de lo que necesitas saber del HTML. En el siguiente video, vamos a saltar a CSS y empezar a aprender algo de CSS. Ese será el segundo tema de nuestro curso aquí. Te veré en el siguiente video. 15. Primeros pasos con CSS: En este video, vamos a empezar con CSS y para esta sección de la clase, vamos a referir nuevamente a Escuelas W3. Pasando ahora al menú CSS y haciendo clic en “Introducción”, nos llevan de vuelta al lugar que iniciamos cuando introdujimos CSS por primera vez. Ahora para introducir CSS en nuestro proyecto, voy a cambiar a nuestro editor de código. Si ven aquí, ya tenemos un ejemplo de CSS en nuestro proyecto. Aquí mismo, tenemos una etiqueta P y tenemos un atributo en ella, estilo de código. El estilo es un atributo que nos permite aplicar CSS a cualquier elemento en particular. Se puede ver en esta particular etiqueta P, tenemos un atributo de estilo, y dentro de ese atributo, tenemos una regla CSS que define el color verde. Entonces si vuelvo al documento, hemos abierto, se puede ver que el primer párrafo es verde, justo donde lo ponemos aquí. Eso se llama un estilo en línea. Pero a lo mejor queríamos tener un estilo que se aplicara a todas las p. Entonces lo que podría hacer aquí, si fuera a hacerlo estilos en línea es solo copiar y pegar eso y entonces mi segundo párrafo también sería el color verde. Sólo veamos eso. Ahora una vez tenemos muchos más párrafos y tal vez quisimos poner estilos en encabezamientos también. En nuestros divs. Puede empezar a ponerse bastante desordenado y podemos empezar a repetirnos un montón de veces. Si tuviéramos como 10 diferentes P y las teníamos todas con estilo, color verde. Es mejor solo definir una regla de que todas las p tengan el color verde. Ahí es cuando podemos empezar a usar selectores CSS. Ahora entraremos en sintaxis en el siguiente video. Pero por ahora, les estoy mostrando la segunda forma en que podemos incluir estilos en nuestro proyecto y en realidad lo vimos en la lección anterior en cabeza HTML. Voy a subir a mi sección de cabeza aquí, crear una línea tras título y abrir algunas etiquetas de estilo. Entonces una vez que tengamos estas etiquetas de estilo de apertura y cierre, podemos empezar a poner algo de CSS puro y haremos la sintaxis en el siguiente video. Entonces, no te pongas demasiado al día con lo que está pasando aquí. Pero en lugar de tener un color verde aplicado a cada P usando un atributo de estilo, voy a deshacerme de eso y poner esa regla aquí arriba. Cómo haría eso es presionar “P” para apuntar a todas las p. Abre algunos corchetes rizados para definir una regla que iría sólo a ese selector y luego voy a poner en el mismo estilo que antes, color verde. Cuando guardamos esto, esperemos ver todos los párrafos o las etiquetas P sean del color verde. Ahí ves, en realidad hay un segundo párrafo aquí para “Hola, adiós”. Ese también se ve afectado. Por lo que le hemos dado un selector y dado a eso una regla. Entraremos en sintaxis en el siguiente video. ¿ Qué pasa si queremos aplicar el color verde a cada P? No es sólo en esta página web en particular, sino a través de todas nuestras páginas web en nuestro sitio web. Bueno, la mejor manera de hacerlo sería crear una hoja de estilo externa, poner las reglas en la hoja de estilo externa, y simplemente vincularlas a nuestros documentos HTML. Entonces de nuevo, lo cubrimos en la sección de cabecera HTML, pero solo voy a volver atrás y mostrarles. Entonces volvamos a las escuelas W3. Voy a abrir HTML en una nueva sección y bajar a “HTML Head”. Nos desplazamos hacia abajo, puedes ver, sí, podemos insertar estilos para una sola página HTML o podemos enlazar a una hoja de estilos externa y luego copiar esos estilos a través de todas nuestras páginas. Voy a copiar ese ejemplo, ponerlo en donde teníamos nuestras etiquetas de estilo y hablemos de lo que está pasando aquí. Por lo que esta etiqueta de enlace es una etiqueta de autocierre, no necesitamos poner una etiqueta de cierre al final. Tenemos dos atributos en él. El primero es REL, y define qué tipo de archivo es. Es una hoja de estilo. Todo lo que tienes que hacer es simplemente llamarlo una hoja de estilo en el atributo REL, luego el segundo atributo define dónde se encuentra la hoja de estilo real. Yo quiero llamar al mío style.css, no a mi style.css, y voy a guardar eso. Volvamos a nuestra página. No notarías nada diferente aparte de obviamente los estilos que acabamos de quitar. No va a explotar tu página web ni nada pero si entro a mi consola, puedes ver que es decir que hay archivo de época no encontrado y eso es porque en realidad aún no hemos creado el archivo. Entonces lo que voy a hacer, es entrar en “Atom”, crear un nuevo archivo, y guardar esto de inmediato como style.css. Entonces vayamos en style.css. Aquí se aplica la misma regla con HTML. Definitivamente necesitamos el pot HTML dot, pero para la primera parte esencialmente podemos llamarlo como quieras. Voy a hacer clic en “Guardar” en eso y ahora si volvemos atrás y recargamos la página, y luego vuelvo a revisar mi consola, no hay errores. Pero claro que no pasa nada porque aún no hemos establecido ninguna regla. Entonces voy a establecer esa misma regla que teníamos antes, P color verde. Volvamos atrás. [ inaudible], ahora todos los párrafos son verdes, porque hemos vinculado esa hoja de estilo externa a este proyecto. Podemos hacer referencia a esta hoja de estilo, esa es una hoja de estilo a lo largo de todas nuestras páginas web de nuestro proyecto. Si quisiéramos entrar en contacto aquí, podríamos poner exactamente el mismo enlace y no tenemos que reescribir nuestros estilos cada vez. Entonces ahí lo tienes. Eso cubre las tres formas de poner en CSS en un documento. Podemos hacerlo en línea a través de una etiqueta de estilo como mostramos antes. , si solo quisiéramos apuntar a un estilo que no tiene sentido crear una regla, podemos crear una etiqueta de estilo en una cabeza aquí, y simplemente definir todas las P con el color del verde. O simplemente podemos deshacernos de eso y poner todos esos estilos en una hoja de estilos, que es la forma más limpia de hacerlo con mayor frecuencia, sobre todo cuando tu proyecto se hace más grande, vas a estar reutilizando mucho los estilos. Definitivamente una buena idea tener una hoja de estilo y a partir de ahora nos vamos a centrar en poner nuestros estilos en sus propias hojas de estilo. En el siguiente video vamos a entrar en sintaxis. ¿ Cómo escribimos realmente todas estas reglas y cómo funciona? Sí. Te veré en el siguiente video. 16. Sintaxis básica y selectores: Entonces en el último video, incluimos CSS en nuestro proyecto y empezamos con nuestra regla de estilo individual aplicada aquí en línea en la etiqueta p, pero luego definimos una regla arriba en la sección de cabeza también y luego ahora tenemos una hoja de estilo externa para trabajar con. Entonces para empezar con Sintaxis, de nuevo, voy a volver a cerrar esta pestaña y luego volver a la página de Sintaxis en w3schools. Aquí puedes ver una bonita representación visual de un CSS. Entonces la primera parte que tenemos es un selector, y luego tenemos el bloque de declaración. Entonces es simple en el sentido de que sólo hay dos partes. Tenemos este selector y el bloque de declaración. Dentro del bloque de declaración tenemos definidas estas diferentes opciones. Entonces la primera parte es la propiedad y la segunda parte es el valor. Entonces cuando pusimos el color a verde, estábamos ajustando la propiedad del color al valor del verde. Podemos separar reglas con punto y coma aquí. De hecho, deberíamos, y cada regla de un punto y coma sólo por el bien de integridad. Eso nos salvará de cuando le pongamos uno nuevo, no olvidaremos poner el punto y coma y no se romperá. lo que aquí en el ejemplo puedes ver esto establecerá todos los elementos p alineados al centro con un color de texto rojo. Por lo que este es otro atributo que puedes usar para centrar el texto. También puedes alinear a la izquierda o a la derecha dependiendo de a qué cambies este valor. Pero puedes ver aquí con este selector, es solo p, lo que significa que todos los elementos con ese nombre se cambiarán a color rojo con texto alineado al centro. Entonces la primera parte es el selector, por supuesto, y hay diferentes selectores que podemos usar para encontrar o seleccionar elementos HTML basados en el nombre del elemento, id, clase, atributo, y prácticamente cualquier cosa. Por lo que mientras puedas diferenciar atributos por cualquiera de estas partes, podrás apuntar a elementos específicos o grupos de elementos. Entonces el primero es el selector de elementos. Por lo que selecciona todos los elementos en función del nombre del elemento. Tenemos el mismo ejemplo otra vez. Estamos seleccionando todas las etiquetas p. El siguiente es el selector id. Entonces esto si quisiéramos seleccionar un elemento en particular. Entonces creo que la mejor manera de mostrar esto es sumergirse directamente en el código. Pero cómo hacemos esto es con un hash. Entonces lo que voy a hacer, hay dos partes para esto. Voy a mi editor, ve a mi HTML. Digamos que este rubro en particular queríamos hacer efecto. Entonces lo que hago es darle el atributo de id Así que le voy a dar id de segundo encabezamiento, digamos. Entonces ahora lo que he hecho es que acabo de darle a esto un identificador único que podemos usar para apuntarlo. Entonces si vuelvo a style.css, puedo usar el hash. Recuerda hash con id y puedo hacer segundo encabezado y luego abriré un corchetes rizados y ¿qué estilo se debe aplicar aquí? A ver. Ya hemos hecho colores, así que tal vez hagamos subrayado texto-decoración. Entonces ahora es decir cualquier cosa con el id del segundo encabezamiento, solo deberíamos ser uno porque id debería aplicarse a un solo elemento de la página. Le daremos un subrayado. Entonces volvamos a nuestra página y echemos un vistazo y ahí tienes. Nuestro rubro que definimos con el id de segundo encabezamiento tiene la decoración de texto ahora de subrayado. Pasando por los selectores. El siguiente es el selector de clases, y el selector de clases funciona muy similar al selector de id, excepto que éste se utiliza para seleccionar múltiples elementos. Entonces, por ejemplo, si entramos en nuestro documento aquí y tal vez este div, y vamos a tener algunos de estos div-s. Queríamos darle cierta clase, que vamos a cambiar los estilos. Entonces solo voy a saltar justo dentro y hacerlo igual que hicimos con id Voy a hacer clase en lugar de id, y voy a llamar a este div especial. Entonces voy a guardar eso, entra en style.css y cómo podemos apuntar una clase es en lugar de usar un hash o un signo de libra, usaremos un punto. Entonces entraré con un punto y diré especial-div. Ahora, ¿qué debemos hacer con un div especial-div? Usemos ese ejemplo text-align y lo alinearemos text-a la derecha. Entonces presiona “Guardar” en eso. Ahora tenemos la regla basada en este selector. También hemos definido la clase en el elemento HTML real. Entonces ahora cuando presionamos esto, deberíamos ver que el primer párrafo o este pero primero div aquí, todos los textos dentro de él están alineados a la derecha. Ahora si quisiéramos volver a hacer esto, todo lo que haríamos es tener otro div con la clase de div especial. Recuerde que las clases están pensadas para ser puestas en múltiples elementos, mientras que los id son solo para un elemento de la página. Entonces ahora si volvemos aquí, veremos que cada div con la clase de div especial va a tener la regla de text-align justo sobre ella. En tanto que este es solo un div y no tiene clase ni div especial. Por lo que tiene el comportamiento por defecto. Volviendo al documento aquí, también podemos utilizar una combinación de elementos y selección de clases. Entonces como puedes ver aquí, tenemos la p y tenemos un centro de puntos. Entonces esto básicamente dice que si tienes un p con la clase de centro, aplica esta regla. Por lo que necesitas tener dos cosas: necesitas tener la clase en este elemento al que quieres apuntar, y también tiene que ser de ese elemento en particular. Entonces voy a copiar y pegar eso ahora mismo en realidad, y demostrarlo. Entonces lo he copiado ahí dentro, y ahora voy a encontrar un párrafo. Vamos a hacer mi primer párrafo y darle la clase de lo que era la clase otra vez? Centro. Entonces le damos esa clase. Vuelve a aquí, y ahora podemos ver que es rojo y centrado. También podemos combinar con id también. Entonces tal vez sólo queríamos apuntar al rumbo dos con una identificación de segundo rumbo. A lo mejor le pusimos un segundo encabezado a otro elemento que no era un h2. Podemos hacerlo realmente específico y decir que sólo h2's con un id de segundo encabezamiento, se aplicará el estilo. Entonces sólo voy a volver aquí y poner h2 delante allá y vamos a ver el mismo resultado. Entonces si guardo y cruzo, verán el mismo resultado si pongo un segundo encabezado en algo que no era un h2. Entonces tal vez ponga el segundo rumbo aquí arriba. Lo cual por cierto no es buena idea porque ya estamos rompiendo la regla de tener solo un id para cada elemento. Pero justo como ejemplo, si vuelvo a aquí, verán que la decoración de texto de subrayado no se aplica a este rubro en particular porque no comparte los mismos elementos y regla id. Entonces si nos quitamos esa parte del elemento y volvemos, verás que subraya. Entonces ojalá eso tenga sentido. Voy a quitar este id del encabezamiento uno porque se supone que sólo debemos usar una identificación en particular una vez en un documento. Entonces sí, intenta quedártelo. Si tienes un id en particular que se supone que define un elemento, si quieres afectar a varios elementos que definas, puedes usar clase. Por lo que volviendo a Sintaxis y selectores de nuevo, también puedes agrupar selectores que no tengas que repetirte una y otra vez. Entonces en este ejemplo, se ve h1, h2, y p todos tienen las mismas reglas CSS. Entonces lo que podemos hacer es minimizar eso solo poniendo comas. Entonces en lugar de esto, podemos hacer esto. Otra cosa es un comentario, y esto se usa para explicar código y podemos hacerlo abriendo con una tira y luego el asterisco, y luego cerrando con un asterisco y una varilla. Por lo que los comentarios solo te dan la capacidad anotar tu código para que sea más fácil de entender para que alguien lo lea, solo pongamos aquí comentario arbitrario, y diré que subrayaré todos los segundos encabezados. Se puede ver mi software de edición de código sabe que este es un comentario y lo tiene desvanecido. Entonces esos son los selectores de sintaxis básicos. Hay algunos más avanzados a los que vamos a entrar en un video posterior. Pero esencialmente lo que tienes es tu selector de elementos, tienes selectores de id, tienes clase y también puedes combinarlos. En realidad, puedes combinar los tres en uno. Diga por ejemplo, que tenía una p con la id del segundo encabezamiento y la clase de div especial, podría escribir algo como esto. Por lo que podrías hacer especial-div, segundo rubro. Pero ahora te estás volviendo un poco demasiado loco con los selectores. No suele haber una razón por la que necesitarías hacer algo así. Muy bien, así que eso cubre la sintaxis básica. En el siguiente video, vamos a cubrir la jerarquía CSS, y esto es lo que le da a CSS el nombre de Hojas de Estilo en Cascading porque como verás en el siguiente video, hay una jerarquía de especificidad que determina qué reglas anular otras reglas. Esta es la parte complicado de CSS y nos vamos a sumergir directamente en ella en el siguiente video. 17. Jerarquía de CSS: En este video, vamos a cubrir la jerarquía de las reglas CSS. Para esto, tengo dos documentos abiertos. Yo sólo voy a cambiar a una nueva ventana. Ahí están estos dos documentos en las escuelas W3 que hablan de esto. Uno es el how-to general y el otro es sobre especificidad. En este how-to, ya hemos visto las tres formas de insertar CSS. Hemos hecho estilo en línea y hoja de estilo interno, y una hoja de estilo externa. Por lo que has visto aquí una hoja de estilo externa. Has visto una hoja de estilo interna, solo ponerte una etiqueta de estilo en la cabeza y has visto un estilo en línea. Pero luego también está el tema de las hojas de estilo múltiple. Digamos por ejemplo, algunas propiedades se han definido para el mismo selector en diferentes hojas de estilo, cuál realmente tiene prioridad? Echemos un vistazo a este ejemplo. Digamos que tenemos una hoja de estilo que tiene una regla para h1 de color navy, pero luego hay otra hoja de estilo que tiene una regla para h1 de color naranja. Bueno, ¿qué pasa aquí? De qué color va a ser este h1? Por aquí se puede ver que la respuesta es el valor de la última hoja de estilo leída se utilizará. Si bajamos aquí y tenemos una etiqueta de enlace que hace referencia a hoja de estilo externa, y entonces tenemos una hoja de estilo interna. El plano de estilo interno se define después, por lo que viene después de este enlace. Por lo tanto, este estilo anulará cualquier estilo h1 en esta hoja de estilos en particular. Pero desafortunadamente, no son solo las hojas de estilo múltiples de las que tienes que preocuparte, hay múltiples formas en las que puedes superponerte con CSS, y ahí es donde entra el orden en cascada. Se pregunta aquí, ¿qué estilo se usará cuando haya más de un estilo especificado para el elemento HTML? Lo que aquí dice es que podemos decir que todos los estilos se convertirán en cascada en una nueva hoja de estilos virtual por las siguientes reglas, donde el número uno tiene la máxima prioridad. Si tenemos un estilo en línea, eso anulará una hoja de estilo externa e interna. lo demostraré ahora. Tenemos esta regla porque todos los párrafos son verdes, pero ¿qué pasa si solo hay un párrafo que no quieres verde? Bueno, podemos entrar y podemos ir a este párrafo y podemos darle un estilo en línea, llamarlo color negro. Ahora bien, si guardo eso y abro esa página, podemos ver que este párrafo ahora es negro. Eso es porque si ponemos un estilo en línea, va a anular la regla general. Esto se vincula a la especificidad. Por especificidad, vamos a entrar en este artículo ahora en las escuelas W3. ¿ Qué es la especificidad? Bueno, si hay dos o más reglas CSS conflictivas que apuntan al mismo elemento, el navegador sigue algunas reglas para determinar cuál es la más específica y por lo tanto gana. Se puede pensar en la especificidad como una puntuación que determina qué declaraciones de estilo se aplican en última instancia a un elemento. En nuestra instancia particular, esta es una regla bastante general. Estamos diciendo que todas las etiquetas p son verdes. Eso es bastante general. Están diciendo, esta particular p tag en esta página en particular que queremos negro es altamente específica. Por lo que tu navegador asume que quieres que esto sea específicamente negro y no quieres que una regla general como esta lo anule. Suposición bastante segura diría. Pero el tema no es sólo con estilos en línea, sino también con reglas como esta. Entonces si volvemos al documento y leemos más sobre la especificidad, podemos mirar aquí la jerarquía. Los estilos en línea siempre van a anular lo que hay en tus reglas, en las reglas generales ya sea su clase o ID. Hay una excepción a eso, que nos meteremos un poco más adelante en este video. Pero los estilos en línea son los más específicos. Entonces tenemos identificación. ID es, por supuesto, un identificador único para un elemento de página en una página en particular. Después entramos en clases, atributos y pseudo-clases. No hemos entrado en la segmentación a través de atributos o pseudo-clases. Pero todos estos son algo más generales que solo apuntar a un elemento específico. Entonces lo más general es la segmentación por cierto tipo de elemento HTML o pseudo elementos. En el ejemplo de p, estamos apuntando a todo un elemento en particular. Esa es la regla más general que se puede tener. Si quieres cuantificar la especificidad, puedes hacerlo también. Aquí te dejamos un poco de guía sobre eso. Otra regla de especificidad y su similar a la que teníamos aquí con las múltiples hojas de estilo, la última regla cuenta. A lo mejor no tendríamos estas reglas lado a lado porque es bastante obvio ver que están apuntando a lo mismo, pero tal vez más abajo en una hoja de estilo grande, tienes otro selector que apunta a h1. El que esté escrito último se aplicará y anulará éste. Otra cosa a tener en cuenta es que los selectores de ID tienen una especificidad mayor que los selectores de atributos. Este aquí es un selector de atributos y aún no hemos pasado por los selectores de atributos, así que no esperes que lo entiendas. Pero los selectores de ID, como cabría esperar, siendo el segundo nivel de especificidad, tienen más de un peso que atributos. Desplazándose hacia abajo para ver más reglas de especificidad, aquí dice que los selectores contextuales son más específicos que un solo selector de elementos. Digamos por ejemplo, si tuvieras una hoja de estilo externa y una hoja de estilo interna, la hoja de estilos interna está más cerca del documento que la externa, por lo que esto tendría prioridad sobre este estilo en esa instancia. El ejemplo final que da aquí es que un selector de clases vence a cualquier número de selectores de elementos. Como dice aquí arriba, las clases son más específicas que apuntar solo a todos los elementos de un tipo en particular. Digamos por ejemplo, que tenía un h1 con la clase de intro que tomaría el color amarillo y anularía esto porque esto es solo un selector de elementos. Espero que eso ayude un poco con especificidad. De nuevo, hay mucho que tomar aquí. Esta es una de las áreas más complicadas del CSS, así que no espero que la hayas dominado después de esta lección en particular. Pero verás a medida que profundizamos en CSS, más sobre por qué se llama hojas de estilo en cascada, y veremos que esta jerarquía funciona frente a nuestros ojos. En realidad hay más selectores que podemos usar, pero vamos a cubrir los selectores avanzados en un video posterior. Algo que mencionaré antes de terminar aquí es que podemos anular este comportamiento de especificidad. Hacemos eso usando un poco de un código de trampa importante. Digamos por ejemplo, con este segundo encabezamiento, realmente quiero cambiarlo para tener un subrayado, pero tal vez haya un estilo específico aquí donde dice decoración de texto. ¿ Cuáles son las opciones disponibles para nosotros? Digamos que ninguno. Si voy y hago clic, “Guardar” y luego vuelvo a esta página, va a anular nuestra regla de identificación aquí arriba de subrayado porque es un estilo en línea. Recuerda, en línea es más específico que hacer aquí una regla de identificación. ¿ Qué pasa si estamos en una situación particular en la que en realidad no somos capaces de cambiar este documento en particular, tal vez sea HTML bloqueado. Hay algunas situaciones en las que realmente no tenemos acceso para cambiar el HTML o lo genera un backend, y tiene este estilo fijo. Bueno, hay un tramposo que podemos usar y no es exactamente la mejor solución, la mejor solución sería deshacerse de esta etiqueta de estilo. Pero suponiendo que literalmente no podemos hacer eso, un hackeo que podemos hacer es darle a este estilo algo llamado importancia. Empezaremos con un signo de exclamación y luego pondremos importante. Se puede ver mi editor de código sabe que esta es una palabra clave importante, está destacando eso en morado. Ahora, cuando regrese aquí, verán que esto ahora está subrayado, pesar de que aquí hay un estilo. Esto es más específico que una regla de ID. Pero todavía soy capaz de conseguir que esto aparezca poniendo en importante. Ahora, lo que pasa con importante es que no quieres usarlo todo el tiempo. Entonces, solo tecleemos en Google. Riesgo de usar importante. Ya verás, aunque solo lo investigues en Google, descubrirás por qué importante es la mala práctica en algunas situaciones. Por lo que es probable que cause efectos no deseados más abajo de la línea. Si realmente necesitas usarlo, puedes, pero está anulando el comportamiento habitual de CSS. El reto realmente viene cuando, digamos por ejemplo, quería sobrescribir esto. Bueno, no hay oportunidad de sobrescribir eso ahora porque le he puesto importante. Entonces digamos por ejemplo, tenemos la situación opuesta de antes donde no teníamos acceso a este archivo HTML. A lo mejor teníamos acceso a este archivo HTML y no teníamos acceso a este archivo. Si a alguien se le pone importante aquí, entonces no hay forma de nosotros de anular eso. Podemos poner un estilo y es súper específico, pero todavía no va a vencer importante. Es decir, supongo que uno de los riesgos de usar importante. Lo verás varias veces si te metes en CSS, eso importante causa problemas, por lo que solo se debe usar como escenario de último caso. Podría no tener perfecto sentido ahora mismo por qué es eso, pero solo confía en mí cuando digo que primero quieres usar esta jerarquía de especificidad. Entonces si quieres ponerte específico en un elemento en particular, dale un estilo en línea, apunta a su ID, y no necesariamente le des importante a menos que realmente tengas que hacerlo y sientas que esa es la única opción. Pero a medida que profundizamos en CSS, aprenderás cuando es importante usar importante, y ahí es donde dejaré importancia por ahora. Ahora, hemos cubierto la especificidad y hemos cubierto la sintaxis. Hay un concepto, concepto general que quiero cubrir llamado el modelo de caja en el siguiente video. Después entraremos en todas las diferentes opciones disponibles para nosotros. Probablemente no todos ellos, sino la mayor parte de ellos, y mostrarte lo que puedes hacer en CSS. Te veré en el siguiente video para hablar sobre el modelo Box. 18. El modelo de caja: Antes de sumergirnos en las diversas opciones de estilo diferentes, quería cubrir una cosa más, que se llama el modelo de caja. Entonces si quieres entrar en W3Schools, y seleccionar CSS el modelo de caja, podemos empezar a aprender un poco al respecto. Voy a cerrar la pestaña de la lección anterior, y veamos el modelo de caja. Al principio cómo los elementos HTML podrían sonar como algo un poco abstracto. Pero una forma en que podemos pensar en ellos es como cajas. En CSS, ese modelo de cuadro de término se utiliza cuando se habla de diseño y diseño. El modelo de caja CSS es esencialmente una caja que envuelve cada elemento HTML. Consiste en márgenes, bordes, relleno, y el contenido real. Se puede ver en esta imagen a continuación una ilustración del modelo de caja. Lo que tenemos en las diferentes partes es contenido, relleno, borde, y margen. De nuevo, creo que la mejor manera de mostrarles esto es en la práctica real. Aquí tenemos un ejemplo, pero en realidad no te muestran un ejemplo HTML. Vamos a entrar de nuevo en nuestro documento. Cerraré algunas pestañas aquí para limpiarlo, y aquí hay una página de aspecto claro todavía. Voy a ir aquí, cambiar el index.html, y lo que quiero hacer es simplemente crear una caja aleatoria. Lo que voy a hacer es poner en una regla horizontal, nuevo para crear una división, y voy a poner un div. Entonces dentro de ese div, pon otro div, y este div va a ser nuestra caja. Para darle estilo a este div en particular, le voy a dar una clase de caja. Cuando volvemos a entrar en nuestro documento HTML, se puede ver que la línea horizontal ha aparecido, pero realmente no se puede ver nada debajo de ella. Ahora mismo, eso es porque tenemos un div que es más o menos una pieza vacía de nada básicamente. Si entro aquí al inspector y en realidad miro lo que está pasando. Aquí se puede ver que está el div ahí definido en el HTML, pero no tiene altura. El div padre y div con el cuadro de clase en él es básicamente nada en este momento. Ahora la forma en que realmente podemos ver el div y realmente creado en algo es entrar en nuestro style.css y crear un estilo para la caja. Voy a apuntar a todos los elementos con la clase de box haciendo. box, y voy a copiar los estilos del ejemplo aquí. Voy a darle un ancho de 300, un borde de 25, verde sólido, relleno de 25, y margen de 25, así que voy a guardar eso. Entonces si entramos en nuestro documento, podemos empezar a ver esta caja verde. Ahora lo que es genial con Google Chrome y creo que en otros navegadores es que puedes hacer clic derecho en este elemento y en realidad puedes ver el modelo de caja. Aquí tengo una representación real del modelo de caja aquí. Ahora verás que la parte de contenido real no tiene altura. Verás 300, que es el ancho que definimos, pero no hay altura ahí. Pero en realidad se puede ver que un tiene algo de altura y eso es porque tenemos mucho relleno, mucha frontera y algún margen. Yo sólo voy a darle realmente algo de altura también. Voy a darle una altura de 200 píxeles. Guarde eso, retrocede. Ahora tenemos una caja con una altura también, y se puede ver en nuestra representación visual del modelo de caja por aquí que tenemos 300 por 200. En realidad podemos ver una cierta parte de la caja siendo resaltada cuando hacemos eso. Recuerda antes, solo voy a comentar eso fuera. Lo que he hecho ahí se convierte eso en un comentario, para que en realidad no aplique, si alguien se pregunta. Si vuelvo aquí y voy y trato de pasar el rato sobre el contenido, la sección media, nada está resaltando por aquí. Ya ves cómo he rondado sobre esto. Ahí no hay nada porque no tiene altura. Si da la altura atrás, y ahora se puede ver que tiene un área de contenido. Ahora hay una capa fuera de ese llamado relleno. Ahora el relleno es supongo justo el área entre el contenido y la frontera. Esto, si puedes ver el verde claro, no puedo flotar sobre ambos al mismo tiempo. Pero si puedes ver ese verde claro apareciendo ahora, esa es la zona de relleno. Entonces por supuesto el borde, hemos establecido el borde en un verde sólido, y dado en 25 píxeles para que puedas ver claramente el borde, y eso le da un extra de 25. Entonces fuera de la frontera está el margen. Si yo fuera a poner dos de estas cajas juntas, hagámoslo ahora mismo. Tengo que hacer es copiar y pegar. Ahora tengo dos de estas cajas, ahora se puede ver margen, porque si no tenía margen, en realidad puedo apagarlo aquí. Las cajas simplemente se conectarían entre sí porque no hay margen entre ellas. Nuevamente, el margen es lo que hay en el exterior de la frontera. Ahora, otra cosa que puedo hacer que traiga esta casa es poner algún contenido dentro de una de estas cajas. Voy a poner la Caja 1 y la Caja 2. Eso lo vamos a salvar, retrocede. Aquí se puede ver que tenemos contenido ahí dentro, y no está justo arriba contra las fronteras porque tenemos 25 píxeles de relleno, que podemos ver claramente al flotar por ahí. También podríamos hacer más estilo para alinear el texto en el centro. Pero si no tuviéramos ese relleno, el contenido presionaría justo en contra de la frontera. Espero que el modelo de caja esté empezando a tener un poco de sentido para ti. Si volvemos al contenido aquí, verás solo una advertencia sobre cómo calcular el ancho y la altura completos de una caja. Tienes que reconocer que no es sólo el contenido, es también el relleno, el borde, y el margen, que constituye el área completa de cuánto ocupa esta pieza de contenido o de este elemento en particular. Si nos libráramos de todo esto, recuerda, Básicamente es un div vacío que solo es tan grande como el contenido dentro de él. Recuerda que antes no había contenido en ella así que en realidad no vimos nada. Ahora en realidad vemos el contenido, pero no hay un modelo de caja a su alrededor. Ahora mismo si sólo le diéramos borde de un píxel sólo para que podamos ver los bordes de la misma. Se va a extender el ancho completo. No hay margen entre ellos, y sólo hay tanta altura como se necesita para tener el texto. Con todos estos otros atributos que aplicamos, podemos tener un div estilizado. Ya verás en un video posterior, podemos conseguir que estos se muestren uno al lado del otro. Ahí es donde podemos empezar a ver columnas y un diseño mucho más bonito, más receptivo. Eso es solo un poquito en el modelo de caja. Sólo un poco de teoría extra pensé que compartiría con ustedes chicos antes de entrar en más de las opciones de estilo. Espero que eso ayude a visualizar lo que realmente está pasando cuando creas un div o un elemento. En el siguiente video, vamos a saltar directo a algunas opciones de estilo. Vamos a empezar con colores, fondos, y opacidad. 19. Colores, fondo y opacidad: En este video, vamos a empezar a correr a través diferentes opciones que tienes para peinar en CSS. Vamos a empezar con colores, fondos, y opacidad. Si voy a los colores CSS, ya hemos definido colores en nuestro documento. Tenemos color aquí, tenemos color allá, estamos usando color en lugares bastante aleatorios. Como pueden ver en nuestros documentos, aquí solo tenemos un desajuste de colores. En todos estos ejemplos, lo que hemos hecho se acaba de usar una palabra para definir el color. Si estamos usando colores sólidos como el negro, y el rojo, y el verde, podemos simplemente tirarlos y CSS sabrá qué hacer. Pero en realidad hay otras formas de definir los colores también. Si voy aquí abajo a valores de color, si solo escribo en rojo, obtendré un color muy particular. Pero lo que puedo hacer es definir cualquier color en particular basado en valores RGB, valores hexadecimales, valores HSL, valores RGBA y valores HSLA. No te abrumes demasiado por eso. La mayoría de las veces uso valores HEX. Aquí mismo hay un valor RGB, y aquí mismo hay un valor HEX. Podría haber visto esto antes, en realidad, tienen un hash, y luego hay algunos caracteres hexadecimales. Pueden ser ellos caracteres del alfabeto romano inglés aquí, y algunos dígitos también. En realidad podemos ver esto en cualquier página web. En realidad, podemos echar un vistazo a esto en esta página web en particular. Podemos hacer clic derecho y usar nuestro Inspector aquí si estás en Google Chrome, y podemos ver aquí que tenemos un código de color aquí mismo. En realidad podemos, en Chrome, ver el valor hexadecimal de ese color y dónde encaja en el espectro de color. Podemos hacer clic en esto y cambiarlo a un valor de RGBA. Podemos cambiarlo y cambiarlo a un valor HSLA, y luego volver a HEX. A medida que cambiamos esto, podemos empezar a ver tanto el cambio por ahí, pero luego también el valor hexadecimal aquí abajo está cambiando. Yo sólo voy a escapar para revertir eso. Podríamos fácilmente simplemente poner en lugar de un valor hexadecimal, así que sólo voy a volver a ese elemento en particular otra vez. En lugar de tener un valor hexadecimal, podríamos tener sólo la palabra verde, pero luego obtenemos un verde genérico. Eso es básicamente lo mismo que este valor hexadecimal. Si quieres una mezcla en particular, puedes obtener cualquier mezcla usando valores hexadecimales o HSL o todos los demás. Acabo de Control Z y lo he traído de vuelta a ese color en particular que se representa con ese valor hexadecimal. Otra cosa que puedes hacer con RGBA y HSLA, es dar algo de transparencia así como un color particular. Nuevamente, si volvía a cambiar el color de este botón y quería hacerlo un poco más transparente, puedo hacer click en esto, convertir esto a RGBA, y ya verás que en la propiedad final, tenemos uno, que es básicamente una opacidad del 100 por ciento. Si fui aquí y lo cambié al 50 por ciento, se puede ver que está un poco descolorido en su fondo, que es de color gris. Puedo cambiar eso a 0.1 para mostrarte 10 por ciento de opacidad o 0.9 para mostrar 90 por ciento de opacidad. Pero sí, puedes cambiar la opacidad y el color para que puedas hacer que se desvanezca en su fondo. Eso es bastante guay. Hemos hablado de RGB, hemos hablado de valores HEX, hemos hablado de HSL. Algo que no mencioné es si quieres que sea completamente transparente, puedes poner un valor cero. Esencialmente puedes poner lo que quieras en estos tres primeros valores porque de todos modos va a ser completamente transparente. Pero entonces por supuesto, puedes trabajar a tu manera hasta 20 por ciento de opacidad, 40 por ciento igual que mostré en el ejemplo. Desplazándose hasta la parte superior de la página, hay algunos lugares en los que podemos poner un color y no es particularmente obvio cuando miramos un elemento HTML y vemos la palabra color, qué color está afectando en realidad, y color, en realidad, si solo usamos la palabra color sin decir color de fondo, por ejemplo, va a afectar al texto. Se puede pensar en el color como color del texto, y se puede ver aquí hash ffff, eso es básicamente blanco, así que fácilmente podríamos ponerlo en blanco aquí y obtendríamos el mismo resultado. Cuando definas el color, recuerda que ese es el color del texto. Pero entonces también en ese vínculo en particular, podemos definir un color de fondo, y así ese es el fondo de ese vínculo en particular será este tono de verde. Volviendo a la página, podemos verla ahora, podemos establecer el color de fondo para cualquier elemento HTML mediante el uso de esta propiedad en particular, y eso es fondo, color de guión. Como dije, el color del texto es solo color. No tenemos que decir color de fuente, color de texto, sólo la palabra color en sí es la propiedad del color del texto. El tercer color que aún no he mostrado es el color del borde. Hay algunas formas en las que puedes hacer esto. Se puede utilizar la propiedad de borde en la que se puede definir un ancho del borde, ya sea sólido o punteado o discontinua, y luego el color de ese borde. La segunda forma en que podrías hacer eso es mediante el uso de un atributo llamado color de guión de borde. Por ejemplo, si quería hacer irónicamente el color del borde del título, dale en realidad un borde con un color. Podría ir aquí en el estilo del elemento y hacer borde color azul. Pero claro que todavía no hay frontera, así que tengo que definir una, y sólo haré un px sólido. Puede separar el color en un atributo diferente mediante el uso de color de tablero de borde. Pero también podría, si solo desactivo esto y quiero poner eso en la misma línea, podría hacer azul justo después de la palabra sólido, y ahí vamos. Cubriremos frontera en el próximo video. Cuando se trata de tamaño sólido y punteado o punteado, hablaremos de eso en el siguiente video. Ya he pasado mucho tiempo en el color. Pero solo por fin, podemos afectar múltiples cosas sobre el fondo, no sólo el color. Podemos darle una imagen y también controlar la posición de esa imagen. Aquí podemos ver un ejemplo de color de fondo, pero también podemos enlazar usando esta propiedad, y el valor para eso tiene que seguir esta convención de URL, corchetes abiertos, abiertos, comillas dobles, papel dot gif o lo que sea el nombre del archivo es que estás haciendo referencia. Al igual que cuando estábamos haciendo SRC, hemos empezado con imágenes. Al igual que aquí, si quisieras que eso fuera una imagen de fondo, podríamos. Hagámoslo ahora mismo. Acude a nuestra caja aquí. Dale un estilo y dale una URL de imagen de fondo, y pongamos en el photo.jpg. Probemos eso para el tamaño y veamos cómo se ve. Ahí está la caja y lo que podemos hacer es cambiar el posicionamiento también, por lo que la posición x, podemos centrarla. Podemos alinearlo a la izquierda, alinearlo a la derecha porque la imagen es en realidad más grande que la caja. Estamos consiguiendo algo de cosecha aquí que también podemos posicionar. Podemos establecer el fondo para repetir, usando esto, podemos repetir en el eje y o en el eje x. No vas a ver nada porque ya es mucho más grande que la caja real misma. Pero tal vez si hiciéramos esta caja realmente grande. No hagamos ancho, hagamos alturas de 1000 px. Empezarás a ver que se repite en un eje y. Si hiciéramos lo contrario y lo hiciéramos con ancho, podríamos conseguir que esto fuera de 1000 pixeles, y si cierro esto, verás que en el eje horizontal, está empezando a repetirse. Esa es una forma en que podemos poner una imagen de fondo en nuestro documento. Nuevamente, si quieres saber más sobre poner en fondos en CSS, aquí en este documento hay mucha información. Este video se está haciendo un poco largo, así que lo voy a dejar ahí. Eso es básicamente colores y fondos y en términos de opacidad, lo cubrimos aquí con el valor final de HSLA, y RGBA. Podemos establecer la opacidad así como esto. Entonces eso son colores y fondos. En el siguiente video, vamos a profundizar un poco más en algunas de las opciones que cubrimos en box model. Hablo de fronteras, márgenes, remeros, altura y anchura. Te veré en el siguiente video. 21. Formato de texto, fuentes e iconos: En este video, vamos a hablar de fuentes e iconos de formato de texto. Para esto, sólo tenemos que ir un paso abajo en el menú y dar click en texto CSS. Primera propiedad con la que ya hemos trabajado es color. Yo sólo voy a brisa sobre esto. Aprendimos a establecer el color mediante el uso de la propiedad color. El siguiente es la alineación del texto. La propiedad de alineación de texto se utiliza para establecer la alineación horizontal del texto. Eso lo usé en uno de los videos anteriores, si te acuerdas. En realidad lo usamos en dos ocasiones separadas. Lo usé para centrar alinear esta caja cuando está en inline-block. También lo usé aquí en div especial para centrar alinear a la derecha. También podemos alinear texto justifique y lo que eso hace es hacer que cada línea se estire para que cada línea tenga igual anchura y que los márgenes izquierdo y derecho sean rectos. Podría haber visto esto en revistas o periódicos o libros. Yo solo lo demostraré ahora mismo para ti. Si cambiáramos div especial para justificar, pulsa Guardar y ahora verás que el texto siempre termina justo en el borde. Enfriar. Volviendo a aquí, otra cosa es texto-decoración. Recuerda, utilizo la decoración de texto para dar un subrayado en el segundo encabezamiento. Eso ya lo hemos visto aquí mismo, pero se ha anulado. Yo sólo voy a deshacerme de este estilo que lo anula. Presiona Guardar, ahí vamos. Ahí hay un ejemplo de decoración de texto, pero subrayar no es lo único que podemos hacer. Podemos ponerle una línea a través de ella, también podemos hacer un over line. También podemos transformar el texto. Con la propiedad text dash transform, podemos especificar letras mayúsculas y minúsculas en el texto. Convierte todo en mayúsculas o minúsculas, o pondrá en mayúsculas la primera letra de cada palabra. Aquí abajo, vemos sangría de texto, por lo que podemos sangrar la primera línea de texto en un párrafo. Demostremos eso realmente rápido. En mis reglas para la etiqueta p, voy a dar una sangría de texto de 10 píxeles. Presiona Guardar en eso, y verás que estos son en realidad párrafos aquí abajo. Pero verás que aquí hay una sangría. Si pusiéramos algunos párrafos adecuados en estos párrafos, lugar de sólo texto aleatorio. Eso lo verás. En primer lugar, la primera es la línea central, así que sólo voy a deshacerme de eso. Pero verás aquí la primera línea está sangrada por unos 10 píxeles. Ese es ese. También podemos cambiar el espaciado entre letras. Echemos un vistazo a eso. Entraré a la página 1 aquí. En lugar de cambiar las reglas, simplemente pondré un estilo en línea y estableceré el espaciado entre letras. Espaciado a 10 píxeles y ver qué hace eso. Ahí lo tienes. Tienes algo de espaciado de letras realmente salvaje ahí. ¿ Cuáles son algunas otras opciones? Altura de línea. La altura de línea se utiliza para especificar el espacio entre líneas. Dirección de textos, podemos cambiar la dirección del texto para revertir. Nunca hice esa para ser honesta. Ya que aquí tenemos muchas opciones que puedes bajar por la lista y dependiendo de lo que quieras con tu formato de texto, estas son todas las cosas diferentes que puedes hacer para cambiarlo. Ahí prácticamente se puede hacer casi cualquier cosa en CSS. También se puede cambiar el espaciado entre palabras. Si quieres ver todo lo que puedes hacer, definitivamente acude a esta página y echa un vistazo a algunos de los atributos. Pasando, echemos un vistazo a las fuentes. Una de las cosas más comunes que verás es la propiedad de la familia de fuentes. En esta propiedad en particular, podemos establecer la familia tipográfica Times New Roman, Arial, Courier New, esa cosa. Lo que podemos hacer es agregar una coma y luego poner fuentes de respaldo AVA aquí. Lo que debes hacer es empezar con la fuente que realmente quieres. Pero si el navegador que está usando el usuario, no tiene esa fuente, volverá a caer a esto y luego volverá a caer a eso. menudo, tendrás una fuente muy específica en la parte delantera y luego en la parte trasera, solo definirás si es Serif o Sans-Serif. Puedes leer sobre la diferencia entre Sans-Serif y Serif aquí arriba. Estos son algunos ejemplos de fuentes Serif y Sans-Serif y Monospace. El estilo de fuente te permite cursiva tu texto y también hacerlo oblicuo que es como cursiva. Nunca usaba realmente oblicuo antes, así que no creo que valga la pena pasar mucho tiempo en. El tamaño de fuente es común. De nuevo, puedes usar píxeles como tu unidad, pero también puedes usar algo llamado EM. Un EM es igual al tamaño de fuente actual. Si quieres usar EM, aquí están los cálculos ásperos aquí abajo. Se basa en un tamaño de fuente estándar de 16 píxeles. Si digamos por ejemplo, querías que un texto fuera 50 por ciento más grande que el texto que lo rodea, podrías cambiar el tamaño de la fuente usando una unidad relativa aquí es decir, un signo de porcentaje. Volvamos a aquí y digamos, por ejemplo, que quería que el texto ficticio fuera un 50 por ciento más grande que el resto del texto que lo rodea. Bueno, ya lo he hecho aquí. Aquí se puede ver un tamaño de fuente relativo. Puedo entrar y hacer lo contrario y hacerlo más pequeño que el otro texto que lo rodea. Ahí se puede ver que se trata de tres cuartas partes del tamaño del texto circundante. Voy a volver a ponerlo a 150. También se puede cambiar el peso de la fuente. El peso de la fuente es básicamente lo negrita que es la fuente. Otra cosa que puedes hacer es ajustar la unidad a VW. En realidad no he hecho esto antes, pero se puede ver aquí, ¿a dónde se ha ido? El tamaño de la fuente cambia en realidad en función del tamaño de la pantalla. Eso es bastante guay. La unidad VW representa el uno por ciento de su ancho de vista-puerto. Si el vista-puerto tiene 50 centímetros de ancho, que es el viso-puerto es básicamente la pantalla en la que lo estás viendo, un VW será de unos 0.5 centímetros. A continuación, una variante de fuente especifica si el texto se debe mostrar o no en letra de mayúsculas pequeñas. De nuevo, realmente no uso este a menudo, pero de nuevo, es otra opción disponible en fuentes. Voy a traer esto de vuelta a toda la anchura. Aquí te dejamos todas las propiedades de fuente CSS que puedes usar. Definitivamente, vuelve a esto para referencia. Pero por ahora, vamos a pasar rápidamente a los iconos. Si aparezco la página para iconos, lo que podemos hacer es usar una fuente de icono para poder poner algunos iconos y tratar esos iconos como si fueran una fuente o texto en sí mismos. Ahora quizá, hay que ver eso en acción. Una biblioteca de fuentes de iconos comunes es la fuente Awesome. Puedes buscar fuente Awesome aquí. Es uno de los más famosos que puedes usar. Tiene un montón de fuentes en las que se están expandiendo constantemente, y aquí mismo se puede ver todo un montón de logotipos y símbolos diferentes e incluso tienen unos que representan diferentes aplicaciones y servicios. Si volvemos a aquí, podemos ver que podemos incluir la fuente Awesome en nuestro proyecto vinculando a ella usando rel stylesheet. Lo que voy a hacer es copiar eso, ponerlo en nuestro proyecto para que podamos ver cómo podemos usar fuentes de iconos. Tenemos el enlace y eso significa que podemos empezar a usarlo. Lo que puedes hacer aquí es crear una etiqueta I. Voy a cambiar por aquí. A lo mejor antes de ponernos, empezamos nuestra empresa. Pondremos una etiqueta I y la clase en la etiqueta I le dirá a nuestro documento qué icono usar realmente. Yo sólo voy a guardar eso, ponlo en y ya verás que tenemos una nube frente a cada una de estas líneas. El motivo por el que tenemos una nube es porque estamos usando el código FA cloud. Para utilizar cualquier número de estos iconos, tenemos el nombre de la clase aquí. Vamos a desplazarnos hacia abajo, y digamos que queríamos usar un símbolo de manzana. Podríamos entrar en nuestro código y en lugar de FA cloud, podemos poner FA apple. Asegúrate de poner primero la clase FA y luego la clase FA específica para el ícono real que quieras usar. Volviendo a aquí, ahora vemos que el icono es manzana. En esta instancia, el icono para manzana no tiene ningún sentido. Entonces voy a cargar un ejemplo más. Digamos que queremos flecha, círculo a la derecha. Una vez más, voy a abrir mi editor de códigos y cambiar apple a arrow circle a la derecha. Recuerda con el guión FA allá. Ahí vamos. Ahora hemos incluido la fuente del icono y estamos haciendo referencia a esa fuente del icono usando un elemento I, y somos capaces de decirle a nuestro documento qué icono queremos usar usando clases. Muy cool. Si volvemos a nuestra página aquí por escuelas W-3, podemos ver que también podemos usar iconos de Bootstrap. Bootstrap es un framework front-end el cual estaremos aprendiendo hacia el final de esta clase de habilidad compartida. También tienen sus propias fuentes de iconos, por lo que también puedes conseguir algunos de estos iconos. Google tiene su propia fuente de icono, puedes encontrar una gama de fuentes de iconos en línea. Pero esencialmente, cómo funcionan los iconos es que necesitas cargarlos en casi como una fuente. Ya sea que estés usando una fuente que te dé caracteres ingleses o una fuente que te dé iconos se trata esencialmente de la misma manera en HTML. Permítanme demostrar esto rápidamente antes de terminar esta lección y pasar a la siguiente. Voy a fijar un párrafo en particular. Escojamos éste a la font-family. En realidad, pongamos todo nuestro documento. Una forma en que podemos hacerlo es agregando una regla de estilo de nivel de elemento y usando todo el cuerpo como el elemento al que apuntar y luego podemos elegir el estilo de fuente o font-familia de todo el cuerpo del documento. No tengo ninguna preferencia con la fuente, así que voy a volver a la lección de fuentes aquí, y sólo copiar este ejemplo. Ir a repasar, copiar eso, y luego verás aquí que la fuente ha cambiado ligeramente a Times New Roman. Cambiemos esto a Arial. Yo quiero que sea un poco más diferente. Ahora, tenemos familia tipográfica Arial. Lo que voy a hacer ahora es abrir a mi inspector, y se puede ver aquí que por defecto a cuerpo y puedo ver a mi familia tipográfica de Arial allá. Si elimino eso, vuelve a la fuente predeterminada. Si voy hasta aquí donde está el ícono, verás que está tirando de una fuente en sí. Al usar esta clase FA, le da una fuente de la fuente Awesome, que es la fuente del icono. Si yo fuera a quitar eso, ya verás que sólo sale como una caja cuadrada. Pero ahora, cuando lo encienda, verán que esencialmente estamos haciendo lo mismo que estamos haciendo aquí arriba. Estamos usando una fuente para dar el aspecto del texto y también estamos usando una fuente aquí para tomar esta etiqueta de icono y convertirla en un elemento específico usando nuestros nombres de clase. Si te desplazas aquí abajo, puedes ver aquí un pseudo elemento, este contenido y este pequeño código aquí que dice fuente Awesome cuál cargar. Pero para ti, solo necesitas usar el nombre de la clase, usando este nombre descriptivo para apuntar a esa pieza de contenido en particular. Esto es todo lo que funciona en el back-end de la fuente Awesome. Pero esencialmente, el clima que estás cargando, Times New Roman o fuente Awesome. Estás cargando una fuente. Eso apenas cubre el formato de texto, las fuentes y los iconos. En el siguiente video, vamos a repasar cómo dar estilo a tres de los elementos HTML más comunes de los que hablamos en la sección HTML, que son imágenes, enlaces, listas, y tablas. Te veré en el próximo. 22. Estilo de imágenes, enlaces, listas y tablas: En este video, vamos a cubrir cómo dar estilo a algunos elementos HTML comunes, como imágenes, listas, enlaces y tablas. Ya hemos hecho un poco de imágenes, pero si nos desplazamos aquí hacia abajo a este enlace en particular en w3schools.com, podemos empezar a ver que tenemos algunas opciones de estilo disponibles para nosotros en CSS para darle estilo a las imágenes. También podemos hacer que la imagen sea sensible y escalar hacia arriba y hacia abajo con CSS. Probemos eso ahora mismo con la imagen que ya tenemos en nuestro documento. Voy a cambiar, esta es nuestra imagen ahí. Entonces lo que voy a hacer es ir a nuestro editor de códigos y voy a poner una regla para todas las imágenes. Estoy usando un selector de nivel de elemento y voy a seguir el ejemplo aquí. Voy a darle un ancho de 100 y una altura de auto. Volviendo a mi editor de códigos, voy a guardar eso. Ahora verás que se extiende todo el ancho de la pantalla. Entonces si fuera para cerrar esto, se extiende el ancho absoluto completo de la pantalla y la relación de aspecto es la misma independientemente del tamaño de la pantalla. Ese es el auto de alturas trabajando para nosotros ahí. El ancho 100 por ciento significa que queremos que la imagen sea 100 por ciento del elemento padre. En este caso, si miramos el documento, el elemento padre es cuerpo. Por lo que sólo va a ser el 100 por ciento del cuerpo del documento, la ventana en este caso. Hay un poco de código que podemos conseguir fácilmente nuestras proporciones en orden y que responda. Volviendo ahora a la página web, también podemos establecer un ancho máximo, como demostré antes, pero en un elemento diferente. La otra forma de incluir imágenes es utilizarla como fondo. En ocasiones, querrás incluir una imagen como fondo en lugar de un archivo de imagen real como este. Un ejemplo sería si quisieras tener una imagen estirada así al ancho completo de un área de contenido o recortar la imagen de una manera más receptiva en función del tamaño de ese contenido para el que es el fondo. Lo que también puedes hacer es cambiar la imagen de fondo en función de diferentes tamaños de pantalla. Aquí mismo vemos una consulta de medios, y aún no hemos entrado en consultas de medios, pero las consultas de medios nos permiten definir estilos en pantallas de anchos particulares. Nos meteremos en eso en un video posterior. Pero por ahora, solo tienes que saber que podemos cambiar la imagen en función del tamaño de la pantalla. También hay un nuevo elemento en HTML5 llamado el elemento de imagen. Nunca he tenido que usar el elemento de imagen, pero permite definir más de una imagen. Siento que podríamos pasar mucho tiempo aquí en imágenes, pero hay algunas otras cosas que necesitamos cubrir. Si necesitas aprender más sobre las imágenes, definitivamente vuelve a esta página ahora mismo, pasemos a enlaces, listas y tablas. Los enlaces y las listas deben ser bastante simples, pero como verás en las tablas, hay algunas opciones de estilo diferentes basadas en las diferentes partes de la tabla. En la sección de enlaces CSS en w3schools, podemos ver que podemos cambiar el color de un enlace, también podemos cambiar la propiedad text-decoration y eso se utiliza principalmente para eliminar los subrayados de los enlaces. El comportamiento estándar con el enlace es tener este subrayado y estos diferentes colores y ese ha sido el camino desde el inicio mismo del HTML. No es lo más bonito y ya está desactualizado. Verás esto a menudo donde se quita el subrayado usando text-decoration none. Por supuesto también puedes establecer el color de fondo. Lo que debes notar mirando a través este documento es que puedes empezar a ver algo un poco diferente, y eso son estos colon con otra palabra. Se trata de pseudo-clases, y nos permite darle estilo al enlace basado en el estado en el que se encuentra. Por ejemplo, tenemos este selector a:link cual nos permitirá apuntar a un enlace normal no visitado, pero si el enlace ha sido visitado, podemos cambiar el estilo de eso. Uno común que usaremos realmente a menudo es flotar. Si tu ratón se mueve sobre un enlace, entonces podemos cambiar el estilo y activo es el momento en que se hace clic en un enlace. Si hacemos click en aquí para “Pruébalo tú mismo”, podemos ver aquí que nuestro enlace será de color rojo, pero una vez que sea visitado, será de color verde y si paso sobre él, será de color rosa caliente, y cuando esté activo será de color azul. Vamos a probarlo. Ya puedes ver como mi cursor pasa por encima del enlace, se vuelve rosa caliente. Eso se basa en esta pseudo-clase aquí que dice que si el estado está flotando en este enlace, entonces colorelo rosa caliente. Veamos qué pasa cuando hago clic en él. Se puede ver brevemente que se puso azul y eso es porque estaba activo, pero entonces por supuesto, cargamos la nueva página para que desapareciera. Ahora que ha sido visitado, es verde. Puedes empezar a ver aquí la extensión completa de los diferentes estados y este enlace pasando por diferentes estilos. Nuevamente, realmente no uso activo, visitado y enlace muy a menudo, pero uno muy común es pasar el cursor, porque muchas veces quieres que el link destaque y al tenerlo cambie de color o cambie de estilo cada vez que pases sobre un link, eso es algo que es bastante común. Volviendo a nuestra referencia w3schools aquí, voy a pasar a listas. Si recuerdas de nuestra sección en listas HTML5, tenemos dos tipos desordenados y ordenados. Un orden sólo significa una lista numerada. Si nos desplazamos hacia abajo podemos ver la primera propiedad list-style-type y eso especifica el tipo de un marcador de elemento de lista. Podemos cambiarlo de aquí arriba de lo que sea esto a un círculo, un cuadrado, y otros tipos de listas diferentes. Si haces clic en “Pruébalo tú mismo” aquí, podemos empezar a ver eso. Aquí podemos ver esta primera lista desordenada. Hemos ido en una clase de a y aquí la lista desordenada con una clase de a va a tener la lista-estilo-tipo de círculo. Aquí en esta lista, le hemos dado b, y para eso tenemos cuadrado, estos altos romanos y bajos-alfa. Se puede cambiar lo que viene delante de los diferentes ítems de la lista. Volviendo a la referencia, también puedes establecer el marcador de ítem de lista en una imagen que elijas tú mismo. En este caso tenemos esta imagen gif cuadrada-púrpura, y podemos establecer que sea el marcador de lista. Puedes establecer cualquier cosa que quieras ser ese marcador de lista si lo tienes como imagen. Desplazándose hacia abajo, también puede cambiar la posición de lista-estilo-lista. Por lo que puedes hacer que la bala apunte fuera del contenido o dentro. De nuevo, solo estoy briendo a través de esto porque hay muchas opciones diferentes. Muchos de estos no uso necesariamente de manera regular, así que si esto es algo que quieres hacer, definitivamente vuelve y revisa esto. Por el bien de los tiempos, voy a pasar la brisa por el resto de esto. Desplazándose hacia abajo, tienes el resumen de las diferentes propiedades a las que puedes acceder con lista. Pasemos a las mesas. Tablas es algo que se puede mejorar mucho con CSS bastante obviamente. Vamos a desplazarnos hacia abajo y mirar nuestra mesa aquí, es muy vieja escuela. Definitivamente las tablas pueden hacer con un mejor look con CSS, y como puedes ver aquí, este es un ejemplo un poco de la vieja escuela que es similar al nuestro. Establecemos el borde usando HTML, así que si vuelves a nuestro documento y encuentras aquí nuestra tabla, pudimos poner un atributo a este elemento por el nombre de frontera y darle un valor de uno. Si cambiáramos ese valor a dos, retrocedamos, entonces se vuelve un poco más grande, pero no tenemos que dar el borde sobre el elemento real usando ese atributo, podemos hacerlo en CSS. Lo que voy a hacer es presionar Guardar en eso, ahora no hay fronteras, pero los voy a agregar en el uso de CSS. Lo que hay que hacer es volver aquí, y necesitamos especificar bordes en la tabla, los encabezados de la tabla y las celdas de la tabla. Yo sólo voy a agarrar todo este pedacito un código. En realidad por el bien de la consistencia, voy a poner todos mis selectores de elementos arriba. Voy a presionar “Guardar” en eso, volver a aquí y tenemos lo mismo. La diferencia es que tenemos mucha más flexibilidad dentro CSS y podemos copiar ese estilo a través de múltiples tablas. Volviendo a la referencia aquí, una cosa que es vieja escuela en este diseño es que tiene dos líneas para la frontera. A menudo sólo queremos un solo borde, por lo que podemos establecer esto en el colapso fronterizo poniendo ese estilo en toda la mesa misma. Simplemente voy a poner eso por encima de lo que tenemos ahí, y ahora tenemos quizás un comportamiento más esperado de nuestra mesa. También puedes establecer el borde alrededor de la mesa por sí mismo, lo que esta es la diferencia entre establecer el borde en la tabla versus las celdas, ponerlo en la mesa va a ponerlo alrededor de toda la tabla y luego establecer un borde en las células está alrededor de las células. Al bajar, podemos establecer la tabla para que tenga un ancho completo, y podemos establecer los encabezados para que tengan una altura fija de 50 píxeles. Lo que voy a hacer es pasar por este documento y entonces realmente podemos aplicar algunos de estos a nuestra mesa porque está en necesidad de un mejor estilo seguro. Bajando a la alineación horizontal, podemos texto-alinear los contenidos dentro de las celdas a la izquierda, derecha o media. También podemos cambiar la alineación vertical. En este caso, hemos establecido el contenido de las celdas para que esté abajo. También podemos configurarlo en la parte superior. Podemos crear relleno, entre el contenido y los bordes de la celda. También podemos crear bordes basados en la parte inferior, superior, izquierda y derecha. Este es un diseño bastante bonito, solo estamos teniendo bordes en la parte inferior para esta bonita lista. También podemos cambiar el estilo de una fila usando esa pseudo-clase que vimos antes cuando estábamos trabajando con links, llamando a hover. Cuando el ratón pase sobre estas diferentes filas, cambiaremos el color de fondo a este color en particular. Puede hacer tablas rayadas usando otra pseudo-clase llamada, nth-child. Esto es un poco más avanzado, pero básicamente lo que está haciendo es cada fila pares que le estamos dando un color de fondo de esto. Por supuesto, uno común sería cambiar el color de filas particulares y celdas particulares, y luego se puede obtener un bonito diseño como este. La parte más trickiest con mesas supongo es conseguir que responda. Si echamos un vistazo a este ejemplo, y cambiamos el tamaño de nuestra ventana, podemos ver que la tabla está respondiendo, pero aún así llega a cierto punto donde aún hay que desplazarse a izquierda y derecha para ver todos los contenidos. Ese es el problema mucho del tiempo con las tablas y por qué no deberías usarlas para estructurar tu página web, como mencionamos anteriormente, es porque estas tablas tienen un elemento de diseño fijo, pero claro, hay formas de conseguir que respondan, y hablaremos más de eso tal vez en los videos sobre diseño responsive. Estas son algunas de nuestras opciones aquí para una tabla CSS. Lo que voy a hacer ahora, traer todo esto a casa es darle estilo a nuestra mesa aquí. Usando algunas de las cosas que hemos aprendido en este documento en particular, lo que voy a hacer es querer alinear horizontal-alinear y vertical-alinear el contenido de mi tabla. Voy a abrir mi editor de códigos y mi documento, y lo que voy a hacer es crear un estilo dirigido a mis celdas de cabecera y mis celdas regulares, y voy a dar un alineamiento vertical de medio y un horizontal-alineamiento de centro. Ahora actualmente está sentado justo frente a la frontera, por lo que quizá no veamos esto. De lo que voy a hacer así como darle algo de relleno. Voy a hacer 20 pixeles de relleno. Vamos a ver cómo se ve eso ahora. Ahí se puede ver con algún relleno y algo de alineación, se puede ver que tenemos un poco más agradable de una mesa. Me gustaría hacer de la fila de encabezado un estilo diferente, así que voy a apuntar los estilos de encabezado por separado, y voy a darle un color de fondo de, déjame ver, verde claro. Presiona “Guardar” en eso y ahora puedes ver que la fila superior es verde claro. ¿ Qué más podemos hacer aquí? Ya hemos hecho el relleno. Ya hemos hecho rayado. A lo mejor queremos usar este aquí y podemos hacer, supongo que no tenemos tantas filas aquí, pero si empezáramos una nueva fila, podríamos poner este estilo en cada niño parejo tendría un color de fondo de ese color particular. Si vamos a duplicar esta fila sólo como un ejemplo, copiar y pegar eso, verás que la primera es gris usando ese color de fondo que especificamos para incluso niños, y ésta no es porque no es un niño parejo, por lo que si ponemos un tercero, verás que alterna entre los dos. Vamos a duplicar eso otra vez, y luego se ve ahí. Hay muchas opciones de estilo disponibles en las mesas, definitivamente, te animo a que vayas a experimentar con ellas. Vamos a estar usando marcos CSS que hacen mucho de esto por nosotros en un video futuro, así que no necesitas saber absolutamente todo sobre las mesas de estilo, pero también es algo bueno saber. Eso básicamente cubre enlaces de estilo, tablas, listas e imágenes. Admito que nos apresuramos un poco porque solo hay tanto contenido que cubrir, pero claro, siempre puedes volver a estas páginas para referirnos y la mejor manera que vas a aprender es haciendo, así que definitivamente pon una mesa en tu documento y luego empieza a buscar en Google si no sabes hacer algo. Esta referencia es bastante buena y esto cubre muchas de las opciones que te gustaría hacer, pero tal vez querrías hacer algo extra con tu mesa. Hay tantas opciones disponibles en CSS y podríamos gastar para siempre en él, pero hay mucho más contenido que cubrir. En el siguiente video, vamos a cubrir las propiedades de visualización. Te mostré un poco de visualización en un video anterior, pero vamos a profundizar en estas propiedades de maquetación, muy fundamentales en CSS, pero un poco complicado así que espero verte en el siguiente video. 23. Diseño de CSS: propiedad de visualización: En este video, vamos a cubrir un diseño CSS y nos vamos a centrar en la propiedad display dentro de CSS. Es decir, es sólo una propiedad, pero es tan importante y fundamental en CSS y tal vez un poco difícil de entender. Vamos a cavar enseguida. Es el siguiente enlace de nuestro menú aquí. Como puede ver, la propiedad display es la propiedad CSS más importante para controlar el diseño. La propiedad display especifica si y cómo se muestra un elemento. Cada elemento HTML tiene un valor de visualización predeterminado dependiendo del tipo de elemento que sea. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea. Recuerda cuando teníamos estos elementos a nivel de bloque, así que este div aquí, son elementos a nivel de bloque y por defecto tienen un valor de visualización de bloque. Pero aquí con un cuadro de clase, pudimos cambiar este div en particular a una pantalla de bloque en línea. Eso fue un pequeño adelanto de lo que vamos a cubrir en este video. Si nos desplazamos hacia abajo para leer más sobre los elementos a nivel de bloque, un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa el ancho completo disponible. Recuerda cuando teníamos este bloque aquí, si quitamos el bloque inline-block, solo voy a hacer eso haciendo que sea un comentario para que ya no se aplique. Yo estoy refrescando esto. Ahora es un elemento a nivel de bloque, por lo que sólo va a ocupar el ancho completo de la página. Aquí puedes ver algunos ejemplos de elementos a nivel de bloque. Estos son básicamente bloque de visualización por defecto, así que div, tienes las etiquetas de encabezado, p form, header, pie de página, y sección. También hay elementos en línea que se muestran en línea por defecto. Un elemento en línea no se inicia en una nueva línea y sólo ocupa tanto ancho como sea necesario. Un ejemplo común de esto es el elemento span, que utilizamos, no estoy seguro de si todavía lo tenemos en nuestro proyecto. Si voy a buscar span. Sí, todavía lo hacemos. Recuerda aquí cambiamos una palabra en particular en nuestro párrafo y la hicimos 50 por ciento más grande que las otras palabras. Si entramos aquí, ese cambio se hace en línea. Esta pieza de contenido, esta palabra no se divide en una nueva línea ni ocupa el ancho completo de la página como lo haría un elemento de bloque. Está hecho en línea. Esos son los dos tipos principales diferentes. El otro que podemos usar es display: ninguno. Si quisiéramos que esto no se mostrara en absoluto, podríamos entrar y hacer “display: none”. Si guardo en eso no se mostrará. Pero si inspeccionamos en nuestra página web y bajamos, en realidad podemos ver que el div sigue ahí. Simplemente no se muestra y en realidad podemos activar y desactivar esta propiedad de visualización. Ahí lo tienes. Estoy marcando esa casilla y se muestra. Ahora bien, ¿por qué querrías tener un elemento en la página pero no mostrar? Bueno, en realidad podemos cambiar la propiedad de visualización como lo estamos haciendo aquí mismo pero usando JavaScript. Ese es un concepto más avanzado y eso es pasar a JavaScript, que no estamos cubriendo en este curso. Pero sólo tienes que saber que si ves un elemento que está en exhibición: ninguno, las posibilidades lo son, va a haber algo en el código que permitirá que ese elemento aparezca en ciertas situaciones. Tener display: ninguno en un elemento cuando las cargas de la página le permite comenzar oculto y luego podemos mostrarlo más adelante. Eso es display: ninguno. Voy a refrescarme para eliminar esos cambios y deshacerme de nuestra pantalla: ninguno aquí, guarde eso y estamos de vuelta a donde estábamos antes. Volviendo a la referencia, podemos anular el valor de visualización predeterminado mediante el uso de esta propiedad llamada display, que es exactamente lo que hicimos aquí atrás haciendo la visualización de caja en línea en lugar de bloque de visualización. Volver a la referencia otra vez. En realidad podemos cambiar el comportamiento por defecto de un elemento en línea a bloque, cual podemos hacer esto en ambos sentidos; podemos cambiar un elemento a nivel de bloque para mostrar en línea, pero también podemos cambiar un elemento en línea para mostrar en un bloque. Aquí podemos hacer este lapso y convertirnos en un elemento a nivel de bloque. Lo que eso hace es crear un salto de línea. Si fuera a quitar este estilo y luego ejecutarlo, se convierte en un elemento en línea y luego si voy a volver a poner eso, los va a dividir porque recuerda en bloque elemento ocupa el ancho completo de la página. Si nos desplazamos hacia abajo, veremos un pequeño punto de confusión con la pantalla: ninguno. Hay otra propiedad llamada visibilidad. ¿ Cuál es la diferencia entre display: none y visibility: hidden? Bueno, la gran diferencia es que el elemento seguirá ocupando el mismo espacio que antes. Se ocultará, pero seguirá afectando el diseño. Probemos eso ahora mismo. Hagamos que esta imagen sea invisible, así que no se muestre: ninguna sino invisible. Visibilidad; podemos ponernos a invisible. Creo que oculto es el término no invisible. Voy a poner eso ahí, visibilidad: oculta. Verás que aún ocupa el espacio en la página a la que iba si era visible, pero ahora sólo está oculto. Contrastando eso con display: ninguno, si sí mostraba: ninguno, de repente el elemento no aparece y tampoco ocupa espacio alguno en la página. Ninguno de esos son dos prácticos, así que me voy a deshacer de eso, presionar “Guardar” y volver a la forma en que era antes. Enfriar. Algo que realmente no estaba cubierto en esta referencia en particular es display inline-block. Como ves, lo tenemos aquí abajo, pero en W3Schools es en realidad una lección separada. Voy a dar click en display inline-block aquí. Aprendamos un poco más al respecto. Aquí podemos leer más sobre display inline-block. Aquí hay algunas diferencias sobre las que puedes leer, pero la principal diferencia es que si quisiéramos mostrar una lista de elementos horizontalmente en lugar de verticalmente, necesitaríamos usar inline-block. Por ejemplar, en el caso de crear enlaces de navegación como aquí arriba, requeriríamos inline-block porque el comportamiento predeterminado de los elementos HTML es simplemente apilar uno encima del otro como lo demostramos antes cuando ni siquiera habíamos consiguió este CSS. Voy a dar clic en “Pruébalo tú mismo” aquí. Se puede ver que estos están mostrando inline-block. Si fuera para quitar este estilo y correr, verás que se apilan uno encima del otro. Ese es el comportamiento predeterminado, pero si tenemos display inline-block aquí, se mostrarán en una línea. El bloque en línea es uno realmente común que verás especialmente con enlaces de navegación como en este ejemplo. Si quieres saber más sobre cuáles son las diferencias específicas, puedes leer sobre ello aquí, pero verás que el bloque en línea viene mucho. Estoy un poco cauteloso de que este video se vaya arrastrando, así que lo voy a terminar ahí. Este es un concepto muy importante de entender, la propiedad display y es esencialmente una forma en que podemos tener elementos de visualización a nivel de bloque, por lo que apilados uno tras otro en línea o una combinación que aprovecha ambos. Esa es la propiedad display. En el siguiente video, vamos a repasar el posicionamiento. Te veré en el próximo. 24. Propiedad de posición en CSS: En este video, vamos a repasar la propiedad de posición en CSS. Esta es una novela, bastante involucra la propiedad en CSS, por lo que merece su propia lección. Voy a ir a posición CSS en W3Schools. Aquí podemos ver los cinco valores de posición diferentes; estáticos, relativos, fijos, absolutos, y pegajosos. Por lo que al usar algunos de estos, usted es capaz de posicionar elementos absolutamente en cualquier lugar de la página en un lugar específico. Puede posicionarlos arriba, abajo izquierda y derecha de elementos particulares relativos a ellos pero esto no funcionará menos que use la propiedad position y establezca esa derecha primero. Por lo que cubrir la primera es la posición estática. Los elementos HTML son en realidad estáticos por defecto. Entonces si pones en una propiedad de arriba, abajo, izquierda y derecha, en realidad no funcionará, no se verá afectada en absoluto por esas propiedades. Como dice aquí, un elemento con posición estática no se posiciona de ninguna manera especial, siempre se posiciona de acuerdo al flujo normal de la página. Entonces es solo el comportamiento por defecto. Desplazarse hacia abajo el siguiente es posición relativa. un elemento con posición relativa con relación a su posición normal. Ahora puedes con posición relativa establecer propiedades de arriba, derecha, inferior e izquierda posicionar relativamente un elemento ajustado lejos de su posición normal. Ahora sé que probablemente no tiene sentido, sólo hablar de ello, así que en realidad echemos un vistazo a un ejemplo real. Voy a dar clic en “Pruébalo tú mismo”. Se puede ver aquí, si fuéramos a quitar posición relativa, lo que nos permite posicionarla para empezar y movimos la propiedad de la izquierda y hacer clic en correr. Ahora mismo, ese es el comportamiento por defecto de este div en particular y se puede ver el borde del div porque aquí le hemos dado una frontera. Si pongo en posición relativa, ahora soy capaz de hacer que ese elemento aparezca 30 píxeles a la izquierda de donde originalmente se iba a posicionar. Por lo que podemos sumar en otro aquí y podemos hacerlo top 50. Ahora son 30 píxeles a la izquierda y 50 píxeles de la parte superior en una posición diferente a donde estaría de otra manera. Podemos hacer lo contrario aquí. Podemos usar la derecha en su lugar, y podemos posicionarla 100 píxeles a la derecha de donde se suponía que debía estar. Ahora puedes ver que ahora va fuera del límite izquierdo de la ventana. Por lo que no es muy práctico, pero a veces puede que necesites hacer eso. Voy a cerrar este ejemplo y el anterior y también estos iconos porque ya no los necesitamos. Otra opción en posición es fija. Se coloca un elemento con una posición fija con respecto a la ventana de visión, lo que significa que siempre permanecerá en el mismo lugar aunque la página se desplace. Entonces siempre que veas esos menús o esas cosas como esta que se pegan en una parte particular de la ventana y nunca se mueven, eso se pela con posición fija. Sólo echemos un vistazo a nuestro ejemplo. En realidad no podemos desplazarnos aquí porque no hay suficiente contenido pero aquí mismo se puede ver un elemento que se fija a la parte inferior derecha. Probablemente sea mejor mirar en esta página porque en realidad podemos ver a medida que nos desplazamos, eso parece sentarse en la parte superior del contenido porque está fijo sin importar a dónde te muevas en el documento. Por lo que se puede fijar la posición a fija. Como ves aquí, son 0 píxeles de abajo y 0 píxeles de la derecha, lo que significa que está en la esquina inferior derecha. Le hemos puesto un ancho y un borde para darle ese estilo y esto se va a quedar ahí a menos que fuéramos a cambiar esta propiedad posicionada. bajar, podemos mirar la posición absoluta y la posición absoluta se posiciona relativa al antepasado posicionado más cercano en lugar de relativa a la ventana de visión como fija. Entonces eso probablemente no tenía sentido, pero echemos un vistazo a un ejemplo aquí. Voy a dar click en “Pruébalo tú mismo” y puedes ver aquí que tenemos una combinación aquí. Uno es un div que es relativo, M1 es un div que se posiciona absolutamente. Entonces mirando el div absoluto aquí, si fuéramos a eliminar este atributo o esta propiedad y ejecutarlo, se remonta al comportamiento predeterminado del HTML que es elementos apilados uno encima del otro. Pero si vamos a darle una posición de absoluta, somos capaces de elegir su posición dentro de esta casilla. Por lo que ahora se va a sentar 80 píxeles a la parte superior de esta caja y 0 píxeles a la derecha de esta caja. Para que veas que está justo arriba contra el filo aquí. Eso es porque estamos en 0 aquí y son 80 píxeles de arriba. Siempre podemos cambiar esto, podemos hacer que venga un poco desde la derecha, así que puedo darle 10 píxeles ahí. De repente, ha salido un poco del filo. También puedo en lugar de derecha, afectar a la izquierda y hacer que salga del borde tanto como antes, pero del lado izquierdo. Ahí lo tienes. Esa es posición absoluta. El siguiente es la posición pegajosa y se basa en la posición de desplazamiento de los usuarios. Por lo que en realidad se conmuta entre relativa y fija en función la posición de desplazamiento y se posiciona relativa hasta que se cumple una posición de desplazamiento dada en la ventanilla. De nuevo, probablemente suena como galimatías técnicas, pero para darte un ejemplo, este div en particular se está moviendo en realidad cuando me desplaza, pero una vez que lo golpeo, repente se vuelve pegajoso. Entonces de nuevo, voy a ir a Pruébalo tú mismo aquí y puedes ver a medida que nos desplazamos, se queda ahí arriba. En tanto que el comportamiento por defecto, si fuera a quitar posición pegajosa, sería quedarnos con la página pero si pongo pegajoso ahí, una vez que llegue a esa posición, irá a la posición top 0. Por lo que se pegará a la parte superior. Puedo cambiar eso para cuando sí vaya fijo y tal vez posicionar a 10 pixeles desde arriba. Echemos un vistazo a eso. Ahora puedes ver que hay un espacio de 10 píxeles entre la parte superior de la ventana o el marco aquí y el div real. Por lo que retrocediendo, también podemos tener elementos superpuestos usando absolutos. Entonces, solo echemos un vistazo a eso. Tenemos una imagen y un encabezamiento superpuestos entre sí y somos capaces de lograr eso al tener la imagen absoluta. Nuevamente, si quitamos la posición absoluta, así sería. La imagen se sentaría bajo el encabezado, como el comportamiento predeterminado en HTML. Pasando, podemos ver cómo podemos posicionar texto sobre una imagen y aquí hay muchos más ejemplos. Puedes ponerte a prueba con ejercicios. Eso es probablemente otra cosa buena para mencionar. Pero entonces puedes ver aquí el resumen de las propiedades de posicionamiento. Sé que eso es mucho por cubrir y puede que no tenga perfecto sentido ahora mismo, pero de nuevo, medida que empieces a desarrollarte usando la propiedad de posición, empezarás a entender mejor las diferencias. Pero supongo que los ejemplos realmente comunes que verás con el uso de la propiedad de posición es; número 1, esta posición fija, cómo este elemento simplemente se queda contigo independientemente de dónde se desplaza. Eso en realidad es algo que podemos ver aquí mismo con este menú. El menú llega a un cierto nivel de desplazamiento. Se pega ahí arriba y entremos y verifiquemos eso ahora mismo. Inspeccionemos, intentemos encontrar los elementos y en realidad se está cambiando de relativo a fijo. Por lo que en realidad no está usando pegajoso. Pero se puede ver aquí la posición mientras estamos desplazando es fija y aquí arriba es relativa. Tan pegajoso y la posición fija son buenos para crear menús fijos que te siguen mientras te desplazas. Esto también podría arreglarse, o simplemente en un marco diferente. Absoluto, somos capaces de posicionar las cosas en cualquier parte de la página, y relativo, somos capaces de mover diferentes elementos alrededor en base a la posición que se suponía que eran originalmente. Espero que eso les haya dado una buena visión general de la propiedad de la posición. Nuevamente, a medida que nos desarrollemos más, comenzarás a ver la propiedad de la posición y la acción y empezarás a internalizarla más. En el siguiente video, vamos a cubrir desbordamiento y flotar. 25. Propiedades Overflow y float de CSS: En este video, vamos a cubrir desbordamiento y flotar. Esto va a terminar hablando de las diferentes propiedades en CSS, y luego vamos a cubrir algunas cosas más avanzadas. Solo buceemos justo dentro y desbordamiento de checkout. La propiedad de desbordamiento CSS controla lo que sucede con el contenido que es demasiado grande para caber en un área. Como puedes ver aquí, este bloque de contenido probablemente solo tenga una altura fija, pero tiene más textos de los que podrían caber realmente en ese bloque. Podemos controlar cómo se comportará el contenido dentro mediante el uso de la propiedad de desbordamiento CSS. La propiedad de desbordamiento especifica básicamente si recortar contenido o agregar barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada. El primero que verás es desbordamiento visible. Significa que el contenido de desbordamiento no está recortado y se renderiza fuera de la caja del elemento. Como puedes ver aquí, tenemos un div de un ancho y alto fijos, pero simplemente tenemos demasiado texto para caber realmente en esa caja. Una forma en que podríamos arreglar esto es teniendo el tamaño de fuente más pequeño, pero tal vez necesitábamos ese tamaño de fuente en particular o no tenemos control de ello por lo que una cosa que podemos hacer es permitir que el desbordamiento sea visible. Este es en realidad el comportamiento predeterminado, y si hacemos clic en, probarlo, realidad podemos eliminar desbordamiento visible click “Ejecutar”, y veremos exactamente lo mismo. Probablemente no vas a estar usando desbordamiento visible dado que es el comportamiento predeterminado. Una cosa que podrías usar es el desbordamiento oculto. Con desbordamiento oculto, es obvio lo que hace, solo ocultará todo el desbordamiento. En realidad recortará el resto del contenido y se asegurará que el contenido se pegue a las dimensiones que especificamos. Si hacemos clic en “Pruébalo tú mismo”, veremos que hemos especificado que queremos que el div aquí tenga 200 píxeles de ancho y 50 píxeles de alto, y si hay algún texto que lo lleve más allá de eso, sólo vamos a recortarlo. Si fuera a quitar esto y ejecutarlo, volvería a desbordar visible. Entonces también hay desplazamiento de desbordamiento, que es lo que vimos arriba aquí, nos permite mantener el tamaño de la caja, pero solo que aparezca una barra de desplazamiento para que podamos desplazarnos por el contenido de ese div en particular. siguiente es el desbordamiento automático, y es similar al scroll, pero agrega barras de desplazamiento solo cuando es necesario. En este caso es necesario, pero si entramos en Pruébalo tú mismo y lo hicimos un poco más grande, entonces en realidad no necesitamos las barras de desplazamiento. De vuelta al documento, podemos afectar el desbordamiento en ejes particulares también donde lo queramos en horizontal o verticalmente. Desbordamiento x especificará qué hacer si los bordes izquierdo y derecho del contenido y desbordamiento y especificarán qué hacer con los bordes superior e inferior del contenido. Eso es desbordamiento, básicamente no demasiado complicado. Si tienes contenido está desbordando fuera de un div en particular, solo tendrás que decidir qué quieres hacer si lo es. Esto probablemente no sea ideal, tal vez quieras ocultarlo o tal vez quieras tenerlo desplazado. De lo contrario podría tener una situación en la que cambie el tamaño de la fuente para que realmente se ajuste a diferentes tamaños de pantalla, pero estas son las diferentes opciones disponibles en desbordamiento. El siguiente que quería cubrir en este video es float. El flotador es muy común. Ya verás en CSS, aquí hay dos propiedades. Uno es flotadores, y otro está claro. La propiedad flow se utiliza para el posicionamiento y el diseño en una página web, y la propiedad flow puede tener uno de los siguientes valores. Izquierda, si flota hacia la izquierda, derecha, flota hacia la derecha, ninguno, simplemente no flota y hereda significa que heredará el valor flotante de su padre. En su uso más simple, la propiedad float se puede usar para envolver texto alrededor de las imágenes. Si miramos esto y hacemos flotar bien la imagen, flotará a la derecha del texto. Este es el beneficio de float, se envolverá alrededor de tu contenido existente. Probémoslo nosotros mismos. Se puede ver aquí que tenemos la imagen flotante derecha. Si fuera a borrar eso, ejecutamos eso, veremos que la imagen aparece justo donde está posicionada dentro del HTML. Se puede ver este párrafo, que terminará, se iniciará esta imagen, y formará el inicio de este párrafo. Si volvemos a entrar y lo hacemos flotar a la derecha, y va a ir y envolver el texto. También lo podemos flotar a la izquierda, como tal, y flotará a la izquierda. También podemos agregar margen para que sea un poco más agradable, por lo que no va directamente contra el texto, por lo que nos permite crear un diseño más fluido, lo cual es realmente importante. Hemos visto flotar a la izquierda, ningún flotador solo hará que ocurra como antes, con la imagen apenas apareciendo en línea con el texto, y lo que tenemos es la propiedad clara. La propiedad clear especifica qué elementos pueden flotar junto al elemento despejado y en qué lado. La propiedad despejada puede tener prácticamente los mismos valores, excepto que también tiene un código, buff. La forma más común de usar la propiedad clear es después de haber utilizado propiedad float en un elemento y desea borrar el flotador. Aquí tienes un ejemplo que esperemos compartir con nosotros cómo funciona. Como puedes ver, tener float puede causar algunos problemas. Aquí se puede ver que las dos divis están compitiendo por el espacio, mientras que aquí están despejadas, eso se debe a la propiedad despejada. Creo que la mejor manera para que entiendas claro es si volvemos a sumergirnos en nuestro proyecto y en realidad demostramos esto. Solo tomemos nuestra imagen aquí, y hagámosla 25 por ciento para que no ocupe tanto espacio, y luego voy a poner la imagen justo en el párrafo. Voy a agarrar esto y ponerlo aquí en este primer párrafo. Ahora mismo sólo se va a mostrar en línea con el texto, pero si le doy una propiedad de flotadores que quedan y guardo, entonces va a flotar con el contenido de la página. Vamos a darle algún margen a la derecha y al fondo que no salga justo en contra de este texto, y luego tienes esta imagen. Ahora, en términos de la propiedad clear, se usa principalmente para borrar la funcionalidad flotante cuando tienes múltiples cosas flotando alrededor. Voy a copiar imagen y ponerla lado a lado aquí. Tenemos dos imágenes flotantes y tal vez queremos que la segunda imagen se despeje, así que la voy a poner en línea aquí. Yo sólo estoy apuntando al elemento uno, y voy a poner en claro ambos. Ahora, se puede ver que estos apilados uno encima del otro porque está despejando todos los elementos flotantes a su izquierda y a su derecha. Si quisiéramos despejar a la izquierda, probablemente tendría el mismo comportamiento, si creáramos bien, verás que está de vuelta a donde estábamos antes porque no hay elementos flotantes a su derecha. Sólo para aclarar eso otra vez, sin juego de palabras pretendido, voy a deshacerme de este estilo, y echemos un vistazo al comportamiento por defecto. Lo que tenemos son dos imágenes que están flotando a la izquierda, pero tal vez queremos que esto surja en una nueva línea. Tenemos que despejarlo a la izquierda de su elemento flotante por lo que pondríamos en claro izquierdo o claro ambos funcionarían en esta instancia también. Ahí lo tienes. Si tuviéramos a darle a esto un flotador de derecha, ambos podemos despejar a la izquierda y flotar a la derecha. Entonces tienes alguna variación con la flotación de las imágenes. Es así como puedes conseguir que los elementos flotantes aparezcan uno encima del otro o en nuevas líneas en lugar de tenerlos uno al lado del otro aunque tengan la misma propiedad flotante de izquierda o derecha. Volviendo al documento, aquí hay otra cosa que cubrir, y esa es la Clear-fix Hack. ¿ Qué sucede si un elemento es más alto que el elemento que lo contiene y está flotando? Lo que pasará es que se desbordará fuera del contenedor así. Una cosa que podemos hacer es usar el orden de desbordamiento para solucionar ese problema y eso se vincula muy bien con lo que cubrimos justo antes con desbordamiento. Para demostrarlo, voy a saltar de nuevo a nuestro proyecto. Voy a subir la página, entra a nuestro editor de códigos. Voy a hacer esta pantalla completa porque ahora tenemos mucho más contenido en la página. Lo primero que voy a necesitar hacer es mover esta etiqueta de imagen al párrafo que está al lado. Como se puede ver aquí, parece que esta imagen está probablemente más en este párrafo que en este párrafo, pero en realidad está sentado justo aquí. Voy a moverlo al párrafo, presione “Guardar”, y ahora mismo se puede ver que el texto se envuelve un poco más a su alrededor pero lo que voy a hacer es deshacerme de estas alturas y anchuras fijas que he establecido como atributos HTML y poner en una altura de 200 píxeles para que sea más grande que el contenido en la etiqueta de párrafo. Después te vas, puedes ver que se está estirando. Para ver las restricciones reales de esta etiqueta de párrafo, voy a darle un borde para que realmente podamos ver los bordes de este elemento. Voy a darle a eso un sólido borde negro, salvo eso. Ahora se puede ver el ejemplo que teníamos en las escuelas W-3. La imagen está sentada fuera de las restricciones del elemento padre. Voy a volver aquí, y lo que puedo hacer es como en el ejemplo, poner este párrafo en orden de desbordamiento. Guarda eso. Y ahora de repente el contenido de esta etiqueta de párrafo y ahora conformándose a esta etiqueta de imagen. Entonces, de nuevo, la diferencia es entre esto y esto. Esa es una oportunidad ahí cuando usas clear y float para arreglar este pequeño problema que podrías estar experimentando. En nuestro caso, la imagen no tiene realmente 200 píxeles de altura, por lo que no necesita ser tan alta, pero por si fuera que tuvieras esa opción disponible y puedes ver aquí incluso a una altura más pequeña, todavía se desborda. Por lo que podemos ir desbordamiento auto otra vez y ver que ahora lo podemos tener para que siempre sea parte de este particular elementos que en este caso es una etiqueta de párrafo. Eso cubre el desbordamiento y flotar, ahí algunas otras cosas aquí dentro que puedes aprender más sobre y más sobre cómo se usa el flotador en el mundo real. Voy a simplemente brisa sobre eso y te llevaré a todas las propiedades de vuelo CSS para referencia, y en el siguiente video, vamos a cubrir más selectores CSS antes de terminar esta sección CSS y conseguirte comenzó con implementar Bootstrap y empezar a trabajar en su proyecto de clase. Nos estamos acercando al final ahora, tiempos muy emocionantes, espero verte en el siguiente video. 26. Sintaxis avanzada y selectores: En este video, vamos a cubrir selectores avanzados. Si recuerdas de nuevo en el episodio de Sintaxis y Selectores, cubrimos algunos básicos incluyendo el ID de elemento y el selector de clase. Ahora tengo unas pestañas abiertas desde w3schools para que podamos entrar en algunas de las opciones de selección más avanzadas. El primero es CSS Combinators y eso lo puedes encontrar en el menú aquí. Un combinador CSS es algo que explica la relación entre los selectores. Son cuatro diferentes los que podemos usar. Una es un Selector Descendant, un Selector Child, y un Selector de hermanos adyacentes, y un selector General de hermanos. Ahora eso probablemente no tiene sentido hasta que entremos y veamos estos en acción. El más común es un selector Descendant. El selector Descendant coincide con todos los elementos que son descendientes de un elemento específico. El siguiente ejemplo que vemos aquí seleccionará todos, p, elementos dentro, div, elementos. Ahora eso es bastante amplio, pero intentemos poner un ejemplo en nuestro proyecto actual. Tengo el proyecto aquí en nuestro navegador, y tengo el código a mi derecha aquí. Digamos, por ejemplo, que tenemos estos párrafos, y dentro del párrafo tenemos imágenes. Lo que podemos hacer es seleccionar todas las imágenes dentro de los párrafos poniendo en una regla como esta. Empezamos con p, luego ponemos un espacio y ponemos imagen. Ahora, cada regla que ponemos aquí dentro se aplicará a las imágenes que están dentro de p. Cubre todos los descendientes, aunque tuviéramos una p y luego dentro de eso teníamos un div, y luego dentro de eso teníamos una imagen que seguiría seleccionando. Cualquier imagen con unos padres, ya sea que sea inmediata o no, cualquier imagen con un padre de p. Hagámoslo ahora. Hagamos flotar bien. Va a salvar eso. Voy a mover el código hacia la derecha. Abre esto y verás que nuestras imágenes están flotando a la derecha. Ahora podrías estar pensando, tenemos flotador a la izquierda ya afectando todas las imágenes pero recuerda especificidad y jerarquía. Estamos siendo más específicos aquí para decir que cualquier imagen dentro de un párrafo, flotará a la derecha. Eso es especificidad trabajando para nosotros ahí. Si no tienes claro a qué me refiero con eso, quizá retrocedan y revisen la lección sobre jerarquía. Pero aquí hay una forma en que podemos usar el selector Descendant usando dos selectores de elementos. También podemos combinar selectores de elementos y selectores ID y selectores div. Si me desplazo hacia abajo para intentar encontrar un ejemplo, digamos por ejemplo, que queríamos seleccionar todos los gastados dentro de cualquier elemento que tuviera div especial como clase. Podríamos hacer eso entrando en nuestra hoja de estilo aquí y bajo div especial, voy a crear un selector Descendant. Voy a tener div especial como primera parte del selector, y luego voy a poner span. Ahora esto selecciona cada lapso dentro de un elemento padre que tiene esa clase. ¿ Qué podemos hacer con estos tramos? Quizá cambiemos el color. Cambiaremos el color a verde. Ahora cada lapso dentro de un elemento padre que tiene div especial, en este caso, serán estos divs aquí y deberíamos empezar a ver el span cambiando a verde. Ahí vas. Si pusiéramos esto en este div en particular sin la clase en él, presiona Guardar y mira eso. Veremos que este ficticio de texto no es verde porque no tiene un elemento padre que tenga esta clase en él. Si ven aquí tenemos un lapso, si van a su padre, tiene una clase de div especial. Si vas a aquí y miras a su padre, no tiene una clase de div especial. Esas son algunas formas en que podemos crear una clase y luego apuntar a elementos dentro del elemento que tiene esa clase. Pasando, tenemos al Selector Infantil. El selector secundario es bastante similar al selector Descendant, excepto que selecciona todos los hijos inmediatos de un elemento especificado. Recuerda dije aquí que esto seleccionará cualquier imagen que tenga un padre de p y no tiene que ser el padre inmediato, puede ser más arriba de la cadena. Volviendo a nuestra hoja de estilos, en realidad no tenemos un ejemplo claro, pero lo que les mostraré aquí es que voy a montar otra sección. Vamos a tener un div aquí, y luego dentro de ese div, tendremos otro div y luego dentro de ese div tendremos una imagen de src, foto dot jpg. Ahora tenemos una imagen que tiene un padre y padre inmediato de div y luego otro padre más arriba de la cadena. Lo que podríamos hacer para apuntar a ese usando un selector Descendant y esto nos permitirá ver la diferencia entre descendiente e hijo es poniendo aquí una regla, imagen div. Toda imagen que tenga un div, como su padre deberíamos darle un borde de dos píxeles, verde sólido. Ahora si refrescamos la página, estas imágenes no tienen un padre de div, pero si nos desplazamos hacia abajo, podemos ver que esta imagen, que tiene un padre de div, ahora aparece con un verde sólido de dos píxeles frontera. Aquí mismo, tenemos nuestra imagen dentro de una caja, pero es decir, si recuerdas, solo un div con una imagen de fondo. Por ejemplo, si fuera a quitar este borde aquí para ese div en particular, no tendríamos un borde verde porque este es en realidad un elemento div con una imagen de fondo, no un elemento de imagen real. Voy a revertir eso y volver a aquí. Lo que voy a hacer es ser un poco más específico aquí porque esta imagen tiene un padre de div aquí, pero también un padre de div más abajo de la línea. Quiero ser más específico aquí y hacer ese div padre en lugar del selector de elementos para div. Si refrescamos la página, verá el mismo resultado. Ahora echemos un vistazo a lo que pasaría si utilizáramos un selector Child. Recuerde, el selector Niño selecciona todos los elementos que son hijos inmediatos del elemento especificado. Voy a volver a mi editor de códigos y traer mi documento en el navegador. Voy a poner un mayor que firmar entre esos dos. Eso denota que sólo queremos apuntar a los niños inmediatos. Voy a presionar Guardar, y luego refrescar la página. De pronto la frontera se ha ido de nuestra imagen, y la razón es que si miramos a los hijos inmediatos de este div padre, los únicos hijos inmediatos que tiene, sólo tiene un hijo y ese es otro div. Ya no estamos apuntando a esta etiqueta de imagen porque no es un hijo inmediato de este div padre. Si fuéramos, por ejemplo, a apilar estos, que podemos hacer en CSS, ahora esto debería funcionar porque estamos apuntando a una imagen que está contenida por una etiqueta div, que está contenida por un elemento con un padre de clase div. Podemos combinar estos diferentes combinadores también. Voy a volver a poner eso a lo que era antes. Pasemos al siguiente selector. El siguiente es Selector de hermanos adyacentes. Como sugiere el nombre, el selector de hermanos adyacentes selecciona todos los elementos que son los hermanos adyacentes de un elemento especificado. Lo que significa adyacente está siguiendo inmediatamente. Por ejemplo, en el siguiente ejemplo se seleccionarán todos los elementos p que se colocan inmediatamente después de los elementos div. En lugar de poner eso en nuestro código, solo voy a ejecutar el ejemplo aquí mismo. En este momento estamos apuntando a todos los elementos p que vienen después de un div y les estamos dando un color de fondo de amarillo. Como puedes ver aquí, tenemos un div con dos hijos, uno es un p y el segundo también es un p. Pero estos en realidad no vienen después de un div, realidad son hijos de este div por lo que no están dirigidos en esta regla CSS. Una vez que bajamos aquí, esta p viene después de este div, lo que en realidad es desencadenado por esta regla. Si cambiáramos esto a un selector Child, por ejemplo, repente estos niños aparecen con un color de fondo de amarillo. Esto sólo está apuntando a los hijos inmediatos de div. Por ejemplo, si quisiera poner otro tipo de elemento aquí, tal vez una sección, y empecé esta sección y dentro tenía un párrafo. Ahora voy a correr eso y ver qué pasa. Sólo el primer párrafo tendrá el color de fondo amarillo. Eso se debe a que este p ya no es hijo inmediato de div, es un hijo inmediato de sección, y la sección es un hijo inmediato de div. Pero este p no es un hijo inmediato del div. Si cambio esto y me deshice del selector infantil inmediato y simplemente lo cambié a un selector descendiente y haga clic en “Ejecutar”. Ahora vuelve a resaltar ambos porque p tiene un padre de div aunque sea padre inmediato. Estoy combinando tres ejemplos ahí. Esperemos que eso tenga sentido para ustedes ahora o esté empezando a tener sentido. Nuevamente, a medida que adquieras más experiencia con esto, empezará a solidificarse un poco más. El último en la sección de combinadores CSS es el selector general de hermanos. El selector general de hermanos selecciona todos los elementos que son hermanos de un elemento especificado. Padres e hijos son probablemente nuevo concepto para ti en esta clase. Pero esencialmente, si entiendes a padres e hijos, debes entender lo que es un hermano. Son los otros hijos de un padre en particular. En lugar de crear una nueva sección en nuestro documento, solo voy a dar clic en “Pruébalo tú mismo”. Como pueden ver aquí, tenemos un selector general de hermanos aquí mismo. Lo que esto nos está diciendo es que, cada p siguiente div en el mismo nivel, queremos aplicar también este estilo en particular, que es background-color-amarillo. Una de las cosas confusas de esta regla en particular es, sí, se dirige a los hermanos, pero sólo a los hermanos que vienen después de esa primera parte del selector, por lo que en este caso el div. Este párrafo 1 por ejemplo, no está seleccionado porque no viene después de este div. Si fuera a cortar eso y ponerlo aquí mismo, se destacaría. Ese es uno de los pequeños trucos de este selector en particular. Pero como se puede ver este segundo párrafo, que en realidad es un hijo de este div no obtiene el estilo de fondo color-amarillo. Eso es porque no es un hermano, en realidad es un niño. Eso cubre estos selectores combinadores. Por supuesto, mencioné que estos son algunos de los selectores más avanzados. Entonces no espero que los domines en este solo video, pero definitivamente pruébalos, experimente y empezarás a entenderlos mucho mejor. Otro selector avanzado es una pseudo-clase. Recuerda usamos un ejemplo de una pseudo-clase. Utilizamos el estado hover en un enlace. Aquí se puede ver ese es el primer ejemplo. Ese es probablemente el ejemplo más común de una pseudo-clase. Pero puedes echar un vistazo aquí abajo de la sintaxis. Básicamente tenemos cualquier selector que vamos a tener de todos modos, pero luego para apuntar al estado en ese selector en particular, podemos tener un colon y luego poner la pseudo-clase. Vimos los de etiquetas de enlace antes en esta clase. Como se puede ver aquí, estos roles, pseudo-clases. pseudo-clases vienen más comúnmente en los enlaces porque hay diferentes estados a los enlaces y los enlaces son por supuesto un elemento común en HTML. Pero aquí se pueden ver algunos ejemplos de cómo podríamos hacer un estado de flotación sobre un div u otro elemento. Ese es probablemente el uso más común de las pseudo-clases para el estado objetivo. Pero también podemos usarlo para encontrar al primer hijo o cualquier número de niños de unos elementos especificados. Aquí podemos tomar el primer hijo de un p, por lo que coincidirá con cualquier elemento p que sea el primer hijo de cualquier elemento y aquí mismo también podemos combinar un selector descendiente o cualquier número de selectores con este pseudo- clase de primer hijo. Como puedes ver, ahora se está complicando un poco. Estamos usando algunos de los selectores de combinación de los que aprendimos justo antes, y ahora lo estamos combinando con una pseudo-clase, por lo que puedes encadenar algún selector bastante largo en CSS. También puedes usarlos en un orden diferente, por lo que puedes apuntar a todas las etiquetas de iconos que tienen un padre que es el primer hijo de otro elemento. Se puede hacer cualquier número de combinaciones. También puedes usar la pseudo-clase lang, con la que no tengo experiencia, así que solo voy a brisa sobre ello. Aquí hay un montón de ejemplos de pseudo-clases, así que si quieres usar esto como referencia. Los principales son los que utilizaste para determinar el estado de un vínculo o determinar si estás sobre algo o no, y los otros comunes son seleccionar a un niño o una posición de un niño. Por ejemplo, este nth-child, esto seleccionará todos los ps que son el segundo hijo de sus padres. Puede dirigirse a un hijo específico dentro de un elemento padre. Pasando, entraremos en pseudo-elementos. pseudo-elementos son como pseudo-clases aceptan, usamos otro colon. Para ser honesto, no me encuentro usando tanto pseudo-elementos. Pero algunas cosas que podemos hacer con pseudo-elementos es apuntar a la primera línea de un párrafo, y podemos apuntar a la primera letra de una palabra o párrafo. Podemos combinar eso con clases igual que vimos en la lección de pseudo-clase, y podemos apuntar a primera letra y primera línea de ps en el mismo documento CSS. Probablemente el pseudo-elemento más común es antes o después. Usando antes somos capaces de insertar algún contenido antes del contenido real del elemento. En este ejemplo, podemos insertar una imagen justo antes de cualquier elemento en particular. Entonces aquí está lo contrario, podemos insertar algún contenido después del contenido de h1s. También está el pseudo-elemento de selección que coincide con la parte del elemento que es seleccionado por el usuario. No he usado este antes, pero podemos echar un vistazo al ejemplo aquí mismo. Si seleccionamos algún contenido en la página, podemos ver que nuestra selección ahora está peinada usando este pseudo-elemento. Ese es un truco bastante guay. Ni siquiera sabía que podías hacer eso antes de empezar a preparar este curso. Aquí tienes una lista completa de pseudo-elementos y también una lista completa de pseudo-clases para que puedas usar. Por último, y esto se está convirtiendo en una lección bastante grande, así que tal vez quieras refrescarte después de esto volviendo atrás y revisando. Pero el selector final del que quería hablar es un selector de atributos. El selector de atributos nos permite seleccionar elementos con un atributo específico. Aquí mismo, si tuviéramos un atributo y valor de target es igual a subrayado en blanco, aplicaríamos un estilo a ese elemento específico que tiene ese atributo y valor específico. Simplemente pinchemos en el primer “Pruébalo tú mismo” y échale un vistazo a esto. Básicamente, esto se va a aplicar a cualquier etiqueta de enlace que tenga un atributo de objetivo independientemente del valor de ese atributo. Aquí puedes ver, estos dos tienen un atributo objetivo y no le importa cuál sea el valor de ese atributo objetivo, solo le importa si ese atributo existe. Pero podemos ser más específicos y decir que solo queremos apuntar a las etiquetas de enlace que tengan ese atributo y tengan un valor especificado. Podemos entrar y decir que sólo queremos segmentar etiquetas de enlace que tengan un atributo de target con el valor de blanco. Si ejecuto eso, entonces verás que solo esta seleccionada. Volviendo aquí a éste que utiliza un título, este selector en particular se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra especificada. Podemos buscar dentro del valor del atributo para esta palabra en particular, y si coincide con alguna parte del valor, se activará este estilo en particular. Voy a cerrar este y acaba de empezar de nuevo con este ejemplo. Aquí se puede ver que el título tiene flor en estos dos benignos, éste. Se puede ver que estos dos tienen el estilo especificado, que es de borde, 5px amarillo sólido. Otra forma de utilizar este selectores con tubería es igual, y que se utilizará para seleccionar elementos con un atributo especificado, comenzando con unos valores especificados. Vamos a sumergirnos justo en el ejemplo. Aquí verás que se seleccionará todo lo que empiece con la palabra que especificamos aquí y luego se rompa por un guión, pero no éste en particular. Esa es solo una regla aquí que se puede ver una nota, sólo apuntará a una palabra entera, ya sea sola así o con un guión. Este es un selector un poco extraño. No creo que alguna vez haya usado este antes, pero esto es un material avanzado. Ahí están todos estos diferentes operadores especiales que puedes usar. No voy a gastar demasiado tiempo en ello. Si quieres conseguir esa creatividad con tus selectores, definitivamente vuelve y mira esto. Pero esencialmente las principales cosas que quería atravesar en este video son los selectores avanzados como combinadores y pseudo-clases, y muchos de los ejemplos más comunes que ya he puesto en nuestro proyecto. Tenemos el selector infantil inmediato, y creo que usamos aquí arriba, el selector descendiente. Esos son los más comunes. No te preocupes si no comprendiste por completo los selectores de atributos de nivel más avanzados aquí. Definitivamente quieres entender este para que puedas apuntar a elementos con un atributo y valor específico que me parece muy útil. Pero estos que honestamente nunca he tenido que usar antes, así que no te pongas demasiado al día con ellos. Los principales que realmente quiero que conozcas son estos de aquí, los combinadores, porque definitivamente vas a necesitar usar estos en algún momento. Definitivamente verás este, el selector infantil también. Pseudo-clases también para estado, sobre todo en un link, y sobre todo para hover, pero entonces por supuesto tienes todos estos pseudo-elementos locos para apuntar primera línea, primera letra, muchas opciones disponibles en CSS, pero no es necesario saberlo absolutamente todo. Siempre tienes este sitio web como referencia. Espero que ese video no fuera demasiado largo y no estés totalmente abrumado. En el siguiente video, vamos a envolver las opciones avanzadas en CSS. Entonces vamos a empezar a compartir contigo un marco que va a hacer todo esto mucho más fácil y te ahorrará tanto tiempo. Te veré en el siguiente video. 27. CSS avanzado: consultas de medios: En el último video dije que cubriríamos algunos de los temas más avanzados en CSS pero si miramos este menú aquí, hay un montón de opciones diferentes disponibles para nosotros. Podemos ver las opciones avanzadas disponibles para esquinas redondeadas. Podemos usar imágenes como fronteras. Podemos crear fondos de gradiente. Podemos dar diferentes partes de nuestro documento sombra. Podemos aplicar sombras para agregar DIV o a nuestros elementos de texto. Hay tanto que podemos hacer en CSS y es demasiado para cubrir en este curso, eso ya es probablemente bastante largo. Si sí quieres que cree un curso de CSS más avanzado, definitivamente estoy abierto a ello, pero por ahora, quiero hablar de algo que es muy importante en CSS y que es Media Queries. En CSS2, se introdujeron Media Queries y lo que hicieron fue posible definir diferentes reglas de estilo para diferentes tipos de medios. Pero ahora en CSS3, lo más comúnmente utilizado para mirar la capacidad del dispositivo. Donde quiera que haya mirado el ancho y la altura de la ventana gráfica o del dispositivo, la orientación, ya sea horizontal o vertical, y la resolución. Media Queries, como dice aquí, son técnica popular para entregar una hoja de estilo a medida para computadoras de escritorio, portátiles, tabletas y teléfonos móviles. Consultas de medios super importantes para Responsive Web Diseño y Desarrollo. Si nos desplazamos hacia abajo, podemos ver la Sintaxis de Media Query y esto podría no tener mucho sentido aquí en este tipo de visión general pero si bajamos aquí, podemos empezar a ver algunos ejemplos. El modo en que inicias una consulta de medios es con @media entonces el primer poco valor aquí es pantalla. Pantalla, como puedes ver aquí, se utiliza para pantallas de computadora, tablets, smartphones, etc. Cuando estamos haciendo diseño web responsive, la pantalla es la que queremos usar. Después ponemos un final para decir que estamos definiendo una nueva condición y luego ponemos en min-width o max-width o ambos. Podemos restringir estos estilos particulares que definimos dentro los corchetes rizados de esta Media Query a solo un tamaño de pantalla de más de 480 píxeles. Aquí faltan un poco los ejemplos, así que voy a entrar en la siguiente lección aquí y ver algunos ejemplos más. Un buen ejemplo aquí, si me desplazo hacia abajo, es este ejemplo aquí creo que es bastante simple de entender. Aquí tenemos nuestros estilos estándar para cada tamaño de pantalla, y luego tenemos nuestras consultas de medios. Éste está diciendo, aplica todos estos estilos cuando el ancho de la pantalla es de un mínimo de 600 píxeles. Está diciendo que cualquier DIV con la clase de ejemplo, queremos establecer el tamaño de fuente en 80 píxeles. Ahora éste está hablando de lo contrario. Cuando el tamaño de la pantalla es menor a 600 píxeles, queremos que cada DIV con la clase de ejemplo tenga un tamaño de fuente de 30. Ahora podemos ver el efecto de esto si empezamos a redimensionar la ventana del navegador. Aquí mismo nos dirá qué tan amplia es esta ventana en particular. Si arrastramos nuestra propia ventana hacia abajo hasta que llegue a menos de 600, comenzaremos a ver un cambio. Aquí vamos, estamos poco por encima de 600 y luego en cuanto cruzamos 600, el tamaño de fuente de esto baja. Eso es porque lo hemos especificado así. Pero podemos entrar aquí y especificar lo que quieras. Podríamos cambiar el color a verde. Podríamos cambiar la familia de fuentes. Voy a dar clic en Ejecutar en eso y luego mostrarte eso ahora. A ver cuando llega a menos de 600 píxeles, tenemos tamaño de fuente 30 píxeles y color verde. Otra cosa que quiero mostrarte aquí que no te muestra es puedes combinar max-width, max-height. Digamos, por ejemplo, que quería crear otro nivel dentro de esto, voy a mantener ese max-width en realidad. Lo que voy a hacer es otro y, y aquí mismo, voy a poner un min-ancho. Entre los anchos de 400 píxeles y 600 píxeles, hagamos que el tamaño de fuente sea 10. No se va a quedar genial, pero estoy presionando Guardar sólo por una fuerza de hábito. No se va a quedar genial pero al menos lo demostrará en este ejemplo. Voy a poner para aquí, un ancho máximo de 400 y hacer esto aún más pequeño. Lo que va a pasar ahora es por defecto, nuestro tamaño de pantalla es 825, que es mayor que 600 por lo que vamos a tener un tamaño de fuente de 80. Pero luego una vez que lo reduzcamos entre 600 píxeles y 400 píxeles, vamos a obtener un tamaño de fuente de 10 píxeles y un color de rojo. Después menos de 400, vamos a conseguir un tamaño de fuente de cinco y un color de verde. A ver si esto funciona. Ahora vamos a bajar, ahora estamos por debajo de 600 pero por encima de 400. Tenemos una marea roja de 10 píxeles aquí. Ahora si vamos más abajo y vamos por debajo de 400, veamos qué pasa. De repente tenemos una pieza de texto aún más pequeña y el color es verde. Nuevamente, no el ejemplo más práctico, pero se puede ver que podemos definir diferentes, supongo, hojas de estilo o realmente es la misma hoja de estilo pero diferentes secciones de la hoja de estilos y definir estilos para anchos de pantalla particulares. Eso es muy importante en CSS y puedes consultar aquí para obtener ejemplos extra. También podemos apuntar a la orientación. Podemos apuntar si es en paisaje o retrato y luego el ejemplo aquí es usar max-width y min-width para que podamos apuntar entre anchos de pantalla particulares para hacer estilos particulares. The Media Query y Responsive Web Design es algo que veremos un poco más adelante ahora que vamos a entrar en implementar Bootstrap en nuestro proyecto. Vamos a convertir este desastre gigante en algo un poco más bonito y construir unas cuantas páginas más. Entonces después de eso, te pondremos en marcha en tu proyecto de clase. Gracias por acompañarme a través de esta clase bastante involucrada sobre HTML y CSS. En los próximos videos, vamos a empezar realmente a construir algo que ojalá se vea bastante bonito. Te veré en el siguiente video. 29. Cómo reconstruir nuestra página web con Bootstrap: Ahora mismo si eres un poco autoiniciador, puedes usar los conocimientos que has aprendido en esta clase con HTML y CSS y la documentación aquí en bootstrap y empezar a crear tu página web o sitio web. Pero para aquellos de ustedes que necesitan un poco más de orientación, quédense por ahí porque en este video, voy a reconstruir nuestra página usando Bootstrap. Hay mucho trabajo que necesita seguir con nuestra página web actual es bastante horrendo No voy a mentir. Eso se debe a que hemos estado tratando de incluir todos estos diferentes ejemplos y elementos. Lo que voy a hacer primero es despojarlo completamente y reconstruirlo con Bootstrap. las cosas que me voy a deshacer para tener esto listo es que no necesito algunos de estos estilos, así que los voy a quitar. Voy a deshacerme de estos enlaces y botones aleatorios. Voy a dejarle ese primer párrafo él con la foto. Voy a tener nuestra historia es el segundo rubro, pero ya no necesito la identificación. Voy a deshacerme de este segundo párrafo. Voy a mantener la mesa como línea de tiempo. Voy a mantener nuestros valores como punto oscuro y nuestros servicios, me voy a ir como un div sin ninguna clase en particular en él. Voy a asegurarme de que no he borrado demasiados div. No, parece que estamos bien. Veamos dónde estamos ahora. Yo digo. Enfriar. También voy a eliminar los estilos en mi styles.css. No tienes que hacerlo tú mismo si pasaste mucho tiempo en ello y en realidad te gustan estos estilos, esto es solo un completo desastre también. Voy a eliminar todos mis estilos y empezar completamente desde cero. Aquí tienes. Tienes una página web con un montón de elementos y prácticamente ningún estilo aparte de esto aquí del cual me desharé, realmente no necesitamos y los estilos que se están aplicando automáticamente por bootstrap. Lo primero que queremos hacer es poner todo esto en un contenedor. Si queremos aprender sobre contenedores, creo que está aquí en disposición. Yo sólo voy a buscar contenedor. Se puede ver en el diseño, podemos usar contenedores para crear el sistema de cuadrícula. Lo que también hace es crear un ancho máximo en diferentes puntos de ruptura. Qué puntos de ruptura, para aquellos de ustedes que no están familiarizados con la idea de un punto de ruptura, es lo que teníamos antes cuando estábamos haciendo las consultas de medios que estábamos estableciendo y los látigos máximos. Entonces cuando llegó a ese punto de ruptura, fue entonces cuando empezamos a cambiar el contenido de la página. Pero lo verás ahora mismo si vuelvo a aquí y creo un div, le doy una clase de contenedor cerca que voy a poner todo esto en un poquito y luego poner la etiqueta div de cierre. Ahora deberíamos empezar a ver esta limpieza bastante bien. Voy a refrescar la página. Ahora a un ancho de pantalla más grande, podemos ver que sólo ocupa lo suficiente que la hace más legible. Pero si vamos a reducir el tamaño del mismo, cambia el ancho máximo del contenedor. Si nos ponemos muy apretados, sólo va a ir de ancho completo. Aquí puedes ver puntos de rotura. Ya ves cómo está cambiando el ancho del contenedor en función de diferentes tamaños de pantalla. Esta es realmente una poderosa característica de Bootstrap y obtenemos un diseño web responsive directamente por la puerta. Implementar el contenedor es una de las victorias más fáciles que podemos tener en Bootstrap. Veamos qué más podemos arreglar en Bootstrap. Una oportunidad que puedo ver aquí aparte de que necesito deshacerme de ese título. Sólo déjame arreglar eso. Algo que podemos arreglar aquí es esta mesa. Si quiero volver a la documentación de Bootstrap, escriba tablas, y veamos cómo podemos diseñar tablas de una manera agradable usando Bootstrap. El primero que tenemos que hacer es darle a la mesa una clase de mesa. Nuevamente, aprovechando las clases en bootstrap, podemos simplemente poner en una clase y conseguir algunos estilos de inmediato. Vamos a darle a la mesa una clase de mesa. Entonces de repente tenemos una mesa de estilo. Qué grande es eso. Tenemos algunas opciones más aquí. Podemos hacer de la cabeza un color diferente. A lo mejor usamos una sección de cabeza de té en nuestra mesa para que podamos ir encima de la cabeza. Tenemos una clase thead, feed doc. Después pondríamos esto y luego poníamos la etiqueta de cierre. Guardemos eso y echemos un vistazo a cómo se ve eso. Sí, así que ahora tenemos una fila de encabezamiento de muelle, y ahora la fuente ha sido cambiada al color del blanco. A lo mejor para nuestros servicios queremos algunas tarjetas. Vamos a teclear tarjetas. Recuerdo que puse un código como ejemplo antes. Yo sólo voy a seleccionar esto. Voy a crear una sección aquí donde pongo algunas tarjetas. Esa es la primera tarjeta. Puedo poner una segunda tarjeta. Presionaré “Guardar” en eso y veré qué pasa. Estos se están mostrando uno encima del otro. Bloque de exhibición, si recuerdas. Lo que podemos hacer es entrar en nuestro style.css y tenerlo para que nuestras tarjetas se muestren en línea. Podemos modificar el estilo que ya existe en Bootstrap. Podemos mostrar bloque en línea, presionar guardar, y luego de repente se muestran en línea. Ahora quiero darle algún margen, así que le voy a dar algún margen así. Voy a hacerlo 10 pixeles. Entonces de repente tenemos alguna tarjeta con algún margen. Voy a duplicar esto fuera. Lo que puedes ver aquí es que estamos aprovechando Bootstrap, pero luego también somos capaces de sumar urna y estilos y modificar encima de ella. Bootstrap saca mucho de las bases de ello. Entonces podemos entrar y usar nuestros propios estilos y simplemente hacer referencia a las clases que crean, pero luego también modificar las clases que crean para obtener algo que queremos. Para nuestros servicios, tal vez ponemos negocios, tal vez ponemos diseño. Yo solo estoy inventando esto aquí. Impresión y consultoría, diseño, impresión de una consultoría mal hechizo ahí. Después encontraremos una imagen para cada una de estas tarjetas. No creo que valga la pena ir y abastecer y nueva imagen sólo por este ejemplo. Yo sólo voy a usar para el SRC de cada etiqueta de imagen, sólo voy a poner en foto. Presiona “Guardar”. Ahora se puede ver que tenemos tres tarjetas y decir por ejemplo, esta era nuestra página sobre. Fuiste a servicios. Podrías hacer click en estos botones y de repente ser llevado a esa página. En este momento sólo tenemos que hash para un Marcador de posición, pero solo podrías actualizar esto aquí mismo. Todo esto es solo una etiqueta de enlace, pero tiene estilo usando Bootstrap para parecer un botón. También podemos cambiar el texto sobre estos, por lo que podríamos decir servicios de consultoría. Entonces actualiza eso para el diseño aquí arriba. Checkout nuestros servicios de diseño. Ya tenemos configurada esta plantilla y solo podemos entrar y modificarla. Ese es el poder de Bootstrap. Espero que tengas suficiente ahí para continuar con uno. En el siguiente video, voy a compartir con ustedes su proyecto de clase. 30. Extra: cómo aplicar estilo a la página de contacto y diseño: El último video se suponía que sería el video de compartir pantalla final en esta clase, pero acabo de recordar que les prometí chicos que le daríamos estilo a un formulario, así que estoy incluyendo este video como video extra, y sí tenemos la oportunidad aquí de darle estilo las otras dos páginas HTML que tenemos en nuestro proyecto. Hablo de contact.html y layout.html, y dentro de contact.html, sí tenemos un formulario, así que esa es una buena oportunidad para mostrarte cómo podemos darle estilo a un formulario usando bootstrap. Voy a abrir una nueva pestaña para que podamos mantener abierta la documentación de bootstrap, y al igual que antes, voy a arrastrar en contact.html para que eso esté abierto en nuestro navegador. Aquí está nuestra forma mal estilizada. Pero lo que voy a hacer es modificar esto usando Bootstrap y esperemos que se vea mucho más bonito. Volviendo a la documentación, voy a dar click en “Formularios” y como podemos ver aquí, así es como empezará a verse nuestro formulario. Tener lindas etiquetas y relleno, y bonitos botones también, y aquí mismo podemos ver el código que generará esta forma aquí. Pero antes que nada en nuestro nuevo documento, necesitamos incluir realmente a Bootstrap, así que lo que voy a hacer es abrir mi editor de código, y se puede ver aquí en index.html, la etiqueta que usamos para incluir a Bootstrap en índice. html. Vamos a necesitar copiar eso a través de contact.html para incluir también a Bootstrap en ese documento. Todo lo que voy a hacer es copiar eso, pasar a contact.html, y debajo de la etiqueta de título sólo pega eso en. Voy a presionar “Guardar” en eso y luego ir por aquí, y ahora deberíamos empezar a ver nuestro formulario cambiar un poco con solo incluir bootstrap. Ahí lo tienes. El botón ha cambiado, el margen ha cambiado, la fuente ha cambiado, pero todavía no se ve tan genial. Lo que voy a hacer, es volver a aquí, y hacer referencia a lo que hay aquí en Bootstrap. Voy a mover eso a un lado de la pantalla, y así podemos trabajar exclusivamente con esto. Ahora lo primero que notarás es que hay un elemento de forma obviamente, que tenemos, y luego hay diferentes divs con la clase de form-group, y dentro de estos divs, tienes todas las cosas diferentes que conforman esa parte de la forma. Tienes la etiqueta, la entrada, y algo de texto en caso de que haya un error de validación. Aquí abajo tienes lo mismo, etiqueta y entrada, aquí abajo, entrada de etiqueta. De hecho, tienes la etiqueta debajo de la entrada en este caso. Entonces finalmente, tienes botón de tipo submit en lugar de una entrada de tipo submit, cosa muy similar, pero solo un elemento diferente. El primero que tenemos que hacer es envolver cada parte del formulario en grupo de formulario, y esto nos dará el estilo que lo romperá en múltiples líneas, así que lo que podemos hacer es deshacernos de estas etiquetas br, ya no las necesitamos, y ahora una vez hecho eso, voy a abrir un div, darle la clase de grupo de formulario, y luego voy a sangrar esto, cerrar la etiqueta div, y voy a hacer esto para el resto de los campos, por lo que rápidamente correré a través de eso. Tenemos a cada uno de ellos envueltos en un grupo de formularios, pero lo otro que notarás es que nuestra etiqueta solo está sentada ahí sin ninguna etiqueta html envolviendo alrededor de ella. De lo que podemos usar es este elemento HTML llamado etiqueta para hacer que este show sea un poco más bonito, así que lo que voy a hacer es envolver todo sobre las etiquetas con el elemento de etiqueta. Hagámoslo ahora mismo. Ahora, notarás que hay un atributo que aún no tenemos, se llama el atributo for, y lo que eso hace es después de establecer un ID en la entrada, puedes poner ese ID en el atributo fore, y eso lo hará indicar que esa etiqueta es ante ese insumo particular. No un 100 por ciento necesario, pero sigamos igual que un ejemplo, y pongamos en un atributo fore. Ahora la segunda parte de eso en realidad está dando el mismo ID a la entrada. Pero antes de eso hay otra cosa que necesitamos poner en nuestra entrada, y esa es la clase de control de forma. Al igual que aquí, voy a mover esa entrada a otra línea, y voy a antes del nombre. En realidad, no importa dónde se encuentre en la posición del insumo. Simplemente lo pondré el control de formulario de clase final. Ahora puedo poner en el campo ID del nombre de pila, y eso debería completar uno de los grupos de formulario. Voy a pasar ahora y hacer esos cambios para el resto de los grupos de formulario. Eso es casi todo lo que necesitamos para conseguir esta forma lo afilado bien, lo último es cambiar esta entrada de tipo submit a botón de tipo submit, y las diferencias mayores entre una entrada de tipo submit es el valor, que es lo que aparecerá en el botón entra en el campo de valor en una entrada, pero en un botón, va entre estas dos etiquetas de botón. En primer lugar, voy a cambiar esto por botón, y en lugar del valor aquí, voy a crear el inicio de la etiqueta, y luego poner la etiqueta de cierre. El paso final para eso es poner en la clase, por lo que recogerá todos los estilos de un botón en Bootstrap, así btn y luego btn primaria. Guarde eso, y ahora cuando pasemos a nuestro formulario de contacto, debería aparecer un poco diferente. Esperemos que se vea mucho mejor. Ahí vamos, podemos ver que ahora está todo roto en dos líneas diferentes, y el botón se ve un poco diferente. Pero el mayor problema con esto es por supuesto el relleno y el margen, así que sólo vamos a por algún margen encendido ahora mismo. Guarda eso, y ahora tienes una forma formateada más agradable. Voy a dejarlo ahí por formularios. Hay mucho más que puedes hacer para que tu formulario se vea diferente. Se puede agregar en diferentes entradas, así que definitivamente echa un vistazo a la referencia aquí para estilizar formularios. Voy a ir ahora a layout.html y mostrarles cómo podemos obtener un diseño similar a lo que vimos en ese ejemplo que copiamos. Lo que voy a hacer es agarrar nuestro layout.html, dejarlo aquí y luego voy a volver a las escuelas W3, y recordar que encontramos eso en la página de diseño HTML. Lo que voy a hacer es, como pueden ver este primer encabezado de sección se está extendiendo el ancho completo y luego tienes secciones y asides, creo. Pero en realidad vamos a entrar y abrir ese archivo, así que voy a entrar en html y abrir layout.html. Como puedes ver aquí, tenemos un elemento de encabezado con una clase de encabezado, un elemento de sección con una clase de sección, y un elemento de artículo con una clase de artículo, y finalmente un elemento de pie de página con una clase de pie de página. Tenemos todos los elementos ahí para apuntar y todos los estilos ahí para crear cierto estilo, así que lo que voy a hacer es en lugar de crear una hoja de estilos completamente nueva, solo voy a incluir una etiqueta de estilo para que podamos incrustar algunos estilos. Etiqueta de apertura de estilo, etiqueta de cierre de estilo, y una cosa que realmente no se mencionó en el curso es que podemos incluir etiquetas de estilo en cualquier parte de nuestro documento, no tiene que estar de cabeza, pero se recomienda poner en cabeza si tienes una sección de cabecera, este documento en particular, en realidad no tenemos una sección de cabeza, y para este ejemplo en particular, realmente no necesitamos configurar una. Pero normalmente por supuesto tendrías una sección de cabeza. En primer lugar, voy a hacer referencia a esto, dale al encabezado un color de fondo de gris y un color de texto de blanco. Entonces voy a alinear el centro de texto, y veamos qué obtenemos ahora. Enfriar. Aquí mismo tenemos mucho relleno, así que voy a añadir algo de relleno ahora, tengo relleno de 30 pixeles. Ahí vamos. Muy bien, así que ese es nuestro encabezado. El siguiente apartado es esta sección de navegación aquí abajo. No debería usar la sección de palabras porque podría estar confundiéndose con este elemento de sección real. Pero el siguiente elemento de nivel de bloque que podemos darle estilo es este elemento nav aquí. Lo que voy a hacer es entrar aquí nav, darle un color de fondo de Gris claro. Voy a darle algo de relleno y vamos a ver qué pasa. Ahí está, pero por supuesto, está ocupando el ancho completo porque es un elemento de nivel de bloque. Lo que voy a hacer es para nav y el elemento adyacente, que es artículo, establecer estos en inline-block. Voy a mostrar bloque en línea. Aquí se puede ver que en realidad se está rompiendo a una nueva línea. Pero si ampliamos la pantalla, verán que aparece juntos. Lo que necesitamos para arreglar eso, es sólo restringir el ancho de la sección del artículo. Voy a restringirlo a ancho de 500 píxeles, volver a aquí, y ahora se puede ver el uno al lado del otro. Como puedes ver aquí, esta sección no se alinea vertical con la parte superior, así que voy a arreglar esa siguiente línea vertical, arriba. Guarda eso. Ahora está aquí arriba. Voy a darle algún margen al artículo, que no esté tan lejos contra esa frontera. H_1 era un poco más grande en este ejemplo. Voy a dar artículo usando un selector descendiente aquí, Artículo H_1. Esto seleccionará cualquier artículo dentro de H_1, y voy a hacer que el tamaño de la fuente sea el doble de grande. Ahí vamos. El apartado final es el pie de página y tiene un estilo similar al encabezado, así que solo voy a copiar encabezado palabra por palabra. Voy a ponerlo aquí abajo y cambiarlo a pie de página. Como puedes ver aquí, estamos usando selectores de nivel de elemento todo el camino, pero también tenemos clases aquí. Podríamos apuntar vía clases también. En lugar de encabezado, podríamos usar el encabezado de punto porque tenemos una clase de encabezado. Podríamos usar una clase de nav en lugar del selector de elementos nav. Eso nos permitiría crear otro nav que no necesariamente tuviera esa clase y no tuviera afectadas estas reglas. Eso lo guardaré, a ver cómo se ve eso y ahora tenemos este pie de página. Lo siguiente que notarás es que este elemento no se está extendiendo hasta el pie de página. Lo que necesitamos hacer para eso es darle a la sección una cierta altura y luego tener ambos elementos conformes a una altura del 100 por ciento de su elemento padre. Lo que voy a hacer es justo aquí, voy a poner una regla para apuntar a la sección. Voy a darle a la sección una altura de 500 píxeles. Lo que voy a hacer es poner estos para que tengan una altura del 100 por ciento. Eso va a ser un 100 por ciento del elemento aparente, que es sección. Guarda y recarga la página. Desafortunadamente tenemos alguna superposición aquí, y eso es porque tenemos relleno. Entonces para arreglar eso, voy a quitar el relleno del propio nav. Ahora puedes ver que está alineando, pero no hay relleno en esto. Lo que puedo hacer es darle el relleno ul, no el nav. Voy a nav ul relleno diez pixeles. Se puede ver que empezando a aparecer un poco más agradable. Los puntos de punto se van a un lado, pero no los vamos a estar usando de todos modos porque estamos creando el ejemplo aquí. En realidad, si le damos más relleno, vuelve a subir. Podemos lograr eso fácilmente poniendo un estilo de lista, tipo de ninguno para deshacernos de esos puntos de punto. De acuerdo, así que ahora se parece mucho a lo que tenemos aquí. Si ampliamos la ventana, podemos ver que estas secciones serán responsivas a cierto punto. Entonces cuando llega hasta aquí, se detiene. Necesitaremos algunos estilos más sensibles. Entonces para arreglar este estilo en un tamaño de pantalla más pequeño, lo adivinaste, voy a usar una etiqueta de medios, así que lo voy a poner en la parte superior. El motivo por el que lo estoy poniendo un top es que es una cosa pequeña. Pero esencialmente si fuera a cargar esta página en una red lenta en el móvil, los estilos se cargan de arriba a abajo. Todos estos cargarían primero. Entonces si tuviera medios por abajo, cargaría los estilos móviles por última vez. Puede haber este tipo de retraso donde muestra los estilos de escritorio y luego como carga los estilos móviles, es una cosa muy pequeña de la que no me preocuparía, pero por eso lo estoy poniendo en la parte superior y voy a definir el punto de ruptura aquí. Si abrimos este ancho completo y abrimos el inspector, el inspector en realidad nos da el ancho de la ventana. Voy a arrastrar esto hacia abajo hasta que se rompa. Hay un poco de retraso, pero el punto de ruptura parece estar alrededor de 640. Lo que voy a hacer, cerrar eso, volver aquí y decir ancho máximo, 640 píxeles. A ver qué está pasando aquí. Si reduzco el ancho de la ventana, como se puede ver aquí, es esta sección de artículo la que está tocando al fondo. Ahora lo que realmente me gusta hacer cuando estoy depurando código es usar el inspector. Definitivamente te recomiendo si te sientes cómodo con usarlo, definitivamente úsalo. Voy a presionar el comando Alt I en Mac usando chrome. Lo que puedo hacer es hacer clic derecho en este texto que ha bajado por la página e inspeccionar el elemento. Estoy inspeccionando el artículo aquí y puedo ver que se está aplicando un ancho de 500 píxeles. Tenemos un tamaño de pantalla ahora mismo de menos de 500 píxeles. Va a causar algunos problemas a ese tamaño de pantalla. Lo que voy a hacer es en lugar de 500 píxeles, cambiar esto a 250 píxeles. A ver si eso funciona incluso se agrega un tamaño de pantalla más pequeño bajar. Todavía se está rompiendo a un tamaño de pantalla más pequeño. A lo mejor voy a hacer un 150 pixeles. Todo esto sucede justo en nuestro navegador. Entonces si refresco la página, esos cambios no son permanentes. Pero si entro aquí y creo una regla para el artículo, así que por debajo del ancho de 640 píxeles, el ancho de los artículos ahora va a ser de 150 píxeles. Ahora, probablemente quieras usar términos más relativos aquí. Pero en este ejemplo básico, sólo voy a poner un valor fijo. Una cosa más que necesitamos para asegurarnos de que esto anula lo que hay aquí abajo en esta regla decoración es la etiqueta importante. En este caso, está bien usar importante. Recuerda, hay que tener cuidado con lo importante, pero realmente queremos que el ancho baje. El alternativo sería cambiar esto y hacer de este término más relativo. Pero para este ejemplo, sólo voy a tirar en importante. Voy a refrescar la página y ya verás que aún no hay diferencia. Pero si reduzco el ancho de la ventana y llega a ese punto de ruptura de 640 píxeles, el texto se hace más pequeño. Ahí se puede ver incluso a un tamaño de pantalla diminuto, sigue apareciendo bien. Ahora me está molestando un poco que una vez que llegue hasta aquí, es simplemente demasiado pequeño. Entonces voy a intentar crear eso con un ancho relativo. Voy a volver a poner eso, y voy a cambiar eso a un ancho relativo del 55 por ciento. Guarda eso y una vez más, no verás cambios hasta que realmente lleguemos a ese punto de ruptura de 640 píxeles. Pero si voy más abajo, verás que llega a ese punto de ruptura y luego tiene un ancho relativo. Si vamos todo el camino hacia abajo, seguirá funcionando. De acuerdo, así que eso es más o menos lo que quería llegar en este video bonus, ahora puedes verme trabajando a través de un reto de estilo usando CSS. Espero que eso vaya a demostrar que hay retos en el camino con CSS, arrojas algunos estilos, te das cuenta de que afecta a otros elementos de la página. Después modificas diferentes atributos, a veces también cambias la estructura del HTML, para crear el look que vas a buscar y asegurarte de que funcione en cada tamaño de pantalla. Espero que este video haya sido un buen complemento para tu aprendizaje en esta clase. En el siguiente video, vamos a envolverlo todo y ponerte en marcha en tu proyecto de clase. Entonces te veré en la próxima. 31. Conclusión y proyecto de clase: Muy bien, así que ahora espero que estés listo para terminar de construir el resto de tu sitio web estático basado en contenido con HTML y CSS. Recuerda chicos, si necesitas algún consejo o orientación, asegúrate de dejar tu comentario en el recuadro de discusión de abajo, y haré todo lo posible para señalarte en la dirección correcta. En cuanto a desplegar tu sitio web, que es ponerlo en vivo en internet, he cubierto eso anteriormente en mi clase, entendiendo el desarrollo web. Así que solo tienes que dirigirte al primer video sobre implementación en esa clase y tendrás tu sitio web en funcionamiento en poco tiempo si eso es lo que quieres. Por lo que concluye esta clase en HTML y CSS. Obviamente, a pesar de adentrarse en estos dos idiomas, hay mucho más en la web que solo estructura y estilo. Por lo tanto, mantente atentos. Planeo liberar más cursos para que ustedes construyan sus conocimientos de desarrollo web en los próximos meses. Entonces gracias por ver y espero verte en algunas mis otras clases.