HTML y CSS para principiantes

1. Introducción: Hola amigo mío. Estos son sus primeros segundos cuando debería llamar tu atención o simplemente cierras estos videos. Entonces, ¿lo hice? Bueno, eso espero porque hay tanta diversión que vamos a tener en estos autos. En primer lugar, observe que, bueno, no hablo como robots, así que esa es la principal diferencia entre mis curvas y las demás. Simplemente no te vas a aburrirte. De acuerdo, este no es un próximo curso aburrido. Este es un curso bastante cool. Entonces si te estás preguntando cada vez cuando aprendes algo nuevo, preguntas como, ¿por qué necesitamos atributos? Cuáles son los selectores y por qué se les nombra selectores y así sucesivamente, así sucesivamente. Entonces estás en el lugar correcto porque contestaré todas estas preguntas y te explicaré todo desde cero. ¿ De acuerdo? Creo que todos tienen la capacidad de desarrollar software si hubieran enseñado correctamente, y te está incluyendo. Entonces después de mi curso, finalmente entenderás todo lo que creas. Entonces lo que sabrás después de esta partícula, nuestro curso, bueno, sabrás usar etiquetas HTML, atributos, y selector CSS. Sabrás cómo instalar y configurar Visual Studio Code. Aprenderás atajos súper, realmente súper eficientes que se llaman emmet. Y luego cómo agregar imagen de tu lado, cómo crear enlaces internos, externos, cómo crear formularios de usuario con entradas y así sucesivamente y así sucesivamente. Entonces hay bastante contador para ti, ¿verdad? Y la pregunta es, ¿por qué debería elegir mi curso? Bueno, porque tienes mi ayuda con respecto a temas cubiertos. Haz una pregunta en la sección de preguntas y respuestas, y te ayudaré lo más rápido posible. Mis cursos se actualizan si es necesario. Tengo miles de clientes satisfechos, ¿de acuerdo? Entonces, ¿qué debes saber antes de este curso? Para ser honesto, sólo las buenas intenciones han necesitado, por lo que no se necesita nada. De acuerdo, solo puedes ser un gran principiante total, vale. ¿ Y quién soy yo? Bueno, yo soy nuestro Kaddish haría Ártico. Y tengo una enorme experiencia en programación, como se puede ver aquí. Y ya he enseñado a mucha gente, y la mayoría están bastante contentas. Se puede leer críticas en internet, son realmente amor enseñar a otras personas y que les encanta ayudar a otras. Entonces recuerda, si tienes alguna pregunta, siéntete libre de preguntar. Puedes enviarme un mensaje y te responderé lo más rápido posible. Gracias por ver este primer video y que tengan un buen día. Buena suerte. 2. Descarga e instalación de código Visual Studio: Hola, amigo mío hoy. Vamos a platicar cómo descargar el código de Visual Studio, que es, como puedes ver, un editor de código. Pero, ¿qué significa? ¿Es un editor? Editor, como su nombre indica, mira los nombres. Siempre mira los nombres. Editor es un programa que se utiliza para editar, nada sorprendente aquí, ¿verdad? Pero, ¿qué puede editar? ¿Puede editar solo sitios web o tal vez texto? Para ser honestos, este editor, como puedes ver, puede ser usado no solo para HTML, puede ser usado para Python, Java Scream, CSS, Java, mecanografiado, y así sucesivamente Esto es algo bastante grande. Y tal vez te estés preguntando, ¿por qué deberíamos usar editor así? ¿Por qué deberíamos descargarla? ¿Por qué no podemos escribir sitios web usando, por ejemplo, note pod? No se puede hacer usando notepod. Puedes ser honesto, usar cualquier editor de texto para crear sitio web. No obstante, cuando usas editor, como por ejemplo, el código de Visual Studio, ahorrarás mucho tiempo y el tiempo es dinero, porque bueno, por ejemplo, tu código estará coloreado, hazlo más claro. El editor te sugerirá, ¿qué debes escribir a continuación? Se cerrará el texto del que hablaremos más adelante, y así sucesivamente. Entonces editor es algo que va a hacer funcionar para ti. Así que es bueno tener algo así, ¿verdad? Es bueno saber que no importa qué editor vas a elegir. Empecemos, puedes elegir el código de Visual Studio. Se puede elegir, por ejemplo, frijoles netos, y así sucesivamente. Lo más importante para ti es que te conviene. Todo depende de tu gusto, qué debes usar. Para ser honestos, puedes escribir en el desarrollo web de Google. Mm. Editores, y puedes buscar algunos de ellos, abrirlos, jugar con ellos. Pero para ser honestos, al inicio, solo abre cualquier cosa. Apenas empieza a codificar porque esto es lo más importante. Empieza a codificar, más tarde, verás lo que es importante para ti. Creo que el código de Visual Studio es realmente uno de los mejores editores. Y lo que es más, si aprendes a usarlo. Bueno, no necesitarás aprender otro editor si quieres cambiar el idioma que vas a programar, ¿verdad? Porque puedes programar en él en casi cualquier cosa que quieras. Entonces, cuando escribimos el código de Visual Studio, podemos descargarlo para windows. Cuando damos click aquí, como puedes ver, puedes encontrar enlaces, por ejemplo, para Linux o Macintosh Así que vamos a hacer clic aquí, y vamos a salvar la pelea. Entonces después de que se descargue el archivo, podemos hacer clic en abrir aquí, y ahora es la parte importante. Deberíamos leer la licencia, ¿de acuerdo? Esa es una parte muy importante. Y luego haga clic en siguiente, siguiente. Y luego siguiente. Y puedes crear unos iconos de escritorio en el escritorio. Así que puedes abrirlo con bastante facilidad. Haga clic en siguiente, instale y para ser honesto, eso es todo. Se va a instalar tu editor, y vamos a platicar. Bueno, ahora cuando hacemos clic en Finalizar, como pueden ver, se ve así. Hablaremos de cómo usarlo en la próxima conferencia. Eso está en la lección. Muchas gracias. 3. Creación de proyectos en de forma en: Hola, es hora de crear un sitio web dentro de nuestro editor de código visual studio. Cómo hacerlo. Bueno, en primer lugar, tenemos que operar con archivos. Cómo operar en archivos con tantos botones por aquí. ¿En qué debo hacer clic? Bueno, en primer lugar, no te preocupes. No necesitas saber dónde necesitas, ya sabes, encontrar todo en este editor al instante. Bien, ¿bien? Cuando lo estés viendo, no te preocupes. Hay muchas opciones. No hace falta que los conozcas a todos. Usaremos los más importantes en el futuro. Te voy a mostrar el paso a paso, para que no te sientas abrumado Entonces, en primer lugar, tenemos que operar en el archivo. Pero, ¿cómo agregamos un archivo a nuestro código de Visual Studio? Puedes hacerlo de dos maneras. Puede crear una nueva carpeta, una nueva carpeta. Vamos por ejemplo, a crear una carpeta llamada CATs. Ahora sólo vamos a moverlo aquí. Yo sólo lo muevo. Estoy sosteniendo el botón izquierdo del ratón y sólo lo pongo aquí. Hola. Esto ahora está dentro de nuestro editor. Aquí, como puedes ver, CATs. Y como pueden ver, esta cosa se expandió aquí, ¿de acuerdo? Esto es explorer, entonces lo que te permite explorar cosas dentro la carpeta que se ha adjuntado que se ha agregado a tu editor, ¿verdad? Lo mismo que tienes en las ventanas, por ejemplo. Pero esto se ve un poco diferente. Y aquí puedes hacer qué. Puedes crear un nuevo archivo, puedes crear una nueva carpeta. Entonces, solo hagámoslo. Vamos a dar click sobre los cinco nuevos. Como puedes ver ahora, podemos escribir aquí el nombre de nuestro FI. Entonces por ejemplo, muestra, y cuando acabo de hacer clic en enter, como pueden ver, creé un cinco. Muestra, el problema es que, oye, vamos a escribir dentro de lo que dentro de HTML en el futuro. No sabes qué es eso exactamente ahora mismo, pero vamos a escribir código en HTML. Entonces debemos cambiar la extensión aquí. ¿Cómo lo haces? Haga clic con el botón derecho , cambie el nombre y escribamos su HTML. Como puedes ver, esto ha cambiado el ícono aquí. Ahora estamos escribiendo HTML. Y podemos teclear aquí lo que queramos. Como puedes ver cuando estamos escribiendo cosas aquí en este lado derecho. Tenemos aquí algo así, esta cosa blanca por aquí. Sugiere que ha habido un cambio dentro de nuestro código, y no se ha guardado. Tenemos que guardar esto para poder ver el resultado. Así podemos hacer clic en archivo y guardar o usar el atajo Control más S desde seguro. Como puede ver, ahora acabamos de decir, y podemos usar el archivo abierto este. Entonces, cómo hacerlo, podemos minimizarlo. Cortes abiertos. Clic derecho, Openwave Por ejemplo, Firefox. Como puedes ver, esta es nuestra página web de Faces, lo cual es bastante raro porque no dice nada interesante, pero no te preocupes. Aquí en el futuro, aprenderás a crear sitios web que tengan algún significado en este momento. Es sólo por diversión. Divertido, diversión, diversión. Y la pregunta es, ahora, ¿es esta la única forma de agregar una carpeta? Esa no es sólo la manera de hacerlo. Podemos cerrar la carpeta que ya tenemos abierta aquí, como puedes ver archivo, cerrar carpeta, y para poder volver a abrir el archivo, pero no moviéndolo aquí, solo podemos hacer clic aquí en el Explorador, y luego podemos hacer clic en carpeta abierta y simplemente encontrarla. Aquí es donde los gatos. Entonces como la carpeta, y como pueden ver, acabamos de abrirla de nuevo. Simplemente puedes moverlo al Visual Studio Code, o simplemente puedes abrirlo usando como puedes ver el Explorer, ¿verdad? Y así para crear Archivos, puedes hacerlo de esta manera, pero también recuerda, porque no necesitas crear sitio web en Visual Studio Code, puedes crearlo incluso usando el bloc Por lo que puede hacer clic en Nuevo. Y solo puedes, por ejemplo, usar el bloc de notas. Es documento textv, no ha sido traducido al inglés No sé qué, pero significa bloc de notas. Y aquí podemos, por ejemplo, escribir algo así como muestra. Cambiemos la extensión a HTML. El problema es que yo lo llamé igual como aquí, tal vez vamos a cambiarlo a muestra dos, bien. Y como puedes ver, también está disponible ahora aquí, y puedes saltar entre uno y otro cinco solo hacer clic aquí. ¿Bien? Puedes minimizar esta cosa y seguir trabajando en tu proyecto de tu lado, tu carpeta. Entonces tienes más espacio aquí, ¿verdad? Eso es bastante útil. La mayoría de las veces lo haremos así. Entonces ya sabemos cómo ver el archivo. Pero recuerden, también, esto también es importante. Es importante que cuando abras tu archivo con Firefox, como puedes ver, no haya nada aquí ahora. ¿Por qué? Porque no hemos guardado el archivo. Es importante que siempre necesites guardar el archivo. Tienes la sugerencia aquí y aquí. También dice que no se ha guardado un archivo. Y aquí tenemos información cuál. Controla más S, y como puedes ver ya está guardada. Y aquí necesitamos ahora refrescar la página para poder ver el cambio. Por lo que necesitamos hacer clic en recargar el botón de página actual o control más r de refrescar, y como puede ver, tenemos un resultado Entonces en esta conferencia, la aprendiste. Tenemos algo así como explorer que te permite explorar las carpetas en tu computadora. Y para ser honestos, realmente simula en proyecto, ¿verdad? Tenemos que escuchar un proyecto con respecto a los cortes, así podríamos crear un sitio web con respecto a los cortes dentro de esta carpeta y divertirnos un poco. Pero cosas así servirán en futuras conferencias. Si tienes alguna duda, como siempre, no dudes en preguntar. Muchas gracias. Que tengas un buen día. 4. Cómo establecer tu primer proyecto: Hola, hoy, aprenderás conceptos básicos de HTML. Entonces, en primer lugar, aprenderás qué es HTML y qué es Tech. Esta es probablemente la palabra más importante que necesitas entender para crear sitios web. Cuando lo entiendas correctamente, todo va a ser fácil. Y no te preocupes. Haré todo lo que pueda para asegurarse de que lo entiendas correctamente. Bien, entonces, ¿qué es HTML? HTML es realmente lenguaje de marcado de hipertexto. Entonces así es como va. Esto es un atajo a esta cosa. ¿Y qué significa hiper? Hyper quiere decir que esto es algo súper, ¿verdad? Significa que algo es muy bueno. Pero, ¿cómo el texto puede ser hiper? Esto es bastante raro, justo porque el texto es solo texto, cuando estamos mirando aquí, donde tenemos palabras aquí, y esto es simplemente texto simple. ¿Cómo puede ser hiper? ¿Cómo puede ser el texto súper muy bueno? ¿Puedes hacer algo que otros textos puedan hacer? Bueno, cuando tenemos un libro, y cuando vamos al índice de este libro, cuando queremos encontrar la Sección cuatro y buscar ahí la respuesta. ¿Necesitamos a qué? Tenemos que hacerlo manualmente. Necesitamos usar nuestras manos para saltar a la Sección cuatro del libro, Porque esto es sólo un texto simple. No obstante, esta vez, cuando estamos viendo el hipertexto, este es un texto avanzado, Debido a que se trata de un HTML, te permite saltar usando hiperenlaces, Por eso se les llama hiperenlaces de un texto a otro texto Solo estamos acostumbrados a usar el hipertexto. Mira, cuando escribimos aquí Polonia, bien, por ejemplo, y aquí tenemos qué enlaces, los hiperenlaces que te permiten saltar a un lugar a otro lugar, y a otro lugar, y a otro lugar Podemos simplemente saltar aquí tantas veces como quieras, y lo hacemos rápido. Esto es bastante col. Estamos acostumbrados a ello. Pero oye, envía mensajes de texto normalmente, cuando miramos libros, no hagas cosas así, ¿verdad? Entonces sí, este es un hipertexto. Por eso tienes aquí un hiper dentro de este atajo, ¿de acuerdo? Este es un texto realmente avanzado que te permite hacer cosas realmente geniales sobre las que, por supuesto, aprenderemos. Entonces, ¿qué significa el marcado de lenguaje? Significa que necesita ser marcado, por lo que necesita ser marcado. Por lo que necesita ser virado. Tuck realmente significa marcado, porque te permite marcar las cosas Te permite marcar las cosas. Te permite decir ¿cómo se debe interpretar algo? Cuando tenemos un texto como este, bueno, queremos que funcione de manera diferente. Por ejemplo, oye, tenemos aquí HTL, y me gustaría tenerlo en negrita, Me gustaría que aquí cambiara la fuente. Entonces, como hacerlo, necesitas usar el impuesto. Es necesario marcar. Por eso se llama lenguaje de marcado Y cómo hacerlo. Bueno, tenemos que usar el impuesto. Digamos, llamémoslo perno, porque va a audaz esta cosa. Y agreguemos aquí columna así, y vamos a abrirla en el navegador web. Cuando lo hagamos así, te darás cuenta de que lo que nada ha cambiado. ¿Por qué? Porque cada etiqueta dentro HTML debe tener este aspecto. ¿Bien? El nombre de la etiqueta debe estar dentro de algo así. ¿Y va a funcionar? No, no va a funcionar. No pasó nada. Pero bueno, lo del perno desapareció porque ahora mismo nuestro navegador web, el Firefox, está tratando de interpretar esto, pero no sabe qué significa. Tenemos que usar el impuesto de algún tipo de referencia. Y puedes encontrar esta referencia, por ejemplo, en esta página web aquí. Y como puedes ver, hay muchas etiquetas. Y esta etiqueta que estamos buscando se llama B, que define texto en negrita, y tenemos que hacerlo así. Entonces ahora cuando refresquemos nuestra página, como pueden ver, sí. Este texto está atornillado. Pero bueno, quería negrita solo esta parte del texto, no todo. Sí. Por eso necesitamos cerrar la etiqueta que hemos abierto. Bien. Tenemos que cerrarlo usando la baraja B en su interior Dice que, oye, esta es la etiqueta de cierre, esta es la etiqueta de apertura, esta es la salida, este es el final, y esta cosa de aquí se llama totalmente Aliment Se llama Aliment. Esto va a decir ahora mismo al navegador web que necesita interpretar esta parte, el contenido. Estar en negrilla. Y le informamos usando el tak, usando el lenguaje de marcado que vamos a aprender en futuras conferencias Tenemos que aprender cómo funcionan estos tats. Así es como creas sitios web. Usando esos tats En el futuro, aprenderás a hacer los hipervínculos que te permitirán saltar de y uno a otro lugar dentro de tu texto Probablemente te hayas dado cuenta de que el entra a los espacios blancos, derecho, el ya sabes, los espacios y así sucesivamente no se interpretan aquí, ¿verdad? Todo está en una línea. Por eso necesitamos aprender a, ya sabes, hacer que se vea bien. Y lo haces bien usando texto del que aprenderemos en el futuro. Creó algo así que te ayudará a recordar que el elemento, así que todo consiste en start tack del contenido y end tack Hay nombres que puedes encontrar en la referencia que te mostré, como, por ejemplo, B, que cambia el contenido, necesitamos terminar la etiqueta. De lo contrario, si no terminamos la etiqueta, vamos a atornillar todo, que no es lo que queremos. Tenemos que terminar lo que empezamos, como en la vida real mientras. Por supuesto, no funciona cada vez. Eso es HTML. Esto es solo lenguaje de marcado de hipertexto. Es un lenguaje donde usamos impuestos, para marcar, el texto, para hacerlo hiper. Esa es sólo la lección. Muchas gracias. 5. document básico HTML: Hola, amigos míos. Hoy, te mostraré algunas etiquetas más que te permitirán crear la estructura básica para tu f HTML. Cada f HTML debe iniciarse con etiqueta HTML, ¿de acuerdo? Y esta etiqueta informa al navegador web que va a interpretar el lenguaje HTML. Posteriormente, deberías crear algo lo que se llama cabeza. Como, tenemos la cabeza sobre nuestros hombros, ¿verdad? Por lo que este lugar va a ser utilizado para almacenar el en información adicional sobre su sitio web. Como, por ejemplo, título. Así puedes crear un título para tu sitio web aquí, y puedes ponerlo entre la etiqueta de título de apertura y cierre. Y aquí, puedes, por ejemplo, llamémoslo las divertidas imágenes de gatos, así. Y ahora podemos abrirlo. Yo guardo el archivo usando el atajo Cro plus S, y como puedes ver aquí, tenemos qué. Ahora mismo, es la ruta cinco a nuestro expediente. Pero cuando refresco la página, contro plus r, como pueden ver, divertidas imágenes de corte, sí, ahora podemos cambiar el título de nuestra página web Esto es bastante genial. Entonces dentro del calor, ponemos información como esta. Habrá más impuestos que vendrán aquí. Hablaremos de ellos más tarde. Este es el básico más importante. Estamos creando algún tipo de plantilla que podamos usar para crear sitios web que puedas copiar. Ahora, vamos a crear siguiente acto que se va a llamar cuerpo. Como si tuviéramos un cuerpo en nuestra vida real, cuando miras a los humanos, entonces notarás que tienen algún tipo de contenido dentro de sus cuerpos. Sí, esta es la misma situación aquí. Tenemos qué, el HTML principal. lado dentro de ella, tenemos cabeza y cuerpo, que tiene un contenido, ¿verdad? Aquí va el contenido de su sitio web. Ahora cuando lo refresquemos, como pueden ver, aquí tenemos información. Aquí va el contenido de su sitio web. Y probablemente te estés preguntando por qué antes cuando hicimos algo como esto. ¿Por qué? Todavía hay contenido aquí cuando dije que deberíamos crear sitios web como este. Esa es una buena pregunta. ¿Y cuál es la respuesta? Los navegadores web son bastante inteligentes. Pueden interpretar casi lo que sea que pongas aquí. Se puede poner el título en el lugar equivocado así, y todavía va a estar aquí. Vamos a cambiarlo. Se puede ver. Todo funciona bien. Entonces, ¿por qué molestarse en hacerlo así? En primer lugar, seamos una buena persona para otro codificador de archivo HTML Simplemente asumimos que cuando miramos la etiqueta de la cabeza, entonces vamos a encontrar información aquí sobre el sitio web. Imagina que tu código es py long, así. Y algunas personas pondrían título aquí y algunas personas lo pondrían, lo sé como aquí. En algún lugar en el medio. Eso sería horrible para nosotros, ¿verdad? Yo las cosas estarían en lugares extraños diferentes. Así que esto es una especie de estándar, ¿de acuerdo? Entonces, hagámoslo de esta manera. Pero si todavía piensas que no es suficiente para ti, entonces imagínate por un segundo, entonces hay algún tipo de robots en Google, y están buscando Internet y están analizando Internet. Y están analizando sitios como tú creas. Y si haces cosas que son raras en tu sitio web, como poner el título en un lugar extraño, y cometes muchos errores como este, entonces solo pueden darte algún tipo de menos dentro del ranking. ¿Bien? Estás creando los sitios web para hacerlo visible asegurarte de que tienes clientes para que la gente vea tu contenido, ¿verdad? Entonces probablemente no quieras tener No hay suficientes personas mirando tu sitio web, ¿verdad? Entonces esta es una buena razón para crear un contenido que se vea bien también detrás de la pantalla, ¿verdad? No en no hace falta que te importe solo lo que hay aquí, sino también lo que hay detrás de escena. Entonces sí, puedes ponerlo aquí. Eso funciona bien. Pero ahora esto es mejor cuando lo haces así. Y también, hay nuevos navegadores web que, ya sabes, pueden interpretar cosas así. Algunos mayores no lo harán correctamente. También encontrarás guiones en el futuro. Aprenderás a crear scripts y ellos analizarán tu código entrando en el texto. Este es un tema bastante avanzado, pero solo etiqueta en mente, crea contenido como debería crearse. Dentro de la cabeza, ponemos texto como título, dentro del cuerpo, ponemos contenido. Entonces podemos, por ejemplo, atornillar el contenido aquí, así. Bam, como puedes ver, aquí va el contenido de tus sitios web. Hay una cosa más que debes recordar sobre los estándares. Podrías crear tu archivo HTML de esta manera, ¿de acuerdo? Así que iniciarlo desde la mayúscula. Funcionará bien. Podrías yo saber, cambiar el a gustar. Todavía funciona bien aunque no lo cerramos de la misma manera. Así que puedes hacer muchas cosas bastante raras en tu código. Por favor, no lo hagas. ¿Bien? Puedes pero no empieces nunca, conozco titulo por mayúsculas A lo mejor esto te queda bien, pero el estándar es simplemente, ya sabes, comenzar todo desde el estuche pequeño, ¿ok? Así que no uses mayúsculas dentro de los nombres de las etiquetas. También es bueno saber que todo lo que pongas aquí en el título se muestra aquí, y esto es bastante importante lo que pones aquí porque si pones aquí, no sé, algo así como la página web uno, esto no es útil para ti, y no es útil para el usuario. Y tampoco va a ser útil para los robots que están analizando Internet. Entonces, cuando Google Robot encuentra tu sitio web y ve la página web uno, él está como, ¿de qué se trata esa página web? Intentará analizar el contenido aquí. Pero cuando vea que el título se ve así, no va a estar 100% seguro, y no va a dar puntos a las cosas que pones aquí. Si tienes página sobre gatos, es una buena idea poner aquí gatos. Si tienes un sitio web sobre bicicletas, pon la bicicleta aquí. No se repita que los gatos. Gatos, gatos, gatos, gatos. Eso no es bueno porque entonces Robot será como, Bien, lo está repitiendo. Creo que podría estar haciendo trampa. Este tipo simplemente no es genial. Entonces vamos a prohibirle. Pongamos aquí una palabra, tal vez dos veces la palabra que está describiendo tu página web correctamente. El contenido realmente debería estar aquí, y esto va a mejorar tu ranking en el Google. Eso está todo en la lección. Gracias. 6. Etiquetas anidadas y envuelto FAST de texto existente con etiquetas con EMMET: Hola, amigo mío. Hoy en día, aprenderás nuevo etiquetar la etiqueta ocular. También aprenderás a cerrar tu impuesto anidado, cuál es nuestro impuesto anidado con nuestros elementos anidados Y además, aprenderás un atajo muy, muy importante que te permitirá envolver para insertar la etiqueta en el texto que ya se ha escrito. Te ahorrará mucho tiempo. La etiqueta ocular se ve así. Entonces estamos abriendo el soporte cerrando uno y notamos que tenemos aquí la tachueta auto cerrada El de cierre es simplemente agregado automáticamente por el editor. Y cuando ponga el contenido aquí, contenido tan inclinado, notará que el contenido aquí. Es realmente inclinado. Así que esto es realmente un atajo para la palabra cursiva, ¿de acuerdo? Entonces crea palabras inclinadas, texto inclinado, ¿verdad? Y así es como funciona. Pero la pregunta es, ¿puedo poner la etiqueta inclinada o la etiqueta en negrita en el texto que ya existe, verdad? Por ejemplo, recuerda aquí. Quiero hacerlo en negritas. ¿Cómo hacerlo rápido? Bueno, podríamos, ya sabes, escribir A, luego la etiqueta de cierre, y ya ves que ahora esa etiqueta que se ha agregado aquí no es buena para nosotros porque bueno, queremos aquí, ¿verdad? Queremos copiarlo, así que necesitamos, ya sabes, cortarlo contra más X. Y pegarlo aquí. Esto lleva tiempo, Contador más z, podemos volver a esto. Bueno, podemos hacerlo también de esta manera. Podemos poner B, luego contador más Z, y luego escribirlo aquí. Esto es un poco más rápido, ¿verdad? Como se puede ver cuando tecleamos solo el ataque de apertura y el soporte de apertura y luego el slash Esto se va a cerrar automáticamente. Lo cual está bien, pero esto sigue siendo lento. Sería mejor si pudiéramos simplemente envolver de alguna manera el elemento, el texto que ya existe en nuestro sitio web con esta t, ¿verdad? ¿Hay un atajo para ello? Bueno, sí, lo bueno es que hay un atajo dentro del código de Visual Studio usando algo lo que se llama ET. Aprenderemos sobre los atajos ET durante las conferencias porque creo que si utilizo cada atajo en una conferencia, nunca lo recordarás. Necesitas ver la importancia de usarlos, ¿verdad? Así que vamos a seleccionar esta palabra aquí y usar el atajo Control más Mayús más P. Y como puedes ver aquí hay muchos atajos, que puedes usar. Y cuando escribimos el envoltorio con abreviatura, como pueden ver, ha sido utilizado recientemente por mí, y hago clic en él. Estamos usando el botón izquierdo clic en masa o haciendo clic en el er. Ya puedes ver que está esperando la abreviatura. Ahora cuando escribimos lo que escribamos, como pueden ver, va a ser lo que va a ser la etiqueta de apertura y cierre instantáneamente en el texto que habíamos seleccionado, ¿verdad? Eso es genial porque ahora solo podemos poner B aquí, y esto va a estar en negrita. No necesito quitar la etiqueta de cierre y y copiarla aquí o ponerla aquí. Eso solo lleva mucho tiempo. Podemos usar atajos. Esto es bastante genial. Entrar fin. El trabajo está terminado. Entonces esta es muy buena, muy fácil manera de bien, envolver tu texto en el impuesto. La pregunta es, ¿podemos hacerlo aún más rápido? Contra plus z, volvamos a la contra plus plus P. Como pueden ver, aquí hay algún tipo de equipo aquí. Puede hacer clic en él y configurar los enlaces de teclas. Cuando haces clic aquí y agregas la encuadernación de teclas, puedes presionar la combinación de teclas deseada y luego presionar enter para hacer la nueva encuadernación para esta frotación con abreviatura. Por lo que no necesitaremos usar el atajo contro más gavilla más P y luego encontrar el Solo necesitamos, por ejemplo, tipo contro plus gavilla E. ¿Por qué me molesté usar el eje de control plus más A más E Porque bueno, fíjate que Ya se utilizan muchos atajos. Ejemplo, contro plus A es utilizado por dos comentarios existentes. Se puede ver por qué, seleccionar todos. Esto va a ser estúpido quitar el atajo así , de los atajos. Entonces esto es mejor usar algo que no se ha usado como por ejemplo, esto. Ahora cuando un click enter, podemos hacerlo un poco más rápido. Cro más Shift plus, y luego B. Ba, esto es genial, ¿verdad? Y ahora hablemos del impuesto anidado. Observe que digamos que este texto está inclinado y al mismo tiempo en negrita. Entonces quiero hacerlo en negritas y al mismo tiempo. Entonces cuando escribimos B de esta manera, y luego aquí, Como pueden ver, esto va a estar en negrita. Esto está en negrita. Texto. Ahora cuando quiera agregar cursiva. Observe que cuando hago contador plus, ¿dónde debo poner el ojo aquí? ¿Debería ponerla aquí? Como puedes ver, hasta el editor te está diciendo que algo anda mal. Está tratando de cerrar la tacha del cuerpo aquí, la cursiva. Debido a que esta es la placa equivocada, siempre debes recordar el orden en que se debe cerrar el impuesto. Cerramos la tacha más externa . El último. Observe que el último tuck es o el primer tuck aquí es B, y el último es yo, y deberíamos cambiarlo, cierto, este dos B. Ese es el orden que debes usar Entonces cuando cierras el, cuando abres theta, debes cerrarlo primero, ¿verdad Si esta es la cirugía estética interior, es una cirugía estética externa como esta, debería estar cerrada como la última cirugía estética, Y podrías estar preguntando ¿por qué no he usado Bueno, porque necesitamos saber un poco más de atajos sobre MD para poder hacer dos etiquetas usando el atajo del que hemos aprendido. Entonces Texto de muestra, hagamos algo como esto. Selecciónelo, contro más turno más E, y está esperando la abreviatura Observe que cuando escribo B, y luego I, y luego B, bueno, no pasa nada bueno para nosotros. Queremos tener dos etiquetas, el impuesto anidado. Cómo resolver este problema usando el atajo que hemos aprendido. Tenemos que escribir B, y luego este firmado, que es el seno mayor que el seno, el corchete angular, y ahora escribimos I. Como pueden ver, dice que B es la etiqueta exterior, I, es la etiqueta interna. Bueno, podríamos saber, hacer más de ello, ¿verdad? Pero ese es el resultado que estamos buscando. Queremos tener el texto que esté en negritas y también en cursiva. Observe lo rápido que es hacer cosas así, ¿verdad? Nosotros solo hacemos B, I, y eso es todo. Ahora, volvamos a hacerlo manualmente. Contador B más B. I abajo. Mmm. Bien, y ahora otra vez, con el atajo. Texto de muestra. Vamos a seleccionar y este bache. Esto es genial, ¿verdad? Entonces este es el atajo que recomiendo encarecidamente usar. Ahora ya sabes lo que son neese aviso fiscal que ya los hemos usado, como aquí, por ejemplo, tenemos cabeza e interior título Y esto no parecía ya sabes, difícil de entender cuándo debes cerrar cuál debes cerrar primero porque usamos el enter aquí, ¿verdad? Observe que también podemos hacerlo aquí. Y ahora si lo hiciéramos así, esto se vería, ya sabes, raro, ¿verdad? Entonces esta es una buena idea a veces agregar sangrías dentro de tu código para que sea un poco más fácil de leer, Y fíjate también que cuando añades sangrías, este editor es bastante genial porque podemos plegar y desplegar Así. Entonces, ¿por qué es útil? Bueno, imagina que tenemos aquí etiqueta de cabeza, y digamos que tenemos muchas etiquetas aquí con respecto al jefe de nuestro sitio web. Por lo que les recuerdo esta información adicional sobre su sitio web. Y para ser honesto cuando lo escribas, esto ya no va a ser necesario para ti. Y tú solo Y esto es simplemente doblado, ¿verdad? Y no hace falta que lo veas cada vez. Así que esto es genial, ¿verdad? Simplemente puedes hacer que tu código sea más fácil de leer. Puedes hacer que sea más fácil saltar de un lugar a otro porque no necesitas leer cosas que no son necesarias por ahora. Bien, eso está en esa lección. Muchas gracias. 7. Crea párrafos<p>| ¿Qué son los espacios blancos?</p>: Hola, amigo mío. Observe que al mirar este texto, el texto está en línea. Pero cuando miras aquí, definitivamente no es así, ¿verdad? Usamos entra aquí. Entonces usamos algún tipo de llave que debería romper las líneas, ¿ verdad? Pero no lo hizo. ¿Por qué? Porque HTML no interpreta algo lo que se llama caracteres blancos. Los personajes blancos son cosas como entrar tabulador. Entonces cuando haces clic en Tap, esto es tabulador, como por ejemplo, aquí, Y también, el espacio, pero no el espacio como el único de aquí mismo. Estar bien, necesitas de alguna manera, poder usar espacio sin tener que poner algo extraño aquí, justo el espacio único porque esto es bastante a menudo nuevo. Así que el espacio más de uno tras otro. ¿Bien? Entonces cuando tengas algo como esto, entonces se eliminarán todos estos espacios, pero uno. Observe que aquí tenemos nuestro texto de muestra, texto de muestra. Y bueno, aquí simplemente no hay espacio, así. Solo hay un solo espacio, no tantos espacios. ¿Bien? Entonces estos son caracteres blancos y no son interpretados por HTML, ¿verdad? Bueno, por el navegador web que interpreta HTML para ser precisos Y bueno, ¿cómo podemos romper las líneas? Podemos romper las líneas usando algo lo que se llama párrafos, ¿verdad? Estos se utilizan para crear secciones, ¿verdad? Y la etiqueta que crea párrafos se llama P. De ella significa párrafo. Y bueno, podemos ponerlo aquí. Por ejemplo, esto vamos a ver aquí. Como pueden ver, ponemos el párrafo, y sí, funciona bien. Ya tenemos aquí el salto de línea. Esta línea está aquí y el contenido que está después de esta tacha, así que todo ese contenido está justo debajo de esto También hay algún tipo de margen entre esto y el resto del contenido de nuestro lado cuando agregamos el ta. Vamos a agregarlo a otras partes de nuestro k. Código. Por ejemplo, hagámoslo en esta cosa. Tenemos que seleccionarlo o podemos usar el atajo. Hay un atajo que puedes saltar desde el lugar donde pones esta cosa parpadeante y usar el Shift más n, entonces puedes seleccionar todo el código aquí, y luego puedes usar qué control más shift más P, y usar el MED rub con abreviatura o usar el atajo que tienes programado aquí Lo que puso la P. Ahora cuando nos refrescamos como pueden ver, le pasó lo mismo a esto. Tenemos ahora el margen inferior al fondo de esto aquí, y ahora se ve mejor, ¿verdad? Por eso usamos párrafos para poder romper las líneas y hacerlas un poco más fáciles de leer. Ahora pongamos aquí también el párrafo. Sugiero tomar todo el texto de muestra completo en un párrafo. También puedes hacerlo. Esta cosa creo que también debería ser así y así. Sin refrescar. Como puedes ver, este texto es un poco más fácil de leer. 8. Etiqueta void y rompe la línea<br />: Hola, amigo mío. Día. Vamos a hablar de algo, lo que se llama impuesto nulo. ¿Bien? ¿Qué es nulo? El vacío es solo el vacío, ¿verdad? Significa que la etiqueta no tiene final. Entonces sí, esta es una etiqueta que tiene apertura pero no tiene final. Y hay muchas etiquetas como esta, pero aprendemos solo una en esta conferencia, y hablaremos de etiqueta que se llama cerveza que significa descanso. Como su nombre indica rompe la línea, ¿de acuerdo? Y simplemente no hace nada más, ¿ok? Simplemente rompe la línea. Por eso no necesitamos hacer algo como esto. Break break, ¿verdad? Porque bueno, simplemente no hay contenido que poner aquí, ¿verdad? Entonces por eso sólo lo vamos a escribir así. Esto es solo una baraja vacía que no tiene final, ¿de acuerdo? Y cuando lo uses, agregarás la línea de freno. Como cuando usas el párrafo. Pero cuando uses párrafo, fíjate que También hay margen entre un texto y otro. ¿Correcto? A veces no quieres un comportamiento como este. Así que imaginemos que tenemos tu texto de muestra de texto de muestra de texto de muestra. Digamos que queremos tener qué ruptura entre cada una de esta línea, ¿verdad? Entonces simplemente haremos algo como esto. Y ahora, bueno, desde el último, no necesitamos agregar porque hay párrafo se puede ver, acabamos de romper la línea. Y solo una sola, ¿verdad? Línea, y no agregamos el margen. Así funciona la línea brak. Puedes saber, agrega tantas como quieras, frak lines, como puedes ver, esto simplemente romperá las cosas, tantas veces como escribamos la BR Verás en el futuro que algunas personas escriben el impuesto nulo usando algo así como el corte aquí al final, ¿de acuerdo? ¿Y por qué es eso así? Porque sugiere que esta etiqueta no tiene final. Pero hay una cantidad tan pequeña de las etiquetas de vacío que aprenderás en el futuro, que creo que simplemente no se ve bien. Mira, el código como este anterior sería más grande, ¿verdad? No es tan fácil de leer. En mi opinión, no deberíamos simplemente usarlo. En algo lo que se llama HTML, había una obligatoriedad de usar algo así, ¿verdad? Se requirió simplemente informar al hermano que hay un cierre. Este es el ataque que no tiene final, ¿de acuerdo? Pero como estamos usando la versión más reciente de HTML, esta es la más antigua. Simplemente podemos escribir BR, y no necesitamos agregar aquí el slash Estoy hablando del corte aquí solo porque bueno, cuando miras el código que va a escribir alguien más, bueno, es una buena idea entenderlo, ¿verdad Te sorprendería. Oye, ¿por qué este tipo agregó aquí la baraja Ahora, ya sabes, lo agregó porque bueno, probablemente esté tratando de cumplir con algunos requisitos adicionales agregados por la HTM. Pero ahora no se requiere, así que creo que vamos a ponerlo así. Entonces BR, nuevo TA que apenas rompe la línea. No agrega el margen como el párrafo. Esa es sólo la lección. Muchas gracias. 9. ¿Qué son los atributos? [título] y [lang]: Hola, amigo mío. Hoy, ¿aprenderás qué es un atributo en HTML? Aprenderás atributo que se llama lenguaje del título, y aprenderás un atajo que agrega un atributo con la ayuda de algo lo que se llama met. Agilizará la forma en que codificas tu HTML. Entonces comencemos desde el atributo. ¿Qué es eso? Imagina a una persona, una persona en un juego, así que algún tipo de personaje. Y este personaje tiene algún tipo de vitalidad, reflejo, inteligencia, carisma Esto es atribuir juego. Entonces, ¿qué atributo describe? Describe información adicional adicional sobre el carácter. Y aquí pasa lo mismo. Si quiere agregar información adicional sobre el archivo HTML como este. Como, por ejemplo, queremos informar al navegador web qué tipo de idioma estamos utilizando. Vamos a usar atributo, eso se llama lenguaje. No tecleamos idioma, sino que el atributo se llama ang. Es un atajo, así que tecleamos lang. Y luego tenemos que escribir el signo igual, las comillas, y luego poner dentro del valor que representa qué lenguaje estamos usando de nuestro lado. En nuestro caso, es qué, es inglés, así que vamos a escribir E n. Entonces este es el nombre del atributo, el signo igual, las comillas y el valor. Así es como creas atributos que son información adicional sobre la tachueta Igual que en el personaje de los juegos de computadora. Entonces la pregunta es, ¿de dónde viene el atributo? Bien. Vamos a eliminarlo y vamos a usar el control de acceso directo más espacio. Y como pueden ver, tenemos muchos de ellos. La pregunta es, ¿ necesitas conocerlos todos? No, hay algunos que son menos, ¿ y necesitas aprenderlos principalmente? A veces necesitarás algunos atributos raros que están aquí, pero no necesitas, ya sabes, aprenderlo de memoria. No te preocupes. Esto no es algo que vas a necesitar aprender y recordar todo de memoria. Esto sería difícil, y no creo que sea totalmente editada. Así que no te preocupes, ¿de acuerdo? Vamos a aprender el más importante, y esto es totalmente suficiente para, ya sabes, codificar en HTML. Así que volvamos al lenguaje. Y como puede ver, ahora podemos poner su valor. La pregunta es ¿qué tipo de valor debemos poner aquí? ¿Es este valor correcto? Bueno, no, los valores para el idioma están en la referencia del código del idioma HTL, necesitas escribir algo así en Google y escribir los códigos de idioma, y encontrarás los códigos correspondientes para el idioma sobre el que estás creando tu sitio web Entonces por ejemplo, digamos, el polaco es P. Este es el lenguaje que voy a usar. Pero para el inglés, como puedes ver, es E N. También si eres de francés, F R, y así sucesivamente. Entonces este es el valor que vamos a usar. Pero aprendamos sobre siguiente atributo que se llama título. Título. Digamos que aquí queremos poner título. Arcadis dat se ha casado desde cuando. El título es un atributo que va a crear algún tipo de información sobre herramientas con el valor que vamos a poner al atributo title Envolvamos mérito con algún tipo de etiqueta como, por ejemplo, B. Y ahora podemos poner aquí el título del atributo, que es el nombre del atributo, y el valor en este caso es lo que queramos. En este caso, queremos poner desde cuando me casé, por ejemplo. Ya que esto es bastante importante saber, al menos para las mujeres, así que espero no haber cometido un error. Vamos aquí. Como puedes ver, cuando refrescamos nuestra página y pasamos el cursor, movemos el mo sobre el texto aquí Tenemos el tooltip desde 2017. Este es el momento en que me casé. Y así es como funciona. Das información adicional para la descripción sobre herramientas. Título, de verdad, creo que sería mejor nombre, pero ellos llaman al título, y esto da información adicional sobre la tacha, como, por ejemplo, B, y el texto dentro de él En este caso, crea información sobre herramientas. Este es el siguiente atributo que has aprendido. Ahora aprenderemos un atajo que agrega un atributo con la ayuda de MET. Esto es bastante genial. Mira, cuando tienes ET, realmente podemos hacer algo como esto. Por ejemplo, P, y luego podemos usar el corchete y podemos escribir el nombre del atributo. Entonces cuando golpeamos Enter, como puedes ver, tenemos el nombre del atributo dentro. La etiqueta de apertura. Podemos poner el valor aquí. Bueno, podemos poner el valor aquí también, como, por ejemplo, desde 2017, pero como pueden ver, esto no es bueno. Necesitamos usar el esquema de cotización, y para ser honestos, controlar el espacio. Como pueden ver lleva algún tiempo. Prefiero poner el valor manualmente después. Entonces, a corchetes para poner el atributo dentro de la etiqueta de apertura. Pero hay momentos en los que incluso puedes mejorarlo. Puedes ver que puedes multiplicar cuántas veces quieres que la etiqueta la repita. Entonces esta es la versión más fácil, pero puedes poner también el nombre del atributo y puedes repetir muchas veces algo. Esto te está haciendo codificar más rápido. Pero no es que necesites debes recordar todos estos atajos. Es bueno conocerlos, pero puedes codificar manualmente, no pasará nada. Esto es cosas bastante avanzadas que te estoy mostrando aquí ahora mismo. Esto sólo va a acelerar tu trabajo. Pero si solo estás feliz divertirte con HTM no te preocupes por los atajos que te estoy mostrando. Hacer las cosas más rápidas, pero no es como algo que se necesita. Simplemente puedes escribir todo manualmente. Pero esto es genial para poder envolver las cosas más rápido. Simplemente puedes hacer doble clic sobre él, luego usar el atajo con el MSO Control más C más B y puedes usar el wrap con abreviatura de la que hablé, puedes seguir vinculándolo, y luego solo puedes escribir B, el título, y solo puedes escribir aquí así Esto es un poco más rápido que hacerlo manualmente. Pero no es como si pudieras hacerlo, ¿verdad? Se puede tocar algo este título. Entonces, es como uno, 2 segundos más rápido, pero, el tiempo es precioso. Entonces realmente depende de ti. Se aprende lo que es atributo. Esta es información adicional que agregas al impuesto. Esa es sólo la lección. 10. Etiqueta neutral<span></span>: Hola, amigo mío. Hoy, aprenderás sobre un ataque que se llama span, ¿de acuerdo? ¿Y qué hace? Bueno, no hace nada. La pregunta es, cuándo sería un momento en el que se quiere crear un ataque no hace nada. Bueno, fíjate que cuando quisimos agregar atributo title, que muestra una descripción sobre herramientas con el valor desde 2017 Bueno, tuvimos que agregar una etiqueta B, por ejemplo, o necesitaríamos usar aquí otra etiqueta de la que aprendimos, por ejemplo, A, ¿verdad? O muchas otras etiquetas que están en el HTML, pero la mayoría de las etiquetas en HTML le hacen algo al contenido. Como por ejemplo, el mérito del contenido estaba en negrilla. Y eso no es algo que siempre quieras tener. Como por ejemplo, aquí, no quieres tenerlo en negrilla. Queremos que sea solo un texto simple, pero queremos seguir agregando un atributo. Y ese es el momento en el que usas una tachueta que se llama span. Como puedes ver, no cambiamos nada en el texto, pero cuando movemos el mouse sobre el texto, todavía tenemos la descripción sobre herramientas Entonces sí, ese es el momento en el que usas el span. Esto es algo que simplemente no hace nada. Entonces, para ser honestos, span es solo tach neutral Simplemente no hace nada, pero te da oportunidad de agregar atributos como aquí, sin estilizar, sin, por ejemplo, negritar el contenido Eso está todo en esa lección. Gracias. 11. Instalación de extensiones en VSC: AutoRenameTag: Hola. Hoy, aprenderás a instalar extensiones dentro del código de Visual Studio, en base al problema que ocurrió en la última conferencia. Observe que lleva tiempo cambiar el spam para ser. Tuvimos que cambiarlo en dos lugares, ¿verdad? Y el tiempo es precioso, como siempre digo. Entonces, ¿hay alguna extensión que pueda hacerlo por nosotros? Bueno, podríamos buscarlo. Observe que aquí tenemos algo así como el botón que tiene extensiones toll tip debajo de él, al hacer clic en él, puede buscar extensiones e instalarlas. Puedes buscar extensión para HTML. Como puedes ver, hay muchos de ellos. Bueno, puedes instalarlos si quieres. Puedes echarles un vistazo, divertirte con ellos, puedes leer sobre ellos, qué hacen y así sucesivamente. Pero no te concentres en ello ahora mismo porque primero necesitas aprender HTML y saber qué podría ser útil para ti. Te voy a mostrar cuáles son útiles para ti cuando llegue el momento. Como ahora, queremos tener la etiqueta como aquí, automáticamente cambiada cuando la cambié aquí, quiero que se cambie aquí, ¿verdad? Entonces, ¿cómo podría llamarse? A lo mejor vamos a escribir Auto O aquí. Cambiar el nombre automático de la etiqueta. Sí, queremos cambiar automáticamente el nombre de la etiqueta. Vamos a instalarlo. Y esperemos un segundo. Está instalado. Como puedes ver, aquí puedes ver Incluso alguien mostró lo que sucede cuando lo usas. Mira está escribiendo aquí, también el que está escribiendo aquí arriba. Ahora mismo, cuando queremos cambiar span a, oye, es V a Italia. Oye, es itálica. A lo mejor al lapso otra vez. Es Span otra vez. Eso es genial, ¿no? Entonces, las extensiones son bastante útiles, pero necesitas saber lo que buscas. Ya sabes instalar extensiones. Sabes que puedes leer sobre ellos aquí. Y bueno, ya sabes cómo usarlos, ¿verdad? Solo tienes que instalar, y están instalados eso es bastante fácil. Y como pueden ver, hemos instalado algo. Eso es bastante útil, ¿verdad? Nosotros no queremos usar el p tack aquí, queremos cambiarlo por algo nuevo que aprendamos en el futuro, por ejemplo, Sección O todos lo harán bastante rápido Eso está en la lección. Muchas gracias. 12. Atributo: ¿cómo cambiar el color de fondo?: Hola, amigo mío. La lección de hoy es bastante importante. ¿Por qué es eso así? Porque aprendes sobre el atributo que se llama estilo. Es un atributo bastante importante que vayas a ver mucho en el futuro. Además, aprenderás a cambiar el fondo de tu página. Y aprendes sobre el atributo Big cool que está en desuso, y aprendes lo que significa desuso Entonces, ¿dónde crees que puedes dar información adicional respecto a los antecedentes de nuestra página? Dónde está un atributo como este. Está dentro de la etiqueta corporal, ¿verdad? Estar bien, cuerpo es cuerpo de nuestro sitio web, y también puedes poner aquí y cambiar el color de fondo. Entonces, cuando usamos el espacio Cro plus, como puedes ver, puedes elegir el atributo de color BG, que significa color de fondo. Al mover el ratón aquí, se puede ver ese color de fondo para el documento. Pero también hay algo más de información aquí. Este método no es conforme. use la propiedad de color de fondo CSS lugar, use la propiedad de color de fondo CSS en el elemento. Porque, bueno, esto está en desuso, lo que significa que ya no se usa atributo Entonces, ¿por qué te estoy mostrando esto? Deberíamos aprender cosas nuevas, ¿ verdad? Bueno, eso es cierto. Pero siempre hay malos. Es bueno saber que hay atributos así. Es bueno saber que hay etiquetas así. Y cuando los veas en el futuro, van a entender cómo funcionan porque bueno, podemos aprender las nuevas formas, pero eso no significa que otras personas sigan usando las viejas formas, eso simplemente no va a pasar que todos dejemos de usar el color BG de repente, por ejemplo, ¿verdad? Entonces es bueno saber que existen. También fíjate que hasta el color aquí es rojo. Para que veas bastante rápido, lo que ya no se usa, ya sabes. Entonces esto está en desuso. Pero bueno, puedes cambiar el color BG demasiado pronto, así que algo como, por ejemplo, rojo, o puedes cambiarlo a naranja. Entonces puedes usar las palabras simples de color aquí, y puedes cambiar el color de fondo así. Bastante fácil sencillo, correcto. Pero hay una nueva forma de cambiar el fondo de la página, y lo vamos a usar ahora, que se llama el atributo style. Y cuando usas las citas aquí, guau, puedes hacer muchas más cosas que simplemente cambiar el color de fondo Y vamos a hablar estas otras propiedades aquí en futuras conferencias, pero aún así no se sienten abrumados en este momento Sé que acabas de ver muchas propiedades aquí, y podrías estar pensando, no, no, no, no, no, no, esto no es para mí. No voy a recordar todo eso. No te preocupes. Deberá recordar solo las propiedades más utilizadas en el futuro. Aprenderás sobre ellos. Y todos los demás. Bueno, los puedes encontrar bastante rápido. Mira, puedes escribir en Google, cómo cambiar el color de fondo en HTML. Bam. Y como puedes ver, puedes usar la propiedad CSS Background Color, que usamos ahora mismo. Esto es bastante rápido, ¿verdad? Simplemente puedes escribir en Google, cómo hacerlo, y descubrirás cómo hacerlo. Así que no te preocupes. No hace falta que recuerdes todo de memoria. Bien, ¿bien? Te acostumbrarás a las propiedades que más utilizas. Entonces como pueden ver, cuando haga clic en el Entrar aquí, volvamos aquí, Color de Fondo, le pego Enter. Yo agregué el colon aquí y el punto y coma, porque este es el lugar donde ponemos el valor para el color de fondo Para esta propiedad específica que cambia el color de nuestro sitio web. Y cuando uso el espacio Control plus, como pueden ver, ahora tenemos muchos colores que puedes usar aquí, ¿verdad? Como, por ejemplo, por ejemplo, Aqua. Ahora cuando volvamos aquí, como pueden ver, lo cambiamos a Aqua. Puedes usar cualquier color de esta lista. Pero también hay no sólo esto, fíjate que aquí tenemos el color. Esto es genial porque puedes ver instantáneamente cuál es el color al lado del nombre. Pero también fíjate que cuando muevo el mouse por aquí, tenemos un picker de color Eso es genial. Podemos movernos como, vamos, tal vez tal vez verdoso, tal vez hagamos algo como esto. Y haz clic en enter. Bueno, no necesitaba hacer clic en nada. Yo solo muevo el ratón por aquí no, aquí, por ejemplo. Como pueden ver, puedo cambiar de color. Pero notarás que nuestro color cambió a algo raro, que se llama G B, rojo, verde, azul, ¿ok? Se puede mezclar rojo con verde y azul. Y dependiendo de la cantidad de enrojecimiento que haya o verde o azul, puedes crear colores. Puedes poner, por ejemplo, uno aquí, como puedes ver, ahora no hay mucho rojo. Ahora vamos a poner uno a azul, y como se puede ver, esta cosa se va a poner más verde, Este es el valor máximo como se puede ver ahora, es bastante verde. Cuando ponemos aquí uno, es negro. Cuando ponemos aquí 255, va a ser rojo, rojo, con 25, va a ser rojo, pero no tanto, ¿verdad? Por ejemplo, 19, como pueden ver, estamos llegando al color rojo bastante rápido. Pero para ser honestos, ¿por qué molestarse en aprender todo esto cuando solo podemos usar el seleccionador de color Esto es bastante genial. Pero esto es dentro del estudio visual. Estás usando un editor diferente, no te preocupes, no te preocupes. Totalmente, no te preocupes porque puedes encontrar seleccionadores de color en Google, puedes escribir Color Picker HTML, y encontrarás uno bastante rápido Entonces así es como cambias los colores. Usando el rojo verde azul. Pero es bueno saber que cuando, por ejemplo, nombres geniales HTML, habrá un sitio web como este. Como puedes ver, cada nombre como este tiene una cosa extraña correspondiente como este. ¿Qué es eso? Bueno, usemos el color chocolate. Así, esta vez. Como puedes ver, conseguimos el color chocolate. Si escribimos chocolate, también va a ser lo mismo. Esta cosa se llama X. Y para ser sinceros, es lo mismo como rojo verde azul, esto d dos cuando cambias, vamos a teclear hex a eso. Como puedes ver, vamos a teclear d dos, y es 210. Si tuviéramos rojo verde azul, así, serán 210. Entonces tendremos que traducir la siguiente parte, que es 69, 69, que es 105. Y luego le haremos lo mismo a una A. Esto es solo x, y esta es simplemente una manera diferente de representar, como pueden ver, le referí las mismas cosas. Aquí, cuando usas el convertidor de color de manera un poco más rápida. Yo sólo quería mostrarte cómo funciona. Vamos a copiar esto Aquí, como pueden ver, es 20010530 Lo mismo que tenemos aquí. Entonces esta es simplemente una representación diferente. Es hex. Se llama representación hexadecimal de rojo verde azul. Manera de cambiar los colores. Entonces puedes cambiar de color usando el RGB, puedes cambiar de color usando la X o por ejemplo, HSL, realmente depende de lo que quieras hacer. Son la diferencia para ser honestos no, prefiero esta cosa porque es la más corta, y toma la menor cantidad de espacio. Entonces prefiero usar este el X uno. ¿Bien? No obstante, ¿son los dos colores? Bueno, podríamos detener esta conferencia porque aprendimos a cambiar el color de fondo. Sabemos que el color PG está duplicado, lo que significa que ya no se usa, sino que funciona. Pero podría dejar de funcionar, así que es bueno cambiar a cosas que funcionarán para el futuro. Sabemos que el atributo stall tiene muchos en propiedades que debes recordar. Sin embargo, ¿cómo elegimos los colores? ¿Esos son los dos colores? Bueno, como puedes ver aquí del lado izquierdo, puedes leer muchas cosas sobre los colores. Te recomiendo leerlas. Pero lo más importante de esto de aquí, creo que son las ruedas de color. Observe que aquí tenemos rueda de colores RGB, y esto se ve asqueroso, Pero cuando te mudas aquí, esto se ve increíble, ¿verdad? Esta voluntad utilizada por pintores, artistas y diseñadores. ¿Por qué? Porque esto se ve increíble. Y estos son colores que simplemente se mezclan muy bien, ¿de acuerdo? Y estos son colores que debes usar. Y lo genial aquí son las combinaciones de colores de mirada. Cuando hago clic en él, y voy a, por ejemplo, gritos de color monocromático W, podemos elegir el tema del color para toda nuestra página web, podemos ver cómo se vería en diferentes lugares, así, podemos movernos y podemos hacerla un poco, por ejemplo más oscura, así. Por ejemplo, me gusta esta cosa. ¿Y ahora qué? Bueno, yo solo elegiría estos colores aquí y los copiaría a mi página web, y funcionará. Si quiero, por ejemplo, esto en nuestro color de fondo, simplemente copiaría esto aquí. Así. Y oye, eso funciona. Bastante genial. Por supuesto, en el futuro, aprenderás a cambiar la parte del color del sitio web y así sucesivamente, así que no te preocupes, cómo cambiar el color del texto y así sucesivamente. En esta conferencia aprendiste a escoger colores para el futuro. Entonces hay muchos otros esquemas, como, por ejemplo, este, como puedes ver, este se ve un poco diferente, pero aun así se ve bien. Puedes hacer que se vea como quieras y hacer que los colores se mezclen bien. Normalmente, es bastante duro, realmente, incluso usando el seleccionador de color así Vas a elegir uno o tal vez dos colores bastante bien, pero si quieres tener unos colores más que se mezclen bien, entonces es bastante difícil. Solo usa la combinación de colores. Te va a ahorrar mucho tiempo y tu sitio web se verá bastante genial. Esa es sólo la lección. Muchas gracias. 13. Añadir imágenes a tu sitio web: Hola, amigo mío. El día de hoy, te mostraré cómo agregar una foto, una imagen a tu sitio web. En primer lugar, necesitamos usar una nueva etiqueta que se llame IMG, bien así Entonces IMG significa imagen. Tan fácil de recordar. Bien. Pero fíjate que no hay etiqueta final, ¿verdad? Lo mismo que cuando usamos la línea de freno. Entonces simplemente no hay etiqueta final. Y bueno, puedes cerrar la etiqueta de imagen usando el slash como aquí Esta es la información de que esta etiqueta está cerrada en el mismo lugar. Pero no es necesario, ¿de acuerdo? Eso no es obligatorio. Se requirió. Si estabas usando X HTML. Entonces, si conoces a alguien que hace algo así, entonces no te preocupes vamos a trabajar, ¿verdad? Puedes hacerlo, pero no necesitamos hacerlo. Así que no te preocupes. No lo hagas. Y ahora hay algo importante, ¿cómo agregar esta imagen? Bueno, si no hay etiqueta final, significa que todo lo relacionado con la imagen está dentro de esta etiqueta, y le damos esta información adicional usando el atributo, ¿verdad? Eso se llama S RC. Fuente. Es sinónimo de fuente. Entonces ponemos aquí la fuente, así ponemos el valor de donde queremos obtener la imagen. Bueno, ¿dónde está nuestra imagen? Primero, tenemos que ponerlo en nuestra carpeta. Como pueden ver, tenemos aquí, por ejemplo, el que JP G, y lo podemos poner aquí. Así que solo muévelo a los gatos así, o simplemente podrías hacerlo así, moverlo a nuestro editor y moverlo aquí. Y como pueden ver ya está aquí. Como puedes ver, podemos abrirlo, puedes mirarlo. Podemos ver alguna información sobre la imagen aquí, el tamaño, el ancho, la altura, y cuánto toma en nuestro disco y su nombre. Ahora cuando usas el atajo contro plus space, como puedes ver, me sugiere que puedo agregar el que JP aquí Y para ser honestos, eso es todo. Como puedes ver, agregamos imagen a nuestro sitio web. Es bastante grande, pero lo agregamos y funciona bien. La pregunta es todo En primer lugar, centrémonos en el nombre. No pongas nombres a tus imágenes así, ¿ok? Esta es una mala idea. Debes cambiarle el nombre para asegurarte de que el nombre represente lo que hay en la imagen. Esta imagen representa el bajo. El tipo de guitarra es el bajo. Creo que deberíamos simplemente renombrarlo, hacer clic derecho, renombrar o el atajo F dos, y llamémoslo bajo. O el bajo de guitarra, lo que sea. Observe que aquí no usé el espacio. Yo no lo hice así. Cada palabra, deberías conectarte usando el guión aquí así. No deberías usar espacios dentro de los nombres. Además, no pongas nombres a tus archivos así. No utilice la mayúscula. Solo estuche pequeño. Y bueno, así es como lo hacemos, ¿verdad? Si solo lo nombras, ahora es más autodescriptivo . Entonces cambiamos el nombre. Y bueno, aquí no cambia nada, pero se ve mejor ahora no solo para nosotros, sino también para los barcos de Google que cuando miran el nombre, pueden, ya sabes, ver qué trata esta página y qué contiene este archivo, ¿bien? Tal vez los bots puedan analizar imágenes que se utilizan con frecuencia. Pero la imagen así, bueno, es difícil interpretar qué es exactamente lo que hay aquí. Es un bajo. Hay algún tipo de velas, le será difícil interpretarla. Pero aquí puede tomar este bajo de aquí, y lo sabe, eso es un zumbido de guitarra. Esta página es probablemente sobre guitarras. Entonces es buena idea nombrar a tu pis así. Entonces ya sabemos cómo adjuntar la imagen. La pregunta es, qué hacemos cuando, por ejemplo, algo sucede así. Entonces la imagen no bajará. Como pueden ver, aquí hay algo así, y podríamos poner aquí un mensaje alternativo. Entonces A significa mensaje alternativo. Entonces el otro mensaje, qué debería hacer la computadora cuando hay algo mal con la fuente. A lo mejor el servidor se fue abajo, algo así. Debe escribir aquí lo que aquí se representa. Por ejemplo, bajo, p. como puedes ver aquí tenemos buena ahora información bus guitarra. El problema es que también ahora es que esta cosa tomó algo de espacio. Observe que tomó tanto espacio. Si tuvieras texto aquí, querrías que estuviera todavía aquí. No querrías destruir cómo se ve tu página. Y por eso siempre debes especificar la propiedad con, que le damos el ancho de tu guitarra. Es 680 y la altura es cuanto 1024. Y como pueden ver, ahora cuando hacemos una flecha aquí, como pueden ver, tenemos un buen bajo aquí, la descripción, y pero hay algo que sostiene el lugar para nuestra imagen. Entonces esto especifica la onda y la altura, y también es bueno para hacer que tu sitio web se cargue más rápido porque se va a renderizar, por lo que va a crear el contenido de tu sitio web más rápido cuando sepa qué tamaño son las imágenes de tu lado. La velocidad de carga de tu sitio web. Podrías cambiar, por ejemplo, con algo como, no el tamaño que hay aquí, así. Pongámoslo así. Como puedes ver, funciona bien, pero no se ve bien. No obstante, si quitas la piel, fíjate que, va a ser proporcionalmente. Cambio, ¿verdad? El tamaño se cambia proporcionalmente. Entonces significa que cuando cambies el con, la altura va a ir en consecuencia a la wi, derecha Así que eso es bastante genial, tal vez. Podrías estar pensando que puedes establecer también la altura y va a cambiar la con. Entonces se ve bien. El problema es que no debes usar esto. Bueno, a lo mejor si lo usas una vez, entonces no pasará nada malo. Pero si lo usas muy a menudo, entonces estás haciendo que tu sitio web se cargue más lentamente. ¿Por qué? Porque nosotros el navegador web teníamos que hacer el trabajo por ti, tuve que cambiar el tamaño de tu imagen. Así que lleva algún tiempo. Lo siguiente es que note que esta imagen toma aproximadamente la mitad del megabyte, 462 kilobytes Si hubieras cambiado el tamaño aquí, por ejemplo, como hicimos aquí, el con a 320. Tiene el con que es dos veces más pequeño, así. Entonces esta imagen tomaría sólo 250 kilobytes aproximadamente así Es dos veces más pequeño. Tu sitio web, cargamos más rápido. Si tienes que cambiar el tamaño de la imagen, hazla manualmente, ábrela en algún tipo de editor que edite las imágenes y hazla manualmente No lo hagas a través de puedes hacerlo por aquí, pero trata de evitarlo. Lo mejor es simplemente poner los valores que están aquí para acelerar tu sitio web y asegurarte de que todo se vea bien. De esa manera, su sitio web será más fácil de leer para los robots para bots de Google, y su sitio web se ubicará más alto. ¿Eso sólo a la conferencia? Bueno, no, podemos insertar imágenes más rápido. Observe que cuando abro usando este signo inferior y menor que, la etiqueta, cuando abro así, necesito hacer manualmente lo que necesito para acceder manualmente a todos estos atributos. No obstante, cuando lo hago así. No uso este letrero aquí y solo escribo IMG. Ahora hago clic en Entrar. Como pueden ver, va a poner algo como esto aquí, y puedo poner la fuente y usar la palabra clave tab y saltar al mensaje alternativo como este. Es un poco más rápido, no necesito escribir EMG que la fuente Entonces solo escribo EMG bam Buzz guitar bam buzz guitar. Es más rápido. Entonces aprendiste que si quieres poner usando la función MET, que se instala dentro del código de visual studio por defecto, simplemente lo haces de esta manera. Esto es, también. Además, funciona para otros tipos. Por ejemplo, si quisiera crear el metatipo del que vamos a hablar, como puedes ver, podemos, por ejemplo, crearlo con atributos adicionales, y no necesitas pensar cómo crear cómo se llaman los atributos incluso dentro de este Simplemente lo haces así y algo llena el editor, que es gat porque no necesitas recordarlo. Y reviento las características así. Porque recuerda, eres una p, la persona creativa que debe crear las cosas. No deberías recordarlo todo de memoria. Esto no es necesario en la actualidad. Necesitas saber buscar cosas y necesitas saber cómo usarlas. Esa es sólo la lección. Muchas gracias. Y eso siempre, recuerda, si tienes alguna duda, no dudes en preguntar. 14. BONIFICA: ¿Dónde conseguir imágenes GRATUITAS en tu sitio?: Hola. El día de hoy, te mostraré cómo obtener fotos gratis, totalmente gratis en tu sitio. Se puede utilizar para ese sitio que se llama pexels.com o pixel.com o unsplash.com. Vamos a usar uno de eso. Digamos que estamos buscando los CT. ¿Bien? Quiero tener un sitio sobre CAT. Entonces digamos que queremos encontrar un gato que estará en nuestra página web. Como puedes ver, estas fotos, son hermosas, ¿verdad? Son bastante impresionantes. Esto no es Esto realmente funciona que normalmente tendrás que pagar. Estos son gratuitos. Simplemente puedes hacer clic en él, hacer clic en la descarga gratuita o mover el mouse aquí, e incluso puedes cambiar el tamaño de la imagen, así que va a ser un poco más pequeña. Creo que la versión más pequeña es mejor. Vamos a hacer clic en la descarga gratuita, haga clic en Bien. Y como pueden ver, hemos descargado el archivo. Como puede ver también, el nombre de este archivo no es bueno, ¿verdad? Porque bueno, aquí tenemos un corte, y el nombre siempre debe representar lo que hay en la imagen. El color de este cd es el jengibre. A lo mejor llamemos al archivo jengibre cortado. Vayamos aquí otra vez, y llamémoslo corte de jengibre. Es mejor, definitivamente mejor nombre. Además, debes agregar un atributo cuando estés adjuntando la imagen de tu lado, alternativa y escribe el corte de jengibre, por ejemplo. Así que solo hazlo por tu cuenta ahora mismo porque necesitas hacer ejercicio. Es necesario escribir el código. Simplemente puedes ver el video. Cópialo en tu carpeta. Claves, y solo agrégalo a tu sitio web. Creo que deberías practicarlo un poco aún más y jugar con estos lados. Diviértete y busca algo de inspiración porque realmente, puedes encontrar muchas fotos geniales aquí y aquí y aquí, juega con ella, agrega algunas a tu sitio web, que puedas divertirte y saber cómo hacerlo sin pensarlo. Esa es como esa lección. Muchas gracias. 15. Cómo obtener el tamaño img con el atajo de VSC: Hola. hoy te mostraré cómo establecer el ancho y la altura de la imagen de manera rápida y fácil. Porque normalmente necesitarás abrir la imagen. Puedes hacerlo un poco más rápido, no usando el Explorador de archivos usando su control y haciendo clic izquierdo sobre él. Y como se puede ver, la imagen se ha abierto. Y aquí en esta esquina tenemos la anchura y la mitad. El problema de esta solución es que necesitamos memorizarla ahora, ¿no? Entonces cuando hago clic aquí, necesito recordar el ancho es lo que creo ver escáner y 80 entonces no recuerdo la altura, ¿verdad? Necesito volver a hacer clic aquí, así que lleva tiempo, ¿verdad? Y no nos gustan las cosas que llevan tiempo. Coloque su cursor dentro de la etiqueta de imagen y luego use el atajo F1 o contour plot x3 plus b. Y ahora aquí puede escribir actualizar el tamaño de la imagen o simplemente puede escribir imagen. Como se puede ver, sólo hay una cosa como ésta. Al hacer clic en Entrar, tenemos bueno el conjunto de ancho y altura. Esto es bastante guay. Y también note que aquí puede establecer el enlace clave a algo que lo hará aún más rápido. No obstante, no lo recomiendo en esta situación. ¿ Por qué es así? Porque situación como esta no es como si lo hicieras todos los días, entonces eres imagen y te olvidas la mayoría de las veces. Entonces tal vez 23 veces por página, algo así. Y cuando usas estas cosas o cuando usas justo qué? F1 y luego escribe imagen y al hacer clic en Entrar, observa que esto es lo primero. Ahora, después de que abro esta parte superior derecha, dice lo usado recientemente, por lo que esto es realmente más rápido usando nuestro derecho es solo F1 entrar si tienes otra imagen. Entonces digamos Mira así. Entonces F1 entrar, F1 entrar, Son archivos bonitos, ¿verdad? Por lo tanto, no te preocupes por configurarlo. El atajo no sabía eso. Por lo que muchas gracias. 16. ¿Cómo enlazar a diferentes carpetas? Crea la teoría PATH: Hola, amigo mío. La cosa, el valor que ponemos aquí en el atributo source como valor se llama puff. ¿Por qué se llama Puff porque representa una manera de encontrar el archivo, verdad? Entonces, para poder encontrar el archivo bas gitar do JPE, tu computadora necesita buscar donde Bueno, en la misma carpeta donde este documento que estamos escribiendo en alguna muestra, ese HTML se encuentra actualmente en. ¿Dónde está? Está dentro de la carpeta CatS. Bien Así que salta de aquí para aquí. Todo está bien porque bueno, la imagen está apareciendo. La pregunta es, ¿qué tenemos que hacer cuando hay otra carpeta? Por ejemplo, vamos a crear una nueva carpeta, pero no desde aquí, sino usando el código de Visual Studio para aprender a hacerlo. Sólo tenemos que dar click en la carpeta Nut aquí y llamémosla, por ejemplo, imágenes. Porque esta carpeta contendrá imágenes. ¿Correcto? Bueno, en situación normal, no es buena idea poner todo tipo de archivo dentro de una sola carpeta, ¿verdad? Porque, bueno, si tu proyecto crece, simplemente te perderás. Así que pongamos imágenes dentro de la carpeta de imágenes. Vamos a moverlo aquí arriba, y hagamos clic en Mover. Bien, entonces ahora es bueno, pero el problema es que nuestras imágenes desaparecieron. Para llegar a las imágenes de la carpeta, necesitamos crear una ruta hacia ella. Y para poder hacerlo, necesitamos escribir imágenes. Como puede ver, nuestro código de Visual Studio nos está dando una pista, y luego la baraja, y luego el nombre del archivo Ahora como pueden ver, tenemos nuestra imagen de vuelta. Esto no apareció porque es camino mal escrito, pero aquí, todo está debidamente escrito Y esto es bastante simple, ¿verdad? Solo tenemos que escribir dónde debemos buscar desde el archivo aquí. Pero esto no es todo en este tema. No detengas esta conferencia porque hay situaciones que son más difíciles. Como, por ejemplo, vamos a crear una nueva carpeta, y llamémosla, por ejemplo, artículos. Digamos que vamos a poner sus artículos. Y vamos a mover este archivo aquí a los artículos, y bueno, eliminemos esto, y pongamos esto aquí. Entonces vamos a copiarlo aquí. Y como puedes ver, vamos a abrirlo artículos, y vamos a abrirlo con Firefox. Como pueden ver, aquí simplemente no hay nada. Sólo tenemos el mensaje alternativo, ¿no? Entonces eso no es bueno. Por qué no funciona Porque necesitas recordar que tu computadora está buscando el bajo y las imágenes donde. Cuando estamos en la carpeta de artículos, y la muestra de que dos HTML está aquí, lo está buscando aquí, donde se representa el archivo HTML, donde se crea. Entonces vamos a necesitar tenerlo aquí. Las imágenes deberían estar aquí. Pero no está aquí. Es una carpeta hacia arriba. Una vez, tenemos que subir. Pero, ¿cómo subimos? Y esa es una buena pregunta. Necesitamos usar dos puntos y luego slash. Y esto significa, oye, vamos a subir un directorio. Entonces F vamos a cerrar esto, y vamos a entrar en CATs, y luego vamos a buscar imágenes, y luego vamos a mirar dentro la carpeta de imágenes para este JP cinco en particular. Y como pueden ver, ahora funciona bien. ¿Bien? Entonces hay algunas formas avanzadas de moverse en carpetas. Esa es sólo la lección. Muchas gracias. 17. Cómo ver el código fuente de CUALQUIER sitio. ¿Qué son los comentarios?: Hola, amigo mío, ¿ sabías que puedes ver el código de cualquier sitio web? Sí, puedes ir a cualquier sitio web, totalmente a cualquier sitio web, y puedes mirar el código del sitio, puedes ir incluso a Google y ver cómo fue escrito, ¿verdad? Pero sólo la parte visible, ¿de acuerdo? No los antecedentes del sitio. Para que puedas ver la parte HTML de la misma. Entonces, cómo hacerlo. Usa el atajo, el Control más U. ¿Bien? Y como pueden ver, este sitio es realmente un sitio de script, ¿verdad? Ser, bueno, este sitio es bastante avanzado sitio. Pero cuando vas al sitio así, sigue siendo un poco duro. Aquí puedes ver algunas cosas que probablemente no se entienden, pero puedes ver cosas que sabes sobre el ejemplo, cuerpo, la cabeza, puedes aprender de cosas como esta. Aprenderemos sobre cosas que puedes ver aquí, la mayoría de ellas. Bueno, porque no vamos a hablar de, por ejemplo, Javascript, código que te permite cambiar de manera dinámica las cosas de tu lado. Esto es totalmente tema para otro curso. Tengo un curso al respecto, para que puedas encontrarlo o aprender este tema desde otro lugar. Pero bueno, se puede ver la fuente. Esto es lo más importante. Cuando vas a nuestro lado, uno que escribimos hasta ahora, cuando vamos a la fuente, puedes ver que esto es exactamente lo que escribimos aquí, y podemos copiar, pegarlo aquí y trabajar igual. Codificamos así. No, esto no va a suceder porque bueno, hay algunas referencias, como puedes ver, hay scripts que están en el archivo así, y necesitarás descargar todos los archivos que están conectados al costado si quisieras que funcione igual. También puede haber algún tipo de lenguaje que funcione en el lado servidor del sitio, como por ejemplo, PHP o tal vez el Python, bueno, no lo tienes, ¿verdad? Signos tan avanzados, no podrás copiarlo. Pero puedes aprender mirando cómo están las personas, por ejemplo, usando los DP de los que hablaremos de cómo usan las etiquetas, ¿verdad? Y cómo sentar esto cosas de las que hablaremos también. Esas son las cosas que puedes aprender del código que está escrito por otros. Entonces esto es bastante impresionante. Pero lo más importante de esta conferencia es qué son los comentarios y cuándo usarlos. Entonces los comentarios, como su nombre indica, son cosas que te permiten comentar algún tipo de código, por ejemplo, así que digamos que quieres comentar la imagen, ¿verdad? ¿De qué trata la imagen? Entonces, cómo hacerlo. Usas los signos así, el signo inferior, luego el signo de exclamación, y luego d. Y como puedes ver, el cierre para esta cosa es d y el mayor D. Y lo que sea que pongas aquí no va a ser interpretado Como pueden ver, cuando lo refresque, no está aquí. Y bueno, hasta podemos poner todas estas cosas aquí bajo el mando. ¿Cómo hacerlo? Bueno, puedes usar el atajo que se ve así, Control más slash Entonces yo solo salgate, y como pueden ver, ahora está bajo el mando Cualquier cosa entre esto y esto va a estar bajo el mando. Como puedes ver, aquí desaparecieron todos los textos. Pero sólo desapareció donde desde la vista del usuario, pero no de la gente que sabe codificar. Cuando vas a la fuente, usando el atajo Control plus, veo, bueno, estos comentarios están aquí. Así que no pongas aquí lo que quieras. No deberías poner aquí algunas cosas secretas, porque todo el mundo puede verlo. Entonces, ¿cuándo realmente usas algo así? ¿Sería buena idea describir la imagen que dije sobre Anteriormente? Bueno, puedes hacerlo, pero quizá sólo en código de desarrollo. El código de desarrollo es el código que tenemos aquí. Pero cuando pasas de nuestro lado, cuando lo transfieres a Internet, al servidor web, no es buena idea pasar todo el texto porque tu sitio web va a ser más grande por texto como este. Bueno, no es mucho, porque un personaje es muy pequeño, no está ocupando mucho espacio, pero cuando hay muchos personajes como este, imagina que tenemos hombre muchos comentarios y comentas todo, entonces tu sitio web se cargará un poco poco, poco rápido, más lento. Entonces esto simplemente no va a funcionar bien para ti. Porque la velocidad del sitio web es muy importante para posicionarse alto en Google. Así que no comentes todo. Pero por el bien de aprender, cuando estás aprendiendo algo, o cuando te estoy enseñando, es muy buena idea usar comentarios para decirte, IMG significa imagen, SRC significa fuente, y así sucesivamente Es una buena idea usar comentarios para eso porque bueno, No es genial tenerlo visible aquí, ¿verdad? Porque solo quería enseñarte cómo funciona esto, ¿verdad? No para mostrarlo aquí. Y además, la mayoría de las veces cuando uso cosas así es digamos que no quiero esta imagen por un segundo, y solo uso el control de atajos más slash, ¿verdad Y esta imagen desaparece. Y quizá más tarde, quiero volver a este código, y quiero tenerlo de nuevo. Entonces, está regresando. Así que la mayoría de las veces lo uso para esto, justo por solo comentarlo por un segundo, y luego vuelvo a ello o solo quiero describir algunas cosas para otras o formas, pero solo para la parte de desarrollo No cuando me estoy transfiriendo a Internet. Eso está todo en la lección. Gracias. 18. Metaetiquetas: Hola, amigo mío, nos enteramos que en la sección head de nuestro sitio web, debemos agregar información adicional respecto a nuestro sitio web, y agregamos el título. Hay etiquetas que se llaman Meta, las cuales se utilizan para este bien, para agregar información adicional. Y como pueden ver, esta etiqueta no tiene final. Puedes terminarlo así. Pero no se requiere, ¿verdad? Porque estamos usando el HTML de noticias. Entonces la metaetiqueta. Y debido a que esta es la etiqueta que no tiene cierre, usaremos atributos para especificar la información adicional respecto a nuestro sitio. Bien, entonces, ¿qué tipo de información podemos poner aquí? Empecemos por algo gracioso. Como, por ejemplo, el autor de este sitio. Bien. Entonces, cómo hacerlo. Necesitamos usar un atributo que le demos información adicional con respecto a la metaetiqueta. Y esto se llama nombre. Y especificamos aquí cosas como, por ejemplo, autor. Hay muchos otros nombres que permiten especificar, por ejemplo, descripción, por ejemplo, palabras clave, y así sucesivamente. Los aprenderemos cuando sean necesarios. En esta conferencia aprenderemos algunos de ellos, pero para ser honestos, no hace falta que los recuerdes a todos porque Esto es simplemente algo que probablemente copiarás pegarás de un lado a otro, ¿de acuerdo? Entonces, no te preocupes, no necesitas recordarlo de memoria. Bien, entonces nombre autor. Y ahora, el problema es, ¿cómo ponemos el contenido? ¿Cómo ponemos aquí el valor para este autor? Necesitamos simplemente crear otro atributo que solo contenga el contenido para el autor, ¿verdad? En este caso, soy el autor de esta parte. Escribiré Arcadis Vodac Esta información no es visible Tienes que ir al código fuente, y luego lo puedes encontrar aquí, ¿verdad? Y la información así puede ser utilizada por programas que analizan el sitio, y pueden, por ejemplo, mostrar ahora que el autor de este sitio es Arcadis Vodach Para ser honestos, este meta específicamente es para brack hey, este contenido fue creado, ese sitio fue creado por mí, ¿verdad Puedes escribir aquí el nombre de tu empresa y así sucesivamente. Pero hay metatatas que son utilizadas por, por ejemplo, Google, cuando está buscando cosas, busca algo, lo que se llama etiqueta meta descripción Como puedes ver, podemos usar el MET aquí para algunas de las metaetiquetas, desafortunadamente, no para autor, sino para la descripción, que especifica descripción de tu sitio. ¿Cuál es esta descripción? Cuando escribas aquí cortes, fíjate que tenemos aquí un título, que es lo que pasa aquí. Y tenemos algo así como descripción de tu lado. Sí, puedes especificar la descripción de tu lado aquí, en este atributo de contenido. Vamos a escribir algo. Los gatos son mascotas que a todos nos gustan. Vamos a minimizar esta cosa que a todos nos gusta. Los gatitos son adorables. Por ejemplo, hagámoslo así, para que podamos ver todo el texto y a ellos les encanta snacks de nuestro lado cty, algo así Bien, y tal vez te estés preguntando ahora por qué esto se ve así. Bueno, cuando estás creando una descripción, debes enfocarte en hacerlo amigable para la persona que está mirando la descripción de tu lado, ¿verdad? Y deberías usar las palabras clave que probablemente escribiría porque esto es algo que se puede tomar en el ranking de tu lado, ¿de acuerdo? Y también, cuando hay algo que sabes, gracioso aquí o tal vez hay algo que llame la atención del usuario. Él dará click a tu lado en el ranking. Mm. una mayor posibilidad de que lo haga, ¿verdad? Entonces esto es bastante importante para, ya sabes, yo uso los gatos, los gatitos. Yo uso el ti, ¿verdad? No usé solo, ya sabes, porque algunas personas describirían el sitio sobre gatos como Gatos, gatos, gatos, gatos para, ya sabes, conseguir más alto en Google porque Google toma en consideración cuántas veces fueron los gatos, por ejemplo, deletreados en tu sitio Te excedes, eso no va a ser bueno. Esta es una gran descripción, que, ya sabes, no parece que esté siendo creada para el robot. Ha sido creado para la persona. Y ahora, bueno, no creamos, por ejemplo, un lado sobre divertidas imágenes de cortes, pero ¿qué somos? Les encanta comer refrigerios de nuestros lados lindos. Por ejemplo, cambiemos el título a Kitty. Bocadillos. Lo mejor es que te den los refrigerios o algo así, ¿verdad? Y esto te hará subir en Google. Esta cosa puede ser tomada por Google como una sugerencia. ¿Qué poner aquí? ¿Por qué dije sugerencia? Porque bueno, Google podría pensar, Bien, estás mintiendo o tal vez hay una parte del sitio web que describe mejor tu sitio web, y él no lo incluirá. Pero la mayoría de las veces tomará esto en consideración. Entonces es una buena idea tomarse un tiempo para poner aquí lo que va a mejorar la calificación de tu lado. También hay una metaetiqueta que se llama la palabra clave tank, especifica las palabras clave. Las palabras que son clave a tu lado. En este caso, serían gatos, llaves, refrigerios, y así sucesivamente. Pero bueno, ya no toma en consideración esto porque la gente estaba haciendo spam aquí palabras clave, como por ejemplo, los cortes Cat Cat CCCC, y podría llevar a algunos, ya sabes, spam de Internet, Por lo que no toma en consideración. Pero puedes especificar las palabras clave por ti mismo aquí, solo por el bien de saber de qué se trata este lado, pero no es necesario para ser honesto. Entonces ahí está esta descripción, y tenga en cuenta que la pongo bajo el título. Puedes ponerlo donde quieras, ¿verdad? Pero para ser honestos, lo mejor es ponerlo bajo el título porque Ahora puedes ver exactamente el título y la descripción en un solo lugar. Si hubiera más contenido aquí y tendrías descripción aquí aquí título, esto sería un poco desordenado, ¿verdad Esta no es una buena manera de codificar las cosas. Así que pon la descripción aquí. Aquí hay autor por ejemplo, y eso es bonito. Bien. Hay algunas otras metaetiquetas, pero solo hablaremos ellas cuando sean necesarias, Creo que esta sería la mejor manera de aprender cosas nuevas. El en la lección. Muchas gracias 19. Charset: encoding apropiado en tu sitio web: Hola, amigo mío. Hoy, vamos a hablar de una codificación adecuada en su sitio web. Imagina que tienes un foro. En este foro en este tablero, hay muchos temas con personas de diferentes países. Al igual que, por ejemplo, de Polonia, cierto, note que estamos usando aquí un carácter que se llama L en polaco, y este es un personaje que no está en todos los teclados, por ejemplo, ¿verdad? Entonces hay algún tipo de codificación que sucede en el fondo que muestra esta letra. Letras normales como esta, como AB CDFG y demás, la que están en casi todos los idiomas, van a ser interpretadas sin ningún problema Pero como éste, esto podría dar algunos malos resultados, esta cosa se puede interpretar. Voy a hacer algo muy rápido ahora. Fíjate en eso, eso puede ser así. Estoy volviendo a lo que era antes, y pronto explicaré lo que pasó. Entonces Esto puede ser interpretado de manera confiable, y debemos evitar situaciones como esa porque queremos ser profesionales. Queremos tener codificación que siempre nos aseguremos de que todo se vea genial en su sitio web. Para poder hacerlo, necesitamos codificar tu sitio web, igual que el archivo está codificado. Como puede ver, la codificación básica, que se dice ahora mismo, se llama UTF ocho Esta codificación es bastante genial porque siempre interpretará todo correctamente. Pero también hay que agregar aquí en la metatag usando el. Como puedes ver, EMT, podemos usar esta cosa, el atajo aquí, y obtendremos una metatag con este aspecto Y esta cosa, como puedes ver, dice, tipo de contenido equivalente HTTP, y el contenido es Tex HTML, y el conjunto de autos es UTF ocho Se honesto, es difícil de recordar, siempre lo copio y pego de un lugar a otro porque esto sería horrible recordarlo. Y esta cosa, asegúrate de que todo se va a interpretar correctamente, ¿ok? Pero hay que recordar siempre este el archivo, y aquí tenemos la información también debe estar en la misma codificación como esta. Cuando lo refrescamos, como pueden ver, aquí, tenemos la codificación adecuada. Sin embargo, tal vez se esté preguntando antes de que este último también se interpretara correctamente. Sí. Pero Firefox, en esta versión es bastante nuevo, y sólo va a asegurarse que la versión por defecto y la va a interpretar correctamente porque esta codificación es bastante conocida y sólo va a adivinarla. Pero hay muchos programas, formas de abrir tu sitio. Créeme. En el futuro, aprende sobre ellos. No lo sé, mirando HTML a través de algún tipo de programa que interprete los correos electrónicos, y entonces tendrías problemas con las letras, por ejemplo, así Entonces es una buena idea poner la cosa aquí. Y tu sitio web se verá siempre bien. También debes saber que esta forma de escribir codificación es bastante antigua, y funciona en navegadores web antiguos y aplicaciones antiguas. Pero de alguna manera lo sugiere el código de Visual Studio. Creo que es solo porque bueno, quieren apoyar y tener siempre una codificación adecuada. Entonces, si quieres apoyar todos los navegadores web y así sucesivamente, usa este método. No obstante, si quieres ir con el tiempo, entonces puedes usar algo como esto. Car set atributo car set que solo establece el conjunto de autos en UTF H. Así que esto es igual a esto a continuación, pero esto no se soporta así como la tacha anterior, con estos Entonces tal vez te estés preguntando qué tan mal no se apoya. Para ser honestos, casi todos apoyarán esta cosa, casi, ¿verdad? Entonces depende de ti. Entonces usaremos esta cosa porque creo que es más fácil de recordar, ¿verdad? Y se ve mejor. Tiene menos caracteres, por lo que tu sitio web será mucho más rápido. Quizás no por mucho, pero, ya sabes, carta a letra y tu sitio web será más pequeño. Probablemente hayas notado que hice clic aquí al principio, algo así, y volví a abrir con codificación con diferente codificación de nuestro sitio web Mira, podemos usar, por ejemplo, 8892, que es la codificación central de Europin, y tiene caracteres de este lugar del mundo, Y cuando lo use, observe que el carácter L cambia. Cuando uso el control más Z, voy a volver a la codificación que teníamos antes, pero cuando me refresque aquí, como pueden ver, tenemos letra mojada. Porque el archivo está codificado en esta codificación. Entonces necesitamos también aquí tener la misma codificación, así. Como puedes ver ahora, funciona correctamente. Así que recuerda, necesitas tener siempre la misma codificación que tu archivo. La mayoría de las veces tienes esto con UTF ocho y no necesitas hacer nada más que agregar el Carset a UTF ocho aquí y todo funcionará correctamente Volvamos a lo que se apoya en todas partes. Así y todo está bien. Esto también es importante saber que este ataque conocido, excepcionalmente, debe estar siempre aquí. Después del primer metataque, ¿por qué? Porque, bueno, si lo pones aquí, por ejemplo, nota que el carácter L o está aquí, y El programa sabrá de qué codificación tenemos aquí. Esto no es una buena idea porque podemos tener cartas antes. Y lo que es más, los programas lo están buscando lo antes posible. Entonces algunos programas ni siquiera podrán interpretarlo si es posterior. Entonces solo ponlo como lo primero en la sección head. Eso está todo en esa lección. Muchas gracias. 20. doctype HTML: Hola, amigo mío, hoy, te lo diré, ¿ por qué deberíamos agregar Doc type a HTML cinco? ¿Por qué debemos especificar qué tipo de documento estamos utilizando? Y es bastante buena pregunta porque cuando miras la extensión del archivo HTML, podemos ver que es HTML. ¿Por qué incluso nos molestamos en tener que decir que este tipo de documento es HTML, verdad? Oye, esto es bastante estúpido, ¿verdad? Mmm. Bueno, lo sería. Pero el problema es que HTML es bastante largo con nosotros. Se trata de 30, 40 años con nosotros. Y, ya sabes, la gente, hace mucho tiempo, no podía, ya sabes, esperar que incluso Internet se expandiera, como se expandió, y no sabían qué tipo de versiones HTML serán en el futuro. Sí, versiones de HTML. Y esta es la causa de este problema. Estamos usando la nueva versión S HTML, y esto se llama HTML five. Y para poder especificar documento como este, necesitamos escribir aquí solo algo así. Como puedes ver, marca de exclamación Doc type, que significa tipo de documento, y simplemente escribe tu HDML Y eso es todo bastante gracioso. Para ser honestos, puedes terminar esta conferencia. Necesitas agregarlo aquí en la parte superior esta cosa para simplemente decir a los navegadores web, estamos usando el nuevo SHTL Si te interesa un poco más este tema, te voy a contar un poco sobre las versiones anteriores. Porque bueno, cuando vayas aquí, notarás que hay muchos tipos de documentos HTML. Y el más popular es HTML para el cual es bastante antiguo, que ni siquiera necesitas conocer. Pero este tipo como aquí se usa bastante a menudo hoy en día todavía. Y para poder usarlo, solo tienes que copiar esta cosa aquí, y estás usando X X HTML ahora mismo. Pero, ¿cuál es la diferencia? Cuando me refiero a esta página, sigue funcionando bastante bien, ¿verdad? Cuando uso di version antes de ella. Como pueden ver, sigue funcionando bien. Entonces, ¿no hay diferencia? Bueno, los navegadores web son bonitos, ya sabes, buenos hoy en día. Y aunque no estés usando el estándar adecuado, todo funcionará correctamente. Entonces me molestó el agregar esto aquí porque bueno, necesitan adivinar ahora, ¿verdad? El navegador sabe qué versión estamos usando cuando la especificamos aquí y no necesita adivinarla. Entonces ya sabes, tomará un poco más de tiempo, por ejemplo, cargar algunas cosas. Algo podría interpretarse incorrectamente, especialmente en los navegadores web más antiguos, ¿de acuerdo? Así que todavía demasiado grande, ya sabes, para compilar con el estándar. Deberíamos usar el HTML punto y agregarlo aquí. ¿Bien? Debe agregar al menos información aquí. Esto no lleva mucho tiempo, así que solo agrégalo aquí. Y para ser honestos, puedes hacer una plantilla para tu próximo sitio web. Simplemente puedes copiarlo en el siguiente sitio web, y no necesitas hacerlo cada vez, recuérdalo. Simplemente lo copias a otro sitio web. Pero volvamos a la versión que es X HTML. ¿Cuál es la diferencia principal diferencia? Porque a veces verás páginas como esta, y entonces no deberías sorprenderte con esto, ¿de acuerdo? Cuando estés usando HTML, debes agregar la diagonal al final de cada etiqueta void, así la etiqueta que no tiene final, ¿de acuerdo? Informa que esta etiqueta está terminando aquí. Entonces esto es bastante popular, y tal vez conozcas algo con algo así en el futuro, ¿de acuerdo? En el nuevo SH TML, bueno, tenemos el soporte para muchas cosas desde JavaScript de las que hablo en curso de JavaScript. Ese X HTML no tiene soporte para. Pero como dije antes, a pesar de que si usas el XHTML con los nuevos navegadores web S, será soportado M tiempo. Así que no te preocupes. Necesitas saber que XHTML hoy en día todavía se usa la mayor parte del tiempo porque bueno, HTML cinco no es compatible tan bien en los navegadores web más antiguos, ¿verdad Entonces la gente usa XHTML si quiere soportar navegadores web antiguos como Internet Explorer Seis, tal vez para ti, este es incluso nombre desconocido por ahora mismo. Pero solía haber un tiempo en que había un navegador web que se llamaba Internet Explorer, e hizo que la vida de los desarrolladores web fuera realmente horrible porque realmente muchas cosas no se interpretaban de la misma manera que en otros navegadores web. Y bueno, si quieres soportarlo, entonces necesitas usar X HTML, por ejemplo, para asegurarte de que todo se muestre correctamente, ¿bien? Pero bueno, ¿es realmente importante hoy en día? Bueno, si estás escribiendo un sitio enorme que es visitado por, no sé, 5 millones de personas al día, entonces tal vez quieras apoyar a estas personas, o puedes ser una persona que le diga a los demás que nos estamos moviendo con innovación y ya no los estamos apoyando también. Depende del cliente que tengas. Entonces si tienes un cliente que realmente dice, Oye, ya sabes, quiero apoyar e navegador web, así que no te molestes en usar HTML cinco, solo copia esto en la parte superior e intenta usar el impuesto que se enumeran aquí, ¿verdad? Pero no uses las nuevas etiquetas que aparecen listadas en HTML cinco. Be HTML five s muestra nuevo impuesto, como, por ejemplo, sección, que no es totalmente compatible en HTML. Entonces HTL five es realmente solo nuevo impuesto, nuevas formas de usar Java script con HTML y así sucesivamente ¿Bien? Y esta es la que vamos a utilizar. Pero es bueno saberlo. Solía haber una época en la que gente usaba otros tipos de documentos. Y ahora también sabes por qué necesitas especificar algo como esto en la parte superior, ¿verdad? Porque si no lo haces, navegador web o cualquier otro programa que esté analizando tu HTML necesitaría adivinar las versiones HTML, lo cual no es bueno para ti, bien o el usuario va a ver tu sitio. Entonces cualquier cosa que no sea buena para el usuario tampoco va a ser buena para probablemente clasificarse en Google, porque a Google le gusta, ya sabes, les gusta el sitio web profesional, ¿verdad? Así especificó el tipo de documento, todo va a estar bien. Esa es sólo la lección. Muchas gracias. 21. Función de códigos de almacenamiento en vivo y de seguridad automático: Para poder ver el resultado de nuestra edición aquí, Digamos que aquí agregamos el signo de interrogación . Tenemos que hacer qué. Necesitamos desafiar a salvo, así que necesitamos usar el atajo de control más S y luego ir aquí y luego usar el contro más un Wach lleva algo de tiempo. ¿No sería mejor si algo de lo que pasa aquí ya está pasando aquí Hagamos que el cambio aquí sea visible instantáneamente aquí. Sería genial. Para ello, necesitamos usar una extensión que se llama servidor en vivo. Tecleamos en el servidor Search book life y llamamos click Instalar. Como puedes ver, ya está instalado. Y ahora, ¿qué cambió? Bueno, tenemos que ejecutarlo. Para poder ejecutarlo, tenemos que pulsar el botón de entrar en vivo aquí. O necesita hacer clic derecho, haga clic aquí y haga clic en Open W Live Server. Antes de hacer eso, voy a entrar en los ajustes de la extensión. Para ir a la configuración de extensión específica como Live Server, como puedes ver, puedes hacer clic aquí en el botón administrar, y necesitamos actualizarlo. Volvamos allá otra vez. Mm hm. Ahora ya está aquí. Ajustes de extensión. Hacemos clic en la configuración de la extensión. Y como puedes ver, ahora solo tenemos configuraciones que están conectadas a esta extensión recién instalada. Y aquí tenemos algo así. Navegador personalizado. Especifique la configuración personalizada del navegador para el servidor de por vida. Por defecto, abrirá tu navegador favorito predeterminado. Tengo por defecto configurado el navegador web Chrome. Pero si no quieres usar el navegador predeterminado, como, por ejemplo, estamos usando Firefox en el curso, vamos a hacer click en el Firefox aquí. Y ahora, cuando vaya aquí y haga clic en ir en vivo, como pueden ver, está iniciándolo, y bam. Ahora estamos ahora mismo en este sitio aquí. Y bueno, ahora podemos hacer algo así. Hagamos bien esto más pequeño. Pon aquí esta ventana, por ejemplo, así. Y ahora cuando hacemos algo como esto, aquí quitamos los signos de interrogación, y solo guardo el archivo aquí. No necesito refrescar el archivo aquí. Bien. Entonces pase lo que pase aquí , como, vamos por ejemplo, negrita, Ahora, guardo la f, Control más S. Como pueden ver, el resultado es visible aquí instantáneamente. Eso es genial. Pero bueno, ya te dije que esta cosa se podía hacer de forma automática, al instante. El código de Visual Studio es genial porque podemos establecer la función de guardado automático Para hacerlo, entramos en cinco, ajustes de preferencias. Como puedes ver el atajo es control más coma. Y aquí en el cuadro de búsqueda, vamos a escribir auto seguro. Y como puedes ver aquí, podemos controlar auto seguro de editores sucios, ¿verdad? Y podemos cambiarlo de off a después del retraso. Significa que va a salvar tu f después del retraso. Eso se va a especificar aquí en muchos segundos. 1,000 milisegundos es 1 segundo. Podemos dejarlo así. Y ahora fíjense que cuando agrego el signo de interrogación, como pueden ver, se refrescó casi automáticamente Después de 1 segundo, si ponemos aquí, por ejemplo, 2 segundos, ¿verdad? Esto llevará un poco más de tiempo. Pero ahora, como pueden ver, esta cosa blanca de aquí está allá arriba, y se quitó después de 2 segundos. Y el cambio aquí también es visible después de 2 segundos. Entonces también podemos entrar en la y en negrita. puedo ver que ahora está en negrilla después de 2 segundos Creo que 1 segundo está bastante bien. Podemos dejarlo a la ligera. Aprendimos a guardarlo después del retraso. Y esto es bastante genial, porque puedes ver instantáneamente todo lo que aprendes en el lado derecho de tu monitor. El problema es que, como puedes ver, no tenemos mucho espacio, porque estamos usando el monitor Fu HD. Tienes por eso realmente recomiendo comprar monitores que tengan una vista más grande. Puedes usar la relación correcta de aspecto de 21 a nueve o de 32 a nueve. Ahora mismo, estoy usando del 16 al nueve. No hay suficiente espacio en el lado izquierdo y derecho. También podríamos, por ejemplo, hacer algo así como control más menos. Podemos hacerlo así, y luego tenemos más espacio para nuestro sitio web. problema con la solución es que, es difícil ver el teléfono ahora, no sólo en el video, sino en la vida real, ¿verdad? Pero a lo mejor tienes buena vista, así puedes jugar así en tu propia computadora Incluso si no tienes un monitor grande, aún puedes tener tu navegador web configurado así. Sigue siendo bastante útil porque ahora mismo, lo que sea que hagas aquí, ¿verdad? Cuando elimino estos signos de interrogación, no necesito usar el control de atajo más S, y el resultado es instantáneamente visible aquí, cuando solo cambio al navegador, ¿verdad? Mm. Voy al navegador, y el resultado está aquí instantáneamente. Así que no pierdo mi tiempo. Pero recomiendo encarecidamente tener monitor más grande o incluso dos monitores, o incluso tres monitores, ¿verdad? Porque esto acelera y bueno, si va a ser tu trabajo, acelera tu trabajo cuando estás trabajando con HTM Melfis cuando puedes ver ¿qué haces al No cuando necesitas saltar así, ¿verdad? ¿Bien? Eso es todo el nesson. Gracias. 22. Entidades y validación HTML: Hola, amigo mío. Hoy, aprenderás lo que es entidad. Cuándo usarlo. Cómo usarlo. Bueno, entidad es sólo un nombre. Signos de carácter que puedes escribir en tu teclado. Entonces para lograr el menos que carácter, es necesario escribir esto. Lo primero, podrías estar pensando, ¿por qué siquiera molestarte en hacer algo así? ¿Por qué no solo escribir el más bajo entonces aquí? Observe que nuestros editores notan que algo anda mal aquí. Bueno, el personaje está aquí. Cuando utilizo la entidad, así para poder usar entity, escribes el ampersand usando el shift más siete, en tu teclado luego el nombre de la entidad, y luego el semiclumn y luego el semiclumn Como se puede ver, M También tenemos el menor que el carácter. ¿Por qué siquiera molestarse? Bueno, qué va a pasar si quiero crear un sitio web, donde voy a hablar de HTML. Diré, por ejemplo, esta cosa atornilla el texto, por ejemplo así. Como pueden ver, todo está atornillado después, el ser, y podemos ver aquí la beta que estamos describiendo Si HTML está usando algún tipo de co-actor como el menos entonces para cosas como el impuesto. Entonces esta es una buena idea para escapar. Este es el proceso de cambiar esto en esto, escapar del personaje, y luego para hacerlo, simplemente haremos algo como esto, más abajo entonces. Vamos a usar la entidad. Como puedes ver ahora, esto f atornilla el texto. No lo hice todo en negrita después. Nosotros podríamos simplemente dar la información respecto a esto. Ahora mismo podemos negrita el texto, así. Pero esta cosa no va a ser interpretada por el navegador web como si se tratara de una etiqueta. Hay un momento en el que quieres hacer algo como usar la entidad. ¿Hay algún otro momento? Bueno, fíjate que aquí hice algo como desde 2017 set R. Bueno, nos estamos citando a mí mismo, Arcadis Y para ser honestos, deberíamos usar para que sean adecuadas las citas aquí. El problema es que HTML cuando dice atributo está buscando el valor dentro de las comillas, y el valor está ahora mismo aquí. El texto aquí es simplemente algo que no sabe qué hacer con él. Tal vez sea el siguiente atributo, pero no tenemos nombre de atributo desde entonces. Ahora como se puede ver cuando movemos el ratón aquí, aquí no hay nada. Sólo hay una flecha. ¿Cómo resolverlo? Bueno, ahí está esto. Podemos usar la cotización así, y así. Podemos representar la cotización. Cotización S. Como puedes ver ahora funciona bien. Bueno, para ser honestos, este caso específico se puede resolver un poco diferente. Por ejemplo, puedes usar el apóstrofo aquí. Porque cuando usas apóstrofe aquí, puedes usar comillas dentro Pero cuando usas el epostrophe aquí, puedes usar epostrophe adentro, ¿ Entonces, si hubo un momento en el que necesitas usar epostrophe y cotizaciones al mismo tiempo, sería algo malo Y además, creo que es mejor idea comenzar cada atributo con las comillas, especialmente para hacer tu código, sobre todo porque cosas así no necesitan ser tecleadas manualmente así, ¿o Pueden provenir de base de datos o etcétera. Siempre, necesitas escapar así cambia la cotización a que así, si la estás usando en atributo, no te molestes en usarla así. Aquí, puedes usar cotizaciones. En el texto donde hay un texto, o puedes usar comillas, sin embargo, en caso de que el menor entonces. Bueno, si lo usas así, por ejemplo, seis es menor que siete. Como pueden ver, tenemos una señal de que algo podría estar mal, pero funciona bien. No obstante, si copiamos nuestro lado. Todo su contenido a algo lo que se llama validador HTML, y aquí podemos elegir el validar por entrada directa y copiar nuestro código Notarás que tenemos un error aquí. Siempre, debes escapar del carácter más bajo que para asegurarte de que tu código esté validado correctamente, vamos a copiarlo de nuevo aquí. Como puede ver el error desapareció. Puedes usar esta herramienta para verificar si todo fue escrito correctamente. Bueno, código sudo visual, se puede ver también notar que algo anda mal aquí, pero no hay información Entonces para esto más bajo entonces, debes usar esta entidad siempre. Y hay algo que se llama Ampersand. Por lo que debes escapar de Ampersand siempre cuando estás pasando los enlaces, cuando está dentro de un Aquí no, HTML y CSS son adecuados. Pero cuando lo estás pasando usando enlaces, como aquí, por ejemplo, es un enlace, Este es un tema bastante avanzado, pero solo debes recordar que algún día cuando vas a pasar un enlace, algo no va a funcionar, y tienes una señal como esta dentro de un enlace Recuerda sobre esta conferencia que necesitas acudir a ella y usar a esta persona en lugar de esta. También hay un espacio que no rompe. Mira, normalmente, cuando agregamos espacios, no se interpretan. Aquí no hay espacios. Y esto es algo bueno que pase así porque ahora podemos formatear bastante fácilmente nuestro código, como, ya sabes, tal vez quería aquí. Y HTML, el navegador web no interpretará los espacios HTML dentro del archivo así. No obstante, tal vez algún día quieras tener algo, lo que es no romper el espacio, que es un espacio que se interpretará. Entonces solo puedes copiarlo y como puedes ver, ahora, cada espacio que agregué usando esta entidad se interpreta porque esto es sólo un personaje que ponemos y dentro del texto, y sabemos lo que estamos haciendo. Te estamos diciendo, oye, sé lo que estoy haciendo, quiero el espacio aquí. Entonces el espacio no rompiendo puede agregar un espacio el normaa no estaría ahí Como pueden ver, ya está alineado aquí, así que a lo mejor quiero algo como esto. ¿Eso es todo? Bueno, hay muchas otras entidades, por ejemplo, puedes encontrar entidad que va a crear integral, el símbolo de las matemáticas, así. No obstante, estamos utilizando la UTF ocho y en esta página web, la puedes encontrar. De verdad solo puedes copiar cosas, como por ejemplo, quiero este letrero, así que solo voy a copiarlo aquí. Y va a funcionar bien. Observe que esta señal está aquí. Cuando estés usando TFA, no necesitas preocuparte por ello. Creo que es mejor simplemente copiar el signo en tu HTML. Lo bueno es que puedes ir, por ejemplo, aquí al MOG Smiles, y puedes obtener todas estas cosas usando, por ejemplo, el número que se le asigna a este MOG, pero Lo gracioso es que puedes, por ejemplo, copiar incluso el mod dentro del editor, así, y notarás que esto está en tu Esto es bastante genial. Aquí puedes encontrar muchas cosas divertidas, por ejemplo, RO, como por ejemplo, algunas formas geométricas. Esto puede ser bastante útil, creo. Entonces símbolos de moneda, que solo puedes copiar pas en tu sitio web si los necesitas. Eso está todo en esa lección. Gracias. 23. ¿Cómo nombrar tus archivos? ¿Por qué la página principal se llama index.html?: Hola, amigo mío. Hoy, vamos a hablar sobre cómo nombrar correctamente al Pis, cómo nombrar tu PHIS HTML, ¿bien? ¿Y por qué? La página principal siempre se llama índice HTML. Entonces, empecemos por ¿cómo deberíamos llamarnos? No debería llamarse como lo hacíamos antes. Entonces muestra muestra dos, vamos. Nadie sabe de qué trata esa pelea, qué trata esa página cuando mira así el nombre. Siempre nombre debe describir de qué se trata tu página web. En nuestro caso, es Kitty Sacks. La pregunta es, ¿deberíamos usar espacios como aquí? No, cada palabra debe estar separada por la dah. No usas espacios, usas des para separar palabras. Bueno, no deberías usar aquí las letras que no son básicas en el alfabeto. Al igual que éste, no los uses. Utilice únicamente AB CDF G. El alfabeto básico. Bueno, puedes usar números, pero solo usarlos cuando realmente hablen algo en tu describir algo con respecto a tu sitio web, justo, por ejemplo, el número del producto o algo así, eso podría ayudar a encontrarlo, pero de lo contrario, trata de evitarlo. Entonces así es como llamas a tu sitio web. ¿Bien? Como Kitty Snacks. Y ahora cuando nos pongamos en marcha, notarás que este nombre está aquí, y es útil para los usuarios que están visitando tu sitio web. Porque cuando lo copian y se lo pasan a alguien, pueden ver por este nombre de la URL, así desde este nombre de enlace. ¿De qué trata ese vínculo, verdad? Por lo que es útil para los demás usuarios, y también ayuda a navegar en tu sitio web a las personas. Entonces cualquier cosa que sea útil también va a ser algo bueno que se considere como algo bueno para Google, para Google ambos. Entonces es algo que será tomado en consideración por Google Ranking. Entonces es una buena idea usar aquí las palabras que representan tu lado, pero recuerda, no pongas tu descripción, ¿verdad? Sería muy estúpido hacer algo como kits, otros capaces, me encanta comer y así sucesivamente. Este no es un lugar para enviar spam a las palabras clave. Usted acaba de poner aquí Principalmente el título, o algo relacionado con el título. Esto es algo que debería ser corto. Entonces así es como se crean los nombres. Pero por un lado , un lado siempre debería llamarse Index dot HTML, y debería ser la página principal de tu sitio web. ¿Por qué es eso así? Observe que cuando vengamos aquí y eliminemos esta parte, obtendremos la estructura, el índice de nuestras carpetas de nuestro servidor web. Cuando vayamos aquí, podemos encontrar las imágenes, podemos encontrar artículos, y podemos encontrar otra página web aquí. Entonces el servidor está buscando índice, y no lo encontró. Entonces pone lo que hay dentro de la carpeta principal. Entonces la carpeta corta en nuestro caso. Pero si proporcionamos el índice que está buscando, así que cuando cambiemos el nombre a Index ese HTML, notará que cuando actualice aquí, encontró Index en HTML. Podemos escribir también aquí Índice en HTML, y lo encontrará Pero no es necesario porque así es está programado cada servidor web. Está buscando el índice de punto HTML. Quizás Index dot PHP, si estás escribiendo en otro idioma, pero está buscando el índice. Entonces por eso la página principal no debería ser un nombre autodescriptivo como Kitten Snacks, por ejemplo. Debería llamarse Índice en HTML. No obstante, las páginas que están debajo de la carpeta, por ejemplo, artículos, digamos que queremos crear otro sitio web, así que bueno, vamos a copiar esta cosa aquí. Y por ejemplo, no va a ser sobre snacks para gatitos, sino, por ejemplo, divertidas imágenes de gatos, ¿verdad? Entonces aquí, debes crear una descripción, tratar de crearla. Por supuesto, crearlo y nombrarte aquí como autor. Y vamos a cambiarle el nombre a qué? Imágenes de gatos, por ejemplo, ¿ verdad? O imágenes divertidas. Gatos, algo así. Porque esto describe de qué trata esta página web. Pero esta página, la principal debería tener algo lo que se llama menú, que hablaremos de cómo crear en el futuro. Y es como un índice. Es como una apertura a cualquier otro subsitio, la página está conectada a tu página web, a todo tu sitio Eso está todo en esa lección. Gracias. 24. EXTENSIO: iconos dulces en tu VSC: Hola, amigo mío. Creo que los íconos predeterminados que están al lado del nombre de tu página o junto al nombre del JPE cinco y así sucesivamente, no son tan buenos Afortunadamente puedes cambiarlos. ¿Cómo hacerlo? Bueno, puedes usar el control de atajo más tres más B o el atajo único y escribir el equipo de cinco iconos. Cuando lo eliges, como puedes ver, puedes cambiarlo a nada. Si no quieres tenerlos en absoluto, o puedes cambiarlos a mínimos. Esto es bastante genial. O puedes cambiarlos a esto que estaba aquí. Pero afortunadamente, también hay opción como la personalizada donde se pueden instalar equipos de iconos adicionales. Al hacer clic en él, encontrarás todos los equipos de iconos que puedes instalar desde las extensiones. Y el que prefiero es este de aquí. Cuando lo instales, tendrás una opción aquí para elegirlo. Recuerda elegirlo porque actualmente es el ajuste, así que cámbialo a los iconos de Viacde Ahora mira lo geniales que son. Son tan coloridas y además a pesar de que son coloridas, no están ocupando demasiado espacio. Ellos son muy, muy buenos. Recomiendo encarecidamente este. Sin embargo, si lo desea, puede instalar, por ejemplo, icono de material, instalar, y luego necesita cambiar a material. ¿Hay una gran diferencia? Hay alguna diferencia. Hagámoslo un poco más rápido. Counterplat desplaza P, y cambiemos de material al código Vos Como puedes ver la diferencia está principalmente en las carpetas. Yo prefiero este, pero tal vez usted prefiera éste. Para ser honestos, solo hay muchos para elegir. Así que juega con ellos, ¿verdad? Y elige el que más te guste, porque, bueno, el editor es principalmente para ti, no para mí, ¿verdad? Tienes tus propias preferencias, y eso es genial sobre el código visual studi que puedes hacerle casi cualquier cosa a este editor para que parezca que querías lucir Recomiendo encarecidamente este, y lo usaremos desde ahora. Esa es sólo la lección. Gracias. 25. Lista: ol vs li: Hola. El día de hoy, te mostraré cómo crear lista de ítems de elementos, de posiciones que deseas presentar al usuario. ¿Cuándo usamos la lista? Bueno, por ejemplo, para mostrar a los alumnos de qué hablaremos en la conferencia específica. Este es el momento en el que usas lista. También, puedes enumerar, por ejemplo, alumnos en clase. Cuando alguien llama al número 14, sabe que viene a ser interrogado, y se va a inquietar un poco No va a ser algo placentero. Entonces usas lista para enumerar cosas para mostrarle a gente lo que va a ver en tu, por ejemplo, sitio web, ¿verdad? Qué debe hacer a primera hora de la mañana. Por ejemplo, necesita despertarse, luego debe cepillarse los dientes y así sucesivamente. Entonces ya sabes cuándo usar lista. ¿Y qué los usamos? Bueno, los usamos para presentar las cosas, por ejemplo, de manera ordenada. Cuando miras las cosas ordenadas, es más fácil de leer, ¿verdad? Entonces, para ser honesto, usas listas para facilitar la lectura de las cosas. Esta es la razón principal por la que los usas. De lo contrario, puedes poner todo en párrafo. Pero como viste aquí, no es profesional en HTML, deberías enumerar etiqueta específica, que se llama UL u OL Entonces lo primero significa lista no ordenada, y la segunda cosa significa lista ordenada. ¿Y cuál es la diferencia? Bueno, cuando creamos lista ordenada, así que solo creamos una etiqueta como esta, y ponemos elementos de lista dentro. Entonces yo Como pueden ver, aquí tenemos el número, lo que significa que podemos poner aquí algo, y cuando lo copiemos, como pueden ver, podemos poner muchas más cosas, y se numeran automáticamente, y esto es bastante genial porque nota que antes, cuando usamos esto aquí, digamos que estos dos puntos no son de esta conferencia, así que debemos eliminarlos Vamos a eliminarlos. Pero ahora hago qué. Cambiar manualmente los números, lo cual no es genial. Lo genial de la solución que acabamos aprender es que cuando copiamos el texto aquí, así, ¿ notarás que qué? Este es el número automáticamente. Si cambio, bueno, digamos que quiero empezar a hablar de esto primero. Entonces lo copio aquí. Como puede ver, los números se cambian automáticamente, y esto es pritical Entonces esto es lo primero de lo que es genial o de liberar. Lo segundo es notar que no tenemos línea de frenos porque cada este artículo es freno automático. ¿Bien? Entonces esto también es genial, ¿verdad? Por lo que no es necesario usar línea de freno aquí. Y mira, puedes usar el atajo genial, que es una flecha más en el teclado para mover las cosas hacia arriba así. Digamos que quiero esto primero, como pueden ver es primero ahora aquí. Pero si lo hago aquí, bien, así, necesito volver a cambiar los números. Entonces esta es una característica bastante genial del código de Visual Studio. Puedes mover las cosas hacia arriba o hacia abajo después de decidir qué orden quieres tener las cosas aquí. Si el orden de las cosas no importa, puedes usar underly. Así que simplemente cambias el OL a UL. Y luego solo estás cambiando lo que se presenta antes de cada artículo de arrendamiento. Entonces cambias el número en solo el círculo así. Puedes cambiar lo que es visible aquí. No necesitas mostrar el círculo, puedes mostrar otras cosas, pero cosas así, formatear, como colorear y otras cosas así deberían ser dibujadas a través de algo que se llama CSS, y vamos a hablar de eso en el futuro. Así que no te preocupes si estás viendo, por ejemplo, los círculos de aquí, y estás como, me gustaría tener aquí algo más porque no me gusta. Puedes hacerlo, pero no ahora. Las etiquetas solo se usan para formatear para etiquetar así para darle un significado adicional al texto. Y este significado no es sólo para nosotros. Para las personas que están mirando nuestro sitio, pero también es para Google Robots, para Google Robots, porque están mirando tu página, y cuando ven una lista ordenada, pueden ver que estás listando algo. Algunas cosas cruciales sobre tu sitio, bueno, sobre las cosas en el artículo. Entonces, si estás usando párrafo, pueden ver que estás creando algún tipo de texto. Entonces esta no es una buena idea usar el párrafo para enumerar. Bueno, hay otros textos que aprendes en el futuro, como por ejemplo, la dirección. Y si pones dirección aquí, google sabe que aquí hay una dirección. Entonces esto es solo información adicional respecto a qué tipo de texto estamos formateando. Qué tipo de texto le estamos mostrando al usuario. No obstante, si quieres cambiar la forma en que aparece, mayoría de las veces, lo vas a d a través de CSS. ¿Por qué? Porque es mejor. Por qué es mejor, aprenderás en el futuro. Como puedes ver en nuestra lista de ítems, también deberíamos aprender acerca de atajo útil, que se llama pestaña Shift plus en esta conferencia. ¿Y qué hace? Cuando selecciono todo y uso la pestaña Mayús más, como pueden ver, todo se movió un nivel a la izquierda. Entonces digamos aquí, como pueden ver, un nivel a la izquierda. sangría. Cuando uso la pestaña, puedo volver a lo que estaba aquí. Creo que es mejor tener la cabeza en el mismo nivel como cabeza y cuerpo porque aquí vamos a tener más espacio, justo para el texto. Realmente no importa que lo tengamos en el nivel así, ¿verdad? Podemos volver así. Usando la pestaña, puedes ir justo una vez, porque bueno, La etiqueta siempre está ahí. Ni siquiera miramos esto. Es sólo que ahí. Entonces esto aumenta la claridad de nuestro código, creo. La lección. Muchas gracias. 26. Trucos rápidos con Emmet para usar con listas: Hola. Hoy, aprenderás algunos atajos que mejorarán tu vida como futuro desarrollador web. Entonces comencemos de este atajo aquí. Observe que bien, podemos crear el menor artículo dentro de UL haciendo algo como esto. UL, luego LI, y luego necesitamos formatear el debate porque no le va bien. Y entonces si quieres una LI más, haremos lo que Contro plus, Control más V. Control más V, queremos tres de ellos, por ejemplo Está bien, está bien hacerlo de esta manera. Pero si sabes que vas a tener dos Is libres, entonces ¿por qué no usar algo lo que se llama este signo? Pues bien, esta señal, cuando vamos a este sitio web, aviso se llama el signo infantil. ¿Por qué se llama así? Bueno, te permite crear un niño dentro del padre. Parent es una etiqueta que está justo encima de otra etiqueta. El niño está justo dentro de otro padre. Bueno, los padres dan a luz a niños, a niños. Entonces bien, cuando tecleas algo como esto, NAF, que es una etiqueta que conocerás en el futuro, se usa para crear navegación, ¿ y tecleas qué? Este letrero, entonces vas a crear un niño dentro de NAV que se llama UL. Entonces puedes crear el siguiente hit, que se llama A. Como puedes ver, esta es una hoja de trucos que se agrega en la pestaña de recursos de este curso. Puedes ir a esta página web aquí, abrirla y bueno, incluso puedes descargarla e imprimirla. Aquí hay algunas cosas más. No necesitas conocerlos todos, no te preocupes. Pero hay cosas que se usan aquí que no sabes en este momento. Por ejemplo, la D y así sucesivamente, no te preocupes. Te voy a mostrar los ejemplos como este cuando sean necesarios. ¿Entonces podemos hacer qué? UL y dentro de UL, podemos poner una mentira. Como pueden ver, tenemos aquí MA abreviación atajo. Para mostrarlo porque podrías tenerlo así, necesitas usar el control de acceso directo más espacio. Como pueden ver, golpeo control más espacio, y luego se puede ver cómo va a quedar esta abreviatura después de expandirla después de golpear Enter. Entonces no hace falta que golpees enter para solo ver cómo se ve. Entonces ahora cuando pulsas enter, como puedes ver, tenemos una Ai, así que aún necesitamos copiarla. Pero yo estaba hablando de algo así en una de las conferencias anteriores que se puede multiplicar una de las etiquetas, ¿verdad? Entonces podemos multiplicar párrafos. Y también aquí, podemos multiplicar lo que el aliado. Como pueden ver, ahora cuando tecleamos el número aquí, tenemos cada vez más aliados, ¿verdad? Entonces necesitábamos tres de ellos. Así que vamos a escribir así. Y lo que es más ahora es ese aviso de que podemos golpear tabulación en el teclado y saltar a siguiente, y, ¿verdad? Entonces esto es bastante genial porque bueno, no necesitamos usar nuestro teclado y mouse para poder saltar de un aliado a otro. Así que esto acelera aún más las cosas, ¿verdad? Podemos poner el contenido de cada aliado al instante, ¿ verdad? Esto es bastante genial. Bien, pero digamos que cometimos un error. Como, por ejemplo, digamos que hicimos algo así, y luego salto aquí. Qué hacemos si queremos volver aquí a este atajo y que funcione. Como pueden ver, no tengo ninguna pista en estos momentos. Para poder entrar en él, necesitamos usar también el control de acceso directo más el espacio. Como puedes ver ahora, ya podemos presionar enter y todo va a funcionar bien. Bien. Ahora, veamos qué pasaría si quisiera, por ejemplo, tener una y más aquí, ¿verdad? Normalmente, vas a hacer qué. Lo copiarías, como por ejemplo, este select y contra plus C contro plus V. Pero bueno, lleva tiempo Podemos usar el atajo que se llama Shift más l más flecha. Copia una línea dada arriba o abajo. Cuando tengo tap aquí, y uso el turno más l. tecla de flecha, como pueden ver, la copié hacia arriba. Si utilizo el turno Alp flecha hacia abajo, lo copio hacia abajo. Bastante genial, ¿no? Bien. Digamos que tenemos LIs vacíos y no quiero volver a saltar a la abreviatura. Puedo cambiar al mismo tiempo, cada valor dentro, ¿Puedo agregar el contenido para cada elemento LI? En el mismo tiempo? Sí, puedes. Puede utilizar el atajo lplus clic del ratón, clic izquierdo del ratón Cuando los mantengo pulsado un botón y hago clic, tenemos más cursores, ¿no Ahora podemos escribir muestra, y la tecleo en todas partes. Observe que puede poner el cursor en cualquier lugar que desee, y va a escribir en cada lugar así. Control Z para volver. Nuevamente, Control Z es un atajo muy importante. Si cometes un error, solo usa el Control más z. Así que ya sabes, esto, ya sabes, ahora, esto, esto, y aquí también hay algo como esto. Control plus k plus S. Como puedes ver, hay atajos que puedes, leer sobre aquí, y también puedes cambiarlos. Cuando podrías hacer clic derecho aquí, puedes eliminarlos o puedes cambiarlos. Pero también, hay un sitio web como este. ¿Estamos agregados a los recursos, donde los tienes agrupados un poco, es más fácil encontrar las cosas aquí. Observe que tiene aquí, por ejemplo, eliminar línea. Y cuando voy aquí, y tecleo delete. ves podemos encontrarla y puedes cambiarla, ¿ verdad? O podemos usarlo. Por ejemplo, digamos que no queremos esta cosa aquí. Normalmente, deberá seleccionar y hacer clic en el espacio de empaque o usar el espacio Shift plus home y pack. Pero puedes usar justo lo que el control más gavilla más llave Control más gavilla más clave, y solo estás quitando la línea donde se encuentra el cursor Bastante genial, ¿verdad? Bien, hay dos atajos más que van a mejorar tu vida, que son los corchetes y los corchetes de cuajada Bueno, fíjate que cuando estamos creando una mentira, no hay contenido dentro de la línea, ¿verdad? Digamos que quiero tener contenido dentro. Cómo proporcionar contenido. El contenido es el texto dentro, ¿verdad? Necesitas usar los corchetes. El contenido va aquí, ¿verdad? Como puedes ver, ponemos dentro de LI el contenido. Esto es genial, ¿verdad? Contenido más espacio entran, y tenemos buen contenido en su interior. Puedes poner contenido en cualquier etiqueta, ¿verdad? Entonces P contenido de P. Como puedes ver, es el contenido de P. Bastante genial. Esto es útil cuando quieres multiplicarlo, justo porque ahora puedes multiplicarlo por cuatro, ejemplo, y tienes un contenido de muestra para cada LI. Bastante útil. Cro más pase, entra y tenemos más de ellos. Entonces se usan los corchetes para el contenido, pero este se usa para agregar el atributo. Entonces cuando hago algo como esto, puedo, por ejemplo, crear atributo code title, y puedo decir aquí está title. Como puedes ver, tenemos la pista de que el atributo va a ser agregado al elemento LI porque estoy sosteniendo el cursor aquí. Pero cuando salto aquí y uso el ritmo contro plus, agregamos el título a cada Li bastante impresionante, ¿verdad? Puedo hacer click enter counterplus space enter y ya está aquí. Observe que puede agregar el atributo a cualquier punto que desee Si quieres agregar el título a la UL, solo tienes que poner los corchetes junto a U. Cuando lo hagas así, vamos a tener un título al lado de UL. El tachuete que obtendrá el título del atributo de los corchetes es el que está al lado de él Entonces esto está al lado de esto, y por supuesto, está al lado de la izquierda del mismo. Esto es. Además, hay una característica muy genial, que es la característica del dólar, y ¿qué hace? Vamos a entrar en Ai y digamos que queremos poner muestra de contenido, como por ejemplo, uno, y quiero que se multiplique por cuatro. Observe que tenemos aquí el número uno, uno, 11, y ahora tendremos que hacerlo manualmente así si queremos numerarlo. Pero la cosa es que podríamos usar en lugar de uno, el signo del dólar, y simplemente va a ser, como pueden ver, reemplazado por los números, algo de uno, bastante genial. Muestra de contenido, uno, dos, tres, cuatro, genial. Hemos aprendido de algunos atajos en esta conferencia. Como puedes ver, hay muchos muchos más. Los mostraré sólo cuando sean necesarios. Como puede ver, tras la conferencia de LI. Estas son cosas geniales que es genial saber. Va a acelerar el proceso de creación de contenido. Pero aprender nuevos atajos lleva tiempo. Así que no te preocupes si no los conoces al instante. Y también para aprender atajos, necesitas salir de tu zona de confort. Sí, estás en la zona de confort cuando estás usando las cosas que aprendiste hace mucho tiempo. Entonces tal vez quieras incluso copiar cosas como esta, copiar y pegar. Esto está bien, pero realmente, es bueno prestar atajos porque vas a pasar mucho tiempo creando sitios web en el futuro. Estas cosas te van a ahorrar tiempo y el tiempo es dinero. T no es sólo dinero, el tiempo es felicidad. Si tienes tiempo, puedes jugar juegos de computadora, reunirte con amigos, etc. Pero para ahorrar tiempo, necesitas aprender atajos. No necesitas aprenderlas todas, ¿verdad? Porque, por ejemplo, situaciones en las que necesitas, no sé, numerar cosas como aquí. Son bastante raros, pero al menos aprende sobre éste, éste, y éste, porque se usan con bastante frecuencia. También puedes tratar de encontrar cosas que te sean útiles en el plano de la hoja de trucos así, ¿verdad? Bien. Esa es sólo la lección. Muchas gracias. 27. dl, dt, dd - lista de definición: Hola, amigo mío. Hoy, vamos a hablar sobre qué es la etiqueta DL y ¿ cuándo debemos usarla? Etiqueta DL significa lista de definición. Entonces esta, esta etiqueta describe una lista de definiciones. ¿Bien? Entonces aquí está el primer término que se llama término de definición, que se va a describir dentro de una descripción de definición. Entonces ponemos en DD lo que quieres describir y luego DD la descripción, ¿verdad? Y todo como esto se pone dentro de la lista de definiciones. Entonces la diferencia entre esto y esto es que podemos conectar términos a descripción. Aquí solo tenemos lista de artículos individuales. Pero aquí tenemos una lista de definiciones, ¿verdad? Entonces este término está conectado a esto. Este término está conectado a esto. Pero quizá te estés preguntando, vamos. Por qué incluso molestarse en hacer algo así cuando podríamos, escribirlo así, por ejemplo, más bajo que P y luego poner aquí, la definición. Entonces podemos ponerlo en el párrafo. Y como pueden ver, M Lo tenemos así. Como puedes ver, la primera diferencia es que la lista de definiciones crea algún tipo de formato. Aquí, tenemos algún tipo de sangría para cada descripción, cada etiqueta DD tiene sangría, cada etiqueta DD tiene sangría, y el término de definición está a la izquierda de la ¿Es solo un formato? Es solo esto lo que sería un plus para ti. La ventaja de usar algo así. No te molestarías en usarlo si fuera solo esto. Bueno, lo primero es que Google puede conectar eso oye, lo primero que estás definiendo algo, entonces estás describiendo algo, y sabe que esto se describe aquí. Sabe cuál es el término y cuál es la descripción. Exactamente, él lo sabe. Entonces esto es lo primero. Pero lo segundo, voy a mostrar en el ejemplo que se muestra en el sitio web del desarrollador mozilla.org Este es un sitio web bastante genial porque, bueno, puedes aprender aquí en HTML si quieres. Pero lo usaría principalmente para mirar ejemplos que están aquí, que son bastante buenos. Observe que tienen aquí ejemplo de una lista de definiciones como esta donde es un guion de Cornwall, y luego hay definiciones de cada cosa así Pero aquí hay una salida, entonces cómo se ve cuando está en el sitio web. Se puede notar que cada uno de ese término está en negrita. Eso es genial. Pero oye, aquí no hay etiqueta B. Tendremos que hacer qué. Tendremos que hacer algo así en cada uno para obtener el término en negrita Pero lleva tiempo, y usan lo que se llama CSS, que vamos a aprender en el futuro. CSS permite elegir, por ejemplo, dt y poner el peso de la fuente a negrita, cambiar la fuente para hacerla negrita, pero por cada elemento dT. Esto es bastante genial porque aquí, si nos gustó algo así y vamos a describir la etiqueta BR entonces la b Daga y así sucesivamente. Si quisieras elegir solo esta parte, no podríamos hacerlo, y necesitaríamos manualmente, de todos modos, hacer lo que hacen las negritas. Entonces, lo genial de CSS es que puede elegir cada etiqueta que sea, por ejemplo, DT y cambiarla para hacerla en negrita Tenemos dos ventajas. Una es que bien, el Google sabrá lo que está pasando. El segundo es que en el futuro cuando aprendas CSS, puedes elegir esta cosa específica y hacer que se vea mejor, ¿verdad? Y además, cuando estás usando algo así, te estás mostrando a ti mismo y a otras personas que van a leer tu código HTML que sabes lo que estás haciendo, y ellos lo sabrán, así que aquí tienes algunas definiciones. Aquí hay una lista de definiciones. Cuando están viendo algo como esto, solo saben que es un párrafo, y el párrafo se debe usar para poner texto que se trata Bueno, se podría decir que la definición también es algún tipo de texto, y es cierto, pero tenemos una etiqueta específica para este caso específico que hace que tu código sea más limpio, ¿verdad? Entonces es mejor usar esto sobre esto en caso de definir algunas cosas en tu sitio web. Como ejercicio, cree tres términos de definición más, con respecto, por ejemplo, a la etiqueta de título, la etiqueta head y el tipo de documento HTML. Simplemente ponlos en término de definición y escriba alguna descripción de definición. Es un buen ejercicio para aprender a crear este tipo de impuestos, pero también intentarás recordarte cómo funcionan estos impuestos. Eso está en la lección. 28. EMMET: crea hermanos y tratar dos elementos como uno: Hola, amigo mío. En la última conferencia, aprendimos a crear lista de definiciones. La pregunta es, cómo crear una lista de definiciones usando Et. Cómo utilizar el MET para crear esto. Hay un pequeño problema porque notamos que cuando estamos haciendo algo así, DL y después queremos insertar, por ejemplo, DT, entonces tenemos una solución como esta. Pero cómo agregar ahora el DD, cómo agregar DD aquí. ¿Cómo agregamos algo en el mismo nivel, no dentro de otra tachueta Para agregar una etiqueta junto a otra, necesitamos usar el signo más, que se usa para hermanos. La etiqueta que está en el mismo nivel como este, DT está en el mismo nivel que DD se llama hermano Entonces cuando hacemos algo así dT más DD, como puedes ver, la solución es DT los dos siguientes dD. Cuando tecleamos P más B, tenemos P junto a B. Y por ejemplo, siguiente P, tenemos siguiente P. Bien, vamos a usar lo que hemos aprendido para crear lo que hicimos aquí arriba. Entonces DL tenemos dentro de él, así que vamos a usar este letrero aquí. Qué DT, y junto a él, DD. Bien, eso es lo que nos gustaría, ¿verdad? Bien. Pero si quisiéramos más de ellos, tendríamos que copiarlo así. Y para ser honestos , también lleva tiempo. Pero aprendimos que podemos multiplicar cosas así, ¿verdad? Entonces volvamos a esto y multiplicémoslo por tres. Todavía hay un problema porque multiplicamos solo un d d . Así que la multiplicación sólo afecta a una cosa a la izquierda Si quieres agrupar dt y DD. Si quieres que sea como una sola expresión como una sola cosa. Necesitas usar lo mismo que usas en matemáticas, los paréntesis Cuando lo haces así, entonces cuando golpeo control más espacio, como puedes ver, ahora tenemos tres veces multiplicado esta cosa. Una expresión entera como esta se multiplica por tres. Ahora incluso podemos elegirlo cinco veces diez veces lo que quieras, y eso es lo genial. Guardarla. Entonces, para resumir. Para poder agregar múltiples etiquetas al mismo nivel, que se llaman hermanos, necesitamos usar lo que es el signo más. Entonces solo agregas. Por eso es signo más, uno al lado de otro. Para agrupar algunos limones y hacer que funcionen como un limón, necesitas usar paréntesis como en matemáticas, Para crear una tachuelas en otra tachuelas, necesitas usar el signo de guarida mayor Como ejercicio, tratar hacer lo mismo que hice en esta conferencia, pero también tratar de poner dentro del DT y DD creados, algún texto de muestra, pero usando m. La solución debería verse así. Intenta hacer esto como ejercicio. Si tienes alguna duda, como siempre, no dudes en preguntar. 29. Crea enlaces internos: Hola, amigo mío. Hoy, te voy a explicar qué son los enlaces, cómo crearlos y cómo crear un enlace posterior. Entonces cuando tienes muchos sitios web, sería genial poder volver al primer sitio web al índice que HTML para permitir que el usuario lo haga, ¿verdad? Bien, entonces, ¿qué son los enlaces? Como su nombre indica, un enlace es simplemente algo que conecta. Dos cosas, un enlace, enlaces, conectan dos cosas. Por ejemplo, sitio web. Bueno, no podemos tener todo de un lado. Bueno, podemos si el sitio web es pequeño, pero si tenemos un sitio grande o incluso cuando tienes un foro, el Foro está lleno de desplome. Cuando tienes sitio, un sitio grande, necesitamos crear enlaces. Bueno, también necesitamos enlaces para, por ejemplo, conectar otro sitio creado por otra persona, así que necesitamos enlaces para eso. ¿Cómo crear un anillo? Bueno, tenemos que usar para ese ancla. Algo lo que se llama ancla. La etiqueta A significa ancla. Entonces cuando digamos que queremos vincularnos a las imágenes divertidas de gatos. Imágenes divertidas gatos. Digamos que queremos vincularnos a este lado. Entonces voy a escribir un nombre así. Entonces, si queremos ver imágenes más divertidas de gatos, sígueme. Algo como esto. Cuando alguien haga clic en esto, me gustaría que saltara a este lugar. Tenemos que vincular esto. Tenemos que hacer algo así. Tenemos que lanzar y anclar usando la tacha A así. O podemos usar el control de atajo más **** más P y envolver con abreviatura, y simplemente poner A aquí. Como puedes ver, la abreviatura agregó algo así, la referencia de edad. Vamos a quitarlo por un segundo. Veamos qué va a pasar cuando acabemos de poner un ancla en las imágenes de fan de, bueno, yo quería tenerla en todo el texto. Como se puede ver, no pasa nada. Este texto sigue siendo texto simple porque necesitamos decir dónde queremos vincularlo y eso es lo que proporcionamos usando el atributo re. El ref significa hiper referencia. Por lo que tenemos que proporcionar el hipertexto. Entonces esta cosa hace que tu texto sea hiper, lo que significa este súper texto que te permite saltar a otro lugar Como puedes ver, este enlace es ahora de estilo como este. Puedes cambiar cómo es el estilo en el futuro, usando, por ejemplo, CSS del que vamos a hablar en el futuro. Pero por ahora, ya ves, hicimos que sea clicable, ¿verdad Ya tenemos aquí el ratón se está cambiando cuando movemos el ratón sobre él. Entonces este texto es ahora hiper. Por eso decimos que es hiper referencia. Es algo que te permite saltar de otro lado a otro. Y es hiper porque normalmente, no es posible hacer cosas así, ¿verdad Cuando tienes un libro, puedes simplemente saltar un lugar a otro en el libro con solo presionar el texto en él. Este texto es realmente hiper. Y es por eso que hasta el HTML se llama HTML, lenguaje de marcado de hipertexto Es hiper porque te permite saltar, y esta cosa se llama hiper referencia, porque te permite saltar para enlazar cosas, y ahora necesitas proporcionar aquí en estas cotizaciones donde queremos que se vincule, Porque en estos momentos no pasa nada aquí. Entonces necesitamos usar el atajo de espacio contra plus, como puedes ver, ahora podemos elegir que queremos ir a artículos y ahora a divertidas imágenes de CATs, por ejemplo. Y ahora cuando nos golpean y hago clic en él, como pueden ver, estamos saltando a otro lado, y podemos volver usando el botón de retroceso aquí arriba. Así que eso te permite saltar al lugar que te brindamos aquí, ¿verdad? Necesitamos proporcionar el nombre de la carpeta a donde quieres ir y el nombre de fd que quieres saltar. Eso es bastante sencillo. Pero lo bueno es que puedes ponerlo en cualquier cosa. Entonces digamos que tenemos imagen, como, por ejemplo, la que tenemos ahora en imágenes, como el bajo. Digamos que esto es guitarra sesgada, y queremos que toda esta imagen esté enlazada, algo en lo que podamos hacer clic y saltar a otro lugar. Pongámosle una abreviatura así. Pongamos la referencia de edad. Digamos que vamos a ir a divertidas imágenes de C porque ya no tenemos HTML fs. Ahora, como pueden ver, cuando movemos el ratón aquí y haga clic en él, saltaré a esta placa. Puedes ponerlo en texto, puedes ponerlo también en imágenes. Para que lo puedas poner en lo que quieras. Vamos, y volvamos a esta cosa. Observe que cuando voy aquí, aquí no hay nada. Ahora bien, y si quisiera poder volver a aquí, pero usando el enlace. Porque debemos proporcionar a un usuario una forma de saltar hacia atrás. ¿Cómo hacerlo? Bueno, vamos a crear un texto de vuelta. Ahora, vamos a crear un enlace. Pongámosle un ancla, y digamos dónde queremos saltar. Y la mayoría de ustedes pondrían aquí algo así, en texto punto HTML. Observe que cuando haga clic en él. Hay algo que no puedo obtener índice de artículos. Eso es porque el índice está dentro de la carpeta principal. No está dentro de la carpeta que se llama artículos. Necesitas de alguna manera poder saltar de aquí a aquí. Para hacerlo, haces lo mismo que nosotros cuando yo hablaba de imágenes. Puedes hacer algo así y el slash. Significa que saltamos a la carpeta principal. Ahora cuando estamos aquí y hago click atrás, y para refrescar, como pueden ver, ahora funciona bien. Se puede saltar de un lado a otro. Pero esto es bastante largo, y para ser sinceros, podemos hacerlo un poco más corto. ¿Por qué? Porque la carpeta principal siempre está bajo la única barra así Entonces solo puedes poner la barra y luego el nombre de la cosa a la que quieres referirte Por ejemplo, indexar HTML. Ahora como pueden ver, todavía estamos regresando. Lo aún más genial es que no es necesario proporcionar Index en HTML aquí. Simplemente puedes escribir la barra, y aún así va a funcionar ¿Por qué es así? Porque te dije que Index HTML es lo primero que se busca en el servidor siempre. Entonces puedes poner el índice HTML, pero no necesitas hacerlo, ¿verdad? Simplemente puedes poner aquí nada porque el servidor va a buscar siempre este nombre especial, Index at HTML. Entonces solo puedes ponerlo así y funcionará bien, ¿verdad? Así que bastante genial. Creo que es más fácil de leer. Como ejercicio, quiero crear un logo. Cómo crear un logotipo, Bueno, intenta encontrar en Google algo que se llame generador de logotipos, o simplemente escriba en YouTube cómo crear un logotipo y crear un logotipo de tu sitio web y ponerlo dentro de tu sitio web como divertidas imágenes de CDs, cuando alguien hace clic en este logotipo, para que pueda ser clicable, necesitas hacer un enlace de él Volverá al índice en HTML al índice a la página principal de su sitio web, ¿verdad? ¿Por qué es genial y por qué es importante? Porque fíjate que alguien puede venir a tu página web aquí, ¿verdad? Como lo primero que ve puede ser tu subpágina, puede ser una de tus páginas de todo tu sitio. Puedes tener miles de páginas, ¿verdad? Y cuando ve esta landing page, por eso se llama aterrizaje porque aterrizará en ella, necesita saber cómo saltar de nuevo a la página principal. Y es bastante conocido que casi siempre en todos los sitios web, cuando alguien haga clic en Logo, volverá a saltar al qué al índice DadH TML El botón Atrás, el texto de atrás. No significa nada para la persona que visita tu subpágina. Aquí cuando salta de aquí para acá. Él sabe que la parte de atrás significa que vamos a volver aquí. Pero para ser honestos, aquí tiene el botón de la bolsa. Pero si esa es la landing page, eso es diferente, ¿verdad? Necesita saber cómo saltar al primer sitio donde pueda encontrar cualquier otro enlace. Entonces al índice HTML, ¿verdad? Por eso se llama Index. Puedes encontrar cada enlace allí a otro sitio. Así que crea un logotipo, póngalo aquí, y permite que el usuario vuelva al lado principal de su sitio web. Esa es sólo la lección, gracias. 30. links externos | _blank: Hola, amigo mío hoy. Te enseñaré a crear un enlace a un sitio externo. Porque a veces quieres recomendar algo, o tal vez el usuario de tu sitio web esté en el foro que creaste y quiere recomendar algo. Entonces ese es el momento en el que necesita poder vincular crear un enlace a otro lugar, a sitio externo. Entonces, cómo hacerlo. Digamos que queremos crear un enlace a Google. Entonces llamémoslo Google. Y ahora vamos a seleccionarlo, y vamos a crearlo ancla. Y ahora, lo primero que probablemente pienses que es apropiado es escribir algo así. Google que Ven. ¿Bien? Y vamos a darle un click sobre él. Veamos qué va a pasar. Como se puede ver, bueno, no se puede obtener google.com. ¿Qué pasa? Bueno, para ser honesto, navegador web está buscando en este catálogo el archivo google.com porque no sabe si es texto o es un sitio web Para decir que se trata de un sitio web que necesita abrir aquí, en el navegador web. Entonces no es archivar un solo archivo. Tenemos que añadir aquí un protocolo esto. Ahora cuando hago clic en él, como pueden ver, estamos en Google, y se abrió en la misma pestaña que tenemos nuestra página web. Así es como funciona. Necesitas agregar aquí HTTP, no como cuando escribes aquí. Aquí no necesitamos teclearlo porque se agrega automáticamente. Sin embargo, probablemente hayas notado que este sitio está abierto en la misma pestaña que tu sitio web. Si quieres abrirlo en la nueva pestaña, la pestaña en blanco, se llama pestaña en blanco, necesitas dirigirla , ¿de acuerdo? Por lo tanto, debe proporcionarle la etiqueta de anclaje con información adicional que se proporciona con ese atributo llamado target. Por defecto, se establece en self. Entonces, cuando alguien hace clic en él, como puedes ver, apunta a la pestaña en la que alguien está. Pero cuando escribimos aquí en blanco, notarás que cuando haga clic aquí click izquierdo, usando el botón izquierdo del ratón, se abrirá en la nueva pestaña. Este es un comportamiento que se guarda para qué, para el botón central del ratón. Normalmente, tendremos que hacer clic en el botón Boca media para poder abrirlo en la nueva pestaña, así. Para ser honesto, creo que no deberías usarlo. Algunas personas lo usarán porque piensan que ese sitio web del día es el sitio más importante. Pero creo que molesta a la gente cuando saben que el comportamiento predeterminado es abrir el sitio en la pestaña actual Saben que si quieren abrirlo en otra pestaña, solo usarán el botón central del mouse. Deja el comportamiento predeterminado. Te estoy mostrando es porque vas a mediarlo al 100% en algún lugar de Internet. Eso es lo primero. Y bueno, hay excepciones donde tal vez algo así sea de buen pensamiento. Es una buena solución. ¿Cuándo? Bueno, imagina que el usuario de tu sitio web tiene algún tipo de progreso de tu lado. Al igual que, por ejemplo, está viendo una película o superior, está tomando una forma que pasó la vida, por ejemplo, 10 minutos escribiendo todo, y él mal clic y ahora está de otro lado. Si lo tiene así, entonces simplemente pierde todo, todo el progreso. Cuando se ha puesto así y hace mal clic usando el botón izquierdo del ratón, entonces está de otro lado. Esa es una buena solución para eso. Bueno, es una solución sencilla, pero sí, puedes hacerlo así. ¿Cómo saber si alguien está haciendo algo? Bueno, para eso, necesitas conocer el script Java. Para saber qué está haciendo el usuario de tu lado, necesitas conocer Java script. Es un tema para otro curso. Pero bueno, ese es el momento en el que puedes usarlo. De lo contrario, no lo recomiendo. Puedes usar un atajo de Met, como puedes ver para crear enlaces a los internos, y lo que es la escuela cuando agregas aquí una columna como esta, podemos Como puedes ver, crear un enlace externo un poco más rápido porque se agrega el protocolo HTTPP Así que ahora puedes escribir el nombre del lado al que te estás vinculando. Pero también hay uno que se llama blank, y quizás te estés preguntando por qué hay algo como esto aquí que no usamos aquí. Para ser honestos, esta es información totalmente adicional. Si no te interesa , puedes simplemente s kve. Si te interesa, entonces escucha. L, significa relación, ¿verdad? Y este atributo da información adicional, ¿cuáles son las relaciones entre tu sitio y el sitio al que te refieres, verdad? Entonces por ejemplo, cuando te refieres a Google, y estos valores aquí están aquí porque quieres proteger al usuario de tu sitio. Qué bien, mira. Cuando alguien hace clic en este enlace, imagina que este sitio web era malicioso. El usuario no lo sabría porque todo se ejecutaría en segundo plano, justo en el fondo del sitio. Ese sitio web podría cambiar esta pestaña. Imagine que esta pestaña se puede cambiar mientras el usuario está viendo este sitio. Y cuando regrese a este lugar, no lo notará porque alguien cambiará solo el Link Pi, por ejemplo, cambiando index a Index dot dos, right, o el nombre del dominio por algo muy similar. Y también, por supuesto, hará que parezca que es lo mismo. Pero que el usuario estará ahora en otro sitio web. Y, ya sabes, aquí puede escribir alguna información tradicional. Él puede escribir algunas cosas que no deberían ir al sitio web malicioso, ¿verdad? Por supuesto, cuando buscas en Google, no necesitas preocuparte por nada, ¿verdad? Pero cuando estás enlazando a algún lugar que no estás, ya sabes, 100% seguro y es una buena idea hacer tal cosa. Para ser honestos, el problema de esta solución es también que se ha solucionado, como hace cinco años, que ya no es posible hacerlo porque los navegadores web de Noticias simplemente la agregan automáticamente. Entonces simplemente no hay necesidad de hacerlo porque es un comportamiento predeterminado de tu navegador web. Pero si quieres soportar navegadores web antiguos como ese, como Internet Explorer y así sucesivamente, entonces es buena idea agregar algo así. Especialmente cuando estás creando algo lo que se llama foro. Porque en el foro, tienes buenos usuarios, y estos usuarios pueden enlazar a sitios web, recomendando cosas que no tienes forma de verificar, porque hay miles de usuarios en el foro y pueden enlazar a muchos lugares y no sabes a qué se refieren Entonces puede causar el problema a los usuarios de tu foro. Tienes muchos usuarios en tu foro. Y tal vez estén usando el navegador web más antiguo. Después agregar algo como esto a cada enlace agregado por el usuario, entonces es una buena idea. De lo contrario, creo que podemos olvidarlo. Creo que porque no se necesita tanto. Bueno, ya sabes, cuando estás usando imagen, solo puedes olvidar un poco que solo se agrega automáticamente, no necesitas pensarlo, ¿verdad? Pero cuando lo estás haciendo, de forma manual, solo toma más tiempo teclearlo. Para foro, sí, de lo contrario, no. Pero de todos modos, como dije antes, note que todavía estamos usando el espacio en blanco aquí, ¿verdad? Bueno, es solo problema cuando lo estás usando. Dije que deberíamos evitarlo. Así que simplemente no uses en blanco. Úselo solo en situaciones en las que alguien tenga un progreso que potencialmente podría llevar a un problema que alguien usaría el progreso. Y esto es sólo una solución simple. Hay muchas otras formas de hacerlo, no hacerlo de esta manera. Eso está en esa lección. Agradécele 31. #labels: Hola amigo mío. El día de hoy aprenderás cuáles son nuestros trabajos y por qué hasta molestarte en crear algo como esto? Bueno, las etiquetas te permiten saltar de tu lado al lugar específico de tu sitio muerto al que quieres que salte el usuario. De acuerdo, cuando algo es la luz que es útil. Vayamos a Stack Overflow. Este es un gran sitio web donde puedes encontrar mucho conocimiento gratuito de otras personas como tú. El que están aprendiendo, el que presta algo. Por lo que la gente comparte sus conocimientos de forma gratuita. Y para ser honesto, este es el lugar donde pasas la mayor parte de tu aventura de programación o desarrollo web. Entonces digamos que aquí hay un tema cómo centrar horizontalmente en elemento en el futuro, querrás aprender esto usando, por ejemplo, CSS. Y aquí hay muchas respuestas, ¿verdad? E imaginemos que el tinte quiere compartir esta respuesta. Y vamos a copiarlo, y vamos a ponerlo aquí. Como pueden ver, estamos en la parte superior de la página web. Entonces compartir algo como esto es jazz, no bueno, ¿verdad? Porque necesitarás mandar a la persona con la que quieres compartirla donde sea este agradable, ¿verdad? Usa el número de solución baba, marca baba, necesita desplazarse a la solución que sería estúpida o usar la solución que fue creada por la persona. Estúpido, estúpido. Aquí tenemos un botón Compartir. Y cuando copio y lo pego aquí, bam, estamos instantáneamente en esta respuesta. ¿ Qué ha cambiado? Mira aquí el enlace. Tenemos algo así. Hash y el número. Y este número después del hash dice que necesitamos saltar a esta etiqueta específica. En tanto que esta etiqueta puedo ver, se puede hacer. De acuerdo, usemos el atajo Control por favor. Más tres más i Usemos aquí el inspector. En el Chrome, es Control más 3 más j ¿De acuerdo? Y saltemos aquí. A lo mejor ser pira es clave. Aquí. Como pueden ver aquí, aquí tenemos este número. Entonces para crear una etiqueta, necesitas escribir ¿qué? Tipo Angkor, el nombre del trabajo. Y entonces alguien en el navegador necesita escribir algo como esto, o puedes escribirlo, ¿verdad? Y entonces el navegador web saltará a este lugar específico de su sitio. Es así como funciona. Está bien, hagámoslo. Hagámoslo. Cuando estamos de nuestro lado, no tenemos un pergamino porque no tenemos contenido. Por lo que necesitamos hacer contenido o crear algunas etiquetas de línea de pan como esta, por ejemplo. De acuerdo, vamos a crear algunos de ellos. Y así pongamos aquí algo como esto. Ve a la cima. Entonces vamos a crear un ancla que nos permita ir a la cima de nuestro sitio. De acuerdo, así que hagámoslo. ¿ No qué? Ir a la cima, algo así como iban a ir a la cima. Ahora cuando pasemos por aquí, vamos a la cima, como pueden ver, no estamos en la parte superior, García, en la parte inferior de nuestro sitio. Eso es porque aquí se ha agregado esto, pero no tenemos ancla al que b pueda ir, ¿verdad? Tenemos que crear lo mismo que hicieron aquí, ¿verdad? ¿ Qué hicieron? Un nombre, derecho, así ancla con el atributo nombre. Entonces vamos a crearlo nombre atributo y vamos a llamarlo va a la cima. Ahora, vamos a ir aquí y hago clic en él. Como puedes ver, podemos saltar a la droga. Y esto es bastante guay, ¿verdad? Podemos saltar a cualquier lugar que queramos así podemos, bueno, esto es bastante útil para escribir porque podemos poner, por ejemplo, en la esquina inferior derecha que van a dub cuando alguien se desplaza muy lejos y quiere ir a DAPI, solo puede hacer clic en él y saltar a la cima. Pero sería genial si estos botones van a la parte superior se moverían con el pergamino. Pero aprenderemos sobre cosas como esa, cómo poner las cosas en la esquina inferior derecha y cómo moverlas cuando alguien se desplaza en el futuro. Entonces Ese no es el tema de esta conferencia. No obstante, estos bastante útiles también, correcto, porque hace que tu llamada, tu sitio web sea un poco mejor para el usuario. Entonces ve a dub, funciona bien. Pero imaginemos que tenemos el posterior en alguna parte, ¿verdad? Entonces imaginemos que tenemos las encuestas sobre Knaflic. Y digamos que queremos saltar a ella, ¿verdad? Entonces lo que necesitamos para crear un ancla, y vamos a publicar, por ejemplo, número 45815, ¿verdad? No lo sé. A lo mejor digamos que este pulso es este número. Entonces ahora vamos a crear ancla de tasas aquí, y vamos a nombrarlo así, ¿verdad? Y como puedes ver, funciona bien. Al hacer clic en él, llegué a pausar About Nothing. Cuando hago clic en, voy a una cima, voy aquí. Pero hay un problema porque usamos ancla para Walt, para texto completo y se debe usar para enlaces, vale, no para texto completo. Así se llama resolver este problema por ejemplo, así. Como puedes ver, funciona bien. No obstante, digamos que en el futuro entonces JavaScript y quieres, por ejemplo, extraer el texto aquí, ¿no? Por lo que en el lado de etiquetado empeñado, aquí está este rosa. Créeme, no se llama a eso algo así aquí. Entonces tal vez pongámoslo aquí. Veamos qué pasa. Tenemos espacio aquí. ¿ Por qué es así porque el párrafo sólo agrega algún margen a la parte superior e inferior. De acuerdo, entonces esta solución tampoco es buena. Estas no son una solución. Sí, podemos usar ID, el ID de atributo, y eso se llama que iría a la cima. O sea, no es bueno a unos 450. Como pueden ver ahora estamos aquí. No puedes usar el atributo name aquí. Simplemente no va a funcionar. Como puedes ver, ¿no funciona bien? Para ir a TEM funciona porque está bajo un nombre, funciona solo en la pila, ¿de acuerdo? Por lo que necesitas usar ID para hacerlo así. Y tal vez te estés preguntando por qué incluso te molestes en usar este enlace aquí mismo. Y podríamos simplemente usar el ID que puede ver sobre cualquier cosa. Para ser honesto, esa es una pregunta muy, muy buena. E incluso puedes encontrar una pregunta como esta en este desbordamiento de pila. Si lo deseas, puedes leerlo y encontrarlo. Eso es un ejercicio a realizar. Tan solo así que ve ahí y trata de encontrar este tema porque, bueno, ya sabes, necesitas conocer este sitio web. Realmente buenas noches. Este es uno de los mejores sitios web donde puedes encontrar soluciones. De acuerdo, Así que lee al respecto. Pero voy a decir también algo de mí mismo, ¿de acuerdo? Y lo primero es que cuando estés usando la etiqueta de ancla en el futuro, aprenderás algo con el CSS y Eve que quieras, ya sabes, darle estilo a cada ancla, así que cada enlace, entonces esto puede causar algunos problemas, ¿verdad? Entonces la solución como esta es mejor que, ¿verdad? Y sobre todo la solución será la mejor. Pero siempre hay mal, ¿verdad? Puede haber una situación en la que se quiera poner dos valores aquí y otro valor, por ejemplo, para el ID. Y el problema es que puedes tener dos valores en ID, ¿de acuerdo? Simplemente no funcionará si dejas de trabajar. Cuando hago clic en esto, simplemente no funciona. Podemos tener sólo un valor aquí, ¿de acuerdo? Y esto causa problema. Y creo que por eso el Stack Overflow tiene la solución porque como puedes ver, ha sido muy similar tachuela aquí. Y se puede ver que estoy seguro que están usando algo de fondo. Y simplemente no quieren repetirse. Por lo que podría haber un momento en el que simplemente no puedes usar ID. La mayoría de las veces se puede. Está bien. Y prefiero usar la versión ID. Pero IV, hay algún día en el que tal vez te estés preguntando hmm, necesito añadir aquí otra identificación. Entonces necesitas apegarte a esta solución, ¿de acuerdo? Esto también está mejor apoyado. Pero para ser honesto, esto se apoya, creo que incluso en Internet Explorer 6. Entonces no creo que debamos preocuparnos ahora mismo por el apoyo. Puedes poco más, más, más de hacer todo. Por lo que la mayoría de las veces usan la solución. bueno saber que hay una solución como ésta porque necesitarás con otras personas que estén usando la solución. Y esa es la diferencia. Yo también quisiera agregar en esta conferencia que se puede ir a la cima un poco más rápido. No necesitas hacer algo como esto. Porque imagina eso, Hey, digamos que agregamos algo de contenido aquí justo después a nuestra página web. Y nuestro top es donde No está en el mismo lugar, aquí mismo, ahora mismo. Y si tecleas aquí arriba, siempre saltas a la cima. No es necesario, no es necesario ni siquiera crear la etiqueta. Siempre funcionará en nuestra página web. Escribiste, estás en la parte superior, de acuerdo. También puedes escribir el hash, y también lo cuentan. Entonces hay dos versiones, top o el hash single Tosh, ¿de acuerdo? Prefiero éste porque bueno, dice lo que queremos lograr aquí, ¿no? De acuerdo, entonces manda a alguien a la cima, bien. Esta cosa es un poco menos de descriptiva, ¿verdad? Entonces usa esta versión, creo, para mandar a alguien a la cima. Esa es sólo una buena lección. Muchas gracias. 32. ¿Cómo crear un enlace al correo electrónico?: Hola amigo mío. Por cada lado, siempre debes proporcionarte una información de contacto, ¿verdad? Por lo que debes proporcionar ahí al menos un correo electrónico, números telefónicos, muestreo así, ¿verdad? Porque aumenta la credibilidad de tu lado. ¿ Cómo hacerlo correctamente? Bueno, podrías escribir algo así. Tu nombre de correo electrónico, domain.com. De acuerdo, suena así. Y el programa es que es sólo un texto, ¿no? Creo que va a hacer mejor que al hacer click en él, ejecutemos su programa que está instalado en el equipo del usuario que le permite enviar correos electrónicos. Eso aumentaría eso disminuiría el tiempo que necesita para enviarte un correo electrónico para contactarte. Y, ya sabes, el tiempo es dinero, ¿verdad? Para todos. Y apreciarán algo como esto. ¿ Cómo hacerlo? Bueno, para poder hacerlo, necesitas crear la etiqueta de anclaje. Y puedes usar emit para eso para ayudarte con el valor masculino 2 para el atributo de una referencia, ¿verdad? Y aquí pones el nombre del correo al que quieres enviarlo. Y luego aquí arrastras el texto. Eso debe ser que eso debe ser visible como por ejemplo, correo electrónico, lo que sea, ¿verdad? Y ahora como pueden ver, tenemos que conseguir algo como esto aquí. Al hacer clic en él, tengo una tonelada ahí, programa bert instalado en mi computadora y ahora puedo enviar aquí al instante su principal. Entonces esto es bastante guay, ¿verdad? Porque ejecuta el programa que está instalado en mi computadora. Si alguien está usando el teléfono móvil, ejecutará la aplicación móvil que le permita enviar el correo electrónico que. Entonces esto es bastante impresionante, ¿verdad? ¿ Y es todo a esta conferencia? Bueno, lo primero es que cuando seleccionas la imagen así, esto es genial que al agregar agravación usando aquí, notará que el texto era correo electrónico y pondrá el correo al instante aquí. Eso es genial, ¿verdad? Son speedups, incluso las cosas un poco más, ¿verdad? Como se puede ver, todavía funciona bien. También puedes agregar el tema, vale, Así que podemos hacer algo así. Esto es como por ejemplo, Pregunta, sujeto igual pregunta, pregunta de este lado. Acerca de los gatos, algo así. Por lo que este es un tema por defecto. Ahora, cuando haga clic en él, notarás que aquí en el mapa los afuera en poesía ver es tema. Y tenemos con tu pregunta de este lado sobre GOT, esto es bastante guay porque algunas personas no ponen temas de esos. Por lo que algunos de ellos tiraron con sujetos que no se conecta al texto. Y esta cosa te permite tener algún tema por defecto que al menos conectará el Yo Too de, bueno, vino de verdad? Entonces puedes poner aquí el sujeto predeterminado usando la construcción así, vale, así hizo el colon que masculino, luego el signo de interrogación que el sujeto es signo, y luego el contenido del sujeto. El default, si bien recomiendo encarecidamente hacer estos swing, es sobre esta conferencia? Nota, podemos usar la dirección de vuelta. Esto es bastante útil por lo que podemos poner otra pila como esta en esto. A mí me gusta tenerlo formateado así y y hasta molestarme en hacerlo. Bueno, informas agregando la etiqueta de dirección que el contenido de la misma es solo una dirección. ¿ De acuerdo? ¿ Por qué incluso molestarse en hacer auto necesario? Porque Google sabe ahora que esta es dirección, ¿de acuerdo? Por lo que podrías proporcionarle más información como por ejemplo, tu nombre y apellido. Y por ejemplo, puedes poner aquí, ¿De dónde eres, de dónde prospera tu empresa? O puedes poner ese número a menudo y así sucesivamente, derecha, en la pila de direcciones. Y entonces el Google sabrá que, vale, esto no es un texto respecto al artículo que estás, por ejemplo, mostrando de su lado o un Related ahi producto que quieres vender. Esto es solo una dirección, vale, esta es una información adicional para Google. Probablemente también hayas notado que el contenido aquí ahora está escrito usando la etiqueta cursiva aquí mismo es como un conjunto de etileno en cada pensar. Nada ha cambiado ¿verdad? Cuando pongo el I o cuando lo quiten. Entonces, ¿puedes cambiar el comportamiento por defecto? Sí, puedes hacerlo. Pero para poder hacerlo, necesitas conocer el CSS del que vamos a hablar en futura lección. Gracias. 33. Enlace electrónico: Hola En la dirección. Creo que es buena idea proporcionarte también el número de teléfono. También aumenta la credibilidad de tu sitio web. Es muy importante, creo, incluir el número telefónico. No te preocupes, aunque tu sitio sea muy popular, quieres buenos manáculos. Créeme, proporciono el número telefónico y muchas, muchas personas visitan mi sitio web y es raro que alguien llame. Es buena idea tener un número telefónico de negocios de co, por supuesto, no es buena idea darle al personal un número telefónico aquí, porque a veces podrías conseguir a alguien que no te gustaría que te llamaran por ataques de dominio. En estos días, ni siquiera se puede ser gente, así que no te preocupes, solo provisto porque realmente aumentó la credibilidad. De acuerdo, Entonces, ¿cómo hacerlo? Bueno, puedes poner el número, por ejemplo, aquí, así. Es importante sumar los espacios. Creo que porque aumenta la visibilidad de tu número de es más fácil escribir en papel cuando alguien dice que el número así, tenemos esta base no es sin ellos, ¿verdad? Es más fácil leerlo y recordarlo. Entonces así es como lo haces. Pero lo más importante para nosotros ahora es que podemos crear un vínculo. ¿De acuerdo? Entonces pongamos de acuerdo el enlace. Y con el fin de crear un enlace al número, no escribimos masculino 2, pero podríamos escribir eso tell. Entonces son camisas para el teléfono, ¿verdad? Y luego el colon, es importante poner aquí el colon y luego el signo más. Y luego necesitas escribir aquí el código de país que puedes encontrar en Google. Simplemente puedes escribir códigos de país. Y por ejemplo, para Polonia, ¿es qué? Es 489. Entonces cuatro a ocho y luego el número que es tuyo, ¿verdad? Y ahora como pueden ver, cuando hago clic en él, quiere escoger una aplicación para ejecutarse. Bueno, si tienes un navegador web conectado a tu teléfono, entonces puedes enviar el número al instante a tu smartphone. Esto es bastante guay, ¿verdad? Ese es el primero, es que alguien está visitando tu sitio en smartphone. Él sólo puede hacer clic en él y al instante te enfría. Eso también es bastante guay, ¿verdad? Porque no necesita hacerlo lo escribiré en papel. No necesita memorizarlo. Por lo que es bastante genial que se pueda simplemente hacer clic y luego elegir, por ejemplo, la aplicación como aquí. Qué tipo de aplicación, ya sabes, Skype, lo que sea que la gente pueda tener instalada una app que les permita llamar usando el micrófono del equipo también, solo puedan hacer clic en ella y en la llamada que te desde la computadora. Por lo que también es hacer que sea más fácil y todo lo que lo haga más fácil para ellos será apreciado por ellos. Entonces recuerda, es genial agregar algo así. Entonces para hacerlo, necesitas ajustar IPS, decirle a Scollon su código de país antes del signo más, ¿verdad? Y tu número. Y aquí por supuesto puedes escribir lo que quieras, escribir lo que sea, o puedes escribir la fuente, por ejemplo. Pero creo que es una buena idea repetir lo que esto aquí, porque bueno, tal vez alguien que no quiera usar aplicación, tal vez alguien quiera escribirlo. Entonces es buena idea ponerlo así. También puedes usar la imagen para eso si no quieres recordar esto. Por lo que solo puedes usar el a colon y luego telefonearlo. Y como puedes ver, esta parte del enlace al teléfono se pone instantáneamente aquí. Simplemente tecleas tu día Código de país y el número que hay en esa lección. Muchas gracias. 34. headers h1 a h6: Hola, amigo mío. hoy te enseñaré qué son nuestros encabezados y cuándo debes usarlos? Porque los encabezados mejorarán su contenido de tu sitio web porque mejoras la experiencia de usuario de tu sitio. ¿ Por qué es eso así? Bueno, ¿qué es una cabecera? El encabezado es sólo un texto plano. Sí, lo es. Pero es grande. Se agranda y también se posiciona por encima de nuestro texto. ¿ De acuerdo? Y esta ampliación, esta ampliación, hace pedir al usuario que se centre en este tipo de textos más de lo que está bajo el rubro. De acuerdo, entonces, ¿cómo creamos encabezados en HTML? Para hacerlo, utilizamos la etiqueta que se llama, por ejemplo H uno. Y lo que sea que escriba aquí va a ser un encabezado, encabezado. El más importante. A ver. Como pueden ver, tenemos aquí unos textos grandes, como dije, y también está atrevido, ¿verdad? Y también podemos ver que la fusión sumó arriba y abajo. Entonces este es un encabezado y estos bastante seguros va a hacer que el usuario se centre en ello, ¿verdad? Va a leer esto primero no se va a centrar en las cosas aquí y se va a centrar en esta de aquí. Y por eso estamos usando titulares, ¿no? Los creamos con el fin de enfocar la atención en la clave, el mensaje más importante del texto. Algunas partes de los textos pueden no interesar al salmón y los encabezados permiten saltar rápidamente a la parte específica de los textos que interesa al usuario. El titular le dice brevemente al usuario y de manera breve, qué se tratará el siguiente párrafo, lo que hace que tu texto sea más fácil de leer. Y si es más fácil de leer, ¿qué es el usuario? Más feliz. Es hombres felices. Ahora bien, esto es crucial para cualquier buen artículo. ¿De acuerdo? Entonces donde nuestros titulares usan, por ejemplo, un titular puede ser textos escritos en una fuente mucho mayor en el periódico, como si se tratara de los subtítulos de textos individuales. Tal titular se utiliza para llamar la atención o aumentar la legibilidad de los textos, ¿no? De acuerdo, Entonces así es como se crea un titular, un J1. ¿ Por qué es un J1? Bueno, h es la primera letra para de la palabra cabecera, ¿no? Encabezado. De acuerdo, por eso es edad. Y lo genial es que hay más de un encabezado H. Bueno, puedes escribir a1, a2, a3, 4, 5, y 6. Se cuenta con seis versiones de encabezados. ¿Cuál es la diferencia? Bueno, esto es un poco más pequeño que uno. Esto es un poco más pequeño que h a, aquí, vamos a cambiarlo a libre de edad. Esto es un poco más pequeño que h y así sucesivamente, ¿verdad? Por lo que se puede ver esto, el más importante, y se están haciendo más pequeños por defecto. Se puede cambiar el comportamiento por defecto, pero no se debe hacerlo desde este espacio, desde el cuerpo HTML usando CSS del que vamos a hablar en el futuro. Saltemos al artículo sobre la conferencia que estás escuchando. Observe que tengo aquí algunos mensajes de texto que han escuchado en esta conferencia. Y note que aquí tengo buenos encabezados. Y como dije antes, cuando veas el encabezado, puedes ver instantáneamente lo que hay debajo, ¿verdad? Porque el AGI, entonces ¿por qué creamos el encabezado? De acuerdo, Entonces esta parte se trata de esto. Por lo que no es necesario leer todo el artículo. Simplemente puedes saltar a la parte específica de Article y simplemente leer la parte que te interesa. Por lo que esto aumenta la legibilidad de tu artículo y experiencia de usuario y lo que sea, recuerda, lo que sea que aumente la experiencia del usuario, hace que tu sitio web sea más exigente. Por lo que Google se ubicará más alto, y también la gente lo visitará más. Por lo que es bastante importante usar encabezados. Y el encabezado que es H1 debe usarse sólo una vez. Esto es sólo algo en lo que debes pensar respecto a cada sub página de tu lado, Ok, sitio web. Por lo que este es como el mensaje más importante respecto al artículo que estás describiendo de tu lado. ¿ De acuerdo? También nota lo que pasaría si vuelvo, digamos que no va a ser una cabecera y M, está bien, va a estar aquí así. ¿ Qué pasará? Se puede ver al instante que este texto no es tan fácil de leer como antes, ¿verdad? Siempre es mejor si al menos esta cosa se atreviera, por ejemplo, ¿verdad? Esto es bastante importante para crear encabezados, ¿de acuerdo? Por encima de los textos que vas a tener debajo del encabezado. Entonces volvamos a esto. Entonces, como puedes ver, el encabezado podría tener un estilo diferente. Aquí mismo, está todo aquí, es más grande. Y no está atrevido ni siquiera aquí mismo, como puedes ver, está en audacia y más grande y luego se hace más pequeño con cada encabezado. Pero puedes cambiar este comportamiento para que sea lo que quieres que sea, pero usando el CSS que no puedes aprender en el futuro. De acuerdo, es hora de hacer ejercicio. Como se puede ver aquí abajo, es un texto que vamos Ahora. Formatea el ritmo, ¿verdad? Porque todo está en una línea aquí. Esto es bastante no confiable en absoluto, ¿verdad? Cuando alguien ve un gran trozo de textos, no lo va a leer. Acuérdate de ello. Por lo que necesitamos formatear. Como puedes ver, ya he formateado el beat BAD en código de Visual Studio. Para que pudiera hacerlo como ejercicio. De acuerdo, Puedes hacer ya sea solo o tenemos mezquinos si quieres escribir. Y como puedes ver aquí, tenemos algo así como los fundamentos de la creación de páginas, breve introducción. Creo que esto parece lo bueno para el encabezado, ¿no? Este es como el tema principal de todo aquí abajo porque no estamos hablando de lo que es un HTML y CSS. Entonces estas cosas, creo que están conectadas al encabezado principal, por lo que no podemos llamarlas H2. Y a este ala vamos a llamar también a H2, ¿verdad? Y como puedes ver, esto se está poniendo un poco mejor, ¿verdad? Porque tenemos los fundamentos de la creación de páginas. Breve introducción. ¿ Qué es HTML? De acuerdo, tan lindas son las cosas con respecto al HTML o al CSS. De acuerdo, entonces aquí vamos a hablar de CSS. Se está poniendo mejor. De acuerdo, Vamos ahora, por ejemplo, ¿qué? Creo que aquí tenemos lo que algún tipo de pregunta que es respondida por la ley. Entonces, ¿cuáles son los impuestos? De acuerdo, entonces creo que esta cosa puede ser h3, ¿verdad? Porque esto está conectado a H dos aquí. Entonces cambiemos esto por cuadro H. Y también lo que es un selector H libre. Y cómo incluyo el archivo CSS pij un árbol. Y ahora está cada vez mejor. Como se puede ver, todas estas cosas aquí. Creo que son párrafos. Entonces podemos decir que se trata de algún tipo de textos, o deberíamos seleccionarlos todos y ponerlos en el párrafo. Entonces el Google sabe que esto es texto. Está bien. No necesitamos hacerlo. Como ya has notado, probablemente incluso para ver que esto es texto en la página. Entonces cuando mires aquí, pero recuerda siempre ese texto. Si se trata de un texto como un artículo, es buena idea ponerlo en el párrafo así. Y tendrás que subir, notar que esto no es tan confiable, bueno para leer como antes, pero es porque, bueno, el comportamiento por defecto para 3, 2, y 1 en este caso no es tan bueno, ¿verdad? Probablemente para esto, ¿qué es Selector? Sería mejor hacerlo, por ejemplo, aquí en el centro, ¿no? Centroarlo por ejemplo. Y puedes centrarlo usando algún tipo de etiqueta que se llama centro. Como puedes ver, ahora mismo es un DAG rojo. Y es rojo porque ya no se usa porque cosas como esa se deben hacer a través CSS y vamos a hablar de eso en el futuro. Entonces esto que tipo de engaño se usó hace mucho tiempo en HTML, pero hoy en día, no lo uses. Y probablemente, bueno, estos serían un poco más fáciles de leer si hubiera más textos, ¿no? Se trata de textos muy cortos. Entonces si hubiera más textos aquí, esto será más fácil de leer cada vez, ¿verdad? Podrías también, no sé, noun-verbo que lo que sea, esto, esto va a ser mejor cuando el texto sea más grande, ¿verdad? Entonces tal vez la regla de borde tres no es necesaria aquí en este caso en particular. Pero bueno, probablemente nadie simplemente escribiría algo así para adjuntar a un piloto de combate, usa la etiqueta de enlace en la sección de cabeza. Entonces te darás un ejemplo cómo, cómo hacerlo, ¿verdad? Y esta cosa, ¿tomaría algo de espacio? Incluso podemos hacer algo así usando algo como Lorem, Ipsum, atajo de Emmet. Como puedes ver, esto se está haciendo un grande, un poco más grande ahora mismo. Podemos teclear Lorem y podemos, por ejemplo, multiplicarlo por 50, como puedes ver ahora es más grande y está bien, como pude ver es esta fina página y ahora es grande. Probablemente textos como ese necesitarían ser divididos de todos modos. Por lo que estos también contará con la noche cuando quieras algún texto de marcador de posición. Y bueno, el siguiente ejercicio que quiero mostrarles es cómo crear los encabezados de H1 a H6. Trató de hacerlo solo con la ayuda de emitidos de los que hablamos antes, ¿cómo hacerlo? Bueno, h multiplicado por 6, como se puede ver, maíz nosotros buscamos pilas llamadas h, ¿verdad? Pero queremos números ahí. Entonces hagámoslo así. Estos son números como 1, pero queremos 1, 2, 3, 4, 5, 6, 7. Y te dije que se usa en lugar de número el signo de dólar, vamos a contar desde uno hasta el número que está aquí, escritor. Entonces tenemos seis y 12, 34, 56. De acuerdo, eso es, eso es bastante guay. Ahora necesitamos el contenido. Entonces, ¿cómo crear un contenido? Bueno, cuando usas los corchetes rizados y pones aquí el contorno. Y como pueden ver, aquí, tenemos el texto aquí. Oh, lo siento, esto está en el lugar equivocado. El contenido debe estar aquí, ¿verdad? Como pueden ver, aquí tenemos un texto. Y también queríamos numerados, pero a partir de uno hasta seis. Y como puedes ver, funciona bien. H1 a H6. Probablemente te has dado cuenta de que cometí un error y esto está totalmente bien porque soy humano, ¿verdad? Te estoy diciendo esto porque probablemente cuando estás intentando escribir tu código, cuando estás tratando de escribir algo para Scott ¿tu letras justo ahora? Vas a cometer errores. Y necesitas saber que estoy preparado antes de la conferencia, ¿verdad? Y cometo menos, menos de ellos, menos errores porque estoy preparado y además tengo experiencia en este asunto, ¿verdad? Pero nosotros los humanos tendemos a cometer errores en no nos preocupamos, y no nos sentimos abrumados cuando no conoces la respuesta al instante. Cuando estás cuando algo no funciona correctamente, esto es bonito, bastante normal. ¿ De acuerdo? Estás al inicio de un viaje y aunque estés en Vance, si tienes experiencia avanzada en algo, vas a cometer errores, tal vez menos de ellos, tal vez menos de ellos, pero vas ahora hazlos y no no no hay respuestas al instante. Además, te digo esto y casi no arreglo todos los errores en el derecho de post-procesamiento. Porque solo podría borrar el último segundo donde cometí un error como este aquí y mostrarte que no estoy cometiendo ningún error, pero solo te haría sentir guerras, ¿verdad? Porque vas a estar como, Vale, este tipo no me enferma. ¿ Cómo diablos está haciendo todo por todos los caminos correctamente, correcto. No voy a ser nunca como él. Para ser honesto. Eres igual que yo, pero tengo igual de un poco más de experiencia que tú. En el futuro. Vas a hacer todas las cosas que hago tan rápido como yo. También hay un atajo genial del que no hablé. Es nuestra clase Z. Cuando tienes texto como este. Y va aquí arriba. Como puedes ver, es difícil leer naranja. Comprueba, cambia algo incluso en este texto. Y para poder cambiarlo, puedes envolver el texto usando el atajo Al plus Z, como puedes ver ahora todo aquí está envuelto así cuando el texto es un poco demasiado grande en la pantalla. Entonces cuando necesites desplazarte, solo se va a envolver así, ¿verdad? Y hay que saber que cambia la apariencia del texto aquí mismo. No se va a cambiar, pero aquí es más fácil ahora cambiar algo, agregar un nuevo texto, ¿verdad? Por lo que recomiendo encarecidamente usar este modo. Esa es sólo la lección. Que tengas un buen día y siempre hay, recuerda que estoy aquí para apoyarte en caso de que tengas alguna duda. Que tengas un buen día. 35. cite vs. blockquote vs.: Hola a todos. hoy te enseñaré la diferencia entre la cola se ve bien y el impuesto del sitio. Por lo que hoy vamos a aprender a citar a alguien como por ejemplo, Albert Einstein. Como pueden ver, con el fin de asignar a alguien que debamos usar la tachueta en su nombre o su nombre y el libro en el que lo escribió o URL dominical, ¿no? Tenemos que escribir en el sitio como de dónde viene el texto que está en blockquote o la etiqueta q. Por lo que el contenido oscuro del sitio es, por ejemplo, el nombre de persona que estamos viendo. Y entonces el contenido está dentro del blockquote. En la etiqueta q. También citamos a alguien dentro y aquí proporcionamos quien lo dijo, correcto. Pero lo hicimos dentro de él porque es como Just Adam justo aquí. Hicimos una cotización, mejor pertenecer a algunos que a 0. Y luego dijimos que el IED fue establecido por Angie Sepkoski, que son sangre evoluciona libro. Por lo que proporcionamos también el libro. Es bastante importante decir, decir de dónde viene. Bueno, no sabemos de dónde vienen estos textos. Bueno, al menos no lo sé. Esta cosa se decía hace mucho, mucho, mucho, mucho tiempo antes de internet, ¿verdad? Entonces no sabemos exactamente tan triste decir que viene del libro específicamente, como podemos decir aquí, ¿verdad? ¿ Cuál es la diferencia entre la Q y el blockquote? Bueno, como se puede ver, blockquote es block quote. Significa que cuando vamos aquí, es un bloque, lo que significa que tenemos margen arriba y abajo. Significa que el texto no está uno al lado del otro. No está en línea, como en el caso de la cotización. Atrás. Como puedes ver, la q tag, que está aquí, está en línea, ¿verdad? No agregó la línea brillante, ¿verdad? Entonces esa es la primera diferencia. La segunda diferencia es que, oye, nota que hemos llegado aquí, cita, las señales de cotización, no están aquí. Entonces esa es la principal diferencia. Y la gente recomienda usar la etiqueta de código para cosas que son solo 94 cortas, cosas como estas bien, para una más grande. Es esto porque esta palabra se pretendía cuando alguien creó esta oscuridad. Está bien. Se puede leer siempre cuando se debe usar algo. Cuando mueves el mouse sobre la etiqueta, como puedes ver, el elemento lateral representa una referencia a un trabajo creativo. Debe incluir el título de la obra o el nombre del autor, o una referencia URL, ¿no? O, y referencia en forma abreviada y así sucesivamente. Pero puedes ver cómo se debe usar algo cuando mueves el mouse hacia Visual Studio Code, es algo bastante útil. Y también cuando haces clic aquí en este enlace o lo copias derecho a tu navegador web, puedes leer más sobre esto. Creo que esto es bonito, bastante guay. Entonces leamos esta cita porque me gusta mucho. Terminemos con esta conferencia. Pensando. Se sabe que tal y tal idea es imposible de implementar. Pero hay algunos ignoran a los animales. Entonces alguien que es ignorante, así que alguien es tal vez estúpido, que no lo sabe. Y está haciendo esto pacientes hospitalizados. Entonces tal vez no era tan estúpido, como todos decían que tenía razón. Es muy cool, cito, porque demuestra que no debemos mirar las definiciones y creerlas al 100%. Porque, bueno, sabemos lo que sabemos en la corriente, no con nuestro conocimiento actual es cierto, pero tal vez, tal vez haya algo que nos estamos perdiendo. Por lo que puede haber una guía como ésta con ignorantes. Y es ignorante y no va a cargar con las cosas que se dijeron. Y va a inventar algo. Así cobra vida la invención. De verdad me encanta esta cosa. Entonces no siempre escuches cosas que están disponibles para nosotros porque tal vez, tal vez no son la derecha Siempre. ¿ Probablemente has notado que el código de bloque es lo que está atado de alguna manera y tal vez no te guste cómo es el estilo. A lo mejor prefieres este. Siempre. Se puede cambiar el comportamiento predeterminado así, pero en el futuro usando el CSS. Entonces no te preocupes, es bueno usar las etiquetas así por el bien de informar qué tipo de texto dentro de tu texto más grande es, ¿verdad? Informas al tablero de Google, informas a otras personas ¿qué tipo de texto es ese? Es realmente importante hacer cosas como esta para que tu código sea un poco más semántica. Entonces cuando le das significado, significado semántico, puedes, sin embargo, tenemos nuestro CSS también agregar las cotizaciones usando entidades de las que hablamos. Por lo que hay entidades como las comillas dobles inferiores y la cotización doble derecha. Entonces crearemos un cartel de cotización como este. Para que puedas lograr cosas así. Pero como puedes ver, es un poco más difícil y no es la mejor solución. Sss siempre es mejor en casos como este. Eso es una docena. Gracias. 36. abbr | dfn: Hola amigo mío. hoy te mostraré cómo definir y utilizar correctamente los atajos en HTML para asegurarte de que los robots entiendan lo que estás escribiendo dentro de los artículos. Entonces para definir algo como lo tenemos aquí, HTML es un uso de lenguaje objetivo para crear sitios web. Deberíamos decir eso, Hey, aquí hemos definido algo. Y para hacerlo, utilizamos una etiqueta que se llama HDFN, que significa definir la f n, ¿verdad? ¿ Y cómo demostramos eso? Acabamos de poner el ataque definir en lo que estamos definiendo dentro de la etiqueta. Al igual que por ejemplo, párrafo. ¿ De acuerdo? Entonces esto es un par y pila porque este texto está dentro del párrafo, ¿no? Y necesitamos definir el HTML ahí dentro en ese párrafo ahora porque la pila está dentro de esto, ¿de acuerdo? Entonces ahora podemos ver claramente que aquí hay una definición, por lo que no deberíamos definirla más adelante en tu artículo. Pero aquí junto a donde dijimos que cuando dijimos exactamente dónde especificamos que Haidt aquí es una definición. ¿ De acuerdo? ¿ Por qué lo hacemos? Porque los robots viven, por ejemplo, de Google cuando ven tu sitio web y ven que estás definiendo HTML. Y alguien, por ejemplo, quiere encontrar la definición de HTML y escribe en Google, ¿qué es la definición HTML? Tienes mayor probabilidad de que te muestren ¿verdad? Porque Google sabrá que lo defines. No acabas de hacer un artículo referente al HTML. Se define el HTML. De acuerdo, esa es la diferencia. Aquí tenemos algo bueno como lo que usamos se llama JS en este texto aquí. Y puedes notar que tenemos aquí una abreviatura de atajo, cada abreviatura cuando la usas para que sea más fácil de entender para los demás porque no todo el mundo necesita saber qué es JS. Tú, entonces deberías usar algo que desecharemos, atacar a un pelo de bebé, que es su abreviatura, ¿verdad? Y lo hacemos así. Como puedes ver, hemos llegado aquí instantáneamente agregado lo que el atributo title donde especificas lo que significan estos atajos. Script Java, ok, Esto significa JavaScript. Veamos qué ha cambiado cuando abrimos el Firefox. Como has notado, HTML está escrito por defecto en cursiva, ¿verdad? Porque no son cartas de paso, ¿verdad? Es Italia. Pruébalo ahora. Y aquí js, cuando movemos el mouseover, tenemos información que bien, así que el atajo es sinónimo de JavaScript y también nos han matado las pequeñas bolas justo aquí, ¿verdad? Entonces aparece que sugiere que algo podría estar escondiéndose ahí, ¿verdad? Cuando los muevas por todas partes, ¿sabrás de qué se trata este atajo? Y esta muy buena idea para hacer esas cosas. ¿ Por qué? Porque como dije antes, bueno, tus alumnos, la gente que lee artículos no necesita conocer cada atajo. Y cuando utilizas la etiqueta de abreviatura, mostraste el Google, ¿te preocupabas por la gente, por los usuarios de tu sitio web? Aumenta la legibilidad de su, de sus artículos, ¿verdad? Si aumentan las posibilidades de ser alguien feliz, y si alguien está feliz, google estos Hapi, ok, Eso es, ahí es cuando la gente usará los servicios de Google. Y es por eso que usar abreviatura es una buena idea. Nunca voy a abreviar. Probablemente hayas notado que HTML también es una abreviatura. No sólo lo hemos definido aquí, sino que también es una abreviatura, ¿verdad? Por lo que también puedes poner una etiqueta dentro de otra etiqueta, ¿verdad? Hablamos de ello. Es como una etiqueta anidada. Entonces podemos poner su abreviatura también y decir que es el Hyper Text Markup Language, ¿no? Al igual que esto. Y aquí, como se puede ver ahora cuando movemos el ratón sobre, también tenemos esta información. Entonces usamos lo definido aquí porque lo estamos definiendo y usamos la etiqueta de abreviatura. Porque, bueno, esto es una abreviatura, ¿no? Por lo que es buena idea mostrar lo que representa. Aquí. Simplemente usamos la etiqueta de abreviatura porque bueno, no definimos qué es js, ¿verdad? Nosotros solo decimos, Hey, nosotros usando este caso en particular, JavaScript, eso es todo parte. Demostramos que es JavaScript para personas que no saben qué significa este atajo, diseñando la lección. Muchas gracias. 37. Etiquetas <strong>semánticas, <em>y <b><i>vs, , , de</i></b></em></strong> de ambos de ambos: Hola amigo mío. Puedes crear artículos de tu lado sin formatear, y será solo un texto plano. Pero cuando nos fijamos en texto plano sin formato, así que tenemos fuera, por ejemplo, textos en negrita. Entonces hemos tenido, por ejemplo, decirle al usuario, oye, ya sabes, aquí esta C como dice, son las primeras letras de aquí, por ejemplo, así. Entonces, cuando tus textos son solo textos planos, es más difícil de leer, sobre todo cuando es un texto más largo, ¿verdad? No es que el recrear, por ejemplo, uso de emiten, por ejemplo, usando la abreviatura del foro. Y cuando lo hacemos como por ejemplo, 30 veces el texto como este es simplemente ilegible, ¿verdad? Necesitas usar formato como por ejemplo, encabezado del que hablamos. Necesitas usar todo sierra algo. ¿ Cómo se llaman estos? El fuerte y audaz y otras cosas como esta, pero no vamos a hablar en esta conferencia. Por lo que hay una etiqueta B, yo sí sabíamos de la primera. Haremos cobalto los textos al segundo que lo haríamos ir. Ocho Alec, también hay algo así como subrayado y huelga subyacente solo hacen un subyacente debajo del texto y la S significa huelga, y simplemente golpea a través del texto. Estas cuatro etiquetas, como probablemente hayas notado, se utilizan sólo para dar formato al texto. Por lo que cambiaron la forma en que aparece el texto y por el bien de cambiar de apariencia, no debes usarlos. Sí, estos son impuestos antiguos, muy viejos y bien, hoy en día, sólo usamos CSS para lograr lo que hacen estas etiquetas. Casi siempre. En breve les mostraré algún tipo de excepción. Pero la mayoría de las veces usarás el CSS. ¿Por qué es eso? Entonces porque CSS te permite crear phi externo donde puedes cambiar cómo aparecen las cosas en cada página web que tengas. Bueno, tenemos bueno ahora sólo una sola página. Por lo que no dejas que cambie manualmente sea a iOS. Creo que esto no es nada. Pero más tarde cuando tengas, por ejemplo, 400 páginas, ¿no? Entonces algo así es realmente genial porque puedes cambiar de un archivo externo cómo se ha ido algo, nuestro logline, ¿verdad? Porque tal vez después no quieras que algo se atreviera o tal vez quieras cambiar de ball2 data lake o algo más, ¿verdad? Por lo que estas cosas deben hacerse, puede sólo a través de CSS. Pero hay etiquetas que se llaman etiquetas semánticas, lo que significa que en parte a partir de formatear, también tienen un significado adicional. ¿ Qué tipo de significado puede tener una etiqueta que sea adicional? Bueno, hay una etiqueta que se llama fuerte, que por defecto tienen un b como formato. Entonces como puedes ver aquí abajo, antes de hacerlo, asegúrate de leer el manual de instrucciones cuando usamos la etiqueta fuerte en esta parte de los textos, también está en negrita, ¿verdad? Se lo cambiaría a ser, También está atrevido. Entonces por qué incluso molestarse en usar fuerte es porque tiene un significado adicional. Pero podrías estar ahora, como, qué, ¿qué tipo de significado adicional? Esto, esto realmente no significa nada para ti, ¿verdad? Porque, oye, esta cosa pelotas, estas bolas grandes de la misma cosa, ¿por qué incluso molestarse? Bueno, este significado no es para el usuario. Este significado es para dispositivos, para programas, para robots como el robot de Google que visita tu sitio web y analiza el texto que proporcionaste al usuario. Está bien. Entonces eso podría ser algo útil, ¿no? Sí, porque cuando tú, por ejemplo, haces estas cosas usando la etiqueta fuerte y por ejemplo, cuando alguien está ciego y tiene un buen dispositivo que se lo lee, Esto se acentuará, por ejemplo, se lo leerá, leer de manera diferente. Antes de hacerlo, asegúrate de leer bien el manual de instrucciones. En lugar de antes de hacerlo, asegúrate de leer el manual de instrucciones, acuerdo, Puede que te vuelvas importante. Bueno, para ser honesto, No es preguntar quién decide cómo va a ser rojo porque es para los chicos que crean programas que vamos a leer tu texto a tope derecho. Esto, máximo, llama importantes a tus textos. Y también throng se utiliza para mostrar al usuario que lee tu sitio web. Muerto. Esta parte de los textos es importante cuando lee algún tipo de parte de código de textos y ve éstos, vale, esto es importante. ¿ Y por qué es importante hacer esas cosas? Bueno, cuando alguien tiene un texto que no tiene buen formato como este, saldrá de tu sitio web, verificará. Si dice que algunas cosas están atrevidas, le hará poder saltar en tus textos de un lugar a otro, más fácil. Él lo sabrá, sabrá lo que es importante para ti, ¿verdad? Porque puedes decir, Oye, esto es importante y tus textos serán más interesantes por ello. Y ha influido en aumentar tu posición en el ranking de Google. ¿Por qué es así? Porque cuando alguien no sale de tu sitio web instantáneamente, cuando alguien bien se queda en tu sitio web, sitio por mucho tiempo, Gooten puede saberlo y sabrán que, oye, este es un sitio web bastante cool, ¿verdad? Y lo segundo es que note que hay muchos sitios que no usan el formato correctamente y oscuro. Bueno, una gran competencia para ti cuando estás creando un artículo, ¿no? Porque un artículo que gee, que no se puede crear sobre, por ejemplo, HTML se puede encontrar en Internet en, lo sé, 100 mil páginas web. ¿ Por qué te recomendaría Google? Bueno, puede levantar porque estás usando packs como este, ¿verdad? Este es uno de muchos factores que se pueden tomar en consideración, ¿no? Butt, hey, estos factor pequeño y cada factor, cuando se agrega uno a otro factor, entonces se tiene una mayor probabilidad de aparecer en Google para los usuarios de internet, ¿verdad? Por lo que es importante agregar la etiqueta fuerte en tu sitio web para mostrarle a Google que sabes lo que estás haciendo, por ejemplo, justo con tus textos. Significa que hey, realmente eres y una persona que, quien, que quiere mostrarle a otras personas algún valor de tu lado, ¿verdad? No lo hiciste, prestas atención a lo que estás creando. No es que acabas de crear un artículo y quieres vender algo. Oye, presté atención a todas partes que creé y sé qué parte es importante. Por eso voy a, cada parte importante de mi texto lo voy a hacer fuerte, por ejemplo, ¿verdad? De acuerdo, Por eso lo haces es importante saber por qué haces algo. Porque de lo contrario sólo te olvidas de un valor, ¿verdad? Entonces esa es una gran diferencia entre leer fuerte y B. Así que vamos a usar fuerte en lugar de b en caso de cuando queremos hacer algo importante. También hay algo así como M, que significa énfasis. Significa actos y presión y comportamiento por defecto ya que es, bueno, la Italia. Observe que puedo leer esta cosa como qué? Digamos. Yo lo hago así. Me encantan los gatos y los perros. Me río, gatos y perros. Me encantan los gatos y los perros. De acuerdo, Entonces esta cosa, solo es útil mostrar cómo algo debe ser rojo. Y esto es utilizado principalmente por otros programas, ¿verdad? No muestra importancia Reich la etiqueta fuerte, ¿verdad? Porque E, puedes ver claramente que cuando algo está atrevido en tu sitio web, pero cuando algo se usa como estos cuando el énfasis está en ello. Entonces cuando el formato del texto es intelectualmente, no es tan fácil de identificar, ¿verdad? Pero sólo mostramos que estas cosas deben leerse de manera diferente. También. Úsalo cuando sientas que algo debe ser acentos. acentúa de manera diferente. Y también hay algún tipo de algo así como llamado Mark. Y usualmente lo usan para marcar cosas que son interesantes y que vale la pena destacar. Entonces imagina que tienes un libro y un marcador amarillo. Y piensa en qué partes de textos sientes que te gustaría marcar como interesantes para que, ya sabes, yacan ahí lo que vale la pena repetir, ¿verdad? Entonces cuando alguien quiera repetir algo de tus textos más tarde de lo que debería estar marcado. Y los textos como estos se ven así. En mi humilde opinión, debería utilizarse sólo en algún tipo de tutoriales donde se quiera demostrar que esta parte de la definición es bastante cool. ¿ De acuerdo? De lo contrario, no creo que deba usarse. ¿ Por qué? Porque todo el mundo puede considerar otra cosa que vale la pena señalar, ¿verdad? ¿ Por qué debes decidir al respecto? Entonces esa es mi opinión al respecto. También tenemos aquí un ejemplo como este. Css es responsable de la aparición de su sitio web. Se quiere decir eso. Este CSS es responsable de la aparición. Estás como asegurarte de que otras personas sepan que esto es importante para ti. ¿ De acuerdo? Como puedes ver, este ejemplo se ve así. Entonces tenemos aquí el CSS atrevido. Cuando muevo el ratón, tenemos información. Esto, esta es una hoja de estilo en cascada y es sinónimo y aquí nos atrevimos las primeras letras con el fin de, ya sabes, como mostrar al usuario, lo hizo. Estas primeras letras son de aquí. Se llama porque se enfatiza que esto es importante, ¿verdad? Para, para, para, para, para el, para el usuario. Y vamos a crearlo por nuestra cuenta. Qué alto lo hizo, correcto, así que vamos a quitarlo. Y ten en cuenta que cuando quieras quitar la etiqueta, tenemos que cortarla justo aquí y luego desde aquí. Pero podemos hacerlo más rápido tramas de contorno Shift plus B y simplemente teclear ataque eliminado. De acuerdo, contador más 3 más p eliminado, actúa crítico. Y ahora hagamos eso que teníamos antes. Entonces quieres ponerle la etiqueta fuerte, ¿verdad? Porque creo que esto es importante. Esto debe destacarse de todos los demás textos. Css significa Hojas de Estilo en Cascada. Bueno, ¿somos qué? Estamos definiendo algo aquí pronto. Entonces creo que es una buena idea usar la baraja define, ¿verdad? Y también esta es una abreviatura, ¿verdad? Por lo que probablemente será una buena idea usar una abreviatura y teclear aquí que signifique Hojas de Estilo en Cascading. Estos, ¿de acuerdo? Y note que tenía antes de usar aquí la Beta. Y esta es una excepción donde puedes usar la Beta porque, bueno, estas usando estas solo una sola vez en esta partícula, nuestros textos ojo derecho, quieres negritar las únicas tres letras. Sería estúpido crear una selección especial dentro del archivo CSS solo por este bien, vale, si hay un solo uso, solo usa la cubierta de pernos. No estamos usando la etiqueta fuerte porque con la sola letra no es importante, ¿verdad? Entonces hay casos en los que se puede utilizar el BI, se le pide que actúe bien? Pero estos son raros. Pero es bueno saber que existen así. Y como puedes ver, ahora, se ve así. Genial. Entonces como dije antes, quieres usarlo porque si alguien ve textos geniales, hay menos posibilidades de que cierren tu sitio web y pasen más tiempo en él, lo cual tiene un enorme impacto directo en tu Ranking de Google, Ok. 38. Sub vs. SUP: Hola. En ocasiones en tu artículo querrás imprimir. Tendrás que montar la letra, la sola letra debajo de la línea de todas las demás letras. Entonces por ejemplo, como en esta situación, justo, ahorita tenemos aquí H2O. Bueno, los dos deberían estar por debajo de la línea, derecha, de todas las letras. Y aquí tres deberían estar por encima de la línea, ¿verdad? Por lo que debe ser por encima de x así, pequeña libre ella estará aquí. ¿ Cómo lograr esto? Bueno, necesitas usar el subíndice para imprimir debajo de la línea, o un superíndice para imprimir una línea más audaz. De acuerdo, así que pongamos la manada aquí, el subducto, y aquí esta. Y sí, se puede ver aquí tenemos como resultado lo que queremos cuando algo así facilidad útil también, note que en Wikipedia, cuando nosotros, por ejemplo, tenemos aquí un derecho libre a eso, que estas son referencias, derecho, que se usan así. Inspeccionarlo. Como pueden ver, están usando este jabón aquí, ¿verdad? No hagas que este parezca que está dentro del texto principal, ¿verdad? Es sólo referenciado, ¿verdad? Y cuando hacen clic en él, saltan a su referencia, ¿verdad? Correcto. Y bueno, este es un buen ejercicio que podrías hacer. Crear un artículo, hizo algunas referencias usando la pila SAP y también el tipo de referencia h para saltar al lugar que el usuario quiere saltar al hacer clic en él. Sólo es escuchar. Muchas gracias. 39. Texto, preformateado, código, var: Hola amigos míos. A veces hay una situación en la que se desea pegar el texto desde otro lugar. Al igual que por ejemplo, tienes un programa que quieres mostrar a los demás y quieres mantener el formateo no sólo es una institución como esta, donde a veces tienes, por ejemplo, algún tipo de poema, el verso que tú quieres mostrar a los demás y quieres quedarte con el formato, ¿verdad? El formulario por formatear, quiero decir, todas las sangrías que están aquí, justo aquí tenemos haciendo entonces queremos mantener los espacios donde están. Entonces cuando haga algo así, cuando lo copie aquí, notará que, bueno, no se ve tan bien como se ve aquí. Y en casos como este, debes usar algo que el oro se llama pila preformateada. Entonces vamos a seleccionar esto y teclear el prac TAC. Como puedes ver, ahora todo está formateado de la forma en que se ve aquí. Entonces esta es una etiqueta que usas cuando quieres mantener texto formateado, ¿de acuerdo? Observe que ahora cada sangría se mantiene bien, y bueno, hay demasiados sangría. ¿ Qué hice aquí? Yo uso el atajo que se llama Shift plus Tab, ¿de acuerdo? Simplemente elimina cada sangría de la selección una vez. Por lo que necesitamos hacerlo una vez más y una vez más. Como puedes ver, ahora está de vuelta a estos. Si quieres tener una sangría aquí, ¿verdad? En cada lugar, puedes volver a confiar en el tipo top de confianza, ¿verdad? Entonces para hacerlo, le pegas a la pestaña. Entonces Shift Plus top es retroceder una sangría, y aquí, agregar sangría, ¿verdad? Y así es como usas el pre-impuesto, no estos muertos. Lo que tenemos aquí es en realidad un código, ¿verdad? Entonces esta es una buena idea mostrarle a Google que esto es un cout. Y vamos a canalizar que esto es código usando el abrigo hacia atrás. ¿ Qué hace el código? ¿Hacer? ¿ Informas al Google que este es un Google cultural? Por favor no interpretes esto como un texto, ¿de acuerdo? Ahora conoce cosas que debes interpretar. Enfócate en otras partes del artículo, ¿de acuerdo? Por lo que esta información para que el robot les informe que se trata de un policía. El preformateado sólo va a cambiar a cómo van a aparecer las cosas en tu HTML. Por lo que solo combinamos estos dos para asegurarnos de que todo salga bien. Y al mismo tiempo para informar a su Google que esto es código. El código se puede usar en líneas simples, ¿verdad? Al igual que por ejemplo, como si sólo tenemos esta parte y pudiéramos ponerla en el código, no necesitamos usar la plática preformateada aquí en esto, ¿verdad? Porque esto es sólo un solo alineamiento, ¿verdad? Pero puedes usar el código para esta sola línea. Entonces esa es la diferencia. Y también hay algo así llamado el FAR. Es sinónimo de variable y se utiliza para mostrar que hay una variable en el texto. Observe que aquí tenemos algo así. El número 70, 40% mayor que el número c. ¿De acuerdo? Entonces aquí hay una variable, ¿verdad? Nosotros lo sabemos como humanos, pero diremos que esta no es una sola letra como C. O por ejemplo, como un, ¿verdad? Porque, bueno, a es algo que se usa en inglés, ¿verdad? Vamos a llamarlo a.Y Google lo haría. Lo bueno que hizo es como una especie de palabra mal escrita, ¿verdad? Y la carta de mal comportamiento, estos no deberían ser después de escuchar este lugar, ¿verdad? Entonces sólo deberíamos informarles que, oye, esta variable, ¿verdad? Entonces sólo vamos a hacer algo como esta variable. Y esto es variable. Observe que tuve que hacerlo dos veces para poder informar a Google sobre los bonos de situación, hay algo así como multi cursores, y podemos seleccionar ambas cosas al mismo tiempo y agregar la etiqueta al mismo tiempo. Eso es bastante guay. ¿ Cómo hacerlo? Bueno, usamos el out. Sostenemos el out, está bien, sostén el Alt en el teclado y luego hacemos la selección aquí y aún así sostenemos el Alt. Y podemos hacer dos selecciones a la vez. Y ahora vamos a golpear la variable Enter, abreviatura, atajo, y tipo. Y acabamos de escribir en ambos lugares a la vez. Bastante guay, ¿verdad? Observe que esta carta aquí ahora está escrita en Italia huevo, ¿verdad? Entonces la diferencia entre por formatear, pero también informaron a Google que esto es variable. Sé que podrías estar pensando, bueno, no quiero perder mi tiempo y cosas así. ¿ Por qué aún más audaz? A lo mejor mejorará la legibilidad para los robots, pero realmente no me importa. De acuerdo, Ese es un punto justo. Pero recuerda que en el futuro aprenderás algo o este código css y Eve, tú cuatro ejemplos afirman usando el tac de VR cada variable de tu lado. Entonces, cuando agregas esta etiqueta a cada variable, entonces en el futuro puedes, por ejemplo, seleccionarlas todas a la vez y cambiar su aspecto. Por ejemplo, podrías cambiarlos para que sean del color rojo o algo así. Y, o hacer algunos subrayados. Pero por debajo de la letra y la gente vería eso instantáneamente. De acuerdo, Entonces esto es variable y fecha, estado de ánimo haz tu código, código bien, artículo entero más fácil de leer todo el ejercicio. Cuando incluso cosas audaces como la piel, incluso audaces manualmente así. Se puede ver fácilmente, de acuerdo, Así que estamos buscando un, correcto, pero se puede cambiar el comportamiento como se ve, no aquí del CSS que tenemos hablando futuro. Esa es otra lección. Muchas gracias. 40. Multicursor | Buscar y reemplazar texto en VSC: Observe que en la última conferencia pegamos el código así. Y algunos de ustedes probablemente se hayan dado cuenta de que algunas cosas no fueron interpretadas. ¿ Al igual que qué? Bueno, como las cosas aquí. ¿ Por qué? Porque HTML piensa que esto es una tachuela. No sabe de qué tipo es. ¿ Mal? Bueno, piensa que es una tachuela, ¿verdad? Porque tenemos aquí el corchete de apertura que abre el ataque. Y el preformateado es sólo cuatro texto preformateado. Y no quiere decir que va a interpretar todo como sexo, ¿de acuerdo? Simplemente interpretaría espacios en blanco. Entonces, por ejemplo, indentaciones y espacios, y así sucesivamente, ¿no? Entonces, ¿cómo resolver este problema? Bueno, necesitamos usar las entidades, ¿verdad? El problema es que el brazo y eso es reproducirlo para que podamos hacerlo un poco más rápido. Pero haciendo estos bots, el rendimiento, esto es primavera. Muchos de ellos por contestar. Bueno, podemos hacerlo un poco más rápido. ¿ Cómo? Bueno, podemos usar el multi cursor, toda la función Buscar y reemplazar del código de Visual Studio que se usa primero y multi cursor. Por lo que podemos seleccionar más de un ángulo usando la derecha, la tecla Alt en el teclado. Entonces cuando sostengo el Alt, puedo seleccionar más de un lugar, como por ejemplo aquí, y luego puedo cambiarlos por esto. Ahora aquí tenemos que hacer lo mismo por estas cosas. Aquí, puedo sentarme, como pueden ver, es propenso a errores. Entonces podemos hacerlo así. Fue bastante rápido, ¿verdad? Lo hicimos correctamente ahora todo se interpreta. Correcto. Está bien. Pero no creo que esta sea una buena solución cuando hay muchas apariencias del dedo, ¿quieres cambiar si hay gratis? De acuerdo, esta va a ser una institución rápida como esta. Incluso podrías perderte algo justo ahí hay un montón de ellos. Entonces, ¿cómo resolver este problema usando el Código de Visual Studio? Bueno, podemos usar algo como control más atajo F o Control más h ¿De acuerdo? Esto significa hallazgo. Esto está justo cerca de f. Entonces por eso es un atajo como este. Al hacer clic en ese control más F, puedes intentar encontrar cosas en tu código, como por ejemplo, este signo. El problema es que estamos intentando, encontramos cada ocurrencia de autos de esta cosa, ¿verdad? Entonces incluso en lugares como este, malos, podemos cambiar este comportamiento. Tan nuevo encontramos cómo se puede utilizar el atajo Control más h con el fin de decirle al espectador tiene que ser o qué debe colocarse en los lugares donde se utiliza este dedo. Por lo que podemos poner aquí, ahí entidad. Y ahora cuando haga clic en esto, sustituiré todo en mi código a la muerte. Como se puede ver, esto es algo problemático porque no queremos reemplazarlo en lugares como por ejemplo, que pláticas, que son redox. Entonces usemos contour plot Z para volver a lo que teníamos antes. Y ahora quieres seleccionar solo lo que la Esfinge que están aquí solamente. Entonces. Entonces lo vamos a seleccionar. Y antes de dar click en esto, voy a dar click aquí. Aquí, como puedes ver, es algo así como encontrar en selección. También hay atajo a ella. Pero creo que es más rápido simplemente hacer click en él. Cuando hago clic en él. Como se puede ver, seleccionamos sólo ocurrencias de este corchete aquí, ¿no? Anote todo lo lejos solo en la selección que teníamos. Como se puede ver, encontró 16 de ellos. Y cuando hago clic en esto, BAM, y eso es genial. No se refrescó. Refrescado adecuadamente. Entonces todo funciona bien y lo hicimos bastante rápido, más rápido que usar el multimodal multicursor, ¿verdad? Porque ahora es sólo un clic. Pero por supuesto, usarás probablemente un multi cursor más rápido si solo hay libre. ocurrencias son dos de ellas, ¿verdad? Entonces es más rápido simplemente rápido griego y abajo, ¿verdad? Entonces usando esta característica. Pero cuando hay muchas ocurrencias para cambiarlas y cosas así son bastante útiles, ¿no? Sólo hay lo hizo escuchar. Muchas gracias. 41. ¿Qué es la forma? Conceptos básicos de formularios: Hola al NG. Ir a decirte lo que es un 44 es sólo un documento sencillo. Algún tipo de hoja de papel, por ejemplo, en la vida real, que permite recolectar datos del usuario, ¿no? Documento que recopila datos. Y lo hace usando los lugares para llenar los cuales son insumos fríos. Por lo que documenta que cotejan datos usando algo lo que se llama entradas. Estoy seguro de que te has enojado con las formas en tu vida, probablemente cuando tuviste que introducir diversos datos sobre ti mismo, por ejemplo, o donde tenías que iniciar sesión en el sitio web, ¿no? Esta es una forma, esta es una muestra de forma. Las otras muestras, por ejemplo, el contacto, la parte superior en los sitios web requiere un nombre de correo electrónico y el contenido del correo electrónico, ¿no? El texto que se va a escribir y publicar como publicación de foro es una granja. Por lo que se puede ver que la forma son ampliamente utilizados. ¿ Cómo creamos un formulario? Con el fin de crear el formulario escribimos formulario. De acuerdo, entonces esta es la forma más sencilla creada. Y ahora cuando lo ejecutemos, te darás cuenta de que no hay nada. ¿ Por qué es así porque es sólo un contenedor para insumos. Entonces para piensa que te permite poner dentro cosas como datos. De acuerdo, Eso es lado creativo, simple de entrada. Y veamos cómo se ve. Como puedes ver, es un lugar donde puedes rellenar texto, ¿no? Texto de muestra. Puedes escribir lo que quieras. Y cuando hago clic en Entrar, como pueden ver, o bien refresca porque intenta enviarlo a algún lado, pero bueno, no especificamos dónde. Por lo que esta es una entrada predeterminada que puedes crear en la etiqueta de formulario. Vamos a llamarlo login. Porque bueno, vamos a crear un formulario de inicio de sesión y contraseña en esta conferencia. Como puedes ver ahora ya hemos conseguido la tala antes. Entonces ahora el usuario sabe que debe atar el login aquí, ¿verdad? Por lo que este es un lugar para escribir un login. De acuerdo, Vamos ahora por ejemplo, pedir contraseña, ¿verdad? Entonces, ¿cómo hacerlo? Bueno, podríamos teclearlos manualmente desde cero o podemos copiarlos así. O podemos utilizar la función Visual Studio Code que te permite copiar sentimos selección una línea completa donde tienes resaltado estos cursor. De acuerdo, entonces cuando golpee el botón Control más C ahora, solo puedo controlar más V ahora y hacer que copie toda la línea. Bastante útil, ¿verdad? Mucha gente no lo sabe, ni siquiera yo empecí. Entonces aquí vamos a escribir contraseña ahora. Y notarás que tienes buenas ahora dos entradas, un login y contraseña de FERPA. Añadamos aquí la línea brillante, por lo que están en otra línea. El problema con esto es, como se puede ver, el, bueno, esto no está alineado correctamente, pero cosas así se hacen a través de CSS. Entonces no te preocupes por formatear, cómo se ve, cosas así. vendiste en el futuro. Está bien. Entonces aquí está el inicio de sesión, aquí está la contraseña. Y bueno, pongamos algo en el login y pongamos algo en el pasaporte. Como puedes ver, lo que sea que escriba aquí es visible y así no es como debes hacer un campo de contraseña. El insumo. ¿ Por qué es así porque si alguien está detrás del usuario a sus espaldas, puede ver su contraseña y a Hamada le gustaría eso. Por lo que es necesario cambiar el tipo de entrada. El cool de las entradas es que se puede cambiar el tipo usando el tipo de atributo dado, y se da una información adicional con respecto a la entrada usando este atributo, ¿no? ¿ Y puedes cambiarlo a qué? A, por ejemplo, la contraseña. ¿ Y qué cambia? Como puedes ver ahora cuando escribo las cosas aquí, las posibles estas escondidas. Entonces resolvemos el problema. Por lo que hay muchos, muchos más insumos. Y como dije antes, el predeterminado es el texto. Entonces cuando lo cambio en texto y nada va a cambiar esta oportunidad texto entrante campo de texto que se puede rellenar. El usuario puede rellenar, ¿verdad? Bueno, hagámoslo, por ejemplo, así. Por lo que se ve mejor en nuestro HTML. Y si bien hay tipos mínimos, pero los aprendimos en el futuro, estos como conferencia básica respecto a cómo crear un panel con inicio de sesión y contraseña. Está bien. Y también hay una cosa más ¿te podrías estar preguntando, correcto, teníamos buenos datos ahora, pero ¿qué hacemos con estos datos? Cosas así lo resolveremos en las futuras conferencias. Sólo hay lección. Muchas gracias. 42. Forma de presentar la presentación: Hola amigo mío. Hemos creado un cuatro, pero no podemos someterlo, no podemos enviarlo, ¿verdad? Por lo que esta forma se usa menos con el fin de cambiarla. Podemos crear un botón que permitimos enviar contenido completo como este. Entonces, ¿cómo hacerlo? Bueno, podemos elegir entre el emisor, el presentado. Y como puedes ver, entonces tenemos una entrada que tipo es alguna, y te permite hacer click en ella. Como puedes ver aquí es este botón. Y por defecto ahora no tiene texto porque también hay un atributo que pone el valor a reír de stat Si lo quitamos. Como puede ver, el valor predeterminado es coro de subbanda. Creo que este es muy mal valor como uno predeterminado. Entonces por eso emita te dice que lo cambies por lo que sea. Entonces en nuestra situación, creo que sería mejor llamarlo logging write, lock in, tal vez con el espacio aquí así, ¿verdad? Tenemos bueno ahora aquí botón que podemos dar click. Y como puedes ver cuando hacemos clic en él, nada cambia. De acuerdo, pero donde podemos hacer clic y algo se refresca en tiempo de ejecución de burg. Entonces estamos tratando de enviar algo, pero no hemos especificado cómo enviar evento, dónde enviarlo. Y qué enviamos. Hagamos aquí una celda BreakLine. Se ve mejor así, ¿verdad? Y ahora especifiquemos a dónde enviamos información como esta. Hacemos tal cosa mediante el uso del atributo de acción en la etiqueta de formulario. Dice que debemos proporcionar aquí el archivo o la ruta al archivo que procesamos esta información. Entonces imagina que has conseguido a tu servidor algo así como proceso login dot PHP, ¿verdad? ¿ Por qué PHP? Porque, bueno, necesitas desafortunadamente hacer tales cosas en los lenguajes del lado del servidor como PHP o Python, ¿verdad? Por lo que necesitas enviar tus valores al lenguaje de programación que lo procesará. Entonces desafortunadamente, sí, puedes hacerlo usando HTML. Recuerda que HTML sólo es responsable de cómo se representan las cosas en tu sitio web. Por lo que para el contenido de tu sitio web, CSS es responsable de que se vea mejor. Pero también necesitas saber, por ejemplo, PHP para saber cómo procesar las cosas. Pero aún así, primero necesitas aprender a crear foros, ¿verdad? Entonces estas cosas que te diría son bastante útiles. Por lo que esta acción dice que vamos a enviar el contenido de aquí a este phi. Y para poder procesarlo, necesitas saber, por ejemplo, PHP, ¿verdad? Pero no detengas esta conferencia porque es importante, aunque no conozcas pH siendo como persona que conoce HTML y CSS porque a veces no necesitas conocer otros lenguajes como PHP porque bueno, tal vez eres responsable solo de HTML y alguien más lo va a procesar, entonces aún necesitas saber cómo enviarlos correctamente porque no termina aquí. Mira, cuando hago click en Iniciar sesión ahora nos están enviando a este proceso logging dot PHP. Y aquí hay un signo de interrogación. Y después de este signo de interrogación, deberíamos tener valores a partir de aquí. Pero nosotros no. ¿ Por qué es así porque no le dimos nombre a la entrada, siempre hay que nombrar a la entrada. De lo contrario, la computadora no sabría qué entrada va a estar enviando cuál es cuál, porque, bueno, escribimos aquí registrando, pero no está dentro de esta etiqueta, ¿verdad? Por lo que tenemos que ponerle nombre. Y llamémoslo registro por ejemplo. Y aquí vamos a llamarlo, por ejemplo, bueno, contraseña o podemos llamarlo PW. Creo que vamos a llamarlo w, Así que no nos confundimos al tener contraseña de tiempos libres. Puedes llamarlo como quieras, ¿verdad? Pero debe ser nombre autodescriptivo. Entonces cuando miras en él, ya sabes que Ok, aquí es posible. ¿ Y qué cambia ahora? Ahora cuando escribo algo y hago clic en iniciar sesión, como pueden ver, lo primero es que Firefox, note que escribimos la contraseña es porque usamos la contraseña tipo entrada y él sabe que hay una contraseña, ¿verdad? Por lo que no podemos visitarlo. El segundo es que aquí, después del signo de interrogación, tenemos algo bueno como ese registro que escribimos aquí. Y el valor que escribí justo después de él, tenemos buena señal que se usa para conectar más de un nombre como este. Y aquí tenemos a BW, ¿verdad? El que tecleamos aquí y el valor para ello. Entonces PHP anula ahora que aquí está oculto el valor para estos y aquí, aquí está el valor oculto para estos. Y el ETE puede hacer lo que quieras con él. Se puede cambiar la base de datos que si hay un inicio de sesión como el, el, el PW está conectado a este inicio de sesión y así sucesivamente. Pero hay un pequeño problema que hicimos aquí usamos el método predeterminado, que es get, que envía valores como este. Dentro del enlace. El problema es con eso es que no es seguro, seguro, ¿verdad? Y alguien lo copió y lo mandó para diferir la mano, podía ver la contraseña de alguien. Entonces para situaciones como estas, nunca uses el getMethod, usa el post uno, que como puedes ver ahora, cuando hago algo como esto, aún manda todo al proceso que login dot PHP, pero aquí no es visible. Está en segundo plano ahora mismo. Se puede interpretar, así que no la guerra, ¿verdad? Por lo que debes enviar usando este método. Observe también que el problema con el envío esta manera es que nos están enviando a otro sitio web. Bueno, podríamos enviarnos el mismo sitio web. Pero el problema es que siempre hay una recarga de sitio web. Si quieres enviar cosas a fondos o alguien no lo verá, necesitas aprender línea JavaScript y necesitas aterrizar el ajax o algo así. Ahora que tenemos que usar esta característica que te permite enviar cosas en segundo plano, ¿de acuerdo? Entonces no es necesario especificar esto. Simplemente atrapas cosas y luego las envías en segundo plano usando el JavaScript y esta característica. Entonces esta es tal vez incluso mejor manera, ¿verdad? Pero aún así, como persona que está aprendiendo HTML, hay que recordar acerca de nombrar cada entrada, ¿de acuerdo? Y por supuesto, hacer un tipo de entrada enviar que permita a alguien hacer clic en él y enviar cosas. Lentes. Tiene menos que Muchas gracias. 43. Entrada de tipo radioeléctrico: Hola amigos míos. hoy te enseñaré cómo usar y cuándo usar la entrada de radio, ¿cómo crearla? Bueno, utilizamos la entrada y podemos usar el Emmett y creado usando ese tipo de radio, como se puede ver aquí, tenemos dos atributos adicionales. Ahí vamos. Ahora habla de pronto. Entonces, ¿cómo se ve? Como puedes ver, es un punto en el que puedes hacer click. Entonces esto es algo que puedes elegir, ¿verdad? Si creamos más de ellos, tienes tres puntos, ¿verdad? Y junto a estos puntos, puedes teclear, por ejemplo, el tipo de palanca, ¿verdad? Puedes preguntarle a la gente qué tipo de entrega quieren tener en tu tienda, por ejemplo, si quisieron usar la carrera de IBD, quieren recoger desde algún punto o tal vez las tarifas del rompecabezas usarían más barato y así sucesivamente, ¿verdad? El tabulador de Corea y así sucesivamente. Por lo que puedes usar eso en tiendas. Entonces, por ejemplo, digamos que aquí es que Corea, aquí hay un punto de pico arriba y aquí hay una oficina de pulso. ¿Verdad? Ahora tenemos ¿qué? Texto al lado de cada botón, como estos, junto a cada tipo de radio, ¿verdad? El problema es que cuando hago clic en una de ellas, podemos elegirlas todas a la vez. Y eso no es lo que queremos lograr, ¿verdad? Cuando alguien va a aparecer en tu página web, él puede, él debería poder elegir sólo un tipo de la palanca llegó. Puede elegir carrera y escoger. Señalo al mismo tiempo en lo de papá cuando debes usar entradas de radio. Pero para que funcionen así, hay que decir qué entrada de radio se agrupan entre sí. De acuerdo, entonces es cuando deberías crear algo. ¿ Cómo se llaman estos? El atributo name, y debe tener todos estos nombres establecidos en el mismo valor. Entonces por ejemplo, tipo de entrega como este. Observe que cuando estoy creando tipos de entrega, no uso espacios aquí, ¿verdad? Entonces no estoy haciendo algo así. Estoy usando el subrayado cuando estoy haciendo otro premio como valor dentro de este nombre, ¿verdad? O podrías hacer algo como esto, pero nunca usar espacios. De acuerdo, entonces ahora le dije al bro navegador web que este es un grupo de botones de radio, ¿verdad? Entonces lo haremos ahora cuando haga clic en lang de ellos, los otros no se revisan NMR, ¿verdad? Y eso es lo que queremos lograr. Entonces podemos preguntar, por ejemplo, ¿qué tipo de entrega desea elegir? Escribe, algo como esto, vale, para que pueda elegir estos, estos o estos. Podríamos hacerlo un poco, pero están buscando agregando algunos puntos de ruptura, ¿verdad? Al igual que esto. Y como puedes ver, se ve mejor. Todavía hay un problema. Observe que no puedo hacer clic en los textos y creo que esto no es bueno por el bien de su sitio web porque esta mayoría de las personas que simplemente dan clic en texto junto a estos botones, ¿verdad? Para que funcione, necesitas conectar de alguna manera este texto con esta entrada específica, ¿verdad? Y para hacerlo, necesitas usar una etiqueta que se llama etiqueta. Entonces decimos que esta cosa es una etiqueta para, y aquí especificamos para qué. El problema es que no tenemos nada a lo que podamos referirnos en este insumo, ¿verdad? Toda esta entrada luce igual. Entonces, ¿cómo podemos decir que estas etiquetas son para este insumo? Para hacerlo, necesitamos crear atributo ID y hacerlo único. Podemos poner aquí lo que sea, ¿verdad? Entonces por ejemplo, así. Y ahora cuando hago click en estos y puedo ir dando click en esto, aquí, no funciona, ¿verdad? Pero aquí puedo ir en textos y funciona bien. Pero, ya sabes, escribir lo que sea aquí no es buena idea porque no es como debería verse tu código, ¿verdad? Entonces sugiero sólo escribir aquí también lo mismo que está en el nombre, pero aquí fuera un número como por ejemplo, entregar un tipo 1, ¿verdad? Al igual que esto. De acuerdo, Entonces necesitamos más de esto. Entonces vamos a copiar esto mientras usas el Alt. Y vamos a copiar esto aquí, así. Seleccionemos esto y usando la respuesta así al mismo tiempo. Y vamos a crear etiquetas. Y sólo copiemos esto aquí. En cuanto a estos atajos están haciendo una mecanografía y mientras se crea el código poco más rápido. Entonces tenemos esto y ahora podemos crear al hacer click en textos y todo funciona bien. Pero desafortunadamente no todo se veía bien y crear un insumo que es el libro que envía. Y nosotros, por ejemplo, decimos aquí arena y bueno, vamos a ponerlo en la forma ¿verdad? Y acción con una B por ejemplo, forma que PHP. Observe que cuando hago click en Correos y gracias click Enviar, tenemos aquí algo así como tipo de entrega en grado cuando tipo no voy a dar click en cool aquí tenemos tipo de entrega on. ¿ Ayuda en algo? Simplemente sabemos que la palanca para reescribir fue elegida ¿verdad? Y lo hay todo, no sabemos qué tipo de carrera se eligió, ¿verdad? Este, éste o tal vez x1. Y esto es bastante importante, ¿verdad? Porque no podemos procesar esta información. Para poder procesar esta información, necesitamos mostrar cuándo volver a configurar algo como violeta. Y bueno, podemos llamar a estos lo que llamó aquí, ¿verdad? Porque esta es una caldera como la misma longitud estaba aquí. Y tenemos que repetir esto también en estos lugares. Entonces esto es pico arriba dash bond. Recuerda que no uso esta base aquí, ¿verdad? Dash point y la oficina de correos así. Y ahora no esta muerta cuando yo, por ejemplo, elijo el punto de recogida en una arena. Ahora sabemos que el tipo de entrega es igual para escoger un punto y puedo procesarlo bien? Ahora puedo mostrar que el chico apunta al usuario, o puedo decir que premie los premios y demás, ¿no? Entonces ahora funciona bien. Entonces como puedes ver, necesitamos DIBL montones de cosas aquí para que funcione correctamente. Todavía podemos mejorar todo esto poniendo todo en algo lo que se llama conjunto de campo. Como pueden ver, ahora, tenemos algún tipo de frontera alrededor de todas estas cosas aquí. Y de esta manera podemos decir que esto se trata de esta cosa específica, ¿verdad? Esto, este grupo. Ahora cuando tenemos más de ella, teníamos más cosas para elegir. Como se puede ver, se puede distinguir claramente esto para estos formados de estos, ¿no? Bueno, este juego de campo, ¿verdad? Este grupo de cosas, no porque tengamos todo de una sola forma. Entonces por eso me siento triste. Es bastante guay. Y también tenemos algo lo que se llama leyenda. Y mira, no necesito usar robo. Dan, y yo puedo hacer algo así. Y como se puede ver, este texto entró en la frontera. Se ve aún mejor ahora mismo. Por lo que esto se usa para esta cosa. En la próxima conferencia hablaremos de checkbox, cómo usarlos y cómo hacerlos correctamente para que puedan ser utilizables. Cuando estés procesando el contenido más adelante en la lección. Gracias. 44. Casillas: Hola, amigo mío. El día de hoy vas a hablar de casillas de verificación. Bueno, vamos a crear otro conjunto de campos y vamos a utilizar la entrada que se llama casilla de verificación. Por lo que el tipo es casilla de verificación. ¿ Cómo se ve? Como pueden ver, tenemos aquí una caja que podemos revisar y también podemos desmarcarla. Entonces la diferencia entre esto y lo que evolucionan aquí es esa radio. Cuando eliges una de las cosas aquí, como puedes ver, yo no puedo y la elijo. Necesito escoger al menos una de las opciones aquí mismo. Puedo revisar y puedo desmarcarlo. Está bien, Esta gran diferencia. Y también cuando creas muchas casillas de verificación de línea, entonces puedes escoger Mad Men de ellos a la vez, ¿verdad? Para que puedas usar estas cuatro situaciones como estas, por ejemplo, cuál es tu afición, ¿verdad? Bueno, alguien puede tener más de un saltos, ¿verdad? Por ejemplo, a alguien le gusta nadar. Le gustan los videojuegos, y le gusta, por ejemplo, la programación, ¿no? Y bueno, tal vez quiera elegir todas estas opciones porque son todas sus copias, ¿no? Entonces es cuando usas las casillas de verificación porque aquí necesitas escoger una y necesitas escoger una. A lo mejor aquí, quizá a alguien no le guste nada de esto, ¿verdad? Y no es el caso hobby, así que no necesita elegir nada. Correcto. Entonces es cuando usas la casilla de verificación. ¿ Cuándo puedes usar chequeras? Además, digamos que le pides a alguien algo así como, ¿quieres emitir una factura, por ejemplo? Y luego puede comprobar y ver si hay algo así. Y mostrará el formulario para poner los datos relativos a la factura, ¿no? Si la persona lo desmarca, los datos desaparecerán. De acuerdo, ahora centrémonos en, bueno, hacer esto aquí correctamente porque note que, bueno, deberíamos poner la entrada aquí en primer lugar, porque esto es entrada para todo como 14 llanta lejos. Y vamos a crear etiquetas, ¿verdad? Cuatro. Entonces vamos a crear una etiqueta que será cuatro, hará que sea menos agradecida por todas estas cosas que vinos. Por lo que etiqueta para y para nadar. Aquí tenemos videojuegos y programación. Ahora cuando hago clic en texto junto a él, como pueden ver, puedo elegirlo. Entonces ahora centrémonos en el nombre porque bueno, cuándo enviar datos y de alguna manera analizarlos más adelante, ¿no? Bueno, no preguntes. Pero tal vez alguien, por eso necesitamos saber cómo nombrarlo correctamente. Porque ahora mismo cuando lo mande, como pueden ver, bueno, entregar el tipo está aquí parte y nuestra esperanza no lo es. Entonces, ¿cómo podemos llamarlo? Existen dos formas de enviar casillas de verificación. Bueno, la primera forma es simplemente nombrarlo igual que las identificaciones. Observe que cuando elijo, por ejemplo, la programación y los videojuegos. Ahora, ya ves que los videojuegos están encendidos, la programación está encendida. Ahora alguien en el servidor puede buscar cosas que estén bien. Si están encendidos, significa que alguien lo revisó, ¿verdad? No obstante, bueno, analizar algo así no siempre es fácil. Está bien. Vamos, necesitas saber exactamente qué tipo de nombres hay aquí, ¿de acuerdo? Sólo créeme que hace las cosas un poco raras y en la parte de datos, está bien, Quieres el lado del servidor. Entonces Maasai y la gente llaman a todo igual como por ejemplo, en este caso cómo BIM. Pero ahora hay un problema. Y me dieron, cuando hago clic en Enviar, como pueden ver, Hobbes y Hobbes en eso. No sabemos qué zona de copia. Y por eso necesitamos ahora crear valor para cada guía. Entonces necesitamos hacer algo ideas. Por lo que para nadar videojuegos y programación. Y ahora cuando elijo las ganancias de video en programación, podemos ver aquí los videojuegos de Hobbes y la programación de Hobbes. Y ahora en el lado del servidor, sólo podemos buscar el HobbyName. Y sabemos que se eligió videojuego y programación para tu muestra. No obstante, es necesario saber. Es bueno saber dónde los lenguajes sonoros no podrán analizarlo adecuadamente. Si no agregas aquí corchetes, ¿de acuerdo? Entonces, o bien usas el mismo nombre, recuerda que es posible que necesites hacerlo, no significa que siempre necesites agregar estos corchetes aquí. Entonces esto sería como en el servidor ahora, ligand Guan variable. Por lo que sería algún tipo de RA, los valores como este. No te preocupes si no te entiendes ahora mismo porque debes enfocarte en HTML, vale, en crear cosas como cómo presentar los datos, ¿de acuerdo? Pero solo necesitas tener en mente, tal vez algún día cuando quieras procesar estos datos, cuando vas a aprender el PHP, por ejemplo, JavaScript. A lo mejor necesitas agregar esto, no siempre. A lo mejor podría necesitar agregarla, ¿verdad? Entonces así es como se agrega la casilla de verificación y también se hace de esa manera para que otros puedan procesar los datos que éstos no se pueden enviar. Esa es sólo la lección. Muchas gracias. 45. Atributos con frecuencia en formas: Hola amigos míos. actualidad, ¿cómo te enseñarán los atributos más utilizados en los formularios de entrada? Centrémonos en el comprobado. Observe que cuando estamos aquí, le estamos preguntando a alguien ¿qué tipo de Delhi muy desea elegir? Y siempre en casos como estos, deberíamos elegir algo por defecto. Deberíamos revisar algo por defecto. ¿Por qué es así? Porque imagina la forma donde la gente está ahí cosas. Esta forma es bastante larga. Y por defecto, por ejemplo, mayoría de la gente elegirá la carrera, ¿no? Y en base a eso, puedes mostrar algo más, ¿verdad? Si alguien elige al cerdo señalo, puedes mostrarle algo más por él. Por lo que deberíamos elegir una opción predeterminada para que no tenga que pinchar en ella aquí mismo. Puedes cambiarlo más tarde, no te preocupes. Podemos por defecto establecer por ejemplo aquí, comprobado. Entonces ahora como puedes ver, esto primero es comprobar cuando refresco la página. Siempre distinto por defecto está establecido, pero por supuesto podemos cambiar el a otra cosa más adelante, ¿verdad? Pero por defecto, lo pusimos a Kourion. En una situación como esta, es buena idea. Pero en situación como ¿Cuál es tu hobby? Todavía es hoyo, ¿verdad? Porque lo que podemos hacerlo usando algo como esto. Pero el problema es que por qué elegiríamos el pasatiempo de alguien, ¿verdad? Es día Hub no sea nuestro. No deberíamos hacerlo. Pero en caso de que vea como, ¿qué tipo de entrega desea elegir? Es buena idea alcanzar uno de ellos también. Porque la mayoría de las veces elegirías Courier de todos modos, por ejemplo, ¿verdad? Está bien. Entonces esa es una, usa la chequeada. Probablemente notes que, bueno no hay valor para este atributo. ¿ Cómo es posible? Porque hay algunos atributos que el volumen es el mismo que el nombre del atributo, como estos, comprobado es igual a comprobado. Y para ser honesto, ¿es suficiente esto autodescriptivo? ¿ Cuando lo miras? Es suficiente Cuando veas que acabamos de añadir estos atributos. Y no necesitas solo poner esta cosa aquí, ¿de acuerdo? Navegadores, sabemos que cuando lo pones así, Es tú igual que agregó este enlace aquí. ¿ De acuerdo? Ahora unos cuantos más, unos atributos más como este de los que hemos hablado. Entonces como por ejemplo, requerido. ¿ Qué hace? Bueno, imagina que estás creando un texto de entrada, tipo de entrada. Y le estás pidiendo a alguien el número de la calle, el número de la calle, ¿verdad? Y por ejemplo, nombre de calle como este. Y créeme, cuando la gente escribe aquí el nombre de la calle, lo que sea, tienden a olvidarse de poner el número de la calle y después, cosas como esa causan problemas porque cuando alguien pide cosa y él paga por ello, hay que llamar al tipo y pídele el número de la calle porque no le puedes mandar una entrega, ¿verdad? Porque no sabes a dónde enviar. Por eso deberían requerirse insumos como ese, ¿verdad? Tenemos que añadir el atributo requerido. ¿ Y qué cambia cuando hago clic en el botón Enviar? Como pueden ver, tenemos q ahora un mensaje, por favor llene este campo. Bastante guay, ¿verdad? Si lo quitamos. Para que veas, solo podemos ir y mandar el pedido, ¿no? No obstante, con ello, no podemos hacerlo a menos que pongamos algo. P. Entonces esto es bastante cool, creo, para poner aquí requerido en casos como este. Lo siguiente es el autoenfoque. Autofocus, como su nombre indica, se enfoca en una de las entradas. Cuando alguien se refiere al parche. Algo así es Yoast, digamos que estás creando un juego y le estás pidiendo a una persona, al usuario, que escriba cuántas unidades, caballos, por ejemplo, quiere comprar, ¿verdad? Y tú creas el insumo para esto vivir en armonía unidad caballos, ¿verdad? Y necesita caminar, necesita dar click en él para poder poner número aquí, ¿verdad? Eso no está bien cuando hace estas cosas. Por ejemplo. Cada vez que viene a estos desaparecen, cierto, quiere comprar caballos. Entonces hace clic, por ejemplo, en los caballos de oro eslabón o en el ébola estatal, algo así, ¿verdad? Y hace clic en él y quiere comprar caballos. ¿ Y por qué necesita hacer click en él? ¿ Otra vez? Esto sólo lleva tiempo. Puedes recordar y hacer algo como este auto focus. Y ahora cuando refresco esta página, cuando hago algo en esta página, ¿no? Y lo refresco, siempre el foco aquí dentro, ¿verdad? puede ver que está resaltado y se puede escribir el número aquí. Entonces es cuando usas el autofoco. Se quiere poner el foco en una de las entradas al instante y se ayuda a otros a sentir la forma. Creo que es bastante guay. El siguiente es el tamaño y la longitud máxima. Observe la cabeza ahora mismo, cuando estamos preguntando cuántos necesita alguien quiere comprar, podemos poner aquí gran número, eso es lo primero y el tamaño de los estos solo para vk. Por lo que podemos cambiarlo agregando el atributo size. Y podemos, por ejemplo, escribir su forma. Y esto puede ver que es menor número, se puede poner dos, es aún más pequeño, ¿verdad? Entonces esto solo define lo grande que es la entrada. Pero todavía podemos poner aquí un gran número. Se puede limitar este número mediante el uso de algo llamado se llama maxlength. Y como, como sugiere su nombre, usted pone aquí cuántas letras se pueden poner en la entrada. Entonces si digo uno, como puedes ver ahora, no puedo poner más de uno, ¿verdad? Puedo poner cualquier número aquí, correcto. Pero no puedo o una última parte, no puedo poner más de ella. Podrías estar pensando, vale, pero por qué puede poner letras tiene razón, porque es M, entrada de texto. Si quieres validar, si algunas cosas que se ponen aquí, como si quisieras tener solo números aquí necesitas usar para la deuda JavaScript y posteriormente, también será una buena idea usar alguna programación del lado del servidor lenguaje como PHP, porque bueno, cosas como esa se pueden engañar con bastante facilidad, vale, gente puede escribir cosas aquí incluso usando el inspector, así que no puedes creer toda la información que viene de aquí. Mal. Bueno, para algunos usuarios básicos, cosas así son bastante geniales, ¿verdad? Se va, saben ahora que pueden poner los números del uno al nueve. Y bueno, hay algo llamado portador de lugar satelital donde se puede sugerir, por ejemplo, digamos , hey, estamos poniendo aquí 129, permitir números 1, 2, ahora, nueve, solo. Ahora como pueden ver, tenemos aquí los textos de grado 12, 9, y cuando pongo el número, desaparece. Entonces es sólo una sugerencia ¿qué se puede poner aquí? Y piensa así que es bastante frío en casos como por ejemplo también aquí. De modo que puedo, por ejemplo, crear un positor. Y por ejemplo, esto se requiere, ¿verdad? Y él nows nada, vale, estos requiriendo que ponga poner el número de calle, pero no exageres porque positor tal vez se llama. Pero imaginemos que se crea una contraseña. Vamos a crear algunas líneas de corte porque ahora no se ve bien. Al igual que esto. Vamos a crear contraseña. Por lo que en contraseña de puerto. Y como puedes ver aquí, tenemos contraseña. Y imaginemos que ponemos en su lugar cosa titular slide a tardío, dos señales, mayúsculas. Tres veces. Alrededor del mundo. Has puesto aquí algún tipo de requisito sobre lo posible que debería parecer y cuando alguien lo mira. De acuerdo, así puedo poner ocho letras y el calor empieza a escribir y él dice, ¿ cuántas letras fue eso? ¿ Cuántos deben ser mayúsculas? Cuántas señales a través de ese uso como el signo de exclamación o así sucesivamente, ¿verdad? Esto, este es un tenedor de lugar donde el ajedrez estadounidense piensa así, ¿de acuerdo? Pero no exageres cuando hay mucho Fink para escribir. No lo pongas en el lugar llamado las lecturas. Mejor ponerlo así. O por ejemplo, más adelante aprenderás que puedes, por ejemplo. El ratón sobre algo y se puede crear una información sobre herramientas donde se puede mostrar a la persona lo posible que debería parecer, vale, esto es mejor que usar el positor en caso de que así sea. Y tienes algo, lo que se llama valor es el valor predeterminado para algo. Bueno, en casos como estos antes lo usamos para establecer el tipo de entrega a un valor que éstos enviaron al servidor posteriormente y luego procesar escritura. El valor aquí va a ser visible para el usuario como valor predeterminado. Entonces por ejemplo, número de calle, Digamos que tenemos buen valor 92, ¿de acuerdo? Y ahora como pueden ver, tenemos aquí 92 como valor por defecto. No es un tenedor de lugar. Entonces cuando escribo algo aquí, no desaparece ¿verdad? Aquí desaparece, pero aquí no lo hace. Entonces necesito hacerlo. Y quizá te estés preguntando cuándo se usa algo así en casos de textos. Imaginemos que estás creando lado donde la gente puede crear una cuenta, ¿verdad? Y ponen algún tipo de datos como número de calle, donde dejan cuál es su nombre y así sucesivamente. Y ahora imagina que tienes un top donde permites que gente cambie sus datos, ¿verdad? Y cuando van a esta pestaña, pueden ver una forma con muchas entradas donde pueden cambiar los valores, como la palabra que dejan y demás. Y por si acaso así, creo que es buena idea poner por defecto lo que habían escrito antes, ¿verdad? A lo mejor no quieren cambiar cada entrada, ¿verdad? No quieren cambiar todos los datos sobre ellos. A lo mejor quieren cambiar en LET el número telefónico por ejemplo. Por lo que cambiarán sólo el número telefónico por otras cosas debería ser, sabes, mecanografiado ya ahí. Por lo que los valores por defecto deben establecerse aquí. Y de esta manera. Para que no pierdan el precioso tiempo, ¿verdad? Porque necesitarán reescribir todo desde cero para cambiar solo una cosa, ¿verdad? Por lo que es buena idea hacer tal cosa para que sea como el vivo mejor. Entonces estos son los atributos más importantes que creo que son importantes, pero hay muchos más de ellos. Puedes ir al lado de Mozilla Developer, luego entrar en elementos HTML referencia a la entrada. Como se puede ver, hay muchos más también son tipos de insumos. Aquí se pueden ver los ejemplos, pero también hay muchos atributos y con alguna breve descripción. No obstante, te mostré la más importante. Simplemente está lleno de tiempo para aprender cada atributo posible, si probablemente nunca usarás alguno de ellos en tu vida, ¿verdad? Si los necesitas, entonces los encontrarás en Laura bastante rápido porque compraste al Papa sosteniendo esta etiqueta en el Google. Alguna pregunta y te meterás en esta bandera sobre el sitio web del flujo de trabajo y encontrarás la respuesta aquí bastante rápido. Por ejemplo, así. Pero algunas cosas no sólo están conectadas a cómo hizo la guerra, sino ¿cuándo debería usarlas? Y ahí es cuando es bueno tener autos de video como este, para ver indicios con respecto a cuándo usar las cosas. Porque si usted, por ejemplo, excede el marcador de posición, sus formularios no serán carbón, ¿verdad? Esa es sólo esa lección. Muchas gracias. 46. EXERCISE: ¿cómo crear un formulario de contacto en tu sitio?: Hola amigos míos, es hora de practicar. Quiero que crees un formulario de contacto en tu página web porque bueno, cada sitio web debería tener algo así. Debe permitir que el usuario de su sitio se ponga en contacto con usted, lo contrario, podría no parecer creíble. ¿ De acuerdo? Entonces para hacerlo, vas ahora usa algunas entradas. Y también algo así aquí de lo que aún no hemos hablado. Si a esta cosa se le llama área de texto, puedes leer al respecto. Google. Y este también es tu ejercicio porque a veces no lo sabrás todo, Créeme, vale, así que lee al respecto o incluso cuando estés escribiendo algo. Pero en cambio, hay información sobre cosas como esta. Aquí también, mira y puedes hacer click en él. Entonces no te preocupes, puedes leer al respecto, ¿verdad? Por supuesto, lo haremos. También está en esta conferencia. Entonces no te preocupes si no quieres hacerlo por tu cuenta, por tu cuenta. Pero es bueno que algunas veces practiques por tu cuenta. Está bien. Así que intenta hacerlo por tu cuenta. Está bien. Haz lo mismo que está disponible aquí en el lado derecho. De acuerdo, hagamos todas estas cosas ahora desde cero porque esa ley y de esa manera, entonces vamos a mucho más que sólo mirando a la SCCOE, créeme. Entonces necesitamos crear qué forma, ¿verdad? Y como puedes ver, hay dos tipos de formas. Get and pulse usará el método post porque, bueno, no queremos enviar el contenido del correo electrónico dentro del enlace. Como dije, post hace ocultos los datos que se envían, ¿verdad? Entonces vamos a utilizar el método de post y los conjuntos de acción donde queremos enviar los suyos propios. Digamos por ejemplo, que tienes en tus servidores algo llamado como proceso, Enviar, e-mail como este, ¿verdad? Y PHP, porque va a estar procesando el lenguaje PHP. Entonces tenemos ahora nuestra forma. Deberíamos poder enviar un formulario como comerlo. Entonces vamos a crear un botón de envío que va a tener un valor de sudor. Pero tal vez pongamos todo en el campo dicho, correcto, porque, bueno, esto va a ser un poco más grande. Entonces hagámoslo así. Y ahora seamos leales aquí. Y digamos, por ejemplo, contactar con nosotros, ¿no? Por lo que se ve mejor. Y ahora necesitamos pedir cosas como, bueno, como por un correo electrónico, ¿no? Entonces vamos a crear una entrada que estos no pueden ser tecleados. ¿ Cuál es la diferencia entre un correo electrónico y un texto? Como puedes ver, cuando miras esto, en primer lugar, no ves ninguna diferencia, pero hay mucho. Fue la diferencia. Bueno, lo primero que dijo, si alguien está usando su correo electrónico con frecuencia en los formularios, podría recibir una sugerencia con respecto a claves de correo electrónico. Entonces esa es una gran ventaja, ¿verdad? Y lo segundo es que necesitamos escribirte un correo ahora. Entonces esto no se va a decir por favor ingrese una dirección de correo electrónico, ¿verdad? Es necesario escribir una imagen. Entonces algo que es, tienes este letrero aquí dentro ¿verdad? Ahora. Podemos enviarlo. De lo contrario no se va a enviar. No obstante, se puede enviar imagen vacía. Entonces esto no es algo también que queremos tener porque queremos contactar con alguien que nos envíe un email, ¿verdad? Tenemos que responder podría de nuevo, por eso se debe requerir este campo, ¿no? De acuerdo, vamos a llamarlo correo electrónico. Entonces alguien que no sabía qué escribir aquí, y el nombre va a ser correo electrónico. Y también podemos configurar el ID a correo electrónico si lo deseas. Posteriormente actúa como verdadero este campo, por ejemplo, CSS. Ahora mismo, bueno, no lo necesitamos, pero ¿quién sabe? A lo mejor lo necesitaremos. A lo mejor quieres crear una etiqueta para ello, por ejemplo, correo electrónico. Y de esa manera cuando alguien hace clic en él, va a seleccionar el formulario aquí, ¿no? Por lo que podemos dejar el id la misma noche, su nombre y el tipo esta vez. De acuerdo, Entonces tenemos correo electrónico y ahora necesitamos pedir el nombre de usuario. Entonces vamos a crear un texto típico con el nombre, nombre. Es porque cuando pedimos el nombre, así se va a llamar nombre. Y bueno, esto también debería requerirse. Creo que después vamos ahora preguntamos por el tema. Entonces hagámoslo así. Bueno, creo que deberíamos usar un poco de descanso, longitud de ruptura, ¿verdad? Entonces, por ejemplo, tuve que romper líneas así. Ahora tenemos nombre de correo electrónico aquí. Podríamos usar una línea de ruptura más como esta. Bueno, pedimos tema y también debemos pedir el contenido del correo, ¿no? Y para eso usaremos la entrada que se llama área de texto. La diferencia entre el área de texto y los textos típicos es esa mirada, si hago algo como esto. Contenido, contenido. Observe que esto es pequeño, ¿verdad? Aquí puedes teclear muchas cosas, ¿verdad? Al igual que el contenido del correo electrónico, ¿verdad? O es algún tipo de post en el foro. Podemos requerir que alguien escriba las cosas en una línea. Eso es lo primero. El segundo es cuando haga clic en el Entrar, como pueden ver, nuestro formulario es B se va a enviar. Bueno, no escribimos aquí todo malo cuando tecleamos todo lo que se requiere y hago clic aquí, entro, va a ser sensato. El texto de entrada va a invocar la acción de envío cuando alguien golpea Enter. Entonces tampoco es algo que queremos tener aquí, ¿verdad? Por eso vas a usar algo llamado área de texto disco. Entonces vamos a quitar esto. Y vamos ahora crear área de texto. Como pueden ver, tenemos aquí unas cuantas cosas agregadas. El primero es el nombre, porque bueno, necesitamos interpretar de alguna manera en el Send Email dot PHP. Entonces por ejemplo, en un contenido lo tenemos en mi contenido. Y no identifiqué a Kate o mientras lo podamos quitar por ahora. Y aquí hay algo así como columnas y filas. Observe que este rosa es bastante grande, ¿verdad? Es porque las columnas están fijadas en 13. Cuando lo cambio a 10, como pueden ver, se está cambiando el tamaño, ¿no? Entonces esto dice lo grande que debe ser horizontalmente nuestra área de texto. Está bien. Entonces dejémoslo como antes. Creo que es bastante bueno. Y todos dicen cuántas filas de lata, puede, puede, puede el usuario tipear, correcto cuando uso sólo una, así que va a haber sólo una equivocada sin el scroll aquí, ¿verdad? Tenemos el pergamino aquí. Cuando escribo herramienta, como puedes ver ahora podemos tomar dos filas, pero la tercera fila son el scroll aquí automático. Creo que 10 es un punto muy bueno para empezar. Entonces tal vez hagámoslo un poco mejor agregando aquí la línea de freno. Creo que deberíamos agregar aquí un desglose aquí también para asegurarnos de que si alguien lo cambia de tamaño, ya se ha ido. Está bien. Y la diferencia entre un área de texto también son estos que notan que puedo golpear el Entrar aquí ¿verdad? Tantas veces como yo quiera. Y así es como debe ser, ¿verdad? Porque en este momento queríamos crear algún tipo de texto, realmente etiquetas, no, no sólo palabras simples gusto, punta, tema, escribir algunas palabras. Entonces así es como creamos el área de texto. Y también note que cuando escribo el muestreo aquí, se ha ido. Control de frecuencia de actualización más turno más R. Como puedes ver, aquí se va a mostrar. Entonces este es un texto por defecto, no aquí. No ponemos en el valor, como en los insumos para convertirse en insumos. Pero ponemos el valor aquí. ¿ Por qué? Porque se interpreta cada espacio en el área de texto. Esa es la gran diferencia, ¿verdad? Siempre entrar también se va a interpretar. ¿ De acuerdo? Por lo que esto es importante saber que funciona así. No obstante, creo que es buena idea que se adhiera a un soporte de lugar y le pidan a los usuarios algo como, ¿Cómo puedo ayudarte, verdad? Creo que cosas pequeñas como esa hacen que tu sitio web mientras que el formulario de contacto sea mejor recibido, vale, la gente pensará mejor de ti cuando hagas esas cosas. Entonces, ¿cómo puedo tener también, puedo teclear aquí de unas cuantas cosas y alguien me va a abrazar, ¿verdad? Voy a sólo cosas pequeñas pero realmente importan. Y por ejemplo, en el correo electrónico, también podría agregar el placeholder. Por ejemplo, aquí afuera, el signo de correo electrónico así. Entonces sugieres, vale, aquí hay un lugar para el correo electrónico. También podría agregar, por ejemplo, auto focus. Entonces cuando refresco esta página, como pueden ver, alguien no necesita hacer clic aquí. Se calienta, simplemente empieza desde que puede, puede sumergirse al instante en el correo, ¿verdad? Por lo que hemos creado una estructura. No se ve bien porque cosas así no se alinean aquí. Puedes cambiarlo, No te preocupes, usando CSS más adelante. Además, no funciona bien? Porque cuando hago clic en él bien, cuando hago clic en él y pongo todo Q porque ahora se requiere, nos están enviando a un lado así y no se está procesando. Pero no te preocupes, aprenderás a hacer esas cosas o alguien más lo hará por ti. ¿ De acuerdo? Por ahora, estás dejando HTML. que aprendas a poner correctamente todo lo que el contenido en tu sitio hace lección más larga. Y como siempre, si tienes alguna pregunta, siéntete libre de preguntar. Que tengas un buen día. 47. Conceptos básicos de creación de tablas: Hola, amigo mío. hoy te mostraré cómo crear una tabla. Pero en primer lugar, ¿qué es una mesa? Tabla es una representación de datos en columnas y filas. ¿ De acuerdo? Por lo que te permite como desarrollador web organizar los datos de buena manera, ¿verdad? Porque esto parece que estaba destinado a mostrarse de esta manera, ¿verdad? No es como si alguien simplemente pusiera datos en texto. Y eso está bien. Esto se ve bien. Ya sabes exactamente ahora, vale, Así que el nombre del curso es este, los premios esto para este curso. Y también sabemos que se trata de una tabla con respecto a videotutoriales. Y también se ve bastante bonito. Y tal vez te estés preguntando por qué se ve bien cuando, oye, tenemos aquí propio HTML es porque es un vistazo a CSS. Observe que algo puede verse horrible y se puede cambiar cómo se ve cuando se usa CSS bastante rápido, ¿verdad? Por lo que esta cosa enlaza con el archivo CSS de estilo que aprenderemos a crear en futuras conferencias. Entonces por ahora sabremos solo cómo hacerlo de esta manera. Lo siento. Pero se puede ver qué tan poderoso CSS ahora y se puede ver que es buena idea aprender de este curso. Porque bueno después aprendes cosas geniales. De acuerdo, entonces vamos a quitarlo. Lo siento. Hagamos que se vea así. Y quitemos esta mesa aquí. Y tratemos de crearlo por nuestra cuenta. Entonces vamos a crear una tabla. Para crear una, crear una tabla, necesitamos usar una etiqueta de tabla, que se utiliza para la representación de datos en columnas y filas, ¿verdad? Y bueno, para crear fila de tabla, necesitamos usar esa etiqueta que se llama tabla fila t, r Ahora podemos poner dentro de la fila de tabla, que es algo que se pone horizontalmente dentro de la tabla. Algún tipo de datos. Tenemos que hacerlo usando datos de tabla td. El paquete de datos de la tabla también se llama celda. ¿ De acuerdo? Entonces vamos a poner un dato de tabla aquí y vamos a llamarlo, por ejemplo, nombre. Como pueden ver, tenemos aquí un nombre ahora. Podemos poner tantos como queramos. Los datos de la tabla están aquí, vale, así que podemos poner otro y llamarlo, por ejemplo, precio en dólares, ¿verdad? Y podemos poner otro, otro, otro, otro otro otro tantos como quieras, y todo estará presente en una fila. Podrías estar preguntándote, ahora odio regañado, Está en Rao, ahora en una fila. Pero, ¿por qué incluso molestarse en usar mesas? Bueno, podríamos escribir todo así, ¿verdad? Bueno, se ve casi, casi lo mismo, ¿verdad? Bueno, vamos a quitarlo. Y note que puede agregar borde a la tabla usando algo llamado Se llama borde de atributo. Y ahora como puedes ver que cada texto está dentro de los datos de la tabla, que es una celda que tiene algún tipo de frontera aquí, ¿verdad? Y bueno, normalmente no haces cosas como esta desde HTML, ¿de acuerdo? Lo haces a través de CSS, pero lo vamos a vivir. Como puedes ver, es incluso en el rojo que no debes usarlo. Hay mejores maneras de hacerlo a través de CSS, pero lo vivimos solo por el bien de aprender tablas. De acuerdo, será más fácil para nosotros ver que, oye, este nombre está dentro, estas partículas son un dato de tabla, ¿verdad? Entonces tienes ese nombre y precio. Y Eva queremos poner ahora qué? El nombre del curso. Entonces, por ejemplo, C plus, no podemos ponerlo en la misma fila de tabla, ¿verdad? Tenemos que saltar de alguna manera de aquí a aquí. Y para hacerlo, necesitamos crear otra fila de tabla. Por lo que creamos otra fila de tabla. Y luego datos de tabla, que es C más plus, y otro dato de tabla, que es el precio o por ejemplo, 19, 99 dólares por ejemplo. Y si quieres poner más de los cursos, entonces necesitamos copiar esto algunas veces, por ejemplo, así, y simplemente cambiar los datos. Entonces por ejemplo aquí a Java, el premio, y por ejemplo aquí a pi diez y el precio, ¿no? Por lo que tenemos buena, ahora una tabla con encabezados de tabla y datos dentro. Observe que dije que esto no son datos, esto son encabezados de tabla, ¿verdad? Porque estos dos títulos describen lo que se encuentra a continuación. Y por eso, deberías nombrar a estos tipos encabezados de mesa, ¿de acuerdo? Th significa cabecera de tabla también es bueno agregar algo lo que se llama subtítulo. El título debe ser una etiqueta que estos después, la etiqueta de tabla dentro de la etiqueta de tabla, pero la primera etiqueta después de ella. Y bien por aquí podemos hacer una leyenda para que podamos nombrar nuestra mesa. Y por ejemplo, llamémoslo tutoriales en video. Por lo que ahora presentamos los datos de manera adecuada y más ligera. Cuando aprendas CSS, solo podrías hacer qué enlace con el style.css y cambiar cómo se ve, ¿verdad? Lo cual ahora es bastante bueno. Vamos a quitar la frontera si no la queremos desde aquí y se ve aún mejor, ¿verdad? Entonces desafortunadamente, esto no es lo que haces ahora. Tenemos que atenernos a ello. Es bueno saber que puedes especificar qué parte de tu tabla es el encabezado de la tabla o el cuerpo de la tabla. Para que puedas hacer cosas como esta. Estos son encabezados de tabla porque aquí tenemos buenos encabezados. Y esta parte es calva de mesa porque este es el contenido de tu mesa. Y tú podrías ser como, ¿Por qué haría eso? Bueno, harás tu vida más fácil si quieres procesar estos datos en CSR o JavaScript, ¿de acuerdo? Por ejemplo, sólo para el conjunto. Pero qué, no es algo que se requiera por HTML y guerra. De acuerdo, así podemos crear una mesa y ahora es el momento de hacer ejercicio. Crear manualmente. Y luego usando M en una mesa con tres filas y cinco columnas. ¿ De acuerdo? Por lo que manualmente vas a hacer una mesa. Tabla son todos los datos de la tabla y sólo se copia estos cinco veces 1, 2, 3. Eso me ha hecho hacerlo de esta manera porque de lo contrario donde estoy tan datos de tabla, datos tabla, datos de tabla, así que un mole. Y entonces copiarías esto así, ¿verdad? Necesitamos tres filas de ceros, así que así, vale, Así lo resolvemos. Pero también puedes usar a Emmet, ¿verdad? Por lo que dentro de la mesa, tenemos buena fila de mesa vieja. Podemos ver que ahora tenemos mesa equivocada. Necesitamos dentro de qué tabla datos, lo necesitamos cinco veces y necesitamos multiplicar todo por tres. Y ahí fue cuando lo creamos un poco más rápido incluso, ¿verdad? Y también se ve bastante bien, ¿verdad? Porque tenemos sangría adecuada parece sólo la lección, muchas gracias. Que tengas un buen día. 48. ¿Cómo estirar células con rowspan y colspan?: Hola amigo mío. hoy vamos a hablar de cómo hacer que una célula se estire, se extienda. Y cuando se necesita algo así. Para entender esto, les mostraré un ejemplo práctico. Mira, tenemos buenos ahora cursos gratis aquí, C plus, más java y Python. ¿ Qué tipo de cursos son? Ellos son los cursos de programación. Imagina que tenemos más cursos como, por ejemplo, digamos que tenemos C plus, más java, Python. Y digamos que tenemos buenos HDMI, css, y por ejemplo, JavaScript, ¿verdad? Como se puede ver, se trata de cursos de programación. Y aquí tenemos los cursos de desarrollo web. Entonces tienen diferente tipo, ¿verdad? Tipo de curso. Por lo que podemos crear otro aquí. Encabezado de tabla. Por ejemplo, digamos tipo de curso, ¿no? De acuerdo, entonces podemos precisar ahora, así que todos estos, bueno, bueno 32 y fomentar este td. Y éste es programación, ¿verdad? Y aquí tenemos ¿qué entonces? Desarrollo web, ¿verdad? Digamos que solo mojado. Como pueden ver, nos estamos repitiendo aquí y esto definitivamente no se ve bien, ¿verdad? Porque los ordenamos por el tipo ahora mismo. Y repetir así hace que tu mesa simplemente no sea baja de oro, Simplemente no es preferir ir ir de compras. Creo que la programación aquí debería extenderse, debería estirar derecho de una celda a segunda celda a celda, justo en este caso. Y para eso estamos usando el atributo span. Span significa estiramientos hasta que es un rango. Es en qué medida escribir algo extensión. Y bueno, en nuestro caso queremos abarcar. Entonces queremos extender estiramiento en el papel, ¿verdad? Porque queríamos tener como en lugar de un rol, ¿debe tomar 1, 2, 3 filas, ¿verdad? Y por eso vamos a quitar la programación de, bien, de aquí. Y vamos a elegir esta celda aquí, esta celda específica, y ustedes quieren extenderla dos veces aquí abajo. Entonces vamos a escribir su atributo rowspan y escribir aquí no dos, porque dos significa que se va a extender a dos celdas, incluida a sí misma, sino a liberar. Y ahora se ve mejor, ¿no? De acuerdo, entonces hagamos lo mismo con la web, ¿verdad? Al igual que esto. Y ahora el lapso de fila para libre escritura, si hubiera más de ellos, entonces, bueno, vamos por ejemplo, digamos que tenemos buena. Ahora, ten en cuenta que el js, entonces sólo vamos a extenderlo a cuatro celdas. Una celda se extendió a cuatro celdas. Simplemente toma todo el espacio ahora. Y creo que se ve mejor, ¿verdad? Porque no estamos repitiendo la misma información muchas veces. Es una mesa que se ve profesional. Entonces es entonces cuando usamos el lapso de filas o usamos el colspan también a qué? Para estirar en caso de columnas colspan, ¿verdad? Porque se llama sinónimo de columnas. ¿ Verdad? Imagina que quieres dar información adicional respecto a esta tabla. Al igual que por ejemplo, todos estos cursos fueron creados en lengua inglesa o por ejemplo, que fueron creados por mí, son capturas sin pollito. Muy bien, entonces, ¿qué harías? Bueno, podrías bucear en el texto de abajo aquí o podrías incluir esta información dentro de la tabla. Pero necesitarás hacerlo de alguna manera probablemente donde cabalgue para asegurarse de que nadie piense que esto es como un dato dentro de la mesa, ¿verdad? Eso representa el nombre, precio, o tipo, ¿verdad? Por lo que necesitaremos conectar todas las, las celdas aquí en la parte inferior. Y si bien necesitábamos estirarlos bien, entonces necesitamos hacer correcto el lapso? Entonces vamos a crear una tabla datos de tabla equivocados. Y digamos que todo aquí fue creado por mí, ¿verdad? Así creado por Al-Qaeda. Y el problema sobre es el, es que ahora esta celda de datos de tabla se extiende todo, ¿verdad? Porque todo necesitaba estar dentro, bueno, una sola celda. Y tenemos aquí una gran brecha, ¿verdad? Y lo segundo es que tenemos un espacio vacío, que no necesitamos, ¿verdad? Por eso sería genial arreglarlo. Bueno, podrías arreglar el espacio vacío incluyendo dos datos de tabla adicionales, ¿verdad? Pero no estamos arreglando la brecha más grande que tenemos aquí. Por lo que necesitamos hacer un estiramiento. Por lo que necesitamos usar colspan. Tenemos que abarcar nuestra célula. ¿ Cuántas veces? No dos veces. Porque vamos a simplemente prohibirlo en dos celdas entonces, pero tres veces. Entonces lo tenemos en toda nuestra mesa, ¿verdad? Por lo que esto es como una información adicional ahora respecto a esta tabla, específica esta tabla. O podrías simplemente escribir aquí que esto fue creado en inglés, lo que sea, ¿verdad? Se trata de información resguardando toda la mesa. Y bueno, podrías alinearlo como este centro para hacerlo centrado ¿verdad? Aquí hay muchos otros valores que puedes elegir en línea. Como se puede ver Derman, otro, pero el más útil es el centro. Y para ser honesto como puedes ver, es rojo. Significa que no debería usarlo. Y cuanto más es mejor usar CSS en casos como ese. No obstante, creo que para cosas pequeñas como estas cuando es raro, solo use, no es buena idea entrar en CSS y crear regla específica de la que no podemos hablar en el futuro, vale, por solo caso único como este, si esta mesa nunca se va a repetir, entonces tal vez tú solo, ya sabes, solo yo no todo funciona bien, ¿verdad? Entonces así es como se crea colspan, que estira las columnas, las celdas de la manera horizontal. Por lo que de izquierda a derecha tres veces en este caso, como ejercicio, hacer la columna tipo en el lado izquierdo, no en el lado derecho, quiero tener tipo, nombre y luego el precio. ¿ De acuerdo? Sólo está la lección. Muchas gracias. 49. ¿Qué es CSS?: Hola amigo mío. Es hora de una conferencia súper importante porque hoy salimos a hablar de CSS, que significa Cascading Style Sheets. Nos centraremos en estas dos palabras en esta conferencia. Hojas de estilo en segunda rueda. Enfócate en éste. Entonces, ¿qué es una hoja de estilo? Se trata de un archivo que describe un estilo para toda tu página web. ¿ De acuerdo? Y los estilos se ven así, por ejemplo, aquí. Entonces por ejemplo, decimos, oye, quiero que cada mesa haga que el color del borde transcurra para colapsar. Se desea que tenga un tamaño de fuente igual a éste. Queremos tener anchura mínima igual a ésta. Y también vamos a querer que el cuadro de sombra sea alto. No te preocupes si no entiendes, qué hace exactamente porque nosotros, ya sabes, explicamos todas las cosas como estas en futura conferencia. Pero por ahora, solo quiero mostrarles que este es un archivo donde pueden cambiar cómo aparecen las cosas en su página web. ¿ Cómo se ven dentro de un solo Phi? ¿ Y por qué es tan importante? De acuerdo, vamos a crear unos párrafos, ¿de acuerdo? Al igual que por ejemplo, se trata de texto de muestra, y vamos a copiar estos textos algunas veces. Y ahora digamos que tenemos buenas estas etiquetas. ¿ Y quieres que el texto dentro se ponga en audacia? Entonces, ¿cómo lo haríamos? Vamos a algo así como, por ejemplo, este derecho? Por lo que se tarda unos segundos en hacer tal cosa. Bueno, podríamos acelerarlo si conociéramos algunos atajos como por ejemplo, esto. Y cometí un error al hacer estos. Por lo que también es, como se puede ver, propensa a errores. Por lo que no eliminaré esta parte del video porque quiero mostrarles que esto no es bueno, buena idea. Como pueden ver, lo atrevimos. Tenemos una solución que funciona bien, ¿verdad? De acuerdo, así que quiero hacerlo, va a tomar, y luego lo que voy a hacer, de nuevo, seleccionaré todas estas cosas. Está bien, Esto, OK, y ahora es el momento de qué? Para cambiar de opinión y decir, no me gusta que lo tenga, ¿verdad? De acuerdo, puedo usar una trama de contorno z, pero digamos que reabres estos 52 días después y luego necesitas quitarla. Por lo que tendrás que eliminarlo así, o puedes usar la F1 y luego eliminar el ataque. Entonces digamos eso, Hey, sabemos algunos atajos que nos ayudarán un poco. Pero el problema es que sigue tomando mucho tiempo. Entonces, solo quitémoslo todo de aquí. De acuerdo, ahora hagámoslo como un profesional. Entonces, ¿cómo lo produce? Usar CSS. De acuerdo, entonces vamos a crear un archivo que no podemos poner el CSS. Entonces vamos a quitar la carpeta aquí porque tenemos que hacerlo desde cero. Y bueno, vamos a crear una carpeta, ¿no? ¿ Por qué creamos una carpeta? ¿ En primer lugar? Creamos una carpeta porque podríamos tener muchas hojas de estilo, no sólo una, ¿verdad? Entonces vamos a la carpeta que sostenemos, todas las hojas de estilo igual como para las imágenes, ¿verdad? Tenemos la carpeta aquí. Tenemos sólo uno en cada grupo por la clavija. A lo mejor tendrás más de ellos. Y es bueno mantener claro tu proyecto. De acuerdo, Así que tenemos la carpeta css, y el interior de la misma, vamos a crear un archivo, necesita tener una extensión como esta, CSS, y puedes llamarlo como sea, ¿verdad? Pero ¿lo vas a llamar estilo porque este es nuestro estilo principal, dot css, bien. ¿ De acuerdo? Por supuesto que puedes llamarlo como quieras, pero esto es algo a lo que estamos acostumbrados como creadores, Vale, Llama es apretado. Y ahora es el momento de la magia. Es hora de seleccionar todos estos gráficos de barras de poder. ¿ Cómo lo hacemos? Usamos algo lo que se llama selector. ¿ De acuerdo? Hay muchos selectores en esta conferencia aprenderás el selector sencillo que solo llamamos seleccionar o atacar. ¿Cómo funciona? Bueno, solo escribes el nombre de Jack que quieres seleccionar, Ok, y ya está hecho. Y luego se crean estos corchetes rizados. Yo sí. Los creas porque quieres poner aquí propiedades que afectarán a estos ataques cardíacos de partículas. ¿ De acuerdo? Bueno, puedes tener más de una cosa seleccionada, ¿verdad? Entonces quizá más adelante querrás seleccionar el BDI, esa tabla, DAC, la etiqueta de subtítulos, lo que sea, ¿verdad? Y dentro de estos corchetes rizados, algo que analice el CSS. Sabe que necesita aplicar todas las propiedades que están aquí a este específico, derecho, el selector del Pacífico. Entonces la pila en este caso. Y así seleccionamos el párrafo y queremos qué? Para cambiar el aspecto del texto para ponerlo en audacia, por ejemplo. Entonces, ¿cómo lo hacemos? Bueno, tecleamos el nombre del inmueble. Eso encontramos donde lo que podemos usar Control más espacio. Y como pueden ver, aquí podemos encontrar muchas propiedades. Y podrías ser como ahora, OK, OK, Así que necesitas memorizar todas estas cosas, no lo primero es que como puedes ver, tenemos qué pistas aquí, ¿verdad? Por lo que sería estúpido recordar todas estas cosas. Es bueno conocer las básicas, saber dónde buscarlas, pero no hace falta memorizar todas estas cosas. Entonces no te preocupes. Por lo que pronto verás que es bastante fácil usar porque imagina por un segundo cómo se podría llamar a una propiedad. Si queremos cambiar el aspecto de la fuente también, Se llama fuente. Vamos a escribir fuente. Y como puedes ver, hay una fam mili de propiedades que cambian de fuente. Entonces cuando escribo dash, como pueden ver, tenemos aquí el tamaño de fuente, que cambia el tamaño, ¿verdad? Entonces esto es bastante autodescriptivo en esto es bastante genial por eso. Entonces cambiemos el font-weight. peso de la fuente cambia entonces. ¿ Cuánta tinta hay dentro de la fuente, verdad? Podemos escribir el número por la presente, vamos a elegir los textos como perno aquí, está bien, y sólo hará que el texto letras negritas. Se puede ver que nada ha cambiado. ¿ Por qué es eso? Entonces es porque no conectamos este archivo a este cinco. Html5 es lo que hay aquí. Escribir el archivo CSS está en la carpeta CSS. Esta pelea no sabe de ésta, ¿verdad? Haz lo estúpido. Si algo se conectara automáticamente, va, bueno, tal vez no querrías que este estilo particular se conectaran a estos cinco, ¿verdad? Por lo que hay que decir, hay que decir que se quiere enlazar con él. Y para hacerlo, utilizamos la etiqueta de enlace, que MME nos ayuda debido a hacer el enlace usando el CSS, como puedes ver aquí. Y cuando hago clic en Entrar, tenemos aquí cuál es la relación de atributos, que Shays dice que HTML tiene una relación con el archivo que aquí se especifica como hoja de estilo. Entonces sí, la hoja de estilo, ¿verdad? Esto es de este nombre. Entonces este es un archivo que describe este tipo dentro de una hoja, bien, Así tamaño hoja, y aquí está el enlace a donde está. Observe que aún no funciona. ¿ Por qué es eso todo lo que es? Porque, bueno, este index.HTML está en el catálogo principal, ¿no? Y necesitamos vincularnos de alguna manera a esta ubicación específica. Y lo hacemos igual que cuando lo hicimos con imágenes. Por lo que necesitamos eliminarlo y escribir qué CSS. Y necesitamos entrar en la carpeta de CSS y elegir el style.css. Y ahora mira, está atrevido. Es bastante guay. Y lo que es más cool que podemos cambiar muchas cosas más aquí. Entonces tamaño de fuente como por ejemplo, quiero que sea 30 píxeles. Hagámoslo grande. Como puedes ver, ahora es grande y puedes cambiar de opinión tantas veces como quieras. Y haces un cambio aquí en un archivo en particular, podrías ser como, Oye, sólo había cinco párrafos a. ¿ Por qué me importaría? Esto fue bastante rápido y lejos? Lo necesitaría para crear el CSS lateral para el comando. Aprende un nuevo lenguaje para selectores y propiedades como. De acuerdo, pero hemos llegado aquí en el cinco párrafo, imagina que te has hecho a un lado que consiste, por ejemplo, en 500 subpáginas. Cuando lo hagas, entonces estoy seguro de que todos no. Por eso style.css es genial porque te permite cambiar de un fuego singular, todas estas cosas y ¿qué es más? Observe que este HTML5 es tan claro ahora, antes de eso habíamos trabajado en promedio, en cada etiqueta, teníamos algo como esto, ¿verdad? Y cuando lo miramos, fue difícil enfocarnos en el, cuál es el texto aquí y lo que queríamos mostrar a los demás que estamos creando un párrafo aquí, ¿verdad? Por lo que esto describe la apariencia del otro lado. Esto describe qué tipo de textos está sesgado, ¿verdad? Nosotros decimos, Hey, esto es un encabezado aquí mismo, tenemos un pie de foto. Por lo que no tenemos esta masa adicional aquí en este momento. Por eso usa el style.css. Por lo que note que para seleccionar algo, es necesario escribir el nombre de la etiqueta que desea encontrar. Después se crean los corchetes rizados y luego el nombre de la propiedad. Son muchos los nombres así y aprendemos la mayor parte del más importante en futuras conferencias y luego en la columna, y luego agregamos el espacio. No se necesita madera. Como puedes ver, aquí no pasó nada la cama, pero la agregamos para que se vea mejor. Por supuesto, puedes albergar por lo que tendrás todo en una sola línea. Pero estos tampoco se ven bien, ¿verdad? Correcto, para que tu código se vea bien. Y entonces tenemos el valor, el valor para la propiedad, que se puede encontrar donde. Cuando usas el espacio de las parcelas de contorno, tienes todo el valor que se puede poner aquí, ¿verdad? O tal vez cuando olvidas algo, ¿también puedes hacer qué? Tamaño de fuente y luego escribe desde el tamaño de fuente escocés. Como puedes ver, podemos dar click aquí y podemos leer fácilmente sobre ello. Entonces no te preocupes, no necesitas memorizar todas estas. No recuerdo todo, así que no te preocupes. Uno más importante, sí, pero no todo. Nadie puede hacerlo abajo de la guerra. Por ejemplo podría terminar la conferencia ahora, pero creo que es una buena idea darte algunas ideas de cómo se podría usar CSS aparte de jazzy cambiando la apariencia en relleno sanitario. Entonces, ¿qué es eso? Imagina que tienes un sitio que se ve bastante bien pero bueno para ti. Hay muchos usuarios de este lado y utilizan este sitio con frecuencia. A algunos de ellos no les gusta cómo se ve. A lo mejor les gustaría personalizar cómo se ve. Es ambos malvados. Sí. Ellos, podrías permitirles modificar el style.css e incluir solo para ellos. Aquí dicen los bandos que quieren incluir, ¿no? Podrían hacer de tu sitio los diferentes, diferentes colores. Bastante impresionante, ¿verdad? También debes saber que podrías cambiar la apariencia de tu sitio web en los smartphones. Cuando alguien tiene el monitor grande, puedes rascar todos los elementos en todo el monitor y se verán bastante bien. Pero más tarde cuando alguien abre 0 página web en smartphone, ¿no nos vemos bien? Entonces a veces necesitas incluso quitar algo o cambiar la apariencia de él y puedes hacerlo, ¿verdad? Específicamente puedes decir eso, oye, este ala se verá así en el teléfono inteligente, vale. ¿ Aunque incluso puedes cambiar cómo se ve tu sitio web cuando alguien lo está imprimiendo? Sí, se puede quitar cada logotipo, cada imagen que se vio, y simplemente dejar el artículo para imprimir cuando alguien use el atajo Control más tres más B, o tal vez control más b, solo ven los textos, ¿no? No todas, todas las demás cosas como imágenes y demás. A lo mejor no se necesita algo así como la especificación, ¿verdad? Entonces podemos quitarlo solo por impresión para que alguien no pierda su tinta. Bastante impresionante, ¿verdad? Entonces para registrarse, css es algo que cambia de apariencia en una multa. Y ahorras mucho tiempo, y el tiempo es precioso, tiempo es dinero, ¿verdad? Puedes controlar tu diseño. Entonces cómo se ve el sitio desde 15, aunque tengas cientos de sub sitio. Y además, es bueno saber que tu sitio web se carga más rápido. Porque cuando se carga el CSS, una vez, va a estar en algo que se llama efectivo. Es algún tipo de memoria dentro de tu navegador web, dentro del navegador web del usuario, que sostiene el CSS. Entonces cuando alguien salta de un lado a otro, este phi no necesita recargarse. Sólo está en la caché. Es en esa memoria donde el navegador web puede usarlo siempre que quiera usarlo, correcto, así que carga unos y solo úsalo. Eso es genial. Esa es sólo la lección. Gracias. 50. Colocación CSS y prioridad de CSS (cascada): Hola amigos míos. hoy vamos a hablar de una guerra interminable entre las flechas. ¿ Qué? Sí. Las reglas están peleando entre sí. Las reglas que intentas aplicar usando algo como esto. ¿ Qué significa? Bueno, vamos a añadir unas reglas más. Al igual que por ejemplo, cambiemos el tamaño para vivir por dos píxeles. Hagámoslo grandes textos. Y también cambiemos el color. Para cambiar el color del texto, utilizamos la propiedad color, y luego podemos elegir el color desde aquí, como por ejemplo, azul. También puedes cambiarlo usando Cuba. Hablaremos de esto más tarde. Entonces cambiamos un poco y como pueden ver, tenemos ahora un gran texto que es azul. El problema está sobre esta guerra entre roles es que se puede crear tamaño no sólo aquí en el archivo CSS externo. No, no, no, no, no, no. Puedes crearlos en línea, ¿verdad? O puedes crearlos aquí. Dentro de la etiqueta de cabeza dentro de ellos. Empaca estilo oro, o bien, hay algunos valores por defecto, ¿verdad? Observe que el párrafo tiene algún tipo de margen, ¿verdad? Observe que tenemos un buen margen entre este texto y éste. No necesitábamos agregar la línea de rotura aquí, ¿verdad? Para hacer entrar la línea, ¿verdad? Por lo que hay al menos cuatro maneras de hacerlo. Entonces qué pasará cuando yo, por ejemplo, escriba aquí párrafo y cambiaré el color a rojo. ¿ De acuerdo? Aquí tenemos color azul. Aquí tenemos ¿qué? ¿ Color rojo? Como se puede ver que X es de color rojo. Pero, ¿por qué? Y también nota, lo cual es muy importante es que nos quedamos con el font-weight y el tamaño de fuente, ¿verdad? Entonces nos quedamos con lo que fuera app, ¿verdad? Pero cambiamos el color a rojo. Y a este Fink se le llama cascada, vale, la forma en que eliges qué talla se debe aplicar, ¿verdad? En lugar específico se llama cascada. ¿ Qué es una cascada? Porque es muy raramente uso palabra, ¿verdad? Cascada. Cascada cuando escribes en Google, es una cascada que tiene algo así como pasos, Escalones de roca, ¿verdad? Y el agua fluye de arriba a abajo. Y en el barrio CSS, Es bastante similar. Cascade es una guerra sin fin entre las reglas. Tienes los estilos predeterminados del navegador. Imagina que el agua fluye aquí, ¿verdad, es un paso como en la cascada, no? Y las cascadas abajo, boom, boom, y boom, ¿verdad? Y se necesita como agua cada estilo que era antes, ¿verdad? Entonces navegador tiene estilo por defecto y establece el margen derecho? Observe que no quitamos margen u otros estilos del párrafo cuando agregó aquí y otros lados, ¿verdad? No quitamos el peso de la fuente y el tamaño de la fuente cuando se agregó aquí, el color, correcto, solo reemplazamos la columna, ¿verdad? Mal, no quitamos otras cosas. También puedes hacer un estilo en línea como este cuando escribes el sitio y cambias el color a, por ejemplo, morado, ¿verdad? Y vamos a cambiar sólo el color, ¿no? Pero aún así vamos a quedarnos con esto. Y vamos a mantener lo que sea que esté arriba, que es margen y otras cosas así. Entonces como se puede ver en el, lo primero es morado. Entonces lo primero en la cascada es el navegador, luego el archivo CSS externo, como el style.css, que está aquí, ¿verdad? Y después tenemos el estilo definido en la etiqueta de estilo. Entonces esto está aquí. Y entonces nos hemos metido en el estilo en línea, que está aquí. Y lo que me ayudó a entenderlo más es esa mirada, cuando muevo esta caja aquí, estoy como más de montar esto, ¿verdad? Así. Lo que significa que cuando escribimos, por ejemplo, en CSS externo, archivo, style.css, lo que el font-weight, negrita tamaño de fuente 40 píxeles, y color azul. Simplemente estamos haciendo esto. Entonces mantenemos lo que haya en el tamaño predeterminado del navegador, ¿verdad? Pero estamos agregando nueva capa, ¿verdad? Por lo que estamos agregando cosas nuevas como fuente y tamaño de fuente y color. Podría cambiar lo que se estableciera por defecto, actos de derecho por ejemplo, margen. Puedo cambiarlo. Vamos a cambiarlo a 50 píxeles. Puedes hacerlo, ¿verdad? No significa que no puedas hacerlo. Entonces, como puedes ver, podríamos cambiarlo para Kindle y establecerlo en 100 píxeles. Depende de ti. Pero no es necesario. Esto es importante porque mantenemos lo que fuera, ¿verdad? Por eso se llama cascada. Porque bueno, imagina que el agua se está derramando de arriba a abajo y toma lo que fuera antes de eso, ¿verdad? Entonces se necesita cada regla que era antes, pero si algo es nuevo, va a ser reemplazado, ¿verdad? Entonces, ¿ahora sabes qué significa C en CSS? Entonces CSS es hojas de estilo. Entonces phi es con reglas que están representando esto apretado y siguen el papel en cascada, ¿verdad? He simplificado un poco este tema. Tiene que decir que esto se simplifica porque hay más en esto, pero vamos a hablar de esto más en futuras conferencias cuando aprendamos más tipos de selectores, sí, hay más de ellos. Entonces con el tiempo, aprenderás más sobre qué tipo de cómo empieza a priorizar trabajos, Ok, por lo que se debe priorizar primero. Ahora nota que esto es bastante lógico porque, bueno, sería estúpido si no pudieras cambiar lo que es comportamiento predeterminado por parte del navegador web, ¿verdad? Incluso puedes comprobar el comportamiento predeterminado en Google Chrome. Puedes usar el Control Shift más j. Y cuando inspecciones cualquier texto como por ejemplo aquí, notarás que aquí hay un comportamiento predeterminado como display, blog, margin, doc, start one. Soy, yo soy. Vamos a hablar de qué hace. Pero como puedes ver aquí, nuestra hoja de estilo de agente de usuario, lo que agregó el navegador web. ¿De acuerdo? Entonces podemos cambiar este comportamiento Bastante fácil, ¿verdad? Por, por ejemplo, el uso del CSS externo. Y también IV, tienes, por ejemplo, CSS externo. Y tienes una cosa simple que quieres agregar dentro de HTML5 específico. Puedes usar este estilo dentro de la etiqueta de cabeza. ¿ Por qué? Porque, bueno, no necesitas entonces cargarlo en cada bajada, ¿verdad? Y además, si tienes algo muy, muy corto y sucede solo una vez, entonces tal vez puedas usar el inline. No obstante la mayoría de las veces la forma recomendada es esta cosa aquí. Entonces usando el CSS externo, porque, bueno, esto te da más beneficios la mayoría del tiempo, ¿verdad? Porque cuando cambias aquí algo, cambias cada archivo HTML que incluye el archivo CSS. De acuerdo, Hace el en la lección abierta. Muchas gracias. Y como siempre, recuerda, si tienes alguna pregunta, siéntete libre de preguntar. 51. Clase vs. id: Hola amigos míos. hoy vamos a hablar de clase y atributo ID, esta importante conferencia bruit. Entonces concéntrate. ¿ Qué es una clase? La clase es algo que clasifica las cosas. ¿ Significa eso? Significa que organiza las cosas en grupos. Está bien. Grupos. Alex. Y cuando se necesita algo así. Bueno, mira, tenemos algunos párrafos. Digamos que se quiere centrar a todos ellos. Por lo que quieres tener el texto en medio de la pantalla. En este momento el texto está en el lado izquierdo de la pantalla. Yo quiero tenerlo en el medio. De acuerdo, entonces, ¿cómo haría eso? Necesito elegir el párrafo y usaré la propiedad que se llama text align. Alinear texto permite cambiar donde debe estar el texto, ¿verdad? Se va a centrar en vivo, ¿verdad? Vamos a poner centro aquí. Y esto, se puede ver que lo hicimos. Entonces resolvemos el problema. También lo es. Pero digamos que tenemos buena ahora dirección. Y dirección interior tenemos, por ejemplo, mi nombre y el apellido. E imagina que aquí hay más contenido. Y quiero centrar esto también. De acuerdo, Entonces tal vez hagámoslo de esta manera. Dirección y tecleemos texto alinear aquí. Está bien. De acuerdo, resolvimos el problema. Pero repetimos horas de 2 veces imágenes de que había morfina. Al igual que por ejemplo, no llamo a nuestro tamaño de teléfono, escribo algo como esto. Por lo que tendríamos que hacer cosas como esta. No está bien, ¿verdad? Por lo que podemos resolver esto aún, comprado. Para hacerlo, necesitamos usar el selector de multiplicación. Para resolverlo, aquí usamos la coma y escribimos el nombre de Jack que queremos elegir para escribir. Entonces significa que elegimos párrafos y elegimos direcciones y hacemos tal cosa como está aquí. Y está bien, resolvemos el problema. Qué E, Si quiero aplicar las cosas que hay aquí, hacer muchos, muchos más impuestos ¿verdad? Son muchos los taxones. Por lo que necesitaría ir a CSS aquí y luego agregar otra etiqueta, otra etiqueta, otra baraja. Y vamos, ¿verdad? Ese es el momento de clasificar las cosas, de agruparlas, ¿verdad? Observe que nuestra principal razón por la que lo hicimos fue centrar las cosas. Y bueno, podríamos clasificar todos los párrafos en un grupo y hacerlo así usando el atributo de nombre de clase. Y luego las cotizaciones. Vamos a escribir el nombre que inventamos, ¿verdad? Por lo que nosotros centro de ejemplo de pañales. Y podemos hacer tal cosa a, bueno, a cada lugar que queramos, como por ejemplo estos. Y ahora en lugar de escribir esto, vamos no tecleamos punto centro. Para poder elegir impuestos que tengan buena clase, hemos hecho nombrado centro, necesitamos usar el signo de punto y luego el nombre de la clase. Como se puede ver, la solución es similar. Pero ahora puedo decir: Oye, no quiero a este tipo. Ahí va a estar centrado y no lo es. Entonces ya puedes decidir qué centrar en tu sitio y no necesitas preocuparte por el nombre de la etiqueta ahora, ¿verdad? Entonces así funciona. Si desea especificar, quiero que en los párrafos se centren. Se puede decir, correcto, agregando p. aquí. Por lo que p punto centro se ha ido, centrar en los párrafos. No obstante, en nuestro caso, queríamos centrar todo. cuenta que este nombre puede ser lo que quieras, ¿de acuerdo? Entonces puedes cambiar esto por esto y también va a funcionar, ¿verdad? Pero no agregues espacios aquí, como por ejemplo esto, ¿de acuerdo? Porque ahora no está funcionando porque tenemos bien. Ahora aquí dos clases, ¿de acuerdo? Esta clase y esta clase. Se pueden tener múltiples valores para la clase. Pronto verás por qué es bueno. Porque tal vez quieras hacer el texto más grande, por ejemplo, justo sobre él, hacerlo más grande. Entonces vamos a crear una clase que llamamos más grande y bajamos al tamaño de fuente 79 Act y hacemos, por ejemplo, 40 píxeles. Y ahora puedo decir: Oye, quiero que este sea más grande, y por ejemplo, éste sea más grande, ¿verdad? Por lo que agregamos el espacio entre los valores. Y como puedes ver, esto es más grande que esto es más grande. Y podemos usar estas clases en cualquier tipo de top, ¿verdad? Entonces, ¿la clase está acostumbrada a qué? Para clasificar las cosas. Por lo que arreglamos las cosas en grupos, catálogos. De acuerdo, ahora es el momento de la identificación. Id. Identifica las cosas. Entonces tienes, por ejemplo, algo bueno se llama tarjeta de identificación, y te identifica solo tú escribes a la persona única única. Se te puede replicar. Y como se puede ver, podemos usar clase magnetize. No obstante, el ID se puede utilizar de su lado. Tenemos nombre específico, sólo unos. ¿ De acuerdo? Entonces, ¿cuándo usamos algo así? Digamos que queremos elegir esta dirección o tal vez este párrafo en particular, ¿no? Se puede decir entonces que id de este párrafo es, por ejemplo, texto único en estos debe seleccionarse. Y luego te vas aquí y con el fin de elegirlo en estos tipo para hacerlo diferente, no los otros. Vas a usar el signo de hash y luego el nombre. Y ahora puedes hacer lo que quieras para escribirlo y hacer el color rojo. Puedes cambiar lo que quieras. Conozco font-weight, audaz. Hay muchas cosas más, pero no quiero mostrar todas estas cosas aquí ahora en este electrodo de partículas, ¿verdad? Pero puedes hacer lo que quieras. Este tipo específico, esto se puede ver ahora se lee. También está atrevido, ¿verdad? Los demás no se vieron afectados. Entonces usas ID para elegir un solo elemento específico, ¿verdad? Se quiere que sea un poco diferente. Éste lo identificó y lo cambia. Y recuerda, no puedes tener dos identificaciones de tu lado así. De acuerdo, esto va a funcionar bien. Como puedes ver, está atrevido y en este momento, pero causará muchos, muchos problemas con respecto a seleccionar ID único usando JavaScript que lo harás en el futuro, estoy seguro cordero. Entonces recuerda que ID solo existe una vez con estos textos únicos. Por supuesto, puedes tener otras ideas como ID, nombre diferente, ¿verdad? Pero sólo unos con este nombre, ¿de acuerdo? Esto es bastante importante para que lo recuerdes. Es como tú, eres único. Tienes la cédula de identificación que te identifica solo a ti. Practicemos un poco esto y creemos una forma. Una forma. Y dentro de ella vamos ahora crear entradas libres. Y bueno, tenemos tres insumos. Y quiero elegir solo entradas en esta forma. No en esta forma, ¿verdad? Porque normalmente podrías escribir input, ¿verdad? Pero ahora eliges este insumo y este insumo cuando murió. De acuerdo, Entonces esto es un problema. Digamos que tenemos un formulario que ID es, por ejemplo, canasta. Y aquí tenemos una forma que se llama orden. Y ahora puedes elegir solo entradas de esta partícula son cuatro. Ya puedes teclear canasta, ¿verdad? Y dentro de la canasta, si quieres elegir entradas, escribes el espacio, ¿de acuerdo? Entonces si quisieras, ya sabes, entrar en la oscuridad. Por lo que quieres hacer algo desde dentro. Escribes el espacio y luego escribes el nombre del etiquetado quieres elegir. Por lo que entrada. Y ahora vamos a tener, por ejemplo, cambiar el color a azul. Y también no podemos cambiar, por ejemplo, con 250 píxeles. Como se puede ver, la primera forma se vio afectada. Podemos teclear aquí en azul y son más pequeños. El segundo formulario no se vio afectado, ¿verdad? Por lo que ID también es bastante genial para distinguirse uno de otro. De acuerdo, Esa es una lección realmente buena. Y como siempre, tienes alguna pregunta. Siéntase libre de preguntar. 52. Extensiones útiles de CSS para acelerar tu trabajo: Hola, es hora de aprender a extensiones útiles que ahorrarían tu precioso tiempo. Una de ellas se llama soporte HTML CSS. ¿Qué hace? Observe que cuando estoy aquí y me gustaría agregar, por ejemplo, otro nombre de clase. Y uso el acceso directo de Control más espacio. Podía escuchar muchas palabras diferentes porque, bueno, la versión básica de la caja de suturas es sólo apuesta. Cuando yo, cuando apenas empiezo a escribir más grande como puedes ver, vale, está aquí. Pero también trata de elegir entre el texto que está dentro de HTML y eso no es, no, no es bueno. Como puedes ver, deberías tener solo clases que estén disponibles para ti desde aquí, verdad? Eso es todo. Entonces para cambiarlo, simplemente no podemos instalarlo. Y ahora nota que cuando uso el acceso directo de Control más espacio, tengo el centro y más grande. Entonces n es el estilo. A partir de aquí. Eso tiene clase, ¿verdad? Bastante impresionante. Bomba, más grande, y eso es todo. De acuerdo, así que esa es la solución para esto y también para la identificación. O como puedes ver, puedes haber llegado aquí en las identificaciones que puedes elegir entre canasta y textos únicos, ¿verdad? Porque has ido a dos identificaciones aquí. A lo siguiente se le llama CISSP. Como su nombre indica, te permite escoger cómo se escribe tu bien, CSS sin tener que entrar en este archivo CSS. Entonces esto es bastante genial porque ahora cuando realmente me quieren ver cómo, por ejemplo, funciona más grande, necesito abrir rebanadas como y buscarlo. Puede que estés bien, pero es bastante rápido, ¿verdad? De acuerdo, Son archivos, pero imagina que tu CSS es una BBB más grande, ¿verdad? Al igual que esto. Y luego buscas el gas específico. Eso no está bien. De acuerdo, así que volvamos a lo que era antes, ¿de acuerdo? Y vamos a resolver el problema usando el pico CSS. Por lo que CSS pico. Y como se puede ver cuando después de la instalación, bueno. Ahora cuando uso el Control en mi teclado y muevo el mouse sobre esto, bueno, necesitamos recargar nuestro código de Visual Studio así que lo voy a cerrar y volver a abrir porque a veces es bueno. Boogie después de la instalación. De acuerdo, lo hice. Y ahora, como pueden ver, ahora tenemos aquí algún tipo de información con respecto a cómo se ve algo ahí. Pero el problema es que, como se puede ver, sólo podemos ver lo que no y no todo, ¿verdad? El problema es que esta extensión específica le gusta tener todo ingrediente aquí así, ¿de acuerdo? Por lo que necesitamos formatearlo de esta manera. Prefiero que me guste formatear así porque puedo ver claramente que estas extensiones están aquí y he abierto y cerrado un corchete rizado, pero a veces como cosas como esta. Y como puedes ver ahora, tenemos aquí información sobre cómo se ve Center, qué tan grande se ve. Como puedes ver, es un poco buggy a veces tal vez lo arreglamos? Pero uso esto en su mayoría no para pico, sino para entrar en este empate CSS para editar cosas y cómo hacerlo. Sostengo el atajo de Control y luego hago clic lógica y estoy instantáneamente en el lugar donde quiero actualizarlo. Entonces esto es bastante guay, ¿verdad? Entonces quiero editar algo. Yo sólo sostengo el Control y puedo ir allá y editado. Esto es muy impresionante. También puedes agregarla, ella desde aquí. Para hacerlo, vamos a seleccionar algo, hacer clic derecho, ir pico, y luego Peek Definition. Puedes usar las salidas de atajo a las 12 mientras creo que es difícil golpear N en el teclado. Y entonces se puede, como se puede ver desde aquí, editar un muestreo, ¿no? Por lo que se puede, por ejemplo, perno camino telefoneado. Y puedes hacer doble clic para ingresar al CSS de STI de esta manera. Y puedes editar aquí también, pero podrías editarlo a partir de ahí y cambiar el tamaño, como puedes ver son el font-weight a otra cosa. Eso es sólo una lección. Muchas gracias. 53. Div vs. span | Inline de bloque: No usamos eso significa el evento o un lapso y lo alcanzable es auto años def estoy seguro Cassie dovish, es autosómico ellos en local o nosotros en línea. Por favor pide prestado el buque insignia de la vagina Coniacian. Ve aseado en lo siguiente. Está bien. Span, riñones, el choque tecnológico cada uno al tipo Jonathan, E dot H atributo. Les voy a tambalear mucho dinero. Estado, la pila prohibirá auto donación Razumovsky. Estella, patos fue su propuesta al neutrón clave. Todos deben conocer shuttle dark, mama a Krishnan y datos de atributos. Ahora Thomas Shabat, los adultos llegaron a empatar mamá se lo copian y yo copio el impuesto real nos visión del túnel en absoluto. Akáshico cada texto Turquía, ya que todos los disparadores no obvios para empujarlos sus textos de sintaxis, el artículo de eco, no me enseñó preguntar me es descuidado, no tienen más remedio que llamar. Por lo general, el personal puede buscar. Socialistas lanzados sin embargo voy externship al Buda puede neutronar mini nuestro objetivo. Por lo que el DIA, NumPy Air Act o control de dieta ADA Shift E, EPA Germanes recogieron y a Titus Martinez a la ruta del tiempo y VDJ que es simplemente tonta, aunque sí, así que no es como solemos hacer dash para llamar texto plano una opción llamada fascia, la estufa, el texto. Esos son mamá medida de volumen para recuperar el viejo tocón. Se investigación debe ser soplar llamar al neutrón Washington tac toe moda. Si el decodificador como el límite 2 es 4 más 2 neutrones y aeruginosa está atascado en él, lo que le dice al nigeriano no le enseñó a mamá a pagar para ir juntos, empujarlo longitudinalmente. Bs contacto. Sí. Podría usualmente momento que tiene dos Martínez de tiempo. Pero él es cristiano, tú eres Martínez. Y un dólar al año todavía bloquean sales natron block no se enseñó nos dijo. Ella esquema no va a usar el Nevada entrar cerca tienden a almacenar el texto buen día, algunos alienantes. Atención a que cubra lo mismo estamos para recoger sierra festering en los estampados en premium directamente. El último dígito podría ser actitud me paga farsa tomó un EBS dar a eso. Ella soy yo, nos empujó fuerte. Alberto Lepidus del régimen de Brasil. Entonces bin Dustin, los tumores del tesoro seguirán siendo una película de provincia. El propio pequeño ataque de viga de los niños. Eva una geométrica. No desarrollan diez horas u omisión, ¿no? Golf, pelota de tenis. Por lo que es de color mínimo. Lavar para lavar cubeta grant, Colorado. Alguien nos debe porque tenemos en cada color, uno como algún hueso de agronegocio poco han atrevido opec es minima a a Dinah no requiere que se cumplan de decenas rompecabezas fuera a tinnitus el inicio impulsado y dijeron, sí, bien destrozado. Nos dice que como nuestra versión mide mama dos conjuntos de datos se gasta en Amanda propuesta a chaquetas planas o tal vez escape directorio block a esencialmente decir estamos dosis timpano, gestos, siembra se lanza el Internet Dolly, anatomía nosotros en línea, probada. Es llamada minima o un lapso en trigonometría consiguió tramos mínimos y no color de fondo de rojo. Esos están en Zoom. Tuvimos que ir a ellos Semana Santa en una masa de atajo de artista para hacer coincidir para volver a Kotler, Kong no consigue nada más bloqueo para bloquearme. Hoy es ese ángulo de temperatura. No cubres inicio de sesión y voy a entrar a ataque libro de texto abajo él está en pero no mamá. Un poco de gestos. El nuevo impulso Martínez, pequeño punto Kovach pasó pero Coupang, cosas retorcidas como el neutrón y tipo, def East Ponto, sin bolsa marrón a los bolsillos simulados, osha, span, etiquetas, volumen, exhibición, en línea, un def, usa taxón y bloque de exhibición para bloquear esta porquería loca. Londres. Hay alguna asociación por encima de él intentos pero córneo. Por lo que el Propylaia da a su declaración tanto profesor Ananya, vamos a hacer coincidir el color luchando con el de un stego me triste que ella región soviética a tipo II color de fondo era Nino y La Nina. Gracias a restaurar la ley, taco árbol Bodhi. Si la cantidad de oferta de un cuerpo prototipo, color islámico de la danza pose, esas integrales de enzima. Instalé el atracón Israel y Kalina lo pusieron fuerte a través de la base de datos sin embargo todavía dice como de costumbre lo resultados es aceptar la corrida terminada colores tirados después de mí, Susan, trauma inicial se sienta en el monitor residentes en su sombra labial usamos SCADA se encuentra como dice, número. Pero eso son iones DO tomate. Bloque en línea por encima de las máquinas deben basurero es más de 10 a los textos pone tire de ellos. Sí. Plato de impuestos van ellos en. Por lo que los textos líquidos proponen a su persona digital clave actin Sí. En línea. Gracias, Jacqueline AGMA en el mapa pro-social incómodo. Por lo que Kush tiller, o damiselas tau2 debe ser Santa Maria del dot VNC texto ticker a menudo como sea posible. E, para atar tu zapato. Demonio yucky. A menudo lo posible. El somnoliento original Giotto, máximo Sherlock, timpano. Un momento para atar estampación. Encontrar a Krista, es que como declaración DACA Germania, stan sí. Borde de zoom. No es una opción. Renombra Ivana y confíe en ellos. Opción de bloqueo es que tengas Sania trip o motor disparadores hace mal gusto Yad Vashem. Tenemos los gigavatios más largos. Metope muestran crack de latón táctico tras el reinicio acuático, un alto dist del socket E, enorme matrilocal para llevar a Caltech a resonar. Dorian me cambió así que arboles un poco de tu pincel para poner una etiqueta div. Eventos, no insulto Dhamma, clúster cuando se mide con la Star Wars yo y los asistentes para ir a Caltech turismo concreto cerca de mí. Por lo que para iniciar un mensaje de texto a la fecha. Entonces texto, dice jack, tiene una clase de piedra muy grande con contexto de cultivo isquémico. Sí, Mínimo en sombra causó una opción llamada Setting Statista pick. Esos son método de lavado por lo que ella Jia sólo significa manejo o aquellos tentados a tipo opción de transponer. Prueba de un texto es polimerasa lanzando un troquel que tiene enorme necesidad de sus síntomas de asma. Novato, división dos mini siestas, chimpancés que pico vendiendo la vasta abre el dos años COMO empezar, yo todavía estaba en un árbol para enviar. Tenemos deseo desplazarse de nuevo hacia arriba. Tenemos una opción para desplazarse por la magia. Soy yo, Sean, también erosión costera o conductos o chimpancés ese pixel. Cosmológicamente DIEZ años se hizo en esos iMovie e e impopulares, estampados en Cellco Vicent al dolor. Libro de texto de Chicago, Washington. Ahora tronco central vertebra registro burgués. Mamta puede vasoconstricción o texto alinear el techo. Ahora obtienes un centro oficial de demencia o Benji. Nirvana no etiqueta de lavar tu sombra al tutor. Sí. Habló, el racionamiento en realidad no se hace hace todavía colonial. Que consiguieron auto libro BWM, que en realidad era hijo de afluentes nacionales encaja en Ravana Zaption, el ego. Sí. Llámame Mama sombra pregunta. Washington gluco vehículo elemental. Chico, sí. Natalie, total Diego de VO2, tiempo a la Memoriam y apps corte y ese conocimiento ID. Policías. Diamond gestionará una muestra única. Permisos en tu DAW solo es llamar no apresurarse al coseno 2 nos podría llevar. Nos dice la ilusión. Algo de lavado de dinamo. Envía datos a alinear texto, centro. Palo verde mide esa vocal central no total nombre sello populace a trilla. Ii. Iones, pilla de autobús lanzadera, no un Bengio propuesto a vocal central. Dr. vaya con mamá, sello, Tegel, Lisa. De acuerdo, jefe denso posible. Washington, Java, el techo, Nilo, retrocede texto alineado. El ultramar es pareja para pagar mucho. Visión animal sionista hace timpano sombra costo por viralidad mucho Italia Shara para llevar a ellos. Ella es buena etiquetando, Aikido, Mishnah, ver TiVo cizalla Guo significa en el medio cerca de frontera. Te ves todavía hexágono y Martina. Martina es media no es 0. El fronterizo. Para hacer un genio automático que estudie en otro y escoja los datos de trabajar Jackie Martínez Austin, que como buen plato, el sello de oro Kanyama Envato a Samhita conjunto de algebraico para reducir mucho TOC. Y suele decir resultante colonial español, no todo chico vertebra, también lanzar la pregunta es dejar un spray fuerte. Michelle Martinez como el jamovi me, algunos de ustedes hacen Giotto es los valores sociales Kotok entre x1 y Barbados luego los muestran que van Washington, EU, auto detectan. Sí, los temas están atascados egoicos, inline-block son el automóvil del Benjamín no es simplemente esa cosa. Ahora a mis actores estatales gobierno sería suplementario al soviético. Nos ha cerrado a ambos drama. Span, sudo nano triángulo truco. Eso consigue que Vietnam Illini impulso diagonal. ¿ Pueden visualmente tomar simplemente ir no-spam a la medida de volumen mamá en absoluto, simplemente computando el tiempo de antena modelo lineal Domingo. Y si ella es COVID-19, East Chicago repasa el gesto, Tasha Prakash al tiempo. Y estas son estrellas octeto de Anna. Contactos románticos, turísticos, camioneta, en línea, lindo, minúsculo minuto. Debería haber escrito hoja de costos. Por lo que CAUTI para pros a mi visa ON taco emitida o yak. Yak viene Stan. Otro elemental poco ambicioso, irresistible de no ser santa máquina del tiempo que nos lleva a un episodio de íntima Takashi Murakami, elemento del cultivo de las córneas Revlon. Que el impulso masivo. El español no diva. Nuevo proyecto. Tienes avalancha táctica, opcode, Chautauqua, UV. Por lo que entrenó a Albo, el Gólem y visualmente bolas encendidas luego van a la víspera de la partícula para aburrir a Borden. Nuestro presupuesto es popular. Los trajes son nauseosos. 39 Internet de avianes. Etiqueta es Domiciano aquí y el musulmán es medio cada volante En Washington tomar múltiples tabú yak, bloque de Virgo. Ahora en el par TAC, bloque tocable de ataque al ataque de rutina, bloque de erosión ataca el inline. A pesar de que Ashish establecimientos malos. No todos potencialmente atascado etiqueta en línea ahora, pero todavía tienes Torre Inclinada para pagar cualquier sistema de inteligencia iraquí no trata puntos son en realidad Domiciano su o ella via def es una pieza clave stego saber Salam. Entonces sí pieza Montessori versión opción whatnot on catador en Internet o al menos elemento en línea arriesgado o demasiado whisky, elemental, local, verdadero número de pabellón trich retomado. No realmente más resplandeciente. Pero esperemos que pronto, la identidad es barco ingenuo más barato más dos de los lados de la nave quiz sobre regex compartido o bancos o hover verge. Parte de lo que para es usar tipo sobre a inline, tag. Esos trueque para comer. Visto un tiro para ustedes chicos que me trasladé a hacer o no, esos están haciendo incluso Vick, que las familias no individuales. Yellowstone nos dicta en una transfusión. Quería proponer anclar esto en diagonal de línea. Pero chico sensato. Y el enlazador hace esto en se ve y máquinas automáticas, VGG, sociología de Washington, Dr. Gautam, texto parpadeando no corta central Vanuatu es central. Quieres hacer triángulo y otro tecnológico su interior. Entonces imágenes de texto, video, tan xi j, hay alguna buena discusión inicia una opción para el panel de hoy, el proximal, no los años centrales. Y aunque no actives a Chautauqua, tienes los llamados totales de coñac de pila. Y debemos tomar texto y reactivar vital central a nuestra Ella hace plantilla hebra, incluso proponerle a Anita, Anita miel. Java. dadaístas son algún otro punto punto-punto. Cualquier Java. Java upto es vulnerable, dice que debo traducir VFB social, sueco, ella sólo gentil hecho en Java. Entonces como de costumbre, el concreto superior ahora cambió en Java. De acuerdo, la dirección de izquierda. 54. CSS: propiedad visualización de: Hola amigos míos. El día de hoy vamos a hablar de la propiedad display, que cambia a medida que el nombre sugiere cómo se muestra algo. Entonces cómo se muestra la etiqueta en tu página web. Por defecto, la etiqueta div tiene un buen bloque de visualización. Entonces porque tenemos bien aquí ahora, sólo div's con textos diferentes. No quiere decir que se va a mostrar de manera diferente ¿verdad? Después la cuadra. Entonces cuando lo abro aquí, una vista para que puedas ver todo aquí se muestra como bloque, ¿verdad? Aquí hay texto diferente que sugiere que tal vez nos veamos diferentes, pero no importa. Lo más importante es ¿cuál es la pantalla predeterminada establecida por el navegador web? Y podemos anularlo justo después, por ejemplo, accediendo a tipo 1 o tipo 2 o escribir libre usando CSS. Cambiemos la pantalla para bloquear en todas partes. De acuerdo, así. Por lo que vamos a hacer la misma visualización en cada caso, que es bloque, solo los valores predeterminados. Se puede ver que nada ha cambiado, ¿verdad? Porque acabamos de hacer lo mismo. ¿ Qué hace el navegador web. Pero cuando cambiemos el tipo 2 a inline, ¿qué pasará? Como puedes ver ahora, todo aquí se muestra en línea, así que uno tras otro, ¿no? verde es el fondo y el texto está dentro estos antecedentes y lo que no toma todo el espacio como en caso de bloque. Además no hay entrada adicional después de cada div, ¿verdad? Porque cambiamos el comportamiento por defecto. Ahora lo mostramos como en línea. Piensa. ¿ De acuerdo? Pero hay una cosa más como display inline-block. ¿ Qué pasará? A primera vista, cuando lo miras, podrías ser como un K. Funciona esta misma luz en línea, ¿verdad? Porque todo va uno tras otro. No hay entrada adicional y voluntad. Tiene buen fondo, igual que en el elemento en línea, en línea, ¿verdad? Y es cierto que funciona igual que en línea, pero también tiene una característica del bloque. ¿ Qué tipo de características? Bueno, te dije en la última conferencia que no puedes cambiar el tamaño de los elementos en línea, ¿verdad? Bueno, cuando hagamos algún vuelo con 300 pixeles, entonces se quedará libre 100 pixel. No obstante, en caso de inline-block, estos cambios, podemos enviar al conjunto el ancho y podemos cambiarlos, por ejemplo, esconderse bastante fácil a otra cosa, ¿no? Observe que ahora tenemos bloques en línea que ocupa espacio, pero se muestran como en línea porque son uno tras otro. No hay Enter después de cada cuadra, ¿verdad? Se puede ver que están saltando cuando no hay suficiente espacio. Así funciona. De acuerdo, porque así es como funcionan los elementos en línea. Además, si tuviera aquí un poco más de ellos, como por ejemplo, si golpeamos moral que así. También notarás que cuando no hay suficiente espacio que saltamos a otra línea, ¿verdad? Entonces para dejar de mostrar todo en línea como en caso como aquí es queremos romper la línea. Deberíamos usar la etiqueta de rotura. Por eso usamos la línea de ruptura, línea ruptura que D, nuestra plática derecha. Ahora como pueden ver, que detengamos el proceso de poner todo en línea de aquí a aquí. Y cuando establezcamos el tamaño a, por ejemplo, 250 píxeles, notarás que tenemos tres bloques que se muestran en línea. Es por eso que esto se llama inline-block porque tiene buenas características desde inline porque las cosas se muestran en línea. Y tiene buena característica de blog como permitirte cambiar el ancho y la altura, ¿verdad? Pero no se aplica y entra al final, ¿verdad? Por el bloque predeterminado está haciendo. 55. EMMET | TricKS crea etiquetas con id y clase: Hola, amigo mío. El día de hoy vamos a hablar de bebidas MHC que te permitimos crear, gravar, incluyendo el atributo de clase sin tener que escribir cosas como div, entonces necesitaríamos agregar el atributo iCloud, entonces el nombre de clase ahí será horrible crear cosas como esta, de esta manera, ¿verdad? Por eso hay una forma especial de hacerlo. Y necesitas montar jazz nombre del cristal. Genial. Es un poco más rápido, ¿verdad? Entonces de la misma manera, al igual que seleccionas gafas, puedes crear lo correcto. Entonces use también dot y luego el nombre de la clase. Y probablemente no lo haya hecho. Esta deuda está insertando el atributo de clase en la etiqueta div. ¿ Por qué es así es porque lo está adivinando. Hay algo que se llama a Dios, como nombres implícitos de etiquetas. Emma puede adivinar. Es inteligente que cuando estás creando una clase y no especificaste nombre, eres pro probablemente quieras crearla dentro de div, ¿vale? Entonces podemos escribirlo como este nombre de cristal, ¿verdad? Pero no es necesario. Simplemente puedes teclear el dapp. Por supuesto, si quieres agregar clase a la gente, por ejemplo, párrafo, entonces necesitas escribir el nombre de la etiqueta y luego el nombre de la clase, ¿no? Entonces esto es solo para situaciones en las que solo quieres crear un div. Pero si quieres ponerlo en el párrafo, entonces necesitas escribir manualmente 2 qué tipo de etiqueta quieres agregar el atributo de clase, ¿de acuerdo? Entonces así es como creas clase y adivina qué, para crear el ID, escribes, y si quieres crear dentro del párrafo, por ejemplo, usas el hash. Entonces nombre de identificación, ¿verdad? Entonces lo mismo como aquí, correcto, con el fin de seleccionar, se utiliza el hash. De acuerdo, bastante fácil de recordar. No obstante, ¿es el dominante a esta conferencia? No. ¿ Y si quiero agregar más de un nombre de clase, qué puedes hacerlo de esta manera, verdad? Creo que es más fácil hacerlo de esta manera porque tienes buenas sugerencias entonces aquí, ¿no? Todos pueden comprar, pueden elegir Taiwán, yo puedo elegir Tipo 2, ¿verdad? Si utilizo los accesos directos de espacio de la barra de control. Entonces creo que es mejor que hacerlo así. Tipo uno y tipo dos y tipo tres, ¿verdad? No me gustó así. Creo que es mejor. No obstante, si quieres crear muchas a la vez, entonces, ya sabes, cosas como esa te pueden ahorrar tiempo porque puedes hacer tipo dos, escribir tres, y multiplicarlo por 10, correcto, entonces estás ahorrando tiempo. Pero, ¿quieres crear un solo elemento? No me molestaría usar escribir el nombre de la clase aquí dentro, ¿verdad? Yo sólo usaría los datos para crear ataque. Y hay más nombres de etiquetas implícitos forma de crear usando Emmet. Porque note que hemos llegado aquí, por ejemplo, lista desordenada. Y siempre dentro de la lista desordenada, tendrás list-item, ¿verdad? Porque así funciona. Tienes bueno que eres lista desordenada y dentro de ella, escribes ítems de lista uno tras otro, ¿verdad? Entonces estás haciendo algo como esto. Entonces por eso cuando haces algo como U, L y luego quieres crear una clase para cada LI. Entonces solo escribes eso. No necesitas teclear LI dot nombre del cristal, ¿verdad? Sí, Oh, Jazz esto y funcionará igual. Y lo puedes multiplicar por cinco veces y tienes el nombre de clase para cada aliado. Y lo que es la escuela. Puede, por ejemplo, utilizar otras características. Mira ahora tenemos el tipo. Cuando escribimos 1 aquí, notarás si miras el tipo 1, pero podemos usar signo de dólar como hablamos antes, y como puedes ver, tenemos bueno Ahora Tipo 1, tipo dos, tipo tres, tipo cuatro, tipo cinco, algo así, es útil la mayoría del tiempo no por el bien de CSS, pero cuando aprendas el script Java, algo como esto te ayudará a elegir el aliado específico y la información que esto aquí se puede usar en JavaScript, por ejemplo. ¿ De acuerdo? Porque tal vez te estés preguntando ¿por qué me molestaría incluso en crear algo como esto? Hay una situación como esta fue algo así se necesita. De acuerdo, Así que todos ustedes y también podríamos mesa fila. Observe que nosotros tabla de visión, tenemos roles de mesa, ¿verdad? Entonces no necesitas atar los datos de la tabla de fila de la tabla cuando estés, voy a crear la clase para cordero, ¿verdad? Entonces podemos simplemente escribir un rol por ejemplo y columna, ¿no? Y como puede ver, creamos una tabla con una fila de tabla y un dato de tabla. Si queremos tener más columnas, simplemente podemos multiplicar, por ejemplo, columna por cinco. Y esto se puede ver ahora tenemos 1, 2, 3, 4, 5 datos de tabla. Si quieres más filas, entonces puedes multiplicarlo por 10, por ejemplo, ahora tenemos diez filas de tabla con cada una de ellas teniendo cinco columnas, ¿verdad? Bastante rápido. Y también se les nombra y por supuesto podrías, ya sabes, usar el signo de dólar con el fin de que cada fila tenga un valor diferente. Bastante impresionante, ¿no? Entonces eso es todo. Y también hay algo como esto. Podemos saber si quieres agregar un elemento en línea dentro del elemento en línea, porque E m es el elemento en línea. Y adentro adentro. Y no se puede poner bien el bloque, como def, derecho va con él no funcionaría correctamente. Por eso puedes hacer algo así como am EM, y por ejemplo, nombre del cristal. Y pondrá sólo el lapso dentro de decir va por ejemplo, la beta, ¿no? Porque también está en Irlanda y cualquier otro elemento en línea, ¿de acuerdo? No necesitas especificar que quieres poner este camino, si quieres saber poner dentro de B, m, entonces por supuesto necesitas ponerle nombre, pero de lo contrario no necesitas teclear esta bomba porque será el valor predeterminado que será adivinará qué tipo de tuck debe incluir. De acuerdo, Esa es sólo esa lección. Gracias. 56. Reglas para seleccionar etiquetas basadas en la importancia de la regla CSS: Hola amigo mío. El lácteo va a ser una situación en la que estás como si estuviera pasando la guerra. Por qué esta regla no está funcionando, por qué estoy haciendo todo correctamente y simplemente no puedo encontrar la manera de hacer que esta regla funcione. Y sucede porque, bueno, no sabes de esto de lo que vamos a hablar en esta conferencia sobre importancia prioritaria de las reglas cuando estás seleccionando cosas, ¿de acuerdo? Y esto es bastante similar a cómo funciona la cascada, pero esto es como, ya sabes, algo un poco más preciso porque lo que sabemos ahora que cuando creas un estilo aquí, ¿no? Y cuando accedes al tipo 1 y cuando cambias el fondo aquí, significa que esto es más importante que esta cosa de la fuente externa, ¿verdad? Eso es todo. Esto es más importante, ¿de acuerdo? Pero y si hago cosas similares aquí, ¿verdad? ¿ Qué pasará cuando haga autodiagnóstico creado tipo 1? Y ahora aquí cambié el color de fondo a azul, por ejemplo. Cuál debería elegirse días uno en este. Y como puedes ver, estos a y 0, quizá lo hagámoslo de esta manera. Ahora, se leerá. ¿ Por qué es así porque cuando se mira aquí, si la importancia prioritaria es igual, entonces lo que tenemos el selector que hace lo mismo, verdad? Y a esto se le llama selector de clases y es lo mismo. Tiene la misma importancia. Después se combinan las propiedades y las que ocurren posteriormente sobrescriben la anterior más adelante. Entonces significa que, oye, éste está más tarde en el archivo styles.css, entonces significa que el color de fondo va a ser rojo. Está bien. Y bueno, de lo contrario, no es el orden lo que cuenta, sino la importancia o significa, bueno, si tuviéramos aquí un selector de ID, así que por ejemplo, yo diré, Hey, ya sabes lo que no va a agregar estos va a ser bonito chico importante. Entonces voy a llamarlo así y quiero que definitivamente sea, por ejemplo, chocolate, ¿verdad? Y es chocolate. Este es chocolate y no importa ahora mismo donde toquen estos dedos, lo puedo colocar aquí, va a ser chocolate. Puedo colocarlo aquí va a ser chocolate. ¿ Por qué? Porque este es el selector de id y el ADC en la cascada. Qué cosa más importante después hay CSS en línea y más ligero hay características importantes. Entonces si hago algo así, ya sabes, lancé a este tipo para hacer, por ejemplo, tener el color de fondo para ser, no sé, consola. Ya verás que la señal de descuento, ¿de acuerdo? Y porque esto es lo más importante, pero si a veces tienen situaciones que podrías estar confundido e incluso estas no cambiarán el color, entonces es hora de usar algo llamado palabra clave importante, vale, el signo de exclamación importante y debe colocarse antes del punto y coma, ¿de acuerdo? Y esto es aún más importante, pero no, no lo hagas, por favor no lo uses. Si lo ves, sabrás por qué algo no está funcionando. Por eso te lo estoy mostrando. ¿ De acuerdo? Porque a veces podrías hacer todo correctamente aquí, ¿verdad? Y algo. Y esta regla no se aplica a la etiqueta de tu lado. Y luego eres como Qué está pasando, entonces probablemente sea hora de mirar HTML5 y buscar a la persona que hizo esto y, y, y arreglar ya sea una pista, buscar el, buscar el look para los dedos así, y arreglar lo quitando y haciendo todo bien. El archivo externo no mata a nadie. Estaba bromeando. Está bien. Entonces hay multivariante ¿qué es más? Porque, bueno, tenemos la etiqueta del cuerpo, ¿verdad? Y note que aquí hay algo así como la herencia. ¿Qué significa? Significa que se heredan algunas reglas que son como, por ejemplo, el carbón o la totalidad de la fuente. Entonces, por ejemplo, cuando escribo aquí y cambio de color o dos, algo así, significa que este color se va a heredar en cada etiqueta que está dentro del cuerpo. Es como cuando tenemos padre, madre, podemos llevar el color del ojo o las puertas grandes para ti. Pero, ya sabes, heredamos cosas de los padres y diff es un niño por cuerpo. Por lo que la boda es aparente para profunda y dv heredar cosas del cuerpo. No quiere decir que vaya a heredar cada regla porque algunas reglas no lo hacen. Si fueran heredados, sería una estupidez, ¿verdad? Pero cosas como el carbón o de esto, de la fuente. Es bastante buena idea, ¿verdad? Porque sería estúpido si tuviera que cambiar el color por cada tiempo posible. ¿ Verdad? Entonces no recuerdo cuál se hereda. Yo sólo pienso en mi mente, que es lo que sería una buena idea heredarla, ¿verdad? Entonces el color es una buena idea heredar VD por el nodo, por ejemplo, frontera alrededor del cuerpo sería estúpido heredar en div, ¿verdad? Porque todo más ligero tendría una frontera alrededor del, eso sería estúpido, ¿verdad? Eso, así es como recuerdas lo que se hereda o no. Y como puedes ver, es lo más alto aquí. Y también significa porque esta es la cascada, es la menos importante esa lista, no es importante, ¿verdad? Entonces significa que si usas el ataque selector, ¿verdad? Entonces si utilizas el Tipo 1 por ejemplo, y cambias al escritor erudito por algo a chicos como, por ejemplo, ladrillo de fuego. Notarás que el erudito para el tipo uno, la fuente ha sido cambiada, ¿verdad? Puedes cambiarlo por lo que quieras porque tal vez lo heredamos. Pero esto es más importante lo que digo en deck, selector de clases, ¿de acuerdo? Esto es más importante. El selector de clases. Entonces deselecto y en línea CSS y luego lo importante, Así que así funciona. También quiero mostrarte algo bastante impresionante. Observe que podríamos hacer algo así, escribir uno y escribir dos años. Entonces es, es, es bastante bien reembolso porque vamos a clase puede tener dos valores gratis 45 días hasta que usted. Y ahora hay un problema. Como puedes ver, tenemos tipo 1 y tipo bien, porque hemos tenido Tipo 1, Tipo 1, y Tipo 2. Entonces lo primero que pasa es que estamos conectando lo que está combinando, lo que no está presente en todos ellos, ¿verdad? Entonces Kohler va a estar como, ya sabes, en esto y esto ahora mismo. Entonces tenemos el color índigo, eso es seguro. Entonces después podemos ver que tenemos buen tipo uno, que tiene el color de fondo azul, después tenemos el color rojo, y luego tenemos el verde, que es el tipo, que es el color de fondo que estos últimos en este CSS apretado, es éste, ¿verdad? Entonces por eso, como puedes ver, el color de fondo es verde jazmín. Dijimos que esto va a ser verde deslumbrante. Si cambiamos el orden así, entonces significa que éste es el último y hemos llegado aquí leer, vale, en el tipo 1 y tipo 2. Entonces el orden es lo que importa cuando tenemos la misma prioridad, derecha, una, porque usamos el selector de clases En ambos casos. Así funciona. Y tal vez te estés preguntando, ¿cómo puedo recordar todas estas cosas? Bueno, imagina que estás programada procesador en este momento. Es algún tipo de programa de análisis. Eres un programa, ¿de acuerdo? Entonces si eres una computadora y estás analizando las cosas que se escriben aquí, estás leyendo cosas de arriba a abajo ¿verdad? Y tú estás como, de acuerdo, así que necesito cambiar el color de fondo a azul. De acuerdo, cambié el color de fondo del tableau de diseño. Qué más tarde, necesito cambiar el color de la fuente a índigo, OK, y hacerlo. Y luego, oh, hay uno o dedos así y necesito cambiar el color de fondo a rojo ahora. De acuerdo, Así que me cambio de azul a rojo. De acuerdo, entonces tengo la clase tipo dos. De acuerdo, Así que necesito cambiar el color de fondo a verde, vale, entonces lo cambiaré a verde porque es más tarde, ¿verdad? Es así como lo recuerdas porque es la computadora analiza todo de arriba a abajo. ¿ De acuerdo? Entonces lo último siempre es lo más importante, pero sólo si tenemos el mismo selector. Te digo que lo hicimos de nuevo porque o usas, por ejemplo aquí, muestra del IID, ¿verdad? Y lo elijo por muestra. Esta cosa es lo más importante ahora mismo. Podemos cambiar el color de fondo a un ligero golpe de cielo, ¿verdad? Y como puedes ver, es celeste claro. Pero lo puedo poner en la parte superior de tu style.css, Todavía va a ser celeste claro es porque como dije, si la prioridad es sólo igual, entonces se combinan las propiedades y las que ocurren posteriormente sobrescriben la anterior. De lo contrario, no es el orden que las latas, sino la importancia. Y aquí solo hay una pista. Cuanto más precisa sea la elección, mayor será su valor, ¿verdad? Observe que la herencia es algo que puede cambiar más adelante en su vida. Si eres estúpido, entonces puedes si eres paras peor, físicamente puedes llegar a ser inteligente. Ya sabes, algunas cosas no se pueden cambiar. Por ejemplo, color de los ojos, ¿verdad? Pero algunas cosas se pueden arreglar. Entonces después cuando tengamos la etiqueta selector, esto es más preciso, ¿verdad? El selector de clases es más preciso, selector de id es aún más preciso. CSS en línea más preciso, importante, estos más precisos. Entonces, cuanto más preciso sea algo, más importante, mayor será su valor. Y lo que la regla que se va a aplicar es la que es más precisa. Es sólo esa lección. Espero que ahora entiendas los problemas de cada creador de CSS. Muchas gracias. 57. Práctica de selector: Hola a todos. Es hora de practicar. Recuerda que el DV quiere ser alguien que cree sitios web. Simplemente no puedes ver los videos, como en piloto automático. Acabas de desollado mirarlos y no practicas. Necesitas practicar lo que ves porque lo contrario no recordarás todas estas cosas. Hay muchas, muchas cosas nuevas que vienen clase edad y necesitas practicarlas. Haz al menos lo que hago en la conferencia. Juega con selectores, juega con el impuesto, recuerda al respecto. Entonces esta es una especie de conferencia recordatoria. ¿ De acuerdo? Quiero que creéis una mesa que hice aquí. De acuerdo, hazlo manualmente, también solo. Y puedes copiar la parte selectores desde aquí al intentar crear una descripción de cada selector por tu cuenta. De acuerdo, entonces puedes comparar con lo que está aquí y ver si entiendes, vale, El primero libre es bastante simple. Cuando escribes la P aquí, solo vas a seleccionar qué cada párrafo. Entonces cada párrafo, que está, por ejemplo, dentro de este div o dentro, por ejemplo, etiqueta de cuerpo, ¿verdad? Siempre que sea, lo vas a seleccionar y puedes cambiar el color de los párrafos. Hacer por ejemplo rojo. Y como puede ver, nos referimos al n. Estos son rojos porque son párrafos, ¿verdad? Podemos verlo claramente también cuando se utiliza el inspector. Y podemos ver que este es párrafo este párrafo este párrafo no es párrafo, este párrafo. Está bien. Ahora, vamos a seleccionar todos los elementos. Esa clase es f2. Entonces para seleccionar solo a los chicos para los que está la clase, necesitamos usar el punto, ¿verdad? Y significa que vamos a seleccionar para qué sirve la clase, y no nos importa si esta clase Foo está dentro del párrafo o D. No importa. Acabamos de decir, hey, selecta clase foo, eso es todo. Y como puedes ver, funciona así. Si queremos seleccionar solo párrafos, recuerda que debes especificarlo antes de los datos. Por lo que necesitas escribir la potencia nuestra gráfica aquí, derecha, la etiqueta p aquí. Y ahora, como pueden ver, seleccionamos sólo los párrafos. Quitarlo. Vamos a seleccionar el div y los párrafos, vale, porque este es un div con la clase foo. ¿De acuerdo? Si quieres seleccionar todas las alineaciones, esa ID es igual a, tú, solo usa el hash, ¿de acuerdo? Esto es bastante sencillo, así que no lo vamos a hacer. Y aquí hay algo que permite seleccionar todos los elementos que son profundos y estar al mismo tiempo. Entonces si tomas el dolor, como puedes ver, vamos a seleccionar todos los elementos porque, bueno, la verdad es que P está dentro de div, pero no importa, ¿verdad? Porque vamos a seleccionar D y P cuando sea, ahora mismo. No obstante, si eliminamos la coma, notarás que seleccionamos sólo párrafos que están dentro, que están dentro de la, esto es importante. La diferencia bastante grande. Por lo que esto permite seleccionar el final B y aplicar la regla aquí. No obstante, cuando lo haces así, significa seleccionar todas las p que están dentro del if y solo dentro del div. ¿ De acuerdo? Entonces éste, éste, éste en absoluto. Esto no está dentro del si este párrafo dentro del cuerpo, ¿verdad? Así funciona. Y si lo cambiamos a, por ejemplo, dot foo, se selecciona solo elementos. Esa clase es igual a 4, pero están dentro de la muerte. Deben estar dentro de la derecha. Entonces si agrego aquí clase foo, estos no serán seleccionados, pero esto, esto, esto, y esto se seleccionará. Como puedes ver, es a través. Está bien. ¿Qué más tenemos? Como se puede ver, podemos especificarlo. Podemos decir eso, oye, solo quiero párrafos dentro del div que tiene la clase foo. Por lo que significa que esto no será seleccionado ahora, pero esta y esta rueda, como se puede ver, es a través. Entonces así funcionan estos selectores básicos. Pero tenemos aquí también algo así como seleccionar todos los elementos de lado, que es el signo de asterisco, vale, el signo de multiplicación. Vamos a usarla. Entonces cuando haces cosas así y dices color rojo, notarás que todo es rojo ahora mismo. Y bueno, para ser honesto, este no es sólo el lugar donde se utiliza. Observe que cuando hacemos algo como esto. Por lo que seleccionamos sólo la clase foo dentro de la derecha. Por lo que seleccionamos en esto, esto y esto. Para ser honesto, aquí hay algo así como el asterisco. Significa seleccionar todos los elementos. Esa clase es igual a foo. Y esto es, se puede ver que nada ha cambiado, ¿verdad? Esto funciona igual, como si está ahí o no. Pero bueno, porque esto es tan frecuente operación cuando se utiliza el CSS que la gente decidió que se puede omitir. ¿De acuerdo? Entonces no necesitas ponerlo aquí, ¿verdad? Pero si alguien usa es bueno saber lo que está pasando, correcto. Porque si hubieras visto algo como esto y yo no dije que lo hicieras, algo así existe. Te sorprenderás de no saber cómo funciona, ¿verdad? Entonces ahora sabes que esta cosa selecciona cada alineación posible, ¿verdad? Y cuando lo uses con la clase va a decir cada elemento posible, pero necesita ser igual a esta clase. Y también en este caso, necesita estar dentro del div, ¿verdad? Pero no necesitamos usarlo, ¿verdad? Se puede omitir. Eso está todo en esa lección. Gracias. 58. Borde de elementos: Hola, amigo mío. hoy te mostraré cómo agregar borde en elementos de tu lado, como por ejemplo, div o tabla que vamos a añadir borde hacer en el futuro. Por lo que para agregar un borde, es necesario especificar su tipo. Línea Dharma que punteó, punteado, sólido doble surco, entros y outs de cresta en y así sucesivamente. Cuando utilizas el espacio Control más, claro que entras y obtienes algunas pistas de lo que puedes elegir, ¿verdad? Por lo que no necesitas memorizarlos, pero es bueno ver al menos una vez todos ellos en un solo lugar, porque te permitirá elegir uno de ellos cuando necesites de la derecha. Por lo que es bueno verlos todos a la vez. El problema es que debido a que eliminamos el margen aquí, deberíamos agregar margen dentro de nuestros elementos que son diff. Entonces vamos a añadir un espacio que va a ser igual a 10 píxeles entre cada div y todo nuestro cuerpo. Y como puedes ver, agregamos un margen usando esta regla y ahora es más fácil analizarla. Entonces como puedes ver, cuando agregamos el salado, tenemos aquí un hierro sólido. Cuando usamos el punteado, tenemos puntos a la derecha o frontera discontinua. Tenemos guiones, doble línea, tendremos el gráfico de doble línea se ve como este inverso de grupo se llama el alcance. Y se parece a este inicio de inset. Y por supuesto, puedes mezclar las cosas, lo cual no funcionó porque no agregué aquí el estilo. Como se puede ver. Ahora, tenemos aquí, los guiones aquí, tenemos en el crecimiento inferior para que puedas mezclar las cosas, ¿de acuerdo? Pero no es todo lo que se puede hacer con fronteras porque, bueno, se puede establecer frontera específica, obtiene y se establece, por ejemplo, izquierda de la frontera para que se lea. Y se puede, simplemente no se puede establecer ninguna otra frontera. Como se puede ver, sólo hay frontera en el lado izquierdo. Y lo usamos como decoración lo que demuestra que se trata de mensajes de texto importantes, como por ejemplo, una definición, ¿no? Entonces aquí hay una frontera que también cambiamos el color. Entonces, ¿cómo hacer esas cosas? Vamos, por ejemplo, a quitar esta cosa de aquí. Y note que cuando tipeo frontera, tenemos aquí muchas pistas. Y podemos elegir desde aquí algo así como arriba, izquierda, Derecha, Y botón. Y permite cambiar la frontera específica derecha, arriba, derecha, abajo, e izquierda. Entonces podemos establecer, por ejemplo, borde inferior dos Como y por supuesto, el estilo a algo así como, por ejemplo, insertar. Y te darás cuenta de que ahora aquí, así que aquí sólo tenemos frontera en la parte inferior, derecha, no en todas partes. Si quitamos la palabra inferior, notarás que la tenemos buena en cada lugar en la parte superior, derecha, inferior, e izquierda. Pero podemos especificar qué estilo desea establecer. Eso es lo primero. También puedes establecer el color para ello. Entonces puedes decir algo como borde, guión y fondo y bueno, y no queremos sentarnos esta vez ahora, pero podemos establecer la columna y podemos fijar aquí, por ejemplo, el color como el chocolate. Y como pueden ver, tenemos bien aquí, el cambio de color. También podemos cambiar el ancho de la frontera Bolton. Entonces podemos cambiar lo grande que va a ser su frontera. Entonces, por ejemplo, podemos establecerlo en 10 píxeles. Y como puedes ver, son 10 píxeles, es un poco más Vk, ¿verdad? El WAF ha cambiado. El problema de la solución como esta es que realmente escribimos muchas cosas por solo especificar el fondo del borde de esta clase, ¿verdad? Ahí hay cuatro. Bueno para nosotros, algo así como una propiedad de caza corta para establecer la frontera. Como puedes ver, primero necesitas escribir el ancho, luego el signo, y luego la columna. Por lo que sólo usamos el color aquí. Y luego necesitamos escribir el ancho, por lo que 10 píxeles. Entonces necesitamos escribir qué estrella va a ser. Entonces en nuestro caso está inset. Y luego necesitamos teclear el color. Entonces en nuestra situación es el chocolate. Entonces ahora sólo podemos quitar esto, y esto es realmente, esto es igual a esta cosa de aquí. Pero ten en cuenta que no agregué botón aquí. Y por ello, vamos a fijar todos estos valores a cada frontera de arriba, a la derecha, abajo, y a la izquierda. Entonces si quieres decir, oye, Isla, para elegir solo fondo, y entonces voy a decir un fondo fronterizo. Y ahora, como pueden ver, cambiamos sólo la parte inferior de la La cosa aquí, como pueden ver, lo uso aquí para establecer el borde izquierdo en 50 píxeles, y luego cambio el color de fondo. Y por ello, esto parece que son textos más importantes, ¿verdad? Tiene esta cosa roja aquí a la izquierda, que es una frontera, ¿verdad? Entonces esto es, esto puede ser bastante útil. Observe también que se puede cambiar el ancho de nuestros bloques así, ¿verdad? Y se va a quedar mejor cuando lo hagas. La mayoría de las veces cuando no hay suficiente texto, ¿verdad? Por lo que es buena idea recordar al respecto. Se pueden hacer esas cosas. También es bueno saber que, bueno, notar que cuando ponemos la frontera así, así que a todo, podemos quitar, por ejemplo, estos y éste usando qué frontera. Y queremos elegir la parte superior, después el estilo, y podemos ponerlo en ninguno. Como se puede ver, quitamos el borde superior. Ahora. Podemos quitar el estilo de la frontera. Borde, estilo correcto a tampoco ninguno. Y como pueden ver, le quito también el lado derecho. Recuerda que es muy, muy importante qué orden escribes todas estas cosas porque Eve, partimos de esto y luego agregamos la frontera. Notarás que no quitamos nada. ¿ Por qué es eso? Entonces es porque el CSS se sube, se interpreta de arriba a abajo a la derecha. Entonces cuando estemos en este selector específicamente, computadora lo leerá. Se necesita quitar la frontera en la parte superior de la derecha. Y entonces lo leerá. Necesita agregar el borde arriba a la derecha, abajo a la izquierda, derecha. Entonces simplemente no hicimos nada de lo que quisiéramos hacer. Entonces esta conferencia también es importante no sólo porque aprendiste lo que es frontera, sino que necesitas recordar en qué orden pones las cosas porque a veces podrías estar como, ¿por qué eso no funciona? No está funcionando porque pones las cosas fuera de orden. Esto es bonito, bastante importante. También es bueno para nula. Bueno, vamos a comentar que cuando estás configurando el estilo de borde, puedes poner aquí el valor uno y el valor dos. ¿ De acuerdo? Entonces significa que, bueno, podrías escribir algo así como, gracias, Eso es genial. Otra definición, definición dos. Y note que cuando escriba estilo de borde, por ejemplo, sólido, vamos a tener miedo todo sólido. Pero cuando lo hago sólido. Y luego por ejemplo, hombre, como puedes ver, tenemos bueno en la frontera en la parte superior e inferior. ¿ Por qué es así? Porque si pones solo, si pones más de un valor, entonces el valor uno se va hacia arriba, efecto la parte superior e inferior. Y el valor 2 va a afectar a la izquierda y a la derecha. ¿ De acuerdo? Entonces si tecleamos aquí puede haber algo diferente como ranura sólida, entonces va a tener sólido aquí y groove en el lado izquierdo. Para que puedas mezclar las cosas, ¿verdad? Pero también, es bastante útil simplemente quitar, por ejemplo, a la izquierda y a la derecha. Observe que cuando hacemos cosas como ahora nosotros, por ejemplo, 500 píxeles y luego con texto nos alineamos, así que centramos el texto dentro de ahí, si se verá bastante cool, ¿verdad? Porque tienes un mensaje importante y tiene buenas fronteras en arriba y abajo muertos, como SAS que es importante, ¿verdad? Porque sin ellos, ni siquiera te darías cuenta de estos escritorios, ¿verdad? Pero ahora es más fácil notarlo, ¿verdad? Por lo que las fronteras se pueden utilizar para la decoración, pero también para asegurarse de que la persona que está leyendo los textos vea el texto, ¿no? Nosotros sólo importamos para él. También hay una cosa más que los regañen. Reloj o rol. Observe que podemos ponerle más valores como libre de valor y valor cuatro. Y entonces el valor uno es responsable de la parte superior. El valor 2 es responsable del derecho. Al igual que el reloj va derecho al, va de arriba a derecha, ¿verdad? Va en la dirección correcta. Entonces va primero arriba, derecha, luego el valor f3 es igual al inferior, y luego el valor cuatro es igual a la izquierda. Entonces podríamos establecer algo como sólido ninguno, ninguno, ninguno, ¿verdad? Entonces significa que vamos a tener sólo el sólido en la parte superior. Otras cosas se van a quitar por Kiel, ¿verdad? Y podemos, por ejemplo, establecer, digamos que queremos comer a la izquierda y abajo a la derecha. Entonces, ¿cómo haría esto? Tenemos que tener sólidos aquí y aquí, ¿verdad? En otros lugares, queremos tenerlo ninguno. Entonces ahora es así. Entonces puedes decidir qué estilo se va a presentar o cuál no va a estar presente, ¿verdad? También puedes decir ahora algo así como, vamos a cambiar la frontera. Izquierda, carbón o dos, por ejemplo, carmesí, ¿verdad? Y como puedes ver, cambiamos el color a todos estos tipos de aquí. Y también recuerdan que el orden importa ¿verdad? Cuando lo hagamos así, esta vez va a funcionar porque después no cambiamos el color, ¿verdad? Pero si hicieras cosas como color de borde y cambiaras el color a, por ejemplo, negro, ¿verdad? Observe que porque cambiamos todo a negro y luego las dos reinas izquierdas, y luego la izquierda va a ser cremas en mal cuando lo ponemos aquí, ¿verdad? Como pueden ver, no pasó nada porque cambiamos el borde izquierdo a Carmesí, pero después cambiamos cada frontera a bloquear. Recuerda lo de la orden, vale, esto es bonito, bastante importante. Eso está todo en esa lección. Como ejercicio, tratar de jugar con todas estas cosas que has aprendido en esta conferencia es buena idea jugar con él porque entonces lo recordarás mejor. Entonces intenta crear una definición que el tipo tenga, por ejemplo, diferente color en el lado izquierdo. Y tal vez hacer un botón de borde que sea un poco más estrecho. Escríbelo para que no sea tan grande como este. Entonces tal vez diferente, ¿verdad? Eso está en la lección. Muchas gracias. 59. Esquina redonda: Hola a todos. Cada esquina, que se ve así, que está cuadrada a la derecha hacia abajo, puede redondearse. Para hacerlo, necesitamos usar la regla que se llama radio de frontera. Entonces nos gusta el radio fronterizo y luego escribimos, por ejemplo, 10 por ciento, lo que significa que queremos tenerlo alrededor en un 10 por ciento. Y como se puede ver, todas las esquinas están redondeadas en un 10 por ciento. Pero creo que en este caso, es mejor usar, por ejemplo, píxeles. Y luego te darás cuenta de que, de acuerdo, corremos el DEM por 10 píxeles y como puedes ver, tienen bastante mejor aspecto. El primero que notarás probablemente es que este radio fronterizo no es colecta conectado a frontera izquierda, derecha. cuenta que podemos quitar borde y aún así esta caja va a ser redondeada para que no necesites usar bordes, ¿verdad? Incluso toda la caja o así con el fin de tenerla redondeada. ¿ De acuerdo? Esto es bastante importante, lo que significa que puedes, por ejemplo, crear entradas gratuitas y luego obtener dos entradas. Y luego, por ejemplo, establecer el radio fronterizo para ellos. Nosotros apenas 10 píxeles. Por defecto. Veamos cómo se ve. Como se puede ver, así es como se ve en cómo se ve la entrada. Pero cuando añado el radio fronterizo, tienen aspecto diferente, aspecto bastante cool. Podrás crear tu propio insumo. ¿ Cómo se verán, cómo se verán? Es buena idea agregar algún margen. Entonces hay algún tipo de espacio entre ellos, ¿verdad? Como pueden ver, hemos corrido las entradas son suficientes. ¿ Cuándo SE PUEDE usar también algo así? Vamos a crear una clase que se llamará, por ejemplo, pista. Y digamos que aquí es importante pista como esta. Y vamos a actuar como la pista. Y ahora nota el fin de semana hacer algo así como, por ejemplo, color de fondo. Cambiemos el color de la pista. Por lo que se ve muy mal. Ahora, hagámoslo 300 píxeles así. Entonces vamos, vamos, por ejemplo, textos alineados al centro. Y como puedes ver, ahora está centrado. Y ahora haremos de Deb la longitud del radio del borde, por ejemplo, 10 píxeles. Como puedes ver, se ve mejor. Pero aún así. Hagamos algo que aprenderemos en el futuro, que se llama relleno. Y pongamos en ciernes, por ejemplo, 20 píxeles. Como se puede ver, se agregó el relleno. Al fondo en la parte superior e inferior se le agrega el espacio que es igual a 20 píxeles en este momento. Y entonces esto realmente parece una pista importante, ¿verdad? Dice terreno desnudo y también ha acorralado las esquinas redondeadas, ¿verdad? Cuando quito el radio fronterizo, se ve raro. Ahora mismo. Se ve mejor. No obstante, podemos hacerlo aún mejor. Una mirada, aún mejor. Mira, puedes poner aquí el valor como 10 pixels, pero lo que pasará en nuestro anuncio aquí, el segundo valor como 15 pixels, tenemos banana. ¿ Qué pasó? Observe que 10 pixeles afectados ¿qué? Izquierda esquina superior y derecha, esquina inferior, derecha. Y 50 pixeles afectaron su esquina superior derecha e izquierda esquina inferior. De acuerdo, Entonces así es como funciona. Aquí podemos decir que cuando escribes algo como esto, significa que el primer valor va a afectar la esquina superior izquierda y la esquina inferior derecha, derecha. Cuando bucees el valor dos, vas a afectar la esquina superior derecha y la esquina inferior izquierda. ¿De acuerdo? Eso no es todo. También puedes hacer algo como esto. Entonces si escribo algo así, esto es igual a esto. Nuevamente, esto es igual a sinfonía. Esa fecha es igual, vale, es la misma. Lo que significa que cuando escribes algo así, volumen número uno está a la izquierda esquina superior, justo aquí. ¿ Es esa esquina superior derecha? ¿ Cómo recuerdo esto? ¿ Soy tan bueno? Tan bueno. Precios, cosas así. ¿ Tengo un texto debajo de mí? Sabes, solo uso el orden del reloj en el sentido de las agujas del reloj, ¿verdad? Porque note que esta es la esquina superior izquierda, luego la esquina superior derecha, ¿entonces qué? El rincón inferior derecho, a la derecha. Entonces el valor para la fuerza es igual a la esquina inferior izquierda. Así funciona el reloj, ¿verdad? 0, 0, 0, 0. Y lo genial de esto es que podemos, por ejemplo, establecer uno del valor dos, por ejemplo, 0, 0 píxeles. Y ahora nota que obtenemos algo como esto, ¿verdad? Por lo que esto se redondea un poco, esto se redondea mucho. Estos redondearon un poco. Y aquí tenemos jazz la esquina cuadrada, ¿verdad? Y creamos nuestra pista personalizada. Eso se ve bastante guay, ¿verdad? Es así como se puede cambiar el radio de la frontera. Sólo hay esa lección. Muchas gracias. 60. Tablas y padding: Hola amigo mío. Esta mesa de aquí se ve horrible ahora mismo. Vamos a mejorarlo usando el CSS. Para seleccionar mesa, solo necesitamos bucear en horas aquí esta mesa. O si quisieras ponerle nombre, podrías usar el IV, ¿verdad? Y así me dan un paseo como este. Pero queremos seleccionar cualquier mesa que tengamos de nuestro lado, por lo que no vamos a añadir el ID. Por lo que tenemos tabla selecta y ahora es el momento de agregar, por ejemplo, un borde como este borde blanco que es solo un píxel. Y como puedes ver, tienes frontera alrededor de nuestra mesa. Está bien, todo funciona bien. Pero el primer problema es que no tenemos el espacio entre nuestra página web en el lado izquierdo y estas partícula, nuestra mesa. Entonces para cambiarlo, vamos a sumar el margen diez píxeles. Entonces esto se ve mejor, ¿verdad? Podemos ver claramente que aquí tenemos una frontera. Ahora, vamos a agregar, por ejemplo, borde dentro de cada datos de tabla. Entonces hagámoslo así. Un píxel negro sólido. Y notarás que hay un problema porque cada dato de tabla tiene su propia frontera, ¿verdad? Y para ser honesto, no se ve bien, ¿verdad? Sería genial que esta frontera del lado derecho se conectara a esta frontera por fuera. Si, si de alguna manera pudiera conectarse, colapsarse entre sí, sería genial. Y hay una regla que se llama colapso de fronteras, que por defecto se establece para separarse, lo que significa que no están conectados. Pero cuando lo cambias para colapsar, como puedes ver, hemos conectado el borde de los datos de la tabla a cualquier otro borde y ahora se ve mejor, ¿verdad? Definitivamente mejor, pero aún no es bueno. Ahora es el momento de agregar un espacio entre lo que, entre el texto, el contenido de los datos de cada tabla, y el borde que lo rodea. Y este espacio entre el contenido y el borde se llama relleno. Acolchado. Por lo que hay una regla que se llama relleno y se puede agregar, por ejemplo, 10 píxeles son por ejemplo, 15 píxeles entre el contenido y el borde de estos datos de tabla. Y como puedes ver, ahora definitivamente se ve mejor. Podemos morder cambiarlo al 100%. Puedes ver aquí necesitamos restablecer el Zoom. Entonces ahora se ve así o esto definitamente luciendo mejor que cuando no tenemos relleno, ¿verdad? Observe que cuando utiliza las Herramientas de Desarrollador Web y cuando uso el Cambio de Control más I o j en el navegador web, puedo seleccionar cada elemento. Y como puedes ver aquí en el color morado, tenemos buen relleno. Y como puedes ver, el manchado está alrededor de lo que el contenido, ¿no? El contenido es ahora mismo seleccionar todos los elementos nombrados b. Y este es este texto, ¿verdad? Y cuando muevo el ratón aquí, como pueden ver, lo hemos seleccionado. Cuando me mudo aquí, tenemos aquí un relleno, ¿verdad? Esto es sólo una especie de espacio extra entre el texto y el borde. Y es bastante necesario porque de lo contrario, esto sólo se ve mal. Ahora es el momento de cambiarlo un poco más, por ejemplo, quitando, quitando la frontera de todos. Observe que, oye, acabamos de perdonar, esto se ve bastante bien. Pero había, sería bueno si hubiera algún tipo de separación entre cada fila, ¿no? Entonces, sólo elijamos la mesa o todo. Y agreguemos el borde justo en la parte inferior de cada fila de tabla, ¿verdad? Al igual que un bloque sólido de un píxel. Y ahora te darás cuenta de que esto se ve bastante bien, ¿verdad? Hemos separado cada fila de mesa y no hay solo sobrecarga aquí, ¿verdad? Al igual que por ejemplo, el borde izquierdo, el borde derecho. Creo que ahora se ve mejor. Y esto es bastante importante saber que aquí hay que usar el colapso fronterizo. Observe que cuando lo quite, Simplemente no trabajamos. Cuando agregué por, funciona bien. Por lo tanto, recuerda acerca de agregar colapso de borde para poder incluso crear un borde dentro de las filas de la tabla. De acuerdo, así es como funciona. Creo que también deberíamos elegir, por ejemplo, el título. Eligamos la mesa th. Por lo que seleccionamos el encabezado de la tabla. Y hagámoslos un poco más grandes, ¿verdad? Al igual que por ejemplo, tamaño de fuente 24 píxeles. Como puedes ver, ahora son más grandes. Por lo que podemos ver claramente que se trata de encabezados. Podríamos establecer para ambos, el peso de la fuente demasiado audaz, por lo que están en negrita. No sólo estos un paquete, así que el de arriba, bueno, tal vez no, tal vez esto es mejor. Entonces así es como puedes cambiarlo bastante rápido. Aquí puedes cambiar los colores, puedes cambiar el color de fondo también, por ejemplo, yo no lo corte azul y el color de las cosas que se escriben a Carmesí. Y como puedes ver, ahora se ve muy mal. Recuerda que cuando quieras elegir colores, debes intentar elegirlos de la trama. Entonces es mejor usar la talla como esta, ¿verdad? Tienen esquemas de color y eligen los colores en consecuencia a partir de aquí, ¿no? Porque como se puede ver, por ejemplo, en naranja. Entonces en el color de fondo como este, es bueno tener el color así, por ejemplo, ¿verdad? Por lo que no puedo decirlo así. Y esto va a quedar un poco mejor ahora. Todavía no se ve muy bien. Es porque para ser honesto, debes cambiar el color de los roles de mesa, ¿verdad? Entonces cambia el color de estos en este, éste. Y éste debe ser de color diferente o debe haber alguna diferencia entre ellos para que sea lo bueno, para poder hacerlo, que aprender de cosas que se llaman pseudo selectores, pero vamos a aprender sobre ellos en el futuro. Entonces por ejemplo, ten en cuenta que solo te voy a dar una muestra cuando tenga tu tabla, datos de tabla, Digamos que quiero que todos estos tipos se pongan en negrita, pero sólo por sólo esos datos de tabla que es primero, ¿verdad? Esta no. Sólo éste. ¿ Cómo elegirlo? Tenemos una mesa, 2 D, así que vamos a la mesa, luego vamos a 2D. Y los tenemos a ambos. Yo sólo quiero este. Para tener solo estos son ustedes usan el colon aquí y luego usan el primer pseudo alineamiento infantil. Y de esta manera cambiamos solo al primer tipo. ¿ De acuerdo? Entonces hagamos cosas como mesa al primer hijo de TD. Porque aquí sólo estamos cambiando el relleno, ¿verdad? Entonces, um, pero queremos tener relleno para ambos como el mismo. Pero queremos tener el peso de la fuente negrita en el primer gráfico. Por lo que puedes ver ahora estos tipos están atrevidos, pero también es sería mejor. Siguió incluso en la tabla los datos de primer hijo se atrevieron, ¿verdad? Estará luciendo mucho mejor, pero aprendemos cosas así en futuras conferencias. Sólo hay una docena. Gracias. 61. ¿Cómo crear un menú horizontal Estados de enlaces: enlace, visitado, alto, activo: Hola amigo mío. Hoy es hora de qué, para, cómo mejorar el aspecto de nuestros anclas. Entonces los enlaces, vale, vamos a crear un menú usando algo llamado estados de los elementos de tu lado. ¿ De acuerdo? Entonces, primero usemos el ancla y accedamos, por ejemplo, a estas imágenes cayendo, ¿verdad? Y por defecto, el enlace se ve así. Y es azul. ¿ Por qué es eso? Es porque es lado no visitado. No obstante, cuando hago clic en él y luego vuelvo, ahora es morado es porque el estado ha cambiado a visitado. De acuerdo, entonces tenemos dos estados. Uno es enlace, el segundo es visitado. Enlace es simplemente invisitada forma predeterminada cómo se ve el enlace. Y podemos acceder al estado. ¿ Cómo accedemos a ella? Para acceder a ella, escribimos el nombre del ancla y luego escribimos la visita. ¿ De acuerdo? Y también buceamos el enlace igual. Y ahora podemos cambiar cómo se ven cuando algo se visita o no. Entonces cambiemos. En primer lugar, lo visitado porque donde tenemos bueno ahora solo visitamos en Q. Así que cambiemos el color para vivir. Por ejemplo, marrón. Como puedes ver, ahora es marrón, ¿verdad? Por lo que cambiamos el comportamiento por defecto. Vamos a crear otro enlace. Y vamos, por ejemplo, enviarlo a financiar una piedra cortada medius. No tenemos un pagado como este, pero no está visitado en nuestro navegador web en este momento porque nadie ha hecho clic en él. Y como puedes ver, es azul. Y podemos cambiar también la cantidad de estado estacionario no visitado a, por ejemplo, conozco aqua, como pueden ver, ahora es aqua. ¿ De acuerdo? Entonces así es como cambias la forma en que se ven cuando algo se visita o no, ¿verdad? También hay algo llamado se llama a y luego el hover. Y esto es bastante guay porque este estado es realmente un estado al que se puede poner en casi cualquier ataque. Y es sinónimo de mano sobre. Entonces cuando mueves la mano para mover el ratón sobre algo, esto debería suceder. Esto es bastante guay. ¿ Por qué es así porque el estado invoca cuando mueves el ratón sobre el enlace. Por lo que podemos crear algún tipo de animación que esta instancia. Entonces solo se va a mostrar al instante, ¿verdad? Y digamos que sólo vamos a cambiar el color a, por ejemplo, digamos así. Y como puedes ver ahora cuando movemos nuestro ratón sobre el enlace, algo sucede como esto, por ejemplo. Y puedes hacer realmente lo que quieras. Se puede cambiar la llamada de tierra del bar o escribir. Y usaremos lo viejo, lo más antiguo pronto para que esto se vea mejor. ¿ De acuerdo? No obstante, hay un estado más del que quiero hablar cuál está activo. Y como su nombre indica, va a invocar cuando el enlace esté activo. Pero cuando el enlace está activo realmente. Bueno cuando hagamos algo así como cambiemos el color a violeta azul. Por lo que es fácil de notar. Cuando muevo el ratón sobre, el enlace no está activo, escuchar está activo cuando hago clic en él, como puedes ver. Y este es sólo el momento en que se hace clic en él. De acuerdo, entonces es difícil de ver. Vamos a tal vez sepan algo, cremas y cambiemos el color de fondo para rentar. Como puedes ver, esto ocurre sólo cuando hago click, click izquierdo y ya sabes, hago click izquierdo y ya sabes,muevo el ratón aquí. Por lo que esto sigue en el modo activo, pero solo no se desactiva. Como puedes ver, sólo cuatro milisegundos cuando haces clic en algo, ¿verdad? Por lo que esto es cuando el enlace está activo. Por lo que hay cuatro estados como este. Y ahora podemos usar este conocimiento para hacer algún tipo de manual. ¿ De acuerdo? ¿Cómo lo vamos a hacer? El primero es que debamos quitar estos textos declaración a continuación ahí. Enlace, este subrayado aquí realmente no se ve bien, ¿verdad? Entonces vamos a acceder a algo o simplemente llamado el papel de decoración de texto. Y tenemos que cambiarlo a ninguno. No queremos verlo. Como se puede ver. Hacemos click en imágenes divertidas, ¿verdad? Entonces, ¿por qué desapareció también en el estado no visitado? Esto es porque la texto-decoración se hereda en estos estados aquí, ¿de acuerdo? No obstante, no es para todas las demás cosas. Cuando cambio, por ejemplo aquí a color aqua. Sólo cambiará la visa en el enlace no visitado, ¿verdad? Entonces para ser honesto, quiero seguir agregando, lucir igual como un visitado. Entonces, ¿cómo haría esto? Entonces cuando normalmente necesitaría hacer algo como esto, ¿verdad? Pero si me detuve, empiezo a escribir algo aquí. También necesito hacerlo aquí. Eso no es bueno. Por eso vamos a usar el selecto múltiple o así, ¿no? Y ahora cuando tecleemos algo aquí, va a afectar este y este estado al mismo tiempo. Ahora no necesitamos preocuparnos por nada. Entonces, de acuerdo, vamos, por ejemplo, cambiar el color a blanco. De acuerdo, así. Pero también necesitamos cambiar el color de fondo para que sea un poco visible y voy a usar el colon 059555. Este es un color verde como este. ¿ De acuerdo? Y puedes elegir, por supuesto, el color a partir de aquí. Elegí estos antes, por lo que se ve bien. ¿ De acuerdo? Y ahora cuando tengamos un color de fondo, notarás que lo que los enlaces son realmente un elemento en línea, ¿verdad? Entonces cuando no puedo cambiar el ancho, puedo cambiar la altura del elemento. Y también hará que el relleno ladró un abalorio. Observe que cuando uso el popping con el fin de crear un espacio entre el borde y el texto. Tenemos el polígono izquierdo, derecho y lado inferior, pero no hay relleno en la parte superior. Y qué pequeño. Observe que cuando hagamos algo como esto, así pongo todo en el div y cuando lo copie una vez más, vamos a tener cosas divertidas. Es porque, bueno, hemos llegado aquí por defecto display configurado en línea, y así es como funciona con el relleno. Esto es un poco negociador. Pero cuando lo cambiemos a blog, Va a quedar mejor, pero bueno, no queremos tener enlaces por todo lado. Queremos tener algo mostrará inline-block, ¿verdad? Por lo que están en línea, pero están bloqueados. Y ahora macetas todo funciona bien, ¿verdad? Si copio esto una vez más aquí, va a funcionar bien. Entonces, está bien, entonces cambiamos la pantalla inline-block. Y también vamos a poner, por ejemplo, la cúpula fronteriza, por ejemplo, amplia. Como se puede ver. Un píxel sólido, un píxel blanco sólido. Algo así. Como se puede ver, ahora tenemos buena frontera a su alrededor, que es blanca. Y ahora es el momento del mejor ajuste. Hagamos lo mismo con el a activo aquí. Al efecto flotar porque esto es lo más importante. Entonces cuando muevo el ratón por aquí, primero quiero cambiar el color del fondo. Entonces cambiemos el color de fondo a, por ejemplo, blanco. Y como pueden ver, no es amplio, pero el problema es que nuestros textos desaparecieron. Entonces necesitamos cambiar el color de nuestro texto de nuevo a qué hacer, por ejemplo, ¿cuál era el color del fondo antes? Y ahora es bastante guay, ¿verdad? Porque cambiamos el color de fondo y el color del texto al mismo tiempo. También podríamos hacer lo mismo con, por ejemplo, la frontera. Para que podamos, vamos a copiarlo. Y vamos a poner aquí el color así. Y como puedes ver ahora es aún mejor, ¿verdad? Entonces creamos algún tipo de manera aquí. Podemos enviar personas a otros sitios web. No necesita ser el sitio SAP de su lado. Solo necesitas cambiar los derechos del esquema de texto. Pero creamos a un hombre. Y fíjate ahora que hay algún tipo de problema. Y si tuvieras algún tipo de textos como, Hey lugar camarilla, por favor pulsa aquí y suscríbete por ejemplo. Y quieres que esto, por ejemplo, esta cosa de aquí sea un enlace, ¿verdad? El problema es que este comportamiento está ahora en todas partes de su sitio y probablemente no lo sea. ¿ Qué es lo que todos habían querido lograr, verdad? Entonces es buena idea usar el, por ejemplo ID y decir que este es el menú, ¿no? Y ahora vamos a cambiar el comportamiento de los enlaces sólo dentro del manual. De acuerdo, entonces vamos a hacer algo como esto, así, así. Y como puedes ver, ahora esta cosa no se ve afectada por esto. Dentro del manual se ven afectados. Recuerda que el EV quería tener más de un manual. No deberías usar el ID, deberías comer, usar en lugar clase entonces, y cambiar aquí en cada proteasa, el hash en los datos, ¿verdad? Al igual que esto. No obstante, la mayoría de las veces sólo hay un hombre soltero, ¿verdad? Para que podamos volver usando las parcelas de contorno z Así que así es como puedes cambiar la forma en que se ven los enlaces. Esa es sólo la lección. Gracias. 62. Cambiar iconos de listas predeterminados || :: Antes selector: Hola, amigo mío. El día de hoy les mostraré cómo cambiar la apariencia de los marcadores del lado izquierdo de la lista. Y lo haremos de dos maneras. Entonces quieres cambiar esto en algo que se ve bien, vale, así que a algo que se ve, por ejemplo, así, definitivamente es mejor. De acuerdo, entonces, ¿cómo hacemos cosas así? En primer lugar, necesitamos seleccionar las listas desordenadas, por ejemplo, ¿verdad? Y dentro de nuestra lista desordenada hay algo así como el estilo Elise. Y como pueden ver, tenemos aquí reglas libres. Una de ellas es el tipo que te permite cambiar el tipo de tu lanzamiento por cosas que están disponibles aquí. Por ejemplo, para la lista desordenada, la más popular es la cuadrada. Por lo que no podemos cambiar el marcador por defecto que está del lado izquierdo aquí a la plaza. Como puedes ver, lo cambiamos de algo que se llama el SQL, ¿de acuerdo? También hay algo que se llama círculo. Y hay algunos más, como puedes ver disponibles aquí. No obstante, la mayoría de las veces estas son las que se usan con mayor frecuencia. No obstante, también hay uno más que debes saber acerca de que se llama non sería simplemente elimina el marcador. Esto es bastante importante a veces porque quieres conseguirlo aquí, uno personalizado, o simplemente no quieres tener una lista. Tenemos el mercado en el lado izquierdo. Entonces esto es cuando usas Sony. Verás un ejemplo práctico cuando algo como esto te das cuenta de que esta es una lista desordenada, que significa que no nos importa qué tipo de orden hay dentro de un limones aquí. Pero podríamos fácilmente cambiar esto a OrderedList, ¿verdad? El ordenes por defecto es el número. No obstante, también podemos cambiar el estilo de lista, escribir en algo como por ejemplo, alfa superior, que lo cambiará a a, B, C, D, E, F, G, y así sucesivamente, ¿verdad? O podemos usarlos, no superior del cuerpo, también está el Alfa inferior. Escribe algo como esto y esto van a ser letras más pequeñas. También hay algo llamado la ley, como el bajo romano. Entonces vamos a usar el romano, el número, los números y el recurso, o griego inferior, que se ve como las cosas de la boca. Hay latín más bajo, escribe algo como esto, por lo que puedes usar esto también aquí. Pero el problema es que no conozco lo recomendado porque esto es orderlies y debes usar tipos que estén conectados a numerar cosas aquí, ¿verdad? El, el orden importa aquí. Hay un bajo esto, así que podríamos usar algunos iconos, algunas cosas que no están conectadas al IBC, el ganar-ganar, algo cuando veas el orden, ¿verdad? Entonces volvamos a la lista desordenada, y volvamos a crear lo que le gusta a una imagen. Por ejemplo, el que puse aquí. Entonces aquí tenemos una garrapata, que es la extensión de tick es PNG. Y eso es bastante importante porque no hay, como pueden ver, ningún fondo aquí. Y como no hay fondo y PNG te permite hacerlo, se va a quedar bien en cada suelo de bar, ¿verdad? Porque sólo tomará el fondo de la cosa en la que aparece, ¿verdad? Por lo que esto es bastante importante usar archivo PNG y puedes redimensionarlo a algo deslizarse 12 píxeles por ejemplo. Y para redimensionarlo, recomiendo encarecidamente el programa que se llama Pine dotnet. Se puede encontrar una imagen en internet, que es la, que tiene la extensión PNG y redimensionarla a algo pequeño como esto. Encendedor. Puedes elegirlo haciendo algo como lo menos, darle estilo a esa imagen. Y aquí podemos usar algo lo que se llama URL. Aquí, pones en las comillas ese camino hacia donde está la imagen. Como se puede ver, nuestra imagen es donde está aquí. Por lo que necesitamos primero saltar de la carpeta CSS a qué hacer la página principal 1 línea derecha a la carpeta principal y luego entrar en imágenes. Entonces para hacerlo, necesitamos usar qué a eso y luego el lodo. Y como puedes ver ahora, podemos ir a las imágenes, después el tick PNG. Por lo que nuestro camino se ve así. Y ahora como pueden ver, tenemos una hermosa marca en el lado izquierdo que se ve así. Y podemos poner aquí una imagen que quieras, ¿verdad? Pero recuerda que debe ser PNG, lo contrario no se verá bien en cada Bagua, ¿verdad? Entonces así es como se agrega la imagen. Pero también hay otra manera, que es que creo para la mayoría Stein, mejor aún porque no necesitas buscar la imagen. De acuerdo, entonces, ¿cómo usamos este método cuando hacemos algo como u y luego Ally. Por lo que elegimos lo que el LI dentro de la URL. Podemos cambiar, por ejemplo, el color a amarillo, ¿no? Y como pueden ver, cambiamos el color de qué del texto aquí, ¿no? Pero también hay algo que se llama el antes seleccionado. ¿ Y qué hace? Como puedes ver, casi como si no hubiera pasado nada, ¿verdad? Porque cuando los agregas antes de que estés entrando algún tipo de modo, el modo que te permite insertar, para, insertar contenido a E, Pero antes de él. ¿ De acuerdo? Entonces, ¿dónde está esto? ¿Antes? Está aquí, vale, queremos poner el contenido aquí. Y, pero ¿cómo ponemos aquí el contenido? Necesitamos usar algo llamado se llama el contenido. ¿ De acuerdo? Por lo que el contenido permite agregar algo cola y pones el contenido en las marcas de cotización, dentro de las marcas de cotización. Y aquí ponemos bien el contenido, para que hasta podamos ver cantar le, le, le, le, le, le. Entonces esta cosa va a aparecer aquí, de acuerdo. Como se puede ver, vimos y lo que es más es amarillo. Entonces, ¿algo que hagas para sentirte bien? Entonces, por ejemplo, queremos cambiar el peso de la fuente a, por ejemplo, bola. No te vas a cambiar de aquí ahora, ¿verdad? Entonces afectamos sólo el contenido con las reglas aquí, ¿de acuerdo? Esto también es bastante importante. Entonces significa que podemos poner todo lo que queramos. Pero ahí es donde podemos encontrar cosas políticas para ellos? El cool es que las entidades te permiten, cuando vas a un sitio web como este de arriba, poner realmente muchos sentimientos, ¿verdad? Hay flechas que podrían resultar interesantes, como por ejemplo, ésta o ésta. Y para poder usarlo, necesitamos usar el valor hexadecimal desde aquí, ¿de acuerdo? No entonces TT, sino el valor x de aquí. Entonces, por ejemplo, me gusta esta flecha de aquí. Y para poder usarlo voy a usar la barra invertida, no el lodo sino la barra invertida. Y luego el número del costado que te mostré. Y ahora verás que tenemos flecha amarilla que se ve así, pero tenemos también el estilo predeterminado aquí, ¿no? Entonces vamos a eliminarlo, estilo de lista, tipo, Vamos a ponerlo en ninguno, correcto, Así que queremos quitar lo hice en el quitarlo. De acuerdo, porque necesitamos hacer algo como esto, ¿verdad? Entonces esta es la URL, URL. Entonces cuando hacemos cosas como esta, tenemos esto. Cuando hacemos así, tenemos esto y queremos simplemente quitarlo, correcto. Por lo que vamos a lado este arriba muerto. Ninguno. Por lo que aquí no hay nada como esto. Y sólo tenemos flechas de un año de antigüedad. Podemos usar hasta cualquier ícono de emoji o hey, quiero tener esta cosa, entonces lo tendré aquí. Como se puede ver. Así es como se ve. Entonces depende de ti lo que vas a usar, ¿verdad? Quieres tener una teca que se vea así, entonces vas a tener una garrapata que se ve así. Hay toda clase de esto. De verdad la ley, ni siquiera tendrás tiempo de revisar cada posible desde aquí. Esto es gran cantidad y diseñar el emoji ¿verdad? Imagen Smyth, lo que puedas poner, lo que quieras antes del contrato. Y lo que es más, recuerda que antes de las cosas, esta cosa funciona en cualquier elemento, ¿verdad? No sólo tener aquí n elemento, sino que este es un ejemplo práctico de cómo usarlo. Hay cosas que están pupilo recordar, porque la mayoría de las veces estamos usando el signo de garrapatas y tick está reservado bajo este número. Como puedes ver, tenemos una garrapata aquí, y el dQ en audacia es menor de 27, 14, como puedes ver ahora está en audacia es aún más visible, ¿verdad? Entonces recuerda cuando usas el antes de impuestos, antes del selector, necesitas agregar el contenido. Y el contenido se va a cambiar de acuerdo a las reglas que están abajo, ¿no? Por lo que quiero que esté abajo. Va a ser azul, ¿verdad? Tenemos a un tipo azul aquí. Y ten en cuenta que se calificará. Habrá algún tipo de espacio aquí, ¿verdad? Y puedes poner el DSpace aquí usando el 000, ¿de acuerdo? Ahora como puedes ver aquí hay un espacio entre esta nueva garrapata y el contenido, ¿no? Se ve un poco mejor ahora, creo que esa lista, pero depende de ti, ¿verdad? Por lo que queremos tener más espacios. Se puede hacer algo como esto, ¿verdad? Si no quieres y entonces simplemente no lo dudes. Pero este es el espacio y ahí es donde está escondido. También hay algo así como 000 BBM, que recomiendo usar, que se ve bastante impresionante, ¿verdad? Es como, oye, este es el primer elemento pierde, el segundo es el tercero, ¿verdad? Encendido en lista desordenada es bastante genial. Entonces digamos que menos de 2713 es grueso. 2714 está en audacia, tick write 000 BB es qué? Es sólo algo así, muy parecido a esto. Y 000, 000 a, un 0 se acaba de gastar, ¿verdad? 63. Cómo hacer elementos: Hola, amigo mío. Hoy aprenderás a hacer algo transparente. Significa que el fondo será un poco borroso, ¿verdad? Se va a difuminar. Para que puedas ver a través del fondo, ¿verdad? Y vamos a usar para esa opacidad y la fila RGBA, te diré la diferencia entre esto y esto. Pero antes de que hagamos eso, practiquemos un poco. Es buena idea hacer lo que hago ahora. De forma manual. Entonces no descargues el código fuente, intenta hacer lo que hago. De acuerdo, Esta es una buena práctica porque vamos a agregar para las imágenes hagan un ejemplo práctico manualmente aquí, ahora, pero usando Emmet. Entonces, ¿cómo agregamos imágenes? Podemos teclear imagen, ¿verdad? Y luego el, poner los valores para los atributos. Pero oye, necesitamos imágenes, por lo que la imagen se multiplica por cuatro. Y ahora vamos a entrar en las imágenes y luego elegimos el archivo que queríamos tener. Entonces necesitamos poner el video curso C agudo, la versión que utiliza el atajo Z de salida para hacer todo visible en una pantalla. Y vamos a presionar el botón F1 y escribir el tamaño de tu imagen de actualización. Entonces tenemos el tamaño de la imagen, vale, luego pulsa el botón de pestaña y tenemos que ir a otro curso. Entonces como este y video curso, video curso C plus. Y luego qué? Actualizar imagen F1, Tab. Y de nuevo, imágenes. Puedo utilizar el espacio por lo que voy a conseguir las pistas, Foster y video curso Java. Creo que golpeé el botón equivocado. Necesito hacerlo manualmente. Por lo que ocurre el video. Java e imágenes. El discurso sea video, por supuesto, PHP. Y necesitamos actualizar el tamaño de la imagen. Y es una buena idea en el arte aquí, entra, así que lo mira Que así. Por lo que tenemos cuatro imágenes e imagina que tienes lado donde permites hacer click en cada imagen como esta para llevar al usuario a un sitio específico donde pueda comprar el curso así. Y para hacerlo, necesitamos ponerlo en el tobillo, ¿verdad? Entonces usemos el ancla en bien, todos estos tipos, así que usemos la llave de salida, y ese es el ángulo. Y aquí tenemos que hacerlo, creo que el HTML5 debería llamarse muy similar como aquí, ¿verdad? Porque, por eso, será más fácil hacer que tu sitio sea más alto en Google así. Entonces tenemos ahora enlaces. Entonces cuando mueva el ratón sobre las cosas aquí y haga clic en él, nos van a enviar a la página así. No existe la página. Bueno, puedes crearlo manualmente, pero no lo haremos porque este no es el directorio no se trata de la muerte. Imagínate al usuario del costado, como aquí, y ¿cómo sugeriría para él que pueda hacer click en algo así? De acuerdo, Cambiamos el cursor de curso por el puntero ¿verdad? De lo así a cazar. Pero esto no es suficiente. Creo que debemos cambiar la opacidad, por lo que debemos hacerla transparente cómo hacerlo. Vamos a seleccionar un y dentro. Si hay dentro de un EMG, vamos a cambiar la opacidad. Y como se puede ver, los valores para la opacidad de 0 a 11 significa que nada ha cambiado. No obstante, pones, por ejemplo, uno de punto cero. Te darás cuenta de que es bastante transparente, ¿verdad? Se puede ver a través de ellos. Entonces pongamos aquí, por ejemplo, 0.7, ¿de acuerdo? Y ahora es un poco transparente, ¿verdad? Yo quiero cambiarlo para no ser transparente y más cuando alguien mueva el ratón sobre las cosas aquí. De acuerdo, Entonces, ¿cómo lo hacemos? Vamos a usar el hover. Está bien. Por lo que hover es entrega. Hablamos de ello cuando lo usamos en los tobillos, ¿verdad? Entonces cuando alguien mueve el ratón, él, come, él, aplica las reglas que están dentro donde pones el hover, ¿verdad? Entonces cuando haces algo así como un EMG y cuando alguien mueve el ratón sobre, a la derecha la entrega, entonces la opacidad va a cambiar de nuevo a una. Y como puedes ver ahora, esto sugiere que, oye, esto es un enlace, ¿verdad? Porque cuando alguien mueve el mouseover, él, claramente dice que algo cambia aquí. De acuerdo, entonces Islas, sólo voy a dar clic en él. Y esta es una buena sugerencia para nuestro usuario. Entonces es cuando lo usas, por ejemplo, o lo pasas. Siempre que hemos llegado aquí algo también como RGBA, mira, digamos que queremos advertir a alguien sobre algo en nuestra página web. Entonces digamos que vamos a crear una advertencia de identificación. Y digamos que esto es una advertencia. Ten cuidado, mensaje muy importante. ¿ De acuerdo? Y hagamos este portal de mensajería. Entonces entrémonos en la advertencia y hagámoslo audaz. Por ejemplo, vamos, por ejemplo, aumentar el tamaño de la misma. Vamos, por ejemplo, a añadir el relleno para que se vea mejor. Enseguida, este es un gris cálido. Hagamos color de fondo, por ejemplo, marrón. Hagamos algo así. Esto es advertencia, ten cuidado, mensaje muy importante. Vamos a establecer el ancho a, por ejemplo, 5000, 500 píxeles. Y vamos a centrarlo, ¿verdad? Entonces se ve así. Gran calor, ¿verdad? Y ahora usaré algo lo que se llama opacidad en él. Entonces usaré la opacidad para, por ejemplo, 0.6. Lo que va a pasar, como pueden ver, el problema de este mensaje es que cambiar la transparencia de anti o pensar con el contenido, incluyendo el contenido y no algo que probablemente no vamos a porque queremos mantener el texto para estar en negrita, para ser fácil de ver, ¿verdad? Y con el fin de simplemente cambiar la transparencia de fondo, usamos el RGBA, acuerdo, Entonces no usamos esto. Vamos a usar Hill Air GBA. No obstante, también podemos simplemente hacer clic aquí, bien, mover el ratón por aquí y elegir el color que queremos. Y aquí podemos, como pueden ver, enviar el cuarto argumento, correcto, el cuatro valor aquí que establecemos cómo debe ser algo transparente. Y se puede ver el valor más pequeño significa que es más transparente. El número mayor hasta nada es que no es transparente. Entonces digamos que queremos ponerlo en algo como esto. Y como pueden ver, voy a quitar esto. El texto sigue en negrita, es negro. No cambiamos la transparencia de esto, ¿verdad? No obstante, cambiamos la transparencia de la negociación. Y tal vez te estés preguntando ¿por qué haría incluso el transporte de advertencia? De acuerdo, esa es una buena esa es una pregunta muy buena. Porque la mayoría de las advertencias de tiempo como estas deberían ser, por ejemplo, en el medio y aquí deberían haber muchos textos. Y probablemente la advertencia sería sobre otros textos, ¿verdad? Y simulemos esto, pero lo siento, pero no te voy a explicar todo lo que haría ahora mismo porque vamos a hablar de estos en el futuro. Vamos a usar la posición absoluta. Vamos a mover el objeto al medio. Y vamos Ahora asegúrate de que se vea correctamente. Hacer algo como esto, esta cosa. Arriba izquierdo. Traducir. Debería usar aquí traducir así. Como puedes ver, este rosa hace tu texto en el medio, siempre en el medio. Incluso yo lo he hecho, he cambiado el tamaño de nuestro navegador web. Siempre está en medio. Por lo que en el futuro les diré cómo funciona esto correctamente. Pero por ahora, solo sabes que solo debes establecer estas reglas. Harás algo para estar en medio, ¿verdad? Y como puedes ver cuando muevo esto, por ejemplo, imágenes aquí. Ahora puedo ver estas imágenes, ¿verdad? Creo que cuando pones una advertencia de tu lado y haces algo así, esto es mala idea porque el usuario es como, él no sabe lo que hay detrás, ¿verdad? Él, es como si hubiera perdido todo el contenido de tu sitio. Creo que siempre debes al menos aplicar el Alpha a 0.9, algo así como días, ¿verdad? Entonces él es como, vale, esto es un mensaje de advertencia, pero todavía puedo ver claramente lo que hay detrás, detrás de la pantalla, ¿verdad? También te mostraré una cosa más ahora porque creo que algunas cosas que podrías estar aprendiendo en este momento son aburridas, ¿verdad? Pero desafortunadamente, para crear cosas desde cero, necesitas entonces cosas aburridas a veces, pero no vinculo las cosas ahora, un poco más cool. Mira, vamos a crear algunos textos aquí. Para crear textos, vamos a usar la M en Lorem, bien, crea algunos textos, pero cuando lo multiplicamos por 50, crea aún más textos. Y el problema está aquí, como pueden ver, tenemos este mensaje en el medio, pero cuando nos desplazamos, no se ve bien. Y podemos cambiar la posición de absoluta a algo que se llama fija. Y ahora estas medidas como moverse con nosotros, Eso está bien, ¿verdad? Entonces podemos, por ejemplo, crear aquí la x. Cuando alguien hace clic en la x, ha subido, por ejemplo, desapareció, pero sólo cuando lo leyó y sabe lo que está haciendo bien cuando acepta lo que está aquí. Entonces como puedes ver aquí, incluso poniendo un poco más grande, ¿verdad? Por ejemplo, 200 píxeles, ¿verdad? Esto es bonito, bastante importante. Y lo cambiamos de nuevo a uno. Notarás que el usuario es leucina, ¿verdad? Todo de esta página, ¿verdad? Entonces es buena idea establecer algo como esto. De acuerdo, eso está todo en la lección. Muchas gracias. 64. Cambio el cursor | crea una caja de sugerencias: Hola. El día de hoy te mostraré cómo cambiar el cursor, el puntero a otra cosa. Al igual que por ejemplo, tenemos ahora aquí un puntero por defecto uno, muevo el ratón. Aquí tenemos un puntero con el signo de interrogación que sugiere que hay información adicional, como la que se ha presentado con el video curso, las barras de autobús, está en promociones y decir que lo que sea aquí cuando mover el ratón sobre algunos textos, tenemos información estaba pasando por lo que podemos poner cualquier cosa en la caja como esta. Entonces te mostramos cómo crear una caja así también en estos extra, por lo que esta va a ser una conferencia muy interesante, ¿verdad? De acuerdo, así que sigamos cómo hacerlo. En primer lugar, quitamos todo lo que hice. ¿ Por qué lo hice? Grandes goles. Cuando ves cómo hago algo desde cero, aprendes mucho, mucho más en lugar de analizar el código, vale, Así que esto también significa que debes tratar hacer todo lo que hago en esta conferencia manualmente más tarde, después de que lo compraste. Entonces garra la conferencia después de que lo veas y hagas todo lo que hice en esta conferencia por tu cuenta, trata de no mirar como lo hice, derecho a repetir lo que hice, pero no mires la solución. De acuerdo, así que empecemos de, por ejemplo, ayudar. Entonces si quieres cambiar el cursor en primer lugar, necesitamos ponerlo en algún tipo de todo m y escribir que podamos elegir entre el CSF. Sugiero comenzar aquí una clase que llamará, por ejemplo ayuda. Entonces cuando tengamos más expound, como por ejemplo, aquí, me gustaría poder cambiar el cursor sobre todos ellos. Entonces, ¿cómo cambiar el cursor? No podemos elegir el hub y vamos a usar la regla que se llama cursor. Bastante directo, ¿verdad? Y ahora aquí tenemos un buen hombre, un cursor del que podemos elegir. El que vamos a elegir se llama Hub, que sugiere que se usa cuando queremos y dar ayuda adicional para alguien justo dentro del texto, por ejemplo. Hay muchos más. El más útil que uso más tiempo se llama puntero. Por lo que el puntero cambia en puntero que tiene buena mano sobre el texto. Y sugiere que se puede dar click en muestreo ¿verdad? El siguiente que uso con más frecuencia es el peso. Esto es bastante genial porque cuando estás haciendo algún tipo de carga en segundo plano, puedes hacer que el usuario esta cargando. Piensa en su pantalla y sabrá que necesita esperar algo, ¿verdad? Este dedo, una esfinge se utilizan la mayoría de las veces cuando conoces JavaScript, cuando cargas algo que Bergen algunos, algunos datos o algo así. Entonces estos bastante avanzados. Y hay muchos, muchos más. Y para ser honesto, no es que los recuerde todos porque la mayoría de las veces no las usas en tu proyecto, pero es bueno saber al menos que existen. Así que intenta jugar con ellos. De acuerdo, Así que pasa por L de ellos como por ejemplo, no lo sé. Vamos a copiar y mueves el ratón aquí. De acuerdo, Entonces copia se ve así o esto también es una buena idea porque como dije, no lo recuerdas todo. Tipeo habitual Google auto fuente y CSS. Está bien. Y encontrarás ahí, ya sabes, cada cursor, cómo se ve en algún lugar de la GPU. Recuerda la luz del sol, vas a ver todo mi video cada vez que necesites encontrar el cursor específico, todavía vas a conseguir, ves mi video porque te muestro cómo hacer las cosas, ¿no? No muestro cada no puede mostrarte cada posible cursor porque este es solo tu suelto de tu tiempo cuando me estás viendo, te mostraré cómo usar algunas cosas y te diré que existen. Entonces ahora te voy a mostrar algo muy bueno que es difícil de encontrar, como por ejemplo, cómo crear un TPP, ¿verdad? Digamos que aquí tenemos un título. Y digamos que aquí hay más información, ¿no? Y ahora vamos a copiarlo y vamos a ponerlo aquí y aquí, y aquí, por ejemplo, estaba pasando. Y aquí escribiremos otra cosa. Por defecto, hay algún tipo de caja que aparece como puedes ver, qué está pasando. Aquí hay más información, pero se ve horrible. Te gustaría que se viera mejor, ¿verdad? Vamos a cambiarlo de nuevo para ayudar. ¿ Y cómo lo hacemos? Bueno, en primer lugar, tenemos que elegir el hub. Entonces necesitamos hacer los cambios cuando alguien mueva el mouse sobre el hub, ¿verdad? Porque de lo contrario, agregaríamos todo. Todos. Añadiríamos la caja siempre bien? No sólo después del, alguien mueva la mano sobre el elemento de ayuda, ¿verdad? Por lo que queremos agregar el contenido. Y la pregunta es, ¿qué tipo de contenido? Digamos muestra. Y ya puedes ver ahora cuando muevo el ratón por aquí, y no pasa nada porque no dijimos dónde queremos poner ese contenido. Y hay dos lugares donde podemos ponerlos delante del texto o después del texto. Tenga en cuenta que aquí utilizamos la columna única y aquí utilizamos las dos columnas. De acuerdo, Esto es muy, muy importante. El, de lo contrario no funcionará. Y también esto debería ser en primer lugar, cómo flotar y luego el después. Entonces después del texto que tiene buena ayuda, clase. Me gustaría agregar la muestra de contenido. Como puedes ver, aparece. El problema es que queremos, no queremos que se muestree, queremos que sea derrotado está aquí, ¿verdad? Exactamente la cosa aquí. ¿ Es posible tomarlo? Sí, es posible. Y esto es bastante guay. Podemos escribir cosas como un TTR, que significa atributo, ¿no? Por lo que pones aquí el nombre del atributo y el título está en un atributo. Y eso es todo. Acabas de tomar este texto y ponerlo después del texto que está aquí. ¿ Verdad? Porque tú lo dijiste cuando alguien movió la bomba mouseover, algo más estaba pasando. Aquí te damos más información, bastante impresionante. Ahora es el momento de cambiar la apariencia de esta cosa, ¿no? Entonces, en primer lugar, ¿qué debemos hacer? Sugiero que primero debemos secretar algún tipo de color de fondo, ¿de acuerdo? Al igual que por ejemplo, aqua. Digamos algo como esto, vale, Lo segundo que creo que deberíamos hacer es agregar algún tipo de relleno. Por lo que se ve un poco mejor. ¿ De acuerdo? Es mejor ahora mismo. El segundo es, bueno, creo que el radio fronterizo estaría genial aquí. Se verá mejor cuando haya un radio fronterizo en él. Está bien, ahora es aún mejor. Y la segunda, la tercera cosa es que el aviso que cuando muevo el ratón y creo que mueve todo hacia adelante, ¿verdad? El problema es que este contenido se suma al flujo de todos los elementos. Si querías hacer algo absoluto, absoluto, por lo que quieres sacarlo del flujo de todos los elementos. uso debe usar algo llamado el regaño, la regla llamada posición y ponerlo en absoluto, ¿de acuerdo? Significa que lo sacas del flujo y como puedes ver ahora, está sobre cada otro dedo de tu lado. El problema es que este trasfondo es ahora ¿qué? Ocultando todo detrás. Y creo que es buena idea hacerlo un poco transparente. Entonces muevo el ratón aquí y lo hago un poco transparente haciendo algo como esto. Y como puedes ver, el color cambia de Aqua a RGBA, y esto es aqua, pero tiene un ajuste aquí que se establece en 0.7 por ejemplo. Y ahora ha subido ¿qué? Transparente. Se puede ver la información en segundo plano. Creo que ahora mismo es un poco demasiado transparente. Pero digamos que por ejemplo, 0.9, ¿de acuerdo? Entonces aquí hay más información. Entonces creamos esto bastante fácil. No obstante, hay un problema. El problema es que digamos que tienes una imagen correcta, y vas a acceder a enfermos o lesionados. Diga que desea acceder al video curso C plus plus VD0 auto C plus. Y digamos que te vas ahora agregó la clase así. Y aquí dices que hoy es promoción. Todavía se dice L. Y así que lo que sea, das información adicional como esta, y cuando mueves el ratón aquí, no pasa nada, ¿verdad? Y podemos resolverlo poniéndolo en el lapso y poniendo esta clase y el título en el lapso. Como pueden ver, ahora podemos ver hoy es una promoción. Es inseguro. ¿ Por qué? No funcionaba antes, porque la imagen no es un texto. Y esta cosa, el después, funciona sólo en el lapso de texto. Así que al igual que hay un texto aquí adentro, ¿de acuerdo? Y nosotros solo algún tipo de jugar con el navegador web, ¿de acuerdo? Simplemente lo arreglamos agregándolo al limón que puede tener imagen de texto, no puede tener texto, ¿verdad? Si lo divertido es que si eliminas la etiqueta fuente, funcionará porque tenemos el mensaje nativo externo en la mayoría de los navegadores web. De acuerdo, ¿trabajamos? Este es algún tipo de solución que necesitas saber que si quieres agregar y hacer funcionar el efecto after o el before effect, necesitas usar el span o un elemento que pueda llamar texto. La imagen no es un texto. Pueden ver todo aquí está en línea ahora mismo porque bueno, tenemos buenos todos spots aquí. Entonces podemos hacer por ejemplo, BreakLine. Y ahora se ve así, ¿verdad? Entonces creamos una caja, pero aún hay un problema, un problema que podemos resolver. Todo lo que sabemos crear atributos personalizados, cómo jugar con ellos. Observe que siempre necesitamos usar la clase ni siquiera sería mejor si toma el título de aquí automáticamente. Y también será Grado IV. Cuando mueves el ratón, no tienes dos cajas, ¿verdad? Tenemos una caja que es creada por nosotros. Nosotros simplemente guapos. Bueno, tal vez puedas hacerlo aún más hermoso, ¿verdad? Si juegas con él. Pero hay otra caja, pero por debajo del cursor, hoy es Promocional en su propio sitio. Como se puede ver después de unos segundos, tenemos buenas cajas de herramientas y esto no es bueno. Nosotros queremos resolverlo, pero ¿cómo hacerlo? Aprenderemos en la próxima conferencia. Gracias. 65. selector de atributos de atributos personalizados en HTML: Hola, amigo mío. Hoy aprendiste a crear atributos con nombre personalizado y a seleccionar de CSS en función del nombre del atributo. Esto es bastante bueno. De acuerdo, Entonces lo primero es cómo crear atributos con nombre personalizado y ¿por qué incluso nos importaría crearlos? Observe que en la última conferencia, usamos el título con el fin de, para usar el valor desde aquí, ¿no? El problema es que el título está realmente reservado para otra cosa para mostrar una caja. El ancho, correcto, el pequeño de aquí. Y tres segundos las promociones de hoy en celular, pero estas pequeñas, no la que conocimos al cliente. ¿ Verdad? Y nos gustaría que se eliminara, pero no queremos perder el contenido desde aquí. Y ahí es cuando puedes usar atributos de nombre personalizados. Significa que puedes crear tu propio nombre de atributo, pero no lo creas así, por ejemplo, ¿vale? Pero creaste ideas. Escribes la palabra de datos y luego el guión, ¿de acuerdo? Y entonces puedes llamarlo como quieras, incluso de la manera que hicimos aquí, ¿verdad? Entonces podemos hacer algo así ahora. Y como puedes ver, funciona, pero ahora no tenemos estos comportamientos básicos por defecto. Por lo que tomamos la información de este dato de atributo a como el F. Por supuesto, esta no es la forma en que deberías llamarla. Lo que te mostré que puedes inventar aquí. Ellos como sea el nombre que quieras, podemos llamarlo, por ejemplo, ayuda de datos, ¿verdad? Entonces llamémoslo ayuda de datos. Y ahora, por supuesto que necesitamos tomarlo de la ayuda de datos, ¿verdad? Y funciona bien. Entonces tenemos buenos ahora los atributos de nombre personalizado, No solo es usar lugares como ese también se usa para algún tipo de scripts hechos en JavaScript. Pero estas cosas no creen que aprendas en este curso porque este HTML y CSS va. Y lo que tenemos también algo madera se llama selectores de atributos. Y en este caso, esto va a ser impresionante. ¿ Por qué es eso? Entonces vamos lo que necesitamos agregar cada vez esta clase tenga para hacer que esta cosa funcione, ¿verdad? Y creo que será mejor si acabamos de agregar los datos, ayudar con los textos. Y estas cosas deberían funcionar automáticamente, ¿verdad? Como puedes ver, no funciona. Entonces, ¿cómo hacerlo funcionar? Tenemos que elegir por el nombre de los atributos. Está bien, esto es bueno. Mira, tenemos que poner aquí entre corchetes el nombre del atributo. Y esto va a elegir NLM y eso tiene buen nombre de atributo como este. Y como puedes ver, ahora, cambiamos el cursor del ratón a éste con el signo de interrogación. También vamos a hacer lo mismo aquí. Entonces ahora cuando alguien mueva el ratón, le mostraremos ese texto, el contenido así. Y vamos a cambiar este contenido de acuerdo a las reglas pero abajo. Y como puedes ver, ahora funciona bien. Y esto es genial realmente porque ya sabes, esta cosa llamada ser algún tipo, por ejemplo, poder nuestra gráfica. Podría haber aire enfriado, ser más textos aquí. Y por ejemplo, ¿qué es eso? Y vas a descifrar este lapso y los datos satelitales ayudan. Esto es realmente algo Eso es correcto. Y ahora es coseno. Aquí podemos ver esto es algo, realmente algo más. Pero aquí usamos la línea de rotura, hacemos que se vea mejor así. ¿ De acuerdo? Bastante go. Y se muestra sólo en esto ahora mismo en esto, pero en esto, a lo que llamamos A cambiarlo, por ejemplo, tener un fondo de borde, un píxel, sólido, rojo omega d v derrotable más, ¿verdad? Entonces sugiere que cuando muevas millas ofrece cosas como esta, vas a conseguir algo de información, datos que sugerían aún más, ¿de acuerdo? Entonces puedes verlo sugerir que hey, muévalos aquí porque hay algún tipo de más información aquí, ¿de acuerdo? Aquí que hay, no hay aquí tenemos información y ahora es bastante rápido, ¿verdad? Porque podemos agregar información para que podamos crear contenido en sitio HTML. Pero este Fink se encarga de cómo se ve político. Esa es sólo una buena lección. Muchas gracias. 66. Formato de texto y decoración: Hola amigos míos. hoy vamos a hablar de unas cuantas reglas que te permitirán afectar cómo se ve el texto. En primer lugar, hablaremos de la decoración de textos. Mira, aquí agregamos el borde en la parte inferior de cada texto. Pero, ¿realmente lo hicimos? Observe que se trata de una frontera y la frontera está alrededor de la caja del contenido. Entonces el problema es que si agregamos aquí, por ejemplo, relleno de 10 píxeles, notamos que nuestro borde ahora está realmente lejos del texto porque este es un borde de caja entera aquí, ¿no? Entonces esta solución no es tan buena. No obstante, hay algo llamado esto decoración de texto que nos puede ayudar. De acuerdo, vamos a crear aquí algún tipo de texto. Vamos a llamarlo muestra de clase. Vamos a elegirlo. Y digamos que aquí hay un texto sobre nada. Y ahora pongamos tal vez impedido aquí porque quiero que me refresquen, incentren. Y ahora tal vez hagamos algo como relleno de 10 píxeles. Empecemos aquí. Color de fondo, por ejemplo, esto. Y ahora podemos trabajar con esto. Observe que podemos usar algo llamado línea de decoración de texto. Y le permite agregar una línea. ¿ Al igual que qué tipo de línea? Al igual que toda nuestra línea que va a estar arriba y los textos de llantas. Pero esto está por encima del texto, no por encima. No es así. Por encima del contenido de la caja, ¿verdad? No está aquí, ¿verdad? Está por encima del texto porque estas decoraciones textuales subrayan, no puede estar debajo del texto, ¿verdad? Cuando diga que la línea es verdadera, se va a alinear con el texto. Lo genial aquí es que podemos conectarlo. Entonces, por ejemplo, quieres tener nuestra línea y quieres haber subrayado. Va a ser subrayado por tierra. Incluso puedes agregar la línea por aquí, pero no se ve bien, ¿verdad? Pero se puede conectar lo es. Entonces esa es una gran diferencia porque, bueno, cuando hago borde fondo, un píxel sólido, el negro, por ejemplo, notarás que este borde está aquí justo en caja entera. Y esto nos va a ayudar pronto aquí a arreglar este problema con esto de aquí, ¿verdad? Y, pero antes de morir, noten que hay reglas morales respecto a la decoración del texto. Al igual que por ejemplo, lado de decoración de texto, ¿verdad? Y podemos usar aquí, por ejemplo, la versión punteada, ¿no? Entonces queremos tener puntos o podemos usar, conozco ese doble, así que va a ser líneas dobles. Puedes usar el ondulado. Entonces va a ser ola, ¿verdad? Al igual que esto. Y entonces depende de ti qué estudios pueden ser rendimientos, ¿verdad? El punteado o punteado. Depende de ti. Esto se parece al que están disponibles en las fronteras, ¿verdad? Entonces nos vamos a quedar con, por ejemplo, los datos, ¿verdad? Y también puedes cambiar el color de la decoración del texto a y. y también me siento naranja por ejemplo. Entonces va a ser naranja se hacen. Depende de ti qué tipo de color vas a usar. Y bueno, lo genial de la decoración del texto es que hay algún tipo de atajo para este Fink. Observe que puede poner después de la coma, después de la columna, primera línea, luego el estilo que la columna. Y quiere decir que se puede hacer algo como, por ejemplo, yo quiero bajo línea, punteado y por ejemplo, el color que está aquí, ¿no? El cool al respecto es que toma menos espacio. Creo que es más fácil de leer y nos llevaremos este bayesiano o CSS va a ser más pequeño. Si algo es más pequeño va mucho más rápido. Por lo que recomiendo encarecidamente usar esta versión abreviada, ¿verdad? Y ahora podemos usar este conocimiento y copiarlos aquí, ¿no? Y lo genial que ahora reemplazamos este borde es que cuando se agrega el relleno aquí, por ejemplo, 10 píxeles, tenemos acero ¿qué? El subrayado bajo el texto. ¿ De acuerdo? Entonces esta es la primera regla. La segunda regla de la que vamos a hablar hoy es la transformación de texto. Mira. Podemos transformar para que podamos cambiar el texto usando CSS. Esto es bastante guay. Cuando elijo una muestra y uso esa transformación de texto. No podíamos nebulosos, pero justo Aquí, puedes elegir algo que discutiremos. Por ejemplo, minúsculas, ¿Qué hace? Probablemente te has dado cuenta de que la primera letra aquí cambia a minúsculas, así que no es la mayúscula, no es la letra grande, ¿verdad? Si pongo aquí letras grandes ahora nota que todas ellas están mecanografiadas en minúsculas. Si usas la mayúscula, todo va a estar en mayúsculas. Pero lo más cool aquí es algo llamado, Se llama capitalizado. Va a cambiar cada primera letra de cada palabra a mayúsculas. De verdad me gustó ¿por qué? Cuando algo así podría ser útil. Observe que he creado una entrada aquí. Y digamos, Bueno, son sólo unas pocas líneas porque queremos tener algo de contenido aquí. Y digamos que quiero pedir el nombre de alguien. dio cuenta de que cuando alguien escribe el nombre, el nombre es tipo desde el minúsculo o si escribe el yodixanol, el nombre de la calle, y empieza desde la minúscula. Y no imprimiste el pedido así. No se ve bien, ¿verdad? Es que va a ser genial. Si todas las formas hay una letra mayúscula, la primera letra de cada palabra será mayúscula. Y podemos cambiarlo fácilmente simplemente eligiendo la entrada y luego hacer capitalizar la transformación del texto. Y ahora nota este que estoy escribiendo. La primera letra es grande, ¿verdad? No me puedo sentar cuando añado espacios siempre la primera letra es grande, ¿verdad? No puedo cambiar de turno a turno hasta ahora tiene un jabón. No estoy mintiendo, ¿verdad? Entonces ahora alguien tecleó el nombre, siempre es mayúscula. Alguien que vive el nombre de la calle siempre es mayúscula. Bastante impresionante, ¿verdad? Entonces esta es una transformación de texto. De lo siguiente de lo que vamos a hablar es de ellos alinear texto. Copiemos esto un par de veces aquí. A lo mejor hagámoslo parejo. Entonces creo que sí. Como pueden ver, tenemos bien. Ahora aquí hay algunos, algún texto. Quitemos el texto transformar la decoración del texto. Y juguemos con el texto. Línea. Toma una línea, permite alinear para mover el texto a, por ejemplo, el lado izquierdo. Y este es el comportamiento por defecto, pero puedes moverlo también al lado derecho, como puedes ver ahora, todo el texto está al lado derecho. Y aquí tenemos también el espacio, pero también podemos centrar algo. Y esto es lo que hemos utilizado hasta ahora. Pero recuerda que cuando estás centrando, algo siempre está centrado a la caja que estos alrededor del texto, ¿verdad? Entonces, por ejemplo, 400 píxeles. Se va a centrar alrededor de esta caja. Entonces recuerda que siempre es así porque, bueno, ejemplo, por defecto el PE, display P de B es display block. Que estas jugadas se llama bloque. Significa que toma todo el espacio del navegador web. Entonces a la derecha y a la izquierda, a la derecha. Entonces centro significa que va a centrar el texto alrededor de estos libros. Estos libros no es Malin, no visible, ¿verdad? Podemos quitar el fondo y no es visible. Y tal vez te estés preguntando por qué algo se parece a esto. No obstante, hay muy, muy, muy cool texto alineado característica, que se llama justifique. Recomiendo encarecidamente usarlo porque no esto. Vamos a copiar el div y largo así. Observe lo que sucede aquí. Tenemos ahora aquí etiquetas que no les gusta conectarlo al lado derecho del navegador web. Mal cuando usamos el comportamiento por defecto. Como puedes ver, tienes aquí espacio, aquí mismo hay algo de espacio, aquí hay algo de espacio. Y siempre, cuando lo movemos así, como puedes ver, aquí hay espacio. Y no se ve bien ser honesto cuando usas los textos de la característica de justificar siempre nos gusta conectarnos al navegador web y creo que esto se ve mejor, definitamente mejor. De acuerdo, Así que justifica un altamente recomendar el uso de armas, algún tipo de artículos, característica bastante impresionante. Y también hay algo llamado, Se llama espacio en blanco. Regla de espacios en blanco, como su nombre indica, funciona en los espacios en blanco. ¿ Qué significa? Significa que funciona sobre personajes blancos, como por ejemplo, espacios como anteras, como, que son líneas nuevas, ¿verdad? O algún tipo de grifos, ¿verdad? Entonces, ¿qué hace? Observe que tenemos aquí ahora texto y tenemos bien aquí. Por ejemplo, si tienes espacios y todo es propio newline. Y aunque lo sea, todo es visible aquí en una línea, ¿verdad? Simplemente no siempre somos algo que tú quieras tener. A lo mejor tienes, tienes algún tipo de poema en verso que quieres pegar en tu código y no quieres, ya sabes, línea de pan por todas partes. Entonces puedes hacer algo así como espacios en blanco y puedes usar la pre línea. Como puedes ver ahora, cada línea está aquí cuando está aquí, ¿verdad? Entonces cuando agrego aquí unos cuantos entra, van a ser interpretados ¿verdad? Entonces cada línea está predefinida, ¿verdad? Por eso es la palabra pre aquí. Significa que se va a tomar en consideración, pero sólo en las líneas. Entonces cuando hay algo así, no se va a interpretar. Y esto es bastante guay cuando estás pegando algún tipo de poema. Y tienes también algo que se llama pre wrap. Y esta cosa va a interpretar cada espacio y siempre entrar. El problema de esta solución está en textos como estos, necesitas entonces hacer algo como por ejemplo, esto, ¿de acuerdo? Entonces está en una línea. Toma tiempo preformarse en algo así en tu HTML. No obstante, esto sigue siendo útil cuando algo como esto es útil cuando tienes el lado F sobre, por ejemplo, la codificación. Observe que aquí hay algún tipo de definición de función y las indentaciones como esta, ¿verdad? Por lo que los espacios aquí son muy importantes en lenguajes como este. Entonces si usas la pre línea, todo va a ser solo en una línea. Entonces esto no es bueno, ¿verdad? Entonces si pegas el código, creo que es buena idea usar la versión árabe. De acuerdo, tampoco hay Rob, significaría que quiero tener todo en una línea. Entonces cambié esto en una sola línea, por supuesto que el código no es algo. Pero hay una característica como esta. Te recomiendo encarecidamente que juegues con todas estas características. De acuerdo, Así que haz lo mismo que hice en la conferencia. Es buena idea practicar porque entonces tendrás algún lugar en tu cabeza que, oye, algo así existe y cuando sea necesario, lo vas a usar. De lo contrario solo lo olvidas. Así que intenta jugar con él. Esa es sólo la lección. Muchas gracias. 67. indentation de párrafos y :::selector de primeras letras: Hola. El día de hoy vamos a hablar de texto, sangría y el primer selector de letras. Mira, tenemos aquí algún texto de muestra, ¿de acuerdo? Estos son bloque de texto, y cada uno de estos bloques de textos tiene unas líneas dentro, ¿verdad? Pero la primera línea se ve afectada por algo lo harán estos llamados sangría de texto. Sangría es sólo un margen para sordos primera línea de bloque de texto. ¿ De acuerdo? Entonces significaríamos que podemos, por ejemplo, seleccionar la muestra y podemos hacer qué? Sangría de texto. Y luego, por ejemplo, ponlo en 30, 40 píxeles. Y como se puede ver, ahora, sólo la primera línea del bloque H de texto a la derecha, tiene algún tipo de margen aquí a la izquierda. Entonces solo te hace la vida más fácil leer algunos, algún bloque de texto si es grande, ¿verdad? Esta es solo una forma de agregar párrafos a su sitio web. A algunas personas les gusta, a otras no. Entonces así es como lo logras. Pero hay una cosa que realmente me encanta. Es el selector, el descarte primera letra. Y funciona muy similar al anterior porque se puede ajustar, seleccionar sólo la primera letra de cada uno, por ejemplo, muestra de clase. Entonces cuando hago algo como esto, y ahora selecciono la primera letra, ahora estoy dentro como la primera letra de cada párrafo, bien. Y exige que, bueno, yo pueda hacer cosas como cambiarlo, ¿no? Entonces puedo, por ejemplo, decir font-weight dos voltios, ¿verdad? Y ahora se pone en audacia la primera letra de cada párrafo. También puedo hacerlo más grande. Entonces puedo, por ejemplo, hacer que sea un tamaño de fuente de 24 píxeles, ¿verdad? Y es más grande, ¿verdad? Sólo la primera letra de cada párrafo. Esto es bastante guay. De lo que me gusta porque hace que como cada bit de entrada de párrafo sea diferente, ¿verdad? Entonces recuerda que la sangría del texto afecta en la primera línea, ¿verdad? Todavía se puede agregar, por ejemplo, en cada muestra pobreza en la vida, por ejemplo, 10 píxeles, ¿verdad? Todavía está disponible, pero sólo afectará a estos chicos de aquí. Por supuesto, este también se ve afectado por, pero aquí no es visible, ¿verdad? Porque cuando escribo, por ejemplo, 100, será un poco más fácil de ver, ¿verdad? Entonces tenemos 100 píxeles por cada línea, pero la sangría de texto afecta sólo a la primera línea de cada parque, ¿verdad? De esta manera. Está bien. Esa es sólo esa lección. Muchas gracias. 68. Unidades CSS: em vs. px vs %: Hola, amigo mío. hoy vamos a hablar de los sindicatos, de ese Px, que significa píxeles, ese EM y el signo de porcentaje y cuándo usarlo. De acuerdo, entonces primero centrémonos en los píxeles. Lo hemos usado hasta ahora, ¿verdad? Lo usamos para, por ejemplo, poner la imagen de tu lado, ¿verdad? Cuando usamos la imagen, podemos establecer esa onda y la altura de la imagen usando los píxeles. No buceamos ahí el Px porque esta es solo una unidad por defecto para casi cualquier cosa en tu computadora, ¿verdad? Esto es algo a lo que estamos acostumbrados porque tenemos algo bueno. Discutiremos la resolución en nuestra computadora, ¿verdad? Estoy usando crudo y ahora mismo la resolución como esta en mi monitor. Está bien. Pero bueno, acabo de ver solo uso esta parte de mi mañana PARA grabarlo porque esta es resolución más apoyada. Y esto es lo que ven ahora mismo aquí. Y tengo qué, 19020 píxeles de izquierda para escribir. Y tengo 180 pixeles de arriba a abajo, derecha. Y este es el espacio disponible aquí, el para el disco dual. Cuando abro el navegador web, tenemos bueno, un poco menos del espacio porque bueno, si tienes bien aquí, la dirección que tenemos aquí, el nombre superior de la pestaña y así sucesivamente, ¿no? Y podemos incluso disminuirlo cuando no lo estábamos, cuando hacemos algunas cosas así, ¿verdad? Entonces estamos disminuyendo la cantidad de espacio que tenemos aquí. Por supuesto que estoy simplificando estos ahora mismo, pero por el bien de aprender a usarlos, creo que esto es suficiente. Va, puedes tener dispositivos de alta densidad de píxeles que tengan píxeles más densos, más píxeles en una pulgada que normalmente, ¿verdad? Pero no el tema de esta conferencia la mayoría de las veces, el problema se ve así, ¿de acuerdo? Y bueno, tú, así que tenemos este valioso espacio que podemos utilizar. Y por ejemplo, cuando tenemos buena aquí la muestra por defecto porque estos párrafos o su visualización es fácil, facilidad bloque. El ancho se establece en 100% por ciento del navegador web. ¿ De acuerdo? Por lo que cambia. Cuando entre al inspector, verás que el tamaño es así. Y cuando cambio el tamaño de nuestro navegador web, es este valor aquí, ¿no? Cambios con el tamaño del navegador web. Porque está establecido en el 100% del espacio disponible para la pieza. El cuerpo tiene también al 100% y HTML es el padre para el cuerpo, y también tiene al 100%, ¿no? Por lo que tenemos num, justo el tamaño de todo nuestro contenido usando el signo de porcentaje. Podemos cambiarlo a, por ejemplo, 50 por ciento así. Y ahora solo tomamos siempre el 50 por ciento del contenido de nuestro navegador web. Y esto es genial porque cuando envías, por ejemplo, a lo que gratis 100 pixeles, el problema es que, bueno, siempre se ve igual. A veces quizá quieras lograr algo como esto, pero no es algo que siempre quieras tener, ¿verdad? Porque las personas pueden tener diferentes tamaños de monitor y algo así podría parecer pequeño. No obstante, ahora mismo, la gente también puede usar el zoom, ¿no? Y pueden aumentar todo de acuerdo a lo que quieran ver. Pero por defecto será pero mejor mostrar algo que se ve bien en todas partes. Entonces creo que por una semana Es bueno usar el signo de porcentaje. Está bien. Pero no es bueno usar, creo que signo porcentual para todo. Mira, aquí hay algo llamado se llama EM. ¿Cuál es el n? Observe que cuando hayamos llegado aquí el tamaño de fuente, 24 pixels. Contamos estos volúmenes al saber que la etiqueta body tiene un buen tamaño de fuente predeterminado establecido en 16 píxeles. Y este es un valor predeterminado para los navegadores web. Como pueden ver, nada ha cambiado aquí, ¿verdad? Y bueno, cuando cambiemos este tamaño de fuente, entonces algo va como, por ejemplo, 80 píxeles, ¿qué pasará? Observe que nuestro pico primera letra no es grande NMR, ¿verdad? Por lo que esta letra no está cambiando su tamaño de acuerdo a lo que sucede en el otro lado con el tamaño de fuente que el conjunto tanto en la oscuridad. Porque la etiqueta del cuerpo. Cuando se establece el tamaño de fuente en la etiqueta body, todo hecho o así luego la etiqueta p. Y había una etiqueta dentro de la etiqueta p heredaría el tamaño, ¿no? Entonces significa que nos gusta hicimos algo así y algo como esto y algo así, ¿verdad? Aquí lo compilamos. ¿ Qué aquí? Nosotros lo hicimos. ¿Por qué? Porque anulamos, ¿verdad? ¿Porque qué? Esto es como, la cascada, ¿verdad? Nosotros decimos que esto es más importante. Enviamos el tamaño de fuente a 24 pixels desde 80. Por supuesto, si lo quito, se va a poner en 80, ¿verdad? Lo cambiamos a 24, pero no queremos que sea tan pequeño ahora mismo, ¿verdad? Por lo que tendríamos que volver a contarlo. Por lo que 80 píxeles se multiplican por 1.5 es de 120 píxeles. El problema es que, ¿necesito siempre dulces así? Eso sería estúpido. Es mejor usar escuchar algo o esto llamado ENM. Em se puede establecer a, por ejemplo, una E m. Y lo que va a pasar, como se puede ver, es el tamaño del dedo aquí, todo en el lado derecho. Son 80 píxeles en este momento, porque un em es realmente algo así. Es realmente uno multiplicado por 80, ¿de acuerdo? Y multiplicado por 80 porque aquí es 80. Entonces cuando hago algo, 1.5 es 1.5 multiplicado por 80, y ahora es qué? 120. Entonces lo genial de usar EM es que cuando cambias aquí la talla 2, y creo que esto siempre va a quedar bien, ¿verdad? La primera letra siempre va a ser 1.5 más grande. Puedes hacerlo un on phi veces más grande si quieres. Depende de ti, ¿verdad? Entonces ahora son como 50 píxeles, ¿verdad? Porque es 5 multiplicado por 10, porque aquí se establece 10. Entonces son realmente 50. ¿De acuerdo? Entonces esto es como unidad relativa. Por lo que cambia de acuerdo a qué tamaño de la fuente se establece en parent. ¿ De acuerdo? Entonces creo que en casos como este, es realmente buena idea usar EM porque tu tamaño ha subido, cambia de acuerdo a lo que pase con el tamaño de fuente aquí. Y podrías estar pensando, pero cuando algo así cambiaría en el futuro, aprenderás a, por ejemplo, cambiar de acuerdo al tamaño del navegador web, del usuario, del tamaño de fuente. Y entonces puedes simplemente cambiarlo en un solo lugar, no en todos los lugares posibles. No necesitarías cambiarlo en cada lugar posible, el tamaño de la fuente, solo cambiará el índice en Baldi, ¿verdad? Y todo en otros lugares se cambiará automáticamente porque lo que este Fink, lo calcularíamos, ¿verdad? que puedas, por ejemplo, en dispositivos pequeños como smartphones, puedes cambiar el tamaño de fuente a 10 píxeles. Pero para las personas que tienen dispositivo muy grande por defecto, borra y dijo, no sé tamaño de fuente a 24 píxeles, ¿verdad? Y este enlace se cambiará automáticamente y no necesitarás luego entrar en la primera letra de la muestra y luego no cambies el tamaño de la fuente. Simplemente lleva tiempo. Entonces creo que es buena idea usar yen. Entonces usamos la M en casos como este. Utilizamos píxeles cuando quieres tener algún valor para ser absolutos, ¿verdad? Nosotros, sólo queremos ser como para las imágenes por ejemplo. Y usamos el signo de porcentaje cuando queremos asegurarnos de que algo así como, por ejemplo, la muestra llevará demasiado territorio por ciento de 40 o 50 por ciento de todo el navegador web. Y siempre toma esto, paga así. Entonces estamos seguros ahora. Y recuerda que el signo porcentual ha subido, toma el 40 por ciento del padre y el padre en este caso está en audacia, ¿verdad? Cuerpo. Si cambiamos al padre, digamos que nos divertimos un poco. Yo lo hice. Y dije aquí la identificación a los nuevos padres. Ahora, nada ha cambiado. Es sólo porque entras a un nuevo padre y hacemos algo así como el color de fondo rojo, te darás cuenta de que el DFF es realmente un blog. Por defecto, 100 por ciento de onda, ¿verdad? Bot, oye, mira, ahora cuando hagamos algo así con, digamos 700 píxeles, ¿qué pasará? Como puedes ver, esta cosa adentro, que es este párrafo, toma sólo el 40% de este valor aquí, ¿de acuerdo? Digamos al 50%. Entonces significa que esta cosa toma lo que, punto cero 85 multiplicado por setecientos, trescientos cincuenta píxeles aquí mismo, porque toma el 50 por ciento del par y el tamaño. ¿ De acuerdo? Por lo que ahora se necesita el 50 por ciento de este bloque rojo alrededor. Siempre cuando no sabes lo que está pasando. Recuerda lo que este color de fondo , ayuda mucho, ¿de acuerdo? Te perderás muchas veces cuando estés creando algo en CSS y HTML, usa el color de fondo para asegurarte de lo que está pasando con los elementos aquí, correcto. O usa al inspector para ver, vale, Así que este padre de aquí, creo que el div es de 700 píxeles, ¿verdad? Eso está en la lección. Muchas gracias. 69. Cómo jugar con fuentes: Hola, amigo mío. El día de hoy vas a hablar de teléfonos. En primer lugar, pensemos por un segundo. ¿ Qué es una fuente? La fuente es algo que describe cómo debe verse cada letra del alfabeto o un carácter que desea utilizar, ¿verdad? Y se describe en algún tipo de jugadas en tu computadora. Tienes la carpeta en tu computadora, por ejemplo, en Windows acabamos de llamar a teléfonos. Y dentro del VDD tienes buenos Fives que describe cada letra. Dentro de un cinco, por ejemplo, Times New Roman. Y dice cómo debe verse cuando se utiliza esta fuente en particular. Ah, cuando usas ésta o ésta, lo que sea, ¿verdad? Entonces cambia la fuente. Cuando se cambia la familia de fuentes. ¿ Cómo lo cambiamos? Digamos que, en primer lugar, entramos en el style.css y escribimos algo como familia de guión de fuente. Y aquí como pueden ver, tenemos buena sugerencia. Puedes usar estas sugerencias como quieras. Entonces por ejemplo, éste y ves diferencias. Pero en primer lugar, necesitamos saber, Vamos a ver por qué incluso se molestan en escribir tantos tipos de ski de fuentes, ¿verdad? ¿ Y cuál se va a elegir? ¿ Cuál es la diferencia? ¿ Por qué incluso se llama familia? Ya ves, hay muchos tipos de teléfonos, pero son un poco similares entre sí. En ocasiones tienen algunas similitudes y las disimilitudes están conectadas en familia de fuentes. Entonces, por ejemplo, aquí hay una fuente monospace. Y la fuente monospace es tener algo así como el espacio. Estos modelos entre cada personaje, ¿verdad? Y cualquiera que quiera crear una fuente en esta partícula o familia que se llama monospace, debe seguir estas reglas, ¿de acuerdo? Para hacer este espacio entre, pueden hacer algunas diferencias en, en cada personaje, ¿verdad? ¿ Cómo funciona el logline de que deben seguir estas reglas? Entonces por eso se llama font-family porque, bueno, hay muchas familias, bots y siguen algún tipo de regla que es similar a ellos. Y, y se les llama de alguna manera, ¿verdad? Por ejemplo, tienes REI, tiene Verde, tengo casa y otras cosas así. Entonces para elegir una fuente, solo tienes que escribir el nombre de la fuente por defecto. El primero financiado es que estos aquí, por defecto, que se carga por el navegador web, se llama Times New Roman. Es el más popular. Como se puede ver, nada ha cambiado. Y nota también que uso los apóstrofos aquí. Porque cuando usas más de una palabra, necesitas conectarlos de alguna manera para decir que esta es una sola fuente. No, no libera diferentes fuentes, ¿verdad? Cuando escriba algo así, computadora pensará que estas son tres fuentes diferentes. Esto funciona sólo porque cuando nada coincide con las fuentes que están disponibles en tu computadora, se va a elegir la versión predeterminada. Entonces por defecto va a ser Times New Roman. Pero si escribes aquí siempre tendrás así. Todas estas fuentes no existen, ¿verdad? No hay teléfonos se llaman así y se va a elegir Times New Roman. Entonces cuando escribas aquí algo como, por ejemplo, Helvética, te darás cuenta de que creo que lo escribí erróneamente. Está bien. Como puedes ver, cambia, ¿verdad? Y lo genial de esto es que puedes escribir aquí muchas fuentes a la vez. Y lo haces porque a veces alguien no va a tener uno de estos pliegues. Estas son fuentes seguras. El que te mostré aquí, digamos fuente, eso significa que la mayoría de las veces casi todos los tendrán que escribir. No obstante, hay teléfonos. No sé cuándo uso, por ejemplo, este conjunto de fuentes, como estas de aquí, no estará disponible en todas partes, donde quiera. La mayoría de las veces alguien lo tendrá y puedes usarlo. ¿ Verdad? Y si este fondo no estará disponible, éste se utilizará. Si mareos no estará disponible. Este será útil. Si no, entonces esto, si no, entonces esto, está bien. Y este sólo se llama sans-serif, significa que esto es como familia. Eso está conectado a todas estas fuentes aquí a la izquierda. Y cuando alguien, cuando, cuando, cuando la computadora ve esto, necesita cargar el san-serif predeterminado. Font, ok, así que esto es como versión de copia de seguridad y lo escribes aquí en caso de que todos los demás no funcionen. ¿ De acuerdo? Intenta jugar con las fuentes que están disponibles aquí. De acuerdo, ¿a ver cómo se ven? Yo, o tal vez si se presentan en absoluto. Porque como dije, cuando cometes un error aquí, como puedes ver, ahora usamos el sello distintivo. Ahora usamos la Ginebra. Ahora usa la Verdana. Y luego usamos el san-serif. De acuerdo, Entonces cuando hay un error de ortografía, entonces usas el que es similar a éste, ¿verdad? Por eso usamos algunos de ellos aquí porque si alguien no lo tiene, Hagamos que se vea un poco Bueno. Todo similar a la que quieres que se vea, ¿verdad? Por eso eliges siempre los teléfonos que son de una fórmula porque sería estúpido, sabes, usar el espacio mono, por ejemplo aquí, ¿verdad? Porque esto se ve definitamente, ¿verdad? Por eso usas los teléfonos similares en una línea de uno. Bien. Por eso se llama familia. De acuerdo, tenemos también algo que solo llamaremos tamaño de fuente. Ya lo hemos usado muchas veces. No obstante, también hay, ya sabes, cosas como, por ejemplo, más grandes. Entonces haces que el tamaño de fuente sea más grande de lo que es ahora. Puede que te vuelvas parejo, aún más grande. No me gusta, nunca lo uses. Te recomiendo encarecidamente usar 1.5 AM o algo así porque sabes lo que las estás haciendo y cuando lo lees, sabes lo que está pasando. ¿ De acuerdo? También hay algo llamado variante de fuente. De verdad me encantó este. Observe que aquí hay algunas opciones, pero para ser honesto, la opción heredada se acaba de ver estos mundo heredero está en los padres. Entonces lo que se encarna el, lo respondido significa que no hay nada. El narval es sólo flota normal. Entonces nada ha cambiado. Y inicialmente es el valor por defecto del navegador web, ¿no? Y esto es sólo lo único que podemos elegir aquí. Simplemente llamaremos gorras pequeñas, y me encanta. Observe que esto se parece a por qué creamos un libro ahora, ¿no? Porque los libros se escriben así. Tenemos aquí la primera letra así, y más tarde, cada personaje está mayúscula. ¿ De acuerdo? Por eso se llama tazas pequeñas, es porque está mayúscula, pero está haciendo Es letra pequeña en mayúscula. Aviso. Observe que cuando no lo uso, por ejemplo, el ojo tiene un buen punto aquí, ¿verdad? Entonces la versión más grande no lo tiene, ¿verdad? Entonces, para ser honesto, esto hace que todas las fuentes sean mayúsculas, pero cambia su tamaño de fuente por el más pequeño. Y por eso tenemos un efecto fresco como este. De verdad me encanta hacer alguna página. Cuando haces una página con algunas historias, esto es bastante guay para gustarte realmente esto, ¿no? Y lo que es más, agregamos el efecto para la primera letra, ¿no? Y lo hizo aún mejor. Podemos quitarlo. Y aún nota que el primer personaje de eso que usamos como aquí es un poco más grande. Por eso se llama Small Cap, pequeña en mayúscula, ¿verdad? Entonces volvamos a aquí. Este efecto realmente conecta muy bien con esto. ¿De acuerdo? También hay algo que se llama aficionado húmedo y ya hemos aprendido sobre DID, pero hay más en ello. Observe que tenemos font-weight y podemos ponerlo no sólo para pernos, sino que aquí hay algunos valores de 100 a novecientos. Cien significa que algo debe ser lo más delgado posible. 900 significa que debe ser lo más audaz posible. El problema es que no todas las font-familia donde la partícula de formada soporta cada número desde aquí. Especialmente creado aquí en la parte inferior, unas clases donde dije peso de fuente de 100 a 900. Y aquí creo esa hora que no creé, así que vamos a crearla muy rápido. Entonces vamos a crear un div. Podemos simplemente hacer cosas así, eso lo llaman peso, ¿verdad? Y luego el número que numeramos por lo que no podemos usar el signo del dólar. Y necesitamos ¿cuántos de ellos? Necesitamos nueve de ellos. Y nosotros algo de contenido, ¿verdad? Entonces contenido, texto. Entonces ahora lo tenemos. Y como se puede ver. Cambiamos justo el texto aquí en la parte inferior de ciento ciento doscientos trescientos cuatrocientos quinientos, seiscientos. Por lo que significa que pesaba seis. De acuerdo, aplicamos algún texto en negrita aquí. Pero el problema es que usamos en nuestro DFF, no la familia de fuentes que está aquí. Usaremos el predeterminado, que es el Times New Roman, ¿verdad? Cuando accedemos al div, éste es uno predeterminado. Entonces cuando entramos en fuente, familia de fuentes, y lo dijimos dos veces, Times, New Roman, notarás que nada ha cambiado. No obstante, si usas el que está aquí, vale, Vamos a copiarlo. Observe que ahora hay una diferencia en muchos más niveles. Aquí mismo. No vemos diferencia, pero aquí es un poco más audaz. Aquí es aún más, y aquí está aún más audaz. Y aquí es bastante audaz, ¿verdad? Por lo que éste lo apoya. Vamos a quitarlo por un segundo. Observe que estos no, ¿verdad? Entonces hay una gran diferencia entre esta y esta fuente, aunque no haya gran diferencia en cómo aparecen. Primero, ¿verdad? Porque este soporta muchos niveles audaces. Y para ser honesto, a veces no quieres tener texto para estar atrevido como este, ¿verdad? Esto es realmente rudo. Se quiere tener un texto como este, por ejemplo, ¿verdad? Sólo un poco atrevido. Está bien. Entonces esto es font-weight. Y también tenemos algo que discutiremos. Estilo de fuente antiguo. El estilo de fuente te permite establecer la fuente que se escribirá como ocho por igual. Entonces es inclinada un poco, ¿verdad? Y tenemos también escuchar algo vamos a discutir oblicuo. Y para ser honesto, es muy similar, ¿verdad? Casi como si nada hubiera cambiado, pero hay poca diferencia que tal vez no necesitas ni recordar, pero vale la pena saberlo. Cuando ves que alguien usa Oblicua. Comer like es sólo la versión que se creó dentro de esta fuente. De acuerdo, hay un archivo que tiene bueno cada personaje, cómo está representado, ¿no? Y también es, también tiene un cinco donde muestra cómo debe verse cuando alguien usa el estilo de fuente Italia. Pero ya sabes, a veces no hay phi como éste. Tenga en cuenta que hay un archivo como este para cada fuente. Y luego puedes usar el oblicuo para solo hacer que cada letra se vea así, ¿de acuerdo? Y no llevas cómo se ve. Acabas de decir, Hey, quiero tenerlo escrito como Italia, pero no lo es, no necesita ser implementado, no necesita ser creado como el creador quería. Haz que parezca. De acuerdo, esa es la diferencia. De acuerdo, Entonces tenemos el tipo-estilo y para ser honestos, como en caso de la frontera, por ejemplo. ¿ Recuerdas que teníamos un más audaz y pudimos hacer una versión corta como estas de frontera, verdad? Podríamos usar el barniz, esa regla específica para esto, para esto y esto, pero podemos hacerlo en línea en caso de fuentes, también hay lo mismo aquí. Podemos copiar esto aquí. Y ahora sabemos que en primer lugar, necesitamos enviar el estilo de fuente y no lo cambiamos para que podamos enviarlo a la normalidad. Entonces vamos a poner las gorras pequeñas porque queremos conservar esta gorras pequeñas. Y entonces podemos enviar el font-weight a, por ejemplo, 600. Y entonces podemos cambiar el tamaño de la fuente, que es por ejemplo una M. Así que no lo cambiamos en absoluto. Y entonces no lo copié en alguna parte de aquí. Está bien. Entonces tenemos ¿qué? El nombre de la familia de la fuente para que podamos copiarlo desde aquí, así. Y como pueden ver, ponemos todas estas cosas. Podemos quitar esto de aquí arriba ahora en una línea. No obstante, tomémoslo en los comentarios para que puedas referirte a esto. No me gusta esta versión porque es larga y para ser honesto, es difícil recordar cuál, cuál es el trigo, ¿verdad? Bueno, podemos mover el ratón aquí y luego ver cuál es cuál. Pero aún así, De alguna manera prefiero en caso de fuentes porque, bueno, no las mandas muy a menudo para tener todos estos valores separados. Bueno, si estás moviendo tu código de tu computadora al servidor, entonces cineasta, por ejemplo. Encuentro un poco más, un poco más pequeño, ¿verdad? Entonces para hacerlo más pequeño, lo siento. Entonces toma menos espacio, ¿verdad? Style.css carga más rápido que tal vez es bueno tenerlo en una línea. Pero hay programas que harán que tu auto o tu CSS sea más pequeño para ti. Recomiendo encarecidamente usar este campo. No obstante, el deporte saber que algo así existe porque cuando ves algo así, no sabrías lo que hace. Es bueno saber también que puedes enviar font-size, line-height aquí. Entonces aquí, cuando es uno yo soy. Y cuando configuras el tamaño del teléfono, a la derecha, también puedes establecer qué tan grande es la altura de línea. Entonces, ¿cuál es el tamaño que el espacio entre cada línea? Entonces 1 por ejemplo, 5PM. ¿ Por qué esto? Funciona bien aquí. O 150 por ciento, depende de ti qué tipo de valor lo vas a usar. Esa es toda buena lección. Muchas gracias. 70. Fuentes personalizadas - Goofle Fonts: Hola mis amigos. Hoy aprenderás a adjuntar fuentes personalizadas a tu sitio web. Porque digamos que no te gustan los formularios predeterminados que tienes instalados en tu computadora, ¿verdad? Por lo que necesitas de alguna manera permitir que el usuario de tu sitio web descargue nuevos teléfonos. ¿Cómo hacerlo? La forma más fácil de usar el lado que se llama fonts.google.com. Esto es bastante impresionante porque las fuentes aquí son de uso gratuito. Son súper fáciles de configurar, y además se cargarán más rápido debido a algo bueno se llama la técnica de pre connect de la que no podemos hablar. Bien, entonces, ¿qué hacemos? En primer lugar, escribe algo aquí porque quieres ver cómo se verá la fuente. Será el texto que quieras verificar. Entonces, por ejemplo, esto es una muestra de textos, ¿verdad? Pero recuerda que aquí están las letras típicas que existen en casi todos los alfabetos, ¿verdad? Entonces esta es una buena idea. Si eres, por ejemplo, de Polonia para escribir las letras polacas, por ejemplo , como puedes ver, esta no lo admite. O quieres ver cómo se ven. Y claro, hay muchos otros países que tiene sus propios caracteres especiales, así que échales un vistazo antes aplicar la fuente porque tal vez te sorprenda que no funcione para cada personaje correctamente. Lo segundo es que se puede comprobar el tamaño, el tamaño de cada formado, cómo se ve. Porque a lo mejor quieres usar esto para el encabezado de la derecha. Tal vez esto se ve mejor para Heather, pero también se ve mal, por ejemplo, cuando es pequeño, ¿verdad? Entonces tú decides de esta manera. También puedes escuchar cambiar al tema oscuro para ver cómo se ve en el más oscuro con el tipo de sitio web. Y aquí puedes elegir las categorías de las cosas que quieres buscar, por ejemplo, quieres buscar solo la escritura a mano. Esto es genial, ¿verdad? Quieres buscar los textos dibujados a mano, escritos a mano. Entonces ejemplo, me encanta este, digamos el Pacífico. Sí, esto es lo que quiero usar de mi lado porque escribo poemas de mi lado y guau, esto va a quedar genial. Entonces, ¿cómo usarlo? Bueno, vas a hacer click en él. Y luego puedes descargar la familia, y luego puedes extraerla y así sucesivamente, así sucesivamente, así sucesivamente. Pero no lo hagas así. Debido a que la fuente, cargamos más lento de esta manera. Entonces ni siquiera voy a hablar de cómo hacerlo de esta manera. Porque la forma en que se debe hacer es usar el signo más aquí. Y entonces como pueden ver, tenemos aquí la forma ampliada de importarlo de su lado. Entonces te dice que necesitas incrustar una fuente en el sombrero usando este código. Por lo que sólo vamos a copiarlo, dando click sobre este botón aquí. Y vamos a entrar en Visual Studio Code. Y podemos ajustar, ponerla donde antes del CSS. ¿Por qué antes del CSS? Porque, bueno, no queremos cargar la fuente predeterminada ¿verdad? Antes de cargar esto. Así que pongámoslo aquí. Y después de eso, lo que necesitamos para aplicar la fuente, ¿verdad? Y el orden para aplicarlo, necesitamos escribir el nombre de la fuente como primera línea aquí. No podemos hacerlo así y simplemente ponerlo aquí, ¿verdad? Familia tipográfica, queremos que sea Pacifica. Y veamos si funciona en nuestro sitio. Como puedes ver, sí, funciona bien. Usamos el Pacífico ir ahora mismo. Si quieres usar otro formulario de Google, entonces necesitas ir a Google Fonts y por ejemplo digamos que queremos algo diferente. Ahora. Reiniciemos todo. Digamos que este me gusta mucho. Ahora puedo agregarlo aquí. Y como pueden ver, ahora podemos usar ambos a la vez. Como puedes ver aquí, tenemos escrito o lo que los Bruno A y también el Pacífico. Y para poder usarlo, simplemente lo voy a copiar en nuestro código de Visual Studio aquí. ¿Verdad? Ahora bien, si quiero usar el Bruno como C, me reuniría para usar aquí ¿qué? Esta familia de fuentes. Entonces así. Y ahora voy a usar los Bruno A's. Como se puede ver. Ahora bien, es Bruno, si quiero usar la llamada Pasifae en otro lugar, o tal vez quieras usarla para otra cosa. Como digamos que quieres tener aquí algo más, ¿verdad? Yo sólo quiero acceder a éste. Entonces solo haría otra cosa. Y solo voy a cambiar esta también. Porque esto va a ser por ejemplo el encabezado, ¿verdad? Que Bruno a's. Entonces tal vez sería aún mejor si escribo algo así como encabezado. Y aquí voy a hacer algo como gato, ¿no? Entonces para los encabezados, quiero usar. Esto después de la escuela para impuestos, quiero usar esto. Y si quieres dejar de usar uno de ellos, verdad, solo necesitas quitar esta parte, ¿verdad? No quiero esta. O simplemente puedes ir a este sitio web y te generará el código. Quieres, por ejemplo, dejar de usar el núcleo Pasiphae de lo que simplemente lo eliminaré. Y como pueden ver, este código se actualiza. La instalación es bastante genial. Y esta parte de código que agregamos aquí, ¿de qué es El responsable? Aquí tenemos algo, mi mensaje como pre connect. ¿Qué significa que algo está pre conectado? Significa que se va a cargar. Entonces antes de la conexión, antes de descargar los contenidos D. Entonces antes de descargar el teléfono y se acelera el proceso de carga de tu sitio web. Y si alguien acelera que toda la tinta de tu sitio web te va a sacar provecho porque tu web va a ser visitada con más frecuencia, porque así es como funciona Google en nuestra velocidad es muy, muy importante. Pero, ¿cómo funciona? Si quieres entenderlo teclado y si no, entonces solo sigue adelante. Solo necesitas agregarlo y no no, no te importa. Pero si quieres entenderlo, sigue escuchando. Entonces, cuando un navegador carga tu página web, tiene que buscar, tiene que obtener muchos recursos diferentes como archivos CSS, archivos JavaScript, tus imágenes en tu sitio, tu fuente, como esta, y muchos, muchos otros. Y todo eso lleva tiempo. Puede haber por ejemplo 100 recursos de tu lado. Además, demasiado gordo. Cada uno de estos recursos, el navegador tiene que establecer una conexión con el servidor donde se encuentran estos recursos. Y esto también lleva tiempo. Se pueden ubicar en muchos servidores diferentes. Y lleva tiempo simplemente conectarse al servidor. Entonces la técnica de pre connect implica el navegador establezca un preliminar, por lo que una inicial ahora nuestra conexión con el servidor antes de que comience a buscar recursos específicos. Bien, entonces solo va a establecer una conexión antes de que empiece a buscar recursos específicos. Entonces, ¿por qué el navegador está ocupado cargando por ejemplo una imagen de tu lado, Bien? La conexión a la fuente que tenemos aquí ya se estableció con la ayuda de la reconexión. Esto significa que cuando el navegador comienza a buscar el archivo de fuente específico real, la conexión al servidor ya está establecida y lista para usar. Entonces no necesitas conectarte y luego alimentarte, ya te has conectado a él. Por lo que reduce el tiempo que lleva descargar el archivo. Y debido a que simplemente no hay necesidad establecer una conexión repentina con el servidor, el navegador sólo tiene que realizar la descarga de datos en sí, bien, Así que sin tener que volver a conectarse al servidor, repito porque esta acción ya la realizó la procinética. Entonces, en definitiva, esto solo reduce la carga en tanque de una página web. Y por eso esta es la forma usar el tamaño de fuente personalizado. Por supuesto puedes descargar cuando otros que compres, compres algunos de ellos. No lo hagas. Mira cuántas familias de teléfonos hay aquí. ¿Por qué siquiera molestarse en buscar en otro lugar? Tienes que mantener contenido gratuito, muchos de ellos. Definitivamente encontrarás algo que se adapte a tu sitio web si no te gusta la fuente predeterminada. De esta manera, se va a cargar rápido y esto hará que su visita al sitio sea más frecuente. Solo hay menos que Muchas gracias.