วิธีจัดรูปแบบเว็บไซต์

เว็บไซต์ที่มีประสิทธิภาพจะต้องนำเสนอเนื้อหาให้กับผู้อ่านผ่านรูปแบบที่น่าสนใจ การจัดรูปแบบไม่ดีสามารถทำให้เว็บไซต์ไม่ดึงดูดหรือแม้แต่อ่านไม่ได้ ด้วย Hypertext Markup Language (HTML) คุณสามารถควบคุมการจัดรูปแบบของเว็บไซต์เพื่อให้ปรากฏตามที่คุณต้องการ นอกจากนี้ Cascading Style Sheets (CSS) ช่วยให้คุณสามารถจัดรูปแบบเว็บไซต์โดยใช้สไตล์ชีตภายนอก เทคนิคนี้มีประโยชน์หากคุณต้องการใช้สไตล์เดียวกันกับหลาย ๆ หน้าในเว็บไซต์ของคุณ

การจัดรูปแบบ HTML

1

สร้างตารางเพื่อจัดวางองค์ประกอบต่าง ๆ ของเว็บเพจของคุณ ใช้

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

2

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

สิ่งนี้จะแสดงเนื้อหาของย่อหน้าในแบบอักษร Comic Sans

3

เพิ่มพื้นหลังให้กับเว็บไซต์ทั้งหมดของคุณในแท็กโดยใช้แอตทริบิวต์ bgcolor ตัวอย่างเช่น:

สิ่งนี้แสดงพื้นหลังของหน้าทั้งหมดในสีกุหลาบ

CSS และสไตล์ชีทภายนอก

1

เปิดเอกสารข้อความใหม่ใน Notepad

2

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

p {

ตระกูลฟอนต์: "comic sans ms";

พื้นหลังสี :: # CC3366;

}

ทุกย่อหน้าในเอกสาร HTML ของคุณจะมีแบบอักษร Comic Sans และมีสีพื้นหลังเพิ่มขึ้น

3

ใช้ ID หรือคลาสหากคุณต้องการแนะนำสไตล์ที่จะใช้กับองค์ประกอบหลายประเภทหรือในแต่ละกรณี ID สามารถใช้ได้เพียงครั้งเดียวและใช้สัญลักษณ์ "#" คลาสสามารถใช้ได้หลายครั้งและใช้เครื่องหมาย "" แทน สัญลักษณ์. ตัวอย่างเช่น:

.comicrose

ตระกูลฟอนต์: "comic sans ms";

พื้นหลังสี :: # CC3366;

}

คลาสนี้ให้คุณจัดวางองค์ประกอบด้วย Comic Sans และพื้นหลังดอกกุหลาบทุกที่ที่คุณเรียกคลาส ตัวอย่างเช่นในรหัส HTML สำหรับหน้าของคุณ

สไตล์ย่อหน้าตามที่อธิบายไว้

4

เชื่อมโยงไปยังสไตล์ชีทภายนอกในส่วนของรหัส HTML ของคุณ ตัวอย่างเช่น:

.

ลิงก์นี้ไปยังสไตล์ชีทภายนอกชื่อ pagestyles.css

สิ่งที่จำเป็น

  • แก้ไขข้อความ

โพสต์ยอดนิยม