html css (myanmar)

World Wide Myanmar Training Centre

(Myanmar) 12A/D1, Ground Floor, Thamine,

Yangon-Insein Road, Yangon, Myanmar.

Ph: 95-01-652936

(Malaysia) Lot 25, 2nd Floor, Jalan Lebuh

Pudu, 50050 Kuala Lumpur, Malaysia.

Ph: 6-03-20260846

http://www.worldwidemyanmar.com

အငးတာနကးေပၚက Web Page ေတြက ဘယးလဖနးတ

တညးေဆာကးသလဆတာက ေဖားၿပရငး အေၿခခအက

ဆ HTML, CSS Web Programming စာအပးတစးခသာ

ၿဖစးပါတယး။

Web Design

HTML and CSS

Web Design HTML and CSS DREAM IT, CODE IT BY PLANETCREATOR.NET

World Wide Myanmar Training Centre, Cyber Café , Sales & Services

http://www.planetcreator.net/

of 197 http://www.worldwidemyanmar.com


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

[email protected]. 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.

About




အေၾကာငးအရာ စာမကးႏာ Cover …………………………………………………………………………………………………………………..…… 1 About ………………………………………………………………………………….…………………………………….. 2 Table of Contents ……………………………………………………………………………………………………….. 3 Web Design Concepts ………………………………………………………………………………………………….. 6 Doctypes ……………………………………………………………………………………………………………………. 7 HTML ႏငး XHTML တ႔ကြၿပာမႈ ………………….……………………………………………………………………… 11 History of HTML …………………………………………………………………………………………………………. 13 HTML ………………………………………………………………………………………………………………………… Source Code ……………………………………………………………………………………………………. HTML Colour ……………………………………………………………………………………………………. Link …………………………………….…………………………………………………………………………. Absolute Paths ………………………………………………………………………………………. Relative Paths ………….……………………………………………………………………………. TAG …………………………..……………………………………………………………………………………………… Comment …………………..……………………………………………………………………………………………… ELEMENTS …………………..……………………………………………………………………………………………… Attribute …………………..………………………………………………………………………………………………… Class Attribute …………………………………………………………………………………………………. ID Attribute …..…………………………………………………………………………………………………. Style Attribute ………………………….………………………………………………………………………. Title Attribute …………………….……….…………………………………………………………………….

14 17 18 25 25 25 26 27 27 28 28 29 30 31

Building Web Page ……………………………………………………………………………………………………… 32 HTML Editors ……………………………………………………………………………………………………………… 33 HTML Head Elements ………………………………………………………………………………………………….. <head> ………….………………………………………………………………………………………………. <title> ……………………………………………………………………………………………………………. <base /> ……………………………………………………………………….………………………………. <link /> …………………………………………………………………………………………………………. <meta /> ………………………………………………………………………………………………………. <script> ………………………………………..………………………………………………………………. <style> ……….………………………………………………………………………………………………….

34 34 34 35 35 35 35 36

HTML Body Elements ……………..………………………………………………………………………………….. Forms ………….…………………………………………………………………………………………………. <form> | <button> | <label> | <option> | <fieldset> | <legend> |

36 36

မာတကာ ၊ Table of Contents



………………………………………..…….…~~~ CSS ~~~…………………………………………………………. 112 Introduction CSS …………………………………………………………………………………………………………. 112 Appling ………………………………………………………………………………………………………………………. Internal CSS …….……..………………………………………………………………………………………. External CSS ………………..….………………………………………………………………………………. Inline CSS ………………..……………………………………………………………………………………….

113 113

113 114

Syntax . Structure ………………………………………………………………….……………………………………. Value …………………………………..……………………………………………….……………………………………. Property ……………………………………………………………………………….……………………………………. Selector ……………………………………………………………………………….……………………………………. Class Selector …………………………………………………………….……………………………………. ID Selector ………………………..……………………………………….……………………………………. Code Format …………..…………………………………………………………….……………………………………. Comment …………………….……………………………………………………….……………………………………. Colors and Backgrounds …………………….………………………………….……………………………………. Font …………….…………….……………………………………………………….……………………………………. Text …………………….…………….……………………………………………….……………………………………. Link …………………….…………….……….……………………………………….……………………………………. Grouping of elements (class and id) …..………………………………….……………………………………. Grouping of elements (span and div) ….……………….………………………………………………………. The box model …………………….……………………………………………….……………………………………. Margin …….………………….……………………………………………………….……………………………………. Padding .…………………….……………………………………………………….……………………………………. Borders …………..………….……………………………………………………….……………………………………. Height and Width …………………….…………………………………………….……………………………………. Floating ..…………………….……………………………………………………….……………………………………. Positioning of Elements ………………………………………………………….……………………………………. z-index (Layers) ……………………..…………………………………………….…………………………………….

115 115 116 116 116 118 119 120 121 130 138 143 150 153 156 159 160 161 166 167 172 177

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



----->

HTML န႔ CSS Web Programming ေလေတြက မစခငးမာ မမတ႔ဘကးက ၾကတငးၿပငးဆငးရမညး

အပငးေလေတြ သထာသငးတ႔ အခကးအလကးေတြက အရငးဆေဖားၿပလကးပါတယး။

ဘယးလသသငးတ႔ အပငးေတြလဆရငးေတာ ကၽြနးေတားတ႔ Programming မာ Coding ေရတာက အစ

Variables မနးမနးကနးကနးေပရၿခငး၊ Code ေတြက Tab ခနးသငးတ႔ေနရာေတြက Tab န႔ခြၿခာထာၿပ၊ အထၿပထာတ႔

ေနရာေလေတြက ေနာကးထကး Programmer ေသားလညးေကာငး သ႔မဟတး မမကယးတငး ၿပနးလညးၿပငးဆငးမယး

ဆရငးလြယးကေအာငး Comment ေလေတြထာသငးရငး ထာေပရပါတယး။

