HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล

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 ตางๆ


HTML Tags

เอกสาร HTML จะประกอบดวย Tag และ เนอหา

<tagname>content</tagname>

ตว Tag รวมทงเนอหาระหวาง Tag เปดและปด รวมแลวเรยกวา HTML Element

เอกสาร HTML มนามสกลเปน .htm หรอ .html


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


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)


http://www.w3schools.com/tags/tag_doctype.asp

ภาพรวมของการเรยกด Web page


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



11

การสรางเอกสาร HTML [3]


เอกสาร HTML

เอกสาร HTML ประกอบดวย 2 สวน คอ Tag คอ สวนของค าสง เขยนอยภายในเครองหมาย

< > เชน <br> โดยการแสดงผลใน Webpage จะไมแสดงTag เหลาน

สวนของขอความทตองการแสดงบน webpage

เราสามารถเรยกด HTML Tag บนแตละหนา Webpage บน Browser โดยการเรยก Menu “View Source” (Chrome) หรอ “View Page Source” (Firefox) เปนตน


เอกสาร 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


โครงสรางภาษา HTML

ในการเขยนเอกสาร HTML 1 หนา จะตองประกอบไปดวยค าสงหลกอย 4 ค าสง <html>…</html> เปนค าสงทท าหนาทบอกจดเรมตน และจดสนสด

ของเอกสาร HTML

<head>…</head> เปนค าสงทท าหนาทก าหนดสวนหวเรอง

<title>…<title>เปนค าสงทก าหนดขอความทตองการ แสดงผลบนแถบชอเรอง

<body>…</body> เปนค าสงทท าหนาทก าหนดขอความและรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจาก Web Browser


โครงสรางภาษา 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>


HTML Headings (หวเรอง) [2]

Headings Tag ใชเพอก าหนดหวเรองเทานน ไมควรใช Heading Tag เพยงเพอก าหนดตวอกษรเปนตวหนา หรอขนาดใหญSearch Engine ใช Heading Tag ในการท า Index โครงสรางหนา Web

<h1> ควรเปนหวเรองใหญของเอกสาร สวน Tag <h2> และ<h3> ใชส าหรบหวเรองระดบรองลงมา เปนตน


HTML Attribute

ในแตละ Element เราสามารถก าหนด Attribute ได Attribute ใชก าหนดขอมลเพมเตมใน Elementตองก าหนดทฝง Start Tag เทานนอยในรปแบบ name="value"

เชนเดยวกบในกรณ Tag W3C แนะน าใหใช Lowercase ส าหรบ Attribute

ตวอยาง <h1 style="text-align:right">Chapter 1</h1>

เปนการจดหนาของหวขอ h1


Attribute: text-align

text-align การก าหนดต าแหนงการจดวางหวเรอง left ก าหนดการจดวางชดซายของบรรทด (คาปกต) center ก าหนดการจดวางกงกลางของบรรทด right ก าหนดการจดวางชดขวาของบรรทด


HTML Lines (เสนขวาง)

Tag <hr> ใชก าหนดเสนขวาง


<hr> Styling

height (ความหนาของเสน)<hr style="height:30px">

width (ความยาวของเสน)<hr style="width:50%">

align (ต าแหนงการวาง)<hr style="align:center">


<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">


HTML Paragraphs (ยอหนา)

การก าหนด paragraph ท าไดโดยการใช tag <p> Example<p>This is a paragraph.</p><p>This is another paragraph.</p>

เชนเดยวกนกบกรณ headings เราสามารถก าหนดการจดยอหนา ใหชดซาย ขวา หรอกงกลางได

<p style="text-align:ต าแหนงการจดวาง">ขอความ</p>


HTML Line Breaks (บรรทดใหม)

การขนบรรทดใหม ในยอหนาเดม ท าไดโดยการใช tag <br>

<br> ถอเปน Element วาง (Empty Element) ไมจ าเปนตองมการปด tag


Spaces in HTML

ในเอกสาร HTML บรรทดวาง หลายๆ บรรทดตอกน จะแสดงผลเปนบรรทดวาง บรรทดเดยว

Space (วรรค) หลาย space ตอกน จะแสดงผลเปน space เดยว

สามารถใช &nbsp หากตองการ space หลายๆชอง


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>


http://www.w3schools.com/html/html_formatting.asp

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


Documents

HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็ม ... · 2015-01-08 · HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล