Scribd
Upload
4 views

3 Lab 19 HTML list links and tables

The document provides an overview of HTML elements related to lists, hyperlinks, and tables. It explains the use of ordered and unordered lists, the creation of hyperlinks with absolute and relative URLs, and how to open links in new windows. Additionally, it covers the structure of HTML tables and the use of the ID attribute for linking to specific parts of a webpage.

Uploaded by

yahyakhan.superiorpeshawar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

3 Lab 19 HTML list links and tables

The document provides an overview of HTML elements related to lists, hyperlinks, and tables. It explains the use of ordered and unordered lists, the creation of hyperlinks with absolute and relative URLs, and how to open links in new windows. Additionally, it covers the structure of HTML tables and the use of the ID attribute for linking to specific parts of a webpage.

Uploaded by

yahyakhan.superiorpeshawar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Applications of Information &

Communication Technology

Mr. Ali Hassan


Institute Of Management Sciences
Ordered and Unordered Lists
• Unordered List (<ul>):
▫ Used for items where order doesn’t matter (bulleted list).
▫ <h2>Unordered List Example</h2>
▫ <ul>
▫ <li>Apple</li>
▫ <li>Banana</li>
▫ <li>Cherry</li>
▫ </ul>
• Nested List
Ordered and Unordered Lists
• Ordered List (<ol>):
• Used for items where order matters (numbered list).
• <h2>Ordered List Example</h2>
• <ol>
• <li>First Step</li>
• <li>Second Step</li>
• <li>Third Step</li>
• </ol>
Hyperlinks
• You can create hyperlinks using the <a> tag with the
href attribute.
▫ <p>
▫ Visit
▫ <a href="https://www.example.com" >
▫ Example.com
▫ </a>
▫ for more information.
▫ </p>
Absolute and Relative URLs in Links
• Absolute URL
• Contains the domain Name.
• Helps in linking to other sites

• Relative URL:
• If all of the files in your site are in one folder, you simply
use the file name for that page.
• Relative URL helps you in linking the pages of your website
within its pages.
Email Links
• You can define an email link to receive or gather
information on a particular email from your webpage.

• <a href = mailto:[email protected]> Click here to


send us Email </a>
Opening Links in New Window
• You can open the link in a new window by using an
attribute

• <a href="https://instagram.com/" target="_blank">My


profile</a>

• <a href="https://facebook.com/" target="_self">My


profile</a>

• Self is used to open the link in the same window


Linking to Specific Part of the Webpage
• If you want to jump into different sections of the
webpage.

• For that we Use ID Attribute


• In order to access that ID we use (#) as value of the
anchor tag.

• <a href = “#(ID Name)”> hyperlink text </a>


HTML Table
• HTML tables are used to display tabular data.
▫ <table>: Defines the table.
▫ <tr>: Defines a row.
▫ <th>: Defines a header cell (bold and centered by default).
▫ <td>: Defines a standard cell.
▫ <caption>: Adds a title to the table.
• colspan="3": Merges three columns into one.
• rowspan="2": Merges two rows into one.
Summary
• To create hyperlinks in HTML, we use anchor tags. <a> </a>
• The text between the opening <a> tag and the closing </a> tag is
called the Link Text.
• There are two basic choices when it comes to the selection of
URLs.
• - Absolute URL - Usually used to navigate to another website.
• - Relative URL - Usually used to navigate within the same website.
• Anchor elements always carry an attribute called href (Hypertext
Reference). The value of the href attribute is the URL that you
want people to go to when they click on the link text (The value of
the href attribute becomes the link).
Summary
• Either Relative or Absolute URLs may be used inside the
href attribute.
• - When linking to a different website, the value of the
href attribute will be the full
• web address for the website (including the domain
name). This is the Absolute URL.
• - When you're linking to other pages within the same
site, you can use Relative URLs. Relative URLs are like a
short-hand version of Absolute URLs because there's NO
NEED to specify the domain name.
Summary Cont..
• - Relative URLs help when building a site on your
computer because you can create links between pages
without having to setup your domain name or hosting.
• • To open a link in a new browser window or tab, you can
use the target attribute in the opening <a> tag. The
value of the target attribute should be "_blank".
• - The default value of the target attribute is "_self", which
means the link will be opened in the current window or
tab.

You might also like