HyperText Markup Language

HyperText Markup Language#

HyperText Markup Language (HTML), is the standard markup language used to create web pages.

Used as markup language for basically every website on the internet.
Developed by the World Wide Web Consortium (W3C).
The current (and probably final) version is HTML5, a “Living Standard”

Resources#

Lots of offline and online material available
MDN HTML reference
w3schools HTML tutorial

A simple HTML document#

The Hello world version of an HTML document is:

<!DOCTYPE html>
<html>

  <!-- The head tag contains header information about the HTML document. -->
  <head>
    <title>A title for the browser window</title> 
  </head>
  
  <!-- The body tag contains the content of the HTML document. -->
  <body>
    <p>Hello world!</p>
  </body>
  
</html>

Save this file as index.html and open it with your favorite web browser, e.g. open index.html

!open index.html

Syntax#

The HTML file consists of tags, denoted by <tagname>
Most HTML elements are marked by a tag pair (start tag and end tag): <tagname>content</tagname>
Some HTML elements have no content (and hence no end tag): <img> or <br>
A tag can have attributes, for example: <tagname atttribute1="value1" attribute2="value2">

Comments#

Comments are enclosed the  tag:

<!-- This is a multiline comment. 
It will not be rendered. -->

Formatting#

Headings#

%%html

<h1>I am a header</h1>
<h2>I am a sub-header</h2>

I am a header

I am a sub-header

New lines#

The HTML code for a newline is <br>:

%%html
Hello world<br>New lines   

and spaces        do not
    
    matter. Use the br tag instead

Hello world
New lines and spaces do not matter. Use the br tag instead

Special characters#

HTML uses special codes to encode special characters, for example for mathematical, technical, and currency symbols, or non-ASCII characters.

Full list: http://www.w3schools.com/html/html_symbols.asp

Examples:

Symbol	HTML entity
Å	`Å`
å	`å`
Ø	`Ø`
ø	`ø`
Æ	`&Aelig;`
æ	`æ`
‘	`"`
“	`"`
&	`&`

%%html
<p>
&Aring;s, S&oslash;r-Tr&oslash;ndelag
</p>

Ås, Sør-Trøndelag

Special characters alternative:#

Save your file with UTF-8 encoding (check your editor), and add the character encoding to your HTML document:

<head>
  <meta charset="UTF-8">
</head>

Then you can write ~any special character directly in the document.

Paragraphs#

%%html
<p>
This is a paragraph.
</p>
<p>
This is another paragraph.
</p>

This is a paragraph.

This is another paragraph.

Italic text, bold text and links#

%%html
<b>Bold text</b>

<br>
<i>Italic text</i>

<br>
<em>Emphasized text</em>

<br>
<strong>Strong emphasized text</strong>

 <br>
<strong>Strong and <em>emphasized</em> text</strong>

 
<br>
<a href="https://uio-in3110.github.io" id="abc">This is a link</a>

Bold text
Italic text
Emphasized text
Strong emphasized text
Strong and emphasized text
This is a link

Tables#

%%html

<table>
  <tr>
    <th>Name</th>
    <th>Course</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Charles</td>
    <td>INF3331</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Ada</td>
    <td>INF4331</td> 
    <td>94</td>
  </tr>
</table>

Name	Course	Points
Charles	INF3331	50
Ada	INF4331	94

Images#

%%html

<img src="figs/Rhinoceros.png" alt="D&uuml;rer's Rhinoceros" title="the title">D&uuml;rer's Rhinoceros

Dürer's Rhinoceros

Styling#

Every HTML document has a default style (background color white, text color black). The default style can be changed with the style attribute.

<tagname style="property:value;">

Multiple properties can be set with:

<tagname style="property1:value; property2:value">

Some Valid property options:

width
height
color
background-color
font-family
font-size
text-align

Examples#

%%html
<img src="figs/Rhinoceros.png" title="D&uuml;rer&#39;s Rhinoceros" style="width:100px;">D&uuml;rer&#39;s Rhinoceros