# HTML
## what is the syntax of the HTML language?
HTML Elements is made up of characters that live inside angled brackets **< >**
Elements are in one of the two folloing syntax
* **Open-Close tags**: `<tagname> .... </tagname>`
* **Opening Tag**: `<tagname>`
* **Closing Tag**: `</tagname>`
* **Content**: Text or other elements placed between the opening and closing tags.
* **Attributes** (optional): `<tagname attribute="value">`
```php=
<h1>HELLO WORLD</h1>
```
* **Self-Close tags**: `<tagname />`
* **Opening-Closing Tag**: `<tagname />`
* **Attributes** (optional): `<tagname attribute="value">`
```php=
<img src="./test.png" />
```
## what is the Structure of the HTML document?
* `<html>`: The root element that contains the entire HTML document
* `<head>`: Contains metadata about the document, including character **encoding**, and the document's **title**,It can also include **links** to external stylesheets.
* `<body>`: Contains the **main content of the web page**, including text, images, links, and other elements.
HELLO WORLD EXAMPLE:
```php=
<html>
<head>
</head>
<body>
<h1>HELLO WORLD</h1>
</body>
</html>
```
## TEXT TAGS:
* **Structural markup**: to describe both headings and paragraphs.
# heading 1: `<h1>HELLO</h1>`
## heading 2: `<h2>HELLO</h2>`
### heading 3: `<h3>HELLO</h4>`
#### heading 4: `<h4>HELLO</h4>`
##### heading 5: `<h5>HELLO</h5>`
###### heading 6: `<h6>HELLO</h6>`
paragraphs: `<p>lorem lorem lorem lorem </p>`
NOTE: By default, a browser will show each paragraph or
heading on a new line
* **Line Breaks** (self-close tag): `<br />` used to add empty line
<br /><br />
* **Horizontal Rules** (self-close tag): `<hr />` used to add horizontal line.
---
* **Semantic Markup**: add extra information to the pages
* **Bold font**: `<strong>HELLO</strong>` `<b>WORLD</b>`
* *Italic font*: `<i>HELLO</i>` `<em>WORLD</em>`
* ~~deleted~~ text: `<del>HELLO</del>` `<s>WORLD</s>`
* underline text: `<u>HELLO</u>` `<ins>HELLO</ins>`
## LISTS:
* **Ordered lists**:
1. The ordered list is created with the `<ol>` element.
2. Each item in the list is placed between `<li>` tag.
```php=
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
```
**Ordered list types:** `<ol type="??"> ... </ol>`
1. Decimal (Default): Ordered lists use numbers (1,2,3,..)
2. Lowercase Roman (type="i"): Create lists with lowercase Roman numbers
3. Uppercase Roman (type="I"): Create lists with uppercase Roman numbers
4. Lowercase Letters (type="a"): Create lists with lowercase Letters (a,b,c,..)
5. Uppercase Letters (type="A"): Create lists with uppercase Letters (A,B,C,..)
---
* **Unordered lists**:
* The ordered list is created with the `<ul>` element.
* Each item in the list is placed between `<li>` tag.
```php=
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
```
**Unordered list types:** `<ul type="??"> ... </ul>`
1. Disc (Default): filled circles (•) as list markers.
2. Circle `type="circle"`: unfilled circles (○) as list markers.
3. Square `type="square"`: filled squares (■) as list markers.
---
* **Definition Lists**:
1. The definition list is created with the `<dl>` element.
2. Inside the `<dl>` element you will usually see pairs of `<dt>` and `<dd>` elements.
```php=
<dl>
<dt>Programming Languages</dt>
<dd>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</dd>
</dl>
```
**Nested Lists :** You can put a second list inside an `<li>` element to create a sublist or nested list.
```php=
<ol>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item A</li>
<li>Sub-item B</li>
</ul>
</li>
<li>Item 3</li>
</ol>
```
## IMAGES
**it is good practice to create a folder for all of the images the site uses.**
To add an image into the page you need to use the self-close tag `<img />`element.
**img tag attributes:**
* **src:** This tells the browser where it can find the image file.
* **alt:** description of the image which describes the image if users cannot see it.
* **title (Optional):** the content appear as a tooltip when the user hover over it.
* **height(Optional):** to control the image heigh in pixels.
* **width(Optional):** to control the image width in pixels.
Images often come with captions so how we can add it?
to add a caption you should use the `<figure>` tag to contain the image and the caption inside the `<figcaption>` tags
**Example:**
```php=
<figure>
<img src="./images/cat.png" alt="cat" />
<figcaption>MEEEEEEEEOOOOOOOOO</figcaption>
</figure>
```
## LINKS
To create links within your web page, you use the `<a>` (anchor) tag. Links are used to **navigate** to other pages on your website or external websites.
**Attributes of the `<a>` tag:**
1. **href**: This attribute specifies the **URL** to which the link points. It can be a relative or absolute URL.
2. **target (Optional)**:
* "_self" (default, opens in the same tab)
* "_blank" (opens in a new tab or window)
**Where you can navigate using `<a>` tag?**
1. different website:
```php=
<a href="google.com">GOOGLE</a>
```
2. the same website but different page:
```php=
<a href="./about.html">About us</a>
```
2. the same page but different secction:
```php=
<p id="section_1">section 1 ...etc</p>
.......
<a href="#section_1">section 1</a>
```
## Table
used to organize and display data in a structured grid format.
**Basic Table Structure:**
1. `<table>`: The main container for the table.
2. `<tr>` (Table Row): Used to define each row within the table.
3. `<th>` (Table Header): Defines header cells in the table. Typically used for the first row or column to label data
4. `<td>` (Table Data): Defines data cells in the table. This is where your actual content goes.
```php=
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
```
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
**Table Attributes:**
* border: Specifies the width of the table border (e.g., border="1").
* width: Sets the width of the table (e.g., width="100%").
**Table Headings and Captions:**
* `<caption>`: You can add a caption to describe the table content. Place it immediately after the `<table>` opening tag.
* `<thead>`: Used to group header content in a table.
* `<tbody>`: Contains the body of the table (the actual data).
* `<tfoot>`: Contains footer information for a table.
```php=
<table>
<caption>Table 1</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
</tr>
</tfoot>
</table>
```
<table>
<caption>Table 1</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
</tr>
</tfoot>
</table>
**Spanning Rows and Columns:**
* colspan: Specifies how many columns a cell should span.
* rowspan: Specifies how many rows a cell should span.
```php=
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row Span</td>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td colspan="2">Data 3</td>
</tr>
</table>
```
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Row Span</td>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td colspan="2">Data 3</td>
</tr>
</table>
Sign in with Wallet
Connect another wallet