HTML-5 Tags

dd
Head tags:
<title>,<style>,<script>,<link>,<meta> and <base>.
Text-formatting tags:
<h>,<b>,<strong>,<small>,<pre>,<i>,<em>,<sub>,<sup>,<ins>,<dfn>,<
del>,<div> and <span>.
Link tags:
<a>, <base>.
List tags:
<ul>, <ol>, <li>, <dl>, <dd>
Table tags:
<table> ,<tr> , <td>, <th>, <thead>, <tbody>, <tfoot>.
Form tags:
<form>, <input>, <select>, <option>, <button>, <label>, <fieldset>,
<textarea>.
Scripting tags:
**<script>, <noscript>
Image and Object tags:
<img>, <figure>, <figcaption>, <area>, <map>, <object>.
HEAD TAGS:
<head>
<meta charset="UTF-8">
<meta name="author" content="GOMATHI CHARLEY">
<meta name="description" content="MERN-STACK-HTML-FILE">
<meta name="keywords" content="MERN STACK, HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
Wont be displayed in our design , required for machine or developer

SPECIAL META TAG:
**<meta http-equiv="refresh" content="20">
Refresh ur document every 20 seconds

So u add something in ur html file , just save , don’t refresh ur
browser output, it gets refreshed every 20 secs
VIEW PORT:
----------
<base>
Two attributes
Base url or relative url and **target
<base href="https://unsplash.com/" target="_blank">

