Introduction to

HTML Lists, Tables,

Tables, and Images
Images
This presentation will cover HTML lists, tables, and images, fundamental
fundamental components for structuring web content. Learn how to
how to create, format, and incorporate these elements to build visually
visually appealing and informative web pages.
HTML Unordered Lists with tags
1 Definition
Unordered lists present items in a bulleted format,
format, using the <ul> tag for the list itself and <li> for
<li> for individual list items.
2 Customization
You can change the bullet style using CSS, allowing for
allowing for visual variety and better readability.
readability.
3 Applications
Unordered lists are ideal for showcasing options, steps in a
in a process, or lists of ideas.

4 Example
The HTML code <ul><li>Item 1</li><li>Item 2</li></ul>
2</li></ul> creates a list with two items.
HTML Ordered Lists with tags
1 Definition
Ordered lists present items in a numbered format, using the <ol> tag for the list and <li> for
<li> for individual items.

2 Numbering
The numbering can be customized, including using Roman numerals, letters, or even custom
even custom values.

3 Applications
Ordered lists are helpful for steps in a procedure, ranked lists, or any content requiring a specific
requiring a specific sequence.

4 Example
The code <ol><li>Step 1</li><li>Step 2</li></ol> creates a numbered list with two steps.
two steps.
HTML Definition Lists with tags
1 Definition
Definition lists are used to present terms and their corresponding definitions, using the <dl> tag for
<dl> tag for the list, <dt> for terms, and <dd> for definitions.

2 Structure
Each <dt> element is a term, and its corresponding <dd> element provides its definition.
definition.

3 Applications
Definition lists are suitable for glossaries, dictionaries, or any content that requires pairing terms
pairing terms with explanations.

4 Example
The code <dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl> creates a definition list
a definition list for the term "HTML."
Creating HTML Tables
1 Purpose
Tables are used to organize information into rows and columns, providing a structured
structured format for data presentation.

2 Structure
The <table> tag defines the table, <tr> defines rows, and <td> defines cells within rows and
within rows and columns.

3 Applications
Tables are used for displaying data, creating layouts, or presenting information in a tabular
in a tabular format.

4 Example
The code
<table><tr><td>Name</td><td>Age</td></tr><tr><td>John</td><td>30</td></tr></table>
</td></tr></table> creates a simple table with two rows and two columns.
 Table Structure and Attributes
Attribute Description

border Sets the width of the table border.

cellspacing Specifies the space between cells.

cellpadding Sets the padding inside cells.

width Sets the width of the table in

pixels or percentage.

align Aligns the table horizontally.

valign Aligns the table vertically.

html frames with code
Frameset Tag Frame Tag Example

The <frameset> tag defines a frame The <frame> tag defines each frame This code divides the window into
set, which divides the browser within the frameset. It specifies the into two frames, each displaying a
window into multiple frames. source document for each frame. a different HTML document.

<frameset cols="*,*"> <frame src="frame1.html">

<frame
src="frame1.html">
<frame
src="frame2.html">
</frameset>
 html frames attributes with code
Attribute Description Example

src Specifies the URL of the <frame

the HTML document to src="frame1.html">
to be loaded in the frame.
frame.
rows Specifies the number of <frameset rows="200,*">
of rows and their sizes for
for the frameset.

cols Specifies the number of <frameset cols="*,100">

columns and their sizes
for the frameset.
<frame
name Assigns a name to the
name="topFrame"
frame for referencing in
src="top.html">
other frames.

noresize Prevents the user from <frame src="frame1.html"

resizing the frame. noresize>

scrolling Specifies whether <frame src="frame1.html"

scrollbars should be scrolling="yes">
displayed.
iframe with code
1 Definition
The <iframe> tag embeds another HTML document within the current document.

2 Structure
The <iframe> tag has a src attribute to specify the URL of the embedded document.

3 Applications
IFrames are used for embedding videos, maps, or other interactive content within a webpage.
webpage.

