Notepad++ Editor
================
Download Link : [Link]
HTML <section>, <article> , <figure> tag
========================================
The <section> tag defines a section in a document.
The <article> tag specifies independent, self-contained content.
The <figure> tag specifies self-contained content, like illustrations, diagrams,
photos, code listings, etc.
ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<section>
<article>
<center>
<h2>Hollywoord Actor</h2>
<figure>
<img src="images/[Link]" width="200px"
height="200px"/>
<figcaption>Dwayne Johnson</figcaption>
</figure>
<p>
Dwayne Douglas Johnson (born May 2,
1972), also known by his ring name The Rock, is an American actor, businessman, and
professional wrestler. He is currently signed to WWE performing on the SmackDown
brand as a member of The Bloodline. Widely regarded as one of the greatest
professional wrestlers of all time,[5][6] he was integral to the development and
success of the World Wrestling Federation (WWF, now WWE) during the Attitude Era,
an industry boom period in the late 1990s and early 2000s. Johnson wrestled for the
WWF for eight years before pursuing an acting career. His films have grossed over
$3.5 billion in North America and over $10.5 billion worldwide,[7] making him one
of the world's highest-grossing and highest-paid actors.[8][9][10] He is a co-owner
of the United Football League, a professional American football league.[11][12][13]
He is also a member of the board of directors of TKO Group Holdings, the parent
company of UFC and WWE.
</p>
</center>
</article>
</section>
</body>
</html>
HTML <footer> tag
=================
The <footer> tag defines a footer for a document or section.
ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<footer>
<center>
<small>© All rights reserved, Designed By:-CompumaxLLC</small>
</center>
</footer>
</body>
</html>
HTML Frames
===========
To use frames on a web page we need to use <frameset> tag instead of <body> tag.
The <frameset> tag defines how to divide the window into frames.
The "rows" attribute of <frameset> tag defines horizontal frames.
The "cols" attribute of <frameset> tag defines vertical frames.
Each frame is indicated by <frame> tag and it defines which document should
be open into that place.
ex:1
-----
[Link]
---------
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<frameset cols="33%,*,33%">
<frame src="[Link]"/>
<frame src="[Link]"/>
<frame src="[Link]"fra/>
</frameset>
</html>
[Link]
------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="red">
</body>
</html>
[Link]
------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="green">
</body>
</html>
[Link]
------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="blue">
</body>
</html>
ex:2
-------
[Link]
----------
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<frameset rows="33%,*,33%">
<frame src="[Link]"/>
<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>
</html>
[Link]
-------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="orange">
</body>
</html>
[Link]
------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="white">
<center>
<img src="images/[Link]" width="180px" height="180px"/>
</center>
</body>
</html>
[Link]
------
<!DOCTYPE html>
<html>
<head>
<title>[Link]</title>
</head>
<body bgcolor="green">
</body>
</html>
HTML <iframe> tag
==================
It is used to specify inline frame.
A <iframe> tag/element is used to embedd a document into current HTML document.
ex:
---
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<iframe src="[Link] width="400px"
height="400px"/>
</body>
</html>
Steps to display Google Map on a web page
===========================================
step1:
-----
Goto Google Maps.
ex:
[Link]
step2:
-----
Type Ihub Talent in Google Map Search Box.
step3:
-------
Click on "menu" button.
step4:
------
Click on "share and embed Map"
step5:
-----
Click on "embeded a map" link.
step6:
-----
Click to "Copy Html".
step7:
-------
Paste the code inside <body> tag of [Link] file.
step8:
------
Check the output on browser window.
ex:
----
<!DOCTYPE html>
<html>
<head>
<title>MyPage!</title>
</head>
<body>
<iframe src="[Link]
1d3806.487656502131!2d78.44202777415968!3d17.436358401394536!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb919633f78bef%3A0xbb63515db9bc2eba!2siHub
%20Talent%20Info%20Systems%20-%20Testing%20Tools%2C%20Full%20Stack%20Java%2C
%20Python%20Training%20Institute%20in%20Hyderabad!5e0!3m2!1sen!2sin!
4v1694234739077!5m2!1sen!2sin"
width="100%" height="450" style="border:0;" allowfullscreen=""
loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>
HTML <audio> tag
=================
The HTML <audio> tag/element is used to play an audio file on a web page.
<audio> tag contains "controls" attribute adds audio control like
play,pause ,volume and etc.
The <source > tag/element allows us to specify alternate audio file which the
browser my choose.
HTML audio formats can be MP3,WAV,OGG and etc.
HTML Audio Media types are
File Formats Media Type
------------ ----------
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav
ex:
<!DOCTYPE html>
<html>
<head>
<title>IHUB</title>
</head>
<body>
<audio controls>
<source src="media/sajda.mp3" type="audio/mpeg">
</audio>
</body>
</html>
HTML <video> tag
=================
The <video> tag or element is used to embed video content in a document such as
movie clip,other video streams.
The <video> tag contains one or more <source> tag with different video source.
There are three supported video fromats in html are MP4,webM and OGG.
HTML video media types are
File format Media Type
----------- -----------
MP4 video/mp4
OGG video/ogg
and etc.
ex:
<!DOCTYPE html>
<html>
<head>
<title>IHUB</title>
</head>
<body>
<video controls width="200px" height="200px">
<source src="media/video.mp4" type="video/mp4">
</video>
</body>
</html>
Graphics in HTML5
=================
There are two ways to draw the graphics in HTML5.
1)SVG
2)CANVAS
1)SVG
-------
HTML5 uses SVG technology to derived graphics in HTML.
SVG stands for Scalable Vector Graphics.
SVG is used to draw two-dimensional vector based graphics in HTML.
World Wide Web Consortium (W3C) prefers SVG technology to draw the graphics in
HTML.
A <svg> tag/element is a container tag for vector graphics.
A <svg> tag/element contains various methods to display circle, rectangle,
polygon ,
graphic images and etc.
ex:1
----
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
</head>
<body>
<!-- container -->
<svg style="border:2px solid black" width="300px" height="300px">
</svg>
</body>
</html>
ex:2
---
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
</head>
<body>
<!-- container -->
<svg style="border:2px solid black" width="300px" height="300px">
<!-- circle -->
<circle cx="50px" cy="50px" r="50px"/>
</svg>
</body>
</html>
ex:3
-----
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
</head>
<body>
<!-- container -->
<svg style="border:2px solid black" width="300px" height="300px">
<!-- circle -->
<circle cx="150px" cy="150px" r="50px"
fill="#FFFF00" stroke="#FF0000" stroke-width="5px"/>
</svg>
</body>
</html>
ex:4
-------
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
</head>
<body>
<!-- container -->
<svg style="border:2px solid black" width="300px" height="300px">
<!-- reactangle -->
<rect x="50px" y="20px" width="200px" height="200px"
fill="green" stroke="blue" stroke-width="5px"/>
</svg>
</body>
</html>
ex:5
------
<!DOCTYPE html>
<html>
<head>
<title>INDEX</title>
</head>
<body>
<!-- container -->
<svg style="border:2px solid black" width="300px" height="300px">
<!-- polygon -->
<polygon points="10,78 100,10 250,190 160,210"
fill="yellow" stroke="red" stroke-width="5px"/>
</svg>
</body>
</html>
