WebPaws.com New Logo
Google
 
Web WebPaws.com
     Home      Service Contract      Services      Support      Terms of use      Site Map Bookmark Us     

The Internet, HTML and FTP

By:   Ryne C. Allen


I   INTRODUCTION

II   HTML, the foundation of Web Pages

III   What is the Internet?
        What are Web Pages and Websites?
        So what actually happens when you follow a hypertext link?

IV   HTML BASICS
  A INTRO TO TAGS
  B BASIC HTML PAGE FORMAT (refer to Figure 1 in section V)
  C FONT TAGS
        Attributes within FONT
  D LIST TAGS
        Unordered List:
        Ordered List:
        Menu and Directory Lists:
        Glossary Lists:
  E TABLE TAGS
        Attributes
  F LINK TAGS
        Attributes
  G IMAGE TAGS

V   HTML EDITOR
        USING NOTEPAD or WORDPAD
        Figure 1 - Notepad Editor with Basic HTML coding for a Web Page

VI   FTP
  WS_FTP Features
  USING WS_FTP
        Figure 2 - WS_FTP profile setup

APPENDIX A
  Other HTML references On-Line:

APPENDIX B
  Internet Acronyms, Abbreviations and HTML Tags

 

I INTRODUCTION

The Internet has revolutionized the way we communicate by providing to almost anyone instantaneous publication of their writings, images, art, sound, music, video, etc.

The standard language for communicating over the Internet is known as HyperText Markup Language (HTML).

This class reviews some basic mechanisms for properly converting your text and images into an HTML format and then uploading these files for access onto your Web Site.

A brief history of HTML and an Internet briefer leads into the mechanics of HTML tags. You will have a good understanding of an HTML page format and be able to do some basic typesetting with these new tools.

HTML can be edited by simple text editors and is easily viewed by any Internet browser.

The final process of making your text, audio and images available and accessible on your Web site is complete by FTP’ing your files to your directory on your hosting server.

 

II HTML, the foundation of Web Pages

HTML, which stands for HyperText Markup Language, is used to write Web Pages. The hypertext concept was first proposed by computer visionary Ted Nelson in 1974. Electronic hypertext allows words or phrases to be linked to other text within the same document or in another document, thus allowing a virtual web of information. Ted's concept had been expanded upon to include graphics, video and audio clips. In order to view HTML, you need a Web browser such as Mosaic, Netscape or Internet Explorer. To view these pages remotely from any computer station, your browser will request them from a hosting computer using the protocol TCP/IP (Transmission Control / Internet Protocol) to transmit those pages back to your Web browser in the HTTP (HyperText Transfer Protocol) format.

Did you ever wonder when you save a word processor document, how the document remembers which words are in bold? What actually happens is that invisible commands are hidden in the document, indicating which text is in bold. HTML is normal text, but the special commands are visible. The document contains the commands required to make text bold, insert images etc. These commands are called Tags and each command lies between angle brackets, '<' and '>'.

As HTML has evolved, several versions have arisen. Each version of HTML has attempted to reflect greater consensus among industry players so that the investment made by content providers will not be wasted and that their documents will not become unreadable within a short period of time. The last major version was 3.2, and the most recent version today is 4.0. The evolution adds more and more capabilities to the code (HTML) and to the web page designer, as well as increasing the efficiency of the Internet. A current development is Dynamic HTML or DHTML that allows text movement and other special effects within a page design.

HTML 4.0 extends HTML with mechanisms for style sheets, scripting, frames, embedding objects, improved support for right to left and mixed direction text, richer tables, enhancements to forms, and offers improved accessibility for people with disabilities.

Why use HTML? Well, let's first understand the Internet and how computers connect and talk.

 

III What is the Internet?

