1 / 54

Web Technology & Basic Web Development

This lesson introduces fundamental concepts in HTML web development, focusing on creating links, tables, and frames. Students will learn to create new webpages, such as "linkpage.html", to test various types of links, including internal, external, and email links. The lesson also covers table creation and style control, guiding students to create a file named "createtable.html" for implementing and styling tables. Practical examples are provided to enhance understanding and application of HTML elements effectively.

paiva
Télécharger la présentation

Web Technology & Basic Web Development

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. Web Technology &Basic Web Development By Wathinee http://wathinee.reru.ac.th

  2. HTML (ต่อ)

  3. เนื้อหาในบทนี้ • Link (การสร้างการเชื่อมโยง) • Table (ตาราง) • Frame

  4. Link • Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) • Link ไป Website อื่น • Link ภายใน Webpage เดียวกัน • Link ไป E-mail และ Link รูปภาพ

  5. คำสั่ง 1. สร้างindex ใหม่โดยจะสร้างเป็น Frame 2. ให้นักศึกษาสร้าง Webpage ใหม่ตั้งชื่อว่า “linkpage.html” 3. Webpage นี้จะใช้ทดสอบการสร้าง Link ต่าง ๆ

  6. ตัวอย่างหน้า linkpage.html

  7. Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) รูปแบบ <a href=“ชื่อเว็บเพจ”> จุดลิงค์ </a>

  8. linkpage.html หลังจากสร้าง Link csict.reru.ac.th csict.reru.ac.th

  9. Link ไปยัง Website อื่น ๆ) รูปแบบ <a href=“URLWebsite อื่น ๆ”> จุดลิงค์ </a>

  10. Link ไปยัง Website อื่น ๆ) csict.reru.ac.th

  11. Link ภายใน Webpage เดียวกัน ขั้นตอน • สร้างปลายทางที่ข้อความในหน้าเพจนั้น ๆ โดยสร้าง <a name=“ชื่อปลายทาง”> </a> เช่น <a name=“test”> </a> 2. สร้าง Link <a href=“#test”> ข้อความที่เป็นจุดลิงค์ </a>

  12. ฝึกสร้าง Link ภายใน Webpage • เราจะไปทดสอบสร้างที่หน้า “homework2.html” • ให้นักศึกษาสร้างจุด Link ดังนี้ Web Hosting Client / Server Web Server

  13. ตัวอย่าง

  14. Link ไป E-mail และ Link รูปภาพ

  15. Link เพื่อ Download ไฟล์ <a href=“ที่อยู่ของข้อมูลไฟล์หรือรูปภาพ หรือเพลง”> รายละเอียดหรือข้อความ </a> ตัวอย่าง <a href="resources/Teach/webtechnology/basichtml.pdf"> บทที่ 2 เอกสารการสร้างเว็บด้วยโปรแกรมภาษา HTML </a>

  16. สีของข้อความที่เป็นจุดลิงค์สีของข้อความที่เป็นจุดลิงค์ • ลิงค์ที่ไม่เคยคลิกมาก่อน (สีน้ำเงิน) • ลิงค์ที่เคยคลิกไปแล้ว (สีม่วง) • ลิงค์ที่ถูกเลือก(กำลังจะเลือก) จะมีสีม่วง

  17. สีของข้อความที่เป็นจุดลิงค์สีของข้อความที่เป็นจุดลิงค์ • ลิงค์ที่ไม่เคยคลิกมาก่อน (link) • ลิงค์ที่เคยคลิกไปแล้ว (vlink) • ลิงค์ที่ถูกเลือก(กำลังจะเลือก) (alink)

  18. ตัวอย่าง csict.reru.ac.th csict.reru.ac.th

  19. สรุป การบ้านสำหรับ Link • สร้างไฟล์ linkpage.html โดยมี Link ไปปลายทางดังนี้ 2. ไฟล์ homework2.html ให้สร้าง Link เพิ่มเติมไปทุกคำศัทพ์ น่ารู้ (สร้าง link ภายในwebpage เดียวกัน) csict.reru.ac.th

  20. การสร้าง Table <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>

  21. คำสั่ง • ให้นักศึกษาสร้างชื่อไฟล์ใหม่ เพื่อทดสอบสร้างตาราง ชื่อ "createtable.html"

  22. วิธีควบคุมลักษณะของตารางวิธีควบคุมลักษณะของตาราง <table border=“1”> … </table>

  23. สร้างเส้นขอบ border

  24. เปลี่ยนสีเส้นขอบตารางbordercoloerเปลี่ยนสีเส้นขอบตารางbordercoloer

  25. กำหนดขนาดของตาราง

  26. ตำแหน่ง ของตารางในหน้าเว็บalign

  27. สีพื้นหลังของตาราง (bgcolor)

  28. พื้นตารางเป็นรูปภาพ background

  29. ตั้งชื่อหัวข้อให้แต่ละคอลัมน์ th

  30. คำสั่งตกแต่งตาราง คำสั่งอื่น ๆ ตั้งค่าระยะห่างระหว่างช่องในตาราง cellspacing=“ขนาด” ตั้งค่าระยะห่างระหว่างขอบกับข้อมูลในตาราง cellpadding=“ขนาด”

  31. การบ้านเพิ่มเติมสำหรับ table • สร้างไฟล์ชื่อ createtable.html มีเนื้อหาในชั่วโมงเรียน 2. และนำข้อมูลจาก Slide ถัดไปไปสร้างเพิ่มเติม พร้อมตกแต่งให้สวยงาม

  32. การบ้านสำหรับเรื่อง create table

  33. เรื่อง Frame <frameset rows=“30,*”> </frameset>

  34. เรื่อง Frame <html> <head> </head> <frameset rows=“30,*”> หมายเหตุ : rows ,cols </frameset> <body> </body> </html>

  35. ตัวอย่าง แบบ 3 frame แนวนอน

  36. ตัวอย่าง แบบ 2 frame แนวนอน

  37. ออกแบบหน้าเว็บ toppage.html linkpage.html mainpage.html

  38. สร้างไฟล์ใหม่ • สร้างไฟล์ชื่อ toppage.htmlเพื่อเก็บข้อมูลเกี่ยวกับ Logo หรือรูปหลักของ website • สร้างไฟล์ชื่อ mainpage.html เขียนรายละเอียดทั่วไป เกี่ยวกับเว็บไซต์

  39. ตัวอย่างไฟล์toppage.html

  40. ตัวอย่างไฟล์ mainpage.html

  41. สร้าง Frame และเรียกใช้ ไฟล์ toppage.html linkpage.html mainpage.html

  42. ข้อมูลสร้าง Frame ที่ไฟล์ index.html

  43. ข้อมูลเพิ่มข้อมูลให้ Frame ที่ไฟล์ index.html

  44. กำหนดคุณสมบัติของ Frame กำหนดขอบของเฟรมให้หายไป <frameset rows="15%,*“frameborder=“no”> </frameset> เปลี่ยนสี frame <frameset rows="15%,*“bordercolor=“black”> </frameset>

  45. กำหนดคุณสมบัติของ Frame ป้องกันไม่ให้ผู้ใช้ปรับขนาดของเฟรมได้ <frameset rows="15%,*“frameborder=“no”> <frame noresize> </frame> </frameset>

  46. ตัวอย่าง

  47. เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame toppage linkpage mainpage

  48. เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame

  49. สั่งให้ Link ไปแสดงข้อมูลที่ Frame ที่ต้องการ <a href=“..” target=“ค่าที่กำหนด”> เนื้อหาจุดเชื่อม </a> _self = แสดงทับส่วนของ page หน้านี้เฉพาะส่วนนี้(frameนี้) _parent = ทับข้อมูลทั้งหมดทุก frame _blank = เปิดหน้า Windows หน้าใหม่เลย _top = แสดงทับข้อมูใหม่ทั้งหน้า ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ

  50. ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ “http://csict.reru.ac.th” csict.reru.ac.th </a>

More Related