Internet, Email and Web page Design

Internet and E-mail

Introduction of Internet

The Internet, sometimes called simply "the Net," is a worldwide system of computer networks - a network of networks in which users at any one computer can, if they have permission, get information from any other computer (and sometimes talk directly to users at other computers). It was conceived by the Advanced Research Projects Agency (ARPA) of the U.S. government in 1969 and was first known as the ARPANet. The original aim was to create a network that would allow users of a research computer at one university to be able to "talk to" research computers at other universities. A side benefit of ARPANet's design was that, because messages could be routed or rerouted in more than one direction, the network could continue to function even if parts of it were destroyed in the event of a military attack or other disaster.

Use of Internet

The Internet is a worldwide collection of computer networks, cooperating with each other to exchange data using a common software standard. Through telephone wires and satellite links, Internet users can share information in a variety of forms. The size, scope and design of the Internet allows users to:

• connect easily through ordinary personal computers and local phone numbers;
• exchange electronic mail (E-mail) with friends and colleagues with accounts on the Internet;
• post information for others to access, and update it frequently;
• access multimedia information that includes sound, photographic images and even video; and
• Access diverse perspectives from around the world.
• Sharing research and business data among colleagues and like-minded individuals.
• Communicating with others and transmitting files via E-mail.
• Requesting and providing assistance with problems and questions.
• Marketing and publicizing products and services.
• Gathering valuable feedback and suggestions from customers and business partners.

An additional attribute of the Internet is that it lacks a central authority—in other words, there is no "Internet, Inc." that controls the Internet. Beyond the various governing boards that work to establish policies and standards, the Internet is bound by few rules and answers to no single organization.

Concept of Protocols

HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files (text, graphic images, sound, video, and other multimedia files) on the World Wide Web. As soon as a Web user opens their Web browser, the user is indirectly making use of HTTP. HTTP is an application protocol that runs on top of the TCP/IP suite of protocols (the foundation protocols for the Internet).

HTTP concepts include (as the Hypertext part of the name implies) the idea that files can contain references to other files whose selection will elicit additional transfer requests. Any Web server machine contains, in addition to the Web page files it can serve, an HTTP daemon, a program that is designed to wait for HTTP requests and handle them when they arrive. Your Web browser is an HTTP client, sending requests to server machines. When the browser user enters file requests by either "opening" a Web file (typing in a Uniform Resource Locator or URL) or clicking on a hypertext link, the browser builds an HTTP request and sends it to the Internet Protocol address (IP address) indicated by the URL. The HTTP daemon in the destination server machine receives the request and sends back the requested file or files associated with the request. (A Web page often consists of more than one file.)

Web Browser, Web Page, Website, Web Server, URL, DNS

Web Browser

A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to related resources. A web browser can also be defined as an application software or program designed to enable users to access, retrieve and view documents and other resources on the Internet.

Although browsers are primarily intended to access the World Wide Web, they can also be used to access information provided by web servers in private networks or files in file systems. The major web browsers are Firefox, Google Chrome, Internet Explorer, Opera, and Safari.

Web Page

A web page or webpage is a document or information resource that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a monitor or mobile device. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links. Web pages frequently subsume other resources such as style sheets, scripts and images into their final presentation.

Web pages may be retrieved from a local computer or from a remote web server. The web server may restrict access only to a private network, e.g. a corporate intranet, or it may publish pages on the World Wide Web. Web pages are requested and served from web servers using Hypertext Transfer Protocol (HTTP).

Website

A website, also written as Web site, web site, or simply site, is a set of related webpages containing content (media), including text, video, music, audio, images, etc. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web.

A webpage is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A webpage may incorporate elements from other websites with suitable markup anchors.

Web Server

Web server can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver content that can be accessed through the Internet.

The most common use of web servers is to host web sites but there are other uses such as data storage or running enterprise applications. The primary function of a web server is to deliver web pages on the request to clients. This means delivery of HTML documents and any additional content that may be included by a document, such as images, style sheets and scripts.

URL(Uniform resource locator)

A uniform resource locator or universal resource locator (URL) is a specific character string that constitutes a reference to an Internet resource. A URL is technically a type of uniform resource identifier (URI) but in many technical documents and verbal discussions URL is often used as a synonym for URI. Every URL consists of some of the following: the scheme name (commonly called protocol), followed by a colon, two slashes then depending on scheme, a domain name (alternatively, IP address), a port number, the path of the resource to be fetched or the program to be run, then, for programs such as Common Gateway Interface (CGI) scripts, a query string and an optional fragment identifier. For example:-
Http://www.depotschoola.com

DNS

The Domain Name System (DNS) is a hierarchical distributed naming system for computers, services, or any resource connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most importantly, it translates domain names meaningful to humans into the numerical identifiers associated with networking equipment for the purpose of locating and addressing these devices worldwide. The Domain Name System makes it possible to assign domain names to groups of Internet resources and users in a meaningful way, independent of each entity's physical location. Because of this, World Wide Web (WWW) hyperlinks and Internet contact information can remain consistent and constant even if the current Internet routing arrangements change or the participant uses a mobile device. Internet domain names are easier to remember than IP addresses such as 208.77.188.166. Users take advantage of this when they recite meaningful Uniform Resource Locators (URLs) and e-mail addresses without having to know how the computer actually locates them.

