Scribd
Upload
1 views

Unit 1 HTML and CSS - Fully Covered

The document provides an overview of basic HTML tags and their usage, including links, images, buttons, lists, styles, formatting, and quotations. It explains the purpose of various HTML elements, attributes, and CSS integration for styling. Additionally, it covers how to run HTML in Sublime Text and includes examples for practical understanding.

Uploaded by

suryodaypratap
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Unit 1 HTML and CSS - Fully Covered

The document provides an overview of basic HTML tags and their usage, including links, images, buttons, lists, styles, formatting, and quotations. It explains the purpose of various HTML elements, attributes, and CSS integration for styling. Additionally, it covers how to run HTML in Sublime Text and includes examples for practical understanding.

Uploaded by

suryodaypratap
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 145

HTML Basic Tags with

Examples

K. Vallidevi 1
What are to be discussed?
• HTML basic Tags
a) HTML Links
b) HTML Images
c) HTML Buttons
d) HTML Lists
e) HTML Styles
f) HTML Formatting
g) HTML Quotations

K. Vallidevi 2
HTML Links – Find the mistake!!!
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">w3schools link</a>
</body>
</html>

HTML Links
HTML links are defined with the a tag:
This is the link

K. Vallidevi 3
HTML Images – What is the purpose of alt attribute?
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
-----------------------------------------------------------------------------------------------------
HTML Images
HTML images are defined with the img tag:

K. Vallidevi 4
HTML Buttons
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag</p>
<button>Click me</button>
</body>
</html>
-----------------------------------------------------------------------------------
HTML Buttons
HTML buttons are defined with the button tag
K. Vallidevi 5
Unordered and ordered list
<!DOCTYPE html> An Unordered HTML List
<html> • Coffee
<body> • Tea
<h2>An Unordered HTML List</h2> • Milk
<ul>
<li>Coffee</li> An Ordered HTML List
<li>Tea</li> 1. Coffee
<li>Milk</li> 2. Tea
</ul> 3. Milk
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
K. Vallidevi 6
Empty HTML Elements

• HTML elements with no content are called empty


elements.
• <br> is an empty element without a closing tag (the
<br> tag defines a line break):
Example:

<!DOCTYPE html>
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>

This is a
paragraph with a line break.
K. Vallidevi 7
HTML Tags – To remember
• Empty elements can be "closed" in the opening tag
like this: <br />.

• HTML5 does not require empty elements to be


closed. But if you want stricter validation, or if you
need to make your document readable by XML
parsers, you must close all HTML elements properly.

• HTML Is Not Case Sensitive

K. Vallidevi 8
The style Attribute

<!DOCTYPE html> The style Attribute


<html>
<body> The style attribute is used to
<h2>The style Attribute</h2> specify the styling of an element,
like color:
<p>The style attribute is used to specify
the styling of an element, like
This is a paragraph.
color:</p>
<p style="color:red">This is a
paragraph.</p>
</body>
</html>

K. Vallidevi 9
The title Attribute
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title
Attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display
the title attribute as a tooltip.
</p>
</body> Attributes without double quotes will not
</html> be displayed correctly if there is a space
available in the attribute values

K. Vallidevi 10
Headings
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:80px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body>
</html>

Heading 1
You can change the size of a heading with the style attribute, using the font-size property.

Each HTML heading has a default size. However, you can specify the size for any heading with the
style attribute, using the CSS font-size property:
11
K. Vallidevi
The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font


(usually Courier), and it preserves both spaces and line breaks:

<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
</body>
</html> K. Vallidevi 12
HTML Styles
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

Text Color
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

Background Color
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

K. Vallidevi 13
HTML Styles

Font Family
The CSS font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Font size
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Align property


<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

K. Vallidevi 14
Summary
• Use the style attribute for styling HTML
elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

K. Vallidevi 15
HTML Formatting
• <b> - Bold text Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of
• <strong> - Important these tags: <b> and <i> defines bold and italic text,
text but <strong> and <em> means that the text is
"important".
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

K. Vallidevi 16
Blockquotes
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

Browsers usually indent blockquote elements.


For nearly 60 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by more than one million members in the
United States and close to five million globally.

