วันอาทิตย์ที่ 2 สิงหาคม พ.ศ. 2558

Quotation และ การอ้างอิง ใน HTML

Quotation ของ HTML

การใส่ Quotations แบบสั้นๆ หรือ ".."
ตัวอย่าง
<p><q>ทุกคนล้วนตายไม่ว่าใครก็ตาม</q></p>

การใส่ Quotation แบบยาว
ตัวอย่าง
<p>บทความนี้สำคัญลองอ่านดู</p>
<blockquote
cite="https://www.facebook.com/adminoeve">
อยากให้กาแฟหวาน ต้องเติมน้ำตาล
อยากได้ความรักที่ยาวนาน...ให้มาหาเรา
</blockquote>

เมื่อเราย่อข้อความเราควรทำให้เวลาเอาเมาส์ไปชี้ข้อความที่ย่อแล้วแสดงข้อความที่เต็ม
<abbr>
ตัวอย่าง
<p><abbr title="Hyper Text Markup Language">HTML </abbr> </p>

การใส่ข้อมูลแบบที่อยู่ <address>
ตัวอย่าง
<address>
เขียนโดย นักเขียน ระดับโลก<br>
999/9 , พะเยา<br>
ประเทศไทย
</address>

การใส่หัวเรื่อง <cite>
ตัวอย่าง
<p><cite>สิ่งสวยงาม</cite> โดย นักวาด ระดับโลก เขียนเมื่อปี 1990

การทำตัวอักษรสลับไปมา หรือเรียกว่า Bi-Directional Overide
ตัวอย่าง
<bdo dir="rtl">นี้เป็นข้อความที่ถูกกลับ</bdo>

Formatting Elements ของ ข้อความ ใน HTML

การ Formatting ข้อความ

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

การทำตัวหนังสือให้หนา และ Strong

ตัวอย่าง

<p> นี้เป็นตัวหนังสือปกติ</p>
<p><b>นี้เป็นตัวหนังสือที่หน้าขึ้นแล้ว</b></p>

การทำตัวหนังสือให้มีความสำคัญ ก็จะมีลักษณะเช่นเดียวกับการทำตัวหนังสือหนา
ตัวอย่าง
<p>นี้เป็นข้อความธรรมดา</p>
<p><strong>นี้เป็นความความ strong แล้ว </strong></p>

การทำตัวหนังสือเอียงมีสองแบบคือ ltalic และ Emphasized
ตัวอย่าง
<p>นี้เป็นข้อความธรรมดา</p>
<p><i>นี้เป็นข้อความที่เป็นตัวเอียงแล้ว</i></p>

มีการทำให้ตัวหนังสือเอียงอีกวิธีคือ Emphasized
ตัวอย่าง
<p>นี้เป็นข้อความธรรมดา</p>
<p><em>นี้เป็นข้อความที่ทำให้ตัวหนังสือเอียงแล้ว</em><p>

*Browsers จะแสดง <strong> เหมือนกับ <b> และ <em> เหมือนกับ <i>
อย่างไรก็ตาม ความหมายจะแตกต่างกัน
<b> และ <i> บอกว่าตัวหนังสือหนาและเอียง
แต่ <strong> และ <em> มีความหมายความเป็นข้อความที่มีความสำคัญ

การทำ Small Formatting
เป็นการทำตัวหนังสือมีขนาดที่เล็กลง
ตัวอย่าง
<h1><small>ข้อความนี้ก็จะถูกทำให้เล็กลง</small></h1>

การทำ Marked Formatting
เป็นการทำให้ตัวหนังสือถูกเน้นข้อความขี้นมา(จะเป็นสีเหลืองทับตัวหนังสือ)
ตัวอย่าง
<p><mark>นี้เป็นส่วนสำคัญ<mark></p>

การทำ Deleted Formatting
เป็นการทำให้ความข้อนั้นถูกขีดฆ่า
ตัวอย่าง
<p><del>สีแดง</del>ไม่ถูกต้องต้องเป็นสีฟ้า</p>

การทำ Subscript Formatting
เรียกอีกอย่างได้ว่าเป็นการทำตัวหนังสือที่ห้อยลงมา
ตัวอย่าง
<p>โมเลกุลของน้ำมีสูตรดังนี้ H<sub>2</sub>O</p>

