Lab.Manual_Web tech Lab

8/7/2019 Lab.Manual_Web tech Lab.

1/29

Essentials, Part 1, Lesson 1: Compiling &

Running a Simple Program

Training Index

[ ]

The computer age is here to stay. Households and businesses all over the world usecomputers in one way or another because computers help individuals and businesses

perform a wide range of tasks with speed, accuracy, and efficiency. Computers can

perform all kinds of tasks ranging from running an animated 3D graphics applicationwith background sound to calculating the number of vacation days you have coming to

handling the payroll for a Fortune 500 company.

When you want a computer to perform tasks, you write a program. A program is a

sequence of instructions that define tasks for the computer to execute. This lessonexplains how to write, compile, and run a simple program written in the Java language

(Java program) that tells your computer to print a one-line string of text on the console.

But before you can write and compile programs, you need to understand what the Java

platform is, and set your computer up to run the programs.

A Word About the Java Platform

Setting Up Your Computer

Writing a Program Compiling the Program Interpreting and Running the Program

Common Compiler and Interpreter Problems

Code Comments

API Documentation

More Information

A Word About the Java Platform

The Java platform consists of the Java application programming interfaces (APIs) and theJava 1 virtual machine (JVM).

Java APIs are libraries of compiled code that you can use in yourprograms. They let you add ready-made and customizable

functionality to save you programming time.
http://www.oracle.com/technetwork/java/index-jsp-135888.htmlhttp://www.oracle.com/technetwork/java/index-138747.htmlhttp://www.oracle.com/technetwork/java/index-138747.html#contentshttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#TJVMhttp://www.oracle.com/technetwork/java/compile-136656.html#TJVMhttp://www.oracle.com/technetwork/java/index-jsp-135888.htmlhttp://www.oracle.com/technetwork/java/index-138747.htmlhttp://www.oracle.com/technetwork/java/index-138747.html#contentshttp://www.oracle.com/technetwork/java/prog-140388.htmlhttp://www.oracle.com/technetwork/java/compile-136656.html#platformhttp://www.oracle.com/technetwork/java/compile-136656.html#setuphttp://www.oracle.com/technetwork/java/compile-136656.html#simplehttp://www.oracle.com/technetwork/java/compile-136656.html#comphttp://www.oracle.com/technetwork/java/compile-136656.html#runhttp://www.oracle.com/technetwork/java/compile-136656.html#debughttp://www.oracle.com/technetwork/java/compile-136656.html#commhttp://www.oracle.com/technetwork/java/compile-136656.html#apihttp://www.oracle.com/technetwork/java/compile-136656.html#morehttp://www.oracle.com/technetwork/java/compile-136656.html#TJVM


2/29

The simple program in this lesson uses a Java API to print a line of text to the console.

The console printing capability is provided in the API ready for you to use; you supply

the text to be printed.

Java programs are run (or interpreted) by another program called the Java VM. If you are

familiar with Visual Basic or another interpreted language, this concept is probablyfamiliar to you. Rather than running directly on the native operating system, the program

is interpreted by the Java VM for the native operating system. This means that anycomputer system with the Java VM installed can run Java programs regardless of the

computer system on which the applications were originally developed.

For example, a Java program developed on a Personal Computer (PC) with the Windows

NT operating system should run equally well without modification on a Sun Ultraworkstation with the Solaris operating system, and vice versa.

Setting Up Your Computer

Before you can write and run the simple Java program in this lesson, you need to install

the Java platform on your computer system.

The Java platform is available free of charge from the java.sun.com web site. You canchoose between the Java 2 Platform software for Windows 95/98/NT or for Solaris.

The download page contains the information you need to install and configure the Java

platform for writing and running Java programs.

Note: Make sure you have the Java platform installed and configured for your system

before you try to write and run the simple program presented next.

Writing a Program

The easiest way to write a simple program is with a text editor. So, using the text editor

of your choice, create a text file with the following text, and be sure to name the text fileExampleProgram.java. Java programs are case sensitive, so if you type the code in

yourself, pay particular attention to the capitalization.

//A Very Simple Exampleclass ExampleProgram {

public static void main(String[] args){

System.out.println("I'm a Simple Program");

}

}
http://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.html


3/29

