Scribd
Upload
3 views

Basic-HTML-Full-Notes

This document provides an introduction to HTML, explaining its purpose as a markup language for web pages and detailing the structure of HTML files. It covers basic HTML tags, their usage, and examples of how to create simple web page elements like headings, paragraphs, and lists. Additionally, it includes lessons on more advanced topics such as forms, tables, and styling elements.

Uploaded by

prashantkrraj123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Basic-HTML-Full-Notes

This document provides an introduction to HTML, explaining its purpose as a markup language for web pages and detailing the structure of HTML files. It covers basic HTML tags, their usage, and examples of how to create simple web page elements like headings, paragraphs, and lists. Additionally, it includes lessons on more advanced topics such as forms, tables, and styling elements.

Uploaded by

prashantkrraj123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

Basic HTML

Lesson – 1
Hyper Text Markup Language (H.T.M.L)

What is HTML?
HTML is a language used for describing web pages.

 HTML stands for Hyper Text Markup Language.


 HTML is not a programming language, it is a markup language.
 A markup language is a set of markup tags.
 The markup tags describe how text should be displayed.

HTML Markup Tags


HTML markup tags are usually called HTML tags.

 HTML Tags are keywords surrounded by angle bracket like <html>.


 HTML Tags normally come in pairs like <b> and </b>.
 HTML first tag in a pair is the start tag, the second tag is the end tag.

What is an HTML File?


 An HTML file is a text file with HTML tags.
 An HTML file name must end with .htm or .html
 An HTML file is can be created using a simple text editor
 An HTML file is often called an HTML document or a Web Page.

Writing HTML
In this tutorial we use a plain text editor (like Notepad) to edit HTML. This is a good way to
learn HTML.

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

HTML Output- (Useful Tips)

You cannot be sure exactly how HTML will be displayed. Large screens, small screens, and
resized browser windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra lines in your
HTML code.

The browser will remove extra spaces and extra lines when the page is displayed. Any
numbers of lines count as one space, and any number of spaces count as one space.

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 2
Basic HTML Tags

If you look up the basic HTML tags in the reference below, you will see that the reference contains
additional information about tag attributes.

You will learn more about HTML tag attributes in the next chapter of this tutorial.

Tag Description
<html> Define an HTML document

<body> Define the document’s body

<h1> to <h6> Define header 1 to header 6

<p> Define a paragraph

<br> Inserts a single line break

<hr> Define a horizontal rule

A very basic HTML document


This example has a minimum of HTML tags. It demonstrates how HTML is displayed in a browser.

HTML Headings
Headings are defined with <h1> to <h6> tags. <h1> defines the largest heading. <h6> define the
smallest heading.

<h1> this is a heading </h1>


<h2> this is a heading </h2>
<h3> this is a heading </h3>

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

HTML Paragraphs
Paragraph is defined with the <p> tag.

<p> This is a paragraph </p>


<p> This is another paragraph </p>

HTML Line Breaks


Use the <br> tag if you want a line break (a new line) without starting a new paragraph.

<p> This is <br> a para <br> graph with line breaks </p>

Example of: Break <br> & Horizontal Line <hr> tag in


“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 3
Example of: Pre- formatted text <pre> tag in
“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

Example of: Text Effects in HTML like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in: Browser like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Center Tag in HTML” like as:-

Results in:- “Internet Explorer” like as:-

Example of: A Definition List in HTML” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 4
Example of:- Background color (bg color) in Notepad
Like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Background image <body background> tag in


“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explore” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 5
Example of: Font Size, Font Face & Font Color <font
size=, Face=, Color=> tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Bullets & Listing <ol>An Ordered, <li> List,


<ul>An Unordered tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Frameset column <frameset cols> tag in


“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Frameset Row <frameset row> tag in “Notepad”


like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 6
Example of: Image Linking <img src> tag in “Notepad”
like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

Example of: Hyperlink <a href> tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Form Designing <form action> tag in “Notepad”


like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 7
Example of: Form Designing <form action> tag in
“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Form Designing <form action> tag in “Notepad”


like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explore” like as:-

Example of: Form Designing <form action> tag in “Notepad”


like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explore” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 8
Example of: Simple Table <table> tag in “Notepad”
like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Table Border <table border>, Table row <tr>,


Table Data <td>, & Cell padding <cellpadding> tag in
“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Table Border <table border>, Table row <tr>,


Table Data <td>, & Cell padding <cellpadding> tag in
“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 9
Example of: Table Border & Caption <caption=> tag in
“Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

Example of: Table Spans Column & Rows <th colspan> &
<th rowspan> tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

Example of: Table with Listing tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Table Background & Images tag in “Notepad”


like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Lesson – 10
Example of: Button Inserting tag in “Notepad” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Example of: Form Fields Designing tag in “Notepad” like


as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815


Basic HTML

Results in:- “Internet Explorer” like as:-

www.dotnetinstitute.co.in Call us at - 011-4004 0815

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy