ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย Creating simple Home Page
เอกสารไฮเปอร์เท็กซ์ โฮมเพจเป็นเอกสารไฮเปอร์เท็กซ์ ใช้ภาษา HTML เขียนมีรูปแบบไวยากรณ์ที่ชัดเจน เก็บอยู่บนเครื่อง Server เอกสารไฮเปอร์เท็กซ์ ที่ถูกแปลงและแสดงโดย Web browser ที่เครื่อง PC
HTML ย่อมาจาก HyperText Markup Language เป็นภาษาที่สื่อให้ Web browser ทราบรูปแบบการแสดงผล คำสั่งที่ใช้ในการกำหนดรูปแบบการแสดงผล เรียกว่า tag Web browser จะแสดงผลตามความหมายของ tag ที่ระบุ โดยคำสั่ง tag จะไม่ถูกแสดงออกมาให้เห็นทางหน้าจอ คำสั่ง tag จะอยู่ระหว่างเครื่องหมาย < และ > ตามลำดับ ตัวอย่างเช่น <body> Sawasdee Everyone </body>
Web Editor คือโปรแกรมที่ใช้เป็นเครื่องมือในการเขียนรูปแบบคำสั่ง HTML เนื่องจาก HTML อยู่ในรูป ASCII TEXT ธรรมดา ดังนั้น จึงสามารถที่จะใช้แม้กระทั่ง Text Editor ธรรมดา อย่างเช่น Notepad มาเขียนก็ได้ ปัจจุบันมี Web Editor ที่มีความสามารถสูงมากมาย ยกตัวอย่างเช่น FrontPage , NetObject, Composer, HotMetal เป็นต้น
Edit Plus เป็นตัวสร้างเวบ (Web Editor) ที่เราจะนำมาใช้ในปฏิบัติการ
โครงสร้างภาษา HTML <HTML> <HEAD> <TITLE>..</TITLE> </HEAD> <BODY> .. </BODY> </HTML>
รูปแบบคำสั่งของ HTML ประกอบด้วย open tag เช่น <I> และ close tag เช่น </I> การใช้ Tag จะซ้อนกันเป็นชั้น <B> <U> <S> message </S> </U> </B>
การกำหนดชื่อเรื่อง (Title) สำหรับใช้เป็นชื่อเรื่องเอกสาร ซึ่งจะไปปรากฎที่ title bar ของ Browser <TITLE> </TITLE> ชื่อเรื่องเอกสาร ตัวอย่าง <TITLE>Welcome to 517101 : Introduction to Computers</TITLE>
การกำหนดหัวเรื่อง (Headings) ใช้เน้นข้อความ เช่น ชื่อเรื่อง ชื่อบท ชื่อตอนหรือข้อความสำคัญอื่นๆ เมื่อ browser พบ tag นี้ จะขึ้นบรรทัดใหม่ พิมพ์ข้อความใน heading และเว้นบรรทัดว่าง 1 บรรทัด <Hn> </Hn> ข้อความหัวเรื่อง เมื่อค่า n เป็นขนาดของข้อความหัวเรื่องมีค่า 1-6
การทำคำสั่งให้เป็นเพียงคำบรรยาย หากไม่ต้องการใช้ tag คำสั่งใดๆ ทำการแสดงผลให้ใส่เครื่องหมาย !ไว้หลังเครื่องหมาย < ดังนี้ <! Tag > หากต้องการให้ tag คำสั่งหรือข้อความใดๆ ไม่แสดงบน Web Browser <!-- text -->
การขึ้นบรรทัดใหม่ (LINE Breaks) การขึ้นบรรทัดใหม่ในเอกสาร html ไม่ได้ทำให้หน้าจอที่เห็นมีการขึ้นบรรทัดใหม่ด้วย ดังนั้นถ้าต้องการจบข้อความใดๆ โดยข้อความถัดไปต้องขึ้นบรรทัดใหม่ให้ใช้คำสั่ง br ดังนี้ <BR> ชื่อเรื่องเอกสาร ตัวอย่าง <BODY>Welcome to 517101 <BR>Introduction to Computers</BODY> Welcome to 517101 Introduction to Computers
การขึ้นย่อหน้าใหม่ (Paragraphs) เป็นการกำหนดย่อหน้าข้อมูล <P align=“---”> </P> เนื้อความเอกสาร “---” สามารถเป็นได้ 3 ค่าคือ left ชิดซ้าย right ชิดขวา center จัดกึ่งกลาง
การวางข้อความไว้กลางบรรทัด (Center) สำหรับข้อความสั้นๆ แค่บรรทัดเดียว <CENTER> </CENTER> ข้อความ
การสร้างเส้น (Horizontal Rule) เป็นเส้นตรงในแนวนอน สามารถกำหนดความยาวและความกว้างของเส้นได้ <HR SIZE=ความหนาของเส้น WIDTH=ความยาวหรือเปอร์เซ็นต์ความยาว ALIGN=left|right|center>
การกำหนดบล็อกข้อความ (Quotation Block) เป็นการกำหนดบล็อกข้อความ เมื่อต้องการเน้นข้อความแยกจากตัวเนื้อหาเอกสาร <BLOCKQUOTE>ข้อความ</BLOCKQUOTE>
การจัดรูปแบบข้อความตามอิสระ(Preformatted) ใช้เมื่อต้องการจัดวางเอกสารตามอิสระตามที่ได้จัดไว้ใน TAG PRE <PRE> ข้อความ </PRE>
การจัดรูปแบบตัวอักษร Tag การจัดรูปแบบ ตัวหนา(Bold) <B>ข้อความ</B> ตัวเอียง (Italic) <I>ข้อความ</I> ตัวขีดเส้นใต้ (Underline) <U>ข้อความ</U> ตัวกระพริบ (Blink) <BLINK>ข้อความ</BLINK> ตัวขีดฆ่า (Strike) <STRIKE>ข้อความ</STRIKE> ตัวห้อย (Sub-script) <SUB>ข้อความ </SUB> ตัวยก (Super-script) <SUP>ข้อความ </SUP>
<FONT SIZE=ค่า 1-7>ข้อความ</FONT> ปกติฟอนต์จะถูกเซตให้มีขนาด = 3 ถ้าต้องการเปลี่ยนขนาดฟอนต์ให้มีขนาดเล็กลงหรือใหญ่ขึ้น ก็สามารถกำหนดขนาดได้ในช่วง 1-7 <FONT SIZE=ค่า 1-7>ข้อความ</FONT>
การตั้งค่าตัวอักษรมาตรฐาน (BASEFONT) จะมีผลตลอดทั้งเอกสาร <BASEFONT SIZE= ค่า 1-7>ข้อความ
การกำหนดชนิดของตัวอักษร เมื่อต้องการกำหนดชนิดของตัวอักษรหรือต้องการแสดงผลด้วยชนิดของตัวอักษรมากกว่า 1 ชนิด <FONT FACE=“ชื่อ Font , ชื่อ Font,…>
การกำหนดสีให้กับตัวอักษร กำหนดสีตัวอักษรเฉพาะข้อความที่ต้องการ <FONT COLOR=“#RRGGBB” หรือระบุชื่อสี> <FONT SIZE=“ค่า 1-7” COLOR=“ระบุสี”>ข้อความ</FONT> กำหนดสีตัวอักษรตลอดทั้งเอกสาร <BODY TEXT=“#RRGGBB” หรือระบุชื่อสี>
การกำหนดสีให้กับพื้นหลัง สามารถกำหนดสีพื้นหลังได้ในส่วนของ <body> <BODY BGCOLOR=“#RRGGBB” หรือ ระบุชื่อสี> การกำหนดสีพื้นหลังและกำหนดสีของข้อความที่อยู่ภายใต้แท็ก <body> <BODY BGCOLOR=“#RRGGBB” TEXT=“#RRGGBB”>
การกำหนดรูปภาพให้เป็นพื้นหลัง <BODY BACKGROUND=“ชื่อไฟล์รูปภาพ”> การกำหนดตำแหน่งของไฟล์รูปภาพ Path/filename.extension
การแสดงผลแบบรายการ รายการแบบใช้สัญลักษณ์กำกับ รายการแบบใช้ตัวเลขกำกับ รายการแบบคำจำกัดความ
รายการแบบใช้สัญลักษณ์กำกับ (Unordered list) <UL TYPE=DISC|CIRCLE|SQUARE> <LI>ข้อมูล …. </UL>
รายการแบบใช้ตัวเลขกำกับ (Ordered list) <OL TYPE = A|a|1|i|I > <LI>ข้อมูล …. </OL>
รายการแบบคำจำกัดความ (Definition list) <DL> <DT> คำจำกัดความ </DT> <DD> คำอธิบาย </DD> ... </DL>
การแสดงภาพ Graphic <IMG SRC=“ชื่อไฟล์รูปภาพ” ALIGN = left|right|middle|top|bottom ALT = ข้อความที่ต้องการให้แสดงบนกรอบจอภาพ WIDTH = ความกว้างของภาพ HEIGHT = ความสูงของภาพ BORDER = ความหนาของกรอบ(สีเดียวกับตัวอักษร) >
TIP คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Save picture as..” รูปจาก site ที่เข้าไปชม ทำได้โดยเมื่อต้องการ save ถ้าต้องการนำภาพมาเป็น Background ของ Windows คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Save picture as..” คลิ้กเมาส์ขวาที่รูปภาพ เลือก “Set As Wallpaper”
การเน้นที่อยู่ ( Address) <ADDRESS>ข้อความ</ADDRESS>