หน่วยที่ 3 การสร้างเว็บเพจด้วยภาษา HTML

หนวยการเรยนท 3 การสรางเวบเพจดวยโปรแกรมภาษา HTML

สาระการเรยนร ภาษา HTML เปนภาษาทใชสรางเอกสารเวบเพจ ตามมาตรฐานของ The World Wide Web Consortium (W3C) ทสามารถสงขอมลประเภท ขอความ รปภาพ ภาพเคลอนไหว เสยง และ วดทศน ในระบบเครอขายอนเทอรเนต แสดงผลผานโปรแกรมเวบบราวเซอรไดทกระบบปฏบตการ โดยทเอกสารเวบจะตองมการเชอมโยง(Link) ถงกนได การเรยนร โปรแกรมภาษาHTML ซงเปนโปรแกรมแบบ Text จะใชโปรแกรม Text Editor เชน Note pad , Edit Plus, WordPad หรออนๆ เขยนได เปนการเรยนร การใชคาสง สรางเวบใหแสดง ขอความ จดการรปแบบเนอหาใหอานไดงาย ดวยการใชตารางชวย สรางความนาสนใจเชน ใส รปภาพ ภาพเคลอนไหว สรางการเชอมโยง (Link) เวบเพจ ในเครอขายอนเทอรเนต ผานโปรแกรมเวบบราวเซอรได เนอหาในหนวยการเรยนนเปนการเรยนรคาสงพนฐาน ทสาคญของ ภาษา HTML เกยวกบ รปแบบโครงสรางคาสง และ การกาหนดคณสมบตเ พมเตม เทานน เพอนาความรไปใชแกไข Code คาสง HTML ในโปรแกรมสรางเวบแบบสาเรจรป (WYSIWYG) ซงสรางคาสง HTML ใหโดยอตโนมต ไดในหนวยการเรยน ตอไป ผงความคด (Mind Mapping)

การสรางเวบเพจดวยโปรแกรมภาษา HTML

2.การเขยนโปรแกรมภาษา

HTML

2.1 โปรแกรมเขยน HTML

3.การใชคาสงและทดสอบผล

1.การสราง Folder เกบขอมล

2.2 โครงสรางภาษาและคาสง

3.1 คาสงจดการขอความ

3.2 คาสงสรางความนาสนใจ 3.3 คาสงการใชตาราง

3.4 คาสงการเชอมโยง

46

จดประสงคการเรยนร 1. สามารถสรางโฟลเดอรเกบขอมลเวบไซตได 2. บอกทมาและความสาคญของภาษา HTML ได 3. สามารถใชโปรแกรมเทกเอดเตอรสรางและบนทกไฟล .html ได

4. บอกโครงสรางภาษาและ Tag ควบคม (คาสง) ของ HTML ได

5. สามารถใชคาสงจดการตวอกษร ขอความ และทดสอบผลบนโปรแกรมบราวเซอรได

6. สามารถใชคาสงตกแตงสราง ความนาสนใจและทดสอบผลบนโปรแกรมบราวเซอรได 7. สามารถใชคาสงสรางตาราง ใสการเน อหาและทดสอบผลบนโปรแกรมบราวเซอรได

8. สามารถใชคาสงสรางการเชอมโยง (ลงค) แบบตา ง ๆและทดสอบผลบนโปรแกรม

บราวเซอรได

47

การสรางเวบเพจดวยโปรแกรมภาษา HTML

ในหนวยการเรยนนจะเรมสรางเวบดวยโปรแกรมภาษา HTMLในเครองคอมพวเตอรมขนตอนและคาสงควบคมการแสดงผลบ นโปรแกรมบราวเซอร ดงน

1. การจดการโฟลเดอร(Folder) เกบขอมลเวบไซต การเขยนโปรแกรมใด ๆ ในเครองคอมพวเตอร สงแรกทตองดาเนนการคอการสราง โฟลเดอรเกบขอมล รวมไวในทเดยวกน เพอความปลอดภยจากการถกลบทง และ การเรยกใชงานทสะดวก สาหรบการสรางเวบไซต โฟลเดอรเกบไฟลขอมลตาง ๆ ทนามาประกอบเปนหนาเอกสารเวบ และไฟล .html ทจะตองเชอมโยงถงกน จะตองมการอางองตาแหนงเกบ ชดเจน เปลยนแปลงไมได จงใหเกบไวภายใน โฟลเดอรหลก (Local Root Directory ) เดยวกน แลวสรางโฟลเดอรยอย ๆ (Sub-Directories)เชน image , CSS, Template ไวภายใตโฟลเดอรหลก หากเครองคอมพวเตอรทใชสรางเวบ มผใชหลายคนการสรางโฟลเดอรเวบไซตควรสรางเกบไวในทปลอดภย แลวใสรหสผานกนไวดวย

ตวอยาง สมมตวาตองการ สรางโฟลเดอรทไดรฟ D: มลาดบขนการสราง ดงรปท 3.1

D: → คลกขวาบรเวณทวาง → เลอก New → Folder 1. เขา ไดรฟ 2. เมอไดโฟลเดอรชอ New Folder ทาการเปลยนชอโฟลเดอร ชอโฟลเดอรควรสอดคลองกบชอองคกรหรองานทจดทาเวบไซต เชน สรางเวบไซตบรษทฮอนดา ตงชอวา Web-Honda ทสาคญการตงชอ โฟลเดอร หรอไฟลตาง ๆ ตองใชภาษาองกฤษ ใชชอสน ๆ เพราะจะมผลตอการสรางลงค ทตองเขยนคาสงอางองชอภายหลง การใชชอภาษาไทยจะมปญหาตอ โปรแกรมบราวเซอร จะหาไมพบ

รปท 3.1 แสดงการสรางโฟลเดอร เพอเกบขอมลเวบ

48

2. การเขยนโปรแกรมภาษา HTML

ภาษา HTML (Hyper Text Markup Language) เปนภาษาหลกทใชในการสรางเวบเพจ เปนภาษาประเภท Markup Language เกดขนจากการพฒนาเทคโนโลยระบบ World Wide Web: WWW. ใชเพอกระจายขอมลในองคกรอนเทอรเนต พฒนาและกาหนดมาตรฐานโดยองคกร W3C (World Wide Web Consortium) ระบบ WWW. พฒนาขนโดย นกวจยจากสถาบน CERN (Conseil European Pour La Recherche Nucleaire) ชอ ทม เบอรเนอร - ล (Tim Berners-Lee) ใน ป ค.ศ.1989 เมองเจนวา ประเทศสวสเซอรแลนด

