NewHTML Book

7/30/2019 NewHTML Book

1/32

HTML


2/32

Chapter 1.

INTRODUCTION TO HTML PROGRAMMING

HTML (Hyper Text Markup Language) is a simple scripting language that is interpretedwithin a web browser. In other words, HTML helps you make web pages. The whole

point of web page development is to have fun, and most important.... USE YOUR IMAGINATION.

HTML, or Hyper Text Markup Language, is the basis behind (almost) all web pages. Beingsimilar to a programming language (but, not quite), HTML needs a start and an end.

: Starts the HTML Code : Ends the HTML Code

These two commands are essential. If these are not there, then the page will not show.

Programming Page - The Body

This will list some common commands and examples. By no means is this a complete set, but more of a list of commands to get you started. These commands will let you see someresults, so you can build upon them.

After the command, the next command is the command. The command allows you to set the title in the caption bar (usually the blue bar atop the window),and also to set up a default directory for all your files on the server.

"The Title of Your Page"

After the command, the next important command is the command. The command allows you to set the background picture, the font colors (i.e. regular text, links, visited links).

NOTE : In the command, the BGCOLOR is not needed if the BACKGROUNDhas a value. If both are filled in with a value, then the BACKGROUND overrides the

BGCOLOR.

Working With Headings:

Though not as important, the command is usually set at the top of the page to display big letters (i.e. The header).


3/32

"Name of Your Page"

The # sign in the command can be a number between 1 and 6. With a 1 the lettering isfollows...

This is andThis is

Example:

This is SMT Computer Institute. This is SMT Computer Institute. This is SMT Computer Institute. This is SMT Computer Institute. This is SMT Computer Institute. This is SMT Computer Institute.

Some Useful tags:

The Command (Anchor Command):

Linking via Hyper Text is one of the fundamental tools of the web. In fact, it is probably themost used resource on the web. The ability to jump around wherever you want.


4/32

NOTE: If command is used, then the default URL is the URL in the followed by whatever you have in the URL field. To override thisfeature, you must put the http:// in the URL link.


5/32

Chapter 2.

SOME OTHER TAGS

The Tag:

Through this tag we can scroll the text/images on the screen.

Syntax: message

Example:

WELCOME TO SMT

WELCOME TOSMT

The
Break Tag:

Breaks a line of continuous text and prevents text alignment around images.

The

(Paragraph) Tag:

To mark the beginning of the paragraph. Syntax:

paragraph

The and tags:

Through these tags, we can arrange items in the form of the list with bullets. The tagstands for unordered list and begins the list. We define each item within the tag.

Syntax: Item 1

Item 2 Item 3 Item 4

The output will be:

Item 1


6/32

Item 2 Item 3 Item 4

The Bold Tag:

To mark the text as bold.

The Italic Tag:

To mark the text as italic.

The Underline Tag:

To mark the text as underline.

The Strikethrough Tag:

To display the text with strike-through effect.

The Tag:

To increase the text size.

The Tag:

To decrease the text size.

The Tag:

To give the emboss effect to the text.

The Tag:

To change the different attributes related to font type, color and size etc.

Syntax :

7/32

Chapter 3.

Programming Page Tables

A table is a set of row and columns. We can arrange the data in a table according to therequirement through tag.

Example:

NAMEAGEMARKS

SANJAY2480

MANOJ34 70

VIPIN2565

The output will be:

NAME AGE MARKS

SANJAY 24 80

MANOJ 34 70

VIPIN 25 65

Let us consider another example for table formatting:

An elementary operation for a table is to create the Heading, Border size, and where youwant the table to sit.

Example #1 - TheBeginning< /CENTER >< /CAPTION >

Example #1 The Beginning

8/32

.

Let's add a row with 3 columns...

Example #2 - 2 Row & 3Columns< /CENTER >< /CAPTION > Row #1 & Column #1< /TH >

Row #1 & Column #2< /TH >Row #1 & Column #3< /TH > < /TR >

Row #2 & Column #1< /TH >Row #2 & Column #2< /TH >Row #2 & Column #3< /TH > < /TR >

Example #2 - 2 Row & 3 Columns

Row #1 & Column #1 Row #1 & Column #2 Row #1 & Column #3Row #2 & Column #1 Row #2 & Column #2 Row #2 & Column #3

Some actual "data" and an example of the BORDER with size 2. This example alsointroduces the < TR >< /TR > and the < TH >< /TH >.

The < TR > creates the Rows.The < TH > creates the Columns.

Let's add some Data Characteristics...

Example #3 - 2 Row & 3 Columns &Characteristics< /CENTER >< /CAPTION > Row #1 & Column #1 - Bold< /TH >

