Downloaded 80 times
Web Standard
- 1. มาตรฐานการออกแบบ พัฒนาเว็บไซต
- 2. บุญเลิศ อรุณพิบูลย • นักวิชาการ1 • ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (STKS) • สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.) • ประวัติการทํางาน – ศูนยเทคโนโลยีอิเล็กทรอนิกสและคอมพิวเตอรแหงชาติ (เนคเทค) • เจาหนาที่ระบบคอมพิวเตอร 3 • หัวหนางานพัฒนาเนื้อหาสาระดิจิทัล • หัวหนางานวิชาการ, หัวหนางานเทคนิค – หนวยปฏิบัติการวิจัยและพัฒนาวิศวกรรมเทคโนโลยีซอฟตแวร – งานพัฒนาเนื้อหาสาระดิจิทัล – ศูนยฝกอบรมคอมพิวเตอรเนคเทค
- 3. มาตรฐานเว็บไซต • ดานเทคโนโลยี • ดานการใช •ดานการเขาถึง
- 4. มาตรฐานเว็บไซต รองรับ การเขาถึง สวย คนได เร็ว
- 5. ดานเทคโนโลยี • การแสดงผลบน • การนําเสนอดวย เบราวเซอร เสียงการนําเสนอ • ระบบปฏิบติการ ั ดวยวีดิทัศน • ความเร็วในการ • ความตองการ โอนถายขอมูล Plug-ins • ฮารดแวร
- 6. ดานการใช • ความสม่ําเสมอเกี่ยวกับขอความ และสื่อ ประกอบตางๆ • ความสม่ําเสมอในสวน Interface – Layout – Navigator – Icon & Symbol • ความสม่ําเสมอในการติดตอสื่อสาร
- 7. ดานการเขาถึง • การเขาถึงที่ไมจํากัดดวยความ แตกตางเรือง ่ –เวลา –สถานที่ –อุปกรณ –กายภาพของผูเขาชม
- 8. ความเขาใจผิดบางประการ • ควรทําหรือไม • สินเปลืองงบประมาณ ้ • เสียเวลา • ไมคมคา ุ Accessibility ไมไดเนนเฉพาะผูที่มีความบกพรองตางๆ เทานั้น แตหมายถึงโอกาสในการเขาถึงของทุกคน (All users)
- 9. Server & Client upload WindowsXP IE Windows2000 IE พัฒนาเว็บดวย HTML Editor, HTML Generator Server : Windows98 บน Unix/NT Netscape Windows Macintosh
- 10. Server & Client upload Text Browser คนพิการ พัฒนาเว็บดวย HTML Editor, HTML Generator Server : Unix/NT PDA บน Windows Mobile Phone
- 11. มาตรฐานที่เกี่ยวของ • มาตรฐานการตั้งชื่อไฟลและ Directory •มาตรฐานทางดานเนื้อหา • มาตรฐานทางดานรูปแบบการใชภาษา บนเว็บ • มาตรฐานทางดานเทคนิค • มาตรฐานการรักษาความปลอดภัย
- 12. การตั้งชื่อไฟลและ Directory • สื่อความหมาย-เขาใจตรงกัน • สั้นกระชับ • ไมเกิดความสับสน • ชวยให Search engine ใหคา ความสําคัญของเว็บไซตสงสุด ู หากคําสําคัญพบเปนชื่อไฟลและชื่อ Directory โดยตรง
- 13. การตั้งชื่อไฟลและ Directory • ภาษาอังกฤษ ผสมตัวเลข • ใชเครื่องหมายเฉพาะ – • ไมควรมีชองวาง • ไมควรยาวมากเกินไป
- 14. แบบอักษร (Fonts) • เลือกใชฟอนตมาตรฐาน – Tahoma – Tahoma, MS Sans Serif, Thonburi – ตระกูล NEW
- 15. Tahoma & MSSans Serif
- 16. ภาษาไทย กับการพัฒนา เว็บเพจ • ดานพัฒนาเว็บ – HTML Editor, Generator แสดงผลภาษาไทย ? – HTML Editor, Generator เขารหัสภาษาไทย ? • ดานเรียกดูเว็บ – ฟอนต ไมควรสรางภาระใหกบผูใชงาน ั – แสดงผลอักขระไดถูกตอง ทุก (เกือบทุก) platform
- 17.
- 18. กรณีศึกษา Macromedia Dreamweaver
- 19. กรณีศึกษา Macromedia Dreamweaver
- 20. Decoding ภาษาไทย ถูกตองหรือไม <meta http-equiv=“content-type” content=“text/html; charset=………..”>
- 21. TIS-620/Windows-874 • ประเทศไทยมีมาตรฐานอักขระซึ่งกําหนดโดย สํานักงาน มาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปวารหัส สมอ. แตรหัส สมอ. หรือที่มชอทางการวา มอก.620 หรือ TIS- ี ื่ 620 นี้ เปนมาตรฐานของประเทศไทย ซึ่งเมื่อนําไปใชบน เครือขายอินเทอรเน็ต ก็อาจเกิดความเขาใจไมตรงกันได ดังนันจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ. ที่ ้ Internet Assigned Numbers Authority (IANA) ซึ่งเปนผู ควบคุมมาตรฐานของเครือขายอินเทอรเน็ต และได ดําเนินการจดทะเบียนจนสําเร็จ เมื่อวันที่ 22 กันยายน 2541
- 22. TIS-620/Windows-874/UTF- 8 • windows-874 เปน character Set ที่ใชภายใน ระบบปฏิบัติการทีผลิตโดยบริษัท ไมโครซอฟต เทานัน ่ ้ ไมไดเปน character Set ที่ใชในการแลกเปลี่ยนขอมูล ระหวางเครื่อง – มีสวนขยายเพื่อการแสดงผล เชน bullet, smart quote, dash ฯลฯ • tis-620 เปน character Set ทีจดทะเบียนถูกตอง เปนทีรับรู ่ ่ กันทัวโลก ทุกระบบปฏิบัติการ (แมแตระบบปฏิบัตการของ ่ ิ ไมโครซอฟตเอง)
- 23. ฐานขอมูลกับภาษาไทย • ตองรู CharacterSet ของฐานขอมูล
- 24. Format • รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ • การเลือกรูปแบบที่เหมาะสมตอการนําเสนอ จะชวยใหภาพมีขนาด (File Size) เล็กลง โดยคงความคมชัดไวในระดับดี • เปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลได เปนอยางดี
- 25. เว็บกราฟก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced แบบ Progressive
- 26.
- 27. JPEG Quality & Progressive • ภาพฟอรแมต JPG คา Quality ไมควรต่า หรือสูงเกินไป ํ • กําหนดรูปแบบการแสดงผล เปนแบบ Progressive ดวย สําหรับภาพที่มีขนาดโต
- 28. GIF • Graphics InterlaceFile • จํานวนสีและความละเอียดของภาพไมสูงมาก นัก • ตองการพื้นแบบโปรงใส • ตองการแสดงผลแบบโครงรางกอน แลวคอย แสดงผลแบบละเอียด • ตองการนําเสนอภาพแบบภาพเคลื่อนไหว • สวนขยายคือ .gif
- 29. Bit depth drastically affects file size 8 bit 24 bit 8 bit 1 bit color gray color dithered scale 16 million 256 image colors 256 shades colors 64k of gray 1.55 MB 518k 518k
- 30.
- 31.
- 32. JPEG • Joint Photographer'sExperts Group • เหมาะสมกับการนําเสนอทั้งระบบสือมัลติมีเดีย และ ่ เว็บไซต • สามารถกําหนดขนาดของไฟลไดตามความ เหมาะสม (File Compression) • สามารถกําหนดคุณสมบัตการแสดงผลแบบหยาบ ิ แลวคอยๆ ละเอียดเมือเวลาผานไป ที่เรียกวา ่ คุณสมบัติ Progressive • สวนขยายของไฟลรูปแบบนี้คือ .jpg หรือ .jpeg
- 33. JPEG File Format JPEG- 60K JPEG - 19K Max Quality Low Quality
- 34. PNG • Portable NetworkGraphics • รูปแบบลาสุดในการนําเสนอภาพผานเครือขาย อินเทอรเน็ต • สามารถแสดงผลไดในระบบสีเต็มพิกัด (True Color), มีขนาดไฟลเล็ก และควบคุมคุณภาพได ตามที่ตองการ มีการกําหนดใหพื้นภาพเปนพืน ้ โปรงใสได (Transparent) รวมทั้งการแสดงผล แบบหยาบสูละเอียด (Interlaced) • สวนขยายของไฟลรูปแบบนี้คือ .png
- 35.
- 36.
- 37. TIFF • Tagged-Image FileFormat • รูปแบบทีใชเก็บภาพพรอมรายละเอียดตางๆ เชน เล ่ เยอร (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบ อื่นๆ ตามตนฉบับเดิมของภาพ • เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพ สําหรับใชประกอบการสรางสื่อสิ่งพิมพ • สวนขยายของไฟลรูปแบบนี้คอ .tif ื
- 38. สรุปการเลือกใชฟอรแมต ภาพ • ไฟลสกุล GIF (Graphics Interlace File) – ภาพทีไมตองการความคมชัดมากนัก สีไมมาก ่ – มีลักษณะพื้นโปรงใส • ไฟลสกุล JPG (Joint Photographer’s Experts Group) – ภาพทีตองการความคมชัดสูง มีสีมาก ่ • ไฟลสกุล PNG (Portable Network Graphics) – ภาพทีตองการความคมชัดสูง มีสีมากทําพืนโปรงใสได ่ ้
- 39.
- 40.
- 41.
- 42. Color Mode • Acolor mode determines the color model used to display and print images. • Common models include – RGB (red, green, blue) – CMYK (cyan, magenta, yellow, black) –…
- 43. RGB model • RGBmodel used for lighting, video, and monitors • So, computer’s monitor only has 3 colors Red Green Blue
- 44. CMYK model • TheCMYK model is based on the light- absorbing quality of ink printed on paper.
- 45. ลักษณะของหนาเว็บที่ เหมาะสม • หนาเว็บที่เหมาะสม ไมมขอกําหนดที่ชดเจน ี ั ควรคํานึงถึง – กลุมเปาหมาย (Personal/Business) – ลักษณะของคอมพิวเตอรทกลุมเปาหมายใช (Screen ี่ Area ของจอภาพ) • Screen Area ที่เหมาะสมในปจจุบัน คือ 1024 x 768 pixels • Web Area ทีเหมาะสมคือ ่ – ความยาวไมเกิน 980 pixel – ความสูงไมมีขอกําหนดตายตัว แตสวน Header ของเว็บ ไมควรเกินครึ่งหนึ่งของพื้นทีที่เหลือ ่
- 46.
- 48. ลักษณะของหนาเว็บที่ Screen Area 600pixel เหมาะสม Web Area 980 pixel web Area
- 49. Template & Layout Design TITLE Menu History Duty Project
- 50. Template & Layout Design TITLE History Duty Project
- 51. Template & Layout Design TITLE History Duty Project
- 52. Template & Layout Design TITLE History Duty Project
- 54. Metadata • Data aboutdata • Subject Metadata • ขอมูลแสดงคุณสมบัติของ • Title Metadata ไฟล หรือวัตถุตางๆ • Category Metadata • Keyword Metadata • แสดงขอมูลสรุปเกี่ยวกับ • Author Metadata รายละเอียดของไฟล • Description Metadata • แสดงลิขสิทธิ์ความเปน • Publisher Metadata เจาของ • Resource Metadata • แยกกลุมไดตามประเภท ของไฟลหรือวัตถุ
- 56. บัตรรายการหนังสือ 613 สาทิศ อินทรกําแหง ส762ชชีวจิต : การใชชีวิตอยางเขาใจธรรมชาติ/ สาทิศ อินทรกําแหง. –พิมพครั้งที่ 10.– กรุงเทพฯ: คลินิกบานและสวน, 2541. 130 หนา ; 21 ซม. ISBN 974-8368-42-4 1. สุขศาสตร. 2. อาหารธรรมชาติ. 3. ชื่อเรื่อง.
- 57. การกําหนดคุณสมบัติของ เอกสาร • MS – Office – File, Properties.. • OpenOffice.org – File, Properties… • Acrobat Professional – File, Document Properties…
- 58. ประโยชนของ Metadata • เพิ่มประสิทธิภาพการสืบคนเอกสาร •เปนขอมูลใหกับ Search Engine ตางๆ • การเผยแพรในระบบอินเทอรเน็ต เปนไป อยางรวดเร็ว
- 59. Web Metadata • WebTitle • Meta Tag • URL :Uniform – Description Resource Locator • เนื้อหา 1 – 2 Kb ของ เอกสารเว็บ • H1, H2, H3 Tag – Authors • Contents – Keyword • Alternate Text for – Generator Image/Multimedia
- 60. Web Title <head> <title>NECTEC : Thailand : National Electronics and Computer Technology Center</title> </head> เปดดูดวยคําสั่ง View, Source
- 61. Web Title &Google
- 62.
- 63.
- 64. URL • Uniform ResourceLocator • ตําแหนงที่อยูของเว็บไซต • http://www.nectec.or.th/courseware/index.ht ml Protocol Domain-name Directory Path File
- 65.
- 66. Meta tag: Description <head> <META NAME="Description" CONTENT="มหาวิทยาลัยเกษตรศาสตรเปนสถาบันอุดมศึกษาที่ เปดสอนหลักสูตรทางการเกษตรแหงแรกของประเทศไทย ถือกําเนิดมาจากโรงเรียนฝกหัดครู ประถมกสิกรรม เมื่อ พ.ศ. 2460 ตอมาไดขยายและยกฐานะขึนเปนวิทยาลัยเกษตรศาสตรและ ้ พัฒนาจนกระทั่งกอตั้งเปนมหาวิทยาลัยเกษตรศาสตร โดยพระราชบัญญัติ มหาวิทยาลัยเกษตรศาสตร เมื่อวันที่ 2 กุมภาพันธ พ.ศ. 2486 ปจจุบันมหาวิทยาลัยเกษตรศาสตร ประกอบดวยวิทยาเขตที่เปดเรียนแลว 5 วิทยาเขต และโครงการ จัดตั้ง 2 วิทยาเขต"> </head> เปดดูดวยคําสั่ง View, Source
- 67. Meta tag: Description •กรณีที่ไมไดระบุ Description Meta Tag โปรแกรมจะดึงขอความ 1 – 2 KB จาก เว็บไซตมาแสดงผลแทน
- 68. Meta tag อื่นๆ • Authors, Creator • Keyword • Generator • Robot – จะระบุไวใน Head Section ของเอกสารเว็บ – ไมปรากฏบนเว็บเบราวเซอรหรือในเอกสาร – Search Engine เขาถึงได
- 69. Author & Keyword <METANAME="Author" CONTENT="Kasetsart University, Thailand, Bangkok"> <META NAME="Keywords" CONTENT="Kasetsart University, Thailand, University, Bangkok, Higher Education, Equality in Education, Colleges, School, Campuses, Faculty, มหาวิทยาลัยเกษตรศาสตร, เกษตรศาสตร ศาสตรของแผนดิน">
- 70. Web Meta Tags •บรรจุไวใน Head • รูปแบบทั่วไป <META NAME=“dataname” CONTENT=“datavalue”>
- 71.
- 72. Image Search •Google คนหาภาพไดจาก – คําที่อยูใกลภาพ/ขางเคียงภาพ (adjacent) – Image Caption – Links – Alt Attribute ของ Image Tag – Embedded Metadata <img src=“aaa.jpg” alt=“Computer System”>
- 74. XNView Image Metadata • Exchangeable Image File Format (Exif) Metadata – ระบุอตโนมัติเมื่อมีการถายภาพดวยกลองดิจิทัล ั – พัฒนาโดย Japan Electronic Industries Development Association (JEIDA) • International Press Telecommunications Council (IPTC) Metadata – Metadata ที่ผูใชสามารถบันทึกเพิ่มเติมได – พัฒนาโดย International Press Telecommunications Council
- 75. Exif Metadata โปรแกรมกราฟกตางๆ สามารถเปดดูได เชน ACDSee, XnView โดยคลิกปุมขวาแลว เลือกคําสั่ง Properties…
- 76. IPTC Metadata โปรแกรมกราฟกตางๆ อนุญาตใหเพิ่มขอมูลตางๆ ได เชน ACDSee, XnView
- 77. ตัวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆทั้ง .doc, .ppt, .pdf, และรูปภาพ .jpg ดวยโปรแกรม Catalogue http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4
- 78. CSS : StandardWeb Solution • เว็บเบราวเซอรแตละคายกําหนดคําสั่ง HTML และ Attribute แตกตางกันออกไป • เกิดปญหาในการสรางเอกสารเว็บที่สนับสนุนกับ ทุกเบราวเซอร • เกิดปญหาในการปรับแกไขเอกสารเว็บ • การควบคุมการแสดงผล Tag หรือ Attribute ดวย CSS จึง เปนทางออกที่ W3C แนะนํา
- 79. What is CSS? •CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one
- 80. CSS syntax selector {property:value} • Selector เปนไดทั้งแท็กคําสั่ง HTML หรือเปนชือที่ ่ กําหนดมาใหม ก็ได • Property คือ Attribute ที่ตองการแสดงผล • แตละ Property จะตองระบุคาการแสดงผล (Value)
- 81. CSS syntax • คั่นระหวางProperty และ value ดวยเครื่องหมาย colon • และลอมรอบดวย { } curly braces body {color: black}
- 82. CSS syntax • ถาvalue ประกอบดวยคําหลายคํา (มีชองวาง ระหวางคํา) ตองใสเครื่องหมายคําพูดกํากับ (quotes) p {font-family: "sans serif"} p {font-family: tahoma}
- 83. CSS syntax • สามารถระบุproperty ไดมากกวา 1 โดยใชเครืองหมาย ่ semi-colon แบง p {text-align : center ; color:red} เพือใหอานไดสะดวกควรเปลียนรูปแบบเปน p{ text-align : center ; color:red }
- 84. CSS syntax • สามารถจัดกลุมSelector หลายๆ ตัว เมือมี Property เดียวกัน ดวยเครื่องหมาย comma h1 { color: green} h2 { color: green } h1,h2,h3,h4,h5,h6 h3 { color: green } { h4 { color: green } h5 { color: green } color: green h6 { color: green } }
- 85. Class Selector • แท็กHTMl แตละ Tag สามารถกําหนดรูปแบบการ แสดงแตกตางกันได โดยการสราง Class selector ดังนี้ p.right {text-align: right} p.center {text-align: center} • ขึ้นตนดวย Tag ตามดวยจุด และตอดวย Attribute • ไมอนุญาตใหขึ้นตนชือ class ดวยตัวเลข ่
- 86. Class Selector • การใชงาน <pclass="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
- 87. Class Selector • กรณีท่ีAttribute เดียวกัน และตองการประกาศใช กับทุก Tag สามารถกําหนด Certain Class ไดดังนี้ .center {text-align: center}
- 88. Class Selector • การใชCertain Class มีรปแบบดังนี้ ู <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
- 89. ID Selector • Selectorทีไมใชแท็กคําสั่งของ HTML เรียกวา ID Selector ่ • ประกาศขึ้นตนดวยเครื่องหมาย # • หามใชตัวเลขขึ้นตนชือ ่ #green {color: green} <h1 id="green">Some text</h1> <p id="green">Some text</p>
- 90. ID Selector • กรณีท่ตองการประกาศเปนAttribute ใหมของ ี HTML Tag จะใชรูปแบบ ดังนี้ p#para1 { text-align: center; color: red }
- 91. External Style Sheet • สราง text file • ปอนคําสั่ง css • บันทึกดวยนามสกุล .css • ประกาศใช css ใน html file ดวยคําสั่ง <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
- 92. Web Accessibility • เว็บไซตที่รองรับความสามารถในการเขาถึงได ในทุกรูปแบบที่เปนมาตรฐาน • เพื่อเปนหลักประกันไดวาขอมูลสารสนเทศที่ เผยแพรนั้น ทุกคนสามารถเขาถึงไดอยางเทา เทียมกัน • ใชเทคโนโลยีที่เปนมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เปนตน
- 93. ผลที่ไดจาก Web Accessibility •กลุมผูใชผานเครื่อง PDA หรืออุปกรณ Mobile • กลุมคนพิการ – บกพรองทางการเห็น – บกพรองทางการไดยิน – บกพรองทางการเคลื่อนไหว • กลุมผูใช Browser ที่แตกตางกัน • กลุมผูใชอินเทอรเน็ตความเร็วต่ํา
- 94. กลุมผูพิการ • ผูพิการทางการเห็น – โปรแกรมชวยอานหนาจอ – เสียง (TTS), Braille – โปรแกรมขยายหนาจอ – โปรแกรม Web Browser
- 95. กลุมผูพิการทางการเห็น • ตัวอยางโปรแกรมขยายหนาจอ
- 96.
- 97. Alternate Text • <IMGSRC=“ชื่อไฟลภาพ” ALT=“คําอธิบายภาพ”> • คําอธิบายภาพควรสื่อความหมายชัดเจน – Firefox ไมแสดงคําอธิบายภาพ แตทํางานกับ Attribute TITLEฃ
- 98. 1. "Image ofGeorge Washington" 2. "George Washington, the first president of the United States" 3. An empty alt attribute (alt="") will suffice. 4. "George Washington"
- 99. 1. An emptyalt attribute (alt="") will suffice. 2. "Wikipedia entry for George Washington" 3. "Read More" 4. "George Washington"
- 100. 1. "George Washington" 2."Painting of George Washington" 3. "Painting of George Washington crossing the Delaware River" 4. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle "
- 101. 1. "Employment Application" 2."PDF File" 3. "PDF icon" 4. The content of the image is presented in context, so (alt="") is appropriate.
- 102. 1. "decorative line" 2. "Beginning of footer" 3. "separator" 4. alt="" will suffice
- 103. สิ่งที่ไมควรทํา 1. "next" 2. "nextpage" 3. "George Washington's Presidency" 4. "Continue to George Washington's Presidency"
- 104. Empty Alt (alt=“”) •ภาพที่ไมสื่อความหมาย • ภาพที่ถูกตัดเปนหลายชิ้น แตไมมีผลตอการ ทํางาน • ภาพ Background
- 105. Long Description • คําอธิบายแบบยาว – เพิ่ม Attribute LONGDESC=“ชื่อไฟลคําอธิบาย.txt” – ใหพิมพดวย Notepad แลวบันทึกเปน .txt คํานึงถึง Thai Encoding & Decoding ดวย
- 106. คําอธิบายแบบยาว Long Description
- 107. Alt สําหรับ Flash •ระบุ Alt • Description & Shortcut
- 108.
- 109.
- 110. การลงรหัสทีไมถกตอง ่ ไม ู <p><font size=“+3”><b>This is a heading</b></font></p> <p>Blah blah blah</p> <p><font size=“+3”><b>This is another heading</b></font></p> <p>Blah blah blah</p> <p><font size=“+2”><b>A sub- section</b></font></p> <p>Blah blah blah</p>
- 111. การลงรหัสทีถกตอง ่ ู Use markup and style sheets and do so properly <h1>This is a heading</h1> Outline: <p>Blah blah blah</p> <h1>This is another heading</h1>a heading •This is •This is another heading <p>Blah blah blah</p> –A sub-section <h2>A sub-section</h2> <p>Blah blah blah</p>
- 112. สรางเอกสาร HTML ที่ได มาตรฐาน <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- 113. ระบุภาษาใหชัดเจน <p>เมือวานมีชาวตางชาติพูดกับฉันวา<span ่ lang=“en”>I love you</span></p> และระบุภาษาหลักในแท็ก <HTML> <html lang="th">
- 114. กํากับคํายอ <acronym title="World WideWeb Consortium">W3C</acronym> <abbr title="World Wide Web Consortium">W3C</abbr>
- 115.
- 116. <tr> <th id="t1">ชื่อ</th> <th id="t2">อายุ</th> <th id="t3">สถานที่เกิด</th> <th id="t4">สถานที่ทํางาน</th> </tr> <tr> <td headers="t1">น้ําหนึ่ง</td> <td headers="t2">29</td> <td headers="t3">กรุงเทพฯ</td> <td headers="t4">เนคเทค</td> </tr> <tr> <td headers="t1">ยุทธการ</td> <td headers="t2">28</td> <td headers="t3">หนองคาย</td> <td headers="t4">เนคเทค</td> </tr>
- 117. กลุมผูพิการทางการไดยิน • สามารถอานหนังสือได • เขาใจเนื้อหาจากการอาน ?
- 118. Captions • สราง captionให Movie Movie Caption
- 119.
- 120.
- 121.
- 122. Watermark • ขอมูลแสดงลิขสิทธิหรือคุณสมบัติของไฟล ์ • แสดงความเปนเจาของ • แบงไดเปน – Text Embedded Watermark – Image Embedded Watermark • มีประโยชนอยางสูงสําหรับ Digital Library, Digital Archive, E-Commerce
- 125. Text Embedded Watermark • มีลักษณะเปนขอความทีผนวกกับไฟลภาพ ่ • สามารถระบุไดจากโปรแกรม Adobe PhotoShop จากคําสั่ง File, File info, Copyright & URL • สามารถคนหาไดจากคําสั่ง Search/Find ของ Windows
- 126. Image Embedded Watermark • มีลักษณะเปนภาพทีผนวกกับไฟลภาพ ่ • อาจจะเปนภาพโลโกของหนวยงาน, ภาพ ขอความลิขสิทธิ์ • สามารถระบุไดจากซอฟตแวรประเภท Watermarking Software
- 127. Watermark Processing • Encoding การเขารหัส • Decoding/Detect การตรวจสอบรหัส – ระบบ Detect สามารถกระทําไดกับภาพที่มการ ี ลง Watermark และสั่งพิมพบนกระดาษ โดยนํา ภาพดังกลาวมาสแกน แลวใช Detecting Watermark Software ทําการตรวจสอบ
- 128. The Watermark Embedding Process
- 129. The Watermark Detection Process
- 130. แหลงอางอิง • http://stks.or.th • http://stks.or.th/elearning •http://webxact.watchfire.com