Scribd
Upload
11 views

Lecture 8 MoreCSSexamplesAndHTML5

The document covers advanced CSS techniques for page layout, including the box model, margins, padding, and the use of div tags. It also introduces new HTML5 features such as semantic elements, video and audio support, and improved form controls. Additionally, it discusses browser compatibility for these new features and provides examples of fluid and fixed-width designs.

Uploaded by

perfectshamte76
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Lecture 8 MoreCSSexamplesAndHTML5

The document covers advanced CSS techniques for page layout, including the box model, margins, padding, and the use of div tags. It also introduces new HTML5 features such as semantic elements, video and audio support, and improved form controls. Additionally, it discusses browser compatibility for these new features and provides examples of fluid and fixed-width designs.

Uploaded by

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

More CSS - Page layout

+ HTML5 new features

Lecturer: Mr Gideon Marandu


Overview
● The Box Model
• Borders
• Margins and padding
● Using div tags with the box model
● HTML5
• New features
• Browser support
The Box Model
● Each element in a document is considered to be a rectangular
box consisting of content area, padding, a border and margins
Borders
● Every element has a border-style
property
• Controls whether the element has a border and
if so, the style of the border
● border-style values: none, dotted,
dashed, and double
● border-width values: thin, medium
(default), thick, or a length value in pixels
• Border width can be specified for any of the four
borders (e.g., border-top-width)
Borders

● border-color – any color


• Border color can be specified for any of the
four borders (e.g., border-top-color

http://www.cs.nott.ac.uk/~bnk/WPS/border.html
Margins
● The space between the border of an element
and its neighbor element
● The margins around an element can be set
with margin-left, etc. - just assign them a
length value
<img src = "c210.jpg" style = "float:
right; margin-left: 0.35in; margin-
bottom: 0.35in" />
Padding
● The distance between the content of an
element and its border
• Controlled by padding, padding-left, etc.

http://www.cs.nott.ac.uk/~bnk/WPS/marpads.html
Page Layout
• By default, webpage content flows as a
single column.
• Each block - heading, list, paragraph etc.
appears one after the other.
• Most websites implement more complex
page layouts.
• Page contents arranged into columns
• Header and footer sections
A Typical Website Layout
Header
Navigation Page Content Additional
Bar Links

Footer

• A typical website layout


Using CSS For Page Layout
• CSS is used to create complex page
layouts.
• Using the float and clear properties
• Using positioning properties

• There are many techniques for


achieving similar layouts.
• It is a combination of CSS properties
that control the layout.
The Process
• Controlling page layout with CSS often follows a
process.
• Mark-up the page with HTML elements to define
meaning.
• Add <div> elements to describe different parts of
the page.
• Use the width and float properties to create a basic
page layout.
• Add finishing CSS touches – colours, fonts etc.
Mark-Up the Page to Define
Meaning
...<h1>Header</h1>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
<h2>Navigation bar</h2>...

• Before defining page layout


• Mark-up the page contents using basic HTML
elements.
Structure the Page Using
the <div> Element
<div id="header">Header</div>

<div id="nav_bar"> <div id="page_contents"> <div id="extra_links">


Navigation bar <h1>Page Content</h1> Additional Links
</div> … </div>
</div>

<div id="footer">Footer</div>

• To control page layout, each section of the page is


marked up with <div> elements.
• id attributes give each <div> a unique name.
Fixed Width Design
Header width:974px
Navigation Bar
width:160px • Each <div> element
is given a width
Page Content property.
width:654px
• This example
targets a minimum
Additional Links screen resolution of
width:160px 1024 pixels.

Footer width:974px
The float Property
Header width:974px

Navigation Bar Page Content Additional Links

width:160px width:654px width:160px


float:left float:left float:left

Footer width:974px clear:left

• The float property is then used to make the


columns wrap onto the same line.
Centering the Page - 1
… • Many ‘fixed width’
<body>
<div id="wholepage">
designs centre
<div id="header"> • Always sit in the
<h1>Header</h1> middle of the browser
…
<h2>Footer</h2> window
</div> • Need to contain the
</div>
</body> entire page contents in
</html> a <div> element
Centering the Page - 2
#wholepage{
margin-left:auto;
margin-right:auto;
width:974px;
}

• The margin-left and margin-right properties are


