Uploaded by Mg Thar byaw

http://mlmtechnological.blogspot.com

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

ProfessionalWebDeveloper
TableofContentsandSampleChapters

Copyright2013,EiMaung,FairwayWebDevelopment.

LicenseCCBYNCSA
Thisdocument,ProfessionalWebDeveloperTableofContentsandSampleChaptersbyEiMaungislicensed
underaCreativeCommonsAttributionNonCommercialShareAlike3.0UnportedLicense.
Thisdocumentisfreetoshare,copy,distributeandtransmit.And,alsoallowtoremixoradapttothisdocument.
But,youmustattributetheworkinthemannerspecifiedbytheauthororlicensor(butnotinanywaythatsuggests
thattheyendorseyouoryouruseofthework).And,youmaynotusethisworkforcommercialpurposes.Ifyou
alter,transform,orbuilduponthiswork,youmaydistributetheresultingworkonlyunderthesameorsimilarlicense
tothisone.
Foranyreuseordistribution,youmustmakecleartoothersthelicensetermsofthiswork.
THEWORKISPROTECTEDBYCOPYRIGHTAND/OROTHERAPPLICABLELAW.ANYUSEOFTHEWORK
OTHERTHANASAUTHORIZEDUNDERTHISLICENSEORCOPYRIGHTLAWISPROHIBITED
http://creativecommons.org/licenses/byncsa/3.0/legalcode

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:1

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Web Application

() WebStandards
W3C HyperText Transfer Protocol (HTTP)

() HyperTextMarkupLanguageHTML
Web Document ( ) Semantic Data Structure

() CascadingStyleSheetsCSS
User Interface

() Javascript
Programming Language

() JavascriptFrameworksOverview
Modern Web Rich Internet Application - RIA

() jQuery
Write less, do more

() ServersideProgramingLanguages
Server-side

() WebDevelopmentwithPHP(Part1)
XAMPP One-stop Development Environment

() WebDevelopmentwithPHP(Part2)
PHP/MySQL Database Driven Web Application

() WebDevelopmentwithPHP(Part3)
PHP error handling Apache module

() AjaxwithjQuery
Client-Side Development

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:2

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

() ContentManagementSystemCMS
General Purpose CMS, Special Purpose CMS

() MVCWebApplicationFrameworks
D.R.Y Don't Repeat Yourself

() HTML5
Application Platform HTML

() WebServices

() RESTandAPI
Representational State Transfer ( ) Semantic Data Transfer

() MobileWeb
Responsive Web Design Mobile First Approach

() WebApplicationSecurity
SQL Injection, XSS

() SearchEngineOptimization
Search Engine

() ToolsandUtilities
Browser Developer Tools, IDEs, Code Editors

()
Open Source

()
Web Hosting Cloud Computing

...

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:3

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

() Web Standards
W3C HyperText Transfer Protocol (HTTP)

Internet

Wire
Wireless
Network
Network
International Network
Devices
1957

()




ARPA (the Advanced Research Project Agency)




Joseph Licklider
Man-Computer Symbiosis
Network

Joseph Licklider ARPA
Information Process Office

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:4

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

ARPANET Network
Network
Network packets switching

ARPANET packets switching Network
JANET Network CompuServe
Network Private Network

Network

ARPA Satellite Network
Packets Project Robert Kahn
Vinton Cerf
Mask Protocol
"Internet Transmission Control Program
Network
Network

ARPA Software
Protocol
TCP/IP
Protocol
Network

Network
Tablet Device Device

(Smart Glass) (Smart Watch)

Device IP Address


Device



http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:5

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Email World Wide Web
Email World Wide Web

""
"

Email World Wide Web

Instant Messaging (IM), File Transfer Protocol (FTP), Secure Shell
(SSH), Internet Relay Chat (IRC), Voice Over Internet Protocol (VoIP)

World Wide Web (WWW)

Gopher



Gopher
Gopher
Gopher
Gopher

CERN (The European Council of Nuclear Research Center)
Gopher Tim Berners-Lee
Document Document Link
Hypertext Document
Document Server Server Software
Document
Program
"WorldWideWeb
WorldWideWeb Source Code
()

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:6

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

NCSA (National Center of Supercomputing Applications) Hypertext Document

Gopher Web Browser Program
Mosaic Unix Operating System
Mac Windows Version
Mosaic WorldWideWeb

Mosaic Hypertext Document

Web Browser


Web World Wide Web



Web ()
.) Hypertext Document
Web Document
Document
(Image)

Form
Document Hyperlink

Hyperlink Document Document

Web

Developer Web
Document
.) Web Document Web Server Web Server
Web Document

Web
Domain Name
URL (Uniform Resource Locater)
Web URL
(-)
Web URL
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:7

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) URL

Domain Name
- google.com Image Search, Map,
Reader, News google.com (Home Page)


URL Web "" Web Resource URL
Web Developer
.) Web Browser Web Browser Mosaic
Browser Browser Microsoft
Internet Explorer Mozilla Firefox
Mosaic
Web Browser () Microsoft Internet Explorer, Mozilla
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:8

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Firefox, Google Chrome, Apple Safari Opera Tablet

Android Browser, Mobile Safari Opera Mobile
Mobile
Browser Web Browser
Web Browser
URL Web Server
Web Server

(-) Web Browser

Image Credit: vladstudio.com/wallpaper/?how_internet_works

Web Application Web Service

Web Web Document


Document URL

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:9

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

World Wide Web Consortium (W3C)

Web Tim Berners-Lee World Wide Web Consortium (W3C)


(MIT/LCS)
DARPA (Defense Advanced Research Projects Agency)

W3C Web Document Web Server
Web Browser Web
W3C
Google, Microsoft, Mozilla, Apple, Adobe, Opera
Web

Web Server Web Browser W3C
Server Browser
Web Developer W3C

Website Web Application
W3C Web Standards
HTTP, CGI, HTML, XHTML, XML,
SOAP, DOM, CSS, SVG, RDF
HTTP, HTML, CSS DOM

HyperText Transfer Protocol (HTTP)

(-) URL
http:// " HTTP
Web Document Web Server Web Client


Web Client Web Browser Browser Web Document
- Mobile
Phone Install
Facebook App App Install
Facebook Web Server
Facebook App Browser Web Server Web
Client Web Server
HTTP
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:10

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Web Client
Request Web
Server
Respond
Web Client Web Server

HTTP Client
Server
HTTP

Client Request
HTTP Web Client Web Server

Format
GET /foo.html HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0
Accept-Encoding: gzip, deflate
If-Modified-Since: Tue, 26 Feb 2013 05:34:16 GMT

