HTML5 and CSS3

Aryo Pinandito

HTML
!! Hypertext Markup Language !! Bare Minimum of HTML Structure! !! "#$%&'()*!+,-./!
"+,-./! !!"+012/! !!!",3,.0/$456-07,!'3,.0"8,3,.0/! !"8+012/! !"942:/! !!!";/<0,=>!?45@!,+0!9?4A>0?!A3,+!B'C<D"8;/! !"8942:/! "8+,-./!

More HTML
!! Document type:
!! HTML5
"#$%&'()*!+,-./! !

!! XHTML
"#$%&'()*!+,-.!)EF<G&!HI88JK&88$'$!LB'C<!MNO! '?17>3,3471.88*PH! H+,,;Q88AAANAKN4?R8'S8T+,-.M8$'$8T+,-.MI ,?17>3,3471.N2,2H/!

More HTML (2)

!! Language
!!"+,-.!.17RUV07W/! ! !! Character Encoding in HTML5 !!"+012/! !!!!NNN! !!!!"-0,1!5+1?>0,UV6,XIYW/! !!"+012/!
XHTML:

"-0,1!+,,;I0Z63[UH&47,07,I ':;0H547,07,UH,0T,8+,-.\!5+1?>0,UE']IYH/!
!

More HTML (3)

!! Stylesheet (CSS)
!!"+012/! !!!!NNN! !!!!".37@!+?0XUV>,:.0>N5>>W!?0.UV>,:.0>+00,W/! !!"+012/! ! !! Javascript !!"+012/! !!!!NNN! !!!!">5?3;,!>?5UV^>5?3;,N^>W/"8>5?3;,/! !!"+012/! !

Tag, Attribute, Value

!! Tag
!! Void element: "37;6,/!"+?/!"9?/! !! Non void element:
"1/<37@"81/!

!! Attribute and Value of Atrribute

!! "37;6,!71-0UV0-13.W![1.60UVA+4_A+0?0N54-W/! !! Atrribute: name, value !! Value: email, who@where.com

Standard HTML Tags

!! Heading !! Table
",19.0/`!",?/`!",+/`!",2/`! ",942:/`!",+012/! "+M/`!"+a/, ....

!! Form
"X4?-/!

!! Form Component
"37;6,/`!">0.05,/`! ",0T,1?01/!

!! Paragraph
";/!

!! Link/Anchor
"1/!

!! List
"4./`!"6./`!".3/!

!! Layer (Box)
"23[/!

!! Image
"3-R/!