Row #1 & Column #2 - Italicized< /TH >Row #1 & Column #3 - Underlined< /TH > < /TR >

Row #2 & Column #1 - Strike Through< /STRIKE >< /TH >Row #2 & Column #2 - Small< /TH >Row #2 & Column #3 - Big< /BIG >< /TH >< /TR >

Example #3 - 2 Row & 3 Columns & Characteristics

Row #1 & Column #1 - Bold Row #1 & Column #2 -

Italicized Row #1 & Column #3-

Underlined

Row #2 & Column #1 - StrikeThrough

Row #2 & Column #2 Small Row #2 & Column #3 - Big

9/32

Column Spanning:

Example #4 - ColumnSpanning< /CENTER >< /CAPTION >

Row #1 & Column #1< /TH >

Row #2 & Column #1< /TH >Row #2 & Column #2< /TH >

Example #4 - Column Spanning

Row #1 & Column #1

Row #2 & Column #1 Row #2 & Column #2

Row Spanning:

Example #5 - RowSpanning< /CENTER >< /CAPTION >

Row #1 & Column #1< /TH >

Row #1 & Column #1< /TH >Row #2 & Column #2< /TH >

Example #5 - Row Spanning

Row #1 & Column #1Row #1 & Column #2

Row #2 & Column #2

10/32

Chapter 4.

Programming Page Frames

A Frame is similar to a window frame (in a special kind of way). Frames act as separatewindows within a web page. You can move that page without changing this page andvice-versa. Frames are a new technology so not all browsers support them.

Getting the Frame started...

The preceding is a portion of the template we use for web pages that are within frames.

All Frames must contain the < FRAMESET >< /FRAMESET > command.The FRAMESET command has quite a few properties. The two commands are theCOLS and the FRAME BORDER .

The COLS command determines the number of columns (vertical frames), and thespecified width of each. To create the columns place a comma between each column youwant to present. The "*" is a wildcard, similar to the meaning in DOS. We could easily of said "140, 140". This would have placed 2 Frames both 140 pixels wide, and the rest of the screen would have been treat battleship gray.

The FRAMEBORDER command is simpler in that it only determines the size of the

border around the frames. Within the FRAMESET , lies the < FRAME > corresponding to each Frame you createdin the FRAMESET command. Each FRAME command contains the source page todisplayed in that specific Frame via the SRC command. The first FRAME SRCcommand you use corresponds to the spacing in the FRAMESET statement .

My Frame Page

Lisa

The tag does all the dividing. That's all it does... divide up windows. Itspecifies a few things regarding how to divide them up, but remember, whenever youwant to do some dividing- use .


11/32

Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section.

It's pretty obvious that we can make the frames all different sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation.

If we specify dividing into ROWS instead of COLS we get something else entirely.

Let's go back down to two frames, divided equally into columns.

We can specify 50 pixels instead of 50%. And, we can use * instead of a number. The *means whatever is left over.


12/32

Create a new folder somewhere and save this as lisa.html.

Now make another html document.

My Frame Pagecomputer

Save this in the same folder as terri.html.

Now do the same for Kim, Tina, Shannon, and Beth. Save them just like the others. You

should now have a folder that contains 6 complete standalone html documents.

Ok, start making your master page:

My Frame Page- The Master Page

Remove the tags. The master page doesn't use them...


...it uses tags instead.



13/32

Now's a good time to save it. Save it in your folder (with all the girls) as index.html. If you try to open it with your browser now it will be blank. All you have said so far is

"This is my Master Page".

Now let's start defining just how things are going to look. Tell the browser to split themain window into two columns, each occupying 50% of the window.

This will still be blank, we have one more thing to do before our 'system is operational'.

We must tell the browser what to put in each frame.

We can put pictures in the frames if we want to. In the folder named 'examples' there is a picture called world.gif. Go ahead and copy that into your working folder.

Remember it is always good practice to include HEIGHT & WIDTH attributes for anyimage tag.

Let's try to frame the picture nice and neat. First shrink the left window to 146 pixelswide. Since we are using an absolute dimension should make the other frame elastic.


14/32

Next we will divide the left frame horizontally into 2 sections. The top section to be 162 pixels high and the bottom section to be whatever is left over. We will put in world.gif and Lisa respectively.

As you can see, we have a bit of a problem.

The scrollbars that you see can be specified as YES, NO or AUTO. YES means thewindow gets scrollbars- whether they're needed or not. NO means there will be no

scrollbars, even if your frame contents are as big as New Jersey... the browser will simplydisplay as much as it can. AUTO is the default. If scrollbars are needed, they appear, if they are not needed they stay conveniently out of the way. Let's get rid of our scrollbars.

