Sabtu, 27 Oktober 2018

Catatan Tentang HTML 5

Assalamualaikum Warahmatullahi Wabarokatuh

hello kawan semua.............

Di sini saya akan memberikan beberapa penjelasan tentang HTML 5.

A. Struktur HTML 5.

<html>
    <head>
        <title>HTML %</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header role="banner">
            <h1>HTML5</h1>
        </header>
        <nav>
            
        </nav>
        <article>
            
        </article>
        <aside>
            
        </aside>
        <figure>
            
        </figure>
        <footer>
            
        </footer>
    </body>
</html>


B. Tag - Tag pada HTML

     Tag <!DOCTYPE html> adalah sebuah deklerasi atau untuk mengidentifikasi jenis dokumen HTML yang digunakan agar browser dapat menentukan bagaimana memperlakukan kode tersebut. Proses deklarasi ini cukup dilakukan sekali saja saat dokumen HTML dijalankan.
Tag <html>...</html>
Tag <HTML> tugasnya adalah sebagai root, maksudnya semua tag yang berada didalam tag <HTML> merupakan gambaran dari dokumen HTML.
Tag <head>...</head>
Tag <HEAD> tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag <head> kita bisa menambahkan tag- tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen dan masih banyak lagi informasi yang bisa di tambahkan pada tag ini.
Tag <title>...</title>
Tag <TITLE> tugasnya adalah memberikan informasi berupa judul dokumen HTML.
Tag <body>...</body>
Tag <BODY> tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browsernya.
Tag <p>...</p>
Tag <P> tugasnya adalah untuk membuat sebuah paragraf.
Tag <!-- komentar -->
Tag <!-- komentar --> tugasnya adalah memberikan komentar pada sebuah dokumen HTML, namun tulisan yang dimasukan dalam tag ini tidak akan terlihat pada Web browser saat dijalankan tetapi dapat dilihat pada source program.
B. Contoh Kode HTMl di Setiap Tag.
  • Untuk Menampilkan Sebuah  Gambar 


  • syntaknya sebagai berikut:
 <img src="anime.jpg" alt="Anime" width="350"      height="400">

hasilnya seperti gambar disamping.












  • Untuk menambahkan sebuah Auido

karena di blogger tidak dapat memasukkan audio jadi saya hanya memasukkan SS setelah di coding. Untuk codingnya seperti berikut : 
      <div>
<audio controls>
   <source src="surat al-a'la.mpeg" type="audio/mpeg">
</audio>
</div>

  • Belajar menggunakan <iframe> (menambahkan maps pada web anda) 
          Langkah pertama adalah buka browser anda kemudian buka alamat website ini http://maps.google.com, setelah  itu masukan alamat perusahaan anda lihat pada gambar dibawah ini





syntaknya sebagai berikut :

         <iframe src="https://www.google.com/maps/embed? pb=!1m18!1m12!1m3!1d31627.198976762244!2d110.33788822394017!3d-7.747341334304079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66df46c92af84e44!2sOlive+Fried+Chicken!5e0!3m2!1sid!2sid!4v1520092885212" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>










  • Belajar menggunakan <iframe> (menambahkan YouTube pada web anda) 

  • 1. Pertama-tama temna-teman persiapkan file HTMLnya simpan dengan nama index.html.
    2.  Kemudian buka  www.youtube.com.
    3. Setelah itu teman-teman klik “bagikan/share” yang ada di bawah video,
    4. Kemudian teman-teman pilih “sematkan/embed” dan copy tag <iframe> yang sudah disiapkan oleh       youtube,
    5. Dan paste di file index.html kita tadi,
    6. Hasilnya akan seperti ini,
    syntaknya seperti ini :


    <div>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/murr0HcNcN8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

       </div>




    • Ini adalah syntak keseluruhan :
               <!DOCTYPE html>

    <html>
    <body>
    <div>
    <img src="anime.jpg" alt="Anime" width="350" height="400">
    </div>
    <br>
    <div>
    <audio controls>
       <source src="surat al-a'la.mpeg" type="audio/mpeg">
    </audio>
    </div>
    <br>
    <div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31627.198976762244!2d110.33788822394017!3d-7.747341334304079!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66df46c92af84e44!2sOlive+Fried+Chicken!5e0!3m2!1sid!2sid!4v1520092885212" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
    </iframe>
    </div>
    <br>
    <div>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/murr0HcNcN8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
       </div>
    </body>
    </html>

    OKEY....Cukup sekian yang dapat saya bagikan ke teman-teman sekalian, selamat mencoba , sekian dan terimakasih

    Wassalamualaikum Warahmatullahi Wabarokatuh