> For the complete documentation index, see [llms.txt](https://pda-assignments.consoleflare.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pda-assignments.consoleflare.com/python-for-data-analytics/1.python/3.python-projects/webscraping-with-python/basic-introduction-to-html.md). # Basic Introduction To HTML {% embed url="" %} ### Why learn Basics of[ HTML](https://www.w3schools.com/html/html_elements.asp) ? HTML (Hypertext markup language) is the standard language for web pages. If you want to Scrape data from Web pages, you need to learn HTML. **The core element of a web page is a text file written in the Hypertext Markup Language (HTML) that describes the content of the web page and includes references to other web resources**. ### What are HTML Elements and Tags? HTML tags define the start and end of the HTML Element in a HTML Element. HTML Element defines the nature of the content written inside it. Let us say you want to add a heading, we will use **`

`** element. **`

My Text

`** Here h1 and h2 are HTML elements. To understand HTML better, Let us go to Pycharm and create a basic HTML Web Page. ### Create a HTML File :
Delete Eveything written in **`mywebsite`** . Let's Start From Scratch. ### **` Element :`** **``** element is the root element of the html document. It has a starting and ending tag. It contains everything of your website. HTML Document starts with **` element.`** ```python ```
If you click on Chrome or your desired Browser, A Website will open like this:
### ` Element :` The `` element contains **meta information** about the HTML page`.` ```python ``` ### ` Element :` The title element contains title of the website. ```python <html> <head> <title> E - Commerce Website ```
### `
Element:` The \
tag **defines a division or a section in an HTML document**. The \
tag is used as a container for HTML elements`.` ### `class Attribute :` class attribute is used to group a particular section. Let us say we want to create a post about a phone , we should post a phone for our Website. Yay!! ```python E - Commerce Website
``` ### `Heading - Add Phone Name` ## `h1 is the most important heading` ### `h2 is the second important heading` {% hint style="info" %} **`h1 is the largest heading and h6 is the smallest one.`** {% endhint %} ```python E - Commerce Website

Samsung Galaxy

```
### `Image - Add Image of Phone` Let us say , we want to add a new image for the phone. You can simply use **``** tag with its `src` attribute containing url or path for the image. ```python E - Commerce Website

Samsung Galaxy

```
### `List - Add Specifications` There are two kind of list tags. * [x] `Ordered List
    ` * [x] `Unordered List
      ` {% tabs %} {% tab title="Ordered List" %} 1. **6000 mAh Lithium Ion Battery** 2. **50MP + 5MP + 2MP | 8MP Front Camera** 3. **16.76 cm (6.6 inch) Full HD+ Display** {% endtab %} {% tab title="Unordered list" %} * **16.76 cm (6.6 inch) Full HD+ Display** * **50MP + 5MP + 2MP | 8MP Front Camera** * **6000 mAh Lithium Ion Battery** {% endtab %} {% endtabs %} ```python E - Commerce Website

      Samsung Galaxy

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
      ```
      ### ` tag - Link To Read More :` We use `` tag for link and `` attribute for hyperlink. ```python E - Commerce Website

      Samsung Galaxy

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
       Know More
      ```
      {% hint style="info" %} Let us create multiple post for different phone by simply using our `
      tag.` {% endhint %} ### Adding Three different Phone Posts with same class "Phone" : ```python E - Commerce Website

      Samsung Galaxy

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
      Know More

      Redmi

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
      Know More

      Real Me

      1. 3 GB RAM | 32 GB ROM | Expandable Upto 1 TB
      2. 16.51 cm (6.5 inch) HD+ Display
      3. 50MP + 0.3MP | 5MP Front Camera
      Know More
      ```
      ### Adding Two different Laptop Posts with class "Laptop" : ```python E - Commerce Website

      Samsung Galaxy

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
      Know More

      Redmi

      1. 16.76 cm (6.6 inch) Full HD+ Display
      2. 50MP + 5MP + 2MP | 8MP Front Camera
      3. 6000 mAh Lithium Ion Battery
      Know More

      Real Me

      1. 3 GB RAM | 32 GB ROM | Expandable Upto 1 TB
      2. 16.51 cm (6.5 inch) HD+ Display
      3. 50MP + 0.3MP | 5MP Front Camera
      Know More

      Asus

      1. Intel Core i3 Processor (10th Gen)
      2. 8 GB DDR4 RAM
      3. 64 bit Windows 11 Operating System
      Know More

      HP

      1. AMD Ryzen 5 Hexa Core Processor
      2. 8 GB DDR4 RAM
      3. 64 bit Windows 11 Operating System
      Know More
      ```
      {% embed url="" %}