Now add an anchor tag…..link to some web page , will open in new window
So lets say we give relative url for an image, it will search for it in the url website what u give in base
Note: thr should be one base for all relative url
Ex:
Base url : www.films.com
Relaive - ./tamil
TEXT FORMATTING TAGS:
Small ------ to emphasize on copywrite text like that
Can use more advanced using css
Pre ----- content given here will be stand alone text will take its required space wont get wrapped
Em – emphasized tag, displayed in italics, readers give emphasize while reading
Sub and sup:
h<sub>2</sub>o
a<sup>2</sup>+b<sup>2</sup>
del … ins
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
DIV – ACTING AS CONTAINER:
<div style="background-color:#FFF4A3;">
<h2>DIV BLOCK 1</h2>
<p></p>
</div>
<div style="background-color:#FFC0C7;">
<p></p>
</div>
<div style="background-color:#D9EEE1;">
<p></p>
</div>
</body>
DO OTHER COMBINATIONS USING DIV
Display above output paragraps side by side using float
Add this in above code
<style>
div {
width:30%;
display:inline-block;
}
</style>
Float:
<style>
div.mycontainer {
width:100%;
overflow:auto;
div.mycontainer div {
width:33%;
float:left;
</style>
SPAN:
Same as div
Div is block
Span is inline(particular area of text)
Use below code inside body
<span style="color:red">span span in red</span></p>
<a href=https://en.wikipedia.org/wiki/MS_Dhoni>doni</a>
ORDERED AND UNORDERED LIST:
<ol>
<lh>flowers</lh>
<li>rose</li>
<li>lilly</li>
</ol>
<ul>
<lh>flowers</lh>
<li>rose</li>
<li>lilly</li>
</ul>
TABLE:
<table>
<th>NAME</th>
<th>FAV-COMEDIAN</th>
<tr>
<td>sylvia</td>
<td>vadivelu</td>
</tr>
<tr>
<td>sam</td>
<td>Mr Bean</td>
</tr>
</table>
TABLE BORDER:
<table border="5">
<style>
table, th, td {
border: 5px solid red;
border-collapse: collapse;
}
</style>
th, td {
background-color: yellow;
}
Designs
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
th, td {
background-color: yellow;
}
</style>
font-size: 20px;
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
VERTICAL TABLE:
<table border="1">
<tr>
<th>SPORT</th>
<td>FOOT BALL</td>
<td>CRICKET</td>
</tr>
<tr>
<th>PLAYER</th>
<td>MESSI</td>
<td>DHONI</td>
</tr>
<tr>
<th>COUNTRY</th>
<td>BRAZIL</td>
<td>INDIA</td>
</tr>
</table>
PADDING SPACING
Padding – space inside content
Spacing – space outside content
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
MERGING CELLS:
Rowspan / colspan
<tr>
<th colspan="2">ANIMAL</th>
<th>BREED</th>
</tr>
<tr>
<td>DOG</td>
<td>FOX</td>
<td>BIRD</td>
</tr>
<tr>
<td>LAB</td>
<td>Jack</td>
<td>COCKTAIL</td>
</tr>
</table>
Check striped odd or even rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="10">
<title>CHECK THIS OUT</title>
<script></script>
<base href="https://unsplash.com/" target="_blank">
<style>
div {
width:30%;
display:inline-block;
}
</style>
</head>
<body>
<h1>be happy yaaaaar</h1>
<p><small>SMALL</small>dgdgdgdg <pre >65656565656565656 45454545454
77676767676 787878787 878787
888888888888888888888888888888888888888888888888888888888888888888888888888888
888888888888888888888888888888888888888888888888888888888888888888888888888888
88888888888888888888888888888888888888888888888888888888888888888</pre> gfg
fgf g fg fg fg f gf g fg f gf g
<em>emphasize</em>
h<sub>2</sub>o
a<sup>2</sup>+b<sup>2</sup>
kjkjkjkkj jgjgjgjgjg jjgjgjgjgjg</p>

<h2>hellalooooooooooooo helloooooooooooooooooooooooooooooooooo</h2>
<h1>come on come on come on</h1>
<a href="https://www.w3schools.com/tags/tryit.asp?
filename=tryhtml_base_test">click</a>
<div style="background-color:#FFF4A3;">
<p></p>
</div>
<div style="background-color:#FFC0C7;">
<p></p>
</div>
<div style="background-color:#D9EEE1;">
<p></p>
</div>
<p>
<span style="color:red">span span in red</span></p>
<a href="https://en.wikipedia.org/wiki/MS_Dhoni">dhoni</a>
<ol>
<lh>flowers</lh>
<li>rose</li>
<li>lilly</li>
</ol>
<ul>
<lh>flowers</lh>
<li>rose</li>
<li>lilly</li>
</ul>
<table border="5">
<th>NAME</th>
<th>FAV-COMEDIAN</th>
<tr>
<td>sylvia</td>
<td>vadivelu</td>
</tr>
<tr>
<td>sam</td>
<td>Mr Bean</td>
</tr>
</table>
<table border="1">
<tr>
<th>SPORT</th>
<td>FOOT BALL</td>
<td>CRICKET</td>
</tr>
<tr>
<th>PLAYER</th>
<td>MESSI</td>
<td>DHONI</td>
</tr>
<tr>
<th>COUNTRY</th>
<td>BRAZIL</td>
<td>INDIA</td>
</tr>
</table>
<tr>
<th rowspan="2">ANIMAL</th>
<th>BREED</th>
</tr>
<tr>
<td>DOG</td>
<td>FOX</td>
<td>BIRD</td>
</tr>
<tr>
<td>LAB</td>
<td>Jack</td>
<td>COCKTAIL</td>
</tr>
</table>
</body>
</html>
ZEBRA STRIPES – NTH CHILD
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th:nth-child(even),td:nth-child(even) {
background-color: purple;
}
</style>
</head>
<body>
<tr>
<th>ONE</th>
<th>TWO</th>
<th>THREE</th>
<th>FOUR</th>
<th>FIVE</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
HOW CAN I GET THE BELOW TABLE AND 3RD AND 4TH COLUMN SHOULD BE COLOURED
MO TU WE TH FR SA SU
N E D U I T N
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
Use colgroup
<head>
<style>
table, th, td {
}
</style>
</head>
<body>
<table style="width: 20%;">
<colgroup>
<col span="2">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
FORMS:label and input
<!DOCTYPE html>
<html>
<body>
<form>
<label for="name">User name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="pswd">Password:</label>
<input type="password" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
INPUT TYPES – TEXT/ PASSWORD/ RADIO/ CHECK BOX/ SUBMIT/ BUTTON
<input type="button" id="but" name="but" value="button-clickme" ><br><br>
FORM ELEMENTS:
<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist>

<output> <option> <optgroup>
DROP DOWN MENU(SELECT)
<label for="drmenu">SELECT:</label>
<select id="ns" name="NUMBERS">
<option value="one">ONE</option>
<option value="two">TWO</option>
<option value="three">THREE</option>
NOTE – WANT TO KEEP A PARTICULAR VALUE AS DEFAULT

SELECTED ITEM THEN ADD <option value=”three” selected>
<select id="ns" name="NUMBERS" size=”4” multiple>

Here 4 items will be visible
Multiple items can be selected
Text area
<textarea name="message" rows="5" cols="10">first line second line
thrid line</textarea>
Button
<button type="button" onclick="alert('check man')">Click Me!</button>
MULTIMEDIA TAGS:
Video
<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
IFRAME:
<iframe src="https://www.britannica.com/biography/Lionel-Messi" title="MESSI">

</iframe>
Mini projects using html/ css:
1.create your resume

2.An attractive landing page for india.com website
3.Restaurant menu
1.create your resume

Include your photo/ title/ objective/ contact details/project details
You have to use, links, anchor tag
Projects explanation has to be given like
Project 1 project 2 and while clicking on that project details should
open in a new window.
2.An attractive landing page for an Event
Must Includes : Map for location
Multiple pics for individual events
Registration form
3.Restaurant menu
Includes – chain of thr outlets with location
Menu
List of items
Description
Price
Over all and individual items offer details
QUIZ:
1.Which is the base file for Mern stack?

2.What is the difference between <div> and <span>
3.To refresh your web page automatically what element has to be
included in your html file?
4.Html 5 accepts <big>
5.Write a piece of code to display below output
Have fun:
10.Be in present
11.Be positive
12.Watch comedy clips
13.Have friends
14.Celebrate your life
6.what are the two extensions you can use for html file?
7.fill the blank with suitable answer to open ur link in a new window
<a href=”Mern Rockers” ------- >My website</a>
8.write block of code to create the below table – content can be
changed.
9.write simple code to create two files html and css , link css with
html
10.write any three selectors of css
TASK:
Create an attractive landing page for india.com website with Indian map
added to it
CSS SELECTORS:
 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)
Universal selector – all elements will get affected

Css will be like this
*{
}
GROUPING SELECTOR
HTML has h1, p
Css will be like
H1,p{
}
So all h1 and p will have same style mentioned here
FORENOON - QUIZ -2 – 5JAN-2024:
1.Mention any 7 tags associated with <form>
2.write a html code, which contains content in the below format
Paragraph -1, h1,h3,paragraph -2,h5,paragraph6
Now write code to style paragraph-1 and 2,h5 with same style, and h1
and h3 with same style(use appropriate selectors)
3.what is the maximum size of the table you can create in html 5
4.To creat a dropdown menu with options Idly,dosa,vada,poori,Pongal
write the program
5.what is the difference between id and class selector?
6.Expand MERN
7.What is rowspan and colspan used for
8.write down piece of code to create email login form
9.write down the types of Psuedo class selectors
10.I want to change my link color from red to purple whenever I hover
over the link called “Click me to see Dhoni pictures”
AFTERNOON TASK:
Create login student registration form

HTML-5 Tags

Uploaded by

Copyright:

Available Formats

HTML-5 Tags

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML-5 Tags

Uploaded by

Copyright:

Available Formats

dd

Wont be displayed in our design , required for machine or developer

Refresh ur document every 20 seconds

Base url or relative url and **target

<base href="https://unsplash.com/" target="_blank">

Note: thr should be one base for all relative url

Base url : www.films.com

TEXT FORMATTING TAGS:

Small ------ to emphasize on copywrite text like that

Can use more advanced using css

Em – emphasized tag, displayed in italics, readers give emphasize while reading

Sub and sup:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

DIV – ACTING AS CONTAINER:

DO OTHER COMBINATIONS USING DIV

Display above output paragraps side by side using float

Add this in above code

Span is inline(particular area of text)

Use below code inside body

<span style="color:red">span span in red</span></p>

ORDERED AND UNORDERED LIST:

Padding – space inside content

Spacing – space outside content

Check striped odd or even rows

kjkjkjkkj jgjgjgjgjg jjgjgjgjgjg</p>

<span style="color:red">span span in red</span></p>

<input type="submit" value="Submit">

INPUT TYPES – TEXT/ PASSWORD/ RADIO/ CHECK BOX/ SUBMIT/ BUTTON

<input type="button" id="but" name="but" value="button-clickme" ><br><br>

<input> <label> <select> <textarea> <button> <fieldset> <legend> <datalist>

DROP DOWN MENU(SELECT)

NOTE – WANT TO KEEP A PARTICULAR VALUE AS DEFAULT

<select id="ns" name="NUMBERS" size=”4” multiple>

<video width="320" height="240" autoplay>

<iframe src="https://www.britannica.com/biography/Lionel-Messi" title="MESSI">

Mini projects using html/ css:

1.create your resume

1.create your resume

1.Which is the base file for Mern stack?

 Simple selectors (select elements based on name, id, class)

Universal selector – all elements will get affected

You might also like