ภาษา HTML เปนภาษาทมลกษณะของขอมลทเปนตวอกษรในมาตรฐานของรหส แอสก (ASCII Code) โดยเขยนอยในรปของเอกสารขอความ (Text Document) ปจจบนพฒนาเปนเวอรชน 4.01 หรอ XHTML1.0 เพอรองรบมาตรฐานภาษา XML (ซงจะนามาใชแทนภาษา HTML) สามารถแสดงภาพกราฟกและระบบเสยงไดสมบรณ ตอบสนองเทคโนโลยปจจบน ครอบคลมการใชรวมในระบบโทรศพทได การเขยนภาษา HTML สามารถแทรกคาสงทตองการไดงาย โปรแกรมจะไมยดความเปน โครงสราง การเขยนคาสงผดกไมมผลตอตวโปรแกรม เพยงแตจดทผดจะไมแสดงผลออกมา ซงนบเปน จดออนของโปรแกรม (ทาใหตามหาจดผดไดยาก และเปนเหตผลทมการพฒนาภาษา XML มาใชแทน) ไฟลทไดจากการสรางเอกสารเวบ HTML จะเปนไฟลนามสกล .htm หรอ .html ใชไดทงระบบปฏบตการยนกซ (UNIX) และระบบปฏบตการ Windows เวลาเรยกใชหรอสงแสดงผล เรยกใชไดจากโปรแกรม เวบบราวเซอร (Web Browser)

2.1 โปรแกรมเขยนภาษา HTML โปรแกรมทนยมนามาใชเขยนภาษา HTML ทนยมม 2 โปรแกรมคอ Notepad และ Edit Plus ดงตวอยาง ดงน

โปรแกรม Note Pad Note Pad เปนโปรแกรม Text Editor มาตรฐานทมมากบ Windows วธเรยกใชทาไดดงรปท 3.2

1. การเขาสโปรแกรม เรม ทหนาตาง Desk top คลกทปม

START → All PROGRAMS → ACCESSARIES → NOTE PAD

49

รปท 3.2 แสดงการเปดโปรแกรม Note pad เมอเขาโปรแกรม กสามารถพมพขอความหรอ Code HTML ไดทนทตามรปแบบคาสง ของโปรแกรม หากไมสามารถพมพภาษาไทยได ใหเขาไปตงทเมน Format เลอก Font เชน Angsana New เลอกขนาด Font ตามตองการ โปรแกรมภาษา HTML ไมยดตดกบ ตวพมพเลก หรอตวพมพใหญสามารถ ใชได ใหพจารณาจดความสวยงาม การดงายเปนหลก การบนทกไฟล เมอเขยน Code HTML เสรจแลวใหบนทกไฟล เลอกนามสกล เปน .htm หรอ .html เกบไวใน Folder ทเตรยมไวสาหรบเกบทรพยากรเวบไซต ดงรปท 3.3 และ รปท 3.4

รปท 3.3 แสดง Code HTML ทเขยนดวยโปรแกรม Note pad

50

รปท 3.4 แสดงการบนทกไฟล นามสกล .html

โปรแกรม EDIT PLUS Edit Plus เปนโปรแกรม Text Editor ทใชบน Windows 95/98/Me/NT/2000/XP ผลตโดยบรษท ES-Computing ขนาดโปรแกรม 1.02 MB เปนโปรแกรมทมเครองมอชวยใหเขยนโปรแกรมภาษา สะดวกขน เชนมสเนนคาสง หมายเลขบอกบรรทด ตวชวยในการเขยน Tag คาสงตา ง ๆ การใชงานเขยนภาษา HTML ทา ดงรปท 3.5

1. เมอเขาสโปรแกรม File → New → HTML Page กด Enter (จะเหนวาสามารถใชโปรแกรม EditPlus เขยนโปรแกรมภาษาไดหลายโปรแกรม)

รปท 3.5 การใช โปรแกรม Edit Plus สรางไฟลเวบ HTML

51

2. เมอเลอกการสรางเอกสารแบบ HTML Page แลวโปรแกรมจะสรางรปแบบคาสง HTML ใหเราสามารถเขยนเพมเตม และสามารถเลอกคาสงจาก Tool bar ทมมาใหทาให สามารถเลอกใชวางคาสงสาเรจลงในตาแหนงทตองการไดเลย ดงรปท 3.6

รปท 3.6 แสดงแบบฟอรม HTML ของโปรแกรม EDIT PLUS

HTML 2.2 โครงสรางภาษาและคาสง

ภาษา HTML ใชปายระบ (Tag) เปนคาสงควบคมการแสดงผล เปนลกษณะเฉพาะของภาษา ซงคาสงหรอปายระบแตละคาสง อาจมลกษณะพเศษ(Attribute) หรอสวนขยาย เพมเตม ได เชน <Font> เพมสวนขยายเปน <Font color=”RED”> คอกาหนดใหอกษรเปนสแดง ซงคาปกตหากไมกาหนดจะเปน สดา หรอสพนหลง หากไม กาหนดจะเปนสขาว เสมอ การกาหนดลกษณะพเศษใหแตละคาสงสามารถ กาหนดไดมากกวา 1 ลกษณะโดยใชเครองหมาย , คน เชน <font size = 3, color=red> …ขอความ..</font> ปายระบ (Tag) อยภายใตเครองหมายนอยกวา (<) และมากกวา (>) ดงน <…> โดยปายระบ แบงเปน 2 ประเภท คอ

1. ปายระบเดยว เปนคาสงควบคมการแสดงผลเดยว เชน คาสงขนบรรทดใหม <br> คาสงขนยอหนาใหม <P> , คาสงแทรกรปภาพ <img>, คาสงใสเสนคน <HR>เปนตน

2. ปายระบเปด/ปด เปนคาสงควบคมการแสดงผลเปนกลมคอ เมอมคาสงเปด จะต องมคาสงปดเสมอ เชน <body>…. </body>, <b>…..</b>, <I> … </I> เปนตน

52

โครงสรางคาสง HTML จะมรปแบบการเขยนแบงออกเปน 3 สวน ดงน (รปท 3.7)

1. สวนประกาศ เปนสวนทกาหนดใหบราวเซอรทราบวา นคอภาษา HTML และจะตองทาการแปรผลอยางไรมคาสง เปนค เพยงคเดยวเทานน คอ <html> และ </html> ปรากฏทหวและทายไฟล 2. สวนหวเรอง (head) เปนสวนทแสดงผลขอความบน ไตเตลบารของบราวเซอร และอาจ มคาสงสาหรบกาหนดรายละเอยดดานเทคนคอนๆ อก แทรกอยระ หวางคาสง <head> ....... </head> ดงน

2.1 หวเรองบนไตเตลบาร เปนสวนสาคญทจะบอกรายละเอยดของหนาเวบเพจนนๆ อยภายในคาสง <title> .. </title> จะตองกาหนดเสมอและควรใชภาษาองกฤษนา สามารถใชภาษาไทยเปนคาตามได แตตองไมยาวเกน 64 ตวอกษร เชน <title> HTML LANGUAGE : การใชภาษา HTML </title> การนบตวอกษรใน คา-ภาษาไทยตองนบสระบน/ลาง /วรรณยกตดวย ชอเรยกเวบไซต ทปรากฏบนไตเตลบาร นอกจากจะนามาใชแสดงชอเรองของเวบไซตนนๆ แลวยงเปนขอความทจะ ถกนามาใชเปนคาสาคญ (Keyword) ในการสบคนขอมลจาก Search Engine ดวย