သငးေလားတ႔ Variable ေပတယးဆတာကေတာ p.center {text-align: center} ဆတ႔ေနရာမာ p.test {text-

align: 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

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

Web Design Concepts



ဒနညးလမးက ကၽြနးေတားတ႔ ငယးငယးက လကးေရလစာအပးမာ စာလငးငးေလေတြန႔ ေရၿပ

ေလကငးသလပါပ။ Coding ေရထာတာေတြ ရငးလငးေၿပၿပစးမႈက Programmer တစးေယာကးရ႕ Skill တစးခပါပ။

HTML & XHTML

HTML ကသေတာမယးဆရငး HTML အၿပငး XHTML န႔ ဒႏစးခၾကာမာ ဘယးဟာက သရငးေကာငးမလ၊

သတ႔ႏစးခက ဘာေတြကြၿပာၿခာနာသလဆတာ သခငးၾကပါလမးမယး။ ဒါတငးမက doctypes န႔ DTDs ေတြက

မမတ႔ကပၿပရႈပးေထြ ေစပါတယး။ ဘယးလပၿဖစးေစ ေနာကးဆမာေတာ ကၽြနးေတားတ႔အၿမသေနတ႔ Internet

စာမကးႏာေပၚက အေၿခခ Web Page Structure ေတြကေတာ နာလညးခငးၾကပါလမးမယး။

ဒအပငးေတြကေလလာၿဖစးရငး သငးတ႔ HTML န႔ XHTML ေတြရ႕ အဆငးၿမငး concepts ေတြ ေကာငးေကာငး

နာလညး သြာပါလမးမယး။

Doctypes ဆတာက ကၽြနးေတားဆ႔ေရသာထာတ႔ Markup Lanuage ဟာ ဘယးလ Version အမအစာ

ၿဖစးတယးဆတာ Web Browser အာ အသေပေၿပာၾကာထာတာၿဖစးၿပ၊ Web Page Source ရ႕ အေပၚဆအပငးမာ

ရေန (ရေနသငး) ပါတယး။ သ႔ကအသမာတာကေတာ Document Type Definition သ႔မဟတး DTD ဆၿပ

လသမာပါလမးမယး။ DTD က Web Browser က မနးမနးကနးကနးေဖားၿပႏငးဖ႔အတြကး Markup ေတြရ႕ စညးကမးေတြက

ခမတးေပပါတယး။

Doctypes



Web Page တစးခစတငးၿပေရတငးမာ 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 ဆၿပ ၂ငးအာ စာလၾကန႔ေရသာရပါမယး။



ေနာကးတစးခက HTML ပါ (အကယး၍ XHTML ဆရငးေတာ လညး HTML ပါပ)။ ဆလတာက ဒ Document

အတြကး HTML ဆတာက root element တစးခၿဖစးေၾကာငးန႔ validation အတြကးသာၿဖစးပါတယး။



PUBLIC ဆတာကေတာ ကၽြနးေတားတ႔ရ႕ Browser အတြကး DTD က အမာန႔ သကးဆငးတ႔ resource

ၿဖစးေၾကာငး ေရထာတာၿဖစးပါတယး။ အကယး၍ မမက XHTML သ႔မဟတး HTML ရ႕ သကးမတးထာတာေတြက

ေကားလြနးၿပသခငးတယးဆရငးေတာ ကယးပငး DTD ကဖနးတရပါလမးမယး။ ဒါဆရငး ကယးပငး element

ေတြကဖနးတတ႔အခါ ဒ Document ဟာ custom DTD ၿဖစးေၾကာငး validate လပးတ႔အခါ သပါလမးမယး။ ဒအတြကး

PUBLIC ေနရာမာ SYSTEM ဆတာကေၿပာငးလ ေရသာေပရပါတယး။

ဒါေပမ႔ ကၽြနးေတားတ႔ေတြ ဒလသတာေတြက ေတြ႔ရခပါတယး။ ေတားေတားမာမာလေတြကေတာ HTML န႔

XHTML တ႔ရ႕ သတးမတးခကးေဘာငးအတြငးမာပ သၾကတာမာပါတယး။



ေနာကးထကးတစးခကေတာ Public Identifier ဆတာပၿဖစးတယး။ DTD ရ႕ ပငးရငး သ႔မဟတး

ထနးသမးေစာငးေရာကးသက ေၿပာထာတာၿဖစးပါတယး။ W3C ဆရငး Web Programming ေလလာသေတြ

ေတားေတားမာမာ သထာၾကပါလမးမယး။ သက Public Identifier ၿဖစးၿပ မမေရထာတ႔ Language

အဆငးကေဖားၿပေပထာတာၿဖစးပါတယး (XHTML 1.0)။ မမေရသာမညး Web Page ထက content န႔ေတာ

မသကးဆငး ပါဘ။ ေနာကးတစးခါ ေရသာထာတ႔ Language ပါပ။ English ဘာသာန႔ ေရသာထာတာၿဖစးတ႔အတြကး

EN ဆၿပ အတေကာကးေဖားၿပရၿခငးၿဖစးပါတယး။

မတးခကး။ ။ အကယး၍ DOCTYPE မာ SYSTEM ဆတ႔ စာသာတစးခပါမယးဆရငးေတာ အခ Public Identifier

က ပကးသြာပါလမးမယး။



http://www.w3.org/



ေနာကးဆတစးခကေတာ 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//EN"

"http://www.w3.org/TR/html4/

➥strict.dtd">

HTML 4.01 Strict allows the inclusion of structural and semantic

markup, but not presentational or deprecated elements such as

font, framesets are not allowed.

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

➥ HTML 4.01 Transitional//EN"


➥loose.dtd">

HTML 4.01 Transitional allows the use of structural and semantic

markup as well as presentational elements (such as ,

which are deprecated in Strict. Framesets are not allowed.


➥ HTML 4.01 Frameset//EN"


➥frameset.dtd">

HTML 4.01 Frameset applies the same rules as HTML 4.01

Transitional, but allows the use of frameset content.


➥ XHTML 1.0 Strict//EN"

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

➥xhtml1-strict.dtd">

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

structural and semantic markup, but not presentational or

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

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



XML.


➥ XHTML 1.0 Transitional//EN"

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

➥xhtml1-transitional.dtd">

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

use of structural and semantic markup as well as presentational

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

not allowed. Unlike HTML 4.01, the markup must be written as

well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD

➥ XHTML 1.0 Frameset//EN"

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

➥xhtml1-frameset.dtd">

XHTML 1.0 Frameset ဆတာ XHTML 1.0 Transitional န႔

တပါတယး။ ဒါေပမ႔သက frameset ပါသဖ႔အတြကးပါ။


➥ XHTML 1.1//EN"

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

➥xhtml11.dtd">

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

တာပၿဖစးပါတယး။ အေၿခခ XHTML 1.0 ေတြ န႔တၿပ သ႔ရ႕

ထၿခာမႈကေတာ ကၽြနးေတားတ႔အေနန႔ Chinese, Japanese, and

Korean characters ေတြအတြကး Ruby ကသတ႔အခါ Module

ထညးမယးဆရငး ထညးသြငးအသၿပလ႔ရပါတယး။

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

➥ HTML 3.2 Final//EN"> HTML 3.2 အတြကး Doctype ၿဖစးၿပ အခအခနးမာေတာ သဖ႔

မတကးတြနးပါဘ။ ေရကလြနးသြာပါၿပ။ <!DOCTYPE HTML PUBLIC "-//IETF//DTD

➥ HTML 3.0//EN"> HTML 3.0 အတြကး Doctype ၿဖစးၿပ အခအခနးမာေတာ သဖ႔

မတကးတြနးပါဘ <!DOCTYPE HTML PUBLIC "-//IETF//DTD

➥ HTML 2.0 Level 2//EN"> HTML 2.0 အတြကး 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 ကေတာ အ႔လပစမဟတးပါဘ။

ဥပမာအေနန႔ ၾကညးမယးဆရငး



<!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 န႔ အတတပ။ ခကးခမႈကေတြ႔ရမာမဟတးပါဘ။ ဒါေပမ႔ သတ႔ႏစးခရ႕

ကြၿပာတ႔ အဓက အခကးေလေတြကေတာ သထာသငးပါတယး။ အဓကအာၿဖငး-

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

HTML ႏငး XHTML တ႔ ကြၿပာမႈ



အမာ(X) <ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

<li>Milk</li>

</ul>

XHTML

Nested

အမနး(√)

<ul>

<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

Closed

အမာ(X)

<p>This is a paragraph

<p>This is another paragraph

XHTML

Closed

အမနး(√)

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Empty Elements ေတြကလညး XHTML မာ ပတးဖ႔လပါတယး။

XHTML

Empty

Elements

အမာ(X)

A break: <br>

A horizontal rule: <hr>

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

XHTML

Empty

Elements

အမနး(√)

A break: <br />

A horizontal rule: <hr />

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



ေနာကးတစးခကေတာ XHTML Elements တငးမာ Tag name ေတြ၊ Attribute ေတြအာလက lower case

ေတြၿဖစးရပါမယး။ HTML မာေတာ ၂ငး Elements ေတြက အၾကအေသ ကစၥမရပါဘ။

XHTML

Lowercase

အမာ(X)

<BODY>

<P>This is a paragraph</P>

</BODY>

XHTML

Lowercase

အမနး(√)

<body>

<p>This is a paragraph</p>

</body>

ဒါေၾကာငး XHTML က Case Sensitive ၿဖစးတယးလ႔ဆႏငးပါတယး။ HTML မာေတာ <P>…</p>

အ႔လၿဖစးလ႔လညးဘာမမၿဖစးပါဘ။ ေရလ႔ရပါတယး။

ဒလပ XHTML မာ Root Element ၿဖစးတ႔ <HTML> ရ႕ အတြငးထမာပ Child Elements ေတြအာလက

အစလကးေတြရေနရပါမယး။

XHTML

Root

Element

<html>

<head> ... </head>

<body> ... </body>

</html>

XHTML

Doctype

<!DOCTYPE Doctype goes here>

<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 ၿဖစးမာပါ။



က… ဒါကေတာ XHTML န႔ 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 ကေလလာေတာမယးဆရငး သတ႔မာပါငးတ႔ အေခၚအေၚေလေတြ န႔ ၂ငးတ႔ရ႕ အေၾကာငးက

အရငးဆသထာသငးပါတယး။ အစြနးကနးေၿပာရမယးဆရငး 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 ေတြမာ အသၿပၾကတယး။

History of HTML

HTML အေၾကာငး

http://en.wikipedia.org/wiki/Tim_Berners-Lee



http://en.wikipedia.org/wiki/Robert_Cailliau



သ႔ရ႕ 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

စသညးတ႔ကလညး တတးကြမးဖ႔သပးမခကးခေတာပါဘ။ သတ႔ေတြက တစးခန႔တစးခ

မခေနကေနတာပါ။



Code (filename.php) ရငးလငးခကး

<?php

echo "This PHP"

?>

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

အစမးေရာငး = PHP

အၿပာေရာငး = CSS

အနေရာငး = JS

အၿခာက = HTML



-filename.php ဆတာ 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">



<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 ရ႕

သအရေတြအေၾကာငးပါ ေလလာထာမ အေၿခခေကာငးမာပါ။



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



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



ေအာကးပါ List ေတြက Color Name န႔ Hex Code ေတြက တြၿပေဖားၿပေပထာပါတယး။ Color Name HEX Color

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



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



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



Beige #F5F5DC

WhiteSmoke #F5F5F5

MintCream #F5FFFA

GhostWhite #F8F8FF

Salmon #FA8072

AntiqueWhite #FAEBD7

Linen #FAF0E6

LightGoldenRodYellow #FAFAD2

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



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 သတးမတးတ႔အခါမာ သ႔အေပၚက forecolour န႔တြၿပၾကညးသငးပါတယး။

Background Colour က အနကးၿဖစးၿပ Font ရ႕ forecolour က အနကးဆရငးေတာ …

ဘာမၿမငးရမာမဟတးေတာဘ…



ဒေလာကးဆရငးေတာ 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

paths

Web 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

paths

File ရ႕ ေနရာအေပၚမာမႈတညးၿပေတာ Relative path မာ သမရတယး.

ဿ. တညတ႔ Directory ထမာဆရငး လမးေၾကာငးရကးထညးစရာမလတ႔အတြကး File

Name တစးခပရကးထညးေပရတယး…

<a href=”link1.html”>

၀. Source File က Sub-Directory ေအာကးမာ ရေနမယးဆရငး sub-

directory/filename ကထညးေပရတယး။

http://www.worldwidemyanmar.com/images/favicon.ico



<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 ေရသာတယးလ႔ေခၚပါတယး..

Code



<html>

<head>

<title>World Wide Myanmar</title>

<body>



Welcome to World Wide Myanmar

</body>

</html>

 ဆၿပေရသာေပရပါတယး။

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>


</head>

<body>


</body>

</html>



<head> Elements <head>


</head>

<body> Elements <body>


</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



paragraph. :)</p>

</body>

</html>

Result

ရငးလငးခကး Class Attribute က CSS မာသတာမာပါတယး။ ဒ class attribute က ID

Attribute န႔ အသၿပပၿခငး ဆငးတပါတယး။

အေပၚက code ကၾကညးမယးဆရငး h1.intro ဆတ႔ css class selector က

အၿပာေရာငး blue ဆၿပေပထာသလ p.important ဆၿပေတာလညး

အစမးေရာငး green ဆၿပေပထာပါတယး။ ဒါက CSS ထမာသြာၿပ

ထညးထာတယး။ ၿပရငး <h1> ဆတ႔ tag မာ <h1 class=”intro”>

ဟဆၿပေခၚထာသလ <p> ဆတ႔ tag မာ <p

class=”important”>ဆၿပေခၚသထာတ႔အတြကး <body> element ထက

class ေတြက အေပၚCSS code မာ ခငးေစထာတ႔အတငးအလပးလပးပါတယး။

ID Attribute

HTML Code <html>

<head>


function change_header()

{

document.getElementById("myHeader").innerHTML="Nice

day!";



}

</script>

</head>

<body>

<h1 id="myHeader">Hello World!</h1>

<button onclick="change_header()">Change

text</button>

</body>

</html>

Result Hello World!

…………………………Change text က ႏပးလကးရငး

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

Nice day!

ရငးလငးခကး ေစာေစာကေၿပာခ႔သလ ဒ 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>

Change text

Change text



<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 ေတြေၿပာငးမယး.. colour

ေတြေၿပာငးမယးဆရငးအသမာပါတယး။ <h1> ဆတ႔ tag မာ <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

WHO was founded in 1948. This is tutorial coded by W3C.com

http://www.worldwidemyanmar.com

ရငးလငးခကး Title attribute ဟာ tooltip text ကအဓကထာၿပသပါတယး…

သတးမတးထာတ႔ အေပၚမာ mouse pointer ေလေရာကးမ ၂ငးရ႕ value

World Health Organization

Offcial site for Your One Stop IT Station!



Information ကေဖားၿပေပမာၿဖစးပါတယး။

Abbr ဆတာကေတာ abbreviations ပၿဖစးပါတယး။ spellcheckers, screen

readers, translation systems and search -engines ေတြအတြကး

အသငးပါတယး။

အေၿခခ Web Page မာတညးေဆာကးမႈ

Source

Code



<html>

<head>

<title>Page TITLE</title>

</head>

<body>

<p>This is Body by World Wide Myanmar</p>

</body>

</html>

Browser

View

HTML ကစတငးေရသာေတာမယးဆရငး ကၽြနးေတားတ႔အတြကး Editor တစးခလပါတယး။ html file ေတြက text file

ေတြၿဖစးတ႔အတြကး ရရ text editor ေတြန႔လညးေရသာလ႔ရပါတယး။ HTML Editor ေတြကေတာ

HTML File

Building Web Page

HTML Editor



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 အထမာေနား)

မတးခကး = အဆငးေတြက တစးဆငးၿခငးစသြာတာ ပၿပမတးမလြယးပါတယး။



<html>

</html>

ဒါက html န႔ေရတ႔ html document တငးမာထညးေပရမ႔ code ပ… ဘယး html page ကပေရေရ ဒါေလကေတာ

ထညးေပရတယး.. ဆလတာက ကၽြနးေတားတ႔ ေရထာတ႔ ဒဖငးထက text ေတြက html language ကသထာေၾကာငး

ေဖားၿပေပတာပ…

<html>

<head>

</head>

<body>

</body>

</html>

Element ႏစးခကေပါငးၿပေရလကးတယးေပါ႔…

ယခ <head> element န႔ <body> element ေတြကနနေလ ရငးပါမယး…

<head>

Element

s

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

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

ဆတ႔ 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 တြငးရေသာ Link အာလရ႕ Default Address သတးမတး။



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


function change_header()

{

document.getElementById("myHeader").innerHTML="Nice

day!";

}

</script>

</head>

<style> Document ရ႕ style ေတြကသတးမတး။

<head>




h1 {color:red}

p {color:blue}

</style>

</head>

<body>

Element

ဒ element ထမာ စာေတြ၊ ပေတြ၊ ဗဒယေတြ စသညးၿဖငး Web Browser မာၿမငးႏငးပါတယး။ ကၽြနးေတားတ႔ေဖားၿပခငးတ႔

အေၾကာငးအရာတစးခက ဒ 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>) စသညးတ႔ပါငးတာေပ႔ါ။ အေသစတးကၾကညးရေအာငး။

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">

Form မာဆရငး Form tags ေတြအၿပငး Input Type ေတြလညးပါ ငးပါတယး။

ဒါေၾကာငး form မာသတ႔ tags ေတြအၿပငး InputType= ေတြလညးေဖားၿပေပသြာမာပါ။



<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 ေလေတြလေနရာမေလေတြမာ

အညြနးစာသာေလ ေရေပတ႔ပစပါပ။

<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 ကအသၿပရပါတယး။

Label



<form>

<select name="list1" size="3" multiple>

<option value="opt1">option1 </option>


<option selected value="opt3">option3 </option>

</select>

</form>

<fieldset> သကေတာ အေပၚမာေဖားၿပခ႔ဖတ႔ label ထမာပါပါတယး။ form ထက မတရာေတြ

