โปรโมทเว็บ Freeze Dried Food

advertise


วันอังคารที่ 14 ตุลาคม พ.ศ. 2557

การใส่สี และรูปภาพพื้นหลัง HTML5

การใส่สีพื้นหลัง HTML

  จะใช้ Attribute ของคำสั่ง bodyในการเปลี่ยนสีพื้นหลัง
  คือ    <body bgcolor="สี"></body>

Code การใส่สีพื้นหลัง HTML5
Code การใส่สีพื้นหลัง HTML5

บรรทัดที่ 1  การใช้ชนิดภาษา HTML5
บรรทัดที่ 2,6  คำสั่งใ นการเขียนภาษา HTML
บรรทัดที่ 4 คำสั่งที่จะให้แสดงผล และเพิ่มคุณสมบัติเปลี่ยนสีพื้นหลัง



ส่วนการแสดงผล


การใส่รูปภาพพื้นหลัง
จะใช้ Attribute ของคำสั่ง bodyในการเพิ่มภาพพื้นหลัง
  คือ    <body background="ชื่อภาพ"></body>

Code การใส่ภาพพื้นหลัง HTML5
Code การใส่ภาพพื้นหลัง HTML5

บรรทัดที่ 1  การใช้ชนิดภาษา HTML5
บรรทัดที่ 2,6  คำสั่งใ นการเขียนภาษา HTML
บรรทัดที่ 4 คำสั่งที่จะให้แสดงผล และเพิ่มคุณสมบัติใส่ภาพพื้นหลัง



ส่วนการแสดงผล




วันศุกร์ที่ 10 ตุลาคม พ.ศ. 2557

การเขียน List HTML


การเขียนย่อหน้า HTML มีอยู่ 2 อย่าง ดังนี้
  1.การเขียนเป็นโดยไม่เรียงลำดับ HTML
  <ul>
<lh>เรื่อง<lh>
<li>ข้อมูล</li>
<li>ข้อมูล</li>
</ul>


ส่วน code

โค้ด list




ส่วนการแสดงผล




  2.การเขียนโดยเรียงลำดับ HTML
  <ol>
<lh>เรื่อง<lh>
<li>ข้อมูล</li>
<li>ข้อมูล</li>
</ol>



ส่วน code


โค้ด list


ส่วนการแสดงผล


ถ้าต้องการเปลี่ยนสัญลักษณ์ก็สามารถเปลี่ยนได้ โดยเพิ่มคำว่า type="สัญลักษณ์" ในคำสั่ง<ul> หรือ <ol> ดังนี้

สัญลักษณ์การเขียนเป็นโดยไม่เรียงลำดับ HTML
TYPE       สัญลักษณ์
disc  วงกลมทึบ
circleวงกลมโปร่งใส
squareสี่เหลี่ยมทึบ

สัญลักษณ์การเขียนโดยเรียงลำดับ HTML
TYPE       สัญลักษณ์
Aเรียงแบบ A,B,C
aเรียงแบบ a,b,c
Iเรียงแบบเลขโรมัน I,II,III
iเรียงแบบเลขโรมัน i,ii,iii




ส่วน code

โค้ด list


ส่วนการแสดงผล 


การสร้างตาราง HTML5




      

คำสั่ง <table></table>
        คือ คำสั่งในการสร้างตารางของเว็บไซต์ ซึ่งจะทำให้เห็นเส้นขอบตาราง หรือไม่เห็นก็ได้

ส่วน code 

<table border="1"> </table> คือ คำสั่งการสร้างตาราง และ แอคทิบื้ว border คือ การกำหนดเส้นขอบให้ตาราง มีหรือไม่มีก็ได้
<tr>  คือ จำนวนแถว จะอยู่ภายใต้คำสั่ง <table> เสมอ
<td> คือ จำนวนคอลัมน์ จะอยู่ภายใต้คำสั่ง <table> เสมอ

บรรทัดที่ 8,17 เป็นคำสั่ง table เพื่อแสดงว่าส่วนนีเป็นส่วนที่เรากำลังจะสร้างตาราง
บรรทัดที่ 9,12,13,16 เป็นคำสั่ง tr เพื่อสร้างแถว ตอนนี้ผมสร้างแค่ 2 แถวนะครับ
บรรทัดทืี่ 10,11,14,15 เป็นคำสั่ง td เพื่อสร้างคอลัมน์ ตอนนี้ผมก็สร้างแค่ 2 คอลัมน์นะครับ


การแสดงผล


คุณสมบัติ (Attribute) ของคำสั่งตารางhtml
    height="" width=""
    การกำหนดความกว้าง ความสูงให้กับตาราง
    วิธีใช้ 
      <table  height="ความสูง" width="ความกว้าง">
               <tr>
                         <td></td>
               </tr>
     </table>




วันเสาร์ที่ 4 ตุลาคม พ.ศ. 2557

คำสั่ง meta,title,link ใน HTML5




คำสั่ง ( Tag ) ที่อยู่ภายในคำสั่ง <head> ที่เห็นกันบ่อยๆ


แท็ก <meta charset="utf-8"> 
  คือ แท็กสำหรับการแสดงผล ซึ่งสนับสนุนภาษาไทย ถ้าไม่มีการแสดงผลภาษาไทยจะเป็นภาษาต่างดาวนะครับ

แท็ก <title>   </title>
  คือ ชื่อหัวเว็บไซต์ข้างบนสุดของเว็บบราวน์เซอร์

แท็ก<link rel="stylesheet" type="text/css" href=" ที่อยู่ที่เราเก็บฟังก์ชันนั้นไว้">
 คือ แท็กที่นำฟังก์ชันต่างๆที่ได้เขียนไว้มาใช้งาน


ตัวอย่าง


