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