สอนคนงี่เง่าบัดซบ..เรียนรู้วิธีสร้างเว็บเพจ !

เอาละ ท่านอยากจะทำเว็บเพจ !
INDEX ดรรชนี
& Quick Reference
พื้นฐานโครงสร้างเอกสาร HTML        พื้นฐานการจัดแบบตัวหนังสือ
โครงสร้างการวางรูปแบบ        เรื่องของภาพ        เรื่องของตัวเชื่อม        เบ็ดเตล็ด
 
Basic Document Structure
พื้นฐานโครงสร้างเอกสาร HTML
Go 
<HTML>
<HEAD>
<TITLE>My big ole bad page!</TITLE>
</HEAD>
<BODY>
Hello Joe!
</BODY>
</HTML>

 

Basic Text Formatting
พื้นฐานการจัดแบบตัวหนังสือ
Go ทำตัวหนังสือ หนา: <B>Sample</B>
Go ทำตัวหนังสือ เอน: <I>Sample</I>
Go ทำตัวหนังสือขีดเส้นใต้: <U>Sample</U>
Go ทำตัวหนังสือแบบตัวพิมพ์ดีด: <TT>Sample</TT>
Go เปลี่ยน ขนาดตัวพิมพ์ (sizes:1-7) <FONT SIZE=5>Sample</FONT>
Go เปลี่ยนแบบตัวพิมพ์ (face) <FONT FACE="fontname1,fontname2,etc">Sample</FONT>
Go เปลี่ยน สี ตัว หนังสือ <FONT COLOR="#0000FF">Sample</FONT>
Go ขนาดตัวหนังสือหัวข้อเรื่อง (1-6): <H1>Sample</H1>
การวางหัวข้อเรื่อง: <H1 ALIGN="center">Sample</H1>
Go เปลี่ยนสีของตัวเชื่อมและสีตัวหนังสือ
<BODY BGCOLOR="#123456" TEXT="#23456A" LINK="#3456AB" VLINK="#456ABC" ALINK="#56ABCD">
Go The Handy Dandy Font Viewer (บทบรรยาย) เปิดเข้าไปในหน้า Viewer
Go The rollercoaster!

 

Structural Formatting
โครงสร้างการวางรูปแบบ
Go การตัดคำขึ้นบรรทัดใหม่Line breaks <BR>
Go เว้นช่องขึ้นบรรทัดใหม่มากกว่า 1 ช่อง: 
<BR>
<BR>
<BR>
Go ขี้นย่อหน้าใหม่ <P>
Go ขึ้นย่อหน้าใหม่ใช้คู่กับ ALIGN หรือวางชิด <P ALIGN="left|center|right">
Go การจัดวางกลางแบบเก่า: <CENTER>Sample</CENTER>
Go ลากเส้นบรรทัดคั่นบทความ (แบบธรรมดา): <HR>
และแบบ บวกคำสั่งพิเศษ: <HR ALIGN="left" WIDTH=90% SIZE=1 NOSHADE>
Go ร่นกรอบตัวหนังสือเข้าไปด้วย Blockquote: <BLOCKQUOTE>Sample</BLOCKQUOTE>
Go ทำรายชื่อแบบเรียงลำดับเป็นตัวเลข(<OL>) และแบบไม่เป็นตัวเลข(<UL>) lists: 
<OL>
<LI>List item
</OL>
Go การวางรูปบทความเป็นแบบ Definition (เลือกใส่หัวข้อเป็นตัวหนา): 
<DL>
<DT><B>Definition title</B>
<DD>Definition item
</DL>
Go การใช้ประโยชน์จากแบบพิมพ์ตัวพิมพ์ดีด ใน Preformat tag: 
<PRE>
Sample
   Sample
      Sample
</PRE>

 

Images
รูปภาพต่างๆ
Go การสอดภาพลงในเว็บเพจ (gif หรือ jpg):
<IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image">
Go ระบุภาพแบ็คกราวน์ (gif or jpg): <BODY BACKGROUND="mybackground.gif">
Go วิธีเซฟภาพ
Go วิธีระบุแหล่งที่มา (SRC) ของภาพโดยละเอียด
Go ว่าด้วยเรื่องขนาดของภาพ
Go กลวิธีใช้รูปแสตมป์ ( thumbnails)
Go สร้างเส้นด้วยจุดขนาด 1 x 1
Go แนะนำการใช้ GIF Optimizer!

 

Links
เรื่องของตัวเชื่อม
Go ระบุลิงค์ด้วยชื่อไฟล์ <A HREF="page.html">My page</A>
ระบุลิงค์ด้วย URL: <A HREF="http://www.yahoo.com/page.html">Yahoo's page</A>
Go ทำลิงค์ไปยังจุดใดจุดหนึ่ง ของหน้าบทความ
<A HREF="page.html#cheesewiz">About Cheese Wiz</A>
Go ทำลิงค์ให้ติดต่อเราทางอีเมล์:
<A HREF="mailto:scottie@enterprise.com">Email Scottie</A>
Go ทำลิงค์ด้วยภาพ:
<A HREF="page.html"><IMG SRC="mypic.gif" WIDTH=123 HEIGHT=456></A>
Go วิธีเอาขอบสีฟ้าออกจากภาพที่ทำเป็นลิงค์
<IMG SRC="myimage.gif" WIDTH=123 HEIGHT=456 ALT="My Image" BORDER=0>
Go เปรียบเทียบข้อดีทำลิงค์โดยระบุไฟล์ กับโดยระบุ URL

 

Miscellaneous
เบ็ดเตล็ด
Go วิธีใส่รหัสระบุสีของแบ็คกราวน์: <BODY BGCOLOR="#123456">
Go ระบุให้แบ็คกราวน์เป็นภาพ (gif or jpg): <BODY BACKGROUND="mybackground.gif">
Go Color Pickerเครื่องมือวิเศษสำหรับเลือกสีแบคกราวน์ให้เหมาะกับสีตัวหนังสือ
Go การทำแท็กซ้อนหลายอัน - การวางแท็กไม่ให้สลับที่หรือ การทำ Nested tags
Go เพิ่มเติมเรื่องวางแท็กสลับที่และการทำ Nested tags
Go เรื่องของสี 216 ของเนทสเคปcolors
Go เข้าไปดูตารางสี 216 สีของเนทสเคป (ภาพตัวอย่างสี)
Go ตาราง 216 สีพร้อมคำอธิบาย
Go Chart of 1536 colors (page)
Go รหัสพิเศษ สำหรับเว้นวรรคกว้างๆ (special character for a space) &nbsp;
Go รหัสคำสั่งพิเศษที่ใช้บ่อย 6 ตัว: 
&nbsp;     non-breaking space
&lt;       < less-than symbol
&gt;       > greater-than symbol
&amp;      & ampersand
&quot;     " quotation mark
&shy;      ­ soft hyphen
Go รวมรหัสคำสั่งพิเศษอื่นๆ
Go เรื่องของความเนียนของจอภาพ
Go เคล็ดน่ารู้เกี่ยวกับความเนียนของภาพ
Go ว่าด้วย comment แท็ก <!-- This is a comment -->
Go การเซฟเอกสารให้เป็นไฟล์ HTML
Go ความรู้เบื้องต้นเกี่ยวกับไฟล์ และนามสกุลของไฟล์

 

บทนำ บทที่ 1 บทที่ 2 บทที่ 3 บทที่ 4 บทที่ 5 บทที่ 6 บทที่ 7 บทที่ 8 บทที่ 9 บทที่ 10 Index