การทำ Superscript Formatting
หรือเรียกอีกอย่างว่า การทำตัวหนังสือยกขึ้น
ตัวอย่าง
<p>สองยกกำลังห้า สามารถเขียนได้เป็น <sup>2</sup>5 </p>

วันเสาร์ที่ 1 สิงหาคม พ.ศ. 2558

Styles ใน HTML

HTML Styling

ในทุกๆ Element จะ มีพื้นฐานของ Style ( เช่น พื้นหลังเป็นสีขาวตัวหนังสือจะเป็นสีดำ)

การเปลี่ยน style Element สามารถใช้ style attribute.

ตัวอย่าง

นี้คือข้อความที่อยู่ใน body

</body>

ดังตัวอย่างที่เห็นเป็นการเปลี่ยนสีพื้นหลังให้เป็นสีแดง

จะมี attribute bgcolor แต่ตัวนี้จะใช้กับ HTML5 ไม่ได้ ใช้ได้เฉพาะ HTML

ไวยากรณ์ ของ HTML style attribule มีดังนี้

style="property:value"

property คือ CSS property และ value คือ CSS value.

เราจะสอนเรื่อง CSS อีกที

เปลี่ยนสีตัวหนังสือใน HTML

property ของ color สามารถใช้ได้กับ element html
ตัวอย่าง

<h1 style="color:blue">นี้คือส่วนหัวเรื่อง เป็นตัวสีน้ำเงิน</h1>
<p style="color:red">นี้คือส่วนที่เป็น paragraph ตัวหนังสือจะเป็นสีแดง</p>

เปลี่ยน fonts ใน HTML
property ของ font-family สามารถใช้ได้กับ element HTML
ตัวอย่าง
<h1 style="font-family:verdana"> นี้คือส่วนหัวจะเป็น font ของ verdana </h1>
<p style="font-family:courier"> นี้เป็นส่วนของ Paragraph เป็น font ของ courier</p>

tag <font> ไม่สนับสนุนใน HTML5 แต่ยัง สนับสนุน HTML เวอร์ชั่นที่เก่าอยู่

เปลี่ยนขนาดของตัวหนังสือ
property ของ font-size สามารถใช้ได้กับ element HTML
ตัวอย่าง

<h1 style="font-size:300%> นี้คือส่วนหัว </h1>
<p style="font-size:160%> นี้คือส่วน Paragraph </p>

เปลี่ยนตำแหน่งของตัวหนังสือ
property ของ text-align ปกติก็จะกำหนดให้อยู่ในแนวนอน แต่เราสามารถทำให้อยู่กลางได้
ตัวอย่าง
<h1 stype="text-align:center">หัวข้อนี้จะอยู่ตรงกลาง</h1>
<p>นี้ก็เป็นข้อความใน paragraph </p>

tag <center> ไม่สามารถใช้ได้ใน HTML5 ได้แล้ว แต่ก็ยังใช้ได้ใน HTML รุ่นเก่ากว่า

วันศุกร์ที่ 31 กรกฎาคม พ.ศ. 2558

จัด Paragraphs ใน HTML

tag <p>...</p> ที่ย่อมาจาก Paragraphs

ไม่ว่าใน code จะเว้นวรรคกี่บรรทัด tag <p>...</p> ก็จะจัดใช้อยู่ชิดกัน หมายถึงไม่ว่าจะ มีกี่ spaesbar (เคาะ) tag <p>...</p> ก็จะทำให้มี ระยะห่างของตัวหนังสือ 1 ช่องเท่านั้น

แต่ละครั้งที่ใช้ tag <p>...</p> ก็จะมีการเว้นบรรทัดให้ทุกครั้งในแต่ละ tag p นั้นๆ

อย่าลืมว่า tag <p>...</p> ต้องมี tag เปิดและลงท้ายต้วย tag ปิดอยู่เสมอ

เวลาจะเว้นบรรทัดเองควรใช้ tag <br />

รู้จักกับ tag <pre>...</pre>

จะแสดงผลเหมือนกับตอนที่เราเขียนใน code หากข้อความใน code มีการเว้นบรรทัด tag <pre>...</pre> ก็จะเว้นบรรทัดให้ด้วย หากใน code ไม่มีการเว้นบรรทัด tag <pre>...</pre> ก็จะไม่เว้นให้เหมือนกัน

วันพฤหัสบดีที่ 30 กรกฎาคม พ.ศ. 2558

Headings ใน HTML คือไรกัน

