Unit II
Table
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns. <!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to
the table.</p>
</body>
</html>
A basic HTML table
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
To understand the example better, we have added borders to the table.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
</style>
<body>
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
TD elements define table cells
Emil Tobias Linus
To understand the example better, we have added borders to the table.
HTML <frame> Tag
<!DOCTYPE html>
<html>
<body>
<h1>The iframe element</h1>
<iframe src="[Link] title="W3Schools Free Online Web
Tutorials">
</iframe>
</body>
</html>
The iframe element
HTML <input> Tag
<!DOCTYPE html>
<html>
<body>
<h1>The input element</h1>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the
server called "action_page.php".</p>
</body>
</html>
The input element
First name:
Last name:
Click the "Submit" button and the form-data will be sent to a page on the server
called "action_page.php".
Definition and Usage
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the
type attribute.
The different input types are as follows:
<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"> (default value)
<input type="time">
<input type="url">
<input type="week">
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
An unordered HTML list
Coffee
Tea
Milk
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Output: An ordered HTML list
1. Coffee
2. Tea
3. Milk
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking
them. It creates a placeholder for the image, defined by attributes like src,
width, height, and alt, and does not require a closing tag.
There are two ways to insert the images into a webpage:
By providing a full path or address (URL) to access an internet file.
By providing the file path relative to the location of the current web
page file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<img src=
"[Link]
[Link]"
alt="GFG image" />
</body>
</html>
Text Fields
The <input type="text"> defines a single-line input field for text input.
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<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">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20 characters.</p>
</body>
</html>
Text input fields
First name:
John
Last name:
Doe
Note that the form itself is not visible.
Also note that the default width of text input fields 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.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<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>
</body>
</html>
Radio Buttons
Choose your favorite Web language:
HTML
CSS
JavaScript
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number
of choices.
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a
checkbox:</p>
<form action="/action_page.php">
<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><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Checkboxes
The input type="checkbox" defines a checkbox:
I have a bike
I have a car
I have a boat
HTML <footer> Tag
The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
<!DOCTYPE html>
<html>
<body>
<h1>The footer element</h1>
<footer>
<p>Author: Hege Refsnes<br>
<a href="[Link]
</footer>
</body>
</html>
The footer element
Author: Hege Refsnes
hege@[Link]
HTML <header> Tag
Definition and Usage
The <header> element represents a container for introductory content or
a set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
</body>
</html>
A heading here
Posted by John Doe
Some additional information here
Lorem Ipsum dolor set amet....
Unit III
HTML Styles - CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With 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.
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:
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:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
A Blue Heading
A red paragraph.
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:
<!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>
This is a heading
This is a paragraph.
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:
<!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>
This is a heading
This is a paragraph.
CSS Text Formatting
<html>
<head>
<style>
.initials {
font-size: 40px;
font-weight: bold;
color: #4CAF50;
text-transform: uppercase;
font-family: Arial, sans-serif;
</style>
</head>
<body>
<p class="initials">M.B.</p>
</body>
</html>
Font Size: The text size is set to 40px, making it large and prominent.
Font Weight: The text is bold, making it stand out more.
Color: The text color is set to a green shade (#4CAF50), giving it a
fresh look.
Text Transform: The text is converted to uppercase, so the letters
appear in capital letters.
Font Family: The text uses Arial, which is a sans-serif font, for a clean,
modern appearance.
CSS Text Formatting Properties
These are the following text formatting properties.
Property Description
Sets the color of the text using color name, hex value, or
text-color
RGB value.
Specifies horizontal alignment of text in a block or table-
text-align
cell element.
text-align-last Sets alignment of last lines occurring in an element.
text-decoration Decorates text content.
text-decoration- Sets color of text decorations like overlines, underlines,
color and line-throughs.
text-decoration- Sets various text decorations like underline, overline,
line line-through.
text-decoration- Combines text-decoration-line and text-decoration-color
style properties.
text-indent Indents first line of paragraph.
text-justify Justifies text by spreading words into complete lines.
text-overflow Specifies hidden overflow text.
text-transform Controls capitalization of text.
text-shadow Adds shadow to text.
letter-spacing Specifies space between characters of text.
Property Description
line-height Sets space between lines.
direction Sets text direction.
word-spacing Specifies space between words of line.
Text Formatting Properties
1. color
This property help's to set the color of a text on your web page which is
inside an element or inside the body tag if no element is parenting it.
2. text-align
This property aligns the text in an element at a specific position. Also it
aligns the text on basis of it's writing direction with properties like start and
end it means to the start and end of the container in which it is written.
3. text-align-last
This property in CSS understands the last line as the line after a
natural line break sequence. Suppose if a person is writing
a paragraph this property will consider the last line as the line after the
natural line break due to page width end as the last line of the paragraph.
4. text - decoration
This property basically help's to add a underline to the text written in your
element , In this their are various type's of decoration context's that you
can apply to your text.
5. text-decoration-color
This property help's to add a color to the underline that is made over or
under a text with the use of text-decoration property.
6. text-decoration-line
This property help's to set the type of line used in decoration of any text.
7. text-decoration-style
This property help's to set the preview of the line used for a particular text.
8. text-indent
This property in CSS add 's an indentation to the first line written in an
element from the starting of that particular element.
9. text - justify
This property in CSS specifies the kind of justification that has to be made
to a text on basis of inter-word space or inter-character space.
10. text-overflow
This is a CSS text property with the help of which you can decide that how
you want to show the begining of the hidden text in your document.
11. text-transform
This is a property in CSS with the help of which a user has the control
over the casing of the text in your element.
12. text-shadow
This is a property which help's the user to add a shadow to the text in your
element.
CSS Borders
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
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A hidden border.
A mixed border.
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {border-style: dotted;}
[Link] {border-style: dashed;}
[Link] {border-style: solid;}
[Link] {border-style: double;}
[Link] {border-style: groove;}
[Link] {border-style: ridge;}
[Link] {border-style: inset;}
[Link] {border-style: outset;}
[Link] {border-style: none;}
[Link] {border-style: hidden;}
[Link] {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
The border-style Property
This property specifies what kind of border to display:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border.
A ridge border.
An inset border.
An outset border.
No border.
A hidden border.
A mixed border.
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
Margins define the distance between an element's border and the
surrounding elements.
With CSS, you have full control over the margins. CSS has properties for
setting the margin for each individual side of an element (top, right,
bottom, and left), and a shorthand property for setting all the margin
properties in one declaration.
Margin - Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top - sets the top margin of an element
margin-right - sets the right margin of an element
margin-bottom - sets the bottom margin of an element
margin-left - sets the left margin of an element
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent
element
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of
150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Using individual margin properties
This div element has a top margin of 100px, a right margin of 150px, a bottom
margin of 100px, and a left margin of 80px.
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in
one declaration.
The margin property is a shorthand property for the following individual
margin properties:
margin-top
margin-right
margin-bottom
margin-left
Here is how it works:
If the margin property has four values:
margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
CSS Padding
CSS Padding
The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for
setting the padding for each side of an element (top, right, bottom, and
left), and a shorthand property for setting all the padding properties in
one declaration.
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top - sets the top padding of an element
padding-right - sets the right padding of an element
padding-bottom - sets the bottom padding of an element
padding-left - sets the left padding of an element
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent
element
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px,
a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>
Using individual padding properties
This div element has a top padding of 50px, a right padding of 30px, a bottom
padding of 50px, and a left padding of 80px.
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding properties in
one declaration.
The padding property is a shorthand property for the following individual
padding properties:
padding-top
padding-right
padding-bottom
padding-left
Here is how it works:
If the padding property has four values:
padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px,
a bottom padding of 75px, and a left padding of 100px.</div>
</body>
</html>
The padding shorthand property - 4 values
This div element has a top padding of 25px, a right padding of 50px, a bottom
padding of 75px, and a left padding of 100px.
HTML <div> Tag
A <div> section in a document that is styled with CSS:
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after
the <div> element.
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
The div element
This is a heading in a div element
This is some text in a div element.
This is some text outside the div element.
<!DOCTYPE html>
<html>
<html>
<head>
<style>
div {
display: block;
</style>
</head>
<body>
A div element is displayed like this:
<div>This is some text in a div element.</div>
Change the default CSS settings to see the effect.
</body>
</html>
A div element is displayed like this:
This is some text in a div element.
Change the default CSS settings to see the effect.
HTML <span> Tag
Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or a
part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript
using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span>
eyes and my father has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body>
</html>
The span element
My mother has blue eyes and my father has dark green eyes.
CSS Multiple Columns
CSS Multi-column Layout
The CSS Multi-column Layout Module allows easy definition of multiple
columns of text - just like in newspapers:
CSS Multi-column Properties
In this chapter you will learn about the following multi-column properties:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
column-count: 3;
</style>
</head>
<body>
<h1>Create Multiple Columns</h1>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.
</div>
</body>
</html>