HTML Ordered Lists, Description Lists, and Nested Lists PDF

Ordered lists: Ordered lists, in contrast to unordered lists, maintain a distinct order or sequence and are visually represented with numbers, letters, roman numerals, or alternative symbols. The construction of ordered lists in HTML involves employing the \` \` tag to define the list, while each i...

Ordered lists: Ordered lists, in contrast to unordered lists, maintain a distinct order or sequence and are visually represented with numbers, letters, roman numerals, or alternative symbols. The construction of ordered lists in HTML involves employing the \` \` tag to define the list, while each individual item within the list is designated by the \` 1. \` tag. For example: 1. First step 2. Second step 3. Third step This code will produce the following output: 1. First step 2. Second step 3. Third step Description lists: Description lists in HTML are structured using the \`\` (description list) tag. Each term in the list is defined using the \` \` (definition term) tag, and its corresponding description is provided using the \` \` (description) tag. This HTML structure is particularly useful for creating lists that define or explain terms, concepts, or processes. The \`\`, \` \`, and \` \` tags contribute to clear and organized content presentation on web pages. For example: HTML A markup language that is used to create web pages CSS A style sheet language that is used to style web pages JavaScript A scripting language that is used to add interactivity and functionality to web pages 21 22 This code will produce the following output: HTML : A markup language that is used to create web pages CSS : A style sheet language that is used to style web pages JavaScript : A scripting language that is used to add interactivity and functionality to web pages. HTML NESTED LIST WHAT IS A NESTED LIST: A nested list is a list that contains another list as one of its items. A nested list can be useful for creating outlines, hierarchies, menus, or other structures that require. There are two types of lists in HTML: ordered and unordered. Ordered lists use numbers or letters to indicate the order of the items, while unordered lists use bullets or other symbols. To create a nested list, it needs to use the two types of HTML elements: and 1.. The element stands for unordered list, which means the items are not numbered or ordered. The - element stands for list item, which represents a single item in a list. - Animals - Mammals - Dog - Cat - Elephant - Birds - Eagle - Parrot - Penguin - Fish - Shark - Salmon - Goldfish 23 - Plants - Flowers - Rose - Lily - Sunflower - Fruits - Apple - Banana - Orange What are the rules for creating a nested list: When building a nested list, there are a few guidelines that must be adhere to.: A nested list must be inside a - element of the parent list. A nested list must have the same type as the parent list. For example, we cannot nest an ordered list ( ) inside an unordered list ( ). A nested list can have any number of levels, but it is recommended to keep it simple and clear for readability and accessibility. A nested list can have any content inside its elements, such as text, images, links, or other HTML elements. Benefits of using a nested list: A nested list can have several benefits, such as: It can help organize and structure the information in a logical and hierarchical way. It can make the content easier to read and understand for the users and the browsers. It can improve the SEO (search engine optimization) of the web page by providing keywords and headings for the search engines to index. It can enhance the accessibility and usability of the web page by providing navigation and landmarks for the screen readers and keyboard users. WHAT IS HYPERLINK: A hyperlink, often known as a link, is a way of connecting two web sites or resources on the internet. A hyperlink allows the user to navigate to a new place by clicking on a word, phrase, image, or other element. A hyperlink can also launch an application or open a new browser window or tab. Hyperlink are created using the HTML element, also known as the anchor element. The element has an attribute called href, which stands for hypertext reference and the href attribute specifies the URL (uniform resource locator) of the destination page or resource. The content inside the element is the link text, which is the part that will be visible and clickable to the user for example [Visit Google](https://www.google.com) and by default, hyperlinks have the following appearance in most browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red Sometimes, the user may want to open the linked page or resource in a different browser window or tab, instead of the current one. This can be useful for external links, pop-up windows, or web applications. To change the target of a hyperlink, the user need to use the word target attribute of the element. The target attribute can have one of the following values: self -- Default: Opens the linked page in the same window or tab as the current one. blank - Opens the linked page in a new window or tab. parent - Opens the linked page in the parent frame of the current one. top - Opens the linked page in the top-level frame of the current one. For example, the following HTML code creates a hyperlink that opens the MDN Web Docs website in a new window or tab: [Visit MDN Web Docs](https://developer.mozilla.org). Aside from linking to online sites or resources, several forms of hyperlinks may be created such as: 24 Image links - To utilize a picture as a link, the user just inserts the**Error! Filename not specified.** element inside the element. For example: [alt=\"MDN Web Docs Logo\"\>](https://developer.mozilla.org). [Send imuhammedkolawole\@gmail.com](mailto:[email protected]). email to Telephone links - To create a link that opens the user's phone app and lets the user dial a number, its uses the tel: protocol in the href attribute, followed by the phone number. For example: [Call 08038458590](tel:08038458590) Download links - To create a link that prompts the user to download a file, it use the download attribute of the element, and optionally specify a new file name. For example: [Download resume](resume.pdf). rel - Specifies the relationship between the current page and the destination page or resource. It can be one or more of the following values: alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, noopener, prev, search, or tag. What is an Absolute and Relative Hyperlinks: An absolute hyperlink is a hyperlink that contains the full address of the destination file or of the web site. E.g Visit Kwasu this hyperlink contains the full address of the destination web site, including the protocol (https://) and the domain name (www.kwasu.com.ng). It will open the Kwasu home page in the same window or tab as the current document. The link text is "Visit Kwasu", which is the part that will be visible and clickable to the user. Absolute hyperlinks are useful when linking to a web page or file that is outside your domain. Relative hyperlinks, on the other hand, a relative hyperlink is a hyperlink that contains an address that is relative to the address of the destination file. The address of the destination file is also known 25 as the hyperlink base. For example, a document has the following hyperlink base: C:\\\\Documents and Settings\\\\ Username \\\\My Documents. A document that is named "Sales.doc" is located at the following file path: C:\\\\Documents and Settings\\\\ Username \\\\My Documents\\\\April\\\\Sales.doc. The relative hyperlink to this document contains only the relative address to Sales.doc. Therefore, the relative hyperlink contains the following address: April\\\\Sales.doc. What is the difference between absolute and relative hyperlinks: The main differences between absolute and relative hyperlinks are: Absolute hyperlinks contain the full address of the destination file or web site, such as https://www.bing.com. While Relative hyperlinks contain an address that is relative to the current file or web site, such as images/logo.png. Absolute hyperlinks are useful for linking to external resources or web pages that are outside your own domain or web site. While Relative hyperlinks are useful for linking to internal resources or web pages that are within your own domain or web site. Absolute hyperlinks make your web site or file independent and easy to update, but they can be hard to maintain and debug while Relative hyperlinks make your web site or file portable and easy to move or copy, but they can cause duplicate content or broken links. What is an Image HTML: The HTML image **Error! Filename not specified.**tag serves the purpose of embedding an image into a web page rather than being physically inserted, images are linked to web pages and the **Error! Filename not specified.**tag creates a space to hold the referenced image. The **Error! Filename not specified.**tag is void of content and solely contains attributes; it does not require a closing tag. Two essential attributes of the **Error! Filename not specified.**tag are src, which specifies the image\'s file path, and alt, which provides alternative text for the image. Image attributes refer to the properties that alter the appearance and behavior of an image element in HTML. These attributes are specified within the **Error! Filename not specified.**tag, which is utilized for embedding images in web pages. Common image attributes include: 26 src - A source image in HTML refers to an image that is referenced by the src attribute of the **Error! Filename not specified.**tag. This particular tag is utilized to embed an image within a web page. The source image can be indicated through a URL, a relative path, or a data URL. Additionally, the **Error! Filename not specified.**tag necessitates the inclusion of an alt attribute, which serves to provide alternative text for the image in the event that it cannot be displayed. For example: html Alt: In HTML, the representation of an alternative image is accomplished by utilizing the \"alt\" attribute situated within the \"img\" (image) element. The \"alt\" attribute functions to supply alternative text that is exhibited in the event that the image is unable to be loaded or in the circumstances where the user utilizes a screen reader. Additionally, it serves as a descriptive element for the image, thereby enhancing accessibility and furnishing users who may lack visual capability with substantial content. For example,. width and height - The dimensions of an image in HTML are determined by the width and height attributes, which indicate the size of the image in pixels. The width attribute governs the horizontal dimension, while the height attribute governs the vertical dimension. For instance, the HTML code renders an image with a width of 500 pixels and a height of 600 pixels. It is advisable to always designate both the width and height attributes for images. This aids the browser in reserving the appropriate space for the image and prevents any alteration of the page layout during the loading process. Nevertheless, should the width and height attributes remain unspecified, the browser will utilize the natural size of the image, which corresponds to the actual size of the image file. style - The image style in HTML pertains to a methodology employed to modify the visual and interactive characteristics of an image element by leveraging CSS. This can be accomplished through the utilization of the style attribute or by employing a style sheet to apply diverse CSS properties, 27 such as width, height, border, filter, among others. To illustrate, a rounded image can be generated by utilizing the border-radius property. For instance,. Title - An HTML image title is a technique used to incorporate a tooltip containing text into an image element. This tooltip is a small pop-up box that appears when the mouse pointer hovers over the image. Its purpose is to provide additional information or context about the image. There are two common methods of including an HTML image title in HTML: utilizing the title attribute within the **Error! Filename not specified.**tag. The value assigned to this attribute can be any string. For example:. Utilizing a element for the purpose of structuring a photograph within a document, and employing a element to define a descriptive caption for said photograph. The caption shall be positioned beneath the image, while simultaneously being displayed as a tooltip when the cursor hovers over the image. As an illustration: This is a picture of a cat. id and class - Specify the identifier and the class name of the image, which can be used for styling or scripting purposes. For example, assigns the id "smiley1" and the class "smiley" to the image, which can be referenced by CSS selectors or JavaScript functions. loading - The loading attribute plays a crucial role in determining the loading behavior of an image within a web page. It offers two distinct options: \"eager\" and \"lazy\". By default, the \"eager\" value is assigned, which signifies that the image should be loaded promptly. Conversely, the \"lazy\" value instructs the browser to defer the image loading until it is near the user\'s viewport. To illustrate, 28 consider the following code snippet:. This particular example demonstrates the utilization of the \"lazy\" value, delaying the image loading until the user has scrolled down the page to view it. This approach can significantly optimize the performance and overall user experience of the web page. srcset and sizes - The element contains a srcset attribute that specifies the URL of the image file, and a media attribute that specifies the media condition. The browser will select the first element that matches the current media condition, and utilize the corresponding image file for the **Error! Filename not specified.**element. In the event that none of the elements match, the browser will employ the default image file specified by the src attribute of the **Error! Filename not specified.**element. For instance, provides three image files with different formats: WebP, JPEG, and PNG. The browser will employ the WebP image if it is compatible, otherwise it will utilize the JPEG image. If neither of them is supported by the browser, the PNG image will be used. This can enhance the compatibility and efficiency of the webpage across various browsers and devices. picture and source - In HTML, the element serves the purpose of presenting various iterations of an image based on factors such as the browser, screen size, or device pixel ratio. Within the element, the element is employed to indicate one or multiple image sources along with their corresponding descriptors. Conversely, the **Error! Filename not specified.**element functions as a fallback image in case none of the sources prove to be suitable. An illustrative instance of utilizing the and elements to showcase a high-density and standard-resolution image is presented below. 29 What is an illustrative image in Html: An illustrative image serves the purpose of enhancing the visual appeal or conveying meaning within a web page. This is achieved by embedding it into the HTML document through the **Error! Filename not specified.**element, which necessitates the inclusion of two attributes: src and alt. The src attribute denotes the URL of the image, while the alt attribute offers alternative text to describe the image in situations where it cannot be viewed or accessed by certain users. To illustrate, consider the following example:. Illustrative images can take various forms and may include photographs, diagrams, charts, infographics, icons, and other visual elements. They play a crucial role in making web content more engaging and understandable for users. Examples of illustrative images in HTML might include: Photographs: Adding real-world images to illustrate concepts or provide visual examples. , Diagrams and Charts: Using graphical representations to explain data or processes, etc. What is a background Image in Html: In HTML, a background image refers to an image that is set as the background of an HTML element or the entire web page. This image is used to enhance the visual appeal of the webpage by providing a backdrop or atmosphere. Background images are commonly applied to elements such as the body of the HTML document, a section, a div, or any other container element. To set a background image in HTML, the CSS (Cascading Style Sheets) background-image property is used. Here is a basic example: