148 5. ใส่ Comment tag ที่จะไม่แสดงในหน้าเว็บ. Comment tag เป็นส่วนที่จะไม่ปรากฏในหน้าเว็บ คุณ สามารถใช้จดโน้ตเตือนตัวเองในเอกสาร HTML ได้โดยไม่ไปพัวพันกับตัวเนื้อหา <!--- ให้พิมพ์ความคิดเห็นของ คุณใน tag นี้ ---> โดยไม่ต้องใส่ end tag - Tag ที่เราใช้ได้โดยไม่ต้องมี end tag นั้นเรียกว่า "empty tags" 6. ได้เวลารวมร่าง. วิธีเดียวที่จะทำให้คุณคุ้นเคยกับ tag พวกนี้ได้เร็วที่สุดก็คือการใช้งานจริงในหน้าเว็บของ คุณ เราได้รวบรวมตัวอย่าง tag ต่างๆ ที่คุณได้ทำความรู้จักในแต่ละขั้นตอนที่ผ่านมาไว้ข้างล่างนี้แล้ว ลองคิดดู ว่าจะออกมาหน้าตาเป็นยังไงในเบราว์เซอร์ ว่าแล้วก็ copy-paste ใส่เอกสารของคุณแล้วไปดูกันเลย - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - <html> - <head> - <title>หน้าเว็บ HTML แรกของฉัน</title> - </head> - <body> - <h1>ยินดีต้อนรับสู่หน้าเว็บของฉัน</h1> - ขอให้สนุกกับเว็บไซต์นี้!<p><strong>เว็บนี้เพื่อคุณโดยเฉพาะเลยนะเนี่ย</strong> - <h2>ตอนที่ 1: ฉันรู้จัก HTML ได้ยังไง</h2> - <!---เตือนตัวเอง: จำไว้ "h1" คือ header ที่ใหญ่กว่า "h2"---> - ตอนนี้เรียนเรื่อง HTML มา <del>หนึ่ง</del> <ins>สอง</ins>ชั่วโมงแล้ว ชักเชี่ยวแล้วสิ - </body> - </html>
149 ส่วน 3 ใส่ลิงค์กับรูปภาพ 1. มารู้จัก attribute กัน. คุณใส่ข้อมูลเพิ่มเติมเข้าไปใน Tag ได้ เรียกว่า "attributes" ในรูปของคำที่คุณเพิ่ม เข้าไปในตัว tag เป็น attribute-name="specific value" พูดง่ายๆ ว่า แทบจะทุก tag ของ HTML สามารถ ใส่ title attribute เข้าไปได้ - <p title="คำนำ">ใส่ย่อหน้าคำนำตรงนี้</p> ตั้งชื่อให้ย่อหน้านั้นว่า "คำนำ" ซึ่งจะโผล่ขึ้นมาเวลา คุณเลื่อนเมาส์ไปเหนือย่อหน้านั้นของหน้าเว็บ
150 2. ลิงค์ไปที่หน้าอื่น. ให้ใช้ tag <a> </a> สร้าง hyperlink ไปยังหน้าอื่นของเว็บ ใส่ URL ของหน้าเว็บนั้นใน ลิงค์เพื่อใช้ href attribute ข้างล่างคือตัวอย่างสำหรับลิงค์ไปยังหน้าที่คุณกำลังอ่านอยู่นี่แหละ - <a href="http://www.wikihow.com/Write-an-HTML-Page">คนที่เข้าชมเว็บไซต์ของคุณ สามารถคลิกที่ข้อความนี้เพื่อไปยังลิงค์</a> 3. เพิ่ม id attribute เข้าไปใน tag. อีก attribute ที่ใช้ได้กับแทบทุก tag ของ HTML ก็คือ "id" ให้พิมพ์ id="example" ใน tag ไหนก็ได้ หรือใช้ชื่ออะไรที่ไม่มีเว้นวรรค ตอนนี้จะยังไม่เห็นผลอะไร แต่เราจะมาใช้งาน กันต่อไปในขั้นตอนข้างล่าง - เช่น ถ้าลองใส่ <p id="example"> ลงในเอกสารของคุณ ย่อหน้านี้ก็จะกลายเป็นตัวอย่างอธิบาย วิธีใช้ id attribute ให้คุณ</p>
151 4. ลิงค์ไปยังส่วนประกอบอื่นด้วย id เฉพาะเจาะจง. ตอนนี้คุณสามารถใช้ hyperlink tag <a> </a> เพื่อ ลิงค์ไปยังจุดอื่นในหน้าเดียวกันได้อีกด้วย แทนที่จะใช้ URL ให้คุณใช้สัญลักษณ์ # ตามด้วยค่า id ที่จะลิงค์ไป เช่น <a href="#example">ข้อความนี้จะลิงค์ไปที่ย่อหน้าที่มี id "example"</a> - ทุกค่าของ HTML นั้นคุณจะพิมพ์ตัวเล็กหรือตัวใหญ่ก็ได้ทั้งนั้น ไม่ว่าจะ "#EXAMPLE" หรือ "#example" ก็ลิงค์ไปที่เดียวกันนั่นแหละ - ถ้าหน้าเว็บนั้นสั้นจนไม่ต้องเลื่อนลงไป คุณอาจไม่ทันสังเกตว่ามันเกิดอะไรขึ้นตอนคุณคลิกลิงค์ใน เบราว์เซอร์ ให้ลองย่อหน้าต่างจนมี scroll bar โผล่ขึ้นมานั่นแหละ แล้วลองดูใหม่อีกรอบ 5. ใส่รูป. Tag <img> นั้นเป็น empty tag แปลว่าไม่จำเป็นต้องใช้ closing tag ทุกข้อมูลที่เบราว์เซอร์ต้องใช้ แสดงรูปจะถูกเพิ่มในรูปของ attribute แทน ข้างล่างคือตัวอย่างสำหรับแสดงโลโก้ของ wikiHow ตามด้วย คำอธิบายของแต่ละ attribute - <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo"> - Attribute src=" " จะบอกเบราว์เซอร์ว่าต้องหารูปจากตรงไหน (บอกไว้ก่อนเลยว่าเสียมารยาทมาก ถ้าเที่ยวไปแอบหยิบยืมรูปมาจากเว็บของคนอื่น แถมถ้าวันดีคืนดีเว็บนั้นเกิดล่มหรือเจ๊งไป รูปที่มาโผล่ในเว็บ คุณก็จะพลอยอันตรธานหายไปด้วย) - Attribute style=" " ทำได้หลายอย่าง แต่ที่เด่นสุดคือใช้กำหนด pixel ความกว้างความสูงของรูป (หรือจะใช้ attribute width=" " กับ height=" " แยกกันก็ได้ แต่ระวังจะเจอปัญหาเรื่องปรับขนาดรูปถ้าใช้ CSS[10] ) - Attribute alt=" " คือคำบรรยายรูปสั้นๆ ที่คนเข้าเว็บจะเห็นเวลารูปไม่ขึ้น อันนี้บังคับใส่เลย เลือก ไม่ได้ เพราะต้องใช้กับ screen reader สำหรับผู้พิการทางสายตาที่แวะมาเยี่ยมชมเว็บของคุณ[11]
152 ส่วน 4 ศึกษาเพิ่มเติมและเปิดตัวหน้าเว็บคุณออนไลน์ 1. ตรวจสอบ HTML ของคุณกันอีกรอบ. การตรวจสอบ HTML จะหา error ในโค้ดที่รอดสายตาคุณไปได้ ถ้าหน้าเว็บคุณแสดงไม่ครบถ้วนสมบูรณ์ การตรวจทานในขั้นตอนนี้จะช่วยให้คุณเจอสาเหตุของข้อผิดพลาดที่ เกิดขึ้น แถมคุณยังได้เรียนรู้เพิ่มเติมเรื่อง HTML เพราะต้องหาโค้ดที่ดูปกติดีในหน้าจอของคุณแต่กลับใช้ไม่ได้ เพราะมาตรฐานของ HTML มีการอัพเดท เวลามี HTML ที่ใช้การไม่ได้ ไม่ได้แปลว่าเว็บของคุณจะเข้าไม่ได้ แต่ จะเป็นปัญหาอื่นหรือหน้าเว็บนั้นออกมาไม่ครบถ้วนสมบูรณ์เวลาเปิดในเบราว์เซอร์ที่แตกต่างออกไป - ลองใช้เว็บตรวจสอบฟรีอย่าง W3C ดู หรือจะใช้เว็บตรวจสอบ HTML 5 เว็บอื่นก็ได้ 2. ศึกษาพวก tag กับ attribute ไว้ให้คล่องๆ. ยังมี tag กับ attribute ของ HTML อีกเยอะ และคุณก็ ศึกษาหาความรู้เพิ่มเติมได้มากมายหลายที่เช่นกัน - ลองเข้าไปที่ w3schools กับ HTML Dog จะเจอ tutorial กับรายการ tag ต่างๆ เต็มไปหมด - ลองหาเว็บไหนที่หน้าตาถูกใจคุณ แล้วใช้ฟังก์ชั่น "View Page Source" ในเบราว์เซอร์ส่องโค้ด HTML ของเขาเป็นตัวอย่างก็ได้ จากนั้น Copy-paste มาลองปรับนู่นแต่งนี่ดูซิว่าจะออกมาเป็นยังไง
153 - หาบทความอื่นๆ มาอ่านเพิ่มเติมด้วย เช่น การสร้างตาราง HTML การใช้ meta tag ให้เว็บคุณโผล่ มาต้นๆ ใน search engine หรือการใช้ div กับ span ช่วยแต่ง css 3. ได้เวลาเปิดตัวเว็บของคุณ. พอหาบริการ web hosting ได้แล้ว คราวนี้จะอัพโหลดหน้าเว็บ HTML สักกี่ หน้าลงใน web domain ของคุณเองก็ไม่มีใครว่า แต่ก่อนจะทำแบบนั้นได้คุณต้องมีโปรแกรมอัพโหลด FTP ซะก่อน ปกติก็มากับบริการของ web host นั่นแหละ - เวลาลิงค์ไปที่หน้ากับรูปต่างๆ ในเว็บของคุณ ไม่ต้องใช้ address เต็มๆ ก็ได้ เช่น ถ้า domain name ของคุณคือ www.superskilledhtmlcoder.com <a href="/journal/monday.html">ข้อความใน tag นี้</a> ก็จะลิงค์ไปยัง address "www.superskilledhtmlcoder.com/journal/monday.html" เอง
154 4. เพิ่มลูกเล่นด้วย CSS. ถ้าหน้าเว็บ HTML ของคุณดูโล้นเลี่ยนไปหน่อย ให้ไปศึกษา CSS พื้นฐานดู จะได้หัด ใส่สี เปลี่ยนฟอนต์ ใช้งานส่วนประกอบต่างๆ ได้ดีกว่าเดิม การลิงค์ "stylesheet" ของ CSS ไปยังหน้าเว็บ HTML ให้คุณยกเครื่องส่วนต่างๆ อย่างรวดเร็ว ทันใจ เปลี่ยนรูปแบบข้อความอัตโนมัติโดยใช้ tag ต่างๆ ให้ ลองปรับ stylesheet ดูเอง หรือจะศึกษาจาก tutorial ละเอียดๆ อย่าง คู่มือ CSS ของ HTML Dog ดูก็ได้ 5. ใช้ JavaScript ในหน้าเว็บของคุณ. JavaScript เป็นภาษาสำหรับเขียนโปรแกรมที่ใช้ในการเพิ่มเติม ฟังก์ชั่นให้หน้าเว็บ HTML ของคุณ คุณต้องใส่คำสั่ง JavaScript ไว้ระหว่าง start กับ end tag <script> </script> โดยใช้ได้ทั้งการเพิ่มปุ่มแบบ interactive การคำนวณโจทย์เลข และอื่นๆ อีกมากมาย อยากรู้ไปดูที่ ตัวอย่างของ w3c ได้เลย
155 2. กำหนดคุณสมบัติด้วย CSS การกำหนดคุณสมบัติพื้นฐานของเว็บเพจ ในการสร้างเว็บเพจแต่ละหน้าขึ้นมา ควรมีการกำหนดคุณสมบัติพื้นฐานให้กับเว็บเพจนั้นๆ ด้วย เพื่อ จะใช้เป็นการตั้งค่าเริ่มต้นสำหรับการตกแต่งหน้าเว็บเพจซึ่งจะมีการแบ่งกลุ่มของคุณสมบัติออกเป็น 6 กลุ่ม ดังนี้ - Appearance(CSS) - Appearance(HTML) - Links(CSS) - Headings(CSS) - Title/Encoding - Tracing Image ในการเริ่มต้นกำหนดคุณสมบัติพื้นฐานของเว็บเพจนั้น ทำได้โดยไปคลิกเลือกที่เมนู Modify >> Page Properties... จะปรากฏหน้าต่าง Page Properties ดังรูป โดยเริ่มจากกลุ่มต่อไปนี้ 1. Appearance (CSS) เป็นการกำหนด คุณสมบัติทั่วๆ ไปของการแสดงผลของเว็บ เพจซึ่งจะเป็นค่าเริ่มต้นตามรูปแบบตามที่ กำหนดดังนี้ - Page font เป็นการกำหนดแบบ อักษรที่ต้องการโดยจะใช้กับเว็บเพจทั้งหน้า - Size เป็นการกำหนดขนาดของ ตัวอักษรและต้องระบุหน่วยของขนาดด้วย - Text color เป็นการกำหนดสีของ ข้อความ - Background color เป็นการกำหนดสีของพื้นหลัง - Repeat เป็นการกำหนดวิธีเรียงรูปภาพพื้นหลัง - Left magin / Ringht margin เป็นการกำหนดระยะห่างด้านซ้ายและขวาของ ขอบเว็บเพจกับของวินโดว์ - Top margin /Botton margin เป็นการกำหนดระยะห่างด้านบนและล่างของ ขอบเว็บเพจกับของวินโดว์
156 2. Appearance (HTML) เป็นการกำหนด คุณสมบัติแสดงผลทั่วไปของหน้าเว็บเพจซึ่ง จะเหมือนกับรูปแบบของ Appearance (CSS) โดยคำสั่งใด ที่เหมือนกันก็จะใช้แบบ CSS เป็นหลัก มีกำหนดดังนี้ - Background image เป็นการกำหนด ภาพพื้นหลังของเว็บเพจ - Background เป็นการกำหนดสีพื้น หลังของเว็บเพจ - Text เป็นการกำหนดสีของข้อความทั่วไป - Links เป็นการกำหนดสีของสีลิงค์ในสภาวะปกติ - Visited Links เป็นการกำหนดสีของลิงค์เมื่อคลิกแล้ว - Active Links เป็นการกำหนดสีของลิงค์ขณะกำลังคลิก - Left margin กำหนดระยะของเว็บเพจด้านซ้ายห่างจากขอบวินโดว์ - Top margin กำหนดระยะของเว็บเพจด้านบนห่างจากขอบวินโดว์ - Margin width กำหนดความกว้างของขอบเว็บเพจด้านซ้ายห่างจากขอบของวินโดว์ - Margin height กำหนดความสูงของขอบเว็บเพจด้านบนห่างจากขอบของวินโดว์ 3. Link (CSS) เป็นการกำหนดคุณสมบัติ ของไฮเปอร์ลิงค์ในเว็บเพจที่บันทึกใน รูปแบบ CSS Style ไว้ มีการกำหนดดังนี้ - Link font เป็นการกำหนดแบบ อักษรที่จะใช้กับข้อความที่จะทำเป็นจุด ลิงค์ - Size กำหนดขนาดของตัวอักษร - Link color กำหนดสีของจุดลิงค์ ในสภาวะปกติ - Rollover Links กำหนดสีของจุดลิงค์ในขณะที่ผู้ชมนั้นเลื่อนเม้าส์มาชี้ - Visited Links กำหนดสีจองจุดลิงคฺเมื่อมีการคลิกเลือกไปแล้ว - Active Links กำหนดสีของจุดลิงค์ที่กำลังคลิกใช้งานอยู่ - Underline style เป็นกำหนดลักษณะของการแสดงเส้นใต้ที่เป็นจุดลิงค์
157 4. Headings (CSS) เป็นการกำหนดคุณสมบัติของข้อความของหัวเรื่องในเว็บเพจ ดังนี้ - Heading font กำหนดรูปแบบอักษรของหัวเรื่อง โดยจะมีขนาด H1 -H6 - Heading เป็นการสีของข้อความหัวเรื่อง โดยทีขนาด H1- H6 เช่นกัน 5. Title/Encoding มีการกำหนดแต่ละส่วนดังนี้ - Title เป็นการกำหนดชื่อหรือคำอธิบายของเว็บเพจนั้นๆ โดยข้อความนั้น จะไปปรากฏอยู่บนไตเติ้ลบาร์ของเว็บบราวเซอร์ - Document Type (DTD) เป็นการกำหนดว่าจะใช้รหัสคำสั่งใดใน เว็บเพจ ให้เป็นไปตามมาตรฐานของภาษาอะไร - Encoding เป็นการกำหนดการเข้ารหัสภาษาของเว็บเพจ
158 6. Tracing Image เป็นการกำหนดเมื่อต้องการนำภาพตัวอย่างมาวางเพื่อช่วยในการออกแบบเว็บเพจ คุณสมบัติ CSS ที่ใช้กันบ่อยๆ หลายๆ คนที่เพิ่งเรียน CSS ไปกับ MeCode ก็คงจะสงสัยว่ามี CSS properties(คุณสมบัติ) อะไรบ้าง ล่ะ ที่เราใช้กันบ่อยๆ และจำเป็นต้องรู้ ในหน่วยนี้เราจะมาเรียนรู้ 8 คุณสมบัติ CSS ที่จำเป็นต้องรู้และได้ใช้บ่อยๆ กัน~ 1. Color (สี) คุณสมบัติแรกที่ใช้บ่อยมากๆ ก็คือสี ไม่ว่าจะตกแต่งอะไรการใช้สีเป็นสิ่งสำคัญมากจริงๆ จากที่เราเคย เรียนกันไปแล้วว่าการเปลี่ยนสีตัวอักษรทำได้ตามโค้ดข้างล่างนี้ อันนี้คือการเปลี่ยนสีตัวอักษรในย่อหน้าเป็นสีแดงทั้งหมด เราจะเห็นได้ว่าค่าของสีในที่นี้ใช้เป็นชื่อสี เลย แต่จริงๆ แล้วค่าของสีสามารถใช้ ค่า RGB(Red Green Blue) หรือ ค่า HEX(Hexadecimal) หรือ ค่า HSL(Hue Saturation Lightness) ถ้าเป็นคนที่พอได้แตะงานดีไซน์บ้างก็คงคุ้นเคยกับค่าพวกนี้อยู่แล้ว แต่ สำหรับคนที่ยังไม่รู้ ทั้งสามค่านี้เป็นโค้ดตัวเลขที่แทนค่าของสี จากตัวอย่างข้างบน เราจะเห็นได้ว่าทั้งสามสีคือสีแดงเหมือนกัน แต่โค้ดตัวเลขแตกต่างกันเพราะว่าใช้ โค้ดคนละแบบ
159 ค่าแบบที่หนึ่งคือ RGB ซึ่งสังเกตได้ว่าค่าตำแหน่งแรกจะมีค่าที่ 255 ซึ่งแปลว่า R หรือ Red มีค่า 255 ซึ่งเป็นค่าสูงสุดของค่า RGB และอีกสองตำแหน่งมีค่าเป็น 0 หมายความว่าสีนี้เป็นสีแดงสดที่มีสีแดงเต็มๆ แบบ ไม่มีสีอื่นเจือปน ค่าแบบที่สองคือ HEX หรือเลขฐานสิบหก ถ้าใครเก่งเลขหรือเคยเรียนโค้ดมาแล้ว จะเข้าใจว่า เลขฐานสิบหกคือตำแหน่ง นึงจะมีได้ถึง 16 ค่า (0 1 2 3 4 5 6 7 8 9 a b c d e f) สังเกตว่าสองตำแหน่งแรก มีค่าเป็น f ซึ่งก็คือค่าสูงสุดของค่า HEX หลักการทำงานของโค้ดนี้ก็เหมือน RGB ตรงที่ว่าสองตำแหน่งแรกเป็น สีแดง ตำแหน่งที่สามและสี่เป็นสีเขียว และตำแหน่งที่ห้าถึงหกเป็นสีน้ำเงิน สีแดงสดเลยมีโค้ดเป็น #ff0000 ก็ คือสีแดงมีค่าสูงสุดและสีอื่นเป็น 0 ค่าแบบที่สาม ผู้เขียนไม่เคยใช้ 555+ เลยอธิบายหลักการทำงานของมันลำบากครับ ข้ามไปละกัน เอาเป็นว่าค่าของสี สามารถรับได้สามแบบ เพราะจะใช้ชื่อสีอย่างเดียวก็คงไม่พอสำหรับการตกแต่ง เพราะสีมันมีหลายสีมาก และหลายๆ สีก็ไม่มีชื่อเรียกที่แน่นอนด้วย เลยจำเป็นต้องใช้โค้ดสีเป็นตัวแทนค่าของ สีแทน ตัวอย่างการใช้คุณสมบัติสี เปลี่ยนสีกรอบของย่อหน้า เปลี่ยนสีทุกตัวอักษรในย่อหน้า เปลี่ยนสีพื้นหลังของย่อหน้า
160 2. Background (พื้นหลัง) คุณสมบติที่สองคือการเปลี่ยนพื้นหลัง นอกจากจะเปลี่ยนสีพื้นหลังได้ตามที่เราเคยเรียนกันมาแล้ว เรา ยังสามารถใส่รูปภาพเป็นพื้นหลังได้อีกด้วย หลายๆ คนน่าจะเคยเห็นเว็บที่ใช้ภาพเป็นพื้นหลังมาบ้าง โค้ดด้านบนเป็นการตั้งรูปภาพพื้นหลังให้กับ body ของเว็บ โดยค่าคือ url("background.jpg") url("...") จะเป็นตัวบอกว่ารูปภาพรูปนี้อยู่ตรงไหน และชื่ออะไร ในกรณีข้างบนไฟล์รูป ชื่อ background.jpg (ต้องมีนามสกุลไฟล์ด้วย) และอยู่ที่เดียวกับไฟล์ที่เรียกใช้รูปนี้จึงไม่จำเป็นต้องมีอะไรอยู่ ข้างหน้าชื่อไฟล์ ถ้าไว้ในโฟลเดอร์ชื่อ images หน้าตาโค้ดก็จะเป็นประมาณนี้url("images/background.jpg") มีอีกสองคุณสมบัติที่ช่วยเรื่องรูปภาพพื้นหลังซึ่งก็คือ background-repeat และ backgroundposition background-repeat ใช้เมื่อเวลาขนาดหน้าจอผู้ใช้มีขนาดที่ใหญ่กว่ารูปภาพพื้นหลังเรา จะให้ รูปภาพเราแยกร่างเพื่อให้รูปภาพเต็มพื้นหลังหน้าจอ ถ้าเราไม่กำหนด background-repeat คอมก็จะให้รูปภาพพื้นหลังเราแยกร่างทั้งแนวนอนและแนวตั้ง เพื่อให้เต็มพื้นที่ตามรูปข้างล่างนี้ จะเห็นได้ว่ารูปภาพพื้นหลังเราได้ถูกแยกร่างออกมาเพื่อเติมเต็มพื้นหลัง แต่ถ้าเรากำหนด background-repeat ให้แยกร่างแค่แนวนอนตามโค้ดนี้ ซึ่ง repeat-x คือค่าที่ไว้ให้แยกร่างตามแนวนอน (ถ้าเราอยากได้แนวตั้งอย่างเดียวก็ใช้repeat-y)
161 แล้วถ้าเราไม่อยากให้มันแยกร่างเลยหล่ะ เราก็สามารถใช้ค่า no-repeat ได้ อีกคุณสมบัตินึงที่ช่วยในเรื่องรูปภาพพื้นหลังก็คือ background-position หรือก็คือจุดที่รูปภาพพื้นหลังเรา จะเริ่ม ซึ่งโดยส่วนตัวการที่เราใช้รูปภาพเป็นพื้นหลังเราอยากจะให้จุดโฟกัสภาพอยู่ตรงกลาง เราก็เลยควรตั้ง ค่านี้เป็นตรงกลางเพื่อให้รูปภาพพื้นหลังสวยงามที่สุด เพราะส่วนใหญ่ภาพถ่ายหลายๆ อันจะมีจุดโฟกัสตรง กลางอยู่แล้ว โค้ดข้างบนก็คือการตั้งรูปภาพเป็นพื้นหลังแบบ ไม่แยกร่าง และเริ่มจากตรงกลางของหน้า แทบจะทุก ครั้ง ที่เราใช้รูปถ่ายเป็นรูปพื้นหลัง ก็จะมีโค้ดหน้าตาประมาณนี้ เพราะคงไม่อยากให้รูปถ่ายแยกร่าง และเรา ควรจะหารูปถ่ายที่ขนาดความกว้างและความสูงมากๆ เพื่อที่จะให้รูปถ่ายของเรากินพื้นที่ข้างหลังทั้งหมดเพื่อ ความสวยงาม แล้วถ้าเราหารูปถ่ายที่ขนาดความชัดๆ มากๆ ไม่ได้จริงๆ ล่ะ เราก็สามารถใช้ คุณสมบัติbackground-size ช่วยได้โดยการใช้ค่า cover เป็นการบอกให้คอมขยายภาพเราโดยที่ยังคงสัดส่วนที่ ถูกต้องไว้ แต่ขอบๆ ของภาพอาจโดนตัดไปบ้างขึ้นอยู่กับขนาดหน้าจอของผู้ใช้
162 ทีนี้เราก็จะได้รูปภาพพื้นหลังที่สวยงามสำหรับเว็บเราแล้ว 3. Width/Height (ความกว้าง/ความสูง) คุณสมบัติที่สามก็คือการกำหนดความกว้างและความสูงของ element ต้องขอเตือนไว้ก่อนว่าใช้ได้ เฉพาะกับ element ที่มีการแสดงเป็น block หรือ inline-block เท่านั้น ซึ่งเดี๋ยวเราจะมาพูดถึงสองตัวนี้วัน หลังนะครับ การกำหนดความกว้างและความสูงจะมีหน่วยที่ใช้บ่อยตามนี้ • px - หน่วยเป็น pixels • em - หน่วยๆ นึงซึ่ง 1 em = ขนาดของฟอนต์ปัจจุบัน • rem - มีขนาดเท่ากับ em แต่ไม่ปวดหัวกับเรื่อง inheritance • % - เป็นเปอร์เซ็นต์เทียบกับพื้นที่ๆ พ่อแม่ใช้ • auto - อัตโนมัติ จากหน่วยทั้งหลายข้างบนอาจจะทำให้หลายๆ คนงงกันเลยทีเดียว แต่เรามาลองดูตัวอย่างเพื่อให้ เข้าใจกันง่ายขึ้นดีกว่า จากโค้ดข้างบนเราจะเห็นได้ว่าเรามี element div (ย่อมาจาก division ซึ่งใช้เป็นภาชนะให้ elements อื่นซะส่วนใหญ่) และเป็นลูกของ body และกำหนดคุณสมบัติความสูงเป็น 300px และความกว้าง เป็น 50% โดยค่าเริ่มต้นของ body จะกินพื้นที่แนวนอนทั้งหน้าจออยู่แล้ว เพราะฉะนั้นตัว div จะมีความสูง 300 พิกเซลและความกว้างที่ 50% ของหน้าจอผู้ใช้
163 เราจะเห็นได้ว่าความกว้างของ div คือ 50% ของหน้าจอจริงๆ และความสูงก็ 300 พิกเซล แต่ละ หน้าจออาจจะเห็นไม่เหมือนกันขึ้นอยู่กับความคมชัดของหน้าจอผู้อ่าน ถ้าเข้าใจเรื่องพิกเซลก็จะเข้าใจเองว่า ทำไมถึงอาจไม่เหมือนกันเมื่อมองด้วยตาเปล่า ในหน่วยของ em และ rem จะมาเจาะลึกให้ในบทความ หลังจากนี้นะครับ เพราะค่อนข้างละเอียดพอตัว เริ่มต้นยังไม่จำเป็นต้องใช้ก็ได้เน้อ มาถึงหน่วยสุดท้ายที่เรายังไม่ได้พูดถึงก็คือหน่วย auto ซึ่งก็คือจะให้คอมตั้งค่าโดยอัตโนมัติ จะมี ประโยชน์มากเมื่อเราไม่รู้ค่าของมันจริงๆ เช่นเราอยากให้รูปภาพเราขยายเต็มหน้าจอแนวกว้างแต่เราไม่รู้ว่า ความสูงจะเท่าไหร่ขึ้นอยู่กับแต่ละรูปภาพ เราก็สามารถใช้auto อย่างโค้ดด้านล่างนี้ได้เพื่อให้ได้ผลลัพธ์ตามที่ กล่าว 4. Font (ฟอนต์) คุณสมบัติที่สี่ก็คือการเปลี่ยนฟอนต์นั้นเอง ถ้าทุกเว็บใช้ฟอนต์เหมือนๆ กันมันก็คงจะน่าเบื่อน่าดู เพราะฉะนั้นเว็บของเราก็ไม่ควรใช้ฟอนต์เริ่มต้นที่คอมให้มาตั้งแต่แรกนะฮะ แหะๆ การเปลี่ยน font-family หรือก็คือการเปลี่ยนฟอนต์ใน Microsoft Word เปรียบได้กับการเปลี่ยน ลายมือนั้นเอง เช่นเปลี่ยนไปใช้Times New Roman หรือ Angsana New ที่หลายๆ คนคงคุ้นเคยกัน ใน ที่นี้จะพูดถึงการเปลี่ยนฟอนต์ที่มากับในเครื่องอย่างเดียว ถ้าฟอนต์ที่ผู้อ่านโหลดมาเองจะพูดในบทความหลัง นะครับ เพราะมันซับซ้อนกว่านี้หน่อย
164 เวลาตั้ง font-family ควรที่จะใส่มากกว่าหนึ่งฟอนต์เพื่อให้เวลาโหลดฟอนต์ที่เราต้องการอันแรกไม่ สำเร็จ ให้ใช้ฟอนต์ที่เป็นฟอนต์ทั่วไปที่ใกล้เคียงกับฟอนต์ที่เราต้องการ จากตัวอย่างโค้ดข้างบนเราจะเห็นได้ว่า เราเลือกที่จะใช้ฟอนต์ Angsana New และถ้าโหลดฟอนต์ไม่สำเร็จให้ใช้serif แทนซึ่งเป็นหนึ่งในฟอนต์ ทั่วไป สามารถดูฟอนต์ทั่วไปที่ทุกเครื่องรองรับได้ที่นี้ นอกจาก font-family ยังมีfont-style font-weight และ font-size ที่ใช้กันบ่อยๆ ซึ่งเกี่ยวข้องกับ คุณสมบัติ font font-style จากที่เคยเห็นในวีดีโอ CSS จะเป็นการทำให้ตัวอักษรปกติหรือเอียง (italic) ก็ได้ตาม ตัวอย่างโค้ดด้านล่าง font-weight คือการปรับความหนาของตัวอักษร สามารใส่ค่าเป็นคำเช่น normal (ปกติ)หรือ bold (หนา) หรือจะใส่เป็นตัวเลขความหน้าของแต่ละฟอนต์ที่เราใช้ก็ได้เช่น 100 200 300 400 500 600 700 800 900 ยิ่งตัวเลขมีค่าสูงความหนาก็จะยิ่งมีมากขึ้น แต่ก็ต้องดูด้วยว่าฟอนต์ที่เราใช้นั้นสนับสนุนความหนา ถึงตัวเลขที่เท่าไหร่ font-size คือการปรับขนาดฟอนต์ โดยใช้หน่วยเดียวกับพวกความกว้างความสูง จะใช้เป็น px หรือ em หรือ rem หรือ % ก็ได้ 5. Border (กรอบรอบๆ element) คุณสมบัติที่ห้าคือการใส่กรอบให้ element ไม่ว่าจะใส่กรอบให้รูปภาพ ย่อหน้า หรือว่าหัวข้อเรื่อง ก็ สามารถตกแต่งให้โดดเด่นได้ โดยใช้กรอบ คุณสมบัติborder จะรับค่าอยู่สามค่าคือ ความหนาของเส้นกรอบ(รับเป็นหน่วยเดียวกับพวกความ กว้าง/สูง) สไตล์ของกรอบ และสีของกรอบ ซึ่งจะได้อะไรแบบข้างล่างขึ้นมา
165 นอกจากการปรับสไตล์ของกรอบแล้ว เรายังสามารถกำหนดความหนาแต่ละด้านของกรอบแบบไม่ เท่ากันได้อีกด้วย เช่นเราอยากให้ เส้นกรอบด้านข้างหนากว่าด้านบนและล่างก็สามารถโค้ดแบบนี้ได้ เราจะเห็นว่า border-width รับค่าสี่ค่าก็คือ 2px 8px 2px 8px สี่ค่านี้คือ บน ขวา ล่าง ซ้าย หรือการวน แบบตามเข็มนาฬิกานั้นเอง อยากให้จำอันนี้ไว้เลยครับ ว่าอะไรก็ตามที่เป็น CSS แล้วมีสี่ด้าน เราสามารถใช้ หลักการวนแบบตามเข็มนาฬิกาได้หมด ก็คือ ค่าที่หนึ่งจะเป็นสำหรับด้านบน ค่าที่สองจะเป็นสำหรับด้านขวา ค่าที่สามจะเป็นสำหรับด้านล่าง และค่าที่สี่จะเป็นสำหรับด้านซ้าย ได้ใช้เยอะแน่นอนครับอันนี้ เช่นถ้าเราอยาก ทำให้กรอบแต่ละด้านคนละสี ก็ทำได้ครับใช้หลักการเดียวกัน หรือถ้าเราอยากได้กรอบแค่ด้านใดด้านนึง ไม่ต้องการทุกด้านก็สามารถทำได้ด้วยการ ใช้คุณสมบัติborder-ด้าน ที่ต้องการ เช่น border-top border-right border-bottom border-left สไตล์ของกรอบทั้งหมดจะมีตามข้างล่างนี้ สามารถเลือกที่จะใช้สไตล์ไหนก็ได้ตามที่ต้องการ
166 6. Margin (พื้นที่ว่างรอบๆ element) ในการตกแต่ง มีหลายๆ ทีที่เราอยากให้มีช่องว่าง เช่นที่เว้นว่างระหว่างหัวข้อเรื่องและย่อหน้าอะไรงี้ เราสามารถใช้คุณสมบัติ margin ในการทำสิ่งๆ นี้ได้ โค้ดด้านบนมีค่าเท่ากันทั้งสองโค้ด เราน่าจะคุ้นๆ กันอยู่แล้ว ว่ามันเหมือนคุณสมบัติborder-width และ border-color เลยที่เราสามารถใส่ค่าไปค่าเดียวเพื่อเป็นค่าของทุกด้าน หรือใส่แยกทีละด้านก็ได้หากต้องการให้ แต่ละด้านมีค่าไม่เท่ากัน (ซึ่งก็คือการวนตามเข็มนาฬิกาเหมือนกัน) หรือถ้าเราต้องการจะมีพื้นที่ว่างแค่ด้านใด ด้านนึง ก็ทำได้เช่นกัน โดยใช้คุณสมบัติmargin-ด้านที่ต้องการ เช่น margin-top margin-right margin-bottom marginleft จากโค้ดด้านบนเราจะได้ผลลัพธ์ตามข้างล่างนี้ครับ CSS เจ๋งยังไง ตกแต่งได้แบบไร้ขีดจำกัด
167 7. Padding (พื้นที่ว่างรอบๆ เนื้อหาของ element) หลายๆ คนเห็นแล้วคงจะงงกับคำอธิบายในวงเล็บว่า มันดูคล้ายๆ คุณสมบัติmargin ข้างบนจัง จริงๆ มันก็คล้ายแหละครับ ก็เป็นการสร้างพื้นที่ว่างเหมือนกัน แต่แตกต่างตรงที่ padding เป็นพื้นที่ว่างรอบๆ เนื้อหา ไม่ใช่ element ซึ่งหมายความว่าการใส่ padding จะมีผลกระทบแค่ในกรอบของ element เท่านั้น แต่ margin จะมีผลกระทบนอกกรอบของ element ตามภาพอธิบายด้านล่าง จากรูปภาพข้างบนน่าจะทำให้หลายๆ คนเข้าใจได้ว่า margin กับ padding ต่างกันยังไงนะครับ วิธีใช้ก็ เหมือน margin เลย ถึงทั้งสองคุณสมบัตินี้จะคล้ายๆ กัน แต่พอใช้ไปเรื่อยๆ แล้ว จะเข้าใจได้เองว่า ตอนนี้ควรใช้อันไหน เพื่อให้ได้ดีไซน์แบบที่เราต้องการนะครับ เพราะฉะนั้นอย่าเครียดถ้าตอนนี้ยังงงๆ ว่าใช้อันไหนดี หรือต้องการแค่ด้านใดด้านนึง ก็สามารถทำได้เช่นกัน
168 8. Float (ลอย) มาถึงคุณสมบัติสุดท้ายของบทความนี้กันสักทีนะครับ ยาวเหลือเกินฮะบทความนี้ คุณสมบัติfloat คือ มีไว้ในการให้element ลอยไปด้านซ้าย หรือด้านขวาของหน้า
169 3. ตกแต่งหน้าเว็บเพจด้วยรูปภาพ การเตรียมรูปภาพสหรับใช้ในเว็บเพจ รูปภาพนับว่าเป็นสิ่งสำคัญอย่างมากในการสร้างเว็บเพจ ทให้ผู้อ่านเข้าใจเรื่องราวที่นเสนอมากยิ่งขึ้น และช่วยให้เว็บเพจมีสีสันสวยงาม สิ่งที่จะต้องคนึงถึง คือ ภาพควรจะต้องมีขนาดเล็ก เพื่อนไปเรียกใช้บนเว็บ เพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG เพราะแต่ละแบบมีลักษณะการบีบอัดข้อมูลและสามารถ เลือกใช้ตามความเหมาะสม การนำภาพกราฟิกมาใช้ในเว็บเพจนิยมใช้ภาพ 3 ฟอร์แมต (นามสกุล) คือ .gif , .jpg และ .png ซึ่งมี รายละเอียดของภาพแต่ละชนิด ดังนี้ 1. ภาพ GIF (Graphic Interchange Format) เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นโดยCompuSever สหรับบีบอัดข้อมูลภาพลายเส้น กหนดสีได้สูงสุด 256 สี มีคุณลักษณะโปร่งแสง และสร้างภาพเคลื่อนไหวได้ สามารถแสดงผลบนบราวเซอร์ได้ทุกชนิด มักเป็นรูปที่มีสีพื้นเป็นส่วนใหญ่ ไม่ค่อยมีการไล่สี แต่ถ้ามีการขยาย ภาพทาให้ภาพแตกได้ เช่น โลโก้ รูปการ์ตูนต่าง ๆ 2. ภาพ JPEG (Joint Photographic Experts Group) เป็นรูปแบบไฟล์ที่บีบอัดข้อมูลให้เล็กลง หลังการบีบอัดยังคงแสดงสีได้สูงถึง 16.7 ล้านสี แต่ถ้าบีบอัดมาก ๆ คุณภาพจะเสียไปไฟล์ที่บีบอัดทให้ขนาด เล็กกว่าภาพ .gif ก็ได้ สามารถดาวน์โหลดได้เร็วแต่เมื่อนมาแสดงผลก็อาจจะช้าบ้าง เพราะต้องขยายไฟล์ขณะ แสดงผลสามารถแสดงผลบนบราวเซอร์ได้ทุกชนิดเช่นกัน ส่วนใหญ่มักจะเป็นภาพถ่าย หรือภาพที่มี รายละเอียดสีมาก ๆ 3. ภาพ PNG (Portable Network Graphic) พัฒนาขึ้นมาใช้งานบนบราวเซอร์ แต่ขณะนี้ยังไม่ได้ ความนิยมมากนักเมื่อเทียบกับไฟล์ .gif และ .jpg ขยายได้โดยภาพไม่แตก ใช้สาหรับภาพที่ต้องการให้มี ลักษณะโปร่งใส แต่ไฟล์ที่ได้หลังการบีบอัด จะมีขนาดใหญ่กว่าไฟล์ JPEG และมีคุณภาพมากกว่าไฟล์ JPEG การใส่รูปภาพลงเว็บเพจ 1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางรูปภาพ 2. คลิกที่เมนู Insert แล้วเลือก Image 3. หรือ คลิกที่แถบ Insert ให้เลือก Common 4. คลิกแล้วเลือก Image
170 5. เลือกโฟลเดอร์ที่เก็บรูปภาพ 6. เลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ 7. คลิกปุ่ม OK 8. ใส่คำอธิบายรูปภาพ (ไม่ใส่ก็ได้) 9. คลิกปุ่ม OK 10. รูปภาพที่เลือกจะถูกนำมาแสดงในเว็บเพจ และจัดเก็บไฟล์รูปภาพในโฟลเดอร์ที่ใช้ในเว็บไซต์ ดังรูป
171 การจัดเรียงรูปภาพให้เข้ากับข้อความ เมื่อเราต้องการใส่ข้อความเพิ่มเติมควบคู่กับการวางภาพ เราสามารถจัดตำแหน่งระหว่างข้อความและ ภาพได้ โดยใช้ Align 1. คลิกเลือกภาพที่ต้องการจะจัดตำแหน่ง 2. เลือกคำสั่ง Modify-->Edit Tag
172 3.คลิกที่คสั่ง Align และเลือกการจัดตแหน่งของภาพ รูปแบบการวางตำแหน่ง คำอธิบาย Default จัดเรียงภาพและข้อความตามบราวเซอร์ที่ใช้ (ปกติจะเป็นแบบ Baseline) Baseline ขอบล่างของภาพตรงกับแนว Baseline ของข้อความ Top ขอบบนของภาพตรงกับแนวบนสุดของข้อความ Middle กึ่งกลางของภาพตรงกับแนว Baseline ของข้อความ Bottom ขอบล่างของภาพตรงกับแนวล่างสุดของข้อความ Text Top ขอบบนของภาพตรงกับแนวบนสุดของข้อความ Absolute Middle กึ่งกลางของภาพตรงกับกึ่งกลางของข้อความ Absolute Bottom ขอบล่างของภาพตรงกับแนวล่างสุดของข้อความ Left ภาพแสดงทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา Right ภาพแสดงทางขวาโดยมีข้อความล้อมอยู่ทางซ้ายมื
173 การกำหนดคุณสมบัติของรูปภาพ การปรับแต่งคุณสมบัติของรูปภาพ เมื่อได้แทรกรูปภาพลงในเว็บเพจเรียบร้อยแล้ว สามารถปรับแต่งคุณสมบัติต่าง ๆ ของรูปภาพได้ โดย วิธีการคลิกที่รูปภาพนั้นๆ แล้วสามารถกำหนดค่าต่าง ๆ ได้ที่พาเนล Properties ของรูปภาพดังต่อไปนี้ 1. คลิกเลือกรูปภาพที่ต้องการ 2. ใส่ชื่อของรูปภาพ 3. แหล่งที่เก็บรูปภาพ 4. คำอธิบายรูปภาพ 5. ความกว้าง (W) ของรูปภาพ 6. ความสูง (H) ของรูปภาพ 7. ไฮเปอร์ลิงค์ของรูปภาพ 8. เปิด/แก้ไขรูปภาพด้วยโปรแกรมอื่น 9. ปรับลดความละเอียดของรูปภาพ 10. อัพเดตรูปภาพ (กรณีไม่แสดงภาพตามต้นฉบับ เฉพาะไฟล์ .PSD) 11. ตัดรูปภาพ 12. ปรับขนาดของรูปภาพ 13. ปรับค่าสี/แสงของรูปภาพ 14. ปรับความคมชัดของรูปภาพ
174 การใส่ภาพพื้นหลังลงเว็บเพจ ถ้าต้องการให้หน้าเว็บเพจมีความสวยงามมากยิ่งขึ้น โดยเมื่อแสดงผลแล้วไม่ดูเหมือนหน้าว่างเปล่ามี แค่รูปหรือตัวหนังสือเท่านั้น มีวิธีการทำคือใส่รูปพื้นหลังให้กับหน้าเว็บเพจ โดยมีวิธีการ ดังนี้ 1. คลิกเลือกปุ่ม Page Properties.. บนพาเนล Properties จะปรากฏหน้าต่าง Page Properties แสดงขึ้นมา 2. คลิกเลือกในช่อง Category เป็น Appearance (CSS) 3. คลิกปุ่ม Browse..ในช่องของ Background image จะปรากฏหน้าต่าง Select Image Source 4. คลิกเลือกตำแหน่งที่เก็บรูปภาพ 5. เลือกรูปภาพที่ได้เก็บไว้ทำภาพพื้นหลัง 6. คลิกปุ่ม OK 7. คลิกเลือกในช่อง Repeat เพื่อเลือกวิธีการจัดเรียงรูปภาพ - no repeat จะแสดงเพียงภาพเดียวที่มุซ้ายด้านบนของเว็บเพจ - repeat จะเรียงภาพแบบซ้า ๆ ทั้งแนวตั้งและแนวนอน - repeat-x จะเรียงภาพแบบซ้า ๆ ในแนวนอน - repeat-y จะเรียงภาพแบบซ้า ๆ ในแนวตั้ง 8. เมื่อกำหนดค่าเรียบร้อยแล้วคลิกปุ่ม OK จะได้ผลลัพธ์ดังรูป
175 ผลลัพธ์ที่ได้จากการใส่รูปภาพเป็นพื้นหลัง ขอบคุณเนื้อหา เล่มที่ 4 การตกแต่งเว็บเพจด้วยรูปภาพ คุณครูภานุพงษ์ สงแซม โรงเรียนบ้านลานวิทยาคม สำนักงานเขตพื้นที่การศึกษามัธยมศึกษา เขต 25