WWW and HTML

In this session we briefly looked at the historical evolution of the World Wide Web and HTML.

Here is a copy of the presentation.

Here is a summary of basic HTML tags used to create a simple webpage.


1. Basic structure of an HTML Document

The following tags form the overall structure of an HTML document.

<html></html> to start and end an HTML document.

<head></head> to define meta-data about the document.

<title>My webpage title</title> to define the title shown in the browser title bar.

<body>My website content</body> for the visible content of your page.


Get further practice here

2. Text formatting

The following tags are used to format text.

i) <p>some text</p> : to create and end paragraphs.

ii) <em>some text</em> : to create italic text.

iii) <strong>some text</strong> : to create bold text.

iv) <br ⁄>to create line breaks. For example, here
is a line break. And here's
another.

3. Creating Lists

Creating lists is easy, once you know how. There are two main types of list you can create:

  • ordered (numbered) lists; and
  • unordered (bullet) lists.

1. Numbered (ordered) lists are like this:

  1. Item one
  2. Item two
  3. Item three
  4. etc...

The code to create one of these is as follows:

<ol>
<li>text of list item 1</li>
<li>text of list item 2</li>
</ol>

2. Bullet (unordered) lists are like this:

  • Item one
  • Item two
  • Item three
  • etc...

The code to create one of these is as follows:

<ul>
<li>text of first item</li>
<li>text of second item</li>
</ul>

Get further practice here

4. Using Headings and Horizontal lines

Headings and horizontal lines are as follows:

(i) <h1>some text</h1>: for

 large (level 1) headings


(ii) <h2>some text</h2>: for

  slightly smaller (level 2) headings


(iii) <h3>some text</h3>: for

   even smaller (level 3) headings


(iv) <h4>some text</h4>: for

    yet smaller (level 4) headings.


Get further practice here


(v) <hr /> for creating horizontal lines across our page.


5. Including links in pages

Links are formed using the <a> tag:

<a href="http://www.some-website.com">Link Text </a> for creating links.
For example:
http://www.ascilite.org.au/ajet/ajet11/oliver.html

Get further practice here

6. Incorporating special alphanumeric characters in HTML

Including special characters in your HTML code is best done using this structure: &#xxxx; (where 'x' is a decimal number).
That is, ampersand + hash + number + semi-colon. For example:

&#0231; = ç
&#0223; = ß
&#0232; = è
&#0241; = ñ
&#0169; = ©


For more information see: herehere; and here.

Homework

Study HTML and practise creating further content and links in your pages. Use the w3schools tutorials to help you: http://www.w3schools.com/html5/default.asp

Remember: there are lots of sites offering tutorials in HTML!! The best way to learn is to practise!

SML209: Computers and Languages. Unit 4. Website Design 2. M Barge. Updated January 2012.

Comments

Popular posts from this blog

Computers have learned to make us jump through hoops

Social Networking under Attack

Can you tell whether you are talking to a human or a chatbot?