Request Header
GET Request Method

HTTP GET, POST, PUT, DELETE Request Method Client
Request Method

GET Server
POST Server
PUT DELETE HEADER, DEBUG,
TRACK, TRACE Request Method
Request Method
() Web Development with PHP (Part 1) () REST and API


Request Method Document URL

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:11

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTTP Protocol version Server

User-Agent Client

Server

() Web Development
with PHP (Part 3)
Server


HTTP Request Format Client

Web Browser Address Bar URL Web Browser
HTTP Request Format Server

Developer
Tools Tool LiveHTTPHeader
Firefox
Addon

(-) LiveHTTPHeader Firefox Addon

Link: livehttpheaders.mozdev.org

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:12

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Tool Client Server

Server Respond
Web Server Hardware Server Software Server Hardware Server
HTTP
Server Operating System Run
Web Document File Physical Machine
Software Server HTTP Request
Apache, Nginx, IIS (Microsoft Internet Information Service)

HTTP Web Server Software
Physical Machine Hardware Server Computer Web Server Software Server
Email Server, FTP Server, SSH server Server
(Port Number)
Request
HTTP Web Server Default Port No. 80 80
Request HTTP Web Server
Browser Address Bar URL Port No. Browser 80
Web Server Port No. Setting () Web Development with PHP
(Part 3)

Web Server
Request Request Header




Client

Respond
Header
HTTP Respond Header
HTTP/1.1 200 OK
Date: Mon, 04 Mar 2013 14:03:18 GMT
Server: Apache/2.2.14 (Unix) PHP/5.3.1
Last-Modified: Sun, 03 Mar 2013 20:15:33 GMT
Content-Encoding: gzip
Content-Length: 1448
Content-Type: text/html; charset=utf-8
Status Code 200 OK
Request

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:13

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTTP Status Code () (1xx)

Code

(2xx)
Code Request/Respond
Code (3xx) Code Redirect


Code (4xx)
Code Client Error
Code
Request Error
(5xx)
Code Server Error Web
Server Request

Code Status Code
Code

200 OK Request
301 Moved Permanently


Client Request
URL Request
304 Not Modified Server Request Header
If-Modified-Since: Format

307 Temporary Redirect
301 Request
URL
403 Forbidden Request Client


404 Not Found
500 Internal Server Error Server Error


503ServiceUnavailable Server Error

Code Web Server Down
Code
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:14

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Status Code Wikipedia List

of HTTP Status Codes Article
Link: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Respond Header Respond Header
Server
Size



Browser
Respond Header
- Browser
Cache

Respond Header Modified Date Cache
Modified Date
Server
Cache


Browser Text, HTML, Image, Audio
- Microsoft Excel File Web Browser
Respond Header Content-Type Browser

Download

Pull Technology
HTTP Pull Technology Pull Technology Client Server
Client
Server
Client Pull Technology Server

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:15

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) HTTP

Developer URL Web

Web Development () Client Request
Server Respond ()

Pull Technology Web Application Full-Duplex

Client-Server Network Application
Real-Time Application


Application Pull Technology

Long-Polling, Commet, Web Sockets
() Ajax with jQuery () HTML5

Stateless Protocol
Stateless Protocol Client Server

Request/Respond State
HTTP Stateless Protocol

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:16

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Client Resource A Server Resource A Client

Resource B Server Resource B
Resource A

Resource B


Server ..
A B C
A A B
B ..


HTTP Application Developer

State Cookie, Session
Cookie Session () Web Development with PHP (Part 1)
HTTP Pull Technology Stateless

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:17

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

() HyperText Markup Language - HTML

Web Document ( ) Semantic Data Structure
HTML W3C Web Document
Web Document HTML Element Text
Document

(-) HTML Element

(-) HTML Element

HTML Element
Open Tag Close Tag Element Content
Open Tag Element Attribute
Close
Tag Content Open Tag Attribute Empty Tag

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:18

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Element () Document HTML HyperText Markup

Language World Wide Web Tim Berners-Lee
() ()
HTML 2.0

HTML 4.01 HTML5
HTML 4.01 HTML5
() HTML5

Semantic Web
HTML Element Semantic Web
Semantic Web Document
Semantic Web Document
Process W3C HTML

Web Document

Document
Process
Processing Power
Web Browser, Search Engine Spider Software
Web Document

Web

Document
Process Semantic Document
Web Developer Web Document "
"
Web Document Process

Web Document Text
Document

Document
Process
Document Google Search Engine Web Browser
Document
CSS
Style Javascript Element


HTML
Data Structure
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:19

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTML

CSS
Style Language

Semantic Web Browser War XHTML

Browser War
Web Browser Mosaic Marc Andreessen Jim Clark
NCSA Mosaic Communications
Netscape Communications Corporation Netscape Navigator Web Browser
Netscape Navigator Version 1.0
NCSA Spyglass Inc. Mosaic Browser
Microsoft
Mosaic Browser Microsoft Internet Explorer

Microsoft Internet Explorer Mozilla Firefox

Browser Mosaic Mosaic Source
Code Mosaic Netscape Navigator
Browser Firefox
Telenor Opera Web Browser Version
Opera Browser

Opera Web Standards
Web Developer Web Browser

Bowser War
Opera Microsoft Netscape


Web Browser





Web Developer Web Document
Document Internet
Explorer Netscape
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:20

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Browser " Document Browser

" Major Browser ()
Browser Developer

Web Standard W3C Web Standard

Internet Explorer Netscape
Browser War Web Development

Browser War Browser War
Web Document

Professional Web Developer
Web Standard Project (WaSP)
Web Standard
Microsoft Netscape
Browser W3C Web
Standard
Web Developer
Browser Web Standard
WaSP
Web Developer Web Standard

Microsoft Mac Internet Explorer 5

Browser Web Standard
WaSP Netscape Navigator 5 Web Standard
Wired, ESPN Website
Website Web Standard

CSS Zen Garden Website HTML Content
CSS Style Language Website Design

Professional Web Developer Web Design

Web Standard Mozilla Firefox
Version Google Gmail Gmail
Web Standard Javascript
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:21

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Application Javascript Web Developer

Application O'Reilly
Media Tim-O'Reilly Web2.0
Web2.0 Web Standard Application
Web Application
Web Browser Web Standard
Web Developer Web Standard

Web Document Web Document
Web Browser

HTML vs. XHTML

W3C Web Standard Web Standard
Web Industry

Browser War Internet Explorer Netscape
W3C Web Standard


