เรียนรู้ HTML คือ อะไร

เรียนรู้ HTML



โครงสร้างพื้นฐาน HTML


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

<HTML>
</HTML>

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

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

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

<HTML>
<HEAD>
</HEAD>
</HTML>


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

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>

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

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร

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

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

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

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



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

<HTML>
</HTML>

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

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

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

<HTML>
<HEAD>
</HEAD>
</HTML>


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

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>


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

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร

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

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

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

(ถ้าไอคอนของคุณแตกต่างไปจากนี้ก็ไม่ต้องตกใจ, เพราะมันไม่ใช่เรื่องใหญ่)

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

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

<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>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน

อธิบายคำสั่ง
<FONT FACE="ชื่อฟ้อนต์ที่ใช้">เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
</FONT>เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ




>>>>>>>> เรียนรู้ HTML คือ อะไร (3)


<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>

ผลลัพธ์ที่ได้

Hello World, นี่คือเว็บเพจแรกของฉัน

Hello World, นี่คือเว็บเพจแรกของฉัน

Hello World, นี่คือเว็บเพจแรกของฉัน

Hello World, นี่คือเว็บเพจแรกของฉัน

Hello World, นี่คือเว็บเพจแรกของฉัน

ข้อความแบบ Super Script E=MC2

ข้อความแบบ Sub Script H2O

อธิบายคำสั่ง


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


เรียนรู้ HTML คือ อะไร (4)





<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>




ผลลัพธ์ที่ได้

Hello World, FONT SIZE = 6
Hello World, FONT SIZE = 5
Hello World, FONT SIZE = 4
Hello World, FONT SIZE = 2

อธิบายคำสั่ง


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



<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>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
<FONT COLOR="ชื่อสี">เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
</FONT>เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ

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



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

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


เรียนรู้ HTML (7)

<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>
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน

Hello World, นี่คือเว็บเพจแรกของฉัน
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
<P>เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN=LEFT>กำหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN=CENTER>กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
<P ALIGN=RIGHT>กำหนดให้ข้อความอยู่ชิดด้านขวา
</P>เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ <P ALIGN>)




การใส่รูปภาพ (11)

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

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

นี่คือภาพดาราคนโปรดของฉัน
ลองทายดูซิว่าเธอคือใคร
อธิบายคำสั่ง..

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

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

ป้ายกำกับ: ,

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)

ร่วมเป็นสมาชิก Blogseothai คุณคือตัวจริง !