Home

Membership

Forums

TeenScene

Education

Malls

Library

PhotoPost

HonourIslands

Help

DOME II: Education: Hypermedia Authoring: HTML Bootcamp: HA021
GOAL: Create Simple Document Oriented Pages for the World Wide Web

Audience: any member; Youth/Adult/CyberSenior; published or unpublished

Pre-Requisites: None, but, must be Windows Literate; especially in terms of File Management via My Computer or the Windows Explorer (nee File Manager). And, if you are not literate using NotePad using the edit keys (backspace, delete, enter, arrows, home, end, etc.) to work with text, then maybe jigsaw puzzles would be more fun ;-)

Type: Formal & Asynchronous

Duration: Open Ended

System Requirement: MS Windows 98 or later, MS Internet Explorer 6.+, NotePad, FTP Access

Outline

Background

Readings, Exercises & Interaction

Assignments & Feedback

Review

Final Examination

Certificate

Other References and Resources

Background

This is a very basic introduction to creating World Wide Web pages which represent documents. The assumption is that you are already familiar with the Internet, the WWW, web sites and web pages or you would not be here reading this. However, if you encountered questions about any of this before you begin, or after you've been at it for a while here, go to the Other References & Resources section of this course for a description of the environment within which you will be working.

A Web Page is simply a file within which there is a web document. This document will be stored out on the Internet on some 'server' which when called upon by a browser in a client system (usually a Personal Computer) will 'serve' /deliver the file to that client and let it be interpreted and formatted for the user's view.

The mechanism by which formatting is represented in these files is HTML.

HTML: HyperText Markup Language

http://www.csd.uwo.ca/%7ejamie/.Refs/ht-defn.html#OEDAddQuote

A 'markup' language generally refers to 'marks' which are embedded within text to govern the format and presentation attributes for that text in a document. These marks are hidden when the text is displayed . Font face, size, color etc are encoded for same, usually with starting and ending marks to define the span of the effect. Marks may take the form of any non-alphabetic, numeric or punctuation character; e.g. with HTML the marks start with < and end with >

[A partial glossary of HTML Tags: http://www.yourhtmlsource.com/myfirstsite/tagreference.html]

Readings, Exercises & Interaction

01: Hello World A

HTML consists entirely of a set of 'tags' which are embedded in the text of document. These tags contain formatting instructions and are balanced; i.e. there is (almost) always a starting tag and an ending tag to define the span of the text to which the instructions are to be applied; e.g. hello world will cause hello world to appear on the user's screen in bold. (This rather trite phrase has become the de facto first lesson standard since computers were first able to display anything at all in the way of text to users. It's intended to give you a sense of being able to make the computer do something for you; anything.)

Nope! That's not quite all you need to do in this case. You must create a web page file and include your message within a few document descriptive tags.

