HTML 5 Simple Tutorial Part 1

HTML5 Basics
Today We Are Going To Learn
HTML5 in Very Easy And Fast Way
Let’s Go Through It.
Here I am Going To Give Your All Tag
List And Their Used Which We Really
used in Real Life web Development.

HTML5 Topics 1
● Elements - E.g <a> Anchor Tag
● Attributes – E.g <a href=”value”> Attribute href
● Headings – E.g <h1> Heading Of Web Pages
● Paragraphs – E.g <p> Like Web Page Contents
● Styles – E.g <a style=”color:red”> Decorate Our Web Pages
● Formatting – E.g bold, <b> Text Formating
● Quotations – E.g Blockquotes <q> For Quotation Like author,address
● Comments – E.g Comments In Web Pages.
● Colors – E.g Colors in Web Pages for background, Text
● CSS – E.g Adding Our styles in Web Pages like coloring,Resizing
● Links – E.g Moving from one web page to other
● Images – E.g Display Logo, Banner In Our Web Pages

Elements
● Elements are used in our web pages to create a web pages
●
Elements Always had A opening tag and a closing tag and some times it had empty tag without closing
tag
E.g - <tagname>This is a Tag</tagname>
<tagname> = opening Tag
</tagname> = Closing Tag
<br/> = Empty Tag
Nested Tags
Nested Tag Means Elements of one tag inside another tag like this :
E.g -
<body> <h1>This is heading which is Nested Inside Body</h1></body>
Lower Case Letter
Always Try To use lower case Letter Tag For Best Practice.

Elements
Simple Web Page
<html>
<head>
<title>Title Of Our Web Page</title>
</head>
<body>
<h1>My First Web Page Heading</h1>
<p>Simple Tutorial For Start Learning
HTML By Super Coders </p>
</body>
</html>
Browser View
●

Elements
Some Popular Tags
● <html> - begining of webpage
● <head> - head of html page
● <body> - body of html page
● <p> - paragraph tag
● <h1> to <h6> - heading Tag
● <img> - image tag
● <ul> - unordered list tag
● <li> - list elements tag
● <ol> - ordered list tag
● <div> - diversion in web page
● <footer> - footer of web page
● <header> - header of web pages
● <aside> - sidebar for webpages
● <a> - anchor tag for linking web pages
● <form> - for forms
● <input> - for data input
● <script> - for js/vb
● <style> - for css styling
● <section> - for section in web pages
● <table> - for table
● <tr> - for table row
● <td> - for table cell
● <th> - for table heading
● <video> for video in web page
● <iframe> for showing content of
another web page in current page

Attributes
• All HTML tag had many attributes which we used to customize that tag
property like styling,linking etc.
E.g - <a href=”google.com”>Google</a>
- <p style=”color:red”>Red text</p>
(Here style is a css value attribute which we discuss in css part for just now it is just a tag)
•
•
•
• Attributes Always come in start tag of Elements.
E.g - <h1 id=”title”>Heading tag</h1>
- <h1 >= Start Tag
• We Can Also use multiple Attribute for any HTML tag like : -
E.g - <a href=”google.com” title=”google”>Google</a>
• Attributes Always Comes with name=”value” Pair

Attributes
Some Popular HTML Attributes
● alt – we use alt tag generally in img tag so searching engine or any screen read our image with alt
attribute. Alt attribute define the image.
E.g - <img src=”hello-html.png” alt=”hello html” />
● title – we use this attribute for showing hover small text which define the title of element.
E.g - <img src=”hello-html.png” alt=”hello html” title=”hello html” />
● style – we use style Attr for decorating our web page font,color,design,responsiveness.
E.g- <p style=”color:red”> Red Color Text </p>
● class - we use class attr for relating html elements generally to css or js to access that elements.
E.g - <p class=”para”> Simple Para With Class We change it later using css or js </p>
● id – Id defines the unique html element in web page simlary as for class we access id for css and js but
in class we select all same class element but not all same id element js select only first unique id.
E.g - <p id=”para”> Simple Para With Class We change it later using css or js </p>
● src - Src is used for defining the source path of img tag.
E.g - <p src=”simple.png”/>

Heading
● Heading are Our Web Pages Heading like Title Of
Our Web Page sub title of Web Pages
● Since we know that we can use p tag for text and
make it big as like but why we used h1 – h6 tag?
- Because searching engine read our web page
and then it knows its heading of web page for seo
friendly website we always have to follow these
simple rules always.

