NETWORKING & WEB DESIGNING
DAY-06
HTML Iframe:-
Output web page shows another web page inside the output web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>java-tutorial</p>
<iframesrc="[Link] width="555" height="200"></iframe>
</body>
</html>
HTML Layout Elements :-
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
HTML Entities :-
Result Description EntityName Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
(apostrophe)
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
HTML Symbols :-
Char Number Entity Description
∀ ∀ ∀ FOR ALL
PARTIAL
∂ ∂ ∂
DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
NOT AN ELEMENT
∉ ∉ ∉
OF
CONTAINS AS
∋ ∋ ∋
MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
GREEK CAPITAL
Α Α Α
LETTER ALPHA
GREEK CAPITAL
Β Β Β
LETTER BETA
GREEK CAPITAL
Γ Γ Γ
LETTER GAMMA
GREEK CAPITAL
Δ Δ Δ
LETTER DELTA
GREEK CAPITAL
Ε Ε Ε
LETTER EPSILON
GREEK CAPITAL
Ζ Ζ Ζ
LETTER ZETA
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
LEFTWARDS
← ← ←
ARROW
↑ ↑ ↑ UPWARDS ARROW
RIGHTWARDS
→ → →
ARROW
DOWNWARDS
↓ ↓ ↓
ARROW
♠ ♠ ♠ BLACK SPADE SUIT
♣ ♣ ♣ BLACK CLUB SUIT
♥ ♥ ♥ BLACK HEART SUIT
BLACK DIAMOND
♦ ♦ ♦
SUIT
HTML Emojis :-
Emoji Value
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄
😅 😅
HTML Forms :-
Forms Element :-
The HTML <form> element can contain one or more of the following form elements:
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
1. <fieldset>&<legend> Tag :-
Example :-
<!DOCTYPE html>
<html>
<body>
<h2>Fieldset & Legend</h2>
<form>
<fieldset>
<legend>Form Details</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Mahesh"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Varan"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
2. <output>Tag :-
Example :-
<!DOCTYPE html>
<html>
<body>
<h2>Sum in Form</h2>
<form
oninput="[Link]=parseInt([Link])+parseInt([Link])">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
</body>
</html>
3. <optgroup> Tag :-
Example :-
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<form>
<label for="subject">Choose a Sub:</label>
<select name="subject" id="subject">
<optgroup label="Biology">
<option value="Botany">Botany</option>
<option value="Zoology">Zoology</option>
</optgroup>
<optgroup label="Computer Science">
<option value="Python ">Python</option>
<option value="Java">Java</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML Form :-
Input Types :-
Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
1.<button> :-
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
2. <checkbox> :-
<form>
<input type="checkbox" id="subject1" name=" subject1" value="Tamil">
<label for=" subject1"> I know Tamil </label><br>
<input type="checkbox" id=" subject2" name=" subject2" value="Telugu">
<label for=" subject2"> I know Telugu</label><br>
<input type="checkbox" id=" subject3" name=" subject3" value=" English ">
<label for=" subject3"> I know Telugu</label>
</form>
3.<color> :-
<form>
<label for="favcolor">Select your favoritecolor:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
4.<date> :-
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
5.<datetime-local> :-
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
6.<email> :-
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
7.<file> :-
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
8.<hidden> :-
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
9.<image> :-
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
10.<month> :-
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
11.<number> :-
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
12.<password> :-
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
13.<radio> :-
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>
14.<range> :-
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
15.<reset> :-
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
16.<search> :-
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
17.<submit> :-
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
18.<tel> :-
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
19.<text> :-
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
20.<time> :-
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
21.<url> :-
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
22.<week> :-
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>