<font> HTML Element Web Document
<font> Element W3C HTML
Netscape <font> Element
Internet Explorer Web Developer Document
Netscape Navigator Internet Explorer
W3C
Standard
HTML 3.0 Internet Explorer Netscape
HTML Element
HTML HTML
Semantic Data Structure

HTML 4.0 4.01
HTML Semantic Data
Structure Web Document Application
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:22

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Data Structure Font Text Format

Document Browser Support
Concept Web Application

W3C HTML 4 .01
Element Version
HTML 4.01
Website Website
Backward Compatibility W3C
HTML XHTML
Markup Language
XHTML X eXtensible W3C
Data Model Language XML HTML

HTML Semantic Element XHTML

- XHTML Element Tag
HTML

XHTML Element Close Tag Close Tag
Empty Element Self-Closing Element
( - <br /> <img />) Attribute Value Quote
(HTML: <img src=pic.jpg> vs. XHTML: <img src=pic.jpg />)
XHTML HTML
Semantic Web Document
Markup
Language
WaSP
Web Standard Web Developer XHTML
Web Document Developer XHTML

WaSP XHTML Semantic Web Document Browser Web Standard Support

XHTML Version 1.1
Version 2 W3C

XHTML 2.0 HTML5 Web Document
Markup Language

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:23

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTML5 XHTML
HTML 4.01 Website Backward Compatible
HTML5 () HTML5

HTML Element

HTML Skeleton
HTML Document
Document Type Declaration
HTML Document HTML
Document Element
<!doctype html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<!-- Document Content -->
</body>
</html>
<!doctype html> Document HTML Document
Document Type Declaration HTML Elements
<html> Element <html> Element
Element <head> Element <body> Element

<head> Element Document

<title> Element <title> Element
Document Title <head> Element
Element <meta> <link> <script> <style>

<body> Element Web Browser

<!-- --> Element
Comment Element Comment Element
Document

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:24

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTML Element Web Document File System html

Extension ( - home.html) Document Web Document
Extension Content-Type File Attribute
html Extension Document File Attribute


Web Document Web Document
html Extension html Extension Web
Document

Basic Elements
HTML Document
Text Document Text Document

Form Hyperlink
Document Link HTML Document
Element
Document Main Heading

Sub Heading
HTML Document ()
Main Heading <h1> Element <h2> Element
<h3> Element <h4> <h5> <h6>
() Document



<p> Element <p> Element
HTML

Document

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:25

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> - </title>
</head>
<body>
<h1> </h1>
<img src="nyomya.gif" alt="">
<p>



()

</p>
<p>



( ) ( )

</p>
<h2></h2>
<p>

</p>
</body>
</html>
<head> Element <meta> Element

Element Document English
Browser
English



<body> Element <h1> Element
<h2> Element
() <p> Element

<img> Element
<img> Element

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:26

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Empty Element
Close Tag Tag Content
Attribute src Attribute
alt Attribute ''
src

Web Browser

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:27

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

<h1> Element
<h2> Element



Document Structure
Browser
<h1>

Element
<h1> <h2>
<h2>
Browser Size Size
Style CSS HTML
"
Element
HTML Document White Space

White space "Space Tab "New Line

HTML Document Process Web Browser
White Space Single Space

Document White Space

Hyperlinks and Anchors

Web Server Document Resource
URL HTML Document
URL Document Document Hyperlink

Document
(Region)
Document
Link Hyperlink Document
Link Anchor

Link (External) Resource External Link
Document (Internal) Internal Link

External Link <a> Element Internal Link <a>

Element <a> Element href URL
Attribute Google Search External Link

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:28

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

<a href=http://www.google.com/ title=Google Search>Search</a>

<a> Element http://www.google.com/ URL href
Attribute Link http://www.google.com

title Attribute Attribute
<a> Element Attribute title Attribute
Element Search Engine Spider
<a> Element HTML Element



HTML Element title Attribute Web Browser
Mouse Element
title Attribute Tool Tip

Link URL Document Browser Window

Attribute target=_blank Attribute

<a href=http://www.google.com/ target=_blank>Search</a>
Attribute
HTML Document Data Structure
HTML
target=_blank Attribute Link URL Document
Browser Window
"
Javascript HTML Data Structure

Usability Web Browser Link Right Click
"Open Link in New Window Option Link
Window


Window
Window
Option

" Window Force

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:29

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Usability
target=_blank Attribute



Internal Link (Anchor)
Document
HTML Element ID
<h2 id=ch2>Chapter Two</h2>
<h2> Element id Attribute ID
Document <h2> Element <h2>
ID
<a> Element Document
ID <a href=#ch2>Chapter Two</a>
<a> Element href Attribute Document Document
ch2 ID Element #ch2
# Sign

External Link Document Document Element
<a href=http://example.com/toc.html#ch2>Chapter Two</a>
example.com/toc.html Document #ch2 Element

Lists
HTML Document List
Element
<ul> <ol> <ul> Unordered List Bullet
<ol> Ordered List

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:30

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

List <ol>
<ul>
Bullet

<ul> <ol> Element Item List Item Element <li>
Element

<ol>
<li>Chapter
<li>Chapter
<li>Chapter
<li>Chapter
</ol>

One</li>
Two</li>
Three</li>
Four</li>

<ul>
<li>Yangon</li>
<li>Mandalay</li>
<li>Naypyidaw</li>
<li>Monywa</li>
</ul>

1.
2.
3.
4.
5.

ChapterOne
ChapterTwo
ChapterThree
ChapterFour
ChapterFive

Yangon
Mandalay
Naypyidaw
Monywa

<ol> Element List start Attribute

- <ol start=5> 1 5, 6, 7

(
) reversed Attribute
- <ol reversed>
Element Attribute
Attribute Name Attribute Value Attribute
Attribute Attribute
Attribute Name Value

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:31

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

- <ol reversed=reversed>. XHTML

Value Attribute Name

reversed Attribute HTML5 Attribute HTML5 Support
Browser

Tables

<table> Element Rows
Columns
Table Rows Columns
Rows
Table Row <tr> Attribute
Rows Columns Table Data <td> Attribute

<table>
<tr>
<td>484</td>
<td>MX</td>
<td>MEX</td>
<td>Mexico</td>
</tr>
<tr>
<td>504</td>
<td>MA</td>
<td>MAR</td>
<td>Morocco</td>
</tr>
<tr>
<td>104</td>
<td>MM</td>
<td>MMR</td>
<td>Myanmar</td>
</tr>
<tr>
<td>524</td>
<td>NP</td>
<td>NPL</td>
<td>Nepal</td>
</tr>
</table>

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:32

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

484

MX

MEX

Mexico

504

MA

MAR

Morocco

104

MM

MMR

Myanmar

524

NP

