WebD Unit-2
WebD Unit-2
When a web browser reads an HTML document, browser reads it from top to bottom and left
to right. HTML tags are used to create HTML documents and render their properties. Each
HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate between a
simple text and HTML text. You can use as many tags you want as per your code
requirement.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag> (except
some tags)
Syntax
<tag> content </tag>
Test it Now
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a
single blank line between the two paragraphs.
Output:
1. <p>
2. I am
3. going to provide
4. you a tutorial on HTML
5. and hope that it will
6. be very beneficial for you.
7. </p>
8. <p>
9. Look, I put here a lot
10. of spaces but I know, Browser will ignore it.
11. </p>
12. <p>
13. You cannot determine the display of HTML</p>
14. <p>because resized windows may create different result.
15. </p>
Test it Now
Output:
I am going to provide you a tutorial on HTML and hope that it will be very beneficial for
you.
Look, I put here a lot of spaces but I know, Browser will ignore it.
As you can see, all the extra lines and unnecessary spaces are removed by the browser.
An HTML <br> tag is used for line break and it can be used with paragraph elements.
Following is the example to show how to use <br> with <p> element.
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h2> Use of line break with pragraph tag</h2>
7. <p><br>Papa and mama, and baby and Dot,
8. <br>Willie and me?the whole of the lot
9. <br>Of us all went over in Bimberlie's sleigh,
10. <br>To grandmama's house on Christmas day.
11. </p>
12. </body>
13. </html>
Test it Now
Output:
An HTML <hr> tag is used to apply a horizontal line between two statements or two
paragraphs. Following is the example which is showing use of <hr> tag with paragraph.
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
Note: We can create a list inside another list, which will be termed as nested List.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ol>
Test it Now
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Test it Now
Output:
o Aries
o Bingo
o Leo
o Oracle
The definition list is very appropriate when you want to present glossary, list of terms or
other name-value list.
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
Test it Now
Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
Test it Now
Output:
Test it Now
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.
Type "i" In this type, the list items are numbered with lower case roman numbers.
Type "A" In this type, the list items are numbered with upper case letters.
Type "a" In this type, the list items are numbered with lower case letters.
1. <ol>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
1. HTML
2. Java
3. JavaScript
4. SQL
ol type="I"
1. <ol type="I">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
I. HTML
II. Java
III. JavaScript
IV. SQL
ol type="i"
1. <ol type="i">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
i. HTML
ii. Java
iii. JavaScript
iv. SQL
ol type="A"
1. <ol type="A">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
A. HTML
B. Java
C. JavaScript
D. SQL
ol type="a"
1. <ol type="a">
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
a. HTML
b. Java
c. JavaScript
d. SQL
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="1" start="5"> : It will show numeric values starting with "5".
<ol type="A" start="5"> : It will show capital alphabets starting with "E".
<ol type="a" start="5"> : It will show lower case alphabets starting with "e".
<ol type="I" start="5"> : It will show Roman upper case value starting with "V".
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
Output:
v. HTML
vi. Java
vii. JavaScript
viii. SQL
reversed Attribute:
This is a Boolean attribute of HTML <ol> tag, and it is new in HTML5 version. If you use
the reversed attribute with
tag then it will numbered the list in descending order (7, 6, 5, 4......1).
Example:
1. <ol reversed>
2. <li>HTML</li>
3. <li>Java</li>
4. <li>JavaScript</li>
5. <li>SQL</li>
6. </ol>
Test it Now
Output:
HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of
<tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data
is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page .
Tag Description
<col> It is used with <colgroup> element to specify column properties for each column.
Let's see the example of HTML table tag. It output is shown above.
1. <table>
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now
Output:
In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.
You can use border attribute of table tag in HTML to specify border. But it is not
recommended now.
1. <table border="1">
2. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3. <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
4. <tr><td>James</td><td>William</td><td>80</td></tr>
5. <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
6. <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
7. </table>
Test it Now
Output:
First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. }
5. </style>
Test it Now
You can collapse all the borders in one border by border-collapse property. It will collapse
the border into one.
1. <style>
2. table, th, td {
3. border: 2px solid black;
4. border-collapse: collapse;
5. }
6. </style>
Test it Now
Output:
You can specify padding for table header and table data by two ways:
The cellpadding attribute of HTML table tag is obselete now. It is recommended to use CSS.
So let's see the code of CSS.
1. <style>
2. table, th, td {
3. border: 1px solid pink;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
Test it Now
Output:
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
We can specify the HTML table width using the CSS width property. It can be specify in
pixels or percentage.
We can adjust our table width as per our requirement. Following is the example to display
table with width.
1. table{
2. width: 100%;
3. }
Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>table</title>
5. <style>
6. table{
7. border-collapse: collapse;
8. width: 100%;
9. }
10. th,td{
11. border: 2px solid green;
12. padding: 15px;
13. }
14.
15. </style>
16. </head>
17. <body>
18. <table>
19. <tr>
20. <th>1 header</th>
21. <th>1 header</th>
22. <th>1 header</th>
23. </tr>
24. <tr>
25. <td>1data</td>
26. <td>1data</td>
27. <td>1data</td>
28. </tr>
29. <tr>
30. <td>2 data</td>
31. <td>2 data</td>
32. <td>2 data</td>
33. </tr>
34. <tr>
35. <td>3 data</td>
36. <td>3 data</td>
37. <td>3 data</td>
38. </tr>
39. </table>
40. </body>
41. </html>
Test it Now
Output:
If you want to make a cell span more than one column, you can use the colspan attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on the
value of colspan attribute.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 5px;
8. }
9. </style>
HTML code:
1. <table style="width:100%">
2. <tr>
3. <th>Name</th>
4. <th colspan="2">Mobile No.</th>
5. </tr>
6. <tr>
7. <td>Ajeet Maurya</td>
8. <td>7503520801</td>
9. <td>9555879135</td>
10. </tr>
11. </table>
Test it Now
Output:
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on rowspan
values.
CSS code:
1. <style>
2. table, th, td {
3. border: 1px solid black;
4. border-collapse: collapse;
5. }
6. th, td {
7. padding: 10px;
8. }
9. </style>
HTML code:
1. <table>
2. <tr><th>Name</th><td>Ajeet Maurya</td></tr>
3. <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
4. <tr><td>9555879135</td></tr>
5. </table>
Test it Now
Output:
7503520801
Mobile No.
9555879135
HTML caption is diplayed above the table. It must be used after table tag only.
1. <table>
2. <caption>Student Records</caption>
3. <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
4. <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
5. <tr><td>Mike</td><td>Warn</td><td>60</td></tr>
6. <tr><td>Shane</td><td>Warn</td><td>42</td></tr>
7. <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
8. </table>
Test it Now
HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc. .
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill the form such
as shipping address and credit/debit card details so that item can be sent to the given address.
Tag Description
The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.
Note: The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.
Syntax:
1. <form>
2. //Form elements
3. </form>
The HTML <input> element is fundamental form element. It is used to create form fields, to
take input from user. We can apply different input filed to gather different information form
user. Following is the example to show the simple text input.
Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>
Output:
HTML TextField Control
The type="text" attribute of input tag creates textfield control also known as single line
textfield control. The name attribute is optional, but it is required for the server side
component such as JSP, ASP, PHP etc.
1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>
Output:
Note: If you will omit 'name' attribute then the text filed input will not be submitted to server.
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>
Output:
If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if you will use it,
then it will provide a focus when you tap or click on label tag. It is more worthy with
touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>
Output:
1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/> <br/>
4. </form>
Output:
HTML 5 Email Field Control
The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field
1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>
Note: If we will not enter the correct email, it will display error like:
Radio Button Control
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.
1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/>Male
4. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
5. </form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes
1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="cricket"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="football"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hockey"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options at a time and
radio button can select one button at a time, and its display.
Output:
HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.
Syntax:
The value attribute can be anything which we write on button on web page.
The name attribute can be omit here.
Example:
1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>
Output:
HTML <fieldset> element:
The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.
Example:
1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. lt;/form>
Output:
HTML Form Example
Following is the example for a simple form of registration
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/>Male <br>
21. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>
Output: