Lesson1_Advanced Web Design_part1

1.
ADVANCED WEB DESIGN

Index:
• Introduction to HTML5
• Forms in HTML5
• Cascading Style sheets
• Lists in HTML5
• Inserting video, audio
• Image map in HTML5
• Inline Frame
• Website Hosting
1
WEB C O M P O N E N TS
 Webpage : A simple text file created using HTML.
 Website : A collection of interlinked web pages containing text, images, audio and
videos. ForExample, www. ebalbharati.in
 Web Browser : A web browser is a software used to view web pages or websites
available on the internet For Example Internet Explorer, Google chrome.
 Web Server : A Web server is an application or a computer that sends webpages

over the internet using the HTTP protocol. For Example Apache, nginx, IIS, etc..
 URL(Uniform Resource Locator) : It is an address of a web page on the internet.
 HTTP : HTTP (HyperText Transfer Protocol) is a protocol used by WWW for client
server communication.
 HTML : Hyper Text Markup language 2

INTRODUCTION TO HTML5
 HTML5 is the latest and most enhanced version of HTML
 It makes your website layout clearer to both website designers and users
 Browsers support ‘s features of HTML5 : Google Chrome, Mozilla Firefox,

Microsoft Edge, Safari, Opera and Apple.
3
BASIC STRUCTURE OF HTML5
 <html> and </html> : indicates that the document is an html file.
 <head> and </head> : It includes <Title> within it, the text

within <head> is not displayed on the webpage. This is used for
search engine optimization.
 <title> and </title> : The content within this displayed on the title
bar.
 <body> and </body> : This tag includes all content which is to be

developed in the web browser. Most of the tags are included in this
tag.
4
BASIC STRUCTURE OF HTML5
An attribute : An attribute defines a property for an element, consists of an
attribute/value, and appears within the element's start tag.
<!Doctype html>
<html>
<head>
<title> First Page </title>
</head>
<body bgcolor = green>
attribute value of attribute
This is my first web page
</html> </body> 5
Execute Here
Defines a header for a document section .
Defines a container for navigation links.
Defines a section in a document
Defines content apart from

the content (like a sidebar).
Defines an independent self-contained article.
Defines a footer for a document or a section .
Click here for Example

F O R M S I N HTML5
• Forms in HTML is used to accept user input.
• Form controls are used to collect different kinds of user inputs, such as contact details
like name, address, single or multiple options from group of options, as well as clearing
and submitting data etc.
Attributes used with form element and Input element.

 Name : It specifies a name to a form.
 Action : The action attribute specifies the path where the form is to be submitted.
 Method : The method attribute specifies get or post method to be used when submitting
the form data. Method of form are GET or POST.
i) GET method : GET method will pass the values via URL ,Passed values will be seen in Address
bar.
ii) POST Method :POST method will pass the values via HTTP request.
Passed values not seen in Address bar. So it is a secure method to submit sensitive 7
F O R M S I N HTML5
Click to execute
8
<form >
<h1>Some form elements</h1>
Select your favorite color <input type="color" >
<br>
Enter your phone Number <input type="Number" >
<br>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
<br>
<input type="image" src="happy.jpg" alt="Submit" width="100" height="100">
<br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<br>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="submit">
</form>
9
10
Input Restrictions
 A list of some common input restrictions is given below, few of which can be used for validation purpose.
11
 Some other useful attributes used with <input> are-
1. id : This is used to identify the html element uniquely through the

document object model.
2. class: It is used to apply CSS style to the individual input element.
12
1.3 <meta> tag
 The meta tag is a tag in html that describes some aspects of contents
of a webpage.
 The HTML <meta> tag is used by search engines to search information that
is provided with the webpage.
 This is empty tag (singular tag) which carries information within its
attributes.
 The <meta> tag is placed between the <head>and </head> tags.
 Metadata will not be displayed on the webpage.
13
14
<!DOCTYPE html>
<html>
<head>
<title>meta tag examples</title>
<meta name = "authors" content = "Balbharti">
<meta name = "description" content = "Advance web designing">
<meta name = "keywords" content = "html5, learn html5, list in html5">
<meta name="copyright" content= " copyright Balbharti All right Reserve">
</head>
<body>
<p> Welcome to HTML5
</p>
</body>
</html>
15
1.4 Cascading Style Sheets (CSS) in HTML5
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.
• It can control the layout of multiple web pages all at once.
• CSS allows you to control the look and feel of several pages by changing a
single source.
⚫ A CSS rule set contains

 a selector and
 a declaration block.