tag headdings มีทั้งหมด 1-6 คือจะมี

<h1>...</h1> ไปจนถึง <h6>...<h6>

ค่า h1 จะใหญ่สุด

ค่า h6 จะเล็กที่สุด

แสดงตัวอย่าง code ดังนี้

<h1>ข้อความนี้ได้ใส่ tag h1</h1>

<h2>ข้อความนี้ได้ใส่ tag h2</h2>

<h3>ข้อความนี้ได้ใส่ tag h3</h3>

<h4>ข้อความนี้ได้ใส่ tag h4</h4>

<h5>ข้อความนี้ได้ใส่ tag h5</h5>

<h6>ข้อความนี้ได้ใส่ tag h6</h6>

ผลที่ได้คือ

ข้อความนี้ได้ใส่ tag h1

ข้อความนี้ได้ใส่ tag h2

ข้อความนี้ได้ใส่ tag h3

ข้อความนี้ได้ใส่ tag h4

ข้อความนี้ได้ใส่ tag h5

ข้อความนี้ได้ใส่ tag h6

การใช้ headings นั้นควรใช้เมื่อข้อความนั้นเป็นหัวข้อหรือรองหัวข้อจริงๆ หากต้องการให้ตัวหนังสือใหญ่ก็ให้ tag <big>...</big> หรือ tag <b>...</b>

ต่อมาจะเป็นการพูดถึงเรื่อง tag <hr />

ข้างล่างนี้เป็นการแสดง tag <hr />

<hr />

ผลที่ได้ดังรูปด้านล่างนี้

tag <head>...</head>

เป็น tag ส่วนหัว ส่วนใหญ่เก็บ tag

<title>...</title> , <meta /> หรือ พวก <skip >...</skip > ต่างๆ

จำไว้ว่า tag <head>...</head> ไม่ใช่ heading

tag <title>...</title> จะเอาไว้ใส่ข้อความบน bar ของหน้าต่างนั้นๆ

tag <stype>...</stype> ใช้สำหรับเขียน css file นั้น

tag <link /> ใช้สำหรับเขียน css ที่อยู่นอก file

เทคนิคในการ view source ควร view Broser ตัวหลัก เช่น ของ IE Chome Opara Frifox

วันอังคารที่ 28 กรกฎาคม พ.ศ. 2558

Attributes คืออะไรใน HTML

ทำความรู้จักกับ Attributes

-ในแต่ละ element จะมี attributes

element html อาจมี attributes lang

ตัวอย่าง

จาก code ข้างบนหมายถึงให้หน้า html นี้เป็น ภาษา US

-การมี attributes ทำให้ element มีความซับซ้อนมากขึ้น

เช่น การใส่ attributes title ใน element p ก็จะทำให้เมื่อเอาเมาส์ไปชี้ที่ ที่อยู่ใน element p จะทำให้เกิดข้อความที่ได้กำหนดใน title ได้

ตัวอย่าง

-a tag ก็จะมี href เป็น attributes เพื่อกำหนดหน้าที่จะลิงค์ไป

ตัวอย่าง

-img tag ก็จะมี src,width,height เป็น attributes

ซึ่ง attributes srcก็จะกำหนดตำแหน่งที่รูปภาพอยู่

attributes width และ height ก็กำหนด ความกว้างและความ สูงเช่นกัน

ตัวอย่าง

-การเขียน attributes แนะนำให้เขียนเป็นตัวพิมพ์เล็กเพื่อจะทำให้เวลากลับมาอ่าน code จะอ่านได้ง่าย

-value คืออะไร

value คือค่าที่อยู่ใน attributes

ตัวอย่าง

ใน tag a นี้ value คือ www.google.com

attributes

-การใส่ค่า value ใน attributes แนะนำให้ใส่ Quote

ตัวอย่าง

Element ของ HTML คืออะไรกัน?

ข้อความระหว่าง tag เปิด/ปิด เราเรียกว่า content

ตัวอย่าง. tag <b>...</b>

<b>นี่เรียกว่า content</b>

ถ้ามี

<html>

<head>

<body>

</body>

</html>

จากโครงสร้างด้านบน เราเรียกว่ามี 3 element คือ

<html>...</html>
<head>...</head>
<body>...</body>

มีแค่สามตัว ก็มี 3 element

หากเราได้เปิด tag แล้ว เราต้องเปิด tag เสมอ