NPL

Nepal

Table Column <td> Element

<th> Element

<table>
<tr>
<th>Code</th>
<th>ISO</th>
<th>ISO3</th>
<th>Name</th>
</tr>
<tr>
<td>504</td>
<td>MA</td>
<td>MAR</td>
<td>Morocco</td>
</tr>
<tr>
<td>104</td>
<td>MM</td>
<td>MMR</td>
<td>Myanmar</td>
</tr>
</table>

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:33

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Code

ISO

ISO3

Name

504

MA

MAR

Morocco

104

MM

MMR

Myanmar

Table <thead> <tbody> <tfoot> Element

<table>
<thead>
<tr>
<th colspan=4>Country List</th>
</tr>
</thead>
<tbody>
<tr>
<th>Code</th>
<th>ISO</th>
<th>ISO3</th>
<th>Name</th>
</tr>
<tr>
<td>504</td>
<td>MA</td>
<td>MAR</td>
<td>Morocco</td>
</tr>
<tr>
<td>104</td>
<td>MM</td>
<td>MMR</td>
<td>Myanmar</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=4>&copy; Copyright 2013</td>
</tr>
</tfoot>
</table>

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:34

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Country List
Code

ISO

ISO3

Name

504

MA

MAR

Morocco

104

MM

MMR

Myanmar

Copyright 2013
<thead> Element <td> colspan=4 Attribute
Attribute Column colspan=4
" Country
List Column

<tfoot> Element &copy; HTML Entitle
Symbol
HTML
Ampersand (&)
Semi-Colon (;) &copy; Symbol
HTML Entitle Symbol

Table Layout
HTML Document Semantic Data
Structure Document
Style Language CSS
XHTML Browser CSS Support
CSS2.1 Internet Explorer Web
Browser Support
Web Developer Web Document Style
CSS <table> Element
Document Layout

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:35

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Layout Table Row Row Column

Row Column <table> Element
Page Layout Web Developer
XHTML Semantic Web Browser CSS Support
<table> Element
Layout

Browser CSS Support Layout
Table Table Layout CSS Layout
<table> Element Layout

Formatting Elements
Text Format Element <b> Element
Bold
<i> Element (Italic)
Text Format
HTML Document Text Format Element ()
Style Detail CSS

W3C XHTML <b> <i> <s> <u> Formatting Elements

Document

Semantic Element <strong> <em> <del>
XHTML
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:36

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

<i>Hello, World!</i>
Hello, World!
<em>Hello, World!</em>

<i> Element <em> Element
?
" ?
<em>
Emphasis ()
<i> Element <em>
Element Semantic
HTML5 <u> Element
Formatting Elements
<b> - Bold (Example)
<i> - (Example)
<s> - Strike-through (Example)
<strong> - (Example)
<em> - (Example)
<del> - (Example)
<sup> - Superscript (Example 2nd)
<sub> - Subscript (Example H2O)
<code> - Program Code (Example)
<pre> - Format HTML Whitespace
<pre> Element Whitespace
HTML Document Program Code
Element
<blockquote> - (
)

Form and Inputs

Form HTML Document Form

Element Input Element
Text Input
<input> Element type Attribute "text Empty Tag
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:37

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Close Tag Content

<input type=text>
Attribute value Attribute Text Input Default Value

Text Input readonly
Attribute
disabled Attribute Input maxlength
Attribute Text Input
<input type=text maxlength=6>
Input
Label <label> Element
<label for=fname>First Name</label>
<input type=text id=fname>
<label> Element <input> Element

<label> Element for Attribute
<input> Element id
First Name Label Text Input Focus

Input Type Text
<input type=password> Password Text Input
Star
Input
<input type=hidden> Text Input hidden
Input Application
hidden Input

<input type=checkbox> Checkbox Option checked
Attribute Default Check checked Attribute
checked=checked Attribute

Attribute Name
<input type=radio> Radio Option
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:38

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

checked Attribute Default Check Radio Option

Option

Radio Option name Attribute <input type=radio name=gender value=male>
<input type=radio name=gender value=female>
<input type=submit> Button submit Button Form
submit Button () Web Development
with PHP (Part 1) Input Element

value Attribute Text Input Default Value Checkbox Radio Option

Element Button Element value Attribute
Button Button Label - <input type=submit value=Save>

<input type=reset> Button reset Button Input

Button
Button Web Form Input

Use Case
Button
Usability

Button

<input type=button> Button Button

Javascript Button

<button> Element <input type=button>

<button> Element Full Element Element Content Close Tag
- <button>Download</button> <input type=button
value=Download>
<button> Element Formatting Tag Content
- <button>Download <b>file.pdf</b></button>

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:39

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Input Textarea Select Box

<input>
Element Textarea
<textarea> Element
<textarea> <input> Empty Element Full Element
Default Value
<input type=text> value Attribute
Default Value Tag Tag <textarea>Default Text</textarea>
Select Box Drop-Down Box

<select> Element
<option> Element
<select>
<option
<option
<option
<option
</select>

value=1>Apple</option>
value=2>Orange</option>
value=3 selected>Mango</option>
value=4>Grape</option>

<option> Element value Attribute - Orange

(2) value Attribute
Orange value
selected Attribute Default
<option> Element selected Attribute <option>
<option> Default

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:40

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

HTML Form Example

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Form</title>
</head>
<body>
<h1>Form Inputs</h1>
<form>
<label for="fname">Name</label><br>
<input type="text" id="name"><br>
<label for="email">Email</label><br>
<input type="text" id="email"><br>
<label for="address">Address:</label><br>
<textarea id="address"></textarea><br>
<br>
<input
<label
<input
<label
<br>

type="radio" name="gender" id="male">

for="male">Male</label>
type="radio" name="gender" id="female">
for="female">Female</label><br>

<label for="education">Highest Education</label><br>

<select id="education">
<option>High School</option>
<option>Bachelor</option>
<option>Post Graduate Diploma</option>
<option>Master</option>
<option>Ph.D</option>
</select><br> <br>
<input type="submit" value="send">
</form>
</body>
</html>
Form Browser

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:41

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Browser Element <br> Element

<br> Line Break Content Close Tag Empty Element

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:42

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Conclusion
Element Text Document HTML Element
Element
Element Attribute
HTML5 Element
Attribute
() HTML5
HTML Document Web Application Semantic Data Structure

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:43

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

() Cascading Style Sheets (CSS)

User Interface
HTML Document Web Application CSS
Decoration CSS
Document Structure Style HTML Data Structure
Data Style
CSS

CSS Style Language Mailing List Proposal ()
() W3C Cascading HTML
Style Sheets (CHSS) Stream-based Style Sheet Proposal (SSP)
CHSS

