itme

itme

วันอังคารที่ 28 มีนาคม พ.ศ. 2560

ใบงานที่ 10 รูปแบบของคำสั่ง HTML


คำสั่งในภาษา HTML




   
 คำสั่งพื้นฐาน
< !-- ข้อความ -->คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ
<br>คำสั่งขึ้นบรรทัดใหม่
<p> ข้อความ </p>คำสั่งย่อหน้าใหม่
<hr width="50%" size = "3">คำสั่ง ตีเส้น, กำหนดขนาดเส้น
&nbsp;คำสั่ง เพิ่มช่องว่าง
<IMG SRC = "PHOTO.GIF">คำสั่งแสดงรูปภาพชื่อ Photo.gif
<CENTER> ข้อความ </CENTER>คำสั่งจัดให้ข้อความอยู่กึ่งกลาง
<HTML> </HTML>คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม
<HEAD> </HEAD>คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน
<TITLE> </TITLE>คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar
<BODY> </BODY>คำสั่ง <BODY> คือคำสั่งบอกส่วนเนื้อเรื่อง ที่จะถูกแสดงผลในเวปบราวเซอร์ ประกอบด้วยรูปภาพ ตัวอักษร ตาราง เป็นต้น
    รูปแบบตัวอักษร
<font size = "3"> ข้อความ </font>ขนาดตัวอักษร
<font color = "red"> ข้อความ </font>สีตัวอักษร
<font face = "Arial"> ข้อความ </font>รูปแบบตัวอักษร
<besefont size = "2"> ข้อความ </font>กำหนดค่าเริ่มต้นของขนาดตัวอักษร
<b> ข้อความ </b>ตัวอักษรหนา
<i> ข้อความ </i>ตัวอักษรเอน
<u> ข้อความ </u>ขีดเส้นใต้ตัวอักษร
<tt> ข้อความ </tt>ตัวอักษรแบบพิมพ์ดีด

หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น
<font face = "Arial" size = "3" color = "red"> ข้อความ </font> เป็นต้น
    จุดเชื่อมโยงข้อมูล
<a href ="#news"> Hot News </a> ,
<a name ="news">		กำหนดจุดเชื่อมชื่อ news ส่วน "a name" คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)
<a href ="news.html"> Hot News </a>สร้างลิงค์ไปยังเอกสารชื่อ "news.html"
<a href ="http://www.thai.com"> Thai </a>สร้างลิงค์ไปยังเวปไซท์อื่น
<a href ="http://www.thai.com" target = "_blank" > Thai </a>สร้างลิงค์ไปยังเวปไซท์อื่น และเปิดหน้าต่างใหม่
<a href ="http://www.thai.com"> <img src = "photo.gif"> </a>สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม
<a href ="mailto:yo@mail.com"> Email </a>สร้างลิงค์มายังอีเมล
    การแสดงผลแบบรายการแบบมีหมายเลขกำกับ
<OL value = "1" >
    <LI> รายการที่ 1
    <LI> รายการที่ 2
</OL>
 		การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย </OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น
    การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ
<UL type = "square">
    <LI> รายการที่ 1
    <LI> รายการที่ 2
</UL>
 		การแสดงผลแบบรายการ ใช้คำสั่ง <UL> เป็นเริ่มและปิดท้ายด้วย </UL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการ ที่ต้องการนำเสนอ เราสามารถกำหนดให้แสดงผลรายการแบบต่างๆ ดังต่อไปนี้

- รูปวงกลมทึบ "disc"
- รูปวงกลมโปร่ง "circle"
- รูปสี่เหลี่ยม "square"

ได้ทั้งนี้จะต้องเพิ่มคำสั่งเข้าไปที่ <UL type = "square"> เป็นต้น


    การสร้างตาราง
<TABLE BORDER = "2" >
<CAPTION> การสร้างตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>


ผลลัพธ์ที่ได้ 
 
