Scribd
Upload
81 views33 pages

Lesson 1 Learning The Basics: A Beginner's Tutorial To HTML Demo

The document provides an introduction to creating basic HTML pages. It explains that HTML pages are simple text files with the .htm or .html file extension that use tags to indicate how content should be displayed. It describes the basic required tags of <html>, <head>, <title>, and <body> as well as common tags like <p> for paragraphs and <h1>-<h6> for headings. It also demonstrates how to add colors, format text, and use preformatted text. The best way to learn HTML is to manually create example files rather than using WYSIWYG editors.

Uploaded by

BHAWANA PANDEY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
81 views33 pages

Lesson 1 Learning The Basics: A Beginner's Tutorial To HTML Demo

The document provides an introduction to creating basic HTML pages. It explains that HTML pages are simple text files with the .htm or .html file extension that use tags to indicate how content should be displayed. It describes the basic required tags of <html>, <head>, <title>, and <body> as well as common tags like <p> for paragraphs and <h1>-<h6> for headings. It also demonstrates how to add colors, format text, and use preformatted text. The best way to learn HTML is to manually create example files rather than using WYSIWYG editors.

Uploaded by

BHAWANA PANDEY
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 33

Lesson 1

Learning the Basics


You'll be surprised to learn that making a web page is really very simple!  It's actually
nothing more than a simple text file with the file extension .HTM or HTML. HTML
stands for Hyper Text Mark-up Language which uses "tags" so browsers will know
how to display the document's links, text and graphics.

  The various elements of an HTML document are denoted by using tags which consist
of a left angle bracket (<), the name of the tag, and a right angle bracket (>). Most tags
are usually paired by using end tags . The end tag looks just like the start tag except a
slash (/) precedes the text within the brackets. Rather than trying to remember which
tags require end tags and which do not, get it the habit of always using them. 

Read through the following information and at the bottom of the page I'll show you
how to create a simple HTML file. 

The required elements of an HTML document are <html>, <head>, <title>, and
<body> as well as their end tags </html>, </head>, </title>, and </body> .

The<html> tag tells your browser that the file contains HTML-coded information and
must be the first thing that appears in your document while the end tag </html> must be
the last thing. 

The <html> tag is followed by the <head> tag.  The  <head> tag encloses only the
<title> tag  (for now). An example: 
 
<html> 
<head> 
<title>A Beginner's Tutorial to HTML Demo</title>  
</head> 
<html> 

