หน่วยการเรียนรู้ที่ 3 html

เอกสารประกอบรายวชาการเขยนเวบไซตดวยภาษา HTML หนวยท 3 ความรเบองตนเกยวกบภาษา HTML

คณครจรชยาพร ทองลอ หนา 1

หนวยการเรยนรท 3 ความรเบองตนเกยวกบภาษา HTML

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

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

1. ภาษา HTML 2. โครงสรางของเอกสาร HTML 3. การสรางเวบเพจเบองตน 4. ค าสงเบองตนส าหรบการสรางเวบเพจ

ผลการเรยนรทคาดหวง

1. อธบายลกษณะโดยทวไปของภาษา HTML ได 2. สามารถบอกโครงสรางของเอกสาร HTML 3. สามารถบอกขนตอนในการออกแบบเวบเพจเบองตน 4. สามารถบอกค าสงเบองตนส าหรบการสรางเจบเพจ 5. มทกษะในการสรางเวบเพจโดยการใชค าสงเบองตน



ภาษา HTML HTML เปนตวยอมาจาก Hypertext Markup Language เปนภาษาหลกทใชในการแสดงผลบนเวบ

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

ภาษา HTML จะแบงออกเปน 2 สวน คอ 1. สวนของค าสง (tag) เปนสวนทก าหนดรปแบบของขอความทแสดง ซงเราเรยกวา Tag โดยจะอยใน

เครองหมาย < ... > 2. สวนของบทความทวๆ ไป เปนสวนของขอความทเราตองการแสดงผล ตวอยางการใชงานภาษา HTML ลองพมพตามตวอกษรดานลางน ใน Text editer เชน Notepad

<html> <head> <title> หวขอเรอง ของหนาน </title> </head> <body> เนอหาทจะแสดงใน web browser </body> </html>

เมอพมพเสรจกให save ในชอ mypage.html และลองใช web browser อยาง internet explorer เปดด

การใชงานโปรแกรม notepad

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

1. เปดโปรแกรม Notepad ขนมา โดยไปท All programs > Accessories > Notepad



จะไดโปรแกรม notepad

2. ใหพมพขอความตอไปน ใน notepad



เมอพมพเสรจแลวใหท าการบนทก โดยไปทเมน File เลอก save as จะมหนาตางออกมา ใหเราใสชอไฟลเปน

mypage.html และเลอกชนดไฟล (save as type) เปนแบบ All files จากนนก save ไฟล



การท างานของ code ดานบน

1. <html> ...... </html> ในการใชงาน HTML เราจะตองเรมดวย <html> และปดดวย </html> เสมอ 2. <head> ...... </head> เปนสวนทใชใหรายละเอยดเกยวกบ เวบเพจหนาน ซงจะไมแสดงใหเหนในสวน

ของการแสดงผลของ web browser แตจะมผลกบสวนอนๆ เชน การหาของ search engine (google, yahoo) การใชงานกจะมค าสงยอยเพอบรรยายรายละเอยด เชน <title> .... </title>, <meta> และอนอกมากมาย

3. <title> .......... </title> ในสวนตวอกษรทอยในค าสงนจะอยใน title bar ของ web page 4. <body> .......... </body> ตวอกษรทอยในค าสงนจะแสดงสวนแสดงผลของ web browser



โครงสรางค าสงของ HTML รายละเอยดค าสงของ HTML โดยการใชงานหลกจะมดงน 1. ค าสง หรอ Tag Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบค าสง หรอการลงรหสค าสง HTML ภายใน

เครองหมาย less-than bracket (<) และ greater-than bracket (>) โดยท Tag HTML แบงได 2 ลกษณะ คอ Tag เดยว เปน Tag ทไมตองมการปดรหส เชน <HR>, เปนตน Tag เปด/ปด รปแบบของ tag นจะเปนแบบ <tag> .... </tag> โดยท

<tag> เราเรยกวา tag เปด </tag> เราเรยกวา tag ปด

2. Attributes Attributes เปนตวบอกรายละเอยดของ tag นนเชน ... เปนการบอกวาให

อกษรทอยใน tag นชดซาย 3. not case sensitive หมายถง จะพมพ หรอ กได ผลลพธออกมาไมตางกน

โครงสรางหลกของ HTML

โครงสรางหลกของ HTML กจะเรมดวย <html> และจบดวย </html> เสมอ ซงชดค าสงทใชจะแยกเปน 2 สวนคอ

1. head ค าสงทอยในสวนนจะใชบรรยายรายละเอยดเกยวกบ web page ซงจะไมแสดงผลท web page โดยตรง

2. body ค าสงทอยในสวนนจะใชในการจดรปแบบตวอกษร จดหนา ใสรปภาพ ซงตวอกษรในสวนนจะแสดงท web browser โดยตรง

<html> <head> ค าสงในหวขอของ head </head> <body> ค าสงในหวขอของ body ในสวนนจะเปนสวนทใชแสดงผล </body> </html>

1. ค าสงในหวขอของ head (Head Section)