Group ဖြ႔လကးတ႔ပစေပါ႔.. ေအာကးကပကၾကညးမယးဆရငး Male & Female ေတြက

Gender ဆတ႔ Group တစးခတညးဖြ႔ထာသလပစေပါ႔။

<fieldset>






</fieldset>

<legend> Fieldset , label တ႔ေတြန႔ေပါငးထာတ႔ ပမာ fieldset ဆတ႔ group ရ႕ ေခါငးစဥးက



တပးမယးဆရငး legend ကထညးေပရပါတယး။ သလညး အညြနးပါပ။

<fieldset>






</fieldset>

<select> Select ကေတာ content ထက value ေတြအာလက List တစးခအေနန႔လပးပါတယး…

သ႔အထမာလညး multiple ဆရငး select လပးတာ တစးခထပးပၿပလပးႏငးပါတယး။ single

ဆရငးေတာ select လပးတာ တစးခပရပါလမးမယး။

<form>







</select>

</form>

<optgroup> selection list ထက value ေတြက group လပးတာပၿဖစးတယး။

<form>





</select>

</form>

<textarea> Textarea element ဟာ multiple text ေတြရကးထညးဖ႔အတြကး တညးေဆာကး

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

<form>

<textarea name="brb" rows="3" cols="40">

Default TEXTAREA value goes here

</textarea>

</form>



Form tags ေတြၿပေတာ အခ ဆကးလကးၿပ အ႔မာသတ႔ InputType= ေတြကပါ ထညးသြငးေဖားၿပမာၿဖစးပါတယး။

InputType= ရငးလငးခကး ႏငး ဥပမာ

button Form ေပၚမာ button ေလတစးခေပၚခငးတယးဆရငး type=”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 type="radio" value="Rock" name="Radio1" checked />

Feedback form တစးခရ Button မာကၿပပ

Submit Button, Reset Button



Rock!<br />

</form>

reset ေအာကးပါပကၾကညးပါ။ ပမနး feedback form တစးခရတယးဆပါစ႔… အ႔အထမာ

ရကးလကးတ႔ စာသာေတြအာလက နဂ အတငး (Empty) လပးလးကးခငးတယးဆရငး

Reset button ေလကထာလကးလ႔ရပါတယး။ Reset လပးလကးၿပဆတာန႔

အဆငးတစးဆငးခငးစ လကးၿပ ဖကးစရာမလပ အာလက ရငးေပသြာပါလမးမယး။ ဒါက

Form ကရငးလကးတာပါပ။

<form>

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

</form>

CheckBox Boolean Choice ေခၚတ႔ true or false ပါပ။ မနးရငး မနးတယး.. မာရငးမာတယး ..

ဒႏစးခတညးကမ အမနးၿခစးၿပေရြ ခယးေပရပါလမးမယး… Checkbox ဟာ တစးခသ႔မဟတး

တစးခထပးပၿပ အမနးၿခစးႏငးသလ၊ တစးခမ အမနးမၿခစးလညးရပါတယး။ Radio button

န႔ေတာ နနကြပါတယး။ Radio Button က အနဆန႔ အမာဆတစးခေတာ

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

Reset Button



<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 ဘယးေလာကးအထပသမယးဆတာမေပါ႔..



ေနာကးတစးမကေတာ

<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 လပးရတာေတြ ေတြ႔ဖမာပါ…



<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 န႔ဆငးတပါတယး..



<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 ထမာသတာေတြပါပ…

အခဆကးလကးၿပ ကၽြနးေတားတ႔ Tables အေၾကာငးက ေၿပာသြာမာၿဖစးပါတယး။

Table Tags ရငးလငးခကး ႏငး ဥပမာ

<table> <table> tag က HTML table element မာ ထပးဆကပါငးတ႔အပငးၿဖစးပါတယး။ table

လ႔ဆတ႔အတငး ဇယာကြကးေလေတြန႔ခေပသြာမာၿဖစးပါတယး။ တနညးအာၿဖငး Table

ဆတာ cell ကြကးေလေတြပါငးတ႔ ဇယာၾကေပါ႔။ Default value အေနန႔ table မာ

border မပါပါဘ။ table ေတြရ႕ attribute ေတြအာလက table cell

Table Element မာပါ ငးတ႔ သတ႔ရ႕ tag ေတြအေၾကာငးက ရငးၿပေပသြာမာၿဖစးပါတယး။

HTML ကေလလာၿပဆရငး ဒ table ေတြကလညး အေရၾကပါတယး…



ေလေတြအာလက 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=?> Values=Integers

Table cell ေတြရ႕ ေဘေဘာငးေတြရ႕ အထ အပါ

စသညးတ႔က သတးမတးလလငးသ။

<table border="2">

ဆၿပ value ကရကးထညးေပရပါတယး။

<table align=?>

Values=center,left,right

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

alignment ေတြကသတးမတးရနး။

<table border="center”>

ဆၿပ value ကရကးထညးေပရပါတယး။

<table background=?>

(images)

Table ရ႕ background image ပေတြထညးမယးဆရငး သ။



<table background="flower.gif"

<table cellpadding=?> Values=Integers

Cell တစးခခငးစရ႕ ေဘာငးေတြန႔ cell ကြကးအတြငးရ data

ေတြရ႕ အကြာအေက သတးမတးဖ႔အတြကးသ။ <table cellpadding="value">

<table width="224" border="1"

cellpadding="20" cellspacing="10"

bordercolor="#0000FF">

<table cellspacing=?> Values=Integers

Cell မာအၾကာ အကြာအေကသသညး။ ေအာကးပါ ပတြငး

အနေရာငး အမတးအသာၿဖငးေဖားၿပထာသညး။ <table cellspacing="value">



<table width="224" border="1"

cellpadding="20" cellspacing="10"

bordercolor="#0000FF">

<table bgcolor=?>

Color Name or Hex

Color

Table ၏ေနာကးခ Background အေရာငးကထညးၿခငး။

<table bgcolor=”red”>

Or

<table bgcolor=”#FF0000”>

<table bordercolor=?>

Color Name or Hex

Color

Table ၏ေဘေဘာငး အေရာငးအတြကး။

<table bordercolor=”red”>

Or

<table bordercolor=”#FF0000”>

<table

bordercolordark=?>

3D Border မလပးခငးတယးဆရငး Bordercolordark

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

<table cellpadding="5" cellspacing="5"

width="100%" border="5"

bordercolordark="blue"

bordercolorlight="#FF0000">

Border က size မာမာေပၿပ ၾကညးႏငးသညး။

Bordercolordark



<table

bordercolorlight=?>

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

<table cellpadding="5" cellspacing="5"

width="100%" border="5"

bordercolordark="blue"

bordercolorlight="#FF0000">

Border က size မာမာေပၿပ ၾကညးႏငးသညး။

<table width=?> Values=Integers

Table ၏အလာလကး အကယးကသတးမတးရနး။

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

integer pixel values or a percentage ကသတးမတးႏငး

<table height=?> Values=Integers

Table ၏အနလကး အၿမငးကသတးမတးရနး။

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

integer pixel values or a percentage ကသတးမတးႏငး

<table cols=?> COLS က <col> tag န႔ မေရာပါန႔.. COLS က table ရ႕

attribute ၿဖစးၿပ browser အာမမရ႕ table ထမာ columns

ဘယးႏစးခရေၾကာငးေၿပာထာတာၿဖစးပါတယး။ တစးခ႕

Bordercolorlight

Table’s Width

Table’s Height



website ဖနးတတ႔သေတြက table ေတြက browser က

ၿမနးၿမနးဆနးဆနး ပေဖားေပႏငးဖ႔ ထညးသြငးအသၿပၾကတာ

လညးေတြ႔ရပါတယး။

<TABLE WIDTH="600" COLS="4"

BORDER="1" >

ဒါဆရငး table ထမာ Columns ၂ ခရတယးေပါ႔။

<table colspan=?> COLSPAN ကေတာ table ရ႕ attribute ၿဖစးရမက

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

<TR>

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

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

</TR>

COLSPAN ကအခ႕က Cell မာအာ Merge

လပးတယးလ႔လညးေၿပာၾကပါတယး။

<caption> Table တစးခအာ ေခါငးစဥးေပမယးဆရငး <caption> ဆတ႔ tag က table element

အတြငးမာေပရပါတယး… ေအာကးပါ source code ကၾကညးၾကညးပါ။


width="75%">


<caption> ဆတ႔ tag

ကသၿပ table

အာေခါငးစဥးတပးထာ

တာပါ

LEFT ဆတ႔ cell

ကြကးက columns

ႏစးခ ယထာတာက

ေတြ႔ရပါလမးမယး…

ဒါဆရငးေတာ

colspan=”4” ေပါ႔…







<tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br> he is

great!)</td> </tr>

</table>

<thead>

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

table တစးခမာ ေအာကးပါ ပစမ ေခါငးစဥးၾကအၿပငး သတ႔မာ ေခါငးစဥးခြ

ေလေတြရႏငးပါတယး။ ဒလအခါမမာ အထကးပါ tags ေတြထကးသငးသလ

သၾကပါတယး။ သတ႔ရ႕ အဓက လပးေဆာငးတာကေတာ <tr> tag ေခၚတ႔ table row

ေတြက group ဖြ႕လကးတာပါပ။ ၿပေတာ ဒႏစးခက အသနညးပါတယး။


cols="4" frame="vsides" rules="rows" width="75%">



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



</tfoot>

<tbody>




<tr> <td>U Maung Tin</td>

<td>1</td> <td>2</td> <td>20<br>( he is great!)</td> </tr>

</tbody>

</table>

<col>

<colgroup> <colgroup> ဆတ႔ element ထမာ <col> ဆတ႔ tag ေတြပါငးၿပ Table ထမာ ရတ႔

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" />






</colgroup>



<thead>



</thead>

<tbody>


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

<th>

<td>

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

ကေတာ table ရ႕ ေခါငးစဥးက ေဖားၿပလတ႔အခါမာ အသၿပၿပ <td>ကေတာ table ရ႕

cell ေတြမာ အခကးအလကး data ေတြက အသၿပ ေဖားၿပရနးၿဖစးပါတယး။



<table border="2" align="left" cellpadding="5"

bordercolor="#ff0000" width="75%">








<tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>(he is

great!)</td> </tr>

</table>

ဥပမာ (<) or (>) ဆတ႔ Characters ေတြက Browser က Text န႔ Tag န႔မာသြာမာဆတ႔အတြကး

HTML ရ႕ Source Code မာ တကးရကးထညးလ႔မရပါဘ။ ဒလေနရာမမာ အ႔လ reserved လပးထာတ႔

characters ေတြကအသၿပမယးဆရငး

Text မာထညးသြငးေရသာၿခငး ႏငး တညးေဆာကးပ

အခ႕ Characters ေတြက HTML က ၾကတငးသထာတာေတြရပါတယး။



&entity_name;

သ႔မဟတး

&#entity_number;

ဆၿပ ထညးသြငးအသၿပရပါလမးမယး.. ဒါေၾကာငး (<) က Browser မာၿမငးႏငးဖ႔အတြကး < သ႔မဟတး

< ကသေပရပါတယး…

ေအာကးပါ ဇယာက HTML Entities ေတြအတြကး Reserved Characters ေတြပၿဖစးပါတယး။

Result Description Entity Name Entity Number

non-breaking space

< less than < <

> greater than > >

& ampersand & &

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

§ section § §

© copyright © ©

® registered trademark ® ®

™ trademark ™ ™

<body>

<p align="center">Copyright © 2009. All rights reserved. World Wide

Myanmar Training Center.</p>

</body>



အထကးပါပမာ © အစာ © ဆတာက code မာ ေရထညးေပရပါတယး။

ဿ. 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

Anchors ဆတာ Hyperlink တစးခပ ၿဖစးတယး။ သရ႕ tag ကေတာ <a> / လကးရ Document ထမ

စာတစးခ၊ စာပဒး တစးခက ခနးပေကားလြာ ေရာကးသြာခငးတယးဆရငးေတာ Anchor ကသေပရပါတယး။



ေလကဆြၿပ ဖတးသြာရပါတယး။ အ႔ဒါေတြက အလြယးတကေကားႏငးဖ႔အတြကး ေအာကးပါ အတငးသနငးပါတယး။

<body>

<a href="#paragraph1">Jump to Paragraph 1</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 ရ႕

ထပးဆကပ ေရြ ခယးေရာကးရသြာပါလမးမယး…

<span> န႔ <div> တ႔ရ႕ အလပးလပးပန႔ သတ႔ႏစးခရ႕ ကြာၿခာခကးေတြက ေအာကးပါ ဥပမာေတြကၾကညးၿခငးၿဖငး

Body Elements အတြငးမာ style sheet ပါပ… အသမာတ႔ tag ေတြကေတာ <div> န႔<span> ပါ။

ႏစးခစလက HTML styling အတြကးပါပ။

http://www.yourwebsite.com/yourfile.html#nameattribute



သသာထငးရာေစပါလမးမယး။

Tags ရငးလငးခကး ႏငး ဥပမာ <span> Inline Element တစးခပၿဖစးတယး။ ဥပမာ-



<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> ဒႏစးခၾကာက စာသာေလေတြက အနေရာငးေၿပာငးသြာပါလမးမယး…



<html>

<head>

Class attribute ကသၿပ စာလက

အနေရာငးေၿပာငးထာတာပါ။





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 က စာပဒးမာတ႔ေနရာမာသၾကတာေတြ႔ရပါတယး။



<html>

<head>



div.important {color: #ff0000}

</style>

</head>

<body>



<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> ကေပါငးၿပေတာ ဥပမာ ၾကညးပါမယး…

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





<html>

<head>



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>

<span class=”test”> ေၾကာငး

ေပၚလာတာပါ။

<div class=”important”> ေၾကာငး

ေပၚလာတာပါ။



</html>

ဒါက 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 က သ႔ရ႕ width ၿပညးၿပဆတာန႔

ေနာကးတစးေၾကာငးဆငးသြာေပပါတယး.. ဒါလမာမလခငးဘဆရငး <nobr> ကသရပါတယး။ <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 မလပးသြာပါဘ။

Line Breaking ဆတာ စာေၾကာငးက ေအာကးက ခြခလကးၿခငးပၿဖစးတယး။ အသၿပတ႔ အဓက tag

ကေတာ <br/> ဆတာပါပ။

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



List Element ကကၽြနးေတားတ႔ ေယဘယအာၿဖငး သပငးပငးလကးပါမယး… ဒါမမတးမလြယးမာပါ။

ဿ. Physical List Styles

၀. Virtual List Styles

၁. List Items ဆၿပ ခြၿခာလကးပါမယး.. တစးခၿခငးစန႔သတ႔မာပါငးတ႔ tag ေတြက ၾကညးရေအာငး။

List ရငးလငးခကး ႏငး ဥပမာ Physical List Styles ဒအထမာ <ul><ol><dl> ေတြပါငးၾကပါတယး။

Tag ရငးလငးခကး ႏငး ဥပမာ <dl> Definition List လ႔ေခၚပါတယး။ ၂ငး element ထမ content မာ၏

အဓပၸါယး ေဖားၿပခကးအတြကးသသညး။

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



နပါတးစဥးေလေတြတပးမယး… Bullet ေလေတြတပးၿပ မမတ႔ရ႕ လစရငး ေငြစရငး စသညးတ႔ကတနးဆာ

ဆငးမယးဆရငးေတာ List Element ကသေပရပါတယး။

Definition Term

Definition



</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">




</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]



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>




</ul>

အ႔လဆရငး Browser မာ ေအာကးပါအတငး Default value ၿဖစးတ႔ Disc Bullet ေလေတြကထညးေပသြာမာပါ။ . List item 1

. List item 2

. List item 3

အကယး၍ မမစတးၾကကးထပးၿပၿပငးဆငးမယးဆရငးေတာ ၂ငးမာ ကယးပငး attribute ေတြရပါတယး.. အ႔ဒါေတြကေတာ..

<ul type="A" start="3">




</ul>



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



<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



<dd> Definition ေတြပါငးၾကပါတယး.. အေပၚက အသၿပပေတြကၾကညး လကးတာန႔ ဒါေတြက အေထြအထ ေၿပာစရာမလေလာကးေတာပါဘ။ ေအာကးပါ ဥပမာမာဆရငးေတာ အခေၿပာတ႔ List ေတြအာလ ပါပါတယး။

<dir>

<li>A - H</li>

<li>I - M</li>

<li>N - R</li>

<li>S - Z</li>

</dir>

ေသသပးတ႔ရ တစးခတငးမကဘ လပတ႔ 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">

HTML ထက Video , Sound, Image စသညး Multimedia နပကးသကးတ႔ အပငးေတြ

ေတားေတားမာမာထညးသြငးအသၿပၾကပါတယး။



Code



<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” ဆၿပထာလကးတ႔ အတြကး ပက ညာဘကးထက ေရာကးေနတာ ေတြ႔ရပါလမမယး…



<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 ေတြပၿဖစးတယး။


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 ထညးတယးလ႔ လညးေခၚတယး။


hspace=”50” vspace=”20”>

ထညးသြငးရတ႔ value ေတြကေတာ Positive integer pixel values ေတြပၿဖစးတယး။



<img border=?> ပရ႕ ေဘပတးလညးက ေဘာငးအထအပါက ၿပငးမယးဆရငး

border ကသေပရပါတယး။


border=”20”> My Computer

<img usemap="?”>

Usemap က <map> tag န႔တြၿပသေပရပါတယး… map tag ရ႕ name attribute မာ ေၾကၿငာထာတာက img ကေန ယသတာပၿဖစးတယး။ map tag ကေတာ ေအာကးမာၿပထာပါတယး။

<bgsound> Web document တစးခက ဖြငးၾကညးေနတ႔အခနးမာ ေနာကးခသခငးသေလေတြ ထညးမယးဆရငးေတာ <bgsound> ဆတာေလကသေပရပါတယး….

<bgsound src="http://www.worldwidemyanmar.com/i-want-to-understand-

u.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>

<img

hspace=

”50”

<img

vspace=

”20”

<img

border=

”20”



Hyperlink tag

<a href="beatles.mid">Play the Beatles</a>

စသညးတ႔ကအသမာလာပါတယး။

<sound> <bgsound> န႔မကြာပါဘ background မာပအသၿပတာပါ။

<bgsound src="http://www.worldwidemyanmar.com/i-want-to-

understand-u.mp3" delay=”5” />

Delay ဆတာ Web ဖြငးၿပတာန႔ အခနးဘယးေလာကးၾကာမ သခငးပြငးဖ႔အတြကး သတးမတးတ႔ စကနး႔ပါ။

<map> <map> tag က ပမ မမစတးၾကကး ေၿမပအကြကးေလေတြခတာပါပ… Adobe ရ႕ Dreamweaver မာဆရငးေတာ

ဆၿပရပါတယး။ ဥပမာကအရငးၾကညးပါ။



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



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

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 codetype="application/java-vm"

monitor.html cpu.html



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 ကထညးေပရတာၿဖစးတယး။

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

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

Tag ရငးလငးခကး ႏငး ဥပမာ <address> Web Page ေတြမာ လပးစာအတြကးေရေတာမယးဆရငး ဒ tag ကအသၿပတာ

မာပါတယး။

Block Formating မာ ကၽြနးေတားတ႔ရကးထညးထာတ႔ content ေတြကပစခဖ႔အတြကး အဓက

လပးေဆာငးေပပါတယး.



<body>

<address>1234 Nowhere St.<br />Anywhere, State 00001-

9999</address>

</body> ဒ tag ကသလကးတ႔အတြကး သ႔ရ႕ Default က Italic ေလေတြန႔ေဖားၿပေပသြာပါလမးမယး… သ႔မာလညး align, height, width ဆတ႔ attribute ေတြပါရပါတယး။

<Hx> (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)

<h1>, <h2>, <h3>, <h4>, <h5>,<h6> ဆတ႔ Heading အတြကးသတ႔ tag ေတြကေၿပာတာပါ။ 1 to 6 အထရပါတယး။

<body>

<h1 align="center">Heading level 1 text</h1>








</body>

<h6> က Point Size အငယးဆ ၿဖစးၿပေတာ <h1> ကေတာ Point Size အၾကဆပါ။ Heading အတြကးၿဖစးတ႔ ၂ငးတ႔မာ Bold Type ေတြပၿဖစးတယး။

<p> Paragraph ကေဖားညြနးတာၿဖစးၿပ စာေတြက ပဒးန႔ခြၿပေရခငးတယးဆရငး ဒ tag ကသေပရပါတယး။

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

* 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 ကသပါတယး။

<p align=”right”

ကသထာတ႔အတြကး စာသာေတြ

က ညာဘကးထကကပးသြာတာပါ

<p> ဆၿပ စာပဒးခြထာတာပါ။



<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 လပးထာတ႔ text န႔ ရရ text န႔ ပမတပါဘ … ေနာကးတစးခက cite ပၿဖစးတယး။ Quote လပးထာတ႔ Source URL ကေဖားၿပခငးတယးဆရငးေတာ cite ကသေပရပါတယး.. cite က url က ဖြငးမာေတာမဟတးပါဘ။

<marquee> Web page ကေရေနတ႔အခနးမာ စာလန႔ ပေလေတြက သကးငးလႈပးရာမႈေတြပါရငး ပၿပ ၾကညးလ႔ေကာငးပါတယး… စာသာေတြ လႈပးေနတာတ႔.. ေရြ႕လာေနတာတ႔က ၿပလပးမယးဆရငးေတာ <marquee> ကသေပရပါတယး။

<body>



<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 ကသေပရပါတယး။



Values: Positive integer pixel amounts.

<body>

<marquee behavior="scroll" direction="left"

scrollamount="1">Slow scroll speed</marquee>


scrollamount="10">Medium scroll speed</marquee>


scrollamount="20">Fast scroll speed</marquee>

</body> အေပၚက ဥပမာက စမးၾကညးလကးပါက scrollamount attribute ရ႕ value တနးဖမာေလ speed ၿမနးေလပါပ။

loop ဒါကေတာ marquee ရ႕ လႈပးရာမႈ အၾကမးအေရအတြကးပါ။ <body>


loop="1">Scroll Loop</marquee>

</body> အေပၚက loop=”1” ဆရငး သ႔ရ႕ လႈပးရာမႈက တစးၾကမးပ လပးေဆာငးၿပ ေပာကးကြယးသြာပါလမးမယး…

scrolldelay ကၽြနးေတားတ႔ရ႕ စာသာရ႕ အေႏအၿမနးက ဒ scrolldelay န႔လညး သတးမတးလ႔ရပါတယး။ ေအာကးပါ ဥပမာက စမးၾကညးရငး ပၿပသသာပါလမးမယး..

<body>


scrolldelay="400">ScrollDelay</marquee>

</body> အေပၚကအတငးဆရငး စာတမးက တစးထစးၿခငး သြာေနပါလမးမယး.. scrolldealy ရ႕ value က Millisecond န႔တငးတာပါတယး။

<vspace> <width> <height>

ဒါေတြကေတာ အထကးမာေဖားၿပခ႔ၿပပါၿပ။

Marquee အတြကး ကယးတငး စမးသပးၾကညးဖ႔ Code ေလေတြပါ။ Example: 1

<body>

<marquee behavior="scroll" direction="right"><marquee



behavior="scroll" direction="up">Up up and away!</marquee></marquee>

</body> အေပၚက code ဟာ စာသာေလေတြက ခပးေစာငးေစာငးေလ သြာေနပါလမးမယး.. Exmaple: 2

<body>

<marquee style="z-

index:2;position:absolute;left:18px;top:97px;font-family:Cursive;font-

size:14pt;color:#ffcc00;height:200px;"scrollamount="3"

direction="down">Scrolling text</marquee><marquee style="z-


