เอชทีเอ็มแอล (อังกฤษ: HTML ย่อมาจาก Hypertext Markup Language) เป็นภาษามาร์กอัปหลักในปัจจุบันที่ใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ ซึ่งตัวโค้ดจะแสดงโครงสร้างของข้อมูล ในการแสดง หัวข้อ ลิงก์ ย่อหน้า รายการ รวมถึงการสร้างแบบฟอร์ม เชื่อมโยงภาพหรือวิดีโอด้วย โครงสร้างของโค้ดเอชทีเอ็มแอลจะอยู่ในลักษณะภายในวงเล็บสามเหลี่ยม < > เรียกว่า แท็ก (Tag) บันทึกเป็นไฟล์นามสกุล .html หรือ .htm และนำไฟล์ที่เป็น Html ไปเปิดด้วยเว็บเราว์เซอร์
วิธีการเรียกใช้โปรแกรม
Start > All Programs > Accessories > Notepad
<html> <body> |
เป็นบล็อกแรกที่จะต้องมีในเอกสาร และจะครอบคลุมบล็อกต่างๆ คือ เอกสาร html ทุกเอกสารจะต้องขึ้นต้นด้วย <html> และ ปิดท้ายด้วย </html> แต่ละ file และบล็อกอื่นๆ จะถูกเขียนอยู่ในบล็อกนี้ โดยจะมีบล็อกหลักๆ อยู่ 2 บล็อกก็คือ บล็อก head และ body
เป็นส่วนหัวเรื่องของเอกสาร ภายในจำเป็นจะมี บล็อก <title>... </title> ซึ่งจะเป็นแท็กผู้เขียน html นั้นใช้ตั้งเป็นไตเติ้ลสำหรับบอกโดยรวมว่าเอกสารนั้นต้องการเสนออะไร แล้วเวลาที่จะ bookmark ชื่อที่จะ save คือชื่อที่อยู่ใน บล็อก title นี้ ชื่อไตเติ้ลนี้จะต้องมีความยาวไม่เกิน 64 ตัวอักษร
เป็นบล็อกที่บรรจุข้อมูลต่างๆ ที่ต้องการให้แสดงบน browser ไม่ว่าจะเป็น ข้อความ รูป ตาราง หรือแท็กที่ใช้ในการกำหนดรูปแบบของเอกสาร
หลังจากที่ทำการเขียนโปรแกรมไปสักระยะหนึ่ง เราหรือเพื่อนอาจจะนำโปรแกรมที่เขียนขึ้นมานั้นไปพัฒนาต่อ ซึ่งอาจจะลืมเนื้อหาสาระสำคัญแล้วทำให้ดำเนินการเขียนต่อไม่ได้ จึงต้องมีการเขียน comment เพื่อช่วยเตือนความทรงจำได้
สำหรับคำสั่ง comment จะใช้ <! เป็นแท็กเปิด และใช้ > เป็นแท็กปิดข้อความที่อยู่ระหว่าง <!...> จะไม่ถูกแสดงบน เว็บบราวเซอร์
หลักการเขียนภาษา HTML แบบง่ายๆ
1. จัดให้คำสั่งเปิดและปิดในแต่ละชุดคำสั่งอยู่ใน column ตรงกัน
2. ข้อความที่ไม่ยาวมาก ถ้ามีคำสั่งเปิดและปิด ให้เขียนในบรรทัดเดียวกัน
วิธีการนี้จะช่วยให้ลดความผิดพลาดลงได้มาก
4. ข้อความที่อยู่ในคำสั่งเปิดและปิด ให้พิมพ์เยื้องไปทางขวา
5. คำสั่งใดที่อยู่ในคำสั่งเปิดและปิดของคำสั่งอื่น ให้พิมพ์เยื้องไปทางขวามากกว่าเดิมอีก เล็กน้อย
<body bgcolor = #รหัสสี> |
โดยรหัสสีจะมีรูปแบบเป็นเลข 6 หลัก แต่ละหลักแทนด้วยเลขฐาน16 (0-9,A-F) โดยที่เลข 2 หลักแรกแทนค่า สีแดง สองหลักต่อมาแทนค่า สีเขียว สองหลักสุดท้ายแทนค่า สีน้ำเงิน เรามีตัวอย่างรหัสสีมาให้ดู ส่วนสีอื่นๆ ดูได้
สี | รหัสสี |
แดง | #FF0000 |
เขียว | #00FF00 |
น้ำเงิน | #0000FF |
ขาว | #FFFFFF |
ดำ | #000000 |
เทา | #BBBBBB |
การกำหนดสีให้กับตัวอักษร
ถ้าต้องการที่จะกำหนดสีให้กับตัวอักษรทั้งเอกสาร เราจะเพิ่ม Text = #รหัสสี ไว้ในแท็ก body ดังนี้
<body Text = #รหัสสี> |
แต่ถ้าต้องการมีการกำหนดสีของ background อยู่ด้วย เขียนดังนี้
<body bgcolor = #รหัสสี text = #รหัสสี> |
แต่ถ้าต้องการกำหนดสีเพื่อที่จะเน้นข้อความบางข้อความให้แตกต่างจากข้อความอื่น จะมีรูปแบบดังนี้
<font color = #รหัสสี>ข้อความ</font> |
การกำหนดขนาดของตัวอักษร สามารถทำได้เช่นกัน รูปแบบดังนี้
<font size = ตัวเลข>ข้อความ </font>
ตัวเลขจะมีค่าจาก –7 ถึง 7 จากขนาดเล็กไปขนาดใหญ่ ค่ามาตรฐาน คือ +3
เช่น <FONT FACE="-JS Wansika"><FONT SIZE=+3><FONT COLOR="#FF0000">ข้อความ</FONT></FONT></FONT>
หมายเหตุ ถ้าไปดูเว็บไหนแล้วชอบใจเห็นมีลูกเล่นแปลกๆ ... อยากรู้ว่าเขาเขียนยังไง ลองดู source code ของ web นั้นดูได้ โดยที่เมนูของเบราเซอร์คลิกที่ View แล้วไปที่ Source หรือ Page source หรือ Document Source เบราเซอร์ จะแสดง source code ซึ่งก็คือ html ของเอกสารนั้น ลองดู แล้วก็เอามาศึกษาดูว่าถ้าจะเขียนแบบนั้นจะทำได้ยังไง |
ในการนำรูปภาพมาใส่ในเว็บนั้น เป็นวิธีหนึ่งที่จะทำให้ โฮมเพจของเราดูน่าสนใจยิ่งขึ้น แต่ว่าถ้ามีมากไปก็ไม่ไหว เพราะว่ามันจะทำให้โหลดช้าขึ้น คงจะไม่ทันใจสำหรับพวกใจร้อนทั้งหลาย สำหรับแท็กที่ใช้แทรกรูปภาพ จะมีรูปแบบดังนี้
<img src = ชื่อ file รูปภาพ width = ตัวเลข height = ตัวเลข > |
width = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความกว้างของภาพ
height = ตัวเลข : ตัวเลขในที่นี้หมายถึง ความสูงของภาพ
แต่ไม่จำเป็นต้องระบุก็ได้เมื่อไม่ต้องการขยาย หรือย่อภาพนั้น คงจะเคยเห็น เมื่อเราเข้าไปบาง web ในขณะที่เรากำลังรอ load ภาพอยู่นั้น จะมีตัวหนังสืออยู่ตรงบริเวณภาพนั้น เพื่อบอกว่าภาพนั้นเป็นภาพอะไร เราก็ทำได้ เพียงแต่แทรก attribute นี้เข้าไป
alt = "ข้อความ" |
เช่น <IMG SRC="New.JPG" HEIGHT=120 WIDTH=102>
โดยแทรก attribute นี้เข้าไปที่ tag body
background=file รูปภาพ |
เช่น < body BACKGROUND="dao.gif">
เมื่อมี background รูปภาพแล้ว ก็น่าจะมี background เสียงด้วย
ถ้าเพื่อนๆ อยากให้มีตัว play กับ ตัว stop อยู่ที่ตรงไหนใน web ก็แทรก tag นี้เข้าไปได้เลย
<embed src=ชื่อ file เพลง autostart=true volum=10 height=25 width=100 controls=smallconsole></embed> |
เมื่อแทรกแท็กนี้เข้าไปใน page ไหน เมื่อเปิด page นั้นมา ก็จะได้ยินเพลงเลยถ้าอยากจะหยุดเพลงก็เพียงกดที่ตัว stop จะทำให้หยุดเสียง
เช่น <EMBED SRC="com9.mid" AUTOSTART="TRUE" HEIGHT="46" WIDTH="130"></EMBED>
การกำหนดขนาดของตัวอักษรหัวเรื่อง ¨ <Hn>...</Hn> | ||||||
การกำหนดขนาดของตัวอักษร ¨ <FONT SIZE = n>...</FONT> บางครั้งเราจะพบการกำหนดค่า <FONT SIZE = -n> หรือ <FONT SIZE = +n>
การกำหนดชนิดของตัวอักษร รูปแบบ :<FONT FACE= ชื่อของ font SIZE=n>...</FONT> การกำหนดชนิดและ ขนาดของตัวอักษรจะทำให้ผู้อ่านได้เห็นเว็บเพจ ในลักษณะที่ใกล้เคียงกับผู้เขียนต้องการมากที่สุด ทำให้ได้รับอรรถรสที่ผู้เขียนต้องการสื่อมากที่สุด โดยทั่วไปการกำหนดชนิดตัวอักษร อาจทำได้ครั้งละหลายชนิดโดย Browser จะไปหา ชนิดตัวอักษรที่เป็นชื่อแรกก่อน ต่อเมื่อไม่พบจึงจะไปหาตัวที่สอง สาม ต่อไปเรื่อยๆ หากไม่พบก็จะใช้ชนิดตัวอักษรที่ผู้อ่านกำหนดไว้แทน ชนิดตัวอักษรที่กำหนดควรจะเป็นชนิดที่ผู้เขียนต้องการแสดง หรือเป็นชนิดที่ใช้กันอย่างแพร่หลาย สำหรับการกำหนดตัวอักษรไทยมักจะเป็นปัญหาเนื่องจาก ตัวอักษรไทยส่วนใหญ่มีขนาดความสูงน้อยกว่า ตัวอักษรภาษาอังกฤษ หากกำหนดขนาดใหญ่มักจะทำให้มองเห็นตัวอักษรภาษาอังกฤษ ใหญ่เกินไป ชนิดตัวอักษรที่มักจะใช้กันก็คือ · AngsanaUPC,CordiaUPC หรือ ชนิดตัวอักษร ที่ลงท้ายด้วยUPCตัวอื่น ขนาด 14 หรือ 18 pixel (size=4 หรือ 5) · DB ThaiText ขนาด 14 หรือ 18 pixel (size=4 หรือ 5) · MS Sans Serif ขนาด 10 หรือ 12 pixel (size=2 หรือ 3) รูปแบบที่แนะนำ · <FONT FACE= "MS Sans Serif" SIZE=-1>...</FONT> · <FONT FACE= "CordiaUPC,MS Sans Serif" SIZE=-1>...</FONT> · <FONT FACE= "Thonburi,MS Sans Serif" SIZE=-1>...</FONT> รูปแบบตัวอักษร รูปแบบตัวอักษรแบบ Physical Style · <B>...</B> สั่งให้แสดงตัวอักษรแบบหนา · <I>...</I> สั่งให้แสดงตัวอักษรเอน · <U>...</U> ช่วยเน้นข้อความด้วยการขีดเส้นใต้ · <TT>...</TT>สั่งให้แสดงตัวอักษรแบบตัวพิมพ์ดีด(มีความกว้างของแต่ละตัวอักษรเท่ากันหมด) · <SUP>...</SUP>สั่งให้แสดงตัวอักษรยก(superscript) · <SUB>...</SUB>สั่งให้แสดงตัวอักษรแบบห้อย(subscript) รูปแบบตัวอักษรแบบ Logical Style ที่ใช้กันบ่อยๆ เช่น n <ADDRESS>...</ADDRESS> กำหนดให้เป็นตัวอักษรเอน มักใช้กับที่อยู่ n <CITE>...</CITE>สั่งให้แสดงตัวอักษรเอน ในการอ้างอิง n <VAR>...</VAR>สั่งให้แสดงตัวอักษรเอน ระบุตัวแปร n <CODE>...</CODE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนรหัสโปรแกรม n <SAMPLE>...</SAMPLE>สั่งให้แสดงตัวอักษรแบบ monospace ในการเขียนตัวอย่าง n <STRONG>...</STRONG>สั่งให้แสดงตัวอักษรตัวเข้มมีค่าเหมือนกับ <B>...</B> n <BLINK>...</BLINK>สั่งให้แสดงตัวอักษรกระพริบ (ใช้ได้เฉพาะกับ Netscape Navigator) n <MARQUEE>...</MARQUEE>สั่งให้แสดงตัวอักษรวิ่ง (ใช้ได้เฉพาะกับ Internet Explorer) รูปแบบตัวอักษรแบบ พิเศษ ใช้เมื่อเราต้องการ ให้แสดงสัญลักษณ์ที่เราต้องการซึ่งไม่สามารถใช้แป้นพิมพ์โดยตรงได้ ออกมาบนหน้าจอ
|
เราสามารถกำหนดค่าสีได้ 2 แบบ คือ 1. สี="#xxxxxx" ระบุเป็นเลขฐาน 16 (0-9 หรือ A-F โดย 0 มีค่าสีน้อยที่สุด และ F มีค่าสีมากที่สุด) ทั้งหมด 3 ชุด 1 ชุดแทนด้วยตัวอักษร 2 ตัว 2. สี=color ระบุสีลงไปเลย เช่น white,black,blue,red การประยุกต์ใช้ o ระบุสีของพื้นหลัง BGCOLOR = สี | |||
<BODY BGCOLOR = สี> |
| ||
ใช้แทรกไว้ที่ <TABLE> เพื่อกำหนดสีพื้นของ ตาราง |
| ||
<TABLE BGCOLOR = สี> |
| ||
ใช้แทรกไว้ที่ <TD> เพื่อกำหนดสีของ cell |
| ||
<TD BGCOLOR = สี>...</TD> |
| ||
o ระบุสีของวัตถุ COLOR = สี |
| ||
<FONT COLOR = สี>...</FONT> เทคนิคการจัดการรูปภาพ
|
|
ไม่มีความคิดเห็น:
แสดงความคิดเห็น