วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using

ภาษามาร์กอัป HTML (Hyper Text Markup Language)

วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)

บทที่ 3

วัตถุประสงค์การเรียนรู ้2

เพื่อให้ผู้เรียนมีความรู้และความเข้าใจเกี่ยวกับเอกสาร HTML และโครงสร้างเอกสารพื้นฐาน

เพื่อให้ผู้เรียนสามารถสร้างเอกสาร HTML ขั้นสูงตลอดจนสามารถน าไปประยุกต์ใช้งานได้อย่างเหมาะสม

เอกสารประกอบการสอน เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

หัวข้อ 3

บทน า (Overview)

เอกสาร HTML (HTML Document)

ประสิทธิภาพเว็บไซต ์(Site Performance)

สรุป (Summary)

เอกสารประกอบการสอน เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

Examples in Every Chapter

เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน

4

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body> </html>

บทน า (Overview)


5

What is HTML? HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language

HTML describes the structure of Web pages

using markup

HTML elements are the building blocks of HTML

pages

HTML elements are represented by tags

HTML tags label pieces of content such as

"heading", "paragraph", "table", and so on

Browsers do not display the HTML tags, but use

them to render the content of the page

HTML Document 6

HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัย

Tags เป็นตัวก ากับและควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถอุื่น ๆ

แสดงผลผ่าน Web Browser

พัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) ตัดความสามารถบางส่วนออก เพื่อท าความเข้าใจและเรียนรู้ได้ง่าย

เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 7

HTML Structure 8

ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012. เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

HTML ต้องการ element แท็ก title XHTML ต้องการ element แท็ก meta

HTML Structure (ต่อ) 9

1 ประกาศประเภทของเอกสาร (ที่เรียกว่า DOCTYPE) ที่ระบุในเอกสารฉบับนี้เป็นเอกสาร HTML5

2 html element ที่เรียกว่า root element

3 head element ข้อมูลรายละเอียดเกี่ยวกับเอกสาร เช่น title, style sheet(s), scripts และประเภทข้อมูล “meta”

4 สามารถใช้ในการก าหนดข้อมูลของเว็บไซต์แบบสั้น แต่ในกรณีนี้จะระบุ character encoding

5 title element ตามข้อก าหนด HTML เอกสารทุกต้องมี title ที่เป็นค าอธิบาย

6 body element บรรจุข้อมูลทุกอย่างที่ต้องการแสดงบนเบราเซอร ์


HTML Editors


10

Write HTML Using Notepad Dreamweaver

Open Notepad > Write Some HTML

Save the HTML Page

View the HTML Page in Your Browser

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

HTML Basic


11

HTML Documents

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

<!DOCTYPE html>

<html>

<body>



</body>

</html>

<a href="https://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Basic: HTML Headings 12

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1>




HTML Basic: HTML Paragraphs 13

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p> <p>This is another paragraph.</p>


HTML Elements 14

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:



Nested HTML Elements 15

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

<!DOCTYPE html>

<html>

<body>



</body>

</html>


Do Not Forget the End Tag 16

Some HTML elements will display correctly, even if you forget the end tag:

<html>

<body>

<p>This is a paragraph

<p>This is a paragraph

</body>

</html>


Empty HTML Elements 17

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.


Use Lowercase Tags 18

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.


เอกสาร HTML เบื้องต้น (ต่อ) 19

ที่มา: http://www.w3schools.com/tags/default.asp

แท็ก (Tags) รายละเอียด

 Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<b> Defines bold text

<body> Defines the document's body

<br /> Defines a single line break

<center> Not supported in HTML5. Use CSS instead.

Defines centered text




<div> Defines a section in a document

<dl> Defines a description list

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text

<frame> Not supported in HTML5. Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5. Defines a set of frames

<h1> to <h6> Defines HTML headings

ที่มา: http://www.w3schools.com/tags/default.asp เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)


