top of page

HTML

เอชทีเอ็มแอล (อังกฤษ: HTML: Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) เป็นภาษามาร์กอัปหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม

หลักการเขียนภาษา HTML

การเปิดโปรแกรม Notepad ขึ้นมาทำงานสามารถเปิดได้จากการคลิกที่ปุ่ม Start > Programs > Accessories > Notepad หรือจะใช้คำสั่งRun > Notepad ก็ได้เช่นเดียวกันซึ่งจะได้หน้าต่างการทำงานดังภาพล่าง

ก่อนการใช้งานต้องมีการปรับแต่งฟอนต์อีกเล็กน้อย เพื่อให้สังเกตเห็นได้เมื่อมีการป้อนข้อความผิดพลาดในหน้าต่างโปรแกรม ด้วยการกำหนดให้ใช้ฟอนต์ MS Sans Serif ซึ่งพิมพ์อักษรไทยได้ ขนาด10-12 พอยต์ (แล้วแต่สายตาคนทำมองได้ชัดเจน ยิ่งโตมากพื้นที่การทำงานก็จะลดลงต้องเลื่อนจอ (Scroll) ไปทางขวามาก ดังภาพข้างล่างนี้

 

 

เทคนิคในการป้อนข้อความคำสั่งต่างๆ ลงในโปรแกรม Notepad นั้นควรจะจัดแถวให้มีการเยื้องในแต่ละคำสั่งเป็นคู่ๆ เพื่อให้สามารถตรวจสอบคู่คำสั่งเปิด/ปิดได้ชัดเจน แยกระหว่างส่วนคำสั่งและข้อความออกจากกันจะดูได้ง่ายดังภาพล่างนี้

 

 

 

การบันทึกข้อมูล

ที่สำคัญอย่างยิ่งคือการจัดเก็บไฟล์ (Save) เพราะ Notepad เป็น Text Editor ค่าปกติของโปรแกรมเมื่อจัดเก็บไฟล์จะมีสกุลเป็น .txt เสมอ     เมื่อต้องการจัดเก็บเว็บเพจที่มีสกุลของไฟล์เป็น .htm หรือ .html จะต้องเปลี่ยนชนิดของการจัดเก็บจาก Text Documents (*.txt) เป็น All Files และกำหนดชื่อไฟล์พร้อมสกุลเป็น .html ดังตัวอย่างกำหนดชื่อเป็น notepad.html

 

 

เมื่อจัดเก็บได้ถูกต้องบนแถบไตเติ้ลบาร์ของ Notepad จะปรากฏชื่อไฟล์เป็น notepad.html ถูกต้องดังภาพล่าง

 

เมื่อใช้บราวเซอร์ Internet Explorer เปิดไฟล์ ถ้ามีการตั้งชื่อไฟล์และไม่เปลี่ยนชนิดไฟล์จะได้ไฟล์ชื่อ notepad.txt ถ้ากำหนดชื่อและสกุลไฟล์ถูกต้องแต่ไม่เปลี่ยนชนิดไฟล์จะได้ไฟล์ชื่อ nodepad.html.txt ดังวงกลมแดงในภาพซึ่งจะไม่สามารถแสดงผลได้    ต้องเปิดได้เฉพาะไฟล์ notepad.html เท่านั้น

 

 

การแสดงผลเว็บเพจ

และนี่คือการสแดงผลจากไฟล์ที่เราจัดเก็บไว้ถูกต้องคือ notepad.html จะปรากฏข้อความบนไตเติ้ลบาร์และในส่วนเนื้อหาถูกต้องตามที่เขียนทุกประการ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

คำสั่ง

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

< !-- ข้อความ --> คำสั่ง หมายเหตุ ใช้อธิบายความหมาย ขื่อผู้เขียนโปรแกรม และอื่นๆ

<br> คำสั่งขึ้นบรรทัดใหม่

<p> ข้อความ </p> คำสั่งย่อหน้าใหม่

<hr width = "50%" size = "3"> คำสั่ง ตีเส้น, กำหนดขนาดเส้น

&nbsp; คำสั่ง เพิ่มช่องว่าง

<IMG SRC = "PHOTO.GIF"> คำสั่งแสดงรูปภาพชื่อ Photo.gif

<CENTER> ข้อความ </CENTER> คำสั่งจัดให้ข้อความอยู่กึ่งกลาง

<HTML> </HTML> คำสั่ง <HTML> คือคำสั่งเริ่มต้นในการเขียนโปรแกรม HTML และมีคำสั่ง </HTML> เพื่อบอกจุดสิ้นสุดโปรแกรม

<HEAD> </HEAD> คำสั่ง <HEAD> คือคำสั่งบอกส่วนที่เป็นชื่อเรื่อง โดยมีคำสั่งย่อย <TITLE> อยู่ภายใน

<TITLE> </TITLE> คำสั่ง <TITLE> คือคำสั่งบอกชื่อเรื่อง จะไปปรากฏที่ Title Bar

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

รูปแบบตัวอักษร

<font size = "3"> ข้อความ </font> ขนาดตัวอักษร

<font color = "red"> ข้อความ </font> สีตัวอักษร

<font face = "Arial"> ข้อความ </font> รูปแบบตัวอักษร

<besefont size = "2"> ข้อความ </font> กำหนดค่าเริ่มต้นของขนาดตัวอักษร

<b> ข้อความ </b> ตัวอักษรหนา

<i> ข้อความ </i> ตัวอักษรเอน

<u> ข้อความ </u> ขีดเส้นใต้ตัวอักษร

<tt> ข้อความ </tt> ตัวอักษรแบบพิมพ์ดีด

หมายเหตุ เราสามารถใช้คำสั่งกำหนดรูปแบบตัวอักษร หลายๆรูปแบบได้ เช่น

<font face = "Arial" size = "3" color = "red"> ข้อความ </font> เป็นต้น

จุดเชื่อมโยงข้อมูล

<a href ="#news"> Hot News </a> ,

<a name ="news">กำหนดจุดเชื่อมชื่อ news ส่วน "a name" คือตำแหน่งที่ลิงค์ไป (เอกสารเดียวกัน)

<a href ="news.html"> Hot News </a> สร้างลิงค์ไปยังเอกสารชื่อ "news.html"

<a href ="http://www.thai.com"> Thai </a> สร้างลิงค์ไปยังเว็บไซต์อื่น

<a href ="http://www.thai.com" target = "_blank" > Thai </a> สร้างลิงค์ไปยังเว็บไซต์อื่น และเปิดหน้าต่างใหม่

<a href ="http://www.thai.com"> <img src = "photo.gif"> </a> สร้างลิงค์โดยใช้รูปภาพชื่อ photo.gif เป็นตัวเชื่อม

<a href ="mailto:yo@mail.com"> Email </a> สร้างลิงค์มายังอีเมล์

การแสดงผลแบบรายการแบบมีหมายเลขกำกับ

<OL value = "1" >

<LI> รายการที่ 1

<LI> รายการที่ 2

</OL>

การแสดงผลแบบรายการ ใช้คำสั่ง <OL> เป็นเริ่มและปิดท้ายด้วย

</OL> ส่วนคำสั่ง <LI> เป็นตำแหน่งของรายการที่ต้องการ

นำเสนอ เราสามารถกำหนดให้แสดงผลรายการได้หลายแบบเช่น

เรียงลำดับ 1,2,3... หรือ I,II,III... หรือ A,B,C,... ได้ทั้งนี้จะต้อง

เพิ่มคำสั่งเข้าไปที่ <OL value = "A"> เป็นต้น

การแสดงผลแบบรายการแบบมีสัญลักษณ์กำกับ

<UL type = "square">

<LI> รายการที่ 1

<LI> รายการที่ 2

</UL>


1.HTML ถูกพัฒนาขึ้นเพื่อใช้งานกับเว็บโดยเฉพาะ และใช้รหัสข้อมูลแบบธรรมดา ทำให้ไฟล์ HTML สามารถใช้ได้กับทุกๆโปแกรม
2.HTML เป็นภาษามาตรฐานเปิด
3.HTML เป็นไฟล์ที่สามารถอ่านเข้าใจ
4.HTML สามารถใช้งานระบบ Hypertext ได้ 
5.HTML สามารถทำงานกับมัลติมีเดีย

ข้อดีของภาษา HTML

1.การเพิ่มเติบออบเจ็กต์หรือส่วนประกอบต่างๆ ใน
HTML มีข้อจำกัด

2.มีข้อจำกัดในการใช้คำสั่ง เนื่องจากไม่สามารถสร้าง
คำสั่งใหม่ๆ ขึ้นมาใช้เองได้ จึงต้องใช้คำสั่งเท่าที่มีอยู่เท่านั้น

ข้อเสียของภาษา HTML
หลักการเขียนภาษา HTML
 
 
 
 
 
 
 
 
 

© 2023 by Lawyer & Lawyer.Proudly created with Wix.com

FOLLOW US:

  • w-facebook
  • Twitter Clean
bottom of page