Html5 overview

วิชา อาชีพธุรกิจ 1 (ง31102)
โรงเรียนเรยีนาเชลีวิทยาลัย จังหวัดเชียงใหม่

ภาษา HTML5 และชุดคาสั่ง
HTML5 คืออะไร
HTML5 (Hyper Text Markup Language 5)

คือ ชุดของเทคโนโลยีสมัยใหม่ที่พัฒนามาจาก

HTML เวอร์ชัน 4 ซึ่ง HTML5 มีคุณสมบัติที่ทาให้เว็บไซต์มีประสิทธิภาพ และมีความยืดหยุ่นสามารถทางาน
ร่วมกับอุปกรณ์และเทคโนโลยีต่าง ๆ ได้มากขึ้น
ตัวอย่างเว็บไซต์ที่พัฒนาด้วย HTML5
1. www.zippergaleria.com

2. http://www.healthshare-award.com/

1


3. http://www.dumbwaystodie.com/

HTML5 จะทางานร่วมกับภาษา css ซึ่งใช้ในการจัดรูปแบบหน้าจอ ดังนั้นเว็บไซต์ที่พัฒนาขึ้นด้วยภาษา
HTML5 จึงมีลักษณะของคาสั่งที่อ่านง่าย
ตัวอย่าง คาสั่งภาษา HTML5
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>เกี่ยวกับตัวฉัน</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<body style="background-color:#333">
<center>
<header><h1>About Me</h1></header>
<nav>
<ul>
<li><img src="school.png"g" width="50px"><a href="#"> Ragina Colie School Website</a></li>
</ul>
2


</nav>
<article>
<section>
<figure><img src="girl-cartoon-vector-752546.jpg" width="200px">
<figcaption>About Me</figcaption>
</figure>
</section>
<section class="fEng">
<p><b>Name</b> Surin Aunsan<br>
<b>Date of Birth </b>28 April 2533<br>
<b>Study in Mathayom 4</b> Ragina Colie School , Chaing Mai<br>
<b>I want to be</b> Programmer<br>
<b>My hobby is</b> playing a computer<br>
<b>About me </b><br>
I am cheerful.I like drawimg a picture.I have a dog.Her name is Namkhing and I often watch Korea
movie because it so interesting story and pretty actor every weekend.
</p>
</section>
<section >เลือกภาษา<br>
<a href="#"><img src="thaitw.svg.png" width="60px" title="ภาษาไทย"border="0"></a>
<a href="#"><img src="SP_Promise_Alpha_e.png" width="60px" title="ภาษาอังกฤษ" border="0"></a>
</section>
</article>
<footer><br>@ 2012 – 2013</footer>
</center>
</body>
</html>

