Web Technology & Basic Web Development By Wathinee http://wathinee.reru.ac.th
HTML (ต่อ)
Link (การสร้างการเชื่อมโยง) Table (ตาราง) Frame เนื้อหาในบทนี้ Link (การสร้างการเชื่อมโยง) Table (ตาราง) Frame
Link Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) Link ไป Website อื่น Link ภายใน Webpage เดียวกัน Link ไป E-mail และ Link รูปภาพ
คำสั่ง 1. เปลี่ยนชื่อ “index.html” เป็นชื่อ “aboutus.html” สร้างหน้า index ใหม่โดยสร้างเป็น Frame 2. ให้นักศึกษาสร้าง Webpage ใหม่ตั้งชื่อว่า “linkpage.html” 3. Webpage นี้จะใช้ทดสอบการสร้าง Link ต่าง ๆ
ตัวอย่างหน้า linkpage.html
Link ไปยัง Webpage อื่น (ที่อยู่ใน Websiteเดียวกัน) รูปแบบ <a href=“ชื่อเว็บเพจ”> จุดลิงค์ </a>
linkpage.html หลังจากสร้าง Link
Link ไปยัง Website อื่น ๆ) รูปแบบ <a href=“URL Website อื่น ๆ”> จุดลิงค์ </a>
Link ไปยัง Website อื่น ๆ)
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 ไป E-mail และ Link รูปภาพ
สีของข้อความที่เป็นจุดลิงค์ ลิงค์ที่ไม่เคยคลิกมาก่อน (สีน้ำเงิน) ลิงค์ที่เคยคลิกไปแล้ว (สีม่วง) ลิงค์ที่ถูกเลือก(กำลังจะเลือก) จะมีสีม่วง
สีของข้อความที่เป็นจุดลิงค์ ลิงค์ที่ไม่เคยคลิกมาก่อน (link) ลิงค์ที่เคยคลิกไปแล้ว (vlink) ลิงค์ที่ถูกเลือก(กำลังจะเลือก) (alink)
ตัวอย่าง
สรุป การบ้านสำหรับ Link สร้างไฟล์ linkpage.html โดยมี Link ไปปลายทางดังนี้ 2. ไฟล์ homework2.html ให้สร้าง Link เพิ่มเติมไปทุกคำศัทพ์ น่ารู้ (สร้าง link ภายในwebpage เดียวกัน)
การสร้าง Table <table> <tr> <td> </td> <td> </td> </tr> </table>
คำสั่ง ให้นักศึกษาสร้างชื่อไฟล์ใหม่ เพื่อทดสอบสร้างตาราง ชื่อ "createtable.html"
วิธีควบคุมลักษณะของตาราง <table border=“1”> … </table>
สร้างเส้นขอบ border
เปลี่ยนสีเส้นขอบตาราง bordercoloer
กำหนดขนาดของตาราง
ตำแหน่ง ของตารางในหน้าเว็บ align
สีพื้นหลังของตาราง (bgcolor)
พื้นตารางเป็นรูปภาพ background
ตั้งชื่อหัวข้อให้แต่ละคอลัมน์ th
คำสั่งตกแต่งตาราง คำสั่งอื่น ๆ ตั้งค่าระยะห่างระหว่างช่องในตาราง cellspacing=“ขนาด” ตั้งค่าระยะห่างระหว่างขอบกับข้อมูลในตาราง cellpadding=“ขนาด”
การบ้านเพิ่มเติมสำหรับ table สร้างไฟล์ชื่อ createtable.html มีเนื้อหาในชั่วโมงเรียน 2. และนำข้อมูลจาก Slide ถัดไปไปสร้างเพิ่มเติม พร้อมตกแต่งให้สวยงาม
การบ้านสำหรับเรื่อง create table จำนวนนักเรียน ปี 2553 ปี 2554 ปี 2555 IT ชั้นปีที่ 1 15 20 com ชั้นปีที่ 1 30 40 IT ชั้นปีที่ 2 com ชั้นปีที่ 2 IT ชั้นปีที่ 3 com ชั้นปีที่ 3 IT ชั้นปีที่ 4 com ชั้นปีที่ 4 รวม (เฉลี่ย) Xxxx คน
<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 เขียนรายละเอียดทั่วไป เกี่ยวกับเว็บไซต์
ตัวอย่างไฟล์ toppage.html
ตัวอย่างไฟล์ 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”>
กำหนดคุณสมบัติของ 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 นั้น ๆ
แสดงผลที่ frame ชื่อ mainpage
สรุป การบ้านจากเรื่อง frame ไฟล์ index.html ประกอบด้วยการสร้าง Frame และเรียกใช้ข้อมูลแสดงใน frame ออกแบบตามที่นักศึกษาชอบ 2. linkpage.html เพิ่มข้อมูลที่ Link ให้แสดงข้อมูลให้เหมาะสม(target)
แผนผังเว็บไซต์ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง ข้อมูล logo Link ข้อมูล ต้อนรับ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง
แผนผังเว็บไซต์ ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง toppage.html index.html toppage.html linkpage.html mainpage.html aboutus.html homework2.html createtable.html ข้อมูลส่วนตัว คำศัพท์น่ารู้ การสร้างตาราง