การสร้างตาราง
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2
การสร้างตาราง ใช้คำสั่ง <TABLE> เป็นเริ่มและปิดท้ายด้วย </TABLE> ส่วน BORDER เป็นคำสั่งย่อยเพื่อใช้ กำหนดขนาดของเส้นตาราง ถ้ากำหนด = "0" จะหมายถึงไม่มีเส้น

- คำสั่ง <CAPTION> และ< /CAPTION> เป็นคำสั่งแสดงข้อความอธิบายชื่อตาราง
- คำสั่ง <TR> และ< /TR> เป็นคำสั่งเพื่อกำหนดแถวในตาราง
- คำสั่ง <TH> และ< /TH> เป็นคำสั่งเพื่อกำหนดหัวเรื่อง ผลลัพธ์ที่ได้คือตัวอักษรจะหนากว่าปกติ (ดูตัวอย่างประกอบ)
- คำสั่ง <TD> และ< /TD> เป็นคำสั่งแสดงข้อมูลปกติ

ความหมายของคำสั่ง Table 
- TR หมายถึง Table Row
- TH หมายถึง Table Head
- TD หมายถึง Table Data
 

    ขนาดของตาราง
กำหนดความกว้างและความสูงของตาราง 
<TABLE width="50%" height = "60%" >
<CAPTION> ขนาดของตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>

ผลลัพธ์ที่ได้ 
 
การตกแต่งตาราง
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2


กำหนดความสูงของแถว (row) 
<TABLE width="50%">
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD rowspan = "2" > ข้อมูล 2 </TD> </TR>
    <TR> <TD> ข้อมูล 3 </TD> </TR>
</TABLE>

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

 
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2
ข้อมูล 3


กำหนดความกว้างของคอลัมภ์ (column) 
<TABLE width="50%">
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
    <TR> <TD colspan="2" > ข้อมูล 3 </TD> </TR>
</TABLE>

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

 
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2
ข้อมูล 3


ตารางซ้อนตาราง 
<TABLE width="50%">
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
    <TR> <TD> ข้อมูล 3 </TD>
<TABLE width="50%">
    <TR> <TD> ข้อมูล 4 </TD>
    <TD> ข้อมูล 5 </TD> </TR>
</TABLE>
</TABLE>

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

 

หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2
ข้อมูล 3
ข้อมูล 4ข้อมูล 5


คำอธิบาย 
การทำตารางซ้อนตาราง มักจะใช้ในกรณีเพื่อ อธิบายรายละเอียดเพิ่มเติม ของข้อมูล

 		การตกแต่งตาราง ใช้คำสั่ง Width และ Height เป็นคำสั่งในการกำหนดขนาดของตาราง เปรียบเทียบกับ จอภาพ เช่น กำหนด width="50%" หมายถึง กำหนดความกว้างของตารางให้มีขนาด 50 % เมื่อวัดตามความกว้างของจอภาพ เป็นต้น

โดยปกติเราจะกำหนดอย่างใดอย่างหนึ่ง เช่น <TABLE width="50%" >

คำสั่งเสริมเพิ่มเติม 
- rowspan
เป็นคำสั่งในการกำหนดความสูงของแถวในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)
- colspan
เป็นคำสั่งในการกำหนดความกว้างของคอลัมภ์ในตาราง โดยใช้งานร่วมกับคำสั่ง <TD> (ดูภาพทางซ้ายมือประกอบ)


 
    สีกับตาราง
สีฉากหลังของตาราง 
<TABLE width="50%" bgcolor = "red" >
<CAPTION> สีฉากหลังของตาราง </CAPTION>
    <TR> <TH> หัวเรื่อง 1 </TH>
    <TH> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD> ข้อมูล 1 </TD>
    <TD> ข้อมูล 2 </TD> </TR>
</TABLE>

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

 
สีฉากหลังของตาราง
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2


