Fundamentos de HTML y CSS
HTML y CSS son las tecnologías base para crear sitios web, permiten definir el formato y el diseño de cada elemento y como debe mostrarse en cada dispositivo
HTML y CSS son las tecnologías base para crear sitios web, permiten definir el formato y el diseño de
cada elemento y como debe mostrarse en cada dispositivo.
El lenguaje HTML se basa en poner marcas de texto que sirven para dar formato al contenido, insertar
elementos
multimedia y agregar enlaces a otras páginas, estas marcas se conocen como etiquetas o tags.
Por otro lado el lenguaje CSS se basa en escribir reglas que el navegador leerá para asignarle
apariencia del
contenido.
Preparando el espacio de trabajo
Para empezar a trabajar con estas dos tecnologías solo hacen falta dos aplicaciones; un navegador web
y un editor de
código.
Como navegador web podemos usar cualquier navegador moderno de nuestra preferencia.
Como editor de código se recomienda usar Visual Studio Code, que es un sofware reciente open source
con gran apoyo de
la comunidad y que cuenta con una gran variedad de complementos instalables para apoyarnos en todo
tipo de
proyectos.
Para descargar este software visitar su sitio web sitio oficial: https://code.visualstudio.com
Introducción a las etiquetas HTML
El lenguaje de marcado de hypertexto HTML (Hyper Text Markup Language por sus siglas en ingles)
define una gran lista de etiquetas, unas son para dar estructura al documento y otras son para dar
formato al contenido de este.
A continuación explicaremos como se componen y usan las etiquetas HTML.
Cada etiqueta tiene un nombre que puede ser una palabra o una letra y debe estar encerrada entre los
símbolos
«menor que <» y «mayor que >».
<etiqueta>
Algunas etiquetas deben llevar atributos para insertar mas información sobre lo que esta debe hacer o
como se debe
comportar.
Los atributos tienen un nombre y valor y se pueden asignar todos los que sean requeridos.
Los atributos se escriben poniendo el nombre del atributo, un símbolo «igual que =» y el valor del
atributo entre
comillas.
Cada atributo se escribe dentro de la etiqueta poniendo un espacio después del nombre de la etiqueta
o del
ultimo atributo añadido.
<etiqueta atributo="valor">
<etiqueta atributo1="valor1" atributo2="valor2" atributo3="valor3">Algunas etiquetas sirven para delimitar contenido, por lo que se debe repetir la etiqueta para
indicar el fin del
contenido delimitado.
Esto es lo que se conoce como etiqueta de cierre y para indicarla se debe usar el símbolo
«diagonal /» después del símbolo «menor que <«.
<etiqueta>Contenido a delimitar</etiqueta>Creando nuestro primer documento HTML
Antes de empezar es recomendable crear un directorio para este y otros proyectos, para así mantener
todo ordenado y evitar inconvenientes.
En este caso podemos crear una
carpeta en nuestro escritorio o en nuestros documentos con un nombre como «proyecto1».
Una vez creado nuestro directorio de trabajo es necesario añadirlo al editor de código (Visual Studio
Code) desde el menú de opciones (o presionando
«CTRL+O»).
Ahora procederemos a crear un archivo nuevo («CTRL+N») y guardarlo con el nombre «index.html».
Estructura básica de un documento HTML
Todos los documentos HTML requieren de algunas etiquetas base, estas etiquetas se repetirán en
absolutamente todas las paginas que hagamos;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagina Web</title>
</head>
<body>
</body>
</html>
- La etiqueta <!doctype html> sirve para indicarle
al navegador web que estamos usando HTML 5, la ultima versión de esta tecnología. - La etiqueta <html> delimita todo el contenido de
nuestro documento y dentro de ella deben ir todas las demas etiquetas que vayamos a usar. - La etiqueta <head> sirve para definir datos
invisibles al usuario pero que el navegador y otros programas pueden entender y procesar, como
metadatos informativos. - La etiqueta <body> es donde va todo el contenido
visible de la página - La etiqueta <title> establece el titulo de la
pagina y se muestra en la pestaña (esta debe ir dentro de head)
Dentro del head podemos meter muchos tipos de metadatos usando la etiqueta <meta>, pero los esenciales para el funcionamiento
correcto son los siguientes;
- La metaetiqueta charset con el valor UTF-8 nos permite
usar caracteres de nuestro idioma de forma que aunque alguien de otra parte del mundo acceda a
nuestro sitio pueda ver de forma correcta estos símbolos (ñ, ü, áéíóú). - La metaetiqueta viewport establece como se debe
representar nuestro sitio en dispositivos móviles.
Añadiendo contenido a nuestra página
Las paginas web se componen básicamente de cajas que envuelven el contenido y lo presentan de la
forma requerida.
En
esta guía estaremos usando la estructura de cajas siguiente, donde
tendremos una caja para el logotipo, una para el menú de navegación, una
para el contenido y finalmente una para el pie de página.
Para poder añadir el texto a nuestro documento web usaremos la etiqueta «<p>» para separar el
contenido en párrafos y en cada página pondremos un encabezado con la etiqueta «<h1>».
Podemos usar tantas etiquetas «<p>» como queramos pero solo debemos usar una etiqueta
«<h1>» por página.
Nuestra pagina web quedara de la siguiente manera:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página web</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Vamos a poner algo de texto de relleno para simular algunos párrafos del contenido de mi primer documento HTML. Esto es un párrafo que debe ser largo y abarcar todo el horizontal de la pagina. Ahora voy a escribir mas texto de relleno.</p>
<p>Vamos a poner algo de texto de relleno para simular algunos párrafos del contenido de mi primer documento HTML. Esto es un párrafo que debe ser largo y abarcar todo el horizontal de la pagina. Ahora voy a escribir mas texto de relleno.</p>
<p>Vamos a poner algo de texto de relleno para simular algunos párrafos del contenido de mi primer documento HTML. Esto es un párrafo que debe ser largo y abarcar todo el horizontal de la pagina. Ahora voy a escribir mas texto de relleno.</p>
</body>
</html>
Guardando nuestro archivo (CTRL+s) y abriéndolo en nuestro navegador tendíamos nuestra pagina de
la siguiente manera:
