Web Design's note: HTML

Showing posts with label HTML. Show all posts

Monday, July 15, 2013

HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>

Basic Tags

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

တခ်ိဳ.ေသာ characters မ်ားကို Web page မွာေဖာ္ျပဖို.အတြက္ html မွာ character အတိုင္းေရးလို.မရပါဘူး။ ဥပမာ HTML document တြင္ <p> The answer of 3 < 5 is ture. </p> လို.ေရးလိုက္ပါက less than (<) ကို HTML တြင္ tag အျဖစ္ပဲ မွတ္ယူသြားပါတယ္။ Browser ထိုေၾကာင့္ ၄င္း character ျဖင့္ ေဖာ္ျပလိုပါက (<) ၏ Entity name ျဖစ္ေသာ < သို.မပာုတ္ Entity number ျဖစ္ေသာ #160; ျဖင့္အသံုးျပဳ ေရးသားရပါတယ္။ word တစ္ခုႏွင္ တစ္ခုၾကား space အမ်ားၾကီးထားခ်င္လ်င္လည္း HTML entity ကို အသံုးျပဳရပါတယ္။

Example:

<p> The answer of 3 < 5 is true. </p> or <p> The answer of 3 #160; 5 is true. </p>

ေအာက္တြင္ HTML useful character entities မ်ားကို ေဖာ္ျပေပးထားပါတယ္။ Entity name ႏွင့္ Entity number မ်ားမွ မိမိႏွစ္ သက္ရာကို အသံုးျပဳႏိုင္ပါတယ္။

HTML Chapter 13 _ Making Layout

HTML Layouts – Using <div>

Web page တစ္ခုစလုပ္ဖို. Layout plan ကို Step by step စဥ္းစားရေအာင္...

ပထမဆံုး view point အတြက္စဥ္းစားၾကည့္ပါမယ္။ Webpage မ်ားကို browser မွာၾကည့္တဲ့အခါမွာ horizontal scholl bar မထြက္ဖို. အလြန္ အေရးၾကီးပါတယ္။ ဒါေၾကာင့္ ယခုေခတ္ computers မ်ား၏ monitor resolution ကိုသံုးသပ္ၾကည့္ပါမယ္။ အနည္းဆံုး monitor resolution ကေတာ့ 1024x768 လို.ေယဘုယ် သတ္မွတ္ႏိုင္ပါတယ္။ ဥပမာ က်ေနာ္တို. Layout ခ်တဲ့အခါ Width ကို 1300 px နဲ.တာ layout လုပ္လိုက္မယ္ဆိုရင္ horizontal scholl bar ထြက္လာျပီး user ေတြသံုးရတာ အဆင္မေျပ ျဖစ္သြား ႏိုင္ပါတယ္။ ဒါေၾကာင့္ Web Designer ေတာ္ေတာ္မ်ားမ်ားက monitor အာလံုးႏွင့္ ကိုက္ညီေအာင္ Width ကို 960 px ျဖင့္ ဆြဲၾကပါတယ္။

Website ေတြမွာ ေယဘုယ် အားျဖင့္ Header, Content, Footer ပာူ၍ သံုးပိုင္းပါ၀င္ ပါတယ္။ Header တြင္ Logo, Navigation စသည္တို. ပါ၀င္ေလ့ရွိျပီး Content မွာေတာ့ အေၾကာင္းအရာမ်ားကို paragraphs, images, photos, videos တို.ျဖင့္ ေဖာ္ျပေလ့ရွိပါတယ္။ Footer တြင္ေတာ့ ပံုမွန္အားျဖင့္ website ရဲ့ copy right ကို ေရးသားထားေလ့ ရွိပါတယ္။

<div> ျဖင့္ layout မလုပ္ခင္ က်ေနာ္တို. Sketch layout ေလးလုပ္ၾကည့္ ရေအာင္...

HTML Comment  Tag