CSS CSS HTML

Markup Language ( - XML, SVG, XUL)
CHSS H CSS
Mailing List Online Forum Email
Project

Style Language CSS Document

Style Sheets
Style Sheet Style
Sheet Cascade

Cascading Style Sheet
CSS Version CSS Version
CSS Level 1 HTML5 CSS3 CSS
Level 3

CSS2.1 (Level 2 Revision 1)

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:44

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

CSS Syntax
CSS Programming Language Markup Language
Language
"<h2> Element Bold
<p> Element class='note' Element Size 12 Pixels

Element Style
Syntax (-)

(-) CSS Syntax

Selector, Property, Values Selector h1, p, img, li HTML Element

Property color, background, border, font-style
Style Property Values blue, 20px, bold, center Style
Value - <p> Element CSS

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:45

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

p {
color: green;
}
p Selector color Property green Value

CSS Selectors
CSS () Selector Element
HTML

Document Style Element Select

Selector Element Selector, ID Selector Class Selector

Element Selector HTML Element Name Select
HTML Element Name CSS Select
body {
background: black;
color: white;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
ul {
list-style: square;
line-height: 20px;
}
a {
color: yellow;
text-decoration: none;
}
body, h1, ul, a Element Name Select
Element
Selector ID Selector id Attribute Element id

Select -
HTML Document Element Structure

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:46

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

<ul id=nav>
<li id=key-nav> </li>
<li> </li>
<li> </li>

</ul>
<p id=highlight> </p>
<ul id=sitemap>

</ul>
<p id=foot-note> </p>
ul { background: pink; } Structure <ul> Element
Background
<ul> Element Style
ID Select
ul#nav {
background: pink;
}
(
)
#nav {
background: pink;
}
# Sign ID Selector
ul#nav "ID nav
<ul>
Element Select #nav "ID nav

Element Select
ID nav
<ul> Element Background


Structure <p> Element id=highlight

Element p#highlight (
) #highlight ID Selector

Class Selector ID Selector
Element class

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:47

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Attribute
# Sign ID Selector Dot ( . ) Class Selector

Element Structure
<p> </p>
<p class=note> </p>
<p> </p>
<p class=note> </p>
<p> Element class=note

Select
p.note {
color: gray;
font-size: 11px;
}
(
)
.note {
color: gray;
font-size: 11px;
}
ID Selector p.note "Class note
<p> Element Select
.note "Class note
Element
Select
p.note
.note
HTML Document ID Elements CSS ID Element
ID Element Identify Unique
CSS Javascript Element ID Element



Class Element Classify
Element Class Front-End
Expert CSS Element ID Class

Slightly Advanced CSS Selectors

Selector Descendant
Selector, Child Selector, Attribute Selector

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:48

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Descendant Selector Element Element Select

Nested Selector
Document Element Class ID
Select HTML
Element Structure

<a href=#>Outside Link</a>
<p>
<a href=#>Inside Link One</a>
<strong><a href=#>Inside Link Two</a></strong>
</p>
<a> Element <p> Element
<p> Element <a> <strong> Element
<a> Element Select
p a {
color: gray;
}
p [space] a [space] Descendant Selector
<p> Element <a> Element Select "
<p> Element <a> Element
<a> Select

Element Structure <a> Element href Attribute URL # Sign

URL

# Sign # Sign URL Pattern
Valid Sign # Sign

p strong a {
color: gray;
}
p [space] strong [space] a "<p> Element
<strong> Element <a> Select Structure
Inside Link Two Element

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:49

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Element Select Project

#header a {
text-decoration: none;
color: black;
}
#nav li a.active {
background: black;
color: white;
}
.note strong {
font-weight: normal;
color: red;
}
#footer p {
font-size: 11px;
color: gray;
}
a img {
border: 0 none;
}
Child Selector Descendant
Element
Element Select Descendant Selector Element
Element Selector Child Selector Direct Child
Element Element Element
Select Descendant Selector Element Structure

<a href=#>Outside Link</a>
<p>
<a href=#>Inside Link One</a>
<strong><a href=#>Inside Link Two</a></strong>
</p>
<p> Element <a> Element Select

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:50

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

p > a {
color: gray;
}
Arrow ( > ) Child Selector "<p> Element Direct
Child <a> Element Select Selector Inside Link
One <a> Element Inside Link Two <a> Element
Direct Child <strong> Element
Child Selector Descendant Selector

Attribute Selector Element Attribute Select
Selector [title] title Attribute Element Select img[alt]
<img> Element alt Attribute Element Select
img[alt=Feature Image] <img> Element alt=Feature
Image Element Select <input> Element

text, radio, button Type type
Attribute Select

input[type=text] {
background: yellow;
border: 1px solid gray;
}
input[type=submit] {
padding: 5px 15px;
}
input[type=radio] {
margin-right: 5px;
}
Descendant Selector, Child Selector Attribute Selector

Element Select

Pseudo-classes
Pseudo-class CSS Selector
Element "
Select Element Mouse
Element Click Element Focus
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:51

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Element Element Element Style

Select Selector
:hover Pseudo-class Element Mouse Style
a:hover {
color: red;
}
<a> Element Mouse

:hover Pseudo-class Element

Selector #nav li:hover {
background: green;
}
p:hover a {
color: lightblue;
}
:visited Pseudo-class <a> Element
URL
Link URL Link
Style
Google Search Wikipedia
Website

Link Link


Link :visited Pseudo-class
Style
a {
color: blue;
}
a:visited {
color: gray;
}
Link Link

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:52

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

:active Pseudo-class Element Click Style
Element
Click

Element

button:active {
background: gray;
}
:focus Pseudo-class Form Input Element <input> <textarea> <select>

Element Focus

input[type=text] {
background: white;
}
input[type=text]:focus {
background: yellow;
}
<input type=text> Element

Input Element Cursor Focus
Pseudo-class Attribute Selector

:first-child Pseudo-class Select Element Element

Style :last-child Pseudo-class
:last-child Select Element Element

Style
#nav li:last-child {
border: 0 none;
}
#page p:first-child {
font-weight: bold;
}

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:53

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Grouping Selectors
Selector Group Style CSS
Rule

p.note {
background: #efefef;
font-size: 12px;
}
#footer .copyright {
background: #efefef;
font-size: 12px;
}
code {
background: #efefef;
font-size: 12px;
}
Rules


p.note, #footer .copyright, code {
background: #efefef;
font-size: 12px;
}
Selector Comma (,) Group
HTML5

