|
Chapter #1What is a Webpage
What is the World Wide Web or Internet
The internet is a network of computers all linked togather through modems,
phone lines, and routers. All this connect millions on top of millions of
computers. When you dial into an ISP (Internet Service Provider) you connect
to the "web" of computers that all send information and files. You can see the
same sort of thing in a phone system, you dial a number and you are routed to the
house or buisness you want.
HTTP or HTML pages
These pages make-up the majority of the Internet and are the most visited sites.
This is because they use graphics, sound, and other forms of multimedia, that
intrest the avererage user. This page that you are viewing is a HTTP or HTML
webpage
FTP (File Transfer Protocol)
A FTP site is one of the first "web sites" on the internet. A FTP site consists
of many files and directorys' that you can view, and copy files. FTP sites are
primitive and don't have graphics or fancy fonts.
Telnet
Telnet is another primative web page, but telnet can be used for many things.
One thing telnet does, is that you can have a telnet BBS (Buletin Board System),
or you can FTP with a telnet application. Telnet isn't used often becuase it is
very slow.
This concludes Chapter #1
TOP OF PAGE
Chapter #2What is a URL
URL - (Uniform Resource Locators)
Where did URLs' come from?
URLs' came from some high-energy physics in Switzerland invented URLs' to transmit
data between eachother. Now that the Internet has evolved to a world-wide network,
a few problems have arose. One is that there is no centeral authority of the Internet,
this is where URLs' come in handy. A URL is the web address of the site you want to
go to. Without URLs' there would be a huge problem of accessing the data you want.
How to read a URL
A URL always comes in a standard form, this is as follows:
{service}://{host name}:{port}/{directory-path}
Not all of theses components are included in all
web addresses
an example of a URL is David's Led Zeppelin Page which is at:
http://www.geocities.com/sunsetstrip/1697/start.htm
In the preceding example, the service is identified as http. (HyperText Transport Protocol), the
method by which web documents are transferred across the Internet. By using "http" you indicate to the
client program (Netscape, Internet Explorer, MacWeb) that you'll be connecting to a web document.
The next information you seek is "www.geocites.com". The ".com" is the zone, some common zones
on the web are: .gov-government, .edu-education, .net-network, .uk-United Kindom etc. The "geocities" is the
domain or host, and the "www." is the name of the webserver of the computer you're connecting to.
Usually you don't have to select a port. The "/sunsetstrip/1697/start.htm" says to
your browser that you want the file "start.htm" in the directory "sunsetstrip/1697".
FTP via an URL
You can get to a FTP site by not only using a telnet application or the ftp commmand in DOS. Now you
can go there by using the prefix "ftp://". This will bring up the FTP server on your browser screen.
An example of this is ftp://ftp.microsoft.com.
Ports
You don't always have to use the "www." command, some you can use other port name.
Some of these are: U.K. Hoops page http://members.tripod.com/~davidmarshall/hoops.htm
and ESPN at http://espnet.sportszone.com. These are just some
of the examples of the ports you can use.
URLs' can NOT inclule spaces!!! Email via an URL
Now you can simpily send your mail by using an URL an example such as mailto:write_me@www.com which sends Email
to me.
Telnet via an URL
You can use a telnet applicaton via an URL the same as you can FTP via an URL. All you have
to do is input the "telnet://" as the begining of the URL, this replaces the "http://".
HTTP: The heart of the Web
Most of the sites that you visit on the modern day web are HTTP:// webpages. This is the most common URL
in the world. As you surf the net you won't notice very many: gopher, telnet, or usenet URLs'.
This concludes Chapter #2
TOP OF PAGE
Chapter #3Basic HTML
HTML- Hypertext Markup Language
HTML and Browsers
A web browser such as Netscape or Internet Explorer are programs
that interprete HTML into text and graphics. For a crash course on web browsers,
Click Here. All HTML documents are written in the extention
of ".htm" or ".html" this tells the browser that it's looking at a HTML document.
If you open it... close it
This little phrase is the solution to many simple HTML errors. Many times a HTML tag needes
to be used in pairs, an example of this is the bold tag which is <b> and </b>. You have
to have the "/" to close the tag, you will understand this in the future as we go along.
Beginning HTML Tags
<html> and </html> - you have to start and end
ALL HTML
documents with this tag. It tells the browser that it's a HTML document
<header> and </header> - you also have to start ALL
HTML
documents with this tag. It tells the browser the title of your document, this tag is
also used in conjunction with the <title> and </title> tag. An Example of this is:
<header>
<title>This is an example of a title</title>
</header>
<body> and </body> - This tells the browser what color
the text, links, visited links, background color, and background will be. You
don't have to use all these formats but you can use a combo of them all. To illustrate this
I will use an example of all:
<body text="#00000" link="#ff0000" vink="#0000ff" bgcolor="#00ff00" background="splat.gif">
link= the color of the links
bgcolor= background color
vlink= visited link's color
background= file that you want to be the background
text= color of the text (not links)
NOTE: You have to include a # sign before all color assignments and put them in quotes
At the end of your document you need to put a </body>, this goes before
the </html>
Headers - this makes a selected area of text bigger or smaller.
The sizes run from: <h1> as the biggest to <h6> as the smallest. An
Example of this is:
<h1>This is the biggest</h1>=This is the biggest
or
<h6>This is the smallest</h6>=This is the smallest
You can input any number between 1 to 6 behind the "h" in the tag
Paragraphs - can be very helpful to organize data into paragraphs. This tag is
as follows:
<p> and </p>. An example of this is:
<p>
All of your data goes here
</p>
Line Breaks - lets you break a line without having to start a
new paragraph. This can save you huge amounts of time and effort. An example is:
<p>This is where your line of info goes<br>
And here's another line</p>
The preceding line looks like this in your browser: (except not in that color!)
This is where your line of info goes
And here's another line
Address Tag - Tells about creator info, usually displayed
in italics. An example is:
<address>Created by David Marshall (dmzepzoso@juno.com)</address>
It looks like this in your browser: (not in that color though)
Created by David Marshall (dmzepzoso@juno.com)
Preset Font - sets the font to a monotype font, that looks
like a typewriter. Once again, here's an example:
<pre>This is an example on monotype</pre>
It looks like this in your browser: (not in this color)
This is an example of monotype
This concludes Chapter #3
TOP OF PAGE
Chapter #4Text Styles
Italicized Text - shows emphasis and titles
An example of this is:
<i>This is in italics</i>
It looks like this in your browser is:
This is in italics
Bolded Text - shows strong feeling and importance
An example of this is:
It looks like this in your browser is:
This is bold
Underlined Text - shows titles and importance
An example of this is:
<u>This is underlined</u>
It looks like this in your browser is:
This is underlined
Strike-through Text - shows a word crossed out
An example of this is:
<s>This is strike-through</s>
It looks like this in your browser is:
This is strike-through
Strong Text - almost just like bold
An example of this is:
<strong>This is in strong</strong>
It looks like this in your browser is:
This is in strong
Small Text - makes text small
An example of this is:
<small>This is in italics</small>
It looks like this in your browser is:
This is in small
This concludes Chapter #4
TOP OF PAGE
Chapter #5Lists
This chapter includes info on how to create: definition lists, unordered lists (bulleted),
and ordered lists (numbered). Also you will know how to do other approaches or
alternatives to lists. This chapter also includes info on how to make inner-documental
comments.
Definition Lists
Example:
<dl>
<dt>HTML
<dd>Hypertext Markup Language
<dl>- Starts definition list
<dd>- Definition of the main word
It looks like this in your browser:
- HTML
- Hypertext Markup Language
Unordered Lists - Tabs the list to middle (or close to it)
of the screen. You also have to end the tag
Example:
<ul>This is unordered</ul>
It looks like this in your browser:
You can use this with the <li> and </li> tags which create bullets
or square dots to the left of the words
Example:
<dir>
<ul><li>Bulleted and unordered</li></ul>
</dir>
In your browser it looks like:
You can also use the bullets without using <ul> and </ul> tags.
You do this by using:
<dir>
<li>Regular bullets</li>
</dir>
It looks like this to you:
Regular Bullets
Numbered lists
It looks like this:
The <dir> and </dir> tags is used for compacting a directory
Menu - lists of short items that can be
put into columns, which is determined by the browser software. Looks
about the same as the <ul> and </ul> tags do.
Example:
<menu>
<li>Item</li>
</menu>
Looks like:
NOTE: You can combine all of these tags
Inner-Documental Comments
Lets you enter comments that won't appear on the browser's screen
Example:
<!-- enter your comments here -->
It looks like this:
You can't see it so I can't show it to you, but if you go to the top
of this page and view this page's HTML
and you can see this!
view this page's HTML
and you can see this!
This concludes Chapter #5
TOP OF PAGE
Chapter #6Pointers and Hot Links
This chapter tells you how to make links and inter-documental links. Also tells
you how to make non-web links, and multiword HTML tags. Also tells you how to
include graphics. Maybe you would like to go back and review
Chapter #2 URLs'.
Links to remote webpages
Lets you have clickable links to other webpages so all you have to do is click on
the words and you're at another page.
<a href="http://www.microsoft.com">Microsoft</a>
This would take you to Microsoft's webpage just by clicking on it. On this
server we aren't alowed to have any links to outside webpages, so you'll have
to experiment with this on your own. Trust Me it works!
It will look like this (but another color that they have selected as the links' color:
Microsoft
The info in the first <a href="> tag is the URL which is the page that is
going to be linked to. The info after that tag ended and before the </a> tag
is the name of the link that appears on the browser screen.
NOTE: Be sure to end your quotes or the link won't work!
Mail Links - clickabe text or image that brings up an email message
that e-mails you!
Example:
<a href="mailto:for_you@www.com">Email Me</a>
It looks like:
Mail Me <= Try it! this link works
Non-Web information - FTPing from your site
You can transfer files from your site by adding the <a href=""> tag,
except where you'd put the URL, you'd add the file's name. The file extention
has to be a non-web oriented file like:.exe, .avi, .wav, or others
Example:
<a href="html.txt">Download this page's HTML</a>
It looks like this to you:
Download this pages's HTML
Inner-Documental Links - a link to a certin part of your page.
It lets you jump down to the bottom of your page, or jump back to the top!
You use the regular link tag with a few ajustments. Also you use another tag.
Example:
<a href="#part1">Goto Part 1</a>
When you click on the Part 1 text, your browser looks for the <a name="part1">
tag, and it takes you to there. The text under that tag is the info you are now
looking at!, after that group's info is done you end it with the </a> tag.
For an example look at this page's HTML and the main menu of this page
uses this technique. It looks the same as a regular link.
Document to document Links - links to other pages in the same
URL. I use this when I want you to jump back to the main page from this page.
All you do is insert the file's name where the URL would be in a a href tag!
This concludes Chapter #7
TOP OF PAGE
Chapter #8Enhansing your webpages
In this chapter you'll learn how to include images, audio, video and even multimedia
into your webpages. You'll also learn how to edit images.
Including images - shows graphics
Example:
<img src="file name goes here">
Now I'm going to use the name of the graphic at the top of this page, it's name
is main.gif
It would look like this on your browser's screen:
You can also use placement tags such as aligning to center and aliging right:
Center:
<center><img src="image.gif"></center>
It looks like this:
Right
You don't have to align the image, it automatically aligns it to the left.
NOTE: Sometimes people have their browser's set to not load images, so you may
want to include a text-only version of your page!
Image Links - lets you use an image as a link
<a href="some page"><img src="image.gif"></a>
Where do I get Pictures and Graphics?
Stealing Images
I'm not responsible for any copyright laws you might break
Audio, Video, and Multimedia
<a href="audio or video file name"><img src="image.gif"></a>
It looks just like a link!
NOTE: Remember that sound and video files are large and take a long
time to load
Background Sound - added to the body tag lets a sound file
start to play when the page is loaded. The user doesn't have to click on anything!
bgsound src="sound file name" loop="number or infinite">
If my sound file name was me.wav and I wanted the file to play forever
the tag would be:
<body bgsound src="me.wav" loop="infinite">
NOTE: Remember you need to include the bgsound tag
into your <body> tags where you include the text, link, and vlink
colors!
This concludes Chapter #8
TOP OF PAGE
http://www.geocities.com/SunsetStrip/1697/html.htm
Chapter #9Extentions
Horizontal Rules - horizontal lines that break the page
Example:
Looks like:
You can change the width and size of the horizontal rules by:
-Width
Looks like:
You can mess with the numbers to taylor the length to your liking
-Size
Looks like:
You can mix and match sizes and widths, the preceeding examples combined would be entered
like this:
And look like this:
Look close the lines are the horizontal rules!
Image Borders - a variable border around a specified image
You use the same image tag that you learned earlier, except after the image's name
you add a simple extra word or two!
Example:
<img src="image.gif" border=2>
Looks like:
Originally (without border) 
Now with border
Text Colors and Sizes - you can change the text color and size
inside a document without having to change the body
Example:
-Color
<font color="#color code">
I used that in the line above, to see this View this page's HTML
-Size
Looks like (without that color):
your info goes here (see it's smaller!)
To see some cool HTML colors Click HERE, but
some basic ones are:
NOTE: All 0's are zeros'
|
|
