Desarrollo web full stack para principiantes, parte 1: HTML, CSS, diseño responsivo

1. ¡Te damos la bienvenida al curso!: Bienvenido a Full Stack Web Development para principiantes. Este curso, los diseños te llevan de un principiante a un desarrollador web capaz de construir las únicas interfaces de usuario front-end, pero también cómo diseñar y construir el backend con el que interactuar también. Entonces, ¿a quién yo? Mi nombre es Chris y seré tu instructor a lo largo de este curso. Soy desarrollador web y también productor de montones de tutoriales enseñando a miles de estudiantes las habilidades que necesitan para construir sitios web y aplicaciones. Esta es la primera parte de la serie completa, donde comenzaremos desde el principio enseñándote cómo HTML, CSS, y diseño web responsive para darte las habilidades que necesitas para construir sitios web funcionales de gran aspecto, que lucen genial en cualquier dispositivo lateral. Este curso contiene más de cinco horas de capacitación de alta calidad. Primero comenzamos con HTML, cubriendo todo lo que necesitas saber desde la configuración y estructuración en páginas web, elementos, y atributos, ocultando formas e insumos, vinculación de páginas web, imágenes, y mucho más. Todo esto se aprende en un enfoque basado en proyectos manos, donde construyes este sitio web completamente desde cero mientras aplicas todas las técnicas que aprendes. Después le damos estilo a esto usando CSS, y cubriremos todo lo que necesitas saber como selectores, fuentes, margen, relleno, el modelo de caja, posicionamiento de flotadores junto con mucho, mucho más, incluye algunos consejos y trucos de CSS útiles en el camino. Luego redondeamos esto haciendo que el sitio responda plenamente para que cambie los diseños y responda a todos los dispositivos de tamaño. Aprenderás todo sobre las unidades escalables, el diseño fluido, las consultas de medios, las imágenes receptivas, todo mientras aplicas esto a un proyecto. Espero que estés emocionado y empecemos a aprender todos los fundamentos del desarrollo web en la primera parte de este curso. 2. Qué necesitarás para este curso (primeros pasos): Para este curso, solo necesitarás unas cuantas cosas para ponerte en marcha. En primer lugar, necesitamos un editor de texto. Es posible que ya tengas una preferencia o una que ya uses. Para este curso, estaré usando Visual Studio Code, que es ideal para la codificación JavaScript, y además tiene un terminal incorporado, que podemos usar más adelante en el curso. Puedes usar lo que quieras. Pero aquí hay algunas opciones populares del editor de texto como Atom, Brackets, WebStorm, y por supuesto, Visual Studio Code. Si ya tienes uno de estos y un navegador web, siéntete libre de pasar al siguiente video. De no ser así, te recomendaría ir a code.visualstudio.com, y seguir las instrucciones de descarga de tu plataforma. Por último, también necesitarás un navegador web. Te recomendaría Chrome de Google, pero puedes usar cualquiera que prefieras. Durante el curso, estaremos usando las herramientas de desarrollador dentro de Chrome, pero otros navegadores sí tienen estas integradas también. Puede que se vea un poco diferente a lo que estoy haciendo. Esto es ahora todo lo que necesitamos para entrar. A continuación, echaremos un vistazo a lo que realmente es HTML. 3. Qué es HTML (primeros pasos): Antes de saltar a añadir HTML a nuestras páginas web, solo quiero asegurarme de que entendemos exactamente qué es HTML y qué hace. No voy a ir demasiado profundo y técnico todavía. Pero entender por qué lo usamos y por qué surgió en primer lugar realmente nos beneficiará cuando vengamos a codificarlos. En primer lugar, ¿qué es exactamente HTML? HTML significa Lenguaje de marcado de hipertexto. Puede sonar un poco raro al principio, pero pronto veremos qué significa todo esto. HTML es un lenguaje de marcado estándar para crear sitios web y aplicaciones. HTML está en todas partes de la web. La mayoría de los sitios web se construyen usando esto y todos los navegadores saben leerlo y mostrarlo correctamente. Como todos los lenguajes de programación y la mayoría de las cosas en la vida, las cosas cambian y evolucionan. Actualmente poseemos la versión cinco de HTML. Al igual que todas las versiones nuevas, las cosas se agregan o eliminan cuando sale una nueva versión, que no es tan frecuente, no es algo de qué preocuparse. Todo lo que ya sabemos generalmente sigue aplicándose. A menudo es un caso de mejoras y nuevas características a medida que la tecnología avanza. Cubriremos muchas de las nuevas características de HTML5 durante este curso. HTML se utiliza para dar formato a un documento web. Un navegador web sabe cómo mostrarlo correctamente. Como hemos dicho antes, es un lenguaje de marcado predeterminado de la web, por lo que todos los navegadores web saben manejar y mostrar el documento HTML correctamente. El HTML aplica el formato necesario para instruir al navegador qué hacer. HTML fue inventado por un físico llamado Tim Berners-Lee. El desarrollo se llevó a cabo alrededor de 1989-1990, donde se introducen memos o propuestas de HTML. La idea detrás del HTML era crear una forma para que los investigadores se enviaran y recibieran documentos entre sí electrónicamente. Para entender por qué se creó HTML, primero, echemos un vistazo al problema. Se trata de una imagen tomada del sitio web de Wikipedia. Pero imagínense que se trataba de un texto documentos que necesitaban ser enviados a departamentos individuales. Al enviar este texto, no hay forma de describir el formato. El encabezado HTML en la parte superior es más grande y también negrita. Hay una línea debajo de ella y luego algunos textos estándar. También el inicio del párrafo también es negrita y el texto también contiene una serie de enlaces que desea conectar con otros documentos. Este es un problema al que se enfrentaban los investigadores. Para empezar a resolver este problema, uno de los primeros pasos es la idea de marcar el texto. Cuando se trabaja con manuscritos o documentos escritos a mano, tipógrafos o editores suelen escribir o marcar el texto en los márgenes del papel. Esto incluiría información como el estilo y el tamaño del texto para cada sección antes de ser transmitida para la tipografía. La idea de esta marca ha influido claramente en la forma en que se diseña el HTML. Mira en nuestro texto aquí antes y unos equivalentes de HTML básicos a la izquierda. Desde arriba, marcamos el encabezado HTML rodeándolo en este h1 tags. Miraremos más de cerca en todos estos momentos durante el curso. Pero este h1 describe el contenido como el más importante y también se muestra como el encabezado más grande. Ahora tenemos una manera de describir cómo se verán los textos al lector de documentos, como un navegador web. Lo mismo para abajo, tenemos una etiqueta hr para describir dónde queremos que aparezca una regla horizontal. trata de una etiqueta independiente y no necesita ningún contenido de texto para formatear, ellos por debajo de estos párrafos estándar de texto e incluidos con las etiquetas p. También tenemos etiquetas fuertes para decirle al navegador que este texto tiene una gran importancia, y también para mostrar en negrita. Por supuesto, hay mucho más de estas etiquetas para cubrir pero este ejemplo básico ahora debería darte una mejor comprensión de cómo funcionan las cosas. También queremos una forma para que estos enlaces en azul aquí puedan conectar todos los enlaces a otros documentos. Esto nos lleva al hipertexto. hipertexto es otra de esas palabras que conforman HTML. Este es básicamente el texto en la pantalla que son referencias a otro texto o documentos. Los documentos de hipertexto están vinculados por lo que llamamos hipervínculos. Esto lo vemos en la mayoría de las páginas web que visitamos todos los días. A menudo eso es una navegación superior con enlaces o hipervínculos a otras páginas. Estas páginas web a menudo separan documentos también como se ve aquí. Por lo que ahora sabemos que los textos en una página web suelen estar rodeados, todos marcados con etiquetas, igual que miramos hace unas diapositivas, y también estas etiquetas p en la parte inferior. Estas etiquetas completas con el contenido en el medio se llama un elemento. Los elementos pueden ser pensados como los bloques de construcción de una página web. Tendrás mucha práctica escribiendo estos elementos durante el curso. Lo último que vamos a ver en este video son los atributos. Se agregan atributos a los elementos para proporcionar alguna información adicional. Por ejemplo, podríamos establecer el color del texto, podríamos decirle al navegador a qué página enlazar si se hace clic en ella, o como se puede ver en el ejemplo aquí, podemos establecer un ID único para los elementos. Si todo esto es nuevo para ti y mucho que tomar, no te preocupes es aquí. Si bien es bueno conocer la historia y los antecedentes, lo principal a comprender es cómo hacen estas etiquetas para crear elementos y obtendrás mucha más práctica a medida que avanzas a lo largo de este curso. 4. Creación de un proyecto web (HTML para principiantes): Durante las próximas secciones, estaremos aprendiendo sobre los conceptos básicos de HTML y CSS. También estaremos aplicando estas técnicas a un proyecto a medida que las aprendas para mostrarte cómo se aplican todas estas a un sitio web real. El proyecto para ser una Tech Store exhibe algunos productos y también cómo algunas áreas diferentes como encabezados, pies de página y también barra lateral. Solo tendrá funcionalidad básica como hacer clic en un ítem para ver los productos completos. Esos nos darán una buena oportunidad de conseguir alguna práctica de HTML y CSS. Al iniciar cualquier nuevo proyecto web, primero necesitamos crear una carpeta de proyecto para almacenar todos los archivos, carpetas, imágenes y cualquier otro activo relacionado con el proyecto. Para empezar, vamos a pasar al Escritorio y crear una nueva carpeta haciendo clic derecho y luego Nueva carpeta. Voy a llamar a esto el nombre de nuestro proyecto, que es Tech-store. Por supuesto, puedes crear esta carpeta en cualquier lugar de tu computadora la cual prefieras. Entonces voy a abrir Visual Studio Code que es el editor de texto que voy a utilizar para el resto de este curso. Abre eso, todo tu editor de texto preferido y puedes arrastrar la carpeta hacia adentro. Abre eso y verás el nombre en una barra lateral de la izquierda. O puede ir al archivo y luego abrirlo y seleccionarlo desde ahí. Ahora necesitas crear nuestros primeros documentos web o nuestro archivo. De nuevo, dependiendo de tu editor de texto puede haber pocas formas de hacerlo. En código de Visual Studio, puedes usar Command y N en un Mac para abrir un nuevo archivo. O en Windows puede ser Control más N. También la mayoría de los editores de texto tienen otra opción, de ir al Archivo y luego Nuevo Archivo en la parte superior ahí. partir de ahí voy a dar click en “Nuevo Archivo” y luego voy a llamar a esto el index.html. Todas las páginas HTML necesitan tener la extensión this.HTML al final. Por lo que el navegador sabe que se trata de un archivo HTML. Golpea “Enter”. Podemos nombrar a este archivo lo que queramos, y crearemos múltiples archivos HTML para este primer proyecto. Pero el índice es un nombre común para el sitio predeterminado o la página de inicio. Así que asegúrate de que esto esté dentro del proyecto Tech Store y luego vamos al área de edición a la derecha. Si escribimos algunos textos como, hola, consigue eso guardado. Entonces si abrimos nuestra carpeta del proyecto y luego hacemos doble clic en la página index.html, abrimos esto dentro del navegador, y ahí vemos nuestro texto de, hola, dentro del navegador. Por supuesto, sabemos por el último apartado que necesitamos rodear este texto con etiquetas P para que sea válido. Pero por ahora nuestro proyecto está todo listo y listo para pasar justo ahora a estructurar en nuestra página de índice. 5. Estructuración de una página web (HTML para principiantes): Con la carpeta del proyecto ahora configurada, ahora podemos comenzar a agregar alguna estructura a nuestra página de índice. Antes de empezar a agregar nuestros elementos HTML, para agregar contenido a nuestra página, hay alguna estructura básica que primero necesitamos agregar. Voy a empezar por eliminar este texto hola del último video, y lo primero que necesitamos agregar en la parte superior de cada página es una declaración DOCTYPE, que se ve así. Si abre y cierra los corchetes angulares, agregue un signo de exclamación y, a continuación, escriba DOCTYPE de HTML. Las declaraciones DOCTYPE son una forma de declarar qué versión de HTML estamos utilizando. Se trata de un DOCTYPE para HTML versión 5. Las versiones anteriores eran mucho más largas y más complicadas. Bueno, HTML5 hace que las cosas sean agradables y simples para nosotros. El término DOCTYPE no es sensible a mayúsculas, pero me gusta escribir la mía en mayúsculas de todos modos. Después agregamos las etiquetas de elemento HTML principal o la raíz. Entonces justo debajo del DOCTYPE, abre y cierra los corchetes angulares, escribe HTML, y luego cuando esto se cierre, de nuevo, abre y cierra tus corchetes angulares, agrega una barras inclinadas hacia adelante y HTML. Con este siendo el elemento raíz, todo lo demás debe agregarse entre estas etiquetas. Este tipo top en la parte superior es la única excepción a esto. Dentro de la etiqueta HTML de apertura, voy a agregar un atributo. Hablamos brevemente sobre los atributos en la última sección. Los atributos son solo una forma para que proporcionemos alguna información adicional que necesitamos agregar a la etiqueta de apertura. Para la etiqueta HTML, podemos proporcionar los atributos del lenguaje con lang. Esto le dice a los navegadores y motores de búsqueda el idioma de la página web que estamos creando. Estaré creando este sitio en inglés, por lo que el código es igual a en, dentro de estas citas. Una búsqueda rápida en Google de códigos de idioma HTML mostrará una lista de códigos de país, si desea utilizar un idioma diferente. Dentro de estos elementos HTML, hay dos elementos principales que ahora podemos agregar, llamados la cabeza y el cuerpo. Entonces justo debajo de estas etiquetas de apertura, podemos volver a abrir los corchetes y escribir en la cabeza y cerrar eso. Se puede ver que el código de Visual Studio se completa automáticamente de la siguiente manera. Si tu editor de texto no lo hace, simplemente sigue adelante y escribe la etiqueta de cierre con la barras inclinadas hacia adelante. Después de esto podemos agregar el cuerpo. Esto nuevamente tiene una apertura y una etiqueta de cierre también. Esta sección de cabecera en la parte superior contiene datos sobre el sitio web, a menudo llamados metadatos. El contenido que agregamos al cabezal no suele mostrarse en la página dentro del navegador, sí, sin embargo, proporciona alguna información importante sobre el documento HTML, como el título del sitio, información de búsqueda motores. También podemos vincularlo a todos los archivos, y veremos esto durante el inicio. El primer elemento que voy a añadir a la sección de cabeza es una metaetiqueta. Las etiquetas meta básicamente proporcionan información sobre el sitio y es la primera etiqueta de autocierre que hemos visto hasta ahora. Esto significa que no tiene etiqueta de cierre. No necesita uno porque no agregamos ningún contenido dentro, simplemente le agregamos un atributo. Hay un montón de metaetiquetas diferentes disponibles para proporcionar información sobre la descripción del sitio, la oferta del sitio. También podemos usarlo para agregar palabras clave también. Para este sin embargo, todo lo que voy a hacer es agregar un juego de caracteres, utilizado para el sitio, con los atributos de juego de caracteres. Entonces vamos a crear nuestra metaetiqueta, M-E-T-A, cerrar, y luego podemos agregar nuestros atributos de conjunto de caracteres y esto va a ser igual al guión UTF 8. Establecer una codificación de caracteres puede sonar complicado, pero simplemente estamos declarando qué caracteres estamos usando en esta página web. El personaje ha estado en números, letras, y también cualquier símbolo de carácter que encontrarás en tu teclado, como el símbolo at y también símbolos positivos y negativos, o incluso paréntesis. UTF-8 es un estándar HTML5, requiere casi todos los personajes disponibles en el mundo. A continuación, justo debajo de esta metaetiqueta, voy a añadir el título. Por lo que en el título está abriendo y cerrando etiquetas. Voy a llamar a la mina la tienda de tecnología y tenemos que sumar esto entre las dos etiquetas. Entonces bajo n igual que eso. Si le damos a eso un guardado y luego abrimos el navegador con index.html abierto, dale una actualización a eso, y podemos ver que tenemos tienda de tecnología en la parte superior del navegador, justo ahí. Vamos a sumar a esta sección de cabecera a lo largo de este proyecto, y también más adelante en este curso. Esto ahora nos deja con esta sección de cuerpo. El cuerpo es donde agregamos todo el contenido que aparecerá en la página. Si seguimos adelante y tecleamos de nuevo nuestro hola, justo debajo del cuerpo así. Dale a eso un guardado y luego vuelve a cargar el navegador. Vemos ahora que el texto aparece de nuevo en la página. Genial. Nuestra estructura HTML ya está en su lugar, y ahora podemos pasar a mirar algunos elementos HTML más que añadiremos a esta sección de cuerpo. 6. Encabezados de HTML (HTML para principiantes): En los últimos videos, nos hemos concentrado en configurar un proyecto de sitio web junto con agregar la estructura básica para nuestra página de índice. A pesar de que todo esto es esencial para un proyecto de sitio web, estoy seguro de que todos están interesados en conseguir alguna visualización de contenido real dentro del navegador. Cuando miramos HTML en las diapositivas recientes, echamos un breve vistazo a los encabezados HTML. encabezamientos se utilizan para estructurar el contenido de la página de más a menos importante, y se numeran h1 a h6. Utilizamos h1 para los encabezados más importantes o principales, h2 el ligeramente menos importante y así sucesivamente. h1 es también el más grande, bajando a h6 siendo el más pequeño por defecto. encabezamientos son utilizados por los motores de búsqueda como Google para determinar qué contenido es más importante. En este ejemplo, el texto HTML en negrita grande en la parte superior aquí está marcado usando una etiqueta de encabezado de h1. Esto tiene sentido ya que es el tema principal de la página. Podemos ver esto en acción visitando la página de Wikipedia de la que fue tomada. Si nos dirigimos a Google y entonces vamos a buscar Wikipedia, HTML y seleccionar el enlace superior justo ahí. Usando las herramientas de desarrollo de Google Chrome, que utilizamos bastante a través de este curso, podemos demostrar que se trata de un encabezado de nivel uno. Dentro de un Chrome si escribimos o controlamos click y luego bajamos a inspeccionar, esto abre las herramientas del desarrollador. No te preocupes demasiado por lo que vemos aquí sólo por ahora. Esto lo veremos con más detalle a lo largo del curso. Por ahora sin embargo, si pasamos al inspector, que es flecha en la esquina, haga clic en esto. Entonces si paso el cursor sobre el HTML y hago clic en eso, podemos ver dentro del código aquí, la línea azul que se destaca es una h1. No te preocupes por nada de lo que está pasando aquí todavía. Lo principal a saber es que hemos seleccionado el texto HTML. Podemos ver que esto es sólo un elemento h1 con algunos atributos dentro, como el ID, la clase, y también el lenguaje que hemos visto antes. En realidad no es nada que no hayamos visto hasta ahora. Ahora vamos a dar a esto un ir nosotros mismos. Si cerramos las herramientas de desarrollador y volvemos al editor de texto, ya sabemos que el contenido que queremos mostrar en el navegador se coloca entre las etiquetas de cuerpo. Podemos sumar nuestros encabezamientos dentro de ahí. En realidad está en la sección inferior antes y empezar a crear algunos encabezamientos. Primero h1 y agreguemos algún texto dentro de aquí, simplemente de encabezar uno. En la siguiente línea sumemos nuestro h2 con el texto del encabezamiento dos. Siguiente línea h3, h4, texto subpartida cuatro y dos más para ir. h5 para los pequeños. Nuestro rubro cinco y luego finalmente el último es el rumbo seis. Escribe eso todo en, dale a eso un guardado y luego pasa al navegador. Asegúrese de que la página index.html esté abierta desde antes. De no ser así, vuelve al archivo y luego abre, da una recarga. Podemos ver claramente la diferencia entre los tamaños de encabezamiento. Pero no debemos sentirnos tentados a usarlos a un lado del texto o hacerlos parecer más audaces. Recuerda que los encabezamientos son por importancia. Si volvemos a nuestra página web terminada, que miramos antes, tenemos algunos casos en los que podríamos usar encabezados. Tenemos el título principal del sitio de tienda de tecnología en la parte superior, lo que podría ser un buen caso de uso para h1. También tenemos el texto de tienda por y todos los artículos en la parte superior de cada sección. Estos dos son encabezados de Nivel Dos, luego el encabezado de barra lateral de categoría y también precio será buen caso de uso para h3. Pongámoslo en práctica aplicando estos a nuestro proyecto. Volvamos a nuestra página index.html y dentro del cuerpo, vamos a quitar h2 derecho a través de h6 dejando h1 entre la sección del cuerpo. Este h1 como acabamos de ver dentro de la versión terminada, podemos agregar un texto de tienda de tecnología, guarde eso. Recarga el navegador, y ahí está nuestro título de sitio. Volver a la versión terminada. Mover hacia abajo por la barra lateral tenía el texto h2 de tienda por y luego teníamos los títulos de categoría y precio. Añadamos estos ahora. Justo debajo del título de la tienda de tecnología, sumemos nuestro h2 y entre estos tiempos podemos agregar el texto de tienda por. Permanecer con sección de barra de diseño a continuación la cual podemos agregar nuestros dos encabezamientos Nivel Tres. El primero fue el texto de categoría. Cierra eso. El texto de categoría. Entonces justo debajo de eso, también había un h3, que era por el precio. Acabo de tener un colon tras tienda por ahí. Dale a eso un guardado y veamos cómo se ve ahora la barra lateral. Está bien, bien. Simplemente agrego la moneda entre corchetes. Agrega un símbolo de moneda dentro de eso. Ahora este es el texto de la barra lateral en su lugar. Por último, podemos sumar todos los artículos que fue para la diferente sección del lado derecho aquí. Esto también es un h2 rumbo al igual que tienda por. Podemos agregar esto justo a continuación. Añadamos h2 y un texto de todos los ítems, seguido de los dos puntos. Guarda eso. Ahora vemos esto en la página también. Las cosas no se ven demasiado bien por el momento pero recuerda, HTML es sólo para el contenido. Las cosas comenzarán a verse mucho mejor cuando nos sumergamos en CSS para peinar y también diseñar estos textos. A continuación, echaremos un vistazo a cómo seccionar o agrupar contenido relacionado usando etiquetas div. 7. Div y span (HTML para principiantes): Ahora tenemos algún contenido en la pantalla dentro del navegador. Pero por el momento no está realmente organizado. Acabamos de agregar algunos contenidos básicamente de arriba a abajo, mientras que no podemos hacer mucho estilo y posición de estos encabezamientos, hasta que lleguemos a la sección CSS, podemos empezar a agrupar nuestro contenido relacionado. Si volvemos a echar un vistazo al sitio terminado, mirando aquí en la página de inicio, incluso alguien completamente nuevo en la construcción de sitios web probablemente podría averiguar qué secciones deberían estar agrupadas. Tenemos una cabecera en la parte superior, que sería una zona. En el lado izquierdo, tenemos la barra lateral. También contamos con un área de productos mostrando todos nuestros productos de nuestra tienda. Contamos con información individual del producto como esta sección aquí y abajo en la parte inferior, también tenemos un área de pie de página. Agrupar contenido es bastante directo. Solo necesitamos rodear el contenido en un contenedor llamado div. Un div es un elemento y tiene una etiqueta de apertura y cierre. Es la abreviatura de una división. De vuelta en el archivo html índice, podemos agregar algunos elementos div a nuestra página web. Cerremos esto y volvamos a nuestra página de índice. El texto que están en la parte superior, que era el encabezado, va a estar dentro del grupo de encabezados. Vamos a crear nuestra etiqueta div. Una etiqueta de apertura y la etiqueta de cierre también. Mantén esto organizado y sigue sumarlos en su propia línea. Entonces voy a cortar el h1 de antes. Ahora coloca esto dentro de esta sección div. Ahora ten una sección de encabezado. Si le damos a eso un guardado y luego recargamos el navegador, no vemos ningún cambio. Esto se debe a que un div es solo un contenedor general. No obstante, son realmente importantes, y usaron mucho. Veremos la importancia más adelante, cuando nos metamos en la sección CSS. Porque por ejemplo, podríamos agrupar todo el contenido del encabezado y aplicar un determinado color de fuente, o color de fondo a la sección completa. O podríamos establecer un div para que se posicione a la izquierda de la página, y otro div en el lado derecho. Volvamos atrás y agreguemos dos contenedores más. El primer contenedor va a ser para la barra lateral, que tiene los tres encabezamientos justo aquí. Soplar el div. Añadamos un segundo div, y luego podemos cortar los tres encabezados y pegarlos aquí dentro. Por último nuestro tercer y último div justo por debajo de estos dos. Cierra eso y luego podemos pegar en el h2 de todos los artículos. medida que avanzas por esta sección también agregará más contenido a esta sección principal, como los productos. Pero por ahora sólo tenemos el encabezado de todos los artículos, dale ese ahorro, y luego recargar. Todavía no vemos cambios, pero esto está bien por ahora. También hay otro elemento usado también como contenedor. A esto se le llama los elementos span. Para mostrar la diferencia entre div y span. En primer lugar, imaginemos que queríamos aplicar algún estilo especial al símbolo de signo $, que acabamos de tener aquí. Pero no el precio. Podríamos rodear este símbolo $ con un tipo div. Hagámoslo ahora. Cortar esta sección y pegarla en. Si guardamos eso y luego recargamos el navegador, vemos que sucede algo extraño. El div empuja el símbolo $ a una nueva línea. Esto se debe a que un div se llama elemento de nivel de bloque. Los elementos se agrupan en su mayoría en ser un nivel de bloque o un elemento en línea. Los elementos a nivel de bloque ocupan todo el ancho disponible del navegador y también se inicia en una nueva línea. Además, todos los encabezamientos que hemos utilizado hasta ahora, justo arriba y abajo son también el nivel dos de bloque. Es por ello que los vemos apilados uno encima del otro, cada uno comenzando en una nueva línea. Los elementos en línea, sin embargo, como pueden sonar, no comienzan por su propia línea. Si hay espacio disponible, se alinearán a través de la página. A span elementos que mencionamos antes. Tiene un contenedor alternativo a div es un elementos en línea. Esto significa que podemos volver atrás y cambiar div para ser span. Cambia la etiqueta de apertura y cierre dar que un guardar y si actualizamos, el navegador ahora vemos los corchetes y el símbolo $ en línea con el texto del precio. Es así como podríamos usar div y span elementos para contener o apuntar a una parte de nuestro código. Serán aún más útiles más adelante en el grupo juntas secciones para aplicar estilo y diseño. 8. Agregado de párrafos y texto (HTML para principiantes): Ahora es el momento de mirar añadiendo texto a nuestra página web. Técnicamente, ya tenemos textos en forma de encabezamientos, pero también se nos proporciona el elemento P para texto estándar. P significa párrafo, aunque se utiliza para cualquier cantidad de texto desde una sola letra o palabra, hasta un párrafo. Al mirar el producto a ver en la versión terminada, hay algún bloque a texto que podemos agregar como la descripción, que está justo aquí, el precio en esta línea aquí, y también el título de cada producto. Pasemos al editor de texto y comencemos a agregar esto en. Entonces vamos a cerrar esto de nuevo a la página index.html. Primero en uno crear nuevo div justo debajo de todos los artículos. Vamos a crear un nuevo div justo aquí. Asegúrate de que esto aún esté anidado dentro de este div principal. Nuevamente, este va a ser el contenedor para toda esta sección de productos. Entonces tendremos el título en la parte superior. Entonces este div va a ser el contenedor para un producto individual. Por lo que dentro de este tubo tendrá una imagen de producto, un título, la descripción, y así sucesivamente. En primer lugar podemos emprender el título, precio y descripción. Por lo que abre las etiquetas PP, en su interior podemos tener el texto de Game Controller, que es el primer producto. Diciendo justo debajo, podemos sumar un precio, digamos $79.95. Después una tercera línea con una descripción. Entonces una vez que también tengo mando de juego para Xbox, guarde eso. Dirígete al navegador y luego refresca. Y ahí están nuestras tres líneas de texto en la parte inferior. Una de las cosas que notarás aquí es que cada elemento P está en su propia línea, igual que miramos en el último video. Esto significa que se trata de un elemento de nivel de bloque, lo cual es ideal porque quieres que se apilen, como vemos aquí. Si el texto dentro de los tiempos P se hace un poco largo, también podemos agregar un salto de línea que debe permanecer en el texto sobre una nueva línea. Hacemos esto con unos elementos de ruptura. Entonces si la descripción era un poco larga, podríamos ir y agregar pr, poner un elemento de descanso. tiempo de descanso no necesita un tiempo de cierre porque no hay contenido agregado dentro, es simplemente poner lugar donde queremos que aparezca una nueva línea. Diga eso, luego refresca el navegador y ahora las palabras para Xbox, aparecen en la propia línea separada. Creo que su título de producto también de controlador de juego será mejor dentro de una etiqueta de encabezado, como un H4. Hagamos este pequeño cambio. Entonces nuevamente controlador, podemos eliminar P y en H-4, mismo para la etiqueta de cierre, Guardar, y luego refrescar. Por lo que el título no se ve muy diferente, pero hay una pequeña diferencia sutil en ello. puede ver que es un poco más audaz para. Por lo que este es un ahora para agregar texto. A continuación veremos cómo podemos agregar algo de estilo básico a nuestro texto. 9. Énfasis, importancia y formato del texto (HTML para principiantes): La mayor parte del estilo que agregamos dos sitios web se hace con CSS. No obstante, hay algunos pequeños elementos HTML disponibles que también proporcionan algún formato de texto también. Todo lo que tenemos que hacer es rodear algunas etiquetas alrededor del texto al que quieres aplicar. En primer lugar, echemos un vistazo a hacer un texto en negrita con las etiquetas p. Volver a nuestros productos. Si bajamos a la descripción, si queríamos hacer la palabra impresionante un poco más oscura o un poco más audaz. Podemos envolver esto. Primero vamos a cortar eso. Podemos crear las etiquetas p. Para que podamos ver tenemos una abertura y un cierre en la etiqueta dos. Dentro de aquí puedes pegar en nuestra palabra de impresionante otra vez. Dale ese guardado, y luego vuelve a cargar el navegador. Ahora tenemos la palabra impresionante como un color más oscuro, más audaz. A pesar de que el p-type es válido para usar, se recomienda nerds que utilicemos un etiquetas fuertes en su lugar. Entonces reemplacemos b, por la palabra fuerte. Guarda y luego actualiza. El texto no tiene el mismo aspecto, pero la etiqueta fuerte define texto importante, y por lo general también se muestra en negrita. También podemos hacer cursiva el texto también, que como pueden adivinar, son las etiquetas I. Entonces vamos a reemplazar fuerte por I, recargar. Entonces tenemos algún texto en cursiva en su lugar. Al igual que el elemento B sin embargo, el elemento I ha existido desde hace mucho tiempo. Ahora se recomienda utilizar los elementos M en su lugar, en la medida de lo posible ya que es más semántico o descriptivo. Entonces en lugar de yo, que puede ver muchas veces, ahora solemos usar M, que es caerá énfasis. Guarda eso, y refresca, y se utiliza para dar énfasis extra al texto, mientras que el elemento I es más para unos efectos metálicos visuales, en lugar de resaltar cualquier importancia extra. También tenemos la capacidad de eliminar texto con el elemento delete también. Esto representa textos que se han eliminado del documento añadiendo una línea fluidos. Entonces echemos un vistazo a cómo se usa esto para cumplir con M. Entonces sumamos en DEL, que es abreviatura de borrar. Guarda eso. Echemos un vistazo a esto. Hacia abajo impresionante tiene una línea de fluidos borrados. También podemos hacer lo contrario agregando texto al documento. Entonces si quisiéramos quitar la palabra también, igual que hemos hecho aquí y reemplazar por fantástico. Usaríamos el elemento inserto para insertar una palabra. Después de la eliminación, vamos a incluir el INS, que es abreviatura de inserción. Entre estos podemos agregar palabra fantástica, Espacio ahí, Dar ese guardar. Ahí está la palabra borrada de impresionante y la subrayada insertada Palabra de fantástico. Siguiente Quiero mirar usando un elemento de marca. Estos elementos representan texto resaltado. Este es un efecto similar, lo que vemos cuando buscamos una palabra en un sitio web. Por ejemplo, vayamos a la página web de Mozilla. Se trata de desarrollador dot mozilla.org. Acude a cualquier sección que como dentro de un cromo, ido a seleccionar comando y F para abrir la búsqueda. Entonces si buscamos una palabra como desarrolladores, así como así, podemos ver que está resaltada en amarillo en la página. Para agregar este efecto, podemos rodear el texto con elementos Marcar. Probemos esto en lugar de eliminar. Añadamos marca por ahí. También puedo deshacerme de estos textos insertados. Ya no necesitamos eso. Después vuelve a la página de índice y actualiza. Ahora como el resaltado amarillo que vimos antes, el elemento final que quiero cubrir es pequeño. Esto hace más o menos lo que suena. Hace que el tamaño de la fuente sea más pequeño. Simplemente podemos reemplazar marca por la palabra pequeña. Al igual que tenemos cuatro sobre ejemplos. Esto funcionó perfectamente bien, o podemos combinarlos ambos anidando. Entorno a esta pequeña sección aquí, podemos añadir los elementos de marca también. Justo antes de que deje agregar marca, y mi editor de texto completa automáticamente esto. Ve en su lugar queremos agregar esto al final mismo. Desde dentro tenemos la palabra impresionante, rodeando bonito, tenemos pequeño. En los alrededores pequeños tenemos marca en el muy exterior. Anidar es bastante sencillo de hacer. Sólo tenemos que tener cuidado para organizar los tipos correctamente desde el interior hacia afuera. Todos estos elementos que hemos mirado también pueden ser anidados. De hecho, ya lo hemos estropeado todos estos ejemplos hasta ahora. Dentro de estos elementos p en el muy exterior. También todos estos elementos p y anidados dentro de este div. Entonces déles lo mismo y veamos estos ambos combinados. Otro texto más pequeño y también el resaltado amarillo en el fondo también. Ahora voy a quitar estos del proyecto es que no los necesitamos. Quitemos pequeños sin marcar antes y también después del texto. Di eso y luego refresca. Ahora volvemos a la normalidad. Si bien no necesitamos estos elementos para este proyecto en particular, es importante saber eso si alguna vez los necesitas. 10. Listas de HTML (HTML para principiantes): Ahora vamos a echar un vistazo a las listas HTML. Listas como sonido, se utiliza para mostrar una lista de elementos. Al mirar estas versión terminada del proyecto aquí, haremos uso de listas en múltiples áreas. Los tenemos en una barra lateral sobre a la izquierda para mostrar una lista de categorías. También para los rangos de precios por debajo también. Además, los usamos para el menú dentro del encabezado y pie de página. Para estos enlaces en la parte superior, es posible que el menú no parezca una lista a primera vista, pero la mayoría de los menús se crean con una lista y luego cambia o se cambian para estar alineados mediante el uso de CSS. Entonces echemos un vistazo a cómo podemos usarlos creando nuestra lista de encabezados, con los tres enlaces de casa, tienda y contactanos. Volver a nuestro editor de textos. En primer lugar establecemos qué tipo de lista queremos usar. Voy a empezar con una lista desordenada, que utiliza las etiquetas UL. Entonces solo abre la parte superior, dentro de este primer div, voy a crear una lista desordenada, debajo de la tienda de tecnología. Por lo que abre las etiquetas UL, que de nuevo está abriendo y cerrando etiquetas. Las listas desordenadas son básicamente una lista con viñetas. Por lo que vemos una bala o círculo negro a la izquierda de cada elemento por defecto. Esta bala se puede cambiar o quitar también dentro de CSS y veremos cómo hacerlo más adelante. Después agregamos nuestros ítems de lista entre etiquetas LI. Añadamos nuestro primer ítem de lista, que está en casa. Entonces justo debajo de esto también podemos agregar un segundo artículo de lista y éste es para la tienda y luego el tercero en la parte inferior es para contactarnos. Por lo que ahí están nuestros tres elementos de lista y asegúrate de que los tres elementos estén anidados dentro de estas etiquetas UL. Una vez hecho eso, podemos darle un guardado a eso y luego probar esto en el navegador y ahí están nuestros tres enlaces en la parte superior. También se pueden ver las tres balas del lado izquierdo, que mencioné antes. También podemos crear una lista numerada cambiando UL para ser OL. Entonces cambiemos U para ser O. Dale a eso un guardar, recargar, y por defecto tener los números 1, 2 y 3, y así sucesivamente para cada elemento de la lista. No estamos limitados a solo números aunque al usar listas, podemos agregar un atributo de tipo para cambiar las cosas alrededor. Dentro de la etiqueta OL de apertura. Podemos agregar un tipo y establecer esto igual a varios caracteres. Entonces, en primer lugar, cambiamos esto a una minúscula a, guarde eso, refrescar, ahora tenemos letras minúsculas de a, b, y c. Si esto fuera mayúscula y minúscula a, estas tres letras ahora también serían mayúsculas. También podemos aplicar números romanos con un i minúscula. dale a eso un guardar, recargar, y tener los números romanos en minúscula en el lado izquierdo. También podemos hacer lo mismo si quisiéramos que estos números romanos fueran mayúsculas esta vez con un I. mayúscula Veamos cómo se ve esto. Ahora todos están mayúsculas. También tenemos el número uno, pero esto es un defecto, como hemos visto justo al inicio de 1, 2 y 3. Por lo que no necesitamos agregar esto en. Las listas también se pueden anidar. Por ejemplo, si quisiéramos agregar algunos artículos de lista establecidos bajo nuestro enlace de tienda, podemos agregar una nueva UL u lista ordenada dentro, así como esta. Entonces justo debajo de nuestra tienda, hecho eliminaremos primero el tipo y luego justo debajo de nuestra tienda crearemos una nueva lista desordenada, exactamente como acabamos de hacer antes. Por lo que las etiquetas de apertura y cierre. Entonces soy lista de artículos. Así que digamos elemento anidado y luego uno más, elemento anidado dos, dale a eso un save, hit refresh y ahora podemos ver nuestro nuevo mensaje de artículos anidados justo debajo de este enlace de tienda. Es así como podemos agregar lista a nuestros sitios web. A continuación, agregaremos el resto de la lista a nuestro proyecto en un pequeño reto. 11. Hora de practicar: crea listas de proyectos (HTML para principiantes): Ahora sabemos crear listas. Yo quisiera que siguieran adelante y agregaran el resto de las listas para nuestro proyecto. A modo de guía, todos necesitan estar en todas las listas. Ya tenemos los artículos de cabecera en lugar de casa, tienda y contáctanos. Basta con cambiar esto de nuevo a una lista desordenada y asegurarnos de que solo tenemos estos tres enlaces que vemos aquí, lugar del anidado que agregamos en el último video. Después tendremos dos listas más en la barra lateral al lugar bajo los encabezamientos que ya tenemos. Esta sección aquí es una lista y luego a continuación tenemos una lista de los precios también. Por último, abajo en la parte inferior, también tenemos un menú de pie de página. Esto es justo lo mismo que el que agregamos para el encabezado. Dale una oportunidad. Es una gran manera de aprender repitiendo y consiguiendo algo de práctica. Si aún no te sientes lo suficientemente confiado como para darnos una oportunidad por sí mismo, eso está completamente bien. Simplemente sígueme, y ahora lo haremos juntos. Cerremos esto y volvamos a Visual Studio. En primer lugar te hace nuestro menú de cabecera está de vuelta a una lista desordenada. Dale ese cambio. También tenemos esta lista desordenada anidada en el medio, quita eso. Después tenemos la lista que vimos antes debajo del encabezado de categoría. Primero voy a seguir adelante y añadir una línea horizontal. Podemos hacer esto con un elemento hr. Esta también es una etiqueta de autocierre, lo que significa que no se necesita ninguna etiqueta de cierre. Echando un vistazo al proyecto terminado una vez más, ve a la barra lateral, la línea horizontal es justo esta que vemos aquí, que separa el encabezado de los ítems de lista y lo mismo para el precio también. Echemos un vistazo y pasemos a la categoría, que es la etiqueta h3 aquí. Entonces podemos sumar nuestro hr. Debajo de ella, podemos empezar a construir nuestra propia lista ordenada. Dentro de aquí, primero enumeraré el ítem el cual tenemos, es todos los artículos y esto puede ser cualquier cosa que prefieras. Realmente no importa. Recuerda esto es todo solo para practicar. Entonces cámaras, luego laptops, después de laptops tenemos teléfonos, accesorios, y la final fue para otra. Dale ese guardar, ve al navegador y refresca. Nuestro menú superior ahora está de vuelta como debería ser y por debajo de categoría, tenemos nuestra línea que extiende el ancho completo de la página por ahora, pero eso no es nada de qué preocuparse. Debajo de esto tenemos nuestros artículos de lista en una lista desordenada. Entonces tenemos la segunda lista de barra lateral para los rangos de precios, que vamos a añadir solo soplar este precio rumbo aquí. Volver al editor de texto, vamos a sumar estos en debajo de este h3, el precio. Asegúrate de que esta lista desordenada de nuevo se encuentre todavía entre esta sección div. Recuerda que este es el contenedor completo para nuestra barra lateral. Todo el contenido de la barra lateral necesita ir entre las etiquetas de apertura y cierre. Empecemos de nuevo con nuestra regla horizontal y luego nuestra lista desordenada. Dentro de aquí, voy a enumerar artículos, se puede agregar el precio, digamos 1-9, el segundo rango de precios fue de 10-29, luego seguir adelante 30-59, digamos 60-99, y el muy inferior puede ser de 100 más. Después ahorra, recarga, y luego tenemos nuestra segunda lista desordenada por debajo del precio. Eso se ve bien ahora. Por último tenemos el menú de pie de página. En primer lugar necesitamos crear una sección div de pie de página para agregar estos dentro. Recuerda que tenemos la sección div para nuestro encabezado. Tenemos la sección div aquí para nuestra barra lateral y luego abajo en la parte inferior, tenemos esta sección div para nuestro contenido principal, que incluye los productos. Justo después de esta sección y también todavía entre las etiquetas de cuerpo, vamos a añadir un nuevo div y esto es para la sección de fotos. Todo lo que tenemos que hacer es simplemente agregar una nueva lista desordenada con una nueva lista de elementos. Esto es exactamente lo mismo que la sección de encabezado. Entonces tenemos casa, tenemos tienda y luego finalmente tenemos contactarnos. Con eso en su lugar, dale a eso un ahorro. Para ver esto en el navegador, vamos a refrescar. Ahora vemos esto abajo en la parte inferior. Tendré estas listas en su lugar. Siguiente para pasar a echar un vistazo a la adición de imágenes. 12. Trabajo con imágenes (HTML para principiantes): Hemos estado trabajando mayormente con elementos basados en texto hasta ahora. Ahora es el momento de agregar algunas imágenes a nuestra página web. He proporcionado las mismas imágenes que estoy usando como descarga gratuita para uso o puedes por supuesto descargar las tuyas si lo prefieres. Y tengo estas carpetas de imágenes en el escritorio, que voy a arrastrar a la carpeta del proyecto. Simplemente contiene seis imágenes que vamos a estar usando para el proyecto. Entonces todo lo que voy a hacer es abrir el proyecto textil. Dentro de ahí voy a arrastrar en esta carpeta de imágenes. Por lo que todo el deseo de tener ahora es el index.HTML junto a la carpeta de imágenes. En primer lugar, necesitamos pasar a la página de índice y agregar los elementos de imagen. Esto no tiene contenido dentro, por lo que no tiene etiqueta de cierre. Entonces hagámoslo dentro de nuestro productivo, que está justo aquí. Entonces vayamos adentro ahí, justo por encima del título de controlador de juego. Añadamos la imagen sin la etiqueta de cierre. Dentro de aquí podemos agregar un atributo fuente para especificar la ubicación de la imagen. Hay algunas formas en las que se puede hacer esto. En primer lugar, quiero mirar incluyendo imágenes de otros sitios web. Entonces si pasamos al navegador web y luego vamos a Google, si buscas Wikimedia Commons. Vamos a este enlace superior aquí. El sitio web de Wikimedia Commons suele tener una imagen del día. Por lo que también te ves un poco diferente a esto. Todo lo que tenemos que hacer si vamos a hacer clic derecho y vamos a copiar dirección de imagen y luego vamos a nuestra fuente y pegamos esto entre las citas. Justo así. Dale a eso un ahorro. Si volvemos a nuestra página de índice en el navegador, toca refrescar, ahora tenemos una imagen dentro de esta sección de productos. Por lo que aunque esto funciona perfectamente bien, generalmente no se recomienda enlazar a imágenes en otros sitios web. En primer lugar, la ubicación de la imagen no está bajo su control. Por lo que el propietario del sitio web podría moverlo o eliminarlo. Además, este método, que se conoce como hot linking, solo debe hacerse si tengo permiso para hacerlo del propietario del sitio web. Una mejor manera de hacerlo es usar nuestras propias imágenes. Entonces, por tanto, estamos en control de la ubicación. Ya hemos agregado estas imágenes a nuestra carpeta de proyectos, dentro de esta carpeta de imágenes también. Entonces en cambio, si volvemos a la salsa y luego quitamos las longitudes añadidas en. Dentro de aquí especificamos una ruta de archivo. Entonces estamos dentro de la página de índice ahora, por lo que necesitamos ir dentro de la carpeta de imágenes. Por lo que es imágenes barra hacia delante. Dentro de la carpeta de imágenes, especificamos el nombre de la imagen que desea agregar. Entonces porque estamos creando un producto para un controlador de juego, y vamos a agregar la imagen, que es controlador con extensión the.jpg. Por lo que esto necesita ser exactamente el mismo que el nombre dentro de aquí. De lo contrario no funcionará. El. jpg otro extremo es un tipo de archivo, y esto también es importante. Si estás usando tus propias imágenes con diferente tipo de archivo, como as.png, necesitarás cambiar esto para reflejar esto. También ver archivos alpha jpg a los que se guarda como JPEG al igual que eso. Así que asegúrate de que eso se guarde. Después ve al navegador. Ahí está la imagen de nuestro mando Xbox. El elemento de imagen también tiene algunos otros atributos que podemos usar también. Un atributo importante es alt. Así que atrás. Al final, también podemos añadir la etiqueta alt. Dentro de aquí, podemos establecer algunos textos. Esto es importante porque podemos definir una alternativa de texto a usar si la imagen no se puede cargar por alguna razón en particular o para personas con discapacidad visual usando software de lector de pantalla para ver tu página. Entonces en lugar de la imagen, si hay un problema con el tipo en el texto de imagen del controlador de juego, justo como ejemplo. También podemos establecer el ancho y la altura de la imagen también. Por lo que fuera de las cotizaciones. Establezcamos la altura. Entonces las alturas, pongamos esto en 300 y también el ancho igual a 300 también. Por lo que sólo fijará uno de estos recintos, como el ancho o la altura. La imagen se escalará proporcionalmente, manteniendo la relación de tamaño y ancho la misma que es actualmente y tanto el ancho como la altura, puede hacer que la imagen se vea un poco fuera de proporción. Entonces guardar y refrescar. Entonces ahora vemos que son 300 píxeles por 300 píxeles, lo que hace que la imagen se vea un poco aplastada. Entonces en cambio, solo voy a dejar el ancho en su lugar, quitar la altura. Si actualizamos la imagen ahora se mantiene en proporción. Entonces así es como podemos agregar imágenes. A continuación, veremos cómo agregar hipervínculos a todos los proyectos. 13. Enlaces (HTML para principiantes): Al principio del curso cuando estamos viendo HTML y los problemas que resuelve. Mencionamos, el hipertexto es el texto que se muestra en una computadora que enlaza con otros textos o documentos. Estos enlaces se denominan hipervínculos. Ya tenemos nuestros elementos de menú, al igual que el ejemplo aquí. Pero necesitamos una forma de cambiarlos a los enlaces a otras páginas. Para ello, tenemos un elemento que significa ancla. Podemos usarlo para enlazar a otras páginas, diferentes ubicaciones en una misma página, o incluso otros sitios web también. Pongámonos a trabajar agregando enlaces a nuestros elementos de menú. Pasemos a la página del índice, y pasemos a nuestro encabezado, arriba en la parte superior. Estos tres enlaces aquí, primeros enlaces agrega el a elemento alrededor de lo que queremos enlazar. En nuestro caso, queremos vincular el texto aquí. Yo sólo voy a cortar esto y luego abrir el a elemento que se está abriendo y cerrando. En el medio aquí podemos pegar en nuestro enlace de inicio una vez más. Esto significa que nuestro texto va a ser clicable. Después agregamos la ubicación a la que queremos enlazar, agregando el atributo href, que significa referencia de hipervínculo. Dentro de la apertura una etiqueta, href, apenas H-R-E-F. Entonces dentro de esta href, podemos añadir un enlace. Vamos a enlazar a un sitio web aleatorio, digamos el sitio web de Mozilla que visitamos antes, así que http://developer.mozilla.org, y guarde eso, pasando al navegador, refrescar. Después vuelve a subir a la parte superior de la página. Podemos ver al instante que hay un cambio con el home link. Si pasamos por encima de él, ahora vemos un cursor diferente. También es un color diferente con el subrayado, que demuestra que es un enlace. Demos click en esto y veamos qué pasa. Entonces enlazamos a este sitio web developer.mozilla.org, eso está funcionando bien. Golpeamos el botón Atrás fueron llevados de nuevo a nuestra página de índice. Este es un enlace externo porque nos estamos vinculando lejos de nuestra propia página web. También podemos crear un enlace interno para enlazar a otra página de nuestro proyecto también. Vamos a crear algunas páginas web más a las que enlazar. Volver al proyecto. Pasemos a nuestro mosaico de texto, asegúrate de no estar haciendo clic en la carpeta de imágenes. Daremos clic fuera de esto y luego pincharemos en nuevo archivo. Asegúrate de que este nuevo archivo esté fuera de la carpeta de imágenes y al lado de este index.html. Entonces vamos a guardar este contacto con la extensión HTML de punto, al igual que la página de índice. Entonces solo agreguemos un texto sencillo de la página de contacto, guarde eso. Entonces hagamos uno más también, nuevo archivo. Entonces llamemos a esto el producto-detalle. De nuevo con una extensión HTML de punto. Simplemente agrega algo de texto o página de detalles del producto. Esta será la página que enlazará a, o haga clic en uno de los productos individuales para obtener algo más de información sobre ese producto individual. Ahora tendremos nuestras nuevas páginas, volvamos al index.html. En lugar de este enlace externo, podemos eliminar esto. Vamos a crear un enlace interno para enlazar a estas dos nuevas páginas que creaste. El primero que quiero hacer es enlazar a la página index.html. Debido a que este es el enlace de inicio, queremos que esto vuelva a enlazar a esta página de índice. Se le da a eso un guardado y luego hacemos click en esto. podemos ver nada cambia porque sigue siendo enlace a esta página de índice, y por supuesto seguimos tomando esta página de índice. Ahora por la tienda. Si recortamos los textos de la tienda buscando como el enlace con la etiqueta a, y pegamos esto en el medio. Todavía no tenemos página de tienda, por lo que podemos dejar un atributo href vacío. Esto significa que seguirá siendo el mismo estilo que el resto de los enlaces. Pero simplemente no se vinculará a ninguna parte cuando hacemos clic en él. Entonces la página de contacto con nosotros, que es una de las páginas que acabamos de crear. Abramos las etiquetas a. Pegar contáctanos dentro del medio, el atributo href. Esta vez es contact.html. Guarde eso, al igual que cuando se trabaja con imágenes, esta ruta de archivo es relativa. Esto significa que es relativo a la ubicación actual. Actualmente estamos en la página index.html. El contacto y la página de detalles del producto está junto a esta página en la estructura de carpetas. Por lo tanto, sólo podemos añadir el nombre del archivo. Si tiene uno de estos archivos dentro de una carpeta, también necesitaría agregar el nombre de la carpeta justo antes, así. Pero no lo hacemos, así que podemos simplemente dejarlo como contact.html. Puedes darle un ahorro a eso y vamos a probar esto. Refresca, podríamos probar la tienda y no tenemos un enlace a ningún lado así que esto solo se queda en la página actual. Tenemos un enlace a la página de contacto, por lo que una vez que hacemos click en esto, luego se llevará a esta página de contacto con nosotros. También podemos ver arriba en la parte superior, actualmente estamos en el contact.html. Si hacemos clic en el botón Atrás del navegador entonces nos llevan de vuelta a esta página de índice. Otro tipo de enlace que podemos utilizar es un enlace a diferentes partes en una misma página. Para ello, necesitamos agregar algo más de contenido temporal a esta página. Podemos dar click en un enlace y desplazarnos hacia abajo hasta la parte que queramos. Voy a copiar la imagen y pegarla abajo, para crear un poco más de contenido. Busquemos las imágenes que agregamos antes. Esto, vamos a copiarlo y todo lo que vamos a hacer es seguir copiando y pegando esto. Simplemente danos un contenido más en la página y dale a eso un ahorro. Entonces si actualizamos el navegador, ahora tenemos algún contenido al que podemos desplazarnos hacia abajo. Esto nos permitirá hacer click en un enlace y luego la página se desplazará hacia abajo hasta la sección de la misma página. Esto es posible agregando un ID, lo que vamos a agregar un ID a uno de estos productos. Al principio un ID es solo un atributo como hemos visto antes. Llamemos a esto un ID de enlace. Después podemos desplazarnos hacia abajo hasta la sección cuando hacemos clic en el botón de inicio. Vamos a reemplazar el href aquí de índice o html por el valor de un hashtag y luego enlazar. El hash se utiliza para trabajar con ID y lo veremos mucho más adelante en el curso o trabajando con CSS y JavaScript. Ahora dale a eso un guardar luego refresca y ahora si pulsa en casa, ves la página ahora salta hacia abajo al primer producto de aquí, que es al que le agregamos el ID. Además, puede enlazar a otras páginas cuando un usuario hace clic en una de estas imágenes. En primer lugar, reinstemos el sitio web a cómo fue. Quitemos este enlace aquí y volvamos a index.html. Si nos desplazamos hacia abajo, eso debería eliminar este atributo ID. Entonces también podemos eliminar todas las imágenes extra que agregamos para darnos la altura extra. Elimina todas estas imágenes extra, dejando solo la primera que teníamos originalmente. Ahora podemos llegar a trabajar en la vinculación cuando un usuario hace clic en esta imagen. Para ello, podemos vincular las imágenes del producto a este nuevo archivo product-detail.html que creamos. Todo lo que necesitamos hacer es rodear esta imagen con las etiquetas a. Vamos a abrir las etiquetas a. Entonces dentro pegamos en el contenido como la imagen que desea enlazar. Después dentro del lado de apertura, agregamos los familiares atributos href, que se va a enlazar con product-detail.html. Product-detail.html y dar ese guardar. También podemos eliminar este atributo width también, vamos a dimensionar esto más adelante usando CSS. Quítale eso y dale un ahorro. Ahora hacia el navegador, podemos recargar y ahora podemos ver cuando pasamos el cursor por encima de la imagen, el cursor cambia para mostrar esto es un enlace, y dar click en esto, y luego estamos tomando en la página de detalles del producto que creaste aquí. Es así como podemos agregar enlaces a nuestra página web. Lo último que quiero hacer antes de terminar es copiar estos tres enlaces de la sección de cabecera. Recuerda que estos son los mismos enlaces que están abajo en el pie de página. Basta con copiar estos, y luego podemos reemplazar estos tres elementos de lista en el pie de página por los que son enlaces. Dale a eso un guardar, refrescar, hecho necesitamos volver al index.html. Entonces hasta abajo podemos ver la sección de pie de página ahora tiene tres enlaces también. Es así como podemos utilizar enlaces dentro de nuestras páginas web. Son otras partes realmente útiles e importantes de la construcción de sitios web, como puedes ver. Los usaremos mucho a medida que avancemos a lo largo de este curso. 14. Hora de practicar: enlace a páginas (HTML para principiantes): Ahora, es el momento de conseguir algo más de práctica por tu cuenta. Si te sientes cómodo haciéndolo. Esta vez con enlaces. Si vas al navegador, tenemos esta imagen del producto, enlazando a la página de detalles del producto, que creamos. Lo que me gustaría que hicieran en este video también es convertir el título del producto del controlador de juego en un enlace también, que vincula la misma página de detalles del producto. Además, si nos fijamos en la versión de acabado, me gustaría que siguieran adelante y crearan los enlaces Más Info y Agregar al Carrito. Recuerda, solo tenemos este solo producto hasta el momento, lo que solo empezar esto bajo el único producto está bien. Todo lo que necesitas hacer es agregar estos dos enlaces usando el elemento A que descubriste con algún texto entre la etiqueta de apertura y cierre. A pesar de que estos textos parecen botones, todo es solo un caso de agregar algo de CSS, que haremos más adelante. Todo lo que espero es un texto sencillo que es un enlace cuando se hace clic en. El botón Más Info también puede enlazar a la misma página de detalles del producto, igual que hicimos para la imagen y también el título. No obstante, puedes dejar un atributo href vacío para este botón Agregar al carrito ya que no tenemos páginas a las que enlazar por el momento. Adelante y dale una oportunidad a esto o si todavía un poco inseguro, voy a seguir adelante y hacer esto ahora. Volvamos a Visual Studio Code y empecemos con el título del producto. Localicemos nuestro producto, que está justo aquí en los todos los artículos. Empecemos con el título del producto de controlador de juego. Copiemos y copiemos a nuestro lugar y luego podremos añadir nuestras etiquetas de anclaje. Entonces en medio de abrir, cerrar etiqueta, podemos pegar en un título de controlador de juego, luego seguir adelante y agregar los atributos href dentro la etiqueta de apertura y esto va a enlazar a la página product-detail.html. A continuación, podemos agregar los dos enlaces para Más Info y Agregar al Carrito y voy a hacer esto justo después de la descripción aquí. Hagamos algo de espacio y al principio Una etiqueta y esto va a ser con los textos de More Info. Esto también está enlazando a la misma página de detalles del producto, por lo que también podemos agregar el atributo href. Nuestro product-detail.html. Entonces nuestro segundo enlace justo debajo y esto es para Agregar al carrito. También podemos agregar los atributos href, pero como mencioné antes, esto solo va a ser una cadena vacía por ahora ya que no tenemos ninguna página HTML volteando a. Voy a dar eso Guardar del navegador. En primer lugar, vamos a hacer clic en el controlador del juego y nos lleva a la página de detalles del producto. Desplázalo hacia abajo, tenemos More Info, que también nos lleva a la misma página de detalles del producto y Añadir al carrito, que aún nos mantiene en la página index.html. Eso es ahora para el reto, espero que lo hayas manejado y te veré a continuación, donde echaremos un vistazo a los elementos semánticos. 15. ¿Qué son los elementos semánticos? (HTML para principiantes): Ahora quiero dar un paso rápido atrás de agregar a este sitio web y tomar un momento para mirar lo que llamamos elementos semánticos. Los elementos semánticos son simplemente elementos que describen claramente su contenido, no solo para decirle al navegador de internet sino también otros desarrolladores que también miran tu código. Este es un diagrama de un sitio web típico. El cuerpo contiene todos los contenidos que vemos en la pantalla, como ya sabemos. Aquí, vemos algunas secciones típicas de un sitio web. Cada sección tiene un div elementos. Un div es una sección o división utilizada para agrupar contenido. Ya lo hemos hecho en nuestro proyecto agrupando la sección de encabezado, la barra lateral, y cada producto. Es así como se han hecho las cosas en el diseño web desde hace bastante tiempo y todavía lo están. Los elementos Div están perfectamente bien de usar. De hecho, los usaremos durante este curso bastante. A menudo verás un atributo Id agregado a cada uno de estos divs. Esto permite seleccionar un div determinado, queremos aplicar estilo o diseño para usar el CSS. Aquí también agregamos algunos elementos div más, esta vez anidados dentro de los existentes. Nuevamente, esto está bien y muy común. Ya lo hemos hecho en el proyecto al tener un div parent circundante para todo el contenido principal, luego anidar en un div dentro de cada producto dentro de este div principal. Desde HTML versión cinco, ahora tenemos algunos elementos alternativos que podemos usar igual que puedes ver aquí. En lugar de usar un div genérico, ahora podemos usar un elemento semántico o más descriptivo. Tanto el div como todos estos nuevos elementos que vemos aquí, aún tienen una etiqueta de apertura y cierre para rodear el contenido también. Contamos con elementos de cabecera los cuales podemos agregar a nuestro proyecto en lugar del div que rodea nuestro título del sitio y menú de navegación. También hay principal, que contiene el contenido principal de la página web. Esto no es para ser utilizado para ningún contenido que se repita en otras páginas, como las barras laterales. Por ejemplo, los elementos laterales que vemos a la derecha a menudo se utilizan para barras laterales y generalmente se repiten en todo el sitio web. Por lo tanto, lo mejor es mantenerse separado del contenido principal. También tenemos un pie de página lateral, por lo que podemos hacer uso de todos estos nuevos elementos aquí dentro de nuestro proyecto. Este es el ejemplo que hemos visto antes, bueno esta vez con los elementos más nuevos, más semánticos. Aquí puedes ver un elemento de artículo el cual es ideal para usos como un post de blog o un widget que tiene contenido autónomo. También hay un elemento de sección debajo de dos. Esto tal como suena, define una sección de nuestros documentos web. Esto es para agrupar contenidos relacionados. Ahora también contamos con el elemento nav, que puedes utilizar para rodear nuestros enlaces de navegación. No necesitamos agregarlos a todas las áreas de navegación de nuestro sitio. Sólo está pensado para ser utilizado para bloques principales o enlaces de navegación. Tenga en cuenta que hemos colocado esto dentro del encabezado para este ejemplo. No obstante, esto no es necesario. Se puede colocar dentro o fuera de la cabecera o incluso anidar dentro sobre las áreas dos. También podemos llevar las cosas aún más allá reutilizando elementos como el encabezado o pie de página para definir la sección de encabezado o pie de página de un artículo, por ejemplo o incluso reproducir secciones dentro de otros elementos, como la barra lateral. Recuerda aunque esta es solo una forma común de usar estos. No estás obligado a usar de ninguna manera en particular. Su uso también diferirá dependiendo del estilo de sitio web que estés construyendo. Ahora sabemos lo que está disponible para nosotros. Ahora podemos pasar y estos a nuestro proyecto. 16. Cómo agregar elementos semánticos en nuestro proyecto (HTML para principiantes): Todos acabamos de aprender sobre los elementos HTML semánticos. Ahora podemos aplicar estos a nuestro proyecto. Tal como es, esto no cambiará la apariencia dentro del navegador, sino que en su lugar agregará alguna estructura significativa a nuestra página web, lo cual es genial para el navegador y sobre desarrollador también. En la página index.html. Comencemos desde la parte superior agregando los elementos de encabezado en lugar de este div circundante. Etiqueta de apertura acaba de poner el texto de H1, se puede reemplazar con encabezado. Entonces en la parte inferior de esta sección, justo debajo de la lista desordenada, podemos entonces cerrar esta sección de encabezado 2. Ahora, un navegador web o desarrollador puede ver claramente que esta es la sección pesada, en lugar de solo un contenedor div genérico. Si guardáramos eso y luego recargaríamos, no vemos ninguna diferencia dentro del navegador. Lo mismo vale para la barra lateral. Podemos reemplazar el elemento div por los elementos a un lado, que vimos antes. Desplázate hacia abajo debajo del encabezado, arriba de la compra de tienda, podemos reemplazar este div por un lado, y luego hacia abajo en la parte inferior, debajo de la lista desordenada para los precios cambia también con un lado. Dentro de esta sección a un lado, también tenemos dos secciones al lado del lado. Uno para esta lista de categorías, que es esta sección justo aquí y luego una sección para los precios. Voy a separar estos rodeando a cada uno con elementos de sección. Justo debajo tienda por vamos a añadir una sección elementos. Entonces vamos a copiar el rubro nivel tres de categoría. De hecho recortemos esto. Todo el camino hasta el fondo de la lista desordenada. Comando o Control X para cortar esto y luego pegamos esto dentro de esta sección. Esta es nuestra primera sección aquí para las categorías. Entonces debajo de esto, sumemos una segunda sección, que va a ser para los precios. Nuevamente, podemos copiar el rumbo Nivel 3 hasta el final de los precios de nuestra lista, Command o Control x para recortar esto. Ahora pega esto dentro de la sección. Ahora tenemos nuestras dos secciones dentro de la barra lateral. Dale ese guardado, y comprueba si todo está bien en el navegador. No vemos diferencia, así que eso se ve todo bien. Estas secciones que acabamos de crear típicamente contienen un encabezado. Ya tenemos estos h tres rubros en su lugar aquí. Por lo que podría ser por este moviéndose hacia abajo fuera de la barra lateral. Entonces vamos a ir abajo divulgar y a un lado sección. Los productos serán la sección principal corrida de nuestro último video. También tenemos estos elementos principales que podemos sumar. Esto reemplazará a estos elementos div circundantes que van alrededor del único producto que ya tenemos. Por lo que el interior abierto de div vienen reemplazado por principal. Después abajo en la parte inferior, cierra la sección principal apagado. En la parte inferior de la página, también podemos hacer uso del elemento de pie de página 2. Esta es la última sección y página div que es el pie de página. Simplemente cambiemos esto para que sean los nuevos elementos de pie de página HTML-5, y démosle un guardado y otra vez a la recarga del navegador. No vemos ninguna diferencia, pero ahora tenemos las etiquetas semánticas en su lugar. También dijimos en el último video, ahora hay un elemento nav. Esto se utiliza para representar las principales áreas de navegación. Nuestro menú de encabezado y pie de página enlaza con otras páginas de nuestro sitio web. Este podría ser un buen caso de uso para los elementos de navegación. En primer lugar, agreguemos esto alrededor del área del pie de página. Justo después de la etiqueta de apertura de pie de página, puedes agregar nuestro nav de apertura y etiqueta de cierre. Recortemos un poco esto, y luego peguemos en el nav de cierre. Asegúrate de que el tuyo se vea así. Contamos con el área de pie de página. Siguiente dentro, tenemos el nav, y luego tenemos nuestra lista desordenada con nuestros enlaces gratuitos. Entonces también podemos repetir esto para la sección de cabecera 2 de la parte superior. Justo después de la tienda de tecnología, podemos abrir el nav. Entonces podemos cortar la etiqueta de cierre, que se ha agregado automáticamente en faros a esto bajo la lista desordenada. También podemos ajustar esto un poco para que sea más legible. Guarda y solo refresca y comprueba esto está todo bien, que todo parece ser todavía tenemos nuestros enlaces en su lugar y nada se ve diferente, pero ahora tenemos elementos más descriptivos o semánticos. Ahora, estructura en nuestra página web. 17. Hora de practicar: cómo añadir más productos (HTML para principiantes): Ya hemos cubierto muchos de los conceptos básicos del HTML, me gustaría que ahora sigas adelante y obtuvieras algo de práctica por tu cuenta agregando algunos productos más. Por supuesto, los productos extra se verán exactamente como este que tenemos aquí sin ninguno del estilo CSS todavía, pero lo importante, es conseguir el contenido en la pantalla. Si pasamos a la versión terminada aquí, se pueden ver seis productos diferentes. Esto es lo que me gustaría que siguieran adelante y hicieran. Puedes agregar aún más si quieres. No tiene que ser seis, pero he proporcionado seis imágenes en total las cuales puedes usar. Ya tenemos este primer elemento del controlador de juego, por lo que puedes basar el resto de éste y simplemente cambiar la imagen y también el texto del encabezado y también la descripción. Asegúrate de que cada producto también tenga un GIF circundante también, al igual que el que ya tenemos. Podrías, por supuesto, copiar y pegar en este existente que ya tenemos. Podrías copiar la sección div completa y pegar en otras cinco veces. Pero si eres nuevo en HTML, te recomendaría al menos tratar de teclear algunos, para darte un poco más de práctica. Te sugeriría que pausas el video en la versión terminada para ver todas las imágenes y texto. No te preocupes por estropear las cosas. Voy a estar repasando esto en el próximo video. 18. Solución: cómo añadir más productos (HTML para principiantes): Espero que hayas logrado completar el resto del producto y conseguir algo más de práctica, añade un HTML a tu página web. Rápidamente voy a correr y agregar estos cinco productos extra en mi proyecto. Volver al índice o HTML. Desplázate hacia abajo hasta nuestro producto dentro de la sección principal. Esta sección div aquí es la que contiene toda la información del producto. Solo voy a copiar esto y pegar esto en justo debajo. En realidad voy a eliminar este enlace al detalle del producto y solo dejar esto en la primera forma. Quitemos eso y alineemos todos estos. El primero fue el controlador del producto. El segundo va a ser para los audífonos. El de las imágenes fue auriculares punto jpg. El alt fue la imagen de los audífonos. Entonces el texto de los auriculares blancos, y el precio podemos agregar cualquier precio que quieras, digamos 54.95 por eso. Llamaremos a estos audífonos blancos impresionantes. Ahí hay break tag solo para agregar estos en dos líneas diferentes. Agregar al carrito y más info puede quedar también, pero eliminemos el enlace a estos dos. No tienes que hacer eso, pero yo sólo voy a quitar esto para el mío. Entonces podemos copiar esto de nuevo y pegarlo, asegurarnos de que esto esté todo alineado. El tercer elemento fue para la cámara, que fue cámara dot jpg. La descripción de la imagen de la cámara era para la cámara Canon. También eliminemos este enlace aquí, hecho esto también en los auriculares, para que la imagen con el texto alternativo, el título, el precio, vaya a ser un poco más. Digamos que 649.95. El descripción, impresionante cámara de Canon. Copia y peguemos esto de nuevo. Después de la cámara estaba el micrófono. Micrófono punto jpg, el texto antiguo, un título dentro de eso, este es un micrófono Yeti. El precio, 119.95 por eso. Inscripción, digamos impresionante micrófono azul Yeti. Debajo de esto, sólo la línea está arriba y son lo mismo. Estos son nuestros cables. En lugar de cámara esto va a ser cables. Cables imagen. El título. Precio, 10.95 y ahorre por cables. Descripción, cables impresionantes disponibles en diferentes longitudes. Aquí puedes agregar cualquier cosa que prefieras, realmente no importa. Todo el punto es solo conseguir algo más de práctica de escribir código HTML. Entonces después de los cables, tenemos nuestro último que es para las lentes. Digamos lentes de cámara 99.95 y digamos lentes de cámara impresionantes. Uno, dos, tres, cuatro, cinco, seis ahí están nuestros seis productos ahora en la página del índice. Dale ese guardar y luego refresca. Desde arriba tenemos nuestro primer producto, nuestros auriculares, la cámara, cables de micrófono, y también las lentes. Espero que logres completar esto, si no, no te preocupes, habrás tenido alguna práctica más valiosa de todas formas. Te veré ahora en el siguiente video donde echaremos un vistazo a los comentarios HTML. 19. Comentarios de HTML (HTML para principiantes): Yo solo quiero tomarme un momento rápido, echar un vistazo a usar comentarios HTML. Este sólo va a ser un video corto para comentarios y realmente importante para conocer y usar. Un comentario es básicamente un área donde podemos escribir algunos comentarios o notas tanto para nosotros mismos, otros desarrolladores que puedas leer en código. Esto se vuelve más importante en proyectos de mayor envergadura. Podemos entender mejor lo que está pasando dentro de nuestro código o trotar nuestra memoria si regresamos unos meses o incluso años después. A otros comentarios, necesitamos incluir la siguiente sintaxis en nuestro archivo HTML. Digamos arriba de esta sección principal, abrimos los corchetes angulares, igual que un elemento HTML, luego agregamos un signo de exclamación y luego dos guiones y ya puedes ver que toda esta sección después se cambia de color. Después cerramos esto agregando dos guiones más y cerramos los corchetes. Dentro de aquí podemos agregar nuestro texto para hacer un comentario, digamos sección principal para mostrar productos. Entonces podemos ahorrar eso. Ahora si refrescamos el navegador, y si vamos a la sección principal, que es esta sección de “Todos los elementos” aquí, vemos que el texto no se renderiza en la pantalla, como el resto del HTML. También los comentarios pueden ser sobre múltiples líneas a. Entonces en lugar de tener todo esto en una línea, podemos hacer algo como; vayamos a la cima aquí, o empecemos con el cuerpo. Podemos abrir nuestros comentarios y cerrar esto igual. Podemos quizá hacer una lista temporal para hacer. Digamos número uno, cree la página shop.HTML. Número dos, agrega estilo CSS. Podemos seguir por múltiples líneas. Nuevamente, al guardar y refrescar, podemos ver que estos comentarios no están en la parte superior de la página. Los comentarios también son útiles para eliminar líneas de código 2. Por ejemplo, si quisieras cambiar una imagen de producto, así que si bajamos al primer producto, que es este controlador de juego aquí, solo podríamos agregar unos comentarios como este, justo antes de los elementos de imagen. Lo mismo que antes. Abre el corchete, agrega exclamación y dos guiones y puedes ver al instante que no cerramos esto, que todo el código restante después se comenta. Así que solo da un guardar y refrescar, y luego podremos ver cualquier cosa después de que la imagen haya sido eliminada de nuestra página web. Pero sólo queremos comentar esta imagen. Vamos a cerrar esto justo después de los elementos de la imagen. Ahorra y luego baje. Por lo que todo nuestro contenido se agrega empaque, excepto esta imagen para el controlador del juego. Simplemente voy a deshacer estos cambios y añade la imagen de nuevo. Guardamos y refrescamos y ahí está nuestra imagen de nuevo en su lugar. Esta sintaxis que utilizamos aquí de los corchetes angulares, el signo de exclamación, y también los dos guiones sólo se utiliza cuando se comentan en nuestro código HTML o cuando se usan archivos HTML. Sobre los lenguajes, usa una sintaxis diferente, pero funciona exactamente de la misma manera. Veremos cómo funcionan los comentarios para sobre idiomas más adelante. Pero por ahora, pasemos a ver las entidades y símbolos HTML. 20. Entidades y símbolos (HTML para principiantes): Quiero mostrarles una manera de agregar algunos símbolos visuales de buen aspecto a nuestros sitios web y cómo mostrar ciertos caracteres reservados usando entidades HTML. Antes de ver las entidades HTML, echemos un vistazo a por qué son necesarias agregando a una de las descripciones de los productos. Por ejemplo, si bajamos a, digamos la cámara, y vamos a la descripción. De hecho, bajaremos a las lentes por la parte inferior. Dentro de las descripciones, si quisieras extender esto y tal vez agregar alguna información adicional dentro de los corchetes. Digamos que para los modelos Canon menos de 2017. De inmediato se puede ver que el editor de texto se cambia el color del símbolo menos que aquí, indicó que hay un problema. Esto se debe a que el mayor y menor que los símbolos, una clase tiene caracteres reservados en HTML. Estos particulares están reservados porque un navegador podría confundirlos con estas etiquetas HTML de apertura y cierre, que tenemos aquí. Esto puede ser reemplazado por una entidad HTML. Todas las entidades HTML comienzan con un ampersands y terminan con el punto y coma con un cierto código en el medio. Se ve así. Si eliminamos el símbolo menos que, podemos agregar el símbolo ampersand, que es este personaje aquí. Menos que usa el LT, y luego un punto y coma al final. Ahora como cambias de rojo para ser del mismo color que el resto de los elementos. Todo esto debería estar funcionando bien. Guarda eso, recarga y si bajamos a la imagen, abajo a la parte inferior de las lentes de la cámara y como nuestra descripción. El Canon modela menos de 2017, por lo que símbolo ahora se muestra en el navegador. Echemos un vistazo a una pareja más sólo para demostración. Mayor que, usa el gt, refresca, puedes ver los corchetes angulares ahora apunta a la derecha. Si quisieras mostrar este ampersand, que tenemos aquí, este es AMP, que es show of ampersand, recarga y hay símbolo justo eso. Otra entidad que podríamos utilizar es para la cotización. En su lugar amp, podríamos usar QUOT, que se muestra la cotización, guardar y luego volver a cargar. Ahora ten la cotización de tupla en su lugar ahí. También hay muchas más entidades que puedes encontrar con una rápida búsqueda en Google si te interesa más. Las entidades también son útiles para mostrar símbolos que no están en un teclado estándar. Echemos un vistazo a algunos de estos, empezando por el símbolo del copyright. El símbolo de los derechos de autor es simplemente copia. Hace que tengas el ampersand y el punto y coma al final también. Hay símbolo de derechos de autor justo ahí, vamos a desplazarse. Sólo para ver esto un poco mejor. Echemos un vistazo a una marca registrada que es reg. Refresca, y ahora tener la R en el círculo y también pequeña como una moneda. Echemos un vistazo al yen. Guarda esa y vuelve a cargar. Ahora ten un símbolo de yen que no está en mi teclado. Es así como podemos usar estos y por supuesto puedes Google esto y encontrar mucho más que puedas usar. Hay cientos de diferentes, así que solo busca cualquier en particular que pueda necesitar agregar. Simplemente voy a quitar esta sección extra que agregamos y decimos esto, así como encontrar más de éstas en línea con una búsqueda en Google. Hay un sitio web con [inaudible] llamado unicode table.com. Si tuviéramos todo el día de hoy, encontrarás una enorme gama de símbolos que puedes utilizar en tu proyecto. Ahí están los más populares en la parte superior o puedes desplazarte por un enorme conjunto de iconos a continuación. Hagamos una búsqueda usando la barra de búsqueda en la parte superior. Busquemos juego. De hecho, buscamos videojuego y luego pinchamos en buscar. Ahora tenemos un símbolo de controlador de videojuegos. Si hacemos click en esto, vemos que tenemos dos números diferentes, tenemos un número unicode y también código HTML. Este código HTML comienza con el ampersand, igual que usamos antes, y termina en punto y coma. Vamos a usar el código HTML, así que vamos a copiar este código que nos dan. Vuelve al proyecto y luego vamos a desplazarnos hasta los productos del controlador del juego. Aquí está el título justo aquí. Después peguemos esto en y otra vez a nuestro proyecto y recarguemos. Desplácese de nuevo hasta el controlador de juego y ahí vamos. Ahí hay un poco de imagen la cual se agrega. Está subrayado porque sigue dentro del enlace. Recortemos esto y peguemos esto fuera de esta etiqueta “a”, así que así así y luego recarguemos. Ahora no vemos el subrayado para el enlace. Ahora tenemos un icono de controlador de aspecto bonito al lado del título del producto y como puedes ver por la tabla unicode, con literalmente cientos y miles de modos diferentes que podemos usar en nuestros proyectos. Seguro que encontrarás muchos usos buenos para estos a medida que avanzas. 21. Hora de practicar: página de detalle del producto (HTML para principiantes): Ahora es una gran oportunidad para seguir adelante y construir tu propia página HTML. Ya hemos creado el detalle del producto a nuestra página HTML justo aquí, pero todavía no hemos agregado ningún contenido. Si pasamos a la versión terminada aquí y hacemos clic en la imagen del producto, el primer elemento. Este es el detalle final del producto a la página HTML, que me gustaría que intentaran y copiaran. Recuerda, solo necesitamos agregar el contenido. No espero que el tuyo se vea así, versión terminada hasta que añadamos en el CSS. Puedes dejar esta mesa en la parte inferior. Yo sólo por ahora, vamos a sumar éste cuando lleguemos a la conferencia de mesas. Ya tenemos todo el contenido que necesitamos para crear esto, ya tenemos la sección de encabezado, ya tenemos la barra lateral, ya tenemos la sección de pie de página y también tenemos uno de estos productos. Por lo tanto, sólo necesitamos replicar la página de índice, pero esta vez sólo tenemos un producto, que es este controlador. Por supuesto, puedes Copiar la página de índice completa y Pegar en el archivo de detalles del producto y luego eliminar los productos de archivo extra, pero si eres nuevo en todo esto, posible que quieras escribirla para un poco más de práctica. Si aún no estás seguro, no te preocupes. Voy a seguir adelante y hacer esto ahora. Volver a Visual Studio. Voy a ir al index.html, presione Comando o Control A para seleccionar todo el código y luego voy a Comando o Control C para copiar. Pasando a la página de detalles del producto, eliminemos este texto y luego Pegar en el mismo código que la página de índice. Si subes a la parte superior, frota este texto o también podemos añadir al final del mismo para el detalle y darnos guardar. Entonces si nos desplazamos hacia abajo hasta los productos, así tenemos la barra lateral que está bien y luego todos los artículos. Este primer div es el que queremos conservar para el controlador. Quitemos todos los artículos extra, así que hay dos artículos extra, el micrófono, los cables y finalmente las lentes. Para mover eso y luego mover la copia de seguridad del sitio principal. Simplemente tenemos un producto dentro de esta sección principal junto con el encabezado de todos los artículos. De hecho, podemos cambiar esto al detalle del producto y luego darnos guardar, ir al navegador, presionar Refresh. Pero vayamos a nuestros proyectos. Refresca esto y luego si seleccionamos el mando del juego, luego tomaremos en la página de detalles del producto. Tenemos el encabezado, tenemos la barra lateral, y luego la sección de detalles del producto, que es un producto, y luego el área del pie de página abajo en la parte inferior. El tuyo ahora debería verse así. Tenemos todo el contenido que hemos visto desde la versión final, excepto la tabla, que veremos en el siguiente apartado. 22. Tablas HTML (formularios, tablas e iFrames): Pasamos ahora a las tablas HTML. Las tablas como sonido, se utilizan para mostrar una tabla de datos. Utilizamos una tabla aquí en la página de detalles del producto para maquetar filas de datos sobre cualquier descuento disponible para comprar a granel. Las tablas se pueden utilizar para básicamente cualquier tipo de datos que desee organizar en filas y columnas. En el pasado, se utilizaban mesas para colocar un sitio web. Por ejemplo, podríamos organizar todo nuestro contenido que vemos en esta página en columnas y filas. Esto ahora se desaconseja ya que ahora hay más alternativas CSS disponibles, sobre todo desde grid y flexbox, que cubriremos en este curso. Las tablas siempre tienen un lugar valioso y ahora es un dato de visualización como texto o números, o incluso imágenes de forma estructurada. Vamos a darle una vuelta en el detalle del producto a un archivo HTML, así que vuelva al editor de texto y luego abramos este archivo. Bajemos a los productos, así fuera de la barra lateral y hacia el área principal. Tal como hacer un poco de espacio justo después del producto pero nadie es sección principal aquí. Entonces podemos abrir nuestros elementos de mesa, que tiene la etiqueta de apertura y cierre, y así es como creamos la tabla. Si miramos esta tabla desde la versión terminada, justo aquí abajo, tenemos dos filas de datos. Las filas se pueden crear mediante el uso de etiquetas TR necesidad, que significa fila de tabla. Adelante y sumémoslos dentro de nuestra mesa. En nuestro caso son TR. Entonces agreguemos una segunda fila de tabla justo debajo. Cada elemento o cada celda para cada fila está rodeado en las etiquetas TD, que significa datos de tabla. En nuestra primera fila, teníamos cantidad 1, 2-3, 5-10, o 10 más. Se puede agregar esto dentro de la primera fila. Tenemos TD. El primero fue cantidad, luego se vende en la primera fila de tabla, agregar algunas nuevas etiquetas TD de una. Después 2-3, 5-10, y finalmente, 10 más, golpeó ese “Guardar”. Ahora vamos al navegador y asegurémonos de abrir nuestro propio proyecto. Voy a ir a nuestra carpeta de proyectos justo aquí, y luego podemos abrir estos índices o HTML. Por supuesto que el nuestro se ve muy diferente porque todavía no hemos agregado ningún CSS. Pero aún podemos hacer clic en los enlaces. Bajemos al controlador del juego para abrir esta página de detalles del producto. Ahí está nuestra primera fila ver, solo sopla los productos. Volver al editor de textos. Podemos hacer esto una vez más por la fila de precios. Justo debajo del primer TR, podemos añadir pequeñas etiquetas TD. Esta vez el primero fue precio, así que 7995, y éste un poco más barato, digamos 7895. Cada uno de estos corresponderá con el número ajustable. TD de nuevo, digamos 7695. Podríamos sumar 7495 por ahí, pega “Guardar”. Volver al navegador y volver a cargar, y ahora tener dos filas y datos. Es HTML con agregado para el contenido del sitio web, es exactamente lo mismo tanto para nuestra versión hasta ahora como también para la versión final que vimos antes. El estilo CSS realmente juega un papel importante en una mirada y sensación de sitios web. Muchos atributos de tabla como alinear en color de fondo. Pero estar en desuso en HTML 5, que ahora famoso estilo con CSS. Solíamos hacer cosas como agregar bordes y alinear texto dentro de la tabla, así como esto. Cuando agrego atributos de un tablero, lo configuro con un píxel de ancho, podríamos alinear el texto dentro del centro, guardar eso, y recargar. A pesar de que actualmente funciona en mi navegador, nuevo, se recomienda hacer estilo usando CSS. También podemos reemplazar TD por TH. Esto es para el encabezado de la tabla que hace que un contenido sea negrita. Esto es útil para la fila superior de esta tabla, que es la cantidad. Adelante y reemplacemos la fila superior por TH. Estos intercambios de TDs para ser TH. Haz esto en todos ellos, que crecieron además uno por uno y reemplazan los TDs por THs, y uno por hacer ahora nos da guardar y veamos qué efecto tiene esto. Ahora tenemos la fila superior como atrevidos porque se trata de un encabezado de tabla. Esta es la configuración básica de la tabla. Pero podemos ir aún más allá y agregar algo más de estructura a esta mesa si echamos un vistazo a la versión terminada. Vayamos al detalle del producto y abrimos una nueva pestaña. Si miramos esta tabla justo aquí, igual que un documento HTML, podemos dividirla en un encabezado, un cuerpo, y una sección de pie de página. Se puede utilizar la fila superior con la cantidad para el encabezado. El dato de precio puede entonces ser el cuerpo. No tenemos un buen uso para las etiquetas de pie de página en su ejemplo, pero están ahí si las necesitamos. También trabajando en una leyenda en la parte superior de la mesa, que hemos agregado aquí, compramos a granel y ahorramos. Vayamos al proyecto y vamos a darle una oportunidad a esto. En primer lugar, podemos tener los encabezamientos de mesa con cabeza T. Alrededor de esta fila de tabla, podemos agregar un nuevo elemento de cabeza T. Después podemos abrigar nuestra primera fila de mesa, sobre eso, y pegarla de nuevo dentro de su sección de cabeza de mesa. Entonces podemos rodear los precios con cuerpo T para esta sección de cuerpo. Nuestro cuerpo T dentro de ahí, y copia esta fila de tabla y pégalo en la sección del cuerpo. Podríamos agregar más filas a si fuera necesario, o incluso un área de pie de página con un pie T, ambos. Ahora vamos a mantener eso guardar y recargar el navegador. No vemos ningún cambio en el contenido. Pero ahora nuestra mesa tiene una estructura más descriptiva, al igual que cuando miramos los elementos semánticos desde el principio. Ahora por el título, que actúa como encabezamiento de la mesa, que es este texto justo aquí. Volvamos a la parte superior de la mesa, justo debajo de estos elementos de la mesa de apertura. Podemos agregar nuestro título aquí dentro, y luego agrega textos al igual que hacemos con las etiquetas T. Compra a granel y ahorra. Después de volver a la página de detalles y volver a cargar. Ahora como nuestro texto en la parte superior, se puede ver este texto está centrado a la tabla por defecto. Lo final que quiero mostrarles por ahora, con tablas son los atributos colspan. Podemos agregar esto a una celda como TD o TH para hacer de esa celda en particular el ancho de dos o más. Si estás familiarizado con Microsoft Excel, esto es lo mismo que fusionar celdas en una fila. Vamos a darle a esto un ir dentro de la sección de cabecera, para empezar haciendo un lapso de cantidad a través de dos celdas. El TH cantidad, podemos tener los atributos colspan, y malestar es igual a dos. Refrescar, y ahora la cantidad abarca el ancho de las dos celdas de abajo. Podríamos hacer lo mismo dentro del cuerpo por el precio. Añadir colspan es igual a dos. Ahora el precio también ocupa el ancho de dos celdas también. Simplemente voy a quitar rápidamente lo que no necesitamos para este proyecto. No necesitamos estas ginebra colspan. Podemos necesitar la tabla estándar en por ahora. Quita esos dos. Tampoco necesitamos este borde, y las propiedades de alineación también, esto es ahora, pero primero miraré las tablas HTML. A continuación, pasaremos a capturar formas de onda de entrada del usuario. 23. Formularios HTML (formularios, tablas e iFrames): En este video, vamos a ver una parte importante de los sitios web que son las formas. Probablemente todos han usado algo como esto, que ven aquí. Si vas a la versión terminada y da click en la página de contáctanos. Se trata de un formulario que se utiliza para obtener la entrada de un usuario, como recopilar información para registrarse o para enviar un mensaje. Los datos ingresados generalmente se envían a un servidor web y veremos este lado de las cosas más adelante en el curso. Por ahora, sin embargo, sólo nos estamos centrando en este lado HTML, que se utiliza para mostrar el formulario en la pantalla. Pongamos a trabajar en la página de contacto para que podamos empezar a agregar nuestro formulario. Ya agregamos un archivo HTML de punto de contacto justo aquí. Podemos empezar a agregar nuestro formulario a esto. Podemos comenzar agregando nuestra estructura. Voy a empezar copiando el contenido del detalle del producto a un HTML. Copia y luego pega esto en lugar del texto que lo agregaremos aquí. Por supuesto puedes teclear esto para más práctica si lo prefieres. Pero sólo voy a pegar esto para que las cosas se muevan a formas. Para mantener nuestro sitio web consistente, podemos reutilizar el mismo encabezado y barra lateral. Este encabezado puede quedarse, y toda la sección lateral puede quedarse también, pero voy a quitar la mayor parte de la sección principal aparte de este rubro. Vayamos todo el camino hasta el fondo de la mesa. En lugar de detalle de producto para el rubro nivel dos, voy a agregar un título de contactarnos. Ahora, tenemos esta sección principal clara para agregar un formulario. Vamos a darle una oportunidad a eso y guardar eso. Si volvemos al navegador dentro de nuestros proyectos, intentemos dar click en contactarnos. Ahora, estamos en este punto de contactos HTML. Todavía tenemos el encabezado y también la barra lateral, pero ningún otro contenido principal. Dentro de esta sección principal podemos agregar nuestro formulario. El formulario está contenido dentro de un elemento de forma. Añadamos esto ahí dentro. A menudo verás algunos atributos dentro de esta etiqueta de apertura de formulario, como la acción. Al igual que eso, y también método. Volveremos a estos más adelante en el curso ya que están relacionados con cómo enviamos los datos de nuestros formularios al servidor. Pero sólo quería que estuvieras al tanto de ellos si te encuentras con ellos en alguna documentación. La acción se utiliza para establecer la ubicación a la que se va a enviar el formulario. Agregamos una ruta de archivo dentro de ahí, y el método define qué método HTTP queremos usar para enviar un formulario. Podemos ya sea enviar como un get o una solicitud de post, pero más sobre esto más adelante. Por ahora, quiero concentrarme en conseguir algunas entradas en la pantalla. Las entradas son las entradas del usuario de captura de sonido, como texto, que se introduce, o una casilla de verificación cuando el usuario hace clic en él. Empecemos con una entrada de texto para el nombre del usuario. Podemos agregar un elemento de entrada. De esa manera, hay muchos tipos diferentes de entradas y las configuramos usando los atributos de tipo. Añadamos el primero de texto y pasemos a nuestros proyectos para luego refrescarnos. Ahí está nuestro texto de contacto en la parte inferior y una entrada de texto. Este es solo un cuadro sencillo donde puedes ingresar cualquier tipo de texto que queramos. De hecho, no estamos restringidos a solo texto, incluso podemos escribir números y caracteres diferentes también. Podemos agregar algún texto antes o después también, para que el usuario sepa qué ingresar, como su nombre. Hagámoslo ahora. Justo antes voy a añadir el texto de nombre, luego recargar y ahí está nuestro texto en la pantalla como se esperaba. Si echamos un vistazo aunque a esta versión terminada, podemos ver dentro de la entrada de texto tenemos algunas instrucciones de texto tenues. Esto se elimina cuando el usuario hace clic en el cuadro de texto y empezamos a escribir. Este texto se agrega con los atributos de placeholder. Volvamos a nuestros insumos. Justo después de los atributos de tipo, podemos agregar un marcador de posición y luego podemos agregar nuestro texto ahí de, introducir tu nombre y ese es nuestro texto dentro de ahí. A continuación queremos que el usuario ingrese su dirección de correo electrónico, que está justo aquí. Nos ocupamos de esto de la misma manera, pero esta vez la entrada tiene un tipo de correo electrónico. Bajo una nueva línea, podemos agregar correo electrónico, luego agregar nuestros insumos. Esta vez con un tipo de correo electrónico. Esto también puede tomar el atributo placeholder también de ingresar su correo electrónico. Dale a eso un guardado, y luego refresca y ahí está nuestro para formar elementos lado a lado. El siguiente tipo de entrada es el área de texto. Esto se utiliza cuando queremos que un cuadro más grande escriba más texto para áreas como un mensaje. Añadamos esto en una nueva línea. En primer lugar, los textos de mensaje, y luego esta vez en lugar de las entradas, usamos área de texto. Esto tiene etiquetas de apertura y cierre, a diferencia de estos insumos. En el interior aquí también podemos agregar algunos atributos extra para este también. Podemos establecer el número inicial de columnas de ancho queremos que sea la caja. Añadamos los atributos de llamadas y voy a poner el mío para que sea 30. También el número de filas también para la altura. Voy a establecer mi valor inicial para ser cinco. Las áreas de texto a menudo se pueden arrastrar más y más pequeñas con una pequeña sección de arrastre en la esquina. Actualiza el navegador y ahí está nuestro área de texto más grande, que podemos agregar múltiples líneas de texto. Como mencioné antes, también podemos hacer click en la sección la esquina y hacerla más grande o más pequeña. Recuerda que antes en el curso que mencionamos podemos categorizar la mayoría de los elementos en nivel en línea o en bloque. Podemos ver claramente que aquí que los elementos de forma están en línea. Si quieres que vayan por su propia línea, apilados uno encima del otro, podemos rodearlos en un div, que es un elemento de nivel de bloque y esto nos da el efecto que vemos en la versión final aquí. Dentro del formulario, agreguemos algunos elementos div. Ese tiene el nombre, lo pegaré. Segundo div para el correo electrónico y finalmente un tercero para el mensaje, pega eso en. Después recargar y ahora, las tres entradas en su propia línea separada. Este es un buen inicio a nuestra forma y continuará en el siguiente video. 24. Etiquetas, nombre e id (iFrames, formularios y tablas): En el último video, agregamos algunos elementos básicos de forma a la página. También, agregamos el texto de Nombre, Correo electrónico, y Mensaje a la izquierda de cada entrada. Dígale al usuario qué información debe ingresar. Esto es solo texto plano sin otros elementos HTML, como una etiqueta p, que puedes ver aquí. Tampoco hay forma de que el navegador sepa que estos textos están relacionados con estas entradas. Podemos arreglar esto agregando una etiqueta. Una etiqueta es solo una forma de agregar una leyenda de textos a cada entrada como esta. Primero recortemos este texto, y luego podemos añadir nuestra etiqueta dentro de aquí. Entre abierto y cerrado y tiempos ahora podemos pegar de nuevo nuestro texto, dar eso guardar y volver a cargar el navegador. Podemos ver al instante que si miramos esta primera entrada, se ve casi igual que antes. No obstante, el navegador ahora sabe que esto es una leyenda para un elemento de formulario. Pero, ¿cómo sabe que esta etiqueta es para estas entradas en particular y no el Email o Mensaje? Bueno, podemos vincularlos agregando un id atributos. Esta primera entrada, justo al lado del placeholder, podemos agregar un id atributos y este puede ser un nombre de nuestra elección. Yo quiero nombrar a este Nombre, para que sea sencillo. Después, en la etiqueta, dentro de la etiqueta de apertura, podemos agregar los cuatro atributos y vincularlo al id con el mismo nombre. Este atributo id no es solo para su uso con una etiqueta, es importante para orientar estos elementos individuales con JavaScript y CSS, también. Hagamos ahora lo mismo para Email. Justo después del placeholder, el ID de Email, salgo en una etiqueta. Corta el texto y luego pégalo de nuevo. Entonces podemos agregar el atributo for dentro aquí de correo electrónico. Entonces, por último, podemos añadir esto también al área de texto. Justo después de filas, agrega el id y de nuevo podría ser el nombre de tu elección, pero voy a llamar al mío Mensaje. Corta el texto y luego agrega como etiqueta. Por último, el atributo for, y este es Mensaje Dos, y guarde eso. Es importante no tener el mismo nombre de identificación más de una vez en documentos web. Tenemos cluster este propósito y vamos a cubrir esto en más detalles pronto, así que asegúrate, está guardado y luego pasa al navegador, recarga y, por supuesto no vemos diferencia pero todos estos ahora enlazados también detrás de bambalinas para el navegador web. Otra ventaja de usar una etiqueta es que también se puede hacer clic en la etiqueta. En lugar de antes cuando solo podíamos hacer clic en esta entrada para activarla, si hacemos click desactivada, también podemos hacer click en el nombre también. Esto también hace que la entrada esté activa, por lo que el usuario puede comenzar a escribir. Otro atributo que comúnmente verás es un atributo de nombre. Pasemos a nuestro editor de textos y dentro de esta primera entrada, podemos agregar un nombre y llamemos a este Nombre. Lo mismo para el correo electrónico, nombre = correo electrónico y también el área de texto del mensaje. Podemos confundirnos primero, por qué tenemos este nombre y también los atributos id y esto es comprensible. No entraré en demasiados detalles todavía, ya que mucho de esto puede no quedar claro hasta que nos familiaricemos más con los scripts java y también procesemos formularios en el servidor. El atributo id que agregamos primero, suele utilizarse para hacer referencia a los elementos, en nuestro caso las entradas. Es una forma de agarrar el elemento con JavaScript o CSS. El atributo Name, sin embargo, es más útil cuando se envía formulario al Servidor Web. Este nombre se utiliza para hacer referencia a los datos que el usuario ha ingresado dentro de los campos de entrada justo aquí. Es una forma de sacar estos datos de ahí. Si esto no tiene sentido todavía, no te preocupes, veremos mucho más a medida que pasemos por este curso. Por ahora sin embargo, seguiremos viendo más tipos de entrada en el siguiente video. 25. Casillas de verificación y botones de radio (iFrames, formularios y tablas): Otro tipo de entrada común que probablemente ya utilizas antes es una casilla de verificación. Checkbox, al igual que tenemos aquí, permite al Usuario comprobar más de una casilla a la vez. Aquí permitimos que un usuario se suscriba a ofertas por boletín, correo electrónico, o post, así que veamos cómo podemos hacerlo de nuevo en un editor de texto. Al igual que antes, voy a agregar un entorno a una etiqueta div y asegurarme de que esto todavía está dentro de estos elementos de formulario aquí. Abre las etiquetas div para hacer este nivel de bloque. Entonces estamos podemos agregar algunas etiquetas p para el texto en la parte superior y el texto va a ser justo lo que decimos aquí de suscribirse a futuras ofertas comprar. Después un colon al final. También podemos usar una etiqueta para esta casilla de verificación, así que añadirlas primero. Justo debajo de la p, agreguemos nuestra etiqueta y al igual que antes, agregamos los cuatro atributos. Voy a llamar a esto el boletín de noticias, cual podemos enlazar con el DNI pronto. Después agrega newsletter dentro de la etiqueta de apertura y cierre. Justo después de esto, podemos sumar nuestro insumo, como hemos visto antes. Esta entrada tiene el tipo de casilla de verificación. Entonces le damos el DNI para enlazar a este boletín justo aquí. Dale ese guardar y probar dentro del navegador yendo a nuestra página de contacto, para luego refrescar. Ahí está nuestro texto entre las etiquetas, p justo en la parte superior de ahí. Después ten la etiqueta de newsletter, y también puedes ver podemos dar click en esta casilla de verificación y también deshacer clic. Ahora tenemos una casilla de verificación en la que se puede hacer clic encendido y apagado. Ahora podemos agregar esto en dos veces más para las opciones de correo electrónico y post. Hagamos exactamente lo mismo. En primer lugar, podemos agregar una etiqueta y la etiqueta para, llamemos esto al correo electrónico. El nombre del correo electrónico y la entrada con un tipo otra vez de casilla de verificación, el ID del correo electrónico y se cierra. Entonces nuestra tercera y última, esta va a ser etiqueta para post. Se apaga con la etiqueta de texto del post dos y la entrada final de la casilla de verificación. Tipo de casilla de verificación y una identificación de puesto luego cierro. Acude al navegador y como nuestro boletín de noticias, correo electrónico y post. También hay algunos atributos más que deberíamos agregar también. Por el momento, estas casillas gratuitas están al lado de la otra en la página, ambas sin relación. Podemos vincular efectivamente si quisiéramos, dándoles a todos los mismos atributos de nombre. Este es un atributo de nombre que miramos en el último video, que se añadieron justo aquí. Hagamos lo mismo por nuestra entrada con un tipo de casilla de verificación. El nombre, voy a llamar a esto suscribirse. Yo sólo voy a copiar esto y añadir las mismas dos veces más. Este nombre atributos, como se mencionó en el último video, significa que cuando enviamos este formulario al servidor, también se pasarán estos valores de la entrada. Con casillas de verificación no podemos escribir un valor como podríamos con el texto o la entrada de correo electrónico, por lo que podemos agregar un atributo de valor de igual manera. El valor, y éste puede ser el boletín. Se trata de un dato que se pasa al servidor una vez que envía, por lo que el valor para el segundo, de correo electrónico y también el valor de la publicación. Cada vez que se envíe el formulario, el servidor obtendrá el valor de boletín, correo electrónico, o publicación, cualquiera que sea el que se haga clic. Una de las cosas clave a saber está aquí, es que puedes revisar tantas como quieras. Podemos hacer click encendido y apagado de cualquiera de estos. Esta es una diferencia clave entre casillas de verificación y botones de radio, que vamos a ver a continuación. Si vamos todos a la versión terminada, ya hemos hecho estas casillas gratuitas que vemos aquí. Pero justo debajo de esto tenemos, “¿Cómo te gustaría que respondiéramos?” Se pueden ver estos botones de radio, pero sólo podemos hacer clic en uno a la vez y esa es la diferencia clave entre radio y casillas de verificación. Se agregan entradas de radio de manera similar a estas casillas de verificación. Voy a añadir un div circundante. De nuevo, asegúrate de que esto aún esté dentro del formulario. Entonces dentro de aquí, los tiempos p en la parte superior para el texto de cómo te gustaría que respondiéramos, con un signo de interrogación al final. Entonces podemos seguir adelante y agregar nuestras etiquetas. Esto también tiene los cuatro atributos, por lo que podemos vincularlo. Yo quiero llamar a este la respuesta telefónica, cerrar eso y añadir la etiqueta de teléfono. Entonces vamos adelante y sumamos nuestros insumos. Esta vez con el tipo de radio y también el ID de respuesta telefónica, para igualar esto. Agrega eso también y cierro esto. Entonces sólo necesitamos uno más para el correo electrónico. En primer lugar, la etiqueta y esta vez puede ser respuesta por correo electrónico. Esto es mantenerlo consistente con la respuesta telefónica anterior. Cierra eso y pide la etiqueta de correo electrónico, luego entradas, tipo de radio y estos ID de respuesta de correo electrónico. Cierra eso, bien. He usado respuesta telefónica y respuesta de correo electrónico aquí en lugar de teléfono o correo electrónico, porque ya tenemos ID de correo electrónico en su página, que usaremos justo arriba. Recuerdo que dijimos antes que los ID deberían ser únicos y solo se usaran una vez en la página, así que vamos a dar ese guardar y probar dentro del navegador, volver a nuestro proyecto actual y recargar. Al igual que dos botones de radio en la parte superior. Pero una cosa que notas es que si hacemos click en estos, podemos ver que ambos no se pueden revisar al mismo tiempo, por lo que este es un comportamiento diferente a lo que esperábamos, de lo que hemos visto antes en la versión terminada. Parece que somos capaces de seleccionar ambos botones de radio al mismo tiempo. Esto se debe a que al igual que las casillas de verificación, también necesitamos agruparlas junto con un atributo de nombre, así que agreguemos el nombre en cada entrada, así que llamemos a esta respuesta y el segundo nombre de entrada es igual a respuesta. Ahora se vincula entre sí. Probemos esto refrescando y probemos ambos. Ahora sólo podemos seleccionar un valor a la vez porque aquí hay un grupo juntos. Por último, podemos agregar un valor atributos para enviar también al servidor. El valor esta vez puede ser teléfono, y el valor para el segundo va a ser correo electrónico. También es posible que veas casillas de verificación con un valor de verdadero y falso también. Si sólo hay dos opciones como una entrada de suscripción, que es un simple sí o no. Entonces un verdadero o falso puede ser un buen caso de uso para esto. A continuación, vamos a pasar a otro tipo importante de entrada, que es seleccionar. 26. Selecciona la entrada (iFrames, formularios y tablas): El siguiente tipo de entrada que quiero mostrarte, es el cuadro de selección. Esta entrada básicamente permite una lista desplegable y varias opciones, que el usuario puede seleccionar, y podemos ver esto justo aquí. Si nos desplazamos hacia abajo hasta el Asunto aquí, podemos dar click en esto. Se me presentarán varios diferentes. Ahora se trata de un tipo ligeramente diferente de cuadro de selección, que vamos a ver ahora pero nos pondremos en este tipo apenas pronto. En primer lugar, solo voy a ordenar las cosas un poco dentro de todas las formas y separar nuestras secciones para que estén más claras. Vamos a tener nuestra sección de nombres y agregar algo de espacio entre cada div, ahora podemos cerrar la casilla de verificación también. Todos estos agrupados así, luego agrupar nuestra sección de respuesta de correo electrónico y teléfono. Ahora estos son todos grupos, voy a añadir nuestro selecto justo debajo del área de mensajes. Esta es nuestra área de mensajes aquí, así que hagamos algo de espacio y también creemos nuestra sección div para esto. Esta vez, utilice el elemento select en lugar de una entrada. Agrega el selecto así. El selecto, al igual que todos los demás. Voy a dar una identificación, y vamos a llamar a esto el tema. El cuadro de selección va a agregar una lista de opciones que el usuario puede seleccionar como asunto de su mensaje, así como la selección, también podemos agregar una etiqueta también. Debido a que tenemos el atributo ID, también podemos agregar el atributo for de sujeto, y luego un texto dentro de sujeto también. Dentro de aquí, cada elemento del menú desplegable está envuelto en un elemento de opción, y esto va entre las etiquetas de selección. Antes de hacer eso, solo echemos un vistazo a esto en el navegador. Dice nuestra etiqueta de Sujeto, y se puede ver tenemos la entrada aquí. Si hacemos click en él, no tenemos ninguna opción para seleccionar todavía, así que sumémoslas con nuestros elementos de opción. Añadamos el primero aquí, y dentro aquí podemos añadir nuestro texto el cual aparecerá dentro del cuadro de selección. El primero puede ser retornos, veamos esto en acción, dice retornos justo ahí. También podemos agregar un valor. Este atributo de valor nos permitirá pasar un valor selecto con el formulario cuando lo enviemos. El valor de éste puede ser retornos, y luego vamos a copiar y pegar esto en unas cuantas veces más. Este puede ser artículo defectuoso, y un valor de opciones de artículo defectuoso, y voy a usar un subrayado justo en lugar de tener un espacio aquí. El siguiente para la información de entrega y el valor de la entrega. Este puede ser para el seguimiento de pedidos. Siguiente una opción de asesoramiento. Entonces, por fin, solo agregaremos uno más y esto puede ser otro. Dale ese guardar y vamos dentro del navegador. Recarga, y luego haga clic en nuestro selecto. Aquí se nos presenta una lista de todas las opciones que agregamos dentro del Select. Por defecto, sólo podemos seleccionar uno de estos valores a la vez. Tan pronto como hicimos clic en esto, el Select se derrumba. Si queremos seleccionar más de uno, podemos agregar un atributo múltiple a la etiqueta de selección de apertura. Justo después de la ID, podemos agregar múltiples, y luego vamos a repasar, recargar, y podemos presionar Comando o Control para seleccionar más de un valor. Voy a quitar esto por ahora ya que no necesitamos esto dentro de nuestro proyecto. Pero es útil saber que está ahí. También podemos agrupar cualquier opción relacionada. En lugar de tener sólo una lista larga, podemos usar el elemento optgroup para agrupar ciertos temas relacionados. Devoluciones y artículo defectuoso, voy a agrupar. Voy a cortar ambos valores, y luego usar el elemento optgroup y luego puedo pegarlos de nuevo dentro. Necesitamos entonces darle una etiqueta a este optgroup, y este es el texto que aparecerá en la pantalla encima de ambas secciones de grupos y lo verás más claramente en tan solo un momento. Voy a agregar el texto de las cuestiones de producto y guardar eso. Veamos cómo se ve esto. Si ampliamos, vemos en el texto débil en la parte superior tenemos Problemas de Producto, que es la etiqueta que agregamos, y luego ligeramente compensada a la derecha, tenemos nuestros dos artículos agrupados aquí. A continuación, contamos con información de entrega y seguimiento. Estos se pueden agrupar en entrega. Recortemos estas dos opciones y añadamos nuestro grupo de opciones, luego pegarlas de nuevo. El rótulo de texto para éste puede ser Entrega. Después abajo en la parte inferior, podemos agrupar consejos y otros en un grupo Otro. Un optgroup más, pega estos dos últimos en, y luego nuestra etiqueta simplemente de Otro. Ahora tenemos todos los tres grupos de opciones separadas, ahora deberían mostrarse todos en el navegador. Recargar, abrir esto, y ahora tenemos tres grupos diferentes por completo. Aviso que tampoco podemos hacer clic en esta etiqueta ni de Entrega, Otros, y Problemas de Producto. Esto simplemente está ahí para información. Ahora tenemos nuestro cuadro selecto en su lugar. Ahora vamos a ver una edición más reciente a formularios html, que es la lista de datos, y vamos a echar un vistazo a esto a continuación. 27. Lista de datos y envío (iFrames, formularios y tablas): Ahora quiero mostrarte datalista. Datalist es uno de los elementos de forma más nuevos disponibles. Debido a esto, los puertos de los navegadores están presentes es un poco más limitado en el momento de la grabación. Podemos ver esto yendo a un sitio llamado caniuse.com. Todo lo que necesito hacer es escribir el datalist en la parte superior aquí. Después desplázate hacia abajo y podrás ver una lista de los navegadores compatibles. Podemos ver por el color que las versiones posteriores de Chrome son verdes, y está totalmente soportado. No obstante, algunas de las primeras versiones de Safari y también Safari en iOS, no es compatible. Si echamos un vistazo a Internet Explorer y también Edge y Firefox también, podemos ver que el verde claro indica algunos puntos parciales. Por lo que hay que tener cuidado al usar datalist. No obstante, es útil saber ya que será una buena opción para usar una vez que el spot del navegador se ponga al día. Los datalistas se pueden utilizar en lugar de un cuadro de selección del último video, donde el cuadro de selección es un desplegable para seleccionar una opción. Datalist es más un cuadro de texto donde el usuario puede escribir en. Entonces podemos ver algunas sugerencias a continuación. Si pasamos a la versión terminada y a la página de contacto, este es un datalista aquí. Si hacemos click en el desplegable, aún tenemos todas las opciones que hemos visto en el último video el cual puedes seleccionar. O podemos usar esto como cuadro de búsqueda. Podemos filtrar hacia abajo si tienes muchas opciones diferentes. Comencemos de nuevo en Visual Studio Code. Voy a comentar este div completo que creamos En el último video. Este es un div que rodea todo el cuadro de selección. Si estás usando Visual Studio Code, simplemente deberías poder resaltar y presionar “Comando o control”, presionar “Barra inclinada hacia adelante” y esto comentará las fotos de la sección. De lo contrario, sólo tendremos que escribir manualmente la sección de apertura y la sección de cierre debajo de ella. Entonces sigamos adelante y construyamos nuestro div, igual que hicimos antes. Entonces podemos añadir una etiqueta. Etiqueta de nuevo va a tener los cuatro atributos de los sujetos, y luego sujeto dentro de aquí. Básicamente estamos solo constructo en lo mismo que hicimos para el cuadro selecto. Esta vez agregamos unas entradas con el tipo de textos. El motivo por el que estamos agregando una entrada de texto es para mostrar aquí la sección, el usuario puede escribir en ella. Vamos a darle a esto una identificación de sujetos otra vez a mucho estos atributos aquí. Entonces el marcador de posición al final de entrar a tus sujetos y cerrar. Esto es sólo una simple entrada de texto para comenzar. El usuario tiene un cuadro de texto para escribir. Entonces debajo de esto, podemos agregar nuestra lista de datos con etiquetas de apertura y cierre para estos elementos. Entonces podemos agregar una opción dentro aquí. Esto sólo tiene la etiqueta de apertura, y también vamos a añadir un valor atributos de los retornos. Entonces vamos a copiar y pegar lo mismo un par de veces más. A continuación, podemos agregar el artículo defectuoso. Artículo defectuoso y luego el tercero es entrega, antes de que cuatro se ordenó camionaje. El quinto fue consejo y el último fue otro. Pasado al navegador. Se recarga y sube a los sujetos. Empecemos a añadir algo de texto aquí dentro. Si escribimos dentro de las entradas, no vemos ninguna de las opciones que aparecen a continuación, como hemos visto en la versión final. Esto se debe a que tenemos unas entradas de texto plano y también tenemos una lista de texto debajo de ella, pero aún no las hemos enlazado. Para vincularlos, primero necesita agregar un ID a la lista de datos. Al igual que todos los identificadores van al descubierto por dentro. Llamaremos a esto los temas. Después entradas de texto arriba, que listas se conecta con los atributos de la lista. Por supuesto que esto necesita ser sujetos coincide ID a continuación. Dar un guardar y dejar probar esto. Pulsa “Refrescar” y también vemos aparecer esta flecha desplegable, parece que está funcionando ya que trato de dejar consejos y en que todo parece funcionar. Es así como utilizamos la lista de datos. De nuevo, ten cuidado al usar una compatibilidad de navegador de comprobación. Si estabas buscando incluir esto dentro de un proyecto. Ambos cosa desconocida, es un bonito elementos de forma son especialmente útiles, para filtrar un gran grupo de opciones. Estas son todas las entradas de formulario ahora en exhibición en nuestra página web. Solo necesitamos una forma de enviar este formulario y como pueden adivinar, lo hacemos con un botón de enviar. Enviar también es un insumo, pero en esta ocasión pedimos el tipo de presentación. Añadamos este derecho al final de nuestro formulario. Justo encima de la etiqueta del formulario de revelación. Podemos escribir esto en un div 2, luego agregar nuestras entradas con el tipo de enviar. Dale ese ahorro y vamos a echar un vistazo a esto. Por supuesto que esto está justo en la parte inferior tenemos nuestro botón de envío justo aquí. Se trata de una bomba que en realidad enviará los datos en el formulario al servidor. Recuerda todo esto no funcionará por el momento porque HTML solo muestra el contenido. Pero volveremos a presentar formularios más adelante en el curso, cuando estemos más familiarizados con el desarrollo web back-end. Pero una cosa que notarás una vez que hagamos click en el botón “Enviar” antes, lo llevaremos de vuelta a la misma página. Si miras los extremos de esta URL, tenemos nombre igual a unblank, y correo electrónico igual a ningún valor y mensaje igual a ningún valor. Esto se debe a que agregamos el nombre de nombre, correo electrónico, y mensaje en el HTML. Esto fue justo aquí, nombre, correo electrónico y mensaje. Es por ello que se nos agrega el atributo name antes, y estos son los datos que se enviarán al servidor. Vamos a darle a eso un juicio rápido, si agregamos a Chris. Entonces test@test.com, luego mensaje aquí, si bajamos y damos click en “Enviar”, entonces verá esta información ahora está en la barra superior. Nuestro nombre es igual a Chris, correo electrónico es igual a prueba y el mensaje es igual a nuestro texto, que el usuario lo agregó. Simplemente dejaremos eso por ahora y por supuesto volveremos a eso más adelante. De lo que sabemos más sobre cómo funciona el desarrollo back-end. También podríamos reemplazar este botón por un elemento de botón HTML. Esto también toma un tipo igual a enviar. Abajo en la parte inferior. Voy a poner esto aquí. Nosotros sólo vamos a comentar esto. Entonces podemos agregar al botón elementos igual que eso con el tipo de envío. Esto es algo que verás con bastante frecuencia. Ya que tiene el tipo de presentación, también presentará el formulario al igual que esta entrada hará arriba. Era lo mismo y echa un vistazo a esto en el navegador. Se ve un poco de diferencia. Simplemente tenemos un botón plano sin textos. No vemos texto de envía esto porque al igual que sobre elementos con una etiqueta de apertura y cierre, necesitamos agregar nuestro texto dentro. Entre estos podemos agregar un texto todo de presentar. Ahora voy a ver el texto dentro del botón. Esta es en realidad una de las principales diferencias al usar una entrada o un botón de esta manera, las entradas tienen texto predeterminado de enviar, pero nuestros botones, estás en control o el texto dentro del botón. Por lo que puede ser cualquier cosa que quieras. El chat tiene enviar mensaje y lo verás reflejado en el navegador. Por ahora voy a comentar estos botón y mantener en su lugar las entradas que tenías del formulario. De nuevo con comando o control y una barra inclinada hacia adelante a los datos comunes hacia fuera. También es posible que te encuentres con un botón de reinicio, colocado junto al envío, así. Más que el tipo de presentación. También puede ver el tipo de restablecimientos y esto se utiliza para borrar cualquiera del texto de las entradas que agregamos. Teníamos algún texto aquí dentro. Podrías hacer click en “Restablecer”. Esto despejará todos los insumos de forma de nuevo a cómo eran. Este es el contenido de nuestro formulario ya completado. Pero en el siguiente video, quiero mostrarles algunos tipos de entradas más útiles. 28. Otros elementos de forma útiles (iFrames, formularios y tablas): A pesar de que nuestro formulario ya está completo para estos proyectos, siguen siendo algunos otros tipos de entrada útiles que quieres mostrarte. Voy a agregar estos como nuevos elementos de forma, para mantenerlos separados de lo que vamos a guardar del resto del proyecto. Bajemos a nuestro sitio de cerrar y formas aquí y luego, abramos aquí un nuevo conjunto de elementos de forma. Por lo que algunos otros tipos de entrada útiles incluyen el número. Esto tiene los elementos de entrada y en esta ocasión voy a añadir un tipo de número. Uno de los beneficios de usar el número, si actualizamos, lo vemos aparecer aquí, es que restringe la entrada del usuario a estos números. Si hacemos click en esto y tratamos de agregar algunas letras o palabras dentro de aquí, estas no están tomando ningún efecto, pero por supuesto podemos agregar algunos números, que puedes ver aquí. También está el arriba y abajo del lado derecho, que podemos usar para subir y bajar a través de números. A continuación, si quieres pedir la contraseña del usuario, tiene sentido hacerlo con unas entradas con el tipo de contraseña. Esto tiene los beneficios de mirar fijamente la contraseña. Si escribimos nuestra contraseña dentro de aquí, vemos que no podemos ver ninguno de los caracteres que has ingresado. Esto es útil para si alguien está detrás de ti, o caminando más allá, por lo que nadie más puede ver la contraseña que ingresas. También hay un tipo de entrada de fechas, a las que también tenemos acceso y como cabría esperar, este es el tipo de entrada de fecha y esto obviamente es para todos los campos de fecha. Echemos un vistazo a esto en acción. Esto podría ser utilizado a la hora de pedir el cumpleaños de un usuario, o por ejemplo, seleccionar las fechas, queremos hospedarnos en un hotel, una página web de viajes. Si hacemos click en esto, tenemos las fechas, el mes del año. También podemos controlar esto con el teclado, escribiendo arriba y abajo, add tab también cambia entre el día, el mes y el año. También podemos dar click en esta flecha desplegable y tenemos un campo de fecha donde podemos seleccionar diferentes meses del año. Entonces todo lo que necesitamos hacer, es hacer click en una de las fechas y el campo se rellena automáticamente con la fecha en la que hicimos clic. [ inaudibles] estos insumos, son bastantes también los cuales puedes buscar en línea, pero te mostraré algunos más de los comunes, como el color. Cambia el tipo para que sea color. Probablemente ya hayas visto este antes en varios sitios web, donde tenemos un recolector de color. Si actualizamos, vemos que el color negro es por defecto. Esto se ve diferente en diferentes navegadores, por lo que si estás usando algo como Edge o Firefox, es posible que tengas un aspecto ligeramente diferente en tipo de entradas aquí. Si hacemos click en esto obtenemos un bonito picker de color, este por supuesto, es el de manzana y el tuyo puede parecer un poco de diferencia. Hacemos clic en varios valores diferentes y elegimos nuestro color de ahí. Otro útil es el rango. Por lo que entra con el tipo de rango, de vuelta al navegador. El rango nos da un deslizador, que un usuario puede moverse a través haciendo clic en él y arrastrándolo hacia la izquierda y la derecha. Por defecto, el deslizador está en el medio, pero también hay algunos atributos que podemos agregar para cambiar las cosas, podemos cambiar el mínimo y también el máximo. Entonces si establecemos el mínimo para ser uno y el máximo para ser 10, esto nos da un rango de 1-10, que podemos arrastrar entre. Ahora podemos controlar la posición inicial del deslizador. Actualmente, como dijimos antes, comienza en el centro, pero podemos cambiar la posición inicial estableciendo los atributos de valor. Entonces si establecemos esto como uno , aparecería al principio. Vamos a darle una oportunidad a esto y ahora vemos el círculo justo al principio, si cambiamos esto para que sea un valor de 10, aparecería justo al final y este es un tipo de entrada útil, particularmente cuando empezamos a aprender sobre JavaScript. Podemos usarlo para cosas como configurar el volumen en un reproductor de música. Por lo que sube y baja como el usuario de drags. El tipo de entrada final que quiero mostrarte en este video es la búsqueda. Seguro que todos lo han usado antes para buscar artículos en un sitio web. Esto es algo que podría ser utilizado en nuestra página web, en la sección de encabezados. Si miras el sitio final aquí, mira la parte superior, tenemos un campo de búsqueda justo aquí, ahora voy a quitar la segunda forma, que he estado jugando con él y traerlo de nuevo y entonces podemos agregar una búsqueda al encabezado. Entonces si nos desplazamos de nuevo a la parte superior de la página y dentro de esta sección de encabezado, podemos agregar esto justo después de nuestra navegación. Tenemos un tipo de entrada igual a Search y también podemos agregar un atributo de marcador de posición a Search luego cerrar. Una de las diferencias entre esta y una entrada de texto normal es, después de escribir algo, hay una x que aparece para eliminar el término de búsqueda. Entonces mostraré nuestro principal ahora, si actualizamos, luego volvemos a la parte superior, luego empezamos a escribir, vemos esta x en el lado derecho, para borrar las entradas de formulario. También, al igual que con otros elementos de formulario, el HTML sólo proporciona un cuadro de búsqueda visual. Buscar algo por el momento no funcionará, solo con HTML solo. También necesitamos agregar el cuadro de búsqueda al encabezado, en la página de índice 2 y también el detalle del producto. Si hacemos click en la casa, no vemos esto añadido dentro de aquí. Copiemos estas entradas desde la página de contacto, primero actualicemos en el detalle del producto exactamente en la misma ubicación, lo suficientemente cerca. Entonces si abrimos nuestra barra lateral y entramos en el index.html, podemos hacer lo mismo justo aquí. Vamos a probar esto. En el Inicio, el Contáctenos y también para hacer click en uno los productos, como el controlador de juego. Hemos visto el detalle del producto también tendrá la barra de búsqueda allí. Entonces ahora deberíamos tener una idea bastante buena, de las diferentes formas en que podemos reunir información utilizando formularios e insumos. Espero que esto te haya resultado útil y te veré en el siguiente video. 29. iFrames (iFrames, formularios y tablas): Ahora llegamos a alejarnos de las formas y echar un vistazo al uso de iframes. El elemento iframe se utiliza para incrustar otra página HTML en un documento web. Como se ve aquí en este terminado Contáctanos página. También podemos incrustar una página de otro proveedor como, Google Maps, como hemos hecho aquí. Puede sonar un poco extraño pero se harán más claros cuando los veamos en acción. Veamos esto en la página contact.html. Voy a añadir un iframe dentro de aquí. Voy a añadir esto justo después de nuestra sección de formularios. Desplazémonos hacia abajo y a la derecha al final de nuestra forma, pero aún dentro de esta sección principal, podemos agregar al elemento iframe. Si le damos eso Guardar, y luego refrescar el navegador dentro de nuestro proyecto. De hecho tenemos que ir a la página Contáctanos, y luego desplázate hacia abajo. Vemos un elemento iframe vacío en la parte inferior. Para que esto muestre algo necesitamos agregar un atributo fuente, igual que lo hicimos al trabajar con imágenes. El atributo fuente apuntará a la página web que queremos incrustar. Esto puede ser tan simple como mostrar en una de nuestras propias páginas web, como los datos del producto. Añadamos la fuente dentro de aquí y vinculemos a nuestro product-detail.html. Daré eso Save y veamos cómo se ve. Ahí está nuestra página de detalles del producto dentro de este iframe o dentro de esta ventana. Ahora podemos desplazarnos hacia arriba, y hacia abajo, y hacia la izquierda, y hacia la derecha. Este iframe es un poco demasiado pequeño para el contenido. También puede usar un atributo height y width para cambiar el tamaño del iframe. Empecemos con el ancho. Vayamos por 800 y una altura de 600. Este valor está en píxeles, lo que es un iframe de 800 por 600 píxeles. Ahora tenemos el iframe un poco más grande en la pantalla ahí. El iframe también se puede utilizar para enlazar a un sitio web externo, pero solo si el propietario del sitio web lo permite. Actualmente, Wikipedia permite esto, y podemos ver escribiendo en la fuente, así que en lugar de productdetail.html, tecleemos la URL completa de https://wikipedia.org, y luego demos a eso un guardado. En el navegador, y podemos ver el sitio web de Wikipedia incrustado. Por el momento, Google no nos permite hacer esto. Vinculemos a google.com, actualicemos, y solo vemos un iframe vacío. Tenemos que tener cuidado con qué sitios web estamos enlazando y asegurarnos de que eso esté permitido. También podemos agregar algún contenido de respaldo si el contenido incrustado no puede mostrarse. Esto se puede agregar entre la etiqueta de apertura y cierre del iframe. Añadamos nuestro tipo p a algún texto. Digamos que tu navegador no es compatible con iframes. Volver a nuestros proyectos, y recargar. No vemos nada diferente porque esto sólo se muestra si los iframes están desactivados, o si se ve en un dispositivo de lectura de pantalla para personas con discapacidad visual. También podemos incrustar contenido de otros sitios web si lo permiten. YouTube es una de las webs que sí nos permite incrustar un iframe en nuestros proyectos. Para ello, podemos ir a youtube.com. Entonces todo lo que necesitamos hacer es encontrar cualquier video que queramos agregar. Hagamos sólo una búsqueda rápida de cualquier cosa. Quiero buscar a Elon Musk y dar click en cualquiera de estos videos. Entonces lo que tenemos que hacer es dar click en Compartir. Si bajas a aquí, hay un botón de compartir. Da click en esto y luego hacemos click en embed. Entonces podemos copiar este iframe que se nos proporciona. Podemos ver el cierre y el iframe de apertura. Copiemos toda esta sección, retrocedamos, y podemos añadir esto en lugar de nuestro iframe actual. Quitemos esto y peguemos en su lugar la versión de YouTube. Dale a eso un Save y ahora vuelve a nuestro proyecto, pulsa Recargar, y ahora tenemos un video incrustado de YouTube y controles de botón de reproducción abajo en la parte inferior. Este iframe también tiene algunos atributos que aún no hemos visto. Si nos desplazamos hacia la derecha, vemos que tenemos Permitir pantalla completa. También hay borde de marco, que tiene un valor de cero o uno. Cero significa que no hay frontera y uno significa agregar una frontera. Esto permite pantalla completa como suena. Si quitamos el atributo y luego pasamos y reproducimos el video, así que haz click en play, y si tratamos de dar click en pantalla completa, podemos ver que la pantalla completa no está disponible. No obstante, los abogados empacando nos permitirán hacer el video a pantalla completa una vez más. Jugamos y ahí vamos así que ahora es un tamaño completo de nuestra pantalla. Ahora sabemos un poco más sobre iframes. En el siguiente video, podemos usarlos para agregar Google Maps a nuestros proyectos. 30. Cómo añadir mapas de Google (formularios, tablas e iFrames): Si pasamos a nuestra página terminada de “Contáctenos”, y nos desplazamos hacia abajo, no tendrás desperdicio. En su versión terminada, tenemos un mapa de ubicación en esta página de “Contáctenos”. Esto es proporcionado por Google, al acceder a la API de Maps. Cubriremos APIs en detalle más adelante en este curso, incluyendo construir las nuestras propias, pero por ahora, solo tienes que saber que la API de Maps permitirá que nuestro sitio web se comunique con la información del mapa de Google. Quizás te estés preguntando qué tiene que ver todo esto con la sección HTML del curso, bueno esta API está incluida dentro de un iframe, además es realmente fácil de implementar. Empecemos por ir a Google, y hagamos una búsqueda de la API de Google Maps, y normalmente para ir a es developers.google.com//maps, así que selecciona esto, y primero vamos a hacer clic en el botón “Comenzar”, que es solo aquí, y luego vayamos hacia abajo. El que necesitamos es la API de inserción de Google Maps, así que vamos a desplazarnos hacia abajo, y esto está bajo la sección de API web, así que haz clic en “Google”, y estamos en Google Maps embed API. Después selecciona mapas, y podemos ver esto integra mapas basados en planos de planta interior a nuestro sitio, así que haz clic en este enlace aquí. Esto es bastante sencillo para empezar. Todo lo que tenemos que hacer al principio, es copiar esta sección iframe, que lo consigues justo aquí. Copia eso, y luego podemos ir a nuestra página contacts.html, y reemplazar nuestra versión de YouTube por una que acabamos de copiar. Ahora nos dirigimos al navegador, y vemos nuestra página de “Contáctenos”, pulsa “Recargar”, y podemos ver un problema. La clave API proporcionada no es válida, por lo que como dice el mensaje de error, necesitamos una clave API. Es así como Google puede hacer un seguimiento de quién está accediendo a sus datos de mapa. Podemos obtener una clave API desde el menú, vuelta en la página web de Google, en el lado izquierdo es una opción para obtener una clave API. Antes de ir más lejos sin embargo, sólo quiero señalar, que sitios web como este, a menudo cambian de diseño con el tiempo, así que si eres versión se ve un poco diferente, suele ser solo un caso de un NavigationLink se ha movido, pero aún así deberías poder encontrar tu camino. Después tenemos que bajar y seleccionar “Obtener una clave”. Si aún no está conectado, necesitamos iniciar sesión en Google, así que voy a iniciar sesión, luego haga clic en “Siguiente”, y luego necesitamos agregar nuestra contraseña. Está bien, bien. Ahora estamos logueados, podemos volver a hacer clic en “obtener una clave API”. En primer lugar hay que crear un proyecto, así que voy a crear un nuevo proyecto. Haga clic en este enlace “Crear nuevo proyecto”, y el nombre de usuario de “Tech Store”, y luego haga clic en “Siguiente”. Esto debería entonces darnos nuestra clave API, cual podemos copiar haciendo clic en este ícono aquí. Pasa a nuestro proyecto, y luego si echamos un vistazo a este iframe, que copiamos antes, necesitamos desplazarnos a través de la sección que dice “clave igual”, y luego donde dice “Tu clave API”, elimina estos tres palabras aquí, y luego pega en la clave API, que acabas de copiar. Dale a eso un guardado, y ahora si volvemos a nuestra página de contacto y actualizamos, ahora deberíamos ver que nos presentan esta imagen de Google Maps, en lugar del mensaje de error. Ahora tendremos una conexión con la API de Google Maps. Ahora solo necesitamos este mapa para estar en la ubicación de nuestro negocio. Si volvemos a la página web de Google, y hago clic en “Hecho”, podemos ver un Quickstart desde el menú, que está justo en la parte superior, así que haz click en esto. Aquí podemos construir nuestro propio mapa personalizado. Podemos buscar lugares o una ciudad. Digamos Nueva York, luego haga clic en eso, y luego desplácese hacia abajo, podemos ver que hay Nueva York apareciendo en el mapa de ahí. También podemos buscar la dirección de Apple, por ejemplo, así que busquemos “loop infinito”, que está justo aquí, y luego desplázate hacia abajo, y podemos ver la nueva ubicación justo aquí. Ya tenemos nuestra clave API para construir este mapa, así que podríamos simplemente pegar esto dentro de aquí, y luego una vez que hayas hecho eso, haces clic en “Hecho”, y luego nos proporcionan un iframe, cual podemos copiar, y esto tiene esta nueva ubicación, que buscamos antes, así que vamos a copiar esto. Entonces si pasamos al proyecto y reemplazamos nuestro iframe por el que acabas de copiar, y luego si volvemos a nuestra página de contactos, pulsa “Refrescar”, y ahora estamos llevados a la dirección que agregamos antes, por lo que por supuesto, necesitarías cambiar esto a la ubicación de tu negocio, y así es como hacemos eso. Ahora hemos integrado con éxito los mapas de Google en nuestro proyecto. Esto es ahora para las secciones HTML de este curso. Bien hecho por llegar tan lejos. Ahora podemos pasar a aprender todo sobre CSS. 31. Qué es CSS (CSS para principiantes): En las secciones HTML que hemos cubierto hasta el momento, nos hemos referido a la página web terminada para mostrar lo que vamos a estar agregando a nuestros proyectos. este momento, nuestro propio proyecto que hemos estado creando contiene exactamente el mismo contenido HTML que una versión terminada. Pero como sabemos se ven muy diferentes. La diferencia es el CSS. CSS es sinónimo de Hojas de Estilo en Cascada. Se trata de un lenguaje de hoja de estilo utilizado para describir el aspecto y formato de un documento escrito en un lenguaje de marcado como el HTML. Esta es una descripción formal, pero se puede pensar en CSS como una forma de estilizar, posicionar y colocar elementos en nuestros sitios web. Podemos usarlo para agregar colores, bordes, alineación, tamaño del texto, colores de fondo, y mucho más. uso de CSS mantiene nuestro estilo separado del contenido HTML. Esta separación mantiene todos los archivos más pequeños y más mantenibles. Todavía podemos mezclar estilos en nuestro archivo HTML, y veremos algunas formas de hacerlo. Bueno, cualquier cosa que no sea un sitio web pequeño generalmente tendrá HTML en un archivo, con la extensión a.html, y luego CSS en un archivo separado con la extensión a.css. Tener un archivo CSS separado también permite reutilizar los mismos estilos a través de múltiples archivos HTML. CSS3 es la última versión. Nos permite hacer aún más con nuevas características como transformaciones, animaciones, degradados, imágenes corporales, esquinas redondeadas, y consultas de medios. Por supuesto cubriremos estos en más detalles pronto. Entonces, ¿qué aspecto tiene CSS? Bueno, en la pantalla aquí hay algunos ejemplos. En primer lugar, podemos seleccionar un elemento por su nombre, como h1. Hay muchas formas de seleccionar un elemento. Verá estos pronto también. Después agregamos algunas llaves para contener las reglas de estilo que queremos aplicar a este h1. Igual que con el encabezado justo debajo, este encabezado tendrá un ancho de 70 por ciento con un fondo blanco. Ahora sabemos un poco de lo que es CSS. Ahora pasemos a automatizar nuestros proyectos. 32. Estilos en línea y agregado de color (CSS para principiantes): Voy a empezar por mirar una forma de agregar estilos, que es agregarlos en línea. En línea básicamente significa que los agregamos dentro de cada elemento HTML. Esta versión final tiene un color de fondo gris para el encabezado y también el pie de página hacia abajo en la parte inferior. Empecemos agregando un color de fondo al index.html. Vamos al elemento de cabeza, index.html, vamos a la parte superior de la página. Aquí tenemos nuestros elementos de cabecera. Alpha puede usar los atributos de estilo para agregar estilo en línea dentro de aquí. Después podemos seleccionar la propiedad de fondo para agregar un color, agregar dos puntos. Podemos usar un nombre de refrigeradores para la mayoría de los valores, como rojo, azul o amarillo. Empecemos con el rojo. Cada propiedad CSS necesita terminar con un punto y coma y darnos guardar. A continuación, vuelva a cargar el navegador, vaya al index.html. Hay una mirada bastante terrible en el encabezado rojo, pero la propiedad estrella ahora se ha hecho efectiva. También podemos usar colores en otros formatos, lugar de simplemente escribir el nombre, como RGBA y hex. Si pasamos a Google y si buscas un selector de color, es varias herramientas online que podemos usar para un recolector de color, voy a usar la versión W3Schools, que es el enlace superior de aquí. Aquí podemos seleccionar un color de esta imagen de la izquierda. Dejemos cualquier color por ahora. Vayamos por el azul. Si nos desplazamos hacia abajo, podemos ver que aquí se trata de un formatos diferentes. El primero tiene un hash y este es un valor hexágono. Hex significa color hexadecimal y tiene un prefijo hash, está compuesto por seis dígitos. El primero dos es rojo, el segundo dos es verde y luego finalmente los dos valores azules al final. La combinación de color hexadecimal que he elegido para el encabezado es 333A40. Vamos a repasar y reemplazar este valor rojo. Añadamos el hash, luego el valor de 333A40 y nos demos guardar. Echemos un vistazo a esto. Ahora tengo el mismo color oscuro que se ve en la versión final justo aquí. Si volvemos a la página web de W3Schools y luego actualizamos, esto también un valor RGB justo debajo de los corchetes agregamos el valor de rojo, verde, y luego azul como un número que va desde cero hasta 255, siendo cero el menos intenso y 255 siendo los más intensos. Si queríamos un color rojo, igual que vemos aquí, vemos el primer valor de los rojos como 255, cero para el verde y también cero para el azul, lo cual tiene sentido. Entonces por debajo el color se vuelve más naranja. Este tercero por ejemplo, vemos que podemos agregar más verde. 255 para el rojo, 128 para el verde y cero para el azul. También es posible que veas un cuarto valor también, que se llama RGBA. Si también hacemos una búsqueda en Google de RGBA. Nuevamente, voy a ir a este sitio web de W3Schools, para este enlace aquí. Aquí podemos ver el valor RGBA y los cuatro valores dentro de los corchetes también, esto es igual que un color RGB, pero con un cuarto valor de alfa. El alfa se utiliza para establecer la opacidad y es un valor entre cero y uno. Zero Es totalmente transparente y uno es un color sólido. Si volvemos a nuestra página index.html, el color de texto predeterminado que vemos en la página aquí es este color negro oscuro. Este color del texto también se puede cambiar usando la propiedad de color como esta. Nosotros justo después del punto y coma, también podemos agregar el color que se aplica al texto. Vamos a los cambios para ser blancos, y también el punto y coma al final. Esto también puede ser un nombre de columna y RGBA o valor hexadecimal. Ambos lo voy a mantener simple como blanco y luego refrescar. Ahora tenemos este color blanco en la parte superior de la cabecera. Notarás que estos enlaces de navegación libre y la luz, esto se debe a que estos son enlaces. Tenemos que apuntar al elemento A para que esto surta efecto. El mismo color de fondo también se puede aplicar a la 42. Todo lo que necesitamos hacer es tomar estos atributos de estilo y luego copiar, y nos desplazamos hacia abajo hasta la parte inferior de la página, solo necesitamos agregar esto dentro de la etiqueta de pie de página de apertura. Entonces si bajamos al fondo y damos la vuelta al refresco, ahora obtenemos los mismos colores aplicados al pie de página. Es así como podemos agregar estilos en línea. Pueden ser útiles para agregar rápidamente un estilo a un elemento en particular. Pero probablemente ya puedas ver algunas desventajas ya. Tal como incluso en esta etapa temprana ya estamos duplicando el mismo código, cual no suele ser una buena idea. Además, pero un tiempo en el que agregar estilos a cada elemento de su página puede comenzar a verse realmente desordenado. Otra gran desventaja es que si decidimos cambiar algo, como un color de fuente en una fecha posterior, entonces tendremos que mirar a través de cada elemento de texto en cada página HTML y cambiarlos todos individualmente. Por suerte, hay algunos mejores enfoques, y veremos uno de ellos en el próximo video. 33. Hojas de estilo internas (CSS para principiantes): El siguiente tipo de hoja de estilo que podemos agregar son hojas de estilo internas. Esta es una forma de agregar todos los estilos que queremos aplicar a una sola página web. Para ello, podemos añadir las etiquetas de estilo en la sección del cabezal. Entonces vamos a desplazarnos hasta la parte superior de nuestra página de índice, y luego justo después del título, vamos a agregar las etiquetas de estilo. Añadamos la etiqueta de apertura y cierre dentro de esta sección de cabeza. Entonces al igual que hemos visto en las diapositivas al inicio de la sección, podemos entonces agregar el nombre de los elementos a los que queremos que se apliquen los estilos. Voy a empezar con esta zona de cabecera, seguida de las llaves de apertura y cierre. Dentro de estos tirantes rizados, podemos agregar los mismos estilos que antes. Entonces agregamos el fondo, el colon, y teníamos el valor del código Hex de 333a40. Al usar estos estilos también tenemos que terminar cada propiedad con el punto y coma. Entonces también tenemos el color que se aplica al texto que era blanco. Entonces si bajamos y quitamos los estilos en línea que ya están antes a los elementos de cabeza, a medida que mueves eso. Entonces también en lugar de duplicar códigos, estos estilos pueden aplicarse a múltiples elementos separándolos con una coma, así que sepárelo con una coma. También podemos agregar el pie de página dentro de ahí también. Entonces por supuesto tenemos que bajar y quitar estos estilos del área de pie de página. Justo abajo en la parte inferior, vamos a quitar esta sección de estilo en línea así. Entonces dale a eso un guardado, y luego si pasamos al navegador y luego actualizamos, podemos ver que los estilos que se añadieron son exactamente los mismos que antes, pero esta vez los tenemos en una sección en la parte superior de la cabeza. También podemos agregar un poco de estilo a los elementos HTML raíz y también a la sección de cuerpo también. De vuelta en las etiquetas de estilo en la parte superior, una vez más con los elementos HTML, vamos a añadir un color de fondo. Agregar valor en código hexadecimal de f7f7f7. He agregado estos elementos HTML en la parte superior ya que es un elemento raíz. Entonces dale a eso un guardar luego refrescar, y esto es pequeños pero sutiles fondos de diferencia. Ahora con el cuerpo, que voy a añadir justo después del HTML. Añadamos un fondo de blanco. Destaca con este fondo de HTML. El ancho máximo de la sección de cuerpo, voy a cambiar esto para que sea de 1,000 píxeles, y luego queremos agregar margen cero y luego auto. Margen es el valor del espaciado que agregamos fuera de los elementos. El primer valor de cero representa no espaciado en la parte superior e inferior, y el segundo valor es para la izquierda y la derecha. Envía el valor a auto, espaciado medio se aplicará automáticamente por igual a ambos lados, centrando efectivamente el cuerpo hasta el centro de la página. Este es un truco común y aprenderemos más sobre marging en un video posterior. No te preocupes si por el momento no tiene sentido. Probablemente puedas ver esto en acción mejor si guardamos y luego actualizamos. Se puede ver de inmediato que el cuerpo ahora es un poco más estrecho. Se puede ver este color HTML que agregamos en el fondo, es ligeramente diferente a los blancos que se añadieron al cuerpo. El tramo del cuerpo es esta sección de 1,000 píxeles de ancho, que va de este borde izquierdo aquí al lado derecho aquí. El cuerpo ahora está restringido a 1,000 píxeles de ancho y centrado en el medio porque agregamos margen igual al lado izquierdo y derecho. Cualquier espacio extra que esté disponible después de este ancho de 1,000 píxeles se aplicará automáticamente a la izquierda y también a la derecha. Esto se debe a que hemos agregado una hoja de estilo interna a esta página index.html. hojas de estilo internas funcionan muy bien, pero solo hay útiles para peinar esta página que ya tienes que hacerlo. Por ejemplo, si seleccionamos el enlace Contacto del menú de la parte superior, que es este tercero de aquí haga clic en eso, y el estilo en el que hemos agregado no surte efecto en esta página. Este a menudo no es el comportamiento que queremos porque queremos un estilo consistente para los colores y también esta sección de encabezado y pie de página también. Nuevamente esto es algo que se puede resolver fácilmente usando nuestro tercer y último tipo de hojas de estilo, que vamos a cubrir a continuación. 34. Hojas de estilo externas (CSS para principiantes): Hasta ahora hemos cubierto la adición de estilos en línea y también el uso de hojas de estilo internas. El tercer y último tipo es un hojas de estilo externo. Vemos en el último video, que una limitación de usar hojas de estilo internas, es que solo aplican a una página web. No queremos repetir los estilos de encabezado y pie de página para cada página. Puedes añadirlas a unas hojas de estilo externas en lugar de aplicarlas únicamente a nuestra página de índice, cual ves nuestra presencia. Podemos hacerlo creando un nuevo archivo dentro de nuestra carpeta del proyecto. Voy a dar clic en este ícono aquí para abrir la barra lateral. Voy a crear un nuevo archivo haciendo clic en este ícono aquí. Voy a llamar a esto “styles.css” Los nombres de [inaudible], pero debe tener la extensión “.css” y luego presionar “Enter”. Simplemente voy a guardar esto en las raíces de nuestra carpeta de proyectos. Junto con este índice y todas las demás páginas HTML. También podemos agregar una carpeta CSS si tienes múltiples archivos de hoja de estilo, entonces podemos pasar a la página de índice y estilos que ya tienes. Entonces vamos a desplazarnos hacia abajo y todo desde el encabezado y pie de página, hasta el HTML. Entonces recorta esto. Pero solo voy a dejar estas etiquetas de estilo en su lugar y luego pegarlas en el archivo styles.css que acabamos de crear, pulsa “guardar”. Si pasamos al navegador y luego pulsamos “refrescar”, vemos que ahora no se aplica ningún estilo. Esto se debe a que necesitamos vincular este nuevo archivo CSS a los archivos HTML a los que queremos que se aplique. Entonces sigamos adelante y hagamos esto ahora. Encima en el index.html, podemos quitar las etiquetas de estilo, y en su lugar voy a añadir los elementos de enlace. El enlace no tiene etiqueta de cierre y podemos agregar dos atributos. El primero es rel, y agregamos hojas de estilo iguales. Rel igual hoja de estilo describe la relación de los documentos vinculados con el chromo. Estamos vinculando las hojas de estilo. Entonces el atributo href, con el que deberías estar familiarizado desde cuando miramos enlaces. Esta es la ruta al archivo CSS que acabas de crear. Misses en el mismo directorio es la página de índice. Por lo que sólo podemos agregar el nombre de styles.css. Si tuviéramos en un archivo CSS, necesitaríamos agregar CSS como ruta de archivo antes del archivo. Entonces, solo quitemos eso y nos demos ahorrar. Ahora refrescante debe introducir nuestros estilos de nuevo en la página. Todavía debemos ver Si subimos a más de páginas como el contacto, que ninguno de estos estilos todavía se aplica. Podemos cambiar esto vinculando a todas las páginas usando el mismo enlace aquí. Entonces solo voy a copiar esto y luego agregar esto al contact.html. ¿ Va a estar justo en la parte superior también? ¿ Justo después del título? Entonces lo mismo para el detalle del producto. Justo en la parte superior por debajo del título. Pega esto en. Ahora si vamos a [inaudible] sobre páginas HTML en el navegador. Por lo que tenemos nuestra página de inicio. intentemos contactar página y nuestros estilos siguen aplicándose ahí. No se ve un poco más pequeño si solo acercamos y con el navegador ahí. Por lo que la página de inicio está funcionando todo la página de contacto con nosotros, y aún tendremos los estilos para el encabezado y el pie de página. Por último, volvamos a toda la página y seleccionemos los datos del producto. Nuestros estilos aplicados a esta página también. Es así como podemos agregar hojas de estilo externas a nuestros proyectos. A continuación veremos en las fuentes de Google. 35. Fuentes (CSS para principiantes): Ahora hemos cubierto cómo aplicar hojas de estilo de diferentes maneras. Ahora, pasemos a usar fuentes. Agregar tipos de fuentes a nuestros sitios web es realmente importante para definir el aspecto y la sensación. Si echamos un vistazo aquí, estoy más en la página web de W3Schools en una sección llamada fuentes CSS. Si echamos un vistazo aquí, hay dos tipos de fuentes principales. Uno llamado Serif y otro llamado Sans-serif. Las fuentes Sans-Serif de la izquierda son mucho más simples y tienen bordes cuadrados rectos. Las fuentes Serif por otro lado tienen estos detalles extra en el borde el cual puedes ver resaltado en rojo justo aquí. Un poco más abajo podemos ver que hay dos tipos de familias de fuentes. A la izquierda de la mesa vemos tenemos a Serif, tenemos Sans-Serif y también Monospace. Todos estos son ejemplos de una familia de fuentes genérica. Cada uno de estos grupos genéricos también tiene muchas familias de fuentes. Aquí vemos en la parte superior tenemos Times New Roman y Georgia y estos son ambos tipos de la familia Serif. Entonces a continuación tenemos Arial y Verdana que son familias de fuentes con un tipo de Sans-Serif. Generalmente queremos agregar tanto la familia de fuentes a nuestro CSS junto con una familia genérica como Sans-Serif que actúa como alternativa si nuestra primera opción no es compatible con el navegador. Para evitar fuentes que no se soportan comúnmente, podemos usar lo que se denomina fuentes web seguras. Simplemente vamos a ir a Google y hacer una búsqueda rápida de estas fuentes seguras para la web. Ahora, vayamos a la página web de W3Schools justo aquí. Tenemos las versiones Serif y desplazándonos más abajo tenemos las fuentes Sans-Serif también. Esto tiene una lista de combinaciones de fuentes comunes las cuales son salvajemente manchadas. La mayoría tiene una pila de tres fuentes como puedes ver aquí. Tenemos nuestra primera opción como ejemplo, tenemos a Arial. Nuestra segunda opción de Helvetica y esto se usa si el Arial no está soportado. Entonces al final tenemos una familia de fuentes genérica como Sans o Sans-Serif. Esto se utiliza si ninguno de los demás está disponible o soportado. Nombres similares de fuentes aquí con espacios entre están rodeados entre comillas, igual que puedes ver aquí. Esto se recomienda pero no se requiere. Voy a seguir adelante y copiar una de estas fuentes, pilas. Digamos Comic Sans. Copiemos esta sección de la página web. Entonces volvamos a nuestro archivo styles.css y podemos agregar una familia de fuentes a nuestro proyecto. Cerremos la barra lateral y abrimos el styles.css. Podemos agregar esto al cuerpo ya que todo el contenido HTML está dentro de nuestro texto corporal. Bajemos al cuerpo y sumamos nuestra familia de fuentes y luego podríamos pegar en nuestros tres valores los cuales acabamos de copiar antes con un punto y coma al final. Guarda eso y luego vuelve al proyecto en el navegador y luego refresca y puedes ver todo el tipo de fuente ha cambiado para ser esta versión de Comic. Otra forma de incluir fuentes es incluir una biblioteca de fuentes como las fuentes de Google. Hagamos una búsqueda de fuentes de Google y lo que necesitamos es fonts.google.com. Abramos esto. Podemos ver de inmediato que hay muchas fuentes diferentes para elegir. Incluso podemos filtrar hacia abajo en el lado derecho por los diferentes tipos como Serif o Sans-Serif. Incluso puedes mirar a través y elegir una de estas fuentes en la pantalla de inicio si lo prefieres. Yo quiero hacer una búsqueda y elegir la que se llama Barlow. Entonces debajo de la barra de búsqueda y ésta es la que voy a usar del lado izquierdo. Si queremos agregar esto solo hacemos clic en el símbolo más aquí. Después podemos bajar hasta el fondo y ampliar la familia seleccionada. Es así como obtenemos las instrucciones de cómo agregar esto a nuestros proyectos. primer lugar, en la parte superior tenemos un enlace que es igual al enlace que usamos en nuestras propias hojas de estilo, pero esta vez vincula a las hojas de estilo que Google ha proporcionado. Copiemos este enlace, pasemos al proyecto y en el índice o HTML, podemos agregar esto justo debajo de nuestro título. Este enlace también necesita ser agregado a todas las páginas HTML también, así que vamos a añadirlo al detalle del producto justo debajo del título y también a la página Contáctenos. Asegúrate de que los guardamos. También es importante la colocación de este expediente. Deberíamos tener nuestro propio archivo CSS personalizado último. Esto asegura que cualquier cambio que realice como estilo personalizado se cargue en último lugar y anulará cualquiera de los valores predeterminados. Veremos esto con más detalle más adelante aunque, pero de nuevo a las fuentes de Google por ahora. A continuación necesitamos bajar y copiar la familia de fuentes. Entonces copia esta línea del CSS y luego vuelve a nuestro styles.css y en lugar de una sección que agregamos antes, podemos pegar en nuestra nueva versión de Barlow y hacer clic en ese “Guardar” de nuevo al proyecto y luego refrescar. Ahora, todas las fuentes han entrado en vigor en la página y deberíamos verlas siendo consistentes a través de todas nuestras diferentes páginas. Todos estos formularios se ven visiblemente diferentes, podemos confirmar si está funcionando yendo a las herramientas de desarrollo. Haga clic derecho en “Inspeccionar” y luego sobre el lado derecho debajo del cuerpo, podemos ver a Barlow que usted eligió. Si desmarcamos esto, podemos ver un cambio con la familia de fuentes en la pantalla ya que se remonta al valor predeterminado. Podemos ver claramente que estas Fuentes de Google ya están funcionando. Ahora te veré en el siguiente video, echaremos un vistazo a clases e identificaciones. 36. Clases e id (CSS para principiantes): Clases e identificaciones es algo que usará todo el tiempo a la hora de construir sitios web. Ellos son forma de seleccionar o de enganchar ciertos elementos en nuestra página para que podamos aplicarle nuestro CSS a ella. También los usaremos más adelante en el curso para, al trabajar con JavaScript, empecemos primero con ID. Podemos agregar un atributo ID a cualquier elemento entonces target es elemento usando CSS. Si pasamos a la página contact.html, ya hemos usado ID en esta sección, así que echando un vistazo al nombre en la parte superior y si te desplazas a la derecha, por aquí tenemos un nombre de identificación. También teníamos una identificación de correo electrónico y mensaje también. Algo importante a tener en cuenta con los identificadores es que deben ser únicos. Solo debemos usar un nombre de identificación en cada página. Después hacemos este ID en el archivo CSS con un prefijo hash, para agregar algún estilo a este nombre pasaremos al style.css, y luego aquí abajo, usando un prefijo hash, podríamos apuntar al nombre. Entonces podríamos hacer cosas como agregar un color de fondo. Cambiemos el fondo para que sea rojo, y luego nos demos guardar. Pasado a nuestro navegador web, y necesitamos ir a la página de contacto con nosotros. Desplazándose hacia abajo y ahora tenemos un fondo rojo para esta sección de nombre. Es importante saber que las identificaciones no deben comenzar con un número dos. Si fuéramos a ir al CSS y luego agregar un número como este, el editor de texto lo convierte en rojo para señalar un problema. Bajemos salvando. Se trata de un ID que utilizamos para seleccionar un solo elemento en una página, pero que si quisiéramos que los mismos estilos se aplicaran a múltiples áreas, como nuestros productos. Para este caso, podemos usar una clase, agregando el mismo nombre de clase a todas nuestras etiquetas productivas nos permitirá escribir algunos estilos que se aplicarán a todos ellos. Si vamos al index.html, y luego localizará nuestro primer producto, que es el controlador. Para el div circundante, que está aquí justo encima del enlace, podemos agregar un atributo de clase de producto. Ya que podemos usar esto más de una vez, vamos a copiar esto y añadirlo a los seis productos. El segundo, el tercero, el cuarto y si tienes más de seis sumarlos a todos y cada uno, y eso son los seis, así que nos da ahorrar. También contamos con un producto dentro del detalle del producto página dos. Podemos agregar esto a nuestro producto dentro de ahí. Desplácese hacia abajo hasta la sección principal, y nuevamente dentro del div de apertura para el producto. Esto asegurará que los mismos estilos que aplicamos en el CSS también se apliquen a este producto. Esta vez en lugar del prefijo hash y si vamos al CSS, usamos un punto para indicar que estamos apuntando a una clase. Entrará entonces el nombre de los productos, y ahora podemos agregar algunos estilos dentro de estas llaves. Esta clase, junto con el ID que usamos antes y también estos nombres de elementos justo arriba se llaman todos selectores. También pequeños avanzados les gusta estos dos, y los echaremos un vistazo más adelante en el curso. Adelante y agreguemos un borde a nuestro productivo de un píxel de ancho, una línea sólida, y el color del gris. Entonces podemos establecer el ancho de cada producto para que sea de 200 píxeles de ancho, el punto y coma y veamos cómo se mira esto en la página de índice. Da nuestra recarga y bajamos a productos de oficina, podemos ver la frontera si miramos aquí abajo y también esto luce unos 200 pixeles de ancho. No obstante, esta imagen de arriba es demasiado grande para caber dentro de este contenedor. las otras pocas formas en las que puedes hacer esto, podríamos establecer la propiedad de desbordamiento para que se oculte, así como eso y guardar eso y luego recargar. Ahora podemos ver que la imagen está dentro del contenedor de 200 píxeles. Esto no es ideal porque esto esconde el resto de la imagen, que no se ve demasiado grande. Una mejor solución para esto será establecer la propiedad de ancho máximo en lugar del desbordamiento, eliminemos este desbordamiento, y luego debajo de esto podemos apuntar al selector de imagen. Después use la propiedad CSS max-width, responda esto sería un 100 por ciento, dé ese ahorro y luego vuelva a cargar. Esto asegura que la imagen no se estire más allá del contenedor circundante. Eso se ve mucho mejor. Esto es más como lo que queremos. No obstante, el producto sigue apilado uno encima del otro, porque mencionamos anteriormente, elementos div de nivel de bloque y comienzan en una nueva línea. Pero, esto está bien por ahora y por el próximo pasaremos al margen y al relleno. 37. Margen y relleno (CSS para principiantes): El margen y el relleno son propiedades CSS realmente importantes para entender. Ambos son básicamente una forma de crear espacio. Si miramos este diagrama aquí, imagínense que este fue uno de nuestros productos. Probablemente querremos que aparezca algo como esto, con un poco de espacio a su alrededor, inválido aunque así es como aparecería por defecto. Colocado en la esquina superior sin espaciado. Esto lo vemos en acción en nuestro proyecto actual donde el valor predeterminado del producto está en la parte superior izquierda del espacio disponible. Para solucionar esto, podemos aplicar margen al exterior de un elemento para crear algún espaciado. Se puede aplicar el margen para que sea el mismo en cada lado, o se puede agregar una cantidad diferente en cada lado si se requiere. Sucede lo mismo cuando agregamos elementos dentro de esta productiva. El elemento, como esta imagen o incluso cualquier texto, se coloca en la esquina superior. Al igual que antes, quizá no queramos que la imagen esté atada a la esquina superior. Para esta situación, tenemos lo que se llama relleno. El relleno también agrega espaciado, pero esta vez, dentro de los elementos. El margen está fuera de los elementos y el relleno se aplica al interior de los elementos. El borde verde más oscuro resalta lo que realmente hace el relleno. Actúa como un cojín, manteniendo las cosas alejadas de los lados. También podemos establecer esto por igual en todos los lados o tener valores diferentes en cada lado. Como vemos aquí, tanto el margen como el relleno se pueden establecer para cada lado individualmente estableciendo los valores superior, derecho, inferior e izquierdo. Por suerte, también hay algunas versiones abreviadas. Echando un vistazo a estos dos ejemplos de la izquierda, podemos establecer margen o relleno con cuatro valores. Estos cuatro valores son en el sentido de las agujas del reloj, comenzando por la parte superior. Entonces arriba, derecha, abajo y luego izquierda. Aquí tenemos tanto los valores superior como inferior establecidos en diez píxeles, luego los valores izquierdo y derecho, los mismos dos son cinco píxeles. Para este caso, también podemos mostrar esto aún más. Como vemos en el lado derecho. El primer valor está en la parte superior e inferior, y el segundo es a la izquierda y a la derecha. Ya lo hemos visto en nuestro proyecto cuando centramos nuestro sitio web usando margin zero auto. Zero le dice a los navegadores que no agreguen ningún margen a la parte superior e inferior de la sección del cuerpo. Entonces el espacio adicional de izquierda y derecha se puede dividir por igual, dejando la sección del cuerpo centrada en la página. Basta de esta teoría, vamos a darle a esto un ir dentro de nuestro proyecto. Empezando por el margen. Si pasamos al styles.css y hasta el producto, podemos agregar algún margen a esta sección de productos de cinco píxeles. Debido a que sólo hemos agregado un valor, esto se aplicará a todos los lados del producto. Veamos esto con una recarga. Ahora podemos ver cinco píxeles de espacio y esto ha aparecido alrededor de todos los lados del producto. Entonces sigue adelante y agrega algo de relleno también, también un cinco píxeles, y luego refresca. Ahora tenemos un cojín de cinco píxeles en el interior del div. Además, otra cosa importante a tener en cuenta es los valores por defecto de margen y relleno a menudo aplicados por un navegador también. Esto significa que a veces puede querer restablecer los valores de nuevo a cero y la lista desordenada es común, que a menudo se aplica. Pasemos al CSS, y podemos restablecer estos valores. Si vamos justo debajo del encabezado y pie de página, etiquetemos en la UL. Entonces podríamos volver a ajustar el margen para que sea cero. Si cuidamos esto cuando nos refrescamos, vemos que todo se mueve hacia arriba ya que se eliminó un margen por defecto. También podemos hacer lo mismo para eliminar cualquier relleno por defecto. Nuevamente, volver a la lista desordenada. Entonces podemos restablecer el relleno a cero. Si vigilamos de cerca para mí cuando nos refrescamos, vemos ahora todas las listas desordenadas se mueven hacia el lado izquierdo. Esto es algo a tener en cuenta si te preguntas por qué algo se ve un poco diferente de lo esperado debido a que el navegador agrega algunos valores predeterminados. Además, solo para hacer las cosas aún más confusas, los diferentes navegadores suelen tener valores diferentes también. No obstante, unos pocos recursos para ayudarnos con los valores predeterminados del navegador. Si pasamos a Google y luego hacemos una búsqueda de restablecimientos de CSS. El enlace superior que quiero es Meyerweb. Haga clic en esto. Esta es una hojas de estilo. Si nos desplazamos hacia abajo, podemos ver el código justo aquí. Podemos usar esto dentro de nuestro proyecto para eliminar eficazmente cualquier estilo predeterminado proporcionado por los navegadores. Esta cosa nos da un lienzo en blanco para empezar. Alternativamente, podemos utilizar otro archivo CSS llamado Normalize. Nuevamente, hagamos una búsqueda en Google de CSS Normalize. Su enlace superior es lo que necesito. Haga clic en esto. Normalizar el trabajo ligeramente diferente para reiniciarlo. En lugar de eliminar cualquier defecto del navegador, usted proporciona estilos para hacer que nuestros sitios web muestren de manera más consistente a través de navegadores dispuestos. Simplemente decides ahora sin embargo, y algo que te puede resultar útil para incluir esto en nuestros proyectos. Todo lo que necesitas hacer es descargar el archivo y añadirlo a nuestros proyectos, igual que lo hemos hecho con nuestra propia hoja de estilo personalizada. Esto es ahora por margen y relleno. A continuación nos vamos a sumergir en el uso de diferentes tipos de visualización. 38. Block, inline e inline-block (CSS para principiantes): Ya discutimos brevemente los más elementos que caen ya sea a ser elementos en línea o a nivel de bloque. Vemos en la pantalla aquí algunos elementos de imagen en línea. Esto tiene el efecto de que cada elemento esté en la misma línea si va a caber. Hay una cosa sin embargo a tener en cuenta al usar elementos en línea, podemos agregar margen y relleno a la izquierda y a la derecha, como vemos aquí, pero no podemos agregarlo a la parte superior e inferior. Esto se debe a que el contenido agregado con elementos en línea está destinado a fluir a través de la página y luego a la siguiente línea. Agregar cualquier altura extra interrumpiría este flujo. También, estamos habilitados para establecer el ancho y la altura también. Los elementos a nivel de bloque, por otro lado, comienzan en nueva línea y ocupan todo el ancho disponible, como un div o texto cuando se utiliza el elemento p. También nos permiten establecer cualquier margen y relleno también sin ninguna restricción, a diferencia de lo que acabamos de ver con elementos en línea. Hay una manera aunque de tener este comportamiento en línea al tiempo que también se puede establecer el margen y el relleno y esto es establecer el elemento para que sea inline-block. El bloque en línea se usa comúnmente en las navegaciones. Por defecto, enumerar elementos o elementos a nivel de bloque. Alguien hará una lista que se apilará uno encima del otro. Comúnmente vemos enlaces de navegación como inline o inline-block, como vemos aquí. bloque en línea permite que los elementos fluyan a través de la página, pero aún así nos da la flexibilidad para controlar los valores de relleno y margen. No podemos cambiar ningún tipo de visualización predeterminado de elementos mediante el uso de la propiedad de visualización CSS para anularlo. Vayamos a darle una oportunidad a esto ahora. Encima en el CSS empezando por el elemento li. Basta con soplar esta lista desordenada dentro de la li y luego configurar el tipo de visualización para que esté en línea. Dale a eso un guardar y volver a nuestro proyecto, refresca, y ahora nuestros enlaces aparecen en línea a través de la página. Esto funciona como se pretendía, los elementos de la lista de encabezados están en línea, ponen objetivo en todos los elementos li como este, también incluyen estos elementos de la lista de barras laterales también. Si solo quieres apuntar a estos ítems de la lista de encabezados, podemos ser más específicos. Si vamos a pasar al CSS, en lugar de simplemente apuntar al li, podemos agregar encabezado, li, darle a eso un guardado, y en el navegador y refrescar. Ahora podemos ver que esto sólo selecciona cualquier elemento de lista que esté dentro del encabezado, la barra lateral están intactos. Podemos ir aún más lejos con esta sección de encabezado también, al hacer el título del sitio y también estos enlaces de navegación en línea también. De hecho, podemos hacer estos bloques en línea, por lo que aún podemos controlar la altura también. Si se establecen estos como bloques en línea, se asegurará de que este título aparezca en el lado izquierdo. Después, sobre el lado derecho, obtendremos los enlaces de navegación, que está rodeado en el elemento nav, así que vuelve al CSS. Podemos apuntar a este título del sitio. Tenemos cabecera, h1, luego separados por coma. También podemos apuntar al elemento nav también. Establezca la pantalla, esta vez para que sea inline-block, y luego actualice. Ahora tengo la navegación y el título del sitio alineando a través del encabezado. El bloque en línea también es una buena manera de alinear los productos también. Vamos a darle a esto un ir dentro del producto div aquí. Cambiemos de nuevo el tipo de visualización para que sea inline-block, en el navegador, y dentro de la página de índice, vamos a desplazarnos hacia abajo. Ahora tenemos nuestros productos alineados a lo largo de la página 2. Esta propiedad de bloque en línea incluso se puede utilizar para tener la barra lateral, que actualmente está aquí, y también estos productos lado a lado. Recuerda que la barra lateral estaba en los elementos a un lado y todos estos productos estaban contenidos en la sección principal. Pasemos primero al CSS y podemos establecer el ancho de la sección principal y de la sección aparte. Voy a añadir esto justo debajo de la sección de cabecera, h1, y nav. Comencemos primero con la sección principal y establecemos el ancho en 680 píxeles. Entonces podemos asegurarnos de que la barra lateral también se ajuste a través de la fila estableciendo el ancho a un lado en 270 píxeles. He seleccionado estos dos valores aquí. Cuando se combinan, ambos son menores a los 1,000 píxeles de ancho del cuerpo, que teníamos antes. Por lo tanto, poner el aparte y principal a estos tamaños se asegurará de que ambos encajen en toda la página y también permitan algún margen y relleno también. Veamos cómo se ve esto, recargar y ahora podemos ver que la barra lateral es un poco más ancha. Si echamos un vistazo al ancho de esta línea aquí y también la sección de productos se ha restringido a esta parte aquí. Ahora vamos a repasar y configurar el tipo de visualización para que sea inline-block. Primero el principal, tipo de visualización de bloque en línea, y luego también para la barra lateral. Entonces ojalá, si guardamos esto y ahora nos pasamos, ahora podemos ver esto lado a lado ya que el lado y la sección principal son ambos inline-block. Las cosas están empezando a verse mejor ahora, pero los elementos de la barra lateral aquí abajo están en la parte inferior. Para solucionar esto cuando se trabaja con elementos en línea, o incluso inline-block, que actúa mucho como en línea, tenemos acceso a una propiedad CSS llamada alineación vertical. Si pasamos a la barra lateral, justo debajo de la pantalla, también podemos establecer la alineación vertical y colocar el texto en la parte superior. Esperemos que ahora deba empujar nuestro texto a la parte superior de la barra lateral, cosa que sí. Esta propiedad de alineación vertical se puede utilizar para alinear línea o elementos dentro de las celdas de la tabla. Antes mencionamos en las diapositivas que al usar elementos en línea, no podemos agregar margen y relleno a la izquierda y a la derecha, pero podemos enviarlo a la parte superior e inferior. Esto se puede ver con nuestros enlaces de productos de Más Info y Agregar al carrito. Adelante y agreguemos un poco de relleno para ver qué pasa. En primer lugar, tenemos que darles una clase sobre en la página de índice. Voy a darle a esto una clase de botón. En primer lugar, vayamos al producto muy superior y busquemos estos dos enlaces. Entonces podemos seguir adelante y agregar un nombre de clase de botón, por lo que la clase es igual a botón. Entonces necesitamos agregar esto a todo nuestro producto, así que voy a copiar esto y añadirlo al segundo enlace también. Después baje a nuestro segundo producto y podemos agregarlo a todos estos para mantener este estilo consistente. Esos son nuestros cuatro productos. Los cuatro productos y el último también. Podemos usar esta clase de botón sobre en la hoja de estilo. Abajo en la parte inferior, número de clases usa un punto, pon el nombre de un botón, algún relleno de 10 píxeles de la fuente, guarda eso, y ahora en la página de índice y refresca. Podemos ver que el relleno ha añadido algo de espacio entre los botones, pero no hay altura extra. Recuerda solo agregamos un valor de 10 píxeles. Por lo general esto se aplicaría a los cuatro lados, pero sólo vemos esto a la izquierda y a la derecha. Esto se debe a que como ya sabemos, no podemos modificar la altura con margen y relleno en los elementos en línea, pero podemos desbloquear y bloquear en línea. Por lo tanto, si pasamos al CSS y cambiamos el tipo de visualización del botón para que sea inline-block, podemos ver qué efecto tiene esto en el navegador. En cuanto nos refrescamos, ahora vemos que se le agrega algo de altura extra a cada uno de estos botones. Aquí hemos mirado la propiedad de exhibición. Como puedes ver, es realmente importante a la hora de diseñar nuestro sitio web. Puede parecer un poco complicado de entender al principio, pero se puede ver con este ejemplo lo efectivo que es, incluso simplemente agregando unas pocas líneas de código a nuestro CSS. 39. El modelo de caja (CSS para principiantes): En este video, vamos a estar viendo el CSS Box Model. El modelo de caja es una de esas cosas donde una vez que lo conoces, es realmente fácil de entender. Pero si no estás al tanto de lo que es, puede causar problemas al intentar encajar elementos en una página. A modo de ejemplo, si pasamos a nuestro CSS y cambiamos ancho de nuestro producto dentro de esta clase de producto aquí, digamos 210 píxeles. Si guardamos eso y recargamos el navegador, ahora queremos que estos productos encajen en nuestra fila. Ahora volvamos a nuestro CSS e investiguemos. Si buscamos nuestro producto, hemos establecido que este sea de 210 píxeles de ancho. Si echamos un vistazo arriba, establecemos esta sección principal para que sea de 608 píxeles. Nuestros tres productos abajo llegan a 630 píxeles en total. Hasta el momento todavía estamos dentro del envoltorio de 608 píxeles para la sección principal, pero entonces puede que estés pensando correctamente que tenemos algo de espacio alrededor de los productos. Nosotros sí agregamos cinco píxeles de margen a todos los lados. Estos cinco píxeles adicionales por lado significarían entonces que cada producto ocupa 220 píxeles cada uno y un total de 660. Nuevamente, aún dentro de estos 680 píxeles, sección principal. El relleno está dentro de los elementos, por lo que puede pensar que esto es irrelevante. Nosotros sí agregamos cinco píxeles de relleno también justo aquí abajo. Bueno, de hecho, en realidad también está incluido. Pasemos a las herramientas de desarrollador del navegador y veamos cómo se ve esto. Todos los navegadores tienen su propia versión de herramientas de desarrollador. Si no estás usando Chrome, podrás acceder a las herramientas de desarrollador buscando en el menú, pero te recomendaría usar Chrome para este caso. Todo lo que necesitamos hacer es hacer clic derecho y luego bajar a inspeccionar. Una vez que aparece, podemos hacer clic en el icono del inspector en la esquina superior izquierda. Haga clic en esta flecha allí y luego podemos pasar el mouse sobre nuestros productos y luego hacer clic en el div con la clase de productos. Esto nos permite ver el HTML en el lado izquierdo. Aquí podemos ver hemos destacado nuestra primera clase div de productos y también el CSS que aplica este producto en el lado derecho. Nuestro div producto está aquí poner el borde, ancho, margen, relleno, y el tipo de display de bloque en línea. Si nos desplazamos hacia abajo hasta la parte inferior de la sección CSS, podemos ver una caja. Esta imagen de aquí abajo representa el modelo de caja. En el mismo medio, tenemos nuestros elementos, que ahora fijamos en 210 píxeles de ancho, como vemos aquí. Entonces encima de esto tenemos cinco píxeles de relleno alrededor de cada lado. Tenemos un valor de borde de un píxel también y luego en el exterior tenemos cinco píxeles de margen. Es importante entender que estos valores adicionales de relleno, borde y margen se agregaron a estos elementos haciéndolo más grande en general. Establecemos el ancho para que el producto sea de 210 píxeles de ancho. Pero en realidad, cada producto ocupa un ancho de 232 píxeles una vez que sumamos todos estos extras. Es por ello que en el navegador, los tres de nuestros productos no caben en la misma línea. Aunque hay una manera de cambiarlo. Podemos utilizar una propiedad CSS de box-sizing. Si volvemos a los productos dentro del CSS, podemos agregar la propiedad box-sizing y establecer esto como border-box. Ponga una columna al final. Al establecer esto en border-box se asegurará de que el ancho que declaramos sea un ancho total. A pesar de que tenemos demo base en el ancho, todo esto también aplica cuando se trabaja con altura también. Esa es una cosa a tener en cuenta. Ahora con el ajuste de tamaño de caja en border-box, irá al navegador y luego recargará y simplemente encogerá las herramientas del desarrollador. Ahora vemos que tenemos tres productos en cada fila. Si volvemos a las herramientas de desarrollador, hecho tendremos que actualizarnos primero y luego arrastrar esto de nuevo hacia arriba. Todavía dentro de nuestro primer producto aquí, si ahora nos desplazamos hacia abajo hasta la parte inferior de nuestro modelo de caja, podemos ver al instante que el elemento en el centro ahora tiene un valor de un 198 para este ancho de elemento. Esto se ha reducido para acomodar el relleno y también los valores de borde también, para entonces igualar 210 píxeles. Entonces todavía tenemos este margen de cinco píxeles rodeando afuera, al igual que lo hicimos originalmente. Así funciona el modelo de caja. Incluso necesitamos tomar en cuenta cualquier valor extra como borde, relleno, y margen también o podemos aplicar la propiedad CSS de border-box. 40. Estilos de lista (CSS para principiantes): Al mirar nuestro proyecto hasta el momento, hay algunos temas relacionados con los ítems de lista que necesitamos abordar. Esta lista de a la izquierda dentro de la barra lateral. Todavía tiene las balas del lado izquierdo. También podemos ver agregar un poco más de espaciado a estos elementos también. Primero vamos a trabajar sobre el archivo CSS. Podemos hacer cosas como cambiar esta bala para que sea un círculo usando la propiedad de estilo lista. Aplicamos esto a nuestro artículo Li. Vamos a desplazarnos hasta la lista desordenada y luego podemos intentar conseguir el Li. Después agregamos la propiedad de estilo de lista, y luego podemos cambiar el valor a ser círculo. Dale a eso un guardado, y luego vuelve a cargar el navegador, y ahora estas balas negras del lado izquierdo son ahora círculos huecos. Actualmente el círculo está fuera del piso del contenido y este es un ajuste por defecto. Si hacemos el navegador un poco más ancho, podemos ver que este es el borde de la sección del cuerpo y los círculos fuera de éste. Esto se puede cambiar para que esté dentro del documento agregando el valor interior. Justo después de círculo podemos agregar dentro, y luego ir al navegador. Esto ahora empuja sobre nuestros elementos de lista para ahora incluir un círculo dentro del cuerpo. También está la opción cuadrada. Cambiemos círculo para ser cuadrado. Esto dará un cuadrado a la izquierda de cada elemento de la lista. También hay muchos más pero muchos de ellos y no se usan con frecuencia. Puedes por supuesto, echa un vistazo a estos con búsqueda rápida en Google Si te interesa saber más. Incluso podemos añadir nuestro propio icono o nuestra propia imagen en lugar de esta plaza también agregando la URL de la imagen. Entonces vamos a quitar el cuadrado y justo después del interior, vamos a agregar la URL, y luego dentro del corchetes podemos agregar la ruta del archivo a nuestra imagen. Podemos ir por una de nuestras imágenes existentes dentro de la carpeta de imágenes. Vamos por cables.jpeg, y veamos cómo se ve esto. Por lo que se ve un poco desorden al minuto porque el tamaño de nuestra imagen. Obviamente esta imagen es demasiado grande pero se puede ver cómo se puede usar esto si se trataba de un icono pequeño en su lugar, y esto se repite para cada elemento de la lista. Todavía se aplican las reglas de interior y exterior. Entonces si quitáramos el interior, y luego sustituyéramos esto por el exterior, nuestras imágenes ahora se moverían fuera del piso de documentos. Realmente no podemos ver sin alejarnos del zoom. Ahí vamos, dice nuestros cables a la izquierda de cada ítem de la lista. Este es un comportamiento que tuvimos justo al inicio este video al principio con las balas. Todo lo que quiero hacer sin embargo para este proyecto es eliminar estos mercados por completo. Esto se puede hacer agregando el valor de ninguno, s en lugar de esta imagen. También podemos quitar el exterior y esto simplemente cambia para ser ninguno. Después sólo tenemos un conjunto estándar de elementos de lista en el lado izquierdo. Entonces el espaciado entre los elementos entre estos enlaces en la parte superior e inferior, podemos aumentar la altura de la línea. Por lo que dentro del elemento de lista podemos seguir adelante y agregar la altura de línea. El valor depende de nosotros, pero voy a establecer el mío para que sea de treinta píxeles, y ver cómo se ve este piso. Bueno ahora aumentó la altura de la línea para ser de treinta píxeles, lo que ha agregado un poco más de espaciado entre cada elemento. Lo último que quiero hacer es agregar algo de espaciado para mantener el texto alejado del borde de este contenedor. Esto se puede hacer fácilmente con un poco de relleno en la sección lateral. Entonces pasa a la sección aparte del CSS, y luego sigue adelante y agrega algo de relleno de 10 píxeles, luego refresca. Genial, por lo que el espaciado ahora se ha aplicado a la sección aparte. Pero en este relleno también ha provocado que una tienda por sección sea ahora más baja que esta sección de todos los artículos de la derecha. Para hacer esto más parejo solo necesitamos agregar el valor de relleno a la sección principal también. Justo arriba, podríamos hacer lo mismo con el relleno de 10 píxeles, y veamos cómo se ve esto. Genial, así que ahora la tienda por, y toda la sección de artículos ahora alinean mejor con algo de relleno alrededor del exterior. A continuación, pasaremos a los enlaces de estilo y las pseudo clases. 41. Estilos de enlaces y pseudoclases (CSS para principiantes): Como ya podemos ver en nuestro proyecto, por defecto, los enlaces no se ven muy bien. Tienen una sección de subrayado, que puedes ver justo aquí y también en la sección de encabezados, aunque es posible que necesites hacer zoom. Subrayar es algo que queremos quitar. También por defecto, los colores no son muy atractivos. Empecemos por eliminar su subrayado de los enlaces. Podemos hacer esto si pasamos a nuestro CSS. Entonces justo debajo de los ítems de la lista, agreguemos la etiqueta A. Para eliminar esto, podemos establecer la decoración del texto para que sea un valor de non. Entonces hasta el navegador, esto ahora debería eliminar los enlaces predeterminados de la sección de encabezado y también de los títulos también. Esto se encarga del subrayado, pero aún tenemos que cambiar el color del texto de los enlaces también, tanto de estos productos como también la sección de encabezado y pie de página hacia abajo en la parte inferior. Podríamos hacer esto agregando clases individuales a cada elemento y sin duda propiedades de color CSS individuales. O podemos seguir adelante y hacer algo un poco más sencillo. En primer lugar, voy a pasar a la sección proto y establecer el color predeterminado del texto con la propiedad de color estableciendo un valor RGB de 49 para el rojo, el verde 46, y 46 para el azul también. Dale un guardado y si vamos al navegador y actualizamos, ahora vemos un color gris ligeramente más claro. Volver a los enlaces. Si pasamos a la sección A, en lugar de establecer un valor como un color RGB o hexadecimal, voy a seguir adelante y establecer el color para heredar y darnos guardar. La palabra clave hereit especifica una propiedad debe heredar su valor del elemento padre. Los enlaces de producto heredarán este color para la sección de cuerpo y también los enlaces de encabezado y pie de página heredarán el valor de color de la sección aquí. Veamos cómo se ve esto en el navegador. Bien. Ahora tenemos los enlaces de encabezado, el color blanco. Podemos ver que los productos tienen este color gris más oscuro el cual coincide con el cuerpo y luego abajo en la parte inferior tenemos los enlaces blancos para el área del pie de página también. Podemos ver exactamente qué está pasando si vamos dentro de las herramientas div. Haga clic derecho e inspeccione. Primero seleccionemos uno de nuestros productos. encima del lado derecho, y empezamos a desplazarnos hacia abajo. Podemos ver que hemos heredado de su sección de cuerpo, y heredamos la familia de fuentes y también este color gris que agregamos. Haga clic más en los seleccionados y subo a los enlaces de encabezado. Aquí podemos ver hemos heredado del encabezado este color de blanco. Podemos encender y apagar esto y ver el efecto que esto tiene. Cierra las herramientas div y ahora con estos enlaces atendidos, quiero pasar ahora a lo que se llama pseudo-clases. pseudo-clases son como una extensión a un selector CSS. Por ejemplo, aún podemos seleccionar enlaces con este selector A, que ya hemos hecho aquí. Bueno, por ejemplo, sólo cuando un ratón se cierne sobre ellos o si ya han sido visitados. O podríamos seleccionar un elemento de lista con li, igual que hemos hecho aquí. Pero sólo seleccione el tercer elemento de una lista. Hay bastantes pseudo-clases disponibles, pero echemos un vistazo a algunas de las más comunes, empezando por hover. Si bajamos a nuestro elemento A para nuestros enlaces y justo debajo hay una sección podemos añadir un nuevo elemento A. Separados por un colon podemos agregar el nombre de nuestra pseudo-clase. Para este caso voy a usar hover. Esto seleccionará todos los elementos A cuando el ratón pase sobre ellos. Podríamos hacer algunas cosas como establecer un color y agregar valor hexadecimal de 0e69e9. Por supuesto que este puede ser cualquier color que estés eligiendo. Vamos a probar esto en el navegador. Ahora para recargas y pasar el cursor sobre cualquiera de nuestros enlaces, ahora vemos este color azul los cuales son válidos. También los suministros, el producto también, y también el área de pie de página también en la parte inferior. Si ahora vamos a nuestro protocolo dentro de nuestro index.html, vamos a desplazarnos hasta nuestro primer producto, que está justo aquí. Aquí tenemos dos conjuntos de elementos p. Uno por el precio y luego uno por la descripción justo después. Podemos utilizar un pseudo-clase primero de tipo para seleccionar el primero de este grupo, que será nuestro precio. Volver al styles.css. Al igual que hicimos con los enlaces, primero podemos seleccionar nuestros elementos agregar dos puntos, y luego el nombre de nuestra pseudo-clase, que es primero de tipo. Para este, también podemos establecer el color y el rojo estará bien. Acude al navegador, refresca y ahora podemos ver el primer conjunto de elementos p en cada sección ahora se ha establecido en rojo. En nuestro caso, este es el precio y esto se repite también para todos los elementos. También hay último de tipo también. Cambiemos esto para que sea el último de tipo. El color rojo también está bien y probablemente puedas imaginar que esto seleccionará la descripción una vez que actualicemos, porque este es el último conjunto de etiquetas P dentro de su grupo. Esto también funciona para otros elementos, como los artículos de nuestra lista. Por ejemplo, podemos cambiar p para ser li y esto seleccionará el último elemento de lista en cada grupo. Por ejemplo, el contacto con nosotros abajo en la parte inferior, lo mismo para el encabezado, y también para cada grupo en una barra lateral también. No sólo podemos seleccionar el primer o el último elemento, en realidad podemos seleccionar cualquiera utilizando el tipo nésima. Si quisiéramos el tercer ítem de la lista, podríamos usar el tipo nth que es N-T-H. Después añadiremos los corchetes justo después de esto y si queríamos apuntar al tercer ítem de la lista en el grupo, agregamos el número 3, le damos a eso un ahorro. Ir al navegador y ahora fuera tercer elemento de lista en cada grupo está ahora seleccionado. Este número puede ser cualquiera de nuestra elección. Solo voy a eliminar este ejemplo aquí y guardarlo y restaurar el proyecto a cómo era. Si sacamos la versión terminada del textil, solo voy a tirar una segunda pestaña. Si echamos un vistazo a nuestras secciones de productos terminados aquí, abajo en la parte inferior tenemos los enlaces de más info y también agregamos al carrito. Usando estos pseudo-selectores, así es como tenemos los botones como diferentes estilos. Agregamos un CSS diferente para el último de tipo. Hagamos esto de nuevo en nuestra versión. Si volvemos al CSS, esta vez en la parte inferior, también podemos apuntar al botón, al colon, y luego al último de tipo. Esta vez lo aplicaremos al último botón de cada grupo. Cambiemos el color de fondo al tipo azul que hemos visto antes, que tiene un valor hexadecimal de 0e69e9. Entonces por fin, un color para el botón de blanco. Después apártate al navegador. Ahora tenemos algunos enlaces de aspecto más agradable en la parte inferior de cada producto. Este es un primer vistazo a las pseudo-clases y se puede ver lo útiles que son para apuntar a ciertos elementos dependiendo de sus estados. 42. Float y clear (CSS para principiantes): Bienvenidos de vuelta a todos. Vamos a echar un vistazo a las carrozas y claro en este video. Las carrozas son una forma de posicionar nuestros elementos en una página. Por ejemplo, podríamos flotar una imagen a la izquierda, y luego el resto del contenido se envolverá en el resto del espacio disponible. Esto probablemente se vea mejor para entender mejor exactamente lo que hace. Entonces en esta página de inicio, si haces clic en un Game Controller, y luego pasemos al detalle del producto. Yo quiero que esta imagen que está justo aquí aparezca en el lado izquierdo. Tenemos todos estos textos de producto y la información sobre en el lado derecho de la imagen. Ya hemos visto que esto se puede lograr mediante el uso de tipos de visualización en línea y en bloque en línea, pero vamos a concentrarnos en flotadores en este video. Si pasamos al archivo, que es el productdetail.html, voy a añadir una nueva clase al producto para que podamos seleccionar esto en CSS. Entonces justo después de la clase de producto, podemos agregar una segunda clase dentro de aquí, y digamos detalle del producto, y luego de vuelta en el CSS, los siguientes estilos se aplican específicamente a esta página de Detalles del Producto. Entonces vamos a añadir un comentario. Entonces un comentario CSS es una barra inclinada hacia adelante, una estrella, luego nuestro texto. Digamos página de detalles del producto. Voy a cerrar esto con una estrella y una barra delantera otra vez. Entonces voy a hacer que el div producto sea un poco más ancho para que se ajuste a la imagen y también al texto uno al lado del otro. Vamos a apuntar a esta clase de detalle de guión de producto y luego podemos establecer el ancho para que sea de 660 píxeles. Entonces vamos a ahorrar y ver cómo se ve esto. Recargar. De acuerdo, entonces la imagen es un poco grande por ahora, pero ahora tenemos el contenedor configurado para ser 660 píxeles. Ahora a flotar. Queremos que la imagen flote hacia el lado izquierdo, o de hecho, podemos flotarla a cualquier lado. Pero en mi caso, quiero que esté en el lado izquierdo, y luego el texto sobre el lado derecho. Por lo tanto, podemos seleccionar la imagen de detalle del producto dentro del CSS con detalle del producto y luego imagen. Entonces, para empezar, vamos a establecer el ancho máximo de la imagen para que sea del 50 por ciento, y eso es el 50 por ciento del contenedor. Entonces podemos flotar esto para estar a la izquierda. De hecho, antes de hacer eso, sólo dejaremos eso vacío y refrescaremos. Ahora, se puede ver por defecto, tenemos la imagen y luego el texto que está a nivel de bloque en su propia línea separada. Si entonces seguimos adelante y agregamos un flotador y flotamos la imagen a la izquierda, veamos qué efecto tiene esto. Está bien, bien. Por lo que ahora hemos restringido esta imagen para que sea del 50 por ciento o la mitad del ancho del contenedor, luego flotó la imagen a la izquierda de todo el resto del contenido. Esto significa que el texto ahora ocupa el espacio restante en el lado derecho. Ahora, voy a agregar algo más de texto a este producto para mostrar completamente el efecto que tiene el flotador. Si pasamos a la página de Detalles del Producto, y luego en la parte inferior de la Agregar al Carrito, eso acaba de abrir las etiquetas p para agregar algún texto. Si estás usando código de Visual Studio como yo, simplemente podemos escribir lorem, y luego presionar “Tab”, y luego nos dan algún texto de muestra que irá entre estas etiquetas p. De no ser así, simplemente puedes escribir cualquier contenido que desees. Pide una búsqueda en Google de Lorem Ipsum, que son estas dos palabras aquí, y luego podrás copiar y pegar algún texto de muestra. Haga clic en “Guardar”, recargar, y podemos ver de inmediato que ahora hay más texto disponible. Podemos ver mucho mejor ahora la imagen está flotando a la izquierda del resto del contenido, y luego el texto restante se envuelve alrededor del resto del espacio. También podemos flotar esto a la derecha en lugar de a la izquierda. Entonces vamos a darle una oportunidad a esto. Refrescar. Entonces sucede lo mismo pero del otro lado. También podemos establecer que esto sea “Ninguno”. Ahora, estamos de vuelta a donde empezamos sin flotar teniendo lugar, y luego el texto a nivel de bloque aparecerá en la siguiente línea. Por lo que las carrozas son realmente útiles para este tipo de cosas. Pero como la mayoría de las cosas, hay algunos inconvenientes. Antes de que mucho más recientemente se crearan otras técnicas, carrozas eran y a veces todavía se utilizan para elaborar una página web completa. A menudo verías que el flotador de contenido principal está a la izquierda y también una barra lateral a la derecha. Esto sí funciona, pero cuando usamos estas carrozas, puede parecer que sucede algo extraño. Para mostrar esto más claramente, voy a configurar un div simple justo encima del pie de página. Tenemos una imagen y algún texto en el interior. Entonces vamos al detalle del producto, y luego al área de pie de página. Simplemente desplazándose hacia abajo hasta el fondo. Entonces solo entre este principal y pie de página, vamos a configurar un div simple. En primer lugar, con una imagen y la fuente. Esto puede ser cualquier imagen [inaudible] usar uno de carpeta de imágenes. Ahora, digamos el controller.jpg. Entonces el texto en las etiquetas p de 'Hola'. Entonces pasemos a la página de Detalles del producto en el navegador y luego actualicemos, y ahí está nuestra imagen y el texto ahí en la parte inferior. Por lo que esto se ve como esperaríamos dentro del navegador. Entonces volvamos al editor de texto y agreguemos un flotador a esta imagen. Entonces en línea está bien. Para este ejemplo, estableceremos el flotador para que esté a la izquierda. Ahora, veamos cómo se ve esto cuando nos refrescamos. Entonces podemos ver de inmediato que algo extraño ha sucedido. El contenido de abajo, que era un div para esta zona de pie de página, ahora se mueve hacia arriba junto a nuestra imagen. Pero queremos que esto esté justo al final de la página ya que es un pie de página. Si pasamos a las herramientas de Desarrollador, haga clic derecho y “Inspeccionar”. Echemos un vistazo y veamos qué está pasando. Si seguimos adelante y hacemos click en la flecha y luego seleccionamos el div padre, y este es el div que agregamos para la imagen y el texto de 'hello'. Entonces vamos a la imagen, y este es el div padre aquí. Podemos ver si pasamos sobre este div apareciendo justo aquí, vemos algunas dimensiones. Por lo que el div tiene 1,000 píxeles de ancho por 19.2. Por lo que esto muestra al div como solo tener la misma altura el texto de este texto 'hola' aquí dentro del contenedor. No parece tomar en cuenta la altura de la imagen. Esto se debe a que los artículos flotados no afectan la altura del contenedor padre. Esto significa que este área de pie de página de abajo básicamente ignora esta imagen y se empuja hasta la altura del texto 'hola'. Podemos arreglar esto configurando el desbordamiento para que sea automático en el contenedor. Así que vamos a pasar a nuestro div y podemos establecer el “Estilo”, y luego agregar en el desbordamiento de auto, volver y refrescar, y desplazarnos hacia abajo. Ahora, nuestro pie de página está de vuelta en la parte inferior. Si vuelves a estas DevTools y bajas al div, que hemos visto antes, dale un click a eso. Ahora podemos ver en la pantalla, vamos a desplazarnos hacia arriba, que la altura del div ahora es de 425 píxeles, lo que también está dando cuenta de la altura de esta imagen también. Solución a este problema flotante se llama clearfix. Esta propiedad de desbordamiento solucionará el problema en la mayoría de los navegadores. También puedes hacer una búsqueda en Google para el micro clearfix y encontrarás pequeñas soluciones CSS a este problema. Esto también se volverá menos de un problema para ti cuando empecemos a mirar la Grid CSS y Flexbox más adelante en el curso, lugar de usar solo float para el layout. Entonces vamos a cerrar esto. Tan sólo para recapitular, cuando usamos un elemento flotante, igual que esta imagen, no se toma en cuenta la altura, razón por la cual este área de pie de página fue empujado hacia arriba por debajo de este texto aquí, que no estaba flotando. Entonces eso es algo que realmente es clave para entender al usar carrozas. También cuando se trabaja con floats también, también hay otra propiedad CSS de la que estar al tanto, y esto se llama claro. De nuevo, esto probablemente se vea mejor en la práctica para entender. Primero voy a modificar este ejemplo para tener un elemento flotado izquierdo y también derecho. Por lo que en la actualidad, tenemos la imagen que está flotando a la izquierda. Ahora, vamos a seguir adelante y abrir las etiquetas p y flotar esto a la derecha. Entonces Estilo, flotar a la derecha, punto y coma al final. Entonces agreguemos un tercer elemento el cual no está flotado. Por lo que algunos textos simples servirán para esto. Entonces digamos que no flotó y “Guardar” eso, vaya al navegador y luego actualice. Entonces por el momento, tenemos la imagen que flota hacia la izquierda, el texto de la derecha y un [inaudible] sólo para hacer esto más sencillo. Agregaremos 'Flotado' ahí dentro. Por lo que tenemos la imagen flotada a la izquierda. Tenemos el texto flotado a la derecha. Entonces el texto no flotado en el centro. Este texto no flotado está al lado de la imagen, y también en la misma línea que el texto flotado. Claro vamos a especificar este elemento no flotado se puede colocar al lado de estos flotantes o no. Si volvemos a las etiquetas p y luego también agregamos una propiedad de estilo. Diremos, despeja el flotador izquierdo, pasa al navegador y refresca. El texto no flotado ahora aparece a continuación. Esto se debe a que básicamente estamos diciendo que este elemento no flotado no está permitido colocarse junto a esta imagen la cual está flotando a la izquierda. También podemos declarar que no queremos que se posicione junto al elemento flotado derecho también. Podemos cambiar esto despejando el derecho. Ahora está al lado del texto flotado ambos en la siguiente línea. Por lo que esto le dice al navegador que no coloque esto junto a ningún elemento flotado derecho. Es por ello que aparece debajo en su propia línea separada, o podemos seguir adelante y despejar tanto la izquierda como la derecha juntos estableciendo este valor claro para ser ambos, y luego refrescar. Ahora, el texto está por debajo tanto de los elementos flotantes izquierdo como derecho. Entonces ahora voy a seguir adelante y quitar estos sección div extra ya que no necesitamos esto dentro del proyecto y luego “Guardar” eso. También podríamos asegurarnos de que la imagen de detalle del producto esté flotando hacia la izquierda, y entonces nuestro proyecto vuelve a la normalidad. Además, podemos quitar este texto extra de Lorem Ipsum. Entonces volvamos al producto y eliminemos esta larga sección del texto, y ahí vamos. Entonces así es como podemos usar float y clear. Puede ser bastante tomador si no lo has visto antes. Pero esto es solo una de las peculiares que te encontrarás al construir sitios web. 43. La propiedad position (CSS para principiantes): Ahora sabemos cómo usar flotadores para flotar nuestros elementos hacia la izquierda o hacia la derecha. Otra propiedad CSS importante que podemos utilizar para posicionar nuestros elementos es la propiedad de posición. Esto nos da diversos métodos de colocar o ajustar donde queremos que aparezca un elemento en la página. Existen cinco valores de posición que podemos utilizar llamados; estáticos, relativos, absolutos, fijos y pegajosos. Para demostrarlo, necesitamos un elemento con el que trabajar. Cualquier elemento en nuestro HTML estará bien, así que voy a pasar al detalle de nuestro producto, y luego seleccionar un elemento. De hecho, vayamos al índice donde hay más productos, y luego seleccionemos elementos como este botón en la parte inferior. Vayamos aquí y agreguemos una identificación a este botón, y cualquier nombre está bien. Voy a llamar a esta posición, y luego guardar eso. Entonces si vamos al CSS como de costumbre, podemos bajar al fondo y apuntar esto con el hash, y luego el nombre que posicionaremos. El valor predeterminado para la posición es estático. Esto simplemente significa que los elementos se colocarán donde normalmente estarían en el flujo, o los documentos. Esto podría estar en la parte superior izquierda, como hemos visto antes, con elementos bloqueados, o la siguiente posición en la fila si se trata de un elemento Inline. Establecer propiedades CSS como arriba, abajo, derecha o izquierda no tienen efecto en compensar estos elementos. Vamos a darle una oportunidad a esto. Añadamos 10 píxeles a la parte superior, y también a la página de índice. Podemos ver este botón Agregar al carrito no se ha movido en absoluto, porque sólo ocupa la posición en la que normalmente estaría. Si quisiéramos que se aplicaran estas compensaciones, podríamos cambiar la posición para que fuera relativa. Esa es nuestra oposición de relativo justo por encima de esto. Ahora, guardamos y volvemos al navegador para luego refrescamos. Ahora, el botón ha sido empujado hacia abajo desde arriba por 10 píxeles. El posicionamiento relativo coloca a los elementos donde normalmente estarían, igual que antes. Pero también toma en cuenta cualquier valor superior, inferior , derecha o izquierda para compensar los elementos. También puedes ver que mover estos elementos no afectará la posición de ninguno de nuestros elementos circundantes. A continuación tenemos absolutos, por lo que cambia relativo para ser absolutos. Después al navegador, veremos que salta a nuestro lugar. Ahora está arriba en la parte superior de la página web, absoluto hará los dos últimos valores que hemos mirado. Sacaremos los elementos del flujo normal del documento. Esto significa que no se te colocará en el próximo espacio disponible. En realidad no hay espacio creado para ello. Es por ello que está en la parte superior por encima de otros elementos. Actualmente, el valor superior de diez píxeles se hace efectivo, si fuera a ir y agregar un nuevo valor, así que vamos a agregar la izquierda, también 10 píxeles, refrescar. Ahora, acaba de colocar diez píxeles de la parte superior y diez píxeles de la izquierda. Esta posición ha dejado de ser referenciada en el muy exterior de la página web, o para lo más preciso, los elementos contenedor HTML. También podemos cambiar los elementos desde los que se hace referencia, si no queremos utilizar los elementos HTML. Todo lo que necesitamos hacer es establecer la posición de otro elemento padre para que sea relativa. Si quisiéramos referenciar el botón desde este contenedor principal, por ejemplo, rodeando los productos, podríamos pasar al tanque principal en la página de índice, y luego podríamos agregar una propiedad de estilo CSS. Aquí, podríamos establecer la posición para que sea relativa, y ver cómo esto lo afecta con una actualización. Ahora, a esto se hace referencia a 10 píxeles de la parte superior e izquierda del contenedor relativo principal, o si quisiéramos que fuera referenciado desde este primer productivo, podríamos hacer exactamente lo mismo aquí. En lugar de administrar dominio, podríamos eliminar esto y luego agregarlo al div con la clase de productos, refrescar. Ahora bien, esto es referencia a la esquina superior izquierda de este primer productivo. Simplemente voy a quitar este estilo en línea y luego ahorrar. Este valor absoluto nos da mucha flexibilidad, pero sí tenemos que tener cuidado también, ya que las cosas también pueden moverse a medida que se estira el navegador. Esto significa que tenemos que tener mucho cuidado al usar absoluto. Ahora, pasemos a la posición fija. En lugar de absoluto, cambie esto para que se arregle. Ahora, podemos oscilar la parte superior izquierda, eso son cinco ahora. Si guardamos y pasamos al navegador, no vemos nada se ve diferente al principio. Cuando este botón fue referenciado desde el HTML, vemos que el elemento también se retira del flujo de los documentos, igual que lo fue con absoluto. Además, podemos ver que los valores superior e izquierdo siguen surtiendo efecto. Para ver exactamente lo que hace, posible que necesitemos un poco más de contenido en la página. Voy a copiar nuestros seis productos. El primer div de la clase de productos, y luego desplácese hacia abajo hasta el último, que es justo antes de la etiqueta principal aquí. Copia eso, y luego pega estos en una vez más. Ahora tenemos 12 productos, para luego refrescar. Entonces si seguimos adelante y nos desplazamos hacia abajo por la página, el botón permanece en su posición fija en la esquina superior. Es posible que a menudo te encuentres con esto para cosas como una caja de registro por correo electrónico, que a menudo ves en la esquina inferior. Por último, también tenemos la opción pegajosa. Podemos cambiar la posición para que sea pegajosa, o cualquier style.css. Pero esta vez vamos a apuntar al lado, guardar, y luego pasar al navegador y refrescar. Ahora a primera vista, nuestra página vuelve a la normalidad. Parece ser nada diferente de lo que originalmente fue. Pero si seguimos adelante y nos desplazamos hacia abajo, en lugar de mover la barra lateral con el resto de los productos, se mantiene en su lugar a la izquierda de la pantalla. A menudo verás estas cuatro navegaciones o menús. Siempre son visibles para el usuario. Voy a quitar esta sección a un lado, y luego dar un ahorro. También podemos quitar el resto de estos productos que agregaste. Yo sólo voy a deshacer eso, sólo dejando los seis productos originales. Bien. Es así como utilizamos la propiedad de posición para tener un mejor control de colocar nuestros elementos en la pantalla. 44. Cómo aplicar estilo a formularios y entradas (CSS para principiantes): Ahora quiero pasar a la página Contáctenos para agregar algún estilo específico a este formulario. Esta es nuestra versión actual aquí pero si pasamos a la página Contáctenos en la versión terminada, podemos ver que se ve un poco diferente, pero maneja el caso de agregar algo de espaciado y alineación. Puedes, por supuesto, seguir adelante y hacerlo tú mismo si te sientes seguro haciéndolo pero si no, solo sígueme. Empecemos por pasar al style.css y ahora podemos seguir adelante y hacer un comentario. Dentro de aquí podemos agregar el Contáctenos y ahora podemos seguir adelante y apuntar a nuestra forma. Podemos agregar algunos estilos básicos como el relleno. Por lo que un relleno de diez píxeles, que por supuesto aparecerá dentro del elemento de forma. Después para agregar algo de espaciado en la parte superior e inferior de la forma. Podemos agregar algún margen. Diez píxeles en la parte superior e inferior, y cero en la izquierda y la derecha. También podemos hacer esto un poco más ancho, así que digamos 600 píxeles. Dale a eso un guardado y luego refresca. Ahora tenemos un poco de estilo básico para nuestra forma. Las cosas también se verían mucho mejor si también se alinearan estos cuatro primeros insumos. Por el momento las cuatro áreas de entrada son todas empujadas hasta el borde del texto en la etiqueta de hecho. Para ello, voy a agregar una clase personalizada, estas primeras cuatro secciones div. Pasó al Contáctenos o contact.html. Echemos un vistazo a los primeros cuatro divs que comienzan con nombre. Añadamos una clase de inline. Entonces vamos a copiar esto y pegarlo para el correo electrónico, también para el mensaje y luego también tenemos el asunto, que es esta sección aquí, así que al div de apertura para la sección dos, asegúrate de guardar eso y luego podemos apuntar esto en el CSS, empezando por establecer el ancho de la etiqueta de texto, so.inline para la clase, y luego seleccione la etiqueta. El ancho puede ser cualquier valor de nuestra elección pero voy a ir por 100 pixeles. Dale a eso un ahorro. En primer lugar, si nos refrescamos, podemos ver que no hay cambio. Esto se debe a que como ya hemos mencionado, podemos establecer el ancho para los elementos en línea y por defecto, Label está en línea. Entonces voy a pasar al CSS y los cambios para ser bloque en línea para que pueda afectar el ancho. Bien. Esto es más parecido. Ahora tenemos una etiqueta más amplia que alinea estos insumos a la derecha. Pero estos insumos también se verían mejor al ser un poco más amplios. Podemos etiquetar ciertos insumos en función de nuestro tipo de entrada. En primer lugar, si configuramos las entradas y luego abrimos los corchetes, entonces podemos etiquetar solo el tipo de texto y luego separados por coma, también podemos etiquetar las entradas con el tipo de correo electrónico, y abriremos las llaves a medida que normalmente lo hacen. Para estos dos primeros, vamos a añadir el relleno de 10 píxeles, y luego podemos hacerlos un poco más anchos, así que vamos por 400 píxeles, pasando al navegador. Bien. Esto se ve un poco mejor pero podemos ver esta área de texto es aún más pequeña que las otras entradas. Tenemos un par de opciones aquí. Podríamos o volver al código HTML y agregar más columnas, ya que tenemos los atributos de columnas y filas en el área de texto o podemos anular estos en CSS apuntando también al área de texto. Ahora si recargamos todas las entradas son ahora del mismo ancho. Solo para envolver esto, agreguemos algún margen también alrededor de cada uno de estos elementos div solo para agregar algo de espaciado a la parte superior e inferior. Podemos hacer esto seleccionando el Formulario y luego cada div que sigue. Establezcamos el margen para que sea de 10 píxeles en la parte superior e inferior, y cero en la izquierda y la derecha. Recuerda esto atará todos los elementos div que son hijos directos de Form. Entonces vuelve a cargar y ahora tienes algo de espaciado en la parte superior e inferior de cada sección div. Bien. Esta forma ahora se ve mucho mejor con un poco de espaciado más parejo. Siguiente es tu oportunidad de conseguir algo más de práctica agregando los estilos finales a este proyecto. 45. Hora de practicar: cómo aplicar estilo al proyecto final (CSS para principiantes): Hemos recorrido un largo camino en la sección y por ahora, ojalá sientas mucha más confianza al usar CSS. Ahora me gustaría que siguieran adelante y le agregaran algunos estilos finales y toques finales a este proyecto. En particular, me gustaría que agregaran algo más de altura a este encabezado y también al área de pie de página en la parte inferior. Además, si alineamos los enlaces de encabezado, estos de aquí, y también el cuadro de búsqueda hacia el lado derecho, igual que si visita la versión terminada aquí. Empuja todo hacia el lado derecho. Además, si establecemos las alineaciones de texto en los productos al centro, tal y como se ve aquí. [ inaudibles] están alineados a la izquierda. Por último, más en la página de detalles del producto, darías clic en este “Game Controller”. Un poco de estilo también para esta mesa en la parte inferior. Todavía no hemos cubierto Styling Tables, pero puedes usar todas las mismas técnicas que ya conoces, como agregar márgenes y relleno a los elementos individuales de la tabla. Esto es lo que me gustaría que siguieran adelante y hicieran. Recuerda, no hay manera correcta o incorrecta. Ambos me pasarán por esto en el siguiente video para mostrarles cómo llegué a esta versión terminada. 46. Solución: cómo aplicar estilo al proyecto final (CSS para principiantes): Espero que todos logren completar el proyecto final, desafío de estilo. Recuerda aunque no hay forma correcta o incorrecta de hacer esto. Ahora las botas van a correr por los estilos finales para mi versión, empezando por agregar algo más de altura al “Encabezado” y al “Pie de página”. Entonces vamos al styles.css, y si subimos hacia arriba, ya estamos apuntando al área “Encabezado” y “Pie de página”. Entonces todo lo que necesitamos hacer es agregar un pequeño relleno, para tapar el interior de las dibs. Entonces 20 píxeles en la parte superior e inferior, y 10 píxeles en la izquierda y derecha “Refrescar” y ahora tenemos pequeño relleno dentro del “Encabezado” y el área “Pie” en la parte inferior. Entonces podemos hacer este título del sitio en la parte superior, ocupar el 70 por ciento del peso para el encabezado, que luego empujará sobre los enlaces del cuadro de búsqueda hacia el lado derecho. Entonces bajemos al encabezado h1, así que vamos al encabezado li, el encabezado h1 aquí. Entonces vamos por el título de cabecera h1, y luego establecer el ancho para que sea del 70 por ciento. Veamos cómo se ve esto. Genial, por lo que esto hace que los enlaces y el cuadro de búsqueda se muevan a la derecha. Si abres las herramientas de desarrollador y luego resalta la sección, podemos ver el efecto de lo que acabamos de hacer. Esto ahora lleva un 70 por ciento al encabezado, empujando todo lo demás hacia la derecha. Por lo que esta técnica funciona con estos proyectos, pero más tarde veremos soluciones más elegantes, cuando empecemos a mirar el flexbox y la rejilla. tipo de soluciones permitirán que este diseño también funcione en diferentes tamaños de pantalla también. A continuación, si pasamos a establecer el texto del producto para que se alinee en el centro del div. Ya tenemos un div de producto aquí. Entonces agreguemos una propiedad CSS más de text-align center. Ahí vamos. Ahora sobre el estilo para la mesa, también podemos apuntar a la tabla con los elementos de la tabla, igual que lo estamos haciendo con los elementos anteriores. Entonces sigamos adelante y agreguemos un comentario, así que agrega “Tabla” dentro de ahí. Entonces, empecemos seleccionando los “Elementos de la tabla” y hacerlos un poco más amplios. Entonces voy a ir por 400 píxeles, establecer la línea de texto para que esté a la izquierda de cada celda. Después también agrega algún margen a la parte superior e inferior. Por lo que 20 pixels en la parte superior e inferior y cero en la izquierda y la derecha. Veamos cómo se ve esto, selecciona el “Controlador de juego”. Entonces ahora tenemos algún margen en la parte superior e inferior. Si seleccionamos al desarrollador “Herramientas”, entonces resaltamos nuestras celdas de tabla, podemos ver por esta sección azul, todo el texto está alineado a la izquierda. Vamos a cerrarlo y luego podemos pasar a esta zona de subtítulos en la parte superior. Solo para darle un poco más de estilo y también algo de relleno en la parte inferior para mantenerlo alejado de la mesa. Entonces tenemos el selector de subtítulos. Por lo tanto, empecemos configurando el peso de la fuente para que sea negrita. Podemos establecer esto para que sea cursiva con el estilo de fuente. Entonces pongamos eso para que sea cursiva, entonces podemos agregar un borde. Por lo que anteriormente hemos utilizado fronteras alrededor de nuestros productos, y estos por defecto se aplican a los cuatro lados. Podemos agregar lados individuales, así que si quisiéramos una línea justo debajo de este texto aquí, podríamos agregar un fondo de borde. Entonces en lugar de frontera, podemos agregar fondo de borde. Entonces un límite de un píxel y sólido. De hecho, hará que esto sea punteado para este ejemplo, y luego algún relleno de 10 píxeles para dar algún espaciado del navegador, “Refrescar”. Ahí está nuestra línea de puntos, y ahora el pequeño espaciado al agregar 10 píxeles de relleno. Entonces ya casi estamos ahí ahora con la tabla, todo lo que queremos hacer es agregar también algo de relleno a estos valores de celda. Recuerda que tenemos el encabezado de la tabla, que son las etiquetas th, y luego los datos tienen las etiquetas td. Por lo que podemos seguir adelante y seleccionar ambos en el CSS. Tenemos th, td y luego relleno 10 pixels, “Refrescar” y solo para terminar esta tabla apagado, también voy a añadir un estado de flotación con una pseudo-clase. Por lo que cada vez que pasemos por encima de una de estas filas, se resaltará el color de fondo. Entonces vamos a seleccionar la “Fila de la tabla” y luego agregar la pseudo-clase de desplazamiento. Por lo que cada vez que un pase por encima de la fila, podemos cambiar el color de fondo para que sea un valor x de F5-F5-F5. “ Recargar” y es tan color de fondo. Entonces si hacemos zoom, podremos ver esto un poco mejor. Esto es ahora para todos los estilos que se suman a este proyecto. Espero que hayas logrado sumar algunos de ellos tú mismo y hacer que los tuyos luzcan aún mejor que los míos. A continuación, vamos a pasar al video final en esta sección, se mirarán la cascada y la herencia. 47. Especificidad y cascada (CSS para principiantes): Vamos a terminar esta sección de CSS mirando algo que tropieza con muchos nuevos desarrolladores. Esta es la cascada y la especificidad. Empecemos con la cascada. En última instancia, la cascada determina qué estilos CSS se aplican a un elemento. Esto se basa en una serie de factores que veremos en este video. Por ejemplo, si tienes múltiples selectores CSS, todos apuntando a un elemento H1, o si tienes más de una hoja de estilo, también con algunas reglas para los elementos H1, cuál ganará en última instancia? La respuesta es la más específica, rills bajarán en cascada desde los menos o los más generales rills hasta el rill más específico para los elementos. Probablemente la forma más general y sencilla de decidir es el orden fuente. Si tienes más de un selector apuntando a los mismos elementos, el último en nuestro código fuente se anulará es antes. Pasemos a nuestro CSS y veamos esto en acción. Apuntemos a los elementos H1, que es el título del sitio. Establezca el color para que sea cualquier valor como el rojo, y luego agregue una segunda propiedad CSS. A continuación, configure la decoración del texto para que se subraye. Entonces bajo esto, también podemos agregar un segundo rill H1. Selecciona cualquier color o morado. Ahora tenemos dos selectores CSS, ambos apuntando al H1. Recarguemos el navegador y veamos cuál tiene efecto. Podemos ver que tenemos este color morado y también el subrayado. Esto se debe a que el código es rojo de arriba a abajo, lo que significa que esta decoración de texto de aquí todavía se utilizará. Ambos valores de color de rojo se sobrescribirán entonces con su valor de morado, que aparece después de él. También podemos ver cómo funciona esto sobre una necesidad herramientas de desarrollador. Si hacemos click derecho y luego inspeccionamos, y luego si seleccionamos este encabezado en la parte superior de H1. encima del lado derecho podemos ver los estilos que aplican. los selectores de la derecha están aplicando a este H1. Vamos a ver el orden en el que está postulando pronto. Pero lo que hay que señalar aquí es que este color rojo está siendo tachado. Entonces el color morado se hace entonces efecto. Este orden fuente también se aplica cuando estamos ejecutando múltiples hojas de estilo. Si pasamos a nuestro index.HTML, y luego hasta la sección superior. La hoja de estilo inferior siempre anulará cualquier hoja de estilo desde arriba. Esta es la razón por la que normalmente queremos colocar nuestras propias hojas de estilo personalizadas hasta la parte inferior, podamos agregar estilos personalizados que anularán cualquiera desde arriba. El siguiente que afecta la cascada es la especificidad. Así es como específico es un selector. Si volvemos a nuestro styles.CSS en nuestro ejemplo aquí. Ambos selectores son H1, por lo tanto son igualmente específicos. Cuando esto suceda, como acabamos de ver, el orden fuente tendrá prioridad. Echemos un vistazo a cómo calculamos qué tan específicos son los selectores. Por encima de la izquierda tenemos algunos ejemplos de un selector. Entonces en el lado derecho vemos cuántos puntos respondieron por selector. El primer ejemplo en la primera fila, vemos que H1 o una P, que es un elemento estándar, tiene un punto y ese es un punto por selector. Actualmente nuestro H1 solo vale un punto. En la segunda fila, una clase o un atributo, o incluso una pseudo-clase, que ya hemos visto, cuenta por 10 puntos. En la tercera fila, vemos que un selector de ID, como el ID de Producto que ya has utilizado vale 100 puntos. Entonces vemos en la parte inferior 1,000 puntos es para los estilos en línea. Esto es cuando agregamos el atributo de estilo a los elementos HTML. Podemos ver desde esta tabla aquí que el H1 sólo tiene un solo punto. Esto es lo que actualmente estamos apuntando en el CSS. En la segunda fila tenemos contenedor de puntos, H1. Todavía tenemos nuestro punto único con rumbo nivel uno, que es aquí, entonces también conseguiremos 10 puntos para esta clase. Esto es más específico que H1 porque ahora tenemos 11 puntos. Justo debajo de esto que hemos visto antes, eso es una identificación, tiene 100 puntos. Entonces al igual que mencionamos, un selector CSS normal, como P, es un solo punto. Este centro fue un 101 puntos, lo que lo hace más valioso que los dos primeros. También mencionamos que como pseudo-clase como hover, si nos fijamos en la primera diapositiva vale 10 puntos. Tenemos aquí nuestros 10 puntos para la pseudo-clase, y luego tenemos dos selectores, que es el LI y luego el A, dejando un valor total de 12. Volver a nuestro CSS. Añadamos algunos comandos a la parte superior de cada uno de estos y calculemos cuántos puntos solo podemos tener. Aquí es donde si no hay cientos, ni decenas, y ni miles. Este es actualmente un solo punto, copia esto y luego pega esto a continuación. Tenemos dos elementos iguales, ambos valen puntos individuales. Podemos ser más específicos agregando un encabezado. Añadamos el encabezado H1 al primer selector. Ahora tenemos dos elementos. Esto ahora equivale a dos puntos en total. Ahora esto es más específico. Ahora deberíamos tener un color de rojo con el puntual. Vamos a refrescarnos, y ahí está nuestro color rojo de cabecera. Si volvemos a hacer el partido agregando un encabezado al segundo elemento, esto es ahora también tenemos dos puntos, y por lo tanto el orden fuente declarará luego morado el ganador. Refresca, y ahí vamos. Probemos otra cosa. Si pasamos a nuestro index.HTML y luego bajamos al encabezado. Vamos a agregar una clase a este encabezado, y el encabezado está bien. Entonces podemos cambiar el CSS. El primero para agregar el punto y hacer de esto una clase. Todavía tenemos aquí el selector de elementos únicos, que vale un punto. Pero esta vez también tenemos una clase que vale 10 puntos igualando 11. Ahora tenemos 11 puntos para el primero. Deberíamos esperar que el color rojo vuelva a ganar. Guarda eso, refresca, y vemos que el rojo gana. Como cabría esperar, cambiar ambos para ser una clase con los puntos también hará que estos 11 puntos y luego se referirán de nuevo al orden fuente, lo que significa que el color será morado. Se trataba sobre el DNI. Pasemos al índice de punto HTML en lugar de una clase. Podemos cambiar esto para que sea una identificación y luego pasar a las hojas de estilo. primer lugar, en lugar de un punto, podemos agregar un duro porque esto es una identificación, y ahora tendríamos un total. Esto nos da un total de un 101, obtenemos un 100 puntos para un ID y uno para un solo selector. Guarda eso, refres