วันพุธที่ 17 กรกฎาคม พ.ศ. 2556

...HTML Tag พื้นฐาน...


    
HTML 

----HTML ย่อมาจาก Hyper Text Markup Language----
       คือภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่า เว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า "HTML Application"  
     
         HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML
สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น 
Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น 
Microsoft FrontPage, Dreamweaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML 
       
         ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม 
Web browser เช่น Internet Explorer (IE), Google Chrome, Mozilla Firefox, Safari, Opera, Netscape Navigator เป็นต้น

Text Editor 
         
          คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆ
          ปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น
NotePad, EditPlus, Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย




ข้อควรจำ!!    โปรแกรม Text Editor ใช้สำหรับสร้างเว็บเพจ แต่โปรแกรม Web Browser ใช้สำหรับแสดงผลการทำงานของคำสั่งต่าง ๆ ที่สร้างจากโปรแกรม Text Editor...นั่นหมายความว่าการจะสร้างเว็บเพจ ต้องมีเครื่องมือหรือโปรแกรมทั้ง 2ประเภท คือ Text Editor และ Web Browser...


องค์ประกอบเอกสาร HTML

การใช้งานหลักจะมีดังนี้
1. คำสั่ง หรือ Tag
        Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ
            Tag เดี่ยว       เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น
            Tag คู่             รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
                                 <tag> เราเรียกว่า tag เปิด และ </tag> เราเรียกว่า tag ปิด
2. Attributes
         Attributes เป็นตัวบอกรายละเอียดของ tag นั้น  เช่น
<span align = 'left'> ... </span> เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย
3. not case sensitive
          หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

โครงสร้างของหลักของ HTML
          โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย </html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่
Webpage โดยตรง
2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ Web browser โดยตรง


<HTML>.............</HTML>

คือ ส่วนที่บอกว่าต่อไปนี้เป็นไฟล์ HTML ซึ่งจะคลุมส่วนอื่นๆ ( head และ body) ของไฟล์ HTML


<HEAD>...............</HEAD>

คือ ส่วนที่ถูกโหลดขึ้นมาก่อน ใช้เก็บ tag ที่อธิบายความหมายต่างๆ , ควบคุมการทำงานรูปแบบต่างๆของเว็บเพจ หรืออ้างอิงถึงไฟล์อี่นๆ (ไม่ได้แสดงบนหน้าเว็บเพจ)

 tag ที่อยู่ระหว่าง tag <HEAD> ได้แก่

<TITLE>...............</TITLE>

คือ ส่วนที่บอกว่าเอกสารนั้น มีเนื้อหาเกี่ยวกับอะไร และชื่อใน title นี้จะปรากฏที่ title bar ,ที่ bookmark หรือ favorite และบาง search engine เช่น Yahoo Alta vista และยังใช้ในการจัดหมวดหมู่ของ Website ด้วย
   
<META>  tag นี้ไม่ได้กำหนดหน้าที่ไว้ตายตัว เพียงกำหนดให้ใช้งานที่ tag อื่นไม่สามารถทำได้ จึงทำหน้าที่ได้หลายหน้าที่ ขึ้นอยู่กับการใช้ Attribute ตัวใด และสามารถมี tag <META> ได้หลายหลาย tag ในที่นี้เราจะกล่าวถึงที่นิยมใช้กัน เช่น
  • บอกให้รู้ว่า เว็บนี้ใช้ Tool อะไรสร้าง 
          <META NAME="Generator" CONTENT="EditPlus">
  • การประกาศชื่อ ผู้สร้าง 
           <META NAME="Author" CONTENT="SALA">


<BODY>.............</BODY>  

คือ ส่วนที่เราต้องการนำเสนอข้อมูล  ข้อความ ภาพ เสียงต่างๆที่หน้า Webpage
         
       Attribute ของ tag <BODY>

text="สี"   กำหนดสีปกติของตัวอักษร-ปกติสีดำ-

link="สี"   กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link) -ปกติสีน้ำเงิน-
alink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัว link ขณะ link -ปกติสีแดง-
vlink="สี"  กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link)ที่เคยเข้าไปแล้ว -ปกติสี ม่วงเข้ม-
bgcolor="สี"  กำหนดสีของพื้นหลัง -ปกติสีขาว-
     <body text="#FF0000" bgcolor="#00FF00">
background="ชื่อไฟล์รูปภาพ"   กำหนดให้ใช้รูปภาพเป็นพื้นหลัง 
     <body background=" ชื่อเส้นทางที่เก็บรูป" >

<BR>

ใช้สำหรับกำหนดให้มีการขึ้นบรรทัดใหม่ (Line Break) โดยข้อความที่อยู่หลังคำสั่ง <BR> จะถูกนำไปขึ้นบรรทัดใหม่


 <P>

ใช้สำหรับจัดวางย่อหน้าข้อความ (Paragraph Break หรือ Alignment)
โดยข้อความที่อยู่หลังคำสั่ง <P> จะถูกวางย่อหน้าใหม่





---From---  http://www.mindphp.com

                  http://www.energythai.net
                  http://school.obec.go.th
                  http://blog.monitor.us
                  http://www.kts.ac.th




2 ความคิดเห็น:

  1. เนื้อหาดี เน้นสี ตรง ข้อความสำคัญ หน่อยนะครับ

    ตอบลบ