BASICS OF HTML
Web development using HTML (Hypertext Markup Language) involves creating the structure and
content of web pages. Here's a basic overview:
### 1. HTML Structure
HTML documents are structured in a hierarchical manner, with nested elements. The basic structure of
an HTML document looks like this:
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
### 2. HTML Elements
HTML elements are the building blocks of web pages. Each element has an opening tag, content, and a
closing tag.
- **Headings**: `<h1>`, `<h2>`, ... `<h6>`
```html
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
- **Paragraphs**: `<p>`
```html
<p>This is a paragraph.</p>
```
- **Links**: `<a>`
```html
<a href="[Link] is a link</a>
```
- **Images**: `<img>`
```html
<img src="[Link]" alt="Description of image">
```
- **Lists**:
- Ordered List: `<ol>`
```html
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```
- Unordered List: `<ul>`
```html
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
```
### 3. Attributes
HTML elements can have attributes that provide additional information. Common attributes include:
- `href` for links:
```html
<a href="[Link]
```
- `src` and `alt` for images:
```html
<img src="[Link]" alt="A description of the image">
```
- `class` and `id` for styling and scripting:
```html
<p class="text">This is a paragraph.</p>
<div id="uniqueElement">This is a unique element.</div>
```
### 4. Nesting Elements
HTML elements can be nested inside other elements to create complex structures.
```html
<div>
<h1>Main Heading</h1>
<p>This is a paragraph inside a div.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
</div>
```
### 5. HTML Comments
Comments can be added to HTML code to make it more understandable. They are not displayed in the
browser.
```html
<!-- This is a comment -->
<p>This is a paragraph.</p>
```
### Practice Example
Here's a simple example putting together various elements:
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello! This is my first web page.</p>
<p>Here's a link to my favorite site: <a href="[Link]
<img src="[Link]" alt="A beautiful scenery">
<h2>Things I Like</h2>
<ul>
<li>Reading</li>
<li>Traveling</li>
<li>Photography</li>
</ul>
</body>
</html>
```
HTML TAGS
HTML tags are the fundamental building blocks of HTML. They are used to define and structure the
content of web pages. Here is an overview of some common HTML tags and their uses:
### Basic Tags
1. **`<!DOCTYPE html>`**: Defines the document type and version of HTML.
2. **`<html>`**: The root element of an HTML document.
3. **`<head>`**: Contains meta-information about the document (e.g., title, scripts, styles).
4. **`<title>`**: Sets the title of the document, shown in the browser's title bar or tab.
5. **`<body>`**: Contains the content of the document, such as text, images, links, etc.
### Text Formatting Tags
1. **`<h1>` to `<h6>`**: Define headings, `<h1>` being the highest (or most important) and `<h6>` the
lowest.
2. **`<p>`**: Defines a paragraph.
3. **`<br>`**: Inserts a line break.
4. **`<hr>`**: Inserts a horizontal rule (line).
5. **`<strong>`**: Defines important text (usually rendered as bold).
6. **`<em>`**: Defines emphasized text (usually rendered as italic).
7. **`<b>`**: Defines bold text.
8. **`<i>`**: Defines italic text.
9. **`<u>`**: Defines underlined text.
10. <Big> it makes the first character in the text yo be in capital letter.
11. <del> shows a deleted text
### List Tags
1. **`<ul>`**: Defines an unordered list.
2. **`<ol>`**: Defines an ordered list.
3. **`<li>`**: Defines a list item.
### Link and Media Tags
1. **`<a>`**: Defines a hyperlink.
2. **`<img>`**: Embeds an image.
3. **`<video>`**: Embeds a video.
4. **`<audio>`**: Embeds an audio file.
5. **`<iframe>`**: Embeds another HTML page within the current page.
### Table Tags
1. **`<table>`**: Defines a table.
2. **`<tr>`**: Defines a table row.
3. **`<td>`**: Defines a table cell.
4. **`<th>`**: Defines a table header cell.
5. **`<thead>`**: Groups the header content in a table.
6. **`<tbody>`**: Groups the body content in a table.
7. **`<tfoot>`**: Groups the footer content in a table.
### Form Tags
1. **`<form>`**: Defines a form for user input.
2. **`<input>`**: Defines an input field.
3. **`<label>`**: Defines a label for an input element.
4. **`<textarea>`**: Defines a multi-line text input control.
5. **`<button>`**: Defines a clickable button.
6. **`<select>`**: Defines a drop-down list.
7. **`<option>`**: Defines an option in a drop-down list.
8. **`<fieldset>`**: Groups related elements in a form.
9. **`<legend>`**: Defines a caption for a `<fieldset>` element.
### Semantic Tags
1. **`<header>`**: Defines a header for a document or section.
2. **`<nav>`**: Defines navigation links.
3. **`<main>`**: Specifies the main content of a document.
4. **`<section>`**: Defines a section in a document.
5. **`<article>`**: Defines an independent, self-contained piece of content.
6. **`<aside>`**: Defines content aside from the content it is placed in.
7. **`<footer>`**: Defines a footer for a document or section.
### Meta and Style Tags
1. **`<meta>`**: Provides metadata about the HTML document.
2. **`<link>`**: Defines the relationship between the current document and an external resource (used
to link to stylesheets).
3. **`<style>`**: Defines style information for a document.
4. **`<script>`**: Defines client-side JavaScript.
### Miscellaneous Tags
1. **`<div>`**: Defines a division or a section in a document (used for layout purposes).
2. **`<span>`**: Defines a section in a document (used for styling a part of the text).
3. **`<canvas>`**: Used to draw graphics via scripting (usually JavaScript).
These tags are just a selection of the most commonly used ones in HTML. There are many more tags
available, each serving specific purposes in web development.