เรียนรู้เรื่องภาษา HTML

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

เพราะเราไม่จำเป็นต้องใช้โปรแกรมอะไรมากมายนัก เพียงแค่มีคอมพิวเตอร์และระบบปฏิบัติการเท่านั้น โดยการใช้เครื่องมือที่มีอยู่ในระบบปฏิบัติการของเราสร้างขึ้นมา เครื่องมือในที่นี้ก็คือ โปรแกรม Notepad หวังว่าคงไม่มีใครไม่รู้จักโปรแกรม Notepad นะครับ

แสดงการเปิดโปรแกรม Notepad

รูป แสดงการเปิดโปรแกรม Notrpad

เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้

ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร

<HTML>
<HEAD>
<TITLE>m2010thai ศูนย์ความรู้ออนไลน์TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป

เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร <HTML> และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" </HTML> เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก

ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร

และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง

และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้

บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.shtml
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm

เพื่อนๆ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลกได้ดูผลงานของเราได้ และสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของเรา ซึ่งสิ่งที่เพื่อนๆ เห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพจ

เอ้อ!..ลืมบอกไปนะครับสำหรับหน้าแรกของเว็บไซต์เราควรตั้งชื่อว่า index นะครับไม่งั้นเวลาอัพขึ้นโฮสแล้วมันจะไม่รันหน้าแรกให้เรานะครับ

ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่เพื่อนจะต้องเตรียมก็คือ ประการแรก เพื่อนๆจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพจของเพื่อนๆควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือเพื่อนๆต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี

การกำหนด Font ตัวหนังสือที่จะแสดง


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <FONT FACE="AngsanaUPC"> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT FACE="JasmineUPC"> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT FACE="IrisUPC"> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> </BODY> </HTML>

เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
 เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

การกำหนดรูปแบบของตัวอักษร


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> Hello World, นี่คือเว็บเพจแรกของฉัน<P> <B> Hello World, นี่คือเว็บเพจแรกของฉัน</B><P> <I> Hello World, นี่คือเว็บเพจแรกของฉัน</I><P> <S> Hello World, นี่คือเว็บเพจแรกของฉัน</S><P> <U> Hello World, นี่คือเว็บเพจแรกของฉัน</U><P> ข้อความแบบ Super Script E=MC<SUP>2</SUP><P> ข้อความแบบ Sub Script H<SUB>2</SUB>O<P> </BODY> </HTML>

เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
 เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S></S> เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
 เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
 เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
 เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script

การกำหนดขนาดของตัวอักษร


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <FONT SIZE=6> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT SIZE=5> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT SIZE=4> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT SIZE=2> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> </BODY> </HTML>

เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษร สามารถกำหนดได้ตั้งแต่ 1 - 7
 เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

การกำหนดสีให้กับข้อความ


	HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <FONT COLOR=RED> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT COLOR=GREEN> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT COLOR=BLUE> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT COLOR=VIOLET> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> <FONT COLOR=YELLOW> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </FONT> </BODY> </HTML>

เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
 เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้
เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

การกำหนดสีตัวอักษรและสีแบล็คกราวด์


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY TEXTCOLOR="black" BGCOLOR="lightblue"> Hello World, นี่คือเว็บเพจแรกของฉัน<BR> </BODY> </HTML>

<BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
TEXTCOLOR ใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR ใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี

การวางตำแหน่งของข้อความ


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> <P ALIGN=LEFT>Hello World, นี่คือเว็บเพจแรกของฉัน</P> <P ALIGN=CENTER>Hello World, นี่คือเว็บเพจแรกของฉัน</P> <P ALIGN=RIGHT>Hello World, นี่คือเว็บเพจแรกของฉัน</P> </BODY> </HTML>

เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
 กำหนดให้ข้อความอยู่ชิดด้านซ้าย
 กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
 กำหนดให้ข้อความอยู่ชิดด้านขวา
 เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ )

การจัดลำดับหัวข้อและเนื้อหาโดยใช้ <UL>

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>

การจัดหัวข้อโดยใช้ <UL TYPE="disc"> 
<UL TYPE="disc">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>

การจัดหัวข้อโดยใช้ <UL TYPE="square"> 
<UL TYPE="square">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>

การจัดหัวข้อโดยใช้ <UL TYPE="circle"> 
<UL TYPE="circle">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</UL>

</BODY>
</HTML>

