HTML คืออะไร?
- HTML ย่อมาจาก “Hyper Text Markup Language”
- HTML เป็น Markup Language ชนิดหนึ่ง
- Markup Language คือภาษาที่ใช้ Tags ในการอธิบายความหมายของเนื้อหา
- HTML เป็นภาษาที่ใช้ในการสร้างเว็บเพจ
- เว็บเพจคือหน้าแต่ละหน้าของเว็บไซต์
HTML Tags
- HTML ใช้ Tags ในการอธิบายความหมายของเนื้อหา
- ในการสร้าง HTML Tags ให้เราครอบ “ชื่อ Tag” ด้วยเครื่องหมาย ‘<>’ แบบนี้ <ชื่อ Tag>
- โดยปกติแล้ว เราจะใช้ HTML Tags เป็นคู่ เช่น <header> กับ </header> เนื้อหาอะไรก็ตามที่อยู่ระหว่าง HTML tags คู่นี้จะถือเป็น “header”
- เราจะเรียก HTML Tag ตัวแรกว่า “Tag เปิด” และจะเรียก HTML Tag ตัวหลังว่า “Tag ปิด”
- “Tag ปิด” จะมีหน้าตาคล้ายกับ “Tag เปิด” แต่จะมี ‘/’ เพิ่มมาที่หน้า “ชื่อ Tag”
- อย่างไรก็ตาม HTML Tag บางตัวจะมีแค่ “Tag เปิด” เท่านั้น เช่น <br> ที่หมายถึงการขึ้นบรรทัดใหม่ จะเห็นว่า <br> มีความหมายสมบูรณ์ในตัวอยู่แล้ว ไม่ต้องเอามันไปครอบเนื้อหาอะไรอีก
HTML Elements
- เราจะเรียก “Tag เปิด”, เนื้อหาที่อยู่ภายใน และ “Tag ปิด” รวม 3 อย่างนี้ว่า “HTML Elements”
- “HTML Elements” ก็คือสิ่งที่ “HTML Tag” สร้างขึ้นมา ซึ่งมันก็คือเนื้อหาที่มีความหมายนั่นเอง
HTML Attributes
- HTML Elements ต่างๆ สามารถใส่ “Attributes(ลักษณะ)” เพิ่มได้ โดยเราจะใส่ Attributes หากต้องการระบุลักษณะเพิ่มเติมเกี่ยวกับ HTML Elements นั้นๆ
- Attributes ของ HTML Elements จะใส่ไว้ที่ “Tag เปิด” เสมอ
- Attributes จะประกอบไปด้วย “ชื่อของ Attribute” และ “ค่าของ Attribute”
- Attributes ของแต่ละ HTML Elements จะแตกต่างกันออกไป
- ลองดูตัวอย่างนี้ <คน เพศ=”ชาย” อายุ=”56″>Steve Jobs</คน> จะได้ว่า HTML Elements นี้มีชื่อว่า “คน” และมี Attributes เป็น “เพศ” และ “อายุ” จะเห็นว่า Attributes ช่วยทำให้ความหมายของ HTML Elements มีความชัดเจนยิ่งขึ้น
โครงสร้างของเว็บเพจ
มาถึงตรงนี้ เรารู้แล้วว่าเราจะต้องใช้ HTML ในการสร้างเว็บเพจ ทีนี้เราลองมาดูกันว่าโครงสร้างของเว็บเพจนั้นประกอบไปด้วยอะไรบ้าง
- <!DOCTYPE html>ส่วนนี้จะเป็นการระบุ version ของ html ที่เราจะเขียน โดยเราจะต้องใส่ส่วนนี้เอาไว้ที่บนสุดของเว็บเพจเสมอ
- <html>ส่วนนี้จะอยู่ต่อจาก <!DOCTYPE html> เราจะต้องใส่ HTML Elements ต่างๆ ไว้ในส่วนนี้
- <head>ส่วนนี้จะอยู่ภายใน <html> อีกที เราจะต้องใส่ HTML Elements ที่ใช้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจไว้ในส่วนนี้
- <body>ส่วนนี้จะอยู่ต่อจาก <head> เราจะต้องใส่ HTML Elements ที่เราอยากให้มันแสดงผลออกมาไว้ในส่วนนี้
|
|
<!DOCTYPE html>
<html>
<head>
โค้ดที่อยู่ในนี้จะเอาไว้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจ
</head>
<body>
โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ
</body>
</html>
|
Workshop – สร้างเว็บเพจแรกของคุณ!
ตอนนี้เรารู้แล้วว่าโครงสร้างของเว็บเพจประกอบด้วยอะไรบ้าง ให้เราจำโครงสร้างนี้เอาไว้ให้ดี เพราะถ้าเราจำได้แล้ว สิ่งที่เหลือก็แค่เลือก HTML Elements มาใส่ในช่อง <head> และ <body> เท่านั้นเอง ลองมาดูสิว่า HTML Elements ที่เราต้องใช้บ่อยๆ มีอะไรบ้าง
Title
อย่างแรกเรามาดูการใส่ Title ของเว็บเพจกันเลยครับ ให้เราครอบชื่อ Title ของเราด้วย <title></title> แล้วเอาไปใส่ไว้ใน <head></head> ลองดูตัวอย่างนี้ครับ
|
|
<!DOCTYPE html>
<html>
<head>
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ
</body>
</html>
|
เมื่อลองพรีวิวดู เนื้อหาที่เราใส่ไปทั้งในส่วนของ <title> และในส่วนของ <body> กลับอ่านไม่ออก ทั้งนี้เป็นเพราะเรายังไม่ได้กำหนดการเข้ารหัสของตัวอักษรให้เป็นแบบ UTF-8 นั่นเอง
Meta
ในการทำให้ web browsers อ่านภาษาไทยออก เราจะต้องกำหนด “Character Sets” ให้เป็น UTF-8 ก่อน ให้เราใส่ “<meta charset=”UTF-8″ >” เข้าไปใน <head></head> แบบนี้ครับ
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ
</body>
</html>
|
เมื่อลองพรีวิวดูอีกครั้ง เราก็จะพบว่าภาษาไทยสามารถแสดงผลได้อย่างถูกต้องแล้ว
Headings
ทีนี้เราลองมาดูการใส่ “heading (หัวข้อ)” ให้กับเนื้อหากันบ้างครับ heading นั้นจะแบ่งระดับความสำคัญออกเป็น 6 ระดับ ด้วยกัน ได้แก่ <h1>, <h2>, <h3> ไล่ไปจนถึง <h6> ให้เราลองเอา Tags เหล่านี้ไปครอบหัวข้อของเราดูครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
<h1>หัวข้อ</h1>
<h2>หัวข้อ</h2>
<h3>หัวข้อ</h3>
<h4>หัวข้อ</h4>
<h5>หัวข้อ</h5>
<h6>หัวข้อ</h6>
</body>
</html>
|
เมื่อลองพรีวิวดู เราจะเห็นว่าหัวข้อของเรามีขนาดที่แตกต่างกัน โดยหัวข้อที่ครอบด้วย <h1> นั้นจะมีขนาดใหญ่สุด ส่วนหัวข้ออื่นๆ ก็จะมีขนาดเล็กลงมาเรื่อยๆ จนมาเล็กสุดที่หัวข้อที่ครอบด้วย <h6> ครับ
Paragraphs
เมื่อได้หัวข้อแล้ว เรามาต่อกันที่การสร้าง “Paragraph (ย่อหน้า)” ครับ ให้เราครอบเนื้อหาที่เป็น Paragraph ด้วย <p></p> ลองดูตัวอย่างนี้
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
<h1>หัวข้อ</h1>
<p>Siam HTML เป็นเหมือนสังคมออนไลน์ของเพื่อนๆ Web Developer ที่จะนำประสบการณ์ ความรู้ หรือเทคนิคต่างๆ มาแบ่งปันกัน เป็นที่ๆ พวกเราทุกคน จะช่วยกันสร้างสรรค์วงการเว็บไซต์ของไทยให้พัฒนาไม่แพ้ชาติอื่นๆ และยังเป็นแหล่งความรู้ สำหรับนักพัฒนาเว็บไซต์หน้าใหม่ ที่จะช่วยส่งเสริมให้การพัฒนาเว็บไซต์ในไทยแพร่หลายมากยิ่งขึ้น</p>
<p>Siam HTML ยินดีเปิดรับบทความของเพื่อนๆ ทุกคน หากบทความของคุณสร้างสรรค์ แปลกใหม่ ไม่ซ้ำใคร หรือแค่คิดว่ามีประโยชน์กับเพื่อนๆ นักพัฒนาเว็บไซต์ด้วยกันก็ลงมือเขียนได้เลย!!!</p>
</body>
</html>
|
เมื่อลองพรีวิวดู จะเห็นว่าการครอบเนื้อหาด้วย <p></p> ทำให้ช่องว่างด้านบนและด้านล่างของเนื้อหาเพิ่มขึ้น ซึ่งจะเหมาะมากในการใช้แบ่งเนื้อหาออกเป็นพารากราฟ เพื่อให้อ่านได้ง่ายขึ้น
Links
สิ่งที่ขาดไม่ได้เลยสำหรับการทำเว็บก็คือการสร้าง “Link” นั่นเองครับ โดยเราจะใช้ <a></a> มาครอบข้อความที่ต้องการให้เป็น Link แล้วใส่ Attribute ที่ชื่อว่า “href” เพิ่มเข้าไปที่ <a> แล้วระบุค่าของ “href” ให้เป็น “URL” ที่เราต้องการจะให้ Link ไป ลองดูตัวอย่างนี้ครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
<h1>สอนทำเว็บไซต์</h1>
<p>
เรียนทำเว็บไซต์ Web Design ฟรี! ที่
<a href="http://www.siamhtml.com">SiamHTML.com</a>
</p>
</body>
</html>
|
เมื่อลองพรีวิวดู เราจะเห็นว่าข้อความ “SiamHTML.com” กลายเป็น Link ไปแล้วครับ เมื่อลองกดดู มันก็จะ Link ไปยัง “URL” ที่เราได้กำหนดไว้ด้วย Attribute “href” ครับ
Images
สิ่งสำคัญอีกอย่างหนึ่งในการทำเว็บก็คือ “รูปภาพ” ครับ ในการใส่รูปในหน้าเว็บ เราจะใช้ “<img>” ซึ่งเป็น HTML Tag ที่มีแต่ “Tag เปิด” เพียงอย่างเดียว ส่วนรายละเอียดต่างๆ ไม่ว่าจะเป็น URL รวมไปถึงความกว้างและความสูงของรูป ให้เรากำหนดโดยใช้ Attributes ครับ ในส่วนของ URL ให้เราใช้ “src” ส่วนความกว้างและความสูงของรูปให้เราใช้ “width” และ “height” ตามลำดับ ลองดูตัวอย่างนี้ครับ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>สอนทำเว็บไซต์ by Siam HTML</title>
</head>
<body>
<h1>สอนทำเว็บไซต์</h1>
<a href="http://www.siamhtml.com">
<img src="http://www.siamhtml.com/wp-content/uploads/2013/09/siamhtml.png" width="240" height="192">
</a>
<p>
เรียนทำเว็บไซต์ Web Design ฟรี! ที่
<a href="http://www.siamhtml.com">SiamHTML.com</a>
</p>
</body>
</html>
|
เมื่อลองพรีวิวดู เราก็จะเห็นรูปที่เราใส่ไปแล้วล่ะครับ
ทำเว็บเป็นแล้ว แต่ทำไมไม่สวยเลย?
มาถึงตอนนี้ คาดว่าหลายๆ คน คงจะบ่นว่าทำไมเว็บของเราไม่เห็นสวยเหมือนชาวบ้านเลย ไม่ต้องน้อยใจไปครับ สำหรับวันแรกของการทำเว็บไซต์ ได้ขนาดนี้ก็ถือว่าโอเคมากๆ แล้ว ในวันพรุ่งนี้ เราจะมาพูดถึง
การตกแต่งหน้าเว็บให้สวยงามโดยใช้ CSS กัน อย่าลืมติดตามให้ได้นะครับ
