การใช้ตัวอักษรและภาพกราฟิก

การใช้ตัวอักษรบนหน้าเว็บ

ในแต่ละตัวอักษรประกอบด้วยส่วนต่างๆ ที่น่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษรแต่ละชนิดได้มีส่วนประกอบหลักๆ ดังนี้ Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ Cap height ความสูงจากเส้นความสูงของตัวอักษร x-height ความสูงของตัวอักษร

วิธีการใช้ตัวอักษรและบนหน้าเว็บ

การจัดตำแหน่ง การจัดตำแหน่งของตัวอักษรในแต่ละส่วนโดยที่การจัดตำแหน่งแต่ละแบบ ตัวอักษรที่ถูดจัดให้ชิดขอบซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็นทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขวา ส่วนตัวอักษรที่มีการปรับระยะให้ชิดขอบทั้งซ้ายและขวาเป็นที่นิยมใช้ในหนังสือพิมพ์และจุลสาร
จัดชิดซ้าย ตัวอักษรที่ถูกจักให้ชิดขอบซ้าย จะมีปลายด้านขวาไม่สม่ำเสมอเนื่องจากตัวอักษรในแต่ละบรรทัด มีความยาวไม่เท่ากัน แต่ก็สามารถหาจุดเริ่มต้นของแต่ละบรรทัดได้ง่ายกว่า
จัดชิดขวา การจัดตัวอักษรให้ชิดขวา จะดูน่าสนใจแต่จุดเริ่มต้นในของแต่ละบรรทัดที่ไม่สมำเสมอ ทำให้อ่านยากเนื่องจากผู้อ่านต้องหยุดชะงัก เพื่อหาจุดเริ่มต้นของแต่ละบรรทัด
จัดกึ่งกลาง การจัดตัวอักษรให้อยู่กึ่งกลาง ใช้ได้ผลดีกับข้อมูลที่มีปริมาณไม่มาก เหมาะสมกับรูปแบบที่เป็นทางการอย่างเช่น คำประกาศ หรือ คำเชื้อเชิญ
ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ ที่อยู่ระหว่างตัวอักษรระหว่างคำ หรือระหว่างบรรทัด สามารถปรับบระยะของช่องว่างเหล่านี้เพื่อให้อ่านได้ง่ายขึ้น แม้ว่าตัวอักษรจะถูกออกแบบมาให้มีระยะห่างที่เหมาะสม อยู่แล้ว แต่สถานการณ์ มีความต้องการให้ตัวอักษรดูแน่นหรือหลวมเป็นพิเศษ อักษรที่ใช้ตัวพิมพ์ใหญ่ทั้งหมด และควรเพิ่มช่องว่างระหว่างตัวอักษรให้มากขึ้นเล็กน้อย
ความยาวของบรรทัด เมื่องบรรทัดของตัวอักษรยาวขึ้น อาจสร้างความไม่สะดวกให้กับผู้อ่านที่ต้องเลื่อนสายาตาจากปลายบรรทัดไปยังส่วนต้นของบรรทัดใหม่ ความยาวที่เหมาะสมของบรรทัดขึ้นอยู่กับหลายปัจจัยอย่างเช่น ชนิดตัวบอักษร ขนาด ระยะห่างระหว่างบรรทัดและความยาวของเนื้อหา จะทำให้ไม่ต้องขยับศีรษะ ดังนั้น เพื่อความสะดวกในการอ่าน แต่ละบรรทัดควรมีตัวอักษรประมาณ 50-70 ตัวอักษร ดึงดูดความสนใจด้วยอักษรขนาดใหญ่ ตัวอักษรขนาดใหญ่ให้สะดุดตาเพื่อดึงดูดความสนใจด้วยการสร้างความแตกต่างของขนาดตัวอักษรโดยทั่วไปแล้วตัวอักษรแรกจะมีขนาดใหญ่กว่าตัวอื่นประมาณ 2-5 พอยท์ และยังนิยมที่จะใช้ตัวอักษรชนิดอื่นเพื่อให้เกิดความแตกต่างการเน้นข้อความให้เด่น ในการเตน้นข้อความทำได้โดยอาศัยความแตกต่างท่ปราฏของตัวอักษร รวามถึงความแตกต่างระหว่างพื้นที่ตัวหนังสือกับพื้นที่ว่างโดยรอบ ด้วยการสร้างความแตกต่างของรูปแบบและลักษณะของตัวอักษรให้เห้นได้ชัดเจนจะเป็นที่สะดุดตาและดึงดูดความสนใจจากผู้อ่านได้อย่างมาก การใช้ขนาดและน้ำหนักของตัวอักษร ตัวอักษรโดยทำให้มีขนาดใหญ่กว่า หรือมีลักษณะเส้นที่หนาและเข้มกว่า ซึ่งจะทำให้ดูมีความสำคัญมากกว่าสิ่งที่อยู่รอบข้าง สิ่งที่ต้องการเน้นจะมีลักษณะเด่นชัดและสะดุดตาผู้อ่าน ข้อความที่ไม่ต้องการเน้นจะมีขนาดเล็กและบางกว่า ซึ่งในภาษา HTML จะมีน้ำหนัดของตัวหนังสือให้เลือก 2 ระดับ คือ ตัวปรติ และตัวหนา

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

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

