Transcripciones
1. Introducción: Hola y bienvenidos a una nueva clase. Esto es HTML y CSS. Y básicamente HTML significa lenguaje de marcado de hipertexto. Y este es un lenguaje muy fácil para describir la estructura de una página web. Y si quiero aprender programación o codificación, empezaré con HTML, ya que es el lenguaje más sencillo y directo. Ahora me han tenido Eunice, y seré tu instructor para este curso. Entonces, empecemos con el esquema. Entonces, ¿qué vamos a cubrir? Por lo que los temas para esta clase son algunos conceptos básicos sobre la celda y algunas etiquetas predefinidas y así sucesivamente. También tenemos atributos. Y luego vamos a hablar de estilismo y formateo. Después pasaremos a imágenes de longitud menos y tablas. Y luego finalmente, vamos a aprender a dejar nuestro archivo CSS a nuestro HTML. Y luego finalmente, vamos a terminar nuestra clase con hablar de tipos de entrada. Entonces esto es todo. Y espero que hayas disfrutado de esta clase. Nos vemos el siguiente video.
2. Headings: Y ahora este es nuestro código de Visual Studio. Vamos a seguir adelante y dar click en archivo. Podemos ver aquí tenemos las extensiones y empezamos a agregar algunas extensiones. Por ejemplo, podemos HTML. Ya instalé algunos de ellos, sin embargo, este es el soporte HTML CSS podría ser útil. También tenemos éste. Y finalmente, descargaré y, y navegador solo para ver nuestro código HTML y nuestro navegador e instalaré. Ahora cerremos esta extensión y empecemos con nuestro código aquí. Entonces, por ejemplo, permítanme simplemente crear un nuevo archivo. Y este nombre de lista de archivos al principio, el HTML. Y estamos bien ahora, abro esto, ver primero HTML aquí. ¿ Y cómo puedo escribir mi primer código HTML? Simplemente puedo escribir STM n e ir al restaurante HTML cinco, y este es nuestro primer código HTML. Ahora supongamos que quiero ver este código. Simplemente puedo hacer clic derecho aquí y anexar en el navegador predeterminado. Y entonces esta es nuestra primera página. Es una página vacía ya que no agregamos nada hasta ahora. Déjame seguir adelante y solo explicar un poco sobre la estructura de este código HTML. Entonces lo primero que vamos a notar es este DOCTYPE, HTML, y esto indica el tipo de documento. Y debido a que estamos escribiendo en HTML, vamos a ponerlo en HTML. Ahora lo segundo es HTML. Abrimos la etiqueta de apertura. Entonces este es nuestro código HTML dentro de la etiqueta de apertura y final. Y entonces tenemos nuestro lenguaje. Simplemente podemos añadir este idioma, y en este caso estamos usando el inglés. Por lo que EN indica inglés. Ahora, cada vez que anexamos a nuestra etiqueta, simplemente
podemos escribir HTML. Y esta es nuestra etiqueta de apertura. Ahora si quieres escribir nuestra etiqueta de final es la misma que nuestra apertura, pero vamos a añadir esta barra inclinada hacia adelante. Y como podemos ver, la estructura de nuestro código HTML es bastante sencilla y sencilla. Por lo que dentro de nuestro HTML tenemos dos tareas principales. Entonces el primero es la cabeza. Y dentro de nuestra cabeza ser tener nuestro título, entonces tenemos nuestro cuerpo. Y aquí vamos a escribir nuestro código. Y por ejemplo, puedo escribir un lope. Y si solo abro esto en el navegador por defecto, puedo ver hacia abajo impreso aquí. Ahora, déjame volver aquí. Y así este es básicamente nuestro cuerpo. Y aquí vamos a escribir todo lo que queramos. Y supongamos que escribo este hola y un texto habitual o un tamaño pequeño. Por ejemplo, cuando lo escribo en, por ejemplo, como un título, simplemente
puedo usar el encabezado. Y esto será a la una. Y si presiono Enter, me pongo a una. Y en este caso, si escribo hola, ejecuta esto. Voy a conseguir este gran hola. Ahora, en realidad tenemos tantos encabezamientos. Por ejemplo, X2 será más pequeño. Y por supuesto, h3 será más pequeño también. Y déjame solo comprobarlo aquí. Entonces arriba y en diferente navegador y conseguimos este, este es H2, y este es el borde tres. Y en realidad sólo tenemos seis rubros. Entonces si escribo x, lo hago bien. Hola y terco y presiona Enter, no pasará nada. No tenemos un borde reservado siete mundo. Entonces si yo solo, y así vamos a conseguir este pequeño Hola. Y esto es, básicamente sigue los encabezamientos como podemos ver a medida que vamos más altos y números, el tamaño de nuestro título o nuestro rubro sería cada vez más pequeño. Y esto es básicamente, así que este es nuestro primer código HTML, es muy sencillo. No obstante, se complicará mucho más. Y nuestros próximos videos. Así que solo mantente enfocado y nos vemos.
3. Conceptos básicos de HTML: Ahora, después de escribir nuestros encabezamientos, podemos empezar con un espacio de banda. Entonces supongamos que quiero escribir aquí, simplemente
puedo escribir b Entonces este es un párrafo y voy a escribir, mi nombre es Eunice. Y si sigo adelante y abro esto, vamos a conseguir Hola. Mi nombre es tenia unidades. Ahora permítanme simplemente escribir otro párrafo y simplemente puedo escribir aquí, este es otro párrafo sobre él. Como podemos ver, vamos a conseguir dos párrafos diferentes. No obstante, si simplemente escribo aquí y anexo, los
vamos a conseguir, todos en la misma línea. Entonces si quiero iniciar un nuevo párrafo, simplemente
cerraré el primero y arriba. Y como se puede ver aquí, así es porque en tiempo de la primera, y esta es la etiqueta de apertura de la segunda. Ahora, déjame sólo borrar estos y acaba de terminar esto. Y ahora pasemos a otra cosa. Y este es el enlace. Entonces, ¿cómo podemos agregar un enlace a nuestro código HTML? Entonces lo primero que vamos a escribir es a y luego presionar enter. Nosotros vamos a conseguir esto. Y si no lo consigues, simplemente
puedes escribirlo. Entonces una referencia h, y esta es la abreviatura de referencia e igual a. Y como pueden ver, tenemos estos aquí y debemos escribir nuestro enlace en estas condiciones. Entonces déjame ir a Google y agarrar este enlace, por ejemplo, y bases aquí. Y si simplemente, simplemente
puedo escribir aquí, este es un enlace de Google. Y ábrela. Nosotros vamos a conseguir Hola. Mi nombre es jefatura de unidades y esta es una pierna de Google. Entonces si presiono en este enlace y se abrirá automáticamente este enlace o Google Fotos, como puedes ver aquí. Y así es como podemos crear, como se puede ver, simplemente volver atrás, y así es como podemos crear nuestro enlace en HTML. Ahora pasemos a otro concepto básico y que es agregar una imagen. Entonces como pueden ver, si quiero crear una imagen, puedo subdividir IMG y girar. Y esta es nuestra etiqueta de apertura dentro de la etiqueta de objeto. Al igual que antes, necesitamos agregar nuestra fuente dos, esta es la fuente de nuestra imagen. Y supongamos que quiero volver aquí y Google Fotos. Entonces esta es una imagen. Simplemente puedo copiar este enlace. Y Long, pero lo resolveremos. Entonces este es nuestro enlace. Si ahora abro esto, podemos ver que vamos a conseguir esta imagen. Y aprendemos a ajustar el tamaño de la misma o la longitud y el ancho de esta imagen más adelante. Pero por ahora, así es como podemos simplemente agregar esta imagen y nuestro código HTML. Ahora, volvamos aquí. Entonces supongamos que quiero crear un botón. Y en este caso, simplemente
puedo escribir botón y, y así este es nuestro botón y simplemente puedo escribir, por ejemplo, click me arriba en esto. Y podemos ver aquí tenemos un botón que dice Click Me. Ahora, no le hace nada a Ahora ya que no agregamos nada, si presiono este botón, no pasará nada. Simplemente verá que cambia un poco pero vuelve a la normalidad y no aparecerá nada en la pantalla. Y como no agregamos ningún código a este botón, volvamos a nuestro código HTML y empecemos a hablar de menos. Por lo que un HTML tenemos dos tipos de lista. Tenemos la lista desordenada y una lista ordenada. Entonces, empecemos por crear una lista desordenada. Entonces déjame seguir adelante y eliminar esto y empezar con un encabezamiento número dos. Y esta es una lista desordenada. ¿ Y cómo podemos crear una lista desordenada? Simplemente podemos usar las iniciales tú y, y esta es nuestra lista. Ahora bien, ¿cómo podemos crear elementos y decidir recortar sentido? Siempre que creamos, siempre que nosotros, cada vez que escribimos u l, este es nuestro vacío menos de lo que ahora no agregamos ningún elemento. Por lo que siempre que queramos agregar un elemento, simplemente
podemos escribir elemento de lista. Y se abre un poco. Y dentro de estas dos veces podemos crear nuestro artículo. Entonces supongamos que fui por teléfono correcto. Y la segunda será laptop. Y este tercero será un reloj. Y ahora si solo abro esto, podemos ver que esta es una lista desordenada. Y tenemos tres artículos, teléfono, laptop, y reloj. Ahora déjame volver aquí y vamos a crear otra lista. Esto es, esta será una lista ordenada. Y en este caso, déjame simplemente escribir aquí etch, hacer también. Y dentro de este borde a L, va a escribir esto como una lista ordenada. ¿ Y cómo podemos crearlo? Entonces, oh, Y como de costumbre, y simplemente podemos añadir nuestros elementos aquí. Entonces el primer elemento lista como de costumbre, y déjame escribir los mismos ítems que antes. Por lo que
hemos encontrado, tenemos laptop y tenemos Watch. Ahora, déjame abrir esto una vez más. Y esta es una lista ordenada. Tenemos tres, en realidad tres ítems y están numerados de uno a tres. Ahora, otra cosa aquí, si, por ejemplo, tuviera aliado y me dejara sólo una botella. Y este caso, realmente no necesitamos solo abrir esto cada vez. Simplemente podemos volver aquí y simplemente refrescar y lo puedes ver aquí. Pero creo que es más fácil. Acabo de abrir. Pero cada vez que abras todas estas, esto será tan desordenado aquí. Por lo que acaba de actualizarse actualizando la página desde arriba. Entonces esto es básicamente para la lista desordenada y ordenada y HTML. Es así como podemos crearlos y crear elementos dentro de cada uno de ellos. Entonces este es el final de este video, y el siguiente video discutiremos los atributos HTML y nos vemos entonces.
4. Atributos: Ahora pasemos a los atributos, y hemos visto algunos atributos en HTML. Entonces por ejemplo, cuando escribimos A y presionamos enter, conseguimos este HREF. Se trata de un hipervínculo hiper referencia. Y siempre que escribamos, por ejemplo, probemos HTTP y, y google.com. Y si abro esto como antes, eso es sólo escribir algo dentro de esto. Diga por ejemplo, haga clic aquí. Y déjame volver a Google y ejecutar esto. Vamos a traer a Glick aquí. Y si hago clic aquí
, me llevará automáticamente a Google. Puedo buscar lo que quiera aquí. Ahora déjame simplemente borrar esto y esta es nuestra página. Y déjame simplemente volver atrás. Entonces este es un atributo. Ahora, otro atributo podría ser el atributo title. Entonces, por ejemplo, si estamos escribiendo un encabezamiento, así que permítanme simplemente borrar esto. Y ahora tenemos algo de espacio. Entonces supongamos que quiero escribir hola mundo y hola mundo dentro del uno. Puedo agregar en la etiqueta de apertura aquí. Un título igual a. Este es un encabezado por ejemplo. Y fíjate que si solo abro esto, no pasará nada. Simplemente recibo hola mundo. No obstante, podemos usar este título más adelante siempre que queramos llamar, por ejemplo, a este encabezado o usarlo en otro lugar. Entonces este es otro atributo. Ahora por ejemplo, también tenemos los atributos de ancho y alto. Por lo que siempre que estamos agregando una imagen a nuestro código HTML, simplemente
podemos ajustar esta imagen. Por ejemplo, permítanme volver aquí y notar aquí tenemos esta imagen. Hola, vamos a copiar este enlace y déjame volver aquí. Imagen. Entonces la fuente será esta. Y por supuesto puedo agregar una alternativa, lo
haré más tarde. Pero por ahora déjame solo agregar el ancho y la altura para que simplemente pueda escribir. Déjame correr esto primero para ver cómo se ve esta imagen. Entonces se ve así. Es muy grande. Entonces si solo quiero ajustar esto, simplemente
puedo escribir eso. Yo quiero que la altura de esto sea igual a 600 y el ancho sea igual a 400 en este caso. Y déjame volver atrás, refrescar. Entonces esta es nuestra imagen ahora. Y puedes notar que se hace más pequeño. Por lo que podemos ajustar el ancho y la altura como, como queramos. Entonces, por ejemplo, permítanme que lo haga cuadrado por trescientos trescientos. Vuelve atrás. Vuelve a correr. Y esta es nuestra imagen ahora. Entonces esto es todo para la alternativa para, lo
siento, para los atributos altura y ancho. No obstante, cosa que vamos a tratar es, por ejemplo, supongamos que tengo éste y tenemos un título. Por ejemplo, si solo quiero escribir una palabra, simplemente
puedo agregar aquí, hola. Y esto tiene un título, funcionará correctamente. No pasará nada. Si sigo adelante y corro esto, no pasará nada. Entonces sólo tenemos hola mundo. No obstante, si tengo dos letras o dos palabras hacia título, por ejemplo, hola mundo, no
puedo agregar esto a un solo título sin citas. Entonces como puedes ver aquí, esto es una naranja y este es el cielo azul. Por lo que seguramente no es un solo título. Entonces para lidiar con eso, simplemente
puedo agregar mutaciones como lo hicimos antes. No obstante, si solo tengo una palabra, simplemente
puedo agregar sin agregar condiciones. Y lo último que voy a discutir en este video es el audaz. Y en este caso, supongamos que tengo un párrafo. Yo, yo soy el urano y quería ser un barco. Simplemente puedo agregar el estar aquí. Perdón. Déjame añadirlo como de costumbre. Y yo conseguiré esto. No obstante, terminé aquí mismo. Entonces y estando arriba en esto, tal y como podemos ver aquí, Chaim tenía unidades. Esto es en ambos. Ahora supongamos que sólo quiero que mi nombre esté en negrita. No quiero IM alto y tú quieres que sean normales. Puedo volver atrás y sólo abrir esto, estar en los anuncios y cerrarlo después de esto arriba y esta una vez más. Bebió. Como podemos ver, obtenemos unidades de cabeza y perno. lo que esto resulta útil, por ejemplo, si tenemos algunas palabras específicas que necesitamos resaltar, simplemente
podemos agregar el perno o ser etiquetas de apertura y cierre. Y esto hará el trabajo como podemos ver aquí. Y esto es todo por los atributos. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente.
5. Párrafo: Ahora centrémonos un poco en el párrafo. Pero antes que nada, supongamos que tenemos algunos encabezamientos y seguidos de algún párrafo y del cuerpo. Entonces, por ejemplo, supongamos que tengo el encabezamiento uno. Y dentro de este rubro tenemos este rubro uno. Después de eso, probémoslo. Las palabras están en la sección de párrafo y simplemente puedo escribir, este es el primer párrafo. Entonces después de eso, puedo escribir esto como agregar dos. Entonces otro párrafo, esto como segundo párrafo. Y por último sumando tres. Lo siento. Permítanme ajustar esto. Por lo que Rumbo tres. Se trata de tres. Y por último, este es el tercero. A estas alturas que hemos traído esto. Abrámoslo. Y como podemos ver aquí, tenemos esto como Epígrafe uno. Se trata del primer párrafo, rubro al segundo párrafo y rubro 3, tercer párrafo. Ahora déjame volver aquí. Y como se puede ver, no
hay separados. El que se acaban de seguir, se
están siguiendo unos a otros. No obstante, si solo quiero separarlos por una línea, simplemente
puedo usar el EHR, y esta es una línea horizontal. Entonces si uso HR entre el párrafo uno, el párrafo dos, el párrafo tres, ejecute esto. Yo lo refrescaré. Puedo ver que ahora están separados por esta línea horizontal. Y volvamos a nuestro código y trabajemos con algo un poco diferente. Y esta es la estructura de un párrafo. Ahora, supongamos que tengo un párrafo y dentro de este párrafo, tengo esta es la primera línea del párrafo. Y luego otro párrafo. Y dentro de esto tenemos esto como segunda línea del párrafo. Vamos a refrescarnos. Y tenemos dos líneas. Entonces este es el primero, segundo y todo funciona con normalidad. No obstante, supongamos que tengo dentro de esto. Déjame justo ahora, déjame sólo conseguir esto y pegarlo aquí como podemos ver. Por lo que tenemos dos líneas en nuestro código HTML. Esta es la primera línea y esta es la segunda línea. No obstante, si vuelvo a nuestro navegador y ejecuto esto, podemos ver que están en la misma línea. Por lo que esta es la primera línea del párrafo. Esta es la segunda línea. No obstante, están en la misma línea. Entonces note aquí que cada vez que tengamos un párrafo, todo lo que escribimos, aunque solo agreguemos algunas líneas, estarán en la misma línea en nuestro navegador. Por lo que podemos ver que están aquí en la misma línea exacta. Y en realidad el número de líneas en un párrafo depende del tamaño de la ventana del navegador. Entonces, por ejemplo, si redimensionamos nuestra ventana del navegador aquí, déjame un poco a la izquierda. Y podemos ver que ahora tenemos dos líneas. Y este es el máximo que vamos a conseguir. Entonces tenemos dos líneas. Si tan solo redimensionamos nuestra ventana. Ahora bien, si queremos que estén en líneas separadas, o bien
podemos trabajar con diferentes párrafos como escribimos antes. Entonces, por ejemplo, tenemos este párrafo y el otro párrafo. Y vamos a refrescarnos. Vamos a conseguir dos párrafos diferentes. No obstante, tenemos otro método que vamos a utilizar aquí, y este es el BR. Y déjame simplemente escribir, por ejemplo, si quiero que esto esté en una línea separada, simplemente
puedo escribir BER y luego cerrarlo aquí. Y como podemos ver, déjame correr. Y vamos a llegar como segunda línea del párrafo. Y esto está en una línea separada. Entonces aquí nos perdimos esto. Y permítanme simplemente borrar esto sólo para hacerlo más sencillo. Y el presente párrafo a partir de aquí se refrescan. Y lo puedes ver ahora que tenemos esta es la primera línea y esta es la segunda línea en clientes diferentes o separados. Ahora, lo último que vamos a hacer es trabajar con el Bri. Y esta pretender preserva tanto espacios como líneas. Entonces aquí por ejemplo, si agrego algunos espacios aquí y vuelvo, refresco, no pasará nada. Por lo que los espacios no se conservan siempre que usamos DBR. Eso sin embargo, si uso el pre, por ejemplo, supongamos que tengo aquí a Bree. Y dentro de lo supremo. Déjame sólo escribir algo. Por ejemplo, tengo esta línea aquí, así que esta es la primera línea, y luego esta es la segunda línea. No obstante, está en la tercera línea en realidad. Entonces tenemos una línea vacía aquí. Y déjame solo agregar algunos espacios. Y luego déjame escribir aquí. Esta es la última línea. Ahora, déjame volver a nuestro navegador. Refrescar. Y como podemos ver, así tenemos algunos espacios aquí, aquí, y aquí. Y como podemos ver, tenemos una línea vacía. Por lo que siempre que agreguemos una línea vacía aquí, estará en nuestro navegador. Por lo que este pre simplemente preserva todos nuestros espacios y líneas siempre que escribamos algo en él. Entonces esto es para el párrafo. Estas son alguna información general y siempre podemos profundizar más en ella. No obstante, esto es sólo la introducción de cómo podemos usar párrafo y cómo ajustar nuestro párrafo de la manera que queremos. Con eso dicho, este es el final de este video. Nos vemos en el siguiente.
6. Estilos: Ahora hablemos un poco de estilo. Y por cada componente, por cada etiqueta podemos escribir su propio estilo. Ahora cavaremos más profundo y para empezar, siempre que escribamos nuestro CSS. Por ahora, simplemente podemos escribir algunos estilos simples. Entonces supongan, permítanme simplemente borrar todo esto. Y supongamos que tengo un encabezamiento y un párrafo. Entonces supongamos que tengo H uno y éste, este es un rubro. Y luego le seguirán tres párrafos. Entonces el primer párrafo es azul, el segundo es rojo, y el último es negro, por ejemplo. Tan negro. Ahora si abro esto y como de costumbre, así que este es un encabezamiento y azul, rojo, negro, Sin embargo, todos
están en color normal y el color por defecto el cual es negro. Y supongamos que quiero que esta letra de esta palabra esté en azul y esta palabra, que se lee a B, en realidad en rojo y se muestre será normal. Entonces déjame volver aquí. Entonces lo primero que vamos a hacer es especificar que necesitamos un stylus. Por lo que dentro del párrafo, dentro de la etiqueta de apertura del párrafo, puedo escribir estilo. Y será igual abrir las cotizaciones. Y yo quiero el color. Entonces es así de sencillo. Por lo que el color será azul. Y como se puede ver aquí, se
trata de una caja o cuadrado que indica que el color es azul. Si queremos cambiar algo, simplemente
puedo presionar aquí y podemos cambiar. Entonces supongamos que
quiero, quería ser un poco más oscuro, para poder volver aquí o un poco más claro aquí y así sucesivamente. Por último, para cambiar el color, también
puedo cambiarlo desde aquí. Entonces aquí tenemos nuestros colores. Y como puedes ver, para cada capa tenemos un código específico. Y por ahora vamos a quedarnos con el azul. Entonces simplemente puedo escribir color será igual a azul y lo siento, él no es igual es la columna. Y para el rojo hará lo mismo. Por lo que el rojo será igual al rojo. Y nosotros bien. Ahora, si vuelvo atrás y actualizo esto por refrescante, obtendré azul y rojo, n colores diferentes. Y negro, que está en el color normal y negro. Ahora, supongamos que quiero cambiar el tamaño de esto. Simplemente puedo escribir, déjame escribir solo Beck. Y este azulejo que vamos a elegir es igual para abrir las mutaciones. Y tenemos aquí tamaño de fuente, como se puede ver aquí, entrar. tamaño tan definido será un. Supongamos que quería que fuera de 50 píxeles. Refrescar. Nos vamos a hacer grandes y 50 píxeles en lugar de lo normal. Y como puedes ver aquí, si quiero el negro También, simplemente
puedo también, ¿no? Por lo que necesitamos el estilo igual al tamaño de fuente, igual a 50 píxeles. Y refrescar. Vamos a conseguir negro y grande y 50 píxeles cada uno. Ahora supongamos que no quiero quebrar canon de este navegador para ser blanco. Supongamos que quería que fuera azul cielo o azul polvo. Simplemente puedo escribir dentro del cuerpo. Puedo agregar estilo. Y dentro de este tipo, podemos agregar el color de fondo. Como puedes ver, tenemos el fondo y el color. Lo siento, tenemos que agregarla aquí para que haya igual a, como pueden ver, hemos polvado azul, hemos piloteado fue, y necesitamos el azul polvo. Y déjame volver atrás, refrescar. Por lo que podemos ver que la corriente de fondo ahora es azul polvo en lugar de blanco, que es el predeterminado. También podemos cambiar la familia de fuentes, o por ejemplo, no queremos que sea normal. Y supongamos que quiero este azul, quiero cambiar esta familia de fuentes a carga, por ejemplo. Entonces dentro del estilo, déjame solo, déjame probarlo con el negro, por ejemplo. Por lo que dentro del enchufe puedo agregar estilo. Y dentro del estilo, quiero cambiar la familia de fuentes. Y tenemos una lista de todas las familias de las que podemos elegir. Entonces tenemos área para Daniel, Supongamos que necesitamos esto. Y si vuelvo aquí, corro, podemos ver que esta fuente es diferente a ésta. Y elijamos otro. Por ejemplo, para el encabezado y el estilo. Y así esta vez tenemos font-family. Y vamos a probar esto. Y Corea por ejemplo. Por lo que tenemos y nuevo y volver atrás, refrescar. Y este es un encabezamiento y está escrito en Corea. Fuente. Ahora incluso puede cambiar el tamaño de la fuente. En lugar de escribir 50 píxeles, puedo cambiarlo con porcentaje. Entonces por ejemplo, puedo sumar a un 100%, volver atrás. Podemos ver que esto es un poco más pequeño que antes. No obstante, si solo agrego, por ejemplo aquí, el
100% retrocede, podemos ver que esto se pondrá mucho más rápido. Entonces tenemos dos métodos también. Nuestro tamaño de fuente, ya sea especificando los píxeles o
especificando el porcentaje de aumento del tamaño de fuente. Ahora, observe que cada vez que escribimos algo, ahora en realidad código ML aquí. Será automáticamente del lado izquierdo. Entonces como podemos ver aquí. Entonces esta es la adición. Supongamos que queremos cambiar la posición de este es este rubro para descentrar por ejemplo. Una forma de hacerlo es ajustando esto desde una. Entonces déjame simplemente borrar esto. Y necesitamos, en lugar de escribirlo a la izquierda, puedo agregar en el estilo, el texto alineado. Por lo que el texto alineado POR necesitaba estar en el centro. Vuelve atrás, refresca. Vas a conseguir esto como rumbo y está en el centro de la línea. Ahora podemos hacer lo mismo exacto para cada encabezado son cada párrafo. No obstante, si queremos que todo nuestro código esté centrado, simplemente
podemos agregar estilo ND. Aquí. Podemos agregar texto alinear, lo
siento, en el estudio, en el estilo del cuerpo y centro. Vuelve atrás y vamos a conseguir que todos nuestros componentes o,
o los párrafos y encabezados de Oliver se centren en el centro de cada línea dentro de nuestro navegador. Entonces esto es todo para los estilos. Se trata de una idea pequeña o específica. Y lo vamos a discutir más en los próximos videos cuando vamos a hablar de CSS y cómo escribir nuestro código CSS. Pero por ahora, sólo tomamos esto como una introducción. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente.
7. Formateo de texto: Ahora pasemos al formato de texto. Y ya hemos hablado del B o de ambos. Y esto sólo hará discreto, sólo hacer nuestro párrafo o encabezamiento y perno. Entonces supongamos que tengo n mi cuerpo. Simplemente, déjame simplemente eliminar estos y el estilo y quería ser por defecto. Y supongamos que tengo el párrafo. Se trata de un Bolt, Bolt. Y en este caso, si quería que fuera audaz, simplemente
puedo añadir aquí la etiqueta b. Déjame simplemente copiar esto y añadirlo al final de nuestra etiqueta y abrir esto. Podemos ver que tenemos este perno y perno. Ahora volvamos atrás. Y también tenemos otra etiqueta de apertura y esto es fuerte. Y ambos son en realidad lo mismo. Tan fuerte. Y dentro ensartado esto tan fuerte, como fuerte lo hace o simplemente refrescarlo desde aquí. Vamos a conseguir este tablero y esto es fuerte. Y como puedes ver, son iguales. Y podemos usar a cualquiera de ellos y ellos hacen su trabajo. Ahora, supongamos que quiero escribir un párrafo y Alec, simplemente
puedo empezar con abrir la etiqueta I. Así que tenemos el párrafo I. Esto significa metálico y esto es una cursiva. Ahora volvamos, refresquemos y vamos a conseguir, esto es una cursiva y como pueden ver, está cambiando. Ahora también tenemos otra cosa que es similar a un dialecto, y es el EM y significa enfatizar. Y este texto, como m tamaño. Vuelve atrás, refresca. Y vamos a conseguir este impuesto es enfatizar. Por lo que se trata de una estructura muy similar a la delegada. Y como podemos ver, tenemos ambos y fuertes. Ambos son similares. Son metálicos y enfatizados, y también son similares. Ahora también tenemos pequeños. Por lo que esto indica que queremos que un párrafo sea pequeño. Y supongamos que quiero escribirlo usando pequeño. Por lo que simplemente escribo pequeño y abro la etiqueta. Dentro de esta etiqueta, podemos escribir esto como texto modelo. Regresa, refresca, y vamos a conseguir este pequeño texto. No obstante, si lo comparo con unas etiquetas normales, este es un texto normal. Vuelve atrás, refresca. Nos vamos a dar cuenta de que hay una diferencia entre estos dos textos. Entonces esto es lo normal y esto es lo más pequeño. Y por supuesto, si quiero resaltar algo, supongamos que quiero resaltar esta normal. Simplemente puedo usar la marca. Por lo que quiero resaltar Normal dentro de nuestro párrafo. Puedo agregar mark. Y luego dentro de esta marca puedo agregar normal que Refresh, vamos a conseguir normal resaltado por amarillo. Por lo que el color amarillo es por defecto. Y también tenemos el d y eso, y en este caso, supongamos que tengo mi color favorito. Por lo que en los científicos párrafo tengo mi favorito. El otro es azul. Y supongamos que cambié de opinión y quiero eliminar esto y probarlo en rojo. Y si vuelvo atrás y corro esto, podemos ver que tenemos mi color favorito es el azul, el rojo. Y supongamos que quiero eliminar esto, así que sólo agrego una línea de estado aquí, línea
horizontal sobre el azul. Simplemente puedo usar la palabra clave del. Y en este caso, entonces. Y dentro de este delta, podemos añadir el azul. Regresa, refresca, y nos vamos a poner azules. Y como podemos ver, esto, como se borra y lo cambiamos a rojo. Ahora pasemos a otra cosa. Y aquí es cuando queremos subrayar algo. Por lo que podemos usar los ins y esto representa texto insertado o agregado. Entonces por ejemplo, si quiero subrayar aquí el favorito, supongamos que quiero subrayar el color. Volvamos a nuestro código y socavar subyacente decolorido mediante el uso de los ins, ins. Y dentro de esto, podemos agregar nuestro color, volver atrás, refrescar. Y como puedes ver, tenemos el color subrayado al usar el Ion como etiqueta. Y también tenemos el tipo suscrito y sub es la abreviatura de la pila. Entonces cada vez que queramos usarlo, supongamos que quiero cambiar, o déjame simplemente crear otro párrafo. Y dentro de este párrafo tenemos este es texto suscrito. Puedo agregar aquí sub y dentro de este sub scripted. Y luego seguido de texto. No espalda. Y por supuesto que te estrellaste. Vamos a conseguir esto como etiquetas suscritos y esta palabra en realidad está suscrita. También tenemos el super scripted. Y en este caso, supongamos que tenemos algo que queremos que sea. Por ejemplo, diez al poder de tres. Por lo que párrafo poco científico en lugar de escribir diez al poder de tres de esta manera, retrocedamos, volvamos atrás y ejecutemos esto. Vamos a conseguir diez al poder de tres horas. Puedo usar sub e Intel tres aquí. Permítanme ajustar esto. Vuelve atrás. Y vamos a sacar diez al poder de esta manera. Y también podemos utilizar el subscrito, Por ejemplo, si estamos trabajando con el mismo, por ejemplo, masa para diferentes objetos. Y supongamos que los nombramos m1, m2, m3. Entonces en lugar de escribirlos de esta manera, dentro de este párrafo, tenemos, um, uno. En lugar de escribir esto, esta manera y conseguir M-uno como denso, podemos usar el sub y agregar uno aquí. Y fuera del sur tenemos nuestra masa m. Y sólo vamos a correr esto. Y como podemos ver, vamos a conseguir m1 display y se ve más bonito. Y lo podemos entender mejor al conducir algo que necesita ser ajustado. Por lo que esta es una idea general sobre el formato de texto. Tenemos muchos formatos y podemos usarlos cuando queramos. No obstante, estos son los más importantes. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente.
8. Citaciones y citas: Discutamos ahora algunas condiciones y citas. Entonces, en primer lugar, si sólo queremos escribir algún texto dentro de algunas citas, permítanme simplemente borrar esto. En primer lugar. Y supongamos que tenemos nuestro párrafo y dentro de este ensayo de párrafo que estableció Brian. Y queremos afirmar lo que Brian ha dicho dentro de las citas. Entonces simplemente podemos escribir, supongamos que queremos escribir, este es el número uno. Y para crear una cotización, simplemente
podemos usar la palabra clave cola. Y dentro de este cubo, podemos agregar lo que queramos. Entonces supongamos que queremos que esto es el número uno. Y volver atrás. Corre. Brand dijo que este es el número uno. Y como podemos ver, estas son cotizaciones agregadas. Ahora, supongamos que queremos codificar algo y podemos usar código de bloque dentro. En este caso, por ejemplo, puedo usar un código de bloque. Y dentro de este código de bloque podemos agregar. Por ejemplo. Se puede ver que esta no es la única manera. Y estamos usando este código de bloque. Si sigo adelante y refresco, podemos ver que hay un poco a la derecha. Tenemos algo de espacio aquí, y esto indica que estamos codificando algo. Entonces estas no son nuestras palabras. Este es el mundo de otra persona. Ahora supongamos que queremos sumar la citación. Podemos agregarlo aquí. Por lo que dentro del código de bloque, podemos agregar sitio, y dentro del sitio podemos agregar la URL al código. Entonces HTTP, algo, no lo sé. Y creo que EU que se utiliza para una URL. Entonces esto es todo para el código de bloque. Pasemos a otra cosa que es la dirección. Ahora siempre que queramos escribir una dirección, podemos usar la pila de direcciones. Por lo que dirección y dentro de esta dirección podemos escribir alguna información. Entonces lo primero que vamos a hacer es escribir nuestro nombre. Entonces cómo EU, y luego si solo queremos saltar alineados, podemos usar DBR para saltar. Y dentro de la segunda línea, vamos a escribir el, supongamos el correo electrónico. Por lo que Hadi Yunus en y piensa, oh, que apoyan Outlook.com. Y y después de eso queremos escribir, por ejemplo, nuestra dirección. Así que dirija aquí. Y por último, después de eso, tenemos que sumar nuestra ubicación. Entonces supongamos que Estados Unidos y lo estamos, ahora terminamos. Podemos retroceder de esto y como pueden ver, esta es nuestra dirección. Se trata de una cursiva. En primer lugar tenemos nuestro nombre, dirección de
correo electrónico, y ubicación. Y esto es todo para las agoras. Pasemos a otra cosa que es la abreviatura. Entonces, por ejemplo, si queremos hablar de la Organización Mundial de la Salud conocida como h2, podemos usarlo así. Por lo que dentro de este párrafo, podemos decir que la OMS fue fundada en 1948. Ahora si solo ejecuto esto, refresco nuestro navegador, conseguiré esto sin que nada indique cuál es la OMS. Ahora si queremos indicar que la UE es la Organización Mundial de la Salud, puedo añadir un BBR, y esta es la abreviatura. Y el título será Organización Mundial de la Salud org, mediación. Y dentro de esto podemos sumar, OK. Ahora volvamos aquí, corramos esto. Y como pueden ver, tenemos este rho y tenemos algo de almidón abajo subrayado. Y esto indica que se trata de una abreviatura a otra cosa. Y esta es la Organización Mundial de la Salud en realidad. Ahora respecto a la imagen, retrocedamos y tomemos esta URL. Por lo que tenemos una URL de una imagen que dice hola. Y dentro de esta imagen podemos crear aquí IMG. Entonces lo primero que vamos a hacer es escribir la fuente de esta imagen y tenemos nuestra fuente. Y después de eso, sólo ajustémonos. Por lo que podemos escribir que el ancho será igual a 200 y la altura será igual a 250. Y en este caso, déjame volver antes de hacer nada, refrescar el documento y vamos a conseguir Hola representado así. Ahora agreguemos algo de citación a esto. Entonces agreguemos esto es hola. Y dentro de nuestro código, siguiendo, las imágenes pueden escribir un párrafo. Y dentro de este párrafo, Necesitamos estacionar. Por lo que vamos a agregar sitio. Dentro del costado. Podemos agregar el, qué se trata esta imagen. Entonces en este caso, simplemente
vamos a añadir hola. Y se desconoce el creador o creador de esta imagen. Entonces ahora volvamos cientos atrás. Y como se puede ver, citamos que el título, o de qué se trata esta imagen? Y en este caso lo es, hola. Ahora también podemos agregar aquí una alternativa. Como podemos ver, tenemos sobre lo que es y t. Entonces en este caso, supongamos. Si algo ocurrió o se generó un adulto a partir de esta URL, simplemente
vamos a reemplazarlo por esta palabra hola. Oh, déjame solo agregar una foto que diga hola. Y en este caso, déjame simplemente escribir algo aquí solo para que esta URL sea inválida. Entonces me gustan las letras extra. Vuelve atrás y ejecuta esto. Y como podemos ver, esta imagen o esta URL generan, genera un adder. Y vamos a utilizar la alternativa. Y en este caso, es una imagen que dice hola. Y como podemos ver, vamos a conseguir una foto que diga hola y configurar la imagen misma. Permítanme ajustar esto. Y ahora estamos bien para volver a correr. Vamos a conseguir las fotos ya que ahora la URL es válida. También tenemos ataque que cubre represiones alineadas. Y en este caso, si queremos, y supongamos que queremos revertir esta línea. Entonces tenemos un párrafo y espiral, lo siento, déjame escribirlo. Y tenemos el párrafo. Dentro de este párrafo, queremos revertir el signo. Entonces esta es una línea. Y ser escrito de derecha a izquierda, en lugar de escribirlo de izquierda a derecha. Entonces ahora volvamos. Refrescado, no pasará nada. Vamos a conseguir una línea simple, y esta es una estructura normal en línea. Ahora volvamos atrás. Si queríamos conseguirlo de izquierda a derecha, vamos a usar el video. Y en este caso BD. Y la dirección es d, l, Así de derecha a izquierda. Y si copio esto, péguelo aquí y corro, vamos a notar que esta es la misma línea pero escrita a la inversa. Entonces si queremos leerlo, entonces DES es una línea y se escribiría de derecha a izquierda. Ahora bien, esto podría ser útil a la hora de escribir algunas cadenas o escribir algunos enteros, y queremos lo inverso de ellas. Entonces en lugar de tener que escribir un bucle for comenzando desde el punto final hasta el punto de inicio, podemos simplemente invertir un tiempo inverso y empezar a trabajar con ellos de esta manera. Por lo que en este video presentamos el código de bloque, dirección, abreviatura AB, IRR, y por supuesto el sitio y video. Y con eso dicho, este es el final de este video. Y el siguiente.
9. ENLACES: Ahora vamos a discutir el modo de longitud. Entonces, antes que nada, déjame escribirlo una vez más. ¿ Cómo podemos acceder a un enlace o cómo podemos agregar enlace a nuestro código HTML? Por lo que dentro de nuestro párrafo, simplemente
podemos añadir un enlace usando la referencia h, lo
siento, dentro de nuestra a. Así que aquí tenemos el enlace. Entonces supongamos que quiero ir a Google para que sea EBP HTTP, la columna hacia adelante slash dos veces, vamos a conseguir. Y si agrego aquí Google, déjame simplemente abrir esto. Y como podemos ver, tenemos Google. Si presiono esta palabra, vamos a ir automáticamente a google.com. Y aquí dentro podemos buscar lo que queramos. Ahora volvamos a nuestro código y comencemos discutir cómo podemos cambiar esta longitud o qué hacer con el esclavo. Entonces lo primero que vamos a discutir es las URL absolutas frente a las relativas. Entonces cada vez que escribimos HTTP, esto indica que esta es una URL absoluta. Entonces esta es una dirección web completa, y la estamos agregando al atributo hiper reference. Ahora, a veces tenemos algunas URL relativas, y estas URL son básicamente un enlace a una página dentro del mismo sitio web. Entonces, por ejemplo, si tenemos, supongamos que tenemos Google.com y dentro de Google.com tenemos imágenes. Por lo que simplemente podemos escribir una URL que nos lleve de Google a las imágenes de Google sin siquiera escribir el HTTP. Esto, simplemente podemos escribir imágenes de Google.com y funcionará bien. Ahora, otra cosa en la que pensar es el color del enlace. Ahora, como se puede ver aquí, el color del enlace es en realidad azul en primer lugar. Y luego déjame cambiarlo sólo para ver la diferencia. Y dentro, déjenme nombrarlo Google con la g minúscula, solo para cambiarlo, refrescar. Y como puedes ver, se trata de un Google. Ahora bien, si quiero cambiar al erudito, puedo volver aquí y agregar un estilo de hora aquí. Entonces tenemos estilo y el color, por ejemplo, podemos cambiar el color a azul y vamos a conseguir este azul. Supongamos que quería que fuera rojo. Simplemente puedo agregar rojo, volver atrás, refrescar. Y este es nuestro enlace ahora y lee. Por lo que básicamente es lo mismo que un párrafo. Aunque estemos lidiando con un enlace, vamos a hacer exactamente lo mismo que antes. Ahora, observe aquí que cada vez que estamos escribiendo un enlace, estamos creando un enlace. Tenemos esta línea aquí. Entonces una forma de eliminar esto es simplemente. Derecho y estilo. Necesitamos decoración de texto. Entonces tenemos decoración de texto y necesitábamos ser nueve. Y ahora regresaremos y correremos esto. Y como pueden ver, no
tenemos línea y ya quitamos el color aquí. Entonces vamos a tener el color predeterminado, que es un poco como el morado. Y si presiono, predice como antes, nada cambiará, pero esta línea desaparecerá. Ahora, si presiono aquí una vez más, no sólo eso, vamos a subir y google.com en la misma ventana o en la misma pestaña y la ventana. Entonces, por ejemplo, quería abrir este documento en una nueva ventana o en una nueva pestaña. Debería especificarlo. Entonces aquí viene la importancia de un blanco. Entonces en lugar de escribir esto, simplemente escribir el enlace y simplemente escribir el fin de semana de Google especifican el objetivo aquí. Por lo que objetivo será igual a, tenemos 44 ejemplos, así que tenemos el yo, y esto abre el documento en la misma ventana o pestaña que se limpió. Entonces este es el predeterminado, y también tenemos el espacio en blanco y esto abre el documento en una nueva ventana o pestaña. También tenemos al padre de un dopante, el documento en el marco padre. Y por último, tenemos la parte superior y abre el documento en todo el cuerpo de la ventana. Ahora supongamos que queríamos abrir una nueva ventana. En este caso, puedo usar el espacio en blanco, por lo que usaré en blanco. Volver atrás, refrescar, presionar. Y como puedes ver aquí, siempre abro una nueva pestaña o una nueva ventana en lugar de abrirla y la misma ventana. Por lo que usando esto, todavía podemos tener nuestra página principal. No obstante, también tenemos el enlace al que nos referimos en otra ventana o pestaña. Y volvamos aquí. Ahora, supongamos que queríamos agregar una imagen, y cada vez que hacemos clic en esta imagen, nos llevará a otro lugar. Por lo que ya tenemos una imagen aquí. Entonces esto es hola. Copiemos el enlace y trabajemos con él. Y cada vez que presionemos sobre esta imagen, automáticamente nos llevará, nos
llevará a Google.com. Y en este caso, una forma de hacerlo es levantarse y como de costumbre, así que esta es la a hiper referencia. Y dentro de esta referencia, vamos a escribir google.com. No obstante, en lugar de agregar Google o escribir Google, vamos a añadir una imagen en este caso. Por lo que IMG, como de costumbre. Y dentro de la fuente voy a sencillamente y a esta imagen. Entonces déjame volver aquí y ahogarme pronto. Observe que ahora tenemos una imagen y cada vez que la presionemos, nos llevará a google.com. Entonces, solo ajustemos esto para que la altura sea. Igual a 40, por ejemplo, y ancho igual a 30. Creo que está bien. Estás de vuelta R1. Y como pueden ver aquí, tenemos un bajo. Siempre que lo presionamos, resuenamos, tomará, toma, llévanos a google.com. Ahora volvamos atrás y veamos ahora cómo
puedes usar un enlace dentro de nuestro HTML son nuestro navegador principal. Entonces supongamos que tenemos algunos ejemplos, ejemplo 123456. Entonces aquí, supongamos que tengo b uno, lo
siento, h uno. Y este es el ejemplo uno. Entonces tenemos un ejemplo en Biograph. Supongamos que este ejemplo es algo. Entonces tenemos 111 tiempo. Este es el ejemplo dos. Y en este caso también tenemos un párrafo y este ejemplo como y como de costumbre. Entonces también tenemos para más ejemplos, por lo que sólo los copiaré en este punto. Entonces simplemente escribo esto y luego copio el otro. Entonces este ejemplo es, y tenemos algo de info ahora, déjame solo copiar esto, leer más veces. Entonces tenemos 123. Ahora déjame cambiarme M. Así que tenemos aquí 456. Ahora si sigo adelante y abro este archivo en nuestro navegador, podemos ver que tenemos, este es el ejemplo uno. Este ejemplo es el ejemplo 23456. No obstante, supongamos que necesito saltar al ejemplo 56 de inmediato. Entonces en lugar de escribirlas así como así, puedo agregar algunos enlaces aquí. Por lo que lo primero sería en un párrafo. Entonces a será el ID de nuestro párrafo o nuestro ejemplo al que necesitamos saltar. Por lo que necesitamos especificar un id folato para esto. Entonces por ejemplo, a una dentro del conjunto S1, Vamos a especificar que esto es e cinco. Y por supuesto aquí tenemos una idea y los dos V igual a E6 indicando que esto es un ejemplo, ejemplos x. ahora si volvemos aquí, así h referencia será al hashtag y el ID, que es cinco en este caso. Ahora puedo escribir aquí. Ir al ejemplo cinco. Sólo déjame abrir esto. Y como podemos ver aquí, tenemos que ir al ejemplo cinco, sin embargo, aún no se agrega. Entonces. Porque lo escribimos aquí en lugar de escribirlo dentro de la etiqueta a. Ahora, vuelve a dar la vuelta. Y como pueden ver, tenemos que ir al ejemplo cinco. Si yo antecedente, me tomará de inmediato el ejemplo cinco. Y esto funcionará si tenemos tantos ejemplos. Entonces permítanme simplemente copiar esto e imprimir, por ejemplo, diez veces. No lo sé. Y ahora si vuelvo atrás, y así vamos a tener muchos ejemplos. No obstante, si presiono sobre la densidad me llevará de inmediato al ejemplo cinco, sea lo que sea. Y lo mismo por supuesto se aplica a los circuitos de ejemplo. Por lo que tenemos E6 indicando que se trata de un ejemplo seis inciso a y hashtag E6, y vamos al ejemplo seis. Ahora si ejecuto esto, vuelve aquí y refresca. Puedo ver que tenemos aunque por ejemplo seis. Y si hago click en él, me llevará de inmediato a ejemplo seis. Ahora, hay un ET aparece aquí al final
del navegador es porque no tenemos ningún dato. Siguiendo estos dos ejemplos muestran que supongamos que tengo algunos datos aquí. Por lo que tenemos los rubros arriba y abajo. Y si solo vuelvo atrás, corro esto, podemos ver que tenemos algo de cerveza. Entonces si voy al ejemplo cinco, puedo sintetizar el ejemplo cinco en la parte superior de la página. Si voy al ejemplo seis, también
puedo ver que este es el Ejemplo seis en la parte superior de la página también. Ahora, lo último que vamos a discutir es escribir correo electrónico a alguien. Y en este caso, déjame volver aquí. Y en lugar de solo crear una hiper referencia o una longitud feliz que nos lleve a la imagen. Simplemente podemos añadir la imagen en sí aquí. Entonces, déjame seguir adelante y borrar esto. Ahora, siempre que queramos escribir un correo electrónico. Entonces déjame empezar con, este es un enlace de correo electrónico. Y luego después de eso, voy a escribir un y dentro de la HRF, voy a usar el correo para tan enviado por correo a alguien, por ejemplo, no. Y si quiero agregar el tema, simplemente
puedo agregar el punto de delegación y luego seguirlo el tema. El tema sería, por ejemplo, para hola mundo. Entonces hola. Y siempre que queramos escribir un espacio dentro de esta H ref, debo agregar el porcentaje 20. Por lo que el porcentaje 20 indicará que
estoy, necesito un espacio aquí. Así que hola otra vez y enviar correo electrónico desde aquí. Ahora. Entonces, cuando sea. Ahora déjame sólo abrir esto. Y como podemos ver aquí, tenemos esto como enlace de correo electrónico enviar imagen desde aquí. Por lo que cada vez que presione sobre esto, automáticamente me llevará a macho y va a fijar el asunto y el destinatario del correo por sí mismo automáticamente, ya que señalé aquí en la imagen. Por lo que masculino dos indica a la persona que
voy a enviar el correo electrónico a la dirección, como se puede ver aquí. Después seguido del tema. Por supuesto, tenemos el tema igual a Hola otra vez. Y por último, también podemos agregar, en lugar de sólo el tema, también
podemos agregar el cuerpo. Por lo que simplemente puedo escribir aquí y cuerpo. Y dentro del cuerpo también puedo escribir lo que quiera. Y siempre que quiera usar un espacio, simplemente
puedo agregar el porcentaje 20. Entonces esto es todo para enviar un email y esto es todo para el link en general es una idea muy general. Tenemos tantas cosas que podemos hacer con un enlace o referencia en HTML. Pero por ahora, esta es una introducción general. Y con eso dicho, este es el final de este video. Nos vemos en el siguiente.
10. Imágenes: Ahora, en cuanto a las imágenes, creo que tenemos una buena idea sobre las imágenes tienden ahora. Y esto no es una, sólo una recapitulación de lo que aprendimos sobre las imágenes y cómo usarlas. Entonces permítanme que antes que nada elimine esto y empiece por crear una imagen. Y como de costumbre, tenemos nuestra longitud aquí. Y como antes, podemos especificar el ancho y la altura. Por lo que el ancho será igual a 200 y la altura sería igual a 200 también. Entonces estas cosas lo sabemos, y si vuelvo, así que esta es nuestra imagen aquí. Y como podemos ver, nos ajustamos como queremos. Ahora. Por ejemplo, si tengo esta imagen y como dijimos antes, esta URL no está funcionando. Podemos escribir aquí imagen de Google. Y algo sucedió en esta URL, tal vez copiándola o por error, agregamos algo, y esta no es una URL válida, como dijimos, vamos a conseguir la alternativa para esta imagen. En este caso, escribimos que necesitamos imagen de Google. Ahora, supongamos que queremos escribir esta imagen o esta imagen a la derecha. Una forma de hacerlo, una barra S especificando este flujo de teselas a la derecha. Entonces ahora podemos abrir a Stein aquí. Por lo que el estilo será igual y dentro del estilo. Tenemos que añadir el flotador. Y en este caso necesitamos que la imagen esté a la derecha. Entonces si me refresco, puedo ver que la imagen de Google está ahora a la derecha. Permítanme copiar aquí el enlace correcto. En este caso, este es el enlace. Déjame simplemente copiarlo de nuevo a mi código aquí. Y vamos a conseguir esta imagen donde siempre queramos. Entonces lo queremos a la derecha, lo
vamos a conseguir aquí. Ahora también podemos especificar el ancho y la altura para ser porcentaje. Entonces supongamos que quiero que el ancho sea igual a un 100%. Y en este caso, si lo especifico como un 100%, obtendré el ancho así. Ahora, permítanme volver atrás y especificar la altura para ser igual a un 100%. También, retrocede, refresca. Y como pueden ver, vamos a obtener el primer enlace o inicial o imagen inicial que obtuvimos de este enlace. Ahora, así que esta es una forma de especificar el ancho o la altura, ya sea especificando el porcentaje o especificando el píxel. Ahora, otra cosa es, hablamos es cuando queremos agregar una imagen para ser referencia, simplemente
podemos escribir una y dentro de esta a, usaré la imagen y me llevará, por
ejemplo, a SGP, google.com. Y como dijimos antes, cada vez que escribimos referencia a y necesitamos cerrar aquí div tag. Y como podemos ver, si vuelvo ahora, corra esto, Lo tenemos a la derecha. Puedo dar click en él. Y si hago clic en
eso, me llevará automáticamente a Google.com. Por lo que estas son algunas ideas básicas sobre las imágenes. Tenemos tantas otras informaciones e ideas que podemos utilizar. No obstante, sólo pensé que simplemente puedo fusionar todas las ideas
de las que hablamos en los videos anteriores. En este video, sólo para aclarar o tener una idea clara de lo que podemos hacer con las imágenes y cómo usarlas. Y por supuesto, cómo manipular el tamaño o la ubicación de nuestra imagen en nuestro código HTML o nuestro navegador. Entonces esto es todo para imágenes. Nos vemos en el siguiente video.
11. Tablas: Ahora hablemos de tablas y HTML. Entonces, ¿cómo se puede recrear nuestra mesa? Entonces antes que nada, aquí tenemos nuestro cuerpo. Y dentro de este cuerpo, podemos empezar por crear la tabla usando la etiqueta de tabla. Presionar enter. Entonces esta es nuestra mesa ahora. Ahora tenemos que hacerlo, una vez que tengamos la fila y la columna. Entonces si queremos crear una fila, simplemente
podemos usar la tabla crecer. Y dentro de esta ley de mesa, supongamos que sólo tengo un componente o un elemento en nuestra mesa. Y esto nos da un dato de una sola tabla. Por lo que los datos son sinónimo de columnas en este caso. Por lo que TDI. Y déjame sólo probar uno. Ahora si sigo adelante y abro esto, podemos ver que vamos a conseguir uno. Por lo que esta es una tabla de talla uno. Tenemos sólo un elemento en el establo de Santa. Ahora supongamos que quiero una tabla de una fila y dos columnas. Puedo agregar aquí DD. Y dentro de este TED, puedo agregar el número. Supongamos que quiero, déjame volver aquí, refrescar. Y como pueden ver, tenemos ahora una mesa. Y tenemos en esta tabla dos ítems o dos números, 12. Y ahora no están separados por nada. Simplemente se muestran como y como están aquí. Entonces volvamos atrás. Y supongamos que quiero crear una matriz de, una matriz de tres por 33 por tres matriz en realidad. Y en este caso, estaré teniendo tres filas y tres columnas. Por lo que la primera fila tendrá tres ítems o tres números. En este caso tenemos 123 y la segunda fila, necesito crear otra fila usando el TR. Y dentro de esta fila, también
tendré tres números, por lo que 456. Y finalmente tengo mi última fila y dentro del trazo, tengo los últimos tres números. Son 789. Entonces DD siete, td ocho. Y por supuesto TD nueve. Si vuelvo ahora, refresca esto, podemos ver que tenemos una tabla de tres filas y tres columnas. Como podemos ver, tenemos 123456789. Entonces la idea general. Siempre que queramos crear una fila, vamos a usar DTI. Siempre que vamos a añadir un amperio o como tiempo específico vamos a utilizar el Td. Y esto es sinónimo de datos de tabla. Ahora, como podemos ver aquí, tenemos una matriz de tres por tres. Supongamos que quiero agregar aquí algunos encabezamientos. Entonces esto es, puedo precisar que estos son el primer número, los
segundos números, y los terceros números. Y en realidad puedo hacer eso creando aquí una nueva fila. Por lo que tenemos TR dentro de esta fila. Puedo añadir th. Por lo que th. Y dentro del escenario puedo escribir y b1, luego seguido de la edad y B2. Entonces finalmente th y B3 retrocedan, refrescan. Y como podemos ver, son y un perno, como podemos ver el número uno, el número dos, número tres están en ambos. Ahora cambiemos el ejemplo y tratemos el borde de la mesa. Hasta ahora no tenemos fronteras, como podemos ver, simplemente se muestran y forman la tabla. No obstante, aún no tenemos las calderas. Déjame volver a nuestro código y eliminar esto. Entonces dentro de nuestra tabla, vamos a crear, vamos a agregar algunos datos en realidad. Entonces lo primero que vamos a hacer es agregar personas y les vamos a pedir información sobre dispersión. Entonces el FirstName, LastName, y H. Así que lo primero que vamos a hacer es crear la primera fila. Y dentro de esta fila, vamos a sumar tres columnas. Por lo que el primero indicará el FirstName. Entonces th nombre, luego apellido TH. Y finalmente la edad, la edad. Ahora después de crear este rho, podemos empezar con la adición de nuestros datos. Por lo que el primer cliente o la primera persona será TD. Entonces este es el dato TLB, Alex, y el apellido será un punto. Y por supuesto, tenemos que sumar es h. Y en este caso, supongamos que la edad es de 30 años. Y entonces creemos otro pro. Y dentro del pergamino tenemos a John, y también tenemos a J. Y finalmente la edad será de 45 años. Y la última persona sería que acabamos de abrir a la, lo siento, aquí necesitamos agregar celda TD de los son seleccionados solo el Dean John Jay, y DD 45. Y ahora dentro de nuestra última fila, vamos a sumar un Aimee detrás de ellos de esa manera. Y será a,
y finalmente, la edad será de 25 años. Ahora si vuelvo aquí y corro esto, Tenemos nuestra tabla hasta ahora, FirstName, LastName, y edad. Ahora bien, si quiero agregar el barquero, puedo agregarlas a cada fila y columna. Entonces cada vez que agrego una fila o datos, lo
siento, un dato o un encabezado, puedo agregar el borde. No obstante, una forma de lidiar con todo esto, en lugar de agregar cada vez aquí, por ejemplo, en Boulder y luego usarlo, simplemente
puedo agregar y la cabeza. Por lo que dentro de nuestra cabeza, después del título, podemos agregar estilo. Para que así dentro de este tipo, podemos cambiar lo que queramos aquí. Entonces, por ejemplo, quiero cambiar tabla cuántica. Dentro de la tabla, quiero cambiar el encabezado de la tabla y los datos de la tabla hacia arriba
y así, y dentro de este cambio de Eigen, por ejemplo, el Boyden, quería hervirlo para ser un píxel, y quiero que sea negro sólido. Ahora volvamos a bajar. Y como podemos ver, hemos evitado oh, 1%. Y es así que ahora si vuelvo aquí y déjame simplemente simplificar esto o minimizarlo, regrese. Y como podemos ver hoy, hazte más pequeño. Ahora, supongamos que no quiero que sea tan elegante. Yo solo quiero ser, solo quiero que mi mesa sea simple. En este caso. Puedo quitar la frontera exterior. Este caso, puedo usar colapso de
frontera y para ser igual a colapsar de nuevo, refrescar. Y como pueden ver, vamos a conseguir una versión más sencilla de la mesa sin los bordes exteriores. Ahora, como podemos ver aquí, el establo como un poco desordenado, sólo se suma información. Y supongamos que queremos cambiar el relleno dentro del aceite,
dentro de los datos de la tabla. Entonces una forma de hacerlo es sumando a nuestro estilo. Queremos para el rubro. Y así th td abrir esto y
queremos que tengan el relleno de 15 accesos por ejemplo. Entonces si sigo adelante ahora y Refresca esto como podemos ver. De aquí tenemos 15, de aquí somos 1515 y así sucesivamente. Por lo que el relleno es básicamente la distancia mínima que vamos a tener entre el borde de la mesa y el propio artículo. Ahora como podemos ver aquí, 15 píxeles es mucho. Entonces déjame solo probar cinco píxeles. Y, y creo que está bien. Ahora si I1 los encabezados para estar a la izquierda, simplemente
puedo agregar dentro del estilo, la edad arriba y, y necesito que el texto alineado esté a la izquierda. Vuelve atrás, refresca. Y no pasaría nada ya que están en la torre izquierda. Tenemos que ajustar el tamaño de la mesa. Por lo que dentro de nuestra mesa, después de crear esta tabla, simplemente
podemos agregar aquí este azulejo. Y necesitamos que el ancho sea igual a un 100%. Y en este caso, antes de volver refrescar, podemos ver que la mesa es ahora mucho más audaz. Y en este caso, siempre que utilicemos el impuesto alineado a la izquierda, vamos a conseguir
FirstName, LastName, y edad a la izquierda. No obstante, si me limito a quitar esto, promociona a Dios. Así que quita EL text-alinea a la izquierda tu espalda y refresca. Podemos ver que el FirstName, lastName, y edad, van a estar en el centro de nuestra caja. Y esto se debe a que el rubro suele estar en el centro y todos los demás artículos. Por lo que siempre que utilicemos TD, van a estar automáticamente en el lado izquierdo de nuestra caja. Ahora. Hasta ahora tenemos el rumbo horizontal. Como podemos ver, tenemos el FirstName, LastName, y edad. Pero supongamos que quiero crear una tabla que represente los números telefónicos y los, y esto, por ejemplo, podemos decir que esto representaría el teléfono. Entonces vamos a estar justo en el extremo izquierdo y a la derecha en las casillas de la derecha, vamos a escribir el número telefónico, el real Para un número. Entonces una forma de hacerlo es creando la tabla como de costumbre. Entonces, antes que nada, déjame volver aquí. Después de nuestra mesa, vamos a crear otra tabla. Dentro de esta mesa, vamos a tener la primera fila. Dentro de la primera fila, vamos a crear el primer encabezamiento de mesa y tenemos teléfono. Y luego vamos a sumar nuestros datos. Y en este caso, vamos a sumar los números reales. Entonces supongamos que tenemos 555555 para D4, y esta es nuestra primera fila. Segunda fila también será así. Por lo que el manejo será telefónico y los datos serán el número. Y en este caso, tenemos este número. Entonces volvamos atrás y ejecutemos esto. Y como podemos ver, tenemos el teléfono, y este es el rumbo vertical. Entonces como podemos ver, los encabezamientos son verticales y los números por defecto están en las casillas correctas. Entonces solo verifica las cosas. Simplemente podemos agregar ante nuestra mesa un encabezamiento. Por lo que H uno será este es un ejemplo de lo horizontal. Y luego, y después del establo. Entonces entre las dos tablas que vamos a escribir cada una también mostró esto como ejemplo. A los 30 chica teniendo. Ahora si vuelvo atrás y corro esto una vez más, podemos ver que este es un ejemplo de un rumbo horizontal. Como podemos ver, los encabezamientos son horizontales y aquí los encabezamientos son verticales. Y esto es todo para este video. En el siguiente video, vamos a discutir más mesas y nos vemos luego.
12. Cuadros 2 2: Ahora supongamos que queremos añadir una leyenda a nuestra mesa. Entonces, en lugar de escribir aquí un encabezamiento, vamos a agregar esto como una leyenda a nuestra mesa, y aquí se aplica lo mismo. Entonces una forma de hacerlo es que dentro de nuestra mesa, podemos agregar un pie de foto. Y podemos decir que se trata de un rumbo vertical. Eliminemos esto y volvamos a nuestra primera mesa. Y por supuesto dentro de esta tabla también añadir un pie de foto. Re, no es agregar. Y en este caso, si vuelvo ahora y ahogo esta actualización, vamos a notar que esto es rumbo horizontal y dados rumbo vertical. Y son el centro de nuestra mesa. Entonces si quiero que estén
al lado izquierdo para poder escribir texto alineado a la izquierda. Ahora, retrocede, refresca. Y simplemente podemos ver que este rumbo horizontal está ahora a la izquierda. Y también podemos hacer lo mismo por el derecho. No lo usé ahora. Pero también podemos usarlo. Corre. Y podemos ver que este es nuestro rumbo horizontal, y éste está ahora en la posición más correcta. Ahora, eliminemos estas tablas y trabajemos con una nueva solo para ver una nueva característica. Y en este caso, vamos aquí y por supuesto llevamos fuera de esto. Y aún tenemos esto también. Entonces ahora volvamos a nuestro cuerpo y vamos a crear una nueva mesa. Y por supuesto, el ancho será como de costumbre. Por lo que el ancho de ésta será igual a un 100%. Y ahora podemos trabajar con nuestra mesa. Entonces lo primero que vamos a crear es el primer trazo dentro de la primera fila, vamos a simplemente agregar el nombre para que los encabezados sean nombrados y el otro encabezado sería en realidad un número de teléfono. Así que el número telefónico. Y vamos a añadir otra fila para una sola persona. Y así el primer dato será el nombre, como dijimos. Entonces supongamos que los Yunus. Y por supuesto el segundo será el número telefónico. Y en este caso, déjenme asumir que este es mi número telefónico. Ahora si puedo volver aquí y ejecutar esto para ver que
tenemos el nombre para un número de unidades y el número telefónico. Y supongamos que tengo dos números telefónicos y quiero añadirlos los dos aquí. Entonces una forma de hacerlo es creando dos celdas dentro de esta columna. Entonces si vuelvo aquí y dentro de la th, así que este es el segundo, la edad, el encabezamiento de la mesa. Puedo agregar col span y dentro de esto puedo especificar el número de sonidos que quiero fusionar. Entonces por ejemplo, aquí en este caso, quiero, y simplemente puedo agregar DD y nuevo número de teléfono. Y en este caso, este es el segundo número, que backround. Y como podemos ver, ahora tenemos dos números telefónicos, el primero y el segundo,
y se compran bajo la sección numérica predeterminada o el saldo de números telefónicos. Ahora como hemos hecho esto para columnas, podemos hacer exactamente lo mismo para las filas. Y en este caso, permítanme simplemente demostrar esto dentro de nuestras mesas. Entonces, y así aunque tabla vamos a tener el TR y por supuesto el nombre, y luego seguido del nombre. Entonces quiero sólo mover estos. Entonces vamos a tener nombre. Y luego aquí por número que el nombre aquí. Y ambos en números aquí y aquí. Entonces y los científicos van a tener $0.02. Entonces para ello, vamos a crear nuestro primer encabezamiento, ese es el nombre, sin embargo, seguido de los datos. Y en este caso será hasta mi nombre. Por lo que EU. Y por supuesto dentro de nuestra segunda fila, vamos a crear nuestro primer rumbo, segundo helio, perdón. Entonces aquí tenemos la edad. Y luego 78s, puedo especificar el lapso de fila. Y necesitaba ser dos. Y dentro de esto, vamos a añadir el número telefónico. Y finalmente tenemos los dos números telefónicos. Entonces tenemos el primero, y esto es igual a td. Y el segundo será una nueva fila. Como dijimos, necesitamos tres filas. Por lo que TR. Y si vuelvo ahora, ejecuta esto para que podamos ver que tenemos Mi nombre, agrega Urano que número telefónico. Tenemos dos números telefónicos. Entonces, ¿qué hicimos aquí? Déjame volver. Y como podemos ver cuando especifico el rowspan 22, solo
tomé dos celdas o dos filas y las fusioné juntas. Entonces si elimino esto de mi código, y veamos qué va a pasar. Ejecuta esto una vez más. Puedo ver que tenemos la segunda fila seguida del número. No obstante, el tercer número estará aquí. Ahora, una forma de lidiar con eso es simplemente añadiendo el último rubro. Entonces. Un rumbo vacío. Lo siento, no lo guardé. Refrescar. Y como podemos ver, tenemos un antiislanding. Entonces solo para quitar esto y no confundir al lector, simplemente
podemos usar el rowspan y fusionar crece comprado para juntarse. Ya que necesitamos cuatro números y ambos representan el mismo número de teléfono o los dos en números del mismo usuario. Ahora, déjame volver aquí y quitar este momento desconocido. Entonces esta es nuestra mesa. Ahora, supongamos que necesito el borde interior y exterior, así que iré, voy a quitar el colapso R1. Y como podemos ver ahora, tenemos mesa más elegante. Ahora. Y supongamos que quiero aumentar o cambiar el espaciado fronterizo. Tan desprovista de espaciado es en realidad la distancia entre el borde interior y exterior y decidir esta tabla. Entonces déjame volver aquí y dentro de mi mesa o dentro del estilo aquí, podemos agregar que queremos que la tabla sea, por ejemplo, el espaciado de borde y sea igual a cinco píxeles. Volvamos atrás y ejecutemos esto. Y como se puede ver, se ha cambiado y se ha incrementado. Entonces, por ejemplo, si utilizo ahora 15, vuelves R1. Podemos notar que cambia y aumentará
la distancia entre el borde interior y el exterior. Ahora, cada vez que
creamos una tabla, no necesitamos simplemente agregar elementos o palabras. Podemos agregar cualquier cosa que queramos. Entonces, por ejemplo, podemos agregar párrafo, una lista, una palabra, o incluso otra tabla. Entonces déjame volver aquí y quitar esto, un espaciado de frontera y agregar aquí el colapso de la frontera. Como de costumbre. Volver R1. Y déjenme ir aquí y necesitamos salvarlo. Lo siento. No hay corrida bancaria. Y esta es nuestra mesa. No obstante, dentro de nuestra tabla, permítanme borrar las filas y columnas e iniciar nueva tabla. Entonces si sigo adelante y títulos, lo
siento, hasta aquí, puedo empezar por crear la primera fila. Entonces la primera fila, dentro de la primera fila, vamos a crear nuestra primera columna. Por lo que la primera columna, los primeros datos estarán conformados por párrafos. Entonces B, este es un párrafo. Y entonces déjame simplemente crear otro párrafo. Entonces este es otro párrafo. Volvamos aquí. Y como podemos ver, si creo esto, tenemos la primera columna o el primer elemento dentro de nuestra tabla. Ahora si vuelvo atrás y vamos a crear otra columna. Y dentro de esto, sólo vamos a crear una lista. O vamos a crear otra tabla por ejemplo. Por lo que dentro de TD, vamos a crear la segunda tabla. Entonces vamos a escribir tabla. Y dentro de esta tabla vamos a crear la primera fila. Versos de primera fila de 212. Y entonces la segunda fila constará también de dos columnas, por lo que 34. Ahora si vuelvo atrás y ejecuto esto, vamos a conseguir los 22 artículos dentro de nuestra mesa exterior o mesa más grande. Y estos dos rubros serán espectrógrafos y lista. Nuestra mesa. Ahora, nuestra segunda fila consistirá en una lista y una palabra. Por lo que dentro de nuestra mesa, vamos a crear la segunda fila. Entonces aquí, después de conseguir, después de terminar desde la primera fila, crear la segunda y dentro de la segunda tendrá una palabra. Entonces supongamos que tengo una carga y el segundo elemento dentro de la segunda fila será una lista. Entonces para crear esta lista, simplemente
vamos a usar una lista desordenada. Y supongamos que necesitamos el TD. Entonces creamos un TD, y luego después de eso podemos crear nuestra lista. Lista tan desordenada. Dentro de esta lista, tenemos algunos ítems de lista. Entonces Banana, otro elemento de lista, mapeador. Y la final serán las piñas. Entonces ahora terminamos. Volvamos atrás y ejecutemos esto. Y como podemos ver, tenemos nuestra tabla y consta de párrafos, tabla, Word y lista. Y esto es todo para la mesa. No obstante, aún podemos modificar algunas cosas. Por ejemplo, podemos cambiar el color de fondo de esta tabla. Por lo que podemos usar el ID para hacer eso. Entonces tenemos nuestra mesa, y me refiero a la mesa exterior o a la mesa más grande. Y en este caso, puedo agregar aquí la idea de ser igual a, por ejemplo, la que. Y ahora si quiero acceder a esta mesa, simplemente
puedo usarla dentro del estilo. Por lo que dentro de nuestro estilo, puedo especificar que necesito para el ID d1. ¿ Abrimos las llaves y necesito que el color de fondo sea igual a eso. Supongamos que pur, propósito, creo que qué era bueno? Y ahora vuelve atrás, refresca. Y como pueden ver, nuestra mesa se vuelve a propósito. Ahora también podemos especificar que queremos que la primera fila sea igual a B de un color negro y la segunda fila de una columna, blanco o gris por ejemplo. Por lo que podemos hacer eso simplemente especificando la fila y la columna y especificando el fondo, color, tamaño o familia de fuentes. Y esto es todo para el cónico. Podemos hacer tantas cosas con tablas en HTML, pero esto es como de costumbre, una idea general. Y puedes profundizar más en ella y aprender más sobre ella por ti mismo. Pero por ahora, nos apegaremos a esto. Entonces esto es todo. Este es el final del video de la mesa. Con eso dicho, Nos vemos en el siguiente.
13. Listas: Ahora hablemos más de menos. Y en nuestros códigos HTML anteriores, creamos alguna lista. Y en este video vamos a profundizar en este tema. Entonces, en primer lugar, permítanme simplemente borrar todo esto y volver a nuestro Default normal. Bien, entonces aquí estamos. Entonces tenemos nuestra cabeza y cuerpo. Entonces para crear una lista, como sabemos, si queremos comenzar con la lista desordenada, podemos escribir q e ingresar. Y esta es nuestra lista desordenada. Y por defecto, si añadí algunos artículos aquí. Entonces y déjame simplemente abrir este navegador por defecto. Y como podemos ver aquí, tenemos plátano y Apple. Y esta es la lista desordenada por defecto. Ahora, como podemos ver por defecto, tenemos las balas de disco. Entonces es lo mismo si escribo al estilo que quiero que el tiempo de lista sea un escritorio. Y en este caso, si sigo adelante y refresco, no voy a cambiar nada ya que esto ya es una bala de disco. Ahora supongamos que quiero que sean círculo. Simplemente puedo volver a mi código y cambiar el escritorio, el tipo de disco a círculo. Volvamos aquí y refresquemos. Y como podemos ver, ahora, nuestros puntos de bala, nuestro círculo en lugar de escritorio. También tenemos la plaza, por ejemplo, en este caso, permítanme volver atrás y cambiar este círculo, dos cuadrados S. Por lo que tenemos diferentes tipos de puntos de bala. Y como podemos ver aquí, tenemos el cuándo señala como cuadrado. Y por ejemplo, si no queremos ningún punto de bala, en este caso, puedo establecer mi tipo en ninguno. Entonces como podemos ver aquí, si nos
refrescamos, vamos a conseguir nuestro menos sin ningún punto de bala. Ahora, pasemos a la lista de ordenadas. Y en este caso F i1. Para crear mi lista ordenada, simplemente
puedo escribir O L. Y dentro de esta lista puedo establecer mis ítems de lista. Entonces como de costumbre, y Anna y Apple. Volvamos, refresquemos. Y como podemos ver, vamos a conseguir que mi lista ordene por orden ascendente de uno a dos, ya que sólo tengo dos artículos. Ahora, supongamos que quiero pedirlos por letras en lugar de números. En este caso, puedo volver aquí y poner mi estilo como de costumbre. Por lo que el tipo de la lista ordenada será igual a un conjunto de números. Por volver atrás, ejecuta esto, voy a conseguir un, B, y C y así sucesivamente. Ahora supongamos que los quiero adentro. Carta normal retrocede y como podemos ver, cambiarían. Y por supuesto, por ejemplo, si los quiero con números romanos, puedo volver también y cambiar esto por i, indicando que los quiero en romano. Y como podemos ver, podemos usar números dramáticos como ordenar en este caso. Ahora, claro, si quiero que sean también romanos pero no capital en este caso, puedo secarlo. Ojo normal y como puedes ver, voy a conseguir i como en números Brahman. Ahora, también tenemos algo que se llama lista de descripción. Y en esta última semana se pueden enumerar artículos. Pero podemos agregar algunos, por ejemplo, descripción para este ítem. En este caso, supongamos que tengo plátano y Apple y quiero agregar el color. Para que pueda agregar plátano, un amarillo, y una manzana, roja en este caso, por ejemplo. Y si vuelvo, déjame simplemente crear nuestra lista de descripción. ¿ Y cómo hacemos eso? Simplemente podemos escribir d y presionar enter, y esta es una lista de inscripciones. Dentro de esta lista, tengo. Puedo usar el DT. Y si entro un café o plátano en este caso. Entonces este es el ítem y DD, solo para indicar que vamos a ingresar la descripción de este ítem. Entonces DD, Go y yo simplemente puedo escribir, por ejemplo, amarillo. Ahora volvamos DT y DD y leamos. Y por supuesto, si vuelvo y refresco, solo guarde esto y guárdelo. Ahora vuelve refrescado. Y vamos a conseguir plátano, seguido de la descripción, y luego manzana y también seguido de la descripción. Ahora, simplemente puedo agregar aquí, por ejemplo, el color. Sólo para aclarar lo que estoy haciendo. Y en este caso, déjame volver una vez más. Y como podemos ver, tenemos nuestros frutos y el color asociado a ella. No obstante, pasa a la lista anidada. Y básicamente, la lista anidada es una lista que está dentro de otra lista. Y en este caso, supongamos que tengo, por ejemplo, una lista y ésta es la más grande. Por lo que está desordenado. Entonces usaré un. Por lo que dentro de esta lista tengo el ítem de lista. Supongamos que tengo computadoras portátiles o teléfonos, y luego seguido de otro elemento de la lista. Y en este caso, es una laptop. Y por supuesto, esta laptop, tengo muchos, muchos tipos. Supongamos que quiero crear una lista de estos portátiles. Por lo que puedo crear una lista ONU, desordenada dentro de este ítem de la lista. Y dentro de esta lista desordenada puedo crear, digamos HB, mark, y así sucesivamente. Ahora, si vuelvo a mi navegador renders, podemos ver que tenemos teléfonos,
laptop, y dentro de rehabilitación de laptop, HP y mack. Ahora, observe aquí que los puntos de bala predeterminados son de escritorio. Por lo que los puntos de bala escritorio que prioricé. No obstante, si lo
estamos, ya los hemos utilizado. Y los puntos de bala predeterminados ahora son los círculos. Ahora también teníamos la lista horizontal y podemos crearla usando el estilo. Podemos cambiar el estilo de mostrar los ítems de nuestra lista. Entonces supongamos que sólo tengo que enumerar artículos. En este caso, tenemos nuestra laptop y formada. Entonces déjame volver aquí. Y déjame solo crear una identificación para esto. Y en este caso, déjenme llamarlo C cinco. Ahora dentro de nuestro estilo, aquí
arriba, dentro de nuestra cabeza, podemos crear este azulejo. Entonces aquí tenemos estilo. Y por supuesto, si quiero usar esto o acceder a esta lista desordenada. Y la idea es C5. Necesitamos acceder a los ítems de la lista y dentro de esta lista desordenada. Y en este caso, necesito cambiar la pantalla para iluminar. Y usando esto, puedo ver que ahora mis ítems de lista son, mis ítems están listados de manera horizontal. Por lo que siempre que utilicemos los iluminados aquí en nuestra pantalla, se
van a mostrar horizontalmente. Entonces esto no es por menos. Y permítanme sólo añadir algunas cosas. Y no están claramente relacionados con la lista. No obstante, les encuentro que son importantes y deben sumarse en nuestra clase. Entonces lo primero es el elemento DIV. Y este elemento es un elemento de bloque y
siempre iniciará una nueva línea y ocupará el ancho completo disponible. Entonces es básicamente igual que una caja. Entonces déjame demostrarlo aquí. Vamos a movernos es y quitar equipos. Y puedo crear este elemento. Entonces dentro de este div, puedo decir hola, mundo. Entonces por ejemplo, si quiero que aparezca el negrita, puedo agregar en mi estilo aquí que quiero que la caldera sea igual a un píxel, digamos, y negro sólido. Por lo que quiero que el color sea negro y el ancho del borde un píxel. Y como podemos ver aquí, ahora
tenemos calderas conscientes. Y ahora son del tamaño de un píxel. Y por supuesto son de otro color negro. Si quería cambiar el color, digamos que puedo volver atrás. Y como pueden ver, lo siento, I1, I2 y demás. Y por supuesto que vamos a conseguir HelloWorld y la frontera está inclinada ahora. Por lo que como podemos notar, este elemento se estirará hacia la izquierda y guiará lo más lejos que pueda. Entonces como podemos ver aquí, es ir por toda la página desde y desde este punto final hasta el último bit de la pantalla. Ahora, otro elemento es el elemento span, y en este caso, permítanme volver aquí. Por lo que este elemento span es un elemento en línea y no arrancará en una nueva línea y solo ocupa tanto como sea necesario. Por lo tanto, permítanme demostrar el uso de este elemento span. Entonces déjame ir y borrar esto, el crear nuestro lapso. Y por supuesto, déjame decir que necesito HelloWorld. Y déjame callar. Dentro de nuestro expandir, agregaré mi estilo para ser border, un pixel como de costumbre y negro sólido. Vuelvo ahora, refresco esto. Podemos ver que tenemos hola mundo dentro de la frontera. No obstante, el puntero sólo tomará tanto como sea necesario. Ahora, supongamos que agrego unas palabras afuera. Por lo que este lapso está en un párrafo. Y claro que tengo algunas palabras fuera del lapso. Entonces puedo decir que soy Adi y bueno. Por en este caso, si vuelvo y podemos ver que este Hola Mundo está entre estas palabras y la frontera sólo tomará tanto como sea necesario. Por lo que podemos ver que la palabra está dentro de la caja y encaja perfectamente. Ahora bien, si queremos darle estilo a este lapso y elementos, por ejemplo, supongamos que tengo esto. Por lo que tengo aquí el párrafo, dentro del párrafo, tengo comida. Hay recuperaciones. Y tenemos rojo, azul, y amarillo. No obstante, quiero que se presenten cada color de esto y el color respectivo. Entonces ahora si vuelvo aquí y lambdas, voy a llegar ahí tres colores, rojo, azul, y amarillo. Y para ello, simplemente
podemos agregar este rincón a span. Así que span y puedo escribir pan. Y el estilo de esto. Podemos usar el color para ser iguales a eso. Y el fin de semana lo hacen audaz, tan divertido. Y por supuesto que necesito sumar y esperar a ser igual a. Ahora si vuelvo atrás y ejecuto esto, puedo ver que hemos leído y es endpoint. Para que podamos hacer exactamente lo mismo para el azul y el amarillo. Y así es como podemos darle estilo nuestro span y podemos hacer exactamente lo mismo con nuestro elemento div. Entonces esto es todo para este video. Nos vemos en el siguiente.
14. CSS: Y a veces cada vez que estamos escribiendo nuestro código HTML, algunas cosas podrían ponerse un poco desordenadas ya que vamos a agregar, por ejemplo, y algunos estilos y algunos detalles. Y en este caso, es posible que no entienda exactamente lo que estamos haciendo en nuestro archivo HTML. Entonces aquí viene la importancia de un archivo css. Y dentro del CSS, vamos a darle estilo a nuestros elementos o a nuestros datos. Y en este caso, en lugar de escribir el estilo aquí, tiempo de
configuración y nuestra cabeza. Por lo que realmente no necesitamos escribir Stein aquí, o incluso agregar un estilo en todos y cada uno de los componentes. Entonces no necesitamos hacer eso. Simplemente podemos escribir horas solos o nuestro archivo CSS donde vamos a darle estilo a nuestros componentes. Por lo que acabo de crear mi archivo dot CSS, nombré archivo. Y dentro de este archivo, acabo de decir que quiero ser un color de fondo y se adquiere color de fondo. Ahora tengo aquí h uno en este caso. Y necesito vincular estos dos archivos juntos. Entonces una forma de hacerlo es usando la longitud y tenemos CSS. Entonces esta es Stylesheet y quiero enlazar el archivo, el TSS. Ahora si sigo adelante y, lo
siento, vuelve y abre esto. En el navegador por defecto. Voy a ir, voy a conseguir el que tenga un fondo bandgap color de unquote. Ahora, también podríamos querer, tengo dos colores diferentes para diferentes encabezamientos. Entonces supongamos que tengo otro rubro que dice Mundo. Y en este caso, si vuelvo aquí y refresco, voy a conseguir el mismo del mismo color para ambos encabezamientos. No obstante, una forma de lidiar con eso es creando ideas diferentes, separando ideas para todos y cada uno de los componentes, luego usar estas ideas en nuestro archivo CSS. Entonces supongamos que quiero que esto se adquiera y el segundo del color rojo, en este caso, crearé aquí un ID. Entonces esto es primero y esto es segundo. Ahora si vuelvo atrás y puedo especificar que para el ID primero, necesito que el color de fondo sea igual para que ocurra. Y por el DNI. Segundo, lo siento, aquí, necesito levantarme, por ejemplo. Yo escribí primero antes. Por lo que este color de fondo para ser igual a. Volvamos atrás y ejecutemos esto. Voy a conseguir el primero con el color de fondo de Alcoa y el segundo con el color de fondo del rojo. Para que como pueden ver, podemos usar ideas. Y F, Por ejemplo, quiero que ambos sean aqua. Simplemente puedo decir que quiero que uno sea igual a aqua. No obstante, si también tengo algunos otros encabezamientos, y quiero sólo estos dos fondo-color de acuática y simplemente añadir aquí. El segundo. Y por supuesto, necesito agregar el hashtag. Ahora eliminemos esto, retrocedamos y digamos que aquí tengo el color rojo. No obstante, ahora corro esto, voy a conseguir acuífero ambos con ellos ya que se prioriza
el ID sobre el tipo de los componentes. Entonces en primer lugar, tenemos el id, después tenemos el tipo. Ahora bien, si también tengo otro rumbo aquí. Entonces supongamos que tengo un encabezamiento dentro después de nuestro párrafo y eso dice el final. Y no especificé ninguna idea para la venta. Y si sigo adelante y corro, voy a obtener el color de fondo predeterminado de los amigos, ya que especificé que para cada ID, para cada encabezado, se debe leer el color de fondo a menos que tenga primero o segundo. Y en este caso el color de fondo será una cita. Ahora también tenemos algo que se llama clase. Y en este caso, cada vez que creamos una clase, es similar a la idea, pero generalmente se usa para más de un componente. Y en este caso, déjame solo usarlo para supongamos que tengo una p y quiero especificar la clase para ser igual a colores. Y en este caso, si quiero acceder a este párrafo y a mi CSS, puedo usar el operador de puntos y seguido la clase y el nombre del reloj de arena es coloreado y decir, déjame revisar sus colores. Y por supuesto puedo cambiar el color de fondo como de costumbre. Por lo que el color de fondo sería igual a C verde, vamos a ver. Y de vuelta Ramdas, voy a cambiar el color de fondo usando la clase. Por lo que podemos usar vidrio o ID o incluso usar todo el componente solo llamándolo. Por ejemplo, agregando 11 cada uno a responder. Entonces esto fue solo una idea general sobre nuestro archivo CSS. Y este archivo podemos agregar cualquier cosa que queramos concerniente a este tiempo de nuestros componentes. Y en este caso, podemos simplificar las cosas en nuestro código HTML. Ya que aquí vamos a escribir el grueso de nuestro código, no
queremos agregar el estilo y hacerlos más complicados y describir. Podemos agregarlos y en realidad podemos crearlos en nuestro archivo CSS y simplemente vincularlos usando esta hoja de estilo de relación de link. Y hiper referencia debe ser nuestro archivo que CSS. Y esto es básicamente para, este video, es solo un video introductorio de cómo vincular nuestro archivo, nuestro archivo CSS, a nuestro archivo HTML. Y como
dijimos, podemos hacer tantas cosas. Estamos con nuestro archivo CSS, pero por ahora nos quedaremos con esto. Entonces nos vemos en el siguiente video.
15. Tipos de entrada: Ahora hablemos de los tipos de MBA. Entonces supongamos que queremos un nombre del usuario. Y en este caso, necesitamos una caja donde el usuario pueda colocar o agregar su nombre. Y en este caso, si queremos crear esta caja, necesitamos la etiqueta de formulario. Entonces si escribo formado aquí y presiono Entrar, sucederá
un formulario con una acción. Y veremos qué podemos hacer con él en un minuto. Pero por ahora, la acción no será nada. Simplemente vamos a ingresar nuestro nombre y dar click en el cuadro. O el consultor si desea crear una entrada cuatro subredes. Entonces permítanme demostrar esta forma. Entonces, en primer lugar, necesitamos crear nuestra etiqueta. Y en este caso, permítanme nombrar nombre. Entonces este es el FirstName y dentro de mi etiqueta por Dr. First Name. Y luego después de crear nuestra etiqueta, necesitamos crear nuestro insumo. Por lo que ahora esta entrada será de tipo texto. Y por supuesto, déjame probarlo, mi insumo aquí. Y déjame solo crear una identificación para más adelante. Entonces la idea será, así que este es FirstName, por lo que una ruta de acceso de imagen. Y por supuesto puedo crear un objetivo para mi insumo. Y en este caso, también
lo nombro pathname. Ahora si quiero saltar la línea como de costumbre, podemos usar DBR solo para saltar línea. Ahora, déjame abrir esto y ver qué pasó aquí. Entonces si creamos esto, vamos a conseguir nuestro FirstName. Esto se retrasa con recién creado y seguido de nuestra aportación. Aquí podemos agregar algo. Por ejemplo, agrego Hadi. Ahora no pasará nada porque no agregamos una acción. Y no vamos a añadir una acción en este video, ya que apenas estamos aprendiendo sobre cómo crear nuestros insumos y cómo peinarlos. Ahora volvamos aquí a nuestro código y vamos a añadir otra etiqueta. En este caso, permítanme simplemente saltar una línea aquí también para verlo mejor. Y por supuesto necesito una etiqueta, nombre y apellido, así que nombre L. Y luego necesito ingresar el apellido. Por supuesto, la entrada será de tipo texto también llamado el ID para ser igual a lname. Y entonces por supuesto, el nombre también se elegirá para ser el mismo que el DNI. Y por supuesto, salto line, retrocede y refresca. Y como podemos ver, ahora conseguimos FirstName seguido de sus marcas, y apellido seguido de Sparks. Ahora ya que aquí no agregué. Se, acaba de agregar y refrescar. Por lo que podemos ver que ahora tenemos dos cajas. Tenemos dos insumos. Podemos añadir nuestro nombre y apellido. Y en este caso, podríamos querer agregar el fondo o entrada enviar. Y en este caso, cada vez que presionemos sobre someter, nos llevará, nos llevará a otro lugar. Ahora, como dijimos en este video, sólo vamos a discutir cómo crear estos insumos. Entonces si vuelvo aquí, puedo crear otra entrada. No obstante, esta vez el tipo no es texto. Tenemos un HTML sí presentó y por supuesto, el nombre devalúa, lo siento. Puedo agregar un devoto para ser Presentar. Ahora si vuelvo atrás y refresco, puedo ver que tengo aquí la entrada enviar. Por lo que cada vez
que presione la presentación, me llevará a otro lugar. Por ejemplo, podríamos querer agregar este nombre y apellido juntos y en una palabra, en una frase, para luego simplemente rentarlo al usuario. Por ejemplo, digamos bienvenidos. Digamos que entro 30 y unidades. En este caso, cada vez que presione someter, generará una carta de bienvenida diciendo bienvenida tenía años. Entonces este es un ejemplo de cómo podemos usar esto. No obstante, necesitamos agregar la acción de la forma antigua. Y por ahora, nos quedaremos creando estos. Ahora, supongamos que tenemos un nombre de usuario y una contraseña. Y en este caso, queremos que el usuario introduzca su contraseña como campo de contraseña. Por lo que sólo podemos pedirle que introduzca su contraseña como texto. Ya que la contraseña debe ser el nazismo. Y para ello, podemos crear etiqueta al principio, y esta etiqueta será nuestro nombre de usuario. Y luego pregunte el nombre de usuario. Y por supuesto, sumar nuestro insumo. Dentro de nuestra entrada, tenemos el tipo a gravar ya que estamos agregando el nombre de usuario al principio. Y si les pedí antagonista un texto, necesito pedirle que introduzca su contraseña ahora. Por lo que ahora la etiqueta será tilo. Déjame sólo una imagen B y contraseña. Entonces por supuesto, debería agregar la entrada y el tiempo podría ser contraseña. Ahora, si vuelvo aquí y refresco, ver que tenemos nombre de usuario y contraseña. No obstante, puedo escribir aquí mi nombre de usuario y contraseña serán así. Entonces tenemos pantalla negra, podemos ver lo que estoy escribiendo ahora. Entonces esto es básicamente para la contraseña, y así es como podemos crear el campo de contraseña. Entonces como podemos ver, está escrito como círculos negros. Ahora, pasemos a otro tipo de entrada, y este es el tipo de radio. Y en este caso, por ejemplo, tengo tres tipos. Digamos que quiero pedir el género. En este caso, puedo tipear masculino, femenino, u otro. Entonces para hacer eso, déjame volver. Y dentro de nuestra forma, podemos crear nuestra entrada para ser radial en lugar de texto. Y entonces por supuesto, puedo añadir nuestra etiqueta. Por lo que la etiqueta será su nombre, it Correo por ejemplo. Y pregunto si se trata de un varón, entonces salta alineado. Y por supuesto, la amplitud será una radio de tiempo más. Y déjame simplemente crear nuestra mano de obra. Por lo que la etiqueta será que hizo en este caso femenino y luego saltó la línea. Y por supuesto, también puedo agregar la entrada 11 tiempo. Y en este caso, la entrada también será de tipo radio. Y luego tenemos nuestra etiqueta. Por lo que la etiqueta será ahora otra. Y podemos escribir en su año. Ahora si vuelvo a mi navegador aquí, y, y así podemos ver que tenemos masculino, femenino u otro, y puedo elegir uno o más. Y en este caso puedo preguntar antes de crear este cuatro, puedo preguntar uno, digamos tres años. ¿ Y cuál es tu género? Y luego después de eso, déjame deprimirme. Y como podemos ver, podemos elegir de esta lista. Por lo que podemos elegir ya sea masculino, femenino, u otro. Y como antes, desde luego puedo agregar
la entrada de envío para poder crear mi entrada para que se presente en este caso. Y si vuelvo refresco, podemos ver que tenemos presentado. Y si presento presentarme me debería llevar o genera algo más. Ahora, pasemos a otro tipo de entrada. Y en este caso serán las casillas de verificación. Por lo que la casilla de verificación tipo de entrada, definida como el nombre indica una casilla de verificación. Entonces a las redes P8, permítanme simplemente borrar esto. Y en primer lugar, creo mi insumo. Y el tipo podría ser, como dijimos, chequear bugs. Y por supuesto, déjame trabajar. Por ejemplo, hablemos de laptops. Entonces L1, así salto será y la entrada es segunda entrada también será de tipo checkbox y la etiqueta será L2. En este caso, podemos agregar, por ejemplo, matemáticas. Y si sigo adelante ahora y creo nuestro insumo enviar. Entonces esto es de tipo enviar y déjame volver atrás, refrescar. Y como pueden ver, tenemos a HB NMAC. Perdón, esta es la pregunta para el otro. Para el, como dijimos, los botones de radio. Pero por ahora dejame solo borrar esto y volvamos, refrescar. Entonces como podemos ver, tenemos a HB y Mac. Y me olvidé de agregar algunas líneas aquí. Por lo que podemos agregar una línea aquí. Y aquí. Ahora vuelve atrás, refresca. Podemos ver que tenemos HB, Matt y presentarnos, por lo que podemos elegir uno o más. Y luego cada vez que presionamos someter, lo que nos llevará como reset a otro lugar. Ahora, volvamos aquí y discutamos el botón de entrada y cómo podemos trabajar con él. Entonces si eliminamos esto dentro de nuestro formulario, siempre que queramos crear put
button, button, realmente no necesitamos esta fórmula. Por lo que puedo crear la entrada, y esto será de tipo botón. Y puedo elegir que onclick Alertar algo. Por lo que en este caso, cada vez que hacemos click en
esto, alertará hola. Y ahora vuelvo aquí. Y como pueden ver, tenemos algo, perdón, esto es lo que deberíamos llegar y ahora el valor será, no
puedo subir, por ejemplo, un click me. Entonces haz click conmigo. Y ahora volvamos atrás y ejecutemos esto. Así que refresca. Y como pueden ver, tenemos el botón Click me. Y cada vez que lo presiono para generar esto, por ejemplo, esta alerta. Y dice hola. Ahora si presiono OK, puedo volver atrás. Y siempre que lo escriba o lo presione, generará esta alerta diciendo que esta página dice, y el mensaje que voy a enviar al usuario. Volvamos a nuestro código y hablemos del campo numérico. Y este tipo de entrada es número y define el campo de entrada numérico. Por lo que podemos usar los atributos mínimo y máximo para agregar restricción numérica y el campo de entrada. Entonces, por ejemplo, si quiero que el usuario agregue una cantidad, por ejemplo, y quizá quiera especificarla entre 110. Puedo usar los atributos min y max para asegurarme de que el usuario esté agregando el valor correcto o el valor dentro del dominio específico. Por lo que ahora vamos a crear nuestro teléfono. Entonces aquí tenemos cuatro. Dentro de este cono. Podemos crear nuestra etiqueta. Y esta etiqueta será yo limite cantidad por ahora. Y por supuesto, nuestra cantidad. Será entre, como dijimos, 110. Y entonces puedo crear nuestro insumo. El insumo será de tipo número, como dijimos. Y puedo usar el minmax. Por lo que el mínimo será igual a uno y el máximo será igual a 210 en este caso. Ahora, permítanme simplemente crear nuestro tipo de entrada enviar y saltar alineados aquí. Ahora vuelve atrás, refresca. Y como podemos ver, tenemos cantidad entre 110. Entonces podemos usar estos cursores o y como podemos ver, si llego a diez, ya no
va a cambiar desde nuestro sello numérico máximo. Ahora si presento Enviado debería llevarme a otro lugar. No obstante, entonces ahora no agregamos nuestro teléfono, recuerda. Pero por ahora por ejemplo, si le pido 44 y presiono sobre someter, generará este dicho de que el valor debe ser menor o igual a diez. Y si elijo menos cinco y presento presentado a decir que el valor debe ser mayor o igual a uno. Por lo que esto es básicamente para el campo numérica. Y como podemos ver, tenemos tantos tipos de entrada y discutiremos algunos de ellos más adelante también en el siguiente video.
16. Tipos de entrada 2 2: Ahora continuemos nuestra discusión sobre cantidad o tipo de entrada numérica. Y en este caso, dijimos que podemos sumar lo mínimo y lo máximo. No obstante, también podemos agregar esta pestaña y el valor inicial. Entonces, por ejemplo, si vuelvo a mi código y después de agregar el mínimo y máximo, déjame agregar la máxima a ser cazada. El mínimo será 0. Y puedo añadir esta etiqueta en este caso. Entonces el paso, por ejemplo, elijo entrar al paso de diez. En este caso, el usuario estará obligado a ingresar ya sea 0102030 y así sucesivamente hasta que alcance el número 100, que es el máximo. Y también puedo agregar el valor y w, por ejemplo, sería igual a 20 en este caso. Entonces si vuelvo aquí, refresca, así que el valor inicial será de 20 sobre puedo agregar diez y no pasará nada. Volverá a 20. Si agrego 30, digamos que también volverá a 20. Y por supuesto, si agrego un 150, dirá
que el valor debe ser menor o igual a 100. Por lo que como podemos ver, aún se aplican lo mínimo y lo máximo. No obstante, el valor siempre será igual a 20. Y en este caso, permítanme simplemente borrar este valor y seguir con el tamaño del paso. Y volvamos y frescos. Aquí no tenemos nada. No obstante, si entro cuatro, por favor introduzca un valor válido. El valor de los dos más cercano de los valores agregados son 010. Entonces como dijimos, elegimos el tamaño del paso para ser igual a diez. Y en este caso debemos apegarnos a elegir algo que sea múltiplo de benzo. Si elijo diez, es correcto. Cuando t también es correcta, y así sucesivamente hasta llegar a los 100. Y también será correcto. Entonces esto es todo para los pasos numéricos. Ahora pasemos a un campo de fecha. Y por ejemplo, si quiero pedirle al usuario que ingrese su cumpleaños, puedo usar el tipo de fecha de cumpleaños en este caso. Entonces si vuelvo atrás y elimino esto para poder crear la etiqueta al principio. El testamento sería de tipo, digámoslo. Cumpleaños es en este caso. Y voy a añadir cumpleaños. Y por supuesto necesito crear mi insumo. No obstante, el tipo será, en este caso, fecha, y puedo saltar alineado y crear mi entrada enviar como de costumbre. Y ahora volvamos a nuestro navegador, actualicemos. Y como puedes ver, tenemos el cumpleaños y seguido del tipo de fecha. Y necesito entrar aquí a la fecha y mes y por supuesto, al año, digamos a 1000 en este caso. Y si presiono en
Submit, debería generar algo. Y ahora supongamos que queremos agregar algunas restricciones. Y podemos sumar el mínimo y máximo. Por ejemplo, si vuelvo a mi código y dentro de la etiqueta, digamos la etiqueta aquí. Puedo añadir el cumpleaños. No obstante, le puedo pedir que entre una fecha antes, por ejemplo, poof antes de 2 mil. Y por supuesto, en mi tipo de entrada, el máximo estará aquí. Por lo que max será igual a, digamos 199. Y por supuesto puedo añadir el 1212. Claro, lo siento, E, podemos sumar 30. Y volvamos a nuestro código. Y como podemos ver, hasta que lo hice antes de 2 mil. Entonces si agrego 1000 aquí y 7572001, haga clic en Enviar. El valor debe ser 3012 o anterior, 11999 o anterior. Ahora, supongamos que quiero entrar una fecha después de los 2 mil. Por lo que en este caso, puedo pedirle al usuario que ingrese una fecha posterior a los 2 mil y el mínimo en este caso estará aquí. Por lo que mínimo será igual a, puedo elegir ser 2001 para dejar decir. Y en este caso, volvamos a nuestro navegador y veamos qué pasó. Entonces ahora si entro qué, 1999 presentar ofertas entrelazadas el campo. Ok, lo siento. Aquí tenemos que añadir algo, digamos por phi. Y como podemos ver, valor debe ser la fecha específica a cien, diez o. Y en este caso, acabemos de cambiar este año 2001. Y debería funcionar correctamente y generar o tomador nos lleva a otra página. Y esto es básicamente para la restricción del campo de fecha. Ahora, supongamos que queremos mostrar un color. Y en este caso podemos usar el color tipo de entrada. Y volvamos a nuestro código como de costumbre. Dentro de nuestros cuatro. Vamos a crear nuestra etiqueta. Y digamos que para esta etiqueta estará usando el color. Y démosle un nombre, seleccione su color. Y en este caso, el usuario debe seleccionar su color. Y por supuesto el tipo de entrada será de color. Y permítanme simplemente crear nuestro insumo enviar. Entonces Enviar aquí, y luego volver, refrescar. Y como podemos ver, hemos seleccionado el color y el negro es el predeterminado. No obstante, podemos cambiar esto y nuestro código y lado, nuestro tipo de entrada. Podemos agregar nuestro valor para ser igual a un color específico. Y este es el código para ratas o teoría ff 0-0. 0. Ahora volvamos a nuestro navegador y actualicemos. Y como podemos ver ahora, el color que está frente a nosotros es el rojo. Si hago click en
él, generará esta página o esta casilla. Y puedo elegir el color que quiera. Y luego después de eso puedo presentarlo como de costumbre. Y esto es todo para el recolector de color. Ahora también podemos crear campo de arreglos. Y en este ejemplo, campo de
derange se mostrará como un control de deslizador. Entonces, por ejemplo, podemos pagar algo similar al volumen aquí. Por lo que dentro de nuestro volumen podemos ver que podemos movernos a la derecha o a la izquierda y aumentar o disminuir nuestro volumen. Y en realidad podemos crear esto usando HTML. Y así volvamos a nuestro código aquí y empecemos con él. Entonces en lugar de escribir el color etiquetado, crearé nuestra etiqueta y lo nombraré volumen. Y luego vamos a sumar el volumen aquí. Por lo que este es el volumen entre 0. Y por supuesto, necesito agregar mi insumo. En este caso, la entrada será de tipo rango, y puedo agregar el mínimo y máximo como de costumbre. Por lo que los hombres serán iguales a 0 y el máximo será igual a un 100. Y en este caso, así es. Vamos a crear nuestro, Por
ejemplo, el botón de enviar. Entonces, presentar y luego volver, refrescar. Y como pueden ver, ahora tenemos nuestro volumen entre 0 y por defecto está en el medio a los 15. Ahora puedo desplazarme de ida y vuelta y elegir el volumen que quiero y luego enviarlo. Entonces esto es todo para el campo de rango. También podemos agregar un campo de monje, hablando de campos. Permite al usuario seleccionar un mes y el año. Y el mes no es compatible con Firefox Safari o Internet Explorer 11 o anterior. Así que asegúrate de tener algo más y estás usando, por ejemplo, aquí, Google Chrome. Y volvamos a nuestro código aquí. Entonces para hacer eso, simplemente
podemos crear nuestra etiqueta para ser un cumpleaños. Para que podamos elegir el mes y el año. Entonces aquí, cumpleaños, tenemos mes y año. Y por supuesto, nuestro volumen será, vamos a cambiarlo al mes de cumpleaños. Por lo que simplemente escribo demanda. Y ahora podemos crear nuestro insumo. Por lo que la entrada sería de tipo mes. Y por supuesto, puedo agregar otro insumo para presentar. Por lo que esto se somete y ha saltado a otra línea. Vuelve a nuestro código, refresca. Y como podemos ver aquí, podemos elegir mes específico, enero, junio, julio y febrero. Puedo elegir lo que quiera. Y el año. 2 mil. Y esto es básicamente para el mes y el año y cómo podemos elegir un mes y año específico dentro de nuestro campo de mes. Ahora, pasemos a otros índices importantes para mostrar un control de entrada débil. Y esta semana de entrada tampoco es compatible con Firefox, Safari e Internet Explorer 11 o anterior. Para asegurarte de que si quieres usar esta entrada, necesitas tener algo más instalado. Ahora volvamos a nuestro código y creamos nuestra etiqueta. En este caso, permítanme simplemente borrar esto. Y la etiqueta será débil y seleccionará débil, para
luego crear nuestro insumo. Y en este caso nuestro insumo será de tipo débil. Y ahora si vuelvo a mi navegador, refresca, así que la semana será la tres. Y el, puedo elegir el año que quiero desde aquí. Y luego por supuesto, dar click en enviar. Y también puedo usar el año calendario. Para que como puedes ver, puedes elegir cualquier débil y cualquier año fuimos de nuestro calendario. Y si quiero elegir esta semana, simplemente
puedo dar click en esto y me va a generar mi semana. Ahora vamos a otro ejemplo y a crear un control de entrada de tiempo. Por lo que esta hora nos permite seleccionar una hora sin zona horaria. Y en realidad, esta vez no es compatible con Safari o Internet Explorer 12 o anterior. Entonces volvamos a nuestro código. Y dentro de nuestra firma, vamos a crear nuestra etiqueta. Es decir, el tiempo y los límites son simplemente nombre a tiempo y, y pedir al usuario que seleccione una hora. Y entonces podemos crear nuestro insumo y será de tipo tiempo. Y por supuesto, el botón de enviar. Y ahora vuelve atrás, refresca. Y como pueden ver ahora tenemos nuestro tiempo. Entonces para cuatro y siempre podemos tiempo desde aquí y podemos elegir lo que queramos. Entonces esto es básicamente por el tiempo y poner el control. Ahora, pasemos al campo de correo electrónico. Entonces si queremos crear un campo de correo electrónico, simplemente
puedo crear la etiqueta como de costumbre. Y esta etiqueta será por un correo electrónico. Y puedo pedirle al usuario que entre como lo hizo. Por lo que ingresa tu correo electrónico. Y por supuesto, necesito crear una entrada de tipo email en este caso. Y luego saltó alineado y finalmente, crea el botón de enviar y vuelve atrás. Entonces como podemos ver ahora tenemos nuestro correo electrónico y si solo escribo algo, dirá
que estos incluyen y agregan en la dirección de correo electrónico. Kdf le falta el anuncio. Por lo que puedo agregar ejemplo a ejemplo, dot com. Y por supuesto si me presenté, funcionará simplemente bien y generará algo más o me llevará a otro lugar. Ahora, lo último que vamos a discutir es el campo de búsqueda. Y en realidad se comporta como un campo de búsqueda regular o un campo de texto. Entonces, para hacerlo, simplemente podemos crear engranajes. Entonces esto es para la búsqueda y búsqueda, Google, digamos. Y luego después de eso puedo crear mi entrada de tipo search y ahora saltar alineado. Si retrocedemos y
refrescamos, vamos a conseguir la búsqueda irá. Puedo ingresar lo que quiera y luego
enviarme a buscarlo o hacer lo que quiera con él. Y esto es todo para los tipos de entrada. Tenemos tantos tipos de entrada y puedes buscarlos. Y esto es todo para este video. Entonces nos vemos en el siguiente.
17. PROYECTO: En cuanto a la parte del proyecto, vas a crear un formulario de viaje. Y este formulario, le vas a pedir al usuario que introduzca su nombre y apellido, como se puede ver aquí. Entonces le vas a pedir que hable un poco de sí mismo. Después exponer la razón ofrece cable, por ejemplo, visitar
a familiares o amigos, ya sea para estudiar en el extranjero o para hacer trabajo Ferrante o trabajo a largo plazo. Y también puedes agregar otros Ver No lo agregué, pero siempre puedes agregar otros. Puede haber otra razón. Y por supuesto el destino. Entonces aquí acabo de añadir cinco destinos, Francia, Italia, América, Gran Bretaña, y España. Y luego después de eso, vamos a presionar sobre presentar, y se debe presentar. Entonces esto es todo para este proyecto. Creo que todas las herramientas están disponibles para ti. En los videos anteriores, solo
podemos volver atrás un campo que te perdiste nada. Habíamos aprendido a crear la entrada y a almohadarla. Podemos usar el relleno aquí, y también aprendimos a elegir entre insumos y por supuesto, a presentar. Por lo que todos están disponibles en los videos anteriores. Para que puedas acudir a ellos cuando te apetezca. Y esto no es para este proyecto. Espero que lo disfruten. Y que no te olvides de añadirlo a la sección de proyectos para que pueda mirarlo y darte mis comentarios.
18. Recapitulación: Felicidades por terminar esta clase. Acabas de completar la clase HTML y CSS. Y vamos a hacer un recapitulativo rápido sobre qué cubrimos? En primer lugar, hablamos de algunos conceptos básicos y sintaxis. Después pasamos a estilizar y formatear. Y también hablamos de tablas, listas, e imágenes. Y por supuesto, aprendimos a vincular nuestro CSS a nuestro archivo HTML. Y esto es todo para esta clase. Espero que haya sido benéfico. Y muchas gracias por inscribirse en esta clase. Y nos vemos pronto.
Hadi Youness, Computer Engineer