The Internet is a vast number of computers connected together. These computers all have information on them, which they share. A computer that shares information with other computers on the Internet is called a Host. When you add up all this information from all the different computers (estimated to be more than 36 million), you can see why the Internet features so heavily in the media. Furthermore, the Internet is growing fast. By the year 2000 it is expected that the Internet will contain well over 50 million hosts. While these figures are impressive, a more interesting thought is the social trend that they indicate. Through the use of the Internet, more and more people all over the world can communicate with each other. Furthermore, other communication systems are using the Internet: witness that the first video communication systems are running, transmitting their information via the Internet instead of expensive satellite systems.

For any computer to be able to share information with another computer, a communication standard must be shared. This means that the computers have to know how to ask for information or indicate that they are sending information, etc. The communication standard (or protocol) the Internet uses is called "Transmission Control Protocol/Internet Protocol (TCP/IP)" and all computers on the Internet must speak it. So TCP/IP explains how the information is transmitted over the Internet. However, the information itself is formatted as well. For example, a Word™ document and a plain text document may contain the same information, but the format of the information is different.

The World Wide Web (WWW or Web) is a part of the Internet. As such, it still transfers information via TCP/IP. But all the information that is part of the Web is in a format called HTML.

 

What are Web Pages and Websites?

A Web page is a single web document. A Web page can contain text, images, JAVA and more. When you look around the Web, always keep in mind that you can learn from the Web Pages that you view. Just right click on any Web Page (using most browsers) and select 'View Source. This displays the source HTML document (i.e., the document with all the HTML tags in it). You can see how other authors have used HTML.

A Website is a collection of Web pages, usually linked together with hypertext links. A hypertext link is the name for the clickable pieces of text that, when clicked, takes you to another Web page. This process is usually described as following a hypertext link.

To put a Web page onto the Internet, it has to be placed on a computer that is a host. Some hosts provide Internet access for many people. These hosts are usually called Servers. Usually, you connect to a server when you want to use the Internet. Any Web pages you create are stored on the server, which is connected to the Internet 24 hours a day. This means that people can view your Web pages all the time.

 

So what actually happens when you follow a hypertext link?

  1. Each hypertext link has an address of a computer host and the name of a document on the host. Say you click on a hypertext link that has the address of the following computer host: http://www.widowsweb.com/widows/plea.html
  2. Your computer sends out a message to the host identified as www.widowsweb.com asking for the Web page labeled plea.html belonging to the widows’ directory.
  3. The host then looks in a special directory that widowsweb.com uses for their Web pages. The server is looking for a file called plea.html in their subdirectory widows. If this file can not be found, a message is returned to your Browser. This message is usually along the lines of 'URL not found'.
  4. Assuming the file plea.html is found, then this file is copied from widowsweb's host to your host and then onto your personal computer. You can now view the contents of the widowsweb.com’s plea.html file using your Browser.

 

 

IV HTML BASICS

A INTRO TO TAGS

HTML uses "tags" to define type setting rules on the affected text, e.g., the "b" tags will change the text to <b>bold</b>. Tags are defined between the angle brackets, < >. Some tags need an ending command which uses a forward slash "/" at the start of the tag.

The HTML tags below could be part of any document: <B> <I> This is </I> <U> an example </U> </B>.

Think of the Tags above as:
<B> Turns Bold on
<I> Turns Italics on
<U> Turns Underline on
</B> Turns Bold off
</I> Turns Italics off
</U> Turns Underline off

When the HTML code above is viewed through a browser, it will appear as follows;

This is an example.

So by using a Browser (such as Mosaic, Netscape or Microsoft Internet Explorer) to view an HTML document, you will see the formatted text as you would in a WORDtm document.

 

B BASIC HTML PAGE FORMAT (refer to Figure 1 in section V)

<HTML>

<HEAD>

<TITLE>The Title of this Web Page</TITLE>

</HEAD>

<BODY>

This is the main body of your Web Page.

</BODY>

</HTML>

To start and stop a Web Page, the HTML tag is used. <HTML> starts the page while </HTML> ends the page. Note that the command to end execution of the Tag’s code is a forward slash followed by the original command in angle brackets, e.g., <B>makes text bold</B>. This is true for most tags, but does not apply to all of them.

The HEAD tag stores some very important information about your page. It stores the page’s title, all the META tags, JAVA scripts and some other commands that can be used by browsers, servers, or other tools to index or keep track of that document.

The BODY tag is where all the main page information goes. This can be arranged with tables, frames, lists, etc.

C FONT TAGS

 

Attributes within FONT

FACE = "Arial, Times New Roman, Serif, Courier, Helvetica"

SIZE = "1", size numbers can range from 1 to 7. 1 is the absolute smallest, 7 the absolute largest

COLOR = "#RRGGBB", Red-Green-Blue in Hex from 00 to FF, "#FF0000" is red, "#00FF00" is green, "#0000FF" is blue, "#000000" is black

Example:

<FONT FACE="Arial, Helvetica" SIZE="3" COLOR="#FF0000">This is the red text in an Arial font with Helvetica as a backup and having a size of 3</FONT>

 

 

D LIST TAGS

 

Unordered List:

<UL>

<LI></LI>

</UL>

Attributes within Unordered Lists:

TYPE

The possible values for TYPE are as follows:

TYPE=DISC, for a solid bullet (the default)

TYPE=CIRCLE, for a hollow bullet

TYPE=SQUARE, for a square hollow bullet

Example of an Unordered List:

<P>John’s Western Omelet has 3 ingredients:</P>

<UL TYPE=SQUARE>

<LI>Eggs</LI>

<LI>Ham</LI>

<LI>Onions</LI>

</UL>

Output:

John’s Western Omelet has 3 ingredients:

  • Eggs
  • Ham
  • Onions

 

Ordered List:

<OL>

<LI>put the first item here</LI>

</OL>

Attributes within Ordered Lists:

TYPE

The possible values for TYPE are as follows:

TYPE=1, the default, which labels the list items with numbers (1,2,3)

TYPE=A, which orders the list items with capital letters (A,B,C, and so on)

TYPE=a, which orders the list items with lowercase letters (a,b,c, and so on)

TYPE=I, which labels the list items with capital roman numerals (I, II, III, and so on)

TYPE=i, which labels the list items with lowercase roman numerals (i, ii, iii, and so on)

START indicates the number from which the list is to be started.

Example of an Ordered List:

<P>Mary’s Omelet has 2 ingredients:</P>

<OL TYPE=I START=3>

<LI>Eggs</LI>

<LI>Green Peppers</LI>

</OL>

Output:

Mary’s Omelet has 2 ingredients:

III. Eggs

IV. Green Peppers

 

Menu and Directory Lists:

<MENU>

<LI></LI>

</MENU>

<DIR>

<LI></LI>

</DIR>

Example of Menu and Directory Lists:

<MENU>

<LI>Milk</LI>

<LI>Green Eggs</LI>

<LI>SPAM</LI>

</MENU>

<DIR>

<LI>files/</LI>

<LI>mail/</LI>

</DIR>

Output:

  • Milk
  • Green Eggs
  • SPAM
  • files/
  • mail/

 

Glossary Lists:

<DL>

<DT><DD>

</DL>

Attributes within Glossary Lists:

COMPACT is used for the "compact" form of the glossary list in which less space is used for the list.

Example of a Glossary List:

<DL COMPACT>

<DT>Application<DD>A program designed to assist in the performance of a specific task.

</DL>

Output:

Application

A program designed to assist in the performance of a specific task.

 

E TABLE TAGS

<TABLE>

<CAPTION>This is a table with two columns and one row

</CAPTION>

<TR>row 1

<TH>column 1, in bold (header format)

</TH>

<TD>column 2, plain

</TD>

</TR>

</TABLE>

 

Attributes

WIDTH:

Indicates the width of the table, in exact pixel values <TD WIDTH="200"> or as a percentage

of page width <TD WIDTH="50%">.

CELLSPACING:

Defines the amount of space between the cells in the table in pixels.

CELLPADDING:

Defines the amount of space between the edges of the cell and its contents in pixels.

BORDER:

Indicates whether the table will be drawn with a border. The default is no border.

ALIGN:

When used with <TR>, the possible values are LEFT, CENTER, and RIGHT, which indicate the horizontal alignment of the cells within that row (overriding the default alignment of heading and table cells).

When used with <TH> or <TD>, the possible values are LEFT, CENTER, and RIGHT, which override both the row’s alignment and any default cell alignment.

VALIGN:

When used with <TR>, possible values are TOP, MIDDLE, and BOTTOM,. VALIGN indicates the vertical alignment of the cells within that row (overriding the defaults).

When used with <TH> or <TD>, the same possible values are used, and VALIGN overrides both the row’s vertical alignment and the default cell alignment.

BGCOLOR:

The background color within either the table or column, ="#RRGGBB"

ROWSPAN:

The number of rows this cell will span. The default is 1.

COLSPAN:

The number of columns this cell will span. The default is 1.

NOWRAP:

The contents of the cell will not automatically wrap.

Example:

<TABLE BORDER="1" CELLSPACING="5">

<TR ALIGN="CENTER">

<TH>Employee</TH>

<TH>June Expenses</TH>

<TH>July Expenses</TH>

</TR>

<TR ALIGN=CENTER VALIGN=TOP>

<TD>John

<TD>$52.45</TD>

<TD>$5.60</TD>

</TR>

<TR ALIGN=CENTER VALIGN=BOTTOM>

<TD>Harry

<TD>$20.00</TD>

<TD>$100.00</TD>

</TR>

</TABLE>



TABLE OUTPUT:

 

F LINK TAGS

<A HREF="http://www.webpaws.com/index.html">WebPaws.com</A>

This is a page link, which will display WebPaws.com with an underline and when clicked will hyper skip to that page.

<A HREF="mailto:webmaster@webpaws.com">Webmaster</A>

This is an E-mail link, which will activate the local E-mail program/profile to compose an electronic letter to the mail recipient listed in the link.

<A HREF="./downloads/ws_ftp.zip">Download WS_FTP.ZIP</A>

This link will download the zipped file ws_ftp.zip located on the host server in the subdirectory "downloads" to your local hard drive.

Attributes

HREF:

Indicates the destination URL (document address) to call. An *.html file will open in your

browser, and a *.exe or *.zip file will trigger a file download (FTP)

NAME:

Defines current line as a destination point for internal jumps or jumps to a specific spot on

another page

TARGET:

indicates the name of the window to be used when going to the hypertext link

 

G IMAGE TAGS

<IMG SCR="./images/my_logo.gif" BORDER="0" ALIGN="middle" WIDTH="400" HEIGHT="100">

BORDER thickness of the border surrounding the image (like a picture frame)

ALT text string used as an alternate description of image for non-graphical browsers

ALIGN alignment of the image relative to its placement

WIDTH width of image

HEIGHT height of image

SCR this indicates the URL for the HTML image to be displayed. Possible image formats are

JPG and GIF

 

This will insert a GIF image into the page as placed in the page without a border, aligned to the middle of its position.

 

V HTML EDITOR

Editing HTML can be done with a simple text editor like Windows NOTEPAD or WORDPAD. There are more sophisticated WYSIWYG HTML editors like Macromedia’s Dreamweaver, Suasage’s HotDog, and even Microsoft’s FrontPage.

An Internet browser will only recognize an HTML file if it has either the extension htm or html. There are some special cases, but that is beyond the scope of this class.

WYSIWYG editors are nice, but don’t really let you take full control of your HTML code. In coding HTML, the simpler the better, and the more organized the easier it is to edit the text later. In the text mode, you may want to indent nested tables and related tags, add non-displaying comment lines, employ symmetry, and in general keep your codes and text easy to read and understand.

USING NOTEPAD or WORDPAD

