Basic Web Development

Page
1
Table of Contents
1.0 HTML Codes...............................................................................................................4
1.1 Introduction to HTML.............................................................................................4
1.2 Basic HTML Document Code Structure..................................................................4
1.3 HTML Tags..............................................................................................................5
1.4 Table Tags................................................................................................................8
1.4.1 Table Borders.......................................................................................................8
1.4.2 Background and Border Colors............................................................................8
1.4.3 Cell Spacing and Cell Padding.............................................................................8
1.4.4 Table Width..........................................................................................................9
1.4.5 Column Widths.....................................................................................................9
1.4.6 Table Height.......................................................................................................10
1.5 Form Tags..............................................................................................................10
1.5.1 Text Box.............................................................................................................10
1.5.2 Radio Button......................................................................................................11
1.5.3 Checkbox............................................................................................................11
1.5.4 Drop Down List..................................................................................................11
1.5.5 Submit Button....................................................................................................11
1.6 HTML Background Music Code...........................................................................11
2.0 Microsoft Frontpage 2003.........................................................................................13
2.1 Getting Started.......................................................................................................13
2.1.1 FrontPage Preview.............................................................................................14
2.1.2 Local Web Browser File.....................................................................................14
2.1.3 Browser Versions and Screen Resolution...........................................................14
2.2 Creating a Web Page Title......................................................................................15
2.3 Adding a Theme.....................................................................................................16
2.4 Setting Page Colors................................................................................................16
2.4.1 Color Palette.......................................................................................................17
2.5 Adding Wallpaper..................................................................................................18
2.6 Adding and Formatting Text..................................................................................18
2.6.1 Style....................................................................................................................18
2.6.2 Font Face............................................................................................................19

Page
2
 2.6.3 Font Size.............................................................................................................19
2.6.4 Font Attributes....................................................................................................19
2.6.5 Alignment...........................................................................................................19
2.6.6 Numbers & Bullets.............................................................................................19
2.6.7 More Indent/Less Indent....................................................................................20
2.6.8 Font Color..........................................................................................................20
2.7 Using Hyperlinks...................................................................................................20
2.7.1 Inserting a Hyperlink..........................................................................................20
2.7.2 Removing a Hyperlink.......................................................................................22
2.7.3 Editing a Hyperlink............................................................................................22
2.8 Using Bookmarks..................................................................................................22
2.8.1 Creating a Bookmark.........................................................................................22
2.8.2 Inserting a Hyperlink to a Bookmarked Destination..........................................23
2.9 Using Images.........................................................................................................24
2.9.1 Image Types.......................................................................................................24
2.9.2 Inserting Clip Art................................................................................................24
2.9.3 Converting Clip Art............................................................................................25
2.9.4 Sizing and Placing Images.................................................................................26
2.10 Using Bulleted and Numbered Lists..................................................................27
2.11 Using Tables.......................................................................................................30
2.11.1 Creating a Table.................................................................................................30
2.11.2 Working with Tables..........................................................................................30
2.11.3 Table Toolbar......................................................................................................32
2.11.4 Table & Cell Properties......................................................................................32
2.12 Saving Your Work..............................................................................................35
3.0 Hosting Server...........................................................................................................36

Page
3
 1.0 HTML Codes

1.1 Introduction to HTML

A web page is created using a language called Hypertext Markup Language
(HTML). You can write HTML codes with a plain text editor (Notepad, Word,
WordPad, etc), or use a HTML editor (Frontpage, Dreamweaver, etc), which will
write the codes for you. HTML codes, also referred to as HTML tags, are enclosed
within pointed brackets (<>) and may be written in capital or lower case letters.
The opening bracket is (<) followed by an element, which is a browser command,
and ends with the closing bracket (>).

< font size = 2 >

eleme attribut value

nt e
An element may also be followed by attributes, which are words describing the
properties of the element, and further instruct the browser.

Attributes are only contained in the opening HTML tags to the right of
the element and are separated by a space and followed by an equal (=) sign.
The value follows the equal sign and is enclosed in double quotes .

1.2 Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout. Write this
code into your text or HTML editor.

<html>
<head>
<title>Your page title</title>
</head>
<body>

This area will contain everything that will be visible through a web
browser, such as text and graphics. All of the information will be html
coded. For a complete list of html codes, tags and examples, see the
HTML table below.

</body>
</html>

The blank lines/spaces are not necessary; browsers ignore blank spaces in HTML
documents. However, this makes your HTML documents easier to read.

Page
4
1.3 HTML Tags
The one-sided tag is an empty tag that has opening tag <> but NO ending tag
</>

Tags Description One Two

- -
side side
d d
<html> to indicate that the file is an HTML document
<head> heading of HTML documents
<meta> includes general information about the document
(keywords for search engines)

<meta name="description" content="description of

your site">
OR
<meta name="keywords" content="keywords describing
your site">

Example:
<meta name="keywords" content="iium, uiam, centre for
foundation studies, international Islamic university
malaysia">

