วันอาทิตย์ที่ 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 รุ่นเก่ากว่า



เขียนโดย ที่ ไม่มีความคิดเห็น:

วันศุกร์ที่ 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

ตัวอย่าง 

<html lang="US">....</html>

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

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

เช่น การใส่ attributes title ใน element p ก็จะทำให้เมื่อเอาเมาส์ไปชี้ที่ ที่อยู่ใน element p จะทำให้เกิดข้อความที่ได้กำหนดใน title ได้
ตัวอย่าง
<p title="นี้คือข้อความด้วยย่อ">.......</p>

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

ตัวอย่าง
<a href="www.goog.com">.....คลิ๊กที่นี่</a>

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

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

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

ตัวอย่าง
<img src="picture.png" width="auto" height="120px" />


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


-value คืออะไร
value คือค่าที่อยู่ใน attributes 
ตัวอย่าง 
<a href="www.google.com">....คลิ๊กที่นี่....</a>
ใน tag a นี้ value คือ www.google.com

attributes 

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

ตัวอย่าง 
<a href="www.google.com">....คลิ๊กที่นี่....</a>

เขียนโดย ที่ ไม่มีความคิดเห็น:

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

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


ตัวอย่าง. tag <b>...</b>
<b>นี่เรียกว่า content</b>


ถ้ามี 

<html>

<head>
<head>

<body>

</body>
</html>

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

  1. <html>...</html>
  2. <head>...</head>
  3. <body>...</body> 
มีแค่สามตัว ก็มี 3 element




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

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


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

ตัวอย่าง.
<htML>....</HTML>
<HTML>...</HTML>
<html></html>
สามรูปแบบนี้สามารถใช้ได้หมด


เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)