Web ninja html & css

Basic Programming Part 1:

HTML & CSS

<WEB NINJA/>
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.

HOW TO BE A
HTML & CSS NINJA?

<WEB NINJA/>
Alfi Rizka T.

TOOLS

<WEB NINJA/>
Alfi Rizka T.

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

TOOLS
Alfi Rizka T.

HTML
(HYPERTEXT MARKUP LANGUAGE)

<WEB NINJA/>
Alfi Rizka T.

HTML TIMELINE
1991 : HTML
1994 : HTML 2
1996 : CSS 1 + Javascript
1997 : HTML 4
1998 : CSS 2
2000 : XHTML
2002 : Tableless web design era
2005 : Asynchronous JavaScript and XML (AJAX)
2009 : HTML 5

HTML
Alfi 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>

HTML
Alfi 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

HTML
Alfi 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>

HTML
Alfi Rizka T.

Basic Structure HTML Tags

text node

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

element

HTML
Alfi Rizka T.

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)

HTML
Alfi 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>

HTML
Alfi 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>

HTML
Alfi Rizka T.

CSS
(CASCADING STYLE SHEETS)

<WEB NINJA/>
Alfi Rizka T.

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 berpengaruh
3. No space on name of CSS rule (use underscrore or dash),
eg: #main-menu, #logo_wrapper
4. Whitespace has no effect in CSS file parsing
5. 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.

CSS
Alfi Rizka T.

BASIC CSS CODE
h1 {
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 */
}

CSS
Alfi 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;

CSS
Alfi 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;

CSS
Alfi 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” />

CSS
Alfi Rizka T.

UNDERSTANDING CSS POSITION

(x = 0, y = 0)

Browser visible area

CSS
Alfi Rizka T.


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

CSS
Alfi Rizka T.


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

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

CSS
Alfi Rizka T.


(x = 0, y = 0) #sticky {
width: 200px;
position: absolute;
top: 100px;
right: -60px;
}

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

CSS
Alfi Rizka T.

UNDERSTANDING CSS SPRITE

Normal
Hover
Active/clicked
Current

CSS
Alfi Rizka T.

UNDERSTANDING CSS SPRITE
Normal
Hover
Active/clicked
Current

HTML CSS
<ul id="main"> #main{
<li> margin:0;padding:0;list-style:inside
<a href="#" id="home">Home</a> none;height:40px}
</li> #main li{
<li> display:block;float:left;margin:0}
<a href="#" id="store">Store</a> #main li a {
</li> display:block;width:120px;height:40px;
<li> Background:url(apple.png) top left;
<a href="#" id="mac">MAC</a> Text-indent:-5000px;
</li> }
<li> #main li a:hover {}
<a href="#" id="ipod">iPod</a> #main li a:active,
</li> #main li a:focus {}
/* ... More ... */ #main li a.current{}
</ul>

CSS
Alfi 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

CSS
Alfi Rizka T.

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

CSS
Alfi Rizka T.

DEMO
Undestanding Column and Row

CSS
Alfi Rizka T.

DESIGN
PSYCHOLOGY

<WEB NINJA/>
Alfi Rizka T.

<WEB NINJA/>
Alfi Rizka T.

RESOURCES

<WEB NINJA/>
Alfi Rizka T.

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

RESOURCES
Alfi Rizka T.

QUESTIONS?

<WEB NINJA/>
Alfi Rizka T.

THANKS

<WEB NINJA/>
Alfi Rizka T.

Web ninja html & css

More Related Content

What's hot

Viewers also liked

Similar to Web ninja html & css

Recently uploaded

Web ninja html & css

Editor's Notes