Moncy Services: มกราคม 2012

วันศุกร์ที่ 13 มกราคม พ.ศ. 2555

CSS - รู้จัก HTML

ปัจจุบัน HTML ได้พัฒนาขีดความสามารถในการทำงานให้มีประสิทธิภาพมากขึ้น คือ

1. HTML เป็นภาษามาร์คอัพมาตรฐานที่ถูกกำหนด เพื่อให้เวบบราวเซอร์รุ่นใหม่ที่พัฒนาขึ้นสามารถสนับสนุนการทำงานของ HTML ได้อย่างมีประสิทธิภาพ

2. HTML ถูกออกแบบมาเพื่อสนับสนุนการทำงานร่วมกับแอพพลิเคขั่น และโปรโตคอลของภาษา XML

3. HTML สามารถตรวจสอบข้อผิดพลาดจากการกำหนดแท็กคำสั่ง และแจ้งเตือน เหมือนคุณสมบัติหนึ่งของ XML

4. HTML สามารถทำงานร่วมกับอุปกรณ์ไร้สาย และอุปกรณ์แสดงผลข้อมูลชนิดต่างๆ ได้เป็นอย่างดี และยังมีเครื่องพิเศษช่วยให้เวบได้กับบราวเซอร์รุ่นเก่าได้อีกด้วย

5. HTML ช่วยให้นักพัฒนาเวบไม่ต้องกังวลกับการแสดงผลบนคอมพิวเตอร์ที่ต่างกัน เนื่องจากนักพัฒนาเวบสามารถจัดรูปแบบการนำเสนอด้วย CSS ได้

แท็กคำสั่ง HTML ใหม่ๆ

1. แท็ก <code>

ใช้แสดงผลโค้ดคำสั่งของคอมพิวเตอร์

html01.htm

<p>

<code>

# open the listing file<br/> unless (open (MYDATA, "data.txt"))<br/> (die "countn't open data file\n")

</code>

</p>

เป็นการกำหนดโค้ดคำสั่งแท็ก <code> แทรกไว้ในแท็ก <p> เพื่อจัดแบ่งโครงสร้างเนื้อหาให้เป็นระเบียบ

2. แท็ก <div>

หรือเรียกว่า "division" ใช้จัดกลุ่มเนื้อหาหรือขอบเขตของเนื้อหาในลักษณะบล็อก นิยมใช้คูกับ CSS เพื่อกำหนดการแสดงผลแบบกลุ่ม และสามารถแทรกข้อความแบบขีดเส้นใต้ พารากราฟ และสัญญลักษณ์ (bullet) ภายในบล็อกได้ นอกจากนี้ยังใช้เป็นวิธีจัดแบ่งโครงสร้างส่วนที่เป็นเนื้อหาและส่วนที่เป็นพื้นที่เวบ คือช่วยเวบเพจบรรจุรายละเอียดต่างๆ ได้สวยงามมากขึ้น เช่น branner, footer และ sidebar

html02.htm

<div>

<p>รายชื่อหนังสือ</p>

<li>เทคโนโลยีเชิงวัตถุ</li>

<li>Web Programming ด้วย Dramweaver CS3, PHP และ AJAX </li>

<li>การออกแบบ พัฒนา และดูแลระบบฐานข้อมูล</li>

<li>โครงสร้างข้อมูลและอัลกอริทึ่ม</li>

</lu>

3. แท็ก <span>

ใช้จัดกลุ่มเนื้อหาในพารากราฟไม่ให้ขึ้นบรรทัดใหม่ นอกจากนี้ยังสามารถแทรกแท็ก <a> เชื่อมโยงข้อความในพารากราฟ หรือแท็ก <storng> เน้นคำหรือข้อความ

html03.htm

<storng>หนังสือออกใหม่</storng>

<a href="www.ktpbook.com">เทคโนโลยีเชิงวัตถุ</a></span>

แท็ก HTML ที่ถูกลืม

1. แท็ก <font> ใช้แสดงผลควบคุมการแสดงผลข้อความ

2. แท็ก <b> ใช้แสดงผลตัวหนา ถูกแทนที่ด้วย <storng> ใน CSS และ <i> ใช้แสดงตัวเอียง ถูกแทนที่ด้วย <em> ใน CSS

