History: First website

Revision made 3 years ago by Francisco Presencia. Go to the last revision.

HTML is a con­tent and struc­ture lan­guage for mak­ing web­sites. There are some fixed parts that are the same or similar to most web­sites. For this les­son, we'll be using this basic struc­ture:

<!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 ele­ments that we will see later on will go in­side <body> ... </body> in the layout above. We won't write the whole struc­ture for the tutori­al later on to keep the code tidy, but you should in­clude it when try­ing it out.

Elemen­ts

Web­sites are made up of ele­ments that can be put side-by-side or one with­in an­oth­er. As an ex­am­ple, the para­graph ele­ments are:

<p>This is a text paragraph with some content</p>

If we wan­ted to write two para­graphs, we could do it like this:

<p>First paragraph with some text</p>
<p>Second paragraph with some more text</p>

Also, if we wanted a paragraph with some bold text <strong> ... </strong> we could do it like this:

<p>A paragraph with <strong>important text</strong> and some more</p>

There are many kind of elements. Let's see just a few:

<p> a paragraph

<strong> bold text

<em> italic text

<a> a link

<button> a button

<img> an image

<div> a di­vision

... many more

Remember that, even though we only show a part above, most of the elements need to be closed. HTML elements have the following structure:

So far we have seen what are HTML elements and that they have an opening tag, some content and a closing tag. The content might be just text or another HTML element.

Exercise 1: create a shopping list with the items you want to buy. For this, you'll have to Google how to create a list of items. Googling correctly is an everyday skill that every programmer should know.

Exercise 2: create a small blog entry with what you did yesterday, including a title (<h1>) and some paragraphs (<p>) with bold text (<strong>), italic text (<em>) and links (<a>) if you want to challenge yourself (explained later).

Attributes

In the schema of the elements we've seen there's something called attributes. Everything outside <...> can be seen on the page, so we need a way to add extra information like with the links.

A link has some text and a url to go, but you can only see the text. The url is saved in an attribute called href. To see it better, this is how you can define a link <a>:

<a href="http://en.libre.university/">Libre University</a>

If we open this with a browser, it would look this way: Libre Uni­vers­ity

Another attribute could be the one used for images. To add an image to a website we use the elemen­t <img>. This is not a normal element, since it doesn't have content and therefore it doesn't have closing tag. To add the image, we'll use the at­tribute called src:

<img src="http://www.makersupv.com/images/logo.svg">
This attribute is the one used in Makers UPV to display the logo:

Mak­ers UPV

Exercise: add a button with the text "Google" that takes you to Google when clicked.

Di­visiones <div> y clases class=""

Ahora que ya sabéis lo básico de HTML, hay un elemen­to y un at­ributo que tien­en una im­por­tancia es­peci­al. El elemen­to es el <div>, que re­presen­ta di­visiones pero que se utiliza cuan­do te hace falta un elemen­to y no sabes cuál poner.

Por ejemplo, si quieres poner varias imágenes una al lado de la otra, necesitarás un elemen­to para con­tener­las a todas y separar­las del resto de la página:

<div>
 <img src="galeria1.jpg">
 <img src="galeria2.jpg">
 <img src="galeria3.jpg">
</div>

Sin em­bar­go si pusiéramos eso en una página no se verían como es­peramos, una al lado de la otra, sino que se verían una en­cima de la otra y cada una con su tamaño origin­al.

Las clases son un tipo de at­ributo que también tiene un sig­nificado es­peci­al. Van en un elemen­to y de­finen de qué tipo de elemen­to se trata. Veámoslo con el ejemplo nombrado an­terior­mente, una galería de imágenes:

<div class="row">
 <img src="galeria1.jpg">
 <img src="galeria2.jpg">
 <img src="galeria3.jpg">
</div>

Aquí es­tamos de­finien­do el div de tipo row. Las clases son muy útiles ya que también nos sirv­en como re­feren­cia para añadir es­tilos a los elemen­tos. En el caso an­terior la li­brería Pic­nic CSS de­fine que la clase row tiene los elemen­tos de de­ntro es­paciados igual­mente:

Ejemplo [jsfiddle]

Ejer­cicio: utiliza el elemen­to but­ton de Pic­nic CSS de tres for­mas dif­eren­tes.