ภาษา HTML

ภาษา HTML (HyperText Markup Language) ภาษาหลักที่ใช้ในการสร้างเว็บเพจ (Web Page)

ภาษา HTML • เป็นภาษาหลักที่ใช้ในการสร้างเว็บเพ็จเขียนอยู่ในรูปของเอกสารข้อความ (Text Document) • ภาษาที่เป็น Static Language มีลักษณะของข้อมูลคงที่สำหรับสร้างข้อมูลประเภทตัวอักษรและภาพ • นามสกุลของไฟล์ HTML จะเป็นไฟล์นามสกุล .htmหรือ .html • คำสั่งในภาษา HTML เรียกว่า แท็ก (Tag) จะเขียนอยู่ในเครื่องหมาย < และ > แท็กจะแบ่งได้เป็นสองกลุ่ม คือ แท็กแบบเปิด และแท็กแบบปิด

โครงสร้างหลัก • รูปแบบมาตรฐานในการสร้างเว็บเพจประกอบด้วยคำสั่งหลักอยู่ 4 คำสั่ง ดังนี้ • <HTML> .... </HTML> เป็นคำสั่งที่ทำหน้าที่บอกจุดเริ่มต้นและจุดสิ้นสุดของเว็บเพจ • <HEAD> .... </HEAD> เป็นคำสั่งในส่วนของการกำหนดส่วนหัวเรื่องของเว็บเพจ โดยในคำสั่ง HEAD จะมีคำสั่ง <TITLE> .... </TITLE> อยู่ด้วย ซึ่งทำหน้าที่กำหนดข้อความที่แสดงบน Title Bar โดยสามารถกำหนดความยาวของข้อความได้ 64 ตัวอักษร • <BODY> .... </BODY> เป็นคำสั่งในส่วนเนื้อหาของเว็บเพจทั้งหมด

รูปแบบการเขียน • <HTML> • <HEAD> • <TITLE> Title Bar </TITLE> • </HEAD> • <BODY> • . • . • . • . • </BODY> • </HTML>

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

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

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

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

การกำหนดรูปแบบของตัวอักษรการกำหนดรูปแบบของตัวอักษร

คำสั่งในการกำหนดหัวเรื่อง (Headding) • <H1> .... </H1> • <H2> .... </H2> • <H3> .... </H3> • <H4> .... </H4> • <H5> .... </H5> • <H6> .... </H6> • ตัวอย่างการปรับขนาดอักษร …………………… • <HTML> • <HEAD><TITLE> Heading </TITLE></HEAD> • <BODY> • <H1> Heading Levle 1 </H1> • <H2> Heading Levle 2 </H2> • <H3> Heading Levle 3 </H3> • <H4> Heading Levle 4 </H4> • <H5> Heading Levle 5 </H5> • <H6> Heading Levle 6 </H6> • </BODY></html>

การกำหนดหัวเรื่อง รูปแบบ<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

คำสั่งในการกำหนดลักษณะตัวอักษร (Style) • การกำหนดตัวอักษรตัวหนาใช้แท็ก <B> • การกำหนดตัวอักษรตัวเอียงใช้แท็ก <I> • การกำหนดขีดเส้นใต้ตัวอักษรใช้แท็ก <U> • การกำหนดตัวอักษรตัวพิมพ์ดีดใช้แท็ก <TT> • การกำหนดขีดเส้นพาดทับกลางตัวอักษรใช้แท็ก <S> • การกำหนดตัวอักษรตัวห้อยใช้แท็ก <SUB> • การกำหนดตัวอักษรตัวยกใช้แท็ก <SUP> • การกำหนดตัวอักษรตัวโตใช้แท็ก <BIG> • การกำหนดตัวอักษรตัวเล็กใช้แท็ก <SMALL>

คำสั่งปรับแต่งตัวหนังสือคำสั่งปรับแต่งตัวหนังสือ • ตัวหนา คือ "b" หรือจะใช้ "B" ก็ได้ครับและใช้สองคำสั่งพร้อมกันได้ • <B><U>หนาและขีดเส้นใต้</U></B> จะได้ หนาและขีดเส้นใต้

อักษรตัวหนา (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) รูปแบบ<FONT FACE="font name>ข้อความ</FONT> ตัวอย่าง <FONT FACE="AngsanaUPC">bcoms.net </FONT> Font name เป็นชื่อของ Font ที่เราต้องการให้เป็น เช่น <FONT FACE="AngsanaUPC"> bcoms.net</FONT>

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

การกำหนดกึ่งกลางหน้าเว็บเพจการกำหนดกึ่งกลางหน้าเว็บเพจ รูปแบบ<CENTER>ข้อความ</CENTER> ตัวอย่าง<CENTER>คอมพิวเตอร์เบื้องต้น</CENTER> คำว่า คอมพิวเตอร์เบื้องต้น จะอยู่ตรงกึ่งกลางหน้าเว็บพอดี

การกำหนดสี

การกำหนดสีตัวอักษร รูปแบบ<FONT COLOR=“สี”>ข้อความ</FONT> ตัวอย่าง<FONT COLOR=“BLUE”>คอมพิวเตอร์</FONT> ผลลัพธ์ คือ คำว่า “ คอมพิวเตอร์ ” จะแสดงเป็นสีน้ำเงิน

การกำหนดสีพื้นหลังให้หน้าเว็บเพจการกำหนดสีพื้นหลังให้หน้าเว็บเพจ รูปแบบ<BODY BGCOLOR=“สี”> ตัวอย่าง <BODY BGCOLOR=“YELLOW”> กำหนดสีพื้นหลังจากชื่อสีมาตรฐาน ผลลัพธ์ คือ พื้นหน้าเว็บจะกลายเป็นสีเหลือง ----------------------------------------- นอกจากนี้ยังกำหนดสีพื้นหลังจากเลขฐาน 16

คำสั่งที่ไม่ต้องใช้คำสั่งปิดคำสั่งที่ไม่ต้องใช้คำสั่งปิด • เช่น • คำสั่งขึ้นบรรทัดใหม่ (Line Break) <BR> • คำสั่งสร้างเส้นในแนวนอนของหน้าจอ<HR> ตัวอย่าง …………………… • <HTML> • <HEAD><TITLE> Break Rule </TITLE></HEAD> • <BODY> • Microsoft ถูกตัดสินโดยศาลสหรัฐแล้ว<BR> • โดยศาลสั่งให้ Microsoft แยกบริษัทออกเป็นบริษัทย่อย ๆ<HR> • </BODY> • </HTML>

การขีดเส้นคั่น รูปแบบ<HR WIDTH=“ความยาวของเส้น”> <HR SIZE=“ขนาดของเส้น”> <HR COLOR=“สีของเส้น”> <HR Align = "ตำแหน่งการจัดวาง" > ตัวอย่าง <HR WIDTH=“250”SIZE=“10” COLOR=“RED”>

ชนิดของรูปภาพ การแทรกภาพบนเว็บเพจ 1. Graphics Interchange Format (GIF) เป็นภาพที่มีการบีบอัดข้อมูล ภาพจึงมีขนาดเล็ก แต่สีที่รูปภาพในแบบ GIF นั้นสามารถแสดงผลได้เพียง 256 สี จึงเหมาะกับภาพในลักษณะภาพวาด 2. Joint Photographic Experts Group (JPEG หรือ JPG) เป็นรูปภาพที่ถูกบีบอัดข้อมูลไว้ ซึ่งคุณภาพของภาพที่ได้จะมีคุณภาพลดลงตามขนาดที่บีบอัดข้อมูล แต่ไม่จำกัดจำนวนสี ไฟล์ภาพแบบ JPEG เหมาะสำหรับภาพในลักษณะภาพถ่าย

การแทรกรูปภาพให้หน้าเว็บเพจการแทรกรูปภาพให้หน้าเว็บเพจ รูปแบบ<IMG SRC=“ชื่อรูปภาพ”></IMG> ตัวอย่าง <IMG SRC=“PIC01.JPG”></IMG> ผลลัพธ์ คือ พื้นหน้าเว็บจะกลายเป็นสีเหลือง

การใส่รูปภาพ • ระบุด้วย Tag img <imgscr=“x”> โดยที่ x คือไฟล์รูปภาพที่ต้องการแสดง เช่น <imgscr=“logo.jpg”> • หากไฟล์รูปภาพไม่ได้เก็บไว้ที่ path (ตำแหน่ง)เดียวกับเอกสาร html จะต้องระบุ path ของรูปภาพไว้หน้าไฟล์ด้วย เช่น <imgscr= “http://www.macare.net/images/logo.jpg”> ตัวอย่าง …………………… <html> <head><title>Font</title></head> <body> Google Banner <br> <imgsrc=“http://www.macare.net/images/logo.jpg "> </body> </html>

คำสั่งในการสร้างตาราง (Table) • Tag • คำอธิบาย • <TABLE> ... </TABLE> คำสั่งในการสร้างตาราง • <CAPTION> ... </CAPTION> คำสั่งในการกำหนดข้อความกำกับตาราง • <TR> ... </TR> คำสั่งในการกำหนดแถวของตาราง 1 แถว • <TH> ... </TH> คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก • <TD> ... </TD> คำสั่งในการกำหนดส่วนของข้อมูลในแถว หรือทำคอลัมน์

โครงสร้างของคำสั่งในการสร้างตารางโครงสร้างของคำสั่งในการสร้างตาราง • <TABLE> <CAPTION> ข้อความกำกับตาราง </CAPTION> <TR> <TH> ข้อความส่วนหัว </TH> .................... .................... </TR> <TR> <TD> ข้อความส่วนของข้อมูล </TD> ........................ ........................ </TR> <TR> <TD> ข้อความส่วนของข้อมูล </TD> ........................ ........................ </TR> ........................ ........................ ........................ • </TABLE>

การเชื่อมโยงเว็บเพจ (Link) • การสร้างจุดเชื่อมโยงข้อความ (Text Link) • ในการเชื่อมโยงเวบเพจเราจะใช้แท็ก <A> โดยการกำหนดข้อความในเอกสาร HTML เป็นจุดเชื่อมโยง โดยมีรูปแบบดังนี้ • <A HREF = "URL"> ข้อความ </A> • เช่น <A HREF="http://www.ru.ac.th/">มหาวิทยาลัยรามคำแหง</A><BR><A HREF="http://www.cu.ac.th/">จุฬาลงกรณ์มหาวิทยาลัย</A><BR><A HREF="http://www.tu.ac.th/">มหาวิทยาลัยธรรมศาสตร์</A><BR>

การสร้างจุดเชื่อมโยงกับรูปภาพ (Graphic Link) • เป็นการกำหนดให้รูปภาพเป็นจุดเชื่อมโยง โดยมีรูปแบบดังนี้ • <A HREF = "URL"><IMG SRC = "ชื่อไฟล์"></A> • เช่น • <A HREF="http://www.thairath.com/"><IMG SRC="thairath.gif" BORDER="0"></A>

ภาษา HTML