การใช้งานภาพกราฟฟิก

ประเภทของไฟล์รูปภาพ
ไฟล์รูปภาพที่ใช้อยู่ในปัจจุบันนี้มีหลายประเภท แต่ไม่สามารถนำมาใช้กับเว็บเพจได้ทุกประเภท ประเภทของไฟล์รูปภาพที่นิยมมาใช้กับเว็บเพจมี 3 ประเภทคือ

1. ไฟล์ประเภท GIF (Graphics Interchange Format)
เป็นไฟล์ภาพที่มีขนาดเล็ก คุณภาพต่ำ เนื่องจากถูกบีบอัดข้อมูลให้มีขนาดเล็ก แสดงสีได้ 256 สี แต่เป็นที่นิยมสำหรับผู้เขียนเว็บเพจเป็นอย่างมากเนื่องจากสามารถทำเป็นภาพเคลื่อนไหว (Animation) และกำหนดให้แสดงภาพแบบโปร่งแสง มองทะลุไปด้านหลังได้ ไฟล์ประเภทนี้ส่วนใหญ่จะเป็น รูปวาด ภาพการ์ตูน รูป icon, emotion, ป้ายโฆษณาแบนเนอร์ และภาพที่ไม่ต้องการความละเอียดมากนัก

รูป emotion ต่างๆ

สามารถทำภาพแบบโปร่งแสงได้ เมื่อนำไปวางบนพื้นหลังสีอะไร ด้านหลังรูปจะเป็นสีตามพื้นหลัง

2. ไฟล์ประเภท JPEG หรือ JPG (Joint Photographics Expert Group)
เป็นไฟล์รูปภาพที่มีการบีบอัดข้อมูลน้อยกว่าไฟล์ประเภท GIF สามารถแสดงสีได้ 16.7 ล้านสี ภาพที่ได้จะมีความคมชัดมาก ไฟล์ประเภทนี้เหมาะกับภาพที่ต้องการความละเอียดสูง เช่น ภาพถ่ายจากกล้องดิจิตอลหรือ ภาพที่ได้จากการสแกน ภาพที่แสดงการไล่เฉดสี เป็นต้น

3. ไฟล์ประเภท PNG (Portable Network Graphic)
เป็นไฟล์ภาพที่นำมาใช้แทนที่ไฟล์ประเภท GIF เนื่องจากสามารถแสดงภาพได้เร็วกว่า แต่ยังไม่ค่อยแพร่หลายมากนักเนื่องจากไม่สามารถทำเป็นภาพเคลื่อนไหวได้ และมีข้อเสียที่ไม่สามารถใช้กับเว็บเบราเซอร์รุ่นเก่าได้

PNG-8 เป็นรูป แบบที่ใช้สีได้เพียง 256 สี และมีคุณสมบัตคล้ายกับไฟล์ GIF จึงเหมาะสำหรับใช้ทำภาพที่มีสีเรียบๆ เช่น ภาพโลโก้, การ์ตูน สามารถกำหนดพื้นหลังให้โปร่งแสงได้

PNG-24 เป็นรูป แบบที่ใช้สีได้ 16.7 ล้านสี เช่นเดียวกับไฟล์ JPG เหมาะสำหรับภาพถ่าย