Transcript
Page 1: Web ninja   html & css

<WEB NINJA/>

B a s i c P r o g r a m m i n g P a r t 1 :

HTML & CSS

Alfi Rizka [email protected]

FB: fb.com/avikaco | twitter : @avikaco

Page 2: Web ninja   html & css

TODAY AGENDA• How to be a HTML & CSS Ninja?• Tools• Understanding HTML• Understanding CSS• DEMO• Design Psychology• Resources• QA?• TRY your self: create your own website.

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 3: Web ninja   html & css

HOW TO BE AHTML & CSS NINJA?

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 4: Web ninja   html & css

TOOLS

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 5: Web ninja   html & css

• IDE (Dreamweaver / Zend Studio / Notepad++ / etc)

• Web Browser + Firebug / Developer Toolbar

• Zen Coding (code.google.com/p/zen-coding/)

• LESS CSS (lesscss.org)

• SimpLESS (wearekiss.com/simpless)

• SpritePad (pritepad.wearekiss.com)

TOOLSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 6: Web ninja   html & css

HTML(HYPERTEXT MARKUP LANGUAGE)

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 7: Web ninja   html & css

HTML TIMELINE1991 : HTML1994 : HTML 21996 : CSS 1 + Javascript1997 : HTML 41998 : CSS 22000 : XHTML2002 : Tableless web design era2005 : Asynchronous JavaScript and XML (AJAX)2009 : HTML 5

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 8: Web ninja   html & css

What is Doctype?Doctype is a pre-defined string that is used to tell a client’s web browser what type of code will be contained in the file.

4 doctype most frequently used• HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• XHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• HTML 5<!DOCTYPE HTML>

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 9: Web ninja   html & css