Comment tag ကို အမွတ္အသားျပဳလုပ္ေသာ အခါတြင္သံုးပါတယ္။ HTML တြင္ comment tag ကို ေရးေပမယ့္ Browser မွာမေဖာ္ျပ ေပးပါဘူး။ comment ေရးသားျခင္း ၏ေကာင္းေသာ အခ်က္မ်ားက HTML document ကို edit ျပန္လုပ္ေသာ အခါ ရွာေဖြရလြယ္ကူပါတယ္။ web page တစ္ခု ေဆာက္ရာတြင္ HTML source code ေပါင္းမ်ားစြာ ျဖင့္ ျပဳလုပ္ရေသာေၾကာင့္ edit လုပ္ရာတြင္ ရွာေဖြရ ၾကာတတ္ပါတယ္။ comment tag သံုးထားျခင္းျဖင့္ ရွာေဖြရလြယ္ကူပါတယ္။

Example:

<div id="wrapper">

<div id="header"> This is header </div>

<div id="content"> This is content </div>

<div id="footer"> This is footer </div>

</div>

Website Layout

Website အမ်ားစုသည္ ၄င္းတို.၏ content မ်ားကို magazine, newspaper တို.ကဲ့သို. multiple columns ျဖင့္ ေဖာ္ျပေလ့ ရွိပါတယ္။ webpage မွာ multiple columns ဖန္တီးဖို. <div> သို.မပာုတ္ <table> elements မ်ားကို သံုးရပါတယ္။ ၄င္း <div> ႏွင့္ <table> element တို.၏ Position အတြက္ CSS ကို အသံုးျပဳရပါတယ္။ <tabel> ျဖင့္ layout ခ်ႏိုင္ ေသာ္လည္း table မွာ ဇယားျဖင့္ ျပရေသာ (tabular data) မ်ားအတြက္ အသံုးျပဳဖို.ျဖစ္ျပီး Layout tool မပာုတ္ပါဘူး။

Webpage တစ္ခု၏ layout ကို သံုးပိုင္း ပိုင္းျခားျပီး ဆြဲလ်င္ အလြန္လြယ္ကူပါတယ္။ မည္သည့္ website ပဲျဖစ္ပါေစ အေျခခံ အားျဖင့္ သံုပိုင္းပါ၀င္ပါတယ္။ ၄င္းတို.မွာ header, content, footer တို.ပဲျဖစ္ပါတယ္။

Block Level Elements

Block level element ဆိုသည္မွာ content မ်ားကို Browser တြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္း၍ ေဖာ္ျပေစေသာ tags မ်ားကို ေခၚပါတယ္။ Example: <h1>, <p>, <ul>, <table> ဥပမာႏွင့္ ရွင္းျပရလ်င္...

က်ေနာ္ တို. HTML document မွာ <h1> This is heading </h1><p> This is paragraph </p> လို. ကပ္ေရးထားတယ္ဆိုပါစို.။

Browser မွာ ေအာက္ပါပံု အတိုင္ တစ္ေၾကာင္းစီပဲ ျပပါတယ္။

This is heading

This is paragraph

ဘာလို.လဲဆိုေတာ့ block elements မ်ား ရဲ့ အစ က အေရွ့ element ၏ အဆံု မွ ကပ္ျပီး browser မွာေဖာ္ျပေလ့မရွိပါဘူး။ ဒါေၾကာင့္ <p> tag အတြင္းမွာ ပါ၀င္ တဲ့ content က <h1> tag မွာေရးထားတဲ့ content ေဘးကပ္လ်က္ မေဖာ္ျပပဲ ေနာက္တစ္ေၾကာင္းမွ စျပီး ေဖာ္ျပျခင္းျဖစ္ပါတယ္။ HTML document တြင္ တစ္ေၾကာင္းတည္း ကပ္ေရးထားေသာ္လည္း browser တြင္ေဖာ္ျပေသာ အခါတြင္ ေနာက္တစ္ေၾကာင္းသို. ဆင္းျပီးမွသာ ေဖာ္ျပေပး ပါတယ္။

HTML Chapter 10 _ Color Value

