มีปัญหาในการใช้งานเวบบอร์ด ติดต่อทีมงาน อีเมล fourfanclub@hotmail.com

การเขียน Code Html ผู้เรื่มต้น (แบบเต็มเนื้อหา)

โฟร์แฟน อะคาเดมี่ สอนกราฟฟิค, ทำเวบไซต์, ถ่ายภาพ, ตัดต่อวีดีโอ, แต่งเพลง ฯลฯ

การเขียน Code Html ผู้เรื่มต้น (แบบเต็มเนื้อหา)

โพสต์โดย piyawut02 » พุธ มิ.ย. 27, 2007 8:33 pm

สำหรับคนที่ต้องการจะเรียนนะคับ

สำหรับคนที่ชอบทำเว็ปอย่างง่ายก้ไปหา Macromedia Dreamwhever มาทำนะคับ (คงจะสะกดถูกนะคับ)

ส่วนคนที่ไม่ชอบอะไรที่ง่ายเกินไปก้มาเข้าใจภาษาที่ง่ายมากๆของ Computer กันก่อน

เขาเรียกกันว่า ภาษา Html ซึ่งเอาไว้เขียน Code สถานที่ๆจะเขียนสามารถใช้ได้หลายอย่างนะคับ แต่ที่ผมแนะนำไม่ต้องไปโหลดเลยก้คือ โปรแกรม Notepad ของท่านเองอ่ะคับ Start > Program >Assesories > Notepad (สำหรับคนที่หาไม่เจอนะคับ)

เขียนโดย ผมเอง Piyawut02

บทที่ 1 เริ่มต้นการเขียนเว็ปไซต์

การเขียนนี้มีหลักอยู่ว่า

<html>
<head><title>.......</title></head>
<body>
...............................
</body>
</html>

ผมจะอธิบายทีละส่วนนะคับสำหรับวันนี้

<html> /* คือการเปิด Tag ที่จะสามารถเริ่มเขียนโค๊ดอ่ะนะคับ ไม่จำเป็นต้องรู้เยอะอ่ะคับ เอาไว้เป็นความรู้ก่อน*/

<head> /*ส่วนนี้หมายความว่า หัวเรื่อง ที่ท่านเห็นบ่อยๆในเว็ปต่างๆที่เขาจะมีหัวข้อเรื่อง (ถ้าท่านเอาไปเขียนก้จะรู้เองอ่ะคับ)*/

<title> /*ส่วนของ Title bar หรือแถบที่หลายๆคนชอบกดเครื่องหมาย กากบาท หรือ ย่อ หน้าจอ มันจะอยู่ตรงทางซ้ายมืออ่ะคับ*/

</head>/*นี่คือ Tag ปิดนะคับ เพราะว่าเมื่อมีเปิดต้องมีปิด ในเมื่อเขียนจบแล้วก้ต้องปิดมันนะคับ จำไว้นะคับ ถ้ามีเครื่องหมาย / นำหน้า Tag ต่างๆ แปลว่ามันปิดนะคับ*/

<body> /*ส่วนนี้เป็นเนื้อเรื่องและน้ำของเรื่องทั้งหมด ไม่ว่าจะเป็นเนื้อหา ภาพประกอบ หรือข้อความในเว็ป อยู่ที่นี่คับ*/

</html> /*นี่ก้ปิดเหมือนกันคับ *ทุกอันต้องมี tag ปิดนะคับ แต่ผมขี้เกียจเขียนทั้งหมด ยังไงก้ขอให้รู้ไว้ด้วยละกันนะคับ*/

ส่วนวิธีการ Save โดยทั่วไปแล้วถ้าสมมติว่าเรา Save ใน Notepad หรือโปรแกรม Editplus แล้วจะเป็นไฟล์ txt หรือไฟล์ Text นะคับ แต่การที่เราจะให้มันแสดงผลต้อง Save ตามนี้นะคับ
1. กด Save หรือ Ctrl + S
2. พิมพ์ชื่อตามด้วย . (dot) html ตามหลังเช่น index.html
3.จากนั้นก้เสดแล้วคับ

เหอๆ

ง่ายใช่ไหมคับ? ผมคิดว่าหลายๆคนคงสามารถเขียนได้แล้ว ไว้วันหลังผมจะมาต่อบทที่ 2 นะคับ
ภาพประจำตัวสมาชิก
piyawut02
 
โพสต์: 83
ลงทะเบียนเมื่อ: อังคาร ส.ค. 29, 2006 7:37 pm
ที่อยู่: www.fourfan.com

โพสต์โดย ku_mam » พฤหัสฯ. มิ.ย. 28, 2007 5:42 pm

