มาเขียนเว็บกับภาษา html [0]
posted on 04 Apr 2006 20:02 by rije in HTMLวันนี้ขออัพ 2 entry ก่อนจะไม่มีเวลาอัพเดท (เหอๆ)
หลังจากเคยว่าไว้ใน entry อันไหนเนี่ยแหละว่าจะเขียน
entry ซึ่งเกี่ยวกับการทำเว็บด้วย HTML ในที่สุด
ก็มีโอกาศได้ทำซะที หวังว่าใครที่สนใจด้านนี้
จะเข้าใจกับเนื้อหาที่เรานำมาสอนกันนะจ้ะ~ ^^
.............................................................................
เริ่มแรกขอพูดถึง html กันสักนิด สำหรับคนที่ทำเว็บอยู่
ก็คงจะรู้เกี่ยวกับมัน html ย่อมาจาก Hyper Text Makeup Language
ซึ่งเป็นภาษาคอมภาษาหนึ่ง เรียกว่า html เป็นเหมือนเอกสารก็ว่าได้
โครงสร้างของ html ที่ควรรู้(จริงๆ นะจะบอให้)
1. Head - ส่วนหัว ใช้กำกับข้อมูลเฉพาะในหน้าเพจนั้นๆ
2. Body - ใส่โค้ดที่จะแสดงในหน้าเพจนั้นว่ามีรูปร่างเช่นไร
ในการเซฟไฟล์ html นั้นทำการเซฟได้ 2 แบบคือ
1. แบบ .html
2. แบบ .htm (ไม่แนะนำในการเซฟส่วนนี้ เพราะบางโปรแกรม
ที่ใช่ดูเว็บไม่สามารถเปิดดูได้)
ตัวอย่างการเซฟ
- index.html
- index.htm
....................................................................
ต่อไปเข้าสู่บทเรียนแรกกันเลยนะครับ
เริ่มจากมาดูโค้ดที่ควรจำกันก่อน เพราะจำเป็นในการเขียน
******************
<html>
<head><tiltle> ส่วนนี้ใส่หัวข้อเว็บคุณเอาไว้ </title></head>
<body>
ส่วนนี้ระหว่าง body เราจะใส่โค้ดหรือข้อความที่ต้องการ
ซึ่งเมื่อเซฟแล้วคุณจะเห็นข้อความส่วนนี้บนหน้าเพจ
ที่คุณได้เขียนไว้นั่นเอง ^__^
</body>
</html>
.......................................................................
ต่อไปเรามาดูโค้ดที่จะใส่ไว้ระหว่าง body กันสักเล็กน้อย
<br> เป็นการขึ้นบรรทัดใหม่
<p> เป็นการขึ้นบรรทัดใหม่เช่นกัน แต่ตัวนี้จะมีระยะที่มากกว่าตัวบน
<hr> เป็นเหมือนการขีดเส้นจบก็ว่าได้
<b>ใส่ข้อความ</b> การทำตัวอักษรหนา
<u>ใส่ข้อความ</u> เป็นการขีดเส้นใต้ตัวอักษร
<i>ใส่ข้อความ</i> ทำตัวเอียง
<font color="ชื่อหรือรหัสสี">ใส่ข้อความ</font> เปลี่ยนสีตัวอักษร
<a href="ใส่ url ที่คุณต้องการให้ลิงค์ไป">ใส่ข้อความส่วนนี้</a> นี่เป็นการใส่ลิงค์
<img src="ใส่ url รูปภาพที่คุณต้องการ"> จะโชว์รูปที่คุณใส่ไป
*** ในส่วนนี้ ภาพต้องอยู่บน host ใน internet เท่านั้นนะครับ
....................................................................
ตัวอย่างครับ
<html>
<head><tiltle>เว็บของผม</title></head>
<body>
จะเห็นข้อความส่วนนี้ครับ
<br>
<a href=http://www.google.com>ไปเว็บ Google ครับ<a>
<br>
<font color="blue">ตัวอักษรเปลี่ยนเป็นสีฟ้า</font>
<p>
ขึ้นมาบรรทัดใหม่
<hr>
<b>ใส่ตัวหนา</b>
<br>
<i>ใส่ตัวเอียง</i>
<br>
<u>ขีดเส้นใต้</u>
<br>
<img src="http://rije.exteen.com/images/logo_me.gif">
</body>
</html>
------------------------------------------------------
ลองเอาโค้ดนี้ไปเขียนบน notepad ดูได้ครับ
แล้วลองเซฟเป็นไฟล์ .html แล้วลองเปิดดูนะครับ ^_^
การเขียนโค้ดเราสามารถเขียนติดๆ กันได้ ไม่ต้องเว้นวรรคก็ได้ครับ
สุดท้ายขอเสริมเล็กน้อยกับสีพื้นหลังครับ
bgcolor=#818181 ตัวนี้เป็นรหัสสีครับ หรือจะใส่เป็น "gray" ก็ได้ครับ
background="url ภาพพื้นหลัง" พื้นหลังใส่รูปได้ครับ ^_^
นำส่วนนี้ไปใส่ไว้อย่างนี้นะครับ
<body bgcolor=#818181 background="url ภาพพื้นหลัง">
ไว้คราวหน้าจะมาสอนเพิ่มครับ bye~ ^o^/