วันพุธที่ 15 มิถุนายน พ.ศ. 2559

HTML

HTML คืออะไร ?


      ย้อนไปเมื่อสมัยยังละอ่อน อยากจะมีเว็บไซต์ของตัวเอง เดินไปถามรุ่นพี่ทันทีว่าต้องเริ่มยังไง รุ่นพี่ก็แนะนำเลยว่า “HTML ไง ไปศึกษาดูเองสิ!” ณ ตอนนั้นไม่รู้จักเลยด้วยซ้ำ HTML คืออะไร ทำให้ต้องรีบไปหาเลยว่า HTML มันคืออะไร ใช้ทำอะไร และแล้วก็ได้ความว่า…

      HTML หรือชื่อเต็มๆ ก็คือ Hypertext Markup Language เป็นภาษาประเภท Markup ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ เสียง อื่นๆ ที่สามารถเรียกดูผ่านทางเว็บเบราว์เซอร์ได้ แต่ละ Tag สามารถระบุหรือควบคุมการแสดงผลของเว็บให้เป็นไปตามที่ผู้ออกแบบเว็บไซต์กำหนดไว้ หรือจะให้เข้าใจง่ายๆ ก็คือ เว็บที่เราเข้าอยู่ในทุกๆ วันนี้ ก็ล้วนถูกแสดงผลด้วยโค้ด HTML ทั้งนั้น
HTML พัฒนามาจากภาษา SGML และถูกพัฒนามาเรื่อยๆ ตั้งแต่เวอร์ชั่นแรก สู่เวอร์ชั่น HTML 2.0, HTML 3.2, HTML 4.1 และตัวล่าสุดคือ HTML 5 (ซึ่งอยู่ในระหว่างการพัฒนา) และยังมีการพัฒนารูปแบบของ HTML แบบใหม่ที่เรียกกันว่า XHTML ซึ่งมีความสามารถและมาตราฐานที่รัดกุมกว่าอีกด้วย

