This document provides an overview of HTML and CSS for beginners. It discusses tools for coding, understanding HTML structure and tags, CSS syntax and positioning, sprites, grids, and resources for further learning. The presentation is meant to teach attendees how to become an HTML and CSS ninja through understanding basic concepts and best practices.
Why Teams call analytics are critical to your entire business
Web ninja html & css
1. Basic Programming Part 1:
HTML & CSS
<WEB NINJA/>
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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. HOW TO BE A
HTML & CSS NINJA?
<WEB NINJA/>
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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. HTML
(HYPERTEXT MARKUP LANGUAGE)
<WEB NINJA/>
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
7. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
8. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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 here
HTML
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
10. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
11. Basic Structure HTML Tags
text node
<a href="#ninja-div"> Goto Ninja </a>
property
element
HTML
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
14. 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>
HTML
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
16. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
20. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
21. UNDERSTANDING CSS POSITION
(x = 0, y = 0)
Browser visible area
CSS
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
26. 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.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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 bg
CSS
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
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. DEMO
Undestanding Column and Row
CSS
Alfi Rizka T.
alfi@dedicated-it.com
FB: fb.com/avikaco | twitter : @avikaco
Kelebihanmenggunakan XHTMLDoctype:Elements must be properly nested: <i><b>Test</i></b> is allowed in HTML, but in XHTML would be: <i><b>Test</b></i>Elements must always be closed, including elements with only one tag: HTML is <hr>, but in XHTML: <hr />Elements must be defined in lowercase. HTML allows <H1>, but in XHTML it must be <h1>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: <i><b>Test</i></b> is allowed in HTML, but in XHTML would be: <i><b>Test</b></i>Elements must always be closed, including elements with only one tag: HTML is <hr>, but in XHTML: <hr />Elements must be defined in lowercase. HTML allows <H1>, but in XHTML it must be <h1>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.