อันดับแรกเปิดโปรแกรม Note pad ขึ้นมา วิธีเปิดดูตามรูปข้างล่าง
เปิดโปรแกรม Note pad ขึ้นมา
ถ้าหาไม่เจอก็เปิดดูตามไปในรูปครับ
จากนั้นพิมพ์ ข้อความข้างล่าง
<HTML>
<Body>
สวัสดีครับ ทุกท่าน ยินดีต้องรับเข้าสู่ (ใส่ชื่อเว็ปก็ได้ครับ)
ใส่ข้อความที่เราต้องการ
สวัสดีครับ ทุกท่าน ยินดีต้องรับเข้าสู่ (ใส่ชื่อเว็ปก็ได้ครับ)
<BR> ใส่ข้อความที่เราต้องการ
(ถ้าใส่ บรรทัดเดี๋ยวไม่จบ ใส่ <BR> เพื่อลงไปบรรทัดต่อไปได้ครับ)
<BR> ขอให้โชคดีครับ
<BR> ลงชื่อท่าน
</Body>
</HTML>
หลังจากปิดท้ายด้วย ก็ เซฟ ตั้งชื่อว่า MY PAGE.HTML
จากนั้นไปเปิดใส่ IE ก็จะได้เว็ปเพจของคุณหนึ่งหน้าแล้วครับ
HTML เบื้องต้น
ขออธิบายตามภาษาพูด หรือบอกให้เข้าใจนะครับ จะได้เข้าใจกันง่ายๆเลย คุณจะได้ไม่งงกับภาษาที่เป็นทางการเวลาอธิบายเกินไปนัก แหะ แหะ -_- อาศัยความเข้าใจไม่เน้น ทฤษฎีเกินเหตุ หวังว่าคงจะเข้าใจง่ายขึ้นนะครับ
Html เป็นภาษาที่ใช้ในการสร้างเว็บเพจ ซึ่งถือว่า เป็นเบสิคในการเขียน script ของหลายๆภาษาทีเดียว ซึ่งเราสามารถใช้เครื่องมือในการเขียน script ได้หลายๆอย่าง เช่น Notepad, dreamwever ฯลฯ Html เป็น script ซึ่งจะเรียงคำสั่งต่างๆเอาไว้ด้วยกัน หลายๆคำสั่ง ซึ่งจะเก็บเอาไว้ในไฟล์ๆ หนึ่งที่ผู้เขียนสร้างขึ้น แล้ว browser จะแสดงผลของคำสั่งนั้นๆออกมาเป็นรูปแบบต่างๆ ตามโค๊ดที่ผู้เขียนได้เขียนไว้ เช่น
ตัวอย่างการเขียน Html
<html>
<body>
<font size="5" color="red">สวัสดีครับ musicme.com </font>
</body>
</html>
หลังจากนั้นลองเซฟไว้ที่ Desktop เป็นชื่อ test.html
แล้วลองดับเบิ้ลคลิ๊กที่ไฟล์นี้ดู
ผลลัพท์ที่ได้
สวัสดีครับ musicme.com
อธิบายโค๊ด : ในโค๊ดข้างต้น เป็นการเริ่มต้นเปิด แท็ก html ซึ่งทุกครั้งที่จะเขียน script ต่างๆลงไฟล์ ต้องมีการเปิดแท็กของภาษาเสมอ ซึ่งในที่นี้คือภาษา html ก็จะเปิดแท็กด้วย ซึ่งโครงสร้างต่างๆ ในการเขียน html จะกล่าวในบทต่อไป ในบทนี้เราจะค่อยๆทำความเข้าใจกับมันไปทีละนิดก่อนนะครับ จะได้ไม่งง
ดั่งตัวอย่างข้างต้นเราจะเห็นว่ามีการเขียน script ของภาษา html ขึ้น พอเขียนเสร็จ แล้วเราจะต้อง save เก็บไว้ โดยตั้งชื่อว่าอะไรก็ได้ แต่จะต้องเป็นนามสกุล .html หรือ .htm เท่านั้นนะครับ สำหรับภาษา html ซึ่งดังตัวอย่างเราได้เซฟเป็น test.html หลังจากเซฟเสร็จ เราก็ไปดูไฟล์ที่เราเซฟไว้ (ระวัง!! นะครับ ถ้าฝึกใหม่ๆ อย่าลืมว่าเซฟไว้ที่ใหน เดี๋ยวจะหาไม่เจอ -_- ) หลังจากนั้นก็ลองเปิดดู แล้วคุณก็จะเห็น ผลลัพท์ที่เราได้สร้างไว้ ซึ่งเป็น script ของ html รวมตัวกันเป็นไฟล์ ให้ Browser ประมวลผล แล้วแสดงออกมาดังภาพนั่นเองครับ
หลักการทำงานของภาษา Html ก็จะประมาณนี้แหละครับ ไม่ยากหรอก แต่ว่าจะมีโค๊ดๆต่างๆ ซึ่งจะมีหน้าที่กำหนดคุณลักษณะต่างๆ ออกมาให้ Browser ประมวลผลออกมาในรูปแบบต่างๆกันออกไป
โครงสร้างของ HTML
โครงสร้างของ Html นั้นถือว่าเป็นโครงสร้างที่เป็นมาตรฐาน ซึ่งหากว่าวันหนึ่ง คุณได้ฝึกเขียนภาษาอื่นๆ คุณก็อาจจะทำความเข้าใจกับภาษาเหล่านั้นได้ดี เพราะว่าคุณมีความรู้ และ ความเข้าใจในโครงสร้างของ Html มาก่อนแล้วนั่นเอง
สิ่งที่จะต้องจดจำก็คือ ทุกครั้งที่คุณจะเขียน script คุณก็จะต้อง เปิดแท็กเสมอ < >เช่น และเมื่อจบ script หรือคำสั่งต่างๆ คุณก็จะต้องปิดแท็กด้วยเครื่องหมายนี้เสมอ เช่น ซึ่งแท็กเปิดและปิดนั้น ก็จะเขียนในรูปแบบนี้โดยตลอดนั่นเอง แต่ว่าคำสั่งใน แท็กเปิดและปิดนั้นจะเป็นอย่างไรนั้น ก็ขึ้นอยู่กับ คำสั่งต่างๆนั่นเอง
คำสั่งมาตรฐานในการสร้างเว็บเพจต่างๆ ซึ่งทุกเว็บควรจะมี ได้แก่
........ วางไว้ที่ต้นและท้ายของไฟล์ เพื่อให้ Browser รู้ว่า โค๊ดที่กำลังจะอ่าน และนำออกมาแสดงผล เป็นโค๊ดของ html
....... ใช้สำหรับกำหนดชื่อเรื่องของเว็บเพจ แต่จะไม่ปรากฎให้เห็นผ่านทาง Browser ซึ่ง บางครั้งการแทรก script ของ javascript ก็มักจะแทรกไว้ระหว่าง นั่นเอง
ใช้กำหนดชื่อให้ website ที่สร้าง ดูตัวอย่างที่ไตเติ้ลด้านบนของเว็บ (funwhan.com โครงสร้างของภาษา html) ซึ่งการเขียนแท็ก จะต้องเขียนไว้ระหว่าง ...... เสมอ
เราลองมาดูตัวอย่างการเขียนโค๊ดของ html กันนะครับ ว่าโครงสร้างนั้นเป็นอย่างไร
<--- เปิดแท็ก ทุกครั้ง เริ่มต้นต้องประกาศภาษา html ให้ browser รู้ว่านี่คือโค๊ด html
(ตามด้วย head ของเอกสาร แล้วต่อด้วย title **** สังเกตุดูนะครับ เวลาปิดแท็ก จะต้องไล่ปิดจากตัวสุดท้ายของโค๊ดที่เขียน จนมาถึงตัวแรกเสมอ
<-- ส่วนของเนื้อหาภายในเว็บเพจ จะต้องเริ่มต้นเปิดแท็กด้วย
สวัสดีครับผมชื่อ ชาติชาย ทิพเนตร
ยินดีต้อนรับสู่บทเรียน <-- ** สังเกตุตรงนี้นะครับ สำคัญมากเลย การเปิดและปิดแท็ก ดูว่าตัวอย่างนี้ เปิดแท็กที่คำสั่งใหนก่อน และ ไล่ปิดแท็กตามลำดับอย่างไร ลองดูครับ สังเกตุดีๆ
ลองดูผลลัพท์ที่ได้นะครับ
ผมชื่อ ชาติชาย ทิพเนตร
ยินดีต้อนรับสู่บทเรียน
ผลลัพท์จะออกมาโดยประมาณนี้นะครับ ส่วน ก็ลองดูที่ด้านบนนะครับ ว่าเป็นอย่างไร
แต่ที่สำคัญที่ควรจะจดจำ นั่นก็คือคำสั่ง และ โครงสร้างของภาษา จะเปิดแท็ก ปิดแท็ก ต้องทำให้ถูกนะครับ ไม่งั้นคำสั่งจะไม่ทำงาน
การใส่สีพื้นหลังให้กับ Background
ในบทเรียนนี้ เราจะมาดูโค๊ดที่ ใส่สีพื้นหลังให้ background กันดูนะครับ แต่ขอแนะนำนิดนึงนะครับว่า เราควรเลือกสีให้เหมาะสมกับ ตัวหนังสือ หรือไม่ก็ภาพประกอบต่างๆภายในเว็บเพจด้วย มิฉะนั้น อาจจะออกมาดูแปลกๆ
การใส่สีให้กับพื้นหลังมีคำสั่งดังต่อไปนี้
<-- ใส่คำว่า bgcolor="ค่าสี" ต่อจาก การเปิดแท็ก
ทดสอบสีของพื้นหลัง
ผลลัพท์ที่ได้
ทดสอบสีของพื้นหลัง
นอกเหนือจากการกำหนดโค๊ดของสีพื้นหลังให้เป็น โค๊ดแบบ "#FFCCFF" รหัสค่าสีแล้ว คุณยังสามารถที่จะกำหนดค่าสีเป็นแบบตัวอักษรแทนชื่อสีได้โดยตรงเช่น
ทดสอบค่าสีโดยใช้ชื่อสีโดยตรง
ผลลัพท์ที่ได้
ค่าสีทดสอบโดยใช้ชื่อสีโดยตรง
ข้อดีของการกำหนดค่าสีแบบใช้ชื่อสีโดยตรงคือ จำง่าย แต่ว่า หากว่าเราต้องการกำหนดค่าสีให้มีความอ่อนเข้มแตกต่างกันนั้น ก็อาจจะทำไม่ได้ดีเท่าไรนัก นอกจากใช้รหัสค่าสีแบบตัวอย่างแรกแทน
ตัวอย่างการกำหนดค่าสีแบบตัวเลข
"#000000"= สีดำ
"#FFFFFF"= สีขาว
"#FF0000" = สีแดงเข้ม
"#9900FF" = สีม่วง
"#FF33FF" = สีชมภู
"#0000FF" = สีน้ำเงิน
"#99FF00" = สีเขียว
นอกเหนือจากนี้เรายังสามารถกำหนค่าสีอื่นๆได้อีก โดยการนำค่าสีแต่ละสีมาผสมกัน ซึ่งมือใหม่อาจจะคิดว่าคงจะยาก หากเราจะกำหนดสีให้ได้ดั่งใจ แต่ผมขอบอก.. ไม่ยากอย่างที่คุณคิดหรอกครับ เพราะว่าเดี๋ยวนี้มีโปรแกรมในการทำเว็บไซด์ต่างๆมากมาย ซึ่งเมื่อคุณจะเลือกสี โปรแกรมนั้นก็จะแสดงสีต่างๆ ให้คุณได้เห็นแบบที่ต้องการเลยหละครับ
บทความ
0 แสดงความคิดเห็น:
แสดงความคิดเห็น