Embed Size (px)
Citation preview
HTML
2. ค ำสัง่ในกำรจดัตวัอกัษร
ปรบัปรุงโดย อ. กิตติพิชญ ์คุปตะวาณิช
และ อ. สิทธิโชค ทรพัยไ์พบูลยกิ์จ
HTML Text Formatting (Revisited)
<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>
<p>
</p>
204202: Information Technology II 2
HTML Formatting
More HTML Text Formatting Tags
204202: Information Technology II
Tag Description
<small> ส ำหรบั text ขนำดเลก็ (smaller)
<ins> ส ำหรบั text ท่ีแทรกมำ (inserted)
<del> ส ำหรบั text ท่ีถกูลบ (deleted)
<mark> ส ำหรบั text ท่ีถกู highlight (marked)
3
This is small text.
This is inserted text.
This is deleted text.
This is marked text.
HTML Formatting [2]
This is <small>small</small> text.<br>
This is <ins>inserted</ins> text.
<br>
This is <del>deleted</del> text.
<br>
This is <mark>marked</mark> text.
<p>
</p>
204202: Information Technology II 4
HTML Formatting [3]
HTML "Computer Output" Tags
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
204202: Information Technology II 5
HTML Formatting [4]
HTML Citations, Quotations, and Definition
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
visit http://www.w3schools.com/html/html_formatting.asp for the complete list
204202: Information Technology II 6
HTML Styles - CSS7
204202: Information Technology II
HTML Styles - CSS
What is CSS?
CSS ยอ่มำจำก Cascading
Style Sheet
ใชเ้พื่อก ำหนดรปูแบบกำร
แสดงผล (Style) ของ
HTML element
CSS ถกูสรำ้งมำเพื่อแยก
รปูแบบกำรแสดงผล (Style)
ออกจำกเน้ือหำ (Content)
8204202: Information Technology II
HTML - Adding CSS (1)
กำรก ำหนด Style สำมำรถท ำได้ 3 วิธีคือ1. ก ำหนดแบบ Inline โดยระบเุป็น Attribute "style" ในแต่ละ
Element
<p style="color:blue;margin-left:20px;">Some text</p>
204202: Information Technology II 9
HTML - Adding CSS (2)
2. ก ำหนดแบบ Internal Style Sheet โดยกำรใช้ Tag <style> ในส่วน <head> ของเอกสำร HTML
** Tag <p> ทกุตวัในเอกสำร HTML น้ีจะได้รบัผลจำก style ท่ีก ำหนดไว้
204202: Information Technology II 10
<head>d><style type="text/css">body {background-color:yellow;}p {color:blue;}
</style><</head>ead>
HTML - Adding CSS (3)
3. ก ำหนดแบบ External Style Sheet ลงในไฟลเ์อกสำร CSS แยกต่ำงหำก (CSS File) และเรียกใช้ ไฟล ์CSS นัน้ โดยกำรใช้ Tag <link>
Attributes ของ <link>rel = relation, type = type of file, href= Hypertext Reference
204202: Information Technology II 11
visit http://www.w3schools.com/css for CSS tutorials
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML Style Example
Example 1: Background Colorbackground-color ก ำหนดสีของพืน้หลงั ซ่ึงสำมำรถก ำหนดสีโดยใช้ ช่ือสี (Color Names)
เช่น Black, Red, LightSkyBlue - ช่ือสีจะไม่มี space (วรรค)สำมำรถด ูlist ช่ือสีเพ่ิมเติมได้ท่ี
http://www.w3schools.com/html/html_colornames.asp ค่ำRGB (Red Green Blue) โดยใช้รปูแบบเลขฐำน 16 #xxxxxx หรือ rgb(r,g,b)
เช่น #000000 = Black, rgb(255,0,0) = Red, #87CEFA = LightSkyBlueสำมำรถด ูlist ค่ำ RGB เพ่ิมเติมได้ท่ี
http://www.w3schools.com/html/html_colorvalues.asp 12
HTML Style Example [2]
Example 1: Background Color [2]
<!DOCTYPE html><html><body>
<h1 style="background-color:green;">A heading</h1><p style="background-color:chocolate">A paragraph.
</p></body>
</html>
204202: Information Technology II 13
HTML Style Example [3]
Example 2: Font, Color and Sizefont-family ก ำหนดช่ือ font color ก ำหนดสีของตวัอกัษรsize ก ำหนดขนำดของตวัอกัษร<!DOCTYPE html><html><body>
<h1 style="font-family:verdana;">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.
</p></body>
</html> 204202: Information Technology II 14
HTML Style Example [4]
Example 3: Border (เส้นขอบ)border-style ก ำหนดแบบเส้นขอบ none คือไม่มีขอบ
204202: Information Technology II 15
HTML Style Example [5]
Example 3: Border (เส้นขอบ) [2]border-width ก ำหนดควำมหนำของเส้นขอบborder-color ก ำหนดสีของเส้นขอบ<!DOCTYPE html><html><body><p style="border-width:5px;border-style:solid;border-color:red;">
A paragraph.</p>
</body></html>
204202: Information Technology II 16
HTML Style Example [6]
Example 3: Border (เส้นขอบ) [3]เรำสำมำรถก ำหนดเส้นขอบอย่ำงย่อได้โดยใช้ล ำดบั: ควำมหนำ, ชนิดของขอบ และสี
<p style="border-width:5px;border-style:solid;border-color:red;">
<p style="border: 5px solid red;">
border-radius ก ำหนดเส้นขอบแบบมมุโค้งใช้ได้กบั IE9+, Firefox 4+, Chrome, Safari 5+, และ Opera.
<p style="border: 5px solid orange;border-radius:7px">
17
visit http://www.w3schools.com/cssref/default.asp for CSS references
HTML Entities18
204202: Information Technology II
HTML Entities
ในเอกสำร HTML อกัขระบำงตวั เป็นอกัขระพิเศษท่ีถกูสงวนไว้เพ่ือจดุประสงคต่์ำงๆ เช่นเคร่ืองหมำยน้อยกว่ำ ( < ) และมำกกว่ำ ( > )เป็นอกัขระพิเศษท่ีใช้เพ่ือแสดง tag
204202: Information Technology II 19
HTML Entities
หำกต้องกำรแสดงอกัขระพิเศษในเน้ือหำของเอกสำรสำมำรถท ำได้โดยกำรใส่รหสัพิเศษ (HTML Entities) ซ่ึงมี 2 รปูแบบคือ
1. &entity_name;2. &#entity_number;
204202: Information Technology II 20
HTML entity ท่ีพบบอ่ย
HTML Entities [2]
Result Description Entity Name Entity Number
non-breaking space
 
