La Guía para Principiantes de HTML y CSS

Aunque puedes encontrar muchas tecnologías diferentes que impulsan nuestros sitios hoy en día, los dos archivos más importantes en toda Internet son HTML y CSS. Sí, si necesitas algo complejo, también necesitarás más tecnologías para acompañarlos. Pero si todo lo que quieres es crear una página web personal simple, HTML y CSS son todo lo que necesitas.

Introducción a lo básico

Esta es una guía para principiantes sobre HTML y CSS que te mostrará cómo crear un sitio simple lo más rápido posible. Los resultados no serán necesariamente “compatibles con los estándares”. Y tendrás que leer un poco por tu cuenta si quieres ajustarlo y expandirlo más. Pero será un sitio y funcionará “como debería” en la mayoría de los navegadores.

Dado que el espacio es limitado, no profundizaremos demasiado en cada aspecto del desarrollo y diseño web. En su lugar, te llevaremos a través de los pasos para pasar de cero a una página web completamente funcional, explicando lo que hace cada cosa en el proceso.

Los dos archivos necesarios

Un sitio moderno consta de muchos archivos, pero dos son los más esenciales: un archivo HTML y un archivo CSS. El archivo HTML define los elementos y la estructura de una página. El archivo CSS define la apariencia de esos elementos.

Ambos son esencialmente archivos de texto típicos, que contienen texto estructurado específicamente. No necesitas ningún tipo especial de programa para crearlos o modificarlos: cualquier editor de texto “simple” servirá. Por “simple”, nos referimos a tu típica aplicación de estilo bloc de notas, no a algo como el editor de LibreOffice o Microsoft Word que podría “enriquecer” el texto de alguna manera.

El primer paso es crear una nueva carpeta en tu escritorio con dos archivos de texto vacíos dentro. Nombra uno de ellos “index.html” y el segundo “style.css.”

Configura tu espacio de trabajo

Ejecuta tu navegador favorito y carga el archivo HTML en él, ya sea seleccionando “Archivo -> Abrir” o arrastrando y soltando el archivo en su ventana.

Abre tanto el archivo HTML como el archivo CSS en tu editor de texto tipo bloc de notas favorito.

Poder ver las tres ventanas al mismo tiempo es la forma más conveniente de trabajar. Si no tienes dos pantallas para distribuirlas, te recomendamos organizar las ventanas como en nuestra imagen a continuación.

“Fija” la ventana de tu navegador en un lado de la pantalla para ocupar la mitad de ella (verticalmente) y coloca las dos ventanas del bloc de notas en el otro lado, una debajo de la otra.

Bloques de construcción

Escribe algo en el bloc de notas con el archivo HTML y guarda los cambios. A continuación, actualiza la ventana de tu navegador presionando F5. Inmediatamente verás el texto que has escrito aparecer en la ventana de tu navegador.

¡Felicidades por haber configurado tu primer sitio! Y no estamos bromeando, ya que los primeros sitios en Internet no diferían mucho en su apariencia en comparación con lo que acabas de crear. Lo importante, en ese entonces, era el contenido en sí.

HTML te permite “marcar lo que cada pieza de contenido es”, utilizando un conjunto específico de “códigos”. Algunos de los más importantes son:

• html: Denota un documento html. Debe estar al inicio de cada archivo html.
• body: Todo el contenido que ves en un navegador está encerrado en esta etiqueta body. Representa el aspecto visual de un documento html.
• p: Párrafo de texto
• img: Imágenes
• a href: Enlaces a direcciones web
• div: Establece una “caja” alrededor de cualquier pieza de contenido que luego puedes “estilizar” con CSS.

Para “definir” una pieza de contenido, generalmente tiene que estar encerrada por el mismo código con una ligera diferenciación al principio y al final. Por ejemplo, un párrafo de texto se define como:

Párrafo de texto estándar

“

” indica que “lo que sigue es un párrafo” y “

Ten en cuenta que hay excepciones: elementos como imágenes (img) y líneas divisorias (hr) no requieren un “código de cierre.”

Cambiar y actualizar

Reemplaza todo en tu archivo HTML con lo siguiente:

  
  
HEADER
  
CONTENT
  
FOOTER
  
  

Actualiza tu navegador (F5), y verás las palabras HEADER, CONTENT y FOOTER aparecer una debajo de la otra. Acabamos de crear tres cajas “div” invisibles y autónomas. Cada una de ellas contiene una de las palabras.

Para poder definir su apariencia a través de CSS, asignamos una palabra clave a cada una, una “identidad” (el “id=name” en el código), correspondiente a su contenido: header, content y footer. Todos los elementos en una página web pueden tener tal alias, configurado como una “clase” o un “id.” Las clases definen alias para elementos que aparecen múltiples veces en la misma página web, como párrafos, enlaces, etc. Los IDs definen alias para elementos que aparecen solo una vez en cada página, como el nombre o logo de un sitio.

Contenido real

Elimina la palabra “HEADER” entre los códigos div – sin cambiar su estructura – y en su lugar, ingresa el nombre que te gustaría para tu sitio.

Haz lo mismo para tu “CONTENT,” pero en lugar de solo ingresar texto, asegúrate también de “marcar” el inicio y el final de cada párrafo como vimos anteriormente. Reemplaza el “CONTENT” con dos o tres párrafos de texto.

Ahora es el momento de hablar también sobre enlaces. Para convertir cualquier frase en tu texto en un enlace, estructúralo como:

TEXT

Puedes copiar y pegar esto y reemplazar “ADDRESS” con “lo que quieres que tu enlace apunte” y el “TEXT” con la frase que aparecerá en tu sitio. Enlazamos una frase en nuestro pie de página a nuestro sitio web con lo siguiente:

Make Tech Easier

Finalmente, reemplaza la palabra “FOOTER” con tu nombre, una pequeña frase indicando quién diseñó o posee el sitio o cualquier otra cosa que desees.

Guarda los cambios y actualiza tu navegador para verlos allí.

Tienes estilo (.CSS)

El primer elemento de cualquier página web es el head. En él, generalmente encontramos código que define la identidad del sitio, su nombre, creador y lenguaje, así como cualquier tecnología – aparte de HTML – utilizada en él. Ahí es donde viven la mayoría de los enlaces a cualquier archivo externo de JavaScript y CSS. Agrega uno a tu sitio insertando lo siguiente en la parte superior de tu archivo HTML, justo después de la etiqueta html:

Para poder estilizar los elementos de una página web con CSS, necesitarás cargar el archivo CSS desde dentro del HTML. Y esto significa incluirlo en tu “head.” Lo siguiente indica que la página HTML “enlazará” a un archivo “stylesheet,” de tipo “text/css,” llamado “style.css”:

Copia y pega nuestro código, tal como lo ves, “dentro” del head – es decir, debajo de “” y encima de “”. Guarda los cambios y dirígete al archivo CSS. Allí, ingresa lo siguiente:

body {}  
#header, #content, #footer{}  
#header, #footer{}  
#header{}  
#content{}  
#footer{}  
img {}

Sitio real

CSS, o Hojas de Estilo en Cascada, son simplemente conjuntos de reglas de visualización que corresponden a elementos específicos de una página web. Con CSS podemos estilizar tanto “dónde” como “cómo” aparecerá todo en una página web.

En el paso anterior introdujimos un conjunto de reglas en blanco para todos los elementos en nuestra página. Ahora, veamos cómo podemos agregar parámetros a ellos que definirán su apariencia.

Comienza con el body, que incluye todo en tu sitio web. Modifícalo de la siguiente manera:

body {  
  width:100%;  
  position:relative;  
  margin:0;  
  padding:0;  
}

Las reglas anteriores indican que queremos que nuestro sitio ocupe todo el ancho de la ventana del navegador (width: 100%), que no queremos que tenga ninguna distancia de los bordes de la ventana del navegador (margin: 0), y no queremos ningún espacio en blanco alrededor de él (padding: 0).

Todas las reglas para un elemento deben estar encerradas entre llaves, y cada regla debe terminar con un “;” como el siguiente:

#Element_ID{  
  RULE 1;  
  RULE 2;  
  RULE 3;  
}

Continúa actualizando tu CSS de “#header, #content, #footer” a lo siguiente:

#header, #content, #footer{  
  float:left;  
  position:relative;  
}

Con esto, estás diciendo que la posición de los tres elementos debe seguir algunas reglas comunes: cada uno debe ser “relativo” al anterior y “seguirlo” ( float: left). No importa su tamaño, forma, apariencia o cualquier otro factor, cada uno de ellos “empujará” al siguiente elemento, y nunca se superpondrán.

Actualiza #header, #footer con lo siguiente para que tu página web se vea más como un sitio real:

#header, #footer{  
  width:100%;  
  height:100px;  
  background:rgba(0,0,0,0.9);  
  color:rgba(255,255,255,0.9);  
  text-align:center;  
  font-size:12px;  
}

