Technology with T'Chom - หน่วยที่ 2 การออกแบบหน้าเว็บเพจ

Technology with T'Chom

ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้

2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้

3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้

การออกแบบเว็บเพจที่สวยงาม ต้องมีการจัดการและตกแต่งเอกสาร ซึ่งจะมีคำสั่งต่าง ๆ ดังต่อไปนี้

2.1 การจัดรูปแบบเอกสาร การเว้นช่องว่าง การขึ้นบรรทัดใหม่

2.2 การจัดการตัวอักษรการกำหนดลักษณะ รูปแบบ ขนาดและหัวเรื่อง

2.3 การตกแต่งหน้าเว็บเพจการกำหนดสีตัวอักษรและสีพื้นหลังของเว็บเพจ

2.4 การจัดวางตำแหน่งของข้อความ

2.5 การใส่เส้นคั่นในเอกสาร

2.6 การทำตัวอักษรวิ่ง

2.7 การแทรกรูปภาพและเชื่อมโยงลิงค์โดยใช้รูปภาพหรือสัญลักษณ์

1. การเว้นช่องว่าง

คำสั่งที่ใช้ในการเว้นว่างในเอกสารหรือเคาะเว้นวรรค ไม่ว่าเราจะพิมพ์ข้อมูลในเอกสาร HTML โดยการเว้นช่องไว้มากขนาดไหนก็ตาม เมื่อนำไปแสดงบน Browser แล้วก็จะเปรียบเหมือนว่าเราได้เว้นช่องว่างเพียง 1 อักขระ หากต้องการให้ข้อมูลบน Browser แสดงข้อมูลที่มีการเว้นช่องว่าง ให้ตามต้องการก็ต้องใช้คำสั่ง   ซึ่งคำสั่งดังกล่าวหนึ่งคำสั่งคือการให้เว้นช่องว่างเท่ากับเคาะ Space bar 1 ครั้ง และหากต้องการมากกว่านั้นก็ต้องใส่คำสั่งเพิ่มตามจำนวนช่องว่างที่ต้องการ เช่น ถ้าต้องการให้เว้นช่องว่างไป 3 ตัวอักษรเราก็ต้องใส่คำสั่ง     เป็นต้น

2. การขึ้นบรรทัดใหม่และใส่หมายเหตุ

ที่มา : Opart Surinyotha

การขึ้นบรรทัดใหม่
ในเอกสารภาษา HTML ข้อความที่เราใส่เข้าไปในเอกสารจะเป็นข้อความที่ต่อเนื่องกันไป และจะขึ้นบรรทัดใหม่ก็ต่อเมื่อข้อความได้ยาวไปชนขอบขวาของหน้าจอแล้วเท่านั้น หากเราต้องการตัดข้อความหรือขึ้นบรรทัดใหม่จะต้องกำหนดเอง โดยใช้ Tag รูปแบบของคำสั่ง HTML ที่ใช้ในการขึ้นบรรทัดใหม่

ตามด้วย ข้อความที่ต้องการนำไปขึ้นบรรทัดใหม่

การใส่หมายเหตุ (Comment) ในเอกสาร
การใส่หมายเหตุในเอกสาร HTML คือการที่เราต้องการใส่ข้อความหรือข้อมูลไว้ในเอกสารแต่ไม่ต้องการให้แสดงบน Browser นั่นเอง รูปแบบของคำสั่ง HTML ที่ใช้ในการใส่หมายเหตุในเอกสาร

<! หมายเหตุ>

:: กิจกรรมลองทำดู ::

คำชี้แจง : อ่านข้อความที่กำหนดและประยุกต์ใช้คำสั่งเพื่อเว้นช่องว่างและขึ้นบรรทัดใหม่ในเว็บเพจ

กำหนดชื่อเรื่อง <title> : การเว้นช่องว่างและการขึ้นบรรทัดใหม่
ยินดีต้อนรับเข้าสู่เว็บเพจของ ครูจุรีรัตน์ เสวกวิหารี ชั้นมัธยมศึกษาปีที่ 3/99 เลขที่ 99 ความหมายของเว็บเพจ เว็บเพจ (Web Page) คือหน้าเอกสารต่างๆ ในเว็บไซต์ที่มีการแสดงข้อมูลและรูปภาพของเว็บไซต์ โดยที่เว็บไซต์หนึ่งเว็บไซต์สามารถมีหน้าเว็บเพจได้ไม่จำกัด ซึ่งจะขึ้นอยู่กับเนื้อหาและข้อมูลของแต่ละเว็บไซต์ หากเราเปรียบเทียบแล้วลักษณะของเว็บเพจจะคล้ายกับหน้ากระดาษหน้าหนึ่ง ที่มีเนื้อหา รูปภาพ วิดิโอ รายละเอียดหรือเรื่องราวต่างๆ ที่อยู่ในหน้านั้นและสามารถเชื่อมโยงไปยังหน้าอื่นๆได้ เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร html

