หน่วยที่ 2 ภาษา html - krumontree.comภาษา html เป...

มนตร โคตรคนทา โรงเรยนเบญจะมะมหาราช

หนวยท 2 ภาษา HTML

ผลการเรยนรทคาดหวง 1. บอกจดกาเนดของภาษา HTML ได 2. อธบายโครงสรางพนฐานของภาษา HTML ไดถกตอง 3. สามารถเขยนคาสง (Tag) มาตรฐานของภาษา HTML ในการเขยนเวบเพจหนาแรกและ

แสดงผลไดถกตอง

สาระสาคญ รปแบบไฟลตางๆ ทเหนบนจอภาพในระบบอ นเตอรเนตนน จะถกจดเกบในรปแบบ

HTML ซงเปนเอกสารทสามารถเชอมโยงขอมลไปยงเอกสารอนได โดยการเขยนเปน แทก (Tag) คาสง และจะถกอานคาสง โดยโปรแกรมบราวเซอรตางๆ เชน Internet Explorer, Firefox, Safari, Opera, Google Chrome แลวแสดงผลออกมาเปนตวอกษร ภาพ และเสยง

ภาษา HTML เปนภาษาคอมพวเตอรรปแบบหนง ทมโครงสรางการเขยนโดยอาศยตวกากบ (Tag) ควบคมการแสดงผลขอความ รปภาพ หรอวตถอนๆ ผานโปรแกรมเบราเซอร แตละ Tag อาจจะมสวนขยายทเรยกวา Attribute สาหรบระบหรอควบคมการแสดงผลของเวบใหเปนไปตามทผออกแบบเวบไซตกาหนด ไว

HTML เปนภาษาทถกพฒนาโดย World Wide Web Consortium (W3C) จากแมแบบของภาษา SGML (Standard Generalized Markup Language) โดยตดความสามารถบางสวนออกไป เพอใหสามารถทาความเขาใจและเรยนรไดงาย และดวยประเดนด งกลาว ทาใหบรการ WWW เตบโตขยายตวอยางกวางขวางตามไปดวย

คดแลวตอบ นกเรยนเคยสงสยบางไหมวา หนาเวบเพจทเราดสวยงามนนเขยนขนอยางไร ? อยากร

ใหคลกทเมน View ในบราวเซอรแลวเลอก Page Source สงทพบคอ ...


หนวยท 3 ตกแตงเวบเพจดวยรปภาพ

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

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

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

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

คดแลวตอบ นกเรยนเคยสงเกตรปภาพทแสดงผลในหนาเวบเพจหรอไม? รปภาพบางชนดมความ

คมชดรายละเอยดสง บางภาพขาดรายละเอยด มสผดเพยน บางภาพสามารถเคลอนไหวได เราจะเลอกรปภาพมาใชงานอยางไรจงจะเหมาะส ม...

ตกแตงเวบเพจดวยรปภาพ


48

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

1. ชนดของรปภาพทนามาใชได

2. แหลงทมาของภาพ

3. รปแบบของคาสงตางๆ

1. ชนดของรปภาพ เวบบราวเซอรสวนใหญจะสนบสนนฟอรแมตของรปภาพดง ตอไป น

1.1 ไฟล Gif (Compuserve Graphics Interchange Format) อานวา จฟ หรอ กฟ มนามสกลเปน *.gif ไฟลบตแมตชนดนเปน ไฟลชนดบบอดขอมล สามารถแสดงสไดสงสดเพยง 256 ส เหมาะสาหรบใชจดเกบภาพการตน หวขอเรอง ทมความละเอยดของสสนนอยแสดงผลไดเรว รวมทงสนบสนนการแสดงภาพเคลอนไหวได ทาใหเปนภาพชนดพนโปรงใส (Transparency) จงมความนาสนใจมากขน มความสา มารถในการแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยด (Interlace)

1.2 ไฟล JPEG หรอ JPG (Joint Photographic Experts Group) อานวา เจ -เพก มนามสกลเปน *.jpg เปนไฟลชนดบบอดขอมลทมขนาดเลกมาก และแสดงสไดสงสดถง 16.7 ลานส ทาใหภาพมความคมชดสง เนองจากไฟลชนดนผานการบบอดขอมลมาก จงใชเวลาในการคลายภาพ กลบมาเพอแสดงผลนานกวาไฟล GIF มระบบการแสดงภาพแบบหยาบแลวคอยๆ ละเอยดชดเจนขนแบบ Progressive มจดออนทไมสามารถทาพนโปรงใสได จงควรเลอกใชใหเหมาะสม

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

1.3 ไฟล PNG (Portable Network Graphic) อานวา ปง เปนไฟลทถกพฒนาขนมาแทนไฟล GIF และไฟล JPG ซงเปนการดงเอาคณสมบตเดนๆ ของไฟลทงสองรปแบบมาใชงาน เชน สนบสนนจานวนสไดมากเหมอนภาพ JPEG แตการแสดงผลแบบหยาบไปละเอยดเลอกใชแบบ Interlace เหมอนภาพ GIF ทาพนโปรงใสไดด วย แสดงผลไดอยางรวดเรว ในปจจบนไดมการนาเขามาแทนทรปภาพชนด JPEG และ Gif แลว โปรแกรมตกแตงภาพหลายคายกสนบสนนการ เปดและบนทกไฟลสกลน ในระบบปฏบตการทมพนฐานจาก Unix เชน Linux, Mac OSX จะใชภาพสกลนเปนหลกในการบนทกภาพจากซอฟทแวรต างๆ



49

ไมวาจะใชรปภาพแบบใด สงทตองพจารณากอนการนามาใชงานคอ เรองขนาดทมความ เหมาะสม ไมใหญจนทาใหบดบงเนอหาหรอเลกจนไมสามารถบอกรายละเอยดอะไรได มขนาด ของไฟลเฉลยอยระหวาง 10 KB ถง 50 KB

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

2. แหลงทมาของรปภาพ ในการนารปภาพมาใชงานในหนาเวบเพจนน จะตองคานงถงลขสทธของภาพทนามาใช

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

2.1 วาดขนเองดวยโปรแกรมวาดภาพ เชน Photoshop, Paint Shop Pro, CorelDRAW,

PhotoImpact หรอโปรแกรมอนๆ ซงตองใชความสามารถและความชานาญในขนสง

2.2 สแกนดวยเครองแสกนเนอรจากภาพถาย หรอหนงสอ สงพมพ ซงอาจมลขสทธภาพ ตอง ขออนญาตจากเจาของลขสทธนน

2.3 บนทกภาพดวยกลองดจตอล จากสถานทตางๆ นามาป รบปรงใหเหมาะสมกบเนอหาดวย ฝมอการถายภาพของเราเอง

2.4 ซอคลปอารตรปภาพหรอ Photo CD มาใชงาน

2.5 ดาวนโหลดรปภาพจากเครอขายอนเทอรเนตทไมสงวนลขสทธมาใชงาน ซงในปจจบนมอยจานวนมากทระบวา เปนภาพทมลขสทธแบบ Creative Commons (CC) ซงเรานามาใชเพอ การเผยแพรทางการศกษาได แตหาม รวบรวมนาไปจาหนาย หรอนาไปใชประโยชนทางการคา เชน http://www.freephotobank.org/ สงเกตไดจากเครองหมาย

