ความรู้เบื้องต้นเกี่ยวกับ HTML
HTML คืออะไร HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาที่ใช้ในการแสดงผลของเอกสารบนเว็บไซต์ หรือเว็บเพจ เป็นภาษาที่พัฒนาโดย World Wide Web Consortium (W3C) HTML เป็นภาษาที่สำคัญมากกับเทคโนโลยีบนเว็บไซต์ ไม่ว่าคุณจะเขียนโปรแกรมบนเว็บไซต์ด้วยภาษาใดๆ เช่น PHP, ASP, Perl หรืออื่น ๆ คุณก็ต้องมีความจำเป็นในการแสดงผลข้อมูลออกมายัง Web Browser ด้วยภาษา HTML เป็นหลัก หรือให้เรามองว่า HTML คือ Output ในการแสดงผลสู่จอภาพของ Web Browser
HTML คืออะไร (ต่อ) ภาษา HTML เป็นภาษาพื้นฐานหรือเป็นเรื่อง BASIC ที่ ผู้ต้องการจัดทำเว็บไซต์จำเป็นต้องรู้ ปัจจุบันมีโปรแกรมอย่าง Dreamweaver ถูกพัฒนาขึ้นมาเพื่ออำนวยความสะดวกให้เรา ไม่ต้องเรียนรู้ภาษา HTML ก็สามารถสร้างเว็บเพจได้ แต่กว่า 80 % ที่มีปัญหาเกี่ยวกับการออกแบบเว็บ ส่วนใหญ่เกิดจากการ ไม่มีความเข้าใจในเรื่องของภาษาพื้นฐาน HTML นี้ พอมีปัญหา ก็ไม่อาจจะแก้ไขได้ จึงคิดว่าโปแกรม Dreamweaver ใช้งานยาก ในบทเรียนนี้จะทำให้เรามีความเข้าใจในพื้นฐานของภาษา HTMLมากขึ้น
<body>…………….</body> ทำความเข้าใจ HTML HTML เป็น Script ที่เรียงลำดับ Tag (คำสั่ง) ไว้เป็น file ไฟล์หนึ่ง เพื่อเป็นตัวบอก Browser ว่าจะต้องแสดงอะไร ลักษณะอย่างไร Tag จะประกอบด้วยเครื่องหมาย < ตามด้วยชื่อ Tag และเครื่องหมาย > ซึ่งโดยทั่วไป Tag จะมีเป็นคู่ เพื่อเปิดและปิดคำสั่งโดย Tag เปิดจะมีลักษณะดังข้างต้น แต่ Tag ปิดจะเพิ่ม Slash (/) หน้า Tag เท่านั้น ตัวอย่างเช่น คำสั่ง body <body>…………….</body> Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้
โครงสร้างพื้นฐานของ HTML
โครงสร้างพื้นฐานของภาษา HTML โครงสร้างของ HTML นั้นถือว่าเป็นโครงสร้างที่เป็นมาตรฐาน ซึ่งหากว่าวันหนึ่ง เราได้ฝึกเขียนภาษาอื่นๆ เราก็อาจจะทำความเข้าใจกับภาษาเหล่านั้นได้ดี เพราะว่ามีความรู้ และความเข้าใจในโครงสร้างของ HTML เป็นพื้นฐานมาก่อน สิ่งที่จะต้องจดจำก็คือ ทุกครั้งที่จะเขียน Script ก็จะต้อง เปิดแท็กเสมอ < >เช่น <html> และเมื่อจบ script หรือคำสั่งต่างๆ ก็จะ ต้องปิดแท็กด้วยเครื่องหมายนี้เสมอ </ > เช่น </html> ซึ่งแท็กเปิดและปิดนั้น ก็จะเขียนในรูปแบบนี้โดยตลอดนั่นเอง แต่ว่าคำสั่งใน แท็กเปิดและปิดนั้นจะเป็นอย่างไรนั้น ก็ขึ้นอยู่กับ คำสั่งต่างๆ
โครงสร้างพื้นฐานของภาษา HTML (ต่อ) ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่ายๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้นๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>
โครงสร้างพื้นฐานภาษา HTML <head><title>……</title> </head> ส่วนหัว <body> … ….. ….. .. </body> ส่วน body ที่แสดงผล </html> <คำสั่ง> เป็นลักษณะTag เปิด เช่น <html> <head> <title> <body> </คำสั่ง> เป็นลักษณะTag ปิด เช่น </html> </head> </title> </body>
โครงสร้างคำสั่งมาตรฐานในการสร้างเว็บเพจต่างๆ <html>........</html> วางไว้ที่ต้นและท้ายของไฟล์ เพื่อให้ Browser รู้ว่า โค๊ดที่กำลังจะอ่าน และนำออกมาแสดงผล เป็นโค๊ดของ html <head>.......</head> ใช้สำหรับกำหนดชื่อเรื่องของเว็บเพจ แต่จะไม่ปรากฏให้เห็นผ่านทาง Browser ซึ่ง บางครั้งการแทรก script ของ java script ก็มักจะแทรกไว้ระหว่าง <head>นั่นเอง <title>..........</title> ใช้แสดงข้อความด้านบนของโปรแกรม browser จะต้องเขียนไว้ระหว่าง <head>......</head> เสมอ <body>……..</body> ใช้แสดงส่วนของเนื้อหาภายในเว็บเพจ
ตัวอย่างการเขียนโค๊ดของ Html
ตัวอย่างการบันทึกไฟล์ Html 2. คลิกเลือก All Files 3. กด Save เพื่อบันทึก
ลองดูผลลัพธ์ที่ได้ ข้อความที่อยู่ในแท็ก Title ข้อความที่อยู่ในแท็ก Body
ข้อความลักษณะหัวเรื่อง (Heading) ข้อความลักษณะหัวเรื่อง จะกำกับด้วยแท็ก <Hn> โดย <Hn>....Heading Text ... </Hn> n คือตัวเลขแสดงขนาดของตัวอักษร ค่าของ n นั้นจะมีค่าอยู่ที่ 1 - 6 n = 1 จะมีขนาดตัวอักษรหัวเรื่องใหญ่สุด n = 6 จะมีขนาดตัวอักษรหัวเรื่องเล็กสุด สามารถเพิ่ม/ลดขนาดโดยใช้เครื่องหมาย + หรือ - นำหน้าตัวเลขได้ เช่น -1 หรือ +5 เป็นต้น
การกำหนดขนาดของตัวอักษร <FONT SIZE="ค่ากำหนดขนาดของตัวอักษร">..........</FONT> กำหนดเป็นตัวเลขซึ่งจะมีค่า 1 - 7 โดย * ค่ามาตรฐานจะมีค่าจะอยู่ที่ 3 * ค่าตัวเลขที่เป็น 1 และ 2 นั้นจะเป็นการย่อขนาดของตัวอักษร * ค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาดของตัวอักษร
การใส่สีพื้นหลังให้กับเว็บเพจ
การใส่สีพื้นหลังให้กับเว็บเพจ ในบทเรียนนี้ เราจะมาดูโค๊ดที่ ใส่สีพื้นหลังให้ Background กันดูนะครับ แต่ขอแนะนำว่า เราควรเลือกสีให้เหมาะสมกับ ตัวหนังสือ หรือไม่ก็ภาพประกอบต่างๆภายในเว็บเพจด้วย มิฉะนั้น อาจจะออกมาไม่สวยงาม
การใส่สีให้กับพื้นหลังมีคำสั่งดังต่อไปนี้
ผลลัพธ์ที่ได้
การใส่สีพื้นหลังให้กับเว็บเพจ นอกเหนือจากการกำหนดโค๊ดของสีพื้นหลังให้เป็น โค๊ดแบบ รหัสค่าสี(เช่น #FFCCFF) แล้ว คุณยังสามารถที่จะกำหนดค่าสีเป็นแบบตัวอักษรแทนชื่อสีได้โดยตรง
การใส่สีพื้นหลังให้กับเว็บเพจโดยใช้ชื่อสีโดยตรง
ผลลัพธ์ที่ได้
การจัดรูปแบบตัวอักษร
การจัดรูปแบบตัวอักษร ในบทนี้เรามาดูเรื่อง รูปแบบต่างๆ ของตัวอักษรกัน ลองดูซิว่ามีคำสั่งอะไรเกี่ยวกับตัวอักษรบ้าง เวลาที่เราทำเว็บไซด์เราจะได้ เลือกใช้ให้เหมาะสมได้
การกำหนดลักษณะตัวอักษร <B>…….</B> ตัวหนา <I>……..</I> ตัวเอียง <U>…….</U> ตัวขีดเส้นใต้ <S>….…</S> ตัวขีดฆ่า <TT>……. </TT> ตัวพิมพ์ดีด <SUP>…</ SUP > ตัวยก <SUB>…</ SUB > ตัวห้อย
การจัดรูปแบบตัวอักษร
ผลลัพธ์ที่ได้
สร้างเส้นใต้พารากราฟ รูปแบบ <HR> <HR> ตีเส้น <HR NOSHADE> ตีเส้นสีดำ <HR SIZE = 10> กำหนดความหนาของยาวเส้น ใช้หน่วย pixel <HR SIZE = 300> กำหนดความยาวเส้น ใช้หน่วย pixel <HR ALIGN=CENTER>ใช้ในกรณีเส้นมีความยาวไม่เต็มจอ และจัดไว้กึ่งกลาง
ตัวอักษรวิ่ง คำสั่ง <Marquee> รูปแบบ <Marquee> ข้อความ </Marquee> <Marquee direction=“ทิศทางวิ่ง” scrollamount=“ความเร็วในการวิ่ง” scrolldelay=“เวลาหน่วง” color=“สี” > ข้อความ </Marquee> ทิศทาง = up down left right ตัวอย่าง Marquee
การใส่รูปภาพภายในเว็บเพจ
การใส่รูปภาพภายในเว็บเพจ การใส่ภาพภายในเว็บเพจ ตรงนี้ก็มีส่วนสำคัญ สำหรับดึงดูดตา ดึงดูดใจ ให้ผู้ที่ผ่านเข้ามาในเว็บไซด์ของเรา ตัวอย่างโค๊ดการใส่รูปภาพภายในเว็บเพจ
ผลลัพธ์ที่ได้
การใส่ตาราง
การสร้างตาราง โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ใน แนวนอนเดียวกัน ก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง <TABLE> <CAPTION>.........</CAPTION> <TR> <TH>.........</TH> <TH>.........</TH> </TR> <TR> <TD>.........</TD> <TD>.........</TD> </TR> <TR> <TD>.........</TD> <TD>.........</TD> </TR> <TABLE>
<TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE> <CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และ มีคำสั่งปิดคือ </CAPTION> <TR> (Table Row) เป็นการกำหนดแถวของตาราง และ มีคำสั่งปิดคือ </TR> <TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และ มีคำสั่งปิดคือ </TH> <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิด คือ </TD>
ตัวอย่างการสร้างตาราง 1 2 3 4 <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> A B C <TABLE> <TR ALIGN=CENTER> <TD COLSPAN=2>A</TD></TR> <TR><TD>B</TD><TD>C</TD></TR> </TABLE> A B C <TABLE> <TR><TD ROWSPAN=2>A</TD> <TD>B</TD></TR> <TR><TD>C</TD></TR> </TABLE>
การเชื่อมโยง
การเชื่อมโยง (Link) การเชื่อมโยงหรือ Link เป็นการกำหนดจุดที่เราจะเคลื่อนย้ายไปยังปลายทางหรือจุดหมายที่เราต้องการ ในการเขียนคำสั่งเชื่อมโยงข้อมูลนั้น จะต้องทราบ “จุดหมาย” และ “ปลายทาง” ถึงจะสามารถทำการเชื่อมโยงได้สำเร็จ การเชื่อมโยงทำได้ 2 แบบ เชื่อมโยงด้วยข้อความ เชื่อมโยงด้วยรูปภาพ
ตัวอย่างโค๊ดการเชื่อมโยง (Link)
ผลลัพธ์ที่ได้ จุดหมายปลายทาง จุดที่ทำการเชื่อมโยง
การสร้าง Frame Frame คือ กรอบรายการที่มีประโยชน์ในการแบ่งเนื้อที่ใน page มีผลทำให้ 1 page แสดงได้หลายเอกสาร โดยที่ แต่ละเอกสารไม่จำเป็นต้องเปลี่ยนพร้อมกัน
ส่วนประกอบการทำ FRAME <FRAMESET > - แทนส่วน Body <FRAME > ………... </FRAMSET>
คำสั่ง FRAMESET <FRAMESET BORDER = ความกว้างของขอบ FRAMEBORDER= YES|NO ROWS = ค่าของแถว (Pixel) หรือ % แถว,…,* COLS = ค่าของคอลัมน์ (Pixel) หรือ คอลัมน์,…,*> …….. </FRAMSET>
คำสั่ง FRAME <FRAME SRC = “page ที่ต้องการแสดง” NAME = “ชื่อ” MARGINHEIGHT = ความสูง MARGINWIDTH =ความกว้าง NORESIZE SCROLLING= YES|NO|AUTO> ………...
คำแนะนำ หากต้องการแบ่ง Frame ในแนวนอนให้กำหนด <FRAMESET ROWS = ค่าของส่วนแรก,*> <FRAMESET COLS = ค่าของส่วนแรก,*> <FRAMESET ROWS = ค่าของแถว,* COLS = ค่าของคอลัมน์, *>
แบบทดสอบภาคปฏิบัติหลังเรียน ให้นักเรียนสร้างเว็บเพจ ของนักเรียนโดยใช้คำสั่งที่ได้เรียนมาทั้งหมดมาใช้ในการสร้างเว็บเพจดังนี้ การใส่ข้อความ ใส่รูปแบบข้อความ ใส่สีพื้นหลัง ใส่รูปภาพ สร้างการเชื่อมโยงไปยังเว็บเพจอื่นๆ เป็นต้น