2. โครงสร้างของภาษา HTML
<html>
<head>
<title>Title of the document</title>
</head>
<body>
That’s all I need to create my first HTML page
</body>
</html>
ส่วนหัว
ส่วนเนื้อหา
3. HTML เบื้องต้น
Headings
<h1>This is a heading</h1>
<h2>This is a heading</h2>
Paragraphs
<p>This is a paragraph.</p>
LineBreaks
First Line<br> Second Line
Links
<a href="http://www.google.com">This is a link</a>
Images
<img src="w3schools.jpg" width="104" height="142">
4. Elements
ภาษา HTML ใช้ Element หรือ Tag ในการกาหนดรูปแบบ
Empty Elements คือ Element ทีeไม่ มีเนื้อหา เช่น
<br>
<img src="boat.gif">
Open tag
Element content
Closetag
<p>
This is a paragraph
</p>
<a href=“default.html”>
This is a link
</a>
<br>
5. HTML Tip: ควรใช้ Lowercase Tags
HTML Tag จะไม่ สนใจตัวพิพม์ใหญ่ หรือเล็ก
<P> เหมือนกับ <p>
World Wide Web Consortium (W3C) แนะนาให้ใช้ชื่อ Tag เป็นตัวพิพม์เล็ก
6. Attributes
แต่ละ Elements สามารถมี Attribute ได้
Attribute คือ ข้อมูลเสริมเกี่ยวกับ Element
Attribute จะถูกกาหนดใน start tag เท่านั้น
Attribute จะอยู่ในรูปแบบคู่ของ name/value เช่น name="value“
ตัวอย่าง Attribute
ใน Tag การสร้าง Link จะใช้ Attribute ชื่อ href ในการระบุ URL
<a href="http://www.w3schools.com">This is a link</a>
7. Headings
Heading นิยามด้วย Tab <h1> ถึง <h6>
<h1> มีความสาคัญมากที่สุด <h6> มีความสาคัญน้อยที่สุ ด
ตัวอย่าง
<h1>This is a heading</h1>
<h2>This is a heading</h2> <h2>This is a heading</h2>
<h3>This is a heading</h3>
ไม่ ควรใช้ Heading ในการทาให้ตัวอักษรมีขนาดใหญ่ เท่านั้นควรใช้ในการกาหนด
ลาดับความสาคัญของหัวข้อ เพราะ Search Engine จะทาIndex ตามโครงสร้าง
Heading
8. HTML Tips
Comments คือ ส่วนของคาอธิบายทีeไม่ ต้องการให้แสดงผล
<!--This is a comment -->
ปิดดูโค้ด HTML ด้วย
Chrome คลิกขวา > View page source
IE คลิกขวา > View source
ดูว่าส่วนของเอกสารหมายถึง Element ใด
Chrome คลิกขวา > Inspect element
9. Text Formatting
<b>This textisbold</b>
<strong>This textisstrong</strong>
<i>This textisitalic</i>
<i>This textisitalic</i>
<em>This textisemphasized</em>
<code>This iscomputeroutput</code>
Thisis<sub> subscript</sub> and
<sup>superscript</sup>
10. Hyperlinks (Links)
Link ไปยังเว็บอื่น
<a href="url">Link text</a>
<a href="http://www.google.com/">Google</a> ไปยังเว็บ Google โดยอยู่
หน้าต่างเดิม
<a href="http://www.google.com/" target="_blank">Google</a> ไปยังเว็บ
Google โดยเปิดหน้าต่างใหม่
Link ในหน้าเดียวกัน
1. เพิ่มจุด Link <a id="tips">Useful Tips Section</a>
2. สร้าง Link ไปส่วนนั้น <a href="#tips">Visit the Useful Tips Section</a>
หรือ <a href="http://www.pantip.com/cafe/blueplanet/topic/E12851477/E12851477.html#5">
Visit the Useful Tips Section</a>
11. HTML <head>
ใช้เก็บ scripts หรือ style
คาสั่งในการโหลดไฟล์ scripts หรือ style
ข้อมูลของเว็บสาหรับใช้ในการทา Index ใน Search Engine
Title Element Title Element
<head><title>Title of the document</title></head>
Link Element
<link rel="stylesheet" href="mystyle.css">
12. Meta Element
นิยาม keywords ให้ search engines ทา Index
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
อธิบาย web page
<meta name="description" content="Free Web tutorials on HTML and CSS">
ระบุชื่อผู้เขียน
<meta name="author" content="HegeRefsnes">
กาหนดให้ Refresh เอกสารทุกๆ 30วินาที
<meta http-equiv="refresh" content="30">