ครเอทฟคอมมอนส (Creative Commons: CC) คอองคกรทไมแสวงหาผลกาไรจดตงขน เพอขยายขอบขายของการใชสอตางๆ ใหกวางขนโดยไมจากดทสญญาอนญาตของสอนนๆ สญญาอนญาตของครเอทฟคอมมอนส จะเออใหมการใชสอทงทางภาพ เสยง ขอมล โดยการแบงแยกสญญาอนญาตยอยออกสาหรบการแจกจายและการใชขอมล โดยการอางองถงเจาของลขสทธเดม ครเอทฟคอมมอนสกอตงโดย ลอวเรนซ เลสสก ซงปจจบนบรหารงานโดย โจอจ อโต (จอย อโต)

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

50

สญญาครเอฟทฟคอมมอนสในภาษาไทย จดทาขนโดย ความรวมมอของ สานกกฎหมายธรรมนต สถาบน ChangeFusion และสถาบนเทคโนโลยนานาชาตสรนธร มหาวทยาลย ธรรมศาสตร โดยรองรบตามหลกเกณฑครเอทฟคอมมอนส รน 3.0 และปรบใหเขากบกฎหมายลขสทธไทย จง สามารถใชบงคบไดตามกฎหมายไทย ประกาศเปดตวเมอวนท 2 เมษายน พ.ศ. 2552 เปนลาดบท 51 ของโลก (รายละเอยดดไดท http://creativecommons.org/international/th/) 3. คาสงในการแทรกภาพในเวบเพจ

3.1 รปแบบคาสง

<IMG SRC=“ชอรปภาพ” หรอ “path/file name” หรอ “image URL”>

สาหรบคาสง <IMG SRC> เปนการเรยกรปภาพดวยการระบตาแหนงทเกบภาพใหถกตอง ถาระบผดตาแหนงบราวเซอรจะไมสามารถแสดงผลรปภาพนนไดและมเครองหมายกากบาท แทนท การระบตาแหนงและชอไฟลจะแตกตางจากทเราเคยระบในระบบปฏบตการวนโดวปกต ถอเปนมาตรฐานของการอางไฟลบนเวบ ระวงเรองชอไฟลทมอกษรตวเลกตวใหญผสมกนเมออาง ผดในคาสงแลว การแสดงผลในบราวเซอรจะทาไมไดตองทาการแกไขกอนเสมอ ดงตวอยาง

การอางไฟลในระบบวนโดวปกตบอกเสนทางดวยแบคสแลช (\)

C:\images\bird.jpg

การอางไฟลในการเขยนเวบเพจบอกเสนทางดวยแสลช (/) <IMG SRC=“images/bird.jpg”>

<IMG SRC=“http://www.easyhome.in.th/images/bird.jpg”>

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

<IMG SRC=“images/Bird.jpg”>

<IMG SRC=“images/Bird.Jpg”>

<IMG SRC=“images/BIRD.jpg”>

<IMG SRC=“images/bird.JPG”>

สงเกตทอกษรตวเลกตวใหญ ในระบบปฏบตการวนโดวจะเหนวาคาสงทงสบรรทดเปน การเรยกรปเดยวกนมาแสดงผล แสดงผลในเครอง ทมระบบปฏบตการวนโดวไดไมมปญหา แตใน ระบบปฏบตการยนกสหรอลนกสทนยมใชกนมากบนเครอขายอนเทอรเนตจะมองเหนคาสงทงส บรรทดเปนการเรยกรปทแตกตางกนสรปมาแสดงผล วธการแกไขทงายทสดคอ ใหเราเปลยนชอ ไฟลทกไฟลในการใชงานบนเครอขายอนเทอรเนตเปนอกษรตวเลกทงหมด เมออางชอไฟลจะได สะดวกขน ไมสบสนวารปใด เปนรปเกยวกบอะไร ใหแยกความแตกตางของชอดวยเลขเรยงลาดบ เชน bird_01.jpg, bird_02.jpg, bird_11.jpg เปนตน

51

การเพมเตมสวนขยาย (Attribute) ใหรปภาพ

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

3.2 การใสคาอธบายในภาพ

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

<IMG SRC=“ชอรปภาพ” ALT=“ขอความทตองการแสดงเกยวกบรปภาพ ”>

<IMG SRC=“images/prasart_peung.jpg” ALT=“งานแหปราสาทผง จงหวดสกลนคร ”>

ผลจากการแสดงผลเมอนาเมาสไปวางเหนอภาพ

3.3 การกาหนดขนาดภาพ

ในบางครงเมอเรานารปภาพมาใชงานอาจจะมขนาดไมตรงกบทเราตองการเลกนอย เชน ใหญหรอเลกไป 10 pixels เราสามารถใชวธการกาหนดขนาด ความกวางหรอความสงของภาพไดดวยคาสง WIDTH=“number” และ HEIGHT=“number” ได โดยตวเลขจะมหนวยเปนพกเซล

<IMG SRC=“images/bird.jpg” ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92”>

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

<IMG SRC=“images/bird.jpg” WIDTH=“250” HEIGHT=“92” ALT=“Lovely Bird”>

<IMG ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92” SRC=“images/bird.jpg”>

การกาหนดคาตายตวแบบนสามารถใชไดทงการเพมหรอลดขนาดของภาพ ในกรณท ตองการขยายขนาดของภาพโดยใหคงอตราสวนของภาพเดมไวถ กตองเสมอ เราสามารถใชแทกน

<IMG SRC=“ชอรปภาพ” WIDTH=“X%”>

52

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

3.4 การกาหนดเสนขอบภาพ

ในบางกรณเราอาจตองเพมความนาสนใจใหกบรปภาพดวยการแสดงเสนขอบ (โดยเฉพาะในกรณทาเปนจดเชอมโยง รายละเอยดในบทตอไป ) เราสามารถใชแทก BORDER=“number” ได โดยคาตวเลขทระบจะมหนวยเปนพกเซล ถาไมตอ งการเสนขอบใหกาหนดคาเปนศนย

<IMG SRC=“images/bird.jpg” ALT=“Lovely Bird” WIDTH=“250” HEIGHT=“92” BORDER=“2”>

3.5 การจดวางตาแหนงรปภาพ

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

นองเหมยวนารก

เราสามารถกาหนดการแสดงผลของรปภาพดวยแทก ALIGN=“X” ไดดงน

การแสดงผล คาสงทใชกาหนดตาแหนง ตาแหนงทแสดงผล

1. แบบแนวตงเปน

คาสงทใชกบ

รปภาพ

ALIGN=”LEFT” ALIGN=”RIGHT”

ตาแหนงซายของจอภาพ

ตาแหนงขวาของจอภาพ

2. แบบแนวนอนเปนคาสงทใชกบ

ขอความ

ALIGN=”TOP”, “TEXTTOP” ALIGN=”MIDDLE”,

“ABSMIDDLE” ALIGN=”BOTTOM”, “BASELINE”,

“ABSBOTTOM”

ตาแหนงบนสดของรปภาพ

ตาแหนงกงกลางของรปภาพ

ตาแหนงลางสดของรปภาพ

ขอสงเกต ถาขอความทแสดงผลมความยาวเกนไป เมอใชคาสง ALIGN=“TOP” หรอ ALIGN=“MIDDLE” ขอความสวนทลนบรรทดจะถกตดมาแสดงผลใตรปภาพ ซ งอาจจะขาดความสวยงามและไมเหมาะสม ดงนนทงสองคาสงจงเหมาะกบการแสดงผลดวยขอความสนๆ เทานน

53

ลกษณะการแสดงผลของตาแหนงขอความใน คาสง ALIGNMENT จะมดงน

3.6 การกาหนดชองวางระหวางขอความกบรปภาพ

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

<IMG SRC=“ชอรปภาพ” VSPACE=“number” HSPACE=“number”>

เมอ VSPACE คอชองวางตามแนวนอน (บนและลางของรปภาพ ) มหนวยเปนพกเซล และ HSPACE คอชองวางตามแนวตง (ซายและขวาของรปภาพ) มหนวยเปนพกเซล

<IMG SRC=“images/apinksax.jpg” ALT=”Pink Sax Man” WIDTH=“160” HEIGHT=“200” BORDER=“2” VSPACE=”5” HSPACE=“10”>

ภาพซายเวนระยะขอบแนวนอน (10)และแนวตง (5) ภาพขวาเปลยนคาเปน 20,20



54

เราจะทดลองกาหนดการแสดงผลรปภาพในแบบตางๆ กน จากตวอยาง เรากาหนดโฟลเดอรสาหรบ เกบรปภาพไวชอโฟลเดอร images เมอเขยนคาสงเพอการแสดงผลจงตองอางองโฟลเดอรเกบภาพดวย ดงไฟลตวอยาง ขางลาง น

ผลลพธทไดเปนดงภาพน

ตวอยางไฟลคาสงการแทรกภาพในเวบเพจ

ตวอยางหนาเวบเพจแทรกรปภาพจากไฟล image_01.html



55

ทดลองสรางไฟลทแตกตางจากเดม ดวยการเปลยนคาสวนขยายของคาสงรปภาพเพมเตม แลวจดเกบ ไฟลในชอ image_02.html ทดสอบการแสดงผลผานบราวเซอร ดคว ามแตกตางทเกดขน วา มาจากการแกไขหรอเพมเตมสวนขยายคาสง ใด

ตวอยางไฟลคาสงการแทรกภาพในเวบเพจเพมเตมและการแสดงผลหนาเวบเพจในบราวเซอร

จะเหนไดวา การวางขอความและรปภาพในหนาเวบเพจของเรายงกระจดกระจาย ดไมสวย งาม ไรระเบยบ

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

56

3.7 การกาหนดภาพฉากหลงดวยสวนขยาย BACKGROUND

การกาหนดใหรปภาพเปนฉากหลงโดยใชสวนขยาย BACKGROUND=“Image URL”

มกจะใชในคาสง <BODY> เสมอ เปนคาสงทกาหนดการแสดงรปภาพทเราตองการซงอาจจะไม เกยวของกบขอมลเนอหา ในเวบไซตของเรา แตตองไมขดแยงหรอแยงความนาสนใจไปจากเนอหา ทเราตองการนาเสนอ

ตวอยางภาพพนหลงขนาดเลกทนยมใชกนในเวบเพจ

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

ภาพเปรยบเทยบการใชพนหลงทมลวดลายยงเหยง และภาพลวดลายสจาง

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

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



57

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

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

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



58

กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 3 เสรจสนแลว ใหนกเรยน แตละ คน ทากจกรรมดงน 1. ศกษาหาความรเพมเตมในการสรางภาพกราฟกใชในเวบเพจจาก แหลงเรยนรตางๆ

เชน http://www.thaigraph.com/discuz/ 2. ใหนกเรยนทดลองการใชคาสง แทรกรปภาพในตาแหนง ตางๆ และกาหนดสวนขยาย

เพมเตมนอกเหนอจากในตวอยาง แลวทดสอบการแสดงผลผานบราวเซอร

คาถามทายบท 1. จงจบคขอความทมความเกยวของกนใหถกตอง

……… 1) ภาพ JPEG A. ระยะหางของขอบรปภาพ ……… 2) ภาพ PNG B. เหมาะกบภาพบคคล ทวทศน ……… 3) ภาพ GIF C. แสดงผลไดมากกวา 256 ส เคลอนไหวได ……… 4) VSPACE D. แสดงคาอธบายเกยวกบภาพ ……… 5) ALT E. แสดงผลได 256 ส เคลอนไหวได

