HTML Layout, Responsive dan Iframes

Salam Sehat untuk kita semua, untuk minggu ini saya bertugas untuk menyampaikan pembahasan HTML kepada teman2 saya mau tidak mau itu harus wkwkwk, dan dimana ini merupakan pengalaman pertama ane Ngepost di Blog, Ok langsung saja.

Dalam pembahasan kali ini saya akan menjelaskan sedikit tentang  HTML :

·         Layout

·         Responsive

·         Iframe

Masuk ke point pertama yaitu :

HTML Layout

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar.

·         HTML Layout Menggunakan <div> Elements

Contoh  layout dengan penggunaan 4 <div> elemen untuk membuat banyak layout :

Keterangan :  

1.Elemen Header         : Kepala atau judul yang berisi nama website

2.Elemen Navigator     : Untuk mengakses ke halaman - halaman lain

3. Elemen Sidebar       : Pendudung konten, bisa berupa pembantu navigasi dll.

4. Elemen Konten        : Isi dari dukumen web.

5. Elemen Footer         : Bagian penutup website.

Untuk Syntax HTML tersebut : 

Dan Syntax CSSnya :

 Website Layout  menggunakan HTML5

 

HTML5 menawarkan unsur lambang/tag baru yang menentukan bagian-bagian berbeda dari suatu  halaman web.

 

Contoh Layout sama dengan contoh 01 layout di atas cuma yang membedakan adalah pada kode syntax yang ini penulisannya menggunakan HTML5 :

 

Dan ni Syntax CSSnya   :

           

Point Kedua :

HTML Responsive

Apa Desain Web Responsif itu ?

·         RWD singkatan Desain Web Responsif

·         RWD dapat memberikan halaman web dalam ukuran variabel

·         RWD adalah suatu keharusan untuk tablet dan perangkat mobile

Ø  Membuat Desain Responsif Sendiri

Salah satu cara untuk membuat desain responsif, adalah untuk menciptakan sendiri:

Mungkin disini yang menjadi patokannya adalah Attribute float.

Tampilan Pertama Ketika Maximaze :

     Tampilan ketika layar kita tarik kedalam :

Ø  Menggunakan Bootstrap 

Cara lain untuk membuat desain responsif, adalah dengan menggunakan kerangka CSS yang     sudah ada. 
Bootstrap adalah HTML, CSS, dan kerangka JS paling populer untuk mengembangkan jaring responsif.
Bootstrap membantu Anda untuk mengembangkan situs yang terlihat bagus di berbagai ukuran; layar, laptop, tablet, atau tele
Contoh :
di bawah ini penulisan Syntax dengan bantuan bootstrap, dimana yang ada di www.W3schools.com dibagian Responsive, 

Di atas menggunakan bootstrap Online  tetapi dibawah ini saya menggunakan yang Offline,

Hanya sedikit berbeda dalam penulisannya + beberapa script.js 

 Contoh ketika dijalan di browse :

Dan kalian coba untuk mengecilkan ukuran browsenya

Point terakhir :

HTML Iframes

Iframe digunakan untuk menampilkan halaman web dalam halaman web.

Ø  Iframes Syntax

Syntax untuk menambahkan iframes adalah :

Ø  Iframes – Mengatur Tinggi dan Lebar

Menggunakan Atribut tinggi dan lebar untuk menentukan ukuran.

Nilai Atribut di tentukan dengan pixel secara default, tapi juga bisa menggunakan persen(seperti  “80%”).

Contoh :

 Dimana nilai atribut scr berada dalam satu forder website yang kita buat.

Ø  Iframe - Hapus Perbatasan Garis

The frameborder atribut menentukan apakah menampilkan atau tidak untuk perbatasan di sekitar iframe.

Mengatur nilai atribut "0" untuk menghapus perbatasan.

Contoh :

Ø  Gunakan iframes sebagai tujuan untuk sebuah link

Iframe dapat digunakan sebagai kerangka tujuan sebuah link.

Target atribut link harus mengacu pada atribut nama iframe:

Contoh :

Ketika link di klik otomatis iframes semua akan berupa sesuai dibawah.

Sekian dan Terima Kasih
Referensi W3Schools

UMAR - PROJECT X