Powered by

 

รับทำโปรเจค html5 รับทำโปรเจค css รับทำโปรเจค javascript รับทำโปรเจค php รับทำโปรเจค codeigniter รับทำโปรเจค laravel รับทำโปรเจค asp.net รับทำโปรเจค angulatjs รับทำโปรเจค reactjs รับทำโปรเจค joonla เว็บสำเร็จรูป รับทำโปรเจค moodle ระบบอีเลิร์นนิ่ง E-learning รับทำโปรเจค wordpress รับทำโปรเจค android application รับทำโปรเจค ios application รับทำโปรเจค flutter รับทำโปรเจค react native ฐานข้อมูล mysql ฐานข้อมูล mariadb ฐานข้อมูล postgresql ฐานข้อมูล sql server ฐานข้อมูล firebase ฐานข้อมูล mongodb รับทำโปรเจค dreamweaver รับทำโปรเจค vscode รับทำโปรเจค sublime text รับทำโปรเจค nodejs expressjs รับทำโปรเจค nginx รับทำโปรเจค apache web server รับทำโปรเจค xampp

 

พื้นฐาน HTML5 กับ CSS3

พื้นฐาน 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 จะเห็นความแตกต่างมากยิ่งขึ้นนะครับ คลิ๊กที่นี่



ที่มา : รับทำโปรเจคจบ.com, hellomyweb.com

กลับ