<head> Defines information about the document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or

mood

<iframe> Defines an inline frame

<img> Defines an image


<head> Defines information about the document

<header> Defines a header for a document or section

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image


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

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

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

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

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

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

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

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

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




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




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






<li> Defines a list item

<link> Defines the relationship between a document and an external resource (most

used to link to style sheets)

<meta> Defines metadata about an HTML document

<ol> Defines an ordered list

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text


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

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

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

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



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

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



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



<script> Defines a client-side script

<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table


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

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

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

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

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

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

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



<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<title> Defines a title for the document

<tr> Defines a row in a table

<u> Defines text that should be stylistically different from normal text

<ul> Defines an unordered list


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



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



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



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

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



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

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



HTML Links 25

แท็ก <A> ใช้ใน HTML เพื่อการแสดงผลและท างานเกี่ยวกับการเชื่อมโยง (Links) หน้าเว็บเพจ ซึ่งเป็นคุณสมบัติของ hypertexts แบ่งได้ ดังนี ้การเชื่อมโยงระหว่างเว็บเพจ <a href=“file.html">File name</a>

การเชื่อมโยงนอกเว็บไซต์ <a href="URL">URLs</a>

การเชื่อมโยงภายในหน้าเว็บเพจ <a name=“TOP"></a> และ <a href="#TOP">Go to top</a>

การเชื่อมโยงแบบอีเมล์ <a href=“mailto:e-mail”>e-mail</a> เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

26

ท่ีมา: Pierre Baldi, Modeling the Internet and the Web, 2003 เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)

HTML Links (ต่อ) 27

<html> <head> <title>การเชื่อมโยงเอกสาร HTML</title> </head> <body> <a name="TOP"></a> <a href="index.html">Home</a> <a href="profile.html"><img src="home.jpg" /></a> <a href="http://www.hotmail.com">Hotmail</a> <a href="mailto:[email protected]">Send mail to me</a> <a href="#TOP">Go to TOP</a> </body> </html>


HTML Images 28

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">


HTML Images (ต่อ) 29

การแทรกรูปภาพในเอกสาร HTML นั้นท างานผ่านแท็ก <img> โดยใช้แนวคิดมาร์กอัปพื้นฐาน

Empty elements <br>

<p>1005 Gravenstein Highway North<br>Sebastopol, CA 95472</p>

Attributes เป็นค าสั่งชี้แจงหรือปรับเปลี่ยนรูปแบบ element

<element attributename="value">Content</element>

<element attribute1="value" attribute2="value">


HTML Images (ต่อ) 30


31

HTML Images (ต่อ)


เอกสาร HTML ขั้นสูง


32

การก าหนดรูปแบบข้อความ

การแทรกส ี

การแทรกรูปภาพขั้นสูง

การแทรกตาราง

การแทรกฟอร์ม

การก าหนดรูปแบบข้อความ


33

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Small text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

<!DOCTYPE html>

<html>

<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>

<p>This is<sub> subscript</sub> and

<sup>superscript</sup></p>

</body>

</html>

HTML Comments


34

Comment tags are used to insert comments in the HTML source code.










HTML Style

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

เทคโนโลยีเว็บ (04-06-204)

35

เอกสารประกอบการสอน

<!DOCTYPE html>

<html>

<body>

<h2 style="color:red;">I am red</h2>

<h2 style="color:blue;">I am

blue</h2>

</body>

</html>

I am red

I am blue

<tagname style="property:value;">

HTML Style (ต่อ)


36

Background Image

Background Color

Text Color

Fonts

Text Size

Text Alignment

<body style="background-color:powderblue;">

<h1>This is a heading</h1>


</body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

<h1 style="font-family:verdana;">This is a

heading</h1>

<p style="font-family:courier;">This is a

paragraph.</p>

<h1 style="text-align:center;">Centered

Heading</h1>

<p style="text-align:center;">Centered

paragraph.</p>