set to auto.
• The browser re-calculates the margins based on
the window size.
Positioning
• CSS allows us to position elements on the page.
• The position property can be one of four values
• Static
• The default value
• Relative
• The element can be moved, but it remains in the
document flow.
• Absolute
• The element can be moved and is removed from the
document flow.
• Fixed
• The element is positioned relative to the browser window
and not the page.
Positioning – The Document
Flow - 1
• By default, elements are placed one
after the other in a page.
• They do not overlap.
• Elements which are taken out of the
‘document flow’
• Do not occupy any space on the page.
• Can overlap other elements
Positioning – The Document
Flow - 2
element1
#element1{
position:absolute;
top:50px;
left:50px;
}

• When the element is positioned, it is taken out of


the document flow.
• Overlaps other elements
• CSS properties define location on the page.
Positioning – Fixed Width
Design
Header height:200px; position:absolute; left:0px; top:0px;

Navigation Bar Page Content Additional Links

position:absolute; position:absolute; position:absolute;


left:0px; left:160px; left:814px;
top:200px; top:200px; top:200px;

• We can use absolute positioning to arrange <div>


elements on a page.
Positioning – Centering The
Page
#wholepage{
width:974px;
margin-left:auto;
margin-right:auto;
position:relative;
}

• Elements with absolute positioning are placed


relative to their parent element.
• Only if the parent is has a position property
• The elements will now move with the wholepage
<div>
Fluid Page Design - 1
Header
Navigation Page Content Additional
Bar Links

Footer
Header
Navigation Page Content Additional
Bar Links

Footer

• The page resizes to fill the available space.


• In this example - the middle column, the header and
footer
Fluid Page Design - 2
#header{
background-color:grey; height:200px; • Only the two
}
#nav_bar{
side columns
background-color:green; float:left; width:160px; need width
}
#page_contents{ properties.
background-color:red; • The other <div>
}
#extra_links{
elements will
background-color:green; float:left; width:160px; resize.
}
#footer{
background-color:lightblue; clear:left;
}
Fluid Page Design - 3
#header{
• The overflow
background-color:grey;height:200px property is
}
#nav_bar{
used to ‘clear’
background-color:green; float:left; width:160px; the float.
}
#page_contents{
• The third
background-color:red; overflow:hidden; column needs
}
#extra_links{
to be fixed to
background-color:green; float:right; width:160px; the edge of the
} browser.
#footer{
background-color:lightblue; clear:left; • float:right
}
Fluid Page Design - 4
<div id="page_contents"> <div id="extra_links">
<h1>Page Content</h1> <h2>Additional Links</h2>
… </div>
</div> <div id="page_contents">
<div id="extra_links"> <h1>Page Content</h1>
<h2>Additional Links</h2> …
</div> </div>

• Finally we have to re-arrange the HTML


• The right-hand column needs to come before the
middle column in the document flow.
List Based Navigation Bars
<div id="header">
<h1>Header</h1>
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
<li><a href="#">Option 4</a></li>
<li><a href="#">Option 5</a></li>
</ul>
</div>>

• It is common for sites to implement horizontal


navigation bars.
• Need to use CSS to change the default list
appearance
Removing the Default
Styling
• The first step is to
#header ul {
margin:0px;
remove the default list
padding:0px; appearance.
list-style:none;
}
• list-style:none
#header li { • Removes the bullet
float:left;
margin:0px;
points
padding:0px; • The <li> elements are
} floated to the left.
• Wrap onto the same line
Styling the Links
#header li a{
display:block;
width:150px;
background-color:pink;
margin-right:5px;
text-align:center;
}

• The hyperlinks can then be styled to look like


navigation buttons.
• The display property is necessary so the hyperlinks can
be given a width.
• Could specify background-images
div tags with the box model
● An example of a two-column page layout
• Left-column navigation
• Right-column logo and content

http://www.cs.nott.ac.uk/~bnk/WPS/twocolumn.
html
New HTML 5 Semantic
Elements
• HTML 5 features new elements we can
use instead of the <div>.
• <header>
• <article>
• <footer>
• <aside>
• Add greater meaning than <div>
elements with id attributes.
HTML5 new features
● The video and audio elements for media
playback
● The canvas element for drawing
● New content specific elements, e.g:
• article, footer, header, nav, section
● New form controls, e.g.:
• calendar, date, time, email, url, search
● Better support for local offline storage
HTML5 Video
● Until now, there has never been a standard for
showing video on a web page
● Most videos are shown through a plugin (like flash)
• However, not all browsers have the same plugins
● HTML5 specifies a standard way to include video,
with the video element
<video src="movie.ogg“
controls="controls">
</video>
http://www.cs.nott.ac.uk/~bnk/WPS/video.html
Video Formats
Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 No No No 5.0+ 3.0+
WebM No No 10.6+ 6.0+ No

