วันศุกร์ที่ 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>
สามรูปแบบนี้สามารถใช้ได้หมด


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

พื้นฐานการเขียนภาษา 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 ก็ได้ 

ตัวอย่าง

<img src="https://scontent.fbkk5-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/10346609_812954372056076_2844667058622616239_n.jpg?oh=a2229272b4a41b624c1441987bb0eb4f&oe=564B10D2" alt="หากภาพไม่แสดงก็แสดงข้อความนี้" width="100px" height="auto"/>

ผลที่ได้คือ



หากภาพไม่แสดงก็แสดงข้อความนี้




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

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

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

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


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

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

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

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

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

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

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


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


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

tag ใน HTML คืออะไร





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






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