In previous chapter we have learn that What is an HTML document? How to create an HTML document and how to save it. But before moving on this I want to make this clear that all of you must have a computer system in which a Text Editor program must be installed.
In previous chapter we have learnt that What is an HTML document?
Now in this chapter we will see how to create an HTML document and how to save it. But before moving on that I want to make this clear that all of you must have a computer system in which a Text Editor program must be installed.

Tips: Go to Chapter - “What is an HTML document?”. at the bottom of the page there is a link given from where you can download Notepad++ and Installation guide link is also given.

Now we are all set to create a first HTML document.

HTML Document Declaration

All HTML document must start with a declaration like <!DOCTYPE HTML>. This is the very first line which is written in HTML document. It also called HTML Document Type Declaration. It specifies the version of the HTML document.


When we write <!DOCTYPE HTML> on the top HTML page that simply means that the HTML document version is HTML5. Below are the different versions of HTML and their declarations.


HTML 4.01 Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


We will study about the declaration in further chapter. For now we will use <!DOCTYPE HTML> which represents HTML5.



HTML Tags and Body Tags

After the declaration we write the html open tag and it ends with close tag like <html> and </html>. Between html open and close tags there are two parts of the document. One part is not visible and other part is visible on web page. Non visible part is written between head tags and visible part is written between body tags. But between the head tags there is a tag which is displayed on webpage that is title tag which describe the title of the document. It displayed on the most top part of the web browser.

Now the whole document is look like below given below example:
Example - 1

<!DOCTYPE html>
<html>
<head>
<title>My first webpage</title>
</head>
<body>
<h1>This is heading </h1>
<p>This is a paragraph.</p>
</body>
</html>


Try yourself in Notepad++
Tips: Watch the video - How to create an HTML document.




Title Tags

In above example you have seen title tags like <title> and </title>. Title tags describe the title of the document. We must give a meaningful title to the document it helps the search engines to recognize and rank your web page(s).


Learn : What is Search Engine?

Now save the HTML document like below image. You can save it in computer storage wherever you want.

Example - 2

How to Save an HTML Document
How to Save an HTML Document



Tips: Create a folder name ‘htdocs’ in C drive and save the file name as ‘index.html’.




If you are using notepad++ then write the above html code on your document, save as instructed above and press “CTRL” + “R” on you computer then your html document will be open in web browser and it will look like image given below.

Example - 3

Web Page example
Web Page example
You can see on above image where is the title is displayed.



Head tags

Now we move to head tags. HTML head tags defined with 6 different tags from <h1>  to <h6>. In below example (Example - 5) you can see moving from <h1> to <h6> the text size is reducing. But hey! be careful, always remember, that different head tags are used at different places of html page it does not show off the size of the text. it defines the importance of the headings we use. <h1> is most important heading and <h6> is the least important heading on a web page.

Example - 4



 <h1>This is Heading - 1</h1>
<h2>This is Heading - 2</h2>
<h3>This is Heading - 3</h3>
<h4>This is Heading - 4</h4>
<h5>This is Heading - 5</h5>
<h6>This is Heading - 6</h6>

Copy and paste above code in your index.html page and open into web browser and see what happens. 

Example - 5

HTML Head tags examples
HTML Head tags examples



Paragraph Tags

Now we move to paragraph tags. Whenever you write any article or any content that contains the paragraph on you webpage then those paragraph must be written between <p> and </p> like below :

Example - 6

<p>Hi! Welcome to Progrramers. This is my first webpage. I am learning at Progrramers. You are also invited to learn. It's completely free.</p>
<p>HTML is fun. You can also try. The specialty of this web school that you can learn here with full details. Let's learn at Progrramers.</p>

Tips: Line change and Paragraph change are two different things. Always remember each paragraph should be written in different paragraph tags. This practice help better to display your content at Mobile Browsers or Small Screen Devices Browsers.



Some Special Tags

There are some special tags which have neither closing tags nor contents. Like below

<br>
<hr>
<b>
<img> 

Tips: Read What is HTML?: HTML Introduction#Elements


HTML tags with Attributes

Some of the HTML tags work with attributes combined. If we remove the attribute from those tags then there is no meaning of their presence on web page like HTML Anchor tag and 
HTML Image tag.

HTML Links

HTML Anchor tags defines the Hyperlink on web page. The Anchor open tag is <a> and close </a>. The content is written between both tags and an attribute “href” defines the destination of the link. Like below:

<a href = “https://progrramers.blogspot.in/”> Learn HTML at Proprramers.</a>

This anchor link looks like shown in below example:

Example - 7

Learn HTML at Proprramers.





HTML Images

HTML images are defined on the web page with the Image tag. It is written like <img>. Image tag has no close tag and it work with “src” attribute. Image tag sets the frame to display the image on web page and src attribute fetch the image. It can be written like below:

<img src = “https://goo.gl/oK5ctq”  width = “140” height = “140” >

The result looks like below on web page.

Example - 8
Image on Web Page
Image on Web Page





In next chapter we will learn about HTML Elements.








Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

4 comments:

  1. Check this course Udemy - HTML and CSS for Beginners | Know It Now (6 hours on-demand video, Full lifetime access)

    Check this one also for HTML5 Udemy - HTML5 Programming From Scratch | Know It Now (10.5 hours on-demand video, Full lifetime access)

    ReplyDelete
  2. Check this course Udemy - HTML and CSS for Beginners | Know It Now (6 hours on-demand video, Full lifetime access)
    https://knowit-now.com/udemy-html-and-css-for-beginners/

    Check this one also for HTML5 Udemy - HTML5 Programming From Scratch | Know It Now (10.5 hours on-demand video, Full lifetime access)
    https://knowit-now.com/udemy-html5-programming-from-scratch/

    ReplyDelete
  3. Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
    best web development course in coimbatore
    php training in coimbatore

    ReplyDelete
  4. Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. projecto de arquitectura lsf

    ReplyDelete