What Is HTML? HTML Stands For Hypertext Markup Language. If You Know This Language, You Will Be Able To

HTML
Introduction
What is HTML? HTML stands for HyperText Markup Language. If you know this language, you will be able to
create Web Pages. The page now you are looking at is nothing but a web page. Is it looking attractive? Are you
afraid that it will be very difficult for you to make such a design? Don"t worry ! Lot of such web design templates
are freely available in the Internet. But even to use these templates, you should know some basic html
programming. And that is what you are going to learn here.
By the way, what is Hyper? Hyper means 'NOT LINEAR' or 'NO SET ORDER'. Take this page for example. There is no
set order that after you read this Introduction page , you MUST compulsorily go to the next chapter. You can easily
jump to any page you want.
Got interested?..... then click on the next link.
How to make a simple web page using HTML
When you click to a page on the Internet, such as this one, you see a document which may look like those made
using a word processor or a desk top publishing program. However, documents on the web might have been
created using a simple text editor.
Unlike word processors and desk top publishing, the web page author writes instructions called tags which tell the
browser how to read the document. Really this is much the same as using a word processor. The other difference is
that all the files are saved with an HTML or HTM file extension. For example, MyHomePage.htm.
Why learn HTML when I can use FrontPage?

It may not be essential to learn HTML when clever editors can write it for you. Even standard word processor
software can write HTML. However, just as calculators can do arithmetic, if we didn't understand arithmetic we'd
sometimes end up with and accept some silly answers. Similarly, WYSYWIG (What you see is what you get -
sometimes!) HTML editors will write the code for you, but they sometimes mess you about, and change code, and
wind you up creating effects that you never intended. FrontPage, although, is one of the best, it may not do just
what you want for some applications. It would be silly not to use these tools which make our job easier, but we
should not be a slave to them. We can only master the tools for HTML by learning a bit about it. So, understanding
HTML is essential.
Tags to tag on in front and behind your stuff.

Tags are always placed between the less than, <, and greater than, >, symbols; <A Tag>. The first tag on the page
is the HTML tag which tells the browser that the document is HTML;
<HTML>
The last tag on the page is the end HTML tag, which tells the browser that the HTML bit has finished;
</HTML>
Did you notice the '/' bit which tells the browser that this is the end tag, not the start?
A basic HTML page
Most pages will start with these tags;
----------- complete code --------------------

<html>
<head>
<title>My Home Page</title>
</head>
<body>
You write things here...
</body>
</html>
----------------------------------------------------------
Did you notice more of the '/' bits to tell the browser you had finished certain parts, such as the title and the
head? And by the way, the text in the title tags is shown at the top of the browser, and not as a title in your page.
We will deal with all of these tags later, but at the moment just accept that they are needed.
Click here to view the basic page.
The only thing you see on the page is the 'You write things here ... ' However, at the top of the browser you see
what you have written in the title tags - 'My Home Page -'
Using the above you could go on and create a document for the web. Just copy it and write your stuff. But it
wouldn't be very interesting because the all the text would be the same size! Let's look at headings!
How to Create Headings
<html>
<head>
<title >Example</title>
</head>
<body>
<h1>My Heading</h1>
<P>You write things here...
</body>
</html>
--------------------------------------------------------------------------------
Click your mouse here to view this new page.
Pretty basic isn't it?
Did you notice that the title has changed at the top of the browser. It now says; 'My Home Page with a heading.' Of
course, the text written within the <h1></h1> tags is bigger than the rest. If you forget the end tag (</h1>) then
you would find that all the text was big. The actual size depends on the browser settings. Here are the heading
tags;
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is normal text!</p>
Click here to see the above page.
--------------------------------------------------------------------------------
Hey! What are those <p> tags? How did they sneak in? Earlier we mentioned that you have to tell the browser what
to do, these tell it to start a new paragraph. If you don't tell the browser to do this, it will show all the sentences
one after the other.
It will recognise a space, but if you do a carriage return, as you normally would with a word processor, the browser
will ignore it, and you won't get your new paragraph!
See it in action.
However, the browser does insert a paragraph or carriage return after certain tags, such as headings. Did you
notice that a new paragraph was created after the headings even though we didn't put a <p> tag in? See above!
If you use the <p> tag then the next line will begin after a blank line.
(This line would be blank.)
If you want the next line to begin below the current one without a blank line, then you would use <br> (Called a
line break) instead of <p>
What is COMMENTS?
When we write a page with a lot of code, and we come back to it later to wonder what we did, it can be made
easier if we have comments in the document which don't show up on the page in the browser. If we use these
tags; Remember, that comments are comments that you the author
make for yourself, and these are not visible on the page so the reader doesn't see them.
If you are like me you may forget to put in comments a few times, until you try to understand your code later on
and begin to realise a comment or two can make revising the page so much easier! Look at the following trivial
example;
<HTML>
<HEAD>
<TITLE>My Page
</TITLE>
</HEAD>
<BODY>


<H1>My Heading - What my page is about.
</H1>

</BODY> -->
Copy the above into your editor and note that all you see in the browser is the title at the top of the browser and
the heading. Please remember to use comments, at least minimal ones indicating the start and end of code. Note
also how I have used (or ought to have used) comments in these pages.
Bold
You already know we get our results by telling the browser what to do by using tags.
Are you surprised we do the same thing to make text bold, etc? (I hope you aren't!)
The following are the tags for bold, underline and italic;
<b>This is bold</b>
<u>This is underlined</u>
<i>This is italic</i>
<b><i><u>This is bold, italic and underlined!</b></i></u>
Of course, when you write these tags in your HTML editor or simple text editor, the text won't be bold, etc. It is
only when the browser reads it that it will show it as bold, etc. This is what the above will look like in an editor;
<b>This is bold</b>
<u>This is underlined</u>
<i>This is italic</i>
<b><i><u>This is bold, italic and underlined!</b></i></u>
You can copy the above into the basic document (between the <BODY></BODY> tags and see what it is like. Add
some of your own expressions.
Color ( yeah ! Not Colour)

In the basic document we noticed that the browser shows the text between the opening and closing
<body></body> tags. Tags are clever things because you can add other stuff inside the tags to get even more
interesting things. To get the page colour, you can add a bit to the <body> tag as follows;
<body bgColor="aqua">
</body>
See it in action
By the way, bgcolor stands for background colour. I only say this silly thing because for a while it didn't register
with me! In the second example the bgcolor is "black." If you want to change the text colour, then add;
<body bgcolor="black" text="gold">
Am I looking Gold?
</body
See it in action
Now this colour stuff is a bit strange. Some browsers will recognise common colour names such as;
Fuchsia Green Blue Red

Yellow White Black Aqua
However, usually we would use a '#' followed by a six figure number. Don't get daunted here! You don't have to do
this, your editor will do it for you, or you'll pick a colour name from the chart! This number describes the exact
colour you want.
Most HTML editors will allow you to select a color and the editor will put the numbers in for you. The alternative is
to select the colours from a table which shows a picture and the hexadecimal colour code (I tried to avoid saying
hexadecimal! I didn't want you know what a foul mouthed person I was! But I suppose the truth will out! You don't
need to know what hexadecimal means, and if you aren't a mathematician, don't try. Just take it that this is a
funny number with letters, or a code, that the HTML editor or a table gives you to make your own unique colour.
Personally, I always use an editor that puts the number in for me.) This code gives a mixture of red, green and
blue to make your special colour!
How to insert IMAGES in the BackgroundIntroduction

The following are examples of background images;
My Home Page My Home Page

My stuff. My stuff
<body background="backg3.jpg"> <body background="PinkyStone.gif">

My stuff My stuff
<body background="BlueWool.gif"> <body background="FleshyClay.gif">

My stuff My stuff
<body background="PinkBackground.gif"> <body background="YellowBackGround.gif">
The backgrounds in the above (actually shown in a table above to make presentation easier) are small images
which can make the page more attractive and more readable than a simple colour, because they can enable
pattern effects. You can make background images by using an image editor. You can study other people's
background images by right clicking on the page and choosing 'save background as ... '
You insert the background image into your document as follows;
<body background="FleshyClay.gif">
Where FleshyClay.gif is the name of the background image. You can use two types of image file on the net;
Gif files, that have the extension .gif, and

JPEG files which have the extensions .jpeg or .jpg (pronounced jay pegs!)
When you use an image editor for the internet, you need to be able to save files in one or more of these formats.
JPEGs tend to make smaller files for larger images. GIFs can have transparent parts and are good for smaller
images such as buttons.
How to draw HORIZONTAL LINE?

The following are examples of horizontal rules; This one is 50% as long as the screen width;
<hr width="50%">
This one is fatter (SIZE) and its colour is black;
<hr SIZE="10" width="50% COLOR="black">
This one is fatter, bluer, and on the left (ALIGN=)!
<hr WIDTH="50%" COLOR="#8000FF" SIZE="50" ALIGN="left">
How to give LINKS

Click here and you can go back to the previous page.
The code for the above is as follows;
<A HREF="horizontal_rules.htm">Click</A>
So when you want to do a jump, you just put in the code
<A HREF="MyPage.htm">Your text for the link</A>
Replacing MyPage.htm with the name of the htm or html file you want to jump to. (if you want to learn about
URLs, then click here.)
Don't forget the end anchor tag, otherwise everything that follows will be a link to that page!
Hyperlink Colours
You must have noticed that hyperlinks or anchors are coloured in a browser. This lets the user know that the text
is a link, although the mouse cursor also changes to show the link cursor, probably a hand. The anchor colours are
set as a default in the browser, but they can be set for the page in the body tag.
<body body VLINK="green" ALINK="blue" LINK="red" >
With the above settings, a link that has never been visited is coloured 'red.' One that has been visited is coloured
'green.' And one that is being clicked is coloured 'blue.' If this is not specified, which it normally isn't, then the
browser defaults are used.
Mailto Links
Send me your opinions!
Click the above link. Your email software will activate and you can look at the subject line. It says 'Sent from HTML
Tutorial.' Here's the code;
<A HREF = "mailto:kenjward@enterprise.net?SUBJECT='Sent from HTML Tutorial.'">Send me your opinions</A>
The part in bold is not essential. It puts the subject line in the email! Can be very useful when you want to know
which page inspired the email.
We have now got our pages more interactive. Let's see how we can jump to a particular place in a document!
How to insert IMAGES

We can insert images into a document using tags. The image on the left is inserted by using the following code;
<IMG SRC="Back.jpg" ALT="This is the back image" BORDER="0">
The <IMG SRC="Back.jpg" part tells the browser which image to load, in this case the image Back.jpg.
The ALT= part gives the image an alternative presentation as text. That is, when you move your cursor over the
image, it gives a message - 'This is back image'. This is useful for people with certain disabilities and enables
search engines to read what the image is about. Putting in alternative text is therefore important.
If you do not enter an ALT message some editors put in a default. At one time if you had searched Alta Vista for
"b231.gif (23175) bytes" (the default inserted by Front Page) my page would have come up straight away! So
remember to put in a meaningful message because search engines as well as people use the ALT message!
The BORDER="0" removes the line around the image when it is used as a hyperlink. Although this border tells the
human browser it is a hyperlink, some people think it's ugly and use BORDER="0"!
The image on the right has the code; <IMG SRC="button.gif" ALT="Back image" ALIGN="RIGHT">
This puts the image on the right (whereas in the first case, because there wasn't an ALIGN in the tag, it defaulted
to the left.)
Bullets
There are several types of list;
Bulleted Lists
Numbered lists
Directory
Menu
Definition
The above list is a bulleted list. The code is;
<UL>
<LI>bulleted Lists
<LI>Numbered lists
<LI>Directory
<LI>Menu
<LI>Definition
</UL>
The list begins with the <UL> tag. The UL stands for un-ordered List. Each list item is preceded with the <LI> tag.
Finally the list ends with the </UL> end tag with the now familiar '/.'
If instead of using the <UL> tag we used <OL> then the list would have numbers;
<OL>
<LI>Bulleted Lists
<LI>Numbered lists
<LI>Directory
<LI>Menu
<LI>Definition
</OL>
Font Tag
The best things in life are simple, so why do people have to mess with different colours? I don't know. It makes the
pages hard to read, and rather tends to annoy rather than to impress. Give a child a paintbrush and he or she
paints everything, instead of using it sensibly!
--------------------------------------------------------------------------------
This sentence illustrates the use of the font tag.
The code is;
<FONT COLOR="green" FACE="Bradley Hand ITC" SIZE="5">This sentence illustrates the use of the font tag.</FONT>
The COLOR tag changes the colour of the text. The SIZE tag can be in absolute size, form 1 to 7, or in relative size
+1 to +7 which increases the size one step. Or using negative values, it reduces it one step.
How to create a Table

Let's look at a simple table;
Interests My Interests My Friend's Interests
Being inactive Being active
Watching Television Playing sports
We make a table first of all by enclosing everything within the <TABLE></TABLE> tags. Next, within the table tags,
I put <CAPTION ALIGN="center">Interests</CAPTION>
There are three rows in this case. So in the table there are three row tags; <TR></TR> The first row has two
headings, so I used two table header tags as follow;
<TR><TH>My Interests</TH><TH>My Friends Interests</TH></TR>
This makes the text inside the header tags bold and centred. Finally I inserted table data tags to insert the data;
<TR><TD>Being Inactive</TD><TD>Being Active</TD></TR>

<TR><TD>Watching Television</TD><TD>Playing Sports</TD></TR>
In summary, the code is;
<TABLE>
<CAPTION ALIGN="center">Interests</CAPTION>
<TR>
<TH>My Interests</TH><TH>My Friends Interests</TH>
</TR>
<TR>
<TD>Being Inactive</TD><TD>Being Active</TD>
</TR>
<TR>
<TD>Watching Television</TD><TD>Playing Sports</TD>
</TR>
</TABLE>
The following table probably covers everything you might reasonably want from a table. It has;
Colours
Alignment
Backgrounds
Nested Tables
Cell Padding
--------------------------------------------------------------------------------
I am spanning 3 rows! This is my table

I have some padding to keep me away from the border! Nested Table
The self known to me The self unknown to me and unknown by others
The self known to me and known by others The self unknown to me but known by others
Watching Television Playing sports
View the code! (Although you might want to wait a bit until you have read the rest of what follows!)
--------------------------------------------------------------------------------
The first thing you might notice about the table is that it has a thick black border! We achieve this effect by
<table WIDTH="95%" BORDER="10" BORDERCOLOR="black">
In the table tag we have the BORDER specified as 10 (I started with 3 and increased the number till it looked right
for me.) The BORDERCOLOR="black" is self evident (I remember when some book author said, "This is self evident",
no one, not even the research PhDs could work it out! But here, I think it is self-evident! You put the colour name
you want in the quotes or use a hexadecimal code.)
You might also have noticed the cell on the left is sort of all by itself and independent. (By the way, the little
squares in the table are called cells.) What we do here is to put <TD> in the first row and add to the <TD> part;
<TD ROWSPAN="3" .. >
The ROWSPAN means that the cell <TD> is spanning 3 rows instead of keeping to its own row. Also the cell has a
background image;
<TD ROWSPAN="3" BACKGROUND="PinkBackground.gif" ALIGN="center" WIDTH="20%">I am spanning 3 rows!</TD>
Frames
<frameset rows="15%,*">
<frame NAME="topframe" SRC="topframe.htm" BORDERCOLOR="#FEDD92">
<frameset rows="*" cols="14%,*" FRAMEBORDER="0">
<frame NAME="sidebar" SRC="sidebar.htm" SCROLLING="AUTO" BORDERCOLOR="#FEDD92"
target="mainframe">
<frame NAME="mainframe" FRAMEBORDER="0" SRC="frames1.htm" SCROLLING="AUTO">
</frameset>
<noframes>
<body>
<p>If your browser doesn't support frames, then go to </p>

</body>
</noframes>
</frameset>
Button
Buttons
Press the button and use the back button on the browser to return here. Here is the code:

<form ACTION="index.htm" METHOD="GET">
<p><input TYPE="submit" NAME="B1" VALUE="Go to Contents"></p>
</form>

--------------------------------------------------------------------------------
The button is made by enclosing the tags in <form></form> tags. The ACTION for the form is an URL, usually one
that starts a server based program (cgi script). In our case we have used an HTML file (index.htm) which is our
contents page. As you discovered, pressing the button loads the index.htm file. There are two METHODS, POST and
GET, GET is the default. So much for the form! Inside the form we have:
<input TYPE="submit" NAME="B1" VALUE="Go to Contents"
For buttons, you have a choice of the following types:
SUBMIT
RESET
BUTTON
Copy the above code and use reset, and then substitue button to see what happens. On my computer, using
Internet Explorer 4, nothing happens! The RESET button is used to reset a form, and the BUTTON is used, for
example, with Java Script.
Click the next button and see what happens!
On Internet Explorer 4, a warning message box appears and if you select 'Yes', then your email software activates,
with my email as the address. Here is the code:
<form ACTION="mailto:kenjward@123ward.com" METHOD="post">
<input TYPE="submit" NAME="B1" VALUE="Send me feedback...">
</form>
Meta Tag
When search engine spiders search the web, or you present your page to a search engine, it will probably read the
meta tags in your document and the first part of your text to list your site and rank it according to keywords.
This is a basic page with Meta tags;
<HTML>
<HEAD>
<TITLE>Dogs; Training, Grooming, and Feeding</TITLE>
<META NAME="DESCRIPTION" CONTENT="A page about training, grooming, feeding and taking care of dogs. ">
<META NAME="KEYWORDS" CONTENT="Dogs,training,grooming dogs,dog nutrition,feeding dogs"
</HEAD>
<BODY>
<H1>Training, Grooming, and Feeding Dogs</H1>
In the first 200 words, use your keywords, so search engines that check the keywords find them in the text. This,
after all, is what you would expect! If the keywords are about the page, then they will be in the page! <hr>
< /BODY>
</HTML>
--------------------------------------------------------------------------------
The title of your page is important and should be a good keyword to the contents. Keep its length less than about
70 characters.
The description Meta tag should give a short accurate summary of the page;
<META NAME="DESCRIPTION" CONTENT="A page about training, grooming, feeding and taking care of dogs. ">
This may be used by search engines to give the description of your page next to the URL.
The keywords Meta tag is very important. Do not repeat keywords more than 7 times, and do not continuously
repeat them, otherwise, you may be blacklisted by the search engines!
<META NAME="KEYWORDS" CONTENT="Dogs,training,grooming dogs,dog nutrition,feeding dogs">

What Is HTML? HTML Stands For Hypertext Markup Language. If You Know This Language, You Will Be Able To

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

What Is HTML? HTML Stands For Hypertext Markup Language. If You Know This Language, You Will Be Able To

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

Got interested?..... then click on the next link.

How to make a simple web page using HTML

Why learn HTML when I can use FrontPage?

Tags to tag on in front and behind your stuff.

----------- complete code --------------------

Click here to view the basic page.

How to Create Headings

Click your mouse here to view this new page.

Pretty basic isn't it?

Click here to see the above page.

<b><i><u>This is bold, italic and underlined!</b></i></u>

<b><i><u>This is bold, italic and underlined!</b></i></u>

Color ( yeah ! Not Colour)

<body bgcolor="black" text="gold">

Fuchsia Green Blue Red

How to insert IMAGES in the BackgroundIntroduction

My Home Page My Home Page

<body background="backg3.jpg"> <body background="PinkyStone.gif">

My Home Page My Home Page

<body background="BlueWool.gif"> <body background="FleshyClay.gif">

My Home Page My Home Page

<body background="PinkBackground.gif"> <body background="YellowBackGround.gif">

You insert the background image into your document as follows;

Gif files, that have the extension .gif, and

How to draw HORIZONTAL LINE?

This one is fatter (SIZE) and its colour is black;

<hr SIZE="10" width="50% COLOR="black">

This one is fatter, bluer, and on the left (ALIGN=)!

<hr WIDTH="50%" COLOR="#8000FF" SIZE="50" ALIGN="left">

How to give LINKS

The code for the above is as follows;

So when you want to do a jump, you just put in the code

<A HREF="MyPage.htm">Your text for the link</A>

<body body VLINK="green" ALINK="blue" LINK="red" >

Send me your opinions!

<A HREF = "mailto:kenjward@enterprise.net?SUBJECT='Sent from HTML Tutorial.'">Send me your opinions</A>

How to insert IMAGES

<IMG SRC="Back.jpg" ALT="This is the back image" BORDER="0">

This sentence illustrates the use of the font tag.

The code is;

How to create a Table

<TR><TH>My Interests</TH><TH>My Friends Interests</TH></TR>

<TR><TD>Being Inactive</TD><TD>Being Active</TD></TR>

In summary, the code is;

I am spanning 3 rows! This is my table

Watching Television Playing sports

<TD ROWSPAN="3" .. >

<TD ROWSPAN="3" BACKGROUND="PinkBackground.gif" ALIGN="center" WIDTH="20%">I am spanning 3 rows!</TD>

<p>If your browser doesn't support frames, then go to </p>

<form ACTION="index.htm" METHOD="GET">

<p><input TYPE="submit" NAME="B1" VALUE="Go to Contents"></p>

<input TYPE="submit" NAME="B1" VALUE="Go to Contents"

For buttons, you have a choice of the following types:

Click the next button and see what happens!

<form ACTION="mailto:kenjward@123ward.com" METHOD="post">

<input TYPE="submit" NAME="B1" VALUE="Send me feedback...">

This is a basic page with Meta tags;

S-ar putea să vă placă și