3. แท็ก <table> ใช้สร้างตารางบนเวบเพจ ใช้ CSS กำหนด layout แทน เพื่อการโหลดเวบที่รวดเร็ว และโครงสร้างคำสั่งไม่ซับซ้อน

4. แท็ก <body>ใช้บรรจุ element และเนื้อหาต่างๆ บนเวบ ใช้ CSS กำหนดแอททริบิ้วต่างๆ ให้กับเนื้อหาบนเวบเพจ เช่น background, bgcolor, text, link, alink, vlink, left-margin, top-margin, margin-width และ margin-height

5. แท็ก <br/> ใช้ขึ้นบรรดทัดใหม่ให้กับข้อความ โดยไม่มีการสร้างพารากราฟใหม่ ใช้ CSS ควบคุม margin

เทคนิคการใช้งาน HTML

1. เวบเพจแต่ละหน้าควรใช้ <h1> ในการกำหนดหัวข้อเพียงแท็กเดียวเท่านั้น เพราะการกำหนด <h1> จะช่วยให้ search engine อ้างอิงไปยัง element ต่างๆ ได้เร็วยิ่งขึ้น

2. การกำหนดหัวข้อให้กับเวบเพจมีความสำคัญ เพราะเป็นส่วนแสดงถึงเนื้อหาของเวบ ต้องกำหนดหัวข้อให้สัมพันธ์กับเนื้อหาของเวบให้มากที่สุด <h1> และกำหนดหัวข้อลำดับถัดไป <h2> เป็นต้น

3. ใช้แท็ก <p> จัดข้อความในพารากราฟ

4. ใช้แท็ก <ul> แสดงผลข้อมูลแบบไม่เรียงลำดับ โดยใช้สัญญลักษณ์ในการกำหนดรายการ

5. ใช้แท็ก <ol> แสดงผลข้อมูลแบบเรียงลำดับ โดยใช้ตัวเลขในการเรียงลำดับ

6. สร้างอภิธานศัพท์ (Glossary) ประกอบด้วย คำศัพท์ (term) นิยาม (Definition) หรือคำอธิบาย (Description) โดยใช้ <dl> กำหนดรายชื่อนิยามของคำศัพท์ โดยใช้ร่วมกับแท็ก <dt> ใช้กำหนดนิยาม และแท็ก <dd>ใช้กำหนดคำอธิบายศัพท์

7. การใส่ Quotation Link ให้กับข้อความเพื่อเชื่อมโยงไปยังเวบไซต์อื่น และต้องใช้แท็ก <blockquote> สำหรับข้อความยาวมากๆ แต่หากไม่เกิน 1 บรรทัด สามารถใช้แท็ก <q> ได้เลย

8. ใช้แท็ก <cite> เพื่อกำหนดข้อมูลที่ใช้อ้างอิงชื่อหนังสือ, บทความหนังสือพิมพ์ หรือเวบไซต์และใช้แท็ก <address> เพื่อระบุข้อมูลที่ใช้ติดต่อสื่อสาร ข้อมูลผู้พัฒนาเวบ หรือข้อมูลลิขสิทธิ์

9. ใช้แท็ก HTML และ CSS เพื่อควบคุมการแสดงผลข้อความหรือภาพบนเวบเพจ

10. หากไม่กำหนดแท็ก HTML บนเวบ ให้แท็ก <div> และ <span> ก็ได้

11. สร้าง Navigation bar โดยใช้แท็ก <div> สร้างรายชื่อลิงค์เชื่อมโยงไปยังส่วนที่ต้องการ ใช้แท็ <ul> เพื่อแสดงสัญญลักษณ์ไว้หน้ารายชื่อลิงค์

12. กำหนดแท็กปิดทุกครั้ง ยกเว้นแท็กเดี่ยว เช่น <br />, <img /> เป็นต้น

13. ตรวจสอบเวบไซต์โดยใช้ W3C Validator เพื่อตรวจสอบแสดงข้อผิดพลาดของเวบให้เราทราบ

ความสำคัญ Doctype

Doctype หรือ Document Type Definition (DTD) เป็นตัวกำหนดโครงสร้างของเวบเพจ เพื่อบอกให้เวบบราวเซอร์ทราบว่า เวบเพจสร้างขึ้นใช้ภาษาและคำสั่งของ HTML รุ่นใด ชนิดใด หากต้องการแสดงผลเวบได้อย่างถูกต้อง เราต้องประกาศ Doctype ในส่วนเริ่มต้นของเพจ หรือกำหนดไว้ที่บรรทัดแรกของเอกสาร

