3.เสริมเว็บให้ดูสวย

กิจกรรม.ตอนที่ 1 แตงเติมสีสันใหกับเว็บเพจ

ใหแตละคนสรางเว็บเพจใหไดดังภาพตัวอยาง index.html โดยมีขอกําหนดดังนี้

1. ให title ของเว็บเพจชื่อ อินเทอรเน็ต

2. สีพื้น=“#ffffcc”

3. สีตัวอักษร=“#003399”

4. ขนาดของหัวเรื่อง “อินเทอรเน็ต” เทากับ h1 สีตัวอักษร=“#000000” จัดใหอยูกึ่งกลาง

5. ขนาดของหัวเรื่อง “อินเทอรเน็ตคืออะไร” และ “บราวเซอร” เทากับ h3

6. สวนเนื้อหา จัดชิดซาย

7. เสนกั้นขนาดเทากับ 2 กวาง 80% จัดใหอยูกึ่งกลาง จากนั้นบันทึกแฟมขอมูลชื่อ index.html และตรวจสอบผลลัพธที่ปรากฏในบราวเซอร

หมายเหตุ <hr width="100%">(ความยาวเป็นเปอร์เซ็น)

ตัวอย่าง การแปลงโค้ด

<html>

<head>

<title> อินเทอร์เน็ต </title></head>

</head>

<body>

<body text= "003399"> <center> <h1> <p> <b>อินเทอร์เน็ต</ p> </center> </body>

<font color ="000000"> <h3> <p> <b>อินเทอร์คืออะไร</p> </h3> </b>

<p>อินเทอร์เน็ต คือเครือข่ายคอมพิวเตอร์ที่เชื่อมต่อกันเป็นจำนวนมากครอบคลุมไปทั่วโลก โดยอาศัยโครงสร้างและระบบการสื่อสาร

<br>โทรคมนาคมเป็นตัวกลางในการแลกเปลี่ยน ข้อมูล มีการประยุกต์ใช้งานหลายรูปแบบ อินเทอร์เน็ตเป็นทั้งเครื่อข่าย

<br>คอมพิวเตอร์และเครือข่ายของเครือข่าย เพราะอินเทอร์เน็ตประกอบด้วยเครือข่ายย่อยเป็นจำนวนมากต่อเข้าด้วยกัน

<br>ภายใต้ มาตรฐานเดียวกันจนเป็นเครือข่ายขนาดใหญ่

<br>

<font color="000000"><h3><p><b>บราวเซอร์</p></h3></b>

<p>บราวเซอร์ เป็นโปรแกรมที่ใช้เปิดเว็บเพจ โปรแกรมบราวเซอร์ทำงานโดยใช้โฟรโทคอลพิเศษที่ เรียกว่า เอชทีทีพี (Hypertext

<br>transport protocol:HTTP) ในการติดต่อขอข้อมูลจากตัวบริการเว็บ(web server) และแสดงข้อมูลตามรูปแบบรหัสของ

<br>ภาษา เอชทีเอ็มแอล (Hyper Text Markup Language:HTML)</Font>

</p></b></h5></center>

</body>

</html>

กิจกรรม.ตอนที่ 2 แตงเติมสีสันใหกับเว็บเพจ

ใหแตละคนสรางเว็บเพจจํานวน 2 หนา ใหไดดังภาพตัวอยาง page2.html และ page3.htmlโดยมีขอ

กําหนดดังนี้

1. กําหนดให title ของเว็บเพจชื่อ อินเทอรเน็ต

2. สีพื้น=“#ffffcc”

3. สีตัวอักษร=“#000000”

4. ขนาดของหัวเรื่อง “การประยุกตใชงานอินเทอรเน็ต” และ “อินเทอรเน็ตกับการเรียนรู” เทากับ h1 จัดใหอยูกึ่งกลาง

5. สวนเนื้อหา จัดชิดซาย

6. เสนกั้นเปนรูปภาพชื่อ hr2.gif จัดใหอยูกึ่งกลาง

7. หนา page3.html แทรกรูปภาพ tan2.gif (รูปดาวเทียม) กําหนดใหมีความกวาง = 120 สูง = 80 และจัดใหชิดซาย