ขอบคุนค่ะๆๆ
น้องแมมรักพี่โฟร์ตลอดไป .. *
ku_mam
 
โพสต์: 1228
ลงทะเบียนเมื่อ: พฤหัสฯ. พ.ค. 31, 2007 12:08 pm
ที่อยู่: F ou r f a n cm . *

โพสต์โดย นัยน้อย » ศุกร์ มิ.ย. 29, 2007 6:46 pm

อยากทำแบบขั้นเทพเยยอ่า
เหอๆ
HELLO FOUR MOD
http://facebook.com/ndanai << MY facebook

รูปภาพ

นัยน้อย
เด็กเวบ
เด็กเวบ
 
โพสต์: 5204
ลงทะเบียนเมื่อ: ศุกร์ พ.ย. 10, 2006 10:51 pm
ที่อยู่: โฟร์แฟนดอทคอม

โพสต์โดย อั้น » ศุกร์ มิ.ย. 29, 2007 11:18 pm

ถ้าอยากทำแบบขั้นเทพเลยก็ เข้าgoogleแล้วเขียนคำว่า
สอน HTML
แล้วเลือกดูเอานะ พีก็ได้มาจากเนี้ยล่ะ
อั้น
 
โพสต์: 654
ลงทะเบียนเมื่อ: จันทร์ ต.ค. 17, 2005 3:16 pm

โพสต์โดย mameaw_zaa » อาทิตย์ ก.ค. 01, 2007 9:44 pm

ขอบคุณมากๆเลยค่ะ
รูปภาพ
ภาพประจำตัวสมาชิก
mameaw_zaa
 
โพสต์: 59
ลงทะเบียนเมื่อ: อังคาร มิ.ย. 12, 2007 7:17 pm
ที่อยู่: ข้างๆพี่โฟร์

โพสต์โดย piyawut02 » อังคาร ก.ค. 03, 2007 8:29 pm

อั้น เขียน:ถ้าอยากทำแบบขั้นเทพเลยก็ เข้าgoogleแล้วเขียนคำว่า
สอน HTML
แล้วเลือกดูเอานะ พีก็ได้มาจากเนี้ยล่ะ


ใช่ครับ นั่นก้เป็นทางเลือกหนึ่งในการเขียนเว็ปโดยการศึกษาด้วยตนเองแบบทางหนึ่ง แต่สำหรับคนที่ไม่อยากไปไกลผมจะสอนต่อล่ะนะคับ (ช้าไปนิดอย่าว่ากันนะคับ งานเยอะง่ะ)

จากครั้งที่แล้วเราได้รู้ว่ารูปแบบการเขียนเว็ปภาษา Html ก้จะมี

โค้ด: เลือกทั้งหมด
<html>
<head><title></title></head>
<body>
</body>
</html>


เราจะมาเพิ่มเนื้อหาเรื่อง Font กันนะคับในวันนี้

คำสั่งต่อจากนี้คือคำสั่งในการเพิ่มให้ Font ของเราแปลกไปนะคับ มีดังนี้

โค้ด: เลือกทั้งหมด
<b.> คำสั่งทำให้ตัวหนังสือหนา
<i.>  คำสั่งทำให้ตัวหนังสือเอียง
<u.> คำสั่งทำให้ตัวหนังสือมีขีดเส้นใต้  (Under Line)


จากคำสั่งที่ผ่านมาเห็นได้ว่าถ้าคุณเคยพิมพ์รายงานใน Microsoft Word มาก่อน คุณจะคุ้นเคยกับตัวหนังสือพวกนี้ดี เพราะว่ามันเอาไว้ใช้ในการพิมพ์ ส่วนวิธีใช้ก้เช่น

โค้ด: เลือกทั้งหมด
<b.>This is Four Fans web</b>


จากคำสั่งข้างต้น เป็นการทำให้ตัวหนังสือที่เราเลือกไว้เป็นตัวหนา

--------------------------------------------------

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

โค้ด: เลือกทั้งหมด
<marquee.>......</marquee>
นี่คือรูปแบบคำสั่งคับ

เช่นว่า

<marquee>ยินดีต้อนรับสู่เว็ปครับ</marquee>

โค้ด: เลือกทั้งหมด
ส่วนวิธีเว้นบรรทัดก้มีคำสั่งดังนี้คับ    <br> ไม่ต้องมี Tag ปิดนะคับ   เช่นว่า   "Today I have date"Said John<br>"Hey"my father get angry when he know.


และคำสั่งเว้นบรรทัดก้มีนะคับ แต่ส่วนมากมักจะไม่ค่อยปรากฏใน Source Code เท่าไหร่ คำสั่งนั้นคือ