!! Formatting
">,?47R/`!"0-/`!">69/!

!! Horizontal Line
"+?/!

!! Line Break
"9?/!

New Tags in HTML5

Structure
!! ">05,347/ - to define sections of !! "+0120?/ - defines the header of !! "X44,0?/ - defines the footer of
pages a page

Inline Elements
!! "-1?@/ - to indicate content
that is marked in some fashion that is a time or date

a page

!! "71[/ - defines the navigation on a page

!! ",3-0/!- to indicate content !! "-0,0?/!- to indicate

content that is a fraction of a known range - such as disk usage progress of a task towards completion

!! "1?,35.0/ - defines the article or primary

content on a page

!! "1>320/ - defines extra content like a sidebar

on a page

!! "X3R6?0/ - defines images that annotate an

article

!! ";?4R?0>>/!- to indicate the

New Tags in HTML5

Dynamic Support

!! "20,13.>/

!! provides details about an element. This would be like

tooltips in non-Web applications.

!! "21,1R?32/ !! "-076/

!! creates a table that is built from a database or other

dynamic source

!! an old tag brought back and given new life allowing you to
create a menu system on your Web pages

!! "54--172/

!! defines actions that should happen when a dynamic

element is activated

New Tags in HTML5

Dynamic Support

!! "517[1>/ - an element to give you a drawing

space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dynamic graphs on your Web pages, built on the fly. this simple tag. this simple tag.

!! "[3204/ - add video to your Web pages with !! "16234/ - add sound to your Web pages with

New Tags in HTML5

New Form Input Types

!! "#$%$&'%! !! "#$%$&'%()*+#)! !! "#$%! !! '*,$-! !! .%%/! !! 0&123%! !! 0&1+#4$&*,!

!! $&'%! !! ,2'5%3! !! 3#,1%! !! %'#&)! !! 23)!

Deprecated Tags in HTML5

"15?47:-/! "1;;.0,/! "91>0X47,/! "93R/! "507,0?/! "23?/! "X47,/! "X?1-0/! "X?1-0>0,/! "3>3720T/! "74X?1-0>/! "74>5?3;,/! ">/! ">,?3@0/! ",,/! "6/!

HTML5: Better Semantics

XHTML
<div id=header> <div class= article> <div class= article>

HTML5
<header>

<div id=nav >

<div id= sidebar >

<article> <nav> <article> <aside>

<div id=footer>

<footer>

New Custom Attributes

!! "23[!32UV,35@0?W!21,1I56>,4-UV56>,4-I[1.60W/! !! "23[!32UV?0503;,W!21,1I4?20?74UVMaOW/! !! Custom attribute (data-customAttrName)
!! 21,1I>:-94.`!21,1I4?20?74! !! Value of custom attribute !! 56>,4-I[1.60`!MaO! !! Getting value of an attribute (Javascript) !! 0.0-07,P1-0NR0,b,,?396,0c1,,?P1-0d\!

The Basis of CSS Layout

!! The 3 core concepts to understand about CSS
layout are: !! The CSS box model !! Floating !! Positioning !! Together, these 3 concepts control the way elements are arranged and displayed on a page.

The CSS Box Model

!! Every block element in CSS is effectively inside a
box, and can have margins, padding and borders applied to it. !! Box widths can be specified in absolute values (e.g. px) or in relative values, usually: !! em - width values relative to the size of the font in

ems !! percentage - width values relative the containing boxs content region

!! The root (or top-most) elements containing box is

effectively the browser window.

The CSS Box Model

!! Every CSS box is divided into regions, consisting of:
1.!Content 2.!Padding 3.!Border 4.!Margins

The CSS Box Model

Margin Border Padding

Content

20

The CSS Box Model

Margin Border

Padding Content
With margin, border and padding properties, each of the 4 sides can be specified independently

21

!! Margins and Padding may seem similar at first

Margins & Padding

glance. But each has its own effect on content, particularly on any backgrounds assigned to block and div elements.
Margin Padding

Content
SM5312 week 9: CSS Layout

22

!! Margins !! Margins define the space around elements outside

Margins & Padding

the border !! Margin properties can have negative values in order to deliberately overlap content !! Margin properties will affect the position of background elements (graphics and/or colours) in relation to the edges of the containing block element !! Margin properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

23

!! Padding !! Padding defines the space around elements inside

Margins & Padding

the border; i.e between the border and the content itself !! Padding properties cannot have negative values !! Padding properties do not affect the position of background elements (graphics and/or colours) in the containing block element; only the position of content. !! Padding properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

24

!! When 2 or more vertical margins meet, they will

Margins and Padding: Margin Collapse

collapse to form a single margin !! The height of this combined margin will be equal the height of the larger of the 2 margins !! Margin collapse applies when: !! 2 or more block elements are stacked one above the
other, !! or when one block element is contained within another block element

25

Margin Collapse: Stacked Elements

Before After
Content Area Content Area

Margin-bottom: 30px Margin-top: 20px

Margins collapse to form a single margin

Margin-bottom: 30px

Content Area Content Area

26

Margin Collapse: Contained Elements

Before Margin-top: 30px Margin-top: 20px Content Area Margins collapse to form a single margin After Margin-top: 30px Content Area

Inner block element Containing (outer) block element

* Note: only applies if there are no borders or padding separating the margins.

27

!! For margin and padding (and others), CSS provides a

number of shorthand properties that can save on writing lines and lines of code. Instead of writing this: 0 !! #container { 12 margin-top: 0; margin-right: 5px; Content Area margin-bottom: 6px; 5 margin-left: 5px; 12 padding-top: 20px; padding-right: 10px; 30 padding-bottom: 30px; 6 padding-left: 12px; }

CSS Shorthand: Margin & Padding

10

28

!! Its much easier to write this: !! #container {

CSS Shorthand: Margin & Padding

padding: 20px 10px 30px 12px; margin: 0px 5px 6px 5px;

} !! The sequence order is always clockwise, starting from the top

5

0 20

Content Area 12 10 5

30 6

29

CSS Shorthand: Margin and Padding

!! You can also apply just one value, example: !! #container {
} !! Which will apply the value specified equally on all 4 sides
5 20

padding: 20px; margin: 5px;

5 20

Content Area 20

20 5

30

CSS Shorthand: Margin and Padding

!! And you can apply two
values, example: !! #container { padding: 10px 20px; margin: 0px 5px; } !! The first value is applied to the top and bottom !! The second value is applied to the left and right
0 10

Content Area 20 20

10 0

31

!! A useful value to

CSS Shorthand: Margin and Padding: auto

0 10

remember is auto: !! #container { padding: 10px 20px; margin: 0px auto; } !! Usually applied to the left & right areas of the margin property, auto is useful for centering a block container element in the browser window

auto

Content Area 20 20

auto

10 0

32

Borders
!! Borders can be applied to any block element !! Borders always come outside the padding area, but
inside the margin area. !! Border properties cannot have negative values !! If a border is not specified, the default is no-border (i.e. no border appears and no space between any margin and padding is allocated for a border) !! Border properties can be defined independently on top, right, bottom and left, or all-at-once using CSS shorthand

33

Borders
!! The core border properties are:
!! Width: absolute (px, in, cm, or thin, medium,
thick), or relative (ems) !! Style: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, etc !! Color: blue, red, #FF9900, etc

!! You can also create the effect of a border by using

a graphic image in a CSS background property, instead of the border property

34

!! CSS boxes for block

CSS Floats: Normal Flow

elements are stacked, one above the other, so that theyre read from top to bottom. !! In CSS, this is said to be the normal flow.
!! (Note that CSS boxes for inline
elements are placed next to each other, within boxes for block elements, and will normally wrap according to the width of the containing block.)

But

35

!! we can position

Floats: Positioning CSS Boxes

text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

block element boxes side-by-side in CSS using floats. !! Setting the float property to left or right causes a box to be taken out of its position in the normal ow and moved as far left or right as possible."

block

36

!! The Float property

has three value options: !" ! oat: left;" !" ! oat: right;" !" ! oat: none;"

Float Values
text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

block

37

!! To restore the normal !! !!" !!" !!" !!

flow, we can use the clear property. The clear property has three value options:" clear: left;" clear: right;" clear: both;" These specify which side of the elements box may not have a oat next to it."

Restoring the Normal Flow: Clear

text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text inline text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

block

block

38

!! The third core concept to understand in CSS layout

(after the box model and floats), is positioning. !! There are two types of positioning that can be applied to CSS boxes: !! Relative Positioning Absolute Positioning !! Understanding the differences between the two is difficult at first, but important!

CSS Positioning

39

!! A relatively positioned element will stay exactly where

it is, in relation to the normal flow. !! You can then offset its position relative to its starting point in the normal flow:

CSS Positioning: Relative Positioning

Box 1

Box 2

Box 3

Containing box

40

!! In this example, box 2 is offset 20px, top and left.

CSS Positioning: Relative Positioning

The result is the box is offset 20px from its original position in the normal flow. Box 2 may overlap other boxes in the flow, but other boxes still recognise its original position in the flow.
top: 20px Left: 20px

#myBox { position: relative; left: 20px; top: 20px; }

Box 1

Position: relative Box 2

Box 3

Containing box

41

!! An absolutely positioned box is taken out of the

CSS Positioning: Absolute Positioning

normal flow, and positioned in relation to its nearest positioned ancestor (i.e. its containing box). !! If there is no ancestor box, it will be positioned in relation to the initial containing block, usually the browser window.
top: 20px

Left: 20px

Box 1

Position: absolute Box 2

Box 3

Containing box (relatively positioned ancestor)

42

!! An absolutely positioned box can be offset from its

CSS Positioning: Absolute Positioning

initial position inside the containing block, but other boxes within the block (and still within the normal flow) act as if the box wasnt there.
top: 20px

#myBox { position: absolute; left: 20px; top: 20px; }

Left: 20px

Box 1

Position: absolute Box 2

Box 3

Containing box (relatively positioned ancestor)

43

!! Fixed Positioning is a sub-category of Absolute

CSS Positioning: Fixed Positioning

Positioning !! Allows the creation of floating elements that are always fixed in the same position in the browser window, while the rest of the content scrolls as normal !! (rather like the effect of fixed background attachments) !! PROBLEM: fixed positioning is not supported in IE5 and IE6(!), but can be made to work with javascript for those browsers

44

!! Summary:

Floats & Positioning

!! Floats (also a form of positioning) takes boxes out of the

normal flow and floats them left or right edges of the containing block !! Relative Positioning is relative to the elements initial position in the normal flow. !! Absolute Positioning is relative to the nearest positioned ancestor, or (if one doesnt exist) the initial container block (usually the browser window) !! Fixed Positioning is fixed in one position relative to the browser window only does not scroll with content (Not supported in IE5, IE6)

45

!! It is also possible to use the background CSS

Background Images in CSS

property any block element (including divs) to place a background image behind other elements. !! Background images can be !! small images that repeat horizontally or vertically to
fill a flexible background space, or !! one single image that fills a space of fixed size.

46

!! Background images will normally scroll with the

Background Images in CSS: Fixed Position

containing box, and the rest of the page !! But they can also be fixed, staying in the same position in the layout, while the rest of the content scrolls. !! #sidebar { float: right; width: 300px; margin-left: 25px; background-image: url(images/harbour.jpg); background-attachment: fixed; }

47

!! Background images are useful in allowing us to

Using Background Images

visually define a page, and separate content into a deliberate visual hierarchy. !! The ability to to repeat images in a background box, and reuse the SAME images across a number of boxes, means we can make very efficient use of images. !! Wherever possible, background images should be used in conjunction with background colours.

48

!! Rounded corner boxes are very

Rounded Corner Boxes

popular. Unfortunately, the current version of CSS does not have any properties that can define a corner radius (CSS 3 will). !! However, simple rounded corner boxes are very easy to create in CSS 2 with a couple of background images.

49

!! Simple flat-colour, fixed-width

rounded corner boxes require only 2 images:

Fixed-Width Rounded Corner Boxes

boxtop.gif

!! Fixed-width boxes with a shadow

require 3 images, with the centre one set to repeat:
boxbottom.gif

!! CSS code tutorial

boxshaded_top.gif boxshaded_back.gif boxshaded_bottom.g if

50

!! Flexible-width rounded corner

Flexible-Width Rounded Corner Boxes

boxshadedtopleft.gif boxshadedtopright.gif

boxes are a little more complicated... !! You to break a large box into 4 images, then use CSS to have the right side pieces slide over the larger (fixed-position) left pieces. !! CSS code tutorial

boxshadedbottomleft.gif boxshadedbottomright.gif

51

The CSS, HTML structure

Flexible-Width Rounded Corner Boxes

H2 heading

.flexbox .flexbox-outer .flexbox-inner .flexbox h2

52

!! Weve seen how to center a box horizontally in the

Centering in the Browser Window

window: !! Set the body to center !! Create a container div (fixed or relative width), with left
and right margins set to auto

!! So how do we float a CSS box vertically in the

browser window?

53

!! Like this:

Centering in the Browser Window

!! Set the body to center !! Create a container div (fixed or relative width), with..
!! Position: absolute; !! top: 50%; !! left: 50%; !! margin-top: -300px; !! margin-left: -400px;

!! Note, the box must have a height specified, as well as

a width, and it must be a measured unit (i.e. px, mm, com, etc.)

54

!! Weve seen that CSS box model attributes can be

Using divs to Define CSS boxes

applied to any simple XHTML block element (p, h1, etc.) !! However, we often use specific <div> elements within the XHTML, each identified with an ID or class name !! We then apply width, float, margin, padding and border properties to those divs in CSS. !! This gives us more options to create and control a range of layout elements, on top of core content elements.

55

Using divs to Define CSS boxes

!! id example: in the
XHTML:
!! class example: in the
XHTML:

!! <div id=sidebar>

!! <div class=sidebar>

<p> blah, blah, blah, blah, blah, blah. </p> </div> #sidebar { float: right; width: 300px; margin-left: 25px; }

<p> blah, blah, blah, blah.</p> </div>

!! In the CSS: !!

!! In the CSS: !!
.sidebar { float: right; width: 300px; margin-left: 25px; }

56

And Finally
!! CSS inspiration:
!! www.csszengarden.com

!! CSS analysis tools:

!! Web Developers Toolbar
http://chrispederick.com/work/web-developer/ !! Firebug http://getfirebug.com/

!! Wireframing Tools
http://pencil.evolus.vn

57

Questions?