4 Example
The code <iframe src=“" width="600" height="450" style="border:0;" allowfullscreen=""
allowfullscreen="" loading="lazy">
difference between iframe and framset
Frameset
Framesets divide the entire browser window into multiple frames, each displaying a separate HTML document.
document.

Iframe
IFrames embed a separate HTML document within the current document, allowing for more flexible integration of
content.

Control
Framesets offer less control over individual frame behavior compared to iframes, which provide more granular
granular control.

Navigation
Framesets can cause navigation issues as each frame has its own history, while iframes maintain a single history for
single history for the entire page.

SEO
Framesets can negatively impact SEO due to content duplication and navigation issues, while iframes generally have
less SEO impact.
An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="">
<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>

<p>If you click the "Submit" button, the form-data will be

The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.

Example
On submit, send form data to "action_page.php":
<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>
The Target Attribute

The target attribute specifies where to display the response that is received after submitting
the form.
The target attribute can have one of the following values:
The default value is _self which means that the response will open in the current window.

Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the current window
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:
<form action="/action_page.php" method="get">

This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Notes on GET:
•Appends the form data to the URL, in name/value pairs
•NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
•The length of a URL is limited (2048 characters)
•Useful for form submissions where a user wants to bookmark the result
•GET is good for non-secure data, like query strings in Google

Notes on POST:
•Appends the form data inside the body of the HTTP request (the submitted form data is
not shown in the URL)
•POST has no size limitations, and can be used to send large amounts of data.
•Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal information!
 HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down
list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input
controls
<output> Defines the result of a calculation
The <input> Element
One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
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">
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
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 type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many

choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of

many choices)
The <label> Element

 The <label> element defines a label for several form elements.

 The <label> element is useful for screen-reader users, because the screen-reader will read out loud
the label when the user focus on the input element.
 The <label> element also help 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.
The <select> Element
The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

 The <option> element defines an option that can be selected.

 By default, the first item in the drop-down list is selected.
 To define a pre-selected option, add the selected attribute to the option:
 <option value="fiat" selected>Fiat</option>
Visible Values:
Use the size attribute to specify the number of visible values:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
The <button> Element
The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Try it Yourself
The <fieldset> and <legend> Elements

 The <fieldset> element is used to group related data in a form.

 The <legend> element defines a caption for the <fieldset> element.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
</form>
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>
1. <input type="radio" id="gender" name="gender" value="female"/>Female <br/>
2. <input type="radio" id="gender" name="gender" value="others"/>others <br/>
3. <br>Enter your Address:<br>
4. <textarea></textarea><br>
5. <input type="submit" value="sign-up">
6. </fieldset>
7. </form>
8. </body>
9.</html>
1.<form action="#">
2.<table>
3.<tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter name:</label></td>
5. <td><input type="text" name="name" value="" id="register_name" style="width:160px"/></td>
6.</tr>
7.<tr>
8. <td class="tdLabel"><label for="register_password" class="label">Enter password:</label></td>
9. <td><input type="password" name="password" id="register_password" style="width:160px"/></td>
10.</tr>
11.<tr>
12. <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label></td>
13. <td>
14.<input type="email" name="email" value="" id="register_email" style="width:160px"/></td>
15.</tr>
16.<tr>
17. <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</label></td>
18. <td>
19.<input type="radio" name="gender" id="register_gendermale" value="male"/>
20.<label for="register_gendermale">male</label>
21.<input type="radio" name="gender" id="register_genderfemale" value="female"/>
22.<label for="register_genderfemale">female</label>
23. </td>
24.</tr>
1.<tr>
2. <td class="tdLabel"><label for="register_country" class="label">Select Country:</label></td>
3. <td>
4. <select name="country" id="register_country" style="width:160px">
5. <option value="india">india</option>
6. <option value="pakistan">pakistan</option>
7. <option value="africa">africa</option>
8. <option value="china">china</option>
9. <option value="other">other</option>
10. </select>
11.</td>
12.</tr>
13.<tr>
14. <td colspan="2"><div align="right"><input type="submit" id="register_0" value="register"/>
15.</div></td>
16.</tr>
17.</table>
18.</form>
 Difference between radio button and checkbox

