El desarrollador de HTML definitivo: aprende a codificar con HTML

1. Introducción: Hola y bienvenidos al último curso de desarrollador HTML. Mi nombre es Caleb diciendo, y voy a ser tu instructor a lo largo de este curso. Afortunadamente para ti, este curso es de apenas unas horas. Para que no tengas que escuchar mi voz por mucho tiempo. Voy a repasar rápidamente lo que este curso es un cinturón. En qué te vas a meter, cómo funciona y cómo sacarle el máximo partido. Y te voy a dar un poco de información sobre quién soy. Primero y ante todo otra vez. Mi nombre es Caleb Tallinn. Soy un desarrollador web senior full stack. Nació en 1989 y a los 10 años. En 1999 hice mi primer sitio web por el tiempo. Tenía 14 años. Estaba haciendo trabajo freelance para la gente. Los siguientes nueve años que pasé haciendo principalmente trabajo freelance. Si vi servicio en Internet que me gustó que quería usar. Pero pensé que podría hacerlo mejor. No pude hacerlo mejor. Podría ser más valioso de o de personas a las que no lo recrearía. Podía hacer todo eso antes de graduarme de la preparatoria. No sólo hice una cantidad decente de divertidos, sino que creé mucho más de 1000 sitios web en mi tiempo. Poco después de eso, pensé que tal vez iba a intensificar mi juego y empecé una empresa. Esa empresa tenía como un año y medio cuando la vendí. Desde entonces, he renunciado como CEO, y he tomado un más de un jefe de tecnología de C T o rol. Eso significa que estoy a cargo de la tecnología. Los servidores, ese equipo de desarrollo, la experiencia del usuario, la interfaz de usuario, todo lo que toca el código. Tengo un poco que ver con la empresa. Deja que funcione para en 2015 entre abril y diciembre, hizo casi 900.000 dólares. Yo era jefe de tecnología de esa empresa, y el servicio primario era el software que creamos para la gente. Ahora eso es un poquito sobre mí. Hablemos de este curso. Este curso, como ustedes saben, se divide en dos módulos primarios. Ahí está el módulo básico, que te facilita el HTML, te familiariza con él y algunos de los conceptos detrás de él. Y luego hay más rastro de edad avanzada. Ese es el módulo número dos, donde te encontrarás con piezas más avanzadas de HTML, incluyendo mucho HTML cinco y X html, y aprenderás de todo eso en este curso. Al final de cada módulo hay un quiz. El primer quiz de módulo es alrededor de 70 preguntas, y si terminamos agregando más videos al primer módulo, habrá más preguntas en el primer módulo. Cuestionario. Módulo de Tesis tiene unos cuestionarios mucho más extensos alrededor de 100 20 preguntas, y cada quiz sólo pasa por encima del módulo actual. Entonces, en total, hay casi 200 preguntas en las que te van a probar al final de casi todos los videos. También hay una tarea. Esa tarea va a ser o algo muy sencillo, como justo fuera de los elementos, un poco de práctica con los atributos, así sucesivamente, o la tarea podría ser crear página entera, crear forma completa, enviar el formulario, aprendió la teoría detrás de él, y eso todo depende de qué se trata el video y de qué se trataron los videos anteriores. Ahora, para sacar el máximo provecho de este curso, vas a querer ver el video prestar mucha atención a lo que está pasando. Posiblemente tome notas si le gusta tomar notas, le sugeriría tomar notas y hacer la tarea al final de cada video. Aunque estés familiarizado con ello, solo haz la tarea Un poco más. La práctica nunca lastimó a nadie. Por lo general, las tareas son bastante cortas, por lo que no te tardarán mucho si ya lo conoces. Ahora. Algo que habrás notado de este curso en particular que no has visto en muchos otros cursos es esto puramente HTML, donde muchos otros cursos son HTML y CSS o HTML, CSS y JavaScript y simplemente demasiado. Este es un curso altamente especializado, y para el final de este curso serás un profesional. A la hora de escribir HTML, no serás mediocre. No serás aceptable o bien, serás un profesional a la hora de escribir HTML. En mi opinión, sacarás el máximo provecho de este curso pasando por cada video uno por uno, haciendo la tarea, haciendo la tarea, haciendo tus cuestionarios y simplemente practicando. Como probablemente has adivinado, este curso es bastante compacto. No hay pelusa mágica. No hay mucho silencio muerto. Se pone directo al grano. La idea detrás de hacer un curso tan compacto es que cuanto menos tiempo pases viendo videos, más tiempo puedes pasar En realidad practicando lo que has aprendido con eso dicho, quiero enviar una enorme bienvenida al HTML definitivo Curso de desarrollador y vamos a convertirte en un desarrollador profesional. 2. ¿Qué es HTML?: ¿ Qué es HTML? HTML significa lenguaje de marcado de hipertexto. Es la estructura detrás de cada página Web en la que alguna vez has estado, y es responsable de los párrafos, los videos, las imágenes, los forints. Las negritas cursivas subrayan todo eso. Es responsable de cada parte que veas en una página. Ahora no tiene nada que ver con el estilo real, sino más de la plantilla ing. Entonces si ves una columna a la izquierda de la página de la derecha de la página, quizá las columnas Arnold. Pero hay una barra de navegación en la parte superior de la página, eso es todo. HTML. Es el esqueleto de cada página Web. 3. Editores: para escribir HTML y necesitas lo que se llama editor y editor HTML puede ser un programa muy básico , como No pad para la PC o text at it for the Mac. Pero hay otros programas por ahí un texto tan sublime, que se puede ver aquí. Ve a sublime tex dot com on, y puedes conseguir una copia de eso. Alternativamente, puedes usar no pad plus, que es simplemente no pad dash más dash plus dot org. Pero al final, no necesitas escribir ningún HTML con un editor avanzado, simplemente puedes usar un editor de texto básico, y eso funcionará perfectamente bien. Aquí te damos un ejemplo de no pad plus y vamos a escribir algo de HTML en este momento. Nos vamos a saltear muchas de las partes importantes del HTML, y les voy a mostrar una rápida demostración de cómo es el HTML. Entonces aquí hay un párrafo y te darás cuenta cuando escriba slash p y hablaremos de elementos en una futura lección. Solo te estoy dando una rápida demostración aquí. No pad plus plus intenta llenarme. Un buen editor intentará llenarte a ti y a sus editores por ahí que te ayudarán drásticamente a la hora de rellenar elementos, cerrar etiquetas de elementos para ti y simplemente ayudarte a programar tu sitio web aún más rápido. Entonces para esto me está diciendo que es un párrafo, así que acabo de cerrar la etiqueta. Cada editor es un poco diferente. Todos tienen sus pros y sus contras, y en última instancia depende de ti qué editor quieres usar. Pero, ¿por qué estaban escribiendo HTML? No necesitas un editor muy elegante. Solo necesitas algo básico que pueda escribir un archivo de texto recto como este y guardarlo como un html de puntos. Entonces voy a salvarnos igual que página one dot html, la parte inferior mrs dot txt click guardar. Y ahora puedo abrir esto en mi navegador. Es ahora si encuentro dónde se guardó el archivo, haga clic derecho y abra con Escoja su elección de navegador. Firefox Chrome Internet Explorer. También tengo operas Safari instaladas aquí. Si uso Google Chrome, entonces aquí hay un ejemplo de cómo va a salir esto, dice Aquí hay un párrafo y sólo voy a copiar esto realmente rápido. Vuelvo a guardar el archivo Y si refresco mi página, aquí hay un segundo párrafo. Ya sabes, si hay un salto de línea significativo, hay una diferencia entre las dos líneas aquí. Eso es lo que es un párrafo, y vamos a meternos más en párrafos y todos estos elementos diferentes de lo que realmente significa todo esto en el futuro. Pero ahora mismo, se quiere mostrarte lo fácil que puedes escribir HTML con literalmente cualquier editor. Entonces, por ahora, lo que me gustaría que hicieras es encontrar un editor que te pudiera gustar, ya sea impuesto sublime, sin pad plus texto agregado o incluso si solo quieres usar ningún pad en Microsoft solo . Tu tarea para este video es encontrar un editor con el que sientas que puedes trabajar de nuevo. Este ejemplo. Acabo de usar no pad plus plus, es muy básico, hace el trabajo, pero no sientas que tengas que usar nada que estoy usando en este momento. 4. Navegadores: un navegador es cómo ves Internet es cómo ves los sitios web, las páginas web te dicen, Explora Facebook y Google. Es probablemente como estás viendo este video en este momento, y hay decenas, si no cientos, de diferentes navegadores por ahí. Pero en realidad, hay seis navegadores primarios que van de izquierda a derecha. Tenemos Microsoft Internet Explorer, Microsoft nueva versión de Internet Explorer llamada Edge. Después tenemos Mozilla Firefox, Google Chrome, Apple Safari y ópera. Ahora, con mucho el navegador más popular en Internet es Google Chrome. El segundo lugar tiende a ser despedido. Fox El tercer lugar tiende a ser safari, luego Internet Explorer. Un filo en ópera ¿sabes que esos porcentajes son tan bajos? Realmente no importa en este momento Ahora, Edge podría ser más popular en el futuro. Es relativamente nuevo, salió con Windows 10 pero hoy cerca de la mitad de todos en el mundo utiliza Google Chrome . Ahora, como desarrollador Web, el navegador sí importa. Cada navegador gestiona HTML, CSS y JavaScript un poco diferente. Cada uno tiene su propio conjunto de reglas, que quieren cumplir, y tiende a haber una norma detrás de ellas, pero las normas son un poco más antiguas. Por ejemplo, si quisieras hacer algo en negrita, utilizarías la misma etiqueta HTML negrita y todos los navegadores, porque ese es un elemento más antiguo. Pero a partir de ahora, si quisieras crear un lienzo y ese es un elemento de cinco HTML del que hablará en el futuro, las versiones antiguas de estos navegadores no manejarán eso. Por lo que siempre quieres tener actualizado tu navegador. Como desarrollador Web, garantizarás que te encuentres con un problema donde uno de tus usuarios o uno de tus clientes de pago no puedes usar tu sitio web porque algo no está funcionando. Lo más probable es que JavaScript esté apagado o estén usando Internet Explorer six en lugar de Microsoft Edge o Internet Explorer. Sea cual sea la última versión, quizá estén usando una laptop muy antigua, y está ejecutando una versión antigua de safari. Bueno, la diferencia entre, por ejemplo, Google Chrome one y Google Chrome 42 es significativa, y a medida que la tecnología evoluciona, el navegador también evoluciona. Y a medida que evoluciona el navegador, eso significa que tenemos acceso a mejores funciones, mejores características, mejores animaciones y Morrell. A las mentas se estandarizan, así que sólo tenga en cuenta que avanzar. Eventualmente te va a pasar este problema. pasa a cada uno de nosotros y que el navegador que alguien está usando juega un papel importante. mayoría de los desarrolladores no les gusta construir para Internet Explorer porque a Internet Explorer le gusta jugar con reglas diferentes que a todos los demás, mientras que a todos los demás se llevan bien hasta cierto punto. Entonces cuando estás construyendo un sitio web, ya sea usando solo HTML o una serie de idiomas diferentes, vas a querer probar tus páginas en todos los diferentes navegadores que puedes disparar para seis de cada seis navegadores. Pon a prueba tu sitio Web en Internet Explorer, Microsoft Edge, Mozilla Firefox, Google Chrome Safari así como ópera y ve si funciona de la manera que querías. vez en cuando, tropezarás con elemento particular que no funciona de la manera que se supone que debe, y eso se convierte en un gran problema. Entonces tendrás que solucionar eso si construyes un sitio o servicio o una aplicación, y funciona en los seis navegadores, más probable es que cuando alguien se te acerca y te diga: Oye, Oye, tu sitio no funciona para yo, probablemente sea por usar una versión antigua fuera de su navegador o tienen JavaScript apagado. Hablaremos más de JavaScript en el futuro, pero en este momento solo nos vamos a quedar con HTML y a ver cualquier HTML. Necesitamos uno de estos seis navegadores. Ahora prefiero el cromo. Mucha gente prefiere Firefox. Muchos usuarios de Mac se quedarán con safari. Esos tienden a ser los Tres Grandes en ese orden. Tu tarea para este video es descargar e instalar los seis de estos navegadores. No, dependiendo de tu computadora. Es posible que los 6 no estén disponibles para ti, así que trata de conseguir tantos como puedas como mínimo desnudo. Trata de conseguir Internet Explorer, Firefox, Chrome Safari y ópera. Si no puedes conseguir Microsoft Edge porque estás en un Mac más antiguo o en un sistema de ventanas más antiguo, está bien. Pero descarga e instala tantos como puedas 5. Elementos: Las páginas de correo H E se componen de elementos o a veces también se les conoce como una etiqueta donde tienen una etiqueta de inicio en una etiqueta de final. Inusualmente algún tipo de contenido entre las dos etiquetas. A modo de ejemplo en vivo, vamos a escribir nuestra primera etiqueta aquí, hacer algo de espacio extra aquí para nosotros. Te voy a mostrar cómo funcionan estos. Entonces tenemos etiqueta HTML, y eso va entre el menor que y mayor que los símbolos algún contenido en el medio. Y luego cierras la etiqueta HTML con un menos de una slash. ¿ Te das cuenta de cómo coinciden estos? Pero éste empieza con el menos que etiqueta, y éste empieza con menos que slash tax. Eso significa que ahora lo está cerrando. Este es un elemento donde puede haber id de contenido entre él. Un gran ejemplo de ello sería el elemento de párrafo, los elementos negritos, el elemento cursiva. Todos estos tienen algún tipo de contenido entre él. Entonces si quisiéramos italicizar algo, escribiríamos apertura Eyetech con una etiqueta de cierre I. Ahora tenemos un tipo diferente de elemento también, y es un elemento de autocierre. Estos elementos son un poco diferentes, pero algo así como a lo largo de la misma línea. Hay algunos elementos que no tienen contenido en ellos porque usan lo que se llaman atributos y vamos a cubrir atributos en un futuro muy cercano. Uno de estos ejemplos serían los elementos de imagen. Entonces para este, tendríamos yo m g, que es fuente de imagen SRC. Ponemos sitio web dot com slash imaged j peg ahi y lo cerramos así. Por lo que no hay etiqueta de imagen de slash. Entonces en cambio hemos atacado. Eso se cierra porque no pones ningún contenido dentro de una imagen a excepción de la imagen no, más allá esto podríamos hacer lo que se llama anidación. Podemos poner elementos HTML dentro de otros elementos HTML y esto creará una forma de jerarquía. La forma más fácil de mantener tu jerarquía es a través de la sangría a través de la sangría. Vas a encontrar que todo es muy fácil de entender. Entonces aquí, hagamos un ejemplo. Vamos a abrir un párrafo. Oye, soy un párrafo, y en este párrafo vamos a hacer algo audaz y luego cierro etiqueta de párrafo. Entonces aquí ven, abro el párrafo cerrar un párrafo dentro de él. Tengo texto regular. También tengo otro elemento HTML para hacer esta negrita, Así que esto mostrará un párrafo también. A zona za Bolden. No olvides que se necesita cerrar, aunque es muy importante que si tienes una toma de apertura, tengas una etiqueta de cierre. En el caso de la imagen, tenemos la etiqueta de apertura, la toma de cierre simplemente pasa a ser parte de la etiqueta de apertura original también. Entonces es todo es un elemento. ¿ Dónde está aquí y aquí? Ahí hay una etiqueta de apertura y cierre. Lo último a tener en cuenta aquí es que todas estas etiquetas con minúsculas no tienes que usar HTML en minúsculas. Pero los tipos de documentos más estrictos como X html requieren etiquetas HTML en minúsculas, y eso es una estandarización para todos Ahora, ya sea minúscula o arriba, mayúsculas realmente no importan demasiado en este día y edad. No obstante, seguir con el estándar suele ser el mejor enfoque, sobre todo, vamos a trabajar con otro desarrollador en algún momento. La estandarización de tu vida también te ayuda con los motores de búsqueda. Entonces cuando Google se encuentre a través de tu sitio y busca cierta información, Google va a ver el HTML como lo que hemos escrito aquí. Tu tarea para este video es abrir tu favor, editor, editor, donde no hay pad plus, además sublime no hay impuesto pad en lo que sea que sea. Y bien, sólo un par de etiquetas. Pasamos por encima de las etiquetas negrita y cursiva del párrafo en este video. Entonces solo practica escribir esos. Abre tu etiqueta de párrafo. Ponga algún contenido entre ella una o dos frases y luego ciérrela. Intenta anidarlo también. Abrir un párrafo. Escribe una frase, derecha, una sentencia parcial. Hacer una de las letras en negrita, tal vez hacer un perno de frase completa. Cierra ese perno, un cierre, esa etiqueta de párrafo y luego quiero que guardes ese archivo y lo abras en tu navegador, y puedes ver cómo se ve desde ahí. 6. Hola mundo: cuando empezamos a hablar de programación o codificación de sitios web, esta tiende a ser la primera lección, y la lección suele llamarse Hello World, y vamos a crear una primera página hola mundo ahora mismo con el fin de crear nuestra primera Página HTML. Hay algunas cosas que tenemos que hacer, y no vamos a meternos en demasiadas cosas terriblemente avanzadas en este momento. Simplemente queremos crear una plantilla básica de página HTML. Por lo que nuestro archivo necesita decirle a cualquier navegador que este es un pitch HTML. No es que se trate de una página de texto o PDF que sea una página HTML. Lo primero que hacemos es abrir nuestra página con la etiqueta HTML. Voy a hacer algo de espacio, y lo voy a cerrar al final de ahí. Dos secciones en las que tienes la cabeza puesta. Voy a dejar algo de espacio aquí y voy a cerrar esa etiqueta de encabezado. Y luego está el cuerpo. Se puede pensar en ello así. El jefe es donde va el conocimiento sobre la página. Por lo que su año de título de página hizo una descripciones. Todas esas cosas cubrirán todo esto. Tus títulos tus descripciones. ¿ Alguna imagen para compartir social, como en la gráfica abierta de Facebook? Cubriremos todo este poquito más tarde. Pero lo que queremos en este momento es que queremos crear Ah, hola, World page. Entonces lo primero que vamos a escribir es Hola, mundo. Ahora puedes guardar esto como hola mundo dot html Guardarlo dondequiera que guardaste un para ir y encontrar ese archivo derecho Haz clic en y abre con el navegador que quieras abrirlo con. Yo lo voy a abrir con Google Chrome y como puedes ver, es este Hola mundo. Eso es todo lo que hay a ello. Una vez que hayas llegado al paso, has creado oficialmente tu primera página HTML. Tu tarea para este video es crear la plantilla que he creado para ti en este video . Esencialmente, sólo copia lo que te he dado. Vas a escribir tu etiqueta HTML. Te vas a cerrar, vas a dejar algo de espacio ahí dentro y ness una etiqueta de cabeza y cuerpo dentro de ella. Y dentro de ese cuerpo toma, quieres escribir Hola mundo. Debería verse exactamente igual que mi ejemplo 7. Títulos de página: titular tus páginas HTML tan simple como usar un elemento HTML en particular. Y ese es, por supuesto, el elemento de título en el último video. Pasamos por encima creando una plantilla HTML donde anidamos todo HTML dentro de nuestra etiqueta HTML y dejamos vacío nuestro elemento de cabeza. Esta vez no vamos a hacer eso. Vamos a crear un título, y el título de esta página va a ser hola título mundial. De esta manera podemos ver cuál es realmente el título. Antes de guardar este archivo, te voy a mostrar cómo se ve antes y después de agregar la etiqueta de título. Esto es antes de que tengamos la etiqueta del título dice hola mundo dot html. Es el nombre del archivo que normalmente no es lo que queremos. De hecho, casi cada escenario que no es lo que queremos. En cambio, queremos tener un título real aquí dentro, así que voy a seguir adelante y guardar esto y luego refrescar esta página y dice hola título mundial en la parte superior, donde el contenido de la página se mantiene igual. El título cambió los cambios a título de prueba. Te voy a mostrar que sí cambia una vez más en cuanto presiono refrescar y así es como cambias el título de tu página. Tu tarea para este video es crear un documento hello world y agregarle el título. Una vez que hayas agregado tu título a tu título se puede llamar como quieras, abre ese archivo en tu navegador y observa si el título realmente se cambia. Si el título ha cambiado, has completado la tarea. 8. Doctype: el tipo HTML DOC es lo que técnicamente le dice al navegador que este es un archivo HTML. Antes simplemente dijimos que este elemento aquí nos dice que la página va a ser HTML, y la mayoría de los navegadores pueden resolverlo. No obstante, en algunos casos, eso no es suficiente. En cambio, lo que queremos dio es que queremos agregar un elemento por encima de él al principio, llamado tipo DOC. Ahora empieza con un signo de exclamación, como se puede ver aquí mismo. Espacio HTML. Este es el tipo de documento HTML cinco, y esta es la única excepción a esa regla donde todo su HTML debe ser minúscula. Este debería ser mayúscula la mayoría de los navegadores. Eso no importa tanto, pero de nuevo, es un problema de estandarización. Queremos asegurarnos de que todas las páginas sean iguales. Si más páginas pueden ser leídas por más navegadores exactamente de la misma manera, entonces tu sitio web va a ser visitable tumba o personas de la misma manera en todo el planeta. Ahora, con el doc tipo HTML ahí dentro. Recuerda, ese es el tipo HTML cinco doc. Ese es el nuevo tipo HTML Doc que queremos usar cada vez que técnicamente le dice al navegador que esta no es página html y dentro del elemento HTML es donde va a ir HTML . Iba a hacer un poco de espacio cerca para que trabajemos en el futuro. Esa era una regla general. Todo tu HTML debe estar dentro de este elemento aquí. Tu tarea para este video es agregar en html cinco tipo doc a tu página existente hello world . Si ya no tienes una página hola mundo, adelante y crea una y asegúrate de que tenga el símbolo menos que más un signo de exclamación . Ese signo de exclamación es absolutamente vital. 9. Atributos: atributos html, o simplemente que atribuyen a un elemento en particular. Cada etiqueta HTML o cada elemento HTML tiene atributos diferentes. Que pueda acceder a un atributo es básicamente una forma de proporcionar información adicional sobre un determinado elemento. Siempre se especificarán en la etiqueta de inicio. O, si hay ah, no hay etiqueta de inicio y fin, es solo una etiqueta individual. Se encontrará ahí también, y vienen en pares de valor de nombre. El 1er 1 que queremos ver son los atributos del lenguaje, y éste pertenece con el HTML. Entonces cuando agregamos Lang es igual a y nos guiamos, estamos diciendo que el idioma que son los atributos es igual al inglés. Dáñanos. Eso es inglés americano. Ahora ese, su mayor parte, realmente sólo se usa en el elemento HTML. Pero hay otros atributos disponibles para elementos muy es diferentes, y hay algunos atributos globales también. Ah, atributos globales es un atributo que puedes usar en casi cualquier etiqueta. Entonces si solo agregamos un párrafo aquí, separamos algún contenido y vamos a agregar un párrafo más aquí, esto tiene un título. Ahora este párrafo va a tener un atributo llamado Título es igual a un título de muestra. Si guardamos esto y abrimos esto en su navegador aquí lo vemos como básicamente solo hola Mundo en otro párrafo. Pero el título aparece cuando le colocamos el ratón, dice un título de muestra, y te das cuenta de que muchos sitios web populares como Facebook siguen usando esto. Hay muchos, muchos atributos, y no todos ellos son aplicables a cada elemento. Por ejemplo, cuando agregamos una imagen, la imagen viene con un con y atributos de altura. Podemos agregar un atributo de título global y un altar atribuye la sal es el texto alternativo que se mostrará si la imagen no está disponible y la fuente, que se limita a la imagen o video en algunos casos, irá aquí. Eso lo cerramos y se ve así. Ahora cuando estamos hablando de tamaño es un ancho podría ser de 250 por 250 estos serán píxeles. Pero las cejas por defecto van a buscar píxeles. El título podría ser cualquier título. Podría ser todo título de retorno itividad por imagen faltante, y la fuente sería el sitio web dot com slash imagen dot j. bolsa. Ahora con esto, casi todos los atributos deberían ser minúsculas. Entonces lo que ves con el título de altura Ault fuente cualquier cosa que entre dentro de un elemento abierto debe ser menor. caso siempre debe ser minúscula, y eso va con la estandarización de nuestros elementos también. Por lo que todos los elementos y atributos HTML deben ser minúsculas todo el tiempo. Ahora, cuando estamos viendo atributos porque vienen en pares, como se puede ver con la imagen con es igual a y luego tiene comillas. Ahora eso funciona, o te podemos comillas simples cualquiera de ellas funciona. Pero lo que no funciona es con es igual a 2 50 La mayoría de los navegadores saben cómo descifrar esto, pero si estás usando, Título es igual a esto es un título de muestra, y vamos a envolver elemento aquí, te presentamos el elemento span. Como puedes ver, No pad plus plus no sabe lo que está pasando aquí. No se da cuenta de que esto forma parte de los atributos, porque sus espacios en sus espacios son los separadores entre atributos. Entonces si nos envolvimos entre cotizaciones y citas dobles aire, típicamente el estándar html. Pero de nuevo, ambos están disponibles para que los usen en cualquier momento. Entonces notarás que esto es resaltado azul por ninguna mascota plus de forma automática, y debería funcionar perfectamente bien en eso de ahí dentro. Por ejemplo, vamos a mover esta imagen porque no hay imagen en ese lugar. A partir de ahora, cuando te acerques más tiempo después de HTML, vas a empezar a buscar otro lenguaje llamado hojas de estilo en cascada CSS. Ahora no vamos a cubrir ningún estilo en este momento, sino para darte una idea de cómo sería, tenemos un par de atributos globales más que podemos usar clase siendo uno de ellos otra vez. Esto es para ideas CSS, otra y estilo donde podemos agregar CSS directamente a un atributo. No hay clases de cubierta, ideas y estilos más adelante, pero ahora mismo todo lo que necesitas saber es que un atributo proporciona información adicional a un elemento. Por lo que tu tarea para este video es agregar el atributo title a otro párrafo, así que primero crea un nuevo párrafo. Recuerda, eso es usar la etiqueta P y luego en segundo lugar, agrega el atributo title al elemento de párrafo como Así que adelante y haz eso Once haya hecho . Abre esta página en tu navegador. Coloca el ratón sobre tu texto. Recuerda, lo hicimos con esta pequeña sección aquí. Y cuando ponemos lo máximo sobre ese pequeño pop up shows de la pequeña miniatura en la página , muestra con otro título. Por lo que en el título, atribuir a un nuevo párrafo con oraciones lado del mismo. Ponga el ratón sobre él. Si lo ves, terminaste. 10. Headers: HTML. Encabezados son la forma en que creamos títulos o titulares importantes y HTML pudimos utilizar los encabezados H uno a H seis y en este video vamos a repasar rápidamente cada uno. Echemos un vistazo a la etiqueta de encabezado más importante y ese es el elemento H one. Este es el encabezado más grande disponible. Entonces cuando abro esta página, esto es lo que vemos. Este es el encabezado más grande disponible. Ahora veamos la diferencia entre H uno y en h dos. Este va a decir que soy un encabezado secundario. Te das cuenta de que hay bastante la diferencia y lo mismo puede aplicar con un H tres y esto continúa hasta H seis, ¿recuerdas? Por lo que aquí tenemos 81 h dos h tres. Nos saltamos cuatro y cinco y en h seis, por lo que se puede ver el H seis es bastante pequeño. Ahora veamos un párrafo regular para que veas que los encabezados H seis en realidad son más pequeños que el texto del párrafo normal, y eso es bastante normal que la mayoría de los navegadores lo muestren de esa manera. No hay encabezados son muy importantes porque especifican ciertas piezas de contenido en tu página. Tu H uno es probablemente el más importante para los buscadores de buscadores van a encontrar ese h uno y se va a Va a mirarlo y leerlo, analizarlo, averiguar de qué se trata y darse cuenta de que Hey, sí, se trata del contenido que está en esta página, y es muy relevante. Vamos a utilizar esta información. El buscador optimizado es un tema completamente diferente, pero mi consejo es que nunca use más de una h una etiqueta en una página a menos que absolutamente tenga que hacerlo . El elemento H one debe utilizarse para el título de la página. Si tienes un artículo masivo o una revista donde un blogger posiblemente usó H uno solo para el título de ese bloque, Artículo dos separa tu contenido, posiblemente usando H dos y H tres. Esto ayuda a su Jenn Jones a entender cuál es la información. Ah, qué se trata la información de abajo. Y lo más importante, simplemente no quieres mucho texto. Esta grande en tu página no se ve muy bonita. Por lo que tu tarea para este video es crear una página y crear 81 h dos h tres h cuatro h cinco y H seis elementos. Ponlas en una página y luego abre esa página en tu navegador y verás algo lo largo de la línea de esto. Me salté sobre H extranjero H cinco. Tendrás esos para que puedas ver la diferencia es una vez que has abierto tu página y puedes ver muy claramente las diferencias entre los elementos del encabezado, entonces estás terminado. 11. Saltos de línea: html no es sensible al espacio, y eso se convierte en un problema cuando quieres crear nuevas líneas en tu contenido. Entonces les voy a mostrar un ejemplo rápido de cómo HTML no es sensible al espacio. Y luego vamos a crear nuevas líneas. Entonces primero, este es un párrafo sin espacios y una segunda línea aquí dentro. Voy a guardar eso. Y cuando lo abrí en mi navegador, todo está en la misma línea. Lo que puedo hacer es que puedo hacer click derecho, ir a ver fuente y la fuente aparece la forma en que lo escribí en mi editor, sin embargo, quería líneas ni una. Y no sólo sucede con nuevas líneas, tampoco. Sucede con demasiados espacios. Aquí tienes un ejemplo. Ahora bien, si refresco la página, todos esos espacios se acaban de convertir en un solo espacio. Y si miro el código fuente, el código fuente no ha cambiado exactamente igual. Esa es la forma en que el navegador interpreta la información que le estás dando. Entonces cuando le das más de un espacio como lo que ves aquí, el navegador automáticamente piensa OK mostrar solo un espacio ahora para crear una nueva línea. Utilizamos el elemento B R. Este es uno de esos elementos que se cierra sobre sí mismo, por lo que no necesita una etiqueta de apertura o cierre, y eso es porque no hay contenido que poner dentro de ella. Entonces si pones un BR aquí, pero estamos aquí donde queremos otra nueva línea, guarde eso. Por lo que queremos un salto de línea al final de este periodo. Queremos un salto de línea al final de este periodo. Queremos otro salto de línea, pero nada en esa línea. Y entonces queremos nuestra sentencia. Eso tiene demasiados espacios en él. Guarda eso y sale aparece la forma en que queremos a la excepción fuera de los espacios. Ahora agreguemos un salto de línea más ahí. Aquí voy a dejar algo de espacio para nosotros, y quiero más de un espacio entre esto y esto. Esas pipas, si te muestro muy rápido y resaltado bien, esa pipa es un espacio, y luego resalta la otra pipa, este desgarro básico ante ella. Pero si añado muchos espacios, no pasa nada. Estoy refrescando una página. No está pasando nada así que en cambio lo que quiero Dio, esto es HTML un poco más avanzado. Queremos el y signo y B S P semi colon. Si guardas eso, pon un espacio a cada lado de él que cuente como carácter de espacio. Ese personaje entonces, se interpreta de la misma manera que cualquier otro personaje. Se interpreta un alfabeto. Entonces cuando refresco ves, tengo tres espacios ahí dentro. Vamos a ver el código fuente. Tengo un espacio aquí. Tengo el espacio que le dijimos que hiciera y tenemos un espacio después de eso. Ahora ese es un pequeño bono a este video ahora mismo. Eso no es importante saberlo. Por lo que eres prueba para este video es no agregar demasiados espacios. Tu tarea es sencillamente también. Crea un nuevo párrafo, agrega nuevas líneas y verifica que lo hiciste correctamente. 12. En negación: para que tu texto se ponga en negrita, simplemente agrega el elemento B. Entonces cuando crees un nuevo párrafo aquí y dentro de este párrafo, voy a ser audaz. Ahora quiero decir que voy a ser audaz, debe atornillar. Eso es todo lo que hacemos es agregar el elemento slash B para cerrar la etiqueta, guárdela abierta en tu navegador. Y ahora dice dentro de este párrafo, voy a ser audaz, y esta última parte es audaz. Es justo la forma en que dijimos que se suponía que fuera. Tu tarea es crear un nuevo párrafo y dentro de eso, escribir una frase y hacer que la mitad de ella sea audaz. Pon a prueba tu página. Si la mitad resulta ser audaz, entonces has agregado apropiadamente énfasis a tu sentencia. 13. Italics: agregar cursiva a tu página agrega una capa de énfasis a lo que intentas explicar. Por ejemplo, la palabra realmente se enfatiza a menudo en el texto y en el lenguaje. Entonces cuando decimos que esto es realmente fácil, bueno, podríamos capitalizar todas las letras o hacer esas minúsculas y agregar cursiva. Ahora, si previsualizamos esto, ya sabes, es que realmente se enfatizan y todos los demás Texas normal. Tu tarea para este video es abrir y cerrar elementos de párrafo como acabo de hacer bien. Cualquier vieja frase que te guste. Ni siquiera tiene que tener sentido. Enfatiza agregando cursiva a ciertas palabras. Abre la página en tu navegador. Verifica que tus palabras son dinos ojos. ¿ Verificaría que sus palabras estén en cursiva? Has agregado con éxito énfasis a tu sentencia y estás terminado. 14. Underline: A menudo te gustaría agregar palabras de dirección subyacentes para agregar un tipo especial de énfasis. Es importante entender que el elemento subyacente no sólo es desucar ID para HTML cinco. Tiene un propósito específico para HTML cinco ahora, que técnicamente no es subrayar o agregar énfasis. El elemento que estamos a punto de aprender no está destinado a enfatizar. Por lo general, se usa negrita para titulares, encabezados, encabezados. cursiva se usa generalmente para el énfasis, y en HTML cinco, el elemento U para subyacente ha sido depredado. ID ya no significaba para agregar énfasis. En cambio, el elemento U está destinado a representar palabras que son drásticamente diferentes del texto normal . Por ejemplo, por ejemplo, palabras mal escritas. Si solo quieres agregar un subyacente a una palabra y en realidad no tiene ningún significado en particular , puedes usar CSS para eso. No, todavía no estamos aprendiendo sobre CSS, pero sigue siendo vital que entiendas cuál es el elemento subyacente. Entonces para agregar un subrayado justo a ti cuando decimos que a la vista, estás subrayado. Ahora, partir de HTML cinco, se supone que no lo estemos usando de esta manera. Simplemente hice esto como un ejemplo, la forma correcta sería si la palabra que estuvieras mal escrita. Ese subrayado ahora está agregando un énfasis que muestra que esta palabra no encaja. Esa es la forma adecuada de utilizar un HTML cinco. Por lo que tu tarea es Crear un nuevo elemento de párrafo. Escribe un anuncio de frase subrayado Ábrelo en tu navegador. Verificar que haya subrayados. 15. Comentarios: un comentario en cualquier lenguaje de programación, incluyendo HTML es una sección de código que no se mostrará o no se ejecutará. En este caso, simplemente no va a aparecer, pero todavía va a aparecer en su código fuente para iniciar un comentario HTML. Es menos que signo de exclamación, dash, dash y todo en Aquí hay un comentario, y, como se puede ver no pad plus plus pastar esta zona. De forma automática ahora para cerrar ese comentario. Usa Dash Dash mayor que como ejemplo. Aquí está mi texto. Voy a añadir otro comentario aquí, y voy a mostrar esta página. Entonces todo lo que aparece es Aquí está mi impuesto. Ahora, si hago clic derecho y voy a ver fuente de página, mis comentarios siguen apareciendo. Entonces si quieres esconder algo secreto y ahí, este no es el lugar para hacerlo. Pero si quieres escribir pequeñas notas por ti mismo, esta es la forma perfecta de hacerlo, por lo que también puedes usarlas ya que es mi Pie de página. Como pequeñas notas, podríamos decir que Footer está por debajo de esto y los recientes lingüistas agrupan algunas de las cosas juntos y aquí dentro. Yo quiero agregar un enlace, y esto sólo va a ir a Google sin razón aparente. Ahora cuando muestro la página, aparece el enlace de Google. Y si quería comentar eso fuera para que en realidad no funcione, no aparece. Los comentarios funcionan en múltiples líneas siempre y cuando lo abras y lo cierras correctamente. Por lo que cualquier cosa dentro de un comentario no se renderiza en tu navegador. Tu tarea es escribir un poco de HTML, usar el elemento de párrafo y luego comentarlo, emitir un comentario encima, poner un comentario debajo de él y luego comentar todo y tener una sensación de cómo funcionan estos comentarios . Si miras la fuente de la página de muchas otras páginas Web, vas a encontrar que los comentarios son bastante comunes y no siempre se muestran en un formato agradable como este o etiqueta de apertura y cierre. Terminando en la misma columna justo aquí, a derecha, un poco de HTML y luego comentó. Carga que cada hembra arriba en tu navegador Y si lo que comentaste no aparece , has creado con éxito un comentario 16. ENLACES: enlaces se encuentran en casi todas las páginas Web de Internet. lo que llamamos un enlace en realidad nos referimos a llamar a un hiperenlace. Un hipervínculo vincula una página a otra página, y así es como se mueve de un documento a otro documento. Entonces veamos crear un enlace que vaya a cualquier página Web antigua para este ejemplo. Vamos a enlazar directamente a Google. Entonces digamos que este enlace va a Google. Ahora guardamos y mostramos esta página. Nada fuera de lo común va a aparecer. Y como puedes ver, el enlace aquí no aparece. Entonces lo que tenemos que hacer es agregar el elemento A. El elemento A es nuestro vínculo. Es nuestro hipervínculo y un enlace de una página a otra. Necesitamos unos atributos muy específicos. Eso son atributos llamados H R E. F. Es el atributo que te dice a dónde dirigir al usuario cuando hace clic en él. Entonces este va a ir a google dot com. Cuando refrescas la página, de repente aparece enlace, puedo hacer clic en ese enlace, y me trae a google dot com. Voy a volver atrás y tenemos otros atributos que necesitamos mirar, y eso se llama los atributos objetivo. Este es un poco diferente a la mayoría de los atributos porque comienza con un subyacente Eres el valor comienza con un subyacente Los valores que están disponibles son subrayado en blanco guión bajo Parent subrayado Self y subrayado Top. Ahora sólo queremos definir uno de estos, y si quisiéramos abrir una nueva ventana, usaríamos Underscore en blanco. Por lo que blanco blanco. Si vuelvo a guardar una página superior abierta, nada va a verse diferente. No obstante, cuando hago clic en este enlace que trae una nueva ventana subrayado Self es el predeterminado. Es decir, se va a abrir en su propia ventana. No tienes que especificar esto si quieres que la nueva página se cargue en particular ventana que estás actualmente en establecer objetivo es igual A subrayado Self es lo mismo que ningún atributo objetivo en absoluto. Cómo ir rápidamente por encima de los otros subrayados. Los padres abrirán enlaces en el marco del documento si hay un marco y la parte superior abrirá el documento en todo el cuerpo. Fuera de la ventana. La mayoría de las personas se adhieren a sí mismo o a los padres o en blanco para una ventana totalmente nueva. Entonces para este, vamos a decir que Google necesita abrirse en una nueva ventana, y tu tarea para este video es crear un enlace usando el elemento A. Hacer que ese enlace se abra con un objetivo atributos de blanco. Eso significa ir a abrir un nuevo ahorro de ventana. Abre este archivo en tu navegador. Haga clic en su enlace. Una vez que hayas abierto esta página en tu navegador, haz clic en el enlace. Ya completaste este video. 17. Enlaces internos: un enlace interno es cómo vinculaste a otra sección dentro de la misma página, mientras que otros enlaces de una página a otra página un sitio a otro sitio. Esto vincula directamente al contenido que todavía se encuentra en esa misma página, esencialmente, para que puedas desplazarte hacia abajo o desplazarte hacia arriba hasta donde sea ese contenido. A lo mejor voy a dar un ejemplo aquí dice Haga clic en este enlace. Y en lugar de agregar un sitio web o una página Web o um, ya sabes ah, archivo como index dot html, vamos a agregar signo numeral, comúnmente conocido como hashtag. Ahora, Anderson, para llamar uno a este enlace y voy a crear. Entonces voy a crear sólo un poco de espacio vacío aquí, y esto nos va a permitir desplazarnos por su página durante bastante tiempo que una vista previa esto se puede ver que mi barra de desplazamiento apareció. Tengo el enlace en la parte superior, y si me desplaza hacia abajo, sigo desplazando en la parte inferior, dice más contenido aquí. Ahora el enlace en la parte superior. Cuando hago clic en él, no pasa nada. Pero en la u. R. L Bar, tiene nuestro archivo html co dot. Ese es el archivo que actualmente estoy escribiendo en este momento que tiene el lado numeral de hash tag pound sign, lo que significa que esto está tratando de enlazar a una determinada pieza de contenido en esta página y está tratando de encontrar el enlace una pieza. Cuando hago clic en él, no pasa nada. Entonces lo que hacemos es crear otro enlace. Pero esta vez usamos el atributo name y no necesariamente necesitamos tener ningún contenido dentro de él. Pero éste se va a llamar Enlace uno. Entonces cuando hago clic, esto destaca aquí arriba también demuestra que el enlace uno aquí arriba es el mismo que enlace allá abajo . El enlace interno necesita dedo del pie Tener tu hashtag delante de él en el enlace a donde va a ir no tiene eso. Tampoco cuenta con los ocho ref. No tiene nada más en ella. De hecho, ni siquiera podrás verlo. Entonces cuando volvamos a nuestra página y me refresco y ahora hago clic, este enlace se va a desplazar todo el camino hacia abajo. Ahora está probando dedo del pie. Llevar esto a la parte superior de la página y una buena manera de demostrar que es simplemente tomar mawr garganta espacio extra blanco en la parte inferior de donde está el contenido. Guárdalo. Voy a refrescar la página cuando haga clic en este enlace sólo una vez más, y me lleva al área de más contenido. Ahora puedo desplazarme hacia arriba y hacia abajo. Todo está en la misma página, pero hemos creado con éxito un enlace que no sale de esta página y dijo que enlaza con contenido dentro de esta página. Por lo que tu tarea para este video es crear un enlace interno, vincularlo a otro hipervínculo dentro del mismo documento. Al igual que lo que hice. Abre el documento en tu navegador, haz clic en tu enlace y asegúrate de que funcionó. 18. Imágenes: imágenes son una parte enorme de Internet o las fuentes de Facebook serían muy aburridas. Sin imágenes, Pinterest no existiría, y las imágenes de Google no existirían. Si no tuviéramos imágenes en todo Internet. Es importante que entienda cómo crear estas imágenes. Lo primero que debes saber es que la etiqueta de imagen comienza con I M g taquigrafía para imagen se parece a la imagen. Si sacas las A y E, también es una etiqueta de autocierre. No requiere etiqueta de imagen slash. Simplemente se abre y se cierra en la misma etiqueta. Ahora para definir una imagen usamos el S R. C significa fuente, y ahí es donde nos vinculamos a nuestra imagen. Ahora sólo voy a escribir en una imagen que conozco de la parte superior de mi cabeza, y voy a previsualizar esto. Ahora tenemos una imagen. Esta imagen es un PNG, que significa gráfico de red portátil, y eso significa que puede tener algunas partes transparentes en ella. Por lo que una imagen puede ser el doc gif jpeg, el otro esquivar un peg dot PNG y en algunos navegadores dot spg para gráfico vectorial escalable pero el más común verás típicamente el regalo, el J Peg y el PNG. Entonces ahora que tenemos cargada esta imagen, vamos a firmar algunos otros atributos. Entonces digamos que Border es uno. A ver qué pasa entonces. Ahora hay una frontera a su alrededor. Tenemos el todo etiquetado el texto alternativo para aparecer en caso de que la imagen no pueda aparecer. Entonces digamos todo para etiquetar aquí para que podamos ver cómo se ve. Y voy a asegurarme de que esta imagen no exista agregando algunos recorridos innecesarios del final de la misma. Y ahora, cuando me refresco, dice la página, todos etiquetan aquí, esos son los impuestos. Aparece la imagen de imagen rota con el texto que he definido. Todavía tiene esa frontera a su alrededor, pero no hay imagen. Si hay una imagen, el texto todo no aparece. También podemos definir el ancho y la altura. Entonces digamos el ancho. Queremos hacer esto 600 pixeles a lo largo. Entonces ahora que te das cuenta, la imagen se ha escalado para ser de 600 píxeles en con, pero también creció en altura ahora, si quieres estrictar también la altura, todo lo que tenemos que hacer es especificar la altura a un número diferente. Digamos que solo queríamos que la altura fuera de 50 píxeles en lugar de lo que sea actualmente. No queremos que se escale de la manera adecuada. Ahora nuestra imagen tiene 50 píxeles de alto y 600 píxeles de largo. Ahora bien, si quisiéramos escalar la imagen en función del ancho y la altura, no funciona para todos los navegadores, sino para la mayoría de los momentos, navegadores modernos excepto estos días. Entonces si dijimos queremos que esta imagen sea de 230 píxeles Hall No, él sabe que las imágenes se reescalaron a una escala normal a 50 píxeles más, y vamos a notar que también va a crecer de ancho, lo que sí hizo. También podemos agregar la etiqueta de título y no vamos a poner su ratón sobre. Aquí dice título. Al igual que lo que escribimos, recuerden, Título es uno de esos atributos globales. Podemos usarlo en básicamente cualquier elemento. Ahora voy a quitar esa frontera para que se vea así y voy a añadir un enlace va a ir a Google. Voy a guardar eso. lo vamos a ver, y ahora podemos hacer click en esa imagen también. En cuanto hago click en él, nos trae a Google. Es tu tarea para que este video sea bastante grande. Lo primero que quiero que hagas es crear imagen. Entonces use. Utilice el elemento de imagen y agregue los atributos de origen. No importa lo que tus imágenes siempre y cuando sea una imagen de trabajo, puedes saltar a las imágenes de Google y simplemente agarrarla. Todos sois de ahí. Todo esto es para la práctica, así que no importa qué imagen. Agarra el segundo paso. Haddon Ault atribuye tercero en un borde atributos a una personalizada con y altura en un título . Después envuelve un enlace alrededor de tu imagen. Al igual que lo que tengo arriba guardando abre tu documento en tu navegador. Duran hasta. Verifique que su imagen y enlace esté funcionando correctamente. 19. Bloque vs. inline: en HTML. Cada elemento se puede categorizar como bloque o un elemento en línea. En este video, vamos a ver la diferencia entre un elemento de bloque y un elemento en línea. Vamos a mostrar algunas partes de HTML y posiblemente algún CSS que aún no hemos aprendido . Y eso está bien, porque este video trata simplemente de aprender la diferencia entre un bloque y un elemento en línea . Por lo que Block element sería un elemento como un párrafo DIV, cualquiera de los encabezamientos y así sucesivamente. Un elemento de bloque ocupa todo el ancho de izquierda a derecha de toda la pantalla o de toda el área en la que está contenida. Entonces, como ejemplo, voy a crear un desarrollo, aprenderé de desarrollos más adelante. Pero este es un elemento básico de bloque. Voy a añadir una frontera muy rápido. Nada de fantasía, no correctamente escrito, y este es un elemento de bloqueo. Al mirar esta página, se puede ver que el borde ocupa todo el ancho de la página desde la izquierda hasta la derecha. Ahora bien, si miramos un elemento en línea, eso es algo que sólo ocupa el espacio que realmente necesita. Y un gran ejemplo de eso es el elemento span. Entonces este es un elemento de bloque porque recorre todo el camino a través de la pantalla. Es padres Contenedor es el elemento corporal, ¿no? Entonces si miramos el elemento div que escribimos su contenedor padre, el que está encima en la jerarquía es el cuerpo en el cuerpo ocupa toda la página. ¿ Dónde está esto? Ben está en línea. Esa frontera envuelve en torno a ese lapso. Eso es tanto espacio como posiblemente necesite. Voy a añadir un espaciador ahí dentro, y voy a crear un par de desarrollos anidados. Vamos a hacer que sea un borde azul. Sabemos con dónde estamos trabajando vamos a darle un poco de relleno. No te preocupes por el CSS por el momento. Simplemente escribiendo esto para que puedas ver la diferencia entre un bloque en un elemento en línea . Y diremos que el ancho de este es el 50% de su contenedor padre. 50% hacer frontera. Echemos un vistazo a lo que tenemos. Entonces esto ocupa el 50% de la página, tiene algo de relleno en ella, y este es el borde azul de 50 centavos, ¿ verdad? Entonces ahora si tuviéramos otro Devyn aquí, esto es 100%. Por lo que especificamos que el primer elemento de bloque solo va a ser un elemento de bloque para ese 50% 50% de la pantalla en eso, El siguiente elemento de bloque dentro de él va a ocupar el 100% del ancho de su elemento padre de mejores maneras. En realidad, acabo de quitar este relleno que bloquean elementos. Uno de los dos píxeles de borde negro sólido que dice que el 100% ocupa el 100% de la zona fronteriza azul . Por lo que el elemento de bloque va a ocupar tanto espacio como sea posible de izquierda a derecha de su página, mientras que un elemento en línea no lo hará. Como se puede ver aquí, el elemento en línea no hace eso. Sólo ocupa el espacio mínimo desnudo que tiene para. Ahora bien, ¿por qué es esto importante? Pues bien, porque los elementos de bloque suelen ocupar toda la página Si vas a Facebook, el encabezado en la parte superior ese encabezado azul donde tiene el logotipo en la barra de búsqueda En tus notificaciones, ese elemento padre será un elemento de bloque porque ocupa todo el espacio de la página. Ahora puedes crear columnas por dentro, pero estos elementos de bloque masivos, pero sí requiere un poco de estilo extra, y eso no es algo que estamos cubriendo en este video. Pero como ejemplo, voy a copiar esto y arrastrarnos hacia abajo y decir otro 50% azul y ver qué pasa cuando pongo uno al lado del otro. Si limpio esto para que podamos ver que estos aire dos grupos muy distintos, esta sección aquí es nuestras primeras zonas fronterizas azules es 50% azul Borde tiene nuestro elemento de bloque en elemento de línea, y recuerden, solo ocupó 50% de la página y la otra ocupa el 50% de la página, y debería, en teoría, en teoría, sentarse justo al lado de ella. Pero debido a que ambos son elementos de bloque, van a ocupar el 100% de la página, aunque el borde no se expanda al 100% de ella. Otro gran ejemplo es si creamos otro span aquí, el borde verde y mi lado o abajo, porque un span es un elemento en línea y el DIV es un elemento de bloque, los elementos de bloque van a ocupar el 100% del con de izquierda a derecho, aunque sólo se esté utilizando el 50%. Eso significa que otro 50% sólo esa superficie blanca llana que vimos. Es espacio en blanco vacío. Ahí no se va a usar nada y que el SPEN deba sentarse debajo de él. Ahora. Este es nuestro lapso y está sentado debajo de toda la zona. Ahora voy a limpiar algo de esto para que podamos echarle un vistazo a esto. Un poco más limpio, 50% borde azul. De nuevo, parece que solo estamos usando el 50% pero es realmente el elemento de bloque está ocupando el 100% todo el camino de izquierda a derecha. Se ha reclamado el 100% del con, pero sólo está usando el 50%. Entonces eso significa que eres elemento span va a ir por debajo de él porque a pesar de que no se puede ver nada que se está usando aquí, en secreto se está usando. Entonces esa es la diferencia entre un bloque y un elemento en línea. Tu tarea para este video es crear un elemento de bloque. Se puede jugar con el desarrollo o el que más conocemos hasta ahora, que sería el elemento de párrafo. Cualquiera de los dos funciona, y luego quiero que crees y en el elemento de línea ahora en los elementos de línea podría ser el elemento span . Subrayado en cursiva negrita. Estas son solo algunas de las que hemos cubierto hasta ahora, y quiero que veas cómo se sientan. Coloca el elemento de bloque por encima del elemento en línea y luego prueba al revés. Intenta poner el elemento en línea por encima del elemento de bloque y ver cómo decían No tienes que meterte en el CSS, que es el atributo de estilo aquí. No tienes que meterte en nada de eso siempre y cuando puedas ver dónde estás trabajando. Tercer paso. Abre tu documento en tu navegador y el paso final. Verifica que has hecho un bloque y en línea elementos en la misma página. 20. Div de html 170: uno de los elementos más comunes en HTML es el elemento DIV, y simplemente se ve así. Se requiere una apertura y una etiqueta de cierre, y si miras la fuente de básicamente cualquier página Web 99.99% del tiempo, verás al menos uno de estos, si no decenas o posiblemente cientos de estos elementos ahora con desarrollo no tiene uso especial. Se trata de un elemento de bloque en blanco. Un desarrollo de Damien va a tomar tanto con como con su padre. Contenedor lo permitirá. Si no estás familiarizado con la diferencia entre un bloque en un elemento en línea, vuelve al bloque primero en el video del elemento de línea, y aprendes la diferencia allí en tan solo un par de minutos. El desarrollo es simplemente un elemento ficticio. No tiene un propósito especial, ni usos especiales, y es totalmente personalizable tu CSS. Aquí no estamos cubriendo CSS, pero es importante saber que el desarrollo se encontrará prácticamente en todas partes de Internet. Ese HTML cinco ha creado muchos elementos que ahora están estandarizados con el fin de reducir la cantidad de dibs y separar la información. Por ejemplo, en html cinco. Tenemos el elemento de cabecera. Tenemos el elemento de pie de página y muchos, muchos, muchos más. Antes de html cinco, todo era un diff. Fue un div. I d es igual a pie de página algo en estas líneas ahora, mientras que esto sigue siendo aceptable, si estás escribiendo una pieza de código en particular para un pie de página o encabezado o una navegación, ese es otro bueno que verás con bastante frecuencia. Ahora vas a querer usar uno de estos y de nuevo hay muchos de estos, pero estos fueron solo los tres que vamos a cubrir en este momento, pero en última instancia no hay nada de malo en usar un desarrollo como este. Se prefiere en HTML cinco que usó uno de estos, pero si tienes que usar un div, tienes que usar un div, y para eso está ahí. No hay tarea para este video. Esto es puramente educativo. Para que sepas que el DIV es un elemento ficticio no tiene ningún propósito especial, ni usos especiales, y es completamente personalizable. Muchos otros elementos son personalizables hasta el grado final, sin embargo, el DIV es básicamente una pizarra en blanco. Se trata de un elemento de bloque en blanco con el que se puede hacer básicamente cualquier cosa ahora en este momento . Si apenas estás empezando con HTML, no puedes hacer mucho con el Div excepto crear bloques que vayan de izquierda a derecha de toda tu página. No es tan útil. Pero a medida que te conviertes en un desarrollador más hábil, el desarrollo es uno de esos elementos que escribes cientos y cientos de veces, posiblemente cientos de veces, incluso en un solo día. 21. Listas: en HTML. Existen dos tipos de listas en listas ordenadas y listas ordenadas. La diferencia entre ambos es que una lista A Norden generalmente usa puntos de viñeta o algún tipo de imagen para denotar en qué orden va a entrar cada elemento de la lista, y realmente no importa cuál viene 1er 2º 3º 4º Sasí sucesivamente. Entonces adelante. tanto que una lista ordenada suele tener números o letras donde una lista de pedidos comenzaría con 12345 a b c d e f g, tiene algún tipo de orden para ella. Aquí hay un ejemplo en vivo Primero no es una nueva lista ordenada. Empezamos contigo l una nueva lista ordenada y para crear un ítem de lista es solo ese ítem de lista y para crear otro ítem de lista, todo lo que hacemos es crear uno más y podemos seguir haciendo esto para siempre. Y sólo voy a añadir un título aquí. Y echemos un vistazo a lo que hemos escrito. Tenemos una lista nórdica. Tenemos un elemento de lista, unspot en blanco, spot en blanco, otro ítem de lista 1/3 ítem aquí, el ítem de lista que no tiene nada en él fue en realidad un error tipográfico. Ese fue mi error. Bueno, Usemos esto a nuestra ventaja para aprender cómo funciona esto. HTML necesita una apertura y una etiqueta de cierre para la mayoría de los elementos. El 1er 1 no tenía etiqueta de cierre, Entonces lo que pensaba que estábamos haciendo era esto. Ahora bien, eso no significa que puedas saltar sobre cualquier elemento de cierre. Este es solo el navegador tratando de corregir lo que piensa que es correcto, y podría no aparecer de la misma manera en todos los navegadores. Y ciertamente no es una estandarización, y a otros desarrolladores no les va a gustar trabajar con ella. ¿ Siempre creas esa etiqueta de cierre y solo eliminaremos eso? Y ese es nuestro a Nordeste donde las balas son la parte ordenada por la ONU, no importa cuál venga primero. Es simplemente una lista. Alternativamente, hemos ordenado listas, y esto comienza con, como probablemente adivinaron, un pozo. Ahora, un elemento de lista es exactamente lo mismo en una lista ordenada. Este artículo número uno. Hagamos el número dos número tres y no me preocupo por que haya espacio extra aquí. Y para previsualizar esto para una lista ordenada, tenemos 123 y viene en orden 12 y tres también puedes anidar listas dentro de la otra. Esto se está haciendo un poco más avanzado, pero echemos un vistazo a una lista ordenada con uno un elemento Nord aquí y en el segundo ítem de la lista . Vamos a agregar una lista ordenada por lo que es una lista dentro de una lista Orden Número uno. Pedido número dos Otra vez no preocuparte por ningún espacio en blanco que no sea relevante en este momento. Voy a cerrar este ítem de lista se puede ver cuando haga clic en él. Destaca los elementos de apertura y cierre. Todo tiene un elemento de cierre de apertura aquí. A excepción de ésta, cierre la lista ordenada de la ONU y echemos un vistazo a esto. Ahora. Se trata de un OVNI dentro de un pozo, por lo que en orden lista con una lista ordenada. Entonces como pueden ver, aquí tenemos primer artículo es un Nord errado. El segundo elemento está en orden, pero también es una lista. Podemos añadir otro aquí. 30 Bueno, artículo y podemos ver cómo esto creó una lista ordenada dentro de horno una lista Norden, y podríamos hacer el viceversa, o podemos hacer orden dentro, ordenado o lista o un no ordenado dentro de un nuevo ordenado. Ese es un ejemplo más rápido. Pero hagamos una lista ordenada dentro de una lista ordenada, y ésta es una lista ordenada dentro de una lista ordenada. Voy a refrescar mi página, y aquí la tenemos. En lugar de balas, tenemos simplemente números. Entonces tenemos números dentro del número dos también. Y de nuevo, sólo por claridad. Nos llama el último punto. Ahí vamos. Por lo que tu tarea para este video es crear primero un nordeste con al menos tres elementos, luego crear una lista ordenada con al menos tres elementos, luego guardar y abrir ese documento en tu navegador, sea cual sea el navegador que te guste y verificar que tu las listas han aparecido correctamente. Por lo que tu lista debería tener puntos de bala y números para tu A Norden una lista ordenada, respectivamente, 22. Tablas: las tablas son bastante comunes en HTML, y eventualmente vas a tener que usarlas. lo largo de la última década más o menos, se han ido suprimiendo tablas a favor de elementos que se cargan más rápido, como el desarrollo. No obstante, hay algunos casos en los que una mesa es justo la solución adecuada para ti, y es importante entender todas las diferentes partes de una mesa. No, una mesa es bastante compleja, y consta de muchas partes diferentes. Lo primero que debes saber es en la mesa. Elemento se llama simplemente tabla. No hay nada de fantasía en eso. Y si quieres crear tu primera fila porque las tablas funcionan en filas y celdas piénsalo como una hoja de cálculo, vas a querer crear un TR que sea una fila de tabla. Lo abres y lo cierras igual que lo harías con la mayoría de los elementos HTML. Pero dentro de esta habitación, también necesitas una celda. No, esta celda, pensaría, sería t ver celda de tabla pero en realidad es datos de tabla TD. Esta será la primera celda y vamos a crear una más y entre paréntesis. Voy a escribir datos. Entonces sabes que una célula es en realidad un TD. Ahora bien, si previsualizamos esto, realmente no parece mucho. Pero si agregamos borde a nuestra tabla, solo un borde de un píxel ahora podemos ver que sus celdas reales, la tabla, también toma un con Podemos decir que queremos que el ancho sea 100% y fuera 100% de la pantalla o su contención elemento que va de izquierda a derecha. Y si simplemente queremos agregar otra celda, solo agregamos una celda más, y ahora vamos a tener tres columnas. El elemento de mesa también tiene auto espaciado y vende relleno, pero conseguiremos el relleno celular en tan solo un momento. Espaciado celular. Si miras esto versus aquello, o si hacemos esto drásticamente diferente, ese es el espaciado entre cada una de las celdas. Y si vamos a volver a poner eso a la normalidad, es como se ve. Cuando dije de vuelta a cinco, hay otro llamado sell padding, y queremos que éste se ponga y vea qué hace cinco. Entonces ese es el relleno dentro de la celda, no entre las células sino dentro de cada celda. Y si hacemos esto mucho más drástico. Se puede ver que el relleno entre las letras que vemos aquí y la primera frontera interior . También podemos cambiar el color del borde mediante el uso de los atributos de color del borde y solo el nombre de un color. Podemos decir cambios para leer, y ahora se lee, y la frontera no tiene que pegarse se queda. Uno. Podría ser drásticamente más grande. Entonces ya ves ahora que la frontera está todo alrededor de la mesa. No es el borde para cada celda, sin embargo, sin embargo, agregar un borde sí agrega ese borde de un píxel todo el camino alrededor de cada uno mismo. Por lo que ahora tenemos una fila y agregamos notas. Aquí, esto es una fila. Este son datos de tabla, y si queríamos crear una fila más, todo lo que hice fue copiar eso. Refresca la página. Tenemos otra fila ahora. El siguiente. No necesitábamos saberlo. Nuestra columna gasta y bandas asadas. Entonces digamos que la primera fila tiene cuatro celdas y la segunda fila tiene tres celdas. No se va a alinear adecuadamente, y así es como Chrome trata de descifrar eso. Por lo tanto, células en las tres primeras celdas en la parte inferior. Pero ¿y si queremos que este fondo celtics gaste más de dos columnas? Bueno, ahí es cuando nosotros en este de aquí. Entonces para asegurarte de que estás trabajando en el lugar correcto, si eres nuevo con HTML, simplemente puedes agregar un texto trabajando aquí, refrescar tu página y dice, trabajando aquí. Genial. Entonces sabemos dónde estamos trabajando. Vamos a seleccionar este elemento y vamos a cambiar el lapso de columna o carbón a quiero decir, va a ocupar dos columnas en lugar de una. Refresca que conozco a los Celtics arriba dos columnas en lugar de sólo la que se suponía que conociera. Añadamos 1/3 fila, esta también va a tener tres celdas. No obstante, queremos fusionar esta celda con ésta. Volvamos a donde estábamos trabajando aquí. Sí, estamos en la celda correcta. Y si dijimos que la prohibición del asado es igual a dos, esto le lleva a Rose Now, ahora, para darle un poco más de sentido a esto, porque esto se está poniendo un poco difícil. Vamos a etiquetar estas fila y un número de celular. Ahora podemos ver si este es el camino y esta es la celda que tenemos. Fila uno, alguien rema una celda para remar uno, celda tres y así sucesivamente. Entonces adelante. Aquí hemos escrito para vender uno, y le lleva hasta Rose. ¿ Recuerdas? Eso se debe a que tenemos el lapso de fila está establecido en, mientras que este se escribe para vender tres y fila para vender cuatro. Eso se debe a que tenemos el lapso de columna establecido para ahora Esto funciona fuera de la carretera que tiene la mayor cantidad de celdas en ella. Por lo que todo esto funciona fuera de la primera carretera porque la primera carretera tiene cuatro celdas en ella. Ahora también podemos agregar cuerpo de cabecera y pies de página. Entonces esto fue bastante fácil. Este es un cuerpo T cabeza T, que es donde toda tu rosa y datos va a ir y luego pie T. Ahora bien, esto es simplemente una forma de administrar nuestra información de fila. Entonces en su cabeza, en su cabeza de mesa, tenemos nuestra fila de mesa y necesitamos th que es un encabezado de tabla que nos llama. Llámalo uno, hazlo un poco más compacto, llámalo también. Tres y cuatro. Ahora bien, si vamos y echamos un vistazo, tenemos encabezados de columna. Ahora el th es diferente de la T d El th es el cabezal de mesa va a hacer que tu texto se negrita automáticamente y centrarlo. Si no queríamos eso, simplemente lo cambiamos de nuevo a t. D. Va a actuar como un encabezado normal por la única razón por la que estamos llamando a este uno encabezados porque lo hemos puesto en el elemento T tenía. Ahora bien, esto es sólo si te estás volviendo más organizado con tu HTML. También podemos tomar esa cosa exacta y copiarla en el pie T y ¿qué pasa? ¿ Lo mismo? La única diferencia es una de especificar que toda esta fila aquí es un encabezado. En toda esta fila aquí hay un pie de tabla. Vamos a llamar a este cambio. Estos s para que tengan un poco más de sentido. Por lo que puedes pensar en esto como un cuerpo humano. Tienes la cabecera que es tu cabeza, tu cuerpo. Entonces tu torso, tus brazos, tus piernas y tu pie de página que son todos tus pies. Son muy vitales para tu cuerpo todo lo que son muy vitales para una mesa. Lo siguiente que queremos aprender aquí es cómo cambiar el ancho de una columna que toma el con atributos, ponerlo en cualquier columna y el cambio nosotros con al 50% tenía uno. Toda esta columna es ahora el 50% de la tabla, y el 50% restante tiene que dividirse por igual entre estos tres. Ahora, también podemos precisar que queremos la segunda columna Diablo con de 25% y que surte efecto para toda la columna. El navegador lo solucionará automáticamente, y puedes ponértelos. Cualquiera. No tiene que estar en la cabeza. No tiene que estar en el pie de página ni en el cuerpo. Podría estar en cualquier celda individual. Te das cuenta de que 50% con para fila Una columna una fila, una columna una afecta. Toda la columna afecta a toda la tabla. Ahora, si no especificas un ancho para ninguna de tus celdas, dedo del pie de tu navegador optimiza automáticamente para lo que piensa que es mejor aquí, parece que está tratando de optimizar para el 25% con en cada columna. No obstante, si agregamos más texto, ahora está haciendo más espacio, y está aplaudiendo a los otros juntos. Esto puede no darle el efecto deseado que desea. Y si ese es el caso, vas a querer agregar eso con Teach south, y así es como se crea una tabla en HTML. Por lo que tu tarea para este video es una tarea bastante larga. Primero, cree una tabla, luego cree tres filas y, a continuación, cree cuatro celdas en cada fila. Vuelve a tu elemento de mesa en un borde a tu mesa. Cambia el color del borde de tu mesa. Haz que el ancho de tu mesa sea 100% por lo que ocupa todo el ancho de tu pantalla en fila para vender. Tres. Yo quiero que utilicen los atributos de span de carbón para ocupar dos columnas. Eso significa que vas a tener que quitar la cuarta celda en la fila dos, también en la fila dos. Yo quiero vender uno para llevarle a Rose. Eso significa que tienes que quitar la primera celda de la Fila tres y utilizar los atributos de prohibición de asado . Una vez que hayas hecho eso en una mesa, mesa principal, pie y cuerpo de mesa, guarda todo tu progreso. Ábrela en tu navegador, y si tu tabla se ve similar a la que viste en este video, entonces ya terminaste 23. El DOM: el D. O. M. Es el modelo de objeto de documento es lo que sucede cuando las páginas cargadas en tu navegador y tu navegador crea automáticamente este modelo de objeto de documento Así tienes tu HTML, luego a la izquierda. Tienes tu cabeza, tu título y tu hecho un tags, CSS y posiblemente JavaScript a la derecha. Tenemos nuestro cuerpo, y nadie tiene ningún elemento que queramos poner en él. Los divisores están en orden, listas, más divisores. Los elementos de la lista van bajo la lista ordenada de la ONU, y así sucesivamente hasta ahora, este es un modelo de objetos de documento bastante básico, y notarás que esto se parece bastante a una jerarquía. Y eso es exactamente lo que es. Es una jerarquía. Ahora aquí te dejamos una imagen de un modelo de objeto de documento que es significativamente más complejo de nuevo. Se inicia con el HTML la parte superior que es o elemento HTML. Tenemos nuestra cabeza o título, etcétera, etcétera. Eso no va muy profundo, pero notamos que el área del cuerpo puede tener un div, y luego puede tener un lado diferente de eso. En una tabla dentro de eso, y dentro de cada tabla o tabla se levantó y dentro de cada fila de tabla nuestras celdas de datos de tabla y podemos tener más HTML dentro de eso, y eso solo puede hacerse más y más profundo y más profundo, dependiendo sobre el tamaño de sus páginas Web y cuántos elementos diferentes necesita usar su página Web. Ahora. El D. O. M define algunas piezas diferentes. Define elementos HTML como objetos. Define todas las propiedades de los elementos HTML, que son atributos. Define los eventos para todos los elementos que meten más en JavaScript, y define los métodos de acceso a todos los elementos también. Documento Object Model es un estándar W tres c. No es vital conocer todas estas cosas en este momento ya que estás escribiendo tu HTML, ya que esto realmente tiene más que ver con JavaScript. Pero el modelo de objeto de documento se basa más en HD Melvin y es JavaScript considerando que todo está basado en el html que escribes. Entonces estamos aprendiendo al respecto ahora mismo. Tu tarea para este video es ir a las imágenes de Google. Eso es imágenes dot google dot com, escribe en documento modelo de objeto y mira algunas de las diferentes imágenes jerárquicas que encuentres . Mira algunas de las más básicas y mira algunas de las más avanzadas y toma una nota mental sobre cuáles son las diferencias y también cuáles son las similitudes. Cada modelo de objeto de documento tiene algunas similitudes. Siempre empiezan igual. 24. XHTML: X html significa lenguaje extensible de marcado de hipertexto. Es muy, muy similar al HTML. Es más estricto que el HTML normal y X. HTML es esencialmente HTML pero diseñado para aplicaciones XML, o XML utiliza X html de soportado por todos los principales navegadores. Y si no estás familiarizado con lo que es XML, XML es un lenguaje de marcado donde todos los documentos que necesitan escribirse están marcados correctamente. En otras palabras, son mucho más estrictos. Son mucho más precisas. No es un lenguaje o estructura de marcado muy vagamente escrito. El estructura de X html significa que siempre hay un tipo doc. También significa que los elementos HTML de cabeza, cuerpo y título son todos requeridos en cada página cada vez. Eso es un mínimo debe ahora x elementos HTML también deben estar correctamente anidados. Eso significa que si tienes un párrafo con cursiva anidada dentro de él, eres elementos se verían como P I P. Todos tus elementos deben estar correctamente cerrados. Recuerda esos elementos de auto cierre de los que hablamos antes, donde termina en una baraja mayor que signo y todos deben ser más bajos. Los documentos html Case X tienen solo un elemento de ruta, que es el elemento HTML, y se ve que en el documento Modelo de objetos y X html atributos siempre deben ser minúsculas . Siempre deben citarse, y es posible que nunca se minimicen. Aquí te dejamos un ejemplo de minimización. Uno de los atributos que podemos usar para deshabilitar un botón serían los atributos desactivados en HTML normal. Escribiríamos deshabilitado un X html, escribimos Disabled es igual a disabled Su un poco redundante, pero así es como estrictos estos lenguajes que conoces, todo lo que has aprendido hasta este punto con todos los demás videos HTML tiene te preparó para este momento. En lugar de aprender un lenguaje de marcado con reglas muy sueltas, terminaste aprendiendo primero un conjunto de reglas más difícil, lo que significa que realmente aprendiste x html en lugar de HTML. Ahora aprender x html y volver a HTML es extremadamente simple. Pero pasar de HTML dos x html es un poco más difícil. Entonces en realidad empezamos con un más difícil Ahora cuando estás escribiendo tu html tu X html , vas a querer a veces validado. Asegúrate de que lo estás haciendo bien, sobre todo si solo estás aprendiendo esto Por primera vez, una gran herramienta para validar tu código X HTML se puede encontrar en el validador dot w three dot org. Existen diferentes formas de validar tu HTML. Puedes subir un archivo, copiar tu HTML en un área de texto, o incluso puedes simplemente insertar la U R L que estás mirando. Ahora eso es lo que es X HTML. Es esencialmente HTML, pero es más estricto. Tu tarea para este video es ir al validador w three dot org Click on Validate by input direct. Toma uno de los archivos en los que trabajaste en un video anterior, o si no acabas de empezar a escribir algo de HTML aquí y luego haz clic en el botón de verificación. Y eso te daría validación sobre si estás escribiendo tu X html correctamente o no correctamente. 25. Inline CSS: en línea. CSS es CSS que usted justo dentro de un elemento dentro de su modelo de objeto de documento. El modo en que hacemos eso es usar los atributos de estilo y ese atributo de estilo es un atributo global . Ahora, en este video, no vas a aprender formalmente ningún CSS quien sea. Si quieres tomar nota de algunos de los CSS que escribo eso depende completamente de ti. No te pondrás a prueba en ninguno de los CSS que escribo este video porque esto es puramente un video HTML. No obstante, aprender lo que estás a punto de aprender te preparará para futuras lecciones de CSS, y estarás mucho mejor sabiendo solo un poco de CSS de este video. Ahora, para darte un ejemplo de algunos en línea CSS, voy a crear un desarrollo con estos atributos de estilo. Voy a escribir, probar dentro de ella y cerrarla. Es vista previa, y es sólo una página básica. Dice Prueba ahora por todas partes. CSS entra aquí ahora, una lección muy rápida sobre CSS. Tienes lo que se llama una declaración, y en una declaración CSS tienes un par de valor de nombre. Entonces, por ejemplo, frontera sería el nombre. Tienes un colon, un píxel, rojo sólido, y terminas esa declaración con un punto y coma para que puedas agregar más aquí. Siguiente. Voy a agregar margen top y quiero que sean 50 pixeles. Y digamos que también quiero que el ancho sea el 30% de mi página. No, otra vez, no es sensible al espacio. Al igual que HTML. Debería ser todo minúscula y aquí tenemos tres declaraciones tenemos nuestro margen de declaración fronteriza , declaración superior y nuestra con declaración. Entonces voy a guardar esto y vamos a echar un vistazo a esto en cromo. Ahora podemos ver que hay un espacio de la parte superior. Es de margen de 50 píxeles desde la parte superior. Eso significa que los elementos se van a sentar 50 píxeles por debajo del con no es 100% de pantalla. Es un elemento de bloque, así que debería serlo. Pero dijimos que sólo necesita ocupar un 30%. Y por supuesto, hay esa frontera roja a su alrededor. Entonces eso está en línea. CSS. En pocas palabras, ponemos todo nuestro CSS dentro de estos atributos de estilo, y de nuevo, ese atributo de estilo es un atributo global, por lo que puede ir dentro de casi cualquier otro elemento HTML como ejemplo. Cambios al párrafo. Voltear hacia el cromo. No se ve diferente. Hagámoslo con un elemento span. Recuerda, este es un elemento en línea. Esto no va a ocupar todo el ancho de la página por eso, con podría no funcionar. Edad de refresco. Ahora el con no está funcionando de la manera que se supone que en el margen tampoco está funcionando. Y eso se debe a que esos sólo afectan a elementos de bloque o en elementos de bloque de línea. No obstante, nuestra frontera sigue funcionando, y eso demuestra que nuestro estilo es aplicable a cualquier elemento. Por lo que tu tarea para este video es crear un nuevo desarrollo en el atributo de estilo al mismo. En ese estilo. Atributo, quiero que escribas un poco de CSS. Siéntete libre de ir hacia atrás en este video, Pausa donde necesites y copia el CSS que he escrito. Si estás familiarizado con CSS, siéntete libre de escribir el tuyo, pero si no lo estás, puedes copiar el mío que lo que haces, guardando abrir el documento en tu navegador y tomar nota de lo que ha sucedido. Entonces si has agregado una frontera, habrá una frontera. Si has agregado un margen, habrá un margen. Si especificaste un ancho del 70% solo debe ser el 70% del ancho de tu pantalla. Haz eso y cuando termines, te veremos en el siguiente video. 26. CSS interna: CSS interno es la segunda forma en que podemos escribir CSS que afecta a toda nuestra página o a cualquier parte de nuestra página para mostrarte a lo que me refiero. Te voy a presentar el elemento de estilo. Vamos a escribir algo de CSS dentro del elemento de estilo. Si no estás familiarizado con CSS, está bien. No te van a probar en el CSS en este momento, ya que esto es puramente un video HTML, pero necesitarás saber sobre el elemento de estilo. Entonces como ejemplo, voy a crear un desarrollo aquí, y le voy a dar un atributo de clase y atributos de I. D y un atributo de estilo. Ahora puede que necesitemos o no los tres, pero lo que sí necesitamos es el elemento de estilo. Un elemento de estilo debe ir dentro de tu elemento de cabeza. Ahora, como un navegador renderiza la página, va de arriba a abajo. Lo primero que mira es el tipo doc, dice Linna. De acuerdo, aquí hay HTML. Necesito entender y partes HTML que está en esta página. El cabezal viene ante el cuerpo porque se carga primero va de arriba a abajo y en esta cabeza se va a tratar de renderizar nuestro CSS cualquier estilo, cualquier bordes, márgenes, márgenes, almohadilla ings, colores de fondo, colores de texto, cualquier cosa que pongamos ahí que estile la página que se va a renderizar primero, los navegadores, después va a reconocer que tiene un cierto estilo para recordar para esta página, y se va a tratar de aplicarlo al cuerpo una vez que el cuerpo esté cargado. Ahora esto hace que la página parezca que se carga más rápido ahora. Navegadores, thes días y conexiones a Internet en estos días airen tan rápido la mayoría de la gente nunca podrá decir la diferencia. Pero hay mucha gente por ahí que tiene una conexión a Internet muy lenta, y podrán decir la diferencia. También hay que señalar que el elemento de estilo en realidad puede ir dentro del cuerpo. Funciona perfectamente bien en navegadores modernos, pero debe ir dentro del elemento de cabeza. Ahora voy a escribir algo de CSS aquí. Voy a agregar un borde, y aquí dentro sólo va a ser un píxel, borde rojo sólido. Voy a añadir un I D. No te preocupes por las clases y yo ds. Hablaremos de esos en un video diferente. Pero ahora mismo solo te voy a mostrar cómo funciona esto. Teníamos el i d y queremos decir relleno 40 pixeles. Línea textil va a ser centro. Ahora vamos a añadir una clase, la clase fronteriza, y vamos a añadir el i D I. D. Vamos a ignorar los atributos de estilo en Texan aquí, y echemos un vistazo a lo que hemos escrito en nuestro navegador ahora mismo. Ahora aquí podemos ver el de Texas. En el centro, tenemos nuestro de un píxel, borde rojo sólido, y sí parece que hay una palmadita entre el borde muy superior y el impuesto junto con el borde inferior y el texto. Bueno, dijimos que el navegador estaba en un borde de un píxel, rojo sólido, agregar relleno en un centro alineado de texto y que afecte a nuestro elemento aquí. Entonces en lugar de escribir todo el CSS dentro de los atributos de estilo como lo hicimos en un video anterior , lo escribimos todo dentro del elemento de estilo. Y el beneficio de hacer eso es cuando se trata de que las clases vayan a sumar otro dip aquí, y voy a llamar a esto dar a y uno más, y éste será def. Tres. Y cuando guardo y miro esto y chrome o cualquier otro navegador, estos también tienen fronteras. Ahora la razón por la que estos tienen fronteras es porque la clase fronteriza aquí afecta a todas las clases aquí dentro. Ahora es una lección rápida en CSS. Una clase CSS comienza con un punto como se ve aquí, donde está el borde de punto se puede aplicar a múltiples elementos. En cualquier página dada, podemos agregar un par de saltos de línea aquí en un párrafo. Esta es una actualización de P. la página le dieron un par de saltos de línea ahí, y también están afecta el párrafo. Ahora el fuerte beneficio sobre eso es, si queríamos cambiar este estilo en particular, queríamos quitar esa frontera por completo. Podemos eliminar ese archivo de ahorro, refrescar la página en tu navegador, y se deshace de todo el estilo de una vez. Eso significa que no tienes que escribir estilo. El atributo es igual al borde de un píxel rojo sólido para cada elemento individual. Porque si necesitas cambiar algo en una página web muy grande, digamos que necesitabas quitar todas las fronteras Por cualquier razón, no quieres tener que pasar por aquí, buscar cada frontera y eliminarla porque esto va para tomar para siempre. En cambio, lo que podemos dio es simplemente eliminar esto y eso se deshace de todas las fronteras Ahora Se quería usar el atributo style para hacerte saber que el atributo style puede estar vacío. La mayoría de los atributos pueden estar vacíos y el atributo de estilo es uno de ellos? No, Cuando hablamos de ideas, las ideas no son como las clases. Una clase puede afectar a múltiples elementos como dije antes, y yo d solo puede afectar a un elemento y yo d debería ser único. Debe ser como su identificación personal. Nadie más lo tiene. Es completamente único para ti como persona. Esta identificación funciona exactamente de la misma manera y d empiezo con el signo numérica Hashtag er como quieras llamarlo en estos días. Entonces tu tarea para este video es escribir el elemento de estilo en tu cabeza, correcto. Tres desarrollos en tu cuerpo. Entonces quiero que creéis la clase fronteriza como hicimos en este video. Dale a eso un borde un píxel rojo sólido. Si no estás familiarizado con CSS, vuelve a una parte de video donde te muestra el CSS con el que trabajamos y siéntete libre de copiar eso. Entonces, para cada uno de tus desarrollos que están dentro de tu elemento corporal, quiero que agregues los atributos de clase, y el valor debe ser el ahorro de valor de frontera. Abre el documento en tu navegador, y si ves un borde en los tres de tus desarrollos, entonces has agregado exitosamente estilo CSS interno a tu página. 27. CSS: CSS externo es cómo agregamos el CSS de un archivo a otro archivo. El principal beneficio de agregar todos tus CSS y toe uno o varios otros archivos que no están dentro de tu HTML actual significa que puedes editarlos sin editar varias páginas. A lo que me refiero con eso es, si tuviera una copia esto sobre otra página y son bastante similares, solo llamemos a este CSS externo a ahora. Mira estos y realmente no hay mucha diferencia. Podría haber una increíble cantidad de diferencia. Pero el punto es, todavía queremos usar esta clase, este estilo en ambas páginas. Ahora, en la primera página, podría simplemente cambiar la asignación. Si quisiera quitar esa frontera. Yo lo haría. El problema es que si tengo una segunda página, todavía está ahí ahora. Las posibilidades de que solo tengas dos páginas son bastante delgadas. Es posible que tengas hasta 50 o 100 páginas diferentes, dependiendo del sitio web o proyecto en el que estés trabajando. Podrías tener miles de páginas diferentes. Podrías tener sólo unas páginas. De todas formas, el punto de la programación es no hacer algo dos veces. Se quiere hacer una cosa una vez y tener en efecto tanto como sea posible. Esa es la forma más eficiente de trabajar. Entonces aquí vamos a agregar en su lugar un poco de estilo externo. Ahora esto utiliza el elemento link con atributos treff de EA, y otro atributo, llamado REHL, significa relación. Es una etiqueta de auto cierre, y va en tu cabeza. El H R E F es tu fuente en una imagen. Usa SRC y un enlace que utilices H R E f Así que aquí vamos a añadir un archivo llamado style dot CS Access El archivo aún no existe, pero lo haremos existir en tan solo un momento. Y la relación con este documento HTML es hoja de estilo que le dice al navegador qué es esto . Podría ser un archivo de texto. Podría ser archivo javascript. Podría ser absolutamente nada que sea importante para esta página, pero cuando decimos hoja de estilo, el navegador sabe ir y conseguir ese archivo en particular y actuar automáticamente como si fuera una hoja de estilo sin tener que hacer ningún adicional pensando, iba a volver a agregar la frontera aquí atrás, y voy a copiar este estilo. Voy a cortar Es lo que voy a hacer. Vamos a crear un nuevo archivo pegado aquí contra Basic no importa con CSS, y voy a guardar esto como estilo dot CSS. Por lo que tenemos estilo en CSS y tenemos el archivo llamado style dot CSS. No sirve para eso ya que el atributo de estilo ahora está vacío. Ahora lo he abierto en mi navegador. Voy a golpear Refresh. Nada ha cambiado. Eso es perfecto. Verificar que lo estamos haciendo. Correcto. Voy a cambiar este borde Los cinco píxeles azul sólido ahorro abierto en el navegador Refrescar y mira eso. Lo está afectando. Y en realidad, lo que quiero hacer aquí es que quiero crear un enlace aquí y tenemos una copia esto aquí y volver a la página principal. Ahora tenemos un enlace en tu va a ir a código a página. Genial. Ahora, cuando no quisiéramos volver al código una página. Entonces notaste que obviamente hay una diferencia aquí. Ahora de nuevo, el problema radica en esa clase llamada frontera. Está aquí dentro. No obstante, está en su hoja de estilo, lo que significa, ya sabes, si tuviéramos 234 500 páginas íbamos a abrir cada página y editar cada estilo manualmente. Eso no es lo que queremos. Entonces en nuestra página de códigos original, voy a reemplazar este elemento de estilo por el elemento de enlace. Se va a enlazar a nuestro estilo esa página CSS, y cuando refresco la página, estoy haciendo clic entre código y co. Dos puntos html. Aquí, nada ha cambiado. Eso está impactando para que podamos ver qué más está pasando aquí. Voy a ir al código. palmadazo de una página entró en vigor. CO dos palmaditas surtió efecto. Ahora todo lo que hice aquí fue que un poco de CSS toe un archivo en particular, y está afectando a ambos al instante. Entonces si refresco mi página en co dot html y si voy a co two dot html, se ve afectada ambas páginas con éxito. Ahora el principal beneficio nuevamente es el tiempo como programador. Como desarrollador Web, vas a estar pasando mucho tiempo escribiendo html PHP JavaScript, Jake Weary CSS y quieres minimizar cuánto tiempo gastas en tu abrigo la última vez que gastas en tu código usando métodos como CSS externo cuanto más tiempo puedas pasar construyendo otras partes de tu servicio o tu sitio web ahora como otra nota, si tuviéramos otro archivo, no lo hacemos. Pero si lo hicimos y lo llamamos styling dot CSS, no podemos tener dos hojas de estilo en tu. De hecho, podemos tener tantas hojas de estilo como queríamos. Por el bien de este video, sólo tenemos uno. Tu tarea para este video es una tarea bastante larga, y tienes que ir paso a paso a través de ésta primero, crear uno archivado llamado código dot html igual que yo. Entonces quiero que crees un segundo archivo llamado Código a punto html. En tercer lugar, crear un archivo llamado style dot CSS cuarto en el elemento link tanto a co dot html como código a dot html igual que lo hicimos en su elemento de cabeza. Siguiente abre estilo dot CSS y agrega algo de estilo básico a ella. Siéntase libre de usar el borde es una declaración roja sólida de un píxel que hemos estado usando en muchos ejemplos, luego codificar dot html y co dos puntos html crear a desarrollos en cada página para cada desarrollo en la clase llamada border misma clase que utilizamos en este video. En este punto, deberías tener dos expedientes con dos desarrollos en cada uno, para un total de cuatro desarrollos, todos con una clase llamada border. Ahora abre ambas páginas en tu navegador. En este punto, tendrás dos pestañas abiertas, y eres def elementos tendrán bordes. Ahora. Quiero que abras estilo dot CSS una vez más, elimine el borde de ese archivo, guárdelo, regrese a su navegador y actualice el código dot html co dos páginas html de puntos. Ahora. Si lo has hecho todo bien, los desarrollos ya no tendrán fronteras. Y lo hiciste todo simplemente haciendo un pequeño cambio del dedo del pie un archivo, y afectó a dos páginas. 28. clases: Las clases de CSS airean cómo afectamos a múltiples elementos con solo una pieza de código. Ahora, cubrimos esto en CSS interno así como CSS externo. Pero no hemos aprendido de la clase real. Atributo en sí Así que el atributo de clase aquí es un atributo global y puedes etiquetar junto con casi todos los elementos de este video. No vas a aprender sobre CSS, ni te van a probar en ninguno de los CSS que nos acertamos. Pero la parte HTML en la que se probará. Entonces voy a abrir algo de espacio aquí. Iba a llamar de nuevo a esta clase. No te preocupes por el CSS, y lo que voy a hacer aquí es ahora que tengo una clase CSS llamada clase lo va a escribir aquí como clase y abrir esto en el navegador y tenemos nuestro sólido borde de un píxel. Probablemente nada nuevo para ti en este punto. Pero donde esto es más poderoso es la duplicación. Puedo duplicar esto muchas veces me gusta, Así que tengo cinco copias aquí que van a aparecer cinco veces que las mismas fronteras van a aparecer cinco veces de nuevo. Si quito esa frontera les afecta a todos ahora. El truco es que solo funciona con los atributos de clase. Y si cambiamos este, también, también, este es un elemento I D, y le quitamos esta página de actualización de clase. Es el primer elemento que tenemos. Este primer elemento de bloque es el único que tiene fuera un borde. El otro modo de estilo es a través de la idea. No vamos a enterarnos de ello en este video que estará en el siguiente video, pero I D no funciona como lo hace la clase. Entonces si pongo ideas iguales a clase, clase coincide en su estilo, ahorrando refrescar un navegador. Ahora no pasa nada. Podemos tener múltiples clases. Se llama a esta clase a, y queremos que el texto esté centrado. También queremos que se lea el color. Vamos a agregar otra clase a la media aquí, ésta dirá, tiene dos clases, tiene dos clases y para agregar otra clase, todo lo que tenemos que hacer es agregar un espacio que sea una clase separadora, también. Volviendo al navegador. Este tiene un texto de fuente rojo. Parece que está justo en el medio, así que sabemos que está trabajando fuera a clase es la primera clase como esa frontera roja. En la segunda clase tiene el Tex Rojo, y el texto está en el centro ahora. Podríamos hacer esto con múltiples clases, no solo dos, pero podríamos hacerlo con 345 50 si necesitabas saber que está mal visto usar 50. Pero si necesitas usar más de uno, para eso están ahí. Tu tarea para este video es crear un nuevo documento en el elemento de estilo del elemento de cabeza en el área del cuerpo. Yo quiero que escribas cinco D de elementos. Todos tienen que tener los atributos de clase. Después crea dos clases en tu CSS o dentro del elemento de estilo y noméndalas clase de punto y clase de punto, también. Dale estilo de la misma manera que viste en este video. Por lo que la clase de punto debe tener un borde con un píxel, rojo sólido y clase a debe tener texto alineado, centrado y color rojo. Ahora aplica la clase de puntos a las cinco dibs. Aplica clase a dos DIV número 13 y cinco guardando abre este documento en tu navegador y verifica que todas las dips tengan bordes y que dan 13 y cinco también han leído aficionado y centro a texto 29. ID de: Hay otra forma de darle estilo a tu HTML usando CSS. Solo hay trabajos para CSS interno y externo. No funciona para en línea CSS, aunque en línea CSS estaría implícito. lo que estamos hablando se llama I DS, que tienen desarrollo y un conjunto de clase de uso. O en lugar de usar estilo, usamos I d. Y vamos a escribir con CSS interno. Si bien esto funciona con una hoja de estilo CSS externa también. Ahora una clase, recuerda, siempre empieza con un punto y yo d empieza con el signo de número de libra signatura hashtag como quieras llamarla comienza con tu signo de número. Vamos a llamar a esto yo d No vas a ser probado en el estilo, pero vas a ser probado en lo que el HTM real son atributo y los elementos son así que no sientas necesitas conocer todo este CSS que vamos a estar escribiendo en esto. Pero ¿sientes que deberías estar familiarizado con el HTML Ahora cuando abro esto en mi navegador solo dice que esto es un yo d. nada especial, nada único. Pero si añado borde inferior tres píxeles dash y hagámoslo negro, y aplico esto d denteroso I d atributos, y no tiene que llamarse yo tampoco d. Podría llamarse cualquier cosa. En realidad, eso es lo que vamos a hacer. Vamos a renombrar esto a cualquier cosa para igualar en esto. I d atributo coincide con el estilo del signo de número. Si guardo un open this en el navegador, ahora tenemos un borde que tiene tres píxeles de ancho en Lee en la parte inferior, está discontinua y es negra. Es exactamente lo que queríamos ahora, una idea que se supone que es única. Donde una clase CSS recuerda la que comienza con un punto una clase se puede usar tantas veces como quieran, y yo d solo debería usarse una vez ahora en navegadores modernos como el que estoy usando, estoy usando un nuevo, actualizado versión de Chrome y I D funcionará más de una vez. Entonces si vuelvo a las actualizaciones de mi navegador, sabemos que las ideas funcionaron dos veces. Ahora. Los navegadores modernos suelen ser bastante buenos con esto, pero no todo el mundo tiene un navegador moderno. Todavía hay personas que están usando navegadores muy anticuados. mejor no tienen acceso a Internet para actualizar el navegador o no tienen los fondos para comprar una nueva laptop o teléfono o dispositivo móvil de algún tipo como desarrollador Web es nuestro trabajo considerar a todo el que acceda a Internet y es nuestro trabajo para entender que todo el mundo accede a Internet un poco diferente. Y eso significa que tenemos que trabajar con muchos navegadores más antiguos. No hay navegador más antiguo. Toma Internet Explorer seis, por ejemplo, probablemente no renderizará esto de la forma en que lo ves ahora mismo. De hecho, solo podría representar realmente el 1er 1 y el 2do 1 solo tendrá un estilo en blanco. Entonces minimiza ese problema. Sólo queremos usar el mismo yo d una vez para que cualquier cosa se pueda aplicar a este elemento. Pero no debe aplicarse a este elemento en absoluto. El atributo idea es un atributo global. Se puede aplicar a casi todos los elementos, y si estás pensando bien, esto solo se puede usar una vez. Entonces, ¿ de qué sirve usarlo? Toma en cuenta que esta página se podría multiplicar básicamente cinco o 600 veces para, ya sabes, un sitio web de tamaño justo y Si tienes, por ejemplo, una barra de navegación en cada página y quieres cambiar los colores o el borde o donde se sienta en la página, no cambiarías nada de ese estilo. No quieres tener que abrir cada página y cambiar. En cambio, puedes agregar un I D. Al igual que agregarías una clase. Pero esa idea es única de esa barra de navegación ahora. No sólo eso, sino cuando comienzas a meterte en JavaScript y Jake cansado I DS suelen ser la forma más común de seleccionar un elemento. No vamos a hablar demasiado de eso, sino para darte algún tipo de perspicacia tanto JavaScript como J. Query, que es una biblioteca de JavaScript. Tratamos de acceder a este elemento. Podría acceder a los atributos, al texto dentro de él, al HTML dentro de su único anidado. HTML puede acceder a todo, y puedes cambiarlo. Quitarlo, agregarlo, agregarle más, copiarlo un colgante pre. Le nombra cualquier cosa que alguna vez cambie en su página en cualquier sitio web dado. Eso es JavaScript trabajando para ti ahora. El modo óptimo de usar un I D es si ibas a escribir, Hay un borde de un píxel, rojo sólido, y es la única vez que aparece el tiempo Onley, su estilo para esto. En cambio, sacas el estilo por encima de los atributos de estilo, lo pones en CSS y derecho I d. Es igual a cualquier cosa. Entonces ahora no solo se está aplicando nuestro estilo en una hoja de estilos, posiblemente una hoja de estilo externa, sino que ahora tanto JavaScript como Jake, donde se puede acceder fácilmente a este elemento. Las ideas se vuelven mucho más populares, mucho más comunes, lejos te llevas bien con tus habilidades de desarrollo Web. A partir de ahora, no es importante que conozcas el estilo o cómo escribir el CSS. Pero es importante saber qué es un I D y cómo difiere entre una clase. Por lo que tu tarea para este video es crear un nuevo documento. Agrega el elemento de estilo en tu elemento de cabeza, derecha, un desarrollo dentro del elemento corporal similar a lo que hicimos en este video, verdad? A CSS I d. En tu elemento de estilo. Siéntete libre de rebobinar este video en pausa donde necesitas copiar del CSS. Si no estás familiarizado con el CSS. Si estás familiarizado con CSS, siéntete libre de escribir el tuyo propio. El siguiente paso es entonces aplicar ese CSS i d. a su desarrollo. Usamos la idea llamada cualquier cosa, pero puedes nombrarle cualquier cosa que te guste guardar abrir el documento en tu navegador y verificar que el estilo surta efecto. Si el estilo ha surtido efecto de la forma en que lo deseabas, entonces has aplicado un i D a tu elemento con éxito. 30. citas: llegará un momento en el que se necesita cotizar algo en HTML. Una forma sencilla de cotizar algo es simplemente agregar cotizaciones a su alrededor. Esto funcionaría perfectamente bien, sin embargo, como desarrolladores Web, no sólo es nuestro trabajo entender que la gente va a estar mirando estos sitios web, sino también que las computadoras están mirando estos sitios web. Eso significa que a veces tenemos que aplicar marcas especiales solo para computadoras. Toma el motor de búsqueda de Google comprado Google comprado. Por ejemplo, cuando Google compró mira a esta página, quiere averiguar de dónde viene cierta información. Y una forma de hacerlo cuando estamos citando otro sitio es agregar una cotización en bloque. Por lo que tenemos un elemento de cotización en bloque, y esto va a ser sólo un poco de título por encima de él, dijo. Y en la cotización de bloque, hacer o no. No hay Prueba Yoda. Ahora, si guardamos esto y abrimos esto en un navegador, la cotización de bloque sangró automáticamente para nosotros. Ese es un problema resuelto. No tenemos que preocuparnos por inventar ahora, porque Block quote está haciendo eso por nosotros ahora. La mayoría de los navegadores agregarán una sangría, pero no todos ellos bien, y este uno de esos tiempos en los que es genial comprobar tu trabajo en otros navegadores para intentar abrir esta página en Internet Explorer o Edge opera Safari Chrome Firefox. A ver si hay alguna diferencia si no hay diferencias que grandes. Pero si hay una diferencia, entonces vas a tener que trabajar alrededor de ese navegador para asegurarte de que se vea igual que cualquier otro navegador. Ahora hay otra forma de agregar una cotización, y eso es simplemente añadiendo cotizaciones. Pero en cambio usamos el elemento Q que el otro tipo escupió. Y pongamos esto dentro. Q sentido de cotización, usted fue el elegido. Refresca la página, y tenemos cotización automáticamente. No sólo eso, sino que en realidad hay un espacio entre la cotización sobre eso se debe a que hay blancos extra basando aquí. Ahora sabemos que el HTML no es sensible al espacio, así que si agregamos 20 espacios al final del mismo, aún así, voy a aparecer con un espacio en la página real. Ahí vamos ahora tenemos cotizaciones antes y después. Ahora queremos considerar citar las fuentes, y usamos los atributos del sitio en ambos elementos, citar tu fuente realmente sólo tiene que ver con citar algo. Ahora los atributos del sitio valoran lo que debería ser el sitio no debería ser Yoda o en este caso, sería Obi Wan Kenobi. No sería ninguno de esos, aunque los estamos citando, el sitio debería ser en realidad la fuente completa de donde encontramos esa información. Entonces si lo encontramos en Wikipedia, la citación debería ser la UL completa de donde encontramos esta frase en particular. Entonces, por ejemplo, si encontramos esto en Wikipedia podría ser Wikipedia dot com y citar esta. Puede que acabemos de encontrar eso en un sitio de fans de Star Wars o en un libro en particular, pero dondequiera que sea, tiene que ser un enlace real. Por lo que tu tarea para este video es crear un nuevo documento. En ese documento, quiero que uses el elemento de comillas de bloque, y dentro de ese elemento, insertes y dentro de ese elemento, una frase en él. No importa cuáles sean las frases que pueda ser. Cualquier cosa. Entonces quiero que uses el elemento Q e insertes una frase en eso otra vez. No importa cuáles sean las frases pero asegúrate de tener una ahí dentro. Entonces quiero que añadas tu cita para cada frase. Por lo tanto, utilice los atributos del sitio tanto en la cotización del bloque como en el elemento Q. No olvides que no estás citando a una persona individual. El citación es una fuente Usted earl, ahorrando sobre el documento en su navegador y verificar que su cotización en bloque y frase citada han funcionado de la manera que vio en este video. 31. Código de computadora: html es todo sobre semántica. No tanto el estilo, sino más sobre lo que está siendo leído por otra computadora. Piénsalo de esa manera, y cuando lo pensamos de esa manera, tenemos unos cuantos tipos diferentes de códigos de computadora que no sólo van a darle estilo al texto un poco diferente sino que permite a otra computadora leer o HTML y entender lo que es mirando. Entonces tenemos algunos elementos diferentes que vamos a repasar en este video. Vamos a aprender qué código es lo que Samp K B D. Var es primero de buscar texto normal. Este es texto normal, y como puedes ver, parece normal. El texto recubierto es diferente. De hecho, si agregamos otra pieza de código aquí notará que las letras en realidad se alinean donde C es uno siempre a los tres de Dia. Tiene cuatro días. Cinco Espacio es siete aquí. fuente normal y la fuente codificada no se alinean correctamente. Entonces esto es genial si estás escribiendo código muy específico en tu página Web y las letras tienen que estar alineadas correctamente, muy parecido a lo que ves en mi editor aquí Siguiente tenemos muestra este es un ejemplo de muestra . Cualquiera que quieras usar, es una muestra sin embargo, y un pedernal es un poco diferente del código. A continuación, tenemos la entrada de teclado K BT nuevamente se ve un poco diferente, y por último tenemos. Son muy iguales. Variable que en realidad es sinónimo es variable y una vez más todo es diferente. Tu tarea para este video es crear un nuevo documento. Escribe el código de ejemplo teclado y elementos variables. Ponga algo de texto entre esos elementos, luego guárdelo abierto. El documento verificó que cada extranjero se ve diferente. Cada sección luce diferente, y luego una vez que hayas hecho eso, tal vez en algún texto normal puesto al principio, muy al final, puedes usar saltos de línea como lo que hice. El objetivo detrás de esta tarea es entender que no sólo existe una diferencia entre variables, muestras de entrada de teclado y código desde un punto de vista semántico. Pero también se ve diferente desde el punto de vista de un usuario. 32. Strong fuerte: A estas alturas, debes saber cómo hacer algo audaz o cómo agregarle cursiva. Abierto a este punto, sólo hemos utilizado el elemento B en el elemento I negrita y cursiva, respectivamente. Pero hay otros dos elementos que entran en juego también, y esos son fuertes y énfasis. Ahora la forma en que puedes pensar en estos también es audaz. Atrevido y fuerte es más fuerte que Bolt, y E. M es la 1ª 2 letras de énfasis, y siempre escribes un talento para agregar énfasis. Pero hay diferencias entre Bolden, strong y Yem, y sé que la principal diferencia tiene que ver con los lectores de pantalla. Muchos desarrolladores nunca han oído hablar de un lector de pantalla. De hecho, una buena mayoría de los usuarios de Internet acaba de leer artículos por su cuenta. No tienen computadora. Léelo a ellos, sin embargo. Pero hay muchas personas ciegas en el mundo que usan lectores de pantalla para leerles sobre lo que están mirando, y eso ahí mismo está la diferencia primaria. El negrita es simplemente bosqued. Es sólo hacer que las letras sean audaces. Es que es visual, eso es todo lo que es. Pero fuerte es un fuerte énfasis, como se podría decir, Quieres hacer algo ahora mismo o podrías decir Quieres hacer algo ahora mismo es como agregar énfasis Mawr antes de un signo de exclamación y la diferencia entre E. M y yo más o menos exactamente lo mismo. Todo se trata de cómo lo leerías. Por ejemplo. Estoy realmente cansada. Podría estar capitalizado, pero la mayoría de los casos no va a ser. De hecho, podríamos agregar un I el elemento cursiva, y esto aparecería ya que estoy realmente cansada como un poco de énfasis extra. Pero de nuevo, hay puramente visual para lector de pantalla lector de pantalla necesita ese elemento de énfasis. Y de nuevo, cada uno huele todo a semántica. No se trata de lucir diferente. Se trata de una embarcación que se está estructurando adecuadamente. Entonces para un lector de pantalla, no va a decir que estoy realmente cansado. Un lector de pantalla va a agregar énfasis adicional de que realmente estás enfatizando la palabra , verdad. Por lo que lector de pantalla probablemente leería la frase más a lo largo de las líneas fuera. Estoy realmente cansada. énfasis casi cambia la pronunciación de la palabra. Ahora bien, si quieres escribir un artículo sarcástico que sea amigable con el lector de pantalla, usarías mucho énfasis, Muchos elementos E m. sarcasmo suele ser expulsado de mucho énfasis, posiblemente demasiado énfasis en la mayoría de los casos. Por ejemplo, si un lector de pantalla estaba leyendo una frase que decía algo a lo largo de las líneas fuera, el hombre que estaba de pie en la fila de McDonald's se puso la mano en el bolsillo y agarró un puñado de cambio. Fue entonces cuando se dio cuenta de que era realmente rico. Eso es sarcasmo. Sabe que no es rico. Ese es un escenario en el que usarías énfasis en lugar de solo I. Así que mucha gente en este punto se pregunta, Bueno, ¿dónde usarías negrita o simplemente metalica? Si estamos agregando especial énfasis para lectores de pantalla de todos modos, ¿para qué sirve usar cursivas planas de Boulder? Bueno, la idea es, para las personas que están viendo visualmente un sitio o mirando visualmente tu artículo, Bolt llama mucha atención. Entonces, si tienes un párrafo entero de texto solo regular y luego tienes una frase que acaba de plegarse, puede que no necesariamente tenga que destacar de manera diferente. Para un lector de pantalla. Podría. Es posible que necesite leerse exactamente de la misma manera en que el texto normal sería rojo, pero quieres que los ojos de alguien se sientan atraídos. Podría ser un eslabón. Podría ser un botón podría ser algún tipo de llamada a la acción. O si solo quieres agregar cursiva, o si quieres que alguien ponga la boca sobre una palabra específica para mostrarle la definición o dado poco tip de herramienta o alguna ayuda adicional que obtienes en cursiva porque esas no son necesarias para lectores de pantalla. Screen Reader no le importa Si puedes poner la boca encima o no es que te está leyendo el artículo. No es tan importante, así que se va a saltar por encima de la I. Pero alguien mirando visualmente tu sitio web de nuevo va a llamar la atención, y en realidad podrían tomar medidas al respecto. Ahora esa es la diferencia entre negrita y fuerte y cursiva y énfasis. A menos que tengas un lector de pantalla, no hay tarea para este video. Probablemente podrías ir y conseguir un lector de pantalla, extensión de cromo o Firefox. Agregar en o en vender en app en tu teléfono si realmente querías. Pero si no tienes naturalmente uno de esos ahora mismo, solo sabes cuáles son las diferencias y sé muy consciente cuando estás escribiendo un artículo cuando estás usando HTML, tienes que darte cuenta de que va a haber gente que no puede ver físicamente lo que se les está leyendo. Y si empezamos a hablar de optimización de motores de búsqueda a un motor de búsqueda, estos son elementos muy, muy diferentes. 33. Elementos de cabeza: el elemento de cabecera HTML, como vemos aquí mismo, forma parte de dos grandes secciones de ese documento. Modelo de objetos el D um, que es HTML. Todo tu HTML entra aquí, y tu navegador crea ese modelo de objeto de documento. Y hay dos secciones primarias donde pones tu abrigo en la cabeza y el cuerpo. El cabezal no va muy profundo. Esa jerarquía es bastante corta y consta de elementos como Título. Pero hay otros elementos. Por lo general, elementos que en realidad no ves surten efecto en una página que ponemos aquí ahora . El elemento titulo obviamente entra en vigor de inmediato, y lo vemos en la pestaña de cualquier ventana que abramos. Sabemos que el elemento de estilo también debe ir en la cabeza, porque ahí es donde se renderiza un CSS. Ponemos su estilo y están en el navegador, dice derecho, Esta información necesito aferrarme y aplicarla al cuerpo. Ahí hay otro elemento llamado base. Se trata de un guión de autocierre. Se parece mucho al estilo. No obstante, en lugar de poner estilo dentro de un script, ponemos javascript. Nos hemos ocupado de añadir CSS externo, y usamos el elemento link y eso entra en la cabeza también. Y por último, tenemos el metaelemento, y teníamos toda clase de información para una metaetiqueta aquí. El metaelemento es donde se agregan cosas como palabras clave a su página o la descripción de su página . No se limita solo a eso, sino que esas suelen ser las dos metaetiquetas más populares que utilizamos. No, no vamos a repasar todos los meditados en este momento, pero estos son los elementos más comunes que se utilizan dentro del elemento tenido. Tenemos enlace de guión autocierre basado en estilo de título, auto cierre y meta auto cierre. No hay tarea para este video, pero es importante que sepas que estos elementos deben ir en el elemento de cabecera así como la sección de cabecera de tu página. Es muy importante que sepas que agregar el título al cuerpo de tu página no va a hacer mucho puede o no tener el efecto deseado que quieres en cada navegador ,sobre , todo los navegadores más antiguos que eran mucho más estilo estricto. Sabemos que podemos poner dentro del cuerpo si queríamos, pero debemos ir dentro de la base de la cabeza siempre va dentro. El guión de cabeza puede ir básicamente a cualquier lugar, y uno de esos lugares está en el enlace de cabeza. Cuando estás vinculando a una hoja de estilo externa tiene que ir adentro. tiene que cargar la cabeza antes de que se cargue cualquier otra cosa en la página y tu meta absolutamente ha salido adelante es que es el único lugar útil para ello. 34. metadatos: metaetiquetas en el encabezado que se veía así. Siempre van dentro del elemento de cabeza, y hay toneladas de diferentes tipos de metaetiquetas que podemos usar. Y luego todos empiezan con Metta. Pero la diferencia es que hay atributos medicamentos para metadatos. Se trata de datos adicionales que ayudan a la página a definir quién es. Es la personalidad de la página. No necesariamente lo veas en la superficie, pero los raspadores de motores de búsqueda incluso Facebook usarán metadatos para averiguar de qué se trata las páginas . En tan solo un vistazo, hay toneladas de diferentes atributos de metadatos de metadatos. Y así encontré esta página. Te lo compartiré y lo pondré en las páginas. También puedes descargar esto, y voy a pasar por unas cuantas de estas contigo. Samata Care Set, dijo un personaje, es utf ocho. Esa es una norma general. Eso significa que los símbolos especiales mostrarán un símbolos especiales en lugar de normalmente una caja de diamante negro con una pregunta. Marcarlo dentro de ella. Palabras clave. Esta es una de las más populares que pones tus palabras clave para cada página ahí dentro. Si estás escribiendo un artículo sobre HTML hecho unas etiquetas, cambiarías el contenido. Este atributo dos hizo una etiquetas probablemente tenía una más ahí llamada HTML Fun fact motores de búsqueda utilizados para usar el made a key words cuatro rankings Hasta que alrededor del momento en que Google llegó, solíamos llenar nuestras palabras clave con 506 100 palabras diferentes. Si pudiéramos, simplemente metemos tantas palabras posibles y variaciones de cada palabra en este elemento en particular , y los motores de búsqueda instantáneamente nos clasificarían más arriba. Por suerte, ese ya no es el caso que no funciona. Probablemente deberías tener no más de 10 ni más de 10 y un buscador tiene la posibilidad de mirar tu página y decir que esto probablemente sea solo spam. El siguiente es descripción. Este año dice 150 palabras fuera. Mantenga su descripción más corta cuando esté buscando algo en Google. Cuando haces una búsqueda por Internet en Google, esa descripción no suele ser muy larga. No son 150 palabras. Es más como 150 personajes. Mi consejo Mantenlo más corto que un tweet 140 caracteres o menos. El tema. Esto en realidad está mal aquí. Si hubiera usado citas dobles en lugar de citas regulares o apóstrofes. Este problema no aparecería En este momento. El navegador miraría tu sitio web, y creo que estos son los atributos y que esto es sólo basura. Tenemos derechos de autor si hay un lenguaje de copyright, por lo general un código de dos caracteres. Sí, para el español. D para robots alemanes. ¿ Quieres un robot? Un buscador para seguir la página de un índice Última vez que se revisó. Ah, saltemos algunos de estos algo que es un poco más común, como el autor. Pusiste tu nombre tu dirección de correo electrónico ahí si querías. personal, lopersonal,no pondría ahí tu dirección de correo electrónico. Creo que muchas posibles Raspa tu página, encuentra tu dirección de correo electrónico y simplemente empieza a enviarte spam. Pero tu nombre o tu manejador de Twitter suele ser encontrar dueño Tu nombre simplemente saltando a través de algunas de estas. Aquí tienes un medio. ¿ Qué es? ¿ Es bloggers? Se flog es un canal de YouTube y esos son todos solo nombre y contenido. Puedes explorar esta página por tu cuenta. lo único que notaría que el hecho un texto cerrado de manera incorrecta. etiqueta Armida debe tener una etiqueta de autocierre y que sigue las reglas de X HTM fuera HTML estricto pero utiliza como ejemplo general. Nombre es un atributo contenido es atributos. Tenemos unos cuantos aquí llamados http Carcaj, señora Cashing. ¿ Cuándo caduca? Mawr caducidad, etcétera, etcétera. Están incluso mawr aquí. Úsalo para si estás creando una aplicación. Internet Explorer hizo un tags Cuando eran ocho metaetiquetas y así sucesivamente y así sucesivamente. Siéntase libre de explorar esta página. No voy a repasar todos ellos. Probablemente sean aún más metaetiquetas por ahí. Podría querer subirse a Google y hacer algunas investigaciones tú misma. No es necesario que todos los hombres atacen tampoco. Ah, muchos desarrolladores nuevos. Piensan que tener cada cabra meditada posible ahí en cada página que tengan les va a ayudar a clasificar mejor. Va a hacer que su página sea mejor para compartir social, como en Facebook y todas esas cosas, y ese no es necesariamente el caso. De verdad solo necesitas tus importantes. palabras clave del conjunto de caracteres, descripción y robots son probablemente cinco de los 10 primeros. Ahora tu tarea para este video es llegar realmente a esta página y solo explorar Leer a través esto. Podría parecer mucho, pero en realidad no es tanto. Mucho es autoexplicativo, y si no sabes lo que es uno en particular, sube a Google y estoy seguro de que hay una respuesta para ello. 35. Favicon: un tejido en es una pequeña imagen que ves en tu pestaña de ventana. Un gran ejemplo de esto es cuando vas a Google en la pestaña. Dice Google y justo al lado tiene esa pequeña imagen. Casi todos los sitios web tienen uno de estos en un at a fabric en usted utilizó el elemento link al igual que cómo enlazamos con otras fuentes, como una hojas de estilo en cascada externas. El relacion sería un ícono, y luego lo vinculaste usando H. R F. Normalmente es fabric on dot I. CEO Seo es la extensión de icono, aunque muchos navegadores modernos también aceptan imágenes como PNG y el tipo su imagen slash icono X y lo cierras y eso es todo de tela. Es el problema con la tela en es el punto I seo extensión. Allí no se crea fácilmente la extensión del icono. Plug de photoshopped ins. Dependiendo de la fototeca que tengas, puedes o no crear un icono. Entonces en cambio puedes usar un PNG y eso funciona normalmente justicia. Encuentra en un navegador moderno ahora iconos o lo que usas para todos los navegadores. Aceptémoslo en los navegadores realmente, realmente viejos porque todavía hay gente que los usa, y también es aceptado en los navegadores modernos. fabric on suele ser de 16 píxeles por 16 píxeles, lo que no es muy grande, y por lo general es que está en algún lugar de su servidor. Tu tarea para este video es crear un nuevo documento, y luego quiero que encuentres o crees tu propio punto i c e o tu icono fab con dot. Si no puedes guardar ningún archivo de Photoshopped, cualquier otro servicio de imagen que estés utilizando como punto i seo siéntete libre de subirte a las imágenes de Google y simplemente buscar una imagen de punto I CEO. Entonces quiero que aplique el tejido en su página, guardando abra el documento y verifique que el tejido por sí solo se muestre correctamente. Si ves la pequeña imagen por tu título en la pestaña de tu ventana, entonces has agregado un tejido en 36. Entidades: HTML tiene algunos caracteres reservados. Por ejemplo, si solo tratas de escribir un signo mayor que una lección en HTML, no va a aparecer de la forma en que piensas. Por ejemplo, si dije mi nombre es y luego pones un marcadores de posición ahí llamado nombre, pero tienes el mayor que menos que signos en su se ve como un HTML Elements guardar eso. Ábrelo en tu navegador, y no aparece. No obstante, si miras en tu código fuente, está ahí dentro. Eso se debe a que tu navegador va con el dedo automáticamente. Supongamos que eso es, por alguna razón, alguna manera, un elemento. Entonces, en cambio, necesitamos usar lo que se llaman entidades HTML. Estas entidades típicamente comienzan con un ampersand que es el y firman y terminan con un punto y coma , y tienen alguna variación de letras entre ellas. Entonces si dijimos lt los soportes para menos que y hagamos uno más aquí, tenemos GT. Eso es mayor que, y voy a aplicar estos a nuestro elemento, guardarlo vista en el navegador, y aparece la forma en que queríamos aparecer. El menos que registro aparece mayor que simple aparece. Nuestro elemento incluso aparece ahora si vemos nuestra fuente, eso es porque lo que hicimos fue correcto. La entidad HTML real para el mayor que y menor que los símbolos que es eran mayores de lo que realmente la escribimos un largo camino en lugar de escribir un carácter porque tu navegador interpreta el carácter como parte de un elemento. Ahora estas entidades vías respiratorias para crear símbolos, y no se limita sólo a menos o mayor que si quisieras agregar El y signo parece bastante fácil, pero en html en realidad sería un M P que sería y M por ciento. Esa es la firma y. Pero también funciona para personajes que quizás no tengas disponibles en tu teclado. Por ejemplo, el símbolo de copyright la mayoría de los teclados que he visto no tienen un símbolo de copyright. Ese personaje simplemente no es lo suficientemente común como para poner realmente un teclado. Entonces en cambio, en HTML, escribimos y copiamos semi cool, y eso es un símbolo de copyright, e incluso funciona para espacios extra. Entonces si dijimos espacios extra agregados Atanas aquí versus y B S P A significa espacio no rompiendo , solo agregamos número de estos aquí. Vamos a echar un vistazo a lo que nos está presentando una página. Ahora tenemos un menos de lo que tenemos mayor que el símbolo ampersand aparece redactores trabajando espacios extra en nuestro código. Tenemos todos estos espacios que no aparecen. El navegador asume automáticamente que en realidad solo significaba un espacio individual. Ambos todos estos personajes. Con todas estas entidades, hemos agregado espaciado adicional. Son entidades HTML para casi todos los personajes. Tu tarea para este video es crear un nuevo documento. Yo quiero que escriban las entidades menos de mayor que un por ciento de derechos de autor y no rompiendo el espacio ahorrando abrir el documento. Verificar que los personajes se hayan mostrado correctamente. Y si quieres una lista de MAWR de estas entidades, siéntete libre de subirte a Google y hacer una búsqueda de una lista de entidades HTML 37. Formularios: formers aire cómo enviamos datos a un servidor. Utilizas formularios todo el tiempo. Úsalos en formularios de restablecimiento de contraseñas Loggins, formularios de tarjetas de crédito, etcétera. Cada vez que inicias sesión en un sitio web, has utilizado un formulario. El elemento que utilizamos es el elemento de forma, y va dentro. El cuerpo tiene una etiqueta de apertura y cierre, y hay ciertos elementos que utilizamos dentro de una forma. Ahora estos elementos se pueden utilizar fuera de una forma, pero son más útiles dentro de una forma. Y estos son pero no se limitan a la entrada, que es un botón de área de texto de autocierre un solo botón y seleccionar. Revisaremos el botón de área de texto de entrada y seleccionaremos elementos un poco más tarde. Ahora mismo, sólo estamos cubriendo lo que es un formulario. Una forma tiene algunos atributos primarios que son extremadamente importantes. El 1er 1 es método, y éste suele ser get o post. Ahora, cuando usamos, obtenemos y enviamos un formulario, la información de nuestros campos de entrada como área de texto de entrada, seleccione los que van a aparecer en la U L Bar. Entonces si estás intentando iniciar sesión en alguien, no quiero usar este método. De hecho, una buena regla general es cualquier momento, cualquier tipo de información que incluso podrían considerarse como sensibles necesita ir del navegador a su servidor. No use get En su lugar use post. Enviará la misma información, pero no pasará por la u. R L Bar. En cambio, va silenciosamente en segundo plano, y luego tenemos nuestros atributos de acción, y los atributos de acción es donde debería estar yendo la información. Entonces si va a esta página, va a ir al código dot html. Si va a una página de servidor, posible que desee enviarla para iniciar sesión dot PHP. PHP es una página del servidor. No es una página de tipo HTML estática, y la acción es el archivo que quieres enlazar para saber que no tiene que ser relativo. Tú, Earl. Podría ser un euro exacto. Ahora así es como se ve un formulario en HTML. Si vemos esto en el navegador en este momento, no va a aparecer con mucho, y todavía no sabemos qué botón de área de texto de entrada o seleccionar realmente hace. Pero es vital que entiendas el diferente método y acción, por lo que tu tarea para este video simplemente se practica esto. En primer lugar, quiero que crees un nuevo documento, y solo quiero que practiques la escritura. El elemento de forma forma aire tan vital en HTML, es como transferimos información del navegador a un servidor u otro servicio. En realidad es tan poderoso que podría ser seguro decir que en realidad podría ser uno de los troncos de la Web. Es importante saber cuáles son los atributos del método de acción. Por lo que tu tercer paso es escribir el método en atributos de acción. No tienes que poner nada específico dentro de ellos, solo escríbalos. 38. Atributos de elementos de forma: elementos de forma son elementos que se pueden utilizar fuera de un formulario, pero son mucho más útiles dentro de un formulario. Estos elementos son típicamente el elemento de entrada, área de texto de cierre automático, elementos de selección y botón. Y este video. Vamos a repasar estos muy rápido, justo como un resumen rápido. Y en futuros videos, vamos a repasar estos uno por uno. 1er 1 que queremos pasar es el elemento de entrada. El elemento de entrada es simplemente un campo de entrada. Es muy pequeño, pero también es muy poderoso. Ahora si solo escribo la entrada, es una También tenemos que añadir un valor de texto aquí. Estabamos diciendo, el tipo de entrada es fiscal y nos meteremos en el tipo en tan solo un momento. Por lo que ahora tenemos una vista previa de la página y tenemos un área de texto que puedo escribir aquí. Ahora el usuario tiene alguna forma de interactuar con tu página, tus páginas, no solo información que va a ellas. Pueden enviar información. Back Type tiene muchos valores diferentes que podemos usar. Texto creará un botón de cuadro de texto creará un botón, pero esta vez no lo vamos a utilizar. dijo. Vamos a aprender sobre el elemento de botón que puedas en un color de casilla de verificación. De hecho, repasemos cada uno de estos para que podamos ver cómo se ven en realidad. Comienza desde el principio. Texas uno. Casillas de verificación. Otro. Llegaremos a la fecha de color. Esos son ambos html cinco. Correo electrónico. El navegador intentará validar la dirección de correo electrónico. Si pones la madrasa e intentas enviar el formulario y no es una dirección de correo válida, tu navegador dirá por favor y volverá a poner una dirección de correo válida. Eso es solo archivo HTML cinco. Este es otro grande. Si quieres toe subir un archivo en particular que utilices tipo es igual a archivo oculto. Esta no aparecerá, así que solo veremos una línea vacía en su página. Deshazte de esos tejanos. Ya no es aplicable. ¿ Y un número? Se puede agregar un número ahí dentro o una contraseña. Eso significa que cuando alguien escribe en esa caja, eso no va a aparecer como texto normal. Aparecerá como esos puntos de bala. ¿ Qué pasa con la radio? Podríamos incluso poner la u. R L. Hay otros, pero estos son los que nos vamos a quedar ahora mismo, porque estos son los más comunes ahora, antes de las revisiones en el navegador, Simplemente voy a etiquetar estos ahora. Esto lo veo en el navegador. Tenemos un campo de texto debilitar derecha en este campo de texto con una casilla de verificación. Podemos volver a seleccionar un color. Esto es sólo HTML cinco por fecha otra vez. Esto es sólo HTML. Cinco. Los navegadores antiguos no pueden tratar con el correo electrónico de campo de color y fecha. Se parece mucho a un campo de texto, pero cuando intentas enviar el formulario y no funciona, el formulario no se enviará automáticamente. De hecho, un pequeño error aparecerá justo arriba o debajo de él. Poco consejo de herramienta en tu navegador dirá por favor bajo un archivo de dirección de correo electrónico válida. Se puede. Es como archivar oculto. No aparece nada número. Estoy tratando de teclear encendedores, y aquí nada está funcionando, pero los números van a funcionar. Hasta puedo moverlo hacia arriba y hacia abajo. Contraseña luce como una contraseña normal Botón de radio. Esto si quieres que alguien seleccione una de múltiples opciones y una u L. Estás enfermo. Pusiste la dirección exacta del sitio web ahí dentro, esto es validación de cinco HTML. Y si tu navegador no piensa que es una u R L. válida No te va a dejar parte de la forma otra vez te va a dar un poco de aire por encima o por debajo de ella, diciéndote que introduzcas un euro válido en un título rápido aquí, llámenlos Campos. Y aquí vamos a llamar a estos atributos porque eso es lo que vamos a aprender a continuación. Aquí hay algunos atributos que necesitas saber. El 1er 1 es los atributos de valor. El valor es el valor que quieres poner aquí. Entonces si dijimos campo de texto y el valor es pre campo texto página de actualización, el campo de texto ya tiene texting allí. Es exactamente lo que especificamos. Debilitar. Selecciónelo. Podemos borrarlo. Hacemos lo que queramos. Otra sería. Vamos a usarlo en el correo Auto focus. Por lo que en html normalmente podríamos simplemente escribir auto focus. Pero debido a que escribimos x html, que es mucho más estricto, escribimos auto focus es igual a auto focus. Ahora, cuando refresco esta página, no importa lo que haga no importa a qué campo vaya. Cada vez que refresco la página, me meten automáticamente en el campo de correo electrónico para que no tenga que hacer clic en él. Podría empezar a escribir. Ese es un paso menos para el usuario. Eso a menudo significa que van a llenar la información un poco más rápido. Ahí hay otro para las casillas de verificación. Check. Es igual a comprobado, por lo que la casilla de verificación no se marca en este momento. Pero si actualizamos la página después de agregar esos atributos y ahora es por defecto, se agrega de nuevo. Podemos quitar eso si quisiéramos. Obviamente, casillas de verificación solo funcionan para cosas que se pueden marcar, como una casilla de verificación o una radio. Y el autoenfoque realmente solo se usa en campos en los que realmente ingresas texto. Ahora agreguemos otra. Vamos a desactivar uno que tenemos deshabilitado es igual a deshabilitado, y notarás que el campo URL aquí está deshabilitado. En realidad cambie un poco de color, y no puedo hacer clic en él. Cuando hablamos de números, podemos sumar un mínimo y un máximo. Algunos hombres con digamos mínimo es de 10 y el máximo es de 20 Ahora éste es un poco si puedo poner en cualquier número escribiéndolo. Pero cuando uso un poco de flechas, no puedo ir más alto que 20 y no puedo ir más bajo que 10. Ahora si queremos que se lea un campo, sólo eso significa que no pueden editarlo. Utilizamos los atributos de solo lectura. Pongo eso en el campo de texto. Ya sabes, es cuando pongo mi ratón sobre un campo fiscal normal cambia el cursor. Este caso, no lo hace cuando hago clic en él, no pasa nada. Todavía puedo seleccionar el texto. Simplemente no puedo cambiar nada de eso. Eso significa que hay un campo disponible, pero se supone que sólo debo leerlo como el usuario. Se supone que sólo debo leerlo otro gran positor. Pon eso en la contraseña, y aparece en segundo plano. Ahora no es texto seleccionable, y desaparece en cuanto escribes en él. Y cuando no hay nada, aparece automáticamente Placeholder como ah, advertencia rápida no siempre funciona con Internet Explorer, por lo que a veces cuando se agrega un placeholder para un Internet Explorer, incluso algunos de las versiones más modernas de Internet Explorer. Simplemente aparecerá como un campo en blanco, así que no necesariamente confíes en esto. Pero podrías usar este atributo como una forma de mejorar tus campos para navegadores más modernos. Y si quisiéramos agregar una longitud máxima máxima máxima máxima y esto funciona para áreas de texto, si queremos, digamos, la longitud máxima va a ser de ocho caracteres ahora, si escribo estos números fuera, soy presionando nueve en este momento y no pasa nada. Personajes máximos ocho. Y entonces, por último, tenemos auto completo, y éste en realidad no lo es. Auto complete es igual a auto completado. Es tampoco. Mucho completo está encendido o apagado ahora. Si sí lo querías encendido y alguien estaba escribiendo su dirección de correo electrónico y lo han escrito en dirección de correo electrónico en un formulario similar antes de que el navegador lo va a reconocer e intentar llenarlo automáticamente por ti. Ahí un par más que quiero ir por encima 1er 1 es nombre. Este es un atributos globales, y si tienes cuatro, método es obtener el nombre va a aparecer en la barra u. R L, por lo que archivo sería capaz de archivo nombre es igual a oculto o, en este caso, solo H. Y lo que eso se vería es que tendrías tu página web dot com slash co dot html page, y luego tendrías lo que se llama una cadena de consulta. Hablaremos de esto más adelante en el video get, pero como un ejemplo rápido, aparecería con Name H es igual a cualquiera que sea el valor aquí. Entonces si tuviéramos un valor de 123 H es igual a 123 y realmente vamos a mover esto aquí y ponerlo arriba con la dirección de correo electrónico y digamos que el correo electrónico es igual a y sea cual sea ese valor. Entonces digamos el valor para la dirección de correo electrónico que alguien puso en la dirección de correo electrónico como correo electrónico en gmail dot com, y esto aparecería como correo electrónico en el email dot com. Por lo que literalmente volvería a ir a esta página. Hablaremos más de eso un poco más tarde en otro video, pero eso es rápido. Cuál es el atributo nombre Will Dio. Por supuesto, todos estos pueden tener un I D. No pueden tener clases y todos los títulos. Todos estos son atributos globales ahora. No hay tarea para este video, sin embargo, tal vez quieras ver este video solo una vez más, aunque esté en avance rápido solo para tener un buen control de lo que está pasando aquí. Hay mucho que saber allí muchos atributos diferentes para el elemento de entrada único, y vas a necesitar saber, Se puede usar un Marcador de posición en una entrada oculta? Si bien técnicamente, sí, pero está oculto, así que realmente no va a hacer nada. ¿ Se puede poner un auto focus atributos en un botón de radio? lo mejor So, tal vez experimentar con alguien que pero lo más importante a saber son estos atributos. Y en futuros videos repasarán el botón de área de texto de entrada diferente y seleccionarán elementos individualmente sin todos estos atributos, y solo echarán un vistazo a cómo operan realmente dentro del navegador cuando alguien está trabajando con ellos. Cuando un usuario realmente está usando estos elementos 39. Camiones de entrada: El elemento de entrada es cómo agregamos entrada a una página que permite a un usuario comunicarse con nosotros. Pueden poner en texto, presionar un botón de enviar y esa información vuelve a nuestro servidor servidor, pueden luego reaccionar ante él y mostrarles la información adecuada. Al igual que cuando inicias sesión en Facebook, inicia sesión en tu propia cuenta. Facebook. Entiende que iniciaste sesión como te vas a dar un feed personalizado. Entonces para esto, vamos a decir que tipo es texto que es solo campo de texto normal. Y sólo para que sepas cómo es esto, sólo un campo de texto normal. Ahora también podemos agregar un Marcador de posición. Llama a ese nombre, y cuando refresco la página es dice El nombre no es seleccionable, pero te da un indicio de lo que se supone que es. Valor. El nombre de pila podría ser cualquier cosa. Este es solo el valor predeterminado. Es posible que no siempre necesites un valor predeterminado, pero si necesitas uno, lo pones ahí. Y si quería cambiar el ancho de este elemento de entrada, utilizó el tamaño. Atribuye el tamaño, atributos cuántos caracteres de largo se supone que debe ser. Entonces cambiemos a 50 y cuando actualicemos la página, se hace más larga. Recuerda, se trata de caracteres, no de píxeles, porque si dijéramos 500 píxeles, eso debería ocupar aproximadamente el 45% de mi pantalla. Pero debido a que funciona en personajes y no en píxeles, ocupa lo que parece ser 250% de la mente pantalla superior. Recuerda que el tamaño se basa en caracteres, no en píxeles. Si querías autoenfocar, solo tienes que escribir enfoque automático, y cada vez que actualices la página, puedes empezar a escribir automáticamente. No necesariamente tienes que hacer clic en el campo. Puedo hacer clic fuera de ella, refrescar la página y seleccionarla automáticamente para mí. ¿ Sabes qué pasa si duplico esto? Hay auto enfoque en dos campos. ¿ Qué va a pasar? Y auto enfoque en el primer campo. Algunos navegadores pueden enfocarse automáticamente en el último campo. enfoque automático debe ser único para una página individual. Significa que si tienes una página de inicio de sesión y debes enfocarte automáticamente en la dirección de correo electrónico o nombre de usuario . Por lo general es el primer campo de un formulario que está auto enfocado, pero tampoco necesariamente necesitas usar eso y vamos a cambiar este apellido de un dedo y vamos a desactivar este. Ahora puedo cambiar el nombre, pero no puedo cambiar el apellido. Puedo seleccionarlo, pero no puedo cambiarlo. Entonces, esencialmente, este es tu campo de entrada. Ahora, en un video anterior, aprendimos sobre los diferentes tipos de entrada. Los campos no tiene que ser un área de texto. Podría ser botón de opción casilla de verificación. En realidad podrías incluso ser un botón en sí mismo. Por ejemplo. Veamos qué sucede cuando cambiamos el tipo a botón. Lo único que realmente funcionó fue el estatus de valor Skywalker y está deshabilitado. No puedo hacer clic en él. Y el tamaño del trabajo con discapacidad es irrelevante. Marcador de posición era irrelevante. Refresca la página. Nada más cambia. Sabemos que esos son los únicos atributos que están disponibles para este. Por lo que tu tarea para este video es crear primero un nuevo documento. Y luego quiero que creéis para introducir elementos de texto. Por lo que escribes a los elementos de entrada. El atributo de tipo es igual a texto, y luego quiero que desactives uno de ellos, mantengas uno habilitado, mantengas el otro desactivado, y luego quiero que escribas un campo de entrada más. Este va a ser tipo es igual a contraseña. No lo viste en este video, pero quiero que lo explores por tu cuenta. Cambia el tipo del campo de entrada a contraseña y escribe dentro de él. Vea la diferencia entre un campo de texto normal en un campo de texto de contraseña guardando abra el documento y verifique que todos sus campos funcionen correctamente. 40. Textarea: el área de texto es cómo se escriben grandes porciones de texto. Entonces si le estás pidiendo a alguien que te escriba un ensayo, vas a querer usar el área de texto El área de texto se ve igual que este es un área de texto. También va dentro del elemento de forma al igual que el elemento de entrada del que aprendimos. Y ésta también toma una etiqueta de cierre. No es auto cierre, y la razón de eso es porque en realidad estás poniendo algo dentro de él. A diferencia del elemento de entrada, éste no toma un valor. Técnicamente, esto sería incorrecto si quisieras agregar un valor. Pones el valor aquí dentro. Echemos un vistazo a esta página. Te vas a dar cuenta de un par de cosas diferentes. En primer lugar, es muy pequeño, no casi suficiente espacio que necesitas realmente escribir algo valioso en él. En segundo lugar, puedes redimensionarlo. Eso significa que si quería más líneas aquí, todo lo que hago es golpear turno, entrar en más líneas en la mayoría de los navegadores, incluso puedes simplemente golpear, entrar y agregar más líneas. Si esto es demasiado pequeño, crea una barra de desplazamiento para ti. Ahora, una cosa de la que debes tener mucho cuidado es que es sensible al espacio. Eso significa todo este espacio aquí que, ya ves, se trata de una línea completamente nueva más todo este espacio adicional más el espacio al final. Te refrescaré y te mostraré aquí y luego seleccionaré todo esto. Este es el espacio al principio. Este es el espacio al final de la línea. Al igual que ven aquí ahora para eliminar que no agreguen ningún espacio en blanco extra ahí dentro. Entonces elimino el espacio en blanco hit refresh y el valor está ahí dentro. Entonces vamos a querer hacer esto más grande. Entonces en lugar de agregarlo con, les llamamos columnas. Entonces para este, llamamos Coles es el atributo. ¿ Y cuántas columnas queremos? Digamos que 150 ahora. Estas columnas se basan en el ancho del carácter dentro de ella. Por lo que cada letra sería considerada una columna. 150 no es un valor de píxel. Si fueran 100 50 pixeles, sería probablemente alrededor de 1/5 a 1/4 del tamaño del ancho actual del mismo. Ahora mismo. Ahora, por defecto, tu área de texto tendrá que tal vez tres filas, dependiendo del navegador. Ro, es cuántas líneas diferentes hay. Entonces este es el segundo cambio vial que cambia la rosa. Si quisiéramos sumar 10 filas. Ahí vamos. Tenemos 10 filas ahora, volviendo al valor predeterminado que ven aquí. ¿ Y si quisieras en la tercera fila algún impuesto adicional. Por lo que sólo les estás dando una pequeña plantilla rápida. Plantilla a continuación. Hit. Entrar. Entonces ahora estás en el hit de segunda fila. Introduce tu en la tercera fila. Ahora, esto dirá cierta fila y 1/3 fila está en el medio ish. Es decir, no es donde se supone que debe estar. Si lo queríamos de derecha a izquierda, tenía que ser a la izquierda de la página HTML, lo que significa que esto tiene que estar justo encima. Ahora. No tenemos espacio adicional, pero esa segunda fila tiene algo de espacio. Y tal vez no queramos eso tampoco. Miembros Muy sensible al espacio. Entonces si nos deshacemos de ese espaciado, guárdalo, refresca la página. Ahí dentro no hay nada más que una nueva línea. No, un área de texto también puede tener un Marcador de posición y navegadores más modernos. A este mundo se le va a llamar Marcador de posición de muestra en un lugar donde sólo aparece cuando no hay impuestos aquí. Entonces si selecciono todo esto y lo elimino, vuelve a aparecer un modificador de posición de muestra. Esto no funciona con todos los navegadores, pero la mayoría de los navegadores modernos excepto el Marcador de posición, especialmente en un área de texto. Por supuesto, se puede agregar el nombre atributos I. D. Título de estilo de clase, etcétera, etcétera. Sigue y sigue en todos esos atributos globales de los que estás consciente en este momento también están disponibles en el área de texto. Por lo que tu tarea para este video es primero crear un área de texto, crear un nuevo documento. Si no lo has hecho primero, entonces crea el área de texto. Entonces quiero que cambies la columna con o qué ancho es el área de texto a 100. Cambia el número de filas dedo del pie cinco, y luego quiero que escribas tu nombre en la primera fila. Pero quiero que escribas apellido en la tercera fila, y deberías conseguir algo que parezca algo en estas líneas. Ahora, esto es principalmente una prueba en el espaciado debido a que el espaciado es crítico en esto. Y también te muestra que puedes usar múltiples líneas en lugar de solo una línea individual. ¿ Al igual que qué? El elemento de entrada te permite dio, luego guardar abrir tu documento. Verifica tu nombre y apellido en diferentes Rose, como viste en mi ejemplo. Y si todo salió de la forma en que funcionó en este video, entonces ya estás todo listo. 41. Botones: el elemento botón tiene mucha potencia, sobre todo dentro de una forma. No sólo los botones parecen una gran llamada a las acciones, así que si estás tratando de conseguir que alguien le compre, normalmente usas un botón o algo muy llamativo o un enlace grande y colorido para que alguien haga clic en ese botón. Pero por lo general, los botones hacen el truco, y puedes darle estilo a un botón de múltiples maneras, diferentes, y a menudo vienen con su propio tipo de estilo. En este video, vamos a ver los diferentes tipos de botones en una forma. Contamos con campos de entrada. Contamos con áreas de texto. Tenemos menús desplegables, que selecto aún no hemos cubierto esos. Y tenemos botones. Vamos a cubrir botones ahora mismo. Pero antes de que hagamos eso, quiero agregar campo fiscal con un valor de Luke Skywalker, y el nombre va a ser nombre. Y luego vamos a crear un botón, y esto también tiene un tipo. Ahora el tipo de botón se puede enviar botón y reiniciar. Pero sólo puedo ser uno de estos. Entonces para este ejemplo en particular, ahora mismo, vamos a decir enviar y donde va a decir Enviar. Y así es como creamos un botón de envío en un formulario. Ahora si previsualizamos este Luke Skywalker y si hago clic en enviar, no parece que haya pasado nada, pero en realidad sí presentó el formulario. Entonces si miramos la u R L aquí arriba y dice Nombre, recuerda, recuerda, el nombre era el atributo de nombre. El valor es lo que está pasando aquí y Luke Skywalker ahora ¿Qué pasaría si alguien quisiera restablecer el formulario que está en otro botón y llamemos a este restablecimiento y quizás hasta pongamos esto en una línea diferente para que podamos ver qué estamos haciendo en realidad. Refrescar. Por lo que puedo enviar esto o puedo restablecerlo Ahora. Ten aquí el botón de reinicio. Al hacer clic, se vaciará cada campo yendo a crear un ejemplo aquí. Entonces tenemos a Anakin Skywalker y a Luke Skywalker. El botón de reinicio. Al hacer clic, no parece que hiciera nada, pero lo que realmente hizo fue devuelto los valores a sus valores predeterminados. Ahora les dijimos cuál era el valor por defecto. El valor es Anakin Skywalker y Luke Skywalker, Entonces si dijimos valor uno y valor a y luego presionamos el botón de reinicio. Se restablece esos de nuevo a lo que normalmente son. Ahora bien, si no queríamos ningún valor ahí dentro en absoluto, vuelve a pulsar reset. No va a pasar nada, no tiene nada que restablecer. Pero si dijimos nombre uno y nombramos para golpear Reset, va a volver a nada, porque no hay nada en ese valor que ahora sea el valor predeterminado. En tercer lugar, sólo tenemos un botón normal, y éste, tal y como su nombre indica, no hace nada. Un botón es sólo un botón regular. Ahora, ¿por qué nos usarías? Mucha gente lo usa en JavaScript, Jake Weary. Otras personas lo van a dar estilo, por lo que no parece un botón. Ya sabes que hay muchos usos diferentes para ello, pero cuando estamos hablando solo de HTML en un botón que no hace nada excluyendo CSS JavaScript y o J. Query, no realmente tan valioso. Pero es importante saberlo, porque una vez que comienzas a trabajar con JavaScript y posiblemente Jake cansado, va a hacer mucho más de lo que piensas. Ahora hay una cosa más que debes saber. Si nos deshacemos del elemento de formulario, volvemos a una página y refrescamos. No parece que sea diferente. Si tratamos de restablecerlo, no va a pasar nada. El botón de área de texto de entrada y seleccionar elementos. Ya sabes, los elementos que se supone que van dentro del elemento de forma A realmente sólo útil dentro ese elemento de forma. Y este es un excelente ejemplo. Esto ya no está dentro de un formulario, y el botón de reinicio no funciona. Si presiono el botón de enviar, no pasa nada. Es porque no hay un formulario para presentarlo. Necesitas ese elemento de forma ahora. Tu tarea para este video es crear un nuevo documento, y dentro de este documento, quiero que crees un elemento de formulario dentro de este elemento de formulario. Agregue el campo de entrada con el valor predeterminado. Nuestro valor por defecto fue Banik y Skywalker o Luke Skywalker. El tuyo podría ser cualquier cosa. No quiero que agregues un botón de envío debajo de eso, y al lado del botón de enviar, quiero que crees un botón de reinicio. Recuerda, la única diferencia es que el tipo de tipo es igual a enviar o tipo es igual a restablecer guardar abrir tu progreso en tu navegador y luego cambiar el campo de texto que creaste correctamente cualquier otra cosa en él. Entonces si tu valor predeterminado es Anakin Skywalker, cámbialo por lo que quieras. Pon tu nombre de pila si quieres, luego pulsa ese botón enviar. Y cuando pulsas ese botón enviar, busca en tu UL y noté que tu barra de direcciones cambió. Y eso sólo cambiará si usas los atributos de nombre como hicimos en nuestro ejemplo. Por último, refresca la página, y luego quiero volver a cambiar el impuesto en tu campo de texto, pero esta vez pulsa el botón de reinicio y observa que el valor predeterminado vuelve. 42. Gota: los atributos selectos es cómo creamos un menú desplegable. Nunca veas menús desplegables por todas partes, pero aún no hemos aprendido de ellos. Es bastante sencillo. Se parecen mucho a las listas, por lo que se crea una etiqueta de apertura y cierre en lugar de usar UL o un pozo para en orden lista ordenada usamos select porque se puede seleccionar una de muchas opciones, y dentro de ella toma un elemento de opción. Esa opción puede tener un valor, y pongo el Este es el texto que se mostrará. Ese no es su valor. Pero el valor estará aquí mismo. Entonces ese valor fue, también y cambia a dos. Y voy a agregar uno más y decir, Sólo llama a este valor de prueba y este valor va a ser valor de prueba. Ahora cuando abramos esto en un navegador, vamos a ver un menú desplegable con el texto que hemos puesto. Su valor es igual a uno valores águila para demandar y probar valor. Ahora, cuando seleccionamos algo, no va a cambiar en absoluto. No va a pasar nada. Aunque tengamos una forma a su alrededor, no va a pasar nada. Necesitamos crear un tipo de botón enviar es igual a enviar y Texas solo pieza de Mitt. Y ahora somos selectos. Elemento necesita un nombre para que podamos ver si realmente funciona. Cuando enviamos el nombre del formulario es capaz de seleccionar para ser cualquier cosa. Ahora he refrescado la página, y cuando selecciono valor de prueba o valor a nuestro valor uno y hago clic en enviar, es un poco valor a ¿Eres tú? L dice código dot html seleccionado es igual a dos. Ese fue el valor del número dos. Veamos qué sucede cuando seleccionamos valor de prueba. El valor de prueba aparece, y eso se debe a que eso coincide no sólo aquí sino que coincide con el valor aquí dentro. Entonces, ¿recuerdas esto dentro de la zona? Eso es lo que va a ser visible. Ese es el texto que se ve. Pero ese no es el valor que el formulario va a presentar. El formulario va a presentar el valor aquí dentro. Ahora vamos a deshabilitar. Uno de estos. Discapacitado es igual a discapacitado y, ya sabes, vamos a llamar a este valor tres. Para mantenerse en el camino con el 1er 2 ahí, refresca la página, y ahora ya no podemos seleccionar Valor es igual a tres por lo que podemos desactivar estas opciones ahora . Hay una cosa más que queríamos decir. Alguien puede seleccionar múltiplos que teníamos. El dedo múltiples atributos son elemento de selección, y ahora alguien puede seleccionar múltiples valores las formas en que selecciona múltiples valores a medida que recogen un valor y mantienen el comando o control mientras hace clic en los otros. Ellos pueden activarlos sobre ella. Ahora, si seleccionaron los tres hit Submit. Rul va a parecer un poco extraño ahora porque es un seleccionado es igual a uno. Si bien sí seleccionamos los primeros Valores como es igual a dos. Nosotros sí seleccionamos el segundo valor y seleccionado es igual al valor de prueba. Ese fue el 4to 1 Ahora también podemos, si realmente quisiéramos desactivar todo el menú desplegable agregando deshabilitado al elemento select , ya no puedo seleccionar ninguno de estos. Y para que esto quede más claro, vamos a deshacernos de los múltiples atributos. Ya ni siquiera puedo seleccionar el menú desplegable, y solo hay un atributo más que quiero mostrarte, y lo que voy a hacer aquí es arreglarnos para que sepamos lo que estamos buscando que sea un poco más fácil va a agregar valor para nosotros que tenemos valor 123 y cuatro, pero éste va a ser seleccionado por defecto. Para esto, escribimos, seleccionado es igual a seleccionado con citas alrededor de él, y cuando refresco la página, valor para se selecciona automáticamente en lugar de que se seleccione el 1er 1 como lo era antes valor para seleccionado. Y si teníamos un valor más, tenemos valor valor valor de cinco años para todavía seleccionado, pesar de que hay una opción antes y después de ella. Ese es el elemento selecto. Por lo que tu tarea para este video es crear primero un nuevo documento. Y luego quiero que crees un nuevo elemento de formulario como lo que viste en este video, donde el elemento de formulario se envolvió alrededor de los elementos de selección y botón, luego crea un elemento de selección que es un menú desplegable. No te preocupes por agregar un nombre, pero dentro de los elementos selectos, quiero que escribas cinco elementos de opción. Todos tienen que tener un valor. Hacer los valores 1234 y cinco. Pero cualquier texto que quieras dentro de ellos posiblemente use 1234 y cinco también para que coincida con los valores de cada elemento de opción. Y luego quiero que hagas la opción uno desactivada y hagas la opción tres automáticamente seleccionada. Cuando hayas terminado de guardar abre el documento y haz clic en tu nuevo menú desplegable, debes notar que la Opción uno se desactiva automáticamente. No se puede seleccionar. seleccionó automáticamente una opción tres, pesar de que no es el 1er 1 de la lista. 43. ¿Qué es conseguir?: en este video, vamos a ver la diferencia entre el método get y el método post usando un formulario. Entonces voy a crear una forma rápida aquí. Está bien, tengo un formulario, y voy a previsualizar esto en el navegador para que veas cómo se ve. Si no estás familiarizado con cómo conseguimos las entradas aquí o el botón. Hay otros videos que repasan eso en este video. No vamos a repasar cómo creamos esas entradas para el botón de enviar. Ahora tenemos una forma, y hablamos antes sobre el método y los atributos de acción en este video. Vamos a hablar del método. Consigue lo que Ponte bien, dio cuando guardes y recargas esta página y luego envías tu formulario se va a poner tu información en la barra U. R L. Entonces voy a seguir adelante y hacer eso, Caleb Tall, magra. Y cuando haga clic, enviar algo un poco diferente va a suceder. Esa información que la he ingresado va a aparecer en mi barra ul, y la información va a ser un par de valor clave así que hit submit y en la U. R. L Bar dice mi nombre de archivo es co dot html. Entonces tiene un signo de interrogación que significa que todo después de esto es parte de la cadena de consulta. Toda esta sección aquí se llama una consulta Nombre de cadena F es igual a Caleb y l nombre es igual a high lean. Ahora, cuando miramos un código teníamos f nombre Ese era mi nombre y L nombre era mi apellido. Ahora podemos hacer esto con muchos tipos diferentes de insumos. Voy a crear uno más aquí, y lo voy a llamar J. Y va a ser un menú desplegable. Tenemos valores diferentes. Hemos valorado 10 a 2020 30 y la información dentro de cada opción es exactamente la misma pequeña leyenda rápida Al lado de ella. Refresca la página. Sé que no he envejecido Menú desplegable. Mi nombre de pila va a ser Jon Snow y se estima edad es probablemente entre 30 y 40 años. Hit. Presentar. Ahora esa información desaparece en la forma, pero de nuevo aparece en el bar U. R L, donde el nombre de pila es John. El apellido es nieve y las edades de 30 a 40 años. Ahora esto se llama método get, y en cualquier momento que envíes un formulario con el método get, tu información aparecerá en nuevo Orlebar. Entonces si tienes que enviar algún formulario, o tus usuarios van a enviar cualquier tipo de información que potencialmente pueda ser considerada como sensible, estamos hablando de contraseñas secretas, contraseñas, crédito tarjetas, cualquier cosa por el estilo. Esas piezas de información extremadamente sensibles al aire. Pero aunque consideraras la fecha de nacimiento de alguien como información sensible o su edad , dependiendo de qué se trate tu solicitud, entonces quizás no quieras mostrar esa información aquí arriba porque eso es accesible para todo el mundo. Asume que el usuario golpea ese botón enviar. Aparece en su U. R L Bar. Ahora, para mostrarles lo que quiero decir, voy a crear una entrada más. Vamos a llamarlo contraseña. Refresca la página. Ahora tengo un nombre, apellido, una edad y una contraseña, y no vas a poder ver qué puedo escribir. Y probablemente no hay manera de que puedas adivinar lo que acabo de escribir, Sin embargo, cuando presioné ese botón enviar. Esa contraseña aparece y la puedes ver aquí Contraseña es igual a, pero aparece en la U. R L Bar. Ahora donde esto viene útil es cuando estás usando un código del lado del servicio como A S, P o PHP, y está tratando de sacar la información de la barra URL. ocasiones es muy útil poner algo de información en la barra del mundo porque eres puedes cambiar el contenido de tu página, dependiendo de cuál sea la variable. Entonces si esto fuera, se vería un poco más así. Co dot PHP consulta Página de cadena es igual a 123 Podríamos entonces tirar esa información en el servidor. El servidor reconocería que la página es igual a 13 a 3. Crearía una variable para nosotros, y podemos cambiar todo lo que está en esa página, basado puramente en la información aquí dentro. Ahora es ahí donde se vuelve realmente poderoso. Ahora tu tarea para este video es crear unos nuevos documentos. Entonces quiero que crees un elemento de formulario con el método get, igual que hicimos nosotros. Abrimos un elemento de forma. El atributo, llamado Método, era igual a obtener. Entonces, dentro de ese elemento de formulario, quiero que agregues un campo de entrada, solo un campo de texto regular, un campo de contraseña y un menú desplegable. Entonces, en esos tres campos, quiero que agregues el atributo name a cada elemento. Entonces eres Texeira, tu campo de contraseña, y tu menú desplegable todos deben tener el atributo name, y el valor debe ser diferente. Por ejemplo, el campo de entrada de texto sólo podría llamarse nombre. Contraseña podría llamarse contraseña o pasar después de eso en un botón de envío hasta el final de su formulario, guardando sobre el documento en su navegador. Y luego quiero que llenes tu formulario. Pulsa el botón enviar y notarás que los datos se insertan en la barra U R L. Si tu información aparece en la barra URL correctamente de la forma en que apareció en este video, entonces has creado con éxito un formulario de presentación usando un menú desplegable, una entrada de contraseña y un campo de texto enviado por un botón de envío, y la información fue enviada al Bar U R L. Una vez que eso funcione para ti, te veremos en el siguiente video 44. ¿Qué es POST?: cuando enviamos un formulario, hay otra forma de presentar información. En un video anterior, aprendimos esa información a través del método llamado Get en lugar de post. Ya vemos. No obstante, el método get pondrá automáticamente información en el tu Albar, y eso no siempre es lo que queremos. Entonces en este ejemplo, vamos a aprender sobre el método de publicación, donde aún envía la misma información al servidor. No obstante, la información no es fácilmente visible para su usuario final. Entonces aquí lo que hice fue Método es capaz de publicar en lugar de conseguir como lo hicimos en un ejemplo anterior . Acción. Creé una nueva final de PHP. Este es un lado del servidor presentarte por PHP o SP no familiar. Eso está bien. No vamos a repasar nada de eso ahora mismo. Esto es puramente una demostración. Eran el nombre de pila con el nombre de F nombre. Con la edad es una contraseña de menú desplegable y el nombre es contraseña. Después enviar botón. Ahora, cuando vemos esto en, el navegador parece una forma ordinaria. Entonces nombre de pila. Vamos a poner hon edad 30 a 40 posiblemente antes de que 50 contraseña. No se puede ver lo que escribí para la contraseña. Ahora, cuando golpee someter dos cosas van a pasar. Su 1er 1 es si miramos la barra de URL, se fue a publicar dot PHP fue a archivo completamente diferente. Ese es el archivo de acción que especificamos en acción, y envió esa información a la publicación en la página de PHP. El segundo es, estas son las variables que normalmente verías aquí arriba. Entonces en lugar de ver el nombre F es igual a Han, una edad es igual a 30 a 40 y la contraseña es igual a lo que escriba. Entonces en lugar de ver algo en estas líneas, esa información no aparece en el bar U. R L. En cambio, podemos acceder a ella desde el servidor. Ahora de nuevo, no estamos aprendiendo sobre las cosas del lado del servicio en este momento, pero este es un ejemplo para mostrarte que el método de publicación enviará la información la misma información al servidor sin mostrarla en la barra de los Urales. Ahora, ¿qué pasa si quitamos la acción por completo? Pero los métodos se queda como post retipado. Esto aquí ahora no hay acción, pero el método es post ahora. No parece que haya pasado nada. Nuestro eres L bar no parece haber cambiado en absoluto. De hecho, parece que el realmente restablecer nuestra forma ahora. Eso se debe a que esa información post no está fácilmente disponible para nosotros. Y para asegurarnos de que esto funcione de la manera que queremos que funcione, simplemente intenta refrescar la página. Después de enviar un formulario de publicación e intentar actualizar la página, mayoría de los navegadores te darán un poco de advertencia, no advertencia. A menudo se parece algo a este formulario confirmado re enviar la página que estás buscando información usada que ingresaste. Entonces nos está diciendo que la información que ingresamos la última vez sigue siendo utilizada. Regresar a esa página podría costar cualquier acción que tomaras para repetirse. ¿ Quieres continuar? Entonces está diciendo que si actualizamos esta página, hay una posibilidad de que la misma Información se vaya a presentar de nuevo. Ahora bien, si alguien está enviando una tarjeta de crédito o un formulario de registro de usuario, no quieres que esa información llegue dos veces a tu servidor. Por lo que lo más seguro que decir sería cancelar. Y si pegas, continúa Bueno, Chrome no me mostró nada porque está tratando de usar la información. Ahora una extensión html de punto, por defecto, no puede usar ningún método o funciones del lado del servidor ni ningún tipo de poder que venga con escribir un lenguaje del lado del servicio. H Male está puramente en el usuario, por lo que no hay información para mostrarse aquí. Pero si tratamos de refrescar nuevamente la página esa misma mañana aparece. Eso significa que la página sigue intentando usar esa misma información, pesar de que no podemos ver nada de ella. Sabemos que está ahí. Por lo que su tarea para este video es crear un nuevo documento dentro de ese documento, crear un nuevo elemento de formulario y, en ese elemento de forma use. El atributo denominado Método y Método es igual a publicar, igual que vimos en este video en un campo de texto en un menú desplegable y agregar un campo de contraseña . Después agrega el nombre atributos todos esos campos que acabas de escribir. Entonces, al final de su formulario, derecha, un botón enviar guardar. Abre el documento en tu navegador, rellena el formulario, envía el formulario y notarás que nada parece haber cambiado. De hecho, parece que acaba de restablecer por completo tu formulario. Ahora. En este momento, pulsa el botón de actualización ya sea en tu teclado o haz clic en el botón de actualización de tu navegador . Y si estás usando un navegador más moderno, verás una advertencia como vimos en este video. Si ves esa advertencia, sabes que tu enviando exitosamente información de post al servidor no la puedes ver, pero sabes que está funcionando. 45. Semantics de HTML5: HTML es todo sobre semántica. No se trata de estilizar, necesariamente. No se trata de lucir bien ni de ser perfectamente presentable. HTML es una estructura detrás de cada página Web, y para que una página Web se muestre correctamente, el navegador necesita entender lo que está mirando. Si el navegador no entiende lo que está mirando, tu página podría aparecer un poco diferente a lo que esperabas. Ahora, hasta los últimos años, siempre hemos usado elementos como Div, y le agregaríamos mucho estilo para básicamente restablecerlo, para que haga lo que quisiéramos dio si quisiéramos usarlo para una barra de navegación o una encabezado o pie de página o una sección de ustedes saben, un artículo o, de hecho, incluso sólo una sección. Siempre usamos el desarrollo. Hay una serie de otros elementales que siempre hemos utilizado. Siempre acabamos de reprogramarlos para que hagan lo que queremos que den dio, y eso suele involucrar mucho estilo diferente. Ahora bien, HTML no se trata de estilizar. Se trata de que el navegador sea capaz de entender lo que está mirando. Entonces cuando Google mira tu página Web. No ve lo que ves visualmente. Mira el código que escribiste. Entonces cuando ve otra zona DIV con algún contenido aquí, todas las ciudades es un área dividida con algún contenido ahí dentro. No necesariamente sabe lo que está mirando. HTML cinco tiene muchos elementos diferentes que ahora están estandarizados. Eso reduce parte de la ambigüedad entre ellos o elementos comunes como def. Entonces si esto fuera parte de un artículo, esto podría ser un artículo. Google o Bing o lo que sea que rastreador o navegador esté mirando tu página en este momento, entenderá que se trata de un artículo o si teníamos un diff en la parte superior de una página. Teníamos un estilo elegante para hacerlo flotar en la parte superior de la página cada vez que te desplazas hacia abajo tenía tus opciones de navegación aquí, y eso te permite pasar de página a página barra de búsqueda de usuarios, lo que sea en tu sitio web que lo haría ser considerado una barra de navegación. Entonces en su lugar ponemos knave. Eso significa que el buscador ahora está entendiendo que esto es una barra de navegación, que son ciertos enlaces, y aquí se va a priorizar qué enlaces debe mirar, no debería mirarlo solo tiene una mejor comprensión de lo que está mirando. Entonces, ¿por qué es esto importante para un usuario cotidiano? ¿ Un desarrollador no Web a un navegador de Internet regular? No importa. Nunca verán la diferencia, y probablemente nunca les importará la diferencia. No obstante, como desarrollador Web, no estás construyendo sitios web solo para las personas. Estás construyendo sitios web para que otros programas accedan para otros motores de búsqueda, acceso para que los navegadores accedan, posiblemente una extensión de Chrome o y agregar o un enchufe a otro navegador. Si alguien tenía un enchufe, digamos Firefox, y estaba destinado a eliminar toda la información sin importancia en una página. A excepción de un artículo, sin embargo, tal vez esa extensión sobre Lee busca un artículo que elemento real y todo lo demás que corta. Si no estás usando artículo, algún usuario va a estar muy infeliz ahora. Eso podría ser sólo una pequeña, diminuta, diminuta porción de tu público objetivo, pero no sabes lo que van a estar haciendo en tu sitio web o cómo lo van a estar usando motores de búsqueda para cosas como motor de búsqueda optimización. Si puedes hacer que tu página sea más fácil para que un motor de búsqueda entienda, entonces probablemente obtendrás rangos un poco más altos. No hay ciencia real detrás de eso, pero realmente sólo tiene sentido desde el punto de vista de los programadores. Entonces tu semántica es realmente importante si no tienes que usar el desarrollo para una página de cinco HTML , no utilices la sección de artículo de pie de encabezado, navegación por ahí tonelada de otras. Todo lo que tienes que hacer es subirte a Google y buscar algo en la línea de diferentes cinco elementos HTML, y te darás cuenta de que hay muchos y más de ellos están llegando cada mes. No hay tarea para este video, pero en cambio quiero que entiendas que hay una importancia detrás de la semántica de cinco H Mill , o simplemente deberíamos decir la semántica HTML. HTML está destinado para la estructura el mark up, el template ing de un sitio, pero no necesariamente está destinado para el estilo. Styling es algo completamente diferente, y la estructura de tu página puede decirle a un navegador que puede decirle a un lector de pantalla que puede decirle mucho a un buscador de lo que hay en él 46. Video: usando HTML cinco debilita directamente el video incrustado en nuestra página, y simplemente usamos el elemento de video. Elemento de video tiene una etiqueta de cierre de apertura en Dentro del elemento de video es el elemento fuente , y esto toma dos atributos. SRC para la fuente. Al igual que una imagen y tipo, el tipo siempre será de video slash. Cualquiera que sea la extensión de video, por ejemplo, y antes de que vuelvan al elemento de video, podemos cambiar el con la altura, agregar controles y reproducción automática automáticamente solo a través de agregar atributos. Por eso queríamos un Con de 500 altura. Hagamos esto muy hace proporcional y pongamos esto en 1 50 y sí queremos ver los controles ahora Para que esto funcione, voy a necesitar un video MP cuatro. Simplemente sucede que tengo uno llamado prime video dot mp cuatro. Este es un video local. Está en mi máquina ahora mismo, pero para ti puedes usar cualquier video MP cuatro que te guste. Entonces vamos a previsualizar esto, y quiero ver el área con la que estamos trabajando aquí vamos con esto. 500 altura es 150 tiene nuestros controles aquí dentro. Podemos hacerlo a pantalla completa cambio de volumen, reproducción y pausa. Adelante rápido a cualquier parte del video, igual que un video normal. Ahora, si queríamos Toe auto play esto antes, alguien aterriza en la página que estás creando. Enciende el juego automático. Y cuando actualice esta página, notará que se está reproduciendo automáticamente. Ahora hay dos cosas más que debes saber. El 1er 1 es Fuente no tiene que ser MP cuatro. También puede ser lo que se llama Web M u org, y las extensiones también lo reflejarían. Entonces no Web M is Dot is video slash web dot org Is Video Sochaux G. Ahora para un navegador que no soporta HTML five y antiguo navegador, no va a reconocer un video ni los elementos fuente para que podamos escribir algo aquí. No requiere otro elemento. Simplemente entra con la fuente. Y podríamos decir que no tienes un navegador HTML cinco habilitado. Tu navegador va a mirar a través de estas fuentes va a tratar de averiguar el 1er 1 que puede usar solo punto de video prime y antes existe. En este caso, sí sí ¿Existe dot web m No. ¿ Existe dot org? No. Por lo que no deberían estar aquí. Y nuestro elemento de video debería verse así. No obstante, guardamos esta vista previa nuestra página, aún funciona. Ahora, ¿qué pasa si pongo y antes al fondo donde no tenemos web? Um, no tenemos expediente Ogi. Actualiza la página. Todavía funciona Ahora. El motivo de eso es porque los navegadores que buscan Web y luego van a buscar a Ogi No encontró ninguno de esos, pero sí encontró un y antes. Entonces va a usar eso. Por lo que tu navegador simplemente pasa por cada fuente e intenta encontrar la fuente del video. Y cuando encuentre uno lo va a usar, es muy recomendable que use dot mp four. Es el formato de video más aceptado. Funciona en todos los navegadores, y no tendrás ningún problema con él. También tiene un gran método de compresión, por lo que eso significa que tus videos van a ser más pequeños y la carga más rápida para el usuario. Ahora eso es todo para el elemento de video para este video. Quiero que creéis un nuevo documento dentro de ese documento. Crea el elemento de video tal y como viste aquí. Quiero que luego encuentres un video MP cuatro. Probablemente puedas descargar uno en cualquier lugar de Internet. La mayoría de las computadoras suelen tener un punto y antes de video en algún lugar disponible. Entonces encuentra un punto y antes de video y agregado a la fuente. Atributo dentro del elemento fuente que recuerdan ese elemento fuente estaba dentro de tu elemento de video muy parecido a un elemento selecto tiene opciones dentro de él. El video tiene fuente dentro del mismo. Después agrega un poco de texto para navegadores no HTML cinco en tu elemento de video. Enciende tus controles, activa el juego automático. Entonces quiero que guardes un abrir el documento en tu navegador y verifiques que tu video funcione. Si has hecho todos estos pasos, tu video debería tener control para que puedas pausar y la reproducción automática funcionaráautomáticamente funcionará 47. Audio: html five nos permite incrustar automáticamente música o sonido. Este es un elemento único de cinco HTML, por lo que sólo funciona con más. Los navegadores modernos no funcionarán con los navegadores antiguos, y el elemento que estamos usando se llama audio tiene una etiqueta de apertura y cierre. Y al igual que el video, también tiene una fuente. Tag toma el atributo SRC. Esa es una fuente del audio, y también se necesita un tipo para que el navegador sepa qué tipo de audio se supone que esté reproduciendo. El elemento de audio toma un par de parámetros diferentes. Atributos básicos. Uno siendo controles. ¿ Se puede controlar el sonido en controlar el volumen? Sí o no en este caso decían Sí, queremos poder controlar el audio y la reproducción automática. Ahora nada de esto va a funcionar sin una fuente, por lo que la fuente para esto va a ser Ben Sound épico dot mp tres. Acabo de encontrar esta música libre de regalías en ben sound dot com y el tipo sería audio slash mp tres. Ahora bien, si un navegador no admite html cinco audio debilitar, simplemente escriba aquí sin otro elemento justo dentro del elemento de audio. Tu navegador no es compatible con HTML five Audio. Simple es eso. Y si tu navegador sí soporta audio HTML cinco, este texto no se mostrará. Ahora voy a previsualizar esta página y empezó a reproducirse automáticamente. También tenemos controles aquí. Puedo cambiar el volumen, y todo es audio. Ahora, ¿qué pasa si me quito los controles? Los dientes se desactivan, pero el juego automático está en guardar. Refrescar. Tocaba la música de forma automática. No tenía control sobre la música, y sólo iba a tocar una y otra vez. Genial. Si estás configurando un cine, no es genial si tu usuario en una página Web no necesariamente quiere escuchar música diferente, diferentes efectos de sonido en una página. La mayoría de las personas navega por Internet mientras escuchan música, o tienen otro video encendido una película, y no quieren que otros sonidos interfieran con eso. Así que ten mucho cuidado de deshabilitar los controles con la reproducción automática activada. Ahora, una última cosa. Tenemos otros dos tipos de audio que podemos transmitir Oh gee gee, igual que con videos excepto con un video en lugar de audio slash o.G. o.G. Fue un video, Draghi social, elementos de video y así sucesivamente, y también tenemos ola. Por lo general, la ola va a ser la forma más grande, por lo que podría tomar un tiempo para una conexión a Internet más lenta. Carga del dedo del pie, todo para que podamos empezar a jugar Ogi no ampliamente aceptado, pero el MP tres es el formato de audio más aceptado en Internet. También tiene una gran relación de compresión, lo que significa que tu música o tu archivo de audio va a ser más pequeño. Y por eso, se va a cargar más rápido. Para el usuario, la calidad no es tan mala. Tu proceso también va a mirar cada una de las fuentes y tratar de encontrarlas. Si este navegador mi navegador, buscaba un archivo O. G, no lo encontró, entonces intentaría buscar un archivo way, y si no encontrara que entonces buscaría un archivo MP tres. Entonces si guardo esto porque los archivos Ogi y Wave no existen y refresco mi página, sigue funcionando ahora porque no tengo los otros dos disponibles. Técnicamente no necesitas los elementos ahí, por lo que tu tarea para este video es crear un nuevo documento en el elemento de audio, luego agregar los atributos de controles a esos elementos de audio para tu fuente. Yo quiero que añadas un archivo MP tres. Siéntete libre de ir a ben sound dot com y conseguir un audiófilo de él. Entonces quiero que añadas texto del navegador no HTML cinco. Entonces si el navegador no puede usar el elemento de audio, mostrará algo de texto y dicho guardando abra el documento en su navegador y luego presione play en su audiófilo. Si tu elemento de audio comienza a proyectar música o sonido de cualquier tipo, sea cual sea tu archivo MP tres, entonces has agregado audio con éxito a tu página. 48. Diseño adaptable: diseño responsive es la capacidad de cambiar la plantilla y el estilo de una página basada en el navegador con ahora. Lo que eso significa es si alguien está viendo tu sitio web en un navegador particularmente grande que suele ser una computadora portátil o de escritorio, el ancho va a ser bastante ancho. Pero si alguien entonces ve esa misma página en un teléfono en un dispositivo móvil, una tableta sería aproximadamente el 70 75% del ancho en píxeles, como sería tu portátil y tu teléfono podría ser la mitad de eso. Posiblemente más pequeño posible un poco más grande, dependiendo del teléfono. Ahora no conocemos todos los dispositivos que están ahí fuera. No conocemos las resoluciones de todos. No sabemos qué gente está usando qué resoluciones. Vamos a acceder a la página web en qué momento, y eso se vuelve bastante problemático. Y lo que realmente queremos hacer es crear un sitio web que esté disponible para todos. Esto lo hacemos con un término llamado Diseño Responsivo. Algunas personas lo llaman móvil First mobile ready, pero esencialmente cada sitio web necesita ser responsive tiene ser sensible al ancho del navegador. Ahora la idea es si abres un sitio Web Digamos Facebook en tu navegador en tu laptop , y luego abres facebook dot com en tu dispositivo móvil, tu tablet, tu teléfono, cualquiera que sea, se va a quedar diferente. Podría incluso actuar diferente. Esa plantilla las cosas van a ser diferentes. Podrías tener una barra de navegación que flota contigo podría no flotar contigo. tu barra de búsqueda sea más grande. Podría estar oculto, podría parecer, o información en una laptop porque la laptop tiene más bienes raíces, más área con la que trabajar, mientras que en un dispositivo móvil no suele haber tanto espacio. Por lo que parte de la información menos importante no es visible ahora porque no sabemos quién va a estar en el teléfono, quién va a estar en una laptop iba a estar en una tableta. Como desarrolladores web, es nuestro trabajo construir para todos. Ahora eso no significa que tengas que construir un sitio web para dispositivos móviles como teléfonos, otro para tablet, otro para laptops, otro para escritorio. En cambio, puedes usar diferentes bibliotecas, diferentes grupos de código en los que otras personas han trabajado con el fin de crear solo un sitio web que funcione en todos los dispositivos y reacciona en consecuencia. Ahora, por qué esto es importante en este momento es porque estamos en un tiempo de transición importante. La mayor parte del mundo llegó en línea a través de escritorios. Las computadoras eran bastante grandes fue hace 2030 años. No eran muy potentes de lo que salieron las laptops. Las personas pudieron llevar su escritorio a cualquier lugar y seguir haciendo su trabajo básicamente cualquier lugar durante al menos unas horas sin quedarse sin batería. Y si había un enchufe en alguna parte, Bueno, ahora puedes llevar tu trabajo a todas partes contigo eso fue muy poderoso. Pero ahora tenemos tabletas y dispositivos móviles como tu android o iPhone y más personas que vienen en línea. Nuestro comenzar con dispositivos móviles, sobre todo porque los teléfonos son más baratos para que alguien compre sus teléfonos. Puedo acceder a Internet que puedes comprar en diferentes zonas del mundo por $50.100 dólares y ellos van hacia arriba 78 $900 dependiendo donde estés en qué tipo de teléfono quieras . Pero ahora todos acceden a Internet. Ahora, mientras más y más personas están entrando en línea usando sus dispositivos móviles, todavía tenemos mucha gente que usa laptops. Ahora bien, si eres desarrollador Web, vas a estar escribiendo código en una laptop. Es prácticamente inevitable en este momento. Y mientras estás creando un sitio web en tu laptop, otras personas van a estar accediendo al sitio web en sus teléfonos. Vas a tener que acceder a ella para probarla en una laptop y en tu teléfono, así que aquí hay mucha mezcla. No voy a sonar una stat en base a cuántas personas están accediendo a Internet desde sus teléfonos en este momento. Pero es muy alto, y sólo va a subir ahora. Lo que esto significa es que tu sitio web tiene que ser amigable para todos. Si no es amigable para todos, podrías estar perdiendo algún tráfico muy importante. Un gran ejemplo es si vas a crear una red social que solo estuviera disponible para la gente de la India. Bueno, hay mucha gente en India que tiene una cantidad justa de dinero, y hay mucha gente que no tiene mucho dinero. Pero quieres que todos en India usen tus redes sociales. Vas a tener que construir para ambos Y a medida que avanza el tiempo, menos gente estará comprando laptops y computadoras de escritorio y más gente solo estará comprando tabletas. Por lo que una historia rápida como desarrollador, solíamos hacer solo sitios web de escritorio. Era la única tecnología que teníamos. Si no se veía genial para todos, bueno, bueno, el usuario final sólo tenía que convivir con ello. Ese ya no es el caso. Entonces haríamos un sitio secundario solo para dispositivos móviles. Fue entonces cuando salió por primera vez el iPhone y dispositivos habilitados para Internet dispositivos de mano como tu iPhone. Incluso por los primeros teléfonos Android, gente seguía haciendo sitios web móviles solo para estos lugares, y están diciendo que vaya al sitio web de m dot dot com. Entonces m dot cineplex dot com es uno que veo bastante regularmente en Ah, en comerciales. M dot facebook dot com es otro, y ahora tenemos que hacer webs móviles primero que se vean muy bien tanto para dispositivos móviles como hábiles dondequiera que aterricen. Es importante que hagamos eso ahora. La mayoría de los desarrolladores utilizan un marco llamado Bootstrap. Se puede encontrar eso en get bootstrap dot com, y está acoplado junto con una biblioteca JavaScript llamada J Query. Puedes enterarte de un. j coury dot com Jake es una biblioteca de JavaScript que funciona en cada navegador. Cross browser compatibles es la terminología que usamos, y la razón por la que es tan potente y tan ampliamente aceptada en todo el Internet para casi todos los desarrolladores, cada desarrollador front-end de todos modos es porque cada navegador entiende y utiliza JavaScript un poco diferente. Y por eso, una sola biblioteca de JavaScript que nos permite hacer todo solo de una sola manera que une todos estos navegadores juntos es extremadamente poderosa para nosotros ahora, volver a Bootstrap Bootstrap es un equipo estandarizado y utiliza CSS, HTML y JavaScript. Y empareja todos estos junto con algunas herramientas geniales de JavaScript que te permiten hacer cosas al instante. Ahora de nuevo, este no es un curso de JavaScript, sino botas Drop es con mucho las bibliotecas de diseño de primera o responsivas más comunes disponibles. Ahora es en este punto en el tiempo donde probablemente conozcas suficiente HTML que puedes descargar e instalar bootstrap y puedes leer a través de su documentación. Esa documentación está bastante bien organizada. En realidad, no es súper aburrido. Tienen grandes ejemplos, y puedes empezar a construir cosas por tu cuenta, aunque no conozcas CSS o JavaScript. Hay muchas partes poderosas de bootstrap que tampoco requieren, y hay otras partes llamadas componentes que sí requieren marcado HTML. Bootstrap viene con su propio estilo, por lo que no tienes que preocuparte por eso. Eso es todo manejado por ti, y puedes habilitar muchas características de JavaScript simplemente escribiendo atributos HTML. Entonces si quisieras dirigirte a conseguir botas drop dot com, ese sería un gran lugar para seguir avanzando. Por lo que tu siguiente puerto de llamada es ir a bootstrap, obtener bootstrap dot com, descargarlo e instalarlo y simplemente empezar a usarlo. No necesariamente necesitas conocer todo el CSS o el JavaScript porque lo hacen tan simple. Puedes escribir la mayor parte de tu sitio web, un sitio web receptivo usando solo HTML, y al hacer eso, vas a patear tu ir a adelantar rápido tu carrera como desarrollador por muchos meses, posiblemente años. Con sólo hacer eso,