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

advertise


วันอาทิตย์ที่ 19 ตุลาคม พ.ศ. 2557

Css Background,จัดการพื้นหลังด้วย Css

การใส่สีให้พื้นหลังด้วย Css                                        
    background-color:สี;                
    **สามารถใช้กับคำสั่ง body,p,h1-h6,div,span เป็นต้น
ตัวอย่าง

Code Css
Code Html
 ** ในส่วนการใช้งาน Css สามารถเลือกใช้ได้ทั้ง Class และid โดย1คำสั่งไม่สามารถใส่หลายคลาสได้ แต่สามารถใส่ได้ทั้ง Class และid จึงเป็นเหตุผลที่ให้เลือกใช้ได้ทั้ง Class และ idใน Css

การแสดงผล
 การใส่รูปให้พื้นหลังด้วยCss
    background-image:url("ชื่อรูปภาพ");
    
การจัดตำแหน่ง และการกำหนดลักษณะต่างๆ       
           การวนภาพซ้ำ
              background-repeat:ให้เลือก;
              ** ฟังก์ชันที่มีให้เลือก   no-repeat   คือ ไม่ต้องการใส่ภาพซ้ำ
                                                    repeat        คือ ใส่ภาพซ้ำจนเต็มจอ
                                                    repeat-x     คือ ใส่ภาพซ้ำแกน x หรือแนวนอน
                                                    repeat-y     คือ ใส่ภาพซ้ำแกน y หรือแนวตั้ง

          การจัดตำแหน่ง
             background-position:ตำแหน่ง;
             **ตำแหน่งที่ให้เลือก     center  คือ ตรงกลาง
                                                   right     คือ ทางขวา
                                                   left       คือ ทางซ้าย

ตัวอย่าง


Code Css 

Code Html

การแสดงผล 

การจัดการขนาดของรูปภาพพื้นหลังด้วย Css
  background-size: 350px 350px;




เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 , ,

การใช้งาน Css


การใช้งาน Css มี 2 อย่าง คือ
 1.ใช้ใน html เลย
        <style type="text/css">
selector{property:value;}
</style>
      **เพิ่มโค้ดไว้ภายใต้คำสั่ง head เสมอ


          การใช้งานแบบทั่วไป
การใช้Css แบบทั่วไป

การแสดงผล Css แบบทั่วไป
          การใช้งานแบบ id

การแสดงผล Css แบบ id
การใช้ Css แบบ id

          การใช้งานแบบ class

การใช้ Css แบบ class

การแสดงผล Css แบบ class


 2.การดึง Css ที่เขียนไว้อีกไฟล์มาใช้
    คือ การที่ได้เขียนไฟล์ Css แยกจาก Html ไว้คนละที่ แต่ได้นำไฟล์Css เข้ามาใช้ใน Html ( แนะนำว่าเอาไฟล์ไว้ใน Folder เดียวกัน)
    <link rel="stylesheet" type="text/css" href="ไฟล์ที่เก็บcssไว้.css">
    **เพิ่มโค้ดไว้ภายใต้คำสั่ง head เสมอ และตรงไฟล์ที่เก็บให้ใส่นามสกุลด้วย .css

ไฟล์ที่เก็บควรอยู่ที่เดียวกัน

โค้ดส่วน html

โค้ดส่วน Css

การแสดงผล Css




เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 ,

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

CSS และรูปแบบ Css

CSS (Cascading Style Sheets)


โลโก้ Css

    คือ ภาษาที่ใช้ปรับแต่ง HTML ให้มีการแสดงผลที่ดีขึ้นสมบูรณ์ยิ่งขึ้น แล้วข้อดีของ CSS คือ สามารถเรียกฟังก์ชัน CSS มาใช้ได้หลายๆเว็บเพจ  ดังนั้น ถ้าจะศึกษาภาษา CSS ให้เข้าใจควรมีพื้นฐานภาษา Html พอสมควร เพื่อเกิดความเข้าใจในภาษา CSS

 รูปแบบการใช้งานคำสั่ง CSS

 1.รูปแบบทั่วไป
   selector{property: value;}
     selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
     property คือ คุณสมบัติที่ต้องการเพิ่ม
     value คือ ค่าที่ต้องการให้แสดง
   ** ถ้าประกาศแบบนี้จะใช้ทันทีเมื่อคำสั่งนั้นได้ถูกใช้
