Script Programming& Internet Programming

Script Programming&Internet Programming Introduction to HTML

ทำความเข้าใจ HTML&Internet • HTML (Hypertext Markup Language) เป็น Script ที่ใช้สร้าง Home Page บน Web เป็น Script ที่มีความสามารถในการเชื่อมโยงข้อมูลใน Computer ระหว่าง Computer ในเครือข่ายและระหว่างเครือข่ายใน Internet โดยอ้างอิงจาก URL (Uniform Resource Locators)ด้วยโปรโตคอล HTTP ซึ่งเป็นโปรโตคอลของ WWW • HTTP(Hyper Text Transfer Protocol ) :เป็นโปรโตคอลสื่อสารที่ทำงานอยู่บนระบบโปรโตคอล TCP HTTP ใช้ในระบบเครือข่ายใยแมงมุม (World Wide Web) ทำหน้าที่ในการจำหน่าย,แจกจ่าย รวมไปถึงการรับข้อมูล จากระบบสื่อกลางชั้นสูง (Hypermedia System) ที่ประกอบด้วยเครื่องให้บริการ (Server) ที่มีอยู่มากมายทั่วโลก เวลาเราเข้าเว็บ ด้วย Browser เช่น IE (Internet Explorer), FF(FireFox) หรือ Google Chrome หรือ Browser ตัวอื่นๆ เวลาเราเรียกดูเว็บ

ทำความเข้าใจ HTML&Internet (ต่อ) • TCP/IP :(Transmission Control Protocol/Internet Protocol) เป็นชุดของโปรโตคอลที่ถูกใช้ในการสื่อสารผ่านเครือข่ายอินเทอร์เน็ต โดยมีวัตถุประสงค์เพื่อให้สามารถใช้สื่อสารจากต้นทางข้ามเครือข่ายไปยังปลายทางได้ และสามารถหาเส้นทางที่จะส่งข้อมูลไปได้เองโดยอัตโนมัติ ถึงแม้ว่าในระหว่างทางอาจจะผ่านเครือข่ายที่มีปัญหา โปรโตคอลก็ยังคงหาเส้นทางอื่นในการส่งผ่านข้อมูลไปให้ถึงปลายทางได้

ทำความเข้าใจ HTML • HTMLเป็น Script ที่เรียงลำดับ Tag (คำสั่ง)ไว้เป็น file ไฟล์หนึ่งเพื่อเป็นตัวบอก Browser ว่าจะต้องแสดงอะไรลักษณะอย่างไร Tag จะประกอบด้วยเครื่องหมาย < ตามด้วยชื่อ Tag และเครื่องหมาย > ซึ่งโดยทั่วไป Tag จะมีเป็นคู่เพื่อเปิดและปิดคำสั่งโดย Tag เปิดจะมีลักษณะดังข้างต้นแต่ Tag ปิดจะเพิ่ม Slash (/)หน้า Tag เท่านั้นตัวอย่างเช่นคำสั่ง Heading <HEADING>…………….</HEADIGNG> Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้

โครงสร้างของ HTML • ลำดับ Tag ใน HTML Document <HTML>…………..</HTML> คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น HTML Document <HEAD>…………...</HEAD> หัวเรื่องแนะนำเรื่องราวของ Home Page • ส่วนภายใน <HEAD> <TITLE>…………..</TITLE> ข้อความจะปรากฎเป็นชื่อวินโดว์ • ส่วนข้อความอื่น ๆ<BODY>………….</BODY> เนื้อความและ Tag อื่น ๆ อีกมากมายจะอยู่ภายในนี้

