โครงสร้างพื้นฐาน html / css
CSS/HTML

โครงสร้างพื้นฐาน HTML / CSS และการใช้งาน

admin
โครงสร้างพื้นฐาน html / css

HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาที่ใช้ในการเขียนเว็บเพจ โดยใช้ tag ในการควบคุมการแสดงผลของเว็บเพจ การทำเว็บเพจ ด้วย HTML จะต้องอาศัยโปรแกรม Text Editor ต่าง ๆ เช่น Notepad, Brackets, Sublime Text, Visual Studio Code  เป็นต้น

เลือกอ่านตามหัวข้อ
  1. โครงสร้างพื้นฐาน HTML ประกอบด้วย
  2. วิธีการนำ CSS ไปใช้กับ HTML มีอยู่ 3 วิธี ดังนี้

โครงสร้างพื้นฐาน HTML ประกอบด้วย

  1. <!DOCTYPE HTML>  คือการประกาศประเภทของเอกสาร หรือ Doctype ว่าเว็บเพจหน้านี้สร้างขึ้นมาเป็นเอกสารประเภทใดและเป็นมาตรฐานใด ซึ่งมาตรฐานที่มีใช้กันอยู่ 3 มาตราฐานคือ HTML, XHTML, HTML5
  2. <html>…</html> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและเป็นการบอกเบาร์เซอร์ว่าเป็น html ชนิดไหน
  3. <head>…</head> คือส่วนที่เป็นหัวของเอกสาร เป็นส่วนอธิบายเกี่ยวกับข้อมูลเฉพาะของในหน้านั้นๆ ว่าเกี่ยวกับเรื่องอะไร คีย์เวิร์ดที่สำคัญของหน้านี้คืออะไร ภายในจะมี tag พิเศษ อยู่คือ Title Tag, Meta Tag
    • Title Tag <title>…</title> คือส่วนที่ใช้บอกว่าเว็บไซต์หน้านี้มีคือเรื่องอะไร ไม่ควรเกิน 64 ตัวอักษร และเขียนให้ความหมายสื่อถึงหน้าเว็บเพจว่าเกี่ยวกับอะไร และควรใส่keyword ลงไปด้วย
    • Meta Description Tag คือส่วนที่ใช้ในการอธิบายหน้าว่า เนื้อหาในหน้าเว็บเพจ คืออะไร จะสื่อความหมายอะไร ตัวอักษรไม่ควรเกิน 160 ตัวอักษร
    • Meta Keywords Tag คือส่วนที่แสดงให้ Bot รู้ว่าบทความนี้คีย์เวิร์ดที่เกี่ยวข้องมีอะไรบ้าง การเขียนคีย์เวิร์ดแต่ละคำ ต้องขั้นด้วยเครื่องหมายคอมม่า (,)
  4. <body>…</body> เป็นส่วนสำคัญ เป็นส่วนนที่แสดงเนื้อหาทั้งหมดของเว็บเพจ ตัวอักษรไม่ควรต่ำกว่า 300 ตัวอักษร จะประกอบด้วย Tag ต่างๆ มากมาย ตามการนำเสนอข้อมูล เช่น ข้อความ, รูปภาพ, วีดิโอ, เสียง, ลิงค์ หรือไฟล์ข้อมูลต่างๆ

ตัวอย่าง โครงสร้าง HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ชื่อเรื่องบทความ</title>
    <meta name="description" content="อธิบายบทความ">
    <meta name="keywords" content="คีย์เวิร์ดของบทคความขั้นด้วยเครื่องหมาย คอมม่า">
</head>
<body>
    ส่วนเนื้อหาของบทความ
</body>
</html>

แต่การเขียนเว็บด้วย HTML เพียงลำพัง จะไม่สามารถทำให้ เว็บเพจออกมาดูสวยงามได้ จะต้องมี CSS เข้ามาช่วย เพื่อให้เว็บเพจ มีหน้าตาที่สวยงามขึ้น

CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่ใช้ในการตกแต่งเว็บช่วยให้ HTML/XHTML  มีรูปแบบหน้าตาที่สวยงามขึ้น ไม่ว่าจะเป็น สี ตัวอักษร  พื้นหลัง ระยะห่าง เส้นของ และอื่นๆ

วิธีการนำ CSS ไปใช้กับ HTML มีอยู่ 3 วิธี ดังนี้

1. Inline

เป็นการเขียน CSS เข้าไปในแท็ก HTML โดยใช้ style attribute
ข้อดี : ง่ายและสะดวกในการทำงาน เพราะเขียนลงไปใน Tag ได้เลย
ข้อเสีย : โค๊ดไม่ระเบียบ ดูรกไม่สวยงาม, ทำให้ไฟล์ html มีขนาดที่ใหญ่ขึ้น และ ในกรณีที่ต้องการแก้ css ตรงจุดนั้น จะต้องตามไปแก้ทุกไฟล์ ไม่สามารถ rewrite CSS ได้

<p style ="color:#ffffff">ตัวหนังสือ</p>

2. Internal

เป็นการเขียน CSS เข้าไปในไฟล์ HTML โดยจะแทรกอยู่ในแท็ก <head> ในไฟล์ HTML นั้นและมีแท็ก <style>…</style> ครอบอยู่
ข้อดี : ง่าย และสามารถครอบคลุมได้ทั้งหน้าเพจนั้นๆ
ข้อเสีย : ไม่สามารถนำ css นี้ไปใช้กับหน้าอื่น ๆ ได้ง่าย เหมาะกับการแก้เฉพาะหน้าเท่านั้น

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ชื่อเรื่องบทความ</title>
    <meta name="description" content="อธิบายบทความ">
    <meta name="keywords" content="คีย์เวิร์ดของบทคความคั้นด้วยเครื่องหมาย คอมม่า">
    <style>
        body{
            background: #f2f2f2;
            padding: 10px;
            margin: 10px;
        }
        p{color: #ff0000;
}
    </style>
</head>
<body>
    <p>ส่วนเนื้อหาของบทความ</p>
</body>
</html>

3.  External

เป็นการเขียนโดยใช้ไฟล์ CSS แยกออกมาต่างหาก และใช้ Tag <link rel=”stylesheet” href=”xxx.css” type=”text/css”/> ในการเรียกไฟล์มาใช้งาน โดยไฟล์ CSS จะมีนามสกุลเป็น .css เช่น style.css, default.css
ข้อดี : สามารถนำไฟล์ไปใช้ได้กับ หน้าอื่น ๆ ได้ทั้งเว็บ / สะดวกในการแก้ไข css ที่ไฟล์เดียว
ข้อเสีย : จะมีปัญหาเรื่อง path link ผิด ที่จะต้องระวัง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ชื่อเรื่องบทความ</title>
    <meta name="description" content="อธิบายบทความ">
    <meta name="keywords" content="คีย์เวิร์ดของบทคความคั้นด้วยเครื่องหมาย คอมม่า">
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <p>ส่วนเนื้อหาของบทความ</p>
</body>
</html>

โครงสร้างพื้นฐาน HTML และ CSS เป็นพื้นฐานการเริ่มต้นเขียนเว็บไซต์ html เปรียบเสมือนการสร้างโครงบ้าน เสาบ้าน พนังบ้าน ส่วน css เปรียบเสมือนการตกแต่งภายใน ทั้งสีสัน การจัดวาง เพื่อให้ได้บ้านที่สวยงาม

Related Posts