HTML

Vicente González Ruiz

September 12, 2016

Contents

1 Introduction
 1.1 HTML (HyperText Markup Language)
 1.2 XHTML (Extensible HTML)
 1.3 XML (Extensible Markup Language)
 1.4 CSS (Cascading Style Sheets)
2 Structure of a Web page
3 Using CSS
 3.1 Inline styling
 3.2 Internal styling
 3.3 External styling
4 Headings
5 URL links
6 Horizontal rules
7 Indented text
8 Colorizing
9 Font selection
10 Creating new elements
11 Writting in Spanish
12 Font size
13 Text alignment
14 Text style
15 Line breaks
16 Creating tables
17 Inserting Web pages
18 Playing audio
19 Playing video
20 Displaying images
21 Inserting figures
22 Using JavaScript
 22.1 Creating Buttons
 22.2 Drawing figures
 22.3 contrast-sensitivity-image.html: The Contrast Sensitivity Function (Campbell and Robson CSF test chart)

Chapter 1
Introduction

1.1 HTML (HyperText Markup Language)

1.2 XHTML (Extensible HTML)

1.3 XML (Extensible Markup Language)

1.4 CSS (Cascading Style Sheets)

Chapter 2
Structure of a Web page

 
<!DOCTYPE html>                    <!-- The document type --> 
<html>                             <!-- The HTML document --> 
  <head>                           <!-- Information about the document --> 
    <title>                        <!-- Title of the document --> 
      Page Title 
    </title>                       <!-- This is the title end tag --> 
  </head> 
  <body>                           <!-- Visible content --> 
    <h1>                           <!-- Heading of deep 1 --> 
      A h1 Heading 
    </h1> 
    <p>                            <!-- Paragraph --> 
      A paragraph. 
    </p> 
  </body> 
</html>

Chapter 3
Using CSS

3.1 Inline styling

 
<!DOCTYPE html> 
<html> 
  <body> 
    <h1 style="color:blue">This is a heading</h1> 
    <p style="color:green">This is a paragraph.</p> 
  </body> 
</html>

3.2 Internal styling

 
<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      body {background-color:lightgrey} 
      h1   {color:blue} 
      p    {color:green} 
    </style> 
  </head> 
  <body> 
    <h1>This is a heading</h1> 
    <p>This is a paragraph.</p> 
  </body> 
</html>

3.3 External styling

 
/* external-css.css */ 
body {background-color:lightgrey} 
h1   {color:blue} 
p    {color:green}
 
<!DOCTYPE html> 
<html> 
  <head> 
    <link rel="stylesheet" href="external-css.css"> 
  </head> 
  <body> 
    <h1>This is a heading</h1> 
    <p>This is a paragraph.</p> 
  </body> 
</html>

Chapter 4
Headings

 
<!DOCTYPE html> 
  <html> 
    <body> 
      <h1> 
        Heading 1 
      </h1> 
      <h2> 
        Heading 2 
      </h2> 
      <h3> 
        Heading 3 
      </h3> 
      <h4> 
        Heading 4 
      </h4> 
      <h5> 
        Heading 5 
      </h5> 
      <h6> 
        Heading 6 
      </h6> 
    </body> 
</html>

Chapter 5
URL links

 
<!DOCTYPE html> 
<html> 
  <body> 
    <a href="http://info.cern.ch"> 
      This is a link to the first Web server 
    </a> 
  </body> 
</html>

Chapter 6
Horizontal rules

 
<!DOCTYPE html> 
<html> 
  <body> 
    <hr> 
    <p> 
      The hr tag defines a horizontal rule 
    </p> 
  </body> 
</html>

Chapter 7
Indented text

 
<!DOCTYPE html> 
<html> 
  <body> 
    <pre> 
      Indented text. 
      <pre> 
        Indented text. 
      </pre> 
    </pre> 
  </body> 
</html>

Chapter 8
Colorizing

 
<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      h2 {color:red} 
      p  {color:green} 
    </style> 
  </head> 
  <body> 
    <h2> Red heading </h2> 
    <p>  Green paragraph </p> 
  </body> 
