Scribd
Upload
2 views

Unit-2.2 HTML Tables - Frames

The document outlines the CSE4001 course on Internet and Web Programming, focusing on HTML5 and CSS3 basics, including tags, attributes, and examples for creating links, images, tables, lists, and forms. It emphasizes the use of modern practices in HTML and CSS for layout and styling, as well as the importance of user input handling through forms. Additionally, it covers the differences between GET and POST methods for form submissions and the use of fieldsets for grouping data.

Uploaded by

aadijain2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Unit-2.2 HTML Tables - Frames

The document outlines the CSE4001 course on Internet and Web Programming, focusing on HTML5 and CSS3 basics, including tags, attributes, and examples for creating links, images, tables, lists, and forms. It emphasizes the use of modern practices in HTML and CSS for layout and styling, as well as the importance of user input handling through forms. Additionally, it covers the differences between GET and POST methods for form submissions and the use of fieldsets for grouping data.

Uploaded by

aadijain2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

CSE4001 - Internet and Web Programming

Course Type: LTP Credits: 4

Prepared by
Dr Komarasamy G
Associate Professor (Grade-2)
School of Computing Science and Engineering
VIT Bhopal University
Unit-2 HTML and CSS
HTML5 Basics – Formatting – Colors – Images
– Links – Tables – Lists – Layout –
Forms–Canvas –Media.
CSS3 Basics – Selectors - Box Model -
Backgrounds and Borders -Text Effects –
Advanced Features.

Unit-2 HTML & CSS / Dr Komarasamy


2
G
HTML tags

HTML Anchor Tag


• The HTML anchor tag defines a hyperlink that links one page to
another page. The "href" attribute is the most important attribute
of the HTML a tag.
• href attribute of HTML anchor tag
• The href attribute is used to define the address of the file to be
linked. In other words, it points out the destination page.
• The syntax of HTML anchor tag is given below.
• <a href = "..........."> Link Text </a>
• Let's see an example of HTML anchor tag.
• <a href="second.html">Click for Second Page</a>
HTML tags

Appearance of HTML anchor tag


• An unvisited link is displayed underlined and blue.
• A visited link displayed underlined and purple.
• An active link is underlined and red.
HTML tags

HTML Image
• HTML img tag is used to display image on the web page. HTML
img tag is an empty tag that contains attributes only, closing tags
are not used in HTML image element.
• Let's see an example of HTML image.
• <h2>HTML Image Example</h2>
• <img src="good_morning.jpg" alt="Good Morning Friends"/>
HTML tags

• Attributes of HTML img tag


• The src and alt are important attributes of HTML img tag. All
attributes of HTML image tag are given below.
• 1) src: It is a necessary attribute that describes the source or path
of the image. The location of image may be on the same directory
or another server.
• 2) alt : The alt attribute defines an alternate text for the image, if
it can't be displayed.
• 3) width: It is an optional attribute which is used to specify the
width to display the image.
• 4) height: It specifies the height of the image. The HTML height
attribute also supports iframe, image and object elements.
HTML tags

HTML Table
• HTML table tag is used to display data in tabular form (row *
column). There can be many columns in a row.
• 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 .
HTML Table tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for
formatting.
<col> It is used with <colgroup> element to specify column
properties for each column.
<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.


HTML Table tags

<html>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
First_Name Last_Name Marks
</html>
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
HTML tags

• HTML Table with Border


• There are two ways to specify border for HTML tables.
• By border attribute of table in HTML
• By border property in CSS
1) HTML Border attribute
You can use border attribute of table tag in HTML to specify border.
But it is not recommended now.
HTML tags

<html>
<body>
<table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML tags

CSS Border property


