---
# System prepended metadata

title: HTML

---

# 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 (&bull;) as list markers.
2. Circle `type="circle"`: unfilled circles (&#9675;) as list markers.
3. Square `type="square"`: filled squares (&#9632;)  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>





