WEB APPLICATION DEVELOPMENT
Day 2 Task
STEP 1: Open a notepad or any other editor if present on the system (e.g., visual studio)
STEP 2: create a simple html file to demonstrate the use of different tags and save this file with
“Basic_Html_Tags.html”, either on desktop or any other location in the device.
STEP 3: Run this file on any browser (Edge, Chrome, etc.)
Problem Statement 1: -
Create an html page named as “: Basic_Html_Tags.html” Add the following tags detail.
1. Within the body perform the following
a) Moving text = “Basic HTML Tags”
b) Different heading tags ( h1 to h6)
c) Paragraph
d) Horizontal line
e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style ( <b>, <u>, <sub>, <sup>. .. )
i) Different Physical style ( <code>, <del>, <kbd> .. )
j) Listing tags ( 2 types with, & each type provide different “type” attribute)
Output
Solution:
HTML Document Structure:
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Formatting and Fonts:
<br> - break tag – makes output on the next line.
<p> - paragraph tag – places a blank line before the line it is on. <hr> - horizontal tag – creates a line or horizontal rule.
<pre> - preformatted tag - enables one to embed text that is already formatted. <i> - Italic font
<b> - Bold font
<em> - Emphasis
<sup> - Superscript
<sub> - Subscript
Font Size:
<font> tag and <h. .. > tag
<h1> - 24 pt <font size=7> - 36 pt
<h2> - 18 pt <font size=6> - 24 pt
<h3> - 12 pt <font size=5> - 18 pt
<h4> - 12 pt bold <font size=4> - 12 pt bold <h5> - 10 pt <font size=3> - 12 pt plain <h6> - 7 pt <font size=2> - 9 pt
Text alignment:
<p align=”center”> - align the text in center.
<h1 align=”left”> - align the text in left.
<h2 align=”right”> - align the text in right.
The “align” tag can be used with <p> tag and <h. .. > tag Color:
1. Set background color and text color - <body bgcolor=”blue” text=”red”> <body bgcolor=”#800000”>
2. Set text color only - <font color=”brown”>
Problem Statement 2:
Aim: To create a simple html file to demonstrate the use of different list tags.
Output:
Solution:
<center><FONT COLOR="#0000FF"> Listing Tags</FONT></center> <h4>Numbered list:</h4>
<ol> <li>java</li>
<li>perl</li>
<li>c++</li>
</ol>
<h4>Letters list:</h4> <ol type="A">
<li>smtp</li> <li>http</li> <li>ftp</li>
</ol>
<h4>Lowercase letters list:</h4> <ol type="a" start="2">
<li>php</li> <li>javascript</li> <li>ajax</li>
</ol>
<h4>Roman numbers list:</h4> <ol type="I">
<li>DTE</li>
<li>JCTE</li>
<li>SITTTR</li>
</ol>
<h4>Lowercase Roman numbers list:</h4> <ol type="i" start="4" >
<li>Computer Engg.</li>
<li>Mechanical Engg.</li>
<li>Electronics Engg.</li>
</ol>
Problem Statement 3: to create Simple to Complex Tables in HTML
Output:
Solution:
Step1:
We first start with writing a table element <table></table>, inside the table element we create a row with an element
called tr inside a row we have cells, they're called td or it could be a th
th stands for table heading.
td stands for table data.
tr stands for table row.
Step 2:
<table>
<tr>
<td>Aziz</td>
<td>26</td>
</tr>
</table>
Step 3:
<table border="1px">
<tr>
<td>Aziz</td>
<td>26</td>
</tr>
</table>
Step 4:
You notice our table has only one row right now so I'm going to add multiple rows and change their
data, if you want more cells, you can add multiple td's like such
Step 5:
Our Table is ready, but let's make it a little bit more beautiful. What if you want to define the column
name at the top of each column? Good question, you can accomplish that by creating tr and inside
I'm going to have th this time it's not going to be td because th is a table header.
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
Step 6: Additional Elements
There are a few additional elements that a table has.
thead: Table Head Group
tbody: Table Body Group
tfoot: Table Foot Group
These are just wrappers which you can have on the header area, the body area and the footer area.
These elements are not a row but a container. I'm going to wrap the header into the thead tag and
do the same for the rest as well
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Location</th>
</tr>
</thead>
For the body area
<tbody>
<tr>
<td>Aziz</td>
<td>26</td>
<td>Chicago</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>San Diego</td>
</tr>
</tbody>
We haven't created our foot area but we can create one and if I add tfoot and inside I add tr and
inside td you will notice that it's not spanning to the other columns.
Step 7: COLSPAN and ROWSPAN Concept
If you want the footer or any data to span across multiple columns you can use the rowspan or
colspan like such <td colspan="3">
Let's suppose you have so many columns and rows in your table and you want to combine two rows
you can use the <td rowspan="2">Aziz</td> Look at the example below. Aziz is now spanned
to 2 rows and he has two locations Chicago and San Diego.
If you want to add another column for states, you can add another cell in the same row
I'm also going to add multiple states and now if I refresh the page and you see the location tab is
not spanning across the states column, well we can use the colspan and set it to 2 refresh the screen
and you see now it's spanning 2 columns
Step 8: Styling a Table
You remember we used thead, tbody and tfoot to wrap the header, the body and the footer area? It
will help us style the table via CSS. I'm going to style the header and change the background color
and the text color
<html>
<head>
<style>
thead{
background-color: 0daf3f;
color: #fff;
}
</head>
</html>
I can do the same for the footer as well like such
tfoot{
background-color: od52af;
color: #fff;
}
We need to put some padding around the cells.
td, th {
padding: 10px;
}
I can also change the table font
table{
font-family: san-serif;
}
Refresh the screen and you see it's taking effect
Now I'm going to change the width of the table to 100%
table{
font-family: san-serif;
width: 100%;
}
Refresh the screen and you see it's spanning over the entire page width
Another thing you notice that the th Name, Age and the location are at the center of the column
while the cell data is on the left hand side. We can change that as well.
td, th {
padding: 10px;
text-align: center;
}
Refresh the screen and the text is now aligned in the center
Another thing you might notice in the image above is that we have a double border around cells.
There's a attribute called cellspacing which you can use to either reduce or increase the cellspacing
between your cells. like such <table border="1px" cellspacing="10">
If I refresh the screen you will see that it has so much spacing around it
If I make it to 0 you will see there's no space between the cell borders
There's another property called cellpadding="" which creates the padding between the cells. You
can either use cellpadding="" inside your html or style it separately but it's a good practice to
style it separately.
If you want different widths of each columns you can change that as well. There are two ways to do
that.
You can come in html and assign it a particular class like such <th class="first-
col">Name</th> and inside CSS I'm going to style it
.first-col{
width: 40%;
}
Refresh the screen and the width of the first column is now 40%
Another way to do is you can write like such
tr > td:first-child{
width: 50%;
}
Refrsh the screen and you see the effect is the same but the latest one is taking effect because in CSS
the styles which are defined the lowest at the very end take over
I hope you enjoyed this, Session.