It is now recommended to use border property of CSS to specify
border in table.
<style>
table, th, td {
border: 1px solid black;
}
</style>
HTML tags
<html> <head>
<style>
table, th, td {
border: 1px solid blue;
} </style>
</head>
<body>
<table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>
HTML tags
HTML Table with cell padding
You can specify padding for table header and table data by two ways:
By cellpadding attribute of table in HTML
By padding property in CSS
The cellpadding attribute of HTML table tag is obselete now. It is recommended to
use CSS. So let's see the code of CSS.
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
} </style>
HTML tags
<html> <head>
<style> table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 10px;
} </style> </head>
<body> <table>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table> </body> </html>
HTML List tags
• 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:
• Ordered List or Numbered List (ol)
• Unordered List or Bulleted List (ul)
• Description List or Definition List (dl)
• HTML Ordered List or Numbered List
• In the ordered HTML lists, all the list items are marked with numbers. It is
known as numbered list also. The ordered list starts with <ol> tag and the list
items start with <li> tag.
• <ol>
• <li>Aries</li>
• <li>Bingo</li>
• <li>Leo</li>
• <li>Oracle</li>
• </ol>
HTML List tags

Description List or Definition List (dl)


<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML frames
• HTML frame is used to display a nested webpage (a webpage
within a webpage). The HTML <frame> tag defines an inline frame.
• frame Syntax
• An HTML frame is defined with the <frame> tag:
• <frame src="URL"></frame>
• Here, "src" attribute specifies the web address (URL) of the inline
frame page. Set Width and Height of frame
• You can set the width and height of frame by using "width" and
"height" attributes. By default, the attribute? values are specified
in pixels but you can also set them in percent. i.e. 50%, 60% etc.
HTML frames
<html>
<frameset cols="*,*,*,*">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
Div tag
Definition and Usage
• The <div> tag defines a division or a section in an HTML
document.
• The <div> element is often used as a container for other HTML
elements to style them with CSS or to perform certain tasks with
JavaScript.
• Attributes List

Attribute Value Description


align left Specifies the alignment of the content
right inside a <div> element
center
justify
Div tag
Definition and Usage
• The <div> tag is nothing more than a container unit that
encapsulates other page elements and divides the HTML
document into sections.
• Web developers use <div> elements to group together HTML
elements and apply CSS styles to many elements at once.
• For instance, by wrapping a set of paragraph elements into a
<div> element, the developer can take advantage of CSS
styles and apply a font to all paragraphs at once by applying a
font style to the <div> tag instead of coding the same style
for each paragraph element.
Div tag Example
<html>
<body> Example-2
<p>This is some text.</p>
<div style="background-color: lightblue">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
HTML forms

• HTML forms are a composition of buttons, checkboxes,


and text input fields embedded inside of HTML
documents with one goal in mind:
– to capture user input
• By doing things such as providing fields for user data
such as names, phone number, and email addresses,
web forms give users the opportunity to interact directly
with a webpage.
• By using any scripting language to submit the user input
to screen.
• Example: use PHP, JSP,etc.
HTML forms

Example
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
HTML forms

Radio Button Input


<input type="radio"> defines a radio button.

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
HTML forms

The Submit Button


<input type="submit"> defines a button
for submitting the form data to a form-handler.
Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
If you click the "Submit" button, the
form-data will be sent to a page called
"/action_page.php”
HTML forms
Action Attribute
• The action attribute defines the action to be performed
when the form is submitted.
• Normally, the form data is sent to a web page on the
server when the user clicks on the submit button.
• In the example above, the form data is sent to a page on
the server called "/action_page.php".
• This page contains a server-side script that handles the
form data:
• <form action="/action_page.php">
HTML forms
• Method Attribute
• The method attribute specifies the HTTP method (GET or POST) to
be used when submitting the form data:
Example
• <form action="/action_page.php" method="get">
HTML forms
When to Use GET?
• The default method when submitting form data is GET.
• However, when GET is used, the submitted form data will
be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
Notes on GET:
• Appends form-data into the URL in name/value pairs
• The length of a URL is limited (about 3000 characters)
• Never use GET to send sensitive data! (will be visible in the URL)
• Useful for form submissions where a user wants to bookmark the
result
• GET is better for non-secure data, like query strings in Google
HTML forms
When to Use POST?
• Always use POST if the form data contains sensitive or personal
information.
• The POST method does not display the submitted form data in
the page address field.

Notes on POST:
• POST has no size limitations, and can be used to send large
amounts of data.
• Form submissions with POST cannot be bookmarked
HTML forms
Grouping Form Data with <fieldset>
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for
the <fieldset> element.
The <select> Element
The <select> Element

Visible Values:
Use the size attribute to specify the number of visible values:
Text Area

You might also like