เริ่มต้นเขียนโฮมเพจด้วยHTMLเบื้องต้น

อ้ะๆ อย่าเพิ่งคิดว่าภาษา html ยากนะครับ ตอนแรกผมก็คิดแบบนี้ แต่ความจริงไม่ยากเลยครับ

แค่เราจำคำสั่งพื้นฐานของมันได้ เราก็สร้างโฮมเพจได้แล้วครับ ทำตามขั้นตอนดังนี้นะครับ

เปิดโปรแกรม notepad เริ่มพิมพ์โครงสร้างหลักดังนี้ (พิมพ์ตัวใหญ่หรือตัวเล็กก็ได้ครับ)

<html>

<head><title> </title></head>

<body>

</body>

</html>

 

พิมพ์เท่านี้ก่อนครับ จากนั้นกด save ที่menu file ให้เลือก save ไว้ที่ my document

นี่ก็คือโครงสร้างหลักของเอกสาร HTMLครับ ที่เห็นเป็นปีกกาก็คือตัวคำสั่งครับ

หมายเหตุ ที่ว่างๆ คือเว้นไว้ให้เดี๋ยวค่อยเติมอะไรก็ได้ครับ

*ลองดูตัวอย่างก่อนครับ

***ตัวอย่าง****

สมมุติเรามีภาพและเงื่อนไขดังนี้นะครับ(ภาพจะต้องอยู่ที่เดียวกับที่เรา save notepad เอาไว้ในที่นี้คือ my document)

1.ภาพท้องฟ้าชื่อ sky.jpg

2.ภาพแมวชื่อ cat.gif

3.เราต้องการตั้งชื่อบนแถบสีน้ำเงินที่มีคำว่า microsoft internet explorerหรือNetscapeด้านบนนั่นก็คือ Title bar ว่า แมวตัวน้อย

4.ต้องการให้ภาพท้องฟ้าเป็นพื้นหลัง

5.มีภาพแมวอยู่ตรงกลาง

6.ภาพแมวเชื่องโยงไปยังpantip.com

7.ด้านล่างภาพแมวมีตัวอักษรคำว่าแมวของฉัน สีแดง ขนาดตัวอักษร 5 ตัวหนาเอียงและขีดเส้นใต้

ก็ให้ไปที่ my document เปิด notepad ตัวที่เรา save ไว้ก่อนหน้านี้ แล้วพิมพ์เพิ่มให้เป็นดังนี้ครับ

<html>

<head><title>แมวตัวน้อย</title></head>

<body>

<body background="sky.jpg">

<p align="center"><a href="http://www.pantip.com"><img src=cat.gif"></a>

<br><font size=5><font color=red><b><i><u>แมวของฉัน</u><i></b></font></p>
</body>

</html>

****หมายเหตุ**** ภาพหรือข้อมูลที่เชื่อมโยงต้องอยุ่ในแฟ้มเดียวกับที่เราทำโฮมเพจนะครับ เราสามารถดูว่านามสกุลภาพของเราเป็น bmp หรือ jpg หรือ gif ได้โดย คลิกขวาที่ภาพเลือก propertiesครับ

แล้วเลือกเมนู file เลือก save asตั้งชื่อเป็น myhomepage.html ครับ

เราก็จะได้เอกสารมาเป็น html ลอง double click ดู

เพื่อให้แสดงผลในเวป browser ( Internet Explorer or Netscape )

เราก็จะได้เห็นโฮมเพจตามเงื่อนไขครับ

ทีนี้ผมจะขออธิบายภาษาHTMLสักนิดนะครับ

มีลักษณะเป็น

1. <xxx>...........</xxx>คือพิมพ์ตัวเปิดแล้วต้องพิมพ์ตัวปิด

2.<xxx>.............คือเปิดอย่างเดียวไม่ต้องพิมพ์ปิด

เช่นพวกคำสั่ง<br>คือเปลี่ยนบรรทัด และคำสั่ง <img src="ชื่อภาพ.นามสกุล">คือใส่ภาพในโฮมเพจ

และคำสั่ง <body background=”ชื่อภาพ.นามสกุล”>คือใส่ภาพพื้นหลัง

แต่คำสั่งส่วนใหญ่จะเป็นแบบแรกครับ

อธิบายบางคำสั่งที่ใช้ในส่วนเนื้อหา

<br>

<body background="ชื่อภาพ.นามสกุล">

<body bgcolor="สีหรือรหัสสี">

<p align="left or center or right">ข้อความ</p>

ใช้เปลี่ยนบรรทัดขึ้นบรรทัดใหม่

ใส่ภาพพื้นหลัง

่ ใส่สีพื้นหลัง

จัดตำแหน่งภาพหรือข้อความ ถ้าไม่ใส่คำสั่ง ข้อความหรือภาพจะอยู่ทางซ้าย

<font size=number>ขนาดตัวอักษร </font>

<b>ทำให้ตัวอักษรเข้มขึ้น</b>

<u>ขีดเส้นใต้ตัวอักษร</u>

<i>ทำให้ตัวอักษรเอียง</i>

<font color=สีหรือรหัสสี>สีตัวอักษร</font>

<img src="ชื่อภาพ.นามสกุล">ใส่ภาพในโฮมเพจเราสามารถกำหนดกว้าง สูงเท่าไหร่ได้ครับ

<a href="URL or File Location">เชื่อมโยงไปยังเวปหรือ file ต่างๆ

****หมายเหตุ**** ภาพหรือข้อมูลที่เชื่อมโยงต้องอยุ่ในแฟ้มเดียวกับที่เราทำโฮมเพจนะครับ เราสามารถดูว่านามสกุลภาพของเราเป็น bmp หรือ jpg หรือ gif ได้โดย คลิกขวาที่ภาพเลือก propertiesครับ *ลองดูตัวอย่างแล้วจะเข้าใจมากขึ้นครับ

มีปัญหาอะไรก็ post กระทู้ใน Webbboard ถามได้ครับ

 

FROM CT Web Master m_chatree@yahoo.com