Page 1 (0s)
HTML TAGS. 22mss002 22mss020.
Page 2 (6s)
What is an HTML Tag?. HTML Tags are pre-defined elements in HTML, enclosed within these brackets < > signs. For example: <html>, <table>, etc. All HTML tags has a particular function associated with them. Each tag has a special function and a combination of various tags developes a website. For example, a <p> tag defines a paragraph in the website and a <table> tag displays a table. Syntax: <p> Content </p>.
Page 3 (26s)
Types of tags in HTML. There are two types of tags in HTML that are used by tHe Website Designer: Paired Tags (Opening and Closing Tags) Unpaired Tags (Singular Tag) 1. Paired Tags (Container Tags) These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag. The content goes between these two tags. Opening Tag: The opening tag starts with < and ends with >. For example, <p>. Closing Tag: The closing tag also starts with < but includes a forward slash / before the tag name, and ends with >. For example, </p>. Examples: Paragraphs: <p>This is a paragraph.</p> Headings: <h1>This is a heading.</h1>.
Page 4 (58s)
2. Unpaired Tags (Self-Closing Tags or Stand-Alone Tags) These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a single tag. Self-Closing Tag: A self-closing tag starts with < and ends with />. For example, <img /> or <br>. Note: Later if you happen to use react or a framework like Next.js, you will have to close the tag like this <br/> <hr/>. So it is better to cultivate the habit! Examples of self-closing tags: Line Break: <br/> Horizontal Rule: <hr/> Image: <img src="image.jpg" alt="An example image"/>.
Page 5 (1m 28s)
Pictorial Representation of Tags The image below offers a visual representation of how tags are structured in HTML. As you can see, an element can contain other elements, which may also contain additional elements, forming a tree-like structure. This hierarchy can include self-closing tags as well as nested tags, as illustrated in the picture.
Page 6 (1m 46s)
HTML BASIC TAGS. HTML BASIC TAGS. Skeletal Tags Let's discuss some basic HTML tags known as "skeletal tags". <html> Tag: "Root of an HTML Page" Syntax:.
Page 7 (2m 17s)
<title> Tag: "Title Part of an HTML Page" Syntax:.
Page 8 (2m 48s)
<h1> Tag: First-Level Heading The <h1> tag defines the first-level heading and is typically the largest and boldest among all the heading tags. It is often used for the main title of the page..
Page 9 (3m 29s)
<h5> Tag: Fifth-Level Heading The <h5> tag is used for fifth-level headings and is smaller than <h4> tags. These are rarely used but can be helpful for deeply nested sections..
Page 10 (4m 9s)
Paragraph Tag To create well-structured text in your HTML document, the <p> tag is essential for defining paragraphs. <p> Tag: Defining a Paragraph in HTML The <p> tag is used to format text into distinct paragraphs. Each paragraph element is separated by automatic empty line spaces above and below the content, providing a clear visual separation. The tag must be closed with its corresponding </p> tag..
Page 11 (4m 41s)
Line Break Tag To insert a line break in your HTML document, you can utilize the <br> tag. <br> tag is used to insert line breaks in text or paragraphs The syntax for the <br> tag looks like this:.
Page 12 (5m 13s)
Anchor Tag Links are fundamental to navigating the web. In HTML, links are created using the <a> tag, also known as the Anchor tag. Key Characteristics of HTML Links Specified by the <a> tag. Also known as hyperlinks. Used to link one document to another. Includes a closing tag </a>. Syntax of HTML Links.
Page 13 (5m 39s)
Target Attribute Values _blank: Opens the linked document in a new window or tab. _top: Opens document in the full body of the window. _self: Opens document in the same window or tab (default behavior). _parent: Opens the linked document in the parent frame. Linking to Specific Page Sections To link to a specific section of a webpage, you can: Use the name or id attribute of the target section. Use a hyperlink with a hash (#) followed by the target id or name..
Page 14 (6m 14s)
Image Tag Images play a crucial role in enhancing web pages by providing a visual context that complements textual content. In HTML, the <img> tag is used to embed images into web pages. Basic Syntax for Embedding Images This is how the syntax to embed an image in html looks like:.
Page 15 (6m 49s)
<img src="images/profile_picture.jpg" alt="Profile Picture" />.
Page 16 (7m 17s)
Key Features The <pre> tag maintains both spaces and line breaks, ensuring that text appears exactly as it was originally formatted. The <pre> tag has both an opening tag <pre> and a closing tag </pre>. Additional attributes can also be added for further customization. When to Use the <pre> Tag? The <pre> tag is most effective when you want the text to display on your HTML page exactly as it was typed, without any formatting changes. It is especially useful for displaying code snippets or preformatted text from data files.
Page 17 (7m 42s)
THANK YOU.