html step by step by khan

7/26/2019 HTML Step by Step by khan

1/30

HTML Step By StepJanuary 1

2011

The step by step course of HTML is an introduction for the

beginners of webpage designers and students.

Advance HTML (HTML-5), CSS and JavaScript are available for

advance web programming.http://khanztuto.blogspot.com/

More on www.eatvc.org/tutorials or on

http://forum.eatvc.org

Hypertext Mark-upLanguage

Hypertext Mark-up Language

By: kh@n
http://www.facebook.com/khanz.tutohttp://www.khanztuto.blogspot.com/


2/30

HTML STEP Y STEP

2 | P a g e

Copyright 2011 EATVC. All Rights Reserved.

For be inners

What is ?

HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in

1990, HTML is the "hidden" code that helps us communicate with others on the World Wide

Web (WWW).

When writing HTML, you add "tags" to the text in order to create the structure. These tags

tell the browser how to display the text or graphics in the document. For example, the

following document has a simple layout (structure). Notice there are three major parts: a

heading, two paragraphs and a bulleted list.

To achieve a similar layout in a WWW browser, you need to add tags. Here is the same

document with HTML tags (red) added:

Why I like to go swimming

Why I like to go swimming in the summer.

Swimming is my most favorite activity in the summer. When the sun is shining and the

air is warm, you will find me dipping into my backyard pool. Its not an impressive pool, only

three feet deep, but its mine.

There are three reasons I like to swim:

I get lots of exercise

I enjoy the freedom

I have an opportunity to be in the sun.

And here is the resulting page in yourbrowser. Notice the tags are gone? Thats becausethe tags tell the browser how to display files but do not show themselves.
http://www.goodellgroup.com/tutorial/screen1.htmlhttp://www.goodellgroup.com/tutorial/screen1.htmlhttp://www.goodellgroup.com/tutorial/screen1.htmlhttp://www.goodellgroup.com/tutorial/screen1.html


3/30

HTML STEP Y STEP

3 | P a g e


For be inners

Viewing the hidden code!

When learning something new, it often helps to see how others are doing the same thing.

This is especially easy with HTML because every file that comes through your browser is

formatted in HTML. So how do you see other peoples stuff? By viewing their source code.

Heres how:

Go online

Open Internet Explorer or Netscape Navigator

Enter the address to your favorite site

Go to Viewon the toolbar and then click on Sourcefor Explorer or Page Source for

Navigator. In a matter of seconds, you will see the hidden code of that page.

The tools you need

Fortunately, HTML is written in plain text. That means you dont need any fancy

software programs like a word processor to create your HTML files. All you need is a

simple text-editor thats already on your system. For MACs, that would

beSimpleTextand for Windows, Notepad.

Some rules

As with most things in life, there are rules. In HTML, the rules are fairly simple. For

starters, HTML tags are always surrounded by what are called angle brackets < and >.

Youll find these brackets on your keyboard just above the comma and period.

Elements

The words/letters between these two angle brackets are called elements. These are

the coded commands within HTML. Elements tell the browser how to display the

web page. For example: tells the browser to display a horizontal rule;
tells

the browser to skip a line.

Container and empty tags

There are two kinds of tags: container and empty.

The container tagalways wraps around text or graphics and comes in a set with an

opening and a closing:

opening tag

closing tag

Notice the forward slash (/) on the closing tag. This tells the browser that the tag hasended.

On the other hand, the empty tagstands alone. The tag
is one that adds a line

break. Empty tags do not have to be wrapped around copy and do not require a

closing.

Case sensitive

HTML is also notcase sensitive. That means, you can use either lowercase or

uppercase. is the same as . For consistency, use either one or the

other. It's best not to mix and match. For our purposes, I have written our code in

lowercase.


4/30

HTML STEP Y STEP

4 | P a g e


For be inners

HTML structure.

All HTML documents are divided into two main parts: the head and the body. It goessomething like this:

You must have the , and container tags in every HTML file.

The tag tells the browser that this is an HTML document. You must begin

and end your files with this tag. The tag contains general information like the

title of your document. Thetag holds all your content: words, pictures,

artwork and other stuff.

Nesting

Part of the web page structure is called nesting. Notice how the tag is nested

inside the tag, while and are nested inside .

3. Primary Tags

To build any web page you will need four primary tags: , , and

. These are all container tags and must appear as pairs with a beginning and

an ending.

Every HTML document begins and ends with the tag. This tells the browser

that the following document is an html file. Remember, tags tell the browsers how to

display information.

The tag contains the title of the document along with general informationabout the file, like the author, copyright, keywords and/or a description of what

appears on the page.

Appears within the tag and gives the title of the page. Try to make your titles

descriptive, but not more than 20 words in length. The title appears at the very top