HTML တြင္ color ကို Red, Green, Blue တို.၏ တန္ဖိုးျဖင့္ ေပါင္းစပ္ထားပါတယ္။ ၄င္းတို.၏ပါ၀င္မွဳ ပမာဏတန္ဖိုးကို Hexadecimal (HEX) နဲ.သတ္မွတ္ပါတယ္။ color တန္ဖိုး အနည္းဆံုးမွာ 0 (HEX တန္ဖိုးျဖင့္ ေဖာ္ျပပါက 00) ျဖစ္ပါတယ္။ အမ်ားဆံုး မွာ 255 (HEX တန္ဖိုးျဖင့္ ေဖာ္ျပပါက FF) ျဖစ္ ပါတယ္။
HTML document တြင္ အသံုးျပဳမည့္ color အေရာင္ကို HEX ျဖင့္ ေရးလိုပါက # ႏွင့္တြဲျပီး ေဖာ္ျပရပါတယ္။ Red, Green, Blue တို.ကို ရည္ညြန္းေသာ rgb( - ,- , - ) ပံုစံျဖင့္လည္း ေရးသားႏိုင္သည့္အျပင္ color ၏ အမည္ ျဖင့္လည္း ေရသားႏိုင္ပါတယ္။

HTML တြင္ #000000 ၏တန္ဖိုးသည္ အနက္ေရာင္ ျဖစ္ပါတယ္။ ေရွ့ဆံုးမွ သုည ႏွစ္လံုး (00) သည္ အနီေရာင္ ရဲ့ HEX တန္ဖိုးျဖစ္ျပီး၊ အလယ္မွ 00 မွာ အစိမ္းေရာင္၏ HEX တန္ဖိုး ျဖစ္ကာ ေနာက္ဆံုး 00 မွာ အျပာေရာင္ ၏ ပါ၀င္မွဳ ပမာဏ တန္ဖိုးျဖစ္ပါတယ္။ HTML တြင္ color ၏ အတိုေကာက္မွာ RGB ျဖစ္ပါတယ္။

HTML Chapter 9 _ Styles (CSS)

HTML တြင္ CSS (Cascading Style Sheets) ကို HTML elements မ်ားရဲ့ style information ေရးသားဖို. အတြက္အသံုးျပဳပါတယ္။ HTML တြင္ CSS ကိုပံုစံ သံုးမ်ိဳး ျဖင့္ ေရးသားႏိုင္ပါတယ္။ ၄င္းတို.မွာ_

Inline: <> tag မ်ားတြင္ style attribute ျဖင့္ေရးျခင္း
Internal: <head> ႏွင့္ </head> အတြင္းမွာ <style>element ျဖင့္ ေရးျခင္း
External: CSS file တစ္ခုအေနျဖင့္ သီးသန္.ေရးသားထားျပီးမွ <head> section မွ <link> ျဖင့္ ခ်ိတ္ဆက္ အသံုးျပဳျခင္းတို. ျဖစ္ပါတယ္။

HTML Basic chapters မ်ားကို အလံုးစံု ေလ့လာျပီးပါက CSS အေၾကာင္းကို ဆက္လက္ ေလ့လာ ႏိုင္ဖို. post ေရးတင္ပါမယ္။ ဒီမွာေတာ့ HTML ကို အဓိကထားေျပာတာျဖစ္တဲ့ အတြက္ HTML tag မွာ ေရးသားရေသာ ပံုစံ ႏွင့္ CSS file ျဖင့္ ခ်ိတ္ဆက္ပံုကို ပဲ ရွင္းျပထား ပါတယ္။

Inline Style

Inline Style ကို Element တစ္ခုတည္းမွာပဲ unique style ေတြ ေျပာင္းလဲဖုိ.အတြက္ အသံုးျပဳပါတယ္။ ထို.ေၾကာင့္ CSS ကို မိမိ ျပဳလုပ္လိုေသာ HTML element ၏ Start Tag အတြင္းတြင္ style attribute ျဖင့္ ထည့္သြင္းေရးသားရပါတယ္။ Style attribute တြင္ CSS ၏ properties မ်ားအားလံုးကို အသံုးျပဳေရးသား ႏိုင္ပါတယ္။

HTML Chapter 8 _ HTML Forms

HTML form တြင္ input elements မ်ားျဖစ္ေသာ text fields, checkboxs, radio-buttons, submit buttons စသည္တို. အျပင္ select lists, textarea, fieldset, legend and label elements ေတြလည္း ပါ၀င္ႏိုင္ ပါတယ္။ HTML form ကို <form> tag ျဖင့္ ေရးရပါတယ္။ <form> tag ထဲမွာမွ input elements ေတြအတြက္ <input type=”text”> tag ျဖင့္ ေရးပါတယ္။ တစ္ခုျခင္းစီ ကို example မ်ားျဖင့္ ေလ့လာၾကည့္ပါ။

