Assignemnt-II
Title: Implement a web page [Link] for any client website (e.g. a restaurant website project)
using following:
a. HTML syntax: heading tags, basic tags & attributes, frames, tables, images, lists, links
for text & images, forms etc.
b. Use of Internal CSS, Inline CSS, External CSS
HTML Elements
1. Frames
By Using frames, we can divide the display screen into multiple scrolling sections, each of
which can display a different web page on it. Therefore It allows multiple HTML documents
to be seen concurrently.
Tags use to add frames are given below.
Tag : <frameset> </frameset>
Description : Splits browser screen into frames.
Attributes : Rows=number helps in dividing the browser screen into horizontal sections or
frames. Cols=number divides the screen display into vertical sections or frames. Hence, The
numbers write in rows and columns attribute can be given as absolute numbers or percentage
value or an asterisk(*) can be used to indicate the remaining space.
Example :
1 <html>
2 <frameset rows = “20%,
3 30%, *”>
4 </html>
Tag :<frame> </frame>
Description: used to define a single frame in a <frameset>
Attributes: name=text Assigns a name to the frame no resize Prevents the users from
resizing
the frame. src=url Specifies the location of the initial HTML Document to be display by the
frame.
Although bordercolor=”#rrggbb” or color name Sets the color for frame’s borders
Example :
1 <html>
2 <frameset rows = "50%, *">
3 <frameset cols = "50%, *">
4 <frame src = "[Link]" name = "frm1">
5 <frame src = [Link]" name = "frm2">
6 </frameset>
7 <frame src = "[Link]" name = "frm3">
8 </frameset>
9 </html>
2. Tables
A table is a two-dimensional matrix, consisting of rows and columns. HTML tables are
intend to display data in the columns on a web [Link] the Tables contain information such
as text, images, forms, hyperlinks, etc.
Tags use to create the table are given below.
Tag : <table> </table>
Description : Create a table
Attributes: Border=number Draws an outline around the table rows and cells of width equal
to
the number. By default, the table has no border number =0. Width=number Defines the width
of the table.
Hence, Cellspacing=number Set the amount of cell space between table cells. Thus, the
default value is 2
Cellpadding=number Sets the amount of cell space, in a number of pixels between the cell
border and its contents. The default value is 2
Cellpadding=number Sets the amount of cell space, in a number of pixels between the cell
border and its contents. However, Default is 2
Bgcolor=”#rrggbb” sets background color of the table Bordercolor=”#rrggbb” sets border
color of the table align=left | right | center
Aligns the table. Since the default alignment is left frame=void | above | below | hsides | lhs |
rhs | vsides | box | border
Therefore, the browser where to draw borders around the table
Tag : <tr> </tr>
Description: Creates a row in the table
Tag : <th> </th>
Description : Cells are insert in a row of the table for heading
Tag : <td> </td>
Description: Data cells are insert in a row of the table
01 <html>
02 <title>
03 <head>Table
04 </head></title>
05 <body>
06 <table border = 2 cellspacing = 4 cellpadding = 4 bordercolordark = "red" bordercolorlight = "blue" al
07 <caption> List of Books </caption>
08 <tr>
09 <th rowspan = 2 align = "center"> Item No </th>
10 <th rowspan = 2 align = "center"> Item Name </th>
11 <th align = "center" colspan = 2> Price </th>
12 </tr>
13 <tr>
14 <th align = "center"> Rs. </th>
15 <th align = "center"> Paise </th>
16 </tr>
17 <tr>
18 <td align = "center"> 1 </td>
19 <td align = "center"> Programming in C++ </td>
20 <td align = "center"> 500 </td>
21 <td align = "center"> 50 </td>
22 </tr>
23 <tr>
24 <td align = "center"> 2 </td>
25 <td align = "center"> Programming in Java </td>
26 <td align = "center"> 345 </td>
27 <td align = "center"> 00 </td>
28 </tr>
29 </table>
30 </body>
31 </html>
3. Images
Tag : <img src="[Link]"></img>
Attributes :
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
Use the HTML width and height attributes or the CSS width and height properties to
define the size of the image
Use the CSS float property to let the image float to the left or to the right
Example :
1. <!Doctype Html>
2. <Html>
3. <Head>
4. <Title>
5. Insert an Image
6. </Title>
7. </Head>
8. <Body>
9. Hello JavaTpoint! <br>
10. <img src="[Link]
[Link]?rnd=38062" width="400" height="200"> <br>
11. Hello User! <br>
12. How are You?
13. </Body>
14. </Html>
4. Lists
Lists are a great way to provide information in a structured and easy-to-read format.
There are two types of lists :
1. Number List (Order List): An order list is used when the sequence of list items is
important.
2. Bullet List (Unorder List): An unorder list is a collection of related items that have
no special order or sequence or series. Therefore tags use to create lists are given
below.
Tag : <li>
Description : Specify the list item.
Tag : <ol> </ol>
Description: The <ol> tag formats the contents of an ordered list with numbers. Hence the
number starts with 1. It is increment by one for each successive order list
item tag with <li>
Attributes : Type = a / A / i / I / 1 Set the numbering style to a , A , i , I,1 default is 1
start = “A” Specifies the number or letter which in the list should start.
Example :
01 <html>
02 <body bgcolor= "pink">
03 <font face = "Arial” size= "6" color = "green">
04 <u>
05 List of Cities....
06 </u>
07 </font>
08 <ol type = "A" start = "A">
09 <li> Mumbai
10 <li> Delhi
11 <li> Kolkata
12 <li> Nagpur
13 </ol>
14 </body>
15 </html>
Tag :<ul> </ul>
Description : <ul> tag defines the unordered list of items
Attributes : Type = disc / square / circle Specifies the bullet type.
Example :
01 <html>
02 <body bgcolor= "sky blue" text =”yellow”>
03 <font face = "Arial”
04 size="6" color= "orange">
05 <i><u><b>
06 List of Fruits
07 </i></u></b>
08 <ul type = "circle">
09 <li> Apple
10 <li> Pinapple
11 <li> Mango
12 <li> Guava
13 </ul>
14 </body>
15 </html>
5. Hyperlinks
Hyperlink is a specialized feature of HTML. Instead of clicking through sequentially
organized pages, a hypertext user clicks especially highlighted text called
‘hyperlink’.Therefore, hyperlinks
are technically known as anchors. Thus, They are usually visible in blue underlines.
Tags use to add hyperlinks lists are given below.
Tag : <a> </a>
Description: Add an anchor or hyperlink.
Attributes: href=url Specifies the URL of the target page.
Example :
1 <html>
2 <body>
3 <A
4 HREF="[Link]
5 here to visit google</A>
6 </BODY>
7 </html>
6. Forms
Tag:
<form>
.
form elements
.
</form>
Description: The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit buttons,
etc.
Attributes :
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input Displays a single-line text input field
type="text">
<input Displays a radio button (for selecting one of many choices)
type="radio">
<input Displays a checkbox (for selecting zero or more of many
type="checkbox"> choices)
<input Displays a submit button (for submitting the form)
type="submit">
<input Displays a clickable button
type="button">
Examples :
6.1 Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for 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>
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of an input field is 20
characters.
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focuses on the input element.
The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the <input> element
to bind them together.
6.2 Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<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>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
6.3 Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
6.4 The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a file on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<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>
This is how the HTML code above will be displayed in a browser:
First name:
John
Last name:
Doe
Submit
6.5 The Name Attribute for <input>
Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>
HTML Styles – CSS
Cascading Style Sheets (CSS) is used to format the layout of a [Link] CSS, you can
control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more!
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in
this tutorial we will use inline and internal styles, because this is easier to demonstrate, and
easier for you to try it yourself.
1. Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of
the <p> element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
2. Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue,
and the text color of ALL the <p> elements to red. In addition, the page will be displayed
with a "powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.
Here is what the "[Link]" file looks like:
"[Link]":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