กำหนดสีแต่ละช่องในตาราง 
<TABLE width="50%">
    <TR> <TH bgcolor = "brown" > หัวเรื่อง 1 </TH>
    <TH bgcolor = "white"> หัวเรื่อง 2 </TH> </TR>

    <TR> <TD bgcolor = "green" > ข้อมูล 1 </TD>
    <TD bgcolor = "blue" > ข้อมูล 2 </TD> </TR>
</TABLE>

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

 
หัวเรื่อง 1หัวเรื่อง 2
ข้อมูล 1ข้อมูล 2


คำอธิบาย 
ถ้าต้องการใส่สีกรอบของตาราง สามารถเพิ่มคำ ดังนี้ <TABLE bgcolor = "red">

 		เราสามารถกำหนดสีของ background ของตารางได้ โดยสามารถกำหนดได้ทั้งตาราง หรือ กำหนดเป็นแต่ละช่องได้

คำสั่งเสริมเพิ่มเติม 
- bgcolor
เป็นคำสั่งในการกำหนดสีในตาราง เป็นคำสั่งเสริมของคำสั่ง <Table> และสามารถใช้งานร่วมกับคำสั่ง <TH> หรือ <TD> ได้ด้วย (ดูตัวอย่างประกอบ)

การกำหนดสีสามารถกำหนดเป็นรหัสสีได้ ซึ่งสามารถตรวจสอบได้จาก ตารางสีตัวอย่างเช่น
<TD bgcolor = " #3232CD" >
หมายถึงสี Medium Bule เป็นต้น


 
    การสร้างแบบฟอร์ม
<FORM METHOD = "post/get"
ACTION = "URL">

    ...ข้อมูลของฟอร์ม...

</FORM>

ข้อมูลของฟอร์ม คือส่วนที่สามารถเพิ่มคำสั่งได้หลายรูปแบบ ดูหัวข้อต่อไป		การสร้างแบบฟอร์ม สามารถนำไปประยุกต์ใช้ได้หลายๆอย่าง เช่น การสร้างแบบสอบถาม แบบฟอร์มแสดงความคิดเห็น เป็นต้น ซึ่งการสร้างฟอร์มมักจะต้องใช้คำสั่งที่เรียกว่า "CGI" หรือ javascript ช่วยในการรับและส่งข้อมูล ในที่นี้ขอละไว้ก่อน แต่จะแนะนำ การส่งฟอร์ม ที่ใช้คำสั่งให้ลิงค์กลับมายังอีเมล์ของเรา ผลลัพธ์ที่ได้อาจไม่สวยงามนัก.. แต่ก็พอใช้ได้ (ดูข้อถัดไป)

<FORM> คือคำสังเริ่มการใช้ฟอร์ม และปิดท้ายด้วย </FORM> ส่วนคำสั่ง "METHOD" เป็นคำสั่งที่บอกว่าจะรับ "GET" หรือส่งข้อมูล "POST: ไปที่ไหน โดยมีคำสั่ง "ACTION" เป็นตัวกำหนด
    รูปแบบของฟอร์มประเภทต่างๆ
ประเภทกรอบป้อนข้อมูล 
<FORM>

<TEXTAREA NAME = "comment" ROWS="5" COLS="60"> </TEXTAREA>

</FORM>

ผลลัพธ์ที่ได้
 
ประเภทกรอบแบบสอบถาม 
<FORM>

Name : <INPUT TYPE='TEXT' NAME = "YOURNAME" size="15" >

PHONE : <INPUT TYPE='TEXT' NAME = "PHONE" size="15" >

</FORM>

ผลลัพธ์ที่ได้
 
Name    : 
PHONE : 
ประเภทกรอบ PASSWORD 
<FORM>

YOUR Password : <INPUT TYPE='PASSWORD' NAME = "CODE" size="15" >

</FORM>

ผลลัพธ์ที่ได้
 
Your Password    : 
ลองกรอกข้อมูลในกรอบดู!

ประเภท Check Box 
<FORM>

<INPUT TYPE='CHECKBOX' NAME = "ONE" VALUE ="value1" > Answer 1

