JAI ENTERPRISES
Html tutorial
*************************************************
Html text formatting tags:-
Heading<hn></hn>
Paragraph<p></p>
Bold<b></b>
Italic<i></i>
Underline<u></u>
Strikethrough<s></s>
HEADING TAG:-
JAI ENTERPRISES
ANS
****************************************************************************
PARAGRAPH:-
JAI ENTERPRISES
ANS:-
***************************************************************************
Bold, italic, underline, strikethrough
JAI ENTERPRISES
Ans:-
*****************************************************************************
Html text formatting tags:-
Align <tag align=”right or centre or left or justify”>statement</tag>
Sub script<sub></sub>
Super script<sup></sup>
JAI ENTERPRISES
Break<br/>
Non breaking space( )
Align:-
Ans:-
JAI ENTERPRISES
***********************************************************
Superscript, subscript, break:-
Ans:-
JAI ENTERPRISES
************************************************************
Mark <mark></mark>
Strong <strong></strong>
Em <em></em>
Align align=”right left center justify”
Big <big></big>
Small <small></small>
Ans:-
JAI ENTERPRISES
***********************************************************
 
JAI ENTERPRISES
Ans:-
**********************************************************
Html text formatting tag:-
Font tag:-
Color <font color=” ” >text</font>
Size<font size=””>text</font>(1 to 7 sizes are available)
Face <font face=”arial”>text</font>
Ans:-
JAI ENTERPRISES
*****************************************************************************
Ans:-
JAI ENTERPRISES
***************************************************************************
Tags:-
<html></html>
<head></head>
<title></title>
<body></body>
<p></p>
<hn></hn>
<br><hr>------self closing tag
<b></b>,<i></i>,<u></u>,<strong></strong>,<em></em>,<mark></mark>,<s></s>
<sub></sub>
<sup></sup>
<small></small>,<big></big>
Align=””
<font color=”” size=”” face=””></font>
bgcolor=”tan”
Html listing tag
Comment:-<!—gkggg-->
[Link] list<ul></ul>
[Link] list<ol></ol>
[Link] list<dl></dl>
JAI ENTERPRISES
<ul style="list-style-type:circle;"> <!--square,disk,none-->
<li>facebook</li>
<li>insta</li>
</ul>
<ol type="A">
<li>css</li>
<li>c++</li>
</ol>
<ol type="1" start="5">
<li>css</li>
<li>c++</li>
</ol>
<ol type="A" start="7">
<li>css</li>
<li>c++</li>
</ol>
<dl>
<dt>facebook</dt>
<dd>social media platform</dd>
</dl>
<ol type="1">
<li>frontend
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</li>
<li>backend
<ul>
<li>java</li>
<li>python</li>
</ul>
</li>
</ol>
Ans:-
JAI ENTERPRISES
o facebook
o insta
A. css
B. c++
5. css
6. c++
G. css
H. c++
facebook
social media platform
1. frontend
o html
o css
o javascript
2. backend
*******************************************************************************
MARQUEE:-
bahavior—slide,scroll,alternate
scrollamount=”10” for increasing speed
direction=right,left,up,down
loop=”2”you can mention here how much time do you want to scroll.
bgcolor=”pink” for bg color
Width=”20%”
Height=”20%”
<marquee bahavior=”scroll”>hello</marquee>
JAI ENTERPRISES
***************************************************************************
hr:-
width=”20%”
align=”center”
size=”10”
color=”pink”
noshade
<hr width=”20%” align=”left” size=”10” color=”pink” noshade />
Pre:-
JAI ENTERPRISES
Pre formatted tag <pre> hello world</pre>
Image:-
<img src=”[Link]” height=”in px” width=”in px” alt=”” title=””/>
Anchor tag:-
external page link
internal page link
mailto link
<a >click here</a>
<a href=”[Link]” target=”_blank/_self”>click here</a>
For internal link
1.<a href=”#linkone”>goto</a>
2.<h2><a name=”linkone”>sub heading</a></h2>
TABLE TAG:-
Table data<td></td> Table data<td></td>
Table row<tr></tr>
Table tag<table></table>
Properties of table:-
[Link] layout
[Link] layout
JAI ENTERPRISES
<table>
<tr>
<td>
</td>
</tr>
</table>
[Link]=”1” ,width=”100px/100%” ,cellpadding=”10px”
Cellspacing=”10px”, align=”top/bottom/left/right/center”
Valign=”top/bottom/middle” bgcolor=”red”, height=”200px”
JAI ENTERPRISES
Table tag:-
Colspan
Colspan=”2”
Rowspan
rowspan=”2”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>colspan</title>
</head>
<body>
<h1 align="center"> colspan</h1>
<table border="1" align="center" width="50%" cellpadding="10px" cellspacing="0px">
<tr>
<td height="100px">A</td>
<td>B</td>
</tr>
<tr>
<td height="100px" colspan="2">C Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a magna
vulputate, vulputate lectus nec, porttitor nibh. Vivamus lobortis maximus eros eget fermentum. Suspendisse
luctus nisi vel tortor dignissim malesuada. Phasellus tristique lectus eros. Curabitur quis aliquet tortor. Sed auctor
porta condimentum. Nulla auctor pellentesque dui sed bibendum. In metus augue, pretium ac hendrerit id,
gravida interdum nisi.</td>
</tr>
<tr>
JAI ENTERPRISES
<td height="100px">E</td>
<td>F</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rowspan</title>
</head>
<body>
<h1 align="center"> colspan</h1>
<table border="1" align="center" width="50%" cellpadding="10px" cellspacing="0px">
<caption>record</caption>
<tr>
<td height="100px">A</td>
<td>B</td>
</tr>
<tr>
<td height="100px" rowspan="2">C </td>
<td height="100px">D</td>
</tr>
<tr>
<td height="100px" >F</td>
</tr>
</table>
</body>
</html>
JAI ENTERPRISES
Table layout:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table layout</title>
</head>
<body>
<table width="80%" border="1" cellspacing="0px" align="center" cellpadding="10px">
<tr bgcolor="pink">
<td colspan="2"><h1>Site Name</h1> </td>
</tr>
<tr bgcolor="orange">
<td colspan="2">
<a href="">Home</a>|
<a href="">About Us</a>|
<a href="">Gallary</a>|
<a href="">FAQ</a>|
<a href="">Contact Us</a>
</td>
</tr>
<tr>
<td width="80%">
<h2>Sub Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac eros in lorem lacinia cursus in ac erat. Cras at
ultrices erat. Nam tristique scelerisque odio, et efficitur risus pretium sit amet. Integer tristique tellus dui, vel
dapibus ex volutpat ac. Vestibulum in dictum justo. Sed ut leo eu massa commodo ullamcorper. Sed neque
lectus, pellentesque id purus sed, vestibulum vulputate turpis. Suspendisse potenti. Aliquam eu est nec dui
dapibus fringilla. Ut rutrum mi vitae commodo varius. Ut mattis tortor velit, eget sollicitudin sapien rhoncus
nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac eros in lorem lacinia cursus in ac erat. Cras at
ultrices erat. Nam tristique scelerisque odio, et efficitur risus pretium sit amet. Integer tristique tellus dui, vel
dapibus ex volutpat ac. Vestibulum in dictum justo. Sed ut leo eu massa commodo ullamcorper. Sed neque
JAI ENTERPRISES
lectus, pellentesque id purus sed, vestibulum vulputate turpis. Suspendisse potenti. Aliquam eu est nec dui
dapibus fringilla. Ut rutrum mi vitae commodo varius. Ut mattis tortor velit, eget sollicitudin sapien rhoncus
nec.</p>
</td>
<td valign="top">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Gallary</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</td>
</tr>
<tr bgcolor="pink">
<td colspan="2">@copyright sitename 2018</td>
</tr>
</table>
</body>
</html>
JAI ENTERPRISES
****************************************************************************************
Table tag
th <th></th>
thead <thead><thead>
tbody <tbody></tbody>
tfoot <tfoot></tfoot>
caption <caption></caption>
JAI ENTERPRISES
Ans:-
******************************************************************************************
JAI ENTERPRISES
Thead, tfoot, tbody:-
Ans:-
JAI ENTERPRISES
******************************************************************************************
Iframe:-
<html>
<head>
<title>iframe</title>
</head>
<body>
<iframe src=”[Link] width=”500px” height=”500px” align=”right” frameborder=”1”></iframe>
JAI ENTERPRISES
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet sapien urna. Duis sed massa tempus, fringilla
eros eu, rutrum nisi. Suspendisse id lacus eget ipsum mollis tincidunt. Praesent dolor velit, tristique condimentum
aliquam quis, dictum ut tellus. Quisque eu convallis turpis.</p>
</body>
</html>
Select tag:-
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
JAI ENTERPRISES
******************************************************
Audio tag:-
Support only
mp3
Ogg
wav
<html>
<body>
<audio controls autoplay loop muted>
<source src=” /h.mp3 ” type=”audio/mpeg”/>
</audio>
</body>
</html>
******************************************************
Video tag:-
mp4
webM
Ogg
<html>
<body>
<video controls autoplay loop muted width=”300” height=”200”
poster=”[Link]”>
<source src=” /h.mp4 ” type=”video/mp4”/>
<source src=” /[Link] ” type=”video/webm”/>
<source src=” /[Link] ” type=”video/ogg”/>
</video>
</body>
</html>
*****************************************************************************
JAI ENTERPRISES
Form tag:-
Form
Label
Input
Fieldset
Legend
1.<form action=”” method=””></form>
2.<label for=””> </label>
3.<input type=”” name=”” id=”” value=”” placeholder=””/>
4.<fieldset></fieldset>
5.<legend>detail</legend>
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="">
<fieldset>
<legend>personal detail</legend>
<label>Name</label> <input type="text" name="fname" value="" placeholder="enter
name"><br><br>
<label>Password</label> <input type="password" name="pname" value="password"><br><br>
<label>Gender</label>
<input type="radio" name="gender" id="male"><label for="male">male</label>
<input type="radio" name="gender" id="female"><label for="female">female</label><br><br>
JAI ENTERPRISES
<label>Hobbies</label>
<input type="checkbox" name="hobby" id="music"><label for="music">Music</label>
<input type="checkbox" name="hobby" id="football"><label for="football">football</label>
<input type="checkbox" name="hobby" id="dance"><label for="dance">Dance</label>
<input type="checkbox" name="hobby" id="reading">
<label for="reading">reading</label><br><br>
<label>Message</label>
<textarea rows="10" cols="40">this is textarea</textarea>
<label>country</label>
<select name="" size="2" multiple required autofocus>
<option value="in">India</option>
<option value="ch" selected>China</option>
<option value="ne">Nepal</option>
<option value="pk">Pakistan</option>
</select><br><br>
<label>country</label>
<select>
<optgroup label="country name:">
<option value="in">India</option>
<option value="ch" selected>China</option>
<option value="ne">Nepal</option>
<option value="pk">Pakistan</option>
</optgroup>
</select><br><br>
<label>cars</label> <input list="cars">
<datalist id="cars">
<option value="Innova">
<option value="kwid">
<option value="Etios">
<option value="Swift">
JAI ENTERPRISES
<option value="Duster">
</datalist><br><br>
<label> Upload file</label> <input type="file" name=""/>
<label> Upload file</label> <input type="file" accept=”image/*” name=""/>
<label> Upload file</label> <input type="file" accept=”audio/.mp3” name=""/>
<label> Upload file</label> <input type="file" accept=”image/.png” name=""/>
<label> Upload file</label> <input type="file" accept=”video/*” name=""/>
<input type="submit" value="save"/>
<input type="button" value="click"/>
<input type="reset" value="Reset"/>
<input type="image" src="C:/Users/ABC/Documents/PROGRAMF/[Link]" width="30px"
height="30px" alt="submit"/>
</fieldset>
</form>
</body>
</html>
Ans:-
JAI ENTERPRISES
Input type:-
Text
Password
Radio
Checkbox
File
Submit
Button
Reset
Image
JAI ENTERPRISES
New html5 new input tag:-
Color
Number
Range
Date
Datetime-local
Month
Week
Time
Email
Search
Tel
url
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label>select color : </label> <input type="color" name=""/><br><br>
<label>Number : </label> <input type="number" name="" min="1" max="100"
step="10"/><br><br>
<label>range : </label> <input type="range" name="" min="1" max="50" step="2"/><br><br>
<label>date : </label> <input type="date" name="" /><br><br>
<label>date-time: </label> <input type="datetime-local" name=""/><br><br>
<label>month : </label> <input type="month" name=""/><br><br>
<label>week : </label> <input type="week" name=""/><br><br>
<label>time : </label> <input type="time" name=""/><br><br>
JAI ENTERPRISES
<label>email : </label> <input type="email" name=""/><br><br>
<label>search : </label> <input type="search" name=""/><br><br>\
<label>tel : </label> <input type="tel" name=""/><br><br>
<label>url : </label> <input type="url" name=""/><br><br>
</body>
</html>
Ans:-