HTML Tutorials

INTRODUCTION TO WEB DESIGN USING HTML
The term HTML stands for:

1. Hypertext
2. Text
3. Markup
4. Language
Hyper document is the one that contains the links to other documents within or outside the document. A link is
a general term used to refer to a specially marked place on the screen that will cause something to happen when
its activated.
The term text stands for words that you want to display on the screen.
Markup language comes fro the publishing industry and its proofreaders marks.
Web browsers
This is a computer program (interface) that you use to explore the World Wide Web (WWW). The browsers
translate documents containing the HTML language into words and images on the screen.
Uses of browsers
1. Print the web pages.
2. Provide navigation line for entering a new web address.
3. Displays images.
4. Displays translated HTML documents as web pages.
5. Displays HTML codes in a document.
6. Plays videos and sound clips.
Examples of web browsers
1.
2.
3.
4.
5.
6.
7.
Internet explorer
Netscape navigator
Lynx
Mosaic
Braille
Panda
Mozzilla firebox
The URL
The acronym stands for Uniform Resource Locator. The URL describes the location of specific resource the
user wants to access. The URL can point to a different web page, another location in the current page or
components of a page.
E.g.
HTML TUTORIALS
BY KABA DANIEL
http://www.git.ac.ke
hTtp://www.safaricom.com
URL format
Protocol://domainname/path/filename
Components of a protocol
1. Protocol
A protocol identifies the format of the information to be accessed or being retrieved. The protocol tells
the browser how the information its receiving is organized.
Examples of protocols
HTTP
FTP
2. Domain name
Specifies the physical location of the information or file resource. This is the computer that runs the web
server software handling protocols specified in the first part of the URL.
HTML editing tools
They are programs that are used to help in editing and modifying the web pages. They are manufacturers
programs that help web designers to prepare web pages.
1.
2.
3.
4.
5.
6.
7.
HTML editor
JavaScript editor
Front page
Dream weaver
Php
Style sheets
Java
HTML coding tools

Helps the programmers design web pages.
Types of code tools
1. Hotdogs
2. Notepad
3. Page spinner
4. Arachnid
HTML conversion programs

Used to covert existing electronic file into HTML codes
1. Ant HTML
2
HTML TUTORIALS
BY KABA DANIEL
Works in word-processing and windows operating system and in wordprocessing in Macintosh.

2. WP2X
Works in WordPerfect documents.
3. GT-HTML
Works for word-processing in windows operating systems and Macintosh operating system.
4. Cyberleaf
Works in Microsoft, wordperfect and framemaker.
HTML verifiers
Helps HTML web pages verify that web pages contain valid links and correct syntax. They include the
following:
1.
2.
3.
Doctor HTML
Weblint
Momspider
Assignments that MUST be done by all class members.

1. Explain the term code generators.
2. Give examples of code generators and explain briefly.
HTML terms
a) Tags
They are HTML codes that are enclosed in angle brackets < >. E.g.
<Bold>
b) Containers
The containers contain both starting tag and ending tag. E.g.
<P>Gusii institute of technology</P>
c) Attributes
They are empty or starting tag that contain other HTML elements which are codes that modify related
tags. E.g.
<P align=center> Gusii Institute of Technology</P>
Essentials tags of HTML web pages

Every HTML web page must include the following tags for the browser to recognize it.
a) <HTML>
Declares that the text which follows defines an HTML web page which can be viewed in a web page.
b) <HEAD>
3
HTML TUTORIALS
BY KABA DANIEL
Defines the header area of a web page which is not displayed within a page in the web browser.
c) <TITLE>
Shows the title of the web page. It appears at the titlebar of a web browser.
d) <BODY>
Includes the actual contents of a web page that will be displayed in a web page.
e) <P>
Used to show the start of a new paragraph.
Example 1
<HTML>
<HEAD>
<TITLE>GREETINGS FROM THE WORLD OF WEB DEVELOPMENT</TITLE>
</HEAD>
<BODY>
<P>Hello, welcome the web design using HTML version 4.0</P>
</BODY>
</HTML>
Formatting text in web page
HTML uses various characters to format text. They include the following.
a) <address>
Used to display web pages Author information such as page URL, date of last update etc.
b) <I>
Used to italicize text in a web page.
c) <EM>
Used to display text in monospaced (fixed length) font where multiple spaces, tabs and lines are
displayed in HTML.
d) <B>
Used to display text in bold in web pages.
e) <strong>
Used to give strong emphasis that the web browser displays in bold.
f) <S>
To display strike-through text.
g) <U>
Used to underline text in web pages.
Example 2
<HTML>
<HEAD>
<TITLE>HTML formatting features</TITLE>
</HEAD>
<BODY>
<P>Using HTML formatting tags you can make text <STRONG>Bold</strong>,<EM>emphasized</EM>.</P>
<P>You can also <S> strikeout text</S> or <U> underline it.</U></P>
4
HTML TUTORIALS
BY KABA DANIEL
<P> If you dont use formatting tags, internet explorer will display text in proportional font, where different
characters take up different amount of space.
<.BODY>
</HTML>
Setting text colors
Text colors enhance the appearance of text.
Color attributes
Text =
Sets color for all text in a document.
A link =
Sets color for the active links.
Vlink =
Sets color for the links the user has visited.
Link =
Sets color for the unvisited links.
Example1
<BODY TEXT=RED>
Fontface and font size
We use <Font> tag to specify the font characteristics for a document such as size, color, and font name etc.
Font tags and attributes
Size =
Specifies the relative font size for text in a document.
Color =
Specifies the color for the text in a document.
Face =
Specifies the font name for text in a document.
<Basefont>
Specifies and sets the text characteristics in a document.
Example 1
<HTML>
<HEAD>
<TITLE>The font characteristics</TITLE>
</HEAD>
5
HTML TUTORIALS
BY KABA DANIEL
<BODY>
<P><font size=30 color=blue face=courier new>The Gusii Polytechnic, center of excellence</font></P>
</BODY>
</HTML>
HEADINGS IN HTML DOCUMENTS
Headings in HTML define the different levels of data for the page. The headings act as title s and subtitles in a
book or essay.
There are six levels of headings from the most important to the least important level.
<H1> Chapter one </H1>
<H2> Chapter two </H2>
<H3> Chapter three </H3>
<H4> Chapter four</H4>
<H5> Chapter five</H5>
<H6> Chapter six </H6>
Attributes for the headings
Align =
Aligns the text in a document at left, centre, right and justify.
Example 1
<H1 align=center>The Gusii Polytechnic, center of excellence<H1>
Example 2
<HTML>
<HEAD>
<TITLE>Kaba presents HTML 4.0 headings</TITLE>
</HEAD>
<BODY>
<H1 align=center> <font color=green face=Garamond>HTML 4.0 requires no experience to
use</font></H1>
<H2 align=right>Skill One </H2>
<H3>The internet </H3>
<H3> The world wide web</H3>
<H3> The URL</H3>
<H3> The basic URL</H3>
<H3> The complex URL</H3>
<H2> Skill two</H2>
<H3>The Common HTML tags</H3>
<H3> The Basic structure</H3>
</body>
</HTML>
6
HTML TUTORIALS
BY KABA DANIEL
Creating paragraphs in HTML

