Group Blog
 
<<
มกราคม 2557
 
 1234
567891011
12131415161718
19202122232425
262728293031 
 
15 มกราคม 2557
 
All Blogs
 

HTML เบื้องต้น

เนื่องจากมีหลายท่านได้สอบถามเกี่ยวกับโค๊ด html เข้ามา ผมจึงถือโอกาสเขียนเนื้อหาในส่วนนี้ซะเลย เผื่อว่าจะมีประโยชน์สำหรับท่านที่สนใจครับ


ปล. สำหรับเนื้อหานี้ผมได้นำมาจากเว็บอื่น และมีการปรับแต่งนิดหน่อยนะครับ


ส่วนประกอบที่สําคัญของภาษา HTMLได้แก่ Tag และ Attribute

Tag คือ คําสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สําหรับจัดรูปแบบข้อความ ภาพหรือ วัตถุอื่นๆ 

ซึ่ง tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด ซึ่ง tag ปิด จะมีเครื่องหมาย / นำหน้า เช่น 

<h1>…</h1>  ใช้เน้นหัวข้อเรื่อง

<p>…</p>  ใช้จัดพารากราฟ

<b>…</b>  ใช้กำหนดให้ตัวอักษรเป็นตัวหนา


แต่บาง tag ก็ไม่มี tag ปิด เช่น  

<hr> ใช้สร้างเส้นคั่น  

<br> ใช้สําหรับการขึ้นบรรทัดใหม่


Attribute เป็นส่วนขยายใน tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…"  เช่น 

<p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p>

<hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ


ในการเขียน tag, attribute และค่าของ attribute  ตามมาตรฐานของ (X)HTML รุ่นใหม่ จะใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด และสำหรับ tag ที่ไม่มี tag ปิด ให้ใส่ เป็น " / >" เช่น <hr />, <br /> 

การเขียน comment <!-- ... -->

Comment หรือข้อความหมายเหตุ มีประโยชน์หลายอย่าง เช่น ใช้เพื่อเตือนความจำ กำกับ code แต่ละส่วนที่เราเขียนว่าเพื่อทำอะไร ทำให้อ่านและแก้ไข code ภายหลังได้ง่าย   ข้อความใน tag comment จะไม่ถูกเว็บเบราเซอร์์แสดงออกมาให้ผู้ใช้งานได้เห็น จะเห็นเมื่อมีการ view source code เท่านั้น 


Body เป็นส่วนที่แสดงเนื้อหาที่จะแสดงทางหน้าจอทั้งหมด มีส่วนประกอบ ได้แก่ ข้อความ ตาราง ลิสต์ รูป ภาพ ลิงค์ เป็นต้น


เราสามารถกำหนดคุณสมบัติให้กับ Body โดยผ่าน attribute ต่าง ๆ ได้แก่ 

- bgcolor="สี" กำหนดสีพื้นหลังในหน้าเว็บเพจ

- text="สี" กำหนดสีตัวอักษร

- background="url" กำหนดพื้นหลังเป็นรูปภาพ

- bgproperties="fixed" กำหนดให้รูปพื้นหลังไม่เลื่อนตาม scrollbar

- topmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านบน

- leftmargin="number" กำหนดระยะของเนื้อหาให้ห่างจากขอบด้านซ้าย

การกำหนดสีพื้น background กับสีตัวอักษรที่ใช้ในหน้าเว็บเพจ

<body bgcolor="สี" text="สี">...<body>

กำหนดพื้นหลังเป็นรูปภาพ 

ถ้าไม่ต้องการให้รูปภาพเลื่อนตาม scrollbar ให้กำหนด attribute bgproperties="fixed"

<body background="url ของรูปภาพ" bgproperties="fixed">... </body>

การจัดระยะของเนื้อหาให้ห่างจากขอบแต่ละด้าน

<body topmargin="number" leftmargin="number">...</body>

เราจะต้องใช้สัญลักษณ์พิเศษ เวลาที่เราพิมพ์ใน Text Editor 

ให้เราพิมพ์เป็น

&lt; สำหรับเครื่องหมาย < 

พิมพ์

&gt; สำหรับเครื่องหมาย > 

และพิมพ์

&quot; สำหรับเครื่องหมาย "


การเว้นวรรคหลายครั้งทำได้โดยใช้

&nbsp; ใส่ไปหลายๆ ครั้ง ก็จะสามารถจะเว้นวรรคได้ห่างตามที่ต้องการ


เราสามารถใช้เส้นขีดคั่นแนวนอนเป็นเส้นแบ่งเนื้อหาออกเป็นส่วนๆ เพื่อจัดระเบียบ หรือเพื่อความสวยงามได้

<hr width="number" size="number" align="left | center | right" color="สี" noshade>

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<hr width="number" size="number" align="left | center | right" color="สี" noshade="noshade" />

attribute ที่ใช้กำหนดคุณสมบัติเพิ่มเติมให้ tag <hr> ได้แก่

- width="number | %" ความยาวของเส้นคั่น

- size="number" ความหนาของเส้นคั่น มีค่าเป็น 1 ถึง 7 และ -1 ถึง -7

- align="left | center | right" ตำแหน่งที่จัดวาง

- color="สี" สีของเส้นคั่น

- noshade กำหนดให้เป็นเส้นทึบ


ในการจัด Paragraph ของข้อความ จะใช้ tag <p> สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align  และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

<p align="left | center | right |justify">...</p>

