Programa manualmente tu primer sitio web: conceptos básicos de HTML y CSS

1. Introducción a la clase: Oye, me llamo Rich Armstrong de taptaptapkaboom.com. Llevo diseñando y construyendo sitios web desde 2007, y en esta clase, te voy a mostrar cómo descodificar tu primer sitio web desde cero usando HTML y CSS. Para mí, poder escribir mi propio HTML y CSS es más que solo codificar. Es una forma moderna de crearme y expresarme de manera digital. Un sitio web es algo real que cientos de personas visitan y usan e interactúan con, y poder codificarlo todo por ti mismo te da una ventaja increíble. No tienes que confiar en otras personas, plantillas empaquetadas, o intenta en aplicaciones complejas para dar vida a tus ideas. La codificación también es súper divertida y gratificante. Durante la clase, te llevaré paso a paso a través de la creación un sencillo sitio web de una página para tus héroes de dibujos animados o personaje de cine favoritos. Te explico todo de una manera acercable y te dejo fuera las cosas que no necesitas saber. Al final de la clase, habrás hecho tu primer sitio web que podrás compartir con el mundo. Conocerás los conceptos básicos de HTML y CSS. Tus amigos estarán celosos, tu mamá estará súper orgullosa, y tendrás una base sólida para construir encima. Entonces, si eres un novato absoluto o te has metido en algún diseño y desarrollo web antes, ven a tomar esta clase. Todo lo que necesitas es una computadora y una conexión a internet. Nos vemos en el siguiente video. 2. Qué descargar: Para facilitar la codificación, necesitarás descargar e instalar algunas cosas, un editor de código y un navegador de desarrollo, y forma de hacer una copia de seguridad de tu código y publicar un sitio web. El primero que necesitarás es un editor de código. Hacen sugerencias, completan tu código y hacen partes de tu código diferentes colores. Básicamente, te ayudan a codificar más rápido y con menos errores. Hay toneladas de editores de código para elegir. En esta clase, estaré usando Sublime Text. Se puede utilizar de forma gratuita y una licencia comercial solo cuesta $80. Otro editor de código impresionante es el código Visual Studio de Microsoft. Es libre y de código abierto. En última instancia, debes elegir un editor de código que se sienta bien para ti, para qué lo necesitas. El segundo que necesitarás es un buen navegador de desarrollo. Cada navegador tiene un montón de herramientas que te ayudarán a desarrollar sitios web. Pero Google Chrome es el mejor. Con él, podemos detectar errores, entender por qué están sucediendo ciertas cosas, e incluso hacer un poco de diseño en el navegador. Ya sabes, respaldar tu trabajo es una buena idea, ¿verdad? Bueno, la mayoría de los codificadores usan un sistema llamado Git para respaldar sus proyectos. Con Git almacenas los cambios que realices a tu proyecto en tu computadora. Esto es genial, pero si algo le pasa a tu computadora, pierdes todo tu código. Aquí es donde entra Github. Permite a los codificadores sincronizar su código y los cambios que realizan con una versión en línea. Github también te permite publicar sitios web simples y han creado una aplicación llamada GitHub Desktop, que hace que usar Git sea súper fácil. Ve a descargar e instalar esas tres cosas ahora. En los recursos de clase se puede ver un PDF que contiene editores de código alternativos y navegadores de desarrollo. Una vez que hayas descargado e instalado esas tres cosas, puedes saltar a la siguiente lección y aprender sobre HTML. El resto de esta lección, te mostraré cómo descargar e instalar Sublime Text, Google Chrome, y GitHub Desktop. Abre tu navegador predeterminado, algo así como Safari o Internet Explorer, y escribe “sublimetext.com”, Ahí vamos, y luego quieres descargar el para tu sistema operativo. Para mí, es descarga para Mac, si no ves uno para tu sistema operativo, haz clic en el botón de descarga por ahí, y luego podrás ver OS X, Windows, Linux, lo que sea. Vamos por OS X, mientras eso está descargando nuestra búsqueda de Google Chrome. Google Chrome, ahí vamos, google.com/chrome. Verás algo como esto. Esta página sí cambia de vez en cuando. Después haces clic en esta descarga Chrome para Mac. Ahí vamos. Lo siguiente que necesitamos descargar es GitHub Desktop, github desktop y aquí está arriba, desktok.github.com. Después descarga para Mac OS si estás en Mac o descarga para Windows si estás en Windows. Ya, eso descargará GitHub Desktop. Una vez que todo haya terminado de descargar, podemos abrir nuestra carpeta Descargas. Voy a arrastrar y soltar o aplicación GitHub Desktop en aplicaciones. Voy a hacer doble clic en “Google Chrome”. Voy a hacer doble clic en “Sublime Text”, ambos se abrirán. Arrastraré Google Chrome a la carpeta de aplicaciones. Tenemos un texto sublime y arrástrelo a la carpeta Aplicaciones también. Puedes cerrar esos dos Windows cuando terminen y simplemente puedes expulsar esos dos DMG así. Después vas a tu carpeta de aplicaciones y nosotros vamos por “g-o” para Google Chrome y haz doble clic en eso. Este es un pop-up de seguridad que aparece en Mac, perfectamente bien. Puedes dar click en “Abrir” y ahí vamos. Tienes instalado Google Chrome. Fantástico. Volvamos al buscador y abramos GitHub Desktop y de nuevo podemos presionar “Abrir”. Esta es nuestra página de inicio que veremos. Entonces, por fin, queremos que Sublime Text se abra. Vamos a Finder presione “S-U” en nuestro teclado, y luego haga doble clic en eso. Nuevamente, abre eso, y Sublime Text se abrirá detrás de una ventana del Finder. Tienes lo que necesitas para desarrollarte como un ninja. Vamos a entrar en lo que es HTML. Te veré en el siguiente video. 3. ¿Qué es HTML?: ¿ Qué es HTML? Bueno, decirle que HTML significa lenguaje de marcado de hipertexto, puede que no sea tan útil, pero lo que sí me resulta útil, es explicar que HTML es un lenguaje de codificación simple utilizado para mostrar información. Está escrito por humanos y entendido por los navegadores. HTML estructura el contenido de la página web en un montón de cajas, en la mayoría de las páginas web, hay cajas dentro de cajas. El cuadro que contiene todas las demás cajas es nuestra ventana del navegador, esto es lo que me gusta llamar teoría de cajas HTML. Dentro de cada caja puede haber más cajas, texto, una combinación de cajas, y texto, o nada en absoluto. En función del nombre de la caja, el navegador la mostrará y su contenido de manera diferente a otros tipos de cajas, hay casillas para listas, párrafos, encabezados, pies, imágenes, enlaces, y mucho más. Por defecto, la mayoría de las cajas son tan altas como su contenido, y tan anchas como la caja que hay dentro de, otras cajas son tan altas y tan anchas como su contenido. La mayoría de cajas que tan lejos a la izquierda y tan lejos a la parte superior como puedan, entonces ¿cómo codificamos una caja HTML? Bueno, la mayoría de las cajas HTML tienen una etiqueta de apertura y una etiqueta de cierre. Una etiqueta de apertura se compone de un símbolo menor que, el nombre de la etiqueta y un símbolo mayor que. Una etiqueta de cierre se compone de un símbolo menor que, una diagonal hacia delante, el nombre de la etiqueta, y un símbolo mayor que. Entre estas dos etiquetas, puedes poner otra caja HTML, algunos textos, una combinación de cuadros y texto, o dejarla en blanco. Todo el cuadro HTML se compone entonces de la etiqueta de apertura, el contenido, y la etiqueta de cierre, y todo esto se llama un elemento HTML. Por defecto, un navegador mostrará elementos HTML, desde la parte superior del documento hacia la parte inferior, tal como están en tu archivo HTML. ¿ Es todo esto, puede que estés preguntando? No del todo, hay una cosa más, atributos HTML. Los atributos son bits y piezas secretas que dan al navegador más información sobre un elemento HTML, como cómo mostrarlo, y qué funcionalidad agregar. Escribimos atributos en la etiqueta de apertura de un elemento HTML, usamos atributos para darle estilo a los elementos para decirle al navegador a dónde ir al hacer clic en un enlace, qué archivo debe mostrar un elemento de imagen, y mucho más. Un atributo se compone de un nombre, un símbolo igual, y un valor, que se envuelve en comillas simples o dobles. Las utilizarás todo el tiempo al escribir HTML. De acuerdo, ahora entiendes HTML en teoría, en el siguiente video, empezarás a escribirlo. 4. Escribir HTML: ¿ Qué es una página web? En pocas palabras, es un documento que contiene una mezcla de lenguajes de codificación HTML, CSS y JavaScript. Un navegador interpreta estos lenguajes y muestra algo visual e interactivo para los humanos. Un sitio web entonces, es una colección de páginas web que a menudo están relacionadas entre sí. Vamos a crear nuestra primera página web y escribir un poco de HTML. Veremos qué puede hacer nuestro editor de código, de qué es capaz Chrome y cómo funcionan Git y GitHub. Empecemos por ir al escritorio de GitHub y crear nuestro primer repositorio. Un repositorio es donde guardamos todos nuestros archivos para un proyecto de codificación. Es básicamente una carpeta que GitHub maneja y observa. Para crear uno, vaya a Archivo y haga clic en “Nuevo repositorio”. Vamos a llamar a un repositorio o repo, caricatura-héroe. La descripción puede ser, “mi héroe favorito de dibujos animados”. Posteriormente en la clase, comenzaremos a añadir nuestros archivos HTML y CSS para nuestro personaje de caricatura-héroe o película. Ahora la ruta local es donde quieres almacenar este repositorio en tu computadora. Voy a instalar el mío en mi escritorio, pero puedes elegir donde quieras. Puedes optar por inicializar el repositorio con un README o no. No tienes que hacerlo y no tienes que preocuparte por las opciones de gitignore o licencia. Vamos a crear este repositorio. Ya verás que ahora tenemos una carpeta de caricatura-héroe en nuestro escritorio. Esta es nuestra carpeta de repositorio. Una vez que hayas creado tu repositorio, puedes empezar a escribir algo de HTML. La forma más fácil de hacer esto es ir al repositorio y seleccionar, Mostrar en Finder, y luego arrastrar esta carpeta de caricatura-héroe al texto sublime. Lo primero que voy a hacer es que voy a hacer esta ventana un poco más grande, así que voy a sostener “Opción Alt” y hacer clic en el “Botón Verde”, entonces voy a empezar a escribir mis elementos HTML. El primero que voy a escribir es mi encabezamiento un elemento. Escribamos la etiqueta de apertura. Escribiré algo de contenido, “Oye. Soy un encabezamiento grande”, y luego escribiremos la etiqueta de cierre. Es posible que hayas notado que sublime no hizo nada de fantasía. El motivo de esto es que todavía ve lo que estamos escribiendo como texto plano. Se puede ver aquí abajo en la parte inferior derecha dice, “texto plano”. La forma más fácil de conseguir que reconozca que estamos escribiendo HTML es guardar el archivo como un archivo HTML. Vaya a Archivo y luego seleccione “Guardar como”. Voy a guardar esto como test.html, lo que lo convierte en un archivo HTML. Presionaré “Guardar”, y luego verás que hay algo de color en el documento. Cuando escribamos nuestro siguiente elemento, que va a ser un elemento de párrafo, verás que a medida que escribo p, aparecen todo un montón de opciones. Estas son las sugerencias que sublimado nos da. Puedes presionar “Abajo”, puedes presionar “Arriba”, y luego cuando presionas “Return”, escribe el resto de la etiqueta de apertura y la etiqueta de cierre y coloca tu cursor justo donde necesita estar. Aquí puedo decir: “Oye. Soy un elemento de párrafo. Genial, eh” Muy bien. El siguiente elemento son los elementos de enlace, o lo que llamamos un elemento de anclaje, así que vamos a escribir eso. Presiono “Return” y texto sublime hará un montón de cosas por nosotros. Una de las cosas que hace es que nos da unos atributos href. Esto es realmente importante cuando se trata de elementos de anclaje. Significa que podemos especificar dónde se debe llevar a un usuario cuando haga clic en el enlace. Podemos ir a Google https://google.com, y luego el contenido puede ser, “click Me, soy un enlace”. Está bien. Ahora tenemos tres elementos. Guardemos el archivo o puedes pulsar “Command S” o “Control S”, y vamos a nuestro buscador y arrastrar la página HTML de prueba a Google Chrome para previsualizarla. Ahora bien, esta es nuestra página web, que es bastante guay. Verás que el h1, ese párrafo, y el elemento ancla todos se ven muy diferentes. Esto es lo que hace el navegador cuando empezamos a escribir HTML. Es fantástico. Ahora lo genial de Chrome son sus herramientas de desarrollo. Ahora una de las cosas que podemos usar es el elemento y el espectro. Vas a Ver, Desarrollador y selecciona Herramientas para desarrolladores. En el lado derecho, y a veces en la parte inferior, verás a tu inspector de elementos. Al pasar el cursor sobre un elemento, verás que ha resaltado en el lado izquierdo. Te mostrará el ancho, la altura, y te dará alguna información sobre sus márgenes. Lo que es genial de esto es que puedes hacer doble clic en un nombre de etiqueta y luego puedes especificar uno nuevo. Así como así, presiona “Return”. En el lado izquierdo, tu página web se actualizará. También puedes hacer doble clic en el contenido y editar eso, lo cual es fantástico. También puedes hacer clic en un elemento y presionar “Retroceso”, y se ha ido, se elimina. Ahora puedes hacer esto en cualquier página web que te guste. Puedes inspeccionar los elementos, puedes editarlos, puedes eliminarlos, pero no te preocupes, solo hace cambios en la versión de tu navegador de esa página. Cuando te refresques, todo volverá a cómo era. Esta prueba de este enlace realmente funciona. Sí. Ahí vamos. Nos lleva a Google. Pero luego para volver a la página, tengo que presionar el botón Atrás. ¿ Cómo lo abrimos en una nueva pestaña? Volvamos al texto sublime, y podemos agregar un nuevo atributo aquí llamado target. Si especificamos un valor de _blank, se abrirá en una nueva pestaña. Guardemos esto y volvamos a Chrome, actualicemos, y luego haga clic en ese enlace, y ta ta ta ta, se abre en una nueva pestaña. Ahora puedes cerrar esto y luego estamos de vuelta en nuestra página web. Otro gran atributo que podemos agregar a un elemento ancla es el atributo title. Cuando escribes título y le das un valor, algo así como, “Vamos a Google”. Da al usuario cierta información cuando pasa por encima de ella. Vamos a Chrome, actualicemos y pasemos el cursor sobre este enlace. Ya verás ese pequeño pop-up que dice: “Vamos a Google”. Esto ayuda con la experiencia del usuario. Ahora, hemos hecho un poco de codificación HTML. Volvamos a GitHub y veamos qué ha pasado aquí. Se recogió que hemos creado un nuevo archivo. Lo que vamos a hacer aquí es que vamos a decir crear test.html. Entonces vamos a comprometerle esto al maestro, y lo que acabamos de hacer es pedirle a GitHub que recuerde lo que hemos cambiado. Podrás ver todos los cambios en la pestaña Historial. Ahora, volvamos a seleccionar la pestaña Cambios y hagamos algo más de codificación HTML. Volvamos al texto sublime. Yo quiero que esta palabra de párrafo sea audaz. El modo en que hacemos eso es envolverlo con elementos en negrita, y un nombre de etiqueta de elementos en negrita es solo b Si guardamos esto y volvemos a Chrome y actualizamos, verás que la palabra de párrafo ahora está en negrita. Si haces clic con el botón derecho en cualquier página de alguna manera, podrás inspeccionarla, que luego se perforará hasta ese elemento en el inspector de elementos, y lo resaltará. Si luego hacemos doble clic en la etiqueta grande y cambiamos esto a I, que significa cursiva o cursiva y presionamos “Return”, verás que el párrafo ahora está cursiva. El motivo por el que te estoy mostrando esto es que no tienes que conocer todo un montón de CSS para que las cosas sean audaces, para que las cosas sean encabezados, para que las cosas se vean un poco diferentes en una página HTML. El siguiente es un elemento de imagen. Volvamos a Sublime Text y añadamos un elemento de imagen. Para escribir un elemento de imagen, escribimos img, voy a presionar “Return”, y Sublime Text me va a dar un atributo de fuente para llenar. Tampoco me va a dar una etiqueta de cierre, y esto es una excepción a la regla. Un elemento de imagen no tiene etiqueta de cierre porque no se puede poner nada dentro de él. Ahora lo que se espera que le demos a la imagen es un archivo para mostrar en el atributo fuente. ¿ De dónde sacamos este expediente? Bueno, vamos a Chrome y vamos a descargar una imagen. Abramos una nueva pestaña, vamos a buscar gato, porque el internet es todo sobre gatos. Vamos a la pestaña Imágenes y vamos a dar click en esta imagen aquí. Ahora si hacemos clic derecho y decimos: “Abrir imagen en Nueva pestaña”, lo que tenemos aquí son dos opciones diferentes para mostrar esta imagen. La primera opción es que podamos hacer clic derecho y decimos “Guardar imagen como”, luego creamos una nueva carpeta llamada img. Entonces dentro de esta carpeta img, guardamos esto como cat.jpeg, guardamos. Muchas gracias. Cerremos eso y dentro de Sublime Text, en el atributo fuente, escribiremos img/cat. jpeg. Guardemos eso, volvamos a Chrome, volvamos a nuestra página HTML de prueba, nos refrescaremos aquí. Ahí está nuestra imagen de gato, viene de nuestro sistema de archivos local, y esto se llama URL relativa. El otro modo de hacerlo es con una URL absoluta. Si volvemos a esta pestaña, verás que hay esta URL realmente larga. Esta es una URL absoluta. Si escribimos esto de nuevo, nos llevará a esta imagen, y esta imagen se almacena en algún lugar de internet. Copiamos esta URL y vamos a Sublime Text, luego pegarlo en nuestros atributos fuente. Guarda esto, vuelve a Chrome, vuelve a nuestra página de prueba y refresca, nada habrá cambiado. Pero verás que el atributo fuente ahora tiene esta imagen la cual se encuentra en algún lugar de internet. Esas son las dos formas de suministrar un archivo a un elemento de imagen, aplicará la misma teoría a algunos otros elementos más adelante en la clase. Ahora lo que quiero tratar de hacer aquí es cambiar este test.HTML en algo diferente. ¿ Cómo hacemos eso? Bueno, en realidad necesitamos escribir un elemento de título y ponerlo en los elementos de cabecera de nuestra página. Se puede ver en el lado derecho del elemento en los espectros que hay un elemento 'html', un elemento 'head', y el elemento 'body', pero no hemos escrito ninguno de esos. Para duplicar esto, puedo mostrarte lo que está viendo el navegador. Vamos a View Developer y View Source, y esto es lo que tiene. no ver un HTML, un cuerpo, o un elemento de cabeza. ¿ Qué está pasando aquí? Cerremos esto y volvamos a este inspector de elementos. Estos elementos HTML, cabeza, y cuerpo son comprados por Chrome porque los dejamos fuera. Es bastante inteligente y bastante guay. Pero es una buena práctica poner estos elementos en nuestra página HTML. Vayamos a hacer eso. Dentro de Sublime Text, lo primero que voy a hacer es realmente escribir el doctype, y esto le dice al navegador exactamente qué versión de html estamos escribiendo. Vamos por más pequeño que, un signo de exclamación, escriba DOCTYPE en mayúsculas, y luego especifique qué es el doctype y es HTML. Entonces lo cerraremos. Lo que estamos diciendo aquí es que estamos escribiendo un HTML 5, que es el HTML más reciente y más grande. También pasa a ser realmente corto, lo cual es genial para nosotros. Lo siguiente que voy a hacer es escribir mi elemento HTML. Ahora si presiono “Regresar” aquí, hace mucho trabajo para mí. Voy a presionar comandos aquí y escribir todo eso un poco más manualmente. Ahora, escribiré la etiqueta de cierre para HTML, que sublime nos ayudó con bastante, luego escribiré mis elementos de cabeza. El elemento de cabeza es donde almacenamos todos los elementos invisibles en nuestra página y uno de esos son los elementos del título. Podemos cambiar esto a página de prueba, y esto es lo único que voy a poner en mi elemento de cabeza. El siguiente son los elementos del cuerpo. Ahora el elemento corporal es donde almacenamos todo por encima del contenido visible. Cortaré esta etiqueta de cierre y la pegaré justo antes de la etiqueta HTML de cierre. Después seleccionaré todo el contenido y presionaré tab y denso, y la razón por la que hago esto es porque es más fácil de leer y es más fácil de darle sentido. Se puede entender qué cajas van dentro de qué cajas. Guardemos esto y vayamos a Google Chrome y actualicemos de nuevo, y verás que aquí nada ha cambiado mucho, pero ahora tenemos un título en nuestra pestaña de página de prueba. Fantástico. Después seleccionamos Ver Desarrollador y Ver Fuente nuevamente, verás que ahora tiene un montón más de elementos con los que trabajar, lo cual es fantástico. Cerremos esto y déjame mostrarte otro elemento. Este elemento es un elemento de salto de línea. Permítanme demostrar esto en Sublime Texto. Justo encima de la imagen, crearé otra etiqueta de párrafo, y dentro de esta etiqueta de párrafo diré, “Mi nombre es”, pero quiero poner esto en una nueva línea. Es posible que puedas presionar retorno y teclear el nombre del gato. Gato gatito, bastante original. Voy a presionar “Guardar”, luego volver a Chrome, Refrescar. Tenemos la etiqueta de párrafo, pero no hay salto de línea. ¿ Por qué eso no funcionó y cómo conseguimos que funcione? El motivo por el que no funcionó es porque todos los espacios en blanco, cualquier retorno, espacios, todos se ven como un solo espacio en HTML. Para llegar a una nueva línea, necesitamos insertar un elemento de salto de línea. Vamos a Sublime Text y donde hay un salto de línea aquí, sólo escribimos un br elementos. Nuevamente, esto es una excepción a la regla, no hay etiqueta de cierre porque no se puede poner nada dentro de ella. Guardemos esto, volvamos a Chrome y Refresh y allá vamos. Está en una nueva línea. Hemos hecho un montón de cambios. Ahora podemos volver a GitHub Desktop, y verás que el archivo test.html tiene este punto amarillo en él, y este cat.jpeg tiene este plus verde en él. En el test.html, se puede ver que está quitando un par de líneas y luego agregando un montón más de líneas. Cuando cometas un archivo y obtienes, va a recordar lo que estás quitando y recordar lo que estás agregando. El resumen no se llena ya en esta ocasión. Lo que vamos a hacer es decir “Añadió imagen de gato y pocos elementos más”. Puedes agregar una descripción si quieres, pero solo hago esto si hay muchos cambios y realmente necesito ser explícito sobre lo que acabo de hacer. Entonces vamos a comprometernos a dominar. Puedes volver a ver el historial de cambios yendo a la pestaña Historial. El original fueron nuestros commits iniciales, después creamos el archivo test.html, y luego agregamos una imagen de gato y algunos elementos más. Ahora lo que también es genial de esto es que, en Sublime Text, si empiezas a hacer cambios como 'Soy un título grande, mírame”, y luego guardas eso, verás que hay estos pequeños puntos que aparecen. Lo que esto significa es que el archivo ha sido modificado y sublime recoge esto porque está trabajando con Git para notificarte estos cambios. Acabas de escribir tu primer bit de HTML. Te sugiero que puño baches el aire o sueltes, siguiente es publicarlo en línea para que todo el mundo lo vea. 5. Consigue tu sitio en línea: Hemos hecho algunos comandos y eso es fantástico. Pero, si algo le pasa a nuestra computadora, como rayos en absoluto, derramamos cerveza de jengibre sobre ella entonces nuestra computadora se destruye, todo nuestro código se perderá. Lo que tenemos que hacer es sincronizar nuestro código y se compromete con Github.com para que nuestro código sea respaldado en línea. Mientras estamos en ello, publicaremos nuestro sitio para que el mundo lo vea. Sí. Vayamos a Chrome y configuramos una cuenta de GitHub. Abro una nueva pestaña, voy a Github.com y ahí mismo puedes inscribirte. Voy a ir por TTKB como mi nombre de usuario, y mi e-mail puede ser richplus1@taptapkaboom.com, mi contraseña va a ser un secreto. Después haces clic en Regístrate en GitHub. Lo primero que debes hacer es verificar tu cuenta. Hagámoslo y necesitas aclarar esta cosa. Ahí vamos. Este proceso puede cambiar de vez en cuando. Si no es exactamente así cuando te inscribes, no te estreses. Soy un up para una cuenta gratuita, sigo usando una cuenta gratuita para mí. Desplácese hacia abajo. No necesito ayuda para configurar una organización y no quiero actualizaciones de GitHub. Presionaré continuar, y me desplazaré de nuevo a la parte superior. ¿ Cuál es tu nivel de experiencia en programación? Nuevo en programación? ¿ Para qué planeas usar GitHub? Aprendiendo a codificar? Sí. Publicar un proyecto? Sí. ¿Creando un sitio web con GitHub Pages? Sí. Entonces puedo saltarme mis intereses y luego presentarme. Este paso es realmente importante. Es necesario verificar tu dirección de correo electrónico-. En tu bandeja de entrada verás algo como esto. Simplemente toca el botón verificar la dirección de correo electrónico. Ahí vamos. Dirá que tu correo electrónico fue verificado. Entonces deberías recibir un e-mail dándote la bienvenida a GitHub. Bienvenido a GitHub, TTKB. Entonces tiene todo un montón de cosas en las que puedes hacer click. Fantástico. Si has llegado hasta aquí, has configurado tu cuenta de GitHub 100 por ciento correctamente. Una vez que te registraste en Github.com y verifiques tu dirección de correo electrónico, vuelve a GitHub Desktop, luego haz clic en GitHub Desktop y ve a Preferencias. Entonces quieres iniciar sesión en Github.com. Escriba su nombre de usuario o dirección de correo electrónico, y luego escriba su contraseña. A continuación, haz clic en Iniciar sesión. Una vez que hayas iniciado sesión, puedes hacer clic en Publicar repositorio. Al pasar por este proceso se sincronizará entonces tu código y tus cambios con GitHub.com. El nombre se ve bien, la descripción se ve bien. Pero, no queremos mantener privado este código porque más adelante queremos publicar nuestros sitios como una página de GitHub para que todo el mundo lo vea, y no podemos hacer eso si es privado. Una vez que hayamos comprobado dos veces esta información, haz clic en Publicar repositorio. Ahí vamos. Deberías estar sincronizado con GitHub.com. Ahora para doble comprobación, ve a Chrome, ve a Github.com. Asegúrate de haber actualizado la página. Deberías ver tu reporte en el lado izquierdo. Vamos a hacer clic en eso y se te presentará con tu página de reporte de GitHub. Está pasando bastante aquí. Pero lo que quiero que hagas es ir a la pestaña Configuración y desplázate hacia abajo hasta llegar a GitHub Pages. A continuación, selecciona tu fuente y selecciona la rama maestra. Esto refrescará la página. Después desplázate hacia abajo hasta GitHub Pages otra vez. Verás que dice que tu sitio está listo para ser publicado en esta URL. Después da click en esa URL y deberías encontrar una página 404. Esto es normal y está perfectamente bien. El siguiente es escribir, test.html después de tu URL. Después presiona Return y ahí vamos. Deberías ver tu página de prueba con Mr. Kitty Cat. Ahora puedes compartir esta URL con todo el mundo. Lo que es realmente genial es que cuando vuelves al texto sublime y actualices algo de HTML, como hey, “Soy un encabezamiento gordo grande” y te guardas eso, luego vuelves al escritorio de GitHub, verás esos cambios que hemos cubierto pero luego agregas tu resumen. Te comprometes a dominar, y luego vuelves a empujar al origen. Cuando empujes hacia el origen, esto actualizará automáticamente esa página en línea para que todos la vean. Es realmente, realmente cool y poderoso. Acabas de publicar tu primer sitio para que el mundo lo vea y está sincronizado de forma segura con Github.com. Cada vez que actualices tu código y empujas el origen en GitHub, tu sitio se actualizará. Estás en camino a tomar el control de internet. Siguiente arriba es aprender todo sobre CSS. 6. ¿Qué es CSS?: Hemos escrito algo de HTML, pero no se ve bonito. Aquí es donde entra CSS. Básicamente, el CSS que escribimos hace que nuestro HTML se vea bien al anular los aburridos estilos predeterminados proporcionados por el navegador. Escribimos CSS para decirle al navegador cómo deben verse los elementos HTML. Para ello, escribimos un nombre de propiedad y valor separados por dos puntos y terminando con un punto y coma. Podemos darle estilo a un elemento con tantos pares de propiedades como nos gusten. Hay toneladas de propiedades que puedes escribir para cambiar cómo se ve y se siente un elemento. Propiedades como ancho, altura, color de fondo, font-family, font-size, y todo un montón más. Ahora hay dos métodos de escritura CSS. El primero es mediante el uso de estilos en línea, donde damos estilo a un elemento utilizando sus atributos de estilo. El segundo es mediante el uso de conjuntos de reglas, donde seleccionamos elementos a Estilo, seguido de las propiedades y valores CSS para esos elementos. Cubriremos ambos métodos en la siguiente lección. 7. Escribir CSS: En esta lección, cubriremos la escritura CSS con estilos en línea y conjuntos de reglas. Lo mejor es explicarlo entrando en código. Entonces en texto sublime, vamos a crear un nuevo archivo y luego vamos a guardar este archivo como un nuevo archivo HTML. Lo llamaré style-test.html y luego lo guardaré. Porque Sublime sabe que es un archivo HTML, voy a empezar a escribir mi etiqueta HTML y luego presionar return cuando me lo sugiera. Se acaba de escribir todo un montón del HTML para mí, lo cual es fantástico. Daré a este documento un título de prueba de estilo y luego entraré a mi cuerpo y empezaré a escribir algunos elementos HTML. Voy a empezar con un par de h uno elementos, y los llamaré encabezando uno - uno y luego copiaré esto y lo pegaré dos veces, encabezando uno - dos, encabezando uno - tres y luego lo que haré es crear un h dos y hacer lo mismo cosa aquí. Epígrafe dos - uno, rúbrica dos - dos, rúbrica dos - tres. Voy a guardar esto y voy a entrar en mi buscador y arrastrar la prueba de estilo a Google Chrome. Esto es lo que parece por defecto, tres Rumbo uno y tres Rumbo dos. Ahora voy a empezar a peinarlos. Entonces, dentro de Sublime Text en mis primeros h uno elementos, voy a agregar un atributo de estilo, y dentro de aquí, puedo empezar a agregar mis pares de nombre de propiedad y valor. Entonces lo primero que voy a hacer es ir por un tamaño de fuente, así que tamaño de fuente, presione retorno. Vamos por algo así como 30 píxeles, y luego quiero agregar un color así que iré por el color y se deletrea a la manera americana. Todo en HTML y CSS se deletrea a la manera americana, solo para que lo sepas, un colon, ¿qué es un valor de color? Bueno, hay un par de formas de hacer color en CSS, te mostraré dos en esta lección. Entonces vamos a Google Chrome. Abramos una nueva pestaña y tecleemos htmlcolorcodes.com. En esta página web hay algunas formas de obtener colores. Desplazemos un poco hacia abajo y aquí tenemos un selector de color realmente bonito. Se parece mucho a un selector de color que encontrarás en Photoshop o app de diseño. Entonces si te sientes cómodo usando Photoshop o algo así, úsalo ahí en su lugar si quieres. Ahora esta es la forma más fácil de seleccionar un color. Una vez que estés contento con el color que tienes, entonces puedes hacer doble clic y puedes copiar ese valor. Puedes volver a Sublime Text y pegarlo en. Recuerda poner un punto y coma después, y verás que este es un valor de código hexadecimal y tiene este símbolo hash antes de este número. Entonces cuando guardamos esto y volvemos a Google Chrome, entonces podemos refrescar y verás que nuestro encabezado uno -uno ahora tiene un color y un tamaño de fuente. Otra forma de hacer colores en CSS es usar nombres de color. Ahora si vuelve al sitio web de códigos de color HTML y desplácese un poco hacia abajo hasta llegar a estos nombres de color, desplácese un poco más allá y luego haga clic en navegar por la lista completa. Después desplázate otra vez hacia abajo y lo que verás aquí es que hay un par de nombres a los que se han asignado diferentes valores de color, y a veces estos son mucho más fáciles de recordar que los valores de código hexadecimal. Entonces si recuerdo salmón y estoy en Sublime Text, y en lugar de este color, solo escribo salmón y guardo, luego vuelvo a Google Chrome y luego refresco aquí, verás que sale el color, que es bonito práctico. Entonces estaré usando estos nombres de color en este video solo para mantenerlo realmente simple. Ahora de vuelta en Sublime Text, lo que quiero hacer es que quiero darle estilo a todos estos encabezamientos de la misma manera. Entonces lo que haré es seleccionar los atributos de estilo lo copiaré, y luego lo pegaré una y otra vez y otra vez y otra vez y otra vez y otra vez. Entonces ahorraré. Volveré a Chrome y refrescaré aquí, y allá vamos, todos nuestros encabezamientos ahora se ven exactamente iguales. Esto es realmente genial porque significa que nuestro encabezamiento uno, que están destinados a ser realmente grande, ahora también puede ser del mismo tamaño que nuestro encabezamiento dos. Ahora quiero darle estilo a mi rumbo dos un poco diferente. Entonces voy a ir a Sublime Text y luego mis h dos, vamos a cambiar el tamaño de la fuente a unos 20 píxeles y el color, voy a ir por el rosa caliente. Entonces lo que haré es seleccionar aquí estos valores y los copiaré y los pegaré en los otros h dos elementos. Entonces guardo eso, vuelve a Chrome y refresca. Ahora puedo ver que el encabezamiento dos elementos son ligeramente diferentes. Ahora si no lo has recogido ya, en Sublime Text, copiar y pegar estos valores una y otra vez puede sentirse un poco repetitivo. Además, aquí hay mucho CSS, en comparación con cuánto HTML y cuánto contenido hay en realidad aquí y se empieza a conseguir que todos estos diferentes saltos de línea suceden hombre, es un poco desordenado. Entonces, lo que me gustaría hacer aquí es cambiar de estilo en línea a estilo conjunto de reglas. Una de las formas en que podemos hacerlo es crear un elemento de estilo dentro del elemento de cabeza. Vamos a crear un elemento de estilo y verás que Sublime nos da un atributo de tipo texto CSS. No necesariamente necesitamos esto, pero de nuevo, es realmente bueno ser específico. Ahora, dentro de este elemento de estilo, podemos empezar a hacer algo de estilo CSS. Entonces lo que haré primero es darle estilo a mis h one elementos y cómo lo hago es seleccionando todos los h uno elementos y luego declarando que todos los h uno elementos deben tener un tamaño de fuente de 30 píxeles. Entonces hago otra declaración de que todos los h uno deben tener un color de salmón. Ahora este es el equivalente de este atributo y su valor en los tres de los h uno elementos. Entonces voy a eliminar estos atributos así. Ahora lo que se llama a esto es un conjunto de reglas. Esta es su declaración selector que apunta a un montón de elementos al estilo. Entonces dentro de estas llaves se encuentra tu bloque de declaración, y cada línea se llama una declaración con una propiedad de declaración y un valor. Guardemos esto y luego vayamos a Google Chrome y refresquemos, y no ha pasado nada. Pero echa un vistazo a esto, si hacemos clic con el botón derecho e inspeccionamos estos elementos, ya verás ahora que hay este panel inspector de elementos, y luego hay un montón de propiedades CSS en la parte inferior por aquí. Ya verás que este h uno tiene un tamaño de fuente de 30 píxeles y un color de salmón. Entonces si quisiéramos cambiar el tamaño de la fuente, hacíamos clic en el valor del tamaño de la fuente y lo cambiaríamos a algo así como 50 píxeles, los cambiaría a todos. Ahora, si hacías clic en este h dos elementos y quieres cambiar su tamaño de fuente, puedes cambiar esto a 50 píxeles, pero solo uno de ellos cambiaría. Para que puedas ver las diferencias entre el estilo en línea y el estilo de conjunto de reglas justo aquí. Ahora cuando refrescamos nuestra página, todo vuelve a la normalidad. Entonces si volvemos a Sublime Text y queremos cambiar nuestro color a tal vez algo así como azulado. Se puede ver lo rápido que se comparó con copiar y pegar entre los diferentes elementos. Entonces guardaré eso y volveré a Chrome y refrescaré. Ahora vamos a entrar en estilo es h dos con conjuntos de reglas también. Entonces lo que haré es crear otro conjunto de reglas. Seleccionaré todos los h dos elementos y luego haré una declaración que todos los h dos elementos deben tener un color de rojo. Entonces ahorraré. Entonces volvamos a Chrome y actualicemos, ¿ y qué ha pasado aquí? Esa es una pregunta realmente buena. Entonces si inspeccionamos este h dos elemento, verás que el estilo h dos está llegando, pero está tachado y en cambio, este color de rosa caliente está tomando prioridad. ¿ Por qué sucede esto? Bueno, la idea clave aquí es que el estilo más específico tendrá prioridad. Entonces lo que está pasando aquí es que estamos diciendo todas las h dos, queremos que tengas un color de rojo. Pero lo que está pasando en los elementos reales, es que estamos diciendo a los elementos que tiene un color de rosa caliente, lo que significa que es más específico porque solo este elemento va a tener un color de rosa caliente. Entonces esto significa que si desmarcamos el color del rosa caliente, entonces tendrá un color de rojo, lo cual es bastante interesante. Si volvemos a Sublime Text y nos desplazamos hacia abajo y eliminamos todas las declaraciones de color de los estilos en línea, entonces ¿qué crees que sucederá? Volvamos a Chrome, actualicemos y ahí vamos. Todos nuestros encabezamientos dos ahora son rojos, pero aún tienen un tamaño de fuente de 20 píxeles. Entonces, cuando haces estilo en línea y estilo de conjunto de reglas, combinan, no sobreescriben entre sí a menos que haya un conflicto. Cuando haya un conflicto, recuerda que el estilo más específico tendrá prioridad. Ahora volvamos a Sublime Text y saquemos este tamaño de fuente de 20 píxeles y ponerlo en el conjunto de reglas h two, y luego podremos eliminar todos estos atributos de estilo. Ahora bien, puedo ver claramente qué está pasando. Es mucho, mucho mejor. Ahora, cuando mencioné conflictos, estaba hablando de estilo en línea versos estilo conjunto de reglas. Pero, ¿qué pasa si hay un conflicto dentro del estilo de conjunto de reglas? Si escribo otro H_2 aquí y pongo un color de verde, ¿qué va a pasar? Guardemos esto y averigüemos. Voy a refrescar aquí, verás que el tamaño de la fuente sigue siendo el mismo, pero ahora es verde. Lo que ha pasado es que si hay dos estilos que tienen la misma especificidad, entonces el que se escribió en última instancia tiene prioridad. Se puede ver por aquí que dice estilo prueba HTML línea 16. Esta fue la línea HTML de prueba de estilo 11. El que fue escrito el pasado entonces tiene precedencia. Pero ahora, ¿y si queremos que algunos de estos elementos sean diferentes? Una forma de hacer una diferencia de uno o más elementos es dando a un elemento atributos de clase, y luego peinar elementos con esa clase de manera diferente. Vayamos a Sublime Text y hagamos eso. Si vamos a este H1 en el medio y le damos una clase de grande, y luego copiamos y pegamos este estilo en este H_2 y el último H_2, guardamos esto, volvemos a Chrome, refrescamos. ha pasado nada. Entonces la clase de lo grande en realidad no hace nada. Lo que necesitamos hacer es realmente escribir algunos estilos para esta clase. Volvamos a Sublime Text y justo debajo de este H_2, vamos a escribir nuestro selector para todos los elementos con una clase de grande. El modo en que hacemos esto es poniendo un punto y luego poniendo el nombre de la clase. Lo que esto significa es que estamos diciendo todos los elementos con una clase de grande, declaro que deberías, y ¿qué vamos a hacer? Bueno, vamos a establecer el tamaño de la fuente en algo así como 60 píxeles. Entonces vamos a guardar esto, volver a Chrome, y refrescar. Aquí verás que sólo los elementos con una clase de grande tenían este enorme tamaño de fuente. No importa si es un elemento H_1 o H_2. Ahora bien, si volvemos al texto sublime y ponemos una clase en el primero de mayúsculas, y luego copio esto, y lo pongo en este H_2 por aquí, y luego si copio mayúsculas y lo agrego al primer H_2, que significa que tendrá dos cláusulas, una de grande y otra de mayúsculas y luego guardar. Después escribo un selector para mayúsculas y luego un bloque de declaración y le doy text-transform de mayúsculas, y guardo eso, volver a Google Chrome, y refresco, verás que todos los elementos con una clase de mayúsculas son ahora mayúscula. Si seleccionamos este elemento H_2 con la clase de grande y mayúscula, podemos ver que debido a que tiene una clase de mayúsculas, tiene una transformada de texto de mayúsculas. Entonces debido a que tiene una clase de grande, tiene un tamaño de fuente de 60 píxeles. Este H_1, debido a que tiene una clase de mayúsculas, tiene una transformación de texto de mayúsculas. Este H_1, debido a que tiene una clase de grande, tiene un tamaño de fuente de 60 píxeles. Esto es realmente poderoso. Ahora, lo que es aún más poderoso es en Sublime Text, o tu editor de código, puedes decir todos los elementos con una clase de grandes y mayúsculas, declaro que debes tener un color de marina. A ver qué hace eso. Ahorramos, volvemos a Chrome, y actualizamos, y verás que solo un elemento cambiará de color porque es el único elemento que tiene una clase de grande y mayúscula. La idea de selectores es realmente poderosa y puede ponerse realmente compleja. Ahora, permítanme darles otro ejemplo de un selector realmente genial. Dentro de mi primer H_1, tengo este encabezamiento de palabra. ¿ Cómo haría que sólo ese encabezamiento tuviera un color diferente? Lo que vamos a utilizar es un elemento span. Un span es como un cuadro en blanco por defecto. No tiene estilos predeterminados y hereda los estilos de texto del elemento del que está dentro. Escribamos span, y luego después de golpear a uno, entonces encerraremos ese lapso. Voy a guardar aquí, volver a Google Chrome, y refrescar, y nada habrá cambiado. Ahora, volvamos a Sublime Text y escribamos otro span justo fuera de aquí y pongamos en elemento span. Voy a guardar eso, volver a Chrome, y refrescar. Será texto por defecto. No va a tener nada especial en ello. Verás que este lapso, parece el encabezado del que está dentro, y verás que este lapso, no parece nada. Echa un vistazo a esto. Si fuéramos a darle estilo a todos los elementos span, y decir todos los elementos span, quiero que tengas un color de violeta. Guardemos, y volvamos a Chrome y refresquemos. Verás que este elemento span y este span elementos son ahora ambos violeta, lo cual tiene sentido. De vuelta en Sublime Text, si tuviéramos que decir, todos los elementos de span dentro de un H_1 sean de color violeta, podemos escribirlo así: H_1 espacio span. Entonces ahorraríamos. Volveríamos a Chrome y refrescaríamos, y sólo el lapso que está dentro del H_1 sería violeta, lo cual es realmente, realmente genial. Lo que hemos visto aquí es súper poderoso. De vuelta en Sublime Text, encontré un tener bastante frustrante que desplazarse entre mis estilos y mi HTML. Si quisiera crear varias páginas, tendría que copiar los elementos de estilo con todos los estilos que hay en él y pegarlo en cada página que quiero lucir igual. Entonces si hice un cambio, tendría que copiar y pegar de nuevo en todas las demás páginas. ¿ Cómo trabajamos en torno a esto? Bueno, echa un vistazo a esto. Voy a crear un nuevo archivo, y lo voy a guardar como archivo CSS. Voy a crear una nueva carpeta llamada CSS. Dentro de la carpeta CSS, voy a guardar este archivo como punto de prueba CSS. Entonces guardaré esto, y verás que Sublime reconoce esto como un archivo CSS. Entonces tomaré todos estos estilos dentro de los elementos de estilo, los cortaré, los pondré en prueba CSS, los pegaré. Después seleccionaré la mayoría de ellos, y luego presionaré Mayús y Tab para una sangría de ellos, y luego guardaré este archivo. Entonces volveré a la prueba de estilo de HTML. Guardaré este archivo, volveré a Chrome y actualizaré. Ya verás que todos los estilos han desaparecido ahora. Esto es realmente genial porque, wow, en realidad puedo ver todo mi HTML y no tengo que seguir desplazando hacia arriba y hacia abajo. Pero, ¿cómo llegamos ahora al archivo de estilo para ser aplicado a este archivo HTML? Cómo hacemos esto es, en lugar de tener los elementos de estilo, ahora tendremos un elemento de enlace. Empezaremos a escribir link así, y así así, Sublime Text llenará el resto por nosotros. Esta fila atributos significa relación. Estamos diciendo, vamos a enlazar a este archivo, y la relación son hojas de estilo, y el tipo va a ser texto CSS. Este href se parece mucho a un ancla tags href. Podemos usar una URL absoluta, todo una URL relativa. El URL absoluto podría ubicarse en cualquier parte de Internet, pero tenemos un archivo CSS que acabamos de crear. Diré barra CSS, y a eso lo llamamos test.CSS. Sólo comprobemos eso. Ahí vamos. Test.CSS. Fantástico. Voy a guardar esto, y luego volver a mi navegador, refrescar. Todo nuestro CSS está de vuelta ahora. Esto es genial porque en nuestro editor de código, solo puedo leer mi HTML. No tengo que seguir desplazándome hacia arriba y hacia abajo, cambiando CSS y cambiando HTML, y eso significa que puedo crear múltiples páginas que hagan uso del mismo archivo CSS. Ahora, hagamos una cosa más antes de terminar esta lección. En mi archivo test.CSS, voy a darle al cuerpo un color de fondo. Vamos por el elemento cuerpo, y quiero el color de fondo. ¿ De qué color quiero que sea? Bueno, probemos un gris claro. Algo así. Refrescar. Ahí vamos. No es demasiado bonito, pero ahora has aprendido otra propiedad CSS. Si tocas cuerpo y tocas este valor, tal vez podamos encontrar algo que sea un poco más colorido. Voy a escribir en amarillo, amarillo- verde, verde-amarillo. ¿ Y el amarillo varilla de oro claro o el amarillo claro? Luz de varilla de oro amarillo suena increíble. Ese podría ser uno de los nombres de color más fantásticos que he encontrado. Por último, necesitamos volver al escritorio de GitHub y necesitamos comprometer nuestros archivos. ¿Qué hemos hecho? Hemos creado una prueba CSS, página HTML, y un archivo CSS. ¿ Qué tal eso para un resumen? Comprometerse con dominar, y entonces lo que haremos es empujar el origen. Esto lo sincronizará con Github.com. Entonces podemos volver a nuestro navegador, abrir una nueva pestaña, ir por ttkb.github.io/cartoon-hero, y en lugar de probar HTML, iremos por style-test.html. Si no se encuentra de inmediato, puede que sólo tome un poco de tiempo para que venga. Actualicemos aquí, refresquemos de nuevo, refresquemos de nuevo. Ahí vamos, finalmente vivimos. Ahora, ya conoces los conceptos básicos de CSS. En el siguiente video, hablaremos de planeación. Sé que suena aburrido, pero te ayudará a convertirte en un ninja codificador. 8. Planificar tu sitio web: Sé que no quieres escuchar esto, pero la planeación es esencial a la hora de crear un sitio web, incluso uno simple. Sin un plan, podríamos estar codificando innecesariamente por días y no queremos hacer eso. Para empezar, elige un personaje para hacer un sencillo sitio web. Estaré haciendo un sitio web para Wreck-it Ralph. Planear es una necesidad. Normalmente hago unos bocetos rápidos para ver cómo quiero que se vea mi sitio web. A continuación, creo lo que me gusta llamar una caja wireframe. Es donde dibujo los elementos HTML como cajas, les doy nombres e indico qué cajas contienen otras cajas. No trato de planear todo de una sola vez y muchas veces dibujar una flecha de una caja y rellenar los detalles más adelante, en una parte separada de la página o incluso en una página nueva. Para mí, planear es como mirar un laberinto desde arriba y esbozar una ruta. Es una guía. Codificar es como correr por ese laberinto mientras sigue la guía. Entonces me resulta complicado planear y codificar al mismo tiempo. Para esta clase, he hecho una caja wireframe para mi página web de personajes. Incluye un elemento de encabezado que contiene el nombre y la imagen de perfil de mi personaje, y elementos principales que contienen encabezados, párrafos, listas, y una imagen y, por último, un elemento de pie de página que contiene una pequeña cantidad de texto. Ahora es el momento de crear tu propio marco de caja. No necesitas saber nada sobre diseño o estilo para crear uno. Todo lo que necesitas saber es que HTML es un montón de cajas dentro de cajas. He incluido mi caja wire-frame en los recursos de la clase para que lo compruebes. Puedes usarlo como referencia si así lo deseas. Una vez que hayas completado tu caja wireframe [inaudible] parte uno, puedes empezar a crear tus sitios web de personajes. Si lo desea, publique su planeación en su galería de proyectos. 9. HTML de tu sitio web: Vamos a ponernos nerdy y escribir el HTML para la página web de nuestro personaje. Se puede hacer referencia a los elementos HTML comunes PDF en los recursos de la clase al escribir su HTML. Voy a repasar cada elemento HTML mientras lo escribo. Ahora lo único que ha cambiado en mi carpeta de “caricatura-héroe” desde que fui el año pasado, es que ahora tengo un “box-wireframe.pdf”. Voy a abrir esto y referirme a ello ya que codifico mi HTML. Se puede ver que tengo un elemento de cabecera, tengo un elemento principal, y un elemento de pie de página todo el camino en la parte inferior. Lo que voy a hacer es codificar mi HTML de arriba a abajo y referirme a este documento a medida que voy. Entrémonos en Sublime Text. Voy a crear un archivo nuevo, luego voy a guardar este archivo como index.html. El motivo por el que estoy haciendo esto es porque el navegador busca primero este archivo, y lo carga automáticamente. Si vas a taptaptapkaboom.com, no tienes que escribir “index.html” o “bar.html”. Se carga automáticamente el archivo index.html primero. Vamos a guardarlo. Entonces puedo escribir mis elementos HTML. Voy a presionar enter. Daré a mi página un título de Wreck-It Ralph, y luego bajaré al cuerpo. Lo primero que voy a hacer es escribir mis elementos de encabezado. Ahora un elemento de cabecera dice: “oye, esto se trata la página, es de donde van los encabezados, es a donde van las imágenes grandes”. No es realmente el contenido del sitio, pero normalmente es grande y audaz. Escribamos nuestros elementos de cabecera. Dentro de nuestro elemento de cabeza vamos a escribir, un elemento de imagen que va a ser nuestro avatar. Después escribiremos nuestros elementos h1 y pondremos Wreck-It Ralph dentro de ahí. Ahora para nuestro avatar, voy a necesitar una imagen. Vámonos a Google Chrome. En esta pestaña puedo buscar Wreck-It Ralph. Ahí vamos. Vamos a las imágenes. Voy a buscar algo que sea como un avatar, preferentemente cuadrado para no tener que recortarlo. Vamos a desplazarnos un poco hacia abajo. Este se ve bastante bien, 440 por 450. Eso se ve genial. Haga clic derecho en él. Vamos a abrir imagen en nueva pestaña. Entonces voy a volver a hacer clic derecho y “Guardar imagen como”. Dentro de mi carpeta de imágenes, voy a guardar como ralph-avatar, y luego guardar eso. Ralph-avatar.jpeg. Cerraré esto y cerraré esto, y también puedo cerrar esto. Entonces dentro del atributo fuente puedo escribir img/ralph-avatar.jpeg, y ese es nuestro elemento de encabezado por ahora. Lo que creo un gran practica sobre todo cuando estás aprendiendo a codificar, es usar comentarios HTML. Ahora no te he enseñado esto hasta ahora, así que escucha. Justo encima de mi encabezado, lo que voy a hacer es que voy a escribirme un comentario solo para que quede abundantemente claro cuál es este siguiente elemento. Para escribir un comentario, vas por un menos que símbolo, un signo de exclamación, dos guiones, y voy a ver que todo debajo de esto se pone gris, y eso significa que está comprometido. El navegador no puede entender esto, no lo leerá. Dentro de aquí, diré, “elementos de cabecera”. Después para cerrar los comentarios, haré un guión de guión, y luego un símbolo mayor que. Ahí vamos. Esa es una manera realmente fácil de dejarte notas. Voy a ahorrar ahora, y es una muy buena idea guardar regularmente tu trabajo. Hagamos referencia al documento de planeación dentro de la vista previa. Después escribiremos nuestro elemento principal con un h2, un párrafo, y una imagen para empezar. De vuelta en Sublime, vamos a crear un nuevo comentario. Ahora en lugar de escribir eso, hay un atajo. Puedo presionar “Comando” o “Control” y barra inclinada hacia adelante. Ahí vamos. No tengo que recordar cómo escribir un comentario HTML. Escribiré “elemento principal”. Entonces después, eso podemos escribir nuestros elementos principales. Ahora, nuestro elemento principal es donde van las partes principales de su página web. Es bastante autoexplicativo. Entonces tenemos un h2 y después de nuestro h2, tenemos un párrafo, y después del párrafo tenemos una imagen. Dentro de la h2, ¿qué fue? Acerca de Ralph y un poco sobre él más una imagen. Digamos “Acerca de Ralph”. Ahora vamos a escribir un poco sobre él. “ Ralph es impresionante. Es un chico malo de videojuegos de 8 bits que recorre la longitud de la arcada para demostrar que es un buen tipo”. Entonces debajo de esto tenemos una imagen. Voy a guardar y luego ir a buscar otra imagen. Vayamos a Chrome de nuevo y busquemos Wreck-It Ralph. Vaya a “Imágenes”, y luego bajo “Herramientas”, seleccionaré una imagen grande. Ahí vamos. Ahora quiero uno con él y sus amigos. Desplázate un poco hacia abajo. Ahí vamos. Eso se ve bastante bien. ¿ Qué pasa si hay algo un poco mejor? Ese también se ve bastante bien. Voy a dar click en este. Haga clic derecho. Abramos en nueva pestaña. Haga clic nuevamente con el botón derecho, “Guardar imagen como”. Entonces dentro de nuestra carpeta de imágenes, diré “ralph-bhig.jpeg”. Guarde eso. Podemos cerrar esto, cerrar esto. Entonces dentro de Sublime podemos escribir “img/ralph-big.jpeg”. Por aquí, se puede ver que he escrito mal eso. Pondré una “h” ahí dentro. En realidad teníamos una “h” por aquí, ralph-avatar, ralph-big. Eso se ve bien. Ahora hemos puesto algunos elementos en nuestro elemento principal. ¿ Qué sigue? Vamos a “Vista previa”, desplázate un poco hacia abajo. Tenemos un párrafo, un h2, y luego una lista ordenada. Escribamos esta etiqueta de párrafo, y aquí es una leyenda. Yo diré: “Ralph y sus amigos”. Voy a deletrear amigos correctamente. Después crearemos una lista ordenada. Ahora lo que es una lista ordenada, es básicamente una lista con números en el lado izquierdo. Es realmente genial porque tu navegador creará esos números para ti. Vayamos por un ol por lista ordenada. Dentro de esta lista ordenada van a haber un par de elementos de lista. Vamos por un elemento de lista. Entonces dentro de este ítem de la lista, podemos decir : “Tiene manos grandes”. Podemos crear otro li y podemos decir: “Es tratado como mal culo”. Entonces el tercero podemos decir: “Está tratando de ser el buen tipo”. Ahí vamos. Creo que en realidad había otro elemento por aquí, tal vez un h2. Volvamos a ver las características de vista previa. Pongamos ese h2 y tecleemos “Las características de Ralph”. Es presión llena cuando estás escribiendo en la cámara. Todo el mundo está mirando tu ortografía. Eso lo voy a guardar. Volvamos a “Vista previa” y veamos qué sigue. Hemos hecho el ol con los ítems de la lista. Después hay un h2 para amigos, un párrafo, y una lista desorganizada. Volvamos a Sublime. Por aquí puedo escribir otro “h2", “Los amigos de Ralph”. Entonces vamos por un elemento de párrafo. Ahora podemos escribir un poco sobre eso, “Ralph tiene unos amigos impresionantes. Creo que su mejor amigo es Glitch. Ella es impresionante”. Entonces si volvemos a “Vista previa”, verás que he puesto en “& links”. Quiero que estos ítems de la lista sean enlaces. Dentro de Sublime Text, quizá pueda decir, “Haga clic en los enlaces de abajo para leer más sobre ellos”. Algo así. Voy a guardar eso y luego vamos a crear una lista sin orden, ul. Esto es diferente de una lista ordenada. En lugar de números, estarán [inaudibles] del lado izquierdo. Su primer amigo es Pac-Man. Ahora quiero convertir a Pac-Man en un enlace. lo mejor puedo cortar eso, escribir mis elementos de anclaje y luego dentro de estas dos etiquetas, puedo pegar “Pac-Man”. Entonces quiero a algún lugar donde ir. ¿ A dónde me va a llevar Pac-Man? Vámonos a Chrome. Busquemos Pac-Man, algo así. Desplázate un poco hacia abajo. Aquí vamos. Quizás puedas ir al artículo de Wikipedia. Copiaré esta URL, volveré a Sublime y pegaré eso. Entonces voy a copiar este ítem de lista, pegarlo dos veces más. Su segundo amigo va a ser Mario, o tal vez Mario Brothers. O tal vez puede ser Mario y el siguiente puede ser Luigi. Luigi, ahí vamos. Entonces en Chrome, voy a buscar a Mario. Vamos a desplazarnos un poco hacia abajo, Mario Nintendo, Super Mario. A lo mejor podemos ir por este. Ahí vamos. Voy a copiar esa URL, volver a Sublime y pegarla por ahí. Entonces, busquemos a Luigi, desplácese hacia abajo una y otra vez, vayamos a Wikipedia. Entonces copiaré esa URL, voy a volver a Sublime y pegarla ahí dentro. Entonces su último amigo obviamente debería ser Vanellope von Schweetz. Entonces tecleemos, Vanellope von Schweetz. Ahí vamos. Cuando buscamos a Vanellope von Schweetz, ahí vamos. Vamos a este primer enlace. Acepta las cookies. Ahí vamos. Aquí no parece haber mucha información. Ah, ahí vamos. Ahí hay un video. Pausemos eso. Vamos a copiar esta URL, volvamos a Sublime y pegarla por aquí. A lo mejor podemos decir también conocido como Glitch. Voy a guardar esto y tal vez lo que podemos hacer aquí es, poner un poco de comentarios justo por encima de estos h2's Así que presionaré barra de comando para comentarios y pondré en unos amigos y aquí, presionaré Tab y luego Command slash otra vez y voy a copiar y pega esa palabra. Es realmente largo y difícil de deletrear. Acerca de Ralph, eso está bien.No creo que tenga que poner un comentario ahí. Entonces hemos hecho nuestro elemento principal, ahora, hagamos nuestro elemento de pie de página. Entonces crearé un nuevo comentario, elemento de pie de página, y luego escribiré nuestro elemento de pie de página. Ahora, elemento de pie de página es algo que debería existir en casi todos los sitios web, casi todas las páginas web, y solo debería tener unos pocos enlaces o un poco de información sobre el sitio. A lo mejor hay un nuevo conjunto de suscripción, enlaces, un símbolo de copyright, esa cosa. Entonces, dentro de este elemento de pie de página, escribiré mis elementos de párrafo. Aquí, podemos decir que este sitio fue creado durante una clase TaptapKaboom. Entonces después de eso, podemos escribir nuestro símbolo de copyright a pesar de que realmente no tenemos ningún copyright sobre el contenido pero sigue siendo divertido de hacer. Entonces la forma en que hacemos esto es mediante el uso de una entidad HTML. El ente HTML para un símbolo de copyright, es así. Escribes un símbolo ampersand y luego vas, copias, y luego pones un punto y coma después de eso. Deberías ver que se vuelve morado o de color diferente. Entonces puedes poner tu nombre después de eso. Entonces clase TaptapKaboom, quiero que esto vaya a mi página web. Entonces pondré una etiqueta de elemento ancla de apertura y luego después de eso, la cerraré. Podemos poner un href y aquí y decirle que vaya a https://taptapkaboom.com y luego voy a guardar eso. Ahora, en realidad hemos hecho todo esto sin echar un vistazo a cómo se ve. Esto está bien, ha sido tan simple proceso HTML, pero ahora podemos ir y echar un vistazo si todo está funcionando. Así que abramos Finder y arrastremos index.html a Chrome. Podemos cerrar esa primera pestaña y luego echar un vistazo a cómo se ve nuestro sitio. Tenemos nuestra imagen de avatar, tenemos nuestra h1, tenemos un h2, Ralph es impresionante, tenemos eso en un párrafo, entonces tenemos una imagen realmente grande, wow, eso es enorme. Entonces vamos a desplazarnos un poco más hacia abajo, Ralph y sus amigos, esa es la leyenda. Otro h2, y ahí vamos. Tenemos una lista ordenada. Se puede ver que tiene los números a un lado y tenemos a los amigos de Ralph a párrafo. Entonces, tenemos un montón de elementos de lista en una lista desordenada. Se puede ver que tiene estos discos a un costado en lugar de números. Entonces finalmente tenemos la etiqueta de pie de página. Esto se ve fantástico. Lo que es realmente importante aquí es que, si no tienes estilo en tu página, las cosas tienen sentido. Es así como un motor de búsqueda verá tu página. Entonces si tiene sentido para usted sin ningún estilo, es debe tener sentido para un motor de búsqueda. Ahora sólo quiero volver a comprobar que todo está donde debe estar. Por lo que voy a dar clic en Ver, ir a Desarrollador y abrir mis herramientas de desarrollador. Vamos a desplazarnos aquí dentro de nuestro cuerpo, tenemos nuestra cabecera, eso se ve bien. Dentro de nuestros elementos principales, tenemos todas esas cosas principales. Entonces nuestro pie de página, ahí vamos. Fantástico. Se puede ver que los comentarios están aquí también pero Chrome no prestará atención a esos. Veamos si estos enlaces funcionan. Si hago click en Pac-Man, va para Pac-Man y lo que quiero que esto haga es abrir en una nueva pestaña. Entonces volvamos a Sublime Text y pondremos en target_blank. Copiaré esto y lo pegaré en todos los demás elementos de anclaje. Aquí abajo también hay uno. Está bien, lo guardaré. Volvamos a Chrome y actualicemos. Ya ves ahora cuando hago clic en Pac-Man, ahí vamos, abre Pac-Man. Si hago click en Mario, abre Mario. Luigi, ahí vamos. Por último, Vanellope von Schweetz, ahí vamos. Fantástico. Vamos a cerrar eso. Entonces nuestros enlaces funcionan, las cosas se ven bien. Lo último que quiero hacer es, quiero un poco de icono de tabulador. Yo sé cómo se llama esto por tal vez tú no. Lo que les voy a mostrar ahora es, cómo buscar Google para algo. Creo que se puede llamar icono de pestaña. Entonces voy a buscar eso. Abre una nueva pestaña y ve ícono de pestaña del navegador, HTML, tal vez. Ahora puedes empezar a navegar por los resultados. Stack Desbordamiento es realmente bueno, vamos a ver eso. Cómo agregar un icono de pestaña del navegador, favicon, esa es una buena palabra para saber para los sitios web. Desplazémonos un poco hacia abajo. Tan a menudo lo que sucede es, alguien hará una pregunta sobre Stack Overflow y un montón de personas darán respuestas. Entonces buscas una garrapata verde, y esta suele ser la respuesta correcta. Simplemente agregue el siguiente código al elemento de cabeza. Ahí vamos. Copiémoslo. favicons PNG son compatibles con la mayoría de los navegadores excepto para los navegadores que son IE inferiores o iguales a 10. Para compatibilidad con versiones anteriores, puedes usar favicons ICO. No tengo ni idea de qué es eso. Bueno, yo sí, pero probablemente tú no. Entonces vamos a copiar eso. Vamos a Sublime y desplázate a la parte superior y pongámoslo en nuestro elemento de cabeza. No, no lo copiamos. Entonces volvamos a Chrome, copiemos eso, y luego vayamos a Sublime y peguelo. Esto se parece mucho a un enlace con una fila de hojas de estilo, pero obviamente diferente porque tiene una fila de icono y tiene una href. Entonces cambiemos el href y necesitaremos suministrar una imagen muy probablemente. Lo que quiero hacer es usar la misma imagen que usamos para nuestro avatar. Entonces voy a copiar esto y pegarlo por aquí, entonces voy a ahorrar. Volvamos a Chrome y refresquemos aquí y allá vamos. Ahora tenemos una de estas cosas que se llama favicon. Ahora si no tienes una imagen cuadrada para tu personaje o tu héroe de cine, busca algo como resizer de imagen. Ahí vamos. ResizeImage.net, eso funcionará muy bien. Simple Image Resizer, PicreSize. Todos estos sitios web probablemente harán un gran trabajo. Pruébalos, recorta tu imagen y luego descarga esa imagen y ponla en tu HTML. Vamos a cerrar esto y podemos cerrar esta pestaña también. Entonces, esto se ve bastante bien. Ya está listo para ser peinada, que cubriremos en el próximo video. Pero primero, vamos a entrar en nuestro código. Vayamos a GitHub Desktop. Sí, hemos agregado una caja wireframe, hemos agregado dos imágenes y un archivo index.html. Entonces vamos a escribir un resumen de escribió nuestro o tal vez podamos decir, agregó el archivo index.html de nuestro personaje y pocas imágenes. A lo mejor para su descripción podemos decir que escribió el HTML y agregó un favicon. Entonces vamos a comprometernos a dominar. Una vez que hayas hecho eso, podemos entonces empujar el origen y cuando eso se haga, bueno, entonces vamos a nuestro navegador, abre una nueva pestaña, escribe tu nombre de usuario de GitHub, mío es tt y kb.github/cartoon hero y luego en lugar de probar, podríamos usar index.html o simplemente podríamos dejarlo en blanco. Entonces, intentemos dejarlo en blanco, presionando retorno. Ahí vamos. Ahora se ve mucho mejor al escribir index.html o barra HTML o HTML de prueba después de la barra final. Pero si quieres, también puedes hacer eso. Lo mismo. En este punto, puedes estar bastante orgulloso de ti mismo. Acabas de escribir el HTML para la página web de tus personajes. Creo que deberías darte un alto cinco. Sí. 10. CSS de tu sitio web: Ahora viene la parte divertida de nuestro sitio web de personajes, el CSS.Lo que es increíble de CSS es que con él, puedes hacer que el mismo montón de HTML luzca muy diferente. Intenta hacer que la página web de tus héroes coincida con su personalidad.Voy a trabajar de arriba a abajo de la página y cambiar un poco nuestro HTML mientras escribimos el CSS. Te lo explicaré todo a medida que vaya. Pero si quieres probar algo diferente, ve por ello, simplemente google o echa un vistazo a las propiedades CSS comunes pdf en los recursos de clase. Así es como se ve nuestra página web sin ningún CSS. Ahora, llegamos a divertirnos un poco. Voy a referirme a mi cuadro wire frame pdf de nuevo durante esta lección. Lo primero que voy a hacer es abordar este encabezado. Yo quiero que sea realmente ancho y le voy a dar un color naranja. Para el avatar, quiero hacer de eso un círculo con un borde y quiero que la imagen y el H1 estén en el medio. Vamos a llegar a ella. Dentro de Sublime Text voy a crear un nuevo archivo, y este va a ser mi archivo CSS. Voy a guardar esto como, hero dot CSS, dentro de mi carpeta CSS. Ahí vamos. Entonces dentro de mi archivo de índice, voy a escribir, elemento in-link, presionar retorno, y el atributo rol va a ser Stylesheet.El tipo es texto CSS y el HRF va a ser CSS slash hero dot CSS.Voy a guardar eso. Entonces dentro de mi héroe CSS, solo quiero asegurarme de que todo esto funcione. Escribiré algunos estilos para el elemento body y el color de fondo, solo voy a decir rojo por ahora solo para comprobar que está funcionando. Volveré a Chrome y refrescar.TA-DA.Está funcionando. Volvamos a Texto Sublime. Vamos a sacar esto. Lo primero que voy a hacer es poner mi margen a cero. Cuando guarde esto y vuelva a Chrome, verás eso a la izquierda y a la parte superior, y ojalá a la derecha y en la parte inferior, ya no hay más margen en el cuerpo. Ahora, hagamos un poco de estilo de encabezado. Debajo de aquí, vamos por nuestro elemento de cabecera. Lo que quiero hacer primero es agregar un color de fondo. Mi color que he memorizado es D14635. Este es un naranja un color. Vamos a guardar esto.Volvamos a Chrome y refrescar.Ahí vamos. Es el naufragio Ralph naranja. Bueno, creo que es un naufragio Ralph naranja.Entonces lo que quiero hacer es, quiero hacer el encabezado, bueno, H1 dentro de la cabecera blanca. Entonces diré H1 dentro de cabecera, color quiero que seas blanco.Ahí vamos. Entonces lo que quiero hacer es, quiero centrar la línea H1 y la imagen. Una forma de hacerlo es establecer la propiedad de alineación de texto al centro. Esto entonces alineará la imagen y el H1 en el medio.Voy a guardar eso, volver a Chrome y refrescar.Ahí vamos. Eso se ve bastante bueno.Ahora, quiero que mi imagen sea un círculo. Vayamos a Sublime Text y digamos “hey, imagen dentro de encabezado.Quiero que seas un círculo”. El modo en que hacemos esto es, es diciendo frontera-radio. Aquí abajo lo verás, fronterizo radio, y podemos decir algo así como un 150 píxeles. Esto hará una esquina redondeada realmente agradable. Si guardo esto, volvamos a Chrome y actualicemos. Sí, eso se ve bastante bien. Pero ahora voy a inspeccionar estos elementos y quiero que sea un circulo.Tenemos un radio fronterizo de 150. Pero entonces si pongo el ancho a 300 píxeles, ahí vamos, las cosas se vuelven circulares. Voy a copiar este estilo y volver a Sublime Text y pegar sobre eso. Ahí vamos. Ahora, cuando regrese a Chrome y me refresco, es circular.fantástico.Entonces quiero agregar una frontera. Vamos por una frontera. Esta propiedad de borde es en realidad un atajo. El valor va a tener tres cosas diferentes a él.Vamos a ver qué tan amplio va a ser. Voy a ir por diez píxeles y luego voy a establecer el estilo de frontera, que va a ser sólido. Entonces voy a establecer el color que va a ser, #483A94, que es este color morado realmente fresco. A lo mejor puedo cambiar los 10 píxeles a algo así como 20 pixeles.Ahí vamos, eso se ve bastante bien. Pero empezarás a ver ahora que ya no es circular. Esto se debe al modelo de caja. Esta palabra de fantasía. Pero lo que se puede ver del lado derecho aquí es que tengo 300 por 300 píxeles, luego tengo un relleno de nada, y luego tengo un borde de 20 píxeles a la izquierda y 20 píxeles a la derecha, lo que lo hace 340 píxeles de ancho y 340 píxeles de alto. Eso significa que necesito aumentar mi radio fronterizo de un 150 a un 170. ¿ Cómo se ve eso? Bastante bueno.Vamos a copiar esto de nuevo.Allá vamos. Volvamos a Sublime Text y peguemos esto.Allá vamos. Voy a guardar eso.Vuelve a Chrome y refrescar.Fantástico. Ahora, quiero un poco de espacio por encima de esta imagen y por debajo de la H1. Lo que voy a hacer es en Sublime, voy a añadir una cosa llamada relleno. Podemos ir por padding top y yo iré por unos 50 pixeles, y puedo ir relleno abajo 50 pixeles también. Vamos a ahorrar, volvamos a Chrome y refrescar.Allá vamos . Eso se ve bastante bueno.Aunque no sé si soy un gran fan de la frontera morada. A lo mejor podría simplemente cambiar eso a blanco. Voy a volver a Sublime. Cambiemos el color del borde de ese morado a blanco. Guardar y refrescar. Sí, eso me gusta mucho. Ahora bien, este Wreck-it Ralph en este tipo de fuente, no se ve demasiado bien. Es bastante fácil cambiar tu font-family en Sublime en nuestro encabezado mientras escribes en font-family y luego le das un valor. Ahora, hay un par de fuentes predeterminadas que funcionarán en toda tu computadora y la computadora del usuario, Pero si especificas una fuente que solo está en tu computadora. No funcionará en la computadora de otra persona. Lo que hay que hacer aquí es aplicar unas cuantas fuentes que funcionarán si la anterior no funciona. Lo que voy a hacer es escribir Helvetica. Si no tienen Helvetica, entonces podemos usar Arial. Si no tienen a Arial, podemos usar sans-serif. Ahora, una fuente serif es una de estas que tenemos actualmente, y tiene estos pequeños pies y brazos. Sans serif significa que no tiene estos pies y brazos. Ahora, también puedes escribir Helvetica con citas a su alrededor, y Arial con citas a su alrededor, si quieres, pero realmente no es necesario. Recuerda poner tu punto y coma después de eso. Si guardamos eso y volvemos a Chrome, refresca, eso se ve mucho mejor. Pero, ¿qué pasa con el resto de nuestro sitio? Bueno, quizá vamos a cambiarlo todo de una sola vez. Lo que voy a hacer es cortar esta declaración font-family e ir a mi conjunto de reglas corporales y pegar función.Entonces voy a ahorrar, volver a Chrome y refrescar. Ahora, todo nuestro sitio tendrá esta fuente aplicada a la misma.Fantástico. Vamos a volver a comprobar que en realidad sí tiene esa fuente. Haré clic derecho, inspeccionaré, luego en el lado derecho aquí, me desplazaré hacia abajo font-family Helvetica, Arial, sans-serif. Si tu computadora no tiene Helvetica y no tiene Arial, usará cualquier fuente de sensor que esté en el equipo. Ahora, para mis encabezados, quiero usar algo un poco más especial. Voy a ir a Google Fonts y encontrar unas fuentes realmente geniales para usar. Estas se denominan fuentes web. Esto funcionará si un usuario tiene la fuente en su computadora o no. Vamos a abrir una nueva pestaña, ir a buscar Google Fonts.Haga clic en este primer enlace. Entonces aquí puedes enloquecerte. Busca algo que coincida con tu personaje. Sé que la fuente que quiero se llama Presione Inicio 2p. Aquí vamos. Una vez que hayas encontrado tu fuente, puedes pulsar este botón más. Entonces una vez que tengas seleccionada una familia, click en esta barra negra. Entonces hay dos formas de meter esa fuente en tus estilos.La forma estándar es la más fácil. Vamos a copiar esto y volvamos a Sublime, vamos a nuestro índice y antes del archivo CSS, peguemos este elemento de enlace. puede ver que es más o menos lo mismo.Es sólo en un orden diferente. Tiene un HRF de cosido tiene un atributo rol de hoja de estilo y eso es todo lo que necesitábamos. Entonces volvamos a Chrome. Entonces, digamos especificar en CSS. Utilice las siguientes reglas CSS para especificar estas familias. Diversión familia, presiona Inicio 2P. Si no tiene eso, es cursivo. Vamos a copiar eso. Vayamos a Sublime y su, guardemos este archivo HTML índice, y luego en nuestro héroe CSS, lo que voy a hacer es que voy a aplicar este estilo a todos los H1s y, todos los H2s. Este es otro tipo de selector. En lugar de escribir una regla para H1s y luego otra para H2s, simplemente podemos decir, hey, todos los elementos H1 y todos los elementos H2, declaro que deberías tener esta familia de fuentes. Guardemos eso y vayamos a Chrome ahora.Llegamos a nuestra primera pestaña y actualicemos. Eso se ve bastante bien. Ahora se ve todo un videojuego-y. Sí, me gusta. Nuestro encabezado se ve bastante bien, pero no estoy muy seguro si especificé un tamaño de fuente para mi h1. Dijimos blanco, pero quiero mi tamaño de fuente, font-family no, tamaño de fuente había ido, para ser 50 pixels. Guarda eso y vuelve a hacer una actualización. Whoa, eso es bastante grande, pero está bien. Por el momento tenemos aquí a nuestro inspector de elementos. Si la cerramos o, si nos movemos al fondo y nos desplazamos hacia arriba, sí, eso se ve mucho mejor. Fantástico, pero voy a mover esto de nuevo a un lado porque es más fácil ver qué estamos haciendo. Ahora ponte a peinar los elementos principales y el contenido dentro de él. Volvamos al texto sublime. Lo que podemos hacer aquí es agregar un par de líneas y luego escribir main y escribir algunas declaraciones para nuestros elementos principales. Lo primero que quiero hacer es establecer un ancho máximo de 800 píxeles. Por lo que 800 pixeles de ancho. Esto es para que si hay un navegador masivamente amplio. No se siente como si tuvieras que desplazar los ojos de izquierda a derecha. Es bastante fácil de leer. Voy a guardar esto, volver a Chrome, golpear refresco. Entonces voy a cerrar esto por ahora y ya verás eso. Parece que sólo sube hasta ahí, lo que hace. Pero realmente no lo sabes con certeza. Hagamos clic derecho e inspeccionemos esto, y podemos hacer que esto sea un poco menos ancho. Entonces cuando pasamos el cursor sobre principal, y se puede ver dónde está el resaltado azul, así de ancho es. Dice que tiene 800 píxeles de ancho. Pero ahora ¿por qué esta imagen es tan amplia? ¿ Qué hacemos al respecto? Dentro de Sublime Text, lo que haré aquí es decir todas las imágenes dentro de nuestro elemento principal, quiero que tengas un ancho máximo del 100 por ciento. El motivo por el que hago esto es porque si cambio el ancho máximo de nuestro elemento principal, entonces el ancho máximo de éste seguirá siendo el mismo que el elemento principal. Voy a guardar esto, volvamos a Chrome y refresquemos, ahí vamos. Lo que es realmente genial de solo establecer el ancho es que la altura se escala proporcionalmente. Habrás notado eso con nuestra imagen Avatar y con esta gran imagen. Ahora lo que estoy viendo es que todo nuestro contenido sentado al lado izquierdo. No quiero esto, quiero estar en medio. Probemos un text-align. Diremos text-align center. Voy a guardar y luego de vuelta en Chrome voy a refrescar. Todo esto ha hecho, se hace nuestro texto alinear centro, que puede que quieras, pero yo no quiero. Volvamos a sublime. Vamos a deshacer eso, y lo que voy a hacer aquí es agregar un margen. Para el valor, diré 0, lo que significa valores superior e inferior, eres cero y luego configuro los valores izquierdo y derecho en auto. Este es un atajo realmente agradable para centrar elementos. Voy a guardar eso, volver a Chrome, refrescar. Ahora mi texto está alineado de nuevo a la izquierda y todo nuestro contenido está en medio. Eso significa que si cierro mi inspector de elementos, ahí vamos, eso se siente bastante bien. Pero ahora si abro eso de nuevo, así que inspeccionemos algunos elementos, y lo hago un poco más amplio. Verás que todo el contenido se sienta exactamente a la izquierda y exactamente a la derecha. Yo quiero que haya un poco de relleno a la izquierda y a la derecha. Volvamos a sublime y añadamos algo de relleno. Ahora, podríamos agregar relleno a la izquierda y al relleno, a la derecha, o lo que podríamos hacer, es usar el atajo. Entonces para el relleno, podría decir que es cero y eso sentaría todo el relleno a cero, o podría simplemente ir por arriba y abajo con su primer valor y luego a izquierda y derecha. Podría ir por algo así como 20 píxeles. Entonces si quería profundizar el atajo, entonces podría establecer el valor inferior cero o tal vez incluso 20 píxeles también y luego puedo establecer el valor de la izquierda si quisiera. Si ponemos esto en algo así como 100 píxeles, será realmente evidente lo que esto hace. Voy a guardar eso, volver a Chrome y refrescar. Ya verás que cuando seleccione mi elemento principal, no hay relleno en la parte superior, pero hay un relleno masivo a la izquierda, un poco de relleno a la derecha. Si nos desplazamos hacia abajo, verás que hay un poco de relleno en la parte inferior. Si cambio esto a, vamos a avanzar 20 píxeles. Ya verás que el relleno cambia o alrededor, lo cual es genial. Entonces si configuro el primer valor en cero, pon un espacio en la parte superior e inferior tendrá relleno cero y luego la izquierda y la derecha para tener un relleno de 20 píxeles. Esto es exactamente lo que quiero. Volvamos a sublime y hagámoslo así. Fantástico. Voy a guardar eso, volver a Chrome y refrescar. Se puede ver que vamos de ida y vuelta entre el navegador y nuestro CSS. Realmente me gusta hacer esto porque básicamente estoy diseñando en el navegador. Ahora voy a darle estilo a mis h2s. Inspeccionemos a este tipo. ¿ Cuál es el tamaño de fuente? En realidad no hemos establecido una. Volvamos a sublime, y cambiemos eso, diré, todos los elementos h2, quiero que tengas un tamaño de fuente de 35 píxeles. Yo quiero que el color sea e70c19. Guardaré esto y me desplazaré un poco hacia abajo. Volvamos a Chrome y actualicemos. Acerca de Ralph, las características de Ralph, los amigos de Ralph. Pueden ser un poco grandes. Vuelve a sublime y cambia esto a 30 píxeles. Veamos cómo se ve esto. Está bien, eso se ve bastante bien. Ahora los elementos del párrafo, no hemos hecho mucho al respecto. Vamos a establecer eso explícitamente. Yo diré, todos los elementos de párrafo, quiero que tengan un tamaño de fuente de 20 píxeles. Voy a guardar eso y refrescar; vale, eso se ve bastante grande, pero nuestra lista todavía tiene ese viejo tamaño de fuente. En lugar de escribir estilos para nuestra lista ordenada y nuestra lista desordenada, lo que haré es simplemente aplicarlo al cuerpo. Voy a cortar eso de nuestra etiqueta de párrafo, ir a los elementos del cuerpo y pegar eso ahí y vamos a guardar eso. Volvamos a Chrome y actualicemos, y ahí vamos. Eso se ve mucho mejor. Lo siguiente que quería hacer en los elementos del cuerpo es establecer una altura de línea. Esto sólo hace que el texto sea un poco más legible. Lo pondré en unos 30 píxeles que vean lo que hace. Las cosas son un poco más fáciles de leer ahora, esto se ve realmente bien. Lo siguiente que quiero hacer es darle estilo a estos enlaces. Volvamos a Sublime desplácese un poco hacia abajo y en lugar de estos elementos de párrafo, lo usaré para darle estilo a todos mis elementos de anclaje. Presionaré escape para deshacerme de las sugerencias y el color por el que vamos a ir va a ser el mismo que nuestro h2 hash, e7 allá vamos. Guardemos eso, volvamos a Chrome y actualicemos. Ahí vamos. Ahora como me cierro sobre él y quería cambiar de color. La forma de escribir una pseudo-clase en un elemento ancla es escribir un y luego dos puntos y luego pasar el cursor y esto es una pseudo-clase de desplazamiento. Lo que estamos haciendo aquí es declarar que cuando se pasa el cursor sobre algún elemento, queremos cambiar el color y así vamos a decir color y vamos a ir por ese color púrpura que escribimos un poco antes. Hash 483a94. Guardemos eso. Volvamos a Chrome, refresca ves que cuando muevo, no es morado. También podemos divertirnos un poco con esto así que si vamos a Sublime Text y cambiamos esto a un color de fondo en su lugar, y cambiamos el color a blanco y luego solo sangraré eso. Veamos cómo se ve esto. Sí, eso se ve bastante bien. Súper. El último que tenemos dos estilo es nuestro pie de página. Volveré al texto sublime y pondremos en nuestro elemento de pie de página y quiero que sea el mismo naranja que nuestro encabezado. Desplazaré aquí un poco y copiaré esto y quiero que el texto alinee sea centro también y lo pegaré en nuestros elementos de pie de página. Guardemos eso, volvamos a Chrome y actualicemos. Ahora eso se ve un poco raro así que vamos a resolver eso. Yo quiero que el color todo sea blanco y luego quiero que los elementos a dentro del pie de página tengan un color de blanco también. Guardemos eso y veamos cómo se ve eso. Entonces si me inclino sobre él, tendrá este color de fondo morado, que no estoy seguro de que realmente quiera. Volvamos a Sublime, y vamos a copiar y pegar esto y poner una pseudo-clase en estos elementos de anclaje y digamos, bueno, cuando pases por esto, quiero que la capacidad sea 0.5, y quiero que el color de fondo sea transparente, vamos a guardar esto. Vuelve a Chrome, refresca. Ahí vamos. Se ve bastante bien. Ahora lo único que queda por hacer con mi pie de página es deshacerme del espacio en la parte inferior y darle un poco de relleno. Hagamos eso. Ahora quiero que mi relleno y mi pie de página sean unos 50 pixeles y quiero asegurarme de que la etiqueta de párrafo no tenga marginación. Diré, todos los elementos de párrafo dentro del pie de página, se puede tener un margen de nada. Guardemos eso. Vuelve a Chrome y refresca. Ahí vamos. Se ve muy, muy bien. Cerremos este inspector de elementos y echemos un vistazo a cómo sería nuestro sitio para la mayoría de la gente. Sí, creo que se ve bastante bien, tal vez podamos agregar un poco de relleno en la parte superior de nuestro elemento principal y tal vez en la parte inferior también. Dentro de Sublime, volvamos a nuestros elementos principales y en lugar de 0, diremos 20 píxeles. A lo mejor podemos simplemente hacer que todo 20 píxeles. Voy a ahorrar ahí. Vuelve a Chrome y refresca. Sí, eso se ve bastante bien. Creo que este Ralph y sus amigos pueden ser en realidad necesita parecer una leyenda en lugar de un elemento de párrafo regular. Entonces vamos a ocuparnos de eso a continuación. Dentro de mi index.html, me voy a desplazar hacia abajo a este párrafo ahora le voy a dar una clase de subtítulos. Voy a guardar eso. Acude a mi héroe CSS. Desplázate un poco hacia abajo y luego en la parte inferior diré todos los párrafos con una clase de subtítulo Quiero que tengas un color de gris. Veamos cómo se ve esto. Refrescar. Eso aún no es tan gris claro así que volvamos a sublime y cambia a algo así como 999999. Ahorremos y sí, eso se ve bastante bien. Ahora quiero que se ponga en cursiva. Podríamos poner un elemento I alrededor del texto, pero debido a que es una leyenda, realidad podemos hacer esto en CSS. Vamos por fuente, estilo, y le vamos a dar un valor de cursiva, vamos a guardar, volver a Chrome y refrescar. Ahora está cursiva, pero aún tiene este margen por encima de él, así que cambiemos eso. Diremos margen top, y le daremos un valor de 0. Entonces, cuando guardemos esto, vuelve a Chrome y actualiza. Sí, eso se ve mucho mejor. Ahora lo único que aún quiero hacer es poner un poco de espacio entre los h2s y los elementos por encima de ellos. Volvamos al texto sublime. Desplázate hacia arriba hasta llegar a un h2 y luego podemos establecer un margen de digamos, 40 píxeles en la parte superior, la izquierda y a la derecha serán 0 y luego abajo podemos decir diez píxeles. Voy a guardar eso, volvamos a Chrome y actualicemos. Sí, eso se ve bastante bien. Todo en todas nuestras páginas luciendo fantástico. Ahora todo lo que necesitamos hacer es comprometerlo. Vayamos al escritorio de GitHub y para nuestro resumen, podemos decir: "Escribió el CSS para nuestro sitio web de personajes y cambiemos algo de HTML”. Después te comprometes a dominar y empujar el origen. Fantástico. Ahora, podemos volver a Chrome. Podemos cerrar las fuentes de Google, abrir una nueva pestaña, escribir nuestro nombre de usuario de GitHub y ahí vamos. Acude a héroe de dibujos animados y prensa retorno. Tu página web de personajes, tienes una URL que puedes compartir con el mundo. El último que puede encontrar bastante útil es cómo escribir un comentario en CSS. Es un poco diferente al HTML. Dentro de tu editor de código, todo lo que necesitas hacer es escribir una barra inclinada y un asterisco. Escribe tus comentarios, algo así como, estilos de encabezado y luego escribe un asterisco y una barra inclinada hacia adelante de nuevo. Ahí vamos. Entonces de nuevo, si quieres hacer esto con un atajo, todo lo que necesitas hacer es presionar Comando o Control y barra inclinada hacia adelante, y luego escribir aquí tus comentarios. Bueno, la página web de Raphl parece aplastante. Creo que encaja muy bien, y espero que el tuyo se vea impresionante y se ajuste a tu personaje también. Si te sientes a gusto, compártelo con el mundo, díselo a tu mamá, a tus amigos, los chicos con los que trabajas. Debería hacer a todos súper orgullosos o insanamente celosos. Lo que es aún más fresco es que cada vez que te comprometas y sincronices tu código, esta página se actualizará. Tada mágica. 11. Depuración y errores comunes: Chicos, no importa quién seas, aunque seas súper codificador ninja, cometerás errores al codificar. Se llaman bichos y hay frustrantes. ¿ Cómo lidias con ellos y haces que desaparezcan? Cubramos un error de ejemplo juntos. Si quieres que esta imagen parezca un avatar y no lo es, ¿qué debes hacer? Lo primero que hay que hacer es relajarse. Probablemente haya una razón lógica para no funcionar. Respira hondo y toma nota de lo que está pasando. No tiene ninguno de los estilos de avatar que he escrito para él, y parece una imagen por defecto. Entonces repasaré las cosas que entran en hacer que esta cosa funcione. En este caso, todo lo que entra en hacer una imagen, un avatar. Voy a entrar en texto sublime. Entonces dentro de mi índice, me voy a desplazar a donde escribí este avatar. El aspecto de la imagen es correcto. Ahora, voy a ir a mi CSS y desplazarme hacia abajo hasta donde escribí los estilos para este avatar. Entonces diré todas las imágenes dentro de los elementos de cabecera. Ya puedo ver mi error. ves que aquí, he puesto un punto, y aquí estoy diciendo todas las imágenes dentro de un elemento con una clase de encabezado. Esto no es lo que quiero. Voy a quitar esto y luego quitar este periodo. Entonces guardaré y luego volveré a Chrome y actualizaré. Ahí vamos. Los bichos son realmente simples de ver en retrospectiva. Cuanto más codifices, mejor te conviertes en detectarlos. Durante esta clase, es posible que te enfrentes a algunos errores comunes. El primer y más grande error son los errores ortográficos. Mira [inaudible], son los pequeños bichos los que a menudo causan los mayores dolores de cabeza. Te sugeriría copiar y pegar donde puedas. El segundo es sensibilidad de mayúsculas y minúsculas. Si tus imágenes no están llegando o no hay CSS cuando ves tu sitio en línea, hay una buena posibilidad de que sea porque estás intentando acceder a un archivo que no existe. En tu computadora, acceder a avatar JPEG puede funcionar porque avatar JPEG y Avatar JPEG son vistos como lo mismo porque el sistema de archivos de tu computadora es insensible a mayúsculas y minúsculas. Pero GitHub los ve como archivos separados porque GitHub es sensible a mayúsculas y minúsculas. Así que comprueba los nombres reales de archivos y carpetas frente a los que has escrito en tu HTML y CSS. Para evitar que esto suceda, elige una forma estándar de nombrar tus archivos y apégate a ella. Prefiero nombrar todo en minúsculas y usar guiones en lugar de espacios. A esto se le llama kebab-case. Un tercer problema común es olvidar un punto antes de un nombre de clase al escribir selectores CSS. Entonces si tus elementos no están consiguiendo los estilos que escribiste, este podría ser el problema. Si te estás golpeando la cabeza en tu escritorio porque algo no está funcionando, toma un descanso, ve a dar un paseo, mira por la ventana o explica el tema a otra persona, aunque no sepa codificar. Si puedes conseguir algo de ayuda de alguien que codifica, pregúntale. Pero sólo después de que hayas intentado depurar el tema tú mismo. Ahora si quieres mi ayuda, mucho gusto se la daré. Pero para ayudarme a ayudarte, comprometer tu código y sincronizarlo con Github.com. Dime en qué lección estás atascado. Describa lo que está sucediendo. Describe lo que crees que debería estar pasando, y luego dime qué vas a conseguir algún nombre de usuario es. Entonces trataré de ayudarte. 12. Tu propio sitio web: Si quieres ser elegante y tener tu propio sitio web con tu propia URL especial, necesitas comprar un nombre de dominio y hospedar tus archivos en un servidor. Puedes usar Github para alojar tus archivos y apuntar tu dominio a Github. O bien puedes utilizar una empresa de hosting de sitios web que te ofrecerá la capacidad de comprar un dominio y hospedar el sitio web con ellos. Me pareció que esta era la opción más fácil. No voy a charlar más sobre hosting durante esta clase, pero he incluido algunos enlaces y formas de conseguir tu sitio web en línea en los recursos de la clase. Ahí también hay pocos descuentos. 13. Fin (fiesta): Este es el final de la clase, pero ojalá sea solo el comienzo de tu viaje de codificación. Espero que te hayas divertido. Espero que hayas aprendido mucho, y espero que a partir de ahora abras más de tu lado nerdy. Lo que te está dando esta clase es una base sobre la que aprender más encima. Hay toneladas más por aprender y puede ser realmente divertido hacer sitios web para ti, para amigos, y para cliente. Ahora, si aún no lo has hecho, necesitarás festejar. Acabas de crear un sitio web. Hola cinco tú mismo, deja salir un whoop, baila, salta arriba y abajo, corre por ahí como una persona loca. Bien hecho. Si no has compartido la página web de tus personajes en tu espacio de proyecto de habilidad comparte, hazlo. Me encantaría ver el sitio que has creado. Si has disfrutado de esta clase, por favor deja una reseña. Significa mucho para mí, y asegúrate de seguirme y unirte al club de fans taptapkaboom en taptapkaboom.com. Si te gusta la forma en que doy clases, tengo un montón de clases sobre una gama de temas y más en camino. Eso es para mí, adiós por ahora. 14. Extra: URL absolutas y relativas: ¿ Cómo sabe un navegador qué imagen mostrar o qué archivo CSS usar para darle estilo a nuestro sitio o a dónde llevarnos cuando hacemos clic en un enlace. En estos casos y muchos más, le damos al navegador una dirección web del archivo al que queríamos acceder. Ahora, el nombre propio o el nombre correcto para la dirección web es U-R-L, que significa Localizador Universal de Recursos. Suena realmente futurista y complicado, pero no está tan mal. ¿ Qué es una URL? Bueno, me gusta pensar en ello como un conjunto de direcciones que podemos dar al navegador sobre dónde encontrar un archivo. Ahora, hay dos formas de hacer esto. Uno es con una URL absoluta y dos es con una URL relativa. ¿ Cuál es la diferencia entre una URL absoluta y relativa? Imagina que estamos en casa de un amigo y me preguntas, ¿ dónde vives? Podría decir 22 calles largas, 1701CA, Ámsterdam, Países Bajos. Esto es como una URL absoluta , nunca cambia y siempre es lo mismo. También podría decir, bueno, sales por la puerta principal y giras a la izquierda, sigues caminando hasta llegar a la calle larga, luego gira a la derecha, y luego soy el número 22. Esto es como una URL relativa. Las direcciones cambian en función de tu ubicación actual. Con una URL absoluta, comenzamos con el dominio donde se encuentra el archivo, como taptapkaboom.com. Entonces le decimos a nuestro navegador qué conjunto de carpetas buscar dentro. Cada nombre, seguido de una barra inclinada corresponde con la carpeta en el servidor o sistema de archivos. Por último, terminamos con el nombre de archivo y la extensión. Con una URL relativa, comenzamos automáticamente desde la dirección en la que se encuentra actualmente el navegador, sin tener que decirlo explícitamente. Después sumamos juntos una combinación de componentes de ruta relativa que indica al navegador en qué carpeta o archivo se encuentra. Después terminamos con un nombre de archivo y una extensión. Ahora bien, ¿cuáles son estos componentes de ruta relativa? Entrémonos en eso ahora. El primero es un corte. Si comenzamos con una barra inclinada, le dice al navegador que comience en la carpeta de nivel superior o URL base del dominio actual. Esto puede ser útil si tienes algunas carpetas profundas y quieres acceder a un archivo cercano a la carpeta de nivel superior. El segundo componente de ruta relativa es la slash de puntos. Cuando usamos esto, le dice explícitamente al navegador que use la carpeta actual. El navegador hace esto por defecto, así que casi nunca uso barra de puntos. El siguiente componente de ruta es punto, barra de puntos Utilizamos esto para decirle al navegador que suba un nivel de carpeta. Yo uso esto todo el tiempo, es bastante común. Los componentes de ruta final es un nombre de carpeta seguido de una línea inclinada. Esto dirige el navegador a una carpeta con ese nombre. Esto es súper común. Con una ruta a un nombre de archivo, podemos combinar múltiples puntos, barras de puntos y nombres de carpetas juntos para dar al navegador indicaciones al archivo. ¿ Cuándo usamos URL absolutas y cuándo usamos URL relativas? No tienes que usar una URL relativa para nada, pero a menudo son mucho más rápidas de escribir y mucho más cortas, lo que hace que tu código sea mucho más fácil de leer y escribir. Normalmente uso URL relativas cuando el archivo se encuentra en el mismo dominio, sobre todo si solo está a una o dos carpetas de distancia. Si desea que el navegador acceda a un archivo en otro servidor o dominio, deberá utilizar una URL absoluta. Por ejemplo, si quieres cargar un archivo CSS desde fuentes de Google o navegar a un archivo HTML en otro sitio, necesitarás usar una URL absoluta. Si tienes una opción entre usar una URL relativa y una URL absoluta, pregúntate cuál va a ser más fácil para mí y mi equipo para leer y escribir, y cuál va a causar menos errores y menos problemas. Esos son dos factores realmente importantes a considerar. Cubramos ahora algunos ejemplos. En este ejemplo, quiero crear un enlace de index.html a about.html dentro de la carpeta Pages. Entonces quiero crear un enlace dentro de about.html, luego enlaza a index.html. Saltemos al Texto Sublime. Lo que tenemos aquí es un elemento de tinta o un enlace. Cuando hago clic en él, el navegador me lleva a alguna página. Dentro de los atributos href, voy a ir por Pages, luego about.html. Podría ir a punto slash aquí, pero eso es innecesario. Voy a deshacer eso, guardar esto, y luego ir a Google Chrome. Entonces esta es mi página index.html. Llegaremos a la imagen rota, pero voy a refrescar esto y dar click en la página Acerca. Ahí vamos. Nos lleva a la página sobre. Ya verás que la URL cambia, ahora tiene pages/about.html. Volvamos a Sublime Text y abrimos about.html. Ahora quiero visitar la página de inicio. Lo que necesito hacer aquí es ir dot, dot slash, y esto abrirá la carpeta anterior. Podría entonces escribir index.html. Veamos cómo funciona eso y volvamos al refresco de Chrome. Haga clic en la página Inicio. Ahí vamos. Me lleva de vuelta a index.html, y esto me lleva de vuelta a about.html. En este ejemplo, lo que vamos a hacer es que vamos a encontrar un archivo para poner en el atributo fuente. Dentro de mi Finder, tengo este silly-face.jpeg, increíble, lo sé. Entonces dentro de mi carpeta de imágenes tengo este frog-face.jpeg, otra imagen increíble. Yo lo sé. El archivo en el que estamos en este momento es nuestro index.html, y eso está en las raíces de fuera del sitio. Aquí estamos, index.html, y ahora necesito encontrar una imagen para este elemento de imagen. Voy a ir por silly-face.jpeg, y sólo estoy escribiendo eso. Prensa Return. Voy a guardar esto. Iré a mi navegador y actualizaré aquí. Ahí vamos. Ahí está mi imagen de una cara. Si volvemos a Sublime Text y entramos dentro de la carpeta Image, lo que podemos hacer aquí es escribir un IMG, que es el nombre de la carpeta y luego barra, lo que significa que va a mirar dentro de la carpeta Image, y en lugar de cara tonta, vamos a usar rana face.jpeg. No quiero todo eso otra vez. Voy a guardar eso y volver a Chrome, refrescar, y ahí vamos. cara de rana está ahí. Eso es realmente genial. Hemos usado un nombre de carpeta y luego el nombre de archivo con una extensión. Esto cambia un poco cuando volvemos a sublime y entramos en páginas y vamos a nuestra página about.html. Voy a abrir esto y por aquí, lo que queremos hacer es acceder a cara tonta una vez más. Voy a ir por punto, barra de puntos, que va un pliegue hacia arriba, y luego teclea tonta face.jpeg y guarde eso. Vayamos a Chrome. Refrescar. Voy a ir a la página Acerca. Ahí vamos. Tienes mi cara tonta. Entonces si queríamos acceder a la cara de rana, lo que tenemos que hacer es ir dot, dot slash y luego volver dentro de la carpeta Imágenes. Fuimos una carpeta arriba y ahora vamos dentro de la carpeta de imágenes para cara de rana. Ahí vamos. Voy a guardar eso. Vuelve a Chrome y actualiza. Ahí vamos, ahí está mi cara de rana. Aquí puedes ver en sublime que hemos utilizado diferentes componentes de ruta relativa para acceder a las mismas imágenes porque empezamos desde un archivo diferente. En este ejemplo, quiero usar un Google Fonts en mi sitio. Encontré esta gran fuente llamada Bangers. Voy a dar click en eso. Entonces voy a decir seleccionar el estilo, y luego presionaré este botón aquí. Voy a seleccionar todo eso. Voy a copiar eso, ve a Sublime Text, y luego lo pegaré así, super. Aquí puedes ver que dice https://y esta larga URL. Ahora esa es una URL absoluta y no hay formas de que no podamos usar una URL absoluta para eso. Ahí vamos. Dos ejemplos relativos de URL y un ejemplo absoluto de URL. Ese es el final de este video. Para más cosas como esta, y para subir de nivel tus superpoderes creativos para ese taptaptapkaboom.com.