8. จากนั้นบันทึกแฟมขอมูลชื่อ page2.html และ page3.html ไวในแผนบันทึก และตรวจสอบผลลัพธที่

ปรากฏในบราวเซอร

หน้าที่ 1

page 1

<html>

<head>

<title> อินเทอร์เน็ต </title></head>

<body>

<body bgcolor="ffffcc">

<font color= "000000"><center><h1><p><b>การประยุกต์ใช้งานอินเทอร์เน็ต</ p></center></body></font>

<p></h3></b>เมื่อเครือข่ายอินเทอร์เน็ตเชื่อมโยงเครือข่ายทั่วโลกให้สามารถติดต่อถึงกันได้หมดจนกลายเป็นเครือข่ายของโลก ดังนั้นจึงมีผู้ใช้งาน

<br>บนเครือข่ายนี้จำนวนมาก การใช้งานเหล่านี้เป็นสิ่งที่กำลังได้รับการกล่าวถึงกันทั่วไป เพราะการเชื่อมโยงเครือข่ายอินเทอร์เน็ตทำให้

<br>โลกไร้พรมแดน ข้อมูลข่าวสารต่างๆสามารถสื่อสารถึงกันได้อย่างรวดเร็ว ตัวอย่างการใช้งานบนอินเทอร์เน็ตที่จะกล่าวต่อไปนี้เป็น

<br>เพียงตัวอย่างที่แพร่หลายและใช้กันมามากเท่านั้น ยังมีการประยุกต์งานอื่นที่ได้รับการพัฒนาขึ้นมาใหม่ตลอดเวลา

<br>

<ol>

<li> ไปรษณีย์อิเล็กทรอนิกส์ (Electronic Mail. E-mail)

<li> การโอนย้ายแฟ้มข้อมูลระหว่างกัน (File Trosfer Protocol: FTP)

<li> การใช้เครื่องคอมพิวเตอร์ในที่ห่างไกล (telnet)

<li> การเรียกค้นข้อมูลข่าวสาร (search enlnet)

<li> การอ่านจากกลุ่มข่าว (usenet)

<li> การสนทนาบนเครือข่าย (chat)

<li> การบริการสถานีวิทยุโทรทัศน์บนเครือข่าย

<li> การบริการบนอินเทอร์เน็ต

</ol>

<center><img src="m2.gif""width="150"height="200"></center>

</body>

</html>

หน้าที่ 2

page2

<html>

<head>

<title> อินเทอร์เน็ต </title></head>

<body>

<body bgcolor="ffffcc">

<body text= "000000"><center><h1><p><b>อินเทอร์เน็ตกับการเรียนรู้</ p></center></body>

<font color="000000"><h3><p><b>หากเปรียบอินเทอร์เน็ตเป็นห้องสมุดแล้ว ก็คงเป็นห้องสมุดขนาดใหญ่ที่มีข้อมูลอยู่อย่างหลากหลายและมี

<br>โปรแกรมค้นหาทำหน้าที่เป็นเหมือนกับเป็นดัชนีช่วยในการค้นหา ข้อมูลการศึกษาในประเทศไทยนั้นมี

<br>หลายหน่วยงานได้ทำโครงการสร้างแหล่งข้อมูลความรู้เพื่อใช้ประโยชน์ร่วมกัน เว็บไซต์ที่น่าสนใจได้แก่</font>

<br>

<ol>1.เว็บไซต์ทางการศึกษา<UL>

<li type=circle>http://www.panason.net

<li type=circle>http://www.school.net.th

<li type=circle>http://www.ku.ac.th</UL></ol>

<ol>2. เว็บไซต์สำหรับสืบค้นข้อมูล<UL>

<li type=circle>http://www.siernguru.com

<li type=circle>http://www.thaiseek.com

<li type=circle>http://www.google.com</UL></ol>

<ol>3. ข่าวน่าสนใจ24ชั่วโมง<UL>

<li type=circle>http://www.cnn.com

<li type=circle>http://www.rncot.net</UL></ol>

<center><img src="m2.gif""width="150"height="200"></center>

</body>

</html>

โหลดภาพเคลื่อนไหว

Report abuse

3.เสริมเว็บให้ดูสวย

นายสุทธิพงศ์ สำนักนิตย์ โรงเรียนพนาสนวิทยา จ.สุรินทร์