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.
<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, hereis 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:
- Item one
- Item two
- Item three
- 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:
<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
&#xxxx; (where 'x' is a decimal number).That is, ampersand + hash + number + semi-colon. For example:
ç = ç
ß = ß
è = è
ñ = ñ
© = ©
For more information see: here; here; 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
Post a Comment
Please write your comment here. Thanks!