Heading
Heading Tags
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 1</h2>
<h3>Heading 1</h3>
<h4>Heading 1</h4>
<h5>Heading 1</h5>
<h6>Heading 1</h6>
</body>
</html>
Browser View

Paragraphs
Paragraphs are as we all known as simple
contents in your web pages like description, strory
or anything in our web pages.
Tag . <p>Hi I am a pragraph</p>

Paragraphs
Paragraph Demo
<html>
<body>
<p>
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text
ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make
a type specimen book. It has survived not only
five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged
</p>
</body>
</html>
Browser View

Styles
Style are used by using css propert values inline in html
tags.
E.g <tagname style=”property:value”></tagname>
Like :-
<p style=”color:red”>Red Text</p>
Here, color = property
red = value
(We will learn more about style in css section)

Styles
Sample Code
<html>
<body>
<p style=”font-size:15px;”>Hello
para</p>
<h1 style=”color:red”>Hello
Heading</h1>
<div style=”background-
color:red;color:black”>Hello i Am div with
Background Color</div>
</body>
</html>
Browser View

Styles
Some Popular Styling Properties : -
background-color:red;
color:black;
font-size:20px;
width:100px;
width:100%;
text-align:center,left,right,justify
Background:url(‘img.png’);

Formatting
● Formatting Means format the text appearance
like bold,italic,emphasis,subscript,superscript,del,mark
Some Tags for Formattings
<b> - for text bold
<small> - for small text
<sup> - superscript text
<del> - deleted text
<i> - italic text
<strong> - important text
<mark> - mark highlighted text

Formatting
Sample Code
<html>
<body>
<b>I am bold text</b>
<i>i am italic text</b>
<em>i am emphasis text</em>
<mark>i am marked text</mark>
<strong>i am important text</strong>
<p>Hello am para <sup>hello am superscript
insdie para</sup></p>
<p>hello am para <sub> hello am subscrript
inside para</sub></p>
</body>
</html>
Browser View

Quotation
Quotation is simply we used for address, authors,
blockquoted text.
Some Tags :-
<address> - for Address
<abbr> - for abbreviation
<blockquote> - for blockquotes text
<q> - for quoted text

Quotation
Sample Code
<html>
<body>
<address>This is address, simple
address</address>
<p>hello am a paragraph <q>and am a
quoted text inside paragraph</q></p>
<p>hello am paragraph
<blockquote>Hello am block quoted
text </blockquote></p>
</body>
</html>
Browser View

Comments
Comments are very important in programming
languages because what we write in your code
only we understand it but for understand other by
other developers its very tough task.
So we write comments after every block of code
so that any one can read our code and easily
modify or read it. Comments not execute in our
program code its just text which only view in
source codes.

Comments
How To Write Comments?
Code : -

Comments
Sample Code
<html>
<body>

<p>This is a simple paragraph
where only paragraph will display
in browser and comments in our
source codes.</p>

</body>
</html>
Browser View
Source View

Colors
Colors codes are written just like simple color name, rgb
values or Hex values
We can used colors in background,Text,border .
E.g of Color Codes : -
● Name – orange,green,red etc
● Hex values- #000000,#FFF,#FFFFFF
● Rgb values- rgb(0-255,0-255,0-255)
● Rgba – rgba(0-255,0-255,0-255,0-1)
(Rgba is a transpency color which show transparent colors)

Colors
● Rgb values - rgb values start from 0,0,0 to 255,255,255 where 0,0,0 is black and
255,255,255 and all colors lies between in this numbers.
Like : - rgb(150, 15, 15) is brown
● Hex values – hex values start from #000000 to #FFFFFF where we know that F is
15 last digit in Hex Format.
#000000 is black
#FFFFFF is white
● Rgba values – RGBA is same as rgb but it gives us transparent effect in colors we
can set transparency deep or light of by its last values which start from 0-1 .
E.g - rgba(0,0,0,0.5) is transparent black

Colors
Sample Codes
<html>
<body>
<div style="background:red">
<p style="color:#FFFFFF">This is a simple
paragraph inside Background color div.</p>
</div>
<div style="background:#37d570;padding: 15px;">
<p style="color:#FFFFFF;background: rgba(195,
45, 45, 0.66);">This is a simple paragraph inside
background div and paragraph had a transparent
background</p>
</div>
</body>
</html>
Browser view

