Html

HTMLครูกันยารัตน์ สมเกตุ

ภาษา HTML HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง มีโครงสร้างการเขียนโดยใช้แท็ก (Tag) ควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมเว็บเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยายที่เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล

โครงสร้างพื้นฐานของ HTML โครงสร้างของ HTML จะประกอบไปด้วยส่วนของคำสั่ง 2 ส่วน คือ ส่วนที่เป็น ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) โดยมีรูปแบบคำสั่งดังนี้<HTML><HEAD><TITLE> ชื่อโปรแกรมหรือข้อมูลที่ต้องการแสดงในส่วนหัว</TITLE></HEAD><BODY>คำสั่งหรือข้อความที่ต้องการให้แสดง</BODY></HTML>

คำสั่งเริ่มต้นสำหรับ HTMLคำสั่งเริ่มต้นรูปแบบ <HTML>.....</HTML>คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรม และ </HTML>เป็นคำสั่งจุดสิ้นสุดโปรแกรมเหมือนคำสั่ง Beignและ End ใน Pascal

คำสั่งเริ่มต้นสำหรับ HTMLคำสั่งการทำหมายเหตุรูปแบบ ตัวอย่าง ข้อความที่อยู่ในคำสั่งจะปรากฏอยู่ในโปรแกรมแต่ไม่ถูกแสดง บนจอภาพ

คำสั่งเริ่มต้นสำหรับ HTMLส่วนหัว รูปแบบ <HEAD>.....</HEAD>ใช้กำหนดข้อความ ในส่วนที่เป็น ชื่อเรื่อง ภายในคำสั่งนี้ จะมีคำสั่งย่อย อีกหนึ่งคำสั่ง คือ <TITLE>

คำสั่งเริ่มต้นสำหรับ HTMLกำหนดข้อความในไตเติลบาร์ รูปแบบ <TITLE>.....</TITLE>ตัวอย่าง <TITLE> บทเรียน HTML </TITLE> เป็นส่วนแสดงชื่อของเอกสาร จะปรากฎ ขณะที่ไฟล์ HTML ทำงานอยู่ ข้อความ ที่กำหนด ในส่วนนี้ จะไม่ถูกนำไปแสดง ผลของ เว็บเบราเซอร์แต่จะปรากฏในส่วนของไตเติลบาร์ (Title bar) ที่เป็นชื่อของวินโดว์ข้างบนไม่ควรให้ยา เกินไป เพียงให้รู้ว่าเว็บเพจที่กำลัง ใช้งานอยู่เกี่ยวข้องกับอะไร

คำสั่งเริ่มต้นสำหรับ HTMLส่วนของเนื้อหารูปแบบ <BODY>.....</BODY>ส่วนเนื้อหาของโปรแกรมจะเริ่มต้นด้วย คำสั่ง <BODY> และจบลงด้วย </BODY> ภายในคำสั่งนี้ คือ ส่วนที่จะ แสดงทางจอภาพ

สีของพื้นฉากหลัง รูปแบบ BGCOLOR=#สีที่ต้องการตัวอย่าง <BODY BGCOLOR="#FF0000"> เราใช้ BGCOLOR=#สีที่ต้องการ ให้เป็นส่วนหนึ่งของ <BODY> ซึ่งจะทำให้เกิดสีตามที่เราเลือก ลักษณะเป็นฉากสีอยู่ข้างหลัง

สีของตัวอักษรบนเว็บรูปแบบ Text=#รหัสสีตัวอย่าง <BODY TEXT="#00FF00">เรากำหนดเช่นเดียวกับการทำสีของพื้นฉากหลังโดยให้เป็นส่วน หนึ่งของ <BODY> แต่ในการใส่รหัสสีนั้นเร าต้องดู ให้เหมาะสมกับฉากหลังด้วยเช่น <BODY TEXT="#00FF00"> ในการ ทำสีของ ตัวอักษรนี้สีจะปรากฎบนเว็บเปราเซอร์ เป็นสีเดียวตลอด