<title> identifies the title of the Web page

will be displayed in the title bar
<!-- identify the author, purpose, date created or last
comments--> updated, and other information as required
browser ignores it and does not display it in a Web
page
<!--Written by: Web Admin, CFSIIUM, 2013-->
<html>

<head>
<meta>
<title>MY FIRST WEBSITE</title> header
</head>

<body>
</body> body

</html>

Page
5
Tags Description One Two
- -
side side
d d
HTML body includes the content of the Web page along with the
<body> tags needed to format that content
to add background color (refer HTML color codes
they are hexadecimal triplets!):
<body bgcolor="#0000CC">
to set background image:
<body background="image.jpg">

Bold <b>Text</b>
<b>
Italic <i>Text</i>
<i>
Underline <u>Text</u>
<u>
Line break is used when you want to break a line, but don't want
(blank line) to start a new paragraph
<br> it forces a line break wherever you place it
Horizontal <hr> attribute: width, color, size
rule <hr> <hr width="100%" color="#FF0000" size="4">
Headings <h1> tag for a level-one heading
<h1> until <h6> tag for a level-six heading
<h6>

Paragraph align attribute values: (left, right, center, justify)

<p> <p align="center">Hello and Welcome</p>
List type attribute values: (disc-, circle-, square-)
<li> and <li type=square></li>
<dl> 3 types:
Bulleted list <ul> ONE
(unordered <li>ONE</li> TWO
list) <li>TWO</li>
-with a bullet </ul>
character
Numbered list <ol> 1. ONE
(ordered list) <li>ONE</li> 2. TWO
-with <li>TWO</li>
sequential </ol>
numbering
Definition list <dl> ONE
-terms with <dt>ONE</dt> This is no. 1
definitions <dl>This is TWO
one</dl> This is no. 2
<dt>TWO</dt>
<dl>This is
two</dl>
</dl>
Pictures <img src="photo.jpg">
<img>
OR with picture attributes: alt, border, height, width
Page
6
 alt - is used to display alternative text to be
displayed on the screen whenever the picture file is
not able to load by a browser

<img src="photo.jpg" alt="my photo" border=1

height=100 width=100>

Anchor 1)Text hyperlink:

<a> <a href=http://www.google.com>Click to visit
Google</a>
2)Image hyperlink
<a href= http://www.google.com><img
src=img.jpg></a>
3)E-mail hyperlink:
e-mail client program will be opened (E.g: Outlook
Express)
<a href="mailto://azimah@gmail.com">Click to e-mail
me</a>

4)Bookmark:
a hyperlink to a particular spot on the same page
very useful when you have a long page to avoid user
from scrolling up and down finding information
assign id to any element, example:
<img src=photo.jpg id="top">
<p id=bookmark1>This is my first paragraph</p>

then use anchor tag <a> to refer to that id

<a href="#top">Back to top</a>
<a href="#bookmark1">Go to paragraph 1</a>

<center> This will center your contents

<font> Font attributes: face, size and color:

<font face="Times New Roman" size="3"

color="#FF0000">
Your text</font>
Scrolling text Attributes:
<marquee> loop =-1 (nonstop)
loop =1 (only once)
scrollamount = (speed)

<marquee bgcolor="#cccccc" loop="-1" scrollamount="2"

width="100%">your text</marquee>
Preformatted To put tab characters in your HTML
<pre> Any spacing characters you put between those tags
(including tab characters) will show up just as you
entered them.
Page
7
 <pre> Ny name is Azimah</pre>
Embed Web To insert any multimedia Web components such as audio,
component video and flash files.
<embed>
<embed src=flashfile.swf></embed>
<embed src=movie.avi></embed>
<embed src=song.mp3></embed>
<embed src=embedded URL></embed>
*embedded URL can be copied from the source provider
e.g Youtube.com

Page
8
1.4 Table Tags
Tags Description One- Two-
sided sided
<table> Table
opening & closing table tags
<table></table>
table row <tr></tr>
table data <td></td>
o represents a cell (or column) inside
the row

HTML codes for a simple table:

<table>

<tr>
You can tell how many rows and
And this is how the table looks like:
<td>A</ columns are included in a table just by
td> looking at the code.
A B C
<td>B</
td> The two opening <tr> tags indicate
<td>C</ X Y Z
td>
two rows and the three opening <td>
</tr> tags on each line represents three data
cells (or three columns). To add
<tr> another row, just start with another
<td>X</ <tr> and so forth.
td>
<td>Y</
td>
<td>Z</
td> 1.4.1 Table Borders
</tr> Adding a border simply involves
</table>
inserting the border attribute to the
opening table tag. The code would be
adjusted like this:

<table border=2>

Notice the "2" represents the thickness of the border. If you had set it to "0" then
there would have been no border at all. If you wanted it very thick then you could
set it to 10, for example.

1.4.2 Background and Border Colors

