Basic Programming Part 1:    HTML & CSS<WEB NINJA/>                                              Alfi Rizka T.            ...
TODAY AGENDA •   How to be a HTML & CSS Ninja? •   Tools •   Understanding HTML •   Understanding CSS •   DEMO •   Design ...
HOW TO BE A HTML & CSS NINJA?<WEB NINJA/>                                       Alfi Rizka T.                             ...
TOOLS<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@dedicated-it.co...
• IDE (Dreamweaver / Zend Studio / Notepad++ / etc)• Web Browser + Firebug / Developer  Toolbar• Zen Coding (code.google.c...
HTML      (HYPERTEXT MARKUP LANGUAGE)<WEB NINJA/>                                                  Alfi Rizka T.          ...
HTML TIMELINE1991 : HTML1994 : HTML 21996 : CSS 1 + Javascript1997 : HTML 41998 : CSS 22000 : XHTML2002 : Tableless web de...
What is Doctype?Doctype is a pre-defined string that is used to tell a client’s web browser whattype of code will be conta...
What New in HTML 5• CSS3 and many new & extended Javascript API.•   More than 50 new tags & attribute (@see http://www.w3....
Basic Structure HTML Tags<!DOCTYPE HTML><html lang="en-US"><head>  <meta charset="UTF-8">  <title>HTML &amp; CSS Ninja</ti...
Basic Structure HTML Tags                                 text node <a href="#ninja-div"> Goto Ninja </a>          propert...
Understanding href Attribute•   Beginning with protocol (eg: http / ftp / mailto / etc)•   Beginning with sharp # (eg: #bo...
HTML COMMON MISTAKEWRONG<span>  <div>Hello Ninja.</div></span><p>  Hello  <p>Ninja.</p></p>CORRECT<div>  <span>Hello Ninja...
HTML COMMON MISTAKEWRONG<a href=“index.html?get=ini&itu” title=“link “ title”>  Hello Ninja.</a>CORRECT<a href=“index.html...
CSS       (CASCADING STYLE SHEETS)<WEB NINJA/>                                                   Alfi Rizka T.            ...
ALL YOU HAVE TO KNOW ABOUT CSS1. All browser have different standard for each html element, that why you   need reset.css2...
BASIC CSS CODEh1 {   margin: 0 0 0 1em; /* 1em = 16px = 12 pt = 100% */   font-size: 1.5;     /* default = em */   letter-...
BASIC CSS CODEmargin: 10px;/* equal with */margin: 10px 10px 10px 10px;/* top right bottom left *//* equal with */margin-t...
BASIC CSS CODEbackground: url(bg.png) #f90 repeat-x 0 10px;/* equal with */background-color:      #f90;background-image:  ...
HOW TO LOAD CSS TO HTML FILE1. Use inline HTML tag (very-very not recomended)   <div style=“font: „arial black‟ 40pt/60pt;...
UNDERSTANDING CSS POSITION  (x = 0, y = 0)                   Browser visible areaCSS                                      ...
UNDERSTANDING CSS POSITION      #container {        width: 980px;        margin: 40px auto;        background: #FFF;      ...
UNDERSTANDING CSS POSITION                                          #sticky {                                            w...
UNDERSTANDING CSS POSITION         (x = 0, y = 0)       #sticky {                                width: 200px;            ...
UNDERSTANDING CSS SPRITENormalHoverActive/clickedCurrentCSS                                           Alfi Rizka T.       ...
UNDERSTANDING CSS SPRITENormalHoverActive/clickedCurrentHTML                                     CSS<ul id="main">        ...
All you have to know about CSS sprite• Tidak boleh ada gambar yang saling timpa• Ukuran sprite item kalo bisa sama untuk s...
UNDERSTANDING GRID SYSTEM•   960 Grid System (960.gs)•   Blueprint CSS (blueprintcss.org)•   Twitter Bootstrap (twitter.gi...
DEMO      Undestanding Column and RowCSS                                                       Alfi Rizka T.              ...
DESIGN   PSYCHOLOGY<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@d...
<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@dedicated-it.com    ...
RESOURCES<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@dedicated-i...
HTML & CSS RESOURCES• W3 (www.w3.org)•   validator.w3.org•   HTML5 Rock (www.html5rocks.com )•   beta.html5test.com•   htm...
QUESTIONS?<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@dedicated-...
THANKS<WEB NINJA/>                                       Alfi Rizka T.                                 alfi@dedicated-it.c...
Upcoming SlideShare
Loading in …5
×

Web ninja html & css

1,326 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,326
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Kelebihanmenggunakan XHTMLDoctype:Elements must be properly nested:  &lt;i&gt;&lt;b&gt;Test&lt;/i&gt;&lt;/b&gt; is allowed in HTML, but in XHTML would be:  &lt;i&gt;&lt;b&gt;Test&lt;/b&gt;&lt;/i&gt;Elements must always be closed, including elements with only one tag: HTML is &lt;hr&gt;, but in XHTML:  &lt;hr /&gt;Elements must be defined in lowercase.  HTML allows &lt;H1&gt;, but in XHTML it must be &lt;h1&gt;Elements must be nested and rooted together.  This goes hand-in-hand with item #1, but goes on to require that all text is contained in an element.
  • Kelebihanmenggunakan XHTMLDoctype:Elements must be properly nested:  &lt;i&gt;&lt;b&gt;Test&lt;/i&gt;&lt;/b&gt; is allowed in HTML, but in XHTML would be:  &lt;i&gt;&lt;b&gt;Test&lt;/b&gt;&lt;/i&gt;Elements must always be closed, including elements with only one tag: HTML is &lt;hr&gt;, but in XHTML:  &lt;hr /&gt;Elements must be defined in lowercase.  HTML allows &lt;H1&gt;, but in XHTML it must be &lt;h1&gt;Elements must be nested and rooted together.  This goes hand-in-hand with item #1, but goes on to require that all text is contained in an element.
  • Web ninja html & css

    1. 1. Basic Programming Part 1: HTML & CSS<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    2. 2. 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.com FB: fb.com/avikaco | twitter : @avikaco
    3. 3. HOW TO BE A HTML & CSS NINJA?<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    4. 4. TOOLS<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    5. 5. • 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    6. 6. HTML (HYPERTEXT MARKUP LANGUAGE)<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    7. 7. HTML TIMELINE1991 : HTML1994 : HTML 21996 : CSS 1 + Javascript1997 : HTML 41998 : CSS 22000 : XHTML2002 : Tableless web design era2005 : Asynchronous JavaScript and XML (AJAX)2009 : HTML 5HTML Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    8. 8. What is Doctype?Doctype is a pre-defined string that is used to tell a client’s web browser whattype 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    9. 9. 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 hereHTML Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    10. 10. 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>HTML Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    11. 11. Basic Structure HTML Tags text node <a href="#ninja-div"> Goto Ninja </a> property elementHTML Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    12. 12. 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    13. 13. HTML COMMON MISTAKEWRONG<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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    14. 14. HTML COMMON MISTAKEWRONG<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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    15. 15. CSS (CASCADING STYLE SHEETS)<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    16. 16. ALL YOU HAVE TO KNOW ABOUT CSS1. All browser have different standard for each html element, that why you need reset.css2. 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.CSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    17. 17. 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 */}CSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    18. 18. BASIC CSS CODEmargin: 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    19. 19. BASIC CSS CODEbackground: 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    20. 20. HOW TO LOAD CSS TO HTML FILE1. 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    21. 21. UNDERSTANDING CSS POSITION (x = 0, y = 0) Browser visible areaCSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    22. 22. UNDERSTANDING CSS POSITION #container { width: 980px; margin: 40px auto; background: #FFF; }CSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    23. 23. UNDERSTANDING CSS POSITION #sticky { width: 200px; position: absolute; top: 100px; right: -60px; } #container { width: 980px; margin: 40px auto; background: #FFF; }CSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    24. 24. UNDERSTANDING CSS POSITION (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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    25. 25. UNDERSTANDING CSS SPRITENormalHoverActive/clickedCurrentCSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    26. 26. UNDERSTANDING CSS SPRITENormalHoverActive/clickedCurrentHTML 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    27. 27. 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 bgCSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    28. 28. 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. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    29. 29. DEMO Undestanding Column and RowCSS Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    30. 30. DESIGN PSYCHOLOGY<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    31. 31. <WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    32. 32. RESOURCES<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    33. 33. 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.comRESOURCES Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    34. 34. QUESTIONS?<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco
    35. 35. THANKS<WEB NINJA/> Alfi Rizka T. alfi@dedicated-it.com FB: fb.com/avikaco | twitter : @avikaco

    ×