วันอาทิตย์ที่ 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 style="background-color:red">

นี้คือข้อความที่อยู่ใน 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 รุ่นเก่ากว่า