Module 1 Notes

Web Programming(20CSI43) Module-1
Nagarjuna College of Engineering and Technology,

Bengaluru
Autonomous College Under VTU
Department of CSE (Data Science)
WEB PROGRAMMING (IC)

20CSI43
MODULE 1
HTML 5 and CSS
. By
Prof. Likhith S R
Assistant. Professor
Dept. of CSE(DS), NCET
Dept. of CSE(Data Science), NCET 1 2021-22

Module - I
HTML 5 and CSS: Introduction to Hyper Text Markup Language, HTML Elements and
Attributes, Headers, Colors, Formatting Elements, Links, Images, Tables, Divs, Lists,
Forms, Frames, iframes, HTML Media. CSS: Introduction to CSS, CSS selector, CSS
formatting, positioning, layouts, debugging.
Introduction to HTML
Stands for Hypertext Markup Language
● Hypertext: Link between web pages.
● Markup Language: Text between tags which defines structure.
● It is a language to create web pages
● HTML defines how the web page looks and how to display content with the help of
elements
● It forms or defines the structure of our Web Page
● Need to save your file with .html extension
Features Of HTML
● The learning curve is very easy (easy to modify)
● Create effective presentations
● Add links wherein we can add references
● Can display documents on platforms like Mac , Windows, Linux etc
● Add videos, graphics and audios making it more attractive.
● Case insensitive language
HTML Editors
● Simple editor: Notepad
● Notepad++
● Atom
● Best editor: Sublime Text.

Core Elements of HTML document

An HTML document is composed of three parts:
• A line containing HTML version information,
• A declarative header section (delimited by the HEAD element),
• A body, which contains the document's actual content. The body may be
implemented by the BODY element.
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
• A Doctype declares the version of an HTML document.
• This needs to be the first thing in your document, before
the <html> or <head> elements. Also, there is no closing tag.
<html>
• Root element which acts as a container to hold all the code Browser should know
that this a HTML document Permitted content: One head tag followed by one body
tag
<head>
• Everything written here will never be displayed in the browser It contains general
information about the document Title, definitions of css and script sheets
Metadata(information about the document)

<body>
Everything written here will be displayed in the browser
● Contains text, images, links which can be achieved through tags.
● Examples:
<p>This is our first paragraph. </p>
<a href=“http://www.google.com/”> Google</a>
<img src=“photo.jpg”>
EX:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>This is a paragraph tag</p> </body>
</html>
Comments
• We can add comments to your HTML source by using the following syntax:

• Comments are not displayed by the browser.
• Example:

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


HTML Elements
• Tags: An HTML tag surrounds the content and apply meaning to it. It is written
between < and > brackets.
• Attribute: An attribute in HTML provides extra information about the element, and
it is applied within the start tag. An HTML attribute contains two fields: name &
value.
• Element: An HTML element usually consists of a start tag and an end tag, with the
content inserted in between:
<tag name>Content goes here...</tag name>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
• The opening tag says “This is the beginning of a heading” and the closing tag says
“This is the end of a heading.”
• Like most of the tags in HTML, the text inside the angled brackets explains the
purpose of the tag—here h1 indicates that it is a level 1 heading (or top-level
heading).
• As you will see shortly, there are also tags for subheadings (, , , , and ).
• Without the markup, the words “About Google” in the middle of the tags would
just be another bit of text; it would not be clear that they formed the heading
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

• The <html> element defines the whole document.

• It has a start tag <html> and an end tag </html>.
• Inside the <html> element is the <body> element.
• The <body> element defines the document body.
• It has a start tag <body> and an end tag </body>.
• Inside the <body> element is two other HTML elements: <h1> and <p>.
• The <h1> element defines a heading.
• It has a start tag <h1> and an end tag </h1>.
• The element content is: My First Heading.
• The <p> element defines a paragraph.
• It has a start tag <p> and an end tag </p>.
• The element content is: My first paragraph
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
<p style="color: red">The style is attribute of paragraph tag</p>
Headers
• Headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading.
• Example:
•
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Horizontal Rules

• The <hr> tag defines a break in an HTML page, and is most often displayed as a
horizontal rule.
• The <hr> element is used to separate content (or define a change) in an HTML page:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Hr Tag</title>
</head>
<body>
<h2>HTML</h2>
<p>HTML is a Hypertext Markup Language.</p>
<hr/>
<h2>HR Tag</h2>
<p>HR tag is used to draw a horizontal line within the texts to sepate content.<p>
</body>
</html>

HTML Links
• HTML links are hyperlinks.
• We can click on a link and jump to another document.
• A link does not have to be text. It can be an image or any other HTML element.
Syntax:
• Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
-The href attribute specifies the destination address of the link.

