ศิลปะคอมพิวเตอร์
หนังสือเล่มเล็ก
ศิลปะชวนชม


My Home Page 3

เป็นอย่างไงบ้างครับ ทดลองทำการบ้านกันหรือเปล่า... คราวนี้เราจะมาทำ Home Page กันโดยเปลี่ยนไฟล์ 1stpage ที่ทำไว้ให้สามารถ Link กับ web page อื่นๆ แล้วเปลี่ยนชื่อจาก 1stpage เป็น index ซึ่งจะเป็นหน้าแรกของโฮมเพจของเรา

คราวที่แล้วเราได้สร้าง web page ใหมชื่อ Introduce เพื่อแนะนำตัวเอง ตอนนี้เราจะทำที่เหลือคือ pageที่3 ชื่อ Together และ pageที่4 ชื่อ Friend โดยเราจะเปลี่ยนให้ ข้อความและรูปภาพมาไว้ตรงกลาง แล้วเปลี่ยนสีและลดขนาดอักษรของข้อความให้เล็กลงด้วย

<HTML>
<HEAD>
<TITLE>Together</TITLE>
</HEAD>
<BODY BACKGROUND="I:\1stpage\bg1.gif">
<P ALIGN="center">
<BR>
<FONT COLOR="Green" FACE="Arail" SIZE="6">
สนุกกับการเรียนรู้
<BR>
<BR>
<FONT COLOR="Purple" FACE="Arail" SIZE="4">
ได้เรียนรู้คู่กันกับการเล่น
<BR>
ได้เห็นได้ทำตามเงื่อนไข
<BR>
ได้ทดลองได้คิดได้เข้าใจ
<BR>
ได้ก้าวไกล รู้ทัน นำปัญญา
<BR>
<BR>
<IMG SRC="I:\1stpage\2.gif" WIDTH=260 HEIGHT=202>
</BODY>
</HTML>

  • Save เป็นชื่อใหม่คือ together .txt และ save as เป็น together.html
  • ดับเบิ้ลคลิกที่ไฟล์ together.html ก็จะแสดงผลบนอินเตอร์เน็ต เบราเซอร์ ดังรูป

ส่วนpage4 ชื่อ Friend ก็แค่เปลี่ยนข้อความและรูปภาพให้ไปอยู่้ด้านขวา และเปลี่ยนสีอักษรของข้อความเป็นสีอื่น เพื่อเป็นการทดสอบความเข้าใจ ก็จะได้ผลรับดังรูป

ตอนนี้เราจะทำ Home Page กัน โดยเรียกไฟล์ 1stpage.txt มาแก้ไข เพื่อให้สามารถ Link กับ web page อื่นๆ ที่ทำไว้แล้ว และเปลี่ยนชื่อใหม่เป็น index.txt ดังนี้

<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<BODY>
<BR>
<BODY BACKGROUND="I:\1stpage\bg1.gif">
<P ALIGN="center"><FONT COLOR="Red" FACE="Arail" SIZE="5">
Jesada Somprasong
<BR>
<IMG SRC="I:\1stpage\reddot.gif" WIDTH=500 HEIGHT=2>
<BR>
<FONT COLOR="Red" FACE="Arail" SIZE="6">
Learn and Play together
<BR>
<BR>
<IMG SRC="I:\1stPage\1.jpg" WIDTH=130 HEIGHT=100>
<IMG SRC="I:\1stPage\2.jpg" WIDTH=130 HEIGHT=100>
<IMG SRC="I:\1stPage\3.jpg" WIDTH=130 HEIGHT=100>
<BR>
<IMG SRC="I:\1stpage\reddot.gif" WIDTH=500 HEIGHT=2>
<BR>
<FONT COLOR="Red" FACE="Arail" SIZE="3">
<A HREF="I:\introduce.htm">รู้จักกันก่อน</A>
<BR>
<A HREF="I:\together.htm">สนุกกับการเรียนรู้</A>
<BR>
<A HREF="I:\friend.htm".htm">เพื่อน</A>
<BR>
<IMG SRC="I:\1stpage\reddot.gif" WIDTH=500 HEIGHT=2>
<FONT COLOR="Red" FACE="Arial" SIZE="2">
<BR>
ไปยัง <A HREF="http://oocities.com/idea4thai/">idea4thai</A>
</BODY>
</HTML>

  • Save as เป็นชื่อใหม่คือ index.txt และ save as อีกครั้งเป็น index.html
  • ดับเบิ้ลคลิกที่ไฟล์ index.html ก็จะแสดงผลบนอินเตอร์เน็ต เบราเซอร์ ดังรูป

เป็นยังไงครับ แหล่มมั๊ย... สรุปเป็นว่า Home page ที่สร้างขึ้นจะต้องมีไฟล์ index เป็นหน้าแรก และจะต้องทำ Link เพื่อให้เชื่อมต่อกับหน้าอื่นๆ คำสั่ง Linkคือ <A HREF=" "></A> ในตัวอย่างเราให้คลิกที่หัวข้อเพื่อเชื่อมโยงไปยังไฟล์ที่ทำไว้ เช่น <A HREF="I:\ introduce.htm">รู้จักกันก่อน</A> ส่วนบรรทัดสุดท้าย ผมอยากรู้ว่า Home page ที่ทำไว้สามารถ Link กับเว็บไซต์ของคุณพ่อได้หรือเปล่า ... ตอนทดลองเครื่องที่บ้านต่อกับอินเตอร์เน็ตอยู่แล้ว เมื่อคลิกที่ idea4thai ก็จะลิ้งค์ไปที่เว็บไซต์ oocities.com/idea4thai ทันที... ก็เป็นอันว่าเรีบบร้อย

ขั้นต่อไปก็คงเป็นการ Upload ขึ้นอินเตอร์เน็ต ซึ่งต้องไปสมัครขอ e-mail address จาก Yahoo.com แล้วจึงเข้าไปขอใช้บริการ Geocities เพื่ออัพโหลดไฟล์ต่างๆ ที่เราทำไปเก็บไว้ใน Host ของเขา ซึ่งเขาใจดีให้บริการฟรีทั้งหมด เราก็จะได้ Web Site ของตัวเองไว้ฝึกวิทยายุทธยามว่าง นอกเหนือจากก้มหน้าก้มตาเล่น" ฮิห้า " หรือ hi5 ... จีบสาวข้างห้องยังไงล่ะ ... ฮิ ฮิ ฮิ ฮิ ฮิ ... ฝันดีนะจ๊ะ จุ๊บ จุ๊บ

< ย้อนกลับ >

 

 
Geocities.com / Idea4thai 2005