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
ทำเส้นคั่นระหว่างบรรทัด
- 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
< ย้อนกลับ หน้าต่อไป >
