Curso completo de HTML para principiantes a avanzados

1. INTRODUCCIÓN: ¿Estás listo para comenzar tu viaje hacia el apasionante mundo del desarrollo web? Si eres un principiante completo o buscas definir tus habilidades, este curso, curso completo de CML para principiantes para avanzar, guía completa con proyectos del mundo real es tu plataforma de lanzamiento perfecta En este curso, pasarás de no saber absolutamente nada sobre desarrollo web a crear proyectos del mundo real que puedan impresionar a cualquiera. Aprenderás los fundamentos del HTML, cómo estructurar y diseñar páginas web como una P, conceptos esenciales como cementar HTML, formato de texto, fugas, hipervínculos, imágenes y atributos, y por supuesto, técnicas avanzadas para llevar tus habilidades de desarrollo web al siguiente Pero no sólo nos detenemos en la teoría. En este curso, trabajarás en emocionantes retos y proyectos del mundo real para aplicar lo que has aprendido. Al final, tendrás una cartera sólida y la confianza para crear un sitio web impresionante. Esto es lo que ganarás. Lecciones paso a paso fáciles de seguir, proyectos prácticos para mejorar tus habilidades, consejos y herramientas para mejorar la productividad, incluyendo extensiones de código VS y acceso de por vida a todos los materiales del curso Mi objetivo es simple para empoderarte para convertirte en un desarrollador web experto. Imagina construir tus propios sitios web o incluso comenzar una nueva carrera. Todo comienza aquí. Entonces, ¿a qué esperas? Únete al curso completo de HTML para que Bigner avance hoy y dé el primer paso hacia dominio del desarrollo web. Nos vemos en la clase. 2. Descripción general de alto nivel del desarrollo web: Bien, y bienvenidos a la primera conferencia de este curso. Ahora hay una buena posibilidad de que este curso sea tu primer contacto con cualquier desarrollo web. Antes de comenzar a escribir código STML y CSS, creo que podría ser una buena idea comenzar realmente este curso con una visión general de muy alto nivel de este campo del desarrollo web Vamos a hablar cosas como clientes y servidores, desarrollo front-end y back-end, Tati y sitios web dinámicos, y por supuesto, sobre los lenguajes principales y las tecnologías de código del desarrollo web Voy a explicar todo esto en torno al proceso que ocurre cuando abrimos una página web en un navegador. Solo ten en cuenta de nuevo que esto es solo una visión general de alto nivel y voy a dejar de lado muchos detalles aquí. Esto es realmente solo para que puedas familiarizarte con algunos de estos conceptos y términos que todos los desarrolladores web conocen antes de comenzar tu propio viaje. Ahora lo que sucede cuando intentamos acceder a este sitio web de W three schools es que nuestro navegador enviará una solicitud al servidor donde esta página está alojada en Internet. Todos y cada uno de los sitios web son remolcados en algo llamado servidor, que es básicamente una computadora que está conectada a Internet y es capaz recibir solicitudes como esta Nuevamente, cuando nos cedemos a cierto sitio web, nuestro navegador enviará una solicitud al servidor donde se remolca el sitio web, donde está alojado Entonces, cuando el servidor reciba la solicitud, tomará todos los archivos que componen el sitio web y los enviará de vuelta al navegador. Decimos que el servidor envía la respuesta al navegador, que esencialmente contiene todos estos archivos de los que está hecho el sitio web ahora como se puede ver en estas extensiones de archivo, tenemos algunos HTML, CSS, y también código JavaScript aquí. Estos son precisamente los tres idiomas que los navegadores pueden entender. Lo que esto significa es que todo el código que compone un sitio web debe escribirse siempre en HTML, CSS y JavaScript porque nuevamente, estos son esencialmente los tres lenguajes de código que cualquier navegador puede entender. Todo bien. Ahora una vez que el navegador reciba estos archivos HTML CSS y JavaScript de la respuesta del servidor, tomará el código y renderizará el sitio web que estamos tratando de acceder en función del código. Con esto, ya tienes una buena comprensión de lo que realmente sucede cuando navegamos a un sitio web y también sobre las tecnologías que usamos para construir cualquier sitio web ese proceso de escribir código HTML, CSS y JavaScript que el navegador pueda entender es un proceso que llamamos desarrollo web front-end. Entonces, cada vez que escuchas a alguien hablando de desarrollo front-end, lo que quieren decir es que los desarrolladores escriben el código que se muestra en el navegador, que es básicamente el front-end de un sitio web. De hecho, esto es esencialmente lo que vamos a aprender en este curso, o al menos los mismos, mismos fundamentos del desarrollo front-end, que es aprender HTML y CSS Ahora solo como nota al margen aquí, siempre que los archivos que componen el sitio web simplemente se almacenan en el servidor web y luego se envían al navegador tal como están decimos que tenemos un sitio web estático, y esto va a tener un poco más de sentido en un minuto cuando hablamos de lo que es un sitio web dinámico. Pero por ahora, solo ten en cuenta que un sitio web estático es básicamente un sitio web donde los archivos simplemente se envían desde el servidor al navegador ya que son así sin ninguna transformación. Todo bien. Entonces espero que a partir de esto aprendas qué es el desarrollo front-end y también sobre las tres tecnologías de código que conforman cualquier sitio web. Ahora vamos un paso más allá y hablemos algo llamado desarrollo back-end. Probemos otro ejemplo aquí, y esta vez, intentemos entender qué pasaría cuando intentamos acceder a un sitio web como netflix.com Entonces, una vez más, el primer paso es que se envíe una solicitud al servidor web donde se aloja netflix.com Ahora bien, ¿por qué un sitio web como Netflix es tan diferente de algo como el sitio web Static W three Schools que te mostré antes? Bueno, un sitio complejo como netflix.com es realmente completamente diferente de un sitio estático porque hay mucho contenido que siempre está cambiando todo el tiempo Al igual que en Netflix, siempre hay nuevas películas y nuevas críticas que se agregan al sitio. calculan nuevas calificaciones y la nueva duración de las películas, por ejemplo, y realmente siempre están sucediendo muchas otras cosas así. Para que un sistema como este funcione, netflix.com necesita una aplicación completa ejecutándose en el servidor, y también necesitan una base de datos de cerdos, que básicamente contiene todos los cursos y todas las reseñas Todos los usuarios y realmente todo el contenido que se está mostrando en su sitio web. Ahora para hacer todo esto, las tecnologías front-end como HTML y CSS simplemente no son suficientes. Básicamente, con lo que vas a aprender en este curso, no vas a poder construir algo como netflix.com. Todo bien. Entonces, para escribir aplicaciones que realmente se ejecutan en servidores web, los desarrolladores utilizan algún tipo de lenguajes backend como NodeJS, PHP Lo que hacen estos lenguajes es sacar los datos de la base de datos y básicamente ensamblar esos datos en los archivos finales. Eso luego se enviará al navegador como respuesta, y todo este proceso se llama desarrollo de backend porque esta es básicamente la parte invisible de un sitio web, y así es el Ben de un sitio web ahora en esta situación, decimos que tenemos un sitio web dinámico porque el sitio web se ensambla dinámicamente a partir de diferentes piezas en el servidor y eso sucede cada vez que alguien visite el sitio web. Volviendo al ejemplo de netflix.com. De hecho, cada vez que visites Netflix, se va a generar una nueva versión del sitio web a partir de la base de datos y se enviará al navegador. el otro y si Netflix fuera un sitio web estático, entonces los archivos del sitio web ya estarían sentados en el servidor solo esperando que alguien acceda a ellos. Esa es la gran diferencia entre estática y dinámica. En estática, los archivos ya están hechos y en dinámicos, primero necesitan ser generados por una aplicación que se está ejecutando en el servidor. Todo bien. Pero ahora el resto del proceso es en realidad el mismo que antes. Estos archivos ya están listos para ser enviados al navegador como respuesta, que luego serán convertidos al sitio web final. Como este que vemos aquí de netflix.com. Genial. Ahora, por supuesto, no hace falta que memorices todos estos nombres que he mencionado aquí y tampoco hay necesidad entender profundamente este proceso Todo lo que quiero aquí es darte una visión general de lo que son realmente front end y back end, qué son el navegador y el servidor y también cuáles son los sitios web estáticos y dinámicos porque realmente pienso que esto va a ser extremadamente útil a medida que comienzas tu viaje de desarrollador. Pero ahora, solo para terminar, echemos un vistazo más de cerca a los tres idiomas del front end. HTML, CSS y JavaScript. Y comenzando por HTML, HTML es responsable del contenido de la página. El texto, las imágenes, los botones, y realmente todo el contenido que ves en una página web siempre está escrito dentro de un archivo HTML. Entonces el CSS se encarga de la presentación de ese contenido. Básicamente para estilizar y para diseñar los elementos en la página web. Ahora por fin, JavaScript es el lenguaje de programación real del frente. Por lo que nos permite agregar efectos dinámicos e interactivos a las páginas web. También podemos usarlo para manipular el contenido o el CSS para cargar datos desde servidores web e incluso para construir aplicaciones front-end completas, que luego llamamos aplicaciones web. Ahora también podemos usar la analogía del auto para hacer que la separación de HTML CSS y JavaScript aquí sea un poco más fácil de entender En esta analogía, HTML representa la estructura de un sitio web, como el marco y la estructura de un automóvil Por ejemplo, proporciona la forma básica como el cuerpo, los asientos y el motor. Sin él, el auto no existiría, pero por sí solo, no se ve especial ni hace mucho. El CSS entonces es el trabajo de pintura y el diseño de interiores porque hace que el auto sea visualmente atractivo al definir el color y el estilo general. CSS mejora el aspecto y la sensación. Haciendo que el auto sea más atractivo y cómodo de usar. Por último, JavaScript es, por supuesto, el motor y la electrónica. Hace que el auto sea más funcional, lo que le permite moverse, ajustar la radio, JavaScripts e interactividad y características dinámicas, haciendo que el automóvil o sitio web responda a la acción del usuario ¿Eso tiene sentido bien? Con esto, terminamos nuestra introducción al desarrollo web, y así ya estamos listos para comenzar a trabajar con código HTML y CSS en este curso. 3. Configurar nuestro editor de código: Oigan, todos. Bienvenido de nuevo. Antes de comenzar a escribir una sola línea de código, necesitamos configurar dos herramientas importantes. Estas herramientas nos ayudarán a escribir código de programación como HTML de una manera muy fácil. Ahora bien, ¿cuáles son esas herramientas? El primero es un editor de código, el segundo es un navegador web. Ahora bien, lo que significa aquí el editor de cod, es que es una herramienta especial que ayuda a los desarrolladores a escribir, editar y depurar código con características como resaltado de sintaxis y autocompletado, y es exactamente por eso que estamos usando código VS aquí. Hace que la codificación sea más rápida, eficiente y más fácil. Y ahora lo que hace aquí un navegador web, toma el código. Escribimos en un editor de código como HTML y lo traemos a la vida renderizándolo en la pantalla. Convertir el código sin procesar en los impresionantes sitios web con los que interactuamos todos los días. Descarguemos e instalemos rápidamente ambos. Ahora, chicos, pueden abrir cualquier tipo de navegador web. Ahora tengo actualmente abierto Google Chrome. Puedes abrir cualquier tipo de navegador web y aquí puedes buscar la descarga de código VS. Y aquí lo ves aquí, podrás ver este primer resultado, y este es el sitio web oficial de visualstudo.com Entonces eso es co dotvisualstudio.com. Simplemente haga clic en esto. Chicos, ahora pueden ver esta es la interfaz de visualtudo.com para descargar el código VS. Bien. Entonces aquí lo ves aquí tenemos múltiples opciones para descargarlo. Ahora, chicos, dependiendo de su sistema operativo, tienen que descargar el software. Entonces por ejemplo, ahora actualmente estoy usando el sistema operativo Windows, así que seleccionaré el Windows. Pero si estás usando sistema operativo Linux o el sistema operativo Mac, debajo de este ícono, podrás ver este botón de descarga, por lo que simplemente puedes hacer click sobre él. Pero si estás usando Linux, entonces puedes ir con estas dos opciones, para que puedas instalarlo en tu PC. Ahora estoy usando el sistema operativo Windows. Entonces para descargar el código VS, simplemente hago clic en este botón de descarga, y aquí lo ven así me está pidiendo que descargue esto. Entonces selecciono las descargas y hago clic en el Cap. Ahora aquí ves que mi instalación de código VS está en proceso. Chicos en el futuro, la interfaz de este sitio web podría cambiarse. Pero para descargar este software, puedes visitar este código.visualstudio.com, y puedes consultar este sitio web y simplemente puedes ¿Bien? Ahora, chicos, hemos descargado con éxito el software para que Visual Studio. Ahora simplemente hago clic en esta opción de descarga y simplemente hago clic en este Visual Studio. Entonces aquí ves que un Popo se mostrará frente a ti. Ahora, chicos para instalar este software. Entonces estoy instalando el software en Windows. Ahora, solo tienes que dar click sobre esto acepto el acuerdo, y luego necesitas dar click en este siguiente botón. Aquí, el código VS está preguntando dónde instalar este código VS. Así que solo lo mantengo por defecto y hago clic en el siguiente botón. Y sólo tienes que dar click en siguiente. Chicos, aquí ven aquí estamos teniendo múltiples casillas de verificación. Entonces por ahora, solo tienes que marcar toda esta casilla de verificación. Chicos, después, les mostraré por qué estoy marcando todas estas casillas de verificación, y luego solo necesitan dar click en este siguiente botón y dar click en este botón Instalar Ahora nuestro código VS se está instalando en nuestro PC. Chicos, esta es la forma en que puedes instalar el código VS en tu PC. Ahora puedes lanzar este código de Visual Studio a partir de ahora. Por ahora, solo desmarco esto y hago clic en este botón Finalizar. Chicos, enhorabuena por descargar con éxito el código de Visual Studio en su PC. Ahora, una cosa más que tenemos que configurar. Ahora solo necesitamos crear una nueva pestaña aquí y necesitamos instalar Chrome Browser también. Ahora estoy mostrando este proceso. Entonces, si no tenías Chrome Browser en tu PC, entonces puedes seguir este proceso. Ahora solo tienes que buscar aquí navegador Chrome. O puedes buscar la descarga de Chrome. Y después de hacer eso, sólo tienes que dar click en este primer enlace. Chicos, aquí lo ven en esta página web, pueden descargar el Chrome para su propio sistema operativo. Chicos, este sitio web detectará automáticamente qué sistema operativo está utilizando. Ahora estoy teniendo Chrome Browser en mi PC, por ahora, no necesito Chrome Browser para instalarlo. Pero si no estás teniendo Chrome Browser, entonces simplemente puedes hacer clic en este botón de descarga. Para que puedas instalar el software en tu PC. ¿Bien? Por lo que la instalación es bastante fácil. Cómo te mostré en el código VS, solo tienes que hacer clic en el siguiente siguiente y tu navegador Chrome también se configurará. ¿Bien? Así que voy a dejar eso para ti. Ahora simplemente abramos el código VS por ahora. Ahora solo voy a minimizar todas esas cosas, así que iré a mi escritorio. Chicos, aquí, aquí estamos teniendo el icono del código VS. Después de instalar correctamente el código VS en su PC, entonces podrá ver este icono de código VS. Simplemente puedes duplicar aquí para abrir este Visual Studio. Chicos, después de abrir el código VS por primera vez, entonces podrán ver esta interfaz. Entonces aquí ves aquí estamos teniendo este código de Visual Studio, y aquí lo ves, podemos crear un nuevo archivo a partir de aquí, así podemos abrir una carpeta desde aquí. Así que podemos hacer un montón de cosas desde aquí, pero no prefiero hacer todas esas cosas desde aquí. Entonces simplemente cerraré esta bienvenida aquí. Ahora, chicos, lo primero que vamos a hacer aquí es que vamos a instalar una extensión. Entonces aquí, aquí estamos teniendo una pestaña de extensión, así que simplemente tienes que hacer click sobre ella. Entonces aquí ves aquí estamos teniendo muchas extensiones aquí. Ahora la extensión de agua aquí es que una extensión para el código VS es básicamente una pequeña pieza de funcionalidad que hará que nuestro editor de código sea un poco mejor. Entonces, por ejemplo, cómo usamos en las extensiones de Google Chrome, por lo que agregaremos extensiones a nuestro Google Chrome para que sea más fácil para nosotros usar Google Chrome. Entonces ese es el mismo concepto aquí. Ahora la primera extensión que vamos a instalar aquí, así que es más bonita Busca aquí así y asegúrate de que tu Internet esté encendido. Bien. Y aquí ven, creo que podría ser el primer resultado. Haga clic en él. Ahora chicos para instalar esta extensión más bonita. Por lo que solo tienes que hacer click en este botón Instalar y tu preter se instalará correctamente Chicos, lo que sea que escriban en el editor de código el más bonito, lo que va a hacer significa, así que formateará nuestro código muy bien. ¿Bien? Ahora, chicos, estamos teniendo esta actualización automática aquí, así que pueden marcar esta casilla de verificación Entonces, lo que hará significa que actualizará automáticamente el software si hay alguna actualización de preteer Bien. Entonces una vez que empecemos a escribir nuestro código, entonces te mostraré cómo funciona este preter Entonces ahora puedes simplemente cerrar. Ahora vamos a colisionar esta barra lateral así que esta extensión ahora chicos, solo necesitamos hacer algunos ajustes Ahora, aquí lo ves en la esquina inferior, podrás ver este ícono de engranaje, simplemente da click sobre esto y aquí ves aquí estamos teniendo la opción de configuración, da clic en él, y aquí podemos buscar cualquier configuración. Buscar el escenario es la forma más fácil de encontrarlos. Ahora el primer ajuste que vamos a buscar aquí, ese es el formateador predeterminado Ahora, aquí ves el formateador predeterminado, en tu caso, podría ser diferente Entonces ahora ya lo he puesto previamente como más bonita. Entonces solo tienes que dar click sobre estas opciones y solo tienes que buscar más guapa Ahora bien, aquí ven aquí estamos teniendo esta opción más bonita Entonces ese es el formateador de código más bonito, ES B y P. Sólo tienes que dar click Ahora por qué estamos manteniendo este formatero predeterminado. Entonces ahora estamos viendo código VS que cada vez que guardamos nuestros archivos, necesitamos este formateador de código más bonito para formatear ¿Bien? Ahora cuando formatear nuestro código, ahora solo tenemos que establecer otra configuración que sea el guardado automático Sólo tienes que buscar el autoguardado. Entonces, en tu caso, podría ser esto apagado. Solo tienes que dar click sobre esto en el cambio de enfoque. Esto en cambio de enfoque, lo que hará significa cada vez que cierras esta pestaña o cada vez que cambies esta pestaña a otra pestaña, luego automáticamente guardará tus archivos sin que tengamos que hacer las cosas por nosotros. ¿Bien? Esto también es muy útil porque porque no tenemos que perder ninguna edición si desguardamos los archivos ¿Bien? Ahora, chicos, ya terminamos con los ajustes aquí. Ahora puedes simplemente cerrar los ajustes aquí desde aquí. Así que solo tienes que hacer click en esta pestaña de extensión. Chicos, una última extensión más que vamos a instalar aquí, ese nombre de extensión es Monophy Entonces, chicos, solo hay que buscar a Monocy aquí, y aquí ven aquí estamos teniendo este tema de un monoci Solo tienes que dar click sobre él, y aquí lo ves aquí estamos teniendo un tema para nuestro código VS. Por ahora, chicos, he instalado este tema, pero en su caso, pueden instalar este tema monoci Bien. Ahora, aquí puedes ver el avance de este tema. Entonces, lo que hará este tema significa que cambiará los colores de tu código. Por ejemplo, aquí vemos que diferentes partes del código están resaltadas en diferentes colores. Bien, entonces hará que nuestro código sea más legible. Chicos, por defecto, el código VS sugiere algún tema básico, pero te sugiero que instales un tema especial como un tema Monochi, para que puedas instalar el tema así. ¿Bien? Ahora, una última configuración más que tenemos que hacer aquí. Sólo tienes que dar click sobre estos ajustes. Aquí estamos teniendo temas, y en tema, estamos teniendo este tema de icono de archivo. Solo tienes que pinchar sobre él, y me quedo con mi tema de archivo como Seth, pero no te importa También puedes simplemente establecer esto como Seth. Bien. Con eso, ahora hemos terminado de configurar el código VS por ahora. Entonces ahora estás listo para escribir tu primera línea de código, y eso es exactamente lo que vamos a hacer en nuestra próxima conferencia. Nos vemos ahí pronto. 4. ¡Tu primera página web!: Bienvenida de nuevo. Ahora escribamos nuestra primera línea de código y construyamos nuestra primera y muy pequeña página web. Aquí estamos de vuelta en código VS. Ahora vamos a cerrar esta de aquí, y yo sólo voy a cerrar esta pestaña de extensión, así que voy a colapsar esta y vamos a ir aquí a esta primera pestaña. Aquí ves la pestaña Explorer, da click en ella, y aquí ves dentro de esta pestaña Explorer, chicos en código VS, siempre necesitamos estar dentro de alguna carpeta, y esa carpeta se llama la carpeta del proyecto. En este momento aún no tenemos ninguna carpeta iniciada, y así que empecemos realmente haciendo eso. Y ahora solo voy a mi escritorio y entonces ahora voy a crear una carpeta aquí en mi escritorio. Haré clic en mi escritorio y haré clic en Nuevo y crearé una carpeta. Ahora le estoy dando el nombre de esta carpeta como 01 probando así. Puedes guardar cualquier nombre de tu carpeta de proyecto. Así que lo estoy guardando aquí. Entonces aquí en mi caso, lo estoy haciendo ahora mismo en mi escritorio. Entonces, si creo una carpeta en cualquier otra ubicación, entonces podría llevarme a alguna confusión. Entonces por eso estoy haciendo en mi escritorio. Así que ahora volvamos al código VS. Ahora vamos a dar click en esta carpeta abierta y seleccionaré este dektop Y aquí se ve aquí nuestra carpeta está ahí 01 testing, que hemos creado aquí ahora mismo. Simplemente seleccione esto y haga clic en esta carpeta de selección. Así que ya ves aquí, tenemos una nueva página de bienvenida aquí. Ahora, aquí se ve a continuación el inicio, podemos crear un nuevo archivo desde aquí. Pero la otra manera es que podemos crear un nuevo archivo a partir de aquí. Entonces, al pasar el cursor sobre este ícono de archivo, entonces estas son las dos formas diferentes de crear nuevos archivos en la carpeta del proyecto, y en realidad prefiero esta de aquí Así que vamos a hacer clic en él. Así que estamos a punto de crear nuestra primera página web, y una página web es básicamente solo un archivo DML, y llamémoslo como índice Punto HTML y pulsa Enter. Básicamente es solo el archivo con la extensión de archivo HTML, y lo estamos llamando index porque ese es el nombre predeterminado de la primera página web de cualquier sitio web. índice es básicamente siempre el punto de entrada a cualquier sitio web, por lo que todas las páginas web siempre necesitan tener un archivo HTML de punto índice. Bien, tenlo en mente siempre. Llama a tu primera página índice de punto HTML. Ahora mi objetivo en esta conferencia no es realmente enseñarte HTML. Ahora mismo, todo lo que quiero hacer es crear un nuevo archivo HTML aquí y agregar un poco de código aquí dentro de este archivo HTML y luego ver el resultado en el navegador. Sólo para que puedas escribir tu primera línea de código y puedas ver el resultado de escribir ese código en un navegador web real. Nuevamente, en realidad no estoy empezando a enseñar HTML todavía, y así en lugar de escribir toda una estructura web, como solemos necesitar, vamos a usar una pequeña hoja jefe que podamos usar en código VS. Entonces voy a escribir signo de exclamación, y simplemente hago clic en este met ambribson igual que esto Aquí puede ver, hemos creado nuestra estructura de documentos TML. Básicamente, aquí ves, estamos teniendo una cabeza aquí y tenemos un cuerpo. Todas estas cosas un poco más tarde. Ahora me interesa aquí este título, mi primera página web. Así que solo me acerco un poquito solo para que veas mejor. Ahora, voy a escribir aquí menos de H uno, sólo hay que escribir en minúscula y hay que cerrar este símbolo mayor que. Aquí ves código VS coloca esta otra parte para nosotros. Básicamente esta otra parte del H uno, ahora realmente no importa por ahora. Ahora solo escribe hola mundo. Entonces es básicamente una larga tradición la que seguimos. Así que cada vez que escribes nuestra primera línea de código, solemos escribir hola mundo en cualquier programación. ¿Bien? Entonces esa es la mejor manera de escribir nuestra primera línea de código. Bien. Ahora la siguiente línea, voy a escribir aquí. Entonces solo hay que volver a escribir menos que símbolo, y luego hay que escribir P. Así que aquí P significa párrafo. Y aquí Hach uno significa rumbo primario. Se trata básicamente de un rubro. Sólo tenemos que cerrar esto mayor que símbolo así y dentro de eso, voy a escribir aquí. Estoy escribiendo aquí mi nombre. Por supuesto, puedes escribir tu nombre en este caso, y yo estoy escribiendo y esta es mi primera página web. Bien. Ahora, aquí en este archivo HTML, acabamos de escribir nuestras dos primeras líneas de códigos. ¿Bien? Ahora solo necesitamos guardar este archivo para ver el resultado de este código. ¿Bien? Ahora, para guardar esto, solo tienes que presionar en tu teclado como Controles o comandos. O la otra forma de guardar el archivo es, puedes ir a este archivo, y aquí ves aquí estamos teniendo una opción de guardar. Simplemente puede hacer clic en él o puede usar un atajo de teclado como controles. Pero actualmente estamos usando AutoSave, por lo que no tenemos que guardar nuestros archivos manualmente Entonces un código que hace el trabajo por nosotros, ¿de acuerdo? O simplemente puede para guardar los archivos, puede hacer clic aquí. Entonces ahora se ha guardado el archivo, y tal vez también notes que lo del formateo ha cambiado un poco, y esto sucedió por la extensión más bonita que instalamos en el último video Así que recuerda que PreaRension es formatear nuestro código automáticamente cada vez que lo guardamos Y así es exactamente lo que acabamos de pasar. Entonces agreguemos algunos espacios aquí. Y si guardo nuestros archivos, entonces Preter formateará automáticamente este código para nosotros. Así que simplemente hago clic afuera aquí, y aquí está. Preter está formateando nuestro código, así que sin que tengamos que hacer Ahora aquí vemos aquí estamos teniendo muchas indentaciones. Por lo que la sangría significa que agregará algunos espacios. Chicos, por qué necesitamos formatear nuestro código para que nuestro código sea más legible. ¿Bien? Y así ese es el poder de más guapa, y se asegurará de que tu código siempre tenga el mismo aspecto que el código en el video Grade y así ahora tenemos este archivo HTML de punto índice y lo podemos abrir en el navegador. Así que ahora voy a volver a mi escritorio. Entonces donde se encuentra este archivo. Entonces dentro de esta carpeta de pruebas, así que aquí están nuestro archivo que es. Ahora para abrir esto, simplemente puedes hacer doble clic sobre él o simplemente puedes escribir click sobre él y puedes hacer click en Openw y puedes seleccionarlo como Google Chrome Aquí está nuestra primera página web que acabamos de crear manualmente en código VS. Genial. Y eso es realmente increíble si me preguntas. Así que enhorabuena y bien hecho en tu primera página web aquí. Entonces pongamos este Google Chrome al lado derecho y el código VS al lado izquierdo. Ahora simplemente voy a cerrar este Exploertab así que aquí ven aquí estamos teniendo esta H una partida Entonces este hola mundo, aquí lo ves en el navegador web, este hola mundo en el texto grande y negrita. Y entonces hemos escrito un párrafo. Entonces está en el texto normal, como se puede ver. Y una cosa más que en nuestra página web está ahí, es el título de esta página web. Entonces aquí se ve así exactamente la misma línea que hemos escrito en el título de nuestro código VS. Entonces eso está exactamente impreso en el navegador web. Entonces, una vez más, el código que escribimos aquí en nuestro documento HTML ahora se refleja en el navegador web real. Hablando del navegador web, estoy usando Google Chrome para probar todo el curso que vamos a escribir a lo largo de este curso. Y así realmente te aconsejo que también uses Google Chrome para probar siempre el código que estás escribiendo para que nuevamente nos aseguremos de que tengas exactamente los mismos resultados que estás viendo en el video del curso. Bien. Y esto en realidad es suficiente para este primer video de codificación, y espero que realmente consigas las ideas que quería mostrarte en esta conferencia. Entonces básicamente, comenzando por crear una carpeta de proyecto, luego abrir esa carpeta de proyecto en código VS. Entonces en esta carpeta aquí la carpeta testing. Después dentro de eso, crear un archivo ML y agregar algún código al archivo y finalmente abrir el documento HTML en un navegador web real, como Google Chrome, donde luego vemos el resultado. Entonces básicamente la traducción de nuestro código a un resultado visual. Espero que te hayas divertido haciendo esto y te veo en el siguiente video. Gracias. 5. Descarga del material del curso: Ahora una de las cosas que necesitas para poder pasar por este curso es tener acceso a algunos archivos de inicio. En este video, déjame mostrarte muy rápidamente cómo puedes acceder a esos archivos. Todos los archivos de inicio, así como los archivos finales del curso están alojados en este llamado repositorio en Github y Github es básicamente una plataforma de código donde la mayoría de los desarrolladores suben su código para compartirlo o colaborar con otros desarrolladores o simplemente para almacenar. Entonces nuestro repositorio es básicamente una carpeta que contiene un montón de código u otros archivos. Y a cada repositorio se puede acceder mediante una URL, y este repositorio está disponible en esta URL, pero no te preocupes, no tienes que escribirlo. Chicos, en la sección anterior de este curso, les he proporcionado el enlace a esta página de Gu para que a partir de ahí, simplemente puedan dar click sobre el enlace y puedan saltar directamente aquí a la página de recursos. Derecha. Estoy seguro de que puedes encontrar este enlace. Pero desafortunadamente, no puedes encontrar los medios del enlace, entonces simplemente puedes escribir esta URL de Github. Entonces en este repositorio, como decía, tenemos algunos archivos de inicio y también tenemos los archivos finales. Entonces, primero entremos en los archivos de inicio. Y aquí lo ves aquí, podrás ver alguna carpeta. Entonces dentro de los archivos de inicio, estoy teniendo estos fundamentos de DML y dentro de esa carpeta, estoy teniendo estos desafíos En esto, te he proporcionado una imagen, y tenemos un archivo de contenido. Si colapso esto y aquí ven aquí tenemos una carpeta de palabras que es IMG Entonces aquí estamos teniendo todas las imágenes. Entonces, cuando usaremos estas imágenes significa cuando estamos construyendo nuestro proyecto, ¿verdad? Bien. También incluí el código final para que siempre puedas comparar tu propio código el código que estoy escribiendo en los videos, y esto será muy importante para que puedas comparar tu código con el mío en caso que tengas algún error en tu código. Entonces, comparar tu código con el mío así siempre será tu forma más fácil de encontrar errores, encontrar errores, tal vez estés escribiendo tu código, y eso sucederá seguro. Le pasa a todos los principiantes. En esa situación, sólo se puede acceder al código final. Por último, aquí abajo, también está este documento de retorno que contiene las preguntas más frecuentes. Antes de comenzar realmente el curso, podría ser una buena idea leer rápidamente estas preguntas que solo deberían llevarte de dos a 3 minutos, pero estoy seguro que te ayudará a despejar algunas dudas que podrías obtener a medida que avanzas por el curso. Pero de todos modos, lo que realmente vinimos aquí es para tener acceso correcto al código. Entonces para descargar este código, simplemente puedes hacer clic en este botón verde que es código, y luego solo tienes que elegir este zip de descarga. Simplemente guardo estos archivos en mis descargas y voy a dar click en este botón. Ahora mi descarga ha terminado, así que acabo de cortar esto. Solo vuelvo a mi escritorio y solo lo pego por aquí. Y estos son nuestros archivos. Ahora para extraer esto en Mac, solo tienes que hacer doble clic sobre él, y en Windows, solo tienes que hacer click derecho y luego dar click sobre este extracto todo y dar click en este extra. Ahora tenemos todos estos archivos, que ahora hemos extraído. Entonces ahora ya no necesitamos este archivo zip. Entonces, eliminemos esto. Entonces ahora tenemos básicamente esto nuestros archivos. Así que ahora sólo podemos abrir esta carpeta. Y aquí ven chicos, aquí tenemos una carpeta de inicio y una final. Así que vamos a entrar en los archivos de inicio, y aquí estoy teniendo una carpeta de fundamentos HTML Entonces aquí tenemos todas estas imágenes, y por supuesto tenemos una carpeta más que es retos. Así que tenemos los archivos de inicio y también hemos provisto de un archivo de contenido. Entonces básicamente el texto del proyecto, tenemos los archivos de inicio y aquí están los archivos para las próximas conferencias. Así que ahora con los archivos de inicio en su lugar, realidad estamos listos para comenzar a aprender HTML. 6. Introducción al HTML: Bienvenida de nuevo. Ahora aprendamos muy rápidamente qué es realmente el HTML y qué podemos hacer con él. Entonces, básicamente, HTML significa lenguaje de marcado de hipertexto. Y recuerda cómo aprendimos antes que HTML es una de las principales tecnologías web, junto con CSS y JavaScript. Ahora mismo, HTML es un lenguaje de marcado que los desarrolladores web podemos utilizar para estructurar y describir todo el contenido de cualquier página web Entonces fíjate como dije lenguaje de marcado porque HTML realmente no es un lenguaje de programación Es un lenguaje de marcado porque lo usamos para describir algo Y en el caso del HTML, sí describimos el contenido usando elementos. Entonces tenemos diferentes elementos que podemos usar para describir diferentes tipos de contenido. Entonces, por ejemplo, tenemos el elemento P que ya usamos en la conferencia donde creamos nuestra primera página web. Y así usamos el elemento P ahí para crear el párrafo. Pero realmente tenemos todo tipo de elementos diferentes, así que elementos para crear enlaces, para crear encabezados de página, imágenes, videos y mucho más a medida que aprendemos a lo largo de todo el curso Entonces como también aprendimos en esa conferencia, donde construimos nuestra primera página web, los navegadores web como Google Chroms entienden esencialmente el código HTML y pueden renderizarlo como un sitio web final Entonces sitio web que podemos ver en el navegador web. ¿Bien? Entonces esto es esencialmente lo que es HTML y lo que podemos hacer con él. Pero ahora solo vamos a acercarnos un poco y echemos un vistazo a la anatomía del elemento HTML. Así que básicamente, echa un vistazo a los bloques de construcción del elemento HTML. Y vamos a tomar un ejemplo del elemento heading aquí como pueden ver. Y así todo esto es en realidad el elemento en sí. Ahora un elemento TMR suele estar compuesto por tres partes. Primero está la etiqueta de apertura, que es el nombre del elemento. Entonces en este caso, es el H uno envuelto en el menor que y en el mayor que símbolos. Chicos, tienen algunos otros nombres, pero así es como me gusta llamar a estos símbolos. Entonces es menor que H uno y luego mayor que. Entonces tenemos básicamente el contenido del elemento. Entonces en este ejemplo, eso es solo texto, pero podría haber otro tipo de contenido. Por ejemplo, un elemento puede contener en su otro elemento, que luego llamamos un elemento hijo. También algunos elementos como las imágenes en realidad no tienen ningún contenido y solo tienen una etiqueta de apertura, y todos estos, por supuesto, se volverán muy intuitivos a medida que empecemos a escribir HTML. Esto es solo para que sepas de lo que estoy hablando. Cuando hablo de etiqueta de apertura o etiqueta de cierre o contenido, y hablando de la etiqueta de cierre, es básicamente lo mismo que la etiqueta de apertura, pero con un slash Entonces abrimos este elemento de encabezado simplemente con esta etiqueta H one, y luego lo cerramos con un slash ¿Bien? Ahora para los elementos no tienen contenido como elemento de imagen que mencioné antes, en realidad omitimos la etiqueta de cierre Entonces en ese caso, solo tenemos la etiqueta de apertura, y eso es todo. Y lo veremos en acción, claro, una vez que empecemos a integrar imágenes en nuestras páginas web. Bien, y eso es realmente todo lo necesitas para comenzar a aprender HTML en la práctica, que es exactamente lo que haremos en la próxima conferencia. Gracias. 7. Estructura de documentos HTML: Bienvenido de nuevo. Entonces, lo primero que tenemos que aprender sobre HTML es la estructura común del documento HTML. Entonces una estructura que todos y cada uno de los documentos HTML necesitan tener. Pero comencemos por echar un vistazo muy rápido al proyecto que vamos a construir a lo largo de esta sección. Entonces estamos construyendo este sitio web de Coding Ninja. Entonces dentro de este sitio web de codificación Ninja, estamos teniendo algunos enlaces, y estamos teniendo algunos encabezados y estamos teniendo algunas imágenes y aquí ves que estamos teniendo algún texto bol, y aquí estamos teniendo alguna lista Entonces hay un montón de cosas que vamos a aprender en esta sección para que al final, habrás aprendido los fundamentos del HTML y terminaremos con este proyecto Bien. Pero de todos modos, por fin vamos a ponernos a trabajar. Y lo primero que tenemos que hacer nuevo aquí para crear nuestra carpeta de proyectos. Así que volvamos a nuestro escritorio. Y aquí ves aquí estamos teniendo una carpeta, la cual hemos descargado de Github en la última sección. Entonces abramos esto, y yo solo sigo adelante en el archivo de inicio. Y aquí se ve aquí estamos teniendo una carpeta, fundamentos DML Acabo de tomar una copia de esta carpeta y solo la pego en mi escritorio. Aquí nuestra carpeta está ahí. Ahora en lugar de hacer eso, también podrías simplemente seguir adelante y usar esta carpeta aquí como tu carpeta de proyecto. Pero eso podría llevar a algunas confusiones. Así que siempre prefiero simplemente copiar esta carpeta aquí a otro lugar. ¿Bien? Ahora volvamos a nuestro código VS. Ahora simplemente para crear una nueva ventana en código VS, sólo tenemos que dar click sobre estas barras, y tenemos que dar click sobre este archivo. Y aquí lo ves aquí podemos crear una nueva ventana dando click aquí o puedes usar un atajo de teclado como Control Shift E. Así que simplemente voy a hacer clic en ella, y aquí nuestra nueva ventana de código VS está ahí. Así que acabo de cerrar esto. Así que solo cierro esta ventana. Entonces pongámoslo en el lado izquierdo. Y el navegador al lado derecho. Ahora vamos a cerrar esta bienvenida. Entonces aquí tienes que dar click en esta pestaña del Explorador para ampliar esta. Y aquí tenemos que dar click en esta carpeta Abrir. Entonces en código VS, siempre hay que tener en algo que se llame una carpeta de proyecto, así que te lo he dicho antes. Así que vamos a hacer clic en esta carpeta Abrir. Y aquí solo hago clic en mi escritorio. Acabo de seleccionar estos fundamentos de ML, que acabo de copiar y pegar Voy a seleccionar esto y voy a dar click en esta carpeta de selección. Ahora, chicos, estamos con éxito en la carpeta del proyecto, que hemos creado. Entonces aquí lo ves aquí tenemos algunas imágenes. Entonces básicamente un archivo de texto. Entonces aquí tenemos mucho contenido. Entonces después, podemos copiar esto. Entonces lo veremos un poco más tarde. Entonces voy a cerrar esto. Entonces aquí ya ven, chicos, primer lugar, necesitamos crear un archivo. Así que solo quiero crear un nuevo archivo aquí. Así que solo le doy un nombre como índice de punto HTML. Así que aquí ves que tenemos un archivo HTML con extensión HTML de punto, y tenemos que dar siempre nuestro nombre de archivo como índice a medida que creamos nuestro primer documento HTML. Entonces, chicos, como recordaron en la conferencia anterior, así hemos utilizado achieve Set para crear nuestra estructura de documentos HTML. Hemos utilizado este signo de exclamación. Entonces hemos hecho clic en esto, y aquí ves que nuestra estructura de documentos HTML se crea simplemente usando una hoja de trampa Pero lo primero que tenemos que aprender en HTML es la estructura común del documento TML En primer lugar, quiero acercar el zoom. Entonces chicos para acercar, así que para ver nuestro texto con mayor claridad, hay que presionar en su teclado como control y hay que desplazar el mouse en la dirección superior. Como puedes ver aquí. Entonces chicos, eliminemos todo esto, y ahora escribamos lo primero en los DMs Vamos a escribir Menos que símbolo y signo de exclamación, y luego tenemos que escribir en las palabras mayúsculas ese Y aquí ves que el código VS está tratando de autocompletar esto para nosotros. Así que vamos a escribirlo a mano para que este código se te quede en la mente para permanente. Entonces escribamos después de ese HTML, y tenemos que cerrar esto. Entonces escribe esto mayor que símbolo. Entonces lo que este tipo de doc le está diciendo a nuestro navegador, entonces estamos usando la versión HTML five para crear nuestra página web. Después de eso, chicos, como ustedes saben que así para crear un elemento, necesitamos escribir siempre menos que símbolo, y tenemos que proporcionar el nombre del elemento, y tenemos que cerrar el elemento. Entonces ahora, qué elemento estamos usando significa, estamos creando un elemento HTML justo en el HTML minúscula, luego cerramos el elemento por mayor que símbolo Entonces el código VS cierra automáticamente esta etiqueta de cierre. Chicos, si no quieren este código VS cierre automáticamente esta etiqueta, entonces chicos, pueden ir a la configuración y hacer clic en la configuración. Y aquí hay que buscar la etiqueta de cierre automático. Aquí ves que nuestra etiqueta de cierre automático está habilitada, simplemente desmarca esto y lo habilitaremos un poco más tarde Entonces por ahora, vamos a escribirlo a mano. Entonces obtendremos algo de práctica escribiendo código HTML. Entonces chicos, vamos a cerrar esta barra lateral así que esa es la pestaña del explorador para darle un poco más de espacio para nosotros. Aquí ves chicos en la etiqueta HTML, necesitamos crear dos elementos. El primero es la etiqueta de cabeza, créala menos que símbolo y cabeza. Entonces de inmediato, tenemos que cerrar esta cabeza también. Y aquí tenemos que crear el elemento body. Chicos, cualquiera que sea el elemento que estén abriendo, hay que cerrarlo también así Al cerrar, hay que proporcionar una diagonal aquí. Ahora, chicos, como pueden ver aquí, tenemos un tipo doc. Después de eso, tenemos un elemento HTML, y en este elemento TML, estamos teniendo un elemento head y también tenemos un elemento body Este elemento HTML es el padre de esta cabeza y cuerpo. Así que todos y cada uno de los documentos HTML, siempre tienen que comenzar con un elemento HTML como este. Ahora el elemento head es básicamente para cosas que no son visibles en la ventana del navegador. Ahora esta cabeza contendrá el título de la página, alguna información adicional sobre la página, un enlace a archivos CSS u otras cosas. medida que vayamos por el curso, llenaremos esta cabeza con todo tipo de elementos diferentes. Pero por ahora, lo único que quiero hacer es simplemente especificar el título. Vamos a usar el elemento title aquí. Y este título, tenemos que cerrarlo también. Entonces dentro de este título, solo quiero llamar a este título como el lenguaje básico de la web. Bien, entonces el cuerpo es en realidad para todos los elementos que serán visibles en la página. Entonces todos los elementos que vemos aquí en el navegador siempre estarán dentro del elemento body. Y sólo para mostrártelo, en vez de dejarlo vacío, déjame poner un código aquí. Volveré a usar el elemento heading así que vamos a cerrar esto. Así que simplemente agarro este título y lo pego por aquí. Ahora vamos a cerrar este H uno. momento, aún no hemos guardado este archivo, pero como lo hacemos, Preter volverá a formatear este archivo por nosotros. Vamos a guardarlo, y ya ves que ahora tenemos la sangría correcta Y por indentación, lo que quiero decir es que ver este elemento head está dentro de este elemento HTML Entonces tenemos una ficha aquí, así que algunos espacios aquí. Después de eso, se ve dentro este elemento de cabeza, tenemos un título aquí. Aquí tenemos un poco más de sangría, así que tenemos algunos espacios más Entonces básicamente, esto es solo una pestaña aquí. Entonces, si golpeo la tabulación K, entonces agregará otro nivel de sangría Entonces, básicamente, esto es solo un tamaño de pestaña. Entonces si golpeo una pestaña en mi teclado, entonces aquí lo ves. Entonces ahora, está al mismo nivel que el título, lo cual no tiene sentido porque el título también está dentro de la cabeza, derecho. Entonces tenemos la cabeza dentro del DML, y luego dentro de la cabeza, tenemos ese elemento title Y así pues, tiene otro nivel de sangría. ¿Bien? Ahora bien, esto es solo por razones estéticas para que nuestro código sea más legible. Entonces al navegador realmente no le importa esta sangría, pero sigue siendo importante para nosotros poder leer el código, y creo que ya estamos listos para seguir adelante y abrir esto en el Así que volvamos a nuestro escritorio. Vamos a abrir nuestra carpeta de proyectos, así que esto fundamentos HTML, y simplemente haga doble clic en este archivo HTML de punto índice Y aquí es lindo, gran trabajo. Pongámoslo en el lado derecho, y como código al lado izquierdo. Entonces, vamos a cerrar esta. Entonces solo lo traigo al frente. Voy a mantener esto abierto solo para que veamos lo que queremos lograr al final. Bien. Y con esto, aprendemos la estructura básica del HTML. Así que vamos a revisar rápidamente. Así que cada documento HTML, siempre tiene que comenzar con el llamado tipo doc. Y así esto le permitirá al navegador saber lo que realmente estamos usando HTML en este archivo. Y todos los navegadores sabrán que deben usar la especificación del archivo HTML para renderizar este HTML. Entonces tenemos el elemento HTML, que es siempre el padre tanto del elemento head como del body. Entonces esta estructura es realmente siempre la misma en todas las páginas web. Siempre necesitamos tener un elemento HTML con una cabeza y un cuerpo. Ahora bien, lo que ponemos en la cabeza y el cuerpo es opcional, pero tener estos dos no es opcional, así que siempre necesitamos una cabeza y un cuerpo. Ahora en esta situación, todo lo que ponemos en la cabeza es sólo un elemento de título. Pero aquí podemos poner todo tipo de otras cosas que no son visibles y que no se renderizan en esta parte principal del navegador. Por otro lado, el contenido que realmente queremos renderizar aquí debería entrar en el elemento body. Entonces es por eso que este H one elemento aparece en nuestra página web. ¿Bien? Esa es la estructura básica de estimación para todos y cada uno de los documentos de estimación que realmente necesitas conocer. Y con eso, pasemos a la siguiente conferencia donde aprenderemos un par de elementos nuevos para trabajar con texto. Entonces espero verte allí pronto. Gracias. 8. Elementos de texto encabezados, párrafos, negrita e cursiva: Oigan, chicos, bienvenidos de nuevo. En esta conferencia, seguiremos aprendiendo a marcar texto. Entonces seguiremos usando algunos encabezados, algunos párrafos, y también aprenderemos a hacer que el texto sea negrita y cursiva Y en realidad comencemos con encabezamientos. Entonces, por lo general, el objetivo de los encabezamientos es descomponer grandes bloques de texto en secciones más lógicas y básicamente agregar un título para cada una de estas secciones Ahora ya se enteró de un rubro llamado este encabezado H uno, pero en realidad hay seis rubros diferentes Entonces hay una jerarquía de encabezamientos para que podamos establecer una jerarquía en nuestro texto, así podemos ir todo el camino de H uno a H seis Así que vamos a agarrar este texto y crear todos estos seis encabezados, solo para que puedas ver cómo se ven diferentes visualmente en el navegador Entonces este H uno es el encabezado principal, y ahora vamos a usar este H dos, así que vamos a escribir menos que símbolo. H dos. Chicos, H dos significa la partida secundaria. Vamos a cerrar esto. Sólo voy a pegar el texto que he copiado. Simplemente voy a cerrar este encabezamiento secundario. Ahora para el rumbo del territorio, tenemos que escribir H tres y tenemos que pegar el texto. Ahora, claro, tenemos que cerrar esta etiqueta también. Ahora, chicos como este solo tenemos seis rubros diferentes. Así que simplemente escribamos todo esto y sólo voy a pegar todo esto. Entonces tenemos pi. El último encabezamiento es chicos seis. Es el último rubro. Vamos a guardarlo en este archivo HTML, bien. A medida que estés escribiendo estos caracteres, este código, todo esto empezará a meterte en tu cerebro y empezarás a practicar escribiendo HTML. H seis y vamos a darle una salvada. Como puedes ver aquí, esto realmente creó una jerarquía visual básicamente entre estos seis encabezados. El primero es el rubro más grande y el más grande y el último es este seis. Este es el rubro más pequeño. Ahora, chicos, creo que tienen una pregunta en la mente que ¿por qué solo hay seis encabezados en HTML ¿Por qué no tenemos siete? Entonces probémoslo. Entonces estamos escribiendo este siete, y lo que hemos copiado este texto, estamos pegando una vez más Entonces vamos a cerrar esta etiqueta. Entonces como pueden ver aquí, chicos, hemos escrito este siete encabezamiento. Entonces básicamente, no es un rubro válido para mostrarte, acabo de escribir esto. Entonces aquí se ve como un párrafo sencillo, este encabezamiento entró en nuestra página web. Entonces solo elimino esto así que básicamente estamos teniendo sólo seis encabezamientos. Entonces el último encabezamiento es este seis, por lo que es el encabezado más pequeño. Y entre este H uno y Hessix, tenemos todo este tipo de rubros diferentes Entonces ahora sabemos cómo funcionan estos diferentes rubros. Pero echemos un vistazo a nuestro sitio web de codificación Ninja solo para ver qué tipo de encabezados realmente necesitamos Entonces aquí ves chicos en este sitio web de codificación Ninja, estamos teniendo esta rúbrica. Entonces este es el encabezado más grande de nuestra página web. Entonces creo que podría ser el rumbo de Huan. Por lo que es el encabezamiento primario. Y aquí ven chicos por debajo de este rubro, estamos teniendo otro rubro. Así que mira con cuidado. Entonces este ya no es el encabezamiento primario. Entonces este es el encabezado secundario, y después de eso, tenemos algunas imágenes. Aquí lo ven, así que esta rúbrica es más pequeña que esa. Entonces este rubro es básicamente nuestro rumbo de territorio. Entonces esta es la rúbrica tres. Recuerda como dije que un encabezado es básicamente para descomponer el texto en secciones lógicas, ¿verdad? Entonces aquí entre estos, tenemos otra sección. Y así, ahora vamos a crear el marcado para este tipo de estructura Entonces tenemos todo el texto que realmente necesitamos aquí. Entonces, chicos, aquí tienen que dar click en esta pestaña del Explorador. Entonces, chicos, aquí ven, tenemos un archivo de contenido, este archivo de texto. Si quieres abrir esto, simplemente puedes hacer doble clic sobre él y aquí nuestro archivo de texto o si quieres abrir en la barra lateral y soltarlo aquí. Entonces, chicos, aquí, ya ves, tenemos este contenido. Entonces a partir de este contenido, hemos creado este sitio web. Así que choquemos esta barra lateral. Solo necesitamos copiar y pegar este código aquí o este texto en nuestro archivo HTML de punto índice. Entonces hagámoslo. Entonces me voy a dejar esto aquí para su referencia. Así que recuerden, vamos a comenzar con el encabezamiento primario. Entonces agreguemos algunos espacios aquí. Y vayamos a este archivo de contenido. Entonces, chicos, he agregado estos hashes para que entiendan cuál es el encabezamiento y cuál es el párrafo Entonces aquí ven he agregado este tiene porque es el rubro primario. Entonces como puedes ver aquí, este es un hash doble, por lo que es un encabezado secundario. Y así es como creé este archivo de contenido. Entonces ahora vamos a crear este encabezado primario. Entonces simplemente copiaré esto primero, e iré a mi archivo HTML de punto índice y agregaré algunos espacios aquí y crearé un encabezado hash one. Básicamente, se trata de un rubro primario. Vamos a pegarlo por aquí. Y vamos a cerrar este H uno también. Entonces aquí ven aquí tenemos un segundo rubro. Entonces, vamos a tomar una copia de esto. Así que vamos a crear un encabezado secundario. Y a medida que estés escribiendo estos caracteres, podrás empezar a practicar escribiendo HTM. Por lo que se pegará en tu cerebro de forma permanente. Así que agreguemos un poco más de encabezado a medida que se desplaza por nuestra página web. Entonces aquí ven, aquí tenemos nuestro rumbo tartario, así que H tres, y vamos a escribirlo a mano Y no cerremos esto de inmediato. Ahora solo guárdala y abre nuestra página web. Y ahora recarguemos nuestra página web. Y aquí vamos. Bonito. Entonces esta es una especie de estructura de nuestro texto en estos momentos. Y ahora sólo tenemos que llenarlo con los párrafos intermedios. Entonces básicamente, cómo estos párrafos están ahí en el medio, entonces tenemos algunos párrafos aquí. Entonces como pueden ver, así que vamos a agregarlo por aquí. Entonces solo entro en mi archivo de contenido y voy a agarrar esto. Entonces, chicos, mientras copiamos y pegamos este texto, he aprendido un truco de atajo muy interesante en ese truco. Entonces sin embargo, si copio este texto, solo quiero arrastrar esto desde la parte superior, y solo tengo que soltarlo aquí. Lo que he aprendido significa, si solo quiero seleccionar directamente este párrafo, simplemente puedo triplicar por aquí así y seleccionaré cualquier párrafo para copiarlo. Aquí lo ves. Entonces, si solo quiero copiar este párrafo, simplemente hago triple clic por aquí. Por lo que se selecciona el párrafo. Entonces esto es muy interesante cutry corto. Entonces, si quieres seleccionar esta línea completa, simplemente puedes hacer triple clic por aquí y copiarla. Así que solo voy a mi archivo HTML de punto índice. Por lo que este párrafo se encuentra por debajo del encabezamiento secundario. Entonces este lenguaje básico de la web. Así que solo lo pego por aquí. Vamos a cerrar esta. Chicos, después de esta imagen, tenemos algo más de texto. Vamos a copiar esto. Entonces, vamos a crear algunos párrafos más. Vamos a crear un párrafo más, y solo quiero cerrar eso de inmediato. Entre este elemento de párrafo, solo quiero pegar ese texto. Así que solo agarro esto y lo pegaré por aquí. Vamos a darle un ahorro, y aquí vamos. Aquí se ve en el archivo HTML. Entonces aquí tenemos algo más de texto. Entonces estos dos párrafos. Agreguemos eso también. Voy a seleccionar eso y darle algo de espacio y tenemos que pegar estas balas. Y un párrafo más tenemos que crear y tenemos que cerrar este párrafo también. Ahora, vamos a pegar eso. Aquí. Vamos a darle una caja fuerte y aquí está. Chicos, al principio solo tenemos instalada la extensión más bonita, y está haciendo que nuestro código se vea muy bien Se ha añadido sangría correcta para nosotros. Ahora echemos un vistazo a la página web. Ahora volvamos a cargar esta página web, y aquí vamos. Bonito, genial. Ahora vamos a deshacernos de todos estos seis encabezamientos aquí. Entonces ahora ya sabes cómo funcionan y existen. Y en realidad, en lugar de deshacernos de ellos, podemos usar algo llamado comandos en HTML. Entonces un comentario en HTML es una forma de escribir algún código que no será visible en el navegador. Y esto es muy útil porque nos permite escribir comentarios sobre nuestro código o simplemente ocultar algún código que no queremos renderizar en el navegador. Ahora para escribir un comando, es un poco de sintaxis extraña. Entonces solo agrego algunos espacios aquí. Nuevamente, escribimos un símbolo menos que, y aquí tenemos que escribir exclamación, y luego guión Y como puedes ver, código VS cierra automáticamente esta otra parte para nosotros. Básicamente esta flecha. Acabo de quitar esto. Ahora como puedes ver, así nuestro color de código completo se volvió gris. Porque todo esto ahora es un comentario, por lo que este código no se renderizará en el navegador web. Entonces solo quiero mostrarte mientras elude la página web. Entonces ahora esta página web está completamente vacía. Entonces porque todo este código es ahora un comando. Chicos, solo quiero comentar los seis encabezamientos solamente. Entonces solo quiero envolver esto cerrando el comando. Para cerrar el comando, necesitamos agregar doble guión, y tenemos que agregar un símbolo mayor que. Y aquí ves que este texto se volvió lleno de colores. Cualquiera que sea la parte que hayamos comentado en DML, ese código se ha vuelto gris. Entonces ahora volvamos a cargar la página web. Chicos, solo una cosa que no mencioné antes sobre los encabezados es que todas y cada una de las páginas web solo deberían tener una H una cabecera Entonces solo un rubro primario que es muy importante tener en cuenta. Esto no es realmente obligatorio. No viola ninguna regla HTML si tenemos múltiples H unas, pero es una muy buena práctica tener siempre solo una de ellas. Ahora sobre todos los demás, podemos usar, por supuesto, múltiples de ellos. Entonces, por ejemplo, creo que en nuestra página web, en realidad tenemos otro de estos encabezamientos. Aquí vemos en el medio. Entonces aquí estamos teniendo esto lo que es el encabezado HTML. Este es un rubro similar a este rubro anterior. Entonces esto también es un agregado, y esto también es un agregado. Ahora solo para terminar, permítame también mostrarle rápidamente cómo podemos crear texto en negrita y cursiva. Entonces aquí en nuestro lado de demostración, aquí lo ven, tenemos el nombre de la autora que es María, que está en negrita. Entonces, ¿cómo podemos hacer eso en HTML? Bueno, hay un elemento especial para eso o en realidad dos elementos. Y déjame comenzar con una más simple llamada B. Así que aquí ves chicos en el párrafo. En este párrafo, estamos teniendo a esta María. Entonces envolvamos a esta María en la etiqueta B. Entonces B significa negrita. Entonces escribamos B y cerremos esta etiqueta como cualquier otra etiqueta. Entonces vamos a cerrar esta etiqueta B. Ahora veamos a nuestra página web. Aquí se ven tíos en esta María. Entonces si vuelvo a cargar esta página web, ahora, mira qué pasa Entonces ves que se volvió audaz. Genial. Ahora, sin embargo, el uso de B en realidad no es una buena práctica. Entonces B es en realidad un elemento más antiguo. Y comenzando en DML Pi, siempre debemos usar el elemento fuerte en lugar de B. La razón de eso es que la B no tiene ningún significado así llamado semántico y más sobre un poco más adelante en Pero esencialmente lo que esto significa es que B es simplemente un elemento sin tener un significado específico. Mientras que por otro lado, el elemento fuerte significa que éste es realmente un elemento importante que queremos destacar del párrafo. Entonces cambiemos esto demasiado fuerte. Así que vamos a confirmar esto recargando nuestra página web. Sí, sigue siendo audaz, pero ahora tiene el significado de que es un texto más importante, y esta es esencialmente la idea de cementar DML Y nuevamente, hablamos de más sobre HTML semántico al final de esto Entonces, por ahora, solo debes saber que no uses B, sino usa strong para hacer que el texto sea negrita. Ahora hagamos también algo de texto en cursiva. Escojamos esta palabra. Entonces estas tecnologías fundamentales. Y al igual que B, en realidad hay dos formas de hacerlo. El más viejo es el elemento I. Entonces envolviendo estas tecnologías en este elemento I, así que cerremos esto. Entonces ahora si recargamos nuestra página web, aquí ves este texto las tecnologías fundamentales se han convertido en cursiva. Entonces porque hemos usado este elemento I, pero chicos, una vez más, para hacer este HTML semántico, ya no deberíamos usar este elemento I, sino que en vez de escribir este I, podemos usar EM Entonces EM significa enfatizar. Vamos a darle un ahorro. Ahora, chicos, si vuelvo a cargar la página web, pueden ver los resultados Entonces ahora nuestro texto está en itálica, pero ahora así que básicamente le dimos el significado de un texto de énfasis, pero tiene significado semántico Bien, genial. Esto es un gran avance. Te va muy bien hasta este punto. Ahora, solo para terminar esta conferencia, en realidad ya quiero darte tu primer pequeño desafío de codificación. Entonces solo voy a esta Puñalada así que lo que quiero que hagas es así que aquí ves aquí estamos teniendo este lenguaje de marcado de hipertexto Entonces aquí se ve la letra inicial de esto. Entonces este HTML, esto está en el texto en negrita. Entonces básicamente aquí, entonces aquí estamos teniendo este lenguaje de marcado de hipertexto Entonces esto H T M y L. Así que quiero esto en el texto en negrita. Entonces, ¿crees que puedes hacer eso y escribir algún código HTML por tu cuenta por primera vez? Bueno, realmente espero que lo intentes porque como dije antes, estos retos de codificación son muy, muy importantes para que empieces a practicar tus habilidades, aunque sea algo realmente simple como esto. Entonces, por favor, adelante y pausa el video ahora mismo y ponga cada una de estas cuatro letras en negrita. Y volveré aquí en un segundo contigo para mostrarte cómo se hace. Entonces, ¿ lograste hacerlo bien? Entonces ahora te voy a mostrar cómo puedes hacer que eso sea audaz. Entonces vamos a envolverlo en el elemento fuerte, y aquí y aquí tenemos que cerrar esto y aquí en el texto, así tenemos que agregar otro elemento fuerte. Aquí tenemos que audaz esto. Agreguemos un elemento fuerte uno más. El último es este L. Vamos a audaz éste también. Espero haber hecho todas las cosas correctamente. Ahora voy a recargar la página web. Y aquí vamos. HTML ahora está marcado en negrita, genial. Entonces nuevamente, espero que hayas logrado hacer esto por tu cuenta, ya que esto es realmente importante para tu proceso de aprendizaje. Entonces, chicos, en la próxima conferencia, estaremos agregando algo más de texto a nuestra página web, e intentaremos hacer muchas cosas diferentes. Estimados alumnos, espero que estén disfrutando del curso y lo encuentren valioso. He puesto mucho trabajo duro en la creación de este curso para ti y tus comentarios significan el mundo para mí. Si este curso te ha ayudado de alguna manera, ya sea mejorando tus habilidades, aumentando tu confianza o inspirándote a crear algo por tu cuenta, tómate un momento para escribir una reseña positiva. Tus comentarios me motivan a seguir adelante. Gracias por ser parte de este viaje. No puedo esperar a leer tus pensamientos. 9. Más elementos de texto Lista ordenada y lista no ordenada: Sigamos trabajando con texto. Y en esta conferencia, aprenderemos a crear listas con viñetas y también con números. Y lo que quiero decir con una lista es básicamente una lista de viñetas, como aquí se ve. Entonces aquí estamos teniendo todas estas viñetas. Y también como una lista de pedidos como estos números. Entonces aquí vemos aquí uno, dos, tres, y también estamos teniendo una lista con las viñetas. Veamos cómo podemos crear esto en nuestro HTML. Eso es muy fácil de hacer en HTML. Entonces, comenzando con esta lista de orden, donde esta lista de pedidos está presente significa que está en la sección qué es HTML. Simplemente me desplazo hacia abajo. Aquí está lo que es el encabezado HTML y después de eso, tenemos tres párrafos más y tenemos esta lista de orden. Entonces estamos teniendo dos de los párrafos y falta un párrafo más. Entonces agreguemos eso también. Entonces solo voy a este archivo de contenido, que les he mostrado en la conferencia anterior. Entonces aquí vemos en esto lo que es HTML. Entonces después de este rubro, entonces aquí estamos teniendo este párrafo, y también tenemos esta lista. Vamos a agarrar todo esto. Y pegarlo por aquí y lo que quiero lío, así que simplemente envuelvo este párrafo y solo cierro esto. Entonces, chicos, para crear este tipo de lista de pedidos, necesitamos agregar un elemento para que ese nombre del elemento sea OL. Entonces, chicos, OL significa lista de pedidos. Por supuesto, tenemos que cerrar esto también. Ahora vamos a darnos algo de espacio aquí porque en realidad para cada uno de los elementos de la lista, necesitamos crear un elemento dentro de la lista de orden. Y así para eso, usamos el elemento Ay, que significa elemento list. Aquí vamos a agregar este aliado y tenemos que cerrar este también. Así que vamos a cortar esto y yo sólo lo pongo por aquí. Vamos a agarrar a estos dos. Y yo sólo lo pegué por aquí. Acabo de envolver este texto individual entre el cierre Ay esta vez. Vamos a guardarlo a este archivo y Preter hará su magia Vamos a darle un ahorro. Ya que solo vuelvo a mi página web que he creado antes. Yo vuelvo a cargar esto, entonces ves el resultado. Aquí estamos. Ahora hemos agregado un elemento de párrafo y luego después hemos creado esta lista de orden. Bonito. El navegador Google Chrome entiende nuestro código y sabe que debe renderizarlo como una lista de números de orden como este uno, dos, tres, claro, luego aplica automáticamente estos números sin que tengamos que hacer nada. Y si añadimos otro elemento, digamos que añadiríamos algún otro elemento. Así que solo creo elemento y solo escribo el primer elemento. Y como les acabo de decir antes chicos, esa Ai significa elemento de lista. El elemento individual, tenemos que dar un todoelemento. Entonces una vez que creamos este elemento OL, así que está bastante vacío y dentro de eso, tenemos que crear algunos elementos de lista como este. Entonces cada vez que creamos Ailements en nuestra página HTML, entonces se presentará en las viñetas así Vamos a guardarlo y recarguemos la página web, y aquí está Aquí ven, chicos, ahora he agregado este ítem pasado, es el primer elemento de esta lista de pedidos. No quiero esto, así que solo me deshago de esto. Volvamos a cargar la página web, Nie. Chicos, volvamos a nuestro sitio web final, nuestra página web final de esta sección. Aquí ven chicos, ahora lo que queremos hacer en esa página web significa que tenemos que agregar este encabezamiento aquí ¿por qué deberías aprender HTML? Entonces aquí tenemos que agregar un párrafo y luego tenemos que crear esta lista desordenada. Volvamos a trabajar. Ahora primero, necesitamos crear este encabezamiento. Solo vuelvo a este archivo de contenido y solo copio esto agrego algunos espacios aquí. Vamos a crear un encabezado Hori. Ahora pega el texto aquí y cierra la etiqueta. Ahora volvamos a este contenido, y vamos a agarrar todo esto y peguemos solo envuelvo este texto en este párrafo. Ahora tenemos este contenido aquí, que quieres en este tipo de lista como viñetas aquí, y el elemento que usamos para eso es UL. Tal vez puedas adivinar UL significa lista de despedidos. Vamos a cerrar esta. Ese es uno sin números, que decimos es una lista desordenada porque el orden del elemento no importa Pero luego dentro de la propia lista, todavía tenemos que usar el elemento para los elementos individuales. Al igual que antes, necesitamos envolver todas estas diferentes piezas de contenido en un elemento aliado. Eso en realidad lo hicimos antes de aquí. Estoy seguro de que sabes cómo hacerlo, y tal vez viste que este es otro reto de codificación muy pequeño para ti. Pausa el video ahora haz exactamente lo mismo que hicimos aquí arriba. Envuelve cada uno de estos elementos en un elemento aliado real, y así así, puedes seguir practicando escribiendo algo de HTML por tu cuenta. Espero que haya sido un reto sencillo y hagámoslo rápidamente aquí. Agreguemos aquí los elementos aliados. Vamos a cerrar esta cabeza. Este es el texto grande, vamos a envolverlo aquí. Entonces, envolvamos todos estos en los elementos aliados en este último. Cortemos todos estos elementos y peguémoslos dentro del elemento UL. Y hasta ahora ahora aquí ven chicos, nuestro formato se ha vuelto muy desordenado Este es un elemento padre dentro de este elemento padre, por lo que este es un elemento hijo, por lo que no está en el orden correcto. Yo sólo quiero dar algunas pestañas aquí, y aquí ahora estamos teniendo sangría correcta Para que estén visualmente todos alineados como elementos hijos. Entonces tal vez te des cuenta de cómo estoy usando los términos elementos hijo y elementos padre. Entonces cada vez que tenemos un elemento en lugar de otro, básicamente el contenedor de otro elemento es el padre. Este es el contenedor de este elemento. Entonces esto se llama un elemento padre. Entonces en este caso, esta es una lista desordenada. Entonces los elementos que están dentro de este elemento padre, esto se llama elemento hijo. Todo bien. Y ya ves que lo del formato aquí está completamente equivocado. Pero eso no me preocupa porque para eso, tenemos la herramienta auxiliar de más guapa Prettier se encarga de todo nuestro formateo, pero ojalá veas que sin ese formato, esto parece un completo desastre Es muy difícil de entender. Por ejemplo, este elemento no es un elemento hijo de este UL. Este elemento es hijo de esta UL, pero está mostrando por sangría que es el elemento padre, eso no está justo aquí, debería estar alineado aquí, por ejemplo, así Pero también podemos dejarlo más bonito una vez que guardemos el archivo Y ahora como decía, mientras guardo este archivo, entonces Peter hace su magia y formateó muy bien este código aquí. Volvamos a nuestro que estamos creando. Entonces aquí lo ven. Simplemente recarguemos esta página web, y aquí está Crear lista es otra parte importante de escribir DM que usamos esto todo el tiempo. Y entonces espero que te hayas divertido un poco con esta conferencia porque fue bastante importante. Entonces, antes de seguir adelante, por favor asegúrate de revisar lo que acabamos de hacer aquí y también pensar un poco algunas de las cosas que dije antes, como el hecho de que cada elemento tiene un significado diferente y también que necesitamos usar estos elementos para estructurar nuestro contenido. Así que no podemos simplemente volcar todo nuestro texto aquí en el texto del cuerpo. Entonces, si lo hiciéramos, no habría estructura ni lógica en absoluto. Pero solo quería mostrarte lo que pasa si selecciono. Básicamente, todos estos textos. Vamos a nuestro archivo de contenido y seleccionemos todo el texto. Vamos a copiar esto. Y simplemente peguémoslo por aquí. Vamos a darle un ahorro, y aquí lo ves. Volvamos a nuestra página web. Vamos a recargar esta página web, y aquí está. Si bien ves que ahora es todo un gran bloque de texto y a HTML realmente no le importan los espacios en blanco. HTML elimina todos los saltos de línea aquí. Entrará en una sola línea. Para estos espacios en blanco y saltos de línea, todos son irrelevantes para HTML Eso es. No hay estructura, no hay sentido. Básicamente no hay nada. Eliminemos este texto, volvamos a cargarlo. Espero que este pequeño ejemplo te haya mostrado la importancia de básicamente envolver todas las piezas de contenido dentro de un elemento. Eso en realidad le da algún significado al contenido. Pero con eso, te dejo y te veo pronto en el siguiente video. En los próximos videos próximos, estaremos lidiando con algunas cosas más emocionantes, así que prepárate para eso. Gracias. 10. Imágenes y atributos: Ahora, una cosa que a nuestra entrada de blog aún le falta en este momento son algunas imágenes. Y así aprendamos ahora a usar el elemento de imagen STML. Entonces, si revisamos nuestra página de demostración, entonces notamos aquí que tenemos estas dos imágenes importantes. Entonces tenemos esta gran imagen aquí, que tipo de ilustrar la entrada del blog, y luego también tenemos esta foto de este autor, y así que ahora comencemos a incorporar estas imágenes a nuestra entrada de blog. Entonces las imágenes están, por supuesto, en nuestra carpeta de proyectos. Así que aquí en los archivos de inicio. Entonces vinieron con ese TatterFles y la única imagen, queremos agregarla a nuestra página web, esta Así que aquí lo ves aquí tenemos esta imagen de post. Así que simplemente haz clic en y podrás ver la vista previa en código VS solo sin ningún problema. Queremos agregar esta imagen a este archivo ML debajo de los elementos del cuerpo. Entonces aquí tenemos los encabezamientos. En primer lugar, agregaremos esta imagen de post. Entonces aquí se ve esta imagen está debajo de este párrafo que es publicado por María. Entonces estamos teniendo aquí este párrafo. Entonces por debajo de eso, tenemos que agregar esto. Entonces aquí tenemos que incluir esta imagen. Entonces igual que cualquier otro elemento, empezamos por escribirlo así. Entonces menos que símbolo, aquí tenemos que escribir IMG Pero ahora recuerda cómo en realidad te dije en la primera conferencia de esta sección que el elemento image es un elemento especial, y eso es porque no tiene ningún contenido, y por lo tanto tampoco tiene una etiqueta cruising. En cambio, lo que hacemos es simplemente agregar una barra aquí al final de este elemento, así Ahora quizás te preguntes si aquí no especificamos ningún contenido para el elemento image, entonces ¿cómo sabrá HTML qué elemento debe mostrar? Y esa es una excelente pregunta, que nos lleva a algo nuevo en HTML, que son atributos. Entonces, los atributos son básicamente piezas de datos que podemos usar para describir elementos. Así que hay muchos atributos diferentes en HTML, y uno de ellos es el atributo source. Y entonces ese es el que nos interesa ahora mismo. Así que el elemento fuente entra dentro de este elemento de imagen. Entonces aquí tenemos que escribir SRC e iguales, y tenemos que escribir códigos dobles, como puedes ver aquí Así que collab esta barra lateral, y ahora vamos a añadir post image Si no estás recordando la imagen, puedes ampliar la barra lateral. Puedes escribir el nombre de la imagen. Así que tenemos escribir post imagen. O puedes obtener la ayuda del código VS. Es auto sugiriendo. Simplemente puede hacer clic aquí. Así que volvamos a nuestra página web en la que estamos trabajando. Entonces volvamos a cargar esta página web aquí. Y efectivamente, aquí es genial. Así que de nuevo, vamos a recapitular rápidamente. No especificamos la imagen usando algún contenido en este elemento. En cambio, lo que necesitábamos hacer era especificar un atributo, y en este caso, es el atributo source. Y recuerda que un atributo es básicamente como un dato. Así que pieza de información que describe este elemento. Entonces aquí estamos describiendo la fuente desde la cual el navegador básicamente debería leer la imagen. Derecha. Ahora, además de los atributos fuente, hay otros atributos que podemos especificar para las imágenes, y uno que nunca debemos omitir es el atributo alt. Entonces tenemos que escribirlo así como Alt ALT, y tenemos que escribir iguales, y tenemos que proporcionar códigos dobles. Entonces, chicos, dentro de esto, tenemos que describir la imagen. Entonces aquí ya ven, chicos, Alt significa texto alternativo. Entonces básicamente lo que necesitamos especificar aquí es algún texto que debería describir de qué se trata la imagen. Y esto es muy importante por diversas razones. Una de ellas es que permitirá los motores de búsqueda como Google Chrome saber realmente lo que hay en la imagen porque sin la descripción los motores de búsqueda no saben realmente de qué se trata realmente la imagen, y probablemente aún más importante es que al especificar la descripción de la imagen, también podemos permitir que las personas ciegas usen nuestro sitio web. Por lo que los usuarios que utilicen un lector de pantalla no verán la imagen, sino que tendrán un lector de pantalla, leerán el texto alternativo, por lo que la descripción a ellos. Así que nunca te saltes este atributo. Es muy importante escribir siempre una buena descripción. Entonces aquí esta imagen es código HTML en pantalla. Ahora bien, esto no cambiará visualmente en realidad lo que vemos aquí a menos que no se pueda encontrar la imagen por alguna razón. Digamos que nos olvidamos de escribir este JPEG. Así que hemos olvidado este PG así que ahora si recargamos la página web, entonces aquí ves lo que hemos escrito en el texto Alter Entonces así es como está impreso en nuestra página web, como puedes ver. Entonces no queremos eso, así que escribamos. Y ahora volvamos a cargar la página web. Y aquí está. haciendo un gran progreso hasta este punto. Ahora, chicos, solo quiero reducir esta imagen. Entonces solo agrego un atributo más aquí. Entonces podemos usar muchos atributos. Entonces el que vamos a usar aquí, ese es el atributo width. Y aquí tenemos que escribir ancho igual y códigos dobles. Por lo que ahora vamos a reducir esta imagen en píxeles. Entonces ahora estoy dando esta imagen como 640 pixeles. Para que puedas escribir 640 así. Y ahora si recargamos la página web, entonces veremos los resultados Entonces ahora el ancho de la imagen se cambia con éxito porque aquí hemos incorporado este ancho. Así que más adelante un poco, veremos esto en la sección CSS. Chicos, también podemos proporcionar un atributo de altura también, por ejemplo, igual que ese. Entonces ahora podemos cambiar esto a 600 píxeles, y ahora podemos dar la altura como 280 píxeles. Entonces chicos, ahora ustedes están pensando que como soy capaz de dar estos pixeles. Entonces aquí conozco las dimensiones de la imagen. Entonces aquí se ve en la imagen del post, estamos teniendo este 1280 en 720. Entonces 1280 aquí es el ancho y 720 es la altura. Así que previamente he experimentado todo el ancho y la altura Lo que he hecho significa que tengo este ancho 1280. Entonces en la calculadora, entonces la mitad de esto es de 640 píxeles. Por lo que he agregado esto 640 pixeles. Entonces después de eso, he cambiado de opinión, y he dado los 600 píxeles. Entonces es bastante agradable y como lo mismo, he dado estos 40 pixeles. Entonces ahora si vuelvo a cargar la página web y aquí están las imágenes, pero claro, si quisiera, podría convertirla en un cuadrado Por ejemplo, lo que entonces distorsionaría completamente la imagen como vemos aquí Entonces este ancho es de 600. Entonces si solo le doy como 600 pixeles, entonces una vez que descargo la página web, entonces aquí se ve Nuestra imagen está completamente distorsionada porque hemos cambiado la relación de aspecto de la imagen Y chicos, una cosa más que quería mostrarles si no le han dado este atributo de altura, uno de ellos podemos dar. Y si simplemente quitamos esta altura, entonces se mantendrá la relación de aspecto completa. Así que vamos a recargarlo. Y aquí vamos. Así que vamos a cerrar esta barra lateral. Sin dar el atributo height, se mantiene la relación de aspecto. Pero claro, puedes dar una altura de acuerdo a ti. Así que vamos a recargarlo. Entonces así es como incluimos imágenes en un documento HTML así que volvamos a nuestra página web final de esta entrada de blog. Y aquí se ve, así que una imagen más queremos incluir aquí. Entonces esta imagen de autor de María. Entonces después de este título t, tenemos esta imagen de autor. Así que volvamos aquí. Debajo de eso, tenemos que agregar esta imagen de autor. Por lo que queremos incluir esta imagen de María. Entonces aquí puedes ir a esta barra lateral y puedes ver que tenemos esta imagen de autor, así que este autor punto PNG. Por lo que puedes incluir esta imagen. Así que simplemente colapso la barra lateral y solo agrego algunos espacios aquí. Y queremos esta imagen con un alto y ancho de 75 pixeles. Entonces tengo otro reto para ti, y lo que quiero que hagas es esta vez que incluyas esta imagen que te mostré tu cuenta aquí mismo en este lugar. Bien, así que tómate un minuto y pausa el video e incluye esta imagen con un 75 por 75 píxeles, y luego volveré aquí en un minuto con la solución. Todo bien. Entonces ojalá tengas un poco más de práctica aquí. Entonces vamos a agregar este elemento de imagen aquí, y solo quiero darle el SRC, entonces esta fuente Doble igual a, y conozco al autor. Entonces aquí, el código VS nos está ayudando, así que hagamos clic en él. Nunca siempre kip ese es el atributo alt. Entonces ahora para recapitular rápidamente, solo quiero decirles que este alter significa texto alternativo Escribamos una descripción de esta imagen. Yo solo escribo como disparo en la cabeza de María. Y entonces lo que queremos hacer significa que tenemos que dar la propiedad width. Escríbalo de tu mano, así el código debería pegarse en tu mente. Yo solo le doy como 75 pixeles, y ahora vamos a darle una altura de 75 pixeles, y no olvides cerrar este elemento de imagen con una barra como esta Así que guárdala, y volvamos a nuestra página web en la que actualmente estamos trabajando. Entonces ahora si vuelvo a cargar la página web, Bien, bien hecho. Buen progreso. Entonces ahora sabemos cómo funcionan las imágenes y cómo funcionan los atributos también. Y en realidad, podemos especificar atributos también en algunos otros elementos en HTML. Y una forma en que esto es muy importante es en realidad el elemento HTML en sí. Entonces vamos arriba y aquí ves en este elemento HTML, siempre debemos necesitar especificar un elemento, así que ese es el lenguaje. Entonces, para el lenguaje, usamos esta palabra clave ang, y escribimos códigos iguales y dobles. Entonces, qué significa esto, qué idioma estás usando en tu navegador web. Por lo que actualmente estamos usando el idioma inglés. Entonces para el idioma inglés, usamos la palabra clave como Ian así así. Pero para otros idiomas, hay otros códigos. Por ejemplo, para el alemán, probablemente sea el DE y para el portugués, usamos PT así. Y si tienes algún otro idioma, solo puedes averiguar el código buscando en Google Entonces agreguemos este Ian. Otra cosa que podemos y realmente debemos hacer, que es especificar el juego de caracteres que se utiliza en este documento. Entonces eso es algo que entra en la cabeza porque es una pieza de información que describe el documento. Entonces aquí necesitamos otro nuevo elemento aquí dentro de este elemento cabeza. Entonces aquí necesitamos un nuevo elemento que simplemente se llame meta. Entonces metadatos significan datos sobre datos. Y así aquí estamos describiendo el conjunto de caracteres. Así que aquí escribimos conjunto de cuidado y equivale a doble código. Y aquí tenemos que escribir en la forma mayúscula que UTF y ocho, que básicamente son todos los caracteres simples que usamos en idioma inglés Ahora bien este de aquí, este elemento no tiene una etiqueta de cierre, y así simplemente cerramos esto con una barra como esta Ahora no estoy gastando mucho tiempo en este tipo de cosas porque más tarde, cuando realmente construyas tus propias páginas, entonces esto sucederá automáticamente. Esto fue solo para mostrarte que esta es solo otra forma u otro lugar en que necesitamos algunos atributos donde luego necesitamos especificar un valor para ello, bien. UT de ocho aquí es el valor. Especificamos para este atributo de conjunto de caracteres. Bien, y si. Entonces chicos en el siguiente video, estaremos haciendo algunos enlaces más emocionantes. Creo que eso es todo para esta conferencia, así que te veo en la siguiente. 11. Hipervínculos: Uno de los bloques fundamentales de Internet son los hipervínculos o para los enlaces cortos Los enlaces son lo que realmente permite que Internet sea una web mundial. Sin enlaces entre páginas, no habría web y así aprendamos ahora a colocar enlaces en nuestras propias páginas web. Ahora podemos colocar enlaces en dos grandes categorías. La primera categoría son los enlaces que apuntan a otras páginas dentro de nuestro propio sitio web. Digamos que aquí en nuestro sitio web, el Ninja de codificación, teníamos otra entrada de blog, para que luego pudiéramos crear un enlace desde esta página a esa otra página, ahora mismo por otro lado, la otra categoría son los enlaces que apuntan a fuera de nuestro sitio web. Por ejemplo, si coloco un enlace a wlthscool.com aquí en desde esta página, entonces eso por supuesto sería un enlace al Ahora, sí creamos estos dos tipos de enlaces exactamente de la misma manera en HTML, pero todavía hay algunas particularidades que debemos tener en cuenta Empecemos ahora de hecho con un segundo enlace que estaba describiendo, que apunta fuera de nuestro propio sitio web. Si vuelvo a mi página de demostración, entonces aquí se ve en lo que es la sección HTML, tenemos un enlace a la página web de W three Schools. Este enlace está apuntando a fuera de nuestra página. Si hago clic en él, entonces aquí puedes consultar estos enlaces va ahí. Básicamente a la página web de esta escuela WT. Este es básicamente un sitio web donde puedes aprender todo sobre HTML y también CSS y JavaScript. Ofrece tutoriales y recursos para el aprendizaje, desarrollo web y programación con ejemplos interactivos de experiencia práctica porque es importante como desarrollador web saber cómo usar y encontrar información aquí en esta página de documentación web. Ahora lo que queremos aquí significa, solo necesitamos copiar esta URL. Ahora para hacerlo, puedes crear una nueva pestaña aquí. Aquí puedes buscarlo como Webley Escuelas Webl HTML Introducción Ahora puedes consultar este sitio web de W three Schools, así que simplemente puedes abrirlo, y luego estarás alineado a la misma página web. O si no encontraste este sitio web significa que no hay ningún problema en absoluto. Así que solo estoy copiando esta URL, y nuevamente, ten en cuenta que a esto se le llama URL. Entonces, como saben, cada sitio web en Internet tiene su propia URL, y eso es lo que necesitamos para crear un enlace a esa página. Acabo de copiar esto así que solo vuelvo a la página de demostración y aquí lo ven. Este enlace está después de la lista de pedidos. Ahora, vamos. Aquí ves después de esta lista de pedidos, tenemos un enlace aquí. Vamos a crear un enlace después de esta lista de pedidos. Para crear un enlace en HTML, utilizamos el elemento A que significa ancla. Técnicamente un hipervínculo o un enlace en realidad se llama ancla en HTML Por lo que es un elemento ancla. Se puede cerrar así. O en realidad tenemos que cerrarlo. Empecemos por hacer eso ahora. En cuanto al contenido del enlace, lo que especificamos aquí es en realidad el texto que queremos mostrar en la página. El texto del enlace. En este caso, entonces w escuelas, pero ahora ¿qué pasa con la URL? ¿Queríamos que este enlace apuntara? Bueno, para eso, necesitamos volver a usar un atributo. En este caso, es un atributo Tariff y luego doble código entonces simplemente paginamos la URL que hemos copiado, y eso es en realidad todo. Entonces si le doy un guardado así que solo vuelvo a mi página web la cual estoy trabajando actualmente y si la recargo, entonces aquí lo ven Nuestro bonito enlace se crea en HTML, y aquí se ve cuando voy a ver a las escuelas WT, aquí se mostrará la URL. Puedes consultar aquí. Y cuando haga clic en él, entonces se puede ver esta página va a la página web de las escuelas WT donde tenemos Punto genial. Eso en realidad ya es lo básico para crear un enlace. Muy sencillo. Ahora mismo queremos que este enlace de aquí sea realmente como, volvamos. Y si revisas nuestra página de demostración, ahora mismo, lo que quiero significa, quiero este enlace en lugar de este texto. Entonces chicos para hacer eso, necesitamos crear un elemento de párrafo para eso y solo tenemos que escribir el texto. Por ejemplo, puedes conocer más en el enlace de anclaje es la continuación de este párrafo. Y aquí tenemos que cerrar el elemento de párrafo. Así. Vamos a guardarlo aquí, y vuelvo a la página web, y aquí puedo recargarlo. Aquí puedes echarle un vistazo. Esto es exactamente lo mismo que en nuestra demo. Y ahora que se ve igual que en el original, ahora mismo, fíjese aquí cuando haga clic en este enlace, entonces aquí verá lo que pasa aquí. Ves que navegamos directamente a esta página y ahora nuestra propia página desapareció Entonces, claro, podemos volver aquí. Pero a veces lo que queremos hacer es abrir un enlace en una nueva pestaña. Entonces déjame mostrarte también cómo podemos hacerlo. Y claro, eso no siempre queremos. Tantas veces realmente queremos que la página se mueva realmente a la URL que especificamos aquí. Pero también a veces es útil mantener la página abierta y simplemente abrir la URL en una nueva pestaña. Pero podemos hacerlo especificando un atributo target como este. Y la sintaxis es un poco extraña. Entonces tenemos que escribir subrayado y luego en blanco. Así que dale un guardado y volvamos y ahora recarguemos una vez más y notemos cómo cuando haga clic en este enlace, la página se abrirá en una nueva pestaña Observe cómo abrió una nueva pestaña, y nuestra original aún está abierta. Genial. Entonces esa palabra y así tenemos ahora un enlace que apunta a una URL que está fuera de nuestro propio sitio web. Pero ahora sobre el primer escenario, donde queremos enlazar a una página interna así que volvamos a nuestra página de demostración. Entonces aquí se ve en el comienzo mismo de esta página, tenemos estos enlaces, derecho. Entonces estos se supone que son los enlaces que 0.2 páginas que forman parte de este blog. Así que ahora vamos a crear este primer enlace aquí, así que bloguea y también crea una nueva página donde realmente puedas enlazar. Así que crear una nueva página como crear un nuevo documento HTML. Así que vamos a abrir la barra lateral, y aquí voy a crear un archivo como log dot HTML. Y escondido. Ahora hemos creado un archivo HTML vacío. Ahora podemos crear el boilerplate usando una hoja de referencia para crear la estructura HTML Pero en realidad vamos a practicar un poco aquí de nuevo. Si quieres, incluso puedes pausar el video, escribirlo por tu cuenta. Pero lo haré aquí muy rápido. Es HTML, y luego necesitamos dentro de eso necesitamos crear un elemento head, y por supuesto, necesitamos crear un elemento title para esa página de bloque. Entonces voy a cerrar el elemento head, y vamos a crear un elemento body para eso. Aquí voy a crear un tiene que agregar. Ahora escribamos bienvenido a nuestro blog. Y vamos a cerrar la H dos rumbo así, y ya está. Vamos a guardarlo, y aquí tenemos un documento HTML muy sencillo y agradable. Pero ahora con eso en su lugar, podemos crear un hipervínculo o un enlace aquí mismo en este archivo HTML de punto índice, que apuntará a ese blog dot HTML Vamos a cotejar esta barra lateral, para que el navegador navegue a esa página Hagámoslo después de este encabezado H uno. Entonces voy a crear un elemento ancla para eso y escribir HRF Ahora estoy dando el nombre de archivo como blog dot HTML, que hemos creado ahora Y vamos a cerrar el elemento ancla. Y dentro de este elemento ancla, necesitamos escribir el texto. Por ahora, voy a escribir blog así y vamos a guardarlo. Y si vuelvo a mi página web, que estamos trabajando y ahora volvamos a cargar la página web, y aquí está nuestro hermoso enlace ahora mira lo que sucede mientras hago clic en ella Boom. Ahora estamos en blog, y puedes ver aquí en esta URL, tenemos este blog dot archivo HTML al final de esta URL. Ahora mismo para volver, por supuesto podríamos hacer clic aquí en este botón de retroceso. Pero lo que también podríamos hacer es agregar un enlace aquí, simplemente apuntamos de nuevo al índice punto HTML ¿verdad? Eso suena como una buena idea. Así que volvamos aquí a este blog dot archivo HTML como otro reto más. Ahora quiero que en realidad cree este enlace por su cuenta. Pausa un video aquí y crea un enlace que apunte de nuevo al índice HTML del punto. Entonces, ¿lograste hacer eso o al menos probarlo? Bueno, eso espero seguro. Pero de todos modos, claro, utilizamos aquí de nuevo el elemento A. Y después hemos utilizado el Azure de atributo. Entonces necesitamos escribir aquí como pila HTML de punto índice, donde quieras apuntar este enlace. Así que vamos a cerrarlo. Y aquí voy a escribir vamos a cerrar el elemento ancla aquí. Entonces aquí dentro de este texto, voy a escribirlo como volver a casa. Si has escrito algo más, no hay ningún problema en absoluto. Y vamos a darle un ahorro. Y si vuelvo a cargar la página web, tenemos un enlace. Podemos pinchar en él y podemos volver atrás. Así que podemos volver al blog, y también podemos volver al punto índice m. Así que vamos a acercarnos este. Ya no lo necesitamos. Y solo para terminar, también podemos especificar en realidad un enlace que no vaya a ninguna parte. Déjame mostrarte eso a ti también. Así que vamos a escribir primero el contenido. Así que vamos a escribir un elemento ancla y vamos a cerrarlo. Y aquí, echemos un vistazo a la página de demostración. Aquí estamos teniendo una grilla flexbox y CSS. Ahora solo escribamos flexbox. Básicamente, el contenido, pero mira lo que sucede cuando vuelvo a cargar la página Entonces vamos a darle una s ahora ves que esto ya no es un enlace, entonces es un texto normal. Ves que solo dice flexbox, pero fíjate como es solo texto normal y no subrayado Claramente no es un vínculo. A pesar de que en realidad es un elemento ancla, pero lo que hace que un estímulo sea realmente un enlace es la propiedad HRF, por lo que realmente necesitamos especificarla De lo contrario, no es un vínculo en absoluto. Es entonces solo un ancla que ahora no es realmente útil. Pero y si no quieres estos puntos a ningún lado, como decía, bueno, la solución para es proporcionar tiene aquí. Si ahorro ahora y lo vuelvo a cargar, entonces estamos de vuelta a esto siendo un enlace En realidad, simplemente no apunta a ninguna parte. ¿Qué sucede cuando haces clic en este enlace es eso? Básicamente, vuelve a la parte superior, por lo que no hace nada. Por ejemplo, entonces va a la parte superior y un poco más adelante en este curso, realidad vamos a hacer uso de este comportamiento. Pero por ahora, solo quiero que sepan que así es como podemos especificar enlaces cuando aún no tenemos ninguna URL para ellos o no tenemos ninguna página. Básicamente, esto es como un enlace de marcador de posición, y así que vamos a copiar esto aquí, y solo lo paginé por aquí, y aquí solo lo escribo como cuadrícula CSS Entonces no hay necesidad de escribirlo de nuevo. Pero claro, si quieres, puedes escribirlo de nuevo. Entonces solo para que esa navegación se vea un poco más completa. Pero todos estos enlaces no deberían apuntar a ninguna parte, y así es como especificas enlaces o hipervínculos o anclas, como también puedes llamarlos en HTML. Esta es una parte muy importante de la web, como dije al principio, y así asegúrate de que entiendas cómo funcionan y cómo las colocamos dentro de nuestras propias páginas web. 12. Estructurar nuestra página web: Así que ya aprendemos un par de elementos HTML muy importantes y ya somos capaces de crear una bonita página con algunas buenas funcionalidades también. Pero ahora es el momento de agregar realmente alguna estructura a nuestro documento y a nuestros elementos. Y así aprendamos ahora un par de nuevos elementos HTML phi para eso. Ahora bien, cuando dije que a la página le falta alguna estructura, lo que me refería es que todos estos elementos que colocamos en nuestro documento, simplemente están apareciendo uno tras otro aquí. Realmente no se distinguen entre sí y sobre todo, es probable que no se agrupen de manera lógica. Entonces cambiemos eso creando algunos elementos contenedor para eso, que luego agruparán estos elementos juntos. Ahora lo primero que me viene a la mente, son los enlaces. Entonces tenemos estos enlaces. Así que cada vez que tenemos un par de enlaces, entonces tenemos que agrupar esto en un elemento de navegación. Entonces es básicamente como una navegación. Entonces estoy creando un elemento nav para eso. Entonces, básicamente, Nav significa navegación. Entonces solo estoy cerrando esto y solo le doy una salvada. Ahora bien, si vuelvo a cargar la página web, entonces aquí se ve en nuestra página web, nada ha cambiado Entonces todo lo que sucede aquí es que esto básicamente creó una caja invisible, que ahora contiene estos elementos. ¿Bien? Entonces el elemento sobre sí mismo no hace nada. Todo lo que hace es agrupar estos elementos juntos. Y entiendo que ahora mismo, realidad no parece intuitivo o lógico estar haciendo esto, pero confía en mí, será muy importante tener todas estas diferentes partes dentro de sus propios contenedores. Bien. Entonces mirando nuestra página web, aquí lo ven aquí estamos teniendo esta adición y los enlaces. Básicamente, es la parte de encabezado de nuestra página web. Así que solo necesitamos envolver esta adición y enlaces en nuestro elemento de encabezado. Entonces ese es un elemento especial en DML. Ahora estoy creando un elemento de encabezado como este. Sólo tenemos que cerrar este encabezado debajo del elemento de navegación. Ahora hemos agrupado este encabezado y enlaces en un elemento header. Chicos, después de eso enlaces, aquí estamos teniendo esta publicación de bloque. Chicos, solo tenemos que envolver todos estos postes de bloque. Tenemos un elemento especial en HTML para eso, el nombre del elemento es artículo. Un artículo en este contexto en realidad no significa simplemente un artículo escrito como este, sino que también puede ser como cosas del mundo real. Al igual que una computadora es un artículo 0R un bolígrafo o un teléfono. Entonces todos estos son artículos, y si de alguna manera necesitábamos representar una computadora en STML, entonces un artículo también sería un buen elemento para eso Ahora aquí ves que nuestro cuerpo está teniendo dos elementos hijos directos. Entonces básicamente este encabezado y también este artículo. Vamos a guardarlo, y si vuelvo a cargar la página web, entonces aquí lo ves Nada ha cambiado en nuestra página web. Por lo que el aspecto visual de la página web es bastante igual que en comparación con antes. Ahora, una cosa que podrías preguntar, bueno, si estas cajas, todas ellas no hacen nada, entonces ¿ por qué no las llamamos a todas solo Nav o a todas ellas encabezadas o a todas ellas artículo? Este también podría ser un artículo y nada habría cambiado en la página. Por ejemplo, a la derecha. Entonces si vuelvo a cargar la página, chicos, creo que algo ha cambiado Entonces aquí ya ves, así que el rumbo Hawn se hizo pequeño. Entonces es más pequeño que esto. Entonces este es básicamente el segundo encabezado, y este es el encabezado principal. Entonces ahora si añadimos este artículo, entonces es por eso que este rubro se hizo pequeño. Sin embargo, no lo hacemos por algo llamado HTML semántico Y voy a explicar brevemente lo que eso significa en el siguiente video. Pero ahora continuando aún más, así que volvamos a ponerlo aquí. Como el elemento header. Ahora, chicos, por fin, si miro mi página de demostración, ahora en la última, estamos teniendo esta pose relacionada, entonces esta lista y también estamos teniendo este texto. Básicamente, este texto se llama pie de página. Cada página que existe tiene un pie de página al final de su página web. Así que vamos a crearlo. Entonces solo necesitamos ir al final del archivo HDML y chicos para crear este pie de página, tenemos un elemento especial en DML Chicos, ahora podrían estar adivinando que el nombre sería Potter Entonces este es un elemento especial en HTML. Entonces solo tenemos que cerrar esto también pie de página. Ahora también podríamos crear un párrafo aquí para crear este texto. Chicos, escribamos ese texto aquí. No te he proporcionado este texto, así que solo tienes que escribirlo manualmente. Y chicos aquí se pueden notar eso. Entonces a esto se le llama símbolo de derechos de autor. Entonces tenemos esta C. Entonces, ¿cómo podríamos crear eso? Chicos, eso se llama como entidad HTML. Entonces es algo nuevo en HTML. Entonces ahora para crear eso, solo tenemos que escribir un pequeño código. Entonces tenemos que escribir por ciento. Y en mi caso, conozco el nombre del símbolo de copyright. Entonces tenemos que escribir por ciento, luego copiar, y tenemos que escribir punto y coma O simplemente puedes dar click por aquí, y solo tienes que escribir la otra parte. Vamos a escribirlo. Así que regresa en el futuro, dale un ahorro. Ahora volvamos a nuestra página web que estamos creando. Y si vuelvo a cargar la página web, entonces como esperabas, el aspecto visual de la página sigue siendo el mismo, como mencioné al principio Entonces estos nuevamente son importantes para agrupar el contenido en partes lógicas, lo cual es importante para HTML semántico y también para estilizar con CSS, como verás Hablando de HTML semántico, ese va a ser el tema de nuestro próximo video Entonces espero verte allí muy pronto. 13. Una nota sobre HTML semántico: Por lo que mencioné el término HTML semántico un par de veces en esta sección Y así que ahora definamos muy rápidamente lo que quiero decir con HTML semántico HTML. Cuando hablamos de semántica, lo que queremos decir es que ciertos elementos tienen en realidad un significado o un propósito apegados a ellos. Entonces, cuando pensamos en un cierto elemento HTML, en realidad no deberíamos pensar en cómo se ve ese elemento ya que se renderizó en la página. Pero en cambio, deberíamos pensar en lo que realmente significa ese elemento y lo que representa. Esa es básicamente la definición de HTML semántico. Ahora no todos los elementos en DML son semánticos. Y en realidad, ya hablé un poco antes aquí en este elemento. Entonces este elemento fuerte que hace que nuestro elemento sea audaz aquí en la página. Así que recuerda como antes usé el elemento B pero no le da ningún significado. Entonces lo expliqué antes, y así ahora tal vez tenga un poco más de sentido. Entonces nuevamente al usar el elemento fuerte, por lo que este texto seguirá siendo negrita aquí en la página web. Pero lo que realmente importa aquí es que ahora le asignamos algún significado a este contenido aquí. Ahora decimos que es un contenido fuerte, lo que significa básicamente una pieza de contenido muy importante. Y lo mismo aquí es para este elemento EM. Esto hace que nuestro texto sea enfatizado. Entonces esta palabra de tecnologías fundamentales, nuevamente, usamos EM para enfatizar esto, y todavía se ve itálica en la página web aquí, como pueden ver. Pero lo que realmente queremos decir es eso. Por lo que le dimos un énfasis especial. Eso es lo que significa este elemento aquí ahora mismo. Y lo mismo realmente cierto para todos estos elementos que usamos en el último video. Por ejemplo, aquí se ve en este elemento de navegación, todo lo que hace es crear una caja. Recuerda, que luego contiene estos tres elementos de anclaje. Pero visualmente en realidad no hace nada. Todo lo que hace es representar como sentido que se trata de una navegación. Pero en lugar de usar NAB, también podríamos haber usado un elemento más genérico, ¿cuál es el deve Vamos a escribirlo. Tenemos que cerrarlo también. Así. Visualmente, nada va a cambiar, y así todo esto hizo fue crear una nueva caja, sino una caja sin ningún significado. Entonces eso es lo que significa DV. Así que en el día anterior a DML Pi, siempre usamos D para cada caja que necesitábamos así en la página Pero luego apareció HTML Phi e introdujo este concepto de HTML semántico Y entonces ahora solo deberíamos usar el lement D cuando no queremos darle cierto significado a un determinado contenedor Entonces a un cierto elemento de caja en nuestra página. Entonces en este caso, realmente queremos que esto signifique que es una navegación. Lo mismo es cierto para la chica, el encabezado, y el más en forma que tenemos aquí abajo Y de hecho, es cierto incluso para el párrafo. Por ejemplo, todos los demás párrafos realmente son esencialmente cajas llenas de texto ahora. La P, por supuesto, tiene un significado semántico. Significa que es un párrafo, pero podríamos volver a usar una caja genérica sin ningún significado. Entonces el desarrollo y nada cambiaría visualmente. Así que vamos a escribirlo ahora vamos a recargar la página web. En realidad, algo sí cambió aquí. Perdimos parte del espacio blanco que sí tenemos alrededor de la P. Volvamos a ponerlo aquí de todos modos. Si carga, y ahora estamos de vuelta con nuestros párrafos porque queremos que tenga algún significado, y por supuesto, también queremos el espaciado que el navegador nos da por defecto alrededor de los elementos P. Pero la idea que mencioné todavía, porque podríamos recrear muy fácilmente este espacio aquí usando algo de CSS más adelante Entonces, si quisieras, hecho podríamos construir toda la página web solo a partir de elementos D si quisieras, y luego usar CSS para darles estilo como queramos. Pero claro, no hacemos eso. Utilizamos HTML semántico para dar significado a nuestros elementos. Ahora podría preguntarse por qué realmente lo hacemos y hay múltiples razones, y creo que ya las mencioné. Entonces uno de ellos es una optimización de motores de búsqueda, lo que básicamente significa que los motores de búsqueda como Google podrán entender la estructura de nuestro contenido, y por lo tanto podrán analizar mejor qué se trata tu contenido y de qué se trata tu página web. También escribir HTML semántico es extremadamente importante para accesibilidad y especialmente para las personas que confían en los lectores de pantalla consumen nuestras páginas web ¿Bien? Entonces espero que esto tenga sentido, y también seguiremos tocando este tema a medida que vayamos recorriendo el resto de los códigos. Pero aún así quería dejar muy claro desde el principio que cuando pensamos en HTML, no solo debemos pensar en cómo se ve realmente en el navegador, sino aún más sobre lo que realmente significan estos elementos y lo que representan. Y con eso dicho, terminamos todo lo que teníamos que aprender en esta sección. Y así en el siguiente video, configuraremos el código VS un poco más, y luego pasaremos a los retos finales. Así que no esperes y pasemos aquí a la siguiente conferencia. 14. Instalación de extensiones de código VS adicionales: Bienvenida de nuevo. Entonces comenzamos a configurar nuestro editor de código VS al comienzo del curso. Pero ahora en este punto, estamos listos para instalar tres extensiones adicionales que nos harán la vida un poco más fácil a medida que codificas HTML. Así que vamos a ir al panel de extensión aquí, y la primera extensión que vamos a instalar aquí se llama Revisión de imagen. Entonces tienes que escribir así y dar click en el primer resultado. Entonces, lo que hará esta extensión significa que nos mostrará una pequeña vista previa de imagen en nuestro archivo HTML. Ahora solo necesitas dar click sobre este botón de instalar, y yo solo vuelvo a mi archivo HTML de punto índice y simplemente me desplace hacia abajo. Ahora bien, aquí ves hemos declarado una imagen aquí, y aquí ves que nuestra pequeña vista previa de imagen se está mostrando en la cuneta, como se le llama Y aquí ves que tenemos una imagen más, así que hemos incluido en HTML. Chicos, como pueden ver en nuestra página web, estamos teniendo esta imagen, así que esta primera y la segunda. Así que hemos incluido aquí en este archivo HTML, y como puedes consultar aquí, hay un pequeño equipo de imagen aquí en esta canaleta Entonces una imagen más que estamos teniendo aquí. Ahora bien, este equipo de imagen está aquí, ¿verdad? Y esto puede ser extremadamente útil a veces. Entonces por eso de veras quería mostrarte éste. Ahora la siguiente extensión que vamos a instalar, así que solo vuelvo a mi panel de atención s. Aquí tienes que buscar resaltado de color. Ahora basta con hacer clic en el primer resultado. Entonces este es el icono de este resaltado de color. Así que una vez más, solo tienes que dar click sobre este botón Instalar. Y en realidad, éste, no puedo mostrarte todavía cómo se ve porque solo será relevante en CSS. Pero créeme que esta extensión es realmente, muy útil para visualizar colores en CSS Y ahora vamos a instalar otra extensión. Entonces solo tienes que escribir aquí la etiqueta auto renombrar. Haga clic en el primer resultado. Entonces este es el ícono de esta etiqueta rítmica de autor. Así que recuerda eso. Así que una vez más, solo tienes que hacer clic en este botón Instalar, y chicos se aseguran de marcar esta casilla de verificación Entonces siempre que haya una actualización de esta extensión, entonces esta extensión se actualizará automáticamente. Bien. Ahora para mostrar cómo funciona esta extensión, vuelvo a mi archivo HTML de punto índice. Digamos que en realidad queríamos hacer este encabezado como un elemento deve Por ejemplo, solo le renombro como DV así que antes, sin embargo, estamos teniendo este encabezado, por lo que se renombra automáticamente porque tenemos instalada una extensión llamada etiqueta auto renombrar Ahora, ves automáticamente también cambia la de cierre, por lo que la etiqueta de cierre. Y esto de nuevo, es extremadamente útil y nos hace la vida escribiendo HTML un poco más fácil porque créeme, necesitamos hacer esto todo el tiempo, como cambiar el nombre definitivo. Bien. Ahora vamos a ponerlo de nuevo. Entonces solo lo nombro como encabezado. Y como estoy escribiendo aquí, se está renombrando automáticamente, como puedes checar. Ahora, chicos, otra cosa que queremos hacer al menos, es decir, solo tenemos que ir a la configuración, y hay que hacer clic en la configuración. Así que volveremos a la configuración que hemos desactivado previamente Entonces ahora vamos a buscar el tanque de cierre automático. Ahora, asegúrate de marcar esta casilla de verificación así. Creo que en este punto, ya no cometerás los errores de conseguir una etiqueta de cierre. Y así ahora podemos permitir que el código VS haga ese trabajo por nosotros. Ahora volvamos a nuestro archivo HTML de punto índice. Y ahora, por ejemplo, si acabo de escribir un párrafo, por ejemplo, así. Entonces solo estoy escribiendo la etiqueta de apertura. Pero así que aquí ves que el código VS está cerrando automáticamente esta etiqueta de párrafo. Ahora, lo que sea que queramos escribir, podemos escribir o cualquier cosa que puedas escribir. Entonces este también es un entorno muy útil. Ahora vamos a eliminar aquí este párrafo. Y ahora vamos a instalar lo más importante, y eso se llama servidor en vivo. Entonces solo tienes que escribir aquí servidor en vivo así. Da click en el primer resultado, y ves aquí, ya tengo instalada esta extensión. Entonces ahora solo quiero habilitar esto. Ahora bien, si no ha instalado esta extensión, entonces por favor continúe e instale esta extensión. Ahora, sólo te voy a mostrar cómo funciona esta extensión. Así que volvamos a nuestro archivo HTML de punto índice. Chicos, ahora voy a la universidad este panel de extensiones. Ahora para abrir Live Server, sólo tienes que dar click sobre este botón. Entonces espero que puedas ver este botón de golf en la parte inferior aquí. Así que haz clic en él. Y después de hacer clic, ahora ves que nuestra página web se agrega a una nueva pestaña, ¿verdad? Entonces el servidor en vivo está diciendo que el servidor está iniciado. Así que acabo de cerrar esta. Ahora podrías estar viendo que es el mismo resultado, lo que obtenemos en nuestra primera página web. Por ejemplo, este , básicamente, se ve exactamente igual, pero hay una diferencia muy grande. Digamos que solo quiero cambiar este rumbo ninja de codificación. Entonces ahora solo quiero cambiar esto ya que, por ejemplo, voy a escribir aquí como en código. Ahora aquí ves, una vez que guardo el archivo, entonces aquí puedes checar. Por ejemplo, le doy un ahorro, y aquí lo ven. Ya ves lo que pasó, automáticamente recargó la página sin que nosotros tuviéramos que hacer nada Entonces todo lo que hicimos fue guardar el código, y lo que luego sucederá es que la página de aquí se actualice automáticamente. Entonces, todos los cambios que hicimos aquí básicamente quedarán inyectados en esta página, y ahora entonces se puede ver el reflejo de nuestros cambios de inmediato. Entonces lo volví a poner ahora. Entonces si le doy un ahorro, entonces puedes checar. No tenemos que volver a cargar manualmente la página web. Entonces el servidor en vivo está haciendo el trabajo por nosotros. Ahora bien, si quiero detener esta conexión, una vez que desarrolle esta página web, entonces simplemente puedo hacer clic aquí en este puerto cinco doble cero, y nuestra conexión de servidor en vivo terminará, bien, Bien. Ahora, una diferencia más que solo quería compartir contigo. Entonces solo vuelvo a ese archivo, y aquí se ve la ubicación del archivo muy largo. Básicamente se llama URL. Por lo que es completamente largo completo. Y en este caso, una URL muy corta, 127.0, lo que está diciendo significa, por lo que ejecutará un servidor web para ti Entonces siempre que hagas algunos cambios en un archivo HTML, entonces inmediatamente eso se reflejaría aquí. Ahora bien, si por alguna razón, no podrías hacer que esto funcione en tu computadora, entonces claro, no te preocupes. Aún puedes hacerlo a la vieja manera. Así que básicamente la forma en que lo hemos estado haciendo todo el tiempo hasta este punto, así que puedes simplemente abrir el archivo desde tu sistema de archivos como lo hicimos nosotros y luego seguir actualizándolo manualmente. Pero ahora mismo ya no necesitamos esta ficha. Simplemente cerramos esto. nuestro servidor en vivo sirviendo la página. Siempre que hagamos algunas ediciones, bien, y con eso, ahora estamos listos para abordar nuestros últimos dos desafíos de codificación en HTML. Nos vemos ahí pronto. 15. Desafío #1: Ahora es el momento del primer gran reto de codificación en este curso. Empecemos ahora. Antes de comenzar con el reto real, primero quiero hacer algunos cambios la estructura de archivos que tenemos en este proyecto en este momento. En particular, lo que quiero hacer es poner todas las imágenes en una carpeta para que luego pueda mostrarte cómo puedes incluir las imágenes así cuando están ubicadas en una carpeta específica. Así que ahora mismo aquí ves que estas imágenes están exactamente en la misma carpeta que nuestro archivo HTML de punto índice. Ahora bien, lo que quiero hacer significa que solo quiero poner todas las imágenes por separado carpeta, y luego quiero dar la ruta aquí en esa ubicación de origen. Ahora, aquí, aquí tenemos este toque Explorar, así que vamos a expandir esto. Como puedes consultar aquí, todas estas imágenes aquí están exactamente en la misma carpeta que nuestro archivo HTML de punto índice. Ahora solo quiero crear una carpeta aquí. Para crear una carpeta aquí ves aquí estamos teniendo este icono, solo tienes que dar click sobre el segundo icono, y ahora estoy dando el nombre de mi carpeta como IMG Hemos creado una carpeta aquí. Ahora solo explico esto. Simplemente arrastre y suelte aquí. Entonces hagámoslo mismo para todas las imágenes. Ahora todas las imágenes están en la carpeta IMG. Ahora vamos a recoger la barra lateral. Vamos a guardarlo en nuestro archivo HTML de punto índice. Ahora, solo quiero recargar la página web, no esta, básicamente esta demo Éste, que actualmente estamos trabajando. Ahora si vuelvo a cargar la página web, entonces aquí puedes echarle un vistazo. Estas dos imágenes, la que tenemos anteriormente no se encuentra aquí porque las hemos reproducido en una carpeta separada. Por lo general, lo que haremos significa que vamos a crear una carpeta y luego agregaremos imágenes a esa carpeta. Vamos a expandir esta barra lateral. Ahora aquí ves que nuestras imágenes están en la carpeta de imágenes. Ahora para solucionar este problema, lo que tenemos que hacer significa que tenemos que dar aquí antes como IMG entonces tenemos que dar un slash Entonces tenemos que dar el nombre de la imagen. En este caso, este autor punto png. Ahora bien, si le doy una caja fuerte y si vuelvo a cargar la página web, entonces aquí se puede ver la imagen se apareció aquí y también apareció aquí en esta cuneta, como se le llama Ahora, hagamos lo mismo para la segunda imagen también. Entonces estoy dando como IMG, luego slash. Vamos a guardarlo y entregar la página web. Ahora la segunda imagen también aparece aquí y también aparece aquí en esta cuneta Ahora resolvemos completamente el problema de las imágenes que tenemos en la carpeta separada. Por lo general siempre ponemos las imágenes en una carpeta separada, y así pensé que era importante mostrarte, sobre todo ahora antes de este reto donde vamos a usar algunas imágenes más. Entonces sobre este reto, estoy de vuelta aquí en mi página de demostración y vamos a desplazarnos hacia abajo y aquí lo ves. Entonces, esencialmente, lo que quiero que hagas significa que solo tienes que codificar esta parte por tu cuenta. Básicamente esta sección de publicación relacionada. Ahora, aquí lo ves en esta sección de post relacionada. Entonces es como una lista sin orden, y aquí ves que esto es como una viñeta. ¿Bien? Entonces en esta lista desordenada, estamos teniendo tres elementos de lista y cada uno de estos está teniendo una imagen, un enlace de anclaje Entonces básicamente este enlace y este nombre de autor. Básicamente esto es como un párrafo. Entonces, déjame mostrarte dónde debería estar eso en nuestro marcado. Así que en nuestro archivo HTML. Vamos a desplazarnos hacia abajo donde tienes que codificar esta parte significa después de este artículo, solo tienes que codificar esto, no en el pie de página, no en el artículo. Debes codificar esta parte después de este artículo. Aquí vamos a necesitar otro elemento y éste, hecho escribo para ti. Aquí vamos a utilizar un elemento aparte. Y aquí ves que el código VS es autocompletado para nosotros. Aquí vamos a utilizar este elemento assign y el elemento assign suele ser usado para alguna información secundaria. Eso complementa la información en la parte principal de la página. En este caso, la parte principal de la página es el artículo, y luego el asside que es información secundaria es básicamente algunos puertos relacionados que están relacionados con el artículo A la parte principal. ¿Bien? Ahora, visualmente muchas veces, usamos el elemento aparte como barra lateral, pero no tiene que ser así. Pero sobre este reto, ve que se inicia con este rubro, por lo que este puerto relacionado. Uno de los encabezamientos, por ejemplo, H uno, dos, tres, cuatro, cinco y seis, recuerden, entonces aquí ven esto es en realidad una lista Ahora lo que no hacíamos antes era tener múltiples elementos de lista en lugar de un elemento de lista. Aquí arriba en este ejemplo, tenemos un elemento de lista básicamente estamos teniendo sólo este texto. Ahora bien, en este caso, en cada ítem de la lista, estamos teniendo una imagen, un enlace, y también tenemos un párrafo. Básicamente el nombre del autor, y no hay ningún problema en absoluto. Entonces, en lugar de cada elemento de la lista, puede haber varios otros elementos secundarios. Y con esa información, creo que ahora es capaz de construir esto ahora. Ahora por fin sobre las imágenes aquí. Esa es alguna información que necesitas. Básicamente, todos están exactamente en la misma carpeta. Básicamente aquí en esta carpeta IMG. Aquí ven aquí estamos teniendo relacionados uno, dos y tres. Básicamente, estas son todas estas imágenes. Y las dimensiones que quería darles son de 75 por 75 pixeles, y ahora creo que te di todo, favor pausa el video ahora y tómate un par de minutos, diez a 15 minutos tal vez escribir el HTML para esta sección. Buena suerte con eso y UCI una vez que estés listo. Todo bien. Ojalá te haya ido bien. Déjame mostrarte cómo lo hice. Vamos a crear como para encabezado y vamos a escribir post relacionados. Espero que empieces a ver lo útil que es el código VS ahora cierra automáticamente nuestros elementos HTML. Para esta lista con viñetas, vamos a crear una lista ander. Aquí necesitamos crear un EMI SAC, apellido SRC ahora estoy dando mi texto Al como mujer sonriente El único atributo que nunca olvidamos es el atributo lt. Mujer sonriente con el pelo largo y ondulado negro, y luego tenemos que darle el ancho como 75 pixeles. Chicos, una cosa más quiero decirles que pueden saltarse un atributo. Por ejemplo, puede omitir el atributo height o el atributo wit. De ambos atributos, puede omitir uno de los atributos. Ahora, por ejemplo, me estoy saltando como atributo height. Ahora vamos a cerrar la etiqueta de imagen y luego voy a crear un enlace, básicamente el elemento ancla, básicamente el elemento ancla, y mi enlace actualmente está apuntando a ninguna parte, así que lo estoy dando como hash y vamos escribir por qué es DMM la columna vertebral Ahora vamos a crear un párrafo. Básicamente, queremos escribir el nombre del autor. Ahora vamos a darle lo mismo y echemos un vistazo al resultado. Básicamente, es nuestra página de demostración. Ahora vuelvo a mi página web final en la que estamos trabajando. Simplemente me desplazo hacia abajo. Vamos a cargarlo. Genial. Hermoso. Lo que sea que estemos codificando en nuestro archivo HTML, eso se está reflejando en el navegador web real. Volvamos al trabajo. Vamos a crear este elemento list también, por ejemplo, elemento lie. Así que vamos a crear un elemento más aquí voy a crear una etiqueta de imagen y voy a crear un ultra atriboot Ahora voy a escribir mujer sonriente con laptop blanca y luego necesitamos crear un atributo width. Estoy dando las dimensiones como 75 píxeles y vamos a cerrar la etiqueta de imagen y vamos a crear un elemento ancla. Vamos a crear un párrafo. Básicamente David Smith. Ahora por fin, solo necesitamos crear un elemento de lista más y aquí voy a crear y solo lo último. Tenemos que escribir Altetribut y luego finalmente, estoy escribiendo hombre sonriente en nuestro traje formal negro Ahora, por supuesto, tu Altex no debería ser exactamente el mismo que el mío No es un problema en absoluto. Estoy dando un atributo width como 75 pixeles y vamos a cerrar. Ahora, vamos a crear un enlace. Básicamente este elemento ancla y no apunta a ninguna parte. Escribamos ¿por qué está creando Java? Ahora, por fin, tenemos que darle al autor el nombre Subi Sara. Davis. Ahora vamos a darle un guardado aquí y si reviso mi página web final, que estamos trabajando, si cargo la página web, hermosa. Esto se ve igual que en nuestra página de demostración, y ahora tenemos todo este contenido que queremos mostrar aquí muy bien marcado de una manera muy lógica. Quizás se esté preguntando por qué usamos una lista aquí en este caso, y la razón de eso es básicamente la idea detrás del HTML semántico Eso lo expliqué un poco antes. Si pensamos en esta publicación relacionada, podemos argumentar muy fácilmente que es esencialmente una lista de publicaciones relacionadas, y si es una lista, deberíamos marcarla en nuestro TML Deberíamos escribir nuestro STML como una lista, y eso es justo lo que hicimos después con CSS Posteriormente lo que haremos significa que eliminaremos las viñetas con la ayuda de CSS. Bien porque no tienen mucho sentido en este contexto, pero incluso con las viñetas eliminadas, seguimos queriendo el significado de este elemento. Todo esto aquí para ser una lista. Pero de todos modos, eso es suficiente para este video. Realmente espero que hayas completado este reto y que disfrutes haciéndolo, aunque tardara algún tiempo e incluso si tuvieras que revisar algunos conceptos de las conferencias anteriores, eso es completamente normal y así es exactamente como debería ser ahora para poder practicar un poco más, incluso se acerca otro reto de codificación, que está completamente separado de este proyecto. Pero es realmente emocionante, así que espero verte allí pronto. 16. Desafío #2: hora de otro emocionante desafío de codificación para que puedas seguir practicando tus nuevas habilidades HTML. En esta, quiero que construyas este componente para esta comodidad zapatillas modernas. Estoy diciendo componente aquí porque quiero que se imaginen este contenido aquí en el contexto de algo así como una tienda de comercio electrónico. Imagina que tenemos una zapatería y hay múltiples zapatos para cada uno de ellos, ahí está entonces el pequeño componente. Entonces cosas como el precio, una breve descripción. Un enlace y luego algunos detalles del producto aquí. Estoy escribiendo este DML en una plataforma especial de codificación llamada CodePen Este es un lugar en línea donde básicamente podemos escribir nuestro código, y luego ejecutará automáticamente el código y lo renderizará y facilita también compartir ese código. Ahora, por supuesto, no necesitas usar CodePen para completar este reto Ahora puedes ir a tu editor de código y puedes expandir esta barra lateral. Y aquí ves que he creado una carpeta para ti. Básicamente estos retos carpeta y si vas dentro de esto, entonces aquí como puedes ver, aquí estamos teniendo esta imagen, y también tenemos este archivo de texto. Entonces básicamente, te he brindado todo el contenido de este reto. Ahora, si quieres ver la vista previa de la imagen, simplemente puedes hacer click sobre ella y puedes consultarla aquí. Y también lo mismo aquí que tenemos nuestro archivo de contenido. Básicamente, tenemos todo el contenido para completar este reto. Chicos, si están completando su desafío de codificación, entonces necesitan una cosa más que sea una URL de esta imagen. Ahora, CodePen no te permite agregar imágenes directamente a su plataforma Entonces, lo que he hecho significa que he alojado esta imagen en una sola plataforma, y he creado una URL para lo que puedas hacer significa que simplemente puedes copiar esta URL y pegarla en el lápiz de código. Ahora, chicos, si quieren el contenido de este reto, entonces aquí ya ven, yo he proporcionado el texto para eso. Entonces básicamente desde aquí, puedes agarrar todo el texto hasta aquí, puedes copiar el texto. La razón por la que no estoy haciendo eso aquí en este video es porque en realidad vamos a construir sobre este reto más adelante. Entonces seguiremos desarrollando este proyecto muy pequeño, y eso luego crearía un lío de archivos diferentes y mucho código diferente. Debido a que lo estás haciendo en tu propia computadora, es más fácil para ti si quieres, crea un nuevo archivo ML y hazlo aquí. Pero por otro lado, creo que también es útil y útil para ti aprender un poco sobre CodePen y crear el reto ahí Déjame darte una demostración muy rápida de CodePen Vamos a crear una nueva pestaña aquí y busquemos CodePen. Y puedes echarle un vistazo aquí codpen dot IO, simplemente haz clic en él Chicos, si están viendo este video en el futuro, entonces la interfaz de este sitio web podría cambiarse. Chicos, después de que ingresen a este sitio web de CPN, simplemente pueden hacer clic aquí en la codificación de inicio Así podrás ver esta interfaz de CodePen. Pero siempre puedes crear un nuevo lápiz de código aquí viniendo aquí como copen dot IO slash PN Ahora, chicos, permítanme presentarles algunas cosas sobre CodePen Básicamente, aquí tú aquí estamos teniendo este HTML. Este es un panel HTML, y esto es CSS, y este es un panel de JavaScript. Básicamente, puedes codificar aquí como HTML y CSS aquí y también JavaScript aquí en este panel. En este caso, no quiero este panel CSS y JavaScript. Entonces lo que voy a hacer significa que simplemente colapsaré este panel. Para cotejar esto, simplemente hago clic en este botón de flecha, y aquí lo ven aquí estamos teniendo una opción como minimizar editor CSS, simplemente haga clic en él Y lo mismo voy a hacer por el JavaScript. Ahora, chicos, tenemos algo más de espacio aquí en nuestro panel HTML. Entonces chicos, cualquiera que sea el código HTML que codifiquemos aquí, se reflejará directamente aquí en este panel de resultados. Entonces, escribamos como un solo encabezado. Y aquí voy a escribir Hola Mundo. Entonces estoy cerrando la etiqueta. Ahora, chicos, como pueden consultar aquí, lo que hemos escrito en este panel HTML. Básicamente, hemos escrito un encabezado primario como hola mundo, y eso se refleja directamente aquí en este panel de resultados. Básicamente, el Hello world. Entonces echemos un vistazo al desafío de codificación, que queremos construir aquí. Aquí ves que el nombre del reto es reto para. Qué todas las cosas hay en este reto de codificación que queremos construir. Básicamente, tenemos rumbo y una imagen, y también tenemos este precio y tenemos este envío gratis y tenemos aquí texto, y también tenemos un enlace, y tenemos los detalles del producto, y aquí estamos teniendo una lista despedido, y además tenemos un botón Ahora mismo para completar este reto, quiero darte algunas pistas, así que lo cambiaré a otro modo, así que simplemente hago clic en este modo fuente. Yo sólo me escondo. Ahora, chicos, lo que quiero significa, solo tienen que envolver todo este contenido en un elemento de artículo. Entonces aquí se ve una cosa más que tenemos. Básicamente esta imagen. CodePen no se permite alojar directamente las imágenes en esta plataforma, no podemos inyectar las imágenes directamente aquí en esta plataforma de codificación Entonces lo que podemos hacer significa, solo tienes que copiar esta URL. Entonces esta URL te proporcioné en el archivo de contenido, para que puedas checar ahí o simplemente puedes escribirla. Y una cosa más quiero decirles, aquí lo ven, aquí estamos teniendo un enlace, así que esta más información. Y al final, ya ves, aquí estamos teniendo esta flecha. Básicamente, esta flecha es una entidad HTML. ¿Bien? Ahora, chicos, solo quiero mostrarles una cosa más. Si voy a mi página web, entonces básicamente esta página web que anteriormente estamos trabajando, ahora aquí se ve en el pie de página, aquí estamos teniendo este símbolo de copyright. Esta también es una entidad ML. Ahora bien, lo que quiero decir significa que hay una lista práctica de entidades HTML. Así que puedes consultar aquí. Básicamente, en esta página web, por lo que la página web de esta escuela WT, tenemos esta lista HTML de cuatro entidades, por lo que tenemos muchas entidades DML Ahora, chicos, si quieren entrar directamente a este sitio web de escuelas WT, básicamente este espacio de entidad DML, entonces lo que pueden hacer significa que pueden crear una nueva pestaña, y aquí pueden buscar escuelas WT HTML cuatro entidades. Y aquí puedes consultar este sitio web para que simplemente puedas hacer click en él y estarás aterrizando hasta el mismo sitio web que te he mostrado anteriormente. Ahora volvamos al reto al que me estoy mostrando. Aquí ves aquí estamos teniendo esta entidad de flecha de escritura, básicamente este símbolo de flecha de escritura. Ahora, volvamos y si quiero buscar ese símbolo HTML de flecha de escritura, entonces lo que puedo hacer significa que simplemente puedo buscar por aquí. Por ejemplo, presiono en mi teclado como Control más F aquí estará presente una barra de búsqueda, y aquí buscaré flecha. Y cuáles son las flechas que están presentes en esta lista, se mostrará aquí. Por ejemplo, solo quiero esta flecha de escritura. Entonces aquí puedes checar. Aquí tenemos que escribir el código para la entidad DML como porcentaje R A R y punto y coma Simplemente copiemos esto. Chicos, así solo ustedes pueden encontrar cualquier símbolo. Por ejemplo, en el video anterior, hemos utilizado el símbolo de copyright. Puedes escribir copyright aquí y podrás ver este símbolo de copyate, y aquí tenemos este código aquí Entonces este porcentaje de copia y punto y coma. Entonces que te mostré antes. Entonces en mi caso, quiero la flecha de escritura, así que solo escribo flecha aquí. Chicos, este código, hay que escribir aquí para completar el reto, y yo solo copio este código aquí. Y aquí abajo, ya ven, chicos, tenemos este botón clicable que es tarjeta Ato que nunca hemos usado anteriormente Entonces solo te muestro en este archivo TML. Entonces es como un simple botón. Entonces hemos creado un elemento botón para eso. Entonces hemos abierto y cerrado, y dentro de eso, hemos proporcionado el contenido. Derecha. Pero si lo estás construyendo en code pen como yo voy a hacer, entonces necesitarás esta imagen que se encuentra en esta URL. Así que simplemente copiamos esto aquí y lo usamos para tu propio proyecto. Entonces las dimensiones de la imagen deben ser de 220 píxeles. Y con esto, creo que te di todo lo que necesitas saber. Así que adelante y copia esta URL. Y ahora cambiará a la vista de página completa para que puedas ver todo a vez y Ni solo te dejará a ello y regresará aquí en cinco o 10 minutos una vez que estés listo. Bien, aquí estamos de vuelta y espero que no haya sido demasiado reto para ti así que no fue demasiado duro. Entonces ojalá tengas que practicar tus habilidades un poco más. Y así ahora en caso de que tengas alguna duda o te encuentres con algún problema, aquí te mostraré mi solución. Volvamos a nuestro bolígrafo de código. Básicamente nuestro lápiz de código vacío, y simplemente eliminaré esto y vamos a crear un elemento de artículo para eso. Y ahora como puedes ver, tenemos que cerrar manualmente los elementos y vamos a copiar todo el texto aquí. Ahora vamos a envolver todo el texto en algunos elementos. Por ejemplo, ahora voy a escribir dos encabezamientos, básicamente el encabezado secundario y aquí tenemos que cerrar manualmente los elementos. Después de este rubro, necesitamos esta imagen. Vamos a crear una etiqueta de imagen para eso. Ahora vamos a copiar la URL de esto. Acabo de copiar la URL. Ahora aquí, como puedes checar, he pegado la URL Ahora voy a escribir el atributo alt. Escribamos el texto de Al. Zapatillas en blanco y negro flotando sobre un fondo morado. Ahora estoy dando el ancho como 220 píxeles, y ahora voy a cerrar el elemento imagen. Ahora, como puede ver, los resultados se están reflejando aquí en el panel de resultados. Aquí ven que hemos envuelto este rubro. Básicamente, hemos envuelto este texto en el segundo encabezado y también hemos agregado una imagen. Entonces después de que veas, tenemos este texto por aquí. Entonces este texto de EstiML lo ves entra en una sola línea. Así que a EstiML no le importan todos estos espacios aquí. Entonces, lo que hará significa que tratará todo el texto como un párrafo simple. Por eso entró en una sola línea. Ahora vamos a envolver todo el texto en los elementos, por ejemplo. Entonces tenemos estos párrafos, vamos a envolverlo en el elemento de párrafo, y luego necesitamos crear un modelo más y como puedes ver, como estamos envolviendo este texto en los elementos, este código se está pretendiendo como puedes ver, un párrafo más que Y creo que esto es básicamente un vínculo. Entonces en HTML, necesitamos marcarlo como un enlace. Yo sólo quiero dar el HR de atributo. Y aquí no te mencioné a donde apunta este enlace. Entonces solo tenemos que proporcionar tiene representa que un enlace no está apuntando a ninguna parte, así que vamos a cerrarlo. Y aquí se ve aquí estamos teniendo una flecha, no es una forma correcta de representar la flecha. Tenemos una entidad especial para eso. Por ejemplo, necesitamos escribir el código para la flecha derecha como porcentaje, RAR, y semiclm entonces tenemos los detalles de proteger Ahora, básicamente, es como una partida. Ahora para este rubro que es paso a zona de confort, he dado como h dos. Ahora voy a dar este encabezamiento como h tres, y vamos a cerrar. Y luego tenemos esta lista de viñetas. Básicamente esta lista desordenada. Envolvamos eso también. Voy a crear una lista desordenada aquí Cortemos este texto aquí y lo pongamos por aquí. Voy a envolver todo este texto en un solo elemento alla como este. Creo que tienes algo de práctica escribiendo HTML. Tenemos finalmente un último elemento más. Ahora por fin, tenemos este botón de Attucat. Vamos a envolverlo en el elemento button así. Ahora vamos a ver el resultado aquí. Esto se ve exactamente igual que nuestro desafío a. Chicos, una diferencia más tenemos estos detalles de precios. Está en negrita, y aquí puedes comprobarlo está en el texto normal. Entonces, para negrita eso, lo que tenemos que hacer significa que tenemos que envolver este texto en un solo elemento fuerte. Entonces como hemos aprendido en las conferencias anteriores. Ahora, he envuelto este texto en el elemento fuerte. Ahora nuestro texto está en negrita, genial. Pero de todos modos, con esto, terminamos este reto y nos aseguramos revisar todo lo que acabas de aprender, todas tus nuevas habilidades, alumnos de Tear. Espero que estés disfrutando del curso y lo encuentres valioso. He puesto mucho trabajo duro en crear este curso para ti. Y tus comentarios significan el mundo para mí. Si este curso te ha ayudado de alguna manera, ya sea mejorando tus habilidades, aumentando tu confianza o inspirándote a crear algo por tu cuenta, tómate un momento para escribir una reseña positiva. Tus comentarios me motivan a seguir adelante. Gracias por ser parte de este viaje. No puedo esperar a leer tus pensamientos. Gracias.