&nbsp; และมีอีกคำสั่งหนึ่งซึ่งเว้นวรรคเป็น Paragraph หรือเว้นวรรคเป็นย่อหน้านั่นเอง คือคำสั่ง

โค้ด: เลือกทั้งหมด
<p.>  ซึ่งเมื่อไว้หลังข้อความใด   ข้อความต่อไปก้จะเป็นย่อหน้าใหม่ทันที


---------------------------------------------------------------------

สรุป มีคำสั่งที่ผมกล่าวมาดังนี้

โค้ด: เลือกทั้งหมด
<b.></b>
<i.></i>
<u.></u>
<br>
&nbsp;
<marquee.></marquee>
<p.>

ซึ่งคำสั่งทั้งหมดเป็นคำสั่งเกี่ยวกับ Fonts ที่ใช้กันบ่อยๆ

--------------------จบบทนี้แล้วคับ--------------------------------------

Trip เสริม

การใส่สีให้ตัวอักษร สามารถทำได้ดังนี้

<
โค้ด: เลือกทั้งหมด
font color="สีที่ต้องการ   จะเป็นรหัสสีหรือว่าชื่อสีก้ได้">ตัวหนังสือที่ต้องการ</font>


Ex. <font color="pink">Four Fan</font>
หรือ <font color="#F69EE2">Four Fan</font>

*คำสั่งทุกคำสั่งที่มี จุด หรือ Full Stop(Period) ทุกอันในคำสั่งเช่นว่า <b.> ถึงเวลาจริงไม่ต้องเติมจุดนะคับ เพราะว่าเว็ปบอร์ดแห่งนี้เปิดให้บริการ Code Html ถ้าผมไม่เติมบางอย่างเข้าไป Code มันจะทำงานและเราก้จะไม่สามารถเห็นตัว Code ได้ ดังนั้นเมื่อถึงเวลาที่ท่านนำไปทดลองใช้ ไม่ต้องเติมจุดนะคับ
ภาพประจำตัวสมาชิก
piyawut02
 
โพสต์: 83
ลงทะเบียนเมื่อ: อังคาร ส.ค. 29, 2006 7:37 pm
ที่อยู่: www.fourfan.com

โพสต์โดย piyawut02 » พฤหัสฯ. ก.ค. 05, 2007 10:46 pm

บทต่อมา การทำลิ๊งและใส่ภาพลงในเว็ปบอร์ด

เป็น Code ที่ยาวกว่าบทก่อนหน้านี้ ผมจึงจัดให้อยู่ในบทถัดไปซึ่งก้คือบทนี้ เพื่อที่จะได้ไม่สับสนและเบื่อไปเสียก่อน

โค้ด: เลือกทั้งหมด
<img src="Links ที่ใส่ภาพอยู่">


Code นี้เอาไว้ใส่ภาพนะคับ แต่จะใช้ได้สำหรับภาษา Html เท่านั้นนะคับ แต่ว่าถ้าจะใช้ในบอร์ดนี้ต้องใช้คำสั่ง [img].....[/img] ซึ่งอาจจะต่างกันบ้างเล็กน้อย เพราะว่าเว็ปบอร์ดที่ใช้กันเมื่ออัพจาก PHPBB มากลายเป็น PHPNUKE แล้วนั้น บางคำสั่งอาจจะเปลี่ยนไปบ้าง

ส่วนคำสั่งที่ 2 ก้คือ

โค้ด: เลือกทั้งหมด
<a href="ลิ๊งที่ต้องการให้ไป">ชื่อที่จะให้ปรากฏ</a>


เช่นว่า

<a href="http://www.google.co.th">Click Here!</a>

ความหมายของคำสั่งนี้หมายความว่า ให้พาไปยังเว็ป www.google.co.th โดยที่ตัวหนังสือที่เราเห็นคือ Click Here! นั่นเอง

คำสั่งที่สำคัญในบทนี้ก้มีอยู่แค่นี้นะคับ แล้วค่อยไปขึ้นบทต่อไปกันนะคับ

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

เจอกันบทหน้า
การรักคัยซักคนคุณต้องรับข้อด้อยของเขาหั้ยด้าย
ภาพประจำตัวสมาชิก
piyawut02
 
โพสต์: 83
ลงทะเบียนเมื่อ: อังคาร ส.ค. 29, 2006 7:37 pm
ที่อยู่: www.fourfan.com

โพสต์โดย piyawut02 » พุธ ก.ค. 11, 2007 6:09 pm

บทที่ 3

ช่วงนี้ดูเหงาๆนะ บอร์ดผมเข้ามาก้ไม่ค่อยเห็นใครเท่าไหร่ แต่ผมจะพยายามเข้ามาอัพนะคับ

