Code is copied!
HTML 5
How to Build Website
To create a website we require:
Html is said to be building block of webpage,because the content and structure of webpage is created by HTML
only
Css is used to style our HTML website,and make HTML look beautiful
JAVASCRIPT is used to add functionality in webpages,like adding actions to the button when it is
clicked,triggering a pop-up window,create a dropdown menu
< h1>-Defines heading of a page
< p>- Defines paragraph of a page
ABOUT HTML
It is used for creating websites and content related to it
Its full form is HyperText Markup language
It is considered to be as mother language of the web because all the web pages are created by using html
only
It consist of series of tags or elements to define the various components and structure of a web page such
as
headings,paragraphs,images,videos, etc.
Structure of HTML
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
</body>
</html>
Let us discuss each tag one by one briefly:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
<body>
</body>
</html>
Document Type Declaration
This is an optional statement written at the beginning of an HTML document
It specifies which version of the HTML document is written in .
Example:
<!DOCTYPE html>
<!DOCTYPE html>
Head Tag(< head>)
This head tag in html is used to define head section of the html document
It is a container that to store information related to the HTML document such as title of the page and other information that won’t be visible on the page itself
The head tag contains other head elements such as < title>,< meta>,<
link>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<!DOCTYPE html>
<html>
<head>
</head>
Title Tag(< title>)
< title> tag is used to define title of our webpage,and is must be text only
It is placed between the opening head tag ‘< head>’ and closing < head> tag
It is displayed in the title bar of browser window
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
</head>
</html>
Meta Tag(< meta>)
It is an html tag that is used to provide metadata of a webpage.
It is also placed inside the head section and it wont be visible on the actual webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
</html>
Body Tag(< body>)
This tag is used to define the main content of an HTML document.
And is placed within the ‘< html>’ tag only
The content inside this tag will be displayed on the web page
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
Heading Tags(< h1>,< h2>,< h3>,< h4>,)
It is used to define heading of a page
It consists of six levels of headings ,which is represented by the heading tags ‘h1’ through ‘h6’
‘h1’ tag is considered to be the main heading tag of the webpage which is biggest in size,other heading tags are used as subheadings and headings with decreasing importance
‘h6’ tag is used for lowest of headings or subheadings
Headings helps to organize and improve readability for users to understand
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>
</body>
</html>
Paragraph Tag(< p>)
This tag is used to define the paragraph of the html document
It has both closing and opening tag and data enclosed within these opening and closing tags will be displayed as separate paragraph
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
</body>
</html>
Image Tag(< img>)
This ‘img’ tag in html is used to define images on a web page
It is self closing tag,means there is an opening tag only not any closing tag
This ‘img’ tag has two main attributes:
- src
- alt
‘src’-This attribute is used to specify the path to the image file.
‘alt’-This attribute contains the description of the image,which will be displayed when the image cannot be able to load
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
<img src="" alt="This is image example">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
<img src="" alt="This is image example">
</body>
</html>
Anchor tag(< a>)
It is used to create clickable links on a webpage,that will allow user to move from page to another
It requires a mandotory ‘href’ attribute,which specifies the URL of the page or file that the link will lead to
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
<a href="" >Click here</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example.It contains some texts that will be displayed in the browser</p>
<a href="" >Click here</a>
</body>
</html>
Styling tag(< a>)
Html provides various tags to add styling:
<b> Tag
This tag is used to make the text bold
<i> Tag
This tag is used to make the text italic
<u> Tag
This tag is used to underline the text
<strong> Tag
This tag makes the text strong,which means bold
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p><b>This is bold text</b></p>
<p><i>This is italic text</i></p>
<p><u>This is Underlined text</u></p>
<p><strong>This is strong text</strong></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p><b>This is bold text</b></p>
<p><i>This is italic text</i></p>
<p><u>This is Underlined text</u></p>
<p><strong>This is strong text</strong></p>
</body>
</html>
Br tag(< br>)
Br is used to break the line and enters into the new line
It is a self closing tag which means there is an opening tag only no closing tag
It can create a line break within a heading,paragraph etc
It is often used in writing poems,addresses
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
</body>
</html>
hr tag(< hr>)
It stands for ‘horizontal rule’.
It is a self closing tag which means there is an opening tag only no closing tag
It is used to create a horizontal line in the webpage,act as a divider between sections of content
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
<hr>
<h1>This is heading2</h1>
<p>This is an paragraph example2.</p>
<a href="">This is an anchor tag.</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
<hr>
<h1>This is heading2</h1>
<p>This is an paragraph example2.</p>
<a href="">This is an anchor tag.</a>
</body>
</html>
div tag(< div>)
It is just like a empty container used to make divisions or sections of content in the webpage
It can be used to style and manipulate multiple elements at once
It has both opening (div) and closing (/div) tag and it is also mandatory to close the tag
It is the most usable tag as it help us to separate our data in the web page
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<div>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
</div>
<hr>
<div>
<h1>This is heading2</h1>
<p>This is an paragraph example2.</p>
<a href="">This is an anchor tag.</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<div>
<h1>This is heading1</h1>
<p>This is an paragraph example. <br>It contains some texts that will be displayed in the browser</p>
</div>
<hr>
<div>
<h1>This is heading2</h1>
<p>This is an paragraph example2.</p>
<a href="">This is an anchor tag.</a>
</div>
</body>
</html>
table tag(< table>)
< table> tag in html is used to create table in a web
It has both opening and closing tags
There are some other tags also related to table tag:
‘<tr>’
This tag is used to create table row.And it should be placed inside the < table> tag
‘<td>’
This tag is used to create table data cell and is placed inside < tr> tag,by default they are left aligned
‘<th>’
This tag is commonly used to create a table header cell.It can be used inside < tr> tag or < thead> tag.By default, < th> tag are centered and bold
‘<thead>’
This tag is used to group the table header content(< th>) in a separate section,basically it is used as table heading in a table
‘<tbody>’
This tag is used to group the table body content in a separate section
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
Attributes of a table
1. Border-Specifies width of the border and its cell
2. Cell padding-Specifies amount of space between content of each cell and its border
3. Cell spacing-Specifies amount of space between the cells
4. Width-Specifies the width of the table in the form of pixels or percentage
5. Height-Specifies the height of the table in the form of pixels or percentage
<!DOCTYPE html>
<html>
<head>
<title>My First website</title>
<meta name="description" content="This is a description of my first website">
</head>
<body>
<table>
<thead>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
<td>Row 3, Column 3</td>
</tr>
</tbody>
</table>
</body>
</html>
list tag
In html there are two main types of lists:
- Ordered lists
- Unordered lists
Unordered list(< ul>)
It is a list of items that are not numbered or ordered in a specific way
Here each item in the list is typically preceded by a bullet or some type of marker
Ul tag(< ul>)
This tag defines start of the unordered list
li tag(< li>)
Each item in the list is represented by this tag
The ‘ul’ tag also include attributes that can be used to customize the behaviour the unordered list
type- This attribute specifies the type of bullet point or marker to be used for list items
Example:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered list(< ol>)
It is a list of items where item is numbered or letterd in a specific order
ol tag(< ol>)
This tag defines start of the ordered list
li tag(< li>)
Each item in the list is represented by this tag
By default,ordered lists in Html are numbered with Arabic numerals(1,2,3,etc).
Attributes of ordered lists are:
1.‘type’- This allows us to change the numbering style,by default it is set to Arabic numerals (1, 2, 3, etc.)
2.’start’-It specify the starting value for the first item in the list,by default it is set to ‘1’
Example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>