• Ogg = Ogg files with Theora video codec and Vorbis audio
codec
• MPEG4 = MPEG 4 files with H.264 video codec and AAC
audio codec
• WebM = WebM files with VP8 video codec and Vorbis
audio codec
HTML5 Audio
● So far no standard for playing audio on web page
● Most audio are played through a plugin (flash)
• However, not all browsers have the same plugins
● HTML5 specifies a standard way to include audio,
with the audio element
● The audio element can play sound files, or an
audio stream
<audio src="song.ogg" controls="controls">
Your browser does not support the audio
element.
</audio>
Audio Formats
Firefox Opera Chrome
Format IE 8 Safari 3.0
3.5 10.5 3.0
Ogg
No Yes Yes Yes No
Vorbis
MP3 No No No Yes Yes
Wav No Yes Yes No Yes
Canvas Element
● Uses JavaScript to draw graphics on a web page
● A rectangular area, you control every pixel of it
● It has several methods for drawing paths, boxes,
circles, characters, and adding images
● Create a Canvas element
• Add a canvas element to the HTML5 page.
• Specify the id, width, and height of the element
<canvas id="myCanvas" width="200"
height="100"></canvas>
Canvas Element
● Draw with JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

http://www.cs.nott.ac.uk/~bnk/WPS/canvas.html
Canvas Element – line example

● Draw a line by specifying where to start, and


where to stop
<script type="text/javascript">
var
c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
http://www.cs.nott.ac.uk/~bnk/WPS/canvas-line.html
New content specific elements

● New elements for better structure


● <article> - for external content
• E.g. text from a news-article, blog, forum, or any
other content from an external source
● <header> - for an introduction of a document or
section, could include navigation
● <nav> - for a section of navigation
● <section> - for a section in a document
• Such as chapters, headers, footers, etc
● <time> - for defining a time or a date, or both
New form controls
● Several new input types for forms
• allow for better input control and validation
● email - used for input fields that should contain an
e-mail address
• The value of the email field is automatically
validated when the form is submitted
• <input type="email" name="user_email" />
● url - used for input fields that should contain a
URL address
• The value of the url field is automatically validated
when the form is submitted
• <input type="url" name="user_url" />
New form controls
● HTML5 has several new input types for selecting
date and time:
• date - selects date, month and year
• month - selects month and year
• week - selects week and year
• time - selects time (hour and minute)
• datetime - selects time, date, month and year (UTC
time)
• datetime-local - selects time, date, month and year (local
time)
• <input type="date" name="user_date" />
Browser Support
Input
IE Firefox Opera Chrome Safari
type
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date
No No 9.0 No No
pickers
search No No 11.0 No No
color No No 11.0 No No

Opera has the best support for the new input types. However, you can
already start using them in all major browsers. If they are not
supported, they will behave as regular text fields.
HTML5 Web Storage
● Two new objects for storing data on the client:
• localStorage - stores data with no time limit
• sessionStorage - stores data for one session
● So far this done with cookies
• But not suitable for large amounts of data, because they
are passed on by every request to the server
● In HTML5, the data is used only when asked for
• It is possible to store large amounts of data without
affecting the website's performance
● Data is stored in different areas for different websites,
and a website can only access data stored by itself
● HTML5 uses JavaScript to store and access the data
Browser Support
● HTML5 is not yet an official standard, and no
browser has full HTML5 support
● Canvas support - Firefox 3.0+, Safari 3.0+,
Chrome 3.0+, Opera 10.0+
● HTML5 Storage support – IE8+, Firefox 3.5+,
Safari 4.0+, Chrome 4.0+, Opera 10.5+
● Upcoming Internet Explorer 9 will be supporting
most HTML5 features
Page Layout and Mobile
Devices
• Columned designs do not suit mobile
devices.
• Screen width
• Even flexible designs have limits at low
resolutions.
• The handheld media type has limited
support.
• One solution is CSS3 Media Queries.
CSS3 Media Queries
<link href="style.css" rel="stylesheet" type="text/css"/>

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen


and (max-device-width: 480px)" />

• CSS 3 extends the concept of media queries.


• Provide different style sheets based on screen
resolution
• If the device’s screen resolution is less than
480px, the mobile.css style sheet will be used.
CSS3 Media Queries
#header, #nav_bar, #page_contents, #extra_links, #footer {
width:auto;float:none;
}

• Specify rules in the mobile.css style sheet.


• Remove the columns.

You might also like