History: First website in HTML

Revision made 7 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/6.2.5/plugins.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    ...

    <script src="javascript.js"></script>
  </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. Just replace those "..." for the code seen here.

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 web­sites are made of ele­ments in­side other ele­ments. You can see a visualiza­tion of it in Libre Uni­vers­ity here:

Separat­ing each part of the web­site into blocks, and each block into small­er blocks helps us giv­ing styles to the ele­ments, some­th­ing that we will see later. There are many kind of ele­ments. Let's see just a few (some of the most common ones):

<h1> ... </h1> , <h2> ... </h2> , ... headers for text (titles)

<p> ... </p> a para­graph

<strong> ... </strong> bold text

<em> ... </em> italic text

<a> ... </a> a link

<button> ... </button> a but­ton

<img> an image (note no clos­ing tag)

<div> ... </div> a di­vision

... many more

Re­memb­er that most of the ele­ments need to be closed (but not all). HTML ele­ments have the fol­low­ing struc­ture:

Let's see all of this with a small example. Let's say that we want to write a blog article. Copy/paste this in the template we saw initially to try it out:

<h1>Libre University</h1>
<p>This is a page to <strong>learn and teach</strong>. You can find many topics as:</p>
<ol>
  <li>Web Programming</li>
  <li>Web Programming</li>
  <li>Web Programming</li>
</ol>

<p><em>Ooops...</em> so far we only have web programming. Sorry!</p>

<p>Visit <a href="http://en.libre.university/">Libre University</a> again tomorrow</p>

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, an­oth­er HTML ele­ment or both. We can and should put ele­ments in­side other ele­ments.

Ex­erc­ise 1: create your own 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).

Ex­erc­ise 2: create a shopp­ing list with the items you want to buy. For this, you might 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.

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="https://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="/logo.svg" />

This attribute is the one used in Mak­ers UPV to display 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="gallery1.jpg">
  <img src="gallery2.jpg">
  <img src="gallery3.jpg">
</div>

However, if we added this to a website it wouldn't look as expected. They would be one on the top of another, and each one with their original size.

Classes are a special attribute with a special meaning. They go into an element and define what element they are. Let's see it with the previous example, an image gallery:

<div class="flex">
  <div><img src="gallery1.jpg"></div>
  <div><img src="gallery2.jpg"></div>
  <div><img src="gallery3.jpg"></div>
</div>

Here we de­fine the type of row. Clas­ses are rea­l­ly use­ful as we'll use them as a re­fer­ence to add style to the ele­ments. With the ex­am­ple above, the li­bra­ry Pic­nic CSS de­fines that the class flex has the ele­ments in­side it equally spaced:

Ex­am­ple [jsfiddle]

Ex­erc­ise: use the ele­ment but­ton from Pic­nic CSS in three dif­ferent ways.