We use <P> tag to mark the beginning of a new paragraph. The end of a paragraph is marked by </P>
Paragraph attributes
Align =
Aligns the paragraph to the left, right, center and justify.
E.g.
<P align=center> Welcome to web design by the Mars Group</P>
CREATING HTML LISTS
Lists help the users spot information easily. They draw attention to important information in documents. They
also present information in a structured and easy read format. There are two types of HTML lists:
a) Ordered lists (Numbered lists)
b) Unordered lists (Bulleted lists)
Ordered lists is used to number items which the order is important while the unordered lists is used to number
items where the order in not important.
Lists and items tags
<OL>
Specifies that information appear as ordered list.
<UL>
Specifies that information appears as unordered lists.
<Li>
Specifies a line item in either ordered or unordered lists.
Ordered list.
Example 1
<HTML>
<HEAD>
<TITLE>HTML lists</TITLE>
</HEAD>
<BODY>
<Ol>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
</Ol>
</BODY>
</HTML>
7
HTML TUTORIALS
BY KABA DANIEL
Unordered list
<HTML>
<HEAD>
</HEAD>
<BODY>
<Ul>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
</Ul>
</BODY>
</HTML>
Setting list appearance
List attributes and tags for ordered lists
Type=
Specifies the number or letter with which the list should start.
Example1
<ol type=A>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
</ol>
List attributes and tags for unordered lists
Type=
Specifies the bullet shape with which the list should start.
Example1
<Ul type=Disc>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
8
HTML TUTORIALS
BY KABA DANIEL
<Li>cheetah
<Li>lioness
<Li>monkey
</ul>
Nested lists
In nested lists the numbering continues past each level section without the need to manually renumber with a
value attribute.
Example1
<HTML>
<HEAD>
</HEAD>
<BODY>
<Ol type=A>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
<ol type=I>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
<ol type=1>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
<ol type= *>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
9
HTML TUTORIALS
BY KABA DANIEL
<Li>lioness
<Li>monkey
<ol type=i>
<Li>lion
<Li>elephant
<Li>gazelle
<Li>bears
<Li>cheetah
<Li>lioness
<Li>monkey
</Ol>
</Ol>
</Ol>
</Ol>
</Ol>
</BODY>
</HTML>
CREATING HTML FORMS
Forms are used to collect information about an item, person from system end-users.
Guidelines used to create forms
Use headlines to announcements each group of information.
Separate each group of information
Use text emphasis to draw attention of audience to important information.
State how visitors should move through the form.
Use arrows to help the visitors to move the page.
Ensure its clear which controls and fields go with associated description.
Specify which fields are optional.
Use background images.
Forms controls (widgets)
These are fields you use on forms to collect data.
Submit and reset buttons
Send information to the server for processing and returns form to its original settings.
Text fields
Are areas for brief text input.
Select lists
Are areas from which visitors choose one or more items.
Checkboxes
Allow visitors to select none, one or several items from a list.
Radio buttons
They allow visitors to select only one item.
Text areas
These are areas for lengthy text input such as comments.
10
HTML TUTORIALS
BY KABA DANIEL
Form tags
a) <Form>
Marks the beginning of a form creation.
b) <Input>
Produces text on a form.
Form attributes
a)
Type=
Sets the type of input field such as text, checkbox, password, radio button, file, button etc.
b)
Name=
Processes the form results.
c)
Value=
Provides contents associated with name attribute.
d)
Size=
Sets visible size of a field.
e)
Select
Indicates a default selection to be presented when the form is initially loaded or reset.
f)
Accept=
Specifies the acceptable MIME types for file uploads.
Setting controls on a form.
a) Textfields
This is a blank area within a form for visitor data input.
Firstname
Lastname
Code
<h1>Personal information</h1>
Firstname<input type=text name=Firstname size=20maxlength=10><br>
Lastname<input type=text name=Firstname size=20maxlength=10><br>
b) Radio button
Allow visitors to choose one option from the list and allows one selection at a time.
DIT
.
.
DICT
DCS
11
HTML TUTORIALS
BY KABA DANIEL
Code
<h1>Courses offered</h1>
<input type=radio name=course>DIT<br>
<input type=radio name=course>DICT<br>
<input type=radio name=course>DCS<br>
c) Checkboxes
Used to allow visitors to select one or more items from the list. Each checkbox is independent.
Example
Lecture halls (select the applicable)
Lab one
Lab two
Lab three
Code
<h1>Lecture halls (select the applicable)
<input type=checkbox name=lab one>lab one<br>
<input type=checkbox name=lab one>lab two<br>
<input type=checkbox name=lab one>lab three<br>
d) Password fields
Accept contents of a field that are not visible.
Password
**************************
Code
Username<input type=text name=username size=20 maxlength=10><br>
Password<input type=password name=newpass maxlength=10><br>
e) File fields
Allows visitors to uploads files. Should be implemented both in server and browser.
Browse
Code
<input type=file name=newfile size=10 maxlength=30>
12
HTML TUTORIALS
BY KABA DANIEL
f) Text areas
Allows visitors to input length information. Used to solicit comments from visitors.
Text area tags and attributes
a) <textarea>
Sets area in a form for lengthy information input.
b) Name=
Eshtablishes a label for an input fields.
c) Row=
Sets number of rows for a visible field.
d) Cols=
Sets number of columns for the visible fields.
Comments
Code
<h1>comments</h1>
<textarea name=comments cols=20 rows=10>Please comments here</textarea>
Select fields
Created to let the visitors to select one or more choices to help prevent misspelt words or typing errors.
Select fields tags and attributes
a) <select>
Sets an area on the form for a select field.
b) Name=
Eshtablishes a alabel for an input fields.
c) Size=
Sets the size of the select field.
d) Multiple=
Sets select field form to accept more than one selection.
e) <option>
Marks item included in the field.
f) Value=
Provides contents associated with the name attribute.
13
HTML TUTORIALS
BY KABA DANIEL
g) Selected=
Lets the user specify a default selection which will appear when the form is loaded.
Code
<h1>Your town</h1>
<select name=Nairobi>Nairobi
<select name=Nakuru>Nakuru
<select name=Kisumu>Kisumu
<select name=Mombasa>Mombasa
<select name=Eldoret>Eldoret
<select name=Nyeri>Nyeri
</select>
Example 1
<html>
<form>
<table border="0">
<tr>
<td><b> Your Account</b></td>
</tr>
<tr>
<td align="right" valign="top"><span class="qf_required">*</span><label
for="">Email</label></td>
<td valign="top" align="left">
<input size="50" name="email[first]" type="text"
value="" /></td>
</tr>
<tr>
<td align="right" valign="top"><span class="qf_required">*</span><label for="">Email
(confirm)</label></td>
<input size="50" name="email[confirm]" type="text"
value="" /></td>
</tr>
<tr class="qf_static_row"><td class="qf_static" colspan="2"><div id="email_err"
class="qf_ajax_err"></div>Please enter your email twice to ensure it has been entered correctly.</td></tr>
<tr>
<td align="right" valign="top"><span class="qf_required">*</span><label for="">User
Name</label></td>
<input size="50" name="username" type="text"
value="" /></td>
</tr>
14
HTML TUTORIALS
BY KABA DANIEL
<tr class="qf_static_row"><td class="qf_static" colspan="2"><div id="username_err"

