Scribd
Upload
61 views

HTML Tutorials

Uploaded by

dnlkaba
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
61 views

HTML Tutorials

Uploaded by

dnlkaba
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 29

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. http://www.git.ac.ke hTtp://www.safaricom.com URL format Protocol://domainname/path/filename Components of a protocol 1. Protocol

HTML TUTORIALS BY KABA DANIEL

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 1. 2. 3. 4. of code tools Hotdogs Notepad Page spinner Arachnid

HTML conversion programs Used to covert existing electronic file into HTML codes 1. Ant HTML 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

HTML TUTORIALS BY KABA DANIEL

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> 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>

HTML TUTORIALS BY KABA DANIEL

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> <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 A link = Sets color for Vlink = Sets color for Link = Sets color for 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.

all text in a document. the active links. the links the user has visited. the unvisited links.

HTML TUTORIALS BY KABA DANIEL

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> <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> <H2> <H3> <H4> <H5> <H6> Chapter Chapter Chapter Chapter Chapter Chapter one </H1> two </H2> three </H3> four</H4> five</H5> 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>

HTML TUTORIALS BY KABA DANIEL

<H2> Skill two</H2> <H3>The Common HTML tags</H3> <H3> The Basic structure</H3> </body> </HTML> 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> Unordered list

HTML TUTORIALS BY KABA DANIEL

<HTML> <HEAD> <TITLE>HTML lists</TITLE> </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 <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.

HTML TUTORIALS BY KABA DANIEL

Example1 <HTML> <HEAD> <TITLE>HTML lists</TITLE> </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 <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 TUTORIALS BY KABA DANIEL

</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. 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.

HTML TUTORIALS BY KABA DANIEL

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

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

************************** 10 HTML TUTORIALS BY KABA DANIEL

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> 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=

11

HTML TUTORIALS BY KABA DANIEL

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. 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> <td valign="top" align="left"> <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> <td valign="top" align="left"> <input size="50" name="username" type="text" value="" /></td> </tr> <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>

12

HTML TUTORIALS BY KABA DANIEL

<td align="right" valign="top"><span class="qf_required">*</span><label for="">Password</label></td> <td valign="top" align="left"> <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> <td valign="top" align="left"> <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> <td valign="top" align="left"> <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> <td valign="top" align="left"> <input size="50" name="first_name" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><span class="qf_required">*</span><label for="">Surname</label></td> <td valign="top" align="left"> <input size="50" name="surname" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Organisation</label></td> <td valign="top" align="left"> <input size="50" name="organisation" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Position</label></td> <td valign="top" align="left"> <input size="50" name="position" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Phone</label></td> <td valign="top" align="left"> <input size="50" name="phone" type="text" value=""/></td> </tr> <tr>

13

HTML TUTORIALS BY KABA DANIEL

<td align="right" valign="top"><label for="">Fax</label></td> <td valign="top" align="left"> <input size="50" name="fax" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Mobile</label></td> <td valign="top" align="left"> <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> <td valign="top" align="left"> <input size="50" name="address[line1]" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Address Line 2</label></td> <td valign="top" align="left"> <input size="50" name="address[line2]" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">Address Line 3</label></td> <td valign="top" align="left"> <input size="50" name="address[line3]" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><label for="">City</label></td> <td valign="top" align="left"> <input size="20" name="address[city]" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><span class="qf_required">*</span><label for="">State</label></td> <td valign="top" align="left"> <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> <td align="right" valign="top"><span class="qf_required">*</span><label for="">Postcode</label></td> <td valign="top" align="left"> <input size="8" name="address[pcode]" type="text" value="" /></td> </tr> <tr> <td align="right" valign="top"><span class="qf_required">*</span><label for="">Country</label></td> <td valign="top" align="left"> <select name="address[country]"> <option value="215" selected="selected">Australia</option> <option value="223">Afghanistan</option>

14

HTML TUTORIALS BY KABA DANIEL

<option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option