<INPUT TYPE='CHECKBOX' NAME = "TWO" value="value2" > Answer 2

</FORM>

ผลลัพธ์ที่ได้
 
 Answer 1  Answer 2
ประเภท Radio 
<FORM>

<INPUT TYPE='RADIO' NAME = "ONE" VALUE ="value1" > Answer 1

<INPUT TYPE='RADIO' NAME = "TWO" value="value2" > Answer 2

</FORM>

ผลลัพธ์ที่ได้
 
 Answer 1  Answer 2
ประเภทตัวเลือก 
<FORM>

<SELECT name= "ICECREAM">
<OPTION SELECTED value="VANI"> Vanilla
<OPTION value="CHOC" > Chocolate
<OPTION value="COFF" > Coffee
<OPTION value="STRA" > Strawberry
</SELECT>


</FORM>

ผลลัพธ์ที่ได้
 
ประเภท Submit & Reset 
<FORM>

ยืนยันการส่งข้อมูล
<INPUT TYPE='SUBMIT' VALUE ="Send">
<INPUT TYPE='RESET' VALUE ="Reset">

</FORM>

ผลลัพธ์ที่ได้
 
ยืนยันการส่งข้อมูล
 
Sumbit เป็นคำสั่งในการส่งข้อมูล
Reset เป็นคำสั่งในการเคลียร์ข้อมูล
 		รูปแบบการสร้างฟอร์ม มีหลายรูปแบบ เราสามารถนำแต่ละรูปแบบผสมผสานกันได้ เช่น การผสมระหว่าง รูปแบบกรอบป้อนข้อมูล กับ กรอบแบบสอบถาม เป็นต้น

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

ตัวอย่างการสร้างฟอร์มกลับมาอีเมลของเรา

<FORM METHOD = "post"
ACTION = "mailto:sskulrat@yahoo.com">

Name : <INPUT TYPE='TEXT' NAME = "YOURNAME" size="15">

PHONE : <INPUT TYPE='TEXT' NAME = "PHONE" size="15">

<INPUT TYPE='SUBMIT' VALUE ="Send">
<INPUT TYPE='RESET' VALUE ="Reset">

</FORM>

ผลลัพธ์ที่ได้
 
Name    : 
PHONE : 
 
ขอเชิญลองกรอกข้อมูล แล้วกดปุ่ม Reset ดู
    แบ่งพื้นที่จอภาพ
<FRAMESET COLS or ROWS = "80%,*" >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >

</FRAMESET>

แบ่งจอภาพในแนวตั้ง 

<FRAMESET COLS = "80%,*" >

<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >

</FRAMESET>

 

 
80%

 
 
20%

 

คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif


แบ่งจอภาพในแนวนอน 

<FRAMESET ROWS = "80%,*" >

<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >

</FRAMESET>

 
20%

 
80%

 

คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80%

แบ่งจอภาพในแนวตั้งและแนวนอน 

<FRAMESET ROWS = "15%,*" >

   <FRAME SRC = "top.html" >

     <FRAMESET COLS = "20%,80%" >

     <FRAME SRC = "left.html" >
     <FRAME SRC = "right.html" >

     </FRAMESET>

</FRAMESET>

 
15%

 
20%

 
80%

คำอธิบาย
แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80%
 		การแบ่งพื้นที่จอภาพ สามารถแบ่งได้ทั้งแถวตั้ง และแนวนอน สามารถจะแบ่งเท่าไหร่ก็ได้ ขึ้นกับผู้เขียน แต่อย่างไรก็ตาม ควรมีการกำหนดสัดส่วนให้ตรงกับข้อมูล หรือรูปภาพที่นำมาลงในเวปด้วย...

<FRAMESET> เป็นคำสั่งเริ่มต้นการแบ่งหน้าจอ และปิดท้ายด้วย </FRAMESET>
คำสั่งนี้ จะมาแทนที่คำสั่ง <BODY>