The Domain Name System distributes the responsibility of assigning domain names and mapping those names to IP addresses by designating authoritative name servers for each domain. Authoritative name servers are assigned to be responsible for their particular domains, and in turn can assign other authoritative name servers for their sub-domains. This mechanism has made the DNS distributed and fault tolerant and has helped avoid the need for a single central register to be continually consulted and updated.

In general, the Domain Name System also stores other types of information, such as the list of mail servers that accept email for a given Internet domain. By providing a worldwide, distributed keyword-based redirection service, the Domain Name System is an essential component of the functionality of the Internet.

Search Engine, Messenger Services

Search Engine

A web search engine is designed to search for information on the World Wide Web and FTP servers. The search results are generally presented in a list of results often referred to as SERPS, or "search engine results pages". The information may consist of web pages, images, information and other types of files. Some search engines also mine data available in databases or open directories. Unlike web directories, which are maintained only by human editors, search engines also maintain real-time information by running an algorithm on a web crawler (sometimes also known as a spider). When a user enters a query into a search engine (typically by using key words), the engine examines its index and provides a listing of best-matching web pages according to its criteria, usually with a short summary containing the document's title and sometimes parts of the text. World most used Search engines are Google.com, Yahoo.com, Baidu.com, Bing.com, Ask.com, AOL.com ect.

Messenger Services

A messenger service can come in two forms:  Instant Messaging and WinPopUp

Instant Messaging

Instant messaging (IM) is a form of real-time direct text-based chatting communication in push mode between two or more people using personal computers or other devices, along with shared clients. The user's text is conveyed over a network, such as the Internet. More advanced instant messaging software clients also allow enhanced modes of communication, such as live voice or video calling and inclusion of links to media.

WinPopUp

Winpopup sends messages from one Windows computer to another on the same LAN. It is available in all Windows versions from Windows for Workgroups 3.1 to Windows Me, but has never been included with Windows NT-based operating systems.

There is also a port to Linux with an extended feature called LinPopUp, which allows adding Linux computers to the set. Linpopup is an X Window graphical port of Winpopup, and a package for Debian linux. It runs over Samba. Linpopup does not have to run all the time, can run minimized, and its messages are encrypted with a strong cypher.

E-mail

Electronic mail, commonly known as email or e-mail, is a method of exchanging digital messages from an author to one or more recipients. Modern email operates across the Internet or other computer networks. Some early email systems required that the author and the recipient both be online at the same time, in common with instant messaging. Today's email systems are based on a store-and-forward model. Email servers accept, forward, deliver and store messages. Neither the users nor their computers are required to be online simultaneously; they need connect only briefly, typically to an email server, for as long as it takes to send or receive messages.

An email message consists of three components, the message envelope, the message header, and the message body. The message header contains control information, including, minimally, an originator's email address and one or more recipient addresses. Usually descriptive information is also added, such as a subject header field and a message submission date/time stamp.

Different types of E-mail Account

Web Mail
Web-based email is also known as Web Mail or browser-based email because it uses your browser and the Internet as tools to access your email account. Web-based email possesses virtually all the functionality of other types of email and allows access from anywhere in the world. Web Mail is characterized by its mobility and ease of use because there is no configuration. Our Web-based email technology is no exception as it requires no configuration - for the end-user it's as simple arriving to the address (URL) of your email site and entering a username and password. Enter Group Web-based email has all the standard functionality associated with POP mail, allowing users to:

•   Send, receive, forward and reply to email messages
•   Send and receive attachments
•   Create and manage folders
•   Create and manage contacts
•   Check mail from other POP email accounts
•   Customize signatures, identities and other preferences
•   Edit Passwords
•   Utilize auto-forwarding and vacation auto-responses

POP Mail
POP (Post Office Protocol) mail is normally used in conjunction with 3rd party email management software like Outlook or Eudora on your own computer. To receive mail with a POP mail account an end users connects to a shared mail server and then downloads all the new mail to their computer. Thereafter, your 3rd party email software located on your computer enables you to read, send and perform all the other management functions. Your computer (also known as the client side) is responsible for storing emails (also referred to as storing emails locally). POP mail is like a store-and-forward service, moving mail on demand normally from a mail server to a single local client computer. Once an email is delivered to the client software, the message is typically deleted from the POP server.

IMAP
IMAP (Internet Message Access Protocol) combines features of Web-mail and POP mail allowing you to access email from your local server. IMAP is more useful for businesses that have their own servers. IMAP is a client/server protocol in which your server receives and stores messages while the client computer displays the header and sender of the email. This system allows you to decide whether or not you would like to download the message. Even when downloaded, messages remain on the server. You can also delete messages, manipulate folders and accounts and manage other features on the server. Email stored on an IMAP server can be manipulated from many mediums such as home desktops, office workstations and laptops. IMAP provides mobility and convenience, eliminating the need to transfer messages or files back and forth between different computers.