Text Fields

<!DOCTYPE html>
<html>
<body>
    <form>
    First name: <input type="text" name="firstname"><br><br>
    Last name:<input type="text" name="lastname">
    </form>
</body>
</html>

HTML Chapter 7 _ Lists

Unordered Lists

Unordered list ကို <ul> tag ျဖင့္ စေရးရျပီး ၄င္း tag အတြင္းမွာမွ list ျဖင့္ ေဖာ္ျပ လိုေသာ syntax မ်ားကို <li> tag မ်ားျဖင့္ ေရးရပါတယ္။ Unordered lists မ်ားကို Browser တြင္ bullets မ်ားျဖင့္ ေဖာ္ျပေပးပါတယ္။

Example:

<!DOCTYPE html>
<html>
<body>
    <ul>
    <li>Acer</li>
    <li>Dell</li>
    <li>Toshiba</li>
    </ul>
</body>
</html>

HTML Chapter 6 _ HTML Table

HTML document မွာ table ကို <table> tag နဲ.ေဖာ္ျပရပါတယ္။
Table တစ္ခုမွာ Rows ႏွင့္ Data cells (column) ဆိုျပီး ၂ ပိုင္း ပါ၀င္ ပါတယ္။ Table ၏ Row အတြက္ <tr> tag ကို အသံုးျပဳျပီး Data cell အတြက္ <td> tag ကိုအသံုးျပဳရပါတယ္။ td ဆိုသည္မွာ table data ကိုရည္ညြန္းျခင္း ျဖစ္ပါတယ္။ <td> tag အတြင္းမွာ text, links, images, lists, forms, စသည္တို.ကိုထည့္သြင္းေဖာ္ျပ ႏိုင္သည့္အျပင္ ေနာက္ထပ္ tables မ်ားပါ ထပ္ထည့္ ႏိုင္ပါတယ္။
Table တစ္ခုကို HTML တြင္ စေရးေတာ့မည္ဆုိလ်င္...

<table> tag ကို အရင္ ေရးရပါတယ္။
<table> ႏွင့္ </table> ထဲမွာမွ Row <tr> tag ကို အျမဲတမ္းအရင္ဦးဆံုး ေရးရပါတယ္။
<tr> ႏွင့္ </tr> အတြင္းမွာ မွ data cell <td> ကိုေရးရပါတယ္။ Data cell (column) အေရအတြက္ အမ်ားၾကီးထည့္လို.ပါက <td></td> tags မ်ားကို ၾကိမ္ၾကိမ္ အသံုးျပဳျပီး ေရးသားႏိုင္ပါတယ္။

Table ၏ boder attribute ကိုေတာ့ border နဲပဲေရးသားျပီး border ကို web page တြင္ မျမင္ခ်င္ပါက border တန္ဖို.ကို 0 (zero) ထည့္ေပးရပါတယ္။

HTML Chapter 5 _ HTML Image

HTML တြင္ Image အတြက္ <img> tag အကိုအသံုးျပဳရျပီး ၄င္း၏ attribute မွာ src ျဖစ္ပါတယ္။ src ဆိုသည္မွာ Soruce ကို ရည္ညြန္းျခင္း ျဖစ္ပါတယ္။ <img> tag တြင္ end tag မရွိပါ။

Syntax of HTML image: <img src="url" alt="some_text">

url ဆိုသည္မွာ image file တည္ရွိရာ ေနရာ ကိုေျပာျခင္းျဖစ္ပါတယ္။ alt ေနရာမွာေတာ့ မိမိ ေပးခ်င္ေသာ image ၏ နာမည္ ကိုေရးရမွာျဖစ္ပါတယ္။ image file ၏ နာမည္ ကို ေျပာတာမပာုတ္ပါဘူး။ Browser မွ image ကို loading လုပ္ျပီး မျပေပးႏိုင္တဲ့ အေျခအေနမ်ိဳးမွာ alt မွာ ေရးထားေသာ နာမည္ ကို ေဖာ္ျပေပးမွာ ျဖစ္ပါတယ္။