<FRAME SRC > เป็นคำสั่งย่อยของ FRAMESET เพื่อกำหนดการแสดงผลข้อมูลว่า จะแสดงเป็น HTML อีกไฟล์ หรือจะให้แสดงเป็นรูปภาพก็ได้

จากตัวอย่างด้านซ้าย เรากำหนดขนาดของจอภาพเป็นเปอร์เซ็นต์ 80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ) นอกจากนี้เรายังสามารถกำหนดเป็น pixel ได้ด้วย เช่น 500,100 เป็นต้น

คำสั่งเสริมเพิ่มเติม 
กำหนดตำแหน่งข้อความตามแนวนอน
align = "left"
align = "center"
align = "right"

กำหนดตำแหน่งข้อความตามแนวตั้ง
valign=top
valign = "middle"
valign = "bottom"

รูปแบบคำสั่ง
<TR ALIGN= "CENTER" >
หรือ <TR VALIGN= "TOP" >

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

<FRAME SRC = "right.html" name = "show" >
สร้างลิงค์ให้แสดงในพื้นที่ที่มีชื่อว่า show
<a href = "page2.html" target = "show">

 
เขียนโดย ที่ ไม่มีความคิดเห็น:

ใบงานที่ 9 ความหมายของ HTML

ความหมายของ HTML
<HTML>
<HEAD>
<TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว </TITLE>
</HEAD>
<BODY>
คำสั่งหรือข้อความที่ต้องการให้แสดง
</BODY>
</HTML>
 
<html> และ </html> เป็น tag ที่ใช้เพื่อกำหนดว่าเอกสารต่อไปนี้เป็นเอกสารที่ใช้ภาษา HTML เป็นMarkup Language และจะไม่ปรากฏในโปรแกรม Web Browser
<html>
                <head>
                                <title> การกำหนด background </title>
                </head>
                <body bgcolor="ใส่ชื่อสีหรือรหัสสีที่ต้องการ">
                </body>
</html>
 
Text Box: <html> <head> <title> การกำหนด background </title> </head> <body background="ใส่ชื่อและนามสกุลภาพลงไป เช่น pic1.jpg"> </body> </html>

HTML
HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผลของเว็บได้ด้วยHTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษาSGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ WWW เติบโตขยายตัวอย่างกว้างขวางตามไปด้วย Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่งHTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
·       Tag เดี่ยว  เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
·       Tag เปิด/ปิด  เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้นๆ เช่น <B>…</B>, <BLINK>…</BLINK> เป็นต้น
1.              เริ่มต้นการเขียน HTML
        การเขียนภาษา HTML ประกอบไปด้วย 2 ส่วน  คือ
1.        เครื่องมือที่ใช้เขียนโปรแกรม  คือ Text Editor  เช่น Notepad , EditPlus  เป็นต้น
2.       โปรแกรมแสดงผล  คือ  web browser (เว็บ บราวเซอร์) เช่น Internet Explorer, Netscapeเป็นต้น

2.              โครงสร้างพื้นฐานของ HTML
โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้










โดยแต่และส่วนสามารถอธิบายความหมายได้ดังนี้ 
<head> และ </head> เป็น tag ที่ใช้กำหนดส่วนหัวของเอกสาร Head ไม่ได้เป็นส่วนของเอกสารภายใน แต่จะให้ข้อมูลเกี่ยวกับเอกสารฉบับนี้
<title> และ </title> เป็นการระบุข้อความที่ต้องการให้เป็นส่วนหัวของเอกสาร Title จะเป็นส่วนหนึ่งของ Head โดยข้อความที่อยู่ใน Title จะไปปรากฏอยู่ที่ส่วนบนสุดของ Web Browser
<body> และ </body> เป็น tag ที่บอกถึงลักษณะต่าง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะมีAttributes ต่าง ๆ ได้แก่ BGCOLOR (หมายถึงการกำหนดสีพื้นด้านหลังของเอกสาร) , TEXT (หมายถึงการกำหนดสีของตัวอักษรในเอกสาร) เป็นต้น

