Adrian
Uploaded by
monperalta54Adrian
Uploaded by
monperalta54Adrian b.
Felipe
BSIT-3
Lists of HTML TAGS/FUNCTIONS
1. <!-->
<!DOCTYPE html>
<html>
<body>
<!-- Adrian's Start Comment -->
<p>This is a paragraph.</p>
<!-- Adrian's End Comment -->
</body>
</html>
2. <!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<title>Myself</title>
</head>
<body>
Adrian B. Felipe, BSIT-3
</body>
</html>
3. <a>
<!DOCTYPE html>
<html>
<body>
<h1>The a element</h1>
<a href="https://www.facebook.com/adrianfelipe27">Follow me!</a>
</body>
</html>
4. <abbr>
<!DOCTYPE html>
<html>
<body>
<h1>adrian abbr element</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>
</body>
</html>
5. <acronym>
<!DOCTYPE html>
<html>
<body>
<h1>Adrian abbr element</h1>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>
</body>
</html>
6. <Address>
<!DOCTYPE html>
<html>
<body>
<h1>The address element</h1>
<address>
Written by <a href="mailto:webmaster@example.com">Adrian</a>.<br>
Visit us at:<br>
Example.com<br>
Sta.Lucia , Guimba , Nueva Ecija<br>
Philiphines
</address>
</body>
</html>
7. <applet>
8. <area>
<!DOCTYPE html>
<html>
<body>
<h1>This is the use of area elements, Adrian knows.</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>
9. <article>
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Raymond Chrome</h2>
<p>Adrian Chrome is a web browser developed by Google, released in
2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Adrian Firefox</h2>
<p>Adrian Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Adrian Edge</h2>
<p>Adrian Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</body>
</html>
10. <aside>
<!DOCTYPE html>
<html>
<body>
<h1>The aside element</h1>
<p>Felipe family visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my family!
</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is Felipe’s theme park at Walt Disney World Resort featuring
exciting attractions, international pavilions, award-winning fireworks and
seasonal special events.</p>
</aside>
</body>
</html>
11. <audio>
<!DOCTYPE html>
<html>
<body>
<h1>This is the audio element, Adrian know's.</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="goat.ogg" type="audio/ogg">
<source src="goat.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
12. <b>
<!DOCTYPE html>
<html>
<body>
<h1>The b element</h1>
<p>Happy birthday <b>Adrian</b>.</p>
</body>
</html>
13. <base>
<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<h1>The base element</h1>
<p><img src="images/stickman.gif" width="24" height="39" alt="Stickman"> -
Notice that we have only specified a relative address for the image. Since we
have specified a base URL in the head section, the browser will look for the
image at "https://www.w3schools.com/images/stickman.gif".</p>
<p><a href="tags/tag_base.asp">HTML base tag</a> - Notice that the link
opens in a new window, even if it has no target="_blank" attribute. This is
because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
14. <basefont>
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: courier, serif;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15. <bdi>
<!DOCTYPE html>
<html>
<body>
<h1>The bdi element</h1>
<p>In the example below, usernames are shown along with the number of
points in a contest. If the bdi element is not supported in the browser, the
username of the Arabic user would confuse the text (the bidirectional
algorithm would put the colon and the number "90" next to the word "User"
rather than next to the word "points").</p>
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>Adrian</bdi>: 80 points</li>
<li>User <bdi><إيان/bdi>: 90 points</li>
</ul>
</body>
</html>
16. <bdo>
<!DOCTYPE html>
<html>
<body>
<h1>The bdo element</h1>
<p>This paragraph will go left-to-right.</p>
<p><bdo dir="rtl">Adrian's the one</bdo></p>
</body>
</html>
17. <big>
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
font-size: 20px;
}
p.ex2 {
font-size: 70px;
}
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p class="ex1">This is a bigger paragraph.</p>
<p class="ex2">This is a much bigger paragraph.</p>
</body>
</html>
18. <blockquote>
<!DOCTYPE html>
<html>
<body>
<h1>The blockquote element</h1>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.Adrian.org/who/index.html">
For 50 years, Adrian has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally.
</blockquote>
</body>
</html>
19. <body>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading Adrian knows</h1>
<p>This is a paragraph. Adrian knows</p>
</body>
</html>
20. <br>
<!DOCTYPE html>
<html>
<body>
<h1>The br element</h1>
<p>Adrian Knows<br> 1 + 1 = 2<br> easy</p>
</body>
</html>
21. <button>
<!DOCTYPE html>
<html>
<body>
<h1>The button Element</h1>
<button type="button" onclick="alert('Happy Birthday!')">hit me!</button>
</body>
</html>
22. <canvas>
<!DOCTYPE html>
<html>
<body>
<h1>This is the canvas element, Adrian knows</h1>
<canvas id="myCanvas">Your browser does not support the canvas
tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#00000";
ctx.fillRect(0, 0, 80, 100);
</script>
</body>
</html>
23. <caption>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The caption element</h1>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$1900990</td>
</tr>
<tr>
<td>February</td>
<td>$5890909</td>
</tr>
</table>
</body>
</html>
24. <center>
<!DOCTYPE html>
<html>
<body>
<center>Adrian knows</center>
</html>
</body>
25. <cite>
<!DOCTYPE html>
<html>
<body>
<h1>The cite element</h1>
<img src="img_the_Adrian.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Adrian</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
26. <code>
<!DOCTYPE html>
<html>
<body>
<h1>The code element</h1>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-size</code> property defines the
background size of an element.</p>
</body>
</html>
27. <col>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The col element</h1>
<table>
<colgroup>
<col span="2" style="background-color:blue">
<col style="background-color:red">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>Adrian Painting</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
28. <colgroup>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The colgroup element</h1>
<table>
<colgroup>
<col span="2" style="background-color:green">
<col style="background-color:pink">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
</body>
</html>
29. <data>
<!DOCTYPE html>
<html>
<body>
<h1>The data element</h1>
<p>The following example displays product names but also associates each
name with a product number:</p>
<ul>
<li><data value="21053">Anime</data></li>
<li><data value="21054">Adrian the Hulk</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>
</body>
</html>
30. <datalist>
<!DOCTYPE html>
<html>
<body>
<h1>The datalist element</h1>
<form action="/action_page.php" method="get">
<label for="browser">Choose your fav from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Green painting">
<option value="Jervin painting">
<option value="Adrian painting">
</datalist>
<input type="submit">
</form>
</body>
</html>
31. <dd>
<!DOCTYPE html>
<html>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>Brown hot drink</dd>
<dt>Milk</dt>
<dd>White hot drink</dd>
</dl>
</body>
</html>
32. <del>
<!DOCTYPE html>
<html>
<body>
<h1>The del element</h1>
<p>Raymond's favorite color is <del></del> pink<ins>red</ins>!</p>
</body>
</html>
33. <details>
<!DOCTYPE html>
<html>
<body>
<h1>The details element</h1>
<details>
<summary>Felipe's Center</summary>
<p>Felipe is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</details>
</body>
</html>
34. <dfn>
<!DOCTYPE html>
<html>
<body>
<h1>The dfn element</h1>
<p><dfn>Adrian</dfn> is the number 1 in the universe.</p>
</body>
</html>
35. <dialog>
<!DOCTYPE html>
<html>
<body>
<h1>The dialog element</h1>
<p>Adrian knows.</p>
<p>Adrian knows.</p>
<dialog open>Adrian knows.</dialog>
<p>Adrian knows.</p>
<p>Adrian knows.</p>
</body>
</html>
36. <dir>
<!DOCTYPE html>
<html>
<body>
<ul>
<li>me</li>
<li>you</li>
<li>us</li>
</ul>
</body>
</html>
37. <div>
<!DOCTYPE html>
<html>
<head>
<style>
.AdrianmyDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="AdrianmyDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
38. <dl>
<!DOCTYPE html>
<html>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>Brown cold drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
39. <dt>
<!DOCTYPE html>
<html>
<body>
<h1>The dl, dd, and dt elements</h1>
<p>These three elements are used to create a description list:</p>
<dl>
<dt>Drinks</dt>
<dd>Brown hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
40. <em>
<!DOCTYPE html>
<html>
<body>
<h1>The em element</h1>
<p>You <em>have</em> me</p>
<p>I <em>have</em> you.</p>
</body>
</html>
41. <embed>
<!DOCTYPE html>
<html>
<body>
<h1>The embed element</h1>
<embed type="image/jpg" src="pic_Adrian.jpg" width="400" height="200">
</body>
</html>
42. <fieldset>
<!DOCTYPE html>
<html>
<body>
<h1>The fieldset element</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personal Info:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
43. <figcaption>
<!DOCTYPE html>
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="pic_Mypic.jpg" alt="Mypic" style="width:100%">
<figcaption>Fig.1 - Mypic, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
44. <figure>
<!DOCTYPE html>
<html>
<body>
<h1>The figure and figcaption element</h1>
<figure>
<img src="pic_Lolomo.jpg" alt="Lolomo" style="width:100%">
<figcaption>Fig.1 - loloko, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
45. <font>
<!DOCTYPE html>
<html>
<body>
<p style="color:green">This is a paragraph.</p>
<p style="color:yellow">This is another paragraph.</p>
</body>
</html>
46. <footer>
<!DOCTYPE html>
<html>
<body>
<h1>The footer element</h1>
<footer>
<p>Author: Adrian Swatshineger<br>
<a href="mailto:Adrian@example.com">Adrian@example.com</a></p>
</footer>
</body>
</html>
47. <form>
<!DOCTYPE html>
<html>
<body>
<h1>The form element</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="pass">Password:</label>
<input type="text" id="pass" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
48. <frame>
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.Adrian.com" title="Adrian Free tutorial">
</iframe>
</body>
</html>
49. <frameset>
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web
Tutorials">
</iframe>
</body>
</html>
50. <h1> - <h6>
<!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>
51. <head>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adrian</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
52. <header>
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>Adrian lolo</h1>
<p>Posted by Lexi Lore</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
53. <hr>
<!DOCTYPE html>
<html>
<body>
<h1>The Main Languages of the Web</h1>
<p>Adrian Felipe a have 6 wives and 6 sports car and 6 crewship and 6
trillion money int the bank </p>
<hr>
<p>Adrian Felipe have 6 wives and 6 sports car and 6 crewship and 6 trillion
money int the bank </p>
<hr>
<p>Adrian Felipe have 6 wives and 6 sports car and 6 crewship and 6 trillion
money int the bank </p>
</body>
</html>
54. <html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Me</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
55. <i>
<!DOCTYPE html>
<html>
<body>
<h1>The i element</h1>
<p><i>Adrian</i> is the most popular Swordsman in history.</p>
<p>The <i>Adrian's Titanic</i>, a luxury steamship, sank on April 15, 1912
after striking an iceberg.</p>
</body>
</html>
56. <iframe>
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web
Tutorials">
</iframe>
</body>
</html>
57. <img>
<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="img_Lore.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
58. <input>
<!DOCTYPE html>
<html>
<body>
<h1>The input element</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
59. <ins>
<!DOCTYPE html>
<html>
<body>
<h1>The ins element</h1>
<p>My favorite color is <del>blue</del> <ins>blue</ins>!</p>
</body>
</html>
60. <kbd>
<!DOCTYPE html>
<html>
<body>
<h1>The kbd element</h1>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
</body>
</html>
61. <label>
<!DOCTYPE html>
<html>
<body>
<h1>The label element</h1>
<p>Click on one of the text labels to toggle the related radio button:</p>
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
62. <legend>
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset>
<legend>Personal Info:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
63. <li>
<!DOCTYPE html>
<html>
<body>
<h1>The ol and ul elements</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li>Ikaw</li>
<li>You</li>
<li>Sika</li>
</ol>
<p>The ul element defines an unordered list:</p>
<ul>
<li>Me</li>
<li>Im</li>
<li>I am</li>
</ul>
</body>
</html>
64. <link>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Mystyles.css">
</head>
<body>
<h1>Hello World!</h1>
<h2>I am me</h2>
<p>Me too!</p>
</body>
</html>
65. <main>
<!DOCTYPE html>
<html>
<body>
<h1>The main element</h1>
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in
2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla.
Firefox has been the second most popular web browser since January,
2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in
2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
</body>
</html>
66. <map>
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
</body>
</html>
67. <mark>
<!DOCTYPE html>
<html>
<body>
<h1>The mark element</h1>
<p>Do not forget to buy <mark>Foods</mark> today.</p>
</body>
</html>
68. <meta>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
69. <meter>
<!DOCTYPE html>
<html>
<body>
<h1>The meter element</h1>
<p>The meter element is used to display a gauge:</p>
<label for="Anime">Anime:</label>
<meter id="Anime" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="Anime">Anime:</label>
<meter id="Anime" value="0.6">60%</meter>
</body>
</html>
70. <nav>
<!DOCTYPE html>
<html>
<body>
<h1>The nav element</h1>
<p>The nav element defines a set of navigation links:</p>
<nav>
<a href="/html/">MyHTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>
71. <noframes>
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web
Tutorials">
</iframe>
</body>
</html>
72. <noscript>
<!DOCTYPE html>
<html>
<body>
<h1>The noscript element</h1>
<p>A browser with HTML disabled will show the text inside the noscript
element ("Hello World!" will not be displayed).</p>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support HTML!</noscript>
</body>
</html>
73. <object>
<!DOCTYPE html>
<html>
<body>
<h1>The object element</h1>
<object data="pic_Mypict.jpg" width="600" height="250"></object>
</body>
</html>
74. <ol>
<!DOCTYPE html>
<html>
<body>
<h1>The ol element</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>or Me</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>or Me</li>
</ol>
</body>
</html>
75. <optgroup>
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="Ferari">Ferari</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
76. <option>
<!DOCTYPE html>
<html>
<body>
<h1>The option element</h1>
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="Ferari">Ferari</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
77. <output>
<!DOCTYPE html>
<html>
<body>
<h1>The output element</h1>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
78. <p>
<!DOCTYPE html>
<html>
<body>
<h1>The p element</h1>
<p>MY Me</p>
</body>
</html>
79. <param>
<!DOCTYPE html>
<html>
<body>
<h1>The param element</h1>
<object data="lion.wav">
<param name="autoplay" value="true">
</object>
</body>
</html>
80. <picture>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images.</p>
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
81. <pre>
<!DOCTYPE html>
<html>
<body>
<h1>The pre element</h1>
<pre>
Ikaw at ako ang mandirigma
sa ngalan ng kapayapaaan
</pre>
</body>
</html>
82. <progress>
<!DOCTYPE html>
<html>
<body>
<h1>The progress element</h1>
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
</body>
</html>
83. <q>
<!DOCTYPE html>
<html>
<body>
<h1>The q element</h1>
<p>WWF's goal is to:
<q>Succeed in life and help my family </p>
</body>
</html>
84. <rp>
<!DOCTYPE html>
<html>
<body>
<h1>The rp element</h1>
<ruby>
漢 <rp>(</rp><rt>ㄏㄢˋ</rt><rp>)</rp>
</ruby>
</body>
</html>
85. <rt>
<!DOCTYPE html>
<html>
<body>
<h1>The ruby and rt elements</h1>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
</body>
</html>
86. <ruby>
<!DOCTYPE html>
<html>
<body>
<h1>The ruby and rt elements</h1>
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
</body>
</html>
87. <s>
<!DOCTYPE html>
<html>
<body>
<h1>The s element</h1>
<p><s>No Tickets left</s></p>
<p>SOLD OUT!</p>
</body>
</html>
88. <samp>
<!DOCTYPE html>
<html>
<body>
<h1>The samp element</h1>
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
</body>
</html>
89. <script>
<!DOCTYPE html>
<html>
<body>
<h1>The script element</h1>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>
</body>
</html>
90. <section>
<!DOCTYPE html>
<html>
<body>
<h1>The section element</h1>
<section>
<h2>MYMY History</h2>
<p>The MYMY is an international organization working on issues regarding
the conservation, research and restoration of the environment, formerly
named the MYMY. </p>
</section>
<section>
<h2>MYMY Knowledge</h2>
<p>The MYMY is an international organization working on issues regarding
the conservation, research and restoration of the environment, formerly
named the MYMY. </p>
</section>
</body>
</html>
91. <select>
<!DOCTYPE html>
<html>
<body>
<h1>The select element</h1>
<p>The select element is used to create a drop-down list.</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Bugati</option>
<option value="saab">Ferari</option>
<option value="opel">Honda</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
92. <small>
<!DOCTYPE html>
<html>
<body>
<h1>The small element</h1>
<p>Raymond</p>
<p><small>Adrian</small></p>
</body>
</html>
93. <source>
<!DOCTYPE html>
<html>
<body>
<h1>The source element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="Dog.ogg" type="audio/ogg">
<source src="Dog.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
94. <span>
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:gold;font-weight:bold">gold</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body>
</html>
95. <strike>
<!DOCTYPE html>
<html>
<body>
<h1>The del element</h1>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
96. <strong>
<!DOCTYPE html>
<html>
<body>
<h1>Adrian The King</h1>
<p>Adrian The King</p>
<p><strong>Adrian the King</strong></p>
</body>
</html>
97. <style>
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:gold;}
p {color:silver;}
</style>
</head>
<body>
<h1>Me</h1>
<p>You</p>
</body>
</html>
98. <sub>
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This is <sub>you</sub> text.</p>
<p>This is <sup>me</sup> text.</p>
</body>
</html>
99. <summary>
<!DOCTYPE html>
<html>
<body>
<h1>The summary element</h1>
<details>
<summary>Adrian's Journey</summary>
<p>Once a fun a time , the end</p>
</details>
</body>
</html>
100. <sup>
<!DOCTYPE html>
<html>
<body>
<h1>The sub and sup elements</h1>
<p>This is <sub>you</sub> text.</p>
<p>This is <sup>me</sup> text.</p>
</body>
</html>
101. <svg>
<!DOCTYPE html>
<html>
<body>
<h1>The svg element</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="Black" stroke-width="4" fill="Gold" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
102. <table>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table element</h1>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
103. <tbody>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot elements</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>December</td>
<td>$100</td>
</tr>
<tr>
<td>November</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
104. <td>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The td element</h1>
<p>The td element defines a cell in a table:</p>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
</body>
</html>
105. <template>
<!DOCTYPE html>
<html>
<body>
<h1>The template Element</h1>
<p>Click the button below to display the hidden content from the template
element.</p>
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Adrian’s pict</h2>
<img src="img_Adrian's pict.jpg" width="214" height="204">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body>
</html>
106. <textarea>
<!DOCTYPE html>
<html>
<body>
<h1>The textarea element</h1>
<form action="/action_page.php">
<p><label for="Adrian">Review of W3Schools:</label></p>
<textarea id="Raymond" name="\Adrian" rows="4" cols="50">At Adrian.com
you will learn how to make a website. They offer free tutorials in all web
development technologies.</textarea>
<br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
107. <tfoot>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot elements</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
</body>
</html>
108. <th>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The th element</h1>
<p>The th element defines a header cell in a table:</p>
<table>
<tr>
<th>Month</th>
<th>Expenses</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
109. <thread>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The thead, tbody, and tfoot elements</h1>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$1000</td>
</tr>
<tr>
<td>March</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$1080</td>
</tr>
</tfoot>
</table>
</body>
</html>
110. <time
<!DOCTYPE html>
<html>
<body>
<h1>The time element</h1>
<p>Open from <time>10:00</time> to <time>21:00</time> every
weekday.</p>
<p>I have a date on <time datetime="2023-02-14 20:00">Valentines
day</time>.</p>
</body>
</html>
111. <title>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adrian's File</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
112. <tr>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The tr element</h1>
<p>The tr element defines a row in a table:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
113. <track>
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"
>
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegi
an">
</video>
114. <tt>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p style="font-family:'Lucida Console', monospace">This text is monospace
text.</p>
</body>
</html>
115. <u>
<!DOCTYPE html>
<html>
<body>
<h1>The u element</h1>
<p>This is some <u>mispeled</u> text.</p>
</body>
</html>
116. <ul>
<!DOCTYPE html>
<html>
<body>
<h1>The ul element</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>or me</li>
</ul>
</body>
</html>
117. <var>
<!DOCTYPE html>
<html>
<body>
<h1>The var element</h1>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where
<var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
118. <video>
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video width="520" height="340" controls>
<source src="Animemovie.mp4" type="video/mp4">
<source src="Animemovie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
119. <wbr>
<!DOCTYPE html>
<html>
<body>
<h1>The wbr element</h1>
<p>Try to shrink the browser window, to view how the very long word in
the paragraph below will break:</p>
<p>This is a
veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<
wbr>goodandilikeitalot<wbr>byAdrian.</p>
</body>
</html>
You might also like
- HTML Basics: HTML-Text, Hyperlink, ImagesNo ratings yetHTML Basics: HTML-Text, Hyperlink, Images32 pages
- Web Design and Internet Programming Lab ManualNo ratings yetWeb Design and Internet Programming Lab Manual18 pages
- Week 2: HTML Authoring: Instructor: Khaled IsmailNo ratings yetWeek 2: HTML Authoring: Instructor: Khaled Ismail36 pages
- CSE 101 - Introduction To Computers I: TopicNo ratings yetCSE 101 - Introduction To Computers I: Topic39 pages
- Module 2 - Web Design and Development-1No ratings yetModule 2 - Web Design and Development-154 pages
- IBM System Storage Product Guide: IBM Systems and TechnologyNo ratings yetIBM System Storage Product Guide: IBM Systems and Technology24 pages
- Firewall and SELinux Configuration GuideNo ratings yetFirewall and SELinux Configuration Guide14 pages
- Computer Science Mid & Final Term DS Fall-2023No ratings yetComputer Science Mid & Final Term DS Fall-20233 pages
- Unit - I Introduction To Programming Languages: Computer Application in BusinessNo ratings yetUnit - I Introduction To Programming Languages: Computer Application in Business93 pages
- DCS-5222L Firmware Release Notes: ContentNo ratings yetDCS-5222L Firmware Release Notes: Content3 pages
- Regular Expressions To Finite Automata: - High-Level SketchNo ratings yetRegular Expressions To Finite Automata: - High-Level Sketch32 pages
- Ajit Kumar Gupta: Examination Board/University School/College Year of Percentage Passing (%)No ratings yetAjit Kumar Gupta: Examination Board/University School/College Year of Percentage Passing (%)2 pages