หน่วยการเรียนรู้ที่ 3
การจัดรูปแบบเอกสารบนเว็บเพจ

สาระสำคัญ

- ในหน่วยการเรียนรู้นี้ได้เสนอรูปแบบของการจัดการข้อความบนเว็บเพจในรูปแบบต่างๆ เช่น การพิมพ์ข้อความ การขึ้นต้นบรรทัดใหม่ การตัด การคัดลอก และการวางข้อความบนเว็บเพจ เป็นต้น ซึ่งลักษณะการทำงานของโปรแกรมพัฒนาเว็บนั้นจะมีความแตกต่างกับการพิมพ์งานธรรมดาอยู่บ้างเพราะฉะนั้นผู้ที่ทำการพัฒนาเว็บไซต์ต้องมีความเข้าใจในหลักการสร้างข้อความจึงสามารถพัฒนารูปแบบของเว็บได้อย่างรวดเร็วและสวยงามถูกต้องตามหลักการพัฒนารูปแบบเว็บไซต์และยังมีส่วนของการแทรกรูปภาพในลักษณะต่างๆ รวมถึงการปรับแต่งภาพเพื่อแทรกให้ดูเหมาะสมได้สัดส่วนด้วย

สมรรถนะประจำหน่วย

แสดงความรู้เกี่ยวกับการจัดรูปแบบเอกสารเว็บเพจ

จุดประสงค์การเรียนรู้

๑. จัดการกับข้อความบนเว็บเพจได้

๒. กำหนดรูปแบบข้อความด้วยคำสั่ง CSS และ คำสั่ง HTML ได้

๓. จัดการรูปภาพบนเว็บเพจได้

๔. ใช้แม่แบบเอกสารเว็บไซต์ได้

เนื้อหาสาระการเรียนรู้

๑. การจัดการข้อความบนเว็บเพจ

๒. การกำหนดรูปแบบข้อความด้วยคำสั่ง CSS

๓. การกำหนดรูปแบบข้อความด้วยคำสั่ง HTML

๔. การจัดการรูปภาพบนเว็บเพจ

๕. แม่แบบเอกสารเว็บไซต์


1.การจัดการข้อความบนเว็บเพจ

การจัดรูปแบบข้อความบนเว็บเพจ

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

เครื่องมือสำหรับจัดรูปแบบข้อความด้วย HTML

หมายเลข 1 : เปิดการทำงานกับ HTML

หมายเลข 2 : Format : เลือกรูปแบบหัวข้อ Heading (ขนาดตัวอักษร) ระดับ 1-6

หมายเลข 3 : Class : ดึงสไตล์ของ CSS มาใช้กับข้อความ

หมายเลข 4 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา

หมายเลข 5 : กำหนดลักษณะตัวอักษรให้เป็นตัวเอียง

หมายเลข 6 : ใส่ Bullet หรือหัวข้อย่อย

หมายเลข 7 : จัดย่อหน้าของข้อความ

เครื่องมือสำหรับจัดรูปแบบข้อความด้วย CSS

หมายเลข 1 : เปิดการทำงานกับ CSS

หมายเลข 2 : Targeted Rule : สร้างหรือกำหนดสไตล์ CSS

หมายเลข 3 : Font : เลือกรูปแบบของตัวอักษร

หมายเลข 4 : Size : ขนาดของตัวอักษร

หมายเลข 5 : สีของตัวอักษร

หมายเลข 6 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา

หมายเลข 7 : กำหนดลักษณะตัวอักษรให้เป็นตัวเอียง

หมายเลข 8 : จัดตำแหน่งของข้อความ เช่น ชิดซ้าย กึ่งกลาง ชิดขวา จัดให้ตรงกันทั้งซ้ายและขวา

การกำหนดรูปแบบหัวข้อเรื่อง

หัวข้อเรื่อง (Heading) ใช้สำหรับเน้นหัวข้อสำคัญของเนื้อหาในเว็บเพจ โดยสามารถกำหนดหัวข้อเรื่องได้จากพาเนล Properties มีขั้นตอนดังนี้