คำสั่งพื้นฐาน


  • คำสั่ง
  • ความหมาย
  • รูปแบบ
  • <html>
  • เป็นแท็กเริ่มต้นและสิ้นสุดของเอกสาร HTML
  • <html>…</html>
  • <head>
  • เป็นแท็กที่ใช้กำหนดในส่วนที่เป็นชื่อเรื่อง
  • <head>…</head>
  • <title>
  • กำหนดข้อความบนไตเติลบาร์เป็นคำสั่งในส่วน<head>
  • <head><title>ข้อความ</title></head>
  • <meta>
  • เป็นแท็กสำหรับแสดงข่าวสารของไฟล์เอกสาร HTML
  • <meta>
  • <body>
  • เป็นแท็กเริ่มต้นและสิ้นสุดของเนื้อหาในเอกสาร ซึ่งในแท็ก<body> จะมีแท็กอื่น ๆ แทรกอยู่ระหว่างแท็กเปิดและแท็กปิด
  • <body>…</body>
  • <h1>
  • เป็นแท็กสำหรับกำหนดหัวข้อให้เป็นตัวอักษรขนาดใหญ่สุดถึงเล็กสุดกำหนดให้ไม่เกิน 6
  • <h1>…</h1>
  • <br>
  • ขึ้นบรรทัดใหม่
  • <br>
  • <hr>
  • ขีดเส้นคั่น
  • <hr>
  • <background>
  • ใช้รวมกับ<body>หรือ<table>เพื่อกำหนดสีของพื้นหลังเป็นรูปภาพ
  • <body background= "ชื่อ.นามสกุลรูปภาพ">
  • <bgcolor>
  • ใช้รวมกับ<body>หรือ<table>เพื่อกำหนดสีของพื้นหลัง
  • <body bgcolor=ชื่อสี>
  • <font color, size, face>
  • แสดงข้อความกำหนดสีของข้อความ กำหนดขนาดของข้อความกำหนดชนิดของข้อความ
  • <font color=ชื่อสี size= "ขนาดกำหนดได้ตั้งแต่ 1 ถึง 7" face= "ชนิดของตัวอักษรเช่น Angsana new เป็นต้น">ข้อความ</font>
  • <b>
  • ข้อความหนา
  • <b>ข้อความ</b>
  • <i>
  • ข้อความเอียง
  • <i>ข้อความ</i>
  • <u>
  • ข้อความขีดเส้นใต้
  • <u>ข้อความ</u>
  • <marquee> <marquee behavior=alternat>
  • ทำให้ข้อความเลื่อนจากซ้ายไปขวาทำให้ข้อความเลื่อนจากซ้ายไปขวาแล้วย้อนกลับ
  • <marquee>ข้อความ</marquee>
  • < marquee behavior=alternat>ข้อความ</marquee>
  • <img src alt width height>
  • แสดงรูปภาพ กำหนดรูปภาพ   กำหนดข้อความเมื่อเอาเมาส์วางบนภาพ  กำหนดความกว้างของภาพ   กำหนดความยาวของภาพ
  • <img src= "ชื่อ.นามสกุล"  width= "ความกว้าง" height "ความยาว" alt= "ข้อความ">เช่น <img src = "lan.jpg"  width= "80" height "250" alt= "ภาพโรงเรียน">
  • <tt>
  • เป็นแท็กสำหรับกำหนดตัวอักษรเป็นตัวพิมพ์ดีด
  • <tt>…</tt>
  • <ul>
  • เป็นแท็กสำหรับแสดงรายการโดยไม่ต้องเรียงลำดับ
  • <ul>…</ul>
  • <ol>
  • เป็นแท็กสำหรับแสดงรายการโดยเรียงลำดับ
  • <ol>…</ol>
  • <li>
  • เป็นแท็กแสดงข้อความในแต่ละบรรทัดใน แท็ก <ul>และ <ol>
  • <li>…</li>
  • <a>
  • เป็นแท็กที่กำหนดการเชื่อมโยง
  • <a>…</a>
  • <img>
  • เป็นแท็กที่กำหนดการเชื่อมโยงด้วยรูปภาพ
  • <img>…</img>
  • <a href target>
  • กำหนดการเชื่อมโยง กำหนดจุดเชื่อมโยง กำหนดการเปิดหน้าต่างใหม่
  • <a href= "จุดเชื่อมโยง" target= "ลักษณะการเปิดหน้าต่าง" >ข้อความ</a> เช่น <a href= "http://suwitguide.com"  target= "_blank">เว็บเพจของสุวิทย์</a>
  • <table>
  • เป็นแท็กสำหรับสร้างตาราง
  • <table>…</table>
  • <table width, bgcolor, border, bordercolor>
  • สร้างตารางกำหนดความกว้างของตาราง
  • <table width = "80% bgcolor=blue border= "2" bordercolor=red>
  • <tr>
  • เป็นแท็กสำหรับการกำหนดแถวในตาราง
  • <tr>…</tr>
  • <td>
  • เป็นแท็กสำหรับกำหนดคอลัมน์ในแถว
  • <tr>…</tr>
  • rowspan
  • รวมแถว
  • <td rowspan= "จำนวน แถว ที่จะรวม" >
  • colspan
  • รวมสดมน์
  • <td colspan= "จำนวน cell ที่จะรวม" >
  • <caption>
  • เป็นแท็กสำหรับกำหนดคำอธิบายในตาราง
  • <caption>…</caption>
  • <th>
  • เป็นแท็กสำหรับกำหนดข้อความหัวข้อเรื่องของตาราง
  • <th>…</th>
  • <form>
  • เป็นแท็กสำหรับกำหนดสร้างform
  • <form>…</form>
  • <input>
  • เป็นแท็กสำหรับกำหนด inputใน form
  • <input>…</input>
  • <frame>
  • เป็นแท็กสำหรับสร้าง frame
  • <frame>…</frame>

ตัวอย่าง CODE ภาษา HTML



จากภาพจะเห็นว่า… HTML มีรูปแบบการเขียนที่ชัดเจน จะประกอบด้วย Tag พื้นฐาน ดังนี้
Tag <html>…</html> เป็นส่วนประกาศที่กำหนดหัวละท้ายของเอกสาร เพื่อให้บราว์เซอร์ทราบและแสดงผลได้ถูกต้อง
Tag <head>…</head> เป็นส่วนหัวเรื่องของเอกสาร ภายในจะมี Tag <title>…</title> ใช้สำหรับการกำหนดชื่อของเอกสาร
Tag <body>…</body> เป็นส่วนที่มีรายละเอียดมากที่สุด จะบรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบนหน้าเว็บไซต์ของเรา ทั้งข้อความ รูปภาพ เป็นต้น

ในการสร้างเว็บเพจโดยใช้ภาษา HTML เขียนนั้น สามารถใช้โปรแกรม Text Editor ต่างๆ เขียนได้ เช่น Note Pad , Word Pad ฯลฯ หรือจะใช้โปรแกรมประเภท WYSIWYG (What You See Is What You Get) ที่เป็นเครื่องมือช่วยสร้างเว็บเพจซึ่งอํานวยความสะดวกในการสร้างหน้า HTML เช่น Dream Weaver, Microsoft FrontPage ฯลฯ
เขียนโดย ที่

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

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

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