ตัวอย่าง <html>.....</html>

นิดหน่อย HTML 5 ไม่จำเป็นต้องใช้ tag ตัวพิมพ์เล็ก จะใช้ตัวพิมพ์เล็กพิมพ์ใหญ่ได้เหมือนกัน

ตัวอย่าง.

สามรูปแบบนี้สามารถใช้ได้หมด

พื้นฐานการเขียนภาษา HTML

มารู้จักกับพื้นฐานการเขียนภาษา HTML กันก่อน

อย่างแรกต้องรู้จักกับ HTML heading

tag <h>....</h> คือ tag ที่กำหนดขนาดของตัวหนังสือให้เล็กหรือใหญ่ จุดประสงค์ของ tag นี้คือเอาไว้ใส่เป็นหัวข้อนั้นเอง

ตัวอย่างการใช้ tag <h>.....</h>

<h1>ตัวอย่าง heading h1</h1>

<h2>ตัวอย่าง heading h2</h2>

<h3>ตัวอย่าง heading h3</h3>

<h4>ตัวอย่าง heading h4</h4>

<h5>ตัวอย่าง heading h5</h5>

<h6>ตัวอย่าง heading h6</h6>

ผลที่ได้คือ

ตัวอย่าง heading h1

ตัวอย่าง heading h2

ตัวอย่าง heading h3

ตัวอย่าง heading h4

ตัวอย่าง heading h5

ตัวอย่าง heading h6

ข้อสังเกตคือ

1.จะเห็นได้ว่า tag <h1> จะมีตัวหนังสือที่ใหญ่สุดส่วน h6 จะมีตัวหนังสือที่เล็กที่สุด

2.เมื่อเปิด tag <h>...</h> ก็จะมีการปิด tag อยู่เสมอ

ต่อมารู้จักกับ tag <p>...</p>

Tag <p>...</p> ใช้เพื่อให้ข้อความที่เราจะเขียนอยู่เป็นหมวดหมู่

tag <p>...</p> สามารถใส่ข้อความได้และมีการเว้นบรรทัดให้เอง
ไม่ว่าข้อความจะมีการเว้นวรรคยาวแค่ไหน tag <p>...</p> ก็จะจัดให้อยู่ช่องมีการเว้นวรรคเพียงช่องเดียวเท่านั้น

ตัวอย่างข้อ tag <p>...</p>

<p>ข้อ ความ นี้ อยู่ ใน tag p</p>

ผลที่ได้คือ

ข้อความนี้อยู่ใน tag p

ข้อสังเกตคือ

1.จากที่มีการเว้นวรรคหน่างกันแค่ไหน tag <p>...</p> ก็จะจัดรูปใหม่ให้ข้อความอยู่ติดกันเสมอ

2.เอาเป็นว่าขอพูดที่เดียวเลยละกัน ทุก tag จะต้องมี tag ปิด เสมอ

รู้จักกับ tag <a>...</a>

tag <a>...</a> เป็น tag ที่ไว้สำหรับลิงค์ข้อความ tag <a>...</a> จำเป็นต้องมี Attributes คือ href เพื่อใช้ลิงค์ไปยังที่ๆต้องการ
ในที่นี้เป็นการ link ไปยังเว็บ www.google.com

<a href="https://www.google.com/">กดที่นี้ เพื่อลิงค์ไปยังเว็บ google.com</a>

ผลที่ได้คือ

กดที่นี้ เพื่อลิงค์ไปยังเว็บ google.com

ข้อสังเกตคือ

1.ตัวหนังสือจะมีขีดเส้นใต้ขึ้นมา
2.เมื่อเอาเมาส์ไปชี้เมาส์จะเปลี่ยนเป็นรูปมือ
3.เมื่อคลิกแล้ว ก็จะไปยังหน้าเว็บไซต์ google ตามที่เราเขียนโค้ดไว้

ต่อมารู้จักกับการใส่รูปภาพในเว็บ

การใส่ภาพในเว็บต้องใช้ tag <img />

tag <img /> มี Attributes เพื่มเติมคือ src ,alt, width, height

src = ตำแหน่งรูปภาพนั้นๆ

alt = หากว่ารูปภาพไม่แสดงจะปรากฏข้อความแทน

width = ความกว้างของรูปภาพ

height = ความสูงของรูปภาพ

