HTML is a content and structure language for making websites. There are some fixed parts that are the same or similar to most websites. For this lesson, we'll be using this basic structure:
<!DOCTYPE html> <html> <head> <title>First website</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/4.1.1/plugins.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> ...
</body> </html>
All of the elements that we will see later on will go inside <body> ... </body>
in the layout above. We won't write the whole structure for the tutorial later on to keep the code tidy, but you should include it when trying it out.
Elements
Websites are made up of elements that can be put side-by-side or one within another. As an example, the paragraph elements are:
<p>This is a text paragraph with some content</p>
If we wanted to write two paragraphs, we could do it like this:
<p>First paragraph with some text</p>
<p>Second paragraph with some more text</p>
Y si quisiéramos un párrafo con parte del texto en negrita <strong>...</strong>
podríamos hacerlo de la siguiente forma:
<p>Esto es un párrafo <strong>con un texto importante</strong> y uno no tanto</p>
Pruébalo! Escribe el código de la estructura visto al principio de la lección en el archivo index.html de tu proyecto, añade algunos de los ejemplos de párrafo anteriores dentro del body y abre el archivo con el navegador que quieras. Podrás ver el párrafo en el navegador.
Hay muchos tipos de elementos, por ejemplo:
<p>
un párrafo
<strong>
texto en negrita
<em>
texto en cursiva
<a>
un link
<button>
un botón
<img>
una imágen
<div>
una división (se verá más adelante)
... muchos más
Recordad que, aunque aquí sólo se muestre una parte, casi todos los elementos se tienen que cerrar. Los elementos tienen la siguiente estructura:
Por ahora hemos visto lo que es un elemento y que los elementos tienen que tener un tag de apertura, el contenido y un tag de cierre.
Ejercicio: Prueba cómo se ven los ejemplos anteriores, de forma combinada o individualmente, en la página web. Recuerda meterlos dentro del <body>
.
Atributos
En el gráfico anterior hemos visto que también existe algo llamado atributos. Todo lo que se encuentra fuera de los <...>
se puede ver en la página, entonces hace falta alguna forma de añadir información que no se vea, por ejemplo con los links.
Un link tiene un texto y una url, pero sólo se puede ver el texto. La url se guarda en un atributo llamado href
. Para verlo más claramente, así es como se define un link <a>
:
<a href="http://es.libre.university/">Libre University</a>
Si este link lo pusiéramos en una página web, se vería así: Libre University
Otro atributo sería el que indica dónde está guardada una imagen a mostrar. Para las imágenes se utiliza el elemento <img>
. Este no es un elemento normal, ya que no puede tener ni contenido ni tag de cierre. También tiene un atributo llamado src
, cuyo valor indica el origen de la imágen:
<img src="http://www.makersupv.com/images/logo.svg">
Este atributo es el que se usa en para mostrar el logo.Ejercicio: Escribe un elemento de tipo botón (button) que esté dentro de un link (a).
Divisiones <div>
y clases class=""
Ahora que ya sabéis lo básico de HTML, hay un elemento y un atributo que tienen una importancia especial. El elemento es el <div>, que representa divisiones pero que se utiliza cuando te hace falta un elemento y no sabes cuál poner.
Por ejemplo, si quieres poner varias imágenes una al lado de la otra, necesitarás un elemento para contenerlas a todas y separarlas del resto de la página:
<div> <img src="galeria1.jpg">
<img src="galeria2.jpg">
<img src="galeria3.jpg"> </div>
Sin embargo si pusiéramos eso en una página no se verían como esperamos, una al lado de la otra, sino que se verían una encima de la otra y cada una con su tamaño original.
Las clases son un tipo de atributo que también tiene un significado especial. Van en un elemento y definen de qué tipo de elemento se trata. Veámoslo con el ejemplo nombrado anteriormente, una galería de imágenes:
<div class="row"> <img src="galeria1.jpg">
<img src="galeria2.jpg">
<img src="galeria3.jpg"> </div>
Aquí estamos definiendo el div de tipo row. Las clases son muy útiles ya que también nos sirven como referencia para añadir estilos a los elementos. En el caso anterior la librería Picnic CSS define que la clase row
tiene los elementos de dentro espaciados igualmente:
Ejercicio: utiliza el elemento button de Picnic CSS de tres formas diferentes.