3.              การบันทึกแฟ้ม
ไฟล์ของโปรแกรม HTML เป็นแท็ก ไฟล์ธรรมดา ที่ใช้ นามสกุลว่า .htm หรือ .html โดย เมื่อเรา เขียน คำสั่งต่าง ๆ ลงใน โปรแกรม Notepad แล้วเราจะ Save ให้เป็น นามสกุลดังกล่าว ถ้าไม่เช่นนั้น จะไม่สามารถแสดงผลได้ทางบราวเซอร์และถ้ามีการแก้ไขหรือเขียนโปรแกรมเราก็สามารถใช้โปรแกรมNotepadนี้เป็นตัวแก้ไขได้เละสำหรับไฟล์ที่จะเป็นHomePageให้บันทึกชื่อ ว่า index.htm    หรือ  index.html เสมอ
(ไม่ควรบันทึกแฟ้มโดยใช้ชื่อเป็นภาษาไทย)
4.              การแสดงผลโปรแกรม
        เมื่อบันทึกไฟล์ที่มีนามสกุล .htm  หรือ .html  แล้ว  สามารถเปิดแสดงผลจากโปรแกรมเว็บบราวเซอร์ที่มีในเครื่องได้เลย  เช่น โปรแกรม Internet Explorer

5.              การกำหนดพื้นหลัง (background)
5.1  กำหนดสีพื้นหลัง











5.2 กำหนดภาพพื้นหลัง
6.              การใส่ข้อความลงในโฮมเพจ
Text Box: <html> <head> <title>การใส่ข้อความลงในโฮมเพจ</title> </head> <body> ข้อความที่ต้องการ </body> </html>
การใส่ข้อความลงในโฮมเพจสามารถใส่ลงไประหว่าง <body> .... </body> ได้เลย  ดังตัวอย่างด้านล่าง

7.              จัดตำแหน่งข้อความ
7.1                   คำสั่งสำหรับขึ้นบรรทัดใหม่
ใช้คำสั่ง <br> วางไว้ท้ายข้อความที่ต้องการ Web browser จะแสดงผลข้อความต่อจากนั้นในบรรทัดต่อไป

7.2                   คำสั่งย่อหน้า
Text Box: <p> ข้อความ </p>





7.3                   คำสั่งสำหรับจัดตำแหน่งของย่อหน้า





Text Box: <p align="ตำแหน่ง"> ข้อความ </p>
       left =ชิดขอบซ้าย   เช่น                         <p align="left">   ข้อความ          </p>
right = ชิดขอบขวา เช่น                           <p align="right">   ข้อความ        </p>
center = กลางหน้ากระดาษ  เช่น           <p align="center">   ข้อความ      </p>


8.              การตกแต่งตัวอักษร
8.1       การกำหนดขนาดตัวอักษร
        คำสั่งที่ใช้สำหรับกำหนดขนาดตัวอักษร โดยการเติมตัวเลข -1 ถึง +7 โดยเลข -1 จะเล็กที่สุด
 และ +7 จะมีขนาดใหญ่ที่สุด
Text Box: <font size="ขนาดตัวอักษร"> ตัวอักษร </font>

8.2      การกำหนดชนิดตัวอักษร
Text Box: <font face="ชนิดตัวอักษร"> ตัวอักษร </font>

8.3      การกำหนดสีตัวอักษร
<font color="color"> ตัวอักษร   </font>
 





8.4       การกำหนดตัวเอียง ตัวหนา และ ตัวขีดเส้นใต้
<b>ตัวอักษรหนา</b>
<i>ตัวอักษรเอียง</i>
<u>ตัวอักษรถูกขีดเส้นใต้</u>
 






9.              คำสั่งขีดเส้นคั่น
Text Box: <hr> คือคำสั่งที่ใช้สำหรับขีดเส้นใต้
<hr width="ความยาว">
<hr size="ความหนา">
<hr align="ตำแหน่ง">
<hr color="Code สี">


