html 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... ·...
Post on 12-Jul-2020
1 Views
Preview:
TRANSCRIPT
HTML
1. รปแบบพ นฐานของ เอชทเอมแอล
Based on Material by อ. กตตพชญ คปตะวาณช
และ อ. สทธโชค ทรพยไพบลยกจ
HTML Introduction
HTML เปนภาษาทใชในการเขยน Web Page ซงสามารถสรางใหแสดงผลใหอยในรปของตวอกษร ภาพนง ภาพเคลอนไหว เสยง และยงสามารถเชอมโยงไปยงเวบไซตอนๆในระบบ Internet
หนวยงานหลกทท าหนาทก าหนดมาตรฐาน HTML คอ World Wide Web Consortium (W3C)
204202: Information Technology II 2
HTML Introduction [2]
HTML ยอมาจาก HyperText Markup LanguageHyperText คอ ขอความทมลงค (Hyperlink or Link) เชอมโยงกบขอความอน
Markup Language คอภาษาทเอาไวอธบายลกษณะของขอมลแบบเอกสาร ประกอบดวย Markup Tags ตางๆ
204202: Information Technology II 3
HTML Tags
เอกสาร HTML จะประกอบดวย Tag และ เนอหา
<tagname>content</tagname>
ตว Tag รวมทงเนอหาระหวาง Tag เปดและปด รวมแลวเรยกวา HTML Element
เอกสาร HTML มนามสกลเปน .htm หรอ .html
204202: Information Technology II 4
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
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
ภาพรวมของการเรยกด Web page
204202: Information Technology II 7
server
html document
Browser
Processed
document
การสรางเอกสาร 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
การสรางเอกสาร HTML [2]
2. Web browserเปนโปรแกรมทใชเรยกเอกสาร HTML ออกมาแสดงผลบนจอภาพในระบบ Internetตวอยางเชน Chrome, Firefox, Internet Explorer
204202: Information Technology II 9
204202: Information Technology II 10
11
การสรางเอกสาร HTML [3]
204202: Information Technology II 12
เอกสาร 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
เอกสาร HTML [2]
Tag ม 2 แบบTag เดยว: Tag ทมค าสงเดยว สามารถใชงานค าสงได ณ ต าแหนงทเราระบ เชน <br>
Tag ค: Tag ทม 2 สวน คอ Tag เปด และ Tag ปด โดย Tag ปดมรปแบบเหมอน Tag เปด แตมเครองหมาย /น าหนา
<ชอค าสง> ขอความทตองการแสดง </ชอค าสง> เชน
<html> ขอความทตองการ </html> 14
HTML Tags
โดยปกตแลวเราสามารถเขยน HTML Tag ดวยตวพมพเลก(Lowercase) หรอตวพมพใหญ (Uppercase) กได <HTML> <html>
W3C แนะน าใหใชตวพมพเลกใน HTML4 และ บงคบใหใชตวพมพเลก ใน XHTML
204202: Information Technology II 15
โครงสรางภาษา HTML
ในการเขยนเอกสาร HTML 1 หนา จะตองประกอบไปดวยค าสงหลกอย 4 ค าสง <html>…</html> เปนค าสงทท าหนาทบอกจดเรมตน และจดสนสด
ของเอกสาร HTML
<head>…</head> เปนค าสงทท าหนาทก าหนดสวนหวเรอง
<title>…<title>เปนค าสงทก าหนดขอความทตองการ แสดงผลบนแถบชอเรอง
<body>…</body> เปนค าสงทท าหนาทก าหนดขอความและรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจาก Web Browser
204202: Information Technology II 16
โครงสรางภาษา HTML [2]
<html>
<head>
<meta charset="utf-8"/><title>
ขอความทตองการแสดงผลบน Title Bar</title>
</head>
<body>
ขอความและค าสงใดๆทตองการปรบแตงเอกสารบนสวนของจอภาพ</body>
</html>204202: Information Technology II 17
HTML Basics
204202: Information Technology II
18
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
HTML Headings (หวเรอง) [2]
Headings Tag ใชเพอก าหนดหวเรองเทานน ไมควรใช Heading Tag เพยงเพอก าหนดตวอกษรเปนตวหนา หรอขนาดใหญSearch Engine ใช Heading Tag ในการท า Index โครงสรางหนา Web
<h1> ควรเปนหวเรองใหญของเอกสาร สวน Tag <h2> และ<h3> ใชส าหรบหวเรองระดบรองลงมา เปนตน
204202: Information Technology II 20
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
Attribute: text-align
text-align การก าหนดต าแหนงการจดวางหวเรอง left ก าหนดการจดวางชดซายของบรรทด (คาปกต) center ก าหนดการจดวางกงกลางของบรรทด right ก าหนดการจดวางชดขวาของบรรทด
204202: Information Technology II 22
HTML Lines (เสนขวาง)
Tag <hr> ใชก าหนดเสนขวาง
204202: Information Technology II 23
<hr> Styling
height (ความหนาของเสน)<hr style="height:30px">
width (ความยาวของเสน)<hr style="width:50%">
align (ต าแหนงการวาง)<hr style="align:center">
204202: Information Technology II 24
<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
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
HTML Line Breaks (บรรทดใหม)
การขนบรรทดใหม ในยอหนาเดม ท าไดโดยการใช tag <br>
<br> ถอเปน Element วาง (Empty Element) ไมจ าเปนตองมการปด tag
204202: Information Technology II 27
Spaces in HTML
ในเอกสาร HTML บรรทดวาง หลายๆ บรรทดตอกน จะแสดงผลเปนบรรทดวาง บรรทดเดยว
Space (วรรค) หลาย space ตอกน จะแสดงผลเปน space เดยว
สามารถใช   หากตองการ space หลายๆชอง
204202: Information Technology II 28
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
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
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
top related