16
CSS Syntax
• selector points to the HTML element you want to style.
• declaration block contains one or more declarations separated by semicolons.

Declaration blocks are surrounded by curly braces.
• Declaration includes a CSS property name and a value, separated by a colon.
Property : is a type of attribute of HTML element. It could be color, border etc.
Value : Values are assigned to CSS properties. In the above example, value “blue" is
assigned to color property.
17
Selector{Property1: value1; Property2: value2}
CSS Syntax
18
19
20
Types of CSS
There are three methods of implementing styling
1. Inline CSS :- It uses the style attribute in the HTML start tag. Inline CSS is used to apply
CSS on a single line or element.
For example : <p style="color:blue">Hello CSS</p>
2.Embedded stylesheet or internal CSS : This is used to apply CSS on a single document or
page. It can affect all the elements of the page. It is written inside the style tag within head section
of html.For example : <style> h1{color: Red;}</style>
3.External CSS: The external style sheet is generally used when you want to make changes
on multiple pages. It uses the <link> tag on every page and the <link> tag should be put inside
the head section. The external css file should not contain any HTML tags ,open with any text
editor it saved with .css extension.
For example : Style.css
h1{color:navy;margin-left:20px} 21
<link rel="stylesheet" href="style.css">
1. Inline CSS :- It uses the style attribute in the HTML start tag. Inline CSS is used to apply
CSS on a single line or element.
For example : <p style="color: blue">Hello CSS</p>
< ! D O C T Y P E html>
<html>
<body>
<h1 style="color:blue;
border: 2px solid black;
text-align:center;">
A Blue Heading
</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html> 22
Internal CSS
It is written inside the style tag within head section of html.
For example : <style> h1{color: Red;}</style>
< ! D O C T Y P E html>
<html>
<Head>
<style> h1{color:blue;
border: 2px solid black;
text-align:center;}
p{ color:red; }
</style>
</head>
<body>
<h1> A Blue Heading </h1>
<p> A red paragraph.</p>
</body>
</html> 23
24
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 unique element. It is written
with the hash character(#), followed by the id name.
<!DOCTYPE html>
<html>
<head>
<style>
#para1{text-align: center; color: blue}
</style>
</head>
<body>
<p id="para1">Hello Students</p>
<p>This paragraph will not be
affected.</p> 25
</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.
 The Class selector is used when you want to change a group of elements within
your HTML page. The class name should not start with number.
<!DOCTYPE html>
<html>
<head>
<style>
.intro{text-align:center;color:blue}
</style></head>
<body>
<h1 class="intro">This heading is blue
and center-aligned.</h1>
<p class="intro">This paragraph
is blue and center-aligned.</p> 26
</body>
</html>
Class Selector for specific element
To specify only one specific HTML element should be affected
then you should use the element name with class selector.
<!DOCTYPE html>
<html>
<head> <style>
p.intro {text-align: center;color: blue}
</style> </head>
<body>
<h1 class="intro">This heading is not
affected</h1>
<p class="intro">This paragraph
is blue and center-aligned.</p>
</body> 27
</html>
Universal Selector
The universal selector is used as a wildcard character. It selects all the
elements on the Webpages.
<!DOCTYPE html>
<html>
<head> <style>
* { color: green; font-size: 20px;}
</style> </head>
<body>
This css style will be applied on
Entire Page
<h2>This css is applied to Heading
2</h2>
<p id="para1“ >it is applied to first
paragraph</p>
<p>Also to second paragraph !</p>
</body> 28
</html>
Group Selector
 The grouping selector is used to select all the elements with the same
style definitions. It is used to minimize the code.
 Commas are used to separate each selector in grouping.
H1,h2,p{ text-align:center;color:blue}
.
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p{text-align: center; color: blue}
</style>
</head>
<body>
<h1> Hello Heading 1</h1>
<h2> Hello Heading2(In smaller font)</h2>
<p> This is a paragraph.</p>
29
</body>
</html>
Positioning in CSS
 CSS helps toposition the HTML elements.
 The position property is used to set position for an
 element
The element can be positioned using the top, bottom, left and right
properties. .
Syntax :
Selector{ position:value; top:value; left:value: bottom:value; right:value }
Where values in positions are static ,fixed, absolute, relative and values of top, bottom,
left, right are in pixels
There are four types of positioning in CSS:-

1. Static Positioning
2. Fixed Positioning
3. Relative Positioning 30
4. Absolute Positioning
Positioning in CSS
 Static Positioning This is a by- default position for HTML elements. It is not
affected by the top, bottom, left and right properties.
 Fixed Positioning : This property helps to put the text fixed on the
browser. The FIXED property forces an element into a fixed position
relative to the browser window. The fixed element will not move, even when
the page is scrolled.
<!DOCTYPE html>
<html>
<head><style> p.fixed{position: fixed; top: 50px;
right: 5px; color: blue}
</style></head>
<body>
<p>This is paragraph 1</p>
31
<p class="fixed">This is fixed positioned text.</p>
</body></html>
Positioning in CSS
3. Relative Positioning : The relative positioning property is used to set
the
element relative to its normal position.
4. Absolute Positioning : This property sets an element in a specific location
and it is not affected by the flow of the page. This property positions the
element at the specified coordinates relative to your screen top-left corner.
<!DOCTYPE html>
<html>
<head>
<style>
.first{position: relative;top:-10px; right:-10px;}
h2{position: absolute; left:100px;top:150px}
</style>
<body>
<h1 class="first">This is heading 1</h1>
<h2>This is heading 2</h2>
32
</body>
</html>
Float Property in CSS
 Float is a CSS property written in CSS file or directly in the style of an element. The float
property defines the flow of content.
 Following are the types of floating properties :
1. float : left : This keeps the element float on left side of the container
2. float : right : This keeps the element float on right side of container
3. float : none : This is default i.e. this shows the element as
property it is.
<!DOCTYPE html>
<html><head>
<title>Float Example</title>
<style>.float-left{float:left;font-size:20px;background-color:gold}
.float-right{float: right;
font-size:20px;background-color:gold}
</style></head><body>
<h2 class="float-left">Balbharati</h2>
<p>This text rearranges itself to flow around the element that is floated
left.</p>
<h2 class="float-right">Balbharati</h2>
<p>This text rearranges itself to flow around the element that is floated 33
right. </p>
</body>
</html>
Display property
 The Display property in CSS defines how the components (div, hyperlink, heading,
etc) are going to be placed on the web page.
 It specifies how the element is displayed. this property is used to define the display
of different parts of a web page.
Syntax : Display : value;
Where values are :

 Inline : It is used to display an element as an inline element.
 Block : It is used to display an element as an blockelement. It starts on a new line, and
takes up the whole width of the browser window.
 Block-inline : This value is very similar to inline element but the difference is that you are
able to set the width and height.
 None : The element is completely removed.
34
Display property
<!DOCTYPE html>
<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>welcome to balbharti</p>
<p>Javascript</p>
<p>HTML5</p>
<p>CSS</p></body></html>
35
Display property
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS display</title>
<style type="text/css">
a{
display : block; background-color:orange;
}
</style>
</head>
<body>
<p>
<a href="https://www.ebalbharti.in" >
Visit balbharti</a>
<br>
</p></body>
</html>
36
Ordered list or numbered list
 The <ol> tag defines an ordered list. An ordered list can be numerical
or
alphabetical.
37
or
alphabetical.
<!DOCTYPE html>
<html>
<body>
<h3>List of Topics in reverse sequence</h3>
<ol reversed>
<li> Basics of IT </li>
<li> HTML 5 </li>
<li> PostgreSQL</li>
</ol>
</body>
</html>
38
or
alphabetical.
<!DOCTYPE html>
<html><body>
<h3>List of Topics</h3>
<ol>
<li> Basics of IT</li>
<li> HTML 5 </li>
<li> PostgreSQL </li>
</ol>
<h3>List of Topics start with series 50</h3>
<ol start="50">
<li> Basics of IT</li>
<li> HTML 5 </li>
<li> PostgreSQL </li>
39
</ol></body></html>
1.6 Unordered list or bulleted list
 An unordered list created using the

 <ul> tag, and each list item starts with the <li> tag. The list items in
unordered lists are marked with bullets (small black circles), by default.
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Unordered List</title>
</head>
<body>
<h3>HTML Unordered List</h3>
<ul>
<li>Basics of IT</li>
<li>HTML 5</li>
<li>PostgreSQL</li> 40
</ul></body></html>
Note : HTML5 does not support bullets, circle and square value of
41
type attribute instead you use CSS style.
 An unordered list created using the

 <ul> tag, and each list item starts with the <li> tag. The list items
in unordered lists are marked with bullets (small black circles), by
default.
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Unordered List</title>
</head>
<body>
<h3>HTML Unordered List</h3>
<ul>
<li>Basics of IT</li>
<li>HTML 5</li>
<li>PostgreSQL</li> 42
</ul></body></html>
1.7 Definition list
 To define a definition list <dl> tag is used. You can create items in definition list
with the <dt> and <dd> tags. The <dt> tag is used to define the term whereas
the <dd>tag is used to define the term’s definition.
<!DOCTYPE html>
<html>
<head>
<title>definition List</title>
</head>
<body>
<h3>Example of HTML definition List</h3>
<dl>
<dt><b>Web</b></dt>
<dd>The part of the Internet that contains websites and
web pages</dd>
<dt><b>HTML</b></dt>
<dd>A markup language for creating web pages</dd>
<dt><b>CSS</b></dt>
<dd>A technology to make HTML look better</dd>
</dl> 43
</body>
</html>
1.7 Nested list
List within another list either order list or unordered list is called nested list.
Examples : Single level nested list
<!DOCTYPE html>
<html >
<head>
<title>Example of HTML nested list</ title>
</head>
<body>
<h3>HTML Nested List</h3>
<ol>
<li>Introduction to IT</li>
<li>Introduction to DBMS</li>
<ul style="list-style-type:circle">
<li>Definition of DBMS</li>
<li>applications of DBMS</li>
<li>Advantages of DBMS</li>
</ul>
<li>Postgresql</li> 44
</ol>
</body>
</html>
1.7 Nested list
Examples : Multilevel nested list
<!DOCTYPE html>
<html >
<head>
<title>nested list</title>
</head>
<body>
<h3> Multi-level list Nested List</h3>
<ul>
<li>Daily computing</li>
<li>Web design</li>
<ol>
<li>html 5</li>
<li>hyperlink</li>
<li>Inserting Images</li>
</ol>
<li>Javascript</li>
<ul style="list-style-type:circle">
<li>conditional structure</li>
<ul style="list-style-type:square">
<li>If statment</li>
<li>If else statement</li>
<li>case statement</li>
</ul>
<li>loop statement</li>
</ul>
</ul>
</body>
45
</html>
T H A N K YO U
46

Lesson1_Advanced Web Design_part1

Uploaded by

Lesson1_Advanced Web Design_part1

Uploaded by

1.

ADVANCED WEB DESIGN

 Web Server : A Web server is an application or a computer that sends webpages

 URL(Uniform Resource Locator) : It is an address of a web page on the internet.

 HTML : Hyper Text Markup language 2

 HTML5 is the latest and most enhanced version of HTML

 Browsers support ‘s features of HTML5 : Google Chrome, Mozilla Firefox,

 <head> and </head> : It includes <Title> within it, the text

 <body> and </body> : This tag includes all content which is to be

Defines a container for navigation links.

Defines a section in a document

Defines content apart from

Defines a footer for a document or a section .

Click here for Example

Attributes used with form element and Input element.

1. id : This is used to identify the html element uniquely through the

⚫ A CSS rule set contains

• selector points to the HTML element you want to style.

• declaration block contains one or more declarations separated by semicolons.

• Declaration includes a CSS property name and a value, separated by a colon.

Property : is a type of attribute of HTML element. It could be color, border etc.

There are three methods of implementing styling

<p style="color:red;">A red paragraph.</p>

 The Id selector selects the id attribute of an HTML element to select

There are four types of positioning in CSS:-

Syntax : Display : value;

Where values are :

 An unordered list created using the

 An unordered list created using the

Examples : Single level nested list

You might also like