University of Bahrain College of Applied Studies

Transcription

1 University of Bahrain College of Applied Studies CSA 212: Human Interface and Design Activity 2 : Introduction to HTML Name Student ID No Section Instructor Demonstrator Date Total Marks : 10 Marks Distribution Table TOTAL (10) Prepared by Ms. Aji Mathew 1

2 Activity 1 : INTRODUCTION TO HTML EXERCISE 1 PART I. CREATE LISTS There are two types of lists: Unordered List: An unordered list is a list of items, the list items are marked with bullets (black circles). An unordered list starts with the <UL> tag. Each list item starts with the <LI> tag>. 1. Open a new NOTEPAD document. 2. Save it as Unordered List 3. Type the following code shown in the Box. Ordered List: The list items are marked with numbers. The ordered list starts with the <OL> tag. Each list item starts with the <LI> tag. <h4> An Unordered List:</h4> <UL> <LI>Saturday </LI> <LI> Sunday</LI> <LI>Monday</LI> <LI>Tuesday</LI> <LI>Wednesday</LI> <LI>Thursday</LI> <LI>Friday</LI> </UL> 1. Open a new NOTEPAD document. 2. Save it as Ordered List 3. Type the following code shown in the Box. <h4> An Ordered List:</h4> <OL> <LI>January </LI> <LI> February</LI> <LI>March</LI> <LI>April</LI> <LI>May</LI> <LI>June</LI> <LI>July</LI> </OL> Prepared by Ms. Aji Mathew 2

3 Definition List A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <DL> tag. Each definition list term starts with the <DT> tag. Each definition list definition starts with the <DD> tag. <h4> A Definition List:</h4> <DL> <DT><STRONG>Lower cost</strong></dt> <DD>The new version of this product costs significantly less than the previous one!</dd> <DT><STRONG>Easier to use</strong></dt> <DD>We've changed the product so that it's much easier to use!</dd> <DT><STRONG>Safe for kids</strong></dt> <DD>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee).</dd> </DL> 1. Open a new Notepad Document and save as LIST. 2 MARKS 2. Type the following exercise. The ingredients: The procedure: 100 g. flour 10 g. sugar 1 cup water 2 eggs salt, pepper 1. Mix dry ingredients thoroughly. 2. Pour in wet ingredients. 3. Mix for 10 minutes. 4. Bake for one hour at 300 degrees. Notes: The recipe may be improved by adding raisins Prepared by Ms. Aji Mathew 3

4 EXERCISE 2 PART II. CREATE TABLES Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <TABLE BORDER = 1 <TR> <TH>Heading</TH> <TH> Another Heading</TH> </TR> <TR> <TD> row 1, cell 1</TD> <TD> row 1, cell 2</TD> </TR> <TR> <TD> row 2, cell 1</TD> <TD> row 2, cell 2</TD> </TR> </TABLE> 1. Open a new Notepad document 2 MARKS 2. Type the following table 3. Save it as Table.html Products Weight Price Cabbage 124 pounds BD1.900 Carrot 2 kg, 50 grams BD Tomato 14 pounds BD2.000 Cucumber 1 kg, 200 grams BD4.000 Apples 240 pounds BD3.700 EXERCISE 3 PART III. ADDING ANCHOR TAG The next activity will show you how to use link to jump to another part of a document. The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page. Open a new document and save it as ANCHOR. Type the following code. Prepared by Ms. Aji Mathew 4

5 <p> <a href="#c4">see also Chapter 4.</a> </p> <h2>chapter 1</h2> <p>this chapter explains ABC</p> <h2>chapter 2</h2> <p>this chapter explains DEF</p> <h2>chapter 3</h2> <p>this chapter explains GHI</p> <h2><a name="c4">chapter 4</a></h2> <p>this chapter explains JKL</p> <h2>chapter 5</h2> <p>this chapter explains MNO</p> <h2>chapter 6</h2> <p>this chapter explains PQR</p> <h2>chapter 7</h2> <p>this chapter explains STU</p> <h2>chapter 8</h2> <p>this chapter explains VWXZ</p> EXERCISE 4 PART IV. CREATING AN LINK In this exercise, the link will work only if the Outlook is active and if you are connected to the Internet. 1. Open a new document and save it as Type the following exercise <HEAD> <TITLE> Creating an Link</TITLE> </HEAD> You can write to me at my < HREF= mailto:abc123@hotmail.com > address </A> Prepared by Ms. Aji Mathew 5

6 EXERCISE 5 PART V. MARQUEE <MARQUEE...> creates a scrolling display. It is usually used for catching the attention of the viewers. 1. Open a new NOTEPAD document. 2. Type the following code and save it as MARQUEE. <HEAD> <TITLE> MY Sweet Home Page!!</TITLE> </HEAD> <div align="center"><font color="#ffffff" size="+1"> <MARQUEE bgcolor="#000080"direction="right" loop="20" width="75%"> <STRONG>This is cool!</strong> </MARQUEE> </FONT> </DIV> Prepared by Ms. Aji Mathew 6

7 ASSIGNMENT 6 Marks 1. The title of the webpage should be Assignment 1: Prepared by : 2. create a marquee THIS IS MY FIRST ASSIGNMENT a. ALIGN = BOTTOM b. BACKGROUND COLOR = LAVENDER c. WIDTH = 850 d. HEIGHT = 30 e. DIRECTION = LEFT f. LOOP = 10 g. BOLD AND ITALIC 3. The heading of the page is INTERNET a. Underline b. Italic c. Align = center 4. The background color is black 5. The font color is orange 6. The link color is violet 7. Write the following paragraph: a. Comic Sans MS b. Size = 5 Internet is a worldwide collection of computers that connects millions of computers in millions of network in every country of the world. It brings together people from all over the world, opening them for improving communication and cooperation. 8. Create a Table 1 Web server 2 GTP 3 Gopher 4 Telnet 9. Create a List Meeting Agenda A. Budget a. Equipment B. Convention Plans a. Accomodation 10. For any comments, please me at: urname@urhost.com 11. Insert any picture after the marquee. Prepared by Ms. Aji Mathew 7