Post on 04-Jun-2018
8/13/2019 Desain Web 03 HTML Css
1/58
HTML5 and CSS3Aryo Pinandito
8/13/2019 Desain Web 03 HTML Css
2/58
8/13/2019 Desain Web 03 HTML Css
3/58
HTML! Hypertext Markup Language! Bare Minimum of HTML Structure! "#$%&'()* +,-./
"+,-./
"+012/
",3,.0/$456-07, '3,.0"8,3,.0/
"8+012/
"942:/
";/ ?45@ ,+0 9?4A>0? A3,+ B'C
8/13/2019 Desain Web 03 HTML Css
4/58
More HTML! Document type:! HTML5"#$%&'()* +,-./
! XHTML"#$%&'()* +,-. )EF
8/13/2019 Desain Web 03 HTML Css
5/58
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/
8/13/2019 Desain Web 03 HTML Css
6/58
8/13/2019 Desain Web 03 HTML Css
7/58
Tag, Attribute, Value! Tag! Void element: "37;6,/ "+?/ "9?/! Non void element:"1/
8/13/2019 Desain Web 03 HTML Css
8/58
8/13/2019 Desain Web 03 HTML Css
9/58
New Tags in HTML5
Structure
! ">05,347/- to define sections of pages! "+0120?/- defines the header of a page! "X44,0?/- defines the footer of a page! "71[/- defines the navigation on a page! "1?,35.0/- defines the article or primary
content on a page
! "1>320/- defines extra content like a sidebaron a page
! "X3R6?0/- defines images that annotate anarticle
Inline Elements
! "-1?@/- to indicate contentthat is marked in somefashion
! ",3-0/ - to indicate contentthat is a time or date
! "-0,0?/ - to indicatecontent that is a fraction ofa known range - such as disk
usage! ";?4R?0>>/ - to indicate the
progress of a task towardscompletion
8/13/2019 Desain Web 03 HTML Css
10/58
New Tags in HTML5Dynamic Support
! "20,13.>/! provides details about an element. This would be like
tooltips in non-Web applications.
! "21,1R?32/! creates a table that is built from a database or other
dynamic source
! "-076/!
an old tag brought back and given new life allowing you tocreate a menu system on your Web pages
! "54--172/! defines actions that should happen when a dynamic
element is activated
8/13/2019 Desain Web 03 HTML Css
11/58
New Tags in HTML5Dynamic Support
!"517[1>/- an element to give you a drawingspace in JavaScript on your Web pages. It
can let you add images or graphs to tool tipsor just create dynamic graphs on your Webpages, built on the fly.
!"[3204/- add video to your Web pages withthis simple tag.
!"16234/- add sound to your Web pages withthis simple tag.
8/13/2019 Desain Web 03 HTML Css
12/58
8/13/2019 Desain Web 03 HTML Css
13/58
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/
8/13/2019 Desain Web 03 HTML Css
14/58
HTML5: Better Semantics
XHTML HTML5
8/13/2019 Desain Web 03 HTML Css
15/58
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\
8/13/2019 Desain Web 03 HTML Css
16/58
8/13/2019 Desain Web 03 HTML Css
17/58
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 wayelements are arranged and displayed on a page.
8/13/2019 Desain Web 03 HTML Css
18/58
The CSS Box Model! Every block element in CSS is effectively inside a
box, and can have margins, padding and bordersapplied 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 boxscontent region
! The root (or top-most) elements containing box iseffectively the browser window.
8/13/2019 Desain Web 03 HTML Css
19/58
8/13/2019 Desain Web 03 HTML Css
20/58
The CSS Box Model
20
Content
Padding
BorderMargin
8/13/2019 Desain Web 03 HTML Css
21/58
The CSS Box Model
21
Content
Padding
BorderMargin
With margin, border andpadding properties, each
of the 4 sides can bespecified independently
8/13/2019 Desain Web 03 HTML Css
22/58
Margins & Padding! Margins and Padding may seem similar at firstglance. But each has its own effect on content,
particularly on any backgrounds assigned to blockand div elements.
SM5312 week 9: CSS Layout
22
Content
Padding
Margin
8/13/2019 Desain Web 03 HTML Css
23/58
Margins & Padding!
Margins! Margins define the space around elements outside
the border
! Margin properties can have negative values in orderto deliberately overlap content
! Margin properties will affect the position ofbackground elements (graphics and/or colours) inrelation to the edges of the containing block element
! Margin properties can be defined independently ontop, right, bottom and left, or all-at-once using CSSshorthand
23
8/13/2019 Desain Web 03 HTML Css
24/58
Margins & Padding!
Padding! Padding defines the space around elements inside
the border; i.e between the border and the contentitself
! Padding properties cannot have negative values! Padding properties do not affect the position of
background elements (graphics and/or colours) inthe containing block element; only the position ofcontent.
! Padding properties can be defined independently ontop, right, bottom and left, or all-at-once using CSSshorthand
24
8/13/2019 Desain Web 03 HTML Css
25/58
Margins and Padding: MarginCollapse
!When 2 or more vertical margins meet, they willcollapse to form a single margin
! The height of this combined margin will be equal theheight 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 anotherblock element
25
8/13/2019 Desain Web 03 HTML Css
26/58
Margin Collapse: StackedElements
26
Content Area
Content Area
Margin-bottom: 30px
Margin-top: 20px
Before
Content Area
Content Area
Margin-bottom: 30px
After
Marginscollapse to
form a
singlemargin
8/13/2019 Desain Web 03 HTML Css
27/58
Margin Collapse: ContainedElements
27
Content Area
Margin-top: 30px
Before After
Marginscollapse to
form a single
marginMargin-top: 20pxContent Area
Margin-top: 30px
Containing (outer)block element
Inner block element
* Note: only applies if there are no bordersor padding separating the margins.
8/13/2019 Desain Web 03 HTML Css
28/58
CSS Shorthand: Margin &Padding
!For margin and padding (and others), CSS provides anumber of shorthand properties that can save onwriting lines and lines of code. Instead of writingthis:
! #container {margin-top: 0;margin-right: 5px;margin-bottom: 6px;margin-left: 5px;
padding-top: 20px;padding-right: 10px;padding-bottom: 30px;padding-left: 12px;
} 28
Content Area
6
5 512 10
30
12
0
8/13/2019 Desain Web 03 HTML Css
29/58
CSS Shorthand: Margin &Padding
!Its much easier to write this:
! #container {padding: 20px 10px 30px 12px;margin: 0px5px 6px 5px;
}
! The sequence order is alwaysclockwise, starting from the top
29
Content Area
6
5 512 10
30
20
0
8/13/2019 Desain Web 03 HTML Css
30/58
CSS Shorthand: Margin andPadding
! You can also apply just one value, example:! #container {
padding: 20px;margin: 5px;
}
! Which will apply the valuespecified equally on all 4 sides
30
Content Area
5
5 520 20
20
20
5
8/13/2019 Desain Web 03 HTML Css
31/58
CSS Shorthand: Margin andPadding
! And you can apply twovalues, example:
! #container {padding: 10px 20px;
margin: 0px 5px;}
! The first value is appliedto
the top and bottom! The second value is
applied tothe left and right
31
Content Area
0
5 520 20
10
10
0
8/13/2019 Desain Web 03 HTML Css
32/58
CSS Shorthand: Margin andPadding: auto
! A useful value toremember is auto:
! #container {padding: 10px 20px;margin: 0px auto;
}
! Usually applied to the left&right areas of the marginproperty, auto is useful forcentering a block
containerelement in the browserwindow
32
Content Area
0
auto auto20 20
10
10
0
8/13/2019 Desain Web 03 HTML Css
33/58
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 anymargin and padding is allocated for a border)
! Border properties can be defined independently ontop, right, bottom and left, or all-at-once using CSSshorthand
33
8/13/2019 Desain Web 03 HTML Css
34/58
8/13/2019 Desain Web 03 HTML Css
35/58
CSS Floats: Normal Flow!
CSS boxes for blockelements are stacked,one above the other, sothat theyre read fromtop to bottom.
! In CSS, this is said tobe the normal flow.
! (Note that CSS boxes for inlineelements are placed next toeach other, within boxes for
block elements, and willnormally wrap according tothe width of the containing
block.)
35
But
8/13/2019 Desain Web 03 HTML Css
36/58
Floats: Positioning CSS Boxes!
we can positionblock elementboxes side-by-sidein CSS using floats.
! Setting the floatproperty to leftorrightcauses a box tobe taken out of itsposition in the
normal flowandmoved as far left orright as possible.
36
text text text text text text text text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text
inline
inline
inlineblock
8/13/2019 Desain Web 03 HTML Css
37/58
Float Values!
The Float propertyhas three valueoptions:
! float: left;! float: right;! float: none;
37
text text text text text text text text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text
inline
inline
inlineblock
8/13/2019 Desain Web 03 HTML Css
38/58
Restoring the Normal Flow:Clear
! To restore the normalflow, we can use theclear property.
! The clear property hasthree value options:
! clear: left;! clear: right;! clear: both;! These specify which
side of the elements
box maynot
have afloat next to it.
38
text text text text text text text text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text texttext text text text text texttext text text
text text texttext text text text text texttext text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text texttext text texttext text text text text text
text text text text text texttext text
inline
inline
inlineblock
block
8/13/2019 Desain Web 03 HTML Css
39/58
CSS Positioning!
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 beapplied to CSS boxes:
! Relative Positioning Absolute Positioning
! Understanding the differences between the two isdifficult at first, but important!
39
CSS P i i i R l i
8/13/2019 Desain Web 03 HTML Css
40/58
CSS Positioning: RelativePositioning
!A relatively positioned element will stay exactly whereit is, in relation to the normal flow.
! You can then offset its position relative to itsstarting point in the normal flow:
40
Box 1 Box 2 Box 3
Containing box
CSS P iti i R l ti
8/13/2019 Desain Web 03 HTML Css
41/58
CSS Positioning: RelativePositioning
!In this example, box 2is offset 20px, top and left.The result is the box is offset 20px from its originalposition in the normal flow. Box 2 may overlap otherboxes in the flow, but other boxes still recognise itsoriginal position in the flow.
41
Left: 20px
top: 20px
Position: relativeBox 1
Box 2
Box 3
Containing box
#myBox {
position: relative;
left: 20px;
top: 20px;}
CSS P iti i Ab l t
8/13/2019 Desain Web 03 HTML Css
42/58
CSS Positioning: AbsolutePositioning
!An absolutely positioned box is taken out of thenormal flow, and positioned in relation to its nearestpositioned ancestor (i.e. its containing box).
! If there is no ancestor box, it will be positioned inrelation to the initial containing block, usually the
browser window.
42
Left: 20px
top: 20px
Position: absoluteBox 1
Box 2
Box 3
Containing box (relatively positioned ancestor)
CSS P iti i Ab l t
8/13/2019 Desain Web 03 HTML Css
43/58
CSS Positioning: AbsolutePositioning
!An absolutely positioned box can be offset from itsinitial position inside the containing block, but otherboxes within the block (and still within the normalflow) act as if the box wasnt there.
43
Left: 20px
top: 20px
Position: absoluteBox 1
Box 2
Box 3
Containing box (relatively positioned ancestor)
#myBox {
position: absolute;
left: 20px;
top: 20px;}
8/13/2019 Desain Web 03 HTML Css
44/58
8/13/2019 Desain Web 03 HTML Css
45/58
Floats & Positioning!
Summary:! Floats (also a form of positioning) takes boxes out of the
normal flow and floats them left or right edges of thecontaining block
! Relative Positioning is relative to the elements initialposition in the normal flow.
! Absolute Positioning is relative to the nearest positionedancestor, or (if one doesnt exist) the initial container block(usually the browser window)
! Fixed Positioning is fixed in one position relative to thebrowser window only does not scroll with content (Notsupported in IE5, IE6)
45
8/13/2019 Desain Web 03 HTML Css
46/58
Background Images in CSS!
It is also possible to use the background CSSproperty any block element (including divs) to placea 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
B k d I i CSS
8/13/2019 Desain Web 03 HTML Css
47/58
Background Images in CSS:Fixed Position
!Background images will normally scroll with thecontaining box, and the rest of the page
! But they can also be fixed, staying in the sameposition in the layout, while the rest of the contentscrolls.
! #sidebar {float: right;width: 300px;margin-left: 25px;
background-image: url(images/harbour.jpg);background-attachment: fixed;
}
47
8/13/2019 Desain Web 03 HTML Css
48/58
8/13/2019 Desain Web 03 HTML Css
49/58
Rounded Corner Boxes!
Rounded corner boxes are verypopular. Unfortunately, thecurrent version of CSS does nothave any properties that candefine a corner radius (CSS 3
will).! However, simple rounded corner
boxes are very easy to create inCSS 2 with a couple of
background images.
49
Fi d Width R d d C
8/13/2019 Desain Web 03 HTML Css
50/58
Fixed-Width Rounded CornerBoxes
!Simple flat-colour, fixed-widthrounded corner boxes requireonly 2 images:
! Fixed-width boxes with a shadowrequire 3 images, with thecentre one set to repeat:
! CSS code tutorial
50
boxtop.gif
boxbottom.gif
boxshaded_top.gif
boxshaded_bottom.gif
boxshaded_back.gif
Fle ible Width Ro nded Corner
8/13/2019 Desain Web 03 HTML Css
51/58
Flexible-Width Rounded CornerBoxes
!Flexible-width rounded cornerboxes are a little morecomplicated...
! You to break a large box into 4images, then use CSS to have
the right side pieces slide overthe larger (fixed-position) leftpieces.
! CSS code tutorial
51
boxshadedtopleft.gif
boxshadedbottomright.gif
boxshadedbottomleft.gif
boxshadedtopright.gif
Flexible Width Rounded Corner
8/13/2019 Desain Web 03 HTML Css
52/58
Flexible-Width Rounded CornerBoxes
52
H2 heading
The CSS, HTML
structure
.flexbox
.flexbox-outer
.flexbox-inner
.flexbox h2
Centering in the Browser
8/13/2019 Desain Web 03 HTML Css
53/58
Centering in the BrowserWindow
!Weve seen how to center a box horizontally in thewindow:
! Set the bodyto 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 thebrowser window?
53
Centering in the Browser
8/13/2019 Desain Web 03 HTML Css
54/58
Centering in the BrowserWindow
!Like this:! Set the bodyto 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 heightspecified, as well asa width, and it must be a measured unit (i.e. px, mm,com, etc.)
54
8/13/2019 Desain Web 03 HTML Css
55/58
Using divs to Define CSS boxes! Weve seen that CSS box model attributes can be
applied to any simple XHTML block element (p, h1,etc.)
! However, we often use specific elements withinthe XHTML, each identified with an ID or class name
! We then apply width, float, margin, padding andborder properties to those divsin CSS.
! This gives us more options to create and control arange of layout elements, on top of core content
elements.
55
8/13/2019 Desain Web 03 HTML Css
56/58
Using divs to Define CSS boxes! id example:in the
XHTML:
!
blah, blah, blah,
blah, blah, blah.
! In the CSS:! #sidebar {
float: right;width: 300px;margin-left: 25px;
}
! class example:in theXHTML:
!
blah, blah, blah,
blah.
! In the CSS:! .sidebar {
float: right;
width: 300px;margin-left: 25px;
}
56
8/13/2019 Desain Web 03 HTML Css
57/58
And Finally! CSS inspiration:! www.csszengarden.com
! CSS analysis tools:! Web Developers Toolbar
http://chrispederick.com/work/web-developer/
! Firebughttp://getfirebug.com/
! Wireframing Toolshttp://pencil.evolus.vn
57
8/13/2019 Desain Web 03 HTML Css
58/58
Questions?