Learn HTML 5 & Experiment with Codes Using Notepad
Web
development
Hi
friends this is Rakesh.m.r welcome to rakeshprotech channel so friends I
request you guys to subscribe my channel and like and share for more people in
fb, whatsapp and more.....................................................
So
i am going to teach a great concept of technology connecting each other that’s
an web development so if learn this you will have the power of web development
and u can also make a website like facebook , twitter and more so knowledge is
power don’t forget........just follow me.................
Html is
first step to web development so development of this html tags is now called as
Html5 which
is the fifth development tags like you have heard that first c was developed
later c++ and more like that html has came to 5th stage as html5
So Today we
learn
Html5
Hyper
text markup language
HTML5
Tutorial
What is
HTML?
HTML is the
standard markup language for creating Web pages.
HTML stands
for Hyper Text Markup Language
HTML
describes the structure of Web pages using markup
HTML
elements are the building blocks of HTML pages
HTML
elements are represented by tags
HTML tags
label pieces of content such as "heading", "paragraph",
"table", and so on
Browsers do
not display the HTML tags, but use them to render the content of the page
HTML
Tags
HTML tags
are element names surrounded by angle brackets:
<tagname>content
goes here...</tagname>
HTML tags
normally come in pairs like <p> and </p>
The first
tag in a pair is the start tag, the second tag is the end tag
The end tag
is written like the start tag, but with a forward slash inserted before the tag
name
HTML
Headings
HTML
headings are defined with the <h1> to <h6> tags.
<h1>
defines the most important heading. <h6> defines the least important
heading:
<!DOCTYPE
html>
<html>
<body>
<h1>This
is heading 1</h1>
<h2>This
is heading 2</h2>
<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>
HTML
Elements
HTML
Elements
An HTML
element usually consists of a start tag and end tag, with the content inserted
in between:
<tagname>Content
goes here...</tagname>
The HTML
element is everything from the start tag to the end tag:
<p>My
first paragraph.</p>
HTML
Horizontal Rules
The
<hr> tag defines arthematic break in an HTML page, and is most often
displayed as a horizontal rule.
The
<hr> element is used to separate content (or define a change) in an HTML
page:
Example
<!DOCTYPE
html>
<html>
<body>
<h1>This
is heading 1</h1>
<p>This
is some text.</p>
<hr>
<h2>This
is heading 2</h2>
<p>This
is some other text.</p>
<hr>
<h2>This
is heading 2</h2>
<p>This
is some other text.</p>
</body>
</html>
HTML
Paragraphs
The HTML
<p> element defines a paragraph:
<!DOCTYPE
html>
<html>
<body>
<p>This
is a paragraph. </p>
<p>This
is a paragraph.</p>
<p>This
is a paragraph.</p>
</body>
</html>
HTML Display
You cannot
be sure how HTML will be displayed.
Large or
small screens, and resized 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 any extra spaces and extra lines when the page is displayed:
<!DOCTYPE
html>
<html>
<body>
<p>
This
paragraph
contains a
lot of lines
in the
source code,
but the
browser
ignores it.
</p>
<p>
This
paragraph
contains a lot of spaces
in the
source code,
but the browser
ignores it.
</p>
<p>
The number
of lines in a paragraph depends on the size of the browser window. If you
resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html>
HTML
Styles
The HTML
Style Attribute
Setting the
style of an HTML element, can be done with the style attribute.
The HTML
style attribute has the following syntax:
<tagname
style="property:value;">
The property
is a CSS property. The value is a CSS value.
HTML
Background Color
The
background-color property defines the background color for an HTML element.
<!DOCTYPE
html>
<html>
<body
style="background-color:powderblue;">
<h1>This
is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
HTML
Text Color
The color
property defines the text color for an HTML element:
Example
<!DOCTYPE
html>
<html>
<body>
<h1
style="color:blue;background-color:lightpink;">This is a
heading</h1>
<p
style="color:red;background-color:blue;">This is a
paragraph.</p>
</body>
</html>
<!DOCTYPE
html>
<html>
<body>
<h2
style="background-color:red;color:yellow;">
Background-color
set by using red
</h2>
<h2
style="background-color:orange">
Background-color
set by using orange
</h2>
<h2
style="background-color:yellow;color:red;">
Background-color
set by using yellow
</h2>
<h2
style="background-color:blue;color:white">
Background-color
set by using blue
</h2>
<h2
style="background-color:cyan">
Background-color
set by using cyan
</h2>
</body>
</html>
HTML
Fonts
The font-family
property defines the font to be used for an HTML element:
<!DOCTYPE
html>
<html>
<body>
<h1
style="font-family:verdana;">This is a heading</h1>
<p
style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE
html>
<html>
<body>
<h1
style="font-family:Small
Fonts;background-color:orange;color:green;">This is a
heading</h1>
<p
style="font-family:corbel;">This is a paragraph.</p>
</body>
</html>
HTML
Text Size
The
font-size property defines the text size for an HTML element:
<!DOCTYPE
html>
<html>
<body>
<h1
style="font-size:300%;">This is a heading</h1>
<p
style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
<!DOCTYPE
html>
<html>
<body>
<h1
style="font-size:1cm;background-color:cyan;color:green;">This is a
heading</h1>
<p
style="font-size:5em;">This is a paragraph.</p>
</body>
</html>
HTML
Text Formatting
HTML
Formatting Elements
In the
previous chapter, you learned about the HTML style attribute.
HTML also
defines special elements for defining text with a special meaning.
HTML uses
elements like <b> and <i> for formatting output, like bold or
italic text.
Formatting
elements were designed to display special types of text:
<b> -
Bold text
<strong>
- Important text
<i> -
Italic text
<em> -
Emphasized text
<mark>
- Marked text
<small>
- Small text
<del>
- Deleted text
<ins>
- Inserted text
<sub>
- Subscript text
<sup>
- Superscript text
HTML
<b> and <strong> Elements
The HTML
<b> element defines bold text, without any extra importance.
The HTML
<strong> element defines strong text, with added semantic
"strong" importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><strong>This
text is strong.</strong></p>
</body>
</html>
HTML
<i> and <em> Elements
The HTML
<i> element defines italic text, without any extra importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><i>This
text is italic.</i></p>
</body>
</html>
The HTML
<em> element defines emphasized text, with added semantic importance.
<!DOCTYPE
html>
<html>
<body>
<p>This
text is normal.</p>
<p><em>This
text is emphasized.</em></p>
</body>
</html>
HTML
<small> Element
The HTML
<small> element defines smaller text:
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
<small>Small</small> Formatting</h2>
</body>
</html>
HTML
<mark> Element
The HTML
<mark> element defines marked or highlighted text:
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
<mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML
<del> Element
The HTML
<del> element defines deleted (removed) text.
<!DOCTYPE
html>
<html>
<body>
<p>The
del element represents deleted (removed) text.</p>
<p>My
favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML
<ins> Element
The HTML
<ins> element defines inserted (added) text.
<!DOCTYPE
html>
<html>
<body>
<p>The
ins element represent inserted (added) text.</p>
<p>My
favorite <ins>color</ins> is red.</p>
</body>
</html>
HTML
<sub> Element
The HTML
<sub> element defines subscripted text.
<!DOCTYPE
html>
<html>
<body>
<p>This
is <sub>subscripted</sub> text.</p>
</body>
</html>
HTML
<sup> Element
The HTML
<sup> element defines superscripted text.
<!DOCTYPE
html>
<html>
<body>
<p>This
is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML
<q> for Short Quotations
The HTML
<q> element defines a short quotation.
Browsers
usually insert quotation marks around the <q> element.
<!DOCTYPE
html>
<html>
<body>
<p>Browsers
usually insert quotation marks around the q element.</p>
<p>WWF's
goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
</body>
</html>
HTML
<abbr> for Abbreviations(Short forms)
The HTML
<abbr> element defines an abbreviation or an acronym.
Marking
abbreviations can give useful information to browsers, translation systems and search-engines.
<!DOCTYPE
html>
<html>
<body>
<p>The
<abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>
<p>Marking
up abbreviations can give useful information to browsers, translation systems
and search-engines.</p>
</body>
</html>
HTML
<address> for Contact Information
The HTML
<address> element defines contact information (author/owner) of a
document or an article.
The
<address> element is usually displayed in italic. Most browsers will add
a line break before and after the element.
<!DOCTYPE
html>
<html>
<body>
<p>The
HTML address element defines contact information (author/owner) of a document
or article.</p>
<address>
Written by
John Doe.<br>
Visit us
at:<br>
Example.com<br>
Box 564,
Disneyland<br>
USA
</address>
</body>
</html>
HTML Colors
In HTML, a
color can be specified by using a color name, an RGB value, or a HEX value.
<!DOCTYPE
html>
<html>
<body>
<h2
style="background-color:red">
Background-color
set by using red
</h2>
<h2
style="background-color:orange">
Background-color
set by using orange
</h2>
<h2
style="background-color:yellow">
Background-color
set by using yellow
</h2>
<h2
style="background-color:blue;color:white">
Background-color
set by using blue
</h2>
<h2
style="background-color:cyan">
Background-color
set by using cyan
</h2>
</body>
</html>
RGB Value
In HTML, a
color can also be specified as an RGB value, using this formula: rgb(red,
green, blue)
Each
parameter (red, green, and blue) defines the intensity of the color between 0
and 255.
For example,
rgb(255,0,0) is displayed as red, because red is set to its highest value (255)
and the others are set to 0.
To display
the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
To display
the color white, all color parameters must be set to 255, like this:
rgb(255,255,255).
<!DOCTYPE
html>
<html>
<body>
<h2
style="background-color:rgb(255,0,0)">
Background-color
set by using rgb(255,0,0)
</h2>
<h2
style="background-color:rgb(0,255,0)">
Background-color
set by using rgb(0,255,0)
</h2>
<h2
style="background-color:rgb(0,0,255)">
Background-color
set by using rgb(0,0,255)
</h2>
<h2
style="background-color:rgb(255,255,0)">
Background-color
set by using rgb(255,255,0)
</h2>
<h2
style="background-color:rgb(255,0,255)">
Background-color
set by using rgb(255,0,255)
</h2>
<h2
style="background-color:rgb(0,255,255)">
Background-color
set by using rgb(0,255,255)
</h2>
</body>
</html>
Shades of
gray are often defined using equal values for all the 3 light sources:
Example
<!DOCTYPE
html>
<html>
<body>
<h2
style="background-color:rgb(0,0,0);color:white">
Background-color
set by using rgb(0,0,0)
</h2>
<h2
style="background-color:rgb(90,90,90);color:white">
Background-color
set by using rgb(90,90,90)
</h2>
<h2
style="background-color:rgb(128,128,128);color:white">
Background-color
set by using rgb(128,128,128)
</h2>
<h2
style="background-color:rgb(200,200,200);color:white">
Background-color
set by using rgb(200,200,200)
</h2>
<h2
style="background-color:rgb(255,255,255);">
Background-color
set by using rgb(255,255,255)
</h2>
</body>
</html>
HTML Links
HTML Links -
Hyperlinks
HTML links
are hyperlinks.
You can
click on a link and jump to another document.
When you
move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links -
Syntax
In HTML,
links are defined with the <a> tag:
<a
href="url">link text</a>
<!DOCTYPE
html>
<html>
<body>
<p><a
href="rakeshprotech.blogspot.in">Visit
our HTML tutorial</a></p>
</body>
</html>
HTML Images
HTML Images
Syntax
In HTML,
images are defined with the <img> tag.
The
<img> tag is empty, it contains attributes only, and does not have a
closing tag.
The src
attribute specifies the URL (web address) of the image:
<img
src="url" alt="some_text"
style="width:width;height:height;">
Example
<!DOCTYPE
html>
<html>
<body>
<h2>Beautiful
Red Flower</h2>
<img
src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg"
alt="Flower " style="width:320px;height:300px;">
</body>
</html>
The alt
Attribute
The alt
attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or
if the user uses a screen reader).
If a browser
cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE
html>
<html>
<body>
<p>If
a browser cannot find an image, it will display the alternate text:</p>
<img
src="wrongname.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
</body>
</html>
<%@ Page
Language="C#" %>
<!DOCTYPE
html>
<html>
<body>
<p>If
a browser cannot find an image, it will display the alternate text:</p>
<img
src="http://i928.photobucket.com/albums/ad128/supportsrvice/scrap/hello/Hello-purple-flower.gif"
alt="HTML5 Icon" style="width:228px;height:228px;">
</body>
</html>
Image Size -
Width and Height
You can use
the style attribute to specify the width and height of an image.
The values
are specified in pixels (use px after the value):
<!DOCTYPE
html>
<html>
<body>
<img
src="http://www.animatedimages.org/data/media/59/animated-doll-image-0035.gif"
alt="HTML5 Icon" style="width:300px;height:300px;">
</body>
</html>
<%@ Page
Language="C#" %>
<!DOCTYPE
html>
<html>
<body>
<img
src="https://media.giphy.com/media/j3uyvaaslUxNe/giphy.gif"
alt="HTML5 Icon" style="width:400px;height:300px;">
</body>
</html>
<%@ Page
Language="C#" %>
<!DOCTYPE
html>
<html>
<body>
<img
src="http://www.pbh2.com/wordpress/wp-content/uploads/2013/03/cute-puppy-gifs-cute.gif"
alt="HTML5 Icon" style="width:250px;height:200px;">
</body>
</html>
<%@ Page
Language="C#" %>
<!DOCTYPE
html>
<html>
<body>
<marquee><img
src="http://www.pbh2.com/wordpress/wp-content/uploads/2013/03/cute-puppy-gifs-cute.gif"
alt="HTML5 Icon"
style="width:100px;height:100px;"></marquee>
<marquee><img
src="https://i.ytimg.com/vi/mRf3-JkwqfU/hqdefault.jpg"
alt="HTML5 Icon"
style="width:100px;height:100px;"></marquee>
<marquee><h1
style="color:Maroon;">Dog </h1></marquee>
</body>
</html>
HTML Tables
Defining an
HTML Table
An HTML
table is defined with the <table> tag.
Each table
row is defined with the <tr> tag. A table header is defined with the
<th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.
<!DOCTYPE
html>
<html>
<body>
<table
style="width:70%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
HTML Lists
<!DOCTYPE
html>
<html>
<body>
<h2>An
Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An
Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Unordered
HTML List
An unordered
list starts with the <ul> tag. Each list item starts with the <li>
tag.
The list
items will be marked with bullets (small black circles) by default:
<!DOCTYPE
html>
<html>
<body>
<h2>An
unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML
List
An ordered
list starts with the <ol> tag. Each list item starts with the <li>
tag.
The list
items will be marked with numbers by default:
<!DOCTYPE
html>
<html>
<body>
<h2>An
ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Example -
Circle
<!DOCTYPE
html>
<html>
<body>
<h2>Unordered
List with Circle Bullets</h2>
<ul
style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
<%@ Page
Language="C#" %>
<!DOCTYPE
html>
<html>
<body>
<h2>ordered
List with Circle Bullets</h2>
<ol
style="list-style-type:decimal-leading-zero">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol
style="list-style-type:upper-latin">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
THIS
COMPLETES HTML5
SO OUR NEXT
CONCEPT IS ALL ABOUT
A CREATIVE
COLORS
THATS CALLED
CSS
SO
DON’T FORGET TO
SUBSCRIBE
,LIKE AND SHARE
Comments
Post a Comment