Images in another folder:
LAB SESSION 2Object: To study html links, images and tables.Links in HTML (Hyperlinks):By clicking the links you will jump from one document to another.Anchor <a> tag is used to define the link.href attribute specifies the destination address () of the link.When linking to an external document, it is essential to provide http:// otherwise the link will not work.Syntax:<a href="url"> Content </a>Example:<a href="">Sir Syed University of Engineering & Technology Website </a>AttributeDescriptionHrefSpecifies the destination of a link.TitleAllows an advisory title that explains the resource in more detail.Target Attribute:AttributeDescription_blankOpens the linked document in a new window or tab_selfOpens the linked document in the same window/tab as it was clicked (this is default)_topOpens the linked document in the full body of the window_parentOpens the linked document in the parent frameSyntax:<a href="url" target="">Content</a>Images in HTML:We can insert any image in web page by <img> tag.The <img> tag is an empty tag and it has no closing tag.Syntax:<img?src="URL "?alt="name”>The SRC acts like a pointer. It shows the IMG tag where to find the image for display. If the image is located in a sub-directory (or sub-folder), the path MUST be stated in the reference field before the image name.?Any word in an SRC path that ends with a forward slash?/?is considered a sub-directory or sub-folder of the current directory where the HTML file is located. When the SRC gets to the end word (no forward slash after it), it knows this is a file to display.?Attributes with <img> tag:Following attributes can be used with <img> tag.AttributeDescriptionSrcThe only required attribute. It specifies the URL of the graphic file you want to display. As with any URL, the path must be relative to the HTML file.AltDisplays an alternate string of text instead of an image.TitleA string of text that provides information about the imageWidthSpecifies the width of image in pixels.HeightSpecifies the height of image in pixels.Types of Path:There are two types of link:Absolute Path?Absolute paths?always?include the complete path name of the file present in any sub-folder.For example: PathWhen a user clicks a relative link, the browser takes them to that location on the current site. For that reason, you can only use relative links when linking to pages or files within your site, and you must use absolute links if you're linking to a location on another website.images\images.jpgindex.html/graphics/image.png/help/articles/how-do-i-set-up-a-webpage.htmlSetting image with Alternative text:This attribute is used to describe the external description of an image.<img?src="URL"?alt="name">Setting image height and width:The?WIDTH?and?HEIGHT?properties can be adjusted to change the size of the image on the page, but it is NOT recommended. If the WIDTH and HEIGHT properties are not declared, the default will determine the correct settings and use them.?Here we can use attribute “style” if you want to set image width and height using style attribute.<img?src="URL"?alt="name"?style="width:128px;height:128px;">There is another way you can use individually width and height attributes.<img?src="URL"?alt="name"?width="128"?height="128">Images in another folder:If a jpg image named Web-Engeneering, placed in inside a folder named images in desktop.<img src="C:\Users\gulraiz\Desktop\images\Web-Engeneering.jpg" alt="Web-Engeneering">Or <img src="images\Web-Engeneering.jpg" alt="Web-Engeneering">Images in same folder as where HTML file exist: For example, if your image is called?Web-Engeneering.jpg, and it sat in the same directory as your HTML page, you could embed the image like so:Syntax:<img src="Web-Engeneering.jpg" alt="Web-Engeneering">Setting image as a Background:Images can be used for the “BACKGROUND” property. This setting is found?in?the <BODY> tag. For Example: If an image is placed inside an images folder.Syntax:<body background="images\images.jpg">Images placed in another server (computer): You could embed the image using its absolute URL, for example:<img src=”” >Images Format:The images format can be as:.gif.png.jpeg or jpg.bmpHTML Table:The?HTML?<table>?tag represents tabular data — that is, information expressed via a two-dimensional data table.Creating basic Tables:The basic structure of an HTML table consists of the following tags:Table tags:? <TABLE></TABLE>Row tags:?? <TR></TR>Cell tags:??? <TD></TD>Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>. Between these tags, you then construct each row and each cell in the row.To create a table: you would first start the row with the beginning row tag, <TR>and then build the row by creating each cell with the beginning cell tag, <TD>adding the data for that cell, and then closing the cell with the ending cell tag, </TD>. When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.HTML Table Tags:Table TagsDescription<table>Defines a table.<th>It gives heading to a table.<tr>It basically create a horizontal row for the table.<td>It feeds the data into the row for the cell.widthWidth of the TABLE in pixels or percentage.borderThickness of the TABLE borders in pixels.alignAlign table to left, right, center.Syntax:1069975109855<!DOCTYPE html><html><head><title>Table Basic Structure</title></head><body><table><tr><td>row1, cell1</td><td>row1, cell2 </td></tr><tr><td> row2, cell1</td><td> row2, cell2</td></tr></table></body></html>00<!DOCTYPE html><html><head><title>Table Basic Structure</title></head><body><table><tr><td>row1, cell1</td><td>row1, cell2 </td></tr><tr><td> row2, cell1</td><td> row2, cell2</td></tr></table></body></html>HTML table header:It will give headings that you want to give to your table.Syntax:<table><tr><th>heading1 </th><th>heading2</th></tr></table>HTML table border:It will give a specified border that you want to create a border across table.Syntax:<table border="1">Output after giving the border attribute is:To make the table which includes whether the table borders are collapsed into a single border.Syntax:4651375594360<style> table { border-collapse: collapse; }</style>Property used for table under style tag:To mSyntax:<style>table, th, td { border: 5px solid black; border-collapse: collapse;}</style>Width in HTML Table:It specifies how far across the TABLE is going to be. The number for this property can be specified as a number (in pixels) or a percentage of the screen width. If the WIDTH property is not specified, the TABLE automatically adjusts itself to be as long as the information contained within it.?Syntax:<table width="100%">Or<table width="100px">Or<table style="width:100%">Setting Border color, background color and background in HTML table:To set border color of table, its background color and its background use the following syntax:<table bordercolor = "black" bgcolor = "green" background="images/images.jpg">Alignment in HTML Table:Through this property we can adjust the text alignment of heading, and cell content and also it shifts the alignment of position of table depending upon the situation you are going to use.Shifting Table Position in HTML:By using this, we can easily shift table position either in left, right, center.Syntax:<table align="right">Text Alignment in HTML:By using this, we can easily align text of heading, content inside the cell.Syntax:th, td { text-align: center;}HTML table header, Body and Footer:Tables can be divided into three portions ? a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.<thead>?? to create a separate table header.<tbody>?? to indicate the main body of the table.<tfoot>?? to create a separate table footer.Syntax:<thead> <tr> <td colspan = "4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan = "4">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody>HTML table Cell padding and Cell spacing Attributes:The cell padding and cell spacing are used to adjust the white space in table cells.Cell spacing:Cell spacing is used to set space?between cells.?Cell padding:Represents the distance between cell borders and the content within a cell.Syntax:<table cellpadding="10px" cellspacing="10px">Or8915409525For Cell Padding:<style>th, td {padding: 25px;}</style>00For Cell Padding:<style>th, td {padding: 25px;}</style>33470855080For Cell Spacing:<style>table { border-spacing: 125px;}</style>00For Cell Spacing:<style>table { border-spacing: 125px;}</style> 4832352045335364490021221700Colspan & Rowspan in HTML Table:Colspan:If you want to merge two or more columns into a single column.Cells that Span Many Columns.Syntax:<table style="width:100%" border=2> <tr align=center> <th>Name</th> <th colspan="2">Cell #</th> </tr> <tr align=center> <td>Ms Ramsha Sohail</td> <td>0300*******</td> <td>0313*******</td> </tr></table>Rowspan:If you want to merge two or more rows into a single row. Make a cell span more than one rowSyntax: <table style="width:100%" border=1> <tr> <th>Name:</th> <td>Ms. Ramsha Sohail</td> </tr><tr> <th rowspan="2">Telephone:</th> <td>0300*******</td> </tr><tr> <td>0313*******</td> </tr></table>EXERCISENote: Every CODE & Output should contain your ROLL Number for copyright.Create some links to various search engines (google, yahoo).Display an image that has a border of size 2, a width of 200, and a height of 200.Create a page which displays following tableCreate a page which displays following table. ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- in another word
- in another word or in other words
- flashing geometric images in eyes
- embedding images in illustrator
- import module from another folder python
- delete all files in a folder python
- how to add images in html
- cid images in email
- another way to say in another words
- images in tkinter
- rename user folder open in another program
- floating images in eyes