Lo anterior define que queremos que tanto el encabezado como el pie de página de nuestro sitio web sean 100% anchos, 100 píxeles de alto, y que el texto mostrado en ellos sea de 3em de tamaño y centrado.

Las reglas de fondo y color especifican, respectivamente, qué color tendrá toda la “caja div” del encabezado y pie de página y el color de cualquier texto contenido en ellos. “RGBA” establece el color basado en el estándar de mezcla de colores Rojo – Verde – Azul. Cada color puede tener un valor de 0 a 255, con combinaciones de diferentes valores de Rojo, Verde y Azul que permiten mostrar cualquier color. El último número corresponde a la transparencia. Así que RGBA(255,0,0,0.5) nos daría un rojo translúcido, mientras que RGBA(50,50,255,1) daría un azul brillante y “sólido”.

Termina enfocándote en el contenido básico del sitio. Define su apariencia como:

#content{  
  width:80%;  
  background:rgba(255,255,255,0.9);  
  color:rgba(0,0,0,0.9);  
  margin:0 10%;  
}

Guarda todos los cambios nuevamente y actualiza la ventana de tu navegador para verlos.

Estilizando imágenes

Para agregar imágenes a tu sitio, necesitas volver al archivo HTML. Allí, “dentro” del contenido pero antes del primer párrafo, ingresa lo siguiente:

Donde “PATH” y “FILE.JPG” son la “ubicación” y el nombre del archivo de cualquier imagen, disponible ya sea en línea o localmente, y “TEXT” una descripción de lo que representa para fines de accesibilidad.

Si intentas guardar y verificar los cambios después de esta adición, encontrarás que tu sitio está deformado. El problema se solucionará una vez que crees reglas CSS sobre cómo deben mostrarse las imágenes en tu sitio web.

Regresa al archivo CSS y declara cómo deseas que todas las imágenes (img) estén alineadas a la izquierda, siguiendo el flujo de otros elementos (float: left y position: relative).

Para no exceder los límites de la página, especifica cómo deseas que su ancho sea el máximo de la propia página (width: 100%). Para evitar que las imágenes toquen tu texto, agrega un margen vertical en la parte superior e inferior. El resultado debería verse así:

img {  
  float:left;  
  position:relative;  
  width:100%;  
  margin:5px 0;  
  padding:0;  
}

Completa agregando otra imagen, esta vez alineada a la izquierda o a la derecha. Como antes, primero debes volver al código HTML y pegar un enlace a tu imagen allí, como vimos anteriormente. La diferencia es que necesitarás agregar una “clase”, un identificador al elemento. Luego especificarás a través de reglas de CSS cómo debe mostrarse y cualquier otro elemento donde se adjunte la misma clase.

Nombramos nuestra clase “alignright” ya que queremos que cualquier objeto, donde se adjunte, se muestre en el lado derecho de la página.

Intenta crear el código tú mismo. Agrega una clase .alignright {} en tu “style.css,” y luego crea reglas que deberían estilizarla. El código CSS debería especificar que queremos que los elementos floten hacia el lado derecho de la página y sean un 46% de ancho (width: 46%). No queremos que las imágenes toquen el texto, así que también deberíamos agregar un espacio de 2% alrededor de ellas, dividido como 1% de margen (la distancia de cualquier otro elemento) y 1% de padding (un “extra espacio en blanco alrededor del elemento”).

Así, nuestras reglas deberían definir que cualquier imagen con una clase .alignright adjunta ocupará el 46% del ancho de la página, más un 1% de margen en cada lado, más un 1% de padding en cada lado. Todo suma hasta el 50% – exactamente la mitad del ancho de la página. El resultado debería verse algo así:

img.alignright{  
  float:right;  
  width:46%;  
  margin:1%;  
  padding:1%;  
}

Siguiente página

Tu primera página web está lista y completamente operativa. Al aprender más sobre HTML y CSS, puedes enriquecer aún más su contenido, agregar nuevos elementos y mejorar su apariencia. Como siguiente paso, intenta copiar y renombrar el archivo HTML, modificando su contenido y enlazando cada nueva página con las otras.

No suena tan difícil, ¿verdad? Bienvenido al desarrollo web: al copiar, modificar y enlazar diferentes páginas a través de enlaces, habrás creado tu primer sitio completo, “adecuado,” de múltiples páginas!

Crédito de la imagen: Pluks kittens, Pluks kittens, IMG_20171124_142629