Thursday, August 13, 2015

Html Css Note

က်​ေတာ္​႐ွမ္​းျပန္​တံုးက မွတ္​ထားတဲ့note​​ေလး​ေတြ
အက်ိဳး႐ွိမယ္​ထင္​လုိ႔ တင္​​ေပးလိုက္​ပီဗ်ိဳ႕ :-)

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow
********
စာေရးျခင္း*
********
အန္းတားေခါက္တာနဲ႕ေနာက္တစ္ေျကာင္းအလုိလို ဆင္းျခင္ရင္ pre ကိုသံုး

<hr width="30%" align="center" size="3" noshade color="#0000FF" /> လိုင္းတစ္ေျကာင္းသားျခင္း


စာေျကာင္းတစ္ေျကာင္းဆင္း <br/>
<nobr> စာေတြ

fax မွာ pointer  ေထာက္တာနဲ႕ facsmile လို႕ျပေစမယ္
<abbr title="facsimile">fax</abbr>

<cite>citation text</cite>က်မ္းကိုးကားခ်က္ေတြမွာသံုး

<font>color, face, font-weight, point-size, size
font-weight မ်ားေလ bold မ်ားေလ

"" ေလးထည့္ေပးခ်င္ရင္
<q cite="http://www.worldwidemyanmar.com/">To be or not to be.</q>

၂ square ကိုသံုးခ်င္ရင္<sup> ေအာက္ကိုထားခ်င္ရင္<sub>

html code ေတြျပန္လည္ေဖာ္ျပဖို႕<code>

စာလံုးကိုအလယ္ကျဖတ္ခ်င္ရင္<s>

<tt> text ေတြကို fix  ျဖစ္ေအာင္လုပ္ျခင္း

စာသားနည္းနည္းျကီးသြားတယ္
<body> Big Text <br/> <big>Big Text</big> </body>

စာလံုး သတ္မွတ္ <dnf><em>

စမ္ပယ္<samp>

အေလးအနက္ထားေျပာျကားျခင္း<strong>

စာသားေတြကို မွိတ္လိုက္ဖြင့္လိုက္လုပ္ျခင္ရင္<blink>

<kbd>ယူစာက ကီးဘုတ္ကေနပီးေတာ့ ဒလိကီးကိုရို္က္ေပးဖို႕ေျပာခ်င္ရင္သံုး
<body> <p>Hold down <kbd>CTRL</kbd>, <kbd>ALT</kbd>, and <kbd>DELETE</kbd>, then select Task Manager</p> </body>

#=============#
#bullet and numbering #
#=============#
<ul><ol><dl> သံုးခုပါ၀င္တယ္
<dl> definition list
========
<dl>
<dt>Term 1</dt>
<dd>Term 1 definition</dd>
<dt>Term 2</dt>
<dd>Term 2 definition</dd>
</dl>
<ol>order list
========
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

unorder list<ul>

စိတ္ျကိုက္ျပင္ဆင္ျခင္း
<ol type="A" start="3">
ဘူးလတ္ကေလးေတြဘယ္ကစတတ္ခ်င္လည္း start="3"ဒီမွာထည့္
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]
<!--your text -->

pointer ေထာက္တာနဲ႕ စာသားထြက္လာျခင္ရင္
+++++++++++++++++
<p><abbr title="Myo Thant Kyaw">Thar Thar</abbr>was born in 1996</p>
<base />
****
လကးရွိ Page တြငးရွိေသာ Link အာ့လုဵ့ရဲ႕ Default Address သတးမွတး။
eg
<head>
<base href="http://www.worldwidemyanmar.com/images/" /> <base target="_blank" />
</head>

<link /> Document နဲ႔ ၿပင္ပက Css ဖိုင္နဲ႕ခ်ိတ္ရင္သံုး
********
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<meta /> html document နဲ႕ပတ္သတ္တဲ့အေျကာင္းအရာမ်ား
********
<style> document sytle သတ္မွတ္
******
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>





##########
#Form Element#
##########

body element
********
Form
===
<form method="get" action="http://www.worldwidemyanmar.com/query" enctype="application/x-www-form-urlencoded">
<input type="password" name="brb" /> </form>

<button>
====
<button type="submit" name="helpbutton" tabindex="1">
<img src="helpicon.gif" align="middle" /> Get the
<strong>HELP</strong> that you need here... </button>

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

