Construye tu primer sitio web (y Thwack Zombies con HTML y CSS)

1. Introducción: qué construiremos: Hola. Mi nombre es John Ray. Te voy a ayudar a construir tu primer sitio web y Lino ombies con HTML y CSS En este curso, vamos a estar construyendo un sencillo sitio web de dos páginas basado en un ensayo que escribió el doctor Alexander Boople Construiremos aquí esta página de Shamel de estudio índice, que tiene el ensayo completo Y luego también construiremos una página de biografía, que incluye algunas de sus cosas favoritas por alguna razón y una foto del doctor estima Boople. Todo bien. Vamos a meternos en ello. 2. Manipulación de archivos de muertos vivientes: Antes hablamos de cómo construir un sitio web, cuando necesitas empezar a hablar de archivos. Saluda a Zombie Bob. Ahora, Bob como zombi, sabe algunas cosas. Sabe que los cerebros son buenos. Sabe que pasa que tiene todas sus extremidades. Sabe que es una pieza individual del apocalipsis. Sabe en qué nido de zombis se encuentra, y otros zombis en su nido como Sally, Jamal y Carlos. Aquí hay un archivo. Ahora un archivo tiene conocimientos similares. File Bob pasa a saber que tiene todos sus datos. Sucede que sabe que es un dato o información individual y autónomo. Sabe en qué carpeta está. Conoce otros archivos en esta carpeta como Sally punto MP tres, Jamal punto CSS, y Carlos punto JS Ahora, Bob está en su nido y conoce a todos los zombis que hay en él. De igual manera, File Bob puede ver todos los diferentes archivos que están en la misma carpeta que él. Un archivo es una unidad de datos y una computadora designada por un nombre de archivo y extensión de archivo. Las carpetas son como un cubo en el que puedes poner archivos y otras carpetas, y los sitios web suelen estar compuestos por múltiples archivos y carpetas. archivo HML típico podría tener muchos archivos asociados con él, incluidos CSS, JavaScript, imágenes, video, audio y más Es posible que estos archivos no estén en la misma carpeta que el archivo HTML. A veces los nidos tienen subnidos y a veces las carpetas tienen subcarpetas Sin embargo, cuando tienes una subcarpeta o un sub nido, Zombie Bob ni File Bob pueden ver realmente lo que hay en esas subporciones Sólo pueden saber lo que hay ahí dentro si se les dice. Y podemos decirles lo que hay ahí dentro a través de un camino. El camino es básicamente cómo llegar de un archivo a otro o de un zombi a otro en diferentes carpetas. Los caminos pueden ir a una subcarpeta, a una carpeta parental o ancestral, o a ambas Hay algunos personajes diferentes que usamos en los caminos. Primero está el periodo, lo que significa el directorio actual. Dondequiera que sea el archivo del que vamos, dos puntos significan el directorio padre, es decir, estamos subiendo un nivel. Y Slash separa carpetas o dice buscar en la siguiente carpeta Una vez que le decimos a Zombie Bob dónde está evitar y el sub neest, entonces él podrá verla. Con File Bob, una vez que le damos una ruta aquí, period slash sub folder, slash et gif, entonces puede encontrar Event gif y usarlo en su Slash es la carpeta en su conjunto. En Slash, tenemos una serie de archivos. Dentro de Slash, todavía tenemos a Zombie, que es otra carpeta que tiene archivos en ella. Tenemos apocalipsis, que es otra carpeta que tiene algunos archivos en ella. Resistencia, que es una subcarpeta del apocalipsis, que es una subcarpeta de la raíz Y tenemos a LeRoy, que es una subcarpeta de resistencia, que es una subcarpeta de apocalipsis ¿Cómo obtenemos de slash? Vamos a estar en este directorio para, en este caso, sobre el punto HTM. Debido a que estamos en la misma carpeta de barra diagonal, solo puedes escribir sobre HTML de punto No necesita indagar en nada. También podrías escribir dot slash A dot HTML. Lo que solo aseguraría que estamos en el directorio actual y luego sobre ese HTML, pero se asume la barra diagonal de puntos, por lo que no se requiere Juegos HTML. Juegos HTML está justo aquí. El mismo tipo de cosas. Juegos HTML o hacer Juegos HTML. Ahora, Bob dot HTML. Bob dot HTML está en realidad en la carpeta Zombie. Podemos hacer Zombie Bob dot HTML. O también podríamos hacer dot slash Zombie slash Bob dot HTML. Ahora, a partir de ahora, no voy a incluir el punto-slash, eso solo se supone. Todo bien. Fred punto HTML. Fred dot HTML está justo aquí. Entonces vamos a ir apocalipsis. Slash HT M. A continuación vamos a Juan, que está en resistencia Entonces vamos a ir apocalipsis. Resistencia a la barra. Slash an.tm. Para el número seis, vamos a hacer Index DHTL en la barra Leroy Entonces eso va a ser apocalipsis. Resistencia a la barra. Slash Leroy. Y slash. Ahora, Index dot HTML es el archivo predeterminado. Si una página web solo está buscando algo Índice DIH se suele dar Sin embargo, también es bueno incluir el nombre del archivo. Así que solo podrías ir apocalipsis slash resistance slash Leroy, pero también podrías hacer slash Index dot HTML para asegurarte de que llegue al lugar correcto. Todo bien. Por último, vamos a pasar de un punto HTML, que está aquí mismo a zombie dot HTML, que está justo aquí. Haz esto, tenemos que subir carpeta, así que iremos punto.en una barra Entonces, si estamos en uno, subimos un nivel, ahora estamos en apocalipsis Tenemos que subir un nivel más. Corte de punto y punto. Esto es decir subir un nivel, luego subir otro nivel, y luego necesitamos zombie dot HTML, y ese es el camino. 3. Usar editores de código para detener el Apocalipsis: Lo importante a discutir son los editores de código. En este curso, estaré usando el código VS, y eres bienvenido a usarlo, pero es posible que quieras usar otra cosa. Editores de texto sin formato. En windows, tienes bloc de notas, que es un curso de trabajo estándar, definitivamente puedes crear HTML y CSS en el bloc de notas. Eso no es un problema. En MAC, hay edición de texto, debes asegurarte de que esté en modo texto sin formato. Si es modo enriquecer texto, no guardará el archivo correctamente y no funcionará de la misma manera porque guardará un montón de otra información involucrada. Así que asegúrate de que sea el modo de texto sin formato. Ahora, ambos editores funcionarán bien, pero no se recomiendan. El motivo es porque hay algunas mejores opciones. Una cosa que hacen muchas de estas opciones por las que voy a pasar es que el código de color, el código. Y esto significa que cosas de ciertos tipos, tus elementos HTML, tus selectores CSS van a tener diferentes colores El beneficio de eso es que si se supone que algo es un selector, pero es el color incorrecto, puedes darte cuenta de que eso es un error, y que has escrito mal algo o algo no va del todo bien, así que realmente te puede ayudar a detectar Un par de opciones que son gratuitas o NoPed plus plus. Esto es solo ventanas, pero funciona bien. Hay corchetes, que deberían funcionar para cualquier plataforma. Código VS, otra vez, ese es el que estoy usando dentro de este curso, pero no es obligatorio para que lo uses. Cualquiera de estos va a funcionar bien. Pero los tres son gratuitos. También hay suministros y textos que a mucha gente le gusta mucho, aunque hay un costo por ese. Realmente, cualquier otra herramienta de codificación que admita HML y CSS estaría bien Cualquiera de esos funcionará a medida que lo programes en casa. 4. Conceptos básicos de HTML: Se va a hablar de qué es HTML y cómo funciona. ¿Qué es HTML? Es sinónimo de lenguaje de marcado de hipertexto. Es la estructura o esqueleto de una página web. Es una forma de marcar el contenido de una página web. Hay cuatro partes en un elemento HTML. Primero, tenemos la etiqueta de apertura, luego los atributos, el contenido y la etiqueta de cierre. Abriendo etiquetas, comience con un letrero de menos de o un corchete en ángulo izquierdo. Después les sigue el nombre de la etiqueta, P para párrafo, por ejemplo. Hay muchas etiquetas diferentes, y luego cerraré con un signo mayor que o un corchete en ángulo recto. Por ejemplo, tenemos una etiqueta P de apertura. Tenemos una etiqueta B de apertura para negrita, que hablaremos un poco más adelante, y una etiqueta DIV de apertura, de la que también hablaremos un poco más adelante. Pero esos son algunos ejemplos de etiquetas de apertura. A continuación, tenemos algunos atributos. Un atributo es uno o más pares de nombre y valor aplicados a un elemento HTML. Y los atributos suelen hacer una de tres cosas. Van a identificar un elemento. Usaremos esto mucho con CSS, donde estamos sacando algo de la página, y luego lo modificaremos. Los atributos modificarán el comportamiento de un elemento, como cambiar el color, cambiar la fuente, un montón de cosas diferentes, o establecerán contenido externo. Esto sucede con imágenes, enlaces a un archivo diferente o a una página diferente, y los Atributos van a aparecer entre la etiqueta de apertura y el signo mayor que o el corchete en ángulo recto. Y algunos ejemplos serían establecer una clase, que es un atributo identificativo de date ars en la P o una ID de advertencia zombie, otro atributo de identificación en el elemento dI o di tag. A continuación, tenemos contenido, normalmente es texto u otros elementos HML Va a aparecer entre las etiquetas de apertura y cierre o dentro del elemento. Algunos elementos tienen límites en los tipos de elementos que pueden contener, y algunos elementos sólo pueden aparecer dentro de ciertos otros elementos. Algunos ejemplos pueden ser que este párrafo sabe a cerebro, o parece que aparece un zombi arrastrándose Tenemos la etiqueta de cierre, que va a reflejar la etiqueta de apertura excepto que va a incluir una raya después de la señal les an Para reflejar nuestras etiquetas de apertura desde antes, tenemos un slash P, slash B o slash No todos los elementos HML requieren una etiqueta de cierre. Estos se denominan etiquetas nulas o de cierre automático. Normalmente, si un atributo contiene el contenido como con elementos de imagen o el elemento no tiene contenido como saltos de línea, no tienen una etiqueta de cierre. Tenemos aquí una etiqueta P de apertura con zombis tienen, y luego tenemos una etiqueta de ojo de apertura, no, etiqueta ojo de cierre, familia, etiqueta P de cierre, y luego tenemos en segundo lugar otra apertura de zombis P. Entonces tenemos una etiqueta de apertura en el ojo, sí tenemos un acaparamiento B de apertura, cierre B, cierre e, cierre P. Esto es lo que llamamos anidación Si abres un elemento en HTML, necesitas cerrarlo antes cerrar su elemento padre o el elemento encima de él. Nos fijamos en esto en color. Tenemos, por ejemplo, aquí, tenemos este está totalmente encapsulado dentro de la P, se dice que es hijo del elemento P. Entonces tenemos aquí la B está completamente encerrada por la i, y la I está completamente encerrada por la P. B se dice que es hijo de I, se dice que soy hijo de P, y B se dice que es nieto de P. También puedes hacerlo de otra manera y decir que P es padre de I, I es padre de B, y P es abuelo de B. Ahora bien, esta es una página HTML estándar La menor cantidad de código que puedas tener comienza con un tipo doc, que técnicamente no es HTML, pero está ahí para decirle al navegador qué es este documento. Entonces tenemos nuestro elemento HTML de apertura. Esto solo define dónde está el HTML. El jefe va a ser información sobre la página, y luego el cuerpo es todo lo que va a mostrar en la página. De hecho, echemos un vistazo a eso y hagamos algo de codificación en vivo. 5. Codificación HTML en vivo: página de inicio: Tenemos solo las etiquetas que viste antes, los elementos. Tenemos nuestro tipo de doc de apertura, que le está diciendo al navegador que esta es una página HTML. Tenemos un elemento HTML. He agregado un atributo ang aquí para demostrar que está en inglés. Esto puede ser útil para muchas cosas, pero los navegadores, lectores de pantalla, motores de búsqueda les ayudan a saber en qué idioma se encuentra para que puedan preparar más fácilmente traducciones y cosas así o saber de qué traducir. También tenemos un elemento head, que va a ser información sobre la página. no tenemos nada de eso, pero lo estaremos editando más tarde. Tenemos un elemento corporal. Que va a mostrar todo en la página. Ahora, tengo esto configurado para que cuando guarde algo aquí, luego aparezca aquí. Si yo, por ejemplo, agrego Just a hello world. Ayuda si lo deletreas bien. Hola mundo, y lo guardo. Entonces aparece por aquí. El elemento P aparece por aquí. Lo siguiente que vamos a hacer es agregar lo que se llama un H uno o un encabezado nivel uno. Este es el encabezado de nivel superior, también tienes H uno, H dos, H tres, h4h5 y H seis, siendo el encabezado el nivel uno el nivel superior, y luego normalmente entonces romperías tu contenido con subtítulos y cosas con H dos, luego H tres, y así sucesivamente y así sucesivamente Déjeme decir esto y ya veremos cómo se ve. Entonces un encabezado es por defecto mucho más grande que el texto normal, y también en negrita. Así que ayuda a que destaque como encabezamiento. Los encabezados son en realidad elementos a nivel de bloque, donde crean espacio por encima y por debajo de ellos mismos Lo siguiente que vamos a ver es en realidad un elemento span, que técnicamente es un elemento inline. Voy a usarlo para simplemente mostrar el byline para nuestro doctor Buble, quien escribió el ensayo en el que estamos trabajando O la página esa en la que estamos trabajando. Técnicamente es un elemento inline lo que significa que no crearía espacio por encima y por debajo de sí mismo, sino porque este H uno está por encima de él, el H va a crear espacio, y luego lo siguiente que vamos a usar también va a ser un elemento a nivel de bloque. Pero si le pego a guardar, va a mostrar ahí hay doctor nombre Poples Lo siguiente que vamos a agregar es algún texto. En realidad tienen eso aquí en el texto de contenido. Cierra ese cajón, y aquí tenemos un montón de textos que podemos usar. Voy a copiar este texto aquí. Esto son todos los párrafos. Esto es para la página de índice. Parte de esto se utilizará para la página acerca o biografía. Voy a pegar ese contenido indirectamente. Si le pego a guardar, se puede ver que todo parece que es un párrafo gigante. Aquí no hay continuidad de párrafos. No necesariamente respeta el espaciado de nuestros párrafos. Para ello, necesitamos agregar p elementos alrededor de nuestros párrafos. Si le pego a guardar en eso, se puede ver que nuestro primer párrafo toma forma. No te preocupes por este espaciado aquí. Es sólo por el editor. A continuación, voy a añadir algunos párrafos más. Como puede ver, que vamos a seguir añadiendo párrafos. Nuevamente, no te preocupes por este espaciado. Es raro, y como pueden ver, no aparece aquí. Y ahora voy a hacer zoom añadiendo el resto de los párrafos. Sí. Bien, y estamos de vuelta. Bien. Lo siguiente que vamos a hacer es que vamos a pasar y encontrar dónde he etiquetado algunas cosas que deberían estar en negrita Cualquier cosa que tenga estos asteriscos por ella, voy a reemplazar con una etiqueta en negrita En realidad, hay dos etiquetas en negrita o dos etiquetas que crearán negrita. Una es la etiqueta B, que hemos visto un poco al va a agregar aquí alrededor del. Si digo eso, se puede ver que esto ahora está en negrita. La otra etiqueta es la etiqueta fuerte, y eso significa fuerte énfasis. La razón por la que hay dos es porque inicialmente, en realidad es fuerte y no cuerda. Déjame arreglarlo ahí. Inicialmente, cuando se creó el lenguaje, la etiqueta Bol B era todo lo que teníamos. Y hubo cierta preocupación de que eso no estuviera dando suficiente información sobre el contenido. No estaba siendo lo suficientemente semántico. Y así agregaron la etiqueta Strom para que eso fuera un poco más específico y un poco más para hacerlo un poco más semántico Sin embargo, Strom tiene muchas más letras para escribir, por lo que los desarrolladores realmente no terminaron usando stro con más frecuencia. Y así la etiqueta de Bol vivió. Ahora con HMO five, ambos son aceptables, así que puedes usar el que quieras Ahora vamos a mirar los elementos I y M, donde he hecho estos guiones bajos, vamos a agregar cursiva, yo para cursiva Al igual que el negrita, hay dos elementos para cursiva. Una es, que aquí simplemente se ve así, que ya vimos un poco antes. Si digo eso, se puede ver que luego se pone cursiva. De manera similar a audaz y fuerte, B y Strong, querían que el elemento fuera más semántico, o querían una versión más semántica del elemento, y así agregaron el EM para énfasis Pero nuevamente, cualquiera de los dos es aceptable, usa el que más te tenga más sentido Si vuelvo a decir eso aquí, esto también está en cursiva Todo bien. Ahora que tenemos nuestro contenido en nuestra página, agreguemos algo de navegación. Justo debajo de la etiqueta corporal aquí, justo debajo de la etiqueta corporal de apertura, voy a agregar Y así este es el inicio de la misma. Tenemos un elemento A, que originalmente significa ancla, pero es nuestra etiqueta de enlace. Lo que sea a lo que nos vincule va a estar en este atributo ARF. Y entonces el texto del enlace va a ser este texto aquí. Así que voy a simplemente vincularlo a Index DHTO, que es este mismo archivo Voy a golpear guardar, y luego se puede ver que hay un enlace aquí. Si le hice clic, simplemente abrirá el mismo índice HTL No necesitamos preocuparnos por eso ahora mismo. Pero vamos a terminar teniendo dos páginas en este sitio. Entonces voy a agregar un enlace a eso ahora mismo, aunque aún no hayamos creado esa página, va a ser doctor Gopals bio bio punto HTML Y luego me voy a bio. Guarde eso. Ahora tenemos dos elementos allá arriba, dos elementos A allá arriba. Normalmente, la navegación se pone en una lista desordenada porque son elementos relacionados, así que esa es más la forma semántica de asociarlos Y también vamos a usar una etiqueta estructural llamada NAV para la navegación. Entonces voy a agregar NAV aquí primero. Que es un elemento estructural. Así que en realidad no vamos a hacer ningún cambio. Entonces, si lo guardo, no va a hacer ningún cambio en el front end ahora mismo, pero lo vamos a usar mucho más tarde para CSS y también asegurándonos que haya una estructura adecuada dentro de la página. Ahora voy a agregar esa lista desordenada. Entonces una lista desordenada comienza con UL. Y entonces cada elemento va a tener un elemento LI para elemento de lista. Y luego vamos a cerrar la UL. Una vez lo guardo. Entonces puedes ver que ahora está en una lista desordenada o lista con viñetas. Vamos a jugar con esto un poco más tarde cuando lleguemos a CSS, pero ahora está correctamente estructurado. Ahora, con aquí, tenemos nuestra estructura NAB aquí, pero hay más estructura en una página que esa Existen varios elementos estructurales diferentes. Por ejemplo, tenemos encabezado, que puede dar la vuelta al encabezado. Ahora, permítanme recalcar también que la cabecera y los encabezamientos son muy diferentes Entonces un encabezado aquí es para mostrar la parte superior de la página, mientras que head es información sobre la página. Los encabezados también son contenidos que se mostrarán en la página, por lo que va en el encabezado A continuación, tenemos principal, que es el contenido principal de la página, que en este caso es el ensayo del doctor Buble Voy a cerrar la principal aquí abajo. También voy a agregar un elemento de pie de página con algún contenido en él. Pega eso por aquí. Entonces tenemos un foo. Tenemos un RRHH. HR significa regla horizontal. Es una etiqueta de vacío, por lo que no necesita una etiqueta de cierre. Simplemente va a trazar una línea a través de la página. Entonces tenemos un elemento p aquí, etiqueta P con alguna información. Y luego cerrando P, cerrando pie de página. Voy a guardar eso para que podamos verlo en acción aquí, y aquí tenemos todo nuestro contenido. Aquí notarás que esto ha dejado caer el espacio. Esto menos de lo que está en rojo. Eso es porque mientras el navegador lo está averiguando, no se da cuenta del todo que no es código Todavía no está seguro de qué se trata. Ser menor que el pecado normalmente se iniciará el código. Será algo que no debe mostrarse en el front end. El navegador lo descifra, entiende lo que queremos aquí, pero realmente lo mejor que puede hacer va a ser configurarlo en ampersand LT punto y coma, y eso significa LT es menor Ampersand LT. Cticon nos va a mostrar el mismo corchete en ángulo izquierdo. Si le pego guardar. Observe que ahí no hubo ningún cambio, y eso es porque es el mismo símbolo. También podemos Ups. Establezca el símbolo mayor que. Aquí, voy a agregar un espacio, que será el signo mayor de San que. Y porque Ampersand ahora designa un carácter especial o designa que vamos a estar mostrando un carácter especial de ensamble Ampersand que queremos mostrar ahora debería establecerse en ampersand AMP Ninguno de esos debería cambiar. No honra el espacio ahí. Pero podemos hacer algo más que estos símbolos. También podemos hacer el símbolo de copyright. Y el símbolo de copyright es Ampersand Copy. ALS, y se puede ver que ahora es el símbolo de copyright. Estas son lo que se llama entidades HTML, y nos permiten escribir página caracteres que no están en nuestros teclados Ahora que tenemos nuestro contenido y nuestra estructura principal en su lugar para nuestro índice HTML punto, ahora vamos a guardarlo y crear nuestra segunda página, nuestra bio HTL 6. Codificación en vivo de HTML: página de biografía: La forma más fácil de crear bio Dot HTL es en lugar de comenzar desde cero. Podemos tomar Index dot HTL y guardarlo como Bio Dot HTML para que podamos tener una ventaja con una estructura y ese tipo de cosas Voy a ir a Archivo Guardar como, y cambiarlo a bio DH TML Yo ahorro. Ahora tenemos Biodi TML, pero te darás cuenta que también aquí abajo tenemos índice de punto HTML Estos son ahora dos ejemplares el uno del otro. También voy a abrir el texto de punto de contenido, así que todavía tenemos acceso a eso también. Todo bien. Ahora bien, bio, sabemos con certeza que este contenido no es correcto. Entonces, sigamos adelante y eliminemos este contenido aquí. Si lo guardamos ahora, no se va a actualizar aquí, pero eso es porque todavía estamos viendo el índice en HTL por aquí Debería poder hacer click en la biografía, y aquí estamos con el bio dot HTML. Voy a agarrar el contenido de H one y colocarlo aquí. A continuación, voy a voy a presionar guardar y podemos ver que ese es el correcto o ese es el contenido, y ahora podemos decir más fácilmente una parte dos páginas. Ahora voy a tomar el contenido de aquí. Voy a copiarlo. No índice bio. Voy a pegarlo. De nuevo, vamos a tener algo de trabajo cortado para nosotros. Voy a empezar a agregar etiquetas P. Ahora tenemos varios rubros diferentes aquí. Voy a agregar H dos etiquetas a sus cosas favoritas, y voy a agregar un span alrededor de esta pequeña nota aquí para que podamos darle estilo por separado. Ahora voy a poner una UL o lista desordenada sus cosas favoritas LI LI alrededor de cada artículo. Y cerrar la UL. Este dos va a ser un H dos. Ahora estos van a ser una lista ordenada. Una lista ordenada es solo una OL versus una UL. Voy a agregar LI, usar el mismo elemento LI alrededor tuvimos un cierre, y ahora está todo ahí. Déjame golpear guardar y veremos el nuevo contenido aquí arriba. Tenemos nuestro párrafo. una H dos, tenemos nuestro lapso. Tenemos una lista desordenada. Tenemos otro H dos, tenemos nuestra lista ordenada, y luego, por supuesto, tenemos el pie de página y RRHH, etcétera Ahora, como habrás notado, como estaba trabajando, también hay algunos lugares para agregar cursiva y negrita. Pasemos y hagamos eso ahora. Todo bien. Hemos hecho nuestros cambios en nuestras cursivas y nuestras audaces Ahora vamos a agregar un signo de marca después de esto porque el doctor Bob optó por marcarlo. Y ese es el comercio de Ampersand, y ahí aparece ahí mismo. Lo último que vamos a hacer con HTML es que vamos a añadir una imagen. Así que voy a volver aquí arriba y justo dentro de este elemento P. Voy a agregar elementos de imagen. Ahora una imagen es en realidad una etiqueta de cierre automático o nula. Así que ve imagen, y luego usa lo que se llama un SRC para que la fuente encuentre la imagen Y ese es el PNG. Voy a golpear guardar, y se puede ver ahí está él en todo su esplendor. Otra cosa que queremos agregar a las imágenes es lo que se llama texto alternativo. Y esa es una forma para que los buscadores y lectores de pantalla puedan acceder al contenido de la imagen. Voy a agarrar eso desde aquí. Utilice un atributo. Utiliza un atributo l. Yo tengo ese contenido. Jura, déjame agarrarlo. Todo bien. Y ahí aparece. Golpea guardar. Observe que no hay ningún cambio en la imagen porque el atributo no lo hace así que solo mostraré dos lectores de pantalla y motores que estén leyendo el código o cualquier otro programa que esté leyendo el código. Ahora tenemos nuestro HTL en su lugar. Echemos un vistazo a CSS. 7. Conceptos básicos de CSS: CSS significa hojas de estilo en cascada. Si HTML es el esqueleto, entonces CSS es la carne y la ropa. Te permite establecer colores, fuentes y todo tipo de cosas diferentes. La cascada de CSS. Los estilos no afectan a un solo elemento. Pasan en cascada por el documento de padre a hijo. Por ejemplo, si establece un color de texto en el elemento body, caerá en cascada a través de todos los elementos hijos. Hay tres partes de una regla CSS. Primero está el selector, el siguiente es la propiedad, y luego el valor. La parte entre corchetes se llama típicamente el bloque de declaración, y todo en su conjunto se llama la regla. El selector va a seleccionar a qué elementos aplicar las propiedades. Puede ser un elemento, como P, di, o main son todos los elementos que acabamos de ver, y puedes seleccionar todos esos elementos dentro de una página usando el selector de elementos. Pueden ser una clase, que usa el atributo de clase HTML, nómbralo como quieras, así que la clase equivale a zombis, muertos vivientes, políticos, etcétera. También tienes un ID, que es un valor del atributo ID de HTML, y para eso, vas a usar un hashtag. Para las clases, vas a usar un periodo para designar que es una clase. Para los ID, vas a usar una etiqueta hash para designar que es un ID, y también puedes usar una combinación. Por ejemplo, esto selecciona cualquier elemento P que esté dentro de otro elemento con una identificación de apocalipsis, no tiene que ser un hijo directo, podría ser un nieto, mucho más descendiente, etcétera Esto seleccionará cualquier div que sea un elemento con una clase de zombie, y esto seleccionará cualquier elemento con una clase de político que esté dentro de un div. Propiedad. Este es el aspecto que quieres cambiar. Y hay muchos ejemplos, pero cosas como color, color de fondo, estilo de fuente, familia de fuentes, muchos, muchos, muchos más. Y luego el valor. Los valores son a lo que estás cambiando la propiedad desde su valor predeterminado u otro valor que dijiste anteriormente. El tipo de datos permitidos depende de la propiedad. Algunas propiedades solo toman palabras clave específicas, y algunas propiedades solo toman números o números con unidades específicas. Algunos toman ambos. Ahora veamos algunos CSS. 8. Codificación en vivo con CSS: adición de estilo: Así que vamos a tomar nuestras páginas HTML aquí, y voy a volver a nuestro índice para que podamos verlo funcionando desde aquí. Y necesito agregar un elemento de estilo a nuestros loops. Todavía estoy en la biografía ahí. Déjame volver aquí. Índice. Voy a añadir un elemento de estilo. Y en este elemento de estilo, puedo poner nuestro CSS. Lo primero que voy a hacer es que voy a seleccionar todas las etiquetas H una, y voy a cambiar su color a un rojo anaranjado. Rojo anaranjado. Hay muchas formas diferentes de configurar el color. El rojo anaranjado es una palabra clave que pasa a trabajar para el color. Voy a guardar eso, y ahora nuestro H one es rojo anaranjado. También queremos hacer nuestro H uno un poco más grande en tamaño. Voy a establecer el tamaño de fuente tamaño de fuente. Entonces, ¿qué tan grande es hasta 50 píxeles? El valor predeterminado es 16, por lo que establecer un tamaño de fuente de 50 píxeles lo va a hacer mucho más grande. Como puedes ver ahí. Lo siguiente que quiero hacer es modificar este byline Voy a ponerle un lapso. Voy a establecer un estilo de fuente, que cambia cursiva a cursiva y darle un color gris Si digo eso, se puede ver que la desenfatiza un poco y la cursiva Entonces quiero deshacerme de estas balas allá arriba. La forma de hacerlo es fleccionar el UL y establecer el estilo o el tipo de estilo de lista en ninguno Guardar. Ahora se han ido. El único problema es que tenemos una UL en nuestra biografía que también va a eliminar eso. La manera de sortear eso, la forma de solo cambiarlo en este UL y no en otros ULs es localizarlo o establecer un selector descendiente Así NAV UL. Cualquier UL dentro de un NAV son los únicos que van a verse afectados. Lo siguiente que queremos hacer es en lugar de tener estos así, queremos mostrarlos queremos mostrarlos en línea para que sean uno tras otro. Entonces voy a cambiar en este caso, nuevo, no quiero afectar a todas las LIs. Solo quiero afectar a los LIs dentro de un NAF, y voy a configurar display inline Y luego quiero agregar un poco de relleno para que tengan un poco de espacio entre ellos. Se va a añadir diez píxeles de relleno. Esto solo agrega espaciado alrededor de ellos. Ahora, se puede ver que aquí hay una gran brecha, que no es del todo va a ser una. Todos los elementos tienen algún relleno y margen predeterminados. Entonces esta UL por defecto tiene un montón de relleno y margen porque tiene esas viñetas. Entonces voy a poner su relleno a cero, y es margen a cero. Ahorra, y ahora está todo el camino por allá. Todavía es un poco de formas, y eso es por su relleno de diez píxeles a su alrededor. Diez píxeles por todas partes. Ahora, otra cosa que me gustaría hacer es que en vez de tener la navegación aquí, quiero volarla por aquí. Así que puedes hacerlo fácilmente con la configuración de texto alinear a la derecha, alineará a la derecha el texto. Si guardo, vuela por aquí porque ahora está alineado a la derecha en lugar de alineado a la izquierda como es por defecto. Ahora bien, esto está un poco demasiado cerca de la parte superior, así que quiero agregar algo de espaciado arriba aquí. También quiero agregar algo de espaciado entre estos dos. Voy a tomar solo la Nave no voy a cambiar los elementos dentro de ella. Voy a decir margen superior 100 píxeles. Yo ahorro. Ahí vamos, y luego el margen inferior. 50 pixeles, y presioné guardar, y ahora hay algo más de espacio entre esos dos. Ahora, me gusta este rojo anaranjado, así que quiero ampliar su uso. Voy a hacer estos dos enlaces que anaranjados también. Entonces voy a decir N A solo quiero seleccionar los elementos A. Quiero hacer color naranja rojo, mismo color que antes. Guardar. Ahora son de color rojo anaranjado. Y ahora que son de un color diferente, es mucho más claro que podrían ser un enlace. Entonces voy a quitar ese subrayado decoración de texto. No. Ahorre, y ahora no hay ninguna línea debajo de ahí. Y otra cosa que queremos hacer es marcar en qué página estamos. La forma más fácil de hacerlo es agregar una clase a la página en la que estamos. Actualmente, esta es indexada dH TL, voy a agregar una clase a L aquí Clase es igual a Página actual. Ahora bien, si lo guardo, lo que voy a hacer ahora mismo, nada cambia porque no hemos escrito ningún estilo para editarlo. Pero antes de ir más lejos, y así no me olvido, voy a copiarlo, y voy a pegarlo una y otra vez aquí, pero ponlo en el enlace bio, ya que ese es el enlace que es la página actual aquí. Guarde eso solo para que no lo olvidemos. Todo bien. Ahora, voy a escribir un estilo para eso. Porque es una clase, voy a elegir una página actual. S. Entonces voy a poner el borde inferior, porque sólo quiero que esté en la parte inferior. Entonces voy a poner rojo anaranjado. Entonces las fronteras realmente toman tres valores diferentes. Voy a establecer sólido, y luego el ancho es de dos píxeles. Sólido es el estilo. Puedes tener punto o un montón de otras cosas, pero estoy configurando el color, el estilo y el ancho. Yo ahorro. Ahora destaca en qué página estamos. Todo bien. Bueno, miremos más hacia el pie de página. Este pie de página es agradable. mí me gusta la línea aquí, pero creo que sería más nítida si pudiéramos hacerlo también de ese color, ese color rojo anaranjado, algo de pie de página HR, voy a poner border top esta vez porque eso es lo que maneja el borde para HRs o lo que maneja el color de un HR, voy a ponerle de nuevo dos pixeles, sólido, y el color naranja rojo Como puedes ver, el orden exacto no importa porque está bastante claro cuáles son estas cosas. Voy a golpear guardar, y aquí tenemos un rojo anaranjado. Ahora bien, otra cosa que estaría genial es que no se extienda todo el camino, pero tal vez porcentaje del camino porque si hacemos esto más grande o más pequeño, no necesariamente queremos que sea al 100%. Si lo pongo en un valor específico, podría ser demasiado grande en algunos momentos y demasiado pequeño en otros. Voy a establecer un ancho del 60%. Y lo que esto significa es que va a ser 60% del ancho de su padre. Ahora, hagamos un poco más de trabajo con el pie de página. Quiero hacer texto alinear centro, para que el texto quede centrado. Y luego también quiero agregar algo de espacio aquí para que quede claro dónde comienza y termina. Yo ahorro. Déjame desplazarme un poco hacia abajo. Ahora puedes ver que ahora está centrado, se ve un poco más agradable. Aquí hay algo de espacio para diferenciarlos . Entonces eso es bueno. Otra cosa que sucede es que si vamos hasta el final, simplemente sigue escalando lo más ancho posible, que probablemente no sea lo que queremos. Por lo general, es mucho más difícil leer una línea que recorra toda la página. Entonces vamos a establecer un tamaño x. Entonces voy a configurar Nav. Puedes hacer múltiples cosas, múltiples selectores en una sola declaración si haces una coma entre Aquí estoy configurando todos esos Nav encabezado principal y pie de página. Voy a establecerles un ancho máximo de 1,000 píxeles, y un margen de auto para asegurarme de que esté centrado cuando se guarde. Él salvó. Entonces la abro, y ahora está centrada. Una cosa que perdimos aquí es que cuando puse margin auto en el Nav, se deshizo de ese margen extra que agregamos por encima y por debajo de él. Y también se deshizo de él en los pies de página, y ahora eso está justo cerca de él. Entonces hay una manera fácil de arreglar esto. Lo que voy a hacer es en lugar de ponérselo en cada uno de esos elementos, voy a crear un div, darle una clase de wrapper. Y voy a envolverlo alrededor de todos los elementos. Todo bien. Ahora bien, digamos que no terminó haciendo nada porque aún no he cambiado el CSS. Entonces en vez de esto seleccionando todas esas cosas, ahora voy a seleccionar solo envoltorio. Voy a pegarle a guardar. Ahora, el NAV tiene su margen atrás, el pie de página tiene su margen atrás, y si lo abro, sólo va a 100 píxeles. Si vamos a la biografía, notaremos que ya no tiene ninguna de estas características. Hay una manera sencilla de hacerlo. Puedes hacer clic o copiar todo este estilo. Y luego voy a pegarlo aquí. Voy a golpear guardar, y ahora tenemos ese mismo estilo disponible para nosotros. Aquí tenemos el pie de página, tenemos el título, todas esas cosas. Si vamos demasiado grandes. Oh, si vamos demasiado grandes, no lo detiene. El motivo es porque no agregamos el envoltorio. Así que agreguemos el div envoltorio aquí. Desplázate hasta la parte inferior. Se ahorra. Ahora bien, si vamos demasiado lejos, sigue impidiendo que se vaya demasiado ancho. Ahora estamos de vuelta en su lugar aquí. Bien. Hay un par de cosas más que queremos hacerle a esto. Es decir, esta imagen es bonita. Nos gusta la foto del doctor B, pero simplemente no se siente del todo bien donde está, realmente no fluye texto a su alrededor. Podemos hacer lo que se llama un flotador. Así que haz imagen Y luego voy a flotar. Lo que hace flotante es que saca el elemento del flujo normal y lo envía hacia la derecha, o también puedes enviarlo a la izquierda, y luego permite que el contenido fluya a su alrededor. Entonces voy a golpear y guardar, y ahora se puede ver que el contenido ahora está fluyendo a su alrededor . Eso es mejor. Esta imagen sigue siendo bastante grande. Todavía tenemos cosas bastante cercanas a ella. Lo que voy a hacer es hacer algunos cambios más aquí. Vamos a establecer un margen margen izquierdo izquierdo de cinco píxeles, y un margen inferior. De cinco pixeles también. Guardar. Eso nos ayudó un poco. Ahí tenemos un poco de espacio. Entonces también quiero cambiar su ancho por valor de 300 píxeles, y cambiemos su altura. Yo salvo, eso lo ha reducido un poco. Y eso es porque no mantuvimos la relación de aspecto. Lo forzamos a una plaza cuando no lo es. Entonces déjame simplemente borrar eso, guardo, y ahora automáticamente se ve mucho mejor. La otra cosa que podrías hacer es establecer tu altura en auto, y luego se aseguraría de que cualquier cosa que fijes aquí, definitivamente se quedaría con la relación de aspecto adecuada. 9. Nos vemos después, Zombigator: ¿Por tomar este curso? Si te ha encantado, por favor deja una reseña. Realmente ayuda a correr la voz. Y también puedes consultar mis otros cursos sobre Skillshare Si tienes ganas de más contenido, todavía tengo más en und dot Institute, donde hay libros, juegos, recursos, e incluso algún plan de estudios. Gracias. Que tengas un gran día.