width, height จะใช้เป็น px ตามตัวอย่างก็ได้ หรือ จะใช้เป็น % ก็ได้

หรือจะใช้ auto ก็ได้

ตัวอย่าง

ผลที่ได้คือ

วันจันทร์ที่ 27 กรกฎาคม พ.ศ. 2558

โปรแกรมเขียน HTML5

ในการเขียนภาษา HTML5 สามารถใช้โปรแกรมเขียนได้หลายโปรแกรม

ง่ายๆเลย ก็ notepad เป็นที่รู้กันว่ามากับ windows อยู่แล้ว

บางคนก็ชอบ ใช้ subline โปรแกรมนี้ใช้งานได้เกือบฟรีเขียนง่ายที่บอกว่าง่ายคือ subline จะมีชุดคำสั่ง html มาให้ด้วย

อีกตัวก็จะเป็น notepad++ ตัวนี้ก็ใช้งานง่ายเหมือนกันที่สำคัญ ฟรี

แต่ถ้าจะเขียนให้เร็วแบบพิมพ์ละก็แนะนำ Atom เลยใข้งานง่ายสะดวกเร็ว ตัวนี้ก็ฟรี มี hotkey ช่วยในการเขียนเป็นอย่างดีที่เดียว

อีกตัวที่แนะนำก็เป็น NetBeans IDE 8.0.2 ไม่รู้ว่าตอนนี้เวอร์ชั่นไรแล้วนะ แต่ก็เขียนง่ายสะดวกดี โปรแกรมนี้มีชุดคำสั่ง html มาให้เหมือนกัน

เอาไปอีก EditPlus ตัวนี้ไม่ฟรี แต่ก็น่าเขียน

ตัวสุดท้ายที่ไม่แนะนำสำหรับคนที่มีกระตังค์น้อย แต่ถ้างบเยอะหน่อย ใช้งาน adobe dreamweaver ได้เลย

เรื่องการใช้โปรแกรมเลือกตามที่ตัวเองชอบและถนัดเลย

tag ใน HTML คืออะไร

ตัวอย่าง. <b>ข้อความนี้กำหนด tag b เพื่อเป็นการกำหนดตัวหนังสือหนา</b>

ผลที่ได้คือ

ข้อความนี้กำหนด tag b เพื่อเป็นการกำหนดตัวหนังสือหนา

ข้อสังเกต
1.เมื่อเปิด tag จะต้อง เปิด tag เสมอ ในที่นี้คือ tag b ก็อยู่ในรูป <b>...............</b>

คุณสมบัติของ tag <b>...</b>
คือ กำหนดข้อความให้เป็นตัวหนังสือที่หนาขึ้น

รู้จัก HTML5

HTML5 เป็นภาษาที่ใช้ในการเขียนเว็บไซต์

คำว่า HTML5 ย่อมาจาก Hyper Text Markup Language
ส่วนเลข 5 คือตัวบอกว่า HTMLที่เชียนจะเป็น HTML เวอร์ชั้นที่ 5

วันอาทิตย์ที่ 2 สิงหาคม พ.ศ. 2558

วันเสาร์ที่ 1 สิงหาคม พ.ศ. 2558

วันศุกร์ที่ 31 กรกฎาคม พ.ศ. 2558

tag <p>...</p> ที่ย่อมาจาก Paragraphs

แต่ละครั้งที่ใช้ tag <p>...</p> ก็จะมีการเว้นบรรทัดให้ทุกครั้งในแต่ละ tag p นั้นๆ

อย่าลืมว่า tag <p>...</p> ต้องมี tag เปิดและลงท้ายต้วย tag ปิดอยู่เสมอ

เวลาจะเว้นบรรทัดเองควรใช้ tag <br />

รู้จักกับ tag <pre>...</pre>

วันพฤหัสบดีที่ 30 กรกฎาคม พ.ศ. 2558

tag headdings มีทั้งหมด 1-6 คือจะมี

<h1>...</h1> ไปจนถึง <h6>...<h6>

ค่า h1 จะใหญ่สุด

ค่า h6 จะเล็กที่สุด

แสดงตัวอย่าง code ดังนี้

<h1>ข้อความนี้ได้ใส่ tag h1</h1>

<h2>ข้อความนี้ได้ใส่ tag h2</h2>

<h3>ข้อความนี้ได้ใส่ tag h3</h3>

<h4>ข้อความนี้ได้ใส่ tag h4</h4>

