HTML 2. ค ำสั่งในกำรจัดตัวอักษร · HTML "Computer Output" Tags Tag Description Defines computer code text Defines

HTML

2. ค ำสัง่ในกำรจดัตวัอกัษร

ปรบัปรุงโดย อ. กิตติพิชญ ์คุปตะวาณิช

และ อ. สิทธิโชค ทรพัยไ์พบูลยกิ์จ

HTML Text Formatting (Revisited)

This text is bold

This text is 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

This text is italic

This text is emphasized

<code>This is computer output</code>

This is subscript

This is superscript





204202: Information Technology II 2

HTML Formatting

More HTML Text Formatting Tags

204202: Information Technology II

Tag Description

 ส ำหรบั text ขนำดเลก็ (smaller)

<ins> ส ำหรบั text ท่ีแทรกมำ (inserted)

<del> ส ำหรบั text ท่ีถกูลบ (deleted)

 ส ำหรบั text ท่ีถกู highlight (marked)

3

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

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

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

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

This is small text.

This is inserted text.

This is deleted text.

This is marked text.

HTML Formatting [2]

This is small text. 

This is <ins>inserted</ins> text.

 

This is <del>deleted</del> text.

 

This is marked text.






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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

HTML Styles - CSS7


HTML Styles - CSS

What is CSS?

CSS ยอ่มำจำก Cascading

Style Sheet

ใชเ้พื่อก ำหนดรปูแบบกำร

แสดงผล (Style) ของ

HTML element

CSS ถกูสรำ้งมำเพื่อแยก

รปูแบบกำรแสดงผล (Style)

ออกจำกเน้ือหำ (Content)


HTML - Adding CSS (1)

กำรก ำหนด Style สำมำรถท ำได้ 3 วิธีคือ1. ก ำหนดแบบ Inline โดยระบเุป็น Attribute "style" ในแต่ละ

Element

Some text



2. ก ำหนดแบบ Internal Style Sheet โดยกำรใช้ Tag <style> ในส่วน <head> ของเอกสำร HTML

** Tag ทกุตวัในเอกสำร HTML น้ีจะได้รบัผลจำก style ท่ีก ำหนดไว้


<head>d><style type="text/css">body {background-color:yellow;}p {color:blue;}

</style><</head>ead>


3. ก ำหนดแบบ External Style Sheet ลงในไฟลเ์อกสำร CSS แยกต่ำงหำก (CSS File) และเรียกใช้ ไฟล ์CSS นัน้ โดยกำรใช้ Tag <link>

Attributes ของ <link>rel = relation, type = type of file, href= Hypertext Reference


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>A paragraph.

</body>

</html>



Example 2: Font, Color and Sizefont-family ก ำหนดช่ือ font color ก ำหนดสีของตวัอกัษรsize ก ำหนดขนำดของตวัอกัษร<!DOCTYPE html><html><body>

<h1 style="font-family:verdana;">A heading</h1>A paragraph.

</body>

</html> 204202: Information Technology II 14


Example 3: Border (เส้นขอบ)border-style ก ำหนดแบบเส้นขอบ none คือไม่มีขอบ



Example 3: Border (เส้นขอบ) [2]border-width ก ำหนดควำมหนำของเส้นขอบborder-color ก ำหนดสีของเส้นขอบ<!DOCTYPE html><html><body>

A paragraph.

</body></html>



Example 3: Border (เส้นขอบ) [3]เรำสำมำรถก ำหนดเส้นขอบอย่ำงย่อได้โดยใช้ล ำดบั: ควำมหนำ, ชนิดของขอบ และสี





border-radius ก ำหนดเส้นขอบแบบมมุโค้งใช้ได้กบั IE9+, Firefox 4+, Chrome, Safari 5+, และ Opera.



17

visit http://www.w3schools.com/cssref/default.asp for CSS references

HTML Entities18


HTML Entities

ในเอกสำร HTML อกัขระบำงตวั เป็นอกัขระพิเศษท่ีถกูสงวนไว้เพ่ือจดุประสงคต่์ำงๆ เช่นเคร่ืองหมำยน้อยกว่ำ ( < ) และมำกกว่ำ ( > )เป็นอกัขระพิเศษท่ีใช้เพ่ือแสดง tag


HTML Entities

หำกต้องกำรแสดงอกัขระพิเศษในเน้ือหำของเอกสำรสำมำรถท ำได้โดยกำรใส่รหสัพิเศษ (HTML Entities) ซ่ึงมี 2 รปูแบบคือ

1. &entity_name;2. &#entity_number;


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

http://www.ascii.cl/htmlcodes.htm

http://www.w3.org/TR/html4/sgml/entities.html

Non-Standard Element Example

<marquee> เป็น tag ท่ีสรำ้งขึน้โดย Microsoft และเร่ิมใช้ใน Internet Explorer version ต้นๆ ท่ีออกมำ โดยใช้เพื่อกำรท ำให้ตวัอกัษรเล่ือน (scroll) ในทิศทำงต่ำงๆ กนั

<blink> เป็น tag ท่ีสรำ้งขึน้โดย Netscape Navigator ใช้เพื่อกำรท ำให้ตวัอกัษรกระพริบ (blink)

W3C ไม่แนะน ำให้ใช้ Tag ทัง้สอง Tag น้ี


W3C HTML Validator

World Wide Web Consortium (W3C) มีบริกำรเพ่ือกำรตรวจสอบเอกสำร (Markup Validation Service) ว่ำถกูต้องตำมมำตรฐำนหรอืไม่ โดยสำมำรถตรวจสอบได้โดยกำร upload เอกสำร HTML/XHTML หรือ กรอก URL (Web address) ของ webpage ท่ีต้องกำรตรวจสอบท่ี

http://validator.w3.org/


http://validator.w3.org/

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

HTML 2. ค ำสั่งในกำรจัดตัวอักษร · HTML "Computer Output" Tags Tag Description Defines computer code text Defines

Documents