.jfif)
HTML Tutorial:
Certainly! Here is an overview of the fundamentals of HTML (Hypertext Markup Language). The most commonly used markup language for making web pages is HTML. It offers a web page's structure and content. Let's start:
HTML Document Structure:
An HTML document is structured with the following elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Declares the document type and version with <!DOCTYPE html>
All additional HTML elements are found in the base element <html>
The document's character set and page title are included in the "<head>" section.
Character encoding for the document is specified (often UTF-8) with the tag meta charset="UTF-8">.
Sets the web page's <title>, which is displayed in the browser tab.
The viewable content of the web page is contained in the <body> tag.
HTML Elements:
The building components of a web page are HTML elements. They usually appear in pairs, with an opening tag and a closing tag, and are encased in angle brackets "< >".
Example of a heading:
<h1>This is a Heading</h1>
Example of a paragraph:
<p>This is a paragraph of text.</p>
Common HTML Elements:
1. Headings:
`<h1>` to `<h6>`: Headings of varying importance, with `<h1>` being the most important and `<h6>` the least.
2. Paragraphs:
`<p>`: Defines a paragraph of text.
3. Links:
`<a href="URL">Link Text</a>`: Creates a hyperlink to another web page or resource.
4. Lists:
Unordered List: `<ul>` and `<li>` for bulleted lists.
Ordered List: `<ol>` and `<li>` for numbered lists.
5. Images:
`<img src="image.jpg" alt="Description">`: Embeds an image.
6. Forms:
`<form>`: Defines an HTML form for user input.
`<input type="text">`, `<input type="password">`, etc.: Input fields.
`<textarea>`: Multiline text input.
`<button>`: A clickable button.
`<select>` and `<option>`: Dropdown menus.
7. Divisions:
`<div>`: A generic container used for styling and layout.
HTML Attributes:
HTML elements can have attributes that provide additional information about the element.
Example of an image with attributes:
<img src="image.jpg" alt="Description" width="300" height="200">
Comments:
You can add comments to your HTML code for documentation purposes. Comments are not displayed in the browser.
<!-- This is a comment -->
HTML Formatting:
HTML also provides basic formatting tags like `<strong>` (bold), `<em>` (italic), `<u>` (underline), and more.
Example of bold text:
<p>This is <strong>bold</strong> text.</p>
HTML5 Semantic Elements:
HTML5 introduced semantic elements that provide meaning to the structure of a web page, aiding accessibility and SEO. Examples include `<header>`, `<nav>`, `<article>`, `<section>`, and `<footer>`.
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</section>
<footer>
<p>© 2023 Your Website</p>
</footer>
This serves as an elementary overview of HTML. As you advance, you can learn about JavaScript for interactivity and CSS for styling to make more dynamic websites. Developing your HTML skills through experimentation and practice is essential.
.jfif)
.jfif)