Web Page Designing (HTML)

Web pages are written in HTML - a simple scripting language. HTML is short for Hyper Text Markup Language.

• Hypertext is simply a piece of text that works as a link.
• Markup Language is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get"). Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.

You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows. All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html").

Elements and tags

You are now ready to learn the essence of HTML:

Elements.

Elements give structure to a HTML document and tells the browser how website to be presented. Generally elements consist of a start tag, some content, and an end tag.

Tags

Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/".  Label content by putting it between an opening tag and a closing tag. HTML is all about elements. To learn HTML is to learn and use different tags.

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>Example</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

Explanation of the above code:

·         The <!DOCTYPE... > element tells the browser which version of HTML the document is using.

·         The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).

• The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the browser).
• The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
• The <p> tag declares a paragraph. This contains the body text.

Detail about all the different aspects of HTML, including:

· Text: Formatting, Resizing, Layout, Listing,

· Links: To local pages, To pages at other sites, To bookmarks

· Images: Inserting images (GIF and jpg), Adding a link to an image

· Backgrounds: Colors, Images, Fixed Image

· Tables

· Frames

· Forms

BACKGROUND COLOR

<body bgcolor="#FF0000">

BACKGROUND IMAGE

<body background="drkrainbow.gif"> or

<body background="drkrainbow.gif" bgcolor="#333333"> or

<body background="drkrainbow.gif" bgproperties="fixed">

Text: Formatting

Headings

There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important.

Typing this code:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

BASE FONT

To specify the overall font for your page add the <basefont> tag at the beginning of the <body> section.

Example:

<body>
<basefont face="arial, verdana, courier" size="4" color="green">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a basefont.<br>
</body>

FONT

The <font> tag will change the font (Size 1-7). Example:

<font color="red" face="arial" size="2">This local text looks different.</font>

TEXT FORMAT

These are the tags for text formats:

<b>text</b>	writes text as bold
<i>text</i>	writes text in italics
<u>text</u>	writes underlined text
<sub>text</sub>	lowers text and makes it smaller
<sup>text</sup>	lifts text and makes it smaller
<blink>text</blink>	guess yourself! (Note: Netscape only.)
<strike>text</strike>	strikes a line through the text
<tt>text</tt>	writes text as on a classic typewriter
<pre>text</pre>	writes text exactly as it is, including spaces.
<em>text</em>	usually makes text italic
<strong>text<strong>	usually makes text bold
<big>text</big>	increase the size by one
<small>text</small>	decrease the size by one

TEXT LAYOUT

These tags will let you control the layout.

HTML EXPLANATION <p>text</p> Adds a paragraph break after the text. (2 linebreaks). <p align="left">text</p> Left justify text in paragraph. <p align="center">text</p> Center text in paragraph. <p align="right">text</p> Right justify text in paragraph. text<br> Adds a single linebreak where the tag is. <pre>text</pre> Turns off automatic linebreaks text<wbr> Allows the browser to insert a linebreak at exactly this point - even if the text is within <nobr> tags. <center>text</center> Center text. <div align="center">text</div> Center text. <div align="left">text</div> Left justify text. <div align="right">text</div> Right justify text.

Horizontal Rule

Typing this code:

Here's a horizontal rule... <hr /> ...that was a horizontal rule :)

HTML Lists

Unordered (un-numbered) List or BULLETED LISTS

Bullet options:

• disc
• circle
• square

Syntax.

HTML-CODE EXPLANATION / EXAMPLE <ul> <li>text</li> <li>text</li> <li>text</li> </ul> Makes a bulleted list using the default bullet type: text text text <ul type="disc"> Starts a bulleted list using discs as bullets: This is one line This is another line And this is the final line <ul type="circle"> Starts a bulleted list using circles as bullets: This is one line This is another line And this is the final line <ul type="square"> Starts a bulleted list using squares as bullets: This is one line This is another line And this is the final line

 <ul>

   <li>List item 1</li>

   <li>List item 2</li>

   <li>List item 3</li>

</ul>

Ordered (numbered) List

Number options:

• Plain numbers
• Capital Letters
• Small Letters
• Capital Roman Numbers
• Small Roman Numbers

syntax.

HTML-CODE EXPLANATION / EXAMPLE <ol> <li>text</li> <li>text</li> <li>text</li> </ol> Makes a numbered list using the default number type: text text text <ol start="5"> Starts a numbered list, first # being 5. This is one line This is another line And this is the final line <ol type="A"> Starts a numbered list, using capital letters. This is one line This is another line And this is the final line <ol type="a"> Starts a numbered list, using small letters. This is one line This is another line And this is the final line <ol type="I"> Starts a numbered list, using capital roman numbers. This is one line This is another line And this is the final line <ol type="i"> Starts a numbered list, using small roman numbers. This is one line This is another line And this is the final line <ol type="1"> Starts a numbered list, using normal numbers. This is one line This is another line And this is the final line <ol type="I" start="7"> An example of how type and start can be combined. This is one line This is another line And this is the final line