CSS3 Selector Pseudo-class
CSS3 Selector () HTML5
Selector CSS
Selector jQuery Javascript Framework
Emmet (a.k.a Zen Coding) Developer Tool CSS Selector
jQuery () jQuery
Emmet () Tools and Utilities

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:54

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Background
Layout CSS Property
Element Background
CSS Background Property ()
background-color, background-image, background-repeat,
background-attachment background-position

Background Property Element
background-color Property
p {
background-color: yellow;
}
background-color Property Color Value black, white,
red, green, blue, yellow, cyan, brown, gray Color Name
Color Name
black white Name
Color Value RGB Function
Screen Red, Green, Blue
CSS RGB Value

p {
background-color: rgb(255, 255, 0);
}
<p> Element rgb() Function
Parameter Red, Green, Blue
0 255 rgb(255, 0, 0) Solid Red
Red 255 Green Blue 0
rgb(0, 255, 0) Solid Green, rgb(0, 0, 255) Solid Blue
rgb(0, 0, 0) Screen
rgb(255, 255, 255)
rgb(200, 0, 0)
Red 200
Green Blue 0
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:55

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

() rgb(255, 255,
0) rgb() Primary Color

(-) CSS RGB Color

Color Value Hex Value Hexadecimal

p {
background-color: #FFFF00;
}
Hex Value
# Sign
() Hexadecimal
Decimal Number system 0 9 ()
Hexadecimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
() Number System
Hex FF Decimal 255

Hex Value 00 FF
() FFFF00 R = FF, G = FF B = 00 Red Green
FF Green 00

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:56

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) CSS Hex Color

Hax Value () ()

- #FFFF00 #FF0 #88AADD #8AD #FFFFFF #FFF
#000000 #000
#ffff00

Color Value Background Color Color

Name, RGB Hex Value
background-color Border
Color Value

RGB Color


Color

Code
Color Pick Tool ColorZilla
Firefox Addon Addon Website
Color Circle Color Code
Color Code Hex, RGB, CSS3 Color Function HSL, Print
Design CMYK
Color Name Web Developer Browser
Addon

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:57

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) ColorZilla Firefox Addon

www.colorzilla.com

Google Chrome Browser Extension Install

CSS Background Property Background Image

background-image Property Background Image


Element Background Image Element
Background Image
Background Image Size CSS Web

Developer
Background Image Size
Element " Background "
CSS
CSS3 Multiple-Background Background-Size
Browser Support

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:58

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

alert.png Image

alert.png
Image <p class=alert> Element Background

p.alert {
background-image: url(alert.png);
}
background-image Property Value url() Function
url() Image File Path

(-) CSS Background Image Property

<p> Element alert.png Image Browser Repeat

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:59

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Repeat background-repeat
Property
CSS
p.alert {
background-image: url(alert.png);
background-repeat: no-repeat;
}
background-repeat Property Value () repeat,
repeat-x, repeat-y no-repeat
repeat Default Value
repeat-x Image Repeat (Horizontal) repeat-y
Image Repeat (Vertical)
no-repeat Repeat

(-) CSS Background Repeat

Repeat
Background
Image Position background-position Property

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:60

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

p.alert {
background-image: url(alert.png);
background-repeat: no-repeat;
background-position: top right;
}
background-position Property Value Vertical Position Horizontal
Position top bottom
center
right left
center top right

(-) CSS Background Position

Position Name
- background-position:
10px 20px; Position Element Left 10px Element Top 20px

Background Property () () background-attachment

Background Image Screen Viewpoint Attach
background-attachment: fixed; Background

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:61

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Document Attach Scrollbar Content

Background
background-attachment: fixed;
Scroll Background Image

CSS Shorthand
Background Property


p.alert {
background: #FFFFDD url(alert.png) no-repeat top right;
}
background-color, background-image, background-repeat
background-position background Property Value
Value

Color Image Repeat Attachment Position

Value

Color Position
Value
Value Attachment

Property
p.alert {

background: #FFD url(book-project/res/alert.png) no-repeat 10px center;

border: 2px solid #DDA;
padding: 10px 10px 10px 50px;
border-radius: 5px;

}
border, padding, border-radius Property Property

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:62

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) CSS Alert

<p> Element Application Interface Warning Message

CSS

Text and Font

(Text Color) CSS
color Property Value
Background Color
(
) Alignment
text-align
Property Value left, right, center, justify

h1 {
color: #224477;
text-align: center;
}
p {
color: #555;
text-align: justify;
}

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:63

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Web

Screen
text-indent Property
p {
text-indent: 50px;
}
Underline text-decoration Property
text-decoration Property Underline
<a>
Element Browser Underline
Underline text-decoration Property Value none


a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
none underline text-decoration Property
Value

overline, line-through, blink

overline
blink


90'
line-through
none underline
(Font)
font-family Property Value
Font
p {
font-family: Arial, Helvetica, sans-serif;
}
Fall Back
Arial Font Browser <p> Element Arial
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:64

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Helvetica Helvetica sans-serif Font

Font
Browser Default Font

Document Font

p {
font-family: Padauk, Maynamr3, Myanmar Text;
}
Myanmar Text Quote
Font Name Space
Quote
Myanmar Text Font Windows 8 Default
Myanmar Font

Zawgyi Font Zawgyi
Font font-family: zawgyi-one;
Zawgyi

Font
Web Standards
Web Font
Unicode Consortium

Microsoft, Apple
Operating System
Unicode Font OS Google,
Wikipedia Website Website Unicode

Web Developer

Bold (
) Bold Bold
font-weight Property font-weight: bold; Bold
font-weight: normal; Bold <h1> <h2>
<h3> Heading Element Bold
font-weight: normal;
Italic (
) Italic Italic
font-style Property font-style: italic; Italic
font-style: normal; Italic

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:65

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Web Document Typography

Design Development Typography

Bold Italic Emphasis

Bold Emphasis
(-)

(-) Emphasis in Typography

Size
font-size Property CSS font-size
Size Unit px, pt, in, mm, em,
% pt, in, mm Unit Screen
Screen Resolution 1in 1 inch Screen Size
() px, em %
px
Unit Size " font-size: 13px;
13px

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:66

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

em % Relative Unit Size font-size:

200%; " Size Size "
font-size: 80%; " Size "
Parent Element

Element

Structure
...
<body>
<p>

<b> </b>

</p>
</body>
<body> Element Fix Size Element Relative Unit %

body {
font-size: 16px;
}
p {
font-size: 200%;
}
p b {
font-size: 40%;
}

/* Generally equal to 32px */

/* Approximately 12px (40% of 32px) */

CSS /*
*/
/* */

em Unit
% 1.5em "" 3em
"" " " "
font-size

