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

advertise


วันจันทร์ที่ 24 พฤศจิกายน พ.ศ. 2557

โครงสร้างของเว็บไซต์ html5



โครงสร้างของเว็บไซต์ที่เพิ่มมาของ Html5
 1.ส่วนหัว โลโก้ หรือแบนเนอร์  หรือชื่อเรื่อง (header)
 2.ส่วนนำทาง หรือแถบนำทาง (nav)
 3.ส่วนเนื้อหาที่ถูกแบ่งเป็น3คอลัมน์ (content)
 4.บทความ ในแต่ละคอลัมน์ หรือโฆษณา
 5.ส่วนท้าย ไว้แสดงเครดิตผู้เขียน หรือลิขสิทธิ์ต่างๆ (footer)

** แท็กส่วนหัว <header> ,แท็กส่วนท้าย <footer>  มีไว้เพื่อบอกให้เรารู้ในการแบ่งพื้นที่เขียนโค้ดให้ชัดเจนขึ้น แทนที่ แท็ก <div>ในการเขียนส่วนหัว หรือส่วนท้าย

ตัวอย่างโค้ด

โครงสร้าง html5

การแสดงผลแต่ละส่วนของ Html5

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




การใช้งาน 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




วันเสาร์ที่ 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>  ส่วนการใช้งาน


 




วันศุกร์ที่ 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 เป็นคำสั่งในการกำหนดค่าต่างๆที่ให้เลือก และแสดงผลออกมา


การแสดงผล



วันพฤหัสบดีที่ 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

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



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