2. จงใหความหมายและการนามาใชของภาพทมสญลกษณ CC กากบ 3. จงบอกความหมายของคาสงสวนขยายรปภาพต อไปนพอสงเขป

Boder …………………………………………………………………………………...

Align ……………………………………………………………………………………

Vspace …………………………………………………………………………………

Hspace …………………………………………………………………………………

Width …………………………………………………………………………………..

Height …………………………………………………………………………………

Alt ……………………………………………………………………………………..

ภาษา HTML


26

กาเนดภาษา HTML HTML (เอชทเอมแอล - เปนคายอจากคาขนตนของ Hyper Text Markup Language) เปน

ภาษามารกอปหลกในปจจบนทใชในการสรางเวบเพจ หรอขอมลอนทเรยกดผานทาง เวบเบราเซอร ซงตวโคดจะแสดงโครงสรางของขอมล ในการแสดง หวขอ ลงก ยอหนา รายการ รวมถงการสรางแบบฟอรม เชอมโยงภาพหรอวดโอ โครงสรางของโคดเอชทเอมแอลจะอยในลกษณะภายในเครองหมายมากกวา/นอยกวา เชน <html>, <Table>, 

เอชทเอมแอลเรมพฒนาโดย ทม เบอรเนอรส ล (Tim Berners Lee) เมอป พ.ศ. 2523 ดวยชอโครงการ “ขอความหลายมต (Hypertext)” ขณะททางานอยท ศนยปฏบตการวจยทางอนภาคฟสกสของยโรป (CERN) ซงตงอยทกรงเจนวา สวตเซอรแลนด ในครงแรก ทม เพยงคดอานวยความสะดวกใหกบบรรดานกวทยาศาสตรของสถาบนใหคนหาขอมลงายขน ในป พ.ศ. 2537 ทม ไดกอตงกลมบรษทเวลดไวดเวบ (World Wide Web

Consortium : W3C) ขนท สถาบนเทคโนโลยแหงแมสซาชเสตส หรอเอมไอท ประกอบดวยบรษทหลายบรษททเกยวของในเครอขายอนเทอรเนต ทตาง พรอมใจ

มารวมสรางมาตรฐาน และขอเสนอแนะ สาหรบใชเปนหลกในการปรบปรงคณภาพของเวบไซตและการแสดงผลของบราวเซอรของทกคายผผลต ดวยมาตรฐานเดยวกน