2.2 การระบอกขระภาษา นบเปนสวนสาคญ สาหรบเวบเพจภาษาไทย ททาใหผชมสามารถอานขอ ความบนเวบเพจเปนภาษาไทยได โดยเฉพาะการสรางเวบจากเครองมอสาเรจรปหลาย ๆ โปรแกรมทมกจะทาการกาหนดใหเวบเปนภาษาของผพฒนาโปรแกรม เชน เปนภาษาในยโรป/อเมรกา/หรอภาษาอนๆ ทาใหผชมไมสามารถอานภาษาไทยได ดงนนผสรางเวบจะตองทากา รกาหนดคาการ ถอดรหสภาษาไทยไวในทกๆ ไฟลโดยใชคาสง Meta ระบไวทสวน Head เชนเด ยวกนกบไตเต ล ดงน

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรอ <meta http-equiv="Content-Type" content="text/html; charset=Windows-874">

ใหเลอกใชอยางใดอยางหนง เวบเพจทสรางขนกจะสามารถแสดงผลภาษาไทย ไดอยางถกตอง

2.3 ประกาศใหโลกร การประกาศหรอเผยแพรสอนเทอรเนตเพอให ระบบการคนหาของ Search Engine ของเราไดโดยใชคาหลก (Keyword) การกาหนดคาหลกใหกบหนาเวบเพจ จะใชคาสงทมรปแบบเฉพาะในสวน Head ถดจาก Title เรยกวาการใชคาส ง Meta (ซงจะไมแสดงผลในหนาตาง บราวเซอร) ดงน

<Meta name="X" content="Y"> (x และ y จะถกแทนคาดวยขอความ )

53

ถา X แทนคาดวยคาวา Keyword ในสวน Y จะแทนคาดวยคาหลกทเกยวของกบเวบไซต นน คาหลกควรเปนภาษาองกฤษ (ใชภาษาไทยได) สามารถกาหนดไดมา กกวา 1 คา แตละคาจะคนดวย เครองหมายจลภาค (,)

เชน <Meta name="keyword" content="html, web, page, website, home.">

ถา X แทนคาดวยคาวา Description ในสวน Y จะแทนคาดวยคาอธบายทเกยวของกบ เวบไซตนน ควรเปนภาษาองกฤษ เขยนในรปประโยคบอกเลาสอความหมายถงเนอหาในเวบนนๆ เช น <Meta name="Description" content="HTML is a wonderful language for internet communication.">

ถา X แทนคาดวยคาวา Author ในสวน Y จะแทนคาดวยชอของเจาของเวบไซต หรอหนวยงาน อาจระบชออเมลไวเพอใหสะดวกในการตดตอกบผรบผดชอบโดยตรง เชน <Meta name="Author" content="Prasit – [email protected]">

2.4 เทคนคพเศษ เราสามารถใสเทคนคพเศษตาง ๆ เพมเตมในสวนนได เชน สครปตพเศษ แสดงวนเวลา การแสดงผลพเศษ มสครปแจกฟรใหนกศกษาคนหาจากอนเทอรเนต เชนhttp://www.codetukyang.com/java/scrollbar/index.htm, http://www.geocities.com/thaijava43/js.html

2.5 คาสงการทาหมายเหต ใชในกรณตองการอธบายคาสงเพมเตม รปแบบ  ตวอยาง  ขอความทอยในคาสง หมายเหตจะปรากฏอยในโปรแกรมแตไมถกแสดง บนจอภาพ

<html> 1.สวนประกาศ <head> <title> HTML LANGUAGE : การสรางเวบดวยภาษา HTML</title>

<meta http-equiv="Content-Type" content="text/html; charset=TIS-620">

<meta name="keyword" content="html, web, page, website, home.">

<meta name="description" content="HTML is a wonderful language for internet

communication.">

<meta name="author" content="Prasit :[email protected]">

<link href="htmlstyle.css" rel="stylesheet" type="text/css"> </head>

2. สวนหว

<body> welcome to my web HTML<br> ยนดตอนรบสเวบ HTML

</body> </html> 1.สวนประกาศ

3. สวนเนอหา

Rรปท 3.7 แสดงสวนประกอบโครงสรางภาษา RHTML

54

3. สวนเนอหา (body) นบเปนสวนทมความซบซอนมากทสด เพราะเปนเนอหา หรอเรองราวทงหมดทเราจะนาเสนอ สามารถใสเทคนคลกเลนเพอดงดดความสนใจไดมาก ความแตกตางระหวาง เวบไซตตางๆ แสดงความมฝมอของผจดทา ศลปะในการออกแบบจะอยในสวนนทงหมด จะแทรกอยระหวางคาสง <body> และ </body> โดยจะกลาวในหวขอตอไป

3. การใชคาสงและการทดสอบผล คาสงและการทดสอบในทนจะกลาวถง คาสงทใชในสวน เนอหา คอ ใน Tag body โดยปกตหากไมมการกาหนดอะไรเปนพเศษในคาสง body บราวเซอรจะแสดงผลหนาเวบเพจเปนพนหล งสขาว ตวอกษรสดาเสมอ ในคาสง body เราสามารถระบคาสงพเศษ (Attribute) เชน คาสของพนหลง สตวอกษร สจดเชอมโยง ตาแหนงการแสดงผลของหนาเวบ ไดตามตองการ ซงการเพมคาหรอคาสง พเศษจะเพมในปายระบ (tag) หรอคาสงเปดเสมอดงตวอยาง <html> <head> <title> Example of Body : ไฟลตวอยางคาสง BODY</title> </head> <body background="bgimage.gif" bgcolor="#ffffff" text="#000099" link="#ff0000" vlink="#990099" alink="#009900" topmargin=0 leftmargin=0 > สวนนสาหรบขอความทแสดงในสวนเนอหา </body> </html>

การกาหนดคาส คาส เปนสวนสาคญของการกาหนดคณสมบตแก Object ตาง ๆ สามารถกาหนดโดยระบชอสโดยตรง เชน black, white, blue, green,... เปนตน แตการกาหนดแบบนจะไมสามารถ ระบความเขมแบบไลเฉดสได จงไดใชคาสเปนตวเลขฐานสบหก (hexadecimal format) โดยกาหนดเปน คาสของแสง RGB แตละสประกอบดวยเลข 2 หลก ในแตละสจะมคาของสจากมดไปสวางดงน 0 1 2 3 4 5 6 7 8 9 A B C D E F เลข 2 หลกของแตละสจงมคาไดตงแต 00 – FF ดงนนการกาหนดคาส ดวยตวเลขฐานสบหกจงไดคาสทดกวา

55

ตวอยางคารหสส (HEX number) สาหรบใชในการเขยน Homepage

ชอส เลขฐานสบหก ชอส เลขฐานสบหก WHITE #FFFFFF BLACK #000000

YELLOW #FFFF00 RED #FF0000

GREEN #008000 BLUE #0000FF

CYAN #00FFFF MAGENTA #FF00FF

คาสเหลานสามารถดไดจาก คาส Color picker ของโปรแกรม Photoshop ซงจะสามารถเลอกใชสได 16.7 ลานส ดงรปท 3.8

คาส เลขฐานสบหก = #2E47B4

(นาคานไปใชไดเลย)

คลกเลอกส

รปท 3.8 แสดงการดเลขคาส ในตารางส ของโปรแกรม Photoshop

คาสงจดการขอความ 3.1

การจดการขอความ หรอ เนอหาเวบ เปนการเขยนคาสงลงใน <Body>………</Body> คาสง HTML ทเกยวของกบการใสเนอหาในทคอการใชคาสงจดการกบตวอกษร จดระเบยบขอความ ใหอานงาย ในเอกสารเวบของเรานนเอง คาสงทเกยวของไดแก 1. ตวอกษร ไดแก หนา เอยง ขดเสนใต ใสส กาหนดขนาด เลอกแบบอกษร

56

2.จดขอความ ไดแก ขนบรรทดใหม กาหนดหวขอ กาหนดใหยอหนาใหม ใสเสนขนขอความ

เปนตน

คาสงจดตวอกษร

1. ตวอกษร : <B>...ขอความ..... </B> :คาสงตวหนา <I>...ขอความ..... </I> :คาสงตวเอยง <U>...ขอความ..... </U> :คาสงขดเสนใต

เมอตองการทาใหตวอกษรหนา เอยง หรอขดเสนใต ใหนาคาสงขางตน (Tag) ไปครอ ม ขอความนนไว เชน ตองการแตงคาวา "การเขยนเวบเพจดวยภาษา HTML " ใหหนา เอยงและขดเสนใต ใหทาดงน รปท 3.9

<B> <I><U> การเขยนเวบเพจดวยภาษา HTML</U></I></B>

รปท 3.9 แสดงการใชคาสง <B> <I> <U> พรอมกน

2. ควบคมตวอกษรทงหนาเวบ : ในการตกแตงขอความหรอตวอกษรทงหนาเวบใชคาสง <basefont >โดยเพม คณสมบต

(Attribute) เพมลงไป ไมตองม แทกป ด ดงตวอยาง คาสงดงน

<basefont color=”blue” size=3>…ขอความ....

57

3. ใสสตวอกษร : <font color=ชอส หรอ #รหสส >.....ขอความ...... </font>

ในการตกแตงอกษรใหเปนสตางๆ ตามชอสหรอรหสส เปนการกาหนดคณสมบตพเศษใหกบ FONT จะเขยนคาสงลงในคาสง (Tag) เปด ใหนาคาสงนไปครอมขอความทจะตกแตงส ดงตวอยาง <font color= red > การกาหนดสตวอกษรสแดง </font> หรอ <font color= #ff0066 > การกาหนดสตวอกษร </font>

4. กาหนดขนาดตวอกษร : <font size= ขนาด > .....ขอความ...... </font> ในการกาหนดขนาด อกษร เปนการกาหนดคณสมบตพเศษใหกบ FONT ขนาด FONT

ทกาหนดไดในภาษา HTML กาหนดไวคอ 1 , 2 , 3 , 4 , 5 , 6 , 7 โดย 1 ขนาดเลกสด 7 ขนาดใหญสด การเขยนคาสงจะเขยนคาสงลงในคาสง (Tag)เปด ใหนาคาสงนไปครอมขอความ ทตองการ ดงตวอยาง <font size= 5 > การกาหนดขนาดตวอกษรขนาดเทากบ 4</font>

รปท 3.10 แสดงการใชคาสงกาหนดขนาดและ ส ตวอกษร

5. กาหนดแบบตวอกษร : <font face= “แบบอกษร” > .....ขอความ...... </font> การกาหนดแบบ อกษร เปนการกาหนดคณสมบตพเศษใหกบ FONT เชนกน การเขยนคาสง

จะเขยนคาสงลงในคาสง (Tag)เปด ใหนาคาสงนไปครอมขอความ ทตองการ ดงตวอยาง <font face= “Cordia New”> การกาห นดแบบอกษร </font>

58

การเขยนคาสงรวมมากกวา 1 คาสง จะเหนวาการกาหนดคณสมบตพเศษใหตวอกษร หรอ FONT ทง ส ขนาด แบบ ทาไดคลายกน ดงนนในการใชงานหากตองการกาหนดคณสมบตมากกวา 1 อยาง กสามารถเขยนตอกนโดยเคาะวรรควาง ไวระหวางคาสง ดงตวอยางรปท 3.11

<font color=red size=4 face= “Cordia New” > การกาหนดคณสมบตพเศษ อกษร </font>

ผลลพธทได: การกาหนดคณสมบตพเศษอกษร

ตวอยางการใช HTML

รปท 3.11 แสดงการใชคาสงกาหนดแบบ ขนาด ส ตวอกษร

59

คาสงจดขอความ

1. คาสงขนบรรทดใหม

หากพมพขอความยาวๆ เมอตองการจะตดคาขนบรรทดใหมตองใชคาสง <br> แทรก ตามตาแหนงทตองการใหขนบรรทดใหม ไมตองมแทกปด ดงตวอยาง ผลลพธทได ดรปท 3.12

การเขยนขอความทตองการตดคาขนบรรทดใหมสามารถทาไดดวยการใชคาสง Break (br) แทรก<br> ขอความหลงคาสงBreak จะถกตดลงบรรทดถดไป

2. คาสงขนยอหนาใหม <p>.................ขอความ.........</p> สาหรบกลมขอความจานวนมา ก เราสามารถแบงขอความในรปของยอหนา (Paragraph) ดวยการใชคาสง <P> ... </P> ผลทไดจะแตกตางจากการใชคาสง <br> นนคอจะมการเวนชองวางหนงบรรทด กอนและหลงยอหนา ดงตวอยาง ผลลพธ ดรปท 3.12

<P>นคอตวอยาง การจดกลมขอความแบบยอหนาทใชคาสง Paragraph กากบ สวนน คอยอหนาแรก </P> <P>นคอตวอยาง การจดกลมขอความแบบยอหนาทใชคาสง Paragraph กากบ สวนน คอยอหนาทสอง </P> ประโยคใหมทไมมคาสงกากบ

รปท 3.12 แสดงการใชคาสง <br> , <p>….</p>

60

3. คาสงกาหนดชองวางระหวางขอความ การพมพทมการเคาะวรรคในหนาออกแบบ บราวเซอรจะไมสนบสนนการแสดงผลการเคาะเวนวรรคมากเกนกวา 1 เคาะ (จะเวนวรรค 10 ชองกแสดงเพยงชอง เดยว) และการกดป มเยองยอหนา กจะแสดงเพยง 1 ชองวางเทานน เราสามารถกาหนดใหแสดงชองวางไดมากกวา 1 ชองวางไดดวยการ แทรกอกขระพเศษลงไปคอ แทน 1 ชดตอ 1 ชองวางตวอกษร ตวอยาง การแทรกชองวางเกนกวา 1 ชองวาง เชน นายประสทธ ชสกล (เวน 4 ชอง ระหวางชอ - นามสกล) ผลลพธ รปท 3.13 หมายเลข 1

