Understanding Image Embedding and Linking in HTML

Learn how to embed images in HTML using the tag with essential attributes like src, alt, title, and size specifications. Additionally, explore how to create hyperlinks using the tag and anchor attributes. Discover the basics of HTML tables for displaying data in a tabular format. Improve your understanding of web technologies with practical examples and guidelines for effective image management.

• HTML Basics
• Image Tag
• Hyperlinks
• Web Technology

rili Follow

Uploaded on Sep 28, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

1. Web Technology Mr. G. P. Shinde

2. Image in HTML The image tag & source attribute The HTML <img> tag is used to embed an image in a web page. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The <img> tag has two required attributes: src - Specifies the path to the image alt - Specifies an alternate text for the image The src Attribute The required src attribute specifies the path (URL) to the image. Ex. <img src="img_logo.jpg">

3. Image in HTML The Title Attribute The required Title attribute provides an alternate text for an image. The value of the Title attribute should describe the image Ex. <img src="img_logo.jpg" title= logo of cocsit"> Image Size - Width and Height Ex. <img src="animal.png" height="180" width="300" title="animal image"> Common Image Format PNG - Portable Network Graphics. Extension is .png JPEG - Joint Photographic Expert Group image. Extension is .jpeg GIF - Graphics Interchange Format. Extension is .gif

4. Image in HTML Use <img> tag as a link We can also link an image with other page or we can use an image as a link. To do this, put <img> tag inside the <a> tag. How to get image from another directory/folder? To insert an image in your web, that image must be present in your same folder where you have put the HTML file. But if in some case image is available in some other directory then you can access the image like this Ex. <img src="E:/images/animal.png" height="180" width="300" title="animal image">

5. Creating Hyperlink with Anchor Tag Anchor tags The HTML anchor tag defines a hyperlink that links one page to another page. Attribute of Anchor Tag 1. href - The href attribute is used to define the address of the file to be linked. Syntax: <a href = "..........."> Link Text </a> Ex.- <a href="second.html">Click for Second Page</a> 2. target - If we want to open that link to another page then we can use target attribute of <a> tag. If we will not use target attribute then link will open in same page. Syntax: <a href = "........... target= _blank > Link Text </a> Ex.- <a href="second.html target= _blank >Click for Second Page</a>

6. HTML Table HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements. <table> within it. -This tag is used to create the table that wrap the rows and columns <caption> -This tag specify a caption for the table element. <tr> -Stands for "table row" and is used to create a row within the table. <th> row. -Represents "table header" and is used to create header cells within a <td> row. -Represents "table data" and is used to create standard cells within a

7. Define HTML Table <table border="1"> <tr> <th>Product</th> <th>Category</th> <th>Price</th> </tr> <tr> <td>Laptop</td> <td>Electronics</td> <td>$800</td> </tr>

8. Styling HTML Table <style> table { width: 100%;border-collapse: collapse; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>

9. Table Background Color & Image We can use CSS to set the background color or image or we can use the HTML attributes for the same HTML bgcolorAttribute: We can set background color for whole table or just for one cell. Ex <table border="1" bordercolor="green" bgcolor="yellow"> HTML background Attribute: We can set background image by using the HTML background attribute. Ex <table border="1" bordercolor="green" background="/images/test.png">

10. HTML Table HTML Table with Border You can use border attribute of table tag in HTML to specify border. Ex. <table border="1"> HTML Table with colspan If you want to make a cell span more than one column, you can use the colspan attribute. It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute. Ex. <th colspan="2">Mobile No.</th>

11. HTML Table HTML Table with rowspan If you want to make a cell span more than one row, you can use the rowspan attribute. It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values. Ex <th rowspan="2">Mobile No.</th>

12. Thank You