Aprende HTML CSS JAVASCRIPT

1. Introducción: Hola chicos, bienvenidos al curso. Que HTML, CSS y JavaScript. Soy Priyanka, su instructora para este curso. Un poco de fondo de mí mismo. Tengo experiencia en desarrollo web full stack. También soy entusiasta de EIN Emma y he realizado numerosos proyectos en él. También tengo experiencia en docencia en línea y también soy autor en medio. Antes de comenzar a aprender el curso, debes entender por qué HTML, CSS y JavaScript. Html CSS y JavaScript son bloques de construcción de un sitio web. Forma lo mejor del marco front end. Aprender este curso te ayudará en tu carrera a convertirte en desarrollador. Entonces, ¿qué llegamos a aprender en este curso? En primer lugar, los fundamentos de HTML, formato de texto, formularios de lista, CSS y JavaScript. Y así temas avanzados como cómo puedes incrustar Google Maps en un sitio web, etc. Y también muchos proyectos prácticos y algunos videos extra. Entonces sin más preámbulos, empecemos y te deseo buena suerte y feliz aprendizaje. 2. Instalación de Notepad ++: Hola a todos y bienvenidos al curso. Vamos a iniciar el curso instalando un editor para escribir el código HTML. En nuestro caso, estamos utilizando Notepad Plus Plus. Entonces vamos a descargarlo e instalarlo en tu computadora. Abra un navegador web. Voy a abrir Google Chrome. Lo sabrás ¿verdad? Descargar Bloc de notas Plus, Plus. Voy a escribir para Windows. Si estás usando algún otro sistema operativo, puedes escribir eso. Estoy escribiendo Windows ocho. Ahora, da clic en Notepad Plus, Plus. Ahora podrías instalarlo. Ahora. Ahora da clic en descargar desde aquí. Ahora seleccione la configuración. Tengo máquina de 64 bits. Por lo que voy a descargar el instalador de Notepad Plus Plus Plus de descarga de 64 bits. Te recomendaría esto. Ahora da clic en él. Y como puedes ver esto consiguiendo descargarse. Ahora una vez que se descargue su archivo, haga clic en él y luego seleccione el idioma. Te recomendaría seleccionar inglés. Y luego presiona Ok. Presiona Siguiente, y luego acepta la licencia. Y luego selecciona la carpeta de destino. En mi caso, es seguro. Puedes elegir tu carpeta de destino. Ahora da clic en Siguiente y luego Instalar. Haga clic en Finalizar. Aquí, usa tu Bloc de notas Plus, Plus, completamente instalado y listo para que escribamos la coordenada. Entonces comencemos. 3. Primera página HTML: Hola a todos. Bienvenido de nuevo al curso. En este video, te voy a enseñar a escribir tu primer código HTML. Así que abre Notepad Plus, Plus desde el ícono en tu escritorio. Ahora crea un nuevo archivo. Entonces abramos primero la etiqueta HTML. Entonces tienes abierta la etiqueta HTML. Ahora, dale una barra para cerrarla. Entonces sea cual sea el código que tengas que escribir, tienes que escribirlo dentro de la etiqueta HTML. Ahora, vamos a escribir la etiqueta de cabeza y simultáneamente cerrarla. Dentro de la etiqueta de la cabeza. Tenemos que darle un título. Ahora cierra la etiqueta del título. Por lo que necesitamos darle un título a nuestra página HTML que estamos creando. Demos el título de esta primera página HTML. Ahora vamos a guardar esto, vaya a Archivo. Haga clic en Guardar como, o. También puedes usar este botón de guardar presente hasta ahora, voy a guardar mi archivo en mi escritorio. Puedes guardarlo donde quieras. Voy a ponerle el nombre de prueba primero. HTML de punto. No olvides esta extensión HTML de punto. Ahora guárdalo. Ahora antes de que lo ejecutemos, entendamos este título, pero con mucha claridad. Así que abre tu navegador web. Estoy abriendo Google Chrome aquí. Puedes abrir cualquier navegador web de tu elección. Ahora, como pueden ver, he abierto Google Chrome. Ahora. Ir a google.com. puede ver que está escrito aquí, Google. Entonces este es básicamente el título de esta página HTML. Ahora, volvamos a nuestro editor. Por lo que ya que hemos dado el título como primera página HTML, este aparecerá como el título de nuestra página. Ahora, déjenme pasar al siguiente paso. Aquí está el primer nodo HTML. Haga doble clic en él. Sí, como pueden ver, esta es mi página HTML y este es el título que aquí se muestra. Gracias por ver. En el siguiente video, vamos a aprender a crear el cuerpo de nuestra página HTML. 4. Etiqueta de cuerpo HTML: Hola a todos, Bienvenidos de nuevo al curso. En este video, vas a aprender a crear la parte del cuerpo de tu página HTML. Por lo que ir a Notepad Plus, Plus editor en el paso de la cubierta. Ahora crea un nuevo archivo. Entonces como ya sabes, necesitamos abrir la etiqueta HTML y cerrarla simultáneamente. Entonces tenemos que crear la cubierta de la cabeza. Después hay que darle un título a nuestra página y darle el título como cuerpo. Ya que vamos a aprender sobre el cuerpo de la página HTML. Ahora cierra la etiqueta de cabeza. Entonces después de esto, habíamos aprendido ahora a crear el body tag body y luego cerrarlo simultáneamente. Recuerda que tus etiquetas corporales deben estar por debajo de la alta tecnología. Cualquier cosa que escribas dentro de esta etiqueta corporal aparece en tu página HTML para entender su espectro. Eso es ir a nuestro navegador web. Estoy abriendo Google Chrome. Ahora, es ir a google.com. Urea. Entonces lo que sea que veas aquí, eso es Google escrito en tu pantalla y la barra de búsqueda, y lo que se muestra aquí está básicamente escrito dentro de la etiqueta body de esta página HTML. Por lo que ahora volvamos a nuestro editor de Notepad Plus, Plus. Ahora solo escribamos algo dentro de este cuerpo. Entonces estoy escribiendo esta parte del cuerpo fuera de nuestra página HTML. Ahora vamos a guardar este archivo. Haga clic en el botón Guardar. Voy a guardarlo como body dot HTML. No olvides la extensión HTML de punto. Ahora guárdalo. Voy a, mi próximo consejo. Aquí está body dot HTML. Entonces haga doble clic en él. Como pueden ver, mi título aquí es de cuerpo. Y esta es la parte del cuerpo donde había escrito esta es la parte del cuerpo de nuestra página HTML. Entonces lo que sea que escribas dentro del cuerpo que se muestra en la pantalla. Volvamos a nuestro editor de Notepad Plus Plus. Ahora esta etiqueta corporal tiene ciertos atributos con la ayuda de los cuales puedes manipularla. Déjame mostrarte cómo usar los atributos en la etiqueta body. Los atributos deben estar presentes dentro de la propia etiqueta corporal. Entonces el primer atributo es bg color. Las vesículas son sinónimo de color de fondo. Con la ayuda de este atributo, puedes establecer el color de fondo de tu página HTML. Entonces déjame establecer el color de fondo en rojo. Ahora, guárdalo. Ve al lugar donde te habías ahorrado. Aquí está, cuerpo. Como pueden ver, mi color de fondo ha sido cambiado de blanco a rojo. Puedes dar cualquier color de tu elección. Déjame mostrarte otro color. Supongamos rosa. Vuelve al cuerpo, recargado. Por lo que como se puede ver, el color se ha cambiado de rojo a rosa. Del mismo modo, existen otros atributos del cuerpo del texto. Así que solo usando cuál puedes estilizar tu cuerpo de acuerdo a tu elección será aprender esto en los próximos videos. Gracias por ver este video. En los siguientes videos, hay mucho más para que vengas. 5. Encabezamientos en HTML: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre los diferentes encabezados de HTML. Entonces, en tu escritorio, haz doble clic en el ícono Notepad Plus Plus. Por lo que tengo el editor talón abierto. Ahora abramos la etiqueta HTML. Todo esto. Recuerda, tienes que cerrar la tecnología simultáneamente. Por lo que he abierto etiqueta HTML. Ahora. Abra la etiqueta de la cabeza y simultáneamente cierre la etiqueta de la cabeza dentro del tech del anuncio, dé el título Tech TI TLV. Simultáneamente cerrarlo dentro del título, el título de esta página HTML. Entonces voy a dar el título como encabezamientos ya que hoy vamos a aprender encabezados. Entonces encabezamientos, sí, está hecho. Ahora. Haremos que el cuerpo abra la etiqueta corporal, la cerraremos simultáneamente. Hicimos la etiqueta corporal. Voy a dar el encabezamiento. Así que abre una etiqueta y escribe H1. Ahora escribe un texto a cualquier cosa en Lake. El primer encabezamiento. Ahora cierre la etiqueta H1. El primer encabezado es mi textura y dentro de la etiqueta H1. Entonces veamos qué pasa y salida. Así que guarda esto primero, haz clic en el ícono Guardar. Ahora, guárdala donde quieras y recuerda dónde estás ahorrando. Entonces lo voy a guardar en mi escritorio. Así que haz clic en Siguiente paso y escribe el nombre del archivo. Estoy dando headings.html. No olvides este punto HTML. Así que guárdalo. Ahora minimice al editor. Como puedes ver, se crea mi headings.html. Entonces voy a simplemente hacer doble clic en él y esperar a que se abra, regalarlo. Por lo que como pueden ver, aquí se muestra el primer encabezado. Entonces este fue nuestro primer rumbo. Ahora. Ahora vamos a añadir otra etiqueta llamada H2 y dar un textual. Supongamos que el segundo encabezado, y luego va a H2. Ahora, guárdalo y veamos qué pasa en la salida. Entonces volveremos a ella y se recarga. Aquí está mi segundo encabezamiento. Como puedes ver, esto, H1 y H2 D son básicamente las etiquetas de encabezado donde uno tiene el tamaño más grande y a medida que avanzas, entonces el tamaño disminuye. En HTML, hay seis tipos de encabezamiento. Entonces voy a probar, bien, TO h3. Entonces da el texto. La tercera edición. De acuerdo, ahora cierra la etiqueta. H3. Del mismo modo, h 456. Por lo que en comparación con sólo cambiar los bancos. Ahora aquí mismo para revisar todo a la vez nos dará la idea de cómo se verá esta longitud de frente en la pantalla. Entonces H5, correcto. Ahora, ciérralo una vez más. El último H6, derecho a la sexta partida. Y cierre la etiqueta h. Por lo que ahora guárdalo. Vuelve a Chrome o a cualquier navegador que estés usando y simplemente vuelve a cargar. Por lo que como se puede ver, la variación en el tamaño de los encabezados a medida que pasamos de H1 a H6. A medida que bajamos, el tamaño también disminuye. Para que puedas usar tu mazo de dolor según tu conveniencia. Gracias por ver chicos en los próximos videos, hay mucho más para que vengas. 6. Párrafo HTML<p>Etiqueta</p>: Hola a todos. Bienvenidos de nuevo al curso. En este video, vas a aprender sobre párrafos en una página HTML. Así que abre el editor de Notepad Plus Plus. Empecemos a escribir nuestro código. Entonces comencemos con la apertura de la etiqueta HTML. La etiqueta de la cabeza. Dale un título a tu página HTML. Le estoy dando el apretado el último párrafo. Cerca de la etiqueta de título, la etiqueta de cabeza. Abra la etiqueta del cuerpo. Simultáneamente. Closet. Ahora esta etiqueta de párrafo debe estar dentro del cuerpo. Por lo que abrir la etiqueta de párrafo podría ser. Y lo que sea que escribas dentro del párrafo Greg, eso se muestra en tu piel. Entonces déjame escribir este párrafo. No, es necesario cerrar la etiqueta p. Entonces vamos a salvarlo. Lo estoy nombrando como B dot HTML. Se puede dar cualquier nombre. Lo estoy guardando en mi escalón de cubierta. Entonces echemos un vistazo a la salida. Así que haz clic en el botón Ejecutar y lanzando Chrome. Por lo que como se puede ver usando la etiqueta p, también podemos escribir en la pantalla. Ahora, si quieres escribir otro párrafo, entonces vuelve a abrir la etiqueta p, ¿no? Este es otro párrafo. Y cierre la etiqueta p. Guárdalo. Otra vez, ejecútalo. Por lo que como pueden ver, he escrito dos párrafos. Por lo que de esta manera se pueden escribir múltiples párrafos. Entonces volvamos a nuestro editor. Ahora, si queremos en nuestro párrafo, debemos comenzar desde el centro de la pantalla. Entonces si damos espacios aquí, esto no se detectará. A ver, guárdalo. Ahora vamos a ejecutarlo. Lanzamiento en Chrome. Comose puede ver, esas especies no se han detectado aquí. Entonces para hacer eso, podemos usar la etiqueta llamada pre. Así que usemos una etiqueta llamada simultáneamente terminó. Guárdalo. Ahora veamos la salida. Por lo que como se puede ver, como habíamos utilizado p, Así que hay un espacio en el frente. Entonces ahora si presionas Enter y escribes algo, supongamos hola. Después se muestra en tu pantalla tal y como está. Entonces sí lo ejecuto. Sí, así que hola viene abajo. Se trata de un párrafo. De esta manera podrás manipular con tu párrafo y escribir tantos párrafos como quieras. Gracias por ver este video. 7. Cómo insertar imágenes: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo agregar imágenes a tu página web. Así que abre un editor de Bloc de notas. Ahora, crea un nuevo archivo. Comienza con la etiqueta HTML. Entonces terminamos con la parte de cabeza. He dado el título como imágenes. Ahora comencemos la parte inferior. El código para insertar imágenes debe estar dentro de la parte del cuerpo. Por lo que para insertar la imagen, verás la etiqueta IMG. La etiqueta IMG no necesita ninguna etiqueta de cierre para ello. Por lo que sabías punto cerrarlo. Ahora. Tiene un atributo llamado SRC. Src significa fuente. Por lo que necesitamos dar la fuente de la imagen. Entonces déjame ir con Dexter. Vamos a crear una carpeta aquí. Estoy nombrando las imágenes de la carpeta. Ahora agreguemos una imagen en esto. Ya tengo una imagen en mi sección de imágenes. Entonces sólo voy a copiarlo e ir a mi siguiente tubo y pegarlo a. Entonces aquí tengo esta imagen. Ahora, haga clic derecho en esta imagen. Ve a Propiedades y solo cópialo un nombre. Ahora, vuelve al Bloc de notas, editor. Escribir es igual, y luego el nombre de la carpeta slash, el nombre de la imagen. Basada en ella. Ya está hecho. Ahora vamos a guardar este archivo. Da clic en el botón Guardar, y lo voy a guardar en mi Dexter. Hay una carpeta llamada HTML. Voy a guardarlo ahí, ¿verdad? Ing dot HTML, el nombre del archivo se le puede dar cualquier nombre. Yo lo estoy guardando. Ahora, volvamos a mi libro de texto. Entonces aquí está el archivo HTML donde hay ING dot HTML. Ahora también poner estas imágenes archivo dentro de este archivo HTML. Por lo que este IMG dot HTML tendrá una referencia a este archivo de imágenes donde se encuentra la imagen. Entonces terminamos. Ahora, vamos a ejecutarlo en Chrome. Así como se puede ver la imagen del cielo aquí. Puede seleccionar cualquier opción de combustible importante. De esta manera, puedes insertar una imagen a tu página HTML. Ahora también podemos cambiar el alto y ancho de la imagen que estamos insertando. Volvamos a nuestro editor. La etiqueta IMG tiene atributos llamados height y width. Así que vamos a usar esos HEI GH altura igual, usted puede dar cualquier altura de futuros. Yo estoy dando 500. Y el ancho es igual a yo estoy dando mil. Salvamos esto y corramos. Ahora como puedes ver, se ha cambiado el tamaño de la imagen. Puede disminuir aún más el tamaño o aumentar el tamaño de acuerdo a su conveniencia y elección. Gracias por ver este video. Sigue viendo más videos para aprender más sobre HTML. 8. Cómo implementar hipervínculos: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre hipervínculos. Así que abre el editor de Notepad Plus Plus y crea un nuevo archivo. Ahora en este video, voy a hacer archivos HTML y después enlazarlos. Ahora para entender mejor el concepto de hipervínculo, tomemos un ejemplo de la vida real. Ahora desde tu computadora, abre cualquier navegador web. Estoy abriendo Google Chrome aquí. Ahora déjame buscar en un sitio web llamado Wikipedia. Entra en ella. Ahora, como puedes ver, esta es una página web de wikipedia.org G. Ahora, como puedes ver aquí, está escrita una pequeña esquina de ella en negrita letras azules con subyacente. Por lo que esto indica que hay un hipervínculo en esto. Entonces al dar clic en él, aparece otra página web. Entonces este es el concepto de hipervínculo. Ahora vamos a implementarlo en nuestra página web. Así que vuelve a tu editor y crea una página HTML. Entonces como pueden ver, terminé con la cabeza, pero he dado mi título como mi página web. Ahora comencemos el cuerpo. Ahora dentro de la etiqueta del cuerpo, he escrito un encabezado llamado welcome to my page in H1 heading. Y he escrito un párrafo que dice para saber más da clic aquí. Aquí, voy a anclar, abrir una etiqueta y simultáneamente cerrarla. Por lo que esta será la parte. Al hacer clic en él, navega a otra página web. Ahora esta E, que es la etiqueta de anclaje, tiene un atributo llamado HR. Entonces es el hipervínculo. Nuestra referencia HTML, lo que usted diga. Ahora dentro de estas comillas dobles, es necesario dar el nombre de la página web a la que desea navegar. Ahora vamos a guardar este archivo. Guarda como lo voy a guardar en mi deck, detente dentro de un archivo llamado HTML. Aquí está. Démosle un nombre. Entonces le estoy dando el nombre es la playa. HTML de un punto. Ahora guárdalo. Como pueden ver, aquí tengo la carpeta HTML. Dentro de esto, tengo página web HTML de un punto. Ahora vamos a crear otro archivo HTML. Así que crea nuevo archivo y escribe en tu HTML. He dado el título de mi playa como detalles. Dentro de la etiqueta del cuerpo, voy a agregar dos párrafos. Yo soy. Se puede escribir a nombre. Después cierra la etiqueta de párrafo. Y otro párrafo. Creo que va derecho a designación. Y luego la etiqueta de párrafo. Ahora guarda este archivo. Recuerda, debes guardar este archivo en la carpeta en la que has guardado tu página anterior. Entonces como había guardado mi página web anterior en esta carpeta HTML. Entonces voy a guardar esto en esa carpeta solamente. Así que déjenme dar el nombre como página web para apuntar HTML. Y ahora guárdalo. Por lo que ahora tenemos el nombre de esta página web. Así que volvamos a una página HTML de un punto. Y dentro de esta H ref, vamos a la página derecha dos puntos HTML. Ahora vamos a guardarlo. Ahora vamos a ejecutar este archivo. Así que haz clic en ejecutar y lanzar en Chrome. Te vas a lanzar en cualquier navegador web. Ahora, como puedes ver para saber más, da clic aquí. Este texto ha sido subrayado y está en el color azul. No has mencionado ningún color ahí, pero aún así es azul porque está vinculado. Ahora a medida que haces clic en nuestro verde azulado, puedes ver que estás dirigido a tu página web para que sea un detalle. Tienes aquí este título que se llama detalles. Aquí tienes tu designación Neiman. Ahora, al dar clic en la parte posterior, se está navegando a su página web anterior. De esta manera, puede enlazar múltiples páginas web según su requerimiento. Gracias por ver este video. Sigue observando para aprender más. 9. Introducción al formato de texto: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre el formato de texto en HTML. Ahora, abra el editor de Notepad Plus Plus. Crear un nuevo archivo. Ahora como pueden ver, ya terminé con la estructura básica de mi página HTML. Ahora, dentro de la parte del cuerpo, voy a escribir un párrafo llamado esto es texto. La etiqueta p. Ahora primer objetivo es hacer que el texto se involucre. Entonces lo que vamos a hacer es escribir otro párrafo y usar la pila be V significa negrita y derecha. Se trata de texto en negrita. Y la baraja grande. Y simultáneamente la etiqueta de párrafo. Ahora guardemos esto. Voy a guardarlo en mi cubierta. Aún así. Dale un nombre. Y guarda esto. Ahora vamos a correr en la barbilla Cromo. Ahora como pueden ver, el párrafo que había escrito, este es un texto. Y cuando habían dado la etiqueta en negrita, es decir B, los textos que estaba dentro la etiqueta en negrita está en negrita. Por lo que de esta manera, se puede poner el texto en negrita. Ahora veamos cómo podemos escribir un texto en él se filtra. Así que crea otro párrafo y usa esta etiqueta llamada i. lo representa. Entonces voy a escribir esto es texto y Ditech y la etiqueta p. Guárdalo. Ahora corre. Por lo que como pueden ver, este texto está en Italia. Ahora, veamos cómo podemos convertir un texto en superíndice y subíndice. Entonces para eso, de nuevo, empieza una etiqueta de párrafo. Ahora déjame escribir el texto. La fórmula química para el agua es, sabemos que la fórmula química del agua es H2O. Entonces dos es un subíndice. Entonces vamos a escribir H. Luego en esta pila llamada sub significa subíndice. Vamos a escribir dos. Y luego vamos a acabar con el subíndice. Después escribe o, y luego cierra. Entonces parte de la tecnología, guarda esto. Veamos la salida. Entonces como pueden ver, la fórmula química para el agua es H2O, donde dos es el subíndice, ya que habíamos escrito a dentro de la etiqueta del subíndice. Ahora aprendamos sobre el superíndice. Entonces déjenme comenzar otro párrafo. Ahora para implementar superíndice, voy a escribir una fórmula matemática. Escribamos x más y. y luego voy a escribir cuadrado entero. Entonces para eso, necesito el superíndice S UP y luego dos. Y luego terminar el superíndice saber iguales, luego otra vez x-cuadrado. Por lo que otra vez el subíndice y el superíndice. No olvides acabar con ellos porque de lo contrario tus textos enteros estarán en forma de superíndice y luego y-cuadrado. Así que de nuevo, abre la etiqueta de super script y escribe en y luego termina el superíndice más dos x y Así como notamos la fórmula, ahora cerremos esta etiqueta de párrafo y luego la guardemos. Veamos la salida. Por lo que como se puede ver, estos dos está en forma de superíndice. Ahora, echemos un vistazo a las otras etiquetas que podemos usar para dar formato a nuestra foto de textos. Por lo que la siguiente etiqueta se llama fuerte. Por lo que la etiqueta de inicio llamó fuerte. Y DERECHO A. Este es un texto fuerte. Y la etiqueta fuerte. Y luego la presa. Guárdalo y ejecutarlo. Como pueden ver, este es nuestro texto fuerte, que es un poco más grandes insights además de negrita. Lo siguiente que tenemos es pequeño. Entonces empieza otro párrafo y usa la etiqueta llamada pequeña. Y luego a la derecha, este es texto pequeño. Esto atacará la etiqueta p. Ahora guarda esto y corre. De manera que como pueden ver, se ha reducido el tamaño del texto. Entonces este es nuestro pequeño texto. Ahora volvamos al editor. El siguiente tag es Mark, que básicamente va a resaltar nuestro texto. Entonces usémoslo. Abrir una etiqueta llamada MAR puede marcar. ¿ Verdad? Esto se resalta entonces. Y la etiqueta de marca, la etiqueta P. Ahora guarda esto y corre. Por lo que como puedes ver, aquí se resalta tu texto. Veamos otra etiqueta llamada del. Básicamente va a cruzar la palabra que vas a escribir dentro de ella. Echemos un vistazo. Por lo que empezar a atacar llamado d l del. Y bien, esto se elimina. Y terminar con el del tag. Y luego la etiqueta p. Ahora guarda esto. Y vamos a ejecutarlo. Por lo que como se puede ver, esta parte se elimina. Entonces hay una línea en él. Por lo que estas son las diferentes formas en las que puedes dar formato a tu texto y usarlos en tu página web. En el siguiente video, veremos más formas de cómo puedes formatear tu texto. Gracias por ver este video y practicar esto para familiarizarse con las etiquetas. 10. Formateo de textos - Color de texto: Hola a todos, Bienvenidos de nuevo al curso. En este video, voy a continuar con el formato de texto en HTML. Así que abre el editor de Notepad Plus Plus. Crear un nuevo archivo. Comienza con la estructura básica de una página HTML. Entonces terminamos con la estructura básica de tu página HTML. Ahora, te voy a mostrar cómo establecer colores a los textos que vas a usar una nueva página web. Entonces para eso, déjame escribir el párrafo. Esto es azul, la etiqueta p. Ahora quiero establecer el color de este texto como azul. Por eso. Dentro del PayTech, usa el atributo llamado style. Dentro del atributo style, voy a especificar el color del texto. Ahora, comenzando comentarios redactados y color derecho, C-O-L-O-R. Color correcto de su elección. Lo estoy poniendo en azul. Así BL ui y luego dar un punto y coma y luego cerrar la coma invertida. Ahora vamos a guardar este archivo. Guardar como, voy a nombrarlo como formato de texto para punto HTML. Y lo voy a guardar en mi escalón de cubierta. Así que Guárdalo. Ahora vamos a ejecutarlo. Ahora. Como pueden ver, el texto, esto es azul, está en el color azul. De esta manera, puedes establecer el color de tu texto. Puedes usar cualquier color de tu elección. Déjame mostrarte otro. Sólo copia la frase y pégala. Ahora, voy a poner el color como suponga rojo. Y voy a escribir aquí, esto es rojo. Ahora simplemente guárdalo y ejecútalo. Por lo que como pueden ver, el texto aquí es de color rojo. Puedes elegir cualquier color de tu elección, sea cual sea el color que quieras configurar a tu texto, puedes usarlos. Ahora habrá escrito más párrafos con color magenta, verde. Por lo que también puedes usar esto. Ahora aquí he escrito más párrafos usando diferentes colores como magenta, verde. Por lo que ahora cuando lo ejecuto, se puede ver el color magenta y el color verde. Por lo que estos son los colores básicos que puedes usar para volver a colorear tu texto. Aparte de estos, hay muchos colores diferentes que puedes usar para colorear tu texto. Ahora, les voy a mostrar otro enfoque de colorear su texto. Para eso empieza otro párrafo y escribe cualquier cosa. Cierre la etiqueta p. Nuevamente. Escribe que el estilo de atributo es igual, y entre comillas dobles, ¿verdad? Comas de color C-O-L-O-R estrechamente invertidas. Ahora dentro de este hash derecho. Entonces si F seguido de cuatro ceros, este es básicamente el código hexadecimal para un color rojo. Entonces ahora vamos a guardarlo y ejecutarlo. Por lo que como puedes ver, el último texto está coloreado en rojo. Volvamos a nuestro editor. Por lo que esta también es una forma en que puedes establecer el color de tus textos. Existen numerosos colores de los que puedes seleccionar tu color. Html ofrece 146 tonos de colores en forma de código hexadecimal para que los uses en tu texto. Te voy a mostrar esa plantilla de todos los colores junto con el código hexadecimal para que puedas usar en tu texto cada vez que escribas cualquier página HTML. Entonces todo esto se trataba de cómo establecer colores a tu texto. 11. Formateo de textos - Tamaño de texto: Hola a todos, Bienvenidos de nuevo al curso. En este video, voy a continuar con el formato de texto en HTML al abrir un nuevo archivo. Y empezar con la estructura básica de HTML. Estamos hechos con la estructura básica de la página HTML. Ahora dentro de la sección del cuerpo, inicie un párrafo, texto, y cierre la etiqueta p. De acuerdo, el atributo de estilo es igual a continuación, abra el comercio invertido y fuente derecha FIN diferente y darle un guión. Y luego el tamaño correcto. Tienes una columna y escribe el tamaño de la fuente que deseas. Supongamos que estoy haciendo 200%. Cierre las comas invertidas. Ahora, guarda este archivo. Ahora vamos a ejecutarlo. Entoncescomo pueden ver, este es un párrafo que tiene el tamaño del 200 por ciento. Ahora para comparar, escribamos otro párrafo y cambiemos su tamaño. Simplemente copia este párrafo. Y detalle de base. Y el tamaño del diesel al 300 por ciento. Ahora guarda esto. Veamos cuál es la salida ahora. Como pueden ver, estos fueron mis textos de 200% de tamaño y este es de 300 por ciento de tamaño. Entonces, en esto, puedes establecer tamaño variable a tu texto. Ahora veamos qué pasa si le doy un 100 por ciento a los tamaños de texto. Por lo que ahora permítanme fijar el tamaño del texto al 200 por ciento. Ahora guárdalo. Y vamos a ver la salida. Entonces, como pueden ver, se trata de texto al 100 por ciento, que es mucho más pequeño en tamaño en comparación con otros. 12. Formateo de textos - Alineación de texto: Hola a todos, Bienvenidos de nuevo al curso. En este video, voy a continuar con el formato de texto en HTML. Abra un nuevo archivo, y comience con la estructura básica de una página HTML. Entonces, después de que termines con la estructura básica dentro del cuerpo, inicia un párrafo. Y la etiqueta p. Ahora de nuevo, escribe el atributo style. Y dentro de comas invertidas, texto a la derecha, línea de guión, y dar dos puntos y centro derecho. Por lo que esto establecerá sus textos en el centro de la pantalla. Ahora vamos a guardarlo. Vamos a ejecutarlo. Por lo que como se puede ver, este es un párrafo se establece en el medio de la pantalla. Entonces también podemos alinear el texto al lado derecho o izquierdo de tu pantalla. Entonces para eso, de nuevo, acude al editor y luego copia este párrafo. No es necesario volver a escribirlo todo. Y pegarlo por aquí y cambiar la alineación para escribir. Guarde esto. Ahora, corre. Por lo que como puedes ver aquí, tu texto está alineado al lado derecho de la pantalla. De igual forma, puedes hacer eso al lado izquierdo de la pantalla. Como ya sabes por defecto está en el lado izquierdo. Por lo que puede mencionar, no se mencionan que según su elección. Pero para el centro y la derecha, puedes usar text-align y right center. Muy bien. 13. Formateo de textos - Familia de fuentes: Hola a todos, Bienvenidos de nuevo al curso. En este video, voy a continuar con el formato de texto en HTML. Abra un nuevo archivo HTML, y comience con la estructura básica. Ahora dentro del cuerpo, escribe un párrafo. Así que después de que hayas terminado de escribir el párrafo, ahora dentro de la etiqueta p, empieza con el atributo style, luego da igual que lo hicimos en el comercio invertido, fuente derecha. Dash familia y dar un colon 80. Cierre la coma invertida, guarde el archivo. Guárdalo, ejecútalo. Por lo que como pueden ver, mi texto es del estilo ADL. Por lo que de esta manera, puedes configurar diferentes estilos a tu texto. Ahora aquí tengo una plantilla para ti de diferentes familias de fuentes que están disponibles en HTML, empezando desde Arial hasta Times New Roman Georgia. Y para impactar. Puedes probar todas estas fichas y luego usarlas para diseñar tu página web. Te voy a mostrar algo de la familia tipográfica en este video. Entonces vamos a ver. Por lo que ahora aquí te estoy mostrando algunos de los estilos de fuente como Arial, Arial Black, Georgia, Times, New Roman e impacto para que entiendas la diferencia entre ellos. Entonces vamos a guardar este archivo. Por lo que como puedes ver, estos son los diferentes estilos de texto. Esto es ADL que Arial negro. Después Georgia, entonces es Times New Roman. Y esto tiene impacto. Puedes probar cualquier estilo de la lista de familias de fuentes que te han mostrado e implementarlas en tu página web. Gracias por ver este video. Practica esto y úsalo para diseñar tu página web. 14. Listas - Lista ordenada: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre las listas de auditoría. Entonces para ese editor de Notepad Plus Plus abierto en tu próximo trabajo. Y ahora crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora una vez que termines dentro de la etiqueta corporal, ¿verdad? O significa lista ordenada. Entonces empieza a etiquetar y al mismo tiempo terminó. Ahora dentro de esta etiqueta de aceite, puedes listar los artículos que deseas listar. Ahora voy a escribir LI y luego mi primer artículo, supongamos primer elemento, y luego cerrar la etiqueta LI. Ahora de nuevo, abre la iluminación y derecha segundo elemento. Y ciérralo. Tambiénpuedes agregar otro artículo. Ahora, LI el tercer elemento derecho, y cerrar la cubierta LA. Entonces esto es suficiente. Ahora, guardemos esto. Voy a guardarlo en mi próximo a. Ahora, guarda esto y vamos a ejecutarlo. Por lo que como pueden ver aquí, mis artículos, acabamos de numerar con 12 entradas ya que es lista ordenada. Entonces la lista viene con audio que es 123 en una secuencia. Ahora, también podemos cambiar el tipo de secuencia que se desea utilizar. Entonces esta es la lista ordenada básica. Para cambiar esta secuencia de uno a tres listado, que es por defecto. Ahora déjame agregar otra lista ordenada. Entonces para eso, copia esto, y pega aquí. Ahora para cambiar el tipo de secuencia de listado, podemos usar el atributo llamado tipo dentro de la etiqueta de aceite, derecha TIP. Cada tipo entonces iguala y luego empieza con comas invertidas y justo dentro de a. así que en este caso, mi lista va a empezar con mayúscula a, seguida de B, C. Ahora, vamos a guardarlo y ver cuál es la salida. Entonces como puedes ver, mis ítems han sido listados y la secuencia es a, b, c. Así que de esta manera puedes cambiar el tipo de lista que deseas usar. Ahora, permítanme volver a copiar esto y veamos alguna otra mecanografía. Ahora copia esta parte y pega aquí. Ahora déjame cambiar el tipo a Smalley. Salvamos esto, y luego corramos. Por lo que como puedes ver, el tipo de estilo es Smalley, seguido de B y C. Ahora de esta manera puedes darle estilo. Ahora déjame mostrarte otros tipos. Pega esto otra vez aquí, y déjame escribir aquí. Yo guardo esto y lo ejecuto. Por lo que como pueden ver, mi lista se ordena usando secuencia de números romanos. Por lo que estos son los tipos que puedes seleccionar para usar en tu lista. Gracias por ver este video. En el siguiente video, aprenderemos sobre las listas descriptivas. 15. Listas - Lista no ordenada: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre listas en HTML. Entonces para eso, abre el editor de Notepad Plus Plus. Crear un nuevo archivo. decirte que hay tres tipos de listas en HTML. Lista ordenada, lista desordenada y lista descriptiva. Entonces los veremos uno por uno. Comencemos con una lista ordenada. Así que empieza con la estructura básica de una página HTML. Después de que termines de escribir la estructura básica dentro del cuerpo, ¿no? Usted, usted representa lista desordenada. Por lo tanto simultáneo para que necesites cerrar que etiquetarás. Ahora dentro de esta etiqueta UL, puedes escribir la lista de artículos. Ahora dentro de la etiqueta UL, ojo derecho y luego ciérrela. Ahora lo que escribas dentro de esta etiqueta LI se mostrará como lista en tu pantalla. Ahora escribamos algo. Supongamos que el primer elemento, luego de nuevo, abra la etiqueta LI y el segundo elemento nocturno. Por lo que como puedes ver, después de cada artículo, tienes que cerrar el a light tech. Entonces sea lo que sea que haya, no queríamos una tecnología ligera será tu único artículo. Ahora, puedes seguir agregando el tercer elemento. Sólo guarda esto. Ahora vamos a ejecutarlo. Estoy lanzando en Firefox. Puedes lanzarte en cualquier navegador web de tu elección. Entonces como pueden ver aquí, mis tres artículos marcados con balas, y luego también podemos cambiar el estilo de enumerar las cosas. Entonces para eso, vuelve al editor y copia esta parte. No tenemos que volver a escribirlo. Negocio y pegarlo a. Dentro de esto etiquetarás, voy a usar el atributo llamado style equals. Entonces no invertimos cotizaciones, ¿verdad? Lista. Estilo, tipo. Ahora dale dos puntos y supongamos derecho, tan bueno. Y luego terminar en lo que codifica. Ahora guardemos esto y ejecutémoslo. Ahora como puedes ver, el estilo de tu anuncio se cambia a llamado de balas. Será por defecto. Y también puedes cambiar el estilo así. Por lo que hay otros tipos de estilismo que te mostramos otro. Por lo que de nuevo, copia esta parte y pega. Ahora dentro de este lista-estilo-tipo, derecho TO al cuadrado. Y guarda esto. Ahora cuando lo ejecutas, puedes ver la lista niño es cuadrados. También puedes listar tus artículos incluso sin ningún estilo. Para eso, acude a tu editor. Y dentro del tipo de estilo, ¿no? Ninguno. Y ejecútalo. Entonces como puedes ver, el estilo no es ninguno. Estas son las formas en que puedes listar tus artículos usando una lista ordenada. Gracias por ver este video. En el siguiente video, conoceremos sobre lista de auditorías. 16. Listas - Lista de descriptivos: Hola y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre lista descriptiva. Entonces para eso, ve al editor de Notepad Plus Plus y crea un nuevo archivo. Ahora comencemos con una estructura básica de una página HTML. Ahora una vez que termines dentro de la etiqueta corporal, ¿verdad? D significa lista descriptiva y simultáneamente cierra la etiqueta de trato. Ahora dentro de esta etiqueta de trato, puedes escribir los elementos de la lista para eso aquí mismo, d t. Y dentro de esto, escribe el nombre del elemento de la lista. Por lo que voy a escribir a su primer artículo y luego cerrar el DD DAG. Ahora, si quiero agregar una descripción al elemento de la lista que he agregado, entonces abra la etiqueta DD. Ahora, escribe una descripción para tu artículo. Voy a escribir aquí, supongamos que este es mi primer Item, y luego cerrar la etiqueta DD. Del mismo modo, puedes agregar más artículos a esto. Así que abre de nuevo deck DT y luego escribe segundo elemento. Cierre la etiqueta DT y abra la etiqueta DD. Escribe una descripción. Y luego más cerca de detectar. Puedes agregar más artículos a esto. Por lo que ahora lo estoy guardando. Nombre descriptivo del archivo list.html. Y déjame guardar esto ahora. Ahora vamos a ejecutarlo. Por lo que como se puede ver en la salida aquí, los dos elementos y con una descripción de H. Gracias por ver este video. En el siguiente video, te voy a enseñar sobre listas anidadas. 17. Listas - Lista anidada: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre listas anidadas. Entonces para eso, ve al editor de Notepad Plus Plus. Ahora crea un nuevo archivo. Comienza con la estructura básica de una página HTML. Una vez que termines dentro de la etiqueta corporal, ¿verdad? Ah, en el que destaca lista de auditoría. Por lo que estoy seleccionando lista ordenada como mi lista de padres. Voy a usar lista desordenada para mi sublista. Por lo que el técnico petrolero, ahora dentro de esta etiqueta OL, el primer elemento de tu lista de padres. Entonces voy a escribir el ítem uno y luego iniciar el sublista. Voy a usar UL para mi sublista. Entonces escribe los artículos sublistas. Voy a escribir el subítem uno. Después cierra el técnico de luz, y luego a la derecha. Subítem para cerrar el posterior. cerca tenderás también. No, ya terminaste con la sublista que está debajo de esto, etiquetarás. Y hay que cerrar también la etiqueta LI, que empezaste aquí mismo al principio del artículo te advierten, no quiero ordenarla. Ahora. Agreguemos otro artículo. Entonces para eso, solo copia esta parte y pega aquí. Voy a cambiar esto al punto dos. Y me quedo con la muñeca como antes. Entonces vamos a salvar esto. Voy a nombrarlo como lista anidada punto HTML. Lo estoy guardando en mi próximo a. Ahora guarda esto y corre. De manera que como puedes ver aquí en los ítems de la lista padre, ítem uno y ítem dos. Y dentro de la sublista tengo el sub ítem 12. También puedes alterar al padre y al sublista. Puede usarnos como su lista de padres y OLS su sublista según su elección. Para que puedas probar todas las combinaciones posibles en tu lista anidada. También puede agregar tres niveles de lista anidada. Déjame mostrarte uno. Por eso. Dentro del subítem uno, quiero agregar un subítem más para eso. Aquí mismo. Puede usar OLS para su elección. Voy a usar UL. Y estoy configurando el tipo. Supongamos iguales, luego a la derecha, lista, estilo, tipo. Y luego escribir cuadrado. Puedes usar cualquier estilo de tu elección. Ahora ya terminaste con nosotros. Así que cierra la etiqueta UL. Y luego dentro de esto, a la derecha, tu ItemName. Supongamos las sublistas dos y el ítem uno. Cierra la tecnología de la luz. Añade tantos artículos como quieras. Ahora otra vez, sublistas al punto dos. Ahora detengamos aquí y guardemos esto. Y vamos a ver la salida. Por lo que como pueden ver, hay tres niveles de sublista. Esta la lista de padres es el primer nivel de sublista. Y este segundo nivel de sublistas, puedes agregar tantos como quieras. Por lo que de esta manera se pueden crear listas anidadas. Gracias por ver este video y seguir viendo para saber más. 18. CSS en línea: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre CSS, que es Cascading Style Sheets. Css se utiliza para estilizar nuestras páginas web. Esto nos ayudará a diseñar nuestras páginas web de una mejor manera. En este video, te voy a enseñar sobre CSS inline. Entonces comencemos. Así que abra el editor de Notepad Plus Plus, y luego cree un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Dentro de la sección del cuerpo, ¿verdad? Algunos elementos. Voy a escribir H1 para dar un encabezado. Entonces supongamos que mi página web es mi rubro. Ahora cierra la etiqueta H1 y agreguemos un párrafo. ¿ Verdad? Esta es mi página web. Así que cierra la etiqueta p. Ahora tomemos los elementos. Ahora, quiero que mi color de fondo sea amarillo. Entonces para eso, usa este atributo llamado estilo y escribe fondo, guión, CEO, color, y luego dale dos puntos y escribe cualquier color. Voy a escribir dos amarillos aquí. Puedes usar cualquier color. E incluso puedes usar código hexadecimal para establecer el color. Ahora en la etiqueta H1, voy a escribir estilo. Y luego iguala, luego escribe texto, traza una línea, luego dos puntos, y escribe CEN DER. Esto colocará el encabezado en el centro de la pantalla. Ahora cierre la coma invertida y dentro de la etiqueta p, nuevamente, escriba los atributos estilo igual a derecha, color C-O-L-O-R. Esto ayudará a establecer el color del texto. Estoy configurando el color del texto en rojo. Se puede elegir cualquier color. Ahora, dale un punto y coma, y voy a escribir otro atributo de estilo llamado tamaño de fuente. Entonces si un guión N D es Isaac E. Ya lo hemos aprendido en la acción del formato de texto. lo estamos usando otra vez. Ahora dale el tamaño como 200. Santo. Mire de cerca la coma invertida. Y guardemos esto. Ahora ejecútalo. Como pueden ver, este es mi encabezado llamado mi página web, que está alineado al centro de la pantalla. Y el color de fondo es amarillo, el color del párrafo es rojo, y su tamaño es del 200 por ciento. Por lo que de esta manera puedes manipular los estilos según tu elección. Entonces ahora esto se llama CSS inline porque estamos escribiendo el atributo style para cada elemento en la misma línea de su declaración. Así que todo esto se trataba de CSS en línea. En el siguiente video, te voy a enseñar sobre CSS interno. Gracias por ver este video. 19. CSS interno: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre CSS interno. Entonces comencemos. Ahora, abra el editor de Notepad Plus Plus y cree un nuevo archivo. Ahora empieza con una estructura básica de una página HTML. Ahora una vez que termines dentro la sección del cuerpo, a la derecha, algunos elementos. Entonces voy a escribir H1 y luego escribir mi página web. Después cierra la etiqueta H1, y luego escribe un párrafo. Entonces déjame escribir esta es mi página web. Y luego cierra la etiqueta p. Por lo que hemos añadido los elementos, encabezamientos y párrafos. Ahora dentro de la sección de cabeza, escribe la etiqueta llamada Estilo. Y luego simultáneamente y atacar. Ahora dentro de la etiqueta de estilo. ¿ Verdad? Cuerpo. Ahora abre los brackets y ciérrelo. Ahora dentro de este corsé, derecha , fondo, guión, color C-O-L-O-R. Y dale el amarillo. Se puede dar cualquier color. Ahora danos punto y coma. Esto básicamente establecerá el color de fondo de la parte del cuerpo de su página web en amarillo. Ahora, escribe cada uno. Mencionó el elemento que se quiere estilizar. Y luego escribir texto. Hola, Elaine. Y luego a la derecha al centro. Y danos punto y coma. Este fue nuestro estilo para nuestro rubro H1. Ahora para el párrafo a la derecha P. Y luego abrir llaves. Y dentro de la tornillera derecha, color C-O-L-O-R. Y luego voy a dar rojo como mi color. Y luego fuente, tamaño dash. Después un colon. Y voy a dar el 200 por ciento. Después dale un punto y coma y cierre el corsé. Ahora vamos a guardar este archivo. Voy a guardarlo en mi escalón de cubierta. Entonces dale un nombre. Ahora. Estoy dando ceses internos punto HTML. Ahora guarda esto y hagámoslo ahora. Como pueden ver, el color de fondo de mi página web es amarillo. El encabezamiento está en el centro, y el color del párrafo es rojo y su tamaño es del 200 por ciento. Esta página web es similar a la página web que habíamos diseñado en nuestro video CSS inline, en el que habíamos utilizado el atributo style para dar estilo a los elementos individuales. Pero aquí estamos usando la etiqueta de estilo. Y dentro de la etiqueta de estilo, estamos escribiendo el nombre del elemento, que queremos darle estilo y el estilo específico que queremos aplicarle. En CSS inline, tienes que mencionar el estilo para cada párrafo o cada uno de los elementos que estás usando. Pero aquí, sólo declarar el elemento llamado P será suficiente para dar estilo a todos los párrafos que estarás usando en la misma página web. Esto da CSS interno y H sobre CSS en línea. Todo esto se trataba de una visión de CSS interno. Gracias por ver este video. En el siguiente video, aprenderás sobre CSS externo. 20. CSS externo: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre CSS externo. Entonces comencemos. Ahora, ve al editor de Notepad Plus Plus y crea un nuevo archivo. Empezaré con la estructura básica de una página HTML. Ahora una vez que haya terminado dentro la sección de cuerpo en un encabezado, voy a agregar H1 y escribir mi página web. Cierra la etiqueta H1 y agrega otro elemento llamado P, es decir párrafo. Y escribe dos párrafos llamados Esta es mi página web. Ahora cierra la etiqueta p y guarda este archivo. Voy a nombrarlo como HTML HTML de punto CSS externo. Ahora, crea una nueva carpeta. Voy a nombrarlo como práctica HTML. Puedes dar cualquier nombre de tu elección. Ahora, dentro de esta carpeta, guarda este archivo llamado CSS externo dot HTML. Ahora, crea otro archivo. Y dentro de esto viola el código para estilismo. Así que déjame escribir el nombre del elemento y luego volver a bajar a color amarillo, punto y coma. Cierra el corsé. Entonces otra vez, escribe el nombre del elemento, que es H1. Y luego escribir texto alinear, centrar. Dar un punto y coma. Después escribe b. y luego C-O-L-O-R color, que es rojo, y luego tamaño de fuente. Así que básicamente estoy escribiendo el mismo ejemplo para ti para que entiendas que cualquiera que sea el tipo de CSS que pueda ser, este código se ejecutará exactamente de la misma manera. Ahora guarda este archivo. Nombrémoslo hoja de estilo, STI Ellie, SH, WE D. Y no olvides este punto css. Ahora, recuerda, necesitas guardar el archivo CSS dentro de la misma carpeta que has creado para guardar CSS dot HTML externo. Entonces dentro de la práctica, HTML, que tiene el archivo HTML de punto CSS externo. Ahora en la misma carpeta estamos guardando hoja de estilo dot CSS. Ahora guarda esto. Y volvamos al HTML de punto CSS externo. Ahora, dentro de la sección de cabeza, ¿no? En puede enlazar. Entonces HREF es igual y luego dar el nombre del archivo CSS, que es la hoja de estilo dot css, y dar su relación, que es su hijo. Ahora, guarda este archivo. Ahora, hagámoslo correr. Como puedes ver, obtenemos exactamente el mismo pitch que hemos diseñado usando CSS externo. Así que todo esto se trataba de una visión de CSS externo. Hay una gran cantidad de estilos para que aprendas en CSS. Por lo que permanezcan atentos al curso. 21. Introducción de proyectos CSS: Hola a todos y bienvenidos de nuevo al curso. Por lo que ya debes estar preguntándote por qué te estoy mostrando un viaje espacial. Sí. Bueno, te elegirán para saber que este va a ser tu proyecto y te voy a enseñar a hacer que lo mismo se repita. Puedes construir esta página web dinámica usando solo CSS. Así que ponte algo de tiempo en tu mano y mira el siguiente video en el que te voy a enseñar a construir el mismo sitio web. 22. Implementación práctica de proyectos CSS: Oigan a todos, bienvenidos de nuevo al curso. Por lo que a estas alturas, hemos aprendido muchos estilos en CSS con la ayuda de los cuales podemos diseñar nuestros sitios web. Ahora es el momento de un poco más de diversión. Y para hacer algunas animaciones usando CSS. Para eso, ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora, una vez que termines, comienza con la estructura básica de un beat HTML. Entonces terminé con la estructura básica. Y también he añadido un encabezamiento diciendo, mi repetición. Ahora es el momento de que creemos una desviación para eso, cierto, Dave. Y luego la etiqueta div. Ahora dentro de esta etiqueta div, ID es igual y luego espacio. Ahora esta será la división total de la página web. Dentro de este espacio, necesitamos tener algunas estrellas. Entonces para eso, crea otra desviación y escribe la clase como estrellas, y luego cierra la etiqueta div. Ahora de manera similar, en más etiquetas div de clase, En clase sí vamos a escribir el código CSS para agregar estrellas para esa unidad agregar numerosas tareas a su desviación de espacio. Por lo que he añadido algunas columnas, son divisiones de estrellas. Necesito crear un archivo CSS externo para vincularlo con esta página HTML. Ahora enlace a la derecha. Y luego H ref, que significa referencia de hipervínculo de caminata. Y luego escribe el nombre del archivo CSS que vas a hacer. Así que lo voy a nombrar S, star dot css. Y a la derecha, la relación es igual a hoja de estilo. Esto es para que entiendas que es básicamente una hoja de estilo. Por lo que aquí estamos hechos. Ahora guarda este archivo. Recuerda, necesitas crear una carpeta y guardar ambos archivos en la misma carpeta para eso, crea un nuevo archivo. Y los lípidos derechos paz como el nombre de la carpeta. Después dentro de esta carpeta, guarde este archivo HTML. Entonces dale un nombre. Voy a nombrarlo S espacio punto HTML. Ahora guarda esto y ahora crea un nuevo archivo. Ahora en este archivo, vamos a escribir nuestro código CSS para eso. Empieza con el cuerpo. Entonces déjame empezar a peinar el cuerpo. Ahora dentro de este cuerpo, ¿verdad? El color, el color de fondo para nosotros será negro. Fondo tan correcto. Y luego dar el código hexadecimal para brujas negras hash triple 0. Ahora, he añadido de la familia tipográfica como arbitraria. Como se puede ver el video de freebies que el texto es en forma de un estilo diferente. Entonces eso es por arbitraje. Para que puedas dar este estilo o puedes dar cualquier otro estilo de tu elección. Entonces estoy usando este estilo aquí. Ahora. No estoy escribiendo todos y cada uno de los códigos línea por línea porque va a ser muy tiempo tomando y aburrido para ti también. Entonces para eso, estoy escribiendo el colon en su conjunto y estoy explicando todas y cada una de las líneas donde he escrito eso. Entonces esto es H1, que es para nuestro rubro. Y he puesto la posición a absoluta. Aquí están el índice, ese es ese índice. Y luego arriba a la izquierda, lo que dará el margen en realidad desde arriba y hacia la izquierda. Alineará el texto en el centro básicamente porque hemos dado 5050 por ciento desde arriba y hacia la izquierda. Y yo era sólo un ancho. Y este es el color tiene 011. Puedes comprobarlo en tus códigos hexagonales de colores. Ahora, mi tamaño de fuente es de cinco EM. También puedes cambiarlo. Ahora. El texto se alinea al centro de nuevo y la siguiente sombra. Este es otro atributo muy especial con la ayuda de fase, puedes darle sombras a tus textos. Entonces esto es tech shadow, y estos son los colores de la sombra que puedes usar. Para que puedas guardarlo como está, o puedes cambiarlo de acuerdo al código hexadecimal. He escrito aquí tiene espacio ya que nuestra identificación se basó en la desviación. Entonces has escrito especies hash y las clases sí. Entonces para eso, he escrito espacio de puntos. Así que recuerda para el yodo en hash derecho y para el punto indirecto de clase. Ahora, aquí hay algunos atributos que son desbordamiento y posición superior, inferior. Estos son básicamente para alinear. Estos son para márgenes básicamente, y la posición es absoluta. Y aquí hay otro atributo llamado desbordamiento. Y se establece en oculto porque había numerosas estrellas. Y luego hay que alinearlo y configurarlo a la misma pantalla a la vez. Por lo que este atributo nos ayudará a hacer el efecto 3D. Ahora bien, esto es un montón de cosas. Entonces déjame explicarte uno por uno. Entonces aquí estrellas punteadas es lo que hace la división con la clase. Y luego configuraremos la imagen de fondo. Gradiente radial, que es un atributo que puede utilizar para establecer el gradiente del fondo. Y luego estos son los RGB significa valor rojo, verde, azul. Y entonces puedes dar los valores aquí. Por lo que 00 significa que se pondrá en negro. Y luego estas son para las estrellas que estaremos creando región de pixeles muy pequeños. Entonces aquí están esos. Ahora repetición de fondo. Por lo que las estrellas serán numerosas y se extenderá por toda la pantalla. Por lo que hay que repetir. Y luego aquí está el tamaño del fondo. Y luego animación. Atrás. Entonces. Después con una animación, aquí son cinco segundos y en finito, por lo que como puedes ver, las estrellas se están moviendo y acercando al espacio. Por lo que esto nos ayudará a conseguir ese efecto. Ahora, aquí viene estrellas punteadas y luego entra niño uno. Por lo que como pueden ver, hay muchas desviaciones con el mismo nombre que anochecer. Entonces estos son básicamente el niño. Entonces para eso, he usado lo del estilo. Ahora. De igual forma aquí, puedes darle a la posición de fondo cuánto serán cinco. Por lo que este niño estará muy cerca. Entonces es el 50 por ciento. Entonces puedes ver que es 20%, 60, y luego va a negativo, es decir menos 20% y menos 30%. Por lo que esto nos ayudará a obtener el bucle 3D. Entonces ahora como habíamos dado cuatro divisiones, déjame echar un vistazo. Sí, Habíamos dado cuatro divisiones de cosas. Por lo que hemos utilizado para niño aquí. Ahora, esto es para la función Zoom y su opuesto se establece en 0. Y luego el timing de animación, que se da. Entonces esto básicamente ayudará a conseguir esa visión de que nos estamos moviendo hacia el espacio. Entonces esta será, la función suma, básicamente se hará cargo de todas esas. 0% es para los primeros cuando no hemos hecho zoom. Y luego ochenta y cinco por ciento cuando hemos asumido mucho en esta pieza y luego un 100%. Entonces esto básicamente nos dará el efecto de meternos en el espacio y las estrellas se alejan de nosotros. Ahora una vez que termines, guarda esto. Recuerda guardarlo en la misma carpeta que habías guardado tu anterior. Ahora, le pegué lo guardé en paz, supongo. Está en mis decks para usar mi carpeta. Ahora guárdalo. Por lo que hay que dar el nombre como star dot CSS. No. Compruébalo que era star dot css. Sí. Ya terminamos con nuestro código. Ahora. Vayamos a space dot HTML y léelo de usted y veamos la salida. Por lo que como pueden ver, hemos creado nuestros proyectos con éxito. Este fondo nos da totalmente el relleno de viajar en el espacio. Entonces esto es realmente cool y seguramente puedes probarlo. Ve a tu editor de Notepad Plus, Plus y escribe este código y muéstrale a tus amigos que lo que has aprendido en CSS. Gracias por ver este video y mantente atento al curso para conocer más. 23. Javascript- Introducción: Hola, y bienvenidos de nuevo al curso. Así que vamos a introducirnos en JavaScript. Entonces, ¿qué es JavaScript y cuál es la utilidad del mismo? Bueno, JavaScript se usa para hacer las páginas web que construyes interactivaslas páginas web que construyespara entenderlo mejor. Tomemos un ejemplo. Ahora. Esta es básicamente una página web que está diseñada por mí. Se trata de un formulario de registro. Entonces lo voy a usar para hacerte entender cómo funciona JavaScript. Entonces déjame llenar todas estas cosas. Para que puedas sentir el nombre y establecer la agenda y las cosas. Ahora, puedes ver aquí que es contraseña escrita. Entonces supongamos que quiero dar una contraseña, 1234. Ahora en la contraseña de confirmación, escribo una contraseña diferente. Escribo 2345. Ahora déjame revisar. Dice contraseña no coincidentes. Ahora de nuevo, voy a cambiar la contraseña de confirmación a 1234. Ahora de nuevo, da clic en Comprobar. Ahora dice contraseña coincidentes. Entonces estamos haciendo esto con la ayuda de JavaScript. Este es un pequeño ejemplo de la utilidad de JavaScript. Por lo que en los próximos videos, aprenderás más sobre JavaScript y su utilidad. Y con ello, estarás lo suficientemente equipado para que tus páginas web sean interactivas. 24. Cómo crear una alerta: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo establecer alerta en tus páginas web. Entonces comencemos. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. terminé con la estructura básica, y también he añadido un párrafo. Dice mi VP8. Ahora dentro de la etiqueta corporal, ¿verdad? Encendido, carga ON o AD en carga igual. Entonces inicia tu coma invertida y escribe e o t, que está alerta. Y luego dar un texto en su interior. Supongamos, bienvenido. Después cierra el corchete, danos punto y coma y cierra las comas invertidas. Ahora guarda este archivo. Voy a guardarlo en mis cosas de cubierta. Entonces déjame nombrarlo. Alerta punto HTML. Guarda esto. Vamos a ejecutarlo. Como puedes ver, esta casilla de alerta que dice Bienvenido. Y viene con el botón Okay por defecto. Ahora haz clic en OK, y nunca lo llegarás a tu página. Este juego de cajas de alerta, cuanto lo navegamos a nuestra página web porque lo habíamos usado en carga, debido a lo cual se muestra la luz en cuanto se carga la página, hay otra forma de declarar una carga la función JavaScript para eso dentro de la sección head, ¿verdad? Guión. Lo que sea que escribas dentro de la etiqueta script, ese es básicamente tu código JavaScript. Así Endo etiqueta script y ahora escribir una función si UNC, función T-I-O-N, y darle un nombre a ella. Supongamos mi alerta. Ahora da lugares. Empieza las llaves terminadas y dentro de esas sección de corsé rizado, ¿verdad? En alerta IoT. Y luego su mensaje que dice, bienvenido. Entonces da un punto y coma. Ahora aquí, en lugar de escribir la función, solo escribe mi alerta y da un punto y coma. Entonces ahorremos esto y corramos a ver qué es la salida. De igual manera, aquí está la casilla de alerta. Dice Bienvenido. Todo esto era cuestión de alerta. En el siguiente video, aprenderás a escribir tu función prompt. Así que mantente atento al curso y sigue aprendiendo. 25. Cómo crear un aviso: Hola y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre indicaciones. Entonces, sin más preámbulos, empecemos. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Entonces terminé con la estructura básica. Y también he añadido un párrafo que vemos es mi página web. Ahora dentro de la sección head, escribamos la etiqueta llamada script y simultáneamente cerramos la etiqueta. Ahora dentro de la etiqueta script, escribe la función y dale un nombre de función. Supongamos mi prompt, y luego iniciar la llave y escribir V-A-R. Var significa variable en JavaScript, es una palabra clave para declarar una variable. Mi nombre de variable es nombre, y luego dar iguales y luego preguntar. Básicamente prompt toma una entrada del usuario. Por lo que estamos usando una variable que guardará la entrada que el usuario dará. Ahora dentro de ellos, hagamos una pregunta al usuario. Entonces Booze, ¿Cuál es tu nombre? Y ahora mostremos el nombre al usuario. Entonces por ese derecho, alerta. Entonces, bien, bienvenidos. Concatenar la cuerda y la maduración. Dar punto y coma y corsé rizado. Ahora dentro de la sección del cuerpo, justo en carga es igual. Entonces dentro de abrigos invertidos, escribe el nombre de tu función, que es mi prompt. Dar un punto y coma. Ahora, guardemos este archivo. Voy a guardarlo en mis mazos para dar un nombre de archivo. Supongamos prompt dot HTML, y luego guardar esto. Ahora, corramos y veamos la salida. Por lo que como se puede ver aquí está el cuadro de aviso que dice ¿Cuál es su nombre. Entonces derecho a nombrar aquí. Y luego da clic en Ok. Por lo que esta es la casilla de alerta que dice Bienvenido y tu nombre. Entonces, básicamente, prompt es para tomar una entrada del usuario usando JavaScript. Y alerta es mostrar cualquier mensaje aleatorio al usuario. En este caso de alerta, el usuario no puede dar ninguna entrada. Él o ella sólo puede ver el mensaje que se está mostrando. Así que gracias por ver este video, chicos, manténganse atentos a este curso para aprender más sobre cómo implementar diferentes funciones en JavaScript. 26. Cómo implementar Confirm: Hola a todos, y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre confirmar. Entonces comencemos. Ahora ve al editor Notepad Plus, Plus desde la pantalla y luego crea un nuevo archivo. Comienza con la estructura básica de una página HTML. Ahora dentro de la sección head, escribe la etiqueta llamada script y terminó simultáneamente. Ahora dentro de la etiqueta script, escribe una función llamada my confirm. Ya que vamos a aprender confirmar puedes darle cualquier nombre a tu función. Ahora. Inicia tu corsé rizado y dentro de él, correcto, variable. Supongamos que c iguales se ajustan. Y escribir ecuación. Supongamos, ¿Te gusta mi débil latido? Ahora cierra el corchete, da un punto y coma. Por lo que esta variable c va a tomar la retroalimentación del usuario, que él o ella dará a través esta confirmar y luego comprobar cuál es la entrada dada por el usuario escribiendo, si c es igual, es igual a true, luego da un mensaje a través de alerta diciendo, gracias. Y si el feedback es falso, entonces correcto. Entonces da una alerta diciendo, perdón por las molestias. Y luego cerrar el corchete, punto y coma, cerrar el corsé rizado de L's así como cerrar el corsé rizado off mike confirm función. Y luego dentro de la etiqueta del cuerpo, a la derecha, en carga es igual. Y luego el nombre de tu función, que es mi conformar. Y luego dar un punto y coma y un código invertido más cercano. Ya terminamos. Ahora vamos a guardar este archivo. Guárdalo, dale un nombre. Supongamos que puede formar punto HTML y guardar esto. Ahora vamos a ejecutarlo. Entonces las bases te gusta mi página web y dicen OK, y luego decir gracias. Entonces déjame recargar esto. Qué pasa si decimos que no, cancela. Cancelar. Y luego dice, perdón por las molestias. Por lo que de esta manera, se puede mostrar un mensaje al usuario y tomar una entrada válida como retroalimentación de él o ella. Gracias por ver este video. Estén atentos al curso. Nos vemos la próxima vez. 27. Implementación de javascript externo: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar sobre JS externo. Entonces aquí vamos a escribir el código JavaScript en un archivo diferente y luego enlazarlo con el archivo HTML original. Entonces comencemos. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora una vez que termines con la estructura básica, entra en la sección head y escribe el guión. A continuación, cierre simultáneamente la etiqueta de script. Ahora, dentro del script, use el atributo llamado SRC, que significa fuente. Entonces ya que vamos a enlazar un archivo externo a este archivo HTML, por lo que es necesario dar el nombre de ese archivo externo. Voy a dar el nombre de ese archivo como punto ts externo. Ahora dentro de la sección body, tienes que dar el nombre de la función que vas a escribir en el archivo externo dot js. Entonces déjame escribirlo. De acuerdo, onload es igual y da el nombre de la función. Supongamos diversión. Y luego dar un punto y coma y cerrar los tribunales. Por lo que ya terminamos ahora vamos a guardar este archivo. Así que recuerda que tienes que guardar este archivo en la misma carpeta que vamos a guardar el archivo llamado external dot js. Entonces hagamos un nuevo índice de carpetas para dar un nombre. Supongamos HTML. Ahora entra en esta carpeta y guarda tu archivo, nombre dado a tu archivo. Supongamos js externos dot HTML. Ahora guarda este archivo. Ya está hecho. Ahora. Crear otro archivo, ¿verdad? Función. Y dar el nombre de la función similar al nombre que habíamos escrito en la sección del cuerpo. Así que vamos a ver que habíamos escrito el nombre de la función es divertido. Así que bien, divertido. Y luego iniciar el corsé rizado. Y dentro de esta sección, documento derecho punto escribir. Esto básicamente mostrará un mensaje en la propia pantalla. Entonces démosle cualquier texto. Supongamos bienvenido a mi página web. Dale un punto y coma, cierra el corsé rizado. Ahora guarda este archivo en la misma carpeta que habíamos guardado externo GAS dot HTML. Dar este nombre de archivo como externo. Dot j es, ya que es un archivo JavaScript. Así punto js. Ahora vemos que habíamos dado la fuente como punto externo js aquí. Entonces este es nuestro archivo JS de nodo externo. Entonces esto lo va a vincular básicamente. Ahora vamos a correr desde aquí y ver cuál es la salida. Por lo que como pueden ver aquí, está escrito, bienvenido a mi página web. Pero aquí no hemos utilizado ningún párrafo para escribir eso. Bienvenido. Entonces, básicamente, está tomando eso del punto js externo. Entonces de esta manera, puedes escribir tu código JavaScript en un archivo separado y luego enlazarlo con tu archivo HTML principal. Gracias por ver este video y mantente atento a la costa para conocer más. 28. Introducción al proyecto de juegos con números de javascript: Oigan a todos, bienvenidos de nuevo al curso. Entonces, después de aprender el JavaScript, necesitamos hacer un proyecto sobre él. Ya que el simple aprendizaje de algunos códigos no te ayudará a menos que lo pongas en acción. Por lo que a estas alturas, espero que todos estén familiarizados con el impuesto y los códigos de JavaScript. Entonces el proyecto que vamos a hacer es un juego de números. Ahora déjame mostrarte cómo funciona. Estamos dirigidos a nuestro juego melocotón. Y luego dice que la computadora ha elegido un número entre 1200 e intenta adivinar el número. Entonces déjame conseguir algún número entre 1100, supongo 65. Dice que el número es más grande, por lo que necesito ingresar un número menor. Entonces supongamos para t. y luego dice más grande. Ahora déjenme dar 20. Es más pequeño. Entonces es entre 2139. Entoncesdéjenme dar 30. Sí, tengo la respuesta correcta en los enfoques. Entonces, ¿no es genial? Ahora en el siguiente video, aprenderás a codificar este juego. 29. Cómo implementar un proyecto de juegos con números de javascript: Hola a todos y bienvenidos de nuevo al curso. En este video, vamos a hacer un proyecto basado en nuestros aprendizajes en JavaScript. En este video, básicamente voy a construir un juego. Sí, escuchaste eso, ¿verdad? Y voy a hacer este juego usando códigos JavaScript. Por lo que este video va a ser un poco más largo. Entonces es mejor. Tienes un poco de tiempo que conociste mano para sentarte y aprender a hacer el proyecto JavaScript. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con una estructura básica de una página HTML. Entonces terminé con la estructura básica. El título de mi página web es juego de números. Ahora déjame escribir la etiqueta llamada script y al mismo tiempo cerrarla. Por lo que dentro de la etiqueta script, vamos a escribir el código JavaScript para nuestro juego, como habéis visto en el video anterior. En este juego, la computadora seleccionará un número entre 1100 y el usuario tiene que adivinar qué número ha seleccionado. Ahora el usuario dará una entrada y luego la computadora con menos responderá que si es menor o mayor que el número que ha seleccionado. De esta manera, encontrará en cuántos casos el usuario da la respuesta correcta. Para eso, necesitamos declarar algunas variables. Declarar una variable llamada target y otra variable llamada target one. Ahora inicia la función para tu juego. Entonces le estoy dando el nombre como juego. Y luego abrir y cerrar la llave rizada. Ahora dentro de esta función, a la derecha, objetivo es igual a punto matemático aleatorio en 200. Entonces lo que he hecho es este punto matemático aleatorio es una función inversa en JavaScript que devuelve un valor entre 01, ya que queremos que la computadora elija un número del uno al 100. Entonces estamos multiplicando cien años. Por lo que en este objetivo, la computadora almacenará el valor que ha seleccionado. Ahora este valor objetivo, si Math.random devuelve 0, entonces se convierte en 0. Entonces simplemente no deseábamos ya que estamos eligiendo por uno a 100. Entonces para eso, necesitamos hacer un plus one aquí. Así que bien, consigue uno igual a matemáticas. Pero fluya. A continuación, dar el argumento objetivo y luego escribir más uno. Te sugiero que entiendas cada uno, a cada paso con mucha claridad, ya que no se trata de diseñar, es puramente de programación. Ahora una vez que la computadora ha elegido un número en esta variable objetivo una, ahora preguntemos al usuario que hemos elegido un número del uno al 200. Supongo que ese número para eso declaró una variable llamada terminada, que será una variable booleana. Entonces voy a escribir falso. Por lo que esto básicamente indicará si el usuario ha adivinado la respuesta correcta o no. Si esta variable terminada se vuelve verdadera, entonces el usuario tiene la respuesta correcta. Entonces hasta entonces necesitamos incrementar el contador ahora, ¿verdad? Correcto. Entonces no terminado. Entonces, mientras que la variable terminada no es verdadera, seguirá ejecutando este bucle. Ahora dentro de mientras se tiene que tomar la entrada del usuario. Entonces para eso, tenemos que tomar otra variable. Supongamos, adivina la entrada de subrayado y luego escribe texto. Y luego entrada de conjetura variable. Te voy a explicar por qué he tomado dos variables para tomar entrada del usuario de alguna manera. Entonces aguanta por ese momento. Ahora, aquí mismo. Adivina el texto de entrada es igual, luego escribe prompt. Y dentro de eso, escribe el mensaje que quieras mostrar al usuario. Entonces escribe la computadora, ha elegido número entre 100 y luego escribe, intenta. A adivinar el número. Por lo que este es el mensaje que le estará mostrando a su usuario. Ahora, sabemos que prompt toma una entrada del usuario. La entrada básicamente se va a guardar en texto de entrada de gas. Ahora, esta entrada será en forma de cadena, pero necesitamos un número como entrada. Entonces para eso, necesitamos convertir esta cadena en un número. Entonces es por eso que había tomado dos variables, se olvida de entrada. Ahora, ¿verdad? Supongo que la entrada es igual a entonces parse int más n es una función que ayudará a convertir esta cadena en el entero. Ahora mismo en el argumento obtiene texto de entrada, que es nuestra cadena deseada. Ahora una vez que el usuario ingresa su entrada, por lo que necesitamos incrementar la conjetura. Por eso. Toma una variable llamada conjeturas. Inicializarlo a 0. Ahora tan pronto como el usuario entra a los invitados, por lo que incrementó el valor adivina, Lo siento. Sí. Ahora, ¿qué pasa si el usuario no ingresa ningún valor? Entonces para eso, el programa o el juego terminará por eso, ¿verdad? Si no, entonces para la terminación, es necesario que el fracaso terminado sea cierto. Su acabado de ferrita es igual a verdadero. Entonces esto fue para una entrada nula del usuario. Si el usuario da una entrada válida, entonces escriba else. Y luego abre la llave rizada. Y dentro de esto, justo terminado iguala, luego escribe cheque. Por lo que vamos a escribir una función llamada check, que será comprobar la entrada si es mayor o menor o fuera del rango del número elegido por el equipo. Así que escribe la entrada de invitado como argumento y luego da un punto y coma. Por lo que esta función de verificación devolverá verdadero o falso, es decir booleano tipo escrito a esta phi terminado. Si el usuario nos da la respuesta correcta, entonces devolverá true, de lo contrario false. Entonces comencemos la función llamada check. Ahora, necesitamos declarar un argumento aquí para aceptar este valor de entrada de caso. Ahora bien, el Eichmann llamó conjetura. Ahora necesitamos declarar esta variable. Entonces fijemos la variable global. Ahora escribe la variable llamada guess no dentro de esta función, comprueba, da la condición. La primera condición sería si el número es menor que el número deseado, ¿verdad? Si adivina menos que el objetivo uno, ya que el número elegido por el equipo se guarda en el objetivo uno. Ahora bien, si la conjetura es menor que la del objetivo, entonces necesitamos mostrar un mensaje al usuario. Entonces dentro de las cotizaciones, ¿verdad? Alerta. Y luego escribir. El número es menor. Y luego devolver false ya que el usuario no pudo adivinar la respuesta correcta. No. Si el número es mayor. Entonces para eso, copia esta si parte, y pégala a la derecha. Si los invitados mayor que el número, a continuación, escribir el número es mayor, a continuación, devolver falso. Ahora, ¿qué pasa si el número no es un número? Eso significa si el usuario da una entrada que es un alfabeto. Ahora, ¿verdad? Si dentro del corchete, derecha, es, y luego N es N. N significa no es un número. Entonces esta es una función de JavaScript que devuelve verdadero si no es un mal y falso para si es un número. Escribe tu conjetura, cura. Por lo que analizará si adivinar es un número o no. Entonces si es un número, entonces no entrará en esto. Si y si no es un número, entonces ejecutará el código escrito dentro de esta sección if. Así que dada una alerta y derecha, Por favor ingrese un número válido. No, devuelve falso. Ahora, pueden ser otra condición que si el número es menor a uno o mayor que 100. Por eso, ¿verdad? Si y luego adivina menos de uno. R. Así que r se da usando estos símbolos. Si eres un programa completo donde puedes entenderlo muy bien. De lo contrario, estos símbolos se pueden obtener desde su teclado, cual estará disponible encima de la tecla Intro. Ahora, ¿verdad? Adivina mayor que un 100. Por lo que esto se encargará de las entradas de flecos exteriores. Ahora dentro de esta sección, dada alerta, ¿usa ese flequillo exterior? Ahora devuelve false. Por lo que todas las condiciones de ser falso y cuidado. Entonces si ninguna de las condiciones es cierta, entonces usted puede enviar directamente. Entonces para esa alerta dada, ¿no? Sí. Ingresaste la respuesta correcta. Y luego hay que mencionar el número de casos. Tan correcto. En. Y luego concatenar mis conjeturas de escritura. Adivinaciones, tienes el número de invitados que el usuario ha realizado. Ahora, esto mucho adivina. Así que cierra la alerta y luego regresa true. Por lo que esto terminará el bucle while del juego de funciones. Ya terminamos de escribir el código para nuestro juego. Ahora necesitamos cargar este Juegos para eso o para cuerpo y escribir onload iguales y luego escribir el juego. Ya que el nombre de la función es Kim. Ahora guarda esto. Está un poco en tus cosas de cubierta. Voy a escribir g es juego con la extensión de punto HTML. Ahora, guarda esto y vamos a ejecutarlo y ver la salida. Dice que la computadora ha elegido un número. Entonces déjame escribir el número, supongamos 50. Entonces el número es mayor. Entonces déjame escribir Veinticinco. El número también es bajo. Entonces déjame escribir diez. Es más pequeño, por lo que está entre 1124. Entonces déjenme dar 20. También es más grande. Entonces 15, más pequeño. Así que consígueme dar ayuda. También es más grande. Entonces es entre 1617. Entonces sí, el número era 16 y lo conseguí en siete casos. Gracias por ver este video y mantente atento a este curso para conocer más. 30. Extra : Cómo mantenerse motivado mientras aprendes: Hola chicos. Espero que estés disfrutando de este curso hasta el momento. Aprender una nueva habilidad es realmente impresionante, pero el proceso es un poco difícil. Entonces, ¿cómo podemos mantenernos motivados por el aprendizaje? A continuación te presentamos algunos consejos para ti. En primer lugar, es muy importante establecer una meta ya que te ayuda a concentrarte cuando te distraes, para que vuelvas a encarrilarte. Cuando todos sólo bailarines, ¿qué aprender, no? Este es el plan de estudios que necesitas para completar esto y aquello, pero nadie nos dice cómo aprender cuando aprender es un proceso, recuerda obtener tu forma básica e inscribirte en un curso para dar seguimiento a tu aprendizaje. Número tres, consistencia, persistencia es la clave del éxito. Aprende derecho, pero aprende todos los días. Divida la tarea en partes más pequeñas para que pueda completarlas fácilmente. La parte más importante del aprendizaje es tomar descansos. Tomar descanso refresca nuestra mente, que en nuestro viaje de aprendizaje. El siguiente es rodearte de personas que tienen intereses similares y unirte a una comunidad que te ayudará a crecer en tu viaje de aprendizaje. Por último pero no menos importante, cree en tus habilidades. Recuerda siempre. Puedes hacerlo. 31. Introducción a los formularios HTML: Hola a todos y bienvenidos de nuevo al curso. En esta sección, te voy a enseñar sobre firmas. Entonces, antes de crear formularios en HTML, entendamos qué es un formulario. Entonces comencemos ahora desde tu computadora, abre un navegador web. Voy a abrir Google Chrome aquí. Ahora ve a facebook.com. Como puedes ver aquí, hay una sección llamada crear una nueva cuenta, donde puedes ingresar tu nombre, nombre de usuario, tu número de móvil o dirección de correo electrónico. Puedes establecer una contraseña y también puedes darte un cumpleaños, y también establecer el género de ti mismo y luego crear una cuenta. Entonces este es básicamente un formulario mediante el cual puedes crear una cuenta en facebook.com. Entonces esta es básicamente una forma simple que puedes diseñar. En esta sección, te voy a enseñar a diseñar firmas con diversos atributos y características. Así que sigue aprendiendo y mantente atento al curso. 32. Cómo agregar campo de texto: Ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Comencemos con la estructura básica de una página HTML. Ahora, dentro de la sección del cuerpo, comienza con una etiqueta llamada forma y simultáneamente terminó. Entonces lo que sea que escribas dentro esta etiqueta de formulario será el código para tu formulario. No, déjame empezar con nombre para ese nivel dado. Y justo en nombre AME, luego nivel más cercano. Después escriba tipo de entrada igual al texto, y luego cierre el ataque. Por lo que esta etiqueta de entrada te ayudará a establecer el tipo de texto o número de tipo que quieres aceptar del usuario como entrada. Entonces aquí queremos tomar nombre como entrada del usuario. Por lo que hemos establecido el tipo de entrada de texto. Ahora, hay ciertos atributos de esta etiqueta de entrada llamada autofocus. El enfoque automático básicamente dará un enfoque, enfoque extra a tu entrada. Y luego se requiere. La escritura requerida hará que su película sea monetaria. Y si el usuario omite el campo, se asegurará mensaje de que este es un campo obligatorio. Ahora hay otro atributo llamado ID. Puedes omitir esto, le daré este ID básicamente nos ayudará a escribir código CSS para este tipo de entrada. Entonces lo estoy usando aquí. Ahora, guardemos esto. Lo estoy guardando en mis decks para darle un nombre, supongamos formar punto HTML y guardar esto. Y ahora vamos a ejecutarlo. Por lo que como pueden ver, aquí está el nombre de la etiqueta. Para que puedas escribir tu nombre aquí. Sí, así. Y si no escribes nada, entonces es decir, por favor llene este campo. Ahora para que el usuario entienda que este es un tipo de formulario, démosle un encabezado H1, guarde el formulario de registro y luego cierre la etiqueta H1. Ahora guardemos esto. Ahora vuelve a un navegador web y vuelve a cargar esto. Por lo que como se puede ver aquí está mi etiqueta H1 con decir, formulario de registro. Y aquí está mi nombre liberal con el texto tipo entrada. Por lo que ahora ya sabes decir el campo de nombre en tu firma. Entonces vuelve y pruébalo tú mismo. 33. Cómo agregar contraseña **** campo: Ahora agrega otra contraseña liberal y derecha, etiqueta de sílaba cerrada. Y luego escriba el tipo de entrada igual y luego la contraseña correcta. Y también puedes usar los atributos llamados autofocus y requeridos. También se le da id Supongamos pase. Ahora guardemos esto y ejecutémoslo. Por lo que como se puede ver, es este mi formulario de registro con un nombre y una ranura de contraseña. Ahora, con el fin de cambiar esta contraseña por debajo de eso, es decir, ahora escribamos aquí después del tipo de entrada texto, a la derecha, BR. Br ayudará a obtener esta contraseña de lípidos de siguiente carril. Entonces ahora guarda esto y corre. Como puedes ver, la contraseña está justo debajo del mediodía. Nuevamente, también puedes dar otra cerveza. Por lo que esto agregará otra línea de espacio. Ahora guarda esto y volvamos a ejecutarlo. Por lo que como se puede ver, la contraseña está bastante por debajo del nombre. Por lo que de esta manera puedes cambiar el formato ahora cuando escribas una contraseña. Entonces como pueden ver, viene en forma de estrella. No puedes ver tu contraseña, pero para el nombre, puedes ver lo que escribas. Entonces ahora vuelve y pruébalo tú mismo. 34. Cómo agregar el campo de correo: En este video, te voy a enseñar sobre cómo configurar el tipo de entrada al correo electrónico. Para eso, empieza con la cerveza. Para establecer correo electrónico por debajo del nivel de contraseña. Ahora, nivel correcto. Y luego escribir correo electrónico. Ahora cierra la etiqueta de la etiqueta. Y tipo de entrada correcto. Después escribe iguales. Y dentro de ese correo correcto. No, también se puede escribir el atributo llamado requerido y dar un ID. Ahora vamos a guardar esto. Ahora, hagámoslo correr. Entonces como pueden ver aquí está mi imagen de cosa. Ahora, derecho al correo electrónico. Tú. Ahora, vuelve con tu editor y prueba esto. 35. Cómo agregar campo numérico: En este video, vas a aprender sobre el número de tipo de entrada. Por eso, ¿verdad? Br. Y luego empezar por escribir el Lieber. Entonces escribe supongamos número de teléfono. Podemos usar el tipo de entrada de número para el número de teléfono ocho, etc. Así que cierra la etiqueta de nivel. Ahora bien, el tipo de entrada es igual al número, y luego da un ID. Ahora, guardemos esto y ejecutémoslo. Por lo que aquí está mi ranura de número de teléfono. Para que podamos escribir dos números telefónicos como este. Ahora, también puedes intentar escribir como un poco también. No obstante, presionas el alfabeto que no se vaya a mostrar aquí. Puedes probarlo y ver se aceptará ningún texto en esta ranura. Ahora vuelve a tu editor y vamos a probar otro nivel llamado H. H y luego cerrar el nivel. Sin derecho, el tipo de entrada es igual al número. Aquí también puedes establecer la edad mínima y máxima que deseas tomar la entrada del usuario. Entonces permítanme fijar la edad mínima a 18 años y la máxima a 60. Por lo que el usuario no puede ingresar ninguna edad menor o superior a 60. Ahora también puedes usar el atributo llamado step. Esto básicamente establecerá el rango de incrementos. Entonces voy a configurarlo a uno. Ahora se le da una identificación a esto, supongamos H, y luego guarde esto. Y hagámoslo correr. Aquí está mi octava ranura. Ahora aquí mismo, supongamos que 18 sepan a medida que incrementamos esto, se puede ver que está incrementando por uno. Por lo que está decrementando por uno. Ahora, también puedes establecer un valor predeterminado para tu franja de edad. Por eso aquí mismo. Valor igual, digamos dos a 18. Ahora guarda esto. Ahora corriendo. Para que como se pueda ver la diferencia. Por lo que como se puede ver, el valor por defecto es de 18 años. Entonces de esta manera, puedes manipular con tus tipos de entrada. Ahora vuelve rápidamente a tu editor y prueba esto. 36. Cómo agregar marcadores de posición: Por lo que en este video aprenderemos sobre los marcadores de posición. El marcador de posición es otro atributo de entrada que le permite escribir algo en la ranura de entrada. Ahora déjame mostrarte uno. Aquí mismo. marcador de posición es igual y luego escribe un mensaje llamado ingresa tu nombre. Ahora guarda esto. Y veamos la salida. Por lo que como puedes ver, aquí hay un texto llamado ingresa tu nombre. En cuanto escribes algo aquí, entonces desaparece. Ahora de manera similar, puedes establecer marcadores para otras ranuras como contraseña, etc. Así que hazlo tú mismo y echa un vistazo a esto. 37. Cómo agregar el campo de fecha: Ahora para agregar fecha de tipo de entrada, que necesitas hacer es comenzar un nuevo nivel. Entonces a la derecha, fecha de nacimiento. Después en la etiqueta de nivel. Y luego escribir entrada. A continuación, escriba igual, luego fecha. Identificador dado Supongamos fecha. Ahora, no olvides esta BR, lo contrario estará en la misma línea. Entonces déjenme dar dos impuestos a la cerveza para alinearlo. Ahora guarda esto. Ahora vamos a ejecutarlo y ver la salida. Por lo que como se puede ver aquí está mi ranura de fecha. Ahora, puedes dar click aquí y elegir cualquier fecha. Entonces esto básicamente te da un calendario. Es necesario agregar fechas manualmente. Puedes seleccionar directamente de tu calendario. Ahora, vuelve con tu editor y prueba esto. 38. Cómo agregar el campo de tiempo: Ahora para agregar espacio de tiempo, aquí mismo, estamos para la alineación y luego etiqueta derecha. Y supongamos, escribamos a qué hora. Puedes elegir cualquier ranura de tu elección. Voy a elegir más tiempo. Ahora en la etiqueta de nivel. Ahora inicia la pestaña Entrada. Y el tipo correcto es igual. Entoncesmomento adecuado. Ahora dado id, terminamos. Ahora guardemos esto. Y corramos a ver la salida. Como se puede ver aquí es la franja horaria. Para que puedas dar nuestros que minutos. Escribamos dos, Entonces Cuarenta y cinco, luego 00. Dar una vista morfema. Se puede cambiar con estas flechas. También puedes cambiar la fecha con esta flecha. Entonces esto es todo por lo del tiempo. Ahora vuelve y prueba esto en tu ítto. 39. Cómo agregar el campo de entrada de color: Ahora, en este video vas a aprender a comprimir el color como tu tipo de entrada para esa rodilla derecha. Y luego empezar con la etiqueta. Ahora estoy escribiendo color favorito. Ahora, indeleble. ¿Lo sabes bien? tipo de entrada es igual al color C-O-L-O-R. Después le dieron una identificación. Ahora ciérralo y guarda este archivo. Ahora corramos y veamos la salida. Por lo que como se puede ver aquí, ranura de color de YouTube. Ahora al hacer clic en él, puede elegir cualquier color de su elección. Incluso se puede personalizar el color. Uso de esta pestaña de color. Seleccione un color y haga clic en Ok, y su color será seleccionado. Por lo que de esta manera, podrás seleccionar tu color favorito. Ahora vuelve rápidamente a tu editor y prueba esto. 40. Cómo agregar botones de radio: Ahora para configurar el botón de opción en tu formulario, lo que debes hacer es comenzar con BR y escribir un nivel. Género correcto. Ahora en el hígado. ¿ Ahora bien? El tipo de entrada entonces es igual y luego escribe el acuerdo comercial. Y luego dar el valor igual al masculino. Entonces justo aquí, comida. Entonces en la siguiente línea, ¿no? tipo de entrada es igual, luego escribe radio y luego da el valor que es femenino. No, ciérralo y escribe tu hembra. Ahora cuando botón de radio, se puede seleccionar cualquiera de estos dos, ya sea macho o hembra. Una persona no puede ser varón y hembra juntos. Entonces para eso, es necesario dar un nombre, atributo, dice género. Y de manera similar aquí también escribir nombre y luego escribir género. Ahora guarda esto y hagámoslo correr. Aquí está nuestra agenda. Y puedes seleccionar macho o hembra. No se pueden seleccionar ambos simultáneamente, ya que usamos el atributo name y habíamos dado el mismo nombre para ambos botones de radio. Ahora, vuelve con tu editor y empieza a probar esto. 41. Cómo agregar la casilla: Ahora empezaré por escribir BR y después escribiré mano de obra. Y escribir idiomas. Ya sabes. A continuación, cierre la etiqueta y luego escriba el tipo de entrada igual. Entonces no cotizamos bien, casilla de verificación. Y luego escribir nombre elementos iguales. Este nombre nos ayudará a entender que pertenece al mismo nombre del artículo de la categoría. Y luego dar valor igual al inglés. Y luego escribir inglés. Y luego dar BR. Y luego otra vez, ¿verdad? Entrada. A continuación, escriba, luego igual, luego otra vez casilla de verificación. Y luego me dan nombres serían los mismos artículos. Y luego dar un valor. Supongamos español. Y luego escribir español. Dar BR. Puedes agregar tantas casillas de verificación como quieras. Entonces voy a agregar tres casillas de verificación aquí. Así casilla de verificación derecha. Y dar el nombre como artículos. Y luego dar el valor de pausar el francés, y luego escribir francés y dar una BR. Ahora ya terminamos. Ahora vamos a guardar este archivo y ejecutarlo. Entonces como puedes ver, idiomas, ya sabes, inglés, español, francés, puedes tomarlos todos, son sólo uno de ellos. Por lo tanto, a diferencia del botón de radio en la casilla de verificación, puede seleccionar varios datos. Ahora vuelve rápidamente a tu editor y empieza a probar este código. 42. Cómo agregar la lista de desplegables: Ahora para agregar una lista desplegable, empieza por escribir el nivel. Y luego país derecho. Entonces indeleble. A continuación, dar un BR. No, usa una etiqueta llamada Select. Ahora dale un nombre. Supongamos país. Y ahora empiezan las opciones. Opción correcta. Y luego el valor correcto equivale a suponer India, y luego escribir en texto India. Y luego int opción. Ahora dada la adopción, dar el valor suponga USA, y luego escribir en texto. Y luego de nuevo en la opción. Puedes dar tantas opciones como quieras. Ahora, déjenme dar otra opción. Entonces no hay necesidad de volver a escribirlo todo. Sólo copia esta parte. Haga clic con el botón derecho, luego copie y luego pegue. Ahora dijo el país a Francia. Y escribir con palabras Francia. Para que puedas dar tantas opciones como quieras. Sólo estoy dando tres opciones. También puedes probar otros países. Ahora termina la etiqueta de selección. Ahoraguarda este archivo. Corramos y veamos la salida. Por lo que como pueden ver aquí está mi país. Por lo que al hacer clic en la lista desplegable, podrá ver los artículos que habíamos ingresado en nuestro código. Entonces tenemos India, EUA y Francia. Por lo que no sólo para el país, se puede utilizar lista desplegable a cualquier campo que desee. Así que ahora vuelve a tu editor y empieza escribir el código para lista desplegable. 43. Cómo agregar Textarea: Por lo que en este video vas a aprender sobre el área de texto. Entonces para eso, empieza con BR y luego dale una etiqueta. Y a la derecha. Por favor , introduzca comentarios. No, etiqueta de etiqueta más cercana. Y luego iniciar la cubierta llamada área de texto. Ahora ciérrela simultáneamente. Ahora dentro de la etiqueta textarea, ¿no? Columnas. Por lo que esto especificará el número de columnas que vas a ingresar. Entonces estoy dando un 100 gritar. Y filas iguales. Entonces puedes dar por. Ahora, guardemos esto y ejecutémoslo y veamos la salida. Por lo que como pueden ver, aquí está mi área de texto. Puedes escribir tantas tomas como quieras a lo largo de esta ranura de área de texto. Ahora aquí viene el nivel. Por favor, introduzca comentarios. Para que puedas darle al usuario un área de texto total para que escriba sus comentarios. Esta área de texto es muy útil con el fin de tomar retroalimentación así como para la ranura llamada acerca de ti mismo. Por lo que de esta manera puedes usarlo ahora rápidamente vuelve a tu editor y empieza a probar este código. 44. Cómo subir archivos: En este video, vas a aprender a subir archivos en tus formularios. Puedes subir cualquier archivo, batir un archivo PDF o una imagen, o un documento de Word, cualquier tipo de archivo, puedes subir tu teléfono. Entonces para eso, lo que hay que hacer es escribir un pedazo de código. Entonces comencemos. Así que empieza por escribir BR y luego dar un nivel. Supongamos que sube tu foto. Y luego en la etiqueta de la etiqueta. Ahora bien, el tipo de entrada es igual a continuación dentro de las comillas, lucha derecha. Y luego dado nombre soporta archivo, y luego guardarlo y ejecutarlo en Chrome. Ahora como pueden ver aquí está mi nivel. Sube tu foto. Y aquí está el tipo de entrada llamado Elegir archivo. Por lo que cuando haces clic en él, te dirige a tu computadora. Ahora, elige un archivo y ábrelo. Por lo que como puede ver, aquí está el nombre de su archivo que se elige. Puedes cambiarlo varias veces, tantas como quieras. Yo estoy seleccionando esto. Ahora, se cambiará el nombre. Por lo que puedes cambiar así, pero solo se elegirá un archivo. Por lo que no sólo una imagen, puede subir cualquier archivo a partir de archivos PDF a archivos documento de Word o cualquier tipo de archivo que pueda subir con la ayuda de archivo de tipo de entrada. Ahora vuelve a tu editor y empieza a probar este código. 45. Avanzado: Cómo integrar audio: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo incrustar audio en tu página web. Entonces comencemos. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Una vez que haya terminado dentro de la sección del cuerpo, escriba la etiqueta llamada audio. Y luego dentro de esta etiqueta, use el atributo llamado SRC, que significa fuente. Por lo que aquí necesitas dar la fuente de tu audio. Déjame escribir más cerca. Punto mp3. Esto es básicamente una canción. Se puede elegir un nuevo archivo de audio. Ahora, derecha controla el control de la reproducción del audio, luego aumentar o disminuir el volumen desde el panel. Ahora ya terminaste. Así que cierra tu tecnología. Ahora déjenme dar un encabezamiento. Supongamos que cada uno estoy escribiendo mi nueva canción. Entonces esto es básicamente una demo ahora en la etiqueta H1. Ahora guarda este archivo. Ahora ve a mazos tomó, y luego crea un nuevo archivo. Y dale un nombre a tu expediente. Supongamos que estoy dando HTML. Sí, ahora entra a este archivo. Ahora dale un nombre a tu HTML p. supongamos que estoy dando audio dot HTML. Ahora guarda esto dentro de este archivo. También hay que guardar el archivo fuente de audio que está en mis teclas cerrar un punto mp3. Entonces déjame navegar a la sección donde he guardado esa canción. Por lo que lo he guardado en mi carpeta de música. Irrita. Ahora copia este archivo de audio de la canción y luego pégalo en el mismo valor de carpeta de guardado tu audio dot HTML. Aquí ahora se pega en la misma carpeta. Sí, terminamos. Ahora volvamos a tu editor y luego ejecútelo. Por lo que aquí está su archivo de audio. Ahora puedes tocarla y escucharla. Incluso. Stephen acaba de encontrar antes de un partido que bebes demasiado y eso es un problema. De acuerdo. Entonces amigos, fue agradable conocerlos y todo esto se trataba de conocer la pierna. Te voy a enseñar cómo una unidad rompió el récord. 46. Avanzado: Cómo integrar video: Hola a todos y bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo incrustar videos en tu página web. Ahora comencemos. Ahora ve a tu editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora una vez que haya terminado dentro de la sección del cuerpo, a la derecha, vdu, v IDEO tack. Esto te ayudará a incrustar un video en tu página web. Ahora, empieza escribiendo el atributo llamado SRC, que te dará el archivo fuente del video. Ahora déjame primero ir a la ubicación donde tengo un video. Entonces voy a la carpeta de videos de mi PC. Ahora aquí mis videos. Ahora, déjame seleccionar este video el cual tiene el nombre llamado hyperlink dot mp4. Entonces déjame volver a mi editor y escribir el nombre hyperlink dot mp4. Ahora bien, aquí controla la derecha, que básicamente te da el control de jugar y luego pausar y luego regular el cursor. Ahora bien, controles. Y luego terminar ataque. Ahora déjenme dar un rumbo aquí. Supongamos mi video ahora y etiqueta H1. Por lo que ya terminaste. Ahora guarda este archivo. Del mismo modo guardar este archivo en la misma carpeta. Entonces déjame ir a mis cosas de deck y luego crear un nuevo archivo y darle un nombre a tu archivo, supongamos video. Y luego dentro de este archivo, guarde este archivo HTML. Voy a nombrarlo como video dot HTML. Ahora guarda esto. Y recuerda, tus archivos de video también deben estar dentro de esta carpeta llamada video. Entonces déjame ir a mi sección de videos y copiar este HTML dot mp4. Y luego déjame ir a mi siguiente tubo donde he guardado la carpeta de video. Katie. Ahora dentro de este hipervínculo punto archivo MP4. Ahora vuelve a tu editor y ejecútalo. Por lo que como pueden ver aquí está mi video. Ahora, esto está tomando toda la pantalla ya que no hemos mencionado ningún ancho incrementado del panel de video. Así que déjame volver a mi editor ahora, cierto, ese atributo llamado height. Y luego iguala y luego establece la altura a 500 Px, Px diez. Así píxel. Ahora da el ancho con el que escribir. Entonces también establece el ancho en 500 px. Puedes manipular la altura y ancho de acuerdo a tu conveniencia. Ahora guarda esto otra vez y hagámoslo correr. Aquí tienes tu video. Ahora podemos tocarla. Puedes usar estos controles. Ahora incluso puedes hacerlo silenciar y luego reproducir tu video. Entonces no hay sonido, ¿verdad? Se puede adelantar el COSO así y después se juega. Esta fue la forma en que puedes incrustar videos en tu página. Gracias por ver este video. Mantente atento a la costa para conocer más en HTML. 47. Avanzado: Cómo integrar el complemento de Youtube: Hola a todos, Bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo incrustar plugins de YouTube en tu página web. Entonces comencemos. Ahora, ve a tu editor y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora una vez que termines, ve a tu navegador web. Voy a Google Chrome aquí. Se puede ir a cualquier navegador web. Ahora, ve a YouTube. Ahora a partir de un video de este tipo que deseas incrustar en tu página web. Ahora, déjame buscar un video. Entonces estoy buscando un video llamado What is HTM now, y luego selecciono cualquier video. Entonces estoy seleccionando esto. Entonces este es el video que quieres incrustar. Ahora. Pausa el video, ahora da clic en Compartir. Y luego puedes encontrar una opción llamada Embed. Así que da clic en él. Y como puedes ver aquí está el código que puedes invertir poco innovar. Entonces copia este código. Y luego volvemos con tu editor. Y luego dentro de la sección del cuerpo. Que bueno. Ahora vamos a guardar este archivo. Lo estoy guardando en mi talón de cubierta. Dale un nombre. Estoy dando Youtube dot HTML. Y después guárdalo. Ahora vamos a ejecutarlo. Por lo que como puedes ver aquí está tu video. Por lo que ahora tómalo. Y el mismo video, por favor. Por lo que de esta manera, puedes agregar videos de YouTube así como puedes agregar múltiples videos en tu página web. Ahora, déjenme volver con nuestro editor. Por lo que estamos usando la etiqueta llamada iframe, que nos está permitiendo configurar la conexión de YouTube en nuestra página web. Aquí está básicamente el ancho y la altura que puedes manipular para hacer que los sitios del video sean más grandes o más pequeños. Y entonces esta es la fuente. Y estos son algunos permisos que son auto-play y permiten pantalla completa dentro de esta etiqueta iframe. Gracias por ver este video. Estén atentos a la costa para conocer estas características avanzadas de un tartamudeo. 48. Avanzado: Cómo incrustar Google Map: Hola y bienvenidos de nuevo al curso. En este video, te voy a enseñar cómo incrustar Google Maps en tu sitio web. Entonces para eso, comencemos. Ahora ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora, empieza con la estructura básica de una página HTML. Ahora una vez que termines, ve a tu navegador web y luego ve a Google Maps. Entonces aquí estamos. Ahora ubicación social en Google Maps. Voy a registrar mi ciudad, Calcuta. Puedes buscar en tu ciudad o en cualquier lugar de tu elección. Ahora, mientras lo busco, se está exhibiendo aquí. Ahora, quiero que esto esté incrustado en mi sitio web. Entonces para eso, lo que hay que hacer es ir a compartir y luego ir a incrustar mapa. Ahora tú, aquí tienes el enlace de iFrame. Entonces copia este enlace y vuelve a tu editor. Dentro de la sección del cuerpo, pegue el enlace. Por lo que este es un enlace largo. Ahora, guarda este archivo en tu escritorio. Ahora déle un expediente, un nombre. Supongamos mapa de punto HTML, y luego guárdelo. Y ahora corramos y veamos la salida. Este es su mapa con representa Kolkata en mi caso, en su caso podría ser OCT. Para que puedas arrastrar el mapa, luego acercar y alejar el zoom. Puedes usar todas las características de Google map aquí mismo. De nuevo, estamos usando I-Frame para incrustar este mapa en nuestra repetición. Por lo que esta es una fuente total. Y este es el ancho y alto que puedes ajustar de acuerdo a tu elección para ver este video. Y no olvides practicar esto. 49. Introducción al proyecto principal - sitio web: Oigan a todos, bienvenidos de nuevo al curso. Es hora de que comencemos con nuestro proyecto final. En este proyecto, estarás aprendiendo a diseñar tu blog usando HTML, CSS. Por lo que como puedes ver, esta es la sección home de tu blog, que tiene un platillo y luego le sigue su receta. Entonces básicamente este es un blog de comida. Te enseñaré exactamente cómo construir este sitio web de blog. Ahora, también puedes construir sitio web de blog de moda u otros sitios web de blogs de esta manera solamente. Ahora, esta será tu sección Acerca de Nosotros donde podrás dar click en esta pelea nosotros en Facebook. Y también hay una galería. Y esta es tu galería. Y sea cual sea la imagen que publiques un blog que se guarda aquí. También puedes hacer clic en encontrarnos en Facebook, y luego puedes ir directamente a la página de Facebook de tu blog. Entonces esta es la página de Facebook de mi blog con este mundo foodies. Ahora, también te enseñaré cómo hacer vida a tu sitio web usando host triple 0 wave. Por lo que de esta manera, puedes llegar a tu sitio en vivo y tu bloque puede ser accedido por cualquier persona a través de este mundo. Y para ello, no tienes que escribir una sola línea de codificación. En cualquiera de los lenguajes de programación como PHP o Java, no necesitas todos estos lenguajes de programación para diseñar tu propio blog. Puedes hacerlo usando solo HTML y CSS. 50. Sitio web de blog: cómo agregar encabezados: Oigan a todos, y bienvenidos de nuevo al curso. Es hora de que escribamos el código para nuestro proyecto final. Entonces sin perder más tiempo, Empecemos. Ahora, ve al editor de Notepad Plus Plus. Crear un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora termino con la estructura básica de un beat HTML. He puesto el título a casa ya que estamos haciendo primero la página de inicio. Ahora dentro de la etiqueta body, escribe def, right, class equals, y luego main. Por lo que esta es una división para su contenido principal. Por lo que estoy escribiendo las clases significan. Ahora la etiqueta de división más cercana básicamente escribirá todo dentro de esta desviación principal. Ahora déjame empezar a escribir otra división, que será para nuestra cabecera, cabecera derecha. Y luego cierra la etiqueta div. Por lo que en esta sección de encabezado, puedes dar el nombre de tu blog y luego un eslógan. Entonces déjame escribir un párrafo en el que indiques el nombre de tu blog. Entonces cura, el nombre de un blog es muro de foodies. Ahora cierra la etiqueta p. Entonces puedes agregar una etiqueta aquí. Por lo que dada una identificación, dag, cierto, se necesita para que ambos exploren los casos diarios. Ahora cierra la etiqueta p. Ahora, estoy escribiendo un blog de comida aquí. Puedes usar cualquier tema para escribir en un bloque. Puede que no sea comida, puede ser moda o estilo de vida o tecnología, cosa, cualquier dominio que puedas seguir. Ahora vamos a guardar nuestro archivo. Por lo que voy a guardarlo en mi próximo tip. Ahora crea una nueva carpeta y dale un nombre. Supongamos que lo estoy nombrando blog de comida. Se puede dar cualquier nombre. Ingresa a esta carpeta del blog pie, y luego dale un nombre al archivo, calificando home dot HTML, ya que es nuestra página de inicio. Entonces home.html y luego guarda esto. Entonces esto es ahora espejo nuestra página HTML. Entonces por ahora, necesitas darle estilo al discurso. Entonces para eso, crea un nuevo archivo. Aquí estaremos escribiendo nuestro código CSS. Ahora, descubramos cuáles son las cosas que necesitamos estilizar. Necesitamos estilizar media de distribución y luego encabezado, y luego esta etiqueta. Así que ve a tu nuevo archivo y puntos grises significan, ya que media es una clase, así que empieza con punto y abre y cierra el corchete rizado. Ahora dentro de esta posición correcta. Y luego dar dos puntos y escribir absoluto. Por lo que esto tomará la pantalla total, tan absoluta. Y luego escribe el ancho que es del 100 por ciento. Ya que queremos usar el ancho total en la pantalla. Ahora para la altura, tenemos que establecer la altura porque la altura puede ser finita. Así que dale la altura. Voy a escribir mil pixeles. Puedes dar más o menos según tu conveniencia. Ahora, tenemos que establecer el margen para esa parte superior derecha. Por lo que esto establecerá el margen para la parte superior y derecha. Y el margen izquierdo también será de 0 por ciento. Por lo que terminamos de diseñar la media. Ahora, diseñemos la parte de encabezado para escribir encabezado de punto. Dado que encabezó también es un encabezado de clase. Y luego dentro del corsé rizado. Nuevamente posición. Ahora también dan absoluta y luego la anchura. Por lo que queremos usar el ancho total. Por lo que un 100 por ciento. Entonces dale la altura. Entonces no queremos que nuestro encabezado tome todo el espacio de la página web, por lo que debe estar en la parte superior. Entonces déjenme dar el encabezado como 20 por ciento. Ahora fijemos el margen para eso. Parte superior derecha. Y luego 0% y se fue a 0 por ciento. Por lo que terminamos de diseñar la sección de cabecera. Ahora, dentro de esta sección de encabezado, tenemos estas dos etiquetas de párrafo llamadas el mundo de los foodies, que es nuestro bloque de título. Y esta es la etiqueta. Entonces escribamos el código para darle estilo a nuestro título. Ahora primero vamos a establecer el color de fondo de nuestra sección de cabecera para ese fondo derecho. Y luego dar un guión y color claro, C-O-L-O-R. Entonces démosle un color. Ahora, podemos dar color usando los códigos hexagonales. Entonces déjame tomar la referencia de un código hexadecimal. Ahora, quiero establecer el color en magenta oscuro. Entonces mi código hexadecimal es hash aid siendo 00 a B. Ahora, puedes configurar tu color de acuerdo a tu elección. Para que puedas tomar referencia de los códigos hexagonales, que he mostrado en la sección de formato de texto de este curso. Ahora, estoy usando este magenta oscuro. Entonces déjame escribir aquí ahora. Hash ocho, OMC, ATP. No, danos punto y coma. Ahora diseñemos el título para eso. Dale un color a tu título. Con magenta oscuro, el blanco será apropiado. Así que la luz, y luego establecer el tamaño del texto, tamaño de fuente, y luego dar, supongamos 38 píxeles. Entonces a la derecha, el peso de la fuente. Y luego escribir voltio. Por lo que esto hará que el texto negrita y le dará más enfoque. Ahora, vamos a establecer la familia de fuentes. Familia tipográfica. Por lo que voy a usar la familia de fuentes llamada George yarn. Ahora, démosle a los textos alguna sombra para ese texto correcto. Después guión, y luego escribir sombra. La sombra se pondrá así. Puede dar dimensiones de la sombra en el eje X, el eje Y y el eje Z. Así que permítanme escribir tres píxeles en el eje x, tres píxeles en el eje y y tres píxeles en el eje y. Y el color de mi sombra será grande. No, necesitamos diseñar nuestra sección de impuestos para eso, hash derecho y luego escribir deg, ya que stack era un id a nuestro párrafo. Así que aquí usando hash, ahora abre la llave y dentro de esa sección, derecha, el tamaño de la fuente. Déjame suponer 20 pixeles y luego escribir font-weight. Atrevido. No hay familia de fuentes derecha. No, establezca la familia de fuentes en optima y escriba coma. Entonces sentido no, color correcto. Y luego escribir blanco. Ahora a la derecha el margen, entonces margen, luego guión, y luego derecha-izquierda. Supongamos 40 px. Ya que queremos que la pila se desplade un poco hacia la derecha. Por lo que terminamos de diseñar la sección de cabeza. Por lo que ahora vamos a guardar este archivo. Guárdalo en la misma carpeta que tu home.html guardado. Ahora escribe home dot css y luego guarda este archivo. Ahora dentro de home.html y dentro de la etiqueta head, link derecho. Y luego HREF es igual al css punto de inicio derecho. Y luego la relación derecha es igual a hoja de estilo. Ahora guarda este archivo. Ahora vamos a ejecutar nuestro archivo y ver la salida. Lanzemos y crezcamos. Por lo que esta es la sección de cabecera de nuestra página web. Dice para este otoño y aquí está el cheque que dice explotar los manjares. Gracias por ver este video. En los siguientes videos, procederemos a hacer la página web. 51. Sitio web de blogs - Cómo agregar menú: Oigan a todos, bienvenidos de nuevo al curso. Entonces vamos a escribir el código para proceder con nuestro proyecto. Ahora, ve a tu editor. La misma página, ¿verdad? Habías escrito la sección de cabecera. Ahora hoy escribiremos el menú para esta página principal. Por lo que después del final de la etiqueta de división de cabecera, iniciar otra división y darle un nombre. Supongamos a la derecha, la clase es igual y luego escribe el menú. Ahora cierre la etiqueta de división también. Ahora dentro de esta división escribirá la sección de menú para eso. Iniciar una lista desordenada. Así que empieza con la etiqueta UL y ciérrala simultáneamente. Ahora dentro de esta lista de etiquetas UL, los menús quieren dar. Entonces ojo derecho. Y entonces mi primer elemento para el menú es home, que será nuestra página principal. Y luego cerrar la etiqueta LI. Entonces otro menú para nosotros será sobre nosotros. Está bien Acerca de Nosotros. En el que podrás darte información. Y luego otro menú, que se llama galería, donde podrás ver todas las fotos o la comida que vas a usar en tu bloque. Ahora, cada uno de estos elementos de menú es una página web. Por lo tanto, al hacer clic en este menú, los elementos serán redirigidos a la página a la que pertenece. Ahora el hogar es un durazno, que ahora mismo estamos diseñando. Entonces tienes que anclar esta página, tan bien. Y luego escribir H ref es igual a hash porque no navegará a ninguna otra base ya que solo es la página de inicio ahora y la etiqueta de anclaje. Del mismo modo, es necesario dar anclas a sobre nosotros. Entonces escribe a y luego H ref, y luego escribe sobre HTML de punto, que estará creando en nuestros videos posteriores. Y luego cerrar la ETag. Ahora está subrayado porque aún no se ha creado esta página. Por eso está subrayado. Por lo que estaremos creando esto. Podemos conseguir esto ahora, ¿verdad? Galería, luego H ref, y luego dar galería punto HTML. Ahora la etiqueta de anclaje. Por lo que estoy menú está listo. Ahora es el momento de que agreguemos algunos estilos a nuestra lista. Entonces para eso, guarda este archivo y ve a home dot CSS, ya que es todo hoja de estilo. Por lo que aquí está mi casa punto CSS. Ahora, antes que nada, necesitamos diseñar la división llamada menu. Entonces aquí está nuestra división. Así que ve a home dot css y luego escribe el menú de puntos, ya que el nombre de la clase es Menu. Y dentro de esta posición correcta, Será absoluta? Y luego el ancho. Entonces necesito que el ancho sea del 100%. Ahora da la altura. Supongamos que así 15%. Ya que el gerente no debe ocupar todo el espacio en el pH. Ahora puedes dar top como suponen el 20 por ciento porque la cabeza aunque la altura es del 20 por ciento, lo que necesitamos seguir el ritmo de eso. Entonces vamos a dar 22 por ciento para que haya un hueco entre el encabezado y esta sección de menú. Y luego dar a la izquierda. Demos algún margen a la izquierda. Supongamos el 20 por ciento. ¿ Ahora bien? Ul LI. Por lo que en esta sección estaremos escribiendo el código para estilizar los elementos de la lista de nuestra lista desordenada. Ahora aquí puedes agregar un color de fondo a una lista de elementos, pero no voy a agregar eso porque eso no se verá en mi página web. Puedes hacerlo en tu página web si lo deseas. Ahora, voy a escribir text-align, center. Y luego voy a escribir lista, luego guión y estilo correcto. Y voy a escribir aquí ninguno. Esto básicamente nos ayudará a conseguir un horizonte para enumerar. Ahora vamos a B, ¿verdad? Entonces voy a dar el ancho como a 20 Px. Entonces después de ver la salida, podemos cambiar todas estas dimensiones si queremos saber con esto dado ahora y dar la altura de la línea, así línea luego altura, dx. Y luego se desaceleró. Este atributo de flotación le ayudará a posicionarse. Entonces voy a escribir flotador a la izquierda, así que realmente se posiciona en el lado izquierdo. Ahora vamos a usar un nuevo atributo que aún no has aprendido en este curso. Es decir, se librará aliado. Hover es algo que te ayudará a diseñar tu menú de una manera diferente. Eso significa que cuando coloques puntero del mouse sobre el elemento específico del menú, entonces cualquiera que sea el código que escribas dentro esta sección de libración se aplicará allí. Entonces vamos a escribir y en la salida podemos ver qué pasa ahí. Así que usa la etiqueta llamada Transform y luego RightScale. Ahora dentro de esta tasa, 1.5 y luego 1.5. Ahora bien, a color. Por lo tanto, a medida que se cierne sobre los elementos de su menú, por lo que queremos que algunas propiedades de ese elemento se cambien. Por lo que inicialmente será de color negro, pero cuando flote sobre él, quiero que sea blanco. Ahora para eso, necesitamos establecer un color de fondo porque nuestro color de fondo del artículo ya es blanco, por lo que blanco sobre blanco no será visible. Entonces vamos a establecer un color de fondo. Ahora, voy a decir los mismos colores establecidos para la sección de cabecera. Así que sólo voy a copiar este código hexadecimal y escribirlo hasta. Ahora, volvamos a nuestro home.html. Ahora nuestros elementos de menú donde bajo esta etiqueta ancla, ahora como sabemos, este ancla tiene un estilo por defecto, que será, en color azul y estará subrayado. Entonces no queremos eso en nuestra página web. Queríamos darle estilo de una manera diferente para ese derecho E. Y dentro de este color correcto. Y luego escribir ninguno. Después escribe negro. Después escribe texto. Decoración. Ninguno. Entonces no tendremos ninguna cosa subyacente. Se puede dar el tamaño de la fuente, tamaño de fuente. Supongamos 20 PX. Ya terminamos. Ahora guardemos esto. Vamos a home.html y ejecutarlo y ver la salida. Aquí estamos con nuestra comida es falsa. Por lo que aquí hay tres secciones a casa. Por lo que como puedes ver, en cuanto tengas tu flotando, puntero del mouse en este menú, los elementos se forman distancia, se está haciendo zoom y está mostrando un color de fondo allí. Entonces esto fue lo de Hubbard que hicimos en nuestro código CSS. Entonces estos son los menús que tenemos. Ahora al dar clic en Inicio, redirige a hormonalmente, no podemos ir a ninguna parte, pero aún no hemos diseñado sobre nosotros y calorías. Por lo que no podías ir a ninguna parte dando clic en estos menús. Por lo que terminamos de diseñar la sección principal. En el siguiente video, aprenderemos a diseñar el resto de tu página web. Gracias por ver chicos, manténganse atentos al curso para conocer más. 52. Sitio web de blog: cómo agregar contenido principal: Oigan a todos, y bienvenidos de nuevo al curso. Entonces en este video, te voy a enseñar cómo agregar contenido a tu blog. Entonces para eso, ve al editor de Notepad Plus Plus. Ahora ve a home.html. Dentro de este home.html, después de completar con su menú, luego después de la desviación del menú, ¿verdad? Desviación, y dar la clase como contenido. Ahora cierra la etiqueta de división. Dentro de este contenido, vamos a agregar nuestro contenido. Entonces como es un blog de comida, así que estaré agregando algo de comida y las recetas con las fotos, etc. Así que básicamente vamos a hacer tres cosas, que es una, hay que darle un nombre a nuestra comida que estamos afligidos en nuestro blog. Entonces tenemos que pensar en un nombre muy bonito y lucrativo. Entonces hay que hacer eso antes que nada. Lo segundo es que hay que dar una bonita imagen de la comida que ha preparado. Y lo tercero es la receta de la comida, que ayudará a los usuarios de tu blog a entender cómo hacer eso. En primer lugar, comencemos con el nombre de la comida. Ahora, voy a usar el encabezado llamado H5. Y cuando esto voy a escribir el nombre de mi comida. Ahora tu nombre debe ser atractivo y lucrativo para que los usuarios usen tu blog y obtengan la receta de ahí. Entonces mi primer artículo de comida es el sándwich. Entonces déjenme darle un nombre a mi sándwich que esté delicioso. Sandwich. Entonces este será el nombre de mi sándwich. Ahora, hay que dar una imagen. Entonces escribe IMG y luego SRC. Entonces hay que establecer la fuente para eso, ir a un dx2. Ahora, ya tengo esta imagen de sándwich. Entonces lo que voy a hacer es cortar de colina y luego ir a la carpeta donde tengo este home.html en casa dot css. Y de inmediato, crea una nueva carpeta y dale al nombre imágenes. Por lo que cualquier imagen que vayas a usar para tu sitio web se guardará en esta carpeta de imágenes. Ahora, simplemente lo voy a pegar aquí. Entonces tengo mi sándwich. Ahora vuelves a Notepad Plus, Plus y luego escribes tu fuente, es decir imágenes slash. Y luego volver a la carpeta y ver el nombre de la imagen. Entonces es sandwich dot JPG, ¿verdad? Sandwich, DBT. Ya terminaste con la imagen. Ahora, estaremos dando la altura y ancho y otros atributos de la imagen en nuestra sección CSS de la casa. Ahora, después de la medición para dar la receta. Entonces voy a usar la etiqueta p para ello. Y luego escribir la receta. Después cierra la etiqueta p. Y aquí escribe VR. Y luego otra etiqueta P. Ya he escrito la receta aquí. Ese es el chutney y todo. Entonces sólo voy a copiar esta cosa y escribirla ahí. Entonces lo estoy copiando y lo voy a pegar dos, esta va a ser mi receta y cerrar la etiqueta p. Entonces terminamos con nuestra receta e imagen y el título. Así que guarda esto y vayamos al CSS de punto cálido para diseñar estas cosas. Ahora empieza con el contenido de puntos, que era nuestra división. Y luego dentro de esto, correcto, la posición que es absoluta. Y luego dar el ancho y la altura. Por lo que se debe suponer 80 por ciento y luego la altura. Por lo que queremos que nuestro contenido tome la pantalla después del menú y el encabezado. Por lo que necesitamos calcular que cuánta altura se toma por cabecera. Y la sección principal para eso, Aquí está nuestra cabeza aunque con toma 20 por ciento de la altura y textos de menú, 15 por ciento. Aquí habíamos dado el dos por ciento de brecha al total es del treinta y siete por ciento. Ahora, también queremos algún hueco entre el menú y el contenido. Entonces démosle la altura como 60%. Entonces se considera que la sección superior es del 40 por ciento, incluyendo el encabezado y el menú. Por lo que el escritorio 60% será la altura de nuestro contenido ahora. Así que a la derecha arriba y luego dar 40%. Y dejó regalo en por ciento. Y eso es todo. Ahora, ¿verdad? H5. Y luego queremos establecer el tamaño de la fuente. Sitios de fuentes tan correctos. Y luego escribe, supongamos 38 px. Ahora, diseñemos nuestra sección de imagen. Entonces bien, imagen IMG. Y luego dentro de esto da la altura y el ancho de tu imagen. Tan altura correcta. Ahora vamos a establecer la altura a 300 PX pixel y luego ancho a 500 px. Ahora una vez que termines, vuelve a home.html. Entonces para eso, déjame escribir BR para hacerlo en la siguiente línea. Entonces solo sigue escribiendo BR para hacerlo más organizado. Ya estamos hechos. Ahora guarda esto. Ahora, vamos a ejecutarlo y ver la salida. Entonces aquí está nuestra receta y la imagen del sándwich, que es delicioso sándwich de rejilla. Entonces esta es nuestra página de inicio donde tenemos nuestro contenido. Ahora, incluso podemos agregar más contenido a nuestra página web. Qué eso volver a Notepad Plus, editor Plus. Y simplemente copia esta parte desde los cinco años hasta el párrafo. Entonces copia esto y pégalo a. El siguiente punto para mí será pasta. Entonces para eso, voy a escribir pasta descarada. Ahora, de nuevo, tengo que dar una imagen. Entonces para eso, puedes descargar la imagen o simplemente puedes hacer pasta y luego dar la imagen. Entonces aquí está mi imagen de pastor. Sólo te lo voy a cortar y pegar en mi imagen, una sección del blog de comida. Pégalo. Entonces es pasta dot JPEG justo aquí en lugar de pasta sandwich. Entonces te imaginas ordenado. Ahora, solo girará para cambiar la receta para eso. Bueno esto fuera. Y ya escribí la receta de la pasta. Entonces sólo voy a copiar esto y pegarlo a. Entonces necesito dar algunas VRs solo para organizar mis cosas. Ahora una vez que termines, guarda esto y ejecútalo para ver la salida. Entonces aquí está mi página web para este mundo, y esta es mi página de inicio. Y aquí está mi delicioso sándwich a la parrilla con receta. Y luego tengo mi pasta salada con la receta. Por lo que de esta manera, podrás agregar tantos platillos como quieras. Si estás haciendo un blog de moda, entonces puedes agregar tu imagen. Incluso puedes agregar tus videos a tu página web. Gracias por ver este video, chicos, manténganse atentos al curso. 53. Sitio web de blog: cómo crear una galería: Oigan a todos, bienvenidos de nuevo al curso. Entonces nos queda diseñar dos páginas más, y luego terminaremos con nuestro bloque. Entonces en este video, voy a diseñar la sección de galería para eso. Ve al editor de Notepad Plus Plus y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Entonces terminamos con la estructura básica y le he dado el título de culpable. Ahora, dentro de la sección del cuerpo, escribe la etiqueta llamada H1. Y luego escribir galería. No hay etiqueta H1 de cierre. Y voy a escribir algún estilo usando CSS en línea. Entonces voy a alinearlo al centro, así que a la derecha, text-align. Y luego escribe y no lo sé. Ella tenía una desviación. Laetiqueta de desviación. Ahora dale el nombre de la clase como foto. Ahora guardemos esto. Recuerda que debes guardar esto en la misma carpeta que has guardado las otras páginas web. Por lo que había ahorrado en el blog de comida en mi escritorio. Entonces lo voy a guardar en la misma carpeta. Así que selecciona el blog de comida y dale un nombre a tu página HTML. Estoy dando galería dot HTML. Ahora guarda esto. Ahora dentro de esta desviación, a la derecha, EN tramposo, ya que tu galería debe tener imágenes. Entonces IMG, así que vamos a ver. Vamos a agregar imágenes de un bloque. Entonces para eso, imágenes correctas y luego slash sandwich oscuro GPG como habíamos agregado esto en nuestro video anterior. Y luego P1, que cuando el usuario haga clic en esta imagen, se abrirá en modo de pantalla completa. Entonces para eso, usa la etiqueta de anclaje y luego el objetivo correcto. Y luego escribe subrayado, luego en blanco. Por lo que esto abrirá la imagen en una nueva ventana. Ahora escribe H ref igual y luego escribe imágenes slash sandwich, dot JPG. Ninguna banda final podría etiquetar. Ahora vamos a añadir algo de altura y ancho a nuestra imagen para ese derecho, altura es igual y luego escribir 300 px y ancho como 500 Px. Entonces ya terminamos. Ahora guardemos esto y ejecutémoslo. Entonces esta es nuestra galería la cual tiene esta imagen. Ahora al hacer clic en él, la imagen se muestra en pantalla completa. Ahora podemos agregar más imágenes. Entonces para eso, copia esta parte, toda esta desviación, y pégala. Ahora en la fuente, puedes dar otra fuente. Entonces voy a agregar el pick de pasta, lote de pasta JPEG. Y ahora aquí en vez de sándwich, ¿verdad? Pasta. Ahora queremos que esta imagen esté a la derecha de esta imagen. Entonces para eso, necesitamos hacer algo de estilismo. Así que el estilo correcto dentro de la sección de la cabeza y al mismo tiempo terminó. Ahora dentro de la sección de estilo, usa la clase llamada foto de punto. Y luego dentro de esto, a la derecha, flotar. Y luego levantar. Ahora guarda esto. Ahora corramos y veamos la salida. Por lo que como puedes ver aquí, usa tu sándwich a la parrilla. Aquí está su pastor salado, y al hacer clic en él, limite los regalos que se le muestran. Ahora, lo que tenemos que hacer es vincular esta sección de galería con nuestra página de inicio. Entonces para eso, ve a home dot HTML. Y aquí, como puedes ver, está anclado a galería dot HTML. Por lo que ahora vamos a ejecutar home.html. Al dar clic en galería, aquí está su galería. Ahora como estás de vuelta de ti, Aquí está tu página de inicio y aquí está tu galería. 54. Sitio web de blog: cómo crear una página sobre nosotros: Oigan a todos, bienvenidos de nuevo al curso. Ya terminamos con Homepage y galería. Por lo que en este video, aprenderás a diseñar tu página sobre nosotros. Para eso, ve a Notepad Plus Plus, y luego crea un nuevo archivo. Ahora empieza con la estructura básica de una página HTML. Ahora, en esta página unidad para escribir sobre el bloqueador. En este caso, eres tú para eso. ¿ No me imaginé de ti mismo o del blogger? No. Para eso, selecciona cualquiera de tus imágenes. Entonces tengo una imagen mía en mi escritorio, así que solo la voy a cortar. Y en mi carpeta de blog de comida, dentro de la carpeta de imágenes, la voy a pegar. Ahora. Déjenme cambiar el nombre de esta imagen. Entonces ve al nombre y dale un nombre. Supongamos que no, ve a tu editor de Notepad Plus, Plus. Y luego en las imágenes de origen, luego slash, luego dot, JPG. Ahora da la altura y el ancho. Altura es igual a 300 px y ancho es igual a 300 Px. Entonces terminamos con la altura y el ancho. Ahora, hay que escribir la sección sobre. Entonces para eso empieza una etiqueta de párrafo. Ahora, ya he escrito sobre mí mismo. Entonces sólo voy a copiarlo y pegarlo a. Entonces voy a dar unos VRs para que quede bien en la pantalla. Ahora cierra la etiqueta p. Por lo que ahora antes de guardar este archivo, vamos a home.html y averiguar cuál era el nombre que usamos para esta página Acerca de. Por lo que habíamos usado acerca de punto HTML. Entonces de manera similar, nombremos este about.html. Entonces dentro de la carpeta del blog de comida, ya tengo dentro de la caída de rocas de comida. Entonces déjame escribir sobre HTML de punto. Ahora guarda esto y ejecútelo para ver la salida. Entonces aquí está mi foto. Aquí se trata de mí. Ahora puedo cambiar el atributo alto y ancho de tu foto. Tan ajustado en consecuencia. Entonces déjenme dar el ancho como 200. Guarda esto y otra vez c. Así que de esta manera puedes agregar justo ahora Se ve bien. Ahora bien, esto es sobre mi biografía. Ahora esta es una breve biografía. Puedes agregar muchas más cosas a tu biografía. Aquí también puedes agregar algunos enlaces a tu cuenta de redes sociales para que puedan contactarte. Por eso. Ir a Google y buscar imágenes. Imágenes de Facebook. Elige una imagen y longitudes esta. Así que haga clic en él y luego haga clic derecho en él, y haga clic en Guardar imagen como y guárdelo en la carpeta para bloquear dentro de la carpeta de imágenes. Por lo que se llama download dot PNG. Tanto tiempo para mantenerlo así. Se guarda. Ahora volvamos a Notepad Plus Plus. Ahora aquí, escribe IMG, luego SRC, luego iguala, y luego escribe imágenes slash download dot PNG. Ahora vamos a anclar esto a la página de Facebook o perfil de Facebook. Por lo que te recomiendo crear una pieza en Facebook con el nombre de tu blog y luego enlazar esa página con esta imagen. Entonces para enlazar, vamos a usar la etiqueta de anclaje. Entonces aquí está nuestra etiqueta de ancla. Ahora escribe H ref igual. Por lo que necesitamos conseguir el enlace. Así que ve a tu navegador y luego ve a Facebook. Y luego ingresa a tu cuenta. Voy a iniciar sesión en mi cuenta. Desde aquí. Se pueden crear páginas. Entonces como ya he creado una página para este bloque, así que voy directamente a ir a eso. Por lo que da clic en las páginas. Y aquí está mi mundo de los foodies. Así que da clic en él. Ahora aquí obtienes una opción que nos llama playa con la puntera. Así que da clic en él. Este es tu blog y el visitante lo verá así. Desde que acabo de crear un blog. Por lo que aún no hay publicaciones. Para que puedas crear tu página y se tira, y también puedes dar a conocer tu blog. Ahora, copia esta parte y pégala en H ref. Ahora guarda esto. Corramosy veamos la salida. Aquí nos encuentras en Facebook. Al hacer clic en él, se le redirige a su página. También puedes agregar tus otros mangos sociales que solo Twitter o LinkedIn o cualquier otro perfil si tienes. Ahora, volvamos a Notepad Plus, Plus. Y desde el home dot HTML sí lo ejecuta. Y vamos a dar clic en Acerca de Nosotros. Entonces tenemos la BGO. 55. Sitio web de blogs - Sitio web en vivo: Oigan a todos, bienvenidos de nuevo al curso. Por lo que hemos llegado a un final de este curso. Entonces en este video, te voy a enseñar cómo lanzar tu sitio de blog y hacerlo en vivo. Entonces para eso, necesitas hacer un pequeño cambio. Es decir, ve a tu carpeta de blog de comida. Entonces en lugar de home.html, solo hazlo index.html. Ahora, ve a tu navegador y luego busca alojamiento web. Entonces escribe triple 0 donde post. Entonces esta es básicamente una plataforma de hosting gratuito donde puedes lanzar tu sitio web de forma gratuita y no necesitas dinero para eso. Entonces como se trata de un proyecto para pruebas, en nuestro caso, estaremos utilizando este hosting gratuito. Si quieres lanzar tu blog de manera comercial, entonces obviamente puedes por alguna plataforma de hosting comercial como Host, Gator son hosting, etc. Ahora da clic en este enlace y luego puedes hacer una registro. Entonces da click en eso. Necesito dar el correo electrónico y contraseña y el nombre del sitio web. Entonces dame tu correo electrónico, derecho a saberlo, dame una contraseña adecuada, y luego escribe el nombre de tu sitio web. Entonces en mi caso, voy a escribir mundo foodies. Entonces este va a ser el nombre de mi sitio web. Ahora da clic en. Consigue hosting gratis. Sepa rápidamente verificar su cuenta de correo electrónico para eso. Inicia sesión en tu cuenta de correo electrónico. Aquí encontrarás la media de un post. Por lo que da clic en Verificar Correo Electrónico. Por lo que ahora tu correo está verificado. Por lo que da clic en este gestor de archivos. Por lo que da clic en subir archivos. Ahora. Aquí hay dos archivos ya que es HTML público y otro que es TMP. Y ahora esto es public.html. Ahora dentro de esta carpeta, necesitas guardar todos tus archivos. Entonces para eso, ve a tu siguiente tubo. Aquí está tu blog de comida y haz clic derecho sobre él y haz clic en Ok, así que lo estoy convirtiendo en un archivo de lectura. Ahora. Ahora vuelve a tu navegador. Y luego de que haga clic en Cargar archivos, haga clic en seleccionar archivos, y luego vaya a su escritorio. Ahora. Da clic en el blog de comida punto raro, y ábrelo. Ahora, haz clic en Subir. Por lo que como puedes ver, está subido aquí. Ahora selecciónelo y luego haga clic derecho sobre él. Y se puede ver esta opción de extracto. Así que da clic en él y da clic en extraer. Ahora tenemos todas nuestras páginas web seleccionadas aquí. Ahora lo que tenemos que hacer es crear otra carpeta. Para eso crea una carpeta y le dan el nombre como imágenes. Ahora da clic en crear. Se crea tu carpeta. Ahora, haga doble clic en esta carpeta de imágenes. Ahora haga clic en subir archivos y luego seleccione los archivos. Y luego entrar en la carpeta de imágenes y seleccionar todas las imágenes que sean relevantes. Y luego abrir y luego subir. Por lo que se suben tus imágenes. Ahora, volvamos al HTML público. Ahora seleccione esta carpeta de tema y luego haga clic con el botón derecho y eliminarla. Ya que no queremos ningún archivo redundante en nuestra página web. Ahora dentro de este HTML público también, tenemos este eje HD. Entonces vamos a borrarlo también ya que no lo necesitamos . Entonces terminamos. Ahora vuelve al administrador de archivos y simplemente haz clic en tu página web. Por lo que aquí está su página web. Ahora, da clic en galería. Tienes tu galería, y luego puedes hacer clic en About Us. Por lo que tienes tu sección Acerca de y también puedes hacer clic en encontrarnos en Facebook. Se redirigirá a la página de Facebook. Entonces nuestro sitio web está bien ahora es la vida. Entonces esto es para el hosting gratuito. Si tienes un hosting pagado, entonces no obtendrás este tipo de marcas de agua. Entonces esta es tu página web. Ahora, haz una cosa. Cerrar sesión desde tu cuenta en web host. Por eso. Haga clic en cerrar sesión o cerrar sesión. Has cerrar sesión con éxito. Ahora, haz clic en una nueva pestaña y luego escribe el nombre de tu sitio web. Entonces este es básicamente el nombre de mi sitio web. Entonces como entro en él, así que aquí puedo ver mi página web. Tu blog ya está en vivo. Ahora puedes agregar la URL de tu blog a tu manejador de Instagram. Y también puedes compartir el sitio web con el mango de Facebook y las páginas de Facebook y etc. Gracias por ser un aprendiz maravilloso. 56. Es hora de que el proyecto de clase: Hola chicos, bienvenidos de nuevo al curso. Ahora es el momento del proyecto de clase. Para el proyecto de la clase, es necesario crear un sitio web de blog. Para el tema del sitio web del blog, puedes elegir cualquier tema. Te puedo dar alguna idea como comida, viajes, moda, belleza, tecnología, hacks de vida, etc. El sitio blogger debe contener la sección Home, galería sobre nosotros y algunos enlaces de redes sociales. Algunos consejos y trucos para ti. Siempre usa un editor de codificación porque realmente te hace la vida más fácil como desarrollador si usamos nuestro editor de codificación. Ahora, lo siguiente es que debes dar sangría adecuada mientras escribes tu código. La sangría adecuada realmente nos ayuda porque habrá muchas líneas de código y la sangría ayudará a que el código sea más legible. Y por último pero no menos importante, no entres en pánico si te quedas atascado. Hay muchas fuentes en la web donde puedes consultar como escuelas W3 por ejemplo. Puedes ir allí y encontrar soluciones a tus consultas, o puedes sentirte libre de hacer preguntas aquí también. Ahora, es el momento del entregable. El entregable será la captura de pantalla del sitio web del blog que ha creado. Por lo que después de que hayas terminado con el proyecto, necesitas compartir esa captura de pantalla del sitio web. Te deseo todo lo mejor. 57. Bono: Cómo agregar emojis: Bienvenidos de nuevo al curso. Entonces en este video, te voy a enseñar cómo puedes agregar imágenes y vas a repetir. Entonces para eso, abre tu editor. Entonces simplemente voy a abrir Bloc de notas. También puede utilizar Notepad Plus, Plus o cualquier otro editor de su elección. Ahora, solo escribe la estructura básica de una página HTML. Entonces empezaré con cinta y luego llegaré a un cabezazo. Cabeza. Demos un título a esto. Entonces supongamos que los manchus, ¿verdad? No olvides incluir también esta etiqueta Meta. Entonces le voy a dar un valor. Por lo que el metal puede establecer, debe tener este valor, UTF ocho. Entonces olvídate de introducir esto. Y después seguiremos adelante con el cuerpo. Ahora dentro de la etiqueta corporal. Basta con dar un encabezado, emojis y romper para ir al siguiente carril y luego una etiqueta p. Ahora, a partir de aquí, como cualquier imagen que necesites dar, así que necesitamos ese valor decimal para ello. Entonces lo que haremos es ir a tu HTML decimal. ¿ De acuerdo? Entonces aquí tenemos los códigos decimales para todos los emojis. Entonces déjenme abrir esto rápidamente. Entonces tienes un rostro reluciente, enfrentas a lágrimas de alegría. Entonces empecemos con esto. Sólo voy a copiar el valor decimal, volver a editor y simplemente pegarlo. Cerremos esta etiqueta p y guardemos este archivo. Entonces lo voy a guardar en mi escritorio. Por lo que limitar t dot HTML y donde y venderlo. Hacerlo guardado. Ahora, vamos a abrirlo. Y sí, tenemos este emoji, así que hagámoslo un poco más grande para que lo entendamos. Por lo que voy a establecer el tamaño de la fuente, fuente. De acuerdo, entonces necesito darle la etiqueta de estilo. Y luego el tamaño de la fuente es igual. Esto se ve mejor. Así que ahorra. Regresar a la página web y a la amistad. No hay cambios. Déjame hacerlo más. De acuerdo, entonces no debes usar igual para escuchar mi error. Entonces vamos a ver ahora, si cambia. Sí, tenemos una montaña más grande. Ahora, volvamos a nuestra guía y utilicemos otra. Entonces me voy a llevar este. Entonces sólo voy a copiar este decimal hacia adelante o hacia atrás a tu editor. Y luego lo voy a pegar aquí. Ver a la derecha. Vuelve a la página web y refréscate y tienes el siguiente emoji. Por lo que de esta manera puedes agregar emojis para repetir. Entonces, para darle un sentido más, sólo voy a escribir algo. Entonces supongamos que este es mi favorito y tenemos ese emoji. Entonces volvamos y refresquemos. Sí, este es mi favorito y esto tiene mucho más sentido. Por lo que de esta manera, puedes agregar emojis en tus páginas web para que se vea más mejor y más accesible para los usuarios. Por lo que gracias por ver este video. Te veremos en los próximos videos. 58. Bono: Cómo instalar el editor de texto de Sublime: El curso. Entonces sigamos con las instalaciones. En este video, te mostraré cómo puedes descargar el sublime texto e instalarlo. Entonces ve a Google y busca Sublime Text. Y aquí lo tendremos. Así que da clic en descarga, la versión para Windows y la de Linux. Entonces voy a ir por Windows 64 bit. Por lo que basta con dar clic en él. De acuerdo, aquí tienes el expediente. Por lo que voy a dar clic en Guardar. Ahora, en cuanto hagas clic en él, obtendrás instalado un pop-up, y solo tienes que presionar Siguiente y Finalizar. Entonces como ya lo tengo descargado. Entonces sólo te voy a mostrar cómo se ve. Este es nuestro sublime editor de textos. Aquí puedes tener esta estructura de carpetas para tu proyecto. Y entonces aquí podrás tener el espacio donde podrás escribir tu código. Así que gracias por ver este video y mantente atento al curso. 59. Bono : Introducción de Jquery: Bienvenidos de nuevo al curso. Entonces comencemos con jQuery. Jquery es básicamente nuestro destacado cada biblioteca JavaScript. Se utiliza básicamente para el manejo de eventos y una animación con otros fines. Así que entremos en nuestro primer ejercicio y veamos cómo funciona jQuery. Entonces para eso, necesitamos buscar jQuery CDN. Jquery CDN. Cdn es una red de entrega de contenido. Por lo que usar la CDN nos ayudará a contactar con la biblioteca jQuery, que está alojada en algún lugar, y no necesitamos instalarla. Entonces usaré la más reciente. Por lo que necesitamos copiar esto. Y abramos nuestro editor. Entonces voy a empezar a codificar en Sublime Text. Abre este editor y empieza con la estructura básica de una página HTML. Html. Y luego Derecha, la etiqueta de cabeza. Están involucrados en ello para portar este código de script abuelita en la cabeza. No. Agite Ready uno. De acuerdo. Y ahora necesitamos pegar el CDN. Entonces sólo lo voy a pegar aquí. ¿ De acuerdo? Ahora, cuando el body tag y yo te vamos a mostrar básicamente tipo de desafío MCQ el cual puedes diseñar. Entonces yo sólo le voy a dar un encabezamiento. Preguntas Mcq y el H2. Y luego más preguntas. Voy a usar H6. No olvides poner un respiro. Entonces BI. De acuerdo. Entonces uno. Entonces escribe la pregunta, ¿cómo está el clima hoy? Y luego, y H6. Nuevamente, soy BR. Y entonces podemos seguir adelante con la redacción de las opciones. Utilizaré p tag para las opciones. También puedes usar profundidad. Así que vamos a usar div aquí. Y vamos a dar la opción, opción E firma. ¿ De acuerdo? Y la etiqueta div. Y vamos a darle estilo. Entonces, cierto, rancio. Y tamaño de fuente. Supongamos 1 a EM. ¿De acuerdo? Y démosle una identificación también. Entonces id, luego dar una identificación. Entonces voy a dar la idea de alcance PT-1, opción uno. ¿ De acuerdo? Ahora voy a guardar esto y vamos a ver cómo se ve. Así que guárdalo. Voy a guardarlo en Dexter. Nombre, ¿verdad? Para reproducir HTML de un punto. Guarda esto. De acuerdo. Ahora vamos a correr y ver cómo se ve. Entonces tenemos esto, vale, esta pregunta se ve muy pequeña, así que no usamos otra cosa. La opción parece afectar, el tamaño de la fuente es bueno. Cambiémoslo de H6 a otra cosa. A lo mejor podemos usar H4. Sí, podemos usar H4. Entonces vamos a ahorrar. Y vamos a ver. María cargando. Sí, es más grande pero aún no del tamaño deseado. A lo mejor puedo usar h reinstalar. Sí, se ve perfecto. Entonces esta es una pregunta que estoy tomando solo pregunta normal. No puedes tomar ninguna pregunta de tu elección solo para hacerte entender cómo funciona. Es el clima de hoy y tenemos una opción como Sonny. Y vamos a dar adopciones. Entonces no te olvides de BR después de esto. Y una cosa más, también hay que darle una altura y un ancho a esta división. Entonces déjenme darle una altura y anchura de 50 PXE. ¿ De acuerdo? Ahora, vamos a copiar esta y crear las otras opciones. Entonces hagámoslo herramienta de opción. Y luego solo retirar soleado, lluvioso y B opción B. El resto será el mismo. Ahora pasemos a la siguiente opción. Opción tres y este cambio hacen que sea Opción C y luego nublado. De acuerdo, así que vamos a guardar esto. Por lo que tenemos soleado, lluvioso y nublado. De acuerdo. Necesito aumentar el ancho. Entonces saltemos sin embargo, lo que S 100 px. Y mantengamos la altura como 50 PXE. Vale, ¿ Salvar lo que pasó? Se convirtió en 500. Por eso. Sí, ahora, se ve absolutamente bien. Puedes dar tantas opciones como quieras. También puedes tener opción D. Así que una vez que el usuario elija una opción, se marcará. ¿De acuerdo? Ahora, vamos a escribir el guión. Lo que hay que hacer es abrir una etiqueta de script. ¿ De acuerdo? No cilios. Entonces. Lo que tienes que hacer es cuando eres símbolo de dólar y documento correcto. Y luego se prepararon. De acuerdo. Entonces este documento.listo, lo que hará es cada vez que se recargue la página, ese es el documento que es stovepipes, una página web que está lista. Se invocará esta función en particular. Entonces necesitamos escribir la función para eso. ¿ De acuerdo? Y entonces así es como se debe escribir deck. ¿ De acuerdo? Y no olvides un punto y coma aquí. Entonces esta es la estructura básica de las funciones jQuery. Sólo recuerda esto y dentro de esto listo, tenemos que escribir ahora nuestro código. Entonces cada vez que un usuario cómo la voz en esta opción en particular, que es división aquí, queremos que el color cambie, ¿de acuerdo? Entonces vamos a escribirlo. Dólar derecho. Entonces siempre que queramos realizar algunas operaciones en la página web usando este documento, ahora vamos a realizar una operación en este div. Entonces para eso, necesitamos escribirlas aquí. ¿De acuerdo? Y luego puntear en esta función on. Del mismo modo unidad para obtener esta estructura, vale, en esta función impar, necesitamos escribir ese evento. Por lo que el evento será ratón y el ratón y termina cuando estará flotando sobre la división. Entonces para mouse enter, escribiremos una función. Y esto contendrá la operación que queremos que se lleve a cabo. Entonces lo que queremos hacer es siempre que estemos cubriendo cualquier respuesta, el color, el color de fondo de cambiará el color, el color de fondo de esa opción en particular. Entonces Digamos esto. Por lo que de nuevo, en este dólar y luego dentro de los paréntesis, es necesario escribir el límite. Entonces aquí el elemento es D1. Entonces por eso estoy escribiendo esto, esto y luego punto CSS porque queremos cambiar el estilo de la división. Es decir, queremos hacer algunos antecedentes. Entonces tenemos que usar CSS. Entonces podemos escribir color de fondo. ¿ De acuerdo? Entonces necesitamos darle un valor. Por lo que voy a escribir tarde. Por lo que cada vez que se cierne alguna opción, se, el color de fondo cambiará a gris claro. Y cuando el mouse ya esté flotando sobre esa opción, entonces de nuevo volverá a cambiar a blanco. Entonces para eso también, necesitamos escribir el evento, que sea más hoja. Yluego un colon. Y luego función. Y entonces, no te olvides de una coma aquí porque estamos escribiendo muchos eventos. Entonces de manera similar, este punto css y luego el color de fondo. Entonces ahora queremos que vuelva a cambiar a mi derecha. Entonces esto se hace. Ahora lo que tenemos que hacer es establecer un evento para ellos. Haga clic, Ok, cada vez que hacemos clic en cualquier opción, el color debe cambiar. Entonces digamos que la opción correcta es enviar. Por lo que cada vez que pinchamos en él, su color va a cambiar. ¿De acuerdo? Entonces hagamos una cosa. Entonces, ¿qué necesitamos para hacer esto, no en esta extraña función, por lo que está terminando aquí. Entonces después de esto, necesitamos escribir esa función. Así que ahora voy a escribir hash o BP cuando estoy usando las ideas para usar el ID para usar este símbolo hash, hash OPT uno, y luego punto. Y cuál es el evento que es click, click, and then write function. De acuerdo, Y no te olvides de un punto y coma aquí. Ahora, voy a hacer ahora mismo operación. Así que de nuevo, dólar. Después podemos escribir este punto y luego CSS, y luego el color de fondo. Y luego limpiar. ¿De acuerdo? Ahora a continuación, cada vez que se selecciona esta opción, ahora incluso si el mouse se cierne sobre ella más, necesitamos mantener el fondo como impuro. Entonces para eso, otra vez. Y esto, y luego punto c. lo siento, mi hoja de ratón. Queremos hacerlo por ratón en vivo. Por lo que de nuevo, función qué hacer cuando el ratón se va. Nuevamente un punto y coma aquí. ¿ De acuerdo? Entonces necesitamos escribir la operación que es esta, y luego dot css y luego otra vez Macron color. Y luego entre, por lo que debe permanecer. De acuerdo. Entonces esto es por tu derecho y así esto fue por la respuesta correcta. Ahora vamos a configurar las cosas con en absoluto y retocar con la opción dos y la opción tres a lo largo. Entonces sólo voy a copiar este Control V. Ahora en lugar de la opción uno, opción dos, luego una coma, y luego opción para descansar se verá. Ahora, si se hace clic, entonces el color de fondo será rojo, ya que son todos n tamaño. Así que lee y aunque el ratón se vaya, realmente significa. Vamos a guardar esto. Ahora. Veamos la salida. Algunos flotando sobre soleado, lluvioso, nublado. Entonces sí, todo está funcionando bien. Siempre que estoy flotando sobre ella, se está poniendo gris para todas las opciones. Y cada vez que no tengo hambre, sólo estoy alejando el ratón. Todavía se está topando en este momento. Y vamos a dar clic en la opción Agregar. Clicked. ¿ De acuerdo? Entonces lee esto. Rainy no es una opción. De acuerdo. Ahora vamos a dar clic en domingo y es verde. Entonces sí, soleado es la opción correcta que hemos elegido. De esta manera, puedes configurar todas tus preguntas y simplemente puedes tener cuestionario MCQ y puedes probarlo a sus amigos y colegas. Entonces espero que te haya gustado este video. Gracias por ver. 60. Bono - Jquery Toggle: Bienvenidos de nuevo al curso. Así que espero que hayas disfrutado el último tutorial. Ahora, pasemos a nuestro siguiente ejercicio. Para el siguiente ejercicio, lo que debes hacer es abrir tu editor. Y entonces lo que voy a hacer es crear un nuevo archivo. Y luego sólo copie todo este código. ¿ De acuerdo? Y ya no necesitamos esto, así que solo voy a quitar esto. ¿ De acuerdo? Y también sabemos que no necesitamos esto. Por lo que nuevamente tenemos una estructura básica. Grasa de mejilla será y ejercicio. De acuerdo, ahora aquí vamos a implementar toggle. Entonces vamos a ver cómo funciona. Entonces para eso, necesitamos crear dos paneles. Vamos a echar un vistazo. Entonces para eso, necesitamos crear dos etiquetas div. Entonces necesito tema. Y luego hay que escribir un nombre de tema. Entonces supongamos mejilla lista? Aquí puedes escribir cualquier cosa de tu elección. Sólo lo escribo para hacerte entender, ¿de acuerdo? Ya está en deuda. Ahora, cuando sí crea otro div, que será la descripción de este tema descripción. Y luego vamos a escribir una descripción que Java para incluso el manejo etc Ok, Así que tenemos la descripción ahora entrar etiqueta div. Ahora vamos a darle estilo a esto. Entonces yo sólo voy a etiqueta de estilo ahora, ¿no? Hash. Y luego tema y coma hash descripción. Así que voy a hacer el relleno y luego text-align. Entonces text-align, mostraremos el incentivo que le damos al centro y lo dejamos para asegurar la izquierda y la derecha. Se siente bien, cierto, va a mostrar la derecha. Por lo que de nuevo, vamos a darle un color de fondo. Vamos a darle cualquier color que podamos dar, tal vez amarillo. De acuerdo. Y entonces cuando podría dar una frontera. Entonces te estoy dando un borde sólido, un px. Y vamos a darle un color de borde también. Así que déjalo ser. Eso se ve bien. Por lo que ahora necesitamos ocultar la descripción. Por lo que cada vez que pinchamos sobre el tema, debe aparecer la descripción. Entonces para eso, el acolchado. Por lo que haremos un relleno de 50 PXE y pantalla derecha. Ninguno. De acuerdo, terminamos con el estilismo. Entonces vamos a guardar esto. Voy a guardarlo como g dot HTML en el escritorio. Entonces C. Y corramos a ver cómo se ve. Sí, Viernes Santo. Pero cada vez que estoy haciendo clic en él, no puedo ver la descripción. De acuerdo, así que hagámoslo usando jQuery. Ahora lo que tenemos que hacer es otra vez, documento dólar, función lista. No olvides el punto y coma. De acuerdo, entonces dentro de esto, necesitamos escribir los eventos. Por lo que dólar hash tema. Por lo que al dar clic en el tema, la descripción, Vamos a paso que viste el evento hará clic. De acuerdo, y luego la función. Ahora, cada vez que hacen clic en el tema, la descripción debe apelar. Entonces dólar, hash descripción punto ligeramente más oscuro. Podemos escribir la hora. Es decir, el tipo de problema que quieres. Entonces debe ser rápido, no debe ser lento. Así que déjame mantenerlo lento y te mostraré cómo puedes establecer el tiempo para ello. Entonces sí, lento. Y creo que ya terminamos. Entonces vamos a guardar esto. Y vamos a recargar la página y dar clic en jQuery. Entonces sí, ya podemos ver la descripción. Y si da clic atrás, se ocultará. Entonces es básicamente toggling. ¿De acuerdo? Ahora, vuelve al editor. Entonces si quieres establecer el tiempo en esta cosa, entonces supongamos que queremos que se haga por cinco segundos. Para que puedas escribir 5 mil, sí. De acuerdo. Y guarda esto y refréscate. Entonces cuando haces clic en esto y abres ciudades, y cuando cierras esto, cierras esto muy lentamente. Puede establecer el tiempo aquí según su elección. Y si lo configuro rápido, y no te olvides de las cotizaciones, guarda esto, vuelve a cargar. Y sí, se está abriendo muy rápido. Entonces sí, todo esto se trata de toggle. Gracias por ver este video. Estén atentos al curso. 61. Bono : Animación de Jquery: Por lo que en este video, te mostraré cómo realizar animaciones usando jQuery. Para eso, acude a tu editor. De acuerdo, entonces solo voy a copiar el código del primer ejercicio que predigo para jQuery. Este, ver qué dolor controla y manipula ciertas cosas con el fin de realizar este ejercicio. Ahora, que esta sea pregunta MCQ. Y en lugar de esta pregunta, voy a escribir como yo. Y para las opciones, lo que voy a hacer es dejar que esto sea soleado. No estoy diciendo Que esto sea sí. De acuerdo. Y la siguiente opción, eliminar la adopción. Se ve bien. Y ahora lo que voy a hacer es colocar dos emojis. Sí. Entonces para eso, ve a Google y escribe emojis. Abrigos decimales. Sí. El primer sitio web. De acuerdo. Entonces si alguien dice que sí, seré feliz. Y si alguien dice que no, estaré triste. Entonces esta es la cara feliz. Sólo voy a copiar el código decimal. Entonces necesitamos escribir otro div, darle un ID. Tan feliz. Y luego escribe el código, ¿de acuerdo? Y de igual manera vamos a copiar una cara triste. Vamos a encontrarlo. Sí, esta es una cara triste. Entonces sólo voy a copiar. De acuerdo, Así que estaba copiando el hexadecimal, lo siento, no el hexadecimal. Para copiar el decimal. De acuerdo. ¿ Recuerdas a este científico removido por este rostro Majlis? Y volvamos otra vez. Todo bien. Es una cara triste. Sí. Así que recuerda copiarlos código decimal. No. Otra vez, id, triste. Y luego pegar, y luego Endo div tag. Por lo que tenemos una cara feliz y fijamos cuotas. ¿Verdad? Entonces, en consecuencia, también alteraremos el Java como el código jQuery. Primero guarda esto. Voy a guardarlo como mejilla por tres en la cubierta pegada. Así que dale a la extensión punto HTML. Sí. Ahora vamos a ver ejecutándolo, cómo se ve. Sí. Entonces tenemos esto sí y no. Y tú eres como yo. Y ahora lo que vamos a hacer es dejar que este sea el mouse hover uno. Para sordos. Ahora, vamos a establecer una variable llamada click. Entonces no fuimos los únicos. Entonces para eso, pondré esta bandera. Así que la variable haga clic en llamada a falso y simplemente escriba aquí. Por lo que cuando se hace clic en la opción uno, por lo que vamos a comprobar F triple igual a uno. Entonces si esta condición es válida, entonces no ejecutaremos ningún código aquí. Entonces aquí en este código, lo que haremos es convertir el fondo al hallazgo verde. Y entonces qué tenemos que hacer? Otra cosa que es, necesitamos animar ese emoji en particular. Entonces lo voy a hacer mucho más grande cuando se seleccione. Entonces para eso, seleccionas el ID. Por lo que ID estará contento. Y luego dot animate. ¿ De acuerdo? Entonces animar es en sí mismo una función, por lo que no es necesario escribir función aquí. Entonces solo escribe el evento. Entonces lo que tenemos que hacer es cambiar el tamaño de la fuente. Supongamos cinco EM, ¿de acuerdo? Por lo que esta será nuestra fuente, tamaño de fuente. Para el emoji. En caso de que se seleccione la opción uno. No necesitamos esto, así que simplemente quitaré esto. Ahora lo que hay que hacer es simplemente copiar este código y pegarlo y manipularlo para la opción 21 cosa más cuando el clic es falso, por lo que necesitamos cambiar la bandera. Por lo que ahora asignado click con true, para que solo podamos elegir una opción. Ahora bien, si el click es falso, otra vez aquí, lo mismo. ¿De acuerdo? Y entonces lo que hay que hacer es, ya que es una no opción, así que haré que el fondo sea rojo. De acuerdo. Ahora aquí, será cara triste ID triste como recuerdas, si te acuerdas para esta fase de acto. Y será siem, y de nuevo aquí, el color de fondo se enfrentará en ambos. Entonces vamos a guardar esto y ejecutarlo. De acuerdo. Así lo refrescó. Ahora. Demos clic en sí. Sí. Mostrando una cara feliz. Ahora, si hago clic en No, no está funcionando. De acuerdo, porque ya había puesto la bandera. Ahora vamos a refrescarnos de nuevo. Y ahora daremos clic en No. Entonces sí, tenemos esta fase establecida. Por lo que de esta manera se puede realizar una emisión usando jQuery. Se pueden realizar muchas cosas usando la animación. Entonces vamos a ver lo que aprendemos en este viaje. Gracias por ver y estar atentos al curso. 62. Bono : Introducción a Bootstrap: Bienvenidos de nuevo al curso. Entonces comencemos con Bootstrap. Bootstrap es básicamente un marco frontal. Contiene plantilla HTML y CSS, y también ayuda a hacer que el sitio web sea responsivo. Entonces comencemos rápidamente nuestro primer ejercicio. Entonces, antes que nada, necesitas buscar Bootstrap CDN. Así Bootstrap CDN. De acuerdo. Así que da click en esto y tendrás ciertos tipos de sanación CDN. Entonces en lugar de ir aquí, te recomendaría ir a empezar con Bootstrap. Y entonces puedes conseguir el baile de relevancia desde aquí. Entonces, lo que hay que hacer es simplemente copiarlos. ¿ De acuerdo? Ahora, abre tu editor de texto. Por lo que estoy abriendo Sublime Text. Ahora. Comienza con la estructura básica de una página HTML. Y luego HTML. La etiqueta HTML. Comience con la cabeza. Tenemos que poner este CDN en la cabeza. Entonces primero escribiremos el título Bootstrap, y luego la etiqueta de título. Entonces lo que vamos a hacer es copiar el CDM, ¿de acuerdo? Entonces este es un CDF que hemos copiado en la sección de cabeza. Y ahora necesitamos arrancar el cuerpo. Así que apilar el cuerpo y la etiqueta del cuerpo. Ahora lo que tenemos que hacer es iniciar una etiqueta div. ¿De acuerdo? Ahora, dentro de este div, vamos a escribir iguales de clase y luego jumbo. ¿ De acuerdo? Y eso es solo escribiendo clase, puedes estilizar esta profundidad en particular y solo escribir, creo que tech center, no necesitas escribir texto alineado dentro del estilo. Entonces esta es la belleza de Bootstrap. Por lo que a continuación, puedes escribir el encabezado que quieras dar. Así que voy a escribir get started, bootstrap y luego terminar la etiqueta H1. No, ¿verdad? Bootstrap es un framework. Y cierre la etiqueta p y luego la etiqueta div. De acuerdo, entonces tenemos el código escrito. Correos electrónicos, Vamos a guardar esto. Guárdalo en mis cosas de la cubierta, y dale un nombre. Voy a nombrar como Bootstrap. HTML de un punto. ¿De acuerdo? Y guarda esto. Vamos a ejecutarlo y ver la salida. Tenemos la salida. Entonces en cuanto al jumbotrón, ves o lo que nos hace, hace el fondo en el lado gris claro. Y también obtienes este encabezado, que está bellamente ven enlace en general, si usas cada uno, no vendrá tan bellamente. Así que empieza con Bootstrap y luego tienes una descripción simple sobre como bootstrap es un framework front-end. Por lo que de esta manera puedes usar jumbotron. Entonces como ya lo han visto, solo mencionar la clase, nuevamente, solo mencionar el jumbotrón de clase y el tech center, obtuvimos esta cosa en particular. Entonces un muy bien diseñado con el fin de mostrarte el CSS y todo, debes tener curiosidad, como cómo está sucediendo para eso o haz clic derecho e ir a Inspeccionar. De acuerdo, y luego haga clic en este icono y seleccione. Supongamos que quiero ver aunque el CSS detrás de esta cosa en particular. Así que da clic aquí. Ahora, se puede ver, si se puede ver aquí jumbotron y luego punto H1. Y tiene una herencia de color. Y luego hay unos tamaños de fuente particulares. Así lo hiciste con ella. No asignamos ninguno de esos valores para font y todo, pero aún así estamos recibiendo esto. Entonces esto en realidad lo hace Bootstrap, como ya habíamos incluido, es CDN. Así que realmente consigue esto de bootstrap, y ya está diseñado. Vale, si lo deseas, puedes hacer algunos cambios y ver como si solo hago las estadísticas px como 20. Por lo que al instante se puede ver el cambio. Pero como sólo nos está mostrando aquí, si refrescamos la página, volverá a volver a su forma original. De acuerdo, así que esta fue una introducción muy breve sobre Bootstrap. En el próximo ejercicio, aprenderemos más. Por lo que gracias por ver y estar atentos al curso. 63. Bono : Rejilla de bootstrap: Hola chicos, bienvenidos de nuevo al curso. Por lo que ahora ya sabemos implementar un jumbotrón. De acuerdo, así que sigamos adelante con el siguiente ejercicio. Lo que recomendaría es que simplemente copiará este código desde aquí, creará un nuevo archivo, y lo pegará para escribirlo una y otra vez. Entonces tenemos todo el CDN y todo configurado. Ahora. Aprenderemos sobre algo llamado contenedor. Entonces la muerte, hay una clase llamada contenedor. Déjame mostrarte lo que hace. Déjame quedarme con este contenedor interior de jumbotrón. Déjenme seguir adelante con la sangría. La codificación de sangría es muy importante. Ahora se ve bien. Entonces vamos a guardar esto. Lo guardaré como correa de arranque dot HTML. Y vamos a correr esto y ver. Por lo que como se puede ver en Bootstrap uno, tuvimos este Jumbotron, que tenía toda la longitud de la pantalla. Pero cada vez que estoy usando contenedor, está consiguiendo compresor eléctrico. Esto se debe a que el contenedor deja cierto margen a la izquierda y a la derecha. De acuerdo. Así que de manera similar, al inspeccionar y ver cómo lo hace, básicamente en Bootstrap contenedor se utiliza para hacer que el sitio web suficiente Salt Lake para obtener el sitio web como ordenado, hombre, y dejar innecesariamente márgenes y todo para que se vea bien. De acuerdo, Así que justo como funciona. Y en este video en particular, básicamente voy a hablar del sistema de grid en Bootstrap, que en realidad ayuda a que el sitio web sea muy receptivo. Entonces sólo te voy a mostrar cómo lo hace. De acuerdo, pues déjame mostrarte esta estructura básica de rejilla. Este es un sistema de rejilla Bootstrap. Lo que hace es que divide toda la pantalla en pequeños vanos, ¿de acuerdo? También se puede pensar en ello como dos pequeñas columnas. Por lo que a lo sumo puede tener dos columnas. Ahora, en el primero, se puede ver palmo uno, lago, los tamaños uno. Es span-wise. El tamaño de cada columna es uno. Y puedes contar ahí 12 columnas aquí. La siguiente línea que puedes ver el palmo es para, ¿de acuerdo? Entonces si sumamos cuatro más cuatro más cuatro, nuevamente obtenemos 12. ¿ De acuerdo? Por lo que de esta manera podemos configurar el sistema de red y podemos organizar nuestro contenido en consecuencia. Entonces aquí puedes ver bien las palmadas, así que esto básicamente toma toda la pantalla. Déjame mostrarte cómo funciona para que te sea más fácil. Volvamos al código. Una cosa más antes de proceder. Entonces aparte de esta columna, tenemos algo más, que son las clases grid. ¿ De acuerdo? Entonces lo que hace es que tiene ciertas clases como exceso S, M, y D y energía. El acceso es por lagos. Pantallas muy pequeñas como teléfonos. Sm es qué? Tabletas, que son un poco. Y MDs para laptops pequeñas. Y LG es qué? Grandes laptops y computadoras de escritorio, cómo se implementan estas. Te mostraré en el código. Entonces comencemos. De acuerdo, entonces ahora lo que vamos a hacer es que vamos a hacer diferentes columnas. Ahora. Este contenedor estará ahí, por lo que usaremos un contenedor diferente. Ahora. Empezaremos con un nuevo contenedor. Clase Div. Etiqueta div contenedor. ¿ De acuerdo? Ahora bien, dentro de este contenedor, lo que tendremos es Clase llamada a hacer, está bien. Así div clase. Entonces de esta manera, en realidad vamos a dividir la pantalla en filas y columnas. Así que solo aguanta y ve cuál es la salida. Entonces primero escribamos rápidamente el código. De acuerdo, ahora tenemos la fila de clase div, así que tenemos la primera fila. Y en esta primera fila, digamos que vamos a tener para como tres columnas tal vez, sí, tres columnas suena, pero ahora escribe def king y deshazte de clase. Y la clase será columna aquí. Ahora, hay que mencionar el tamaño de la columna. Como ya te dije. Déjame volver a mostrar la imagen. Como ya les dije, que hay que dar el palmo de estas columnas en particular. ¿ De acuerdo? Entonces digamos que quiero tres columnas. Entonces si quiero crear tres columnas, eso significa que puedes ver en la segunda línea tenemos tres columnas. Suspensión antes para h. Así que vamos a dar el palmo es de cuatro, así columna. Y entonces esta es una pantalla grande ya que estoy haciendo en mi parada de cubierta. Así LD. Y entonces para no remontada aquí, podemos dar una etiqueta de encabezamiento h1 y h3, y a la derecha, esta es la primera columna. ¿ De acuerdo? Y la etiqueta p, tenemos nuestra primera columna. Ahora en la misma fila, vamos a tener la segunda columna. Entonces solo copia este código en particular. La columna volverá a tener el Span hacia adelante. Eso es absolutamente cierto. Y esta será nuestra columna dos. Y esta es nuestra segunda columna. Bien. Ahora otra vez, tendremos otra columna. Ya que el tamaño significaría 12444 hará. No, esta es la columna tres. Y esta es la tercera columna. Ahora, vamos a correr rápidamente esto y ver. Sí, así que aquí tenemos tres columnas. Estos son de una sola fila, y tenemos tres columnas. Ahora, lo que vamos a hacer es que tendremos otra fila. Y supongamos que ahí tendremos dos columnas, una de span. Y qué, me he gastado diez. Hagámoslo. Entonces vuelve. Por lo que esta ley, NCL. Por lo que tendrá otra fila, clase div. Será todo y etiqueta div. Y ahora tendremos dos columnas. Uno, me gastaré 21, lapso diez. De acuerdo, entonces def última columna, luego LG, entonces, ok, en esta etiqueta div. Entonces digamos que escribimos escribimos tres estreptococos y luego NH3. Y de nuevo la siguiente columna. Así div, clase y columna y vacío. Y entonces eso es genial. Y escribamos algo aquí. Bienvenido a trap. Se ve bien. De acuerdo, ahora guardemos esto y lo ejecutemos. Por lo que espero sean capaces de entender esto. Déjame hacer una cosa, déjame usar color de fondo. Será de mucha ayuda para que lo entiendas. Y entonces lo que voy a hacer, Tomemos color de fondo. Supongamos un rojo. Déjame usar algo poco en el lado más ligero. Se ve bien. Y de igual manera, tendremos otro color de fondo. Apoya Hola. Esto es sólo para mostrarte el lapso. De acuerdo, refresquemos. Ahora puedes ver que esto tiene este lapso de dos y esto tiene este pan off. Diez. ¿ De acuerdo? Entonces así es como funciona el sistema de red. Ahora, como les dije, este sistema de grid en realidad hace que el sitio web sea varios de como dejame mostrarte de nuevo, ve a Inspeccionar. Ahora lo que haremos es, como pueden ver, ya está acortado. Ahora, da clic en este dispositivo a Lima. Sí. Entonces cuando tenemos la resolución de pantalla y las dejamos más pequeñas, se puede ver que las columnas ya se están colocando así. No sucederá si no usas Bootstrap. Entonces déjame ver, déjame ver para iPhone X. Así es como se nota. Déjame ver para iPad. Así es como se nota. Si haces clic en responsive y lo haces muy pequeño, incluso entonces no se está rompiendo. Así que incluso para el jumbotrón que ves, empieza con Bootstrap. Y si lo hago más pequeño, se está poniendo al siguiente nombre, ¿de acuerdo? En casos normales, no sucederá. De acuerdo, Así que esta es la belleza del bootstrap. Hace el lado del labio cuando nace. Entonces esto fue todo sobre Bootstrap grid. Gracias chicos por ver este video. Practica cuándo y pega la estaca en el curso. 64. Bono: Cómo crear una barra con Bootstrap: Bienvenidos de nuevo al curso. Espero que lo estés haciendo bien. Entonces en este video, voy a mostrar cómo puedes crear una barra de navegación. Entonces para eso, abre tu editor de texto y sólo copiar el código que ya habías escrito en tu ejercicio anterior y pegarlo. Por lo que requeriríamos el CDN de Bootstrap, pero no vamos a requerir esta cotización. Entonces lo que sea que esté dentro de la etiqueta del cuerpo, simplemente quítelos. De acuerdo. Ahora necesitamos crear una habilidad especial para eso. En primer lugar, necesitamos abrir la etiqueta de navegación. ¿De acuerdo? Ahora después de eso, tenemos que dar una clase. La clase se reunirá navbar, navbar inverso. De acuerdo, entonces como ya sabes que en Bootstrap, estamos usando clases con el fin asignar ciertos estilos a nuestros elementos. Entonces, ¿cuál es la significación de estas clases veremos cuando veamos la salida. Entonces, después de esto, necesitamos cerrar la etiqueta de navegación. Y luego dentro de esto comenzó div tag class y luego contenedor fluido. De acuerdo, entonces ¿qué hace el fluido contenedor hace esto en el último ejercicio que habíamos aprendido sobre contenedor lo que hace, simplemente deja un espacio desde el lado izquierdo y derecho de la pantalla y crear algún margen. Pero si usamos contenedor-fluido, no sucederá. Utilizará el ancho total de la pantalla. ¿De acuerdo? Así que esta etiqueta div, y ahora dentro de esto, vamos a escribir el nombre de nuestro sordo de sincronización de labios. Y vamos a darle una clase. Por lo que en esta clase en particular tendremos nuestro nombre de la página web. Así navbar guión manejar. De acuerdo. Ahora dentro de esto, hay que escribir entonces. Y buena clase de deck. Por lo que la clase será marca navbar. ¿ De acuerdo? No se da hf. Y ahora escribe el nombre de tu sitio web. Sólo voy a escribir nombre comercial arancelario y luego etiqueta de anclaje. Ahora lo siguiente que vamos a hacer es que vamos a escribir menú horizonte. Al igual que la página principal, la playa que generalmente vemos en nuestro sitio web. Entonces vamos a hacer lo mismo. Y luego clase, y luego dar el nav de clase y la barra de navegación. Y luego pronto te familiarizarás con estas clases. Así que agárrate. Si crees que esta clase es que demasiado para que la recuerdes. Ahora, inicia LI, etiqueta y luego clase, y luego activa. Entonces, lo que hace la clase activa es que te muestra en qué página estás resaltada actualmente página particular. Y por defecto, estamos en la página principal por primera vez. Entonces es por eso que estoy escribiendo activo para la página principal. Así que de nuevo, comenzaremos nuestra etiqueta de anclaje, hf hash, y luego escribiremos la etiqueta ancla, una etiqueta final. A continuación tendremos otra página, Digamos About page. Por lo que de nuevo, LA y luego clase. Y entonces, ¿qué es lo que hay que hacer también? Todo esto realmente no necesita ninguna clase porque activo ya estamos mencionados. Entonces no hay necesidad de clase mi cama. Entonces ancla hf es igual y hash. Y luego escribir sobre. Y luego podria tanque y despues tecnologia y estamos bien para ir con ellos. Horizon demasiadas. Ahora añadiremos otro menú en el lado derecho del cuello, pero estos son menú horizontal. Ahora. ¿ Verdad? Siguiente parada, derecha, menú, que tendrá el registro y otras materias. Entonces de nuevo, vamos a abrir y después a clase. Entonces perdemos diferente clase ahora aquí, así que nav, navbar, nav, y esta navbar importante, entonces genial. Por lo que esto va a colocar. El menú de la derecha de la pantalla. Ahora cierra la etiqueta. Y de nuevo, necesitamos abrir el LA y luego anclar etiqueta que HF hash. Y luego estaremos usando para el mismo lapso y dentro de ese icono de glifo de clase. Y luego da clic puedo, ok, simplemente en el lapso. Y luego escribir registro, etiqueta de anclaje. Y también como, Ok, ahora solo voy a copiar esta cosa en particular y pegarla. Ahora voy a crear un botón de inicio de sesión. Entonces reemplace esto con Logan. Y también voy a cambiar. Puedo bloquear guión y creo que estamos bien para irnos. Voy a guardar esta barra de navegación punto HTML. Y vamos a correr y ver. Tenemos nuestra primera barra de navegación. De acuerdo, Así que este es el nombre de nuestro sitio web, esta casa y puedes encontrar el fondo un poco más oscuro ya que es la página activa. Entonces tenemos el siguiente elemento del menú. Tenemos la opción de registro en bicicleta y la opción de registro, la opción de inicio de sesión. Esta es una barra de navegación muy básica, pero creo que estamos bien para ir. que puedas buscar diferentes tipos de barras de navegación en Internet. Al igual que si puedes ir a la página oficial de Bootstrap y puedes conseguir diferentes tipos de siesta, qué quieren usar, diferentes tipos de barra ahora para tu sitio web. Entonces lo que recomendaría es ir a Bootstrap y luego nuevamente Bootstrap. Y luego ir a solo presionar slushy CSS y JavaScript. Y puedes ver que tienes cierto tipo de cosas como salir, alerta, morado, desplegable, etcétera. Puedes, si haces clic en Componentes, puedes obtener todo este tipo de iconos de glifo que he estado usando. Por lo que puede obtener el nombre de cada icono de glifo y puede usarlos según su elección en su sitio web. Entonces solo usamos este glifo que puedo dar puedo usar para nuestro registro. Por lo que podrías haber utilizado cualquiera del ícono como para tu comodidad. De acuerdo, entonces en el lado derecho creo que podemos encontrar la barra de navegación. Levántalo. Sí. Sida clic en eso. Entonces sí, esta es una red realmente básica. Pudiste haber cogido. Este es el código total de esa barra de navegación. Para que puedas, qué puedes hacerlo para que solo puedas copiar. Vuelve a tu editor. Archivo. Nuevo, Buscar, pegarlo. De acuerdo. Es mejor si lo pegas dentro del código en particular. Entonces lo que recomendaría este café, esta cosa total, File, New File, y luego pegarlo aquí. Ahora de la sección del cuerpo eliminarás todo el código que has escrito. ¿De acuerdo? Entonces hasta aquí, y ahora copia esto y pega. Nada que hacer. Control-S, navbar, luego para apuntar HTML y guardarlo. A ver cuál es nuestro resultado. A ver cuál es nuestro resultado. Entonces tenemos la herramienta snap. Y sí, puedes conseguir un bar de navegación. Con toda maravilla lo que está escrito. Tienes la marca y los enlaces y todo. Por lo que espero hayan disfrutado de este video. Estén atentos al curso. 65. Gracias y pasos siguientes: Hola chicos, felicidades por hacerlo hasta el final. Espero que este curso te haya ayudado a aprender las habilidades de una mejor manera. Por favor no olvides dejar comentarios para este curso. Para más actualizaciones, puedes unirte a mi comunidad de contestarlos donde comparto mucho contenido, materiales de aprendizaje y mucho más. Gracias por su tiempo y les deseo todo lo mejor de la vida. Seguir aprendiendo.