size:14pt;color:#FF8C48;height:100px;"scrollamount="7"

direction="down">Falling text</marquee><marquee style="z-































size:14pt;color:#FF8C48;height:154px;"direction="down">Falling

text</marquee><marquee style="z-


size:14pt;color:#ffcc00;height:82px;"direction="down">Scrolling






size:14pt;color:#ffcc00;height:334px;"direction="down">Scrolling


index:2;position:absolute;left:90px;font-family:Cursive;font-



















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>



</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 width="30%" align="center" size="3" noshade color="#0000FF" /> ဒါဆရငး အၿပာေရာငး Line ေလ တစးခ Browser မာၿမငးရမာၿဖစးတယး။ noshade ဆတာ html မာမထၿခာေပမ႔ xhtml မာေတာ 3D မဟတးတ႔ solid color ေလထညးတာပၿဖစးတယး။

<hr> မာ Closing Tag

(</hr>) မပါ ပါဘ။



<multicol> စာသာေတြက သတငးစာ စာမကးႏာက႔သ႔ 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 န႔သတာပါ။

စာသာၿပငးဆငးတယးဆတ႔ ေနရာမာ ကၽြနးေတားတ႔ေရထာတ႔ စာသာေတြက သာမာနးထကးပၿပေတာ

ေပၚလြငးေအာငး၊ ပၿပေတာ ရငးလငးၿပတးသာေအာငး ေဖားၿပေပဖ႔အတြကးက ရညးညြနးပါတယး။ သမာ အဓကသတ႔ tag ေတြကေဖားၿပေပရမယးဆရငးေတာ -

<Abbr>

<Cite>

<Font>

<Q>

<Spell>

<Sup>

<B>

<Code>

<I>

<S>

<Strike>

<Tt>

<Big>

<Dfn>

<Inlineinput>

<Samp>

<Strong>

<U>

<Blink>

<Em>

<Kbd>

<Small>

<Sub>

<Var>

tag ရငးလငးခကး ႏငး ဥပမာ <abbr> Abbreviation ရ႕ အတေကာကးပါပ။ စာေၾကာငးတစးခတညးမာ စာလတစးလ၊

စာပဒးတစးခရ႕ အဓပၸါယးက ဖြငးဆမယးဆရငး ၂ငးစာသာမာ Pointer ေထာကးလကးၿပဆတာန႔ tooltip text လပစေဖားၿပေပတာပါ။

Send by <abbr title="facsimile">fax</abbr> အေပၚမာဆရငး fax ဆတ႔ စာတေလက ေဖားၿပထာၿပေတာ ၂ငးအေပၚမာ pointer ေထာကးလကးမ facsimile ဆၿပေဖားၿပေပတာပါ။

<cite> Citation text လ႔ေခၚပါတယး.. တနညးအာၿဖငး ကမးက၊ ကကာခကး ေတြမာသပါတယး။

<cite>citation text</cite>

Block Formating ၿပေတာ Character Formatting ပါ။ စာသာ အၿပငးအဆငးန႔ ပကးသကးတ႔အပငး ေတြက

အဓက ဥစာေပတ႔ tag ေတြန႔ ပကးသကးတ႔အပငးေပါ႔။



<font> 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 ရ႕ အမအမညးေတြက တကးရကးေရသာလ႔ရပါတယး။



အေပၚ 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/>








<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 လ႔ေခၚပါတယး။ စာလက အေပၚသ႔ ထပးညြနးတငးမယးဆရငး သပါသညး။

<body> <center><h2>SuperScripted Text</h2><hr> 2<sup>2</sup>= 4 ၿဖစးပါသညး။ တစးးနညးအၿဖငး ၀ ၏ ႏစးထပးသညး ၂ ၿဖစး၏။</center> </body>

<b> စာသာတစးခက Bold ထညးခငးတယးဆရငးေတာ <b> tag ကသေပရပါတယး။

2 က 2 ထပးညြနး

တငးထာတာပါ။



<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 မာ ဒအတငးရကးထညးလ႔မေပၚပါဘ။ < or > ဆၿပရကးထညးရပါတယး။ ဒါေပမ႔ <code> tag ထမာထညးထာရငးေတာ သ႔ရ႕ မႈရငးအတငးေပၚပါတယး။

<i> စာလအေစာငးေလေတြန႔ ေပၚခငးတယးဆရငး ဒ <i> tag ကသေပရပါတယး။



<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 သတယးလ႔ေခၚတယး။

<body>Fixed-width text<br/>

<tt>Fixed-width text</tt>

ပမနး font ပါ

<tt> tag က

သထာတ႔ တာပါ။



</body>

<big> ပမနး font အမအစာပါပ.. ဒါေပမ႔ သက မသမသာေလ ပၿပၾကပါတယး။

<body> Big Text <br/>

<big>Big Text</big>

</body>

<dfn> စာသာတစးခရ႕ အဓပၸါယးက Define လပးတာၿဖစးတယး။ သက definition term လ႔လညးေခၚပါတယး။

<body>

This is <dfn>defining text</dfn> by WWM

</body>

<samp> Sample လ႔ေခၚပါတယး။ Sample ေပလတ႔ စာသာေတြက အစအစဥးကက ရရငးစြာ ေဖားၿပခငးတယးဆရငးသပါတယး။

<samp>sample text</samp>

ပမနး font ပါ

<big> tag က

သထာတ႔ တာပါ။

Definition Term

Sample



<strong> အေလအနကးေၿပာၾကာလတ႔ စာစကာက ထငးထငးရာရာၿပဖ႔အတြကးသပါတယး။ သကေတာ Bold

Text လပါပ။

<body>

This is <strong>strong text</strong>.

</body>

<u> စာေၾကာငးေတြရ႕ ေအာကးမာ Line တာတာပၿဖစးတယး။

<body>

This is <u>Underlined text</u>.

</body>

<blink> စာေလေတြက မတးလးကး ဖြငးလကးပစလပးခငးတယးဆရငး ဒ Blink tag ကသပါတယး။

<body>

This is <blink>blinking text</blink>.

</body>

<em> စာသာေတြက ရငးလငးေအာငးေဖားၿပႏငးဖ႔အတြကး <em> tag က italic ပစေလေတြန႔ ေဖားၿပေပပါတယး။ ဆလတာက ဒ tag န႔ေရထာတ႔အတြကး ဒအထက စာသာေတြက အေရၾကတယး… ပၿပအေလထာစြာ ဖတးသငးေၾကာငး user ေတြက ၿမငးသာေအာငး လပးေပတာ ပၿဖစးတယး။

Strong Text

Underlined Text



<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 ၿဖစးသြာတာေပါ႔။



<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<sub>2</sub>O. That's

H<sub>2</sub>-woah!</p>

</body>

<var> Variable အမညးမာက ေဖားၿပလလငး သပါတယး။



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

ဒအပငးမာ -

<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">

Embedded Functionality အပငးပၿဖစးတယး။ HTML မာ Java applications, scripting functionality,

Plug-ins စသညးတ႔က အသၿပဖ႔အတြကး ပၿဖစးပါတယး။



</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&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&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 ေတြအတြကး Please trying this media clip ဆတ႔ေနရာမာ link

ေပသြာမာၿဖစးပါတယး။ support လပးရငးေတာ ေအာကးက noembed က မေပၚလာပါဘ။

<script> ဒ tag က ကၽြနးေတားတ႔ အေပၚက head element အပငးမာ တစးခါထညးသြငး ၿပသြာပါၿပ… script လ႔ေၿပာရငး javascript ကပေၿပၿမငးၾကပါလမးမယး… html မာ javascript က ေတားေတားမာမာသၾကပါတယး… ဆလတာက html တစးခတညးန႔ professional webpage တစးခ တညးေဆာကးဖ႔ဆတာမလြယးကဘေလ.. ဒါေၾကာငး function မစသႏငးေအာငး၊ input validation ေတြ filtering လပးႏငးေအာငး စသညးလပးငနးမေတြမာ ဒလ script ေတြက server side အထ မေရာကးပ client side မာတငး စစးသြာလ႔ရပါတယး။ ဒလစစးလကးၿခငးအာၿဖငး html rendering ကပၿမနးဆနးေစပါတယး။



<html>

<head>

<title>Embeded Funtionality by WWM</title>

<script language="JavaScript" type="text/javascript">



</script>

</head>

<body>

Please enter your name:

<form>

<input type="text" name="name" onblur="getname(this.value)" value="" />

</form>

</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">



</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” ထာမယးဆရငး ေဘေဘာငးက ၿမငးရမာမဟတးပါဘ။



ဒါေလကေတာ 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" />



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

ဒေနရာမာ ပါငးတ႔ 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 ကေတာ ေအာကးက လငးေလတစးခတာထာတာ ေတြ႔ရပါလမးမယး…

Revision Control ပၿဖစးတယး။ ကၽြနးေတားတ႔ ထညးထာတ႔ စာသာေတြ update လပးထာတ႔

အေၾကာငးအရာ content ေတြက သသနး႔ ခြၿခာၿပေဖားၿပခငးတယးဆရငး အသၿပဖ႔အတြကးၿဖစးတယး။



<body>

<del cite="#oct12-2010" datetime="2010-10-12T12:45:00PST">Deleted

text</del>

<br/>

<br/>

<ins cite="#jan25-2009" datetime="2009-01-25T18:00:00PST">Inserted

text</ins>

</body>

Ruby မာသတ႔ အဓက tag ကေတာ Parent tag ၿဖစးတ႔ <ruby> န႔ <rb><rt> တ႔ပၿဖစးၾကပါတယး။

မတးခကး- Ruby က Browser ေတားေတားမာမာန႔ အဆငးမေၿပပါဘ။

Tag ရငးလငးခကး ႏငး ဥပမာ <ruby> သကေတာ ruby element အတြကး အဓကသတ႔ parent tag ပၿဖစးပါတယး။

