HTML5 and CSS - e
Download
Report
Transcript HTML5 and CSS - e
HTML 5 AND
CSS
Dr Mohd Soperi Mohd Zahid
Semester 2 2015/16
Origins of Markup Languages
• First HTML (a simplified application of the Standard
Generalized Markup Language – SGML) created by Tim
Berners-Lee in 1989 at Physics Particle Lab, Cern
Origins of Markup
Languages
HTML4
SGML
HTML5
XML
XHTML
History of HTML
Two Allowed Syntaxes in HTML5
• Stricter HTML5 should used in a professional web
development environment
New HTML5 elements
New HTML5 elements
New elements to structure page
Adding presentation information
What is CSS
• Cascading Style Sheets (CSS) is a style language that
can be used to display web pages for different devices
(smartphone, tablet, or computer screen), lay out page
designs, and control typography, color, and many other
presentation characteristics
• CSS separates presentation properties from content of
web page
• CSS contains style rules which express the style
characteristics for some HTML elements
• Style rules can be embedded in HTML document or
placed in an external style sheet and then linked to web
pages
A simple CSS example
CSS Syntax
• A style rule has two parts: a selector and a declaration
• The selector determines the element to which the rule is
•
•
•
•
•
applied
The declaration consists of property:value pair that tells
the browser how to display the element
Example: p {color: blue;}
The selector is the <p> element
The declaration is color: blue, which is a rule to be applied
when the paragraph is displayed
The property and value of the declaration are color and
blue respectively
What’s new in HTML5
• All display information should be specified with CSS, not
in attribute of elements – so fewer attributes needed (e.g.
size, color, alignment of text should not be specified in
attribute of the element anymore)
• Some elements have been removed such as <font>,
<frames>, <frameset>
• New elements to describe structure or layout of page is
created. No need to use <div> element to structure a
page
• A standard way to embed audio or video stream into a
web page using <audio> and <video> elements – without
using third-part software (QuickTime or Flash)
Validating your code
• HTML or XHTML code should be validated to make sure it
conforms to W3C standard
• To validate your code, use built-in validators available in
some HTML editors, or use a web-based validator such
as the W3C validation service at http://validator.w3.org
CSS
• There are three ways to combine CSS rules with HTML
code: 1) Inline style, 2) Internal style sheet, and 3)
External style sheet
CSS
• External style sheet can be applied across multiple pages
within the web site. To link an external stylesheet add in
<head> element, <link href=“styles.css” rel=“stylesheet”>
• Internal style sheet affects only the document in which it is
contained. Add the <style> element. In older HTML, it
needs the type attribute: <style type=“text/css”>, but not
anymore in HTML5
• Inline style affects only a specific element. It overrides a
style that was set at a higher level
• Comments are allowed in <style> element which begin
with /* and end with */
Activity 2
•
•
•
Use internal style sheet to
convert the web page as
shown
CSS property inheritance
• By default, most CSS properties
of child elements inherit from
parent elements – inheritance.
• If a rule is specified for <ul>
element in HTML code shown,
<li> element inherits the style
rule unless another rule is
specified for <li>
<style>
h1 {color: red;}
p {color: red;}
ul {color: red;}
em {color: red;}
li <color: red;}
</style>
<style>
body {color: red;}
</style>
simpler
Basic CSS Selection techniques
• Type selectors
body {color: gray;}
h2 {color: red;}
p {font-size: 85%;}
• Grouping selector
h1 {color:red;}
h2 {color:red;}
• Combining declarations
p {color: blue;}
p {font-size: 125%;}
• Descendant selectors
ul li em {color:blue;}
h1, h2 {color:red;}
p {
color: blue;
font-size: 125%;
}
p em {color:blue;}
Activity 3
• Add Internal CSS style rules to HTML code of web page
shown on the left to get the web page shown on the right
More CSS Selection Techniques
• The class selector – uses style rule with dot (.) followed
by a name of class attribute in the selector
• The id selector – uses a pound sign (#) followed by a
name of id attribute in the selector
• The <div> and <span> elements – uses div or span
combined with # and id or dot and class name in the
selector
Note: <div> is block-level element, <span> is in-line level element
• The pseudo-class and pseudo-element selectors
Activity 4 (Basic CSS Selection)
• Download Activity4-nonCSS.html from elearning.
• Modify the code using CSS to display the following page:
Activity 5 (using div and span)
• Download Activity5-nonCSS.html from elearning.
• Modify the code using CSS to display the following page:
Pseudo-Class and Pseudo-Element
• Pseudo-class – for selecting elements based on
characteristics other than their element name (e.g.
change the color of a new or visited hypertext link)
• Pseudo-element – for changing other aspects of a
document that are not classified by elements (e.g. apply
style rules to the first letter or first line of a paragraph)
Activity 6
• Download Activity6-nonCSS.html from elearning.
• Modify the code using CSS to display the following page:
CSS Measurement Units
p and blockquote with text-indent
vertical-align, text-align
Activity 7
• Download Activity6-nonCSS.html from elearning.
• Modify the code using CSS to display the following page:
text-decoration and text-shadow
horizontal, vertical offset,
blur amount, color of shadow
a {text-decoration: none}
CSS Box types
• Elements in HTML fall into two primary box types: Block
or Inline
• Block-level boxes – appear as blocks such as paragraphs
which can contain other block elements or inline boxes
with element content
• Inline-level boxes – contain the content within the blocklevel elements
CSS Visual Formatting Model
Display type of box
• By default, elements are displayed either as block-level or
inline elements
CSS Box Model
• Each block-level element is displayed as a box with
content. Each content box can have margins, borders,
and padding
Using CSS Box model
Using CSS Box model
Syntax of margin property
Padding property
border-style property values
• None
• Dotted
• Dashed
• Solid
• Double
• Groove
• Ridge
• Inset
• outset
border-radius property
• The style rule for header:
• All boxes use:
Properties for page layout box
• width, min-width, max-width
• height, min-height, max-height
• float
• clear
• overflow
div {width: 200px;}
Using float property
Using overflow property
• Use overflow property to handle situations when content
overflows its content box
Normal flow of elements
• Boxes are laid out vertically one after the other, beginning
at the top of the containing block. Each box horizontally
fills the browser window.
• Elements do not appear
next to each other unless
they are floated or have
a display type of inline
Web page with multiple elements
With HTML5, the
<div> element
can now oftenly
be avoided in
creating a page
layout because
new elements
such as <article>
and <section> are
available
<article> and <section> elements
• Both can be used to contain content, can be
interchangeably nested within each other (articles can
contain sections and vice versa)
• <section> represents a thematically grouped section of a
document, and should contain a heading element to
describe its content (e.g. a chapter of a book)
• <article> also contains a themed group of content, but it is
different from <section>. Examples are forum post, a
magazine or newspaper article, a blog entry, a usersubmitted comment, or any other independent item of
content
Using <article> and <section>
A page layout
Page Layout Example
Using clear property
Floating elements within a float
Creating a flexible layout
nav {
width: 15%; height: 500px; float: left;
border: solid thin black; background-color: #fabf8f;}