1. คลิกวางเคอร์เซอร์ในบรรทัดที่ต้องการกำหนดหัวข้อเรื่อง

2. ที่พาเนล Properties คลิกโหมด HTML

3. ที่ Format คลิกแล้วเลือกรูปแบบหัวข้อเรื่องตามต้องการ

4. จะได้รูปแบบหัวข้อเรื่องตามต้องการ

การจัดรูปแบบข้อความทั้งเว็บเพจ

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

1. คลิกเมนู Modify เลือก Page Properties…

2. ที่ Category คลิกเลือก Appearance (CSS)

3. ที่ Page Font เลือกรูปแบบข้อความ ที่ Size เลือกขนาดตัวอักษร ที่ Text color เลือกสี ตามต้องการ

4. คลิกปุ่ม OK

5. จะได้รูปแบบข้อความตามต้องการ

การจัดรูปแบบข้อความทั้งเว็บเพจ

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

1. คลิกเมนู Modify เลือก Page Properties…

2. ที่ Category คลิกเลือก Appearance (CSS)

3. ที่ Page Font เลือกรูปแบบข้อความ ที่ Size เลือกขนาดตัวอักษร ที่ Text color เลือกสี ตามต้องการ

4. คลิกปุ่ม OK

5. จะได้รูปแบบข้อความตามต้องการ

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

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

1. คลิกเลือกข้อความที่ต้องการกำหนดรูปแบบ

2. ที่พาเนล Properties คลิกโหมด HTML

3. คลิกปุ่ม เพื่อกำหนดตัวหนา หรือตัวเอียง ตามต้องการ

4. จะได้อักษร ตัวหนา หรือตัวเอียง ตามต้องการ

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

การจัดตำแหน่งข้อความในเว็บเพจให้ชิดซ้าย กึ่งกลาง หรือชิดขวาในหน้าเว็บเพจเพื่อให้ข้อความอยู่ในตำแหน่ง

ที่เหมาะสม มีขั้นตอนดังนี้

1. คลิกบรรทัดที่ต้องการจัดตำแหน่งข้อความ

2. คลิกเมนู Format

3. เลือกคำสั่ง Align

4. คลิก Align เลือกจัดตำแหน่ง ชิดซ้าย กึ่งกลาง ชิดขวา ตามต้องการ

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

5.1 คำสั่งในการกำหนดลักษณะตัวอักษร (Style)

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

  • การกำหนดตัวอักษรตัวหนา (Bold) ใช้แท็ก <B>

  • การกำหนดตัวอักษรตัวเอียง (Italic) ใช้แท็ก <I>

  • การกำหนดขีดเส้นใต้ตัวอักษร (Underline) ใช้แท็ก <U>

  • การกำหนดตัวอักษรตัวพิมพ์ดีด (Typewriter) ใช้แท็ก <TT>

  • การกำหนดขีดเส้นพาดทับกลางตัวอักษร (Strikethrough) ใช้แท็ก <S>

  • การกำหนดตัวอักษรตัวห้อย (Subscript) ใช้แท็ก <SUB>

  • การกำหนดตัวอักษรตัวยก (Superscript) ใช้แท็ก <SUP>

  • การกำหนดตัวอักษรตัวโต (Big) ใช้แท็ก <BIG>

  • การกำหนดตัวอักษรตัวเล็ก (Small) ใช้แท็ก <SMALL>

  • การกำหนดตัวเน้น (Emphasized text) ใช้แท็ก <EM>

  • การกำหนดเน้นข้อความสำคัญ (Important text) ใช้แท็ก <STRONG>

  • การกำหนดเน้นข้อความด้วยแถบสี (Highlighted text) ใช้แท็ก <MARK>

  • การกำหนดข้อความในเครื่องหมายคำพูด ใช้แท็ก <Q>

<B> ... ข้อความ ... </B>

<I> ... ข้อความ ... </I>

<U> ... ข้อความ ... </U>

<TT> ... ข้อความ ... </TT>

<S> ... ข้อความ ... </S>

<SUB> ... ข้อความ ... </SUB>

<SUP> ... ข้อความ ... </SUP>