HTML สามารถประกาศ Doctype ได้ 3 ลักษณะ คือ

1. Transitional ประกาศให้บราวเซอร์เวอร์ชั่นเก่าเข้าใจภาษา HTML เพราะอาจมีบางแท็กไม่สามารถแสดงผลกับบราวเซอร์เวอร์ชั่นเก่าได้

2. Strict ประกาศเพื่อให้สามารถตรวจสอบความถูกต้องของไวยกรณ์ตามโครงสร้างของ XML และกำหนดให้จัดรูปแบบนำเสนอด้วย CSS ในเอกสาร HTML จะใช้เป็นเวอร์ชั่น 4.01

3. Frameset ประกาศให้รู้ว่าเอกสารนี้ใช้ <frameset> ในการแบ่งหน้าต่างของบราวเซอร์เป็นเฟรมย่อย โดยเอกสารที่จะประกาศจะเป็น HTML 4.01 Frameset

วันพฤหัสบดีที่ 12 มกราคม พ.ศ. 2555

CSS - Spacial

การเพิ่มลูกเล่นพิเศษ

คือการแสดงผลแท็กที่มีลักษณะที่แตกต่างออกไปจากรูปแบบธรรมดา หรือซ่อนแท็ก หรือเปลี่ยนตัวชี้เมาส์แท็ก

display:

กำหนดรูปแบบการแสดงผล ค่าที่กำหนดได้มีดังนี้

ค่า	ความหมาย
none	ซ่อนแท็กนั้น
block	แสดงแท็กแบบเป็นบล็อก คือจะขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
inline	แสดงแท็กเหมือนอยู่ในบรรทัดเดียวกัน คือ ไม่มีการขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
list-item	แสดงแท็กเป็นรายการ คือเปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <il>
run-in	แสดงแท็กแบบ block หรือ in-line ขึ้นกับสภาพแวดล้อม
compact	แสดงแท็กแบบ block หรือ in-line ขึ้นกับสภาพแวดล้อม
table	แสดงแท็กแบบเป็นตาราง คือเปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <table>
inline-table	แสดงแท็กนั้นแบบเป็นเป็นตาราง คือเปลี่ยนแท็กนั้นให้แสดงผลเป็นแบบตาราง แต่ไม่มีการขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
table-row-group	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <tbody>
table-header-group	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <thead>
table-footer-group	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <tfoot>
table-row	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <tr>
table-column-group	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <colgroup>
table-column	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <col>
table-cell	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <td> และ <th>
table-caption	เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <caption>

specific01.htm

p { display:inline }

div { display:none }

li { display:inline }

a { width:6em; padding:0.2em 0.6em; text-decoration:none; color:white; background-color:purple; border-right;1px solid white }