<UL> เริ่มต้นลำดับข้อมูล
TYPE=".." เครื่องหมายลำดับข้อมูล ได้แก่ disc, square และ circle โดยจะมี disc เป็นค่า Default
<LI> เริ่มต้นข้อมูลใน List
</LI> สิ้นสุดข้อมูลใน List
</UL> สิ้นสุดการลำดับข้อมูล

การจัดลำดับหัวข้อและเนื้อหาโดยใช้ <OL>

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>

การจัดหัวข้อโดยใช้ <OL> 
<OL>
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>

การจัดหัวข้อโดยใช้ <OL TYPE="A"> 
<OL TYPE="A">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>

การจัดหัวข้อโดยใช้ <OL TYPE="I"> 
<OL TYPE="I">
<LI>INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</LI>
<LI>CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</LI>
<LI>OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</LI>
</OL>

</BODY>
</HTML>

<OL> เริ่มต้นลำดับข้อมูล
TYPE="A" กำหนดเครื่องหมายเพื่อใช้ในการลำดับข้อมูล ได้แก่ A, a, I, i ถ้าไม่กำหนดจะเริ่มต้นด้วย 1 เสมอ
<LI> เริ่มต้นข้อมูลใน List
</LI> สิ้นสุดข้อมูลใน List
</OL> สิ้นสุดการลำดับข้อมูล

การจัดลำดับหัวข้อและเนื้อหาโดยใช้ <DL>


	<HTML> <HEAD> <TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE> </HEAD> <BODY> องค์ประกอบที่สำคัญของคอมพิวเตอร์ มีดังต่อไปนี้<BR> <DL> <DT>INPUT UNIT</DT> <DD>หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner</DD> <DT>CENTRAL PROCESSING UNIT<DT> <DD>CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด</DD> <DT>OUTPUT UNIT</DT> <DD>หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter</DD> </DL> </BODY> </HTML>

<DL> เริ่มต้นลำดับข้อมูล
<DT> คำจำกัดความ
<DD> ความหมายหรือคำอธิบาย

การใสรูปภาพประกอบหน้าเว็บ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน> 
<IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star"> 
ลองทายดูซิว่าเธอคือใคร 
</CENTER>
</BODY>
</HTML>

__________________________________________________________________________________________________________

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
นี่คือภาพดาราคนโปรดของฉัน> 
<IMG SRC="mypic.gif" BORDER=2 WIDTH=120 HIGHT=120 ALT="Super Star"> 
ลองทายดูซิว่าเธอคือใคร 
</CENTER>
</BODY>
</HTML>

<IMG> เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพจ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" คำอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ

การใช้แท็กแบบย่อ ๆ <IMG SRC="mypic.gif"> จะได้ผลลัพธ์เหมือนรูปที่ 1 คือไม่มีเส้นขอบ

การจัดตำแหน่งของรูปภาพร่วมกับข้อความ

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=LEFT>

ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...แต่จะว่าไปแล้วคนที่จะเข้าห้องสนทนาบ่อยๆ นั้นโดยมากจะต้องเป็นผู้ที่ช่างคิดช่างเจรจา และที่สำคัญจะต้องพิมพ์ดีดคล่องด้วย 

</CENTER>
</BODY>
</HTML>

____________________________________________________________________

<HTML>
<HEAD>
<TITLE> นี่คือเว็บเพจแรกของฉัน </TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="smicon7.gif" BORDER=0 ALIGN=RIGHT>

ห้องสนทนา Chat คือแหล่งรวมชุมชนคนออนไลน์ ที่กลุ่มวัยรุ่นสมัยนี้มักจะนิยมกันมาก...แต่จะว่าไปแล้วคนที่จะเข้าห้องสนทนาบ่อยๆ นั้นโดยมากจะต้องเป็นผู้ที่ช่างคิดช่างเจรจา และที่สำคัญจะต้องพิมพ์ดีดคล่องด้วย 

</CENTER>
</BODY>
</HTML>

ALIGN=LEFT กำหนดให้รูปภาพอยู่ทางด้านซ้ายของข้อความ (Default)
ALIGN=RIGHT กำหนดให้รูปภาพอยู่ทางด้านขวาของข้อความ
ALIGN=TEXTTOP กำหนดให้ขอบบนของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)
ALIGN=BOTTOM กำหนดให้ขอบล่างของรูปภาพในอยู่ระดับเดียวกันกับขอบบนของข้อความ (ไม่ค่อยได้ใช้)

ศูนย์การเรียนรู้ออนไลน์