Learning Resources
Lesson
Building blocks of a web page
The internet is a vast interconnected network of computers, web-sites and web pages. All web content is stored on computers running special software called web servers. Unix servers, such as the one at CDLI (http://www.cdli.ca) use a web server program called Apache. Microsoft Windows 2000 servers use a web server program called Internet Information Server (IIS).
Web Servers store information in directories and files. Files are plain text, without any of the formatting that word processors use. Wordprocessor files can only be read by the program that created them. Web files can be read in any text program. Web files do have formatting information embedded in them, as in the example below
<html>
<font color="#336699">
<p>this is a paragraph</p>
<p>this is a another paragraph</p>
<p>this is a list of items</p>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</font>
</html>
Did you note the pairs of codes enclosed in <> brackets. One code turns the effect on (<p> for paragraph, for example), while the / code turns it off (</p> to end the paragraph, for example). Can you guess the meaning of ul and li?
The web browser, upon seeing this example, would show it onscreen like this
this is a paragraph
this is a another paragraph
this is a list of items
- item one
- item two
HTML (HyperText Markup Language) is nothing more than formatting information that web browsers understand. The internet is powerful simply because it is easy to make pages (they are plain text and can be opened in Notepad, for example), format them with embedded codes, link them together with hypertext links, and connect to web servers anywhere in the world to retrieve information.
For example, the code for the link Adobe Web Site is
<a href="http://www.adobe.com">Adobe Web Site</a>
A typical web page might look like this in Notepad (except for the red text).
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<h1>Welcome to my web page</h1>
<p>Pretend for a moment that it is 1921. You are bouncing along a dusty road on you way to a new job. </p>
<p>The carriage has seen better days, and you are wondering why you decided to do this</p></body>
</html>
The page is here
A review of the basic html codes will give you an understanding of how web pages work
HTML Code
Description
<html></html>
Put at the beginning and end of a web document to let the web browser know what to do with it
<head></head>
Put after <html> at the beginning of a document. Information placed here will not appear on screen
<title></title>
Put between <head> and </head>. Information between <title> and </title> will appear in the top border of the web browser
<body></body>
Put the main content between these two codes
<h1></h1>
Starts and stops a Heading 1
<h2></h2>
Starts and stops a Heading 2
<h3></h3>
Starts and stops a Heading 3
<h4></h4>
Starts and stops a Heading 4
<h5></h5>
Starts and stops a Heading 5
<h6></h6>
Starts and stops a Heading 6
<p></p>
Starts and stops a paragraph
<ol></ol>
Starts and stops an ordered (numbered) list
<ul></ul>
Starts and stops a unordered (bulleted) list
<li></li>
Starts and stops an item in a list
<br>
Put this in to start a new line without a space between the lines
<a href="urlhere">text</a>
Hyperlink code. Replace the word urlhere with the path to the file or web site. Replace the word text with the name for the link that you want to see in the browser.
Basic Terminology
The following terms are the basic building blocks required to begin working with FrontPage and web pages.
Term
Description
Folder
A storage location on a computer hard drive. Used to hold files and other folders. Can have any name, but it is best to not use spaces or special characters such as commas or brackets in the name. Instead of a name like John's Old Pictures, use johns_old_pictures. Some operating systems cannot use the first but all can use the second.
Web pages
Web pages are text files that contain all the information a web browser (Netscape, Internet Explorer, ...) needs in order to display the page. The information includes the text that will go on screen, instructions for formatting the text (fonts, colours, sizes, ...), links to images and other media that will be displayed in the page, and any other special information required to display the page properly
File
A block of information saved on the hard drive as separate item. Technically, folders are also files, but the label usually refers to all the items on the drive that are not folders. Usually a file will have a name with a 3 letter extension. Examples are picure1.gif, program.exe, grfg.dll, and document1.doc.
File format
Refers to the type of information in the file and to the way the file is encoded. There are text files, graphics files, animation files, sound files, and video files, for example.
File name extensions
Each file type (images, for example) can have many different formats (created by different programs and encoded differently). A few of the more common web friendly formats are shown below. Formats listed under Other require additional programs
File type
Extension
Bitmap Images
Graphics Interchange Format
.gif
Windows Metafile
.wmf
Joint Photographers Experts Group
.jpeg, .jpg
Vector drawings
Corel Draw
.cdr
Video
Windows Media Player
.avi
Motion Picture Experts Group (MPEG)
.mpeg, .mpg
QuickTime Movie
.mov, .qt
Real Player, Real Video
.ram
Audio
Real Player
.ra
Windows
.wav
MPEG's 3 layer audio compression
.mp3
Others
Acrobat Portable File Format
WinZip file compression
.zip
Microsoft Word
.doc
Microsoft Access
.mdb
Hyperlink
Also called hypertext link and URL. It is nothing more than a pointer (set of directions) telling the web browser where to find a page. There are two types of links
absolute links give the complete address of the web page, for example
http://www.cbc.ca takes you to the opening page for CBC, http://www.cbc.ca/onair/ takes you to the on-air guide for CBC, and http://cbc.ca/kids/ takes you to a CBC 'kids' site
relative links give only part of the address. They are used to link to a page on the same site. Example
a_getready.html takes you to the You will Learn page for this Part. It only gives the name of the file because it is in the same folder as this page
Activity
Assigned activities
Please complete the following tutorials
- http://www.actden.com/fp2000/java/index.htm
- Microsoft's FrontPage 2000 tutorial, Lesson 1 The table of contents will be highlighted in the left pane. If you have time, also look at Lesson 2