My Home Page 2
ศิลปะไม้ไอติม 46: Idea4Thai : ศิลปะคอมพิวเตอร์-2
ตอนที่3
My Home Page 2
ผมไม่ได้ใช้ HTML สร้างเว็บเพจมานานแล้ว
ตั้งแต่หันมาใช้ Dreamwaver ซึ่งก็มีน้องๆ
หลายคนบอกว่าใช้ดรีมน่าจะ workกว่า ทำมั๊ยจึงยังจะมาให้ใช้ html
อยู่ มันก็จริงครับ แต่… สำหรับคนที่เริ่มต้นใหม่ แต่ใจร้อนแล้วส่วนมากจะขี้เกียจอ่านตำรา
อยากเปิดเครื่องปุ๊บ ใช้งานปั๊บ ไม่ต้องอารัมภบท
หรือต้องเรียนรู้การใช้คำสั่งยุ่งยาก มากมาย
อันที่จริงแล้ว
ผมว่าเราควรจะทำความเข้าใจและผ่านประสบการณ์การใช้งาน html มาบ้าง
เพราะเมื่อถึงคราวต้องแก้ไข หรือ edit ในเว็บเพจจะทำได้รวดเร็วกว่า
โดยไม่ต้องใช้โปรแกรมดรีมเวฟเวอร์ ซึ่งผมก็ได้พื้นฐาน html นี่แหละในการปรับปรุง
แก้ไขโฮมเพจในปัจุบัน
มาว่ากันต่อดีกว่า วัยรุ่นใจร้อน ชักช้าอยู่ทำไม …
ทบทวนความจำโครงสร้างพื้นฐานของ
HTML จะประกอบด้วยคำสั่ง
2 ส่วนคือ ส่วนหัว (Head) และส่วนเนื้อหา
(Body) ซึ่งเราทำไว้เมื่อคราวที่แล้วดังนี้
<HTML>
<HEAD>
<TITLE> 1stpage </TITLE>
</HEAD>
<BODY>
<FONT COLOR="RED" FACE="ARIAL" SIZE=" 5">
Jesada Somprasong
<BR>
<FONT COLOR="RED" FACE="ARIAL" SIZE="6 ">
Learn and Play
together
<BR>
<BR>
<IMG SRC="I:\1stpage\1 .gif" WIDTH= 130 HEIGHT= 100>
<IMG SRC="I:\1stpage\2 .gif" WIDTH= 130 HEIGHT= 100>
<IMG SRC="I:\1stpage\3 .gif" WIDTH= 130 HEIGHT= 100>
</BODY>
</HTML>
การเพิ่มเติมในส่วนเนื้อหา
ตอนนี้เราจะมาตบแต่งเพิ่มเติม
เช่น ทำพื้นหลัง ทำเส้นคั่นระหว่างบันทัด และจัดตำแหน่งข้อความใหม่ รวมทั้งทำ Link ไปยังหน้าที่แสดงข้อความประกอบภาพ
เพื่อให้เป็นหน้าแรกของโฮมเพจ
การทำ background และจัดข้อความไว้กึ่งกลาง
·
Save รูปภาพที่จะใช้เป็นพื้นหลัง
และ จุดสีแดง ไว้ในโฟลเดอร์ 1stpage
·
เปิดไฟล์ 1stpage.txt
·
ใต้ tag <BODY> เราจะเพิ่มบรรทัดใหม่คือ
<BODY>
<BR>
<BODY BACKGROUND="I:\1stpage\bg1.gif">
<P
ALIGN="center"><FONT
COLOR="RED" FACE="ARIAL" SIZE="5">
Jesada Somprasong
ทำเส้นคั่นระหว่างบรรทัด
- เพิ่มเส้นคั่นระหว่างข้อความ
<IMG SRC=" I:\1stpage\reddot.gif" WIDTH=500 HEIGHT=2>
<BR>
<FONT COLOR="RED" FACE="ARIAL" SIZE="6">
Learn and Play together
- ขีดเส้นใต้ด้านล่างรูปภาพ
<IMG SRC="I:\1stPage\3.jpg" WIDTH=130 HEIGHT=100>
<BR>
<IMG SRC="I:\1stpage\reddot.gif" WIDTH=500 HEIGHT=2>
</BODY>
</HTML>
·
Save เป็นชื่อเดิมคือ
1stpage.txt และ save as เป็น 1stpage.html
·
ดับเบิ้ลคลิกที่ไฟล์ 1stpage.html ก็จะแสดงผลบนอินเตอร์เน็ต เบราเซอร์
ดังรูป
·
ต่อไปเราจะสร้าง web
page ใหม่บรรจุข้อความและภาพประกอบเพื่อ Link กับรูปภาพทั้ง3
·
กำหนดให้หน้าแรกชื่อ Introduce เพื่อแนะนำตัวเอง
·
หน้าต่อมาชื่อ Together คือเรียนและเล่นด้วยกัน
·
หน้าสุดท้ายชื่อ Friend เป็นเพื่อนแก้เหงา
ก็ง่ายๆ ครับ ผมทำตัวอย่างไว้แล้ว… คลิกไปที่
Notepad เรียกไฟล์ 1stpage.txt ขึ้นมาแก้ไขให้เป็น
web page ที่2 ชื่อ Introduce เพื่อแนะนำตัวเอง
<HTML>
<HEAD>
<TITLE>Introduce</TITLE>
</HEAD>
<BODY BACKGROUND="I:\1stpage\bg1.gif">
<P
ALIGN="left">
<FONT COLOR="Blue" FACE="Arial" SIZE="6">
รู้จักกันก่อน
<BR>
<BR>
<FONT COLOR="Bule" FACE="Arial" SIZE="4">
<BR>
ชื่อ : เจษฎา สมประสงค์
<BR>
ชื่อเล่น : เจษ
<BR>
โรงเรียน :
ฤทธิยะวรรณาลัย กทม.
<BR>
ชั้น : มัธยมศึกษาปีที่ 1/9
<BR>
งานอดิเรก :
อ่านหนังสือ ดูทีวี เล่นคอมพิวเตอร์
<BR>
E-mail :
jes2210@yahoo.com
<BR>
<BR>
<IMG SRC="I:\1stpage\1.gif" WIDTH=260 HEIGHT=202>
</BODY>
</HTML>
·
Save เป็นชื่อใหม่คือ introduce.txt และ save as เป็น introduce.html
· ดับเบิ้ลคลิกที่ไฟล์ introduce.html ก็จะแสดงผลบนอินเตอร์เน็ต เบราเซอร์ ดังรูป
note: ตำแหน่งของข้อความ <left> ชิดซ้าย <center> กึ่งกลาง <right> ชิดขวา ขนาดของตัวอักษร เลขยิ่งมาก ตัวยิ่งใหญ่ เช่นเดียวกับ ขนาดของเส้น ส่วนแบบตัวอักษร และสีตัวอักษร ให้น้องๆ ทดลองเปลี่ยนดู ไม่มีอะไร… ธรรมดาๆ
ที่เหลืออยากให้น้องๆ ได้ทดลองทำต่อเป็นการบ้าน
แล้วคราวหน้าจะมาทำลิ้งค์กับรูปภาพตามที่กำหนดไว้ข้างต้น ...
แล้วพบกันใหม่คราวหน้าครับ… ’ see u
ความคิดเห็น
แสดงความคิดเห็น