Skip to main content

Learn Html Online | A free E-book On HTML GUIDE

This Post is UNDER CONSTRUCTION.

Learn Html

0th chapter of HTML

HTML

Very good morning to everyone. Before writing this book i would like to tell about this ebook. This book is useful for those who want to learn html from zero. If you are already master in html and css so please skip reading this book.

Othe side if you are a person who want to gain knowledge in html then you are most welcome on this Free Ebook. Originally HTML was found in 1993. This is starting of year 2023. Thirty years have passed.

It is assumed that you already  know about browsers ,Internet basics. But somehow you are not aware of computer very basics then best way is

  1. 0
  2. 1

Learn Html

0th chapter of HTML

to connect you with computer literate guy.

A well 10th standard or more educated can learn easily from this book. I have 10 years of experience in web projects. But still i am learning from situtions. So we can understand html as a weapon for us to create design on web.

First half of chapters will cover html Tags. Html is made by tags. If we are writing a html document that means we are typing tags of html and putting some text in them.

After reading this book step by step you will able give skeleton of any kind of web page.

In this book more then 100 of tags explained. But tags are not sufficient to know about html. We will use each and every tag . Various project modules are covered in last half of book. We commit on first page that we will learn from zero .

  1. 2
  2. 3

Learn Html

HTML document

Writing HTML DOCUMENT

An HTML document is nothing but a file on server. Html document have .html or .htm file extension. Just like MS-Word document this file contain text data in it. As we discussed that a html file is nothing but a structure form of html tags.

Now we will see that what a html document contains in file.  




Although html is a very simple web language , but still need practice and patience to learn.

At first line there is a code or syntax :<!DOCTYPE html>

  1. 4
  2. 5

Learn Html

<!DOCTYPE html>

Writing HTML DOCUMENT

As soon as browser parse or say translate html document it found <!DOCTYPE html > text/code , it understand about the document type.

It is ending of year 2022 , till now html latest version is html5. When we write doctype html code in top , browser understand this document as html5 type document.

Suppose a website is using old xhtml version 1.0 In this case it's declaration look like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

So a html document having this declaration means browser will translate html tags according to xhtml 1.0 version strictly.

  1. 6
  2. 7

Learn Html

< html>

Writing HTML DOCUMENT

Now we are moving to second line of html code . All html tag comes inside < html> tag. At the last of document it is written with it's closing tag.

At third line there is a tag named head. A head tag contains another tags. A document always have some title . Title is always comes in title tag. Title tag itself comes inside head tag.And you know head itself is in html tag.

There are other tags , which comes in head tag like meta tag. We will discuss meta tag later.

Do you know , 90% of this ebook is made by only two tag of html. Means if you only know few more tags you can write a book online free of cost on free platforms. So we are coming to heading tag and paragraph tag.

  1. 8
  2. 9

Learn Html

heading tag

Writing HTML DOCUMENT

We are human being. We have skills to read a language . On a web page everyone want to know about title of page. It is rarely practical that a web page have no heading tag.

There are 6 different heading tags in html language. <h1>,<h2>,<h3>,<h4>,<h5>and<h6> These all tag have their closing tag also. h1 tag has high priority of visibility seo point of view. While h6 tag means comparely this data is less important. h6 heading by default smaller than h1 heading.

  1. 10
  2. 11

Learn Html

<p> Tag

Writing paragraph in HTML.

<p> tag is designed for writing a paragraph.This is also a paired tag , means it has both opening and closing tags. Paragraphs automatically having space before and after it. By default in html background is white and text color is black. You can modify this behaviour by giving css to your paragraph text.

This is a paragraph having a border with red color. Padding is 25 pixel from all side.

This is a paragraph having a black color board and white text written on it. Padding is 25 pixel from all side.


This is a paragraph having only one css which is color. This paragraph have single css attribute i.e. color:red;

  1. 12
  2. 13

Learn Html

<a> tag

Anchor tag <a> .

An anchor tag is realy very useful. You provide a link using this tag.

Suppose you have 10 pages in your single web page. You can link them by using anchor tag. Anchor tag may be used as internal as well external linking . As you know that opening tag always contains attributes and respective values. There is a attribute named as 'href'. Href contains address of linked page. If you are giving internal linking , you will type # then id of linked element.

This is a link , goes to Writing html document page. This was a link. Learn how this works. Inside href value we put an id of a element. As user clicks this, browser scrolls page to particular element contains that id.

  1. 14
  2. 15

Learn Html

Contents

Creating a list with links in HTML.

So we are going to create a ordered list in this book. Have you heard , Killing two birds with one stone. We are learning as well creating an ordered list in this page.

A tag named ol is used to implement an ordered list. This ol tag contains li tag. This li tag and ol tag both have opening and closing tags. Your list item comes inside li tag.

So now look at our book index page. This page is created in html and having only two html tag first is ol and second is li.

CONTENTS

  1. Anchor Tag
  2. Abbreviation Tag
  3. Address Tag
  4. App Tag
  5. Area Tag
  6. Article Tag
  7. Aside Tag
  8. Audio Tag
  9. <b> Tag
  10. <base> Tag
  11. <bdi> Tag
  12. <bdo> Tag
  13. <bgsound> Tag
  14. <blink> Tag
  15. <blockquote> Tag
  16. <body> Tag
  17. <br> Tag
  18. <button> Tag

  1. 16
  2. 17

Learn Html

contents

  1. 18
  2. 19

Learn Html

Content

  1. 20
  2. 21

Learn Html

Content

  1. 22
  2. 23

Learn Html

Anchor in html

Anchor tag in html