สีของตัวอักษรเฉพาะที่ รูปแบบ ...ตัวอย่าง สีแดง คำสั่งนี้เราใช้ในการเปลี่ยนสีของตัวอักษรในส่วนที่เราต้องการให้เกิดสีสันแตกต่างไปจากสีตัวอักษร อื่น ๆ เช่น สีแดงตัวหนังสือคำว่าสีแดงก็จะเป็นสีแดงตามที่เราต้องการทันที

สีของตัวอักษรที่เป็นจุดคลิกเมาส์รูปแบบ LINK="#รหัสสี" ALINK="#รหัสสี" VLINK"#รหัสสี"ตัวอย่าง <BODY BGCOLOR="000000" TEXT="#F0F0F0" LINK="#FFFF00" ALIGN="#0077FF" VLINK="#22AA22"> กำหนดอยู่ในส่วนของ BODY โดยกำหนดให้LINK = สีของตัวอักษรก่อนมีการคลิกALIGN = สีของตัวอักษรขณะถูกคลิกVLINK = สีของอักษรหลังจากคลิกแล้ว

รูปแบบ ของตัวอักษรหัวเรื่อง รูปแบบ <Hx>ข้อความ</Hx>ตัวอย่าง <H1>หัวข้อใหญ่สุด</H1>ในการกำหนดขนาดให้หัวเรื่องนั้นมีการกำหนด ไว้ 6 ระดับตั้งแต่ 1 - 6 โดย x แทนตัวเลขแต่ละลำดับโดย H1 มีขนาดใหญ่ที่สุด H6 เล็กที่สุดเมื่อต้องการใช้หัวเรื่องที่มีขนาดตัวอักษรเท่าใดเขียนอยู่ระหว่าง <Hx>....</Hx>

รูปแบบ ของตัวอักษรขนาดตัวอักษร รูปแบบ ข้อความตัวอย่าง bcoms.netเราสามารถกำหนดขนาดของตัวอักษรให้แตกต่างกันได้ ภายในบรรทัดเดียวกัน โดยเราใช้ มากำหนด โดยที่ value เป็นตัวเลขแสดงขนาด ตัวอักษร 7 ขนาด ตัวเลขยิ่งมาก ยิ่งมีขนาด ใหญ่ ตั้งแต่ -7 ไปจนถึง +7

ตัวหนา (Bold)รูปแบบ ข้อความตัวอย่าง bcoms.netจะทำให้ข้อความที่อยู่ใน .... มีความหนาเกิดขึ้น เช่น bcoms.netรูปแบบ ของตัวอักษร

ตัวเอน (Itatic)รูปแบบ ข้อความตัวอย่าง bcoms.netทำให้ข้อความที่อยู่ใน.... เกิดเป็นตัวเอนขึ้น เช่น bcoms.netรูปแบบ ของตัวอักษร

ตัวขีดเส้นใต้ (Underline) รูปแบบ ข้อความตัวอย่าง bcoms.netทำให้ข้อความที่อยู่ใน ..... มีเส้นขีดอยู่ใต้ตัวอักษรเกิดขึ้น เช่น bcoms.netรูปแบบ ของตัวอักษร

แบบของตัวอักษรรูปแบบ ข้อความตัวอย่าง bcoms.netFont name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น bcoms.net และเราสามารถใส่ชื่อ Font หลาย ๆ ตัวได้เพื่อบางครั้ง Browser ไม่มี Font ตามต้องการโดยให้คั้นด้วยตัว (,) รูปแบบ ของตัวอักษร

ขนาด Font ทั้งเอกสารรูปแบบ Basefont size="X">ตัวอย่าง <Basefont size=3>เป็นการกำหนดขนาดของตัวอักษรในโฮมเพจให้มีขนาด เท่ากันทั้งเอกสาร เพื่อสะดวกเราจะได้ไม่ต้องกำหนดบ่อย ๆ ปกติแล้วจะกำหนดขนาดเป็น 3 โดยไม่ต้องมีตัวปิดเหมือนคำสั่งอื่น ๆ (X แทนตัวเลข)รูปแบบ ของตัวอักษร

การขึ้นบรรทัดใหม่รูปแบบ เป็นคำสั่งสำหรับการสั่งให้แสดงผลในบรรทัดใหม่ให้ใส่คำสั่งนี้ ในตำแหน่งที่เราต้องการ ให้การแสดงผลข้อมูลนั้นขึ้นบรรทัดใหม่ การจัดรูปแบบโฮมเพจ