4. คาสงจดกลมขอความเยองยอหนา ตองการใหขอความมการเยองจากขอบทงสองขางของหน าเวบเพจ สามารถใชคาสง <BLOCKQUOTE> …ขอความ….. </BLOCKQUOTE> ได ขอความทอยระหวางคาสงดงกลาวจะเยอง ระยะจากขอบทงสองดานดงตวอยาง <BLOCKQUOTE> นคอขอความทตองการเยองใหหางจากขอบทงสองขาง เพอใหเกดกลมขอความ

ทดสวยงามอานงาย ดวยการใชคาสง <BLOCKQUOTE> </BLOCKQUOTE>

ผลลพธ รปท 3.13 หมายเลข 2

หากตองการเยองยอหนาในบรรทดแรกเพยงบรรทดเดยว สามารถใชการแทรกตวอกษรวาง( ) ลงไปเทากบจานวนเคาะวรรคทตองการไดโดยตรง หรอจะกาหนดในคาสงยอหนา <p style="text-indent: 30"> กได (ใชไดดกบบราวเซอร IE บราวเซอรอนอาจไมแสดงผล ) ดงตวอยาง

การเยองยอหนาดวยการแทรกอกษรวางลงไป 6 ชด


<p style="text-indent: 30">การเยองยอหนาดวยการกาหนดสไตลใหกบคาสงยอหนา คาตวเลข 30 คอหนวยพกเซล </p>


61

5. คาสงกาหนดกลมคา ใหเหมอนตนฉบบ

รปท 3.13 แสดงคาสงจดตาแหนงขอความดวย , <blockquote>,<p style= “text-indent …”>

5. คาสงกาหนดกลมคาใหเหมอนตนฉบบ การกาหนดกลมคาให การแสดงผลบนบราวเซอรเหมอนตนฉบบทพมพหรอออกแบบในเอกสาร HTML สามารถใชคาสง <PRE> …ขอความ….. </PRE> ได ดงตวอยาง ผลลพธดงรปท 3.14

<PRE> ว.ด.ป. เวลา หมายเหต 1.01.51 7.50 -

8.02.51 8.50 -

12.04.51 8.20 - </PRE>

62

รปท 3.14 แสดงการใชคาสง

<PRE>…..</PRE>

6. การจดวางตาแหนงของขอความ การกาหนดใหตวอกษรขอความหรอรปภาพ ใหอยในตาแหนง ชดดานซาย/กลาง/ขวา ของหนาเวบเพจ (ปกตขอความจะถกจดชดซายอยแลว ) ดวยการใชคาสง <DIV ALIGN="LEFT/CENTER/RIGHT"> …ขอความ... </DIV> ครอบขอความ/รปภาพนน ดงตวอยาง ผลลพธดงรปท 3.15 <DIV ALIGN="LEFT">ขอความนจดชดซาย</DIV><br>

<DIV ALIGN="CENTER">ขอความนจดกงกลาง</DIV><br>

<DIV ALIGN="RIGHT">ขอความนจดชดขวา</DIV>

รปท 3.15 แสดงการใชคาสงจดตาแหนงขอความดวย <DIV ALIGN= “”>….</DIV>

63

7. การทาหวเรอง (Heading) การกาหนดขอความเปนหวเรองเนอหา (Heading) ใชคาสง (Tag) <Hn>…….</Hn> n คอตวเลขกาหนดขนาด มคา 1-6 โดยเลข 1 เปนขนาดตวอกษรใหญทสด และ 6 เปนขนาดตวอกษร เลกทสด การใชคาสง ดงตวอยางดงน <H4>ขอความหวเรองขนาด 4</H4>

8. การจดทารายการยอย (List) การทารายการหวขอมหลายวธสามารถเลอกใชไดตามความตองการดงน

8.1 คาสง <DL> , <DT> , <DD>

คาสงทง 3 คาสงนใชรวมกน เปนการกาหนดหวขอใ หญ หวขอยอย ลด ลาดบกน ผลลพธ ดงรปท 3.16

<DL> <DT>หวขอท1</DT><DD> หวขอยอยท 1.1 </DD>

<DT>หวขอท2</DT><DD> หวขอยอยท 2.1 </DD> </DL>

รปท 3.16 แสดงการใชคาสงจดหวเรองใหญ <H..>….</H..> และหวขอยอย <DL>, <DT>, <DD>

64

8.2 คาสง <LI> ควบคมขอบเขตหวขอดวย <DIR>….</DIR>

ใชควบคมรายการหวขอทมความยาวไมเกน 20 ตวอกษร การใชงานดงน <DIR> ผลลพธ

<LI>รายการหวขอท 1 • รายการหวขอท 1

<LI>รายการหวขอท 2 • รายการหวขอท 2 </DIR> ผลลพธ ดงรปท 3.17

รปท 3.17 แสดงการใชคาสงจดหวเรองใหญ <H..>….</H..> และหวขอยอย <LI> โดยควบคมดวย<DIR>…</DIR>

ใชควบคมรายการหวขอเชนเดยวกบ <DIR>….</DIR> แตแบบ <MENU>….</MENU> ไมกาหนดความยาว หวขอ การใชงานดงน

8.3 คาสง <LI> ควบคมขอบเขตหวขอดวย

<MENU> <LI>รายการหวขอท 1 <LI>รายการหวขอท 2

รปท 3.18 แสดงการใชคาสงจดหวเรองใหญ <H..>….</H..> และหวขอยอย <LI> โดยควบคมดวย <Menu>….</Menu>

</MENU>

ผลลพธ ดงรปท 3.18

65

8.4 คาสง <OL>….</OL>

เปนคาสงกาหนดลกษณะ (Type) รายการหวขอใหมลาดบ เชน 1 2 3 ... หรอ a, b, c… คาสง <OL>…. <OL> ใชควบคม <LI> โดยใชรวมกบคาสง START การใชงานตามตวอยางดงน

1) <OL START=1 Type=”a”>

<LI>รายการหวขอท 1 <LI>รายการหวขอท 2 <LI>รายการหวขอท 3 </OL>

2) <OL START=1 Type=”1”>

<LI>รายการหวขอท 1 <LI>รายการหวขอท 2 <LI>รายการหวขอท 3 </OL>

ผลลพธ

รปท 3.19 แสดงการใชคาสงจดหวเรองใหญ <H..>….</H..> และกาหนดลกษณะหวขอยอย <LO> ,<LI>

ดงรปท 3.19

8.5 คาสง <UL>….</UL>

เปนคาสงกาหนดลกษณะ (Type) รายการหวขอแบบใชสญลกษณเปนหวขอ เชน • , ο , คาสง <UL>…. <UL> ใชควบคม <LI> การใชงานดงรปท 3.20

รปท 3.20 แสดงการใชคาสงจดหวเรอง

<H..>….</H..> และ <UI> ,<LI>

66

8.6 การสรางเสนคนแนวนอน