class="qf_ajax_err"></div>Choose a username that's 5-10 characters long, no spaces, case sensitive eg. jonesj
or sallyanne (Don't use these examples).</td></tr>
<tr>
for="">Password</label></td>
<input name="password[first]" type="password"
value="" /></td>
</tr>
<tr>
<td align="right" valign="top"><span class="qf_required">*</span><label for="">Password
(confirm)</label></td>
<input name="password[confirm]" type="password"
value="" /></td>
</tr>
<tr class="qf_static_row"><td class="qf_static" colspan="2"><div id="password_err"
class="qf_ajax_err"></div>Please enter your password twice to ensure it has been entered correctly.</td></tr>
<tr class="qf_header_tr Your Contact Details">
<td class="qf_header" valign="top" colspan="2"><div class="qf_header_hdr">Your Contact
Details</div></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Title</label></td>
<select name="title">
<option value=""></option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Mr" selected="selected">Mr</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
<option value="A.Prof">A.Prof</option>
<option value="Rev">Rev</option>
<option value="Sir">Sir</option>
</select></td>
</tr>
<tr>
<td align="right" valign="top"><span class="qf_required">*</span><label for="">First
Name</label></td>
<input size="50" name="first_name" type="text"
value="" /></td>
</tr>
<tr>
for="">Surname</label></td>
15
HTML TUTORIALS
BY KABA DANIEL
<input size="50" name="surname" type="text" value=""
/></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Organisation</label></td>
<input size="50" name="organisation" type="text"
value="" /></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Position</label></td>
<input size="50" name="position" type="text" value=""
/></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Phone</label></td>
<input size="50" name="phone" type="text"
value=""/></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Fax</label></td>
<input size="50" name="fax" type="text" value="" /></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Mobile</label></td>
<input size="50" name="mobile" type="text" value=""
/></td>
</tr>
<tr class="qf_header_tr Your Contact Address">
<td class="qf_header" valign="top" colspan="2"><div class="qf_header_hdr">Your Contact
Address</div></td>
</tr>
<tr>
<td align="right" valign="top"><label for="">Address Line 1</label></td>
<input size="50" name="address[line1]" type="text"
value="" /></td>
</tr>
<tr>
value="" /></td>
</tr>
<tr>
value="" /></td>
</tr>
16
HTML TUTORIALS
BY KABA DANIEL
<tr>
<td align="right" valign="top"><label for="">City</label></td>
<input size="20" name="address[city]" type="text"
value="" /></td>
</tr>
<tr>
for="">State</label></td>
<select name="address[state]">
<option value="169" selected="selected">ACT</option>
<option value="162">National</option>
<option value="163">NSW</option>
<option value="168">NT</option>
<option value="171">Other</option>
<option value="167">QLD</option>
<option value="166">SA</option>
<option value="165">TAS</option>
<option value="164">VIC</option>
<option value="170">WA</option>
</select></td>
</tr>
<tr>
for="">Postcode</label></td>
<input size="8" name="address[pcode]" type="text"
value="" /></td>
</tr>
<tr>
for="">Country</label></td>
<select name="address[country]">
<option value="215" selected="selected">Australia</option>
<option value="223">Afghanistan</option>
<option value="224">Albania</option>
<option value="225">Algeria</option>
<option value="226">Andorra</option>
<option value="227">Angola</option>
<option value="228">Antigua And Barbuda</option>
<option value="229">Argentina</option>
<option value="230">Armenia</option>
<option value="232">Austria</option>
<option value="233">Azerbaijan</option>
<option value="234">Bahamas</option>
<option value="235">Bahrain</option>
<option value="236">Bangladesh</option>
<option value="237">Barbados</option>
17
HTML TUTORIALS
BY KABA DANIEL
<option value="238">Belarus</option>
<option value="239">Belgium</option>
<option value="240">Belize</option>
<option value="241">Benin</option>
<option value="242">Bhutan</option>
<option value="243">Bolivia</option>
<option value="244">Bosnia And Herzegovina</option>
<option value="245">Botswana</option>
<option value="246">Brazil</option>
<option value="247">Brunei</option>
<option value="248">Bulgaria</option>
<option value="249">Burkina Faso</option>
<option value="250">Burma/Myanmar</option>
<option value="251">Burundi</option>
<option value="252">Cambodia</option>
<option value="253">Cameroon</option>
<option value="254">Canada</option>
<option value="255">Cape Verde</option>
<option value="256">Central African Republic</option>
<option value="257">Chad</option>
<option value="258">Chile</option>
<option value="259">China</option>
<option value="260">Colombia</option>
<option value="261">Comoros</option>
<option value="262">Congo</option>
<option value="263">Congo Democratic Republic Of</option>
<option value="264">Costa Rica</option>
<option value="265">Cote D'ivoire</option>
<option value="266">Croatia</option>
<option value="267">Cuba</option>
<option value="268">Cyprus</option>
<option value="269">Czech Republic</option>
<option value="270">Denmark</option>
<option value="271">Djibouti</option>
<option value="272">Dominica</option>
<option value="273">Dominican Republic</option>
<option value="274">East Timor</option>
<option value="275">Ecuador</option>
<option value="276">Egypt</option>
<option value="277">El Salvador</option>
<option value="278">Equatorial Guinea</option>
<option value="279">Eritrea</option>
<option value="280">Estonia</option>
<option value="281">Ethiopia</option>
<option value="282">Fiji</option>
<option value="283">Finland</option>
18
HTML TUTORIALS
BY KABA DANIEL
<option value="284">France</option>
<option value="285">Gabon</option>
<option value="286">Gambia</option>
<option value="287">Georgia</option>
<option value="288">Germany</option>
<option value="289">Ghana</option>
<option value="290">Greece</option>
<option value="291">Grenada</option>
<option value="292">Guatemala</option>
<option value="293">Guinea</option>
<option value="294">Guinea-Bissau</option>
<option value="295">Guyana</option>
<option value="296">Haiti</option>
<option value="416">Holland</option>
<option value="297">Honduras</option>
<option value="298">Hungary</option>
<option value="299">Iceland</option>
<option value="300">India</option>
<option value="301">Indonesia</option>
<option value="302">Iran</option>
<option value="303">Iraq</option>
<option value="304">Ireland</option>
<option value="305">Israel</option>
<option value="306">Italy</option>
<option value="307">Jamaica</option>
<option value="308">Japan</option>
<option value="309">Jordan</option>
<option value="310">Kazakstan</option>
<option value="311">Kenya</option>
<option value="312">Kiribati</option>
<option value="313">Korea North</option>
<option value="314">Korea South</option>
<option value="315">Kuwait</option>
<option value="316">Kyrgyzstan</option>
<option value="317">Laos</option>
<option value="318">Latvia</option>
<option value="319">Lebanon</option>
<option value="320">Lesotho</option>
<option value="321">Liberia</option>
<option value="322">Libya</option>
<option value="323">Liechtenstein</option>
<option value="324">Lithuania</option>
<option value="325">Luxembourg</option>
<option value="326">Macedonia</option>
<option value="327">Madagascar</option>
<option value="328">Malawi</option>
19
HTML TUTORIALS
BY KABA DANIEL
<option value="329">Malaysia</option>
<option value="330">Maldives</option>
<option value="331">Mali</option>
<option value="332">Malta</option>
<option value="333">Marshall Islands</option>
<option value="334">Mauritania</option>
<option value="335">Mauritius</option>
<option value="336">Mexico</option>
<option value="337">Micronesia</option>
<option value="338">Moldova</option>
<option value="339">Monaco</option>
<option value="340">Mongolia</option>
<option value="341">Morocco</option>
<option value="342">Mozambique</option>
<option value="343">Namibia</option>
<option value="344">Nauru</option>
<option value="345">Nepal</option>
<option value="346">Netherlands</option>
<option value="216">New Zealand</option>
<option value="348">Nicaragua</option>
<option value="349">Niger</option>
<option value="350">Nigeria</option>
<option value="351">Norway</option>
<option value="352">Oman</option>
<option value="353">Pakistan</option>
<option value="354">Palau</option>
<option value="355">Panama</option>
<option value="356">Papua New Guinea</option>
<option value="357">Paraguay</option>
<option value="358">Peru</option>
<option value="359">Philippines</option>
<option value="360">Poland</option>
<option value="361">Portugal</option>
<option value="362">Qatar</option>
<option value="363">Romania</option>
<option value="364">Russian Federation East</option>
<option value="365">Russian Federation West</option>
<option value="366">Rwanda</option>
<option value="367">Saint Kitts And Nevis</option>
<option value="368">Saint Lucia</option>
<option value="369">Saint Vincent And The Grenadines</option>
<option value="370">Samoa</option>
<option value="371">San Marino</option>
<option value="372">Sao Tome And Principe</option>
<option value="373">Saudi Arabia</option>
<option value="417">Scotland</option>
20
HTML TUTORIALS
BY KABA DANIEL
<option value="374">Senegal</option>
<option value="375">Seychelles</option>
<option value="376">Sierra Leone</option>
<option value="377">Singapore</option>
<option value="378">Slovakia</option>
<option value="379">Slovenia</option>
<option value="380">Solomon Islands</option>
<option value="381">Somalia</option>
<option value="382">South Africa</option>
<option value="383">Spain</option>
<option value="384">Sri Lanka</option>
<option value="385">Sudan</option>
<option value="386">Suriname</option>
<option value="387">Swaziland</option>
<option value="388">Sweden</option>
<option value="389">Switzerland</option>
<option value="390">Syria</option>
<option value="391">Taiwan</option>
<option value="392">Tajikistan</option>
<option value="393">Tanzania</option>
<option value="394">Thailand</option>
<option value="395">Togo</option>
<option value="396">Tonga</option>
<option value="397">Trinidad And Tobago</option>
<option value="398">Tunisia</option>
<option value="399">Turkey</option>
<option value="400">Turkmenistan</option>
<option value="401">Tuvalu</option>
<option value="402">Uganda</option>
<option value="403">Ukraine</option>
<option value="404">United Arab Emirates</option>
<option value="405">United Kingdom</option>
<option value="406">United States</option>
<option value="407">Uruguay</option>
<option value="408">Uzbekistan</option>
<option value="409">Vanuatu</option>
<option value="410">Vatican City</option>
<option value="411">Venezuela</option>
<option value="412">Vietnam</option>
<option value="413">Yemen</option>
<option value="414">Yugoslavia</option>
</select></td>
</tr>
<tr>
<td align="right" valign="top"><label for=""></label></td>
21
HTML TUTORIALS
BY KABA DANIEL

<input class="nonPrintable qf_button" name="submit"
value="Submit" type="submit" /></td>
</tr>
<tr>
<td></td>
<td align="left" valign="top"><span class="qf_small qf_required">*</span><span class="qf_small">
denotes required field</span></td>
</tr><input name="qf_form_id" type="hidden" value="qf_user_rego" />
</table>
</form>
</html>
CREATING HTML TABLES
Tables mark up data that should be organized in a table. Tables present data in an organized manner in web
browsers.
Advantages
Easy to read data in a web page.
Tables break up a plain web page an interesting visual feature.
Limitations
Its time consuming to create a table.
Complex tables generate errors
Some browsers dont generate errors.
Badly constructed tables may not present information to the audience.
Table tags
<table>
Starts table creation in web pages.
Table attributes
Align=
Specifies horizontal alignment of the table e.g.
<table align=center>
<table align=left>
<table align=right>
Width=
Specifies the width of table in a table e.g
<table width=50%>
<table width=200%>
Border=
Eshtablishes the outer boundary on a table e.g.
<table border=5>
Cellspacing=
Eshtablishes more space in between each cell in atable. E.g.
<table cellspacing=6>
22
HTML TUTORIALS
BY KABA DANIEL
Cellpadding=
Determines space within each cell in a table. e.g.
<table cellpadding=4>
CAPTION ELEMENT
Caption is used to create data at the top of a table or below the table in web page. E.g
<caption align=top>DIT END TERM EXAM RESULTS</caption>
<caption align=bottom>DIT END TERM EXAM RESULTS</caption>
INSERTING ROWS INTO A TABLE
Rows in a table show the records in tables. We use <TR> tag to start row creation in a table. Each use of a
<TR> begins a new row in tables. E.g
<Table>
<TR>
CREATING CELLS IN A TABLE
Cells are used to hold data in a table. We use <TD> and <TH> to create cells in a table.
<TH> is used to create table column headings cells where heading can be entered. The <TD> is used to create
cells where data is entered.
ALIGNING CONTENTS OF TABLE CELLS
Align attribute is used to align data cells. E.g
<TD align=center>
<TH align=center>
ALIGNING DATA IN ROWS
We also use align attribute to align data in rows. E.g.
<TR align=center>
VERTICAL ALIGNING OF TEXT IN A CELL DATA
We use VALIGN attribute to align data in cells vertically. E.g.
<TR valign=top>
<TD valign=bottom>
<TH valign=middle>
INSERTING COLORS TO A TABLE
We use BGCOLOR attribute to insert colors to the table, table rows, table columns, table data in a web page.
E.g
<Table bgcolor=red>
<TR bgcolor=yellow>
<TD bgcolor=green>
<TH bgcolor=blue>
SPANNING CELLS IN TABLES
23
HTML TUTORIALS
BY KABA DANIEL
Spanning refers to merging cells in a table to form on single cell. We use ROWSPAN and COLSPAN attributes
to merge cells in a table.
COLSPAN attribute is used to merge two or more columns in a table. while ROWSPAN attribute is use to
combine two or more rows in a table. e.g.
<TD colspan=2>
<TH colspan=3>
<TD rowspan=2>
<TH rowspan=3>
CELL WIDTHS AND HEIGHTS
We use WIDTH and HEIGHT attributes to change table width and height.
<table height=4>
<table width=6>
Example 1
<html>
<head>
<title>The HTML tables</title>
</head>
<body>
<table border=3 align=center width=50% heght=50%>
<caption>Nation media Monday schedule</caption>
<tr>
<th rowspan=3>CHANNEL</th>
<th colspan=4>TIME</th>
<tr>
<th colspan=2>6 A.M</th>
<th colspan=2>7 A.M</th>
<tr>
<th>SHOW</th>
<th>DESCRIPTION</th>
<th>SHOW</th>
<th>DESCRIPTION</th>
<tr>
<td>3
<td>NTV ASUBUHI
<td>MORNING GLORY
<td>NTV CARRIBEAN MUSIC
<td>CARTOON NETWORKS
<tr>
<td>NTV AT ONE
<td>BOSTON LEGAL
<td>DOCTORS CHAMBERS
<td>NTV AT 4
24
HTML TUTORIALS
BY KABA DANIEL
</table>
</body>
</html>
CREATING HTML FRAMES

Frames are used to present multiple documents within the main web browser.
Advantages
Web designers can present multiple documents in one web browsers.
Limitations
Not all web browsers support frames.
Not easy to decide the size of a frame.
User interface can cause problems when browsers display framed pages.
Not easy to link a set of framed pages.
Frames dont print entire frameset.
Its difficulty to view the source of framed page.
FRAME TAGS
<FRAMESET>
We use the <FRAMESET> tag to create frames in web page which consists of one or more frame
elements. The frameset tags are used to define the characteristics of the frames.
<Noframes>
The noframes tags are used to define what a browser that is not frames-enabled will see. Because the
frameset tags are ignored by a non-frames browser, anything within the noframes tags will be
considered a normal HTML page. So, after the <noframes> tag should be placed the <body> tag, and
then any content and tags, then concluded with the </body> tag, followed by the </noframes> tag. The
noframes content will not be seen by someone using a frames-enabled browser unless they choose view
source.
FRAMES ATTRIBUTES
Rows=
Used to set height of a frame.
Cols=
Used to set the length of a frame.
Src=
Used to show the source of the document we want to display in a frame.
CREATING VERTICAL FRAMES (DEFINING COLUMNS IN FRAMES)
25
HTML TUTORIALS
BY KABA DANIEL
We use cols attribute to create columns. Each column width is a value separated by commas. The column width
may be absolute or relative width. Absolute width uses percentage in its code while a relative width uses normal
numbers to create width in frames.
Syntax
<frameset cols="SIZE_OF_COLUMN_1,SIZE_OF_COLUMN_2,ETC">.
e.g.
<frameset cols=50%,50%>
<frameset cols=3*,6*>
Example 1
<html>
<head>
<title>frames</title>
</head>
<frameset cols="50%,50%">
<frameset>
<frame src="test.html" name="indexbar">
</frameset>
<frameset>
<frame src="main.html" name="main">
</frameset>
</frameset>
<noframes>
</noframes>
</html>
The SIZE_OF_COLUMN can be one of three numbers:
x% - each column is set by a percent of the available browser window. (x is a number from 1 to 100)
x - each column is set by a fixed pixel amount. (not recommended, because pixel widths vary depending
on the viewer's resolution) (x is any number)
* - the * tells the browser to use all available space that is left for this column.
CREATING HORIZONTAL FRAMES (DEFINING ROWS )

We use ROW attribute to create horizontal frames. You specify the height of frames using either absolute values
(percentage) or relative values (numbers) e.g.
Syntax
<frameset rows="SIZE_OF_ROW_1,SIZE_OF_ROW_2,ETC">.
e.g.
<frameset rows=34%, 66%>
CREATING ROWS AND COLUMNS
26
HTML TUTORIALS
BY KABA DANIEL
We us the frameset to specify both rows and columns in frames. The rows and columns attributes are used to
specify the columns and rows.
<frameset cols=50%,50% rows=50%, 50%>
Example1
<html>
<head>
<title>complex frames</title>
</head>
<frameset cols="33%,33%,33%">
<frameset rows="*,100">
<frame src="page1.html" NAME="index">
<frame src="page2.html" NORESIZE>
</frameset>
<frameset>
<frame src="main.html" NAME="main">
</frameset>
<frameset rows="50%,50%">
<frame src="page3.html">
<frame src="page4.html" SCROLLING="no">
</frameset>
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
FRAME BORDERCOLOR
The bordercolor attribute is used to specify color for the frame.
<frameset bordercolor=red>
INSERTING DOCUMENTS INTO THE FRAMES
The <FRAME> tag is used to insert contents into a single frame. The SRC attribute is also used to specify the
URL of the document inside a frame. The contents of the frame must be located in a separate file.
<frame src=tables.html>
ADDING BORDERS TO A FRAME
We use the frameborder attribute to determine if there will be a separator border between the frame one frame
and another frame.
<frame border=2>
FRAME HEIGHT AND WIDTH
27
HTML TUTORIALS
BY KABA DANIEL
We use marginheight attribute to determine the number of pixels between frames contents top and bottom
edges. Marginwidth attribute determines the number of pixels between frames content the left and right edges
<frame src=form.html marginheight=100 Marginwidth=200>
PREVENTING FRAME SIZE
When you point a frame you can drag the frame border to reduce or enlarge it. You can prevent surfers from
resizing frames using NORESIZE attribute.
<frame=form.html noresize
REMOVING SCROLLBARS
Usually frames scroll as you move the document in frames. You can force the frames not scroll as you browse.
<frame src=notes.html scrolling=Yes>
<frame src=notes.html scrolling=No>
<frame src=notes.html scrolling=Auto>
Example 1
<html>
<head>
<title>coomplex frames</title>
</head>


<frameset rows="85%,15%">

<frameset cols="15%,85%">


<frame src="indexbar.html" name="indexbar">

<frame src="home.html" name="mainframe">
</frameset>


<frame src="form.html" name="form">
</frameset>

<noframes>
</noframes>
</html>
28
HTML TUTORIALS
BY KABA DANIEL
Creating HTML Hyperlinks

A link is a connection between web pages in a website. It links various pages to enable end users access
information on World Wide Web.
Functions of links
Enables users to jump from one page to another.
Links different web pages in one site
Links to another web page or web site in the world wide web
Links tags
<A>
Establishes links in HTML
HTML attributes
Href=
Refers to a particular address.
Types of Hyperlinks
Links to web pages
Links to URL
Links to E-mails
Links to Images
Links to sound files
Links to video clips
a)
Links within a page

These are links set between texts in an HTML web page. E.g
<A Href=chapter1.html >chapter one</A>
A Href=bottom >click here to go the bottom of this page</A>
b)
Links to another page in a web site