<option>(ျကိုက္နွစ္သက္ရာေရြးခ်ယ္ခိုင္းတာပါ)
=====
<form>
<select name="list1" size="3" multiple>
<option value="opt1">option1 </option>
<option value="opt2">option2 </option>
<option selected value="opt3">option3 </option>
</select>
</form>

<fieldset>(groug ထဲမွာေရဒီယိုေရြးျခင္း)
=========
<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>

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

<select>(content value ေတြကို ျပ ျခင္း multiple and single)
=====
<form>
     <select name="list1" size="3" multiple>
      <option value="opt1">option1 </option>
       <option value="opt2">option2 </option>
      <option selected value="opt3">option3 </option>
</select>
</form>

selection list ေတြကို group လုပ္<optgroup>
========
<form>
    <select name="list1" size="3" multiple> 
    <option value="opt1">option1 </option>
     <option value= "opt2">option2 </option>
      <option selected value="opt3">option3 </option>
</select>
</form>

<textarea>(text box တစ္ခုတည္ေဆာက္တာပါ)
======
<form>
<textarea name="brb" rows="3" cols="40"> Default TEXTAREA value goes here </textarea>
</form>
###########
#Input Type မ်ား#
###########
button
=====
<form>
<input type="button" value="Submit" name="brb" onClick="test1(this.form)" /> <input type="reset" value="Reset" />
</form>

radio
====
<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 />Rock!<br />
</form>

reset(form ထဲကစာမ်ားကိုရွင္း )
===
<form>
<input type="reset" value="clear the form" />
</form>

CheckBox(အမွန္ခ်စ္တက္ျခင္း
======
<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 ထည့္သံုးျခင္း)
=====
<form>
<input name="r" type="range" min="1" max="11" value="9">
<input type="submit" value="Go">
</form>

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

file(browse button ဖန္တီးျခင္း)
+++
<form method="post" action="action.cgi" enctype="multipart/form-data">
<input type="file" name="filename" />
</form>

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

readonly(textbox ထဲမွာစာသားျပျခင္း )
=======
<form>
<input type="readonly" name="ron" value="Readonly Value" />
</form>

text
===
<form>
<input type="text" value="brb was here" name="text1" size="10" maxlength="25" /> </form>




=====
#Table#
=====
<table align=?> ------center, left,right
<table background=?>--images
=========
<table background="flower.gif"

<table cellpadding=?>--Values=integers(cell တစ္ခု ရဲ႕ေဘာင္ေတြရဲအကြာအေ၀းကိုက်ဲေပးျခင္း)
=======
<table width="224" border="1" cellpadding="20" cellspacing="10" bordercolor="#0000FF">

table bordercolor=?
========

<table bordercolordark=?>(3d ေဘာ္ဒါကာလာ)

<table bordercolorlight=?>(၃dအေရာင့္ေဖ်ာ့္မယ္)

<table cols=?>(မိမိ ေတဘယ္ထဲမွာ ေကာ္လံဘယ္နွစ္ခုရွိလည္းျပျခင္း)
<TABLE WIDTH="600" COLS="4" BORDER="1" >

COLSPAN(colouum ေတြေပါင္းျခင္း)
<TR>
<TH COLSPAN="2">LEFT</TH>
<TH COLSPAN="2">RIGHT</TH>
</TR>

<caption>(table ကိုေခါင္းစဥ္ေပးဖို႕)
======
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" width="75%">
<caption align="top">Juggling Capabilities of WaterfrontPerformers
</caption>
</table>

<thead><tfoot>
======
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" cols="4" frame="vsides" rules="rows" width="75%">
<caption align="top">Juggling Capabilities of Waterfront Performers</caption>
<thead> <tr> <th>Juggler</th> <th>Pins</th>
<th>Bowling Balls</th>
<th>Flaming Baseballs</th> </tr> </thead> <tfoot> <tr> <th colspan="4">NOTE: This is only a small sample</th> </tr>
</tfoot> <tbody> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>( he is great!)</td> </tr> </tbody> </table>

