HTML y CSS

¿Que es HTML y CSS?
HTML es un lenguaje de marcado que se usa para maquetar las paginas web que visitamos todos los días desde nuestra computadora, se usa para definir la estructura básica de una pagina, como los títulos, párrafos, tablas, listas, etc. CSS es un lenguaje (por así decirlo) cuya función es mejorar la presentación de una estructura hecha en HTML, con el se puede aplicar estilos de colores, margenes, tamaños de las fuentes, bordes, etc. En conjunto forman una pagina web que puede ser interpretada desde cualquier navegador como lo son Firefox, Chrome, Opera o Safari.

HTML (Hyper Text Markup Language) se compone por etiquetas. Una etiqueta es una palabra encerrada entre los caracteres "<" y ">" designada para cumplir con una función dentro de la estructura de la pagina. Por mencionar un ejemplo, la etiqueta "<p> " seguida de un texto sirve para introducir un parrafo visible para cualquier visitante de nuestra pagina. Algunas etiquetas necesitan a la par de una etiqueta de cierre que simplemente contiene un slash (/) antes de la palabra clave, esto es necesario ya que existe la anidacion de etiquetas en la estructura, para cerrar nuestro parrafo anterior tendriamos que poner al final una etiqueta como esta "</p>".

Toda pagina web se compone de dos secciones principales que son el encabezado con la etiqueta "<head>" y un cuerpo "<body>". En el encabezado se encuentra información que no es visible en pantalla como son los meta-datos, títulos y referencias. En la parte perteneciente al cuerpo van los elementos visibles al usuario y con los que interactúa, como lo es el texto, los enlaces, imágenes, etc.

Con  CSS (Cascading Style Sheets) se puede dar formato a los elementos HTML, la sintaxis de este cambia con respecto a como se escribe el primero en un documento, este no se maneja a base de etiquetas si no a selectores o reglas para definir a que parte de la estructura nos estamos refiriendo y como queremos que sea presentado en pantalla. Siguiendo con el ejemplo de nuestro párrafo, si queremos darle algo de presentación necesitaríamos escribir algo como esto:
p {
color: blue;
}
Esto lograría que nuestro párrafo anteriormente escrito tome un color azul en pantalla.

Los selectores y el buen uso de ellos son una de las partes mas importantes y mas complejas al crear un sitio web. Puedes comprobar como se componen los sitios que te gustan y que mas visitas presionando la tecla F12 en tu navegador. A continuación dejo un enlace para descargar un plantilla básica con un encabezado y un cuerpo que puede ser interpretada en cualquier navegador y lista para probar.

Plantilla HTML

Cursos en linea gratuitos para aprender HTML y CSS
Codecademy / HTML y CSS español america latina

Comentarios

Entradas más populares de este blog

Resistencias

Guía de introducción de XC8