A web page usually has various pages put together. The pages are connected together using hyperlinks.
E.g.
<A Href=form.html>Admission form</A>
<A Href=timetable.html>timetable</A>
29
HTML TUTORIALS
BY KABA DANIEL
c)
links to Uniform resource locator(URL)

these are links to a page in another web site in the World Wide Web.
e.g.
<A Href=http://www.google.co.ke>Google</A>
<A Href=http://www.examcouncil.orgo.ke>Exam council</A>
Absolute URLs
These are those addresses that are fully specified. They are complete address in a web site.
e.g.
<A Href=http://www.examcouncil.orgo.ke>Exam council</A>
Relative URLs
They drop the common part of the URL and lets the web browser to automatically figure out the missing
part.
<A Href=examcounci>Exam council</A>
d)
Links to E-mails
We use MAILTO attribute to set the link to an E-mails. E.g.
<A Href=mailto:job@yahoo.com>JOB OMINO</A>

Placing subject on E-mails
<A Href=mailto:salesmanager@kapaoil.com? Subject product information>Please send more product
information</A>
Placing message in the body of E-mail
<A Href=mailto:salesmanager@kapaoil.com? body=dont forget to send financial statements to us as soon as
they are ready>click here when </A>
e)
Links to sound files

Limitations of sound files
Sound files are large and load slowly
30
HTML TUTORIALS
BY KABA DANIEL
Computer need sound cards and speakers

