Historia del HTML:
El lenguaje HTML fue creado en 1991 por Tim Berners-Lee, conocido científico a quien se le considera padre de la World Wide Web. En su momento inicial en el lenguaje HTML se describen una pequeña cantidad de tags o etiquetas que servían para componer documentos. La mayor innovación en ellos era la posiblidad de crear enlaces entre documentos, de modo que se hacía posible la navegación entre páginas.
HTML 4.0 trajo como novedad la separación entre contenido y presentación. Manteniendo la definición de lo que es el contenido en el lenguaje HTML y la capa de presentación en el lenguaje CSS. Esta versión de HTML se mantuvo durante muchos años y no hubieron cambios en el estándar de HTML, sino más bien en los lenguajes colindantes, como el CSS.
El movimiento HTML5 no solo afectó al propio HTML, sino que abarcó otra serie de lenguajes relacionados como CSS y también Javascript. En lo que respecta a CSS su aporte fundamental fue CSS3, que trajo múltiples mejoras que permitían separar con más facilidad todos los aspectos relacionados con la presentación. En lo que respecta a Javascript HTML 5 trajo la estandarización de las API de Javascript que los navegadores debían respetar, para trabajar de una manera única con los elementos de la página y acceder a funcionalidades modernas como la geolocalización o el trabajo a pantalla completa.
Con HTML se expresa el contenido
A la hora de aprender HTML es importante observar que sirve para expresar el contenido (el qué) y nunca la presentación (el cómo). Es decir, con HTML podemos colocar párrafos, listas, secciones, enlaces, imágenes, todo aquello que forma parte del contenido que va a tener una página web.
Para definir la presentación se usa un lenguaje complementario, llamado CSS. Además, para definir la funcionalidad en el ámbito de la web se usa el lenguaje Javascript.
Etiquetas
La etiqueta es el elemento básico del código HTML. Es un bloque de contenido que puede tener naturaleza diversa, desde un párrafo a una imagen o un vídeo, por ejemplo.
Las etiquetas se engloban entre signos menor y mayor que y tienen un inicio y un cierre. Dentro de estos signos mayor y menor que se coloca el nombre de la etiqueta. Por ejemplo:
<p>Esto es un párrafo, usamos la etiqueta P.</p>La anterior etiqueta <p> sirve para indicar el inicio de un párrafo. Dentro figura su contenido y finalmente tenemos la etiqueta de cierre del párrafo </p>.
Muchas etiquetas tienen atributos para ajustar su comportamiento o definir alguna de sus propiedades. Por ejemplo, la etiqueta <a> para crear enlaces tiene el atributo href, donde se coloca la URL a la que va dirigido un enlace.
<a href="https://desarrolloweb.com">Enlace a DesarrolloWeb</a>Esqueleto de un documento HTML
Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:
<head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
<body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.
Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico.
La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.
Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.
Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:
charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido.
Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.
Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.
Archivos HTML
Los archivos HTML son ficheros de texto plano, que tienen extensión .html.
Como archivos de texto deben estar escritos con un editor de código, como los que generalmente se usan para programación. Por tanto, los archivos HTML no se deben escribir con programas de texto enriquecido como Word.
La recomendación es que estos archivos se guarden con codificación UTF-8, que es el formato habitual de los editores de texto para programación. Este punto es fundamental en Windows ya que editores de texto plano como el "Bloc de Notas" generalmente usan otros juegos de caracteres.
Los archivos HTML se pueden almacenar en cualquier carpeta del ordenador y para abrir los generalmente es suficiente con hacer doble clic sobre ellos, con ello el ordenador los abrirá con el navegador predeterminado configurado en el equipo.
Varios archivos HTML componen un sitio web
Varios archivos HTML enlazados entre sí es lo que llamamos un sitio web. generalmente se encontrarán todos almacenados en la misma carpeta o en carpetas dependientes de un directorio principal.
El archivo index.html de la carpeta principal es el documento raíz del sitio web, es decir, la portada o "home". Al index.html también se le llama documento por defecto o documento predeterminado y es el que se carga en el acceso a una carpeta, si no se indica ningún otro nombre de archivo HTML al que se pretenda acceder.
CSS
CSS viene de las iniciales de "Cascading Style Sheets", que traducimos por "Hojas de estilo en cascada". Es el segundo lenguaje más esencial para crear páginas web. El primero sería HTML, con el que se define el contenido de la página. El segundo CSS, con el que se define la parte de la presentación, es decir, cómo deben mostrarse los elementos de la página, su posición, forma, espaciados, colores y en resumen, toda la parte estética.
CSS no tiene ningún sentido sin HTML, igual que a día de hoy HTML sin CSS también resultaría imposible, ya que la web ha evolucionado de tal forma que su aspecto es fundamental y el CSS es la única vía para conseguir personalizarlo.
Partes principales del CSS
Para desarrollar con CSS tenemos que trabajar con una serie de elementos, mediante los cuales se declaran los estilos, básicamente éstos son los más importantes:
Selectores, mediante los cuales podemos especificar qué elementos de la página nos estamos refiriendo
Atributos de estilo para definir qué cosas queremos estilizar sobre los selectores indicados
Una serie de valores, que indican qué estilo se debe aplicar a cada atributo sobre cada selector. Los valores se expresan con unidades CSS, que sirven para cuantificar los valores (píxeles, puntos...)
Aprender CSS no es difícil. Básicamente se trata de entender esos componentes principales y conocer las posibles variantes que existen para conseguir los estilos que necesitamos. Por supuesto, también tiene una buena parte de creatividad, pero la mayoría de las veces el diseño lo entregan previamente antes de desarrollar una web, por lo que en realidad lo que más requiere es un conocimiento técnico.
Cuando se usa profesionalmente CSS se deben tener en cuenta muchos detalles y buenas prácticas, como la organización del código, la reutilización, la optimización, etc. que básicamente están tratados en los manuales y artículos que encontrarás en DesarrolloWeb.
Separar el código CSS del código HTML
El enfoque de CSS es servir para definir la capa de presentación, es decir, la parte relacionada con el aspecto. Es algo que cualquier estudiante suele tener claro cuando está aprendiendo CSS, ya que al enseñar HTML probablemente se haya insistido, pero que siempre conviene reforzar.
En el código HTML colocamos el contenido, es decir, qué debe visualizarse, mientras que con CSS definimos la presentación, es decir, cómo debe visualizarse. Esto nos lleva a una serie de usos de CSS que debemos de respetar como buenas prácticas.
Asociar un CSS a una página web
Para que una página de contenido gane un aspecto determinado, necesitaremos un medio para cargar o asociar el CSS dentro de un HTML. Esta operación se puede realizar a varios niveles, pero lo más habitual es enlazar el CSS por medio de la etiqueta <link>
<link rel="stylesheet" href="/css/app.css">Esa etiqueta generalmente se pone en el <head>, para que el CSS se cargue desde el inicio y permite que la página HTML se presente con el estilo definido en el archivo CSS enlazado.
Generalmente esa misma etiqueta se colocará en todas las páginas del sitio web, con lo que se caragará el mismo archivo CSS con la misma declaración de estilos. Esto tendrá dos efectos importantes:
Permite que todo el contenido de la web tenga un aspecto homogéneo, definido por medio de ese archivo CSS centralizado.
Permite que contar con un sitio más optimizado ya se reutilizam las mismas declaraciones. Además generalmente el archivo .css se cacheará en el navegador, por lo que la segunda o siguientes páginas del sitio el archivo CSS no se necesita descargar de nuevo el archivo ahorrando transferencia de datos y mejorando la velocidad de carga.
1. SET UP 🖥
Descargamos Visual Studio Code https://code.visualstudio.com/download
Abre Visual Studio Code Se te debe abrir una pantalla negra con generales escrita solo la cerremos.
Crea un folder con el nombre_de_tu_website en tu Documentos. Arrastra este folder en tu ventana de Visual Studio Code.
En la navegación Visual Studio Code.
File Click derecho en el folder nombre_de_tu_website.
Guárdalo como index.html con Enter o Cmd + S
Haz lo mismo y crea otro documento llamado style.css
Luego, en nombre_de_tu_website, crea un "Nuevo Folder" || New Folder" llamado imagenes
Finalmente, haz doble click en tu documento index.html en el escritorio para abrirlo con Chrome/Firefox
2. HTML 🏠
Vamos a crear la estructura de tu sitio. De esto dependerá como lucirá el resto del diseño de tu página así que tómate tu tiempo en decidir qué va donde, incluso dibujandolo en una página de papel.
Primero vamos a empezar a programar el HTML en tu index.html.
Una vez termines la estructura, buscaremos las imágenes que agregaremos al sitio.
Si quieres agregar tus propios GIFs, puedes seguir estos pasos:
Accede a Giphy.
Una vez encuentras el GIF que quieres, haz click derecho en la imágen y guárdala dentro de nombre_de_tu_website/images
Para este momento, te debe salir el GIF detro de tu folder imagenes en Visual Studio Code
Una vez la encuentras, utiliza su nombre para referirte al GIF en el atributo src de tu <img> tag.
Para encontrar íconos puedes acceder aquí: IconStore o The Noun Project.
También puedes agregar imágenes tuyas que tengas en tu computadora.
Para hacer eso, solo debes asegurarte de tener la imágen que quieres guardada bajo tu folder nombre_de_tu_website/imagenes
3. CSS [FONTS & COLORES] 💅🏼
Conecta el stylesheet style.css en la sección <head> de tu index.html
Luego, copia + pega el código de CSS que encuentras aquí en tu style.css y hazlo tuyo! 🔥
Extra 😏
Para buscar tipos de letra: Google Fonts
Para buscar inspiración para parejas de fonts: FontPair
Para buscar colores & color palettes: Coolors o Color Hunt
Para buscar colores en otros websites, puedes instalar: Colorzilla Chrome plugin
4. DALE NOMBRES + VIDA A TUS ELEMENTOS GRACIAS A LOS <DIV>S 🙆🏻♀️
Primero agrupa las distintas secciones con <div>s
Agrégale el atributo id a tu logo, banner o footer- por ej: <div id="banner"> y <div id="footer">
Recuerda, id es para elementos que sabes que NO vas a repetir.
Si estas pasando problemas con centrar tu texto, este artículo te puede ayudar con eso 😉
Nombra el resto de tus <div>s con classes- por ej: <div class="card">
Una vez tengas terminada la estructura en tu index.html, agregale tu diseño en tu style.css. Aquí te paso par de ideas...
5. BOOTSTRAP ⚡️
Conecta Bootstrap en el <head> de tu index.html antes de conectarlo con tu style.css
GAME TIME 😈: juega agregando class="btn btn-info" (a tus botones o links) y class="list-inline" (a tus <ul>) para darle estilo rápidamente a tus componentes.
Te recomiendo empezar leyendo un poco la documentación de Bootstrap aquí. Para una lista completa de todas las clases que puedes usar, aquí hay un cheetsheet para que veas todas las locuritas más que puedes hacer 🙌🏼
7. GRIDS 📱 [AVANZADO]
Juega con agregar otro set de cards a tu página. Estas irán dentro del Bootstrap Grid en vez de dentro de un <ul> <li> [..] </li> </ul> como lo hicimos anteriormente.. Esto ayudará a que tu contenido sea responsivo para cualquier dispositivo.
El Bootstrap Grid luce más o menos así: (aquí te dejo un tutorial más a profundidad del Bootstrap Grid por si te interesa...)
Quieres seguir aprendiendo? ⚡️ Te recomiendo:
Cuando estes navegando el internet de ahora en adelante, haz click derecho para inspeccionar el código detrás del diseño que te gustó. Como cualquier lenguage, entre más lo lees, más fácil será escribirlo después.
Intenta agregar más funcionalidades a tu página.
Trata de personalizarla lo más que puedas y veras con los pequeños obstáculos con los que te enfrentarás.
El mejor consejo que te puedo dar: 💎. Par de ideas 💡: Crea links para otras páginas dentro de tu mismo folder -> tutorial aquí
Juega con diferentes herramientas para hacer layouts:
Bootstrap Grid: buena documentación aquí
Flexbox: tutorial aquí
CSS Grid: tutorial aquí
Publica tu sitio web online en GitHub Pages-> sigue este tutorial de YouTube para deploy por medio del Terminal. El Terminal es esa pantalla que normalmente asimilamos con la pantalla de los hackers.
Si tienes una computadora Apple, tienes acceso a ese portal automaticamente, por si quieres geekiar un rato y hacerlo por medio de lo que llamamos el 'Command Line' 😛.
Si tienes Windows, lastimosamente se requiere un setup más extenso para hacerlo 😕. Podemos hablar de eso a más profundidad luego, si te interesa..
Sigue jugando con los componentes de Bootstrap --> forms, navbars, button groups, etc.. Usar sus componentes te ayudará a leer más CSS y te ayudará a avanzar en tu diseño más rápido entre más te vayas conociendo las clases disponibles.
Lee sobre diseño web [User Experience Design (UX), UI Design (UI), Components] para saber sobre tendencias web en diseño. Para esto, los newsletters de dev.to y Medium son muy buenos y altamente personalizables.
⚡Nuestro Reto de la Semana:
Crea tu pagina web en html.
Convina letras, colores y estilos.
Agrega imágenes de diferentes formatos o videos.
Utiliza toda tu creativida, el tema es libre.
Preparate para compartir en el siguiente taller.
Comentários