ภาษา HTML เปนภาษาทงายตอการเรยนร มคาสงทสามารถทาความเขาใจไดงาย เพอสอความหมายคลายกบภาษาพดของมนษย เชน <Table width=”100%”> หมายถงตารางกวาง 100% มสวนขยายรายละเอยดเพมเตม การตความจากคาสงเพอใหเกดการแสดงผลของผออกแบบและ บราวเซอรจงไดผลใกลเคยงกน

แมวาในปจจบนจะมการเขยนเวบไซตดวยภาษาอนๆ เชน ASP, PHP, JSP หรออนๆ แตทกภาษาเหลานนกยงคงใชภาษา HTML เปนพนฐานหลกในการควบคมการแสดงผลของเวบไซตอย นนเอง

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

เซอรทม เบอรเนรส-ล

ผคดคนและประดษฐเวลดไวดเวบ

ภาษา HTML


27

ภาษา HTML ไมยากอยางทคด ถาจะบอกวาเราสามารถสรางเวบเพจดวยภาษา HTML ไดในเวลาไมเกน 30 นาท อาจจะคด

วาเปนคากลาวทเกนจรง กจกรรมตอไปนจะชวยใหเราพสจนถงความจรงในคากลาวดงกลาว เตรยมเครองมอสาหรบการสรางงาน ประกอบดวย เครองคอมพวเตอรพรอมระบบ

ปฏบตการและซอฟทแวรแกไขขอความ (Text Editor) บราวเซอรสาหรบการแสดงผล โดยแยกตามระบบปฏบตการดงน

1. ระบปปฏบตการ Windows ใช Notepad ในการเขยนคาสง ใชบราวเซอร Internet Explorer หรอบราวเซอรอนๆ ในการแสดงผล

2. ระบบปฏบตการ Linux ใช Text Editor ในการเขยนคาสง ใชบราวเซอร Firefox หรอบราวเซอรอนๆ ในการแสดงผล

3. ระบบปฏบตการ Mac OS X ใช Text Editor ในการเขยนคาสง ใชบราวเซอร Safari หรอบราวเซอรอนๆ ในการแสดงผล

ใหพมพคาสงภาษา HTML งายๆ บนซอฟทแวรแกไขขอ ความในแตละระบบปฏบตการทเราใชงานอยในเครองคอมพวเตอร ดงตอไปน

<HTML> <head> <title>Welcome to My First Page : เวบเพจแรกของฉน</title> </head> <body> Welcome to My First Page : นคอเวบเพจแรกของฉน </body> </HTML> การพมพคาสงเม อพมพเครองหมาย < (นอยกวา) จะตองพมพอกษรตวแรกของคาสงตอไป

ทนทไมตองเคาะเวนวรรค คาสงจะใชตวอกษรตวใหญหรอตวเลกกไดแลวบนทกไฟลนดวยชอ index.html กรณทเปนระบบปฏบตการวนโดวและใช Notepad เขยนโคดคาสงเมอทาการบนทกไฟลจะตองเปลยนชนดของการบนทกไฟลเปน All files (*.*) กอน

จากนนใหเปดบราวเซอรทแนะนาไวในแตละระบบ ปฏบตการ ทเมน File เลอก Open File เลอกไฟล index.html เพอแสดงผลไฟลเวบเพจหนาแรกของเราไดแลว

ภาษา HTML


28

การพมพคาสงใน Notepad บนวนโดว

การพมพคาสงใน Text Editor บนลนกส

การแสดงผลใน Internet Explorer

การแสดงผลใน Firefox Browser

ภาพแสดงการเขยนคาสงใน Notepad บนระบบปฏบตการวนโดวเปรยบเทยบกบการเขยน

ใน Text Editor บนระบบปฏบตการลนกสไมแตกตางกน และเมอแสดงผลในบ ราวเซอรกใหผลลพธแบบเดยวกนอยาง ถกตอง

ภาษา HTML


29

การพมพคาสงใน Text Editor บนระบบปฏบตการ Mac OS X

การแสดงผลในบราวเซอร Safari และ Firefox บนระบบปฏบตการ Mac OS X

ภาษา HTML


30

โครงสรางภาษา HTML โครงสรางของภาษา HTML ถกกาหนด ใหมมาตรฐานเดยวกนเพอให สามารถนาไปใช

ประโยชนไดครอบคลมและแสดงผลไดดในทกบราวเซอร โดยมคาสง (tag) ในภาษา HTML ซงประกอบดวยเครองหมายนอยกวา (<) และเครองหมายมากกวา (>) ซงบรรจคาสงอยภายใน <คาสง > คาสงสวนใหญจะเปนคาสงแบบคคอ มคาสงเป ดและคาสงปด เชน ... ในคาสงปดจะมเครองหมายสแลช (/) นาหนาคาสงดวยเสมอ แต กมบางคาสงทไมจาเปนตองมคาสงปดทายอก

คาสงแตละคาสงอาจมสวนขยาย (Attributes) เพอเพมเตมในรายละเอยดของคาสงนนๆ ได อก และสามารถมสวนขยายไดหลาย ๆ สวน โดยในแตละสวนใหคนดวยชองวาง (เวนวรรค) เพอใหบราวเซอรตความหมายในการแสดงผลไดถกตอง

โครงสรางของภาษา HTML จะประกอบดวย 3 สวนหลกๆ คอ 1. สวนกากบเพอระบไฟล HTML 2. สวนหวเอกสาร (Header) 3. สวนเนอหาของเอกสาร (Body)

1. สวนกากบเพอระบไฟล HTML คาสง <HTML> … </HTML> เปนการกาหนดใหบราวเซอรรจกวาเปนไฟลภาษา HTML

เพอการแปรผลคาสงให แสดงผลไดอยาง ถกตอง ตวอกษรของคาสงจะเขยนดวยอกษรตวเลกหรอตวใหญกได เชน <HTML> หรอ <html> การแปรผลของบราวเซอรจะใหความหมายเดยวกน

ภาษา HTML


31

2. สวนหวเอกสาร (Header) ขอกาหนดของสวนหว (Header) ของเอกสาร HTML คอขอความทงหมดทอยภายใตแทก

<HEAD> และ </HEAD> ซงประกอบดวยขอความทจะไปปรากฏบนไตเตลบาร (แถบดานบนของบราวเซอร) และขอกาหนดอนๆ ทจะเปนตวบอกใหบราวเซอรหรอเซรฟเวอรส งขอมลไปแสดงผลใหไดถกตอง ซงขอมลเหลาน (นอกจากขอความในไตเตล ) จะไมไดปรากฏบน หนาเวบเพจเลย แตจะทางานอยเบองหลงซงมความจาเปนเพอบอกรายละเอยดสาคญของหนาเวบเพจ ไดแก

3.1 แทก <TITLE> ตามมาตรฐาน HTML 4.0 กาหนดวา เอกสารเวบเพจทกไฟลจะตองมแทก <title> เพอ

