HTML
----HTML ย่อมาจาก Hyper Text Markup Language----
คือภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน
website หรือที่เราเรียกกันว่า เว็บเพจ
ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft
ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้
หรือที่เรียกว่า "HTML Application"
HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML
สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น
Microsoft FrontPage, Dreamweaver ซึ่งอํานวยความสะดวกในการสร้างหน้า
HTML
ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆ
ปัจจุบันมี โปรแกรม Text
Editor หลายโปรแกรม เช่น
NotePad, EditPlus, Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
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 โดยตรง
2. Attributes
โครงสร้างของหลักของ HTML
<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 อะไรสร้าง
- การประกาศชื่อ ผู้สร้าง
<BODY>.............</BODY>
คือ ส่วนที่เราต้องการนำเสนอข้อมูล ข้อความ ภาพ เสียงต่างๆที่หน้า Webpage
Attribute ของ tag <BODY>
text="สี" กำหนดสีปกติของตัวอักษร-ปกติสีดำ-
link="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link) -ปกติสีน้ำเงิน-
alink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัว link ขณะ link -ปกติสีแดง-
vlink="สี" กำหนดสีของอักษรหรือข้อความหรือขอบรูปที่เป็นตัวเชื่อมโยง(link)ที่เคยเข้าไปแล้ว -ปกติสี ม่วงเข้ม-
bgcolor="สี" กำหนดสีของพื้นหลัง -ปกติสีขาว-
<body text="#FF0000"
bgcolor="#00FF00">
background="ชื่อไฟล์รูปภาพ" กำหนดให้ใช้รูปภาพเป็นพื้นหลัง
background="ชื่อไฟล์รูปภาพ" กำหนดให้ใช้รูปภาพเป็นพื้นหลัง
<body background=" ชื่อเส้นทางที่เก็บรูป"
>
<BR>
ใช้สำหรับกำหนดให้มีการขึ้นบรรทัดใหม่ (Line Break) โดยข้อความที่อยู่หลังคำสั่ง <BR> จะถูกนำไปขึ้นบรรทัดใหม่
ใช้สำหรับจัดวางย่อหน้าข้อความ (Paragraph
Break หรือ Alignment)
โดยข้อความที่อยู่หลังคำสั่ง <P> จะถูกวางย่อหน้าใหม่
โดยข้อความที่อยู่หลังคำสั่ง <P> จะถูกวางย่อหน้าใหม่
เนื้อหาดี เน้นสี ตรง ข้อความสำคัญ หน่อยนะครับ
ตอบลบขอบคุณค่า แก้ไขแล้วนะคะ ;)
ลบ