การใส่ไฟล์ VDO และ Blackground

เริ่มแรกด้วยการใส่ Back Ground ก่อนนะคับ เพราะว่ามันง่ายกว่าง่ะ

ก้ใส่ Code ตามนี้นะคับ แต่ต้องขอย้ำนะคับ ต้องใส่ในช่วง Body เท่านั้น แต่มันพิเศษหน่อยอ่ะคับ ถ้าอยากรู้ก้มาดูกันเลย

โค้ด: เลือกทั้งหมด
<body background="Link Background ของคุณ" bgproperties=fixed>


นี่แหละคับ เพราะว่ามันต้องใส่ใน <Body> เท่านั้น เพราะฉะนั้นถ้าคุณใส่ข้างนอก Code นี้ก้จะไม่มีปฏิกริยาตอบสนองนะคับ

ส่วนถ้าคุณจะใส่พื้นหลังเป็นสีธรรมดาก้ให้ใส่ Code ตามนี้นะคับ

โค้ด: เลือกทั้งหมด
<body bgcolor="สีที่คุณจะใส่">


เช่นว่า <body bgcolor="pink"> หรือรหัสสีก้ได้อ่ะนะคับ

------------------------------------------------------------------------------------------------------------------------------------------------------------

ส่วนอันต่อไปที่จะสอนก้คือ การใส่ไฟล์ avi ซึ่งเป็นวีดีโออ่ะนะคับ

ให้ใส่ Code ดังนี้นะคับ

โค้ด: เลือกทั้งหมด
<embed src="Link ของไฟล์ VDO" width="200" height="200" autostart="true" loop="true"></embed>


Width คือ ความกว้างของหน้าจอ
Height คือ ความสูงของหน้าจอ
Autostart คือ จะปรับให้มันเล่นเองโดยอัตโนมัติเมื่อโหลดเสร็จหรือไม่
loop คือ การทำซ้ำ หรือพูดง่ายๆคือ เมื่อมันเล่นจบ จะให้มันวนเล่นอีกรอบหรือไม่

จบบทนี้แล้วคับ ลืมบอกไปนะคับ ตามจิงเครื่องมือในการใช้หรือ Code มีมากกว่านี้ แต่ Code นี้ผมถือว่ามันไม่ยากจนเกินไปทีจะเอามาให้ทุกๆคนลองฝึกดูอ่ะนะคับ ยังไงก้ลองทำดูนะคับ
การรักคัยซักคนคุณต้องรับข้อด้อยของเขาหั้ยด้าย
ภาพประจำตัวสมาชิก
piyawut02
 
โพสต์: 83
ลงทะเบียนเมื่อ: อังคาร ส.ค. 29, 2006 7:37 pm
ที่อยู่: www.fourfan.com

โพสต์โดย mameaw_zaa » ศุกร์ ก.ค. 13, 2007 9:12 pm

ขอบคุณมากๆเลยค่ะ
รูปภาพ
ภาพประจำตัวสมาชิก
mameaw_zaa
 
โพสต์: 59
ลงทะเบียนเมื่อ: อังคาร มิ.ย. 12, 2007 7:17 pm
ที่อยู่: ข้างๆพี่โฟร์

โพสต์โดย Ooนู๋นัทoO » เสาร์ ก.ค. 14, 2007 5:46 pm

ยากจังคร๊าบบบ
<CENTER>รูปภาพ</CENTER>
Ooนู๋นัทoO
 
โพสต์: 158
ลงทะเบียนเมื่อ: ศุกร์ พ.ค. 18, 2007 5:17 pm

โพสต์โดย piyawut02 » อาทิตย์ ก.ค. 15, 2007 9:04 pm

ค่อยๆลองอ่านหลายๆรอบดูคับ จะสามารถทำได้เองล่ะคับ

(คิดแบบนี้แล้วกัน Html เป็นภาษาที่ง่ายที่สุดในการบอก Computer) จะได้ไม่กังวลใจเวลาเขียนไงล่ะคับ

ส่วนบทต่อไปกำลังหาข้อมูลที่น่าสนใจมาเขียนอยู่นะคับ รอซักหน่อยล่ะคับ
การรักคัยซักคนคุณต้องรับข้อด้อยของเขาหั้ยด้าย
ภาพประจำตัวสมาชิก
piyawut02
 
โพสต์: 83
ลงทะเบียนเมื่อ: อังคาร ส.ค. 29, 2006 7:37 pm
ที่อยู่: www.fourfan.com


ย้อนกลับไปยัง อะคาเดมี่

ผู้ใช้งานขณะนี้

่กำลังดูบอร์ดนี้: ไม่มีสมาชิก และ บุคคลทั่วไป 1 ท่าน

cron