กาหนดชอเรองของเวบเพจนนๆ เสมอ เพราะวาขอความทใชเปนชอเรองของเวบเพจจะถกโปรแกรม Search Engine ใชทาสารบญเวบเพจ จงควรตงชอเรองใหตรงกบจดประสงคของเวบเพจ หนานนๆ ไมควรปลอยวางไวหรอระบเปน Untitle page ทสาคญควรเปนชอภาษาองกฤษ (กจะทางานในระดบอนเทอร (เนต) ใหชมชนออนไลนในโลกนเขาใจแลว ถาตองการใหมชอภาษาไทยรวมดวย อาจใชเครองหมายโคลอน (:) คนระหวางสองภาษา ดงตวอยาง

<TITLE>Tip & Tricks : เทคนคและกลเมดเคลดไมลบ </TITLE>

3.2 แทก <META>

ตามขอกาหนดของมาตรฐาน HTML ไมไดกาหนดหนาทของแทก <META> ไวตายตว เพยงแตกาหนดใหแทกนเปนคาสงพเศษเพมเตมทคาสงอนๆ ไมสามารถทาได จงม ผออกแบบใชแทกนกนไปหลายแนวทางตามแตจดประสงคของ แตละคน ดวยเหตนแทกตวนจง สามารถทางานไดหลายหนาทขนอยกบวาจะใชสวนขยายเปนรปแบบไหนและกาหนดคาอยางไร เทาทพบมการนามาใชกนอย 4 รปแบบคอ

HTTP-EQUIV ใชกาหนดขอมลทจะนาไปสราง HTTP header ซงเปนขอมลสาคญทใชในการรบสงขอมลโดยโปรโตคอล HTTP

NAME ใชระบชอคณสมบตของเอกสาร เชน author, description, expiration, date และ keyword (คาสาคญท Search engine ใชคนหาเวบเพจตามหมวดหมทตรงกบความตองการหรอไม ) เปนตน ซงจะตองสงไปพรอมกบคาคณสมบตทระบโดยสวนขยาย CONTENT

ภาษา HTML


32

CONTENT ใชกาหนดคาคณสมบตของเอกสารทตองการสงใหก บเวบเซรฟเวอรหรอการกาหนดชอเฉพาะ ตองสอดคลองตรงกนกบสวนขยายใน NAME

SCHEME ใชกาหนดรปแบบในการตความขอมลทอยในสวนขยาย CONTENT มกพบในเวบไซตทมทตงในอเมรกา ดงตวอยาง <META SCHEME=”9-digit-ZipCode” NAME=”zip” CONTENT=”02134-1078”>

การใชงานของแทก <META> มหลายแนวทางแตตวอยางทใหตอไปนถอวาเปน มาตรฐานสากลททกเวบเพจควรมไวเสมอ ไดแก

การกาหนดรหสเพอแสดงอกขระภาษาใหถกตอง เราสรางเวบเพจภาษาไทยดงนน การกาหนดใหบราวเซอรแสดงผลดวยอกขระภาษาไทยจงมความจาเปนอยางยง ซงม 2 แบบคอ windows-874 ซงกาหนดโดยไมโครซอฟท และ TIS-620 กาหนดโดย NECTEC ใหใชแทกน

<meta http-equiv="content-type" content="text/html; charset=windows-874"> <meta http-equiv="content-type" content="text/html; charset=TIS-620">

ในปจจบนน เพอใหเว บไซตตางๆ มความเปนสากล บราวเซอรสามารถแสดงอกขระในภาษาตางๆ ไดครอบคลมหลายภาษามากขน จงมการใชรหสภาษาแบบยนโคด (UTF-8) มากขน โดยเฉพาะการทาเวบทตองเกยวของกบฐานขอมลหรอเครองแมขายทใชระบบปฏบตการ รนใหมๆ ปจจบนหนมาใหการสนบส นนรหสภาษาแบบ UTF-8 แทบทงสน ควรเลอกใชใหเหมาะสม (หรอสอบถามผใหบรการเครองแมขาย )

<meta http-equiv="content-type" content="text/html; charset=UTF-8"> การกาหนดชอเจาของเวบไซต หรอผออกแบบเวบไซตนนๆ เพอใหผชมสามารถ

คนหาและตดตอกลบได สะดวก <meta name="author" content="Montree Kotkanta : [email protected]">

การกาหนดคาอธบายเกยวกบเวบไซต ซงอาจเปนการบอกเลาถงชอ หรอภารกจ ของหนวยงาน หรอวตถประสงคของการจดทาเวบไซตกได ดวยการเขยนเปนประโยคบอกเลาซงม ความยาวไดถง 256 ตวอกษร คาอธบายเหลานจะไปปรากฏในฐานขอมลของ Search engine ดวย ดงตวอยาง

Benchama.ac.th

<meta name="description" content="Benchama Maharat School is welknown secondary school in North-Eastern part of Thailand.">

Easyhome.in.th

<meta name="description" content="EasyHome is a complete webpage to learn about building homepage by using the basic tool & HTML.">

ภาษา HTML


33

IsanGate.com

<meta name="description" content="Saon Homepage is Isan natives home of priceless treasure.">

ตวอยางการคนหาเวบไซต Isangate.com จาก Yahoo

การกาหนดคาหลกสาหรบการคนหาผานเวบไซตคนหาขอมล (Search engine) เปนสงจาเปนและสาคญยงในการโปรโมตเวบไซตของเราใหเขาไปอยในกลมของเวบไซตตางๆ ใน ฐานขอมลของ search engine ชอดงๆ อยาง Google, Yahoo, Lycos, Excite หรอเวบไซตของไทยอยาง Sanook.com เปนตน <meta name="keywords" content="ben, benchama, benjama, bm, bmnet, k-12, secondary school,

ubon, ubonratchathani, isan, esarn, northeast, thai, Thailand."> <meta name="Keywords" content="isan, saon, i-san, sa-on, art, cultural, thai, morlum, folk,

song, music, drama, dhamma, cha supatto, Thailand, north-eastern, isaan, e-sarn, ubon, ubonratchathani.">

การเขยนคาหลกนนเราสามารถกาหนดคาทคาดวาผชมจะใชคนหาเมอนกถง เวบไซตของเรา เปนคาทตดปาก อาจเปนชอเตม ชอยอ ชอสถานทสาคญ ชอเมอง ชอประเทศ ชอบทความ ชอคนเขยน คาเดน หรอคาทมสวนเกยวของกบเวบเรา สามารถใสคาไดมากมายถง 256 ตวอกษร ในแตละคาใหคนดวยเครองหมายคอมมา (,)

ภาษา HTML


34

ผลการคนหาจากคาหลกของเวบไซต www.benchama.ac.th ดวยคา benchama bmnet

3.3 แทก <LINK> แทกนจะทาหนาทในการอางองถงขอมลจากไฟลอนๆ ทเกยวของกบไฟล HTML ท

เปดในขณะน การอางองมจดประสงค 2 ประการคอ 1) อางถงไฟลขอมลตวอนเพอกาหนดใหบราวเซอรดงขอมลนนมาใชประโยชนใน

ไฟลปจจบน ตวอยางลกษณะนไดแกการอางองไฟลกาหนดรปแบบหรอสไตลชททเกบในไฟลอน มาแสดงผล (รายละเอยดจะกลาวถงใน หนวยท 6) ดงตวอยางน

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

2) ใชอางถงไฟลอนๆ เพอแสดงขอมลเพมเตม ในลกษณะการขยายราย ละเอยดทสมพนธถงกน ดงตวอยาง

