ทันทีที่คุณเริ่มต้นสร้างหน้าเว็บด้วย HTML คุณจะเริ่มต้นการทำงานกับขนาด เพื่อให้ไซต์ของคุณดูตามที่คุณต้องการดูน่าจะเหมาะกับการออกแบบที่คุณหรือนักออกแบบรายอื่นสร้างขึ้นคุณจะต้องเปลี่ยนขนาดของข้อความในไซต์นั้นรวมทั้งองค์ประกอบอื่น ๆ บนหน้าเว็บ ในการดำเนินการนี้คุณอาจเริ่มมองหาแท็ก "size" HTML แต่คุณจะพบว่าแท็บเล็ตนั้นหายไปได้อย่างรวดเร็ว
แท็กขนาด HTML ไม่มีใน HTML แต่เพื่อกำหนดขนาดแบบอักษรภาพหรือเลย์เอาต์ที่คุณควรใช้ Cascading Style Sheets ในความเป็นจริงการเปลี่ยนแปลงภาพที่คุณต้องทำกับข้อความของไซต์หรือองค์ประกอบอื่นควรได้รับการจัดการโดย CSS! HTML ใช้สำหรับโครงสร้างเท่านั้น
แท็กที่ใกล้เคียงที่สุดกับแท็ก HTML คือแท็กแบบอักษรเก่าซึ่งมีแอตทริบิวต์ size อยู่แล้ว โปรดทราบว่าแท็กนี้ได้รับการคัดค้านในเวอร์ชันปัจจุบันของ HTML และอาจไม่ได้รับการสนับสนุนจากเบราว์เซอร์ในอนาคต! คุณไม่ต้องการใช้แท็กแบบอักษรใน HTML ของคุณ! แต่คุณควรเรียนรู้ CSS เพื่อปรับขนาดองค์ประกอบ HTML ของคุณและจัดรูปแบบหน้าเว็บให้เหมาะสม
ขนาดแบบอักษร
แบบอักษรเป็นสิ่งที่ง่ายที่สุดในการกำหนดขนาดด้วย CSS Moreso กว่าเพียงการปรับขนาดข้อความนั้นด้วย CSS คุณสามารถเจาะจงเกี่ยวกับการ พิมพ์ตัวอักษร ของ เว็บไซต์ ได้มากขึ้น คุณสามารถกำหนดขนาดตัวอักษรสีปลอกน้ำหนักตัวนำทางและอื่น ๆ ได้ ด้วยแท็กแบบอักษรคุณสามารถกำหนดขนาดได้และเป็นตัวเลขที่สัมพันธ์กับขนาดตัวอักษรเริ่มต้นของเบราเซอร์เท่านั้นซึ่งแตกต่างกับลูกค้าทุกราย
หากต้องการตั้งค่าย่อหน้าให้มีขนาดตัวอักษร 12pt ให้ใช้คุณสมบัติแบบอักษรแบบอักษร:
h3 {font-size = 24px; }สไตล์นี้จะกำหนดขนาดตัวอักษรของ headiing3 องค์ประกอบ 24 พิกเซล คุณสามารถเพิ่มสไตล์นี้ลงในสไตล์ชีตภายนอกได้และ H3 ของไซต์ทั้งหมดจะใช้สไตล์นี้
ถ้าคุณต้องการเพิ่มรูปแบบการพิมพ์ให้กับข้อความของคุณคุณสามารถเพิ่มลงในกฎ CSS นี้ได้:
h3 {font-size: 24px; สี: # 000; font-weight: ปกติ; }นี้จะไม่เพียง แต่กำหนดขนาดตัวอักษรสำหรับ H3s ก็ยังจะกำหนดสีให้เป็นสีดำ (ซึ่งเป็นสิ่งที่รหัส hex ของ # 000 หมายถึง) และจะตั้งค่าน้ำหนักเป็น "ปกติ" เบราว์เซอร์กำหนดให้หัวเรื่อง 1-6 เป็นข้อความเป็นตัวหนาดังนั้นรูปแบบนี้จะแทนที่คำหลักนั้นและเป็นหลัก "ไม่เป็นตัวหนา"
ขนาดรูปภาพ
รูปภาพอาจยุ่งยากในการกำหนดขนาดเนื่องจากคุณสามารถใช้เบราว์เซอร์เพื่อปรับขนาดภาพ แน่นอนการปรับขนาดภาพด้วยเบราว์เซอร์เป็นความคิดที่ไม่ดีเนื่องจากทำให้หน้าเว็บโหลดช้าลงและเบราว์เซอร์มักจะปรับขนาดให้น่าสนใจทำให้ภาพดูไม่ดี แต่คุณควรใช้ ซอฟต์แวร์กราฟิกเพื่อปรับขนาดภาพ และเขียนขนาดจริงในเว็บเพจ HTML ของคุณ
ไม่เหมือนแบบอักษรภาพสามารถใช้ HTML หรือ CSS เพื่อกำหนดขนาดได้ คุณกำหนดความกว้างของภาพและความสูง เมื่อคุณใช้ HTML คุณสามารถกำหนดขนาดภาพเป็นพิกเซลเท่านั้น ถ้าคุณใช้ CSS คุณสามารถใช้การวัดอื่น ๆ เช่นนิ้วเซนติเมตรและเปอร์เซ็นต์ ค่าสุดท้ายเปอร์เซ็นต์นี้มีประโยชน์มากเมื่อภาพของคุณต้องเป็นของเหลวเช่นเดียวกับในเว็บไซต์ที่ตอบสนอง
ในการกำหนดขนาดภาพโดยใช้ HTML ให้ใช้แอตทริบิวต์ height และ width ของแท็ก img ตัวอย่างเช่นภาพนี้จะเป็นสี่เหลี่ยมจัตุรัส 400x400 พิกเซล:
height = "400" width = "400" alt = "image" />ในการกำหนดขนาดภาพโดยใช้ CSS ให้ใช้คุณสมบัติของความสูงและความกว้าง นี่คือภาพเดียวกันโดยใช้ CSS เพื่อกำหนดขนาด:
style = "height: 400px; width: 400px;" alt = "image" />ขนาดโครงร่าง
ขนาดที่พบมากที่สุดที่คุณกำหนดในโครงร่างคือความกว้างและสิ่งแรกที่คุณต้องตัดสินใจคือควรใช้ รูปแบบความกว้างคงที่ หรือเว็บไซต์ที่ตอบสนองต่อหรือไม่ กล่าวอีกนัยหนึ่งคุณจะกำหนดความกว้างเป็นจำนวนพิกเซลนิ้วหรือจุดที่แน่นอนหรือไม่? หรือคุณจะกำหนดความกว้างของรูปแบบให้ยืดหยุ่นโดยใช้ ems หรือเปอร์เซ็นต์? ในการกำหนดขนาดของเค้าโครงคุณใช้ความกว้างและความสูงของคุณสมบัติ CSS เช่นเดียวกับที่คุณทำในรูปภาพ
ความกว้างคงที่:
style = "width: 600px;">ความกว้างของของเหลว:
style = "width: 80%;">เมื่อคุณตัดสินใจเกี่ยวกับความกว้างสำหรับรูปแบบของคุณคุณควรคำนึงถึงความกว้างของเบราเซอร์ต่างๆที่ผู้อ่านของคุณอาจใช้และอุปกรณ์ต่างๆที่พวกเขาจะใช้ นี่คือเหตุผลที่ เว็บไซต์ ที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งสามารถเปลี่ยนเค้าโครงและการปรับขนาดตามอุปกรณ์และขนาดหน้าจอเป็นมาตรฐานการปฏิบัติที่ดีที่สุดในปัจจุบัน