Example:

<img src="image/yourphotoname.jpg" alt="This is my photo">

အထက္ပါ example မွ image/yourphotoname.jpg တြင္ image ဆိုသည္မွာ photo သို.မပာုတ္ image ထည့္ထားေသာ folder name ျဖစ္ျပီး၊ yourphotoname ေနရာတြင္ မိမိ အသံုးျပဳမည့္ photofile ၏ name ကိုထည့္းေပးရမွာပါ။ .jpg ေနရာမွာ တကယ္လို. မိမိသံုးတဲ့ photo file က png အမ်ိဳးအစားျဖစ္လ်င္ .png လို.ေရးရျပီး gif ျဖစ္လ်င္ .gif လို. ေရးရမွာပါ။ ထို file extention မမွန္လ်င္ Browser က ပံုမ်ားကို မေဖာ္ျပေပးႏိုင္ပါဘူး။ ထို.ေၾကာင့္ မိမိ၏ folder name, image file name ႏွင့္ file extention တို. မွန္ကန္ေအာင္ ေရးဖို. လိုအပ္ပါတယ္။

HTML Chapter 4_Element, Attribute, Hyperlink

HTML Elements

Element ဆိုသည္မွာ Start tag က ေနစ၍ end tag ဆံုးသည့္ တိုင္ေအာင္ ပါ၀င္မွဳအားလံုးကို ေခၚပါတယ္။

အထက္ပါ ပံုတြင္ start tag <p> မွ စျပီး end tag </p> အဆံုးထိ တစ္ေၾကာင္းလံုးကို element လို.ေခၚပါတယ္။ <p> tag ျဖင့္ ေရးထားေသာေၾကာင့္ <p> element လို.ေခၚပါတယ္။

Empty HTML Element

Content မပါ၀င္ေသာ HTML element ေတြကိုေတာ့ empty element လို.ေခၚပါတယ္။ ဥပမာ <br> ႏွင့္ <hr> တို.ျဖစ္ၾက ပါတယ္။ <br> သည္ empty html element ျဖစ္ျပီး ၄င္းသည္ keyboard မွ enter key function ကဲ့သို. လုပ္ေဆာင္ေပးပါတယ္။ <hr> tag ကို horizontal line ျပဳလုပ္ရာမွာ သံုးပါတယ္။ ၄င္းတုိ.သည္ Empty html element မ်ား ျဖစ္ေသာေၾကာင့္ end tags </br>, </hr> မ်ား မရွိပါ။

HTML Chapter 3_Writing HTML Using notepad or notepad++

က်ေနာ္တို. Notepad သို.မပာုတ္ notepad++ ကို အသံုးျပဳျပီး web page တစ္ခုေလာက္ ဖန္တီးၾကည့္ရေအာင္...

Notepad++ မရွိေသးေသာ သူမ်ား http://notepad-plus-plus.org/ မွာ download ရယူႏိုင္ပါတယ္။ HTML ကိုေလ့က်င့္ ရာတြင္ notepad++ ျဖင့္ ေရးသားေလ့က်င့္သြားဖို. တိုက္တြန္းပါတယ္။ HTML ကို စတင္ ေလ့လာသူမ်ား အတြက္ notepad သို. Notepad++ ကအေကာင္းဆံုးပါပဲ။ http://www.w3schools.com တြင္လည္း Adobe Dreamweaver ကဲ့သို. professional HTML editor ေတြအမ်ားၾကီး ရွိေပမယ့္ simple text editor မ်ား ျဖင့္ HTML ေလ့လာျခင္းကို ေကာင္းမြန္တဲ့ နည္းလမ္း အျဖစ္ မွတ္ခ်က္ ေပးထားပါတယ္။

HTML document တစ္ခု ကို ေအာက္ပါ Steps မ်ား အတိုင္း စနစ္တက် ေရးသြားပါမယ္ ...

HTML Chapter 2_How to write HTML Web page

HTML document တစ္ခုကို ေရးသား ရာတြင္....

