Transcript Document
เอกสารประกอบการสอน ภาษา HTML ตอนที่ 3 ตัวอักษรพิเศษ ตัวอักษรพิเศษที่ไม่มีบนแป้ นคียบ์ อร์ด หรื อ ถูกใช้เป็ น Tag ใน คำสัง่ HTML เรำไม่สำมำรถนำมำใช้เขียนได้ตำมปรกติ จำเป็ นต้อง ใช้รูปแบบพิเศษในกำรเขียน ตัวอย่ างการใช้ ตัวอักษรพิเศษ ตัวอักษร รู ปแบบการใช้ space & & < < > > “ " © ตัวอักขระตามรหัสแอสกี้ (ASCII) & # ตัวเลขรหัสแอสกี้ ตัวเลขรหัสแอสกี้มีค่ำระหว่ำง 0-255 ตัวอย่ างการใช้ ตัวอักขระตามรหัสแอสกี้ ตัวอักขระ “ % > รู ปแบบการใช้ " % > © อักษรพิเศษ " > © ตำรำงรหัส ASCII ตัวอย่ำง showascii.html <HTML> <HEAD> <TITLE> ASCII </TITLE> </HEAD> <BODY><H1>These are special characters</H1> <H3> " This is number 34 <BR> " This is number 34 <BR><BR> % This is number 37 <BR><BR> > This is number 62 <BR> > This is number 62 <BR><BR> A This is number 65 <BR><BR> b This is number 97 </H3> </BODY> </HTML> ตัวอย่ำง 09_SpecialCharAscii.html ช่องว่ำง 1 ช่องว่ำง   (Non Breaking Space) <!- - text --> หมำยเหตุ (Comment) ข้อควำมนี้ไม่แสดงบน web browser ตัวอย่ำง 09_SpecialCharAscii02.html <HTML> <HEAD> <TITLE> ASCII </TITLE> </HEAD> <BODY><H1>These are special characters</H1> <H3> " This is number 34 <BR> " This is number 34 <BR><BR> <!ให้ผลเหมือนบรรทัดข้ำงบน> % This is number 37 <BR><BR> > This is number 62 <BR> > This is number 62 <BR><BR> A This is number 65 <BR><BR> b This is number 97 </H3> </BODY> </HTML> ตัวอย่ำง showascii.html เส้ นตรงแนวนอน (Horizontal Rule) <HR> NOSHADE <HR NOSHADE> กำหนดเป็ นเส้นทึกดำ SIZE <HR SIZE=10> ควำมหนำของเส้น WIDTH <HR WIDTH =40> ควำมยำวของเส้นเป็ น pixel <HR WIDTH =80%> ควำมยำวของเส้นเป็ น % ของหน้ำจอ ALIGN <HR ALIGN=CENTER> ตำแหน่งกลำง <HR ALIGN=RIGHT> ชิดขวำ <HR ALIGN=LEFT> ชิดซ้ำย <HR NOSHADE SIZE=5 WIDTH=50% ALIGN=CENTER> ตัวอย่ำง HR.html <HTML> <HEAD> <TITLE> horizontal rule </TITLE> </HEAD> <BODY> <H3> Implementations of the SIZE= and WIDTH= attributes of the < HR> tag</H3> SIZE=40 WIDTH="20%" <HR NOSHADE SIZE=40 WIDTH="20%" ALIGN=LEFT> SIZE=30 WIDTH="30%" <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=LEFT> SIZE=20 WIDTH="40%" <HR NOSHADE SIZE=20 WIDTH="40%" ALIGN=LEFT> SIZE=10 WIDTH="50%" <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=CENTER> SIZE=5 WIDTH="60%" <HR SIZE=5 WIDTH="60%" ALIGN=RIGHT> </BODY> </HTML> ตัวอย่ำง HR.html กำรใส่ รูปภำพ <IMG SRC="image_name" ALT= "alt" ALIGN="top หรือ middle หรือ bottom" WIDTH=" width " HEIGHT=" height " HSPACE=" hspace" VSPACE="vspace" BORDER=" กาหนดเลขความหนาของ border" > แสดงรู ปภำพ image_name : ชื่อไฟล์รูปภำพ .jpg / .jpeg / .gif รู ปแบบ /path/file_name.extention alt : ข้อควำมอธิบำย top/middle/bottom : กำหนดข้อควำมที่อยูด่ ำ้ นข้ำงชิดขอบบน / กลำง / ล่ำง width : ควำมกว้ำงของรู ป height : ควำมสู งของรู ป hspace : ระยะห่ำงจำกขอบด้ำนข้ำง vspace : ระยะห่ำงจำกขอบด้ำนบน border : ควำมหนำของกรอบรู ปภำพ ตัวอย่ำง myimage.html <HTML><HEAD><TITLE>This is my image</TITLE></HEAD> <BODY> HELLO<BR> This is the most handsome man.<BR> <IMG ALT="my picture" SRC=“mypicture.jpg"><BR> HELLO<BR> This is the most beautiful lotus. <BR> <IMG ALT="my picture" SRC=“lotus.jpg" WIDTH="80" HEIGHT="90" ALIGN="middle" HSPACE="50" VSPACE="50" BORDER="5"> </BODY> </HTML> <CENTER> … </CENTER> จัดข้อควำมหรื อรู ปภำพให้อยูก่ ่ ึงกลำงจอภำพ <BODY BACKGROUND="image_name" BGPROPERTIES="fixed"> แสดงรู ปภำพเป็ นพื้นหลัง image_name : ชื่อรู ปภำพ .jpg / .jpeg / .gif รู ปแบบ /path/file_name.extention BGPROPERTIES="fixed" : กำรกำหนดให้รูปภำพคงที่ จะทำให้รูปภำพ ไม่มีกำรเคลื่อนที่ตำมเมื่อเลื่อนสกอรบำร์ เมื่อข้อมูลมีควำมยำวมำกกว่ำ 1 หน้ำจอ ตัวอย่ำง background.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY BACKGROUND="http://www.blogblog.com/1kt/awesomeinc/body_background_dar k.png"> 1<BR>2<BR>3<BR>4<BR>5<BR> 6<BR>7<BR>8<BR>9<BR>10<BR> 11<BR>12<BR>13<BR>14<BR>15<BR> 16<BR> </BODY> </HTML> กำรเชื่อมโยง การเชื่อมโยง (Link) 1. การเชื่อมโยงไปยังเว็บเพจอืน่ 1.1 การเชื่อมโยงภายในเว็บไซต์ เดียวกันเว็บเพจเดียวกัน 1.2 การเชื่อมโยงภายในเว็บไซต์ เดียวกันต่ างเว็บเพจ 1.3 การเชื่อมโยงนอกเว็บไซต์ 2. การเชื่อมโยงแบบอีเมล์ 3. การเชื่อมโยงแบบ Download การเชื่อมโยงภายในเว็บไซต์ เดียวกันเว็บเพจเดียวกัน <A NAME="name">text_image_reference</A> name : ตั้งชื่อตำแหน่งอ้ำงอิง text_image_reference : ข้อควำม/รู ปภำพที่ตำแหน่งอ้ำงอิง <A HREF="#name">text_image_link</A> #name : #ชื่อตำแหน่งอ้ำงอิง text_image_link : ข้อควำม/รู ปภำพสำหรับเชื่อมโยง การเชื่อมโยงภายในเว็บไซต์ เดียวกันต่ างเว็บเพจ <A HREF="file_name">text_image_link</A> file_name : ชื่อไฟล์ รู ปแบบ /path/file_name.extention text_image_link : ข้อควำม/รู ปภำพสำหรับเชื่อมโยง การเชื่อมโยงนอกเว็บไซต์ <A HREF="url">text_image_link</A> url : ที่อยูข่ องเว็บไซต์ text_image_link : ข้อควำม/รู ปภำพสำหรับเชื่อมโยง ตัวอย่ำง Link01.html <HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=utf-8“><TITLE></TITLE></HEAD> <BODY> <a name="top">หน้ำที่ 1</a><BR><BR> 1<BR><BR>2<BR><BR>3<BR><BR>4<BR><BR>5<BR><BR> 6<BR><BR>7<BR><BR>8<BR><BR>9<BR><BR>10<BR><BR> 11<BR><BR>12<BR><BR>13<BR><BR>14<BR><BR>15<BR><BR> 16<BR><BR> <a href="#top">ขึ้นไปด้ำนบน</a><BR><BR> <a href="Link02.html">เชื่อมโยงไปยังหน้ำที่ 2</a><BR><BR> <a href="http://www.bsru.ac.th">เว็บไซต์มำหำวิทยำลัย</a> </BODY> </HTML> ตัวอย่ำง Link02.html <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> </HEAD> <BODY> หน้ำที่ 2 <BR><BR> <a href="Link01.html">กลับหน้ำไปหน้ำที่ 1</a> </BODY> </HTML> การเชื่อมโยงแบบอีเมล์ <A HREF="MAILTO: e-mail address">text_image_link</A> e-mail address : ที่จะส่ งไปถึง text_image_link : ข้อควำม/รู ปภำพสำหรับเชื่อมโยง เมื่อคลิดที่กำรเชื่อมโยงแบบนี้จะไปเปิ ดโปรแกรมสำหรับกำรส่ ง E-mail เช่น MSOutlook ตัวอย่ำง LinkEmail.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <a href="mailto:[email protected]">ติดต่อผูด้ ูแลระบบ</a> </BODY> </HTML> การเชื่อมโยงแบบ Download <A HREF="file_name">text_image_link</A> file_name : ชื่อไฟล์ สำหรับ download เช่น ไฟล์รูปภำพ, ไฟล์เอกสำรต่ำง ๆ รู ปแบบ /path/file_name.extention text_image_link : ข้อควำม/รู ปภำพสำหรับเชื่อมโยง ตัวอย่ำง 15_LinkDownload.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <a href="/ExHtml/DownloadFile.doc">ไฟล์ขอ้ มูล</a> </BODY> </HTML> การแสดงข้ อมูลรายการแบบมีลาดับกากับ (Order List) <OL TYPE="type" START="start"> <LI> <LI VALUE="value"> กำรแสดงข้อมูลรำยกำรแบบมีลำดับกำกับ (Order List) type : 1 / A / a / I / I 1 ลำดับเป็ นตัวเลข และเป็ นค่ำ default กรณี ที่ไม่กำหนด type A ลำดับเป็ นตัวพิมพ์ใหญ่ a ลำดับเป็ นตัวพิมพ์ใหญ่ I ลำดับเป็ นตัวเลขโรมันใหญ่ i ลำดับเป็ นตัวเลขโรมันเล็ก start : จุดเริ่ มต้น value : ค่ำลำดับที่ตอ้ งกำรให้แสดง ตัวอย่ำง OL01.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <B>OL</B> <OL> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice </OL> </BODY> </HTML> ตัวอย่ำง OL02.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <B>OL</B> <OL> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice </OL> ตัวอย่ำง OL02.html <BR><BR> <B>OL TYPE="A"</B> <OL TYPE="A"> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice </OL> (ต่ อ) ตัวอย่ำง OL02.html (ต่ อ) <BR><BR> <B>OL TYPE="a" START="2"</B> <OL TYPE="a" START="2"> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice </OL> ตัวอย่ำง OL02.html <BR><BR> <B>OL TYPE="I"</B> <OL TYPE="I"> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice </OL> (ต่ อ) ตัวอย่ำง OL02.html (ต่ อ) <BR><BR> <B>OL TYPE="i" START="4"</B> <OL TYPE="i" START="4"> <LI>First Choice<BR> <LI>Second Choice<BR> <LI>Third Choice<BR> <LI>Fourth Choice </OL> ตัวอย่ำง OL02.html (ต่ อ) <BR><BR> <B>OL TYPE="A"</B> <OL TYPE="A"> <LI>First Choice<BR> <LI VALUE="10">Second Choice<BR> <LI>Third Choice </OL> </BODY> </HTML> การแสดงข้ อมูลรายการแบบมีสัญลักษณ์ กากับ (Bulleted List) <UL TYPE="type"> <LI> </UL> กำรแสดงข้อมูลรำยกำรแบบมีสญ ั ลักษณ์กำกับ (Bulleted List) type : disc,circle,square disc กำรกำหนดรำยกำรแบบวงกลมทึบ (เป็ น Default) circle กำรกำหนดรำยกำรแบบวงกลม square กำรกำหนดรำยกำรแบบสี่ เหลี่ยมทึบ ตัวอย่ำง UL.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <B>UL</B> <UL><LI>First Choice<BR> <LI>Second Choice<BR><LI>Third Choice</UL> <BR><BR> <B>UL TYPE="disc"</B> <UL TYPE="disc"><LI>First Choice<BR> <LI>Second Choice<BR><LI>Third Choice</UL> ตัวอย่ำง UL.html (ต่อ) <BR><BR> <B>UL TYPE="circle"</B> <UL TYPE="circle"><LI>First Choice<BR> <LI>Second Choice<BR><LI>Third Choice</UL> <BR><BR> <B>UL TYPE="square"</B> <UL TYPE="square"><LI>First Choice<BR> <LI>Second Choice<BR><LI>Third Choice</UL> </BODY> </HTML> การแสดงข้ อมูลรายการแบบนิยาม (Definition List) ไม่ มีตัวเลขหรือสั ญลักษณ์ กากับ <DL> <DT>text_title</DT> <DD>text_list</DD> </DL> กำรแสดงข้อมูลรำยกำรแบบนิยำม (Definition List) ไม่มีตวั เลขหรื อสัญลักษณ์กำกับ text_title : ข้อควำมหัวเรื่ อง text_list : ข้อควำมรำยกำรย่อย ตัวอย่ำง DL.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <B>DL</B> <DL> <DT>This is Your Choices</DT> <DD>First Choice</DD> <DD>Second Choice</DD> <DD>Third Choice</DD> </DL> </BODY> </HTML> กำรแสดงข้อมูลรำยกำรแบบนิยำม (Definition List) ร่ วมกับ <IMG…> เพื่อแสดงหัวข้อรำยกำรเป็ นรู ปภำพ <DL> <DT>text_title</DT> <DD><IMG…>text_list</DD> </DL> กำรแสดงข้อมูลรำยกำรแบบนิยำม (Definition List) ร่ วมกับ <IMG…> เพื่อแสดงหัวข้อรำยกำรเป็ นรู ปภำพ text_title : ข้อควำมหัวเรื่ อง text_list : ข้อควำมรำยกำรย่อย ตัวอย่ำง DL_IMG.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <DL> <DT>Your Choices</DT> <DD><IMG SRC="/image/action_mini.gif"> First Choice</DD> <DD><IMG SRC="/image/bean_mini.gif">Second Choice</DD> <DD><IMG SRC="/image/sample.gif">Third Choice</DD> </DL> </BODY> </HTML> ตาราง (TABLE) http://www.problogdesign.com/design/how-to-style-your-articles-differently-using-html-tables/ ตารางพืน้ ฐาน <TABLE BORDER="table_border"> <TR> <TD> text_row1_col1 </TD> <TD> text_row1_col2 </TD> </TR> <TR> <TD> text_row2_col1 </TD> <TD> text_row2_col2 </TD> </TR> </TABLE> table_border : ควำมหนำของเส้นขอบตำรำง <TR> </TR> : แถวของตำรำง <TD> </TD> : คอลัมน์ของตำรำง ตัวอย่ำง Table01.html <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <TABLE BORDER="2"> <TR> <TD> text_row1_col1 </TD> <TD> text_row1_col2 </TD> <TD> text_row1_col3 </TD> </TR> <TR> <TD> text_row2_col1 </TD> <TD> text_row2_col2 </TD> <TD> text_row2_col3 </TD> </TR> ตัวอย่ำง Table01.html (ต่ อ) <TR> <TD> text_row3_col1 </TD> <TD> text_row3_col2 </TD> <TD> text_row3_col3 </TD> </TR> <TR> <TD> text_row4_col1 </TD> <TD> text_row4_col2 </TD> <TD> text_row4_col3 </TD> </TR> <TR> <TD> text_row5_col1 </TD> <TD> text_row5_col2 </TD> <TD> text_row5_col3 </TD> </TR> </TABLE> </BODY></HTML> ตาราง <TABLE BORDER="table_border"> <TR> <TD COLSPAN="col_no" ROWSPAN="row_no" > </TD> </TR> </TABLE> col_no : จำนวนคอลัมน์ที่ตอ้ งกำรผสำน row_no : จำนวนแถวที่ตอ้ งกำรผสำน ตัวอย่ำง Table02.html (ต่ อ) <HTML><HEAD><TITLE></TITLE></HEAD> <BODY> <TABLE BORDER="2"> <TR> <TD COLSPAN="2"> text_row1_col1_clo2 </TD> <!--<TD> text_row1_col2 </TD>--> <TD ROWSPAN="3"> text_row1_col3 </TD> </TR> <TR> <TD> text_row2_col1 </TD> <TD> text_row2_col2 </TD> <!--<TD> text_row2_col3 </TD>--> </TR> ตัวอย่ำง Table02.html <TR> (ต่ อ) <TD> text_row3_col1 </TD> <TD> text_row3_col2 </TD> <!--<TD> text_row3_col3 </TD>--> </TR> <TR> <TD ROWSPAN="2" COLSPAN="2"> text_row4_col1_col2 + text_row5_col1_col2 </TD> <!--<TD> text_row4_col2 </TD>--> <TD> text_row4_col3 </TD> </TR> ตัวอย่ำง Table02.html (ต่ อ) <TR> <!--<TD> text_row5_col1 </TD>--> <!--<TD> text_row5_col2 </TD>--> <TD> text_row5_col3 </TD> </TR> </TABLE> </BODY> </HTML> <TABLE BORDER="border" ALIGN="table_align" WIDTH="width" HEIGHT="height" BGCOLOR="background_color" BACKGROUND="image_name" CELLPADDING="cellpdding" > <TR BORDER="border" ALIGN="row_align" VALIGN="row_valign" WIDTH="width" HEIGHT="height" BGCOLOR="background_color" CELLPADDING="cellpdding"> <TD BORDER="border" ALIGN="col_align" VALIGN="col_valign" WIDTH="width" HEIGHT="height" BGCOLOR="background_color" CELLPADDING="cellpdding" > text</TD> </TR> </TABLE> border : ควำมหนำเส้นขอบของตำรำง / แถว / คอลัมน์ width : ควำมกว้ำงของตำรำง / แถว / คอลัมน์ height : ควำมสู งของตำรำง / แถว / คอลัมน์ background_color : สี พ้นื หลัง -> ชื่อสี / #เลขฐำนสิ บหก image_name : รู ปภำพพื้นหลัง -> /พำร์ท/ไฟล์รูปภำพ cellpdding : ระยะห่ำงจำกขอบ table_align : กำหนดตำรำงชิดขอบ left : ชิดขอบซ้ำย right : ชิดขอบขวำ center : กลำงหน้ำจอ row_align : กำหนดข้อควำมในแถวชิดขอบ left : ชิดขอบซ้ำย right : ชิดขอบขวำ center : กลำงแถว col_align : กำหนดข้อควำมในคอลัมน์ชิดขอบ left : ชิดขอบซ้ำย right : ชิดขอบขวำ center : กลำงคอลัมน์ row_valign : กำหนดข้อควำมในแถวชิดขอบแนวตั้ง top : ชิดขอบบน middle : กึ่งกลำง bottom : ชิดขอบล่ำง col_valign : กำหนดข้อควำมในคอลัมน์ชิดขอบแนวตั้ง top : ชิดขอบบน middle : กึ่งกลำง bottom : ชิดขอบล่ำง <table border="1"> <caption>This is the table caption</caption> <thead> <tr> <th>Headline</th> <th>Second Headline</th> </tr> </thead> <tbody> <tr> <td>First Row, First Column</td> <td>First Row, Second Column</td> </tr> <tr> <td>Second Row,First Column</td> <td>Second Row, Second Column</td> </tr> </tbody> </table> งำนส่ ง สร้ำงเว็บไซต์แนะนำตัวเองประ -มีอย่ำงน้อย 3 เว็บเพจ -มีกำรเชื่อมโยงทุกแบบ -ตกแต่งหน้ำเว็บเพจให้สวยงำมด้วยรู ปภำพและกำรจัดตัวอักษร 58