Visitors may not welcome loud sound from their computers
Sound files formats

MIDI (musical instrument digital interface)
File format that contains synthesized music.
AIFF (Audio interchange file format)
Contains recorded sound sample which can be music or sound effect.
AU Basic Audio
Provide acceptable but not great music effect.
WAV (wave)
Provides quality good sample music sound but used in windows.
MP3(multimedia protocol version 3)
Provides outstanding nearly CD quality sound.
Multimedia tags and attributes
<embed>
Places an embedded object into a document.
<Bgsound>
Embeds sound file within a page.
Align=
Positions the embedded object relative to the surrounding environment.
Height=
Specifies vertical dimensions of the object.
Hidden=
Specifies whether the embedded sound control box is visible in the web page.
Name=
Gives the object a name by which other objects can refer to.
Src=
Indicates the relative or absolute locations of the file contaning the object.
Width=
Indicates the horizontal dimensions of the embedded object.
Autostart=
Indicates the sound file opens when the web is accessed
<A Href=music.mp3>click here to listen to blues</A>
f)
Links to video clips
Video clips formats
AVI (Audio video interleave)

Window based format
31
HTML TUTORIALS
BY KABA DANIEL
MPEG(motion pictures expert group)

Most widely supported standard and universal choice.
Quicktime
For windows and Macintosh operating system. Provides quality good visual pictures.
e.g.
<a Href=videoclips.mpeg>click here to watch my blues videos</A>
g)
Links to images
Image file formats
GIF (graphical interchange format)