</html>

Chapter 9
Font selection

 
<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      h1 {font-family:verdana} 
      p  {font-family:courier} 
    </style> 
  </head> 
  <body> 
    <h1> 
      "h1" heading using verdana. 
    </h1> 
    <p> 
      Paragraph using courier. 
    </p> 
  </body> 
</html>

Chapter 10
Creating new elements

 
<!DOCTYPE html> 
<html> 
  <head> 
    <script>document.createElement("")</script> 
    <style> 
      myHeading { 
      display:block; 
      background-color:#ddd; 
      text-align:center; 
      font-size: 30px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>A heading</h1> 
    <p>A paragraph.</p> 
    <myHeading>My Heading!</myHeading> 
  </body> 
</html>

Chapter 11
Writting in Spanish

 
<!DOCTYPE html> 
<head> 
  <meta charset="ISO-8859-1"> 
  áéíóúñ<br> 
  &aacute;&eacute;&iacute;&oacute;&uacute;&ntilde 
</body> 
</html>

Chapter 12
Font size

 
 
<!DOCTYPE html> 
<html> 
  <head> 
    <style> 
      h1 {font-size:300%} 
      p  {font-size:160%} 
    </style> 
  </head> 
  <body> 
    <h1> 
      Heading at 300%. 
    </h1> 
    <p> 
      Paragraph at 160%. 
    </p> 
  </body> 
</html>

Chapter 13
Text alignment

 
<!DOCTYPE html> 
<html> 
  <body> 
    <h1 style="text-align:center"> 
      Centered heading</h1> 
  </body> 
</html>

Chapter 14
Text style

 
<!DOCTYPE html> 
<html> 
  <body> 
    <p> 
      This is normal text. 
    </p> 
    <p> 
      <b> 
        This text is bold. 
      </b> 
    </p> 
    <p> 
      <i> 
        This text is italic. 
      </i> 
    </p> 
    <p> 
      <em> 
        This text is emphasized. 
      </em> 
    </p> 
    <p> 
      <strong> 
        This text is strong. 
      </strong> 
    </p> 
    <p> 
      <mark> 
        This text is marked. 
      </mark> 
    </p> 
    <p> 
      <kbd> 
        This text has fixed letter size. 
      </kbd> 
    <p> 
      <code> 
        This is for code, but it will kill spaces. 
      </code> 
    </p> 
    <p> 
      <code><pre> 
        This is for code, and it will preserve spaces. 
      </code></pre> 
    </p> 
    <p> 
      And the math mode: 
      <var> 
        E = mc<sup>2</sup> 
      <var> 
    </p> 
  </body> 
</html>

Chapter 15
Line breaks

 
<!DOCTYPE html> 
<html> 
  <body> 
    Text 1. 
    <br> 
    Text 2. 
  </body> 
</html>

Chapter 16
Creating tables

 
<!DOCTYPE html> 
<html> 
  <body> 
    <table> 
      <tr> 
        <td>MONTH</td> 
        <td>MONEY</td> 
      </tr> 
      <tr> 
        <td>January</td> 
        <td>$100</td> 
      </tr> 
      <tr> 
        <td>February</td> 
        <td>$150</td> 
      </tr> 
      <tr> 
        <td>:</td> 
        <td>:</td> 
      </tr> 
      <caption><mark>Monthly savings</mark></caption> 
    </table> 
  </body> 
</html>

Chapter 17
Inserting Web pages

 
<!DOCTYPE html> 
  <html> 
    <body> 
      <iframe src="http://www.ual.es" width="800" height="600"></iframe> 
    </body> 
</html>

Chapter 18
Playing audio

 
<!DOCTYPE html> 
<html> 
  <body> 
 
    <audio controls> 
      <source src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" type="audio/ogg"> 
        <source src="http://www.noiseaddicts.com/samples/4935.mp3" type="audio/mpeg"> 
        <source src="http://www.nch.com.au/acm/11k16bitpcm.wav" type="audio/wav"> 
          Your browser does not support the audio element. 
    </audio> 
 
  </body> 
</html>

Chapter 19
Playing video

 
<!DOCTYPE html> 
<html> 
  <body> 
 
    <video controls> 
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"> 
      <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
      Your browser does not support the video tag. 
    </video> 
 
  </body> 
</html>

Chapter 20
Displaying images

 
<!DOCTYPE html> 
<html> 
  <body> 
    <img src="afghan-girl.jpg" alt="image-not-found.com" width="100" height="200"> 
    <!-- Notice that <img ...> is an empty tag. --> 
  </body> 
</html>

Chapter 21
Inserting figures

 
<!DOCTYPE html> 
<html> 
  <body> 
    <figure> 
      <img src="http://i.dailymail.co.uk/i/pix/2012/10/24/article-2222249-15A711F3000005DC-581_634x901.jpg" alt="Afgan␣Girl" width="600" height="800"> 
      <figcaption>Afghan Girl by Steve McCurry (National Geographic).</figcaption> 
    </figure> 
  </body> 
</html>

Chapter 22
Using JavaScript

22.1 Creating Buttons

 
<!DOCTYPE html> 
<html> 
  <body> 
    <button type="button" onclick="alert(’Hello␣world!’)"> 
      Click Me! 
    </button> 
  </body> 
</html>

22.2 Drawing figures

 
<!DOCTYPE html> 
<html> 
  <canvas id="myCanvas"> 
    Your browser does not support the HTML5 canvas tag. 
  </canvas> 
  <script> 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(0, 0, 80, 100); 
  </script> 
</html>

22.3 contrast-sensitivity-image.html: The Contrast Sensitivity Function (Campbell and Robson CSF test chart)

 
<!-- Vicente González Ruiz --> 
<!DOCTYPE html> 
 
  <head> 
    <title> 
      The Contrast Sensitivity Function 
    </title> 
  </head> 
 
  <body> 
 
    <h1> 
      The Contrast Sensitivity Function 
    </h1> 
 
    <p> 
      The CSF is the curve defined by those points that define the 
      lowest contrast levels that you can detect for each spatial 
      frecuency tested of the following image (click on the button 
      below to generate the image): 
    </p> 
 
     <br> 
     Attenuation: <input type="range" id="attenuationRange" min="0" step="0.1" max="5" value="3"> 
     Frequency: <input type="range" id="frequencyRange" min="0" step="0.1" max="10" value="5"> 
     <button onclick="draw()">Click me!</button> 
     <p id="attenuationId"</p> 
     <p id="frequencyId"></p> 
 
     <canvas id="canvas2" width="1024", height="1024"> 
       Your browser does not support canvas! 
     </canvas> 
 
     <script type="text/javascript"> 
       function draw() { 
           element = document.getElementById("canvas2"); 
           c = element.getContext("2d"); 
 
           // read the width and height of the canvas 
           width = element.width; 
           height = element.height; 
 
           // create a new pixel array 
           imageData = c.createImageData(width, height); 
 
           attenuation = document.getElementById("attenuationRange").value; 
           document.getElementById("attenuationId").innerHTML = attenuation; 
           frequency = document.getElementById("frequencyRange").value; 
           document.getElementById("frequencyId").innerHTML = frequency; 
           for(y=0; y<height; y++) { 
               for(x=0; x<width; x++) { 
                   t = (1+Math.sin(width/Math.log(x*frequency)))*(y/Math.exp(attenuation)); 
                   imageData.data[(y*4)*width+((width-x)*4)+0] = t; 
                   imageData.data[(y*4)*width+((width-x)*4)+1] = t; 
                   imageData.data[(y*4)*width+((width-x)*4)+2] = t; 
                   imageData.data[(y*4)*width+((width-x)*4)+3] = 255; // opaque alpha 
               } 
           } 
           // copy the image data back onto the canvas 
           c.putImageData(imageData, 0, 0); // at coords 0,0 
       } 
 
       draw(); 
 
    </script> 
 
    <h2> 
    <var> 
    CSF = sin(log(x))/y 
    </var> 
    </h2> 
 
  </body> 
 
</html>