ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Script Programming& Internet Programming
Introduction to HTML
2
ทำความเข้าใจ 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 ตัวอื่นๆ เวลาเราเรียกดูเว็บ
3
ทำความเข้าใจ HTML &Internet (ต่อ)
TCP/IP :(Transmission Control Protocol/Internet Protocol) เป็นชุด ของโปรโตคอลที่ถูกใช้ในการสื่อสารผ่านเครือข่ายอินเทอร์เน็ต โดยมี วัตถุประสงค์เพื่อให้สามารถใช้สื่อสารจากต้นทางข้ามเครือข่ายไปยัง ปลายทางได้ และสามารถหาเส้นทางที่จะส่งข้อมูลไปได้เองโดย อัตโนมัติ ถึงแม้ว่าในระหว่างทางอาจจะผ่านเครือข่ายที่มีปัญหา โปรโตคอลก็ยังคงหาเส้นทางอื่นในการส่งผ่านข้อมูลไปให้ถึงปลายทาง ได้
4
ทำความเข้าใจ HTML HTML เป็น Script ที่เรียงลำดับ Tag (คำสั่ง) ไว้เป็น file ไฟล์หนึ่ง เพื่อ เป็นตัวบอก Browser ว่าจะต้องแสดงอะไร ลักษณะอย่างไร Tag จะประกอบด้วยเครื่องหมาย < ตามด้วยชื่อ Tag และ เครื่องหมาย > ซึ่งโดยทั่วไป Tag จะมีเป็นคู่ เพื่อเปิดและปิดคำสั่งโดย Tag เปิดจะมีลักษณะดังข้างต้น แต่ Tag ปิดจะเพิ่ม Slash (/) หน้า Tag เท่านั้น ตัวอย่างเช่น คำสั่ง Heading <HEADING>…………….</HEADIGNG> Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้
5
โครงสร้างของ HTML ลำดับ Tag ใน HTML Document <HTML>…………..</HTML> คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น HTML Document <HEAD>…………...</HEAD> หัวเรื่องแนะนำเรื่องราวของ Home Page ส่วนภายใน <HEAD> <TITLE>…………..</TITLE> ข้อความจะปรากฎเป็นชื่อวินโดว์ ส่วนข้อความอื่น ๆ <BODY>………….</BODY> เนื้อความและ Tag อื่น ๆ อีกมากมายจะอยู่ภายในนี้
6
การสร้าง 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 แล้วนั่นเอง
7
Markup Tag Heading <Hn> ใช้แสดงข้อความหัวเรื่องหรือข้อเน้นต่าง ๆ มี 6 ระดับ <H1>………………………..</H1> ใหญ่สุด <H1></H1> <H1>HTML </H1> <H2>………………………..</H2> รองลงมา <H2>HTML</H2> <H6>……………………….</H6> เล็กสุด <H6>HTML</H6>
8
Markup Tag (ต่อ) Holizontal Rule <HR> ขีดเส้นขั้นหน้า <HR>…………………….</HR> Paragraph <P> ใช้เมื่อขึ้นบรรทัดใหม่ โดยจะเว้นไป 1 บรรทัด <P>………………………</P> Line Break <BR> ขึ้นบรรทัดใหม่ โดยไม่เว้นบรรทัด <BR>……………………..</BR>
9
Markup Tag (ต่อ) Tag เกี่ยวกับลักษณะตัวอักษร (Text Styles) ตัวหนา <B>…………………..</B> ตัวเอียง <I>……………………</I> ขีดเส้นใต้ <U>…………………..</U> กระพริบ <BLINK>…………………</BLINK>
10
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>
11
Markup Tag (ต่อ) ตัวอักษรพิเศษ คือเครื่องหมาย < , >, &, " ซึ่งซ้ำกับส่วน หนึ่งของ Tag ถ้าต้องการแสดงบน Home Page ต้องแทนด้วย ตัวอักษรเหล่านี้ (เรียกว่า Escape Sequence) < : แทน < > : แทน > & : แทน & " : แทน "
![Markup Tag (ต่อ)](http://slideplayer.in.th/slide/2055613/8/images/11/Markup+Tag+%28%E0%B8%95%E0%B9%88%E0%B8%AD%29.jpg "ตัวอักษรพิเศษ คือเครื่องหมาย < , >, &, ซึ่งซ้ำกับส่วน หนึ่งของ Tag ถ้าต้องการแสดงบน Home Page ต้องแทนด้วย ตัวอักษรเหล่านี้ (เรียกว่า Escape Sequence) < : แทน < > : แทน > & : แทน & " : แทน")
12
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>
13
Markup Tag (ต่อ) TAG เพิ่มเติม ภาพ Background <BODY BACKGROUNG=URL> กำหนดสีพื้น (ต้องไว้บนสุด) <BODY BGCOLOR=#nnnnnn> กำหนดสีตัวหนังสือ <BODY TEXT=#nnnnnn>
14
Image IMAGE นำรูปมาลงใน Home Page รูปแบบคำสั่ง
รูปแบบคำสั่ง <IMG SRC=URL หรือ ชื่อภาพ > ทำความเข้าใจ URL : สำหรับ Home Page แบบ Local จะหมายถึง ไดเรคเทอรีที่ File นั้นอยู่ ถ้าอยู่ในไดเรคเทอรีเดียวกับตัว Browser ก็ไม่ต้องใส่ URL ใส่แต่ชื่อ สำหรับ Extention ของรูปภาพที่นิยมใช้บน Internet คือ GIF สำหรับภาพสี 8 บิต JPEG สำหรับ 24 บิต Browser บางตัวรับแต่ GIF
15
Link ด้วย Image <A HREF=URL> <IMG SRC=URL หรือชื่อภาพ …………………. </A>
16
คำสั่งเพิ่มเติมในการจัดรูปแบบ
WIDTH= HEIGHT= ALIGN=TOP หรือ MIDDLE หรือ BOTTOM จะทำให้ข้อความอยู่ส่วนบน กลาง และล่างของรูปภาพตามลำดับ
17
Iink การเชื่อมโยงข้อมูล
การเชื่อมโยงข้อมูล (LINKS) รูปแบบ <A HREF=" URL">…………………………</A> URL Uniform Resource Location มีรูปแบบดังนี้ Protocal ตัวอย่าง htp : // new.html <A HREF="http/// CNN News Online </A>
18
Iink การเชื่อมโยงข้อมูล
นอกจากนี้ยังสามารถ Link ไปที่ไฟล์ HTML อื่น หรือใน ไฟล์เดียวกันก็ได้ (Local Link) โดยกำหนด URL ให้เป็น path และไดเรคเทอรีที่ไฟล์นั้นอยู่ (กรณี Link ไปไฟล์ อื่น) เช่น <a href=“does/magazine.htm"> Magazines </a>
19
Iink การเชื่อมโยงข้อมูล
ในกรณี Link ไป ไฟล์เดียวกัน ต้องกำหนดชื่อตำแหน่งใน เอกสารก่อนมี Anchor Tag ดังนี้ <A NAME=MARKING>MARKING_POSITION_NAME </A> MARKING_POSITION_NAME = ชื่อตำแหน่ง หัวชื่อในเอกสาร ที่ Show ใน Home Page
20
Iink การเชื่อมโยงข้อมูล
การส่ง ตอบรับ <A HREF=":mailto……….." >ส่ง E- mail ถึง………….</A>
21
Table Tag <TABLE>…………………</TABLE> โดยมี Tag ที่ใช้ประกอบภายในคือ <CAPTION>…………………</CAPTION> ใช้กำหนดชื่อหรือ หัวข้อของตาราง <TH>…………………………</TH> เป็นตัวหนาอยู่กลางเพื่อเน้น ในหัวตาราง <TR>………………………….</TR> Row ของตาราง <TD>…………………………</TD> Column ของตาราง สามารถใช้ร่วมกับคำสั่ง ALIGN เพื่อจัดวางข้อความ WIDTH เพื่อปรับขนาดตาราง COLSPAN เพื่อแบ่งตารางย่อยตามคอลัมน์ POWSPAN เพื่อแบ่งตารางย่อยตามแถว
22
Table <table > <tr> <td><b>Col1</b></td> <td><b>Col2</b></td> <td><b>Col3</b></td> </tr> <td>Row1</td> <td>21</td> <td>31</td> <tr> <td>Row2</td> <td>22</td> <td>32</td> </tr> <td>Row3</td> <td>23</td> <td>33</td> </table>
23
Frame การทำเฟรมบน Home Page
<FRAMESET COLS="%ด้านซ้าย%ด้านขวา"> < FRAME SRC="ชื่อFile" NAME="LIFT FRAME"> <FRAME SRC="ชื่อFile" NAME="RIGHT FRAME"> </FRAMESET>
24
รูปแบบคำสั่ง <FORM ACTION="URL" METHOD=GET หรือ POST>
<INPUT TYPE=ชนิดอินพุต TEXT NAME= ตัว แปร> </FORM>
25
Color Code ค่าของสีข้างล่างนี้สามารถนำเอาไปใส่ใน Font, Background,Table ได้ #RRGGBB 8 digit of Hex
งานนำเสนอที่คล้ายกัน