We still have a problem. The image is not in the frame right. The next two attributes dealwith margins . The browser automatically gives each frame some empty space around itscontents. This is normally necessary for aesthetics. You can control the size of thesemargins by using MARGINWIDTH and MARGINHEIGHT. They control the left &right and top & bottom margins respectively. We will set them both to 1. (1 is theminimum)


15/32


16/32

We can turn off borders for individual s with FRAMEBORDER.

We can prevent the viewer from resizing a frame. Unless you have a specialcircumstance, there really is no reason to use this attribute a lot.

Ok. Now that we have learned a bit about Framing. Lets go back to something simpleand we'll tear into linking between frames.

What we're going to do is add a link from beth.html to shannon.html. So open beth.htmlwith Notepad and add the following...

My Frame PageBeth

You have to visit my friend Shannon


17/32

Then add the link, and save it.

My Frame Page

Beth


Now try it.

Now go ahead and give that second frame a name.

That second frame is not really "Terri's". It's simply the second frame and we have

specified that terri.html is the first thing to be loaded into it. If we had an empty tag the window would be... well... empty.

Note- NAME must begin with an alpha-numeric character. All other windownames will be ignored. (An exception is to begin the frame name with the underscore _.Its use is explained a little later.) Next we have to add a little something to that link inBeth's page, so open beth.html again (with Notepad) and add a TARGET.

My Frame Page

Beth



18/32

That kind of linking is great when you want to link together pages in your site. But whatif you want to link to something outside your site? Let's add another link to Beth's page.

My Frame PageBeth


And of course you have to visit Joe at Professional Web Design

As you can see, this causes someone elses page to load into your window

How can you make an outside link load into the full browser window? Easy, change theTARGET to _top.

My Frame PageBeth


And of course you have to visit Joe at Professional Web Design

Always use this method when linking to an outside page.

Top is one of four so-called 'magic targets'. They are _self, _blank, _parent and _top.These are the only targets that can begin with something other than an alpha-numericcharacter. In addition, any target beginning with an underscore_ that is not one of the'magic targets' will be ignored. For what we're doing, _top is the only one to concernourselves with now.

Note- It is important to specify TARGET="_top" rather than TARGET="_TOP". Normally HTML is not case-sensitive but in this instance it is. Using _TOP instead of _top will sometimes cause the link to open in a new browser rather than the full windowof the existing browser. Since it's been mentioned, that's what TARGET="_blank"does.... loads a link into a new browser window.


19/32

First we must think about what we want the end result to be. A good simple design would be a banner across the top, a directory window on the left, and the main window on theright. Let's make the Master Page first.

A Practice Page

Make another new folder and save this as index.html. Also the image we will be using for the banner is the "MY FRAME PAGE" image. It is called frame1.gif and it is in theframe folder. Copy it into the working folder you just created.

Divide the screen horizontally.

A Practice Page

Note we get 83 by adding 8 to the height of the image (75+8=83). Also note that since weare using an absolute dimension we are including an elastic frame.

Next specify banner.html to go in the top frame (we will make that document in a coupleminutes). Also throw in a tag pair because we are going to divide that

bottom portion further.

A Practice Page


20/32

You can run this now but you may get error messages because it's incomplete.

We will divide the bottom window into two sections. We will also specify that the leftwindow contain directry.html and the right window contain home.html. Once again, wehave not made these documents so you may still get an error message (or two) (or three).

A Practice Page

Since we will have our directory on the left and pages will load into the right and frame,we should name that frame.

A Practice Page

OK. We are done with this one... for now.

Lets make banner.html. Start with the following and save it.

Practice Page- Banner


21/32

Notice we have specified a background color of blue.

Pop in the image and it.

Practice Page- Banner

A Practice Page

Now let's make our Directory page. Start with the following and save it as directry.html.

Practice Page- Directory

Give it a heading and write in the text of all the links. We'll add the link info in a minute.



22/32

DirectoryHome

Go here
or there

or visit
Yahoo

Netscape

Now add the link information.


Directory Home

Go here
or there

or visit
Yahoo
Netscape


23/32

Chapter 5.

INRODUCTION TO FORM

To add interactivity to your web documents, use tag. With the form tag youcan add to your web pages a guest book, order forms, surveys, get feedback or whatever.

The basic construction of an html form is this:

begin a form ask for information in one of several different ways... ...there can be as many input areas as you wish end a form

Chauhan's the handsome guy I know

Save it as form1.html in some folder somewhere own folder. Start up your browser. Useit to open form1.html and run Notepad and the browser side by side. This way you cancreate your pages and almost instantaneously see the results of your handiwork. If hittingthe reload button is not quite resetting everything, hit the reload button while holdingdown the [Shift] key.

Type in your form tags.

Chauhan's the handsomest guy I know


24/32

TEXT BOX IN FORM:

