Father Agnel School, Noida Class X Ch6 HTML Part 2

Size: px

Start display at page:

Download "Father Agnel School, Noida Class X Ch6 HTML Part 2"

Marjorie Mosley
7 years ago
Views:

1 HTML Images - The <img> Tag and the Src Attribute In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: <img src="url" > The URL points to the location where the image is stored Example 1 <head> <title> Display Image </title> </head> <p> <b>to insert the image of the plant</b></p> <img src= c:\html\plant.gif > HTML Images - The Alt Attribute The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: <img src="smiley.gif" alt="smiley face"> The alt attribute provides alternative information for an image if a 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). HTML Images - Set Height and Width of an Image The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: <img src="smiley.gif" alt="smiley face" width="32" height="32"> Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load). Example 2 Showing Image display with alignment. <h4>image with default alignment (align="bottom"):</h4> <p>this will show image alignment bottom <img src="finger-pointing.gif" align="bottom" width="32" height="32"> This text is in continuation.</p> Similarly we can give middle, top, left, right alignment values with the align attribute. HTML Part 2 Page 1

2 HTML Hyperlinks (Links) The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href (hyperlink reference) attribute, which indicates the link s destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red HTML Link Syntax The HTML code for a link is simple. It looks like this: <a href="url">link text</a> The href attribute specifies the destination of a link. Example 3 Showing External Linking <a href=" W3Schools.com!</a> Linking can be External or Internal : The External linking links two documents i.e. upon clicking a hyperlink a new document, to which the hyperlink is linked, gets opened. The above example shows external Linking. The Internal linking on the other hand links the various sections of same document. That is upon clicking a hyperlink; a different section of the same document becomes visible in the browser window. Example 4 Showing Internal Linking <head> <title> Showing Internal Linking </title></head> I'll set a mark called <a name="sample"> <b>sample</b> </a> on this line. A paragraph following <b> Internal Linking </b>. <p> The Internal linking on the other hand links the various sections of same document. <br> That is upon clicking a hyperlink; a different section of the same document becomes visible in the browser window.<br> </p> <br> Now a <a href="#sample"> Link to that mark <i> i.e. sample </i> </a> HTML Part 2 Page 2

3 Sending from a Browser Most browsers support the mailto function, which is a convenient way to allow other users to communicate with you via . It is simple to implement: however keep in mind that it will work for most but not necessarily all users. Thus it s a good idea to have the address available as readable text as well as part of the link itself. Example 5 Showing Mail to option <head> <title> Mail to link </title></head> Send your comments to <a href="mailto:pace_sa@hotmail.com? subject='sent from mailto example'" pace_sa@hotmail.com </a> HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. Example 6 Html Tables <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> <table> This tag begins of building a table <caption> This tag places caption over the table defines a row in the table <th> defines the header in the table <td> defines the table data HTML Tables and the Border Attribute If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute: HTML Part 2 Page 3

4 Example 7 Showing Table Border, border color, frames, rules attribute, align <head> <title> Html Border </title> </head> <table border="1" bordercolor="red" frame ="hsides" rules="all" align= center cellspacing="4" cellpadding="4"> <caption> HTML TABLES </caption> <th>header 1</th> <th>header 2</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> The above example will show the following output: HTML Part 2 Page 4

5 Border attribute specifies thickness of the border Bordercolor attribute specifies the color of the border Frames attribute allows you to state which portion of the attribute will render Values that can be specified with Frame attribute Above displays the top edge Below displays bottom edge only Border displays all four sides (default) Box displays all four sides (like border) Hsides displays top and bottom edges Lhs displays left edge only Rhs displays right edge only Void display no border Vsides displays left and right edges Rules attribute deals with the inside border edge Values that can be specified with Rules attribute All display all border Cols displays border between cells Groups displays border between all cell group None hides all interior border Rows display border between rows only Align attribute will give the alignment for the table Cellspacing gives the amount of space between cells Cellpadding gives the amount of space between the cell border and cell content HTML Tables and image as the Background We can set the image as the background with the table by background attribute: Example 8 Showing an image as the Background <head> <title> Html Border </title> </head> <table border="3" align=center background=school.jpg cellpadding=1 cellpadding=1 height=100 width=150 summary= Table example > <caption> HTML TABLES </caption> <th>header 1</th> <th>header 2</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> HTML Part 2 Page 5

6 The above example will show the following output: Height Width Bgcolor Summary To specify the height the table To specify the width of the cells of the table to give the background color Its output will be rendered as Table example in non- visual browser Some more attributes for,<th>and <td> Tag. All these attributes show same result with the given tags: Align Used for alignment Width for width Background for background image Bgcolor for background color Rowspan for row span Colspan for column span Valign for vertically align which can be top, middle, bottom Q1: Answer the following in short: a) Which tag is used to jump to new page? b) Which attribute of the image tag will help text to appear in the image place holder? c) For internal linking, the section names are provided by attribute of <A> tag. d) The tag that starts a table cell is. e) What tag is used to add columns to tables? f) Which tag is used to specify the beginning of table row? HTML Part 2 Page 6

7 Q2: State True or False: a) Center is valid value for the attribute align of img tag. b) Settings for <td> tag have higher priority than settings for rows tag. c) It is possible to link with the current page. d) Rowspan attribute with the Table tag is used to specify the width. e) Align and Valign are the attributes used with <td> tag to set the alignment of data in a Table. f) Border is an attribute for <A> tag. Q3: Name various types of alignment available for images. Q4: Which attribute of <a> facilitates external linking? Q5: Which attribute if <a> facilitates internal linking? 1. Write HTML code to insert a picture from the file elephant.jpg at very top of the web page. Make the word elephant appear whenever actual image couldn t be displayed. 2. Write a HTML code to make the tiger.jpg image appear on the right side of the page with the large heading Tigers of India on the left side of the page. 3. Suppose you have a large picture of a standing elephant named elephant.jpg. Now make a small named fly.jpg appear to the left of the elephant s head and mouse.jpg appear next to the elephant s right foot. 4. Write a HTML code to go to the page when you click on the text All about Me. 5. Write the code to produce the following table: 1) 2) A A B C B C D E F 3) 4) A B C D E F G H A B C D E F G H 5) A B C D E F G H HTML Part 2 Page 7

New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts

A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables