1 / 26

เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML บทสรุปสำหรับวิชา 310101

เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML บทสรุปสำหรับวิชา 310101. โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ E-mail:wichai@buu.ac.th http:// seashore .buu.ac.th/~wichai. HTML คืออะไร. HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์ ที่ใช้เขียนเว็บเพจ

tamekah-marshall
Download Presentation

เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML บทสรุปสำหรับวิชา 310101

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. เอกสารประกอบการบรรยาย เรื่องการเขียน Home page ด้วย HTMLบทสรุปสำหรับวิชา 310101 โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ E-mail:wichai@buu.ac.th http://seashore.buu.ac.th/~wichai

  2. HTML คืออะไร • HTML ย่อมาจาก HyperText Markup Language เป็นภาษาคอมพิวเตอร์ ที่ใช้เขียนเว็บเพจ • เอกสาร HTML มีลักษณะเป็นเท็กซ์ไฟล์แบบ Hypertext ที่สามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้ • ในเอกสาร HTML มีการใส่คำสั่งที่เรียกว่าแท็ก (tag) เพื่อให้แสดงผลหรือทำงานตามที่ต้องการ • การสร้างเอกสาร HTML ใช้โปรแกรม Text editors ใดๆ เช่น NotePad ที่จัดเก็บเป็น Text file นามสกุล .html หรือ .htm E-mail:wichai@buu.ac.th

  3. Web Browser • โปรแกรม Web browser บนเครื่องของผู้ใช้ทำหน้าที่เรียกเอกสาร HTML บนเซิร์ฟเวอร์มาแปลคำสั่งและแสดงผลบนจอตามรูปแบบของคำสั่งที่กำหนด • ถ้ามีคำสั่งใดผิด Web browser จะข้ามคำสั่งนั้นไปทำคำสั่งถัดไปโดยไม่หยุดทำงาน • Web browser ที่นิยมใช้ได้แก่ MS Internet Explorer, Firefox, และ Opera เป็นต้น E-mail:wichai@buu.ac.th

  4. องค์ประกอบของเอกสาร HTML เอกสาร HTML ประกอบด้วย 2 ส่วน คือ • ข้อความ หรือเนื้อหา Browser มองเนื้อหาทั้งหมดเป็นย่อหน้าเดียว • คำสั่งที่เรียกว่า tag ซึ่งเป็นตัวกำหนดลักษณะและรูปแบบของเอกสาร เช่น <CENTER> E-mail:wichai@buu.ac.th

  5. Tag ในเอกสาร HTML • Tag ประกอบด้วยชื่อแท็กเขียนอยู่ระหว่างเครื่องหมาย < >เช่น <center> โดยทั่วไปจะใส่ไว้หน้าเอกสาร เรียกว่า แท็กเปิด • หลังชื่อแท็ก อาจจะมี attribute เพื่อระบุการทำงานเพิ่มพิเศษ เช่น <font color=red> • แท็กปิด ใช้บอกสิ้นสุดลักษณะการทำงานของ tag โดยมี / หน้าชื่อแท็ก โดยไม่ต้องมี attribute เช่น </font> • ชื่อ Tag จะพิมพ์ด้วยอักษรตัวเล็กหรือตัวใหญ่ก็ได้ E-mail:wichai@buu.ac.th

  6. โครงสร้างของเอกสาร HTML เอกสาร HTML ประกอบด้วย 2 ส่วน คือ Head และ Body • ส่วนหัวเรื่อง (Head) ประกอบด้วยคำสั่งใช้แสดงชื่อเรื่อง บน Title Bar ของเว็บเพจหน้านั้น • ส่วนเนื้อเรื่อง (Body) ประกอบด้วยคำสั่งและเนื้อหาข้อความในเว็บเพจ • เอกสารทั้งหมดต้องอยู่ภายใน Tag <HTML> และ </HTML> E-mail:wichai@buu.ac.th

  7. Tag เบื้องต้น • <HTML>…</HTML> ใช้แสดงจุดเริ่มต้นและสิ้นสุดเอกสาร HTML • <HEAD>…</HEAD> ใช้แสดงว่าเป็นส่วนหัวเรื่อง • <TITLE>…</TITLE> ใช้แสดงชื่อ Web page • <BODY>…</BODY> ใช้แสดงว่าเป็นส่วนเนื้อเรื่อง • <! … > ใช้เป็นหมายเหตุ E-mail:wichai@buu.ac.th

  8. ตัวอย่างเอกสาร HTML <HTML> <HEAD> <TITLE> Wichai’s Home page </TITLE> </HEAD> <BODY> <B> This is my first homepage </B> <P> That’s all </BODY> </HTML> E-mail:wichai@buu.ac.th

  9. Paragraph และ Linebreak • <P> เป็น tag กำหนดให้ขึ้นย่อหน้าใหม่ (ขึ้นบรรทัดใหม่และเว้นบรรทัด) มี tag ปิดหรือไม่มีก็ได้ • <BR> เป็น tag กำหนดให้ขึ้นบรรทัดใหม่ (ไม่ต้องมี tag ปิด) • <DD> ใช้ย่อหน้า • <HR> ใช้แสดงเส้นคั่นตลอดหน้าจอ E-mail:wichai@buu.ac.th

  10. การจัดให้อยู่กลาง (Center) • ปกติโปรแกรม Browser จะแสดงข้อความ หรือรูปภาพ ให้ชิดซ้ายของจอภาพ • Tag <CENTER>ใช้จัดวางข้อความที่ต้องการ ให้อยู่กลางบรรทัด • รูปแบบ <CENTER> ข้อความ </CENTER> E-mail:wichai@buu.ac.th

  11. การกำหนดลักษณะตัวอักษรการกำหนดลักษณะตัวอักษร Tag <FONT> … </FONT> ใช้กำหนดสี ขนาด และแบบตัวอักษร ให้ใช้ร่วมกับ attribute Size, Color และ Face • <FONT SIZE = 4> (กำหนดขนาดตัวอักษรได้ 7 ขนาด ใช้ตัวเลข 1-7 ปกติจะมีขนาด =3) • <FONT COLOR=red> หรือ <FONT COLOR=#AA6699> • <FONT Face=Arial> ใช้กำหนดแบบตัวอักษร • Tag <B> … </B> ใช้ทำให้ตัวอักษรเป็นแบบตัวเข้ม E-mail:wichai@buu.ac.th

  12. สีของ Background และสีตัวอักษรทั้งเอกสาร สีของพื้นฉากหลังและตัวอักษรทั้งหมดในเอกสาร กำหนดด้วย attrbute ในแท็ก <BODY> • <BODYBGCOLOR=Pink> ใช้กำหนดพื้นสีฉากหลัง • <BODYTEXT=Blue> ใช้กำหนดสีตัวอักษรทั้งหน้า หรือใช้ร่วมกัน เช่น <body bgcolor=#3399FF text=#FF00FF> E-mail:wichai@buu.ac.th

  13. การใส่รูปภาพ • Tag <IMG SRC=ชื่อไฟล์ภาพ> ใช้ใส่รูปภาพในตำแหน่งที่ต้องการ • ไฟล์รูปภาพจะต้องเป็นชนิด .gif หรือ .jpg เช่น <IMG SRC=birds.gif> • Tag <BODY BACKGROUND=sky.gif> เป็นนำภาพมาทำเป็น Background ของเอกสาร E-mail:wichai@buu.ac.th

  14. การเชื่อมโยงข้อมูล (Link) • เอกสาร HTML สามารถทำให้เชื่อมโยงกับเอกสารอื่นได้ หรือเว็บไซต์อื่นได้ • ข้อความที่ถูกกำหนดเป็นตัวเชื่อมโยง (Hypertext) จะมีสีแตกต่างจากปกติ หรือขีดเส้นใต้ หรืออาจใช้รูปภาพได้ • เมื่อเลื่อนเมาส์ไปชี้บนตัวเชื่อมโยงจะเป็นรูปมือ และจะแสดงตำแหน่งจุดหมายปลายทางบน Status bar • อาจจะเชื่อมโยงกับเอกสารภายใน website หรือ ภายนอก website ก็ได้ E-mail:wichai@buu.ac.th

  15. Anchor Tag • Tag <AHREF = “ชื่อเป้าหมาย”> ข้อความ </A> ใช้เพื่อเชื่อมโยงข้อความที่กำหนดใน tag ไปยังเป้าหมายที่กำหนด • เป้าหมายอาจเป็นแฟ้มเอกสารอื่นใน Website เดียวกัน เช่น <A HREF=“ecommerce.html”>เอกสารอีคอมเมิร์ส</A> • หรือเชื่อมโยงไปยังแฟ้มเอกสารใน Website อื่น เช่น <A HREF=http://www.nectec.or.th/index.html>NECTEC</A> E-mail:wichai@buu.ac.th

  16. การเชื่อมโยงโดยใช้รูปภาพการเชื่อมโยงโดยใช้รูปภาพ • อาจใช้รูปภาพเชื่อมโยงแทนข้อความ เช่น <A HREF=“http://www.nasa.org”><IMG SRC=“space.gif”></A>หรือจะใช้ร่วมกันก็ได้เช่น <A HREF=“http://www.nasa.org”><IMGSRC=“space.gif”>NASA Link</A> E-mail:wichai@buu.ac.th

  17. E-mail address ใน HTML • เป็นการเชื่อมโยงเพื่อใช้ส่ง e-mail โดยระบุเป้าหมายใน attribute ของ Anchor tag ด้วย URL Location แบบ mailto ตามด้วย E-mail address • ตัวอย่าง <A HREF=“mailto:wichai@buu.ac.th”>Contact me</A> E-mail:wichai@buu.ac.th

  18. การสร้างตาราง (Table) • ใช้ตารางช่วยแบ่งกลุ่มข้อมูลที่มีมากมายและกระจัดกระจาย ให้ดูง่าย เหมือนตารางในกระดาษ • โครงสร้างประกอบด้วย tag <TABLE> … </TABLE> • ภายในมี tag <TR> … </TR> ใช้กำหนดแถว • แต่ละแถวมี tag <TD> … </TD> ใช้กำหนดคอลัมน์ หรือเซลล์ของแถว เพื่อใช้บรรจุข้อมูล E-mail:wichai@buu.ac.th

  19. โครงสร้างของ TABLE <TABLE> <TR><TD>ข้อมูล</TD><TD>ข้อมูล</TD></TR> <TR><TD>ข้อมูล</TD><TD>ข้อมูล</TD></TR> <TR><TD>ข้อมูล</TD><TD>ข้อมูล</TD> </TR> </TABLE> E-mail:wichai@buu.ac.th

  20. Tag TABLE tag <TABLE อาจมี attribute ช่วยแสดงรายละเอียด ดังนี้ • ALIGN = center| right ใช้จัดวางตารางกลางจอภาพ หรือชิดขวาของจอภาพ • BORDER = n ใช้กำหนดเส้นกรอบ หน่วยเป็นpixels (ถ้าไม่ใช้ border เฉยๆ จะหมายถึง border=0 ถ้าใช้ border เฉยๆ จะหมายถึง border=1) • ตัวอย่าง <TABLE ALIGN=center BORDER=2> E-mail:wichai@buu.ac.th

  21. Tag TABLE (ต่อ) • WIDTH = 80% ใช้กำหนดความกว้าง 80% ของหน้าจอ หรือกำหนดเป็น pixels • CELLPADDING = 5 ใช้กำหนดระยะห่างระหว่างเซลกับข้อมูลในเซลขนาด 5 pixels • CELLSPACING = 4 ใช้กำหนดระยะห่างระหว่างเซล • BGCOLOR=yellow ใช้กำหนดสีพื้นหลังของทุกเซลในตาราง <TABLE width=50% bgcolor=pink> E-mail:wichai@buu.ac.th

  22. Tag Table Row Tag <TR> … </TR> ใช้กำหนดแถวในตาราง และมีattribute ช่วยแสดงรายละเอียด • ALIGN = Left | Center | Right ใช้กำหนดการวางข้อความในทุกเซลในแต่ละแถวให้ชิดซ้าย กลาง หรือ ชิดขวา • BGCOLOR=#สี ใช้กำหนดสีพื้นหลังของทุกเซลในแถว • <TR ALIGN=center BGCOLOR=pink> E-mail:wichai@buu.ac.th

  23. Table Data • <TD>…</TD> ใช้กำหนดข้อความที่เป็นข้อมูลในเซลattribute ช่วยแสดงผล • ALIGN = Left | Center | Right ใช้กำหนดการวางข้อความของเซลนั้น • VALIGN = Top | Middle | Bottom ใช้กำหนดการวางข้อความในแนวตั้งของเซลนั้น • WIDTH = n กำหนดความกว้างของเซลในแถว หน่วยเป็น pixels E-mail:wichai@buu.ac.th

  24. Table Data (ต่อ) • BGCOLOR=#สี ใช้กำหนดสีพื้นหลังของเซลนั้น • ตัวอย่าง <TD bgcolor=pink WIDTH=30% ALIGN=center> • ROWSPAN = n ใช้กำหนดให้เซลนั้นขยายสูงขึ้นเป็น n แถว • COLSPAN = n ใช้กำหนดให้เซลนั้นขยายกว้างออก เป็น n คอลัมน์ • ตัวอย่าง <TD ROWSPAN=2> <TD COLSPAN=3> E-mail:wichai@buu.ac.th

  25. โครงสร้างของ TABLE <TABLE> <TR><TD>ลำดับที่</TD><TDcolspan=2>ชื่อและนามสกุล</TD</TR> <TR><TD>1</TD><TD>นายทักษะ</TD><TD>นาใหม่</TD></TR> <TR><TD>2</TD><TD>นางสาวนงราม</TD><TD>นาดี</TD></TR> <TR><TD>3</TD><TD>นางจำปูน</TD><TD>นาเมือง</TD></TR> </TABLE> E-mail:wichai@buu.ac.th

  26. สวัสดี E-mail:wichai@buu.ac.th

More Related