Hello, Friends this is Amrit & you all are welcome to Mirror Of Reality . So, friends I explained about What is html, Tags & Attributes of Html, & we created a simple web document in our previous article about How To Create a Website – Part 1 .
If you have not read my previous article You must read the previous article – How to create a Website – Part 1 before reading this article..
Today we will learn about Types of Html Versions, Web Page Structure, HTML Headings, Paragraph, Link Building & how to add a image & attaching a link with that image, How to make a button & about also list tag.
So, Friends let’s start How to create a Website – Part 2….
How to create a Website – Part 2
HTML Version Types :
The first version of html was launched in the Year 1991 & the version was Html.
Then HTML 2.0 launched in 1995
Thereafter HTML 3.2 launched in 1999
Afterthis a new HTML version was invented which is XHTML in 2000 (I learned about Html from this version)
Then HTML invented massive version of HTML which is HTML 5 in 2014…
What is <!DOCTYPE> ?
The <!DOCTYPE> statement speaks to the document type & helps our web browser to show web pages correctly.
It must only appear once, at the top of the web page before any HTML Tag…
The <!DOCTYPE> statement for HTML 5 version is
HTML Page Structure
Here You Can see that <body> tags are highlighted & this part will be visible on your browser….
<!DOCTYPE html> is describing document type is HTML 5
In <head> element you can put a title for the document, scripts, styles, meta information, and more.
Some most common <head> elements are:
- <title> (Required elemrent in an HTML document)
I will explain about above tags in next article…..
Software that you can use for Editing or Creating HTML Documents :
In windows pc you can use Notepad, Notepad++, Sublime etc for editing or creating a html document..
In mac you can use Open Text Edit as well as.
How to create a Website
How To Write a HTML Headings :
Html headings are described with the <h1>, <h2>, <h3>, <h4>, <h5> & <h6>
Where <h1> described as most important heading & <h6> described as the least important heading.
As example :
<h1> This is the heading 1 </h1>
<h2> This is the heading 1 </h2>
<h3> This is the heading 1 </h3>
<h4> This is the heading 1 </h4>
<h5> This is the heading 1 </h5>
<h6> This is the heading 1 </h6>
All this codes will be visible on your web browser like the below image.. Put the all above codes in your notepad & set the title & .html extension at the end .. Then save & open that..
How To write a Html Paragraph :
html Paragraphs are described with <p> tag.
- <p>This is a Paragraph</p>
How To build a HTML Link :
Html Links are described with the <a> tag.
<a href=”https://MirrorOfReality.Com”>HTML Link</a>
Which will be looked like below :
Here the targetted link is given in the href attribute & <a> is the Html tag which is used to build a link.
How To add a HTML image :
Html images are described with the <img> tag & src is for source.
Alt for alternative text,
width & height are provided as attributes..
<img src=”C:\Users\Amrit\Desktop\Amrit.png” alt=”Test Image” width=”100″ height=”150″>
At first pick a image on your desktop > Right Click > Properties > Now Put The Location Of your Picture File (Type Location\Your File Name Then Type of file)
As example Here The Location of above Photo is C:\Users\Amrit\Desktop\Amrit.png
How To attach a Link With a Image :
<a src=”Type The Link” ><img src=”image location link” width=”Enter your desired Width of your image in numeric pixel value” Height=”Enter your desired Height of your image in numeric pixel value“></a>
You can also add alternative text (alt attribute) in your img tag.
How To create a simple HTML Buttons :
Html Buttons are described with the <Button> Tag
As Example :
Which will be Visible like below image
What is HTML Lists :
Html lists are characterized with the <ul> (Unordered/Bullet list> & <ol> (Ordered/Numbered List) tag, followed by <li> tags.
It means <ul> tag used for making bullet list or you can say Un-ordered lists & <ol> tag is used for numbered or ordered list , Followed by <li> tags.
As example of an Un-ordered List:
<h1>An unordered HTML list</h1>
<li>1st unordered/bullet list</li>
<li>2nd unordered/bullet list</li>
<li>3rd unordered/bullet list</li>
Which will be displayed on your browser like below image,
HTML un-ordered list are divided in 4 categories such as,
- Disc/ bullet
You have to put a style in <ul> tag Like <Ul style=”list-style-type:circle“> then list will be displayed as circle. As well as you can type disc, square & none for sho
As example of Ordered/Numbered list:
<h1>An ordered HTML list</h1>
<li>1st ordered/numbered list</li>
<li>2nd ordered/numbered list</li>
<li>3rd ordered/numbered list</li>
Which will be displayed like below image,
There are 5 types of Ordered Html List:
You have to put the type in <ol> tag Like <ol type=”A”> then list will be displayed as A, B, C, D
If You have any query you can contact me on my facebook profile or contact me via email.
If you have not read my previous article You can read the previous article – How to create a Website – Part 1
Just Practice it & we will meet again with the 3rd part of our Web Development series tomorrow..
Bbye Friends visit again & Don’t forget to allow notification tab for getting our post First.
You can also visit w3schooloswhere you can Edit these codes & you can practice there as well as..
How To Create a Website
You can also Read :
- How to create a Website – Part 1
- How To Trace Email Sender Ip Address in Gmail
- How To Make Money Without Selling Anything
- 8 Successful Business development Tips
- How To Sell Photos Online
- 3 Rules you must know before You make Money Blogging
- What is Ethical Hacking – Career, Scope, Salary in India
Thank You friend
How To Create a Website