- So, take a moment to relax, maybe grab a cup of coffee, and enjoy the process of creating something awesome with HTML. + So, take a moment to relax, maybe grab a cup of coffee, and enjoy the process of creating something awesome with HTML.
* It's HTML-only page, NO fancy graphics. * @@ -91,7 +91,7 @@
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.
- +Defines that this document is an HTML5 document.All HTML documents must start with a document type declaration.
Example :
- <header >
+ <header >
<hgroup >
<h2 >
- HTML examlpe page
+ HTML example page
</h2 >
<p >
Posted by Mayborg.
@@ -370,18 +368,18 @@
Posted by Mayborg.
Additional info. -
- +
+
Example :
- <footer >
+ <footer >
<p >
Author: Mayur Borgude.
</p >
<p >
<a href = mailto:mayurborgude @gmail.com > mayurborgude@gmail.com
</a>
</p >
-
+
</footer >
- Specifies main content in a document, the content inside the "main" element should be unique to document . It should not contain any contain any repeated content aacross document such as SideBars, Navigation Links, Copyright Info, Site Logo, and Search Forms. + Specifies main content in a document, the content inside the "main" element should be unique to document . It should not contain any contain any repeated content aacross document such as SideBars, Navigation Links, Copyright Info, Site Logo, and Search Forms.
Note: - There must only be one "main" element in a document. the "main" element must not be the decendent of: + There must only be one "main" element in a document. the "main" element must not be the decendent of:
Defines a search section Elements inside search can be form elements used to perform search.
Example :
- <search >
+ <search >
<form >
<input name="fsrch"
id="fsrch"
placeholder="Search
Google">
</form>
-
+
</search >
Defines a search section Elements inside search can be form elements used to perform search.
Example :
- <article >
+ <article >
<h3 > Tokyo -Japan </h3 >
- <p >
Tokyo , officially the Tokyo Metropolis (東京都, Tōkyō-to), is the capital of Japan and one of the most populous cities in the world, with a population of over 14 million residents as of 2023 and the second-most-populated capital in the world.
</p>
+ <p >
Tokyo , officially the Tokyo Metropolis (東京都, Tōkyō-to), is the capital of Japan and one of the most populous cities in the world, with a population of over 14 million residents as of 2023 and the second-most-populated capital in the world.
</p>
</article >
Tokyo , officially the Tokyo Metropolis (東京都, Tōkyō-to), is the capital of Japan and one of the most populous cities in the world, with a population of over 14 million residents as of 2023 and the second-most-populated capital in the world.
- -tag defines some content aside from the content it is placed in.
The aside content should be indirectly related to the surrounding content.
-
+
Tip : The "aside" content is often placed as a sidebar in a document.
-
+
Note: The "aside" element does not render as anything special in a browser. However, you can use CSS to style the "aside" element (see example below).
Example :
-
- <aside >
+
+ <aside >
<h3 > Osaka -Japan </h3 >
- <p >
Osaka is a designated city in the Kansai region of Honshu in Japan, and one of the three major cities of Japan (Tokyo-Osaka-Nagoya). It is the capital of and most populous city in Osaka Prefecture, and the third-most populous city in Japan, following the special wards of Tokyo and Yokohama.
</p>
+ <p >
Osaka is a designated city in the Kansai region of Honshu in Japan, and one of the three major cities of Japan (Tokyo-Osaka-Nagoya). It is the capital of and most populous city in Osaka Prefecture, and the third-most populous city in Japan, following the special wards of Tokyo and Yokohama.
</p>
</aside >
The "details" tag specifies additional details that the user can open and close on demand.
@@ -574,15 +572,15 @@
Example :
-
- <details >
+
+ <details >
<summary > Nashik -India
</summary >
- <p >
Nashik , Marathi: [naːʃik], formerly Nasik is a city in the northern region of the Indian state of Maharashtra. Situated on the banks of the river Godavari. The population of Nashik city is around 2.2 million and is emerging as one of the fastest-growing cities in India.
</p>
+ <p >
Nashik , Marathi: [naːʃik], formerly Nasik is a city in the northern region of the Indian state of Maharashtra. Situated on the banks of the river Godavari. The population of Nashik city is around 2.2 million and is emerging as one of the fastest-growing cities in India.
</p>
</details >
Nashik , Marathi: [naːʃik], formerly Nasik is a city in the northern region of the Indian state of Maharashtra. Situated on the banks of the river Godavari. The population of Nashik city is around 2.2 million and is emerging as one of the fastest-growing cities in India.
- -The "dialog" tag defines a dialog box or subwindow. The "dialog" element makes it easy to create popup dialogs and modals on a web page.
Example :
-
- <dialog open >
+
+ <dialog open >
Hello, Buddy!
</dialog >
Example :
<link rel="stylesheet" href="styles.css">
-
+
Images are not technically inserted into a web page; images are linked to web pages. The "img" tag creates a holding space for the referenced image. - - Note: - Tip: + Note: + + Tip:
The "img" tag has two required attributes: @@ -764,17 +762,17 @@
Example :
-
+
<img src="img/aesthetics.jpg"
alt="Cartoon picture of a boy and
his dog."
width="420" height="325">
-
+
-
+
+
+
The "map" tag is used to define an image map. An image map is an image with clickable areas.
- +Note: The required name attribute of the "map" element is associated with the <img > 's usemap attribute and creates a relationship between the image and the map. - + The <map > element contains a number of <area > elements, that defines the clickable areas in the image map.
- +@@ -803,40 +801,40 @@
Example :
-
+
<h4>
Click on the objects in image :
</h4>
<img src="\img\scene.jpg"
alt="LighthouseScene"
usemap="#scenemap"
width="280" height="255">
-
+
<map name="scenemap">
<area shape="rect"
coords="175,29,243,159"
alt="lighthouse"
href="https://en.wikipedia.org/
wiki/Lighthouse" >
- <area shape="rect"
-
coords="0,165,134,254"
+ <area shape="rect"
+
coords="0,165,134,254"
alt="River"
href="https://en.wikipedia.org/
wiki/River">
- <a rea shape="rect"
-
coords="0,0,150,95"
+ <a rea shape="rect"
+
coords="0,0,150,95"
alt="Clouds"
href="https://en.wikipedia.org/
-
wiki/Cloud">
+
wiki/Cloud">
</map>
-
+
-
+
-
-
+
+
Note: you must use a script to actually draw the graphics. @@ -860,18 +858,18 @@
Example :
<h3 > HTML5 Canvas : </h3>
<canvas id="myCanvas"
width="250" height="150"
style="border:1px solid grey" >
</canvas>
-
+
@@ -899,28 +897,28 @@
-
+
@@ -951,19 +949,19 @@
Resize the browser window to load different images.
The <svg > tag defines a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
- +Example :
@@ -999,14 +997,14 @@
Creating tree using SVG :
- +The <audio > tag is used to embed sound content in a document, such as music or other audio streams. The <audio > tag contains one or more <source > tags with different audio sources. The browser will choose the first source it supports. - + The text between the <audio > and </audio > tags will only be displayed in browsers that do not support the <audio > element. - +
There are three supported audio formats in HTML: MP3, WAV, and OGG.
@@ -1051,7 +1049,7 @@The <audio > tag is used to embed sound content in a document, such as music or other audio streams. The <audio > tag contains one or more <source > tags with different audio sources. The browser will choose the first source it supports. - + The text between the <audio > and </audio > tags will only be displayed in browsers that do not support the <audio > element. - +
There are three supported audio formats in HTML: MP3, WAV, and OGG.
@@ -1089,7 +1087,7 @@Defines an abbrevation or an Acronym for a phrase. here only abbrevation is displayed and the abbrivated text is displayed when hovered over(similiar to tooltips).
Example :
-
- <abbr title = "Mayur Borgude" >
+
+ <abbr title = "Mayur Borgude" >
MayBorg
</abbr >
- The "address" tag in HTML indicates the contact information of a person or an organization. The contact information can be an email address, URL, physical address, mobile number, social media, etc. + The "address" tag in HTML indicates the contact information of a person or an organization. The contact information can be an email address, URL, physical address, mobile number, social media, etc.
Example :
-
- <address >
+
+ <address >
Written By : <a href="mailto:
mayurborgude@gmail.com">
@@ -1160,7 +1158,7 @@
- The "b" (Bold) tag in HTML is for making text bold without adding extra importance. Text within "b" displays in a bold style. + The "b" (Bold) tag in HTML is for making text bold without adding extra importance. Text within "b" displays in a bold style.
Example :
-
- <b >
+
+ <b >
This Text Will Be Bold.
</b >
- The "i" (italic) tag in HTML is used to display the content in italic style. This tag is generally used to display the technical term, phrase, the important word in a different language. + The "i" (italic) tag in HTML is used to display the content in italic style. This tag is generally used to display the technical term, phrase, the important word in a different language.
Example :
-
- <i >
+
+ <i >
This Text Will Be Bold.
</i >
- The "blockquote" tag specifies a section that is quoted from another source. + The "blockquote" tag specifies a section that is quoted from another source.
Example :
-
- <blockquote cite="https://
-
www.vincentvangogh.org/
quotes.jsp" >
+
+ <blockquote cite="https://
+
www.vincentvangogh.org/
quotes.jsp" >
" Only when I fall do I get up
again. " - Vincent Van Gogh
</blockquote >
" Only when I fall do I get up again. " - Vincent Van Gogh
Example :
-
- <h3 >Citing Van Gogh's Art</h3 >
+
+ <h3 >Citing Van Gogh's Art</h3 >
<img src="/img/
Sunflowers_vangogh.jpg"
width="200" height="200"
alt="The Sunflowers">
- <p >
+ <p >
<cite>The Sunflowers</cite >
by Vincent Van
Gogh.
</p>
The Sunflowers by Vincent Van Gogh,1888.
- +Example :
-
+
<code > This is code </code >
This is code
I love Cats Dogs!
-
Example :
-
+
<p >
- <dfn title="HyperText Markup
-
Language">HTML
-
</dfn>
+ <dfn title="HyperText Markup
+
Language">HTML
+
</dfn>
is the standard markup language
for creating web pages.
</p>
HTML is the standard markup language for creating web pages. -
+Example :
-
+
<p >
- <mark >
+ <mark >
HTML
-
</mark >
+
</mark >
is the standard markup language
for creating web pages.
</p>
HTML is the standard markup language for creating web pages. -
+The "meter" tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
- +Note: The "meter" tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress > tag.
- +Tip: Always add the "label" tag for best accessibility practices!
Example :
-
+
<label for="disk_c">
Disk usage C:
</label >
<meter id="disk_c" value="6"
- min="0" max="10">
+ min="0" max="10">
6 out of 10
</meter >
The "progress" tag represents the completion progress of a task. - Tip: + Tip:
Examples: Disk usage, the relevance of a query result, etc.
- +
Note:
Always add the<label > tag for best accessibility practices !
Tip: Use the<progress >tag in conjunction with JavaScript to display the progress of a task.
@@ -1473,27 +1471,27 @@
Example :
-
+
<label for="file">
Download Progress :
</label >
<progress id="file" value="73"
- min="0" max="100">
+ min="0" max="100">
73% out of 100%
</progress >
Example :
-
- <s >
+
+ <s >
this text is Striked-through.
</s >
Example :
-
- <p >
+
+ <p >
Water - H<sub >
2</sub > O
</p >
- <p >
+ <p >
Glucose - C<sub >
6</sub >
H<sub >
@@ -1553,12 +1551,12 @@
Water - H2 O
@@ -1566,7 +1564,7 @@Example :
-
- <p >
+
+ <p >
Two Squared = 2<sup >
2</sup >
= 4
- </p >
+ </p >
Two Squared = 2 2 = 4 -
+The "template" tag is used as a container to hold some HTML content hidden from the user when the page loads. - +
The content inside "template" can be rendered later with a JavaScript.
- +You can use the "template" tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the "template" tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.
- - + +Example :
-
-
- <button onclick="showContent()">
-
Trigger Template
</button>
+
+
+ <button onclick="showContent()">
+
Trigger Template
</button>
- <template >
+ <template >
<h3 > Mountains : Pixel Art </h3 >
- <img src="img/pixel_art.jpg"
+ <img src="img/pixel_art.jpg"
width="150" height="150" >
</template >
-
+
<script >
function showContent() {
- let temp =
-
document.getElementsByTagName
-
("template")[0];
+ let temp =
+
document.getElementsByTagName
+
("template")[0];
- let clon =
-
temp.content.cloneNode(true);
+ let clon =
+
temp.content.cloneNode(true);
document.body.appendChild(clon);}
</script >
Example :
-
+
<menu >
<li >Coffee</li >
<li >Milk</li >
<li >Juice</li >
</menu >
-
+
Example :
-
+
<dl >
<dt > Coffee </dt >
@@ -1742,18 +1740,18 @@
Example :
-
+
<table >
<tr>
<th>Month</th>
@@ -1797,11 +1795,11 @@
| Month | @@ -1816,7 +1814,7 @@$80 |
|---|
Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.
- +Example :
-
+
<table >
<thead >
<tr >
@@ -1867,11 +1865,11 @@
The<col > tag specifies column properties for each column within a<colgroup > element. @@ -1916,7 +1914,7 @@
Example :
-
+
<table >
<colgroup >
<col span="2" style="background-color:
rgb(0, 167, 197)" >
@@ -1938,11 +1936,11 @@
| $49 |
Example : +
Example :
-
+
<form >
- <label for="fname">
First name:
+ <label for="fname">
First name:
</label >
<input type="text" id="fname"
name="fname" placeholder="Mayur">
<label for="ln">
Last name: </label >
@@ -2018,7 +2016,7 @@
The<input > tag specifies an input field where the user can enter data. @@ -2055,20 +2053,20 @@
Example : +
Example :
<input type="button" value="Click Here"
onclick="alert('✨Heyy , Have a Good
Day✨😊')">
Example : +
Example :
- <label for="chkbx" >
+ <label for="chkbx" >
Are you a Student ?
</label >
<input type="checkbox" id="chkbx" >
Example : +
Example :
- <label for="clr" >
+ <label for="clr" >
Whats your Eye Color ?
</label >
<input type="color" id="clr" >
Example : +
Example :
-
+
<input type="date">Your Birth Date ?
<input type="email"
placeholder="Enter Your Mail">
<label for="fyl"> Choose File</label>
@@ -2135,10 +2133,10 @@
Example : +
Example :
<iframe src="http://www.fluffbucket.co.uk/basicweb.htm" frameborder="0">
Example : +
Example :
<label for="cars" >Choose a car:
</label>
@@ -2212,7 +2210,7 @@
The <select > element is used to create a drop-down list. The <select > element is most often used in a form, to collect user input. - + The "name" attribute is needed to reference the form data after the form is submitted (if you omit the "name" attribute, no data from the drop-down list will be submitted).
-Example : +
Example :
<label for="review" > Write your
feedback below :</label >
@@ -2254,7 +2252,7 @@
The <datalist > tag specifies a list of pre-defined options for an <input > element.
The <datalist > tag is used to provide an "autocomplete" feature for <input > elements. Users will see a drop-down list of pre-defined options as they input data.
-
+
The <datalist > element's id attribute must be equal to the <input > element's list attribute (this binds them together).
Example : +
Example :
<form onSubmit="return false;">
@@ -2296,7 +2294,7 @@
The <fieldset > tag is used to group related elements in a form.
@@ -2329,7 +2327,7 @@
Example : +
Example :
<form >
@@ -2348,7 +2346,7 @@
The <output > tag is used to represent the result of a calculation (like one performed by a script).
-Example : +
Example :
<form oninput="x.value=
parseInt(a.value)+parseInt(b.value)" >
<input type="range" id="a"
value="25" >
- +
<input type="range" id="b"
value="50" >
+ +
<input type="range" id="b"
value="50" >
=
<output name="x" for="a b"
style="background-color:
aquamarine;font-weight: bold;" >
</output >
</form>
Example : +
Example :
<head >
<title > HTML | Examples</title >
<meta charset="UTF-8" >
<meta name="Keywords"
content="HTML,Web,CSS">
- </head >
-
+ </head >
+
Example : +
Example :
<head >
<base href="https://mayborg121.
github.io/" target="_blank" >
-
</head >
-
+
</head >
+
Example : +
Example :
<p id="demo" ></p >
- <script >
-
document.getElementById
-
("demo").innerHTML =
+ <script >
+
document.getElementById
+
("demo").innerHTML =
"Hello JavaScript!";
- </script >
-
+ </script >
+
Example : +
Example :
<embed src="https://media4.giphy.com
/media/v1.Y2lkPTc5MGI3N
jExb2YwNHo1bzBlbHQxN
W5vbjAwdDF4ZzNoN3BhbWY4
aGM4N2VuMWdvMSZlcD12MV9
pbnRlcm5hbF9naWZfYnlfaWQm
Y3Q9Zw/3dhmyq6EKw2x7eFt4X
/giphy.webp"
-
type="image/webp" width="290px" >
-
+
type="image/webp" width="290px" >
+
Example : +
Example :
<object data="https://media2.giphy.com
/media/v1.Y2lkPTc5MGI3NjE
xZG5qaWY2N2xvZDlyY3ozYWF
obGxoM3I3eDYwcWo4b3N2ZzJ
4NHp4MiZlcD12MV9pbnRlcm5
hbF9naWZfYnlfaWQmY3Q9Zw/
RHEqKwRZDwFKE/200.webp"
width="300px" >
</object >
-
+
@@ -2724,17 +2722,16 @@
- These are not attributes but rather formatting tags<br > is used to give a line break which adds a new line character. and<hr > is used to add horizontal rule/line. + These are not attributes but rather formatting tags<br > is used to give a line break which adds a new line character. and<hr > is used to add horizontal rule/line.
Example : +
Example :
<link rel="icon" type="image/x-icon"
href="/img/html.ico" >
-
+
*** look at the Tab title ***
- +
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
HTML5 introduced a method to let web designers take control over the viewport, through the <meta > tag.
You should include the following <meta > viewport element in all your web pages
The viewport is the user's visible area of a web page.
-
+
Example : +
Example :
-
+
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" >
-
+
- XHTML or EXtensible HyperText Markup Language is a mix of HTML and XML, very similar to HTML but stricter. It’s like a rulebook for creating web pages that browsers easily understand. Unlike HTML, you have to be careful and follow the rules exactly. Most browsers support it. Just think of it as a more precise way to write web code. - + XHTML or EXtensible HyperText Markup Language is a mix of HTML and XML, very similar to HTML but stricter. It’s like a rulebook for creating web pages that browsers easily understand. Unlike HTML, you have to be careful and follow the rules exactly. Most browsers support it. Just think of it as a more precise way to write web code. +
@@ -2824,5 +2821,5 @@