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

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

SCRIPT PROGRAMMING& INTERNET PROGRAMMING Introduction to HTML.

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


งานนำเสนอเรื่อง: "SCRIPT PROGRAMMING& INTERNET PROGRAMMING Introduction to HTML."— ใบสำเนางานนำเสนอ:

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 ปิด จะเพิ่ม Slash (/) หน้า Tag เท่านั้น ตัวอย่างเช่น คำสั่ง Headi ng ……………. Tag จะพิมพ์ด้วยตัวอักษรใหญ่ หรือเล็กก็ได้

5 โครงสร้างของ HTML ………….. …………...  ลำดับ Tag ใน HTML Document ………….. คือจุดเริ่มต้นและสิ้นสุดของโปรแกรม และแจ้งแก่ Browser ว่าเป็น HTML Document …………... หัวเรื่องแนะนำเรื่องราวของ Home Page …………..  ส่วนภายใน ………….. ข้อความจะปรากฎเป็นชื่อวินโดว์ ………….  ส่วนข้อความอื่น ๆ …………. เนื้อความและ 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 ใช้แสดงข้อความหัวเรื่องหรือข้อ เน้นต่าง ๆ มี 6 ระดับ ……………………….. ใหญ่สุด   HTML  ……………………….. รองลงมา HTML  ………………………. เล็กสุด HTML

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

9 Markup Tag ( ต่อ )  Tag เกี่ยวกับลักษณะตัวอักษร (Text Styles) ตัวหนา ………………….. ตัวเอียง …………………… ขีดเส้นใต้ ………………….. กระพริบ …………………

10 Markup Tag ( ต่อ )  กำหนดขนาด Font ……………………. เช่น html html html html html html html ขนาดใหญ่ที่สุดคือ 7 ไล่เล็กลงมาจนถึง 1 นิยมกำหนดขนาด Font ทั้งหมดด้วย Tag ที่ ต้น Document โดยสั่งต่อจาก

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

12 Markup Tag ( ต่อ )  การจัดข้อความ เพื่อกำหนดกำหนดของตัวหนังสือ หรือภาพบน หน้า Home Page HTML 3.0  …………….. ……  ………………… ………..  ………………. ………

13 Markup Tag ( ต่อ )  TAG เพิ่มเติม ภาพ Background กำหนดสีพื้น ( ต้องไว้บนสุด ) กำหนดสีตัวหนังสือ

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

15 Link ด้วย Image

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

17 Iink การเชื่อมโยงข้อมูล  การเชื่อมโยงข้อมูล (LINKS) รูปแบบ …………………………  URL Uniform Resource Location มี รูปแบบดังนี้ Protocal ตัวอย่าง htp : //www.nectec.or.th/whats new.html CNN News Online

18 Iink การเชื่อมโยงข้อมูล  นอกจากนี้ยังสามารถ Link ไปที่ ไฟล์ HTML อื่น หรือในไฟล์เดียวกันก็ ได้ (Local Link) โดยกำหนด URL ให้ เป็น path และไดเรคเทอรีที่ไฟล์นั้น อยู่ ( กรณี Link ไปไฟล์อื่น ) เช่น M agazines

19 Iink การเชื่อมโยงข้อมูล  ในกรณี Link ไป ไฟล์เดียวกัน ต้อง กำหนดชื่อตำแหน่งในเอกสารก่อน มี Anchor Tag ดังนี้ MARKING_POSITION _NAME MARKING_POSITION_NAME = ชื่อ ตำแหน่ง หัวชื่อในเอกสาร ที่ Show ใน Home Page

20 Iink การเชื่อมโยงข้อมูล  การส่ง ตอบรับ ส่ง ถึง ………….

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

22 Table Col1 Col2 Col3 Row Row Row

23 Frame  การทำเฟรมบน Home Page

24 Form การทำ FORM  รูปแบบคำสั่ง

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

26


ดาวน์โหลด ppt SCRIPT PROGRAMMING& INTERNET PROGRAMMING Introduction to HTML.

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


Ads by Google