Radio button Checkbox

It is used when only one option to be selected out Checkbox allows one or many options to be
of several available options. selected.

It is created by using HTML <input> tag but type It is also created using HTML <input> tag but type
attribute is set to radio. attribute is set to checkbox.

It is a single control unit. It is a multiple control unit.

Checkbox is presented as a small square box on
It is presented as a small circle on the screen.
the screen.

Checkbox have 3 states namely- Checked,

It has only 2 states namely- True & False.
unchecked & indeterminate.

It is used when you want to limit the users choice It is used when you want to allow user to select
to just one option from the range provided. multiple choices.
 Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for
different devices and screen sizes.

CSS Example
body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
Try it Yourself
 CSS Syntax

A CSS rule consists of a selector and a declaration block.

 The selector points to the HTML element you want to style.

 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
 Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Example

In this example all <p> elements will be center-aligned, with a red text color:
p{
color: red;
text-align: center;
}

Example Explained
•p is a selector in CSS (it points to the HTML element you want to style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value
 CSS Selectors
The CSS element Selector
The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• The id of an element is unique within a page, so the id selector is used to select one unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
 The CSS class Selector

The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}

Example
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center; Example
color: red; In this example we have grouped the selectors from the code
} above:
h1, h2, p {
h2 { text-align: center;
text-align: center; color: red;
color: red; }
}

p {
text-align: center;
color: red;
}
 Three Ways to Insert CSS
There are three ways of inserting a style sheet:
•External CSS
•Internal CSS
•Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head
section.

Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS
property.

Example
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
 CSS Colors
CSS Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>

CSS Border Color

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
 CSS Backgrounds
The CSS background properties are used to add background effects for elements.
following CSS background properties:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position

CSS background-color

body {
background-color: lightblue;
}

CSS background-image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.

body {
background-image: url("paper.gif");
}
If the image above is repeated only horizontally (background-repeat: repeat-x;), the
background will look better:

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Tip: To repeat an image vertically, set background-repeat: repeat-y;

Showing the background image only once is also specified by the background-repeat property:

Show the background image only once:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
 CSS background-position

The background-position property is used to specify the position of the background image.

Position the background image in the top-right corner:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment
Specify that the background image should scroll with the rest
of the page:
body { body {
background-image: url("img_tree.png"); background-image: url("img_tree.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-attachment: fixed; background-attachment: scroll;
} }
 CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

•dotted - Defines a dotted border

•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom
border, and the left border).
Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
 CSS Border Width

Specific Side Widths

The border-width property can have from one to four values (for the top border, right border, bottom
border, and the left border):

Example
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides
*/
}

p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides
*/
}

p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px
bottom and 35px left */
}
 CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an
element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
•margin-top
•margin-right
•margin-bottom
•margin-left

If the margin property has four values:

•margin: 25px 50px 75px 100px;
•top margin is 25px
•right margin is 50px Use the margin shorthand property with four values:
•bottom margin is 75px p {
•left margin is 100px margin: 25px 50px 75px 100px;
}
If the margin property has three values:
•margin: 25px 50px 75px;
•top margin is 25px
•right and left margins are 50px
•bottom margin is 75px

Example
Use the margin shorthand property with three values:
p {
margin: 25px 50px 75px;
}
If the margin property has two values:
•margin: 25px 50px;
•top and bottom margins are 25px
•right and left margins are 50px

Example
Use the margin shorthand property with two values:
p {
margin: 25px 50px;
}
If the margin property has one value:
•margin: 25px;
•all four margins are 25px

Example
Use the margin shorthand property with one value:
p {
margin: 25px;
}
The auto Value
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between
the left and right margins.

Example
Use margin: auto:
div {
width: 300px;
margin: auto;
border: 1px solid red;
}