วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · html...
TRANSCRIPT
![Page 1: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/1.jpg)
ภาษามาร์กอัป HTML (Hyper Text Markup Language)
วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)
บทที่ 3
![Page 2: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/2.jpg)
วัตถุประสงค์การเรียนรู ้2
เพื่อให้ผู้เรียนมีความรู้และความเข้าใจเกี่ยวกับเอกสาร HTML และโครงสร้างเอกสารพื้นฐาน
เพื่อให้ผู้เรียนสามารถสร้างเอกสาร HTML ขั้นสูงตลอดจนสามารถน าไปประยุกต์ใช้งานได้อย่างเหมาะสม
เอกสารประกอบการสอน เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 3: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/3.jpg)
หัวข้อ 3
บทน า (Overview)
เอกสาร HTML (HTML Document)
ประสิทธิภาพเว็บไซต ์(Site Performance)
สรุป (Summary)
เอกสารประกอบการสอน เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 4: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/4.jpg)
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>
![Page 5: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/5.jpg)
บทน า (Overview)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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
![Page 6: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/6.jpg)
HTML Document 6
HTML (Hypertext Markup Language) เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัย
Tags เป็นตัวก ากับและควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถอุื่น ๆ
แสดงผลผ่าน Web Browser
พัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) ตัดความสามารถบางส่วนออก เพื่อท าความเข้าใจและเรียนรู้ได้ง่าย
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 7: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/7.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 7
![Page 8: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/8.jpg)
HTML Structure 8
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012. เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
HTML ต้องการ element แท็ก title XHTML ต้องการ element แท็ก meta
![Page 9: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/9.jpg)
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 บรรจุข้อมูลทุกอย่างที่ต้องการแสดงบนเบราเซอร ์
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 10: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/10.jpg)
HTML Editors
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 11: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/11.jpg)
HTML Basic
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
11
HTML Documents
HTML Headings
HTML Paragraphs
HTML Links
HTML Images
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<a href="https://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
![Page 12: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/12.jpg)
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>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 13: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/13.jpg)
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>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 14: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/14.jpg)
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:
<p>My first paragraph.</p>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 15: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/15.jpg)
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>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 16: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/16.jpg)
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>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 17: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/17.jpg)
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.
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 18: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/18.jpg)
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.
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 19: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/19.jpg)
เอกสาร 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
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 20: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/20.jpg)
เอกสาร HTML เบื้องต้น (ต่อ) 20
แท็ก (Tags) รายละเอียด
<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)
![Page 21: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/21.jpg)
เอกสาร HTML เบื้องต้น (ต่อ) 21
<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
แท็ก (Tags) รายละเอียด
<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/default.asp เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 22: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/22.jpg)
เอกสาร HTML เบื้องต้น (ต่อ) 22
แท็ก (Tags) รายละเอียด
<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/default.asp เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 23: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/23.jpg)
เอกสาร HTML เบื้องต้น (ต่อ) 23
แท็ก (Tags) รายละเอียด
<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/default.asp เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 24: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/24.jpg)
เอกสาร HTML เบื้องต้น (ต่อ) 24
แท็ก (Tags) รายละเอียด
<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/default.asp เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 25: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/25.jpg)
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)
![Page 26: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/26.jpg)
26
ท่ีมา: Pierre Baldi, Modeling the Internet and the Web, 2003 เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 27: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/27.jpg)
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>
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 28: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/28.jpg)
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">
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 29: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/29.jpg)
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">
เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 30: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/30.jpg)
HTML Images (ต่อ) 30
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012. เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 31: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/31.jpg)
31
HTML Images (ต่อ)
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012. เอกสารประกอบการสอน เทคโนโลยีเว็บ (04-06-204)
![Page 32: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/32.jpg)
เอกสาร HTML ขั้นสูง
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
32
การก าหนดรูปแบบข้อความ
การแทรกส ี
การแทรกรูปภาพขั้นสูง
การแทรกตาราง
การแทรกฟอร์ม
![Page 33: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/33.jpg)
การก าหนดรูปแบบข้อความ
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 34: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/34.jpg)
HTML Comments
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
34
Comment tags are used to insert comments in the HTML source code.
<!-- Write your comments here -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
![Page 35: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/35.jpg)
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;">
![Page 36: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/36.jpg)
HTML Style (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
36
Background Image
Background Color
Text Color
Fonts
Text Size
Text Alignment
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</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>
![Page 37: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/37.jpg)
HTML Colors
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
37
ที่มา: http://www.w3schools.com/colors/colors_names.asp
![Page 38: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/38.jpg)
HTML Colors (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 39: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/39.jpg)
HTML Blocks และ Inline Elements
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 40: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/40.jpg)
HTML Lists
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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
![Page 41: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/41.jpg)
HTML Lists (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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
![Page 42: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/42.jpg)
HTML Lists (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 43: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/43.jpg)
HTML Links – Colors และ Images
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 44: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/44.jpg)
HTML Iframes
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 45: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/45.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 45
![Page 46: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/46.jpg)
HTML <address> ส าหรับข้อมูลการติดต่อ
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 47: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/47.jpg)
HTML Table
ตารางใน HTML จะใช้สร้างขึ้นส าหรับกรณีต้องเพิ่มตาราง (ข้อมูลที่จัดเป็นแถวและคอลัมน)์ ไปยังหน้าเว็บ
ใช้ส าหรับ organize calendars, schedules, statistics หรือการแสดงผลข้อมูลอื่น
โดยท างานผ่านแท็ก
<table> ตาราง
<tr> แถว <th> หรือ <td> คอลัมน ์
เทคโนโลยีเว็บ (04-06-204)
47
เอกสารประกอบการสอน
![Page 48: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/48.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 48
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
![Page 49: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/49.jpg)
HTML Table (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
49
![Page 50: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/50.jpg)
HTML Table (ต่อ)
การผสานคอลัมน์ด้วย attributes colspan โดยจะใช้ส าหรับการผสานคอลัมน์ภายในแท็ก <th> และ <td>
เทคโนโลยีเว็บ (04-06-204)
50
เอกสารประกอบการสอน
![Page 51: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/51.jpg)
HTML Table (ต่อ)
การผสานแถวด้วย attributes rowspan โดยจะใช้ส าหรับ
การผสานคอลัมน์ภายในแท็ก th และ td
เทคโนโลยีเว็บ (04-06-204)
51
เอกสารประกอบการสอน
![Page 52: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/52.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 52
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
![Page 53: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/53.jpg)
การแทรกรูปภาพขั้นสูง
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 54: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/54.jpg)
การแทรกรูปภาพขั้นสูง (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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:
![Page 55: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/55.jpg)
การแทรกรูปภาพขั้นสูง (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 56: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/56.jpg)
การแทรกฟอร์ม
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
56
Forms สร้างขึ้นมาให้ท างานร่วมกับ buttons, input fields และ drop-down menus โดยผ่านทางแท็ก
<form>...</form>
ในฟอร์มสามารถบรรจุข้อมูล และแท็กอื่นๆ
สามารถระบุรูปแบบการควบคุมใน text entry fields, buttons และอื่นๆ
![Page 57: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/57.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 57 ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
![Page 58: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/58.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 58
![Page 59: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/59.jpg)
การแทรกฟอร์ม (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
59
action attribute เป็นการเรียกไฟล์หรือสคริปต ์(URL) ของแอพพลิเคชันที่ใช้ในการประมวลผลข้อมูลจากแท๊ก form
method attribute เป็นการระบุวิธีการส่งข้อมูลไปยัง server POST การส่งข้อมูลจะแยกออกจาก Header
GET การส่งข้อมูลจะส่งไปพร้อมกับ URLs
![Page 60: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/60.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 60
username = Sally Strongarm email = [email protected]
username=Sally%20Strongarm&email=strongarm%40example.com
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
GET
POST
username=Sally%20Strongarm&email=strongarm%40example.com
![Page 61: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/61.jpg)
การควบคุมของฟอร์ม
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)
เทคโนโลยีเว็บ (04-06-204)
61
เอกสารประกอบการสอน
![Page 62: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/62.jpg)
การควบคุมของฟอร์ม (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
62
ประกอบด้วย attributes ดังนี ้ - name - value - id - maxlength
![Page 63: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/63.jpg)
การควบคุมของฟอร์ม (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
63
![Page 64: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/64.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 64
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
![Page 65: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/65.jpg)
การควบคุมของฟอร์ม (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
65
Password entry field เป็นการระบุค่าส าหรับ attribute type ภายใต้แท็ก input
ที่มา: Jennifer Niederst Robbins, Learning Web Design, 4th Edition, 2012.
![Page 66: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/66.jpg)
การควบคุมของฟอร์ม (ต่อ)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
66
Submit และ reset buttons
![Page 67: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/67.jpg)
การแทรกแท็ก Div
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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>
![Page 68: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/68.jpg)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน 68
![Page 69: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/69.jpg)
ประสิทธิภาพเว็บไซต ์
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
69
ปรับไฟล์ภาพหรือกราฟิกให้เหมาะสม โดยคงความละเอียดของภาพไว ้
ปรับเอกสาร HTML และ CSS ลบช่องว่างของอักขระพิเศษและ Line return
ใช้จาวาสคริปต์เท่าที่จ าเป็น
เพิ่มสคริปต์ส าหรับการโหลดข้อมูลแบบขนาน ร่วมกับหน้าเพจอื่นๆ
ไม่โหลดข้อมูลที่ไม่จ าเป็นอื่นๆ เช่น images, scripts หรือ JavaScript libraries
ลดจ านวนครั้งที่บราวเซอร์ร้องขอข้อมูลจากเซิร์ฟเวอร์ เพื่อลดเวลาในการเข้าถึงข้อมูลจากเว็บไซต ์
![Page 70: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/70.jpg)
สรุป (Summary)
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
70
อธิบายการรูปแบบการใช้งานแท็กหรือ element ในเอกสาร HTML และการประยุกต์ใชใ้นขั้นสูง
โครงสร้างเอกสาร HTML
ประสิทธิภาพเว็บไซต์ แนวทางและการปรับปรุงในการพัฒนาให้สามารถตอบสนองผู้ใช้งานอย่างไรให้ดีที่สุด
![Page 71: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/71.jpg)
แบบฝึกปฏิบัต ิ
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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
![Page 72: วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204 · HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using](https://reader033.vdocuments.site/reader033/viewer/2022050607/5fae8655542199033109a9ca/html5/thumbnails/72.jpg)
เอกสารอ้างอิง
เทคโนโลยีเว็บ (04-06-204) เอกสารประกอบการสอน
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.