of the browser page on the title bar.

The main content of your page is placed within the body tags: your text, images,

links, tables and so on.

4. Creating your first web page


5/30

HTML STEP Y STEP

5 | P a g e


For be inners

Using the primary HTML tags, mentioned in Chapter 3, you are now ready to create

your first Web page. Step 1Open up a text editor (SimpleText for Mac or Notepad for Windows)

Step 2Enter the following:

This is my first web page

Hello world. This is my first web page. There's more to come.

Step 3Save the document as: firstpage.html

Your file can be saved as either an htm or html file. Remember to save your

document on the computer in a place that you can find it again.

Step 4To preview your new document, open Netscape Navigator. On the tool bar

(located up near the top of the browser):

Select Filemenu.

Select Open Page

A dialogue box appears. Select Choose File

Go to where you saved your file, click on it. This will bring you back to the dialogue

box, which should now be showing your file.

Click Open

Step 5 If all went as planned, your file should look like this in yourbrowser.

5. Basic Text Formatting

After any length of time on the Internet, youll notice that a Web page is made up of

more than just plain words on a screen. There are headlines, paragraphs, graphics,

colors and much more. Its a lively place to be.

Our next tags--headline, paragraph, line break and horizontal rule--will help us makeour current page a lot more exciting. Lets learn how.

Headline tag

In HTML, bold copy is created by using the headline tag. There are six levels of

headlines, ranging from to . Here is an example of the

code for allthe headline sizes:

Level 1 Headline

Level 2 Headline

Level 3 Headline

Level 4 Headline
http://www.goodellgroup.com/tutorial/firstpage.htmlhttp://www.goodellgroup.com/tutorial/firstpage.htmlhttp://www.goodellgroup.com/tutorial/firstpage.htmlhttp://www.goodellgroup.com/tutorial/firstpage.html


6/30

HTML STEP Y STEP

6 | P a g e


For be inners

Level 5 Headline

Level 6 Headline And here is how each level looks in abrowser.

Lets add a headline to our Web page document.

Step 1Load your text editor and open your file: firstpage.html This is what you

should see:

This is my first web page.


Step 2Add the tag to the words "Hello world." as shown in red.


Hello world.This is my first web page. There's more to come.

Step 3Save the file

Step 4Open up Netscape Navigator.

Go to File menu

Select Open Page

A dialogue box appears.

SelectChoose File

Go to where you saved your file, click on it. This will bring you back to the dialogue

box, which should now be showing your file.

Click Open

Your new page should look like in yourbrowser. Paragraphs & Line Breaks

To add space between paragraphs you use the paragraph tag:

This is a container tag and must have a beginning and an ending.

To add a single line of space, you use break tag:

This is an empty tag and stands alone. You can use the
tag to insert one or more

blank lines.

Horizontal Rule

To create a horizontal line on your page you use the empty tag:
http://www.goodellgroup.com/tutorial/headlinec5.htmlhttp://www.goodellgroup.com/tutorial/headlinec5.htmlhttp://www.goodellgroup.com/tutorial/headlinec5.htmlhttp://www.goodellgroup.com/tutorial/firstpagec5.htmlhttp://www.goodellgroup.com/tutorial/firstpagec5.htmlhttp://www.goodellgroup.com/tutorial/firstpagec5.htmlhttp://www.goodellgroup.com/tutorial/firstpagec5.htmlhttp://www.goodellgroup.com/tutorial/headlinec5.html


7/30


8/30


9/30


10/30

HTML STEP Y STEP

10 | P a g e


For be inners



I am learning how to use the horizontal rule, headline, paragraph and line break tags.

Writing HTML isn't as hard as it appears.

Here's a list of items I like about school:

Science

Reading

But most of all--recess!

I can also create lists using numbers and bullets. Here is an example of a list with

numbers:

My first item on the list.

My second item on the list.

My third item on the list.

My fourth item on the list.

Step 4Save your file.

7. Attributes: Adding interest to your page.

...