การเนนขอความหรอเนอหาใหมความชดเจน ดวยการใชเสนคน <HR> สามารถกาหนดตาแหนง ความหนา ความยาว ส ความทบ ไดใชคาสงดงตวอยาง <HR color= “red” size=10> กาหนดใหเสนมสแดง ความหนา (size) 10 pixels ไมไดกาหนดความกวาง จะแสดงผลกวาง (หรอความยาวเสน) เตมพนท ดานกวางของหนาเวบ <HR width= 300 align= “center” color= “blue” size= 5 noshade> กาหนด ความกวางเทากบ 300 pixels อยกงกลางหนา ใหเสนมสนาเงน ความหนา(size) 5 pixels ไมกาหนดความทบ (noshade) รปท 3.21 ดงน

รปท 3.21 การใชคาสง <HR> สรางเสน

67

3.2 คาสงตกแตงสรางความนาสนใจ

1. การใสรปภาพ กอนนารปภาพมาประกอบ ใหศกษา ชนดของภาพ เชน GIF, JPEG และ PNG ทจะนามา ใชประกอบบนเวบเพจ เชนควรจะตองมขนาดเลก เพอนาไปเรยกใชบนเวบเพจไดอยางรวดเรว (ขนาดไฟลตองไมเกน 50 KB) ทสาคญภาพตองนามาเกบไวใน Folder ทใชเกบไฟลตาง ๆ ของเวบไซตทสรางปกตจะสรางโฟลเดอรยอยชอ images ไวเกบรป ภาพ เพราะการใชคาสงอางถงรปภาพตองบอกโฟลเดอรทเกบควบคไปดวยเสมอ การสรางโฟลเดอรยอยภายในโฟลเดอรเวบไซต จะไมตองเขยนคาสง อางถงใหยงยาก หากการจดเกบไมด หรอไมไดนารปภาพมาเกบไวในโฟลเดอรของ เวบไซตอางอง ผดรปกจะไมแส ดงโดยจะปรากฏเปนกากบาทสแดง แทนคาสงใสรปภาพเปนคาสงเดยว ไมตอง มTage ปด ดงน <IMG SRC="โฟลเดอรเกบภาพ/ชอรปภาพ"> โดยเราสามารถกาหนดคาเพม เชน ในสวนของความกวาง ความยาวของรปภาพ ตาแหนงภาพ ดงตวอยาง

( Images คอโฟลเดอรทเกบ bird.gif คอ ชอรปภาพ )

<img src="images/bird.gif" align=center> →กาหนดตาแหนงกงกลาง

<img src="images/bird.gif"> → คาสงใสรปภาพ

<img src="images/bird.gif" width="80" height="66"> →กาหนดความกวาง ความสง

<img src="images/bird.gif" width="160" height="133"> →กาหนดความกวาง ความสง

2. ใสกรอบและขอความอธบายภาพ การเพมความนาสนใจแกรปภาพ โดยใสกรอบภาพ ( ) ใสคาอธบายภาพ (Border alt) เมอ นาเมาสมาชทภาพใหปรากฏคาอธบายขน เพอสรางปฏสมพนธ ความนาสนใจ แกผชมทด ดงน <img src="images/bird.gif" border="3" alt="ไปชมนก">

3. การทาอกษรเคลอนท การเนนขอความหรอเนอหาใหนาสนใจ ดวยการสงใหเคลอนท ใชคาสง <MARQUEE> ….ขอความ ....</MARQUEE> และสามารถกาหนดการควบคม เชน ทศทาง ความเรว เพมได คอ Direction เชน LEFT, RIGHT, DOWN: กาหนดทศทาง Behavior เชน Scroll (ขวาไปซายแลวเรมใหม ), Slide (ขวาไปซายแลวหยด) Scroll amount = ความเรวในการเคลอนท (ควรกาหนดเพยง 1, 2, 3 เทานน )

68

คาสงตวอยางดงน <marquee behavior=scroll>อกษรวงจากขวาไปซายแลวเรมใหม</marquee>

<marquee behavior=alternate>อกษรวงจากขวาไปซายแลววงยอนกลบ</marquee>

<marquee behavior=slide>อกษรวงจากขวาไปซายแลวหยด</marquee>

<marquee direction=right>อกษรวงจากซายไปขวาแลวเรมใหม</marquee>

<marquee scrollamount=2 direction=down>อกษรวงจากบนลงลางแลวเรมใหม</marquee>

คาแนะนา...ควรทดสอบการใชคาสงเพอกาหนด ลกษณะ ขนาด ความเรว ในการเคลอนท ใหเหมาะสม

ตวอยาง Marquee อกษรวงขน เมอนาเมาสชบรเวณขอความ ขอความจะหยด เมอนาเมาส ออกนอกพนท ตวอกษรวงตอไป .. <TABLE bgcolor= #FFFFCC width = 300 height= 300 border=1 >

<TR><TD> <marquee direction=up height=200 onMouseOut=this.start()

onMouseOver=this.stop() scrollamount=1>

<CENTER>…ใสขอความวงจากดานลางขนดานบน.. CENTER>

</marquee>

</TD>

</TR>

</TABLE>

3.3 คาสงสรางตาราง

ในการนาเสนอเนอหา ขอมลทเปนรายการ หรอสถตตางๆ โดยทวไปจะนาเสนอขอมลใน รปของตาราง เพอความเปนระเบยบเรยบรอยและงายตอการทาความเขาใจ ซงการสรางเวบโดยทวไป ผออกแบบจะใชตารางเปนตวกาหนดขอบเขตพนทเน อหาแตละสวนไวเ สมอ คาสง (Tage) ทใชในการสรางตารางคอ <TABLE>...</TABLE> พรอมทง ตองมแทกประกอบในการสรางตาราง เชน สรางแถว, สรางคอลมน, กาหนดสพน สเสนขอบตาราง , กาหนดขนาดตาราง , การจดตาแหนงตาราง เปนตน ดงตวอยางดงน

รปแบบคาสง คาอธบาย <TABLE>............................</TABLE>

<CAPTION>....................</CAPTION>

<TR>.....................................</TR>

<TH>....................................</TH>

<TD>....................... ............</TD>

คาสงทกาหนดใหบราวเซอรสรางตาราง

คาสงทใชตงชอหรอหวขอเรองใหกบตาราง

คาสงสาหรบสรางแถวในตาราง (ROW)

คาสงสาหรบกาหนดขอมลสวนหวของตาราง

คาสงสาหรบสรางแถวในตาราง (ROW)

69

ตวอยางคาสงสรางตาราง กาหนดเสนขอบตาราง = 2 pixel

รปแบบคาสง ตวอยางผลการใชคาสง<TABLE BORDER="2" >

<CAPTION>ชอตาราง</CAPTION>

<TR>

<TH> สวนหว1</TH>

<TH> สวนหว2</TH>

<TR>

<TD>ชองท 1</TD><TD>ชองท 2</TD>

</TR>

<TR>


</TR>

</TABLE>

การกาหนดคณสมบตเพอตกแตงเพมในตาแหนงตาง ๆ ของตาราง ใหกาหนดในจดทตองการ เชน สพน สตวอกษร ดงตวอยาง

รปแบบคาสง คาอธบาย และผลการใชคาสง<TABLE BGCOLOR="#FFFF99" BORDER="2" width= 300 >