<BIG> ... ข้อความ ... </BIG>

<SMALL> ... ข้อความ ... </SMALL>

<EM> ... ข้อความ ... </EM>

<STRONG> ... ข้อความ ... </STRONG>

<MARK> ... ข้อความ ... </MARK>

<Q> ... ข้อความ ... </Q>

ตัวอย่าง style.html

<HTML>

<HEAD><TITLE> Font Face </TITLE></HEAD>

<BODY>

แบบตัวอักษรปกติ Normal<BR>

แบบตัวอักษรหนา <B>Bold</B><BR>

แบบตัวอักษรเอียง <I>Italic</I><BR>

แบบตัวอักษรขีดเส้นใต้ <U>Underline</U><BR>

แบบตัวอักษรตัวพิมพ์ดีด <TT>Typewriter</TT><BR>

แบบตัวอักษรขีดเส้นพาดทับกลางตัวอักษร <S>Strikethrough</S><BR>

แบบตัวอักษรตัวห้อย <SUB>Subscript</SUB><BR>

แบบตัวอักษรตัวยก <SUP>Superscript</SUP><BR>

แบบตัวอักษรตัวโต <BIG>Big</BIG><BR>

แบบตัวอักษรตัวเล็ก <SMALL>Small</SMALL><BR>

ตัวเน้น<EM>ตัวเน้น</EM><BR>

เน้นข้อความสำคัญ<STRONG> เน้นข้อความสำคัญ</STRONG><BR>

เน้นข้อความด้วยแถบสี<MARK> เน้นข้อความด้วยแถบสี</MARK><BR>

กำหนดข้อความในเครื่องหมายคำพูด <Q>ข้อความในเครื่องหมายคำพูด</Q><BR>

</BODY>

</HTML>

5.2 ปรับเปลี่ยนขนาดตัวอักษร

เราสามารถกำหนดขนาดของตัวอักษรในคำสั่ง <FONT> โดยใช้ Attributes "Size" ในภาษา HTMLกำหนดขนาดของตัวอักษรได้ 7 ขนาด โดยใช้ตัวเลข 1-7 เป็นตัวกำหนด ค่าเริ่มต้นจะมีขนาดเป็น 3

<FONT Size = "ขนาด"> ... ข้อความ ... </FONT>

ตัวอย่าง font_size.html

<HTML>

<HEAD><TITLE> Font Size </TITLE></HEAD>

<BODY>

<FONT Size="7">Font Size 7</FONT><BR>

<FONT Size="6">Font Size 6</FONT><BR>

<FONT Size="5">Font Size 5</FONT><BR>

<FONT Size="4">Font Size 4</FONT><BR>

<FONT Size="3">Font Size 3</FONT><BR>

<FONT Size="2">Font Size 2</FONT><BR>

<FONT Size="1">Font Size 1</FONT><BR>

</BODY>

</HTML>

5.3 การกำหนดแบบตัวอักษร <font face>

ในเว็บเพจแต่ละหน้า นอกจากการกำหนดลักษณะตัวอักษร และขนาดตัวอักษรแล้ว เราสามารถกำหนดรูปแบบตัวอักษรหรือฟอนต์ที่ใช้ได้ด้วย เช่น AngsanaUPC, CordiaNEW โดยมีรูปแบบดังนี้

เรียนรู้แท็ก


ชื่อแอตทริบิวต์

face

ตำแหน่งของแอตทริบิวต์

อยู่ในแท็กเปิด <font...>

รูปแบบใน HTML

<font face="ชื่อฟอนต์">ข้อความ</font>

ค่าที่กำหนดให้ใช้

ชื่อฟอนต์ที่ต้องการใช้งาน

ตัวอย่างการกำหนดแบบตัวอักษร

ตัวอย่าง font_face.html

<HTML>

<HEAD><TITLE>Font Face</TITLE></HEAD>

<body>

<font face="Times New Roman">HTML by Times New Roman font</font><Br>

<font face="Geneva">HTML by Geneva font</font><Br>

<font face="Courier New">HTML by Courier New font</font><Br>

<font face="Vivaldi">HTML by Vivaldi font</font><Br>

