25/01/2008
วันที่ 2 แต๊น แตน แต๊นน หายไปวันหนึ่ง -*- พอดีไปหาวิธีการเขียนโค้ดลงเวปครับ แบบว่าพอเขียนใส่ TAG ล้วพอแสดงหน้าเว็บแล้วมันไม่ขึ้น อิอิ วันนี้มารู้จักโครงสร้าง ส่วนประกอบของเว็บ และ tag สำหรับเขียนเว็บกัน คิคิ
โครงสร้างภาษา HTML
เว็บแต่ละหน้านั้น จะมี <TAG> หลักๆอยู่3อันคือ
ส่วนขอบเขต <html>
ส่วนหัว <head>
ส่วนเนื้อหา<body>
โดยรูปแบบจะออกมาเป็นดังนี้
<HTML> ส่วนขอบเขต
<HEAD> ส่วนหัว
......
</HEAD> สิ้นสุดส่วนหัว
<BODY> ส่วนเนื้อหา
......
</BODY> สิ้นสุดส่วนเนื้อหา
</HTML> ปิดส่วนขอบเขต
*หลักการใช้ tag ทั่วไปนั้น เราจำเป็นจะต้องมี tag ตัวปิดด้วยเสมอ เช่น <html> จำเป็นจะต้องมี </html> เป็นตัวปิด (แต่มีพวกบาง <tag> ทีสามารถใช้ได้โดดเลย ไว้เด๋วจะบอกครับ งุงิ)
เอาล่ะทีนี้เราจะมาเริ่มเขียนโค้ดกันแล้ว!
TAG ที่ 1 <Title>
เคยสังเกตไหมว่า เวลาเปิดเว็บขึ้นมาตรงแถบสีน้ำเงิน (บนสุดของ Browser) จะแสดงเป็นชื่อเว็บต่างๆ เราสามารถใช้ <Title> กำหนดหรือใส่คำจำกัดความของเว็บนั้นๆ โดยรูปแบบ จะใช้อยู่ระหว่าง <HEAD>...</HEAD> ยกตัวอย่างเช่น
<HTML>
<HEAD>
<Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title>
</HEAD>
</HTML>
(อ่ะๆ ผมลืมบอกไปนิดหนึ่ง เวลาเราพิมพ์โค้ดใส่ลงบน Program Notepad แล้ว ถ้าจะให้สามารถเปิดดูได้แบบเว็บเพจ เวลาเซฟก็ให้ใส่นามสกุลเป็น .html ด้วยนะครับ เช่น test.html แล้วเซฟครับ แล้วถ้าเราอยากจะแก้ไขโค้ดก็คลิกขวาที่ไฟล์ test.html แล้วเลือก OpenWith --> Notepad ได้เลยครับ)
ทีนี้รอง เปิดไฟล์ test.html ขึ้นมาก็จะพบว่า
Tital Bar ของเราได้เปลี่ยนไปแล้ว
การกำหนดชื่อตรงส่วน Title นี้เราไม่สามารถใส่พวกตัวเอียง ตัวหนา ลงสี หรือ ตัวขีดเส้นใต้ได้ แต่เราก็สามารถทำให้มันสะดุดตาได้โดย ทำการจัดเรียงตัวอักษรใหม่ เช่น <Title> W e l e c o m e T o M y F i r s t S i t e ! ^o^ </Title> อะไรประมาณเนี๊ยะ
โดยปกติแล้วส่วน Title นี้ ถ้าเราไม่ได้ทำการกำหนดเอาไว้ เวลาเปิด Browser ขึ้นมา ตรงส่วน TitleBar นี้ก็จะแสดงเป็นชื่อไฟล์ .html ขึ้นมาแทนครับ
TAG ที่ 2 <BODY>
ตามที่ผมได้บอกไว้ว่า ส่วน BODY จะเป็นเนื้อหาของเว็บเรา ดังนั้นเมื่อเราเปิด <BODY> ขึ้นมา อะไรที่ใส่เข้าไปจะไปแสดงที่พื้นที่เนื้อหา หรือเว็บของเรานั่นเอง อธิบายแบบนี้อาจจะนึกภาพไม่ออก ลองไปใส่โค้ทกันเลยดีกว่า รูปแบบจะเป็นแบบนี้ครับ
<HTML>
<HEAD>
<Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title>
</HEAD>
<BODY>
โอ้ว ว้าว เรานี่ก็เก่งเหมือนกันนะนี่ อิอิ :-P
</BODY>
</HTML>
เมื่อเซฟแล้วลอง เปิดดูก็พบว่า
เอาล่ะครับ วันนี้เราสามารถกำหนด Title และใส่รายละเอียดลงไปในเนื้อหาได้แล้ว คราวหน้าเราจะมาเจาะลึกเรื่องการปรับแต่งในส่วน BODY กันครับตื่นเต้นจางง เยยยย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น