web ninja html & css

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 T.alfi@dedicated-it.com

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

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.

alfi@dedicated-it.comFB: fb.com/avikaco | twitter : @avikaco

HOW TO BE AHTML & CSS NINJA?

• 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.

HTML(HYPERTEXT MARKUP LANGUAGE)

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.

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.

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.

Basic Structure HTML Tags

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

</body></html>

HTMLAlfi Rizka T.

Basic Structure HTML Tags

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

HTMLAlfi Rizka T.

text node

property

element

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.

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.

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.

CSS(CASCADING STYLE SHEETS)

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.

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.

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.

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.

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.

Browser visible area

UNDERSTANDING CSS POSITION

CSSAlfi Rizka T.

(x = 0, y = 0)

CSSAlfi Rizka T.

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

CSSAlfi Rizka T.

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

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

CSSAlfi Rizka T.

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

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

(x = 0, y = 0)

UNDERSTANDING CSS SPRITE

CSSAlfi Rizka T.

Normal

Active/clicked

Current

UNDERSTANDING CSS SPRITE

CSSAlfi Rizka T.

Normal

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

CSSAlfi Rizka T.

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

UNDERSTANDING GRID SYSTEM

CSSAlfi Rizka T.

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

CSSAlfi Rizka T.

DEMOUndestanding Column and Row

DESIGN PSYCHOLOGY

RESOURCES

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.

QUESTIONS?

THANKS

web ninja html & css

comavikaco twitter

html cssalfi rizka

avikaco toolsalfi rizka

avikaco html timeline1991

pxcssalfi rizka

html element

avikaco basic css codemargin

avikaco basic css codeh1

Technology

basic html/css

html&css 2 - intermediate html

learn html css

examples css html

html e css

html css basic

supercharged html & css

html css-xhtml

html / css – basics

html - css

html & css

html css -...

html css-presentation

html css cheatsheet

html si css

html and css - englishonlineclub.comenglishonlineclub.com...

_ html, xhtml & css

clase html + css

html, css, javascript

html,javascript & css