Here is the ExampleProgram.java source code file if you do not want to type the program

text in yourself.

Compiling the Program

A program has to be converted to a form the Java VM can understand so any computerwith a Java VM can interpret and run the program. Compiling a Java program means

taking the programmer-readable text in your program file (also called source code) and

converting it to bytecodes, which are platform-independent instructions for the Java VM.

The Java compiler is invoked at the command line on Unix and DOS shell operatingsystems as follows:

javac ExampleProgram.java

Note: Part of the configuration process for setting up the Java platform is setting the class

path. The class path can be set using either the -classpath option with the javac

compiler command and java interpreter command, or by setting the CLASSPATHenvironment variable. You need to set the class path to point to the directory where theExampleProgram class is so the compiler and interpreter commands can find it. SeeJava

2 SDK Tools for more information.

Interpreting and Running the Program

Once your program successfully compiles into Java bytecodes, you can interpret and run

applications on any Java VM, or interpret and run applets in any Web browser with a

Java VM built in such as Netscape or Internet Explorer. Interpreting and running a Javaprogram means invoking the Java VM byte code interpreter, which converts the Java byte

codes to platform-dependent machine codes so your computer can understand and run theprogram.

The Java interpreter is invoked at the command line on Unix and DOS shell operatingsystems as follows:

java ExampleProgram

At the command line, you should see:

I'm a Simple Program

Here is how the entire sequence looks in a terminal window:
http://java.sun.com/developer/onlineTraining/Programming/BasicJava1/Code/ExampleProgram.javahttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://java.sun.com/developer/onlineTraining/Programming/BasicJava1/Code/ExampleProgram.javahttp://www.oracle.com/technetwork/java/j2se-eol-137618.htmlhttp://www.oracle.com/technetwork/java/j2se-eol-137618.html


4/29

Common Compiler and Interpreter Problems

If you have trouble compiling or running the simple example in this lesson, refer to the

Common Compiler and Interpreter Problemslesson in The Java Tutorialfortroubleshooting help.

Code Comments

Code comments are placed in source files to describe what is happening in the code to

someone who might be reading the file, to comment-out lines of code to isolate the

source of a problem for debugging purposes, or to generate API documentation. To theseends, the Java language supports three kinds of comments: double slashes, C-style, and

doc comments.

Double Slashes

Double slashes ( //) are used in the C++ programming language, and tell the compiler totreat everything from the slashes to the end of the line as text.

//A Very Simple Example

class ExampleProgram {



}

}

C-Style Comments

Instead of double slashes, you can use C-style comments ( /* */) to enclose one or more

lines of code to be treated as text.

/* These are

C-style comments

*/




}}

Doc Comments
http://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.htmlhttp://java.sun.com/docs/books/tutorial/getStarted/problems/index.htmlhttp://java.sun.com/docs/books/tutorial/trailmap.html


5/29

To generate documentation for your program, use the doc comments ( /** */) to enclose

lines of text for the javadoc tool to find. The javadoc tool locates the doc comments

embedded in source files and uses those comments to generate API documentation.

/** This class displays a text string at

* the console.*/




}

}

HTML Tags Chart

To use any of the following HTML tags, simply select the HTML code you'd like and

copy and paste it into your web page.

Tag Name Code Example Browser View

Nothing will show (Tip)


6/29

Definition of the term

Definition Term


term

Definition Term

Definition of the

term

definition

term

Definition Term


Definition Term


Definition Term

Definition of the

term

Definition TermDefinition of the

term

emphasisThis is an Example of using the emphasis

tag

This is an Example of using

the emphasis tag

embed

object

(Tip)

embed

object

Music will begin playingwhen your page is loaded

and will only play one time.

A control panel will be

displayed to enable yourvisitors to stop the music.

font Example Example (Tip)

fontExampleExample(Tip)

fontExample Example(Tip)

form

Name:

Email:

Name: (Tip)

Email:

Submit


7/29

heading 1

heading 2

heading 3

heading 4

heading 5heading 6

Heading 1 Example

Heading 2 ExampleHeading 3 Example

Heading 4 Example

Heading 5 ExampleHeading 6 Example

heading of

HTML

document

Contains elements describing thedocument

Nothing will show

horizontal