-The link text is the visible part. Clicking on the link text will send us to the specified
address.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Link to Facebook login</h2>
<p><a href="https://www.facebook.com/">SignUP</a> click on signup to login</p>
</body>
</html>
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab

_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<h2>Example for link</h2>
<p>Click on <a href="https://www.facebook.com/">SignUP</a> to go on home page of

Facebok</p>

<p>Click on <a href="https://www.facebook.com/" target="_blank"> this-link </a> to

go on home page of Facebok(blank).</p>
<p>Click on <a href="https://www.facebook.com/" target="_self"> this-link </a>to go

on home page of Facebok(self) .</p>
<p>Click on <a href="https://www.facebook.com/" target="_parent"> this-link </a> to

go on home page of Facebok(parent) .</p>
<p>Click on <a href="https://www.facebook.com/" target="_top"> this-link </a> to go

on home page of Facebok(top) .</p>
Images
• Images can improve the design and the appearance of a web page.
• We can insert any image in our web page by using <img> tag. Following is the
simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
Exemple:
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<img src="smiley.gif" alt="HTML tutorial" width:42px height:42px">
</body>
</html>
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• The src attribute specifies the URL (web address) of the image
• The alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute).
• If a browser cannot find an image, it will display the value of the alt attribute,
• We can use the width and height attributes to specify the width and height of an
image
• And always defines the width and height of the image in pixels.
HTML Links - Image as Link

• It is common to use images as links:
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
Background Image
• To add a background image on an HTML element, use the HTML style attribute and
the CSS background-image property:
EX:
<p style="background-image: url('img_girl.jpg');">

Ex:
<style>
p{
background-image: url('img_girl.jpg');
}
</style>
 Add a background image for the entire page:
