Web Designing.docx

Created by Atul Tiwari
1
What is HTML?
HTML is the standard markup language for creating Web pages.
 HTML stands for Hyper Text Markup Language
 HTML describes the structure of Web pages using markup
 HTML elements are the building blocks of HTML pages
 HTML elements are represented by tags
 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but use them to render the content of the page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines this document to be HTML5
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the document
 The <title> element specifies a title for the document
 The <body> element contains the visible page content
 The <h1> element defines a large heading
 The <p> element defines a paragraph

2
HTML Tags
<tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and </p>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, but with a forward slash inserted before the tag
name
Write HTML Using Notepad
Web pages can be created and modified by using professional HTML editors.
Follow the four steps below to create your first web page with Notepad.
Step 1: Open Notepad (PC)
Open Start > Programs > Accessories > Notepad
Write some HTML into Notepad.

3
Step 2: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.html" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).

4
Step 3: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").
The result will look much like this:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>

5
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

6
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
<!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>

7
HTML Buttons
HTML buttons are defined with the <button> tag:
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
</body>
</html>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list)
tag, followed by <li> tags (list items):
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>

8
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT
An Unordered HTML List
 Coffee
 Tea
 Milk
An Ordered HTML List
1. Coffee
2. Tea
3. Milk

9
Attribute Description
alt Specifies an alternative text for an image, when the image cannot be displayed
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)

10
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
OUTPUT
Heading 1
Heading 2

11
Heading 3
Heading 4
Heading 5
Heading 6
HTML Horizontal Rules
The <hr> tag defines a thematic 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:
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
</body>
</html>

12
OUTPUT
This is heading 1
This is some text.
This is heading 2
This is some other text.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head>
A container for all the head elements (title, scripts, styles, meta information, and
more)
<h1> to
<h6>
Defines HTML headings
<hr> Defines a thematic change in the content
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<!DOCTYPE html>
<html>
<body>

13
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
OUTPUT
This is
a paragraph
with line breaks
Poem Problem
This poem will display on a single line:
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>

14
</body>
</html>
OUTPUT
In HTML, spaces and new lines are ignored:
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.
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>

15
</pre>
</body>
</html>
OUTPUT
The pre tag preserves both spaces and line breaks:
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>

16
<p style="font-size:50px;">I am big</p>
</body>
</html>
OUTPUT
I am normal
I am red
I am blue
I am big
HTML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</body>

17
</html>
OUTPUT
HTML Text Color
The color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
OUTPUT
This is a heading

18
This is a paragraph.
HTML Fonts
The font-family property defines the font to be used for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
OUTPUT
This is a heading
HTML Text Size
The font-size property defines the text size for an HTML element:
<!DOCTYPE html>
<html>

19
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
OUTPUT
This is a heading
HTML Formatting Elements
In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text

20
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML <address> for Contact Information
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.
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or
article.</p>

21
<address>
Written by Atul Tiwari.<br>
Visit us at:<br>
Example.com<br>
Lucknow<br>
India
</address>
</body>
</html>
OUTPUT
The HTML address element defines contact information (author/owner) of a document or article.
Written by atul Tiwari.
Visit us at:
Example.com
Lucknow,
India.

22
HTML with CSS
CSS stands for 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.
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
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:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
OUTPUT
This is a Blue Heading

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

24
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>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
OUTPUT
An external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.

25
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Border
The CSS border property defines a border around an HTML element:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
}
</style>
</head>
<body>
</body>
</html>
OUTPUT

26
This is a heading
CSS Padding
The CSS padding property defines a padding (space) between the text and the border:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
</body>
</html>

27
OUTPUT
CSS Margin
The CSS margin property defines a margin (space) outside the border:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>

28
<body>
</body>
</html>
OUTPUT

29
HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
OUTPUT

30
HTML <script> Tag
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file
through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
To select an HTML element, JavaScript very often uses the document.getElementById()
method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
Use JavaScript to Change Text
This example writes "Hello JavaScript!" into an HTML element with id="demo":
Hello JavaScript!

31
File Paths
Path Description
<img src="picture.jpg">
picture.jpg is located in the same folder as the
current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the
current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root
of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from
the current folder
HTML Forms
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