Common type of image file format. Used in all types of images such as icons, computer
generated images, cartoons.
JPEG (joint photographic expert group)

Designed for photographs and other images withouit big patches of solid colors.
PNG(portable networks graphics)

Cannot be animated.
Inserting images in a web page

Image tags and attributes
<img>
Used to include images to a web page.
Alt=
Displays text instead of images.
Src=
Shows the location of the image file to be inserted.
<a> <img src=picture1.jpeg alt=picture> Kennedy</img><a/>
Aligning images
We use align attribute to align the images in a web page.
<img align=top>
<img align=bottom>
32
HTML TUTORIALS
BY KABA DANIEL
Reasons why browsers cannot displays images

1. The browser is text only.
2. The browser is programmed to read aloud the alternate text instead of images.
3. The designer decides to use the text instead of images.
4. Internet explorer and other browsers displays alternate text as the images is loading.
Using Meta Tags in HTML

Improving Search Engine Results
When a search engine finds your page, it will need to index it (that is, add it to its searchable database) with
some information off the page. Many search engines support the <META> tags which allows you to give
keywords and a description to your page. This gives you more control over how your web page will show up
during a search and will often cause more traffic to your page. The <META> tag can be used for a few different
purposes. Usually, you should place the <META> tag within the <head> tags at the beginning of your
document. To improve search engine results, we will use two specific attributes within the meta tag.
<Meta name="description" content="description of page goes here">
<Meta name="keywords" content="keywords go here">
When a user searches a search engine that supports meta tags and they query a phrase (search for a keyword)
related to your page, your page may show up in the list of results. Your page will be listed by its title and then,
underneath its title, will be the sixty or so words of the description you placed in the meta tag. It is
recommended that you keep the description content to no more than 60 words. Although the keywords content
is not seen by the user when searched, it is recommended to keep this less than 50 words because if you have
more the search engine will either ignore the rest or delete you from the index. Spaces are not needed to
separate keywords.
Example 1
<html>
<head>
<title>Little Joe's Sound Page< /title>
<meta name="description" content="Joe's Collection of Cool Sound files for you to use in your home page">
<meta name="keywords" content="music sounds midi wav joe collection">
</head>
<body>
<!--Page Goes Here
</body>
</html>
33
HTML TUTORIALS
BY KABA DANIEL
Meta
tags
are
not
visible
in
the
web
page
unless
the
user
selects
to
view
source.
Auto-Refreshing
Automatic refreshing is supported by many versions of Netscape Navigator and Microsoft Internet Explorer.
This also uses a modified form of the <META> tag. Auto refreshing means that once one page loads, you can
set a certain number of seconds and then the browser will load another page automatically. The basic structure is
as
follows:
<meta http-equiv=REFRESH
CONTENT=x_seconds;url="http://www.yourhost.co.za/pagetosendto.html">
The URL is the page you want it to refresh to, CONTENT is the number of seconds you want it to wait before
refreshing, and http-equiv=REFRESH just tells it that this is the refresh meta tag.
<meta http-equiv=REFRESH CONTENT=5;URL="http://www.xyz.com/">
34
HTML TUTORIALS
BY KABA DANIEL