Head Section เปนสวนทใชอธบายเกยวกบขอมลเฉพาะของหนาเวบนนๆ เชน ชอเรองของหนาเวบ (Title), ชอผจดท าเวบ (Author), คยเวรดส าหรบการคนหา (Keyword) โดยม Tag ส าคญ คอ

<HEAD> <TITLE>ขอความอธบายชอเรองของเวบ</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">



<META NAME="Author" CONTENT="ชอผพฒนาเวบ"> <META NAME="KeyWords" CONTENT="ขอความ 1, ขอความ 2 "> </HEAD>

TITLE ขอความทใชเปน TITLE ไมควรพมพเกน 64 ตวอกษร, ไมตองใสลกษณะพเศษ เชน ตวหนา, เอยง หรอส โดย

ขอความในสวนนจะแสดงผลใน title bar ของ web browser META Tag META จะไมปรากฏผลบนเบราวเซอร แตจะเปนสวนส าคญ ในการจดอนดบบญชเวบ ส าหรบผใหบรการ

สบคนเวบ (Search Engine เชน google, yahoo) charset = TIS-620 ใชบอกวาใชชดตวอกษรแบบใดในการแสดงผล ภาษาไทยเราใช charset=TIS-620 หรอ

อาจเปน charset=windows-874 กได ตอนนแนะน าใหใชเปน charset=utf-8 keyword ดงภาพดานบนจะเหนวาเราสามารถใช keywords มากกวา 1 ค าไดโดยใชเครองหมาย (,) ในการ

คนระหวางค า การพมพชดค าสงของภาษาเอชทเอมแอล (HTML) สามารถใชไดทงตวอกษรพมพเลกและตวอกษรพมพใหญ

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

2. ค าสงในสวนของ (Body Section)

Body Section เปนสวนเนอหาหลกของหนาเวบ ซงการแสดงผลจะตองใช Tag จ านวนมาก ขนอยกบลกษณะของขอมล เชน ขอความ, รปภาพ, เสยง, วดโอ หรอไฟลตางๆ

สวนเนอหาเอกสารเวบ เปนสวนการท างานหลกของหนาเวบ ประกอบดวย Tag มากมายตามลกษณะของขอมล ทตองการน าเสนอ การปอนค าสงในสวนน ไมมขอจ ากดสามารถปอนตดกน หรอ 1 บรรทดตอ 1 ค าสงกได แตมกจะยดรปแบบทอานงาย คอ การท ายอหนาในชดค าสงทเกยวของกน ทงนใหปอนค าสงทงหมดภายใต Tag <BODY> </BODY> และแบงกลมค าสงไดดงน

กลมค าสงเกยวกบการจดรปแบบเอกสาร กลมค าสงจดแตง/ควบคมรปแบบตวอกษร กลมค าสงการท าเอกสารแบบรายการ (List) กลมค าสงเกยวกบการท าลงค กลมค าสงจดการรปภาพ กลมค าสงจดการตาราง (Table) กลมค าสงควบคมเฟรม กลมค าสงอนๆ

ค าสงเบองตนส าหรบการสรางเวบเพจ



ค าสงเรมตน ค าสงเรมตนทใชส าหรบการบอกวาเอกสารนน คอเอกสารเวบทเปนภาษาเอชทเอมแอล คอค าสง <HTML>

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

<HTML> (ภาษาเอชทเอมแอล) </HTML>

ค าสงก าหนดสวนหวของเอกสารเวบ ดงทกลาวมาแลววาเอกสารเอชทเอมแอลนน แบงออกเปน 2 สวน คอ สวนหวเรองของเอกสารเวบ และสวน

เนอหาเอกสารเวบ โดยค าสงทใชบอกสวนหวเรองของเอกสารเวบนน คอค าสง<HEAD>…</HEAD> ซงค าสงทอยภายในสวนหวของเอกสารเวบนน เปนค าสงทใชก าหนดขอความทใชเปนชอเรองของเอกสารเอชทเอมแอล และค าสงทใชส าหรบบอกค าส าคญ (Keyword) ของเอกสารเอชทเอมแอล เพอใชในการคนหาเอกสารนนบนระบบเครอขายอนเทอรเนต

<HEAD> (ค าสงยอยส าหรบสวนหวของเอกสาร) </HEAD>

ค าสงก าหนดขอความในสวนหวของโปรแกรมเวบเบราวเซอร ค าสงทใชส าหรบก าหนดขอความทจะปรากฏบนสวนหวของของโปรแกรมเวบเบราวเซอร คอค าสง

<TITLE>…</TITLE> หากตองการใหขอความใดปรากฏทต าแหนงใสวนหวของโปรแกรม เวบเบราวเซอร ท าไดโดยเอาขอความทตองการแสดงผลนนใสเขาไปในระหวางค าสงเปด <TITLE> และค าสงเปด </TITEL> ซงค าสงนจะอยในสวนหวของเอกสารเวบ

<TITLE> (ขอความทตองการใหปรากฏทสวนหวของโปรแกรมเวบเบราวเซอร) </TITLE>

