Embed Size (px)
DESCRIPTION
ทส 215 การเขียนโปรแกรมบนเว็บ 1. HTML & CSS. อาจารย์อรรถวิท ชังคมานนท์ สาขาวิชาเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ www.itsci.mju.ac.th. Basic HTML. Tags & Elements Text Formatting Hyperlinks Images Tables Layer. Tags vs. Elements. - PowerPoint PPT Presentation
Citation preview
ทสทส215215 การเขียนโปรแกรมบนเว็�บ การเขียนโปรแกรมบนเว็�บ 11
อาจารย�อรรถว็�ท ชั�งคมานนท�สาขีาว็�ชัาเทคโนโลยสารสนเทศ
คณะว็�ทยาศาสตร�www.itsci.mju.ac.th
HTML & CSS
Basic HTMLBasic HTML
Tags & Elements Text Formatting Hyperlinks Images Tables Layer
Tags vs. ElementsTags vs. Elements
HTML เป็�นกลุ่��มของ tags ซึ่��งระบุ�โครงสร�างแลุ่ะเน��อหาชน�ดต่�าง ๆ tags จะอยู่#�ในส%ญลุ่%กษณ์)น*� < >
• <img src="image.gif" /> ส�วนใหญ�จะต่�องม* tag เป็,ด แลุ่ะ ป็,ดท้�ายู่
• <title> and </title>
HTML element is an object enclosed by a pair of tags <title>My Home Page</title> ค�อ TITLE element <b>This text appears bold.</b> ค�อ BOLD
element <p>Part of this text is <b>bold</b>.</p> ค�อ a
PARAGRAPH element that contains a BOLD element
<HTML>...</HTML> เป็�น tag หลุ่%กในท้�กๆ ไฟลุ่) html เพื่��อบุ�งบุอกถึ�งป็ระเภท้ ของไฟลุ่) แลุ่ะท้�กๆ tag จะต่�องอยู่#�ภายู่ใน <html>…</html>
<HEAD>...</HEAD> ใช�ก3าหนดห%วข�อเอกสารเพื่��อให�ผู้#�ใช�ท้ราบุว�า ณ์ ขณ์ะน*�อยู่#�ใน หน�าเว5บุไหน แลุ่ะ ลุ่%กษณ์ะต่�าง ๆ ของเว5บุเพื่จน%�น ๆ ซึ่��งใช�ก%บุ <TITLE>...</TITLE>
<TITLE>...</TITLE> ใช�แสดงข�อความในส�วนของ Title bar ของว�นโดวส) <BODY>...</BODY> ใช�เพื่��อก3าหนดเน��อหาแลุ่ะ tag อ��น ๆ บุนหน�าเว5บุซึ่��งท้�ก ๆ
tag จะต่�องอยู่#�ภายู่ใน <body>…</body> เสมอ
พื้#$นฐานการเขียน พื้#$นฐานการเขียน HTMLHTML
Structural elementsStructural elements
ไฟลุ่) HTML ป็ระกอบุด�วยู่ 2 ส�วนหลุ่%ก ๆ ได�แก� HEAD ป็ระกอบุด�วยู่ setup information ส3าหร%บุ browser แลุ่ะ Web
page BODY ป็ระกอบุด�วยู่ content ต่�าง ๆ ท้*�จะแสดงใน Web page
<html><head> <title>Title for Page</title></head><body> Text that appears in the page</body></html>
<HTML> <HEAD> <TITLE>Test Page</TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FF0000"> **-- เราก3าหนด ฉากหลุ่%ง เป็�นส*ด3า ต่%วหน%งส�อ ส*แดง--** </BODY></HTML>
ExampleExample
TEXT ก3าหนดส*ของต่%วอ%กษรท้%�งหมดภายู่ในเว5บุเพื่จ BGCOLOR ก3าหนดส*พื่��นหลุ่%งของเว5บุเพื่จ
<BODY BGCOLOR="#000000"> เช�น ก3าหนดเป็�นส*ขาว LINK ก3าหนดส*ของ Link ALINK ก3าหนดส*ของ Link ขณ์ะท้*�ถึ#กคลุ่�ก VLINK ก3าหนดส*ของ Link เม��อเคยู่ถึ#กคลุ่�กไป็แลุ่�ว
Properties in <BODY>Properties in <BODY>
ExampleExample
<HTML> <HEAD> <TITLE>Test BODY Page </TITLE> </HEAD> <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINKS="#0000CC" VLINK="#0000CC" > ** ก3าหนด Font เป็�นส*ขาว ** ฉากหลุ่%งเป็�นส*ด3า **ลุ่�งค)เป็�นส*น3�าเง�น** </BODY> </HTML>
Text layoutText layout
- ระหว�าง BODY ม*ได�หลุ่ายู่บุรรท้%ด- text layout แลุ่ะ spacing จะ
ไม�ม*ผู้ลุ่ก%บุ browser- browser จะจ%ดข�อความต่ามขนาดของหน�าเว5บุโดยู่อ%ต่โนม%ต่�
<html><head> <title>Title for Page</title></head><body> This is a whole lot of text that goes on and on and on and on . .</body></html>
Overriding default layoutsOverriding default layouts
- ข�อความจะช�ดซึ่�ายู่โดยู่อ%ต่โนม%ต่�- <br/> เป็�นการ Enter- <p>…</p> การเพื่��มยู่�อหน�าใหม�- เป็�นการเคาะช�องว�าง
<html><head> <title>Title for Page</title></head><body> <p> This is a paragraph of text<br/> made up of two lines. </p> <p> This is another paragraph with a GAP between some of the words. </p> <p> This paragraph is<br/> indented on the first line<br/> but not on subsequent lines. </p></body></html>
Separating blocks of textSeparating blocks of text
<h1>…</h1> tags สร�างlarge, bold heading
<h2>…</h2> tags สร�างslightly smaller heading
<h6>…</h6> tags สร�างtiny heading
<hr/> วาดเส�นแบุ�งหน�าจอ <hr width="50%" /> sets
width <hr size=10 /> sets
thickness
<html><head> <title>Title for Page</title></head><body> <h1>Major heading 1</h1> <p>Here is some text.</p> <h2>Subheading</h2> <p>Here is some subtext.</p> <hr/> <h1>Major heading 2</h1> <p>Here is some more text.</p></body></html>
Aligning textAligning text
<html><head> <title>Title for Page</title></head><body> <h1 style="text-align:center">Centered Heading</h1> <p>Here is some left-justified text (which is the default in HTML).</p> <p style="text-align:center"> Here is some centered text. </p> <div style="text-align:right"> <h2>Right-justified Heading</h2> <p>Here is some right-justified text.</p> </div></body></html>
Text stylesText styles
<html><head> <title>Title for Page</title></head><body> <p>Text can be emphasized using <b>bold</b>, <i>italics</i>, or even <big>resizing</big>. <br/> <u>Underlining</u> text is not generally recommended since it looks too much a like a hyperlink. <br/> The typewriter font is good for displaying code: <small><tt>sum = sum + i;</tt></small> </p></body></html>
More text stylesMore text styles
<html><head> <title>Title for Page</title></head><body> <p><span style="color:red">Subscripts</span> (e.g., x<sub>1</sub>) and <span style="color:blue">superscripts </span> (e.g., 2<sup>10</sup>) can be embedded directly in text. </p> <p> In order to avoid affecting line spacing, usually it should be made smaller (e.g., <small>2<sup>10</sup></small>). </p></body></html>
FontFont
<FONT>...</FONT> ส3าหร%บุค3าส% �ง font น*�จะใช�ก3าหนดช��อ ขนาด แลุ่ะลุ่%กษณ์ะต่�าง ๆของต่%วอ%กษร
สามารถึก3าหนดชน�ดของต่%วอ%กษร เช�น• ต่%วหนา <B>...</B>
• ต่%วเอ*ยู่ง <I>...</I>
• ข*ดเส�นใต่� <U>....</U>
• ส*ของต่%วอ%กษร
ExampleExample
<HTML> <HEAD><TITLE>Test Font </TITLE> </HEAD><BODY BGCOLOR="#FFFFFF">
<FONT> font ขนาดป็กต่�</FONT><BR><FONT SIZE=1> font size=1</FONT>
** ต่%วหน%งส�อภายู่ใน Tags น*�จะเป็ลุ่*�ยู่นไป็ต่ามขนาดท้*�เราเลุ่�อก** <FONT SIZE=2> font size=2</FONT><BR> <FONT SIZE=3> font size=3</FONT><BR> <FONT SIZE=4><B> font size=4 ต่%วหนา<B> </FONT><BR><FONT SIZE=4><I> font size=4 ต่%วเอ*ยู่ง</I></FONT><BR> <FONT SIZE=4><U> font size=4 ต่%วข*ดเส�นใต่�</U></FONT><BR><FONT SIZE=5> font size=5</FONT><BR> <FONT SIZE=6> font size=6</FONT><BR> <FONT SIZE=7> font size=7</FONT><BR>
<FONT SIZE=7 COLOR="BLUE"> font size=7 ต่%วหน%งส�อส*น3�าเง�น </FONT></BODY></HTML>
ListsLists
<html><head> <title>Title for Page</title></head><body> <p> <ol> <li>First thing. <li>Second thing. <li>Third thing. </ol> </p> <p> <dl> <dt>HTML <dd>HyperText Markup Language <dt>HTTP <dd>HyperText Transfer Protocol </dl> </p></body></html>
HyperlinksHyperlinks
<html><head> <title>Title for Page</title></head><body> <p> <a href="http://www.itsci.mju.ac.th"> Information Technology of MAEJO</a> <br> <a href="page09.html" target="_blank"> Open page09 in a new window</a> </p></body></html>
Hyperlinks (cont.)Hyperlinks (cont.)
<html><head> <title>Title for Page</title></head><body> <p align="center"> [<a href="#HTML">HTML</a>|<a href="#HTTP">HTTP</a> |<a href="#IP">IP</a> |<a href="#TCP">TCP</a> ] </p> <p>Computer acronyms: <dl> <a name="HTML"></a><dt>HTML <dd>HyperText Markup Language <a name="HTTP"></a><dt>HTTP <dd>HyperText Transfer Protocol <a name="IP"></a><dt>IP <dd>Internet Protocol <a name="TCP"></a><dt>TCP <dd>Transfer Control Protocol </p></body></html>
ImagesImages
can include images using IMG โดยู่ท้%�วไป็ browsers สามารถึแสดงผู้ลุ่ GIF แลุ่ะ JPEG files ร#ป็แบุบุอ��น ๆ ต่�องอาศั%ยู่ plug-in applications ส3าหร%บุการแสดงผู้ลุ่ <img src="filename" alt="alternate text" />
<html><head> <title>Title for Page</title></head><body> <div style="text-align:center"> <img src=“images/itmju.gif" alt=“it mju" /> <p>it mju</p> </div></body></html>
TablesTables
table จ%ดการข�อม#ลุ่ rows แลุ่ะ columns โดยู่ท้%�วไป็ column จะอยู่#�ช�ดขอบุซึ่�ายู่
<html><head> <title>Title for Page</title></head><body> <table> <tr> <td>foo</td> <td>bar</td> </tr> <tr> <td>bizbaz</td> <td>booboo</td> </tr> </table></body></html>
Layout in a tableLayout in a table
<html><head> <title>Title for Page</title></head><body> <table border=1> <tr align="center"> <td>foo<br>foo</td> <td valign="top">bar</td> </tr> <tr> <td>bizbaz</td> <td>booboo</td> </tr> </table></body></html>
Table widthTable width
<html><head> <title>Title for Page</title></head><body> <table width="100%"> <tr> <td>left-most </td> <td align="right">right-most</td> </tr></table></body></html>
Other table optionsOther table options
<html><head> <title>Title for Page</title></head><body> <table border=1 cellspacing=4 cellpadding=8> <tr> <th>HEAD1</th> <th>HEAD2</th> <th>HEAD3</th> </tr> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> <tr> <td rowspan=2 align="center"> four </td> <td colspan=2 align="center"> five </td> </tr> <tr> <td> six </td> <td> seven </td> </tr></table></body></html>
Layer : DIVLayer : DIV
<html><head>
<title>Title for Page</title></head><body>
<div style="position:absolute; left:50px; top:50px; width:100px; height:100px; z-index:1;" >
Text In Layer Here</div>
</body></html>
style=“display: inline;” = แสดงข�อม#ลุ่ให�ป็รากฏstyle=“display: none;” = ซึ่�อน/ไม�แสดงข�อม#ลุ่
XHTML 1.0 Strict XHTML 1.0 Strict
<!DOCTYPE html PUBLIC -" //W3C//DTD XHTML 1.0 Strict//EN ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
การใช�หน�าเว5บุแบุบุ XHTML 1.0 Strict น*� เหมาะสมจะใช�เม��อค�ณ์ม%�นใจว�า หน�าเว5บุท้*�เข*ยู่นน%�น ลุ่�วนแลุ่�วแต่�เป็�นโครงสร�างภาษาแบุบุ XHTML ท้%�งส��น แลุ่ะอน�ญาต่ให�ต่กแต่�งหน�าเว5บุด�วยู่ CSS เท้�าน%�น
ไม�สามารถึเข*ยู่น <body bgcolor=black></body> ได�
XHTML 1.1XHTML 1.1
<!DOCTYPE html PUBLIC -" //W3C//DTD XHTML 1.1//EN ""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ลุ่%กษณ์ะการใช� คลุ่�ายู่ก%นก%บุ XHTML 1.0 Strict ค�อใช� XHTML ค#�ก%บุ CSSแต่�ควรใช�เม��อต่�องการ เข*ยู่นโครงสร�างเว5บุแบุบุ ใหม�ท้%�งหมด (XML)
XHTML 1.0 Transitional XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC -" //W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
แบุบุน*� อน�ญาต่ให�เราใช� HTML 4.0 ร�วมได� สามารถึเร*ยู่กใช�ท้%�ง CSS ก%บุ XHTML เช�น <body bgcolor=red></body>หร�อ เข*ยู่นแบุบุใช� css - <body style=”background color: red;”>
ข�อด*ของ XHTML 1.0 Transitional ค�อการท้*�จะช�วยู่ให� บุราวเซึ่อร) เก�าๆ โดยู่เฉพื่าะ IE6 น%�นสามารถึ เข�าใจภาษา ได�ใกลุ่�เค*ยู่งก%น แลุ่ะ เอาไป็ใช�ในกรณ์*ท้*�XHTML บุาง tag ไม�สามารถึใช�ก%บุ บุราวเซึ่อร)เก�าๆ ได�
XHTML 1.0 FramesetXHTML 1.0 Frameset
ใช�ก%บุเฟรม(Fram ) กรณ์*เอาหน�าเว5บุมาแบุบุ เฟรม
Meta ElementMeta Element
ใช�ก3าหนดค�ณ์สมบุ%ต่�ให�เว5บุเพื่จ เช�น ก3าหนดค3าส3าค%ญส3าหร%บุ search engine หร�อเพื่��มเต่�ม ข�อความต่อบุร%บุจาก HTTP (HTTP response header ) เพื่��อเป็�นป็ระโยู่ชน)ต่�อการท้3างานของเว5บุเบุราเซึ่อร) เช�น การ refresh หน�าเว5บุเพื่จ หร�อการก3าหนดช�ดต่%วอ%กษร เป็�นต่�น Meta Element ม* 2 ร#ป็แบุบุ ค�อ
META NAME -META HTTP EQUIV
META NAMEMETA NAME
ใช�ส3าหร%บุก3าหนดค3าค�น, รายู่ลุ่ะเอ*ยู่ด ส3าหร%บุ search engine ม*ร#ป็แบุบุค3าส%�งแลุ่ะ attribute value ของ name หลุ่%กๆ 3 value ค�อ
<META NAME="…" CONTENT="…">
NAME = “keywords” หร�อ “Description” หร�อ “Robots” Content= ”ข�อความของ keyword” ”ข�อความของ Description”
”ค3าส%�งส3าหร%บุ Robot ใน search engine”
ExampleExample
<META NAME="Keywords "CONTENT="keyword1,keyword2,keyword3">บุรรยู่ายู่เว5บุไซึ่ต่) ด�วยู่ค3าส3าค%ญ
<META NAME="Description " CONTENT="Describe your site in a single phrase no exceeding 20 words">
บุรรยู่ายู่เว5บุไซึ่ต่) ด�วยู่ป็ระโยู่คสร�ป็
<META NAME="robots " CONTENT="index,follow">ค3าส%�งส3าหร%บุ search engine ให�ท้3าการ index หน�าป็=จจ�บุ%น แลุ่ะท้�กหน�าท้*�หน�าป็=จจ�บุ%น link ไป็
<META NAME="robots " CONTENT="noindex,nofollow,noarchive">ค3าส%�งส3าหร%บุ search engine ไม�ให�ท้3าการ index หน�าป็=จจ�บุ%น แลุ่ะท้�กหน�าท้*�หน�าป็=จจ�บุ%น link ไป็ รวมถึ�งไม�ให�เก5บุข�อม#ลุ่ใน cache ของ search engine ด�วยู่
META HTTPMETA HTTP--EQUIVEQUIV
ใช�ส3าหร%บุก3าหนดช�ดของต่%วอ%กษรท้*�ใช� หร�อส3าหร%บุส%�ง refresh หน�าเว5บุเพื่จหร�อ ให�ไป็ท้*� web site หร�อไฟลุ่)ท้*�ก3าหนด ต่ามเวลุ่าท้*�ก3าหนด (delay เป็�นว�นาท้*)ม*ค3าส% �งแลุ่ะ attribute value ท้*�ใช�มาก
<META HTTP-EQUIV="… " CONTENT="…">
HTTP-EQUIV = “Content-Type” หร�อ “Refresh”Content = “ค3าส%�ง 1 ; ค3าส%�ง 2 ; ค3าส%�ง 3”
ExampleExample
<meta http-equiv="Content-Type " content="text/html; charset=iso-8859-1">character set ช�ดต่%วอ%กษร ส3าหร%บุการแสดงผู้ลุ่ต่%วอ%กษร Western
-<meta http equiv=" -Content Type " content="text/html; charset=UTF-8">
-<meta http equiv=" -Content Type -" content="text/html; charset=Windows874">
-<meta http equiv=" -Content Type -" content="text/html; charset=TIS 6 20">character set ช�ดต่%วอ%กษร ส3าหร%บุการแสดงผู้ลุ่ในภาษาไท้ยู่ ไม�ควรเว�นวรรค หร�อระบุ�เป็�นอยู่�างอ��นส3าหร%บุการสร�างเว5บุภาษาไท้ยู่
<meta http-equiv="refresh " content="10;URL='http://www.borland.com">ให� refresh หลุ่%ง 10 ว�นาท้* แลุ่�วไป็ท้*� www.borland.com
-<meta http equiv="refresh 180" content=" ">ให� refresh หน�าน*� เม��อครบุ 180 ว�นาท้*� (3 นาท้* ) อาจใช�ส3าหร%บุเว5บุท้*� update ข�อม#ลุ่บุ�อยู่ๆต่ลุ่อดเวลุ่า เช�น Chat room
What’s CSSWhat’s CSS
การก3าหนดร#ป็แบุบุท้*�เป็�นมาต่รฐานการแสดงผู้ลุ่ท้างหน�า web page ให�เป็�นไป็ต่ามร#ป็แบุบุท้*�ก3าหนด Font Color Size Width Height align …
ExternalExternal
Connection made via the LINK tag Use the optional TYPE attribute to specify a media type
type/css
<head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css” /></head>
Internal/EmbeddedInternal/Embedded
Style characteristics are embedded in the HEAD section of the webpage
Perhaps best used when a single page requires a unique style sheet
<head> <style type=“text/css”> hr { color: navy} body {margin-left: 20px} </style></head>
ImportedImported
Allows for using style sheets from other sources Must be included at the beginning of the style sheet using the
@import statement Other CSS rules can be included
@import url(form.css);@import url(board.css);
InlineInline
Least flexible Requires each element to be tagged if you want them to appear
differently Looses the advantage of using CSS
<p style=“color: yellow; font-family: verdana”> This is a paragraph</p>
<div style="position:absolute; left:50px; top:50px; width:100px; height:100px; z-index:1;" >
Text In Layer Here </div>
Using multiple sheetsUsing multiple sheets
You can use multiple sheets to define the style of your document Internal styles will override external styles, if they are duplicated
h3 {color: red; text-align: right; font-size: 8pt} (external CSS)h3 {text-align: center; font-size: 20pt} (internal CSS)
= h3 {color: red; text-align: center; font-size: 20pt }
Basic CSS SyntaxBasic CSS Syntax
Three parts: selector property value
selector {property: value}
p { text-align: center;
color: navy; font-family: arial }
} declaration
Basic CSS SyntaxBasic CSS Syntax
Selectors can be grouped so that a common property can be specified
<style type="text/css">h1,h2,h3,h4,h5,h6{ color: yellow }
</style>
<h1> This is a level 1 heading </h1><h2> This is a level 2 heading </h2>
CSS Syntax - classCSS Syntax - class
The class selector allows you to create different styles for the same HTML element.
<style type="text/css">p.right { text-align: right }p.center { text-align: center }
</style>
<p class=“right”>This paragraph will be right aligned.
</p>
CSS Syntax - classCSS Syntax - class
<style type="text/css">.center { text-align: center }
</style>
<h1 class=“center”>This heading will be centered
</h1>
<p class=“center”>So will this text
</p>
Background propertiesBackground properties
Basic syntax background background-color background-image background-repeat background-attachment background-position
Background propertiesBackground properties
All attributes can be set in a single declaration:
background: #000000 url(‘psumark.gif’) no-repeat fixed center
Background propertiesBackground properties
Setting the body background (internal CSS)
body { background: #000000 url(‘psumark.gif’) no-repeat fixed center }
Background propertiesBackground properties
Setting the body background (external CSS)
body: { background: #000000 url(‘psumark.gif’) no-repeat fixed center }
Text propertiesText properties
Commonly used attributes color direction text-align text-decoration text-indent
Text propertiesText properties
color sets the color of the text color can be represented by the
• color name (red), • rgb value (rgb(255,0,0)), • by a hexadecimal number (#ff0000)
Syntax body {color: #ff0000}
Text propertiesText properties
direction sets the direction of the text can be set as left to right (ltr) or right to left (rtl)
Syntax body {direction: rtl}
Text propertiesText properties
text-align aligns the text in an element possible values are left, right, center and justify
Syntax p {text-align: center}
Text propertiesText properties
text-decoration adds certain decoration elements to the text possible values are none, underline, overline, line-
through and blink
Syntax p {text-decoration: underline}
Text propertiesText properties
text-indent indents the first line of text inside an element possible values are length (defines a fixed value) and %
(defines a % of the parent element)
Syntax p {text-indent: 20px}
Font propertiesFont properties
font-style font-variant font-weight font-size/line-height font-family
Font propertiesFont properties
font-style Normal Italic oblique
Syntax: body {font-style: italic}
ExampleExample
<html ><head><style type="text/css"> p { color: red; background: yellow; }</style></head><body ><p>This is a paragraph</p><p>This is another longer paragraph</p></body></html>
Style definition
Content
TextText
p {font-family: Vivaldi, Helvetica, sans-serif;font-style: italic; font-weight: bold; font-size: 30px;text-decoration: underline;letter-spacing: 0.1em; word-spacing: 1em;
}
Defining your own style - a Defining your own style - a classclass
Instead of modifying existing elements like <p>.. Often useful to invent your own style Called a class Then in HTML say class=”....
In HTML..<p class=”bigHeading”> Big heading</p> <p class=”smallHeading”> Small heading</p>
Defining your own styleDefining your own style
body{ background: rgb(0,15,31);}.bigHeading{ color: rgb(0,200,255); background: rgb(0,31,63); font-size: 20px; font-weight: bold; text-indent: 10px;}.smallHeading{ color: rgb(0,150,200); background: rgb(0,31,63); font-size: 15px; text-indent: 10px;}
Reasons for Using CSSReasons for Using CSS
ไฟลุ่)แต่�ลุ่ะหน�าเลุ่5กลุ่งกว�าเด�ม เพื่ราะโค�ดน�อยู่กว�า ม*ความยู่�ดหยู่��นส#งในการป็ร%บุแต่�งแก�ไขในอนาคต่ สามารถึควบุค�มเว5บุหลุ่ายู่ๆ หน�าได�ด�วยู่ style sheet เพื่*ยู่งแค�ไฟลุ่)เด*ยู่ว สามารถึจ%ดการเลุ่ยู่)เอ�าท้)ได�อยู่�างลุ่ะเอ*ยู่ด แม�นยู่3า ง�ายู่ในการเร*ยู่กด# Source ใช�ด*ก%บุระบุบุเส�ร)ชเอ5นจ�น ซึ่��ง ระบุบุเส�ร)สเอ5นจ��นต่�างๆ