Typing this code:

<ol>

   <li>List item 1</li>

   <li>List item 2</li>

   <li>List item 3</li>

</ol>

HTML Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.

Example

Consider this example:

<body style="background-color:orange">

This particular attribute statement, style="background-color:orange", tells the browser to style the body element with a background color of orange.

The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.

HTML Colors

In HTML, colors can be added by using the style attribute. You can specify a color name (eg, blue), a hexadecimal value (eg, #0000ff), or an RGB value (eg rgb(0,0,255)).

Syntax

Foreground Color

To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:

<h3 style="color:blue">HTML Colors</h3>

Background Color

To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:

<h3 style="background-color:blue">HTML Colors</h3>

Border Color

To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:

<h3 style="border:1px blue solid;">HTML Colors</h3>

This results in:

HTML Colors

Color Names

The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.

Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.

There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.

Color Name	Hexadecimal Value		Color Name	Hexadecimal Value
Black	#000000		Green	#008000
Silver	#c0c0c0		Lime	#00ff00
Gray	#808080		Olive	#808000
White	#ffffff		Yellow	#ffff00
Maroon	#800000		Navy	#000080
Red	#ff0000		Blue	#0000ff
Purple	#800080		Teal	#008080
Fushia	#ff00ff		Aqua	#00ffff

You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):

<h3 style="color:#0000ff">HTML Colors</h3>

HTML Links

Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor element.

To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.

Example HTML Code:

More information <a href="http://www.depotschool.com">Depot school</a>

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.

Absolute

This refers to a URL where the full path is provided. For example, http://www.quackit.com/html/tutorial/index.cfm

Relative

This refers to a URL where only the path, relative to the current location, is provided. For example, if we want to reference the http://www.quackit.com/html/tutorial/index.cfm URL, and our current location is http://www.quackit.com/html, we would use tutorial/index.cfm

Root relative

This refers to a URL where only the path, relative to the domain's root, is provided. For example, if we want to reference the http://www.quackit.com/html/tutorial/index.cfm URL, and the current location is http://www.quackit.com/html, we would use /html/tutorial/index.cfm. The forward slash indicates the domain's root. This way, no matter where your file is located, you can always use this method to determine the path, even if you don't know what the domain name will eventually be.

COLORS ON TEXT LINKS

The general color of text links is specified in the <body> tag, like in the example below:

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