<h1 style="font-size:300%;">This

is a heading</h1>

<p style="font-size:160%;">This

is a paragraph.</p>

<body style="background-image: url('paper.gif');">

<h1>This is a heading</h1>

</body>

HTML Colors


37

ที่มา: http://www.w3schools.com/colors/colors_names.asp

HTML Colors (ต่อ)


38

<!DOCTYPE html>

<html>

<body>

<h2 style="background-color:red">

Background-color set by using red

</h2>

<h2 style="background-color:rgb(255,0,0)">

Background-color set by using rgb(255,0,0)

</h2>

<h2 style="background-color:#FF0000">

Background-color set by using #FF0000

</h2>

</body>

</html>

HTML Blocks และ Inline Elements


39

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline

The <div> element has no required attributes, but both style and class are common.

<div style="background-color:black;color:white;padding:20px;">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United

Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

</div>

<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Lists


40

Unordered HTML List - Choose List Item Marker The CSS list-style-type property is used to define the style of the list item marker:

disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked

HTML Lists (ต่อ)


41

Ordered HTML List - The Type Attribute The type attribute of the <ol> tag, defines the type of the list item

marker: type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman

numbers type="i" The list items will be numbered with lowercase roman

numbers

HTML Lists (ต่อ)


42

<ul style="list-style-type:circle">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<ol type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

HTML Links – Colors และ Images


43

<style>

a:link {color:green; background-color:transparent; text-decoration:none}

a:visited {color:pink; background-color:transparent; text-decoration:none}

a:hover {color:red; background-color:transparent; text-decoration:underline}

a:active {color:yellow; background-color:transparent; text-decoration:underline}

</style>

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">

</a>

HTML Iframes


44

An iframe is used to display a web page within a web page.

<iframe src="URL"></iframe>

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

<iframe src="demo_iframe.htm" style="border:none;"></iframe>

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>


HTML <address> ส าหรับข้อมูลการติดต่อ


46

The HTML <address> element defines contact information (author/owner) of a document or an article.

The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

<!DOCTYPE html> <html> <body> <p>The HTML address element defines contact information (author/owner) of a document or article.</p> <address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html>

HTML Table

ตารางใน HTML จะใช้สร้างขึ้นส าหรับกรณีต้องเพิ่มตาราง (ข้อมูลที่จัดเป็นแถวและคอลัมน)์ ไปยังหน้าเว็บ

ใช้ส าหรับ organize calendars, schedules, statistics หรือการแสดงผลข้อมูลอื่น

โดยท างานผ่านแท็ก

<table> ตาราง

<tr> แถว <th> หรือ <td> คอลัมน ์


47



ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.

HTML Table (ต่อ)


49


การผสานคอลัมน์ด้วย attributes colspan โดยจะใช้ส าหรับการผสานคอลัมน์ภายในแท็ก <th> และ <td>


50



การผสานแถวด้วย attributes rowspan โดยจะใช้ส าหรับ

การผสานคอลัมน์ภายในแท็ก th และ td


51




การแทรกรูปภาพขั้นสูง


53

Image Floating Use the CSS float property to let the image float to the right or to the

left of a text:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

The image will float to the left of the text.</p>

การแทรกรูปภาพขั้นสูง (ต่อ)


54

Image Maps Use the <map> tag to define an image-map. An image-map is an image with

clickable areas.

The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.

The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:

การแทรกรูปภาพขั้นสูง (ต่อ)


55

<!DOCTYPE html>

<html>

<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" alt="Planets" usemap="#planetmap"

style="width:145px;height:126px;">

<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">

<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">

</map>

</body>

</html>

การแทรกฟอร์ม


56

Forms สร้างขึ้นมาให้ท างานร่วมกับ buttons, input fields และ drop-down menus โดยผ่านทางแท็ก

<form>...</form>

ในฟอร์มสามารถบรรจุข้อมูล และแท็กอื่นๆ

