More Related Content
Similar to Lernning 13 (20)
More from Mayuree Janpakwaen
More from Mayuree Janpakwaen (20)
Lernning 13
- 1. ใบความรู้ ที 13
เรือง ความหมาย การเขียน และโครงสร้ างภาษา HTML
HTML ย่อมาจาก Hyper Text Markup Language เป็ นโปรแกรมภาษาประเภทหนึ%งสําหรับแสดงข้อความต่าง ๆ ใน
รู ปแบบข้อความ รู ปภาพ หรื อภาพ
เคลื%อนไหว ฯลฯ และสามารถเชื%อมโยงข้อมูลไปยังเอกสารอื%นได้ที%มีความสามารถสูงเหนือกว่า เอกสารทัวไป เพราะ
%
สามารถเปิ ดดูขอความภายในได้ ทําได้โดยการใส่คาสังลงไป
้ ํ %
่
ในเอกสาร ซึ%งเรี ยกว่า แท็ก (TAG) และการนําเอกสารมาแสดงบนหน้าจอภาพในระบบอินเทอร์เน็ตได้ โดยไม่ผานการแปล
โปรแกรม (Compile) เอกสารก่อน สามารถเรี ยก
ดูผลได้บนอินเทอร์เน็ตได้บนโปรแกรมเบราเซอร์ได้เลย เช่น โปรแกรม Internet Explorer, Mozilla Firefox, Opera,
Netscape เป็ นต้น
ภาษา HTML ประกอบด้วยแท็ก (tag) ทําหน้าที%ควบคุมโครงสร้างและการแสดงผลของเว็บเพจ ซึ%งจะถูกแปลผล
% ่
ด้วย โปรแกรมเบราเซอร์ รู ปแบบของคําสัง จะประกอบด้วย ตัวอักษรคําสังอยูภายใต้เครื% องหมาย < > แท็กมี 2 รู ปแบบดังนีW
%
1. แท็กคู่ ประกอบด้วยคู่ของแท็กที%อยูภายใต้เครื% องหมาย < > คําสังแต่ละคู่จะมีชื%อเรี ยกว่า แท็กเปิ ด (open tag)
่ %
และ แท็กปิ ด (close tag)
่
แท็กเปิ ดเป็ นคําสังที%อยูหน้าข้อความเพื%อกําหนดจุดเริ% มต้นลักษณะหรื อรู ป แบบกาแสดงผล แท็กปิ ด คล้ายกับแท็กเปิ ดแต่มี
%
่
เครื% องหมายสแลช (/) อยูภายในทําหน้าที%ปิดท้าย
ข้อความเพื%อกําหนดจุดสิWนสุดของลักษณะหรื อรู ปแบบการแสดงผลนัWนๆ มีรูปแบบดังนีW
- 2. <คําสัง> ...... ข้ อความ ......... </คําสัง>
เช่น คําสัง <html> .... </html> , <table> ...</table>, <center> ....</center>
%
2. แท็กเดียว เป็ น แท็กที%มีเฉพาะแท็กเปิ ดเท่านัWน เช่น คําสังขึWนบรรทัดใหม่ <br> คําสังใส่เส้น <hr> การเขียนแท็ก
% %
จะใช้อกษรตัวเล็ก (lower case)
ั
หรื อตัวใหญ่ (upper case) หรื อผสมกันก็ได้ เช่น < HTML> หรื อ <html> หรื อ <Html> โปรแกรมบราวเซอร์จะถือว่าเป็ น
คําสังเดียวกัน ยกเว้นคําเฉพาะหรื อคําระบุเส้นทาง ชื%อแฟ้ มข้อมูล ชื%อไดเรคทอรี% ตัวอักษรเล็กหรื อใหญ่จะถือว่าเป็ นคนละตัว
%
กัน เช่น <img src ="picture.gif"> และ
<img src =” PICTURE.GIF ”> ถือว่า picture.gif และ PICTURE.GIF เป็ นคนละตัวกัน เป็ นต้น
Notepad จัดเป็ นโปรแกรมประเภท Text Editor สามารถสร้างไฟล์หรื อเขียนภาษา HTML ได้ และ Notepad นีWเป็ น
โปรแกรม ที%นิยมใช้ในการเขียน
โฮมเพจ สามารถใช้งานได้ง่าย และเป็ นโปรแกรมที%ติดตัWงมาพร้อมกับระบบ Windows
การเรี ยกใช้งานโปรแกรม Notepad สามารถทําได้ดงนีW ั
คลิกที Start --> เลือก Programs --> เลือก Accessories --> เลือก Notpad
ภาพแสดงขัWนตอนการเข้าสู่โปรแกรม Notepad
- 3. เมื%อทําการเรี ยกใช้โปรแกรม Notepad จะปรากฎหน้าจอภาพ ดังรู ป
ภาพแสดงหน้าจอภาพของโปรแกรม Notepad
โปรแกรม Notepad บางครัWงขนาดตัวอักษรจะเล็กเกินไปหรื อใหญ่เกินไป และรู ปแบบตัวอักษรอ่านยาก อักษรบาง
รู ปแบบไม่สามารถพิมพ์ภาษาไทยได้ การปรับขนาด
และรู ปแบบตัวอักษร สามารถทําได้ดงนีW
ั
1. เลือกคําสัง Format แล้วคลิlกที%คาสัง Font..
% ํ %
2. ทําการเลือก Font และ Size ตามต้องการ ดังภาพ
ภาพแสดงการปรับขนาดและรุ ปแบบตัวอักษร
- 4. 1. การบันทึกแฟม HTML
้
ในการบันทึกแฟ้ มเอกสารของภาษา HTML จะต้องใส่นามสกุลเป็ น .htm หรื อ html จะเป็ นตัวพิมพ์เล็กหรื อ
พิมพ์ใหญ่ก็ได้
มีขW นตอนการบันทึก ดังนีW
ั
1) คลิกที%เมนู File
2) เลื%อนเมาส์มาที% Save
3) ในช่อง Save in ให้ทาการเลือกไดรฟ์ และโฟล์เดอร์ที%จะบันทึก
ํ
4) ในช่อง File name ให้พิมพ์ชื%อไฟล์พร้อมนามสกุล .htm หรื อ .html
5) คลิกที%ปุ่ม Save
ดังภาพ
ภาพแสดงขัWนตอนการบันทึกแฟ้ ม HTML
- 5. 2. การเปิ ดแฟม HTML
้
เป็ นการนําแฟ้ มมาทําการแก้ไข เปลี%ยนแปลง หรื อเพิ%มข้อมูลลงไป ซึ%งการเปิ ดแฟ้ มของโปรแกรม Notepad
จะเหมือนกับโปรแกรมอื%น ๆ เช่น
Microsoft Word, Microsoft Excel ฯลฯ แต่จะต้องบอกประเภทของแฟ้ มก่อน ซึ%งมีขW นตอน ดังนีW
ั
1) คลิกที%เมนู File
2) เลื%อนเมาส์มาที% Open
3) ในช่อง Save in ให้ทาการเลือกไดรฟ์ และโฟล์เดอร์ที%จะเปิ ดแฟ้ ม
ํ
4) ในช่อง File of type ให้เลือกประเภท All Files
5) คลิกไฟล์ที%ตองการเปิ ด
้
6) คลิกที%ปุ่ม Open
ดังภาพ
ภาพแสดงขัWนตอนการเปิ ดแฟ้ ม HTML
- 6. โครงสร้างของเอกสาร HTML ในเว็บเพจหนึ%งๆ ประกอบด้วยส่วนสําคัญอยู่ 3 ส่วนคือ
ํ
1. ส่ วนประกาศ ที%กาหนดให้บราวเซอร์ทราบว่าเป็ นแฟ้ มข้อมูลชนิด HTML ซึ%งจะมีแท็ก <html> ... </html> กํากับ
่
อยูที%จุดเริ% มต้นและจุดสิWนสุดของแฟ้ มข้อมูล
2 . ส่ วนหัวเรือง (HEAD) เป็ นส่วนที%กาหนดให้ขอความแสดงชื%อเว็บเพจนัWนๆ ไปปรากฏที%ส่วนแถบชื%อของ
ํ ้
บราวเซอร์ และเก็บแท็กพิเศษอื%น ๆ ซึ%งจะมีแท็ก
<head> ... </head> กํากับอยู่
3. ส่ วนเนือหา (BODY) เป็ นส่วนที%แสดงเนืWอหาของเว็บเพจทัWงหมดซึ%งประกอบด้วยประกอบด้วยแท็กต่างๆ เพื%อให้
U
การแสดงผลมีความสวยงามสะดุดตา เช่น
ข้อความ ตาราง รู ปภาพ กราฟิ กต่าง ๆ สี ของตัวอักษร สี พWืน เป็ นต้น
ภาพแสดงโครงสร้างภาษา HTML