1. The bracket and tag appear first (


11/30

HTML STEP Y STEP

11 | P a g e


For be inners

5. Next are quotation marks that contain a description of how the attribute should look

like ("#bee3c2"). In this case, it's a code for the color green.6. Close with a bracket (>).

7. Then, add your closing tag .

8. Advanced text formatting

In this section, we will cover the following tags and attributes:

Font styles: ...

Bold: ...

Italic: ...

Indented text: ...

Smaller type: ...

Larger type: ...

Centered type: ...

Font tag*

Not long ago, Times Romanwas the only font you could use with HTML. It is still the font of

choice (the default) for the leading browsers. Today, we can choose different font styles as

well as several other font options by using the tag:

The font tag gives you some control over how your page will look. But unlike other tags

discussed so far, thefont tag does nothing without an attribute(remember an attribute

describes what the tag should do).

We will cover three attributes used with the font tag:

*A Note to Remember:In the new HTML (version 4.0), the font tag has been deprecated--a

big word that means the tag will be dropped in favor of Cascade Style Sheets (CSS). If you

would like more information on CSS, please check out the Web site:Style Masterto learn

more. This changeover--from the font tag to CSS--will happen sometime in the future, but

right now many Web sites are still using the font tag. We are in what is called the

"transitional period," meaning things are still changing.

Font SizeSo far, we have learned that the only way to change the size of our text is through the
http://www.westciv.com/style_master/academy/css_tutorial/http://www.westciv.com/style_master/academy/css_tutorial/http://www.westciv.com/style_master/academy/css_tutorial/http://www.westciv.com/style_master/academy/css_tutorial/


12/30

HTML STEP Y STEP

12 | P a g e


For be inners

headline tag. But that causes a problem. One, if you use this tag, all the text changes and

secondly, youll have paragraph breaks before and after the text. So what can you do if youwant to change the size of some text within a sentence? Simple, add the attributesizeto the

font tag. Heres a coded example:

Learning HTML code does have its advantages, especially

considering how important the WWW has become.

The resulting line in a browser:

Learning HTML code does have its advantages,especially considering how important the

WWW has become.

Notice how the type increased? You can also decrease your text. Lets take the same

sentence but use size=1.

Learning HTML code does have its advantages,especially considering how important the

WWW has become.

By using the size attribute, you can change your text to whatever you like. (By the way, your

browsers default size is number 3.) Here are all seven levels as they would appear in your

browser:

font size=1

font size=2

font size=3

font size=4

font size=5

font size=6

font size=7

Font Face

You can also use an attribute that will change the type style of a font. Its callface. But aword of caution: the face attribute is system dependent. That is, it will only work if the end

user has the same typeface (type style) on his or her system. If not, the browser will

automatically go with the default of Times Roman. So what you see on your Netscape or

Internet Explorers page may not be the same for each user.

So how can prevent this problem? Include more than one type face. For instance, lets say

you want the following text to appear in Arial typeface. This is how you would do it.

Selecting type styles can be tricky at times. You must always

consider your end user.


13/30


14/30

HTML STEP Y STEP

14 | P a g e


For be inners

Selecting type styles can be tricky at times. You should always

consider your end user.

This will create text that is bright blue:

Selecting type styles can be tricky at times. You should always consider your end user.

Notice two things here. First of all, the color has been specified in hex code (remember we

discussed that in the last lesson). Two, since we did not specify the typeface, the type

appeared as Times Roman.

Let's apply what we've learned

Step 1Load your text editor and open the HTML document we have been working

on:firstpage.html

Step 2Here's how to add some attribute codes to your original HTML file. Enter the code

listed below in red.


Hello world.

This is my first web page. There's more to come.

I am learning how to use the horizontal rule, headline, paragraph and line break tags.Writing HTML isn't as hard as it appears.

Here's a list of items I like about school:

Science

Reading

But most of all--recess!

I can also create lists using numbers and bullets. Here is an example of a list with

numbers:


15/30


16/30

HTML STEP Y STEP

16 | P a g e


For be inners

allows us to center text without using an attribute. So when you want to center your copy,

its simple. Use the following tag:

9. Links down the street to around the world.

Uniform Resource Locator

Before we get into how to create a hyperlink in HTML, we have to cover some "techy" stuff.

Every Web site has an address call the Uniform Resource Locatoror URL (pronounced like

"earl"). Think of an URL as an address. If youve done any Web surfing at all, you have

probably used an URL or two. But what does it mean? Lets examine one more closely:

http:// (hypertext transfer protocol) is a code or what is technically called a protocol that

helps one computer talk to another computer. The Internet also has another protocol called

FTP (file transfer protocol).

www or world wide weblets the server (the computer) know the file is located on the

World Wide Web.

myschool.com is a domain nameor where the Web site is hosted.

homework.htmlis the file or Web page you are seeking.

To create a link in HTML, you need the anchortag:

Inside the tag, you need the attribute:HREF (hypertext reference).

An example of a link looks like this:

Harry uses the browser called Netscape.

The code looks like this:

Harry uses the browser called

Netscape.

Let's take a closer look at the code:


17/30


18/30

HTML STEP Y STEP

18 | P a g e


For be inners

This is a page using tables

A Web Page Using Tables

This is column one

I enjoy working on HTML code. It gives me a chance to be creative.

This is column two

This is column three
Notice what happens to the column when you add copy. It

gets larger. This can cause a problem. But we do have a way to control the margins in

tables.

Step 3Save the file as table2.html

This is a page using tables

A Web Page Using Tables


19/30


20/30


21/30

HTML STEP Y STEP

21 | P a g e


For be inners

Alignment Attributes

Here are some examples of alignment

This is column one

This is column one

This is column one

This is column one

This is column two

This is column two

This is column two

This is column two

This is column A

This is column A

This is column A

This is column A

This is column A

This is column A

This is column b

This is column b

This is column b


22/30


23/30

HTML STEP Y STEP

23 | P a g e


For be inners

Rowspan and Colspan

Here's a table demonstrating rowspan and colspan

This is an example of rowspan. It is spanning two rows.

This is column B

This is column C

This is column D

This is column E

This is an example of colspan. It is spanning three columns.

Step 3Save the file as span.html

Font Example

FRAMS

Inside the Frame Building Page

The page will be enclosed in HTML and HEAD tags:

...

The instructions for your frames will be enclosed in the following HTML tags:

...


24/30

HTML STEP Y STEP

24 | P a g e


For be inners

FORMS:........................................

There are 5 choices of form question layouts.

1. Text fields

2. Radio Buttons

3. Check Boxes

4. Selector Bars

5. Text areas

6. 1) The Text Field

