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.
URL's, What Are They
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}:{directory-path}
Not all of theses components are included in all web addresses.
An example of a URL is Wolfree Services which is at: http://www.thewildrose.net/wolfree/index.html
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 (Firefox, Internet Explorer, or
Safari
) that you'll be connecting to a web document. The next information you seek is "www.thewildrose.com". The ".com" is the zone, some common zones on the web are: .gov-government, .edu-education, .net-network, .uk-United Kindom etc. The "wildrose" is the domain or host, and the "www." is the name of the webserver of the computer you're connecting to.
FTP via a 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, sometimes you can use a different port name. Some of these are: IBM page http://ibm.com 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 a 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'.
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.
<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 Scott Hopkins (spudnic@gmail.com)"></address>
It looks like this in your browser: (not in that color though)
Created by Scott Hopkins (spudnic@gmail.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
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:
<b>This is bold</b>
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 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
- tabs and shows lists like defititions. Uses three tags!
Example:
<dd>Hypertext Markup Language
<dl>Starts definition list
<dt>Main Word
<dd>Definition of the main word
It looks like this in your browser:
- Starts definition list
- Main Word
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
<ul>1.) Number 1</ul>
It looks like this:
- Coffee
- Milk
The <dir> and </dir> tags is used for compacting a directory
Inner-Documental Comments
Lets you enter comments that won't appear on the browser's screen
Example:
<!-- enter your comments here ->
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.google.com">Google</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:
Google
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:
EMail Me <= Try it! this link works
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>
<a name="part1">This is 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!
|
7. Enhancing Your Webpage
|
|
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
<img src="image.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
<img src="image.gif" align=right>
Left
You don't have to align the image, it automatically aligns it to the left.
Image Links
- lets you use an image as a link
You can use an image as a link, here's an example:
<a href="some page"><img src="image.gif"></a>
Where do I get Pictures and Graphics?
You can make your own images with some programs, such as: Adobe Photoshop and Gemp. And probaly a few others that I have never seen.
Stealing Images
Just because you like an image on the net you CAN NOT! take it. Some pages say that you can borrow their images for your own use, in that case you are free to use that.
I'm not responsible for any copyright laws you might break.
Audio, Video, and Multimedia
You add clickable sound and video the same as you link to other pages, here's an Example:
<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!
Horizontal Rules
- horizontal lines that break the page
Example:
<hr>
Looks like:
You can change the width and size of the horizontal rules by:
-Width
<hr width=85>
Looks like:
You can mess with the numbers to taylor the length to your liking
-Size
<hr size=5>
Looks like:
You can mix and match sizes and widths, the preceeding examples combined would be entered like this:
<hr width=85 size=5>
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">
your info goes here
</font>
I used that in the line above, to see this page's HTML.
-Size
<font size=2>
your info goes here
</font>
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:
red= ff0000
blue= 0000ff
black= 000000
white= ffffff
green= 00ff00
NOTE: All 0's are zeros'
Background Images
- .jpg or .gif files can be used as background images
Example:
<body background="image filename">
NOTE: Remember to include the background tag into the body tag.
Tables
Example:
<table border=2 cellpadding=2 cellspacing=0 width=100%>
And you end your table with </table>
| Border = |
Width of rules between cells in the table |
| Cellspacing = |
spacing between the individual cells |
| Cellpading = |
space between border and contens of the cell |
| Width = |
width of table on screen (100% = whole screen) |
But Wait... That's not ALL!
You also have to have coordinates for the individual cells.
Example:
(You already have the preceeding table tag)
<tr>
<td width="50%">Cell 1</td>
<td width="50%">Cell 2</td>
</tr>
Looks like:
Tr = table rule (one horizontal row)
Td = certin section of table
width = width of cell in table
You can use as many <tr> and <td> tags as you want in your table as long as you support them!
For the cellspacing and cellpadding, you can use any number (usually a number 0-5) for the number value.
Marquee
- a line of text that scrolls across the screen
NOTE: Marquees' can only be seen in Microsoft's Internet Explorer
Example:
<marquee>This is a marquee</marquee>
Looks like (only if you have MS Internet Explorer, if you have another browser it will show up, but in italics):
Changing Font Styles
- lets you change the style of font to anyone that you can choose
NOTE: The person viewing has to have the font file that you are specifing, or it uses the default font.
Example:
<font face="script">This is in script</font>
Looks like this: (if you have the font called script)
This is in script
Forms
- easy way to submit info and comments
To see a form in action, Click Here
Frames
- divides your screen into sections
Notes about frames:
| Border: |
(yes or no) do you want the border or not. |
| Frameborder: |
the thickness of the line that seperates the sections. |
| Framespacing: |
tells how far apart the sections will be from each other. |
| Rows: |
tells how big the section screen (rows are distance from top and is horzontal) |
| Cols: |
tells how big the section screen (cols are distance from left side and is vertical) |
| Name: |
tells what you have named the section |
For ALL of your links have a target set as the name of the main screen
Example:
<a href="some URL" target="main screen name">
This will let the new site open in the main screen instead of the menu screen.
Src - tells the browser what file to display
Noresize - you can't resize the frame window
Noframes - tells the browser no support
You can have as many frames as you want!
|