<CAPTION><FONT face= "cordia new" SIZE="4"

COLOR="blue">ชอตาราง</FONT>CAPTION>

<TR>

<TH> <FONT face= "cordia new" SIZE="3"

COLOR="green">สวนหว1</FONT></center></TH>

<TH> <FONT face= "cordia new" SIZE="3"

COLOR="green">สวนหว2</FONT></center></TH>

<TR>


</TR>

<TR>


</TR>

</TABLE>

แสดงการกาหนดรายละเอยดเพมในสวน ขนาดตารางซงขนาดมหนวยเปน pixel สาหรบชอ และ หวตาราง กาหนดแบบ Font และ สใหสวยงาม ตาแหนง (align) ไมตองกาหนด จะจดกงกลางให เสมอ สาหรบสตารางแตละแถวสามารถกาหนด เพมในแตละ TR , TD ไดเลย

70

การรวมตาราง

การใชคาสงรวมคอลมน : Colspan=”x” (x คอ จานวนคอลมน)

คาสง ผลลพธ

<TABLE width=200 bgcolor = #CCFFFF BORDER="2" >

<TR>

<TD colspan=”2”>AB</TD><TD>C</TD>

</TR>

<TR>

<TD>D</TD><TD>E</TD><TD>F</TD>

</TR>

</TABLE>

A B C

D E F

การใชคาสงรวมแถว : Rowspan=”x” (x คอ จานวนแถว)

คาสง ผลลพธ <TABLE bgcolor = #FFFF99 BORDER="2" width=

200>

<TR>

<TD ROWSPAN="2">AD</TD>

<TD>B</TD>

<TD>C</TD>

</TR>

<TR>

<TD>E</TD>

<TD>F</TD>

</TR>

</TABLE>

A B C

D E F

71

คาสงจดการขอมลและตารางทควรร Width = “x” : x ใชกาหนดความกวางของตาราง ใชหนวยได 2 แบบ คอ % (ของความกวางจอ) และ pixel (จะไมปรบตามความกวางจอ ) เชน Width=”80%”, width=”600” Height = “x”: ใชกาหน ดความสงของตาราง ใชหนวยเปน pixel เทานน Align = “x” : ใชกาหนดตาแหนง object ในแนวนอน right หรอcenter หรอ left เชน align= “center” Valign = “x” : ใชกาหนดตาแหนง object ในแนวตง top หรอ middle หรอ bottom เชน valign= “top” Colspan = “x” : ใชรวมคอลมนเขาดวยกน x คอจานวนคอลมน Rowspan = “x”: ใชรวมแถวเขาดวยกน x คอจานวนแถว

3.4 การเชอมโยงหนาเวบเพจ

Index.html

home.html

index.html

about.html

register.html Unit1.html

Unit2.html

about.html

index.html

home.html

register.html Unit1.html

Unit2.html

regist.html

index.html

about.html

home.html Unit1.html

Unit2.html

Unit1.html

index.html

about.html

register.html home.html

Unit2.html

Unit2.html

index.html

about.html

register.html home.html

Unit1.html

รปท 3.22 แสดงตวอยางการเขยนผงการเชอมโยง (Navigation)ในเวบไซต

การเชอมโยงหนาเวบเพจ คอ การกาหนดสวนของขอความหรอรปภาพทตองการ ใหเปนจดเชอมโยงไปยงเนอหา จดอน หรอหนาเวบเพจอน ซงเนอหาทจะเชอมโยงไปอาจจะอยภายในหนา เดยวกน , คนละหนากน หรออาจจะอยคนละเวบไซตกได การเชอมโยงหนาเวบเพจ ประกอบดวยสวนประกอบทสาคญ 2 สวน คอ

72

1. จดทใชสาหรบเชอมโยง (Link) เปนสวนทใชเปนจดเช อมโยงไปยงเปาหมายปลายทาง ซงอาจจะเปนขอความ หรอรปภาพซงอาจเปนภาพนง หรอภาพเคลอนไหว กได

รปท 3.23 แสดงการ

สรางจดลงคในหนาเวบ

2. เปาหมาย (Target) เปนสวนปลายทาง หรอจดทตองการใหเชอมโยงมาถงจะอยสวนใดของ เอกสารเวบกได ตามทเรากาหนด

การสรางจดเชอมโยง มดงน

1. การลงคภายในเวบเพจเดยวกน (Name Anchor) ในกรณทหนาเวบเพจยาวหรอมหลายหวขอทนาสนใจ ตองการใหผชมไปถงหวขอนนโดยสะดวกรวดเรว จงสรางการเชอมโยงไวสามารถคลกลงคไปได ขนตอน มดงน 1.1 กาหนดเปาหมาย (Target) - คาสง <A NAME= ชอเปาหมาย>....ขอความทใชเปนจดเชอมโยง....</A>

เชน <A NAME= cont02 >ฝายวชาการ</A>

1.2 กาหนดจดเชอมโยง (Link) - คาสง <A HREF= #ชอจดเชอมโยงในขอ 1>.....ขอความ.....</A>

เชน <A HERF= #con02>คลกไปทฝายวชาการ</A>

73

2. การลงคภายในเวบไซต (Web Page/File)

เปนการเชอมโยงไปยงหนาเวบเพจอนภายในเวบไซตเดยวกน -คาสง <A HERF= "ชอแฟม" >.....ขอความทใชเปนจดเชอมโยง.....</A>

เชน <A HERF=unit4.html>หนวยท4</A>

3. การลงคไปยงเวบไซตอน (URL/Website) เปนการเชอมโยงไปยงหนาเวบเพจหรอเวบไซตอน ใชการระบชอโดเมนเตม - คาสง <A HERF=ชอเวบไซต >.....ขอความทใชเปนจดเชอมโยง.....</A>

เชน <A HERF=http://www.google.co.th>google</A>

4. การลงคอเมล (E-Mail Link) เปนการสรางจดเชอมโยงพเศษทตองการใหผชมคลกเพอเปดโปรแกรมรบสงอเมลทมในเครองเพอเขยนขอความ

เชน <A HREF= "mailto:[email protected]">ผจดทา </A>

ในกรณใชรปภาพเปนจดเชอมโยง จะใชคาสงอางองรปภาพแทนตาแหนงขอความ ดงน

คาสง : <A HREF="http://www.google.co.th"><IMG SRC="images/chicken1.gif"></A>

การแสดงผลดวยโปรแกรมบราวเซอร

การทดสอบเพอแสดงตรวจสอบผลเวบเพจททาการออกแบบดวยโปรแกรมสราง ไมวาจะเปน การออกแบบดวยโปรแกรม ภาษา หรอ โปรแกรมสาเรจรป เมอเขยนโปรแกรมเสรจแตละชวงคาสง จะตองทาการทดสอบผลดวยโปรแกรมเวบบราวเซอร(เชน โปรแกรม IE, Firefox, Safari) ทนทการทดสอบผลสามารถทาไดหลายวธ วธทสะดวกและนยมใชกนม 2 วธ คอ