HTML Tutorials

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Tutorials

Enviado por

Direitos autorais:

Formatos disponíveis

INTRODUCTION TO WEB DESIGN USING HTML

The term HTML stands for:

HTML coding tools

HTML conversion programs

Works in word-processing and windows operating system and in wordprocessing in Macintosh.

Assignments that MUST be done by all class members.

Essentials tags of HTML web pages

Creating paragraphs in HTML

<tr class="qf_static_row"><td class="qf_static" colspan="2"><div id="username_err"

<td valign="top" align="left">

<input size="50" name="surname" type="text" value=""

<td valign="top" align="left">

CREATING HTML FRAMES

CREATING VERTICAL FRAMES (DEFINING COLUMNS IN FRAMES)

CREATING HORIZONTAL FRAMES (DEFINING ROWS )

Creating HTML Hyperlinks

Links within a page

Links to another page in a web site

links to Uniform resource locator(URL)

<A Href=mailto:job@yahoo.com>JOB OMINO</A>

Links to sound files

Computer need sound cards and speakers

Sound files formats

Links to video clips

Video clips formats

AVI (Audio video interleave)

MPEG(motion pictures expert group)

GIF (graphical interchange format)

JPEG (joint photographic expert group)

PNG(portable networks graphics)

Inserting images in a web page

Reasons why browsers cannot displays images

Using Meta Tags in HTML

Você também pode gostar