We are going to start writing only what is within the tags we will leave out thehead, body, title and form tags from now on. Needless to say, leave them in your document.

The most common TYPE of form is TEXT.

Every input needs a NAME.

When the user types in his address (for example 1313 Mockingbird Lane), it will becomethe input's value and be paired with ADDRESS so the end result after running it throughMailto Formatter will be ADDRESS=1313 Mockingbird Lane.

We can if we want, type in a VALUE.

44 Cherry St

This will automatically pair the value 44 Cherry St with the name ADDRESS, unless theuser changes it. Note- be sure to use quotes where I've specified.

We can specify the size of the text input box.

44 Cherry

44 Cherry St

44 Cherry St


25/32

As you can see, the default value is 20. You probably already know, by the way, that thedefault value is the value that the browser assumes if you have not told it otherwise.

Go ahead and remove VALUE="44 Cherry St".

If we want, we can specify how many characters a user can input.Just go ahead and try to input more than 10 characters!

Very similar to the TYPE=TEXT is the TYPE=PASSWORD. It is exactly the same,except it dispays *** instead of the actual input. The browser will send you the input, it

just won't display it.

Remember that each must have a NAME.

SIZE, VALUE, and MAXLENGTH attributes work here also. By the way, a tellsthe browser to do something. An ATTRIBUTE goes inside the and tells the

browser how to do it.

RADIO BUTTONS IN FORM:

Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose oneof several options. Check Boxes allow the user to choose one or more or all of the ptions.First let's build some Radio Buttons.


26/32

Now add two more.

Note that each input has the same name. The reason will become apparent very shortly.

Each of the Radio Buttons must be assigned a VALUE.

Now label each button.

Ed Holleran
RickWeinberg
Tom Studd

Ed Holleran

Rick Weinberg

Tom Studd

You can also modify these labels with other html tags if you wish. Essentially your RadioButtons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional).


27/32

Who is your best friend?
EdHolleran
Rick Weinberg
Tom Studd

Who is your best friend?

Ed Holleran

Rick Weinberg

Tom Studd

The user of course can only choose 1 option. Their choice will be returned to you as thename/value pair BEST FRIEND=Ed (or whoever they pick).

CHECK BOX IN FORMS:

Building Check Boxes is pretty much the same thing. Start with this:

Add three more, but this time give each one a different NAME. (Also add in line breaksif you want)

Each Check Box gets the same VALUE.


28/32

Note- For Check Boxes the NAME changes and the VALUE stays the same and withRadio Buttons, the VALUE changes but the NAME stays the same.

OK, let's label each box.

Ed Holleran
Rick Weinberg
Tom Studd
BurgermeisterMeisterburger

Ed Holleran

Rick Weinberg

Tom Studd

Burgermeister Meisterburger

And lastly, you may want to add a little something above your check boxes and maybe pick a couple defaults.

Which of these guys are your friends?

EdHolleran
Rick Weinberg
TomStudd
Burgermeister Meisterburger

Which of these guys are your friends?

Ed Holleran

Rick Weinberg

Tom Studd

Burgermeister Meisterburger The user can choose 1, 2, none or all of the options. Their choices will be returned to youas the name/value pairs...


29/32

Ed=YESTom=YES(or what ever they choose... if they choose nothing, nothing will be returned to you)

PULL DOWN LIST IN FORMS:

The next type of input is a Pull Down List. With this type you use instead of and it has a closing tag. Let's make one.

Don't forget to give it a name.

Next add a few options .

EdRick TomGuido

And give each a VALUE.

EdRick

TomGuido

The default option is the one that is listed first. We can specify a default other than thefirst option in the list.


30/32

EdRick TomGuido

A Scrolling List is very similar in construction to a Pull Down List . Let's add a few morenames first though.

EdRick Tom

GuidoHoraceReggieMyron

All we gotta do to turn it into a Scrolling List is add a SIZE attribute to the tag.

EdRick TomGuidoHoraceReggieMyron

The SIZE is simply how many options show in the window. This stuff is CAKE!

Again, the default value is the first , and again we can change that byselecting one.


31/32

EdRick TomGuido

HoraceReggieMyron

A very useful type of input is .

You control the size of the box like so...

ROWS is the height, COLS is the width.

A good attribute to include in is WRAP. Some browsers do notunderstand it, but if that's the case, they will just ignore it.

Go ahead and type in the boxes...


32/32

WRAP=VIRTUAL means that the text in the box wraps, but it is sent as one longcontinuous string.

WRAP=PHYSICAL means that the text in the box wraps, and it is sent that way too.

This is the default.

WRAP=OFF means that the text in the box does not wrap, but it is sent exactly the way itwas typed in (like the little man a few text areas back).

Documents

NewHTML Book