สามารถระบุรูปแบบการควบคุมใน text entry fields, buttons และอื่นๆ

เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 57 ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.


การแทรกฟอร์ม (ต่อ)


59

action attribute เป็นการเรียกไฟล์หรือสคริปต ์(URL) ของแอพพลิเคชันที่ใช้ในการประมวลผลข้อมูลจากแท๊ก form

method attribute เป็นการระบุวิธีการส่งข้อมูลไปยัง server POST การส่งข้อมูลจะแยกออกจาก Header

GET การส่งข้อมูลจะส่งไปพร้อมกับ URLs


username = Sally Strongarm email = [email protected]

username=Sally%20Strongarm&email=strongarm%40example.com


GET

POST

username=Sally%20Strongarm&email=strongarm%40example.com

การควบคุมของฟอร์ม

Text entry controls

Specialized text entry controls

Submit and reset buttons

Radio and checkbox buttons

Pull-down and scrolling menus

File selection and upload control

Hidden controls

Dates and times (HTML5)

Numerical controls (HTML5)

Color picker control (HTML5)


61


การควบคุมของฟอร์ม (ต่อ)


62

ประกอบด้วย attributes ดังนี ้ - name - value - id - maxlength



63





65

Password entry field เป็นการระบุค่าส าหรับ attribute type ภายใต้แท็ก input




66

Submit และ reset buttons

การแทรกแท็ก Div


67

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. <!DOCTYPE html> <html> <body> <p>This is some text.</p> <div style="color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This is some text in a div element.</p> </div> <p>This is some text.</p> </body> </html>


ประสิทธิภาพเว็บไซต ์


69

ปรับไฟล์ภาพหรือกราฟิกให้เหมาะสม โดยคงความละเอียดของภาพไว ้

ปรับเอกสาร HTML และ CSS ลบช่องว่างของอักขระพิเศษและ Line return

ใช้จาวาสคริปต์เท่าที่จ าเป็น

เพิ่มสคริปต์ส าหรับการโหลดข้อมูลแบบขนาน ร่วมกับหน้าเพจอื่นๆ

ไม่โหลดข้อมูลที่ไม่จ าเป็นอื่นๆ เช่น images, scripts หรือ JavaScript libraries

ลดจ านวนครั้งที่บราวเซอร์ร้องขอข้อมูลจากเซิร์ฟเวอร์ เพื่อลดเวลาในการเข้าถึงข้อมูลจากเว็บไซต ์

สรุป (Summary)


70

อธิบายการรูปแบบการใช้งานแท็กหรือ element ในเอกสาร HTML และการประยุกต์ใชใ้นขั้นสูง

โครงสร้างเอกสาร HTML

ประสิทธิภาพเว็บไซต์ แนวทางและการปรับปรุงในการพัฒนาให้สามารถตอบสนองผู้ใช้งานอย่างไรให้ดีที่สุด

แบบฝึกปฏิบัต ิ


71

ก าหนดให้ออกแบบและพัฒนาหน้าเว็บไซต์ (หน้า index.html) ที่ประกอบด้วย Banner, Top Navigation, Page Headline, Footer พร้อมทั้งระบุ description และ keyword ในแท็ก <meta> โดยใช้มาร์กอัปแท็ก HTML ที่ประกอบด้วย ดังนี ้Heading, Paragraph, Comments, Links, Table, Images และ Div

(ถ้าม)ี Styles, Image Floating และ Maps

หมายเหต ุสามารถพัฒนาเพิ่มเติมจากกิจกรรมท้ายบทที่ 1-2

เอกสารอ้างอิง


72

Ethan Watrall and Jeff Siarto, Head First Web Design, O’Reilly Media, Inc., 2009.

Jennifer Niederst Robbins, Learning Web Design, 4th Edition, O’Reilly Media, Inc., 2012.

HTML Tutorial (Online), Available at: http://www.w3schools.com/html/default.asp.