You can change the color of a table background or border by simply adding the
bordercolor or bgcolor attribute.

Page
9
 <table border="2" bordercolor="red" bgcolor="yellow">

1.4.3 Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells
by using the cellpadding and cellspacing attributes.

cellspacing adjusts the space between the cells

cellpadding adjusts the space within (around) the cell

<table border="2" cellspacing="10" cellpadding="3">

This is what the table would look like now:

See how setting the cellspacing attribute to "10" drastically

increased the spacing between the cells, and the cellpadding
attribute set to "3" added a little of space within each
individual cell.

1.4.4 Table Width

You can specify the width of a table by using either a percentage or a pixel width.

<table width="100%" border="2">

Since the width is set to 100% that means the table will take up 100% of the
screen and the columns in the table will be adjusted evenly. Here's what it would
look like.

A B C
X Y Z
As mentioned, you can also set the table width using pixels instead of
percentages. So instead of setting it to 100%, you could set it to 300 pixels:

<table width="300" border="2">

1.4.5 Column Widths

Sometimes you may not always want your columns to be the same width. If this
is the case, you need to set values on your table data <td> cells. Again, you can
set them by using percentages or pixel widths.

<table width="300"
Page
10
 border="2">

<tr>
<td width="70%">A</td>
<td>B</td>
<td>C</td>
</tr>

<tr>
<td width="70%">X</td>
<td>Y</td>
<td>Z</td>
</tr>

</table>

A B C
This is what X Y Z this table would look like.

See how the column width for the first column in both rows is set to 70%. Notice
there is no value set for the other 2 columns. If you do not set a value for the
remaining columns, their width will automatically be adjusted to take up the
remaining space (30%) and they'll share it equally.

1.4.6 Table Height

You can also set the table height by adding the height tag to the table code.

<table height="250" width="300" border="2">

1.5 Form Tags

Tags Description One- Two-

sided sided
<form> Online Form
opening & closing table tags <form></form>
Note that the form itself is not visible.

1.5.1 Text Box

First name: <input type="text" First name:
name="firstname" size="20">

Page
11
In most browsers, the width of the text field is 20 characters by default. To
change it, set size to another value.
1.5.2 Radio Button
<input type="radio" name="gender"> Male
<br>
<input type="radio" name="gender"> Female

1.5.3 Checkbox
<input type="checkbox"> I have a bike
<br>
<input type="checkbox"> I have a car
1.5.4 Drop Down List
<select>
<option>Honda</option>
<option>Toyota</option>
<option>Naza</option>
</select>
1.5.5 Submit Button
<input type="submit" value="HANTAR">

1.6 HTML Background Music Code

To insert background sound, the code used is:

<body bgsound src="pinkpanther.mid">

Or you can use <embed> code:

You can add HTML background music code to your web page using
the hidden attribute of the embed tag. The embed tag isn't actually part of the
HTML specification but it is still widely supported by the major browsers.

Example Background Music Code

<embed src="cenfos.mp3" loop="false" hidden="true"

autostart="true"></embed>

This code will run music in the background as soon as the page loads.

Adding Audio Controls

Page
12
If you want your users to be able to control whether the background music plays
or not, you can simply remove the hidden attribute (or change it to "false"). You
can also add width and height to the controls. It's also a good idea to turn
autostart off (autostart="false").

<embed src="cenfos.mp3" loop="false" width="300" height="90"

hidden="false" autostart="false"></embed>

This results in:

(The player will be displayed on the page)

Page
13
2.0 Microsoft Frontpage 2003

People use FrontPage because it makes the creation of Web pages fast and easy.
Advantages of using FrontPage include:

Hands-on editing. Of all the benefits FrontPage offers, nothing beats its
ability to let you see the changes to your Web page as you make them.
While you're working, you pretty much see pages as visitors to your site
eventually will. You add and edit visual elements like images and hyperlink
buttons by clicking on them directly. When you move or resize an object, the
results show immediately.

Speed. Tasks that are extremely tedious when coding manually, like creating
a table, are a snap in a program like FrontPage. In fact, many professionals
who write their pages by hand often hop into programs like FrontPage just to
add a table. In the process, they save themselves tons of typing.

Visual aids. FrontPage provides diagrams to help manage even the abstract
aspects of your site, like hierarchy and site navigation. An illustration can be
a big help when you're having trouble organizing pages.

Guidance. FrontPage menus and toolbars provide direction that's lacking in

an all-text HTML world. For instance, even if you don't know exactly how to
do something, like format a table border, you can most likely figure it out by
searching through menus called Format or Table to find the right command.

2.1 Getting Started

Start a new FrontPage document, by clicking the FrontPage icon , or by choosing

FrontPage from Start > All Programs.

Page
14
2.1.1 FrontPage Preview

At the lower left corner of the FrontPage screen, find the four tabs indicating the
various views of your document. To switch between views, click the tab that you
want to change to.

Designthe view in which you do your WYSIWYG work

