Introduction to Computing

| HOME | SYLLABUS | CALENDAR AND EXERCISES |

Introduction to HTML

1 Create the first page

Start by creating a simple page with two outside links. Use Notepad++, Eclipse, Notepad, or some other HTML editor. Change names and text as you need:

<html>
<head>
        <title>Anna's home page at Metropolia</title>
</head>
<body>
<h1>Welcome to Anna's home page !!</h1>
<p>
My name is Anna Hao.</p>
<p>I'm thrilled to present some great sites to you:

<br/><a href="http://www.prenhall.com/long">My course book</a>
<br/><a href="http://www.newscientist.com">Science news </a>
</p>
<hr/>
<p>Created by AH on 14 September 2015
</p>
</body>
</html>

Save this as index.html, and test it by opening with Firefox or IE. Then edit the same page: modify the code to add background colour, a picture (you can pick it from here or use another image) and a link to another page. Save your picture to the same directory with the index.html file.

<html>
<head>
        <title>Anna's home page at Metropolia</title>
</head>
<body bgcolor="#FFFF66">
<h1>Welcome to Anna's home page !!</h1>
<p>
<img src="Mlogo.gif" title="Metropolia"/>My school.
</p>
<p>
I'm thrilled to present some great sites to you:
<br/><a href="http://www.prenhall.com/long">My course book</a>
<br/><a href="http://www.newscientist.com">Science news </a>
</p>
<p align="left"><a href="page2.html"><font size="4"
face="Arial">
<b>Link to returned work on another page!</b></font></a>
<!-- comment: here starts the footer of the page -->

<hr/>
Created by AH on 14 September 2015
</body>
</html>

Save this again as index.html and test it with the browser.

Explanations of HTML coding:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
definition of the stardard in use, not necessary

<html>  start of page

<head>  start of page head section that does not show on page

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> some optional coding, defines Western European character set

<title>  Anna's home page at Metropolia</title> title to the top window bar

</head>end of head

<body bgcolor="#FFFFFF">start of page, includes color definition: white

<a href="http://www.metropolia.fi"> link begins

<img src="Mlogo.gif/"> image
</a>
link ends

<b><i>This is my school</i></b> text is bold and italics

<h1>Anna's page</h1> main level title, separate paragraph

<p> new paragraph

<br/> new line (line break)

<font size="4" face="Arial">Here I will post my schoolwork</font><font face="Arial"> </font> font size and style defined large

</p>

<hr/> horizontal rule

<table border="0" width="100%"> start of table without borders, extends to the window

<tr> table row starts

<td> table cell

Updated by: Anna Hao

</td> table cell ends

<td align="center">another table cell, contents centered

<a href="mailto:anna.hao@metropolia.fi"> email link

<img src="email07.gif"/ ></a>

</td> table cell ends

<td>Update: 10.9.15</td>

</tr> table row ends

</table> end of table

</body> end of page content

</html>end of html

2 Create another page

Next, create another page for the links. It is called page2.html, like this:

<html>
<head>
        <title>Anna's returned lab work at Metropolia</title>
</head>
<body bgcolor="#FFFF66">
<h1>Welcome to Anna's lab work page !</h1>
<p>
Introduction to Computing practice:
<br/><a href="Anna_pres.ppt">PowerPoint about ergonomics</a>
<br/><a href="Anna_report.docx">Report </a></p>
<p align="left"><a href="index.html"><font size="4"
face="Arial">
<b>Back to home page</b></font></a> </p>
<!-- comment: here starts the footer of the page -->

<hr/>
Created by AH on 14 September 2015
</body>
</html>

Explanations - Some other elements:

<!-- text -->
Place a comment in the HTML source

Present an unordered list: <ul>

<ul>
<li> First item in the list </li>
<li> Next item in the list </li>
</ul>

The very basic table structure

A 2 by 2 table of numbers (a unit matrix), with no headers whatsoever looks like this:

<table>
<tr> <td> 1 </td> <td> 0 </td> </tr>
<tr> <td> 0 </td> <td> 1 </td> </tr>
</table>

Hyperlinks or Anchors

<a id="anchor_id"> . . . </a>
Define a target location in a document (bookmark)
<a href="#anchor_id"> . . . </a>
Link to a location in the base document, which is the document containing the anchor tag itself.
<a href="URL"> . . . </a>
Link to another file or resource
<a href="URL#anchor_id"> . . . </a>
Link to a target location in another document

Entities - special characters

&keyword;
Display a particular character identified by a special keyword. For example the entity &amp; specifies the ampersand ( & ), and the entity &lt; specifies the less than ( < ) character. Note that the semicolon following the keyword is required, and the keyword must be one from the list. Where an entity name does not exist use the ISO Latin-1 character code.
&#iso_latin-1_code;

3 Practice continues

For example, change previous list of links to an unordered list:

<p>I'm thrilled to present some great sites to you:</p>
<ul>
<li><a href="http://www.prenhall.com/long">My course book</a></li>
<li><a href="http://www.newscientist.com">Science news </a></li>
</ul>

To control the layout of the image better, let us add a simple table.

<table border="0">
<tr><td>This is my college</td>
<td>
<img src="Mlogo.gif"/>
</td>
</tr>
</table>

Finally, add author information to the footer:

<!-- comment: here starts the footer of the page -->
<hr/>
<table border="0" width="100%">
<tr>
<td>Created by AH </td>
<td align="center"><a href="mailto:anna.h@metropolia.fi"><img src="email07.gif"/></a></td>
<td>Modified on 14 Nov 2010</td>
</tr>
</table>

Tables are useful in page layout. Other possibility is the <div> tag that defines a division/section in a document. Normally, you use the <div> tag to group block-elements to format them with styles (CSS). Similarly, <span> helps in inline formatting.

Links for more information:

The World Wide Web Consortium

W3schools.com: HTML, CSS, XML and scripting tutorials

http://validator.w3.org/ checks your code.

Created by: Jaana Holvikivi Updated: 23.9.2015