Introducción al HTML: desarrollo web para principiantes | Kalob Taulien | Skillshare

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Introducción al HTML: desarrollo web para principiantes

teacher avatar Kalob Taulien, Web Development Teacher

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      HTML 101: una introducción al desarrollo web para principiantes

      1:11

    • 2.

      ¿Qué es HTML?

      1:15

    • 3.

      Cómo configurar la configuración

      1:28

    • 4.

      Síntesis HTML

      5:24

    • 5.

      La estructura base

      4:43

    • 6.

      Título de página

      2:24

    • 7.

      Paragraphs y títulos

      3:58

    • 8.

      El Whitespace no importa

      4:16

    • 9.

      Nido elementos HTML de la

      5:48

    • 10.

      Bold, italics, y Bold, y la rella

      5:21

    • 11.

      El elemento div

      3:52

    • 12.

      Bloquear elementos vs. elementos en línea

      3:37

    • 13.

      Enlazar a las otras páginas

      7:26

    • 14.

      Abrir enlaces en nuevas ventanas nuevas

      1:23

    • 15.

      Agregado de imágenes

      6:39

    • 16.

      Vincular una imagen a otra página web

      1:52

    • 17.

      Reglas y resúmenes horizontales de línea

      2:09

    • 18.

      Comentarios HTML

      2:38

    • 19.

      Listas

      3:08

    • 20.

      Etiquetas de CSS

      3:18

    • 21.

      Etiquetas de guión

      3:50

    • 22.

      Comparte el código con CodePen

      3:30

    • 23.

      Encuentra un soporte adicional

      1:56

    • 24.

      Tu proyecto final

      6:23

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

627

Estudiantes

27

Proyectos

Acerca de esta clase

Bienvenido a HTML 101: una introducción al desarrollo web para principiantes completos.

Si nunca has escrito ningún código de sitio web, este es el curso para ti. Cada sitio web utiliza HTML y es una habilidad vital para conocerla como desarrollador web.

¡Este curso está diseñado para principiantes absolutos que nunca han escrito ningún código antes!

¡Por suerte que aprender HTML es simple! En este curso breve curso, te voy a enseñar todo lo que necesitas saber sobre HTML y te ayudarte con la habilidad que necesitas para seguir aprendiendo HTML más avanzado (o si quieres aprender por tu propio tuyo).

Primero empezaremos con descarga el VS Code, el programa de edición de texto utilizado para la codificación. Luego, veremos cómo se ve la sintaxis HTML para que puedas prepararte para aprender en tu propia vez.

Después de todo eso nos sumergiremos en HTML en los enlaces, y aprenderemos sobre la estructura de la página base, los puntos vs. elementos structure, creando enlaces a otras páginas, agregando imágenes, listas en HTML, cómo ver la imagen de los códigos fuente de fuente de la página de sitio web, cómo ver lo que los veo.

Por Por último, vamos a echaremos un vistazo al mundo de CSS y JavaScript

Hay minitareas en el curso y también para tener experiencia práctica. Y el proyecto final incluye crear tu propia página de perfil utilizando solo HTML.

Mitos comunes:

La gente dice, "necesitas aprender primero en JavaScript "primero en casas" que es un mito porque JavaScript necesita conocimientos HTML.

La gente dice: "aprender CSS al mismo tiempo" que es un mitto porque CSS es enorme y puede tomar un mes para aprender. Aprender HTML por sí solo debe tomar solo unos pocos días.

La gente say, "soy demasiado viejo para aprender para aprender al cómo”: el mito es un mito porque he visto que en la edad de los mayores aprendes a programar y trabajar los trabajos increíbles trabajar en tiempo y casación.

La gente dice, "tienes que ser inteligente para aprender para aprender a aprender al cómo”: es un mito porque la codificación es como un negocio habilito, aprenderás los consejos y trucos mientras practicas y te mejoras con el tiempo.

RECURSOS:

