Introducción a HTML&CSS

  octubre 07, 2017

Introducción a HTML&CSS

En esta entrada del blog voy a hacer una breve introducción al HTML&CSS con la intención de aclarar qué son y para qué se utilizan. También vamos a ver cómo se estructura cada uno para que puedas comenzar a practicar si es tu objetivo.

Si te has propuesto iniciarte en este campo, yo puedo darte las herramientas necesarias y guiarte en tu aprendizaje, pero si realmente quieres aprender, la clave es practicar, practicar y practicar. ¡Así que prepárate para dedicarle tiempo y esfuerzo!


¿Qué son HTML y CSS?

HTML (HyperText Markup Language, o Lenguaje de Marcado de Hipertexto) y CSS (Cascading Stylesheets, u Hojas de Estilo en Cascada) son dos lenguajes utilizados para el desarrollo de páginas web.

HTML es el lenguaje que define el contenido de las páginas web, creando su estructura con párrafos, columnas, imágenes, listas... Y el CSS define la apariencia de esa estructura web.


¿Qué herramientas necesitas?

Para comenzar tienes que descargar un buen editor de texto. Puedes utilizar el Bloc de notas, pero no es recomendable porque es más difícil identificar los elementos. Para comenzar, te recomiendo que descargues Notepad++.

Notepad++

También necesitarás tener varios navegadores instalados, dado que vas a tener que comprobar lo que vayas haciendo en todos, porque cada uno interpreta el código de manera diferente.

Puedes descargar a continuación los que no tengas ya instalados:

Internet Explorer 9
Microsoft Edge
Mozilla Firefox
Google Chrome
Safari (para Windows)
Opera

Una vez que tengas todo instalado en tu equipo ya estarás preparado para crear y darle forma a tu primer documento HTML.


¿Cómo se crea un documento HTML?

Para crear un documento HTML tendrás que abrir el editor de textos que acabas de instalar (Notepad++), que por defecto abre una nueva hoja para insertar código. Lo único que tendrás que hacer es escribir tu código.

Notepad++ | InterfazNotepad++ | Interfaz

Una vez que hayas escrito el código sólo tienes que guardar el documento en el formato adecuado. Para ello, dirígete al menú y haz clic sobre "Archivo > Gruadar como...".

Se abrirá una ventana para elegir dónde quieres guardar el documento, y darle nombre y formato.

Notepad++ | Guardar como... HTMLNotepad++ | Guardar como... HTML

Selecciona el formato "Hyper Text Markup Language file (*.html;*.htm;*.shtml;*.shtm;*.xhtml;*.xht;*.hta)" y pulsa en "Guardar".


¿Cómo se estructura el HTML?

Las páginas HTML se dividen en dos partes: la cabecera (head) y el cuerpo (body).

Estructura de un HTMLEstructura de un HTML


  • <html></html> :
    Indica el comienzo y el final del documento. Todo lo que esté fuera de estas etiquetas será ignorado.
  • <head></head> :
    Delimita la cabecera del documento. Contiene información del documento, como el título o el idioma de la página. Los contenidos de esta etiqueta no son visibles por el usuario, con la excepción de la etiqueta <titulo>, que se mostrará como título de la ventana del navegador.
  • <body></body> :
    Delimita el cuerpo del documento. Recoge todos los contenidos que se muestran al usuario: párrafos, imágenes, tablas...

La estructura final quedaría de esta manera:

Notepad++ | Estructura de un HTMLNotepad++ | Estructura de un HTML


En el navegador lo verás así:

Estructura de un HTML en el navegadorEstructura de un HTML en el navegador



¿Cómo se crea un documento CSS?

Para crear un documento CSS se utiliza también el editor de textos Notepad++.

Hay dos maneras de aplicar CSS a un documento HTML. La primera es escribiéndolo directamente en el mismo documento HTML, dentro de la etiqueta <head></head> utilizando la etiqueta <style></style>, o utilizando un documento .css independiente y enlazándolo en el <head></head> del documento HTML.

Código CSS dentro de documento HTMLCódigo CSS dentro de documento HTML

Documento CSS enlazadoDocumento CSS enlazado


Lo mejor es utilizar un documento independiente de CSS porque de esta manera podrás aplicar la misma hoja de estilos a varios documentos HTML, y todos los cambios que apliques en ella se harán visibles en todos los HTMLs que la tengan enlazada.

Para crearla abre un documento nuevo desde Documento nuevo Notepad++ del menú de Notepad++ y escribe tu código.

Una vez que hayas escrito el código sólo tienes que guardar el documento en el formato adecuado. Para ello, dirígete al menú y haz clic sobre "Archivo > Gruadar como...".

Se abrirá una ventana para elegir dónde quieres guardar el documento, y darle nombre y formato. En este caso para el nombre puedes utilizar "style", que es uno de los nombres estándares que se le suelen dar. Recuérdalo, porque lo necesitarás para enlazarlo posteriormente.

Notepadd | Guardar como... CSSNotepad++ | Guardar como... CSS

Selecciona el formato "Cascade Style Sheets file (*.css)" y pulsa en "Guardar".


¿Cómo se estructura el CSS?

CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos. Son los siguientes:

Estructura CSSEstructura CSS


  • Regla:
    Es cada uno de los estilos que componen la hoja CSS. Cada regla está compuesta por "selectores", y la declaración.
  • Selector:
    Indica el elemento al que le vamos a aplicar el estilo CSS.
  • Declaración:
    Especifica los estilos que se aplican a los elementos. Puede contener una o más propiedades CSS.
  • Propiedad:
    Es la característica que modifica: color, tamaño, color de fondo...
  • Valor:
    Establece el nuevo valor de la caracterísitca modificada.

La estructura final quedaría de esta manera:

Estructura de un documento CSSEstructura de un documento CSS


Una vez que tengas tu código CSS correctamente escrito y guardado, te toca enlazarlo con tu documento HTML para que los estilos se apliquen. Lo harás de la siguiente manera:

  • Entre las etiquetas <head></head> escribe lo siguiente: <link rel="stylesheet" href="style.css">

    Dentro del "href" debes escribir el nombre de tu documento CSS seguido de la extensión (.css).

Cuando acabes guarda tus documentos (los dos en la misma carpeta) y pruébalos en el navegador haciendo doble clic sobre el documento HTML, desde la carpeta, o desde el menú de Notepad++, seleccionando la opción "Ejecutar" y haciendo clic sobre el navegador en el que lo quieras visualizar.


En el navegador lo verás así:

CSS aplicado a un HTMLCSS aplicado a un HTML


Hasta ahora, lo único que has hecho es aplicar el color amarillo al <body> del documento HTML, pero con tiempo y dedicación serás capaz de crear estructuras y estilos mucho más complejos.


Ahora que ya sabes el aspecto que debe tener un documento HTML ya puedes crear el tuyo. ¡Adelante!

Puedes contarme en los comentarios si esta información te ha resultado útil, y si tienes cualquier duda estaré encantada de ayudarte.

Verónica Mercader Vera | Diseñadora Gráfica & Web

Verónica Mercader Vera

Diseñadora Gráfica & Web

Amante de los detalles, responsable y muy cuidadosa en mi trabajo, me gusta dar lo mejor de mí y no descanso hasta conseguirlo. ¡La perfección es solo el principio!