rule

Contents of your web page(Tip)

Contents of your web page

horizontal

rule



horizontal

rule



(Internet

Explorer)

horizontal

rule



(Internet

Explorer)

horizontal

rule



hypertext

markup

language

Title of your web page

HTML web page contents


italic Example Example

image (Tip)

input field Example 1:

Example 1: (Tip)

Submit
http://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm.htmhttp://www.web-source.net/216_color_chart.htm


8/29

(Internet

Explorer)input field

Example 2:

Example 2: (Tip)

Submit

input field

Example 3:

Example 3: (Tip)

input field

Example 4:

Enter Your Comments:

Example 4: (Tip)

Submit Clear

input field

Example 5:

Select an option:

option 1

option 2option 3

option 4

option 5option 6

Example 5: Tip)

Select an option:

Submit


9/29

input field

Example 6:

Select an option:

Option 1

Option2

Option 3

Select an option:

Selection

1

Selection 2

Selection

3

Example 6: (Tip)

Select an option:

Option 1

Option 2

Option 3

Select an option:

Selection 1

Selection 2

Selection 3

Submit

list item

Example 1:

List item 1

List item 2

List item 3

Example 2:

List item 1

List item 2List item 3

List item 4

Example 1: (Tip)

List item 1

o List item 2

List item 3

Example 2:

i. List item 1

ii. List item 2iii. List item 3

iv. List item 4

link

(Internet

Explorer)

scrolling

text

Example

Marquee

(Tip)

menu List item 1

List item 1
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm


10/29


o List item 2

List item 3

meta

Nothing will show (Tip)

metaNothing will show (Tip)

meta Nothing will show (Tip)




ordered list Numbered

List item 1


List item 4

Numbered Special Start

List item 1

List item 2


Lowercase Letters

List item 1


List item 4

Capital Letters

Numbered

1. List item 12. List item 2

3. List item 3

4. List item 4

Numbered Special Start

5. List item 1

6. List item 2

7. List item 38. List item 4

Lowercase Letters

a. List item 1

b. List item 2

c. List item 3d. List item 4

Capital Letters

A. List item 1

B. List item 2

C. List item 3D. List item 4

Capital Letters Special


11/29


List item 3

List item 4

Capital Letters Special Start

List item 1

List item 2


Lowercase Roman Numerals

List item 1


List item 4

Capital Roman Numerals

List item 1


List item 4

Capital Roman Numerals Special Start

List item 1


List item 4

Start

C. List item 1

D. List item 2

E. List item 3F. List item 4

Lowercase Roman

Numerals

i. List item 1

ii. List item 2iii. List item 3

iv. List item 4


I. List item 1

II. List item 2III. List item 3

IV. List item 4


Special Start

VII. List item 1

VIII. List item 2IX. List item 3

X. List item 4

listboxoption

Select an option:

Select an option:(Tip)


12/29

option 1option 2

option 3

option 4

option 5option 6

paragraph

This is an example displaying the use of the paragraph

tag.

This will create a line break and a spacebetween lines.

Attributes:

Example 1:

This is an example

displaying the use

of the paragraph tag.

Example 2:

This is an example

displaying the use

Example 3:

This is an example

displaying the use

This is an exampledisplaying the use of the

paragraph tag.

This will create a line break

and a space between lines.

Attributes:

Example 1:

This is an exampledisplaying the use


Example 2:

This is an exampledisplaying the use


Example 3:

This is an example

displaying the useof the paragraph tag.

small (text) Example Example(Tip)

deleted text Example Example

strong

emphasisExample Example

table

Example 1:

Example 1: (Tip)

Column 1 Column 2


13/29

Column 1

Column 2

Example 2: (Internet Explorer)

Column 1

Column 2

Example 3:

Column 1

Column 2

Row 2

Row 2

Example 2: (Tip)

Column 1 Column 2

Example 3: (Tip)

Column 1 Column 2

Row 2 Row 2

table data

Column 1

Column 2

Column 1 Column 2

table

header

Column 1

Column 2

Column 3

Row 2

Column

1

Column

2

Column

3Row 2 Row 2 Row 2

Row 3 Row 3 Row 3

Row 4 Row 4 Row 4
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm


14/29

Row 2

Row 2

