-
HTML stands for Hyper Text Markup Language
-
It defines the content and structure of a website
-
It is a markup language
HTML Tags
💡 What are HTML Tags?
HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.
💡 What is HTML Element?
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
1. The Heading Element
example:-
<h1>Hello World</h1>
----------------------------
Here
<h1> is a opening tag where as </h1> is a closing tag
-> anything that's inside an angle bracket(< >) is a tag
-> <h1>Hello World</h1> this entire thing is called an element
- The heading element ranges from <h1> to <h6>
- <h1> is the highest section level whereas <h6> is the lowest section level
2. Paragraph Element
example:-
<p>This is a paragraph.</p>
-------------------------------------
Here
<p> is a opening tag where as </p> is a closing tag
3. Self-Closing Tags
→Horizontal Rule Element
syntax:-
<hr /> or <hr>
→Break Element
syntax:-
<br /> or <br>
4. The List Elements
→Ordered and Unordered Lists
Unordered List
syntax: <ul>
<li>Milk</li>
<li>Flour</li>
</ul>
Ordered List
syntax: <ol>
<li>Milk</li>
<li>Flour</li>
</ol>
nested unordered list
syntax:<ul>
<li>Rice</li>
<li>Flour</li>
<ul>
<li>Atta</li>
</ul>
<ol>
<li>aashirwaad</li>
</ol>
<li>Milk</li>
</ul>
5. The Anchor Element
→It allows us to create Hyperlink(It is used to link from one page to another)
syntax:-
<a href="url/src">This is a link</a>
or we can have global attributes like draggable and set it true which results in the hypertext being draggable.
6. The Image Element
→It allows us to add images to our website
syntax:-
<img src="url/size" alt="image of some sunset"/>
url followed by the size of the image in pixels
File Path
→We have two different types of File Path
|
Relative File Path |
Absolute File Path |
|---|---|
|
A relative path describes the location of a file relative to the current (working) directory- |
An absolute path describes the location from the root directory. |
→In Web Development Relative File Path is more useful :)
Let’s understand Relative File Path with an example
→Here since we want to link a file( i.e anchor.html) that is in the same folder
a single dot followed by a slash helps us to locate the file
In another example
→Here The file which we want to link is located in another folder
a double dot followed by a slash helps us to locate the desired file(i.e. external.html)
HTML BoilerPlate
What is an HTML Boiler Plate?
- A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.
<!DOCTYPE html> //This tag tells the browser which version of the file was written in.
<html lang="en"> // this is the language of the text content in that element.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> //this keeps our code compatible with Internet Explorer
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //it tell you the viewport and it defines how the website should be displayed relative to the screen that it's being rendered on.
<title>Document</title> //this get displayed in the tab bar
</head>
<body>
//this is where all of the content of the website goes.
//the text,the titles,the images,the links,everything that you can do with HTML
</body>
</html>
This is the Basic Introduction to HTML we have a few more topics to cover like buttons and etc which we will do as I keep learning :)
If you have learned all of the above topics and got a basic idea of HTML
you can start learning CSS :)
Thank you for reading and keep learning :)
Also published here.