In WIN95 or WIN98, you can open more than one window or editing session. This is good if you want to transfer text and code between pages. You simply employ the cut and paste commands to transfer materials. When opening either editor, you want to first find the HTML file to edit. This is accomplished by choosing "file", "open", and then changing "files of type:" to "All Files". This will allow you to find your "htm" and "html" files as well as all others.

After making changes and saving your file, you will want to check the changes by viewing them on your Web Browser. Open your browser, select "file", "open", and you can either browse to your file or type its path then hit the carriage return. Make sure your tags are properly closed and matched. This becomes easier with well organized coding.

Figure 1 - Notepad Editor with Basic HTML coding for a Web Page

VI FTP

FTP stands for File Transfer Protocol. This is one of the standard protocols defined for use on a TCP/IP network and allows the user to transfer files between computers. FTP is a client/server based protocol, whereby a client program on one system (the local system) sends requests to a server program on another system (the remote system) and receives replies from the server using an FTP server program.

There are several Windows based FTP programs on the market and available through shareware such as WS_FTP and CuteFTP. We are going to focus on WS_FTP Pro since this is what we will use in this class.

WS_FTP Pro is a Windows-based application for transferring files between your PC (the local system) and a remote system. Using WS_FTP Pro, you can connect to another system from your PC, browse directories and files on both systems, and transfer files between the systems.

WS_FTP Pro provides ease of use for the beginner plus a full set of functions for the power user. See WS_FTP features below for a list of some of the available features.

WS_FTP Pro is a File Transfer Protocol (FTP) client application that complies with the Windows sockets (Winsock) standard. WS_FTP Pro can connect to any system that has a valid Internet Address and contains an FTP server program, allowing you to transfer files between a wide variety of systems, including Windows, OS\2, and UNIX systems.

 

WS_FTP Features

You can use WS_FTP to:

  • Create a connection between a local system and a remote system
  • Create and retain session profiles to automate the logon and connection to frequently used remote systems
  • Display and browse directories and files on both the local and remote systems
  • Transfer one or more files between the local and remote systems (in either direction) using Window's point-and-click capabilities
  • Access the vast store of information on anonymous FTP sites

 

USING WS_FTP

Once the program is set up, you just run it, select the proper profile name, click "OK" and you’ll soon be connected. You can connect directly through a modem or a proxy server.

Setting up a profile for an FTP session is relatively easy, too. You will need to know the host name, user ID and password to properly connect to the FTP remote server program. Refer to Figure 2 for your actual profile setup.

 

Figure 2 -WS_FTP profile setup

Make sure the path in the upper right hand window reflects your proper subdirectory name that you are logging onto.

When transferring files, make sure the names are identical paying special attention to upper and lower case letters. When you map an image file or HTML file, they are case sensitive. Also transfer the files into the same directory structure. Images will go into the image subdirectory, resume files will go into the resume subdirectory and the main HTML files will stay in the root directory.

WS_FTP Pro is somewhat GUI driven. By highlighting the file on the left (your local computer’s current directory) and then clicking on the right arrow in the middle, the file will be copied over to the remote computer’s directory. This is called uploading files. When you copy files from the remote server’s directory to your local directory you have downloaded a file.

Your next assignment is to download the current files into a directory on your local machine. This will be your backup as well as your working files for editing and then uploading your Web Pages.

 

APPENDIX A

Other HTML references On-Line:

  • W3 Consortium an organization to promote the Web, links to many web related documents. As well as formal Specs for HTML and HTTP.

http://www.w3.org

http://www.yahoo.com/Computers_and_Internet/Software/Data_Formats/HTML/

http://www.newbie.net/sharky/frames/intro.htm

  • The HTML Playground A definitive resource to learn more about HTML tags and code with live examples.

http://htmlplayground.com/

http://www.sharefile.com/content/beginners-html.aspx

http://home.netscape.com/assist/net_sites/html_extensions.html

APPENDIX B

Internet Acronyms, Abbreviations and HTML Tags

&nbsp;

Non Breaking SPace

&quot;

represents " in HTML

<A>

start a link (also known as an Anchor)

</A>

end a link (also known as an Anchor)