<link title=”The manual in Thai” type=”text/html” rel=”alternate” hreflang=”th” href= “http://www.easyhome.in.th/technical/flashget.htm>

จากตวอยางนห มายถง เราจะอางถงไฟลทเปนคมอการใชงานภาษาไทยซงมความสมพนธกนกบไฟลปจจบน ไฟลทอางถงอยทเวบไซตใด ชอวาอยางไร

ภาษา HTML


35

3. สวนตวเอกสาร (BODY) เปนสวนทมความสลบซบซอน และมรายละเอยดมากทสดของไฟล อยภายใตคาสง

<BODY> และ </BODY> ภายในแทกนยงมสวนขยายเพมเตม อกมากเพอแสดงรายละเอยดของการแสดงผลในหนานอกหลายคาสงดงน

3.1 แทก <BODY> ภายในแทกนจะมการกาหนดรายละเอยดเพมเตมพนฐานเขาไปทนยมใชกนมากกจะ

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

Attribute ความหมายของสวนขยาย

BACKGROUND ใชกาหนดชอไฟลทใชเปนพนหลง BGCOLOR ใชกาหนดสพน หลง

BGPROPERTIES กาหนดคณสมบตใหกบภาพพนหลง ถาเปน FIXED ภาพพนหลงจะไมเลอน ตามการปรบของแถบเลอน (Scroll bar)

LEFTMARGIN กาหนดระยะหางจากขอบ จอดานซายมหนวยเปน Pixels TOPMARGIN กาหนดระยะหางจากขอบ จอดานบนมหนวยเปน Pixels

TEXT กาหนดสของ ตวอกษรภายใตแทก <BODY> และ </BODY> ทงหมดใหมสตามทกาหนดไว เวนแตจะมคาสงอนๆ กาหนดแยกตางหาก

LINK กาหนดสของขอความทเปนจดเชอมโยง ทมสถานะยงไมเคยถกเรยกใชงาน ALINK กาหนดสของขอความทเปนจดเชอมโยง ทมสถานะกาลงถกเรยกใชงาน VLINK กาหนดสของขอความทเปนจดเชอมโยง ทมสถานะเคยถกเรยกใชงานแลว

ตวอยางของรปแบบคาสงจะเหนวาสวนขยายทกตวจะเขยนเรยงตอกนไปภายในแทก <BODY> โดยมชองวางคนระหวางสวนขยายนนๆ เชน

<body BGCOLOR=“white” BACKGROUND=“images/lotus.jpg” TEXT=“navy” LINK=“red” ALINK=“green” VLINK=“magenta”>

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

ระยะหางของขอบจอจะกาหนดระยะเปนพกเซล ถาไมระบจะมคาเปน 1

ภาษา HTML


36

3.2 แทก <Hx> … </Hx>

เปนการกาหนดขนาดตวอกษรหวเรองใหมขนาดตามตองการขนอยก บคาตวเลขทแทนคา X ในแทก ซงมคาตงแต 1 – 7 แทก <H1> จะมขนาดของตวอกษรใหญทสด และ <H7>

จะมขนาดตวอกษรเลกทสด (คาปกตของคาสงนคอตวอกษรทอยภายในจะเปนตวหนา และไม สามารถซอนแทกในบรรทดเดยวกนได ทกๆ แทกจะขนบรรทดใหมเสมอ ) ใหทดลองใชคาสงดงเชนตวอยางขางลาง จดเกบไฟลในชอ header.html แลวแสดงผลในบราวเซอร

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

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

ภาษา HTML


37

3.3 แทก เปนการกาหนดรายละเอยดของตวอกษรใหแตกตางหรอมจดเดนกวาสวนอนๆ เชน

ขนาด ส ลกษณะตวหนา/เอยง/ขดเสนใต เปนตน มสวนขยายรายละเอยดตางๆ ดงน 1) การกาหนดขนาดตวอกษรจะใชสวนขยายเปน size=“X” ซงมตวเลขขนาดได

ตงแต 1 - 7 เชนเดยวกบแทก <H> แตตรงกนขามกน นนคอตวเลขยงมากขนาดตวอกษรจะใหญขน เรอยๆ ใหทดลองพมพตามตวอยางขางลางน จดเกบไฟลชอ fontsize.html แลวแสดงผล

การพมพคาสงกาหนดขนาดของฟอนตแยกขนาดละหนงบรรทด แตผลในบราวเซอรจะพบวา แมจะใชคาสงละบรรทดแตการแสดงผลกลบเรยง ตอ กนไป ในแถวเดยว ซงตางจากแทก <Hx>

และถาไมกาหนดขนาด ฟอนตเลยบราวเซอรจะแสดงผลลพทธของขนาดเทากบ 3 เสมอ ดงนนเราจงสามารถใชคาบวก (+) และลบ (-) จากคามาตรฐาน ในคาสงนได เชน

ตวอกษรขนาด +1 มคาเทากบ 4 ตวอกษรขนาด -1 มคาเทากบ 2

ภาษา HTML


38

2) การกาหนดสใหกบตวอกษรจะใชสวนขยายเปน color=“ชอสหรอคาสเลขฐานสบหก” เนองจากการกาหนดสดวยชอไมสามารถใหความละเอยดไดมากนก สงสดอยทจานวน 16 ส ดงนนจงมการนาเอาคาสจากเลขฐานสบหกของแมสของแสงจานวน 3 ชดคอ RGB (Red Green

Blue) มาใชในคาสง HTML ดงน

คาของสจะเรมจาก สมดสด (คาเปน 0) ไปจนถงสวางสด (คาเปน F) จานวน 16 คา คอ

มด สวาง 0 1 2 3 4 5 6 7 8 9 A B C D E F

คาสจะใชเครองหมายชารฟ (#) นาหนากลมคาส 6 หลก (rrggbb) ดงตวอยาง

คาส RRGGBB คาส RRGGBB สดา #000000 สขาว #FFFFFF สแดง #FF0000 สเขยว #00FF00 สนาเงน #0000FF สฟา #00FFFF สเหลอง #FFFF00 สเทา #C0C0C0

รปแบบของแทกจะเปน ตวอกษรขนาด 5 สแดง

การใชคาเลขฐานสบหกนคงจะเปนการยาก ในการจดจาคาสตางๆ วาสใดมคาเทาใด เราจงตองใชซอฟทแวรชวยจดการเรองนให ซงสามารถคนหาไดจาก Search engine ทวไป ในทนแนะนา ใหใชสอแฟลชแอนเมชน ชอ col.swf ทสามารถใหคาสและกลมสใกลเคยงได ดาวนโหลด ฟรท http://www.krumontree.com/html/col_swf.html

หรอจะใชการหาคา Themes Color จากบรการออนไลนทเวบไซตครมนตรดอทคอม

ไดเชนกน ตามลงกน http://www.krumontree.com/html/color_table.html หรอใชคาสจากตารางในภาคผนวกของเอกสารทายเลม

ภาษา HTML


39

3) การกาหนดลกษณะของตวอกษรเราจะใชแทกคาสงพเศษนอกเหนอจากแทก ซงมการใชงานอยหลายรปแบบดงน