ตัวอย่าง
     body{ background:red} คือ ในคำสั่งbodyให้เปลี่ยนสีพื้นหลังเป็นสีแดง


 2.รูปแบบ class
   selector.name{property:value;}
    selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
     property คือ คุณสมบัติที่ต้องการเพิ่ม
     value คือ ค่าที่ต้องการให้แสดง
     name ให้เราตั้งชื่อเอง เพื่อนำไปใช้
  การใช้งาน
   <selector class="name"></selector>
  ตัวอย่าง
     body.a{background:red;}  ส่วนประกาศ
    <body class="a"></body>   ส่วนการใช้งาน


3.รูปแบบ id
  selector#name{property:value}
     selector คือ คำสั่งในhtml ที่เราต้องการเพิ่มคุณสมบัติ
     property คือ คุณสมบัติที่ต้องการเพิ่ม
     value คือ ค่าที่ต้องการให้แสดง
     name ให้เราตั้งชื่อเอง เพื่อนำไปใช้
  การใช้งาน
   <selector class="name"></selector>
  ตัวอย่าง
     body.a{background:red;}  ส่วนประกาศ
     <body id="a"></body>  ส่วนการใช้งาน


 




เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 , , ,

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

HTML FORM,Drop down box

รูปแบบคำสั่ง html form
   <form action="ใส่เพจที่ต้องการ" name="ใส่ชื่อ" method="ใส่รูปแบบการส่ง">    
         <input type="text" name="name"> 
   </form>

ขนิดของแต่ละตัวใน html form
  1.<input type="text" name="name">  คือ ช่องที่ให้ใส่ตัวอักษร หรือไอดี

  2.<input type="password" name="name"> คือ ช่องที่ให้ใส่พาสเวิร์ด
  3.<input type="radio" name="name"> คือ จุดให้เลือกตอบ
   
  4.<input type="checkbox" name="name"> คือ ช่องสี่เหลี่ยมให้เราทำการเช็คเครื่องหมาย

  5.<input type="submit" name="name"> คือ ปุ่มยืนยัน

โค้ด HTML FORM

การแสดงผล

การทำเมนูให้เลือกลงมา html ( Drop down box) 
            
Code Drop down box

                 บรรทัดที่ 8,13 การใช้คำสั่ง form
                 บรรทัดที่ 9,12 เป็นคำสั่ง Select ให้เลือกค่าต่างๆที่เราต้องการ
                 บรรทัดที่10,11 เป็นคำสั่งในการกำหนดค่าต่างๆที่ให้เลือก และแสดงผลออกมา


การแสดงผล



เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 , , , , ,

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

การติดอันดับ Google SEO

3 คำสั่งHTML ในการทำเว็บไซต์ เพื่อที่ Google จะได้เข้ามาเก็บข้อมูล  
1.<title>ชื่อ</title>
2.<meta name="keywords" content="รายละเอียด">
3.<meta name="description" content="รายละเอียด">
    *** 3 คำสั่งนี้จะอยูู่ภายใต้คำสั่ง <head> เสมอ

คำสั่ง HTML SEO

ความหมายแต่ละคำสั่ง HTML

ดังนั้น keyword เป็นเรื่องที่สำคัญมาก ในการที่เว็บเราจะติดอันดับ google

เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 , ,

วันอังคารที่ 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 คำสั่งที่จะให้แสดงผล และเพิ่มคุณสมบัติใส่ภาพพื้นหลัง



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




เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 ,

วันศุกร์ที่ 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 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 ,

การสร้างตาราง 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>




เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 ,

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

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




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


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

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

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


 ตัวอย่าง


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

เขียน HTML5 โดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ HTML5 , ,

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

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