ค าสงก าหนดสวนเนอหาของเอกสารเวบ ค าสงทใชก าหนดสวนทเปนเนอหาของเอกสารเวบคอ ค าสง <BODY> …</BODY> ซงใชเปนค าสงส าหรบ

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

<BODY> …</BODY>

ตวอยางท 3.1 <HTML> <HEAD> <TITLE> ชอเรองของเอกสารHTML </TITLE> </HEAD> <BODY> เอกสาร HTML เอกสารแรก </BODY> ผลลพธตวอยางท 3.1



การก าหนดสพนหลงและสของตวอกษร การก าหนดสพนหลงของเอกสารเวบหรอเอกสารเอชทเอมแอล นนสามารถท าไดโดยใชการอธบายลกษณะพเศษ (Attribute) ของค าสง <BODY> โดยการก าหนดสของพนหลงของเอกสารและสของตวอกษรในเอกสารไดดงน การก าหนดสพนหลงเอกสาร การก าหนดสพนหลงของเอกสารเวบหรอเอกสารเอชทเอมแอล นนสามารถท าไดโดยใชการอธบายลกษณะพเศษ (Attribute) คอ BGCOLOR ซงการก าหนดสพนของเอกสารเอชทเอมแอลนน สามารถก าหนดภายใตค าสงเปดของค าสง <BODY> โดยการก าหนดสพนหลงของเอกสารเอชทเอมแอลสามารถแสดงไดดงน <BODY BGCOLOR=สทตองการ> จะม“สทตองการ”หรอไมมเครองหมาย” ” กได ...... </BODY>

โดยสทตองการก าหนดนสามารถท าการก าหนดได 2วธ คอ ระบชอของสทตองการ เชน Blue, Green, Red, Yellow เปนตน

ตวอยางท 3.2 การก าหนดพนสหลง โดยการระบชอ <HTML> <HEAD> <TITLE> การก าหนดสพนหลงโดยการก าหนดส </TITLE> </HEAD> <BODY BGCOLOR=Yellow > การก าหนดสพนหลงของเอกสาร โดยการก าหนดเปนสเหลอง </BODY> </HTML>



ผลลพธตวอยางท 3.2

ระบตวเลข โยใชการก าหนดคาสในระบบเลขฐาน 16 จ านวน 6 หลกส าหรบการผสมส (RGB) โดยคาตวเลข 2

หลกแรกหมายถงระดบสแดง ตวเลข 2 หลกตอมาหมายถงระดบของสเขยว และตวเลข2หลกสดทาย หมายถงระดบของสน าเงน

ตวอยางท 3.3 การก าหนดสพนหลง โดยการระบตวเลข <HTML> <HEAD> <TITLE> การก าหนดสพนหลงของเอกสาร โดยการระบตวเลข </TITLE> </HEAD> <BODY BGCOLOR= #00FFFF> การก าหนดสพนหลงของเอกสาร โดยการระบตวเลขเปน 00FFFF </BODY> </HTML>




การก าหนดสของตวอกษร การก าหนดสของตวอกษรทงหมดของเอกสารเวบหรอเอกสาร HTML นน สามารถ ท าไดโดยใชการอธบาย

ลกษณะพเศษ (Attribute) คอ TEXT ซงก าหนดอยทต าแหนงส าคญเปดของค าสง<BODY>รปแบบของค าสงส าหรบการก าหนดสของเอกสารเวบ สามารถท าไดดงน <BODY TEXT = สทตองการ> จะมเครองหมาย “ ” หรอไมมกได ...... </BODY>

โดยสทตองการก าหนดมดงน สามารถท าการก าหนดได 2 วธคอ ระบชอของสทตองการ เชน Blue, Green, Red, Yellow เปนตน ระบตวเลข โดยใชการก าหนดสในระบบเลขฐาน 16

ตวอยางท 3.4 การก าหนดสตวอกษร โดยการระบชอ <HTML> <HEAD> <TITLE> การก าหนดสของตวอกษร โดยการก าหนดส </TITLE> </HEAD> <BODY TEXT= Blue> การก าหนดสของตวอกษร โดยการก าหนดใหเปนสน าเงน </BODY> </HTML>




ตวอยางท 3.5 การก าหนดสตวอกษร โดยการระบตวเลข <HTML> <HEAD> <TITLE>การก าหนดสของตวอกษร โดยการะบรหสส</TITLE> </HEAD> <BODY TEXT= #FF00FF> การก าหนดสของตวอกษร โดยการระบรหสสเปน FF00FF </BODY> </HTML> ผลลพธตวอยางท 3.5



ตวอยางท 3.6 การก าหนดสพนหลงและตวอกษร <HTML> <HEAD> <TITLE>การก าหนดสพนหลงและตวอกษรของเอกสาร</TITLE> <HEAD> <BODY BGCOLOR=Yellow TEXT=#FF00FF> การก าหนดสพนหลงและตวอกษร </BODY> </HTML> ผลลพธตวอยางท 3.6

Education

หน่วยการเรียนรู้ที่ 3 html