(Note:  The <title> tag should contain a short description of your web page (no longer
than 60 characters).  The Title appears at the very top of your browser but does not
appear in the browser window itself. 

The next tag would be the <body> tag which would contain the information you'd want
displayed on your webpage.  The </body> tag would be the second to last tag to appear
on your page, right before the </html> tag. 

An example: 

<html> 
<head> 
<title>A Beginner's Tutorial to HTML Demo</title> 
</head> 
<body>The only things that will appear in the browser window are those things which
are enclosed within the <body>...</body> tags.  
</body>  
</html>  

(Note: Tags are not case sensitive, however, it's a good idea to use lower case just to be
consistent and to make it easier for you to read)

The best way to learn HTML is by manually keying it in using a simple text editor like
Notepad or WordPad rather than an editor that automatically inserts the code for you
(such as HotMetal Pro, which is available for several platforms or Adobe PageMill for
Macintoshes).  These editors are fine to use once you have a basic understanding of
HTML.

Open Notepad or Wordpad and type in the above example. Save the file by selecting
File, Save As on the Menu bar and save it as a Text (.txt) Document. Give it the file
name "index.htm" (always name your homepage "index.htm", subsequent pages can be
called anything you like). 

Open the file in your browser. To view the source of the document that you just
created, select View, Document Source from the Menu Bar (Netscape)

If you make changes to your file, but they don't register in the browser, try hitting the
reload button (if that still doesn't work try hitting SHIFT+Reload).
Lesson 2
Adding Color
There are two ways to specify colors within your webpage.

1. Hexadecimal codes

Colors are defined by hexadecimal codes; the color being determined by its proportion of
red, green, and blue.
Some examples of hexadecimal numbers are:

#000080
#FF0000
#00B800
#FF00FF

To choose the hexadecimal color you wish to use.

2. Color names

There are 140 defined color names available. Be aware that they are only recognized by
Netscape 3.0 and Internet Explorer 3.0 or higher.

Some examples of color names are:

Red
Green
Purple
Maroon

Adding Colors to Your Webpage

Body Colors:
The body colors are all set within the body tag, eg:

<body bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb"


alink="#rrggbb">
1. Background color:

<body bgcolor="#rrggbb">
This sets the background color.

2. Text color:

text="#rrggbb"
This sets the text color. If you do not specify a text color, it will automatically
default to black.

3. Link color:

link="#rrggbb"
This sets the color for your links.

4. Visited link color:

vlink="#rrggbb"
This sets the color for visited links.

5. Activated link color:

alink="#rrggbb"
This sets the color for activated links.
The sample below would set the background color of the page as yellow, text as red, etc

<body bgcolor="#ffffd8" text="#ff0000" link="#0000ff" vlink="#ff0000"


alink="#00a000">

Font colors:
You can change the color of text within your page by using the <font color> tag,
eg,
<font color="#rrggbb">

The code would look like this:


This text is a <font color="#ff00ff">different color</font> than the rest.

This is what it would look like in the browser:


This text is a different color than the rest.
Table Colors
You can also vary your table background colors. To change the background for
the entire table.

<table bgcolor="#00b800">

Colors Hex Number


Red #ff0000
Navy Blue #00B800

To change to background color of just one cell:


<td bgcolor="#rrggbb">.

Colors Hex Number


Red #ff0000
Navy Blue #00B800

Lesson 3
Formatting Documents

Headings

The heading tags <h?> are placed within the <body> tag. There are 6 levels you can
choose from. Following are some examples:

This is what the code would look like: 

<h1>This is Heading 1, the biggest font. (it's surrounded by the <H?> tag. The ? denotes
a number between 1 and 6)</h1> 

This is what it would look like in the browser: This is Heading 1, the biggest font. (it's
surrounded by the <H?> tag. The ? denotes a number between 1 and 6)
This is what the code would look like:

<h3 align=center>This is Heading 3, the middle size font. This particular tag includes
the attribute align=center (attributes are center, right and left with left being the
default)</h3> 

This is what it would look like in the browser: 


 

This is Heading 3, the middle size font. This particular tag includes
the attribute align=center (attributes are center, right and left with left
being the default)

This is what the code would look like:

<h6>This is Heading 6 which is the smallest sized font.</h6> 

This is what it would look like in the browser: 


 

This is Heading 6 which is the smallest sized font.

Paragraphs:

Once you put your heading into the document, you'll want to have a paragraph or two to
tell people what you're all about. To do this just start typing underneath your heading.
This would be the first paragraph to appear within the body of the document. Unless you
specify otherwise, the text will wrap with a single space between each word, regardless of
how you lay out the document or how many spaces you put between words. To start a
new paragrah you have to use a paragraph symbol, like this <P>. 

If you want to force a line break with no extra space between lines, use the Line
Break<br> tag.
This is useful if you want to end a line
before it reaches the end of the page,
or for typing address lists
or whatever.
<NOBR>...</NOBR>

The <NOBR> tag is used if you want to make sure that a few words do not break
between lines.

<WBR>...</WBR>

The <WBR> tag is used to indicate a breaking point within a line only when it's
appropriate to do so, if the line fits on the screen, then this tag is ignored..

To center a paragraph use the <p align=center> tag.


The code would look like this:

<p align=center>To center a line of text</p>

It would look like this in the browser:

To center a line of text

Formatting Text
 To display text in italics  use the<i>italics</i> tag.

 To display text in bold use the<b>bold</b> tag.

 To display text in underline  use the<u>underline</u> tag.

 To display text in subscript   use the<sub>subscript</sub> tag.

 To display text in superscript  use the<sup>superscript</sup> tag.

 To display blinking  text use the<blink>blink</blink> tag (a word of warning,


the blink tag seems to be generally looked upon with distaste, use at your own
risk. :)

 To display text in a big font, use the<big>big</big> tag.

 To display text in a small  font, use the<small>small</small> tag.

 To display text with strikethrough, use the <strike>strikethrough</strike> tag.


To display text in varying sizes use the <font size=?> tag. The ? denotes a number
between 1 and 7, the default being 3. To take this even further you can also use the + or -
value to get just the right size, i.e., <font size=+?>.
 
Examples would be:
<font size=5>:  font size=5 
<font size=-1>:    font size=-1 

Preformatted Text

The Preformatted Text <pre> tag allows you to place the text anywhere on the screen or
have text with more than one space between words. The only drawback with
preformatted text is that is uses a monospaced font.

This is what the code would look like: 

<pre>This is an example       This is another


         of preformatted           example of
         text.                           preformatted text.
</pre>

This is how it would look in the browser:


This is an example This is another
of preformatted example of
text. preformatted text.

Blockquote

Use the <blockquote> tag for quotes or stuff that needs to be left and right indented.

This is what the code would look like:

<blockquote>Use this tag for material that needs to be left and right indented, such as
quotes.<blockquote>

This is what it would look like in the browser:  


Use this tag for material that needs to be left and right indented, such as quotes.

Address

The address <address> tag automatically puts your address into italics. It's normally
placed either at the top or the bottom of the document (don't forget to end each line with
the <br> tag).

This is what the code would look like:

<address>
Garvick Enterprises
Vancouver, BC
V5W 3K9</address>

This is what it would look like in the browser:

Garvick Enterprises
Vancouver, BC
V5W 3K9

Horizontal Rule

The Horizontal Rule <hr>is useful to separate the different sections of your document
especially the text from your email address at the bottom of the screen. 

The attributes are:   

 <size=?>, where "?" is the thickness in pixels. The default is "size=2".


 <width=? or ?%hr>, where "?" is the width in pixels and "?%" is the width as a
percentage of the screen. The default is "width=100%". It's preferable to use
percentage when determining the width of the rule.
 <align=left,center,right>. Determines the alignment of the rule, the default is
"align=center"
 <noshade>. Turns off the 3D effect of the rule, by default the shading is turned
off.

This is what the code would look like:


<hr size=5 width=75% noshade>

This is what it would look like in the browser:

Since Horizontal Lines can be pretty boring, it's much more fun to use a graphic line.
You can pick these up all over the place as they are just graphics. Put them in your
document the same way you'd place any graphic.

This is what the code would look like:

<IMG SRC="cmouse-l.gif" HEIGHT=32 WIDTH=450">

Check out the Graphic Line below to see this in action.

Comments

If you want to leave a comment for your own reference but which will not show up on the
browser's window enclose the comment in the <!--type your comment here--> tag.
(however, the comment will appear if you check out the Document Source under View
on your Browsers toolbar (Netscape).

Note: Don't include any HTML tags within a comment, it thoroughly confuses some
browsers.
Lesson 4
Graphics
Image <img> tag The image tag allows you to place graphic images on your web pages.
The attributes are:·
 <src>. This attribute is mandatory, it specifies the source of the image.
 <align=top|bottom|middle|left|right>. Controls how the image aligns with the
surrounding text.
 <height=?> and <width=?>, where "?" is the size in pixels. These attributes are
beneficial because they tell the browser the size of the graphic, speeding up
loading time.
 <hspace=?> and <vspace=?>, where "?" is the size in pixels. This tells the
browser to leave the specified amount of white space on the left and right side
"hspace" or on the top and bottom "vspace" of the image.
 <border=?>, where "?" is the size in pixels. Specifies the size of the border
surrounding the image. The default is "border=2". Use "border=0" if you don't
want any border at all..
 <alt="text">, where "text" is whatever text you specify to best describe the
graphic image. This is very important to non-graphical web browsers and to
browsers with automatic graphic loading turned off.

This is a sample of an image with the attributes "align=right height=72


width=72 hspace=25 alt=bumblebee". When you look at the image in the
browser window, notice the box with the word "bumblebee", this is the
"height" and "width" tags as well as the "alt" tag in action. If you want to
have a look, click on the reload button (Netscape) and then watch the image of the bee.·
The code used looks like this: <img src="a_5bumbl.gif" align=right height=72 width=72
hspace=25 border=0 alt=bumblebee>·
Lesson 5
Linking Text and Graphics
The Anchor <a> Tag

The Anchor Tag (also known as Hypertext Links) enables text, graphics and even
multimedia elements on a page to be used as hyperlinks. Hyperlinks are connections
between Web pages that allow you to navigate through your own Web Site (internal
links) or go to another Web Site anywhere in the world (external links). 

Text links are identified on a Web page as being both a different color (usually blue) and
underlined. Graphics links can be identified by the mouse pointer turning into a hand
with a pointing finger when it's held over the graphic.  

Attributes for the Anchor Tag are: 


 <href>. Used to specify the URL address that links the item with the site it points
to.
 <name>. Used for targeting a specific portion of a web document.
 <title>. Used to give the linked resource a title.
 <rel>. Defines the forward relationship of the current page, the next page in the
site's structure.
 <rev>. Defines the backward relationship of the current page, the last page in the
site's structure.

To link one document to another within your own site when both files are in the same
directory, just type the name of the file being linked to, e.g., the sample shows a link to a
document called "HTML Demo". The actual name of the document is "html-dem.htm"). 

This is what the code would look:


<a href="html-dem.htm">HTML demo</a>

If the document was located in a subdirectory (for our example the directory would be
called "links"), you'd call up the file by typing the name of the directory and then the
name of the file itself, e.g. "links/html-dem.htm"

This is what the code would look:


<a href="links/html-dem.htm">HTML demo</a>

---

If the document was not located in the same directory but rather was located up one level
on your site, you would call up the file by typing "../" before the name itself.

This is what the code would look like:


<a href="../html-dem.htm">HTML demo</a>
---

If the document was located in another directory at the same level on your site (for our
example the directory would be called "webpage"), you would call up the file by typing
"../directory name/" before the name itself,

The code would look like this:


<a href="../webpage/html-dem.htm">HTML demo</a>

---

If the document was located in a directory two levels up on your site, you would call up
the file by typing "../../directory name/" before the name itself.

This is what the code would look like:


<a href="../../webpage/html-dem.htm">HTML demo</a>

To link to another website anywhere in the world, you'd include the website's address
(URL) in the anchor code.

This is what the code would look like:


<a href="http://freebiesandstuff.freeyellow.com/index.html">
http://freebiesandstuff.freeyellow.com/index.html</a>

Bookmarks  

Bookmarks allow you to place a bookmark in any section of the page or any section on
another page. To make a bookmark, you must do two things:  

First, you must specify where you want a "bookmark" to appear. You do this by using the
<a> tag with the <name> attribute as follows: <a name="bookmarks">. This tag would
be positioned where you want to place the bookmark (in this sample my bookmark just
happens to be called "bookmark" and is located on the same line as the title
"Bookmarks" at the beginning of this section. This is what the code would look like:
<a name="bookmarks"></a>Bookmarks

Second, you must specify the actual link that would go to your bookmarked spot. Do this
by using an <a href="#bookmarks"> tag (in this sample the link is located in the box at
the top of the page).
This is what the code would look like:
<a href="#bookmarks>[Bookmarks]</a>

To link to a bookmark on another page you'd follow the same procedure as in the first
step above, except the bookmark would be located on the other page.

The code would be the same as that specified in the second step above except you'd also
reference the name of the page that contains the bookmark. An example would be:
<a href="lesson4.htm#sample">. The document called "lesson4.htm" contains a
bookmark called "sample" opposite the image of the bumblebee...This is how the link to
the bookmark called "Sample" in the document called "lesson4.htm" would look  

Linking Graphics  

Graphics can also be used to link to a specific document either within your own website
(internal link) or to a website anywhere in the world (external link).

For an internal link, this is what the code would look like
<a href="lesson4.htm"><img src="madhack.gif" border=3 alt=computer> </a> 

This is what it looks like in the browser:

For an external link, the code would look like this:

<a ref="http://freebiesandstuff.freeyellow.com/index.html"><img src="beew.gif"


border=0 alt-bee> </a>  

This is what it looks like in the browser:

E-Mail

To specify that a link is to an e-mail address, you'd use the mailto tag.
This is what the code would look:

<a href="mailto:[email protected]">Feel Free to Send Me E-mail</a>

This is what it would look like in the browser:

Feel Free to Send Me E-mail

Since not all browsers support the mailto tag, it's a good idea to also write out your e-mail
address in full. That way your e-mail address can at least be copied and pasted. This is
what the code would look like:

<a href="mailto:[email protected]">Feel Free to Send E-mail to


[email protected]</a>

This is what it would look like in the browser:

Feel Free to Send E-mail to [email protected]

It's cool to have a graphic for your E-mail address, just don't forget to include a text link
as well. This is what the code would look like:

<a href="mailto:[email protected]"><img src=mailbox.gif">Feel Free to Send E-


mail to [email protected]</a>

This is how it would look in the browser:

Feel Free to Send E-mail to [email protected]

Lesson 6
Unordered, Ordered and Definition Lists
 

Unordered List:

Unordered Lists <ul>, <li>, </ul> will create a bulleted list. The tag can also include the
attributes <ul type=disc|circle|square> (disc being the default), depending on what type of
bullet you want. The end tag </ul> for the list is only required at the end of the list itself,
not at the end of each individual item. To nest one list within another list, just place the
<ul>, <li>, </ul> within the main list. 

This is what the code would look like: 

<ul> 
<li> ordered list 
<li> unordered list 
 <ul> 
    <li> uses bullets 
    <li> can be nested 
 </ul> 
<li> definition list 

This is what it would look like in the browser: 

 ordered list
 unordered list

 uses bullets
 can be nested

 definition list

Ordered List:
Ordered List <ol>, <li>, </ol> will create an alphabetical or numerical list (numerical is
the default).

The tag can also include the attributes <ol type=1 | A | a | I | i>, which specifies numbers,
uppercase letters, lowercase letters, uppercase roman numerals and lowercase roman
numerals, respectively. You can also start the list at any number you choose by using the
<start=n> attribute, where "n" is the number you wish to start the list with. Ordered lists
can be nested the same way as unordered lists. 

This is what the code would look like: 

<ol type=1 start=5>


<li> ordered list
 <ol type=a>
     <li> uses letters
     <li> uses numbers
 </ol>
<li> unordered list
<li> definition list</li>
</ol>

This is how it would look in the browser: 


  

5. ordered list

a. uses letters
b. uses numbers

 unordered list
 definition list

Definition List:
 Definition List <dl>, <dt>, <dd>, </dl> 
A definition list is a list of terms and corresponding definitions. 
 This is what the code would look like: 
<dl>
<dt> Definition List
<dd> A Definition List is a list of terms and corresponding definitions.
<dt> Definition Term
<dd> A Definition Term is flush against the margin.
<dt> Definition Define
<dd> Definition Define is indented.
</dl>

This is how it would look in the browser: 

 Definition List 

A Definition List is a list of terms and corresponding definitions.


Definition Term
A Definition Term is flush against the margin.
Definition Define
Definition Define is indented.

Lesson 7
Tables
Tables are beneficial for much more than just presenting data in tabular columns. They
can be a valuable aid to formatting your pages, graphics and all. The basic elements of
the table consist of the <table>...</table> tag which surrounds the entire table, the <tr>
tag which defines the individual rows of the table and the <td> tag which defines the cells
within the table rows. Another tag is the <th> tag which creates a table header in a bold
font. The attributes of the <table> tag would affect the entire table. They are as follows: 
 <align>. Enables text to flow around the table. values are align=left or
align=right.
 <border>. Sets the table border thickness. The default value is border=0 (no
border)
 <cellspacing>. Defines the distance a cell frame is from the edges of the object
within the frame. The default is cellpadding=1.
 <width>. Specifies the desired width of the table in pixels or percentages.
 <height>. Specifies the desired height of the table in pixels or percentages.

These attributes can only be used with the <tr>, <td> and <th> tags: 
 <align>. Specifies the alignment of text or graphics within the cell. Values are
align=left, align=right or align=center. The default is align=left.
 <valign>. Specifies the vertical alignment of text or graphics within the cell.
Values are valign=top, valign=bottom, valign=middle or valign=baseline. The
default is valign=middle.

These attributes can only be used with the <td> and <th> tags: 
 <width>. Specifies a width (which affects all the cells in that column) for the
element in pixels or as a percentage of the screen. If more than one cell uses the
width attribute, the widest cell setting will be used (Note: if the total of the widths
specified exceeds that specified in the width attribute of the <table> tag, the table
tag width will be overridden).
 <height>. Specifies a height (which affects all the cells in that row) for the
element in pixels or as a percentage of the screen. If more than one cell uses the
height attribute, the tallest cell setting will be used. (Note: if the total of the
heights specified exceeds that specified in the height attribute of the <table> tag,
the table tag height will be overridden).
 <colspan>. The number of columns that the cell spans.
 <rowspan>. The number of rows that the cell spans.
 <nowrap>. The text wrapping feature is disabled.

An example of this would be this 2 column table which will be constructed a column at a
time. We start with the first column: 

 <table border=4> 
<tr> 
<th align=center>First 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
</tr> 
<tr> 
<td>February</td> 
</tr> 
<tr> 
<td>March</td> 
</tr> 
<tr> 
<td>April</td> 
</tr> 
<tr> 
<td>May</td> 
</tr> 
<tr> 
<td>June</td> 
</tr> 
</table> 

This is how the first column would look: 

  

First 6 Months of the Year


January
February
March
April
May
June

Now for the second column all you would do is just build on the first: 

 <table border=4> 
<tr> 
<th align=center>First 6 Months of the Year</th> 
<th align=center>Last 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
<td>July</td> 
</tr> 
<tr> 
<td>February</td> 
<td>August</td> 
</tr> 
<tr> 
<td>March</td> 
<td>September</td> 
</tr> 
<tr> 
<td>April</td> 
<td>October</td> 
</tr> 
<tr> 
<td>May</td> 
<td>November</td> 
</tr> 
<tr> 
<td>June</td> 
<td>December</td> 
</tr> 
</table> 

This is how both columns would look: 

  

First 6 Months of the Year


JanuaryLast 6 Months of the
July
Year
February August
March September
April October
May November
June December

Next take a look at how the attribute "cellpadding=6" added to the <table> tag makes the
table look nicer: 

  

First 6 Months of the Year Last 6 Months of the Year

January July

February August

March September

April October

May November
June December

This is an example with a third column added in between the first and the second. Notice
that some of the cells in the middle are blank, the cell at the bottom under "my birthday"
looks nicer because it has a non-breaking space (&nbsp;) tag included within the <td>
tag: 

 <table border=4 cellpadding=6> 


<tr> 
<th align=center>First 6 Months of the Year</th> 
<th align=center>Special Days<br>(first 6 Months)</th> 
<th align=center>Last 6 Months of the Year</th> 
</tr> 
<tr> 
<td>January</td> 
<td>"leave this area blank"</td> 
<td>July</td> 
</tr> 
<tr> 
<td>February</td> 
<td>Valentine's Day</td> 
<td>August</td> 
</tr> 
<tr> 
<td>March</td> 
<td>"leave this area blank"</td> 
<td>September</td> 
</tr> 
<tr> 
<td>April</td> 
<td>Easter (usually)</td> 
<td>October</td> 
</tr> 
<tr> 
<td>May</td> 
<td>My Birthday</td> 
<td>November</td> 
</tr> 
<tr> 
<td>June</td> 
<td>&nbsp;</td> 
<td>December</td> 
</tr> 
</table> 
This is how it would look: 

  

Special Days  
First 6 Months of the Year Last 6 Months of the Year
(first 6 months)
J January
u
l
y
February Valentine's Day August

March September
OApril
c
t
o
b
e
r
MayEaster (usually) My Birthday November
DJune
e
c
e
m
b
e
r

 Note: If you check out the above table you'll notice that the center cell at the bottom has
a nice edge around it as opposed to the two other empty cells, to accomplish this just
insert a non-breaking space (&nbsp;) into the cell.

To add background colors to tables,


>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Resizing Images
How to resize your images

Okay, you have an image you want to use, but it's just not the right size to go where you
want it to go. Maybe the image takes up the whole screen, or maybe you wanted a larger
version of the image on the screen. Well, you can resize the image by adding width and
height commands to your image tag. Let's take a look at an example. I have an image
called "next.jpg". Well, suppose I want to make it smaller. All I need to do is know the
original width and height of my image. The width and height are usually written in
pixels. My image turns out to be 106 pixels wide and 65 pixels in height. The picture
looks like this:

So, to change the size of the image, I'm going to add these two commands inside the
image tag:

width="" and
height=""

I'm going to place the commands after the initial command, img src="next.jpg". The tag
will now look like this:

<img src="next.jpg" width="" height="" />

Now, to make the image smaller, I'm going to place numbers inside those quotation
marks. Well, let's say I wanted it to be 75 pixels wide and 40 pixels high. I would then
place these numbers into the commands, like this:

<img src="next.jpg" width="75" height="40" />

Now, when I reload my page, the picture will be the new height and width I specified.
Here's what it would look like:

Now, to make the image larger, we will just insert larger numbers for the width and
height:
<img src="next.jpg" width="300" height="200" />

Now the image looks like this:

As you can see, the images became somewhat distorted when I resized them. One reason
for this is that I didn't keep the aspect ratio the same. Since the image was originally
106x65, I would have to decide on a width, and then find a height that would keep the
aspect ratio of 106/65. When you calculate 106/65, you get about 1.63. So, if you want to
make the width 75, you need to find the height that will make the ratio as close as
possible to 1.63 . You can guess at it for awhile, or if you like solving equations, here it
is:

75/height = 1.63

Now take the answer and round up or down. In this case, it comes out to about 46.0123.
So, I would use 46 as the height:

<img src="next.jpg" width="75" height="46" />

Now it looks like this:

If you don't want to deal with math all the time (like me), you can also resize it with a
paint or image program (which will do the calculations for you) and upload the new
version of the picture to your server. I usually use my image program to do this, just for
the ease of use. Besides, if I'm making the image smaller, the paint program will make
the file size smaller.

All right, now we will move on to the next section, Using an Image as a Link (and there
won't be anything about aspect ratios or mathematical equations!).

Using an Image as a Link


How to link an image
To use an image as a link, you will have to use two things you have already learned.

1.How to create a link.


2. How to add an image to the page.

Now, remember my trusty old picture, "next.jpg"? I have been using it at the bottom of
each page as a link to the next section. So, what did I do? Well, first, you must create a
link to the place you want people to go when they click on the picture. So, if you wanted
to link to our main page, you would go ahead and type the opening link tag, like this:

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

Now, don't type any text, and don't close the tag just yet. What we are going to do is
place the image tag right after the opening link tag. The image we are using here is
"next.jpg". So, you would type the following:

<a href="http://www.pageresource.com">
<img src="next.jpg" />

OK, now we are going to close the link tag at the end of the image tag, so that the image
tag is between the opening and closing link tags, like this:

<a href="http://www.pageresource.com">
<img src="next.jpg" />
</a>

Now that the image is between the link tags, it will operate the same way as a normal
link, but now it is a visual image. Here is what the above code would produce:

Move the mouse over the image, and it will turn into the little pointing hand. If you click
on the image, you will end up all the way back at our main page.

Well, that's good, but what's with the border around the image? Well, the border just
seems to be added by default on most browsers. To get rid of it, add this command to the
image tag:

border="0"

Here is an example:
<a href="http://www.pageresource.com">
<img src="next.jpg" border="0">
</a>

Now, the picture will be a link, and you won't have the extra border around the sides:

You can also make the border larger in the same way, just use a larger number in there,
for instance:

border="5"

The drawback to the border is that it insists on being the color of your link color, and
sometimes this isn't the color you want to use. You can fix this using style sheets if
needed.

So, let's move on to the next section, Image Alignment and Wrapping Text.

Using a Background Image


How to add a background image to your page
Note: These effects can now all be achieved using Cascading Style Sheets.

To add a background image to your page, you will need to locate the <body> tag in your
document. When you have found it, you may see just the word body, or you may see a
string of commands afterward. It may look something like this:

<body bgcolor="#FFFFFF" text="#000000">

What we are going to do is add a command after the word body. So, go to the end of the
word body, skip a space, and type the following:

background=""

Now your body tag should look something like this (and may have more commands):

<body background="">

Now, we are going to place the url of the image inside the quotation marks. So, if the
image I want to use is at http://www.mysite.com/image1.gif, I would insert this into the
command, like this:

<body background="http://www.mysite.com/image1.gif">

Your image should have the file extension .gif or .jpg . If not, you will want to covert it to
one of these file types. One program that will do this is Paint Shop Pro, which is available
as shareware from JASC.

Now, if your image file is located in the same directory as your HTML file, you can just
type the filename of the image rather than the full url. So, if we want image2.gif to be the
background image, and it is in the same directory as the page we are editing, we can type
the command this way:

<body background="image2.gif">

Now, as a real example, I will use an image from my server as a background on a page.
The name of the image is "next.jpg". The url for the image is
http://www.pageresource.com/images/next.jpg. So, to use this as a background, I would
type in this:

<body background="http://www.pageresource.com/images/next.jpg">

Now, if I put an HTML file in my "images" directory, I could use the image by typing in
just the filename, like this:
<body background="next.jpg">

Okay, now you can use your own image as a background... so put a picture of yourself as
a background. That's always kind of fun...

Well then, let's move on to the next section, Resizing Images.

Image Alignment and Wrapping Text


How to wrap text around an image

Note: These effects can now all be achieved using Cascading Style Sheets.

To allow text to wrap around an image, you just need to add one of these commands to
the image tag:

align="left"
align="right"

So, the image tag would look like this:

<img src="next.jpg" align="left" />

Now just type in your text and it will wrap around the image, rather than jumping to the
bottom of the image. Here is an example.

Hmmm....I think this image is in the way...<br />


<img src="../images/next.jpg" align="left" />
Hello, this text should wrap around<br />
this image like this.<br />
I'll just keep on writing and<br />
writing and writing and writing<br />
until I'm tired of writing....<br />

This will give you the following:

Hmmm....I think this image is in the way...


Hello, this text should wrap around
this image like this.
I'll just keep on writing and
writing and writing and writing
until I'm tired of writing....

If you write across the entire screen, you won't need all those line breaks. I just used them
to keep the example from being really long. If you take out the line breaks, the text will
go the rest of the way across the screen before wrapping around. You can also do this
with the align="right" command. The image will be on the right and your text will wrap
around the left. Isn't this great?

Well then, let's move on to the next section: Using Image "alt" Commands.

Using Image "alt" Attributes


An alternative to the picture

Okay, the image alt attribute is used to display text in the case someone visits your page
with a browser that can't show images, or in the case they have image loading turned off
to so pages will load faster. If you have images as links, this is a handy way to let people
know what the image was supposed to do. This is the alt command:

alt="something you want to write"

Place this inside the image tag:

<img src="image.gif" alt="something you want to write" />

You place this command inside the image tag for the image you want to display alternate
text for. One image I do this with is my "next.jpg" image at the bottom of these pages. I
place the text "next" in the alt command, and that is what will be seen if someone sees the
page with no images. Here is the example:

<img src="next.jpg" alt="next" />

To see this work, you will probably have to disable image loading and reload this page.
You can then scroll down to the bottom right and see the word "next" where the image
used to be. Of course, if you have a really new version of IE, you can move your mouse
over the image and it will display the alt text right there for you.

So, let's move on once again. The next section is: Linking Within a Single Page.

Navigation
Home
HTML Home
HTML Beginner
HTML Advanced
HTML Tutorial List
Disclaimer
What's New?
See What's New
See what's new by date added.

Linking Within a Single Page


Jump to the top, middle, or any other place

Okay, lets say you have one page that is pretty long. Maybe you would like to give
someone a way back to the top of the page when they are at the bottom. Or maybe you
want to divide it into sections and use a table of contents at the top. Well, the way to do
this is to use a named anchor, which is a specific area of your page you want to make a
link to. You could link to any part of the page, but for now, let's say you want to create a
link to the top of your page. To do this, go to the top of the body section (right after the
body tag). Now type the following tag:

<a name="top"></a>

You can place any name you wish inside the quotes. This just makes it easy to see where
we are going to end up. Now, go anywhere between the body tags and type this link:

<a href="#top">Back to the Top</a>

If you click on this link, you will be sent back to the top of the page. You can try one I
made on this page by clicking on the link below:

Back to top

The # sign is there to let the browser know the destination is a named anchor within this
page. So, if you create an anchor named "cool", you link to that anchor by using "#cool",
like this:

<a name="cool"></a>    <!--The anchor name-->


<a href="#cool">To the Cool Section of this page</a>
<!--Linking to the named section-->

You can place a named anchor anyplace on your page. You can link to it from any other
part of the page. You can place one at the third paragraph, the bottom, the top, the 500th
word. It can make navigating some pages a whole lot easier.

So, let's move on to the next section, The Email Link.


The E-Mail Link
How to create an email link

To create an e-mail link on your page, all you need to do is use the standard link tag. The
trick is in what you use as the address of the link. To force the browser to read it as an e-
mail link, you use "mailto:" rather than "http://" to begin the address. After the "mailto:",
you will use your e-mail address rather than a Web address, like this:

<a href="mailto:your_email_address">E-mail Me!</a>

Yes, all you need to do is replace the your_email_address with your e-mail address. Here
is an example, to create an email link to myself, I might place something like
[email protected] in that space, like this:

<a href="mailto:[email protected]">Give me some mail!</a>

Here is the resulting link:

Give me some mail!

If you click on the link, your browser will bring up a window for you to send an e-mail,
with the e-mail address already filled in.

You can also create the subject of the message so the viewer doesn't have to fill in
something in the subject line. You do this by adding a "?" at the end of your e-mail
address and then your subject, like this:

<a href="mailto:[email protected]?subject=Hey John">Mail Me!</a>

The example link is below, notice that when you click it, the subject field of your email
message is already filled in with "Hey John".

Mail Me!

Now, isn't e-mail fun?

All right, let's go to the next section, More on the E-mail Link.

The E-Mail Link: More


More tricks for the email link

In the last section, we saw how to add the subject to a message through the e-mail link. It
was done using a "question mark" followed by subject= and then the subject:
<a href="mailto:[email protected]?subject=Hi">Mail Me</a>

On top of adding the subject, there are a couple of extras you can also add. You can add a
carbon copy recipient, a blind carbon copy recipient, or use a combination of the subject
with either or both of these.

To send a carbon copy, you add the cc= command after the question mark, followed by
the e-mail address of the person you want to send the carbon copy to:

<a href="mailto:[email protected][email protected]">Mail Me</a>

The same goes for a blind carbon copy, except you use the bcc= command instead:

<a href="mailto:[email protected][email protected]">Mail Me</a>

With either of these, you can send the copies to multiple addresses by separating them
with commas:

<a href="mailto:[email protected][email protected], [email protected]">Mail


Me</a>

Now, if you want to combine more than one of these commands after the question mark,
you add them in using an "&" sign at the end of the first command. For instance, if you
want a subject and a blind carbon copy, it would look like this:

<a href="mailto:[email protected]?subject=Hi&[email protected]">Mail Me</a>

If you want all three, use the "&" sign again:

<a href="mailto:[email protected]?
subject=Hi&[email protected]&[email protected]">Mail Me</a>

With that, you can have some more fun with your e-mail links— and if you run a site
with a partner you can both get an e-mail when someone uses that link.

All right, let's go to the next section, Congrats!.

You might also like