Practising HTML Tag1
Practising HTML Tag1
<p>
<img src = "https://img.freepik.com/free-photo/purple-
osteospermum-daisy-flower_1373-16.jpg?w=2000" alt = "flowers" text style =
"width:200px;height:200px">
</p>
<p>
<a href =
"https://cdn.firstcry.com/education/2022/12/12101916/Flower-Names-In-English-
For-Kids.jpg" target = "_self"> Visit the browser to view flowers in same
page</a>
</p>
<p>
<a href = "https://cdn.britannica.com/45/5645-050-B9EC0205/head-
treasure-flower-disk-flowers-inflorescence-ray.jpg" target = "_blank"> Visit
the browser to view flowers in different page</a>
</p><hr>
<p>MARQUEE TAG </p>
<p>
<marquee behavior="scroll" direction="down">Flowers </marquee>
</p>
<hr>
<p>IFRAME IMAGE FRAME TAG</p>
<p>
<iframe src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRwnp3ZxQHwg8ITRyHJZMseiUYqTTdc7A6itg&usqp=CAU"
frameborder="5"></iframe>
</p><br><br><hr>
<p>TABLE STYLE TAG</p>
<pre>th-table heading cells
td-table data
thead - table heading
tfoot - table footer
th rowspan - size of the row in table
th colspan - size of the coloumn in table
tbody- table body
</pre>
<p>
<table border = "3" Timetable>
<thead>SCHOOL TIMETABLE OF VII</thead>
<tbody><tr>
<th rowspan = "2"> Day</th>
<th colspan = "8" align = "center"> Timetable:</th>
<tr>
<tr>
<th>9 to 10</th>
<th>10 to 11</th>
<th rowspan = "8">break</th>
<th>11 to 12</th>
<th>12 to 1</th>
<th rowspan = "8">Lunch Break</th>
<th>2 to 3</th>
<th>3 to 4</th>
<th>4 to 5</th>
</tr>
<tr>
<th>Monday</th>
<td>English</td>
<td>Tamil</td>
<td>Science</td>
<td>Social</td>
<td>PT</td>
<td>Maths</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Tamil</td>
<td>Science</td>
<td>Social</td>
<td>Maths</td>
<td>PT</td>
<td>English</td>
</tr>
<tr>
<th>Wednesday</th>
<td>PT</td>
<td>English</td>
<td>Social</td>
<td>Science</td>
<td>Tamil</td>
<td>Maths</td>
</tr>
<tr>
<th>Thursday</th>
<td>Maths</td>
<td>Social</td>
<td>PT</td>
<td>Science</td>
<td>English</td>
<td>Tamil</td>
</tr>
<tr>
<th>Friday</th>
<td>Tamil</td>
<td>Social</td>
<td>English</td>
<td>PT</td>
<td>Maths</td>
<td>Science</td>
</tr>
<tr>
<th>Saturday</th>
<td>Social</td>
<td>PT</td>
<td>Tamil</td>
<td>Science</td>
<td>English</td>
<td>Maths</td>
</tr>
</tr></tbody>
<tfoot> <td >THANK YOU</td></tfoot>
</p>
</table> <br><hr>
<p></p>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<br>
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<br>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<br><hr>
<p>CENTER TAG</p>
<center>Center the text</center>
<br><hr>
<p>EMBED TAG</p>
<p>Music will begin playing when your page is loaded and will only
play one time.
A control panel will be displayed to enable your visitors to stop
the music. </p>
<embed type="video/webm" src="https://youtu.be/NPnxw00z63I?si=Mi-
OqHUEHmad36--" autostart="true"hidden="false" loop="false"><hr>
<p>NOEMBED TAG</p>
<noembed><bgsound src="https://youtu.be/NPnxw00z63I?si=Mi-
OqHUEHmad36--"loop="1"></noembed>
<br><hr>
<P>STRIKEOUT TAG</P>
<strike>Please strike the entire text</strike><br><hr>
<p>PARAGRAPH TAG</p>
<p>Paragraph</p><hr>
<p>DELETE TAG</p>
<p>My favourite color is <del>red</del></p><br><hr>
<p>INSERT TAG</p>
<p>My favourite color is <ins>red</ins></p><br><hr>
<p>BREAK TAG</p>
<br> <hr>
<p>IMAGE WITH ATTRIBUTES TAG</p>
<img src="https://i.giphy.com/media/YkXNjAkG7CfEVx3gcy/giphy.webp"
width="70"height="70" border="10" alt="text describing the image" />
<br><hr>
<p>MENU TAG ALONG UNORDERED LIST TAG</p>
<menu><ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul></menu>
<br><hr>
<p>ORDERED LIST TAG</p>
<ol type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ol type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ol>
</ol><br><hr>
<p>FONT STYLE AND ATTRIBUTES TAG</p>
<font face="Times New Roman" size="+3"color="#ff0000">font styles
with font type size and color</font><br><hr>
<br>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0"><hr>
<p>FORM TAG</p>
<Pre>post-
Appends form-data inside the body of the HTTP request (data is not
shown in URL)
Has no size limitations
Form submissions with POST cannot be bookmarked
fieldset-
group several controls as well as labels
legend-
insert a title or caption to its parent element
</Pre>
<form action="post" enctype = "multipart/form-data">
<fieldset>
<legend>Login</legend>
<label>Username : </label><input type = "text" name =
"UserName" placeholder="enter the Username"><br><br>
<label>Password : </label><input type = " password" name =
"password" placeholder="enter the password"><br><br>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label> Firstname : </label><input type = "text" name =
"Firstname" placeholder="enter the Firstname"><br><br>
<label>Lastname : </label><input type = "text" name =
"Lastname" placeholder="enter the Lastname"><br><br>
<label>Phonenumber : </label><input type = "number" name =
"Phonenumber"placeholder = " enter the phonenumber"><br><br>
<label>Email : </label><input type = "email" required name
= email placeholder="enter your emailid"><br><br>
<label> Address : </label><input type = "text" name =
"Address" placeholder="enter your address"min = "5" max = "50"><br><br>
<label>DOB : </label><input type = "date" name = "date"
placeholder="date">
</fieldset>
<fieldset>
<legend>Resume</legend><input type = "file" name = "file
">
</fieldset>
<fieldset>
<legend>Experience</legend><label>Minimum years of
Experience</label>
<input type = "range" min = "0" max = "15" ><br><br>
<label>Communication</label><input type = "number " name =
"level"min="1" max = "10" placeholder = " Select out of 10"><br><br>
<legend>Links to share projects : </legend><input type =
"url" name = "url">
</fieldset>
<br><br>
<fieldset>
<label>Time</label><input type = "time" name =
"time"><br><br>
<label>Submit </label><input type="submit"
placeholder="submit the form">
</fieldset>
</form><br>
<form>
<p>
Gender
</p>
<p><input type = "radio" name = "Gender">Male</p>
<p>
<input type = "radio" name = "Gender">Female</p>
</p>
</p>
<br>
<p>
Hobbies
<p>
<input type = "checkbox" name = "hobbies">Playing
</p>
<p>
<input type = "checkbox" name = "hobbies">Reading
books
</p>
<p>
<input type = "checkbox" name = "hobbies">Singing
</p>
<p>
<input type = "checkbox" name = "hobbies">Playing
instruments
</p>
<br>
<p>
<select name = "select sports" id = "sports">
<option value = "select sports">Select sports</option>
<option value = "1">Throwball</option>
<option value = "2">Volleyball</option>
<option value = "3">Cricket</option>
<option value = "4">Badminton</option>
</select>
</p>
<br>
<select name = "select day" id = "day">
<option value = "select day">Select Day</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
<option value = "4">4</option>
<option value = "5">5</option>
<option value = "6">6</option>
</select>
<select name = "select month" id = "month">
<option value = "select month">Select month</option>
<option value = "January">January</option>
<option value = "Febrauary">Febrauary</option>
<option value = "March">March</option>
<option value = "April">April</option>
<option value = "May">May</option>
</select>
<select name = "select year" id = "year">
<option value = "select year">Select year</option>
<option value = "2000">2000</option>
<option value = "2022">2022</option>
<option value = "2023">2023</option>
</select>
</p>
</p>
</form>
<br><hr>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<p>FORM GET</p>
<PRE>get-
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google</PRE>
<form action="get" enctype = "multipart/form-data">
<fieldset>
<legend>Login</legend>
<label>Username : </label><input type = "text" name =
"UserName"
placeholder="enter the Username"><br><br>
<label>Password : </label><input type = " password" name =
"password"
placeholder="enter the password"><br><br>
<button class="button"name = "login" placeholder = "login
">Login</button><br>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label> Firstname : </label><input type = "text" name =
"Firstname" placeholder="enter the Firstname"><br><br>
<label>Lastname : </label><input type = "text" name =
"Lastname" placeholder="enter the Lastname"><br><br>
<label>Phonenumber : </label><input type = "number" name =
"Phonenumber"placeholder = " enter the phonenumber"><br><br>
<label>Email : </label><input type = "email" required name
= email placeholder="enter your emailid"><br><br>
<label> Address : </label><input type = "text" name =
"Address" placeholder="enter your address"min = "5" max = "50"><br><br>
<label>DOB : </label><input type = "date" name = "date"
placeholder="date">
</fieldset>
<fieldset>
<legend>Resume</legend>
<p><input type = "file" name = "file "></p>
</fieldset>
<fieldset>
<legend>Experience</legend><label>Minimum years of
Experience</label>
<input type = "range" min = "0" max = "15" ><br><br>
<label>Communication</label><input type = "number " name =
"level"min="1" max = "10" placeholder = " Select out of 10"><br><br>
<legend>Links to share projects : </legend><input type =
"url" name = "url">
</fieldset>
<br><br>
<fieldset>
<label>Time</label><input type = "time" name =
"time"><br><br>
<button class="button"name = "Submit" placeholder =
"submit ">Submit</button><br>
</fieldset>
</form>
<br>
<hr>
<p>META TAG</p>
<meta name="Description"content="Description of your site"><br>
<meta name="keywords"content="keywords describing your site"><br>
<meta HTTP-
EQUIV="Refresh"CONTENT="4;URL=http://www.yourdomain.com/"><br>
<meta http-equiv="Pragma" content="no-cache"> Nothing will show
(Tip)<br>
<meta name="rating" content="General"> Nothing will show (Tip)<br>
<meta name="robots" content="all"> Nothing will show (Tip)<br>
<meta name="robots"content="noindex,follow"><br><hr>
<p>WORDBREAK TAG</p>
<p>To learn AJAX, you must be familiar with the
XML<wbr>Http<wbr>Request Object.</p><hr>
<p>VIDEO TAG</p>
<video width="320" height="240" controls>
<source src="Mazhaikkulle.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><hr>
<p>VARIABLE TAG</p>
<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><HR>
<p>TIME DATE TAG</p>
<p>Open from <time>10:00</time> to <time>21:00</time> every
weekday.</p>
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.jpg">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.jpg">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffe.jpg">
</map>
<br><hr>
<p>ARTICLE TAG</p>
<article>
<h1>Google Chrome</h1>
<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><br><hr>
<p>LABEL AND TEXT AREA TAG</P>
<textarea id="MYreview" name="MYreview" rows="4" cols="50">
At Schools.com you will learn how to make a website.
</textarea>
<br><hr>
<p>ASIDE TAG</p>
<p>My family and I 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 a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</aside><br><hr>
<p>SVG GRAPHICS SHAPES</p>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
/>
</svg><br><hr>
<p>AUDIO TAG</p>
<audio controls>
<source src="Mazhaikkulle Song.mp3" type="audio/mp3">
</audio><br><hr>
<p>BDI TAG</p>
<ul>
<li>The bdi tag <bdi>isolates a part of text
that might be formatted in a different direction from other text outside
it.</bdi>:</li>
<br><hr><p>BDO TAG</p>
<p>my name is saranya</p>
<p><bdo dir="rtl">my name is saranya</bdo></p> <br><hr>
<p>BUTTON TAG</p>
<button type="button" onclick="alert('Hello world!')">Click Me!
</button><br><hr>
<p>CANVAS TAG</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
grey"></canvas>
<br><hr>
<p>CODE TAG</p>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<br><hr>
<p>DATALIST ELEMENT TAG</p>
<form action="" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form><br><hr>
<p>DETAIL TAG</p>
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting
attractions, international pavilions, award-winning fireworks and seasonal
special events.</p>
</details><br><hr>
<p>DIALOGUE TAG</p>
<dialog open>This is an open dialog window</dialog>
<br><br><br>
<hr>
<p>FIGURE CAPTION ELEMENT</p>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:30%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<br><hr>
<p>FOOTER TAG</p>
<footer>
<p>Author: Hege Refsnes<br>
<a href="https://www.w3schools.com/">w3schools.com</a></p>
</footer>
<br><hr>
<p>KBD TAG - define keyboard input.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p><br><hr>
<p>LINK TAG</p>
<link rel="stylesheet" href="styles.css">link of css<br><hr>
<p>MAIN TAG</p>
<main>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p><br><hr>
<p>MARK TAG</p>
<p>Do not forget to buy <mark>milk</mark> today.</p><br><hr>
<p>METER TAG</p>
<p>The meter element is used to display a gauge:</p>
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter><br><hr>
<p>NAVIGATION TAG</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<br><hr>
<p>SCRIPT AND NOSCRIPT TAG</p>
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
<br><hr>
<p>OBJECT TAG</p>
<object data="pic_trulli.jpg" width="300" height="200"></object>
<br><hr>
<p>OPTGROUP TAG</p>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br><hr>
<p>OUTPUT TAG</p>
<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>
<br><hr>
<P>THE PARAM ELEMENT</p>
<object data="Mazhaikkulle Song.mp3">
<param name="autoplay" value="true">
</object><br><hr>
<p>PICTURE TAG</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>
<br><hr>
<p>PROGRESS TAG</p>
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress><br><hr>
<p>RUBY TAG-</p><br>
<pre>rt together with ruby and rp
The ruby element consists of one or more characters that needs an
explanation/pronunciation,
and an rt element that gives that information, and an optional
rp element that defines what to show for browsers that not support ruby
annotations.</pre><br>
<ruby>
漢 <rp>(</rp><rt>ㄏㄢˋ</rt><rp>)</rp>
</ruby>
<br><hr>
<p>SAMP ELEMENT</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
<br><hr>
<p>SEARCH TAG</p>
<search>
<form>
<input name="fsrch" id="fsrch" placeholder="Search Schools">
</form>
</search><br><hr>
<p>SECTION ELEMENT</p>
<section>
<p>The World Wide Fund for Nature (WWF) is an international organization
working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in
1961.</p>
</section><br><hr>
<p>SPAN TAG</p>
<p>My mother has
<span style="color:blue;font-weight:bold">blue</span>
eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span>
eyes.</p>
<br><hr>
<p>XMP TAG</p>
<xmp>Renders text in a single-spaced font without rendering
HTML.</xmp><br><hr>
<p>TRACK TAG</p>
<video width="320" height="240" controls>
<track src="Mazhaikkulle.mp4" kind="subtitles" srclang="en"
label="English">
</video><br><hr>
<p>SPACER TAG</p>
<spacer>good</spacer><br><hr>
<p>KEYGEN TAG-used to specify a key-pair generator field in a form</p>
<form>
Username: <input type="text" name="uname">
<br><br>
Encryption: <keygen name="secure">
<input type="submit">
</form><br><hr>
</body><hr>
</html>