Programación HTML para todos

1. Introducción a la promoción de todos HTML: Está bien. Bienvenido al curso. Mi nombre es John Elder de Cody me dot com y seré tu instructor hoy y este curso te enseñaré codificación html desde cero. Cuando termines, podrás leer, escribir y entender. HTML. el pilar fundamental de cada sitio web en Internet en la primera mitad del Aprenderáel pilar fundamental de cada sitio web en Internet en la primera mitad delcurso. HTML. Te enseñaré la sintaxis HTML y todas las etiquetas de elementos principales en sus atributos en la segunda mitad del curso aprenderán a usar el framework CSS bootstrap para peinar o páginas Web y hacerlas lucir increíbles. Entonces si siempre has querido construir sitios web, este es el curso para ti. Si tienes poca o ninguna experiencia en codificación, este es el curso para ti. Y si no quieres pasar mucho tiempo aprendiendo pero realmente quieres entender cómo funciona todo esto, definitivamente este es el curso para ti. Mi nombre es John Elder. Tengo 35 cursos aquí, ustedes, ustedes, para mí más de 42 mil estudiantes y críticas abrumadoramente positivas. Pero si no estás satisfecho por cualquier motivo, ofrezco garantía de devolución de dinero de 30 días, sin preguntas. Y a diferencia de muchos instructores aquí, estoy aquí respondiendo preguntas todo el día, todos los días. Entonces si hay algo que simplemente no entiendes del todo, o si tienes alguna pregunta de algún tipo, dispárelo encima. Estoy feliz de ayudar de cualquier manera que pueda. HMO es uno. Las partes más importantes del desarrollo web y el aprendizaje nunca es año minis. Date de alta ahora vamos a codificar algunos html. 2. HTML 1 Introducción a la introducción y Sublime: Está bien. Bienvenido al curso. Mi nombre es John Elder de Cody me dot com Y hoy seré tu instructor. Este video quiero pasar solo un par de minutos rápidos hablando de todas las herramientas que vamos a necesitar para este curso. Ahora. Por suerte, HTML no requiere absolutamente ninguna herramienta especial. Ya sabes, con la mayoría de los lenguajes de programación. Ruby, tienes que descargar e instalar Ruby. Pensé que tenías que descargar instalar cosas de base de datos Python. Mi secuela. Tienes que descargar Instalar mi secuela, Django. Lo mismo, nodo. Lo mismo. Cada demos totalmente diferente. Está construido en horneado en cada uno de los navegadores Web en existencia. Entonces no importa si estás usando Chrome Firefox safari opera, cualquier cosa en absoluto. HTML ya está ahí dentro. Ya está listo para funcionar. No hay nada que tengas que hacer. Entonces para escribir el código de cotización demo H, todo lo que necesitas es algún tipo de editor de texto, algún tipo de no pads, algo en lo que escribir. Y ni siquiera tiene que ser un editor de texto especial, aunque debería ser, uh, uh, ya sabes, puedes usar windows No pad, lo cual es una especie de ridículo. Pero podrías si quisieras. Entonces en este video, voy a recomendar el editor de texto que voy a utilizar a lo largo de este curso. Es el sublime editor de textos. Entonces si vas a sublime tex dot com, ves, es una especie de foto de ello aquí. Y esto es bonito porque es un revestimiento. Editor de texto No importa qué lenguaje de programación estés usando. De alguna manera verás aquí cambiar de color basado en el diferente código que escribes, y eso es realmente bonito y algo útil con el fin de mantener tu código más legible y cosas así. Así que adelante y descarga esto. Está disponible para Windows. Mac Lennix no importa qué sistema operativo estés ejecutando. Es completamente gratis, Um, pero si no te gusta el texto sublime por la razón que sea, y es uno de los más populares. Pero otra alternativa es no pad plus plus en Google. Eso, y te darás cuenta de la gran diferencia es que esto es una especie de fondo blanco donde sublime era negro y podrías cambiar el color de ambos. Pero por defecto, sublime viene negro. No pad plus plus viene blanco. Ya veré a Adam es otro popular editor de textos. Vim tienen un poco más complicado. Hay un editor de código de estudio visual si tu persona de Microsoft, no estoy seguro si es gratis o no. Pero como dije, voy a usar texto sublime para este curso. De hecho, podría subirlo aquí mismo, y esto es Es solo un editor de texto básico. Se pueden escribir cosas y se podía ver ya está empezando a cambiar de color, lo cual es genial. Una de las cosas bonitas de esto es que si vas a ver y luego sintaxis, puedes ver que puedes usar esto para cualquier lenguaje de programación que te guste. Ahora mismo tenemos HTML seleccionado. Ni siquiera necesitaba hacer eso. Simplemente adivinó que estaba haciendo HTML. Entonces eso es genial. Veo que los rails, python, PHP, pearl tienen un script, lo que quieras. Se puede hacer en texto sublime. Así que definitivamente echa un vistazo a eso. Vas a necesitar usar algún editor de texto. Podría bien usar este ordenado a seguir junto conmigo. Y así es sólo más fácil de seguir. Entonces creo que eso es todo por este video. En el siguiente video, vamos a saltar justo dentro y empezar a aprender html 3. HTML todos 2 Qué es HTML: OK en este video. Vamos a hablar un poco de HTML antes de que saltemos y de hecho empecemos a escribir cualquiera de ellos. Y quiero hablar de ello porque tipo de importante entender exactamente lo que es. HTML significa un lenguaje de marcado de hipertexto, y la mayoría de la gente lo piensa como un lenguaje de programación, un lenguaje de programación por computadora. Pero técnicamente, no lo es. No es realmente como PHP o Pearl o Ruby o Python o Java script. No es un lenguaje de programación, pero actúa mucho como un lenguaje de programación. Entonces tendemos a ser como, OK, sí, sí, es un lenguaje de programación, pero técnicamente no lo es. Es una marca de lenguaje, y, ah, esa diferencia es importante. Básicamente, HTML es solo una serie de etiquetas, etiquetas de apertura y etiquetas de cierre. Y luego lo que sea que esté entre, la etiqueta que se marca consigue que algo se le haga. Ya sabes, si quieres hacer algo ah, titulo, titulo, puedes ver aquí mismo tenemos una etiqueta de título en etiqueta abierta y una etiqueta cerrada se cierra designada por un poco de slash y luego dentro de aquí, eso es lo que es tu título, ya sabes, Si quieres hacer un rubro, hacemos esto. H una etiqueta. Cualquier cosa dentro de esta etiqueta es el encabezamiento. Entonces eso es todo HTML realmente es. Es solo una serie de etiquetas anidadas de apertura y cierre de impuestos. Ahora bien, no todas las etiquetas HTML se cierran, y hablaremos de eso en un poco. Pero en su mayor parte, todos abren y cierran, y eso es todo lo que es. Por lo que aprender HTML es realmente sólo una cuestión de memorizar todas las etiquetas y luego simplemente usarlas . Siempre que quieras hacerle algo a algo, quieres hacer grande el texto, lo pones en una etiqueta de texto grande. Ya sabes, hablaremos de todas las diferentes etiquetas en adelante. No quiero realmente una especie de meterme en nada de eso todavía, pero HTML alimenta absolutamente cada sitio web. No existe un sitio web que exista. No está hecho de HTML. Todas las páginas Web están hechas de HTML. Por lo que vas a cualquier sitio web que quieras y solo tienes que hacer clic derecho y hacer clic en esta fuente de la página de vista, y puedes ver el HTML real para esa página. Todo su justo listo para ver no está oculto no es secreto. Ya sabes, no es propietaria donde no quieren que lo veas. Es muy obvio. Y está justo ahí ahora, está bien, fuera del bate, fuera del bate, sobre todo antes de que hayas tomado este curso. Esto no es nada de eso realmente va a tener sentido. Pero a medida que avanzamos, empezarás a entender Todas estas etiquetas diferentes son como se usan y, ah, en realidad es muy, muy fácil y deberías recogerlo muy rápido. Como dije, es sólo cuestión de memorizar todas las etiquetas. Y no hay tantas etiquetas, así que podemos noquearlo con bastante rapidez. Ahora básicamente hay dos partes a un sitio web. Ahí está el HTML. Y luego está el CSS, y el CSS es lo que hace las cosas bastante bien. CSS es sinónimo de hojas de estilo en cascada, por lo que tiene estilo. HTML es como el marco, los huesos desnudos, ya sabes, el esqueleto de la página Web, y luego CSS lo hace como dije, Lo hace bonito. Agrega color, agrega forma, cosas así. Entonces discúlpame, Esto no es un curso en CSS. Bueno, una especie de tocarlo aquí y allá, porque realmente no se puede hacer h demo sin CSS. ¿ En serio? pero solo en aprender HTML, no necesitas ni siquiera mirarlo. Se CSS. Entonces no vamos a pasar mucho tiempo, caso, hablando de CSS. Muchas veces la gente no aprende CSS. Simplemente usan el marco CSS como Bootstrap. Y más adelante, probablemente veremos bootstrap muy rápidamente y te mostraremos cómo hacerlo. Entonces eso es una especie de eso es algo divertido. Y lo veremos hacia el final del curso tan rápido antes de que sigas adelante. Ya sabes, mencioné HTML es solo cuestión de abrir y cerrar etiquetas, ¿ verdad? cada etiqueta se le llama un elemento en HTML Element y cada elemento puede tener atributos, atributos, aire simplemente básicamente información mawr en el costado de la etiqueta, y realmente no tenemos ningún atributos aquí todavía. Entonces miramos estos,ya sabes, ya sabes, un par de videos a partir de ahora, una vez que realmente nos sumergimos y empezamos a aprender estas cosas. Pero eso es más o menos, um, elementos y atributos derecho, una etiqueta y tienen muchos atributos. Hay varios tipos de comunes que se ven a menudo. Hablaremos de eso, y la única otra cosa realmente son solo etiquetas abiertas y cerradas, y cierran con esta pequeña baraja hacia adelante Se podía ver, como, justo aquí Y justo aquí, aquí y bien aquí. Uh, justo aquí y justo aquí. Se puede ver aquí es una etiqueta, y tiene una etiqueta dentro de ella. Mencioné antes que html está anidado. Esta es una etiqueta anidada dentro de una etiqueta que es en sí misma está anidada dentro de esta etiqueta, y se puede ver que generalmente en Dent para mostrar que anidar ahora, html no es realmente sensible a mayúsculas y minúsculas. Entonces quiero decir, puedes hacerlo así, verdad? Ups. HTML no conoce la diferencia. Esto es sólo un válido es lo que teníamos antes. Pero de esta manera es simplemente mucho más fácil de leer para los estúpidos humanos. ¿ Verdad? Entonces esta es la convención que solemos usar. Entonces y eso es todo por este video. En el siguiente video, vamos a saltar justo dentro y empezar a aprender las diferentes etiquetas y debería ser divertido 4. HTML Todos 3 Estructura de páginas HTML: OK en este video. Yo quiero hablar de la estructura de una página HTML, y ya hemos mirado esto, pero quiero hablar de ello con un poco más de detalle. Pero antes de que hagamos eso, quiero hablar de cómo ver esta cosa. Entonces tenemos algunas cosas aquí y hablaremos de qué es todo esto en un minuto. Pero con el fin de especie de utilizar esto para guardarlo y verlo en un navegador Web, venimos aquí a archivar y luego guardamos como y solo estoy guardando esto en mi escritorio, podrías guardarlo absolutamente en cualquier lugar. No vamos a empujar este código a un servidor Web en absoluto. En este curso. Simplemente vamos a aprender HTML y vamos a hacer todo localmente en nuestra computadora. Entonces guarda esto donde quieras, Pero como dije, lo voy a guardar en el escritorio y solo lo guardo como página dot html y podrías ver no tengo que hacer eso porque, ah, html ya está seleccionado. Tan solo ver así, y todas las páginas HTML terminan en punto html. Es solo la convención, así que eso es lo que los designa como páginas HTML para que podamos minimizar esto aquí. Y luego se podía ver aquí mismo se pagina en HTML pequeño icono de cromo justo en mi escritorio. Y para ver esto en un navegador Web. Acabo de arrastrar esto y hacer esto y hacer clic, entrar y boom aquí lo ISS para que también pudieras escribir en archivo. Ver usuarios flatlining página de escritorio HTML. Este planeta plano es el nombre de mi computadora, por lo que los años serán diferentes. No creo que el mundo fuera plano. Yo solo creo que es gracioso que algunas personas sigan haciendo eso. Entonces por eso llamé a mi computadora. Tengo un extraño sentido del humor, así que ah, todos modos, así lo recibió. Este es un encabezamiento, y este es un párrafo que corresponde a este material aquí mismo, y hablaremos de esto con más detalle en tan solo un segundo. Entonces así es como guardar una página HTML. Cómo ver la vista en un navegador Web que estoy usando. Chrome no importa qué navegador Web utilices. Firefox Safari, cualquier navegador Web en absoluto. Es todo lo mismo. Por lo que para el resto de este video, quiero hablar de la estructura de una página web, y todas las páginas Web tienen esta misma estructura. Comienzan con el tipo DOC y esto solo le dice al archivo, Hey, esto es HTML Y de hecho, puedes deshacerte de este archivo de esta línea. No tienes que hacerlo, pero si quieres una especie de código estándar, deberías ponerlo ahí. A continuación, tenemos una etiqueta HTML, y todas las páginas Web son básicamente etiquetas HTML, y ves que todo lo demás está anidado dentro de esta etiqueta HTML. De hecho, si hago clic en él, puedes ver aquí abajo esta etiqueta HTML de cierre destacados. Por lo que todo dentro de aquí es demo de edad. A continuación, tenemos esta etiqueta de cabeza y la etiqueta de cabeza no es visible en una página web. Contiene información. Um, si conoces s CEO, a veces pondrás etiquetas s CEO en sus metaetiquetas. Podrías poner como, gráficos abiertos etiquetas de redes sociales y cosas así. No aparecen en la página, pero están acostumbrados para cosas como Oh, Google. Con el fin de disculparme categorizando usted enumera su sitio en Google. Se utilizan para ciertos sitios de redes sociales. Ya sabes, si publicas un enlace en Facebook y la pequeña imagen aparece automáticamente. Se puede designar que dentro de su etiqueta de cabeza y, como se dijo, no aparece en su página, pero se usa para otras cosas. El principal dentro de una etiqueta de cabeza es esta etiqueta de título, y se puede ver aquí dice mi página Web. Si volvemos a nuestro sitio, eso es justo aquí arriba. El top aquí. Ves esto, la barra del navegador. Dice mi página Web aquí arriba. Ese es el título del sitio. Y, um, eso es importante para ah, específicamente para cirujanos como Google y Bing usarán ese tipo de lista en su motor de búsqueda cuál es el título de tu sitio, y ese es realmente el único usado para esto. Además, aparece justo aquí en este bar. Pero si eres como yo, usualmente tengo 1000 pestañas abiertas y ni siquiera puedes leerlo Cuando hay tantas pestañas abiertas. Creo que mucha gente hace eso, así que no es un super, ya sabes, cosa importante, pero aun así debes hacerlo. Entonces cerramos la etiqueta de la cabeza y luego comienza la etiqueta del cuerpo, y esto es probablemente lo más importante, todo dentro de la etiqueta del cuerpo y se podía ver aquí es donde se cierra. Todo lo que hay dentro de aquí aparece en la página, ¿verdad? Entonces en nuestro caso, tenemos dos cosas. Tenemos esta etiqueta H one en esta etiqueta P y H uno es sinónimo de rumbo, y hablaremos de más encabezamientos más, probablemente en el siguiente video o en el siguiente después de eso. Y esta es una pestaña de párrafo, y esto simplemente designa texto como párrafo, y hablaremos de eso más adelante, también. Pero se puede ver que sólo corresponde a estas dos cosas en la pantalla. Este es un rubro. Este es un párrafo Muy cool, Muy fácil. Um, y eso es realmente todo lo que hay a ello. Entonces, como dije, todas las páginas Web siguen este formato básico. Ahora, dentro de esta etiqueta corporal, podrías tener 50 líneas de código 100 líneas de código, 2000 líneas de código, pero todo está dentro de este cuerpo para y luego finalmente, al final, acabamos cerrar nuestras etiquetas HTML. Así que regresa a cualquier tipo de sitio web que te guste y ve la fuente de la página y verás alrededor en la parte superior. Tenemos el tipo doc. Aquí está la cabeza. Aquí tienes una de esas metaetiquetas de las que hablé. Ah, aquí hay algunas otras etiquetas de las que no hablé. Estas son cosas CSS. Hablaremos de esos más tarde. Algo justo aquí. Este es el enlace CSS. Ahí es donde va CSS. Hablaremos de eso más tarde. Como dije, um, um, todo tipo de cosas en redes sociales y ver el cuerpo. Aquí por fin termina la etiqueta de cabeza. Por lo que dentro de tu etiqueta de cabeza, puedes tener un montón de cosas y la mayoría de los sitios web lo hacen, y vamos a ver esto adelante. Pero aquí es donde comienza la etiqueta del cuerpo. Entonces aquí está todo el material del cuerpo para esta página Web, y simplemente sigue yendo y viniendo. Y se podía ver que ni siquiera hemos bajado a mitad de la página y luego al fondo. El tag body tag se cierra en la etiqueta HTML. Entonces ese es el formato básico de ah en la página Web HTML. Y como dije, todas las páginas Web siguen este formato. Esto es muy estándar y una bastante simple. Entonces, ya sabes, usaremos este tipo de plantilla como plantilla de inicio casi siempre y así que eso es genial. Entonces eso es todo por este video. En el siguiente video, vamos a saltar y empezar a aprender elementos HTML individuales 5. HTML todos 4 etiquetas de encabezado: De acuerdo, entonces tenemos lo básico fuera del camino. Ahora solo es cuestión de aprender todas estas etiquetas. Entonces vamos a empezar. Ya tenemos un par de en la pantalla, así que empecemos con esta primera etiqueta H one. Como dije antes, esto significa un encabezado uno. Y es una especie de cosa muy común, sobre todo para, ya sabes, como sitios web que son de blog. Siempre tienen un título de los sitios web top o de noticias con un tú sabes, una historia que tiene un título de top. A menudo usarás este H one y las etiquetas de encabezado son importantes porque hacen que el texto estandarizado sea grande, pero también porque los motores de búsqueda como Google una importancia de signo a una H one tag. Ya sabes, Google sabe que si pones algo en una etiqueta H one, estás diciendo: Oye, Oye, esto es importante. Este es un titular, ya sabes, es el encabezado número uno, el encabezado más importante, y que tipo de usa eso para categorizar sitios web. Entonces también es simplemente genial visualmente, así que hay muchas etiquetas de encabezado de seis, en realidad, si pudieras llamar a ese encabezado o llamar a eso muchos, pero vamos a pasar por ahí. Estos están todos numerados, ¿verdad? Así que vamos sólo. Esto es cabeza o dos y solo copia esto. Entonces si guardas esto y voy a golpear culo de control en mi teclado para guardar su comando s Creo que estás en un Mac o puedes subir aquí y solo tienes que hacer clic en archivo guardar cada vez. Entonces si vuelvo aquí, vemos que esto es cabecera a y te darás cuenta que es un poco más pequeño. ¿ Verdad? Y esa es la designación principal aquí de que cada una es la más grande. H dos es un poco más pequeño, H tres, ligeramente más pequeño todo el camino hacia abajo hasta H seis. Entonces vamos a pasar muy rápidamente por aquí y vamos H tres, este es el encabezado tres en cada cuatro. Esto es cabecera para y h cinco. Este es el encabezado o cinco. Él sabe que estoy abriendo y cerrando cada uno. H seis, este es el encabezado seis. Y lo bonito se trata de sublime. Acabo de poner el soporte en el Ford Slash y automáticamente auto Kerekes a la etiqueta de cierre . No siempre lo hace correctamente. Tienes que poner atención, pero normalmente sabe cuál estás tratando de cerrar, por lo que y guardar esta cabeza de nuevo a nuestra página y haz clic en Recargar y podrías ver arriba sobre todo el camino hacia abajo al encabezado seis. Ahora bien, ¿qué pasa si intentamos hacer un H siete? Esta es la cabecera siete. Guarda esto. Vuelve. Simplemente recibimos un texto normal, ¿verdad? Esto se parece mucho a este texto aquí mismo, porque no hay una etiqueta h siete, así que realmente no pasa nada. En la mayoría de los lenguajes de programación informática. Si haces algo mal, obtienes un gran error enojado en la pantalla o el programa simplemente no funciona en absoluto. HTML es muy indulgente. Ya sabes, acabamos de inventar una etiqueta justo ahora h siete. No existe. Y en lugar de conseguir unerror grande y enojado, error grande y enojado, simplemente decía, uh, simplemente algo que lo ignoró y escupió texto estándar en su lugar. Por lo que HTML como dije, muy indulgente. Y, ah, una de las razones por las que es tan fácil trabajar. Especialmente para principiantes. Se pueden cometer muchos errores y muchas veces salirse con la suya. Entonces esos airean las etiquetas de edad y regresan aquí realmente rápido y sólo una especie de decir, un par de cosas aquí En realidad, casi nunca usarás la mayoría de estas etiquetas. Usarás H uno siempre usarás la edad a veces para, como, subtítulos. Ya sabes, um, me puedo imaginar un escenario donde usarías una etiqueta H tres, pero cada cuatro edad 586 he estado haciendo esto 25 años. Creo que nunca he usado esas etiquetas. Um, es bueno saber que existen, pero discúlpame, simplemente no vas a usarlos a menudo. Entonces eso es todo por este video. En el siguiente video, veremos la etiqueta de párrafo. 6. HTML Todos todos 5 párrafos y respiración de líneas: OK en este video, quiero hablar de la etiqueta de párrafo o etiqueta P. Y la etiqueta P tiene una etiqueta de apertura y una etiqueta de cierre. Y aquí dentro solo hay texto. Ahora, puedes poner cosas en la pantalla por sí solo sin una etiqueta P, pero no quieres. Siempre vas a querer dedo tipo de bloques envueltos de texto en etiquetas P. Realmente ayuda a mantener las cosas organizadas y juntas, y veremos por qué aquí en tan solo un segundo. Pero primero volver a nuestra página aquí, y acabo de pasar a este sitio web labios algún punto com y esto genera texto ficticio. Por lo que necesitamos generar algún texto aquí. Entonces quiero un párrafo así. Y así sólo voy a vivir. Resalta todo esto y copia Control semilla una copia, o puedes hacer clic derecho y seleccionar Copiar. Y esto es sólo algún ficticio de fondo tex con el que podemos jugar mientras estamos aprendiendo. Entonces en lugar de esto, voy a controlar V para pegar, o puedes hacer clic derecho y hacer clic en pegar, y solo voy a pegar en todo este texto. ¿ Verdad? Entonces si guardamos esta cabeza de nuevo a nuestra página y hacemos clic en Recargar. Es preguntar si queríamos traducir trans. No. Por lo que tenemos todo este texto ficticio y se estira todo el camino hasta el de fin a fin de nuestra página. Ahora, con CSS, podríamos darle estilo a esto y podríamos decir, OK, poner esto en un bloque. Eso es solo, ya sabes esto ancho o lo que sea. No vamos a mirar eso ahora, pero solo noten cómo todo esto va juntos y quizá no sea obvio. Pero si vengo aquí abajo y solo pego estas cosas sin etiqueta P y guardo esto, ¿a ver cómo se ve esto? Básicamente se ve este año, Pero tomemos la oferta de etiquetas P aquí y veamos la diferencia. De acuerdo, entonces aquí sólo tenemos a estos párrafos sin etiquetas P. Y si volvemos a cargar esto ahora, está todo aplastado juntos, ¿ves? Y no queremos eso porque aquí claramente tenemos dos párrafos. Queremos que estén separados. Entonces queremos envolverlos siempre en él etiquetas que estoy inventando. Y si fuera realmente, realmente serio, probablemente de ver en Dent No, no, volver. No me está dejando endeudar por alguna razón. De todos modos, Ahí vamos. Sí. Con sangría para que sea un poco más fácil de leer. Um, podrías hacer eso. Entonces y volver aquí y recargar. Y ahora hola. Esta traducción. Ahora, tenemos de nuevo dos párrafos. Tan muy importante separar diferentes bloques de texto. Y esto es importante porque html realmente no entiende el formato. ¿ Verdad? Por lo que podríamos ir Hola por su cuenta. Diferente línea ahí. Mi nombre es John Elder, cierto. Entonces esta cosa está por todo el lugar. Nuestro editor de textos. Si guardamos esto y volvemos aquí y golpeamos recarga, lo pone todo en una línea. HTML hace eso. Ahora. Son etiquetas que podemos anular eso, y hablaremos de eso en breve. Pero por defecto, aunque envuelvas estas cosas en una etiqueta p y guardes esto, no cambia. Todavía pone todo en una línea s así que ten eso en cuenta cuando estés escribiendo código html y deshazte de esto bien, vamos a guardar esto para más adelante. Um, el pedazo de la forma más popular de romper cosas. Pero no siempre quieres hacer eso. Hablaremos de eso un poco más tarde. Pero por lo demás agita esto muy rápido. Entonces si decimos esto, sabemos lo que va a pasar. Va a aplastar a estos dos juntos y no queremos eso. Entonces una cosa que podemos hacer es usar un salto de línea y el salto de línea es simplemente ser son así ahora saltos de línea de una de esas etiquetas que no tienen una abertura y una etiqueta de cierre. Como dije, mayoría de las etiquetas tienen apertura y cierre, pero hay un puñado que son solo una etiqueta y esta es una de ellas, y está designada por esta barra delantera dentro de la etiqueta de apertura. Entonces esto es básicamente ah Cantón Kong de la apertura y la etiqueta de cierre en una sola etiqueta por especie de hacer esta taquigrafía con la barra delantera justo ahí dentro. Ya sabes, cuando tienes una etiqueta abierta normal y una etiqueta cerrada, cierras con esta barra diagonal hacia adelante. Eso es lo que estamos haciendo aquí de todos modos, aunque un salto de línea sólo hace lo que dice. Hace un salto de línea. Entonces aquí se puede decir como que no todo es un párrafo, así que este es el 1er 1 y este es el 2do 1 Se tomó fue el 2do 1 sí arrancó justo aquí , pero ha bajado ahora a esta siguiente línea. Eso es lo que hace la etiqueta de salto de línea, y puedes usar más de un derecho que podemos hacer si queremos una especie de poco espacio entre ahora. Esto funciona y se ve muy similar a la etiqueta P, pero es una especie de mejores prácticas no hacerlo así, sino envolver todo en una etiqueta P. Entonces sólo una especie de tener eso en cuenta. Entonces ese es párrafo que es, uh, salto de línea en el siguiente video. Creo que vamos a ver la pre etiqueta. 7. HTML todos 6 Pre etiqueta: OK en este video, quiero hablar de la pre etiqueta. Y en el último video, encabezamos todo este gobbledygook aquí abajo, y como que lo formateamos aquí. Pero ese formato no se tradujo a la página. Ponía todo en una línea. Ahora, Como dije, podemos anular eso. Y lo podemos hacer con la pre etiqueta. Entonces para hacer eso. En primer lugar, vamos a deshacernos de todo este texto tonto aquí. Y en lugar de envolver esto en una etiqueta p, queremos envolverlo en una pre etiqueta, acuerdo? Y el pre tag tiene un abierto y cerrado, así que la cerramos así, y ahí vamos. Entonces, dentro de la pre etiqueta, mantiene todo este formato lo mejor que puede. Entonces ahora si volvemos aquí, vemos esto. Hola ahí. Mi nombre es John Elder, y es una especie de en el mismo formato general, loco que ponemos en el editor de texto. Ahora bien, a menudo no vas a hacer algo así porque es un poco raro, pero hay usos para la pre etiqueta, ¿ verdad? Um, fuera de juego, puedo pensar en una poesía, por ejemplo. Si quieres poner un poema en tu página web y conoces cada línea que querías en una línea separada , para que sepas que podríamos ir. Nosotros somos los creadores de música. Somos los soñadores de los sueños. Poema tonto, lo sé, preguntándose solo ver rompedores y sentado por desolado, béisbol desolado eso. Vamos a ver tal vez. De acuerdo, entonces si guardamos esto y volvemos aquí, a quien lo sacamos todo, cada línea está en su propia línea y te das cuenta que el texto es un poco diferente, ¿ verdad? Es, ya sabes, un poco más pequeño. Y eso es una especie de lo que hace la pre etiqueta Ahora. De igual manera podríamos simplemente tomar todo esto, aficionarlo y pegarlo de nuevo. Pero en lugar de la pre etiqueta, podríamos usar la etiqueta P. Si guardamos esto, creo que sabemos lo que va a pasar. Todo va a estar en una línea. Eso no es bueno. Pero podrías, ya sabes, hacer algo como, um, um, abofetear un salto de línea en cada uno al final de cada línea, ¿ verdad? Eso pondrá cada línea en su propia línea. Y ese tipo de funciona. Pero nota la diferencia en el impuesto. Este es una especie de texto normal. Um, y esto es, ya sabes, un poco más pequeño, extraño o con aspecto de texto. Ahora puedes anular eso. Este extraño tamaño de texto con CSS. Como se dijo, no vamos a meternos en CSS y su curso en absoluto. Pero así es como harías eso. Entonces esa es la preetiqueta. Um, bastante simple. No es una etiqueta muy común. No lo vas a usar todo tan a menudo, pero es Sí tiene sus usos de vez en cuando. Entonces en el siguiente video, vamos a ver la etiqueta de cotización. 8. HTML todos 7 BlockQuote: Está bien. Este video del que quiero hablar de cotizaciones y cotizaciones fue muy común, sobre todo para, como, como, sitios web y artículos de noticias y publicaciones en bloque. A menudo citas cosas. Quieres que esas cotizaciones estén alrededor de tu cotización. Y se podría hacer eso con algo llamado el bloque Cotización etiqueta. Y vamos a bloquear cotización. mejor no queremos terminarlo. Ahí vas. Um, bien. Entonces me gustan otras cotizaciones. Cuenta con unas etiquetas abiertas y cerradas. Entonces vamos a guardar esto y echar un vistazo y ver cómo se ve aquí y otra vez. Se va todo en una sola pantalla. Están todos en una, uh, línea aquí. No queremos eso para que podamos anidar dentro de una cuadra. Cotizar nuestra predicación ag. Está bien, y no tipo. Ahora, cuando anidan, quieren cerrar lo más cercano. Entonces, ya sabes, lo abrimos y lo cerramos. Realmente no quieres hacer algo como esto, verdad? Correcto. Esto está mal. O incluso esto está mal, ¿verdad? Probablemente seguirá funcionando. Ahí vamos. Pero quieres cerrar lo más cercano. Entonces, uh, el final de esto la etiqueta más cercana es el preimpuesto. Nosotros lo cerramos. El siguiente más cercano es la cotización de bloque. Entonces cerramos eso. Entonces si dices esto y vuelves aquí, boom, obtenemos lo mismo. Ahora no hay comillas, comillas reales alrededor de esta cosa. Pero eso es sólo porque no hemos designado comillas en el CSS. ¿ Y tú harías eso? Dije que empezó. Este no es un curso en CSS, así que no vamos a hablar de eso. Entonces esa es la cotización de bloque. Ahora, hay otras formas de citar las cosas. Um, podríamos ir. El lema de Kuta me dot com es. Y si solo tienes una pequeña cotización, puedes usar esto. Apenas la etiqueta de taco. Um, aprende a codificar en kota me dot com. Está bien. Para que pudieras hacer algo así. Y las comillas en realidad sí aparecen para esta más pequeña. Entonces eso es algo genial, y te darás cuenta de que lo pone todo en una sola línea, que es lo que queremos en esta instancia en particular, Um, así que esas grabaciones marcan esas cotizaciones aéreas, debo decir, y cotizacion negra negra y la pequeña que o qué? Quieres mirar su cosa 01 podría mencionar que puedes poner una cita aquí. Esto es un atributo, ¿verdad? Hablamos de atributos muy brevemente antes en el interior del horno, html out elemento. Se pueden tener atributos. Y uno de los atributos son los atributos de citación. Entonces, ya sabes, podríamos hacer algo como Arthur. Oh, Sean en el mar en yo deletreo eso, pero algunos como eso o a menudo verás, um , como, aquí abajo, podríamos ir. Sitio es igual a, um, http o forward Kotomi dot com. Correcto. Entonces salvamos esto, regresamos aquí y golpeamos. Recargar. A menudo con atributos, realidad no los puedes ver. Tú No hay nada. Ya sabes, aunque flotemos son ratón por aquí. Pequeña caja de citas no aparece ni nada, pero esto es bueno para, como, como, motores de búsqueda. Si Google escanea esta cosa cuando Google escanea un sitio web, miran la fuente de la página y se llevan toda esa información. Y, uh, entonces podrían hacer algo con él. Si quieres poner Citación, um, um, eso es sólo una especie de cómo funciona eso. Por lo que en el siguiente video, comenzaremos a mirar enlaces 9. HTML Every: 8 enlaces: OK en este video. Yo quiero hablar de enlaces. Y los enlaces son una parte importante de cualquier sitio web. Si volvemos aquí, y volvamos a, digamos que los enlaces Kotomi dot com son como estas cosas aquí arriba, ¿ verdad? Se hace clic en un enlace, va a otra página, o va a algún sitio web externo, esos enlaces aéreos y,ya sabes, ya sabes, enlaces están por todas partes en html. Uh, solo, ya sabes, tan común como puedas conseguir nuestra página de vuelta aquí. Muy bien, Entonces, ¿cómo lo hacemos? Estos enlaces son súper fáciles. Acabamos de utilizar la etiqueta A y enlaza la etiqueta A tiene una etiqueta de cierre hacia adelante slash a Ahora, dentro de aquí, necesitamos un atributo. Y los atributos del enlace es h r e f no saben realmente por qué eso no es h r e f significa ref . Um, sí, no tengo idea de qué significa eso, pero dentro de aquí, pones donde quieras que esto apunte. Entonces si quieres un apuntado a un sitio web externo, podríamos ir http o colon para slash ford slash um Kotomi dot com, por ejemplo. Ahora, dentro, aquí es donde va tu texto de enlace, así que solo podríamos escribir kodori dot com o simplemente recubierto. ¿ Verdad? Entonces esto es lo que va a aparecer en la página web. Entonces si guardas esto, vuelve aquí y toca recarga, vemos me recubierto. Si hacemos clic en él, va a Kotomi. Muy cool. Ahora, también podrías hacer enlaces internos si tienes tu propia página web. Entonces, por ejemplo, tenemos Estamos en la página dot html. Podríamos tener, ya sabes, página dos puntos HTM. Ah, eso está perfectamente bien para en nuestro caso, no tenemos una página dos, así que si hacemos click en esto, obtenemos un archivo no encontrado. Pero si tuviéramos una página a ella, iríamos a página hacer bien? Entonces, ¿muy cool? Um, hay otros atributos o para enlaces. Um, se podría poner de hecho, vamos a tomar esto de vuelta se van. Otro atributo es target. Y probémoslo nuevo. Creo que eso es lo que es. Ha pasado un tiempo desde que he hecho un Sí. Ves, aparece una nueva una nueva pestaña, ¿verdad? Entonces si quieres que tu enlace se abra en una pestaña nueva del navegador Web, solo tienes que usar esos atributos que es objetivo igual a nuevos. Bastante cool. Ahora dentro de un Aquí tenemos texto, pero también se puede vincular obviamente a imágenes. Deshacernos de este objetivo. Guarda esto. Vuelve y golpea. Recargar. Ir a este sitio web, por ejemplo. Aquí arriba. Correcto. Este es un logotipo. Si hago clic en él, va a la página web. Um, esta imagen de aquí. Si hago clic en esto, va a esta página web. Por lo que aún no hemos hablado de imágenes. Hablaremos de esos en el próximo video, pero lo mismo. Acabas de poner tu etiqueta de imagen aquí mismo. Rápido en una etiqueta A y se convierte en enlace Herbal. Viene clickable. Básicamente. Entonces eso es todo lo que hay a los enlaces. Muy sencillo. Recuerda la etiqueta A H R E f es los atributos de enlace. Nadie recuerda lo que h r e f significa, pero así se hace un enlace. En el siguiente video, veremos imágenes 10. HTML Cada 9 imágenes: OK en este video, quiero hablar de imágenes e imágenes o súper simple. Simplemente usamos una etiqueta de imagen y la etiqueta de imagen es Yo soy G S R C. Ahora las etiquetas de imagen son otra de esas etiquetas que no tienen etiqueta de cierre. Y normalmente cuando eso sucede, hacemos esto. No tenemos que hacer eso. Se puede. Eso es válido, html si quieres, pero no tienes que hacerlo. Por lo que el elemento HTML es I m G. Esta es la etiqueta de imagen. Dentro de eso. Tenemos un atributo llamado SRC y SST. SRC significa fuente. Entonces quieres apuntar esto también, Cualquiera que sea la fuente de tus imágenes. Entonces tengo esta foto de mi perro Aspen justo aquí en mi escritorio. Y como está en el mismo directorio, podemos simplemente escribir el nombre del mismo. Es un archivo PNG, y eso es todo. Um, si tuviéramos esto en un directorio especial llamado Imágenes, ya sabes, podríamos hacer algo así, verdad? Si esto está sentado en sitios web de 1/3 fiesta en algún lugar como un cdn de algún tipo administración de entrega de contenido A a B s objetivos, necesito un B s o Cloudflare o algo así, Podrías ir, ya sabes, Kotomi dot com slash imágenes slash aspen dot PNG. Está bien, entonces Pero como dije, estamos haciendo esto localmente en nuestra computadora, y ese archivo solo está sentado en mi escritorio así que podríamos simplemente guardar esto y volver a nuestra página y hacer clic, Recargar y boom. Aquí está la imagen. Ahora bien, esta es una imagen gigantesca, ¿no? Entonces no lo hace Es amable o incluso difícil verlo aunque nos desplazemos. Esta es aspirina. Ella es una bebé. Husky, nena, Ella tiene, no sé, 18 meses de edad. A lo mejor en esta imagen, algo así. Ella es un huracán, así que Ok, esto es genial, pero esto es algo inútil, ¿ verdad? Esto es gigantesco. Ahora, normalmente, podrías editar la imagen y algún tipo de, ya sabes, photoshop o gimp o algo así y hacerla más pequeña. O podría usar otro atributo, que es la altura en el con. Entonces vamos altura igual y con iguales. Y podríamos simplemente, ya sabes, hacer algo para que pudiéramos ir, um, 500 por, um, 700. No lo sé. Ver cómo se ve esto guarde esto, y eso se ve un poco mejor, pero obviamente aparece en la pantalla. Pero la relación de aspecto podría no ser correcta para esta imagen, por lo que podríamos obtener distorsiones. Y lo que quiero decir con eso es, por instancia, por instancia, en lugar de 700 ¿Y si escogí ah 900? Bueno, lo hizo automáticamente. Para nosotros. Lo está anulando. Pero una forma de asegurarse de obtener la relación de aspecto correcta cada vez es simplemente usar uno de estos. Entonces si solo usamos con de 900 esto mantendrá intacta la relación de aspecto original de la imagen . Si no sabes qué son las cuestiones de aspecto, esa es la dimensión real. El asunto es que originalmente mantendrá intactos esos y hará que se vea bien. Entonces eso es genial. Una cosa más sobre las imágenes. Ahí hay otro atributo, y ese es el todo texto A L T. Y esto es sólo Bueno, vamos a jugar con esto. Vámonos. Uh, saluda a Aspen. Guarda esto de nuevo aquí y golpea recarga. Y como la mayoría que conoces, atributos, nada realmente es visible. All tag en realidad no aparece de ninguna manera forma o forma. Pero esto es bueno para el buscador de motores de búsqueda, especialmente Google. Amo a todas las etiquetas. Si quieres que salga una cosita, puedes usar la etiqueta de título. Guarda esto y golpea. Recargar. Ahora, si pasamos por ahí, conseguimos una cajita que aparece que dice: Saluda a Aspen. Entonces eso es algo genial. Entonces esas son imágenes? Um, Como dije antes, podemos convertir esto en un enlace para que pudiéramos ir un horrible igual. Http. Kotomi dot com y luego algo como esto, correcto. Si decimos esto aquí atrás en hit recarga No, ya ves, hacemos click en él. Movimiento va a Kotomi dot com. Entonces es tan fácil hacer enlaces a partir de imágenes o hacer que las imágenes se vinculen a base de hierbas. Si quieres decirlo así, um, um, bastante guay. Entonces esas imágenes de aire, esas imágenes de enlace aéreo. En el siguiente video, comenzaremos a mirar mesas 11. HTML todos 10 listas: OK en este video. Yo quiero hablar de listas Ahora. Vamos a hablar de mesas en este video, pero creo que voy a guardar eso para el próximo. El video es un poco más avanzado, y antes de que hagamos eso, quiero deslizarme y enumerar. Por lo que las listas son súper importantes, mucho más importantes de lo que pensarías. Y básicamente, ¿qué es una lista de listas es solo una lista con viñetas, verdad? Por lo que hay principalmente dos tipos de lista. Hay listas ordenadas y una nueva lista ordenada, y una lista A Norden es igual que un punto al lado de cada elemento. Son solo puntos de bala ahí, poco ordinarios. Tan sólo una lista. Una lista ordenada es, ya sabes, como 12345 Están en orden. Entonces, ¿cómo hacemos estas cosas? Bueno, vamos a saltar aquí y vamos a crear, um, mi lista poco ordinaria y pongamos no tenemos que poner nada aquí, así que para crear una lista, solo empezamos contigo. L y eso significa Anno lista ordenada, y podemos cerrarla con la etiqueta de cierre ahora, dentro de aquí, dentro de aquí, cada ítem de la lista es una L. I etiqueta derecho l I y básicamente cada línea que quieras se convierte en un objeto aliado. Entonces solo voy a copiar esto. Y 2345 Así que esto es, um, uh, tareas para hoy. Entonces necesitamos pasear al perro, lavar la motocicleta. Está muy, muy sucio por el momento. Vives en el polvo del desierto, siempre. A ver. Lee un libro, ve qué más necesitamos para hacer la lavandería y luego comprar abarrotes. De acuerdo, entonces si guardamos esta cabeza de nuevo por aquí y hacemos clic en recargar, conseguimos este bonito poquito en lista ordenada y te das cuenta que hay pequeños puntos de bala a continuación, cada uno muy cool y muy útil. Ahora tú lo crees ¿Qué? Bueno, en cada demo, usarás balas para muchas cosas diferentes. Y eso es porque cuando agregas dos listas CSS, puedes hacer todo tipo de cosas raras. Muchas veces cuando ves como un bar de gallo en la parte superior de ah sitio web, ya sabes, como, um, um, volver a mi sitio web, esta barra de gallo de la parte superior de aquí. No recuerdo, pero creo que esto se crea con una nueva lista de pedidos y luego con CSS. Acabamos de decirle al navegador que ignore el pequeño punto Puedes hacerlo invisible tipo de cosa, un conjunto de cosas muy comunes para cosas como esa y solo un montón de otras cosas. A medida que comienzas a llegar a ser más avanzado con el desarrollo Web, solo utilizarás listas. Ah, mucho, es Es raro porque sabes quién usa listas, pero, um, es verdad. Y como dije, con CSS debilita el estilo, estos puntos, podríamos hacer que los puntos desaparezcan por completo. Nosotros también podemos cambiarlos. Pequeños diamantes. Podemos cambiarlos por lo que queramos. ¿ En serio? Y ah, eso es bastante guay. Entonces esas son listas de un nórdico. Hagamos una lista ordenada. Por lo que mi lista ordenada. Y para hacer eso, nos acabamos de cambiar de una U L a una ol o significa lista ordenada, ¿no? Súper simple. Entonces guardamos esto, regresamos aquí y damos clic en Recargar cuando veamos 12345 y notarás que el navegador puso estos números en sí mismo, ¿ verdad? No teníamos que, ya sabes, poner uno siguiente. Cada 123 etcétera. Um, lo hizo todo por nosotros. Y también te darás cuenta, uh, hay, ya sabes, esto un poco de formateo aquí. Correcto. Aquí es donde está nuestro texto Aquí. Todas estas cosas han sido sangradas un poco. Y eso es lo que en o un orden de lista Doran ordenó hará. Entonces ahora está bastante guay. Como dije, puedes cambiar todo tipo de cosas sobre estas con CSS. Uh, no vamos a meternos en eso, pero puedes hacer una especie de atajo por aquí usando los atributos de tipo. Entonces si vamos en lista ordenada, um, um, tipo es igual a una mayúscula. Un traje que parece boom. Ahora se vuelve de 12345 fui a un B C d e. derecha. Entonces eso es algo interesante si vamos a minúsculas A, obtenemos letras minúsculas que van a ir. Um, podemos irnos. A ver. Aquí tienes. Tipo uno. Volverían a los números. Esa es una especie de incumplimiento. Um, podemos dio Este es un divertido. Debilita hacer capital. Yo obtienes números romanos. ¿ Recuerdas? Números romanos de primaria? I, I v y V um Del mismo modo Debilitar Hacer minúscula. Veo esto aquí atrás y golpea Reload. Obtenemos números romanos en minúscula. Muy cool. Ahora también podemos hacer anidación de estas cosas. Entonces vamos a deshacernos de esto y volvamos a cambiar a una lista inalterada. Y así guardamos esto realmente rápido y solo mirarlo, consigue nuestra lista regular honrada. Pero digamos que queremos añadir un poco de algo. Entonces vamos a crear otra lista dentro de aquí para comprar abarrotes. Y sólo para mostrarte una especie de cómo se ve esto, voy a copiar toda esta línea y ponerla una especie de aquí arriba. Por lo que está dentro de nuestra lista. Y así para hacer eso, nos gusta esto y dentro de esto l me debilito, solo crear una lista entera más. Vamos a crear una lista ordenada. Y luego dentro de eso, queremos, um, hamburguesa. Queremos, um, queso. Queremos ah, bollos. Y queremos no sé, naranja Usa jugo de naranja raro con hamburguesas y luego podemos cerrar esto. Entonces ya ves, esto está anidado dentro de esta una lista nórdica. Entonces, ¿qué aspecto tiene esto? Luna, Acabamos de conseguir 1234 dentro de aquí adentro. Ya sabes, en este ítem de lista tan muy, muy cool y ah, super útil. Entonces creo que eso es todo para listas. En el siguiente video, comenzaremos a mirar mesas 12. HTML todos 11 tablas: OK en este video, quiero hablar de tablas y tablas son una especie de tema HTML más avanzado. Pero hay algo que vas a usar, probablemente para siempre. Um, son sólo una especie de siempre utilizados en HTM. Ah, y aquí he creado una mesa muy básica. Correcto. Entonces tenemos una tabla es básicamente solo filas y columnas. Entonces esto es una fila. Estos son nuestros labios. Esto es una fila. Esto es una fila, Ya sabes que la rosa va de izquierda a derecha. Las columnas suben y bajan. Color tan favorito. Esta es una dirección de correo electrónico de columna. Este es un nombre de columna. Esta es una columna. Entonces cuando estás pensando en tablas, básicamente solo estás pensando en filas y columnas. Entonces, ¿cómo construimos esta cosa? Bueno, no es tan difícil. Un poco complicado, pero no tan mal empieza una mesa. Ya he escrito el código, así que simplemente pasaremos por esto. Ahora Una tabla comienza con una etiqueta de tabla y se puede ver la etiqueta de tabla se cierra. Y dentro de aquí, le he dado un estilo con un con de 50%. Ahora, técnicamente, esto es probablemente algo del tipo CSS. CSS es hojas de estilo en cascada. Lo he hecho varias veces a lo largo de este curso, Um pero para este caso, acabo de tener un poco de CSS. Hablaremos de esto. Probablemente el próximo par de videos, pero le he dado un con del 50%. Entonces si volvemos aquí, se puede ver que va a mitad de camino a través de la pantalla aquí. Eso es 50%. Si dejara eso apagado, se estiraría todo el camino a través de la pantalla. Y no tengo tantos datos aquí, que muchas columnas, así que eso se vería un poco raro. Entonces a continuación, Como dije, las tablas tienen filas y columnas. Y para crear una fila, usa una etiqueta de fila de tabla, una etiqueta TR aquí mismo para crear una columna que crees, ah, creó la etiqueta T D, que significa datos de tabla. Ahora, Tedy Tag entra dentro de una etiqueta TR, y hablaremos de esto en tan solo un segundo. Entonces, solo pasemos por aquí. Echemos un vistazo a este primer bit aquí mismo. He creado una fila de tabla de filas y he establecido una línea a la izquierda. Um, si nos quitamos esto y lo guardamos y golpeamos la recarga, se podría ver que todos estos encabezados se bopped, así que quiero que se alineen a la izquierda. Entonces me lo acabo de dar en la línea izquierda y se puede hacer una línea a la izquierda. Puedes hacer una línea, ¿verdad? Podrías hacer un centro de línea. Creo que esos son más o menos así. Entonces guarde eso. Ahora nosotros esto tenemos estas th etiquetas abiertas y cierran. ¿ Y qué son estos? Bueno, th significa cabeza de mesa y eso es justo lo que suena. Es Es este tipo de cabeza o una fila. Se podían ver los colores en negrita, ligeramente diferentes, y básicamente, este solo tipo de nombres, las diferentes columnas. No tienes que tener esto. Podrías dejar esto apagado. De hecho, si hacemos eso, sacamos toda esta sección de TR y lo guardamos. Esto sigue siendo completamente válido. Simplemente no tenemos los lindos encabezados de mesa para explicar qué es tan importante este dato para usar tus etiquetas th. Y como dije, cada fila está dentro de una etiqueta TR. Todos los datos de una fila van dentro de una etiqueta tr. Por lo que de la apertura TR y el tr de cierre todo aquí es una columna. Entonces tenemos tres columnas. Entonces cerramos esto. Ahora si queremos otra fila debajo de eso, creamos otra etiqueta TR y puedes ver abrir y cerrar. Y dentro de esta etiqueta queremos. Necesitamos tres columnas porque tenemos tres columnas de encabezado de tabla, ¿ verdad? Por lo que cada uno de estos corresponde a un th así que el 1er 1 es el 1er 1 aquí. Nombre. El 2do 1 es el 2do 1 aquí dirección de correo electrónico, y el 3er 1 es el 3er 1 Así que tienen que igualar, ¿ verdad? Si nosotros, por ejemplo, creamos por ejemplo, otra etiqueta TD y solo escribimos algo y guardamos esto, puede ver que todo se echa de golpe, ¿ verdad? Porque aquí no hay una columna extra, y eso simplemente se ve raro. Todo se juntan. Es solo que es raro. Entonces debes asegurarte de que en cada t que creas tenga el mismo número de TD's y hay algunas, um, excepciones a eso y hablaremos de eso. A lo mejor el siguiente video, creo. Pero en su mayor parte, mantenerlos todos consistentes. Entonces guarde esto Así que tenemos este TR tags la fila de la tabla dentro, tenemos TV s T D stands para los datos de la tabla son básicamente columnas. Y así tenemos un solo camino, dirección de correo electrónico de John John y el color John's Forever. Si queremos otra fila debajo de eso, sólo tenemos que crear un er entero y llenarlo con los mismos datos. Lo mismo si queremos otra fila después de eso. Entonces tenemos tres filas aquí y luego termina. Entonces tenemos nuestra etiqueta de mesa de cierre y echando un vistazo a esto de nuevo a quien sólo tenemos justo eso. Entonces eso es realmente todo lo que hay a las mesas. Um, ahora, esta es una mesa muy básica. Es de aspecto muy sencillo. No hay estilo de ningún tipo. Se puede. Puedes darle estilo a las mesas de un billón de maneras diferentes, y probablemente veas rectas. Ya sabes, raya bordes Rose, diferentes colores. Y no vamos a hablar de eso en este video ni en el siguiente video. Eso es algo de CSS, pero puedes hacer algún tipo de cosas muy básicas como aparecer para la tabla. Queremos darle a esto una frontera básica. Vete tú. Frontera es igual a uno ahora, Como dijiste, normalmente harías CSS por esto y verás por qué aquí en este momento. Si salvamos este boom, conseguimos esta frontera. Pero ya sabes, eso es bastante feo. Y puedes darle estilo a esto un poco con HTML. Pero no te voy a mostrar cómo, porque es una especie de cosa de identificación en desuso. Nunca vas a hacer eso. Siempre vas a usar CSS. En realidad no vamos a hablar de CSS, así que no hay mucho más que decir al respecto, pero sólo una especie de entender que puedes cambiar las cosas en una mesa, hacer que se vea todo tipo de formas diferentes, y nosotros podría hablar de ello un poco más más adelante. Pero por ahora, sólo lo dejaremos así. Entonces, um, ¿qué más podemos dio mucho? De todo lo que quiero hablar en este video En el siguiente video, hablaremos de un par de temas de mesa un poco más avanzados Call span y Rose span y, uh, uh, ver de qué se trata todo eso. Entonces eso será en el próximo video 13. HTML todos 12 tablas avanzadas: OK en este video, quiero hablar de un par de temas de mesa más avanzados. Hicimos cosas básicas de mesa en el último video de este video. Yo quiero hablar de Roe que abarca el lapso de llamadas. Entonces aquí tenemos sólo tipo básico de rosa y columnas, ¿ verdad? Pero quizá quieras que ciertos campos se estiren. Por ejemplo, todas las columnas son todas las vialidades. Entonces, ¿cómo se hace eso? Lo que vamos a ver en este video. Entonces volvamos aquí. Y primero, digamos que queremos un encabezado por toda la parte superior de esto y queremos que todo estire sobre las tres columnas. Entonces eso es bastante sencillo. Acabamos de volver aquí y queremos esto arriba justo aquí lo primero. Entonces vamos a crear un nuevo TR abrir y cerrar la etiqueta y vamos a crear un th y queremos que abarque tres columnas. Entonces usamos el lapso de llamadas y dijimos eso igual a tres y cerramos eso Y digamos que solo queríamos decir, um, mi mesa, correcto. Así que vamos a guardar esto y echar un vistazo cuando lo tengamos estirado todo el camino y te des cuenta que aquí no hay, um, líneas en el medio. Al igual que para todos los demás. Ahora mismo, podemos ver esto muy claramente porque todavía tenemos esta especie de bobo, um, frontera. Entonces si saco esto y guardo esto, se vuelve un poco más difícil de decir. Pero puedo tirar un poco de color aquí, así que, um, vamos. color BG es igual, y yo sólo voy a dar esto, ah, una especie de color gris. Guarda esto. Y boom. Ahora llegamos, sabes, se extiende por todo el camino a través de esa escuela. Como dije, usarás normalmente cosas de color como esta usando CSS en algún momento. Sólo una especie de usar una especie de vieja forma de retroceso. Solíamos hacerlo de esta manera antes de que se inventara el CSS. Eso te dirá cuánto tiempo hace. Es decir, hace 20 años, solía hacerlo, um, um, así que no te recomiendo que lo hagas de esa manera. Volvamos a poner esta frontera aquí muy rápido. Echa un vistazo. De acuerdo, así que eso es lapso de llamadas. También tenemos un lapso de fila, así que volvamos aquí y digamos aquí mismo en nuestro encabezado principal queremos otro cabezal de mesa y solo llamemos a estos datos y queremos estirar esto alrededor. Simplemente no lo voy a estirar. Tres filas, creo. Echa un vistazo aquí. Por lo que 1234 filas. Queremos que esto estire todas las carreteras aquí. Entonces, ¿cómo hacemos eso? Bueno, queremos estirar. Queríamos lapso surgió. Utilizamos el lapso de filas. Um y queremos que esto sea igual a cuatro. Ahora, esto nos dará una especie de problema ah. Porque ahora esto no se extiende por todo el camino porque hemos agregado otra columna. ¿ Verdad? Entonces también necesitamos ajustar este arriba para llamar a span cuatro si queríamos estirar todo el camino, ¿ verdad? El boom que arregla eso. Ahora, finalmente, esta cosa de los datos está aplastada a la izquierda. Eso también podemos cambiar. Al igual que lo hicimos antes. Con este alinear, también podemos ver, simplemente añadiendo una línea igual Pero digamos centro, guarde esto. Regresar No funcionó. ¿ Qué hice? No lo guardes. Llamada abarcó cuatro. Alinear igual centro. Guardar no está funcionando. Debería funcionar. Ah, área equivocada Eso es lo que queríamos en lo de los datos. Entonces Ok, entonces la línea es igual a centro ya. Café esta mañana. Está bien, Boom. Ahora los datos se embellecen al centro, y eso se ve mucho más bonito. Entonces estos fueron algunos temas básicos, bueno, no básicos, bueno, no básicos, más avanzados de mesa. Y puedes, ya sabes, mezclar y combinar este todo tipo de formas diferentes. Podríamos agregar color a éste si quisiéramos. No vamos a hacerlo, pero sí, esas son tablas básicas en el siguiente video. He estado hablando de CSS y de cómo no vamos a aprender CSS. Hay un par de cosas que necesitamos aprender sobre CSS. Entonces vamos a ver eso en el siguiente video. Básicamente te voy a mostrar que no vamos a aprender CSS. Solo te voy a mostrar cómo usar CSS. Cómo incorporarlo a una página HTML. Definitivamente necesitas saber eso. Entonces veremos eso en el próximo video 14. HTML todos 13 CSS: OK en este video. Quiero hablar de CSS. Ahora, sé que te he estado diciendo a lo largo de este curso no vamos a lidiar con CSS. Y no estamos realmente no te voy a enseñar CSS. Sólo voy a mostrarles las tres formas principales en que podemos integrar CSS en una página web y esto es importante. En realidad sí necesitas saber esto. Entonces hay tres maneras y vamos a pasar por El primer camino está en línea y ya hemos mirado un poco esto. Vemos justo aquí en nuestra tabla, tenemos estos atributos de estilo y luego esto y luego cerrando comillas. Esto está en la línea CSS. Hemos encontrado en elemento html y dentro de ella en línea. Hemos agregado CSS, y se puede hacer esto prácticamente a cualquier elemento html de la CIA. Aquí tienes nuestra H one tag. Podríamos ir con estilo y luego solo escribir algo de CSS color azul intente y tal vez deletrearlo bien. Uh, y se podía ver CSS suele ser una cosa a la izquierda con colon, y luego pienso a la derecha con punto y coma. Entonces estas son las clases de cómo se ven a menudo CSS. Entonces si guardamos esto, vuelve aquí y toca a Reload. ¡ Boom! Esto se vuelve azul. Muy, muy sencillo. ¿ Verdad? Para que pudiéramos hacer eso. Deshazte de esto por ahora. Um, también puedes hacerlo. Um, vamos a ver. No sé cómo quiero decir esto, um, um, internamente, supongo. Y internamente no confundirse con en línea es que aparece en la sección de cabecera de nuestro documento. Podemos simplemente crear una etiqueta de estilo y se abre y cierra y cualquier cosa dentro de aquí, esto es solo que escribes CSS aquí mismo. Ahora, uh, aquí, voy a escribir algunos, y hablaremos de esto en tan solo un segundo. Pero se podía ver el problema aquí. Yo sólo he hecho un poquito, y ya está empezando a desordenarse aquí arriba. Cuando veas evaluar, utilizas páginas y páginas de la misma. Quiero decir mucho. Y no quieres poner todo eso en tu cabeza Documento en cada página de tu página web, ¿sabes? Además, si tienes 1000 páginas en tu sitio web, tienes que hacer 1000 veces con CSS, y no quieres hacer eso Así que no es una especie de método ah que quieres usar a menos tengas solo una cosita que necesitas dio. Entonces aquí, um acaba de escribir algo de CSS rápido real Vamos a darle estilo a nuestra mesa. El cuadro, esa etiqueta th y la etiqueta TD. Yo quiero darle a esto un borde de uno puede ponerse sólido, hacerlo negro, y luego colapsarlo. Y por colapso, lo pudimos ver una especie de luce levantado aquí. Casi parece que tiene un tridimensional. Ya sabes, hay dos ya sabes, hay un poco como una frontera, ¿ verdad? Se puede ver algo así como se ve diferente. El colapso se deshace de eso. Nosotros sólo queremos resolver de línea. Voy a bajar aquí a nuestra mesa. Voy a deshacerme de esta etiqueta fronteriza que ponemos ahí. Guardemos esto y echemos un vistazo y veamos cómo se ve esto. Boom. Ahora se ve algo más elegante, un poco más moderno, y eso siempre es CSS. Ahora, eso es todo. Internalizado está todo en la propia página. Y sigamos adelante. Voy a copiar esto y a deshacerme de él. Normalmente no quieres hacer eso. Como dije, a menos que sea un poquito. Tan solo un pequeño fragmento de código CSS normalmente, lo que vas a querer dio y esta es una especie de la forma principal de hacer CSS es externa, y por externa, quiero decir, queremos crear una hoja de estilo CSS externamente y luego enlazada a ella. Entonces voy a venir aquí a archivar nuevo y digamos sólo este archivo guardar como, y lo vamos a guardar en el escritorio mismo directorio donde guardamos nuestra página. Y solo voy a llamar a este estilo dot CSS En todos los archivos CSS terminando dot CSS significa hojas de estilo en cascada. A nosotros no nos importa. Entonces quiero pegar en ese mismo código de tabla aquí mismo, y voy a guardar esto ahora. Si volvemos aquí, no pasa nada porque hemos creado el archivo. Hemos puesto nuestro CSS CSN en él, pero no lo hemos vinculado de nuevo a nuestra página web real. Entonces, ¿cómo hacemos eso? Bueno, nuevo, vuelta en la sección de cabeza de nuestra página aquí, realmente no importa donde solo necesitamos una etiqueta CSS. Por lo que este carril de enlace y luego el nombre de la misma es hoja de estilo. Y luego Herath, esto es justo como un enlace. Al igual que cuando hablamos de enlaces antes. Queremos que esto apunte a donde esté este archivo. Está en el mismo directorio. Por lo que podríamos simplemente escribir estilo este estilo de ley que CSS lo que sea. Nombramos este archivo. ¿ Verdad? Entonces dices que esto vuelve aquí y ahora está ligado. Si golpeamos recarga. Boom, Podemos ver eso, Um que CSS tan genial. Um, ya sabes, podemos ir h uno como lo hicimos antes en linea color azul, ¿ verdad? Eso lo hacemos aquí mismo. Y luego si golpeamos recargar a quien esto se pone azul, ya sabes, te das cuenta que no cambiamos la etiqueta h one en absoluto. Por eso esto es tan guay. CSS y HTML trabajan juntos, pero no lo son. No tienes que hacer ningún cambio en tu HTML para que el CSS tenga efecto , lo cual es realmente genial. Por lo que solo agregas este enlace CSS en la parte superior de tu página en la sección de cabecera y eso es todo. Entonces ya ves, esto es CSS. Es posible que te familiarices con ello. No voy a entrar en ningún detalle más sobre CSS, podría dar todo un curso sobre CSS. De hecho, lo he hecho en el pasado, uh y, uh, simplemente lo dejaremos en eso por la mayor parte de la razón por la que hago eso es porque, para ser completamente honesto, nadie escribe CSS ya. Hay tantos marcos CSS en los que puedes simplemente descargarlo, abofetearlo justo en vinculado a él y boom. Funciona que nadie escribe. CSS CSS es un dolor. Realmente lo es. Es muy complicado, ya sabes. Históricamente, CSS todo funciona un poco diferente en cada versión de un navegador. Para que sepas que tienes Firefox. Tienes cromo. Tienes Internet Explorer tiene hasta ahora tienes decenas de otros navegadores, y todos usan CSS un poco diferente. Por lo que tenías que hacer una versión para Firefox. Aversión por aversión cromada para safari. Con el tiempo, esos empezaron a unificarse un poco. Pero todavía hay pequeñas cosas que retoques y cosas que tienes que hacer para diferentes navegadores, y es solo un dolor, y a nadie le gusta hacerlo. Es por eso que tenemos marcos CSS que solo puedes copiar pegado boom. Funciona y empezaremos a hablar de esos en el siguiente video. Vamos a ver el marco bootstrap, que es con mucho el más popular por ahí. Y sí, así que eso es todo para CSS en este video. En el siguiente video, veremos Bootstrap. 15. HTML todos 14 Introducción a Bootstrap: De acuerdo, así que hemos pasado por la mayoría de los principales elementos HTML ahora hay un par de cosas flecos aquí y allá. No hablamos, pero en general estas cosas de las que hablé en la primera mitad de este curso, hasta ahora te va a conseguir, como, como, 85 90% de lo que alguna vez vas a hacer con HTML. El resto es sólo una especie de agregar un estilo con CSS, y realmente no vamos a meternos en eso en este curso. En lo que nos vamos a meter es en el uso de un marco CSS. Ahora, no te voy a enseñar CSS, pero te voy a mostrar cómo usar cómo integrar un framework CSS en tu documento HTML y el que vamos a ver por dónde empezar a mirarlo ahora mismo se llama bootstrap . Entonces si tuvieras más para conseguir bootstrap dot com, aquí está. Es completamente gratis. Esto es creado por algunos tipos en Twitter y no sé, tal vez hace 10 años o así y se volvió tan masivamente popular, los chicos renunciaron a Twitter y simplemente hacen esto a tiempo completo ahora y algo así lo hilan un twitter. No creo que Twitter sea dueño. Esto es de código abierto, pero estamos en la versión 4.1 en este momento. Y si la versión es diferente para cuando vio este curso, está bien. Realmente no importa. A menudo puedes pasar por versiones anteriores si quieres usar la que estoy usando específicamente en este curso, pero realmente no importa. Um, así que echemos un vistazo a esto. Recorta la documentación y ya está, y nos meteremos en todo esto en un rato. Te mostraré cómo lo instala el dedo del pie y cómo usarlo y cosas así. Pero echemos un vistazo por aquí y bajemos a los componentes y solo veamos algunas de las cosas que puedes hacer. Entonces justo al bate, conseguimos esta gran lista de cosas, ¿ verdad? Por lo que aquí estas alertas aéreas. Si quieres una alerta en tu página, aquí tienes el código. Todo lo que tienes que hacer es copiar esto pegado en tu página y boom, tienes esa alerta. Muy cool. Um, botones. Si te gustan los botones, quieres botones de diferentes colores. Aquí está el código para todo eso. Una vez instalado esto, debes tener que copiar y pegar esto y retocarlo para, ya sabes, decir lo que quieras que diga el botón. Y eso es todo. Um, tarjetas, conoce tarjetas pequeñas. Puedes agregarle una imagen. Tipo de cool. Uh, carrusel. ¿ Ya has visto estos antes? Deslizadores. Se llaman. Ya sabes, puedes agregar esto a tu página web con solo copiar este código. Apresurarla, ajustándola un poco. Y boom, sólo funciona. Muy cool. Um, vamos a ver. Jumbotrons justo esta caja grande. Eso es divertido. Vamos a jugar con eso, uh, uh, nab nuestro Ya sabes, estos nah bares de la parte superior. Cada sitio web tiene una barra de knave. Está bien, aquí hay un AB son que puedes usar, y podrías cambiar el color. Te mostraré cómo hacer esas cosas con solo copiarlas y pegarlas y luego algo así como tuitearlas . Entonces estas son todas las cosas diferentes. Y a ver, ¿qué más tenemos? Aquellos con componentes. Si vamos a diseñar Ah, tal vez quieras leer esto. Si estás interesado en usar realmente esta cosa, esto muestra el es un sistema llamado de cuadrícula. Cómo puedes posicionar las cosas en una página. Ya sabes, nuestra página. Acabamos de tener. Ya sabes, es muy sosa. Simplemente boom ahí mismo en la página. Pero si quisieras esta mesa, ya sabes, por aquí con una imagen envuelta alrededor de ella y todo ese tipo de cosas Ah, harías usando diferentes contenedores y diferentes cosas del sistema de cuadrícula. Y puedes leer sobre ello aquí. Realmente no va a meter eso en profundidad en esto. Como dije, no estoy enseñando CSS. Ni siquiera realmente quiero enseñarte Bootstrap. Yo solo quiero ¿Debería como que te muestre lo que es posible? Te pone en marcha, te enseño cómo aprender si te interesa aprender y te guiaré por unas cuantas cosas para que veas saber de qué es capaz? Eso es genial. Entonces eso es realmente lo que quiero de todo lo que quería hablar en este video, solo ah, rápida introducción a lo que es esta cosa y lo que puede dio en el siguiente video. Pasaremos por esta sección aquí mismo. Te mostraré cómo usar esto realmente en tu página Web. Se puede ver y un poco de plantilla de inicio. Ya sabes, esto probablemente debería parecer familiar. Ahora tiene muchas de las cosas que ya hemos estado haciendo. HTML el doctor etiqueta cabeza en el título. El cuerpo. Hay una H uno, ya sabes, etiquetas de cierre. Entonces es muy deberías estar familiarizado con el HTML de esto ya, así que eso hará que su uso sea mucho más fácil, así que vamos a meternos en todo eso en el siguiente video. 16. HTML todos 15 Instale Bootstrap: De acuerdo, Entonces en el último video, hablamos un poco de bootstrap en este video en un show que realmente tenías empezar a usarlo . Entonces básicamente hay dos formas de hacerlo. Entonces dirígete a obtener bootstrap dot com y haz clic en la documentación, y puedes descargar esto y su puesto y luego usarlo, o simplemente podrías vincularlo a ella. Entonces esas fueron las dos formas y ponerte en lo serio que eres, quizá quieras descargarlo. El único motivo para descargarlo es si quieres retocar y probablemente no lo hagas, correcto. Si quieres ajustarlo, ya conoces CSS y quieres una especie de modificarlo para hacer cosas muy específicas. Y se podría hacer eso. Y no voy a hablar de ello. Eso va mucho más allá de nosotros en este curso. Pero para la mayoría de la gente, sólo se puede vincular a esto ¿Y qué quiero decir con vinculado a él? Bueno, ¿recuerdas cuando creamos nuestro pequeño estilo falso? Bueno, no era falso, era real. Pero cursi pequeña hoja de estilo aquí style dot CS dice que vincula a ella aparece la parte superior con esta etiqueta Bueno, puedes usar la misma etiqueta, pero en cambio, apunta esto ya sabes, cdn dot Obtener bootstrap dot com inicio de slash. Sea lo que sea, esto no es lo real tu lo miraré en un minuto. Pero solo podrías hacer esto, y entonces eso es todo. Eso es todo lo que tienes que hacer. Simplemente empieza a usar esto. Bueno, hay una cosa más de la que hablaré en un segundo. Entonces eso es lo que vamos a dar. Simplemente dejaré esto por ahora. Y así vamos a seguir adelante y hacer eso. Entonces, ¿cómo hacemos eso? Bueno, ve aquí abajo y busca esta plantilla de inicio. Y básicamente, lo que quieres hacer es copiar todo esto. Ahora, no voy a hacer eso porque ya tenemos los pedacitos de nuestra propia plantilla de inicio, pero voy a agarrar esto al fondo. Ahora, quieres asegurarte de agarrar esta consulta J en esta cosa javascript en este archivo javascript bootstrap . Y este aire solo enlaza con extremos externos de CD, redes de entrega de contenido, que albergan estas cosas. Entonces solo voy a destacar todo esto bien. Haga clic y copie y vuelva por aquí. y solo voy a eliminar nuestras dos líneas de fondo y simplemente pegar esto con click derecho y pegar o controlar V en tu teclado para que veas que tenemos eso y tenemos nuestras etiquetas de cierre aquí. Entonces estamos a medio camino ahora. Sólo necesitamos estas cosas en la parte superior. Entonces, ¿ves? Probablemente quiera esto en esto. Ves, esta es la hoja estilo carril de enlace y luego el ref y luego el enlace a la cosa real, ¿ verdad? Igual que tenemos aquí. Mismas cosas exactas. Básicamente, sólo está apuntando a un tú diferente, Earl. Tan muy cool. Muy fácil. Y podemos simplemente Esto es Ah, Vieux puerto que hace que tu sitio móvil esté listo. Entonces si quieres que tu página web se vea bien en un celular, todo lo que tienes que hacer es agregar esta línea y lo hará. Es magia. Es magia real, porque de lo contrario se necesita mucho recubrimiento para hacer un sitio web móvil listo? Pero no si usas un framework como bootstrap, que es una de las principales razones por las que la gente usa esto porque es tan fácil. Entonces vamos a copiar estas dos líneas de control, ver, para copiar y volver por aquí. Y yo sólo voy a deshacerme de esta línea y pegar en estas dos líneas y debilitarme un poco en abolladura . Si nos gusta. Realmente no importa. De acuerdo, entonces vamos a guardar esto y vamos a ver, sólo por hacer eso, ¿qué ha pasado con nuestra pequeña página web aquí? Si hacemos clic en recargar ahora, primero, echa un vistazo. Todo quema esto en tu mente porque va a cambiar ligeramente, y vas a querer notar eso. ¿ Tan listo? 123 ¡Recargar! ¡ Boom! Todo es ligeramente diferente, ¿verdad? Nuestras mesas todo mal, y vamos a retocar un poco eso. Esto está revuelto a un costado, pero esto nos dice que se ha instalado el bootstrap. Entonces primero lo primero lo primero muy rápido. Sólo voy a sacar todo esto de la esquina de ahí. Y para hacer eso, voy a usar un contenedor bootstrap. Entonces solo creamos un div. Hagámoslo aquí. Div, con una clase de contenedor. Dijiste antes bootstrap tiene contenedores como su tipo de sistema de cuadrícula. Parte de ello. Entonces ahora tenemos que cerrar esto. Entonces solo baja hasta el final aquí y ciérralo. Entonces guardamos esto. Vuelve aquí y golpea. Recargar. Está bien, eso es un poco mejor. Uh, vamos a agregar lima break o dos. Deshacernos de este estilo. Guarda esto aquí atrás. ¿ De acuerdo? Eso no es mucho mejor. Pero vamos a retocar esto en el siguiente video los próximos videos y te mostraremos exactamente cómo usar estas cosas diferentes. Entonces, uh, sí, así que eso será en el próximo video. 17. HTML 16 tablas de Bootstrap: De acuerdo, Entonces, ¿qué queremos hacer aquí? Bueno, tenemos esta mesa recuerda. Vamos a jugar y hacer que se vea más bonito. Entonces, ¿cómo hacemos eso? Bueno, primero lo primero. Volvamos aquí y miremos nuestra mesa, y nos deshacemos de todo el estilo que hemos hecho hasta ahora. Y eso es casi todo el estilo que hemos hecho. Entonces para ella, um, ¿qué más? Deshacernos del lapso de esa fila. Vamos a cambiar este de nuevo. 23 Esto es lo de mi mesa que se estira a lo largo de la parte superior. Y vamos a deshacernos de ver esta cosa de los datos. Es solo que realmente necesito eso. Entonces guardemos esto y echemos un vistazo rápido y veamos. De acuerdo, así que eso es un poco mejor. Deshazte de esto. Mi mesa. Piensa que realmente necesita eso. Sólo vamos a deshacernos de toda esa fila de mesa. De acuerdo, entonces volvemos a lo básico. Pequeña mesa muy básica aquí. Nombre, correo electrónico, dirección. Una persona que llama favorita. Todo suavizado juntos. No muy genial. ¿ Qué hacemos? Bueno, volvamos por aquí. Empecemos en get boost, dr dot com, y siempre lo quieres. Basta con hacer clic en la documentación. Y luego quieres bajar casi siempre dos componentes. Y luego solo quieres mirar por aquí por lo que quieres hacer. Y queremos hacer mesas y estoy buscando y no veo mesas en ningún lado. Entonces pruebo el siguiente hasta contenido. Y bastante seguro, ahí está. Mesa. Por lo que hacemos click en él. Y aquí vemos mesa. Por lo que para hacer una tabla en bootstrap. Todo lo que hacemos es lo mismo es antes de crear nuestra etiqueta de tabla, pero le damos una clase de tabla, que es bastante simple. Copiar eso. Sube aquí a nuestra etiqueta de mesa y péguela. Guarda esto y veamos qué hizo eso. Boom. Enseguida del murciélago. Esto se ve bastante bien, ¿verdad? Sí. Aquí tenemos cositas lindas. Eso no es genial, sino debilitar. Ya podemos jugar con él. Ahora, ¿qué podemos dio? Simplemente nos desplazaremos por aquí y miraremos cosas. Si lo quieres oscuro, le das una clase de mesa oscura. Eso no queremos. Eso son opciones feas de cabeza de mesa. Podríamos dio, um digamos faros de mesa ahora solo dejemos eso por ahora. Sí. Está bien. Entonces primero lo primero. Bueno, están rayadas Rose. Volveremos a eso. Queremos una frontera, ¿verdad? Porque aquí no hay frontera y aquí mismo, no hay nada. Entonces, solo veamos esta clase de mesa, también pone esta cosita ahí dentro. Entonces es copiar esta cabeza de vuelta por aquí. Vamos a darle un espacio y ritmo así y guardarlo y boom. Impresionante. Muy cool. Para que pudiéramos hacer eso. Um, Digamos que queremos a Rayas Rose. ¿ Verdad? Podríamos hacer eso. ¿ Ver? Sí. Dentro de la clase de mesa otra vez. Simplemente agregamos esta siguiente cosita tabla dash rayado. Entonces copia eso. Dale un espacio. Y eso es lo que pasa con CSS. Podrías simplemente darle un espacio a las cosas y simplemente seguir agregando cosas. Eso siempre es divertido. Está bien, así que ahora tenemos rayadas. Muy cool. ¿ Qué más podemos dio mesa de pedidos. Hicimos esa frontera menos estable, ¿eh? Rosa verbal. Entonces cuando pasas el mouse sobre los cambios de color, eso nos refresca. Y que sólo le damos una mesa. Dash, flotar, guardar otro espacio, Otra pasta. Y ahora boom. Muy cool. Normalmente necesitas script java para hacer esto. Pero recuerda, agregamos todas las cosas de JavaScript aquí abajo y ah, solo que lo hace todo automáticamente en bootstrap. Muy, muy cool. Entonces, ¿qué más? Probablemente nos estamos acercando al final de lo que podríamos hacer. Podríamos hacer una mesa pequeña. Oh, es sólo en esto. Veo que esto es algo grande. Si en cambio queremos pequeño capaz. ¿ Eso es correcto en? Y boom. Ahora es un poco de que tal vez no te guste eso. Lo que quieras que puedas hacer, podemos cambiar diferentes colores, ¿ verdad? Haz eso. Agregamos cada una de estas cosas. Por lo que primario es este color secundario. ¿ Es este color acierta este color? Entonces, sumemos éxito de mesa, y solo queremos darle esto a un TR específico, ¿ verdad? Entonces, sólo encontremos el tr que queremos. Digamos este medio y sólo le damos una clase de esa cosa. Guarda esto, vuelve y golpea. Recargar. ¡ Boom! Ahora es verde. ¿ Qué guay es eso, verdad? Eso es tan fácil. Y para que pudieras hacer todas las cosas que subes. No estoy realmente seguro de lo que esto está haciendo sin mesas responsivas, esos celulares air first y cosas que puedes leer sobre eso si quieres, si quieres. Tan muy cool. Um, entonces así es como usamos especie de proyecto de impulso. Cuando Cuando Cuando quieras cosa acaba de llegar a la documentación, empieza con los componentes. Probablemente estará ahí dentro si no es probar contenido de sección diferente tiene una tipografía que es, como cosas de fuentes. Cada una cosas, um, imágenes. Haces cosas diferentes con imágenes, um, tablas y figuras. No estoy seguro de cuál es esta cosa de la figura, pero en su mayor parte, todo lo que quiera va a estar en esta sección de componentes. Por lo que en el siguiente video, comenzaremos a pasar por esta sección de componentes para ver algunas cosas diferentes. Creo que tal vez veamos botones junto para ver cómo funcionan esos, así que eso será en el próximo video. 18. HTML 17 Navbar de Bootstrap: De acuerdo, Entonces, ¿qué más queremos mirar en bootstrap para que podamos pasar y mirar todas estas cosas, pero solo voy a escoger algunas de las más para cosas más comunes que vas a lidiar con ello. Tenemos botones. Um, iba a mostrarte cómo hacer eso, pero en realidad es solo así de sencillo. Uh ah. Se puede agregar un botón a un enlace. Entonces es el tener un enlace de texto. Puedes justo dentro de tu etiqueta h r F en una clase con una de estas cosas, y el enlace se convierte en un botón tan, muy sencillo ahí. Pero lo que realmente quiero mirar son barras de knave. Ese es este bar en la parte superior de la pantalla. Cada sitio web tiene una barra de knave en estos días, parece así que ¿cómo creamos uno con bootstrap? Bueno, puedes desplazarte por aquí y tienen un montón de opciones diferentes con imágenes sin imágenes. Yo sólo voy a agarrar el 1er 1 tiene una barra de búsqueda escolar en ella, y, ah, algunas cosas de desplegable. Entonces, solo copiemos esta cabeza de nuevo a nuestra página web, y queremos subir justo debajo de la etiqueta del cuerpo. Queremos que esto sea lo primero en nuestra página. Por lo que podría simplemente controlar V o hacer clic derecho Disculpe y haga clic en Pegar. Y ponemos todo eso ahí dentro. Entonces solo voy a guardar este control s y echar un vistazo y ver qué tenemos aquí. Y boom, tenemos esta cosa genial. Ahora, um, esto baja el javascript para que funcione. Muy cool. Esta es una barra de búsqueda. En realidad no va a ninguna parte porque no lo hemos programado para hacer nada. No vamos a ir a ti, pero un muy cool Ahora, no soy un gran fan de esto muy, muy gris claro. Entonces lo primero que suelo hacer es subir a la cima de su nab nuestro aquí no peor, no ha tenido nuestra luz. Simplemente cámbialo para agarrar nuestra oscuridad y justo al lado también. Dos spots. Guarda esto y vuelve a cargar. Y boom, Conseguimos este oscuro. Muy, muy cool. Y el tipo verde coincide con el verde aquí. Tenemos un tema pasando sobre eso. Correcto. Por lo que esto está empezando a juntarse. Esto está empezando a parecer un sitio web real real. Y todo lo que hacemos es copiar y pegar algunas cosas. Ahora podemos cambiar esto para que no lo queramos. Barra de knave estatal. Digamos que sí. Vamos a pasar por aquí. Vemos este enlace de inmediato, nab nuestra marca, y ahí dice nab son cuando acabamos de cambiar. Cambiemos el John Elder va a convertirlo en un sitio web personal. No sé lo que sea. Boom, John. Mayores. Muy cool. Um, este desplegable, realmente no quiero bajar. No tengo tantas páginas en mi pequeño sitio web web, así que no quiero deshacerme de eso. Entonces, ¿cómo hago eso? Bueno, simplemente no puedo desplazarse por aquí y buscar desplegable. Y aquí veo desplegable. Aquí hay un l Recuerdo que antes hablé de usar aliados en barras de solapa. ¿ Alguna vez has visto un ejemplo? Um, enseguida. Entonces eso es genial. Por lo que podemos dar click aquí y podríamos ver esto aquí abajo o los más destacados de Ally. Para que podamos simplemente deshacernos de todo esto, guardarlo y recargarlo. ¡ Boom! Y ahora se ha ido. Muy cool. Um, también esta casa y esta discapacitada. Yo quiero deshacerme de esos dos también sólo porque no lo necesitamos y sólo porque quiero mostrarles cómo hacerlo. Por lo que mirando por aquí, vuelvo a ver este hogar. Encuentra el AL abro y cierro, y solo lo elimino. Lo mismo con los discapacitados ya que sabes HTML. Ahora, hace que sea muy fácil especie de entrar aquí y modificar esto de la manera que quieras, lo cual es muy cool. Entonces decimos esto ahora, este enlace, voy a cambiar esto para decir de mí. No tenemos una página sobre mí, pero nadie lo sabe todavía. Está bien. Entonces, John Elder sobre mí empezando a lucir bastante bien. Por lo que realmente es tan fácil de usar. Bootstrap. Es por eso que me refiero literalmente a millones de personas millones de sitios web usan bootstrap. Um, es tan fácil y es completamente gratis. Tan muy, muy cool. En el siguiente video, creo que vamos a jugar un poco más con esto. A lo mejor veremos estas tarjetas, Di cómo usar esa causa Eso es realmente muy genial. Y eso será en el próximo video 19. HTML 18 tarjetas de Bootstrap: De acuerdo, continuando en Echemos un vistazo a estas tarjetas. Entonces solo tienes que hacer clic en el botón de la tarjeta aquí y aquí lo tenemos. Entonces sólo voy a copiar todo esto, volver a nuestro sitio y pongamos esto debajo de nuestra mesa. Por lo que he puesto un par de saltos de línea aquí sólo por buena medida. Y solo voy a pasar el ritmo de todo esto, y podemos eso si queremos. Entonces vamos a guardar esto y echarle un vistazo a esto. Entonces está bien, tenemos esto. Aquí no hay imagen. Entonces agreguemos esa foto de mi perro con la que jugamos antes. Y podríamos hacer eso sólo con esta cosa de SRC. Y creo que eso fue lo que Aspen a quizá p y G. Era ese el nombre de la misma? No puedo recordar. Pronto lo averiguaremos. Podría buscarlo. Está bien. Muy cool. Y se podía ver un redimensionamiento. ¿ Es para nosotros por sí solos? A lo mejor fue sólo aspirina, Es decir. Yo solo estoy jugando en este punto, porque esto es muy divertido. Ella está mirando hacia otro lado. Avery señorial, huracán muy regio. De acuerdo, así que tenemos este título de la tarjeta, podemos cambiar esto y Vamos a cambiar esto para decir, como ha sido chillin home y luego Hola. Mi nombre es Aspen y gobierno todo lo que veo en todas direcciones. Sí, casi lo resume. Y ahora tenemos esto. Pero ahora no soy un gran fan de este botón. Um, Así que volvamos aquí a nuestros botones y escojamos un color diferente. Entonces tenemos una especie de tema oscuro pasando aquí. ¿ Podemos usar el verde? A lo mejor nos quedamos con la oscuridad, así que voy a ir secundaria. Entonces para cambiar eso, acabamos de golpear por aquí y vemos esta primaria btm btm. Simplemente cambiamos a secundaria y, um, um, alimentan álamo. No lo sé. Tan muy cool. Entonces ya sabes, justo así de fácil hacer estas cosas con bootstrap. Ya sabes, solo es cuestión de encontrar lo que quieres jugar con copiarlo, ajustarlo un poco. Ahora que ya sabes, html, se puede leer aquí. Aquí chamos etiqueta cinco. Sabemos lo que es eso. El tag P. Sabemos lo que es eso. Ahí está Aneha, etiqueta Ref en el enlace. Obviamente. Ya sabes lo que es eso lo único que es una especie de no familiar son estas clases div y esto simplemente CSS puro todo en CSS Ah, divisor Div. Um, eso es justo en lo que envuelves todo y CSS y luego le das un tipo de clase, como el atributo de CSS que le dice exactamente en qué parte de CSS quieres darle estilo a esa cosa. Entonces ya sabes, la clase del cuerpo de la tarjeta, la clase de imagen de la tarjeta, la clase de tarjeta para clase aquí arriba de la tabla, sólo una especie de cómo funciona eso. Muy, muy sencillo y muy fresco. Entonces en el siguiente video, creo que veremos una o dos cosas más de tirantes de arranque y luego llamaremos a eso hecho. Y así será en el próximo video. 20. HTML todos 19 Bootstrap Jumbotron: De acuerdo, así que estamos prácticamente terminados aquí. Vamos a hacer un par de pequeñas cosas más solo para una especie de juego con esto y obtener un poco más de experiencia usando esto. Así apareció en la parte superior. Tenemos esta bienvenida a mi página web. Eso está bien, pero ¿qué más podríamos dio? Bueno, veamos por aquí. Tenemos un jumbotron. Eso es algo genial. A mí me gusta el Jumbotron aquí. Tenemos un jumbotron fluido. Vamos a seguir adelante y copiar a este tipo y vamos a ver en lugar de nuestra H. Vamos a solo un poco de espacio aquí y peguemos todo esto. Guarda esto y echa un vistazo y mira qué tenemos aquí. ¿ Todo bien? A lo mejor eso es genial. A lo mejor no es que no lo sé. Um, así que vamos a retocar esto. Deshacernos de este botón. No lo necesitamos. Y no necesitamos esta línea aquí en este poquito de texto. Entonces, vamos a deshacernos de algunas de estas cosas. Entonces lo primero es lo primero, voy a destacar todo esto y especie de tenerlo más de un poco. De acuerdo, entonces no queremos el botón. Entonces, vamos a deshacernos de este botón. Boom se ha ido. Y no queremos este RHH no hablamos de etiquetas HR H R significa regla horizontal y esas etiquetas html puras aire. Y eso sólo hace una línea, ya ves, verdad? Al igual que, realmente no puedo resaltarlo. Pero justo encima de este azul, destacando esta línea aquí mismo, esa es una regla horizontal. Eso es genial. Um, o si se avergüenza de decirlo, los uso más de lo que debería, así que deshagamos de eso. Deshaznos de esta etiqueta P. De acuerdo, Entonces, ¿qué más tenemos aquí? Tres. Cargar y ver. Está bien, vamos a quedar bien. Um, cambiemos Hola, Mundo a No lo sé. Bienvenido a mi página web. Este es mi zar Pequeño rincón de Internet. Deberíamos deletrear Internet, ¿verdad? Internet sigue pareciendo mal. Uh huh. exclamación. Um, echa un vistazo a mi increíble tabla a continuación, y si eres realmente genial, puedes alimentar a Aspen. Está bien. Está bien. Entonces está bien, esto es un poco cojo, pero, ya sabes, sólo otro ejemplo de cómo podrías hacer las cosas con botines de bota, y ah, también me da vergüenza decir que he usado el Jumbotron en sitios web con más frecuencia de lo que debería hacer. un aspecto muy tonto, pero, ya sabes, así es. Entonces mirando por aquí migas de pan. Esos eran una especie de botones útiles que ya mirábamos, Um, bajadas. Eso es genial. Necesitan formularios. En realidad no hablamos de formularios Web más de un tipo de cosa de programación backend, pero puedes darle estilo a las formas. Bootstrap. Muy fácil. Um, barras naff, paginación. Muy cool. Fácil de agregar escalas. Interesantes barras de progreso, más programáticas. Realmente consejos de herramientas. Estaremos flotando las cosas, y eso es más o menos todo. Entonces, sí, eso es bootstrap. En realidad es así de fácil. Y espero que te interese algo ver cómo usar esto. Y espero que vayas a jugar con él tú mismo. Simplemente sumérgete y empieza a probar cosas. Simplemente empieza a jugar con él. Esa es la mejor manera de aprender Bootstrap y, ah, muy cool. Entonces creo que eso es más o menos. Tenemos una comprensión muy básica del HTML. Um, realmente no es tan difícil, Ya sabes, creo que has visto que no es realmente un lenguaje de programación. Es solo cuestión de abrir etiquetas y cerrar etiquetas. Y luego dentro de la etiqueta, el texto queda marcado a lo que sea que sea la etiqueta. Y luego, si quieres ojos estilo dedo del pie, lo hacen bastante usados colores, diseños, cosas así. Eso es todo CSS. Eso es algo mucho más avanzado. Um, puedes aprender CSS y en realidad te recomiendo que hagas eso. No te conviertas en un experto en CSS, sino que solo aprendiste lo suficiente. Um, algo así como has aprendido. HTML. Acabas de aprender lo suficiente para ser peligroso, ¿verdad? Has aprendido lo suficiente para que especie de ser capaz de leerlo, ser capaz de hacer cosas básicas y, más importante, poder entenderlo cuando lo veas en otro lugar. Al igual que si quieres usar bootstrap, sabes que puedes mirar por aquí y hay mucho Ver si hay mucho HTML en Boots draft. Bueno, ya sabes todo esto. HTML Ahora ya sabes lo que significa, lo que hace, el propósito del mismo, cómo modificarlo, cómo hacerlo. Ya sabes, haz exactamente lo que quieras, y eso es realmente, realmente todo lo que quieres en este día y era del desarrollo web moderno. Entonces creo que eso es todo. En el siguiente video, diremos algunas cosas. Envuelve esto y sigue adelante desde ahí 21. HTML todos 20 bonificaciones: Está bien. Entonces creo que vamos a llamar a este hecho. Ahora, tienes un dedo básico muy, muy sólido. Se trata de una comprensión de nivel intermedio del HTML. No fue tan difícil. Es decir, este es un curso muy corto, pero html es muy fácil. Simplemente no hay mucho para ello. Como dije, desde el principio, HBO no es realmente un lenguaje de programación. Es un lenguaje de marcado. Simplemente voy a memorizar las etiquetas y aprender a usarlas. Eso es más o menos. Entonces, um, divertido curso. Espero que lo pasaras bien. Me lo pasé bien enseñándolo. Si te gusta este curso, si te gusta mi estilo de enseñanza, lo que sea y quieras, toma otros cursos de mi parte. Dirígete a kota me dot com. Esta es mi página web y tiene todos mis cursos. Hay más de 30. Estoy agregando nuevos cursos cada semana y puedes ver que tenemos algunas cosas realmente geniales. Ruby on rails, python, Django, JavaScript, PHP. Usted lo nombra. Probablemente lo tengamos más de 1000 videos en este punto más de 30 cursos. 50 mil estudiantes más en este punto. Sí, creo que todavía estamos en 50. No hemos llegado del todo a 60 todavía en algún lugar ahí dentro, pero sí, este este curso aquí mismo. Um, solo para darte un ejemplo, creamos un clon del sitio web Pinterest usando ruby on rails. muy cool. Um, aquí creamos una aplicación de cartera de escritorio de criptomoneda con python. Muy cool, Django para la construcción de sitios web. Como dije, JavaScript, JavaScript, algunas cosas de base de datos. Servidor de secuela de Microsoft consiguió Ah, mi secuela. Curso de servidor. En algún lugar allá abajo, también. Programación de Ruby o cosas de Kryptos o ruby on rails. Cosas Ruby para el desarrollo de juegos, Roku, y vaya más PHP PHP algunas cosas de moneda criptográfica. Muy guay, Lennox, si alguna vez has tenido curiosidad sobre qué es Lennox y cómo usarlo, es un gran curso para eso. Y nos dieron un poco de marketing s CEO y email marketing eran codificadores. Nosotros construimos cosas, aún tienes que comercializar las cosas que construyes. Entonces una especie de enseñarte a hacer eso también. Más cosas de base de datos, más cosas de PHP. Tan muy cool. Si te interesa, haz clic en este inscribirte hoy mismo. Pero ahora, normalmente, normalmente, membresía es de 49 dólares. Eso cubre absolutamente todo. Cuota de una sola vez, dinero, garantía de devolución. Por supuesto. Um, también obtienes futuros cursos. Por lo que tenía nuevos cursos cada semana o dos y tú los obtienes gratis como miembro total. Acaban de aparecer en tu cuenta. Nada para apuntarse por quien simplemente. Simplemente aparecieron como por arte de magia. Entonces no hay honorarios extra por eso. Y eso es muy guay. Pero como aguinaldo primero estaban sufriendo a través de este curso. Te quiero dar este código de cupón. Si haces clic en lo de check out aquí y tecleas, veamos Super Coder, que sé que es un código realmente torky. Pero soy demasiado perezoso para cambiarlo. Se noqueará otros 22 dólares. Por lo que pagaste 27 dólares por todos mis cursos. Ni siquiera se puede comprar una pizza por eso. Básicamente sólo tengo que cubrir el costo de mi banda con. Para todos los videos que tengo para iglesia algo, um, eso es más o menos un ralentiza Aiken G. O. Um, dije devolución de dinero garantia que podrías acceder a mí y hacerme preguntas. Se puede acceder a otros estudiantes hacerles preguntas interactuar. Es ah, es una pequeña comunidad cool, y después de 27 pavos, creo que es ah muy bueno robar Si te gustas a mí Si solo te gusta ver cursos sobre ti a mí tengo todos mis cursos de Kota Me en ya me conoces eso Si te diriges a john elder dot org's ford slash te to me dot PHP Este es mi sitio web personal, y tiene todos los mismos cursos, pero con enlaces a ti a mí. Y hay códigos de cupón aquí, creo que 11 o 12 dólares sus cursos lo que pagas. Me encerraron en lo bajo que puedo ir allí. supuesto, eso es mucho más caro que tomar todos mis cursos por 27 dólares. Pero algunas personas igual que tú a mí. Um, por la razón que sea, tal vez tengas algunos créditos acumulados ahí arriba. Algunas personas te regalaron cursos o lo que sea. Uh, si ese es el caso, podrías revisar todos mis cursos aquí, click en el enlace en un boppy sobre ti a mí. Entonces, Como se dijo, espero que hayan disfrutado del curso. Deja una reseña Si te apetece. Bueno, malo o de otra manera. Agradece siempre obtener retroalimentación. Y eso sería realmente útil. Y, uh, creo que vamos a llamar a éste. Hecho. Entonces mi nombre es John Elder. Espero que hayas disfrutado del curso, y te veremos la próxima vez