Transcripciones
1. GettoknowHTML: html es la base de Internet. Aprender a crear código HTML es el punto de partida para crear sus propias páginas Web y crear contenido Web con formato HTML. Guía Simple e Integral Dedicada a ayudar a los principiantes que quieran aprender más sobre HTML y quieran aprender a usarlo, este curso te guía a través de todos los elementos comunes de cada uno para derretirse, delineando front end Diseño Web y Web desarrollo. Este curso es perfecto para principiantes. ¿ Quieres un poco más sobre la creación de páginas Web? Aprende a crear código HTML desde cero. Entra en el curso y encontrarás que HTML es fácil de empezar. Ponemos a tu disposición todos los recursos y enlaces que necesites. Todo está incluido para empezar a explorar rápidamente las etiquetas HTML, ver cómo y qué pueden hacer. Aprende los fundamentos de los elementos html C html y cómo podrían ser utilizados para estructurar tu página
Web. Conoce HTML. Aprende a crear tablas, listas, formularios y mucho más. Crea tu propia plantilla HTML reutilizable. Conoce las novedades con HTML cinco. Html. Cinco está listo para el diseño moderno de sitios Web. Aprende cómo puedes agregar imágenes y enlaces dentro de tu contenido Web. Este curso te enseñará cómo crear y desarrollar páginas Web. Estoy aquí para ayudarte a aprender sobre HTML y listo para responder cualquier pregunta que puedas tener. Entonces, ¿a qué esperas? Empezar a aprender. Crea tus propias páginas Web hoy Se unió ahora.
2. 1 Conociendo recursos y herramientas de HTML que se necesitan: en esta lección, voy a estar brindando una visión general rápida de algunos de los recursos y herramientas que
vamos a utilizar dentro de este curso con el fin de crear código HTML. Entonces lo bueno del código HTML es que en realidad solo se ejecuta en tu navegador. Entonces html CSS, que se utiliza para el estilo de páginas Web en javascript, que se utiliza para crear interacción dinámica para páginas Web. Todo esto se renderiza y corre a través de tu navegador para que no necesites
herramientas especiales con el fin de crear y practicar HTML. Entonces esa es realmente la buena noticia. Y de hecho, siempre y cuando tengas un navegador chrome, realidad
puedes crear una actualización de tu código HTML directamente dentro de tu navegador. Entonces lo primero que tenemos que hacer es realmente crear un archivo HTML, y vamos a empezar creando index dot html. Y este va a ser esencialmente nuestro archivo predeterminado que el navegador va a saber para ir y renderizar un contenido dentro de nuestra página Web. Eso Te vamos a estar mostrando cómo crear tu propia página de índice dentro de la siguiente lección. Entonces para rematar sobre las diferentes herramientas que hay por ahí. Por lo que hay un montón de editores gratuitos diferentes. Probablemente ya tengas algo en tu computadora ahora mismo que puedes usar con el fin de
renderizar y crear código HTML. Si buscas un buen editor de texto, que sea de código abierto proporcionado por Adobe, por lo que sin costo alguno para ello. Y es un editor realmente bueno cuando estás empezando y puedes crear Ah, muchas cosas realmente geniales con este editor. Entonces como puedes ver aquí, puedes escribir algo de HTML. También puedes actualizar tu tasa CSS dentro de línea y mucho más Así que esto está disponible entre paréntesis Io y voy a estar usando corchetes. Debo mi aplicación de corchetes dentro de este curso sobre swell y otro recurso realmente bueno . Algo va a estar usando es código pen i
o.Y lo realmente genial de Code pen es que me permite escribir código html, y en realidad puedo verlo renderizada una tasa dentro de la página de abajo o dentro del área de visualización . Y como se mencionó antes, CSS y JavaScript también están todos disponibles dentro de la pluma de código y lo que sea que estemos escribiendo dentro nuestro CSS. Entonces, después de mirar HTML y entender los conceptos básicos del HTML, podría progresar a CSS y hacia fuera en algún estilo y luego, por
supuesto, JavaScript para alguna interacción dinámica. Y como se puede ver aquí qué? Nos estamos enfocando en HTML dentro de este curso. Entonces tengo algo de html básico ahí. También puedo cambiar las vistas aquí. Entonces si quiero tener una vista lateral aquí en el área de exhibición aquí en el lado derecho, puedo hacer eso también. También puedes minimizar el CSS y JavaScript y realmente enfocarte solo en ese html. Entonces como ves, lo que sea que estés justo aquí en el lado izquierdo, entonces ves que se exhibe aquí dentro del lado derecho. Entonces cualquier cambio o cualquier sintaxis HTML Y por supuesto, vamos a estar cubriendo esto cada uno. Entonces esto es encabezamiento uno eso Existen diferentes tipos de encabezamientos y estos airean solo pre estilos para el texto de salida. Y como puedes ver una vez que escribo que aquí aparece en el lado derecho, también
puedes guardar aquí en la pluma de código y esto te da la posibilidad de acceder en un
punto posterior . Solo ten en cuenta si estás usando la versión gratuita que esta es de acceso público. Entonces, básicamente, estos son los recursos que vamos a estar usando. Entonces código pen y brackets io y vamos a estar creando fuera y también chrome como nuestro navegador y estas viejas únicas herramientas que necesitamos con el fin de mostrarte y demostrar cómo tú también puedes empezar a escribir tu propio código HTML. Entonces la siguiente lección en la que vamos a sumergirnos y empezar a buscar crear código HTML en creación de nuestra primera plantilla HTML.
3. 2 Crea y actualiza tu primer archivo HTML: esta lección, te
voy a mostrar cómo crear una plantilla HTML, y vamos a entrar en lo básico de lo que es HTML. Entonces, primer lugar, realidad
necesitamos crear un archivo con el fin de escribir nuestro contenido en So estoy en una
máquina Windows . Aquí es donde voy a estar creando mi página de índice mi index dot html page eso necesitamos crear ese archivo inicial que va a contener nuestro contenido HTML para que podamos ir a ese archivo a través del navegador renderizado y en realidad C r contenido html visible dentro nuestra página. Por lo que probablemente ya tengas las herramientas dentro de tu computadora con el fin de crear un archivo. Si no lo haces, entonces puedes seguir adelante y usar corchetes y simplemente todo lo que necesitamos hacer para empezar es crear una marca que archivas. Entonces solo voy a crear un archivo totalmente nuevo, y ahora voy a guardar este archivo es un archivo completamente en blanco, y lo estoy abriendo. Así que asegúrate de que tienes ese camino correcto ahí que también lo estás guardando. Entonces lo estoy guardando, y una buena práctica para entrar es todavía empezamos ocho y tu página inicial donde
quieres que tu sitio web tow lanzamiento fuera de debería llamarse index dot html. Entonces sobre todo si estás haciendo una página HTML. Aquí es donde el servidor entenderá que esta es la página de ruta, y si no hay otra página especificada que por defecto, lo renderizará. Entonces eso es para cuando el servidor se está ejecutando y está buscando un punto de partida para tu dominio. Va a mirar esos archivos indexados con el fin de iniciarlo, encontrar un punto de partida para tu archivo. Entonces ahora que hemos creado eso, podemos ir y podemos acceder a él dentro de nuestro navegador y como vemos que no pasa mucho momento porque aún no tenemos ningún código HTML dentro de nuestra página. Entonces como dije, hay diferentes formas en que puedes trabajar con tu código s para que podamos seguir adelante y podamos abrir su editor debilitar el tipo de contenido en el editor para que pueda empezar a escribir algún contenido aquí dentro. Digo que podría ir aquí,
actualizarlo, actualizarlo, y puedo ver mi código HTML obteniendo salida dentro de la página y probablemente estés diciendo:
Bueno, Bueno, espera un minuto. Este es un código HTML porque todo lo que has hecho es crear un archivo llamado index dot html, dada extensión de HTML y solo teclea hola Mundo. Entonces esto es cierto porque lo que La forma en que realmente funciona el navegador es que cuando ve esta extensión HTML, entonces sabe que debe tratar de renderizar esto como código HTML. Y si no hay HTML envolviendo ese código, entonces simplemente lee eso como texto regular que desea salida dentro de su página Web. Y por eso somos capaces de ver hola mundo como lo he escrito. Entonces una de las cosas que quiero mostrarte también es cómo puedes actualizar realmente tu código justo dentro de tu navegador. Guarda ese archivo para que tengas esa capacidad de ver lo que se está mostrando. Entonces algo así como lo que vimos Code pen, donde podemos ver y podríamos hacer algunas actualizaciones, y entonces podríamos simplemente actualizarlo para que no tengamos que dar la vuelta siempre entre nuestro navegador y nuestro editor. Así que adelante y abre ese archivo que has creado index dot html para que pueda estar completamente en blanco. Ábrelo en tu navegador, y ojalá tengas Chrome instalado en tu sistema. Y si no lo haces, entonces chrome es un navegador realmente bueno para poder instalarlo, porque te da mucha flexibilidad. Eso Vamos a seguir adelante y abrir ese archivo en cromo y dentro de cromo. Tenemos lo que se llama nuestras herramientas para sordos y puedes volver a abrir esto. Estoy en una máquina Windows, algún turno de control I. Pero también puedes abrir eso dentro de Max. Aquí puedes entrar a la configuración, y podrías ir debajo de más herramientas, y también tienes herramientas para desarrolladores. Por lo que una serie de formas diferentes de acceder a esa misma consola. Y cuando hagas clic en esas herramientas de desarrollador, vas a ver que tienes este panel de desarrollador que se abre y tienen un número de pestañas. Aquí en la parte superior, tienes elementos, así que básicamente bajo elementos, vemos todo nuestro código. Entonces simplemente lo hice más grande también en orden, Así que es mejor el dedo del pie verlo dentro de este curso. Pero dentro de los elementos debajo de la etiqueta de elementos, puedes ver que tienes todo el código fuente ahí, por lo que es automáticamente como se mencionó antes, pesar de que no tengo eso en el código fuente, realidad está tratando de sumar unas h dos mil, y voy a estar explicando esto así como avanzamos por el curso o para
progresamos por la lección. Entonces hay una serie de otras pestañas realmente importantes aquí dentro de las herramientas del navegador, y otra que queremos ver es las fuentes, Así que las fuentes te dan una ruta completa a donde se encuentra tu archivo. Entonces vemos que este archivo se encuentra en mi KK Drive bajo la carpeta Sitios web bajo
Curso de carpeta , y se llama index dot html. Entonces me da el camino completo, y lo realmente genial de chrome es que puedo agregar una carpeta a mi espacio de trabajo. Por lo que acabo de hacer clic aquí para que solo puedas hacer clic en él y seleccionar agregar carpeta al
espacio de trabajo . Y una vez que hagamos eso, así no hay necesidad de asegurarnos de que especificamos esa carpeta que quería agregar. Entonces vayamos todo el camino hasta la carpeta y solo haga clic en Aceptar, y te va a pedir que te des acceso a ella. Eso nuevamente Asegúrate de no exponer una información insensible porque ahora esto se va a comunicar a través del navegador. Entonces voy a seguir adelante y sentarme seleccionar permitir. Ahora puedo bajar a las diferentes carpetas que he agregado aquí, puedo seleccionar ese archivo de índice para que éste pueda cerrar éste porque ahora podemos trabajar fuera de éste, y puedo seguir adelante y hacer una actualización. Di eso. Refresca y tengo mi actualización en vivo. Por lo que todos estamos listos y listos para ir ahora para empezar a escribir algún código HTML. Y por supuesto, si quieres trabajar con tu editor, puedes trabajar con eso también. Por lo que en realidad no importa dónde estés colocando tu código HTML porque va a ser el mismo archivo. Por lo que esto son solo diferentes formas en las que podemos acceder al archivo y escribir nuestro código HTML. Entonces la siguiente lección vamos a saltar a iniciar nuestra plantilla de página. Entonces esta va a ser una plantilla predeterminada que podemos usar una y otra vez, y podemos usar eso con el fin de ayudar a estructurar mejor nuestro código HTML. Entonces se acerca en la siguiente lección.
4. 3 crea una estructura HTML básica: En la última lección, vimos cómo podemos acceder a nuestro archivo HTML recién creado, y vimos cómo podemos empezar a actualizar el contenido de ese archivo de varias
maneras diferentes y dentro de la lección. Dentro de las próximas lecciones, realidad
voy a estar usando mi navegador chrome en orden para actualizar mi HTML porque de esta manera , realidad
podemos ver lo que está pasando aquí en la página en vivo s. oh, esto va a ser una gran manera de eso. En realidad no tenemos que voltear entre el editor y lo que nuestra salida de código HTML va a ser lo
va a hacer un poco más grande aquí también, que
podamos tener una mejor vista previa de realmente lo que se está mostrando aquí s para que
veamos que tenemos el camino completo ahí. También puedes usar tu editor aquí. Eso En realidad no importa porque todo lo que estamos haciendo es escribir en este archivo HTML. Por lo que cada bueno cada archivo a Mel necesita algún código HTML. Entonces, empecemos a crear algún código. Y vimos aquí cuando miramos el código fuente que el como los navegadores realmente renderizan esto, está configurando esto dentro de una estructura html Así que tenemos este html apertura html cerrando. Tenemos esta apertura de cabeza, cierre de
cabeza, apertura
del cuerpo y cierre del cuerpo. Y esto es lo que es Este es el aire los fundamentos de lo que es HTML. Tenemos un Siris de etiquetas de apertura y cierre, y esencialmente está construyendo una estructura. Por lo que todo nuestro contenido HTML en todo el código html va entre las dos etiquetas
HTML de apertura y cierre que tenemos ah, sección de
cabeza. Por lo que la sección de cabeza contiene meta información de título enlaces hacia fuera a algún estilo y así sucesivamente. Entonces aquí es donde se coloca toda esa información que esencialmente estaría
usando el navegador con el fin de renderizar ese contenido de la página. Y entonces en realidad, el contenido de la página estaría sentado entre cuerpo así entre el órgano de apertura y el
impuesto corporal de cierre . Por lo que esta es la propia estructura de cada templo para este hola mundo. Entonces sigamos adelante y actualicemos nuestro código con el fin de reflejar mejor eso y en
realidad no vamos a ver nada diferente. Todo lo que vamos a estar haciendo es formatear ese html que las etiquetas HTML agregando esas en y una cosa
importante a tener en cuenta aquí con etiquetas HTML. En realidad no son sensibles a mayúsculas, así que podría hacer algo como minúsculas. Yo puedo hacer mayúsculas, así que eso realmente no importa. Pero fuera de buenas prácticas, la
mayoría de las veces lo vas a ver como minúsculas porque esta es la mejor manera de formatear. Es para que no quieras tener todos estos caracteres en mayúsculas. Así que apégate a la minúscula a pesar de que es es no importa qué caso estés usando. Apégate a la minúscula cuando estés escribiendo tu código HTML. Sólo las mejores prácticas. También aquí vamos a poner mi cuerpo, así que envuélvelo con cuerpo de cierre. Entonces, ¿qué? ¿ La idea también? ¿ Eso es sólo tener en cuenta? Siempre que abras una etiqueta, asegúrate de cerrarla. Entonces ahí vamos. Entonces ahora tenemos esencialmente,
hemos escrito nuestro HTML en el mismo formato que nuestro navegador está esperando que se vea como dónde está renderizando algún contenido aquí en el medio para que cuando lo refresque, realidad no
veamos nada diferente. Si entro a mi editor, vemos que lo hemos peinado apropiadamente y una de las cosas de los editores una de las cosas
realmente geniales de los editores es que tienen alguna funcionalidad adicional. Tan cosas que no te estás metiendo dentro del navegador y ves que tenemos estos abriendo y cerrando Chevron que pueden abrir y cerrar las diferentes etiquetas abiertas y cerradas . Y esta es una mejor manera de tipo de darte una visión general rápida del HTML. Entonces, solo cubramos una vez más lo que hemos cubierto dentro de esta lección. Sabemos que con las etiquetas HTML donde estamos configurando etiquetas y dentro de esas etiquetas donde
tenemos contenido y se nota un oleaje que tenemos etiquetas anidadas en otras etiquetas. Entonces el HTML es la etiqueta padre, y esto ayuda al navegador a entender que estar esperando algún contenido HTML aquí y lo primero que le va a mirar la cabeza. Por lo que va a mirar a través de cualquier contenido que hayas colocado dentro de la sección de cabeza. Entonces si tienes algo aquí dentro, aquí es donde tienes los contenidos de tu cabeza, y luego a continuación se va a ir al cuerpo. Por lo que tres piezas esenciales, una significa contenedor en partes esenciales a una página HTML y a tu estructura HTML. En la siguiente lección, vamos a mostrar cómo puedes agregar alguna metainformación adicional y también cómo puedes agregar alguna información de cabeza para que el navegador realmente tenga algo más que consumir y para realmente entender mejor qué tipo de documento HTML y lo que podría estar esperando renderizar. Entonces esto es lo que viene en la siguiente lección.
5. 4 Construye una plantilla HTML predeterminada: en la lección anterior, te
presentamos las etiquetas HTML. Vimos que las etiquetas tienen una abertura y un contenido de cierre que está anidado entre esas etiquetas. Entonces este contenido entre las etiquetas, esto ahora se considera un elemento porque tiene contenido aquí y cualquier cosa dentro de aquí es parte de ese elemento, de modo que cada elemento padre L equipo tiene varias otras etiquetas anidadas dentro de él. Entonces tiene algunos Niños aquí, así que tiene la cabeza,
Tiene el cuerpo, y esta es la estructura por defecto de cualquier página HTML. Y ahora agreguemos algunos detalles más al contenido. Entonces esto en realidad no va a ser algo que se consuma por el usuario. Pero esto en realidad está destinado a ayudar al navegador a entender mejor qué queremos salida y qué tipo de contenido realmente puede estar esperando. Entonces típicamente dentro de una página Web necesitas agregar DOC Type y Doc type help especificar qué tipo de documento es Ahora sé que nevamos que es un documento HTML por esa extensión, pero también DOC Type puede especificar qué versión de HTML debe ser el navegador esperando cuando está renderizando esto Y cuando especificamos doc tipo HTML esto esencialmente, este es el último tipo de documento HTML cinco. Entonces, básicamente, esto es sólo un mensaje oculto al navegador. Cuando lee el expediente para decir, OK, sé lo que debería estar esperando aquí. Estoy esperando html cinco contenidos. Entonces a continuación vamos a entrar en la sección de cabeza, y muchas veces vas a ver que tienes este tipo de estructura de árboles donde
tienes esto en Dent,
donde tienes etiquetas anidadas están sangradas entre las etiquetas de los padres, y así esto se hace para la legibilidad. Entonces siempre que tengamos un montón de contenido aquí donde estamos abriendo y cerrando las etiquetas, queremos anidar ese contenido aquí y esto es de nuevo para legibilidad hace mucho más legible y más fácil de digerir. Especialmente le envejece mucho fuera acorde para que rápidamente puedas mirarlo y decir:
Vale, Vale, bueno, esta es la cabeza. Aquí está el abierto. Aquí está el cierre. Entonces lo tenemos en eso parece una especie de tirado aquí, Así que sabemos que cualquiera de estos aire abriendo y cerrando estos aire con lo largo de las mismas líneas que podemos esperar un cuerpo de cierre cuando tenemos el cuerpo abierto en esa línea. Entonces volviendo a la cabeza, también
hay algo de meta información que sí mencioné y meta información nuevamente ayuda al navegador a entender mejor qué esperar. Qué tipo de salida esperar. Por lo que sabemos que hay puede haber diferentes conjuntos de caracteres. Entonces debido a que cada código tim off es universal, sabemos que a veces no estamos escribiendo caracteres ingleses, y aquí es donde se puede especificar qué tipo de personaje X dijo que la página Web debería estar esperando en la salida eso meta información. También podemos incluir cosas como una descripción de página. Podemos incluir key wears author y así
sucesivamente, por lo que verás que algunas de estas cosas comúnmente se incluyen dentro de las páginas Web. ¿ Vamos a ver este de aquí? Por lo que tenemos nuestro meta-personaje set utf ocho. También está especificando un puerto de vista, Así que esto es para dispositivos móviles para que tu página Web mawr sea flexible y sensible en diferentes tamaños. También vemos que tenemos todas estas metapropiedades, por lo que toda esta información esta es metainformación para ayudar con el seguimiento de redes sociales. Entonces cuando estamos compartiendo la página y Facebook o Twitter ve la página Web, pueden sacar esta información el contenido de la página realmente fácilmente. Entonces por eso está incluido todo esto. Entonces sabe que parece bastante información,
pero esencialmente es repetitiva, y esencialmente está ayudando a guiar a lo largo de cualquier aplicación que pudiera estar mirando tu
página Web . Y también vemos que estamos vinculando a archivos externos, algunos archivos fuente y así sucesivamente. Y esa es la mayor parte de lo que está contenido dentro de la mayor parte del titular de cualquier página Web. Y también vemos una más aquí donde tenemos título. Y así el título es otra cosa que es realmente importante incluir dentro de cada sitio web. Por lo que nota aquí arriba en la esquina superior izquierda. Mi pestaña solo tiene el nombre del archivo, y lo está haciendo porque en realidad no hemos establecido un título. Entonces le voy a dar un título de html aprendido y vamos a cerrar eso y decir eso. Y ahora cuando lo refresco, mira lo que pasa aquí arriba en la parte superior. Vemos que ahora tenemos aprender html. Entonces aunque sé que dije que el contenido de la cabeza No va a ser visible por el usuario. El título es la única excepción aquí porque el título también se utiliza dentro de la meta información. Por eso se sienta en la cabeza. Y por eso en realidad somos capaces de verlo porque es un título. También lo puedes ver cuando los motores de búsqueda están indexando tu archivo. Muchas veces, lo van a configurar y usar ese título con el fin de representar esa página. Por lo que para fines S E O el título también es realmente, realmente importante. Aquellos de ustedes que no están familiarizados con S. E. O S CEO es la optimización de motores de búsqueda. Y esencialmente, esta es la práctica de tratar de conseguir que tus páginas Web se clasifiquen mejor en los motores de búsqueda. Entonces titulo super importante para S. E O. Asegúrate de que tu título sea significativo Tiene sentido con el resto del contenido de tu página
Web. No se limite a nombrar al título algo genérico. Asegurarse de que sea relevante para el contenido de la página Web. Y a continuación vamos a mirar el cuerpo. Entonces, esencialmente, ya
hemos escrito algo de contenido corporal aquí, y vemos que tenemos nuestro hola mundo s. Entonces esto es lo que se está renderizando. Entonces la siguiente lección vamos a saltar al contenido que se pueda renderizar en el cuerpo. Entonces esto va a ser ese contenido visible dentro de los usuarios de cuatro años con el fin de que esos usuarios consuman ese contenido cuando visiten tu sitio web. Y ahí es donde las cosas van a empezar a ponerse realmente interesantes porque
en realidad vamos a cambiar lo que está recibiendo salida en la página. Entonces eso se acerca en la siguiente lección.
6. 6 Uso de la dirección para obtener más contenido readable: en esta lección, vamos a hablar de encabezamientos, Así que cada buena página Web, vas a ver que cuando vayas a cualquier sitio web, tenemos estructura de página, así que no todo el contenido luce igual. Tenemos algunas palabras que son más grandes, algunas palabras que son negrita ID y solo algunas que en realidad destacan más que otro texto. Entonces ves en cualquier página web, tenemos una variedad de contenido, y está estructurado de varias maneras diferentes con el fin de romper mejor ese contenido . Por lo que es más consumible para cualquiera que visite el sitio web. Entonces vemos, incluso aquí, hay usos de imágenes y demás, y te voy a estar mostrando todo esto y cómo sumar imágenes a medida que avanzamos por el curso. Pero lo primero que quería mostrarles es cómo hacer tanques de rumbo y rumbo para que etiquetas de
encabezamiento en html, realidad va a
haber seis tamaños diferentes de encabezamientos y encabezamientos se utilizan con el
fin de definir partes importantes de su Página web y también encabezados un sello realmente importante para s y la razón siendo así si nos fijamos en algún contenido aquí y tenemos algo más de contenido aquí, justo abajo. Y entonces tenemos hola mundo otra vez. Y solo digamos eso y lo refresquemos. Entonces qué contenido realmente te salta cuando miras la página web, ves que hola Mundo te salta, En realidad
se diferencia del resto del texto, y sabemos que esto es realmente importante. Por lo que esto podría representar qué tipo de contenido está en realidad por debajo de él. Esto también podría representar el contenido de la página Web y así sucesivamente. Entonces la idea aquí es que queremos resaltar contenido importante dentro de tus páginas Web y también volver de nuevo a los encabezamientos S. E. E.
O son súper importantes. Es para fines seo. Y la razón es, que s CEO. Entonces los motores de búsqueda se van a ir, y van a leer todo tu contenido y van a leer. Y una vez que golpeen estos, cada uno van a saber que thes cada uno destacan del resto del contenido. Entonces eso significa que el contenido contenido aquí dentro es súper importante. Es más importante que el resto del contenido. Entonces aquí es donde colocas tus palabras clave para Seo y así sucesivamente. Probablemente están diciendo Bien, bueno, ¿por qué no hago todo cada uno? Y la razón es que en realidad no aguantaría un poco. Y también, para las mejores prácticas, realmente
quieres enfatizar resaltar en Lee algunas palabras clave que van a ser relevantes para el contenido de la página web. Por lo que quieres hacer cosas que sean buenas para los usuarios que entran así como buenas para
los motores de búsqueda como su indexación tu página web. Entonces hay que pensar que para la parte más importante es que quieres que tus usuarios tengan una buena experiencia. Entonces déjame mostrarte algunos tamaños adicionales para cada etiqueta. Entonces también hay hte también. Entonces iba a escribir a cada uno, y vas a poder ver la diferencia entre H unos y H dos ya que
los hemos guardado . Entonces tengo que volver atrás y refrescarlo para ver que el H dos es un poco más pequeño. No salta, no destaca tanto como el H, y podemos ir todo el camino hasta H tres. Y la idea aquí es que estamos progresando cada vez más pequeños. Por lo que estamos empezando con nuestras primeras etiquetas principales. Nuestra categoría principal. Nuestra información principal va a ser H uno. Y luego a medida que
bajamos, podríamos tener Podríamos haber envejecido también, así que podríamos tener una serie de H dos. Y luego así estos subtítulos aéreos fuera del rubro principal eso incluso en lugar de llamarlos a
cada uno, Sólo lo
llamaremos subpartida y subpartida y lo vemos ahora una vez que lo guarde. Entonces ahora tenemos este desglose del contenido y en realidad está empezando a
romperse . Vemos lo que se está enfatizando y como el uso de aire viene en la lectura de esto. Sabemos que si esto sea cual sea el contenido aquí y subtítulo a si está en el cada a y esto llama nuestra atención de lo que seguimos leyendo, si no nos interesa este subtítulo, vamos al siguiente subtítulo grande y así sucesivamente. Y estábamos usando H tres dedos más desglose el contenido. Por lo que típicamente no lo verás usado de esta manera porque tendríamos un subtítulo y tendríamos algún contenido y luego unos h tres. Por lo que progresivamente aumenta que cada valor hasta llegar hasta seis un montón de páginas
Web,ya
sabes, ya
sabes, realmente
no va a ver demasiados encabezados pasando tal vez cuatro como mucho, porque la idea es que el estructura es que cada uno va a ser el rubro más grande. Y luego se utilizan los H twos para romper el resto de ese contenido. Y si quieres, rompe sobre esos trozos de contenido debajo cada martes, entonces ahí es donde usaron ocho treses y así sucesivamente. Y entonces el A H tres es que usarías en ti romper contenido de la cada tres h cuatro y así sucesivamente. Por lo que esos serían subtítulos de esta edad tres y todo el camino hacia abajo. Y como puedes ver que acabo de empezar a descomponer eso, vas a conseguir texto
realmente, realmente más pequeño, texto menos enfatizado y además, va a ser mucho oído hablar. A menos que tengas un contenido tónico y un subencabezamientos thana con el fin de llegar a H seis. Por lo tanto, utiliza estos encabezamientos, utiliza los elementos de encabezamiento etiquetas sabiamente para romper tu contenido y para
representar mejor tu contenido. Y como puedes ver aquí cuando estás entrando aquí, puedes ver que cuando inspeccionamos este de aquí, podemos ver que estos aires h dos y esta una página tiene. Entonces estos son los H twos, y también podríamos ver que si hay un H threes y así sucesivamente. Por lo que esta página se desglosa con H dos h dos de ocho treses, aire los más pequeños y así sucesivamente. Entonces cuando estás mirando la página, estos saltan más de lo que estos son secuencialmente, menos importantes. Pero todavía se les está enfatizando como diferentes áreas dentro de la página Web. Entonces la siguiente lección vamos a ver la estructuración MAWR con tu página Web,
párrafos, párrafos, saltos de
línea y así sucesivamente. Y esto es todo con el fin de representar mejor y hacer que su contenido de texto sea más digerible para sus visitantes de la Web. Entonces se acerca en la siguiente lección.
7. 7 párrafos y pautas de línea: por lo que hasta ahora dentro de nuestro texto dentro de nuestro documento HTML, en realidad no
tenemos mucho texto, y es por eso que los encabezados realmente no tienen mucho sentido porque realmente
nos estamos rompiendo y solo estamos sosteniendo algunas cosas y nosotros no tienen nada en el medio. Entonces, lo que quiero hacer en esta lección es que en algún texto ficticio y texto ficticio es realmente importante cuando estás diseñando tu página Web, y en realidad querías que se vea adecuada y en realidad se vea como una
página Web riel . Entonces agreguemos un gran trozo de texto ficticio. Divertido generador de texto ciego punto com número diferentes recursos en línea con el fin de generar algún texto ficticio. Por lo que Laura Ipsum es texto que en realidad se ve riel. Pero en realidad es así que no es el idioma inglés. Es solo texto de Laura Mitsu, por lo que básicamente se utiliza para la celebración de lugares dentro del diseño de sitios web. Entonces sigamos adelante, y voy a deshacerme de algunos de estos ritmo todo ese texto en guardarlo y refrescarlo. Entonces ahí vamos. Entonces ahora tenemos nuestra página Web. Tenemos un gran trozo de texto y bueno en realidad no se ve tan genial. Eso alguien entrando a este sitio web. Ah, muchas veces, si ves algo como esto, no
vas a ir a leerlo porque es simplemente demasiado texto y visitantes de la Web, no
les gusta tiñar el eso. Tienes menos de cinco segundos para captar realmente la atención de un usuario en un sitio web, Así que siempre asegúrate de que no sea demasiado abrumador. Algo así es abrumador. Y aquí es donde estructuramos aún más nuestra página, usando elementos como párrafos o etiquetas como etiquetas de párrafo. Por lo que estas etiquetas de apertura y cierre de aire otra vez. Y básicamente es solo romper tu contenido y hacerlo más digerible. Entonces vea aquí que cuando agrego en párrafos de inmediato, yo esta primera frase, se ve más legible, más presentable. En realidad voy a saltar aquí, y voy a agregar las etiquetas de párrafo aquí porque esto fue muy largo, y no quiero desplazarme hasta el final. Entonces voy a desarmar esto en algunos párrafos y algunos spots aleatorios aquí, y te mostraré cómo puedo transformar mágicamente esto para que sea mucho más legible. Y también asegúrate de que cuando estés abriendo tu también cierre y párrafos. No incluyo párrafos en otros párrafos, así que no anides un párrafo dentro de un párrafo. Algunos navegadores no toman bien eso. Van a lanzar un error. Eso a veces solo asegúrate de mantenerlos separados a todos. Entonces ahora solo un poco más legible Entre paréntesis, puedes embellecer el código, por lo que es más legible dentro del código. Entonces básicamente que en párrafos y podemos ver que ahora cuando voy a la página Web y refresco,
es mucho más digerible para un usuario que entra. Y luego arrojas unos encabezados. Uh, esta es una manera realmente genial de romper ese contenido. Y así si tuviera este contenido era tal vez algo en lo que respecta a mirar esto y tal vez por aquí si tuviéramos de sitio sobre mascotas. Si tuviéramos gatos aquí abriendo, cerrando, siempre recuerda tener esas etiquetas abiertas y cerradas, y entonces tal vez este párrafo podría ser sobre perros y así sucesivamente. Y cuando lo refresco y entro a la página web, realidad
parece algo que es bastante fácil y sencillo. Entonces si estoy entrando a la página Web, si estoy pensando que quiero mirar sobre los gatos, entonces sé a dónde voy de inmediato. Y puedo empezar a leer esto en lugar de tener que mirar por encima como un enorme bloque de texto sólo regular. Sé a dónde tengo que ir para encontrar lo que busco. Entonces también, si te das cuenta aquí que con párrafos realmente estaban rompiendo ese contenido Así que
hay un poco de formato ahí donde tenemos el párrafo comenzando párrafo terminando . Tenemos un nuevo párrafo comenzando nuevo párrafo terminando, y tenemos este espaciado en el medio. Y también vemos que por aquí mientras estamos envolviendo el texto, no
tenemos espaciado. Y en realidad puedes hacer esto dentro de tu código HTML también. Entonces si tuviera aquí un párrafo realmente largo, y si quiero romperlo un poco, puedo agregar los saltos de línea del. Por lo que estas son solo etiquetas br. Y cada vez que lo refresco, vemos que tenemos este salto de línea, que es diferente a un párrafo, porque no tenemos formato o estilo adicional que se está agregando en todo lo que estamos haciendo es agregar y devolver al personaje a un nuevo papel, y eso es todo lo que está haciendo aquí. Entonces no hay formato adicional. Y esta es otra forma en que puedes romper tu texto, hacerlo más consumible y más fácil de leer. Y una cosa que sí notamos aquí con los saltos de línea, no
hay ruptura de línea de cierre. Y eso se debe a que los saltos de línea son un tipo diferente de cada equipo de etiqueta, donde simplemente están insertando, insertando información sobre cómo se renderiza esa página. Entonces, en realidad no hay nada que realmente puedas colocar en el salto de línea porque
no hay contenido en una línea. Rompiéndolo simplemente esencialmente, ya que los navegadores renderizan ganando. Es un salto de línea. Sabe qué hacer. Significa que esto se ha movido a la siguiente línea y hace lo mismo. Entonces es esencialmente más obras, más como un comando, y permite al navegador Teoh, renderizar ese contenido como se esperaba. Y como el desarrollador Web lo diseñó para lucir. Por lo que en la siguiente lección vamos a ver agregar aún más para el montaje y la estructura. Entonces si tuvieras algo donde tienes una lista de elementos en una lista de contenidos. Quieres una lista que contenido fuera y tenerlo todo tipo de bloque juntos. Entonces aquí es donde podemos usar un listas y listas nórden dentro de HTML. Entonces los que te voy a mostrar en la siguiente lección.
8. 8 creando listas en HTML: para esta lección. Yo quiero mostrarles y presentarles listas en listas ordenadas y listas ordenadas. Y para esta lección, voy a estar usando código pin porque quiero mostrarte Kyle, podemos construir una lista de ítems y realmente quiero enfocarme en estos elementos particulares dentro HTML. Por lo que lista ordenada está representando una lista ordenada. Es una vieja etiqueta L. Por lo que de nuevo, abriendo lista ordenada de cierre. Y tenemos algo de contenido aquí, así que tengo 123 y cuatro. Entonces como guardamos eso, vemos Bueno, esto realmente no se ve como una lista porque tenemos un montón de contenido aquí y ni
siquiera representa como quisiéramos que una lista representara. Esto es simplemente hacer esencialmente una línea de código, y simplemente es poner algo de contenido en el medio. Y esto no es realmente una lista. Y lo que falta dentro de esto para convertirlo en realidad en una lista, necesitas poder romper cada uno de estos ítems aquí, y necesitamos tener un punto de partida y un punto de llegada para que el navegador sepa cuál es el contenido de la es así todos los diferentes elementos de la lista y aquí es donde entran
los elementos de lista y la etiqueta es L I para un elemento de lista, y estos de nuevo se están abriendo y cerrando. Así que asegúrate de que cuando estés esperando que tu cerrándolo y veamos esa mirada lo que está pasando por aquí. Ya estamos consiguiendo eso por montar entrando. Ya está empezando a parecerse a una lista y los navegadores lanzando automáticamente este aquí, y está representando nuestro primer elemento de lista. Entonces veamos qué pasa mientras convertimos el resto de éstos en elementos de lista. Entonces vemos que representa que recorta un número dos ahí. Y ahora hagamos otra aquí. ¿ Y qué crees que va a pasar cuando cierre este ítem de la lista? Tenemos el número tres y el elemento de lista número cuatro, y vemos que esta es otra semana en la que podemos sacar contenido y hacerlo más significativo dentro de nuestras páginas Web para los visitantes de la Web. Entonces creando una lista realmente simple, directa, y probablemente te estés preguntando, Ok, bueno, ¿y si mi lista ¿Y si no quisiera estos números aquí? Y si quisiera algo más como si quisiera cartas, por ejemplo. Por lo que a veces se ven listas con letras, y casi podemos cambiar eso fácilmente. Las letras al hacer tipo ocho y esto está todo integrado con HTML s. Oh, esto es sólo algo que el navegador entiende que una nueva lista ordenada tiene capacidad cambiar diferentes tipos de lista, y lo que tenemos introducido ahora es un atributo. Por lo que ir y como estamos especificando un tipo es igual a A. Esta es información adicional que está contenida dentro de la lista ordenada. Entonces no estamos donde ya no estamos esperando que las listas ordenadas por defecto, que es el sistema Eric Value que en realidad estaban especificando qué tipo de lista se esperaba. Y hay una serie de diferentes tipos de listas para que pueda hacer mayúsculas. Puedo hacer números romanos. Eso deja todo el aire cambiante, y vemos estos aires todos actualizándose aquí. Incluso puedo hacer mayúsculas I para los números romanos mayúsculas. Entonces dependiendo de cómo quieras que se vea esta lista, puedes hacerlo de varias maneras diferentes y probablemente te estés preguntando, OK, bueno, ¿y si no quiero empezar por una? Y si mi lista empieza a las cinco, por ejemplo. Entonces este es otro atributo, y podríamos ser realmente específicos donde queremos que comiencen estos números. Observe que el número romano 5678 Y aquí es donde podemos especificar cómo empieza nuestra lista. También podemos volver a las letras. Podemos arrancarlas en E, que es la quinta letra F g h, y así sucesivamente. Por lo que note que esto nos está dando mucha flexibilidad en nuestra salida. Entonces también hay otro tipo de lista, por lo que a veces no quieres un pedido. Tu lista. Quieres crear una lista y no estás seguro de cuántos elementos Aarón la lista y así sucesivamente. A lo mejor los puntos de bala es algo que es lo suficientemente bueno para salir aquí en lugar de estos números ,
y estos son lo que se conoce como listas no ordenadas. , Por lo que l por una listas ordenadas, y también todavía necesitamos esos elementos de lista ahí dentro. Entonces todo lo que necesitamos hacer para crear una lista ordenada y actualizarla a ella un nordeste cambiar lo viejo a au y ahí vamos. Por lo que hemos convertido este en una lista de palabras conocidas. No necesitamos especificar estos atributos porque ya tenemos nuestros puntos de viñeta y este es un valor predeterminado para una nueva lista ordenada. Entonces si estás creando unas 900 listas, solo
vas a estar usando los puntos de bala. Por lo que la siguiente lección vamos a ver a MAWR sobre atributos porque este fue un giro
interesante en nuestras típicas etiquetas de apertura y cierre, porque ahora pudimos conseguir más específicos y agregar en indicaciones de información adicional sobre
cómo quieren que ese contenido sea de salida. Y ese es el propósito de los atributos es ser más específico dentro de esos impuestos html. Entonces si necesitamos de Todd en detalles, los hacemos por atributos, y vamos a mirar más de cerca los atributos en la próxima lección.
9. 10 hiperenlaces y marcadores: en esta lección, vamos a estar viendo piezas esenciales de lo que realmente hace Internet, Internet, y ¿qué es lo que se utiliza para conectar todas estas páginas juntas? Por lo que cualquier página web a la que
vayas, ves que tienes enlaces y enlaces clicables son esencialmente cómo los navegadores Web y cómo los usuarios
Web pueden navegar de una página a otra. Entonces si vas a esta página, no tiene lo que buscas. Buscas enlaces para hacer click y pasar a la siguiente página es incluso motores de búsqueda solo una colección de enlaces, y así es como realmente nos arrastramos y nos movemos navegando por la web. Por lo que los enlaces son súper importantes cuando se trata de páginas Web. Entonces abramos nuestro navegador aquí. Tenemos ese archivo de índice en el que estábamos trabajando, y te voy a mostrar cómo hacer esencialmente diferentes tipos de enlaces para que realmente puedas enlazar dentro de una página. Entonces si tengo,
como, como, una tonelada de contenido y en realidad voy a copiar algún contenido incluso de Mawr aquí, y tenía algunos párrafos aquí, y tengo un montón de contenido aquí. Ahora que puedo agregar a mi página web entrando a mi página web, voy a agregar eso en. Voy a hacer que se vea bien. Embellecer. Y sé que acabo de tener un montón de contenido aquí. Entonces lo que quiero hacer dentro de esta página ahora es quiero agregar en algunos parpadeos. Entonces voy a cerrar este por ahora. Y veamos nuestra página web. Entonces tengo un montón de palabras aquí y necesitamos desplazarnos hacia abajo para encontrar información adicional y así sucesivamente, algunas realmente haciéndolo más grande. Por lo que acercándose. Entonces vemos que sí necesitamos hacer bastante desplazamiento para bajar al fondo. Eso puede estar en la parte inferior. Podríamos tener algo dentro de esta página Web y podríamos tener área sobre aves. Y lo que queremos es que el usuario pueda entrar y realmente navegar a la parte de la página Web que están buscando. Y podemos lograr esto a través de enlaces y vamos a configurar esos enlaces. Entonces volvamos a nuestra página Web e idealmente, queremos los enlaces en la parte superior, por lo que los enlaces son solo una apertura. Cerrando A y solo hagamos esto gatos y haremos otro perro. Pero eso no deberían ser perros, Pero eso debería ser un vínculo con los perros. No esa etiqueta de perro, sino un enlace a los perros. Y por último, hagamos uno por los pájaros. Y también tal vez lo que queremos hacer es incorporar lo que aprendimos en la última lección donde tenemos en una lista nórdica y voy a cambiar todos estos ítems de la lista de dedos para que sean agradables y prolijamente lo representen en mi página Web. Y así solo estoy haciendo un poco de policía copiando y pegando rápido. Están envolviendo los artículos de la lista alrededor de esos, y eso va a embellecer. Guarda eso. Y ahora vayamos a nuestra página Web y veamos qué tenemos. Entonces tenemos gatos,
perros, perros, pájaros y muy bien listados por ahí. Eso Está en línea con lo que hay dentro de nuestra página Web y note que puedo hacer clic en thes, y en realidad no pasa nada porque volver de nuevo a la última lección. ¿ Qué necesitamos dentro de este texto ancla? Necesitamos información adicional, por lo que eso significa que necesitamos agregar atributos en estos atributos dentro de hipervínculos. Eso es lo que en realidad hace un hipervínculo. Ah, hipervínculo. Así que asegúrate de que estás sentado aquí tu hipervínculo y el atributo que estamos usando es H rudo. Y esto nos va a permitir especificar a qué página Web queremos ir. Entonces si quería enlazar a una página o si tenía una página llamada Cats y quiero enlazar a ella, volvamos atrás y actualizarla. Vemos de inmediato que obtenemos eso subyacente y este es el valor predeterminado en HTML para los hipervínculos que tenemos en contenido subrayado, subrayado. Y ahora, en un click él, vamos a esa página Web cats. Y por supuesto, no
tenemos esa página todavía. Entonces eso es lo que no va a ninguna parte. Pero esencialmente, hemos creado ese hipervínculo ahí. Entonces otro tipo de hipervínculo potencialmente sería yo enlace dentro de la página así o podríamos enlazar a una fuente externa. Entonces teníamos algo así como http y teníamos algo como, Así que vamos a enlazar a google dot com y tal vez teníamos un enlace a un sitio web de perro o algo s Oh, esto va a enlazar a esta página. Este vinculado a los gatos empiezan html. Esto va a enlazar a una página Web externa y de nuevo recordar que estamos conectando un montón de sitios web juntos por estos enlaces externos. Y otra cosa a tener en cuenta con enlaces externos y siempre una buena práctica, porque la idea de un sitio web es tratar de mantener a las personas en tu sitio web tanto como sea posible . Entonces si agrego en google dot com, alguien viene a mi sitio web clics, perros fantasma google dot com Bueno, acabo de perder a mi visitante Web, y ahí es donde agregamos en otro atributo para acomodar eso y usamos el objetivo. Y esto es lo que va a ser la ventana del navegador de destino cuando el usuario haga clic en este hipervínculo . Entonces vamos a echar un vistazo a esto. Ahora voy a mi página, tengo mi página de gatos ahí y tengo mis perros. Por lo que hago clic en perros. Nos abrimos a Google, así que está abriendo una pestaña totalmente nueva en mi navegador, y veo que realmente puedo volver a donde empecé desde Ah, y también con gatos. Siempre puedes volver tan bien como obtienes el botón Atrás ahí en tu navegador. Entonces, por último, en realidad
hay otra forma de utilizar hipervínculos dentro de su contenido Web. Y te lo prometo, no
agregué en todo este texto ficticio solo para confundir de lo que estamos hablando. Eso el propósito de ello Waas que si estás entrando en un sitio web, tal vez quiero bajar a la sección de aves de mi página. Entonces tal vez no me interesan los gatos. A lo mejor no me interesan los perros y quiero ir directo a las aves. Y quiero algo aquí arriba en la parte superior de mi página web. Por lo que el usuario puede bajar realmente fácilmente a ese contenido para que no tenga que leer todo y simplemente podrían hacer clic porque están consiguiendo Recuerda a esos usuarios Web que están buscando hacer algo. Están buscando Teoh, cumple su necesidad en tu página web lo más rápido posible. Entonces la mejor idea cuando estás diseñando sitios web es representar algo y ayudar a ese usuario a encontrar lo que está buscando. Y esta es una gran manera de hacerlo también. Entonces es abrir nuestro editor y pájaros curiosos. Entonces de la forma en que queremos hacerlo, en realidad
queremos un enlace a esta pieza particular de contenido dentro de nuestra página web. ¿ Y cómo hacemos eso? Entonces sabemos que necesitamos dedo del pie agregar en un treff. Por lo que necesitamos agregar en donde queremos que termine el dedo del usuario, y eso es lo que usamos h refs eran. Pero qué tipo de qué información colocamos aquí para indicar que queremos
enviarlos a este apartado en particular. Y aquí es donde tenemos que agregar otro atributo Así se pueden agregar atributos a cualquiera de estos elementos. Cualquiera de estas etiquetas tenemos capacidad de agregar y atributos a cualquiera de ellas. Y uno de los atributos que podemos usar y ustedes lo ven usado con bastante frecuencia es el i. D. Así que esto nos permite identificar realmente este elemento en particular en el auricular. Entonces le vamos a dar un I. D. De pájaros, algo que tiene sentido subir aquí. Ahora vamos a cada ref y vamos a enlazar con las aves. Entonces usando el hash para indicar que esto está encendido, había identificado elemento dentro de nuestra página web, y tenemos aves ahí. Ahora volvamos a nuestra página Web, ver qué pasa. Entonces parece que todos los otros dos hipervínculos, y cuando hago clic en él, mira lo que pasa. Nos bajan dos pájaros, y esto es genial para el usuario que entra. Pueden hacer clic en él y pueden ver Bueno, ahora estoy en la sección de aves de mi página Web, y esta es una gran herramienta si tienes mucho contenido dentro de tu web, y quieres que los usuarios puedan navegar rápidamente por ese contenido . Entonces la siguiente lección, como mencioné uso de imágenes, está por todo el lugar. Es una manera realmente genial de involucrar y satisfacer a tus usuarios a medida que entran en tu página Web , y no sólo se representan con un montón de texto. A nadie le gusta eso. Agrega esas imágenes en, y te voy a mostrar cómo hacer eso en la próxima lección
10. 11 Trabajar con imágenes: Hasta el momento, hemos estado trabajando en una página Web bastante aburrida, agregamos e hipervínculos que agregaron en algo a nuestra página web. Pero al entrar en este sitio web, solo
hay mucho texto y visitantes de la Web. Ellos quieren ser entretenidos, quieren comprometerse. Quieren conseguir algo que capte su atención y se ve esto por todo el lugar. Cualquier sitio web siempre hay usos de imágenes y max mezclado con el texto Texas formateado en diferentes tamaños y así sucesivamente. Y esta lección te mostraré puedes agregar imágenes en tu página web. Vamos a seguir adelante y sumar en una imagen. Entonces tal vez antes que nada, queremos sumar para gatos que quieran agregar en imagen de tal vez algunos animales o algo así. Entonces vamos a crear una nueva línea aquí y la etiqueta toe agregando imágenes es I m G. Así que típicamente, lo que podrías estar esperando con las etiquetas de apertura y cierre es que tal vez tendrías yo m g. Y luego pones la imagen ahí y luego la cierras. Pero en realidad, eso no tiene mucho sentido, porque la imagen típicamente o debería ser representada como un atributo, igual que está dentro de los hipervínculos, porque con una imagen, es igual que la línea rompe que vimos antes que esta es una etiqueta de auto cierre. No necesitamos ningún otro contenido. Sólo necesitamos saber dónde se encuentra esa imagen. Entonces vamos a configurar una fuente para esa imagen e igualemos la fuente. Entonces al igual que lo que hicimos con los hipervínculos, necesitamos especificar dónde se encuentra esta imagen. Entonces si esa imagen se encuentra dentro de nuestra carpeta raíz podría ser algo así como cat dot jp. Pero para esta lección, no
tengo ningún contenido. En realidad, las imágenes configuradas y listas para salir. Entonces, ¿a dónde voy a recurrir a Internet, igual que lo hice con el generador de texto ciego? En realidad hay una solución para imágenes
fictizas, y por suerte para nosotros, tenemos una para gatos, así que puedo seguir adelante y podría conseguir una imagen en color de un gato. Puedo conseguir algo como esto y puedo conseguir un camino hacia ese gato. Eso Todo lo que estamos haciendo aquí es que voy a copiar ese camino al gato que va hacia aquí y en lugar de que la fuente sea el gato J. Peg, abramos y
creemos. Tan solo asegúrate de que estoy especificando un correctamente para gatos y volver a mi código Aquí. Guarda eso y volvamos a nuestra página Web y la refresquemos. Y ahí vamos. Entonces tenemos unos gatos ahí, y también podemos añadir algunos otros animales también. Entonces no estoy seguro si voy a conseguir perros, pero tal vez para el siguiente párrafo. Desde los gatos que quiero agregar en algunos perros. No tenemos perros, pero podemos hacer animales. Entonces tal vez por suerte podríamos conseguir algunos perros. Lo mismo para las aves. Hagamos algo así también y hagamos algunos animales ahí. Ahora vamos a cotizar, refrescar nuestra página y ver qué pasa. Por suerte para nosotros, terminamos con el perro ahí, interactuamos con el perro en los pájaros. Pero eso está bien porque nunca sabemos lo que estamos esperando cuando entramos en este placeholder de contenido generado
automáticamente dentro de nuestro sitio web. Entonces ahí vamos gatos, perros y demás. Entonces otra cosa con las imágenes es que muchas veces si alguien viene aquí y tal vez la imagen no se carga. O si están usando un lector de pantalla, no
van a poder decir lo que está contenido dentro de esta imagen. Tan buena práctica. Las mejores prácticas con imágenes siempre agregaron esas etiquetas todas. Por lo que todas las etiquetas son básicamente una forma que puedes especificar a los lectores de pantalla o en caso de que tu imagen no cargue alguna información adicional sobre lo que era el usuario, lo que se pretende que esté dentro de este espacio. Entonces esto podría ser, oh, gato y éste sería pick para perros. Y estas son solo las etiquetas todo y otra vez especificando Bird, tal vez así, no estoy seguro de lo que en realidad viene aquí arriba, pero tal vez tengamos un pájaro ahí. Entonces ahora cuando lo refresco, tengo un gato tiene una jirafa, y tengo una manera de especificar si esa imagen no aparece. Eso Vamos a mezclar aquí este camino, refrescarlo. Entonces ahora la segunda imagen no va a aparecer, pero obtenemos algo que dice “pick dog”. Y esto es lo que viene de las etiquetas del altar así como si vienes con un
lector de pantalla,
va en lector de pantalla, lugar de re en lugar de sólo tratar de mostrarte una imagen. En realidad leerá cuál es el contenido de esa imagen. Entonces en la siguiente lección vamos a ver formas adicionales de que podemos romper parte de este contenido. Entonces tal vez queremos armar una mesa y queremos tener un montón de información que pondría para el usuario Web. Y te voy a mostrar cómo armar una mesa en las próximas lecciones que se están acercando.
11. 13 Crea tablas: En una de las lecciones anteriores, miramos una nueva lista ordenada y listas ordenadas, y vimos debilitar lista hacia fuera algún contenido. Bueno, ¿qué pasa si tienes múltiples columnas de contenido, múltiples filas y estás listando este contenido de manera agradable y ordenada para tus visitantes de la Web? Y para hacer esto, tenemos tablas tan similares a los ítems de lista lo tenemos abriendo y cerrando mesa. Entonces abrir y cerrar etiquetas de tabla Y ahora tenemos que agregar algún contenido dentro de la tabla
y una tabla en realidad va a tener más que sólo esa dimensión. Entonces en los artículos de lista, teníamos un montón de artículos aquí. Los enumeramos todos. Pero también tenemos que considerar que tenemos filas y columnas, así que aquí va a haber dos dimensiones, así que necesitamos construir esto dentro de nuestra página Web y para tablas. Por lo que especificamos que para cada vialidad especificamos el desglose. Entonces vamos a tener un número múltiple de filas para que solo podamos abrir y cerrar esas etiquetas de fila . Y así ahora tenemos toda nuestra rosa configurada aquí, y no hay necesidad de agregar en ese contenido. Entonces para mesas podemos hacer t d Así que creo que esa es mesa nos hizo. Entonces tenemos uno cerca de ese Tedy. Y si tuviéramos más de una columna, así tendríamos que y tendríamos tal vez tres por aquí y así sucesivamente. Ahora se puede ver que ya estamos empezando a construir alguna estructura para nuestras mesas. Eso para encabezamientos de mesa. En realidad hay adicional en lugar de TD, estamos usando T h para que de esta manera, el navegar entienda que estos encabezados de mesa aérea. Entonces esto fue, si es así si estuviéramos coleccionando manojo de nombres de personas. Por lo que nombre cerrar esa cabeza de mesa siguiente, encabezando en nuestra mesa. Ya ves, se
pone audaz automáticamente. Ahí s Así que si hubiéramos perdido nombre, cierra esa cabeza de mesa y digamos que estamos coleccionando un montón de números telefónicos. Entonces si Dios está abriendo y cerrando cabeza de mesa, tenemos esencialmente columnas conseguir listados y así sucesivamente. Por lo que todo está consiguiendo salida y representado. Y ahora, en lugar de eso teníamos a John simplemente lo haría. John Smith ahí y maquillará algún tipo de número completo aquí. Número telefónico inexistente. Copia eso más. Entonces copia ese formato y la siguiente persona en nuestra lista podría ser alguien llamado Mike. Sólo dale un nombre. Mike Jones. Y luego tiene un número de teléfono ligeramente diferente. Y entonces qué? Por lo que de esta manera podemos empezar a representar un out poniendo su contenido de una
manera más significativa a nuestros visitantes de la Web. Entonces probablemente mirando esto y diciendo
Vale, bueno, se ve bastante bien, pero la mesa está un poco estrecha aquí. El nombre de pila apellido. Está abarrotado junto con el número de teléfono, y no es realmente evidente que aunque se parezca a una mesa, realmente no se ve exactamente como lo
que quisiéramos que se vea nuestro dedo del pie de mesa. Y aquí es donde agregamos en atributos. Por lo que agregamos un estilo adicional a nuestras tablas y también cualquier otro atributo que pudiéramos agregar fin de que nuestras páginas Web luzcan ah mucho mejor o Web Khan le envejeció un contenido se vea mucho mejor. Entonces con agregar en estilo a nuestras páginas Web, podemos hacerlo en línea Riyadh, en los atributos de estilo aquí, así que voy a especificar que esto es 100% y darle propiedad de con. Entonces ves que de inmediato cambia la forma en que el aspecto y la sensación de nuestro contenido. También podemos agregar en estilo en un archivo CSS así donde habíamos agregado en etiquetas de estilo arriba en la parte superior de la página. Se trata de una serie de formas diferentes de agregar en estilo dentro de las páginas Web s por lo que esta es una forma de agregarlo como atributo. Entonces en la siguiente lección, les voy a mostrar cómo pueden agregar estilo y actualizar el aspecto y la sensación de sus
elementos HTML que se acerca en la siguiente lección.
12. 14 styling CSS en HTML: la última lección que miramos, cómo podemos construir una mesa, e introdujimos cómo podemos agregar algo de estilo. Por lo que en realidad personalizar la forma en que el contenido HTML se genera dentro de la página Web. Entonces no todas las tablas tienen que verse de la misma manera cuando agregamos atributos. Y esto es parte emocionante del diseño Web, porque esto permite utilizar atributos con el fin de agregar su propio giro, aspecto y tacto al contenido de su salida en su página Web. Por lo que vimos que podemos sumar en un ancho del 100%. También podemos hacer cosas para que podamos cambiar estos estilos juntos por el semi colon aquí. Y yo podría hacer algo así como una frontera. Por lo que un pick border on hacen que ese portero negro sólido. Entonces todo esto está dentro de esa misma propiedad, y vemos que enseguida conseguimos esta frontera por ahí por lo que tiene un poco más sentido. Ahí. Podemos decir que este es el contenido de esa tabla. También podemos sumar en estilo y lo bueno. El genial de los atributos es que puedes agregarlos a cualquiera de tus elementos, así que si quería sumarlo aquí arriba. Puedo agregar ese mismo estilo dentro del rol aquí, y en realidad no lo hacemos. Entonces cuando guardo esto así quería ilustrar cómo va a ser esto,
así que en realidad no veo ningún cambio ahí. Y eso se debe a que el papel en sí no se puede establecer un ancho del 100% en el rol no
tiene sentido . Y borde de una púa negro sólido otra vez. El papel es todo esto por aquí. Por lo que realmente no tiene mucho sentido hacerlo al 100%. Entonces hay que recortar eso y solo aplicar un estilo que realmente tiene sentido. Y típicamente, para algo como esto, estarías aplicando ese estilo en el en la celda activa real. Entonces vemos aquí que el nombre obtiene que vemos que el apellido se establece y así sucesivamente, y ahora vemos que podemos agregar en estilo individual para esos elementos individuales. Podemos actualizar eso y cambiar el aspecto y la sensación. Pero el inconveniente de lo que estamos haciendo es que estamos agregando toda una tonelada de código aquí y realmente mala práctica agregar esos atributos de estilo, a
pesar de que es bueno probar el estilo y probar todos estos valores diferentes aquí y hacer algunos actualizaciones como quieres fronteras quizá más gruesas. Realmente puedes jugar con esto fácilmente y hacerle algunas actualizaciones y ver cómo
resultan y cómo se ven y demás para que veas que hay un montón de actualizaciones. Debilita hacer aquí hacer hacer algo así como eso sólido. Por lo que hay muchas opciones diferentes. Pero el inconveniente es que tenemos que repetir esto pegado una y otra vez si lo estamos aplicando para todos y cada uno de los elementos, lo
cual es simplemente que consume mucho tiempo, muy confuso. Y si quieres hacer una actualización, tienes mucho código y muchos atributos que actualizar. Entonces si quiero actualizar estos encabezados de tabla, no
me gusta el negro. Yo quiero ponerme azul. Va a ser realmente difícil porque tengo que pasar por cada uno. Y es por eso que tener estilo para la página en el estilo de la página así como CSS es súper útil con en este caso. Por lo que ha saltado de nuevo a nuestra página Web. Y veamos cómo podemos darle estilo a cada uno de estos elementos aquí. Subamos a la parte superior de la página, y vamos a crear una marca que etiquetas llamada Style. Por lo que abre y cierra ese tipo de estilo. Entonces esto es CSS hojas de estilo en cascada, y esencialmente, esto nos da la capacidad de parchear en cualquiera de nuestros elementos o todo un grupo de elementos y realmente hacer algunos cambios en esos elementos. Y con el estilo, tenemos una serie de formas en que Teoh selecciona estos elementos de nuestra página Web. Entonces vemos que tenemos sólo un montón de contenido aquí vimos previamente cómo podemos agregarles atributos de estilo a cada uno de estos elementos, pero no realmente eficientes. Entonces veamos nuestro rumbo a y hagamos una selección de todos nuestros dos encabezados. Entonces H dos corchete rizado y ahora todos queremos hacer es especificar las propiedades que queremos, un lugar que queremos que cada uno sostenga y cómo queremos lucir. Entonces vimos que usábamos frontera antes, así que usemos esa otra vez. Por lo que una púa rojo sólido. Guarda eso. Vuelve a nuestra página Web. Refrescala. Y ahora vemos que todos nuestros H dos ahora tienen la misma propiedad. Entonces, básicamente, lo que hemos hecho es que hemos tomado nuestro código HTML. Encontramos una manera de escoger los diferentes elementos que hacerlos representar y poder aplicar algo a esos. Entonces probablemente miren esto y digan
Bien, bueno, ¿y si algunos de estos h dos no quiero tener este borde no quiero tener este color no
quiero tener estas propiedades a. Y aquí es donde el estilo nos da algunas otras opciones adicionales. Entonces una de las cosas que vimos antes es que podemos d diferentes elementos. Y con i DS, no
podemos tener múltiples elementos con el mismo yo d no una buena idea. Entonces pero con ideas realmente fueron capaces de especificar que para las aves, Tal vez quiero algún tipo de color de fondo específico para solo este elemento
en particular dentro de la página web. Entonces, vamos a seleccionar las aves de la misma manera que hicimos nuestro hipervínculo. Entonces el hash ahí, el nombre o el yo d fuera del elemento, y ahora somos pájaros seleccionados. Hagamos un color de fondo para que podamos hacer color de fondo y elijamos un color para el fondo. Guarda eso. Vuelve a subir a la página, refrescarla, y ahí vamos. Entonces este, pudimos elegirlo de todos los demás elementos usando el I. D y aplicarle algún estilo. Y de esta manera podríamos haber ido igual de fácilmente por aquí y estilo. Azan atribuye y agregó el color de fondo para que esto funcionara de la misma manera. Pero la mejor práctica suele ser mantener todo tu estilo y un área dentro de tu código HTML , para que puedas tenerlo más legible siempre que necesites hacer actualizaciones y así sucesivamente. Tanto, mucho, mucho mejor manera de representar y actualizar su estilo de tu página. Por lo que vimos cómo podemos seleccionar diferentes elementos. Incluso podemos hacer algo donde podamos hacer los ítems de la lista y actualizarlos realmente fácilmente
vuelven a subir aquí. Vemos todos los artículos de nuestra lista ahora tienen ese borde rojo y así sucesivamente. Entonces todo lo que necesitamos hacer es como el nombre de la etiqueta y podemos aplicarle estilo y seleccionarlo de nuestro contenido. Entonces uno de los problemas que probablemente estás pensando Bueno, ya
sabes, puedes seleccionar estas etiquetas. Podemos seleccionar alrededor de un elemento individual dentro de nuestra página. Pero, ¿qué pasa si tengo algunos párrafos donde quiero agregar en algún contenido desde estilo hasta y tal vez tengo, uh, H dos aquí? No voy a aplicar ese estilo de vapor. Entonces, ¿cómo selecciono esos? Yo quiero que haya pasado varias veces dentro de la página Web. A lo mejor uno resaltado o algo así. Y no puedo no lo encuentro. No lo puedo escoger entre las etiquetas y entre el i DS. Y hay otra forma de seleccionar un impar en representación para los elementos. Y esas son clases. Por lo que agregamos otro atributo, y hacemos clase. Entonces tal vez haría algo como resaltar. Por lo que siempre trata de mantener tus nombres significativos. Eso si quiero resaltar eso y quiero resaltar mis perros aquí y luego justo aquí. Quiero resaltar algún contenido así que te muestro como hacer eso. Un oleaje. Pero por ahora, solo
resaltemos varias etiquetas diferentes. Y con puntos destacados lo hacemos por clases. Es un punto para representar a esas clases, y vamos a hacer lo mismo. Una aquí es que hicimos un color de fondo y esta vez se hizo color de fondo, escuela
amarilla, atrás. Refresca y podemos ver que podemos resaltar cualquier cosa con el atributo, la clase de resaltado y resalta. Pero y si queremos resaltar tal vez algunas palabras, pero no queremos cambiar la forma en que se está representando nuestra salida sobre HTML. Por lo que queremos sólo en la fila de algo. Resalta unas palabras aquí, allá, y no queremos Oh, resalta todo el elemento. No queremos crear una roca de párrafo a su alrededor y tanto tiempo. Entonces hay una solución para eso. Dentro de HTML, te
voy a mostrar cómo hacer eso en la próxima lección.
13. 15 Divs spans en HTML para mejorar la estructura: en esta lección. Quiero presentarte a baberos y spans, y lo que hacen Gibson spans es que nos permiten realmente romper nuestro contenido HTML sin agregar ningún formato adicional. Entonces digamos, por ejemplo, quiero resaltar esta palabra que podría agregar en un lapso en un lapso esencialmente, es un elemento HTML no va a cambiar cómo mi contenido está obteniendo salida para poder ponerlos por
todas partes. Y cuando vaya a la página Web, en realidad no va a ser diferente. Voy a deshacerme de mi resaltado aquí porque quiero conseguir no quiero que se resalte todo ese párrafo. Yo lo refresco, y en realidad no sabemos dónde se encuentra nuestro aire de vanos. Pero lo genial de los tramos es que ahora podemos sumar atributos en él para que podamos sumar en esa clase de punto culminante a este lapso si queremos entrar en este lapso o tal vez en este lapso, y tal vez éste sólo se mantendrá como lo ISS por lo podemos actualizar. Podemos seleccionar los tramos igual que hicimos cualquier otra etiqueta. Quiero agregar en un borde por ahí. Y también puedo sumar,
uh, uh, para la clase, lo más destacado
del amarillo. Echemos un vistazo y veamos cómo se ve esto ahora. Entonces vemos que todos los tramos obtienen el borde que lo rodea porque solo está seleccionando
ese estilo en esa clase en particular. Pero lo interesante aquí es que somos capaces de resaltar diferentes piezas de contenido
de diferentes maneras, y realmente podemos romper ese contenido. Entonces hay otro esencialmente un contenedor que podemos usar para estructurar realmente nuestro
código HTML . Muchas veces podrías haberlo visto usado, tal vez para envolver toda la página. Entonces en lugar de solo usar nuestro cuerpo, podemos hacer algo así como ¿d rapero o algo así? Cierra eso y podríamos envolver todo un montón de contenido. posible que también lo veas siendo usado para y puedes pudrirte. Se puede colocar thes dentro de eso dibs dentro de otros dips y así sucesivamente para que pueda tener otro div. Y tal vez esta es tal vez esta área aquí representa mi cabecera. Entonces tengo mi cada uno aquí y así sucesivamente. Entonces tengo algo de contenido de cabeza aquí, y solo voy a agregar aquí algún contenido adicional, cerrar ese y guardarlo. Haz que se vea bonito. Embellecer. Y ahora vamos a refrescarnos y podemos ver que los dibs, en realidad
están retomando el lleno con bloque, pero cumplen sobre todo, nos
están permitiendo separarnos y mirar nuestro contenido como si fuera en pedazos. Entonces al igual que lo que miramos con cabeza y cuerpo HTML, los saltos nos permiten realmente romper este contenido en secciones más significativas de nuestra página
web. Entonces tengo un div que envuelve a éste. Y ahora tal vez queremos tener otro div aquí. Dándoles yo d de media. Por lo que esto sería por todo el contenido principal aquí. Y simplemente bajamos a tal vez esto todo esto está dentro de Maine, y quiero tener otro div aquí y darle un I D off pie de página y solo para agregar en algún contenido aquí, hacer que se vea bien de nuevo. Vuelve a nuestra página. un vistazo y vemos que básicamente, hemos llegado a rompernos por contenido usando estos dibs Dibs automáticamente comenzó nuevas líneas. Entonces si fuera a envolver este en un div y no voy a dar este div en yo d eso no
necesitas especificar esos atributos. El aire atributos no es obligatorio dentro de dips. Y vemos que lo que sucede aquí cuando este DIV se rompe automáticamente inicia una nueva línea ahí porque el div en realidad ocupa todo ese bloque de código. Entonces en realidad lo siento, éste. Ese es el diff. Se ve que el div igual que los cada uno. Por lo que tienen las mismas propiedades que las propiedades estatales de cada uno, párrafos ocupa todo ese bloque de frío. Entonces si fuera a especificar en realidad en lugar de ahí si quería hacer Div para que podamos ver cómo se ve
el DIV en contraposición a span tan rápido. Este sigue siendo el lapso. Vemos que el span Onley contiene esa sección en particular por lo que está en línea no rompe nada. No se ve diferente hasta que le aplicamos algún estilo. Entonces echa un vistazo a lo que le pasa a los dibs cuando lo refresquemos. Vemos que el Dev se mueve hasta el final. Ocupan la línea de código completa disponible. Entonces este Dave de aquí está retomando esa línea completa. El pie de página está retomando la línea completa. Tenemos al rapero ocupando la línea completa, el encabezado ocupando la línea completa y así sucesivamente. Por lo que los dibs y spans se utilizan esencialmente para construir esa estructura dentro de sus páginas Web y para crear alguna ruptura y estructura más inteligentes dentro de su contenido de su página Web. Eso construyendo tu página web, construyendo tu estructura. Míralo como diferentes secciones, diferentes piezas usan esas dibs. Utilizó esos tramos para separarlos y representar mejor ese contenido. Y sobre todo cuando estés pensando en aplicar estilo, asegúrate de tener esas dibs bien dispuestas y listas para poder acomodar el estilo como agregaste a la página Web. Entonces ahora una de las cosas aquí es que probablemente estamos mirando y que deberíamos estar considerando es que queríamos trabajar como un HTML de cinco páginas eso usando dibs y usando spans, sobre todo da s Oh, esta es una forma más antigua de pensar. Originalmente, cuando estamos diseñando nuestras páginas Web, no
teníamos opciones adicionales, por lo que los creativos les darían ideas de pies de página. Pero cuando apareció HTML cinco, se dan cuenta de que los desarrolladores web comúnmente estaban haciendo lo mismo. Estamos dando estas ideas para los dibs, y estaban buscando unas palabras más semánticas, más
significativas más
significativasy significativas para romper tu contenido. Y todo esto fue traído con HTML cinco. Entonces con HTML cinco, conseguimos todo un montón de etiquetas nuevas que podemos utilizar con el fin de estructurar mejor nuestras
páginas Web y el uso de todas estas nuevas semánticas. Muchos de ellos. Funcionan de la misma manera que dibs, pero nos permiten tener más significado cuando estás leyendo a través de ese código HTML. Entonces te voy a mostrar y presentarte a los de la próxima lección.
14. 16 elementos semánticos5 HTML5: vimos en la lección anterior tal como construimos en nuestra página web. Y mientras miramos nuestro código HTML, empezamos a usar dibs Ah, todo el lote. Y con cada uno a Mel cinco. Ahora tenemos algunas opciones más y un mejor mecanismo de nomenclatura dentro de nuestro impuesto HTML. Entonces echemos un vistazo a lo que se introdujo con HTML cinco y siempre es una buena idea
tomar en consideración estos nuevos elementos. Vemos que tenemos toda una tonelada de ellos aquí. Tenemos artículo afuera y tenemos Footer, Header, y tenemos sección aquí. Tenemos un montón de ellos aquí que en realidad representan lo mismo que estamos haciendo originalmente dentro de los saltos. Entonces básicamente, desde el artículo fuera y usando cualquiera de estos, en realidad
podemos reestructurar nuestros H dos machos en lugar de tener encabezado aquí y Div como encabezado , podemos actualizar esto y simplemente voy a llamarlo mejor. Y así esto va a tener más sentido cuando estás leyendo a través de tu página web y puedes ver Vale, bueno, esto es obviamente un encabezado de mi sitio web y a veces desarrolladores web, podrían usar solo el encabezado para el jefe sección otra. Otras veces podrían tener por aquí, podrían tener un encabezado. Por lo que este podría ser un encabezado para esta sección en particular. Y por eso aún necesitas mantener ahí esa idea porque quieres asegurarte de que
ese encabezado también represente diferentes secciones dentro de tu contenido. Por lo que siempre ten en cuenta que cada vez que estás usando estos html más semánticos cinco elementos que en realidad
son reutilizables. Y si vas a estar risi usándolos en cualquier otro lugar dentro de tu página, asegúrate de mantener esas ideas si quieres poder diferenciarlas. Entonces vimos que antes que nosotros, cuando alguna vez estuvimos coleccionando, conectándonos a nuestro estilo. Tenemos que poder escoger esos elementos y aislarlos. Entonces si queremos algunos atributos específicos, algún estilo específico adjunto a ellos nos aseguramos de que tengamos una manera de identificarlos. Por lo que otro que se acostumbró se acostumbra con bastante frecuencia. Pie de página ISS. Por lo que muchas veces podrías ver algo así como, tienes pie de página de encabezado. Si tenemos una página web, tenemos múltiples columnas. Aquí s así podríamos tener algo donde tenemos sección aquí. Por lo que esta podría ser una sección y luego otra s o para un menús laterales. Podríamos tener algo llamado a un lado, y entonces aquí es donde iría el contenido de nuestro menú lateral. Entonces tal vez así tal vez el exterior iría ahí. Esta sería otra sección, y voy a tener que envolver este alrededor, así que a veces vas a ver que el artículo se acostumbra. Y así ahora este artículo tiene dos secciones en él sobre nos hemos hecho a un lado. Entonces tú así que tal vez aquí tienes en una lista no ordenada y tienes un montón de
artículos de lista . Entonces por ahora, vamos a Tatum nuevos productos y así sucesivamente. Entonces vamos a echar un vistazo a nuestra página web. Ahora veremos cómo se ve. Entonces hemos roto sangre, más inteligente, sexual no se ve muy diferente. Pero ahora hemos configurado la estructura y estamos listos para aplicar nuestro estilo para que su sitio web vea y sienta como pretendemos que se vea y se sienta. Entonces eso es lo principal aquí con los nuevos elementos semánticos para tener en cuenta que esta es una mejor manera, que para nosotros representemos nuestro código y que sea mucho más fácil cuando estamos pensando en su código, cómo queremos lucir y cómo no vamos a aplicar todos estos diferentes bloques de código cuando aplicamos algún estilo, cómo queremos lucir. Entonces la siguiente lección. Vamos a echar un vistazo más profundo al CSS, y también tenemos formularios viniendo. Por lo que hay bastante información en las próximas lecciones sobre cómo usar HTM hacia fuera. Por lo que la siguiente lección, estamos viendo formularios.
15. 18 formas HTML: en esta lección. Quiero mostrarte cómo puedes agregar formularios a tus páginas Web. Por lo que las formas son una parte realmente esencial de cualquier sitio web. Si quieres que tus usuarios puedan enviarte alguna información, comunícate contigo, entonces necesitas agregar en un formulario. Entonces voy dentro de este proyecto, voy a agregar en un formulario justo en la parte inferior con en mi Pie de página y voy a armar sólo una forma
realmente básica aquí y otra vez. Se inicia con apertura y cierre de etiquetas de formulario. Entonces abrir, cerrar y el contenido dentro de aquí es lo que vamos a estar utilizando para la forma. Entonces tal vez si quieres hacer algo realmente sencillo, como un boletín de noticias regístrate o algo así. Por lo que necesitas conseguir algo así como el nombre de los usuarios. Y típicamente lo que solemos hacer para los formularios es agregar en forma. Por lo que tenemos una serie de diferentes opciones de forma eso entrada. Entonces ese tipo de entrada y hay varios tipos de entrada diferentes. Como pueden ver aquí, corchetes me están dando un montón de sugerencias. Tienen casilla de verificación botón. Tenemos algunas nuevas con html cinco para que podamos hacer color, fecha y así sucesivamente. Entonces este es solo un texto realmente típico. Por lo que solo abre de cerca. Y también necesitamos agregar algunos atributos adicionales aquí. Por lo que hemos especificado uno de los atributos de que es un campo de entrada de texto. También necesitamos especificar un nombre para ello. Y la razón por la que necesitamos especificar un nombre es porque necesitamos alguna manera de realmente recoger esta información y poder identificarla dondequiera que se esté presentando. También puedes usar i. D. Así que d es una forma de aplicarle estilo y así sucesivamente. Si tienes algunas ideas de JavaScript usaron una gran manera de ir para hacer esa conexión entre los contenidos del formulario. También tenemos algunas opciones adicionales. Así que acabo de guardar eso, y vamos a echar un vistazo a nuestra página web ahora ver cómo se ve, y pudimos ver ahí. Tenemos nuestro elemento de forma. Entonces vamos a tomar café todo esto pop sobre código Pen y colocamos nuestro formulario ahí dentro. Y la razón por la que quiero traerlo a Code pen es porque quiero aplicar un montón de diferentes tipos de entrada aquí, y quiero poder mostrarte de inmediato cómo se ven eso voy a hacer un
salto de línea aquí, y es posible que también desee algo como el correo electrónico. Entonces, ¿quieres recoger esa dirección de correo electrónico de los usuarios? Entonces vamos a hacer tipo en lugar de texto para poder hacer texto. Parecía igual. Pero hagamos otra aquí llamada correo electrónico. Por lo tanto, dale un nombre y un correo electrónico. Entonces otra vez, no
tienes que ser realmente tan específico con eso y deshacerte de esos porque
no voy a estar agregando ningún estilo a esto. Esto es sólo con fines de demostración. Entonces ahora tenemos uno llamado correo electrónico y vemos que podemos escribir algún texto ahí dentro y lo que falta en este formulario. Entonces tecleamos algunos gravados aquí,
pero en realidad no tenemos ningún botón para enviar este formulario. Entonces necesito agregar ese botón y vamos a seguir adelante y crear otro tipo. Entonces tenemos varias formas en las que podemos hacer entrada. Podemos hacer tipo. Y viste que teníamos una opción para botón para que podamos hacer un conjunto de botones de tipo entrada de valor para enviar o algo así y cerrar eso para que nos dé un botón para enviarlo. Pero en realidad no está funcionando porque es solo el tipo es solo un botón. Y en realidad no es ser específico que este sea nuestro botón de enviar eso. Tenemos que poder especificar eso lo que queremos que haga nuestro botón. Queremos que se someta. Entonces hay una serie de formas diferentes de lograr esto, donde consensuamos en lugar de un botón. Lo que queremos que esto haga es realmente enviar nuestro formulario por lo que por defecto, lo
cambia para enviar Button. Aunque fuera a deshacerme del valor aquí, vemos por defecto, el navegador sabe que este es un botón de envío para que le den enviar. Cuando hago clic en el botón, trata de realmente enviar el contenido aquí. Eso aquí, vamos a actualizar el correo electrónico, y aquí es donde se pone realmente interesante porque porque he especificado esto como email y trato de enviarlo. Recibimos este mensaje que dice favor incluya el at en la dirección de correo electrónico y esto es nuevo con HTML cinco porque esto nos da estabilidad esencialmente para ver qué tipo de entrada deshabilitada estamos esperando. Por lo que comprueba un ISI es antes de enviarlo, que asegurarnos de que los usuarios realmente enviando información de correo electrónico ahí dentro también tenemos campos
adicionales. Entonces solo voy a hacer un default aquí, y tenemos unos donde podemos especificar los tipos que podríamos hacer algo como el número, y me voy a deshacer. Eso s Así que tenemos un número aquí. Entonces si trato de escribir texto aquí, no me va a dejar asegurarme de que siempre tengo un número ahí dentro. También puedo actualizar este do color. Por lo que conseguimos que el recolector de color apareciera y estos aires todo nuevo con html cinco. Vemos que tenemos un montón de tipos muy bonitos, bonitos, diferentes que realmente podemos utilizar. También tenemos unos que anteriormente con HTML cinco, Así que teníamos unos. Entonces me voy a deshacer de eso. Y teníamos botones de radio. Por lo que estos airean los botones de radio y típicamente con botón de opción deberían tener, también, y otra cosa con los botones de radio es asegurarse de que sea así Si tienes que
botones de radio , asegúrate de que el nombre sea el mismo y eso nos da la capacidad de tener este tipo de efecto donde hacemos click en uno lo cantata Gle entre ellos. Siempre es asegurarnos de que tengamos al menos un botón de radio. Si estamos usando botones de radio, asegúrate de tener un par de ellos. Mantener el nombre igual para poder cambiar entre ellos. Tenemos otro tipo aquí donde podemos especificar que si necesitamos una casilla de verificación, aquí
hay otro tipo tan similar a los botones de radio se debilita. Cambia esto en una casilla de verificación si quisiéramos, así que tenemos una serie de diferentes. Algunos de los realmente bonitos aquí con cada equipo de cinco. Tenemos una cita. Entonces tenemos este calendario predeterminado que aparece, y podemos especificar la fecha, y eso la llena automáticamente. Vimos que podríamos hacer email text number te tenemos eres L. Así que este es otro útil, porque si intento Teoh, es teclear algo aquí, así que eso no es una U. R L Y si lo someto, obtenemos ese mismo mensaje de error que recibimos con el email eso asegurándonos de que nuestro
pato de texto que estamos esperando es en realidad lo que el usuario está poniendo en s un número de otros que podrías ver por lo que podríamos ver texto. Ahí hay área de texto, y ésta va a ser diferente a sus típicas. Tenemos área de texto aquí, y el contenido en realidad está sentado entre aquí haciendo todo, solo con atributos. Tenemos contenido aquí que tenemos en el medio y vemos que la salida está siendo salida ahí. Y entonces aquí es donde podríamos especificar los nombres. Tenemos un área de texto o como sea que queramos llamarla, y vemos que la salida se sienta en el medio. Entonces este es otro tipo de entrada donde podemos especificar tenemos todo un montón de contenido
que queremos tirar, y así sucesivamente. Entonces, junto con toda una gama de thes diferentes etiquetas que podemos usar en estos atributos, también
tenemos la capacidad de agregar algunos atributos más específicos dentro de nuestros formularios HTML. Entonces te voy a mostrar más sobre esto en la próxima lección
16. 20 atributos de forma: la lección anterior, vimos todas las cosas realmente geniales que podemos hacer con la edad para mull formas. Por lo que esta lección quiero ponerme más específica sobre los diferentes atributos que están disponibles para nosotros cuando estamos creando nuestras formas. Entonces con las formas, hay bastante que puedes hacer con ellas. Y una de las cosas que puedes hacer es que puedes establecer algunos valores por defecto. Entonces si queremos que Teoh establezca un valor para el primer nombre, así que todos los que entren verían automáticamente este nombre de Mike, podemos ir. Valor es igual a Mike. Es lo mismo que hicimos aquí con el botón de entrada. Entonces si no queremos teclear submit, entonces haríamos valor, conseguir esto o como quieras llamarlo, y vemos que eso cambia. Por lo que los atributos de valor se utilizan con el fin de cambiar el valor de la entrada, para También podemos hacer cosas donde tal vez queramos desactivar esto. Podríamos hacer deshabilitados, y eso nos da la capacidad de no darle al usuario, no darles la oportunidad de actualizar realmente el contenido ahí dentro. También podemos especificar cosas donde queremos estar querer especificar requerido también. Por lo que este correo electrónico, tal vez queremos hacer requerido. Entonces esto es HTML cinco eso Cuando hago clic en él, tenemos este pop aquí arriba que dice, por favor rellena este formulario. Este otro realmente útil en h 205 donde estamos estableciendo eso requerido. Entonces otra cosa aquí, para tener en cuenta, es lo que realmente hacemos con la forma misma. Entonces en realidad no lo sabemos. No hemos especificado dónde realmente estamos enviando este formulario,
dónde, dónde, cómo estamos enviando este formulario o algo por el estilo. Y aquí es donde hay que agregar algunos atributos dentro de la forma misma. Por lo que la acción va a especificar dónde realmente estamos enviando el formulario para enviar acoplado. Y por lo general vas a hacer algo donde lo estás enviando en el servidor y
eso que en realidad podría recoger esos datos y utilizarlos. Entonces si sí nos sometemos y ahora hacemos clic en él y en realidad debería quitarle esto requerido porque lo contrario voy a tener constantemente que hacer clic en eso. Entonces si hago click, esto fue para guardar esto rápidamente, hacemos click en él y vemos que no tenemos que tú eres más. Tenemos que volver ahí, y esa es una de las cosas aquí dentro de la forma que cuando especificamos hacia dónde vamos, en realidad
es por defecto y envía esa página a ahí. Hay otra cosa que es realmente importante dentro de las formas, y eso es especificar el método. Entonces con los formularios tenemos una opción para enviar, obtener método y en realidad dentro de aquí no fueron capaces de ver. Entonces voy a crear un nuevo sitio de página, este capataz aquí y sólo lo diremos como mi antebrazo punto html Y ahora puedo ir por aquí y pasemos a mi forma HTML. Ahora vemos que tenemos este formulario aquí y hago clic en él y vemos así que está tratando de
enviarlo para enviar dot com. Pero mira en la U. R escucho donde realmente hemos especificado información que ingresamos en el formulario. Esto es lo que quise decir con lo que estamos recibiendo dentro del formulario y cuando lo usamos, realidad coloca este contenido del formulario en nuestra u R l aquí dentro de donde estamos enviando los datos. Si usamos post lo que va a pasar. Entonces ahora cuando refresco esto y ahora recuerdo, esto ya no es conseguir. Esto ahora es post. Entonces cuando hago clic en él, vemos que no conseguimos que ninguna de esa información se pase dentro del Tienes razón, y básicamente la diferencia entre get y el Post Post es donde envías tu
información segura . Entonces si tienes contraseñas o tienes un montón de datos que quieres no estar
dentro de la URL que te aseguren de que estás enviando la publicación en lugar de conseguir porque el invitado no
es seguro y no lo es, no lo es. El mejor modo de enviar datos es porque es legible dentro de la U. R I. Y si estás recogiendo de eso, tú o yo, si alguien consigue eso, tú o yo, entonces eso realmente podría conseguir enviado y enviado al servidor. Entonces si el servidor está recogiendo esa información, así que usa post para comunicaciones seguras use todavía, para si quieres que esos datos estén sentados dentro de la URL, y si no especificas la página que estás enviando un a algunos volviendo aquí en la actualización lo y me pego. Es así que acabamos de volver por defecto a la página por defecto. O debería decir, la página actual que los usuarios en por lo que en realidad no vamos a una página nueva. Simplemente volvemos a la misma página que acabamos de enviar. Y alguna parte importante de esta lección es por eso que especificamos con nombres, porque así es como lo recogemos dentro del servidor. Si no
especificáramos estos nombres, en realidad no tendríamos forma de poder recoger el contenido aquí. Entonces mira, dentro de eso estás l ahí donde puedes escribir algún contenido ahí y claro que necesita
ser un año, Earl. Entonces vamos a crear un euro aquí. Y cuando lo
golpeamos, en realidad no estamos pasando nada. Y eso es porque no hemos especificado el nombre. Pero si cambio esto y si agrego un nombre Teoh a su segundo, sólo lo llamo Earl. Vuelve a salir. Actualiza esta página. Ahora estás grabando. Tú eres yo otra vez. Y ahora yo demasiados tés. Entonces ahora vemos que ahora en realidad ha pasado dentro de la u. R l aquí arriba en la parte superior. Así que siempre asegúrate de que sí especifiques el nombre en esto es cómo puedes recuperar esos datos en el otro extremo cuando estás recogiendo eso, por lo que trabajas con formularios en HTML. Entonces la siguiente lección vamos a finalizar el curso, vamos a repasar rápidamente cómo podemos agregar en estilo, cómo no podemos en JavaScript y cómo realmente podemos actualizar nuestra página Web con el fin de que sea más efectiva y dinámica, usando CSS, haciendo que se vea mejor y luego javascript en orden a interacciones dinámicas impares que
viene en la siguiente lección.
17. 21 archivos CSS: en esta lección. Quiero mostrarte Mawr sobre cómo podemos trabajar con CSS cómo no podemos CSS a nuestras páginas web y mucho más así que anteriormente miramos lo que podemos hacer con los formularios, y vimos que podemos hacer bastante cosas realmente aseadas con los formularios. Entonces voy a volver y abrir aquí nuestra página de índice original. Entonces esta es esa página Web original con la que estábamos trabajando, y vamos a echar un vistazo más de cerca a lo que estábamos trabajando con estilo. Entonces al ir a Code Pen, que también habíamos mirado dentro del curso vimos que la pluma de código rompe nuestro código en HTML, CSS y JavaScript. Y también vimos que si
quisiera, podría conectar forma. Podría hacer algo así como el color de fondo, y podría especificar el color aquí y ver que se hace efectivo automático Tate. Entonces, ¿qué está pasando aquí? Y además, si quiero incluir algún script java,
Aiken, Aiken, hacer algo de JavaScript rápido allí veríamos que nos viene esta ventana emergente, y como se renderiza la página que obtenemos nuestro javascript disparando. Obtenemos nuestro CSS y la forma en que esto está funcionando con CSS. Vimos que podemos incluirlo dentro de la misma página. Pero también vimos
camino, mucho de vuelta dentro cuando estamos mirando el código fuente original. Vemos que tenemos muchos enlaces hacia fuera a páginas CSS y podemos hacerlo. Y esta es en realidad la forma más inteligente de traer CSS a tus proyectos web porque esto
te da la capacidad de construir realmente un sitio web y enlazar un montón de páginas. Y luego cuando actualizas ese archivo CSS, entonces actualiza todas tus páginas Web simultáneamente porque todo lo que son es que se están conectando y están obteniendo sus valores CSS o sus estilos de esa página CSS. Entonces vamos a mostrarte cómo funciona eso. Por lo tanto, volviendo a nuestro código fuente, vamos a eliminar están en el estilo de la página. Guarda eso, abre un nuevo archivo, pega eso y nota que no estoy agregando ningún archivo HTML. No estoy abriendo y cerrando ni las etiquetas HTML abriendo y cerrando porque este va a ser un tipo
diferente de archivo. Es un archivo CSS, así que sigamos adelante y guardemos esto. Voy a llamarlo estilo. CSS dada extensión de CSS. Y ahora este es un archivo CSS real. Mostrémosle esa barra lateral. Y ahora cada vez que guardamos nuestra página de índice, volvemos aquí y volvamos a esa página de índice. Refrescala. Por lo que todo nuestro estilo se ha ido. Hemos perdido nuestro estilo en su página, y eso significa que necesitamos conectarnos y conectarnos a ese melocotón CSS. Y de nuevo, la parte realmente bonita de enlazar Oh a ver evaluar páginas y por qué se está haciendo en números de páginas Web es que ahora, si tengo Index, si tengo mi foro, todas ellas se están vinculando hasta ese archivo CSS. Si actualizo el archivo CSS
, actualiza todas esas páginas. ¿ Qué tal la salida de las páginas? Por lo que podría, por todos los medios también incluye el estilo así en el estilo de página. Entonces, si tienes un estilo específico para esta página específica, podrías agregar eso en, igual que si tuvieras estilo para cada elemento individual, podrías agregarlo como atributos también. Y aquí es donde entra en
juego el orden de donde estás representando el contenido que significa porque si queremos una cosa justa en su página Web después de que el estilo haya traído, ponemos este estilo después de que nos vinculemos a la hoja de estilo. Si queremos hacerlo antes de entonces, lo
que normalmente no se hace, entonces lo haríamos antes. Entonces vamos a establecer este CSS y esta es una etiqueta de auto cierre, y estamos especificando todos esos atributos de la misma manera que lo estaban haciendo enlazando. Estamos usando H ref vinculándolo a una hoja de estilo. Hacemos R E l para especificar que este enlace es una hoja de estilo. Eso es lo que estamos esperando. Vuelve a la página, refresca, y nuestro estilo está de vuelta. Y ahora, cada vez que abrí esto, puedo actualizar el estilo. Puedo actualizar los colores y podemos ver que cuando actualice la página, realidad
está actualizada y se refleja en todas las páginas que enlazan a ella. Entonces la siguiente lección que les vamos a mostrar y vamos a hablar brevemente de qué
es JavaScript y cómo podría agregarse a su página HTML que viene en la siguiente lección.
18. 22 Qué es JavaScript: tanto como podríamos traer contenido CSS externo a nuestras páginas Web puede traer
JavaScript y de la misma manera que lo hicimos. JavaScript debilita hacer CSS. Abramos a nuestro editor y déjame mostrarte. Entonces básicamente, con CSS, nos vinculamos a una hoja de estilo Bien dicho Opción para usar nuestra corriente. Nuestro estilo actual en la página es lo mismo con JavaScript. Entonces si quiero enlazar a un archivo JavaScript, podría hacer script y solo podría aguantarme el dolor. El origen del guión. Por lo que este, curiosamente, funciona como imágenes estaban especificando fuente, a diferencia del estilo que funciona como los hipervínculos. Eso especifica el archivo fuente y vamos a crear un archivo fuente así que sólo lo llamaremos script. Por lo que los archivos JavaScript son archivos Js, y lo que JavaScript hace es que te da la capacidad de crear interacción dinámica dentro tu contenido Web. Entonces cuando miras tu página Web, tienes tres lenguajes fundamentales fundadores básicos que conforman cada página Web y que los navegadores renderizan ese contenido de Así que tienes tu HTML, que es tu estructura general y su contenido de la página Web. Entonces todo lo que es visual y todo, todo lo que el usuario es capaz de consumir dentro de la página Web. Entonces tenemos estilo, lo que nos permite personalizar el aspecto y la sensación de nuestra página Web. Y luego tenemos JavaScript, que nos permite crear contenido interactivo dinámico, interactuar con sus elementos HTML y mucho más para que podamos traer ah, archivo de
script y lo verás también en línea. Hay una serie de bibliotecas, y esto te da la capacidad de llevar estas bibliotecas a tus proyectos y usar JavaScript. Ahora bien, si quieres usar JavaScript dentro de tu página, no siempre tienes que enlazar al archivo de script muy parecido a lo que hicimos con CSS Weeks y crear el script de etiquetas y luego dentro de aquí lo podemos hacer. Esto es solo una simple alerta dentro del script de Java que hace esa pequeña cosa pop up. No voy a meterme demasiado en JavaScript. Solo quiero mostrarte que como llevar javascript a tus páginas. Y a medida que te pones cómodo con HTML, entonces pasas a CSS como te sientes cómodo, CSS y HTML luego pasas a JavaScript, así que está abierto nuestra página web y te mostraré cómo tenemos JavaScript disparando. Y también puedo crear un nuevo archivo javascript. Por lo que yendo a aquí, puedo copiar ese contenido de guión a esa página. Y de nuevo, recuerda, no
estoy especificando abrir esas etiquetas HTML porque esto en sí va a ser un archivo
JavaScript. Entonces vamos a darle una extensión JavaScript Js. Y ahora que nos hemos vinculado como lo hicimos con la hoja de estilo, vamos a refrescarlo. Y vemos que nuestro JavaScript todavía se dispara como si estuviera en la página. Funciona de la misma manera, al
igual que el CSS. Entonces, ¿qué? Puedes ejecutarlo y tenerlo funcionando como si estuviera en la página. Y de nuevo, el beneficio de enlazar a este archivo externo es que realmente puedes traer esta
funcionalidad fácilmente a través de tu sitio web de llantas. Eso no importa cuántas páginas tengas. Si enlaza a la sensación de script de trabajo al CSS, puede utilizarlo dentro de su página web. Ahora, por
supuesto, con HTML con javascript con CSS, se necesita práctica. Por lo que sí los animo a echar un vistazo a través del código fuente. Echa un vistazo a las diferentes clases y abre ya sea abre. Consigue tu propio editor. Pruébalo en tu computadora. Prueba esos archivos HTML dentro de tu navegador, o podrías ir a recursos como Code Pen y probar diferentes CSS HTML y JavaScript y ver qué puedes hacer que suceda con estos con estos lenguajes y siempre un gran lugar para empezar es para desarrollar tu primera plantilla HTML. Empieza de nuevo con sólo esa estructura básica. Tienes tu HTML abriendo y cerrando. Impuesto tu cabeza apertura, cierre cuerpo y apertura y cierre, luego tratar de agregar en contenido y agregar más y más estructuración hasta desarrollar tu sitio web como estás esperando que se vea y luego agregar en ese estilo para realmente conseguir eso y sentir y esa visualización personalizada, personalizada fuera del contenido de tu sitio web y luego, después de que te sientes cómodo con HTML y CSS, entonces podrías mirar JavaScript y JavaScript es excelente manera de proporcionar adicional funcionalidad para usuarios Web
19. 23 introducción de cursos HTML: bienvenidos a nuestro curso introductorio sobre HTML. Mi nombre es Lawrence, y voy a ser instructor para este curso. Vengo a ustedes con más de 18 años de experiencia en desarrollo web, y me emociona tener la oportunidad de compartir mis conocimientos con ustedes. Dentro de este curso, voy a estar caminando a través de los conceptos fundamentales del desarrollo de un sitio web. Y eso es HTML. Te estaba mostrando cómo puedes crear páginas Web HTML realmente fácil y rápidamente. Vamos a empezar por presentarte los conceptos básicos del HTML. Y te voy a mostrar cómo puedes construir tu propia plantilla HTML con el fin de estructurar tu cada uno a Mel Cord. Y vamos a ir también a construir tu propia plantilla de cinco HTML, discutiendo a Maura sobre HTML cinco. De qué se trata, cómo se utiliza y cómo desarrollar contenido de manera más inteligente. También mirando la estructuración básica de tu contenido para que no solo tengas un gran blob de contenido. Se puede romper con encabezamientos con párrafos con saltos de línea y así sucesivamente. También vamos a estar viendo cómo podemos usar listas en orden para enumerar contenido, lo que es más consumible por los usuarios de la Web. También los fundamentos básicos de los sitios web y cómo podemos utilizar hipervínculos que enlazan a páginas
externas las páginas dentro de mi sitio web y también para marcar piezas de contenido o secciones de mis proyectos Web actuales. También mirando las imágenes, las imágenes son fundamentales para cualquier sitio web. A los usuarios les encanta las imágenes. Te voy a mostrar cómo llevar esas imágenes a tus páginas Web. También mirando dibs y spans cómo podemos estructurar mejor el contenido, cómo podría traer en estilo CSS a nuestros proyectos web para obtener una mejor apariencia y sentir también cómo html cinco elementos semánticos más y html cinco como encabezados, pies de página y así sucesivamente. También, HTML forma todos los diferentes tipos fundamentales off. HTML forma cómo podemos aplicar atributos para obtener incluso el poder mawr fuera del alcance a los elementos masculinos y luego también cómo podemos construir toda nuestra página Web y cómo construimos Chur nuestra
página web y nuestro contenido de sitio web. Por lo que todo esto y mucho más está incluido en este curso. Además, el código fuente y los recursos han estado usando dentro de este curso también se van a incluir para que tengas todo lo necesario para poder empezar a crear
código HTML . Entonces, cuando estés listo, empecemos a crear algún código HTML y trabajemos a través de las lecciones. Además, pruébalo por ti mismo y ve qué puedes hacer que suceda con HTML.
Laurence Svekis, Best Selling Course Instructor