<h5>ข้อความนี้ได้ใส่ tag h5</h5>

<h6>ข้อความนี้ได้ใส่ tag h6</h6>

ข้อความนี้ได้ใส่ tag h1

ข้อความนี้ได้ใส่ tag h2

ข้อความนี้ได้ใส่ tag h3

ข้อความนี้ได้ใส่ tag h4

ข้อความนี้ได้ใส่ tag h5

ข้อความนี้ได้ใส่ tag h6

ต่อมาจะเป็นการพูดถึงเรื่อง tag <hr />

ข้างล่างนี้เป็นการแสดง tag <hr />

tag <head>...</head>

เป็น tag ส่วนหัว ส่วนใหญ่เก็บ tag

<title>...</title> , <meta /> หรือ พวก <skip >...</skip > ต่างๆ

จำไว้ว่า tag <head>...</head> ไม่ใช่ heading

tag <title>...</title> จะเอาไว้ใส่ข้อความบน bar ของหน้าต่างนั้นๆ

tag <stype>...</stype> ใช้สำหรับเขียน css file นั้น

tag <link /> ใช้สำหรับเขียน css ที่อยู่นอก file

เทคนิคในการ view source ควร view Broser ตัวหลัก เช่น ของ IE Chome Opara Frifox

วันอังคารที่ 28 กรกฎาคม พ.ศ. 2558

ทำความรู้จักกับ Attributes

-ในแต่ละ element จะมี attributes

element html อาจมี attributes lang

ตัวอย่าง

-การมี attributes ทำให้ element มีความซับซ้อนมากขึ้น

-a tag ก็จะมี href เป็น attributes เพื่อกำหนดหน้าที่จะลิงค์ไป

-img tag ก็จะมี src,width,height เป็น attributes

ซึ่ง attributes srcก็จะกำหนดตำแหน่งที่รูปภาพอยู่

attributes width และ height ก็กำหนด ความกว้างและความ สูงเช่นกัน

-การเขียน attributes แนะนำให้เขียนเป็นตัวพิมพ์เล็กเพื่อจะทำให้เวลากลับมาอ่าน code จะอ่านได้ง่าย

attributes

-การใส่ค่า value ใน attributes แนะนำให้ใส่ Quote

ข้อความระหว่าง tag เปิด/ปิด เราเรียกว่า content

ถ้ามี

<html>

จากโครงสร้างด้านบน เราเรียกว่ามี 3 element คือ

หากเราได้เปิด tag แล้ว เราต้องเปิด tag เสมอ

*นิดหน่อย* HTML 5 ไม่จำเป็นต้องใช้ tag ตัวพิมพ์เล็ก จะใช้ตัวพิมพ์เล็กพิมพ์ใหญ่ได้เหมือนกัน

มารู้จักกับพื้นฐานการเขียนภาษา HTML กันก่อน

อย่างแรกต้องรู้จักกับ HTML heading

tag <h>....</h> คือ tag ที่กำหนดขนาดของตัวหนังสือให้เล็กหรือใหญ่ จุดประสงค์ของ tag นี้คือเอาไว้ใส่เป็นหัวข้อนั้นเอง

ตัวอย่างการใช้ tag <h>.....</h>

<h1>ตัวอย่าง heading h1</h1>

<h2>ตัวอย่าง heading h2</h2>

<h3>ตัวอย่าง heading h3</h3>

<h4>ตัวอย่าง heading h4</h4>

<h5>ตัวอย่าง heading h5</h5>

<h6>ตัวอย่าง heading h6</h6>

ผลที่ได้คือ

ตัวอย่าง heading h1

ตัวอย่าง heading h2

ตัวอย่าง heading h3

ตัวอย่าง heading h4

ตัวอย่าง heading h5

ตัวอย่าง heading h6

ข้อสังเกตคือ

ต่อมารู้จักกับ tag <p>...</p>

ผลที่ได้คือ

ข้อสังเกตคือ

รู้จักกับ tag <a>...</a>

ผลที่ได้คือ

ข้อสังเกตคือ

ต่อมารู้จักกับการใส่รูปภาพในเว็บ

นิดหน่อย HTML 5 ไม่จำเป็นต้องใช้ tag ตัวพิมพ์เล็ก จะใช้ตัวพิมพ์เล็กพิมพ์ใหญ่ได้เหมือนกัน