"justify"ข้อดวามในพารากราฟ กระจายคำให้พอดี


การขึ้นบรรทัดใหม่

ปกติ ถ้าข้อความยาวมากๆ เว็บเบราเซอร์์จะตัดคำขึ้นบรรทัดใหม่ให้อยู่แล้ว แต่ถ้าต้องการกำหนดการขึ้นบรรทัดใหม่เอง ให้ใช้ tag <br> ถ้าให้เป็นไปตามมาตรฐานใหม่ของ (X)HTML ใช้ <br /> 

และสามารถกำหนดรูปแบบการขึ้นบรรทัดใหม่ได้หลายแบบ ผ่าน attribute clear ที่มีค่่าเป็น left / right / all /none 

<br clear="left | right | all | none">

หรือ เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ จะเขียนแบบนี้

<br clear="left | right | all | none" />


ตัวอักษร (Font)

เราสามารที่จะระบุชนิด ขนาดของ และ สี ให้ตัวอักษร ด้วย tag <font>

<font face="ชนิดตัวอักษร" size="number" color="สี">ข้อความ</font>

attribute ที่ใช้กับ <font> ได้แก่

 face="ชนิดตัวอักษร" กำหนดชนิดให้ตัวอักษร

 size="number" กำหนดขนาดให้ตัวอักษร มีค่าตั้งแต่ -7 ถึง 7 

 color="สี" กำหนดสีให้ตัวอักษร


<del> กำหนดขีดฆ่าข้อความ  

เช่น <del>ขีดฆ่า</del> 

<ins> กำหนดขีดเส้นใต้ข้อความ 

เช่น <ins>ขีดเส้นใต้</ins>

<sup> กำหนดข้อความตัวยก 

เช่น 4<sup>2</sup>=16

<sub> กำหนดข้อความตัวห้อย 

เช่น H<sub>2</sub>O

<strong>เน้นหนักข้อความ (ตัวหนา) 

เช่น <strong>เน้นหนัก</strong>

<small> กำหนดข้อความให้มีขนาดเล็กลง 

เช่น <small>เล็กลง</small>

<i> กำหนดข้อความเป็นตัวเอียง 

เช่น <i>ตัวเอียง</i>

<em> เน้นข้อความ (ตัวเอียง) 

เช่น <em>เน้นข้อความ</em>

<big> กำหนดข้อความให้มีขนาดใหญ่ขึ้นจากขนาดปัจจุบันขึ้น 1 ระดับ

เช่น <big>ใหญ่ขึ้น</big>

ถ้าเขียนซ้อนกันก็จะทำให้ตัวใหญ่ขึ้นอีก

เช่น <big><big>ใหญ่ขึ้นอีก</big></big>

<b> กำหนดข้อความเป็นตัวหนา 

เช่น <b>ตัวหนา</b>

<u> กำหนดขีดเส้นใต้ข้อความ  

เช่น <u>ขีดเส้นใต้</u>


แนะนำโปรแกรมสำหรับดูรหัสสีบนหน้าจอเราซะหน่อย จะได้ง่ายในการเขียนโค๊ดสี

 โหลดโปรแกรม Instant Eyedropper มาลงเครื่องเราก่อนที่นี่เลย

Instant Eyedropper

เมื่อลงโปรแกรมเสร็จก็เปิดโปรแกรมขึ้นมา มันจะมีไอคอนกลมๆมีกากบาทอยู่ด้านใน อยู่ที่ด้านขวาของ taskbar

เราก็เลื่อนเมาส์ไปกดแล้วลากไปตรงจุดที่เราต้องการดูรหัสสี จดเอาไว้แล้วเอาไปใช้ได้เลย ง่ายต่อการนำไปใช้ครับอยากได้สีตรงไหนดูได้หมดเลย




 

Create Date : 15 มกราคม 2557
4 comments
Last Update : 23 มกราคม 2557 15:20:39 น.
Counter : 3149 Pageviews.

 

เฮ้อ แก้ไปหลายรอบกว่าจะได้ โพสโค๊ดเนี่ยลำบากจริง จะทำสีข้อความซะหน่อยโค๊ดก็มั่วไปอีก เอาสีเดียวทั้งหน้าไปละกันครับ -*-

 

โดย: yaovarit 23 มกราคม 2557 15:23:59 น.  

 

สวัสดีค่ะ ขอบคุณที่ไปให้พรค่ะ กลับจากกทม.เมื่อนี้แล้วค่ะ รีบมาทักทายมาเจอความรู้เรื่องโค๊ดต่างๆกำลังอ่านทำความเข้าใจค่ะ บางโค๊ดก็งงๆคงต้องศึกษาอีกนานค่ะ อิอิ

ไลท์ให้นะคะ
มีความสุขวันหยุดค่ะ




More Reflected Roses Comments

 

โดย: กิ่งฟ้า 26 มกราคม 2557 14:40:35 น.  

 

พี่ที ^^

 

โดย: mint IP: 1.47.97.68 11 เมษายน 2557 19:50:21 น.  

 

แวะมาอ่าน ขอบคุณมากครับ

 

โดย: P_ปรัชญา 26 เมษายน 2557 16:43:25 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 
รหัสส่งข้อความ
กรุณายืนยันรหัสส่งข้อความ


yaovarit
Location :
กรุงเทพฯ Thailand

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 32 คน [?]




New Comments
Friends' blogs
[Add yaovarit's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.