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