Splitthe view that displays the HTML coding in a top window pane and the
WYSIWYG view of your page in a bottom window pane

Codethe view of the actual HTML coding that creates your page

Previewthe view that you click when you want to test your document and
view an approximation of the page as it will appear in the Web browser

2.1.2 Local Web Browser File

Another way to view a Web page is using the Web browser:

1. Start your default web browserInternet Explorer, Firefox, Netscape

Navigator/Communicator.

Page
15
 2. After the browser is started, from the menu, choose FILE > Open. Browser versions
vary, so it may say Open Page or Open File.

3. Look for the Web page you want to test. Again, browsers differ. You may see
an Open File dialog box, or you may need to click Choose File or Browse in
order to go to the place where you stored your file.

4. After you locate your file, select and open it. You may need to click OK or
Open depending upon the dialog boxes you have and your computer system
and browser.

5. When the file opens in the browser window, you can look through it to see
that everything looks as you want it to.

2.1.3 Browser Versions and Screen Resolution

A new feature available in FrontPage 2003 is to preview your Web page in various
browsers at different screen resolutions. You should make sure that you have no
browsers running, then from the menu, choose FILE > Preview in Browser. FrontPage
will start each browser that you have installed and show you the Web page in the
resolution that you specify.

2.2 Creating a Web Page Title

Page
16
Within the HTML code of each Web page there is a <TITLE> tag. The information contained
within the <TITLE> tag appears at the top of the browser window in the colored
strip.

To insert the <TITLE> tag information,

1. Choose from the menu, FILE > Properties.

2. In the Page Properties dialog box (see example below), complete the Title
information, then click OK.

2.3 Adding a Theme

Page
17
To add a theme,

1. From the menu, choose FORMAT > Theme

2. The Theme task pane will open on the right side of your design window
allowing you to select a theme from the list of choices. NOTE: If you have
not previously used themes with FrontPage 2003, you may see a message
(see example below) alerting you that you need to activate a feature.

2.4 Setting Page Colors

You can specify the colors of the following elements:

Backgroundthe color of the "paint" behind the text on your page

Textthe color of the words

Hyperlinkthe color of a word or phrase you define as being "click-able"

Visited hyperlinkthe color that a link changes to after you have clicked,
then returned to that page; it shows that the link has been "used"

Active hyperlinkthe color of the currently selected link (only works when
the Internet Explorer browser is used)

To set the colors for any of the above-identified components,

1. From the menu, choose FORMAT > Background.

2. In the Page Properties dialog box, make sure the Formatting tab is selected.
In the center of the dialog box, find the colors section (see example below).
Each color has the automatic (or default) color displayed in a drop-down box
to the right of the option. To choose a color, click the drop-down box to the
right of the option you want to change.

Page
18
 3. In the pop-up box, you can either select one of the basic Web colors or click
More Colors to see a complete color palette.

2.4.1 Color Palette

To choose a color from the color palette, click the desired color, and then click OK.

2.5 Adding Wallpaper

To add a wallpaper image to your page, from the menu,

1. Choose FORMAT > Background.

Page
19
 2. In the Formatting section of the Format Background dialog box (see example
below), click to place a checkmark in the Background picture option.

3. Click Browse, then go to the location where you saved your wallpaper file.
After you have selected the file, click OK.

2.6 Adding and Formatting Text

Typing text in FrontPage is exactly the same as typing in a word processor.

However, formatting text requires a different toolsetbut one, nonetheless easy
to learn!

TIP: when working in an HTML document, if you press the <Enter> key, you will
get a blank line. Often you want a single-spaced appearance instead (e.g., an
address block). Rather than pressing <Enter>, press and hold the <Shift> key
while pressing <Enter>.

NOTE: There are a limited number of "spots" for toolbar icons, therefore, only the
ones you have used most frequently may be visible. Notice the More Buttons icon,
, shown in the example below (look to the far right). If you don't see an icon on
your toolbar, look for the More Buttons icon. When you click the More Buttons
icon, it drops open an additional toolbar where you can click the icon you want to
use. This causes that icon to display on your toolbar and another one that you
haven't used in a while to "hide."

2.6.1 Style

Generally, you'll want to keep the Style option as Normal. Other Style choices
include headings, definition lists, and any specifically defined styles. Heading
styles correspond to the HTML <H1> through <H6> tags. Headings are always
bold and always have a space both above and below them to separate the
heading from the remainder of the text. Heading One correlates to approximately
14-point size, while Heading Six correlates to approximately 8-point size.

2.6.2 Font Face

Page
20
Font Face defines the style of letters. All of the fonts currently installed on your
computer will display in the Font Face drop-down box. Some computer systems
show you the font face name in the style that it will cause the letters to display.

Font faces can only be displayed on computers on which that specific font is
installed. This means that if you use a special font and I am viewing your page,
but don't have that same font installed on my computer, then my computer will
convert that font to whatever it thinks might be close to what you wanted.
Therefore, even though the stylistic fonts may be pretty, unless you are very sure
of your audience and know what computers they may be using to view your Web
page, you should stick with the standards.

