HTML 5 AND CSS Dr Mohd Soperi Mohd Zahid Semester /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 SGML HTML4 XML XHTML Origins of Markup Languages HTML5

History of HTML

Two Allowed Syntaxes in HTML5 Stricter HTML5 should used in a professional web development environment

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 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,, New elements to describe structure or layout of page is created. No need to use element to structure a page A standard way to embed audio or video stream into a web page using and 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

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 element, Internal style sheet affects only the document in which it is contained. Add the element. In older HTML, it needs the type attribute:, 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 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 element in HTML code shown, element inherits the style rule unless another rule is specified for h1 {color: red;} p {color: red;} ul {color: red;} em {color: red;} li <color: red;} body {color: red;} simpler

Basic CSS Selection techniques Type selectors Grouping selector Combining declarations Descendant selectors p { color: blue; font-size: 125%; } h1 {color:red;} h2 {color:red;} h1, h2 {color:red;} body {color: gray;} h2 {color: red;} p {font-size: 85%;} p em {color:blue;} ul li em {color:blue;} p {color: blue;} p {font-size: 125%;}

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 and elements – uses div or span combined with # and id or dot and class name in the selector The pseudo-class and pseudo-element selectors Note: is block-level element, is in-line level element

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 block- level 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

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 element can now oftenly be avoided in creating a page layout because new elements such as and are available

and elements Both can be used to contain content, can be interchangeably nested within each other (articles can contain sections and vice versa) 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) also contains a themed group of content, but it is different from. Examples are forum post, a magazine or newspaper article, a blog entry, a user- submitted comment, or any other independent item of content

Using and

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;}