a:hover {background-color:#ff3300}

</style></head>

<body>

<p>A display property </p>

<p>with a value of "inline".</p>

<div>A display property with a value of "none".</div>

<ul>

<li><a href="#">Link three</a></li>

</ul>

</body></html>

จากภาพ สีที่แตกต่างคือสีที่เอาเมาส์ไปวางค่ะ ^^

float:

ใช้กำหนดข้อความหรือภาพให้ลอยอยู่เหนือวัตถุอื่น โดยวัตถุจะลอยไม่บังข้อมูลที่ด้านล่าง เพราะข้อมูลเมื่อถึงขอบเขตพื้นที่วัตถุลอยอยู่ จะเลี่ยงขึ้นบรรทัดใหม่ทันที ค่าที่กำหนดได้ คือ left (ให้วัตถุลอยไปทางซ้าย), right (ให้วัตถุลอยอยู่ข้างขวา), none (วัตถุไม่ลอยเลย ให้แสดงผลก่อนหลังเหมือนปกติ)

specific02.htm

div { float:right; margin:0px 0px 20px 20px; padding:15px; border:1px solid black; text-align:center;}

</style></head>

<body>

<div>

<img scr="picture/img003.gif" width="100" height="80"><br>Thailand</div>

<p>

Thailand is so beautiful. Thailand is so beautiful. Thailand is so beautiful.

</p>

</body></html>

clear:

เป็นคุณสมบัติไม่ให้วัตถุลอย (floating element) กำหนดค่าได้ดังนี้ left (ไม่อนุญาติให้ลอยทางด้านซ้าย), right (ไม่อนุญาติลอยทางด้านขวา), both (ไม่อนุญาติให้ลอยทั้ง 2 ด้าน) และ none (อนุญาติให้ลอยได้ทั้ง 2 ด้าน)

specific03.htm

span {float:left; width:0.7em; font-size:400%; font-family:algerian, courier;}

</style>

</head><body>

<span>T</span><p>hailand is so beautiful. Thailand is so beautiful.

Thailand is so beautiful. Thailand is so beautiful. Thailand is so beautiful.

Thailand is so beautiful.

</p>

<span>T</span><p style="clear:left">hailand is so beautiful.

Thailand is so beautiful. Thailand is so beautiful. Thailand is

so beautiful. Thailand is so beautiful. Thailand is so

beautiful.

</p>

</body></html>

visibility:

ใช้ซ่อนหรือแสดงข้อมูล ค่าที่เป็นไปได้คือ visible (แสดงข้อมูลปกติ), hidden (ซ่อนข้อมูล ต่างจาก display:none คือ display:none จะไม่แสดงแท็กนั้นเลย แต่ visibility:hidden จะแสดงแท็กนั้น แต่เราจะเห็นเป็นพื้นที่ว่าง), collapse (ยุบข้อมูล จะใช้กับแถวหรือคอลัมน์ในตาราง คือถ้าแถวหรือคอลัมน์ไม่มีข้อมูล ก็จะถูกยุบหายไป แต่ถ้ามีข้อมูลก็จะแสดงผลปกติ

specific04.htm

<tr><td colspan="2">Choose "display:none"</td></tr>

<tr><td colspan="2">Choose "visibility:hidden"</td></tr>

<tr style="visibility:hidden"><td>hidden</td><td>hidden</td></tr>

<tr><td colspan="2">Choose "visibility:collapse"</td></tr>

<tr style="visibility:collapse"><td></td><td>collapse</td></tr>

<tr style="visibility:collapse"><td>collapse</td><td>collapse</td></tr>

</table>

จากตัวอย่าง บรรทัดที่หายไป ใช้ display:none ถ้าใช้ "visibility:hidden" จะยังเห็นแถวแต่ไม่เห็นข้อมูล ถ้าใช้ "visibility:collapse" ใน 3 แถวสุดท้ายจะเพียงแถวเดียวที่หายไป คือแถวที่ไม่มีข้อมูล

cursor:

ใช้เปลียนตัวชี้เมาส์ให้เป็นรูปต่างๆ ดังนี้คือ default, auto, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait และ help

specific05.htm

<span style="cursor:crosshair">Crosshair</span><br>

<span style="cursor:default">Default</span><br>

<span style="cursor:pointer">Pointrt</span><br>

<span style="cursor:e-resize">e-resize</span><br>

<span style="cursor:ne-resize">ne-resize</span><br>

<span style="cursor:nw-resize">nw-resize</span><br>

<span style="cursor:n-resize">n-resize</span><br>

<span style="cursor:se-resize">se-resize</span><br>

<span style="cursor:sw-resize">sw-resize</span><br>

<span style="cursor:s-resize">s-resize</span><br>

<span style="cursor:w-resize">w-resize</span><br>

จากภาพหากเอาเมาส์ไปวางตามตัวอักษรข้างบน รูปของเมาส์ก็จะเปลี่ยนไปตามความหมายของแต่ละคำค่ะ ^^

วันพุธที่ 11 มกราคม พ.ศ. 2555

CSS - Size&Position

การกำหนดขนาดและตำแหน่ง

เราสามารถวางเนื้อหาแบบระบุตำแหน่งเจาะจง หรือกำหนดขนาดความกว้างของเนื้อหา โดยใช้คุณสมบัติดังต่อไปนี้

width และ height:

ใช้กำหนดความกว้างและความยาวของตาราง กรอบข้อความ รูปภาพ และแท็ก HTML อื่นๆ มีค่าที่กำหนดได้ คือ auto (ให้บราวเซอร์กำหนดค่าที่เหมาะสมให้), % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ img {width:450px; height:230px}

max-width และ max-height:

กำหนดค่าความกว้าง ความสูงที่มากที่สุดของแท็ก HTML ใช้ในกรณีข้อมูลภายในแท็ก HTML ที่มีการเปลี่ยน ทำให้ขนาดแท็กไม่คงที่ และต้องการกำหนดแท็กให้ไม่ขยายโตเกินขนาดที่กำหนดไว้ ค่ากำหนดได้ คือ none (ไม่จำกัดขนาด/โตได้ไม่สิ้นสุด), % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดค่าเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ p {max-height:1500px}

min-width และ min-height:

ใช้กำหนดค่าความกว้าง ความสูงที่น้อยที่สุดของแท็ก HTML ใช้กรณีที่ต้องการกำหนดขนาดเล็กที่สุดของแท็ก HTML เพื่อไม่ให้แท็กมีขนาดเล็กเกินไป ค่าที่กำหนดได้ คือ % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดค่าตัวเลขเจาะจง เช่น 10px, 1 cm

รูปแบบ__ p {min-height:200px}

line-height:

กำหดระยะห่างระหว่างบรรทัด มีค่าที่เป็นไปได้ คือ normal (ตั้งค่าตามปกติ), จำนวนเท่า (เช่น 1.4 เท่าของฟอนต์ในเวลานั้น), จำนวนเปอร์เซ็นต์ (เช่น 140% เทียบเท่ากับขนาดฟอนต์ในเวลานั้น) หรือกำหนดเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ p {line-height:1.4}

p {line-height:14pt}

p {line-height:140%}

position01.htm

p.small {line-height:0.4cm; width:250px}

p.big {line-height:0.9cm; width:500px}

</style></head>

<body>

<p>

This is a paragraph with a standard line-height.

</p>

This is a paragraph with a standard line-height.

</p>

This is a paragraph with a standard line-height.

</p>

</body></html>

position:

กำหนดตำแหน่งของแท็ก กำหนดได้ 3 รูปแบบ คือ

static - แสดงในตำแหน่งที่ควรแสดง คุณสมบัตินี้ใช้ร่วมกับ left และ top ไม่ได้

relative - แสดงแท็กให้เลื่อนออกจากตำแหน่งที่ควรแสดง โดยใช้ร่วมกับ left และ top เพื่อระบุระยะที่จะเลื่อนออกไป

absolute - แสดงแท็กในตำแหน่งใดๆ ก็ได้ตามต้องการ โดยอ้างอิงจากบนซ้ายของเอกสาร HTML

position02.htm

h2.pos_left {position:relative; left:20px}

h2.pos_right {position:relative; left:20px}

h2.pos_abs {position:absolute; left:100px; top:150px; color:red}

</style>

</head><body>

<h2 class="pos_abs">This is absolute position</h2>

<h2> This ia normal position</h2>

<h2 class="pos_left">This heading is moved left to its normal position</h2>

<h2 class="pos_right">This heading is moved right to its normal position</h2>

</body></html>

left, top, right และ bottom:

ใช้ร่วมกับ position เพื่อกำหนดตำแหน่ง โดยนับจากขอบแต่ละด้านเข้าไปตามค่าที่กำหนดไว้ ค่าที่เป็นไปได้ คือ auto (ให้บราวเซอร์กำหนดค่าที่เหมาะสมให้), % (กำหนดเป็นเปอร์เซ็นต์เทียบกับแท็กพ่อ) หรือกำหนดค่าเจาะจง เช่น 20px

clip:

ใช้ตัดเนื้อหาบางส่วนออกไป มีผลทำให้เนื้อหาส่วนนั้นแสดงออกมาไม่ทั้งหมด แสดงให้เห็นเพียงบางส่วนเท่านั้น คือ แสดงผลเฉพาะส่วนที่อนุญาติให้เห็นเท่านั้น และคุณสมบัตินี้ใช้ร่วมกับ position:absolute เสมอ และตัดเนื้อหาได้ในรูปทรงสี่เหลี่ยมเท่านั้น (clip:rect)

position03.htm

img.clip {position:absolute; clip:rect(0px 150px 70px 50px)}

</style>

</head><body>

<p>The original imgage is not clip:</p>

<p>The clip property is here cutting an image</p>

</body></html>

overflow:

ใช้จำกัดขอบเขตข้อมูลคล้าย clip คือตัดบางส่วนออกได้ แต่สามารถดูข้อมูลที่ถูกตัดออกได้โดยการใช้ scrollbar เพื่อเลื่อนดูข้อมูลที่ซ่อนอยู่ ค่าที่เป็นไปได้คือ

visible - แสดงข้อมูลทั้งหมด แม้ข้อมูลจะใหญ่กว่าขอบเขตที่กำหนดไว้

hidden - แสดงข้อมูลในขอบเขตที่กำหนดเท่านั้น ส่วนที่เกินจากนี้จะไม่แสดงให้เห็น

scroll - แสดงข้อมูลเหมือน hidden แต่จะมี scrollbar เพิ่มขึ้นมา เพื่อใช้ดูข้อมูลส่วนที่ซ่อนอยู่

auto - ปรับแบบอัตโนมัติ คือ ถ้าข้อมูลใหญ่กว่าขอบเขต จะไม่แสดงส่วนที่เกินแต่จะแสดง scrollbar ให้

position04.htm

p.over {width:120px; height:90px; overfloe:scroll }

</style>

</head><body>

<p>The original image is not overflow:</p>

<p>The overflow property is here cutting an image, but you can scroll it:</p>

</body></html>

จากตัวอย่างภาพที่ 2 มีการกั้นเขตด้วยคุณสมบัติ over flow ส่วนที่เลยนั้นสามารถดูได้โดยเลื่อนแถบ scrollbar

vertical-align:

คุณสมบัติที่มช้จัดเรียงข้อมูลในแนวตั้ง ดังตาราง

ค่า ความหมาย

baseline จัดในตำแหน่งเส้นฐานเดียวกับแท็กพ่อ

sub จัดเรียงเป็นตัวห้อย

super จัดเรียงเป็นตัวยก

top จัดเรียงชิดขอบด้านบนของวัตถุที่มีขอบสูงที่สุดในแถว

text-top จัดเรียงชิดขอบด้านบนของตัวอักษรในแท็กพ่อ

middle จัดเรียงที่จุดกึ่งกลางของตัวอักษรในแท็กพ่อ

bottom จัดเรียงชิดขอบด้านล่างของวัตถุที่ขอบล่างต่ำสุดในแถว

text-bottom จัดเรียงชิดขอบล่างของตัวอักษรในแท็กพ่อ

length กำหนดเป็นค่าตัวเลขเจาะจง เช่น 25px, 10in

% กำหนดเป็นเปอร์เซ็นต์เทียบกับค่าในคุณสมบัติ line-height

position05.htm

<p>This is <b style="vertical-align:baseline">baseline.</b></p>

<p>This is <b style="vertical-align:sub">subscript.</b></p>

<p>This is<b style="vertical-align:super">superscript,</b></p>

<p><img border="0" scr="picture/img001.jpg" width="60" height="32">This is<b style="vertical-align:middle; font-size:150%>middle.</b></p>

<p><img border="0" scr="picture/img001.jpg width="60" height="32" style="vertical-align:text-top">This is<b style="vertical-align:bottom; font-size:120%>bottom.</b></p>

<p><img border="0" scr="picture/img001.jpg" width="60" higth="32" style="vertical-align:text-top">This is <b style="vertical-align:text-bottom; font-size:120%">text-bottom.</b></p>

z-index:

ใช้จัดลำดับชั้นของข้อมูล โดยกำหนดค่าเป็นแนว Z ซึ่งจะทำให้ข้อมูลมีการซ้อนทับกัน สำหรับค่าที่กำหนดได้คือ auto (กำหนดค่าแกน Z ให้เท่ากับแท็กพ่อ และกำหนดค่าแกน Z เป็นตัวเลขบวกลบ โดยค่าบวกจะได้ข้อมูลซ้อนอยู่ด้านบน ส่วนค่าลบจะซ้อนอยู่ด้านล่าง คุณสมบัติ z-index ต้องใช้ร่วมกับคุณสมบัติ position:absolute เสมอ

positiono6.htm

img.x1 {position:absolute; left:0px; top:40px; z-index:-1}

img.x2 {position:absolute; lefy:110px; top:40px; z-index:1 }

</style>

</head><body>

<p>Default z-index is 0. Z-index -1 has lower priority. Z-index 1 has higher priority.</p>

<h1>This is a Heading</h>

</body></html>