Open NotePad (NOT WordPad, Works, nor Word or any other word processor... THEIR internal markups will interfere with HyperText markup... this needs to be in RAW format... so, do like the man says and use NotePad.

Now, enter exactly what you see below: (on the left)

<html>------------- start of an html document

<body>------------- start the body of an html document

Hello World

</body>------------ end of the body of an html document

</html>------------ end of an html document

Now do a File/Save As ... and name it helloworld.htm

Now, locate this file in whatever directory you saved it in and double click it to open it. It should appear in a browser window as shown below. NOTE: this is true while you are working and testing on your local system.After you are finished with the page you must then upload it to your web site from which it can be served/sent to any other client on the Internet. We'll get to that part later.

Select this code 01helloworlda, copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

02: Hello World B

At this point you encountered created a basic document/page which can be extended and embellished in many ways; including the addition of multimedia elements such as pictures and sound.. Since the thrust of this tutorial is to create a user information manual we will first address text issues.

In the example preceding the font face, size and color was provided by the browser's default for these values, which looks to be, in this case face=times size=2 and color=black. Since we have a basic document we can work from, let's start there and turn it into a header page for the user information manual. Enter the new information shown in purple below.

To do this simply go up to the top menu of your browser, select View then come down with your cursor and select Source. Now you can edit directly as below:

<html>

<body>

Hello World

A Guided Tour of the Pleasure Dome

An Online Learning Community for Writers

</body>

</html>

Now do a File/Save then re-open in your browser by double clicking.

Oooops! That's NOT what we meant. WYSIWYG (What You See Is What You Get) is NOT true with HTML. If nothing is apparent in the tags for how the text is to be displayed, then nothing will happen. In this case the extra spaces between Hello and World and the line breaks were ignored. While there are other means to make line breaks, the simplest is the   tag; which is also one of the few tags where no ending tag is required.

Select this code 02helloworldb, copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

03: Hello World C

So, lets add the line breaks, and, by the way, add a few at the beginning to push the document title down the page. And, while we're in here, let's center the text in the middle of the page, and add the author's name and the creation date, and some copyright stuff for good measure.

<html>

<body>

 

<center>

Hello World 

A Guided Tour of the Pleasure Dome 

An Online Learning Community for Writers 

</center>

 

Phoebe; Dome Huntress 

June 10, 2004 

</body>

</html>

Now do a File/Save then re-open in your browser by double clicking.

Select this code 03helloworldc, copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

04 Title Page A

Not bad for a beginning. But, so far we are using the browser's idea of fonts and sizes. In practice many organizations have chosen to use a mix of helvetica and Times fonts(ft) for titles and text respectively. Daily newspapers are an example here. In our current example we will use helvetica for the titles and Times for the authoring/copyright information. To be safe in these tutorials we will use only three font faces which are known to be the most common: Times, which is a serifed font (little feet and caps at the end of strokes), helvetica, which is a sans serif font; and Courier which is a fixed pitch font... where every character takes the same amount of horizontal space.

(ft) Fonts are a rather tricky aspect of doing web pages. Calling out a particular font face or style can lead to some ugly looking pages if the client system displaying the page does not have that particular font installed. This article advises against using the  tag, but within the limits imposed here you are pretty safe. In a later class we will look at how it really ought to be done. http://alis.isoc.org/web_ml/html/fontface.en.html

<html>

<body>

 

<center>

Hello World  ----- we'll drop this line now...

A Guided Tour of the Pleasure Dome 

note:  starts a span of bold text  ends it.

An Online Learning Community for Writers 

note: <font is 'nested' such that the inner set inherits the face and color from the outer set..

</center>

 

Phoebe; Dome Huntress 

June 10, 2004 

</body>

</html>

Now do a File/Save then re-open in your browser by double clicking.

Select this code 04titlepagea, copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

05 Title Page B

A few more basic touches here to introduce some new scope and we have an almost complete title page.

A lot of things can be done to refine the nature of the body of a page, using values inside of the <body tag. To break the ice we will alter the background color of the entire page to a slightly off-white similar to the kind of offwhite paper stock used in books to cut down reflectance.

(See http://www.perlscriptsjavascripts.com/tutorials/html/chapappb.html for a brief explanation of how colors are coded.)

As an attribute of style in some organizations the authoring information is justified right on the title page; so, we are introducing the paragraph at this point, using it as the 'block' of text to be moved to the right.

<html>

<body bgcolor=#ffffee> ----------- almost white with yellowish tinge

 

<center>

A Guided Tour of the Pleasure Dome 

An Online Learning Community for Writers 

</center>

 

Phoebe; Dome Huntress 

June 10, 2004 

</body>

</html>

Now do a File/Save then re-open in your browser by double clicking.

Select this code 05titlepageb, copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

06 Title Page C

Welllllllllll all that was not very exciting to say the most for it, but, we now have as much as we need for a Title Page for this exercise. Except. It is as unstuck in spacetime as Vonnegut's Billy Pilgrim was in Slaughterhouse Five.

So, let's step off of the cliff into cyberspace with hyperlinks http://www.walthowe.com/glossary/h.html and navigaids.

How do we get to this Title Page?
How do we get from here to the next page?

Firstly, let's add our first hyperlink to provide for connecting this Ttile Page with the next page; the Table of Contents in this case; which we will namepdgt-table.htm for Pleasure Dome Grand Tour- Table of Contents.

NOTE: the containing tag set is<a href=filename>visible link text</a>, where a is for anchor, and href is for hypertext reference.

<html>
<body bgcolor=#ffffee>
 
<center>

A Guided Tour of the Pleasure Dome 

An Online Learning Community for Writers 


</center>
 


Phoebe; Dome Huntress 
June 10, 2004 
(C)2004 The Pleasure Dome II


 
<center>


<a href="pdgt-table.htm">
[N E X T] 
Table of Contents
</a>


</center>
</body>
</html>

Secondly, let's start the location process by doing a File/SaveAs... for this Title Page with a filename of pdgt-title.htm; using whatever directory you are working in now as its home. Later, of course, it will be uploaded to some other directory on the web site. In this simplistic example it is assumed that the files are in the same directory on the same Web Site. Actually a complete path name or URL could be used here to link to a different directory or another Web Site.

Now do a File/Save then re-open in your browser by double clicking.

Notice that our hyperlink has taken on some attributes which are implicit to hyperlinks; namely that the visible text is underlined and blue. Either or both of these attributes can be suppressed.

In practice hyperlinks can be discovered by the user, if not obvious, by moving the cursor over the text or graphic, whereupon the usual arrow cursor will turn into a hand.

Select this code 06titlepagec , copy it, click the button to go to the forum and paste it into a reply as a progress report. While you are there ask any questions or report any problems you encountered.

Review of Tags A (used so far...)
in alphabetical order

anchor/hyperlink--- <a href=URL/path/filename>visible text or image</a>

bold--------------- span of text to be shown in bold

body-------------- <body ~~~>all elements of the body of the page</body>
 ~~~ can be body attributes, e.g. bgcolor=#ffaa77,
 some hexadecimal number

break (line)--------  

center (elements)-- <center>all elements to be centered </center>

font--------------- span of text
 ~~~can be text attributes e.g. face= e.g. helvetica, times, courier,
 size= (1 - 7; small to large)
 and color=name or hex number

html--------------- <html>all elements of a web page </html>

paragraph--------- all elements of a paragraph
 ~~~ can be paragraph attributes,
 e.g. align=left, center, right, justify

Select this code reviewtagsa, copy it, click the button to go to the forum and paste it into a reply as a progress report.
In response to this posting you will be QUIZZED! ;-)

Readings, Exercises & Interaction - continued

10 Basic Template Creation

Before we get too far along, the notion of a template should be introduced. A template is a basic building block from which other things can be built. Templates can take the form of web pages or sections of web pages. They are kinda like bare Christmas trees upon which we can then hang decorations of our choice to peculiarize them to our immediate needs. The most fundamental of these is what I will refer to as the page base. It is an htm file which you can create using NotePad within which are the rudiments of all other web pages. You will recognize it's elements from the hello world and title page files.

<html>
<body bgcolor=#ffffee>

where other stuff will appear...

</body>
</html>

We could actually save this out as is with a name and reuse it over and over; but, it's really too primitive. There are a few other elements to a web page which we have so far ignored for the sake of simplicity and lack of relevance in this tutorial context. So let's extend it to cover at least the context of educational web pages for DOME II, our environment here.

<html>
<head>
<title>The Pleasure DOME II: Education: ~~~~~ </title>
~~~~~~ can be specifc course name
<META NAME="description" CONTENT="An online learning community for writers.">
<META NAME="keywords" CONTENT="writers forums, poetry, prose, multimedia, writers' free resources, music, graphics, writing courses, writing contests, writing awards, writing events, word art events.">
</HEAD>
<body bgcolor=#ffffee>

where other stuff will appear...
type your name in here just as a marker

</body>
</html>

The Title is what will appear in the title bar of your browser whenever you are viewing one of the pages with this file content. The Meta Names are placed here such that outside search engine spiders/bots(ft) can quickly collect keywords for their indexing files. These should be specialized as the content of a page gets specialized.

(ft)
When you register your web site with a search engine organization it periodically sends out programs across the Internet called 'spiders' or robots which scan through your web pages collecting significant text words and phrases to use in locating your site when a user inquires using such words or phrases.

Now do a File/Save As ... and name itdomeeduc.htm for use as the root template for the rest of this course; then re-open in your browser by double clicking.

While you are looking at this, change it to fit the rest of this course... i.e. add the words HTML Bootcamp to the Title. Do to do this simply go up to the View menu, come down to Source and click it. Now add those words in the text, then do a Save As ... only this time you want to save it as the basis for the Table of Contents page... i.e. as pdgt-table.htm per lesson 06titlepagec .

Select this code 10basictemplate , copy it, click the button to go to the forum and paste it into a reply as a progress report.

11 Navigaids for Basic Template

There are many choices for how Web pages can be grouped and reviewed. The most common is the book or document format where one moves forward to the next page or backward to the previous page; and for which there is always the ability to restart at the beginning; or, at some index or table of contents. This movement is governed by hyperlinks, and the choices here vary; inclusive of pure text links or graphic buttons .

In this case study we will introduce the use of images, or, graphic buttons to use as the basis for this navigation. Here is the original template:

at the bottom of the page(s), centered, place image based hyperlinks:

<html>
<head>
<title>The Pleasure DOME II: Education: HTML Bootcamp </title>
<META NAME="description" CONTENT="An online learning community for writers.">
<META NAME="keywords" CONTENT="writers forums, poetry, prose, multimedia, writers' free resources, music, graphics, writing courses, writing contests, writing awards, writing events, word art events.">
</HEAD>
<body bgcolor=#ffffee>

where other stuff will appear...
type your name in here just as a marker... OompaLoompa

<center>

notice the use of the exclamation point in the two preceding lines... this effectively turns those < contained lines into comments while keeping the information avaialble for use in the future where previous and next will be useful...

</body>
</html>

The images used here for the buttons are from the free resources in the Dome II Library. They are partially transparent GIF files. You may capture them from here by using your right mouse button and either Save As... or copy/paste.

Now do a File/Save; then re-open in your browser by double clicking.

Select this code 11navigaids, copy it, click the button to go to the forum and paste it into a reply as a progress report.

20 Table of Contents Creation

Re-displaypdgt-table.htm by double clicking on it, then use the View menu to open up the Source code for modification.

In this exercise we are not attempting to dictate the format of a table of contents page, we are simply using HTML to duplicate, or at least approximate, a format which was established by our author using MS Word.

In the interest of time (and in opposition to boredom) we will not attempt to do anything at this particular time more than a sample of the actual Table of Contents here. And to do this we will add only O N E new HTML tag. Later we will come back to this file and turn it into a true hyperlinked table of contents by adding hyperlinks to this page which point to the actual material which appears further on in the document.

This single new powerful tag is the <pre> tag; which stands for preformatted text. It is also the poet's best friend in that it allows whatever formatting you type into Notepad to appear exactly that way in the displayed web page.

<html>
<head>
<title>The Pleasure DOME II: Education: HTML Bootcamp</title>
<META NAME="description" CONTENT="An online learning community for writers.">
<META NAME="keywords" CONTENT="writers forums, poetry, prose, multimedia, writers' free resources, music, graphics, writing courses, writing contests, writing awards, writing events, word art events.">
</HEAD>
<body bgcolor=#ffffee>

<center>

Table of Contents 
</center>
<pre> 
Section One

 Forums
 home page site map.

 Starting a Discussion
 posting a new thread

 Customising Messages
 signatures
 parsing links in text
 smilies
 attaching files
 thread subscription
 polls

 Replying to Messages

 Editing Messages

 Navigating the Dome
 finding your way around the forums
 reading new posts
 finding your way around the threads
 sticky messages

Section Two

 User Control Panel 

 This is divided into four sections:

 1 Settings and Options
 edit signature
 edit email & password
 edit profile -custom user title,date of birth,
 home page URL, instant messaging,biography,
 location,interests, occupation

 edit options - invisible mode, vCard download,
 receive email from members and managers,
 thread subscriptions,
 private message notification,thread display options,
 date and time settings, message editor interfaces.
 edit avatar
 edit profile picture

 2 Private Messages

 list messages -storage space, delete private messages,
 mark as read and unread, move private messages
 to another folder, download private messages,

 send new message
 track message - read-receipts
 edit folders - create custom folders
 for your private messages,

 3 Subscribed Threads

 list subscriptions -view all your subscribed threads,
 change your subscription settings

 edit folders - create, delete or rename folders
 for your subscribed threads

 4 Miscellaneous

 event reminders - enter events onto the calendar
 paid subscriptions
 group memberships
 buddy / ignore lists
 attachments
 </pre>

<center>

</body>
</html>

Now do a File/Save... then re-open in your browser by double clicking.

NOTE: When you have fleshed out all of the pages of this document, you should return to the Table of Contents and turn each of the items listed into hyperlinks to the related page.

Select this code 20tableofcontents , copy it, click the button to go to the forum and paste it into a reply as a progress report.

30 Document Page Creation

Before getting into the coding of the individual pages (now 'web pages') of this document, let's talk about pagination in this new context of web pages. In this environment, while there is an obvious constraint on the horizontal size of a page, we are no longer constrained by the vertical length of the paper on which the document is printed. In fact, a document which is 20 paper pages in length could be built here in the web world as one continuous web page. However, for puposes of minimizing load times it is better to limit the length to something on the order of a a paper page. What is beneficial here though is that you no longer ever have to worry about chopping a page in the middle of a paragraph. The problems of 'orphans' and 'widows' is eliminated.

In this lesson, for our examples, we are using, again, the document at http://dome2.com/proto/help/Dome2ManualMasterDoc.doc

NOTE: this is a very large document... 2.7 Mb, so it will take a while to load.

Let's start by opening up our base file, domeeduc.htm, by double clicking it. Then, to ensure it's future, do a Save As ... pgdt-~~~~.htm (where ~~~~ is the particular page name) and begin to add the particular page's contents. Let's use the simplest form of naming and make this first page simply pgdt-01.htm . Then make changes to the base file as follows:

<html>
<head>
<title>The Pleasure DOME II: Education: HTML Bootcamp </title>
<META NAME="description" CONTENT="An online learning community for writers.">
<META NAME="keywords" CONTENT="writers forums, poetry, prose, multimedia, writers' free resources, music, graphics, writing courses, writing contests, writing awards, writing events, word art events.">
</head>

<body bgcolor=#ffffee>

Guided Tour of the Pleasure Dome 
 
</center>

Welcome to the Pleasure Dome 
 

Now you�ve stepped through the front door please don�t be put off by the raucous laughter from the Public House or the screams from the Dungeon, we�re a friendly community really. Join me on this guided tour and all will be explained. No heckling at the back though � unless you�re funny with it - and please put your chewing gum in the bins provided; it really clogs up my mouse.

<a name=sectionone>

Section One 
 
<a name=forums>
Forums 
 

The Forums are the heart of the community � the places where members meet and interact with each other - either to socialise and debate in the General Forums, or to develop and share their writing skills in the Writing Forums. 
 
Follow me into the Forum of your choice by clicking on the Forum name on the site map located on the Home page. You enter each one via a gate, which describes the characteristics of the Forum. The Dungeon, for example, warns that you �enter and post at your own peril�, so only post work here if you�re prepared for a strong critique and aren�t disturbed by �adult� themes. The Conservatory is a much gentler place and is ideal for beginning and intermediate writers. 
 

<a name=starting>

Starting a Discussion 
 


Now you�re inside the Forum you can start chatting to your fellow members on the bulletin board. 
 
<img src=forums.gif width=750> 
You�ll notice that the main part of the page is a table, which lists the �threads� in the forum. A thread is an initial message followed by a sequence of responses. Each thread is a separate conversation or discussion.

</body>
</html>

Note the appearance of the width=750 parameter within the img tag. This is being done to ensure that the image stays within the boundary of the 800 x 600 resolution screen we are working with. The actual image is 800 pixels in width.

Now do a Save to record this as pgdt-01.htm.

Select this code 30documentpagecreation , copy it, click the button to go to the forum and paste it into a reply as a progress report.

Note the appearances of <a ~~~~ in red. These are anchor names which can now be inserted in the table of contents page to point to these places in pgdt-01.htm. These will be, respectively,
<a href=pgdt-01.htm#sectionone>subject text</a>
<a href=pgdt-01.htm#forums>subject text</a>
<a href=pgdt-01.htm#starting>subject text</a>

Now, make these changes in your table of contents page and test them to see if they indeed provide hyperlink jumps to the right places in the first page.

Read the linked pages under Understanding Paths... in the Other References and Materials section.

Select this code 31tableofcontents , copy it, click the button to go to the forum and paste it into a reply as a progress report; ALONG with a sample image of some part of your first page.

40 Use of Tables in Document Pages

Without moving up to XML and CSS (Cascading Style Sheets) Tables may be the most powerful facility available for format control. In this basic course we will just scratch the surface of the <table> <tr> <td> tag set and a view of the parameters which can be used with them.

Using our sample document as the target, focus on the area in Section 2 which starts with Settings and Options. As you can see in the print oriented document the author is using a text after graphic option to display the GUI (Graphic User Interface) menu on the left and the text on the right. In our Web Page version we will chop this menu up and use it side by side with each of the options explained on the right; repeating the section of the menu with specific option highlighted. To make this clear, we will show you where we wind up first, then show you how we got there. (BTW we only did enough of an example to give you all the tags and formatting you will need to do the whole thing.)

Check it out... (maximize it after it opens...)

BTW (By The Way) in these examples think about how much more powerful web pages can be in full color than printed documents are in just black and white.

<table width=640 cellpadding=8 cellspacing=8 border=1>
Here is the root of our first table. We are setting the width to 640 pixels because wide sections of text are more difficult to read... that's why newspapers and magazines use columns. cellpadding is the number of pixels you want to have inserted between the text/image and the table cell border, and cellspacing is the number of pixels to be left between cells. We have included a border here mostly so you can see the results of these latter two parameters. Laterwe willget intomuch fancierborders.
<tr>
Our first table row... a note here on coding 'style'... while the browsers will accept many tags per line and often drag and drop html generators aggregate long long lines with multiple tags, this results in code which is difficult to read and diffcult to edit and change... we choose to use a tag per line max unless embedding is obvious...
<td colspan=2>
Our first table data cell; and an unusual one in that we are telling the browser that this cell will span two columns... because we are using it as a header...
<center>

1. Settings and Options 
</center>
</td>
</tr>

a brief note here that a nasty attribute of tables is that font specs cannot be inherited across data cell boundaries and have to be re-established with each...

<tr>
<td>
<center>
<img src=settings01.gif>
here is our chopped up menu with a highlight... this presumes that you have some means of dealing with screen captured images beyond just copying them... you need to be able to crop them and to modify them as with the highlighting used here... you can actually use the Paint Accessory which comes with Windows but you will soon want to graduate to something more powerful like PSP.
</center>
</td>
<td>

Edit Signature 

Click on Edit Signature to enter and format a piece of text that will automatically be inserted at the end of all your messages. You can be just plain �Jane� or
�Jane CyberGoddess - fall down on your knees and worship me.� 
You can also choose to use a short quotation, which reflects your interests or personality. You can disable your signature on any of your messages by un-ticking the 'Show Signature' checkbox.

</td>
</tr>
<tr>
<td>
<center>
<img src=settings02.gif>
</center>
</td>
<td>

Edit Email & Password 

Here you can change your password and your email address. You will need your username and password to log in. If you try to log in with the wrong username or password a message box will open up - <a href=invalidpw.gif target=_blank>Click to see sample.</a>
we chose to externalize this into its own window since it was a bit large to jam into the table... 
 

Click on the link in the message and you will be asked to enter the email address in your user profile. An email will be sent to that address instantly, with instructions for resetting your password.
</td>
</tr>
</table>
</center>

</body>
</html>

Select this code 40useoftables , copy it, click the button to go to the forum and paste it into a reply as a progress report; ALONG with a sample of an extended example of this table. Provide either an image or your code for the extension.

50 Use of Lists

The final page of the target document we are using here looks as shown below:

Safety-Net � a guide for young members

The internet is a great source of information and a place where it is easy to meet people and make new friends. There is one big drawback with this. All you know of a person is what they choose to tell you online and you have no way of knowing if they are painting a true picture of themselves. The friend who says he is the same age as you could be an adult with nasty intentions. The good news, though, is that you can still have a good time online and also protect yourself, by following a few simple rules.

Never give out any information that could identify you. Your name, address and telephone number should never be given out online, but also avoid revealing the name and location of your school or other places you visit regularly. Never post a picture of yourself without your parent�s permission. It�s also a good idea to keep your main email address private � just for people you know and trust. You can easily set up a free email account for all your other online activities. There are many free email providers such as Hotmail and Yahoo!
Don�t arrange a personal meeting with an online friend unless you check with your parents or carer first. If you do arrange a meeting, make sure that it is in a public place and that you have an adult with you.
If a message makes you feel uneasy in any way at all, print out a copy and show it to an adult. You can also report any worrying messages to the managers of the Pleasure Dome via the �report bad post� button - . This is displayed on every message.
Never give out a credit card number online.

Having survived this far you have shown an ability to work with inadequate information and confusion so rather than 'doing it for you' we will just introduce you to the tags new tags you can use and let you go from there. (::smirklaffcrosseyes::).

There are three kinds of lists... Ordered, Unordered and Definition Lists, the latter of which we will cover after Bootcamp.

An ordered list starts with the <ol> tag and ends with its closure </ol>.

An unordered list starts with the <ul> tag and ends with its partner </ul>.

The beginnings of items in both kinds of lists is the list item tag <li>; which has a </li> partner, but it is seldom used.

The syntax as a whole is...
<ul>
<li>blah blah one...
<li>blah blah two....
<li>
</ul>

Now, put that all together with the sample and do the final page naming it in some way consistent with our other pages.

Select this code 50useoflists , copy it, click the button to go to the forum and paste it into a reply as a progress report; ALONG with a sample of your new page..

Other References and Resources

The Internet & The World Wide Web

An almost global network of computers and networks of computers connected to each other by telephone lines of varying speeds. This sprang from a network set up by and for USA: DOD: ARPA. (Department of Defense Advanced Research Projects Agency), maturing into today's TCP(Transmission Control Protocol) /IP (Internet Protocol)( http://www.yale.edu/pclt/COMM/TCPIP.HTM ) in about 1982; later being enhanced and opened up to much more popular use with the release of World Wide Web protocols (a set of conventions governing the treatment and especially the formatting of data in an electronic communications system ) and Graphic User Interface (GUI) software in about 1991.

http://www.zakon.org/robert/internet/timeline/

URL: Universal Resource Locator

http://www.sharpened.net/glossary/definition.php?url

FTP: File Transfer Protocol

http://www.sharpened.net/glossary/definition.php?ftp

HTTP: HyperTextTransfer Protocol

the long of it... http://ftp.ics.uci.edu/pub/ietf/http/rfc1945.html

the short of it... http://www.sharpened.net/glossary/definition.php?http

HTML: HyperText Markup Language

http://www.csd.uwo.ca/%7ejamie/.Refs/ht-defn.html#OEDAddQuote

A'markup' language generally refers to 'marks' which are embedded within text to govern the format and presentation attributes for that text. These marks are hidden when the text is displayed. Font face, size, color etc are encoded for same, usually with starting and ending marks to define the span of the effect. Marks may take the form of any non-alphabetic, numeric or punctuation character; e.g. with HTML the marks, which are called tags, start with < and end with > .

The HTML 3.2 tag set:

http://www.december.com/html/3.2/

Understanding Paths in Hyperlinks and as sources e.g. <img src=pathname
http://www.webdiner.com/webadv/begin/paths.htm

An HTML Tutorial worth visiting... (includes the color table shown below)

http://www.boogiejack.com/html_tutorials.html

These are the 131 color names which are recognized by the major Web browsers, e.g. Internet Explorer.

aliceblue	antiquewhite	aqua
aquamarine	azure	beige
bisque	black	blue
blueviolet	brown	burlywood
cadetblue	chartreuse	chocolate
coral	cornflowerblue	cornsilk
crimson	cyan	darkblue
darkcyan	darkgoldenrod	darkgray
darkgreen	darkkhaki	darkmagenta
darkolivegreen	darkorange	darkorchid
darkred	darksalmon	darkseagreen
darkslateblue	darkslategray	darkturquoise
darkviolet	deeppink	mediumturquoise
deepskyblue	dimgray	dodgerblue
firebrick	floralwhite	forestgreen
fuchsia	gainsboro	ghostwhite
gold	goldenrod	gray
green	greenyellow	honeydew
hotpink	indianred	indigo
ivory	khaki	lavender
lavenderblush	lawngreen	lemonchiffon
lightblue	lightcoral	lightcyan
lightgreen	lightgrey	lightpink
lightsalmon	lightseagreen	lightskyblue
lightslategray	lightsteelblue	lightyellow
lime	limegreen	linen
magenta	maroon	mediumblue
midnightblue	mintcream	mistyrose
moccasin	navajowhite	navy
oldlace	olive	olivedrab
orange	orangered	orchid
palegoldenrod	palegreen	paleturquoise
palevioletred	papayawhip	peachpuff
peru	pink	plum
powderblue	purple	red
rosybrown	royalblue	saddlebrown
salmon	sandybrown	seagreen
seashell	sienna	silver
skyblue	slateblue	slategray
snow	springgreen	steelblue
tan	teal	thistle
tomato	turquoise	violet
wheat	white	whitesmoke
yellow	yellowgreen	lightgoldenrodyellow
mediumaquamarine	mediumorchid	mediumpurple
mediumseagreen	mediumslateblue	mediumspringgreen
mediumvioletred

About Fonts

http://www.functionx.com/html/lesson04.htm

McWeb Software - WYSIWYG HTML Web page editor, Javascript effects and DHTML scripts

Home

Membership

Forums

TeenScene

Education

Malls

Library

PhotoPost

HonourIslands

Help