What New in HTML 5• CSS3 and many new & extended Javascript API.• More than 50 new tags & attribute (@see

http://www.w3.org/TR/html5-diff/).• Scalable Vector Graphic (SVG) & Canvas support• Web GL• GeoLocation• New form input type (date, time, number, range, email, etc) and

native input validation• Drag and Drop• Video and Audio• Query Selector• Local Storage• App Cache• Much more……

When HTML 5 will be final release?click here

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 10: Web ninja   html & css

Basic Structure HTML Tags

<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>HTML &amp; CSS Ninja</title></head><body>

</body></html>

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 11: Web ninja   html & css

Basic Structure HTML Tags

<a href="#ninja-div"> Goto Ninja </a>

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

text node

property

element

Page 12: Web ninja   html & css

Understanding href Attribute• Beginning with protocol (eg: http / ftp / mailto / etc)• Beginning with sharp # (eg: #bottom)• File name (eg: index.php)• Beginning with single slash (eg: /main)• Beginning with double slash (eg:

//api.google.com/maps)

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 13: Web ninja   html & css

HTML COMMON MISTAKE

WRONG<span> <div>Hello Ninja.</div></span><p> Hello <p>Ninja.</p></p>

CORRECT<div> <span>Hello Ninja.</span></div><p>Hello</p><p>Ninja.</p>

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 14: Web ninja   html & css

HTML COMMON MISTAKE

WRONG<a href=“index.html?get=ini&itu” title=“link “ title”> Hello Ninja.</a>

CORRECT<a href=“index.html?get=ini%26itu” title=“link &quote; title”> Hello Ninja.</a>

HTMLAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 15: Web ninja   html & css

CSS(CASCADING STYLE SHEETS)

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 16: Web ninja   html & css

ALL YOU HAVE TO KNOW ABOUT CSS

1. All browser have different standard for each html element, that why you need reset.css

2. Urutan embed file CSS berpengaruh3. No space on name of CSS rule (use underscrore or dash),

eg: #main-menu, #logo_wrapper4. Whitespace has no effect in CSS file parsing5. Default CSS position: absolute will be relative to <BODY>6. All document (import css, bg image, font-face, etc) that loaded

from CSS file is relative path to css file. 7. You can set specific media target by adding attribute

media=“all/screen/print/projector”8. CSS3 support animation, gradient, multiple background, and

much more.

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 17: Web ninja   html & css

BASIC CSS CODEh1 { margin: 0 0 0 1em; /* 1em = 16px = 12 pt = 100% */ font-size: 1.5; /* default = em */ letter-spacing : +2pt;}#site-logo { width: 200px; height: 80px;}.important { color: red;/* #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1)*/}.border-radius { border-radius: 4px; /* W3C */ -webkit-border-radius: 4px; /* Webkit = Chrome / Safari */ -moz-border-radius: 4px; /* Firefox */}

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 18: Web ninja   html & css

BASIC CSS CODE

margin: 10px;

/* equal with */

margin: 10px 10px 10px 10px;/* top right bottom left */

/* equal with */

margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 19: Web ninja   html & css

BASIC CSS CODE

background: url(bg.png) #f90 repeat-x 0 10px;

/* equal with */

background-color: #f90;background-image: url(bg.png);background-repeat: repeat-x;background-position: 0 10px;

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 20: Web ninja   html & css

HOW TO LOAD CSS TO HTML FILE

1. Use inline HTML tag (very-very not recomended)<div style=“font: ‘arial black’ 40pt/60pt;color:red”>Hello World</div>

2. Using @import (not recomended)<style type='text/css' media='all'> @import url('style.css');</style>

3. Embed to HTML file (not recomended)<style type='text/css' media='all'> #logo{text-indent:-5000px}</style>

4. Use link tag<link rel=“stylesheet” type=“text/css” media=“all” href=“style.css” />

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 21: Web ninja   html & css

Browser visible area

UNDERSTANDING CSS POSITION

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

(x = 0, y = 0)

Page 22: Web ninja   html & css

UNDERSTANDING CSS POSITION

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

#container { width: 980px; margin: 40px auto; background: #FFF;}

Page 23: Web ninja   html & css

UNDERSTANDING CSS POSITION

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

#container { width: 980px; margin: 40px auto; background: #FFF;}

#sticky { width: 200px; position: absolute; top: 100px; right: -60px;}

Page 24: Web ninja   html & css

UNDERSTANDING CSS POSITION

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

#container { position: relative; width: 980px; margin: 40px auto; background: #FFF;}

#sticky { width: 200px; position: absolute; top: 100px; right: -60px;}

(x = 0, y = 0)

Page 25: Web ninja   html & css

UNDERSTANDING CSS SPRITE

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Normal

Hover

Active/clicked

Current

Page 26: Web ninja   html & css

UNDERSTANDING CSS SPRITE

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Normal

Hover

Active/clicked

Current

<ul id="main"> <li> <a href="#" id="home">Home</a> </li> <li> <a href="#" id="store">Store</a> </li> <li> <a href="#" id="mac">MAC</a> </li> <li> <a href="#" id="ipod">iPod</a> </li> /* ... More ... */</ul>

HTML#main{margin:0;padding:0;list-style:inside none;height:40px}#main li{display:block;float:left;margin:0}#main li a {display:block;width:120px;height:40px;Background:url(apple.png) top left;Text-indent:-5000px;}#main li a:hover {}#main li a:active, #main li a:focus {}#main li a.current{}

CSS

Page 27: Web ninja   html & css

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

All you have to know about CSS sprite• Tidak boleh ada gambar yang saling timpa• Ukuran sprite item kalo bisa sama untuk semua item, agar

mempermudah perhitungan background position• Element yang bisa menggunakan sprite hanya yang

display: block / inline-block

• BIASANYA (bukan berarti tidak bisa) sprite image tidak bisa digunakan untuk repeat bg

Page 28: Web ninja   html & css

UNDERSTANDING GRID SYSTEM

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

• 960 Grid System (960.gs)• Blueprint CSS (blueprintcss.org)• Twitter Bootstrap (twitter.github.com/bootstrap)• Yahoo User Interface (developer.yahoo.com/yui)• Etc..

Page 29: Web ninja   html & css

CSSAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

DEMOUndestanding Column and Row

Page 30: Web ninja   html & css

DESIGN PSYCHOLOGY

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 31: Web ninja   html & css

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 32: Web ninja   html & css

RESOURCES

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 33: Web ninja   html & css

HTML & CSS RESOURCES• W3 (www.w3.org)• validator.w3.org• HTML5 Rock (www.html5rocks.com )• beta.html5test.com• html5readiness.com• caniuse.com• quirksmode.org• html5doctor.com• ishtml5readyyet.com

RESOURCESAlfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 34: Web ninja   html & css

QUESTIONS?

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco

Page 35: Web ninja   html & css

THANKS

<WEB NINJA/>Alfi Rizka T.

[email protected]: fb.com/avikaco | twitter : @avikaco


Top Related