7.

Text fields are one line of input. Normally you set a limit as to how many characterscan be typed for the given field (maxlength). You can also set the size of the field

(size).

9.

This only allows 30 characters

This only 15.

11.

2) The Radio Button

12.Radio Buttons allow for multiple choices yet the user can only select one. Multiple

selections are not allowed with radio buttons. Notice that the NAME is the same for

all buttons in a set, but the VALUE is different. Also notice that in the first one, the

word "checked" is in the code which defaults "Yes" as being chosen when the page

loads.

14. Yes

No

Maybe

Yes No Maybe


25/30

HTML STEP Y STEP

25 | P a g e


For be inners

16.

3) The Check Box17.Check Boxes allow for multiple choices AND multiple selections. The user can select

one or more. Notice that the NAME is now different for all checkboxes, but the

VALUE is the same. Also notice that in the second two, the word "checked" is in the

code which puts a check in the box for "Two" and "Three" when the page loads.

19.One

Two

Three

One Two Three

21.

4) The Selector Bar22.Selector Bars are perfect for questions that have many responses and you don't want

to take up a lot of room on a page. They can be set for single or multiple selections

allowed (either put in the word multiple or don't). If you choose multiple, you have

to hold down the ctrl-key when making multiple choices. Notice the size can be

however many cells you want.

The NAME designates the topic for all the individual VALUES.

24.

Red

Blue

Green Purple

Black

Yellow

Pink

Size set to 1 (not

multiple)Red

Size set to 3

(multiple)

Red

Blue

Green

26.

5) The Text Area

27.Text fields are multiple lines of input. Normally this is where people respond with a

lengthy answer of a paragraph or more. Be sure to put in the wrap=virtual so that

when the typing hits the end of the line it auto wraps to the next line. You can set

the columns and rows to whatever you like. And you can put in a default response

that is preloaded in the box when the page loads.


26/30

HTML STEP Y STEP

26 | P a g e


For be inners

29. Nice Site!

31.

6) The Submit and Reset Button

32.The Submit Button is what sends in the form once the user finishes filling it out. The

Reset button erases andthing the user has typed so he can start again. To alter the

text that appears on the buttons, change the value atribute to the text you wish to

have displayed.34.

Click Here to Continue

Start Again

36.

7) Hidden Values

37.If you had several forms on different pages and you wanted to have a field in the e-

mail you received that told you which page it came from, you can put in a hidden

field. Only you will ever see this, the user will not.

38.

EMBED:

Inserting video audio.

Hyperlinking: linking from one page to another

Hyperlinking, or Linking, is the ability to click on a bit of text or an image and have it jump

you to another page, or area of a page. This requires both the Opening and the

Closing Anchor Tag.

Anchors also must have the HREF=(Hypertext Reference) attribute to work properly:


27/30


28/30


29/30


30/30

HTML STEP Y STEP

For be inners

// E-mail Form - Validator

// Bravenet Web Services - www.bravenet.comfunction checkData()

{

var correct = true

if (document.Bravenet.name.value == "") {correct = false; alert("Please enter your name!")}

if (document.Bravenet.replyemail.value == "") {correct = false; alert("Please enter your e-

mail address.")}

/*

You can add more variables above.

The name after the word Bravenet has to match the name in the form below.

*/

if (correct){alert("Thank you for taking your time to fill out this form.")}

return correct

}

//-->

And this RED code must go in your existing form tag. More about HTML:

http://www.w3schools.com/html/default.asp

End.
http://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/html/default.asp

html step by step by khan

Documents