:header-args: :tangle index.html

Introduction to HTML

Meta info

We define the format. With the first line, we tell the browser the content is HTML5. The second line specify the language of the content. The text that the user will view. 

<!DOCTYPE html>
<html lang="es">
<head>
<title> Mi primera página</title>
<style>

Also we can include style into the web page. But it is preferable use a external file 

* {
 border: 1px solid black; // use this to make more clear each tag
 }
 body {
   font-family: sans-serif;
 }
 main {
   width: 960px;
   margin: auto;
   }
 section {
   width: 30%;
   display: inline-block;
   }

We have to close the style and head tag 

</style>
</head>

Body

Into the body tag, we put our content. We can nest any number of tags as we want. But it has a cost into the performance.

The first tag is the header. Into the header, we should introduce the most important part of the web. See introduction 

<body>
  <header>
    <h1>Hola Mundo </h1>
  </header>

Main content

In this section we play with the different modes of display

Check the difference between display: inline-block and display: block, toggle it in the style section. 

<main>
    <h2>Segundo título</h2>
    <section style="background-color: blue">
      <h3>Sección 1</h3>
    </section>
    <section style="background-color: red">
      <h3>Sección 2</h3>
    </section>
    <section style="background-color: green">
      <h3>Sección 3</h3>
    </section>
    </section>
  </main>
</body>

EOF

</html>

The final code of this session: index.html