540 likes | 653 Views
Web Technology & Basic Web Development. By Wathinee. h ttp://wathinee.reru.ac.th. HTML ( ต่อ ). เนื้อหาในบทนี้. Link (การสร้างการเชื่อมโยง) Table (ตาราง) Frame. Link. Link ไปยัง Webpage อื่น (ที่อยู่ใน Website เดียวกัน) Link ไป Website อื่น
E N D
Web Technology &Basic Web Development By Wathinee http://wathinee.reru.ac.th
เนื้อหาในบทนี้ • Link (การสร้างการเชื่อมโยง) • Table (ตาราง) • Frame
Link • Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) • Link ไป Website อื่น • Link ภายใน Webpage เดียวกัน • Link ไป E-mail และ Link รูปภาพ
คำสั่ง 1. สร้างindex ใหม่โดยจะสร้างเป็น Frame 2. ให้นักศึกษาสร้าง Webpage ใหม่ตั้งชื่อว่า “linkpage.html” 3. Webpage นี้จะใช้ทดสอบการสร้าง Link ต่าง ๆ
Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) รูปแบบ <a href=“ชื่อเว็บเพจ”> จุดลิงค์ </a>
linkpage.html หลังจากสร้าง Link csict.reru.ac.th csict.reru.ac.th
Link ไปยัง Website อื่น ๆ) รูปแบบ <a href=“URLWebsite อื่น ๆ”> จุดลิงค์ </a>
Link ไปยัง Website อื่น ๆ) csict.reru.ac.th
Link ภายใน Webpage เดียวกัน ขั้นตอน • สร้างปลายทางที่ข้อความในหน้าเพจนั้น ๆ โดยสร้าง <a name=“ชื่อปลายทาง”> </a> เช่น <a name=“test”> </a> 2. สร้าง Link <a href=“#test”> ข้อความที่เป็นจุดลิงค์ </a>
ฝึกสร้าง Link ภายใน Webpage • เราจะไปทดสอบสร้างที่หน้า “homework2.html” • ให้นักศึกษาสร้างจุด Link ดังนี้ Web Hosting Client / Server Web Server
Link เพื่อ Download ไฟล์ <a href=“ที่อยู่ของข้อมูลไฟล์หรือรูปภาพ หรือเพลง”> รายละเอียดหรือข้อความ </a> ตัวอย่าง <a href="resources/Teach/webtechnology/basichtml.pdf"> บทที่ 2 เอกสารการสร้างเว็บด้วยโปรแกรมภาษา HTML </a>
สีของข้อความที่เป็นจุดลิงค์สีของข้อความที่เป็นจุดลิงค์ • ลิงค์ที่ไม่เคยคลิกมาก่อน (สีน้ำเงิน) • ลิงค์ที่เคยคลิกไปแล้ว (สีม่วง) • ลิงค์ที่ถูกเลือก(กำลังจะเลือก) จะมีสีม่วง
สีของข้อความที่เป็นจุดลิงค์สีของข้อความที่เป็นจุดลิงค์ • ลิงค์ที่ไม่เคยคลิกมาก่อน (link) • ลิงค์ที่เคยคลิกไปแล้ว (vlink) • ลิงค์ที่ถูกเลือก(กำลังจะเลือก) (alink)
ตัวอย่าง csict.reru.ac.th csict.reru.ac.th
สรุป การบ้านสำหรับ Link • สร้างไฟล์ linkpage.html โดยมี Link ไปปลายทางดังนี้ 2. ไฟล์ homework2.html ให้สร้าง Link เพิ่มเติมไปทุกคำศัทพ์ น่ารู้ (สร้าง link ภายในwebpage เดียวกัน) csict.reru.ac.th
การสร้าง Table <table> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table>
คำสั่ง • ให้นักศึกษาสร้างชื่อไฟล์ใหม่ เพื่อทดสอบสร้างตาราง ชื่อ "createtable.html"
วิธีควบคุมลักษณะของตารางวิธีควบคุมลักษณะของตาราง <table border=“1”> … </table>
เปลี่ยนสีเส้นขอบตารางbordercoloerเปลี่ยนสีเส้นขอบตารางbordercoloer
ตำแหน่ง ของตารางในหน้าเว็บalign
สีพื้นหลังของตาราง (bgcolor)
พื้นตารางเป็นรูปภาพ background
คำสั่งตกแต่งตาราง คำสั่งอื่น ๆ ตั้งค่าระยะห่างระหว่างช่องในตาราง cellspacing=“ขนาด” ตั้งค่าระยะห่างระหว่างขอบกับข้อมูลในตาราง cellpadding=“ขนาด”
การบ้านเพิ่มเติมสำหรับ table • สร้างไฟล์ชื่อ createtable.html มีเนื้อหาในชั่วโมงเรียน 2. และนำข้อมูลจาก Slide ถัดไปไปสร้างเพิ่มเติม พร้อมตกแต่งให้สวยงาม
การบ้านสำหรับเรื่อง create table
เรื่อง Frame <frameset rows=“30,*”> </frameset>
เรื่อง Frame <html> <head> </head> <frameset rows=“30,*”> หมายเหตุ : rows ,cols </frameset> <body> </body> </html>
ตัวอย่าง แบบ 3 frame แนวนอน
ตัวอย่าง แบบ 2 frame แนวนอน
ออกแบบหน้าเว็บ toppage.html linkpage.html mainpage.html
สร้างไฟล์ใหม่ • สร้างไฟล์ชื่อ toppage.htmlเพื่อเก็บข้อมูลเกี่ยวกับ Logo หรือรูปหลักของ website • สร้างไฟล์ชื่อ mainpage.html เขียนรายละเอียดทั่วไป เกี่ยวกับเว็บไซต์
สร้าง Frame และเรียกใช้ ไฟล์ toppage.html linkpage.html mainpage.html
ข้อมูลสร้าง Frame ที่ไฟล์ index.html
ข้อมูลเพิ่มข้อมูลให้ Frame ที่ไฟล์ index.html
กำหนดคุณสมบัติของ Frame กำหนดขอบของเฟรมให้หายไป <frameset rows="15%,*“frameborder=“no”> </frameset> เปลี่ยนสี frame <frameset rows="15%,*“bordercolor=“black”> </frameset>
กำหนดคุณสมบัติของ Frame ป้องกันไม่ให้ผู้ใช้ปรับขนาดของเฟรมได้ <frameset rows="15%,*“frameborder=“no”> <frame noresize> </frame> </frameset>
เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame toppage linkpage mainpage
เชื่อม webpage ระหว่าง frame ด้วยการกำหนดชื่อให้ Frame
สั่งให้ Link ไปแสดงข้อมูลที่ Frame ที่ต้องการ <a href=“..” target=“ค่าที่กำหนด”> เนื้อหาจุดเชื่อม </a> _self = แสดงทับส่วนของ page หน้านี้เฉพาะส่วนนี้(frameนี้) _parent = ทับข้อมูลทั้งหมดทุก frame _blank = เปิดหน้า Windows หน้าใหม่เลย _top = แสดงทับข้อมูใหม่ทั้งหน้า ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ
ชื่อเฟรม = นำข้อมูลไปแสดงที่ พื้นที่ frame นั้น ๆ “http://csict.reru.ac.th” csict.reru.ac.th </a>