HTML Tag พื้นฐาน
HTML
ย่อมาจาก Hyper Text Markup
Language
ใช้โปรแกรม Text Editor เช่นจาก Notepad หรือ Word pad ในการสร้างHTML
เปิดเอกสาร การแสดงไฟล์เอกสาร การแสดงไฟล์เอกสาร HTML มี 2 วิธีคือ
1. การแสดงไฟล์เอกสาร โดยเปิดผ่าน IE มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ IE แล้วเลือกเมนู File ,Open , Brows - เลือกชื่อไฟล์ที่ต้องการเปิด, Open , OK
2. การแสดงไฟล์เอกสาร HTML โดยตรง มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ชื่อไฟล์เอกสารนั้น - จะปรากฏผลลัพธ์ของไฟล์เอกสาร HTML ผ่านเว็บบราวเซอร์ การเปิดดู CODE ภาษา HTML เมื่อแสดงบนเว็บบราวเซอร์ - เลือกเมนู View , Source
Text Editor
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
โปรแกรม Notepad
องค์ประกอบของ html
2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title>และเก็บแท็กพิเศษอื่น ๆ
3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมดซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น
ใช้โปรแกรม Text Editor เช่นจาก Notepad หรือ Word pad ในการสร้างHTML
เปิดเอกสาร การแสดงไฟล์เอกสาร การแสดงไฟล์เอกสาร HTML มี 2 วิธีคือ
1. การแสดงไฟล์เอกสาร โดยเปิดผ่าน IE มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ IE แล้วเลือกเมนู File ,Open , Brows - เลือกชื่อไฟล์ที่ต้องการเปิด, Open , OK
2. การแสดงไฟล์เอกสาร HTML โดยตรง มีขั้นตอนดังนี้ - ดับเบิ้ลคลิกที่ชื่อไฟล์เอกสารนั้น - จะปรากฏผลลัพธ์ของไฟล์เอกสาร HTML ผ่านเว็บบราวเซอร์ การเปิดดู CODE ภาษา HTML เมื่อแสดงบนเว็บบราวเซอร์ - เลือกเมนู View , Source
Text Editor
คือ โปรแกรมที่ใช้สำหรับสร้างและแก้ไขข้อความในการสร้างเว็บเพจด้วยภาษา HTML นั้นต้องมีเครื่องมือที่ใช้ในการเขียน และแก้ไขตัวอักษรซึ่งเป็นคำสั่งต่าง ๆปัจจุบันมี โปรแกรม Text Editor หลายโปรแกรม เช่น NotePad, EditPlus หรือโปรแกรม Dreamweaver ซึ่งมีคุณสมบัติเป็นทั้งโปรแกรมสำเร็จรูปในการสร้างเว็บเพจด้วย
โปรแกรม Notepad
โปรแกรม EditPlus
โปรแกรม Macromedia Dreamweaver
โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่วน คือ
1. ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML ซึ่งจะมีแท็ก <html>…</html> กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแฟ้มข้อมูล2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title>และเก็บแท็กพิเศษอื่น ๆ
3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมดซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น
คือ คำสั่งเริ่มต้น คำสั่ง HTML จะถือเป็นคำสั่งเริ่มต้นของการเขียน HTML จะบอกเว็บบราวเซอร์ให้รู้ว่านี่เป็นเอกสาร HTML
<head>
คือ ส่วนหัว เป็นคำสั่งที่ใช้กำหนดข้อความในส่วนที่เป็นชื่อเรื่อง ซึ่งจะมีคำสั่งย่อยลงไปอีกหนึ่งคำสั่งคือ <TITILE>
<title>
คือ การกำหนดข้อความใน Title bar คำสั่งนี้ เป็นส่วนที่จะแสดงชื่อของเอกสาร ที่จะปรากฏในขณะที่ไฟล์ HTML นั่นทำงานอยู่ ข้อความนี้จะถูกนำไปแสดง ในส่วนของ Title Bar สำหรับโปรแกรม Mosaic จะแสดงไตเติลที่ทูลบาร์ข่างล้างเมนูหลัก
คือ ส่วนเนื้อหา,คำสั่งต่างๆ ส่วนนี้เป็นส่วนสำคัญในการแสดงผล ในการเขียน HTML เราอาจจะไม่เขียนคำสั่งในส่วนที่เป็นส่วนหัวก็ได้ แต่ถ้าเป็นส่วนนึ้จะไม่เขียนไม่ได้
<BR>
คือ คำสั่งขึ้นบรรทัดใหม่โดยตัวคำสั่งจะใช้เพียงตัวเดียวไม่ต้องใช้ 2 ตัวเหมือนคำสั่งอื่น อยู่ภายในคำสั่ง <body>
<P>
คือ คำสั่งขึ้นย่อหน้าใหม่ใช้กับข้อความ โดยใช้เพียวตัวเดียวแทรกในข้อความ ภายในคำสั่ง<body>
ตัวอย่าง
<HTML>
<HEAD>
<TITLE>การกำหนดขนาดตัวอักษร </TITLE>
</HEAD>
<BODY>
<FONT SIZE=6>
นี่คือขนาดตัวอักษร = 6 <BR>
</FONT>
<FONT SIZE=5>
นี่คือขนาดตัวอักษร = 5 <BR>
</FONT>
<FONT SIZE=4>
นี่คือขนาดตัวอักษร =4 <BR>
</FONT>
<FONT SIZE=2>
นี่คือขนาดตัวอักษร =2 <BR>
</FONT>
</BODY>
</HTML>
ผลที่ได้
นี่คือขนาดตัวอักษร = 6นี่คือขนาดตัวอักษร = 5
นี่คือขนาดตัวอักษร = 4
นี่คือขนาดตัวอักษร = 2
การกำหนดตัวอักษร
การกำหนดตัวอักษรเป็นหัวเรื่อง กำหนดโดยใช้ Tag<hn> ซึ่งมีขนาด 1 – 7 โดยเรียงจากใหญ่ไปเล็กรูปแบบคำสั่ง HTML ในการกำหนดตัวอักษรเป็นหัวเรื่อง <hn>ข้อความ</hn>
<HTML>
<HEAD>
<TITLE> การกำหนดตัวอักษรเป็นหัวเรื่อง</TITLE>
</HEAD>
<BODY>
<h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
<h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
<h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
<h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
<h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
<h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
<h7>การกำหนดตัวอักษรเป็นหัวเรื่อง H7 ขนาด 7</h7>
</BODY>
</HTML>
<HEAD>
<TITLE> การกำหนดตัวอักษรเป็นหัวเรื่อง</TITLE>
</HEAD>
<BODY>
<h1>การกำหนดตัวอักษรเป็นหัวเรื่อง H1 ขนาด 1 </h1>
<h2>การกำหนดตัวอักษรเป็นหัวเรื่อง H2 ขนาด 2</h2>
<h3>การกำหนดตัวอักษรเป็นหัวเรื่อง H3 ขนาด 3</h3>
<h4>การกำหนดตัวอักษรเป็นหัวเรื่อง H4 ขนาด 4</h4>
<h5>การกำหนดตัวอักษรเป็นหัวเรื่อง H5 ขนาด 5</h5>
<h6>การกำหนดตัวอักษรเป็นหัวเรื่อง H6 ขนาด 6</h6>
<h7>การกำหนดตัวอักษรเป็นหัวเรื่อง H7 ขนาด 7</h7>
</BODY>
</HTML>
ผลลัพธ์ที่ได้
อ้างอิง
http://guru.google.co.th/guru/thread?tid=765abefbc7fb4de5
http://school.obec.go.th/pp_school/html/editor.html
http://www.twebmaster.com/viewArticle.php?id=1
http://school.obec.go.th/pp_school/html/html_stu.html
http://tc.mengrai.ac.th/paisan/e-learning/HTML/html.htm
http://www.webthaidd.com/html/webthaidd_article_295_.html
http://school.obec.go.th/krurenu/html/p2-4.html
วันที่ 6 มิถุนายน 2555