Ruby Elements လ႔ပေခၚပါတယး။ အဓကအာၿဖငး East Asian Languages (Japanese, Chinese,

Korean, န႔ စသညးတ႔က ေဖားၿပလတ႔အခါ အသၿပပါတယး။



Support လပးတ႔ IE မာသထာတာၿဖစးပါတယး။ Firefox မာေတာ Support မလပးပါဘ။

<ruby>

<rb>家辺勝文</rb>

<rt>liaison</rt>

</ruby>

<rb> Ruby Base ပါ။ ကၽြနးေတားတ႔ေရသာလကးတ႔ east asian language (Base Language) ေတြ အတြကးသပါတယး။

<ruby>


<rt>liaison</rt>

</ruby>

<rt> Ruby Text လ႔ေခၚပါတယး.. <ruby>


<rt>liaison</rt>

</ruby>

<rbc> Ruby Base Container လ႔ေခၚပါတယး။ Container ဆတာကေတာ <rb> content ေတြက ထညးသြငးထာတာၿဖစးပါတယး။

<ruby>

<rbc>



<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 ေလေတြ ကြၿပာသြာပါလမးမယး..



<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 ေတြ

ရပါေသတယး။



အေပၚက ပမာဆရငး သ႔မာ အေရာငး (၂)ေရာငးေပၚေနပါတယး…. 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 ေတြပၿဖစးပါတယး။



<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"


</frameset>

<frame name="footer" src="footer.html">

</frameset>

</html>

Frameset မာပါငးတ႔ attribute ေတြကေတာ cols,rows, border, bordercolor, frameborder,



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"


ဒ <frame> ထမာဆရငး ေခၚယအသၿပမ႔ document link ပါငးသလ ၂ငး frame တစးခအတြကး ကယးပငး attribute ေတြကသတးမတးလ႔ရပါတယး။ ဒေနရာမာ noresize ဆတာေလကေတြ႔ရပါလမးမယး… Default frame တစးခမာ frame border ေလက ဆြယၿပ အကဥးအကယး၊ ခ႕ခ႕ လပးလ႔ရပါတယး… အကယး၍ အ႔လ လပးပငးခြငးမေပခငးဘဆရငးေတာ noresize ဆတာေလကထညးေပရပါတယး။

<noframe> <noframe> ဆတာ အေပၚမာေဖားၿပထာခ႔ဖတ႔ <noscript> လပါပ… မမတ႔အသၿပတ႔ browser က အခ ကၽြနးေတားတ႔ထညးသြငးအသၿပထာတ႔ frameset ကမသဘဆရငး browser က support မလပးဘဆတာ user အာေဖားၿပေပထာတာပၿဖစးပါတယး။



<html>

<head>



<title>Frameset Elements by WWM</title>

</head>

<frameset rows="20,25%,*">

<frame src="frame1.html" name="frame1" />


<frameset cols="30%,*">



</frameset>

<noframes>

<body>

This text will appear only if the browser does not support frames.

</body>

</noframes>

</frameset>

</html>

<noframe> ဆတာက <frameset> အတြငးထမာပေရသာရပါတယး။

ဒေလာကးဆရငး HTML န႔ ရရငးတ႔ webpage ေလတစးခေလာကး ေရဆြဖ႔ အဆငးသငး ၿဖစးေလာကးၿပ

ထငးတာပ… မၿဖစးေသရငး ေအာကးပါ ေလကငးခနးေလေတြန႔ တြၿပထကးၿပေလလာေပါ႔..

ပထမဥစြာ - exercise1 ဆတ႔ folder ေလတစးခ တညးေဆာကးလကးပါ… ၂ငးအထမာ images ဆတ႔ folder

ေလတစးခလညးထပးၿပတညးေဆာကးထာပါ… html ေရေတာမယးဆရငး image ေတြက images folder ထမာ သသနး႔

ၿဖစးေနေအာငးလ႔ပၿဖစးပါတယး။

Notepad ကဖြငးလကးပါ။ ၿပရငး HTML ရ႕ ပေသ Elements ေတြကရကးထညးလကးပါ.. အ႔ဒါေတြကေတာ -



<html>

<head>

<title></title>

</head>

မာတကာ ၊ CONTENT DREAM IT, CODE IT BY PLANETCREATOR.NET မာတကာ ၊ CONTENT DREAM IT, CODE IT BY PLANETCREATOR.NET

Exercise -1





<body>

</body>

</html>

ဒပစေလကမတးထာလကးေပါ႔။ ၿပရငး exercise1.html ဆတာေလန႔ သမးလကးပါမယး..

သမးပသမးနညးကေတာ- notepad မာ file menu ကေန save as န႔သမးလ႔ရပါတယး…



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 ကသဖ႔ေၿပာထာတာပၿဖစးတယး။



ေနာကးတစးခကေတာ <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>   <font color="#FFFFFF">HOME

|   NEWS   |   PRODUCTS   |

SERVICES   |

   ABOUT US   |   CONTACT US</font></b></font></td>

</tr>

</table>

ဒေနရာမာ ဆၿပသထာတာဟာ 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" align="center"><font face="Arial" size="2">©

COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p>

<p> tag ကသၿပေတာ ကၽြနးေတားတ႔လခငးတ႔ content ေတြက ဒနာမာ ထညးသြငးေဖားၿပၾက ရမာပၿဖစးပါတယး။



အခ page တစးခလရ႕ အနာေဘာငးေတြက 0 ပထာပါမယး…

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0"

bgcolor="#FFFFEE">

ဒါကေတာ ဘယးညာ အေပၚေအာကး margin က “0” ထာလကးတာပၿဖစးပါတယး။

အခ ဒါေတြအာလကေပါငးၿပေတာ result ကၾကညးရေအာငး



<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>   <font

color="#FFFFFF">HOME   |   NEWS   |

PRODUCTS   |

SERVICES   |   ABOUT US   |   CONTACT

US</font></b></font></td>

</tr>

</table>

<p style="margin-left: 20"><font face="Arial" size="2">Place your content

here.</font></p>




here.</font></p>


here.</font></p>


here.</font></p>

<p style="margin-left: 20" align="center"><font face="Arial" size="2">©

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 ထမာ menu ေဆာကးထာတ႔ home, news, products, services, about, contact

စသညးတ႔က Link ေတြေပမယးဆရငးေတာ anchor ကပသရမာေပါ႔..

Table သခပါ



<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif">

<tr>

<td width="100%"><font face="Arial" size="2"><b>   <font color="#FFFFFF"><a

href="index.html">HOME</a>   |   <a href="news.html">NEWS</a>   |

   <a href="products.html">PRODUCTS</a>   |   <a

href="services.html">SERVICES</a>   |   <a href="about.html">ABOUT

US</a>   |  <a

href="contact.html">CONTACT US</a></font></b></font></td>

</tr>

</table>

တကယးေတာ HTML ဆတာ အလြနးက ရရငးတယး.. လြယးကတယး… ထ႔အတ သက ပေဖားႏငးရငး

ႏငးသေလာကး လနးတယးေပါ႔…

CSS က ဆကးလကးၿပသြာၾကရေအာငး…. -->

တစးခ႕ေတြကေၿပာၾကတယး Web Page တစးခဆတာ information ေတြကၾကညးဖ႔ရာ viewer

ၾကတစးခပါပတ႔… အခကေတာ Multimedia ေတြအတြကးတ႔… တစးခ႕ကေတာ သတ႔ရ႕ လပးေဆာငးခကးေတြက

လကးကမးစာေစာငးေတြအစာ e-Media Advertise လပးတာပတ႔…

မတညတ႔လေတြက မတညတ႔ ရေဒါငးကေန အမမၾကညးၾက ခစာၾက ေဖနးၾကတာပါပ…

ဒါေၾကာငး ကၽြနးေတားတ႔ ဒ web page ဆတာၾကက ေဖနးၾကညးရေအာငး

မာတကာ ၊ CONTENT DREAM IT, CODE IT BY PLANETCREATOR.NET

CSS (Cascading Style Sheets)




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 အမာၾကရ႕ ဒဇငးပစေတြက CSS file တစးခတညးကေန

ထနးခပးႏငးၿခငး န႔ လပတ႔ ပစ Layout တစးခက HTML ထကးထကစြာေရဆြႏငးၿခငးေၾကာငး CSS

ကလသမာၾကပါတယး။

CSS ရ႕ အဓပၸါယးကေတာ Cascading Style Sheets ပၿဖစးပါတယး။ fonts, text alignment, spacing,

margins, and list formatting ေတြအတြကး ပစခဖ႔အတြကး 1996 ေလာကးက World Wide Web Consortium (W3C)

အသအမတးၿပအၿဖစး CSS1 ထြကးေပၚလာတာၿဖစးၿပ 1998 ေလာကးမာ CSS2 စသညးၿဖငး ထြကးေပၚလာခ႔ရာ အခဆရငး

CSS3 ဆၿပၿဖစးေနပါၿပ…

CSS က အသၿပတ႔ ေနရာမာ Inline, External န႔ Internal ဆၿပခြၿခာႏငးပါတယး။

အမညး ရငးလငးခကး ႏငး ဥပမာ

Applying Usage



Internal CSS HTML Document တစးခအတြငးမာ ေရသာရတာမက Internal CSS လ႔ေခၚပါတယး။ Internal

CSS ကသတ႔အခါ HTML page ရ႕ <head></head> elements အတြငးမာပ ေရသာ ရတာၿဖစးပါတယး။

<html>

<head>

<title>Internal CSS by WWM</title>


</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>



Selector ကေတာ HTML ရ႕ tag ေတြကပ သၾကတာမာပါတယး.. ဥပမာ <body> ဆတ႔ tag အတြကး body selector

ကပသပါတယး။ ဒါဆရငး ဒ selector ထက property န႔ value တ႔ဟာ ၂ငး html tag ရ႕ element အတြကး

ပၿဖစးပါတယး။ ဆလတာက ကၽြနးေတားတ႔က body {background-color: red} ဆၿပေရထာရငး HTML ရ႕ body

background မာ အနေရာငးၿဖစးသြာပါလးမးမယး..

Value ကထညးသြငးအသၿပတ႔အခါ ထညးသြငးထာတ႔ စာလက တစးလထကးပေနရငး ၂ငးက Double Quote “ -- "

ထညးေပရပါတယး။ p {font-family: "sans serif"} အ႔လပစမေပါ႔။ ပမနးအတငးဆရငးေတာ Double Quote

ထညးစရာမလပါဘ။

CSS မာအေရာငးေတြကသတးမတးတ႔အခါ HTML မာမပါပ.. Colour Name သ႔မဟတး Hex Code

ကထညးသြငးလ႔ရပါတယး။

ထ႔အတ Property မာ တစးခထကးပၿပ ထညးသြငးသခငးတယးဆရငး semicolon “;” ေလကထညးသြငး

အသၿပေပရပါတယး။ p {text-align: center; font-family: "sans serif"}

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 သတးမတးလကးတာပ။

Selector

Property

Value



အခဆကးလကးၿပ 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>


</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>

Class Selector



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



</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>



</head>



<body>

<h1 class="123">This is CENTER Head</h1>

<p class="mgmg">This is RIGHT</p>

</body>

</html> အေပၚက code ရ႕ result ကၾကညးမယးဆရငး class=”mgmg” က အမနးအတငးေပၚမာၿဖစးၿပ class=”123” ကေတာ

မေပၚပါဘ။

Class Selector ၿပေတာ ID Selector ပါ… ID Selector က သတးမတးမယးဆရငးေတာ selector ရ႕ ေရ႕မာ “#” sign

ေလခၿပေရရတာပၿဖစးတယး။

CSS Code

#idsel{

text-align: center;

color: red

}

HTML Code

<html>

<head>



</head>

<body>

<h1 id="idsel">This is ID Selector</h1>

</body>

</html>

ID Selector



ေနာကးတစးခကေတာ CSS code ေလေတြကေရသာတ႔အခါ HTML မာေၿပာခ႔သလပ ၿပနးလညးၿပငးဆငးဖ႔ရာ

လြယးကေအာငး ရငးရငးလငးလငးေရသာသငးပါတယး.. ေရသာတ႔ပကေတာ -

body {

scrollbar-face-color: #000000;

font-size: 10px;

font-family: times;

}

p {

မတးခကး -: ဒါေၾကာငး ID selector အတြကး ID attribute ကသၿပေတာ Class selector အတြကး Class attribute

ကသပါတယး။

Code Format



font-size: 9px;

font-family: verdana;

color: red;

}

ဒအတငးေရသာထာရငး ကၽြနးေတားတ႔ ၾကညးရတာလညး လြယးကပါတယး။

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 ေရသာထာတ႔ အတြကး သသာႏငးပါတယး။

Comment /* --- */



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>



</head>

<body>

<h1>This is Red Header</h1>

</body>

</html>

Colors and Backgrounds



background-color စာသာေတြရ႕ ေနာကးခ Background, Text ေတြရ႕ ေနာကးခ Background အေရာငးက ေၿပာငးဖ႔အတြကးသပါတယး။ CSS Code (style.css)

body {

background-color: cyan;

}

h1 {

color: #FF0000;

background-color: #3499AB;

}


<html>

<head>



</head>

<body>


</body>

</html>

background-image ေနာကးခ ပကထညးသြငးခငးတယးဆရငး background-image ဆၿပထညးေပရတယး.

Value ကေတာ url(“filename”); ဆၿပထညးရတယး… url ဆတာ မမတ႔ထညးမညး ပရ႕ လမးေၾကာငးေပါ႔…အကယး၍ Web Link ကေနထညးခငးတယးဆရငး url(“http://www.worldwidemyanmar.com/my-computer1.png”); ဆၿပထညး



သြငးေပရပါတယး။ CSS Code (style.css)

body {


background-image: url("my-computer1.png");

}

h1 {

color: #FF0000;


}


<html>

<head>



</head>

<body>


</body>

</html>

background-repeat အေပၚက ပမာ ကၽြနးေတားတ႔ သတထာမပါလမးမယး.. အ႔ဒါကေတာ ပေတြက အလာလကးေကာ အနလကးပါ အၿပညးၿဖစးေနတာေတြ႔ရပါလးမးမယး… ဒပေတြရ႕



ေပၚလြငးမႈက ကနး႔သတး၊ သတးမတးမယးဆရငး သပါတယး။ ဒအထမာ 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-repeat: no-repeat;

}

h1 {

color: #FF0000;


}


<html>

<head>



</head>



<body>


</body>

</html>

background-attachment ထညးသြငးထာတ႔ပေတြက lock လပးတာ unlock လပးတာေတြအတြကး သတာပၿဖစးတယး… lock လပးတယးဆတာကေတာ ကၽြနးေတားတ႔ရ႕ ပက browser ရ႕ scroll ကဆြလကးတငးမာ ပက အေပၚေအာကး မတကးသြာပ မမထာလကးတ႔ ေနရာမာ အၿမရေနတ႔ပစပါပ… Value ရငးလငးခကး ႏငး ဥပမာ background-attachment: scroll သက Image က Unlock

အတငးၿဖစးေပၚေစပါတယး။ Default Value ေပါ႔။

background-attachment: fixed ပက lock လပးတာပၿဖစးပါတယး။ ေအာကးက ဥပမာက စမးၾကညးပါ


body {




background-attachment: fixed;

}

h1 {

color: #FF0000;




}


<html>

<head>



</head>

<body>


</body>

</html>

background-position ပက မမတ႔ထာလတ႔ေနရာသတးမတးၿခငး ပၿဖစးပါတယး။ ဥပမာအေနန႔ position က 100px 255px လ႔သတးမတးမယးဆရငး ဘယးဘကးေဘကေန 100px အကြာအေန႔ အေပၚကေန 255px အကြာအေ ၿဖငး Browser န႔တငးတာကာ ေဖားၿပေပသြာပါလမးမယး…

Scroll ကေအာကးသ႔ ဆြခ

လကးေသားလညး ပက ဆြလကး

တငးမာ လကးပါလာတာက

ေတြ႔ရပါလမးမယး..



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-position: right bottom;

}

h1 {

color: #FF0000;


}


<html>

<head>



</head>

<body>


</body>

</html>



background background ကေတာ အေပၚက ေၿပာခ႔တ႔ background properties ေတြအာလက စေပါငးၿပေရ အတခပးေရသာရာမာသပါတယး။ ေအာကးပါ CSS code ကၾကညးပါ CSS Code (style.css)





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;


}


<html>

<head>

ပက browser ရ႕ ညာဘကး

ေအာကးေၿခကေရာကးသြာပါလမးမယး..





</head>

<body>


</body>

</html>

ဒေလာကးဆရငးေတာ background ရ႕ Compiling အေၾကာငးက သေလာကးၿပ ထငးပါတယး။

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 ပၿဖစးတယး။

Fonts



အသၿပပေလေတြက ၾကညးရေအာငး… CSS Code (style.css) {background property}

h1 {

font-family: arial, verdana, sans-serif;

}

h2 {

font-family: "Times New Roman", serif;

}


<html>

<head>



</head>

<body>

<h1>Heading 1 written in Arial</h1>

<h2>And heading 2 in Times New Roman</h2>

</body>

</html>



အေပၚက font-family မာ ပထမဥစြာ arial font ကၾကညးပါမယး.. ၂ငး font စကးထမာ မရမ verdana ကေၿပာငးပါမယး.. verdana မရဘဆရငး sans-serif ထက font တစးခခက ၾကညးပါလမးမယး…

font-style ေရသာထာတ႔ font ရ႕ normal, italic or oblique စသညး styling ေတြကသတးမတးတာပါ အသၿပပေလေတြက ၾကညးရေအာငး… CSS Code (style.css)

h1 {


font-style: italic;

}

h2 {

font-family: "Times New Roman", serif;

}


<html>

<head>



</head>

<body>

<h1>Heading 1 written in Arial Roman - Italic</h1>



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

<head>



</head>

<body>

<h1>Heading 1 - Small Caps</h1>



<h2>And heading 2 - normal</h2>

</body>

</html>

font-weight စာလေတြက normal သ႔မဟတး bold သတးမတးဖ႔အတြကးပါ။ CSS Code (style.css)

p {


}

td {


font-weight: bold;

}


<html>

<head>



</head>

<body>

<table border="1" cellpadding="10">

<tr>

<td>Text in bold</td>

</tr>



</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 က အၾကအကယးလပးတာပါပ။

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%



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%


h1 {

font-size: 30px;

}

h2 {

font-size: 12pt;

}

h3 {

font-size: 120%;

}

p {

font-size: 1em;

}


<html>



<head>



</head>

<body>

<h1>Heading <h1> size 30px</h1>

<h2>Heading <h2> size 1cm</h2>

<h3>Heading <h3> size 120%</h3>

<p>Paragraph <p> 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;

}




<html>

<head>



</head>

<body>

<p>This is Font Compiling</p>

</body>

</html>

စာသာ ၿပငးဆငးမႈပငးန႔ သကးဆငးတ႔ က႑တစးခပၿဖစးပါတယး။ စာေတြက ဘယးညာ alignment ေတြၿပငးမယး…

spacing ေတြၿပငးဆငးဖ႔အတြကးသတာပၿဖစးပါတယး။

Property ရငးလငးခကး ႏငး ဥပမာ text-indent Microsoft Word မာလ စာသာေတြက အထက တြနးထတးခငးတယးဆရငး text-indent

ကသေပရပါတယး။ CSS Code (style.css)

p {

text-indent: 50px;

}


Text



<html>

<head>



</head>

<body>

<p>This is Text Indent</p>

</body>

</html>

text-align စာသာေတြက ေဘဘယးညာ Alignment အတြကးသပါတယး။ CSS Code (style.css)

th {

text-align: right;

}

td {

text-align: center;

}

p {

text-align: justify;

}


text-indent: 50px



<html>

<head>



</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;



}

h3 {

text-decoration: line-through;

}


<html>

<head>



</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;



}


<html>

<head>



</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 {



text-transform: lowercase;

}


<html>

<head>



</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



Hyperlink ေတြက 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 ေတြရ႕ အေရာငးက

သတးမတးရနး။



Syntax

:link {

declaration block

}


a:link {

color: #0be734;

}


<html>

<head>



</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 {



declaration block

}


a:visited {

color: #FF0000;

}


<html>

<head>



</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

}




a:active {

background-color: #FFFF00;

}


<html>

<head>



</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



}


a:hover {

color: orange;

font-style: italic;

}


<html>

<head>



</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 ေၿပာငးတာ စသညးၿဖငး ေတားေတားမာမာသလ႔ရပါတယး။



Link ရ႕ ေအာကးက Line ကဖယးရာၿခငး

ကၽြနးေတားတ႔ အေပၚက ပေတြတငးက သတထာၿပၾကညးမယးဆရငး link ပါတ႔ စသာေတြတငးမာ underline ေလေတြ ၿဖစးေနပါလမးမယး… အကယး၍ ကၽြနးေတားတ႔က ၂ငး line ကမၾကကးလ႔ ဖယးထာခငးတယးဆရငး ဖယးလ႔ရပါတယး။ Syntax

a {

declaration block

}


a {

text-decoration:none;

}


<html>

<head>



</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 မေပၚေတာပါဘ။



အကယး၍ property တစးခခငးစအတြငးမာ သတးမတးမယးဆရငးလညး ရပါတယး။ CSS Code (style.css)

a:link {

color: blue;


}

a:visited {

color: purple;


}

a:active {

background-color: yellow;


}

a:hover {

color:red;


}

အထကးပါ အတငးေရသာရမာပါ။

ေခါငးစဥးေတြ အမာၾကထက ေခါငးစဥးတစးခကၿဖစးေစ၊ Categories ေတြအမာစထက မမသတးမတးလ႔တ႔

category တစးခ သ႔မဟတး၊ တစးစ ကၿဖစးေစ သသနး႔ခြၿပသတးမတးခငးတယးဆရငး သေပရပါတယး။ ဥပမာေလ

ကၾကညးလကးတာက ပၿပရငးပါလမးမယး…

Identification of Elements

ရငးလငးခကး ႏငး ဥပမာ

class အေပၚမာ ကၽြနးေတားတ႔ class န႔ id အေၾကာငးက အထကးအေလာကး ရငးၿပခ႔ၿပလညးၿဖစးပါတယး.. အခ class ကဘယးလသတယးဆတာ ေဖားၿပထာပါတယး။ ကၽြနးေတားတ႔မာ ေအာကးပါအတငး red wine န႔ white wine ဆၿပ မတညတ႔ grapes wine

Identification and grouping of elements (class and id)



ႏစးခရတယးဆၾကပါစ႔…

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

<head>



</head>

<body>



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



#c1-2 {

color: red;

}


<html>

<head>



</head>

<body>

<h1 id="c1">Chapter 1</h1>

<h2 id="c1-1">Chapter 1.1</h2>


<h1 id="c2">Chapter 2</h1>


</body>

</html>

အေပၚက ဥပမာကၾကညးမယးဆရငး HTML မာ chapter 1, 1.1, 1.2, 2 စသညးၿဖငး သတ႔က id class ေရသာသတးမတးရနးအတြကး css မာ id selector န႔ေရထာတာပၿဖစးပါတယး။ ဒါေၾကာငး ေပထာတ႔ class ရ႕ value ေတြကလညး မတညရပါဘ။

Grouping of elements (span and div)



ဒတစးခါေတာ အေပၚက span န႔ div အေၾကာငးပါပ … HTML မာ ရငးၿပထာလ႔ သတ႔က သေဘာေပါကး

ေနေလာကးပါၿပ.. ဒါေပမ႔ CSS မာဆရငး ဒါေတြက class န႔ id attribute ေတြန႔ တြၿပသပ သနညးကေဖား

ၿပေပသြာမာပါ။

Grouping with

ရငးလငးခကး ႏငး ဥပမာ

<span> span tag က class attrribute န႔ တြၿပသတာ မာပါတယး။ CSS Code (style.css)

span.benefit {

color:red;

}


<html>

<head>



</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 ဖြ႕ပါမယး။ အသၿပပေလက ေအာကးမ



ေဖားၿပထာပါတယး။ CSS Code (style.css)

#democrats {

background:blue;

}

#republicans {

background:red;

}


<html>

<head>



</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>



</div>

</body>

</html>

Democrats အစန႔ Republicans အစေတြက ေနာကးခ အၿပာန႔ အါ ေနာကးခအေရာငးေလေတြ သတးမတးႏငးဖ႔ div tag န႔ id attribute ကသထာပါတယး။ CSS မာေတာ id selector ေပါ႔.

Professional Web page ေတြက ၿဖစးေပၚဖ႔အတြကး CSS ရ႕ Layout ေကာငးမႈကလညး အေရပါတ႔

အခနးက႑ကေနပါငးေနပါတယး.. ဒါေၾကာငးလ CSS ဆတာ Styling and Layout အတြကးပ ဆၿပ လသမာၾကတာပါ။

ဒါဆရငး အခ ဒေနရာမာ margin, border, padding and content ေတြက အစအစဥးတကသတတးဖ႔

အေရၾကပါတယး။ ဒါဟာ CSS ရ႕ အေရပါတ႔ အပငးပါပ။

The box model က အသၿပတတးဖ႔အတြကး ေအာကးပါ structure က ၿမၿမမတးသာထာဖ႔လပါတယး။

The box model



ဒအခါေတာ div ကသၿပ Elements ေတြက Group ဖြ႕ပါမယး။ အသၿပပေလက ေအာကးမ ေဖားၿပထာပါတယး။


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>

<head>



</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 ပါ။



အေပၚက ပက ၾကညးရန႔ margin, padding, border န႔ content ေတြအေၾကာငးက သေလာကးၿပ ထငးပါတယး။

စာသာေတြရကးထညးထာတ႔ အစြနးဆ အပငးပၿဖစးပါတယး။ Margin မာ right, left, top and bottom

ဆၿပရပါတယး။

Margin




body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

ေအာကးပါအတငးလညးေရသာလ႔ရပါတယး။


body {

margin: 100px 40px 10px 70px;

}

