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">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <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 wan­ted a para­graph with some bold text <strong> ... </strong> we could do it like this:

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

All websites are made of elements inside other elements. You can see a visualization of it in Libre University here:

Separating each part of the website into blocks, and each block into smaller blocks helps us giving styles to the elements, something that we will see later. There are many kind of ele­ments. Let's see just a few:

<p> a para­graph

<strong> bold text

<em> italic text

<a> a link

<button> a but­ton

<img> an image

<div> a di­vision

... many more

Re­memb­er that, even though we only show a part above, most of the ele­ments need to be closed. HTML ele­ments have the fol­low­ing struc­ture:

So far we have seen what are HTML ele­ments and that they have an op­en­ing tag, some con­tent and a clos­ing tag. The con­tent might be just text or an­oth­er HTML ele­ment.

Ex­erc­ise 1: create a shopp­ing list with the items you want to buy. For this, you'll have to Goog­le how to create a list of items. Googl­ing cor­rect­ly is an every­day skill that every pro­gramm­er should know.

Ex­erc­ise 2: create a small blog entry with what you did yes­terday, in­clud­ing a title (<h1>) and some para­graphs (<p>) with bold text (<strong>), italic text (<em>) and links (<a>) if you want to chal­lenge your­self (ex­plained later).

Attributes

In the schema of the ele­ments we've seen there's some­th­ing cal­led attributes. Every­th­ing out­side <...> can be seen on the page, so we need a way to add extra in­for­ma­tion 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 cal­led href. To see it bet­t­er, this is how you can de­fine a link <a>:

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

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

An­oth­er attribute could be the one used for im­ages. To add an image to a web­site we use the elemen­t <img>. This is not a norm­al ele­ment, since it doesn't have con­tent and therefore it doesn't have clos­ing tag. To add the image, we'll use the at­tribute cal­led src:

<img src="http://www.makersupv.com/images/logo.svg">

This attribute is the one used in Mak­ers UPV to dis­play the logo.

Ex­erc­ise: add a but­ton with the text "Goog­le" that takes you to Goog­le when clic­ked.

Di­visions <div> and clas­ses class=""

Now that you know the basics of HTML, there's an ele­ment and attribute with speci­al mean­ing. The ele­ment is <div> , which re­present di­vis­ions but it's nor­mal­ly used when there's no bet­t­er ele­ment avail­able. For in­stan­ce, if you want to set up sever­al im­ages be­side each other, you'll pro­bab­ly need an ele­ment to con­tain them all:

<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.