Download - 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
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
HOW TO BE AHTML & CSS NINJA?
<WEB NINJA/>Alfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
• 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
HTML(HYPERTEXT MARKUP LANGUAGE)
<WEB NINJA/>Alfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
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
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
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
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.
[email protected]: fb.com/avikaco | twitter : @avikaco
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
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
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
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 "e; title”> Hello Ninja.</a>
HTMLAlfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
CSS(CASCADING STYLE SHEETS)
<WEB NINJA/>Alfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
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
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
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
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
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
Browser visible area
UNDERSTANDING CSS POSITION
CSSAlfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
(x = 0, y = 0)
UNDERSTANDING CSS POSITION
CSSAlfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
#container { width: 980px; margin: 40px auto; background: #FFF;}
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;}
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)
UNDERSTANDING CSS SPRITE
CSSAlfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
Normal
Hover
Active/clicked
Current
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
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
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..
CSSAlfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
DEMOUndestanding Column and Row
<WEB NINJA/>Alfi Rizka T.
[email protected]: fb.com/avikaco | twitter : @avikaco
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