10.       
Text Box: <img src="ชื่อรูปภาพ.นามสกุลภาพ">
คำสั่งแสดงรูปภาพ


<img src="logo.gif">   ในกรณีที่อยู่ใน directory (folder) เดียวกัน สามารถกำหนดชื่อ file ลงไปได้เลย
<img src="http://www.siamclub.com/logo.gif">  ในกรณีที่ดึงรูปภาพจากโฮมเพจอื่น จำเป็นต้องใส่ URL ให้ครบถ้วน
10.1            คำสั่งอธิบายรูปภาพ  ใช้สำหรับ อธิบายรูปภาพ เมื่อนำ mouse ไปชี้ที่รูปภาพจะขึ้นคำอธิบาย
Text Box: <img src="URL" alt="คำอธิบาย">

10.2            
Text Box: <img src="URL" align="ตำแหน่งที่ต้องการ">
การกำหนดตำแหน่งของรูปภาพ กับ ตัวหนังสือ


คือคำสั่งสำหรับจัด ตัวหนังสือให้พอดีกับรูปภาพ เช่น รูปภาพอยู่ทางซ้ายตัวหนังสือ ก็จะอยู่ด้านขวา ตัวหนังสืออยู่ด้านซ้ายรูปภาพก็จะอยู่ด้านขวา

10.3           การกำหนดขนาดรูปภาพ
<img src="URL" width="ความกว้าง" height="ความสูง">
 

 โดยมีหน่วยเป็น pixel หรือความกว้างสามารถกำหนดเป็น % ของจอภาพเพื่อ ให้เป็นสัดส่วนพอดีกับขนาดจริง


11.       . การเชื่อมโยง
11.1            การเชื่อมโยงภายในเอกสาร
<a href="#เป้าหมาย">.....</a> ข้อความที่ต้องการให้เป็น link
<a name="name">.....</a>ใช้สำหรับกำหนดชื่อของตำแหน่งเป้าหมายโดยแทนลงไปในตัวแปรname
 







                        การ link ภายในเอกสาร เหมาะสำหรับ file HTML ที่มีความยาวมากๆ จำเป็นต้องมีการlink ภายในเอกสาร เพื่อไม่ให้ เกิดความยุ่งเหยิง สำหรับการ link ภายในเอกสารมีคำสั่งดังนี้
11.2            การเชื่อมโยงไปโฮมเพจอื่น
<a href="URL"> ข้อความที่ต้องการให้เป็น link  </a>
 





11.3            การ link ไปยัง E-mail
<a href="mailto:E-mail ของเรา">  ข้อความที่ต้องการให้เป็น link    </a>
 






12.       ตาราง
การทำตารางมีประโยชน์ต่อการเขียนโฮมเพจมากเนื่องจากเป็นคำสั่งเดียวที่จะสามารถแบ่งข้อมูลออกเป็น 2 ฝั่งได้ ซึ่งเว็บไซต์ดังๆทั่วโลกนิยมใช้คำสั่งตารางกันมาก รูปแบบคำสั่งคือ
<html>
<head>
<title>พื้นฐานคำสั่งตาราง</title>
</head>
<body>
                      <table>
<tr><th> หัวข้อที่ 1</th><th> หัวข้อที่ 2</th><th> หัวข้อที่ 3</th></tr>
<tr><td> ข้อมูลที่ 1 แถว 1</td><td> ข้อมูลที่ 2 แถว 1</td><td> ข้อมูลที่ 3 แถว1</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 2</td><td> ข้อมูลที่ 2 แถว 2</td><td> ข้อมูลที่ 3 แถว2</td></tr>
<tr><td> ข้อมูลที่ 1 แถว 3</td><td> ข้อมูลที่ 2 แถว 3</td><td> ข้อมูลที่ 3 แถว3</td></tr>
      </table>
</body>
</html>
 
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)