ผลการเรียนรู้
1. อธิบายการเขียนคำสั่งของโปรแกรมภาษาคอมพิวเตอร์ได้
2. ปฏิบัติการใช้คำสั่งและสร้างชิ้นงานจากโปรแกรมภาษาคอมพิวเตอร์ได้
3. ออกแบบและนำเสนอชิ้นงานที่สร้างสรรค์ได้
Embedded Files
การออกแบบเว็บเพจที่สวยงาม ต้องมีการจัดการและตกแต่งเอกสาร ซึ่งจะมีคำสั่งต่าง ๆ ดังต่อไปนี้
2.1 การจัดรูปแบบเอกสาร การเว้นช่องว่าง การขึ้นบรรทัดใหม่
2.2 การจัดการตัวอักษรการกำหนดลักษณะ รูปแบบ ขนาดและหัวเรื่อง
2.3 การตกแต่งหน้าเว็บเพจการกำหนดสีตัวอักษรและสีพื้นหลังของเว็บเพจ
2.4 การจัดวางตำแหน่งของข้อความ
2.5 การใส่เส้นคั่นในเอกสาร
2.6 การทำตัวอักษรวิ่ง
1. การเว้นช่องว่าง
คำสั่งที่ใช้ในการเว้นว่างในเอกสารหรือเคาะเว้นวรรค ไม่ว่าเราจะพิมพ์ข้อมูลในเอกสาร HTML โดยการเว้นช่องไว้มากขนาดไหนก็ตาม เมื่อนำไปแสดงบน Browser แล้วก็จะเปรียบเหมือนว่าเราได้เว้นช่องว่างเพียง 1 อักขระ หากต้องการให้ข้อมูลบน Browser แสดงข้อมูลที่มีการเว้นช่องว่าง ให้ตามต้องการก็ต้องใช้คำสั่ง ซึ่งคำสั่งดังกล่าวหนึ่งคำสั่งคือการให้เว้นช่องว่างเท่ากับเคาะ Space bar 1 ครั้ง และหากต้องการมากกว่านั้นก็ต้องใส่คำสั่งเพิ่มตามจำนวนช่องว่างที่ต้องการ เช่น ถ้าต้องการให้เว้นช่องว่างไป 3 ตัวอักษรเราก็ต้องใส่คำสั่ง เป็นต้น
2. การขึ้นบรรทัดใหม่และใส่หมายเหตุ
ที่มา : Opart Surinyotha
การขึ้นบรรทัดใหม่
ในเอกสารภาษา HTML ข้อความที่เราใส่เข้าไปในเอกสารจะเป็นข้อความที่ต่อเนื่องกันไป และจะขึ้นบรรทัดใหม่ก็ต่อเมื่อข้อความได้ยาวไปชนขอบขวาของหน้าจอแล้วเท่านั้น หากเราต้องการตัดข้อความหรือขึ้นบรรทัดใหม่จะต้องกำหนดเอง โดยใช้ Tag รูปแบบของคำสั่ง HTML ที่ใช้ในการขึ้นบรรทัดใหม่
<br> ตามด้วย ข้อความที่ต้องการนำไปขึ้นบรรทัดใหม่
การใส่หมายเหตุ (Comment) ในเอกสาร
การใส่หมายเหตุในเอกสาร HTML คือการที่เราต้องการใส่ข้อความหรือข้อมูลไว้ในเอกสารแต่ไม่ต้องการให้แสดงบน Browser นั่นเอง รูปแบบของคำสั่ง HTML ที่ใช้ในการใส่หมายเหตุในเอกสาร
<! หมายเหตุ>
:: กิจกรรมลองทำดู ::
คำชี้แจง : อ่านข้อความที่กำหนดและประยุกต์ใช้คำสั่งเพื่อเว้นช่องว่างและขึ้นบรรทัดใหม่ในเว็บเพจ
กำหนดชื่อเรื่อง <title> : การเว้นช่องว่างและการขึ้นบรรทัดใหม่
ยินดีต้อนรับเข้าสู่เว็บเพจของ ครูจุรีรัตน์ เสวกวิหารี ชั้นมัธยมศึกษาปีที่ 3/99 เลขที่ 99 ความหมายของเว็บเพจ เว็บเพจ (Web Page) คือหน้าเอกสารต่างๆ ในเว็บไซต์ที่มีการแสดงข้อมูลและรูปภาพของเว็บไซต์ โดยที่เว็บไซต์หนึ่งเว็บไซต์สามารถมีหน้าเว็บเพจได้ไม่จำกัด ซึ่งจะขึ้นอยู่กับเนื้อหาและข้อมูลของแต่ละเว็บไซต์ หากเราเปรียบเทียบแล้วลักษณะของเว็บเพจจะคล้ายกับหน้ากระดาษหน้าหนึ่ง ที่มีเนื้อหา รูปภาพ วิดิโอ รายละเอียดหรือเรื่องราวต่างๆ ที่อยู่ในหน้านั้นและสามารถเชื่อมโยงไปยังหน้าอื่นๆได้ เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร html
หมายเหตุ : อย่าลืมบันทึกไฟล์เอกสาร .html
3. การกำหนดรูปแบบอักษร
ที่มา : Opart Surinyotha
ในเอกสาร HTML ถ้าเราไม่ได้กำหนดแบบตัวอักษร เมื่อแสดงบนบราวเซอร์ จะแสดงตัวอักษรที่เป็น ค่าพื้นฐาน (Default) หากเราต้องการกำหนดแบบตัวอักษรเอกสามารถทำได้โดยใช้ Tag<font>
อธิบายคำสั่ง
<font face="AngsanaUPC">.....</font> นี่คือ Font แบบ AngsanaUPC
<font face="JasmineUPC">.....</font> นี่คือ Font แบบ JasmineUPC
<font face="TH SarabunPSK">.....</font> นี่คือ Font แบบ TH SarabunPSK
4. การกำหนดลักษณะของตัวอักษร
ที่มา : Opart Surinyotha
การกำหนดลักษณะตัวอักษรแบบเจาะจงไม่ว่าจะแสดงบนบราวเซอร์ใด ก็จะแสดงผลเหมือนกัน เช่น การกำหนดให้ตัวอักษรเป็นตัวหนา ตัวเอียง ตัวขีดฆ่า ตัวขีดเส้นใต้ แสดงแบบเลขยกกำลังในสูตรทางคณิตศาสตร์ หรือแสดงแบบตัวห้อยในสูตรทางวิทยาศาสตร์ เป็นต้น
อธิบายคำสั่ง
<B>.....</B> เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
<I>.....</I> เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
<S>.....</S> เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
<U>.....</U> เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
<SUP>.....</SUP> เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
<SUB>.....</SUB> เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อกำหนดลักษณะและรูปแบบของตัวอักษร
<html>
<head>
<title>การกำหนดลักษณะและรูปแบบของตัวอักษร</title>
</head>
<body>
<font face="TH SarabunPSK"> นี่คือ Font แบบ TH SarabunPSK <br>
โดยสามารถกำหนดลักษณะตัวอักษรแบบต่าง ๆ ดังนี้<P>
<B> การกำหนดลักษณะตัวอักษรแบบตัวหนา</B><P>
<I> การกำหนดลักษณะตัวอักษรแบบตัวเอียง</I><P>
<S> การกำหนดลักษณะตัวอักษรแบบตัวขีดฆ่า</S><P>
<U> การกำหนดลักษณะตัวอักษรแบบขีดเส้นใต้</U><P>
ข้อความแบบฟังก์ชันทางคณิตศาสตร Super Script E=MC<SUP>2</SUP><P>
ข้อความแบบสูตรทางวิทยาศาสตร์ Sub Script H<SUB>2</SUB>O<P>
</font>
</body>
</html>
5. การกำหนดขนาดของตัวอักษรและการกำหนดหัวเรื่อง
ที่มา : Opart Surinyotha
การกำหนดขนาดอักษร
ถ้าไม่กำหนดขนาดให้เมื่อนำเอกสาร HTML ไปแสดงบนบราวเซอร์ ขนาดของตัวอักษรจะถูกกำหนดเป็นค่าพื้นฐาน หากต้องการกำหนดเองก็สามารถทำได้โดยขนาดของตัวอักษรจะมี 7 ขนาด คือ 1 – 7 โดยจะเรียงจากเล็กไปใหญ่
อธิบายคำสั่ง
<FONT SIZE=ขนาดตัวอักษร> เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพจ
ขนาดตัวอักษรสามารถกำหนดได้ตั้งแต่ 1 - 7
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
การกำหนดหัวเรื่อง
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็กรูปแบบคำสั่ง HTML
ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>หัวข้อเรื่องที่ต้องการ</hn>
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อการกำหนดขนาดของตัวอักษรและการกำหนดหัวเรื่อง
<html>
<head>
<title>การกำหนดขนาดของตัวอักษรและการกำหนดหัวเรื่อง</title>
</head>
<body>
<font size=6>นี่คือขนาดตัวอักษร = 6 <br></font>
<font size=5>นี่คือขนาดตัวอักษร = 5 <br></font>
<font size=4>นี่คือขนาดตัวอักษร = 4 <br></font>
<font size=3>นี่คือขนาดตัวอักษร = 3 <br></font>
<font size=2>นี่คือขนาดตัวอักษร = 2 <br></font>
<h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
<h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
<h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
<h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
<h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
<h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
</body>
</html>
6. การกำหนดสีตัวอักษรและสีพื้นหลัง
ที่มา : Opart Surinyotha
การกำหนดสีตัวอักษรสามารถกำหนดให้เป็นสีเดียวกันทั้งเวบเพจ หรือกำหนดให้มีสีที่แตกต่างกันในเว็บเพจเดียวกันก็ได้
<BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี">
อธิบายคำสั่ง
TEXTCOLOR ใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR ใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี
<FONT COLOR="ชื่อสี"> เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพจ
</FONT> เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้ เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อกำหนดสีตัวอักษรและสีพื้นหลังของเว็บเพจ
<html>
<head>
<title> การกำหนดสีตัวอักษรและสีพื้นหลัง</title>
</head>
<body textcolor="black" BGcolor="pink"> นี่คือการกำหนดสีตัวอักษรเป็นสีดำ สีพื้นเป็นสีชมพู <br>
<font color=red>นี่คือตัวอักษรสีแดง<br></font>
<font color=green>นี่คือตัวอักษรสีเขียว<br></font>
<font color=blue>นี่คือตัวอักษรสีน้ำเงิน<br></font>
</body>
</html>
7. การใส่เส้นคั่นและการจัดวางตำแหน่งของข้อความ
ที่มา : Opart Surinyotha
เป็นอีกวิธีหนึ่งที่จะแบ่งข้อมูลให้เป็นสัดส่วนและยังเป็นการตกแต่งเว็บเพจให้สวยงามได้อีกด้วย การใส่เส้นคั่นในเอกสารนั้นมีวิธีการใส่และการปรับแต่งเส้นคั่น ดังนี้
การใส่เส้นคั่นในแนวนอน (Horizontal Rule)
เป็นการใส่เส้นคั่นเพื่อแบ่งข้อมูลออกเป็นสัดส่วนให้ดูง่ายขึ้น
โดยการใช้ Tag<HR> รูปแบบของคำสั่ง HTML ที่ใส่เส้นคั่นในเอกสาร<HR>ข้อมูลที่ต้องการแบ่งการกำหนดขนาดของเส้นคั่น
รูปแบบของคำสั่ง HTML ในการกำหนดขนาดของเส้นคั่น <HR WIDTH=ความยาวของเส้นคั่น SIZE=ความหนาของเส้นคั่น> ความยาวและความหนาของเส้นนั้น มีหน่วยเป็นพิกเซล โดยมีความยาวสูงสุดที่ 800 พิกเซล และความหนาสูงสุด 500 พิกเซล
การกำหนดให้เป็นเส้นคั่นทึบ
เส้นคั่นปกติจะเป็นแบบโปร่ง หากต้องการกำหนดให้เป็นเส้นคั่นแบบทึบก็สามารถทำได้
รูปแบบของคำสั่ง HTML การกำหนดให้เป็นเส้นคั่นทึบ <HR NOSHADE>การใส่สีให้เส้นคั่น
รูปแบบของคำสั่ง HTML การใส่สีให้เส้นคั่น <HR COLOR=สีที่ต้องการ>การนำรูปภาพมาเป็นเส้นคั่น
รูปแบบของคำสั่ง HTML การนำรูปภาพมาเป็นเส้นคั่น <IMG SRC=ชื่อไฟล์รูปภาพ.นามสกุล>
รูปแบบ
LEFT จัดชิดซ้าย
CENTER จัดกึ่งกลาง
RIGHT จัดชิดขวา
ในการจัดย่อหน้าหรือการจัดพารากราฟ จะทำให้การแบ่งเนื้อหาเป็นสัดส่วน และดูง่าย โดยใช้ Tag<P>
อธิบายคำสั่ง
<P> เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
<P ALIGN = LEFT> กำหนดให้ข้อความอยู่ชิดด้านซ้าย
<P ALIGN = CENTER> กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
<P ALIGN = RIGHT> กำหนดให้ข้อความอยู่ชิดด้านขวา
</P> เป็นคำสั่งปิดที่ต้องใข้คู่กันเสมอ (เมื่อใช้ <P ALIGN>
:: กิจกรรมลองทำดู ::
คำชี้แจง : พิมพ์คำสั่งต่อไปนี้เพื่อใส่เส้นคั่นและจัดวางตำแหน่งของข้อความในเว็บเพจ
<html>
<head>
<title>การใส่เส้นคั่นและการจัดวางตำแหน่งของข้อความ </title>
</head>
<body>
<CENTER><font size= 7 color=blue font face="TH SarabunPSK"><B>ความหมายของเว็บเพจ</B>
<HR COLOR =yellow WIDTH=650 SIZE=5>
<font size=6> เว็บเพจ (Web Page) คือหน้าเอกสารต่างๆ ในเว็บไซต์ที่มีการแสดงข้อมูลและรูปภาพของเว็บไซต์และสามารถเชื่อมโยงไปยังหน้าอื่นๆ ได้<br>เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML <br>
<P ALIGN = RIGHT><font size= 5 color=green>จัดทำโดย<br> คุณครูจุรีรัตน์ เสวกวิหารี ชั้นมัธยมศึกษาปีที่ 3/99 เลขที่ 99 <br>โรงเรียนนวมินทราชูทิศ มัชฌิม สำนักงานเขตพื้นที่การศึกษามัธยมศึกษานครสวรรค์</P>
</font>
</body>
</html>
เลือกหัวข้อส่งงานด้านล่าง
Page updated
Report abuse