style.css
@charset "utf-8";
/* CSS Document */
body center header h1{
width:770px; height:40px; color:#EEE; text-align:left; padding-left:30px; float:left;
3


margin-left:20%
}
nav{
width:798px ; height:50px; border:1px solid #fff; border-radius:10px 10px 0px 0px;
background-color:#FFF; float:left; margin-left:20%
}
nav ul{ list-style:none }
nav ul li{
display:block; float:left; padding-left:10px
}
nav ul li a{ text-decoration:none; color:#999}
nav ul li a:hover{color:#03F;}
article{
width:800px ;height:590px;background-color:#E5E5E5;clear:both;float:left;margin-left:20%;
font-size:14px
}
section p{
width:760px; height:150px; float:left; text-align:left; padding:20px
}
figure{
width:760px; height:210px; float:left
}
footer{
width:800px ; height:30px; color:#EEE; text-align:center; float:left; padding-left:20%
}
section video{
width:350px; height:300px; float:left
}

4


ผลลัพธ์ของคาสั่งเบื้องต้น

โครงสร้างคาสั่งภาษา HTML5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
</head>
<body>
</body>
</html>

5


1. คาสั่งเริ่มต้นและสิ้นสุดของเอกสาร HTML
<HTML>…….</HTML>
คาสั่ง <HTML> เป็นคาสั่งเริ่มต้นการเขียนโปรแกรมและคาสั่ง และคาสั่ง </HTML> เป็นคาสั่งสิ้นสุด
โปรแกรมทาให้เอกสารมีความเป็นระบบและระบุว่าเป็นเอกสารประเภท HTML
2. ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
<HEAD>..........</HEAD>
เป็นคาสั่งที่ใช้สาหรับอธิบายข้อมูลเฉพาะของเว็บไซต์ และคีย์เวิ ร์ดสาหรับการค้นหา (Keyword) ภายใน
คาสั่งประกอบไปด้วยคาสั่งที่เป็นส่วนประกอบ คือ <TITLE> </TITLE> เป็นส่วนที่ใช้สาหรับระบุข้อความ
เกี่ยวกับเว็บไซต์ ทั้งนี้ไม่ควรพิมพ์เกิน 64 ตัวอักษร
3. ส่วนเนื้อหาเอกสารเว็บ (Body Section)
<BODY>..........</BODY>
เป็นส่วนที่ใช้นาเสนอเนื้อหาและลักษณะของเว็บ ไซต์ทั้งหมด ภายใน BODY ประกอบไปด้วย Tag
มากมายที่ใช้กาหนดคุณสมบัติและลักษณะในการแสดงผล การป้อนคาสั่งในส่วนนี้ไม่มีข้อจากัดสามารถป้อน
คาสั่งติดๆ กันได้ แต่สวนใหญ่จะอยู่ในรูปแบบที่อ่านง่าย
คาสั่งหรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมาย < ตามด้วยคาสั่ง และปิดท้ายด้วย “/”
(Slash) นาหน้าเครื่องหมาย “>” หรือคาสั่งปิด ยกเว้นในบางคาสั่งที่ไม่ต้องระบุคาสั่งสาหรับปิด Tag เช่น <br>
เป็นต้น ในการเขียนคาสั่งภาษา HTML สามารถเขียนด้วยตัวอักษรเล็ กหรือใหญ่ทั้งหมดหรือเขียนคละกันได้ ซึ่ง
ให้ผลลัพธ์เหมือนกัน ลักษณะดังกล่าวเรียกว่า Case Insensitive
ตัวอย่างคาสั่งภาษา HTML ที่มี Tag เปิด และปิด

ตัวอย่างคาสั่งภาษา HTML ที่ไม่มี Tag เปิดและปิด

6

ตัวอย่างการใช้งานคาสั่งแทรกรูปภาพที่พิมพ์ด้วยตัวอักษรเล็กและใหญ่ซึ่งให้ผลลัพธ์เหมือนกัน

คาสั่ง HTML เบื้องต้นที่ควรทราบ
Tag
HTML Tag
 

<a href=””></a>
<b></b>
<br>
<center>
<embed>
<font></font>
<h1></h1>
<hr>
<I></l>
<img src=””>
<marquee>
<p></p>
<s></s>
<strike></strike>
<strong></strong>

การใช้งาน
กาหนดช่องว่างระหว่างวัตถุ เช่น ตัวอักษร เปรียบได้กับคาสั่ง spacebar
แทรกหมายเหตุ
กาหนดจุดลิงก์และตาแหน่งแองเคอร์ เช่น <a href=”” title=””></a>
แสดงข้อความแบบตัวหนา
กาหนดจุดสิ้นสุดบรรทัด (ขึ้นบรรทัดใหม่)
แสดงข้อความแบบจัดกึ่งกลาง เช่น <center>ข้อความ</center>
แสดงการทางานโปรแกรม plug-in
กาหนดรูปแบบตัวอักษร
แสดงข้อความหัวเรื่องขนาดต่างๆ จาก h1 – h6
แสดงเส้นคั่นทางแนวนอน
แสดงข้อความแบบตัวเอน
แสดงรูปภาพกราฟิก เช่น <img src=”ชื่อรูปภาพ”>
แสดงข้อความแบบตัวอักษรวิ่ง
แสดงข้อความในลักษณะพารากราฟ
แสดงข้อความแบบมีเส้นขีดฆ่ากากับ
แสดงข้อความแบบมีเส้นขีดฆ่ากากับ
แสดงข้อความแบบตัวเข้ม
7


<u></u>
<table> </table>
<tr>
<td>
<ol>
<ul>
<li>

แสดงข้อความแบบขีดเส้นใต้กากับ
สร้างตาราง
สร้างแถวข้อมูลในตาราง
สร้างเซลล์ข้อมูลในตาราง ตัวอย่างเช่น
<table><tr><td></td></tr><table>
แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ โดยเรียงลาดับ
แสดงรายการข้อมูลแบบแจกแจงเป็นข้อๆ โดยไม่เรียงลาดับ
แสดงข้อมูลรายละเอียดแต่ละรายการ ใช้คู่กับ <ul> เช่น
<ul><li>detail1</li></ul>

Attributes
เป็นส่วนที่ใช้ระบุค่าภายใน Tag เช่น <font color=”red” size=”-1”>red</font> คือการ
กาหนดให้ตัวอักษรเป็นสีแดง
Attribute
การใช้งาน
alt
กาหนดข้อความสาหรับใช้แสดงแทน
background
กาหนด URL ของภาพกราฟิกที่ใช้ปูพื้นฉากหลัง
behavior
กาหนดลักษณะการเคลื่อนที่ของข้อความแบบตัวอักษรวิ่ง
bgcolor
กาหนดสีของพื้นฉากหลัง
border
กาหนดขนาดเส้นกรอบ
color
กาหนดสีตัวอักษรและเส้นคั่นทางแนวนอน
direction
กาหนดทิศทางการเคลื่อนที่ของข้อความแบบตัวอักษรวิ่ง
height
กาหนดความสูง
href
ระบุ URL สาหรับการลิงก์
id
กาหนดรหัสเฉพาะตัวสาหรับใช้อ้างอิง
left
กาหนดตาแหน่งเลเยอร์ทางแนวนอนเมื่อเทียบกับตาแหน่งในเว็บเพจ
link
กาหนดสีของจุดลิงก์
loop
กาหนดจานวนรอบการแสดงผล
name
กาหนดชื่อเฉพาะตัวสาหรับใช้อ้างอิง
8


size
weight
width

กาหนดขนาด
กาหนดระดับความหนาของตัวอักษร
กาหนดความกว้าง

การใช้งานคาสั่งในการสร้างตาราง
คาสั่งที่ใช้ในการสร้างตารางประกอบไปด้วยคาสั่ง <table></table> ใช้สาหรับระบุคาสั่งสร้างตาราง
ภายในตารางประกอบไปด้วย <tr></tr> หรือแถวของตาราง ภายในตารางประกอบไปด้วย <td></td> หรือ
คอลัมน์ตาราง
ตัวอย่างเช่น

การใช้งานคาสั่งการลาดับ และจัดเรียงตัวอักษร

9

Html5 overview

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

Similar to Html5 overview

Similar to Html5 overview (20)

More from IrinApat

More from IrinApat (11)

Html5 overview