<a> Tag is used to either external or internal linking on web page. At content page of this book you will see 100s of anchor tags. These tags are internal links.As soon as you click an anchored text it goes to linked source page.

Suppose you have an article on internet , you want to show that article to visitors. There are two possibility. First is , we will copy source article and create a copied source. And second is to link it. You want to link because that article is not written by you.

To uderstand anchor anatomy we will go to it's html code. As you know anchor tag is paired tag. In opening tag we write an attribute href. Href is a hyper reference to linked page. There is another attribute target. So , here we are going to create a link that will open in a new window of browser. Go to GOOGLE Home PAGE..

An HTML code behind this link:
<a href="https://www.google.com/" target="_blank" > Go to GOOGLE home Page..</a>

Anchor is really amazing. What google do. Google provide a lot of links to resouces ,that's it.

  1. 24
  2. 25

Learn Html

Anchor in html

Anchor tag in html

We can give anchor to an image. It is very simple. In case of anchor text you put the code of html image inside it.


Now this google link is looking more attractive. Rather than putting text in anchor we put image. Now this image click will work same as previous text link but it's appearence is modified.

Now see what html code we wrote to show this image.
<a href="https://www.google.com/" target="_blank"> <img alt="" border="0" width="200" data-original-height="74" data-original-width="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKhWAjuzYmPjmWfkwhmRKPvDE1q_rhDko0q8YaDsek57fdMpjfHl03FhKBlNCd1YbvZfn1HzFmuLRUAIdU8pJIG_cTs6w36F2R2ZV8PWkC0CDW7FdoP9zTVdbESSZ8ruF5LifZWBD_d81y4ik4R0cp7aLy6q_Wbgp8gWhnS1xhubPe1ou8943zDe-2A/s200/2.png"/></a>

By default all <a> tag contains underline. All new anchor links are blue colored bydefault. But you can modify the default property of anchor tag.

  1. 26
  2. 27

Learn Html

abbr in html

Abbreviation tag in html

First look at following .

  • FTP
  • NOC
  • VIP
  • html

An accronym is always important. As a new thing comes in this world it has a name. As soon as it become older it's short names become popular.

Browser collect these abbreviation for a structured html document. Abbr tag text is shown dotted underline. This is default property of this tag.

Although abbr tag is useful for browser translation system. When you move cursor on abbreviated text it will show full text written in title attribute.

See the html code behind abbreviated html.
<abbr title="hypertext markup language">html</abbr>

  1. 28
  2. 29

Learn Html

<Address> in html

Address tag in html

An address tag is more meaningful for search engines. Although you can write an address simply , but more standard form to write an address is to write using address tag.

Suppose you have various article on a html page. You can use this address tag in each article .

This tag is more important for seo point of view.

See how address tag looks on browser.

name : raj
mobile: 8094955151
address: gali no 420 , laal kuaa, firoj nagar , jaipur.

Html address also have some default properties. You can see in above address text is italic , address tag automatical make text italic .

  1. 30
  2. 31

Learn Html

<App> in html

App tag in html

<app> tag is depricated tag. It was used in html4.0 version. A java applet can run using this tag. We can embed video or audio using this app tag.

But in html 5 there is audio tag and video tag available. App tag is no more useful , you can use its latest alternate tags.

<Area> tag

An area tag is used inside map tag. And a map tag is associated with an image. We will discuss this tag in map tag.

<Article> tag

In this ebook each and every page is written within "article" tag. Article tag came with html5 standard.

You should use article tag if you are going to write an article, blog post or a news content. Although article element does not render other things on browser view. But this is meaningful for search engines like google. An article element contains semantic information , which is used by search engines and browsers.

<Aside> tag

An aside tag does not render anything special to browsers view. If you are writing a article you will use aside for content that is not directly related to that article. A search engine and browser use it for different purpose.
  1. 32
  2. 33

Learn Html

<Audio> in html

Audio tag in html

You can see below controls. This is audio tag controls. By using audio tag you can provide audio file interface to user. User can run audio file online.

So behind this sound play controls there are following html code.

<audio controls> <source src="horse.mp3" type="audio/mpeg"> </audio>

<b> Tag in HTML

In HTML <b> tag is used to make a text Bold. This b tag does not have any other purpose.

This text is written in b tag so this is dark compare to other text.

<base> Tag in HTML

In HTML <base> tag is realy very useful. Base tag is used to define a base address for that html document.

<base> tag always comes inside the head tag in html document.

By default any resource like address of image file is searched in same folder. If you wish to set different address using base tag , browser will search resource from that address.

  1. 34
  2. 35

Learn Html

<bdi> in html

Bdi tag in html

In html bdi tag stands for Bidirectional isolation. This tag is new in HTML5 document. Like most of tags this tag is paired tag. It contain opening and closing tags.

This bdi tag is concern with text interpretation by browser. It isolate text direction from surrounding text. Bdi tag does not change the physical view of text appearence. Actually this tag is used by browser for text internal representation.

<bdo> Tag in HTML

<Bdo> tag in html stands for bidrectional override . This tag is used to alter the direction of text flow. This tag alter the text or say override the text written inside it.

By default html document has left to right direction. But you want to show it from right to left. Then you have to use bdo tag with 'dir' attribute having value 'rtl'.

Suppose there is a sentense like:


You are the boss.


Now see how this will convert itself from right to left.


You are the boss.


This tag will render the text from right to left on html document.

  1. 36
  2. 37

Learn Html

<bgsound> in html

<bgsound> tag in html

<bgsound> tag is a deprecated tag. It was used in html4 version. If you want to use sound in html page then you can use html's audio tag.

  1. 38
  2. 39

Labels:

Comments

Post a Comment