32
OUTPUT
Text Input
<input type="text"> defines a one-line input field for text input:
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">

33
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
OUTPUT
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices:
<!DOCTYPE html>

34
<html>
<body>
<h2>Radio Buttons</h2>
<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
</form>
</body>
</html>
OUTPUT

35
Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

36
HTML Responsive Web
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
}
.menuitem {
padding: 8px;
margin-top: 7px;
border-bottom: 1px solid #f1f1f1;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
overflow: hidden;
}
.right {
background-color: lightblue;
float: left;
width: 20%;
padding: 10px 15px;
margin-top: 7px;
}
@media only screen and (max-width:800px) {
/* For tablets: */
.main {
width: 80%;
padding: 0;

37
}
.right {
width: 100%;
}
}
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;">
<h1>Cinque Terre</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<div class="menuitem">The Walk</div>
<div class="menuitem">Transport</div>
<div class="menuitem">History</div>
<div class="menuitem">Gallery</div>
</div>
<div class="main">
<h2>The Walk</h2>
<p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give
or take an hour depending on the weather conditions and your physical shape.</p>
<img src="img_5terre.jpg" style="width:100%">
</div>
<div class="right">
<h2>What?</h2>
<p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and
Riomaggiore.</p>
<h2>Where?</h2>
<p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p>
<h2>Price?</h2>

38
<p>The Walk is free!</p>
</div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-
size:12px;"> This web page is a part of a demonstration. Resize the browser window to see the
content respond to the resizing.</div>
</body>
</html>
Setting The Viewport
When making responsive web pages, add the following <meta> element in all your web pages:
<!DOCTYPE html>
<html>
<body>
<h2>Setting the Viewport</h2>
<p>This example does not really do anything, other than showing you how to add the viewport
meta element.</p>
</body>
</html>
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:
<!DOCTYPE html>
<html>

39
<body>
<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down
when resizing the browser window. Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale
up to be larger than its original size:
<!DOCTYPE html>
<html>
<body>
<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if
you make the browser window smaller, the image will still scale down.</p>
<p>Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:
<!DOCTYPE html>
<html>

40
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10%
of the viewport width.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm
wide, 1vw is 0.5cm.</p>
</body>
</html>
Responsive Web Page - Full Example
A responsive web page should look good on large desktop screens and small mobile phones.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.menu {
float:left;
width:20%;
text-align:center;
}
.menu a {
background-color:#e5e5e5;
padding:8px;
margin-top:7px;
display:block;
width:100%;
color:black;
}

41
.main {
float:left;
width:60%;
padding:0 20px;
}
.right {
background-color:#e5e5e5;
float:left;
width:20%;
padding:15px;
margin-top:7px;
text-align:center;
}
/* For mobile phones: */
.menu, .main, .right {
width:100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>Hello World</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
</div>
<div class="main">

42
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="right">
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">©
</div>
</body>
</html>

43
Navigation Bars
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
sense:
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

44
</body>
</html>
OUTPUT
 Home
 News
 Contact
 About
Note: We use href="#" for test links. In a real web site this would be URLs.
Now let's remove the bullets and the margins and padding from the list:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>

45
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
</ul>
</body>
</html>
OUTPUT
In this example, we remove the bullets from the list, and its default padding and margin.
 Home
 News
 Contact
 About

46
 list-style-type: none; - Removes the bullets. A navigation bar does not need list
markers
 Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to
the code above:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

47
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>

48
</ul>
</body>
</html>
Full-height Fixed Vertical Navbar
Create a full-height, "sticky" side navigation:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;

49
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {

50
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is
set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the
sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>

51
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;

52
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
</style>

53
</head>
<body>
<ul>
</ul>
</body>
</html>
Sticky Navbar
Use position: sticky; to <li> to create a sticky navbar.
A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place
(like position:fixed).
<!DOCTYPE html>
<html>
<head>
<style>

54
body {
font-size: 28px;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}

55
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover {
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>

56
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer, Edge 15 and earlier versions do not support
sticky positioning. Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>

57
</body>
</html>

Web Designing.docx

More Related Content

Similar to Web Designing.docx (20)

Recently uploaded (20)

Web Designing.docx