Size
width: 30em; Element
() width: 50%;
em %
font-size Size Border Size, Width,
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:67

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Height, Margin, Padding

px Fixed Unit % em Relative Unit Web
Developer Relative Unite

User Setting Design Detail
Fixed Unit Browser Function
Zoom-In/Zoom-Out Accessibility
Relative Unit

Internet Explorer 6 Font Size px

Browser Zoom-Out
Internet Explorer 6 1%
Browser px
Zoom-In/Zoom-Out

Developer

Design Decision
Unit
px Unit () Mobile Web
em %
Typography Size Balance

Balance
(-)

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:68

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Typographic Scale

Text Property line-height

- font-size
16px 16px


Typography

line-height Size

body {
font-size: 16px;
line-height: 1.5em;
}
line-height 1.5em font-size line-height
line-height
line-height: 22px;

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:69

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Line Height in Typography

(-) Line Height

Line Height
Vertical Rhythm
Line Height
(-)

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:70

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Vertical Rhythm in Typography

Property letter-spacing word-spacing

letter-spacing

word-spacing
p {
letter-spacing: -1px;
word-spacing: 4px;
}
letter-spacing -1px

Minus


Typography
Measure

()
width Property

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:71

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

p {
font-size: 14px;
width: 30em;
}
(-)

(-) Measure in Typography

Styling Lists and Tables

<ul> <ol> Element Document List Bullet Number Style
list-style-type Property Marker
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:72

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Number
Bullet
Value
circle(), disc(), square(), decimal (1-2-3), lower-alpha (a-b-c),
lower-roman (i-ii-iii), upper-alpha (A-B-C), upper-roman (I-II-III)

armenian, georgian, greek Value
list-style-type <ul> disc Default <ol>
decimal Default Bullet Number
none List Bullet

none

List Property list-style-image List Marker Bullet

Number Icon Image Marker
ul {
list-style-image: url(arrow.png);
}
list-style-image Value background-image url()
<table> Element Style Property
border-spacing border-collapse
border-spacing Property Table Cell

border-collapse Table
Cell Border Style

(-) Table Style
table {
border-spacing: 1px;
background: #247;
}
td {
background: white;
border-collapse: collapse;
}
th {
color: white;
}

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:73

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) CSS Table Style

border-spacing: 1px; table border-collapse:

collapse; td Cell
Border Border Table Background Color Cell
Space Border Table
Border

CSS Property CSS HTML
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:74

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Document

External CSS
CSS Rule File css Extension ( style.css, layout.css, widget.css) HTML File
File File Content-Type Attribute
File Extension css Content-Type Attribute
CSS Style File
CSS File Web Document <link> Element
<link rel=stylesheet href=style.css>
<link> Element Favicon, RSS Resource

rel Attribute stylesheet href Attribute CSS File
URL Document style.css

<link> Element <head> Element
- Browser <body> Element
Style
<link> Element <head> Element
css Extension CSS Style File HTML Document
External CSS External CSS
() Style HTML Document Semantic Data Structure
CSS

() CSS Style File HTML Document
Style Reusable
Style File Style File

Document Effect
Cache
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:75

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Document Style File Browser

Cache Style File Document
Style File Cache
Performance External
CSS

Internal CSS
CSS HTML Document <style> Element
HTML Document Internal CSS

Document
Style External
CSS Style Reusable Internal CSS
<head> Element
<style>
body {
font-size: 16px;
line-height: 1.5em;
color: #222;
}
h1 {
font-size: 21px;
font-weight: normal;
}

</style>
<style> Element type=text/css Attribute
CSS Style Language type
Attribute Browser CSS

Inline CSS
Element style Attribute
Element

Inline CSS Element


Selector Property Value

<p style=color:red; font-style:italic;> </p>

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:76

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Inline CSS Style HTML

Element CSS HTML <font>
<center>
Style Element bgcolor, border
Style Attribute
Element Attribute
Inline CSS Javascript Interactive User Interface
Javascript Interface Interaction Inline CSS
Javascript

Inline CSS Javascript Document Style

Multiple Stylesheets and Cascading Order

Browser Style
Default External Style Internal Style Inline
Style Cascading Order
Style

Element External Style Rule Internal Style
Rule Internal Rule External Rule Overwrite Internal
Rule Inline Style Inline Style
Overwrite
HTML Document
External Style
External Style
Rule
Browser CSS Rule (Line-by
-Line) Rule
Rule Rule Overwrite <link>
Element
CSS File Style File
Style () Overwrite

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:77

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

/* First Declaration for <h3> */

h3 {
font-size: 18px;
text-align: center;
color: red;
}

/* Another Declaration for <h3> again */

h3 {
font-size: 21px;
text-align: left;
}
h3 Selector CSS Rule
font-size, text-align color font-size
text-align font-size
text-align color h3

h3 {
font-size: 21px;
text-align: left;
color: red;
}
Rule Priority

Element ID Class
[HTML]
<p id="note" class="note"> </p>
[CSS]
#note {
background-color: #FFFFDD;
}
.note {
background-color: yellow;
}

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:78

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Element ID Class
Select Class Select
ID Select background-color:
#FFFFDD; ID Selector Class Selector Priority
Priority Selector
#nav li a {
text-decoration: underline;
}
li a {
text-decoration: none;
}
li a Selector #nav li a Selector
text-decoration: underline; Priority
!important Marker Force
#nav li a {
text-decoration: underline;
}
li a {
text-decoration: none !important;
}
Priority #nav li a li a text-decoration: none !important
Marker text-decoration: none

Display Types
HTML Element Display Type
Block Inline

Block Element Parent Element (width) Element

width height Property
Element
<h1> <h6> <p> <ul> <li> Element Block
Element

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:79

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Inline Element Block Element Content

Element Content
Element Inline
Inline Element
Element <b> <i> <em>
<strong> Formatting Element <a> Element
Inline Element
Element Display Type display Property
- Inline
Element <a> Element Block
a {
display: block;
}
Block Element Inline display: inline;
Block Inline Inline Element
Block width, height Property
Inline Element

Block
<a> Element
a {
display: block;
width: 200px;
height: 40px;
text-align: center;
line-height: 40px;
text-decoration: none;
background-color: #519B7E;
color: #FFF;
border-radius: 20px;
}

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:80

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Link Button
display: block;

width height

Property border-radius Property
line-height
height
height line-height
CSS Element Horizontal Align
text-align Property
Vertical Align
Vertical Align center

Layouts
Web Document Layout Block Element
Element <div> Element <div> Element Block Element
Generic Element