หมายเหตุ : อย่าลืมบันทึกไฟล์เอกสาร .html

3. การกำหนดรูปแบบอักษร

ที่มา : Opart Surinyotha

ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้
โดยใช้ Tag

... ข้อความ ...

อธิบายคำสั่ง

... ข้อความ ... การกำหนดแบบอักษร AngsanaUPC

... ข้อความ ... การกำหนดแบบอักษร JasmineUPC

... ข้อความ ... การกำหนดแบบอักษร TH SarabunPSK

4. การกำหนดลักษณะของตัวอักษร

ที่มา : Opart Surinyotha

การกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น

อธิบายคำสั่ง

... ข้อความ ... การกำหนดรูปแบบตัวอักษร-ตัวเข้ม

... ข้อความ ... การกำหนดรูปแบบตัวอักษร-ตัวเอียง

<S>... ข้อความ ...</S> การกำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า

... ข้อความ ... การกำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้

... ข้อความ ... การกำหนดรูปแบบ Super Script

... ข้อความ ... การกำหนดรูปแบบ Sub Script

:: กิจกรรมลองทำดู ::

คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อกำหนดลักษณะและรูปแบบของตัวอักษร

<!doctype html>

<html>

<head>

<title>การกำหนดลักษณะและรูปแบบของตัวอักษร</title>

</head>

<body>

นี่คือ Font แบบ TH SarabunPSK

โดยสามารถกำหนดลักษณะตัวอักษรแบบต่าง ๆ ดังนี้

การกำหนดลักษณะตัวอักษรแบบตัวหนา

การกำหนดลักษณะตัวอักษรแบบตัวเอียง

<S> การกำหนดลักษณะตัวอักษรแบบตัวขีดฆ่า</S>

การกำหนดลักษณะตัวอักษรแบบขีดเส้นใต้

ข้อความแบบฟังก์ชันทางคณิตศาสตร Super Script E=MC2

ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H2O

</body>

</html>

5. การกำหนดขนาดของตัวอักษร

ที่มา : Opart Surinyotha

การกำหนดขนาดอักษร

ถ้าไม่กำหนดขนาดให้เมื่อนำเอกสาร HTML ไปแสดงบนบราวเซอร์ ขนาดของตัวอักษรจะถูกกำหนดเป็นค่าพื้นฐาน หากต้องการกำหนดเองก็สามารถทำได้โดยขนาดของตัวอักษรจะมี 7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่

อธิบายคำสั่ง

การกำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ

ขนาดตัวอักษรสามารถกำหนดได้ตั้งแต่ 1 - 7

คำสั่งปิดที่ต้องใช้คู่กันเสมอ

:: กิจกรรมลองทำดู ::

คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อการกำหนดขนาดของตัวอักษรและการกำหนดหัวเรื่อง

<!doctype html>

<html>

<head>

<title>การกำหนดขนาดของตัวอักษรและการกำหนดหัวเรื่อง</title>

</head>

<body>

นี่คือขนาดตัวอักษร = 6

นี่คือขนาดตัวอักษร = 5

นี่คือขนาดตัวอักษร = 4

นี่คือขนาดตัวอักษร = 3

นี่คือขนาดตัวอักษร = 2

</body>

</html>

6. การกำหนดสีตัวอักษรและสีพื้นหลัง

ที่มา : Opart Surinyotha

การกำหนดสีตัวอักษรและสีพื้นหลังสามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ โดยใช้คำสั่ง

หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้

อธิบายคำสั่ง

<body BGcolor=ชื่อสี> การกำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี

การกำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ

คำสั่งปิดที่ต้องใช้คู่กันเสมอ

ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้ เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น

ที่มา : Designil

:: กิจกรรมลองทำดู ::

คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อกำหนดสีตัวอักษรและสีพื้นหลังของเว็บเพจ

<!doctype html>

<html>

<head>

<title> การกำหนดสีตัวอักษรและสีพื้นหลัง</title>

</head>

<body textcolor="black" BGcolor="pink"> นี่คือการกำหนดสีตัวอักษรเป็นสีดำ สีพื้นเป็นสีชมพู

