HTML: desarrollo web HTML intermedio

1. HTML 201: desarrollo web Intermediate: Hola y bienvenidos a HTML 201A, aprendiendo HTML intermedio. Entonces en este curso vamos a estar saltando mucho de lo básico. Ya debes conocer los conceptos básicos como la sintaxis HTML, cosas como crear enlaces, subrayados, negrita, agregar imágenes, sabes las cosas simples como esa. Entonces si no sabes cómo hacer eso ya en HTML, por favor vuelve al curso HTML 101 o a comienza un curso HTML y toma ese. De lo contrario, vas a estar un poco perdido en este. De lo contrario, si has tomado HTML 101 o ya estás familiarizado con HTML Basics, este curso va a ser para ti. Vamos a estar pasando por muchas cosas diferentes, como algunos enlaces internos semánticos, fabricaciones, pathing. Ese es uno realmente grande. Vamos a crear un diseño de página Web usando tablas. Las mesas son muy importantes aquí. Vamos a buscar un poco más en CSS como clases CSS en línea, ID, formato de código, formularios, campos de formulario como cuando escribes tu dirección de correo electrónico o tu contraseña, cosas así. Y unos pedacitos y bobs en el medio. Hola, me llamo Caleb Pauline. Hoy voy a ser tu instructor. Vamos a estar aprendiendo HTML intermedio. He enseñado a más de 300 mil alumnos a codificar. Soy desarrollador web senior y instructor de codificación en línea. Al finalizar este curso, juntos vamos a estar creando una página web basada en cada ML fue un diseño adecuado. Entonces si tomaras el curso HTML 101, eso en realidad no tiene un diseño adecuado. especie de simplemente tiramos un montón de elementos en una página. Este va a tener un diseño adecuado, así que vamos a tener un título y navegación, una sección de contenido. Vamos a incrustar un video de YouTube, un montón de imágenes, pero algo más de contenido y hay algo de contenido escrito, va a ser fantástico. Ahora si todo esto suena como si fuera por tu callejón, espero verte en esa primera lección. 2. No más subtitulas: De acuerdo, primero lo primero necesitamos aclarar algunas cosas. Entonces cuando creamos una estructura base en el curso HTML 101, y vamos a cambiar esto de texto plano a HTML. Y por cierto, estoy usando código VS si estás usando un editor diferente, todo lo que hice fue ir a Archivo que está justo fuera de mi área de grabación y luego nuevo archivo, entonces Command or Control, y vamos a crear un nuevo archivo para ti. Y automáticamente pensó que era un archivo de texto sin formato. Así que hice clic aquí abajo donde utiliza un texto sin formato escrito en HTML y HTML seleccionado. Y eso sólo nos da bonitos golosinas como esta. Podemos hacer HTML colon cinco, golpear Tab para autocompletar usando VS Code. Y nos da un montón de cosas aquí. Entonces en realidad voy a seguir adelante y eliminar algo de esto. Y voy a llamar a esto HTML2 01. Ahora, aprendimos en algunos puntos que tenemos párrafo podríamos poner ahí un poco de Lorem Ipsum. Y podríamos decir, por ejemplo, que esto debería subrayarse, algo así. Ahora, si guardo esto como vamos a entrar aquí y sin nombre index.html. Y yo sólo guardo eso en carpeta particular que había llamado HTML al 01. Y yo lo llamo index.html. Pero si abro Google Chrome o cualquier tipo de navegador, cualquiera que sea tu navegador favorito, puedes ir al archivo y luego abrir archivo. Por lo que Control o Comando O. Acude a mi carpeta aquí. Y vamos a abrir esto y podemos ver que esto, una vez que acerque, está subrayado. Y eso es genial, hace lo que queremos, pero desafortunadamente subyacente está en desuso. Entonces estuvo bien aprender esto hace un rato sólo porque necesitábamos hacer eso subrayado. Pero hay una mejor manera de hacer esto. Y la mejor manera de hacer esto probablemente sería agregar un lapso aquí. Y sigamos adelante y cambiemos esto a un elemento span. Y todo esto es, es un simple elemento en línea. Y deberías estar familiarizado con los helmintos de bloque versus los elementos en línea en este punto. Y lo que vamos a hacer es trabajar con este atributo de estilo. Y este atributo de estilo nos permite escribir CSS. Por lo que no necesitas saber realmente demasiado CSS en este momento. Pero si quieres subrayar, diría que tal vez intente memorizar este en particular. Yo le digo a la gente todo el tiempo que no necesitas memorizar demasiado. Es decir, siempre se puede Google, cómo agregar subyacente usando CSS, eso también funcionará. Entonces voy a hacer texto, decoración, espacio de colon, subrayado. Ahora si guardo eso, vuelve a mi página y refresca, debería parecer que nada cambió. Y eso es perfecto. Y siempre puedo comprobar haciendo clic derecho y haciendo clic en Inspeccionar. Y se puede ver en mi herramienta inspeccionar aquí abajo que hay de hecho un lapso con decoración de texto subrayado. Y si quisiera, en realidad puedo activar y desactivar eso ahora, lo cual es realmente, realmente bonito. Por lo que avanzando, siempre que utilicemos subrayados, sigamos adelante y usemos text-decoración subyacente. En lugar de usar los elementos de la interfaz de usuario, sólo porque el elemento de la interfaz de usuario está en desuso, es de versiones antiguas de HTML y CSS ahora puede hacer esto, y preferimos usar CSS siempre que podamos. 3. Enlaces internos: De acuerdo, echemos un vistazo a los enlaces internos. Entonces en realidad recapitulemos primero. Entonces, ¿cómo creamos un enlace? Creamos un enlace y haré esto solo un toque más grande aquí. Creamos un enlace con el a ancla at element y el atributo HREF. Y eso podría ir a HTTP, website.com, ir a website.com. Y esto sólo nos va a mostrar un pequeño eslabón aquí arriba. Y va a ir a website.com, lo que sea que haya en ese sitio. Entonces así es como creamos un enlace. Pero ¿y si quisiéramos enlazar a otra cosa en la página? Entonces sigamos adelante y en realidad hagamos que la página nos veamos un poco más amables. Entonces digamos uno. Bienvenido al HTML 201. Y vamos a crear un enlace. Y aún no sabemos cuál va a ser este enlace, pero sabemos que va a decir scroll to bottom of page. Y podemos deshacernos de éste porque eso ya no es necesario. Eso fue sólo un ejemplo. Entonces ahora cuando hago esto, hago clic en desplazar al final de la página y no hace nada. Es porque no va a ninguna parte. Se puede ver que no hay HREF, No, no hay referencia de hipervínculo. Entonces digamos que teníamos esta página realmente, muy larga y sigamos adelante y copiemos esto un montón de veces. Y realmente no me importa demasiado el formateo en este momento. Yo solo quiero que la página simplemente desplácese así. Y quiero cuando hacemos clic en el enlace para ir a la parte inferior de la página y tal vez tener un enlace en la parte inferior de la página para traernos de vuelta a la parte superior. Entonces hagámoslo. Digamos que va a haber, digamos como un H3. Y vamos a darle a esto un ID, y este es un identificador único para este elemento, por lo que nunca debería tener el mismo ID en la misma página. Entonces llamemos a esto abajo, y este es el final de la página. Y cuando me refresco, lo puedes ver así como al final de la página, nada le pasó al DNI no hizo nada en particular. Pero si volvemos a subir a nuestro enlace, en realidad podemos escribir el número de identificación de signo. Ahora sea cual sea esa identificación que va a ser, y ahora esa identificación que escribimos era inferior, baja aquí, ID es igual al fondo. Guarda eso. Y yo sólo voy a refrescarme aquí. Y se puede ver mi enlace realmente cambió de color. Y en realidad se puede ver que dice index.html signo de número abajo. Y cuando hago clic en esto, boom, me lleva al fondo para que no haga un desplazamiento suave, pero sí me saltó hasta la parte inferior de la página, lo que en realidad era bastante importante para páginas de contenido largo. Ahora sigamos adelante y creemos un enlace para volver a subir a la cima. Entonces tal vez quitemos esto como un H3 y esto hace que esto sea un poco más oculto. Vamos a crear un div aquí. Y se puede ver que vamos a estar un poco más avanzados con esto. Id es igual al fondo, pero sabemos que los IDs pueden o deben ser completamente únicos. Entonces sigamos adelante y deshacernos de éste. En realidad puedes deshacerte de toda esa línea. Y pongamos aquí un enlace que va a volver a subir a la cima. Volver a la parte superior. Ahora debido a que este es un enlace interno, esto necesita un ID en algún lugar de la página llamada top. Entonces volvamos hacia arriba a nuestro código aquí, y démosle a esto una identificación de top. Y vamos a refrescar tu página y darle una oportunidad a esto. Y eso se alejó mucho para mí, quiero acercar de nuevo. Y esto me debería desplazar todo el camino hasta el fondo. Boom, así como eso o no desplazar sino saltar al fondo y esto debería saltar de nuevo a la cima, así como así. Por lo que ahora tenemos vínculos internos. Lo que me gustaría que hicieras es crear una página que sea lo suficientemente larga para que realmente crees aquí una barra de desplazamiento. O lo que hice fue porque esta página en realidad no era muy larga. Siempre puedes simplemente abrir tu herramienta inspect y si la encoges o si la subes lo suficientemente alto, esta especie de encogerá tu ventanal y tendrás una barra de desplazamiento y podrás probarla de esa manera. Adelante y dale un tiro a eso una vez que estés listo, pasemos a esa siguiente lección. 4. Favicons: Echemos un vistazo a los iconos fabulosos. Fabricaciones son estos pequeños iconos que aparecen justo al lado del título de tu página. Ahora en realidad no tenemos un set de favicon. Tenemos un título, que es genial, pero ¿y si queremos algo un poco personalizado? En realidad podemos agregar eso también. Podemos personalizarlo para que sea lo que queramos. Conoce. Normalmente debería ser una imagen de 32 píxeles por 32 píxeles, lo que es bastante pequeña. No voy a seguir exactamente esa regla porque sé que la va a encogerla, pero si quieres que tenga el tamaño adecuado, tal vez tenga una traslucidez o transparencia adecuada o algo por el estilo. Entonces sí, vas a querer 32 por 32 imagen. Pero solo voy a usar la imagen aleatoria que tengo de la codificación, de la codificación para todo el mundo branding. Entonces abramos nuestro código aquí. Y en nuestra cabeza, lo que vamos a crear es el elemento de enlace. Y podemos hacer link colon, favicon. Y nos da todo tipo de cosas aquí. Ahora por defecto quiere que utilicemos un punto ICO. Ese es un formato más antiguo. No tenemos que hacer eso. Podemos usar, digamos un punto PNG. Ahora bien, esto es como enlazar a una imagen o a un archivo CSS o JavaScript, en realidad necesitamos asegurarnos de que esto funcione. Y notarás que aquí estamos usando tres atributos. Entonces tenemos el elemento de enlace. Tenemos el ferrocarril o la relación como ¿qué es? Es un atajo y es un icono, una referencia de hipervínculo a donde quiera que vaya a estar esa imagen y luego el tipo de imagen. Y no queremos que el tipo de imagen sea icono X, queremos que la imagen sea P&G porque voy a estar usando un PNG. De igual forma, si estás usando un JPEG, sería JPEG. Alternativamente, JPEG con un e, Pero estamos usando P&G.Ahora es en este punto podría realmente querer usar mi editor un poco más. Entonces lo que me gustaría hacer es en lugar de solo tener un archivo abierto, voy a abrir toda esta carpeta. Voy a ir archivo abierto. Voy a ir a mi escritorio donde esta esta carpeta, y solo tengo index.html ahí dentro. Adelante y abramos eso. Y realmente parece que no hizo mucho excepto agregó esta barra Explorer. Ahora si esa barra explorada no aparece, siempre puedes ir a dónde estás en algún lugar de tu explorador de vista ahí mismo. View Explorer que siempre lo encenderá por ti. Así que vamos a hacer clic en index.html. Y esta es sólo la página en la que estaba trabajando. Y aquí también quiero algún tipo de imagen para enlazar dos. Entonces voy a abrir mi Finder. Voy a copiar esta imagen en particular. Vine preparado a esta lección con una imagen llamada codificación para todos, favicon dot PNG. Sólo voy a copiar ese nombre completo. Y puedes ver como lo copié en esa carpeta, VS Code era como, oh, hay un nuevo archivo. De acuerdo, vamos a, pongamos eso ahí también, y ahora podemos previsualizarlo. Entonces así es como se va a ver la imagen. Y todo lo que tengo que hacer es porque copié ese nombre de archivo, solo voy a pegar ese nombre de archivo. Y no estamos usando barras ni puntos, puntos ni nada por el estilo. Estamos, no estamos usando esto, o digamos fav cons, no estamos haciendo nada así. Queremos asegurarnos de que esto esté en la misma carpeta que nuestro index.html, solo para que esto sea sencillo por ahora. Y lo puedes decir en la misma carpeta porque estamos en el HTML2, uh, una carpeta por aquí. Y hay index.html y codificación para todos, favicon dot PNG. Sigamos adelante y guardemos esto. Y vamos a refrescar esta página. Y se puede ver que ahora apareció el favicon. Ahora si estás usando otro navegador y no aparece, eso podría ser por una de dos razones. Hay un error tipográfico y en realidad no has agregado la imagen correctamente. Te mostraré cómo depurar eso en tan solo un segundo. O hay almacenamiento en caché y sé que a navegadores como Microsoft Edge les gusta cobrar bastante duro. Por lo que en realidad podría tener que hacer una recarga dura o abrir otro navegador. Yo sólo porque tu navegador va a tratar de conseguir esto, esta imagen una vez y luego tratar de guardarla por mucho, muy largo tiempo. Ahora si esto no aparece para ti, y sigamos adelante y hagamos este wordy. No aparece ahí dentro. Y en realidad se puede ver con mi inspect Herramientas abiertas, hay un error. Si voy a mi consola, se puede ver error de red archivo err no encontrado y está buscando una codificación de consulta para todo el mundo, favicon dot PNG. Y eso simplemente no existe. Entonces si abres tus herramientas de inspección y hay un error tipográfico ahí dentro, o el archivo no existe, verás el error ahí mismo. Y voy a deshacer eso. Y ahí vamos. Tenemos un favicon. Entonces si me estás siguiendo junto a mí, lo que me gustaría que hicieras es encontrar una pequeña imagen, algo así, y agréguela como tu favicon a la página en la que estás trabajando. 5. Trazado: De acuerdo, hablemos de algo que es un poco complejo y un poco complicado porque éste va a engañar a mucha gente durante mucho tiempo, incluyéndome a mí mismo. Y estoy hablando de pathing. Entonces lo hemos puesto todo en una carpeta en particular ahora mismo, pero ¿y si quisiéramos otra carpeta? ¿ Y si quisiéramos mover nuestro favicon a una carpeta llamada imágenes slash iconos fab. Y podríamos simplemente hacer clic y arrastrar eso justo ahí. Tenemos una carpeta aquí llamada imágenes, y luego otra carpeta llamada iconos fab, y luego un archivo aquí llamado codificación para todos. Entonces en la última lección creamos un favicon. Pero cuando refresque esta página, vamos a ver que obtenemos ese archivo aéreo no encontrado. No existe porque ya no está en esa misma carpeta. Está en la misma carpeta que index.html. Pero lo que podemos hacer es decir e ir a la carpeta de imágenes slash, el fab icons folder slash, y luego nuestro nombre de archivo. Entonces sigamos adelante y guardemos esta actualización de todos modos y nos aparece. Entonces eso es pathing. Así es como entramos en un camino. Por lo que acabamos de tener el nombre de carpeta slash otro nombre de carpeta, y por cierto, no uses espacios. Sé que a muchos usuarios de Windows les gusta usar espacios, pero en cosas como esta, no usar espacios es mucho más fácil si usas guiones bajos o guiones, pero por favor no uses espacios, te vas a tropezar con muchos problemas. Entonces una carpeta llamada slash, nombre de carpeta slash, y luego el nombre de archivo, Simple como eso. Ahora sigamos adelante y agregamos una imagen a la carpeta justo las imágenes aquí, no a la carpeta favicon, sino solo a las imágenes. Entonces sigamos adelante y vamos a ganar splash dot com. Y vamos a conseguir una imagen de una computadora porque estamos trabajando en computadoras. Suficiente. Y vamos a descargar este de forma gratuita. Consigamos la versión pequeña de ésta porque eso es todo lo que necesitamos. Yo quisiera dar las gracias a Glenn Carsten. El de Peter. Esta es una foto dulce. Gracias por dejarme usarlo. Vamos a seguir adelante y mostrar esto en el Finder. Y voy a abrir esto. Sólo estoy copiando este archivo. Sigamos adelante y arrojemos esto aquí. Y voy a renombrar esto a computadora ab.js JPEG y editor. En realidad puedes ver esto convertido en una carpeta adecuada ahora. Y ahora hay sub carpetas aquí, pero en imágenes, tengo una carpeta llamada fav icons y una carpeta, y no una carpeta sino una imagen, un archivo llamado Computer dot J peg. Ahora, voy a deshacerme de un montón de estos elementos p porque ahora realmente no los necesitamos y vamos a hacer que esta página sea larga de todos modos. Por lo que ese enlace interno a la parte superior e inferior de la página va a funcionar perfectamente bien. Eventualmente, Probablemente no ahora mismo porque la página es un poco corta. Pero sigamos adelante y agreguemos una imagen. Y que SRC va a ser imágenes, ese es el nombre de la carpeta. Y entonces el nombre del archivo es Computer dot JPEG se le da una computadora alt. Y eso es todo. Entonces si volvemos a nuestra página y nos refrescamos, podemos ver esta imagen aparece ahora. Y eso está en la carpeta Imágenes ahora, de nuevo, si eso no funciona para ti, solo asegúrate de que siempre tengas las cosas correctamente mecanografiadas. Es sensible a mayúsculas y minúsculas. Entonces si tus carpetas llamaron imágenes minúsculas, no escribas imágenes en mayúsculas y eso simplemente no va a funcionar para ti. Entonces hagamos imágenes. Rompeme y vamos a refrescarnos. Podemos ver el texto alt aparece ahí arriba y en mi consola, realidad se puede ver error no encontrado. Entonces eso es pasar a una carpeta. Ahora, digamos que alguien entra a la carpeta de imágenes porque podemos hacer esto. Sabemos que HTML 201 es una carpeta. Y también sabemos que las imágenes es una carpeta. Entonces hagámoslo. Vayamos a recortar imágenes. Y en realidad podemos ver que tenemos tela en una carpeta y tenemos computadora punteada JPEG. Pero digamos que en realidad queríamos algo para aparecer aquí. Lo que podemos hacer es entrar en nuestra carpeta de imágenes, crear un nuevo archivo. Queremos llamar a este index.html. Y eso solo significa usar esta página por defecto. Esta es la página predeterminada que tu navegador va a buscar. Por lo que aunque no aterrices en esta página, se va a tratar de utilizar esta página. De todos modos, solo por defecto. Mi código VS está configurado para usar plantillas de Django por defecto, pero cambiémoslo a HTML5. Y hagamos HTML colon cinco. Carpeta Imágenes va a ser el título, nombre, y en el cuerpo, digamos, hola, hola, hola, hola. De acuerdo, así que acabo de refrescar la página que tenemos, este archivo index.html y no está mostrando nuestra página por byte predeterminado, esta es una buena práctica porque una vez que llegue a un servidor, index.html va a ser la página que aparece por defecto . Entonces se va a ver igual que haces clic en él, así como esto. Pero no necesariamente va a decir index.html. Eso no es algo que necesites recordar realmente en este momento, pero es una cosita genial que puedes hacer con servidores en vivo, sitios web en vivo por el camino. Por lo que ahora tenemos este archivo index.html, carpeta de imágenes internas. Vinculemos una página. Entonces digamos h3. Esta es la carpeta Imágenes. Y vamos a crear aquí un Lincoln, un enlace de anclaje con el hipertexto, referencia de hipertexto. Y vamos a usar una página relativa. Entonces vamos a decir sube una carpeta, y así es como hacemos eso. Vamos punto arriba una carpeta. Si necesitábamos subir una carpeta más porque esto ya está en la carpeta Imágenes. Necesitábamos estar afuera. Podríamos hacer dot, dot slash, dot, dot slash, dot, dot slash. Cada uno de estos que en realidad puedes ver está subiendo una carpeta en mi computadora. Ahora no quiero nada de eso. Yo sólo quiero arriba uno. Y quiero poder seleccionar no la carpeta de imágenes, sino index.html. Y eso va a estar haciendo referencia a este de aquí. El nombre se vuelve un poco confuso porque tenemos que index.html archivo está pero bien, y VS Code fue lo suficientemente inteligente como para averiguar qué estábamos tratando de hacer. Volver a casa es lo que voy a decir en su página de tres novatos. Haz de esto solo un grande, más grande. Y podemos volver a casa. Y cuando hago clic en él, se remonta al HTML a una página de inicio de uno. Entonces eso es pathing en pocas palabras para subir una carpeta, usa la slash de puntos de puntos. Para pasar a una carpeta. No usas la Barra de puntos de punto, solo tienes que especificar la Barra de nombre de carpeta, subcarpeta denominada Si hay una Barra y luego tu nombre de archivo. Y eso es pathing en pocas palabras. 6. Introducción a las tablas: De acuerdo, echemos un vistazo a las mesas. Las mesas son salvajemente importantes para nosotros en este momento porque ahí nos van a permitir realmente crear algún tipo de diseño para nuestra página. Ahora admito, layouts, naranja realmente creado con mesas ya. Esta es una forma muy antigua de hacer las cosas, pero porque no conocemos CSS y aún no conocemos JavaScript. Esta es la única forma que tenemos y esa es 100% aceptable porque a pesar de que vamos a estar usando tablas de una manera que realmente no se usa más. Vamos a estar aprendiendo todo sobre cómo usar las tablas correctamente porque todavía se usa para cosas como conjuntos de características o prácticamente cualquier sitio web del gobierno porque todos todavía usan tablas por alguna razón. Sí. Por lo que todavía se usan mesas. Los correos electrónicos utilizan tablas de mesa todo el tiempo. Es una habilidad realmente importante tener. Entonces voy a bajar aquí y en esta lección sólo les voy a mostrar cómo se crea una mesa, pero en realidad no vamos a hacer nada con ella todavía. Entonces no sientas que tienes que codificar junto a mí. Por lo que una tabla es un elemento de tabla al igual que este. Y dentro de esto, tenemos filas de mesa llamadas TR y, o puedo hacer TR. Y luego tabulador. Podemos tener otra tabla fila TR tab. Y luego dentro de cada fila de tabla las celdas se denominan celdas de tabla o celdas de datos de tabla T Ds. Celda uno. Y vamos a entrar aquí y hacer la celda dos de TD. Y por cierto, si eres una especie de recién nuevo en este curso, voy un poco demasiado rápido para ti. Lo que hice ahí fue que podría escribir en Table y como es un elemento HTML, puedo escribir en tabla. Y tan pronto como vea esa abreviatura de Emmett, puedo presionar la tecla de tabulación de mi teclado y simplemente la crea en elementos HTML para mí. Entonces ahora nos estamos metiendo en algún bonito anidamiento y un HTML 101 aprendimos todo sobre la anidación. Por lo que sabemos que todo esto va a ser una mesa incluya a los elementos de niño y nieto. Todo esto es una fila incluyendo sus elementos hijos. Y este solo elemento aquí va a ser una celda, y éste va a ser la celda dos. Y si solo refrescamos nuestra página aquí, desplácese. Podemos ver celda uno, celda dos, nada de fantasía realmente pasando ahí no parece que haya pasado nada. Pero ¿y si le damos a esto una frontera de uno? Ahora en realidad tenemos una mesa. Podemos hacer más con nosotros para, podemos decir que el ancho va a ser un 100%. Y ocupa todo el asunto, cómo podríamos agregar otra celda. Y este va a ser tan 1.2, supongo. Y podríamos sumar 1.3 y podemos subir, así sucesivamente y así sucesivamente. Entonces, de todos modos, vamos a meternos en esto mucha más profundidad en el próximo par de lecciones. Pero sólo quería mostrarles rápidamente que así es como creamos una mesa. 7. filas y células: Echemos un vistazo a las filas y celdas de la mesa. Por lo que para crear una tabla, hacemos esta tabla slash. Y eso es todo lo que realmente necesitamos hacer para crear una mesa. Pero dentro de una tabla consta de dos elementos primarios, una fila de tabla. Y eso es lo que significa TR. T r es igual a una fila de tabla. Y dentro de cada fila tenemos celdas están las celdas de datos de la tabla. Por lo que un td es igual a una celda de datos de tabla. Y así es a través de TD tab. Y vamos a crear una primera celda, primera celda aquí. Y volteemos a un navegador y solo golpeemos refrescar. Vamos a ver nuestra primera venta. Bueno, en realidad no lo podemos ver y podemos inspeccionarlo si quisiéramos. Y podemos ver que de hecho estamos en una mesa y nuestro navegador es lo suficientemente inteligente como para decir, oye, en realidad se supone que hay un cuerpo aquí. Entonces envuelve los TR en un cuerpo t. Entonces esto en realidad va un nivel más profundo. Por lo que va mesa T Cuerpo TR td. Ahora no tengo que escribir el cuerpo t porque estoy asumiendo que todo lo que estoy escribiendo va a estar en el cuerpo de la tabla de todos modos, y el navegador está haciendo esa misma suposición para que podamos atajarlo de esa manera. Ahora para ver nuestro progreso, siempre me gusta tirar frontera aquí y luego simplemente deshacerme de esa frontera más tarde. Entonces hagamos un borde de uno y un ancho del 100%. Vamos a refrescarnos. Y ahora podemos ver que tenemos nuestra primera celda. Y si seguimos adelante y agregamos una segunda celda, y esto va a ser lado a lado, que es algo que no pudimos lograr con elementos de bloque en HTML 101. Pero ahora podemos, y podemos seguir haciendo esto, así sucesivamente y demás. Entonces en lugar de segundos L Podríamos hacer tercera celda y podemos seguir sumando más y más y más. Y nos deshacemos de ese tercer Salomon y copiamos todo esto. En realidad, no voy a copiarlo. Escribamos esto a mano porque esta es una buena práctica para escribir esto a mano. Ted fila para vender uno. Y si hago otro hit televisivo Tab R2, L2. Y ahí vamos. Tenemos primera venta, segunda fila celular 2l, una fila a vender. Y así es como creamos una tabla filas y celdas. Ahora lo que me gustaría que hicieras es dar este tiro. Quiero que creéis una tabla dos por dos, creéis cuatro celdas. Por lo que tienes dos filas a columnas y cuatro celdas en total. Adelante y dale un tiro a eso una vez que estés listo, vamos a repasar esa siguiente lección donde nos sumergimos un poco más en mesas. 8. Fugir células y filas de tabla y las filas: Echemos un vistazo a la fusión de celdas y filas. Entonces esto se pone realmente, realmente interesante y en realidad no es súper intuitivo al principio, pero se pone un poco más fácil cuanto más lo haces. Entonces en la última lección, creamos una tabla dos por dos, dos filas, dos columnas. Este, queremos crear un tres por tres. Entonces voy a hacer una mesa aquí y quiero ver mi frontera. Quiero ver mi progreso aquí. Y luego cambiar ese ancho al 100% porque quería ocupar el mayor espacio posible en mi página. Realmente no quiero dejar ningún espacio extra a la derecha. Ahora por buena medida, siempre podríamos hacer un cuerpo t si quisiéramos. Yo no hice eso en la última lección. Yo hablé de ello, no lo hice. Eso está bien. Esta vez lo voy a hacer sólo para mostrarles que podemos hacerlo. Entonces tenemos una fila de mesa aquí. Sabemos que esta va a ser nuestra primera fila de mesa. Segunda fila, tercera fila. Y todo lo que estoy haciendo es hashing este otoño, desbaste esto. Estoy haciendo que sea un poco más fácil trabajar con. Y ahora necesito, porque tengo tres filas y tres columnas y vamos a seguir adelante y crear TD 12. Y todo lo que estoy haciendo aquí para copiar toda la fila es Comando C, Comando V o control C, control V. Y voy a seleccionar todo eso, copiar eso, pegarlo, y pegarlo ahí dentro. Adelante y echemos un vistazo a cómo se ve nuestra mesa ahora. Tenemos fila uno, fila a fila tres. Son en realidad, esas son columnas. Eso lo conseguí al revés. Entonces en la columna uno, columna dos, columna tres, fila uno, fila dos, fila tres. Ahora hay una forma de fusionar celdas. Y podemos hacer esto en realidad de una manera muy interesante. Podemos hacer colspan. Por lo que el lapso de columna es igual a tres. Entonces tenemos que echar un vistazo aquí. ¿ Cuántas columnas tenemos? 123. Podemos gastar tres columnas. Sigamos adelante y guardemos esto y veamos qué pasa. Este número uno en la fila uno ocupa tres espacios, pero ahora hay dos celdas más aquí. Ahora si alguna vez ves algo así, puedes eliminar con seguridad esas celdas adicionales porque no son necesarias. Dijimos colspan de tres, así que toma tres anchos de columna. Y entonces también teníamos un viejo HTML ahí dentro y acabamos de deshacernos de eso. Cuando refresquemos nuestra página, vamos a ver que rho uno ocupa tres columnas. Ahora. Ahora sigamos adelante y fusionemos este y estos dos juntos. No hagamos eso. Hagamos estos dos y estos tres. Entonces tenemos que bajar a la fila dos. Entonces tenemos fila uno aquí. Hagamos la fila dos. Y queremos fusionar estos dos juntos. Entonces podemos decir que el colspan es igual a dos porque queremos que esto retome todo el número dos y el número tres. Adelante y guardemos esa actualización. Y ahora está ocupando ese espaciado extra también. Ahora sigamos adelante y fusionemos este. Por lo que fila para vender uno y fila tres celda uno. Adelante y fusionémoslos juntos. Por lo que en realidad podemos escribir, podemos fusionar piezas de filas juntas también. Entonces aquí, porque queremos fusionarnos a la baja, hagamos un lapso de fila dos. Y veamos cómo se ve esto. Si no ajuste esto, se puede ver una célula desplazada otra que no es lo que queremos. Entonces todavía tenemos 123 y fila tres y no queremos eso. Adelante y solo borremos ese rho porque tenemos tenemos uno aquí y tenemos uno aquí. No los necesitamos a los dos. Solo, vamos a borrar este. Entonces borra, guarda, vuelve a nuestro navegador y refresca y mira eso. Entonces tenemos tres anchos de columna. En nuestra primera fila. Por aquí, tenemos dos anchos de columna. Aquí, tenemos dos alturas de fila. Y eso lo hacemos con estos atributos llamados rowspan y colspan o columna span. Esto va a ser realmente importante para tus proyectos finales. Y lo que me gustaría que hicieras es darle una oportunidad a esto, hacer exactamente lo que hice. Crear una tabla tres por tres. Y luego comienza a fusionar filas y celdas juntas y ve cómo desplaza las celdas y luego trata de eliminar las celdas adecuadas y simplemente haz que realmente funcione de la manera que quieres que funcione. Adelante y dale una oportunidad a eso. Si te quedas atascado, no lo olvides, siempre puedes hacer preguntas abajo o en el grupo de Facebook llamado aprender a codificar. Hay más de 56 mil integrantes. Podemos ayudarte a tan solo unos minutos de publicar una pregunta. Adelante y dale un tiro a eso y nos vemos en la siguiente lección. 9. anchos de tabla y celulares: De acuerdo, bienvenido de nuevo. Echemos un vistazo a los anchos de mesa y los anchos de celda. Entonces voy a eliminar esa tabla de la última lección, crear una nueva. Y vamos a darle a esto un borde de uno, y vamos a crear algo de contenido predeterminado aquí tenemos una fila de tabla, celda de tabla, celda de aquí, tabla estándar. Ya deberíamos estar algo familiarizados con eso. Entonces si voy a mi navegador y esto es del último video, si solo refresco, tengo que vender aquí. No está ocupando mucho espacio, tal vez uno, está ocupando el 50% del espacio en esta página. Y así si me alejo, en realidad se puede ver que es súper, súper diminuto. Y lo que puedo hacer es que puedo decir que el ancho es igual al 50%. Hasta ahora he estado diciendo con es igual a un 100% y ocupa todo este ancho por aquí. Pero ahora digo que en realidad solo ocupan el 50%. Y puedo entrar en modo responsive aquí. Y puedo ver eso a medida que mi página se hace más pequeña, también lo hace esa tabla. Ahora eso en realidad es súper, súper difícil de ver porque eso es súper, súper diminuto. Pero se está haciendo cada vez más pequeño. Por lo que está manteniendo ese 50% de ancho. Y todo lo que hizo ahí fue hacer clic en este pequeño ícono en Google Chrome y eso me envía al modo responsive. Para que veas cómo van a quedar las cosas en tabletas, en móviles, cosas así. Ahora, sólo voy a acercar de nuevo aquí. Y cambiemos esto de nuevo a un 100% porque quiero usar más ancho. Por lo que puedo ocupar más bienes raíces solo con fines de demostración en el video, solo se ve un poco mejor. No tienes que seguir exactamente lo que estoy haciendo. Entonces voy a añadir una segunda fila aquí. Y digamos que tenía una venta aquí y no quería que ocupara exactamente el 50% de la mesa. Entonces lo que nuestro navegador aquí está haciendo es decir, oye, hay una mesa, es 100% de ancho. Hay dos celdas, 100 divididas por dos es que cada una es 50%. Eso es todo lo que está haciendo aquí. Digamos que quería que ese primero fuera más pequeño. Podríamos decir aquí, ancho es igual a, y vamos a darle un 20% aquí dentro. Ahora, antes de mostrarles cómo se ve eso, también quiero mencionar que se puede deshacer del signo de porcentaje y se puede hacer esto también en píxeles. Ahora eso es un poco más duro. Es un poco más rígido. No siempre lo que quieres por ciento suele ser lo que la gente está buscando. Pero también se podría decir en lugar de un ancho del 100%, porque un ancho de 500 píxeles. Pero me voy a quedar con porcentaje por ahora. Yo guardo eso, refresca mi página. Y se puede ver que la célula en realidad se hizo más pequeña. Ahora probablemente estés pensando, bueno, ¿qué es, de qué sirve eso? Pero si hago esto, puedo hacer una nueva fila de tabla y nueva celda aquí. Y puedo hacer colspan de igual a, se supone que es igual a dos. Entonces es como si hubiera dos de ellos, pero se va a fusionar. Bienvenido a mi sitio web. Y en este, aquel donde el ancho es de sólo 20%, podríamos decir algo así como H3. Pongamos esto en nuevas líneas para que podamos leerlo. Navegación H3. Y aquí dentro podríamos hacer contenido H3. Adelante y refresquemos esto y podemos ver bienvenidos a mi página web. Eso es como el título de mi página. Tenemos navegación para que podamos hacer una lista de enlaces ahí dentro. Y ponemos algo de contenido aquí. Por lo que ahora estamos trabajando en un diseño real. Ahora lo que me gustaría que hicieras es crear una tabla y con solo una celda en particular, quiero que le digas exactamente qué ancho debe ser, dale un ancho. Y como recapitulación, todo lo que hicimos ahí fue agregar el atributo width ya sea a la tabla o a la celda. En mi caso hice ambas cosas. Por lo que la mesa es de un ancho del 100%. Y luego dije que la celda debería ser el 20% de ese ancho de mesa. 10. encabezados de tabla: De acuerdo, echemos un vistazo a los encabezados de la mesa. Ahora este es realmente súper fácil porque hemos estado usando los elementos TD para celda de datos de tabla. Vamos a seguir adelante y usar un encabezado de tabla. Y todo lo que hacemos aquí es T h. Y voy a cambiar esto por un archivo HTML. Th representa una celda de encabezado en una tabla. Y sigamos adelante y cambiemos la etiqueta de cierre también. Y vas a ver desde la última lección hasta esta lección, es como solía verse, y así es como se va a ver en cuanto toque Refresh. Ahora está centrado y audaz. Ese es un encabezado de tabla. Y eso es realmente todo lo que hay para agregar un encabezado de tabla funciona exactamente de la misma manera que una celda de datos de tabla. La única diferencia es en lugar de TED, dijimos th, eso es todo. Siguiente en resumen. Una vez que creas que tienes el colgado de eso, vamos a pasar a esa siguiente lección y te veré allí. 11. Inline CSS: Okey-dokey, bienvenido de nuevo. Echemos un vistazo a CSS en línea ahora en realidad ya cubrimos esto en la primera lección donde dijimos que el estilo es igual a text-decoración subyacente. Podemos hacer eso en casi todos los elementos del cuerpo de nuestra página. Y por cuerpo, me refiero al elemento corporal. Entonces cualquier elemento aquí, podemos agregar ese atributo de estilo también. Entonces sigamos adelante y creemos un div. Y aquí dentro vamos a darle un atributo de estilo, y vamos a cambiar algunas cosas. Y solo te voy a dar un pequeño vistazo al CSS. Entonces démosle un relleno de como 40 píxeles. Vamos a darle un color de fuente de blanco y un color de fondo de, digamos negro. Para que podamos leerlo muy bien en la pantalla. Y aquí dentro puedo decir tabulador inferior. Y eso es todo lo que voy a hacer. Por lo que en realidad se puede ver la sintaxis aquí. Y en este punto probablemente ya no necesite explicarte esta sintaxis, pero solo por un buen servicio de limpieza, pasémoslo de todos modos. Por lo que creé un Div, espacio. estilo es el atributo es igual a y entonces tengo todo entre comillas. Entonces tengo una declaración CSS aquí. Entonces todo esto es una declaración. No es necesario recordar la parte CSS por cierto. Pero esta es una declaración CSS, decían agregar relleno 40 píxeles a la parte superior, derecha, inferior e izquierda. Cambia el color de la fuente a blanco, color de fondo a negro. Y en medio de cada una de estas declaraciones, como ésta, tenemos un punto y coma, por lo que es un poco diferente al HTML, pero sigue siendo muy, muy legible. Y todo esto aquí se llama CSS en línea. Entonces volvamos a nuestra página y voy a golpear refresco y mirar eso con solo un poco de esfuerzo y conociendo solo una pequeña cantidad de CSS, pudimos crear un relleno aquí. Entonces tenemos espaciado aquí, por aquí, por aquí, y por aquí. Cambiamos el color de fondo a negro y el color de la fuente a blanco. También podemos hacer clic con el botón derecho inspeccionar. Y si hago clic en este elemento en particular, podemos encenderlos y apagarlos. Esto es lo que hace el relleno. Podemos cambiar ese relleno para que sea más alto o más bajo si quisiéramos, que es lo que estamos haciendo aquí. Y todo lo que hice fue hacer click ahí y golpeé la flecha arriba o la flecha abajo. También puedes teclear si lo deseas. Si quisieras, podrías desplazarte todo el camino hacia abajo en esta ventanita de aquí y puedes ver que te dirá enseguida que hay un relleno de 40 en los cuatro lados. Y eso está en la línea CSS, eso es realmente todo lo que hay para ello. Y podemos escribir todo nuestro CSS ahí dentro. Ahora esa en realidad no es una muy buena manera de hacerlo. Pero de vez en cuando vas a ver que eso realmente va a ser requerido. Y esto es sólo algo de lo que debes estar muy consciente. Ahora, este CSS de nuevo, en este punto en el tiempo, no sientas que necesites saber esto. Después de ti, después de que hayas terminado HTML2, O1, este curso, definitivamente siéntete libre de recoger CSS. Tengo un curso sobre CSS llamado la masterclass CSS. Es un curso enorme, enorme que pasa por todo lo que se te ocurra. Pero por ahora, solo sigamos centrándonos en HTML. Ahora si quieres seguir y hacer exactamente lo que hice, adelante y pausar el video y darnos un relleno. Recuerda que va lo que sea que estemos tratando de cambiar el espacio de colon y luego un valor y luego un punto y coma. Y luego lo que estamos tratando de cambiar, como el espacio de colon de color, y luego el valor, y luego un punto y coma. Y así es como ponemos tres seguidas así. Entonces siéntete libre de darle un tiro o no a eso. Y cuando hayas terminado, cuando estés cómodo, cuando estés listo. Pasemos a esa siguiente lección. 12. clases HTML: Muy bien, a medida que nos sumergimos cada vez más en HTML, vamos a terminar, vamos a terminar transitando un poco más hacia CSS. Y en esta lección quiero mostrarles exactamente cómo podemos hacer eso de inmediato. Entonces en la última lección, miramos el color de relleno y el fondo blanco, color blanco y el color de fondo del negro. Ahora digamos que queríamos agregar eso a otro div. Y así podríamos escribir otro div aquí, y podemos llenar esto con algo de Lorem Ipsum. Y entonces tendríamos que copiar y pegar esto así, lo cual no es gran cosa, pero si tenemos eso 20 o 30 veces y entonces tenemos que hacer un cambio todas ellas. Entonces digamos que necesitábamos cambiar de blanco a azul y cambiar de blanco a azul aquí. Tenemos que hacer eso 20 veces. Y eso se pone realmente bien por falta de un mejor término porque realmente irritante. Y lleva demasiado tiempo y hay una mejor manera de vivir tu vida. Entonces voy a, primer lugar, crear otro div aquí. Y esto podría ser con la misma facilidad párrafos. Y sigamos adelante y veamos qué tenemos en nuestra página. Consiguió un lorem ipsum. Un lorem ipsum en lorem ipsum. Entonces tenemos 123. Y digamos que quería aplicar este estilo a este tercero, pero no al segundo. Lo que podríamos hacer es realmente sacar este atributo de estilo hacia fuera en un elemento de estilo. Ahora simplemente pasa a ser que se les nombra lo mismo. No necesariamente se puede sacar un nombre de atributo y convertirlo en un elemento y solo esperar que funcione. Pero en este caso podemos, así que es solo coincidencia ahí. Entonces lo que voy a hacer es seleccionar todo eso borrado, Sube aquí, pega eso a mi estilo. Y así esto no va a hacer nada, pero lo que estoy viendo aquí es la reusabilidad. Entonces tengo este div y tengo este div. Y quería poder dar estos tres atributos, estos tres atributos CSS a ambos. Y podemos hacer esto con una clase CSS, y podemos decir Nombre de clase aquí. Y selecciona esos tres, moviéndose de nuevo hacia arriba, ponlos ahí dentro. Y así esta sintaxis se ve un poco rara. No vamos a pasar demasiado tiempo aquí. Pero la clase empieza con un punto. Entonces el nombre. No hay espacios ni nada en él. Es corchetes rizados sensibles a mayúsculas y minúsculas. Y luego las cosas que ponemos dentro de nuestro atributo de estilo que ahora lo ponemos en un elemento de estilo. Y lo que podemos hacer aquí es que voy a copiar esto, pero ante todo, quiero mostrarles que cuando refresque la página, no pasa nada. Mi consola no se está rompiendo, no se está quejando. Yo solo tengo tres divs con lorem ipsum en ella. Y lo que quiero hacer aquí es decir, en esta primera, clase es igual a nombre de clase aquí. Y puedes ver VS Code está tratando de auto-llenar eso por mí. Y también podría hacer clase es igual a nombre de clase aquí. Y así en lugar de escribir el estilo es igual a los paddings, 40 pixels, el color es blanco, color de fondo es negro. En lugar de escribir eso dos veces, lo escribimos una vez, se ve un poco diferente. Y dijimos clases iguales a ClassName. Escucha clases iguales a ClassName aquí. Ahora cuando refresco mi página, guardo eso y refresco la página. Ya verás que aplica el estilo a ambas secciones para mí. Ahora, cuidado con los tipográficos aquí porque estoy usando caracteres en mayúsculas y minúsculas aquí. Pero si no lo haces bien. Y a propósito titulé esa, no va a aparecer, pero tu consola tampoco se va a quejar. Por lo que tienes que estar atento a eso, asegurarte de que estás escribiendo las cosas correctamente. Si eso significa que escribes más lento, eso significa que escribes más lento. Eso está bien. Ahora lo otro con las clases es que podemos agregar múltiples clases. Entonces podríamos agregar otra clase aquí, llamarla mayúscula, y podríamos hacer transformación de texto mayúscula. Ahora, ya los conozco porque escribo mucho CSS en mi día a día. Pero VS Code también es bastante útil aquí. Entonces en cuanto escribí texto, puedes ver está tratando de darme todo tipo de opciones diferentes aquí. Hay mucho para CSS. De nuevo, no necesitas memorizarlo todo si realmente no quieres. Siempre puedes simplemente averiguar cómo es Google, siempre y cuando puedas averiguar cómo obtener la respuesta, eso es lo importante. Pero volviendo anteojos. Entonces tengo una segunda clase aquí. Nuevamente, la clase comienza con un punto. Eso es lo que esto significa. Es mucho como decir que el punto es igual o aquí arriba es mucho como decir que la clase es igual a. Simplemente usamos el punto como método abreviado. Y luego hagamos una de estas mayúsculas y podemos sumar mayúsculas al segundo. Ahora tenemos que sumar un espacio. Y aquí, si no agregas un espacio, solo se ve así. Y tu navegador va a pensar que el nombre de la clase se llama class_name aquí, mayúsculas. Al igual que toda una palabra, no es su ClassName aquí, espacio, y luego mayúsculas también. Y podemos sumar más y más y más si quisiéramos, siempre y cuando realmente hagan algo. Entonces tengo ClassName aquí, espacio, mayúsculas. Y cuando refresco esto, deberíamos ver que esto hereda este mismo estilo, pero también debe ser todo mayúscula. Y mira eso. Es como si me estuviera gritando. Y eso es todo lo que hay para realmente clases en HTML. Una clase es una pieza de código reutilizable. Tiene este pequeño punto aquí que dice como clase, tiene este tipo de sintaxis. Nuevamente, no necesitas conocer esta parte en este momento. Por favor, concéntrese en el HTML. Html en el que queremos enfocarnos es el atributo llamado clase. Y cómo funciona, podemos tener un nombre de clase, espacio, nombre de segunda clase, espacio, nombre de tercera clase, así sucesivamente y así sucesivamente. 13. Los ID de HTML: De acuerdo, bienvenido de nuevo. Tenemos una cosa más que cubrir cuando se trata de CSS, y es esta idea de una identificación. Y en realidad lo hemos hecho cuando estábamos creando enlaces internos. podamos crear un enlace que vaya al fondo o como éste, un enlace que remonta a la parte superior de la página. Pero estamos usando este atributo ID aquí, y en realidad podemos darle estilo a las cosas en base a una idea también. Entonces en la última lección, echamos un vistazo a las clases. Las clases usan un periodo. Pero si me vuelvo aquí abajo, en realidad se puede ver ese id, como si me estoy vinculando aquí de nuevo a la parte superior y hacer, hacer, hacer, hacer, hacer, hacer. Id es igual a la parte superior. Pero aquí abajo, sigo vinculando con ella con un signo de número, número, cartel superior. Y eso me va a traer de nuevo al tope de identificación. Ahora lo que eso está diciendo es básicamente signo de número es igual a arriba. Id es igual a la parte superior. Es lo mismo. Entonces si nos desplazamos hacia abajo dentro de nuestro atributo de estilo aquí, podemos crear un ID de prueba Y aquí, y verás que comienza con un signo de número, sin espacios, sin caracteres especiales. Es solo mensajes de texto regulares aquí. Entonces, no intentes ponerte demasiado elegante con tus nombres de clase o tus nombres de identificación. Y aquí podríamos hacer algo como borde, cinco píxeles, rojo sólido. Hagamos que esto sea mucho más odioso y hagamos 15 píxeles rojo sólido. Ahora, fuera de la caja, esto no va a hacer nada porque no hemos aplicado este ID de prueba en particular en ninguna parte. Adelante y sumémoslo a este medio. Entonces tenemos tres divs aquí. Tenemos un div superior con nombre de clase aquí, div inferior con nombre de clase aquí y mayúsculas. Y en el medio tenemos ID es igual a. Y me desplazaré hacia arriba probando ID y se puede ver que estos dos coinciden aquí mismo. Ahora lo que pasa con los identificadores es que se supone que son 100% únicos. Ningún navegador no siempre honra eso, pero JavaScript siempre se encontrará con un problema si tienes dos ID que son iguales. Por lo que realmente no necesitas saber qué significa eso en este momento. Pero lo que sí necesitas saber es una identificación es igual que tu licencia de conducir. Sólo debería haber alguna vez una copia de la misma. Sólo debería haber alguna vez una versión de la misma. Esa es tu DNI. Entonces volvamos a nuestro navegador aquí. Y cuando toque refresco, vamos a ver un borde rojo de 15 píxeles por aquí. Al igual que eso súper odioso. Entonces al igual que las clases, podemos seleccionar cosas por ID y luego agregarle estilo. Y de ahí viene este atributo ID. Ahora no hay nada que hacer aquí. No te preocupes, en realidad no tienes que saber todo esto ahora mismo vas a conseguir toneladas de experiencia con esto en CSS y JavaScript cuando vayas a aprender esas cosas. Pero por ahora de nuevo, solo sigamos centrándonos en HTML. Es bueno saber que hay un atributo de clase y un atributo ID, y así es como funciona. Ah, y una última cosa. No agregas múltiples identificaciones aquí. Entonces como cómo tenemos nombre de clase aquí, y luego un espacio y luego mayúsculas. Y eso es seleccionar estas cosas y estas cosas con una identificación. No hacemos eso con DNI. Sólo decimos que hay una sola cosa aquí. Por lo que no hacemos pruebas de identificación. Y otro, y otro. Nosotros no hacemos eso. Nosotros sólo decimos que hay uno. Entonces deja que eso se hunda por un par de minutos. Siéntete libre de conocerme una vez y la siguiente lección, y volveremos al HTML. 14. Formateo de código: De acuerdo, bienvenido de nuevo. Echemos un vistazo a algunas formas diferentes de dar formato al código, al código formato o al formato de código. El primer camino es este pre tag p. e. Y si simplemente pasamos por encima de eso el tiempo suficiente, MD n nos va a decir que la pre etiqueta es un elemento pre que representa un bloque de texto preformateado en el que estructura está representada por un tipo de Alibaba por el primero, más importante aquí es que si representa texto preformateado, algunas cosas aquí. Y vamos a seguir adelante y vamos a ver cómo se ve esto al principio. Entonces eso está cerca del fondo aquí. Y mira eso. En realidad hizo algo raro. Agregó un montón de espacios. Entonces en HTML 101, si recuerdas, predicé sobre esto. Html o no HTML, pero a tu navegador no le importan los espacios en blanco. No obstante, hay un par de casos en los que sí. El Pre es uno de esos casos. Por lo que la pre etiqueta es muy sensible al blanco. Y qué pasaría si hiciéramos una segunda línea aquí, segunda línea aquí. Ahora en HTML normal, necesitamos agregar una BAR o algún tipo de elemento de bloque para llegar a una nueva línea como esta. Pero en realidad no necesitamos hacer eso, no en una preetiqueta de todos modos. Y una pre etiqueta. Mira que aparece a la perfección. Ahora lo que hay que tener en cuenta es que la pre etiqueta se preocupa por el espacio en blanco. Entonces sigamos adelante y sumamos un montón de espacios aquí. Haz que esto sea realmente terrible. También alinea nuestro texto por cierto, lo que realmente no importa cuál sea nuestra fuente predeterminada, porque nuestro editor de texto va a tratar de asegurarse que cada fuente sea mono o cada letra sea monospactada, modo que h sea la mismo ancho que E, ya que el mismo ancho que el nuestro es el mismo ancho que e es el mismo ancho que los ojos. la misma manera que zed está diciendo donde este m, sí, se obtiene el punto. En la pre etiqueta. Va a hacer exactamente lo mismo. tanto que si nos fijamos aquí que r no es tan amplio como el EFF. tanto que aquí el SOM o bien todos del mismo ancho, incluso los espacios son del mismo ancho. Eso se llama espaciado Mano. Entonces esa es una forma de formatear tu código. Otra forma de formatear tu código es si quisiéramos hacer algo en línea porque PRE como elemento de bloque, podríamos decir, vamos a añadir aquí un poco de texto Lorem, código barra barra. Y esto va a estar en línea para nosotros. Y esto va a hacer que se vea un poco más de código como, un poco más así. Y mira eso. En realidad tomó lorem ipsum dolor asiento, asiento, sentarse. No lo sé. Y lo formateó mucho como esto. Ahora es sensible al espacio en blanco? Vamos a explorar. Añadamos un montón de espacios entre lorem ipsum. Este no es sensible al espacio en blanco. ¿ Mirarías eso? Pero el pre es sensible al espacio en blanco. Entonces esa es una buena distinción a tener en cuenta. Entonces solo voy a deshacer eso porque eso no es necesario. Y esas son dos formas en las que puedes formatear tu código. Para que puedas escribir algún código como este. Todavía va a tratar de renderizar HTML dentro de él. No te olvides de eso. Todavía vas a necesitar entidades HTML. Eso es algo de lo que hablaremos en el futuro. Pero aún puedes formatear tu código así o así. Elemento de bloque, elemento en línea, elemento de código bonito. 15. Entidades HTML: De acuerdo, echemos un vistazo a las entidades HTML. Ahora en la última lección, miramos los elementos pre y código. Y digamos que quería poner algo aquí como B. Esto es audaz. Y digamos que en realidad quería mostrar esto. No necesariamente quise decir como Este es texto en negrita. Yo quería realmente mostrar esta etiqueta. Ahora nos vamos a encontrar con un problema cuando toque refrescar. Es, sólo negrita mi texto. Por lo que todavía está renderizando HTML regular, y eso no es lo que queremos. En realidad queremos que aparezca esta etiqueta. Ahora tenemos estas cosas llamadas elementos HTML. Y un elemento HTML comienza con un ampersand o el final, y termina con un punto y coma. Y en realidad son solo atajos para mostrar menos que, mayores que los derechos de autor, cosas así. Y ahora hay tantos de ellos, no puedo cubrirlos a todos. Y vas a tener que hacer un poco de Google para ello. Pero podemos hacer menos que, que es este símbolo aquí, B. Y entonces podemos hacer ampersy mayor que g t. Y esto se ve realmente, realmente raro, pero lo que esto va a hacer es convertirlo en eso. Y éste lo va a convertir en eso. Pero sólo mientras lo estamos exhibiendo. Entonces sigamos adelante y actualicemos tu página. Y podemos ver que esto ahora realmente aparece. Sigamos adelante y copiemos todo esto a nuestra etiqueta de cuerpo de cierre. Y agreguemos una baraja aquí. Mira eso. Por lo que nuestro texto ya no es negrita y nos está mostrando las etiquetas HTML. Ahora podemos hacer lo mismo, exactamente lo mismo dentro de nuestros elementos de código que usamos en nuestra última clase o última lección. Lo mismo, y no tenemos que hacerlo dentro del elemento de código. Podríamos hacerlo realmente en cualquier lugar. Realmente no importa. Ya verás aquí abajo dice B, esto es audaz, para que ese sea un elemento HTML o una entidad. Y una entidad, todo lo que es tomar algún tipo de manera de leer regularmente el código que eres navegador. Tratamos de interpretarlo y mostrarlo de la forma en que quieres mostrarlo de una manera legible por el ser humano. Ahora un ejemplo realmente bueno es si fuéramos a añadir como un pie de página a nuestra página aquí. Entonces digamos que este es nuestro pie de página. Podríamos decir algo así y copiar. Y entonces podríamos poner el año aquí para que podamos poner como 2022, si ese es el año. Desplázate hacia abajo y ahí está, un copyright. Ahora sólo por fondos estos, voy a meter en extras aquí. Podemos hacer por super, y eso lo compensa. Por lo que lo trae un poco arriba en lugar de estar centrado. Y también podemos hacer SUB, SUB para subíndice, superíndice y subíndice. Y eso lo baja. Entonces voy a deshacer eso si siéntete libre de jugar con esos si quieres, pero no son realmente necesarios. Tan solo pensado, tírelos ahí por diversión porque están trabajando siguiendo líneas de derechos de autor. El copyright suele ser ese pequeñito ver, en la parte superior de la línea, usarías superíndice para eso. 16. Introducción a las formas: De acuerdo, hablemos de formularios Real rápidamente. Formularios. Ahora vamos a estar gastando un poco de tiempo en formularios, pero en realidad no va a ser increíblemente útil para nosotros. Los formularios son cómo enviamos datos a un servidor. Pero en realidad no tenemos un servidor sólo porque hayamos abierto en archivo HTML en tu navegador no significa que sea un servidor. servidor suele ejecutar un lenguaje de programación como Python o PHP, Java, C, algún otro formato adecuado, lenguaje de programación adecuado que estamos usando no un lenguaje de programación. Html no es un lenguaje de programación, es un lenguaje de scripting. Y así, no tenemos un servidor, no necesitamos el servidor para ejecutarlo. No obstante, los formularios son importantes para crear formularios de contacto, actualizar formularios, formularios de inicio de sesión formularios de registro, olvidó sus formularios de contraseña, cosas así. Ahora forma típicamente se ve así. Tienes el elemento de forma. Tienes algún tipo de método. Y en realidad puedes ver que está sugiriendo aquí, bueno tres, pero realmente vas a estar usando GET o post en su mayor parte. Yo, sigamos adelante y usemos get. Y la acción va a ir a algún punto de página HTML. Ahora justo como ejemplo aquí, sigamos adelante y creemos un botón. Y el tipo va a ser Enviar, y vamos a cubrir todo esto de manera individual, individual también. Presentar este formulario. Y si vuelvo a mi página y refresco y hago clic en enviar este formulario, mira lo que hace a mi URL. Va a algún punto de página HTML. Por lo que cambió la página para nosotros, lo cual es un poco cool. Y trataría también de recolectar la información del formulario y ponerla en la URL, cual no es genial para contraseñas ni tarjetas de crédito ni cosas así, pero es una buena manera de trabajar con formularios cuando solo estás aprendiendo. Echemos un vistazo a qué más podemos hacer con un formulario. Y de nuevo, no hace falta seguir junto con esto, cubrirá todo esto por su cuenta. Entonces input, hemos conseguido entrada y podemos hacer un área de texto. Y acabo de dejar que mi código VS, mi editor autofill cosas para que me mostrara cosas. Este es un campo de entrada. Es una sola línea, como tu email o tu contraseña o algo así. Y este es un área de texto como estás agregando tu dirección. Entonces sigamos adelante y echemos un vistazo a algo de esto de manera individual. Lo que voy a hacer es simplemente borrar eso porque no va a ser útil en la siguiente lección. A pesar de que quería hacer aquí era mostrarte, oye, así funcionan las formas. Y en la siguiente lección, realidad vamos a empezar con formularios. 17. Elementos de entrada: De acuerdo, bienvenido de nuevo. En la última lección, echamos un vistazo a lo que hace una forma, una acción. No queremos que esto vaya a ningún lado. Hagámoslo solo. Hagámoslo ir a la misma página en la que ya estamos. Entonces cuando tenemos ciertos elementos, como entrada, área de texto o botón, o hay uno realmente se seleccionaron. Vamos a cubrir todos estos de forma individual. Pero cuando tenemos estos, todos estos deben estar envueltos en un elemento de forma. Ahora esto es una especie de mezcla y match y haz lo que quieras. No hay muchas reglas para ello. Al igual que en no tienes que tener un botón de área de texto de entrada luego selecciona. Puedes mezclar y emparejar estos de cualquier manera, forma o forma que te guste. Pero empecemos con la entrada. Por lo que podemos hacer insumo. Y yo sólo voy a golpear a Tab. Y por defecto es tipo es texto, así que solo texto regular, pero hay muchos tipos diferentes. Hay botón que se vería como un botón, una casilla de verificación de color datetime, datetime, local, date, email file oculto. Lo cual es bonito porque ese no aparece en absoluto, pero todavía se puede poner información en una carga de imagen, mes, número, contraseña, Radio Research, tal búsqueda, enviar, toalla, tiempo de texto, URL, semana, así sucesivamente y así sucesivamente y así sucesivamente hasta una y así sucesivamente. Solo trabajemos con uno para empezar con texto regular. Entonces este es nuestro elemento. Este es nuestro atributo, el tipo es el atributo, y este es nuestro valor. Estamos diciendo que es un campo de texto. Entonces podemos darle un valor por defecto y decir hola mundo. Y podemos darle un marcador de posición también. El marcador de posición es igual a introducir su nombre. Sigamos adelante y solo echemos un vistazo a cómo se ve esto. Oh, no, desplácese hasta el fondo. Gracias. Esto tiene HelloWorld. Y cuando elimine esto, elimine, elimine , elimine, elimine, elimine, elimine, elimine, elimine. Este último, ese pequeño texto en el fondo que es texto marcador de posición. Pero cuando refresco la página por defecto, dice hola mundo. Y eso es por el valor que le di. Ahora otro ejemplo sería la contraseña. Vamos adelante y, y se puede ver que lo convierte en pequeños puntos que en realidad no podemos ver lo que está haciendo. Entonces ese es el campo de entrada, eso es realmente todo lo que hay para ello. En la siguiente lección, sigamos adelante y echemos un vistazo a nuestro campo de área de texto. 18. Textareas: Hola y bienvenidos de nuevo. En la última lección, creamos un campo de entrada en esta, sigamos adelante y creamos un área de texto. Ahora éste es un poco diferente. Notarás que el campo de entrada era una etiqueta de autocierre. El formulario no lo era, por lo que envuelve un montón de cosas aquí, pero el campo de entrada en realidad toma un valor en forma de un atributo llamado valor. El área de texto no. Podemos deshacernos del nombre y la identificación porque no estamos haciendo nada de eso. También tenemos un poco de rompereglas aquí donde estamos diciendo, oye, éste en realidad no está usando valor. El atributo no está haciendo esto. Éste en realidad quiere que pongamos nuestro texto aquí. Y esto es interesante porque si refresco esta página, dice texto aquí. Pero lo que nos hace más interesantes es este es uno de esos raros casos en los que los espacios en blanco sí importan. El espacio en blanco sí importa aquí. Y la razón por la que te estoy mostrando esto es porque tengo en mi primera línea texto aquí dentro, pero luego en la segunda línea, tengo como 15 o qué hace eso 12 espacios antes de la palabra espacio en blanco. Adelante y veamos qué hace eso. Quiénes son área de texto. Hace que no sea muy agradable y nos da todos los espacios extra ahí dentro. Entonces si alguna vez te encuentras con algo como esto, solo tienes que seguir adelante y arrojar eso a la izquierda de tu documento, tu página eres archivo en el que estás trabajando. Adelante y refresquemos. Y eso lo trae de vuelta a la izquierda, y ese es nuestro valor por defecto. Ahora esto también puede tomar un Placeholder. Placeholder es igual a, wow, un Placeholder. Placeholder. Está bien, refresca. Adelante y agarremos todo esto y puedes ver que también tengo espacio en blanco extra ahí dentro. Adelante y limpiemos eso y agarremos todo esto Eliminar. Y dice, guau, bien lugar titular. Ahora también tenemos columnas y filas al igual que una tabla. Podemos decir las columnas, digamos en vez de 30, digamos que van a haber 50. Las columnas suben y bajan. Entonces esto va a ser 30. Entonces 50 va a ser, voy a adivinar en algún lugar por aquí están bastante cerca. Y luego tenemos filas que van arriba y abajo. A diez filas aquí podemos decir cinco filas. Hagámoslo un poco más corto. Entonces hemos tenido 12345 y después de esto, la pequeña barra de desplazamiento va a aparecer para nosotros, 6789. Y se puede ver esa barra de desplazamiento aquí. También podemos redimensionar estos, lo cual es bastante bonito. La mayor diferencia entre un área de texto y un campo de entrada ya que tiene columnas y filas, el positor es exactamente el mismo, pero el valor realmente va entre la etiqueta HTML de apertura y cierre. En este punto del tiempo, me gustaría que le dieran una toma a esto, crearan una entrada, y luego crearan un área de texto. No olvides si te quedas atascado, puedes hacer unas preguntas abajo. O alternativamente, puedes unirte al grupo de aprendizaje para codificar Facebook. Somos 56 mil miembros más pueden ayudar al yoga en cualquier momento dado. 19. Botones: De acuerdo, echemos un vistazo a los botones. ¿ Qué tiene de importante un botón? Bueno, si volvemos a nuestra página aquí, tenemos un campo de contraseña y tenemos algún área de texto aquí, pero en realidad no tenemos forma de enviar este formulario. No hay ningún botón para enviar este formulario, y eso es lo que hace un botón. Ahora, botón puede hacer una de tres cosas. Entonces vamos a hacer botón es igual a botón y haga clic en mí. Entonces lo importante aquí es que estamos diciendo tipo, igual que nuestra entrada, tipo es igual a contraseña, tipo de botón es igual a botón. Ahora cuando voy aquí y refresco, hago clic en esto, no pasa nada. Y eso es porque dijimos Tipo Es igual a botón. Esto es en gran medida para JavaScript, donde JavaScript realmente puede hacer algo con el clic de un botón. Para nosotros, esto es completamente inútil. A continuación tenemos reset. Ahora, reset no parece que vaya a estar haciendo nada. Pero si sigo adelante y elimino eso y lo elimino y hago un montón de cosas al azar en tus dos, hace como, como, como, como datos. Y Click Me. Porque esto se establece en Tipo Es igual a restablecer. Se va a restablecer todo mi formulario. Por lo que esto se va a llenar automáticamente con un valor predeterminado, y esto va a aparecer con su valor predeterminado. Al igual que eso, restablece la forma para nosotros. Tan bastante cool, honestamente no se usa con demasiada frecuencia en estos días. El que vas a estar usando más a menudo es enviar. Y ahora si refresco mi página y refresco, haga clic en mí. En realidad recargó mi página. Y se puede ver que fue al signo de interrogación index.html. Y luego ponme de nuevo al fondo. Ahora ese signo de interrogación es porque estamos usando un método llamado get. Y cuando ese método es get, lo que podemos hacer es aquí podemos decir nombre es igual a contraseña y el área de texto que podemos ver el nombre es igual a, no conozco la dirección de alguien. Por ejemplo, sigamos adelante y actualicemos esta página. Y cuando entrego este formulario una vez más, se puede ver la contraseña es igual a hola mundo. Eso es lo que aparece aquí. Y la dirección es igual al texto aquí. Una nueva línea, el espacio en blanco no importa aquí. Y para que lo ponga en o URL. Ahora bien esta es en realidad una práctica realmente, realmente mala. No pongas cosas como tu contraseña, URL interna nunca. Eso no es realmente algo de lo que tengas que preocuparte demasiado ahora mismo, pero lo voy a predicar sólo para que estés familiarizado con una especie de cómo funciona la seguridad. Si alguna vez pones una contraseña o una tarjeta de crédito o un número de seguro social, número de seguro social en tu URL. Google puede tomar esa URL y almacenarla en internet y no sabrá mejor. Pensará que es una página legítima. No sólo Google, sino ser u otros motores de búsqueda, los bots podrán enviar el formulario y obtener esa información también. La gente compartirá los enlaces con su contraseña en y cosas así. Simplemente quieres evitar básicamente poder compartir una contraseña o un número de tarjeta de crédito, números de seguridad social, número de seguro social, cualquier cosa así, cualquier cosa que sea privada. Nunca querrás poner en tu URL. Entonces de nuevo, me estoy dando un poco de predicación sobre seguridad aquí, pero es realmente bueno saberlo. Lo que hay que señalar aquí sin embargo, es test1. Ensayo 2. Contraseña es igual a probar dos direcciones iguales a probar una, tal como dijimos. Y ese formulario ahora está enviando porque tenemos tipo de botón es igual a enviar. 20. menús desactivados: De acuerdo, sigamos adelante y veamos las opciones desplegables. Ahora éste es realmente interesante. A mí me gusta mucho este, pero antes de que hagamos eso, limpiemos esto solo un toque porque nuestra forma se ve un poco asquerosa y te mostrará cómo se ve esto antes y después. Entonces voy a añadir un montón de divs. Y aquí, saber que un div es un elemento ficticio no hace absolutamente nada, pero es un bloque elementos. Entonces va a una especie de poner estos en sus propias líneas. Y hagamos esto también. Y así era nuestra forma al principio. Acercaré aquí. Así es como se ve la forma al principio. Y cuando refresco la página, eso es en su propia línea en línea. En línea. Entonces eso es un poco mejor en mi opinión. Vamos a seguir adelante y crear un div más aquí solo para que podamos tener un elemento selecto. Y este elemento selecto es bastante interesante. Entonces lo que podemos hacer es nombre. Podemos darle un nombre seleccionado opción de subrayado. No necesitamos darle una identificación. Y ésta es interesante porque funciona un poco diferente al área de entrada y texto. Lo que esto hace es que nos permite utilizar el elemento de opción donde podemos poner aquí un valor y una representación textual de ese valor. Entonces valora uno, y podemos decir que este es el valor uno. Hacemos lo mismo en la segunda línea, valoramos dos y esto es valor a, sigamos adelante y veamos cómo se ve esto. Esto es un pequeño desplegable ahora, y podemos hacer esto una y otra vez. Voy a hacer un montón aquí. No realmente buen ejemplo, sino un ejemplo sin embargo. Y podemos seleccionar uno de estos. Ahora la razón por la que agregamos un valor en año más la representación textual de ese valor es porque si selecciono Valor uno, envío este formulario. Se puede ver aquí arriba. Por lo que la opción seleccionada es igual al valor uno, y ese valor uno coincide aquí. Entonces cuando envíes tu formulario, tu lenguaje de programación del lado del servidor como Python va a leer este valor, va a decir que es valor uno no va a buscar esto es valor uno, va a estar buscando solo valor uno. Ahora también podemos hacer que las cosas se desactiven y también podemos hacer que las cosas sean preseleccionadas. Entonces sigamos adelante y hagamos una nueva opción aquí que esté desactivada por defecto. El valor de opción va a ser nada. Y digamos que esto está deshabilitado como igual a discapacitado. Discapacitados, así como eso. Sigamos adelante y tal vez lanzemos esto en una nueva línea sólo para que sea un poco más legible. Y vamos a refrescar nuestra página. Vuelve a acercar el zoom. Tenemos una opción aquí que está desactivada. No puedo seleccionarlo y puedo seleccionar el valor uno o dos, pero no deshabilitado. Ahora digamos que aquí tengo una opción que siempre quiero ser seleccionado por defecto. Y decir default. Seleccionado es el valor. Seleccionado por defecto es la representación de texto de este valor. Y podemos decir, dicho electo es igual a seleccionado, seleccionado por defecto. Y así aunque vuelva a esta página y Lake, despeje todas estas cosas como si fuera un usuario totalmente nuevo, me desplaza hasta la parte inferior de la página, seleccionada por defecto, a pesar de que es una tercera opción, it, no ha seleccionado valor1 y valor2 por defecto, se selecciona por defecto. Ahora lo último que debes saber sobre estos campos de formulario es que puedes hacerlos requeridos. Entonces digamos requerido y requerido. Por lo que se requiere la contraseña en los campos de dirección. Adelante y refresquemos esta página. Adelante y despejemos esto y haga clic en mí y diga por favor llene este campo. Ahora donde esto se pone interesante es podemos decir que esto no es una contraseña. Podemos decir que esta es una dirección de correo electrónico. Actualicemos la página. Y en realidad lo que necesito hacer es cambiar ese tipo a correo electrónico e incluso cambiar el nombre a correo electrónico también. Por lo que el valor predeterminado es Hello World. Pero si hago clic en esto es por favor incluya un anuncio en la dirección de correo electrónico. Sabe que está buscando una dirección de correo electrónico. Hola mundo en something.com. De acuerdo, entonces la validación más allá de esta primera, no pasó la segunda. Quiere que llene este campo aquí. Una vez que llene eso, entregará la página o entregará el formulario por mí. Ahora, esto son formas en pocas palabras, las formas son increíblemente importantes. También son bastante complejos. Por lo que recomendaría encarecidamente sólo tomarme unos minutos y meterse con él. Ahora no te va a aplicar inmediatamente en este momento hasta que empieces a trabajar con un lenguaje de programación del lado del servidor. De nuevo, como Node.js, Python , C, PHP, algo así. Pero aún se puede conseguir práctica práctica práctica entendiendo que se puede requerir algo, que tiene un nombre que podría ir en la URL si se trata de un getMethod que el tipo podría ser email, password, text, reset. Esto podría incluso técnicamente incluso BY botón si lo quisiéramos, cambiemos eso a botón y veamos qué pasa ahí. Cambia a un botón. A pesar de que me gusta usar esta forma de botón, es un poco más explícito, con el nombre verbosamente Even. Y sí, así que solo dale un tiro a esto y juega un poco con él. No trates de lograr nada en particular, solo traté de romper las cosas. ¿ Qué pasa cuando escribes Kohls es igual a 500 o uno? Vea si eso se ve diferente o filas, o vea si puede hacer esto seleccionado, este elemento selecto también se requiere. Adelante y solo juega con eso. Aquí no hay gol, pero yo diría que pasa por lo menos diez minutos jugando con esto y solo hacerse una idea de cómo funciona esto porque estos son increíblemente importantes en el camino. 21. Incrustación de videos: De acuerdo, bienvenido de nuevo. Echemos un vistazo a incrustar algún tipo de contenido. Ahora lo hacemos típicamente con un elemento llamado iframe. Y iframe toma un SRC y un borde de marco mientras que en realidad toma un montón de cosas diferentes. Pero el borde marco va a ser 0 porque no queremos un borde alrededor de él. Pero vamos, vamos a añadir esa frontera. Y ahí de todos modos, vamos a hacer SRC es igual a HTTPS. Caleb dot i, veamos si esto incluso funciona. Y aún. Mi sitio web no te dejará hacer eso. Pero se puede ver que hay un marco de frontera por aquí. Y el ejemplo es marco border one versus print frame border 0. Nos gusta marco border 0 en estos días sólo se ve un poco mejor. Pero sigamos adelante y agreguemos un video de YouTube. Entonces solo estoy en la codificación para todo el mundo canal de YouTube. Y vamos a los fundamentos de desarrollo web. Pausemos eso. Y si sigo adelante y hago clic en compartir, puedo compartir en Facebook, Twitter, o puedo hacer clic en Emblar. Y me da un iframe y un montón de código. Y yo sólo puedo copiar eso. Y eliminemos este iframe. Pega eso aquí. Y notarás que es un iFrame. Tiene un ancho y una altura también. Su fuente es la URL de YouTube. Así dub, dub, dub dot youtube.com slash embed slash j, y arc PIH DG. Esa es la idea de video única, sí, marco de borde de 0. Y YouTube tampoco quiere que tengamos un borde de marco y permitamos un montón de otras cosas aquí de las que podemos deshacernos Excepto permitir pantalla completa. Vamos a mantener eso ahí dentro. Eso parece útil. Y así podemos volver a nuestra página y refrescar y mirar eso. Tenemos un video de YouTube en nuestra página así como así. Y eso es literalmente tan fácil como se pone. Para que esa sea literalmente copiar y pegar. Pero veamos qué pasa cuando hacemos con esos nueve ancho de 900, pero la altura se mantiene igual en 315. Se pone un poco blando ahí, ¿no? Digamos que el ancho va a ser de 900 y la altura es de 100. Y ahora en realidad parece que se está cortando un poco. Por lo que hay formas de controlar esto. Y voy a deshacer eso porque YouTube me sugirió las dimensiones adecuadas. Y solo puedo seguir adelante y jugar esto y solo funciona para mí justo fuera de la caja. Ahora lo que me gustaría que hicieras es ir a buscar un video de YouTube, clic en ese enlace compartir o ese botón compartir, y luego conseguir el iframe y ponerlo en tu página. Quiero que consigas un poco de experiencia con esto porque en el siguiente video nos vamos a sumergir en tu proyecto final donde vas a necesitar usar un embed, como un iframe. 22. TU PROYECTO: Okey-dokey, bienvenido de nuevo. Por fin estamos en tu proyecto final para HTML2 01. Ahora, esto es lo que quiero que hagas es quiero que crees un diseño de página. Por lo que quiero que tengas algún tipo de encabezado y sección de navegación y una sección de contenido. Y tiene que tener un diseño y tiene que usar tablas o una sola tabla, tabla múltiple, no importa. Te lo dejaré a ti. Tu navegación debe tener al menos un enlace a otra página existente tuya. Área de contenido. Debe tener una imagen, un párrafo, un encabezado, y un video de YouTube. Por último, tu pie de página debe tener un símbolo de copyright y el año en que has creado esta página. Por lo que podría ser como Copyrights 20-20 y copyright 20-25. Y luego cuando termines eso, me gustaría que tomaras una captura de pantalla de tu página y la compartieras con el resto de la clase. Creo que es realmente útil obtener algunos comentarios si no quieres compartir con la clase, eso está bien. Siempre puedes ir al Facebook aprendiendo a codificar Grupo y compartirlo con el grupo y obtener algunos comentarios allí también. Pero la retroalimentación es absolutamente vital y no te pongas demasiado nerviosa con la retroalimentación. Miles de personas hacen esto todos los días. Está totalmente bien. Podemos darte todo tipo de retroalimentación positiva para ayudarte a escribir mejor código, para que las cosas se vean un poco, un poco mejor, un poco más modernas, cosas así. Siempre es agradable tener otro par de ojos en tu código. Así que adelante y dale una oportunidad a esto. Lo que voy a hacer es que voy a pausar este video por unos, no sé, cinco segundos más o menos. Y luego voy a crear mi versión de esto justo frente a ti. Así que adelante y pausa el video aquí y lo sabes si te atascas, solo puedes verme hacer el mío y luego puedes probarlo por tu cuenta también. Pero te recomiendo encarecidamente que lo pruebes por tu cuenta primero, haz que tus cerebros suden un poco. Eso es realmente, realmente importante. De acuerdo, sigamos adelante y creemos nuestra página de proyecto. Entonces voy a ir a Archivo, Nuevo Archivo y dejar que los cambios de texto plano a un archivo HTML. Y lo primero que necesito hacer es crear esa estructura HTML5. Este documento se va a llamar proyecto de Caleb. Y lo primero que necesitábamos aquí era crear un diseño de página usando tablas o una tabla. Y así de pronto me dejo algo de espacio para que trabajemos aquí. Y queremos algo que se va a quedar un poco así. Debido a Doo-doo-doo-doo. Echa de menos la forma más difícil de dibujar algo. Pero sí, para que pudiéramos tener algo así. Entonces tenemos como nuestro encabezado aquí. Podrían decir como el proyecto de Caleb, sitio web de Caleb, tu sitio web, tu comida favorita, tu mascota favorita, tus muebles favoritos o algo por el estilo. Tenemos algún tipo de navegación a la izquierda. Por aquí. Tenemos un contenido y el derecho, y tenemos algún tipo de pie de página en la parte inferior. Ese es el tipo de look que voy a buscar. Tu estilo podría ser un poco diferente, tu diseño podría ser un poco diferente. Pero primero lo primero es que sé que necesito una mesa y sé que necesito trabajar con esta mesa y ver exactamente qué está pasando. Y quiero que el ancho sea 100% de esta página. A continuación, sé que tengo al menos una fila aquí. Entonces tengo una fila de tabla, y quiero el encabezado de la mesa aquí. Ahora es agradable tener el encabezado de la mesa va a atrevirlo para mí, pero no quiero que sea audaz. Yo quiero un H1, quiero que esto sea enorme y diga el proyecto de Caleb Tolkien. A continuación tenemos otra fila aquí. Entonces sigamos adelante y creemos otra fila de tabla. Este tiene dos celdas sin embargo. Entonces hacemos TD celular uno, TDs L2. Y sigamos adelante y previsualice esto guardando esto como mi proyecto dot HTML. Y puedo ir a archivo, abrir archivo, mi proyecto dot HTML. Y podemos ver que las células no están funcionando realmente. Y esto se espera porque queremos que esto retome todo el ancho. Pero esto es decir, bueno hay dos celdas, tenemos que mostrarlas de alguna manera. Lo que podemos hacer aquí es th colspan es igual a dos. Y esto es decir que hay dos celdas aquí abajo. Asegúrate de que esto también finja que son dos celdas. Y ahí vamos. Eso se ve un poco mejor. Ahora tenemos una navegación por aquí en la celda uno. Entonces, solo sigamos adelante y etiquetemos esta navegación y etiquetemos este contenido. Está bien. En realidad se puede ver que eso chocó con mi navegación. Cambiemos el ancho aquí. El ancho de éste va a ser algo así como el 20%. Eso se ve mejor. Por último, lo que escribí aquí, que por cierto, podría rap en un pre tag, es que necesito esta fila inferior aquí dentro. Así que sigamos adelante y añadamos esta fila inferior, fila de tabla, td, pie de página aquí. Veamos cómo se está dando forma esto para que se vea. No está mal, no está mal. Pero también queremos que esto tenga un colspan de dos. Hagamos colspan de dos. Ahí vamos. Tenemos un pie de página aquí y queremos centrarlo. Entonces no lo hagamos un TD, hagámoslo un th. Y empecemos con lo más fácil aquí. Por lo que tenemos nuestra disposición terminada. El pie de página debe tener un símbolo de copyright. Sabemos que es una entidad HTML. Es esa pequeña c con un círculo a su alrededor. Por lo que podríamos decir y copiar la página web de Caleb como de nosotros vivimos en el futuro, 20-30. Ahí vamos. No está mal, no está mal. Navegación. Sabemos que las reglas eran la navegación debería tener un enlace a otra página existente. Vamos a seguir adelante y darnos algo de espacio para trabajar aquí. Y vamos a crear una lista desordenada. Y cambiemos esto a un archivo HTML. Tenemos una lista desordenada y ese primer enlace va a ser una etiqueta ancla que va a index.html. Index.html. Acude a nuestro HTML a una sola página. ¿ De acuerdo? Está bien, eso se está juntando. Voy a acercarme aquí. Entonces eso se está uniendo. Vamos a seguir adelante y crear otro aliado con un ancla dentro de él, un elemento de lista con un ancla dentro de él. Y vamos a decirle a éste que vaya a, no lo sé, Facebook.com, pero este es un link externo. Necesitamos la barra inclinada de colon HTTPS. Y esto podría decir: Ve a Facebook. Dot com. Ahí vamos. Tenemos un par de enlaces ahí dentro. Sabemos que ésta existe porque esa era la página cuando estábamos trabajando o es una página en la que estaba trabajando de todos los demás videos. Por último, tenemos algo de contenido aquí dentro. qué queríamos agregar en tu contenido debería tener una imagen de párrafo, un encabezado, y un video de YouTube. Adelante y agreguemos primero ese encabezado. Y así en realidad te das cuenta de lo que hice ahí fue el contenido era sólo una pieza de texto portador de lugar para mí. Todo lo que realmente quería hacer era decirme que ahí donde se suponía que debía estar para poder seleccionarlo rápidamente y empezar a trabajar. Sigamos adelante y agreguemos algún encabezado aquí. Y no tiene que ser contenidos reales por cierto, algún encabezado ahí dentro. Simplemente necesita revisar este criterio de aceptación. Por lo que el encabezado está hecho. Podemos deshacernos de eso. Enlace a otra página, deshazte de eso. Crear un diseño de página utilizando tablas. Deshazte de ese pie de página debe tener un símbolo de copyright. Deshazte de eso. Entonces ahora solo tenemos una imagen, un párrafo, y un video de YouTube. Sigamos adelante y agreguemos un párrafo aquí. P. Laura. Está bien. Ese ya está hecho. Ya no necesitamos el párrafo ahí dentro. Necesitamos una imagen. ¿ Ya tenemos alguna imagen? Tenemos una computadora, así que sigamos adelante y agreguemos eso. Img. El origen va a ser imágenes que esta carpeta aquí slash computadora, dot-dot-dot JPEG. Y el alt va a ser computadora por si la imagen no se carga. ¿ Esto funciona para mí? Sí, ahí está. Ahí hay una gran imagen. Por último, agreguemos un video de YouTube. Entonces solo voy a arrancar YouTube aquí e ir al canal de codificación para todos. Y sigamos adelante y hagamos el formateo de Python. Vamos a seguir adelante y haga clic en compartir, y vamos a conseguir ese embed. Y todo lo que estoy haciendo es seleccionar ese texto que va a copiar. Y aquí abajo, pega. Y ese ancho todavía va a ser 560, esa altura todavía va a ser 316. Voy a dejar este permitir Excel acelerómetro portapapeles, ¿verdad? Todas esas cosas. Voy a dejar eso ahí dentro porque eso es lo que Google está sugiriendo. No necesitamos saber qué es eso realmente en este momento en particular porque se trata de HTML intermedio, no de HTML avanzado. Adelante y volvamos a nuestra página. Y tenemos un título. Tenemos algo de navegación ahí dentro. Tenemos un encabezado, un párrafo, una imagen, tenemos un video de YouTube, y tenemos un pie de página. Lo último que quiero hacer es deshacerme de esta frontera y de este pre aquí. Entonces, vamos a deshacernos de ese texto preformateado y ese borde se puede quitar. Y veamos qué tenemos. Ahí vamos. Contamos con una página HTML con un diseño adecuado. Y eso es todo lo que hay. Entonces gracias por tomar este curso. Mi nombre es Caleb Eataly y gracias por tomarse el tiempo para aprender HTML 201 o HTML intermedio conmigo hoy. No olvides si te gusta la forma en que enseño siempre puedes seguirme en la cuota de habilidad también. Ya me están siguiendo miles de personas. Pero obtendrás pequeñas actualizaciones. Un barco como cuando tengo un nuevo curso que ha salido, cosas como esa y luego puedes ver New Course tiene como las pongo fuera. Entonces gracias de nuevo por tomarse el tiempo para aprender todo esto conmigo. De verdad espero verte en otro curso. Si no te veo en otro curso, espero verte en el Facebook aprendiendo a codificar Grupo es un grupo completamente gratuito. Es completamente opcional. Pero hay alrededor de 56 mil miembros ahí en este momento. Todo el mundo está dispuesto a ayudarte en cualquier momento. Y si no te veo ahí dentro, entonces una vez más, sólo gracias y feliz codificación. Nos vemos por ahí. Adiós.