วันพฤหัสบดีที่ 26 มิถุนายน พ.ศ. 2557

HTML tag พื้นฐาน


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> จะเป็นส่วนของการจบ



Text  Editor

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


-  ตัวอย่างเช่น


 


Web  browser

  
       คือซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์ที่ใช้ในการเข้าถึงข้อมูลเและติดต่อสื่อสารกับระบบสารสนเทศที่อยู่ในรูปแบบของเว็บเพจ ซึ่งอยู่บนเครือข่ายคอมพิวเตอร์ที่ชื่อว่า World Wide Web (WWW)

Web browser มีอะไรบ้าง

1.Firefox

คุณสมบัติที่น่าสนใจของ Firefox
•เป็นโปรแกรม Free Download ไม่ต้องตรวจสอบอะไร โหลดมาใช้ได้เลย
•ไฟล์ติดตั้งมีขนาดเล็ก ใช้เวลาในการดาวโหลดไม่นาน
•ไม่แฮงค์บ่อย ปลอดภัยจาก spy ware ต่างๆ
•แก้ไขข้อบกพร่องได้อย่างรวดเร็ว เพราะมีทีมงานพัฒนาอยู่ทั่วโลก มีการพัฒนาตลอดเวลา
•สนับสนุนการใช้งานทั้ง Window MAX OS และ Linux ด้วย
•มีลูกเล่นต่างๆ มากมาย ที่ผู้ใช้สามารถปรับเปลี่ยนหน้าตาและการใช้งานได้ตามความถนัดของผู้ใช้ ด้วย themes, extensions ต่างๆ มากมาย




2. Google chrome


Google Chrome คือ เว็บเบราว์เซอร์ใหม่สำหรับ Windows ที่ถูกพัฒนาขึ้นมาโดยทาง Google เอง และเป็นเบราว์เซอร์ที่รวมการออกแบบที่เรียบง่ายเข้ากับเทคโนโลยีที่ซับซ้อนเพื่อทำให้เว็บรวดเร็วขึ้น ปลอดภัยขึ้น และใช้งานง่ายขึ้น รายละเอียดบางส่วนของ Google Chrome ค้นหาจากแถบที่อยู่ พิมพ์ในแถบที่อยู่ และรับคำแนะนำสำหรับทั้งหน้าการค้นหาและหน้าเว็บ ภาพขนาดเล็กของเว็บไซต์โปรดของคุณ เข้าถึงหน้าเว็บโปรดของคุณได้ทันทีอย่างรวดเร็วจากแท็บใหม่ใดๆ ก็ตาม การเรียกดูส่วนตัว เปิดหน้าต่างที่ไม่ระบุตัวตนเมื่อคุณไม่ต้องการบันทึกไว้ในประวัติการเรียกดูของคุณ



3. Internet Explorer
 คือ โปรแกรม Internet Explorer เรียกย่อๆ ว่า IE เป็นโปรแกรมเบราเซอร์ที่ใช้ในการเปิดเว็บเพจในอินเทอร์เน็ต ซึ่งเป็น Application Software ที่ผลิตโดยบริษัท Microsoft ส่วนประกอบที่สำคัญของโปรแกรม






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




- <html> คือ
บล็อก <html> ... </html>

เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body
 
- <head> คือ


บล็อก <head> ... </head> 
 

เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร

-<title> คือ

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

-<body> คือ

<BODY>..........</BODY>
            
    คำสั่ง < BODY > เป็นส่วนที่สำคัญในการแสดงผลในเว็บบราวเซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร รูปภาพกราฟิกต่าง ๆ


- <BR> คือ                                       
                                                       ข้อความ .......<BR> ข้อความ
     

    การขึ้นบรรทัดใหม่ <BR> 

- <P> คือ
                                               ข้อความใน Paragraph ..... <P> ข้อความใน Paragraph ...



การขึ้นย่อหน้าใหม่   เสมือนการกดปุ่ม Enter 2 ครั้ง  



อ้างอิง
 

 
 


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

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