HTML: un curso de choque para principiantes

1. HTML de introducción: Hola, bienvenidos a este curso sobre HTML. Aprendizaje. Html es el paso perfecto para empezar a aprender a crear sitios web. Una vez que puedas usar HTML, las oportunidades son infinitas. Al tomar este curso, crearás una página web básica. A través de ejemplos. Empezaremos entendiendo qué es HTML, y veremos cómo configurar un documento HTML. Luego pasará a temas como el uso de texto, imágenes, Listas, e introduciendo estilos básicos. Terminaremos el curso mirando usando tablas y formularios. Este curso está dirigido a principiantes. Por lo que incluso si nunca has programado antes, este curso te ayudará en tu viaje de aprendizaje. Mi nombre es Emma y trabajo como programador en la industria hoy. Me encanta la programación y me encanta ¿cómo puedo aprender? Espero que hayas disfrutado de este curso. 2. ¿Qué es HTML?: Entonces, ¿qué es HTML? Cada vez que visitas un sitio web, estás siendo expuesto a HTML, introducido en 1993 por Tim Berners-Lee. Html significa Lenguaje de marcado de hipertexto. Entonces, ¿qué es útil HTML? Bueno, HTML es el esqueleto de todas las páginas web y se utiliza para estructurar la página y para mostrar el contenido mediante el uso de HTML, podemos agregar y formatear texto, mostrar enlaces, listas , tablas y formularios, y podemos incluir imágenes y videos en la página web. El mundo ha cambiado mucho desde 1993, y la tecnología ha evolucionado mucho hoy en día. La versión actual es HTML5. El Consorcio World Wide Web gestionó los estándares para HTML y decide qué pasa en él. Dentro de tu navegador, puedes inspeccionar el HTML de cualquier sitio web que visites. Puedes usar cualquier navegador, pero lo intentaremos usando Chrome. Vamos a darle una oportunidad a esto. Visitaremos google.com. Simplemente hacemos clic derecho y elegimos la pestaña Inspeccionar mostrando elementos aparece y podemos ver el HTML de la página. Dije que el HTML significa lenguaje de marcado de hipertexto. ¿ Qué significa esto? Pues bien, el hipertexto describe el texto que proporciona acceso a otra página. Esto lo hace por nuestro enlace, que se conoce como hipervínculo. Si visito un sitio web que muestra el pronóstico del tiempo y luego inspecciono la página, el país aquí es un ejemplo de hipervínculo. Y puedo confirmarlo cuando veo los elementos. Cuando hago clic en el botón, me navegan a una nueva página. Un lenguaje de marcado es un lenguaje informático que describe cómo se muestra el texto, al igual que cuando se ha subrayado o resaltado algunos textos, tal vez en un libro de texto o en un documento. Un lenguaje de marcado es un lenguaje informático que especifica la estructura y la presentación. Envolvemos el texto queremos que el navegador muestre en elementos y etiquetas para que el navegador sepa mostrarlo correctamente. 3. La anatomía de una etiqueta: En este video, vamos a introducir las etiquetas HTML y la anatomía del ataque. Combinar múltiples elementos es lo que conforma la estructura general de una página web en HTML, los propios elementos suelen estar compuestos por una etiqueta de apertura y cierre, que puede considerarse como envoltorios o contenedores. Hay más de un tipo de etiqueta, la más seguida la estructura de un pedazo de texto comenzó con una etiqueta de apertura y terminando con una etiqueta de cierre. Empecemos por mirar la etiqueta de apertura. El personaje colocado dentro de los corchetes es el tipo de etiqueta. Para un párrafo, colocaremos la letra P. La etiqueta de cierre es exactamente la misma, excepto que usamos una slash hacia adelante después del primer corchete. Los atributos nos permiten añadir más información sobre el elemento. Colocamos el atributo dentro de la etiqueta de apertura. Para ello, usamos un nombre y un valor unidos por un signo igual. El nombre es el tipo del atributo y el valor es el valor que desea asignar. Para las mejores prácticas, el nombre del atributo debe estar minúsculas y encerrarse dentro de las comillas dobles. En el último video, mencioné cómo HTML había evolucionado grandemente desde que fue creado. Uno de los aspectos de esto es cómo los nombres de etiquetas para formatear ha comenzado a inclinarse hacia lo que llamamos semántica. O en otros términos, el significado en el pasado, texto en negrita se denominaría negrita y cursiva como cursiva. Si bien todavía podemos usar estos, estos días se está volviendo más común usar palabras como fuertes y enfatizadas en su lugar. 4. Configurar el documento: Ahora tenemos un poco de un entendimiento sobre lo que es HTML. Podemos empezar a mirar a configurar nuestro documento. Para poder configurar un documento HTML, se requieren ciertos elementos. Empezamos con la declaración de tipo de documento, que debe ser la primera línea del código en el documento HTML. Esta es una explicación marca DOCTYPE HTML. Esto le permite al navegador saber que estamos utilizando HTML. El comportamiento actual de usar HTML aquí es que el navegador asumirá que estamos usando HTML5 ya que es la versión estándar actual. Cuando guardes el archivo, debes guardarlo, terminando con un HTML de punto. Llamaremos a nuestro índice de archivos HTML. Después de la declaración DOCTYPE, podemos agregar etiquetas HTML de apertura y cierre. Cualquier cosa que vaya entre estas etiquetas HTML será leída o interpretada como código HTML por el navegador. A continuación, usamos la etiqueta o elemento de la cabeza. Esto contendrá metadatos, que es información sobre la página web para el navegador, y no se muestra en la propia página. Dentro de la cabeza, podemos decirle al navegador dónde encontrar otros archivos, como por ejemplo para el CSS y el JavaScript. Otro ejemplo es la etiqueta de título. El tag title es importante para lectores de pantalla y motores de búsqueda dependiendo del navegador, esto se mostrará en la barra de pestañas. Debemos definir aquí un título no vacío. A continuación, pasamos a agregar la etiqueta del cuerpo. Sólo se mostrarán en pantalla los elementos dentro de las etiquetas del cuerpo. 5. Jerarquía y formato: Bienvenido de nuevo. Entonces antes de ir más allá, brevemente voy a discutir jerarquía y también formateo. Es importante entender la estructura o la jerarquía del HTML. Porque a medida que trabajas con más HTML y también CSS, estos elementos pueden heredar comportamiento o estilos unos de otros. Podemos pensar en HTML como lo hacemos cuando miramos un árbol genealógico. Entonces tenemos padres, hijos, hermanos, abuelos, etcétera. Cuando anidamos un elemento dentro de otro elemento, llamamos al elemento en el interior al niño y al elemento en el exterior los padres. Dos elementos cuando se anidan dentro del padre, estos podrían ser referidos como hermanos. Con respecto al formato, HTML suele ignorar los espacios en blanco, pero es bueno entrar en prácticas de formateo para asegurarse de que el documento sea legible, lo mejor es poner nuevas etiquetas en un nueva línea. Y cualquier cosa dentro de la etiqueta debe ser sangrada por un nivel. Por lo general se trata de dos espacios. Es bueno asegurarse de que tu editor de texto esté configurado correctamente para usar espacios en lugar de pestaña genuina cuatro espacios no son infrecuentes de ver, pero puede hacer que el contenido sea un poco más difícil de trabajar con porque puede empezar a caerse de la pantalla. 6. Partidas: Ahora tenemos nuestra configuración de documentos. Podemos pasar a sumar algunos elementos. Cuando lees un documento, generalmente el documento tiene un encabezado que es mayor que el resto del texto de esa página. Esto es muy común en publicaciones impresas como revistas. Los encabezados en HTML funcionan de la misma manera. En HTML, hay seis tipos diferentes de encabezados, y los llamamos encabezados. H1 es el más grande y poco a poco se hacen más pequeños a medida que trabajas tu camino hasta H6, una buena manera de recordar encabezados es el H1 será el rubro principal. subencabezado sería H2 también vale la pena saber que el tamaño predeterminado en el que el navegador mostrará el encabezado varía ligeramente dependiendo del navegador, pero esto se puede gestionar mediante el uso de CSS en nuestro documento. Vamos a seguir adelante y añadir una etiqueta H1 con el texto, nuestros deportes. Utilizamos el soporte de apertura H1, y luego cerramos el soporte y vamos a añadir el soporte de cierre, que es el soporte hacia adelante slash H1 y el soporte entre los dos, vamos a añadir el texto son deportes. A continuación, agregaremos una etiqueta H2 con el mensaje atletas famosos. Por último, agregaremos etiquetas a3 h3. Dale a estos los textos, natación, running, y gimnasia. Guardemos esto y ejecutemos el código en nuestro navegador. En nuestro navegador seleccionamos Abrir archivo, y luego abrimos el archivo HTML. Ahora podemos ver la página que hemos empezado a crear. 7. Párrafos: En este video, vamos a ver la creación de párrafos. Para crear un párrafo, se encierra el texto dentro de las etiquetas que contienen P. El comportamiento predeterminado para varios párrafos es que el párrafo se colocará en una nueva línea con algún espacio agregado entre. No hay límite a cuánto tiempo o corto debe ser el texto dentro de las etiquetas p. Agreguemos tres etiquetas de párrafo, una debajo de cada uno de los encabezados H3 que creamos en el último video. En la primera, diremos que un famoso nadador está EN pensado. En el segundo, diremos que un famoso corredor es Usain Bolt. Y en la tercera, diremos que una gimnastas famosas es Simone Biles. Vamos a guardar esto y ejecutar la página de nuevo. Simplemente podemos recargar la pantalla en el navegador. Ahora podemos ver que los tres párrafos se han agregado a la pantalla. Entonces, antes de seguir adelante, recapitulemos lo que acabamos de aprender. Podemos crear encabezados usando encabezados, que pueden ser cualquier cosa, desde H1 hasta H6. También podemos colocar texto dentro de las etiquetas de párrafo, cuales utilizaron la letra P dentro de la etiqueta. 8. Elementos en línea y bloque: En HTML, cada elemento se muestra como un elemento de bloque o un elemento en línea. Si te imaginas que estás haciendo un viaje al supermercado que a la isla, el supermercado suele ocupar todo el espacio del piso y por lo tanto sería el elemento de bloque. Por otro lado, cuando se coloca un artículo en un estante dentro de un supermercado, se ajusta al lado de los demás artículos, solo ocupa tanto espacio como necesite. Por lo tanto, esto es como un elemento en línea. Cuando creamos un elemento en HTML, el elemento reparará en una nueva línea o aparece dentro de algún contenido. Cuando creamos un encabezado, queremos que el encabezado destaque y sea una entidad por sí sola, y aparece en una nueva línea. Por lo que este sería un elemento de bloque. Cuando hacemos fuerte alguna tecnología, no queremos interrumpir el flujo del contenido alrededor del texto fuerte y no aparece en una nueva línea. Entonces este es un elemento en línea. etiquetas de encabezado, las listas y los elementos de párrafo son todos ejemplos de elementos de bloque. Los elementos de bloque ocuparán todo el ancho disponible. Por otro lado, los elementos en línea no arrancan en una nueva línea y el flujo del contenido alrededor del elemento no cambia fuerte y las etiquetas am son un ejemplo de elementos en línea como las imágenes. Los elementos en línea solo ocupan tanto del ancho como sea necesario. 9. Atributos: Bienvenido de nuevo. En este video vamos a ver atributos. ¿Cuáles son los atributos? Atributos, agreguemos información extra a un elemento. Añadimos el atributo a la etiqueta de apertura. Ejemplos de atributos comunes que podemos usar incluyen el título, id, clase y estilo. Si bien hay otros, el uso principal de un atributo o para aplicar estilo o información, como la información relacionada con el lenguaje. Hay dos partes a un atributo, el nombre y el valor. Estos están separados por un signo igual y el valor se coloca dentro de comillas dobles. El nombre es el nombre del atributo y debe estar en minúsculas. El valor es el valor que queremos establecer para el atributo. Y esto debe ser envuelto dentro de marcas de comillas dobles. Vamos a usar los atributos id y agregarlos a las muertes que creamos en el último video. El primer div usará el encabezado de valor. El segundo div usará el contenido de valor. 10. Divs y se extiende: En HTML, div es la abreviatura de división. Esto representa un contenedor que divide la página en secciones. Al usar un div, puedes agrupar los elementos de tu HTML juntos. Cuando usas un div, el usuario realmente no verá ninguna diferencia en la página, pero son muy útiles cuando quieres agregar estilos a grupos de elementos más adelante usando un div, puedes aplicar los estilos a la sección entera de una sola vez, puedes envolver cualquier cosa dentro de un div, pero es una buena práctica recordar sangrar los elementos que anidas dentro del día para una mejor legibilidad. En el último video, mencioné elementos en línea y bloque. Un div es un elemento de bloque, por lo que el contenido dentro del div se colocará en una nueva línea. Puede envolver un grupo de párrafos dentro de un div. Y el mismo enfoque podría aplicarse a imágenes o encabezados en HTML, también podemos usar span. Por lo general, se aplica un span a algún contenido en línea y es en sí mismo un elementos en línea. Por lo que no aparecerá en una nueva línea y solo ocupará tanto espacio como lo hace el contenido. Podrías aplicar span dos pequeños trozos de texto o imágenes donde no quieras romper el contenido circundante. Si solo quieres apuntar a una pieza específica de contenido en la misma línea que algunos otros textos, entonces lo mejor es usar un span cuando quieras dividir tu contenido en bloques, entonces lo mejor es usar un div . Vamos a añadir algo de profundidad a nuestra página. Envolvemos las etiquetas H1 y H2 dentro de un div. Luego también envolveremos todas las etiquetas H3 dentro de otro div. Vamos a guardar esto y recargar la página. Visualmente, nada ha cambiado, pero si queremos aplicar algunos estilos a algunos grupos de elementos después, ahora podemos hacerlo mucho más fácilmente. Entonces para resumir, en HTML, tenemos elementos de bloque e inline. Los elementos de bloque aparecen en una nueva línea, mientras que los elementos en línea aparecen dentro del contenido. Podemos usar dips y tramos, que son muy útiles cuando queremos aplicar algún estilo. divs son elementos de bloque y los vanos son elementos en línea. 11. Fuerte: Bienvenido de nuevo. Mencioné anteriormente sobre fuerte y enfatizó ser utilizado para texto en negrita e italicizado. En este video, vamos a hacer los nombres de nuestros famosos atletas en nuestra página para usar etiquetas fuertes. Para ello, anidaremos las etiquetas y colocaremos las etiquetas fuertes dentro de las etiquetas p alrededor del pedazo de textos que queremos usar strong. Cuando anidamos etiquetas, debemos asegurarnos de que cerramos las etiquetas en el orden inverso de cómo fueron creadas. Entonces la última etiqueta que se crea debe ser la primera etiqueta en cerrarse. Entonces empecemos agregando etiquetas fuertes alrededor del texto que dice E y Thorp. También lo haremos en el segundo párrafo alrededor del texto que dice Usain Bolt. Por último, lo haremos en torno a los textos que dice Simone Biles. Vamos a guardar esto y recargaremos la página en el navegador. Ahora podemos ver que los nombres de nuestros atletas parecen más audaces que el resto de los textos en los párrafos. 12. Em: Bienvenido de nuevo. En el último video, agregamos etiquetas fuertes alrededor de los nombres de los atletas para hacer el texto en negrita. En este video, veremos las etiquetas EM, lo que significa que el texto se enfatiza. Al usar la etiqueta EM, podemos enfatizar qué significa curalizar el texto. Estas etiquetas funcionan de manera similar a las etiquetas fuertes. Por lo que los colocamos dentro de las etiquetas que contienen los textos que queremos en curatizar enfatizar. Vamos a hacer esto a los nombres deportivos que están encerrados dentro de los encabezados h3. Empezaremos con formar dentro de la etiqueta h3. Ahora añadimos una etiqueta EM. Cerramos las etiquetas en el orden inverso que se crearon. Por lo que directamente después del final de la palabra natación, cerramos la etiqueta EM. Repetiremos esto para los otros dos deportes, running y gimnasia. Vamos a guardar esto y recargar la página en nuestro navegador. Ahora podemos ver el texto para cada una de la cabeza es nadar, correr, y la gimnasia aparecen enfatizadas. Italicizado. 13. Subrayo: Bienvenido de nuevo. Cuando estamos trabajando con HTML, otro elemento que está disponible para nosotros cuando estamos trabajando con texto es el elemento subyacente. El elemento subyacente subrayará algún texto. Para utilizar el elemento subyacente, utilizamos las etiquetas con la letra U. Hay algunas salvedades con este elemento a tener en cuenta. Para subrayar algunos textos en HTML es mejor aplicar un estilo en CSS a través de una propiedad llamada decoración de texto, para lo cual se establece el valor subyacente al elemento subyacente HTML en sí, destinado a ser utilizado para marcar algunos textos de alguna manera. Por ejemplo, si tuvo un error ortográfico o si está utilizando textos chinos, el elemento subyacente no debe usarse solo por motivos de visualización sin otro motivo válido, como el error ortográfico. Sólo para fines de demostración, vamos a añadir el elemento subyacente a la palabra nadador, corredor, y gimnastas dentro de cada una de las etiquetas p. Posteriormente volveremos a visitar esto e implementarlo correctamente usando CSS en nuestro HTML. En el primer párrafo alrededor del trauma, agregamos la etiqueta. Cerrarás esto directamente después de la palabra. Repetiremos estos pasos para corredor y gimnastas. Vamos a guardar nuestro HTML y recargarlo en el navegador. Ya se puede ver que el texto ha sido subrayado, pero esto podría confundirse fácilmente con un enlace que se puede hacer clic. 14. ENLACES: Bienvenido de nuevo. En este video, vamos a ver enlaces para agregar un enlace a una página web, utilizas el elemento ancla. Esto está representado por la letra a. entre las etiquetas de apertura y cierre, colocamos el texto que el usuario debe ver al presionar el enlace dentro de la etiqueta de apertura, usamos un atributo para establecer dónde los enlaces deben ir a. Esto puede ser una ruta o una dirección a un archivo en su computadora o en un servidor. Por lo general, aunque, para los enlaces, la ruta para el atributo es una URL. El nombre del atributo es H ref, y esto significa referencia de hipervínculo. Hipervínculo es un término técnico para un enlace. También podemos utilizar un atributo target cual especificará dónde deben abrirse los enlaces. El comportamiento predeterminado no modifica este atributo es que se abrirá en la ventana actual. Si cambias el valor a subrayar en blanco, entonces se abrirá en una nueva ventana o pestaña en nuestro HTML, vamos a añadir tres enlaces, uno dentro de cada uno de los deportes, que navegará al usuario a una página de Wikipedia sobre ese deporte. Por lo que a partir del párrafo sobre natación, usaremos la etiqueta a para hacer etiquetas de apertura y cierre. Agregaremos el texto del enlace. Conoce más sobre natación. Dentro de la etiqueta. Agregará el atributo H ref y agregará el enlace de Wikipedia para nadar. A continuación, haremos lo mismo por correr. Añadimos las etiquetas a. Añadimos el texto del enlace, Aprende más sobre correr. Después agregaremos el atributo H ref y agregaremos el enlace de Wikipedia para ejecutarse. Por último, volveremos a hacer lo mismo debajo del párrafo sobre gimnasia. Añadimos las etiquetas a, luego el texto del enlace. Conoce más sobre gimnasia. Añadimos el atributo H ref, y luego el enlace de Wikipedia para gimnasia. Vamos a guardar esto y recargaremos la página en nuestro navegador. Cuando tomé el enlace, aprenda más sobre la natación. Ahora me navega al enlace de Wikipedia para nadar. Entonces para resumir lo que hemos aprendido en este video, agregamos enlaces usando el elemento ancla, el enlace que ve el usuario se coloca como texto entre las etiquetas de apertura y cierre. Utilizamos un atributo H ref para establecer la ubicación del enlace. Si desea cambiar el comportamiento de cómo se abre el enlace, debe usar el atributo target. 15. Imágenes: Bienvenido de nuevo. En este video, vamos a ver la adición de imágenes a nuestra página. Para agregar imágenes a la página, utilizamos el elemento image. Estas son las letras IMG dentro de la etiqueta. Si bien la mayoría de los elementos en HTML requieren que utilicemos etiquetas de apertura y cierre, la etiqueta de imagen es lo que se llama etiqueta de cierre automático, o a veces se denomina elementos Void. Esto se debe a que lo implementamos usando solo una etiqueta. El motivo de esto es que no hay contenido que deba colocarse entre la etiqueta de apertura y cierre. Es posible que veas algunos ejemplos que sí usan una etiqueta de cierre separada. Pero en HTML5, esto no es una necesidad. Se te ocurre agregar imágenes, como agregar enlaces, porque agregamos un atributo con la ruta de la imagen que queremos mostrar. Pero la estructura de la etiqueta en sí es ligeramente diferente. Para establecer una ruta de la imagen que queremos mostrar, utilizamos un atributo llamado fuente. Esto está representado por las letras S, RC. También establecimos otro atributo llamado este atributo dance para texto alternativo. Y debe contener una descripción de la imagen en caso de que no se cargue, configurarla todo para atribuir también es realmente importante para fines de accesibilidad. Entonces, por ejemplo, si alguien discapacidad visual visitó nuestra página, entonces mediante el uso del atributo ALT que se puede leer una descripción de la imagen por su lector de pantalla usando el atributo alt es también muy útil cuando se trata optimización de motores de búsqueda, porque los propios motores de búsqueda no pueden ver las imágenes cuando estás agregando imágenes a tu página, puedes utilizar un enlace directo a la imagen de algún otro lugar en la web. Y esto se llamaría rey hotlink. No obstante, en general, esta no es una gran práctica porque significa que ahora estás dependiendo de otro sitio web y asumiendo que la imagen siempre estará ahí, de repente, esto puede abrirse mucho más oportunidades para que se produzcan errores. Por lo que vamos a añadir una imagen a nuestra página cual irá bajo el rubro, nuestros deportes. Te da la bienvenida a usar cualquier imagen aquí, pero voy a usar una de la página web pixabay. Dentro del directorio de tu archivo index.html, necesitas crear una nueva carpeta llamada imágenes. A continuación, es necesario descargar la imagen del sitio web de Pixabay a su computadora y copiarla en este directorio. Una vez hecho todo esto, deberías poder ver la imagen dentro de tu editor de texto. Ahora, cuando usamos la imagen, porque forma parte del mismo proyecto que el archivo index.html. Podemos usar la ruta relativa, y esto automáticamente se interpretará a la ruta completa en el código HTML bajo el encabezado. Añadamos ahora la imagen. Por lo que empezamos usando las letras IMG dentro de la etiqueta. A continuación, agreguemos el atributo fuente. Por lo que agregamos las letras SRC, seguidas del signo igual. Y por el valor, colocamos el camino de la imagen. Ahora para el atributo textos alternativos, agreguemos un valor. Vamos a decir un estadio deportivo. Porque esta es una descripción de lo que representa la imagen. Ahora guardemos esto y recarguemos la página en nuestro navegador. Ahora podemos ver que la imagen se ha agregado a nuestra pantalla con éxito. 16. Listas: Bienvenido de nuevo. En este video, vamos a ver listas en HTML. Cuando estás trabajando con HTML, tienes algunas opciones en cuanto a cómo deseas mostrar tu texto. Ya hemos visto cómo usar el elemento de párrafo, pero puede haber momentos en que tengas algunos textos que te gustaría mostrar como lista en HTML, hay dos tipos de listas. Podemos usar, listas ordenadas y listas desordenadas. Las listas ordenadas están representadas por una etiqueta usando las letras O, L, y las listas desordenadas están representadas por una etiqueta usando las letras UL. Con ambos, los elementos dentro de la lista se denominan elementos de lista, y estos se representan mediante una etiqueta con las letras LI. Por defecto, el navegador sangrará las listas, listas ordenadas. Las listas ordenadas muestran los elementos de la lista con números. Entonces, si tienes una lista que represente pasos o resultados o algún tipo de elemento que necesita mostrarse en una secuencia, entonces esto puede ser realmente útil. Por otro lado, las listas desordenadas usan viñetas para mostrar los elementos de la lista, y estos se pueden diseñar a través de CSS. Las listas desordenadas también pueden ser útiles para la navegación del sitio. Una cosa a tener en cuenta al crear una lista es que la lista ordenada o elemento de lista desordenada es más como un contenedor para la lista. Los textos con los elementos de la lista deben ser envueltos dentro de la etiqueta del elemento de la lista. Entonces en nuestra página, vamos a agregar una lista. No tenemos necesidad de usar una lista ordenada para esto porque no hay nada que mostrar en cierto orden. Pero vamos a implementar esto primero usando una lista ordenada y luego reimplementada usando una lista desordenada. Empecemos agregando el elemento de lista ordenada. Por lo que creamos etiquetas de apertura y cierre con las letras OL. Tenemos tres deportes queremos que nuestra lista contenga natación, running, y gimnasia. Así que agreguemos elementos de lista para cada uno de estos, usamos las letras LI dentro de las etiquetas para los elementos de la lista. Selecciona, Crea tres de estos. En el primer elemento de lista, agregaremos el texto para mí. En el segundo, corriendo. La tercera gimnasia. Vamos a guardar esto y recargar la página en el navegador. Ahora podemos ver nuestra lista y cada ítem de la lista tiene un número junto a ella, porque estamos usando una lista ordenada. Cambiemos esto para usar la lista desordenada, ya que no tenemos necesidad de que los elementos de la lista estén en ningún orden dentro de las etiquetas OL. Los cambiaremos para usar UL. Esto es en realidad todo lo que necesitamos cambiar ya elementos de la lista en sí mismos son los mismos para cualquiera de los tipos de listas. Esta vez podemos volver a ver nuestra lista, pero los elementos de la lista usan viñetas porque estamos usando la lista desordenada. Vamos a recapitular lo que acabamos de aprender. Podemos crear listas en HTML usando OL para lista ordenada o UL para lista desordenada, representamos los ítems en la lista usando la etiqueta LI. Las listas ordenadas son útiles para mostrar elementos en una secuencia y usar números, listas desordenadas, usar viñetas. 17. Estilos: Bienvenido de nuevo. En este video, vamos a introducir usando estilos en HTML. Este es un curso de HTML, por lo que no estaremos sumergiéndonos profundamente en este tema, pero sigue siendo increíblemente útil conocer los conceptos básicos. Cuando queremos agregar estilos a la página web, necesitamos usar CSS. Css significa Cascading Style Sheets y es un lenguaje de estilo. Hay tres opciones disponibles para cómo usar CSS en el porcentaje, podemos usar CSS externo. CSS interno, CSS en línea. CSS externo significa que importamos los estilos desde otro archivo que ha guardado externamente. CSS interno significa que los estilos se almacenan dentro del elemento de estilo dentro del mismo archivo. CSS en línea significa que usamos un atributo de estilo directamente en los elementos individuales a los que queremos aplicar estilos. Si solo quieres aplicar un par de estilos que el CSS en línea está bien, pero generalmente es más limpio mantener los estilos aislados del HTML. Si más de una persona está trabajando en la página web, entonces esto es definitivamente algo que debes considerar. Y en la hoja de estilo a largo plazo y externa suele ser un enfoque más mantenible. Otro beneficio de no usar estilos en línea es que puedes crear una regla de estilo, pero aplicarla a varios elementos. Esto significa menos mecanografía y duplicación. Vamos a empezar por mirar estilos en línea. Esto significa que colocamos los estilos directamente en los elementos HTML por un atributo style. Utilizamos el atributo style seguido de un signo igual, y luego comillas dentro de las comillas reemplazaron el estilo o estilos que queremos aplicar al elemento. Al declarar los estilos, se utiliza el nombre de la propiedad y luego el valor. Y los separas con un colon. Si desea utilizar varios estilos, coloca un punto y coma al final de cada mosaico. Por lo general, sin embargo, es bueno entrar en la práctica de solo agregar el punto y coma después del estilo para que podamos agregar más estilos más adelante sin arriesgarse a crear ningún error. Lo primero que vamos a hacer en nuestra página con estilos es eliminar el elemento subyacente de uso incorrecto que implementamos en un video anterior. Como queremos subrayar el texto para fines de visualización, únicamente. Hacer esto con el elemento subyacente no es la forma correcta de lograr esto. En cambio, vamos a utilizar una propiedad llamada decoración de texto. Esta propiedad le permite agregar algo de decoración al texto que pueda colocar una línea a través del texto sobre el texto, debajo del texto están tanto debajo como sobre el texto. En nuestro caso, queremos colocar una línea a través del texto para que podamos establecer esta propiedad a subrayar. Vamos a seguir adelante e implementar esto. Vamos a empezar cambiando el elemento subyacente para que sea un lapso. Esto significa que podemos orientar el contenido en línea sin aplicar estilos al contenido circundante. A continuación añadimos el atributo style, seguido de un signo igual, y luego algunas marcas de comillas. Dentro de las comillas, agregamos la propiedad text-decoration, un colon, y luego subyacente para el valor. También agregamos un punto y coma. Repetimos estos pasos para los otros dos elementos subrayados. Vamos a guardar esto y recargar la página en nuestro navegador, vemos el texto subyacente. Pero esta vez ronda, hemos implementado esto correctamente mediante el uso de estilos en lugar de utilizar el elemento subyacente. 18. Más estilos: Bienvenido de nuevo. Ahora que hemos implementado nuestro primer estilo, vamos a refactorizar esto para usar una hoja de estilo interna y luego una hoja de estilo externa. Entonces como recordatorio, una hoja de estilo interna es donde usamos el elemento de estilo dentro de nuestro documento y reemplazamos todos los estilos para nuestro documento dentro este elemento usando selectores de clases CSS. Los selectores de clase Css nos proporcionan una forma de etiquetar nuestros estilos. Y colocamos un punto antes de lo que etiquetamos el estilo, y después de la etiqueta, colocamos un conjunto de llaves rizadas. Las clases de Css también significan que somos capaces de dar a más de un elemento los mismos estilos. que no tengas que escribir los estilos cada vez que quieras usarlos. Luego añadimos el atributo de clase al elemento al que desee aplicar los estilos. Y usamos el nombre de la clase como valor para el atributo. Al tratarse de un atributo, separamos el nombre y el valor por un signo igual y el valor se coloca dentro de las comillas. Entonces volvamos a nuestro HTML e implementemos esto en nuestra página. Vamos a mover el estilo en línea que creamos para la decoración de texto a una hoja de estilo interna. Entonces en nuestra página bajo el elemento title, vamos a agregar el elemento style. Hacemos esto usando etiquetas de apertura y cierre con el estilo de texto. Ahora dentro del elemento de estilo, vamos a agregar el estilo que queremos usar en una clase llamada texto subyacente. Utilizamos un punto seguido del nombre subrayado texto, seguido de abrir y cerrar llaves rizadas. Dentro de los tirantes rizados agregamos los estilos. Por lo que en nuestro caso, queremos añadir texto decoración subrayado. Ahora, necesitamos agregar una clase al elemento. Eliminará los estilos en línea. Y lo reemplazaremos por el nombre de la clase. Decimos que clase es igual, y luego usamos comillas. Dentro de las marcas de cotización, agregamos el nombre de la clase. Vamos a guardar esto y recargar la página y nuestro navegador. La página sigue siendo la misma que cuando usamos estilos en línea. Ahora, si quisiéramos dar esto un paso más allá, podríamos extraer estos estilos en una hoja de estilo externa. Empezaremos creando un nuevo directorio para almacenar el archivo CSS. Dentro del directorio se creará un archivo llamado main.css. Ahora, vamos a mover los estilos del elemento style en nuestro archivo HTML a nuestro archivo main.css. A continuación podemos eliminar los elementos de estilo del documento HTML. Entonces, ¿cómo importamos este archivo CSS a nuestro archivo HTML? Bueno, en HTML, podemos usar un elemento llamado el elemento link. El elemento link permite declarar la relación entre el archivo actual y otro recurso desde fuera del archivo, usamos un atributo llamado relación, y esto se representa por la fila de textos. Esto indicará la relación entre el expediente actual y el archivo que vamos a enlazar. También necesitamos usar un atributo H ref para agregar la ubicación del archivo que vamos a enlazar. Link no muestra nada directamente, por lo que sólo necesitamos usar una sola etiqueta dentro de la etiqueta. Agreguemos el atributo rail. Entonces vamos a establecer esto a la hoja de estilo de texto porque esta es la relación. A continuación, agreguemos el atributo HREF y luego la ubicación del archivo CSS. En nuestro caso, esto es CSS slash main.css porque el archivo main.css ahora se almacena en el directorio CSS. Ahora guardemos el archivo y lo recarguemos en nuestro navegador. Nuevamente, nada ha cambiado visualmente desde la perspectiva del usuario, pero ahora el CSS se está importando desde un archivo externo. 19. Estilos adicionales: Bienvenido de nuevo. Ahora nos hemos familiarizado más con las hojas de estilo. Vamos a añadir algunos estilos más a nuestro documento. Lo primero que vamos a hacer es hacer que toda la página use un color de fondo de azul claro. Y también vamos a centrar todo el texto. Por lo que agregaremos una clase a la etiqueta de cuerpo llamada fondo principal. Ahora en el archivo CSS, agreguemos la clase. Y luego vamos a establecer el color de fondo azul claro y text-align center. A continuación, haremos que nuestra cabecera H1 sea marina, por lo que destaca un poco más. Por lo que agregaremos un costo al elemento H1 llamado encabezado. Dentro del archivo CSS, agregaremos la clase y vamos a establecer el color en azul marino. A continuación, queremos asegurarnos de que nuestra imagen esté centrada. Entonces agregaremos una clase al elemento de imagen llamado image. Entonces agregaremos esto al archivo CSS. En el CSS, estableceremos display para bloquear margin-left, auto. Margin-derecha, ancho auto a 50%. Usando el margen auto menos el centro un elemento de bloque horizontalmente. Ahora vamos a añadir algunos estilos adicionales a nuestra lista, para que también se centren. Agregaremos una clase llamada estilos UL. En el archivo CSS. Agregaremos esta clase. Estoy todo configurado display para bloque en línea. Esto significa que el elemento es tratado como un elemento en línea. Por lo que no hay fuerza nueva línea, y sólo tomará tanto ancho como sea necesario, pero también alinear el texto a la izquierda para que aparezca junto a los viñetas. Ahora guardemos nuestro archivo y lo recarguemos en. El navegador. La página ha cambiado y obtenemos todos los estilos que acabamos de aplicar mostrando en la pantalla. 20. Tablas: Bienvenido de nuevo. En este video, vamos a ver el uso de tablas en HTML. A veces cuando estás trabajando con HTML, es posible que tengas algunos datos que deseas mostrar en una tabla. Un ejemplo podría ser algunos resultados de puntuación. Esto también podría ser útil si tuvieras una página donde desea que muestre algunos detalles financieros en HTML, las tablas están representadas por el elemento de tabla. Esto es abrir y cerrar etiquetas con la tabla de impuestos. Cada fila dentro de la tabla está representada por el elemento de fila de tabla. Y estas son las etiquetas de apertura y cierre con el texto T suelen ser cuando se crea una tabla en la primera fila, se utilizan encabezados para las columnas. Y podemos hacer esto en HTML con el elemento de cabecera de tabla. Para utilizar esto, utilizamos las etiquetas de apertura y cierre con las letras TH en los encabezados de la tabla. También podemos establecer un atributo scope, que es muy útil cuando alguien con un lector de pantalla visita el sitio. En este atributo, establecemos cuando el valor es una fila o columna. Con todo esto, tienes una tabla configurada, pero no hay datos en la tabla. Para agregar datos a la tabla, utilizamos los elementos de datos de la tabla. Esto es abrir y cerrar etiquetas con las letras t, d. Si necesita que los datos de la tabla abarquen varias filas o columnas, entonces puede usar los atributos span de fila o colspan. Y se establece un número para el valor que indicará cuántas filas o columnas pero los datos deben abarcar. Entonces vamos a poner en práctica una mesa en nuestro expediente. Vamos a sumar una mesa en la que se mostrará el número total de medallas cada uno de nuestros atletas como uno en los Juegos Olímpicos en los que han participado. Agregaremos una mesa ante las cabeceras h3 con los deportes. Empecemos agregando el elemento de tabla. Añadimos etiquetas de apertura y cierre con la tabla de impuestos. Nuestra mesa tendrá dos columnas, una para el nombre de los atletas y otra para el conteo total de medallas. Ante esto, queremos sumar dos encabezados a nuestra mesa. Entonces para agregar los encabezados a nuestra mesa, primero necesitamos agregar una fila para contener los encabezados. Añadimos las etiquetas de apertura y cierre con las letras TR. Dentro de estas etiquetas, podemos sumar los encabezados. Por lo que agregamos el elemento de cabecera de tabla usando etiquetas con las letras TH. Vamos a sumar dos de estos. A medida que estos encabezados de las columnas establecerán el atributo scope con un valor llamado en cada uno de los elementos. Dentro del primer encabezado, agregaremos el atleta de texto. Y dentro del segundo encabezado, agregaremos las medallas de texto. Antes de ir más allá, guardemos esto y echemos un vistazo. Lo que hemos hecho hasta ahora en el navegador. Lo que vemos son nuestros dos encabezamientos porque no hemos agregado ningún dato, pero estamos en camino a crear nuestra primera tabla. Por lo que ahora vamos a seguir adelante y agregar algunos datos a nuestra mesa. Una, la primera fila, vamos a sumar cuántas medallas que soy Thorpe es una. Entonces empezamos por crear una fila. A continuación, necesitamos agregar dos celdas de datos, una para el nombre y otra para el total del metal. Hacemos esto usando los elementos de datos de tabla. Por lo que creamos etiquetas de apertura y cierre con las letras td. Dentro del primero, agregaremos la información del texto. Dentro del segundo, sumaremos nueve al conteo de medallas. Ahora tenemos que repetir estos pasos nuevamente para los otros dos atletas. Empecemos agregando otra fila. Ahora tenemos que agregar otros dos elementos de datos de tabla. En el primero añadiremos el texto Usain Bolt, y luego el segundo sumará ocho para el conteo medio. Por último, necesitamos agregar una fila de tabla final y otros dos elementos de datos de tabla. Dentro del primero, agregaremos el texto Simone Biles, y dentro del segundo se sumará y dentro del segundo se sumarásiete los datos de la tabla. Guardemos nuestro archivo y lo recarguemos en el navegador. Ahora podemos ver nuestra tabla con todos nuestros datos. Sin embargo, no está muy alineado con el resto de la página. Así que vamos a añadir algunos estilos dentro del elemento de tabla. Agregaremos un atributo de clase con la tabla de atleta de valor. Ahora dentro de nuestro archivo CSS, agreguemos esta clase. En la clase, vamos a establecer el ancho a 22.5 por ciento. Margin-izquierda auto, margin-derecha auto. Y vamos a darle a la mesa un color de fondo de verde. Vamos a guardar todo de nuevo y volver a cargar la página. Esta vez, nuestra mesa está centrada y tiene su propio color de fondo. 21. Introducción de formularios: Bienvenido de nuevo. En este video, vamos a introducir formularios en HTML en nuestra vida cotidiana, muchas veces rellenamos formularios cuando necesitamos compartir alguna información para algún propósito. Quizás estuviéramos atendiendo a una cita de salud o tal vez estamos solicitando un empleo. Pero a veces solo usamos un formulario para seleccionar algunos artículos que queremos comprar. Por lo general, un formulario es algún tipo de documento con espacios en blanco que rellenas con tus datos o haces algunas selecciones en HTML, formularios funcionan de manera similar a las de papel. Podemos utilizar el elemento formulario para recabar información de personas que visitan nuestra página web. A veces cuando visitamos una página web que solo usa un campo de entrada de texto como la Búsqueda de Google. En realidad estamos usando un formulario para usar un formulario en HTML, usamos el elemento formulario, que es el formulario de texto dentro del impuesto. Empecemos agregando un formulario a nuestra página. Haremos esto antes de la etiqueta del cuerpo de cierre. Utilizamos la etiqueta con el formulario de texto. Y luego lo cerramos. Podemos añadir algún texto dentro del formulario, igual que lo hacemos en el resto de la página con encabezados o párrafos, vamos a agregar un título para el formulario dentro de las etiquetas H1. Lo llamaremos preguntas. Forma. No es de mucho uso a menos que el usuario pueda realmente ingresar algunos datos. Utilizamos campos de entrada dentro nuestro formulario usando el elemento input. Dentro del elemento input, podemos establecer un atributo type el cual establecerá cómo se muestra el campo de entrada en la página web. Y también establece el tipo de datos que el usuario puede ingresar. De forma predeterminada, el atributo type se establece en texto para que el usuario pueda escribir texto en él. Podríamos cambiar esto a contraseña si quisiéramos que el usuario ingresara una contraseña o número oculto, si queríamos usarlo para agregar algunos números, podemos prellenar un campo de entrada de texto utilizando el atributo value. También necesitamos usar un atributo name. El atributo name se empareja con el valor ingresado en la entrada cuando se presenta el formulario. Entonces, por ejemplo, si tuviéramos un campo de entrada llamado primero y usuario escrito en su nombre, que era Fred cuando se presenta el formulario, primero sería igual a hilo en nuestra página. Agreguemos una entrada a nuestro formulario. Empezamos usando las etiquetas con el elemento input. Vamos a pedirle a nuestro usuario que aporte sus deportes favoritos. Entonces configuramos el tipo es texto, el nombre como pregunta. También estableceremos una identificación con Favorito. Para etiquetar una entrada, utilizamos el elemento label. Esto ayuda al usuario a identificar cuál es la entrada para el elemento de etiqueta usa etiquetas de apertura y cierre y el texto de la etiqueta se coloca entre las etiquetas para que la etiqueta se ajuste correctamente a la entrada correcta, necesitamos establecer un atributo id en la entrada, y luego un atributo afford con el mismo valor se establece en la etiqueta. Agreguemos una etiqueta a la entrada que acabamos de agregar. Por lo que usamos etiquetas de apertura, cierre con etiqueta. Establecemos el ID de la entrada que era favorita. Y entre las etiquetas, decimos, ¿cuál es tu deporte favorito? Si quisiéramos presentar múltiples opciones a nuestros usuarios y permitirles seleccionar cualquier número de opciones. Podríamos usar el elemento input y configurarlo en la casilla de verificación tipo. Vamos a añadir un conjunto de casillas de verificación a nuestro formulario para pedirle a nuestro usuario que seleccione a sus atletas favoritos, comenzará por usar el elemento de párrafo con el texto, seleccione a sus atletas favoritos. A continuación, agregaremos tres casillas de verificación, una para cada uno de nuestros atletas. Empezamos usando el elemento label y nos pondremos para dos. Thorpe también agregará el texto en Thorpe. A continuación añadimos la entrada. Establecemos id al mismo valor que el atributo for en la etiqueta, que es el nombre al atleta, tipo, a casilla de verificación, y valor a Thorpe. Vamos a repetir estos pasos de nuevo para nuestros otros atletas. Por lo que usamos el elemento de etiqueta. Y esta vez nos sentamos a dos lancha. También agregará el texto Usain Bolt. A continuación, agregamos la entrada. Dijimos id al mismo valor que el for atributo en la etiqueta, que es barco. Mueve ese nombre a atleta, tipo, casilla de verificación y valor para votar. Por último, volveremos a hacer esto por Simone Biles. Entonces usamos el elemento de etiqueta y nos sentamos por dos biles. También agregará los textos Simone Biles. A continuación, agregamos la entrada. Por lo que establecemos el ID al mismo valor que el for atributo en la etiqueta, que es Biblias. Después ponemos nombre a atleta, tipo, a chatbox, y valor para comprar viviendas. Agreguemos también un salto de línea entre cada una de las casillas de verificación para que cada casilla de verificación aparezca en una nueva línea. Para ello, usaremos el elemento de salto de línea, que son las letras BR dentro de la etiqueta. Sólo tenemos que usar una sola etiqueta para saltos de línea. Ahora vamos a guardar esto y recargar la página y nuestro navegador o formulario está empezando a tomar forma. Pero vamos a cambiar brevemente el orden de la primera entrada y etiqueta para que la etiqueta aparezca antes del campo de entrada. Entonces de vuelta en nuestro código colocará la etiqueta para el elemento de entrada. guardaremos y recargaremos nuevamente la página. Esta vez vemos la etiqueta aparece ante el campo. 22. Botones de formulario: Bienvenido de nuevo. En el último video, introducimos formularios en HTML. Al final del video, agregamos algunas casillas de verificación a nuestro formulario. Esto es genial cuando no nos importa cuántas opciones selecciona el usuario, pero si solo queremos que seleccionen un ítem que un botón de radio puede ser más apropiado. En este video, vamos a añadir un botón de radio a nuestro formulario, el cual pregunta al usuario si les gustó nuestra página web y darle la opción de seleccionar sí o no para crear un botón de radio, utilizamos los elementos de entrada y etiqueta, al igual que cuando creamos las casillas de verificación. Sin embargo, esta vez, configuramos el atributo type en el elemento input a radio. Volvamos a nuestra página e implementemos esto. Por lo que comenzaremos agregando algún texto dentro etiquetas p para preguntar al usuario si les gustó nuestra página web. Ahora agreguemos los dos botones de radio. Por lo que agregamos el elemento de entrada con el tipo establecido a radio o DTS. Nombre a pregunta y valor. Sí. Ahora para el elemento label, creamos la etiqueta usando las etiquetas de etiqueta. Y en medio de las etiquetas, agregamos el texto, sí. También estableceremos el atributo for en sí, ya que este es el ID en el elemento input. Vamos a repetir estos pasos de nuevo, pero esta vez por la opción no. Por lo que agregamos el elemento input con el tipo establecido a radio, Musette ID para saber, nombre, a cuestionar, y valor a saber. Ahora para el elemento label, creamos la etiqueta usando las etiquetas de etiqueta. Y en medio de las etiquetas añadimos los textos, no. También estableceremos el atributo for para saber ya que este es el ID en el elemento input. Vamos a guardar esto y volver a cargar la página y nuestro navegador. Ya podemos ver que nuestros botones de radio se han agregado a la página para que el usuario pueda seleccionar sí o no. 23. Envío del formulario: Bienvenido de nuevo. En computación, las computadoras envían y reciben información utilizando solicitudes HTTP. Si piensa en Internet como red de computadoras, entonces en pocas palabras, el cliente, que suele ser el navegador, puede enviar una solicitud a un servidor, y cuando lo hace, utiliza el protocolo HTTP. Se trata esencialmente de un conjunto de reglas o procedimientos para el envío de datos. El servidor responderá entonces de alguna manera usando el mismo protocolo HTTP. Cuando utilizamos un formulario, el usuario proporciona alguna información cual luego será entregada al servidor dentro de la solicitud HTTP con el fin de satisfacer la capacidad de enviar los datos del formulario a un servidor, tenemos que obtener los elementos de formulario y atributos para dónde debe enviarse la información del formulario y qué tipo de solicitudes HTTP realizar. Para ello, utilizamos el atributo action para indicar a dónde se envía la información, y luego un atributo de método para el tipo de solicitud. Y esto puede ser GET o post. Pero si estás usando datos confidenciales, debes usar post aquí, vamos a establecer la acción en una URL ficticia en nuestro formulario, a que llamaremos ficticia HTML, creará esta página. Ahora. dejaremos en blanco ya que esto es puramente para fines de exhibición. Luego usaremos el método post. Para poder enviar el formulario que perdimos, necesitamos agregar un botón de enviar a nuestra página. Para ello, utilizamos el elemento input con el atributo type set para enviar. Luego establecemos el valor a los textos que deben mostrarse en el botón. Si no establecemos este atributo de valor, será por defecto enviar. Entonces vamos a terminar nuestro formulario agregando el botón enviar, lo haremos al final del formulario. Entonces usamos el elemento input. Establecemos tipo para enviar. También estableceremos el valor para completar. Ahora guardemos esto y recarguemos la página en el navegador. Ahora tenemos nuestro formulario completo junto al resto de nuestra página. Ahora vamos a rellenar el formulario de algunos valores. Sigamos adelante y presionemos el botón Enviar. Nos navegamos a la página HTML de punto ficticia, que estaba en blanco. No obstante, podemos abrir las herramientas de desarrollador en nuestro navegador. En Chrome, accedemos a esto seleccionando View Developer JavaScript console. Luego vamos a la pestaña que dice red. Entonces volvamos a nuestra página y volvamos a enviar el formulario. Ahora, podemos inspeccionar la solicitud y ver los datos del formulario que fue enviado. Si hubiéramos utilizado get como método, los datos del formulario enviados serían visibles en la URL del archivo en la pantalla, razón por la cual esto no se sugiere para datos sensibles.