Aprende a codificar con HTML y CSS

1. ¡Hola!: Oigan, todos. Mi nombre es Emily Maskin y estoy súper emocionado de enseñarte sobre HTML y CSS. He sido desarrollador web desde hace casi 10 años y me encanta encontrar constantemente nuevas formas de hacer hermosos sitios web. Esta clase es genial para cualquiera que haya pensado alguna vez, quiero aprender a codificar, pero no sé por dónde empezar. HTML y CSS son la forma perfecta de sumergir tus dedos de los pies porque puedes ver fácilmente los resultados de lo que estás creando de una manera muy directa y visual. Al final de esta clase, podrás crear una hermosa página de perfil para ti o para otra persona. Es una gran manera de mostrar tus nuevas habilidades y promocionarte al mismo tiempo. Todo lo que necesitas para empezar es un editor de texto. He proporcionado enlaces de descarga en la descripción de la clase a algunos populares para que elijas. Entonces empecemos y no puedo esperar a ver qué se te ocurre. 2. Anatomía de un sitio web: Se necesitan muchos idiomas y tecnologías diferentes para hacer un sitio web, o al menos para hacer uno que sea más complejo que éste. Una manera útil de pensar en las partes de un sitio web es como partes del cuerpo humano. En primer lugar, tenemos el esqueleto. Esa es la estructura, las diferentes piezas encajan todas juntas. Eso es HTML. Todos los sitios web tienen ciertos componentes HTML básicos, como una cabeza que va encima de un cuerpo. Dentro de la cabeza y el cuerpo, hay muchos elementos HTML posibles, y en su mayoría pueden ir en cualquier orden, pero en ese punto, las metáforas del esqueleto comienzan a ponerse raras, así que tal vez no vayamos allí. ¿ Ahora qué? Bueno, nuestro esqueleto necesita piel, en primer lugar. La ropa también sería buena, tal vez pelo y maquillaje. Eso es CSS. Es lo que permite convertir información pura estructurada en algo que la gente realmente quisiera mirar. Ahora, en algún momento, probablemente vamos a querer que esta persona realmente haga algo. Necesitan algún comportamiento, acciones, recuerdos, personalidad. Ahí es donde entran en juego JavaScript y a veces, algunos otros lenguajes, pero por ahora, no te preocupes, solo vamos a cubrir HTML y CSS en esta clase. 3. Cómo configurar: Tomemos un minuto para ponernos en marcha. En primer lugar, crearemos una carpeta en el escritorio. Aquí es donde vamos a salvar todo nuestro trabajo. Puedes llamar a esta carpeta lo que quieras. Incluso puedes dejarlo como carpeta sin título si quieres. Yo sólo voy a llamar a la mía Emily. Ahora, abramos nuestro editor de texto, estoy usando atom y sólo vamos a empezar un nuevo archivo y vamos a escribir hola, mundo dentro de él. Ahora, vamos a guardarlo en la carpeta que acabamos de crear en el escritorio y llamamos a este archivo index.html. Eso es lo que siempre guardas la página principal de un sitio web como, guárdelo y luego vamos a abrir nuestro navegador web y vamos a simplemente abrir ese archivo justo en el navegador. Tan abierto, aquí está mi archivo index.html y podemos ver el texto hola, mundo. 4. Introducción a los HTML: El HTML es básicamente una forma de poner contenido de un sitio web en contenedores con el fin de crear estructura. HTML utiliza etiquetas al principio y al final de piezas de contenido. En general, cada pieza de contenido comenzará con una etiqueta de apertura y terminará con una etiqueta de cierre. Por ejemplo, <p> se utiliza una etiqueta para crear un párrafo. Veamos cómo podemos poner uno alrededor de nuestro texto Hola, mundo. Empezamos con la etiqueta de apertura al principio, que es sólo una p dentro de corchetes puntiagudos. Después agregamos nuestro contenido. Después ponemos la etiqueta de cierre al final, que es la misma que la etiqueta de apertura, excepto con una tira antes de la p. Cada vez que tienes una etiqueta con o sin contenido dentro de ella, se llama elemento. También hay un montón de etiquetas que puedes usar para crear encabezados y subtítulos en tu página. Estos son h1, h2, h3, etcétera, todo el camino a través de h6. Por defecto, estos se hacen más pequeños a medida que continúa la lista. H1 es el más grande, luego h2, etcétera. Por ejemplo, podríamos poner un encabezamiento por encima de nuestro párrafo Hola, mundo usando una etiqueta h1. Ahora dependiendo del navegador que estemos usando, este código va a resultar en algo como esto. Aquí está nuestro elemento h1 y nuestro elemento p debajo de él. Todavía no tiene un aspecto particularmente bonito, pero eso está bien. Ahí es donde entrará CSS, en un video posterior. A continuación, tenemos etiquetas div. divs se utilizan en su mayoría para agrupar otros elementos juntos. Por ejemplo, digamos que queríamos poner un borde alrededor de estos elementos o poner un color de fondo detrás de ellos o moverlos a una parte diferente de la página, un div podría ayudarnos a hacer algo de eso. Como se puede ver aquí, las etiquetas se pueden anidar, lo que significa que ponemos un elemento dentro de otro. Anidamos etiquetas todo el tiempo. De lo contrario, realmente no habría buena manera de organizar nuestro contenido. El único truco con la anidación es que hay que recordar cerrar las etiquetas en el orden correcto. Recuerda cómo dijimos que un elemento es un contenedor. Entonces al igual que estas muñecas rusas, necesitas cerrar cada interior antes de poder cerrar la siguiente externa. 5. Escribamos un código: Adelante y borra hola mundo de tu archivo index.html, y empezaremos a escribir algunos html. Por lo que todos los documentos html comienzan con la declaración de tipo doc, que se ve así. Eso es sólo para decirle al navegador que vamos a estar usando html. En la siguiente línea, vamos a crear una etiqueta html. Entonces aquí está la etiqueta de apertura y la etiqueta de cierre. Entonces dentro de eso, donde vamos a poner todo nuestro código, vamos a crear una etiqueta de cabeza y una etiqueta de cuerpo. Ponemos información sobre la página en la cabecera y el contenido real que queremos mostrar en el cuerpo. Empecemos en el cuerpo y demos a nuestra página un encabezado. Entonces vamos a usar la etiqueta h1 y esto puede ser lo que quieras. Simplemente llamaré a la mía por mí. Guárdalo y ahora si volvemos al navegador y actualizamos, deberías ver el encabezado que acabas de crear. Ahora vamos a dar a nuestro documento tres párrafos. Estos pueden ser tan largos o tan cortos como quieras. Se puede escribir una novela. Voy a mantener la mía corta y dulce. Entonces diré: “Me llamo Emily. Soy desarrollador web. Amo a mi gato”. Otra vez guardar y ahí están mis tres párrafos. Por último, agreguemos un título. El título es lo que se muestra en la pestaña de tu navegador. Dado que no es el contenido lo que se muestra en la propia página, va en la etiqueta de cabeza en lugar del cuerpo. Voy a darle, “Título de la página de Emily ”, y volver al navegador, refrescar y arriba aquí en la pestaña, se puede ver que dice la página de Emily. 6. Todo sobre los atributos: Las etiquetas no hacen mucho por su cuenta más que crear estructura. El siguiente paso es darles atributos. Vincular elementos o a etiquetas, utilice atributos para proporcionar la dirección del enlace. Vamos a crear una etiqueta, un stands de ancla por cierto. Después de tu tercer párrafo, solo puedes crear una etiqueta, y primero pondremos el texto que queremos mostrar entre las etiquetas de apertura y cierre, igual que ya hemos visto. Yo quiero enlazar a mi sitio web personal, por lo que voy a simplemente poner mi sitio web. También podrías enlazar a tu Twitter o a un video en YouTube, o a la página web de tu empresa o cualquier cosa que quieras. A continuación, le daremos a nuestra etiqueta y a cada atributo HREF, que le dirá a qué URL enlazar. Dentro de la etiqueta de apertura justo después de la a, pondremos un espacio y luego agregaremos un atributo de HREF, que significa referencia de hipertexto, y lo estableceremos igual a URL a la que desea enlazar, y eso va entre comillas. En mi caso eso es http://emilymaskin.com, y si volvemos a la página y actualizamos, ahí está mi enlace. Las imágenes son otro elemento que se basan en atributos. Necesitan un atributo fuente para decirles qué imagen real mostrar. Adelante y encuentra dos imágenes para incluir en tu página. vas a guardar en esa misma carpeta que creamos en el escritorio. Puedes usar imágenes que ya tengas en tu computadora copiándolas en esa carpeta. O bien puedes encontrar imágenes en línea y descargarlas a esa carpeta. Dale a tus imágenes nombres bastante simples cuando las guardes, como me.jpg, si es una foto tuya, para que puedas referirlas fácilmente más adelante. Ya he agregado el mío. Elegí a fotos de mi gato Lucy. Siéntase libre de pausar el video y volver una vez que esté listo. Ahora agrega una etiqueta de imagen que sea IMG a tu documento. Notarás aquí en la mía que la etiqueta se ve un poco diferente a las otras. No tiene etiqueta de apertura y etiqueta de cierre porque las imágenes no contienen contenido, son el contenido. Ahora le daremos la etiqueta de imagen y el atributo fuente SRC y la estableceremos igual al nombre de su primer archivo de imagen. De nuevo, va entre comillas. Para mí eso es Lucy1.jpg. También le daremos un atributo alt. El Alt se utiliza para proporcionar textos para mostrar si por alguna razón hay un error al cargar la imagen, y también es importante para la accesibilidad, por ejemplo, para los usuarios con lector de pantalla. Le daré alt textos de Mi gato Lucy. Ahora vamos a guardarlo y volver. Ahí está mi imagen. Si el tuyo salió enorme, como lo hizo el mío, no te preocupes por ello por ahora. Eso lo arreglaremos muy pronto. Ahora por tu cuenta, puedes hacer lo mismo por tu segunda imagen, y luego retomaremos en el siguiente video. 7. Introducción a CSS: Utilizamos CSS para diseñar elementos esencialmente diciendo: “Hey navegador, cada vez que veas un elemento que coincide con esta descripción, hazle esto”. Hacemos eso usando este formato. Sé que eso no deja las cosas mucho más claras, así que veamos cómo se ve en la práctica. Por ejemplo, esto hará que todo el texto de todas las etiquetas de párrafo se muestre en rojo. Vamos a probarlo. Añade una etiqueta de estilo dentro de tu etiqueta de cabeza. En su interior se agregará H1, tirantes rizados, color, colon, rojo, punto y coma. Esto pondrá rojo tu rumbo. Colores básicos como; rojo, verde, azul, etcétera se reconocen como palabras. De lo contrario, podemos usar códigos hex como FF0000 que también es rojo. Si volvemos atrás y refrescamos nada cambia, que es lo que esperaríamos. Si vas a HTML color codes.com, puedes jugar con encontrar el tono exacto del color exacto que estás buscando. Algunos otros estilos que puedes dar al texto son el tamaño de fuente, que se mide en píxeles. Demos a esto 60 pixes. Eso es bastante grande. Familia de fuentes, así que eso son cosas como Times New Roman, Arial. personal, me gusta Garamond. Alinear texto, iremos con centro. Veamos cómo se ve eso hasta ahora. Nuestro rumbo ahora es de 60 píxeles, está centrado y está en Garamond. Intentemos poner una frontera alrededor de nuestra cabecera. bordes requieren tres valores, ese es el ancho, el estilo y el color. Aquí hay un ejemplo; borde, dos píxeles, sólido, azul. Ahorra y regresa. Que está un poco apretado en la parte superior y en la inferior. Añadamos algo de espacio dentro de la caja, así que usaremos relleno para hacer eso. El relleno le da 20 pixeles, guarda y vuelve atrás. De acuerdo, ahí hay un poco más de espacio. Eso es bastante bueno. A lo mejor también deberíamos darle a esa caja un color de fondo. Usemos un código hexadecimal esta vez. Simplemente iremos con un tono de gris claro. Sucede que ya conozco este. Pero de nuevo, solo puedes ir al código HTML de color codes.com y encontrar cualquier sombra que puedas desear. Añadamos también un margen debajo de él. Pondremos un 100 píxeles bajo el encabezamiento. Ahora si retrocedemos y refrescamos, podemos ver que tenemos un fondo gris claro y unos 100 píxeles por debajo. Ciertamente no va a ganar ningún premio de diseño. Pero ojalá puedas ver el potencial aquí. Prueba a jugar con algunas de estas propiedades en tus etiquetas H1, P, A y div. 8. Ser específico con las clases: ¿ Tus imágenes salieron enormes como las mías? Podemos usar la propiedad width para reducirlos, así que aquí usaremos la imagen como selector y le daremos un ancho de 300 píxeles, guardarla y volver atrás, y ahora nuestras imágenes son bonitas y pequeñas. ¿ Ves algún problema con este enfoque? ¿ Y si no quisieras que ambas de tus imágenes fueran del mismo tamaño. Podemos usar el atributo de clase para apuntar a uno o más elementos específicos mientras ignoramos los demás, así que vamos a dar a una imagen una clase de pequeña y otra una clase de grande, ahora podemos cambiar el ancho del pequeño para que sea de 300 píxeles agregando pequeño a nuestro selector de imágenes y es importante que no haya un espacio alrededor del punto aquí porque eso hará algo diferente, que está un poco fuera de alcance de esta clase. Ahora podemos volver atrás y refrescar, y vemos que sólo el primero se reduce a 300 píxeles, y el otro está de vuelta a ser enorme. Entonces ahora cambiemos el segundo para que podamos hacer punto de imagen grande, y le daremos un ancho de 500 píxeles, guardar y refrescar, y ahora un poco más grande, pero aun así bastante razonable. Otra cosa que quizá quieras cambiar aquí es el hecho de que las imágenes en este momento se muestran una junto a otra y junto al Enlace Mi Sitio Web en lugar de ser una encima de la siguiente, eso sucede porque los elementos de imagen y elementos de enlace todos mostrar en línea por defecto, y lo que significa display en línea es que solo ocupan tanto espacio como necesiten, e intentaremos encajar el mayor número posible en la misma línea. Lo opuesto a display inline es display block, y eso le dice al elemento que vaya a la siguiente línea aunque todavía haya espacio. Entonces podemos volver a nuestros selectores de imágenes y hacer que ambas imágenes se bloqueen, y luego si nos refrescamos y retrocedemos, ahora es uno encima de otro, ahora puedes seguir adelante y jugar con algunas de las otras propiedades CSS que hemos aprendido, tal vez quieras crear márgenes entre las imágenes, tal vez quieras centrar todo, enloquecerte y divertirte. 9. Repaso: Repasemos lo que hemos aprendido. En primer lugar, aprendimos a configurar un nuevo archivo HTML. A continuación, aprendimos algunas de las etiquetas HTML que puedes usar para agregar contenido a tu página. Aprendimos a dar atributos a los elementos para proporcionarles más información. Después aprendimos algunas propiedades CSS y cómo aplicarlas. Utilizamos el atributo de clase para apuntar a elementos individuales o subconjuntos de elementos. Aprendimos algunas de las muchas propiedades CSS que puedes usar para darle estilo a tu sitio web. Si quieres conocer algunos de los otros, echa un vistazo al enlace en la descripción de la clase o simplemente a las propiedades CSS de Google. Para tu proyecto de clase, te invito a crear una página de perfil sobre ti o sobre otra persona. Utiliza el HTML y CSS que aprendimos hoy para agregar contenido a tu página y darle estilo. Diviértete y ponte creativo. Espero que hayas disfrutado de esta introducción a HTML y CSS, y estoy tan emocionado de ver tus proyectos.