HTML & CSS(Myanmar Editing)

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Web Design

HTML and CSS အငးတာနကးေပၚက Web Page ေတြကုိ ဘယးလုိဖနးတီ့

World Wide Myanmar Training Centre (Myanmar) 12A/D1, Ground Floor, Thamine, Yangon-Insein Road, Yangon, Myanmar.

တညးေဆာကးသလဲဆုိတာကုိ ေဖားၿပရငး့ အေၿခခဵအက္ ဆုဵ့ HTML, CSS Web Programming စာအုပးတစးခုသာ ၿဖစးပါတယး။

Ph: 95-01-652936 (Malaysia) Lot 25, 2nd Floor, Jalan Lebuh Pudu, 50050 Kuala Lumpur, Malaysia.

Ph: 6-03-20260846 http://www.worldwidemyanmar.com World Wide Myanmar Training Centre, Cyber Café , Sales & Services

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET About

Author Mr. Min Aung "PlanetCreator", BCSc (Bachelor's Computer Science) Yangon, Myanmar, HDSE (Higher Diploma in Software Engineering), HDNE (Higher Diploma in Network Engineering), MCSE (Microsoft Certified System Engineer), PCIP ( Professional Critical Infrastructure Protection) Malaysia, has been part of the IT security industry for several years now. His published research covers exciting topics such as cracking into embedded devices, web hacking, eavesdropping techniques, magstripes, and credit card security.

Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews.

Your Feedback If you wish to contact us, for whatever reason, please feel free to email us at inquiry@worldwidemyanmar.com. We have a well-staffed email support system set up to track your inquiries. Suggestions for improvement are especially welcome.

Editor‟s Note Website files can be edited with software as simple as Notepad • There are many free and paid software programs available to make editing files easier. This software is of two types: WSYIWIG editors and HTML editors.

• WSYIWIG (what you see is what you get) editors allow you to work with an HTML document in its final display format. Although most modern editors have improved in this area, some have a tendency to create messy HTML or interfere with existing HTML code in the document.

• HTML editors are very helpful and are recommended. The most useful feature is colour-coding of tags to separate them from the text. Examples: • Dreamweaver (http://www.adobe.com) • Arachnophilia (http://www.arachnoid.com) • Micrsoft Expression Web (http://www.microsoft.com) • Komodo Edit (http://www.activestate.com/komodo_edit/) • …and many others; some are free, and some have a license fee.

In this tutorial, I want you all to do with simple Notepad Editor to improve your skill.

Page 2 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET မာတိကာ ၊ Table of Contents

အေၾကာငး့အရာ

စာမ္ကးႏွာ

Cover …………………………………………………………………………………………………………………..……

1

About ………………………………………………………………………………….……………………………………..

2

Table of Contents ………………………………………………………………………………………………………..

3

Web Design Concepts …………………………………………………………………………………………………..

6

Doctypes …………………………………………………………………………………………………………………….

7

HTML ႏွငးံ XHTML တုိ႔ကြဲၿပာ့မႈ ………………….………………………………………………………………………

11

History of HTML ………………………………………………………………………………………………………….

13

HTML …………………………………………………………………………………………………………………………

14

Source Code …………………………………………………………………………………………………….

17

HTML Colour …………………………………………………………………………………………………….

18

Link …………………………………….………………………………………………………………………….

25

Absolute Paths ……………………………………………………………………………………….

25

Relative Paths ………….…………………………………………………………………………….

25

TAG …………………………..………………………………………………………………………………………………

26

Comment …………………..………………………………………………………………………………………………

27

ELEMENTS …………………..………………………………………………………………………………………………

27

Attribute …………………..…………………………………………………………………………………………………

28

Class Attribute ………………………………………………………………………………………………….

28

ID Attribute …..………………………………………………………………………………………………….

29

Style Attribute ………………………….……………………………………………………………………….

30

Title Attribute …………………….……….…………………………………………………………………….

31

Building Web Page ………………………………………………………………………………………………………

32

HTML Editors ………………………………………………………………………………………………………………

33

HTML Head Elements …………………………………………………………………………………………………..

34

<head> ………….……………………………………………………………………………………………….

34

<title> …………………………………………………………………………………………………………….

34

<base /> ……………………………………………………………………….……………………………….

35

<link /> ………………………………………………………………………………………………………….

35

<meta /> ……………………………………………………………………………………………………….

35

<script> ………………………………………..……………………………………………………………….

35

<style> ……….………………………………………………………………………………………………….

36

HTML Body Elements ……………..…………………………………………………………………………………..

36

Forms ………….………………………………………………………………………………………………….

36

<form> | <button> | <label> | <option> | <fieldset> | <legend> |

Page 3 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<select> | <optgroup> | <textarea> Input Type

button | radio | reset | checkbox | image | range | submit | file | password | readonly | text

Tables ………..………………………………………………………………….……………………………….

46

<table> | <caption> | <thead> | <tfoot> | <col> | <colgroup> | <tr> | <th> | <td> Texts ……………………………………………………………………………………………………………….

55

Character Entities Anchors ……….………………………………………………………………………………………………….

56

<a> Name attribute Style Sheets ….………………………………………………………………………………………………….

58

<span> | <div> Line Breaking ….………………………….…………………………………………………………………….

62

<br /> | <nobr> List Elements …………………………………………………………………………………………………….

63

<dl> | <ol> | <ul> | <menu> | <dir> | <li> | <dd> | <dt> Multimedia ……………………………………………………………………………………………………….

68

<img> | <bgsound> | <sound> | <area> | <map> | <object> Block Formatting ..…………………………………………………………………………………………….

74

<address> | <Hx> | <p> | <blockquote> | <marquee> | <pre> | <center> <multicol>

Character Formatting .………………………………………………………………………………………. <abbr> | <cite> | <font> | <q> | <spell> | <sup> | <b> | <code> |

84

<i> | <s> | <strike> | <tt> | <big> | <dfn> | <samp> | <strong> | <u> | <blink> | <em> | <kbd> | <small> | <sub> | <var> Embedded Funtionality .……………………………………………………………………………………. <embed> | <noembed> | <script> | <noscript> | <iframe> | <applet> |

94

<param> Revision Control .…………….………………………………………………………………………………. <del> | <ins> Ruby Elements ……………….………………………………………………………………………………. <ruby> | <rb> | <rt> | <rbc> | <rtc> Frameset Elements ……………..……………………..……………………………………………………………….. <frameset> …….………………………………………………………………………………………………. <frame> ………...………………………………………………………………………………………………. <noframe> …….…….………………………………………………………………………………………….

HTML Exercise …………………………………………………….…………………………………………………….

Page 4 of 197

99 100 103 104 105 105 106

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

………………………………………..…….…~~~ CSS ~~~………………………………………………………….

112

Introduction CSS ………………………………………………………………………………………………………….

112

Appling ……………………………………………………………………………………………………………………….

113

Internal CSS …….……..……………………………………………………………………………………….

113

External CSS ………………..….……………………………………………………………………………….

113

Inline CSS ………………..……………………………………………………………………………………….

114

Syntax . Structure ………………………………………………………………….…………………………………….

115

Value …………………………………..……………………………………………….…………………………………….

115

Property ……………………………………………………………………………….…………………………………….

116

Selector ……………………………………………………………………………….…………………………………….

116

Class Selector …………………………………………………………….…………………………………….

116

ID Selector ………………………..……………………………………….…………………………………….

118

Code Format …………..…………………………………………………………….…………………………………….

119

Comment …………………….……………………………………………………….…………………………………….

120

Colors and Backgrounds …………………….………………………………….…………………………………….

121

Font …………….…………….……………………………………………………….…………………………………….

130

Text …………………….…………….……………………………………………….…………………………………….

138

Link …………………….…………….……….……………………………………….…………………………………….

143

Grouping of elements (class and id) …..………………………………….…………………………………….

150

Grouping of elements (span and div) ….……………….……………………………………………………….

153

The box model …………………….……………………………………………….…………………………………….

156

Margin …….………………….……………………………………………………….…………………………………….

159

Padding .…………………….……………………………………………………….…………………………………….

160

Borders …………..………….……………………………………………………….…………………………………….

161

Height and Width …………………….…………………………………………….…………………………………….

166

Floating ..…………………….……………………………………………………….…………………………………….

167

Positioning of Elements ………………………………………………………….…………………………………….

172

z-index (Layers) ……………………..…………………………………………….…………………………………….

177

Building Website with HTML + CSS ………………………………………….…………………………………….

180

Page 5 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET Web Design Concepts

-----> HTML

နဲ႔

CSS Web Programming

ေလ့ေတြကုိ

မစခငးမွာ

မိမိတုိ႔ဘကးက

ၾကိဳတငးၿပငးဆငးရမညးံ

အပုိငး့ေလ့ေတြ သိထာ့သငးံတဲ႔ အခ္ကးအလကးေတြကုိ အရငးဆုဵ့ေဖားၿပလုိကးပါတယး။ ဘယးလုိသိသငးံတဲ႔ အပုိငး့ေတြလဲဆုိရငးေတာံ ကၽြနးေတားတုိ႔ Programming မွာ Coding ေရ့တာက အစ Variables မွနးမွနးကနးကနးေပ့ရၿခငး့၊ Code ေတြကုိ Tab ခုနးသငးံတဲ႔ေနရာေတြကုိ Tab နဲ႔ခြဲၿခာ့ထာ့ၿပီ့၊ အထူ့ၿပဳထာ့တဲ႔ ေနရာေလ့ေတြကုိ ေနာကးထကး Programmer ေသားလညး့ေကာငး့ သို႔မဟုတး မိမိကုိယးတုိငး ၿပနးလညးၿပငးဆငးမယး ဆုိရငးလြယးကူေအာငး Comment ေလ့ေတြထာ့သငးံရငး ထာ့ေပ့ရပါတယး။ သငးံေလ္ားတဲ႔ Variable ေပ့တယးဆုိတာကေတာံ p.center {text-align: center} ဆုိတဲ႔ေနရာမွာ p.test {textalign: center} လုိ႔ေရ့ရငးလညး့ ရပါတယး။ ဒါေပမဲ႔ ၂ငး့ CSS Coding ထဲက Variable ေၾကၿငာထာ့တဲ႔ test ဆုိတဲ႔ id class selector ဟာ သူ႔ရဲ႕ Value ၿဖစးတဲ႔ center နဲ႔ မအပးဆကးပါဘူ့။ မလုိကးဖကးတဲ႔ Variable ကုိ Assign လုပးခဲ႔မယးဆုိရငး ေနာကးပုိငး့ ကၽြနးေတားတုိ႔ အဲ႔ Variable ကုိယူသုဵ့ရငး လြဲမွာ့သြာ့တတးပါတယး။ ေနာကးတစးခုက Captical & Small letter

ေတြပါပဲ။ ကၽြနးေတားတုိ႔ Programming ေရ့သာ့တဲ႔ေနရာမွာ

မိမိတုိ႔မွာ အေလံအက္ငးံေလ့တစးခုၿဖစးေနေအာငး ၿပဳလုပးထာ့ရမွာက ဖုိငးေတြ၊ Variable ေတြကုိ အၾကီ့သုဵ့ရငးသုဵ့ သုိ႔မဟုတးပါက အေသ့ေတြပဲ သုဵ့ရငးသုဵ့ပါ။ ေတားေတားမ္ာ့မ္ာ့ကေတာံ file ရဲ႕ အမညးေတြကုိ အေသ့နဲ႔သုဵ့ၾကပါတယး။ အၾကီ့အေသ့က တစးခ္ဳိ႕ Case Sensitive ၿဖစးတဲ႔ေနရာေတြမွာ အရမး့ကုိ မွာ့တတးပါတယး။ မွာ့သြာ့တဲ႔ Error Syntax ကုိ

Trace

လုိကးတဲ႔ေနရာမွာ

ဒီလုိအေသ့အဖြဲေလ့ေတြက

အၿဖစးမ္ာ့တတးသလုိ

ကႊ္မး့က္ငးတဲ႔

Programmer

တစးေယာကးအေနနဲ႔ လုဵ့ှကုိမၿဖစးသငံးပါဘူ့။ ထုိ႔နညး့အတူ folder or file အမညးေတြမွာ „s‟ ထညးံမထညးံဆုိတာ အရငးဆုဵ့ ဆုဵ့ၿဖတးထာ့သငးံပါတယး။ services.html ကုိသုဵ့မလာ့၊ service.html ကုိသုဵ့မလာ့ဆုိတာ မိမိကုိယးကုိ အရငးဆုဵ့ၿဖတးခ္ကးေပ့ရပါတယး။ ဒီလုိပဲ ကၽြနးေတားတုိ႔ စၿပီ့မေရ့ခငးမွာ မိမတ ိ ုိ႔ရဲ႕ လုပးငနး့ (Project) ကုိအၿခာ့ ဘယး Folder ၊ ဘယး File နဲ႔မွ မေရာသြာ့ေအာငး

ေနာကးပုိငး့မွာ

သီ့သနး႔ေဆာကးထာ့သငးံပါတယး။

အလြယးတကူၿပနးရွာလုိ႔ရေအာငး

Folder

၂ငး့ Folder ထဲမွာပဲ မိမိတုိ႔ရဲ႕ Program File

မ္ာ့ကုိ

ကြဲကြဲၿပာ့ၿပာ့

ေတြ၊ Image ေတြ၊ Text

ေတြကုိသိမး့ဆညး့ ထာ့ရမွာၿဖစးပါတယး။

Page 6 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

ဒီနညး့လမး့က

DREAM IT, CODE IT BY PLANETCREATOR .NET

ကၽြနးေတားတုိ႔

ငယးငယးက

လကးေရ့လွစာအုပးမွာ

စာလုဵ့ှုိငး့ှုိငး့ေလ့ေတြနဲ႔

ေရ့ၿပီ့

ေလံက္ငးံသလုိပါပဲ။ Coding ေရ့ထာ့တာေတြ ရွငး့လငး့ေၿပၿပစးမႈက Programmer တစးေယာကးရဲ႕ Skill တစးခုပါပဲ။

HTML & XHTML HTML ကုိသုဵ့ေတာံမယးဆုိရငး HTML အၿပငး XHTML နဲ႔ ဒီႏွစးခုၾကာ့မွာ ဘယးဟာကုိ သုဵ့ရငးေကာငး့မလဲ၊ သူတုိ႔ႏွစးခုက ဘာေတြကြဲၿပာ့ၿခာ့နာ့သလဲဆုိတာ သိခ္ငးၾကပါလိမးံမယး။ ဒါတငးမက doctypes နဲ႔ DTDs ေတြက မိမိတုိ႔ကိုပုိၿပီ့ရႈပးေထြ့ေစပါတယး။

ဘယးလုိပဲၿဖစးေစ

ေနာကးဆုဵ့မွာေတာံ

ကၽြနးေတားတုိ႔အၿမဲသုဵ့ေနတဲ႔

Internet

စာမ္ကးႏွာေပၚက အေၿခခဵ Web Page Structure ေတြကုိေတာံ နာ့လညးခ္ငးၾကပါလိမးံမယး။ ဒီအပုိငး့ေတြကုိေလံလာၿဖစးရငး သငးတုိ႔ HTML နဲ႔ XHTML ေတြရဲ႕ အဆငးံၿမငးံ concepts ေတြ ေကာငး့ေကာငး့ နာ့လညး သြာ့ပါလိမံးမယး။

Doctypes Doctypes ဆုိတာက ကၽြနးေတားဆုိ႔ေရ့သာ့ထာ့တဲ႔ Markup Lanuage ဟာ ဘယးလုိ Version အမ္ဳိ့အစာ့ ၿဖစးတယးဆုိတာ Web Browser အာ့ အသိေပ့ေၿပာၾကာ့ထာ့တာၿဖစးၿပီ့၊ Web Page Source ရဲ႕ အေပၚဆုဵ့အပုိငး့မွာ ရွိေန (ရွိေနသငးံ) ပါတယး။ သူ႔ကုိအသိမ္ာ့တာကေတာံ Document Type Definition သုိ႔မဟုတး DTD ဆုိၿပီ့ လူသိမ္ာ့ပါလိမံးမယး။ DTD က Web Browser က မွနးမွနးကနးကနးေဖားၿပႏုိငးဖုိ႔အတြကး Markup ေတြရဲ႕ စညး့ကမး့ေတြကုိ ခ္မွတးေပ့ပါတယး။

Page 7 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS Web

Page

DREAM IT, CODE IT BY PLANETCREATOR .NET

တစးခုစတငးၿပီ့ေရ့တုိငး့မွာ

Doctype

ကုိထညးံေရ့ရမယးဆုိရငး

အခ္ိနးၾကာမယး၊

မွာ့သြာ့ႏုိငးတဲ႔အတြကး Web Editor ေတားေတားမ္ာ့မ္ာ့က ၂ငး့တုိ႔အာ့ အလိုအေလ္ာကးထညးံသြငး့ထာ့တတးပါတယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype ကုိစတငးေရ့သာ့ေတာံမယးဆုိရငး <!DOCTYPE ဆု​ုိၿပီ့ ၂ငး့အာ့ စာလုဵ့ၾကီ့နဲ႔ေရ့သာ့ရပါမယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ေနာကးတစးခုက HTML ပါ (အကယး၍ XHTML ဆုိရငးေတာံ လညး့ HTML ပါပဲ)။ ဆုိလုိတာက ဒီ Document အတြကး HTML ဆုိတာက root element တစးခုၿဖစးေၾကာငး့နဲ႔ validation အတြကးသာၿဖစးပါတယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

PUBLIC ဆုိတာကေတာံ ကၽြနးေတားတုိ႔ရဲ႕ Browser အတြကး DTD က အမ္ာ့နဲ႔ သကးဆုိငးတဲ႔ resource ၿဖစးေၾကာငး့ ေရ့ထာ့တာၿဖစးပါတယး။ အကယး၍ မိမိက XHTML သုိ႔မဟုတး HTML ရဲ႕ သကးမွတးထာ့တာေတြကုိ ေက္ားလြနးၿပီ့သုဵ့ခ္ငးတယးဆုိရငးေတာံ

ကုိယးပုိငး

DTD

ကုိဖနးတီ့ရပါလိမးံမယး။

ဒါဆုိရငး

ကုိယးပုိငး

element

ေတြကုိဖနးတီ့တဲ႔အခါ ဒီ Document ဟာ custom DTD ၿဖစးေၾကာငး့ validate လုပးတဲ႔အခါ သိပါလိမးံမယး။ ဒီအတြကး PUBLIC ေနရာမွာ SYSTEM ဆုိတာကုိေၿပာငး့လဲ ေရ့သာ့ေပ့ရပါတယး။ ဒါေပမဲ႔ ကၽြနးေတားတုိ႔ေတြ ဒီလုိသုဵ့တာေတြကုိ ေတြ႔ရခဲပါတယး။ ေတားေတားမ္ာ့မ္ာ့လူေတြကေတာံ HTML နဲ႔ XHTML တုိ႔ရဲ႕ သတးမွတးခ္ကးေဘာငးအတြငး့မွာပဲ သုဵ့ၾကတာမ္ာ့ပါတယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ေနာကးထကးတစးခုကေတာံ ထိနး့သိမး့ေစာငးံေရွာကးသူကုိ ေတားေတားမ္ာ့မ္ာ့

Public

Identifier

ေၿပာထာ့တာၿဖစးပါတယး။

သိထာ့ၾကပါလိမးံမယး။

သူက

ဆုိတာပဲၿဖစးတယး။ W3C

Public

ဆုိရငး

DTD

ရဲ႕

Web Programming

Identifier

ၿဖစးၿပီ့

ပုိငးရွငး

သုိ႔မဟုတး

ေလံလာသူေတြ

မိမိေရ့ထာ့တဲ႔

Language

အဆငးံကုိေဖားၿပေပ့ထာ့တာၿဖစးပါတယး (XHTML 1.0)။ မိမိေရ့သာ့မညးံ Web Page ထဲက content နဲ႔ေတာံ မသကးဆုိငး ပါဘူ့။ ေနာကးတစးခါ ေရ့သာ့ထာ့တဲ႔ Language ပါပဲ။ English ဘာသာနဲ႔ ေရ့သာ့ထာ့တာၿဖစးတဲ႔အတြကး EN ဆုိၿပီ့ အတုိေကာကးေဖားၿပရၿခငး့ၿဖစးပါတယး။ မွတးခ္ကး။

။ အကယး၍ DOCTYPE မွာ SYSTEM ဆုိတဲ႔ စာသာ့တစးခုပါမယးဆုိရငးေတာံ အခု Public Identifier က ပ္ကးသြာ့ပါလိမးံမယး။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 8 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS ေနာကးဆုဵ့တစးခုကေတာံ

DREAM IT, CODE IT BY PLANETCREATOR .NET URL(Uniform

Resources

Locator)

ပဲၿဖစးတယး။

ဒီ

URL က

DTD

ရဲ႕

ေနရာလမး့ေၾကာငး့ကုိေဖားၿပေပ့ထာ့တာၿဖစးၿပီ့ ကုိပုိငး Website မွာေၿပာငး့လဲတငးခ္ငးရငးေတာံ ယခု DTD ကုိ download လုပးၿပီ့ သုဵ့ႏုိငးပါတယး။ ဒါေပမဲ႔ ဒီလုိအသုဵ့ၿပဳမႈကုိေတာံ လုဵ့ှမလုပးသငံးပါဘူ့။ ေအာကးက ဇယာ့ေလ့ကေတာံ W3C က အၾကဵၿပဳထုတးေပ့ထာ့တဲ႔ doctypes ေတြပဲၿဖစးပါတယး။ non-strict elements ေတြကေတာံ # APPLET - Java applet # BASEFONT - Base font change # CENTER - Centered block # DIR - Directory list # FONT - Font change # FRAME - Frame # FRAMESET - Frameset # IFRAME - Inline frame # ISINDEX - Input prompt # MENU - Menu list # NOFRAMES - Frames alternate content # S - Strike-through text # U - Underlined text Doctype

Description

<!DOCTYPE html PUBLIC "-//W3C//DTD

HTML 4.01 Strict allows the inclusion of structural and semantic

➥ HTML 4.01//EN"

markup, but not presentational or deprecated elements such as

"http://www.w3.org/TR/html4/ ➥strict.dtd">

font, framesets are not allowed.

<!DOCTYPE html PUBLIC "-//W3C//DTD

HTML 4.01 Transitional allows the use of structural and semantic

➥ HTML 4.01 Transitional//EN"

markup as well as presentational elements (such as ,

"http://www.w3.org/TR/html4/ ➥loose.dtd">

which are deprecated in Strict. Framesets are not allowed.

<!DOCTYPE html PUBLIC "-//W3C//DTD

HTML 4.01 Frameset applies the same rules as HTML 4.01

➥ HTML 4.01 Frameset//EN"

Transitional, but allows the use of frameset content.

"http://www.w3.org/TR/html4/ ➥frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Strict, like HTML4.01 Strict, allows the use of

➥ XHTML 1.0 Strict//EN"

structural and semantic markup, but not presentational or

"http://www.w3.org/TR/xhtml1/DTD ➥xhtml1-strict.dtd">

Page 9 of 197

deprecated elements (such as font, framesets are not allowed.

Unlike HTML 4.01, the markup must be written as well-formed

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Transitional, like HTML4.01 Transitional, allows the

➥ XHTML 1.0 Transitional//EN"

use of structural and semantic markup as well as presentational

"http://www.w3.org/TR/xhtml1/DTD

elements (such as, which are deprecated in Strict; framesets are

➥xhtml1-transitional.dtd">

not allowed. Unlike HTML 4.01, the markup must be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.0 Frameset ဆုိတာ XHTML 1.0 Transitional နဲ႔

➥ XHTML 1.0 Frameset//EN"

တူပါတယး။ ဒါေပမဲ႔သူက frameset ပါသုဵ့ဖုိ႔အတြကးပါ။

"http://www.w3.org/TR/xhtml1/DTD/ ➥xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD

XHTML 1.1 က XHTML 1.0 Strict အာ့ၿပနးလညး ၿပငးဆငးထာ့

➥ XHTML 1.1//EN"

တာပဲၿဖစးပါတယး။

"http://www.w3.org/TR/xhtml11/DTD/

ထူ့ၿခာ့မႈကေတာံ

➥xhtml11.dtd">

Korean

အေၿခခဵ

XHTML

1.0

ကၽြနးေတားတုိ႔အေနနဲ႔

characters

ေတြအတြကး

ေတြ

Chinese, Ruby

နဲ႔တူၿပီ့

သူ႔ရဲ႕

Japanese,

and

ကုိသုဵ့တဲ႔အခါ

Module

ထညးံမယးဆုိရငး ထညးံသြငး့အသုဵ့ၿပဳလုိ႔ရပါတယး။

<!DOCTYPE HTML PUBLIC "-//W3C//DTD

HTML

➥ HTML 3.2 Final//EN">

မတုိကးတြနး့ပါဘူ့။ ေရွ့က္လြနး့သြာ့ပါၿပီ။

<!DOCTYPE HTML PUBLIC "-//IETF//DTD

HTML

➥ HTML 3.0//EN">

မတုိကးတြနး့ပါဘူ့

<!DOCTYPE HTML PUBLIC "-//IETF//DTD

HTML

➥ HTML 2.0 Level 2//EN">

မတုိကးတြနး့ပါဘူ့။ ေဖားၿပေပ့ရုဵသီ့သနး႔ပါပဲ။

3.2 3.0 2.0

အတြကး အတြကး အတြကး

Doctype

ၿဖစးၿပီ့

အခုအခ္ိနးမွာေတာံ

သုဵ့ဖုိ႔

Doctype

ၿဖစးၿပီ့

အခုအခ္ိနးမွာေတာံ

သုဵ့ဖုိ႔

Doctype

ၿဖစးၿပီ့

အခုအခ္ိနးမွာေတာံ

သုဵ့ဖုိ႔

ဒီေတာံ မိမိတုိ႔ေပ့တဲ႔ Doctype အေပၚမွာမႈတညးၿပီ့ေတာံ Browser က မိမိတုိ႔ေရ့သာ့ထာ့တဲ႔ Web Page ကုိ Quirks Mode, Standard Mode, Almost Standard Mode စသညးၿဖစးေပၚေစပါတယး။ 1990 ေႏွာငး့ပုိငး့က Web Page ေတားေတားမ္ာ့မ္ာ့မွာ သုဵ့ၾကပါတယး။ ဒီ Mode မွာ Browser က ပုဵမွနး Web ပုဵစဵ မဟုတးပဲ Web page ရဲ႕ ဘာသာအမ္ဳိ့အစာ့ ေပၚမွာမႈတညးၿပီ့ေတာံ ေၿပာငး့လဲေပ့ၿခငး့ၿဖစးပါတယး။ ဒါကလညး့ Browser အေပၚမွာမႈတညးၿပီ့ ကြဲၿပာ့ပါတယး။ IE 6,7 မွာေတာံ Quirks Mode က အရငး IE Version 5.5 ပုဵစဵပါပဲ။ သုိ႔ေပမဲ႔ အၿခာ့ Browser ေတြမွာေတာံ Almost Standars Mode မွ ေကာကးႏုတးခ္ကးတုိ႔ပါှငးပါတယး။ Standard Mode ကေတာံ Browser ေတြက Document အထဲမွာပါတဲ႔ အတုိငး့ အတိအက္ ပုဵေဖားေပ့ေပမဲ႔ အခ္ိဳ႕အပုိငး့ေတြမွာေတာံ Browser ရဲ႕ ေဆာကးရြကးခ္ကးအေပၚမွာ မႈတညးေနပါေသ့တယး။ Firefox, Safari နဲ႔ Opera (Version 7.5 ႏွငးံအထကး) ေတြက Almost Standars Mode ေတြပဲၿဖစးကာ CSS မွာ ခ္ထာ့တဲ႔ Specification အတုိငး့မဟုတးပဲ အရငးအေဟာငး့ ပုဵစဵေတြမွာ table cells ေတြအတြကး ေၿပာငး့လဲေဖားေဆာငးေပ့ပါတယး။

တစးနညး့အာ့ၿဖငးံ

ပုဵစဵက္ေအာငး

ဖနးတီ့ေပ့တယးေပါ႔။

vertical အၿဖစး စာမ္ကးႏွာေတြ

ရြဲ႕ေစာငး့ေနတာေတြကုိ Fix လုပးေပ့တဲ႔ သေဘာပဲ။ Internet Explorer versios 6 နဲ႔ 7 ကေတာံ အဲ႔လုိပုဵစဵမဟုတးပါဘူ့။ ဥပမာအေနနဲ႔ ၾကညံးမယးဆုိရငး

Page 10 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

IE 6 မွာ Browser အာ့ W3C ရဲ႕ Box Model calculations အရ Standard Mode အၿဖငးံ ၿဖစးေပၚေစၿပီ့ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ဒီအေပၚက Doctype မွာဆုိရငးေတာံ W3C ရဲ႕ Method ကုိမသုဵ့ပဲ အရငးအေဟာငး့ကုိပဲ သုဵ့ပါလိမးံမယး။ ဒါဟာ Quirks Mode နဲ႔ Standard Mode တုိ႔ရဲ႕ ကြဲၿပာ့မႈပါပဲ။

HTML ႏွငးံ XHTML တုိ႔ ကြဲၿပာ့မႈ

HTML ကုိေလံလာေနတဲ႔သူေတြက XHTML နဲ႔ အတူတူပဲ။ ခကးခဲမႈကုိေတြ႔ရမွာမဟုတးပါဘူ့။ ဒါေပမဲ႔ သူတုိ႔ႏွစးခုရဲ႕ ကြဲၿပာ့တဲ႔ အဓိက အခ္ကးေလ့ေတြကုိေတာံ သိထာ့သငံးပါတယး။ အဓိကအာ့ၿဖငးံThe Most Important Differences:

* XHTML elements must be properly nested * XHTML elements must always be closed * XHTML elements must be in lowercase * XHTML documents must have one root element

HTML မွာ တစးခ္ဳိ႕ tag ေတြအာ့ ေရွ႕ေနာကး မညီလညး့ အသုဵ့ၿပဳလုိ႔ရပါတယး။ HTML

<b><i>This text is bold and italic</b></i>

အေပၚမွာၾကညံးမယးဆုိရငး <b> ဆုိတဲ႔ open tag က ေရွ႕ဆုဵ့မွာ ရွိေနၿပီ့ </b> ဆုိတဲ႔ closing tag က ေနာကးဆုဵ့မွာ ေရာကးေနပါတယး။ ေရွ႕ေနာကးအစီအစဥးအတုိငး့မဟုတးဘူ့ေပါ႔။ ဒီလုိပုဵစဵကုိ HTML မွာသုဵ့လုိ႔ရတယးေပါ႔ … ဒါေပမဲ႔ XHTML မွာေတာံ အဲ႔လုိမရပါဘူ့။ XHTML

<b><i>This text is bold and italic</i></b>

ဒီေလာကးဆုိရငး XHTML ရဲ႕ Proper Nested အေၾကာငး့ကုိ သိေလာကးပါၿပီ့။ ဥပမာ တစးခုထပးၾကညးံလုိကးပါ။ XHTML Nested

<ul> <li>Coffee</li> <li>Tea

Page 11 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS အမွာ့(X)

DREAM IT, CODE IT BY PLANETCREATOR .NET

<ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>

XHTML

<ul>

Nested

<li>Coffee</li>

အမွနး(√)

<li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>

ေနာကးတစးခုက XHTML Elements တုိငး့မွာ closing tag ေတြအၿမဲရွိေနရပါမယး။ XHTML

<p>This is a paragraph

Closed

<p>This is another paragraph

အမွာ့(X) XHTML

<p>This is a paragraph</p>

Closed

<p>This is another paragraph</p>

အမွနး(√) Empty Elements ေတြကုိလညး့ XHTML မွာ ပိတးဖုိ႔လုိပါတယး။ XHTML

A break: <br>

Empty

A horizontal rule: <hr>

Elements

An image: <img src="happy.gif" alt="Happy face">

အမွာ့(X) XHTML

A break: <br />

Empty

A horizontal rule: <hr />

Elements

An image: <img src="happy.gif" alt="Happy face" />

အမွနး(√)

Page 12 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေနာကးတစးခုကေတာံ XHTML Elements တုိငး့မွာ Tag name ေတြ၊ Attribute ေတြအာ့လုဵ့က lower case ေတြၿဖစးရပါမယး။ HTML မွာေတာံ ၂ငး့ Elements ေတြက အၾကီ့အေသ့ ကိစၥမရွိပါဘူ့။ XHTML

<BODY>

Lowercase

<P>This is a paragraph</P>

အမွာ့(X)

</BODY>

XHTML

<body>

Lowercase

<p>This is a paragraph</p>

အမွနး(√)

</body>

ဒါေၾကာငးံ

XHTML

က

Case

Sensitive

ၿဖစးတယးလုိ႔ဆုိႏုိငးပါတယး။

HTML

မွာေတာံ

<P>…</p>

အဲ႔လုိၿဖစးလုိ႔လညး့ဘာမွမၿဖစးပါဘူ့။ ေရ့လုိ႔ရပါတယး။ ဒီလုိပဲ XHTML မွာ Root Element ၿဖစးတဲ႔ <HTML> ရဲ႕ အတြငး့ထဲမွာပဲ Child Elements ေတြအာ့လုဵ့က အစုဵလုိကးေတြရွိေနရပါမယး။ XHTML

<html>

Root

<head> ... </head>

Element

<body> ... </body> </html>

XHTML

<!DOCTYPE Doctype goes here>

Doctype

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head>

<body> <p>This is XHTML</p> </body> </html>

XHTML ရဲ႕ Doctype မွာ html ကုိစေရ့ရငး <html xmlns="http://www.w3.org/1999/xhtml"> ဆုိၿပီ့ <html> tag ကုိေရ့ မၿဖစးမေနေရ့ေပ့ရပါတယး … ဒါမွ W3C validate ၿဖစးမွာပါ။

Page 13 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ကဲ… ဒါကေတာံ XHTML နဲ႔ HTML တုိ႔ရဲ႕ အဓိကက္တဲ႔ ကြဲၿပာ့မႈေလ့ေတြပါပဲ … ဒီေလာကးဆုိရငးေတာံ ေရွ႕ဆကးသြာ့လုိ႔ရပါၿပီ …..

History of HTML European Organization for Nuclear Research (CERN) မွာ လုပးကုိငးေနတဲ႔ ႐ူပေဗဒပညာရွငး Tim Berners-Lee ကစတငးခဲ႔ပါတယး။ 1989 ခုႏွစးနဲ႔ 1991 ခုႏွစး ၀ ႏွစးခနး႔အတြငး့မွာ World Wide, Web Page ေတြ ဖနးတီ့ဖုိ႔အတြကး HTML (hypertext markup language), HTTP (HyperText Transfer Protocol) နဲ႔ URLs (Universal Resource Locators) တုိ႔ကုိဖနးတီ့ခဲ႔တဲ႔ Father of the Internet တစးဦ့ၿဖစးပါတယး။ ရုိ့ရုိ့စာသာ့ေတြပဲၿဖစးတဲ႔ Text ေတြမွာ tag ေတြကုိသုဵ့ၿပီ့ ပုဵနဲ႔စာ ေတြကုိ browser ကေနၾကညံးရႈႏုိငးေအာငး ဖနးတီ့ထာ့တာၿဖစးပါတယး။ ဒါကုိ Hypertext ဆုိၿပီ့ေခၚဆုိခဲ႔ကာ အထဲက ရုိ့ရုိ့စာသာ့နဲ႔ tag ေတြနဲ႔ကုိ <> လုပးထာ့တာကုိ Markup လုပးထာ့တာၿဖစးပါတယး။ TBL နဲ႔ တြဲဖကးလုပးကုိငးခဲ႔တဲ႔သူလညး့ရွိပါတယး။ သူကေတာံ CERN ရဲ႕ data systems engineer Robert Cailliau ပါ။

HTML အေၾကာငး့

HTML ကုိေလံလာေတာံမယးဆုိရငး

သူတုိ႔မွာပါှငးတဲ႔ အေခၚအေှၚေလ့ေတြ နဲ႔ ၂ငး့တုိ႔ရဲ႕ အေၾကာငး့ကုိ

အရငးဆုဵ့သိထာ့သငးံပါတယး။ အစြနး့ကုနးေၿပာရမယးဆုိရငး Text နဲ႔ Tag ဆုိတာကုိေတာငး ၿမနးမာလူမ္ဳိ့ေတြ အတြကး အသဵထြကးေလ့ေတြ ကြဲကြဲၿပာ့ၿပာ့ေခၚဆုိကာ မေရာေထြ့ဖုိ႔လုိပါတယး။ HTML

HTML ဆုိတာ (HyperText Markup Language) ရဲ႕ အတုိေကာကးပဲၿဖစးပါတယး။ HTML သညး CSS ႏွငးံ JavaScript ကဲ႔သုိ႔ပငး Webserver ဆီသုိ႔ဆကးသြယးစရာမလုိပဲ browser မွ တုိကးရိုကး Interpret လုပးႏုိငးသညးံအတြကး အၿခာ့ server side မ္ာ့ၿဖစးသညးံ ASP, PHP ေတြထကး ပုိ၍ ၿမနးဆနးသညး။

HTML ကုိ Static HTML နဲ႔ Dynamic HTML ဆုိၿပီ့ ႏွစးမ္ဳိ့ခြဲၿခာ့ႏုိငးတယး … Static ဆုိတာကေတာံ ပုဵေသေပါ႔။ ကၽြနးေတားတုိ႔က .html ကုိ Web Server အေပၚကုိ Upload လုပးၿပီ့ၿပီဆုိတာနဲ႔ Internet အေပၚမွာ ၿပနးလညးၿပငးဆငးဖုိ႔ မလြယးကူေတာံပါဘူ့။ Static HTML ကုိေတာံ Individual နဲ႔ အေသ့စာ့ စီ့ပြာ့ေရ့လုပးငနး့ေလ့ေတြက ၂ငး့တုိ႔ရဲ႕ Profile ေတြနဲ႔ လုပးငနး့ေတြအေၾကာငး့ကုိ လႊငးံတငးဖုိ႔အတြကး အသုဵ့ၿပဳၾကပါတယး။ ဒါေပမဲ႔ Dynamic HTML ဆုိရငးေတာံ အဲ႔လုိမဟုတးေတာံဘူ့ အငးတာနကး Webserver အေပၚတငးၿပီ့ အလြယးတကူ ၿပနးလညးၿပငးဆငးမႈေတြၿပဳလုပးႏုိငးတယး။ အၿမဲတမး့ Update လုပးႏုိငးတယး။ သူ႔ကုိေတာံ Blogging, Ecommerce, Banking, News and Multimedia စသညးံ အၿမဲတမး့ ၿပငးဆငးဖုိ႔အတြကး လုိအပးတဲ႔ Website ေတြမွာ အသုဵ့ၿပဳၾကတယး။

Page 14 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

သူ႔ရဲ႕ structure ကေတာံ <HTML> <HEAD> <TITLE>HTML</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TD>Hello</TD></TR> <TR><TD>World</TD></TR> </TABLE> </BODY> </HTML>

ဒါက HTML ရဲ႕ ဖြဲ႕စညးတညးေဆာကးပုဵ ေလ့ပါ။ ေနာကးတစးခုက HTML Web Programming ကုိတတးကၽြမး့သြာ့ရငး အၿခာ့ေသာ CSS, JS, php စသညးတုိ႔ကုိလညး့

တတးကြ္မး့ဖုိ႔သိပးမခကးခဲေတာံပါဘူ့။

သူတုိ႔ေတြက

တစးခုနဲ႔တစးခု

မွီခုိေနက္ေနတာပါ။

Page 15 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Code (filename.php)

ရွငး့လငး့ခ္ကး

<?php

အစိမး့ေရာငး = PHP

echo "This PHP"

အၿပာေရာငး = CSS

?> <html>

အနီေရာငး

= JS

အၿခာ့က

= HTML

<head> <title>This is php,html,js</title> <style> P { text-align: center; color: red; font-family: arial } </style> </head> <body> <br> <p> <script type="text/javascript"> document.write("This is my first JavaScript!"); </script> </p> </body> </html> Page 16 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS -filename.php

DREAM IT, CODE IT BY PLANETCREATOR .NET ဆုိတာ php နဲ႔ေရ့ထာ့တာ

ၿဖစးပါတယး။ ဒီအထဲမွာဆုိရငး html,css,js,php

ဒါေတြပါှငးေနတာပါပဲ။

အဓိကဆုိလုိတာက HTML က Webpage ေတြ ဖနးတီ့တဲ႔ေနရာမွာ အဓိကက္တဲ႔ ၊ Web Designer, Web Developer တုိငး့မသိမၿဖစး သိထာ့သငးံတဲ႔ အေၿခခဵ Language တစးမ္ဳိ့ၿဖစးတယးဆုိတာပါပဲ ။

Source Code

HTML တြငး အထကးပါအတုိငး့ၿမငးရရနးအတြကး ၂ငး့၏ေနာကးကြယးမွ ေရ့သာ့ထာ့ေသာ Code မ္ာ့ကုိ ေခၚဆုိသညး။ HTML သညး Client Side ၿဖစးသညးံအတြကး Source Code မ္ာ့ကုိ Browser ၏ Page Source မွတစးဆငးံၾကညးံႏုိငးသညး။

ထုိကဲ႔သုိၾကညံးရနးအတြကး Mozilla Firefox တြငး View Menu မွတစးဆငးံ Page Source ဆုိၿပီ့ၾကညးံႏုိငးသလုိ Internet Explorer တြငး View Menu မွ Source ကုိႏုိပး၍ ၾကညးံႏုိငးသညး။

(သုိ႔မဟုတး ) Ctrl + U ဆုိၿပီ့ Keyboard က ေန တုိကးရုိကးေခၚဆုိႏုိငးပါတယး။ <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml">

Page 17 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<head> <title>Title goes here</title> </head> <body> <p>This is XHTML</p> </body> </html>

HTML Colour

HTML, CSS ေတြရဲ႕ Colour ကုိ Colour Name သုိ႔မဟုတး Hex Colour (Hexadecimal Colour) ဆုိၿပီ့ ႏွစးခုသုဵ့ႏုိငးပါတယး။ Colour Name နဲ႔ေဖားၿပတယးဆုိတာကေတာံ - ဥပမာ <body bgcolor=”red”> ဆုိရငး

background

အေရာငးက

Red

ဆုိတဲ႔

အနီေရာငးှငးသြာ့ပါလိမးံမယး…

Colour

Code

နဲ႔ေဖားၿပမယးဆုိရငးေတာံ # sign ေလ့နဲ႔ေရွ႕မွာေရ့ၿပရပါတယး … ဥပမာ <body bgcolor=”#ff0000”> ဆုိၿပီ့ေရ့ရပါတယး။ CSS က Colour ကုိ color: rgb(255,205,188); ဆုိၿပီ့ေရ့လုိ႔ရပါတယး။ Colour

ကုိအမညးေတြတပးၿပီ့ေရ့တဲ႔ေနရာမွာ

အမညးကုိအကုနးမသိႏုိငးသလုိ

ကၽြနးေတားတုိ႔က

မွတးရတာလညး့ခကးပါလိမးံမယး။

၂ငး့အေရာငးေတြရဲ႕

သာမာနး

မွတးမိလြယးတဲ႔

အေရာငးေလ့ေတြကုိသာ လကးတနး့ခ္ၿပီ့ေရ့တတးၾကပါတယး။ ဥပမာ - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow စသညးေပါ႔။ ဒါေၾကာငးံ Colour Name နဲ႔ေရ့မယးံအစာ့ HTML, CSS colour ေတြကုိ Hex Code ေတြနဲ႔ေရ့တာက ပုိၿပီ့တိက္တဲ႔ အေရာငးထြကးႏုိငးသလုိ အေရာငးမ္ဳိ့စုဵလညး့ သုဵ့ႏုိငးတာေပါ႔။ အေရာငးမွာ

အဓိကအာ့ၿဖငးံ

Red,

Green,

Blue

ဆုိၿပီ့

အေရာငးသုဵ့ေရာငးအေပၚ

အေၿခခဵထာ့တာၿဖစးတဲ႔အတြကး Hex Code မွာ #rrggbb ဆုိၿပီ့ၿဖစးတယး။ ေရွ႕ႏွစးလုဵ့က အနီေရာငး၊ အလညးႏွစးလုဵ့က

အစိမး့ေရာငးနဲ႔

ေနာကးဆုဵ့ႏွစးလုဵ့ကေတာံ

အၿပာေရာငးေတြပါ။

Hexadecimal

ၿဖစးတဲ႔အတြကး သူက 0-9, A-F ေတြၿဖစးၿပီ့- #FF0000 ကေတာံ ေရွ႕ႏွစးလုဵ့ အနီေရာငးၿဖစးကာ ၉၉ ဆုိရငးေတာံ

အဲ႔အနီေရာငးက

နဲနဲေဖ္ာံသြာ့ပါလိမးံမယး ..

33

ေလာကးဆုိရငးေတာံ

၀ှ

ရာခုိငးႏႈနး့ေလာကးကုိ ေဖ္ာံက္သြာ့ပါလိမးံမယး … ဒါကဥပမာ

အေနနဲ႔ပါ။

Web

Design

ပုိငး့ကုိေလံလာေနတဲ႔သူေတြက

ေနာကးပုိငး့

Color

ရဲ႕

သီအုိရီေတြအေၾကာငး့ပါ ေလံလာထာ့မွ အေၿခခဵေကာငး့မွာပါ။

Page 18 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Hex Value Red Green Blue 00      

00

00

Red = #FF0000 Green = #00FF00 Blue = #0000FF Cyan (blue and green) = #00FFFF Magenta (red and blue) = #FF00FF Yellow (red and green) = #FFFF00

Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML, CSS Colour by WWM</title> </head> <body> <font color="#4B0082">This is Indigo Colour by World Wide Myanmar</font> <br> <font

color="#7B68EE">This

is

MediumSlateBlue

Colour

by

World

Wide

Myanmar</font> <br> <font

color="#FFFF00">This

is

Yellow,

အနီေရာငးနဲ႔

အစိမး့ေရာငးေပါငး့လွ္ငး

အှါေရာငးထြကးလာတာပါ။ by World Wide Myanmar</font> </body> </html>

Page 19 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေအာကးပါ List ေတြက Color Name နဲ႔ Hex Code ေတြကုိ တြဲၿပီ့ေဖားၿပေပ့ထာ့ပါတယး ။

Page 20 of 197

Color Name

HEX

Black

#000000

Navy

#000080

DarkBlue

#00008B

MediumBlue

#0000CD

Blue

#0000FF

DarkGreen

#006400

Green

#008000

Teal

#008080

DarkCyan

#008B8B

DeepSkyBlue

#00BFFF

DarkTurquoise

#00CED1

MediumSpringGreen

#00FA9A

Lime

#00FF00

SpringGreen

#00FF7F

Aqua

#00FFFF

Cyan

#00FFFF

MidnightBlue

#191970

DodgerBlue

#1E90FF

LightSeaGreen

#20B2AA

ForestGreen

#228B22

SeaGreen

#2E8B57

DarkSlateGray

#2F4F4F

LimeGreen

#32CD32

MediumSeaGreen

#3CB371

Turquoise

#40E0D0

RoyalBlue

#4169E1

SteelBlue

#4682B4

DarkSlateBlue

#483D8B

MediumTurquoise

#48D1CC

Indigo

#4B0082

DarkOliveGreen

#556B2F

CadetBlue

#5F9EA0

Color

http://www.worldwidemyanmar.com

Web Design HTML and CSS

Page 21 of 197

DREAM IT, CODE IT BY PLANETCREATOR .NET

CornflowerBlue

#6495ED

MediumAquaMarine

#66CDAA

DimGray

#696969

SlateBlue

#6A5ACD

OliveDrab

#6B8E23

SlateGray

#708090

LightSlateGray

#778899

MediumSlateBlue

#7B68EE

LawnGreen

#7CFC00

Chartreuse

#7FFF00

Aquamarine

#7FFFD4

Maroon

#800000

Purple

#800080

Olive

#808000

Gray

#808080

SkyBlue

#87CEEB

LightSkyBlue

#87CEFA

BlueViolet

#8A2BE2

DarkRed

#8B0000

DarkMagenta

#8B008B

SaddleBrown

#8B4513

DarkSeaGreen

#8FBC8F

LightGreen

#90EE90

MediumPurple

#9370D8

DarkViolet

#9400D3

PaleGreen

#98FB98

DarkOrchid

#9932CC

YellowGreen

#9ACD32

Sienna

#A0522D

Brown

#A52A2A

DarkGray

#A9A9A9

LightBlue

#ADD8E6

GreenYellow

#ADFF2F

PaleTurquoise

#AFEEEE http://www.worldwidemyanmar.com

Web Design HTML and CSS

Page 22 of 197

DREAM IT, CODE IT BY PLANETCREATOR .NET

LightSteelBlue

#B0C4DE

PowderBlue

#B0E0E6

FireBrick

#B22222

DarkGoldenRod

#B8860B

MediumOrchid

#BA55D3

RosyBrown

#BC8F8F

DarkKhaki

#BDB76B

Silver

#C0C0C0

MediumVioletRed

#C71585

IndianRed

#CD5C5C

Peru

#CD853F

Chocolate

#D2691E

Tan

#D2B48C

LightGrey

#D3D3D3

PaleVioletRed

#D87093

Thistle

#D8BFD8

Orchid

#DA70D6

GoldenRod

#DAA520

Crimson

#DC143C

Gainsboro

#DCDCDC

Plum

#DDA0DD

BurlyWood

#DEB887

LightCyan

#E0FFFF

Lavender

#E6E6FA

DarkSalmon

#E9967A

Violet

#EE82EE

PaleGoldenRod

#EEE8AA

LightCoral

#F08080

Khaki

#F0E68C

AliceBlue

#F0F8FF

HoneyDew

#F0FFF0

Azure

#F0FFFF

SandyBrown

#F4A460

Wheat

#F5DEB3 http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Beige

#F5F5DC

WhiteSmoke

#F5F5F5

MintCream

#F5FFFA

GhostWhite

#F8F8FF

Salmon

#FA8072

AntiqueWhite

#FAEBD7

Linen

#FAF0E6

LightGoldenRodYellow #FAFAD2

Page 23 of 197

OldLace

#FDF5E6

Red

#FF0000

Fuchsia

#FF00FF

Magenta

#FF00FF

DeepPink

#FF1493

OrangeRed

#FF4500

Tomato

#FF6347

HotPink

#FF69B4

Coral

#FF7F50

Darkorange

#FF8C00

LightSalmon

#FFA07A

Orange

#FFA500

LightPink

#FFB6C1

Pink

#FFC0CB

Gold

#FFD700

PeachPuff

#FFDAB9

NavajoWhite

#FFDEAD

Moccasin

#FFE4B5

Bisque

#FFE4C4

MistyRose

#FFE4E1

BlanchedAlmond

#FFEBCD

PapayaWhip

#FFEFD5

LavenderBlush

#FFF0F5

SeaShell

#FFF5EE

Cornsilk

#FFF8DC

LemonChiffon

#FFFACD http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

FloralWhite

#FFFAF0

Snow

#FFFAFA

Yellow

#FFFF00

LightYellow

#FFFFE0

Ivory

#FFFFF0

White

#FFFFFF

သူတုိ႔ကုိ အသုဵ့ၿပဳပုဵေတြကေတာံ Tag & Attribute

ရွငး့လငး့ခ္ကး

<BODY BGCOLOR="#ff6600">

Page

ရဲ႕

Background

အေရာငးတစးခုလုဵ့ကုိထညးံသြငး့ၿခငး့ ။ <BODY TEXT="#ff6600">

Page

ထဲရွိ

စာသာ့မ္ာ့

အာ့လုဵ့၏

အေရာငးကုိထညးံသြငး့ၿခငး့ ။ <BODY LINK="#ff6600">

Page တစးခုလဵု့ရွိ Click မႏိုပးရေသ့ေသာ Link (သြာ့ေရာကးမလညးပတးရေသ့ေသာ

Link)

၏အေရာငး ထညးံၿခငး့။ <BODY VLINK="#ff6600">

Page တစးခုလုဵ့ရွိ သြာ့ေရာကးလညးပတးၿပီ့ေသာ Link မ္ာ့၏ အေရာငးကုိထညးံၿခငး့။

<BODY ALINK="#ff6600">

သူက Page တစးခုလုဵ့ရွိ Link ေတြကုိ Click ႏုိပးလုိကးၿပီဆုိတာနဲ႔ အဲ႔ Link ရဲ႕ Text က သတးမွတးထာ့တဲ႔ အေရာငးေၿပာငး့သြာ့ပါလိမးံမယး။

<FONT

COLOR="#cc6600">sample

text</FONT>

<BODY TEXT="#ff6600">

နဲ႔မတူပါဘူ့…

ဒါက <font> element ရဲ႕ Content ေတြကုိပဲ သတးမွတးေၿပာငး့လညး့တာၿဖစးပါတယး။

<TABLE BGCOLOR="#ff6600">

Table

တစးခုလုဵ့ရဲ႕

Background

Colour

ကုိေၿပာငး့လဲတာပါ။ မွတးခ္ကး - <BODY BGCOLOR="#ff6600"> က Page ရဲ႕ Background ကုိေၿပာငး့တာၿဖစးၿပီ့ အခု ဒါကေတာံ ၂ငး့ Page ထဲမွာ Table ရဲ႕ Background ကုိေၿပာငး့တာၿဖစးပါတယး။ <TH BGCOLOR="#ff6600">

Table

ထဲက

Cell

မ္ာ့ရဲ႕

ေခါငး့စဥးရွိ

background ကုိအေရာငးသတးမွတးတာ။ <TD BGCOLOR="#ff6600">

ဒါကေတာံ

Cell

Background

ကို

အေရာငးသတးမွတးတာပါ။ Background

Colour

သတးမွတးတဲ႔အခါမွာ

Background

Colour

က

အနကးၿဖစးၿပီ့

သူ႔အေပၚက Font

ရဲ႕

forecolour

forecolour

က

နဲ႔တြဲၿပီ့ၾကညးံသငးံပါတယး။ အနကးဆုိရငးေတာံ

…

ဘာမွၿမငးရမွာမဟုတးေတာံဘူ့ …

Page 24 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ဒီေလာကးဆုိရငးေတာံ HTML ရဲ႕ Colour ေတြအေၾကာငး့ကုိ သေဘာေပါကးေလာကးၿပီထငးပါတယး။ ရွငး့ေအာငးေၿပာရရငးေတာံ HTML ရဲ႕ Colour ကုိ Colour Name သုိ႔မဟုတး Hex Code ဆုိၿပီ့ ႏွစးမ္ဳိ့သုဵ့လုိ႔ရတယး ..

ဒါေပမဲ႔

တိက္တဲ႔

အေရာငးနဲ႔

ကာလာစုဵ

သုဵ့ႏုိငးဖုိ႔

Hex

Code

ကုိသုဵ့ဖုိ႔

အၾကဵၿပဳပါတယး။

Link

အငးတာနကး Web page စာမ္ကးႏွာေတြကုိ တစးခုခုနဲ႔တစးခု ခ္ိတးဆကးအသုဵ့ၿပဳထာ့တာၿဖစးတယး …

Link ကုိဘာသာၿပနးရငးေတာံ အခ္ိတးအဆကးေပါ႔ … အခုကၽြနးေတားတုိ႔ေၿပာမဲ႔ Link က HTML မွာသုဵ့မဲ႔ Hypertext Link

ေတြအေၾကာငး့ပါ။ html မွမဟုတးဘူ့ တစးၿခာ့ language ေတြနဲ႔ေရ့လညး့ link

ဆုိတာက ရွိတာပဲ။..

Link လုိ႔ေၿပာရငး Link မွာ ႏွစးမ္ဳိ့ရွိပါတယး။ 1. Absolute paths 2. Relative paths Link

Example

Absolute

Web

paths

ေဖားၿပေရ့သာ့ၿခငး့ပဲၿဖစးတယး …

URL

တစးခုကုိ

Domain

Address

အပါအှငး

တိတိက္က္ ကၽြနးေတားတုိ႔မွာ

http://www.worldwidemyanmar.com/images/favicon.ico ဆုိတဲ႔ URL ရွိတယးဆုိပါစုိ႔ ... ဒါကုိ Code မွာေရ့သာ့ေတာံမယးဆုိရငး <a href=”http://worldwidemyanmar.com/images/favicon.ico”> (သုိ႔မဟုတး) <img src=”http://.worldwidemyanmar.com/images/favicon.ico”>

ဒါက သူတုိ႔ရဲ႕ လမး့ေၾကာငး့ကုိ အတိအက္ရုိကးထညးံေပ့ရတာပါပဲ …

Relative

File ရဲ႕ ေနရာအေပၚမွာမႈတညးၿပီ့ေတာံ Relative path မွာ သုဵ့မ္ဳိ့ရွိတယး.

paths

ဿ. တူညီတဲ႔ Directory ထဲမွာဆုိရငး လမး့ေၾကာငး့ရုိကးထညးံစရာမလုိတဲ႔အတြကး File Name တစးခုပဲရုိကးထညးံေပ့ရတယး … <a href=”link1.html”>

၀.

Source

File

က

Sub-Directory

ေအာကးမွာ

ရွိေနမယးဆုိရငး

sub-

directory/filename ကုိထညးံေပ့ရတယး။

Page 25 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <a href=”html/link1.html”>

၁.

Source

File

က

လကးရွိ

Directory

ရဲ႕

ေရွ႕

folder

တစးခုတညး့

ေရာကးေနတယးဆုိရငး ../filename ကုိထညးံေပ့ရတယး။ <a href=”../link1.html”>

TAG

Tag

ဆုိတာ

ကၽြနးေတားတုိ႔ေရ့သာ့လုိကးတဲ႔

စာသာ့ေတြကုိ

Code

နဲ႔

Description

ေတြကုိ

ခြဲၿခာ့ႏုိငးေအာငး၊ Browser က ၂ငး့တုိ႔ ဘာသာၿပနးတဲ႔အခါ သိေအာငးလုိ႔ ေရ့သာ့ထာ့တာပဲ။ ဥပမာCode

View

<b>This is BOLD</b>

This is BOLD

ဒါဆုိရငး Web Browser မွာ ၿမငးရမွာက This is BOLD ဆုိၿပီ့ စာလုဵ့ထူထူၾကီ့ၿမငးရပါလိမးံမယး။ ဒါကလညး့ <b> ဆုိတဲ႔ tag က This is BOLD ဆုိတာကုိ Web Browser မွာ This is BOLD ေပၚေအာငးလုိ႔ ဖနးတီ့ေပ့တဲ႔ code ေပါ႔… ဒီ tag ေတြကုိ Browser မွာေတာံ ၿမငးရမွာမဟုတးပါဘူ့။ Tag ေတြကုိေရ့သာ့ပုဵေလ့ကေတာံ အဖြငးံဆုိရငး <…> နဲ႔ အပိတးဆုိရငး </…> ဆုိၿပီ့ slash (/) ေလ့ ထညးံေပ့ရပါတယး။ ဒါကုိ “Open Tag” and “Closing Tag” လုိ႔ေခၚပါတယး။ ဒါကေတာံ Less Than Sign (<) ႏွငးံ Greater Than Sign (>) ေတြနဲ႔ ဖြဲ႔စညး့တညးေဆာကးထာ့တာၿဖစးတယး။

Comment

HTML

မွာ

source

code

မဟုတးပဲ

ေရ့သာ့ထာ့တဲ႔

code

အေၾကာငး့ကုိ

အၿခာ့သူေတြ

ေသားလညး့ေကာငး ေနာငးတစးခ္ိနး ကၽြနးေတားတုိ႔ ၿပနးလညး ၿပငးဆငးတဲ႔အခ္ိနးမွာ လြယးကူေအာငးလုိ႔ ရွငး့လငး့ေဖားၿပေပ့ထာ့တဲ႔ ရွငး့လငး့ခ္ကးေလ့ေတြကုိ ထညးံေရ့သငးံပါတယး .. အဲ႔လုိေရ့သာ့တာကုိ comment ေရ့သာ့တယးလုိ႔ေခၚပါတယး ..

Page 26 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>World Wide Myanmar</title> <body> <!-- This text is Kyo So Par Tal in Burmese--> Welcome to World Wide Myanmar </body> </html> <!--your text --> ဆုိၿပီ့ေရ့သာ့ေပ့ရပါတယး။

Element

Web Page တစးခုကုိေရ့သာ့ထာ့တဲ႔ေနရာမွာ အဖြငးံ Tag ကေန အပိတး Tag (Opening Tag & Closing

Tag)

ထဲကဟာေတြအာ့လုဵ့ကုိ

Element

လုိ႔ေခၚပါတယး။

HTML

Document

တစးခုကုိၾကညံးမယးဆုိရငး ....

HTML Document (Overview)

<html> <head> <title>This is title of HTML Document</title> </head> <body> <p>This is my first paragraph.</p> </body> </html>

<html> Elements

<html> <head> <title>This is title of HTML Document</title> </head> <body> <p>This is my first paragraph.</p> </body> </html>

Page 27 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<head> Elements

<head> <title>This is title of HTML Document</title> </head>

<body> Elements

<body> <p>This is my first paragraph.</p> </body>

<title> Elements

<title>This is title of HTML Document</title>

<p> Elements

<p>This is my first paragraph.</p>

ဒီေလာကးဆုိရငးေတာံ

HTML

မွာ

Element

ဆုိတာ

ဘယးနာ့က

ဘယးဟာကုိေခၚတယးဆုိတာ

သိသြာ့ေလာကးၿပီ ထငးပါတယး။

Attribute

ကၽြနးေတားတုိ႔သုဵ့ေနတဲ႔

HTML

tag

တုိငး့မွာ

သူတုိ႔ရဲ႕

ကုိယးပုိငး

attribute

ေတြရွိပါတယး။

တစးနညး့ဆုိရေသား attribute ဆုိတာ သူတုိ႔ရဲ႕ သကးဆုိငးရာ tag ေတြရဲ႕ စြမး့အာ့ကုိတုိ့ၿမငးံေအာငး၊ ပုိၿပီ့

လြယးကူေအာငး

အသုဵ့ၿပဳထာ့တာပဲၿဖစးတယး။

<p>

ဆုိတဲ႔

tag

ဆုိရငး

သူ႔ရဲ႕

ကုိပုိငးအရညးအခ္ငး့ေခၚတဲ႔ <p> tag attribute ရွိပါတယး။ ဥပမာ = <tag attribute="value">Margarine</tag> Class Attribute HTML Code

<html> <head> <style type="text/css"> h1.intro {color:blue;} p.important {color:green;} </style> </head>

<body> <h1 class="intro">Header 1</h1> <p>A paragraph.</p> <p class="important">Note that this is an important

Page 28 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET paragraph. :)</p> </body>

</html> Result

ရွငး့လငး့ခ္ကး

Class Attribute ကုိ CSS မွာသုဵ့တာမ္ာ့ပါတယး။ ဒီ class attribute က ID Attribute နဲ႔ အသုဵ့ၿပဳပုဵၿခငး့ ဆငးတူပါတယး။ အေပၚက code ကုိၾကညံးမယးဆုိရငး h1.intro ဆုိတဲ႔ css class selector အၿပာေရာငး

blue

အစိမး့ေရာငး

green

ထညးံထာ့တယး။ ၿပီ့ရငး ဟုဆုိၿပီ့ေခၚထာ့သလုိ

ဆုိၿပီ့ေပ့ထာ့သလုိ

p.important

ဆုိၿပီ့ေပ့ထာ့ပါတယး။ ဒါကုိ <h1> <p>

ဆုိတဲ႔

tag

မွာ

ဆုိတဲ႔

ဆုိၿပီ့ေတာံလညး့ CSS

<h1 tag

ကုိ

ထဲမွာသြာ့ၿပီ့

class=”intro”> မွာ

<p

class=”important”>ဆုိၿပီ့ေခၚသုဵ့ထာ့တဲ႔အတြကး <body> element ထဲက class ေတြက အေပၚCSS code မွာ ခုိငး့ေစထာ့တဲ႔အတုိငး့အလုပးလုပးပါတယး။ ID Attribute HTML Code

<html> <head> <script type="text/javascript"> function change_header() { document.getElementById("myHeader").innerHTML="Nice day!";

Page 29 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET } </script> </head> <body> <h1 id="myHeader">Hello World!</h1> <button onclick="change_header()">Change text</button> </body> </html>

Result

Hello World!

Change text

…………………………Change

text

ကုိ

ႏုိပးလုိကးရငး

ေအာကးပါအတုိငး့ၿမငးရပါလိမးံမယး …………………………………………………….

Nice day!

Change text

ရွငး့လငး့ခ္ကး

ေစာေစာကေၿပာခဲ႔သလုိ ဒီ

ID attribute

က

class attribute

နဲ႔တူတယးလုိ႔ေၿပာထာ့ပါတယး … အခုကလညး့ java script နဲ႔တြဲၿပီ့သုဵ့ထာ့တာ ဥပမာအေနနဲ႔ ထပးၿပီ့ေဖားၿပေပ့လုိကးတာပါ။ ပထမဦ့ဆုဵ့ကေတာံ Hello World! ဆုိၿပီ့ button တစးခုနဲ႔ေဖားၿပေပ့ထာ့ပါတယး။ button ကုိ click ႏုိပးလုိကးတဲ႔အခါ အေပၚမွာေရ့ထာ့တဲ႔

javascript function

ေတြကုိအလုပးလုပးေစၿပီ့ id attribute ရဲ႕ myHeader ဆုိတဲ႔ value ထဲကုိ Nice day! ကုိထညးံသြငး့ေပ့သြာ့တာပါ။

Style Attribute HTML Code

<html> <body>

Page 30 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <h1 style="color:blue;text-align:center">This is a header</h1> <p style="color:green">This is a paragraph.</p> </body> </html>

Result

This is a header This is a paragraph.

ရွငး့လငး့ခ္ကး

Style attribute

ကေတာံ

alignment

ေတြေၿပာငး့မယးဆုိရငးအသုဵ့မ္ာ့ပါတယး။

<h1>

ေတြေၿပာငး့မယး .. ဆုိတဲ႔

tag

colour

မွာ

<h1

style=”color:blue, text-align:center”> ဆုိၿပီ့ ၂ငး့ tag ထဲက စာသာ့ကုိ style value အတုိငး့ ပုဵေဖားေစပါတယး။

Title Attribute HTML Code

<html> <body> <p><abbr title="World Health Organization">WHO</abbr> was founded in 1948. This is tutorial coded by W3C.com</p> <p

title="Offcial

site

for

Your

One

Stop

IT

Station!">http://www.worldwidemyanmar.com</p>

</body> </html> Result

World Health Organization

WHO was founded in 1948. This is tutorial coded by W3C.com http://www.worldwidemyanmar.com Offcial site for Your One Stop IT Station!

ရွငး့လငး့ခ္ကး

Title attribute

ဟာ

သတးမွတးထာ့တဲ႔ အေပၚမွာ

Page 31 of 197

tooltip

text

ကုိအဓိကထာ့ၿပီ့သုဵ့ပါတယး …

mouse pointer

ေလ့ေရာကးမွ ၂ငး့ရဲ႕ value

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET Information ကုိေဖားၿပေပ့မွာၿဖစးပါတယး။ Abbr ဆုိတာကေတာံ abbreviations ပဲၿဖစးပါတယး။ spellcheckers, screen readers,

translation systems and search

-engines

ေတြအတြကး

အသုဵ့ှငးပါတယး။

Building Web Page အေၿခခဵ Web Page မ္ာ့တညးေဆာကးမႈ Source Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Page TITLE</title> </head> <body> <p>This is Body by World Wide Myanmar</p> </body> </html>

Browser View

HTML File

HTML Editor HTML ကုိစတငးေရ့သာ့ေတာံမယးဆုိရငး ကၽြနးေတားတုိ႔အတြကး Editor တစးခုလုိပါတယး။ html file ေတြက text file ေတြၿဖစးတဲ႔အတြကး ရုိ့ရုိ့ text editor ေတြနဲ႔လညး့ေရ့သာ့လုိ႔ရပါတယး။ HTML Editor ေတြကေတာံ

Page 32 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Text editors Object editors WYSIWYG HTML editors WYSIWYM editors Online editors

Windows user ေတြအတြကး Notepad ကုိသုဵ့ႏုိငးၿပီ့ Mac အတြကးေတာံ BBedit ကုိသုဵ့ႏုိငးပါတယး။ အၿခာ့

WYSIWYM editor

ေတြၿဖစးတဲ႔

Dreamweaver နဲ႔

Microsoft

Expression

Web

စသညးတုိ႔ကုိ

အသုဵ့ၿပဳႏုိငးပါတယး။ ဒါေပမဲ႔ HTML ကုိစတငး ေလံလာတဲ႔သူေတြအတြကး ၂ငး့တုိ႔ကုိမသုဵ့သငးံပါဘူ့။ အဲ႔ဒါေတြကုိသုဵ့ရငး html ရဲ႕ tag ေတြကုိ မွတးမိမွာမဟုတးပါဘူ့။ WYSIWYM editor

ေတြက လြယးကူၿပီ့ အခ္ိဳ႕အပုိငး့ေတြ Auto

ထညးံေပ့သြာ့တာေတြရွိတဲ႔အတြကး Notepad ကုိပဲသုဵ့ဖုိ႔ လမး့ညြနးပါတယး။ HTML ကုိနာ့လညးသေဘာေပါကးသြာ့ၿပီဆုိမွ Dreamweaver တုိ႔ Expression Web စသညးတုိ႔ၿဖငးံ Professional Web Page ေတြကုိဖနးတီ့ၾကပါ။

HTML Web Page တစးခု ဖနးတီ့ေတာံမယးဆုိရငး ပထမဦ့စြာ Run Command (Windows Key + R) ကုိသြာ့၍ notepad ဆုိၿပီ့ရုိကးထညးံလုိကးပါ။ ဒါဆုိရငး Notepad editor တစးခုေပၚလာပါလိမးံမယး။

Start > All Programs> Accessories> ထဲက Notepad ကုိလညး့သြာ့ေရာကးႏုိငးပါတယး။ HTML ကုိစတငးေရ့သာ့ရာမွာ ၂ငး့ရဲ႕ source code ေတြမွာ <html> နဲ႔စၿပီ့ </html> နဲ႔ဆုဵ့ပါတယး.. ဒါက Root Element ဆုိတာ အေပၚမွာလညး့ ေဖားၿပခဲ႔ၿပီ့ပါၿပီ။ ေနာကးတစးဆငးံတကးကာ ကၽြနးေတားတုိ႔မွတးထာ့ရမွာက html document ေတြမွာ အဓိကအာ့ၿဖငးံ Element ႏွစးခုရွိတယးလုိ႔ပဲ မွတးထာ့လုိကး အဲ႔ဒါေတြကေတာံ <head> element ရယး <body> element ရယးဆုိတာပါ။ Frameset Elements ဆုိတာလညး့ရွိေပမဲ႔ အသုဵ့နဲပါတယး .. ေအာကးေပါငး့မွာ ေဖားၿပေပ့ထာ့ပါတယး။ ေလံလာေနတဲ႔သူေတြအေနနဲ႔ Element ႏွစးခုကုိပဲ ေခါငး့ထဲမွာထညးံၿပီ့ html code

ေတြကုိ စတငးေရ့ၾကရေအာငး….

(Notepad အထဲမွာေနား) မွတးခ္ကး = အဆငးံေတြကုိ တစးဆငးံၿခငး့စီသြာ့တာ ပုိၿပီ့မွတးမိလြယးပါတယး။

Page 33 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<html> </html>

ဒါက html နဲ႔ေရ့တဲ႔ html document တုိငး့မွာထညးံေပ့ရမဲ႔ code ပဲ… ဘယး html page ကုိပဲေရ့ေရ့ ဒါေလ့ကေတာံ ထညးံေပ့ရတယး.. ဆုိလုိတာက ကၽြနးေတားတုိ႔ ေရ့ထာ့တဲ႔ ဒီဖုိငးထဲက text ေတြက html language ကုိသုဵ့ထာ့ေၾကာငး့ ေဖားၿပေပ့တာပဲ… <html> <head> </head> <body> </body> </html>

Element ႏွစးခုကုိေပါငး့ၿပီ့ေရ့လုိကးတယးေပါ႔ … ယခု <head> element နဲ႔ <body> element ေတြကုိနဲနဲေလ့ ရွငး့ပါမယး… <head>

<head> element က Browser မွာ တုိကးရုိကးမၿမငးႏုိငးပါဘူ့ ။ သူ႔ရဲ႕ အဓိက တာှနးက Web Page ရဲ႕ ေခါငး့စဥးေတြနဲ႔

Element

<body> element ကုိအေထာကးအကူၿပဳဖုိ႔ သူ႔မွာ java script ေတြပါႏုိငးတယး.. CSS code ေတြပါမယး… ၿပီ့ရငး meta

s

ဆုိတဲ႔ site ရဲ႕ author or site ရဲ႕ information ကုိေဖားၿပေပ့တဲ႔ content ေတြပါှငးတယး။ ဒီအထဲမွာ ေအာကးပါ tags ေတြပါှငးတယး။

Tag

ရွငး့လငး့ခ္ကး ႏွငံး ဥပမာ

<head>

Document စာမ္ကးႏွာနဲ႔ပကးသကးတဲ႔ အေၾကာငး့အရာေတြကုိသတးမွတးတယး။ <html> <head> <title>Title of the document</title> </head> <body> <p>The content of the document......</p> </body> </html>

<title>

Document ရဲ႕ေခါငး့စဥးကုိ သတးမွတး။ <head> <title>Title of the document</title> </head>

<base />

Page 34 of 197

လကးရွိ Page တြငးရွိေသာ Link အာ့လုဵ့ရဲ႕ Default Address သတးမွတး။

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <head> <base href="http://www.worldwidemyanmar.com/images/" /> <base target="_blank" /> </head>

<link />

Document နဲ႔ ၿပငးပက CSS လုိ ခ္ိတးဆကးအသုဵ့ၿပဳမညးံ link မ္ာ့အတြကး။

<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <meta />

HTML Document နဲ႔ ပကးသကးတဲ႔ အေၾကာငး့အရာမ္ာ့။ <head> <meta name="description" content="Tutorial, Reviews and News on Tech Products" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Administrator" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </head>

<script>

client-side script မ္ာ့ထညးံသြငး့။ <head> <script type="text/javascript"> function change_header() { document.getElementById("myHeader").innerHTML="Nice day!"; } </script> </head>

<style>

Document ရဲ႕ style ေတြကုိသတးမွတး ။ <head> <style type="text/css">

Page 35 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET h1 {color:red} p {color:blue} </style> </head>

<body>

ဒီ element ထဲမွာ စာေတြ၊ ပုဵေတြ၊ ဗီဒီယုိေတြ စသညးၿဖငးံ Web Browser မွာၿမငးႏုိငးပါတယး။ ကၽြနးေတားတုိ႔ေဖားၿပခ္ငးတဲ႔

Element

အေၾကာငး့အရာတစးခုကုိ ဒီ element အတြငး့မွာအဓိကထာ့ေရ့ေပ့ရပါတယး။ Forms Tables Text Anchors Style Sheets Line Breaking Lists Multimedia Block Formatting Character Formatting Embedded Functionality Revision Control Rubies ဒါေတြကေတာံ <body> element ထဲမွာထညးံသြငး့အသုဵ့ၿပဳၾကတဲ႔ content ေတြပါ။ ဥပမာ Lists ဆုိရငး သူ႔မွာ Ordered List (<ol>), Unordered List (<ul>) စသညးတုိ႔ပါှငးတာေပ႔ါ။ အေသ့စိတးကုိၾကညံးရေအာငး။

Form မွာဆုိရငး Form tags ေတြအၿပငး Input Type ေတြလညး့ပါှငးပါတယး။ ဒါေၾကာငးံ form မွာသုဵ့တဲ႔ tags ေတြအၿပငး InputType= ေတြလညး့ေဖားၿပေပ့သြာ့မွာပါ။

Forms Tag

ရွငး့လငး့ခ္ကး ႏွငံး ဥပမာ

<form>

Form ထဲမွာ web page user ေတြရဲ႕ Input Information ေတြကုိ အသုဵ့ၿပဳခြငးံေပ့ၿပီ့ ၂ငး့ form

အတြငး့ရွိ

content

မ္ာ့ကုိ

ဘယးလုိ

process

လုပးမယးဆုိတာကစ

လုပးေဆာငးေပ့တဲ႔ေနရာလညး့ၿဖစးတယး။ အထဲမွာေတာံ Input text box

ေတြ button

ေတြပါှငးတယး.. form က table နဲ႔ ဆငးတူပါတယး။ လုပးေဆာငးပုဵကေတာံ ကြဲၿပာ့ပါတယး။ <form method="get" action="http://www.worldwidemyanmar.com/query" enctype="application/x-www-form-urlencoded">

Page 36 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <input type="password" name="brb" />

</form> <button>

Button tag ကေတာံ INPUT element မွတစးဆငးံ submit လုပးမယး, reset လုပးမယး… ဆုိလုိတာက ဒီ submit button ကုိႏုိပးလုိကးရငး form အထဲမွာရွိတဲ႔ data ေတြကုိ ပုိ႔ပါ၊ ဖ္ကးပါ၊ ၿပငးပါ စသညးအၿဖငးံ အလုပးလုပးပါတယး။ <button type="submit" name="helpbutton" tabindex="1"> <img src="helpicon.gif" align="middle" /> Get the <strong>HELP</strong> that you need here... </button>

<label>

Label ဆုိတာကေတာံ check box , option button ေလ့ေတြလုိေနရာမ္ဳိ့ေလ့ေတြမွာ အညြနး့စာသာ့ေလ့ ေရ့ေပ့တဲ႔ပုဵစဵပါပဲ။

Label

<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <option>

Option

tag

ကေတာံ

box

ထဲမွာ

ေရြ့ခ္ယးခြငးံေတြေပ့ထာ့မယး ..

အဲ႔အထဲကမွ

မိမိႏွစးသကးရာကုိ ေရြ့ခ္ယးအသုဵ့ၿပဳေစခ္ငးတယးဆုိရငး option tag ကုိအသုဵ့ၿပဳရပါတယး။

Page 37 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option> </select> </form> <fieldset>

သူကေတာံ အေပၚမွာေဖားၿပခဲ႔ဖူ့တဲ႔ label ထဲမွာပါပါတယး။ form ထဲက မ္ဳိ့တူရာေတြ Group ဖြဲ႔လုိကးတဲ႔ပုဵစဵေပါ႔ .. ေအာကးကပုဵကုိၾကညံးမယးဆုိရငး Male & Female ေတြက Gender ဆုိတဲ႔ Group တစးခုတညး့ဖြဲ႔ထာ့သလုိပုဵစဵေပါ႔။

<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <legend>

Page 38 of 197

Fieldset , label တုိ႔ေတြနဲ႔ေပါငး့ထာ့တဲ႔ ပုဵမွာ fieldset ဆုိတဲ႔ group ရဲ႕ ေခါငး့စဥးကုိ

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

တပးမယးဆုိရငး legend ကုိထညးံေပ့ရပါတယး။ သူလညး့ အညြနး့ပါပဲ။

<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <select>

Select ကေတာံ content ထဲက value ေတြအာ့လုဵ့ကုိ List တစးခုအေနနဲ႔လုပးပါတယး … သူ႔အထဲမွာလညး့ multiple ဆုိရငး select လုပးတာ တစးခုထပးပုိၿပီ့လုပးႏုိငးပါတယး။ single ဆုိရငးေတာံ select လုပးတာ တစးခုပဲရပါလိမံးမယး။

<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option>

Page 39 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </select>

</form> <optgroup>

selection list ထဲက value ေတြကုိ group လုပးတာပဲၿဖစးတယး။

<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option> </select> </form> <textarea>

Textarea

element

ဟာ

multiple text

ေတြရုိကးထညးံဖုိ႔အတြကး

တညးေဆာကး

ေပ့ထာ့တဲ႔ ကြကးလပးၾကီ့တစးခုပဲၿဖစးပါတယး။

<form> <textarea name="brb" rows="3" cols="40"> Default TEXTAREA value goes here </textarea> </form>

Page 40 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Form tags ေတြၿပီ့ေတာံ အခု ဆကးလကးၿပီ့ အဲ႔မွာသုဵ့တဲ႔ InputType= ေတြကုိပါ ထညးံသြငး့ေဖားၿပမွာၿဖစးပါတယး။ InputType=

ရွငး့လငး့ခ္ကး ႏွငံး ဥပမာ

button

Form ေပၚမွာ button ေလ့တစးခုေပၚခ္ငးတယးဆုိရငး type=”button” ဆုိတာေလ့နဲ႔ ေရ့သာ့ထာ့တာၿဖစးတယး။

Feedback form တစးခုရွိ Button မ္ာ့ကုိၿပပုဵ Submit Button, Reset Button

<form> <input type="button" value="Submit" name="brb" onClick="test1(this.form)" /> <input type="reset" value="Reset" /> </form> radio

Radio ကုိ တစးခ္ဳိ႕က Option button လုိ႔လညး့ေခၚၾကတယး .. သူက အမ္ာ့ၾကီ့ထဲက တစးခုကုိ ေရြ့ခ္ယးခုိငး့ထာ့တာပါ။

<form> <input type="radio" value="Jazz" name="Radio1" /> Jazz<br /> <input type="radio" value="New Age" name="Radio1" />

New

Age<br /> <input

Page 41 of 197

type="radio"

value="Rock"

name="Radio1"

checked

/>

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Rock!<br /> </form> reset

ေအာကးပါပုဵကုိၾကညးံပါ။

ပုဵမွနး

feedback

form

တစးခုရွိတယးဆုိပါစုိ႔ …

အဲ႔အထဲမွာ

ရုိကးလုိကးတဲ႔ စာသာ့ေတြအာ့လုဵ့ကုိ နဂုိ အတုိငး့ (Empty) လုပးလုိးကးခ္ငးတယးဆုိရငး Reset button

ေလ့ကုိထာ့လုိကးလုိ႔ရပါတယး။

Reset

လုပးလုိကးၿပီဆုိတာနဲ႔

အဆငးံတစးဆငးံခ္ငး့စီ လုိကးၿပီ့ ဖ္ကးစရာမလုိပဲ အာ့လုဵ့ကုိ ရွငး့ေပ့သြာ့ပါလိမံးမယး။ ဒါက Form ကုိရွငး့လုိကးတာပါပဲ။

Reset Button

<form> <input type="reset" value="clear the form" /> </form> CheckBox

Boolean Choice ေခၚတဲ႔ true or false ပါပဲ။ မွနးရငး မွနးတယး.. မွာ့ရငးမွာ့တယး .. ဒီႏွစးခုတညး့ကမွ အမွနးၿခစးၿပီ့ေရြ့ခ္ယးေပ့ရပါလိမးံမယး … Checkbox ဟာ တစးခုသုိ႔မဟုတး တစးခုထပးပုိၿပီ့ အမွနးၿခစးႏုိငးသလုိ၊ တစးခုမွ အမွနးမၿခစးလညး့ရပါတယး။ Radio button နဲ႔ေတာံ

နဲနဲကြဲပါတယး။

Radio

Button

က

အနဲဆုဵ့နဲ႔

အမ္ာ့ဆုဵ့တစးခုေတာံ

ေရြ့ေပ့ရပါတယး။

Page 42 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<form> <input type="checkbox" value="3" name="brb" checked /> <input type="checkbox" value="3" name="brb" /> <input type="checkbox" value="3" name="brb" checked /> </form> image

ေစာေစာက

ကၽြနးေတားတုိ႔

button

ေတြသုဵ့သလုိပဲ ..

အခု

အဲ႔အစာ့

image

ကုိထညးံသြငး့အသုဵ့ၿပဳထာ့တာၿဖစးပါတယး။

<form> <input

type="image"

src="http://www.planetcreator.net/images/pnc.png" name="imagesubmit1" align="top" height="50" width="50" /> </form> range

Text box ထဲမွာရွိတဲ႔ number ေတြကုိအသုဵ့ၿပဳမယး .. အဲ႔လုိအသုဵ့ၿပဳတဲ႔အခါ သူတုိ႔ကုိ Number

ဘယးေလာကးကေန

စစးထုတးခ္ငးတယးဆုိရငး

ဒီလုိေနရာမွာ

ဘယးေလာကးအထိပဲသုဵ့မယး range

ဆုိၿပီ့သုဵ့ၾကတယး။

ဆုိတာမ္ဳိ့ Minium

ဘယးေလာကးထာ့မယး .. Maxium ဘယးေလာကးအထိပဲသုဵ့မယးဆုိတာမ္ဳိ့ေပါ႔ ..

Page 43 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေနာကးတစးမ္ဳိ့ကေတာံ

<form> <input name="r" type="range" min="1" max="11" value="9"> <input type="submit" value="Go"> </form> submit

Submit

ဆုိတာ

အေပၚက

button

မွာလညး့

ပါၿပီ့သြာ့ပါၿပီ…

ဒါေပမဲ႔

မတူတာတစးခုကေတာံ သူက type=”button”

<form> <input type="submit" value="Submit" /> </form> file

ေနာကးတစးခုကေတာံ

file

ဆုိတာပါပဲ… Web server

ေပၚသုိ႔

ပုဵေတြတငးမယး ..

ဖုိငးေတြတငးမယးဆုိရငး button ေလ့တစးခုနဲ႔ upload လုပးရတာေတြ ေတြ႔ဖူ့မွာပါ…

Page 44 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<form method="post" action="action.cgi" enctype="multipart/form-data"> <input type="file" name="filename" /> </form> password

ဒါကေတာံ password လုိ႔ေခၚပါတယး .. ဒီ text box ထဲမွာ ရုိကးထညးံသမွ္အာ့လုဵ့က password box ၿဖစးတဲ႔အတြကး ေအာကးပါအတုိငး့ၿမငးရမွာပါပဲ …

<form> <input type="password" name="thepassword" /> </form> readonly

ဒီထဲမွာ

ရုိကးထညးံထာ့တဲ႔

တနးဖုိ့က

ၾကညံးရုဵပါပဲ… user

ေတြနဲ႔

ၿပနးလညးၿပငးဆငး

ခြငးံမရွိပါဘူ့။ သူက text နဲ႔ဆငးတူပါတယး ..

Page 45 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<form> <input type="readonly" name="ron" value="Readonly Value" /> </form> text

Text က readonly လုိပါပဲ.. ဒါေပမဲ႔ text က မိမိစိတးၾကိဳကးရုိကးသြငး့ ၿပငးဆငးခြငးံရွိပါတယး။ ထုိ႔အၿပငး ရုိကးသြငး့တဲ႔ value တနးဖုိ့ကုိလညး့ ကနး႔သတးလုိ႔ရပါတယး။

<form> <input

type="text"

value="brb

was

here"

name="text1"

size="10" maxlength="25" /> </form> ဒါေတြကေတာံ form elements ထဲမွာသုဵ့တာေတြပါပဲ…

Table Element မွာပါှငးတဲ႔ သူတုိ႔ရဲ႕ tag ေတြအေၾကာငး့ကုိ ရွငး့ၿပေပ့သြာ့မွာၿဖစးပါတယး။ HTML ကုိေလံလာၿပီဆုိရငး ဒီ table ေတြကလညး့ အေရ့ၾကီ့ပါတယး …

အခုဆကးလကးၿပီ့ ကၽြနးေတားတုိ႔ Tables အေၾကာငး့ကုိ ေၿပာသြာ့မွာၿဖစးပါတယး။ Table Tags

ရွငး့လငး့ခ္ကး ႏွငံး ဥပမာ

<table>

<table> tag က HTML table element မွာ ထိပးဆုဵ့ကပါှငးတဲ႔အပုိငး့ၿဖစးပါတယး။ table လုိ႔ဆုိတဲ႔အတုိငး့ ဇယာ့ကြကးေလ့ေတြနဲ႔ခ္ေပ့သြာ့မွာၿဖစးပါတယး။ တနညး့အာ့ၿဖငးံ Table ဆုိတာ cell ကြကးေလ့ေတြပါှငးတဲ႔ ဇယာ့ၾကီ့ေပါ႔။ Default value အေနနဲ႔ table မွာ border

Page 46 of 197

မပါပါဘူ့။

table

ေတြရဲ႕

attribute

ေတြအာ့လုဵ့က

table cell

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေလ့ေတြအာ့လုဵ့ကုိ effect ၿဖစးပါတယး။

<table

border="2"

align="left"

cellpadding="5"

bordercolor="#ff0000"

width="75%"> <caption

align="top">Juggling

Capabilities

of

Waterfront

Performers</caption> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Tin Maung</td> <td>1</td> <td>2</td> <td>20<br>he is great!)</td> </tr> </table>

Table မွာ သူ႔ရဲ႕ ကုိယးပုိငး Attribute အခ္ဳိ႕လညး့ရွိပါတယး။ အသုဵ့ှငးတဲ႔ attribute အခ္ဳိ႕ကုိေဖားၿပလုိကးပါတယး။ Attribute

ရွငး့လငး့ခ္ကး

<table border=?>

Table cell

Values=Integers

စသညးတုိ႔ကုိ သတးမွတးလုိလွ္ငးသုဵ့။

ေတြရဲ႕

ေဘ့ေဘာငးေတြရဲ႕

အထူ

အပါ့

<table border="2">

ဆုိၿပီ့ value ကုိရုိကးထညးံေပ့ရပါတယး။ <table align=?>

Table ထဲမွာရွိတဲ႔ Cell ေတြရဲ႕ Center, Left, Right ဆုိတဲ႔

Values=center,left,right alignment ေတြကုိသတးမွတးရနး။ <table border="center”>

ဆုိၿပီ့ value ကုိရုိကးထညးံေပ့ရပါတယး။ <table background=?> Table ရဲ႕ background image ပုဵေတြထညးံမယးဆုိရငး သုဵ့။ (images)

Page 47 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<table background="flower.gif"

<table cellpadding=?> Cell တစးခုခ္ငး့စီရဲ႕ ေဘာငးေတြနဲ႔ cell ကြကးအတြငး့ရွိ data

Values=Integers

ေတြရဲ႕ အကြာအေှ့ကုိ သတးမွတးဖုိ႔အတြကးသုဵ့ ။

<table cellpadding="value">

<table width="224" border="1" cellpadding="20" cellspacing="10" bordercolor="#0000FF">

<table cellspacing=?>

Cell မ္ာ့အၾကာ့ အကြာအေှ့ကုိသုဵ့သညး။ ေအာကးပါ ပုဵတြငး

Values=Integers

အနီေရာငး အမွတးအသာ့ၿဖငးံေဖားၿပထာ့သညး။

<table cellspacing="value">

Page 48 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<table width="224" border="1" cellpadding="20" cellspacing="10" bordercolor="#0000FF">

<table bgcolor=?>

Table ၏ေနာကးခဵ Background အေရာငးကုိထညးံၿခငး့။

Color Name or Hex

<table bgcolor=”red”>

Color

Or <table bgcolor=”#FF0000”>

<table bordercolor=?> Table ၏ေဘ့ေဘာငး အေရာငးအတြကး။ Color Name or Hex

<table bordercolor=”red”>

Color

Or <table bordercolor=”#FF0000”>

<table

3D

Border

မ္ဳိ့လုပးခ္ငးတယးဆုိရငး

Bordercolordark

bordercolordark=?>

ကေတာံ table border ရဲ႕ ေအာကးအေရာငးေပါ႔.

Bordercolordark <table cellpadding="5" cellspacing="5" width="100%" border="5" bordercolordark="blue" bordercolorlight="#FF0000">

Border ကုိ size မ္ာ့မ္ာ့ေပ့ၿပီ့ ၾကညးံႏုိငးသညး။

Page 49 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<table

သူက အေပၚအေရာငးပါ… အေရာငးေဖ္ာံးတယး..

bordercolorlight=?>

Bordercolorlight

<table cellpadding="5" cellspacing="5" width="100%" border="5" bordercolordark="blue" bordercolorlight="#FF0000">

Border ကုိ size မ္ာ့မ္ာ့ေပ့ၿပီ့ ၾကညးံႏုိငးသညး။ <table width=?>

Table ၏အလ္ာ့လုိကး အက္ယးကုိသတးမွတးရနး။

Values=Integers

Table’s Width

<table width="100%" height="200">

integer pixel values or a percentage ကုိသတးမွတးႏုိငး <table height=?>

Table ၏အနဵလုိကး အၿမငံးကုိသတးမွတးရနး။

Values=Integers

Table’s Height

<table width="100%" height="200">

integer pixel values or a percentage ကုိသတးမွတးႏုိငး <table cols=?>

COLS ကုိ <col> tag နဲ႔ မေရာပါနဲ႔.. COLS က table ရဲ႕ attribute ၿဖစးၿပီ့ browser အာ့မိမိရဲ႕ table ထဲမွာ columns ဘယးႏွစးခုရွိေၾကာငး့ေၿပာထာ့တာၿဖစးပါတယး။

Page 50 of 197

တစးခ္ဳိ႕

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET website ဖနးတီ့တဲ႔သူေတြက table ေတြကုိ browser က ၿမနးၿမနးဆနးဆနး

ပုဵေဖားေပ့ႏုိငးဖုိ႔

ထညးံသြငး့အသုဵ့ၿပဳၾကတာ

လညး့ေတြ႔ရပါတယး။ <TABLE WIDTH="600" COLS="4" BORDER="1" >

ဒါဆုိရငး table ထဲမွာ Columns ၂ ခုရွိတယးေပါ႔။ <table colspan=?> LEFT ဆုိတဲ႔ cell ကြကးက columns

COLSPAN

ကေတာံ

table

ရဲ႕

attribute

ၿဖစးရုဵမက

<th>နဲ႔<td> တုိ႔အတြကးလညး့ၿဖစးပါတယး။

ႏွစးခု ယူထာ့တာကုိ ေတြ႔ရပါလိမံးမယး… <TR>

ဒါဆုိရငးေတာံ

<TH COLSPAN="2">LEFT</TH>

colspan=”4” ေပါ႔…

<TH COLSPAN="2">RIGHT</TH> </TR>

COLSPAN

ကုိအခ္ဳိ႕က

Cell

မ္ာ့အာ့

Merge

လုပးတယးလုိ႔လညး့ေၿပာၾကပါတယး။ <caption>

Table တစးခုအာ့ ေခါငး့စဥးေပ့မယးဆုိရငး <caption> ဆုိတဲ႔ tag ကုိ table element အတြငး့မွာေပ့ရပါတယး … ေအာကးပါ source code ကုိၾကညးံၾကညးံပါ။

<caption> ဆုိတဲ႔ tag ကုိသုဵ့ၿပီ့ table အာ့ေခါငး့စဥးတပးထာ့ တာပါ

<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" width="75%"> <caption align="top">Juggling Capabilities of Waterfront

Page 51 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Performers</caption> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br> he is great!)</td> </tr> </table> <thead>

အခု <thead> နဲ႔ <tfoot> tags ေတြကုိ တစးေပါငး့တညး့ေရ့ၿပီ့ ေဖားၿပေပ့သြာ့ပါမယး ..

<tfoot>

table

တစးခုမွာ

ေအာကးပါ

ေလ့ေတြရွိႏုိငးပါတယး။

ပုဵစဵမ္ဳိ့

ဒီလုိအခါမ္ဳိ့မွာ

ေခါငး့စဥးၾကီ့အၿပငး အထကးပါ

tags

သူတုိ႔မွာ

ေခါငး့စဥးခြဲ

ေတြထုိကးသငးံသလုိ

သုဵ့ၾကပါတယး။ သူတုိ႔ရဲ႕ အဓိက လုပးေဆာငးတာကေတာံ <tr> tag ေခၚတဲ႔ table row ေတြကုိ group ဖြဲ႕လုိကးတာပါပဲ။ ၿပီ့ေတာံ ဒီႏွစးခုက အသုဵ့နညး့ပါတယး။

<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" cols="4" frame="vsides" rules="rows" width="75%"> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <thead> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> </thead> <tfoot> <tr> <th colspan="4">NOTE: This is only a small sample</th> </tr>

Page 52 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

</tfoot> <tbody> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>( he is great!)</td> </tr> </tbody> </table> <col>

<colgroup> ဆုိတဲ႔ element ထဲမွာ <col> ဆုိတဲ႔ tag ေတြပါှငးၿပီ့ Table ထဲမွာ ရွိတဲ႔

<colgroup>

Column ေတြကုိ Group ဖြဲ႕တာၿဖစးပါတယး။ <col> ကေတာံ Group ဖြဲ႕ထာ့တဲ႔ Column တစးခုခ္ငး့စီကုိ right,left,center စသညးၿဖငးံ သတးမွတးတာၿဖစးပါတယး။

<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" cols="4" frame="vsides" rules="cols" width="75%"> <colgroup> <col align="right" /> </colgroup> <colgroup> <col align="center" /> <col align="center" /> Page 53 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<col align="center" /> <col align="center" /> </colgroup> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <thead> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> </thead> <tbody> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>he is great!)</td> </tr> </tbody> </table> <tr>

<tr> ဆုိတာ table အတြငး့မွာ row ေတြတညးေဆာကးဖို႔အတြကးၿဖစးၿပီ့ <th> tag

<th>

ကေတာံ table ရဲ႕ ေခါငး့စဥးကုိ ေဖားၿပလုိတဲ႔အခါမွာ အသုဵ့ၿပီ့ၿပီ့ <td>ကေတာံ table ရဲ႕

<td>

cell ေတြမွာ အခ္ကးအလကး data ေတြကုိ အသုဵ့ၿပဳ ေဖားၿပရနးၿဖစးပါတယး။

Page 54 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" width="75%"> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>(he is great!)</td> </tr> </table>

Text မ္ာ့ထညးံသြငး့ေရ့သာ့ၿခငး့ ႏွငးံ တညးေဆာကးပုဵ အခ္ဳိ႕ Characters ေတြကုိ HTML က ၾကိဳတငးသုဵ့ထာ့တာေတြရွိပါတယး။

ဥပမာ (<) or (>) ဆုိတဲ႔ Characters ေတြကုိ Browser က Text နဲ႔ Tag နဲ႔မွာ့သြာ့မွာဆုိ့တဲ႔အတြကး HTML ရဲ႕ Source Code မွာ တုိကးရုိကးထညးံလုိ႔မရပါဘူ့။ ဒီလုိေနရာမ္ဳိ့မွာ အဲ႔လုိ reserved လုပးထာ့တဲ႔ characters ေတြကုိအသုဵ့ၿပမယးဆုိရငး

Page 55 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

&entity_name; သုိ႔မဟုတး &#entity_number; ဆုိၿပီ့ ထညံးသြငး့အသုဵ့ၿပဳရပါလိမးံမယး .. ဒါေၾကာငးံ (<) ကုိ Browser မွာၿမငးႏုိငးဖုိ႔အတြကး &lt; သုိ႔မဟုတး &#60; ကုိသုဵ့ေပ့ရပါတယး … ေအာကးပါ ဇယာ့က HTML Entities ေတြအတြကး Reserved Characters ေတြပဲၿဖစးပါတယး။

Result

Description

Entity Name

Entity Number

non-breaking space

&nbsp;

&#160;

<

less than

&lt;

&#60;

>

greater than

&gt;

&#62;

&

ampersand

&amp;

&#38;

¢

cent

&cent;

&#162;

£

pound

&pound;

&#163;

¥

yen

&yen;

&#165;

€

euro

&euro;

&#8364;

§

section

&sect;

&#167;

©

copyright

&copy;

&#169;

®

registered trademark

&reg;

&#174;

™

trademark

&trade;

&#8482;

<body> <p align="center">Copyright &copy; 2009. All rights reserved. World Wide Myanmar Training Center.</p> </body>

Page 56 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အထကးပါပုဵမွာ © အစာ့ &copy; ဆုိတာကုိ code မွာ ေရ့ထညးံေပ့ရပါတယး။

Anchors ဆုိတာ Hyperlink တစးခုပဲ ၿဖစးတယး။ သူရဲ႕ tag ကေတာံ <a> / လကးရွိ Document ထဲမွ စာတစးခု၊ စာပိုဒး တစးခုကုိ ခုနးပ္ဵေက္ားလြာ့ ေရာကးသြာ့ခ္ငးတယးဆုိရငးေတာံ Anchor ကုိသုဵ့ေပ့ရပါတယး။

ဿ. Anchors က href ဆုိတဲ႔ attribute ကုိသုဵ့ၿပီ့ Document တစးခုကုိသြာ့ဖုိ႔ Link ဖနးတီ့မယး။ ၀. Name attribute ကုိသုဵ့ၿပီ့ Document ထဲမွာ bookmark ကုိတညးေဆာကးမယး… ဒါဆုိရငးေတာံ anchor <a> tag ကုိအသုဵ့ၿပဳေပ့ရပါတယး။ WorldWideMyanmar ဆုိတဲ႔ hyperlink တစးခုကုိတညးေဆာကးမယးဆုိရငး….

<a href="http://www.worldwidemyanmar.com">WWM</a> အေပၚက code အတုိငး့ ေရ့ေပ့ရပါတယး။ Hyperlink to a document:

<a href="http://www.worldwidemyanmar.com">WWM</a>

Hyperlink to a Bookmark in the current document:

<a href="#Bookmark1> Link text that leads to Bookmark1 in the current document </a> Hyperlink to a Bookmark in an external document:

<a href="http://www.worldwidemyar.com/index.html#Bookmark1"> Link text that leads to Bookmark1 in index.html at www.foo.com </a> Name attribute ကေတာံ အေပၚက href နဲ႔အတူတူ တြဲၿပီ့ အလုပးလုပးပါတယး။ ေအာကးပါပုဵစဵမ္ဳိ့ေပါ႔ ..

<a name="Bookmark1">This text is now marked by Bookmark1!</a> ဥပမာေတြနဲ႔ ယွဥးၿပီ့ၾကညးံရေအာငး… ကၽြနးေတားတုိ႔မွာ စာေတြအၿပညးံနဲ႔ Document တစးခုရွိတယးဆုိရငး အဲ႔ Document ကုိ အေပၚကေနေအာကးကုိ scroll

Page 57 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေလ့ကုိဆြဲၿပီ့ ဖတးသြာ့ရပါတယး။ အဲ႔ဒါေတြကုိ အလြယးတကူေက္ားႏုိငးဖုိ႔အတြကး ေအာကးပါ အတုိငး့သုဵ့နုိငးပါတယး။

<body> <a href="#paragraph1">Jump to Paragraph 1</a><br/> <a href="#paragraph2">Jump to Paragraph 2</a><br/> <a href="#paragraph3">Jump to Paragraph 3</a><br/>

<a name="paragraph1">This is Paragraph 1 and text......</a><br/><br/> <a name="paragraph2">This is Paragraph 2 and text......</a><br/><br/> <a name="paragraph3">This is Paragraph 3 and text......</a> </body> အေပၚက ပုဵမွာ Jump to Paragraph 1 ကုိႏုိပးလုိကးၿပီဆုိတာနဲ႔ address bar မွာ #paragraph1 ဆုိၿပီ့ပုိလာကာ page ကလညး့ This is Paragraph 1 and text….. ဆုိတဲ႔ ဆီကုိ ေရာကးသြာ့ပါလိမးံမယး… အဲ႔သလုိပဲ Jump to Paragraph 2 ကုိႏုိပးရငး Paragraph 2 ကုိေရာကးသြာ့ပါလိမးံမယး.. ဒါက Local Page ထဲက content ေတြကုိ name attribute နဲ႔ hyperlink

ေခၚၿပီ့သုဵ့တာပါ…

External

Link

ဆုိရငးေတာံ

href=www.yourwebsite.com/yourfile.html#nameattribute ဆုိၿပီ့ေခၚဆုိႏုိငးပါတယး။ Anchors က အကယး၍ page ထဲမွာ #anchorname မရွိတဲ႔အခါ ဘာၿပႆနာမွမတတးပါဘူ့။ သူက ၂ငး့ page ရဲ႕ ထိပးဆုဵ့ကုိပဲ ေရြ့ခ္ယးေရာကးရွိသြာ့ပါလိမးံမယး…

Body Elements အတြငး့မွာ style sheet ပါပဲ… အသုဵ့မ္ာ့တဲ႔ tag ေတြကေတာံ <div> နဲ< ႔ span> ပါ။ ႏွစးခုစလုဵ့က HTML styling အတြကးပါပဲ။

<span> နဲ႔ <div> တုိ႔ရဲ႕ အလုပးလုပးပုဵနဲ႔ သူတုိ႔ႏွစးခုရဲ႕ ကြာၿခာ့ခ္ကးေတြကုိ ေအာကးပါ ဥပမာေတြကုိၾကညးံၿခငး့ၿဖငးံ

Page 58 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

သိသာထငးရွာ့ေစပါလိမးံမယး။ Tags

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<span>

Inline Element တစးခုပဲၿဖစးတယး။ ဥပမာ-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>Style Sheets by WWM</title> </head> <body> <p>This is just demostration for <span> Style Sheet in Body Elements </span> by WWM</p> </body> </html> ဒီအတုိငး့ဆုိရငး span ထညးံထာ့လဲ မိမိရဲ႕ စာပုိဒးက ဘာမွေၿပာငး့လဲသြာ့မွာမဟုတးပါဘူ့။ ဒါေပမဲ႔ ၂ငး့ကုိ style အနညး့ငယးေၿပာငး့ခ္ငးတယးဆုိရငး အေပၚက Head Elements မွာ Style Tag ကုိသုဵ့ၿပီ့ color အနီေရာငးထညးံၾကညးံပါမယး.. ၿပီ့ရငး ၂ငး့ class ကုိ <span class=”test”> ဆုိၿပီ့ေခၚသုဵ့လုိကးမယးဆုိရငး

<span></span>

ဒီႏွစးခုၾကာ့က

စာသာ့ေလ့ေတြက

အနီေရာငးေၿပာငး့သြာ့ပါလိမံးမယး…

Class attribute ကုိသုဵ့ၿပီ့ စာလုဵ့ကုိ အနီေရာငးေၿပာငး့ထာ့တာပါ။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head>

Page 59 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <title>Style Sheets by WWM</title> <style type="text/css"> span.test {color: #ff0000} </style> </head> <body> <p>This is just demostration for <span

class="test">Style Sheet in Body Elements </span>by WWM</p> </body> </html>

<div>

ဒီ tag ကုိ block elements ဆုိၿပီ့အသုဵ့မ္ာ့ၾကပါတယး။ <span> tag နဲ႔မတူတာက <div> tag က စာပုိဒးမ္ာ့တဲ႔ေနရာမွာသုဵ့ၾကတာေတြ႔ရပါတယး။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>Style Sheets by WWM</title> <style type="text/css"> div.important {color: #ff0000} </style> </head> <body>

Page 60 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <p>Congratulations on the purchase of your sword!

Using a sword is fun and easy. Just be sure to follow these important safety tips. </p> <div class="important"> <p> <em>Never</em> hold your sword by the pointy end. </p> <p> <em>Always</em> be sure to stick the pointy end into the other guy before he does the same to you. </p> </div> <p> And remember, if you or your surviving kinsfolk are not fully satisfied, we have a money-back guarantee! </body> </html> ဒါက Example ပါ။

<div align="right" class="greensection" style="color: lime">div text</div> <div> element မွာ သူ႔ရဲ႕ ကုိယးပုိငး attribute ေတြေတားေတားမ္ာ့မ္ာ့ရွိပါတယး .. အသုဵ့ှငးတဲ႔ tag အခ္ဳိ႕ကုိေဖားၿပလုိကးပါမယး။ Tag

Example

<div align=?>

<div align=”center”> or <div align=”left”> or <div align=”right”> or <div align=”justify”>

<div width=?>

<div width=”2”> , Pixel or Interger Value မ္ာ့သာၿဖစးသညး။

<div height=?>

<div height=”2”> , Pixel or Interger Value မ္ာ့သာၿဖစးသညး။

အခု ကၽြနးေတားတုိ႔ <div> နဲ႔ <span> ကုိေပါငး့ၿပီ့ေတာံ ဥပမာ ၾကညးံပါမယး… အနီေရာငးေၿပာငး့သြာ့ပါလိမံးမယး…

Page 61 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <span class=”test”> ေၾကာငးံ ေပၚလာတာပါ။ <div class=”important”> ေၾကာငးံ ေပၚလာတာပါ။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>Style Sheets by WWM</title> <style type="text/css"> div.important {color: #ff0000} span.test {color: #ff00ff} </style> </head> <body> <p>

<span

class="test">Congratulations</span>

on

the

purchase of your sword! Using a sword is fun and easy. Just be sure to follow these important safety tips. </p> <div class="important"> <p> <em>Never</em> hold your sword by the pointy end. </p> <p> <em>Always</em> be sure to stick the pointy end into the other guy before he does the same to you. </p> </div> <p> And remember, if you or your surviving kinsfolk are not fully satisfied, we have a money-back guarantee! </body>

Page 62 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

</html>

Line Breaking ဆုိတာ စာေၾကာငး့ကုိ ေအာကးကုိ ခြဲခ္လုိကးၿခငး့ပဲၿဖစးတယး။ အသုဵ့ၿပဳတဲ႔ အဓိက tag ကေတာံ <br/> ဆုိတာပါပဲ။

ဒါက Example ပါ။

<p>This is a line of text with a linebreak here.<br /> This is text after</p> ဒါဆုိရငး

This is a line of text with a linebreak here This is text after ဆုိၿပီ့ ႏွစးေၾကာငး့ၿဖစးသြာ့ပါလိမးံမယး.. အဲ႔လုိ ႏွစးေၾကာငး့ၿဖစးေအာငး မိမိခြဲခ္ခ္ငးတဲ႔ ေနရာမွာ <br/> ဆုိတဲ႔ tag ေလ့ကုိခ္ထာ့လုိကးရုဵပါပဲ …

Line Breaking မွာ <br/> တစးခုတညး့မဟုတးပါဘူ့ .. အကယး၍ ကၽြနးေတားတုိ႔ေရ့ထာ့တဲ႔ စာေၾကာငး့ကုိ မခြဲခ္ငးဘူ့ တစးဆကးတညး့ပဲၿဖစးေစခ္ငးတယးဆုိရငး <nobr> tag ကုိသုဵ့ေပ့ရပါလိမးံမယး… ကၽြနးေတားတုိ႔ေရ့လုိကးတဲ႔ စာသာ့က အရမး့ရွညးေနရငး

<br>

မခဵထာ့ေသားလညး့

ေနာကးတစးေၾကာငး့ဆငး့သြာ့ေပ့ပါတယး..

browser

ဒါလုိမ္ာ့မလုိခ္ငးဘူ့ဆုိရငး

က

သူ႔ရဲ႕

<nobr>

width

ကုိသုဵ့ရပါတယး။

ၿပညးံၿပီဆုိတာနဲ႔ <br/>

ကုိ

တစးခုတညး့ေရ့ေပမဲ႔ <nobr> ကေတာံ အဖြငးံအပိတး tag ေတြပါှငးပါတယး .. (<nobr>your text</nobr>)

စာတမး့ေတြက ကြယးသြာ့ပါတယး ..

<p>This is a line of text with a linebreak here.<br /> This is text after</p> <p><nobr>This is a run of nobreak text to be used as an example, This is a run of nobreak text to be used as an example, This is a run of nobreak text to be used as an example, </nobr></p> ပုိကုိၾကညးံပါ .. <nobr> ကုိသုဵ့ထာ့တဲ႔အတြကး browser က automatic line break မလုပးသြာ့ပါဘူ့။

Page 63 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

နဵပါတးစဥးေလ့ေတြတပးမယး… Bullet ေလ့ေတြတပးၿပီ့ မိမိတုိ႔ရဲ႕ လူစရငး့ ေငြစရငး့ စသညးတုိ႔ကုိတနးဆာ ဆငးမယးဆုိရငးေတာံ List Element ကုိသုဵ့ေပ့ရပါတယး။

List Element ကုိကၽြနးေတားတုိ႔ ေယဘုယ္အာ့ၿဖငးံ သုဵ့ပုိငး့ပုိငး့လုိကးပါမယး… ဒါမွမွတးမိလြယးမွာပါ။ ဿ. Physical List Styles ၀. Virtual List Styles ၁. List Items ဆုိၿပီ့ ခြဲၿခာ့လုိကးပါမယး.. တစးခုၿခငး့စီနဲ႔သူတုိ႔မွာပါှငးတဲ႔ tag ေတြကုိ ၾကညံးရေအာငး။ List

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

Physical List Styles

ဒီအထဲမွာ <ul><ol><dl> ေတြပါှငးၾကပါတယး။ Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<dl>

Definition List လုိ႔ေခၚပါတယး။ ၂ငး့ element ထဲမွ content မ္ာ့၏ အဓိပၸါယး ေဖားၿပခ္ကးအတြကးသုဵ့သညး။

Definition Term Definition

<dl> <dt>Term 1</dt> <dd>Term 1 definition</dd> <dt>Term 2</dt> <dd>Term 2 definition</dd> </dl> ဒါေၾကာငးံ Definition Term နဲ႔ Definition ေတြစုထာ့တဲ႔ List ကုိ Definition List <dl> လုိ႔ေခၚဆုိသညး။ <ol>

Ordered List <ol>က ၂ငး့ element ထဲမွာရွိတဲ႔ <li> ေတြရဲ႕ content ေတြကုိ

အစဥးလုိကး

ေနရာခ္ထာ့ေပ့တယး…

A,B,C,D

သုိ႔မဟုတး

1,2,3,4 အဲ႔လုိ အစဥးလုိကးခ္ထာ့ေပ့တာကုိေၿပာတာပါ။

<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li>

Page 64 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </ol> အဲ႔လုိဆုိရငး Browser မွာ ေအာကးပါအတုိငး့ Default value ၿဖစးတဲ႔ 1., 2., 3… ေတြကုိထညးံေပ့သြာ့မွာပါ။

1. List item 1 2. List item 2 3. List item 3 အကယး၍ မိမိစိတးၾကိဳကးထပးၿပီ့ၿပငးဆငးမယးဆုိရငးေတာံ ၂ငး့မွာ ကုိယးပုိငး attribute ေတြရွိပါတယး.. အဲ႔ဒါေတြကေတာံ..

<ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> Attribute

ရွငး့လငး့ခ္ကး

<ol type=”?”>

သူကေတာံ ေရွ႕ဆုဵ့မွာ အစဥးလုိကးတပးမဲ႔ နဵပါတး သို႔မဟုတး

အကၡရာကုိ

သတးမွတးႏုိငးပါတယး။

ဥပမာ…

<ol type="A" Or <ol type="a" Or <ol type="1" Type ရဲ႕ value ေတြကေတာံ

none [no marker is used] A [capital letters] a [lower-case letters] I [large roman numerals] i [small roman numerals] upper-alpha [capital letters] lower-alpha [lower-case letters] upper-roman [large roman numerals] lower-roman [small roman numerals] decimal [integer numbering DEFAULT] disc [default solid bullet]

Page 65 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET square [solid square] circle [hollow bullet] round [hollow bullet] <ol

ေရွ႕ဆုဵ့မွာတပးမဲ႔ နဵပါတး သုိ႔မဟုတး အကၡရာက

start=”value”>

ဘယးကေနစမွာလဲဆုိတာ သတးမွတးေပ့ရတာပါ။ ဥပမာ

type=”1”

ဒါကုိ

ကစခ္ငးတယးဆုိရငး

ကၽြနးေတားတုိ႔က

5

start=”5”

ဆုိၿပီ့ထညးံေပ့ရပါတယး။ အဲ႔လုိဆုိရငး

List

က

5,6,7….

အဲ႔လုိ

အစဥးလုိကးသြာ့ပါလိမးံမယး …

<ol start="A" Or <ol type="E" Or <ol type="5"

<ul>

Unordered List ကေတာံ Ordered List နဲ႔သိပးမကြာပါဘူ့ .. ဒါေပမဲ႔ သူ႔ရဲ႕ default ပုဵစဵကေတာံ bullet ေလ့ေတြနဲ႔ List ကုိၿပတာပါပဲ။

<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> အဲ႔လုိဆုိရငး Browser မွာ ေအာကးပါအတုိငး့ Default value ၿဖစးတဲ႔ Disc Bullet ေလ့ေတြကုိထညးံေပ့သြာ့မွာပါ။

. List item 1 . List item 2 . List item 3 အကယး၍ မိမိစိတးၾကိဳကးထပးၿပီ့ၿပငးဆငးမယးဆုိရငးေတာံ ၂ငး့မွာ ကုိယးပုိငး attribute ေတြရွိပါတယး.. အဲ႔ဒါေတြကေတာံ..

<ul type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>

Page 66 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET Attribute

ရွငး့လငး့ခ္ကး

<ul type=”?”>

သူကေတာံ ေရွ႕ဆုဵ့မွာ အစဥးလုိကးတပးမဲ႔ နဵပါတး သို႔မဟုတး

အကၡရာကုိ

သတးမွတးႏုိငးပါတယး။

ဥပမာ…

<ul type="A" Or <ul type="a" Or <ul type="1" Type ရဲ႕ value ေတြကေတာံ

none [no marker is used] A [capital letters] a [lower-case letters] I [large roman numerals] i [small roman numerals] upper-alpha [capital letters] lower-alpha [lower-case letters] upper-roman [large roman numerals] lower-roman [small roman numerals] decimal [integer numbering] disc [default-solid bullet] square [solid square] circle [hollow bullet] round [hollow bullet] <ul

ေရွ႕ဆုဵ့မွာတပးမဲ႔ နဵပါတး သုိ႔မဟုတး အကၡရာက

start=”value”>

ဘယးကေနစမွာလဲဆုိတာ သတးမွတးေပ့ရတာပါ။ ဥပမာ

type=”1”

ဒါကုိ

ကစခ္ငးတယးဆုိရငး

ကၽြနးေတားတုိ႔က

5

start=”5”

ဆုိၿပီ့ထညးံေပ့ရပါတယး။ အဲ႔လုိဆုိရငး

List

က

5,6,7….

အဲ႔လုိ

အစဥးလုိကးသြာ့ပါလိမးံမယး …

<ul start="A" Or <ul type="E" Or

Page 67 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <ul type="5"

အေပၚအတနး့က Ordered List ၿဖစးၿပီ့ ေအာကးတနး့ကေတာံ Unordered List ၿဖစးတယး။ Virtual List Styles

ဒီအထဲမွာ <menu><dir> ေတြပါှငးၾကပါတယး။ ဒါေတြအာ့လုဵ့က အေပၚ <ol><ul> tag ေတြနဲ႔ အတူတူပါပဲ… ဒါေၾကာငးံ တစးခ္ဳိ႕ attribute ေတြကုိေတာံ အေပၚမွာပဲၾကညံးပါ။ Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<menu>

ေယဘုယ္အာ့ၿဖငးံ ဒီ tag ကုိ line per item အတြကးသုဵ့ပါတယး …

<menu> <li>First item in the list</li> <li>Second item in the list</li> <li>Third item in the list</li> </menu> <dir>

သူကေတာံ short item အတြကးသုဵ့ပါတယး …

<dir> <li>A - H</li> <li>I - M</li> <li>N - R</li> <li>S - Z</li> </dir> ဒီ

tag

ေတြက

အၿဖစးထာ့ပါတယး…

<ul>

tag

ရဲ႕

တစးၿခာ့

bullet

ေတြနဲ႔

default

ပုဵစဵေၿပာငး့သုဵ့ခ္ငးရငးေတာံ

အေပၚကအတုိငး့ type attribute ေၿပာငး့ၿပီ့သုဵ့လုိ႔ရပါတယး။ List Items

Data Information ေတြအတြကး ေဖားၿပေပ့ရနးၿဖစးပါတယး… သူ႔မွာပါှငးတဲ႔ tag ေတြကေတာံ <li> ဆုိတဲ႔ List , <dt> Definition Term

Page 68 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <dd> Definition ေတြပါှငးၾကပါတယး.. အေပၚက

အသုဵ့ၿပဳပုဵေတြကုိၾကညးံ

လုိကးတာနဲ႔

ဒါေတြက

အေထြအထူ့

ေၿပာစရာမလုိေလာကးေတာံပါဘူ့။ ေအာကးပါ ဥပမာမွာဆုိရငးေတာံ အခုေၿပာတဲ႔ List ေတြအာ့လုဵ့ ပါပါတယး။

<dir> <li>A - H</li> <li>I - M</li> <li>N - R</li> <li>S - Z</li> </dir>

HTML ထဲကုိ Video , Sound, Image စသညးံ Multimedia နဲပကးသကးတဲ႔ အပုိငး့ေတြ ေတားေတားမ္ာ့မ္ာ့ထညးံသြငး့အသုဵ့ၿပဳၾကပါတယး။ ေသသပးတဲ႔ရုဵ တစးခုတငးမကဘူ့ လွပတဲ႔ Web Page တစးခုၿဖစးလာဖုိ႔ Multimedia အပုိငး့ေလ့ေတြ ထညးံေပ့သငးံပါတယး … Plain Text ေတြပဲဆုိရငး ဘယးသူမွ စိတးှငးစာ့မႈ ရွိမွာမဟုတးေတာံပါဘူ့။ Multimedia အပုိငး့မွာ ကၽြနးေတားတုိ ေအာကးပါအတုိငး့ Tag အခ္ဳိ႕ ခြဲၿခာ့ေဖားထုတးေပ့လုိကးပါတယး။ <img> <bgsound> <sound> <area> <map> <object> စသညးတုိ႔ပဲၿဖစးပါတယး။ Note: - Tag တစးခုစီတုိငး့မွာ ကုိယးပုိငး attribute ရွိတယးဆုိတာ ထပးမဵသတိေပ့လုိကးပါတယး။ ကဲ.. ၾကညံးလုိကးရေအာငး..

Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<img>

<img> tag မွာ လုိအပးတဲ႔ attribute ႏွစးခုရွိပါတယး… အဲ႔ဒါေတြကေတာံ src လုိ႔ေခၚတဲ႔ Source (ပုဵထာ့ရာ လမး့ေၾကာငး့) နဲ႔ alt လုိ႔ေခၚတဲ႔ alternative text (ပုဵအေပၚမွာ Mouse Pointer တငးလုိကးတာနဲ႔ ေဖားၿပ) ေတြပဲၿဖစးတယး။

<img src="my-computer.png" alt="Computer">

Page 69 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>Multimedia by WWM</title> <body> <div align=center> <img src="http://www.planetcreator.net/images/pnc.png" alt="PlanetCreator"> Be Right Back <img src="my-computer.png" alt="Computer"> My Computer </div> </body> </html> သူ႔မွာသုဵ့တဲ႔ attribute အနညး့ငယးရွိပါတယး။ attribute

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<img align=?

ပုဵကုိ text ရဲ႕ ဘယးညာ အေပၚေအာကး ထာ့ခ္ငးတယးဆုိရငး align ဆုိတဲ႔ attribute ကုိသုဵ့ေပ့ရပါတယး။ ေအာကးပါပုဵမွာ alig=”right” ဆုိၿပီ့ထာ့လုိကးတဲ႔ အတြကး ပုဵက ညာဘကးထဲကုိ ေရာကးေနတာ ေတြ႔ရပါလိမံမယး …

Page 70 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<img src="my-computer.png" alt="Computer" align=”right”> Align attribute မွာ Left | Right | Top | Texttop | Middle | Absmiddle | Baseline | Bottom | Absbottom ဆုိၿပီ့ value ေတြသုဵ့လုိ႔ရပါတယး။ ကိုယးတုိငး တစးခုၿခငး့ စမး့ၾကညးံပါ။ <img width=?> <img height=?>

ဒါေတြကေတာံ ပုဵရဲ႕ အလ္ာ့လုိကး width နဲ႔ အနဵ height ေတြကုိ သတးမွတးတာပဲၿဖစးတယး။

ထညးံသြငး့ရမဲ႔

value

ကေတာံ

Positive integer pixel values ေတြပဲၿဖစးတယး။ <img src="my-computer.png" alt="Computer" height=”50” width=”30%”>

<img vspace=?> <img hspace=?>

Vertical space ကုိ vspace ဆုိၿပီ့သုဵ့တယး .. သူကေတာံ ပုဵရဲ႕ အေပၚပုိငး့

သုိ႔မဟုတး

ေအာကးပုိငး့ကုိ

white

space

ထညးံသြငး့တာပဲ။ top and bottom padding ထညးံတယးလုိ႔ တစးခ္ဳိ႕က သတးမွတးတယး။ Horizontal space ကုိ vspace အေနနဲ႔သုဵ့ကာ သူကကေတာံ ဘယးသုိ႔မဟုတး ညာဘကးထဲမွာ white space ထညးံသြငး့တာပဲ။ Left and right side padding ထညးံတယးလုိ႔ လညး့ေခၚတယး။ <img

src="my-computer.png"

alt="Computer"

hspace=”50” vspace=”20”> ထညးံသြငး့ရတဲ႔ value ေတြကေတာံ Positive integer pixel values ေတြပဲၿဖစးတယး။

Page 71 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<img vspace= ”20”

<img hspace= ”50”

<img border=?>

ပုဵရဲ႕

ေဘ့ပတးလညးက

ေဘာငးအထူအပါ့ကုိ

ၿပငးမယးဆုိရငး

border ကုိသုဵ့ေပ့ရပါတယး။

<img border= ”20”

<img src="my-computer.png" alt="Computer" border=”20”> My Computer <img

Usemap ကုိ <map> tag နဲ႔တြဲၿပီ့သုဵ့ေပ့ရပါတယး … map tag

usemap="?”>

ရဲ႕ name attribute မွာ ေၾကၿငာထာ့တာကုိ img ကေန ယူသုဵ့တာပဲၿဖစးတယး။

map

tag

ကုိေတာံ

ေအာကးမွာၿပထာ့ပါတယး။ <bgsound>

Web

document

တစးခုကုိ

ဖြငးံၾကညးံေနတဲ႔အခ္ိနးမွာ

ေနာကးခဵသီခ္ငး့သဵေလ့ေတြ

ထညးံမယးဆုိရငးေတာံ <bgsound> ဆုိတာေလ့ကုိသုဵ့ေပ့ရပါတယး….

<bgsound src="http://www.worldwidemyanmar.com/i-want-to-understandu.mp3" loop="infinite" /> Loop ဆုိတဲ႔ attribute ကေတာံ ဒီသီခ္ငး့ကုိ ဘယးႏွစးၾကိမး ဖြငးံမွာလဲဆုိတာပါ။ <bgsound>

က

အခုအခ္ိနးမွာေတာံ

အသုဵ့နညး့ပါတယး…

အရငးကေတာံ

ေတားေတားေလ့သုဵ့ခဲ႔တယးေပါ႔ .. embed ဆုိတဲ႔ tag ကုိအသုဵ့မ္ာ့သလုိ <embed src="beatles.mid" /> Object tag

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="flower.wav" /> </object> Page 72 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Hyperlink tag <a href="beatles.mid">Play the Beatles</a> စသညးတုိ႔ကိုအသုဵ့မ္ာ့လာပါတယး။ <sound>

<bgsound> နဲ႔မကြာပါဘူ့ background မွာပဲအသုဵ့ၿပဳတာပါ။

<bgsound src="http://www.worldwidemyanmar.com/i-want-tounderstand-u.mp3" delay=”5” /> Delay ဆုိတာ Web ဖြငးံၿပီ့တာနဲ႔ အခ္ိနးဘယးေလာကးၾကာမွ​ွ သီခ္ငး့ပြငးံဖုိ႔အတြကး သတးမွတးတဲ႔ စကၠနး႔ပါ။ <map>

<map> tag က ပုဵမွ မိမိစိတးၾကိဳကး ေၿမပုဵအကြကးေလ့ေတြခ္တာပါပဲ … Adobe ရဲ႕ Dreamweaver မွာဆုိရငးေတာံ

ဆုိၿပီ့ရိွပါတယး။ ဥပမာကုိအရငးၾကညးံပါ။ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html> <head> <title>Multimedia by WWM</title> <body> <img src="my-computer.png" width="145" height="126" alt="My Computer" usemap="#mycomputermap" /> <map name="mycomputermap"> <area shape="rect" coords="100,100,50,50" alt="Monitor" href="monitor.html" /> <area shape="circle" coords="10,70,30" alt="System Unit" href="cpu.html" /> </map> </body> </html>

Page 73 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ကၽြနးေတားတုိ႔မွာ My Computer ဆုိတဲ႔ ပုဵတစးပုဵ ရွိတယး… အဲ႔ဒါကုိ ပုဵတစးခုလုဵ့ကုိ ၿဖစးေစ ပုဵရဲ႕ တစးစိတးတစးေဒသကုိၿဖစး Map tag နဲ႔ Link ေတြထာ့ၿပီ့သတးမွတးလုိ႔ရပါတယး။ အေပၚက Source Code မွာဆုိရငး my-computer.jpg ဆုိတဲ႔ ပုဵတစးခုတညး့ကုိ Monitor ကုိေထာကးလုိကးရငး Monitor ဆုိၿပီ့စာေပၚလာသလုိ Click ႏုိပးလုိကးရငး monitor.html ဆုိတဲ႔ Link ကုိေရာကးသြာ့ပါမယး .. ထုိ႔အတူ CPU ပုဵေလ့ဆုိရငးလညး့ အဲ႔အတုိငး့ပဲ cpu.html

ကုိေရာကးသြာ့ပါလိမံးမယး …

ဒါကုိ

အထူ့ၿပဳလုပးေဆာငးေပ့တာေတြက

coords ဆုိတဲ႔ attribute ပဲၿဖစးတယး။

monitor.html

cpu.html

map ရဲ႕ shape attribute မွာ value သုဵ့မ္ဳိ့ရွိပါတယး။ rect, circle, poly ေတြပဲၿဖစးၾကတယး … coords မွာ rect left-x, top-y, right-x, bottom-y circle center-x, center-y, radius poly x1, y1, x2, y2, ..., xN, yN ဆုိၿပီ့တုိငး့တာပါတယး။ … အေပၚက ပုဵမွာကေတာံ coords="100,100,50,50" ဆုိၿပီ့ေပ့ထာ့တာပါ။ ဒါေတြရဲ႕ တြကးခ္ကးမႈကုိေတာံ သုဵ့ပါမ္ာ့ရငး လြယးကူသြာ့ပါလိမးံမယး … ေနာကးထပး

အေပၚက

ေဘ့ပတးလညးမွာ ရွိတယးဆုိတာကုိ

ပုဵမွာ

ထူ့ၿခာ့သြာ့တာတစးခုရွိတယး …

အၿပာေရာငးပုဵစဵေလ့ သိသာေအာငး

အဲ႔ဒါကေတာံ

သကးှငးလာပါတယး..

ၿပေပ့ထာ့တာပါ…

ပဵုရဲ႕

ဒီပုဵမွာ

အကယး၍

ဒီ

Link

Link

ကုိ

မေပၚေစခ္ငးဘူ့ဆုိရငးေတာံ border=”0” ဆုိတာေလ့ကုိ ထညးံၿပီ့သုဵ့လုိ႔ ရပါတယး။ အဲ႔လုိဆုိရငး အၿပာေရာငး ေဘာငးေလ့ ေပ္ာကးသြာ့ပါလိမးံမယး … <object>

ဒီ tag က multimedia တငးမကဘူ့ တစးၿခာ့ html ဆုိငးရာ embedded content

ေတြမွာ

အစာ့ထုိ့သုဵ့လုိ႔ရတယး.. သုဵ့ေနၾကတယး…

APPLET, EMBED, BGSOUND, SOUND and IMG elements

တုိ႔ေတြရဲ႕ ကုိယးစာ့

သုဵ့လုိ႔ရတယး။

<object

Page 74 of 197

codetype="application/java-vm"

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET codebase="http://www.worldwidemyanmar.com/applet.class " classid="java:program.start" height="100" width="100"> <param name="options" value="xqz" /> If you can read this you are too close.<br /> AND your browser does not support Java. </object>

သူမွာသုဵ့တဲ႔ attribute ေတြလညး့ ေတားေတားမ္ာ့ပါတယး .. align, width, height အဲ႔ဒါေတြကေတာံ ရွငး့ၿပတာမ္ာ့ေနေတာံ မွတးမိေလာကးပါၿပီ။ codebase ဆုိတဲ႔ attribute

ကေတာံ object code ဘယးနာ့မွာရွိတယးဆုိတာ

သတးမွတးေပ့ဖုိ႔ URL အတြကးသုဵ့ပါတယး။ codetype ကေတာံ internet media type ကုိေခၚဆုိတာၿဖစးတယး။ ဘယးအေပၚမွာ အမွီၿပဳသလဲဆုိေတာံ classid အေပၚမွာပါ။ classid ကေတာံ URL သု႔ိမဟုတး Windows Registry မွာ သတးမွတးထာ့တဲ႔ values ကုိထညးံေပ့ရတာၿဖစးတယး။

Block Formating မွာ ကၽြနးေတားတုိ႔ရုိကးထညးံထာ့တဲ႔ content ေတြကိုပုဵစဵခ္ဖုိ႔အတြကး အဓိက လုပးေဆာငးေပ့ပါတယး.

ဒီေနရာမွာ ပါှငးတဲ႔ tag ေတြကေတာံ <Address> <Hx> <P> <Blockquote> <Marquee> <Pre> <Center> <Multicol>

ေတြပဲၿဖစးတယး။ Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<address>

Web Page

ေတြမွာ လိပးစာအတြကးေရ့ေတာံမယးဆုိရငး ဒီ tag ကုိအသုဵ့ၿပဳတာ

မ္ာ့ပါတယး။

Page 75 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <address>1234 Nowhere St.<br />Anywhere, State 000019999</address> </body> ဒီ

tag

ကုိသုဵ့လုိကးတဲ႔အတြကး

သူ႔ရဲ႕

Default

က

Italic

ေလ့ေတြနဲ႔ေဖားၿပေပ့သြာ့ပါလိမးံမယး … သူ႔မွာလညး့ align, height, width ဆုိတဲ႔ attribute ေတြပါရွိပါတယး။ <Hx>

<h1>, <h2>, <h3>, <h4>, <h5>,<h6> ဆုိတဲ႔ Heading အတြကးသုဵ့တဲ႔ tag

(<h1>,

ေတြကုိေၿပာတာပါ။ 1 to 6 အထိရွိပါတယး။

<h2>, <h3>, <h4>, <h5>, <h6>)

<body> <h1 align="center">Heading level 1 text</h1> <h2 align="center">Heading level 2 text</h2> <h3 align="center">Heading level 3 text</h3> <h4 align="center">Heading level 4 text</h4> <h5 align="center">Heading level 5 text</h5> <h6 align="center">Heading level 6 text</h6>

Page 76 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </body>

<h6> က Point Size အငယးဆုဵ့ ၿဖစးၿပီ့ေတာံ <h1> ကေတာံ Point Size အၾကီ့ဆုဵ့ပါ။ Heading အတြကးၿဖစးတဲ႔ ၂ငး့တုိ႔မွာ Bold Type ေတြပဲၿဖစးတယး။ <p>

Paragraph ကုိေဖားညြနး့တာၿဖစးၿပီ့ စာေတြကုိ ပုဒးနဲ႔ခြဲၿပီ့ေရ့ခ္ငးတယးဆုိရငး ဒီ tag ကုိသုဵ့ေပ့ရပါတယး။

<p align=”right” ကုိသုဵ့ထာ့တဲ႔အတြကး စာသာ့ေတြ က ညာဘကးထဲကုိကပးသြာ့တာပါ

<body> <p align="right">

* Very early versions of HTML (before 2.0) did not specify P as a container element, and some early browsers may become confused when seeing the tag. * Netscape versions 1.0-1.22 only understood ALIGN values of LEFT and CENTER. Support for ALIGN=RIGHT began in version 2.0.<p> <p> ဆုိၿပီ့ စာပိုဒးခြဲထာ့တာပါ။

* he 'justify' value of the ALIGN attribute is currently only supported in the 4.0 Beta 2 and above versions of Netscape and Internet Explorer. </p> </p> </body>

စာပုိဒးမ္ာ့ကုိ <p> tag ကုိသုဵ့ၿပီ့ခြဲထာ့တာပါ။ <blockquote

တစးခ္ဳိ႕စာသာ့ေတြက အရမး့ရွညးလ္ာ့ေနရငး ကၽြနးေတားတုိ႔က အနညး့ငယးေလာကးပဲ

>

ေရ့သာ့တာပဲၿဖစးေစ

အၿခာ့

text

ေတြနဲ႔မတူပဲ

တစးမႈထူ့ၿခာ့စြာ

Quote

လုပးသတးမွမယးဆုိရငး ဒီ tag ကုိသုဵ့ပါတယး။

Page 77 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <h2>Code example: BLOCKQUOTE element</h2> <hr> filler text <blockquote cite="http://www.example.com/bqcitation.htm">blockquote text</blockquote> filler text <hr> </body> အေပၚပုဵမွာဆုိရငး Quote လုပးထာ့တဲ႔ ေနာကးတစးခုက

cite

ပဲၿဖစးတယး။

ကုိေဖားၿပခ္ငးတယးဆုိရငးေတာံ

cite

text နဲ႔ ရုိ့ရုိ့ text နဲ႔ ပုဵမတူပါဘူ့ …

Quote

လုပးထာ့တဲ႔

ကုိသုဵ့ေပ့ရပါတယး ..

cite

Source က

url

URL ကုိ

ဖြငးံမွာေတာံမဟုတးပါဘူ့။ <marquee>

Web page ကုိေရ့ေနတဲ႔အခ္ိနးမွာ စာလုဵ့နဲ႔ ပုဵေလ့ေတြက သကးှငးလႈပးရွာ့မႈေတြပါရငး ပုိၿပီ့ ၾကညးံလုိ႔ေကာငး့ပါတယး … စာသာ့ေတြ လႈပးေနတာတုိ႔.. ေရြ႕လ္ာ့ေနတာတုိ႔ကုိ ၿပဳလုပးမယးဆုိရငးေတာံ <marquee> ကုိသုဵ့ေပ့ရပါတယး။

<body>

Page 78 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <marquee> I'm marquee </marquee> </body>

ဒီအတုိငး့ဆုိရငး I‟m marquee ဆုိတဲ႔ စာသာ့ေလ့က ညာဘကးကေန ဘယးဘကးထဲကုိ သြာ့ေနပါလိမးံမယး … marquee ရဲ႕ attribute ေတြကေတာံ behavior, direction, bgcolor, height, width, loop, vspace, scollldelay စသညးတုိ႔ပဲၿဖစးတယး။ attribute

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

behavior

Marquee

ရဲ႕

လႈပးရွာ့မႈပုဵစဵကုိ

သတးမွတးဖုိ႔အတြကး

သုဵ့တာၿဖစးပါတယး။ သူ႔မွာပါတဲ႔

value

ေတြကေတာံ

scroll,

slide,

alternate

ဆုိၿပီ့ၿဖစးၾကပါတယး။ Scroll <marquee

behavior="scroll"

direction=”left”>Your

scrolling text goes here</marquee> Marquee ရဲ႕ default value လညး့ၿဖစးပါတယး။ Slide <marquee

behavior="slide"

direction=”left”>Your

scrolling text goes here</marquee> ဒီ

value

ကေတာံ

ဘယးဘကးထဲကုိသြာ့ၿပီ့ေတာံ

drection

က

left

ဆုိရငး

ဘယးဘကးအဆုဵ့ေရာကးတဲ႔

အခ္ိနးမွာ ရပးသြာ့ပါတယး။ Alternate <marquee behavior="alternate" direction=”left”>Your scrolling text goes here</marquee> သူက ဘယးၿပနး ညာၿပနး သြာ့တာပဲၿဖစးတယး။ direction

Marquee စာသာ့ကုိ အေပၚေအာကး ဘယးညာ သြာ့ဖုိ႔အတြကး သုဵ့တာၿဖစးတယး။ Values: Left [DEFAULT] | Right | Down | Up <marquee direction=”left”>Your scrolling text goes here</marquee>

scrollamount

ေရြ႕လ္ာ့ေနတဲ႔စာသာ့ေတြရဲ႕

အၿမနးႏႈနး့ကုိသတးမွတးမယး

ဆုိရငးေတာံ scrollamount ကုိသုဵ့ေပ့ရပါတယး။

Page 79 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET Values: Positive integer pixel amounts. <body> <marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee> </body> အေပၚက

ဥပမာကုိ

စမး့ၾကညးံလုိကးပါက

scrollamount

attribute ရဲ႕ value တနးဖုိ့မ္ာ့ေလ speed ၿမနးေလပါပဲ။ loop

ဒါကေတာံ marquee ရဲ႕ လႈပးရွာ့မႈ အၾကိမးအေရအတြကးပါ။ <body> <marquee behavior="scroll" direction="left" loop="1">Scroll Loop</marquee> </body> အေပၚက loop=”1” ဆုိရငး သူ႔ရဲ႕ လႈပးရွာ့မႈက တစးၾကိမးပဲ လုပးေဆာငးၿပီ့ ေပ္ာကးကြယးသြာ့ပါလိမးံမယး …

scrolldelay

ကၽြနးေတားတုိ႔ရဲ႕

စာသာ့ရဲ႕

အေႏွ့အၿမနးကုိ

ဒီ

scrolldelay

နဲ႔လညး့ သတးမွတးလုိ႔ရပါတယး။ ေအာကးပါ ဥပမာကုိ စမး့ၾကညးံရငး ပုိၿပီ့သိသာပါလိမးံမယး .. <body> <marquee behavior="scroll" direction="left" scrolldelay="400">ScrollDelay</marquee> </body> အေပၚကအတုိငး့ဆုိရငး

စာတမး့က

တစးထစးၿခငး့

သြာ့ေနပါလိမးံမယး .. scrolldealy ရဲ႕ value ကုိ Millisecond နဲ႔တုိငး့တာပါတယး။ <vspace>

ဒါေတြကေတာံ အထကးမွာေဖားၿပခဲ႔ၿပီ့ပါၿပီ။

<width> <height> Marquee အတြကး ကုိယးတုိငး စမး့သပးၾကညးံဖုိ႔ Code ေလ့ေတြပါ။ Example: 1 <body> <marquee behavior="scroll" direction="right"><marquee

Page 80 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET behavior="scroll" direction="up">Up up and away!</marquee></marquee> </body>

အေပၚက code ဟာ စာသာ့ေလ့ေတြကုိ ခပးေစာငး့ေစာငး့ေလ့ သြာ့ေနပါလိမးံမယး..

Exmaple: 2 <body> <marquee style="zindex:2;position:absolute;left:18px;top:97px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:200px;"scrollamount="3" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:1px;top:89px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:100px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:111px;top:7px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:302px;"scrollamount="4" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:225px;top:83px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:435px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:105px;top:53px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:432px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:168px;top:69px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:369px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:130px;top:117px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:289px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-

Page 81 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET size:14pt;color:#FF8C48;height:78px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:16px;top:57px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:56px;"scrollamount="5" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:300px;top:86px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:194px;"scrollamount="2" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:292px;top:10px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:251px;"scrollamount="6" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:278px;top:74px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:154px;"direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:241px;top:72px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:82px;"direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:276px;top:32px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:70px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:272px;top:15px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:334px;"direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:90px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:167px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-

Page 82 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:22px;top:76px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:12px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:89px;top:54px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:26px;top:72px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:358px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:3px;top:44px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Scrolling text</marquee> </body>

စာသာ့ေလ့ေတြကုိ အတနးလုိကးေလ့ေတြ အေရာငးနဲ႔ က္လာတဲ႔ပုဵပါ။ <pre>

HTML မွာ မိမိရုိကးထညးံထာ့တဲ႔ ပုဵစဵအတုိငး့ Browser မွာေပၚေစခ္ငးတယးဆုိရငး <pre> ဆုိတဲ႔ tag ကုိသုဵ့ေပ့ရပါတယး။

<body> <pre> This is World Wide Myanmar Training Center WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd </pre>

Page 83 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </body>

အေပၚက စာသာ့ေတြကုိ <pre> ဆုိတဲ႔ tag ကုိမသုဵ့ပဲနဲ႔ ထာ့ရငး စာလုဵ့ေတြက အတနး့လုိကး ၿဖစးသြာ့ပါလိမးံမယး … ဒါေပမဲ႔ Source Code မွာရုိကးထာ့တဲ႔အတုိငး့ ေပၚေစခ္ငးတယးဆုိရငးေတာံ <pre> tag ေလ့ခဵၿပီ့သုဵ့သြာ့ရပါတယး။ <center>

စာေတြကုိ အလညးမွာထာ့ခ္ငးတယးဆုိရငးေတာံ <center>tag ကုိသုဵ့ေပ့ရပါတယး။

<body> <center> This is World Wide Myanmar Training Center, WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd </center> </body> <hr>

Horizontal Line ေလ့တစးခုတာ့ခ္ငးတယးဆုိရငးေတာံ ဒီ tag ေလ့ကုိသုဵ့ပါတယး။

<hr> မွာ Closing Tag (</hr>) မပါ ပါဘူ့။

<hr width="30%" align="center" size="3" noshade color="#0000FF" /> ဒါဆုိရငး အၿပာေရာငး Line ေလ့ တစးခု Browser မွာၿမငးရမွာၿဖစးတယး။ noshade ဆုိတာ

html

မွာမထူ့ၿခာ့ေပမဲ႔

xhtml

မွာေတာံ

3D

မဟုတးတဲ႔

solid color

ေလ့ထညးံတာပဲၿဖစးတယး။

Page 84 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

<multicol>

DREAM IT, CODE IT BY PLANETCREATOR .NET

စာသာ့ေတြကုိ

သတငး့စာ

စာမ္ကးႏွာကဲ႔သု႔ိ

multi-col

format

နဲ႔ၿမငးခ္ငးတယးဆုိရငးေတာံ <multicol> ကုိသုဵ့ေပ့ရပါတယး။ <multicol cols="3" width="80%" gutter="20"> This is multi-column layout text that should be distributed evenly across 3 columns </multicol> Cols ဆုိတာ Column အေရအတြကးကုိေဖားၿပၿပီ့ gutter ဆုိတာကေတာံ columns ေတြရဲ႕ အကြာအေှ့ကုိ Pixel နဲ႔သုဵ့တာပါ။

Block Formating ၿပီ့ေတာံ Character Formatting ပါ။ စာသာ့ အၿပငးအဆငးနဲ႔ ပကးသကးတဲ႔အပုိငး့ ေတြကုိ အဓိက ဦ့စာ့ေပ့တဲ႔ tag ေတြနဲ႔ ပကးသကးတဲ႔အပုိငး့ေပါ႔။ စာသာ့ၿပငးဆငးတယးဆုိတဲ႔ ေနရာမွာ ကၽြနးေတားတုိ႔ေရ့ထာ့တဲ႔ စာသာ့ေတြကုိ သာမာနးထကးပုိၿပီ့ေတာံ ေပၚလြငးေအာငး၊ ပုိၿပီ့ေတာံ ရွငး့လငး့ၿပတးသာ့ေအာငး ေဖားၿပေပ့ဖုိ႔အတြကးကုိ ရညးညြနး့ပါတယး။ သူမွာ အဓိကသုဵ့တဲ႔ tag ေတြကုိေဖားၿပေပ့ရမယးဆုိရငးေတာံ -

<Abbr> <Cite> <Font> <Q> <Spell> <Sup>

<B> <Code> <I> <S> <Strike> <Tt>

<Big> <Dfn> <Inlineinput> <Samp> <Strong> <U>

tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<abbr>

Abbreviation

ရဲ႕

<Blink> <Em> <Kbd> <Small> <Sub> <Var>

အတုိေကာကးပါပဲ။

စာေၾကာငး့တစးခုတညး့မွာ

စာလုဵ့တစးလုဵ့၊

စာပုဒးတစးခုရဲ႕ အဓိပၸါယးကုိ ဖြငးံဆုိမယးဆုိရငး ၂ငး့စာသာ့မွာ Pointer ေထာကးလုိကးၿပီဆုိတာနဲ႔ tooltip text လုိပုဵစဵေဖားၿပေပ့တာပါ။ Send by <abbr title="facsimile">fax</abbr> အေပၚမွာဆုိရငး

fax ဆုိတဲ႔ စာတုိေလ့ကုိ

ေဖားၿပထာ့ၿပီ့ေတာံ

၂ငး့အေပၚမွာ pointer

ေထာကးလုိကးမွ facsimile ဆုိၿပီ့ေဖားၿပေပ့တာပါ။ <cite>

Citation text လုိ႔ေခၚပါတယး.. တနညး့အာ့ၿဖငးံ က္မး့ကုိ့၊ ကုိ့ကာ့ခ္ကး ေတြမွာသုဵ့ပါတယး။

<cite>citation text</cite>

Page 85 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS <font>

DREAM IT, CODE IT BY PLANETCREATOR .NET

HTML မွာအသုဵ့မ္ာ့တ႔ဲ tag တစးခုလညး့ၿဖစးပါတယး။ font ရဲ႕ အမ္ဳိ့အစာ့၊ အရြယးအစာ့နဲ႔ ပုဵစဵေတြကို သတးမွတးတဲ႔ေနရာမွာ ဒီ tag ကုိသုဵ့ပါတယး။ သူ႔မွာသုဵ့တဲ႔ attribute ေတြကေတာံ color, face, font-weight, point-size, size ေတြပဲၿဖစးတယး။ attribute

ရွငး့လငး့ခ္ကးႏွငးံ ဥပမာ

color

ေရ့သာ့ထာ့တဲ႔ font ရဲ႕ အေရာငးကုိ ထညးံသြငး့သတးမွတးမယးဆုိရငးေတာံ color

attribute

ကုိသုဵ့ေပ့ရပါတယး။

color

မွာဆုိရငး

အေပၚက

ရွငး့လငး့ခဲ႔တဲ႔အတုိငး့ color name နဲ႔ hex color ေတြကုိသုဵ့လုိ႔ရပါတယး။

<font color="#0000FF">The COLOR attribute offers a GREAT alternative way to create visually distinct text/section markers in long runs of text</font> face

Font ရဲ႕ အမ္ဳိ့အစာ့ကုိေဖားၿပမယးဆုိရငး သုဵ့တာၿဖစးတယး။ Times, Arial စသညးၿဖစးေပါ႔။

<font face="Verdana">This is Verdana</font><br/> <font face="Times">This is Times</font><br/> <font face="Arial">This is Arial</font><br/> <font face="Zawgyi One">ဒါက ZawGyi Font ပါ</font><br/> <font face="Times, Verdana, System">Font Selection</font> ေရ့သာ့တဲ႔ေနရာမွာ

value

ေနရာမွာ

font

ရဲ႕

အမ္ဳိ့အမညးေတြကုိ

တုိကးရုိကးေရ့သာ့လုိ႔ရပါတယး။

Page 86 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚ code ရဲ႕ ေအာကးဆုဵ့က အပုိငး့မွာ “Times, Verdana, System” ဆုိၿပီ့ေရ့သာ့ထာ့တာကုိ ေတြ႔ရပါလိမးံမယး … ဆုိလုိတဲ႔ အဓိပၸါယးကေတာံ Times ဆုိတဲ႔ font ကုိ ဦ့စာ့ေပ့ၿပီ့ ညြနး့ပါတယး.. Times ဆုိတဲ႔ font က မိမိရဲ႕ ကြနးပ္ဴတာမွာ မရွိမွ verdana ကုိ ဒုတိယ ဦ့စာ့ေပ့အေနနဲ႔ ေၿပာပါတယး။ အကယး၍ အထကးပါ font ေတြ မရွိဘူ့ဆိုမွ system ဆုိၿပီ့ browser

ရဲ႕

default

font

ကုိေၿပာပါတယး..

browser

ကလညး့

မိမိစကးထဲမွာ ရွိတဲ႔ font ေတြထဲကပဲ ထညးံတာၿဖစးတယး။ font-weight

Font ရဲ႕ အထူ့အပါ့လုိ႔ပဲေၿပာရမွာေပါ႔။ font-weight ရဲ႕ value မ္ာ့ေလ ပုိၿပီ့ bold ၿဖစးေလပဲ။ font-weight ရဲ႕ value ေတြကေတာံ Values: 100 | 200 | 300 | 400 [DEFAULT]| 500 | 600 | 700 [Font ရဲ႕ Bold ပါ] | 800 | 900

<font font-weight=700>This is font weight</font><br/> point-size

Font ရဲ႕ အရြယးအစာ့ကုိသတးမွတးမယးဆုိရငးသုဵ့ပါတယး။

<font point-size=”20”>This is font size 20</font><br/> size

size နဲ႔ point-size နဲ႔ကုိ မေရာပါနဲ႔.. size ဆုိတာ 1 ကေန 7 အထိရွိတဲ႔ predefined size ကုိသတးမွတးတာၿဖစးတယး။

<font size="1">size 1</font><br/>

Page 87 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <font size="2">size 2</font><br/> <font size="3">size 3</font><br/> <font size="4">size 4</font><br/> <font size="5">size 5</font><br/> <font size="6">size 6</font><br/> <font size="7">size 7</font><br/> ဒါဆုိရငး အေပၚက ပုဵအတုိငး့ၿမငးရပါလိမံးမယး… သူ႔ကုိ ေအာကးပါအတုိငး့ သုဵ့လုိ႔ရပါတယး။

<font size=”+2”>This is font weight</font><br/> <font size=”-6”>This is font weight</font> ဒါကုိ + / - နဲ႔သတးမွတးလုိ႔ရပါတယး။ သူ႔ရဲ႕ Default Value က 3 ၿဖစးတဲ႔အတြကး

-5

ဆုိရငး

2

နဲ႔တူတာေပါ႔။

+1

ဆုိရငး

4

နဲ႔

အရြယးအစာ့တူပါလိမးံမယး ..

<q>

Quotations mark ေလ့ထညးံေပ့တာပါပဲ။ “…”

<q cite="http://www.worldwidemyanmar.com/">To be or not to be.</q> <spell>

ဒီ

tag

ကေတာံ

ေတားေတားေလ့အသုဵ့နညး့ပါတယး… Reference

ေတားေတားမ္ာ့မ္ာ့မွာလညး့

ေရ့သာ့ထာ့တာ မရွိေတာံပါဘူ့။ သူကေတာံ Netscape Mail or Composer editor

ေတြမွာ

စာလုဵ့အမွာ့ကုိေဖားၿပေပ့တာၿဖစးပါတယး။ <sup>

Superscripted လုိ႔ေခၚပါတယး။ စာလုဵ့ကုိ အေပၚသို႔ ထပးညြနး့တငးမယးဆုိရငး သုဵ့ပါသညး။

2 ကုိ 2 ထပးညြနး့ တငးထာ့တာပါ။

<body> <center><h2>SuperScripted Text</h2><hr> 2²=

4

ၿဖစးပါသညး။

တစး​းနညး့အၿဖငးံ

၀

၏

ႏွစးထပးသညး

၂

ၿဖစး၏။</center> </body>

<b>

Page 88 of 197

စာသာ့တစးခုကုိ Bold ထညးံခ္ငးတယးဆုိရငးေတာံ <b> tag ကုိသုဵ့ေပ့ရပါတယး။

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<b>This is Bold Text</b> <code>

HTML

မွာ

တစးခ္ဳိ႕

Coding

ေတြအတြကး

Character Entities

ေတြေၿပာငး့ၿပီ့ထညးံဖုိ႔ဆုိတာ

မလြယးကူပါဘူ့ ဒီအတြကး ဒီလုိ Code ေတြအာ့လုဵ့ကုိ <code> ဆုိတဲ႔ tag ထဲမွာထာ့ရငး Browser က ဒီ code မႈရငး့အတုိငး့ ေဖားၿပေပ့ပါလိမးံမယး…

<code>This is Greater Than > and Less Than < </code> <

နဲ႔

>

ေတြက

Source

ဆုိၿပီ့ရုိကးထညးံရပါတယး။

Code

ဒါေပမဲ႔

မွာ

ဒီအတုိငး့ရုိကးထညးံလု႔ိမေပၚပါဘူ့။

<code>

tag

&lt; or &gt;

ထဲမွာထညးံထာ့ရငးေတာံ

သူ႔ရဲ႕

မႈရငး့အတုိငး့ေပၚပါတယး။

<i>

Page 89 of 197

စာလုဵ့အေစာငး့ေလ့ေတြနဲ႔ ေပၚခ္ငးတယးဆုိရငး ဒီ <i> tag ကုိသုဵ့ေပ့ရပါတယး။

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<i>This is Italicied Text </i> <s> <strike>

စာလုဵ့ေတြကုိ အလယးကေန ၿဖတးမ္ဥး့တာ့ တဲ႔ပုဵစဵ လုပးခ္ငးတယးဆုိရငး သုဵ့ပါတယး.. ဒါကုိ strike လုိ႔ေခၚပါတယး.. strike ကုိ <s> သုိ႔မဟုတး <strike> ဆုိၿပီ့ေရ့သာ့လုိ႔ရပါတယး။

<body> <strike>strikethrough text</strike><br/> <s>strikethrough text</s> </body> <tt>

Text ေတြကုိ fixed-width font အၿဖစးသုဵ့တာပါ။ Tele Type Text သုဵ့တယးလုိ႔ေခၚတယး။

ပုဵမွနး font ပါ <tt> tag ကုိ သုဵ့ထာ့တဲ႔ တာပါ။

<body>Fixed-width text<br/> <tt>Fixed-width text</tt>

Page 90 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

</body> <big>

ပုဵမွနး font အမ္ဳိ့အစာ့ပါပဲ .. ဒါေပမဲ႔ သူက မသိမသာေလ့ ပုိၿပီ့ၾကီ့ပါတယး။

ပုဵမွနး font ပါ <big> tag ကုိ သုဵ့ထာ့တဲ႔ တာပါ။ <body> Big Text <br/> <big>Big Text</big> </body> <dfn>

စာသာ့တစးခုရဲ႕

အဓိပၸါယးကုိ

Define

လုပးတာၿဖစးတယး။

သူက

definition

term

လုိ႔လညး့ေခၚပါတယး။

Definition Term <body> This is <dfn>defining text</dfn> by WWM </body> <samp>

Sample လုိ႔ေခၚပါတယး။ Sample ေပ့လုိတဲ႔ စာသာ့ေတြကုိ အစီအစဥးက္က္ ရုိ့ရွငး့စြာ ေဖားၿပခ္ငးတယးဆုိရငးသုဵ့ပါတယး။

Sample

<samp>sample text</samp>

Page 91 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS <strong>

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေလ့အနကးေၿပာၾကာ့လုိတဲ႔ စာစကာ့ကုိ ထငးထငးရွာ့ရွာ့ၿပဖုိ႔အတြကးသုဵ့ပါတယး။ သူကေတာံ Bold Text လုိပါပဲ။

Strong Text <body> This is <strong>strong text</strong>. </body> <u>

စာေၾကာငး့ေတြရဲ႕ ေအာကးမွာ Line တာ့တာပဲၿဖစးတယး။

Underlined Text <body> This is <u>Underlined text</u>. </body> <blink>

စာေလ့ေတြကုိ မွိတးလုိးကး ဖြငးံလုိကးပုဵစဵလုပးခ္ငးတယးဆုိရငး ဒီ Blink tag ကုိသုဵ့ပါတယး။

<body> This is <blink>blinking text</blink>. </body> <em>

စာသာ့ေတြကုိ

ရွငး့လငး့ေအာငးေဖားၿပႏုိငးဖုိ႔အတြကး

ေဖားၿပေပ့ပါတယး။

ဆုိလုိတာက

ဒီ

tag

<em>

tag

နဲ႔ေရ့ထာ့တဲ႔အတြကး

က

italic

ပုဵစဵေလ့ေတြနဲ႔

ဒီအထဲက

စာသာ့ေတြက

အေရ့ၾကီ့တယး… ပုိၿပီ့အေလ့ထာ့စြာ ဖတးသငးံေၾကာငး့ user ေတြကုိ ၿမငးသာေအာငး လုပးေပ့တာ ပဲၿဖစးတယး။

Page 92 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <p>Do you <em>really</em> need to buy those expensive jeans? I mean, is it really <em>that</em> important to you to look like some kind of circus freak?</p> </body> <kbd>

user တစးေယာကးက Keyboard ကေနၿပီ့ Delete Key တစးခုကုိ ရုိကးထညးံေပ့ဖုိ႔ ေၿပာခ္ငးတယး.. Alt Key

ကုိရုိကးထညးံေပ့ဖုိ႔ေၿပာခ္ငးတယးဆုိရငး၊

တစးနညး့အာ့ၿဖငးံ

Keystrokes

ေတြေဖားၿပခ္ငးတယး

ဆုိရငးသုဵ့ပါတယး။

<body> <p>Hold down <kbd>CTRL</kbd>, <kbd>ALT</kbd>, and <kbd>DELETE</kbd>, then select Task Manager</p> </body> <small>

စာလုဵ့အေသ့နဲ႔ေဖားၿပတာပဲၿဖစးတယး။ သူ႔ရဲ႕ ပုဵစဵက size 1 to 7 ကုိအေၿခခဵတာၿဖစးၿပီ့ one size decrement ေပါ႔… ဥပမာကုိ ၾကညံးမယးဆုိရငး everyon OK for a drink ဆုိတဲ႔ စာသာ့ကုိ <small> tag ႏွစးခါ ခပးလုိကးတဲ႔အတြကး သူက ေရွ႕က text ေတြထကး two size decrement ၿဖစးသြာ့တာေပါ႔။

Page 93 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <p>Mark tried to get out of buying a round of drinks by getting progressively quieter as he talked: "Right, I'm off to stretch my legs and then get a bag of peanuts ... <small>back in a minute ... <small>everyone OK for a drink?</small></small></p> </body> <sub>

Subscript သတးမွတးဖုိ႔အတြကးသုဵ့တာပဲၿဖစးတယး။ Subscript ဆုိတာ H2O ဆုိၾကပါဆုိ ဒါကုိ H2O ဆုိၿပီ့ 2 ကုိ ေအာကးကို နဲနဲနိမးံခ္ၿပီ့ေရ့သာ့မယးဆုိရငး သုဵ့တာပဲၿဖစးတယး။ မွတးရလြယးပါတယး.. Superscript ဆုိရငး အေပၚကုိတငးတယး.. <sup> လုိ႔ေရ့တယး… အခု Subscript ဆုိတာက ေအာကးပုိငး့ကုိ ခ္ၿပီ့ေရ့တယး… သူ႔ကုိ <sub> ဆုိၿပီ့ေရ့သာ့ပါတယး။

<body> <p>That's not just water. That's not just H₂O. That's H₂-woah!</p> </body> <var>

Page 94 of 197

Variable အမညးမ္ာ့ကုိ ေဖားၿပလုိလွ္ငး သုဵ့ပါတယး။

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <p>To get access to the system you first need to enter your username, e.g. <var>monkeyboy123</var>, followed by your unique 6-digit customer ID beginning with C, e.g. <var>C13345</var>.</p> </body>

Embedded Functionality အပုိငး့ပဲၿဖစးတယး။ HTML မွာ Java applications, scripting functionality, Plug-ins စသညးတုိ႔ကုိ အသုဵ့ၿပဳဖုိ႔အတြကး ပဲၿဖစးပါတယး။ ဒီအပုိငး့မွာ -

<Embed> <Noembed>

<Script> <Noscript> <Iframe>

<Applet> <Param>

ေတြပါှငးတယး။ Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<embed>

alternative content ကၽြနးေတားတုိ႔မွာ

ရွိတဲ႔

ေတြကုိ web browser မွာၿမငးရေအာငး… တစးနညး့အာ့ၿဖငးံ flash video

ေတြလုိမ္ဳိ့

၊

multimedia content

ေတြအတြကးအသုဵ့ၿပဳပါတယး။ အသုဵ့ၿပဳပုဵကေတာံ ေအာကးပါအတုိငး့ပါ။ ေရ့သာ့မႈ ဥပမာ<embed alt="string" height=" { number | percentage } " hidden=" { true | false } " pluginspage="uri" src="uri" type="MIME type" width="number">

Page 95 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </embed>

<body><h2>This is Embed, Object, Param</h2> <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/U7qKojFKD5g?fs=1&amp;hl=en_US"></param> <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/U7qKojFKD5g?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> </body>

အေပၚက ပုဵကေတာံ Youtube က ဗီဒီယုိကုိ embed tag နဲ႔ယူၿပီ့သုဵ့ထာ့တာပါ။ <noembed>

သူကေတာံ- အကယး၍ ကၽြနးေတားတုိ႔ရဲ႕ browser က embed လုပးထာ့တဲ႔ content ေတြကုိ

မသိဘူ့ဆုိရငး

(Support

မလုပးဘူ့ဆုိရငး)

<noembed>

tag

ကုိသုဵ့ေပ့ရပါတယး။ <embed src="http://www.worldwidemyanmar.com/sounds/sound.mid" height="50" width="75"> </embed> <noembed> <b>Please>/b> try this <a href="http://www.worldwidemyanmar.com/sounds/sound.mid">media clip</a> </noembed>

အေပၚက Code ကုိၾကညံးမယးဆုိရငး embed ကုိ support မလုပးတဲ႔ browser ေတြအတြကး

Page 96 of 197

Please

trying

this

media

clip

ဆုိတဲ႔ေနရာမွာ

link

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေပ့သြာ့မွာၿဖစးပါတယး။

support

လုပးရငးေတာံ

ေအာကးက

noembed

က

မေပၚလာပါဘူ့။ <script>

ဒီ tag ကုိ ကၽြနးေတားတုိ႔ အေပၚက head element အပုိငး့မွာ တစးခါထညးံသြငး့ ၿပီ့သြာ့ပါၿပီ… script လုိ႔ေၿပာရငး javascript ကုိပဲေၿပ့ၿမငးၾကပါလိမးံမယး … html မွာ javascript ကုိ ေတားေတားမ္ာ့မ္ာ့သုဵ့ၾကပါတယး … ဆုိလုိတာက html တစးခုတညး့နဲ႔ professional webpage တစးခု တညးေဆာကးဖုိ႔ဆုိတာမလြယးကူဘူ့ေလ.. ဒါေၾကာငးံ function

မ္ဳိ့စုဵသုဵ့ႏုိငးေအာငး၊

input validation

ေတြ

filtering

လုပးႏုိငးေအာငး

စသညးံလုပးငနး့မ္ဳိ့ေတြမွာ ဒီလုိ script ေတြက server side အထိ မေရာကးပဲ client side

မွာတငး

စစးသြာ့လုိ႔ရပါတယး။

ဒီလုိစစးလုိကးၿခငး့အာ့ၿဖငးံ

html

rendering

ကုိပုိၿမနးဆနးေစပါတယး။

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Embeded Funtionality by WWM</title> <script language="JavaScript" type="text/javascript"> <!-- hide script from old browsers function getname(str) { alert("Hi, "+ str + "!"); } // end hiding contents --> </script> </head> <body> Please enter your name: <form> <input type="text" name="name" onblur="getname(this.value)" value="" /> </form>

Page 97 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </body> </html>

သူ႔ရဲ႕ attribute အခ္ဳိ႕ကေတာံ attribute

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

language

ကၽြနးေတားတုိ႔ေရ့သာ့လုိကးတဲ႔

Language

က

ဘာအမ္ဳိ့အစာ့လဲ

ဆုိတာ ေၿပာၾကာ့ေပ့ရတာၿဖစးတယး။ အသုဵ့မ္ာ့တဲ႔ value ကေတာံ JavaScript and VBScript ေတြပဲၿဖစးပါတယး။ <script language="JavaScript"

type

scripting code ရဲ႕ MMIE Type ကုိေၿပာတာပါ <script type="text/javascript"

<noscript>

အေပၚက embed နဲ႔ noembed လုိပါပဲ.. script ကုိ browser က support မလုပးရငး အသုဵ့ၿပဳတာပဲၿဖစးတယး။ <script language="JavaScript"> <!-- document.write("Hello World.") --> </script> <noscript> <b>Please</b> try this page for browsers that can not handle SCRIPTing. <a href="http://www.worldwidemyanmar.com/alternate.html">Simple Text Page</a> </noscript>

<iframe>

အၿခာ့ေသာ

Website,

Web

page

တစးခုကုိ

လကးရွိ

web

page

ထဲမွာ

ေခၚယူသုဵ့စြဲမယးဆုိရငး iframe ဆုိတာကုိသုဵ့ေပ့ရပါတယး။

<iframe src="http://www.google.com/" height="500" width="100%" frameborder=”1”> </iframe>

frameborder

=

“1”

ဆုိတာ

ေဘ့နာ့က

ေဘာငးကုိေၿပာတာပါ။

အကယး၍

frameborder = “0” ထာ့မယးဆုိရငး ေဘ့ေဘာငးကုိ ၿမငးရမွာမဟုတးပါဘူ့။

Page 98 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ဒါေလ့ကေတာံ iframe ရဲ႕ အသုဵ့ၿပဳမႈ ပုဵစဵပါ- Syntax <iframe align=" { bottom | left | middle | right | top } " frameborder=" { 0 | 1 } " height=" { number | percentage } " longdesc="string" marginheight="number" marginwidth="number" name="string" noresize="noresize" scrolling=" { auto | no | yes } " src="uri" width=" { number | percentage } "> </iframe>

<applet>

Webpage တစးခုမွာ java application ငယးေတြ ထညးံသြငး့ အသုဵ့ၿပဳမယးဆုိရငး ဒီ tag ကုိအသုဵ့ၿပဳၾကပါတယး။ <applet archive="uri" code="uri" codebase="uri" height=" { number | percentage } "width=" { number | percentage } "> </applet>

Example <applet codebase="http://www.worldwidemyanmar.com/java/" code="javaexample.class" width="200" height="300"> <param name="text1" value="Example Text 1" /> <param name="imagecaption" value="Image Caption" /> <param name="bounceimage" value="bounce1.gif" /> <img src="non_java_image.gif" width="200" height="300" border="0" alt="You are missing the full Java Experience."> </applet>

<param>

Applet နဲ႔ Object ေတြနဲ႔ ေပါငး့စပးအသုဵ့ၿပဳတာ ၿဖစးၿပီ့ parameters or variables အသုဵ့ၿပဳလုိ႔ရေအာငးလညး့ၿဖစးပါတယး။ သူ႔ရဲ႕ အဓိက ရညးရြယးခ္ကးေတာံ အေပၚက Applet နဲ႔ Object ေတြအတုိငး့ပဲ Java applet (a mini application ) ေတြကုိ browser မွာ အသုဵ့ဖုိ႔အတြကး သုဵ့ၾကာတာၿဖစးပါတယး။ Usage-: <param name="string" type="MIME type" value="value"valuetype=" { data | object | ref } ">

Applet ႏွငးံတြဲ၍ သုဵ့ပုဵ <applet codebase="http://www.worldwidemyanmar.com/java/" code="javaexample.class" width="200" height="300"> <param name="text1" value="Example Text 1" /> <param name="imagecaption" value="Image Caption" /> <param name="bounceimage" value="bounce1.gif" />

Page 99 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <img src="non_java_image.gif" width="200" height="300" border="0" alt="You are missing the full Java Experience."> </applet>

Object ႏွငးံတြဲ၍ သုဵ့ပုဵ <object codetype="application/java-vm" codebase="http://www.worldwidemyanmar.com/applet.class" classid="java:program.start" height="100" width="100"> <param name="options" value="xqz" /> If you can read this you are too close.<br /> AND your browser does not support Java. </object>

Revision Control ပဲၿဖစးတယး။ ကၽြနးေတားတုိ႔ ထညးံထာ့တဲ႔ စာသာ့ေတြ update လုပးထာ့တဲ႔ အေၾကာငး့အရာ content ေတြကုိ သီ့သနး႔ ခြဲၿခာ့ၿပီ့ေဖားၿပခ္ငးတယးဆုိရငး အသုဵ့ၿပဳဖုိ႔အတြကးၿဖစးတယး။

ဒီေနရာမွာ ပါှငးတဲ႔ tag ကေတာံ ႏွစးခုတညး့ပါ <del> နဲ႔ <ins> ပဲၿဖစးတယး။ Tag

ရွငး့လငး့ခ္ကးႏွငးံ ဥပမာ

<del>

Delete လုပးထာ့တဲ႔ စာသာ့ တစးခုရဲ႕ ေန႔ရကး၊ အခ္ိနးေတြကုိ သတးမွတးဖုိ႔အတြကး သုဵ့ပါတယး။ <del cite="#oct12-2010" datetime="2010-10-12T12:45:00PST">Deleted text</del>

<ins>

ထညးံသြငး့ထာ့တဲ႔ စာသာ့ တစးခုရဲ႕ ေန႔ရကး၊ အခ္ိနးေတြကုိ သတးမွတးဖုိ႔အတြကး သုဵ့ပါတယး။ <ins cite="#jan25-2009" datetime="2009-01-25T18:00:00PST">Inserted text</ins>

ဥပမာ-

Delete လုပးထာ့တဲ႔ Text က အလယးမွာ ၿဖတးမ္ဥး့ေလ့တစးခုေပၚၿပီ့ေတာံ Insert လုပးထာ့တဲ႔

Text

ကေတာံ

ေအာကးက

လိုငး့ေလ့တစးခုတာ့ထာ့တာ

ေတြ႔ရပါလိမးံမယး…

Page 100 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <del

cite="#oct12-2010"

datetime="2010-10-12T12:45:00PST">Deleted

cite="#jan25-2009"

datetime="2009-01-25T18:00:00PST">Inserted

text</del> <br/> <br/> <ins

text</ins> </body>

Ruby Elements လုိ႔ပဲေခၚပါတယး။ အဓိကအာ့ၿဖငးံ East Asian Languages (Japanese, Chinese, Korean, နဲ႔ စသညးတုိ႔ကုိ ေဖားၿပလုိတဲ႔အခါ အသုဵ့ၿပဳပါတယး။ Ruby မွာသုဵ့တဲ႔ အဓိက tag ကေတာံ Parent tag ၿဖစးတဲ႔ <ruby> နဲ႔ <rb><rt> တုိ႔ပဲၿဖစးၾကပါတယး။ မွတးခ္ကး- Ruby က Browser ေတားေတားမ္ာ့မ္ာ့နဲ႔ အဆငးမေၿပပါဘူ့။ Tag

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<ruby>

သူကေတာံ ruby element အတြကး အဓိကသုဵ့တဲ႔ parent tag ပဲၿဖစးပါတယး။

Page 101 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Support လုပးတဲ႔ IE မွာသုဵ့ထာ့တာၿဖစးပါတယး။ Firefox မွာေတာံ Support မလုပးပါဘူ့။

<ruby> <rb>家辺勝文</rb> <rt>liaison</rt> </ruby>

<rb>

Ruby Base ပါ။ ကၽြနးေတားတုိ႔ေရ့သာ့လုိကးတဲ႔ east asian language

(Base

Language) ေတြ အတြကးသုဵ့ပါတယး။ <ruby> <rb>家辺勝文</rb> <rt>liaison</rt> </ruby>

<rt>

Ruby Text လုိ႔ေခၚပါတယး.. <ruby> <rb>家辺勝文</rb> <rt>liaison</rt> </ruby>

<rbc>

Ruby Base Container လုိ႔ေခၚပါတယး။ Container ဆုိတာကေတာံ <rb> content ေတြကုိ ထညးံသြငး့ထာ့တာၿဖစးပါတယး။ <ruby> <rbc>

Page 102 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <rb>斎</rb> <rb>藤</rb> <rb>信</rb> <rb>男</rb> </rbc> </ruby>

<rtc>

Ruby Text Container

လုိ႔ေခၚပါတယး။

သူကလညး့

<rt> content

ေတြကုိ

ထိနး့သိမး့ထာ့တာပဲၿဖစးပါတယး။ <ruby> <rtc class="reading"> <rt>さい</rt> <rt>とう</rt> <rt>のぶ</rt> <rt>お</rt> </rtc> <rtc class="annotation"> <rt rbspan="4" xml:lang="en">W3C Associate

Chairman</rt>

</rtc> </ruby>

ဥပမာ

ဒါကေတာံ

Complex Ruby

ေပါ႔…

သူက

<ruby>,<rtc><rbc><rb><rt>

အာ့လုဵ့ကုိ ေပါငး့ၿပီ့ေရ့ၿပထာ့ပါတယး။ Ruby

က

အဆုိပါ

East Asian Language

ေတြကုိ

ေဖားၿပလုိတဲ႔အခါမွာ

အလြနးကုိသငးံေတားပါတယး …

မိမိတုိ႔

အသုဵ့ၿပဳတဲ႔

browser

အေပၚမွာမႈတညးၿပီ့ေတာံ

structure

ေလ့ေတြ

ကြဲၿပာ့သြာ့ပါလိမးံမယး ..

Page 103 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<ruby xml:lang="ja"> <rbc> <rb>斎</rb> <rb>藤</rb> <rb>信</rb> <rb>男</rb> </rbc> <rtc class="reading"> <rt>さい</rt> <rt>とう</rt> <rt>のぶ</rt> <rt>お</rt> </rtc> <rtc class="annotation"> <rt rbspan="4" xml:lang="en">W3C Associate Chairman</rt> </rtc> </ruby>

<frameset > Elements

HTML ရဲ႕ Root Elements အတြငး့မွာ <head> နဲ႔ <body> ေတြအၿပငး <frameset> ဆုိတဲ႔ Element တစးခုလညး့က္နးပါေသ့တယး … အငးတာနကး စာမ္ကးႏွာေတြကုိ Page တစးခုတညး့မွာ အပုိငး့လုိကးခြဲၿပီ့ေဖားၿပခ္ငးတယးဆုိရငး frameset ကုိသုဵ့ေပ့ရပါတယး။ frameset က အသုဵ့နညး့တယးဆုိေပမဲ႔ အခုအခ္ိနးအထိ သုဵ့ေနရတဲ႔ webpage ေတြ ရွိပါေသ့တယး။

Page 104 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚက ပုဵမွာဆုိရငး သူ႔မွာ အေရာငး (၂)ေရာငးေပၚေနပါတယး…. Yell, Cyan, Green, Black ဆုိတဲ႔ အေရာငးေလ့ ေရာငးပါ… တကယးေတာံ အဲ႔ဒါ အေရာငး (၂) ေရာငးလုိ႔ေၿပာရမွာမဟုတးပါဘူ့။ သူက index.html ဆုိတဲ႔ document page မွာ အၿခာ့ page (၂) ခုကုိ frameset နဲ႔ ေခၚယူသုဵ့စြဲထာ့တာ ၿဖစးပါတယး။

အာ့လုဵ့ကုိ

ၿခဵဳၾကညံးလုိကးမယးဆုိရငး

index.html

က

parent document

ေပါ႔

top_nav.html, menu_1.html,content.html နဲ႔ footer.html ေတြက parent document ၿဖစးတဲ႔ index.html ရဲ႕ ေခၚယူအသုဵ့ၿပဳမႈကုိ ခဵရတဲ႔ child documents ေတြပဲၿဖစးပါတယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Frameset Elements by WWM</title> </head> <frameset rows="100,*,80" frameborder="0" border="0" framespacing="0"> <frame name="topNav" src="top_nav.html"> <frameset cols="100,*" frameborder="0" border="0" framespacing="0"> <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> </frameset> <frame name="footer" src="footer.html"> </frameset> </html>

Frameset မွာပါှငးတဲ႔ attribute ေတြကေတာံ cols,rows, border, bordercolor, frameborder,

Page 105 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

framespacing, name ေတြပဲၿဖစးၾကပါတယး။ Framespacing ဆုိတာကေတာံ frame တစးခုနဲ႔ တစးခုၾကာ့က အကြာအေှ့ကုိ သတးမွတးႏုိငးရနး အတြကးသုဵ့ပါတယး။ frameset မွာ rows, cols ေတြကုိ percentage နဲ႔သတးမွတးတဲ႔အခါ 100% ၿဖစးေအာငးေပ့ရပါတယး။ ဥပမာ- cols=”80%,20%” ဆုိၿပီ့ေပ့ရတာေပါ႔… အဲ႔လုိမွမဟုတးပဲ တစးခုကုိပဲ အေသယူမယးဆုိရငးေတာံ cols=”80,*” ဆုိၿပီ့ “*” ေလ့ခဵေပ့ရပါတယး။ ဒါဆုိရငး “*” ေနရာမွာ က္နးရွိေနတဲ႔ အပုိငး့ေတြအာ့လုဵ့ကုိ ယူသြာ့မွာၿဖစးပါတယး။ Tags

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

<frameset>

တညးေဆာကးပုဵကေတာံ <frameset cols="{ number | percentage | * } ,…" rows="{ number | percentage | * } ,…"> </frameset>

cols ဆုိတဲ႔ attribute မွာ number သုိ႔မဟုတး percentage နဲ႔ေပ့လုိ႔ရပါတယး။ cols=”100,*” ဆုိရငး Column ႏွစးခုယူမယး.. ပထမ Column က 100 ေပါ႔။ က္နးတာကေတာံ

အကုနးယူမယး…

rows=”100,*,80”

ဆုိရငး

row

သုဵ့ခုယူမွာၿဖစးၿပီ့ အေပၚဆုဵ့က 100 နဲ႔ ေအာကးဆုဵ့က 80 ယူသြာ့မွာၿဖစးပါတယး … အလယးက

row

ကုိကေတာံ

automatic

ေပါ႔…

Browser

က္ယးရငး

က္ယးသေလာကး က္ဥး့ရငး က္ဥး့သေလာကးေၿပာငး့သြာ့ပါလိမးံမယး … <frame>

<frame>

ဆုိတာ

<frameset>

ထဲကေန

frame

တစးခုခ္ငး့စီအတြကး

ေဖားၿပႏုိငးဖုိ႔ရနးသုဵ့တာပါ။ <frame

name="content"

src="content.html"

marginheight="0"

marginwidth="0" scrolling="auto" noresize>

ဒီ <frame> ထဲမွာဆုိရငး ေခၚယူအသုဵ့ၿပဳမဲ႔ document link ပါှငးသလုိ ၂ငး့ frame

တစးခုအတြကး

ကုိယးပုိငး

attribute

ေတြကုိသတးမွတးလု႔ိရပါတယး။

ဒီေနရာမွာ noresize ဆုိတာေလ့ကုိေတြ႔ရပါလိမးံမယး … Default frame တစးခုမွာ frame border

ေလ့ကုိ ဆြဲယူၿပီ့ အက္ဥး့အက္ယး၊ ခ္ဴဵ႕ခ္ဲ႕ လုပးလုိ႔ရပါတယး…

အကယး၍

အဲ႔လုိ

လုပးပုိငးခြငးံမေပ့ခ္ငးဘူ့ဆုိရငးေတာံ

noresize

ဆုိတာေလ့ကုိထညးံေပ့ရပါတယး။ <noframe>

<noframe>

ဆိုတာ

အေပၚမွာေဖားၿပထာ့ခဲ႔ဖူ့တဲ႔

<noscript>

လုိပါပဲ…

မိမိတုိ႔အသုဵ့ၿပဳတဲ႔ browser က အခု ကၽြနးေတားတုိ႔ထညးံသြငး့အသုဵ့ၿပဳထာ့တဲ႔ frameset ကုိမသိဘူ့ဆုိရငး browser က support မလုပးဘူ့ဆုိတာ user အာ့ေဖားၿပေပ့ထာ့တာပဲၿဖစးပါတယး။ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

Page 106 of 197

http://www.worldwidemyanmar.com

မာတိ ာ ၊ CONTENT Web က Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <title>Frameset Elements by WWM</title> </head> <frameset rows="20,25%,*"> <frame src="frame1.html" name="frame1" /> <frame src="frame2.html" name="frame2" /> <frameset cols="30%,*"> <frame src="frame3.html" name="frame3" /> <frame src="frame4.html" name="frame4" /> </frameset> <noframes> <body> This text will appear only if the browser does not support frames. </body> </noframes> </frameset> </html>

<noframe> ဆုိတာကုိ <frameset> အတြငး့ထဲမွာပဲေရ့သာ့ရပါတယး။

ဒီေလာကးဆုိရငး HTML နဲ႔ ရုိ့ရွငး့တဲ႔ webpage ေလ့တစးခုေလာကး ေရ့ဆြဲဖုိ႔ အဆငးသငးံ ၿဖစးေလာကးၿပီ ထငးတာပဲ… မၿဖစးေသ့ရငး ေအာကးပါ ေလံက္ငးံခနး့ေလ့ေတြနဲ႔ တြဲၿပီ့ထကးၿပီ့ေလံလာေပါ႔ ..

Exercise -1 ပထမဦ့စြာ - exercise1 ဆုိတဲ႔ folder ေလ့တစးခု တညးေဆာကးလုိကးပါ… ၂ငး့အထဲမွာ images ဆုိတဲ႔ folder ေလ့တစးခုလညး့ထပးၿပီ့တညးေဆာကးထာ့ပါ… html ေရ့ေတာံမယးဆုိရငး image ေတြကုိ images folder ထဲမွာ သီ့သနး႔ ၿဖစးေနေအာငးလုိ႔ပဲၿဖစးပါတယး။ Notepad ကုိဖြငးံလုိကးပါ။ ၿပီ့ရငး HTML ရဲ႕ ပုဵေသ Elements ေတြကုိရုိကးထညးံလုိကးပါ.. အဲ႔ဒါေတြကေတာံ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> </head>

Page 107 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> </body> </html>

ဒီပစ ုဵ ဵေလ့ကုိမွတးထာ့လုိကးေပါ႔။

ၿပီ့ရငး

exercise1.html

ဆုိတာေလ့နဲ႔

သိမး့လုိကးပါမယး ..

သိမး့ပုဵသိမး့နညး့ကေတာံ - notepad မွာ file menu ကေန save as နဲ႔သိမး့လုိ႔ရပါတယး …

Page 108 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

File name ဆုိတဲ႔ေနရာမွာ filename + extension name ကုိေပ့ရပါတယး .. အခု ကၽြနးေတားတုိ႔က exercise1.html ဆုိၿပီ့ အမညးေပ့လုိကးပါမယး … အခုဆကးလကးၿပီ့

ကၽြနးေတားတုိ႔

ဒီ

Webpage

အတြကး

ေခါငး့စဥးတစးခုေပ့ပါမယး …

ေခါငး့စဥးကုိ

ေခါငး့စဥးကုိေတာံ <title>Simple HTML Web Page by WWM</title> ဆုိၿပီ့ေပ့ထာ့ပါတယး … <body>

ထဲမွာ

background

အေရာငးကုိ

အှါေဖ္ာံေဖ္ာံ

အေရာငးထညးံပါမယး…

ဒါဆိုရငး

<body

bgcolor=”#ffffee”> ဆုိၿပီ့ၿဖစးသြာ့တာေပါ႔။ table သုဵ့ခုတညးေဆာကးလုိကးပါမယး … <html> <head> <title>Simple HTML Web Page by WWM</title> </head> <body bgcolor="#ffffee"> <table> </table> <table> </table> <table> </table> </body> </html>

ပထမဆုဵ့ table မွာ ေအာကးပါအတုိငး့ ပုဵေတြကုိေနရာခ္ပါမယး .. <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/topbkg.gif"> <tr> <td width="50%"><img border="0" src="images/topleft.gif" width="205" height="61"></td> <td width="50%"> <p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td> </tr> </table>

border=”0” ဆုိတာ table ရဲ႕ ေဘာငးကုိမၿမငးရေအာငးပဲၿဖစးတယး။ သူ႔ရဲ႕ အက္ယးကေတာံ width=”100%” ဆုိၿပီ့ ေရ့ထာ့တာဟာ

full page

ေပါ႔…

cellspacing=”0”

နဲ႔

cellpadding=”0”

ပဲထာ့ပါမယး။

ၿပီ့ရငး

background=”images/topbkg.gif” ဆုိၿပီ့ထာ့တာဟာ ၂ငး့ ပထမဆုဵ့ table ရ႕ဲ ေနာကးခဵပုဵကုိ images folder ထဲက topbkg.gif ဆုိတဲ႔ image file ကုိသုဵ့ဖုိ႔ေၿပာထာ့တာပဲၿဖစးတယး။

Page 109 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေနာကးတစးခုကေတာံ <tr> ဆုိတာ table row တစးခုယူလုိကးမယး .. <td> ကေတာံ cell တစးခုကုိ width=”50%” ဆုိၿပီ တစးှကးေလာကးယူလုိကးပါတယး။ ၿပီ့ရငး ၂ငး့အထဲမွာ <img ဆုိၿပီ့ src=”images/topleft.gif” ဆုိၿပီ့ဖုိငးတစးခုကုိ ထညးံထာ့ပါတယး။ ေနာကးတစးခုကလညး့ အဲ႔အတုိငး့ပါပဲ… logo.gif ဆုိတာကုိထညးံသြငး့ထာ့ပါတယး .. ဒီေနရာမွာ သတိထာ့မိမွာက အေပၚကပုဵကုိထညးံတဲ႔ေနရာမွာ <p align=”right”> ဆုိတာမ္ဳိ့မပါပါဘူ့ … ဟုတးပါတယး.. ပုဵေတြကုိ ထညံးတဲ႔ေနရာမွာ သူ႔ရဲ႕ Default ေနရာကေတာံ align=”left” အၿဖငးံ ဘယးဘကးထဲမွာ ယူထာ့တာၿဖစးတဲ႔အတြ ကး သူ႔ကုိမထညံးေတာံပဲ ညာဘကးထဲမွာထညးံရမဲ႔ ပုဵကုိပဲ align=”right” ဆုိၿပီ့ <p> tag နဲ႔ ထညးံသြငး့သုဵ့ထာ့တာၿဖစးပါတယး။ ဒုတိယ Table မွာေအာကးပါအတုိငး့ရုိကးထညးံပါမယး . <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF">HOME&nbsp;&nbsp; |&nbsp;&nbsp;

NEWS&nbsp;&nbsp;

|&nbsp;&nbsp;

PRODUCTS&nbsp;&nbsp;

|&nbsp;&nbsp;

SERVICES&nbsp;&nbsp; | &nbsp;&nbsp; ABOUT US&nbsp;&nbsp; |&nbsp;&nbsp; CONTACT US</font></b></font></td> </tr> </table>

ဒီေနရာမွာ &nbsp; ဆုိၿပီသုဵ့ထာ့တာဟာ space ေတြအတြကးပဲၿဖစးပါတယး.. တတိယ Table မွာေအာကးပါအတုိငး့ရုိကးထညးံပါမယး . <table border="0" width="100%" background="images/botbkg.gif" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><img border="0" src="images/botbkg.gif" width="38" height="14"></td> </tr> </table>

ဒုတိယ table နဲ႔ တတိယ table ၾကာ့မွာေတာံ ေအာကးပါအတုိငး့ထညးံလုိကးပါ။ <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20" align="center"><font face="Arial" size="2">&copy; COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p>

<p> tag ကုိသုဵ့ၿပီ့ေတာံ ကၽြနးေတားတုိ႔လုိခ္ငးတဲ႔ content ေတြကုိ ဒီနာ့မွာ ထညးံသြငး့ေဖားၿပၾက ရမွာပဲၿဖစးပါတယး။

Page 110 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အခု page တစးခုလဵု့ရဲ႕ အနာ့ေဘာငးေတြကုိ 0 ပဲထာ့ပါမယး… <body

topmargin="0"

leftmargin="0"

rightmargin="0"

bottommargin="0"

marginheight="0"

marginwidth="0"

bgcolor="#FFFFEE">

ဒါကေတာံ ဘယးညာ အေပၚေအာကး margin ကုိ “0” ထာ့လုိကးတာပဲၿဖစးပါတယး။ အခု ဒါေတြအာ့လုဵ့ကုိေပါငး့ၿပီ့ေတာံ result ကုိၾကညးံရေအာငး <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Simple HTML Web Page by WWM</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFEE"> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/topbkg.gif"> <tr> <td width="50%"><img border="0" src="images/topleft.gif" width="205" height="61"></td> <td width="50%"> <p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF">HOME&nbsp;&nbsp; |&nbsp;&nbsp; NEWS&nbsp;&nbsp; |&nbsp;&nbsp; PRODUCTS&nbsp;&nbsp; |&nbsp;&nbsp; SERVICES&nbsp;&nbsp; |&nbsp;&nbsp; ABOUT US&nbsp;&nbsp; |&nbsp;&nbsp; CONTACT US</font></b></font></td> </tr> </table> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p>

Page 111 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20" align="center"><font face="Arial" size="2">&copy; COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p> <table border="0" width="100%" background="images/botbkg.gif" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><img border="0" src="images/botbkg.gif" width="38" height="14"></td> </tr> </table> </body> </html>

Table သုဵ့ခုပါ

ဆကးလကးၿပီ့ ဒုတိယ table ထဲမွာ menu ေဆာကးထာ့တဲ႔ home, news, products, services, about, contact စသညးတုိ႔ကုိ Link ေတြေပ့မယးဆုိရငးေတာံ anchor ကုိပဲသုဵ့ရမွာေပါ႔ ..

Page 112 of 197

http://www.worldwidemyanmar.com

မာတိ ာ ၊ CONTENT Web က Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF"><a href="index.html">HOME</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="news.html">NEWS</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="products.html">PRODUCTS</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="services.html">SERVICES</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="about.html">ABOUT US</a>&nbsp;&nbsp; |&nbsp;&nbsp;<a href="contact.html">CONTACT US</a></font></b></font></td> </tr> </table>

တကယးေတာံ HTML ဆုိတာ အလြနးကုိ ရုိ့ရွငး့တယး.. လြယးကူတယး … ထုိ႔အတူ သူက ပုဵေဖားႏုိငးရငး ႏုိငးသေလာကး လနး့တယးေပါ႔…

CSS ကုိ ဆကးလကးၿပီ့သြာ့ၾကရေအာငး …. -->

CSS (Cascading Style Sheets)

တစးခ္ဳိ႕ေတြကေၿပာၾကတယး

Web

Page

တစးခုဆိုတာ

information

ေတြကုိၾကညးံဖုိ႔ရာ

viewer

ၾကီ့တစးခုပါပဲတဲ႔ … အခ္ဳိကေတာံ Multimedia ေတြအတြကးတဲ႔ … တစးခ္ဳိ႕ကေတာံ သူတုိ႔ရဲ႕ လုပးေဆာငးခ္ကးေတြကုိ လကးကမး့စာေစာငးေတြအစာ့ e-Media Advertise လုပးတာပဲတဲ႔… မတူညီတဲ႔လူေတြက မတူညီတဲ႔ ရူေဒါငးံကေန အမ္ဳိ့မ္ဳိ့ၾကညးံၾက ခဵစာ့ၾက ေှဖနးၾကတာပါပဲ… ဒါေၾကာငးံ ကၽြနးေတားတုိ႔ ဒီ web page ဆုိတာၾကီ့ကုိ ေှဖနးၾကညးံရေအာငး

Page 113 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Web Page ကုိ Layer သုဵ့ခုခြဲထုတးလုိကးပါမယး …

1. Content, 2. Presentation, 3. Behavior ဆုိၿပီ့ၿဖစးၾကတယး …

Content Layer မွာေတာံ HTML text ေတြပါှငးပါတယး… သူကေတာံ အဓိက Main က္တဲ႔ အပုိငး့ေပါ႔… Presentation Layer မွာဆုိရငး ေစာေစာက Content Layer ထဲက Content ေတြကုိ ဘယးလုိဘယးပုဵ ေဖားၿပေပ့မယးဆုိတဲ႔အပုိငး့ေတြ ၿဖစးပါတယး.. သူ႔ကုိ CSS အပုိငး့လုိ႔ခြဲလုိကးမယး… ေနာကးဆုဵ့တစးခုကေတာံ Behavior Layer အပုိငး့ပဲၿဖစးတယး… user input filtering

ေတြလုပးမယး ..

validation

ေတြလုပးတာမ္ဳိ့ေတြအတြကးပဲၿဖစးတယး …

သူ႔ကုိ

JavaScript

အပုိငး့လုိ႔ခြဲလုိကးလုိ႔ရပါတယး။ ဒါဆုိရငး အခု CSS ဆုိတာ Web Page တစးခုရဲ႕ လွပမႈ၊ အၿမငးလနး့ဆနး့မႈအပုိငး့မွာ အဓိက က္တဲ႔ အခနး့က႑ ကေနပါှငးေနပါတယး။ ၿပီ့ေတာံ HTML အတြကး Layout ေတြကုိဖနးတီ့ေပ့တာပဲၿဖစးတယး။ HTML ကေတာံ content ေတြကုိ ေရ့ဆြဲတညးေဆာကးဖုိ႔နဲ႔ CSS ကေတာံ ၂ငး့ကဲ႔သုိ႔ ေရ့ဆြဲတညးေဆာကးထာ့တာေတြကုိ ပုဵစဵခ္ေပ့ဖုိ႔ပဲၿဖစးတယး။ CSS

ကုိအသုဵ့ၿပဳၿခငး့ၿဖငးံ

ထိနး့ခ္ဴပးႏုိငးၿခငး့

နဲ႔

လွပတဲ႔

Web ပုဵစဵ

Page

Layout

အမ္ာ့ၾကီ့ရဲ႕ တစးခုကုိ

ဒီဇုိငး့ပုဵစဵေတြကုိ

HTML

CSS

file

တစးခုတညး့ကေန

ထကးထူကဲစြာေရ့ဆြဲႏုိငးၿခငး့ေၾကာငးံ

CSS

ကုိလူသုဵ့မ္ာ့ၾကပါတယး။ CSS ရဲ႕ အဓိပၸါယးကေတာံ Cascading Style Sheets ပဲၿဖစးပါတယး။ fonts, text alignment, spacing, margins, and list formatting ေတြအတြကး ပုဵစဵခ္ဖုိ႔အတြကး 1996 ေလာကးက World Wide Web Consortium (W3C) အသိအမွတးၿပဳအၿဖစး CSS1 ထြကးေပၚလာတာၿဖစးၿပီ့ 1998 ေလာကးမွာ CSS2 စသညးၿဖငးံ ထြကးေပၚလာခဲ႔ရာ အခုဆုိရငး CSS3 ဆုိၿပီ့ၿဖစးေနပါၿပီ…

Applying Usage CSS ကုိ အသုဵ့ၿပဳတဲ႔ ေနရာမွာ Inline, External နဲ႔ Internal ဆုိၿပီ့ခြဲၿခာ့ႏုိငးပါတယး။ အမညး

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

Page 114 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS Internal CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

HTML Document တစးခုအတြငး့မွာ ေရ့သာ့ရတာမ္ဳိ့ကုိ Internal CSS လုိ႔ေခၚပါတယး။ Internal CSS ကုိသုဵ့တဲ႔အခါ HTML page ရဲ႕ <head></head> elements အတြငး့မွာပဲ ေရ့သာ့ ရတာၿဖစးပါတယး။ <html> <head> <title>Internal CSS by WWM</title> <style type="text/css"> </style> </head> <body> </body> </html>

External CSS

Internal CSS က Web Page ေတြရဲ႕ Layout , Design ေတြကုိ file တစးခုတညး့ကေန Control လုပးလုိ႔မရပါဘူ့။ ဒါေပမဲ႔ External CSS ကေတာံ Control လုပးလုိ႔ရပါတယး။ External CSS က ၿပငးပကေန သီ့သနး႔ .css ဆုိၿပီ့ ဖုိငးတစးခု တညးေဆာကးထာ့မယး … ၂ငး့ဖုိငးကုိ html page တုိငး့ကေန ေခၚယူသုဵ့ဆြဲၾကရတာၿဖစးပါတယး။ ဒီေတာံ ၂ငး့ ၿပငးပက ဖုိငးကုိ ၿပငးလုိကးၿပီဆုိတာနဲ႔ ခ္ိတးဆကးထာ့တဲ႔ html page မ္ာ့ရဲ႕ ပုဵစဵေတြကလညး့ ေၿပာငး့လဲသြာ့ပါလိးမံးမယး …

ဒီလုိ ၿပငးပကေန ခ္ိတးဆကးအသုဵ့ၿပဳဖုိ႔အတြကး ေအာကးပါ tree type အတုိငး့ style ဆုိတဲ႔ folder ေလ့တစးခု သီ့သနး႔ေဆာကးၿပီ့ css file ေတြကုိ အဲ႔အထဲမွာထညံးသြငး့အသုဵ့ၿပဳပါ။

<html> <head> <title>External CSS by WWM</title>

Page 115 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> </body> </html>

ကၽြနးေတားံအေနနဲ႔ CSS Style Sheets ကုိသုဵ့မယးဆုိရငး External ကုိပဲ သုဵ့ဖုိ႔ ညြနး့မွာၿဖစးတဲ႔အတြကး ဒီ Tutorial ေတြကုိလညး့ External Style Sheets ေတြနဲ႔ပဲ သုဵ့ၿပသြာ့မွာၿဖစးပါတယး။ Inline CSS

Inline ကေတာံ အသုဵ့နဲပါတယး… သူက HTML ရဲ႕ tag အတြငး့ထဲမွာပဲေရ့သာ့ ရတာမ္ဳိ့ပါ။ သူ႔ရဲ႕ inline အသုဵ့ၿပဳနညး့ကေတာံ style ကုိ attribute အၿဖစးထာ့ၿပီ့ ၂ငး့ရဲ႕ အထဲမွာ Property ကုိထညးံသြငး့ေရ့သာ့ ရပါတယး။ <p style="color: red; margin-left: 50%">This is Paragraph</p>

Syntax . Structure CSS ရဲ႕ ဖြဲ႕စညး့တညးေဆာကးပုဵကုိ ၾကညးံရေအာငး

selector {property: value} သူ႔မွာ

အဓိက

အပုိငး့

သုဵ့ပုိငး့ပဲ

ပါှငးပါတယး။

HTML

မွာ

<tag

attribute=”value”>

ဆုိတဲ႔

ပဵုစဵကုိ

သတိထာ့မိပါလိမးံမယး … ဒီအတုိငး့ပါပဲ CSS မွာလညး့ selector {property: value} ဆုိၿပီ့ရွိပါတယး။

HTML

CSS

<tag attribute=”value”>

selector {property: value}

ဥပမာ - <body bgcolor=”red”>

ဥပမာ - body {background-color: red}

Page 116 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Selector ကေတာံ HTML ရဲ႕ tag ေတြကုိပဲ သုဵ့ၾကတာမ္ာ့ပါတယး .. ဥပမာ <body> ဆုိတဲ႔ tag အတြကး body selector ကုိပဲသုဵ့ပါတယး။ ဒါဆုိရငး ဒီ selector ထဲက property နဲ႔ value တုိ႔ဟာ ၂ငး့ html tag ရဲ႕ element အတြကး ပဲၿဖစးပါတယး။ ဆုိလုိတာက ကၽြနးေတားတုိ႔က body {background-color:

red} ဆုိၿပီ့ေရ့ထာ့ရငး HTML ရဲ႕ body

background မွာ အနီေရာငးၿဖစးသြာ့ပါလိးမံးမယး..

Value Value ကုိထညးံသြငး့အသုဵ့ၿပဳတဲ႔အခါ ထညးံသြငး့ထာ့တဲ႔ စာလုဵ့က တစးလုဵ့ထကးပုိေနရငး ၂ငး့ကုိ Double Quote “ -- " ထညးံေပ့ရပါတယး။ p {font-family: "sans serif"} အဲ႔လုိပုဵစဵမ္ဳိ့ေပါ႔။ ပုဵမွနးအတုိငး့ဆုိရငးေတာံ Double Quote ထညးံစရာမလုိပါဘူ့။ CSS

မွာအေရာငးေတြကုိသတးမွတးတဲ႔အခါ

HTML

မွာမ္ဳိ့ပါပဲ..

Colour

Name

သုိ႔မဟုတး

Hex

Code

ကုိထညးံသြငး့လုိ႔ရပါတယး။

Property ထုိ႔အတူ

Property

မွာ

တစးခုထကးပုိၿပီ့

ထညးံသြငး့သုဵ့ခ္ငးတယးဆုိရငး

semicolon

“;”

ေလ့ကုိထညံးသြငး့

အသုဵ့ၿပဳေပ့ရပါတယး။ p {text-align: center; font-family: "sans serif"}

Selector Selector ေတြကေတာံ HTML ရဲ႕ tag ေတြကုိ အတြကး style sheet သတးမွတးတာၿဖစးတဲ႔အတြကး selector ေတြက HTML tag အမညးေတြနဲ႔ပဲသုဵ့ရပါတယး။ ဥပမာ body, h1,h2,p,input,textarea,dl,dt,dd,td,th … စသညးေပါ႔။ Selector ေတြကုိ

ေပါငး့ၿပီ့ေရ့သာ့မယးဆုိရငးလညး့

ရပါတယး…

ထုိကဲ႔သုိ႔ေရ့သာ့မယးဆုိရငး

ေကားမာ

“,”

ေလ့တစးခုထညးံေပ့ရပါတယး။ h1,h2,h3,h4,h5,h6 { color: red; } ဒါဆုိရငး h1-h6 Heading ေတြအာ့လုဵ့က အနီေရာငးေတြၿဖစးေနပါလိးမံးမယး … HTML Page ထဲမွာ <h1> ကုိပဲသုဵ့သုဵ့ <h2> ကုိပဲ သုဵ့သုဵ့ color ကေတာံ အနီေရာငးပဲၿဖစးပါတယး။ Multiple Selector သတးမွတးလုိကးတာပဲ။

Page 117 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Class Selector အခုဆကးလကးၿပီ့ CSS ရဲ႕ Class Selector ေတြအေၾကာငး့ကုိေၿပာပါမယး … HTML Element တစးခုတညး့အတြငး့မွာ ၂ငး့ရဲ႕ content ကုိအမ္ဳိ့မ္ဳိ့ခြဲေရ့ခ္ငးတယးဆုိရငး Class Selector ကုိသုဵ့ေပ့ရပါတယး .. ဘယးလုိအမ္ဳိ့မ္ဳိ့ခြဲေရ့တာလညး့ ဘယးလုိေတြ ကြာၿခာ့သြာ့လညး့ဆိုတာ ဥပမာကုိၾကညးံပါ။ CSS Code p.right {text-align: right} p.center {text-align: center} p.left{text-align: left} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="right">This is RIGHT</p> <p class="center">This is CENTER</p> <p class="left">This is LEFT</p> </body> </html>

Page 118 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<p> element ထဲမွာ class ဆုိတဲ႔ attribute ကုိသုဵ့ၿပီ့ CSS ရဲ႕ class selector ကုိ value အၿဖငးံသုဵ့ထာ့တာပဲၿဖစးတယး။ class=”right”

ဆုိၿပီ့သုဵ့ထာ့လုိကးၿခငး့ဟာ

p.right

{text-align:

right}

ကုိေခၚယူသုဵ့ဆြဲတာနဲ႔

အတူတူပဲ

ၿဖစးသြာ့ပါလိမးံမယး… ေနာကးတစးခုကေတာံ ဒီ class selector ကုိပဲ element တုိငး့ကေခၚယူသုဵ့လုိ႔ရေအာငး CSS မွာ ေရ့သာ့လုိ႔ရပါတယး …

CSS Code .right {text-align: right} .center {text-align: center} .bold{font-weight: bold;} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 class="center">This is CENTER Head</h1> <p class="right">This is RIGHT</p> <p class="bold">This is BOLD</h3> </body> </html> ဒီအတုိငး့ဆုိရငး <p> element ကပဲၿဖစးေစ <h> element ကပဲ ၿဖစးေစ ေခၚယူသုဵ့ဆြဲလုိ႔ရပါတယး။ ဒီလုိ class အမညးေတြကုိ ကုိယးၾကိဳကးတာေပ့လုိ႔ရပါတယး … ဒါေပမဲ႔ ကၽြနးေတားတုိ႔ေပ့လုိကးတဲ႔ class အမညးေတြက နဵပါတးေတြမၿဖစးရပါဘူ့။ ကိနး့ဂဏနး့ေတြနဲ႔ေပ့ထာ့ရငး ၂ငး့ class ကုိမသိေတာံပါဘူ့။ CSS Code .mgmg {text-align: right} .123 {text-align: center} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

Page 119 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <h1 class="123">This is CENTER Head</h1> <p class="mgmg">This is RIGHT</p> </body> </html> အေပၚက code ရဲ႕ result ကုိၾကညးံမယးဆုိရငး class=”mgmg” က အမွနးအတုိငး့ေပၚမွာၿဖစးၿပီ့ class=”123” ကေတာံ မေပၚပါဘူ့။

ID Selector Class Selector ၿပီ့ေတာံ ID Selector ပါ… ID Selector ကုိ သတးမွတးမယးဆုိရငးေတာံ selector ရဲ႕ ေရွ႕မွာ “#” sign ေလ့ခဵၿပီ့ေရ့ရတာပဲၿဖစးတယး။ CSS Code #idsel{ text-align: center; color: red } HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 id="idsel">This is ID Selector</h1> </body> </html>

Page 120 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

မွတးခ္ကး -: ဒါေၾကာငးံ ID selector အတြကး ID attribute ကုိသုဵ့ၿပီ့ေတာံ Class selector အတြကး Class attribute ကုိသုဵ့ပါတယး။

Code Format ေနာကးတစးခုကေတာံ

CSS code

ေလ့ေတြကုိေရ့သာ့တဲ႔အခါ

HTML

မွာေၿပာခဲ႔သလုိပဲ

ၿပနးလညးၿပငးဆငးဖုိ႔ရာ

လြယးကူေအာငး ရွငး့ရွငး့လငး့လငး့ေရ့သာ့သငးံပါတယး .. ေရ့သာ့တဲ႔ပုဵကေတာံ -

body { scrollbar-face-color: #000000; font-size: 10px; font-family: times; } p{

Page 121 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

font-size: 9px; font-family: verdana; color: red; } ဒီအတုိငး့ေရ့သာ့ထာ့ရငး ကၽြနးေတားတုိ႔ ၾကညးံရတာလညး့ လြယးကူပါတယး။

Comment /* --- */

CSS မွာ Comment ေရ့သာ့ပုဵကေတာံ /* comment text */ ပုဵစဵအတုိငး့ေရ့သာ့ရပါတယး.. အစမွာ /* ဆုိတာကုိေရ့ၿပီ့ comment ေတြရဲ႕ အဆုဵ့မွာေတာံ */ ကုိေရ့သာ့ေပ့ၿခငး့အာ့ၿဖငးံ browser မွာ ၂ငး့ comment ကုိေပၚလာမွာမဟုတးပါဘူ့။ /* Name : CSS Tutorial URL: http://www.worldwidemyanmar.com Description: This is HTML and CSS Tutorial by WWM Version: 1.0 Author: Administrator Tags: news, reviews, tutorial, products, buy, sell */ body { scrollbar-face-color: #000000; font-size: 10px; font-family: times; } /* This is paragraph */ p{ font-size: 9px; font-family: verdana; color: red; }

ဒီလုိေရ့သာ့ၿခငး့အာ့ၿဖငးံ ဒီ CSS ရဲ႕ Author နဲ႔ သူနဲ႔ပကးသကးတဲ႔အေၾကာငး့အရာေတြ အာ့လုဵ့ကုိ CSS ဖုိငးကုိ ဖြငးံၾကညးံလုိကးတာနဲ႔ သိသာေအာငး Comment ေရ့သာ့ထာ့တဲ႔ အတြကး သိသာႏုိငးပါတယး။ Page 122 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Colors and Backgrounds

HTML Webpage ေတြရဲ႕ စာသာ့ရဲ႕ အေရာငး Background ရဲ႕ အေရာငးနဲ႔ Background Image ေတြသတးမွတးဖုိ႔အတြကးပဲၿဖစးပါတယး..

Property color

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ ဒီ Property က စာသာ့ေတြရဲ႕ foreground အေရာငးအတြကးအသုဵ့ၿပဳၾကပါတယး။ ဥပမာ

အေနနဲ႔

ၾကညံးမယးဆုိရငး

<h1>

ထဲက

စာသာ့ေတြကုိ

အနီေရာငးေပ့ခ္ငးတယးဆုိရငး ကၽြနးေတားတုိ႔က ေအာကးပါအတုိငး့ CSS နဲ႔ HTML မွာေရ့သာ့ရပါလိမးံမယး …

CSS Code (style.css) h1{ color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

Page 123 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

background-color

DREAM IT, CODE IT BY PLANETCREATOR .NET

စာသာ့ေတြရဲ႕

ေနာကးခဵ

Background,

Text

ေတြရဲ႕

ေနာကးခဵ

Background

အေရာငးကုိ ေၿပာငးဖုိ႔အတြကးသုဵ့ပါတယး။ CSS Code (style.css) body { background-color: cyan; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

background-image

ေနာကးခဵ ပုဵကုိထညးံသြငး့ခ္ငးတယးဆုိရငး background-image ဆုိၿပီ့ထညးံေပ့ရတယး .

Value ကေတာံ url(“filename”); ဆုိၿပီ့ထညးံရတယး… url ဆုိတာ မိမိတုိ႔ထညးံမညးံ ပုဵရဲ႕

လမး့ေၾကာငး့ေပါ႔…အကယး၍

Web

Link

ကေနထညးံခ္ငးတယးဆုိရငး

url(“http://www.worldwidemyanmar.com/my-computer1.png”);

Page 124 of 197

ဆုိၿပီ့ထညးံ

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET သြငး့ေပ့ရပါတယး။ CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

background-repeat

အေပၚက

ပုဵမွာ

အလ္ာ့လုိကးေကာ

Page 125 of 197

ကၽြနးေတားတုိ႔ အနဵလုိကးပါ

သတိထာ့မိပါလိမံးမယး ..

အဲ႔ဒါကေတာံ

အၿပညးံၿဖစးေနတာေတြ႔ရပါလိးမံးမယး …

ပုဵေတြက ဒီပုဵေတြရဲ႕

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET ေပၚလြငးမႈကုိ ကနး႔သတး၊ သတးမွတးမယးဆုိရငး သုဵ့ပါတယး။ ဒီအထဲမွာ value အာ့ၿဖငးံ ၂ မ္ဳိ့ရွိပါတယး…

Value

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

background-repeat: repeat-x

အလ္ာ့လုိကး

ေဘ့ခ္ငး့ဆကး

ပုဵေတြကုိ

ေနရာခ္ ထာ့ေပ့တာပဲ ၿဖစးပါတယး… background-repeat: repeat-y

အေပၚေအာကး

ပုဵေတြကုိ

ေဖားၿပ

ေပ့သြာ့မွာၿဖစးပါတယး။ background-repeat: repeat

သူကေတာံ ေဘ့ဘယးညာ အေပၚေအာကး အကုနး

အၿပညးံ

ပုဵေတြကုိ

ထညးံေပ့သြာ့မွာပါ… သူက Default Value လညး့ၿဖစးပါတယး။ background-repeat: no-repeat

အကယး၍ ကၽြနးေတားတုိ႔ သတးမွတးလုိကးတဲ႔ ပုဵကုိ

repeat

မလုပးခ္ငးဘူ့၊

တစးနညး့အာ့ၿဖငးံ တစးခုတညး့ထညးံထာ့တာ တစးပုဵပဲေပၚခ္ငးတယးဆုိရငး ကုိသုဵ့ပါတယး..

ေအာကးပါ

norepeat ဥပမာမွာ

norepeat ကုိသုဵ့ၿပထာ့ပါတယး။ CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

Page 126 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <body> <h1>This is Red Header</h1> </body> </html>

background-attachment

ထညးံသြငး့ထာ့တဲ႔ပုဵေတြကုိ

lock

လုပးတာ

unlock

လုပးတာေတြအတြကး

သုဵ့တာပဲၿဖစးတယး … lock လုပးတယးဆုိတာကေတာံ ကၽြနးေတားတုိ႔ရဲ႕ ပုဵက browser ရဲ႕ scroll

ကုိဆြဲလုိကးတုိငး့မွာ

ပုဵက

အေပၚေအာကး

မတကးသြာ့ပဲ

မိမိထာ့လုိကးတဲ႔

ေနရာမွာ အၿမဲရွိေနတဲ႔ပုဵစဵပါပဲ…

Value

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

background-attachment: scroll

သူက

Image

ကုိ

Unlock

အတုိငး့ၿဖစးေပၚေစပါတယး။ Default Value ေပါ႔။ background-attachment: fixed

ပုဵကုိ

lock

လုပးတာပဲၿဖစးပါတယး။

ေအာကးက ဥပမာကုိ စမး့ၾကညးံပါ CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #FF0000;

Page 127 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

Scroll ကုိေအာကးသုိ႔ ဆြဲခ္ လုိကးေသားလညး့ ပုဵက ဆြဲလုိကး တုိငး့မွာ လုိကးပါလာတာကုိ ေတြ႔ရပါလိမးံမယး..

background-position

ပုဵကုိ မိမိတုိ႔ထာ့လုိတဲ႔ေနရာသတးမွတးၿခငး့ ပဲၿဖစးပါတယး။ ဥပမာအေနနဲ႔

position

ကုိ

100px

255px

လုိ႔သတးမွတးမယးဆုိရငး

ဘယးဘကးေဘ့ကေန 100px အကြာအေှ့နဲ႔ အေပၚကေန 255px အကြာအေှ့ ၿဖငးံ Browser နဲ႔တုိငး့တာကာ ေဖားၿပေပ့သြာ့ပါလိမးံမယး …

Page 128 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET Value

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

background-position: 2cm 2cm

ဘယးဘကးက 2cm နဲ႔ အေပၚကေန 2cm ဆုဵမွတးကုိ သတးမွတးတာၿဖစးပါတယး။

background-position: 50% 25%

ဒါကေတာံ

ရာခုိငးႏႈနး့နဲ႔

တြကးတာပဲၿဖစးတယး။ background-position: top right

သူကေတာံ ေနရာေတြကုိ top right left bottom ဆုိၿပီ့ေဖားၿပေပ့တာပဲၿဖစးပါတယး။

CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

Page 129 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ပုဵက browser ရဲ႕ ညာဘကး ေအာကးေၿခကုိေရာကးသြာ့ပါလိမးံမယး..

background

background ကေတာံ အေပၚက ေၿပာခဲ႔တဲ႔ background properties ေတြအာ့လုဵ့ကုိ စုေပါငး့ၿပီ့ေရ့ အတုိခ္ဴပးေရ့သာ့ရာမွာသုဵ့ပါတယး။ ေအာကးပါ CSS code ကုိၾကညးံပါ CSS Code (style.css) background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; အေပၚက code ေတြအာ့လုဵ့ကုိ ေပါငး့ၿပီ့ေရ့လုိ႔ရပါတယး ..

CSS Code (style.css) {background property} body { background: cyan url("my-computer1.png") no-repeat fixed right bottom; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head>

Page 130 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>

ဒီေလာကးဆုိရငးေတာံ background ရဲ႕ Compiling အေၾကာငး့ကုိ သိေလာကးၿပီ ထငးပါတယး။

Fonts CSS မွာ အမ္ဳိ့မ္ဳိ့ေသာ font ေတြကုိဘယးလုိထညးံသြငး့အသုဵ့ၿပဳတယးဆုိတာ သိရွိရနးအတြကးပဲၿဖစးတယး။ Property

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

font-family

font-family

ကေတာံ

CSS

မွာကၽြနးေတားတုိ႔က

font

ေတြကုိ

ဦ့စာ့ေပ့

သတးမွတးတာပါပဲ .. web programmer ေပ့ထာ့တဲ႔ ပထမဦ့စာ့ေပ့ font က user ရဲ႕ စကးထဲမွာ မရွိရငး ဒုတိယ ဦ့စာ့ေပ့ font ကုိအသုဵ့ၿပဳႏုိငးေအာငးလုိ႔ပါ။ သူ႔မွာ family-name နဲ႔ generic-family ဆုိၿပီ့ ႏွစးခုရွိပါတယး…

Family-name ကေတာံ Times New Roman, Arial , Verdana, Tahoma စသညးံ font အမညးေတြပဲၿဖစးပါတယး။ Generic family ဆုိတာကေတာံ Times New Roman, Garamond, Georgia ဒီသုဵ့ခုက serif ဆုိတဲ႔ generic family ပဲၿဖစးတယး။

Page 131 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အသုဵ့ၿပဳပုဵေလ့ေတြကုိ ၾကညးံရေအာငး…

CSS Code (style.css) {background property} h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 written in Arial</h1> <h2>And heading 2 in Times New Roman</h2> </body> </html>

Page 132 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚက font-family မွာ ပထမဦ့စြာ arial font ကုိၾကညံးပါမယး.. ၂ငး့ font စကးထဲမွာ မရွိမွ verdana ကုိေၿပာငး့ပါမယး.. verdana မရွိဘူ့ဆုိရငး sans-serif ထဲက font တစးခုခုကုိ ၾကညးံပါလိမးံမယး… font-style

ေရ့သာ့ထာ့တဲ႔

font

ရဲ႕

normal,

italic

or

oblique

စသညးံ

styling

ေတြကုိသတးမွတးတာပါ အသုဵ့ၿပဳပုဵေလ့ေတြကုိ ၾကညးံရေအာငး…

CSS Code (style.css) h1 { font-family: arial, verdana, sans-serif; font-style: italic; } h2 { font-family: "Times New Roman", serif; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 written in Arial Roman - Italic</h1>

Page 133 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <h2>And heading 2 in Times New </h2> </body> </html>

အေပၚက ပုဵမွာ Heading 1 က စာလုဵ့အေစာငး့ေလ့ေတြၿဖစးေနပါလိးမံးမယး … font-variant

စာလုဵ့အၾကီ့ေတြထဲမွ

ေရွ႕ဆုဵ့စာလုဵ့တစးခုကုိ

size

အၾကီ့နဲ႔ေရ့ၿပီ့

ေနာကးဆုဵ့စာလုဵ့ကုိေတြကုိ size အေသ့နဲ႔ေရ့တာပဲၿဖစးတယး။ မရွငး့ရငး ေအာကးက ပုဵကုိၾကညးံလုိကးပါ…

အေပၚက ပုဵအတုိငး့ေရ့သာ့ဖုိ႔အတြကးပဲ ေၿပာတာၿဖစးပါတယး။ CSS Code (style.css) h1 { font-variant: small-caps; } h2 { font-variant: normal; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 - Small Caps</h1>

Page 134 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <h2>And heading 2 - normal</h2> </body> </html>

font-weight

စာလုဵ့ေတြကုိ normal သုိ႔မဟုတး bold သတးမွတးဖုိ႔အတြကးပါ။ CSS Code (style.css) p{ font-family: arial, verdana, sans-serif; } td { font-family: arial, verdana, sans-serif; font-weight: bold; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <table border="1" cellpadding="10"> <tr> <td>Text in bold</td> </tr>

Page 135 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </table> <p>Normal text here</p> </body> </html>

Cell ကြကးထဲက စာလုဵ့က Bold ၿဖစးေနတာကုိေတြ႔ရပါလိမးံမယး .. font-size

Font ေတြရဲ႕ အရြယးအစာ့ကုိ သတးမွတးဖုိ႔အတြကးပဲၿဖစးတယး .. သတးမွတးတဲ႔ေနရာမွာ pixels သုိ႔မဟုတး percentages ကုိသုဵ့ၾကပါတယး။ ေအာကးက CSS ကုိၾကညံးမယးဆုိရငး em နဲ႔ pt ဆုိတာေတြ႔ရပါလိးမံးမယး … px နဲ႔ pt ေတြက absolute size ေတြၿဖစးတယး။ % နဲ႔ em ကေတာံ user ေတြအေနနဲ႔ adjust လုပးလုိ႔ရတဲ႔ size ေတြပဲၿဖစးပါတယး။

Browser က Zoom In , Zoon Out နဲ႔ size ကုိ အၾကီ့အက္ယးလုပးတာပါပဲ။

Page 136 of 197

Points

Pixels

Ems

Percent

6pt

8px

0.5em

50%

7pt

9px

0.55em

55%

7.5pt

10px

0.625em

62.5%

8pt

11px

0.7em

70%

9pt

12px

0.75em

75%

10pt

13px

0.8em

80%

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET 10.5pt

14px

0.875em

87.5%

11pt

15px

0.95em

95%

12pt

16px

1em

100%

13pt

17px

1.05em

105%

13.5pt

18px

1.125em

112.5%

14pt

19px

1.2em

120%

14.5pt

20px

1.25em

125%

15pt

21px

1.3em

130%

16pt

22px

1.4em

140%

17pt

23px

1.45em

145%

18pt

24px

1.5em

150%

20pt

26px

1.6em

160%

22pt

29px

1.8em

180%

24pt

32px

2em

200%

26pt

35px

2.2em

220%

27pt

36px

2.25em

225%

28pt

37px

2.3em

230%

29pt

38px

2.35em

235%

30pt

40px

2.45em

245%

32pt

42px

2.55em

255%

34pt

45px

2.75em

275%

36pt

48px

3em

300%

CSS Code (style.css) h1 { font-size: 30px; } h2 { font-size: 12pt; } h3 { font-size: 120%; } p{ font-size: 1em; } HTML Code (index.html) <html>

Page 137 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading &lt;h1&gt; size 30px</h1> <h2>Heading &lt;h2&gt; size 1cm</h2> <h3>Heading &lt;h3&gt; size 120%</h3> <p>Paragraph &lt;p&gt; size 1em</p> </body> </html>

font

ဒါကေတာံ

font

compiling

ပါပဲ..

အေပၚတစးခုမွာ

background

Property

တုနး့ကလညး့ Background Compile လုပးခဲ႔သလုိ အခုလညး့ font property မွာ font compiling မွာ လုပးလုိ႔ရပါတယး။ CSS Code (style.css) p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } CSS Code (style.css) {Font Compiling} p{ font: italic bold 30px arial, sans-serif; }

Page 138 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>This is Font Compiling</p> </body> </html>

Text စာသာ့ ၿပငးဆငးမႈပုိငး့နဲ႔ သကးဆုိငးတဲ႔ က႑တစးခုပဲၿဖစးပါတယး။ စာေတြကုိ ဘယးညာ alignment ေတြၿပငးမယး … spacing ေတြၿပငးဆငးဖုိ႔အတြကးသုဵ့တာပဲၿဖစးပါတယး။ Property

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

text-indent

Microsoft Word မွာလုိ စာသာ့ေတြကုိ အထဲကုိ တြနး့ထုတးခ္ငးတယးဆုိရငး text-indent ကုိသုဵ့ေပ့ရပါတယး။ CSS Code (style.css) p{ text-indent: 50px; } HTML Code (index.html)

Page 139 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>This is Text Indent</p> </body> </html>

text-indent: 50px

text-align

စာသာ့ေတြကုိ ေဘ့ဘယးညာ Alignment အတြကးသုဵ့ပါတယး။ CSS Code (style.css) th { text-align: right; } td { text-align: center; } p{ text-align: justify; } HTML Code (index.html)

Page 140 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <table border="1" width="100%"> <tr> <th>Heading 1</th> </tr> <tr> <td>Cell 1</td> </tr> </table> <p>Justified text in paragraphs</p> </body> </html>

text-decoration

စာသာ့ေတြကုိ

ေအာကး

နဲ႔

အေပၚက

မ္ဥး့တာ့တာတုိ႔

အလယးကေန

ၿဖတးမ္ဥး့တာ့တုိ႔

ၿပဳလုပးမယးဆုိရငး သုဵ့ရပါတယး။ CSS Code (style.css) h1 { text-decoration: underline; } h2 { text-decoration: overline;

Page 141 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

} h3 { text-decoration: line-through; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This text is underlined</h1> <h2>This text is overlined</h2> <h3>This text is lined trough</h3> </body> </html>

text-spacing

စာလုဵ့တစးလုဵ့ခ္ငး့စီရဲ႕ အကြာအေှ့ကုိ သတးမွတးရနး။ CSS Code (style.css) h1 { letter-spacing: 5px; } p{ letter-spacing: 30px;

Page 142 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

} HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Space between text characters</h1> <p>This is 30 px text spacing</p> </body> </html>

text-transform

စာလုဵ့ေတြကုိ Uppercase အေနနဲ႔ ေရ့မွာလာ့၊ သုိ႔မဟုတး Lowercase အေနနဲ႔ေရ့မွာလာ့၊ capitlize လုိ႔ေခၚတဲ႔ ေရွ႕ဆုဵ့က Capital, ေနာကးပုိငး့က Small letter အေနနဲ႔ ေရ့မွာလာ့ စသညးၿဖငးံ သတးမွတးၿခငး့ကုိ text-transform လုပးတယးလုိ႔ေခၚပါတယး။ CSS Code (style.css) h1 { text-transform: uppercase; } li { text-transform: capitalize; } p{

Page 143 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET text-transform: lowercase;

} HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>this heading is uppercase</h1> <ul> <li>u mg tin</li> <li>aung aung</li> <li>hla hla</li> </ul> <p>This is LOWERCASE</p> </body> </html>

အေပၚက CSS နဲ႔ HTML code ေတြ ပုဵေတြကုိ တြဲၿပီ့ၾကညံးေစခ္ငးပါတယး … <p> tag ထဲမွာ ေရ့ထာ့တဲ႔ စာလုဵ့ေတြက LOWERCASE ဆုိၿပီ့ေရ့ထာ့ေပမဲ႔ text-transform မွာ lowercase လုိ႔ေရ့ထာ့တဲ႔ အတြကး browser က အာ့လဵု့ကုိ lowercase နဲ႔ေဖားၿပေပ့သြာ့တာပါ။

Link

Page 144 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS Hyperlink

ေတြကုိ

DREAM IT, CODE IT BY PLANETCREATOR .NET unvisited,

visited,

active

စသညးံအၿပငး

Link

အေပၚမွာ

mouse pointer

ေလ့ေရာကးၿပီဆုိတာနဲ႔ ထူ့ၿခာ့တဲ႔ ပုဵစဵ အသြငးအၿပငးေလ့ေတြ သတးမွတးမယးဆုိရငး သုဵ့ပါတယး။ ကၽြနးေတားတုိ႔ HTML တုနး့က Link ေတြနဲ႔ ရရငးသုဵ့ရဲ႕ tag က Anchor <a> tag ၿဖစးတယးဆိုတာ မွတးမိအုဵ့မွာပါ။ ေနာကးတစးခုကေတာံ name class , id class ေတြကုိလညး့ ေတြ႔ခဲ႕ၿပီ့ၿဖစးပါလိမးံမယး … အခုဒီေနရာမွာ သဵု့မွာက pseudo-class ပဲၿဖစးပါတယး pseudo-class က HTML class နဲ႔ပုဵတူေသားလညး့ အသုဵ့ၿပဳတဲ႔ ေနရာနဲ႔ အသုဵ့ှငးပုဵေလ့ေတြက ကြဲၿပာ့ပါတယး။ သူက markup ထဲမွာ သတးမွတးေပ့ရတာမဟုတးပါဘူ့ ။ အခ္ဳိ႕ pseudo-class ေတြက Dynamic ေတြၿဖစးပါတယး။ pseudo-clas ေတြကုိ ေရ့သာ့တဲ႔ေနရာမွာ colon (:) နဲ႔စၿပီ့ေရ့သာ့ရပါတယး .. ေရ့သာ့တဲ႔ selector နဲ႔ pseudo-class အၾကာ့မွာ white space မထာ့ရပါဘူ့။ a:link { ⋮ declarations } a:visited { ⋮ declarations } a:focus { ⋮ declarations } a:hover { ⋮ declarations } a:active { ⋮ declarations } li:first-child { ⋮ declarations } အေပၚက

အတုိငး့ေရ့သာ့ရပါတယး။

ဒါေတြက

pseudo-class

ေတြပါ။

ေအာကးက

ရွငး့ၿပမႈကေတာံ

Link

ေတြနဲ႔ပကးသကးတဲ႔ Pseudo-class ေတြကုိပဲရွငး့သြာ့မွာၿဖစးပါတယး။ အတြငး့မွာေရ့သာ့ရတဲ႔

color, background-color စသညးတုိ႔ကုိ

အထကးမွာ

ရွငး့ၿပခဲ႔ၿပီ့ၿဖစးတဲ႔အတြကး

ထပးမဵ၍

မရွငး့ၿပေတာံပါဘူ့။ Pseudo-Class for Links

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

link

User ေတြအေနနဲ႔ သြာ့ေရာကးလညးပတးမႈ

မရွိေသ့ေသာ Link ေတြရဲ႕ အေရာငးကုိ

သတးမွတးရနး။

Page 145 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Syntax :link { declaration block } CSS Code (style.css) a:link { color: #0be734; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Unvisited links are light blue</h1> <p><a href="index1.html">This is a unvisited link</a></p> </body> </html>

အေပၚက Link မွာဆုိရငး index1.html ဆုိတဲ႔ link ကုိသြာ့ေရာကးခဲ႔မႈ မရွိဘူ့ဆုိရငး CSS မွာသတးမွတးထာ့တဲ႔အတုိငး့ link က အစိမး့ေရာငးၿဖစးေနပါလိမးံမယး … visited

သြာ့ေရာကးလညးပတးၿပီ့သာ့ Link ေတြကုိ အေရာငးနဲ႔ ေဖားၿပခ္ငးတယးဆုိရငးသုဵ့ပါတယး။ Syntax :visited {

Page 146 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET declaration block

} CSS Code (style.css) a:visited { color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Visited Links are red</h1> <p><a href="index.html">This is a visited link</a></p> </body> </html>

အေပၚက Link မွာဆုိရငး index.html ဆုိတဲ႔ link ကုိသြာ့ေရာကးလညးပတးဖူ့ခဲ႔တဲ႔အတြကး အနီေရာငးေလ့နဲ႔ ၿဖစးေနပါလိမးံမယး.. active

သြာ့ေရာကးလညးပတးဖုိ႔ အသငးံၿဖစးေနတဲ႔ link တစးခုကုိ click ဖိၿပီ့ ႏုိပးထာ့လုိကးရငး :Syntax :active { declaration block }

Page 147 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

CSS Code (style.css) a:active { background-color: #FFFF00; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h3>Active links get a yellow background</h3> <p><a href="index.html">Click here and keep the button down</a></p> </body> </html>

ကၽြနးေတားတုိ႔ အေပၚက Link ကုိ Click ႏုိပးထာ့လုိကးၾကညးံပါ ဒါဆုိရငး ၂ငး့ Link က active တဲ႔

အေနအထာ့မွာ

CSS

က

သတးမွတးထာ့တဲ႔

အှါေရာငး

ေနာကးခဵေလ့

ေပၚေနပါလိမးံမယး.. hover

Mouse pointer ေလ့ကုိ Link အေပၚကို တငးလုိကးတဲ႔အခ္ိနးမွာ font design ေၿပာငး့တာတုိ႔၊ အေရာငးေၿပာငး့တာတုိ႔ စသညးံ ထူ့ၿခာ့တဲ႔ effect ေလ့ေတြထညးံသြငး့ၿခငး့ပဲၿဖစးပါတယး။ Syntax :hover { declaration block

Page 148 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

} CSS Code (style.css) a:hover { color: orange; font-style: italic; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hover effect on links!</h1> <p><a

href="index.html">Move

the

cursor

over

this

link</a></p> </body> </html>

အေပၚက link မွာ mouse pointer ကုိတငးလုိကးတာနဲ႔ CSS code မွာေပ့ထာ့သလုိ အေရာငးကုိ အှါေရာငးနဲ႔ italicized ေလ့ၿဖစးေနပါလိမးံမယး…

Note-: ဒီႏွစခ း ုတညး့မဟုတးပါဘူ့။ အၿခာ့ background အေရာငးေတြေၿပာငး့တာတုိ႔ image ေတြေၿပာငး့တာ၊ text-spacing ေတြေၿပာငး့တာ ၊ Uppercase, Lowercase ေၿပာငး့တာ စသညးၿဖငးံ ေတားေတားမ္ာ့မ္ာ့သုဵ့လုိ႔ရပါတယး။

Page 149 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Link ရဲ႕ ေအာကးက Line

ကၽြနးေတားတုိ႔

အေပၚက

ပုဵေတြတုိငး့ကုိ

သတိထာ့ၿပီ့ၾကညးံမယးဆုိရငး

link

ပါတဲ႔

ကုိဖယးရွာ့ၿခငး့

စသာ့ေတြတုိငး့မွာ underline ေလ့ေတြ ၿဖစးေနပါလိမးံမယး… အကယး၍ ကၽြနးေတားတုိ႔က ၂ငး့ line ကုိမၾကိဳကးလုိ႔ ဖယးထာ့ခ္ငးတယးဆုိရငး ဖယးလုိ႔ရပါတယး။ Syntax a{ declaration block } CSS Code (style.css) a{ text-decoration:none; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Remove underlining from links</h1> <p><a href="index.html">This is a example of a link without underlining!</a></p> </body> </html>

ဒါဆုိရငး line မေပၚေတာံပါဘူ့။

Page 150 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အကယး၍ property တစးခုခ္ငး့စီအတြငး့မွာ သတးမွတးမယးဆုိရငးလညး့ ရပါတယး။ CSS Code (style.css) a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; } အထကးပါ အတုိငး့ေရ့သာ့ရမွာပါ။

Identification and grouping of elements (class and id) ေခါငး့စဥးေတြ အမ္ာ့ၾကီ့ထဲက ေခါငး့စဥးတစးခုကုိၿဖစးေစ၊ Categories ေတြအမ္ာ့စုထဲက မိမိသတးမွတးလုိ႔တဲ႔ category တစးခု သုိ႔မဟုတး၊ တစးစု ကုိၿဖစးေစ သီ့သနး႔ခြဲၿပီ့သတးမွတးခ္ငးတယးဆုိရငး သုဵ့ေပ့ရပါတယး။ ဥပမာေလ့ ကုိၾကညးံလုိကးတာက ပုိၿပီ့ရွငး့ပါလိမးံမယး…

Identification

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

of Elements class

အေပၚမွာ ကၽြနးေတားတုိ႔ class နဲ႔ id အေၾကာငး့ကုိ အထုိကးအေလ္ာကး ရွငး့ၿပခဲ႔ၿပီ့လညး့ၿဖစးပါတယး .. အခု class ကုိဘယးလုိသုဵ့တယးဆုိတာ ေဖားၿပထာ့ပါတယး။ ကၽြနးေတားတုိ႔မွာ ေအာကးပါအတုိငး့ red wine နဲ႔ white wine ဆုိၿပီ့ မတူညီတဲ႔ grapes wine

Page 151 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ႏွစးခုရွိတယးဆုိၾကပါစုိ႔ … <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul> ဒါကုိ ကၽြနးေတားတုိ႔က white wine အစုပါတဲ႔ link ေတြကုိ အှါရငးံေရာငး အၿဖစးစုမယး… red wine ေတြကုိ အနီေရာငး အၿဖစး ေဖားၿပခ္ငးတယးဆုိရငး class attribute နဲ႔သုဵ့ပါမယး။ CSS Code (style.css) a{ color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>

Page 152 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a

href="cs.htm"

class="redwine">Cabernet

Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul> <p>This is an example of a <a href="dok.htm">link without any class</a> - it is still blue.</p> </body> </html>

ပုဵမွနးအာ့ၿဖငးံ link ေတြတုိငး့က အၿပာေရာငးေတြပဲၿဖစးရမွာပါ… ဘာေၾကာငးံလဲဆုိေတာံ a ဆုိတဲ႔ selector မွာ color ကုိ အၿပာေရာငးေပ့ထာ့တယးေလ..။ ဒါေပမဲ႔ အဲ႔အထဲကမွာ ကၽြနးေတားတုိ႔က သီ့သနး႔ခြဲၿပီ့ class

attribute

ကုိသုဵ့ကာ

အှါရငးံေရာငးအစု

တစးခုနဲ႔

အနီေရာငး

အစုတစးခုတုိ႔ကုိ

ဖနးတီ့လုိကးတာၿဖစးပါတယး။ id

id class အတြကး id selector နဲ႔ id selector ကုိေရ့သာ့ရငး “#” sign ေလ့ခဵၿပီ့ေရ့ရတယးဆုိတာ ID Selector ဆုိတဲ႔ အထကးမွာ ရွငး့ၿပခဲ႔ၿပီ့ပါၿပီ။ CSS Code (style.css)

Page 153 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

#c1-2 { color: red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 id="c1">Chapter 1</h1> <h2 id="c1-1">Chapter 1.1</h2> <h2 id="c1-2">Chapter 1.2</h2> <h1 id="c2">Chapter 2</h1> <h2 id="c2-1">Chapter 2.1</h2> </body> </html>

အေပၚက ဥပမာကုိၾကညးံမယးဆုိရငး HTML မွာ chapter 1, 1.1, 1.2, 2 စသညးၿဖငးံ သူတုိ႔ကုိ id class ေရ့သာ့သတးမွတးရနးအတြကး css မွာ id selector နဲ႔ေရ့ထာ့တာပဲၿဖစးပါတယး။ ဒါေၾကာငးံ ေပ့ထာ့တဲ႔ class ရဲ႕ value ေတြကလညး့ မတူညီရပါဘူ့။

Grouping of elements (span and div)

Page 154 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ဒီတစးခါေတာံ အေပၚက span နဲ႔ div အေၾကာငး့ပါပဲ … HTML မွာ ရွငး့ၿပထာ့လုိ႔ သူတုိ႔ကုိ သေဘာေပါကး ေနေလာကးပါၿပီ.. ဒါေပမဲ႔ CSS မွာဆုိရငး ဒါေတြကုိ class နဲ႔ id attribute

ေတြနဲ႔ တြဲၿပီ့သုဵ့ပုဵ သုဵ့နညး့ကုိေဖား

ၿပေပ့သြာ့မွာပါ။ Grouping

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

with <span>

span tag ကုိ class attrribute နဲ႔ တြဲၿပီ့သုဵ့တာ မ္ာ့ပါတယး။ CSS Code (style.css) span.benefit { color:red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>Early

to

bed

and

early

to

rise

makes

a

man

<span

class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p> </body> </html>

ဒါဆုိရငး စာေၾကာငး့တစးေၾကာငး့လုဵ့ အတြငး့မွ မိမိတုိ႔ ေရြ့ခ္ယးထာ့တဲ႔ စကာ့စုေလ့ကုိ span tag ကုိသုဵ့ၿပီ့ အေရာငးသြငး့သြာ့တာပဲၿဖစးပါတယး။ <div>

ဒီအခါေတာံ div ကုိသုဵ့ၿပီ့ Elements ေတြကုိ Group ဖြဲ႕ပါမယး။ အသဵု့ၿပဳပုဵေလ့ကုိ ေအာကးမွ

Page 155 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေဖားၿပထာ့ပါတယး။ CSS Code (style.css) #democrats { background:blue; } #republicans { background:red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul>

Page 156 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET </div>

</body> </html>

Democrats အစုနဲ႔ Republicans အစုေတြကုိ ေနာကးခဵ အၿပာနဲ႔ အှါ ေနာကးခဵအေရာငးေလ့ေတြ သတးမွတးႏုိငးဖုိ႔ div tag နဲ႔ id attribute ကုိသုဵ့ထာ့ပါတယး။ CSS မွာေတာံ id selector ေပါ႔.

The box model Professional Web page

ေတြကုိ ၿဖစးေပၚဖုိ႔အတြကး CSS ရဲ႕ Layout ေကာငး့မႈကလညး့ အေရ့ပါတဲ႔

အခနး့က႑ကေနပါှငးေနပါတယး.. ဒါေၾကာငးံလဲ CSS ဆုိတာ Styling and Layout အတြကးပဲ ဆုိၿပီ့ လူသိမ္ာ့ၾကတာပါ။ ဒါဆုိရငး

အခု

ဒီေနရာမွာ

margin,

border,

padding and content

ေတြကုိ

အစီအစဥးတက္သုဵ့တတးဖုိ႔

အေရ့ၾကီ့ပါတယး။ ဒါဟာ CSS ရဲ႕ အေရ့ပါတဲ႔ အပုိငး့ပါပဲ။ The box model ကုိ အသုဵ့ၿပဳတတးဖုိ႔အတြကး ေအာကးပါ structure ကုိ ၿမဲၿမဲမွတးသာ့ထာ့ဖုိ႔လုိပါတယး။

Page 157 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ဒီအခါေတာံ div ကုိသုဵ့ၿပီ့ Elements ေတြကုိ Group ဖြဲ႕ပါမယး။ အသဵု့ၿပဳပုဵေလ့ကုိ ေအာကးမွ ေဖားၿပထာ့ပါတယး။ CSS Code (style.css) h1 { color: #0000FF; margin-top: 10px; margin-right: 255px; margin-bottom: 8px; margin-left: 30px; } p{ color:#FFAA66; margin-top: 3px; margin-right: 30px; margin-bottom: 3px; margin-left: 30px; padding-left: 70px; }

HTML Code (index.html)

Page 158 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> </body> </html>

အေပၚက Source Code ရဲ႕ Result ပါ။

Page 159 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚက ပုဵကုိ ၾကညးံရုဵနဲ႔ margin, padding, border နဲ႔ content ေတြအေၾကာငး့ကုိ သိေလာကးၿပီ ထငးပါတယး။

Margin

စာသာ့ေတြရုိကးထညံးထာ့တဲ႔ အစြနးဆုဵ့ အပုိငး့ပဲၿဖစးပါတယး။ Margin မွာ right, left, top and bottom ဆိုၿပီ့ရွိပါတယး။

Page 160 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

CSS Code (style.css) body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

ေအာကးပါအတုိငး့လညး့ေရ့သာ့လုိ႔ရပါတယး။ CSS Code (style.css) body { margin: 100px 40px 10px 70px; }

ဒါဟာ နာရီလကးတဵ လညးပတးပုဵအတုိငး့ပါပဲ… top, right, bottom, left ဆုိၿပီ့သြာ့ပါတယး။

Padding

Border နဲ႔ elements ေတြၾကာ့အကြာအေှ့ကုိ သတးမွတးတာပဲၿဖစးပါတယး။ CSS Code (style.css) h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1> <h2>Header 2</h2> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards

Page 161 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

one another in a spirit of brotherhood</p> </body> </html> padding: 20px 20px 20px 80px;

padding-left:120px;

အေပၚက

Header

1

နဲ႔

Header

အထဲကုိေရာကးေနတာေတြ႔ရပါလိမးံမယး …

2

ေတြကုိၾကညးံပါ.. padding

padding

ကုိသုဵ့ထာ့တဲ႔အတြကး

ကုိပုိၿပီ့ေပၚလြငးေအာငးလုိ႔

၂ငး့တုိ႔

ႏွစးခုက

ေနာကးခဵအေရာငးနဲ႔ထညးံၿပီ့

ေဖားၿပထာ့တာပါ။

Borders

Web Content

ေတြကုိ အနာ့ေဘာငးေတြ ခတးဖုိ႔အတြကး သုိ႔မဟုတး ေဘာငးေတြကုိ လွလွပပ

ၿပငးဆငးဖုိ႔ လုပးမယး​းဆုိရငး border ကုိသုဵ့ေပ့ရပါတယး။ ၂ငး့တုိ႔အာ့ border ရဲ႕ width , border ရဲ႕ style နဲ႔ border ရဲ႕ အေရာငးေတြဆုိၿပီ့ ခြဲၿခာ့အသုဵ့ၿပဳသြာ့ႏုိငးပါတယး။ Border‟s Properties

ရွငး့လငး့ခ္ကး ႏွငးံ ဥပမာ

border-width

Border

ရဲ႕

အထူအပါ့ကုိသတးမွတးရနး။

၂ငး့အာ့

thin,

medium နဲ႔

thick

ဆုိၿပီ့ေရ့သာ့လုိ႔ရသလုိ px နဲ႔လညး့ သတးမွတးလုိ႔ရပါတယး။

CSS Code (style.css) h1 { border-width: thick;

Page 162 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET } h2 { border-width: 20px; }

border-color

Border ရဲ႕ အေရာငးကုိ သတးမွတးရနး။ အေရာငးအာ့ Color အမညး {Cyan, Yell, etc… } (သုိ႔မဟုတး) color ရဲ႕ hex code {#123456} (သုိ႔မဟုတး) rgb color { rgb(123,123,123)} နဲ႔ေပ့လုိ႔ရပါတယး။ CSS Code (style.css) h1 { border-color: gold; } h2 { border-color: #FFFF00; }

border-style

ကၽြနးေတားတုိ႔

သတးမွတးလုိကးတဲ႔

border

ရဲ႕

ပုဵစဵကုိေၿပာတာပါ။

dotted

line

နဲ႔ထာ့မွာလာ့, dashed line နဲ႔လာ့ စသညးၿဖငးံ သတးမွတးႏုိငးပါတယး။ သူတုိ႔ရဲ႕ value ေတြကေတာံ dotted, dashed, solid, double, goove, ridge, inset, outset ေတြပဲၿဖစးပါတယး။

Page 163 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

CSS Code (style.css) h1 { border-style: dotted; } h2 { border-style: outset; }

Border အာ့ compile လုပးေရ့မယးဆုိရငးလညး့ရပါတယး။ p { border-width: 1px; border-style: solid; border-color: blue; }

ေအာကးပါအတုိငး့ ေရ့သာ့ႏုိငးပါတယး။ p {

Page 164 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

border: 1px solid blue; }

Borders အတြကး ဥပမာ :CSS Code (style.css) h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; }

ဒါ႔အၿပငး top-, bottom-, right- or left borders ဆုိၿပီ့ special properties

ေတြထညံးသြငး့လုိ႔

ရပါေသ့တယး..

CSS Code (style.css) h1 { border-top-width: 20px; border-top-style: solid; border-top-color: red;

Page 165 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: blue; border-right-width: 20px; border-right-style: solid; border-right-color: green; border-left-width: 20px; border-left-style: solid; border-left-color: orange; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> </body> </html>

Page 166 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ဒါဆုိရငး ကၽြနးေတားတုိ႔က ေလ့နာ့ရွိရငး ေလ့ကာလာ သတးမွတးလုိ႔ရတယးေပါ႔…

Height and Width

Elements ေတြကုိ box ထဲမွာ အလ္ာ့ အနဵ တြကးခ္ကးၿပီ့ ေနရာခ္မယးဆုိရငးသုဵ့ပါတယး။ ဒီအတြကး <div> tag နဲ႔ class attribute ေတြကုိသုဵ့ပါတယး။ ေအာကးပါ ဥပမာကုိၾကညးံပါ။ CSS Code (style.css) div.box { height: 200px; width: 400px; border: 1px solid black; background: orange; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1>

Page 167 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<div class="box">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</div> </body> </html>

အလ္ာ့ 400px နဲ႔ အနဵ 200px ရွိတဲ႔ box ထဲမွာ စာသာ့ေတြကုိ ေဖားၿပေပ့ထာ့တာပဲၿဖစးပါတယး…

Floating

Magazine

နဲ႔

စာေစာငးေတြမွာ

ေဖားၿပေနတဲ႔အတုိငး့

ပုဵကုိ

ဘယး

သုိ႔မဟုတး

ညာနာ့မွာေရြ႕

ထာ့ဖုိ႔အတြကး အသုဵ့ၿပဳတာပဲၿဖစးပါတယး။

ေရ့သာ့ အသုဵ့ၿပဳပုဵေလ့ကုိၾကညးံပါ။ Page 168 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

CSS Code (style.css) #picture { float:left; width: 200px; } float: left ဆုိၿပီ့ ဘယးဘကးထဲမွာ ေနရာထာ့ဖုိ႔ ေၿပာထာ့ပါတယး။ HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="picture"> <img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px"> </div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>

Page 169 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

ေနာကးတစးခါ

float

DREAM IT, CODE IT BY PLANETCREATOR .NET

ကုိ

ကၽြနးေတားတုိ႔

column

ေတြသတးမွတး

ခ္ငးတယးဆုိရငးလညး့

အသုဵ့ၿပဳလုိ႔ရပါတယး။ CSS Code (style.css) #column1 { float:left; width: 31%; background-color:#999999; padding: 10px 10px 10px 10px; } #column2 { float:left; width: 31%; background-color:#0099CC; padding: 10px 10px 10px 10px; } #column3 { float:left; width: 31%; background-color:#666600; padding: 10px 10px 10px 10px; } id class ကုိ သုဵ့ထာ့ပါတယး။ HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="column1"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and

Page 170 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

should act towards one another in a spirit of brotherhood.</p></div> <div id="column2"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p></div> <div id="column3"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p></div> </body> </html>

အခုဟာက float ရဲ႕ column ဖြဲ႕စညး့ပုဵကုိ ကုိၿမငးသာေအာငးလုိ႔ background-color နဲ႔ Padding ေလ့ေတြပါ ထညးံသြငး့ေဖားၿပလုိကးတာပါ။ အကယး၍ float မလုိခ္ငးဘူ့ ဆုိရငး clear: both; ဆုိၿပီ့သုဵ့ေပ့လုိ႔ရပါတယး။ ေအာကးပါ ဥပမာကုိၾကညးံပါ။ CSS Code (style.css) #picture { float:left; width: 200px; }

Page 171 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

.floatstop { clear:both; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="picture"> <img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px"> </div> <h1>My Computer</h1> <p class="floatstop">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.

All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>

ဒါဆုိရငး ပုဵတစးခုတညး့ကုိပဲ float ၿဖစးၿပီ့ ကၽြနးေတားတုိ႔ floating မလုပးခ္ငးတဲ႔ စာသာ့ေတြကုိေတာံ အေပၚက css မွာ .floatstop ဆုိၿပီ့ class selector နဲ႔ ေခၚယူအသုဵ့ၿပဳထာ့ပါတယး။

Page 172 of 197

http://www.worldwidemyanmar.com

မာတိ ာ ၊ CONTENT Web က Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Positioning of elements

Contents

ေတြကုိ

ေနရာခ္တဲ႔ေနရာမွာ

ကၽြနးေတားတုိ႔က

browser

အေပၚမွာ

မိမိတုိ႔

ႏွစးသကးတဲ႔ေနရာမွာ အတိအက္ေနရာခ္လုိ႔ရပါတယး.. ဒီအတြကး browser ကုိေအာကးပါ အတုိငး့ grid ေလ့ေတြနဲ႔ စိတးထဲမွာ ေရ့ဆြဲၿပီ့ ၾကညးံရေအာငး

ဒီေနရာမွာ ကၽြနးေတားတုိ႔က Headline ဆုိတဲ႔ content တစးခုကုိ ေနရာခ္မယးဆုိပါစု… ိ႔

ဒါကုိ ကၽြနးေတားတုိ႔က အေပၚပုိငး့ကုိ 100 px နဲ႔ ဘယးဘကးေဘ့ကုိ 200 px ဆုိတဲ႔ေနရာမွာ ထာ့မယးဆုိရငး CSS မွာ ေအာကးပါအတုိငး့ေနရာခ္ရပါတယး။ h1 { position:absolute; top: 100px; left: 200px; }

ေအာကးပါအတုိငး့ ထြကးလာပါလိမးံမယး…

Page 173 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

အခုလုိေနရာခ္တဲ႔ေနအခါမွာ

DREAM IT, CODE IT BY PLANETCREATOR .NET

Absolute

နဲ႔

Relative

ဆုိၿပီ့ရွိပါတယး။

လကးေတြ႔နဲ႔

ယွဥးၾကညးံရငး

ပုိၿပီ့သေဘာေပါကးမွာပါ။ Absolute Example CSS Code (style.css) #box1 { position:absolute; top: 50px; left: 50px; background: #FA7C00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box2 { position:absolute; top: 50px; right: 50px; background: #FFFF00;

Page 174 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box3 { position:absolute; bottom: 50px; right: 50px; background: #00FF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box4 { position:absolute; bottom: 50px; left: 50px; background: #00FFFF; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>

Page 175 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="box3">Box 3</div> <div id="box4">Box 4</div> </body> </html>

Absolute က div box ေလ့ေတြကုိ အစီအစဥးအတုိငး့ left-up, right-up, right-bottom, left-bottom ဆုိၿပီ့ စဥးေပ့သြာ့ပါတယး။ Relative ကေတာံ အဲ႔လုိပုဵမဟုတးပါ။

Relative Example CSS Code (style.css) #dog1 { position:relative; left: 350px; bottom: 10px; } #dog2 { position:relative; left: 450px; bottom: 100px; } #dog3 { position:relative; left: 50px;

Page 176 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

bottom: 100px; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My Computer</h1> <div id="dog1"><img src="images/dog1.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> <div id="dog2"><img src="images/dog2.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> <div id="dog3"><img src="images/dog3.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>

Page 177 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚက CSS code မွာၾကညးံရငး content နဲ႔ image တုိ႔ရဲ႕ အကြာအေှ့ကုိ သတးမွတးထာ့ပါတယး .. ထုိကဲ႔သုိ သတးမွတးခ္ကးက content အေပၚမွာ မႈတညးၿပီ့ေတာံ ေနရာ အေနအထာ့ေၿပာငး့လဲသြာ့ပါလိမးံမယး … အထကးပါ ဥပမာကုိ ကုိယးတုိငး ထညးံသြငး့ၿပီ့ browser အာ့ ခ္ဴဵ႕ခ္ဲ႕လုပးၾကညးံပါ။

z-index (Layers) အလြာလုိကး အစီအစဥးတက္ စဥးမယးဆုိရငး z-index ကုိသုဵ့ေပ့ရပါတယး။ ဆုိလုိတာက ဘယး content က ဘယး content ေပၚ ထပးၿပီ့တငးမယး … ၿပီ့ရငး ဘယး content ကုိ ေရွ႕ဆုဵ့ကုိ ထပးမယး.. ေနာကးဆုဵ့ကုိထပးမယးဆုိတာကုိ သတးမွတးဖုိ႔အတြကးပဲၿဖစးပါတယး။

တနးဖုိ့အငယးဆုဵ့ index က ေအာကးဆုဵ့မွာၿဖစးၿပီ့ အၾကီ့ဆုဵ့ကေတာံ အေပၚဆုဵ့မွာၿဖစးပါတယး။ CSS Code (style.css) #ten_of_diamonds {

Page 178 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; } HTML Code (index.html) <html>

Page 179 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Royal Flush</h1> <div id="ten_of_diamonds"> <img src="images/diamonds_10.gif" alt="10 of diamonds"> </div> <div id="jack_of_diamonds"> <img src="images/diamonds_jack.gif" alt="Jack of diamonds"> </div> <div id="queen_of_diamonds"> <img src="images/diamonds_queen.gif" alt="Queen of diamonds"> </div> <div id="king_of_diamonds"> <img src="images/diamonds_king.gif" alt="King of diamonds"> </div> <div id="ace_of_diamonds"> <img src="images/diamonds_ace.gif" alt="Ace of diamonds"> </div> </body> </html>

Page 180 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အကယး၍ King ဖဲကုိ မအေပၚဆုဵ့ကုိ တငးခ္ငးတယးဆုိရငး z-index: 4 အာ့ 6 ဆုိၿပီ့ေၿပာငး့လုိကးရငး အေပၚဆုဵ့ကုိေရာကးသြာ့ပါလိမးံမယး။ -------------------------------------------------------xxx CSS xxx----------------------------------------------------------

Creating Web Design HTML + CSS HTML နဲ႔ CSS ကုိေပါငး့ၿပီ့ Web Page ဖနးတီ့မယး

အခုအခ္ိနးကစၿပီ့ေတာံ အေပၚက ကၽြနးေတားတုိ႔ ေလံလာခဲ႔တာေတြကုိေပါငး့ၿပီ့ေတာံ Web Page

ေလ့ေတြ

ဖနးတီ့ ၾကညးံပါမယး။

Final Result :- လုပးေဆာငးထာ့တဲ႔ ပုဵကုိ ဥပမာယူၿပီ့ေတာံ အဲ႔အတုိငး့ ဖနးတီ့ႏုိငးေအာငးပါ။

Page 181 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

အေပၚက ပုဵကုိ ပထမဦ့စြာ ကၽြနးေတားတုိ႔ ၾကညံးရမွာက ဒီ Web Page မွာ ဘာေတြပါှငးသလဲ ၊ ဘယးလုိအဓိက အပုိငး့ေတြ ပါှငးသလဲဆုိတာကုိ အရငးဆုဵ့စစးၾကညးံလုိကးပါ။ အခု ကၽြနးေတား ေရြ့ထုတးၿပသြာ့ပါမယး … ဿ. Header ထညံးသြငး့ထာ့တဲ႔ Header Container ၀. Menu ထညးံသြငး့ထာ့တဲ႔ Menu Container ၁. Content ထညးံသြငး့ထာ့တဲ႔ Content Container ၂. ညာဘကးထဲက Right Navigation ၃. Footer ထညးံသြငး့ထာ့တဲ႔ Footer Container ဆုိၿပီ့ အဓိက ၃ ခုရွိပါတယး။ ေနာကးတစးခု မွတးထာ့ရမွာက ဒါကုိ Column ႏွစးခုရွိတဲ႔ Web Page ဆုိတာလညး့ သိထာ့ရမယး။ Main Content ေတြထညံးတဲ႔ Column နဲ႔ ညာဘကးထဲက Navigation Column ဆုိၿပီ့ေတာံေပါ႔… ပထမဦ့ဆုဵ့ HTML ကုိစတငးေရ့ပါမယး .. HTML မွာ လုိအပးတဲ႔ elements ေတြကုိ ထညးံပါမယး။ HTML Code (index.html) <html> <head> <title>CSS by WWM</title>

Page 182 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> External CSS ကုိဖုိ႔အတြကး <link rel=”stylesheet” စသညးၿဖငးံေရ့သာ့ပါတယး။ ေနာကးတစးခုက ကၽြနးေတားတုိ႔ ၿမနးမာစာအတြကး

character

set

ထညးံေပ့ရပါတယး ….

Unicode

ေပါ႔…

UTF-8

ဆုိၿပီ့

meta

tag

ထဲမွာ

ေဖားၿပေပ့ထာ့တာပါ။ ေနာကးတစးဆငးံမွာ ကၽြနးေတားတုိ႔ Header Container နဲ႔ Header ကုိ <body> tag အတြငး့မွာ ပုဵေဖား ေရ့သာ့ပါမယး။ HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> </body> </html> Container ဆုိတာ Content ေတြကုိ ထညးံသြငး့ထာ့တာ ၿဖစးတယးလုိ႔ ေဖားၿပခဲ႔ၿပီ့ပါၿပီ … ၿပီ့ရငး ေခါငး့စဥးကုိ <h1> အထဲမွာ ထညးံပါမယး။ၿပီ့ရငး id attribute အတြကး CSS id selector ကုိ CSS file ထဲမွာ ေရ့သာ့ဖုိ႔ရာ style.css ဆုိတဲ႔ ဖုိငးတစးခုကို ဖနးတီ့ပါမယး… Notepad ဖြငးံၿပီ့ New ထဲကသြာ့ၿပီ့ style.css ဆုိၿပီ့သိမး့လုိကးရုဵပါပဲ။ style.css ထဲမွာ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 {

Page 183 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; } #header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } အေပၚဆုဵ့က body, td, th ထဲမွာ တငးမက h1-h6 ထဲမွာ font-family ေၾကာၿငာထာ့ပါတယး .. ဒါက ကၽြနးေတားတုိ႔ အသုဵ့ၿပဳမညးံ font ကုိေၿပာတာပါ.. အခု ကၽြနးေတားတုိ႔က Zawgyi-One ကုိသုဵ့မွာၿဖစးတဲ႔အတြကး font-family: ZawgyiOne; ဆုိၿပီ့ထညးံသြငး့ေပ့ထာ့တာပါ။ Header Container ကုိ ေနာကးခဵအေရာငး #ccc လညး့ေကာငး့၊ Header အာ့ ေနာကးခဵအေရာငး #ddd ဟူ၍ လညး့ေကာငး့ ေပ့ထာ့ပါတယး။ Header အက္ယးကုိေတာံ 860px ဆုိၿပီ့ သုဵ့ထာ့ပါတယး။ ေနာကးဆုဵ့တစးခုကေတာံ header မွ h1 ထဲက စာသာ့ကုိ margin အာ့ 0 အၿဖငးံေပ့ထာ့ပါတယး။ ေနာကးတစးဆငးံတကးပါမယး။ Menu အတြကးပဲၿဖစးပါတယး။ HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>

Page 184 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> </body> </html> Menu ထဲမွာကေတာံ Home, About, Services, Contact us ဆုိတာေတြကုိ unordered list ၿဖငးံ group ဖြဲ႕ထာ့ပါတယး။ style.css ထဲမွာ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; }

Page 185 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

#header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0; } #menu ul li { list-style-type: none; display: inline; }

Page 186 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

#menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } Menu Containter ထဲမွာ float ဆုိတာက ဒီ Menu အာ့ ဘယးဘကးကေန စၿပီ့ ေဖားဖုိ႔အတြကးပါ။ Container ရဲ႕ အက္ယးကုိ 100% အၿဖစးေသားလညး့ေကာငး့ menu ရဲ႕ အက္ယးအာ့ 900px အၿဖငးံလညး့ေကာငး့သတးမွတးကာ Menu အေပၚမွာ Mouse တငးလုိကးတာနဲ႔ အေရာငးအာ့ #383 အၿဖငးံ လညး့ေကာငး့ သတးမွတးထာ့ပါသညး။ Menu တစးခုနဲ႔ တစးခုၾကာ့ထဲမွာ အၿဖဴေရာငး line ေလ့တစးခု ေတြ႔ပါလိမးံမယး .. .အဲ႔ဒါကေတာံ border-right အာ့ 1px solid ထာ့ထာ့တဲ႔ အတြကးေၾကာငးံပါ။ ေနာကးတစးခါ Content ေတြထညးံသြငး့မညးံ Content Container အာ့ဖနးတီ့မွာၿဖစးပါတယး။ တစးဆကးတညး့မွာပဲ Right Navigation ပါတြဲၿပီ့ ေဖားၿပေပ့သြာ့ပါမယး …

HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li>

Page 187 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="content-container"> <div id="content-container2"> <div id="content-container3"> <div id="content"> <h2> Page heading </h2> <p>ဒီေနရာမွာ

ကၽြနးေတားတုိ႔

ရဲ႕

အခ္ကးအလကးေတြအာ့လုဵ့ကုိ

ထညံးသြငး့ေဖားၿပသြာ့ရမွာပဲ

ၿဖစးပါတယး။ တစးနညး့အာ့ၿဖငံး Home Page ရဲ႕ Content ေပါ႔....</p> <p>&nbsp;</p> <p>အေပၚက Home ၊ About ၊ Services ၊ Contact us ဆုိတဲ႔ေနရာကုိေတာံ Menu bar လုိ႔ပဲေခၚပါတယး..</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ဒီေနရာကေတာံ Widget လုိေနရာပါပဲ.. ကၽြနးေတားတုိ႔ရဲ႕ အၿခာ့ blogroll ေတြ၊ Javascript နဲ႔ထညံးသြငး့ရဲ႔ Counter ေလ့ေတြ.. စသညးၿဖငံးေပါ႔...</p> </div> </div> </div> </body> </html>

&nbsp; ဆုိတာ space ေနရာအတြကးပါ။ ၿပီ့ေတာံ content-container အာ့ 100% အၿဖစးယူထာ့ကာ contentcontainer3 အာ့ 900px ယူထာ့ပါတယး။ style.css ထဲမွာ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One;

Page 188 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

} #head-container { color: #000; background: #ccc; } #header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0;

Page 189 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

} #menu ul li { list-style-type: none; display: inline; } #menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } #content-container { float: left; width: 100%; color: #000; background: #eee; } #content-container2 { margin: 0 auto; width: 900px; } #content-container3 {

Page 190 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

float: left; width: 900px; background: #FFF url(two-fixed-background.gif) repeat-y 100% 0; } #content { clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2 { margin: 0; } #rightnav { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #rightnav h3 { margin: 0; } ဒီေနရာမွာ rightnav ကုိၾကညးံပါ သူက float:right နဲ႔ width: 240px ဆုိၿပီ့ယူထာ့တာက HTML နဲ႔တြဲၾကညံးမယးဆုိရငး content-container3

က

900

px

ယူထာ့တဲ႔အထဲက

အက္ယး

240px

ကိုယူၿပီ့

ညာဘကးထဲက

ေနရာကုိ

ရယူထာ့တာပဲၿဖစးပါတယး။ ဟုတးတယးေလ.. ကၽြနးေတားတုိ႔က content ကုိ ဘယးဘကးထဲကုိ ယူတာ့တာကုိ့။ ေနာကးတစးခုကေတာံ

footer

ပဲက္နးပါတယး ..

footer

မွာ

မ္ာ့ေသာအာ့ၿဖငးံ

Copyright

ဘာညာဆုိၿပီ့

ေရ့သာ့ၾကပါတယး။ .တစးခ္ဳိ႕ကေတာံ footer menu ေလ့ေတြလညး့ထညးံတတးပါတယး။ အခုေနာကးဆုဵ့ ကေတာံ :HTML Code (index.html)

Page 191 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="content-container"> <div id="content-container2"> <div id="content-container3"> <div id="content"> <h2> Page heading </h2> <p>ဒီေနရာမွာ

ကၽြနးေတားတုိ႔

ရဲ႕

အခ္ကးအလကးေတြအာ့လုဵ့ကုိ

ထညံးသြငး့ေဖားၿပသြာ့ရမွာပဲ

ၿဖစးပါတယး။ တစးနညး့အာ့ၿဖငံး Home Page ရဲ႕ Content ေပါ႔....</p> <p>&nbsp;</p> <p>အေပၚက Home ၊ About ၊ Services ၊ Contact us ဆုိတဲ႔ေနရာကုိေတာံ Menu bar လုိ႔ပဲေခၚပါတယး..</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ဒီေနရာကေတာံ Widget လုိေနရာပါပဲ.. ကၽြနးေတားတုိ႔ရဲ႕ အၿခာ့ blogroll ေတြ၊

Page 192 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

Javascript နဲ႔ထညံးသြငး့ရဲ႔ Counter ေလ့ေတြ.. စသညးၿဖငံးေပါ႔...</p> </div> </div> </div> <div id="footer-container"> <div id="footer"> Copyright © World Wide Myanmar, 2010. All rights reserved. </div> </div> </div> </body> </html>

style.css ထဲမွာ CSS Code (style.css) /* Name : CSS Tutorial URL: http://www.worldwidemyanmar.com Description: This is HTML and CSS Tutorial by WWM Version: 1.0 Author: Administrator Tags: news, reviews, tutorial, products, buy, sell */ body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; }

Page 193 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

#header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0; } #menu ul li { list-style-type: none; display: inline; }

Page 194 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

#menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } #content-container { float: left; width: 100%; color: #000; background: #eee; } #content-container2 { margin: 0 auto; width: 900px; } #content-container3 { float: left; width: 900px; background: #FFF url(two-fixed-background.gif) repeat-y 100% 0; } #content {

Page 195 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2 { margin: 0; } #rightnav { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #rightnav h3 { margin: 0; } #footer-container { clear: left; color: #fff; background: #000; } #footer { margin: 0 auto; width: 900px; text-align: right; padding: 20px; height: 1%; }

Page 196 of 197

http://www.worldwidemyanmar.com

Web Design HTML and CSS

DREAM IT, CODE IT BY PLANETCREATOR .NET

ေနာကးဆုဵ့ ရလဒးကေတာံ :-

HTML နဲ႔ CSS က ရုိ့ရွငး့လြယးကူၿပီ့ အေၿခခဵက္တဲ႔ Web Programming တစးခုၿဖစးတဲ႔အတြကး ေလံလာတဲ႔သူေတြ အေနနဲ႔ အရမး့ခကးခဲမယးလုိ႔ေတာံ

မထငးပါဘူ့။

မိမိတုိ႔ရဲ႕

ေလံလာမႈအေပၚမွာမႈတညးၿပီ့ေတာံ

အခ္ိနးတိုအတြငး့မွာ

ကြ္မး့ကြ္မး့က္ငးက္ငး တတးသြာ့ႏုိငးပါတယး။ Ref: wiki, google, indexdot.com,ultimate css, ultimcate html, html.net and so on…

THE END

Remember what I say “Dream It, Code It” PlanetCreator

Page 197 of 197

http://www.worldwidemyanmar.com