Row 3

Row 3Row 3

Row 4Row 4

Row 4

documenttitle

Title of yourHTML page

Title of your web page will

be viewable in the title bar.(Tip)

table row

Column 1Column 2

Column 1 Column 2

teletype Example Example

underline Example Example

unordered

list

Example 1:


Example 2:


List item 3

List item 4

Example 1:

List item 1

List item 2

Example 2:

List item 1 List item 2

o List item 3

o List item 4


15/29

Creating an HTML Email Form


16/29

If you would like to provide your web site visitors with a simple way to contact you from your website, but really don't want to display your email address, this HTML form code may be what you'relooking for.

You can create a simple form, as displayed below, to enable your visitors to send you comments,questions, product support requests, or whatever you'd like.

Name:

Email:

Comment:

Submit Reset

Copy and paste the following HTML code into the HTML portion of your web page:

Name:

Email:

Comment:


17/29

Change the text indicated in red to your email address.

Displaying an email form on your web page provides a great way to enable your visitors tocontact you.

Create a Gradient Background Effect

A gradient background effect will display your selected HTML background colors in ascending ordescending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel.However, it must be used very cautiously.

Please ensure that you select your HTML web page background colors very carefully, as yourtext must be clearly visible through the background colors you select.

In addition, you must select one light color and another color that is several shades lighter inorder for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells.To use the gradient effect as your web page background, use the following BODY tag:

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2',startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient

effect to display properly, you must select one light color and another color that is several shadeslighter.


18/29

Replacing Your Standard HTML ListBullets With Graphic Bullets

If you're looking for a way to spice up your HTML list bullets, this HTML tip is for you. You can usegraphic bullets to replace the standard text bullets by using the "Definition List" tag.

The key to using this technique effectively is to select or create a small graphic that willcompliment your list text and enhance your visitors experience on your web site.

Copy and paste the following HTML list code into the HTML portion of your web page.

List ItemOneList ItemTwoList ItemThreeList ItemFour

Edit the text indicated in red to suit your needs.

Using graphic bullets within your HTML web pages will enable you to give your lists your owncustomized look.

Auto Fill Email Subject and Body

If you're using a list management system that requires specific text to be placed within the emailsubject or body of your email, this HTML code is for you.

Many times, if you request your visitors to type in a specific email subject or body text in order tosubscribe to your publication, they may not type the required text correctly. This mistake willcause you to lose your subscriber, as your system will reject the subscription request.

To prevent this problem, you can create an email link that will automatically fill in the subject lineand body when clicked on.


19/29

[email protected] the following code to your HTML.

[email protected]

Customizing HTML Web PageHorizontal Rules (Line Dividers)

(Internet Explorer)

The HTML web page horizontal rule , also known as a line divider, is used to divide contentareas within a web page.

These HTML horizontal rules can be used to divide your web page content subjects, products,navigational menus or whatever you'd like. They provide a great way to add color to your pageswithout using images and will enable you to improve the appearance of your web pages.

If you're using line dividers (horizontal rules) within your web page, you can change the color,width and height of the line dividers by adding some attributes to your HTML code.

The examples below show various styles of the HTML tag. They are displayed in a tableand the width attributes span the set percentage of the table. When used without a table, the

width will span the set percentage of the entire web page.

Edit the text indicated in bold to suit your needs.
mailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmmailto:[email protected]?subject=Your%20Subject&body=Message%20for%20the%20body.http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm


20/29

Using customized HTML web page horizontal rules or line dividers will enable you to quickly andeasily spice up your web pages.

CSS Tutorial: An Introduction to

Cascading Style Sheets

Cascading Style Sheets, better known as CSS, enable you to control the style and layout

of a web page. They will enable you to specify link styles, fonts, margins, tables, colors,

sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file)

that can be used throughout your web site. You can simply link to your style sheet within

each of your web pages and have the ability to update the styles for your entire web sitewith just one file.

The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really

only two elements: Content and the way that content is presented. With HTML, weprovide content, and define how that content will be presented within the HTML code.

However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are

instructed from the very beginning to view their web pages in many different browsers,

such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make

sure that their web pages appear as they intended and expected them to from one browserto another.

Overall, the HTML code on the web page polices the content, and the CSS polices the

HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating yourweb pages. If you'd like to make a change to your design, instead of having to change

hundreds of web pages on your site, you can make one simple change to the CSS file, and

it will automatically update all of the pages on your web site. CSS enables you to do inseconds what would take hours to do in HTML.


21/29

Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn't require much. You do not need any

type of editor, as Cascading Style Sheets can be created using a plain text editor, such asNote Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most

popular ones, but there are many others. Once you create your pages and are using CSS,you must ensure that you view your web pages through multiple browsers to ensure they

are displaying just as you had intended. Visit Any Browserto view your pages through

different browsers.

You may also need a way to upload your pages to your web server. This is typically done

with an FTP client, and there are many nice free one's available. You may also uploadyour files through the control panel of your web hosting service.

Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as

embedded or inline, or it can be used externally, which is often referred to as a linkedstyle sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an

individual link or text, or have a one or two page web site. If you will have more thanthat, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within theHTML web page between the and tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked

to within a web page.
http://www.anybrowser.com/http://www.anybrowser.com/http://www.anybrowser.com/


22/29

Prioritizing CSS and HTML tags

When using CSS, certain tags take precedence over others. Here's how the tags are

prioritized:

HTML tags override all other tags.

CSS inline tags override embedded and linked tags.

CSS embedded tags override linked tags.

CSS linked tags won't override any other tags.

Formatting CSS Tags

CSS tags are formatted like this:

selector {property: value;}

The selector is a browser command and is followed by a property. The property is a

word describing the selector, which further instructs the browser. The value specifies thevalue of the property.

Although this may sound a little confusing, CSS is formatted much like standard HTML.

Let's compare the two formats:

HTML

CSS

body {font-size:16px;}

As you can see in the comparison diagram above, the Elementis equivalent to theSelector, the Attribute is equivalent to the Property and the Values are the same.


23/29

Inline Cascading Style Tags

Inline cascading style tags are used within standard HTML code using the STYLE

parameter. The following example will remove the underline of an individual link:

Your Link

Browser View:

Your Link

The STYLEparameter is added directly to your original HTML link code.

Inline style tags enable you to specify how each individual link will look.

Embedded Cascading Style Sheets

Embedded cascading style sheets (CSS) can perform the same tasks as the inline style

tags. However, the coding is placed between the and tags within

your HTML. You can specify how your entire page will appear including links, fonts,text and more, simply by using embedded style tags.

The following example will display your active text links (after a link has been clickedon) in a specific color. The hover color (when the mouse is placed over the link) will be

displayed in an alternate color and the underline will disappear.

Browser View:

Example Link(Place your mouse over the link to view this example.)
http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/http://www.webdesignmastery.com/


24/29

The above code will display all of your links in a specific style.

Notice the code is placed within the comment tags? Comment tags look like this:

The comment tags are used to prevent older browsers that don't support style tags fromdisplaying the CSS codes within their page.

The great thing about embedding style codes is that you can create your own classes ofcode. What this means is that you can specify different styles throughout your page and

then call them within your page.

For example, you can add a class of code to a paragraph selectorlike this:

Notice the text highlighted in bold? This is a class name I made up. You can call it

whatever you'd like. Simply add .yourtext following your selector.

To put this style into action orcallit, simply place the following code within your HTML

where you would like the style to be used:

Keep in mind, the text you place after your CSS selector ( .yourtext) must be the same

name as the code you place to call the style.

For example, if your class code looks like this:

p.text

the code you use to call the style will look like this:


25/29

See how that works?

Linking CSS

The linking CSS method involves creating a file that defines specific styles. This CSS filecan be used throughout your entire web site to specify everything from body styles and

headings to paragraphs and HTML tables.

This file might look something like this:

BODY {font-family: Arial;

font-size: 12px;}

H1 {font-family: Georgia;

font-size: 16px;font-weight: bold; color: blue}

P { font-weight: normal;

color: blue}

This file should be saved as style.css and uploaded to your server where you store your

HTML files.

When using a style sheet, you must place a link to your style.css file within your HTML

between your and tags like this:

Your Page Title

Page Content

CSS Tutorial: Getting Started - Creating

a Basic HTML Web Page


26/29

Creating a Folder for Your Web Page

