Embedded Files
หลังจากที่นิสิตได้เรียนรู้เกี่ยวกับพื้นฐานและโครงสร้างของภาษา HTML แล้ว สำหรับในหน่วยการเรียนนี้ นิสิตจะได้ลงมือเริ่มต้นในการสร้างโฮมเพจของตัวเอง คือการป้อนข้อความ ตัวอักษร ในเว็บเพจ ตลอดจนการจัดรูปแบบของข้อความแบบต่าง ๆ เพื่อให้โฮมเพจของเราน่าดูมากยิ่งขึ้น แหล่งที่มา
2.1 การใส่ข้อความ
สำหรับการใส่ข้อความลงในเว็บเพจ ด้วยภาษา HTML นั้น ข้อความที่ต้องการจะให้ปรากฎบนจอภาพ จะต้องใส่ข้อความมาในส่วนของ <body>… </body> รวมถึงการจัดรูปแบบข้อความ ตัวอักษร รูปแบบต่าง ๆ
การใส่ข้อความ สามารถพิมพ์ตัวอักษรหรือข้อความที่ต้องการใส่ในหน้าเว็บเพจในส่วน <body>… </body> ดังตัวอย่างต่อไป
หมายเหตุ เมื่อทำการ save file เป็น file HTML แล้ว ถ้าต้องการแก้ไขในเอกสาร HTML สามารถทำได้โดย การเปิด file HTML ขึ้นมา และเลือกที่ view เลือกที่ source ก็จะปรากฏโปรแกรม notepad สำหรับทำการแก้ไขงานต่อไป
2.2 การทำตัวอักษรหนา เอียง ขีดเส้นใต้
หลังจากที่เราได้ทำการใส่ข้อความแล้ว จะเห็นว่าข้อความที่ใส่ไปนั้นยังไม่มีการจัดรูปแบบของข้อความแต่อย่างได้ ในการจัดรูปแบบตัวอักษรหรือข้อความในภาษา HTML นั้นจะต้องมี Tag คำสั่งสำหรับการจัดรูปแบบตัวอักษร หรือข้อความโดยเฉพาะ
การจัดรูปแบบตัวอักษร รูปแบบแรก คือ การเน้นข้อความในเว็บเพจ เช่นการเน้นข้อความที่สำคัญ หรือต้องการแสดงว่าข้อความนั้นเป็นส่วนหัวข้อ หรือ หัวเรื่อง ของเอกสาร จะใช้คำสั่ง ดังนี้
ตัวหนา = ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรแบบตัวหนา (bold) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น ใช้ Tag <b>...</b>
ตัวเอียง = ใช้กำหนดข้อความที่อยู่ภายในคำสั่งให้แสดงผลด้วยตัวอักษรแบบเอน (Italic) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น ใช้ Tag <i>...</i>
ขีดเส้นใต้ = ใช้กำหนดข้อความที่อยู่ภายในคำสั่ง ให้แสดงผลด้วยตัวอักษรขีดเส้นใต้ (underline) มีจุดประสงค์เพื่อเน้นข้อความในประโยคนั้น ใช้ Tag <u>...</u>
ทดสอบการจัดรูปแบบข้อความด้วยการเน้นข้อความ
2.3 การกำหนดขนาดตัวอักษร
การจัดรูปแบบตัวอักษรหรือข้อความ ในเว็บเพจด้วยภาษา HTML นั้น เราสามารถกำหนดขนาดของตัวอักษรตามความต้องการและเหมาะสมกับแต่ละลักษณะของเว็บเพจ และการกำหนดขนาดของตัวอักษร ข้อความสามารถกำหนดได้หลายขนาด
ขนาดของตัวอักษร จะกำหนดโดยใช้ตัวเลขที่มีค่า 1 - 7 เป็นตัวกำหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการย่อขนาดของตัวอักษร ค่าตัวเลข 3 ตัวอักษรจะอยู่ในระดับมาตราฐาน และค่าตัวเลข 4 ถึง 7 จะเป็นตัวอักษรใหญ่ขึ้น ตามลำดับ
คำสั่งที่ใช้ คำสั่งจัดรูปแบบ (font) ตามด้วย คุณสมบัติของรูปแบบ (attribute) ซึ่งในการกำหนดขนาดตัวอักษร จะใช้ attribute ชื่อ size
<font size="ค่าตัวเลขกำหนดขนาดของตัวอักษร">...ข้อความ...</font>
นอกจากจะกำหนดขนาดของตัวอักษร ข้อความ ด้วยคำสั่ง font size แล้ว ในภาษา HTML ยังสามารถกำหนดขนาดของข้อความให้มีลักษณะเป็นหัวเรื่อง โดยเรียงตั้งแต่หัวเรื่องใหญ่ ไล่ลงมาถึงหัวเรื่องที่เล็กสุดได้
การกำหนดหัวเรื่อง สามารถกำหนดได้ โดยใช้คำสั่งดังนี้
<h1>หัวเรื่องขนาดใหญ่ 1</h1>
<h2>หัวเรื่องขนาดใหญ่ 2</h2>
<h3>หัวเรื่องขนาดใหญ่ 3</h3>
<h4>หัวเรื่องขนาดใหญ่ 4</h4>
<h5>หัวเรื่องขนาดใหญ่ 5</h5>
<h6>หัวเรื่องขนาดใหญ่ 6</h6>
โดยที่ <h1> นั้นจะมีขนาดใหญ่ที่สุด ส่วน <h6> จะมีขนาดเล็กที่สุด
ทดสอบคำสั่งกำหนดขนาดตัวอักษร และกำหนดหัวเรื่อง
<html><head><title> โฮมเพจของข้าพเจ้า </title>
</head>
<body>
<font size=5>กำหนดขนาดข้อความหของหน้าเว็บเพจเท่ากับ 5</font><br>
<font size=3>การจัดรูปแบบตัวอักษรหรือข้อความ (font) ในหน้าเว็บเพจของเรา โดยใช้ภาษา HTML นั้นเราสามารถขนาดของตัวอักษรตามความต้องการและเหมาะสมกับแต่ละลักษณะของเว็บ เพจ และการกำหนดขนาดของตัวอักษร ข้อความ นั้น กำหนดได้ขนาดของตัวอักษรหลายแบบ
ในการกำหนดขนาดจะใช้ตัวเลขซึ่งจะมีค่า 1 - 7 เป็นตัวกำหนด โดยค่าตัวเลข 1 และ 2 จะเป็นการย่อขนาดของตัวอักษร ค่าตัวเลข 3 ตัวอักษรจะอยู่ในระดับมาตราฐาน และค่าตัวเลข 4 ถึง 7 นั้นจะเป็นการขยายขนาด</font> <br>
<font size=4>การกำหนดขนาดของข้อความให้มีลักษณะเป็นหัวเรื่อง </font>
สามารถกำหนดได้ โดยใช้คำสั่งดังนี้<br>
<h1>หัวเรื่องขนาดใหญ่ 1</h1><br>
<h2>หัวเรื่องขนาดใหญ่ 2</h2> <br>
<h3>หัวเรื่องขนาดใหญ่ 3</h3> <br>
<h4>หัวเรื่องขนาดใหญ่ 4</h4> <br>
<h5>หัวเรื่องขนาดใหญ่ 5</h5> <br>
<h6>หัวเรื่องขนาดใหญ่ 6</h6>
</body>
</html>
2.4 การกำหนดรูปแบบและสีของตัวอักษร
ในการจัดรูปแบบของข้อความหรือตัวอักษรนั้น การใช้สีก็เป็นส่วนสำคัญเช่นกันในการจัดรูปแบบ ซึ่งในการกำหนดรูปแบบสามารถกำหนดได้ ดังนี้
การกำหนดรูปแบบ
ในการกำหนดรูปแบบของตัวอักษร หรือข้อความ สามารถกำหนดได้ด้วยคุณสมบัติ (attribute) ชื่อ face แล้ว ตามด้วยชื่อ font ที่เราต้องการ เอกสารเว็บกำหนดฟอนต์ ได้หลายฟอนต์ โดยโปรแกรมเบราเซอร์จะมีการตรวจสอบการใช้ฟอนต์ให้อัตโนมัติ
เราสามารถการกำหนดรูปแบบของตัวอักษร ได้โดยใช้คำสั่ง
<font face="ชื่อ font">..ข้อความต้องการกำหนด font..</font>
font สำหรับข้อความภาษาไทย/อังกฤษ ที่เหมาะสมได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi และ font สำหรับข้อความภาษาอังกฤษที่เหมาะสม คือ Arial, Helvetica, sans-serif ชนิดของ font ปกติ = MS Sans Serif
การกำหนดสี
การกำหนดสีของตัวอักษร หรือข้อความที่ต้องการนั้น คำสั่งในภาษา HTML จะใช้ คุณสมบัติ (attribute) สำหลับกำหนดสีที่ชื่อ color
การกำหนดสีของตัวอักษรหรือข้อความ นั้นจะสามารถกำหนดได้ 2 แบบ ดังนี้
1. กำหนดโดยใช้ชื่อสี เช่น red, yellow, blue หรือ pink เป็นต้น
2. การกำหนดสีโดยระบุชื่อสีแบบนี้จะมีข้อจำกัดมาก เพราะไม่สามารถใช้โทนสีได้มากเท่าที่ใจต้องการ (จะใช้ได้ประมาณ 16 สี) ถ้าต้องการให้มีสีมากกว่านี้จะต้องใช้การกำหนดเป็นรหัสค่าสีด้วยระบบตัวเลขฐานสิบหก กำหนดค่าสีของแสง (RGB)
เลขฐานสิบหกประกอบด้วยตัวเลข 0 1 2 3 4 5 6 7 8 9 และตัวอักษร a b c d e f ซึ่งจะแทนค่าสีตั้งแต่มืดสุด (ค่าเป็น 0) จนถึงสว่างสุด (ค่าเป็น f) ค่าสีตัวเลขฐานสิบหกจะประกอบด้วยกลุ่มตัวเลข 2 ตัว 3 ชุด แทนค่าสี RR GG BB และมีเครื่องหมาย # กำกับหน้าตัวเลขดังตัวอย่างสี #RRGGBB (code สีเพิ่มเติม)
คำสั่งที่ใช้คือ
<font color="ชื่อสี หรือ code สี ที่ต้องการ">..........</font> ทดสอบการกำหนด font และสีตัวอักษร
Page updated
Google Sites
Report abuse