< less than < <
> greater than > >
& ampersand & &
§ section § §
© copyright © ©
® registered trademark
® ®
™ trademark ™ ™
http://www.ascii.cl/htmlcodes.htm 21
visit http://www.w3.org/TR/html4/sgml/entities.html for HTML Entity Reference
Non-Standard Element Example
<marquee> เป็น tag ท่ีสรำ้งขึน้โดย Microsoft และเร่ิมใช้ใน Internet Explorer version ต้นๆ ท่ีออกมำ โดยใช้เพื่อกำรท ำให้ตวัอกัษรเล่ือน (scroll) ในทิศทำงต่ำงๆ กนั
<blink> เป็น tag ท่ีสรำ้งขึน้โดย Netscape Navigator ใช้เพื่อกำรท ำให้ตวัอกัษรกระพริบ (blink)
W3C ไม่แนะน ำให้ใช้ Tag ทัง้สอง Tag น้ี
204202: Information Technology II 22
W3C HTML Validator
World Wide Web Consortium (W3C) มีบริกำรเพ่ือกำรตรวจสอบเอกสำร (Markup Validation Service) ว่ำถกูต้องตำมมำตรฐำนหรอืไม่ โดยสำมำรถตรวจสอบได้โดยกำร upload เอกสำร HTML/XHTML หรือ กรอก URL (Web address) ของ webpage ท่ีต้องกำรตรวจสอบท่ี
http://validator.w3.org/
204202: Information Technology II 23
References
W3C HTML Tutorial Wiki http://www.w3.org/community/webed/wiki/HTML
W3C HTML 4.01 Specification http://www.w3.org/TR/REC-html40/
W3C CSS Specifications http://www.w3.org/Style/CSS/specs.en.html
W3C CSS: Articles and tutorials http://www.w3.org/Style/CSS/learning.en.html
204202: Information Technology II 24
