วันอาทิตย์ที่ 8 กรกฎาคม พ.ศ. 2555

HTML ย่อมาจากคำว่าอะไร หมายถึงอะไร

HTML คืออะไร
     HTML ย่อมาจากคำว่า Hyper Text Markup Language เป็นภาษาหลักที่ใช้ในการสร้างโฮมเพจ

ใช้อะไรในการเขียน HTML
     การสร้างไฟล์   HTML  เราสามารถสร้างจาก Text  Editor เช่นจาก Notepad หรือ  Wordpad ก็ได้แต่สำหรับการ Save ไฟล์ เราจำเป็นต้องใส่  " ชื่อไฟล์ . html "   ซึ่งถ้าหากคุณไม่ใส่  " " จะ กลายเป็นไฟล์   .TXT แทน  ในปัจจุบัน มีโปรแกรมต่าง ๆ มากมายที่พัฒนาขึ้นมาเพื่อช่วยอำนวยความสะดวกในหารเขียนโค้ด html เช่นโปรแกรม Macromedia Dreamweaver ปัจจุบันเวอร์ชั่น CS4 แล้ว มีความง่ายและสะดวกในการสร้าง html ขึ้นมา ด้วย Tool ต่าง ๆ ของโปรแกรมครับ

โครงสร้างพื้นฐาน HTML
        โครงสร้าง HTML ประกอบด้วย 2 ส่วนสำคัญคือ
                1. ส่วนหัว ( Head )
                2. ส่วนเนื้อหา ( Body )
        โดย CODE จะเป็นแบบนี้ครับ
1.<HTML>
2.<HEAD>
3.</HEAD>
4.<BODY>
5.</BODY>
6.</HTML>
คำสั่งหมายเหตุ !
     รูปแบบคำสั่ง <!.........>
            ในการเขียนโปรแกรมเราควรมีหมายเหตุ( Comment ) เอาไว้ กันความหลงลืมของเนื้อหาที่เราเขียนไว้ได้    ซึ่งข้อความที่อยู่ระหว่าง <!.และ..> ที่เราหมายเหตุไว้จะไม่มีการนำไปแสดงบนจอภาพแต่อย่างใด

คำสั่งเริ่มต้น
     รูปแบบคำสั่ง   <HTML>........</HTML>  คำสั่ง   <HTML> ซี่งจะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML และคำสั่ง </HTML> จะเป็นส่วนของการจบ

การเขียน HTML
       รูปแบบคำสั่ง <HEAD>..........</HEAD>  คำสั่ง <HEAD> เป็นคำสั่งที่ใช้ในการกำหนดข้อความส่วนที่เป็นชื่อเรื่องซึ่งภายใต้ของคำสั่งนี้จะมีคำสั่งย่อย  อีกคำสั่งหนึ่งคือ คำสั่ง <TITLE>........</TITLE>   

รูปแบบคำสั่ง <TITLE>.........</TITLE>
     คำสั่ง <TITLE>.....</TITLE> จะเป็นส่วนของการแสดงชื่อของเอกสาร จะปรากฎในขณะที่ไฟล์ HTML ทำงานการแสดงผลจะแสดงในส่วนของไตเติลบาร์ ( Title Bar )

การกำหนดสีของพื้นหลัง
     การกำหนดสีจะมีการกำหนดให้มี แอตทริบริต์ BGCOLOR= # สีที่ต้องการ ซึ่งเป็นส่วนหนึ่งของ <BODY> เช่น 
1.<body bgcolor="#0099FF">
หรืออาจจะใช้ css ช่วยก็ได้ครับ โดยมี Code ดังนี้
1.<style type="text/css">
2.<!--
3.body {
4.background-color: #0099FF;
5.}
6.-->
7.</style>
ส่วน CODE สีสามารถหาได้ตามเว็บทั่วไปครับ

ขนาดตัวอักษร
     การกำหนดขนาดตัวอักษรคำสั่งที่ใช้ <FONT SIZE = VALUE >.......</FONT>    การกำหนดขนาดตัวอักษรโดยทั่วไปมีด้วยกัน 7 ขนาดซึ่งตั้งแต่ -7 จนถึง +7 หรือจะกำหนดเป็น px ก็ได้ครับ

รูปแบบตัวอักษร
     การกำหนดตัวอักษรให้เป็น ตัวหนา  คำสั่งที่ใช้ <B>........</B>
    การกำหนดตัวอักษรให้เป็น   ตัวเอน  คำสั่งที่ใช้ <U>.........</U>
    การกำหนดตัวอักษรให้เป็น   ตัวขีดเส้นใต้ คำสั่งที่ใช้ <L>.........</L>
1.<HTML>
2.<HEAD><TITLE> รูปแบบตัวอักษร </TITLE > </HEAD>
3.<BODY>
4.<B>   รูปแบบตัวอักษร ตัวหนา </B>
5.<U>   รูปแบบตัวอักษร ตัวเอน </U>
6.<L>   รูปแบบตัวอักษร ตัวขีดเส้นใต้ </L>
7.</BODY>
8.</HTML>
ตัวอักษรพิเศษ
     ตัวอักษรแบบพิเศษไม่ได้หมายถึงตัวอักษรที่ไม่มีบนแป้นพิมพ์แต่หมายถึงตัวอักษร ที่ไปตรงกับตัวกำหนดคำสั่ง เช่น <, >,",& เป็นต้น

                  ตัวอักษรพิเศษ                     แทนด้วย
                         <                                 &lt ;
                         >                                 &gt ;
                         &                                &amp ;
                         "                                 &quot ;  
