Crea sitios web con HTML: curso para principiantes

1. INTRODUCCIÓN: Hola, y bienvenidos, amigos. Mi nombre es Sant Kumar, y me emociona darle la bienvenida a esta nueva serie de tutoriales HTML Ya sea que esté comenzando su viaje hacia el desarrollo web o buscando repasar los fundamentos, está en el lugar correcto HTML es la columna vertebral de cada sitio web que visita. Es la base que estructura el contenido en la web desde texto e imágenes hasta formularios y videos. En este tutorial, desglosaremos HTML paso a paso, haciéndolo fácil y atractivo. Aprenderás a crear tu primera página web con etiquetas básicas. Estructurar el contenido usando encabezados, párrafos y listas. Agrega enlaces, imágenes y tablas para mejorar tus páginas. Usa HTML semántico para hacer que tus sitios sean accesibles y amigables con el SEO Al final, tendrás las habilidades para construir una página web simple desde cero y entender cómo los navegadores interpretan tu código. Sin experiencia previa, no hay problema. Empezaremos desde el principio. Así que vamos a sumergirnos. Tu primera línea de código HTML está a solo unos minutos de distancia. Listo para dar vida a tus ideas en la web. Empecemos. 2. ¿Qué es HTML?: Este video, voy a estar explicando lo que es HTML de una manera muy sencilla y fácil. HTML significa lenguaje de marcado de hipertexto. Es el lenguaje estándar utilizado para crear y diseñar la estructura de las páginas web. HTML se separa en dos partes. El primero es el hipertexto y el segundo es el lenguaje de marcado. ¿Qué es el hipertexto? Hipertexto significa texto o imágenes en las que se puede hacer clic que enlazan a otra página web, una dirección de correo electrónico o un archivo Por ejemplo, en un sitio web como example.com, cuando hago clic en un texto que dice más información, se abre una nueva página web o URL Este texto en el que se puede hacer clic se llama texto ancla, y se hace usando una etiqueta HTML especial llamada etiqueta ancla. No te preocupes. Aprenderemos más sobre esto en la próxima conferencia. ¿Qué es un lenguaje de marcado? Un lenguaje de marcado utiliza etiquetas y elementos para envolver el texto Estas etiquetas dan información adicional al navegador sobre cómo mostrar ese texto. Con el marcado, podemos hacer cosas como poner texto en negrita o cursiva, crear encabezados y párrafos, mostrar listas, agregar enlaces y mucho más De hecho, todo lo que ves en una página web, como encabezados, párrafos y listas se crea usando marcas Pero HTML no está solo. Para construir un sitio web completo, también necesitamos dos archivos más, CSS, hojas de estilo en cascada y JavaScript CSS maneja cómo se ve el sitio web como colores, fuentes, diseño y diseño. JavaScript agrega interactividad como clics de botones, deslizadores, animaciones o actualizaciones de contenido en vivo Juntos, HTML, CSS y JavaScript forman la base de todos los sitios web y aplicaciones web modernos. Entonces, ¿cómo funciona todo? Cuando abres una página web en tu navegador, éste lee el código HTML, entiende las etiquetas y renderiza el contenido que ves en tu pantalla. 3. Historia del HTML: Video anterior, aprendimos lo que es HTML. Ahora, hablemos de la historia del HTML, cuándo y cómo empezó este lenguaje y quién lo creó. Viajemos de regreso al inicio del HTML. HTML comenzó en el año 1991. Fue creado por un científico llamado Tim Berners Lee, quien trabajó en el Cern, un centro de investigación europeo Pensó en crear un sistema donde científicos de todo el mundo pudieran compartir información entre ellos y esta idea dio origen a la web mundial, el lenguaje que se creó para esta web se llamaba HTML. El primer documento HTML fue extremadamente básico. Sólo tenía encabezamientos, párrafos y enlaces. HTML no se creó ni una sola vez y se dejó sin cambios. Con el tiempo, evolucionó a través de muchas mejoras y actualizaciones. Echemos un vistazo a su versión sabia historia HTML 1.0 lanzada en 1993. Esta fue la primera versión de HTML. Tenía características muy básicas como formato de texto, encabezados, imágenes y enlaces Fue simple, pero inició la revolución web. HTML 2.0 lanzado en 1995. Esta versión agregó más estructura a las páginas web. Introdujo formas y tablas, permitiendo la entrada del usuario y un mejor diseño. HTML 2.0 se convirtió en el primer estándar oficial. HTML 3.2 lanzado en 1997. Esta versión fue una gran actualización. Es compatible con JavaScript, applets y diseños avanzados de tablas Hizo que los sitios web fueran más interactivos. HTML 4.01 lanzado en 1999. Esta fue una versión muy popular. Introdujo soporte CSS, mejores formas y características de accesibilidad. Los sitios web comenzaron a verse más modernos en XHTML 1.0 en el año 2000 Esta fue una versión más estricta del HTML escrito en formato XML Se requería código limpio y bien estructurado. HTML cinco lanzado oficialmente en 2014. Esta es la actualización más importante en la historia de HTML. HTML five nos trajo etiquetas de video y audio, Canvas para gráficos, diseño receptivo, geolocalización y muchas etiquetas semánticas como encabezado, pie de página y sección, y cambió la forma en que construimos sitios web y aplicaciones web modernos Nivel de vida HTML. Hoy en día, HTML está en constante evolución. Ya no esperamos versiones. Las últimas características se agregan gradualmente y son compatibles con los navegadores modernos. Ahora tal vez te estés preguntando ¿quién mantiene HTML? La respuesta es HTML es mantenido por el w3c, Consorcio web mundial Es una organización global que define estándares web, asegurando que los sitios web funcionen correctamente en todos los navegadores. 4. Historia del HTML: Conoce la historia del HTML. Ahora necesitamos instalar un editor de archivos HTML. Para ello, estaré usando código de Visual Studio o código VS. Es completamente gratis y muy fácil de usar. Pero si no quieres usar VS Code, no te preocupes. También puedes usar Bloc de notas plus plus. Es otro buen editor para archivos HTML. Primero, busca viscode en google.com. Ahora, da clic en el sitio web oficial de código de Visual Studio. En la página de descargas, verás opciones para diferentes sistemas operativos. Si eres usuario de Windows, descarga el archivo de instalación de Windows. Para los usuarios de Mac, elija la versión MAC. Y para Linux, selecciona la versión que se ajuste a tu SO. Una vez completada la descarga, instala el software. Después de la instalación, abre el código VS y verás su interfaz. Para crear un nuevo archivo, simplemente vaya al menú Archivo y haga clic en Nuevo archivo de texto. Si desea abrir un archivo existente, haga clic en Abrir archivo y elija su archivo HTML desde su computadora. Ahora, instalemos una extensión útil que te permita previsualizar tu página HTML directamente dentro del código VS. Haga clic en el icono de extensiones en la barra lateral. Parece un cuadrado con cuatro cajas. En la barra de búsqueda escribe HTML preview, y aquí verás la lista de plugins. Ahora, haga clic en esta extensión de vista previa HTML y luego haga clic en el botón Instalar. Una vez que cambia para desinstalar, significa que la extensión se ha instalado correctamente. Ahora, vamos a personalizar algunos ajustes para una mejor experiencia de codificación. Haga clic en el icono de engranaje en la esquina inferior izquierda y vaya a ajustes. En la sección de archivos, puedes elegir cuándo se guarda tu archivo. Personalmente prefiero el cambio de enfoque. También puede desplazarse hacia abajo para cambiar el tamaño de fuente y puede establecer cualquier tamaño de fuente. Y aquí también puedes elegir tu familia de fuentes favorita. Ahora, vuelve a hacer clic en el icono de engranaje, luego ve a tema y Tema de color. Aquí podrás explorar y elegir el tema que más te guste. Pero prefiero usar el tema oscuro moderno, pero también puedes seleccionar otro tema. Y eso es todo. Ahora estás todo configurado para escribir , editar y previsualizar tu código HTML en código VS. En el siguiente video, entenderemos la estructura básica de la página HTML. 5. Estructura de documentos Html: Discutir la estructura básica del documento HTML. Esta es una página HTML básica. Puedes encontrar esta página en carpeta de ejercicios ahora, te explico su estructura documental. Esta declaración Doc IP le dice al navegador sobre la versión HTML que se está utilizando. En este caso, especifica que se trata de un documento HTML cinco. Este elemento HTML es el elemento raíz del documento. El atributo Lang especifica que el idioma de los documentos, N significa el idioma inglés. Puede establecer cualquier idioma que desee cambiando el período del código de idioma, como FR para francés, S para español, la sección head contiene meta información sobre la página web. Metadatos meta Charset UTF eight define el conjunto de caracteres, asegurando el soporte para caracteres especiales y múltiples idiomas Título establece el título que se muestra en la pestaña del navegador. sección Head también contiene los enlaces a hojas de estilo o scripts, y la sección del cuerpo contiene el contenido visible de la página web como encabezados, párrafos, imágenes y enlaces Para guardar esta página HTML, haga clic en archivo y seleccione Guardar. Y puedes elegir cualquier nombre. Escojamos Básico. Y para las páginas HTML, la extensión debe ser HTML punto. Ahora guarda ahora ve a la carpeta y haz doble clic en el archivo T HTML para abrirlo en el navegador. Puedes ver la página web. 6. Cómo escribir una etiqueta Html: En esta lección aprenderemos sobre los elementos HTML, que son los bloques de construcción de cada documento HTML. Para crear un elemento en HTML, necesitamos dos partes, una etiqueta de apertura y una etiqueta de cierre. Tomemos un ejemplo usando la etiqueta de párrafo. Primero, escribe el símbolo menos que, luego el nombre de la etiqueta como P, y luego el símbolo mayor que. Esta es la etiqueta de apertura. Para cerrar el elemento, nuevamente, comience con el símbolo menor que, luego agregue una barra diagonal hacia adelante, seguida del nombre de la etiqueta, y finalmente, el símbolo mayor que Esta es la etiqueta de cierre. Ahora, colocamos el contenido entre las etiquetas de apertura y cierre. Toda esta estructura se llama un elemento HTML. La mayoría de los elementos HTML siguen esta estructura. Tienen tanto una etiqueta de apertura como una de cierre, y contienen algún contenido en su interior, pero algunos elementos HTML no contienen ningún contenido. Estos se denominan elementos de cierre automático. Por ejemplo, la etiqueta BR, que se usa para insertar un salto de línea, la etiqueta HR, que se usa para insertar una línea horizontal. Estas etiquetas no necesitan una etiqueta de cierre. Se cierran. Así es como funcionan los elementos HTML con etiquetas de apertura y cierre o, a veces, las de cierre automático. En la siguiente lección, aprenderemos a escribir comentarios HTML. 7. Comentario en Html: En este tutorial, aprendemos a escribir un comentario en HTML. Un comentario en HTML es una línea especial de texto que no se muestra en el navegador web. Se utiliza para dejar notas o explicaciones para usted o para otros desarrolladores. Para escribir un comentario, necesitamos menos que símbolo luego exclamación y guión guión y para cerrar Necesitamos dash dash y mayor que símbolo. Aquí, puedes ver que los comentarios no se muestran en la página web, pero nos ayudan a entender mejor el código. En el siguiente tutorial, aprendemos sobre los elementos de encabezado. 8. Encabezados en Html: En este video, aprenderemos sobre los encabezados HTML. Hay seis tipos de encabezamientos en HTML, H uno, tres, H cuatro, H cinco y H seis Escribamos la etiqueta H one. Primero, escribe la etiqueta de apertura H one, luego la etiqueta de cierre, luego coloca el contenido y guarda el archivo HTML. En el navegador, se puede ver el texto del encabezado H one. Ahora, escribamos la etiqueta H dos, la etiqueta apertura H dos y la etiqueta de cierre, luego coloquemos el contenido. Aquí hay algo genial ya que ya instalamos la extensión de vista previa HTML en código VS, así podemos previsualizar nuestro código directamente dentro del editor haciendo clic en el icono de vista previa. No es necesario cambiar a un navegador cada vez. Ahora escribe H tres, H cuatro, H cinco, H seis. Aquí puedes ver que la etiqueta H one tiene el tamaño de texto más grande y se usa como encabezado principal de la página. Todas las demás partidas como H dos a H seis se consideran subpartidas y sus tamaños disminuyen gradualmente en función Por lo general, usamos solo una etiqueta H una por página para resaltar el enfoque principal de la página. Y una pregunta más, ¿por qué usamos los titulares en la estructura y organización HTML Ayuda a dividir el contenido en secciones. Optimización de motores de búsqueda SEO. Los motores de búsqueda le dan más importancia a H one para mejorar el ranking. Accesibilidad y legibilidad. Hace que el texto sea claro y fácil de escanear. 9. Etiquetas de párrafos, br y hr: Ahora puedes ver que he colocado algo de texto dentro de la etiqueta del cuerpo. Básicamente, hay cuatro piezas separadas de contenido como cuatro párrafos. Pero cuando previsualizamos el archivo, sólo aparece un párrafo grande. ¿Por qué sucede esto? Porque el navegador solo renderiza etiquetas HTML adecuadas, no texto plano. Entonces, para mostrar el contenido correctamente, necesitamos usar la etiqueta P de la media del párrafo. Arreglemos esto ahora. Primero, escribe la etiqueta de apertura, luego escribe la etiqueta de cierre. Ahora se pueden ver dos párrafos. Agreguemos otra etiqueta P aquí. Y aquí y aquí otra vez. Genial. Ahora puedes ver cuatro párrafos, cada uno espaciado muy bien por debajo del otro. Hay una cosa más que quiero mostrarte. Si quieres mover solo una parte del texto a la siguiente línea sin crear un nuevo párrafo, usamos la etiqueta BR. Escribe el BrTag aquí mismo. Tenga en cuenta que BrTag es una etiqueta de cierre automático, por lo que no necesita una etiqueta de cierre Ahora puedes ver que el texto se ha movido a la siguiente línea. Si agrega otra etiqueta BR, el texto se mueve hacia abajo dos líneas similares a un nuevo párrafo. Pero recuerde, esta no es una buena práctica para crear espacio entre bloques de contenido para un espaciado y estructura adecuados. Siempre use la etiqueta P para párrafos, no múltiples etiquetas BR. Una última etiqueta para esta lección, si quieres dividir secciones de texto con una línea horizontal, puedes usar la etiqueta HRtag Escribamos la etiqueta HR aquí mismo. Verás aparecer una línea horizontal a lo largo de la página, lo cual es genial para separar visualmente el contenido. Entonces, eso es todo. Ahora aprendimos a usar párrafos, saltos de línea, líneas horizontales. Espero que esto te haya ayudado a entender cómo estructurar correctamente el texto en HTML. Nos vemos en la siguiente lección. 10. Etiquetas sólidas y audaces: HTML, usamos la etiqueta fuerte y la etiqueta B media negrita para hacer que el texto sea negrita. La visualización de ambas etiquetas se ve igual. En el primer párrafo usaré la etiqueta fuerte. Supongamos que quiero poner este texto en negrita. Escribamos la etiqueta de apertura y luego la etiqueta de cierre. Se puede ver que el texto está en negrita. En el segundo párrafo, usemos la etiqueta en negrita, escribamos la etiqueta de apertura. Y la etiqueta de cierre. Ahora, en vista previa, y se puede ver que ambos se ven igual. Ahora bien, la gran pregunta es, ¿cuándo debemos usar la etiqueta fuerte y cuándo la etiqueta en negrita? Para usar la etiqueta fuerte. Si quieres resaltar un fragmento de texto con gran importancia o urgencia, usa la etiqueta fuerte. Es ideal para advertencias, instrucciones críticas o términos clave que requieren atención adicional para etiquetas en negrita. Cuando podrías usarlo para resaltar palabras clave o nombres en un contexto donde solo importa el estilo visual sin agregar ningún significado semántico Nos vemos en la siguiente lección. 11. Etiquetas de cursiva (i y em): En esta lección, aprenderemos a hacer cursiva de texto usando dos etiquetas diferentes, I y tag para iTag Ahora, escribe la etiqueta de apertura. Y la etiqueta de cierre. Se puede ver que el texto se ha convertido en cursiva para la etiqueta IM. Ahora, escribe la etiqueta de apertura y la etiqueta de cierre. En vista previa, se puede ver que ambos se ven igual. Pero aquí está la pregunta importante. Cuándo debes usar eTag y cuándo debes usar etiqueta para Itag Quiero indicar un cambio en la voz o el estado de ánimo o al mostrar texto que esté en un idioma diferente, términos técnicos, pensamientos o títulos de obras donde no se necesita énfasis semántico, palabras o frases extranjeras, términos técnicos o términos técnicos Ahora etiqueta. La etiqueta es un elemento semántico utilizado para denotar énfasis en una palabra o frase Esta etiqueta no solo renderiza el texto en cursiva por defecto, sino que también transmite que el texto debe ser resaltado o resaltado, lo que puede ser importante para los lectores de pantalla y Eso es todo por tutorial sobre etiquetas itálicas en HTML, y te veré en la siguiente lección. 12. Elementos de bloque vs. en línea: HTML, cada elemento tiene un comportamiento de visualización predeterminado. Algunos elementos ocupan todo el ancho de la pantalla como ladrillos en una pared, mientras que otros fluyen como palabras en una oración. Estos se conocen como elementos de nivel de bloque y en línea. Vamos a desglosarlos. Elementos de nivel de bloque. Comienza en una nueva línea como un salto de párrafo. Tome el ancho completo disponible de izquierda a derecha. Puede tener ajuste de altura, ancho , márgenes y relleno. TV, párrafo, encabezado, elemento de lista, etiquetas de sección de tabla, etcétera Ahora en línea elementos. Fluir dentro del texto, sin saltos de línea antes, después. Solo ocupan tanto ancho como sea necesario. Ignorar los márgenes superiores inferiores y las dimensiones fijas. Span fuerte, ancla, M, IMG, etiquetas de botón, etcétera. En este texto, estoy usando la etiqueta de párrafo. Notarás que la etiqueta P comienza en una nueva línea y ocupa todo el ancho disponible. Ahora, usemos la etiqueta fuerte. Se puede ver esto en el elemento de línea sólo ocupa tanto ancho como sea necesario sin salto de línea. Espero que hayas entendido la diferencia entre estas dos etiquetas. 13. listas en Html: Son principalmente tres tipos de listas en HTML. Primera lista desordenada, segunda lista ordenada, tercera lista descriptiva Primero, hablemos de la lista desordenada. Una lista desordenada muestra los elementos mediante viñetas. No muestra ningún orden o ranking específico. Escribamos el código para ello. Primero, escriba la etiqueta de apertura UL. Después la etiqueta de cierre, UL significa lista desordenada Ahora, dentro de las etiquetas UL, usaremos la etiqueta LI. Li significa elemento de lista, escribe la etiqueta de apertura I, luego la etiqueta de cierre, y coloca tu contenido en el medio. Agreguemos algunos elementos más de la lista de la misma manera. Se puede ver que todos los elementos se muestran con viñetas. Ahora pasemos a listas ordenadas. Una lista ordenada muestra los artículos en un orden específico usando números o letras. Es como una lista desordenada, pero en lugar de UL, usamos OL, que significa lista ordenada Ahora usa OL aquí y OL aquí. Por defecto, muestra uno, dos, tres, pero podemos personalizarlo usando el atributo type. Ahora escribe escribe aquí y da valor pequeño A. Ahora puedes ver que su orden ha cambiado a alfabético para el número romano. Usa I pequeño y consulta la vista previa. Verás números romanos. También puedes usar A y I. Vamos a usar A, ver la vista previa, y yo veo la vista previa. Por último, aprendamos sobre las listas descriptivas. Una lista descriptiva, también conocida como lista de definiciones se utiliza para enumerar términos y sus definiciones correspondientes. Utiliza una combinación de DT para el término de definición y DD para la descripción de la definición. Tenga en cuenta que no se utiliza en las listas descriptivas. Ahora escribe etiqueta de apertura DL y etiqueta de cierre. Lista de definición de medias DL. Luego escribe la etiqueta de apertura DT y la etiqueta de cierre. DT término de definición media. Después coloca el contenido. Ahora escribe la etiqueta de apertura DD y la etiqueta de cierre, luego coloca el contenido. Ahora repite de nuevo el proceso y podrás ver la vista previa. Espero que este tutorial te haya ayudado a entender los diferentes tipos de listas en HTML, vemos en la siguiente lección. 14. Etiquetas de bloqueo: HTML, utilizamos las etiquetas Q y blockquote para citar texto. Si quieres citar una línea corta o texto en línea, usa la etiqueta Q. Déjame mostrarte un ejemplo. Ahora, si queremos citar este texto, entonces usa la etiqueta Q de apertura y la etiqueta de cierre. Esto le dice al navegador que lo muestre con comillas. Así que recuerda, para cotizaciones cortas, usa Q con una etiqueta de apertura y cierre. Ahora bien, si quieres citar un párrafo completo, usa la etiqueta blockquote Esta etiqueta se utiliza para citas largas a menudo de un libro, artículo 0R persona Ahora envuelva el párrafo con la etiqueta de comillas de bloque. En la vista previa del navegador, se ve simple al principio, pero si le damos estilo con CSS, podemos hacer que se vea hermosa. 15. Etiquetas Sup y Sub: HTML, utilizamos las etiquetas SUP y SUB para crear superíndices y subíndices Estas etiquetas nos ayudan a mostrar textos ligeramente por encima o ligeramente por debajo de la línea de texto normal. Son especialmente útiles en ecuaciones matemáticas, fórmulas químicas o notas al pie Empecemos con la etiqueta SUP, que se utiliza para el texto superíndice Mueve el texto un poco por encima de lo normal. Por ejemplo, escribamos la famosa ecuación de Einstein. E equivale a MC al cuadrado. Ahora necesitamos mostrar dos ligeramente arriba para esto, ahora escribir la etiqueta SUP de apertura y la etiqueta de cierre. Ver la vista previa. A continuación, tenemos la etiqueta SUB, que se utiliza para el texto de subíndice Esto mueve el texto un poco por debajo de la línea normal. Intentemos una fórmula química para escribir la fórmula química del agua, que es h2o. Ahora escriba la etiqueta SUB de apertura y la etiqueta de cierre y vea la vista previa. Pasemos a la siguiente lección. 16. Fecha y hora en Html: HTML cinco, el elemento time se utiliza para representar fechas, horas o duraciones en un formato legible por máquina Este elemento le permite incrustar tanto información de fecha y hora amigable para humanos en su documento, lo que puede ser útil para navegadores, motores de búsqueda o scripts que necesitan procesar la información de fecha y hora Empecemos con una fecha sencilla. Primero, escribe la etiqueta de horario de apertura y la etiqueta de cierre. Luego definimos la fecha usando el atributo datetime, y usamos este formato, year month date Ahora escribamos un tiempo. Primero, escribimos la etiqueta de tiempo, y luego definimos la hora usando el atributo date time. Y utilizamos este formato HH colon M para representar horas y minutos. Ahora combinemos fecha y hora. Primero, escribimos la etiqueta de tiempo, y luego definimos la fecha y hora usando el atributo datetime Para datetime, utilizamos este formato, fecha T y periodo de tiempo, donde la T separa los componentes de fecha y hora Espero que entendieras cómo funciona el elemento time en HTML cinco. Hace que tu contenido sea más significativo y estructurado, no solo para los usuarios, sino también para las máquinas. Pasemos al siguiente capítulo. 17. URL en Html: Alguna vez te has preguntado cómo tu navegador sabe exactamente a dónde llevarte cuando tecleas una dirección web? Eso es todo gracias a algo llamado URL y URL significa Localizador uniforme de recursos. Es la dirección de un recurso como una página web, imagen o archivo en Internet. Así como necesitamos una dirección para visitar la casa de alguien, el navegador necesita una URL para visitar una página web específica. Esta es una URL simple. Et lo descomponen paso a paso. La primera parte es el esquema o protocolos que le indican al navegador cómo acceder al recurso. Los esquemas más comunes son HTTP y HTTPS. HTTP significa protocolo de transferencia de hipertexto. Es el sistema utilizado por los navegadores web y servidores para enviar y recibir información como páginas web, imágenes o texto a través de Internet. Cuando escribe una URL comenzando por HTTP, su navegador sabe usar este protocolo para comunicarse con el servidor, HTTPS, como HTTP, pero con seguridad extra. El S al final significa seguro. Utiliza encriptación SSL o TLS para mantener tus datos seguros cuando viajan entre tu navegador y el servidor del sitio web ¿Por qué es importante HTTPS? Protege datos confidenciales como contraseñas, tarjetas de crédito o datos personales. Genera confianza, especialmente para el comercio electrónico o sitios web de inicio de sesión, y algunos otros esquemas comunes son FTP para transferencia de archivos, correo para enviar correos electrónicos. Luego viene el nombre de dominio. Ahora vamos a discutir la URL compleja. La primera parte son los protocolos, luego el nombre de dominio, luego el puerto opcional. A veces verás un número de puerto como el 8080. Esta es una puerta específica a un servidor. Si no se dan los navegadores usan puertos predeterminados como 80 para HTTP o 443 para HTTPS. La ruta especifica la página exacta o archivo como le dice al servidor, quiero este recurso específico. Después de un signo de interrogación, tenemos parámetros de consulta. Estos pasan información extra al servidor que se suele utilizar en búsquedas o filtros. Por último, un fragmento apunta a una sección específica de una página. Ahora tal vez se esté preguntando ¿cómo funciona exactamente una URL detrás de escena? Cuando ingresas una URL en tu navegador y pulsas Enter, esto es lo que sucede. El navegador comprueba si la URL es válida. Después se pone en contacto con un servidor DNS para encontrar la dirección IP del dominio. Después abre una conexión a ese servidor usando el protocolo especificado como HTTPS. Después de eso, envía una solicitud para cargar la página o archivo. Por último, el servidor responde con el contenido y el navegador te lo muestra. Entonces eso es todo. Ya sabes qué es una URL y qué significa cada parte. En la siguiente lección, aprenderemos cómo hacer enlaces clicables usando URL 18. Etiqueta de anclaje: HTML, creamos hipervínculos usando la etiqueta A, que se llama la etiqueta ancla Permite a los usuarios hacer clic y navegar a otra página web, un archivo, una dirección de correo electrónico o incluso una sección diferente de la misma página. Ahora escribe la etiqueta de anclaje de apertura y la etiqueta de cierre. Después coloca el texto del enlace. Y en lugar de texto, también puedes usar una imagen como enlace. Luego use el atributo HRF. El atributo HRF significa referencia de hipertexto, y esto contiene la URL o la ruta a donde desea que vaya el enlace Piense en ello como el destino del enlace. Después colocas la URL entre comillas. En el navegador, hago clic en el texto Link, y se abre el sitio example.com y una cosa más También puede crear un enlace que abra la aplicación de correo electrónico del usuario. Escriba la etiqueta de anclaje de apertura y la etiqueta de cierre. Escribir texto de enlace entre las etiquetas. Entonces usa el atributo HRF aquí, escribe correo a Colon alguien en example.com Cuando el usuario haga clic en este enlace, abrirá su aplicación de correo electrónico con la dirección ya llenada. En la siguiente lección, profundizaremos y usaremos los atributos title y target. 19. Atributos de títulos y objetivos: En esta lección, aprenderemos sobre dos atributos útiles de etiqueta de anclaje, el atributo title y el atributo target, el atributo title. Cuando quieras dar a los usuarios más información sobre un enlace antes de que hagan clic en él, usa el atributo title. Escribe el atributo title y da cualquier descripción significativa. Cuando alguien se cierne sobre este enlace, mayoría de los navegadores mostrarán una pequeña punta de herramienta con su descripción Esto es especialmente útil para la accesibilidad. Discutamos el atributo target. El atributo target en HTML determina dónde se debe abrir un enlace cuando se hace clic Es como dar indicaciones a tu navegador. ¿Debería cargar la nueva página aquí mismo en una nueva pestaña o incluso en un marco oculto? Hay principalmente dos tipos de atributo de destino primero yo, segundo en blanco. Vamos a desglosarlo. Uno mismo objetivo. Este valor es el valor predeterminado para el atributo target. Escribe el atributo target y da valor self. Cuando hago clic en este enlace, la página web actual desaparece, y example.com toma su lugar La media de sitios se abre en la misma ventana cuándo usar. Navegación simple como moverse entre páginas en tu propio sitio web. Cuando no quieras abarrotar el navegador con pestañas adicionales, ahora hablemos del objetivo en blanco Abre el enlace en una nueva ventana o pestaña. Definamos el blanco objetivo. Cuando hago clic en el texto del enlace, el sitio se abre en una nueva ventana. Por qué usarlo Cuando se vincula a sitios web externos. Y para referencias, recursos o herramientas que los usuarios puedan querer verificar sin perder su lugar. Nota de seguridad importante. Siempre agregue nupener ARL cuando use blank para evitar Para usuarios avanzados, el atributo target también puede controlar los marcos. Padre se abre en el marco padre si está utilizando marcos anidados La parte superior se rompe de todos los marcos y carga el enlace en la ventana completa. Nombre personalizado, ejemplo, se abre en un marco e específico. Ahora estás listo para crear enlaces más inteligentes y fáciles de usar. 20. Atributos de Html: Los atributos HTML son palabras clave especiales que se utilizan dentro de una etiqueta de apertura de elementos para modificar su comportamiento, apariencia o proporcionar información adicional. Actúan como configuraciones o propiedades para elementos HTML, ayudándote a controlar cómo funcionan o muestran. Aquí hay algunos puntos clave escritos como un nombre y valor de atributo. Algunos son globales, mientras que otros son específicos de elementos pueden cambiar la funcionalidad, la accesibilidad o el estilo. Por ejemplo, en esta URL, HRF, target y title son todos atributos En HTML, algunos atributos globales se pueden usar con casi cualquier elemento. ID para identificar unívocamente un elemento. Clase para agrupar elementos para estilo o Javascript. Estilo para aplicar CSS en línea, ref para dar un enlace dentro del SRC de Atag para especificar el origen de una imagen dentro de la etiqueta IMG, Alt para proporcionar texto alternativo para una imagen, título para mostrar una punta de herramienta en Mouse Hover, objetivo para abrir un enlace en una nueva pestaña 21. Elementos de bloque vs. en línea: HTML, cada elemento tiene un comportamiento de visualización predeterminado. Algunos elementos ocupan todo el ancho de la pantalla como ladrillos en una pared, mientras que otros fluyen como palabras en una oración. Estos se conocen como elementos de nivel de bloque y en línea. Vamos a desglosarlos. Elementos de nivel de bloque. Comienza en una nueva línea como un salto de párrafo. Tome el ancho completo disponible de izquierda a derecha. Puede tener ajuste de altura, ancho , márgenes y relleno. TV, párrafo, encabezado, elemento de lista, etiquetas de sección de tabla, etcétera Ahora en línea elementos. Fluir dentro del texto, sin saltos de línea antes, después. Solo ocupan tanto ancho como sea necesario. Ignorar los márgenes superiores inferiores y las dimensiones fijas. Span fuerte, ancla, M, IMG, etiquetas de botón, etcétera. En este texto, estoy usando la etiqueta de párrafo. Notarás que la etiqueta P comienza en una nueva línea y ocupa todo el ancho disponible. Ahora, usemos la etiqueta fuerte. Se puede ver esto en el elemento de línea sólo ocupa tanto ancho como sea necesario sin salto de línea. Espero que hayas entendido la diferencia entre estas dos etiquetas. 22. Imágenes en Html: Las imágenes son una parte fundamental del diseño web, y HTML proporciona varias formas incluirlas y administrarlas en las páginas web. Ellos transmiten visualmente información, mejoran la experiencia del usuario y hacen que el contenido sea más atractivo. Los fundamentos de la etiqueta IMG, la etiqueta IMG se utiliza para incrustar imágenes en un documento HTML Es una etiqueta de cierre automático. No requiere una etiqueta de cierre. Ahora escribe la etiqueta IMG y usa el atributo source. Este atributo SRC especifica la ruta media de origen o URL de la imagen Es el único atributo requerido para que la etiqueta IMG funcione Sin él, el navegador no sabrá qué imagen mostrar. Entonces usamos la ruta, que podría ser local o externa para local, bien usamos el nombre de la imagen o la ruta de la carpeta donde se guarda la imagen. Ahora escribe la ruta de la imagen y recuerda guardar tu archivo HTML en la ubicación correcta relativa a tus imágenes. Y se puede ver en la vista previa. Ahora, déjame explicarte sobre la ruta de la carpeta. Supongamos que queremos mostrar esta imagen. Se puede ver que he colocado esta imagen dentro de una carpeta llamada blog. Aquí, la ruta de la imagen serán los blogs Nombre de la imagen. Escribamos el camino. Una cosa importante a tener en cuenta es que tu página HTML debe guardarse fuera de la carpeta del blog. De lo contrario, el camino no funcionará. En HTML, la ubicación del archivo HTML también debe ser correcta junto con la ruta de la imagen. Sólo entonces la imagen se mostrará correctamente. Para imágenes externas, usa la URL completa, puedes ver en la vista previa. Ahora puedes agregar y administrar fácilmente imágenes en tus proyectos web. 23. Atributos de alt, ancho, altura y título: etiqueta IMG admite varios atributos para controlar cómo se muestra y se comporta la imagen Vamos a explorarlos en profundidad. Alt, texto alternativo. El atributo Alt proporciona texto alternativo para las imágenes, lo que mejora la accesibilidad al describir la imagen para lectores de pantalla, ayuda al SEO al ayudar a los motores de búsqueda a comprender el contenido y muestra texto de marcador de posición si la imagen no se carga Escribe el atributo Alt, y aquí puedes dar una descripción significativa. Tenga en cuenta que si la imagen es puramente decorativa, puede usar un atributo Alt vacío pero nunca omitirlo por completo. Ancho y alto. Especifica el ancho y alto de las imágenes en píxeles o a veces como porcentaje, aunque los píxeles son más comunes y ayuda al navegador a reservar espacio para la imagen antes de que se cargue, evitando el diseño. Ahora mismo, estás viendo la imagen en tamaño completo del navegador. Puede establecer el ancho y la altura de las imágenes para mantenerlas en un tamaño fijo. Establece el ancho por cualquier valor como 400 con una unidad como Px o por ciento dependiendo de tus necesidades. Para la altura, puede asignar un valor o establecerlo en auto. Vamos a configurarlo automático. Ahora puedes ver en la vista previa que el ancho de la imagen se ha establecido en 400 píxeles. Texto de punta de herramienta de título. Muestra una punta de herramienta cuando el usuario pasa el cursor sobre la imagen Uso opcional, pero útil para contexto adicional. Escribe título y da significado descripción completa. Cuando lo pongo encima, se puede ver la descripción. 24. Formato de soporte para imágenes: HTML admite varios formatos de imagen a través de la etiqueta IMG, dependiendo de la compatibilidad del navegador JPEG slash JPG, lo mejor para fotografías, imágenes realistas con gradientes, PNG ideal para imágenes con transparencia o bordes afilados GIF admite animaciones simples y transparencia, pero limitado a 256 colores. WebP formato moderno con compresión superior y calidad ampliamente soportado ahora Las imágenes SVG y vectoriales utilizan rutas basadas en matemáticas y son ideales para logotipos, iconos e ilustraciones. AVF AV un formato de archivo de imagen, imágenes de próxima generación de alta eficiencia, compresión superior y soporta HDR, transparencia y animación Pero estas imágenes tienen un soporte limitado para navegadores, significan solo navegadores más nuevos. 25. Imágenes responsivas: HTML, el tamaño de una imagen es muy importante. Si está abriendo un sitio web en una pantalla grande como un monitor o computadora portátil, la resolución y el tamaño de la imagen deben ser altos para que la imagen se vea clara y nítida ya imágenes de alta resolución contienen más detalle y color. Sin embargo, si abres el sitio web en un dispositivo móvil, especialmente en un área de red baja, imágenes de alta resolución pueden tardar más en cargarse. Para resolver este problema, podemos reducir el tamaño y la resolución de la imagen para dispositivos más pequeños usando HTML. Hoy en día, hay muchas pantallas diferentes con densidades de píxeles variables, algunas con una X, otras con dos X, tres X o incluso cuatro X densidad de píxeles Para manejar esto, podemos usar imágenes receptivas en HTML, modo que permite al navegador elegir la mejor fuente de imagen en función del tamaño de la pantalla, la resolución u otros factores. Déjame explicarte de dos maneras. Para la densidad de píxeles, permite que el navegador elija la mejor imagen en función de la densidad de píxeles. Ahora tenemos múltiples versiones de una imagen, y el navegador elige la más adecuada. Aquí, presiona Enter, luego escribe el conjunto SRC El atributo set SRC permite al navegador elegir la imagen más adecuada en función tamaño de pantalla y la resolución del dispositivo Después llama a la imagen por defecto y define la resolución una por una. Entonces llama a una imagen doble de mayor resolución y establece los dos por dos de resolución. Y para el tercer set tres veces resolución. Ahora abre la página en MoslefurFox y da click derecho y ve a inspeccionar y da click sobre Aquí puede cambiar DPR para mostrar imagen de alto h como DPR dos y DPR Aquí, puede ver que las imágenes se están renderizando manera diferente dependiendo de la relación de píxeles del dispositivo DPR Ahora para tamaños, permite que el navegador elija la mejor imagen en función del tamaño de la pantalla. Primero, definimos el atributo set SRC especificando la imagen predeterminada seguida de una imagen con 400 W, lo que significa 400 píxeles de ancho Luego la segunda imagen con tamaño 800 W, y luego la tercera con 1,200 W. Después de eso, usamos el atributo sizes, que especifica el tamaño de visualización previsto para cada salsa. En tamaños, primero usamos el ancho máximo para definir el ancho del navegador como 600 píxeles, luego seguido por el tamaño de la imagen. Después repetimos con otro ancho y tamaño máximo. Y finalmente, definimos el tamaño de la imagen. Ahora, guarda la imagen y ábrela en Mozilla Firefox. Haga clic derecho sobre la imagen y seleccione Inspeccionar. Luego haga clic en el icono de la barra de herramientas del dispositivo. Aquí, puedes ver el ancho del navegador en píxeles. Al arrastrar la barra de ancho, la imagen cambia de acuerdo con el tamaño del navegador definido en las condiciones de ancho máximo en el atributo sizes. 26. Etiqueta de imagen: Quiere llamar a diferentes imágenes para diferentes tamaños de pantalla, luego usamos la etiqueta de imagen. Ahora mismo, estás viendo esta imagen, y queremos llamarla para pantallas grandes. Esto es para tabletas y este tamaño para móviles. Déjenme explicarles cómo llamarlos. Primero, envuelva la etiqueta de la imagen. Y la etiqueta de imagen es ideal porque permite especificar múltiples fuentes de imagen y definir condiciones como el ancho de pantalla para cuándo se debe usar cada imagen. Y luego la fuente y SRC establecen los atributos y definen la imagen y escriben los medios y establecen condiciones como el ancho mínimo, luego definen el valor Ahora repite el proceso. Y nuevamente, ahora ve a Mozilla Firefox. Y cuando arrastre la barra lateral de ancho, se puede ver que las imágenes están cambiando con ancho del navegador de acuerdo o el tamaño de la pantalla. 27. Tabla en Html: Vas a aprender todo lo que necesitas saber sobre las tablas HTML. Significa cómo crearlos, estilizarlos y organizarlos, e incluso hacerlos más accesibles y poderosos mediante el uso de atributos como colspan, rowspan y etiquetas estructurales como Thad, T body y TFoot T body Una tabla HTML permite organizar los datos en filas y columnas, igual que una hoja de cálculo Es una manera poderosa de presentar información con claridad en una página web. Por ejemplo, si estás mostrando un calendario, una tabla de productos o una hoja de notas de estudiante usando una tabla hace que tus datos sean mucho más fáciles de entender Estructura y elementos de mesa HDML, tabla etiqueta el contenedor para toda la mesa La etiqueta TR define una fila de tabla. La etiqueta TD define una celda de datos de tabla. La etiqueta T define una celda de encabezado de tabla, negrita y centrada por defecto. T head groups contenido de encabezado. Cuerpo T, agrupa el cuerpo principal de la tabla. T grupos de pie de página contenido. Ahora vamos a crear una mesa como esta. Se puede ver que esta tabla tiene cinco filas y cada fila tiene cuatro columnas. En el Hader se usa la etiqueta TH, lo que hace que la fuente sea negrita Ahora comencemos a construir una mesa desde cero con cinco filas y cuatro columnas. Para comenzar, escriba las etiquetas de mesa de apertura y cierre. Ya que queremos cinco filas, entonces escribiremos cinco etiquetas de fila de tabla media TR, escribiremos las etiquetas de apertura y cierre. Ahora, copia la etiqueta TR y pegarla cuatro veces. Y necesitamos cuatro columnas. Entonces en este TR, agregaremos cuatro etiquetas de datos de tabla TD. Ahora, escribe las etiquetas TD y copia las etiquetas TD y pegarlas tres veces. Uno por cada columna, inserte el texto. En vista previa, se puede ver la tabla con una fila. Construye rápidamente la tabla, puedes copiar la estructura de cuatro etiquetas TD, pegarlas dentro de esta etiqueta TR. Cambiar el contenido de cada celda. Repita el proceso. Puedes ver la tabla aquí. este momento, la tabla que ves tiene contenido que está muy cerca porque no se ha definido ancho. Para verlo correctamente, definamos el atributo width. En unidad, se puede utilizar ya sea porcentajes o píxeles. Usemos 70% y podrás ver la vista previa. Ahora usa 500 con una unidad Px y podrás ver la vista previa. Tenga en cuenta que si establecemos el ancho de la tabla en porcentaje, el ancho de la tabla se ajustará en función del ancho del navegador. Por ejemplo, cuando arrastre la barra lateral para cambiar el tamaño del navegador, puede ver el ancho de la tabla ajustándose automáticamente de acuerdo con el ancho del navegador Borde de mesa, podemos agregar un borde a la tabla estableciendo border y dando uno o cualquier otro valor. Ver la vista previa. En una tabla HTML, no hay espacio dentro de las celdas por defecto, haciendo que el contenido parezca reducido. Entonces para arreglar esto, usa el atributo cell padding, que agrega espacio entre el contenido de la celda y su borde y establece un valor como cinco y observa el espaciado en la vista previa. Espaciado entre celdas. Además, podemos agregar espacio entre las celdas usando el atributo de espaciado de celdas. Esto crea un pequeño espacio entre cada celda, que se puede aumentar o disminuir cambiando el valor del espaciado entre celdas. Ahora define el espaciado entre celdas y dale cualquier valor como cinco o para una apariencia más limpia. Vamos a establecer el espaciado entre celdas a cero. Ahora tenemos una mesa perfecta con espaciado controlado. Te estoy hablando sobre el relleno de celdas y el espaciado de celdas solo por conocimiento. En el desarrollo web moderno, es mejor evitarlos y usar CSS para espaciado y diseño en su lugar. Alineación de mesas. Aprendamos a posicionar tablas en una página web usando atributos de alineación. Por defecto, las tablas aparecen en el lado izquierdo de la página, pero podemos moverlas. Para cambiar su posición, use el atributo align en la etiqueta de tabla con uno de los tres valores, izquierda, derecha o centro. Por ejemplo, escribir alinear, dar valor a la derecha. Esto alineará la mesa a la derecha. Ahora se puede ver que la mesa ha sido alineada. 28. Th en la tabla: Hablemos de la etiqueta TH, que significa cabecera de mesa. Se utiliza para definir celdas de encabezado en una tabla, normalmente colocadas en la primera fila para etiquetar cada columna en las filas de la tabla lugar de usar TD write TH. Por defecto, el texto dentro de TH está alineado al centro y en negrita. Si quieres cambiar la alineación, puedes usar el atributo align y dar valor a la izquierda o a la derecha. Notarás en la vista previa que la alineación del texto cambia en consecuencia. 29. Etiquetas de encabezado, cuerpo y pie de página en la tabla: Las tablas en HTML pueden ser más que solo filas y columnas. Podemos organizarlos en tres secciones lógicas para una mejor estructura y accesibilidad. Primera cabeza en T, cabecera de mesa, segundo cuerpo te, cuerpo de mesa, tercer pie de pie de mesa. Con la ayuda de estas etiquetas, podemos dividir una tabla en tres secciones. Esta es una tabla estándar con filas y columnas. Primero, envuelva la primera fila con la etiqueta de cabeza en T. Después excluyendo la última fila, envuelva las filas intermedias restantes con la etiqueta del cuerpo en T. Por último, envuelva la última fila con la etiqueta T foot tag. En la vista previa, es posible que no veas ningún cambio visual, pero estas etiquetas ayudan a estructurar la tabla semánticamente agrupando filas en T head, T body y TFoot y haciéndola más organizada y significativa para navegadores y lectores de pantalla, podemos darle estilo a cada sección de la tabla usando CSS para mejorar tanto su apariencia como su Por ejemplo, usemos CSS. Puede ver que he aplicado estilos específicos al encabezado, cuerpo y pie de página de la tabla usando las etiquetas de cabeza T, cuerpo T y pie T. Esto hace que sea fácil ver la diferencia entre el encabezado, el cuerpo y el pie de página de las tablas. Le da a tu mesa un aspecto limpio y profesional. El estilo no es solo para looks. También ayuda con la accesibilidad. Los lectores de pantalla pueden entender mejor las tablas de estructura, haciéndolas más fáciles de usar para las personas con discapacidad. Y cuando se trata de mesas grandes, los navegadores modernos pueden optimizar el rendimiento. Por ejemplo, pueden mantener visibles el encabezado y el pie de página mientras se cargan o desplazan por una sección grande del cuerpo en T. Entonces, al usar la estructura y el estilo adecuados, no solo estás mejorando la apariencia de tu mesa, también la estás haciendo más legible, accesible y eficiente. Sin estos, las mesas carecen de organización, la accesibilidad sufre y estilo de renderizado se vuelve más difícil. Por ejemplo, un lector de pantalla podría malinterpretar los datos o una tabla larga podría ser inutilizable sin encabezados fijos 30. Cómo fusionar celdas en una tabla: Aprende a fusionar celdas en una tabla HTML usando dos atributos importantes, colspan y rowspan El lapso frío se utiliza para fusionar celdas horizontalmente a través de columnas. El tramo de filas se utiliza para combinar celdas verticalmente entre filas. Estos atributos se pueden aplicar tanto a los elementos T ocho como a los elementos TD dentro de una fila de tabla. Ahora, comencemos fusionando dos columnas. Para ello, utilizamos el atributo colspan. Dentro de la etiqueta TD, derecha, colspan, y dar valor dos Luego quita las etiquetas TD de esa fila porque ahora se fusionan en una celda. Se puede ver que las dos columnas ahora se combinan en una sola celda. A continuación, vamos a fusionar dos filas. Para ello, use el atributo rowspan en la etiqueta TD y establezca su valor en dos Ahora ve a la siguiente fila y quita el TD que habría igualado a éste. Y así, las dos filas se fusionan en una celda alta. Ahora agregue una fila a esta tabla. Escriba el total total en la primera columna y coloque el valor total en la última columna. Ahora, vamos a fusionar tres columnas en la última fila. En la primera etiqueta TD de esa fila, escribimos colspan tres y eliminamos las otras dos etiquetas TD de esa fila En la vista previa, se puede ver que tres columnas se han fusionado en una sola. Para centrar este texto, usamos el atributo align y establecemos el valor en center. Ahora puedes ver que el texto está alineado al centro. Si queremos alinear el texto verticalmente, arriba o abajo, utilizamos el atributo V align. Admite tres valores superior, medio e inferior. Vamos a usar V align top, y verás que el texto ahora está alineado con la parte superior. 31. Formulario en Html: Los formularios son esenciales en HTML porque permiten la interacción entre usuarios y sitios web. Estas son las razones clave por las que necesitamos formularios HTML. En primer lugar, la recopilación de entrada del usuario. formularios permiten a los sitios web recopilar información de los usuarios, como datos de contacto, credenciales de inicio de sesión y consultas de búsqueda. Segundo, la presentación de datos. Los formularios proporcionan una forma estructurada de enviar datos a los servidores para su procesamiento y enviar información a bases de datos. Tercero, aplicaciones web interactivas, cuarta interfaz de usuario estandarizada, quinto procesamiento del lado del cliente. Hagamos un formulario sencillo en HTML, cual tendrá dos campos username y email. Para crear un formulario, primero, escribimos la etiqueta de formulario. En el elemento de formulario HTML se utiliza para recopilar la entrada del usuario, cual puede ser enviada a un servidor para su procesamiento, por ejemplo, encuestas de registro de inicio de sesión. A continuación, escribimos la etiqueta etiqueta. La etiqueta etiqueta define una etiqueta de texto para un campo de entrada. Describe lo que el usuario debe ingresar seleccionar en el campo de entrada. Escribamos aquí el nombre de usuario. Después de eso, escribimos la etiqueta de entrada. Después definimos el atributo type. El atributo type define qué tipo de campo de entrada verá el usuario y qué tipo de datos puede ingresar. Aquí, usaremos texto tipo. El texto define una entrada de texto de una sola línea. Los ejemplos incluyen nombre, ciudad, etcétera. Ahora vamos a definir el atributo name. El atributo name se utiliza para identificar los datos cuando se envía el formulario. Podemos dar el valor nombre de usuario aquí. También definimos un atributo ID y damos valor nombre de usuario. El atributo ID da un campo de entrada o cualquier elemento HTML, un identificador único en la página. Único significa que no hay dos elementos en la misma página deben tener el mismo ID. Se utiliza principalmente para conectar etiquetas a entradas. Elementos de destino con CSS o JavaScript. Si queremos conectar la etiqueta a una entrada usando el ID, usamos el atributo four dentro de la etiqueta. El valor de cuatro debe coincidir con el valor de ID, ahora escriba para valor. Ahora para el correo electrónico, primero escriba la etiqueta y agregue el texto correo electrónico del usuario y cree la etiqueta de entrada con. En los atributos de tipo, dé valor al correo electrónico, y luego nombre e ID. Luego use el atributo for para conectar la etiqueta y la entrada. Para enviar el formulario, necesitamos un botón. Usamos la etiqueta de botón. Y dentro del atributo type, le damos el valor submit. El botón de enviar se utiliza para enviar los datos del formulario. Actualmente, estás viendo un formulario no stilted porque esta es una Entonces no voy a usar ningún CSS aquí. Crearé una conferencia separada para diseñar formularios con CSS más adelante. Primero, rellene los datos y haga clic en el botón de enviar. No pasa mucho, pero si miras la URL, verás los detalles de los datos de tu formulario. Para enviar correctamente el formulario, debemos usar los atributos action y method en la etiqueta del formulario, escribir acción y dar valor. Normalmente, usamos un archivo dinámico como PHP JS para manejar el envío de formularios. Pero aquí, para el ejemplo, utilizaré un archivo HTML simple. Vamos a escribir gracias punto HTML. Entonces método. Por lo general, utilizamos el método POST para asegurar los datos del formulario, y se recomienda. Pero para fines de aprendizaje, utilizaré el método G para que puedas ver cómo aparecen los datos del formulario en la URL. Ahora, rellene el formulario y haga clic en el botón de enviar. Serás redirigido a la página html de thanks dot. Esto muestra el proceso básico de trabajo de una forma. Ahora, voy a explicar algunas cosas más importantes. Si quieres mostrar una sugerencia o texto de ejemplo dentro del cuadro de entrada antes de que el usuario escriba algo, usamos el atributo placeholder Escribe el marcador de posición aquí y da cualquier valor relativo significativo como ingresa tu nombre de usuario Para correo electrónico, ingrese su correo electrónico. Ahora, verá el texto de sugerencia dentro de los campos de entrada. Al hacer clic en el botón enviar con campos vacíos, el formulario aún se envía. Esto significa que actualmente no hay validación. Para agregar validación, utilizamos el atributo requerido en los campos de entrada. Ahora escribe requerido aquí y aquí. Si haces clic en Enviar sin rellenar los campos, verás un mensaje de error. Si quieres que tus campos de formulario se autocompleten, como cuando el navegador recuerda tu información, puedes usar el atributo autocompletar y proporcionar un valor de acuerdo al tipo de campo, escribir autocompletar y Para uso de correo electrónico, correo electrónico de valor. Ahora puedes ver el texto de la pista, y espero que hayas entendido la etiqueta del formulario y cómo funciona. 32. Más forma de entrada en Html: Teléfono. En el cuadro de entrada, los atributos name e ID pueden ser cualquier texto. Pero para el atributo type, el texto debe ser relativo como tell. De lo contrario, no funcionará. Use tell en el atributo type. Dígale para indicar una entrada de número de teléfono. Además, contar en autocompletar sugiere el llenado automático con un número de teléfono Para la fecha, use fecha en el atributo type. Permite un recogedor de fechas. Cuando hago clic, aparece el calendario y puedes elegir una fecha de él. Para el color, use color en el atributo type para habilitar un seleccionador de color Cuando hago clic aquí, aparece un seleccionador de color, lo que te permite elegir cualquier color Para casillas de verificación, he creado dos casillas de verificación, ambas tienen los mismos atributos de nombre y tipo, checkbox, pero sus atributos ID son diferentes porque los ID deben ser únicos Para la segunda casilla de verificación, he agregado el atributo checked, haciéndolo seleccionado por defecto En la vista previa, puede ver que la primera casilla de verificación está desmarcada La segunda casilla de verificación ya está marcada. Puede cambiarlos marcando o desmarcando según su elección. Puede seleccionar ninguna, una o ambas casillas de verificación. Para botones de radio, he creado dos botones de radio para macho y hembra. Ambos tienen el mismo nombre para agruparlos, pero diferentes valores de ID. En la vista previa, solo se puede seleccionar una opción a la vez, ya sea masculina o femenina. Para el menú desplegable de selección, use la etiqueta de selección, escriba las etiquetas de apertura y cierre de selección En su interior, use etiquetas de opción. Escribe las etiquetas de apertura y cierre de la opción. Aquí, escriba texto como por favor seleccione. Nuevamente, escribe la opción de abrir y cerrar etiquetas y dar cualquier valor. Ahora repita proceso una y otra y otra vez. En la vista previa, verás un menú desplegable donde podrás elegir una opción. Para la carga de archivos, utilice el atributo de archivo en tipo. Permite subir archivos. Para permitir la selección de varios archivos, utilice el atributo multiple. Al hacer clic en Elegir archivo se abre un explorador donde los usuarios pueden seleccionar uno o varios archivos para subirlos. Para área de texto, entrada de líneas múltiples. Si desea que los usuarios escriban varias líneas, utilice la etiqueta Área de texto en lugar de la entrada. Recuerda, Textaia tiene etiquetas de apertura y cierre. Escribe las etiquetas de apertura y cierre de Textaia. Después defina filas para altura, dé valor como cinco. Pide ancho y dar valor 30. Sin embargo, en la práctica real, controlamos la altura y el ancho usando CSS, no filas y enfría En la vista previa, se puede ver un cuadro de texto donde se pueden escribir varias líneas. Para texto de solo lectura, en algunos sitios web o aplicaciones, es posible que veas un cuadro de texto que muestra términos y condiciones que puedes leer pero no editar. Para crear eso, usamos el atributo deny en un área de texto. Aquí, he colocado algún texto dentro de una rea de texto. En la vista previa, puedes ver que puedes leer el texto pero no puedes editarlo. El atributo value en formularios HTML, el atributo value es un atributo fundamental utilizado en varios elementos form para especificar el valor inicial o predeterminado del elemento. El atributo value define el valor inicial que se muestra en un control de formulario cuando se carga la página. Si no llena el cuadro de entrada, los datos predeterminados se enviarán con el formulario para ese elemento en particular. El atributo disabled es un atributo booleano utilizado para desactivar los controles de formulario, haciéndolos no interactivos y excluyendo sus valores del envío del Déjame mostrarte un ejemplo. En este formulario de selección, actualmente puede seleccionar la opción por favor seleccione, pero ahora voy a usar el atributo disabled aquí. Como pueden ver, no puedo seleccionarlo. Es calificación para indicar que el control está inactivo. También se puede utilizar en una caja de entrada. Ahora, vamos a aplicarlo aquí. En la vista previa, se puede ver el área gris indicando que el cuadro de entrada está inactivo. Actualmente, no hay CSS aplicado a este formulario. Si agrego CSS, quiero mostrarte cómo se verá el formulario. Ahora que se ha agregado el CSS, se puede ver la forma hermosa y bien estructurada. Espero que hayas entendido la forma con claridad. 33. Audio en Html: elemento de audio en HTML five proporciona una forma estandarizada de incrustar archivos de audio en páginas web, permitiendo la reproducción sin necesidad complementos externos, como flash La etiqueta de audio se utiliza para incrustar contenido de audio como música, podcasts o efectos de sonido. Escriba la etiqueta de audio de apertura y la etiqueta de audio de cierre. Después fuente, especifica los archivos de audio y sus tipos de mime Los elementos fuente se pueden utilizar para diferentes formatos. Después SRC atribuye y escribe la ruta para el audio. En mi caso, he guardado todos mis archivos de audio en la carpeta de audio. Entonces el camino será audiolash un punto mp tres. Luego escriba el atributo y luego defina el tipo MIME como AudioLAPEG Entonces podemos escribir un texto de respaldo si el navegador no soporta el elemento audio En la vista previa, no se puede ver nada porque el navegador necesita controles de reproducción predeterminados. Ahora escribe los controles aquí, y podrás ver los controles de reproducción predeterminados. Ahora haz clic en el botón Reproducir y podrás escuchar la música. Hay pocos atributos más. reproducción automática comienza a reproducir el audio automáticamente cuando se carga la página Reproducción automática, es posible que no funcione en los navegadores modernos a menos que también se establezca silenciado debido a las políticas de experiencia del usuario Loop hace que la reproducción de audio se reproduzca automáticamente cuando termina. Silenciado silencia el audio por defecto. Pre carga. Especifica si el audio debe cargarse cuando las cargas de página y el valor son metadatos auto, ninguno. Vamos a configurarlo automático. Una cosa más, los navegadores soportan diversos formatos de audio. Pero la compatibilidad varía. Podemos usar múltiples elementos fuente para garantizar la compatibilidad entre navegadores. Por ejemplo, usemos el formato OGG. Y el navegador seleccionará el primer formato soportado. Y aprendiste a agregar audio a tus páginas web usando el elemento audio, cómo usar el atributo controls y cómo incluir múltiples fuentes de audio para un mejor soporte del navegador. Con esta etiqueta, puedes incrustar fácilmente música de fondo, off o efectos de sonido en Solo recuerda usar siempre los formatos de archivo correctos como MP three u OGG y probar en todos los navegadores. 34. Video en Html: En este tutorial, te enseñaré cómo incrustar videos en tu página web usando HTML. Aprenderemos la etiqueta de video, atributos importantes como controles, reproducción automática, bucle y subtítulos, y cómo admitir múltiples formatos de video. Así que comencemos. Escribe la etiqueta de apertura del video y la etiqueta de cierre. Defina el atributo source. Especifica la ruta al archivo de video. Luego controla, agrega controles nativos del navegador, reproducción, pausa, volumen, etcétera En vista previa, cuando hago clic en el botón Reproducir, el video comienza a reproducirse Hay algunos atributos clave más. La reproducción automática comienza a reproducir el video automáticamente. Loop repite el video una vez que termina, silenciado, inicia el video sin sonido, ancho Alto, establece el tamaño del reproductor de video actualidad, se puede ver el tamaño del video, pero nosotros podemos controlarlo. Definamos el ancho como 350 y el alto como auto. En la vista previa, se puede ver que se ha ajustado el ancho del video y una cosa más. No todos los navegadores admiten el mismo formato de video. Entonces usamos múltiples etiquetas fuente dentro de la etiqueta de video, ahora escribimos etiquetas de apertura y cierre de video. Ahora para MP cuatro. Escriba el origen, y luego SRC y defina ruta en el tipo, el tipo de video definido Ahora para Og, fuente correcta, y luego SRC y definir ruta en tipo definido tipo de video y agregar texto de reserva que se muestra si el navegador no puede renderizar el Si no se admite un formato, el navegador probará el siguiente. Agregar subtítulos y subtítulos a videos en HTML sirve para varios propósitos importantes, mejorando la accesibilidad, la usabilidad y la experiencia general del usuario He aquí por qué son esenciales. Primero, accesibilidad para usuarios con discapacidad auditiva, subtítulos sordos o espectadores con problemas de audición para comprender el contenido de audio Soporte de segundo idioma e inclusividad. Los subtítulos hacen que los videos sean accesibles para hablantes no nativos. Ejemplo, un hispanohablante viendo un video en inglés con subtítulos en español. Tercero, una mejor comprensión en ambientes ruidosos y silenciosos. Los usuarios en lugares ruidosos, transporte público o entornos tranquilos, las bibliotecas pueden ver videos sin sonido. Muchos espectadores en Facebook ven videos sin sonido por defecto. Cuarto, beneficios de SEO. Los motores de búsqueda rastrean contenido basado en texto como subtítulos de subtítulos para indexar mejor los videos Mejora la capacidad de descubrimiento en los resultados de búsqueda, YouTube, Google Quinto, mejora de la interacción del usuario. Los estudios muestran que los subtítulos aumentan el tiempo de visualización y las tasas de retención Útil para términos complejos, tutoriales técnicos de EG, videos médicos. Podemos agregar subtítulos usando un archivo punto VTT. VTT web o pistas de texto de video web es el formato estándar utilizado para subtítulos y subtítulos Define el tiempo de texto que aparece sincronizado con el video. Echemos un vistazo al archivo VTT. Ahora escribe pista. Después SRC, definió la ruta del archivo Entonces los atributos amables, definió el tipo de pista. Podrían ser subtítulos, subtítulos, descripciones, capítulos, metadatos, SRC Lang, lenguaje de la pista Se requiere para subtítulos y subtítulos y luego etiquetar, usar un nombre legible para la pista que se muestra en el menú de pistas del navegador, y puede agregar atributos predeterminados para indicar que la pista debe estar habilitada por defecto Podemos agregar más pista. Para este tiempo, será subtítulos en lugar de subtítulos. Juguemos en el navegador. Aquí puedes ver subtítulo y subtítulos. Ahora aprendiste a agregar videos en tus páginas web usando HTML. Exploramos la etiqueta de video, cómo incluir múltiples formatos, agregar controles, usar Autoplay Mute y subtítulos Sigue practicando e intenta incrustar tus propios archivos de video. 35. Etiquetas semánticas en Html: HTML semántico se refiere al uso del marcado HTML para reforzar el significado del contenido en las páginas web en lugar de simplemente definir su Los elementos semánticos describen claramente su significado tanto para el navegador como para el desarrollador Por qué usar la accesibilidad HTML semántica. Los lectores de pantalla y otras tecnologías de asistencia pueden interpretar mejor tu contenido. SEO, los motores de búsqueda dan más peso al contenido semántico, mantenibilidad, código es más fácil de leer y entender, compatibilidad futura, compatibilidad futura, mejor preparado para futuras Y aquí hay algunos elementos HTML semánticos comunes. etiqueta de encabezado representa contenido introductorio, normalmente un grupo de ayudas introductorias o de navegación puede contener encabezados, logotipos, formularios de búsqueda, etc., se pueden usar varias veces en un ejemplo de documento en la parte superior de las secciones Etiqueta NAV, define una sección con enlaces de navegación. No todos los enlaces necesitan estar en un NAV, solo los principales bloques de navegación, a menudo colocados dentro del encabezado. La etiqueta principal representa el contenido dominante de la etiqueta body. Debe ser único para el documento, solo uno por página, excluye el contenido que se repite, encabezados, pies de página, Barras de navegación, La etiqueta de artículo representa una composición autónoma, debe tener sentido por sí sola cuando se distribuye sola cuando se Ejemplos post blog, artículo de noticias, post foro, sección de tarjeta de producto representa una agrupación temática de contenido. Normalmente tiene un encabezado utilizado para dividir el contenido en secciones lógicas. Aparte, representa contenido que está tangencialmente relacionado con el contenido que lo rodea A menudo se utiliza para barras laterales, cotizaciones de tracción o publicidad. Pie de página representa un pie de página para su contenido seccionado más cercano o elemento raíz, generalmente contiene autoría, información, datos de derechos de autor, documentos relacionados, etcétera. 36. Estructura semántica en Html: Mira en este diseño web ficticio que este es el encabezado, y dentro del encabezado, tenemos el logotipo y la barra de navegación Esta es la sección de pancarta. Esta es la sección del artículo. Esta es la barra lateral, y este es el pie de página. Espero que ahora hayas entendido el diseño y los roles de encabezado, pie de página, barra lateral, sección y artículo. Ahora, déjame mostrarte el código HTML cinco para este tipo de diseño simple. Como puede ver, he usado la etiqueta de encabezado para el encabezado y la etiqueta NAV para la navegación. Entonces para el contenido principal de la página, he usado la etiqueta principal. Dentro de la etiqueta principal, he usado las etiquetas de sección y artículo. Después de eso, utilizo la etiqueta Aside, que se alineará al lado izquierdo o derecho. Y por último, utilizo la etiqueta de pie de página. Ahora deberías tener una comprensión clara de la estructura semántica en HTML cinco A continuación, te voy a mostrar el mismo layout en HTML cuatro, como puedes ver en HTML 4.0. Solo usamos la etiqueta DIV en todas partes para el encabezado, menú, cuerpo y todas las demás secciones. Entonces en este tutorial, aprendiste la diferencia entre HTML cinco y HTML cuatro estructuras de diseño. HTML five utiliza etiquetas semánticas como encabezado, NAV, sección, artículo, aparte y pie de página, que ayudan a que el código sea más significativo y organizado Por otro lado, HTML four se basa principalmente en la etiqueta DIV, que no describe claramente el propósito del contenido. El uso de etiquetas semánticas en HTML cinco mejora la legibilidad, accesibilidad y SEO Espero que este tutorial te haya ayudado a entender la estructura básica de una página web y la importancia del HTML semántico 37. Conclusiones: Enhorabuena. Has completado con éxito la serie completa de tutoriales HTML. Comenzamos desde lo básico, entendiendo etiquetas, elementos y atributos y fuimos hasta crear formularios, incrustar audio y video y construir estructuras completas de páginas web tienen una base sólida en HTML, que es el primer y más importante paso en el desarrollo web Pero recuerden, esto es solo el comienzo. Con HTML en tu kit de herramientas, estás listo para explorar CSS, Javascript y frameworks modernos para llevar tus habilidades aún más lejos. Muchas gracias por aprender conmigo. Si te ha resultado útil este tutorial, no olvides dar me gusta, compartir y suscribirte para mantenerte actualizado con más tutoriales sobre desarrollo y diseño web. Sigue practicando, mantente curioso y sigue construyendo sitios web increíbles. Nos vemos en el próximo curso.