2.6.3 Font Size

For the most part, you should leave the text size as Normal. Even when you apply
a heading style, the font size remains normal because it is the normal size for that
specific style. Be particularly careful of using small font sizes (10 point is normally
the smallest size you should use for regular body text), because they can appear
too small to be easily read on some monitor resolution settings.

2.6.4 Font Attributes

Attributes are formatting that you can choose to apply to text. The ones displayed
by default are bold, italics, and underline.

To select additional attributes, from the menu, choose FORMAT > Font. Additional
attributes include super- and subscript, and a lot of others that you probably
wouldn't normally use in a Web page.

2.6.5 Alignment

By default, each element on a Web page is aligned on the left (meaning that the
left margin is straight). You can also choose to center or right align elements.

HINT: To center a table on a Web page, click anywhere in the table, then right-click
and choose Table Properties. Choose from the Layout Alignment drop-down menu,
Center.

2.6.6 Numbers & Bullets

Using the number or the bullet tool to create a numbered or bulleted list causes
the text to align correctly under the text rather than wrapping to the left margin
under the number or bullet.

Page
21
2.6.7 More Indent/Less Indent

The indent tools allow you to increase or decrease the indent of a block of text.
The indent moves both margins, not just the left margin.

2.6.8 Font Color

When you choose a font color, you are selecting a new default colorthe color
that will automatically be applied to all text that you type in that particular page.
However, you can also selectively apply color to text by highlighting the text, then
choosing a color from the Font Color tool. The currently selected color is denoted
by the band beneath the "A." You can either choose one of the standard Web colors
shown, or click More Colors and choose a color from the Color Palette.

2.7 Using Hyperlinks

Hyperlinks are those areas that you design to be "clicked" in order to take your
reader to a different location.

2.7.1 Inserting a Hyperlink

1. Type the text that you want your reader to see.

2. Highlight the text.

3. Click the Insert Hyperlink tool, .

In the "Create Hyperlink" dialog box:

To link to a different web site, in the Address text box, type (or copy and
paste) the URL (i.e., http://www.iium.edu.my/train/home.html).

To link to a file within your own Web directory/folder, change to the

directory/folder where you have stored the file, select it, then click OK.

Page
22
 To create a hyperlink to an E-mail address (so that the reader can click and
send an E-mail message), click the E-mail Address icon in the lower left
corner of the hyperlink dialog box. The Insert Hyperlink dialog box will
change appearance (see example below), allowing you to type the complete
E-mail address (e.g., jsmith@mystuff.com), as well as a subject line if you
want to "pre-fill" the subject of the message. Then click OK.

Page
23
2.7.2 Removing a Hyperlink

1. Click anywhere within the word or phrase containing the hyperlink.

2. Click the Insert Hyperlink tool, .

3. The dialog box will change to now include a Remove Hyperlink button (see
example below). Click Remove Link.

2.7.3 Editing a Hyperlink

1. Click anywhere within the word or phrase containing the hyperlink.

2. Click the Insert Hyperlink tool, .

3. Edit the text in the URL box by highlighting the text and pressing the
<Delete> key on your keyboard. Retype the information, then press OK.

2.8 Using Bookmarks

A hyperlink allows your reader to jump to a specific location within a Web file. The
destination of this type of link is, in HTML "language," a named anchor. FrontPage
calls them, bookmarks.

These types of links have two components: the link and the destination. You
should create the bookmark before you create the hyperlink.

2.8.1 Creating a Bookmark

Page
24
 1. Insert your cursor at the point in the document where you want the reader
to be taken when the hyperlink is clicked. You may want to consider adding
the bookmark at the end of the line above where you want the destination
to be in order to provide a bit of a margin above the line where you want the
reader to begin reading.

2. From the menu, choose INSERT > Bookmark.

3. In the text box, type the name of the Bookmark. Name the bookmark
something descriptive, but simple.

2.8.2 Inserting a Hyperlink to a Bookmarked Destination

To insert a hyperlink to a named destination,

1. At the point in the document where you want the hyperlink, type the text
that you want your reader to see.

2. Highlight the text.

3. Click the Insert Hyperlink tool, .

4. In the "Create Hyperlink" dialog box, to link to a specific spot in the same
file, click Place in This Document, and select the name of the bookmark,
then click OK.

Page
25
To link to a specific spot in a different file, first select the file as instructed above.
Then click the Bookmark button and select the bookmark from the list.

2.9 Using Images

To save an image you find on the Web, point to the image and right-click, then choose
Save Image As.

2.9.1 Image Types

Images that are viewable on the Web must be in one of three formats: gif, jpg, or
png. Both gif and jpg are image file compression utilitiesthey decrease the size
of the file so that it loads more efficiently when viewed on the Web.

Jpg (Joint Photographic Experts Group) files are used with photographic quality
images. The files are compressed by removing a few of the millions of colors
present in the image that our eyes can't see anyway. Gif (Graphics Interchange
Format) are used with images with solid blocks of color such as clip art, balls,
bullets, cubes, and bars.