Conoce a tu profesor(a)

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Profesor(a)

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. HTML 101: una introducción al desarrollo web para principiantes: Hola y bienvenidos a HTML one-to-one, una guía para principiantes de codificación. Echemos un vistazo a lo que se va a cubrir en este curso. Primero lo primero vamos a tener instalado un programa de codificación. Entonces vamos a echar un vistazo a qué es HTML y cómo escribirlo. Vamos a conseguir mucha experiencia práctica. Y por último, vamos a tener un pequeño proyecto donde creamos una página web HTML. Pero, ¿por qué deberías aprender HTML? Honestamente, es la estructura ósea subyacente detrás de cada sitio web. No se puede ver un sitio web sin HTML. Necesitas conocer HTML y con el fin de entrar en otro desarrollo web. Si quieres convertirte en desarrollador web, si solo quieres hacer sitios web para hobby, necesitas conocer HTML. Es muy fácil de aprender, sólo debe tomar unos días para captar realmente. Pero lo más importante, aprender HTML es el primer paso para aprender a codificar. Hola, me llamo Caleb contando y hoy voy a ser tu instructor. Soy desarrollador web senior e instructor de codificación premium. He enseñado a más de 300 mil alumnos a codificar con éxito. Y una vez más, bienvenido al HTML 101, una guía para principiantes de codificación. Una vez que estés listo, sigamos adelante y empecemos con esa primera lección. 2. ¿Qué es HTML?: Muy bien, echemos un vistazo a lo que es HTML. Entonces, ¿qué es HTML? Html significa lenguaje de marcado de hipertexto. En realidad no es un lenguaje de programación. Se llama lenguaje de scripting, pero sigue siendo absolutamente vital para el desarrollo web. Y el 100% de todos los sitios web utilizan HTML. Html es la estructura detrás de cada sitio web en internet es la columna vertebral detrás de cada sitio web. Y luego capas capa capa encima de HTML. Pero sin HTML, honestamente, no hay sitio web y esto no es una opinión, esto es sólo un hecho. Es así como funcionan los sitios web e Internet. Por lo que lo primero que debes aprender en el desarrollo web es HTML. Echemos un vistazo a HTML versus HTML5. A menudo verás a la gente decir, aprender HTML5 o HTML5, esto o HTML5 aquello. Pero HTML5 es en realidad la última versión de HTML y simplemente siempre se llamará HTML5 y eventualmente sólo se llamará HTML. Por lo que no hay HTML seis en el camino, no hay sexta iteración de HTML. Entonces cada vez que veas HTML5, en realidad puedes pensar en HTML5 y HTML como exactamente lo mismo. Y eso es porque son exactamente lo mismo. 3. Cómo configurar la configuración: De acuerdo, echemos un vistazo a conseguir la configuración. En primer lugar. Vas a necesitar un editor de texto. Sugiero altamente VS Code. Es gratuito y funciona en todos los sistemas operativos. Por lo que antes de hacer algo, vamos a asegurarnos de que tenemos VS Code instalado. Y yo sólo voy a Google este VS Code descarga y está codificado punto Visual Studio.com. Y este es el programa de edición de textos que vamos a utilizar en este curso. Ahora si ya has escrito código y tienes un editor de texto diferente que prefieras, eso está bien. Pero si nunca has escrito código antes, sigamos adelante y descarguemos este programa. Entonces para mí, en este curso, estoy usando un Mac. Pero no importa si estás usando Mac o Linux o Windows, va a ser el mismo programa, justo en los tres sistemas operativos. Ventanas 78 o diez. Asegúrate de descargar este. Si estás en Mac, descarga este. Y si estás en Linux, descarga una de estas dos. Una vez que tengas el código VS descargado e instalado, asegúrate de que puedes abrir tu editor de texto de la misma manera. Por lo que el tuyo va a verse un poco diferente. Una vez que lo abras, el tuyo va a ser de un color diferente, pero en última instancia son exactamente las mismas mentes del programa, solo un color diferente porque me gusta la accesibilidad detrás de él. A mí me gusta poder escribir cosas aquí. Y es un color bastante fácil para que leas en tu pantalla. Entonces solo vas a lucir un poco diferente en colores, pero el diseño general va a ser exactamente el mismo. Así que asegúrate de tener el código VS descargado e instalado. Y una vez que tengas eso, pasemos a esa siguiente lección. 4. Síntesis HTML: Okey-dokey. Echemos un vistazo a la sintaxis HTML. Ahora la palabra que estoy diciendo aquí es sintaxis. Y todo eso significa es el estilo que escribes algo. Entonces el inglés tiene una sintaxis particular con apóstrofos, periodos, signos de interrogación, comas, cosas así. Es como un marcado de cómo escribimos un idioma. Y escribir código no es diferente. Hay ciertas reglas que tenemos en marcha. Entonces lo primero es lo primero, sigamos adelante y veamos alguna sintaxis HTML. Por lo que típicamente se ve así. Tenemos algún tipo de elementos. Y se abre así y se cierra así. Por lo que a cada uno de estos se le llama etiqueta, esto como etiqueta de apertura. Y esta es una etiqueta de cierre. Y siempre, siempre, siempre, siempre, siempre tiene menos que signo. Entonces la palabra del elemento, lo que sea el elemento, y hay muchos de ellos. Y luego un signo mayor que. Y luego para terminar con un elemento, hacemos lo mismo. Nosotros lo abrimos. Y entonces decimos en realidad esto no es un elemento de apertura, esto es un elemento de cierre y lo decimos con una slash y luego la palabra. Y luego lo cerramos de nuevo con un signo o símbolo mayor que. Ahora te habrás dado cuenta de que puse esto en una línea diferente, y eso en realidad está bien. A Html realmente no le importa el espacio en blanco extra, por lo que esto realmente no importa. Todo esto, todas estas líneas extra entre la línea cuatro y la línea 11, realmente no importa ser honesto. Hablaremos de eso más a fondo un poco más tarde. Entonces todo esto aquí mismo, eso se llama elemento. Ahora dentro de estos elementos podemos tener texto. Entonces conseguimos, digamos, algún texto aquí. Y lo que un navegador va a hacer es entonces decir, Hey, aquí hay un elemento en particular y se está cerrando aquí, y lo que sea que esté dentro, aplicarle estas reglas. Entonces, cualquiera que sea la regla del elemento, tal vez tan audaz, hacer que este texto sea audaz es lo que va a hacer. Y hablaremos de audaz también en el futuro. Pero ahora mismo, también necesitas saber que ese elemento no es en realidad un elemento real. Sólo estamos revisando la sintaxis aquí. Sólo para que esto tenga sentido. En las próximas lecciones. Otra cosa que podemos tener son estas cosas llamadas atributos. Y esto realmente va dentro de un elemento. Entonces lo que voy a hacer es dividir esto en su propia línea, y eso está bien. Va a ser básicamente exactamente lo mismo a tu navegador porque de nuevo, no le importa este espacio extra ahí dentro. Entonces tenemos estas cosas llamadas atributos y luego va nombre de atributo es igual a. Y luego puedes tener dos apóstrofes como este o dos comillas como ésta. Y entonces podemos poner algo de valor aquí, algún tipo de texto. Entonces podemos decir algo de texto aquí. Ahora podemos tener múltiples atributos. Podemos tener, digamos, un atributo de título. Y de nuevo, no necesitas saber qué es esto, cubrirá todo esto en futuras lecciones. De nuevo, sólo estamos revisando la sintaxis aquí, y este es un ejemplo de un segundo atributo. Segundo atributo. Aquí, podemos tener más y más y más, en realidad podemos tener un número ilimitado de atributos. Los atributos son igual que los elementos. Un elemento tiene una regla que tu navegador va a leer. Entonces si esto fuera a ser audaz, tu navegador, es un texto más audaz. Y sólo porque escribo atributo aquí en realidad no significa que vaya a hacer nada. Ahora un buen ejemplo de esto, porque esto no es realmente valioso en absoluto, atributo no es un atributo válido en HTML. Podríamos simplemente escribir título es igual a, y luego cualquiera que sea el título, y el título es en realidad un atributo apropiado. Y puedes tener esto, uh, la mayoría de tus elementos HTML. De nuevo, hablaremos de eso en el futuro. Tampoco es necesario memorizar todo esto. Porque a medida que escribes esto, medida que tus dedos empiezan a escribir cada vez más, vas a familiarizarte con cómo funciona el HTML y cómo se ve. Entonces la gran comida para llevar aquí es, este es tu elemento y tienes una etiqueta de apertura, y todo esto es una etiqueta. Tienes una etiqueta de cierre y todo lo que abarca es tu elemento. A continuación tenemos atributos, como el atributo title. Y así va, el nombre del atributo es igual a él necesita ese signo igual. No añadas espacios antes o después de él. Asegúrate de que esté del todo. Entonces tienes tu atributo es igual a. Y luego cualquiera de las citas, apóstrofes. Ahora aquí está la captura es que si se abre con una comilla, necesita terminar con una comilla. De lo contrario, si se abre con un apóstrofo, necesita cerrar dentro de un apóstrofo. Y en realidad puedes ver el código VS resaltado esto para mí. Dice, todo aquí abajo es igual. Y eso se llama resaltado de sintaxis. Pero en cuanto sustituí esa cita por un apóstrofo, porque este atributo necesita abrirse y cerrarse con el mismo carácter exacto. Este resaltado de sintaxis funcionó. Ahora si tu resaltado de sintaxis no funciona de inmediato y estás siguiendo como video y estás tratando de hacer lo que estoy haciendo. Bajen aquí y esto probablemente va a decir texto plano. Puedes hacer clic en esto y puedes escribir HTML y solo tienes que hacer clic en éste y cambiará tu sintaxis resaltando por ti. Entonces eso es todo lo que hay a esta lección en particular. No hace falta hacer nada en este momento. Simplemente es realmente importante saber que todo esto es un elemento. Esta es una etiqueta de apertura. Esta es una etiqueta de cierre. Este es tu contenido interior. Y este tipo de aquí es un atributo. Deja que eso se hunda solo un momento. Una vez que estés listo, pasemos a la siguiente lección donde hablamos de la estructura HTML base de cada página. 5. La estructura base: De acuerdo, echemos un vistazo a la estructura base de cada página web. Entonces tengo VS Code abierto aquí y solo voy a ir a Archivo Nuevo, eso en realidad está fuera de mi área de grabación. Por lo que sólo Comando o Control N o Archivo, Nuevo Archivo. Y vas a ver este nuevo archivo. Vamos a seguir adelante y cambiar esto de texto plano a HTML. Y lo que podemos hacer aquí es llenar automáticamente. Entonces tenemos un buen atajo aquí, así que no tenemos que recordar esto es HTML colon cinco. Y luego si golpeas tabulador, debería autocompletar para ti usando la abreviatura de Emmett. Eso se puede ver en el lado derecho de mi pantalla aquí. Entonces sigamos adelante y golpeemos a Tab. Y hace todo esto por mí. Ahora, voy a seguir adelante y borrar algunas cosas sólo porque no lo necesitamos en este momento y podría ser un poco confuso. Y sólo voy a cambiar esta sangría sólo para que podamos ver algún anidamiento y hablaré de eso en eso, hablaré de eso en tan solo un segundo. Pero pasemos por esta línea por línea. Entonces, línea número uno, este es el tipo de elementos más raros que vas a ver. No se ven elementos con demasiada frecuencia comenzando con un signo de exclamación El tipo doc es el único. Entonces estamos diciendo, hey navegador cuando cuando lees este archivo no, que es un archivo HTML5. Es un archivo HTML. No es un PDF, no es texto plano, no es JavaScript, no es CSS, no es una imagen, No es una fuente, no es algún tipo de otro documento. Se trata de una página HTML, así que por favor renderíala como una página HTML. A continuación en la línea dos, tenemos una etiqueta de apertura llamada HTML, y aquí es donde realmente va todo nuestro HTML. Y luego en la línea nueve, estamos cerrando que las etiquetas decían que todo aquí va a vivir dentro de esta etiqueta HTML y código envidioso, en realidad puedes hacer clic en esta flecha pequeña y puedes colapsarla, lo cual es realmente bonito. Entonces si alguna vez tienes demasiado código, te estás abrumando un poco. Siempre puedes colapsar tu código. A continuación tenemos dos partes principales a cada página. Tenemos la cabeza. De nuevo, eso es un elemento de cabeza de apertura, bien, etiqueta más bien. Y esta es una etiqueta de cabeza de cierre. Y todo esto es el elemento principal. Y en realidad se puede ver eso igual que HTML. Y tenemos otro elemento aquí llamado título. Pero éste está anidado dentro de la cabeza y la cabeza está anidada dentro de HTML. Y entonces tenemos un elemento de título aquí que apenas cambia el título de la página. Entonces cuando vas a una página web, como ésta cuando descargamos el código VS hace un par de lecciones. Cambia este título aquí para ti. Eso es lo que hace el elemento title. Ahora puedes tener todo tipo de cosas en tu cabeza, pero puedes pensar en el elemento de la cabeza como literalmente la cabeza de tu cuerpo. Es tu cerebro. Tiene toda esta información extra. Por lo que no es completamente visual, pero sí sostiene información extra. Tu cuerpo es igual al cuerpo en el que vives. Es lo que la gente va a ver. Entonces si vuelvo a esta página solo como ejemplo, todo aquí dentro forma parte del cuerpo. Entonces todo lo que es visual, la parte interactiva de tu página web, ese es el cuerpo. Y vamos a estar poniendo la mayor parte de nuestro código ahí dentro. Entonces sigamos adelante y hagamos un ejemplo aquí. Y vamos a escribir hola mundo. Y lo que voy a hacer es salvar esto. Así Archivo Guardar como. ¿ Y dónde debería tirar esto? Tira esto en mi escritorio. Voy a llamar a esto Hello World dot HTML. Ya tengo uno, así que sigamos adelante y sustituyamos eso. Ahora lo que puedo hacer en mi navegador, a medida que llegue, nuevo, puedo ir al archivo, pero esta vez voy a ir a Abrir archivo. Entonces es comando o o o si estás en Windows, creo que tiene que escritorio. Y abramos hola mundo. Y esta es una página web. Ahora, si estás siguiendo este video, definitivamente siéntete libre de hacer una pausa en este punto y tratar de escribir el código que he escrito en este video. No es mucho código y es realmente fácil escribir con VS Code. Recuerda HTML colon cinco y luego pulsa pestaña. Y eso autocompletará todo eso para ti. Y luego solo escribe algo dentro de tu elemento corporal. Entonces acabo de escribir hola mundo, y eso apareció como texto en mi página. Si haces eso, guarda tu archivo y luego ábrelo en tu navegador. Y ves Hola mundo. Entonces oye, felicitaciones, literalmente acabas de hacer tu primera página web. Entonces mi sugerencia es darle una oportunidad porque esto siempre es realmente, realmente buena práctica y esto es realmente sencillo en este punto. Entonces sí, mi sugerencia es darle una oportunidad a esto. Una vez que estés contento con tus resultados o tal vez no quieras darle una oportunidad a esto y quieres pasar a la siguiente lección. De cualquier manera, pasemos juntos a esa siguiente lección y empezaremos a hablar del elemento del título. 6. Título de página: Ok. Hola y bienvenidos de nuevo. En esta lección, sigamos adelante y hablemos de este compañero aquí mismo, el elemento del título. Entonces en la última lección creamos esta página llamada hola mundo. Y yo sólo voy a borrar esto. Y esta es la página que originalmente teníamos y decía documento ahí arriba, justo en esa pestaña. Entonces sigamos adelante y actualicemos esto y lo vamos a ver igual que el nombre del archivo y que coincide con el nombre del archivo aquí. Así que hola subrayado mundo dot HTML. Hola underscore world dot HTML. Lo mismo. No realmente elegante, no es lo que buscan tus usuarios, no es amigable para motores de búsqueda. Pero podemos cambiar eso con un elemento de título. Y así voy a escribir título slash. Adelante y las mentes se ponen a una plantilla de Django. Pero quiero cambiar esto de unas plantillas de Django a un archivo HTML. Entonces sigamos adelante aquí y cambiemos este título. Digamos hola de Caleb. Y refrescar. Y siempre se puede refrescar con el comando R o creo que el control lo son. Solo estoy usando Google Chrome por cierto, realmente no importa qué navegador estés usando. Pero solo puedes recargar la página y dice hola desde Caleb y puedes cambiar eso en cualquier momento en el tiempo. Podríamos saludar desde la Tierra. Y podrías hacer File Save o puedes golpear el control S o el comando S, creo que lo es. Sí, Command S en un Mac, creo que es Control S en Windows. Sólo tienes que seguir adelante y guardar ese archivo. Volvamos aquí, refresquen esta página. Hola de la Tierra. Y así esa es la etiqueta del título. Ahora, solo deberías tener una etiqueta de título porque en realidad solo se usa una vez. Al tener que titular etiquetas, tu navegador no va a saber cuál usar. Así que solo asegúrate de que solo tienes la etiqueta de un título. Ahora la cosa de esto, este elemento en particular, este elemento de título, tiene que vivir dentro del elemento de cabeza, y eso tiene que vivir dentro de tus elementos HTML. Entonces ahora nos estamos metiendo en anidar. Tenemos este elemento HTML, y dentro de él tenemos título de cabeza, elemento de cierre, y tenemos elemento de cierre de contenido corporal. Y eso es todo lo que hay para crear un título en una pestaña aquí arriba usando HTML naciente fácil. Una vez que te sientas incómodo con eso, vamos a repasar esa siguiente lección y empezaremos a agregar algo de contenido real a una página. Entonces no sólo dice hola mundo, va a decir hola mundo y tal vez un título podríamos escribir un párrafo, podemos tener múltiples títulos, cosas así. 7. Paragraphs y títulos: De acuerdo, echemos un vistazo a los párrafos y encabezados. Y aquí es donde una página realmente va a empezar a tomar un poco de forma extra aquí. Entonces no sólo va a decir hola mundo. Ahora un párrafo, y como muchos elementos en HTML es solo una etiqueta p. Pero como es un elemento y es un elemento bastante estándar, podemos hacer p y luego hacemos slash p. Y esto es otra vez, esta es solo nuestra sintaxis. Esta es nuestra etiqueta de apertura o etiqueta de cierre. Y todo el asunto juntos es un elemento. Entonces p significa párrafo, pero no escribimos párrafo, sólo escribimos p para párrafo. Aquí. Podemos o bien escribir algo de texto aquí o si quieres mantener tu código agradable y limpio, podemos seguir adelante y ponerlo en líneas separadas. Entonces sólo voy a mantener estos en líneas separadas. Creo que se ve un poco más limpio de esta manera. Y lo que voy a hacer es tipo Lorem, hit tab. Y llena mi área de texto con un montón de Lorem Ipsum, palabras latinas. No tengo idea de lo que esto significa, pero es algo común que vas a ver en el desarrollo web. Entonces sigamos adelante y ahorremos. Para que puedas subir a Archivo, Guardar o comando S o Control S en una ventana. Volvamos a la página que estamos creando y golpeemos refrescar. Y ahora tenemos este texto lorem ipsum. Ahora sigamos adelante y creemos un título para esta página, un encabezado. Entonces justo dentro del cuerpo, por encima del elemento P, no dentro de él, sino por encima de él. Vamos a escribir H1. Y lo bueno de VS Code es cuando escribes un elemento, siempre que diga abreviatura de Emmett, puedes simplemente golpear tab. Entonces golpeo tab y escribe mi código para mí y luego puedo escribir algo en el interior. Se puede decir, Bienvenido al HTML 101. Adelante, guarde esa página. Vuelve a nuestro navegador y pulsa refrescar. Tenemos este gran texto aquí, HTML, Bienvenido a HTML 101 y luego lorem ipsum aquí. Ahora si esto se ve más pequeño en tu pantalla es porque en realidad estoy acercado a un 175%. El tuyo debería parecerse algo un poco más a esto. Acabo de hacer esto más grande así que es más fácil de ver en tu pantalla. Ahora ese no es el único título de talla que podemos tener. Podemos tener elementos H2, H3, H4, H5, H6. Entonces sigamos adelante y creemos una etiqueta H2. Y esto podría ser como un subtítulo, una guía para principiantes para la codificación. Y así puedes ver me estoy volviendo un poco más rápido aquí, pero la sintaxis se mantiene igual. Esta es una etiqueta HTML de apertura, una etiqueta H2, y esta es una de cierre. De nuevo, tienes esa tira y luego el nombre del elemento, y eso solo dice que todo dentro de aquí necesita ser un tamaño de fuente H2. Y todo lo que hay entre las dos etiquetas H1 necesita ser súper grande. Y todo entre las dos etiquetas de párrafo es tu párrafo solo textos generales en su mayor parte. Entonces guarde eso. Volvamos por aquí y veamos cómo se ve un H2. Debe ser justo entre estas dos secciones del texto. Y se puede ver que es un poco más pequeño. Lo que me gustaría que hicieras por alguna experiencia práctica en este momento es crear un H1, H2, pero luego también crear un H3, crear un H4, H5, H6. Y de nuevo, todo lo que estoy haciendo aquí es escribir un nombre de elemento. Tan pronto como aparece la abreviatura de Emmett, puedo golpear tab y crea el elemento H6 para mí. Así que adelante y echa un vistazo a cómo se ve H1 a H6. Añade un poco de texto extra aquí. Lol BBQ. Adelante y guarde eso. Y cuando volteas la página y pulsas refrescar, echa un vistazo a los diferentes tamaños de encabezado. Y quizá te sorprenda un poco cuando se parezca a H6. 8. El Whitespace no importa: espacios en blanco no importan. Ahora mencioné esto realmente temprano, pero los espacios en blanco no importan. Se puede ver que en realidad tengo un elemento aquí mismo, un H2. En realidad todo este asunto es un elemento. Y no tengo ningún espaciado ni líneas nuevas ni nada. Es solo una etiqueta de apertura H2O, un montón de impuestos y luego una etiqueta de cierre H2. Pero con un párrafo, tengo aquí el elemento p, y entonces en realidad he roto esto en una nueva línea. Se agregó un montón de espacios extra aquí. Y luego al final de nuevo, lo rompí en una nueva línea, un montón de espacios extra. Ahora a tu navegador no le importa cuántos espacios haya. De todos modos va a tratar de condensarlo todo en un solo espacio. Entonces como ejemplo, Vamos a seguir adelante y agregar un espacio justo después de la palabra ipsum. Simplemente voy a añadir un montón de espacios. Ahora si estuviéramos escribiendo un artículo periodístico, esto se vería terrible. Serían dos palabras, una coma, y luego todos estos espacios diferentes. Y esos pequeños puntitos que ves. Después de resaltar esta base que sólo me dice que es un espacio que es, eso no es en realidad sólo me están diciendo que hay un espacio. Entonces sigamos adelante y guardemos eso. Dirígete a tu navegador y vamos a golpear refrescar. Y vamos a ver en cuanto toque refresco, absolutamente nada va a cambiar. Entonces vamos a recargar esta página. Puedo recargar esto un 100 veces. Nada parece que cambie. No obstante, si vamos si hacemos click en algún lugar de la página, podemos ir con el botón derecho del ratón ver página fuente. Y podemos ver todo nuestro código fuente y esto es exactamente lo que he escrito en código VS. Y se puede ver que todos los espacios están ahí. Pero tu navegador dice, no, no necesitas todos esos espacios. Comprimamos eso en un solo espacio visual, para que los espacios en blanco no importen. Otro ejemplo aquí es que podría agregar todas estas nuevas líneas y hay un montón de nuevas líneas. En realidad se puede ver que hay tantas líneas nuevas que como yo ya ni siquiera puedo leer realmente el código. Y sigamos adelante y sumamos un poco más de lorem aquí. Entonces Lorem tab y yo deberia tener dos párrafos, ¿verdad? Debería tener este primer párrafo. Y puedo deshacerme de este espacio en blanco porque no importa. Tengo tres líneas nuevas y luego tengo otro párrafo. Ahora, intuitivamente, pensarías que crearía dos párrafos para nosotros. No va a hacer eso. Entonces si guardo esto, voltea al navegador, lo que vas a ver es que estos se combinan juntos. Y de nuevo, tomó todas esas nuevas líneas y la aplaste en un solo espacio para ti. Ahora si quieres múltiples párrafos, pero tienes que hacer es tener que cerrar este elemento de párrafo. Eso es cerrar ese elemento de párrafo y esto crea que ha ganado su primer párrafo. Vamos a colapsar eso y vamos aquí arriba. Y sólo tenemos que volver a abrir esto. Y te voy a mostrar lo que estoy haciendo aquí en tan solo un segundo. Y así todo lo que hice fue cerrar ese primer elemento aquí arriba y reabrí uno nuevo aquí abajo. Entonces si echamos un vistazo a esto juntos, tenemos el párrafo uno, el párrafo dos. No están anidados. No es un párrafo dentro de un párrafo. Es un párrafo. Y luego lo cerramos y luego un segundo párrafo y cerramos eso. Entonces sigamos adelante y pinchemos Guardar. Y ahora cuando actualicemos nuestra página, vamos a ver que en realidad se trata de dos párrafos separados, la forma en que probablemente queríamos que fuera en primer lugar. Entonces la lección aquí es el espacio en blanco no importa. Si quieres usar espacio extra en blanco. Hay formas de hacerlo, como envolver tus textos en diferentes párrafos o diferentes H1 o diferentes h dos. Y es sólo un ejemplo más. Vamos, sigamos adelante y veamos qué pasa cuando pongo esto está en una nueva línea, justo en mi H1 sólo para demostrar eso, que esto tampoco es específico sólo a párrafos. Entonces voy a guardar eso. Ve por aquí, toca refrescar, y no está en una nueva línea. Y de nuevo, eso se debe a que nuestro navegador no lleva, pesar de que hemos escrito el código de esa manera, nuestro navegador no le importa que tenga este espacio en blanco extra. Entonces solo voy a seguir adelante y limpiar esto. Simplemente borra ese espacio extra en blanco porque me gusta que mi código sea agradable y ordenado. Y esto es lo que nos queda. A continuación, echemos un vistazo a los elementos de anidación un poco más. En realidad ya lo hemos estado haciendo con HTML, título de cabeza, cuerpo H1, H2, y párrafo. Estos son anidar, pero entrémonos en alguna terminología. 9. Nido elementos HTML de la: De acuerdo, echemos un vistazo a anidar algún código. Por lo que en realidad ya hemos estado anidando nuestro HTML. Y lo que eso significa es que tenemos un elemento HTML. Y luego dentro de eso, en lugar de sólo textos regulares como vemos con un párrafo o un encabezamiento uno, encabezamiento dos, tenemos otro elemento y luego podemos tener otro elemento. Y esto puede seguir esencialmente para siempre. Ahora lo que voy a hacer es desplazarme por mi página justo debajo de mis dos párrafos que tengo. Y voy a crear un nuevo elemento llamado div. O si desea utilizar la abreviatura Emmett DIV. Y luego tan pronto como veas em en abreviatura por aquí, adelante y toca la letra de tabulación en tu teclado y te lo llena. Ahora un div honestamente no significa nada. Hablaremos más de divs por el camino, pero no hace nada como un párrafo va a separar tu texto con. Por ejemplo, un párrafo va a separar tu texto aquí. Tiene como un pequeño espaciado agradable ahí dentro y luego crea otro para ti. Un div realmente no hace eso. Entonces sigamos adelante y digamos que este es un elemento div. Adelante y guarde eso, refresca tu página. Se va a decir que este es un elemento div. Y ahora dentro de este elemento, y esto va a parecer un poco raro al principio, pero tenemos un elemento div. Y entonces podemos tener algún texto ahí dentro. Podemos tener otro div aquí también. Podemos decir div. Este es un elemento anidado. Y lo cerraremos también. Sigamos adelante y actualicemos esta página. Y vamos a ver que aparece en la línea justo después de ella. Pero todo esto está envuelto en un div. Ahora una buena manera de ver esto es hacer clic derecho en tu página. Ir a Inspeccionar. Y voy a hacer esto un poco más grande aquí. Whoops, eso fue demasiado grande. Y retrocedamos hacia abajo y podemos flotar sobre los elementos aquí dentro. Y así esta es nuestra herramienta de inspección. Es increíblemente útil. Vas a querer usar esto para casi todo lo relacionado con front-end. Entonces HTML, CSS, y JavaScript por el camino. Pero por ahora vamos a quedarnos con HTML. Y lo que tenemos aquí es un div. Y podemos abrir este div y podemos ver que hay algunos textos y se puede ver que al pasar el rato sobre él, realidad está cambiando lo que está seleccionado en mi página. Y luego tenemos un elemento hijo y así se llama cuando está anidado, es un elemento hijo. Y eso está en su segunda línea. En realidad podríamos ir una capa más profunda también. Entonces puse esto en una nueva línea solo para mantener el código bonito y ordenado. Y podría hacer un DIV más, o vamos a experimentar. Y hagamos un párrafo dentro de un div. Se trata de un párrafo. Adelante y guarde eso. Da la vuelta a mi navegador y toca refrescar aquí. Y se puede ver como yo flote sobre las cosas, me va a mostrar qué exactamente un seleccionado. Entonces tengo un elemento div aquí, y está seleccionando tanto el div anidado como el párrafo. tanto que aquí arriba, es sólo seleccionar el párrafo uno a la vez. Eso se puede ver mientras me volteo entre ellos. Entonces aquí tengo el overarching, el elemento contenedor se llama div. Y luego tengo algo de texto y luego tengo otro div, y luego tengo dentro de ese div, un párrafo allá, tengo texto aquí y luego tengo un párrafo aquí. Y en realidad se puede ver que ese párrafo tiene un montón de espaciado a su alrededor, por lo que una especie de baches su texto un poco hacia abajo. Ahora echemos un vistazo a alguna terminología aquí. Este de aquí. Este va a ser tu elemento padre y este va a ser un elemento hijo. Entonces, lo que esto suele parecer es que tienes algún tipo de elemento padre slash parent y luego una etiqueta de cierre como esa. Y luego tienes algún tipo de elementos infantiles y el cierre esa etiqueta ahí otra vez, no importa si tienes espacio en blanco extra. Se puede poner eso en múltiples líneas si quisieras, que en realidad voy a hacer. Y luego podemos ir una capa más profunda. Podríamos llamar a esto un nito, elemento de gran hijo biselado nieto. Y esto puede seguir y seguir y seguir para siempre. Por lo que podemos decir crear nito mayor. Y sigue y sigue y sigue. Ahora la terminología va a cambiar en base a lo que estás hablando. Entonces si me deshago de nieto y bisnieto, cuando estemos trabajando aquí. Este es nuestro elemento principal. A esto se le llamaba niño. Y si estamos hablando del elemento que lo rodea, el que lo envuelve así, eso se llama elemento padre. Ahora si estamos trabajando en el elemento padre y queremos hablar de un elemento dentro de él. Nosotros lo llamaríamos niño. Ahora estamos, la terminología cambia es si tenemos elemento nieto y este es el que estamos trabajando, y este es nuestro elemento principal. Digamos que estamos hablando con un compañero de trabajo sobre este elemento en particular. Simplemente llamaríamos a esto el elemento, cualquiera que sea, quizá sea un DIV. Niño entonces se convertiría en el padre de familia. Entonces, el padre se convertiría en el abuelo. Y así es relativo al igual que en una jerarquía familiar. Ahora ninguno de estos son en realidad elementos reales. Entonces sigamos adelante y eliminemos esos. Y solo por fondos, Iz sigamos adelante y sumemos aquí un elemento h3, solo un poco de título. Y dice, este es un ejemplo de anidación de elementos. Entonces guardo ese archivo y voy a refrescar esto. Y vamos a cerrar nuestra inspección a ella con esta x por aquí. Este es un ejemplo de anidamiento de elementos, y esto es todo en un solo elemento. Ahora en la siguiente lección, vamos a ver por qué el anidamiento es en realidad muy, muy importante porque en este momento esto no era muy importante. No teníamos que anidar esto para nada, pero necesitábamos saber cómo funciona esto para llegar a esa siguiente lección. Entonces, en la siguiente lección, echemos un vistazo a audacia, cursiva y subrayando tu texto. Y luego vamos a mezclar y emparejar a los tres. 10. Bold, italics, y Bold, y la rella: Muy bien, bienvenido de nuevo del video de anidación. Sigamos adelante y realmente creemos algo aplicable aquí. Entonces solo voy a hacer un poco de espacio para trabajar sólo porque me gusta mucho espacio extra. Y de nuevo, los espacios en blanco no importan, lo sabemos ¿verdad? Entonces vamos a crear un nuevo párrafo aquí, y vamos a cerrar automáticamente esa etiqueta de párrafo. Y aquí dentro escribamos bajarlos. Tira tab y conseguimos algo de Lorem ipsum, igual que lo hemos hecho antes. Ahora si queremos atrevir algunos textos, crees que sería la palabra negrita. No es del todo tan intuitivo, pero está bastante cerca. Simplemente usamos la etiqueta b. Entonces podríamos hacer B y atendamos las primeras cuatro letras o palabras u otras. Y así tengo una etiqueta p, un párrafo, y anidado como elemento hijo es el elemento negrita. Y así guardo eso. Y si voy a Google Chrome y golpeo refresco, en realidad se puede ver que mi texto aquí es audaz y el resto no es audaz. ¿De acuerdo? Entonces esto es anidar y esto en realidad se está metiendo en algo un poco más interesante, un poco más útil, un poco más aplicable para realmente aprender HTML. A continuación, sigamos adelante y vamos a cursiva. Tan cursiva para hacer algo tipo de realidad esto es un buen ejemplo. Lo que sea que hice ahí hizo esta cursiva. Entonces es una especie de letra ish, I. Adelante y agreguemos un elemento i a estas tres palabras. Y así si refresco la página, ¿ cuáles tenemos aquí? Copa USD. Ni siquiera voy a tratar de decir eso, pero son las 30 palabras que él está aquí. Y si golpeo refresco, podemos ver que eso ahora ha cambiado automáticamente. Por último, tenemos Subrayado y realmente es exactamente lo mismo. Entonces pensarías que estaría subrayado, pero no lo es. Utilizamos especie de abreviatura cuando se trata de HTML. Y solo te decimos, es el nuevo elemento. Y de nuevo, eso tiene una etiqueta de apertura y cierre. Los tres tienen etiquetas de apertura y cierre. Voy a guardar eso, volver aquí, golpear refresco. Y podemos ver que esto está ahora subrayado. Ahora donde esto se pone realmente, realmente interesante es que podemos crear otro párrafo. Y Laura, y ya ves lo rápido que está llegando porque tengo esa terminación de tabulador. Si quisiera hacer esto audaz, cursiva y subrayar. Y vamos a deshacernos de esto. Haz sólo una línea en lugar de dos o tres frases allí. Hagamos sólo una frase. Puedo decir que se golpee Tab hace audaz para mí. Y luego quiere que ponga mi texto aquí. Bueno, eso es lindo. Pero lo que voy a hacer aquí es sólo agarrar todo eso. Voy a golpear Control X o comando exon MAC. Eso sólo lo corta en mi portapapeles y luego controla V o Comando V como en violeta para pegar. Y así cuando guarde, refresque, vamos a ver que ahora tenemos una frase audaz. Ahora si quisiéramos hacer esto cursiva también, no es BI para negrita, cursiva, es sólo b. Y luego dentro de ella decimos I. Así que entonces podemos ir por aquí, golpear tab para sangrar eso un poco más. Y barra I. Una cosa a tener en cuenta también es que tu texto podría desplazarse mucho fuera de la pantalla por aquí. Puedes entrar en tu configuración y puedes cambiar tu ajuste de palabras o tus ajustes de ajuste de texto para que Briggs encendido automáticamente en dos nuevas líneas. Entonces puedes ver que todo esto para mí es la línea 27, pesar de que abarca múltiples líneas, eso es solo para que no sea una larga línea derecha a través de la página y tengo que desplazarme a la izquierda y a la derecha. Ok, entonces agregué un párrafo, negrita, cursiva. Sigamos adelante y guardemos y actualicemos. Y ahora esto es audaz y cursiva. Entonces eso está funcionando bastante bien. Por último, agreguemos un nuevo elemento, y solo muevo ese texto hacia arriba muy rápido. Adelante y guarda ese archivo, actualiza. Y ahora podemos ver que es audaz, cursiva y subrayado, pero aquí hay una regla. Tu etiqueta interna, tu etiqueta más íntima, tiene que tener una etiqueta interna más de cierre. Entonces si el último que tienes es una u, la primera etiqueta de cierre es una u Si el segundo elemento que tienes aquí es un i, el segundo último es una slash I, lo mismo con negrita. Entonces empezamos con audaz aquí arriba y cerramos y en realidad se puede ver, y es por eso que lo he sangrado así, para que se pueda ver que estos coinciden de esta manera. Siempre quieres que tus elementos coincidan de esta manera. Pueden pasar cosas divertidas si no coincides con tus etiquetas de apertura y cierre, eso es bastante importante. Entonces en este punto, si quieres seguir adelante y darle una oportunidad a esto, intentemos anidar un párrafo. Por lo tanto, crea un elemento de párrafo. A continuación, negrita tu texto, cursiva tu texto, subraya tu texto. Y no importa si es negrita, cursiva o subrayado o cualquier otro orden, podría ser cursiva, subrayar negrita, podría subrayarse negrita, cursiva. Realmente no importa siempre y cuando estos coincidan. Y luego agrega algo de texto ahí. Y quiero que te asegures de que tu texto sea ambos. No son ambos, sino todos. Debe ser negrita, cursiva, y subrayar, y debe estar en un elemento de párrafo. Adelante y dale un tiro a eso una vez que estés listo para seguir adelante y te veré en la siguiente lección. 11. El elemento div: Ok. Hola y bienvenidos de nuevo. En esta lección, vamos a estar hablando de unos elementos div. Entonces lo que quiero hacer aquí es que ya tengo un montón de código y solo quiero colapsarlo así que es un poco más legible para mí porque esto se está haciendo bastante largo. Y deshazte de ese espacio extra en blanco sólo porque me gusta que mi código esté ordenado. Y si quisiéramos, podríamos derrumbar sólo el ojo, sólo el abalorio, sólo un párrafo. Pero en esta lección, sigamos adelante y hablemos de div. Div es un elemento ficticio. Y en realidad no significa nada. Entonces como dijimos, P significa el párrafo B significa negrita, yo significa cursiva. Div es sólo un divisor. Y en realidad puedes ver que la referencia MDM aquí desde VS Code dice que el elemento div no tiene ningún significado especial en absoluto. Representa a sus hijos. Se puede utilizar con atributos de clase Lang y título a semántica de marcado, comentario, bla, bla, bla. Esa cosa se está poniendo un poco demasiado avanzada para nosotros en este momento. Pero básicamente esa primera línea que dice que el elemento div no tiene ningún significado especial en absoluto. Eso es importante. No tiene un significado especial. Ahora de lo que vamos a hablar aquí es de un div no tiene un significado especial, esto no tiene un significado especial. Pero también echemos un vistazo a cómo funciona uno al lado del otro. Porque en esta última lección, donde hicimos negrita, cursiva y subrayado, podríamos usar las tres. Y en realidad un mejor ejemplo es éste donde teníamos un párrafo, pero luego tuvimos negrita y ese texto audaz estaba al lado del texto regular. Y luego tuvimos cursiva. Y ese texto en cursiva estaba justo al lado del texto normal y el texto subyacente. Lo mismo, lo mismo una y otra vez. Y esto entra en este concepto de elementos de bloque versus elementos en línea. Entonces un div es un elemento de bloque. Y lo que quiero decir con eso es que si solo golpeo al Comando C o al control C, Y luego al Comando V o al control V, acabo de copiar toda esa línea. Y esta es una segunda línea. Entonces sigamos adelante y guardemos eso, refresca nuestra página aquí. Y se puede ver aquí abajo, sólo dice, esto no tiene un significado especial. Esta es una segunda línea. Y si hago esto, haga clic derecho e inspeccione, cuando pase el cursor sobre el elemento, en realidad se puede ver que esa línea azul que atraviesa toda la página, eso es un elemento de bloque. Entonces a pesar de que en realidad sólo está necesitando el, el espacio de, esto no tiene un significado especial. En realidad se puede ver que eso está ocupando toda la línea. A eso se le llama elementos de bloque. Y vas a ver estos todo el tiempo porque es, es realmente bueno saberlo. El motivo de ello es porque, por ejemplo, si este párrafo de aquí arriba no fuera un elemento de bloque de estos dos párrafos se fusionarían y en realidad no serían párrafos. Sería un párrafo fusionado con el segundo párrafo para hacer uno grande. Eso no es lo que queremos todo el tiempo. Y así lo bonito de este párrafo también es un elemento de bloque es que va a ocupar todo el ancho de tu pantalla. Va a ocupar la mayor cantidad de bienes raíces que posiblemente pueda. Entonces volvamos a nuestro código e incluso intentemos poner estos uno al lado del otro en nuestro código. Entonces es abrir un div y cerrarlo, abrir otro div y cerrarlo. Adelante y guardemos esa actualización y vamos a ver que nada ha cambiado. Nada ha cambiado, literalmente nada ha cambiado. Y eso es otra vez porque estos son elementos de bloque. Entonces nuestro conjunto de navegador, vale, tienes un elemento está cerrando otro elemento está cerrando. En la herramienta inspeccionar. Esto es exactamente lo que ve nuestro navegador. Esto se ha arreglado para nosotros, por lo que está en dos líneas diferentes. Y de nuevo, ambos son elementos de bloque, por lo que van a ocupar la mayor cantidad de espacios posibles que puedan separar por el propio elemento. Ahora este es un concepto extraño, pero en la siguiente lección vamos a hablar de elementos de bloque versus elementos en línea, y cómo se pueden usar una especie de juntos y cuál es la diferencia. 12. Bloquear elementos vs. elementos en línea: De acuerdo, echemos un vistazo a los elementos de bloque versus los elementos en línea. Hasta el momento hemos estado trabajando con elementos mayoritariamente de bloque. Ahora un elemento de bloque es si hago clic con el botón derecho e inspecciono, se puede ver que ocupa todo el ancho de mi página, pesar de que en realidad solo está usando lo que el 30% del texto está realmente diciendo. Asignar todo el ancho de la página para este elemento H2 en particular, párrafos o elementos de bloque también. H 3s, H 4-5-6, incluso el que está en la parte superior de la página. Pero lo que no es si bajamos aquí, tenemos este párrafo en particular con elementos anidados. Ahora lo siguiente no tiene nada que ver con ello. Lo que es importante tener en cuenta es que este elemento B para negrita, no está ocupando todo el ancho de toda la página. En realidad está sentado lado a lado con tu texto regular. Y luego tenemos cursiva, subrayado de texto regular, y luego algún texto más regular ahora subrayado, cursiva y negrita. Estos se llaman elementos en línea y todo lo que significa es que pueden existir lado a lado con otros elementos. En tanto que párrafo, se puede ver que sólo tengo texto hasta aquí. Si paso el cursor sobre esto a la derecha de donde seleccioné ese texto, sigue ocupando ese espacio extra. Eso es un bloque elementos. Ahora no necesitas tener elementos en línea dentro de un elemento de bloque. Aunque típicamente eso es lo que vas a terminar haciendo, pero no hay regla para eso. Es solo, este es un elemento en línea. Y podríamos poner cursiva justo al lado de negrita, justo al lado de subyacente. Realmente no importa porque es, es un elemento en línea. Entonces va a ocupar la menor cantidad de espacio posible frente a elementos de bloque, como aquí abajo. Este div es un elemento de bloque. Este div es un elemento de bloque. Y va a ocupar todo el ancho. Ahora, un par de casos de uso es negrita, cursiva, y subrayado. Pero también si quisieras un elemento de bloque, podrías usar un título que puedo H1 a H6, y eso va a poner tu texto más grande en su propia línea. Y entonces lo bueno de eso es que ya tenemos un título aquí. Bienvenido al HTML 101. Tenemos un subtítulo aquí usando un elemento h2. Y luego tenemos un par de párrafos. Estos son todos elementos de bloque y esto es lo que está haciendo que nuestra página se vea bonita. Ahora, si por alguna razón esta audaz, Somos un elemento de bloque, y te voy a mostrar cómo va a ser esto. Pero no intentes esto. No quiero que pruebes esto porque esto se está saliendo del alcance del HTML, pero te voy a mostrar cómo se ve esto. Bloque de pantalla. Entonces lo que acabo de escribir ahí, no necesitas intentarlo. Pero yo lo cambié. Secuestré su comportamiento predeterminado para ser bloque en lugar de en línea. Y se puede ver que el audaz está ahora en su propia línea. Y es por ello que los elementos en línea son muy importantes. Porque si tienes negrita en su propia línea, realidad nunca tendrás la capacidad de seleccionar una pieza de texto en particular en un párrafo y ponerla en negrita, subrayada o metálica. Ahora hay muchos elementos diferentes por ahí que están en línea y hay muchos de ellos que están bloqueados. Y así vas a tener que descubrir una especie de estos a medida que avanzas por el aprendizaje de HTML. Hay demasiados elementos a esa posiblemente cubierta, probablemente haya cientos de ellos. Pero en su mayor parte, vas a usar un puñado de ellos casi todos los días. Y necesitas saber la diferencia entre un elemento de bloque como este que secuestré, o un elemento en línea. Para que en realidad puedas hacer tu texto presentable de una manera legible humana. Entonces esa es la diferencia entre los elementos de bloque y en los elementos de línea. 13. Enlazar a las otras páginas: De acuerdo, entonces la web está hecha de enlaces a otras páginas. Eso es realmente todo lo que es. Y tienen una página aquí, pero ¿y si quisiera enlazar a Google o qué si quisiera enlazar a otra página de mis primeras cosas? En primer lugar, empecemos usando la forma más sencilla. Vamos a enlazar con Google o Facebook o Instagram o algo así. Entonces en esta lección, vamos a crear dos tipos diferentes de enlaces. El primero, y acabo de voltear a VS Code aquí. Cómo el primero va a ser un enlace sólo a Google. Y este es un vínculo absoluto. El segundo va a ser un enlace relativo. Por lo que un enlace comienza con el elemento a, y esto significa ancla. Es un ancla de hipertexto. Podemos ver eso por aquí. Gracias VS Code por llenado que me informó. Por lo que tenemos una etiqueta de anclaje y esto en realidad utiliza nuestro primer atributo. Todavía no hemos usado un atributo. Y eso va a ser HREF. Y eso significa una referencia de hipertexto. Y básicamente así es como vamos a apuntar a otra página web. Ahora, ha pasado un poco. Pero un atributo es siempre el nombre del atributo igual. Y luego ya sea citas o apóstrofes, tienen que empezar y terminar con lo mismo. No importa cuál uses, pero tiene que empezar y terminar con lo mismo. Y sigamos adelante y cerremos esto una etiqueta. Y digamos que esto es un enlace. Y veamos qué pasa. Cuando vuelva aquí y refresque mi página. Parece un eslabón. Pero cuando hago clic en él, en realidad no va a ninguna parte. Entonces lo que quiero hacer aquí es HREF es igual a, y quiero el enlace completo a cualquier sitio web incluyendo la parte HTTP que es vital. Necesitas el HTTP cada vez que quieres un enlace absoluto. Entonces sigamos adelante y vayamos a Instagram.com. Entonces todo lo que hice ahí fue HTTP o HTTPS. La mayoría de los sitios web tienen eso s Estos días, barra barra de colon y luego el sitio web, por lo que Instagram.com. Y en realidad este corte ni siquiera es necesario. Sigamos adelante y guardemos eso y refresquemos. Y cuando voy por aquí, se puede ver que el enlace ha cambiado en realidad a azul porque aún no he hecho clic en él. Y hagamos clic en el enlace y miremos eso. Me trajo a Instagram. Entonces voy a volver. Y a lo mejor no quiero Instagram, lo mejor quería algo un poco menos personal. Vayamos a Google. Así que adelante, guardar, refrescar. Y se puede ver en la parte inferior izquierda dice HTTPS, Google.com. Haga clic en eso. Y boom, nos trae a Google. Y eso es todo lo que hay para realmente agregar un enlace a cualquier página que tengas. Entonces, de nuevo, es el un elemento para ancla. El atributo HREF es igual a cita y luego la URL de su sitio web, ese enlace, y luego algún texto. Entonces podemos decir que esto va a ir a Google. Y Porque eso le pasa a dos líneas en mi editor, me acaban de poner esto en dos líneas diferentes. Y de nuevo, los espacios en blanco no importan. Entonces no importa que tenga todos estos espacios diferentes aquí, y aún puedo volver a mi navegador, pulsa Refresh. Y lo único que cambia el texto, no el espaciado extra. Y así cambió el texto. Esto va a ir a Google. Y lo hace. Ahora bien, eso es bonito, pero ¿y si quieres enlazar a tu propia página web? Bueno, eso es un poco diferente porque Puedes ver aquí arriba, no hay HTTPS, este es un archivo y teóricamente podrías enlazar a él, pero no quieres, porque mientras estoy en un Mac, así que empieza con archivo, pero si estás en Windows, empieza con C. Y si estás en Linux, es sólo una barra. Entonces no va a funcionar para todos. Y tenemos que asegurarnos de que funcione en cada sistema operativo. Y la forma en que nos movemos eso es usar un enlace relativo. Por lo que un enlace relativo parece casi idéntico a un enlace absoluto o a un anclaje absoluto. Y podemos hacer un HREF es igual a, tenemos nuestras cotizaciones aquí. Y vamos a decir segunda página dot HTML. Cierra esa etiqueta de apertura y di Esto va a la segunda página. Y siempre cerramos. En cualquier momento tenemos texto dentro de un elemento, siempre lo cerramos con una etiqueta de cierre. Y echemos un vistazo a esto. Y podemos ver que estos enlaces están de lado a lado. Entonces sabemos por la última lección que estos son elementos en línea porque funcionan codo a codo, lo que significa que podemos ponerlos dentro de un párrafo muy bien. Y cuando hago clic en esto va a una segunda página en la parte inferior izquierda, realidad se puede ver que va a los usuarios Caleb, escritorio italiano, segunda página dot HTML, y esto en realidad no existe. Por lo que cuando hago clic en este enlace, va a una página 404. 404 solo significa que tu página no existe ya que no se encontró tu archivo, puede que se haya movido o eliminado. Énfasis en eso, si estás moviendo archivos de una carpeta a otra carpeta, puede que se muevan o eliminen. Y básicamente es decir que el archivo no existe. Entonces sigamos adelante y hagamos que este archivo exista. Voy a cerrar esta pestaña porque eso no es necesario. Y hagámoslo. Voy a copiar toda esta página. Y voy a ir File, Save As. Y dondequiera que tengas helloworld dot HTML, y llamemos a esto 1 segundo punto de página HTML. Guardar. Y así ahora tenemos un segundo punto de página HTML. Y puedo archivar abierto o Comando o Control O y abrir hola mundo. Y ahora tenemos dos archivos uno al lado del otro. Entonces la segunda página uno, lo que voy a hacer es borrar casi todo lo que hay dentro del cuerpo. Entonces vamos a borrar todas estas cosas. Cambiemos el título a segunda página. Y digamos una H uno. Esta es la segunda página. Eso es todo lo que vamos a hacer. Por lo que guardé eso. Y cuando regrese aquí, esto ahora existe en esta ubicación de archivos en mi computadora. Y si golpeo refresco, en realidad funciona. Entonces si vuelvo, refresca esto solo por una buena limpieza. Si refresco esto y digo que esto va a segunda página, era 414. Estaba diciendo que faltaba un archivo o página faltante. Ahora no es ahora va a cargar realmente la página para mí. Por último, en nuestra segunda página, sigamos adelante y agreguemos un enlace de anclaje más a nuestra página Hello World. Y digamos Hola Mundo dot HTML. Ahora lo que hay que tener en cuenta aquí es que esto no es un vínculo absoluto. No comienza con HTTP, no es un enlace absoluto. Esto solo dice ir a este archivo en particular que pasa a estar en la misma carpeta que la segunda página. Por lo que estos están de lado a lado en la misma carpeta. Y va a decir, oh, busca este expediente en particular. Por lo que en realidad está vinculando a otro archivo, no necesariamente a una página web. Y se mete un poco en cómo las páginas se sirven en realidad en un servidor. Básicamente porque el servidor es solo la computadora de otra persona. Pero éste podría decir: Vuelve a casa, guarda, refresca. Volvamos a casa. Voy a hacer eso sólo un toque más grande aquí. Entonces esta es nuestra segunda página. Vuelve a casa. Y ahora tenemos dos páginas que enlazan entre sí. Y si nos das una oportunidad y logras que esto funcione, eso significa que has creado con éxito una red de páginas. No solo tienes una página web ahora, tienes un sitio Web. 14. Abrir enlaces en nuevas ventanas nuevas: De acuerdo, echemos un vistazo a abrir un enlace en una nueva ventana. Por lo que probablemente todos sabemos que se puede controlar o comando hacer clic en un enlace y esto se va a abrir en una nueva pestaña. Y tal vez no queremos eso. A lo mejor queremos obligar a la gente a, cada vez que haga clic en un enlace, abrir en una nueva pestaña, que podría ser lo mismo que hacer clic derecho y abrir enlace en nueva pestaña. Pero si queremos forzar esto a alguien, en realidad tenemos ese poder. Entonces voy a pasar a helloworld dot HTML, y para Google cada vez que van a una página externa, porque esta es una página interna o una página relativa, y este es un sitio web externo o un enlace absoluto. Podemos decir que el objetivo es igual a, y éste se ve un poco raro. Ahí hay un subrayado, pero Target es igual a blanco. Y así este es nuestro atributo, es igual a apóstrofo subrayado en blanco es el valor tiene que ser ese subrayado en blanco. Y luego nuestro atributo de cierre, comillas. Sigamos adelante y guardemos eso. Y vamos a refrescar esta página. Y ahora no parece que nada haya cambiado. Pero cuando hago clic en esto, no voy a comando click ni control click. No voy a hacer clic derecho y hacer clic en Abrir enlace en nueva pestaña. Sólo voy a hacer clic en este enlace y se va a abrir en una nueva pestaña para mí automáticamente. Al igual que eso, ahora tenemos dos pestañas. Y así es como se abre un enlace en una nueva pestaña. 15. Agregado de imágenes: De acuerdo, echemos un vistazo a agregar una imagen a nuestra página. Entonces para una imagen, en realidad necesitamos un archivo de imagen y me gusta ir a este lugar llamado Splash.com. Y solo podemos usar imágenes gratuitas, de regalías, gratuitas. Y yo solo quiero cualquier imagen. Realmente no importa cuál sea la imagen, aunque esta es una laptop bastante perfecta. Eso es más o menos lo que quiero. Click y voy a descargar esto y voy a descargar la más grande que quiera, solo para poder realmente hacer. Se pone un buen ejemplo de esto en tan solo un segundo tiempo, tal vez no demasiado grande, esa es una imagen bastante grande. Bajemos el grande. Y ahora esto va a entrar en mi carpeta Descargas. Y en realidad quiero que esto viva al lado de mi Hello World y segunda página, y eso está en mi escritorio. Por lo que necesito abrir esa carpeta y moverla a mi escritorio. De lo contrario, esto no va a funcionar. Entonces si solo copio este archivo aquí, pasa a mi escritorio, pegarlo. ¿ Y dónde estás? Ahí mismo. Llamemos a esta imagen de Caleb. En realidad no es mi imagen. No tomé esta imagen. Xps tomó esta imagen, pero voy a llamarla imagen de Caleb sólo por el bien de mantenerla simple. Entonces volvamos a aquí y luego vamos, cerremos. Ya no necesitamos eso abierto. Y vamos al código VS. Y ahora agreguemos una imagen. Ahora esto es interesante porque las imágenes no tienen texto, así que no necesita una etiqueta de cierre y la respuesta en realidad es no. Entonces sigamos adelante y creemos un H3 y H4, H3, llamemos a esto imágenes. Y para crear una nueva imagen es la etiqueta IMG. No es imagen, es IMG. Ahora si cierro esto, en realidad hay dos formas de cerrar esto. Por lo que esta es una etiqueta de autocierre, lo que significa que no tiene imagen de barra. No es así como funciona éste porque no hay texto, hay nada más que mostrar. En cambio vamos a usar un atributo. Y así podemos decir que aquí hay una imagen. Y en realidad podrías ver un cierre como este. Esto se llama XHTML es, es una forma más antigua de hacer las cosas y totalmente válida aún, escribo mucho código de esta manera porque soy una escuela un poco mayor, pero sigue siendo completamente válida. O simplemente puedes escribir IMG y quieres la fuente de la imagen. El SRC para fuente es igual al punto de imagen de Caleb. Ahora esto es importante. Es necesario conocer esa extensión de archivo. Y esa extensión de archivo aquí fue dot JPEG. Jpeg. Ahora si el tuyo es punto-punto mayúscula, GAAP, G como este o así, asegúrate de que coincida. Tiene que ser perfecto. Entonces la mía no era que la mía fuera dot JPEG. Puedo seguir adelante y guardar esto y vamos a desplazarnos hacia abajo hasta donde se supone que aparezca. Y vamos a ver esta imagen gigante. Y esto es en realidad por lo que quería esta enorme imagen aquí. Porque esta era una imagen realmente grande. Ahora bien, genial, apareció la imagen, pero es simplemente demasiado grande. Ahora lo que podemos hacer es añadir un segundo atributo. Podemos decir que se supone que el ancho es, y esto va a ser en píxeles, digamos 500. Sigamos adelante y guardemos eso. Y lo que esto va a hacer es hacer de esa imagen un ancho de 500. Y automáticamente escalar la altura para mí. Entonces si hago clic con el botón derecho e inspecciono qué es genial de esto, dice ancho 500. Pero en realidad se puede ver al pasar el cursor sobre la imagen, dice que la imagen es de 500 por 281 por 0.25. Ahora si queremos que sesgue esto y no sé por qué querrías, pero si alguna vez quisieras sesgar una imagen, puedes agregar un ancho y un alto. Y se puede decir que la altura va a ser, digamos 200. Entonces esto se va a ver un poco apagado ahora. puede ver que es un poco más blishier. Hagamos esto bastante extremo y cambiemos la altura a 100. Entonces ahora tenemos 500 por 100. Si paso el cursor sobre él, en realidad se puede ver en mi ventana gráfica, dice IMG 500 por 100. Ahora, tal vez no queremos escalar una imagen por su ancho. A lo mejor uno de nosotros quiere escalarlo por su altura. Nosotros alguna vez, y habrá momentos en los que se quiera escalar una imagen por su altura o justicia con una u otra, no necesariamente ambas. Entonces digamos por la razón que sea que estamos trabajando con un diseñador y el diseñador dice que no, la imagen tiene que ser una altura máxima de 100 píxeles. Y decimos: OK, la altura es igual a 100. Guardar. Y sigamos adelante y refresquemos. Esto ahora es una altura de 100 y un ancho. Sea lo que fuera automáticamente, es 177.77. Y nuestro navegador funciona eso para nosotros. Entonces justo como recapitulación, podríamos decir que tenemos un elemento de imagen. No hay etiqueta de cierre porque, bueno, ¿qué vamos a cerrar? No hay contenido que poner entre dos etiquetas. Estamos usando atributos aquí. El origen, el SRC es igual a la imagen de Caleb. All JPEG. Y esto también podría ser un enlace a una imagen en particular en la web. Web, como HTTP website.com slash image.All JPEG. Podría ser algo así. Puede utilizar URL absolutas o relativas. Y así estamos usando una URL relativa. Tenemos un segundo atributo, ancho es igual a 503º. La altura del atributo es igual a 100. Y esto hace son imagen realmente extraña. Y todo esto es el elemento de imagen. Ahora hay mucho más que podríamos agregar, y en realidad voy a agregar esto aquí de todos modos, dos cosas. Adelante porque esto se está haciendo un poco grande. Echemos esto en líneas separadas sólo porque podamos, porque el espacio en blanco no importa. Y vamos a añadir un alt. Y alt va a ser el texto que se presente cuando un lector de pantalla está tratando de leer tu imagen, tratando de describir cuál es la imagen o si el texto o no el texto, pero si la imagen rompe qué texto mostrar, entonces muéstrame y sigamos adelante y cambiemos esto a imagen de punto faltante. Entonces este no es un archivo en mi computadora. Esto no va a funcionar. Esta imagen se va a romper para mí. Y se puede ver imagen rota y dice, Muéstrame, ese es el texto alt. Y si solo deshago eso, solo te lo estoy cambiando a ti. Mi imagen regular aquí. El texto todo no aparece como perfecto. No queremos que aparezca. Queremos que aparezca la imagen, pero por si la imagen no aparece, tenemos un retroceso. Entonces así es como agregamos una imagen. Lo que me gustaría que hicieras ahora es agregar una imagen a tu página, a tu página Hello World. Recuerda que puedes obtener cualquier tipo de imágenes que quieras de un Splash.com y simplemente usar cualquier imagen que te guste. Realmente no importa cuál sea la imagen. 16. Vincular una imagen a otra página web: De acuerdo, bienvenido de nuevo. Hola, hola, hola. En el último video, creamos una imagen. Utilizamos los atributos SRC, ancho, alto, y los atributos alt en este video. En esta lección, lo que vamos a hacer es hacer de esto un enlace. Porque si vuelvo a mi página, no puedo hacer clic en eso. No va a ninguna parte. Y necesitamos que esto realmente vaya a algún lado. Bueno, no necesitamos hacerlo, pero tal vez queremos que esto, tal vez queremos que esto vaya a nuestra segunda página, dot HTML. Entonces sigamos adelante y envolveremos nuestra imagen en un ancla. Entonces decimos que una REF HR es igual a, y puedo llenar eso en tan solo un segundo. Voy a seleccionar eso. Y todo lo que estoy haciendo es tabular esto. Sólo porque yo M bastante interesado en tabbing agradable. Y luego sí slash a. Entonces tenemos una etiqueta de apertura y una etiqueta de cierre, y eso significa que va a dar la vuelta a nuestra imagen. Y luego para nuestra HREF, vamos a hacer segunda página dot HTML. Y eso va a ir a nuestra segunda página dot HTML. Y así si refresco esto, parece que nada ha cambiado, pero ahora en realidad puedo hacer clic en él. Y se puede ver en la parte inferior izquierda ahí dice segunda página dot HTML. Si hago clic en esto, va a mi página. Vuelve a casa, desplázate hacia abajo. Y ahora tenemos una imagen, y eso va a otra página. Ahora todo lo que realmente hemos hecho aquí está anidado en imagen dentro de una etiqueta de ancla. Y es por eso que la anidación era realmente importante para aprender. Para empezar. Aprendimos sobre las imágenes, aprendimos sobre las etiquetas de anclaje, y ahora solo estamos mezclando las dos juntas. Entonces lo que me gustaría que hicieras es exactamente lo mismo. Agarra una imagen, cualquiera que sea la imagen de un Splash.com. Asegúrate de que aparece en tu página y luego vincula a otra página. Incluso podrías simplemente enlazar a google.com si quisieras, o alguna otra página web por ahí. Si no tienes una segunda página ya construida, puedes enlazar a cualquier parte de internet, tu perfil de Facebook, tu perfil de LinkedIn, cualquier cosa por el estilo. 17. Reglas y resúmenes horizontales de línea: Ya hola. Echemos un vistazo a las reglas horizontales y los saltos de línea. Entonces lo primero es lo primero, voy a trabajar en uno de los párrafos que realmente tenemos al principio, aquí creamos estos dos párrafos. Y así tengo un párrafo y un veterinario, un segundo párrafo. Y digamos que quiero algún tipo de línea entre ellos. Tengo esta cosa llamada RHH, una regla horizontal. Y debido a que no toma ningún texto dentro de él, no necesita una etiqueta de cierre. Nuevamente, esta es una etiqueta de autocierre al igual que la imagen. Sigamos adelante y guardemos esto. Y debería aparecer justo aquí. Y así cuando voy y refresco, bam, ahí está. Aparecerá ahí mismo. Y una regla horizontal es un elemento de bloque. Se va a ocupar todo el ancho. Como se puede ver. Ocupa todo el ancho. Es, es una línea entre tu texto. Por lo que es realmente bueno para separar encabezados o contenido o cosas por el estilo. Ahora lo otro que quería mostrarte era una etiqueta BR. Entonces tenemos una regla horizontal, pero también tenemos una etiqueta BR. Entonces digamos que queríamos separar esto en su propia línea, pero no en su propio párrafo, pero queríamos que se viera así. Entonces tenemos aquí una primera línea de lorem y luego Odeo Sun Tzu, lo que sea, lo que sea sea en su propia línea también. De acuerdo, así que solo guardo eso y el código VS se arregla automáticamente eso para mí. Entonces si vuelvo a la página, nada ha cambiado. Y de nuevo, eso se debe a que en HTML, espacio en blanco no es importante. tu navegador no le importa. De lo que sí le importa es si quieres una nueva línea, solo puedes escribir BR. Y esto es simplemente una línea, romper BER para romper. Y si guardo y refresco mi página, vamos a ver que aquí mismo va a ser una nueva línea igual a esa. Entonces esto comenzó una nueva línea por aquí. Y ahora tenemos una regla horizontal y un salto de línea lado a lado, o supongo que no lado a lado, pero, ya sabes, en la misma lección, lo que me gustaría que hicieras es darle un tiro a ambos y es un súper fácil no te debería llevar más que unos 30 segundos, tal vez 60 segundos. Crea una regla horizontal y luego crea un salto de línea dentro de un párrafo. 18. Comentarios HTML: Echemos un vistazo a los comentarios HTML. Entonces un comentario es básicamente una pieza de código que puedes escribir y eso no va a ser ejecutado por tu navegador. Y se ve así. Entonces es menos que firmar. Se puede ver que todos nuestros elementos HTML se ven así. Uno de esos momentos raros en los que realmente vemos un signo de exclamación y luego un guión y un guión. Y entonces podemos poner nuestro texto aquí. Y luego termina con un guión, guión y luego un signo mayor que. Y así si guardo esto, y típicamente hasta ahora, aparecería por encima de mi bienvenida al texto HTML 101. Pero si vuelvo aquí, toca refresco. No aparece en absoluto. No obstante, si hago clic con el botón derecho Ver página Fuente, ahí está. Entonces nunca pongas contraseñas, secretos, tarjetas de crédito, respuestas, nada. No pongas nada en secreto ahí porque en realidad no es secreto. Es 100% accesible para todos tus usuarios. Entonces este no es un buen lugar para escribir secretos. qué sirve es para explicar lo que estamos haciendo. Entonces podemos decir que esto es un tutorial. Y quizá rompamos esto en dos líneas separadas. Esto es un agravio, por lo que curso tutorial sobre HTML. Estamos aprendiendo HTML desde cero. Y así de nuevo, puedo ahorrar eso. Vuelve aquí, refresca mi código fuente. Se puede ver que el código fuente está realmente cambiado. Vuelve aquí, refresca la página real, y no se renderiza. Y a esto se le llama comentario HTML. Si dices esto es un comentario HTML. Ahora lo que es realmente genial de esto es que en realidad también puedes comentar el código existente. Entonces sigamos adelante y comentemos esto. Entonces vamos a hacer el letrero de apertura y puedes verlo volteado todo mi texto Gris hasta mi página, hasta la parte inferior de mi página. Y vamos a ir por aquí y cerrar eso y se puede ver la sintaxis resaltando patadas de nuevo, me deja saber que las cosas están funcionando de la manera que quiero que funcionen. Guarda eso. Y porque he comentado esto, Todavía va a aparecer en el código fuente. Aquí lo vemos. Está en el código fuente. Pero debido a que es entre una sintaxis de comentario de apertura y cierre, actualicemos y podemos ver que ya no aparece. El navegador dice que es un comentario y no se ejecuta, no lo renderices. En realidad es solo una pieza de texto inútil para el navegador. Es más útil para los humanos que para las computadoras. Y eso es un comentario HTML. Ahora vas a ver algunas de estas de vez en cuando. No es muy frecuente que veas estos, pero cuando lo veas, solo debes saber que esto es lo que no va a aparecer cuando cargues tu página. 19. Listas: De acuerdo, echemos un vistazo a las listas. Existen dos tipos de listas. Ahí hay una lista ordenada y una lista desordenada, y vamos a hacer una demostración Ambos de estos. Ahora esto es interesante porque este es uno de esos elementos que requiere anidar. Y de nuevo, es importante saber sobre la anidación aquí. Entonces voy a lanzar un título aquí llamado listas. Ahora, la primera que quiero abordar es una lista ordenada y o L. Ahora podríamos decir algo aquí y vamos a previsualizar esto. Desplácese hacia abajo por mi página y aquí dice algo, pero en realidad no sabe qué hacer. Y es algo así como una lista. Pero si quería hacer, hacer un segundo punto de bala, esto simplemente no funciona. Lo que podemos hacer es decir, porque esto es una lista, necesita un ítem de lista. Y todo lo que estoy haciendo aquí es decir list-item, apertura, etiqueta de cierre de list-ítem. Y ahora tenemos dos elementos que están anidados dentro de nuestra lista ordenada. Por lo tanto guardar y refrescar. Y ahora enumera para nosotros 123, así sucesivamente y demás. Entonces en cuentas para nosotros. Yo no escribí uno, no escribí dos. Esa es una lista ordenada. Ahora una lista desordenada, muy, muy similar, pero no va a tener el conteo, sólo va a tener puntos de bala. Para que pudiera hacer UL y luego podría hacer Ally. Y este es un elemento de lista. Hit tab porque tengo esa abreviatura de Emmett. Punto número uno. Copia esa línea completa hacia abajo a la que está debajo. Señale copiar esa línea completa a la que está debajo de ella. Y solo estoy usando control c y control v, o Comando C y Comando V. Y eso me copia toda mi línea. Sólo tienes que seguir adelante y guardar eso y refrescar. Y tenemos puntos de bala. Y así a medida que avanzamos a través del HTML, te estás familiarizando un poco más con anidar y abrir y cerrar etiquetas y atributos y cosas por el estilo, esto va a ser mucho más fácil. Y probablemente ya te diste cuenta de que si has pasado por todos los, todos los videos hasta este punto que una lista ordenada, ya sabes la sintaxis. Ya sabes que este es un elemento anidado y que ahí hay algo de texto y luego tiene un cierre y una etiqueta de apertura. Y luego si queremos otro, sólo tenemos otro elemento infantil. Entonces tienes un niño LI aquí, niño LA aquí, y el padre OL. Y en este punto se está volviendo realmente, realmente fácil para que aprendas. Ejemplo de ello es la lista desordenada. Entonces una lista ordenada tiene la numeración, obviamente porque se llama lista ordenada, pero una lista desordenada no la tiene. Simplemente tiene puntos de bala. Pero la sintaxis es casi idéntica. De verdad lo único que hemos cambiado aquí es de OL a UL. Y así se puede ver de aquí en adelante que aprender HTML sólo va a ser más rápido y más rápido y más rápido. Ya estás aprendiendo todo lo básico muy, muy rápido. Entonces así es como hacemos una lista. Si quieres pausar el video aquí, adelante. Golpea pausa y prueba esto por tu cuenta. Asegúrate de que aparece en tu navegador cuando estés bien y listo. Pasemos a esa siguiente lección. 20. Etiquetas de CSS: Hablemos de las etiquetas CSS. Entonces éste es realmente interesante. En realidad sólo hemos tratado con un elemento dentro de nuestra cabeza. Pero con CSS podemos, en realidad, lo ponemos en cualquier lugar, pero típicamente lo ponemos en nuestra cabeza. Y éste es un estilo. Este es un elemento de estilo. Y lo que estoy diciendo aquí es CSS en las gradas para una cascada y hojas de estilo en cascada. Ahí vamos. Hojas de Estilo en Cascada. Y puedo comentar eso fuera para que en realidad no se muestre en el navegador. Ahora lo interesante aquí es, esto no acepta HTML. ¿No es eso raro? Estamos escribiendo HTML, pero esto no acepta HTML. Y en este punto nos estamos metiendo en esta cosa llamada hojas de estilo CSS en cascada, que es una forma para nosotros de darle estilo a nuestra página. Lo que esto sí toma es CSS markdown, markup, css language. Y esto es muy, muy diferente. Esto no se ve en absoluto como HTML, y no necesitas saberlo para este curso en particular, pero esta es una buena transición hacia lo que estarías aprendiendo a continuación. Entonces digamos que queríamos cambiar todo el color de fondo a negro, y queremos cambiar todo el color, el color del texto a blanco. Podemos hacer eso. Podemos decir cuerpo. Y se puede ver que esto coincide con el elemento. Y todo lo que vamos a hacer es un corsé rizado de apertura, fondo, color. Y se puede ver VS Code es muy útil. Me está ayudando a entender lo que se supone que estoy escribiendo. Cambia eso a negro. Y entonces puedo cambiar el color de la fuente. Y en realidad se puede ver que aparece la referencia MDM, establece el color del texto de un elemento color blanco. Y así esto va a seleccionar este elemento, el cuerpo, y todo lo que hay en él. Y se va a tratar de aplicarle estas reglas. Entonces si vuelvo aquí, toca refrescar. Echa un vistazo a eso. Nuestra página ahora tiene texto blanco con fondo negro. Ahora de nuevo, esto no es algo que debas saber y honestamente diría que no lo aprendas, pero necesitaba mostrarte lo que es esto porque vas a ver estos elementos de estilo por todo el lugar. Ahora lo que voy a hacer es que voy a comentar esto también. Refresca mi página y tráela de vuelta a la normalidad. Ahora si quisieras, por todos los medios, darle una oportunidad a esto y siéntete libre de experimentar con él. Pero sepan que aún tienen mucho más HTML que aprender. Necesitas aprender a agregar videos y audio y cosas por el estilo. Y necesitas aprender esas cosas antes de que aprendamos CSS, o al menos has mostrado que eso es mucho más fácil aprender una cosa a la vez en lugar de aprender a las cosas a la vez. Pero si querías experimentar y divertirte un poco con él y por todos los medios, ve por ello. Pero esta es la etiqueta de estilo, esta es tu CSS. Y una vez más, No, no necesitas saber esto. Yo sólo quería mostrarles esto. Al igual que una cabeza arriba, vas a ver esta etiqueta en la naturaleza en otro código fuente que ves como en Google.com por ejemplo, va a haber algunos en su facebook.com probablemente tenga algunos instagram.com y probablemente tenga, tiene algunos elementos de estilo dentro de su HTML. Entonces es algo común. Y yo solo quería asegurarme de que lo estuvieras familiarizado. De acuerdo, terminamos con CSS. Pasemos a la siguiente donde aprendimos básicamente el mismo concepto, pero para JavaScript. 21. Etiquetas de guión: Hola y bienvenidos al mundo de JavaScript. Ok, entonces hay dos cosas de las que quiero hablar. Una es cómo agregamos las dos páginas de JavaScript, un par de formas de hacerlo. Y la segunda forma, o La segunda cosa de la que quería hablar es no aprender JavaScript en este momento. Va a ser muy tentador. Vas a escuchar a personas en grupos de Facebook y grupos aprendizaje y grupos de LinkedIn en otros cursos. Y necesitas aprender JavaScript. Pero eso no es cierto. Es necesario aprender HTML antes de que aprendiera JavaScript. Javascript se utiliza para modificar y trabajar con HTML. Y si no conoces muy bien HTML, no vas a poder aprender JavaScript, por lo que necesitas HTML primero. Dicho esto, te voy a mostrar cómo agregar algo de JavaScript aquí. Por lo que comienza con la etiqueta de guión. Y aquí, de nuevo, porque es HTML, realmente no le importan los espacios en blanco. No obstante, aquí no escribimos HTML. No lo hacemos, escribimos JavaScript. Escribimos JavaScript o JS para abreviar. Aquí dentro. Eso es lo importante. Entonces recuerda siempre que veo que mucha gente está tratando de escribir como un div dentro de su guión y no funciona en esto porque nada entre las dos etiquetas de script aquí, la etiqueta de apertura y cierre que tu navegador piensa es JavaScript y no HTML. Y eso es importante saberlo porque si has tomado mi otro curso sobre fundamentos web, hay diferentes motores en tu navegador. Tienes un motor para renderizar HTML y motor para renderizar, renderizar CSS, y un motor para renderizar JavaScript. Y está diciendo: Oye, usa el motor JavaScript para esto, no el HTML1. Entonces vamos a seguir adelante y crear un ejemplo aquí, Hola mundo. Y no necesitas saber esto ahora mismo. Pero esto es JavaScript y todo esto va a hacer es cuando cargue la página, me va a dar un pequeño pop-up. Entonces cuando vuelvo a mi página, pulsa refrescar. Dice hola mundo. Y luego muestra mi página. Entonces está ejecutando el JavaScript y luego el HTML. Entonces esa es una manera. La otra forma en que vas a ver que se utiliza esta etiqueta es el script. ¿ Y qué pasa si hago clic en este botón ahí mismo? Eso es perfecto. Es en lugar de tener todo tu código en tu página, puedes tener este código en otro archivo, como prueba JavaScript ab.js. Y no necesitas eso aquí dentro. Podemos deshacernos de eso. Y ese código puede vivir en otro archivo. Y así todo lo que estamos diciendo aquí es usar la etiqueta de guión. Entonces hey, Chrome, Firefox, Safari edge, Hay un JavaScript que quiero que renderices aquí, la fuente igual que una imagen y desplácese hacia arriba igual que una imagen. Src fuente es igual a y luego cualquiera que sea el nombre del archivo. Ahora este es un archivo relativo, muy parecido a este enlace relativo. Por lo que debería estar en la misma carpeta. Ahora si esto no existe, no va a pasar nada. Si esto sí existe, pero no hay nada ahí dentro, no va a pasar nada. En realidad necesitas algo de JavaScript para ejecutarte. Y de nuevo, eso no es algo que necesitamos saber ahora mismo. Pero lo que voy a hacer es boom, comentan eso fuera. Y eso es solo un comentario HTML. Y eso asegura que mi navegador diga, oye, cualquier cosa entre esta etiqueta de apertura y la etiqueta de cierre o la sintaxis no lo renderice. Está permitido vivir ahí dentro y el código fuente, pero en realidad no lo ejecuten. Y si vuelvo a Chrome y refresco la página, esa alerta desaparece. Tan perfecto. Ahora de nuevo, no necesitas saber esto. El motivo por el que quería mostrarte esto es porque vas a ver mucho guiones en la web moderna de hoy, hay mucho JavaScript. Y de nuevo, necesitas conocer HTML para poder conocer muy bien JavaScript. Pero vas a ver muchos guiones por todo el lugar. Y así cuando veas esto, solo tienes que saber que todo entre la etiqueta de guión de apertura y cierre va a ser en realidad JavaScript y no HTML o CSS. 22. Comparte el código con CodePen: Okey-dokey, echemos un vistazo a una cosa genial aquí. Entonces mientras estás aprendiendo a escribir código, vas a querer poder compartir tu código con la gente. Y es realmente, realmente difícil compartir de forma segura este tipo de código con la gente. La gente pone sus archivos en zips y luego presidente de grupos de Facebook y se ve realmente spammy y nadie sabe si en realidad es seguro de descargar. Y luego si tienes una pregunta, tu pregunta sí recibe respuesta. Es solo todo este asunto lo que quieres evitar. Hay una mejor manera. Entonces lo que puedes hacer es ir a Codepen.io. Y quería crear una nueva pluma. Oh, mira eso todo tipo de cosas. Pero solo quiero crear un bolígrafo nuevo regular aquí. Lo que esto va a hacer es darme HTML, CSS, y JavaScript trabajo con. Ahora en este momento en particular, si estás tomando este curso, probablemente no necesites conocer JavaScript, y probablemente no necesites conocer CSS, probablemente solo necesites conocer HTML. Ahora aquí, puedes escribir cualquier cosa hola mundo. Y solo toma un segundo, pero lo hace eventualmente rentar, se renderiza para ti. Ahora, la cosa es que no necesitas tu Doctype. No necesitas HTML, no necesitas cuerpo. No necesitas esas etiquetas. Lo que sí necesitas es todo entre la etiqueta del cuerpo hasta la etiqueta del cuerpo de cierre justo ahí. Por lo que ahora podemos hacer clic derecho en pegar. Y esto no necesariamente va a mostrar mis imágenes porque mientras digo hola, CodePen, busca no segunda página, sino la imagen de Caleb. All JPEG. Y aquí es donde patea el texto alt. Y así no puede encontrar eso porque no lo sabe. Es un sitio web, no está en mi computadora, y así que está buscando la imagen de Caleb. Todo JPEG en el servidor en la computadora de otra persona. Todavía no lo tienen, así que eso no va a funcionar. Entonces solo unas cabezas ahí arriba. Pero, ya sabes, ya que estás escribiendo cada vez más HTML y CSS y JavaScript por el camino. Puedes hacer todo esto en un bolígrafo de código. Ahora lo bonito es que puedes nombrar esto. Así que hola mundo. Sigamos adelante y guardemos eso. Y acabo de crear una cuenta gratuita de CodePen. Por cierto, es completamente gratis. No es necesario pagar CodePen. Entonces por favor, mientras estás aprendiendo, no pagues por CodePen. Nunca necesitas pagar por ello. Y obtienes este lindo eslabón. Y así si abro esto en otra pestaña, acabo de copiar y pegar ese enlace. Aparecerá. Y si tengo otra pestaña, pegarla ahí dentro, aparece. Y lo que es realmente bonito es que está guardando todo tu código. Y así si necesitas compartir tu código en el grupo de aprendizaje a codificar Facebook o en una sección de proyecto de esta plataforma. O realmente necesitas compartir tu código con un amigo o un desarrollador o un mentor o cualquier persona que sea. Aunque solo quieras presumir esto a ti y a tu cónyuge, a tus amigos, a tu familia. Simplemente puedes enviarles este enlace con todo el código que hay en él. Esta es una manera muy, realmente buena de compartir tu código y es una forma segura de compartir tu código para que la gente no tenga que preocuparse por descargar archivos zip raros o Google Drive o Dropbox o nada por el estilo. Es simplemente CodePen y decenas de millones, si no cientos de millones de personas están usando CodePen. Es completamente seguro. Ha existido desde hace mucho tiempo. No va a ir a ninguna parte. Este es un buen servicio para usar cuando necesitas compartir tu código. Entonces cuando estés compartiendo un código, por favor comparte tu CodePen, enlace. 23. Encuentra un soporte adicional: De acuerdo, si necesitas algún apoyo extra, tengo un grupo de apoyo masivo para ti. Entonces obviamente puedes hacer preguntas abajo, por favor haz si eso es lo tuyo, preguntas abajo. Pero si quieres respuestas de inmediato, como en cuestión de minutos, a veces incluso segundos, vas a querer unirte a algún tipo de grupo de apoyo. Ahora, aprender HTML es en realidad bastante fácil. Se considera una de las cosas más fáciles de aprender en el desarrollo web. Pero eso no significa que sea fácil para todos. Y así si necesitas un poco de apoyo extra, puedes ir a facebook.com y busquemos aquí para aprender a codificar. Y este grupo cuenta actualmente con 56,905 miembros. Este es un grupo que he creado hace mucho tiempo. Y de nuevo, hay 56 mil integrantes ahí dentro. Hay en preguntas que se hacen todo el tiempo, personas respondiendo las cosas todo el tiempo. Por ejemplo, auto codificadores altos, Mi nombre es Dragos. Tiene una buena pregunta y aquí un 132 comentarios. Si sigo desplazándome hacia abajo, quiero decir, participo en esto. Es decir, es mi grupo el que aquí está interesado en aprender cómo solicitudes web y las respuestas web donde podría 59 comentarios. ¿ Puedo publicar eso hace 11 horas? Entonces hay mucha discusión aquí, pero puedes hacer preguntas como, ¿cómo hago algo audaz? ¿ Cómo hago algo metálico? ¿ Por qué mi código no funciona? Después comparte tu enlace CodePen. Por favor, no muestres una captura de pantalla. Yo recomendaría encarecidamente no mostrar una captura de pantalla. Recomiendo encarecidamente no copiar y pegar tu código en grupo de Facebook. Compártelo en CodePen o ancho CodePen más bien. Entonces si necesitas algún apoyo adicional, Definitivamente, definitivamente únete al grupo de aprendizaje para codificar Facebook. Es completamente gratis. No tienes que apuntarte a nada. Es completamente gratis. Es solo un bonito poco de valor agregado que me gusta darle a mis alumnos. Pero de nuevo, ya sabes, aunque sea opcional, no tienes que hacerlo. Pero si quieres un poco de apoyo extra con respuestas oportunas, ese es un lugar realmente bueno para estar. 24. Tu proyecto final: De acuerdo, echemos un vistazo a tu proyecto. Tu proyecto va a ser relativamente fácil. No tienes que hacer todo aquí y recordar, no tienes que memorizar todo lo que hemos escrito en este curso. Siempre se puede simplemente Google también. Entonces si eres como, oh, sé lo que es un H1, pero no recuerdo exactamente cómo hacer un enlace. Eso está bien. Se puede Google y se escribe en Google link tutorial de Google HTML. Y vas a encontrar cientos, miles, tal vez incluso millones de páginas que te van a mostrar exactamente cómo agregar un enlace. Entonces recuerda, no necesitas recordar realmente todo esto. Todo lo que necesitas saber es cómo encontrar la respuesta. Y eso es honestamente alrededor del 50% de cualquier trabajo como desarrollador web en estos días es solo saber encontrar las respuestas, no memorizarlas, sino poder encontrar las respuestas. Entonces pasando al proyecto aquí, lo que me gustaría que hicieras es que crearas un nuevo archivo HTML. Entonces me gustaría que crearas un encabezado. Entonces como un barco subcabecera H1, como lo que haces, en lo que quieres meterte en algo así, una imagen. Y luego, y por último, agrega un enlace a tu Twitter. Twitter, Instagram, Facebook. Realmente no importa, solo asegúrate de tener al menos un enlace. Entonces hagámoslo. Crea un 2.1, y este sería un buen momento para una lista ordenada anidada, por cierto, 2.2. bien, así que acabo de formatear eso un poco más agradable solo para que todos pudiéramos leerlo juntos. Por lo tanto, crea un nuevo archivo HTML. Asegúrate de tener un encabezado ahí dentro, pon tu nombre ahí, un sub-encabezado, S sub header, Lake, tu título, tu descripción de trabajo, hobby favorito o algo por el estilo? Tenía una imagen de cualquier cosa, yo diría añadir una imagen de ti mismo. Es totalmente seguro porque solo va a estar en tu computadora. Pero si prefieres compartir tu proyecto con una imagen de otra cosa, eso también está totalmente bien. Siempre puedes ir a un Splash.com y obtener una imagen gratis. Por último, agrega un enlace ya sea a tu Twitter, tu Instagram o a tu Facebook, o simplemente agrega un enlace a Google o algo así. Aquí la parte importante es que vas a añadir un enlace. Así que adelante y dale una oportunidad a eso. Si alguna vez te atascas, no lo olvides, puedes referir los otros videos o puedes seguir viendo este video y te mostraré exactamente cómo lo hago. Pero me gustaría que pausaran este video aquí y dieran este proyecto que filmé. No olvides compartir tu proyecto y abajo en esta plataforma, si esta plataforma ofrece ese tipo de característica, de lo contrario siempre puedes compartir tu progreso con el grupo de aprendizaje a codificar Facebook. Así que pausa tu video aquí. Te voy a dar unos cinco segundos y luego voy a reanudar jugando y te voy a mostrar exactamente cómo hago esto. De acuerdo, entonces voy a crear este proyecto. Te voy a mostrar exactamente cómo lo hago. Entonces primero lo primero Nuevo Archivo, y acabo de hacer Comando N, O podrías ir a. Archivo, Nuevo Archivo, Guardar, eso va a guardar esto en mi escritorio. Y voy a llamar a este Caleb layout.html porque esta es mi página de portafolio. Esto es lo que quiero hacer. Necesito esa cosa HTML5 aquí. Entonces no necesito el meta. No hablamos de eso. Eso es un poco más avanzado y no necesito que Lang sea igual al inglés otra vez, eso es un poco más avanzado. No necesitamos preocuparnos por eso. Vamos a cambiar el título a la página de Caleb. ¿ Y qué necesitaba agregar aquí? Necesitaba agregar un encabezado que sea 2.1 en esta lista. Entonces un encabezado H1, voy a poner mi nombre aquí, Caleb Pauline, H2. Necesitaba un sub-encabezado, así que pongamos algo más pequeño y eres como un desarrollador senior H3. Y yo soy instructor de codificación premium. Ese es mi papel en la vida. El papel que me he dado. 2.3, agrega una imagen, ¿de acuerdo? Por lo que ya sé que tengo una imagen aquí dentro. No es una imagen mía, pero es una imagen y esto es de una lección anterior, así que puedo hacerlo. Imagen SRC es igual a la image.All JPEG de Caleb, y eso es sólo en la misma carpeta que este archivo. Todo esto vive en mi escritorio. Está en la misma carpeta. Alt. Caleb, Colleen. Y quiero darle a esto un ancho para que no sea enorme de, no sé, como 400. Por último, necesito ahora mismo un párrafo y necesitaba un enlace. Pero también voy a añadir un párrafo de todos modos. Realmente no quiero escribir un párrafo entero. Voy a tirar algo de lorem aquí. Y luego necesitaba un enlace a, digamos Twitter. Por lo que este enlace podría ser sólo una etiqueta de ancla. A HREF es igual a HTTPS, Twitter.com slash. Caleb, alto, magra, y también me puedes encontrar en Instagram si esa es tu mermelada y se pone en Pauline. Y eso es todo lo que hay a ello. que pueda volver a mi navegador y puedo ir Archivo, Abrir Archivo y abrir Caleb dot HTML. Eso espero no tener ningún tipo de tipográfico ahí porque eso va a ser un poco embarazoso. Y boom, ahí está mi página HTML. Tengo un H1, tengo un h3 para mi subtítulo. Tengo una imagen y tengo algo de texto de Lorem ahí dentro. Yo sólo como que tiré eso en willy-nilly en el último minuto ahí. Y un enlace a mi twitter, que me lleva derecho a Twitter. Y eso es todo lo que hay a ello. Entonces fui bastante rápido ahí y lo hice a propósito para que tuvieras que hacer una pausa y, y quizá tengas que pensar un poco más duro. Yo quiero que realmente trabajes en algo como esto. Pero cuando hayas terminado, por favor comparte tu progreso abajo. Por último, muchas gracias por tomarse el tiempo para tomar este curso. Espero que hayas aprendido algo grande y divertido y nuevo. Y si alguna vez quieres echar un vistazo a alguno de mis otros cursos, solo tienes que golpear el enlace a mi perfil en esta plataforma, puedes ver todos mis cursos están disponibles aquí también, incluyendo qué aprender a continuación, como más HTML avanzado, CSS, y JavaScript, Python, PHP, un montón de proyectos en medio, todo tipo de cosas. Por último, si te gusta lo que estoy haciendo aquí, si te gusta mi forma de enseñar, no olvides seguirme en cuota de habilidad. Gracias de nuevo por tomar este curso y espero verte en otro.