<font face="Angsana New">HTML by Angsana New font</font><Br>

</body>

</HTML>

5.4 การใช้สีในเว็บเพจ

การกำหนดสีให้กับตัวอักษรเราใช้ Attributes "Color" ในการกำหนดสีของตัวอักษรทำได้ 2 วิธี

1. กำหนดจากชื่อของสีมาตรฐาน เป็นการกำหนดจากชื่อสีมาตรฐานโดยตรง เช่น Black, Red เป็นต้น

2. กำหนดจากรหัสเลขฐาน 16 จะใช้การอ้างอิงเลขฐาน 16 ในระบบของหมายเลขสี RGB (Red, Green, Blue) ซึ่งมีรูปแบบของรหัสสีเป็น #RRGGBB โดยใช้แทนรหัสด้วยเลขฐาน 16 ในช่วง 0, 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F ตามลำดับ โดยมีรูปแบบดังนี้

<FONT Color = "ชื่อสีมาตรฐาน"> ... ข้อความ ... </FONT>

<FONT Color = "#RRGGBB"> ... ข้อความ ... </FONT>



ตัวอย่างสีมาตรฐานในการแสดงผลบนเว็บบราวเซอร์ (ในที่นี้ขอใช้ Internet Explorer เป็นหลัก) ทั้งชื่อของสี และรหัสเลขฐาน 16 มีดังนี้

ชื่อมาตรฐาน ตัวเลขฐาน 16 ในระบบสี #RRGGBB สีที่ปรากฏบนจอภาพ

Black #000000 สีดำ

Blue #0000FF สีน้ำเงินเข้ม

Cyan #00FFFF สีคราม

Darkgray #A9A9A9 สีเทาเข้ม

Gray #808080 สีเทา

Green #008000 สีเขียว

Lightgray #D3D3D3 สีเทาอ่อน

Magenta #FF00FF สีม่วงอ่อน

Orange #FFA500 สีส้ม

Pink #FFC0CB สีชมพู

Red #FF0000 สีแดง

White #FFFFFF สีขาว

Yellow #FFFF00 สีเหลือง


ตัวอย่าง font_color.html

<HTML>

<HEAD><TITLE> Font Color</TITLE></HEAD>

<BODY>

<FONT color="Blue">This is Blue Color</FONT><BR>

<FONT color="Green">This is Green Color</FONT><BR>

<FONT color="#FFA500">This is #FFA500</FONT><BR>

</BODY>

</HTML>

กำหนดสีพื้นและสีตัวอักษร <body bgcolor.. text..> เราสามารถกำหนดสีพื้นของหน้าเว็บเพจ และสีตัวอักษรได้ด้วยการกำหนดค่าสีให้กับแอตทริบิวต์ bgcolor (สีพื้นเว็บเพจ) และ text (สีตัวอักษร) ซึ่งมีรูปแบบดังนี้

แอตทริบิวต์

ชื่อแอตทริบิวต์ bgcolor (สีพื้นเว็บเพจ) และ text (สีตัวอักษรทั้งเว็บเพจ)

ตำแหน่งของแอตทริบิวต์ อยู่ภายในแท็กเปิด <body...>

รูปแบบใน HTML <body color="รหัสสี/ชื่อสี" text="รหัสสี/ชื่อสี">

ค่าที่กำหนดให้ใช้ รหัสสีเลขฐาน 16 เช่น #FF0223, #00CC15

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

ตัวอย่าง bg_font_color.html

<HTML>

<HEAD><TITLE> BG Color</TITLE></HEAD>

<body bgcolor="lightgreen" text="#0000FF">

<h3>คำคมประจำสัปดาห์</h3>

<h4>หากเราต้องการจะไปไหนอย่างเร็วไว ก็ต้องไปตัวคนเดียว<br>แต่ถ้าเราต้องการไปไหนไกลๆ หรือไปสู่จุดหมาย ก็ต้องไปเป็นทีม<br>ดังนั้นองค์กรที่จะไปสู่ความสำเร็จได้ จะต้องมีการทำงานเป็น Teamwork</h4>

</body>

</HTML>