html 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... ·...
TRANSCRIPT
![Page 1: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/1.jpg)
HTML
1. รปแบบพ นฐานของ เอชทเอมแอล
Based on Material by อ. กตตพชญ คปตะวาณช
และ อ. สทธโชค ทรพยไพบลยกจ
![Page 2: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/2.jpg)
HTML Introduction
HTML เปนภาษาทใชในการเขยน Web Page ซงสามารถสรางใหแสดงผลใหอยในรปของตวอกษร ภาพนง ภาพเคลอนไหว เสยง และยงสามารถเชอมโยงไปยงเวบไซตอนๆในระบบ Internet
หนวยงานหลกทท าหนาทก าหนดมาตรฐาน HTML คอ World Wide Web Consortium (W3C)
204202: Information Technology II 2
![Page 3: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/3.jpg)
HTML Introduction [2]
HTML ยอมาจาก HyperText Markup LanguageHyperText คอ ขอความทมลงค (Hyperlink or Link) เชอมโยงกบขอความอน
Markup Language คอภาษาทเอาไวอธบายลกษณะของขอมลแบบเอกสาร ประกอบดวย Markup Tags ตางๆ
204202: Information Technology II 3
![Page 4: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/4.jpg)
HTML Tags
เอกสาร HTML จะประกอบดวย Tag และ เนอหา
<tagname>content</tagname>
ตว Tag รวมทงเนอหาระหวาง Tag เปดและปด รวมแลวเรยกวา HTML Element
เอกสาร HTML มนามสกลเปน .htm หรอ .html
204202: Information Technology II 4
![Page 5: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/5.jpg)
HTML Versions
เนองจากมมาตรฐาน HTML อยหลาย Version ดงนนในแตละเอกสาร ควรตองระบดวยวาเปนเอกสาร (HTML หรอ XHTML) Version ใด
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2014 this class
HTML5.1 *stable release in 2016
204202: Information Technology II 5
![Page 6: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/6.jpg)
The <!DOCTYPE> Declaration
HTML5<!DOCTYPE html>
HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
For a complete list of document type declarations, go to W3C’s DOCTYPE Reference
Tag <!DOCTYPE> ใชเพอประกาศชนดของเอกสาร HTML และ XHTML (รวมถง XML)
204202: Information Technology II 6
![Page 7: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/7.jpg)
ภาพรวมของการเรยกด Web page
204202: Information Technology II 7
server
html document
Browser
Processed
document
![Page 8: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/8.jpg)
การสรางเอกสาร HTML
การสรางเอกสาร HTML จะเกยวของกบโปรแกรม 2 สวน1. Editorเปนโปรแกรมทใชในการเขยนภาษา HTML เพอสราง Web
Pageตวอยางเชน Notepad (Text Editor) Adobe Dreamweaver WYSIWYG: What You See is
What You Get Editor)
204202: Information Technology II
8
![Page 9: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/9.jpg)
การสรางเอกสาร HTML [2]
2. Web browserเปนโปรแกรมทใชเรยกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบ Internetตวอยางเชน Chrome, Firefox, Internet Explorer
204202: Information Technology II 9
![Page 10: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/10.jpg)
204202: Information Technology II 10
![Page 11: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/11.jpg)
11
![Page 12: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/12.jpg)
การสรางเอกสาร HTML [3]
204202: Information Technology II 12
![Page 13: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/13.jpg)
เอกสาร HTML
เอกสาร HTML ประกอบดวย 2 สวน คอ Tag คอ สวนของค าสง เขยนอยภายในเครองหมาย
< > เชน <br> โดยการแสดงผลใน Webpage จะไมแสดงTag เหลาน
สวนของขอความทตองการแสดงบน webpage
เราสามารถเรยกด HTML Tag บนแตละหนา Webpage บน Browser โดยการเรยก Menu “View Source” (Chrome) หรอ “View Page Source” (Firefox) เปนตน
204202: Information Technology II 13
![Page 14: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/14.jpg)
เอกสาร HTML [2]
Tag ม 2 แบบTag เดยว: Tag ทมค าสงเดยว สามารถใชงานค าสงได ณ ต าแหนงทเราระบ เชน <br>
Tag ค: Tag ทม 2 สวน คอ Tag เปด และ Tag ปด โดย Tag ปดมรปแบบเหมอน Tag เปด แตมเครองหมาย /น าหนา
<ชอค าสง> ขอความทตองการแสดง </ชอค าสง> เชน
<html> ขอความทตองการ </html> 14
![Page 15: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/15.jpg)
HTML Tags
โดยปกตแลวเราสามารถเขยน HTML Tag ดวยตวพมพเลก(Lowercase) หรอตวพมพใหญ (Uppercase) กได <HTML> <html>
W3C แนะน าใหใชตวพมพเลกใน HTML4 และ บงคบใหใชตวพมพเลก ใน XHTML
204202: Information Technology II 15
![Page 16: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/16.jpg)
โครงสรางภาษา HTML
ในการเขยนเอกสาร HTML 1 หนา จะตองประกอบไปดวยค าสงหลกอย 4 ค าสง <html>…</html> เปนค าสงทท าหนาทบอกจดเรมตน และจดสนสด
ของเอกสาร HTML
<head>…</head> เปนค าสงทท าหนาทก าหนดสวนหวเรอง
<title>…<title>เปนค าสงทก าหนดขอความทตองการ แสดงผลบนแถบชอเรอง
<body>…</body> เปนค าสงทท าหนาทก าหนดขอความและรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจาก Web Browser
204202: Information Technology II 16
![Page 17: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/17.jpg)
โครงสรางภาษา HTML [2]
<html>
<head>
<meta charset="utf-8"/><title>
ขอความทตองการแสดงผลบน Title Bar</title>
</head>
<body>
ขอความและค าสงใดๆทตองการปรบแตงเอกสารบนสวนของจอภาพ</body>
</html>204202: Information Technology II 17
![Page 18: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/18.jpg)
HTML Basics
204202: Information Technology II
18
![Page 19: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/19.jpg)
HTML Headings (หวเรอง)
การก าหนด Heading ท าไดโดยการใช Tag <h1> ถง <h6><h1> เปนหวเรองทมขอบเขตใหญทสด <h6> เปนหวเรองทมขอบเขตเลกทสด
ตวอยาง (ลองสงเกตขนาดตวอกษร)<h1>This is h1 heading</h1>
<h3>This is h3 heading</h3>
<h6>This is h6 heading</h6>
204202: Information Technology II 19
![Page 20: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/20.jpg)
HTML Headings (หวเรอง) [2]
Headings Tag ใชเพอก าหนดหวเรองเทานน ไมควรใช Heading Tag เพยงเพอก าหนดตวอกษรเปนตวหนา หรอขนาดใหญSearch Engine ใช Heading Tag ในการท า Index โครงสรางหนา Web
<h1> ควรเปนหวเรองใหญของเอกสาร สวน Tag <h2> และ<h3> ใชส าหรบหวเรองระดบรองลงมา เปนตน
204202: Information Technology II 20
![Page 21: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/21.jpg)
HTML Attribute
ในแตละ Element เราสามารถก าหนด Attribute ได Attribute ใชก าหนดขอมลเพมเตมใน Elementตองก าหนดทฝง Start Tag เทานนอยในรปแบบ name="value"
เชนเดยวกบในกรณ Tag W3C แนะน าใหใช Lowercase ส าหรบ Attribute
ตวอยาง <h1 style="text-align:right">Chapter 1</h1>
เปนการจดหนาของหวขอ h1
204202: Information Technology II 21
![Page 22: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/22.jpg)
Attribute: text-align
text-align การก าหนดต าแหนงการจดวางหวเรอง left ก าหนดการจดวางชดซายของบรรทด (คาปกต) center ก าหนดการจดวางกงกลางของบรรทด right ก าหนดการจดวางชดขวาของบรรทด
204202: Information Technology II 22
![Page 23: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/23.jpg)
HTML Lines (เสนขวาง)
Tag <hr> ใชก าหนดเสนขวาง
204202: Information Technology II 23
![Page 24: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/24.jpg)
<hr> Styling
height (ความหนาของเสน)<hr style="height:30px">
width (ความยาวของเสน)<hr style="width:50%">
align (ต าแหนงการวาง)<hr style="align:center">
204202: Information Technology II 24
![Page 25: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/25.jpg)
<hr> Styling [2]
color (ส)[IE]
<hr style="color:gray">
[Firefox, Chrome, Opera, Safari]
<hr style="background-color:gray">
เราสามารถใช styling attribute ผสมกนไดโดยคนดวย เครองหมาย ; (Semicolon)
<hr style="height:2px;width:50%;background-color:gray">
204202: Information Technology II 25
![Page 26: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/26.jpg)
HTML Paragraphs (ยอหนา)
การก าหนด paragraph ท าไดโดยการใช tag <p> Example<p>This is a paragraph.</p><p>This is another paragraph.</p>
เชนเดยวกนกบกรณ headings เราสามารถก าหนดการจดยอหนา ใหชดซาย ขวา หรอกงกลางได
<p style="text-align:ต าแหนงการจดวาง">ขอความ</p>
204202: Information Technology II 26
![Page 27: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/27.jpg)
HTML Line Breaks (บรรทดใหม)
การขนบรรทดใหม ในยอหนาเดม ท าไดโดยการใช tag <br>
<br> ถอเปน Element วาง (Empty Element) ไมจ าเปนตองมการปด tag
204202: Information Technology II 27
![Page 28: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/28.jpg)
Spaces in HTML
ในเอกสาร HTML บรรทดวาง หลายๆ บรรทดตอกน จะแสดงผลเปนบรรทดวาง บรรทดเดยว
Space (วรรค) หลาย space ตอกน จะแสดงผลเปน space เดยว
สามารถใช   หากตองการ space หลายๆชอง
204202: Information Technology II 28
![Page 29: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/29.jpg)
HTML Text Formatting
<b>This text is bold</b>
<strong>This text is strong</strong>
This text is bold
This text is strong
This text is italic
This text is emphasized
This is computer output
This is subscript
This is superscript
<i>This text is italic</i>
<em>This text is emphasized</em>
<code>This is computer output</code>
This is <sub>subscript</sub>
This is <sup>superscript</sup>
visit http://www.w3schools.com/html/html_formatting.asp for the complete list
<p>
</p>
204202: Information Technology II 29
![Page 30: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/30.jpg)
Summary
HTML IntroductionHTML Tags & ElementsHTML Versions and DOCTYPE declarationHTML Basic StructuresBasic styling (Look more using CSS keyword)HTML headings, horizontal lines, paragraph,
line-break and text formats 204202: Information Technology II 30
![Page 31: HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล](https://reader033.vdocuments.pub/reader033/viewer/2022050100/5f3fd12b3595cc657836031a/html5/thumbnails/31.jpg)
References
HTML Tutorial http://www.w3schools.com/html/
DOCTYPE http://www.w3schools.com/tags/tag_doctype.asp
HTML Formatting http://www.w3schools.com/html/html_formatting.asp
204202: Information Technology II 31