Prior to creating your web page, your first step should be to create a folder on your

desktop or within your My Documents folder to hold your new web page files. You cancall it web site or whatever you'd like.

Your next step will be to create a basic HTML page. Simply open a plain text editor, suchas Note Pad, and type or paste in the HTML code that you see in the box below. Each

element of that code will be explained below, as it is important that you understand what

these codes are and what they mean.

Here is the code that you should copy and paste into your text editor:

Your Page Title

Your Web Page Content

HTML Tags

Everything you see between the < and > symbols are html codes, which are also referredto as html tags. These tags are telling the web browser how they should display the page.

The tag tells the browser that it is about to see HTML coding.

The tag contains information about the page, such as the TITLE, META

tags for proper Search Engine indexing, STYLE tags, which determine the pagelayout, and JavaScript coding for special effects.

The tag tells the browser that the part of your web page that should be

viewable by others is about to start. The various tags used inside the body tag tell

the browser how to display the page.

For a complete list of HTML codes and examples, visit ourHTML Codes Chartsection.

Each HTML tag contains an opening tag and a closing tag. The opening tag is writtenwith the command enclosed with brackets.

Example:
http://www.web-source.net/html_codes_chart.htmhttp://www.web-source.net/html_codes_chart.htm


27/29

The closing tag contains a forward slash followed by the command enclosed with

brackets.

Example:

The opening tag is telling the browser to begin the specified action and the closing tag is

telling the browser to end the action.

Saving Your HTML Document

Once you have copied and pasted the above HTML code into your text editor, your nextstep will be to save the document into the new folder you created. If your new web page

will be your main or starting page, you should save it as index.htm orindex.html, asindex is the file name most web servers will look for when someone types your web

address into a web browser. Secondary pages should be saved using the pages most

relevant keyword phrase. For example, if your page is about dog grooming tips, then youmight save your page as dog_grooming_tips.htm.

Next, place some content in your new web page between the and tags.

The content may be an article or whatever you'd like:

This Is Content.

This is content that others will be able to see when they visit your web page. When

content is pasted in, it won't have any formatting. It will just be text that reads from left to

right, in one long paragraph. It should have a heading, followed by the actual content. Inthis section, you will learn how to format the text so that it is easier to read and

understand. Use any article or content that you have written, and simply copy and paste it

into the HTML document that you have created.

Formatting HTML Text

Now, as you can see, the text isn't formatted. It isn't laid out in paragraphs, and it's not

that special. Even if you copy text in that is formatted and separated into paragraphs, youwill find that when you view it in a web browser, the formatting is gone. That is because

the format requires special tags.

Heading Tags


28/29

Let's start with the heading of the page. In the example above, the heading says This Is

Content. To turn that into something that looks like a heading, we use the heading tags.

Heading tags are presented as and may go as high as . Thelower the number, the bigger the text will appear. The title or heading of the page goes

between these tags, so that it appears like this: This Is Content.

Paragraph Tags

Your next step will be to divide the content into paragraphs. This is done by enclosingeach paragraph with the
tags. The opening
tag is used at the beginning of a

paragraph, and the closing
tag is used at the end of each paragraph.
If you'd like to move a sentence or some text to the next line, you can do so by using the
(break) tag at the end of or in between your paragraphs.

Bold, Italics and Underline

To further format your text, you can use additional HTML tags, such as tag,

which will make any text between the opening and closing tags bold. To italicizeyour text, use the tags. You can underline your text with the tags.

You can find many more tags you can use within the HTML Codes Chart section.

This is very easy to memorize: b stands for bold, I stands for italicize, and u stands for

underline. P stands for paragraph, and br stands for break. H1 stands for heading 1.

By implementing these tags, you will see that your code looks like the following

example:

Your Page Title

This Is Content

This is content that others will be able to see when they visit your webpage. When

content is pasted in, it won't have any formatting. It will just be text that reads from left to

right, in one long paragraph. It should have a heading, followed by the actual content.

In this section, you will learn how to format the text so that it is easierto read and understand. Use any article or content that you have written, and simply copy
http://www.web-source.net/html_codes_chart.htmhttp://www.web-source.net/html_codes_chart.htm


29/29

and paste it into the HTML document that you have created.