[x] Close
Powered by bunyiam.com
Untitled Document
Categories :
 
Untitled Document
 
 
 
ลิงค์ที่น่าสนใจ
 
+ @นิมมาน
+ I-LikeStyle
+ HTMLDRIVE
+ JoomlaAtp
+ magpress
+ Design font
+ User Error
+ ที่ดินสินทรัพย์ดอทคอม
+ antivirus.co.th
+ ichaiwut.com
 

 
 
 

 
 

  

 
HTML : HTML คืออะไร             [เข้าชม : 1078 ]


ทำความรู้จักHTML  HTML คืออะไร  ใช้อะไรในการเขียน HTML โครงสร้างพื้นฐาน 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> เช่น
<body bgcolor="#0099FF">
หรืออาจจะใช้ css ช่วยก็ได้ครับ โดยมี Code ดังนี้
<style type="text/css">
<!--
body {
	background-color: #0099FF;
}
-->
</style>
ส่วน CODE สีสามารถหาได้ตามเว็บทั่วไปครับ

ขนาดตัวอักษร

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

รูปแบบตัวอักษร
     การกำหนดตัวอักษรให้เป็น ตัวหนา  คำสั่งที่ใช้ <B>........</B>
    การกำหนดตัวอักษรให้เป็น   ตัวเอน  คำสั่งที่ใช้ <U>.........</U>
    การกำหนดตัวอักษรให้เป็น   ตัวขีดเส้นใต้ คำสั่งที่ใช้ <L>.........</L>

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

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

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

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

ถ้าต้องการ 2 คอลัมน์ก็ทำได้ดังนี้
<table width="500" border="0">
  <tr>
    <td>&nbsp;</td> // คอลัมน์ 1
    <td>&nbsp;</td> // คอลัมน์ 2
  </tr>
</table>
ถ้าต้องการ 2 แถว 2 คอลัมน์ สร้างดังนี้
<table width="500" border="0">
  <tr> // แถว 1
    <td>&nbsp;</td> // คอลัมน์ 1
    <td>&nbsp;</td> // คอลัมน์ 2
  </tr>
 <tr>// แถว 2
    <td>&nbsp;</td> // คอลัมน์ 1
    <td>&nbsp;</td> // คอลัมน์ 2
  </tr>
</table>
เป็นอย่างไรกันบ้างครับ สำหรับความรู้พื้นฐาน HTML สำหรับการเขียนเว็บไซต์ครับ ถ้ามีอะไรเพิ่มเติมจะมาแก้ไขให้ครับ

บทความนี้ก็จบเท่านี้ครับ




credit : http://www.xvlnw.com




   




\Bots Visited = () Day 543 Time . s.