ใบงานที่
6
เรื่อง HTML
1 ) HTML ย่อมาจากคำว่า ?
ตอบ Hyper
Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ หมายถึง HTML
คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext
Markup Language โดย Hypertext หมายถึง
ข้อความที่เชื่อมต่อกันผ่านลิ้ง (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ
ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้ Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlink นั่นเอง
2 ) รูปแบบการใช้คำสั่ง
ตอบ
คำสั่งเริ่มต้นสำหรับ HTML
คำสั่งหรือ Tag
ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า
<ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า
> เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ
เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่
มีเพียงบาง คำสั่งเท่านั้น
ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว
ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี
รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม /
(Slash) นำหน้าคำสั่ง
ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย
ในการเขียน ด้วยตัวอักษร
เล็กหรือใหญ่ ทั้งหมดหรือเขียนปนกันก็ได้
ไม่มีผลอะไร
คำสั่งเริ่มต้น
รูปแบบ
<HTML>.....</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม
และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beign
และ End ใน Pascal
คำสั่งการทำหมายเหตุ
รูปแบบ <!-- ..... -->
ตัวอย่าง <!-- END WEBSTAT CODE
--> ข้อความที่อยู่ในคำสั่งจะปรากฎอยู่ในโปรแกรมแต่ไม่ถูกแสดง
บนจอภาพ
ส่วนหัว
รูปแบบ <HEAD>.....</HEAD>
ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง
ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>
กำหนดข้อความในไตเติลบาร์
รูปแบบ <TITLE>.....</TITLE>
ตัวอย่าง <TITLE> บทเรียน HTML </TITLE>
เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์
HTML
ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ
เว็บเบราเซอร์แต่จะปรากฎในส่วนของไตเติบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา
เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร
ส่วนของเนื้อหา
รูปแบบ <BODY>.....</BODY>
ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY>
และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ
ส่วนที่จะ แสดงทางจอภาพ
รูปแบบ ของตัวอักษร
ในบทนี้
เราจะมาทราบถึงวิธีการทำแบบตัวอักษรหลาย ๆ แบบ เช่น ตัวหนา
ตัวเอน ตัวใหญ่ ตัวเล็ก ซึ่งลักษระต่างๆ
เหล่านี้จะทำให้เว็บเพจ ของเราสวยงามยิ่งขึ้น
หัวเรื่อง
รูปแบบ <Hx>ข้อความ</Hx>
ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>
ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้
6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6
เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>
ขนาดตัวอักษร
รูปแบบ <FONT SIZE=x>ข้อความ</FONT>
ตัวอย่าง <FONT SIZE=2>bcoms.net</FONT>
เราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้
ภายในบรรทัดเดียวกัน โดยเราใช้ <FONT SIZE=value> มากำหนด
โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด
ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7
ตัวหนา (Bold)
รูปแบบ <B>ข้อความ</B>
ตัวอย่าง <B>bcoms.net</B>
จะทำให้ข้อความที่อยู่ใน <B>....</B>
มีความหนาเกิดขึ้น เช่น bcoms.net
ตัวเอน (Itatic)
รูปแบบ <I>ข้อความ</I>
ตัวอย่าง <I>bcoms.net</I>
ทำให้ข้อความที่อยู่ใน<I>....</I>
เกิดเป็นตัวเอนขึ้น เช่น bcoms.net
ตัวขีดเส้นใต้ (Underline)
รูปแบบ <U>ข้อความ</U>
ตัวอย่าง <U>bcoms.net</U>
ทำให้ข้อความที่อยู่ใน <U>.....<U>
มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.net
ตัวอักษรมีขนาดคงที่ (Typewriter text)
รูปแบบ <TT>ข้อมความ</TT>
ตัวอย่าง <TT>bcoms.net</TT>
ทำให้ ข้อความ ที่อยู่ใน<TT>.....</TT>
มีลักษณะเป็น fixed space เกิดขึ้น เช่น bcoms.net
แบบของตัวอักษร
รูปแบบ <FONT FACE="font
name>ข้อความ</FONT>
c <FONT
FACE="AngsanaUPC">bcoms.net</FONT>
Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT
FACE="AngsanaUPC"> bcoms.net</FONT> และเราสามารถใส่ชื่อ
Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,)
ขนาด Font ทั้งเอกสาร
รูปแบบ Basefont
size="X">
ตัวอย่าง <Basefont size=3>
เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด
เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น
3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)
ตัวอักษรแบบพิเศษ
รูปแบบ
< แทนด้วย <
> แทนด้วย >
& แทนด้วย &
" แทนด้วย "
เว้นวรรค แทนด้วย
ตัวอย่างเช่น "bcoms.net"
จะเป็น "bcoms.net"
การใส่รูปภาพลงในเว็บเพจ
รูปแบบ
<IMG
ALIGN=align-type BORDER=n HEIGHT=n WIDTH=n HSPACE=n VSPACE=n SRC=address
ALT=text>
ALIGN
= align-type(ตำแหน่ง)
เป็นการ กำหนด ตำแหน่ง รูปภาพ ถ้าภาพไม่ ใหญ่ ข้อความ นั้นจะ อยู่ ที่ตำแหน่ง
ส่วนล่าง
ของภาพ ทางขวา
มือเสมอ เราสามารถ กำหนดได้ โดยใช้คำต่าง ๆ เหล่านี้
LEFT
= วางภาพที่ตำแหน่งทางซ้าย
RIGHT
= วางภาพที่ตำหน่งทางขวา
TOP
= วางภาพ
ที่ตำแหน่ง ด้านบน
MIDDLE
= วางภาพ
ที่ตำหน่ง กึ่งกลาง
BOTTOM = วางภาพ ที่ตำแหน่ง ด้านล่าง
BORDER = n
เป็นการ กำหนด กรอบให้ รูปภาพ n มีค่ามาก
กรอบจะ มีความหนา มากขึ้น
HEIGHT
= n เป็นการ กำหนด ความสูง ของภาพ
WIDTH
= n เป็นการ กำหนด ความกว้างของภาพ
ถ้าต้องกา ให้ภาพได้สัดส่ว ให้กำหน เป็นเปอร์เซนต์ โดยไม จำกัดความสูง
VSPACE = n กำหนด ระยะ ห่างบน ล่างของ ภาพ
HSPACE = n
กำหนด ระยะ ห่าง ซ้าย - ขวา ของภาพ
SRC
= ใส่รูปภาพที่ต้องการลงไป
ALT
= text ใส่ข้อควา
เพื่อเป็นคำอธิบายรูปภาพที่นำมาวางสำหรับผู้ใช้อินเตอร์เนตแบบเท็กซ์
ข้อสังเกต ALIGN ไม่สามารถ
กำหนดให้ รูปภาพ ไปปรากฎยังกึ่งกลาง ของจอภาพ ได้ ถ้าต้อง การให้
อยู่ตำแหน่งดังกล่าว ให้ใช้คำสั่ง <CENTER>...<CENTER>
การแสดงภาพฉากหลัง
รูปแบบ BACKGROUND="picture"
กำหนด แอตทริบิวต์ BACKGROUND="picture"
ในคำสั่งของ <BODY> เช่น <BODY
BACKGROUND="hot.gif">
ประเภทการเชื่อมโยง
- การเชื่อมโยงภายในเว็บไซต์
- การเชื่อมโยงข้อมูลนอกเว็บไซต์
- การเชื่อมโยงข้อมูล FTP
- การเชื่อมโยงข้อมูล E-Mail
การเชื่อมโยงภายในเว็บไซต์
รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>
ตัวอย่าง <A
HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>
*** หมายเหตุ ถ้าลิงค์อยุ่คนละโฟลเดอร์ <A
HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>
การเชื่อมโยงข้อมูลนอกเว็บไซต์
รูปแบบ <A HREF="้http://www..........">ข้อความ</A>
ตัวอย่าง <A HREF="้http://www.bcoms.net">บีคอม</A>
*** หมายเหตุ
คุณสามารถสั่งให้เบราเซอร์เปิดหน้าใหม่ได้โดยกำหนด target="_blank"
ตัวอย่าง <a
href="http://www.driverzone.com" target="_blank"> Driver
Zone </a>
การเชื่อมโยงข้อมูล FTP
รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>
HOSTNAME คือ ชื่อของศูนย์บริการ FTP
Server
FOLDER คือ
ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้
ตัวอย่าง <A
HREF=FTP://bcoms.net/download> Download </a>
การเชื่อมโยงข้อมูล E-Mail
รูปแบบ <A
HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>
ตัวอย่าง <a href="mailto:
bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>
โครงสร้างตาราง
<TABLE>
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
<TR>
<TH>หัวข้อตาราง
<TD>รายละเอียดย่อย
</TABLE>
แหล่งอ้างอิง : https://sites.google.com/site/class0223/learnhtml
ไม่มีความคิดเห็น:
แสดงความคิดเห็น