การสร้าง HTML Document ต้องมีอะไรบ้าง • Text editorอะไรก็ได้ เช่น Notepad เพื่อพิมพ์คำสั่ง (Tag) ของ HTML ซึ่งเป็น Text File แล้วจึง Save ให้ Extention เป็น.htm หรือ .html (สำหรับ os ตัวอื่น ๆ ที่ไม่ใช่ Dos หรือ Window)  Macromedia Browserที่นิยมก็คือ Internet Explorer, Netscape หรือจะเป็นตัวอื่นก็ได้เพื่อไว้อ่าน HTML Document แล้วแปลออกมาเป็นหน้าตาของ Home Page (Browser คนละบริษัทอาจให้ผลลัพท์แตกต่างกันเล็กน้อย) Serverที่ใช้เก็บ Home Page ซึ่งต้อง Support โปรโตคอล HTTP หรือ Run httpd แล้วนั่นเอง

Markup Tag • Heading <Hn> ใช้แสดงข้อความหัวเรื่องหรือข้อเน้นต่าง ๆ มี 6 ระดับ <H1>………………………..</H1> ใหญ่สุด • <H1></H1> • <H1>HTML </H1> • <H2>………………………..</H2> รองลงมา <H2>HTML</H2> • <H6>……………………….</H6> เล็กสุด <H6>HTML</H6>

Markup Tag (ต่อ) • Holizontal Rule <HR>ขีดเส้นขั้นหน้า <HR>…………………….</HR> • Paragraph <P>ใช้เมื่อขึ้นบรรทัดใหม่ โดยจะเว้นไป 1 บรรทัด <P>………………………</P> • Line Break <BR>ขึ้นบรรทัดใหม่ โดยไม่เว้นบรรทัด <BR>……………………..</BR>

Markup Tag (ต่อ) • Tag เกี่ยวกับลักษณะตัวอักษร(Text Styles)ตัวหนา <B>…………………..</B> ตัวเอียง <I>……………………</I> ขีดเส้นใต้ <U>…………………..</U> กระพริบ <BLINK>…………………</BLINK>

Markup Tag (ต่อ) • กำหนดขนาด Font <FONT SIZE=ตัวเลข>…………………….</FONT> เช่น <FONT SIZE=7> html </FONT> <FONT SIZE=6> html </FONT> <FONT SIZE=5> html </FONT> <FONT SIZE=4> html </FONT> <FONT SIZE=3> html </FONT> <FONT SIZE=2> html </FONT> <FONT SIZE=1> html </FONT> ขนาดใหญ่ที่สุดคือ 7 ไล่เล็กลงมาจนถึง 1นิยมกำหนดขนาด Font ทั้งหมดด้วย Tag ที่ต้น Document <BASEFONT SIZE=ตัวเลข> โดยสั่งต่อจาก <BODY>

Markup Tag (ต่อ) • ตัวอักษรพิเศษ คือเครื่องหมาย < , >, &, "ซึ่งซ้ำกับส่วนหนึ่งของ Tag ถ้าต้องการแสดงบน Home Page ต้องแทนด้วยตัวอักษรเหล่านี้(เรียกว่า Escape Sequence) &lt : แทน < &gt : แทน > &amp :แทน & &quot : แทน"

Markup Tag (ต่อ) • การจัดข้อความเพื่อกำหนดกำหนดของตัวหนังสือหรือภาพบนหน้า Home Page HTML 3.0 • <CENTER>……………..</CENTER> <P ALIGN=CENTER>……</P> • <LEFT>…………………</LEFT> <P ALIGN=LEFT>………..</P> • <RIGHT>……………….</RIGHT> <P ALIGN=RIGHT>………</P>

Markup Tag (ต่อ) • TAG เพิ่มเติมภาพ Background <BODY BACKGROUNG=URL> กำหนดสีพื้น(ต้องไว้บนสุด) <BODY BGCOLOR=#nnnnnn> กำหนดสีตัวหนังสือ <BODY TEXT=#nnnnnn>

Image • IMAGE นำรูปมาลงใน Home Page • รูปแบบคำสั่ง <IMG SRC=URL หรือ ชื่อภาพ> ทำความเข้าใจ URL : สำหรับ Home Page แบบ Local จะหมายถึง ไดเรคเทอรีที่ File นั้นอยู่ถ้าอยู่ในไดเรคเทอรีเดียวกับตัว Browser ก็ไม่ต้องใส่ URL ใส่แต่ชื่อ สำหรับ Extention ของรูปภาพที่นิยมใช้บน Internet คือ GIF สำหรับภาพสี 8 บิต JPEG สำหรับ 24 บิต Browser บางตัวรับแต่ GIF

Link ด้วย Image <A HREF=URL> <IMG SRC=URL หรือชื่อภาพ …………………. </A>

คำสั่งเพิ่มเติมในการจัดรูปแบบคำสั่งเพิ่มเติมในการจัดรูปแบบ • WIDTH= • HEIGHT= • ALIGN=TOP หรือ MIDDLE หรือ BOTTOM จะทำให้ข้อความอยู่ส่วนบนกลางและล่างของรูปภาพตามลำดับ

Iink การเชื่อมโยงข้อมูล • การเชื่อมโยงข้อมูล(LINKS)รูปแบบ <A HREF=" URL">…………………………</A> • URL Uniform Resource Location มีรูปแบบดังนี้ Protocal http://hostname/filename ตัวอย่าง htp : //www.nectec.or.th/whats new.html <A HREF="http///www.cnn.com"> CNN News Online </A>

Iink การเชื่อมโยงข้อมูล • นอกจากนี้ยังสามารถ Link ไปที่ไฟล์ HTML อื่นหรือในไฟล์เดียวกันก็ได้(Local Link)โดยกำหนด URL ให้เป็น path และไดเรคเทอรีที่ไฟล์นั้นอยู่(กรณี Link ไปไฟล์อื่น)เช่น <a href=“does/magazine.htm"> Magazines </a>

Iink การเชื่อมโยงข้อมูล • ในกรณี Link ไป ไฟล์เดียวกันต้องกำหนดชื่อตำแหน่งในเอกสารก่อนมี Anchor Tag ดังนี้ <A NAME=MARKING>MARKING_POSITION_NAME </A>MARKING_POSITION_NAME = ชื่อตำแหน่ง หัวชื่อในเอกสารที่ Show ใน Home Page

Iink การเชื่อมโยงข้อมูล • การส่ง E-mail ตอบรับ <A HREF=":mailto……….." >ส่ง E-mail ถึง………….</A>

Table Tag • <TABLE>…………………</TABLE> โดยมี Tag ที่ใช้ประกอบภายในคือ <CAPTION>…………………</CAPTION> ใช้กำหนดชื่อหรือหัวข้อของตาราง <TH>…………………………</TH> เป็นตัวหนาอยู่กลางเพื่อเน้นในหัวตาราง <TR>………………………….</TR> Row ของตาราง <TD>…………………………</TD> Column ของตาราง • สามารถใช้ร่วมกับคำสั่ง ALIGN เพื่อจัดวางข้อความ WIDTH เพื่อปรับขนาดตาราง COLSPAN เพื่อแบ่งตารางย่อยตามคอลัมน์ POWSPAN เพื่อแบ่งตารางย่อยตามแถว

Table <table > <tr> <td><b>Col1</b></td> <td><b>Col2</b></td> <td><b>Col3</b></td> </tr> <tr> <td>Row1</td> <td>21</td> <td>31</td> </tr> <tr> <td>Row2</td> <td>22</td> <td>32</td> </tr> <tr> <td>Row3</td> <td>23</td> <td>33</td> </tr> </table>

Frame • การทำเฟรมบน Home Page <FRAMESET COLS="%ด้านซ้าย%ด้านขวา"> < FRAME SRC="ชื่อFile" NAME="LIFT FRAME"><FRAME SRC="ชื่อFile" NAME="RIGHT FRAME"> </FRAMESET>

Form การทำ FORM • รูปแบบคำสั่ง<FORM ACTION="URL" METHOD=GET หรือ POST> <INPUT TYPE=ชนิดอินพุต TEXT NAME= ตัวแปร> </FORM>

Color Code • ค่าของสีข้างล่างนี้สามารถนำเอาไปใส่ใน Font, Background,Table ได้ #RRGGBB 8 digit of Hex

Script Programming& Internet Programming