คำสั่งแสดงภาพ
     รูปแบบคำสั่ง <IMG SRC= "ไฟส์รูปภาพ" > ไฟล์รูปภาพส่วนใหญ่จะเป็นไฟล์ชนิด   .GIF .JPG เพราะเว็ปเบราเซอร์ส่วนใหญ่สนับสนุนไฟล์ 2 ชนิดนี้

รูปแบบคำสั่ง <ALT="บอกรายละเอียด">
     คำสั่ง ALT จะเขียนต่อจากการแสดงภาพซึ่งเราเขียนคำสั่ง ALT ต่อจากคำสั่งการแสดงภาพ โดยคำสั่งนี้  จะแสดงบอกรายละเอียดเมื่อเรานำเมาส์ไปชี้ที่ภาพ        

รูปแบบคำสั่ง BORDER = N  คำสั่ง BORDER   จะเป็นการกำหนดเส้นกรอบของภาพที่แสดงซึ่ง N = 0 จะไม่มีการแสดงเส้นกรอบ ของภาพและหากมีการกำหนด N มากขึ้นความหนาของกรอบรูปก็จะมากขึ้นตาม
1.<BODY>
2.<IMG SRC="test1.jpg" > เมื่อไม่มีการใช้คำสั่ง   ALT
3.<IMG SRC="test1.jpg" ALT="ทดสอบการแสดงภาพ">
4.</BODY>
การใช้ภาพเป็นตัวเชื่อมโยง
     รูปแบบคำสั่ง <A HREF = "ชื่อไฟล์.HTML">  เช่นเราต้องการ Link ภาพ  Button.jpg   ไปยังหน้าแรกของการสร้างโฮมเพจโดย HTMLเราจะเขียนคำสั่งดังนี้
1.<BODY>
2.<A HREF="index.html" >
3.<IMG SRC"test1.jpg"  ALT="ทดสอบการ Link" </A>
4.</BODY>
การทำตัวหนังสือให้เป็นลิ้งได้
     การทำตัวหนังสือให้เป็นลิ้งได้ จะเป็นการเชื่อมต่อโดยตัวหนังสือไปยังอีกหน้าหนึ่่ง หรืออาจจะเป็นหน้าเดิมก็ได้ มีคำสั่งดังนี้
1.<a href="index.html">ทดสอบระบบ</a> // เชื่อมไปยังหน้า index.html
2.<a href="mailto:admin@xvlnw.com">ส่งเมลล์</a> // ลิ้งเพื่อส่งเมลล์
3.<a href="#">ทดสอบลิ้ง</a> // เป็นลิ้งที่ไม่ได้เชื่อมต่อไปที่ใด
คำสั่งสร้างตาราง
    ในการสร้างเว็บไซต์ต้องมีการสร้างตารางมาครอบไว้ เพื่อให้การแสดงผลดุดีนั่นเอง โดยคำสั่งในการสร้างตารางมีดังนี้
1.<table width="500" border="0">
2.<tr>
3.<td>&nbsp;</td>
4.</tr>
5.</table>
บันทัดแรก คือคำสั่งเริ่มต้นการสร้างตาราง มีการกำหนดขนาดของตารางเป็น 500px และกรอบของตาราง ( border = 0) เป็น 0 คือไม่แสดง
บันทัดที่ 2 เป็นคำสั่งเริ่มต้นสร้างแถวในตาราง 
บันทัดที่ 3 เป็นคำสั่งเริ่มต้นสร้างคอลัมน์ในตาราง โดยจะมีกี่คอลัมก็ได้ แล้วแต่ความต้องการของผุ้สร้าง
บันทัดที่ 4 เป็นบันทัดจบคำสั่งการสร้างแถวในตาราง
บันทัดที่ 5 เป็นการจบคำสั่งการสร้างตาราง

ถ้าต้องการ 2 คอลัมน์ก็ทำได้ดังนี้
1.<table width="500" border="0">
2.<tr>
3.<td>&nbsp;</td> // คอลัมน์ 1
4.<td>&nbsp;</td> // คอลัมน์ 2
5.</tr>
6.</table>
ถ้าต้องการ 2 แถว 2 คอลัมน์ สร้างดังนี้
01.<table width="500" border="0">
02.<tr> // แถว 1
03.<td>&nbsp;</td> // คอลัมน์ 1
04.<td>&nbsp;</td> // คอลัมน์ 2
05.</tr>
06.<tr>// แถว 2
07.<td>&nbsp;</td> // คอลัมน์ 1
08.<td>&nbsp;</td> // คอลัมน์ 2
09.</tr>
10.</table>
เป็นอย่างไรกันบ้างครับ สำหรับความรู้พื้นฐาน HTML สำหรับการเขียนเว็บไซต์ครับ ถ้ามีอะไรเพิ่มเติมจะมาแก้ไขให้ครับ 


อ้างอิง


http://www.xvlnw.com/knowledge-readknowledge-id40.html
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)