1. เขาไปทโฟลเดอรเกบผลงานเวบ ไซต ดบเบลคลกทไฟลเวบเพจ ซงบนทกเรยบรอยแลว (นามสกล htm หรอ html) โปรแกรมบราวเซอร จะทางานและเปดเวบเพจนน ๆ ขนทนท

2. สาหรบผใชโปรแกรมชวยสรางเวบ (โปรแกรมสาเรจรป)จะมเครองมอเปน Icon หรอ คยลดสาหรบเปดดเวบเพจผานโปรแกรมบราวเซอร ใหทกโปรแกรม เชน Dreamweaver จะม Icon หรอคยลดใหใชเปด เชน กด ของโปรแกรม IE ใช F12 เปนตน

74

ขอมลเกยวกบโ ปรแกรมบราวเซอร ทมใชในปจจบน ทควรทราบมดงน 1. โปรแกรม Internet Explorer ของบรษทไมโครซอฟต แถมมากบโปรแกรมวนโดว มผใชมาก

ทสด ปจจบนออกเวอรชน 7.0 หรอ IE 7 มขนาด 14.7 MB 2. โปรแกรม Mozilla Firefox บรษท Mozilla นยมเรยกกนสน ๆ วา Firefox ปจจบนเปนรน

2.0.0.9 มขนาด 5.74 MB สามารถหาคาแนะนาวธเซตอพและการแกปญหาในการใชงานไดคอนขางงาย 3.โปรแกรม Opera พฒนาโดยบรษท โอเปรา ประเทศนอรเวย มจดเดนทตวโปรแกรมมขนาด

เลก ปจจบนออกรน 9.24 4. โปรแกรม Safari ของคายแอปเปล ซงเดมใหใชกบระบบปฏบตการแมคอนทอช เทานน

ขณะนออกรน 3.1.2 ทใชกบวนโดวสได โปรแกรมบราวเซอรแตละ โปรแกรมจะมหนาตาเมน และสสน แตกตางไป รวมทงการแสดงผล

ในภาษาไทยอาจจะไดผลลพธทไมถก ตอง หรอหากการตงคาไมจะไมแสดงภาษาไทยเล ย การออกแบบสรางเวบจงตองมการทดสอบผลเพอตรวจสอบตลอดเวลา โปรแกรมบราวเซอรแตละโปรแกรมทเลอกใช ควรเรยนรวธการใชงาน การปรบแตงโปรแกรม แตละโปรแกรม ซงมผรไดเสนอแนะไวในอนเทอรเนต หรอคนหาขอมลไดโดยเฉพาะจากเวบบอรดตาง ๆ ซงเปน ศนยรวมขอมลทดแหงหนง เพราะบางครงโปรแกรมมเงอนไขตาง ๆ กน ทาใหคาสง HTML หรอไฟลขอมลทนามาใสในหนาเวบไม แสดงผล ทงทโคชคาสงดแลวถกตองทกอยาง ทสาคญเมอนาเวบออกเผยแพรควรแนะนาผใชดวยวาเวบ ของเราจะแสดงผลไดดกบโปรแกรม บราวเซอรอะไร ใชขนาดความละเอยดหนาจอเทาไร เพอใหการชมเวบของเราไดตรงจดประสงค และเหนผลงานในแบบทดดทสด

สรปบทเรยน การเรยนร ภาษา HTML ถอเปนการเรยนรภาษามาตรฐานของโปรแกรมสรางเวบเพจ สาหรบการเรมตนเรยนรการสรางเวบกควรเรยนรภ าษา HTML กอน เสมอ เนองจากการสงขอมล การสอสารตางๆ ใน บราวเซอรยคปจจบนใชขอมลแบบมลตมเดยแทบทงสน จงตองใชเทคโนโลย WWW ซงตองใชภาษา HTML เปนตวพาไป ดวยประสบการณการใชงานและการสอน ผสอนเหนโปรแกรม HTML เมอนกเรยนพอเขาใจหลกการใชคาสงแลวก สามารถเรยนรเพมเตมได เองจากแหลงเรยนรตาง ๆ เชนท http://www.w3schools.com/ ในการสอนควรเนนไปทการใชโปรแกรมแบบ WYSIWYG กลมโปรแกรมสาเรจรปทมประสทธภาพในการสรางงานไดเรว มเทคนคสรางความนาสนใจ รปแบ บไดมาตรฐานใหมาก โปรแกรมเหลานนไดพฒนามารองรบภาษา HTML , XHTML และ XML โดยสรางคาสงใหอตโนมต หากสามารถตรวจ และแกไข คาสง พรอมทงเขยนคาสง เสรมลงไปในจดทตองการเพมเตม ได จะทาใหการเรยนรการสรางเวบ มเวลาสรางทกษะแบบตาง ๆ ไ ดมากขน ใหศกษา HTML เพมเตมทเวบไซต http://www.w3schools.com/ , http://www.w3.org/MarkUp/ เพอใหนกศกษาทบทวนความรในบทเรยน ใหตอบคาถามตอไปน วาเรามความรในสงตอไปน เพยงใด

http://www.w3schools.com/

75

แบบฝกหดประจาบทเรยน

คาสง ใหตอบคาถามตอไปน 1. ใหบอกทมาและความสาคญของ HTML มาโดยสงเขป ............................................................................................................................................................................................................................................................................................................................... 2. ใหยกตวอยาง คาสงตาง HTML มา 10 คาสง ……………………………………………………………………………………………………………… ……………………………………………………………………………………………………………… 3. ใหอธบายความหมายของบรรทดคาสงตอไปน 3.1 <head> หมายถง.............................................................................................................. 3.2 <meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> หมายถง……………………………………………………………………........................ 3.3 <META NAME="Author" CONTENT="Prasit chusakul">

หมายถง……………………………………………………………………................... 3.4 <META NAME="Keywords" CONTENT=" WEB DESIGN">

หมายถง…………………………………………………………………….................... 3.5 <META NAME="Description" CONTENT="WEB DESING DREAMWEAVER">

หมายถง…………………………………………………………………….................... 3.6 <title>Start เรมตนการออกแบบเวบ </title>หมายถง……………………………………….

3.7 </head>หมายถง……………………………………………………………………………. 4. ใหแสดงคาสง การเพมคณสมบตให <FONT> โดยกาหนดขนาด ตวอกษร ส ขนาด ...................................................................................................................................................................... 5. ใหแสดงคาสง การเพมคณสมบตให <TABLE> โดยกาหนดความกวาง ความสง สพน ขนาดเสน สเสน : ........................................................................................................................................................

76

อางอง

กฤษณะ สถต , สรางโฮมเพจดวยตนเอง , กรงเทพ : Info press ณชตพงศ อทอง , การสรางเวบเพจ(ภาษา HTML), กรงเทพ : เอมพนธ บญสบ โพธศรและคณะ, การสรางเวบเพจ ดวย HTML,กรงเทพ : ศสอ. แหลงสบคน :

- http://www.w3schools.com/ - http://www.w3.org/MarkUp/

http://www.w3schools.com/

หน่วยที่ 3 การสร้างเว็บเพจด้วยภาษา HTML

Documents