<style>
body {
}
</style>
• To avoid the background image from repeating itself, set the background-
repeat property to no-repeat.
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Background Cover
• If you want the background image to cover the entire element, you can set
the background-size property to cover.
• Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:
• This way, the background image will cover the entire element, with no stretching
(the image will keep its original proportions):
<style>
body {
background-attachment: fixed;
background-size: cover;
}
</style>
Background Stretch
• If you want the background image to stretch to fit the entire element, you can set
the background-size property to 100% 100%:
<style>
body {
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Font Properties
• Choosing the right font has a huge impact on how the readers experience a website.
• The right font can create a strong identity for your brand.
• Using a font that is easy to read is important. The font adds value to your text. It is
also important to choose the correct color and text size for the font
Font Families
• In CSS, we use the font-families property to specify the font of a text.
.p1 { font-family: "Times New Roman", Times, serif;}
.p2 { font-family: Arial, Helvetica, sans-serif;}
.p3 { font-family: "Lucida Console", "Courier New", monospace;}

Font Families
Generic Font Family Examples of Font Names
Serif Times New Roman

Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New

Lucida Console
Monaco
Cursive Brush Script MT

Lucida Handwriting
Fantasy Copperplate
Papyrus
Font Size
 The font-size property sets the size of the text.
 Being able to manage the text size is important in web design. However, you should
not use font size adjustments to make paragraphs look like headings, or headings
look like paragraphs.
 Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
 The font-size value can be an absolute, or relative size.
Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
• Absolute size is useful when the physical size of the output is known
Relative size:
• Sets the size relative to surrounding elements

• Allows a user to change the text size in browsers
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal { font-style: normal;}
p.italic { font-style: italic;}
p.oblique { font-style: oblique;}
• The font-weight property specifies the weight of a font:
p.normal { font-weight: normal;}
p.thick { font-weight: bold;}
Font Variant
• The font-variant property specifies whether or not a text should be displayed in a
small-caps font.
• In a small-caps font, all lowercase letters are converted to uppercase letters.
However, the converted uppercase letters appears in a smaller font size than the
original uppercase letters in the text.
p.normal { font-variant: normal;}
p.small { font-variant: small-caps;}

Font Shorthands
To shorten the code, it is also possible to specify all the individual font properties in one
property.
The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
Note: The font-size and font-family values are required. If one of the other values is
missing, their default value are used.
p.a { font: 20px Arial, sans-serif;}
p.b { font: italic small-caps bold 12px/30px Georgia, serif;}
Color
• Colors are displayed combining RED, GREEN, and BLUE light.
CSS Color Values
With CSS, colors can be specified in different ways:
• By color names
• As RGB values
• As hexadecimal values
• As HSL values (CSS3)
• As HWB values (CSS4)
Color Groups
• All modern browsers support the following 140 color names (click on a color name,
or a hex value, to view the color as the background-color along with different text
colors):
Color Name HEX Color
Gainsboro #DCDCDC
LightGray #D3D3D3
Silver #C0C0C0

DarkGray #A9A9A9
DimGray #696969
Gray #808080
Black #000000
Color Name HEX Color
Aqua #00FFFF
Cyan #00FFFF
LightCyan #E0FFFF
PaleTurquoise #AFEEEE
Aquamarine #7FFFD4
Turquoise #40E0D0
MediumTurquoise #48D1CC
DarkTurquoise #00CED1
Color Properties
• The color property is used to specify the foreground color of HTML elements
body {
color: red;
}
h1 {
color: #00ff00;
}
p.ex {
color: rgb(0,0,255);
}

LISTS
• There are many reasons why you might want to add a list to your pages, from putting
your five favorite albums on your home page to including a numbered set of
instructions for visitors to follow (like the steps you follow in the Try It Out
examples in this book). You can create three types of lists in HTML:
1. Unordered lists, which are like lists of bullet points
2. Ordered lists, which use a sequence of numbers or letters instead of bullet points
3. Definition lists, which allow you to specify a term and its definition
HTML Unordered Lists
• If you want to make a list of bullet points, you write the list within the element
(which stands for unordered list).
• Each bullet point or line you want to write should then be contained between
opening tags and closing tags (the li stands for list item).
• You should always close the <li> element.

The type Attribute

• We can use type attribute for <ul> tag to specify the type of bullet to display. By
default, it is a disc. Following are the possible options:
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example:
Output:
<body>  Beetroot
<ul type = "square">  Ginger
<li>Beetroot</li>  Potato
<li>Ginger</li>  Radish
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
HTML Ordered Lists
• If we are required to put the items in a numbered list instead of bulleted, then HTML
ordered list will be used.
• This list is created by using <ol> tag.
• The numbering starts at one and is incremented by one for each successive ordered
list element tagged with <li>.
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol> Output:
<li>Beetroot</li> 1. Beetroot
<li>Ginger</li> 2. Ginger
<li>Potato</li> 3. Potato
<li>Radish</li> 4. Radish
</ol>

</body>
</html>
THE TYPE ATTRIBUTE
• The type attribute can be used in <ol> tag to specify the type of numbering to
display. By default, it is a number. Following are the possible options −
<ol type = “1”> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
HTML DESCRIPTION LISTS

• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
• The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
Output:
<dt>Coffee</dt>
A Description List
<dd>- black hot drink</dd> Coffee
<dt>Milk</dt> - black hot drink
<dd>- white cold drink</dd>
Milk
</dl> - white cold drink
</body>
</html>

Nested HTML Lists
 A nested list is a list inside another list.

 You can create a nested unordered list, or a nested ordered list, or even a ordered list
nested inside an unordered one.
 Remember that only direct child of the ul tag is li.
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>
<ol>
<li>Coffee</li> Output:
<li>Tea A Nested List
<ol> List can be nested (lists
<li>Black tea</li> inside lists):
<li>Green tea</li> 1.Coffee
</ol> 2.Tea
</li> 1.Black tea
<li>Milk</li> 2.Green tea
</ol> 3.Milk
</body>
</html>
HTML Tables
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag.
• A table data/cell is defined with the <td> tag. The <td> elements are the data
containers of the table.
• They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
• A table header is defined with the <th> tag.
• By default, table headings are bold and centered.

<table>
<tr>
<td>First_Name</td>
<td>Last_Name</td>
<td>Marks</td>
</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>

Using TH tag
<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>

Usage of Border
<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>

HTML Table with Border

There are two ways to specify border for HTML tables.
1. By border attribute of table in HTML
2. By border property in CSS
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
} </style>
</head>
<body>
<table border = "1" >
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
HTML Table with cell padding

You can specify padding for table header and table data by two ways:
1. By cell padding attribute of table in HTML
2. By padding property in CSS

The cell padding 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 Table with colspan

• If you want to make a cell span more than one column, you can use the colspan
attribute.
• It will divide one cell/row into multiple columns, and the number of columns depend
on the value of colspan attribute
<table style="width:100%">
<tr> <th>Name</th>
<th colspan="2">Mobile No.</th> </tr>
<tr>
<td>Ajeet Maurya</td>
<td>7503520801</td>
<td>9555879135</td>
</tr>
</table>

HTML Table with rowspan

• If you want to make a cell span more than one row, you can use the rowspan
attribute.
• It will divide a cell into multiple rows. The number of divided rows will depend on
rowspan values.
<table>
<tr><th>Name</th><td>Ajeet Maurya</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
<tr><td>9555879135</td></tr>
</table>
HTML table with caption

HTML caption is diplayed above the table. It must be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</h></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>

