PowerPoint Presentation

CLASS- VIII SUBJECT: COMPUTER SCIENCE CHAPTER – 6 WORKING WITH HTML DATE: 26-10-21.

LEARNING OUTCOMES. To create text in proper format by using different tags and attributes discussed. To understand the types of lists and it’s attributes. To appreciate the use of images in designing webpage..

LISTS IN HTML. Sometimes, we are in hurry and do not like to read a lot of text. So, putting important information in the form of a list seems to be helpful. HTML supports several elements for making lists..

<UL>. <OL>. LISTS IN HTML. <DL>. Lists can be divided into different types :.

HTML UNORDERED LIST <UL> TAG.

You can use TYPE attribute for <UL> tag to specify the type of bullet you like. By default, it is a disc . Following are the possible options −.

<UL> TAG - TYPE ATTRIBUTE. OUTPUT. CODE. Unordered List Chocolate Cake Black Forest Cake Pineapple Cake o.

2. HTML ORDERED LIST <OL> TAG.

You can use TYPE attribute for <OL> TAG to specify the type of numbering you like. By default, it is a number . Following are the possible options −.

TYPE ATTRIBUTE OF <OL> TAG. OUTPUT. CODE. Example Following is an example where we used < ol type = "I">.

<OL> TAG - START ATTRIBUTE. You can use START attribute for <OL> TAG to specify the starting point of numbering you need. Following are the possible options −.

OUTPUT. CODE. Example: Following is an example where we used < ol type = " i " start = "4" >.

3. HTML DEFINITION/DESCRIPTION LIST <DL> TAG.

Definition List makes use of following three tags. <dl> − Defines the start of the list <dt> − Defines the Term <dd> − Defines the Description of the term </dl> − Defines the end of the list.

HTML DEFINITION LIST EXAMPLE:. OUTPUT. CODE. html> (head) Definition <dd>This stands for Hyper Text Markup Language</dd> <dd>This stands for Hyper Text Transfer </hdp 'html>.

HTML IMAGES <IMG> TAG.

HTML IMAGES Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This session will take you through simple steps to use images in your web pages..

The < img > tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag ..

EXAMPLE: To try following example, let's keep our HTML file and image file GLOBE.JPG in the same directory −.

Case-1 If you have saved “Globe.jpg” in “Documents” folder, then the address would be: < img src = “C:\My documents\My Pictures\Globe.jpg”>.

HTML IMAGE- SRC. Case2 If you have saved “Globe.jpg” in the same folder as the HTML document, then the address would be: < img src = “Globe.jpg”>.

HTML IMAGE- SRC. Case3 If “Globe.jpg” is not in your computer but is saved in folder ‘images’ of the Web server of yahoo, then the address would be < img src = “http://www.yahoo.com/images/globe.jpg ” >.

OTHER ATTRIBUTES OF <IMG> TAG. S.NO. Attribute Description 1 alt The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). 2 Height Defines the height of the image. 3 Width Defines the width of the image. 4 Border Defines the width of the border around the image 5 align Defines the alignment of the image in reference to surrounding elements. Values: left, right, top , bottom, middle 6 bordercolor Defines the Colour of border around the image.

ALT ATTRIBUTE OF <IMG> TAG. alt The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader)..

LIST TO INSERT AN IMAGE - WIDTH AS 2m PIXELS <IMG WIDTH = TO INSERT AN IMAGE - WIDTH AS <IMG WIDTH = 40.

Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means , no border around the picture..

HTML. Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the right,top,middle and bottom and center tag to make it in the center ..

RECAPITULATION. In <OL> and <UL> list, the style of bullet or number is defined by.

To start a list at the count of 3, which statement is correct?.

A thickness of _____ means, no border around the picture..

Image can be inserted in the web page by using _______tag..

The ____ attribute provides an alternate text for an image, if the user for some reason cannot view it ..

HOME ASSIGNMENT. Write the HTML code to design the below shown web page considering the specifications as given below:.