Pages - Menu

▼

Selasa, 27 Desember 2016

Dasar-dasar HTML part 6 (HTML Iframe,HTML JavaScript dasar, HTML Head)

Assaalamu'alaikum wr.wb.

     Kesempatan kali ini kita masih akan membahas tentang HTML. Yaitu tentang HTML Iframe, HTML JavaScript dan HTML File Paths. Nah, langsung saja yang masuk ke materi pembahasan.

A. Latar Belakang

   Iframe HTML didefinisikan dengan <iframe> tag <iframe src="URL"></iframe>. Sintaks src atribut menentukan URL (alamat web) dari halaman frame inline. Iframe ini digambarkan seperti bingkai. Jika kita akan mengubah ukuran iframe dapat menggunakan Height dan Width. Secara default, iframe memiliki perbatasan di sekitarnya. Untuk menghapus perbatasan, tambahkan gaya (style) atribut dan menggunakan CSS perbatasan properti. Dan CSS dapat juga digunakan untuk mengubah ukuran, gaya dan warna perbatasan dalam iframe.
  JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag <script>. JavaScript membuat halaman HTML lebih dinamis dan interaktif. Untuk memilih elemen HTML, JavaScript sangat sering menggunakan metode (id) document.getElementById. Tag <noscript> digunakan untuk memberikan konten alternatif bagi pengguna yang memiliki skrip dinonaktifkan pada browser mereka atau memiliki browser yang tidak mendukung script sisi klien.
  Head <head> elemen merupakan wadah untuk meta data dan ditempatkan di antara <html> tag dan <body> tag. Metadata HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan. Metadata biasanya menentukan judul dokumen, set karakter, gaya, link, script, dan informasi meta lainnya.Tag berikut menggambarkan metadata: <title>, <style>, <meta>, <link>, <script>, dan <base>.
  Title <title> elemen mendefinisikan judul dokumen dan diperlukan dalam semua dokumen HTML / XHTML. Title memiliki beberapa fungi yaitu mendefinisikan judul di tab browser,  memberikan judul untuk halaman ketika ditambahkan ke favorit dan menampilkan judul untuk halaman dalam hasil mesin pencari. 
  Meta <meta> elemen digunakan untuk menentukan karakter set yang digunakan, deskripsi halaman, kata kunci, penulis, dan metadata lainnya. Metadata digunakan oleh browser (bagaimana menampilkan konten), oleh mesin pencari (kata kunci), dan layanan web lainnya.

 B. Alat dan Bahan
  • Laptop
  • Software SublimeText
  • OS linux
  • W3S
C. Tujuan 

     Yaitu untuk mempelajari dan mempraktekkan fungsi dari masing-masing fungsi dari dasar HTML.

D. Tahap Pelaksanaan
  
     1. HTML Iframe

         - Iframe Height dan Width
  •  Masukkan coding dibawah ini untuk membuat iframe dengan ukuran yang kita tentukan.
  • Hasilnya akan menghasilkan seperti dibawah ini. Isi dari iframe dibawah ini kita ambilkan dari coding list sebelumnya.
         - Iframe dengan border
  • Masukkan coding dibawah ini untuk membuat border di dalam iframe.
Hasil dari coding diatas. Dengan border tanpa warna.
  •  Masukkan coding dibawah ini untuk tampilan yang memiliki styles dan color.

Hasil dari coding diatas menghasilkan seperti gambar diatas yang memiliki warna merah
        - Iframe Link
  • Masukkan coding dibawah ini untuk membuat iframe bisa masuk ke halaman lain dengan link.

Hasil dari coding diatas akan menghasilkan seperti dibawah ini.
     2. HTML JavaScript

         - JavaScript Waktu dan Tanggal
  • Masukkan coding dibawah ini untuk membuat java script waktu dan tanggal
Dari coding java itu terdapat document.getElementById
Gambar diatas merupakan hasil dari jika kita menekan button
         - JavaScript untuk merubah konten HTML
  • Masukkan coding dibawah ini untuk merubah konten HTML yang dibuat.
 

Jika kita menekan button "Klik Disini" akan muncul dibawah ini
Hasil dari "Klik Disini"
        - Java Styles
  • Masukkan coding dibawah ini untuk merubah styles tampilan dari web yang kita buat dengan JavaScript.


Hasil dari coding yang dimasukkan akan menghasilkan seperti gambar diatas

Jika button "Click Me!" di tekan akan muncul tulisan yang berwarna
        - JavaScript merubah Atribut HTML
  • Masukkan coding dibawah ini untuk merubah atribut dalam HTML dengan menggunakan gambar interaktif.

Hasil dari coding diatas dan apabila tombol Hidup ditekan akan hidup sedangkan tombol Mati ditekan akan mati.
        - Tag <noscript> dalam HTML
  • Masukkan coding seperti dibawah ini untuk membuat noscript dalam HTML

Hasil dari coding diatas menunjukkan apabila browser tidak mendukung script sisi klien.
    3. HEAD

      - HTML Head
  • Masukkan coding dibawah ini untuk membuat head dengan styles.

Hasil dari coding diatas jika kita menggunakan style
       - HTML LINK Elemen
  • Masukkan coding seperti gambar dibawah ini untuk membuat link dan styles nya.
Untuk membuat linknya, kita memerlukan link rel untuk memanggil style dari css dan alamat dari css yang kita tuju.
 

        - HTML <meta> elemen
  •  Masukkan coding dibawah ini untuk membuat  meta dalam HTML 
Coding diatas juga menggunakan tag viewport, di line ke 8

Hasilnya akan seperti diatas jika dibuka dengan laptop. Bila dibuka dengan HP akan berbeda.

E. Kesimpulan

    Dari hasil sharing yang saya sampaikan diatas dapat ditarik kesimpulan bahwa iframe digunakan untuk membingkai tampilan agar rapi. Javascript untuk memberikan efek lebih interaktif dengan user. Dan head ditempatkan di antara tag html dan tag body.

F. Referensi
  • http://www.w3schools.com/html/html_head.asp
  • https://id.wikipedia.org/wiki/JavaScript
  • http://www.w3schools.com/html/html_scripts.asp
Sekian dan Terimakasih.

SMK Bisa !!

Wasalamu'alaikum wr.wb.
di

Tidak ada komentar:

Posting Komentar