พื้นฐาน HTML5 กับ CSS3
โดย: Administrator
เมื่อ: 13/12/2562 10:36:38
Tags: HTML5, CSS3, พื้นฐาน HTML5 CSS3, HTML5 CSS3 Tutorial,
HTML5 เป็นภาษาพื้นฐานในการทำเว็บไซต์ ถูกพัฒนามาจาก Hypertext Markup Language (HTML) โดย WHATWG (The Web Hypertext Application Technology Working Group) ปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น ดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C
ความสามารถเด่น ๆ ของ HTML5
- Semantic Markup: โค้ดเป็นระเบียบทำให้ Search Engine เก็บข้อมูลได้ง่าย
- Form Enhancement: เพิ่มประสิทธิภาพของฟอร์ม
- เสียง / วีดิโอ: หลายคนอาจเคยได้ยินเรื่องที่ว่า HTML5 Video จะมาแทน Flash Video (.flv)
- Canvas: เอาไว้วาดรูป ตกแต่งรูป ซึ่งว่ากันว่าอาจมาแทนการวาดรูปในแฟลช (Adobe Flash)
- ContentEditable: สามารถคลิกบนข้อความในเว็บเพื่อแก้ไขได้จากตรงนั้นเลย
- Drag and Drop: ลากของมาวาง
- Persistent Data Storage: การเก็บข้อมูลบนเครื่องผู้ใช้ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว
รูปภาพจาก https://www.trzcacak.rs/
ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ
1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ในเครื่องหมาย < ... >
2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อความที่เราต้องการแสดงผล
ตัวอย่างการใช้งานภาษา HTML
คุณอาจลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer ของคุณเช่น Notepad
<html> <head> <title> หัวข้อเรื่อง ของหน้านี้ </title> </head> <body> เนื้อหาที่จะแสดงใน web browser </body> </html>
เมื่อเราพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง
การทำงานของ code ด้านบน
1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ
2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย
3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page
4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser
CSS3 เป็นภาษาที่ใช้ในการจัดรูปแบบการแสดงผลของภาษา HTML เช่น การจัดวางเลย์เอ้าของเว็บไซต์ ขนาดตัวอักษร สีตัวอีกษร สีพื้นหลัง มักเรียกโดยย่อว่า "สไตล์ชีต" Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการแสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style)
ตัวอย่างโค้ด CSS
@charset "utf-8";
body {
font-family: angsanaUPC;
background-image: url(../bg.gif);
background-repeat: repeat-y;
background-position: left top;
font-size: 20px;
}table{
background-color: #FFFFFF;
font-size: 20px;
padding:5px;
}a {
color: #003366;
}div{
background-color: #D7EFFF;
margin-left: 100px;
padding: 20px;
}
ลองไปดูตัวไฟล์ที่เขียน HTML กับ CSS จะเห็นความแตกต่างมากยิ่งขึ้นนะครับ คลิ๊กที่นี่