K. Vallidevi 17
Short Quotations
<p>WWF's goal is to: <q>Build a future where people
live in harmony with nature.</q></p>

Browsers usually insert quotation marks around the q element.


WWF's goal is to: “Build a future where people live in harmony with nature.”

Address Element
• The HTML <address> element defines contact information (author/owner) of a
document or an article.
• The <address> element is usually displayed in italic. Most browsers will add a line
break before and after the element
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA K. Vallidevi 18
</address>
CITE Elements

K. Vallidevi 19
“FUNNY Formatting”

<bdo dir="rtl">This text will be written from


right to left</bdo>

HTML <bdo> for Bi-Directional Override

<!– I am not identifed by the browser-->


K. Vallidevi 20
Background Colors
<h1 style="background-
color:Tomato;">Tomato</h1>
<h1 style="background-
color:Orange;">Orange</h1>
<h1 style="background-
color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</
h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-
color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-
color:LightGray;">LightGray</h1>

K. Vallidevi 21
Text Colors
<h1
style="color:Tomato;">Hel
lo World</h1>
<p
style="color:DodgerBlue;"
>Lorem ipsum...</p>
<p
style="color:MediumSeaG
reen;">Ut wisi enim...</p>

K. Vallidevi 22
Border Colors

23
K. Vallidevi
CSS - Cascading Style Sheets.
• CSS describes how HTML elements are to be
displayed on screen, paper, or in other
media.
• CSS saves a lot of work. It can control the
layout of multiple web pages all at once.
• The most common way to add CSS, is to keep
the styles in separate CSS files. However, here
we will use inline and internal styling, because
this is easier to demonstrate.

K. Vallidevi 24
CSS
• CSS can be added to HTML elements in 3
ways:
• Inline - by using the style attribute in HTML
elements
• Internal - by using a <style> element in the
<head> section
• External - by using an external CSS file

K. Vallidevi 25
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.
• This example sets the text color of the <h1>
element to blue.

<h1 style="color:blue;">This is a Blue


Heading</h1>

K. Vallidevi 26
Internal CSS
<!DOCTYPE html>
<html>
• An internal CSS is used to <head>
define a style for a single <style>
HTML page. body {background-color: powderblue;}
• An internal CSS is defined in h1 {color: blue;}
the <head> section of an p {color: red;}
</style>
HTML page, within a <style>
</head>
element: <body>

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

</body>
</html>

K. Vallidevi 27
External CSS
• An external style sheet is used to define the style for many HTML
pages.
• With an external style sheet, you can change the look of an
entire web site, by changing one file!
• To use an external style sheet, add a link to it in the <head>
section of the HTML page:

<!DOCTYPE html> Externalstyles.css


