Desain Web 03 HTML Css

8/13/2019 Desain Web 03 HTML Css

1/58

HTML5 and CSS3Aryo Pinandito


2/58


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


4/58

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

! XHTML"#$%&'()* +,-. )EF


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/


6/58


7/58

Tag, Attribute, Value! Tag! Void element: "37;6,/ "+?/ "9?/! Non void element:"1/


8/58


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


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


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.


12/58


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/


14/58

HTML5: Better Semantics

XHTML HTML5


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\


16/58


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.


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.


19/58


20/58

The CSS Box Model

20

Content

Padding

BorderMargin


21/58

The CSS Box Model

21

Content

Padding

BorderMargin

With margin, border andpadding properties, each

of the 4 sides can bespecified independently


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


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


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


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


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


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.


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


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


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


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


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


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


34/58


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


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 text text text texttext text texttext text texttext text text text text text

text text text text text texttext text

inline

inline

inlineblock


37/58

Float Values!

The Float propertyhas three valueoptions:

! float: left;! float: right;! float: none;

37








inline

inline

inlineblock


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








inline

inline

inlineblock

block


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


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


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


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


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


44/58


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


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


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


48/58


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


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


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


52/58

Flexible-Width Rounded CornerBoxes

52

H2 heading

The CSS, HTML

structure

.flexbox

.flexbox-outer

.flexbox-inner

.flexbox h2

Centering in the Browser


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


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


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


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


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


58/58

Questions?

Desain Web 03 HTML Css

Documents

Transcript of Desain Web 03 HTML Css