• the border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border, then you can use border = "0".
Table Heading
• Table heading can be defined using <th> tag.
• This tag will be put to replace <td> tag, which is used to represent actual data cell.
• Headings, which are defined in <th> tag are centered and bold by default.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
• There are two attributes called cellpadding and cellspacing which we will use to
adjust the white space in the table cells.
• The cellspacing attribute defines space between table cells,
• Represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
• We will use colspan attribute if we want to merge two or more columns into a
single column.
• Similar way we will use rowspan if we want to merge two or more rows.
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to a
server for processing. OR
• HTML Forms are required, when you want to collect some data from the site visitor.
For example, during user registration you would like to collect information such as
name, email address, credit card, etc
Why use HTML Form
• HTML forms are required if you want to collect some data from of the site visitor.
• For example: If a user want to purchase some items on internet, he/she must fill the
form such as shipping address and credit/debit card details so that item can be sent to
the given address.
HTML Form Syntax

<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>

HTML <form> element

• The HTML <form> element provide a document section to take input from user. It
provides various interactive controls for submitting information to web server such
as text field, text area, password field, etc
• The <form> element does not itself create a form but it is container to contain all
required form elements, such as <input>, <label>, etc.
<form>
//Form elements
</form>
• The HTML <form> tag is used to create an HTML form.
• Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
The <input> Element
• The <input> element is the most important form element.
• The <input> element can be displayed in several ways, depending on the type
attribute.
Text Input:
<input type="text"> - Defines a one-line text input field.
Ex:
<form >
First name: <input type = "text" name = "first_name" />
<br>
<br>
Last name: <input type = "text" name = "last_name" />
</form>

Text area
Text Input:
<textarea rows="2" cols="5"></textarea> - Defines a Multi-line text input field.
Ex:
<form>
Enter your address:<br>
<textarea rows="2" cols="5"></textarea>
</form>
HTML Password Field Control

• The password is not visible to the user in password field control.
HTML 5 Email Field Control
• The email field in new in HTML 5. It validates the text for correct email address.
You must use @ and . in this field.
<form>
Password: <br>
<input type="password" name="password"/> <br/>
Email: <br>
<input type="email" name="email"/> <br/></form>

Radio Button Input

<input type="radio"> -
• Defines a radio button (for selecting one of many choices)
• The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
• If you use one name for all the radio buttons, only one radio button can be selected at
a time.
<form>
Gender: <br>
<input type="radio" name="gender" value="male"/>Male <br>
<input type="radio" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control
<input type="checkbox"> -
• These are similar to radio button except it can choose multiple options at a time and
radio button can select one button at a time, and its display.
<form>
<h4>Hobby:</h4><br>
<input type="checkbox" name="cricket" value="cricket"/> Cricket <br>
<input type="checkbox" name="football" value="football"/> Football<br>
<input type="checkbox" name="hockey" value="hockey"/> Hockey<br>

</from>

Submit button control

• HTML <input type="submit"> are used to add a submit button on web page.
When user clicks on submit button, then form get submit to the server.
• The type = submit , specifying that it is a submit button
• The value attribute can be anything which we write on button on web page.
• The name attribute can be omit here
<input type="submit" value="submit">
Reset button control

• The <input type="reset"> defines a reset button which resets all form values to its
initial values.
• <input type="reset">
<form>
<div class="controls">
<label for="id">User ID:</label>
<input type="text" id="id" name="id" />
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</div>
</form>
Select Box Control

• A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.
<h4>subject:</h4><br>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
<option value = “Bio">Bio</option>
</select>
File Upload Box

• If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the
<input> element but type attribute is set to file.
• An input file type enables users with a button to upload one or more files. By
default, it allows uploading a single file using the operating system's native file
browser.
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
File Upload Box