Clip art files are generally in one of two formats: wmf or bmp. Both file types are
Windows' file formats, so FrontPage can read both. It also has the capability of
converting either file type to a Web-readable format, which is important because
unless your readers happen to have that particular clip art image installed on their
computers, they will be unable to view the image unless it is converted.

2.9.2 Inserting Clip Art

To insert a clip art image into your Web page,

1. From the menu, choose INSERT > Picture > Clip Art.

Page
26
 2. In the Insert Clip Art dialog box , type a search term, make any desired
selections from the Other Search Options, then click the Search button.

3. Click on the image you want to select and it will be inserted in your Web
page. To close the Insert Clip Art dialog box, click the X in the upper right
corner of the dialog box window.

2.9.3 Converting Clip Art

Remember that clip art images are in Windows file formats rather than gif or jpg,
so it is necessary for you to convert them to a Web-readable format. To convert a
clip art image,

1. Click once on the image so that it has handles (see example below)

2. Right-click and from the pop-up menu, choose Picture Properties.

3. In the Picture Properties, click the Picture Files Type button.

Page
27
 4. FrontPage recognizes that most times you will be converting a clipart image
to gif and has preselected that option for you (see example below). If that is
accurate, click OK to accept the option.

2.9.4 Sizing and Placing Images

Although it is possible to re-size an image after it is inserted into the Web

document by dragging the handles, you shouldn't do that unless it is a relatively
small adjustment. While altering the image in this way makes the image display
smaller or larger on the screen, it doesn't physically alter the file size. Increasing
the image display size in this manner may cause the image to pixelateto look
grainy or "spotty." Decreasing the image display size by dragging the handles
causes it to display smaller on the screen, but since the file size itself was not
altered, it still takes as long for the reader to download as it would have you had
kept it its original size. For anything other than a small adjustment, it is always
better to open the image in a graphics application and physically resize it.

To move the image to another location in your page, click once on the image so
that it has handles. Then, press and drag the image to a new location on the
page. Be careful not to accidentally re-size the image by pressing and dragging on
a handle. Dragging a two-headed arrow resizes an image; dragging a four-headed
arrow moves the image.

Page
28
Aligning an image can often be a bit frustrating. You can seldom place an image
just where you want it, unless it's left-aligned, centered, or right-aligned, and only
then by using the alignment tool, not be pressing and dragging to a new location.
By default, images are left-aligned, as are all elements on a Web page. To center
an image, click on the image so that it has handles, then click the center
alignment tool (or for more precise control, insert the image into a single cell,
single row table and align that).

When adding a line of text beside an image, notice that a long line of text wraps
beneath the image, rather than flowing so that there are multiple lines to the side of an
image.

This is a
picture of a church in the Alps.
Notice that excessively long lines of
text wrap beneath the picture.
Normal

To cause the text to flow beside the image, point to the image on your page and
right-click. From the pop-up menu, choose Picture Properties.

This is a picture of a church in This is a picture of a church in

the Alps. the Alps.

Right-aligned (the image Left-aligned (the image is

is on the right) on the left)

In the Picture Properties dialog box, click the Appearance tab and from the drop-
down Alignment box, choose either Left or Right aligned. To create buffer/margin
around the image choose Horizontal/Vertical spacing (numbers are in pixels)just play
with the numbers until you get the spacing you like.

Page
29
2.10 Using Bulleted and Numbered Lists

To insert bullets or numbers as you type:

1. Place the cursor in the paragraph in which you want the list to start (it
doesn't have to be at the beginning of the sentence; simply in the
paragraph).

2. Click the Number or Bullet tool, , and type the text, then press the
<ENTER> key on your keyboard.

3. When you press ENTER to begin the next paragraph, the next bullet or
number automatically appears.

When you begin the first paragraph that you don't want to have a bullet or
number, click the tool to turn off the feature, or press the <ENTER> key on your
keyboard to revert to normal formatting.

You can affect indentation of lists by clicking the Decrease Indent tool or Increase
Indent tool, , respectively.

To use graphical bullets or to change the number style (i.e., Roman numerals,
upper case alphabetic, lower case alphabetic, etc.), choose from the menu, FORMAT >
Bullets and Numbering.

The Picture Bullets tab of the Bullets and Numbering dialog box (see
example below) allows you to choose a graphical bullet. To choose a
graphical bullet from ones that you have previously saved, click the Browse
button, locate and select the image file, then click OK. The graphical bullet
will be placed to the left of whatever paragraph your cursor is currently in.
Each time you press the <ENTER> key on your keyboard, another bullet will
appear for the next item in the list. Press the <ENTER> key on your
Page
30
 keyboard twice at the end of the last item in the list and the bullet
