search

Basic Introduction To HTML

hashtag
Basic Introduction To HTML

hashtag
Why learn Basics of HTMLarrow-up-right ?

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.

hashtag
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 <h1></h1> element.

<h1>My Text</h2>

Here h1 and h2 are HTML elements.

To understand HTML better, Let us go to Pycharm and create a basic HTML Web Page.

hashtag
Create a HTML File :

Delete Eveything written in mywebsite . Let's Start From Scratch.

hashtag
<html> Element :

<html> 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 <html> element.

If you click on Chrome or your desired Browser, A Website will open like this:

hashtag
<head> Element :

The <head> element contains meta information about the HTML page.

hashtag
<title> Element :

The title element contains title of the website.

hashtag
<div> Element:

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements.

hashtag
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!!

hashtag
Heading - Add Phone Name

hashtag
h1 is the most important heading

hashtag
h2 is the second important heading

circle-info

h1 is the largest heading and h6 is the smallest one.

hashtag
Image - Add Image of Phone

Let us say , we want to add a new image for the phone. You can simply use <img> tag with its src attribute containing url or path for the image.

hashtag
List - Add Specifications

There are two kind of list tags.

  1. 6000 mAh Lithium Ion Battery

  2. 50MP + 5MP + 2MP | 8MP Front Camera

  3. 16.76 cm (6.6 inch) Full HD+ Display

hashtag
<a> tag - Link To Read More :

We use <a> tag for link and <href> attribute for hyperlink.

circle-info

Let us create multiple post for different phone by simply using our <div class = "Phone"> tag.

hashtag
Adding Three different Phone Posts with same class "Phone" :

hashtag
Adding Two different Laptop Posts with class "Laptop" :

PreviousImporting Necessary LibrariesNextIntroduction To BeautifulSoup

Last updated