ဒါဟာ နာရလကးတ လညးပတးပအတငးပါပ… top, right, bottom, left ဆၿပသြာပါတယး။

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>



</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

Padding



one another in a spirit of brotherhood</p>

</body>

</html>

အေပၚက Header 1 န႔ Header 2 ေတြကၾကညးပါ.. padding ကသထာတ႔အတြကး ၂ငးတ႔ ႏစးခက

အထကေရာကးေနတာေတြ႔ရပါလမးမယး… padding ကပၿပေပၚလြငးေအာငးလ႔ ေနာကးခအေရာငးန႔ထညးၿပ

ေဖားၿပထာတာပါ။

Web Content ေတြက အနာေဘာငးေတြ ခတးဖ႔အတြကး သ႔မဟတး ေဘာငးေတြက လလပပ

ၿပငးဆငးဖ႔ လပးမယးးဆရငး border ကသေပရပါတယး။ ၂ငးတ႔အာ border ရ႕ width , border ရ႕ style န႔

border ရ႕ အေရာငးေတြဆၿပ ခြၿခာအသၿပသြာႏငးပါတယး။

Border‟s Properties ရငးလငးခကး ႏငး ဥပမာ border-width Border ရ႕ အထအပါကသတးမတးရနး။ ၂ငးအာ thin, medium န႔ thick

ဆၿပေရသာလ႔ရသလ px န႔လညး သတးမတးလ႔ရပါတယး။


h1 {

border-width: thick;

padding-left:120px;


Borders



}

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 ေတြပၿဖစးပါတယး။




h1 {

border-style: dotted;

}

h2 {

border-style: outset;

}

Border အာ compile လပးေရမယးဆရငးလညးရပါတယး။

p {

border-width: 1px;

border-style: solid;

border-color: blue;

}

ေအာကးပါအတငး ေရသာႏငးပါတယး။

p {



border: 1px solid blue;

}

Borders အတြကး ဥပမာ :-


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 ေတြထညးသြငးလ႔

ရပါေသတယး..


h1 {

border-top-width: 20px;

border-top-style: solid;

border-top-color: red;



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>

<head>



</head>

<body>

<h1>Header 1</h1>


with reason and conscience and should act towards one another in a spirit of brotherhood</p>

</body>

</html>



ဒါဆရငး ကၽြနးေတားတ႔က ေလနာရရငး ေလကာလာ သတးမတးလ႔ရတယးေပါ႔…

Elements ေတြက box ထမာ အလာ အန တြကးခကးၿပ ေနရာခမယးဆရငးသပါတယး။

ဒအတြကး <div> tag န႔ class attribute ေတြကသပါတယး။ ေအာကးပါ ဥပမာကၾကညးပါ။ CSS Code (style.css)

div.box {

height: 200px;

width: 400px;

border: 1px solid black;

background: orange;

}


<html>

<head>



</head>

<body>

<h1>Header 1</h1>

Height and Width



<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 ထမာ စာသာေတြက ေဖားၿပေပထာတာပၿဖစးပါတယး…

Magazine န႔ စာေစာငးေတြမာ ေဖားၿပေနတ႔အတငး ပက ဘယး သ႔မဟတး ညာနာမာေရြ႕

ထာဖ႔အတြကး အသၿပတာပၿဖစးပါတယး။

ေရသာ အသၿပပေလကၾကညးပါ။

Floating




#picture {

float:left;

width: 200px;

}

float: left ဆၿပ ဘယးဘကးထမာ ေနရာထာဖ႔ ေၿပာထာပါတယး။


<html>

<head>



</head>

<body>

<div id="picture">

<img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px">

</div>


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 က ကၽြနးေတားတ႔ column ေတြသတးမတး ခငးတယးဆရငးလညး

အသၿပလ႔ရပါတယး။


#column1 {

float:left;

width: 31%;

background-color:#999999;


}

#column2 {

float:left;

width: 31%;

background-color:#0099CC;


}

#column3 {

float:left;

width: 31%;

background-color:#666600;


}

id class က သထာပါတယး။


<html>

<head>



</head>

<body>

<div id="column1">






should act towards one another in a spirit of brotherhood.</p></div>

<div id="column2">





<div id="column3">





</body>

</html>

အခဟာက float ရ႕ column ဖြ႕စညးပက ကၿမငးသာေအာငးလ႔ background-color န႔ Padding ေလေတြပါ

ထညးသြငးေဖားၿပလကးတာပါ။

အကယး၍ float မလခငးဘ ဆရငး clear: both; ဆၿပသေပလ႔ရပါတယး။ ေအာကးပါ ဥပမာကၾကညးပါ။


#picture {

float:left;

width: 200px;

}



.floatstop {

clear:both;

}


<html>

<head>



</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 န႔ ေခၚယအသၿပထာပါတယး။



Contents ေတြက ေနရာခတ႔ေနရာမာ ကၽြနးေတားတ႔က browser အေပၚမာ မမတ႔

ႏစးသကးတ႔ေနရာမာ အတအကေနရာခလ႔ရပါတယး.. ဒအတြကး browser ကေအာကးပါ အတငး grid

ေလေတြန႔ စတးထမာ ေရဆြၿပ ၾကညးရေအာငး

ဒေနရာမာ ကၽြနးေတားတ႔က Headline ဆတ႔ content တစးခက ေနရာခမယးဆပါစ႔…

ဒါက ကၽြနးေတားတ႔က အေပၚပငးက 100 px န႔ ဘယးဘကးေဘက 200 px ဆတ႔ေနရာမာ ထာမယးဆရငး

CSS မာ ေအာကးပါအတငးေနရာခရပါတယး။ h1 {

position:absolute;

top: 100px;

left: 200px;

}

ေအာကးပါအတငး ထြကးလာပါလမးမယး…

မာတကာ ၊ CONTENT DREAM IT, CODE IT BY PLANETCREATOR.NET

Positioning of elements




အခလေနရာခတ႔ေနအခါမာ Absolute န႔ Relative ဆၿပရပါတယး။ လကးေတြ႔န႔ ယဥးၾကညးရငး

ပၿပသေဘာေပါကးမာပါ။

Absolute Example CSS Code (style.css)

#box1 {

position:absolute;

top: 50px;

left: 50px;

background: #FA7C00;

width: 50px;

height:50px;

padding:2px;


font-family:arial;

}

#box2 {

position:absolute;

top: 50px;

right: 50px;

background: #FFFF00;



width: 50px;

height:50px;

padding:2px;


font-family:arial;

}

#box3 {

position:absolute;

bottom: 50px;

right: 50px;

background: #00FF00;

width: 50px;

height:50px;

padding:2px;


font-family:arial;

}

#box4 {

position:absolute;

bottom: 50px;

left: 50px;

background: #00FFFF;

width: 50px;

height:50px;

padding:2px;


font-family:arial;

}


<html>

<head>



</head>

<body>



<div id="box1">Box 1</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;



bottom: 100px;

}


<html>

<head>



</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>











</body>

</html>



အေပၚက CSS code မာၾကညးရငး content န႔ image တ႔ရ႕ အကြာအေက သတးမတးထာပါတယး.. ထက႔သ

သတးမတးခကးက content အေပၚမာ မႈတညးၿပေတာ ေနရာ အေနအထာေၿပာငးလသြာပါလမးမယး… အထကးပါ

ဥပမာက ကယးတငး ထညးသြငးၿပ browser အာ ခ႕ခ႕လပးၾကညးပါ။

အလြာလကး အစအစဥးတက စဥးမယးဆရငး z-index ကသေပရပါတယး။ ဆလတာက ဘယး content က

ဘယး content ေပၚ ထပးၿပတငးမယး… ၿပရငး ဘယး content က ေရ႕ဆက ထပးမယး.. ေနာကးဆကထပးမယးဆတာက

သတးမတးဖ႔အတြကးပၿဖစးပါတယး။

တနးဖအငယးဆ index က ေအာကးဆမာၿဖစးၿပ အၾကဆကေတာ အေပၚဆမာၿဖစးပါတယး။


#ten_of_diamonds {

z-index (Layers)



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>



<head>



</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>



အကယး၍ King ဖက မအေပၚဆက တငးခငးတယးဆရငး z-index: 4 အာ 6 ဆၿပေၿပာငးလကးရငး

အေပၚဆကေရာကးသြာပါလမးမယး။

-------------------------------------------------------xxx CSS xxx----------------------------------------------------------

အခအခနးကစၿပေတာ အေပၚက ကၽြနးေတားတ႔ ေလလာခ႔တာေတြကေပါငးၿပေတာ Web Page ေလေတြ

ဖနးတ ၾကညးပါမယး။

Final Result :- လပးေဆာငးထာတ႔ ပက ဥပမာယၿပေတာ အ႔အတငး ဖနးတႏငးေအာငးပါ။

Creating Web Design HTML + CSS

HTML န႔ CSS ကေပါငးၿပ Web Page ဖနးတမယး



အေပၚက ပက ပထမဥစြာ ကၽြနးေတားတ႔ ၾကညးရမာက ဒ 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>

<head>





}

#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: Zawgyi-

One; ဆၿပထညးသြငးေပထာတာပါ။

Header Container က ေနာကးခအေရာငး #ccc လညးေကာငး၊ Header အာ ေနာကးခအေရာငး #ddd ဟ၍

လညးေကာငး ေပထာပါတယး။ Header အကယးကေတာ 860px ဆၿပ သထာပါတယး။ ေနာကးဆတစးခကေတာ

header မ h1 ထက စာသာက margin အာ 0 အၿဖငးေပထာပါတယး။

ေနာကးတစးဆငးတကးပါမယး။ Menu အတြကးပၿဖစးပါတယး။


<html>

<head>




</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>

</body>

</html>

Menu ထမာကေတာ Home, About, Services, Contact us ဆတာေတြက unordered list ၿဖငး group ဖြ႕ထာပါတယး။



body,td,th {


}

h1,h2,h3,h4,h5,h6 {


}

#head-container

{

color: #000;

background: #ccc;

}



#header

{

margin: 0 auto;

width: 860px;

padding: 20px;

background: #ddd;

}


#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;

}



#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>



<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> </p> <p>အေပၚက Home ၊ About ၊ Services ၊ Contact us ဆတ႔ေနရာကေတာ Menu bar လ႔ပေခၚပါတယး..</p> <p> </p> <p> </p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ဒေနရာကေတာ Widget လေနရာပါပ.. ကၽြနးေတားတ႔ရ႕ အၿခာ blogroll ေတြ၊ Javascript န႔ထညးသြငးရ႔ Counter ေလေတြ.. စသညးၿဖငးေပါ႔...</p> </div> </div> </div> </body> </html>

ဆတာ space ေနရာအတြကးပါ။ ၿပေတာ content-container အာ 100% အၿဖစးယထာကာ content-

container3 အာ 900px ယထာပါတယး။



body,td,th {


}

h1,h2,h3,h4,h5,h6 {




}

#head-container

{

color: #000;

background: #ccc;

}

#header

{

margin: 0 auto;

width: 860px;

padding: 20px;

background: #ddd;

}


#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

{


display: inline;

}

#menu li a

{

display: block;

float: left;

padding: 5px 10px;

color: #fff;



}


#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

{

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> <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> </p> <p>အေပၚက Home ၊ About ၊ Services ၊ Contact us ဆတ႔ေနရာကေတာ Menu bar လ႔ပေခၚပါတယး..</p> <p> </p> <p> </p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ဒေနရာကေတာ Widget လေနရာပါပ.. ကၽြနးေတားတ႔ရ႕ အၿခာ blogroll ေတြ၊



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>



/*

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 {


}

h1,h2,h3,h4,h5,h6 {


}

#head-container

{

color: #000;

background: #ccc;

}



#header

{

margin: 0 auto;

width: 860px;

padding: 20px;

background: #ddd;

}


#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

{


display: inline;

}



#menu li a

{

display: block;

float: left;

padding: 5px 10px;

color: #fff;



}


#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

{



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%;

}



ေနာကးဆ ရလဒးကေတာ :-

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

html css (myanmar)

Documents