การเขียนเบื้องต้นนะครับ

วันศุกร์ที่ 3 ตุลาคม พ.ศ. 2557

การลิงค์ไปยังเว็บต่างๆ HTML5






การลิงค์ไปเว็บไซต์ต่างๆ
          คำสั้ง <a href=" เว็บไซต์ที่ต้องเชื่อมต่อ">  </a>
           ** ( เว็บไซต์ที่ทำการเชื่อมต้องเขียน  http://ตามชื่อเว็บ   เสมอ งั้นจะไม่สามารถลิงค์ได้นะครับ)

 ตัวอย่าง


บรรทัดที่ 7 จะทำการลิงค์ไปยังเว็บไซต์ที่เราต้องการโดยการกดปุ่ม Go โดยในที่นี้ผมได้ทำการลิงค์ไปยัง http://google.co.th นะครับ



เมื่อทำการกดปุ่ม Go จะทำการลิงค์ไปยังหน้าเว็บที่เราได้ตั้งไว้



ทำการเข้าลิงคเสร็จเรียบร้อย


การลิงค์ภายในเว็บ หรือในไดเรคทอรี่เดียวกัน
         คำสั้ง <a href=" ชื้่อไฟล์ที่ต้องการลิงค์">  </a>
         ** ( ต้องระวังด้วยนะครับ ถ้าไฟล์เราเก็บไว้ในที่เดียวกันก็ใส่ชื่อไฟล์ได้เลย แต่ถ้าคนละที่กันต้องดูว่าจะต้องเข้าหรือโฟล์เดอร์ที่ไฟล์ที่เราต้องลิงค์อยู่ด้วยนะครับ ถ้าออกโฟลเดอร์ จะใช้ ..    ถ้าเข้าโฟลเดอร์ จะใช้ / )


ตัวอย่าง


จะสังเกตุเห็นว่าผมได้นำไฟล์ไว้ที่เดียวกันดังนั้นเวลาลิงค์ก็สามารถใส่ชื่อหน้าที่เราต้องการลิงค์ได้เลยในนี้ผมจะลิงค์ไป test1.html



บรรทัดที่ 7 นี้เป็นการลิงค์ไปยัง test1.html โดยจะมีลิงค์ให้กดคำว่า Go to test1



นี้คือหน้าของ test1.html ที่ผมได้ทำการเขียนไว้ 



ตอนนี้เรากำลังอยู่หน้า test.html แล้่วเมื่อกด GO to test1 ก็จะทำการไปสู่หน้า test1.html ทันที



หลังจากกดลิงค์เสร็จก็จะทำการเข้ามาในหน้าที่เราทำการเชื่อมต่อ



การลิงค์โดยรูปภาพ
       คำสั้ง <a href=" เว็บไซต์ หรือไฟล์ที่ต้องการเชื่อม"><img src="ชื่อรูปภาพที่ต้องการ" </a>
       **( ไฟล์รูปก็อย่าลืม .jpg กันด้วยละ คือ นามสุกลของไฟล์ที่เราเอามาลงนะครับ)


ตัวอย่าง


ผมเก็บไฟล์รูปกับไฟล์เขียนเว็บไว้ด้วยกัน สามารถนำรูปมาใช้งานได้ทันที



 บรรทัดที่  7 ทำการใส่ชื่อรูป หลัง img src=  และผมตั้งให้ลิงค์ไปยังหน้า test1.html 



พอกดรูปก็จะทำการแสดงหน้าที่เราได้ทำการลิงค์ไว้



เป็นอันเสร็จพิธี ^^




***** ถ้าเราต้องกดลิงค์แล้วเปิดแท็บใหม้่ ให้ทำการเพิ่ม target="_blank" ลงไปในระหว่างแท็ก <a href></a>   เช่น คำสั้ง <a href=" เว็บไซต์ที่ต้องเชื่อมต่อ"  target="_blank">  </a>

วันพฤหัสบดีที่ 2 ตุลาคม พ.ศ. 2557

คำสั่งย่อหน้า เว้นวรรค HTML5




คำสั่ง <p></p>   เป็นคำสั่งย่อหน้า มีทั้งแท็กเปิด และแท็กปิด


คำสั่ง </br>   เป็นคำสั่งเว้นบรรทัด


คำสั่ง <hr>   เป็นคำสั่งเว้นบรรทัดแล้วขีดเส้นใต้




ส่วนการเขียนโค้ด






ส่วนการแสดงผล


โค้ดตัวหนังสือ HTML5




คำสั่งที่ทำการจัดการกับตัวหนังสือบนเว็บไซต์ (`** ต้องมีทั้งแท็กเปิด และปิดน่ะครับ )
<B> ข้อความ</B> 
<I>ข้อความ</I>
<S>ข้อความ</S>
<Sub>ข้อความ</Sub>
<Sup>ข้อความ</Sup>
<U>ข้อความ</U>

ตัวหนังสือแบบตัวหนา 
ตัวหนังสือบบตัวเอน 
ตัวหนังสือแบบตัวขีดฆ่า 
ตัวหนังสือแบบตัวห้อย
ตัวหนังสือแบบตัวยก 
ตัวหนังสือบบขีดเส้นใต้ 


แสดงการทำงาน



จะสังเกตุเห็นว่า บรรทัดที่ 4 นี้จะเป็นคำสั่งสำหรับแสดงผลฟอร์น หรือตัวหนังสือไทย
 (** ในตัวโปรแกรมsublime ในการเขียนที่เป็นภาษาไทยจะมีการวางตำแหน่งที่ผิดเพี้ยนไป  แต่การแสดงบนเว็บราวน์เซอร์นั้นจะเป็นปกติ )





การแสดงผลจากโค้ดที่เราทำการเขียนจากข้างบน