โค้ดใส่เสียง หรือเพลงใน html5

การใส่เสียงใน HTML5

 ส่วนโค้ด
<audio controls>
       <source src="music.ogg" type="audio/ogg">
</audio>

อธิบายโค้ด                       
          <audio controls>                                                              คือแท็กหรือคำสั่งเปิดโปรแกรมเล่นเสียง
          <source src="ไฟล์เสียง" type="นามสุกลไฟล์เสียง">          คือแหล่งไฟล์เพลงที่ต้องการเปิด  
          </audio>                                                                           คือแท็กหรือคำสั่งปิดโปรแกรมเล่นเสียง
  **การที่เราจะเล่นไฟล์เสียงควรดูไฟล์เเสียงที่เรานำมาด้วยว่าเป็นไฟล์อะไรต้องใช้นามสกุลอะไร เช่น ตัวอย่าง ใช้ไฟล์ .ogg   ดังนั้นนามสกุลไฟล์เสียง ก็ต้องใช้ audio/ogg ถ้า .mp3  ก็ใช้ audio/mpeg
 **ถ้าต้องการให้เข้าเว็บแล้วเล่นเสียงทันทีให้ใส่ autoplay หลัง controls เช่น <audio controls autoplay></audio>

ไฟล์และนามสกุลเสียง
     ไฟล์เสียง                      นามสกุลไฟล์เสียง
        MP3                               audio/mpeg
        Ogg                                audio/ogg
        Wav                               audio/wav

ตัวอย่างการเขียน

โค้ดเสียง HTML5

หน้าตาโปรแกรมเล่นเสียง HTML5

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

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

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

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

โครงสร้าง html5

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

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

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


 

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

การแสดงผล

การติดอันดับ 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