• A valid case-insensitive filename extension, starting with a period (".") character.
For example: .jpg, .pdf, or .doc.
• A valid MIME type string, with no extensions.
• The string audio/* meaning "any audio file".
• The string video/* meaning "any video file".
• The string image/* meaning "any image file".
<input type=“file” accept=“image/*,.pdf”>
HTML <fieldset> element:
• The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped
elements.
<fieldset>
<legend>User Information:</legend>
Enter name: <br>
<input type="text" name="name"><br>
Enter Password: <br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">

</fieldset>

HTML <frame> tag

• HTML <frame> tag define the particular area within an HTML file where another
HTML web page can be displayed.
• A <frame> tag is used with <frameset>, and it divides a webpage into multiple
sections or frames, and each frame can contain different web pages.
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
Attribute Value Description
frameborder 0 It specifies whether to display a border around the frame or

1 not, and its default value is 1
longdsec URL It specifies a page which contains the long description of the
content of the frame.
marginheight pixels It specifies the top and bottom margins of the frame.
marginwidth pixels It defines the height of the margin between frames.
name text This attribute is used to give names to the frame. It

differentiate one frame from another. It is also used to
indicate which frame a document should loaded into.
noresize noresize It is used to prevent resizing of the frame by the user.

scrolling yes It specifies the existence of the scrollbar for overflowing

no content.
auto
src URL It specifies the URL of the document which we want to

display in a frame.
Advantages:
• It allows the user to view multiple documents within a single Web page.
• It load pages from different servers in a single frameset.
• The older browsers that do not support frames can be addressed using the tag.
Disadvantages: Due to some of its disadvantage it is rarely used in web browser.
• Frames can make the production of website complicated.
• A user is unable to bookmark any of the Web pages viewed within a frame.
• The browser’s back button might not work as the user hopes.
• The use of too many frames can put a high workload on the server.
• Many old web browser doesn’t support frames.
HTML iframes
• HTML Iframe is used to display a nested webpage (a webpage within a webpage).
The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline
frame.
• An HTML iframe embeds another document within the current HTML document in
the rectangular region.
• The webpage content and iframe contents can interact with each other using
JavaScript.
• Iframe Syntax
• An HTML iframe is defined with the <iframe> tag:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="new.html" name="iframe_a"></iframe>
<p><a href="https://www.javatpoint.com" target="iframe_a">JavaTpoint.com</a></p>

<p>The name of iframe and link target must have same value else link will not open as a fra
me. </p>
</body>
</html>
HTML Div Tag
• The div tag is generally used by web developers to group HTML elements together
and apply CSS styles to many elements at once.
• For example: If you wrap a set of paragraph elements into a div element so you can
take the advantage of CSS styles and apply font style to all paragraphs at once
instead of coding the same style for each paragraph element.
<div style="border:1px solid pink;padding:20px;font-size:20px">

<p>
Welcome to Data Science Department.
</p>
<p>This is second paragraph</p>
</div>
HTML <span> tag

HTML <span> tag is used as a generic container of inline elements. It is used for styling
purpose to the grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:
• To change the language of a part of the text.
• To change the color, font, background of a part of text using CSS
• To apply the scripts to the particular part of the text.

• Note: HTML <span> is much similar as <div> tag, but <div> is used for block-level
elements and <span> tag is used for inline elements.
<p>I have choosen only

<span style="color: red;">red</span>,
<span style="color: blue;">blue</span>, and
<span style="color: green;">green</span> colors for my painting.
</p>
Preserving Whitespace
• To prevent the browser form eliminating multiple space and ignore embedded line
breaks
• This can be specified with the pre tag.
<p>
<pre>
Mary
Had a
Tittle
Lamb
</pre>
<p>
HTML | Subscript and Superscript Tags
Subscript: The <sub> tag is used to add a subscript text to the HTML document. The <sub>
tag defines the subscript text. Subscript text appears half a character below the normal line
and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O to be written as H2O.
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The
<sup> tag defines the superscript text. Superscript text appears half a character above the
normal line and is sometimes rendered in a smaller font. Superscript text can be used for
footnotes.

<!DOCTYPE html>
<html>
<body>
<p>Testing <sub>subscript text</sub></p>
<p>Testing <sup>superscript text</sup></p>
</body>
</html>
CSS (Cascading Style Sheets)

• Cascading Style Sheets, fondly referred to as CSS, is a simple design language
intended to simplify the process of making web pages presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the color of the text, the style of fonts, the spacing
between paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs,
• variations in display for different devices and screen sizes as well as a variety of
other effects.
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.
Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.

• Superior styles to HTML − CSS has a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
• Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and cell
phones or for printing.
• Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.
CSS Syntax
• A CSS rule-set 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.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Selector Declaration
h1 { color:blue;font-size:12px;}
Types of CSS (Cascading Style Sheet)
There are three types of CSS which are given below:
• Inline CSS
• Internal or Embedded CSS
• External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element
is known as inline CSS. This kind of style is specified within an HTML tag using the style
attribute

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>
</body>
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
}
h1 {
color: red;
padding: 50px;
}
</style>
</head>
<body>
<h2>CSS types</h2>
<p>Cascading Style sheet types:
inline, external and internal</p>
</body>
</html>
External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property written
in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will be
applied across web pages.

File name: styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
File name: example.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
CSS Selectors
• CSS selectors are used to select the content you want to style. Selectors are the part
of CSS rule set. CSS selectors select HTML elements according to its id, class, type,
attribute etc.
• There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

CSS Element Selector

• The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Id Selector
• The id selector selects the id attribute of an HTML element to select a specific
element.
• An id is always unique within the page so it is chosen to select a single, unique
element.
• It is written with the hash character (#), followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>

</body>
</html>
CSS Class Selector

• The class selector selects HTML elements with a specific class attribute.
• It is used with a period character . (full stop symbol) followed by the class name.
• A class name should not be started with a number.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

CSS Class Selector for specific element

• If you want to specify that only one specific HTML element should be affected then
you should use the element name with class selector.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
CSS Universal Selector

• The universal selector is used as a wildcard character.
• It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Group Selector

• The grouping selector is used to select all the elements with the same style
definitions.
• Grouping selector is used to minimize the code.
• Commas are used to separate each selector in grouping.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
</body>
</html>

All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements
CSS Positioning
The position property specifies the type of positioning method used for an element
(static, relative, absolute, fixed).
1. static - Default value. Elements render in order, as they appear in the document
flow.
2. absolute - The element is positioned relative to its first positioned (not static)
ancestor element.
3. fixed - The element is positioned relative to the browser window.
4. relative - The element is positioned relative to its normal position, so "left:20px"
adds 20 pixels to the element's LEFT position.
CSS Layouts
• The display property is the most important CSS property for controlling layout.
• The display property specifies if/how an element is displayed.
• Every HTML element has a default display value depending on what type of element
it is.
• The default display value for most elements is block or inline.
• A website can be divided into various sections comprising of header, menus, content
and footer based on which there are many different layout design available for
developer. Different layouts can be created by using div tag and use CSS property to
style it.

The most common structure of website layout is given below:

• Header section contains a website logo, a search bar and profile of user.
• The navigation menu contains link to various categories of articles available and
content section is divided into 3 parts(columns) with left and right sidebar containing
links to other articles and advertisements whereas the main content section is the one
containing this article, then at the bottom there is a footer section which contains
address, links, contacts etc.
Header Section: The header section is generally placed either at the top of the Website or
just below a top navigation menu. It often comprises of the name of the Website or the logo
of the Website.
<body>
<div class = "header">
<h2 style = "color:white;">
Data Science Department
</h2>
</div>
<br>
<center style="font-size:200%;">
Remaining Section
</center>
</body>

Navigation Menu: A Navigation Bar/Menu is basically a list of links that allows visitor to
navigate through the website comfortably with easy access.
<body>

<div class = "header">
<h2 style = "color:white;font-size:200%;">
Data Science Department
</h2>
</div>

<div class = "nav_menu">
<a href = "#">Home</a>
<a href = "#">Faculty</a>
<a href = "#">Events</a>
</div><br>
<center style = "font-size:200%;">

Remaining Section
</center>
</body>
Content Section: The content section is the main body of the website.
The user can divide content section in n-column layout.
The most common layouts are:
1-Column Layout: It is mostly used for mobile layout.
2-Column Layout: This website layout is mostly used for tablets or laptops
3-Column Layout: This website layout is mostly used for desktops.

<div class = "row">

<div class = "columnA">
<h2>Column A</h2>
<p>Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnB">

<h2>Column B</h2>
<p>Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnC">
<h2>Column C</h2>
<p>Prepare for the Recruitment drive of product based companies like Microsoft, Amazon,
Adobe etc with a free online placement preparation course. The course focuses on various

MCQ's & Coding question likely to be asked in the interviews & make your upcoming
placement eason efficient and successful.</p>
</div>
</div>
Footer Section: A footer section is placed at the bottom of the webpage and it generally
consists of information like contact info, copyrights, About us etc.


<div class = "footer">
<a href = "#">About</a><br>
<a href = "#">Career</a><br>
<a href = "#">Contact Us</a>
</div>

CSS Formatting
CSS text formatting properties is used to format text and style text.
CSS text formatting include following properties:
1.Text-color
2.Text-alignment
3.Text-decoration
4.Text-transformation
5.Text-indentation
6.Letter spacing
7.Line height
8.Text-direction
9.Text-shadow
10.Word spacing
h1
{
color:red;
text-align:center;
text-decoration:underline;
text-transform:lowercase;
text-indent:80px;
letter-spacing:4px;
line-height:40px;
direction: rtl;
text-shadow:3px 1px blue;
word-spacing:15px;
}
HTML <Code> tag
The <code> tag in HTML is used to define the piece of computer code. During the creation
of web pages sometimes there is a need to display computer programming code. It could be
done by any basic heading tag of HTML but HTML provides a separated tag which is
<code>.

The code tag is a specific type of text which represents computer output. HTML provides
many methods for text-formatting but <code> tag is displayed with fixed letter size, font,
and spacing.
Some points about <code> tag:
• It is mainly used to display the code snippet into the web browser.
• This tag styles its element to match the computer’s default text format.
• The web browsers by default use a monospace font family for displaying <code<
tags element content.
HTML <meta> tag
The metadata means information about data. The <meta> tag in HTML provides
information about HTML Document or in simple words, it provides important information
about a document. Adding the meta tag while making the webpage or website, is a good
practice because search engines like Google search for this meta tag in order to understand
the information provided by the website. It is also helpful if the user search for a specific
website then the search engine result page will display snippets in search results that will
provide information related to that website.
Attributes: This tag accepts four attributes which are mentioned and described below.
• name: This attribute is used to define the name of the property.
• http-equiv: This attribute is used to get the HTTP response message header.
• content: This attribute is used to specify properties value.
• charset: This attribute is used to specify a character encoding for an HTML file
• <meta name="description" content="A Computer Science portal for geeks. It
contains well written, well thought and well explained computer science and
pogramming articles, quizzes and practice/competitive
• programming/company interview Questions.">
HTML Character Element
Char Number Entity Description
∀ ∀ ∀ for all
∂ ∂ ∂ part
∃ ∃ ∃ exists

∅ ∅ ∅ empty
∇ ∇ ∇ nabla
∈ ∈ ∈ isin
∉ ∉ ∉ notin
∋ ∋ &ni; ni
∏ ∏ ∏ prod
∑ ∑ ∑ sum
% &percnt; &#37 ; Gives Percentage symbol to

calculate
( &#40 ; Used as Open Parenthesis
) &#41 ; Used as Closed Parenthesis
* &#42 ; Asterisk
÷ ÷ or &#247 ; Includes dividion Sigh

&div;
+ &#43 ; Specifies Plus sign
, &#44 ; Specifies Comma
– &#45 ; Used as Hyphen sign
. &#46 ; Period
¦ ¦ &#166 ; Broken Vertical bar
\ \ &#92 ; Defines Absolute value
¼ ¼ &#188 ; Fraction part ¼
½ ½ &#189 ; Fraction Part 1/2
] ] &#93 ; Denotes brackets

∑ &Sum; &#8721 ; Defies in summation calculation
± ± &#177 ; Indicates plus- or- minus symbol
√ &radic ; &#8730 ; Gives Square Root result

&Sqrt;
∞ ∞ &#8734 ; Gives Infinity Value
∏ ∏ &#8719 ; n- array product
⊂ ⊂ &#8834 ; Denotes Subset of
⊃ ⊃ &#8835 ; Denotes Super Set In the Set

theory
1. Write a HTML script to display employee details like name, address, mobile
number, email Id ets similar to a telephone directory.
<html>
<head>
<title>My First Website HTML</title>
</head>
<body>
<h1> <mark> Phone Book </mark> </h1>
<div id="address1">
Name :<b>Micheal Jackson</b><br>
Email ID : <u> [email protected] </u> <br>
Mobile : <u> +442015462358> </u> <br>
Old Phone Number : <strike> +446695326580 </strike> <br>
Address :<i> 1750 East 4th Street,Los Angeles,California . </i>
</div>
<hr>
<div>
Name :<b>Charlie Puth</b><br>
Email ID :<u>[email protected]</u><br>

Mobile :<u>+441920462355</u><br>
Old Phone Number :<strike>+445562321997</strike><br>
Address :<i>3909 Witmer Road,Niagara Falls, New York . </i>
</div>
<hr>
<div>
Name :<b>Justin Bieber</b><br>
Email ID :<u> [email protected]</u><br>
Mobile :<u>+446595462399</u><br>
Old Phone Number :<strike>+449995326508</strike><br>
Address :<i>125 Micheal street,Bergen,Norway .</i>
</div>
<hr>
</body>
</html>
2. Write a HTML program to display nested list to list down all the elements
serviced by an event management company. The list should be a nested list with
main events and sub events.
<!doctype html>
<html>
<head>
<title>Nested list</title>
</head>
<body>

<h2>Nested list</h2>
<ol type= "I">
<li><b>Wedding</b>
<ol>
<li>Bridal party</li>
<li>Engagement</li>
<li>Caterer</li>
<li>Wedding ceremony</li>
<li>Wedding reception</li>
</ol>
</li>
<li><b>Corporate</b>
<ol>
<li>Seminars and Conferences</li>
<li> Appreciation Events</li>
<li>Team Building Events</li>
<li>Product Launch Events</li>
<li> Shareholder Meetings</li>
</ol>
</li>
<li><b>Exhibition</b>
<ol>
<li>Aerophilately</li>
<li>Astrophilately</li>
<li>Fight against Forgeries</li>
<li>Maximaphily</li>
<li>Philatelic literature</li>
</ol>
</li>
<li><b>Stage Events</b>
<ol>
<li>Birthday party</li>
<li>Surprise party</li>
<li>Dinner party</li>
<li>Garden party</li>
<li>Cocktail party</li>
</ol>
</li>
</ol>
<li><b>Trade Shows</b>
<ol>
<li> Argentina</li>
<li>Bolivia</li>
<li>Brazil</li>
<li>Canada</li>
<li>Chile</li>
</ol>
</li>
</body>
</html>

3. Implement a HTML and CSS script to create a webpage with table structure
containing alternative backgrounds using class selector functionalities.
<!doctype html>
<html>
<head>
<title> html Table structure web page</title>
<style>
.table{
border:3px solid blue;
width:100%;
cellpadding:10px;
}
.marquee
{
width:100%;
background-color:orange;
scrolldelay:200
}
.fontsize{font-size:40px;color:red;}
</style>
</head>
<body>
<table class="table">
<tr>
<td width="5%"> <image src="logo.png" width=150 height=150></td>
<td width="75%" colspan=3>
<p class=“fontsize”>Nagarjuna college of engineerning and technology</p>
</td>
</tr>
<tr style="background-color:pink;">
<td><a href="index.html">Home</a> </td>
<td><a href="About_us.html">About_us</a> </td>
<td><a href="Gallery.html">Gallery</a> </td>
<td ><a href="Contact_Us.html">Contact_Us</a> </td>
</tr>
<tr> <td width="5%">
<marquee class="marquee" direction="up" >
<hr>
Data scicence<br><hr>
ISE<br><hr>
AI&ML<br><hr>
CSE<br><hr>
ECE<br><hr>
Civil<br><hr> </marquee>
</td>
<td width="75%" colspan=3>
<marquee width="100%" height="100%" bgcolor="orange">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</marquee>
</td>
</tr>
<tr style="background-color:Pink;"
<td> </td>
<td><image src="4.jpg" width=150 height=150> </td>
<td colspan=2>What Is NCTE?
Through collaboration and community, shared stories and shared xperiences,
NCTE supports teachers and their students in classrooms, on college ampuses, and in
online learning environments.For more than 100 years,
</td>
</tr>
<tr>
<td colspan="4"><p>Created by likith</p></td>
</tr>
</table>
</body>
</html>

Module 1 Notes

Uploaded by

Copyright:

Available Formats

Module 1 Notes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 1 Notes

Uploaded by

Copyright:

Available Formats

Web Programming(20CSI43) Module-1

Nagarjuna College of Engineering and Technology,

WEB PROGRAMMING (IC)

HTML 5 and CSS

Dept. of CSE(Data Science), NCET 1 2021-22

Dept. of CSE(Data Science), NCET 2 2021-22

Core Elements of HTML document

Dept. of CSE(Data Science), NCET 3 2021-22

Dept. of CSE(Data Science), NCET 4 2021-22

Dept. of CSE(Data Science), NCET 5 2021-22

• The <html> element defines the whole document.

<p style="color: red">The style is attribute of paragraph tag</p>

HTML Horizontal Rules

Dept. of CSE(Data Science), NCET 7 2021-22

-The href attribute specifies the destination address of the link.

_blank - Opens the linked document in a new window or tab

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<p>Click on <a href="https://www.facebook.com/">SignUP</a> to go on home page of

Dept. of CSE(Data Science), NCET 8 2021-22

<p>Click on <a href="https://www.facebook.com/" target="_blank"> this-link </a> to

<p>Click on <a href="https://www.facebook.com/" target="_self"> this-link </a>to go

<p>Click on <a href="https://www.facebook.com/" target="_parent"> this-link </a> to

<p>Click on <a href="https://www.facebook.com/" target="_top"> this-link </a> to go

HTML Links - Image as Link

<p style="background-image: url('img_girl.jpg');">

 Add a background image for the entire page:

Dept. of CSE(Data Science), NCET 10 2021-22

.p1 { font-family: "Times New Roman", Times, serif;}

.p2 { font-family: Arial, Helvetica, sans-serif;}

.p3 { font-family: "Lucida Console", "Courier New", monospace;}

Dept. of CSE(Data Science), NCET 11 2021-22

Serif Times New Roman

Monospace Courier New

Cursive Brush Script MT

Dept. of CSE(Data Science), NCET 12 2021-22

• Allows a user to change the text size in browsers

p.normal { font-style: normal;}

p.italic { font-style: italic;}

p.oblique { font-style: oblique;}

• The font-weight property specifies the weight of a font:

p.normal { font-weight: normal;}

p.thick { font-weight: bold;}

p.normal { font-variant: normal;}

p.small { font-variant: small-caps;}

Dept. of CSE(Data Science), NCET 13 2021-22

p.a { font: 20px Arial, sans-serif;}

p.b { font: italic small-caps bold 12px/30px Georgia, serif;}

Color Name HEX Color

Dept. of CSE(Data Science), NCET 14 2021-22

Color Name HEX Color

Dept. of CSE(Data Science), NCET 15 2021-22

Dept. of CSE(Data Science), NCET 16 2021-22

The type Attribute

Dept. of CSE(Data Science), NCET 17 2021-22

HTML DESCRIPTION LISTS

Dept. of CSE(Data Science), NCET 18 2021-22