Learn HTML
Do you know With HTML websites
created easily? This tutorial guides how to create website using HTML. HTML is
simple and easy to learn. Let’s start learning HTML from this Guide, you all
will enjoy this content, everyone should learn HTML including teachers,
students, business professionals as well as SEO professionals because HTML
coding helps to do easy on-page optimization.
created easily? This tutorial guides how to create website using HTML. HTML is
simple and easy to learn. Let’s start learning HTML from this Guide, you all
will enjoy this content, everyone should learn HTML including teachers,
students, business professionals as well as SEO professionals because HTML
coding helps to do easy on-page optimization.
What is HTML?
·
HTML stands for hypertext markup language
HTML stands for hypertext markup language
·
HTML completely describes the website structure
using markup
HTML completely describes the website structure
using markup
·
HTML elements responsible to build blocks of
HTML pages
HTML elements responsible to build blocks of
HTML pages
·
HTML elements use tags
HTML elements use tags
·
HTML tags include – h1, p, h2, table, div and so
on
HTML tags include – h1, p, h2, table, div and so
on
·
Browser use HTML tags to show the information
contains to them
Browser use HTML tags to show the information
contains to them
A simple HTML Document – Complete HTML concept
<!DOCTYPE html> – Describe
Type of Document
<html> HTML stands for Hyper Text markup Language,
describe the root element
<head> All on page coding done in html attribute, It is
the container of metadata
<title>Page Title</title> It consists title of the business, The title
characters are of 60 characters
</head> Closing of html attribute
<body> It contains all the content as well as JavaScript
coding
Type of Document
<html> HTML stands for Hyper Text markup Language,
describe the root element
<head> All on page coding done in html attribute, It is
the container of metadata
<title>Page Title</title> It consists title of the business, The title
characters are of 60 characters
</head> Closing of html attribute
<body> It contains all the content as well as JavaScript
coding
<h1>This is a
Heading</h1> h1 is for large heading
<p>This is a
paragraph.</p> This P
attribute is for the paragraph
</body> Closing the body tag
</html> Finally the HTML closed
Note: Metadata
typically define the documents title, character set, description, keywords, styles,
links, scripts, and other Meta information.
typically define the documents title, character set, description, keywords, styles,
links, scripts, and other Meta information.
HTML Tip – How to View HTML Source
Use Keyboard keys
ctrl+u
Output – Copy
this content to notepad, save it with any name.txt, and run in the browser –
See results.
this content to notepad, save it with any name.txt, and run in the browser –
See results.
HTML Editors
There are standard HTML editors for HTML coding, but notepad
is used to do HTML coding, learn how to use notepad for HTML coding.
is used to do HTML coding, learn how to use notepad for HTML coding.
Push window symbol in keyword with “R”
key – Notepad opens
key – Notepad opens
Another way – Using mouse – Click on
start button, Programs, Accessories, open notepad.
start button, Programs, Accessories, open notepad.
Write
some HTML code mentioned above in the notepad.
some HTML code mentioned above in the notepad.
Save
the notepad with index.html or any other name.
the notepad with index.html or any other name.
Open
the saved notepad page with open with button through browser.
the saved notepad page with open with button through browser.
HTML Elements
The html element consists of
start tag and end tag
start tag and end tag
<nameoftag>Content Comes
here</nameoftag>
here</nameoftag>
|
StartTAG
|
EndTag
|
|
<p>
|
</p>
|
|
<table>
|
</table>
|
|
<h1>
|
</h1>
|
|
<br>
|
</br>
|
|
<li>
|
</li>
|
|
<address>
|
</address>
|
|
<blockquote>
|
</blockquote>
|
|
<strong>
|
</strong>
|
HTML Attributes
Provide additional information about HTML elements
Attributes are always specified in start tag
Examples
1.
Lang
Attribute
Lang
Attribute
<!DOCTYPE
html>
html>
<html
lang=”en-US”>
lang=”en-US”>
<body>
2.
Title
Attribute
Title
Attribute
<p
title=”I’m Learning SEO”>
title=”I’m Learning SEO”>
I am Learning HTML
and SEO
and SEO
</p>
3.
The
href Attribute
The
href Attribute
<a
href=”http://www.udmideas.com”>Learn Digital Marketing</a>
href=”http://www.udmideas.com”>Learn Digital Marketing</a>
4.
Size
Attributes
Size
Attributes
<img
src=”udmideas.jpg” width=”104″ height=”142″>
src=”udmideas.jpg” width=”104″ height=”142″>
5.
The
alt Attribute
The
alt Attribute
<img
src=”udmideas.jpg” alt=”UDMIDEAS – Learn SEO”
width=”104″ height=”142″>
src=”udmideas.jpg” alt=”UDMIDEAS – Learn SEO”
width=”104″ height=”142″>
NOTE: Images are not crawled by search
engines boots or crawlers, so to get image visibility through crawler’s ALT
attribute is used
engines boots or crawlers, so to get image visibility through crawler’s ALT
attribute is used
HTML Headings
The headings are important part
of html documents. Search engines crawlers and boots analyze the web page
content easily if headings provided in HTML documents.
of html documents. Search engines crawlers and boots analyze the web page
content easily if headings provided in HTML documents.
<!DOCTYPE html>
<html>
<head>
<title>Heading example</title>
</head>
<body>
<h1>This is heading 1</h1>
<hr>
<h2>This is heading 2</h2>
<hr>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Note: hr tag for horizontal rules, See the output –
Run this program
Run this program