อกษรตวหนาใชแทก ตวอกษรหนา อกษรตวเอยงใชแทก ตวอกษรเอยง อกษรตวขดเสนใตใชแทก ตวอกษรขดเสนใต อกษรตวยกใชแทก ตวอกษรยก อกษรตวหอยใชแทก ตวอกษรหอย

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

ตวอกษรขนาด 5 สแดง

แสดงคคาสงของภาษา html

การจดขอความในเอกสาร เมอเราปอนขอความลงในโปรแกรม Text Editor หรอโปรแกรมสรางเวบไซตอนๆ แมจะ

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

3.4 แทก และ เปนคาสงสาหรบการตดคาขนบรรทดใหมทงค แตใหการแสดงผลทตางกนคอ (break) เปนคาสงทสงใหการแสดงผลบนจอภาพของโปรแกรมเวบบราวเซอร

แสดงผลในบรรทดใหม หรอเปนคาสงสาหรบบงคบใหขนบรรทด ใหม สวนใหญเราจะวางคาสงน ไวทตาแหนงสดทายของประโยค หรอแทรกระหวางคาทตองการ ใหเลอนไปแสดงผลในบรรทดถดไป คาสงนเปนคาสงเดยวไมตองมแทกปด

ภาษา HTML


40

 … (paragraph) เปนคาสงใหบราวเซอรแสดงผลขอความใน กากบของ แทกนขนยอหนาใหม โดยปก ตแลวบราวเซอรจะไมเขาใจการพมพบรรทดเปลาเพอเปนการเวน วรรค และขนยอหนาใหมหลงจากจบขอความในบรรทด คาสงน สามารถแทรกสวนขยาย เพมได ALIGN=“Left/Center/ Right” เพอกาหนดตาแหนงของขอความใหแสดงผลในตาแ หนงตางๆ บน จอได เชน

ขอความนอยกงกลางหนากระดาษ 3.5 แทก <HR>

คาสงน เปนคาสงเดยว ใชสาหรบการแบงขอความออกเปนสวนๆ ดวยการสรางเสนกน ตามแนวนอน จะทาใหขอความแบงออกเปนตอนๆ เกดความเปนระเบยบและสวยงาม

รปแบบของคาสง <hr WIDTH=“Pixels/Percentage” SIZE=“Pixels” ALIGN=“Left/Center/Right”>

WIDTH เปนการกาหนดความกวางของเสน สามารถกาหนดดวยคาตวเลขบอก จานวนหนวยเปนพกเซล หรอใชคาเปอรเซนตความกวางของจอกได

SIZE เปนการกาหนดความหนาของเสนคนมหนวยเปนพกเซล ALIGN เปนการจดวางตาแหนงของเสน คาปกตคอกงกลาง NOSHADE สวนขยายเมอตองการใหเสนกนนนเปนเสนทบ ใหทดลองสรางไฟลตามตวอยางตอไปนแลวจดเกบในชอ formattext.html แลวลอง

แสดงผลผานบราวเซอรด ลองแกไขคาตางๆ ดเพอหาขอแตกตางของคาสง

ไฟล formattext.html ทสรางเสรจแลวและการแสดงผลในบราวเซอรในหนาถดไป

ภาษา HTML


41

การแสดงผลในบราวเซอรของไฟล formattext.html

จากภาพประกอบขางตนเราจะมองเหนแลววา บรรดาสวนขยายเพมเตมในแทกตางๆ นน สามารถนามาใชรวมกนได ดงนนเราสามารถลองถกลองผดดวยการทดลองนาคาสงเหลานนมาใช งานด หากคาสงใดใชงานไดการแสดงผลในบราวเซอรจะรายงานออกมา ถาไมไดกจะไมปรากฏผล ใดๆ เราสามารถลบออกไดในภายหลง (จะไมมการแสดงความผดพลาดออกมาใหเหนโดยตรงเหมอนกบการเขยนโปรแกรม คอมพวเตอรทวไป )

สงหนงทเปนปญหาในเรองการจดขอความคอ เรามกจะมควา มตองการในการเวนชองวาง ระหวางตวอกษรมากกวา 1 ชองเพอเพมความสวยงามและการแยกสวนขอความ รวมทงการจดยอ หนาของขอความบรรทดแรกใหเยองเขาไปเพอเพมความสวยงาม เราไมสามารถทาไดดวยวธการ พมพตามปกต (เคาะวรรค/กดแทป) จะตองใชรปแบบการแสดงผลพเศษทเรยกวา การแทรกตวอกษรวาง (Unvisible seen) ลงไปในตาแหนงทตองการ ตวอกษรวางคอชดอกขระ 6 ตวประกอบดวยอกขระ พมพเรยงตดกนจะมคาเทากบการเคาะวรรค 1 ตวอกษร ดงนนถาตองการเวน 5 ตวอกษรกตองใสชดอกขระนลงไป 5 ชด

ภาษา HTML


42

การจดขอความแบบรายการ โดยปกตขอมลในเวบเพจจะประกอบไปดวย การแสดงผลดวยขอความธรรมดาในรป

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

การแสดงขอมลแบบรายการ (Lists) จะมการแสดงผล 3 แบบคอ

1. การแสดงขอมลรายการแบบเรยงลาดบ หรอแบบมตวเลขกากบ (Number Styles)

2. การแสดงขอมลรายการแบบไมเรยงลาดบ หรอแบบสญลกษณกากบ (Bulleted Styles)

3. การแสดงขอมลรายการแบบคาจากดความ หรอแบบไมมสญลกษณกาก บ (No

Bulleted Styles)

1. การแสดงขอมลแบบเรยงลาดบ <Oder Lists> รปแบบคาสง

<OL>

<LI>รายการท 1</LI> <Li>รายการท 2</Li> <li>รายการท 3</li>

</OL>

การแสดงผลของรายการยอยทอยภายในคาสง <OL> จะมการเวนระยะระหวางบรรทดขอความอย 1 บรรทดคลายๆ กบก ารใชคาสง และในการแสดงผลของหวขอแบบเรยงลาดบน คาปกตของคาสงคอรายการขอท 1, 2, 3, … เรยงตามลาดบไป อยางไรกตามเราสามารถเปลยน ลาดบจากการแสดงผลดวยตวเลขเปนการแสดงผลดวยวธการนบอนๆ ไดดวยการเพมสวนขยาย TYPE=“N” เมอ N มคาเปลยน ไปตามตาราง ผลกจะแตกตางออกไป และในแทกรายการ <li> เราสามารถกาหนดคาเรมตนการนบไดดวยสวนขยาย Value=“x” ดงตาราง

คาสง N เทากบ ลกษณะการแสดงผล

<OL TYPE=“1”> 1 ลาดบหวขอจะเปนตวเลขเสมอ (แมไมม การกาหนด Type กตาม )

<OL TYPE=“A”> A ลาดบหวขอจะเปนตวอกษรตวใหญ <OL TYPE=“a”> a ลาดบหวขอจะเปนตวอกษรตวเลก <OL TYPE=“I”> I ลาดบหวขอจะเปนตวเลขโรมนตวใหญ <OL TYPE=“i”> i ลาดบหวขอจะเปนตวเลขโรมนตวเลก <Li value=“X” X ระบคาเรมตนของตวเลขหรอตวอกษรใดๆ แทนคา X