<col><colgroup>(ေတဘယ္ေကာ္လန္ေတြ ၈၇ုဖြဲ႕ျခင္း)
<span>
====
<html>
<head>
<title>Style Sheets by WWM</title>
<style type="text/css">
span.test {color: #ff0000}
</style>
</head>
<body>
<p>This is just demostration for
<span class="test">Style Sheet in Body Elements </span>
by WWM</p>
</body>
</html>







<div>
====
<div align="right" class="greensection" style="color: lime">div text</div>
<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





########################
#sound ,bgsound,img,area,map,object#
########################
<img> src နဲ႕ alt နွစ္ခုရွိ
<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>

<img align=?>-----Left | Right | Top | Texttop | Middle | Absmiddle | Baseline | Bottom | Absbottom

<img width=?> <img height=?>-------

<img vspace=?> <img hspace=?>----<img src="my-computer.png" alt="Computer" hspace=”50” vspace=”20”>

img border=?>------
img usemap=>-------

web ဖြင့္ခ်ိန္ သခ်င္းသံျကားခ်င္ရင္
<bgsound src="http://www.worldwidemyanmar.com/i-want-to-understand-u.mp3" loop="infinite" delay=”5” />
depayက webဖြင့္ဖြင့္ျပီးအခ်ိန္ဘယ္ေလာက္ျကာမွာဖြင့္မွာလည္း

<map> သံုးမ်ိဳးရွိ
rect ,circle, poly
coords မွာ rect........left-x,top-y,bottom-y
circle-----center-x,center-y,radius
poly--------x1,y1,x2,y2,..xn,yn




<object >
အျခားေသာhtml  embedded content ေတြမွာအစားထိုးသံုးတယ္
APPLET, EMBED, BGSOUND, SOUND and IMG elementsေတြရဲ႕ကိုယ္စားသံုးလုိ႕ရတယ္
<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>

object attribute-----codebase codetype classid

*********************************************
ရိုက္ထည့္ထားတဲ့ content ေတြကို ပံုစံခ်ဖို႕လုပ္ေဆာင္ေပတယ္ *
*********************************************
<Address>လိပ္စာအတြေရးဖို႕
<body>
<address>1234 Nowhere St.<br />Anywhere, State 00001-9999</address>
</body>

<p align="right"> ..</p>

<marquee>
+++++++
marquee မွာ behavior, direction, bgcolor, height, width, loop, vspace, scollldelay ေတြပါ၀င္

behavior
****
scroll , slide, alternate
<marquee behavior="slide" direction=”left”>Your scrolling text goes here</marquee>
direction ေျကာင့္ဘယ္ဘက္ေရာက္ရင္ရပ္

scrollaumount
******
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee>
loop
*****
<body> <marquee behavior="scroll" direction="left" loop="1">Scroll Loop</marquee> </body>
တစ္ျကိမ္ေရြဲျပီးေျပာက္ကြယ္

scrolldelay
++++
<body> <marquee behavior="scroll" direction="left" scrolldelay="400">ScrollDelay</marquee> </body>

maqquee code အလန္းေလးမ်ား
_______________________

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

<htm>




<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- index:2;position:absolute;left:1px;top:89px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:100px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:111px;top:7px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:302px;"scrollamount="4" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:225px;top:83px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:435px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:105px;top:53px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:432px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:168px;top:69px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:369px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:130px;top:117px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:289px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:78px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:16px;top:57px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:56px;"scrollamount="5" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:300px;top:86px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:194px;"scrollamount="2" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:292px;top:10px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:251px;"scrollamount="6" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:278px;top:74px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:154px;"direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:241px;top:72px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:82px;"direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:276px;top:32px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:70px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:272px;top:15px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:334px;"direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:90px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:167px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:22px;top:76px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:12px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:89px;top:54px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="z- index:2;position:absolute;left:26px;top:72px;font-family:Cursive;font-size:14pt;color:#FF8C48;height:358px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="z- index:2;position:absolute;left:3px;top:44px;font-family:Cursive;font-size:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Scrolling text</marquee> </body>


</html>

********************************************
ၤFrameset web အတြင္းမွာ အပိုင္းေလးေတြသတ္မွတ္ခ်င္ရင္သံုး*
*********************************************
frameset မွာပါတာက
cols
***
<frameset cols="{ number | percentage | * } ,…" rows="{ number | percentage | * } ,…"> </frameset>
cols ကို number

<frame>
******
<frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize>
<frameset> ထဲက အပိုင္းေလးေတြေခၚယူဖို႕ပါ
nresize ဆိုတာ frame ကိုိစြဲျခံုတာေတြမလုပ္ဖို႕ပါ

#ရပ္​​ေစာက္​သား

0 comments:

Post a Comment