HTML Links PDF

HTML Links HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked. HTML Hyperlinks A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create h...

HTML Links HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked. HTML Hyperlinks A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create hyperlinks using text or images available on a webpage. A hyperlink is created using the HTML Anchor Tag (). The Anchor () Tag An anchor tag, or tag, is a basic element that creates hyperlinks between two pages. Anything which is written between the opening and the closing tags become clickable and when someone clicks on it, the linked page will be opened. Syntax Here is the syntax to create a hyperlinks in HTML: Link Text Creating Hyperlinks (Linking Webpages/Documents): It can link other webpages or documents by creating the hyperlinking to specific words, images, or any HTML element. As discussed above, it can create hyperlinks by using the HTML tag with the href attribute. The href attribute specifies the page/document to be linked. Syntax Link Text Example In this example, we are creating a simple HTML document that demonstrates how to use a hyperlink: Hyperlink Example Click following link Kwasu Portal On executing the above example, a link will be displayed. You can click on the link generated to reach to the home page of Kwasu Portal. The "target" Attribute: The target attribute specifies the location where linked document is opened. Following are the possible values of target attribute: Example Try following example to understand basic difference in few options given for target attribute. This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute. Use of Base Path in Hyperlinks When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL. Example Following example makes use of tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link: Hyperlink Example Click following link HTML Tutorial This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial. Linking to a Page Section: Linking to a section on the same page allows users to navigate directly to that section. It can create a link in the same to a specific section by using the href attribute with a #id value, where the #id targets an element on the page with a corresponding id attribute. Example The following code example demonstrates the application of the href attribute for intra-page navigation. By specifying the identifier of a section (using #id) within the href attribute, users can efficiently navigate to the targeted sections within the same webpage:  div { height: 900px; } Ed-Tech Tutorialspoint: Simply Easy Learning Know More Section 2 Tutorials Point is an online learning platform providing free tutorials, paid premium courses, and eBooks. Learn the latest technologies and programming languages SQL, MySQL, Python, C, C++, Java, Python, PHP, Machine Learning, data science, AI, Prompt Engineering and more. Styling Hyperlinks (Setting Link Color) You can set colors of your links, active links and visited links using link, alink and vlink attributes of tag. Example Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work. Hyperlink Example  Click following link HTML Tutorial This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited. Downloadable Links HTML allows you to create downloadable links where you can create links to make your PDF, DOC, or ZIP files downloadable. To create any link downloadable, you can use the download attribute with the tag and specify the downloadable file path in the href attribute. Example The following example demonstrates creating a downloadable link in HTML: Downloadable Link Example Download File HTML - Image Links: Images can also be used as links in HTML, which means by clicking the images we can navigate to other web pages or resources. HTML image links are very useful in creating websites like photo galleries, portfolios, online stores, and so on. In this article, we will learn how to use images to create hyperlinks. It is similar to the HTML - Text Link. Creating Image Links To create an HTML image link, we need an tag and an anchor element. The image element is used to display the image on the web page, and the anchor element is used to specify the destination URL of the link. Here, the href attribute of element contains the destination link and src attribute of tag contains the path of image. Syntax Here, the href attribute of the element contains the destination link, and the src attribute of the tag contains the path of the image. Examples of HTML Image Links Here are some example codes that explain the usage of image links in HTML Create Hyperlink for an Image Image Link with Tooltip Mouse-Sensitive Images o Server-Side Image Maps o Client-Side Image Maps Create Hyperlink for an Image The following example uses an image as a hyperlink. The image will be rendered when the supplied code is run, and clicking on it will take the user to Tutorials Point's homepage. Example Image Hyperlink Example Image Link with Tooltip: You can also define a tooltip for an image link; when someone moves the mouse over the linked image, it will display a tooltip. To set the tooltip, you can set the title attribute of the tag. Example The following example demonstrates a tooltip to an image link: Image Hyperlink Example  In the above example, hovering over the logo will display the tooltip " Go to TutorialsPoint". Email Links (mailto): HTML email links allow users to click on a link and automatically open their default email client with a new message composed to the specified email address. This is done using the mailto: protocol in the href attribute of an (anchor) tag. You can also predefine the subject and body of the email using the mailto: protocol. This is done by appending ?subject= and &body= to the email address. Spaces and special characters in the subject and body should be URL-encoded. For example, spaces are encoded as %20. Syntax The following HTML code creates a clickable email link that opens the user's default email client to send an email to the specified address: [email protected] Examples HTML Email Links Following are some examples that illustrate usage of HTML Email link: Create Email link using href The following HTML code illustrates how to create an email link using the href attribute of the tag. Creating an HTML Email Link  Click to Send Mail HTML tables represent data, such as text, images, etc. in a structured format with rows and columns. HTML tables offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development. Why HTML Tables are Used? HTML tables are used for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include −  Structuring Data − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.  Comparative Presentation − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.  Tabular Data Representation − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables. Creating an HTML Table: You can create a table in HTML by using the tag along with several tags that define the structure and content inside the table. The primary tags that are used with the tag are , , and. Creating tables in HTML involves several elements that define the structure and content. The primary tags used are , , , and.   HTML Tag: This tag is used to create the table that wrap the rows and columns within it.  HTML Tag: Stands for "table row" and is used to create a row within the table.  HTML Tag: Represents "table data" and is used to create standard cells within a row.  HTML Tag: Represents "table header" and is used to create header cells within a row.  HTML Table Structure - Rows and Columns Rows: Each row in an HTML table is defined using the `` tag. It contains a set of table cells (`` or ``), representing the individual elements within that row. Columns: The actual data or header information is contained within the table cells. Cells in the same position in different rows form a column. A table row is defined by the tag. To set table header, we use tag. To insert data in table cell, use the tag. A table in HTML consists of table cells inside rows and columns of the table. Table heading is defined by the.... Data inside the are the headings of the column of a table. Each table cell is defined by a... tag. Data inside the tag are the content of the table rows and columns. Each table row starts with a.... tag. We use style sheet to create border for the table. Example Consider a table representing a simple list of products with their respective categories and prices. This basic table structure organizes data in a clear, tabular format, making it easy to read and understand. Here, the border is an attribute of tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0". Product Category Price  Laptop Electronics $800 Bookshelf Furniture $150 Coffee Maker Appliances $50 Table Background Color and Image You can set the background color and background image of an HTML table by using the CSS and attributes of the tag. Using Attributes The following are the attributes that can be used with tag to set the background color and/or image: bgcolor: The bgcolor attribute sets the table's background color. background: The background attribute sets a background image. Table-related Tags Reference The following are the table-related tags. You can click on the link to read about the specific tag and click on "Try It" to practice its example: Table Headers and Captions Headers and captions are used inside tables to organize and present data in a structured format. The table heading is an essential part of a table, providing labels for columns. The (table header) element is used to define table headings. Captions are used in the tables to provide a title or explanation for the table. The element is placed immediately after the opening table tag. Syntax to Create Table's Header and Caption The following is the syntax to create a header and caption for an HTML table: Description of table heading 1 heading 2  heading 3 Define a Header Row for a Table The tag is used to represent table headings, and it is typically used within the (table row) element. Unlike the (table data) tag used for regular cells, is reserved for headers. In most cases, the first row of a table is designated as the header row. Example Consider a simple HTML table with headings for "Name" and "Salary": HTML Table Header Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 Styling Table Headings Styling table headings can enhance the visual appeal of a table. CSS can be applied to elements to customize their appearance. In the following example, a simple CSS style is added to the tag within the section to modify the background color and text alignment of the table headings. Example This example demonstrates how you can style table headings with CSS: Styled HTML Table Header th { background-color: #4CAF50; color: white; text-align: left; padding: 8px; } Name Salary Ramesh Raman 5000 Shabbir Hussein 7000 Using Header Cells in Any Row While it's common to use in the first row of a table, you can utilize it in any row based on your requirements. This flexibility allows for the creation of complex tables with multiple header rows or headers interspersed within the table. Example In this example, we are creating table headers in the first row: Styled HTML Table Header th { background-color: #4CAF50; color: white; text-align: left; padding: 8px; } Name Salary Ramesh Raman 5000 Additional Details Specialization Technical Lead Web Development Table Header Using Element The tag is used to group table header cells so that a combined CSS style can be applied to header cells. The tag is typically placed within the element and contains one or more elements, each of which, in turn, contains elements representing column headers. Example In this example, we are creating a table header using the thead tag: HTML Table Header Column 1 Column 2 Column 3 Defining Multiple Header Rows You can include multiple elements within to create multiple header rows. This is useful when your table structure requires a more complex hierarchy of headers. Example In this example, we are defining two rows as the table header:  HTML Table Header Tutorialspoint Role Experience Technical Lead 5 Years Web Developer 2 Years Using '' Inside '' The tag can be used within to group together a set of column and apply CSS styling or attributes to entire columns. Example In this example we apply style to first two columns of table by grouping those columns in colgroup tag..col1 { background-color: #f2f2f2;  } Table with colgroup Product ID Product Name Category Price 1 Smartphone Electronics $299.00 2 Office Chair Furniture $89.00 3 Laptop Electronics $999.00  Combining with '' and '' The tag is often combined with (table footer) and (table body) to create a comprehensive table structure. Example In the following code the structure of table separates header, body, and footer content for better organization. HTML Table Column 1 Column 2 Column 3 value 1 value 2 value 3 Total Footers are generally used to enter  sum of values of each column. Difference between and Following are the points that highlight the differences between and − The tag is a structural element used to group header content, while is a cell-level element defining a header cell. It's common to use within , but can also be used outside to define headers in regular rows. Including is optional; however, using it improves the semantic structure of the table. Adding Caption to a HTML Table The caption tag will serve as a title or explanation for the table, and it shows up at the top of the table. Example In the following code we will display a caption on top of a HTML table: HTML Table Caption This is the caption row 1, column 1 row 1, column 2 row 2, column 1 row 2, column 2 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. The three elements for separating the head, body, and foot of a table are − The tag to create a separate table header. The tag to indicate the main body of the table. The tag to create a separate table footer. A table may contain several elements to indicate different pages or groups of data. But it is notable that and tags should appear before Example In this example, we are creating an HTML table with the table header, body, and footer: HTML Table This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4  Cell 5 Cell 6 Cell 7 Cell 8 HTML Table Colgroup In HTML, the element is used to define a group of columns in a table. It allows you to apply properties to multiple columns simultaneously, providing a more efficient way to style or format columns. The Tag The is often used in conjunction with the element, where each tag represents an individual column within the group. This grouping enhances readability and simplifies the application of styles or attributes to specific columns in a table. Syntax Following is the syntax to use with tag: