งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

Script Programming& Internet Programming

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "Script Programming& Internet Programming"— ใบสำเนางานนำเสนอ:

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)   < : แทน  <   > : แทน  >   & :   แทน  &   " : แทน  "

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 : //www.nectec.or.th/whats  new.html <A HREF="http///www.cnn.com"> 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

26


ดาวน์โหลด ppt Script Programming& Internet Programming

งานนำเสนอที่คล้ายกัน


Ads by Google