<ADDRESS>

start an address which is a signature-like entity (i.e., author’s name, address, etc.) usually located at the bottom of a page

</ADDRESS>

end an address which is a signature-like entity

<APPLET>

a small piece of code, embedded in an HTML document, that can be transported over the Internet and executed on the recipient’s machine

<BASE>

indicates the full URL of the current document

<BASEFONT>

indicates the "base" or default font size

<BIG>

increases the size of the basefont by 1 absolute unit

</BIG>

ends the increases to the size of the basefont by 1 absolute unit

<BODY>

start the BODY (text and tags) of an HTML document

</BODY>

end the BODY (text and tags) of an HTML document

<BR>

a line BReak

<CENTER>

start CENTERing content after this tag

</CENTER>

end CENTERing content after this tag

<DIR>

start a directory list

</DIR>

end a directory list

<DIV>

start a division of a page into an independent part which can have its own style sheet and can be managed separately from other elements in the document

</DIV>

end a division of a page

<FONT>

start control of FONT attributes of enclosed text

</FONT>

end control of FONT attributes of enclosed text

<H1>

start heading level 1 (large)

</H1>

end heading level 1 (large)

<H2>

start heading level 2 (medium)

</H2>

end heading level 2 (medium)

<H3>

start heading level 3

</H3>

end heading level 3

<H4>

start heading level 4

</H4>

end heading level 4

<H5>

start heading level 5

</H5>

end heading level 5

<H6>

start heading level 6

</H6>

end heading level 6

<HEAD>

start the head of the HTML document

</HEAD>

end the head of the HTML document

<HR>

Horizontal Rule line

<HTML>

start the HTML document

</HTML>

end the HTML document

<I>

start of italic text

</I>

end of italic text

<IMG>

Insert an inline image

<LI>

LIst element

<META>

an open format for describing information about the content of a Web page buried within the <HEAD> tags

<OL>

start Ordered List

</OL>

end Ordered List

<P>

start a Paragraph

</P>

end a Paragraph

<PRE>

PREformated text

<SCRIPT>

start client side SCRIPT

</SCRIPT>

end client side SCRIPT

<SMALL>

reduce the size of text by one absolute unit from basefont or within the font tags

</SMALL>

end text size reduction

<STRIKE>

puts a line through text, a text strike out

</STRIKE>

ends the line through text, a text strike out

<STRONG>

start formatting following characters using stronger emphasis (usually bold)

</STRONG>

end formatting text using stronger emphasis (usually bold)

<SUB>

start a subscript

</SUB>

end a subscript

<SUP>

start a superscript

</SUP>

end a superscript

<TABLE>

start a TABLE

</TABLE>

end a TABLE

<TD>

start a Table column

</TD>

end a Table column

<TH>

start a Table Heading cell

</TH>

end a Table Heading cell

<TITLE>

start the TITLE of document

</TITLE>

end the TITLE of document

<TR>

start a Table Row

</TR>

end a Table Row

<U>

start a text underline

</U>

end a text underline

<UL>

start an Unordered List (bulleted list)

</UL>

end an Unordered List

DNS

Domain Name Server

FTP

File Transfer Protocol

GIF

Graphics Interchange Format (image suitable for use on a Web page)

HTML

Hyper Text Markup Language

IP

Internet Protocol

JAVA

an object-oriented programming language similar to C++, but very portable

JPEG

Joint Photographic Experts Group (higher resolution image suitable for Web pages)

JPG

short for JPEG

META

data about data

TCP

Transmission Control Protocol, governs the breakup, reassembly and verification of data into packets

TCP/IP

Transmission Control Protocol/ Internet Protocol

URL

Uniform Resource Locator

W3C

World Wide Web Consortium

WWW

World Wide Web

XML

Extension Markup Language

Creative Commons License
This work is licensed under a Creative Commons License.

    Privacy Policy Contact
Copyright © 1998 - 2007 WebPaws.com WebPaws.com Logo Paw All rights reserved.