การสร้างโฮมเพจ
ปัจจุบันระบบเครือข่ายอินเทอร์เน็ต ได้เข้าไปมีบทบาทในชีวิตประจำวัน ในฐานะที่เป็นแหล่งความรู้ เป็นแหล่งประกอบธุรกิจ เป็นอุปกรณ์ที่ใช้ในการติดต่อสื่อ สิ่งต่างๆ ที่กล่าวถึงถูกนำเสนอในรูปแบบของโฮมเพจ ทำให้หลาย ๆ คนเกิดคำถามขึ้นมาว่า โฮมเพจเหล่านี้ถูกสร้างขึ้นมาได้อย่างไร ในการสร้างโฮมเพจนั้นผู้สร้างต้องมีความรู้เกี่ยวกับภาษา HTML หรือรู้จักวิธีการใช้เครื่องมือต่างๆ ที่อยู่ในรูปแบบของโปรแกรมประยุกต์มาใช้ในการสร้างเว็บเพจ ซึ่งได้แก่ FrontPage DreamWeaver AdobePagemill ฯลฯ นอกจากนั้นยังต้องรู้ขั้นตอนวิธีในการนำโฮมเพจไปเผยแพร่บนระบบเครือข่ายอินเทอร์เน็ตอีกด้วย
HTML คืออะไร
HTML ย่อมาจากคำว่า Hypertext Markup Language พัฒนามาจากภาษา SGML (Standard Generalized Markup Language) โดย นาย Tim Berners - Lee เป็นภาษามาตรฐานที่ใช้พัฒนาเอกสารในรูปแบบของเว็บเพจบนระบบเครือข่ายอินเทอร์เน็ต การเรียกใช้เอกสารเหล่านี้ทำได้โดยการใช้โปรแกรมเว็บบราวเซอร์ (Web Browser) เช่น Mosaic , Opera , Nescape navigator , Internet Explorer ฯลฯ เรียกดูแฟ้มที่สร้างด้วยภาษา HTML ข้อดีของ HTML คือสามารถใช้ได้กับเครื่องคอมพิวเตอร์ และระบบปฏิบัติการได้หลากหลายชนิด
แฟ้มข้อมูลที่เขียนด้วยภาษา HTML นั้นจะมีการนำคำสั่ง HTML ที่เรียกว่า แท็ก (Tag) มากำหนดลักษณะและรูปแบบของเอกสารที่แสดงบนจอภาพ แท็ก (Tag) ประกอบด้วย เครื่องหมายน้อยกว่า (<) ตามด้วยชื่อแท็ก ปิดท้ายด้วยเครื่องหมายมากกว่า (>) เช่น <HTML>, <HEAD>, <BODY> ชื่อแท็กนั้นอาจจะเป็นตัวเล็กหรือตัวใหญ่ก็ได้ แท็กในภาษา HTML สามารถแบ่งออกได้เป็นสองชนิดเดียวคือ
- แท็กที่ประกอบด้วยแท็กเปิดและแท็กปิด เช่น <HTML> เป็นแท็กเปิด ส่วน
</ HTML> เป็นแท็กปิด - แท็กที่ไม่มีแท็กปิด เช่น แท็ก <BR> ไม่ต้องมีแท็ก </BR>
ปัจจัยพื้นฐานในการเขียนโฮมเพจโดยใช้ภาษา HTML
ในการพัฒนาโฮมเพจด้วยภาษา HTML นั้นเราต้องปัจจัยพื้นฐานที่จำเป็น ดังนี้
- โปรแกรมแก้ไขข้อความ (Text Editor) เช่น โปรแกรม Emacs, PICO หรือ vi บนระบบปฏิบัติการ UNIX, โปรแกรม Simple Text บนระบบปฏิบัติการ Macintosh หรือ โปรแกรม Notepad บนระบบปฏิบัติการ Windows และในกรณีที่ต้องการใช้โปรแกรมประยุกต์ประเภท WYSIWYG (What You See Is What You Get) ก็มีโปรแกรมให้เลือกใช้ได้มากมาย เช่น FrontPage, DreamWeaver, Adobe PageMill ฯลฯ
ภาพแสดงโปรแกรมแก้ไขข้อความ (Text editor) Notepad
- โปรแกรมตกแต่งรูปภาพ (Graphics Design) เช่น โปรแกรม PaintShop pro, Ulead PhotoImpact, PhotoShop ฯลฯ
- โปรแกรมเว็บบราเซอร์ เช่น โปรแกรม Netscape Navigator หรือโปรแกรม Internet Explorer เพื่อใช้ในการตรวจสอบผลลัพธ์ของการเขียน HTML
รูปแบบของการเขียน HTML
ในการเขียน HTML นั้นเราจะต้องจัดวางรูปแบบของแท็กต่าง ๆ ให้ถูกต้องโดยแท็กพื้นฐานที่ต้องมีในการเขียน HTML ได้แก่
| tag | รายละเอียด |
|---|---|
| <HTML>…</HTML> | เป็นแท็กกำหนดถึงจุดเริ่มต้นและจุดสิ้นสุดของเอกสาร HTML |
| <HEAD>…</HEAD> | เป็นแท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนกำหนดค่าเริ่มต้นของเอกสาร HTML เช่น ชื่อของเอกสาร |
| <TITLE>…<TITLE> | เป็นแท็กกำหนดชื่อของเอกสาร |
| <BODY>…</BODY> | เป็นแท็กกำหนดจุดเริ่มต้นและจุดสิ้นสุดของส่วนแสดงข้อมูลของเอกสาร |
ซึ่งเราจะต้องจัดวางตำแหน่งของแท็กต่าง ๆ ดังต่อไปนี้
| ตัวอย่าง 1.1 การจัดวางตำแหน่งของแท็ก |
|---|
| <HTML> <HEAD> <TITLE>ชื่อเอกสาร</TITLE> </HEAD> <BODY> &ข้อมูลเอกสาร </BODY> </HTML> |
ขั้นตอนการเขียนโฮมเพจด้วย HTML
ในการเขียนโฮมเพจด้วย HTML โดยใช้โปรแกรมแก้ไขข้อความ (Text Editor) Notepad มีขั้นตอนดังน
- เปิดโปรแกรมแก้ไขข้อความ (Text Editor) Notepad
- พิมพ์แท็ก HTML
- บันทึกแฟ้มข้อมูล โดยมีนามสกุลเป็น .htm หรือ .html
- เปิดโปรแกรมเว็บเบราเซอร์ (Internet Explorer หรือ Netscape Navigator) แล้วทำการเปิดแฟ้มข้อมูลที่บันทึกไว้จากข้อ 3. เพื่อตรวจสอบผลลัพธ์บนจอภาพว่าแสดงผลได้ตามที่ต้องการหรือไม
การกำหนดชื่อเอกสาร
ในการเขียน HTML นั้นจำเป็นจะต้องกำหนดชื่อเอกสารด้วยเสมอ เพราะการกำหนดชื่อเอกสารจะทำให้ผู้เข้าชมสามารถรู้ถึงชื่อเรื่องของเอกสารชุดนั้นได้ทันที และสะดวกต่อการสืบค้นข้อมูล การกำหนดชื่อของเอกสารทำได้โดยการพิมพ์ชื่อของเอกสารที่ต้องการไว้ระหว่างแท็ก <TITLE > กับแท็ก </TITLE>
| ตัวอย่าง 1.2 การกำหนดชื่อเอกสาร |
|---|
| <HTML> <HEAD> <TITLE>My First Page</TITLE> </HEAD> <BODY> </BODY> </HTML> |
เมื่อเราเปิดแฟ้ม HTML นี้ด้วยโปรแกรมเว็บเบราเซอร์ จะเห็นข้อความว่า My First Page ปรากฏที่ส่วนของ Title Bar ของโปรแกรมเว็บบราเซอร์
การใส่ข้อมูลในเอกสาร
ข้อความ รูปภาพ เสียง หรือ คลิปวิดีโอ (Video Clip) ที่ต้องการให้แสดงบนพื้นที่แสดงผลของโปรแกรมบราวเซอร์ ทำได้โดยการพิมพ์ที่ต้องการไว้ระหว่างแท็ก <BODY> กับ </BODY>
| ตัวอย่าง 1.3 การใส่ข้อมูลในเอกสาร |
|---|
| <HTML> <HEAD> <TITLE> My First Page </TITLE> </HEAD> <BODY> welcome to my first home page, </BODY> </HTML> |
เมื่อเราเปิดแฟ้ม HTML นี้ด้วยโปรแกรมเว็บบราเซอร์ ข้อความ My Fist page ปรากฏที่ส่วนของ Title Bar ข้อความ Welcome to my first home page. จะแสดงที่พื้นที่แสดงข้อมูลของโปรแกรมเว็บบราเซอร์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น