Belajar HTML 5 Dasar(LayoutWeb) -Praktikum 6

-
Assalamualaikum WR.WB

Hai kembali lagi ke blog saya,Pada postingan kali ini saya akan membahas tentang web responsive.Apa sih itu web responsive?Desain Web Responsif (bahasa inggris:Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar. Ukuran huruf,user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja.

Nah,langsung saja kita ke materinya:

1.BottomIndex

Top Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada diatas content

Coding:



Output:



Pembahasan:

Sama seperti postingan postingan sebelumnya kita menggunakan tag <table> <tr> ataupun <td>
Tapi disini saya menggunakan tag form.Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web

2.LayoutSplit

Coding:



 Output:


Pembahasan:

Sama seperti postingan postingan sebelumnya kita menggunakan tag <table> <tr> ataupun <td>
Saya menggunakan tabel dengan width 800, dan height 512,border 1 dan rata tengah.


3.LeftIndex

 Top Index ini adalah sebuah layout/tampilan web(dengan menggunakan Tabel) yang memiliki daftar isi yang berada di kiri content

Coding:




Output:



Pembahasan:

Sama seperti postingan postingan sebelumnya kita menggunakan tag <table> <tr> ataupun <td>
Tapi disini saya menggunakan tag valign.Atribut align pada tabel digunakan untuk mengatur bentuk perataan data pada tabel secara horizontal. Atribut align dapat digunakan di tag <table> yang akan menentukan posisi tabel atau di tag <tr>, <th> atau <td> yang akan menentukan posisi isi tabel (data) di dalam tabel secara horizontal.

4.TopIndex

Coding:





Output:



Pembahasan:
Sama seperti postingan postingan sebelumnya kita menggunakan tag <table> <tr> ataupun <td>
Saya menggunakan tabel dengan width 800, dan height 542,border 1 dan rata tengah.
5.Latihan MyTableIndex

Coding:



Output:


Pembahasan:

Disini saya membuat layout web tentang"Hafidz cilik dari indonesia" yang menceritakan biodata Musa Hafidz Indonesia.Saya membuat link di Home,Profile,About Us,Blog,Contact Us.Home tersambung ke BottomIndex,Profile tersambung ke LayoutSplit,About Us tersambung ke leftindex,
Blog tersambung ke TopIndex,Contact us tersambung ke BottomIndex.


 

Komentar

Posting Komentar

Postingan populer dari blog ini

Laravel : Create Data, Validation, dan Old Input

-
Gambar
Assalamualaikum WR.WB     Hai! kembali lagi ke blog saya,pada postingan kali ini saya akan memberikan materi Laravel yaitu Membuat data di Laravel (Create Read Update Delete)  atau disebut juga dengan CRUD.Nah mari kita langsung ke pembahasannya!      Di postingan  sebelumnya , kita telah membuat beberapa tabel diantaranya tabel siswa dan juga kelas, jadi sekarang kita akan membuat create data di tabel siswa caranya sebagai berikut: 1. Buat link untuk menghubungkan form utama dengan form tambah data buka file  resources/views/belajar.blade.php  kemudian tambahkan ini di bawah tulisan data siswa <a class="btn btn-sm btn-success" href="{{ url('/siswa/create') }}">Tambah Data</a> 2. Ubah Routes buka file file  routes/web.php  lalu tambakan Route::get('/siswa/create','SiswaController@create'); 3. Menampilkan view dengan nama form yang terdapat pada folder siswa buka file  app/Http/Controllers/SiswaControlle
Baca selengkapnya

Belajar PHP (Nested Looping) -Praktikum 24

-
Gambar
Assalamualaikum WR.WB Hai!Kembali lagi ke blog saya,pada postingan kali ini saya akan memberikan tutorial menggunakan Nested Loop di PHP.Tapi sebelum kita ke materi apa sih yang disebut Nested Loop? Pengertian Nested Loop 1. Nested Looping Nested Looping adalah istilah dimana kita menggunakan beberapa kali pengulangan dalam 1 codingan, istilahnya tidak jauh berbedadengan Nested If . Seperti yang telah kita ketahui, jenis jenis pengulangan ada 3, yaitu : For, While, dan Do - While. Dalam Nested Looping kita dapat menggunakannya dengan bersamaan, sekarang saya akan mencontohkan penggunakan Nested Looping. <html> <head> <title> Ammar taradifa - XI RPL 3</title> </head> <link href="Loop.css" rel="stylesheet" type = "text/css" > <body> <center> <?php $jumlah = 5; for ($i = 1; $i <= $jumlah; $i++) { for ($j = 1; $j <= $i; $j++) { echo 'X'; }
Baca selengkapnya

Program Menentukan Hari Menggunakan If Dan Switch Case dan

-
Gambar
Assalamualaikum WR WB Pada postingan akan kali ini saya akan membahas program untuk menentukan kode hari dan menentukan kelulusan seseorang. 1. Program Menentukan Hari If Program ini akan menentukan hari berdasarkan kode yang user input,yang nanti akan dieksekusi oleh program.contohnya user menginput angka 7 maka program akan mengoutput hari senin. Berikut codingan programnya: Jadi apabila user menginput kode dari 1 - 7  maka program akan mengoutput dari hari minggu - hari senin.Berikut rincianya: -Kode 1 = Hari Minggu -Kode 2 = Hari Senin -Kode 3 = Hari Selasa -Kode 4 = Hari Rabu -Kode 5 = Hari Kamis -Kode 6 = Hari Jumat -Kode 7 = Hari  Sabtu  Berikut hasil programnya: 2. Program Menentukan Hari Switch Case Program ini sama seperti program di atas akan tetapi kali ini menguunakan switch case,Apa itu switch case? Switch-case merupakan pernyataan yang dirancangan khusus untuk menangani pengambilan keputusan yang melibatkan sejumlah atau banyak alternatif
Baca selengkapnya