<html>
body {
<head> background-color: powderblue;
<link rel="stylesheet" href="Externalstyles.css"> }
</head> h1 {
<body> color: blue;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p> p{
</body> color: red;
}
</html>

K. Vallidevi 28
How to run HTML in Sublime text?
Step 1:
Set Chrome as your default browser.
Start-control panel-default programs- select
chrome and set as default
Step 2:
Go to Tools- Build System – New Build System
Remove the already existing content and copy the content below and paste it there.
{
"cmd":["C:/Program Files
(x86)/Google/Chrome/Application/chrome.exe","$file"]
} K. Vallidevi 29
HTML Image <img src="url">
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli"
width="500" height="333">
</body>
</html>

images are defined with the <img> tag.


The <img> tag is empty, it contains
attributes only, and does not have a
closing tag.

Images in Another Folder


<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Animated Images - HTML allows animated GIFs:


<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Images on Another Server - Some web sites store their images on image servers.
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
K. Vallidevi 30
Images as Links

<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</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>
<p>Add "border:0;" to prevent IE9 (and
earlier) from displaying a border around
the image.</p>
</body>
</html>

K. Vallidevi 31
Image Map
<!DOCTYPE html>
<html>
https://www.w3schools.com/html/tryit.
asp?filename=tryhtml_images_map2
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of
coffee to go to a new page and read more
about the topic:</p>
<img src="workplace.jpg" alt="Workplace"
usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
</body> K. Vallidevi 32
</html>
Style attribute and Style Element
for Background Image
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<div style="background-image:
url('img_girl.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image
<div style="background-image:
url('img_girl.jpg');">
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br> <style>
where it is smaller than the element<br> div {
where it is specified. (Try resizing the<br> background-image: url('img_girl.jpg');
browser window to see how the<br> }
background image behaves. </style>
</div>
</body>
</html>

K. Vallidevi 33
Background Image on a page
<!DOCTYPE html>
<html>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>

<body>

<h2>Background Image</h2>

<p>By default the background image will


repeat itself if it is smaller than the
element where it is specified, in this
case the BODY element.</p>

</body>
</html> K. Vallidevi 34
Background-No repeat
<!DOCTYPE html>
<html>
<style>
body {
background-image:
url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
<body>
<h2>Background No Repeat</h2>
<p>You can avoid the image from being
repeated by setting the
background-repeat property to "no-
repeat".</p>
</body>
</html>
K. Vallidevi 35
<picture> element

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>

When to use this element?

1. To match the bandwidth


2. To match the format – the browsers and devices support

K. Vallidevi 36
HTML Tables
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th> The <td> elements are the data containers of the table.
<th>Lastname</th>
They can contain all sorts of HTML elements; text, images,
lists, other tables, etc.
<th>Age</th>
</tr>
<tr> An HTML table is defined with the <table> tag.
<td>Jill</td> Each table row is defined with the <tr> tag. A table header
<td>Smith</td> is defined with the <th> tag. By default, table headings
<td>50</td>
are bold and centered. A table data/cell is defined with
the <td> tag.
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr> K. Vallidevi 37
</table> </body> </html>
<!DOCTYPE html>
<html>
Table Borders with
<head>
<style>
table, th, td {
Collapse
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the CSS border property to add a
border to the table.</p>
<table style="width:100%">
table, th, td table, th, td
<tr> { {
<th>Firstname</th> border: 1px solid black; border: 1px solid black;
<th>Lastname</th> } border-collapse: collapse;
<th>Age</th>
</tr>
}
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td> </tr>
</table> K. Vallidevi 38
</body> </html>
Match the outputs with the code
<table style="width:100%">
<table style="width:100%"> <tr>
<tr> <th>Name:</th>
<th>Name</th> <td>Bill Gates</td>
<th colspan="2">Telephone</th> </tr>
</tr> <tr>
<tr> <th rowspan="2">Telephone:</th>
<td>Bill Gates</td> <td>55577854</td>
<td>55577854</td> </tr>
<td>55577855</td> tr
</tr> <td>55577855</td>
</table> </tr>
</table>

K. Vallidevi 39
Test your understanding
Add a table row with two table headers.
The two table headers should have the value "Name" and "Age".

<table>

<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>

K. Vallidevi 40
Test your Understanding
Answers for the Use the correct HTML attribute to
make the first TH element span two
previous slide columns.

<table> <table>
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Age</th> <th>Age</th>
</tr> </tr>

<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>

K. Vallidevi 41
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
} table#t01 tr:nth-child(even) <!-- Example 2 -- >
</style> {
</head> background-color: tomato; table#t01 th
} {
<body>
table#t01 tr:nth-child(odd) background-color: black;
{ color: white;
<h2>Styling Tables</h2> background-color: blue; }
color: white
<table style="width:100%"> }
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
K. Vallidevi 42
Unordered list

<ul style="list-style-type:disc;"> <ul style="list-style-type:circle;">


<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ul> </ul>

K. Vallidevi 43
Ordered, Nested and Controlled Lists
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
<ol start="50"> </ul>
<ol type="1"> <ol type="A">
<li>Coffee</li>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li>
<li>Milk</li> <li>Milk</li>
</ol>
</ol> </ol>
<ol type="I" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<K/. oVal>
l lidevi 44
Block level elements starts on a new line
Block vs Inline Inline elements does not start on a new line

<p>This is an inline span <span style="border: 1px solid black">Hello World</span>


element inside a paragraph.</p>

<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>

45
K. Vallidevi
<div> and <span>
• The <div> element is often used as a The <span> element is often used
container for other HTML elements. as a container for some text.
• The <div> element has no required The <span> element has no
attributes, but style, class and id are required attributes, but style, class
common. and id are common.
When used together with CSS, the
• When used together with CSS, the <span> element can be used to
<div> element can be used to style style parts of the text:
blocks of content:

<h1>My <span style="color:red">Important</span> Heading</h1>

K. Vallidevi 46
class attribute
<!DOCTYPE html>
• The HTML class attribute is used to <html>
<head>
define equal styles for elements <style>
with the same class name. .cities {
background-color: black;
• So, all HTML elements with the color: white;
same class attribute will get the margin: 20px;
padding: 20px;
same style. }
• Here we have two <div> elements </style>
</head>
that point to the same class name: <body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
</body>
</html>

K. Vallidevi 47
<!DOCTYPE html>
<html>
Multiple Classes
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}

.main {
text-align: center;
}
</style
<body>

<h2>Multiple Classes</h2>
<p>All three headers have the class name
"city". In addition, London also have
the class name "main", which center- Tip: The class attribute can be used on
aligns the text.</p> any HTML element.

<h2 class="city main">London</h2> Note: The class name is case sensitive!


<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html> K. Vallidevi 48
Different Tags Can Share
Same Class
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>

<h2>Same Class, Different Tag</h2>


<p>Even if the two elements do not have the same
tag name, they can have the same class name,
and get the same styling:</p> In CSS, to select elements with a specific
class, write a period (.) character, followed
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p> by the name of the class:

</body>
</html>

K. Vallidevi 49
HTML id attribute vs class
An HTML element can only have
one unique id that belongs to that single element
a class name can be used by multiple elements
HTML bookmarks with id attribute
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Eg. <h2 id="C4">Chapter 4</h2>

K. Vallidevi 50
<iframe src = “ ”>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can use the height and width attributes
to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" height="200“


width="300">
</iframe>

</body>
</html>

K. Vallidevi 51
Iframe - Target for a Link
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

An iframe can be used as the


target frame for a link.
The target attribute of the link
must refer to the name
attribute of the iframe:

K. Vallidevi 52
The HTML <head> Element
• <head> element is a container
for metadata - placed <head>
between the <html> and <body> <title>Page Title</title>
tag. </head>
• HTML metadata is data about
the HTML document. <style>
• Metadata is not displayed. body {background-color: powderblue;}
• The following tags describe h1 {color: red;}
metadata: <title>, <style>, p {color: blue;}
<meta>, <link>, <script>, and </style>
<base>.
• The <meta> element is used to <head>
specify which character set is <title>Page Title</title>
used, page description, <link rel="stylesheet" href="mystyle.css">
keywords, author, and other </head>
metadata.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="John Doe"> 53
<meta http-equiv="refresh" content="30"> K. Vallidevi
HTML5-Setting The Viewport K. Vallidevi

• The viewport is the user's visible area of a web page.


• It varies with the device, and will be smaller on a mobile phone than on a
computer screen.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">

<base> element
• <base href="https://www.w3schools.com/images/" target="_blank">
<head>
<title>Page Title</title>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>
<img src="html5.gif">
<p>Since we have specified a base URL, the browser will look for the image "html5.gif"
at "https://www.w3schools.com/images/html5.gif"</p>

According to the HTML5 standard;


54
the <html>, the <body>, and the <head> tag can be omitted.
HTML Layout Elements

• HTML offers several semantic elements that


define the different parts of a web page:

K. Vallidevi 55
HTML Layout Techniques
• There are five different ways to create multicolumn layouts. Each way has its pros
and cons:
HTML tables (not recommended)
CSS float property
CSS flexbox
CSS framework
CSS grid

HTML - Responsive
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".

<h1 style="font-size:10vw">Hello World</h1>

K. Vallidevi 56
<form> <form> element
First name:<br>
<input type="text" <form action="/action_page.php">
name="firstname"> First name:<br>
<br> <input type="text" name="firstname" value="Mickey">
<br>
Last name:<br> Last name:<br>
<input type="text" <input type="text" name="lastname" value="Mouse">
name="lastname"> <br><br>
<input type="submit" value="Submit">
</form>
</form>

<form>
<input type="radio" name="gender"
value="male" checked> Male<br>
<input type="radio" name="gender"
value="female"> Female<br>
<input type="radio" name="gender"
value="other"> Other
K. Vallidevi 57
</form>
<form action="/action_page.php">
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">

Find the mistake in this

<form action="/action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>

K. Vallidevi 58
Grouping of elements
• The <fieldset> element is used to group
related data in a form.
• The <legend> element defines a caption for
the <fieldset> element.
• The <select> element defines a drop-down list
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> K. Vallidevi 59
Button- Pop up or drop down?
• <button type="button" onclick="alert('Hello World!')">Click
Me!</button>

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> K. Vallidevi 60
Forms
<form action="">
First name:<br>
<input type="text"
name="firstname" value ="John"
readonly>
<br>
Last name:<br>
<input type="text"
name="lastname">
</form>

K. Vallidevi 61
autocomplete
<form action="/action_page.php"
autocomplete="on">
First name:<input type="text"
name="fname"><br>
Last name: <input type="text"
name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
<input type="submit">
</form> K. Vallidevi 62
novalidate
<form action="/action_page.php" novalidate>
E-mail: <input type="email"
name="user_email">
<input type="submit">
</form>

K. Vallidevi 63
HTML 5
• New semantic elements like <header>,
<footer>, <article>, and <section>.
• New attributes of form elements like number,
date, time, calendar, and range.
• New graphic elements: <svg> and <canvas>.
• New multimedia elements: <audio> and
<video>.

K. Vallidevi 64
K. Vallidevi 65
Define Semantic Elements as
Block Elements
header, section, footer, aside, nav, main, article,
figure {
display: block;
}

K. Vallidevi 66
Adding our own HTML Tags
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
K. Vallidevi 67
<nav>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

K. Vallidevi 68
<footer>
<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a
href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>

K. Vallidevi 69
<article>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation
of our planet's natural environment,
and build a future in which humans live in
harmony with nature.</p>
</article> K. Vallidevi 70
<aside>
• The <aside> element defines some content
aside from the content it is placed in (like a
sidebar).
• The <aside> content should be related to the
surrounding content.

K. Vallidevi 71
<figure>
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia,
Italy.</figcaption>
</figure>
The <img> element defines the image, the
<figcaption> element defines the caption.

K. Vallidevi 72
<canvas>
<canvas id="myCanvas" width="200"
height="100">
</canvas>

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics.
You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing


paths, boxes, circles, text, and adding images.

K. Vallidevi 73
<svg>
• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">


<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4"
fill="yellow" />
</svg>

</body>
</html> K. Vallidevi 74
Rectangle with SVG
<svg width="400" height="100">
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-
width:10;stroke:rgb(0,0,0)" />
</svg>

K. Vallidevi 75
<video>
<video width="320" height="240" controls>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

K. Vallidevi 76
Controls attribute
• The controls attribute adds video controls, like play, pause,
and volume.
• It is a good idea to always include width and height attributes.
If height and width are not set, the page might flicker while
the video loads.
• The <source> element allows you to specify alternative video
files which the browser may choose from. The browser will
use the first recognized format.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video>
element.

K. Vallidevi 77
autoplay
<video width="320" height="240" autoplay>
<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

K. Vallidevi 78
<audio>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3"
type="audio/mpeg">
Your browser does not support the audio
element.
</audio>

K. Vallidevi 79
attributes
• The controls attribute adds audio controls, like play,
pause, and volume.
• The <source> element allows you to specify
alternative audio files which the browser may choose
from. The browser will use the first recognized
format.
• The text between the <audio> and </audio> tags will
only be displayed in browsers that do not support
the <audio> element.

K. Vallidevi 80
/*

Welcome to CSS
(given in multiline comment syntax)

*/.

K. Vallidevi 81
<html>
<head> <aside>
<title>aside tag</title> <body>
<style> aside <div class = "gfg“>GeeksforGeeks
{ </div>
.gfg float:right; <article>
{ width: 40%; <h1>Heading . . .</h1>
font-size:40px; float: right; <p>Aside tag is use to display
color:#090; background -color: important information
font-weight:bold; green; about the primary page.
text-align:center; color: white; </p>
margin-bottom:20px; padding:5p x; </article>
} margin:10px; <aside>
height:100px; <h1>Aside tag example</h1>
article { } <p>Aside tag content. .</p>
width: 50%; </style> </aside>
float: left; </head> </body>
padding:10px; </html>
float:left;
}

K. Vallidevi 82
K. Vallidevi 83
K. Vallidevi 84
Overriding Inheritance

K. Vallidevi 85
Creating a Selector for a class

K. Vallidevi 86
Multiple Selectors selecting an
element

K. Vallidevi 87
Test your understanding

K. Vallidevi 88
Answers

K. Vallidevi 89
Fonts

K. Vallidevi 90
K. Vallidevi 91
K. Vallidevi 92
K. Vallidevi 93
K. Vallidevi 94
K. Vallidevi 95
K. Vallidevi 96
K. Vallidevi 97
K. Vallidevi 98
K. Vallidevi 99
CSS Box Model
• Every rendered element occupies a box:
(or outer edge)

(or inner edge)

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model

K. Vallidevi
CSS Box Model
• If multiple declarations apply to a property,
the last declaration overrides earlier
specifications

Left border is 30px wide,


inset style, and red

K. Vallidevi
K. Vallidevi 110
K. Vallidevi 111
Test Your Understanding

112
K. Vallidevi
K. Vallidevi 113
K. Vallidevi 114
K. Vallidevi 115
K. Vallidevi 116
K. Vallidevi 117
id attribute

K. Vallidevi 118
id attribute

K. Vallidevi 119
id attribute

K. Vallidevi 120
HTML elements can also refer to
more than one class.
<style>
p.center <body>
{
text-align: center; <h1 class="center">This heading will not be affected</h1>
color: red; <p class="center">This paragraph will be red and center-
} aligned.</p>
<p class="center large">This paragraph will be red, center-
p.large aligned, and in a large font-size.</p>
{
font-size: 300%; </body>
}
</style>

K. Vallidevi 121
Universal Selector
Selects every element on the page

*{
text-align: center;
color: blue;
}

Cascading Order

What style will be used when there is more than one style specified for an
HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest priority:

Inline style (inside an HTML element)


External and internal style sheets (in the head section)
Browser default

So, an inline style has the highest priority, and will override external and
122
internal styles and browser defaults. K. Vallidevi
The CSS Grouping Selector

h1 {
text-align: center; h1, h2, p
color: red; {
} text-align: center;
h2 {
color: red;
text-align: center; }
color: red;
}

p{
text-align: center;
color: red;
}

K. Vallidevi 123
How to use class attribute and
id attribute in css

K. Vallidevi 124
K. Vallidevi 125
Frames and Framesets
• Frame and framesets not in use widely as they
cause navigation and usability problems.
• Considered as ‘old school’

K. Vallidevi 126
Improving your ranking

K. Vallidevi 127
<html>
<body>
<head> <h1>Hello World!</h1>
<style>
body { <p>W3Schools background no-repeat, set position
background-image: url("img_tree.png"); example.</p>
background-repeat: no-repeat;
background-position: right top; <p>Now the background image is only shown once, and
positioned away from the text.</p>
margin-right: 200px;
} <p>In this example we have also added a margin on the
</style> right side, so the background image will never disturb the
</head> text.</p>

</body>
</html>

K. Vallidevi 128
p{
margin-top: 100px; p{
margin-bottom: 100px; margin: 25px 50px 75px 100px;
margin-right: 150px; }
margin-left: 80px;
}

p{
p{
margin: 25px 50px;
margin: 25px 50px 75px;
}
}

margin: 25px 50px 75px; margin: 25px 50px;


top margin is 25px top and bottom margins are 25px
right and left margins are 50px right and left margins are 50px
bottom margin is 75px

p{
margin: 25px;
margin: 25px;
all four margins are 25px
}

K. Vallidevi 129
CSS 2D Transforms Methods
With the CSS transform property you can use the following 2D transformation
methods:
• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

K. Vallidevi 130
Translate()

div {
transform: translate(50px, 100px);
}

The translate() method moves an element from


its current position (according to the
parameters given for the X-axis and the Y-
axis).
K. Vallidevi 131
The rotate() Method

• The rotate() method rotates an element


clockwise or counter-clockwise according to a
given degree.
div {
transform: rotate(20deg);
}
div {
transform: rotate(-20deg);
}
K. Vallidevi 132
The scale() Method
• The scale() method increases or decreases the size of an element (according to the
parameters given for the width and height).
• div {
transform: scale(2, 3);
}
• div {
transform: scale(0.5, 0.5);
}
• div {
transform: scaleX(2);
}
• div {
transform: scaleX(0.5);
}
• div {
transform: scaleY(3);
}
• div {
transform: scaleY(0.5); K. Vallidevi 133
}
CSS transitions
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

K. Vallidevi 134
CSS Shadow Effects

• With CSS you can add shadow to text and to elements.


• text-shadow
• box-shadow
• The CSS text-shadow property applies shadow to text.
• In its simplest use, you only specify the horizontal shadow (2px) and the vertical
shadow (2px):
• h1 {
text-shadow: 2px 2px; Text shadow
}
• h1 {
text-shadow: 2px 2px red; Adding Color to the
} shadow
• h1 {
text-shadow: 2px 2px 5px red;
Adding Blur Effect
}

K. Vallidevi 135
CSS Shadow Effects
• h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}

• h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

• h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

K. Vallidevi 136
CSS Shadow Effects
• h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

• div {
box-shadow: 10px 10px;
}

K. Vallidevi 137
CSS Text Effects
• text-overflow
The CSS text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user.

• word-wrap
The CSS word-wrap property allows long words to be able to be broken and
wrap onto the next line.

• word-break
Breaks with some rules

• writing-mode
The CSS writing-mode property specifies whether lines of text are laid out
horizontally or vertically.
K. Vallidevi 138
text-overflow
<h1>The text-overflow Property</h1>
<style>
<p>The following two paragraphs contains a long text that
p.test1 { will not fit in the box.</p>
white-space: nowrap;
width: 200px; <h2>text-overflow: clip:</h2>
border: 1px solid #000000; <p class="test1">This is some long text that will not fit in the
overflow: hidden; box</p>
text-overflow: clip;
} <h2>text-overflow: ellipsis:</h2>
<p class="test2">This is some long text that will not fit in the
p.test2 { box</p>
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

K. Vallidevi 139
text-overflow
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}

div.test:hover {
overflow: visible;
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

K. Vallidevi 140
word-wrap property
<style> <h1>The word-wrap Property</h1>
p.test {
<p class="test"> This paragraph contains a
width: 11em; very long word:
border: 1px solid #000000; thisisaveryveryveryveryveryverylongword.
word-wrap: break-word; The long word will break and wrap to the
next line.</p>
}
</style>

K. Vallidevi 141
The CSS word-break property
specifies line breaking rules
<style> <h1>The word-break Property</h1>
p.test1 {
<p class="test1">This paragraph contains
width: 140px; some text. This line will-break-at-
border: 1px solid #000000; hyphens.</p>
word-break: keep-all;
<p class="test2">This paragraph contains
} some text. The lines will break at any
character.</p>
p.test2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}

K. Vallidevi 142
p.test1 {
writing-mode: horizontal-tb;
writing-mode property
}

span.test2 {
writing-mode: vertical-rl;
}

p.test2 {
writing-mode: vertical-rl;
}

<h1>The writing-mode Property</h1>

<p class="test1">Some text with default writing-


mode.</p>

<p>Some text with a span element with a <span


class="test2">vertical-rl</span> writing-
mode.</p>

<p class="test2">Some text with writing-mode:


K. Vallidevi 143
vertical-rl.</p>
background
• background-size
• background-origin
• background-clip
CSS allows you to add multiple background
images for an element, through the
background-image property.

K. Vallidevi 144
Background - example
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

K. Vallidevi 145

You might also like