Learn HTML in 10 Days with Clear Guidance and Practical Examples!
Introduction to HTML:
HTML (Hypertext Markup Language) is basic foundation of web development. It describe the structure of your web pages.It is easy to learn - You will enjoy it! Lets get started:
Basics of HTML:
HTML consists of elements represented by using tags. The <html>, <head>, and <body> tags form the essential structure of an HTML document, outlining its hierarchy and content placement.<!DOCTYPE html> sets the HTML version and declares the document type. Creating your first HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>HTML Headings and Paragraphs:
HTML provides various heading tags <h1> to <h6> for different levels of headings. Paragraphs are created using <p> tag.
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
HTML Attributes:
Attributes shows additional information about HTML element . Attributes are always specified in start tag i.e <body bgcolor="blue">
Syntax : Attribute name="attribute value"
Example : Bgcolor="blue"
bgcolor is an attribute that sets the background color of the webpage to blue.
HTML Lists:
List's can be extremely useful in organizing and structuring web content.
There are two main types of lists in HTML:
unordered list By default, each item in the list will have a small black circle, or bullet point,<ul>tag Represents an unordered list.
ordered list, each item in the list will start with a number.<ol> tag Represents an ordered list
The <li> tag indicates list items in <ul> or <ol>.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>HTML Links:
HTML Links allow users to click their way from page to page.
Internal and External Links:
Anchor tags used to create connections within webpage.
For internal links <a href="#section">Link</a>
For external links <a href="https://externalsitename.com">External Link</a>
<a href="https://www.example.com">Visit Example.com</a>HTML Images:
Images helps to improve the representation of a web page.HTML<img> tag is used to add an image in a web page.
Syntax:<img src="url" alt="alternate_text_display_if_image_unable_to_load">
The required attribute src describe the path of image and alt attribute provides an alternate text for an image
<img src="image.jpg" alt="Description">HTML Forms:
HTML <form> tag is used to create an HTML form. It is used collect user input ,Example Signup or Login Page
The <form> tag consist various kinds of input elements[input tags], like text fields, checkboxe, radio buttons, submit buttons.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>HTML Tables:
HTML tables used to arrange data into rows and columns.Table cell is defined by a <td> and a </td> tag. [<td> i.e table data] Each table row starts with a <tr> and ends with a </tr> tag.[<tr> i.e table row]
<th>stands for table header,<th> elements are bold and centered.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>ABC</td>
<td>25</td>
</tr>
</table>HTML Semantic Elements:
Semantic tags provide a clear structure to your HTML, making it more readable and understandable.
Conclusion
In conclusion, this comprehensive guide has provided a solid foundation for mastering HTML within 10 days. By covering fundamental elements, syntax, and practical examples, it empowers beginners to understand and create well-structured web pages with ease.
