Wednesday, February 15, 2017

HTML Chapter 6 - HTML Iframe, HTML JavaScript dasar, HTML Head

  No comments
Assalamu'alaikum

1. Pengertian


Inline frame atau Iframe adalah salah satu cara untuk menciptakan sebuah 'jendela' dalam halaman web yang mampu menampilkan dokumen terpisah di dalam jendela yang tanpa reload seluruh halaman.


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.


2. Alat dan Bahan



  • Laptop/PC
  • Text Editor
  • Web Browser
3. Tujuan

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

4. Pelaksanaan

  A. HTML Iframe
  • Membuat HTML Iframe simple, dengan border, dengan Style, dan Iframe Link
  • Masukkan coding di bawah ini :



  • Untuk hasilnya seperti ini :



  B. 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.
    B. 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.
5. Kesimpulan
  Dapat disimpulkan fungsi dari HTML Iframe adalh untuk merapikan tampilan pada halaman web. JavaScript-pun berfungsi , untuk lebih berinteraksi dengan user. Dan HTML head yang berada diantara tag html dan body.

:) well done.. untuk kali ini sekian
I hope it, it will be benefit for us.

No comments :

Post a Comment