ย่อหน้าใหม่ รูปแบบ ข้อความเราจะใช้คำสั่งนี้เมื่อต้องการ ขึ้นบรรทัดใหม่เหมือน แต่จะทำการ เว้นบรรทัดใหม่ให้อีกหนึ่งบรรทัด จะใช้คำสั่งอย่างเดียว ก็ได้ โดยไม่ต้อง มีคำสั่ง ปิด จะไว้หน้าหรือ หลังข้อความที่ต้องการขึ้นก็ได้ แต่ถ้าใช้คำสั่ง ต้องมีคำสั่ง ปิด ด้วย โดย align type สามารถ ใช้ CENTER,LEFT หรือ RIGHT ก็ได้ เช่น ข้อความนี้ ก็จะอยู่ตรงกลาง การจัดรูปแบบโฮมเพจ

เส้นคั้น รูปแบบ <HR ALIGN=xx COLOR=xx SIZE=xx WIDTH=xx NOSHADE>เราสามารถกำหนดตำแหน่ง , สี , ขนาดของความหนา , ความยาว หรือกำหนดแบบเส้นทึบ ก็ได้ โดย X = ค่าต่าง ๆ เหล่านี้<ALIGN> = CENTER , LEFT , RIGHTCOLOR = ตามสีที่เราต้องการ เป็นรหัสสี R-G-BSIZE = เป็นตัวเลข บอกขนาด 1 ถึง 7 และ -1 ถึง -7WIDTH = กำหนด ความหนา ของเส้นเป็น เปอร์เซนต์NOSHADE = กำหนด ให้เส้น เป็น เส้นทึบการจัดรูปแบบโฮมเพจ

การใส่รูปภาพลงในเว็บเพจการใส่รูปภาพลงในเว็บเพจ รูปแบบ <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 ใส่ข้อ ความ เพื่อเป็น คำอธิบาย รูปภาพ ที่นำมาวาง สำหรับ ผู้ใช้ อินเตอร์เนต แบบเท็กซ์

การแสดงภาพฉากหลังรูปแบบ BACKGROUND="picture"กำหนด แอตทริบิวต์BACKGROUND="picture" ในคำสั่งของ <BODY> เช่น <BODY BACKGROUND="hot.gif“>การใส่รูปภาพลงในเว็บเพจ

การเชื่อมโยงข้อมูล (Link)ประเภทการเชื่อมโยง- การเชื่อมโยงภายในเว็บไซต์- การเชื่อมโยงข้อมูลนอกเว็บไซต์- การเชื่อมโยงข้อมูล FTP- การเชื่อมโยงข้อมูล E-Mail

การเชื่อมโยงภายในเว็บไซต์รูปแบบ <A HREF="ที่อยู่ไฟล์">ข้อความ</A>ตัวอย่าง <A HREF="tipcomputer.asp">ทิปคอมพิวเตอร์</A>*** หมายเหตุ ถ้าลิงค์อยู่คนละโฟลเดอร์ <A HREF="../tipcomputer.asp">ทิปคอมพิวเตอร์</A>การเชื่อมโยงข้อมูล (Link)

การเชื่อมโยงข้อมูลนอกเว็บไซต์ รูปแบบ <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>การเชื่อมโยงข้อมูล (Link)

การเชื่อมโยงข้อมูล FTP รูปแบบ <FTP://HOSTNAME/FOLDER>ข้อความ</A>HOSTNAME คือ ชื่อของศูนย์บริการ FTP Server FOLDER คือ ชื่อไฟล์และไดเรกทอรี่ที่ผู้เข้ารับบริการสามารถเข้าไปใช้งานได้ตัวอย่าง <A HREF=FTP://bcoms.net/download> Download </a> การเชื่อมโยงข้อมูล (Link)

การเชื่อมโยงข้อมูล E-Mail รูปแบบ <A HREF="MAILTO:USERNAME@DOMAINNAME">ข้อความ</A>ตัวอย่าง <a href="mailto: bcoms_net@hotmail.com">bcoms_net@hotmail.com</a>การเชื่อมโยงข้อมูล (Link)

Html

More Related Content

Viewers also liked

Similar to Html

Html