นี่คือตัวอักษรสีแดง

นี่คือตัวอักษรสีเขียว

นี่คือตัวอักษรสีน้ำเงิน

</body>

</html>

7. การใส่เส้นคั่นหน้า

เป็นอีกวิธีหนึ่งที่จะแบ่งข้อมูลให้เป็นสัดส่วนและยังเป็นการตกแต่งเว็บเพจให้สวยงามได้อีกด้วย การใส่เส้นคั่นในเอกสารนั้นมีวิธีการใส่และการปรับแต่งเส้นคั่น ดังนี้

การใส่เส้นคั่นในแนวนอน (Horizontal Rule)
เป็นการใส่เส้นคั่นเพื่อแบ่งข้อมูลออกเป็นสัดส่วนให้ดูง่ายขึ้น โดยการใช้ Tag<HR>

<HR> ตามด้วยข้อมูลที่ต้องการแบ่ง

การกำหนดขนาดของเส้นคั่น
รูปแบบของคำสั่ง HTML ในการกำหนดขนาดของเส้นคั่น

หมายเหตุ : ความยาวและความหนาของเส้นนั้น มีหน่วยเป็นพิกเซล โดยมีความยาวสูงสุดที่ 800 พิกเซล และความหนาสูงสุด 500 พิกเซล

การกำหนดให้เป็นเส้นคั่นทึบ
เส้นคั่นปกติจะเป็นแบบโปร่ง หากต้องการกำหนดให้เป็นเส้นคั่นแบบทึบก็สามารถทำได้
รูปแบบของคำสั่ง HTML

การกำหนดให้เป็นเส้นคั่นทึบ <HR noshade>

การใส่สีให้เส้นคั่น
รูปแบบของคำสั่ง HTML

การใส่สีให้เส้นคั่น <HR color=สีที่ต้องการ>

การนำรูปภาพมาเป็นเส้นคั่น
รูปแบบของคำสั่ง HTML

การนำรูปภาพมาเป็นเส้นคั่น <IMG SRC=ชื่อไฟล์รูปภาพ.นามสกุล>

รูปแบบในการจัดตำแหน่งของเส้นคั่น

left การจัดชิดซ้าย

center การจัดกึ่งกลาง

right การจัดชิดขวา

ที่มา : Opart Surinyotha

8. การจัดวางตำแหน่งของข้อความ

ที่มา : Opart Surinyotha

ในการจัดย่อหน้าหรือการจัดพารากราฟ จะทำให้การแบ่งเนื้อหาเป็นสัดส่วน และดูง่าย

โดยใช้ Tag

อธิบายคำสั่ง

การสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)

การกำหนดให้ข้อความอยู่ชิดด้านซ้าย

การกำหนดให้ข้อความอยู่กึ่งกลางเอกสาร

การกำหนดให้ข้อความอยู่ชิดด้านขวา

คำสั่งปิดที่ต้องใข้คู่กันเสมอ (เมื่อใช้

:: กิจกรรมลองทำดู ::

คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อใส่เส้นคั่นและจัดวางตำแหน่งของข้อความในเว็บเพจ

<!doctype html>

<html>

<head>

<title>การใส่เส้นคั่นและการจัดวางตำแหน่งของข้อความ </title>

</head>

<body><CENTER>ความหมายของเว็บเพจ

เว็บเพจ (Web Page) คือหน้าเอกสารต่างๆ ในเว็บไซต์ที่มีการแสดงข้อมูลและรูปภาพของเว็บไซต์และสามารถเชื่อมโยงไปยังหน้าอื่นๆ ได้

เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML </CENTER>

จัดทำโดย

คุณครูจุรีรัตน์ เสวกวิหารี ชั้นมัธยมศึกษาปีที่ 3/99 เลขที่ 99

โรงเรียนนวมินทราชูทิศ มัชฌิม สำนักงานเขตพื้นที่การศึกษามัธยมศึกษานครสวรรค์</left>

</body>

</html>

เลือกหัวข้อส่งงานด้านล่าง

กิจกรรม 1 โครงสร้างพื้นฐาน การสร้าง บันทึกและแสดงผล

กิจกรรม 2 การกำหนดขนาด ลักษณะและแบบอักษร

กิจกรรม 3 เรื่อง การจัดการตำแหน่งข้อความ การใส่สีพื้นหลังและการใส่เส้นคั่นหน้า

ชิ้นงานการสร้างเว็บเพจด้วยภาษา HTML

Page updated

Report abuse