.png)
.png)
_edited.jpg)
Before going to html lets talk about what is webpage and website? Each and every day we use internet, right? Now a particular document with some information on internet is called a webpage and a group of webpages somehow connected together in different ways called a website.
Let’s talk about html
Hyper Text Markup Language or simply HTML is a markup language to structure a webpage on browser. Hyper Text refers to a text that consists of a link of another text. For Example, In a webpage when you click on a particular a word or text, you are redirected to other site or you are on the same page but different location that word or text is nothing but a Hyper Text. And just like our regular language a Markup Language refers to certain rules that everyone follow when writing html. For browser this rules act like a data. For example, when to underline a word or when to link a word to different page.
A simple HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
This is my first
</body>
</html><!DOCTYPE html> declaration defines that this document is an HTML5 document
<html> element is the root element of an HTML page
<head> element contains meta information about the HTML page
<title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
<body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
HTML Elements
Before discuss about html elements lets see what is html tag. A html tag is keyword enclosed by angle brackets.
Example:
<h1>This is a heading</h1><h1> is called start tag
</h1> is called end tag
An element consist of start tag, some text and end tag.
Example:
<h1>This is a heading</h1>There are 100+ tags in HTML. In this blog we will learn about:
Heading tags
Paragraph tags
Text Formatting tags
List tags
Headings Tags
<h1> to <h6> tags are used to give a heading on HTML document.
<h1> defines the highest level heading and
<h6> defines the lowest level heading
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>Output:
Paragraph tags
<p>…</p> is used as paragraph tag in HTML.
Example 1:
<p>This is a paragraph.</p>Output:
Example 2:
<p>This is paragraph Line 1.
This is paragraph Line 2.
This is paragraph Line 3.</p>Output:
For one block paragraph <p> works fine (ex. 1) but for multiline paragraphs just like Ex. 2 <p> it will not work properly. What we will do now? We need a line break, right? So, for line break we have <br> tag. For br no need to give close tag. Its is called empty tag. Its useful for writing poem or address.
Example:
<p>This is paragraph Line 1.<br>
This is paragraph Line 2.<br>
This is paragraph Line 3.</p>Output:
<pre>…</pre> tag is used for preformatted text its more reliable for poem writing in HTML.
Example:
<pre>Line 1
Line 2
Line 3</pre>Output:
Text Formatting Tags
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting Tags</title>
</head>
<body>
<b>Bold Text</b><br>
<i>Italic Text</i><br>
<u>Underlined Text</u><br>
<strong>Important Text</strong><br>
<em>Emphasized Text</em><br>
<big>one larger than others</big><br>
<small>one smaller than others</small><br>
It is <sub>Subscripted Text</sub><br>
It is <sup>Superscripted Text</sup><br>
<ins>Inserted Text</ins><br>
<del>Deleted Text</del><br>
<mark>Marked Text</mark><br>
<strike>Strikethrough Text</strike><br>
<kbd>User Keyboard Input Text</kbd><br>
<code>Computer Code</code>
</body>
</html>
Output:
List tags
List tags types:
Ordered list
Unordered list
Description list
Ordered List(<ol> tag)
<ol type="i">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>type:
'i' -- defines lower roman numerical
'I' -- defines upper roman numerical
'a' -- defines lower alphabets
'A' -- defines upper alphabets
'1' -- defines numbers
Note: </li> stands for list items
Output:
Unordered List(<ul> tag)
<ul type="circle">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>Type: disc | circle | square
Output:
Description List(<dl> tag)
<dl>
<dt>List 1</dt>
<dd>item 1</dd>
<dd>item 1</dd>
<dt>List 2</dt>
<dd>item 1</dd>
<dd>item 1</dd>
</dl>
Comments