Basic Structure:
The basic structure of any HTML document is as follows:
<!DOCTYPE html>
<html>
<head></head>
<body>
Your code goes here
</body>
</html>
What is HTML?
HTML (Hypertext Markup Language) is used to create websites and web applications. It is the language of the World Wide Web and the standard text formatting language for displaying pages on the web. HTML enables more interactive and dynamic content.
1.1 HTML Document Structure:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Webpage</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>Learn HTML Programming</h1>
<p>This is a paragraph of text.</p>
<a href=”https://www.infinitybix.com”>INFINITYBIX</a>
</body>
</html>
1.2 Doctype Declaration:
Every HTML document must begin with a <!DOCTYPE> declaration. This declaration serves as a piece of information for the browser, indicating the expected document type, rather than functioning as an HTML ta
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
1.3 HTML Tags:
Tags are the foundation of an HTML document. An HTML element is structured as <tag>Content</tag>. Instead of ‘Content’, you can place other HTML elements.
1.4 Html Elements:
The Element is an individual comoponent of the html webpage or document element represents the title of the document. An element has the start tag, content and end tag.
Element = <tag>(start tag) + Content( Elements) + </tag> (end tag)
Element = <h1> Heading </h1> => h1 is main heading.
Elements =<p>(start tag) + content (Elements) + </p> (End tag)
Elements =<button>(start tag) + content (Elements) + </button> (End tag)
1.5 HTML Attributes:
Attributes are specified directly after the tag name, inside the angle brackets.
1.6 HTML Comments:
Example of structure of the elements:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</body>
</html>
Text Formatting:
2.1 Headings (<h1> to <h6>):
The HTMl h1 Element defines a main heading.
2.2 Paragraph Element (<p>):
The HTML p element defines a paragraph.
<p>Plan your trip wherever you want to go</p>
2.3 Button Element:
The HTML button element defines a button.
<button>Get Started</button>
2.4 Line Breaks (<br>):
2.4 Horizontal Rules
2.5 Text Styling:
2.6 Quotations:
Quotaitions are used for
3. Inline Elements & Block Level Elements:
3.1 Inline Elements:
Inline elements are drawn where they are defined and only take up the space that is needed. Inline Elements are <span>, <img>, <strong>, <i>, <b>, <br>, <abbr>, <code>, <em>, and <a>.
3.2 Block Level Elements:
A block-level element stretches to fill the full width available. Elements that are block-level by default include <div>, <section>, <article>, <header>, <footer>, <form>, <h1>, <p>, <nav>, and <blockquote>.
4. Lists:
Ordered Lists (<ol>)
Unordered Lists (<ul>)
Definition Lists (<dl>)
List Items (<li>)
5. Links and Navigation:
5.1 Hyperlinks:
HTML provides the <a> tag to create hyperlinks that connect one page to another. The <a> element defines a hyperlink, which is used to navigate to other web resources or specific elements within the HTML document. These are commonly referred to as links.
<a href=”URL”>Content</a>
5.2 HTML href Attribute:
The HTML href attribute specifies the URL or path of the page to which the link goes.
<a href=”https://www.infinitybix.com/”>Html Programming</a>
5.3 Anchor Links:
anchor
5.4 Target Attribute:
The HTML target Attribute specifies where to open the linked web resource.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=”https://www.ccbp.in/” target=”_blank”
>Explore CCBP 4.0 Certification Programs</a>
</body>
</html>
5.5 Email Links:
6. Images:
6.1 Image Attributes: src, alt, width, height:
6.2 Embedding Images (<img>):
6.3 Responisve Images:
7. Tables:
7.1 Tables Strucure:
7.2 Tables Rows (<tr>):
7.3 Table Data (<td):
7.4 Table Headers (<th>):
7.5 Table Caption (<caption>):
7.6 Table Alignment and Spacing:
6. Tables
Table Structure (<table>)
Table Rows (<tr>)
Table Data (<td>)
Table Headers (<th>)
Table Caption (<caption>)
Table Alignment and Spacing
7. Forms
Form Structure (<form>)
Input Elements (<input>)
Text, Password, Email, Radio, Checkbox, Submit, etc.
Labels (<label>)
Select Dropdowns (<select> and <option>)
Textareas (<textarea>)
Form Buttons (<button>)
Form Validation