value="224">Albania</option> value="225">Algeria</option> value="226">Andorra</option> value="227">Angola</option> value="228">Antigua And Barbuda</option> value="229">Argentina</option> value="230">Armenia</option> value="232">Austria</option> value="233">Azerbaijan</option> value="234">Bahamas</option> value="235">Bahrain</option> value="236">Bangladesh</option> value="237">Barbados</option> value="238">Belarus</option> value="239">Belgium</option> value="240">Belize</option> value="241">Benin</option> value="242">Bhutan</option> value="243">Bolivia</option> value="244">Bosnia And Herzegovina</option> value="245">Botswana</option> value="246">Brazil</option> value="247">Brunei</option> value="248">Bulgaria</option> value="249">Burkina Faso</option> value="250">Burma/Myanmar</option> value="251">Burundi</option> value="252">Cambodia</option> value="253">Cameroon</option> value="254">Canada</option> value="255">Cape Verde</option> value="256">Central African Republic</option> value="257">Chad</option> value="258">Chile</option> value="259">China</option> value="260">Colombia</option> value="261">Comoros</option> value="262">Congo</option> value="263">Congo Democratic Republic Of</option> value="264">Costa Rica</option> value="265">Cote D'ivoire</option> value="266">Croatia</option> value="267">Cuba</option> value="268">Cyprus</option> value="269">Czech Republic</option> value="270">Denmark</option> value="271">Djibouti</option> value="272">Dominica</option> value="273">Dominican Republic</option> value="274">East Timor</option> value="275">Ecuador</option> value="276">Egypt</option> value="277">El Salvador</option>

15

HTML TUTORIALS BY KABA DANIEL

<option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option

value="278">Equatorial Guinea</option> value="279">Eritrea</option> value="280">Estonia</option> value="281">Ethiopia</option> value="282">Fiji</option> value="283">Finland</option> value="284">France</option> value="285">Gabon</option> value="286">Gambia</option> value="287">Georgia</option> value="288">Germany</option> value="289">Ghana</option> value="290">Greece</option> value="291">Grenada</option> value="292">Guatemala</option> value="293">Guinea</option> value="294">Guinea-Bissau</option> value="295">Guyana</option> value="296">Haiti</option> value="416">Holland</option> value="297">Honduras</option> value="298">Hungary</option> value="299">Iceland</option> value="300">India</option> value="301">Indonesia</option> value="302">Iran</option> value="303">Iraq</option> value="304">Ireland</option> value="305">Israel</option> value="306">Italy</option> value="307">Jamaica</option> value="308">Japan</option> value="309">Jordan</option> value="310">Kazakstan</option> value="311">Kenya</option> value="312">Kiribati</option> value="313">Korea North</option> value="314">Korea South</option> value="315">Kuwait</option> value="316">Kyrgyzstan</option> value="317">Laos</option> value="318">Latvia</option> value="319">Lebanon</option> value="320">Lesotho</option> value="321">Liberia</option> value="322">Libya</option> value="323">Liechtenstein</option> value="324">Lithuania</option> value="325">Luxembourg</option> value="326">Macedonia</option> value="327">Madagascar</option> value="328">Malawi</option> value="329">Malaysia</option>

16

HTML TUTORIALS BY KABA DANIEL

<option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option

value="330">Maldives</option> value="331">Mali</option> value="332">Malta</option> value="333">Marshall Islands</option> value="334">Mauritania</option> value="335">Mauritius</option> value="336">Mexico</option> value="337">Micronesia</option> value="338">Moldova</option> value="339">Monaco</option> value="340">Mongolia</option> value="341">Morocco</option> value="342">Mozambique</option> value="343">Namibia</option> value="344">Nauru</option> value="345">Nepal</option> value="346">Netherlands</option> value="216">New Zealand</option> value="348">Nicaragua</option> value="349">Niger</option> value="350">Nigeria</option> value="351">Norway</option> value="352">Oman</option> value="353">Pakistan</option> value="354">Palau</option> value="355">Panama</option> value="356">Papua New Guinea</option> value="357">Paraguay</option> value="358">Peru</option> value="359">Philippines</option> value="360">Poland</option> value="361">Portugal</option> value="362">Qatar</option> value="363">Romania</option> value="364">Russian Federation East</option> value="365">Russian Federation West</option> value="366">Rwanda</option> value="367">Saint Kitts And Nevis</option> value="368">Saint Lucia</option> value="369">Saint Vincent And The Grenadines</option> value="370">Samoa</option> value="371">San Marino</option> value="372">Sao Tome And Principe</option> value="373">Saudi Arabia</option> value="417">Scotland</option> value="374">Senegal</option> value="375">Seychelles</option> value="376">Sierra Leone</option> value="377">Singapore</option> value="378">Slovakia</option> value="379">Slovenia</option> value="380">Solomon Islands</option> value="381">Somalia</option>

17

HTML TUTORIALS BY KABA DANIEL

<option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option </select></td> </tr> <tr>

value="382">South Africa</option> value="383">Spain</option> value="384">Sri Lanka</option> value="385">Sudan</option> value="386">Suriname</option> value="387">Swaziland</option> value="388">Sweden</option> value="389">Switzerland</option> value="390">Syria</option> value="391">Taiwan</option> value="392">Tajikistan</option> value="393">Tanzania</option> value="394">Thailand</option> value="395">Togo</option> value="396">Tonga</option> value="397">Trinidad And Tobago</option> value="398">Tunisia</option> value="399">Turkey</option> value="400">Turkmenistan</option> value="401">Tuvalu</option> value="402">Uganda</option> value="403">Ukraine</option> value="404">United Arab Emirates</option> value="405">United Kingdom</option> value="406">United States</option> value="407">Uruguay</option> value="408">Uzbekistan</option> value="409">Vanuatu</option> value="410">Vatican City</option> value="411">Venezuela</option> value="412">Vietnam</option> value="413">Yemen</option> value="414">Yugoslavia</option>

<td align="right" valign="top"><label for=""></label></td> <td valign="top" align="left"> <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

18

HTML TUTORIALS BY KABA DANIEL

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> 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>

19

HTML TUTORIALS BY KABA DANIEL

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 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>

20

HTML TUTORIALS BY KABA DANIEL

<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 </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.

21

HTML TUTORIALS BY KABA DANIEL

CREATING VERTICAL FRAMES (DEFINING COLUMNS IN FRAMES) 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 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%>

22

HTML TUTORIALS BY KABA DANIEL

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 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

23

HTML TUTORIALS BY KABA DANIEL

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> <!-- The page will have one row with two columns, one row with one column --> <!-- The first frameset defines the rows: two rows, the second one is narrower --> <frameset rows="85%,15%"> <!-- The second frameset defines the columns in the first row --> <frameset cols="15%,85%"> <!-- Specify the two files to display in the first row --> <!-- The first file will contain an index for your home pages --> <frame src="indexbar.html" name="indexbar"> <!-- The second file is home.html: the file you have been working on so far --> <frame src="home.html" name="mainframe"> </frameset> <!-- Specify the file to display in the second row --> <!-- This file contains copyright information --> <frame src="form.html" name="form"> </frameset> <!-- Define what to display to browsers which aren't frames-capable --> <noframes> </noframes> </html>

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

24

HTML TUTORIALS BY KABA DANIEL

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> 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.

25

HTML TUTORIALS BY KABA DANIEL

<A Href=mailto:[email protected]>JOB OMINO</A> Placing subject on E-mails <A Href=mailto:[email protected]? Subject product information>Please send more product information</A> Placing message in the body of E-mail <A Href=mailto:[email protected]? 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 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

26

HTML TUTORIALS BY KABA DANIEL

<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 MPEG(motion pictures expert group) Most widely supported standard and universal choice.

e.g.

Quicktime For windows and Macintosh operating system. Provides quality good visual pictures.

<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>

27

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>

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:

28

HTML TUTORIALS BY KABA DANIEL

<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/">

29

HTML TUTORIALS BY KABA DANIEL

You might also like