• link - standard link - to a page the visitor hasn't been to yet. (standard color is blue - #0000FF).
• vlink - visited link - to a page the visitor has been to before. (standard color is purple - #800080).
• alink - active link - the color of the link when the mouse is on it. (standard color is red - #FF0000).

Link Targets

You can nominate whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target="_blank" opens the URL in a new window.

The target attribute can have the following possible values:

_blank	Opens the URL in a new browser window.
_self	Loads the URL in the current browser window.
_parent	Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
_top	Loads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren't any longer.

Example HTML Code:

Check out this <a href="http://www.depotschool.com/students/" target="_blank">depot school students</a>

Named Anchors (within the page)

You can make your links "jump" to other sections within the same page. You do this with named anchors.

To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).

This page uses a named anchor. I did this by performing the steps below:

Example HTML Code:

<h2>Link Targets<a name="link_targets"></a></h2>

This is done by linking to the name of the named anchor. You need to precede the name with a hash (#) symbol.

Example HTML Code:

<a href="#link_targets">Link Targets</a>

Email Links

You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.

Example HTML Code:

<a href="mailto:king_kong@example.com">Email King Kong</a>

Clicking on this link should result in your default email client opening up with the email address already filled out.

Example HTML Code:

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

HTML Images

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

Example of Image Usage

HTML Code:

<img src="httpabc.jpg" width="100" height="100" alt="Smile" />

The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:

src	Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
width	Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
height	Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
alt	Alternate text. This specifies text to be used in case the browser/user agent can't render the image.
border	Image border

Image Alignment

You can determine how your images will be aligned, relative to the other content on the page (such as a paragraph of text). You do this using the align attribute (left, right, top, middle, bottom).

HTML Code:

<p>

<img src="abc.jpg" width="100" height="100" alt="Smile" align="right"/>Here is a paragraph of text aligned to the right

</p>

Image Links

You can make your images "clickable" so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.

HTML Code:

<a href="http://www.quackit.com/html/tutorial">

<img src="http://www.quackit.com/pix/smile.gif"

            width="100" height="100" alt="Smile" />

</a>

Image Border

You might notice that this has created a border around the image. This is default behaviour for most browsers. If you don't want the border, specify border="0".

HTML Code:

<a href="http://www.depotschool.com">

<img src="abc.gif" width="100" height="100" alt="Smile" border="0" /></a>

IMAGE MAPPING

It is possible to make one image link to several pages, depending on where the image is clicked.

<img src="rainbow.gif" usemap = #example border=0>
<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com">
</map>

In the above example we only used rectangular imagemappings. Possible shapes are:

• <area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">
• <area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">
• <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">

HTML Comments

Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.

You write comments like this:

<!-- Write your comment here -->

Comments always start with <!-- and end with -->. This tells the browser when a comment begins and ends.

Example HTML Code:

<-- Display a happy image --->

<img src=http://www.abc.gif width="100" height="100" alt="Smile" />

HTML Tables

In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts. This is probably due to the restrictions that HTML has on layout capabilities - it wasn't really designed as a layout language.

Anyway, whether you use tables for presenting tabular data, or for page layouts, you will use the same HTML tags.

Basic table tags

In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.

HTML Code:

<table border="1">

<tr>

<td>Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

This results in:

Table cell 1

Table cell 2

You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include width, width, cellspacing and cellpadding.

You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.

Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

This results in:

Table cell 1

Table cell 2

Table Headers

Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.

Most browsers display table headers in bold and center-aligned.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th>Table header</th>

<th>Table header</th>

</tr>

<tr>

<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

This results in:

Table header	Table header
Table cell 1	Table cell 2

Colspan

You can use the colspan attribute to make a cell span multiple columns.

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th colspan="2">Table header</th>

</tr>

<tr>

<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>

</table>

This results in:

Table header
Table cell 1	Table cell 2

Rowspan

Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th rowspan="2">Table header</th><td>Table cell 1

</tr>

<tr>

<td>Table cell 2</td>

</tr>

</table>

This results in:

Table header	Table cell 1
	Table cell 2

Color

You can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your table - not just colors. For example, you can use CSS to apply width, padding, margin, etc

HTML Code:

<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>

<th style="color:blue;background-color:yellow;" rowspan="2">Table header</th><td>Table cell 1

</tr>

<tr>

<td>Table cell 2</td>

</tr>

</table>

This results in:

Table header	Table cell 1
	Table cell 2

HTML Forms

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.

An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from preset options.

In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.

The Input Tag

This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.

Text

Input type=text
  size=
  maxlength=
  name=
  value=
  align=
  tabindex=

Text fields are used for when you want the user to type text or numbers into the form.

<input type="text" />

Password

Input type=password
  size=
  maxlength=
  name=
  value=
  align=
  

textarea

Input type=textarea
rows=
cols=
name=

Example:

<textarea cols="40" rows="5" name="mytext">text area.
</textarea>

Hidden

Input type=hidden
  name=
  value=

Radio Buttons

Radio buttons are used for when you want the user to select one option from a pre-determined set of options.

<input type="radio" name="lunch" value="pasta" /><br />

<input type="radio" name="lunch" value="rissotto" />

Checkboxes

Checkboxes are similar to radio buttons, but enable the user to make multiple selections..

<input type="checkbox" name="lunch" value="pasta" /><br />

<input type="checkbox" name="lunch" value="rissotto" />

Submit & Reset

The submit button allows the user to actually submit the form.

<input type="submit" />

<input type="reset" />

Select Lists

A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.

The select list is created using the select in conjunction with the option tag.

<select name=”myselect”>

  <option value ="sydney">Sydney</option>

  <option value ="melbourne">Melbourne</option>

  <option value ="cromwell">Cromwell</option>

  <option value ="queenstown">Queenstown</option>

</select>

image

Input type=image
  name=
  src=
  align=
  border=
  width=
  height=

Example: <input type="image" src="rainbow.gif" name="image" width="60" height="60">

Form Action

Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.

Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.

You nominate an action page with the action attribute.

Example HTML Code:

<form name=myform action="abc.asp" method="post">

First name:

<input type="text" name="first_name" value="" maxlength="100" />

<br />

Last name:

<input type="text" name="last_name" value="" maxlength="100" />

<input type="submit" value="Submit" />

</form>

This attribute specifies the HTTP method to use when the form is submitted.

Possible values are:

get (the form data is appended to the URL when submitted)

post (the form data is not appended to the URL)

Providing this attribute is optional. If you don't provide it, the method will be post.

HTML Frames

In HTML, frames enable you present multiple HTML documents within the same window. For example, you can have a left frame for navigation and a right frame for the main content. Frames are achieved by creating a frameset page, and defining each frame from within that page. This frameset page doesn't actually contain any content - just a reference to each frame. The HTML frame tag is used to specify each frame within the frameset. All frame tags are nested with a frameset tag.

So, in other words, if you want to create a web page with 2 frames, you would need to create 3 files - 1 file for each frame, and 1 file to specify how they fit together.

Two Column Frameset

HTML Code:

The frameset (frame_example_frameset_1.html):

<html>

<head>

<title>Frameset page<title>

</head>

<frameset cols = "25%, *">

  <frame src ="frame_example_left.html" />

  <frame src ="frame_example_right.html" />

</frameset>

</html>

The left frame (frame_example_left.html):

<html>

<body style="background-color:green">

<p>This is the left frame (frame_example_left.html).</p>

</body>

</html>

The right frame (frame_example_right.html):

<html>

<body style="background-color:yellow">

<p>This is the right frame (frame_example_right.html).</p>

</body>

</html>

Add a Top Frame

You can do this by "nesting" a frame within another frame.

HTML Code:

The frameset (frame_example_frameset_2.html):

<html>

<head>

<title>Frameset page</title>

</head>

<frameset rows="20%,*">

  <frame src="/html/tutorial/frame_example_top.html">

<frameset cols = "25%, *">

  <frame src ="/html/tutorial/frame_example_left.html" />

  <frame src ="/html/tutorial/frame_example_right.html" />

</frameset>

</frameset>

</html>

The top frame (frame_example_top.html):

<html>

<body style="background-color:maroon">

<p>This is the Top frame (frame_example_top.html).</p>

</body>

</html>

(The left and right frames don't change)

Remove the Borders

You can get rid of the borders if you like. Officially, you do this using frameborder="0". I say, officially because this is what the HTML specification specifies. Having said that, different browsers support different attributes, so for maximum browser support, use the frameborder, border, and framespacing attributes.

HTML Code:

The frameset (frame_example_frameset_3.html):

<html>

<head>

<title>Frameset page</title>

</head>

<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

  <frame src="/html/tutorial/frame_example_top.html">

<frameset cols = "25%, *">

  <frame src ="/html/tutorial/frame_example_left.html" />

  <frame src ="/html/tutorial/frame_example_right.html" />

</frameset>

</frameset>

</html>

(The left, right, and top frames don't change)

Load another Frame

Most websites using frames are configured so that clicking a link in one frame loads another frame. A common example of this is having a menu in one frame, and the main body in the other (like our example).

This is achieved using the name attribute. You assign a name to the target frame, then in your links, you specify the name of the target frame using the target attribute.

Tip: You could use base target="content" at the top of your menu file (assuming all links share the same target frame). This would remove the need to specify a target frame in each individual link.

HTML Code:

The frameset (frame_example_frameset_4.html):

<html>

<head>

<title>Frameset page</title>

</head>

<frameset border="0" frameborder="0" framespacing="0" cols = "25%, *">

  <frame src ="/html/tutorial/frame_example_left_2.html" />

  <frame name="content" src ="/html/tutorial/frame_example_yellow.html" />

</frameset>

</html>

The left frame (frame_example_left_2.html):

<html>

<body style="background-color:green">

<p>This is the left frame (frame_example_left_2.html).</p>

<p>

<a target="content" href="frame_example_yellow.html">Yellow</a><br />

<a target="content" href="frame_example_lime.html">Lime</a>

</p>

</body>

</html>

The yellow frame (frame_example_yellow.html):

<html>

<body style="background-color:yellow">

<p>This is the yellow frame (frame_example_yellow.html).</p>

</body>

</html>

The lime frame (frame_example_lime.html):

<html>

<body style="background-color:Lime">

<p>This is the lime frame (frame_example_lime.html).</p>

</body>

</html>

The frameset Tag

In your frameset tag, you specify either cols or rows, depending on whether you want frames to go vertically or horizontally.

Attribute	Description
rows	Specifies the number of rows and their height in either pixels, percentages, or relative lengths. Default is 100%
cols	Specifies the number of columns and their width in either pixels, percentages, or relative lengths. Default is 100%

The frame Tag

For each frame you want to display, you specify a frame tag. You nest these within the frameset tag.

Attribute	Description
name	Assigns a name to a frame. This is useful for loading contents into one frame from another.
longdesc	A long description - this can elaborate on a shorter description specified with the title attribute.
src	Location of the frame contents (for example, the HTML page to be loaded into the frame).
noresize	Specifies whether the frame is resizable or not (i.e. whether the user can resize the frame or not).
scrolling	Whether the frame should be scrollable or not (i.e. should scrollbars appear). Possible values: auto yes no
frameborder	Whether the frame should have a border or not. Possible values: 1 (border) 0 (no border)
marginwidth	Specifies the margin, in pixels, between the frame's contents and it's left and right margins.
marginheight	Specifies the margin, in pixels, between the frame's contents and it's top and bottom margins.

The noframe Tag

The noframes tag is used if the user's browser doesn't support frames. Anything you type in between the noframes tags is displayed in their browser.

HTML Code:

<html>

<head>

<title>Frameset page<title>

</head>

<frameset cols = "25%, *">

  <noframes>

  <body>Your browser doesn't support frames.

  Therefore, this is the noframe version of the site.</body>

  </noframes>

  <frame src ="frame_example_left.html" />

  <frame src ="frame_example_right.html" />

</frameset>

</html>

Concept of CSS

CSS is a language that you can use to define styles against any HTML element. These styles are set using CSS properties. For example, you can set font properties (size, colors, style etc), background images, border styles, and much more.

Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.

CSS (Cascading Style Sheets) allows web authors to apply styles to their web pages. More importantly, CSS enables them to do this independently of the HTML that makes up each web page.

Therefore, as a web author, you can code your HTML without having to be concerned with what each HTML element is going to look like. You can change the look later using CSS.

CSS Advantages

HTML has its limitations when it comes to layout. Sure, you have 6 different levels of headings and 6 different sizes of fonts. You also have tables, and you have control over alignment etc. These are good enough to get a reasonable looking document that shows the true structure of information. However, it's a far cry from some of the excellent layout & design that we see in magazines and printed brochures etc.

CSS helps us achieve such layouts.

With CSS, you have much better control over the layout of your web pages. You can specify exactly how big a font will be, exactly where an element will be on a page, what the page will look like when printed, and much more.

CSS can also save you a lot of time, particularly when maintaining a large site. Also, the World Wide Web Consortium (W3C) recommends that web developers use CSS tags instead of HTML tags wherever possible. The W3C are gradually phasing out quite a few of these HTML tags.

Advantages of CSS

• CSS saves time
  When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
• Pages load faster
  Less code means faster download times.
• Easy maintenance
  To change the style of an element, you only have to make an edit in one place.
• Superior styles to HTML
  CSS has a much wider array of attributes than HTML.

Disadvantages of CSS

• Browser compatibility
  Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.

Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.

Example:

<style type="text/css" media=screen>

p {color:#ff0000;}

h1{

            color:blue;

            font-family:arial,helvetica,"sans serif";

            font-size:150%;

}

</style>

<head><title>css test</title></head>

<body>

<h1>CSS Test</h1>

<p>CSS Test</p>

</body>

Concept of Script Language

Programs written in scripting languages, called scripts, are not compiled ahead of time for specific computer systems like many high-level languages. Instead, the plain text that constitutes a script gets interpreted into computer commands while a program runs. Scripts are used to add interactivity to otherwise static Web pages. They also can perform repetitive tasks like automatically filling out parts of Web-based forms, among other uses.

Scripting languages normally are interpreted by Web browsers like Microsoft Internet Explorer or Netscape Navigator. Web browsers interpret scripts along with Hypertext Markup language (HTML), the language in which Web pages are written. This can be done in one of two ways. In one scenario, programs written in scripting languages can run directly from a server. Otherwise, a script can be included with or directly in an HTML Web page that someone downloads to a computer. In either case, the Web browser is used to access the program.

Script Language

JavaScript and Microsoft's Visual Basic Scripting Edition (VBScript) were two popular types of scripting languages. JavaScript was created by Sun Microsystems and Netscape. It is based on the Java programming language, but was developed independently. JavaScript has the ability to interact with HTML code, enabling developers to create more interactive, appealing Web sites without having to learn a complicated programming language. The language can be used for both client and server-based programs. Similar in many regards to JavaScript, Microsoft's Visual Basic Scripting Edition is based on the company's Visual Basic programming language. Among the benefits of Visual Basic Scripting Edition are its portability and speed. Not only is the language used by Web browsers, it also is used for other kinds of applications.

JavaScript

JavaScript is a scripting language that enables web developers/designers to build more functional and interactive websites.

Common uses of JavaScript include:

·         Alert messages

·         Popup windows

·         Dynamic dropdown menus

·         Form validation

·         Displaying date/time

JavaScript usually runs on the client-side (the browser's side), as opposed to server-side (on the web server). One benefit of doing this is performance. On the client side, JavaScript is loaded into the browser and can run as soon as it is called. Without running on the client side, the page would need to refresh each time you needed a script to run.

JavaScript syntax mean

What does JavaScript syntax mean? JavaScript syntax refers to a set of rules that determine how the language will be written (by the programmer) and interpreted (by the browser).

The JavaScript syntax is loosely based on the Java syntax. Java is a full blown programming environment and JavaScript could be seen as a sub-set of the Java syntax. Having said this, that is where the similarities end - Java and JavaScript are two totally different things.

In learning JavaScript you will become familiar with terms such as variables, functions, statements, operators, data types, objects etc.

Example:

<script type="text/javascript">

<!--

document.write("Hello World");

alert('Hello World');

-->

</script>

Explanation of code

• The <script> tags tell the browser to expect a script in between them. You specify the language using the type attribute. The most popular scripting language on the web is JavaScript.
• The bits that look like HTML comments tag (<-- -->) are just that - HTML comment tags. These are optional but recommended. They tell browsers that don't support JavaScript (or with JavaScript disabled) to ignore the code in between. This prevents the code from being written out to your website users.
• The part that writes the actual text is only 1 line (document.write("JavaScript is not Java");). This is how you write text to a web page in JavaScript. This is an example of using a JavaScript function (also known as method).

Where to put your scripts?

You can place your scripts in any of the following locations:

• Between the HTML document's head tags.
• Within the HTML document's body (i.e. between the body tags).
• In an external file (and link to it from your HTML document).

Example1:

<head><title>css test</title></head>

<body>

<input type="button" onClick="alert('Hello World');" value="Click Me!" />

</body></html>

Example2:

<head><title>css test</title>

<script type="text/javascript">

<!--

function calc()

{

var a,b,c;

a=parseFloat(document.myform.txt1.value);

b=parseFloat(document.myform.txt2.value);

c=a+b;

alert('Total:' +c);

document.myform.txt3.value=c;

}

-->

</script>

</head>

<body>

<form name=myform action="" method=post>

First Number:<input type=text name=txt1><br>

Second Number:<input type=text name=txt2><br>

<input type=button name=btn value="Addition" OnClick="calc()">

<input type=text name=txt3><br>

</body>

VBScript

VBScript (Visual Basic Script) is a scaled down version of Visual Basic. Visual Basic is a full blown programming language. VBScript, on the other hand, is a scripting language that can be run client-side (i.e. via your web browser), or server-side (i.e. on the web server). VBScript is the most common scripting language on websites that use ASP (Active Server Pages).

When VBScript is run on the client side, the user's browser needs to support VBScript. When run on the server side, the server needs to support it. In this tutorial, our VBScript examples are on the client-side, therefore, in order to get the most out of this tutorial, you should use Internet Explorer, as most other browsers don't support VBScript.

VBScript syntax

What VBScript syntax refers to, is a set of rules that determine how the language will be written (by the programmer) and interpreted (by the browser or server). The VBScript syntax is based on the Visual Basic (VB) syntax. VB is a full blown programming environment and VBScript is a scaled down version of VB.

You may also find the VBScript syntax similar to JavaScript in some ways. If you know JavaScript, or any other language for that matter, you will be familiar with terms such as variables, functions, statements, operators, data types, objects etc. VBScript includes these too.

Most of these will be covered throughout the rest of this tutorial. For now, we'll start with the basics.

Basic VBScript Code

Here's some basic VBScript that outputs some text to the browser. Again, if you know JavaScript, this will look familiar.

Example1:

<html>

<body>

<script type="text/vbscript">

document.write("Hello World")

</script>

</body>

</html>

Example2:

<head><title>VBScript</title>

<SCRIPT LANGUAGE="VBScript">

<!--

Sub mybtn_onClick()

Dim a,b,c

a=CInt(document.myform.txt1.value)

b=CInt(document.myform.txt2.value)

c=a+b

MsgBox "Total:" & c

document.myform.txt3.value=c

End Sub

-->

</script>

</head>

<body>

<form name=myform action="" method=post>

First Number:<input type=text name=txt1><br>

Second Number:<input type=text name=txt2><br>

<input type=button name=mybtn value="Addition">

<input type=text name=txt3><br>

</body>

Webpage Design and Editing Tools

Just like in most other professions, a web designer’s set of tools is what brings a concept into fruition. There are many applications available to our disposal, but there are some that just stand out from the crowd. The tools in this regarded as the most popular tools used for web design.

Fireworks

Adobe Fireworks is a commercial raster and vector graphics editor hybrid from Adobe that’s available for the Mac and Windows operating systems. Designed specifically for web designers (unlike Photoshop), Fireworks brings you a plethora of tools and options that make full web layout prototyping a breeze.

Dreamweaver

Adobe Dreamweaver is a commercial application for web development that’s available for the Mac and Windows operating systems. Its featured-packed suite of tools and options include: syntax highlighting and very smart Code Hinting, a built-in FTP client, project management and workflow options that make team work effortless, and Live View – which shows you a preview of your source code. Dreamweaver tightly integrates with other popular Adobe products such as Photoshop, allowing you to share Smart Objects for quick and easy updating and editing of graphics components.

Panic Coda

Panic Coda is a shareware web development application for the Mac OS X operating system. It seeks to reduce the amount of applications (such as an FTP client, CSS editor, a version control system, etc.) you need to develop websites and to improve your team’s workflow. Coda’s one-window web development philosophy uses a tabbed interface for text editing, file transfers, SVN, CSS, and even "Books" which embeds web books that are searchable (it comes with The Web Programmer’s Desk Reference but you can add your own).

Photoshop

Adobe Photoshop is a very popular commercial graphics editor available for the Mac and Windows operating system. Created for professional photographers and designers, it is the ideal application for manipulating images and creating web graphics. Photoshop has all the necessary tools and options you need such as: Filters – which automatically adds effects to your image or a selected section of your image, extensibility and automation with Brushes, Actions and Scripting, and workflow enhancement features like Layer Comps and the Revert option.

Firebug

Firebug is a free, open source in-browser web development tool for the Firefox web browser. It’s many features include: on-the-fly HTML and CSS editing for tweaking or debugging, a Console for logging, analyzing and debugging JavaScript, and an intuitive Document Object Model (DOM) inspection tool to help you quickly see how the elements of a web page relates to one another.