Colors
Rgba Examle
<html>
<head>
<title>RGBA Example with image</title>
</head>
<body>
<div style="background: url('social.png');padding:
10px;background-size: cover;background-position:
0px 125px;">
<p style="color: #FFFFFF;background:
rgba(0,0,0,0.5);">I am a paragraph with transparent
Background</p>
</div>
</body>
</html>
Browser View

CSS
CSS Stand For Cascading stylesheet which is
used to design our webpages.
Css link with Our Web pages in 3 types :-
1.inline
2.internal css
3.external css

CSS
Inline CSS – we already used inline css in previous demo
like adding color in text and background.
E.g -
<div style="background: url('social.png');padding: 10px;background-size:
cover;background-position: 0px 125px;"></div>
<p style="color: #FFFFFF;background: rgba(0,0,0,0.5);"> </p>
This all are inline css because we write our css in html elements in its
style attributes.
<tagname style=”property:value”> = using inline css

CSS
Internal CSS – Internal css means using our css codes in head of your body
enclosing inside style tag where we define our elements css property
Code :
<html>
<head><style>
p {
color:red;
}
div {
background:green;
padding:10px;
}
</style></head>
<body>
<div>
<p>Inline Css Example</p>
</div>
</body>
</html>
Browser View

CSS
External css – In External css we create a another
file with .css external file then link our external css
file to our html pages it is best for use because we
dont need to write css over and over again jst
create a one single css file then link our html
pages.
In All HTML templates external css is used for
creating HTML themes which is easy to write and
used and code is REUSABLE.

CSS
Sample code – external.html
<html>
<head>

<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div>
<p>External Css Example</p>
</div>
</body>
</html>
Sample code – style.css
p {
color:white;
}
div {
background:orange;
padding:10px;
}

CSS
Browser View
(we will learn more about css in css tutorial )

Links
Links in HTML used to Move from one Page to Other, Move
from page bottom to Top or Top to Bottom, create image
link,text link to Visit Other pages.
Simple text link :-
<a href=”secondpage.html”>Visit Second Page</a>
Simple image link : -
<a href=”visit.html”><img src=”go.png”></a>

Links
Sample Code
<html>
<head>
</head>
<body>
<header id=”top”>I am the Header of page </header>
<br>
<a href=”second.html”>Second Page using Text Link</a>
<br>
<a href=”second.html”><img style=”width:100%” src=”social.png” alt=”second page using Image Link”></a>
<br>
<a href=”#bottom”>Go To Bottom of Page</a>
<br>
<div style=”height:5000px;background:green;”>
<p>Large Text Contents</p>
</div>
<br>
<a href=”#top”>Visit Top Of the Page</a>
<br>
<footer id=”bottom”>I am the Bottom Of Page</footer>
</body
</html>
(Here we use # to visit specifc id of elements # denotes for id and (.) dot denotes for class in all html,css,js )

Links
Second.html
<html>
<head>
<title>Second Page</title>
</head>
<body>
<h1>Welecome to second page</h1>
</body>
</html>

Links
Open a Page in New Tab
(using target=”_blank” attribute
in a tag)
sample :
<html>
<body>
<a href=”second.html”
target=”_blank”>Open a new tab
with second page</a>
</body>
</html>
View

Images
We use Image in HTML for displaying simple image ,logos,
banners, icons, background images,border images etc.
We can simple show images in HTML using
<img src=”path_of_image”/>
Or We Can Also use Background images
<div style=”background:url(‘social.png’);padding:10px;”>
I am a div with a background image
</div>

Images
Sample Code
<html>
<head>
<title>Images</title>
</head>
<body>
<p>This is simple image</p>
<img src="social.png" alt="social Image" title="social
image" style="width: 100%">
<p>This is image with background images</p>
<div style="width: 100%;height: 300px;background:
url('social.png');">I am a text inside a div</div>
</body>
</html>
Browser View

Some Extra Tips
● Always Put Your Css in inside <head> Tag.
● Always Put Your Script In Footer. So that page full loaded then js
do its works.
● Always use alt attribute for img tag because search engine read
the image via alt attribute.
● Standard HTML5 Web page contains head,body,section,header,
footer and main for your contents.
● Try to use less inline css and call css by externally.
● And Important Don’t forget to closed your tags

HTML 5 Simple Tutorial Part 1

Recommended

More Related Content

What's hot (20)

Similar to HTML 5 Simple Tutorial Part 1 (20)

Recently uploaded (20)

HTML 5 Simple Tutorial Part 1