formatting will revert to normal formatting.

The Plain Bullets tab in the Bullets and Numbering dialog box (see example
below) allows you to choose the style of bullet you want. After making your
selection, click OK.

Page
31
 The Numbers tab in the Bullets and Numbering dialog box (see example
below) allows you to select a non-Arabic number style or to select a
different starting number other than 1. After selecting the style of number
and the starting number you want, click OK.

2.11 Using Tables

Tables are useful to organize information. They are especially beneficial in

creating the appearance of multi-columned text.

2.11.1 Creating a Table

To insert a table:

1. Click the Insert Table tool, .

Page
32
 2. Press and drag the Table Size pop-up box (see example below) to select the
number of rows and columns you want in your table. When you release the
mouse button, a table of the proportions selected will display in your
document.

NOTE: It is best if you can decide ahead of time the number of columnsit will
save you a step during development.

The table will show on the Web page during development with dotted lines so that
you can more easily work with the table. The dotted lines indicate that the lines
will NOT display on the Web.

2.11.2 Working with Tables

To adjust the column widths and row heights, point your mouse at the border you
wish to adjust. Move the mouse very slowly until you see the cursor change to a
double headed arrow (it's quite sensitive; move it slowly), then press and drag to
the new dimensions.

To enter data into the table, click your mouse cursor in a cell and begin typing.

To move from cell to cell, press the <TAB> key on your keyboard or click the
mouse cursor in the cell to which you want to move.

To add an additional table row at the end of the table, position your cursor in the
lower, right corner cell and press the <TAB> key on your keyboard.

To select a table/column/row/cell, click in the row or column that you wish to

select, then from the menu choose TABLE > Select > Table/Column/Row/Cell
(whichever one you wish to select).

To insert a row or column, click in the row or column beside which you wish to
make an insertion. From the menu, choose TABLE > Insert > Rows or Column.
Page
33
From the dialog box, select either row or column. The example below has Columns
selected; therefore, the Location indicates a Left of selection or a Right of
selection insertion option. If Rows had been selected, the Location would have
adjusted to show Above or Below options.

To delete individual cells, complete rows or complete columns, position your

cursor in the appropriate location (in the cell, in the row, or in the column), then
select the element (as previously described) that you want to delete. After the
element is selected, from the menu, choose TABLE > Delete Cells.

To merge cells, select the cells as previously described, then from the menu, choose
TABLE > Merge Cells.

To split cells, place the cursor in the cell you wish to split. Then from the menu, choose
TABLE > Split Cells. In the dialog box, choose to split the cell into columns or into
rows, and specify the number of columns or rows you wish.

2.11.3 Table Toolbar

Page
34
The Table Toolbar gives you easy access to many of the same functions that you
can perform through the Table menu. Depending upon how the FrontPage options
are set on your computer, the Table Toolbar may display anytime you are working
with tables. If it doesn't and you want it to, from the menu choose VIEW > Toolbars >
Tables.

In addition to the table functions that you can access through the menu, you can:

Add a table or additional cells within a table. Click the pencil icon, . Press
and drag your cursor (which will look like a pencil) vertically or horizontally
to draw a new cell within your table.

Delete a cell wall from an existing table. Click the eraser icon, . Press and
drag your cursor (which will look like an eraser) over the cell border (you will
see the lines that will be deleted as red) you want to delete; when you
release the mouse, the borders will be deleted.

To "turn off" either the pencil or the eraser tool, press the <ESC> key on your
keyboard.

Distribute columns or rows evenly. After you have adjusted the table borders
several times, you may find that you simply want them back, evenly
arranged to "start over." Highlight the row or column that you want to
evenly distribute, then click the appropriate "distribute evenly" icon, .

Size the table according to the contents within it. Tables are always inserted
full-width. Rather than try to guess how wide the table must be to
accommodate the contents, click the Auto Fit icon, .

2.11.4 Table & Cell Properties

You can set table properties such as background and border colors, spacing, and
text alignment in the Table Properties. Make sure that your cursor is within the
table. From the menu, choose TABLE > Table Properties.

Page
35
In the Table Properties dialog box, you can make many choices about the table,
but there are only a few that you will normally need to do anything with:

Layout tools. Layout tools enable you to create specific layouts for page
design.

Size. This option allows you to specify the number of rows and columns you
wish your page to have. Access the table properties after you have inserted
a table, then make selections in the Size option to have it create the
appropriate dimensions.

Page
36
 Layout.

o Alignment. This option will position the table on the Web page.

o Width. This option specifies the width of the overall table. Setting the
table width in a percentage is more flexible from a design point of
view (tables with fixed pixels sizes do not adjust with the dimensions
of the user's browser window and can cause a horizontal scroll bar if
the table is wider than the browser window).

o Float. This option determines the table's position in relation to other

objects on the page. When Float is set to default, other objects appear
either below or above the table only.

o Height. In general, you should not specify a height for your table. Let
it adjust according to the needs of the table as displayed on your
reader's monitor. Otherwise, you may end up with lots of "white
space" that is not necessary.

o Cell padding & cell spacing. Cell padding is the amount of space
between the text and the wall of the cell. Cell spacing is the width of
the actual cell wall. In the two tables below, notice how the cell
padding and cell spacing values effect the appearance of the table
(NOTE: the HTML code uses "cellpadding" and "cellspacing" for the
terms):

This table cellpadding

has of 15 pixels

Notice how
and far the words
cellspacing of are from the
0 pixels. edge of the
cell.

cellpadding of 0
This table has
pixels
and cellspacing Notice the width
of 15 pixels. of the cell walls
and how close to
Page
37
 the cell walls the
text is.

Borders. Border size defines the width of the table border in pixels. It is
important to remember that some older browsers are unable to display a
border color.

Background. This option sets the color for the entire table. If you want to
selectively color the table cells, use the Cell Properties, rather than Table
Properties.

2.12 Saving Your Work

Don't let your new miniature Web site go unsaved. Actually, you already saved the
site itself when you created it. After that, you'll always be saving your site content
like pages and images. Should you try to close a site by selecting File Close Site,
FrontPage prompts you to save changes to individual pages one by one. You've
seen these kinds of prompts before when you've tried to close a program that still
has files open.

You're better off saving changes as you work. Saving frequently helps fend off the
danger of data loss (and nervous breakdown) due to a computer meltdown. If you
never lost work to a computer glitch, consider yourself one of the few and
fortunate. Caution aside, you'll find that saving your pages regularly eases site
maintenance.

If you have several pages open that contain unsaved changes, you can save them
all at once by selecting File Save All. FrontPage saves everything that's open and
unsaved.

Page
38
3.0 Hosting Server

Registering a Free Hosting Account

1. Go to http://www.3owl.com to sign-up for a free new account.

2. Fill in the form.

3. Once you account is activated (check your email account for the activation
link), log in into your account and click on Control Panel.
Page
39
4. You will get this message Registration is complete! Now you can create
accounts.

5. Click Create a New Account

6. Once you are done, now the status is changed to Active Accounts.

Page
40
 6
This is your URL !
ali.3owl.com

7. Check your email account again to get your username and password.

Sample activation e-mail:

Free Account Activated

Hide Details
FROM:3owl
TO:Ali Bin Abu
Message flagged
Tuesday, July 17, 2012 12:54 PM

Dear Ali ,

Thank you for your order from us! Your hosting account has now been setup and this email contains all
the information you will need in order to begin using your account.

If you have requested a domain name during sign up, please keep in mind that your domain name will
not be visible on the internet instantly. This process is called propagation and can take up to 48 hours.
Until your domain has propagated, your website and email will not function.

New Account Information

Hosting Package: Free

Domain: ali.3owl.com
IP Address: 21.270.267.242

Page
41
Control Panel Login Details

Email Address: ali@yahoo.com

Password: *********

Control Panel URL: http://cpanel.3owl.com

Server Information

Server Name: server12.3owl.com

Server IP: 31.170.166.14

If you are using an existing domain with your new hosting account, you will need to update the
nameservers to point to the nameservers listed below.

Nameserver 1: ns1.3owl.com 31.170.163.241

Nameserver 2: ns2.3owl.com 64.191.115.234
Nameserver 3: ns3.3owl.com 173.192.183.247
Nameserver 4: ns4.3owl.com 31.170.164.249 Use this info to log in using FTP
client such as FileZilla
Uploading Your Website

You may use one of the addresses given below manage your web site:

Temporary FTP Hostname: 31.170.167.142

Full FTP Hostname: ftp.ali.3owl.com
FTP Username: u907755430
FTP Password: **********

You must upload files to the public_html folder!

Remember to follow this
Email Settings instruction!

For email accounts that you setup, you should use the following connection details in your email
program:

POP3 Host Address: mx1.3owl.com

SMTP Host Address: mx1.3owl.com
Username: The email address you are checking email for
Password: As specified when setting up the email account

Thank you for choosing us.3owl

http://www.3owl.com

Page
42
8. Open FileZilla or any FTP program to transfer files from local server (your
computer) to remote server (hosting computer).

9. Key-in the required information and click Quickconnect.

9
10. You may want to save this connection for later use. Click File>Site Manager.

10

Page
43
11. Fill in the required information on the right-pane (Site details) and click Save
and Exit.

12. The connection is now saved under My FTP Sites (refer left pane).

12 11
ali.3owl.com
ali.com
test.3owl.com
1

13
13. 1 Connect to connect local server to remote server. Just drag and drop
Click
the files from left pane to right pane (in folder public_html).

14. Remember, the first page must be named as index.html !

Just drag and drop!

Page
44
15. Click Disconnect should you have finished transfer the files. Now your
website is published and ready to be viewed via a Web browser (e.g.:
ali.3owl.com).

15
1

Page
45