Block Element Block
Element <div>
<div> Generic Element <span> Inline Element
Inline Element Element <span> Element

Layout
float Property float Property Block
(
) Property Block Element

Element float

Element (-)

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:81

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) CSS Layout

(-) (A) (B) A Block Element () width, height,

background-color Block width


(B) float Property width: 600px Main
Content float: left width:
200px Element Block

float: left

Element clear: both
float Element

float Element

float clear Block float

Element clear " Layout Design
Block

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:82

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) (B) Layout

<!doctype html>
<html>
<head>
<title>CSS Layout</title>
<style>
.wrap {
width: 800px;
margin: 20px auto;
}
.header {
height: 100px;
background: #cb1212;
}
.content {
width: 600px;
height: 400px;
background: #519b7e;
float: left;
}
.sidebar {
width: 200px;
height: 400px;
background: #1635a6;
float: left;
}
.footer {
height: 60px;
background: #333;
clear: both;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header"></div>
<div class="content"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
</body>
</html>

File CSS Internal <style> Element

Property
.wrap margin: 20 auto;
.wrap width: 800px .header .footer (-) width
Block Element width
Parent Width

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:83

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) CSS Layout Another method to clear floats

(-) float clear Parent Element

overflow: hidden;
Child Element
float clear Element clear:
both Layout

Box Model
Block Element width height border, margin padding
margin Element border padding
Element Element Content (-)

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:84

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Box Model

Block Box Property

#content {
width: 600px;
height: 380px;
border: 4px solid #519b7e;
margin: 20px;
padding: 10px;
background: #ffd;
}
width height Property
border Property
Element Border ()
border-size, border-style border-color
Border
Border Property border
Value Size, Style, Color
Size Unit
Style () solid ( ___ ), dotted ( .. ) dashed ( ----- )

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:85

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Style Color

Border Margin
margin Property
Block Top, Right, Bottom, Left margin: 20px;
20px
margin-top, margin-right, margin-bottom, margin-left
margin Value

- margin: 10px 20px 0 5px; margin-top: 10px; margin-right:

20px; margin-bottom: 0; margin-left: 5px; Value Top, Right,
Bottom, Left margin: 10px 20px; Value
Top/Bottom 10px
Left/Right 20px
margin-left margin-right Value
auto

Element Layout
margin: 20px auto; margin Top/Bottom 20px
Left/Right auto Layout



0

Border Element Content padding Margin

margin Property padding Property
padding-top, padding-right, padding-bottom, padding-left
margin
Value

margin Minus Value

- margin-top:
-5px; padding Minus Value

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:86

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

CSS Box Model

#content {
width: 600px;
height: 380px;
border: 4px solid #519b7e;
margin: 20px;
padding: 10px;
}
Element width: 600px;
Document 600px border: 4px solid
#519b7e; Browser Border width: 600px

Document margin: 20px; padding: 10px;

Document Element width:
600px;
668px - 600 (width) + 8
(border left/right) + 40 (margin left/right) + 20 (padding left/right) height: 380px

448px - 380 (height) + 8 (border left/right) +
40 (margin left/right) + 20 (padding left/right)
Layout Element

width height border,
margin, padding

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:87

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Content Width vs. Actual Width

Layout Box Property

Website Drop Down Menu

<!doctype html>
<html>
<head>
<title>CSS Drop-Down Navigation</title>
<style>
.nav, .sub {
font-family: Arial, Helvetica, sans-serif;
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
background: #cb1212;

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:88

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

height: 40px;
line-height: 40px;
text-align: center;
width: 160px;

}
.nav li a {
display: block;
text-decoration: none;
color: #fff;
}
.nav li a:hover {
background: #f00;
}
.nav > li {
border-right: 1px solid #f00;
float: left;
}
.sub {
display: none;
}
.nav > li:hover .sub {
display: block;
}
.sub li {
border-top: 1px solid #f00;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="#">Services &raquo;</a>
<ul class="sub">
<li><a href="#">Social Media</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li><a href="#">Products</a></li>
</ul>
</body>
</html>

HTML Structure <ul> Element Menu List
<li> Element <ul> Element Sub-Menu
Services &raquo; HTML Right Arrow Symbol ( )

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:89

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

CSS .nav, .sub Select <ul> list-style: none margin: 0;

padding: 0; Bullet
<li> Block Element <li>
.sub > li Select float: left; Child
Selector Direct Child <li> float <ul
class=sub> <li>
.sub display: none; display
Property Inline/Block none Value display:
none Sub Menu .nav >
li:hover .sub display: block; li Mouse

Sub Menu Javascript
Dorp-Down Menu

(-) CSS Drop-Down Menu

Menu
Main Menu border-left Sub Menu
border-top

Position Properties
Element Document
Regular Flow Element Regular Flow
CSS
position Property absolute top/bottom, right/left
Property
#box {
position: absolute;
top: 100px;
left: 150px; }

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:90

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

Element #box Document

Border top: 100px; left: 150px;
HTML Element Default Position Value static position Property

Value relative position:
absolute; Element Document Border
Document Border Parent Element
Parent Element position: relative;
[HTML]
<div id=out>
<div id=in> </div>
</div>
[CSS]
#out {
position: relative;
}
#in {
position: absolute;
top: 100px;
left: 100px;
}
#in Element top: 100px; left: 100px; #out
Border

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:91

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

(-) Static vs. Relative Position

Position Value fixed fixed absolute

absolute Position Element Document Attach
fixed Position Screen View Point Attach
background-attachment
position Property Layout
Layout Flexible
position Javascript User
Interface Element ( - Popup Calendar, Modal Dialog,
Tabbed Panel, etc...) Javascript User
Interface Element Property

z-index Property Element

Overlap Element


#box-one {
position: absolute;
top: 100px;
left: 100px;
width: 400px;
height: 280px;
background: #ff0;
z-index: 2;
http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:92

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

}
#box-two {
position: absolute;
top: 150px;
left: 150px;
width: 400px;
height: 280px;
background: #8a5;
z-index: 1;
opacity: 0.8;
}
#box-one z-index: 2 #box-two z-index: 1
#box-one
opacity Property Element Transparency Level
1 0 Element
0 1 Transparency Level

Conclusion
CSS CSS3, CSS
Framework, Grid System Responsive Web Design



CD Design
Template

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:93

ProfessionalWebDeveloperbyEiMaung

Uploaded by Mg Thar byaw

[ ]

Professional Web Developer

Fairway Web Creative Commons
Attribution-NonCommercial-ShareAlike 3.0 Unported




Soft Copy





Website

http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode

http://mlmtechnological.blogspot.com

TableofContentsandSampleChaptersPage:94