<!DOCTYPE> ကို အရင္ဆံုးေရးရပါတယ္။
<html> start tag ႏွင့္ </html> end tag တို. ပါရွိရပါမယ္။
<html> ႏွင့္ </html> အတြင္းတြင္ <head> tag ႏွင့္<body> tag တို.ကိုေရးရပါတယ္။

HTML Chapter 1_ Introduction

HTML အေၾကာင္းကို Examples, tutorials မ်ားႏွင့္ အတူ Chapters 15 ခု ျဖင့္ blog မွာ post လုပ္သြားပါမယ္။ ၄င္း ၁၅ ခန္းလံုးကို ေလ့လာျပီးပါက HTML အေၾကာင္းကို ေတာ္ေတာ္ေလး နာလည္ျပီး ေရးတတ္သြားမွာပါ။ Web designer တစ္ေယာက္အတြက္ HTML ကအေရးၾကီးဆံုးပါပဲ။ ဒါေၾကာင့္ အရွင္းဆံုး ျဖစ္ေအာင္ အတတ္ႏိုင္ဆံုး ၾကိဳးစားျပီး ေရးသားထား ပါတယ္။ တစ္ေန.ကို တစ္ခန္းႏွဳန္းျဖင့္ ေလ့လာသြားပါက စုစုေပါင္း ၁၅ ရက္ပဲ အခ်ိန္ေပးရမွာပါ။ ေလ့လာမွဳ ျပီးဆံုးပါကလည္း Web sites မ်ားေရးဆက္လက္ ေရးသားေလ့က်င့္ ရန္အတြက္ HTML tags မ်ား ၏ Reference post ကိုေရးေပးသြားမွာပါ။

What is HTML?

HTML ၏ အျပည့္အစံုမွာ Hyper Text Markup Language ျဖစ္ပါတယ္။

HTML သည္ Markup language အမ်ိဳးအစား ျဖစ္ပါတယ္။

Markup language ဆိုသည္မွာ a set of markup tags အမ်ိဳးအစားျဖစ္ပါတယ္။

Tags ေတြက document မွာ ပါမည့္ content (အေၾကာင္းအရာ) ေတြကို ေဖာ္ျပေပးဖို. ျဖစ္ပါတယ္၊ တနည္းေျပာရလ်င္ Browser မွာ ေဖာ္ျပဖို.အတြက္ လုပ္ေဆာင္ေပးပါတယ္။

HTML document တစ္ခုတြင္ HTML tag နဲ. Plain text ဆိုျပီး ၂ ခုပါ၀င္ပါတယ္။

HTML Content

Chapter 1 _ Introduction

What is HTML?
Markup Tag (HTML tag)
HTML Page Structure

Chapter 2 _ Making Web page

The <!DOCTYPE> Declaration
The <html> tag
The <head> tag
The <body> tag

Chapter 3

Writing HTML using notepad or notepad++

Chapter 4

Element
Attribute
Hyperlink

Chapter 5

Image

Chapter 6

Table

Chapter 7 _ Lists

Unordered Lists
Different Types of Unordered Lists
Ordered Lists
Different Type of Ordered Lists
Nested List
Description Lists

Chapter 8 _ Forms

Text Fields
Password Field
Radio Buttons
Checkboxes
Submit Button

Chapter 9 _ Styles (CSS)

Inline Style
Internal Style Sheet
External Style sheet

Chapter 10

Color Value

Chapter 11

Block level elements
Inline elements
<div>
<span>

Chapter 12

Comment  Tag
Website layout

Chapter 13

HTML Layouts_using <div>

Chapter 14

Entities

Chapter 15

Quick list

Monday, July 15, 2013

HTML Basic Document

Basic Tags

Example:

HTML Layouts – Using <div>

HTML Comment  Tag

Example:

Website Layout

Block Level Elements

This is heading

Sunday, July 14, 2013

Inline Style

Text Fields

Saturday, July 13, 2013

Unordered Lists

Example:

Thursday, July 11, 2013

Example:

<img src="image/yourphotoname.jpg" alt="This is my photo">

Wednesday, July 10, 2013

HTML Elements

Empty HTML Element

Tuesday, July 9, 2013

Monday, July 8, 2013

What is HTML?