HTML Sample Pages

HTML Doctypes

There are several versions of html. You can read much more about the doctypes here.

XHTML 1.0

If you want code with XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

</body>
</html>

HTML5

If you want the redhot new features. Fine – but not all browsers will be able to use your fancy code. HTML5 has tags for video, audio and even semantic tags for a more logis display of content.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

</body>
</html>

HTML 4.01 Strict

The conservative and often wise choise. HTML 4.01 does not use “well formed code” as in XML or XHTML. So certain tags like link, img etc. are without “ending”.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MySite</title>
</head>
<body>

</body>
</html>

A complete HTML5 page with CSS

Here is a HTML5 page sample with some of the most common CSS methods.  The code is commented (all code should be commented!).

The div is centred like this:

  • margin-left: auto;
  • margin-right: auto;
  • width: 500px;

In this way you may center any code.

Files and folders

  1. Make a folder called “MySite” (or whatever you want to call the site)
  2. Inside the “Mysite” folder you create a subfolder called “images”
  3. Save index.htm and css.css in the folder “MySite”
  4. Save the images in the folder “images”

 

 

Sample web page
Sample web page

index.htm

On a server you should name the “start file” index.htm (or index.html). Here is a more complex sample:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- this is a sample html file ... and here's the first commented code -->
<head>

    <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
    <!-- displays the title in the browser window -->
    <title>MySite</title>

    <!-- link to external stylesheet in the same folder. Name of file = css.css -->
    <link href="css.css" type="text/css" rel="stylesheet">

    </head>
<body>

<!-- div = division, class = several tags use this style -->
    <div class="wrap">    

        <!-- id = only this tag use that style -->
        <h1 id="myHeader">Porttitor dictum</h1>

        <p>Pellentesque aliquet sapien id blandit rhoncus. Morbi at mi et felis eleifend eleifend vel eu mauris. Vivamus id fermentum nibh. Nulla sit amet sapien faucibus, scelerisque turpis non, vehicula sapien. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus laoreet lacus ut diam euismod, eget tempus arcu tempor. Vivamus leo erat, commodo et erat ac, tincidunt dignissim diam. Donec porta tortor vitae lacus congue pulvinar.</p>

        <!-- ul = list, li = list item -->
        <ul>
                    <!-- the a or link tag nested in an unordered list -->
            <li> <a href="http://www.ubuntu.com">Ubuntu.com</a> </li>       
        </ul>

        <!-- image tags (with inline css and others with class) -->
        <img src="images/innoevent.jpg" alt="Innoevent" style="width=100%">
        <img src="images/bg.jpg" alt="an image" class="toLeft">
        <img src="images/bg.jpg" alt="another image" class="toLeft">
        <img src="images/bg.jpg" alt="and once again" class="toLeft">

    </div>

<!-- ends the html -->
</body>
</html>

css.css

The cascading style sheet is placed in the root folder. Here are samples of features such as background images, floats, typography and color manipulation.

 

/*
File name: css.css
Author: Per Thykjaer Jensen
Purpose: css sample file
License: GPLv3
My stylesheet - and this is a comment.
A css file can have any name, but the file last name should be .css
*/

/*
All tags can be styled somewhat like this
*/
body {
	font-family: sans-serif;
	font-size: large;
	background-image: url('images/bg.jpg');
	background-repeat: repeat-x;
	background-color: #42d178;
}

/*
Styling classes
*/

.wrap {
	background-color: #ffffff;
	color: #000000;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	width: 500px;
}

.toLeft {
	margin: 5px;
	background-color: #fff;
}

/*
Styling ids
*/

#myHeader {
	color: orange;
}

The folder /images

Make a folder for your images – just to have some order in your file structure. In the folder you find these files.

A photo from innoevent 2012
A photo from innoevent 2012

The background image

The little green thingy is the background image.