หมายเหต การพมพคาสง ดวยอกษรตวใหญหรออกษรตวเลก หรอผสมกน การแสดงผลในบราวเซอรจะไมแตกตางกน

ภาษา HTML


43

แตไมสามารถ กาหนด Type ใหแสดงเปนลาดบหวขอตวอกษรภาษาไทย (ก, ข, ค, ง, ...) หรอตวเลขไทย (๑, ๒, ๓, ๔,...) ได

2. การแสดงขอมลแบบไมเรยงลาดบ <Unodered Lists> รปแบบคาสง

<UL>

<li>รายการท 1</li> <li>รายการท 2</li> <li>รายการท 3</li>

</UL>

รปแบบตางๆ คลายก นกบแบบเรยงลาดบเพยงแตเปลยนจากตวเลขหรอตวอกษรมาใช เครองหมายหรอสญลกษณแทน ซงจะมการแสดงผลแตกตางกนไปตามแตบราวเซอร แตสวนใหญ จะแสดงผลในแบบเปนจดกลมใหญทบสดาหนาขอมลรายการยอย เราสามารถกาหนด Type ของสญลกษณได 3 แบบคอ

DISC จดกลมใหญทบ () (เหมอนคาปกตทเราไมกาหนด Type นนเอง ) CIRCLE จดวงกลมใหญกลวง () SQUARE จดสเหลยมทบ () การกาหนด TYPE ถาเรากาหนดท <UL> สญลกษณจะมผลตอรายการทกรายการ แตถาเรา

ไปกาหนดท <li> จะมผลเฉพาะในรายการนนรายการเดยว หมายเหต สของสญลกษณทแสดงผลออกมาจะเปนไปตามคาของสฟอนตในหนานนๆ

หรอเปนสทกาหนดภายใตแทกฟอนตกอนหนาคาสงรายการนนๆ เราจงสามารถกาหนดสของ สญลกษณแตกตางจากสของตวอกษรในรายการไดดวยการกาหนดคาสเฉพาะท

3. การแสดงขอมลแบบคาจากดความ <Definition Lists> รปแบบคาสง

<DL> <DT>Definition term <DD>Definition

</DL>

นยมใชในการใหความหมายของคาศพท หรอคาจากดความตางๆ ทไมมสญลกษณกากบ ในคาสง ซงประกอบไปดวยคาสงยอยทซอนอยคอ

1. <DT> Definition term หรอคาจากดความ เปนรายการแสดงชอคาศพท หรอหวขอทตองการรายละเอยด เราอาจใชคาสง ตวหนา และตวเอยง ชวยในการเนนคาหรอขอความนนๆ

ภาษา HTML


44

2. <DD> Definition เปนคาอธบายรายละเอยดของคาศพทหรอขอความนน เปนสวนประกอบยอยของคาสง <DT>

ใหทดลองสรางไฟลชอ Lists.html ดงตวอยางในภาพแลวแสดงผลในบราว เซอรด

การแสดงผลของไฟลชอ Lists.html ในบราวเซอร

ภาษา HTML


45

ทดลองเปลยนคาในสวนขยายรปแบบตางๆ จดเกบไฟลแลวแสดงผลผานบราวเซอรอกครง ศกษาวาคาสงใดมคาเหนอกวาคาสงอนๆ หรอควบคมสวนอนได เชน

ในการแสดงผลแบบเรยงลาดบเราสามารถกาหนดหวขอเรมตน ไดอยางไร ?

ในการแสดงผลแบบไมเรยงลาดบ เหตใดรายการทสามจงเปนรปสเหลยม ตรงตามทเราตองการหรอไม?

การแสดงผลแบบคาจากดความ เหมาะกบการนาไปใชงานในลกษณะใด ?

ในการใชงานจรงเราสามารถผสมผสานรปแบบของการจดเรยงรายการเหลานไปใช ประโยชนได สามารถนาไปวางซอนเพอสรางลาดบชนของหวขอยอยไดอก

ขอควรจา ในการจดการไฟลของระบบปฏบตการวนโดวและระบบปฏบตการกลมยนกสนน มความ

แตกตางกน โดยในระบบปฏบตการยนกสและลนกสจะเปนแบบเนนความสาคญของตวอกษร (Case-Sensitive) คอ ตวอกษรตวพมพเลก ตวพมพใหญมความแตกตางกน เชน เมอเรา บนทกไฟลชอ index.html, Index.html, INDEX.html, INDEX.HTML ทงสชอนระบบปฏบตการ วนโดวจะมองวาเปนไฟลเดยวกน ถาบนทกจะมกรอบแจงเตอน มการบนทกซา แตถาเปนระบบยนกสหรอ ลนกสจะถอวาเปนไฟล แตกตางกน 4 ไฟล

ดงนนเพอไมใหเกดปญหาในการจดการเวบไซตในภายหลงจงควรตงชอไฟลอยางเปน ระบบดงน

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

ควรใชตวอกษรภาษาองกฤษตวพมพเลก a – z หรอตวเลข 0 – 9 ในการตงชอ ไฟล ไมเวนวรรคหรอมชองวางในชอไฟล หากตองการแยกคาควรใช Underscore (ขดลาง )

หรอ Dash (ขดลบ) คน เชน dog_name.html, school-day.html ชอไฟลแรกของเวบควรใชชอ index.html (ในเครองแมขายบรการจะต งเปนคา เรมตน

ของระบบ) นามสกลของไฟลเอกสารเวบเพจสวนใหญจะใช *.htm หรอ *.html สวนไฟลอนอาจ

ใช *.asp, *.php, *.jsp หรออนๆ หากมการเขยนคาสงเพอเชอมตอกบฐานขอมล หากไมแนใจใหสอบถามผดแลระบบเครองแมขาย (Administrator) วาเครองใหบร การ

สนบสนนไฟลรปแบบใด การตงชอมขอกาหนดอยางไร บาง

ภาษา HTML


46

กจกรรมเสนอแนะ หลงจากการศกษาบทเรยนหนวยท 2 เสรจสนแลว ใหนกเรยน แตละ คน ทากจกรรมดงน 1. ศกษาคาสงมาตรฐานของภาษา HTML จากเวบไซต http://www.w3c.org 2. ใหนกเรยนศกษาและทดลองเขยนโคดคาสงแบบออนไลนจากเวบไซต W3Schools ท

http://www.w3schools.com/html/ 3. ใหนกเรยนทดลองการใชคาสงตางๆ และกาหนดสวนขยายเพมเตมนอกเหนอจากใน

ตวอยาง แสดงผลผานบราวเซอร

คาถามทายบท 1. จงบอกถงซอฟทแวรในการเขยนคาสงและบราวเซอรแสดงผลในระบบ ปฏบตการ

ตางๆ 2. คาสงใดทมความจาเปนตอการสรางหนาเวบแมจะไมแสดงผลในบราวเซอร ให

ยกตวอยางมา 2 ชดคาสง 3. จงบอกถงความแตกตางของคาสง <Hx> และ <font…>

หน่วยที่ 2 ภาษา html - krumontree.comภาษา html เป...

Documents