Tampilkan postingan dengan label Website. Tampilkan semua postingan
 |
| Contoh Layout Website dengan Menggunakan Manipulasi CSS |
Layout sebuah Web merupakan hal yang mendasar dan sangat penting untuk kita perhatikan sebelum membuat sebuah website atau dalam merancang sebuah website, Layout tersebut harus dibagi-bagi dan ditata sedemikian rupa sehingga dapat diterima dengan baik oleh pengunjung web kita.
Bagian-bagian dalam tampilan sebuah website sangat penting untuk menampilkan konten pada letak dan atau bagian yang sesuai dengan keinginan. Misalnya dalam sebuah kasus kita ingin membagi layout kita menjadi 2 bagian, sisi kiri untuk menampilkan artikel-artikel dan sisi kanan untuk menampilkan list artikel.
Maka yang harus diperhatikan adalah sebagai berikut :
1. Lebar layar untuk menampilkan seluruhnya diasumsikan 100%
2. Bagi 100% tersebut menjadi 2 bagian untuk sisi kiri dan sisi kanan. Misalkan sisi kiri untuk artikel-artikel lebarnya 70% dan 30% sisanya untuk sisi kanan. (*Anda dapat membaginya sesuai kebutuhan)
3. Script HTML dan CSS tentunya
Baik sekarang bagaimana script untuk Membuat Pembagian Layout Website Menggunakan CSS ?
Berikut langkah-langkahnya :
1. Buka Notepad/ Dreamweaver/ Sublime/ Text Editor lainnya.
2. Copy dan pastekan Script yang sudah saya buat berikut ini :
<!DOCTYPE HTML>3. Jangan lupa save file dengan beri nama dan exstensi .html dan lihat hasilnya dengan membuka file tersebut!
<html>
<head>
<title>Contoh Table menggunakan div by @BayuWPP</title>
<style type="text/css">
.lebarkolom {
width:80%; /* ukuran penuh layar table pada browser*/
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
/* bertindak seperti <table align="center">*/
border: 0px solid #000; /* border, opsional */
}
.baris {
width: 100%; /* harus 100% supaya penuh ke area table */
}
.kolom1 {
width: 70%; /* lebar kolom 1 70% untuk artikel-artikel */
/* diberikan kompensasi seperlunya karena penggunaan margin,*/
/*BayuWPP*/
/* padding maupun border akan mempengaruhi lebar kolom */
float: left; /* Konten di letakkan di sebelah kiri*/
}
.kolom2 {
width: 30%; /* lebar kolom 2 30% untuk list artikel*/
/* diberikan kompensasi seperlunya karena penggunaan margin,*/
/*bayubayyz.blogspot.com*/
/* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left; /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>
<body>
<h3>bayubayyz.blogspot.com</h3>
<div class="lebarkolom">
<div class="baris">
<div class="kolom1">
Kolom Pertama <!-- Di bagian ini Anda dapat membuatnya untuk menampilkan artikel-artikel atau lain-lain -->
</div>
<div class="kolom2">
Kolom Kedua <!-- Di bagian ini Anda dapat membuatnya untuk menampilkan list artikel atau lain-lain -->
</div>
</div>
<div style="clear: both;" /> <!-- selalu menempatkan tag ini sebelum penutup div lebar kolom -->
</div>
</body>
</html>
4. Selamat ! Anda kini mengetahui Cara Membuat Pembagian Layout Website Menggunakan Manipulasi CSS !
Asslammualaikum wr, wb.. Salam IT dan salam sejahtera untuk kita
semua.
Hallo, kali ini BIG akan berbagi tentang 4 web penyedia
hosting gratis dan tutorial hosting pada idhostinger.com (salah satu penyedia
hosting web gratis).
Berikut 4 web penyedia hosting gratis (4 free web hosting) versi BIG :
1·
IDHOSTINGER / idhostinger.com
idhostinger tidak hanya menyediakan hosting
web gratis tetapi yang berbayar juga ada disini.
Spesifikasi idhostinger free/bulan sebagai
berikut :
- Disk Space 2000 MB/ 2GB
- Bandwith 100 GB
- 2 Database MySQL
- 2 Akun Email
- Website Builder
- Script Autoinstaller
Spesifikasi idhostinger yang berbayar/
bulan sebagai berikut :
- Disk Space Unlimited
- Bandwith Unlimited
- Database MySQL Unlimited
- Akun Email Unlimited
- Website Builder
- Script Autoinstaller
- Gratis pendaftaran domain
- Akses penuh SSH
2· DOUBLEHOST / doublehost.com
Spesifikasi
yang diberikan sebagai berikut :
- DobleHost menggunakan tehnologi terbaru dengan standar
sistem operasi Cloud Linux. Tersedia ( Cloud Linux, cPanel, Softaculous)
- Spesifikasi Server (Dual Intel Xeon, ECC Register Ram, 4 X
Disk Raid-10)
- 2 GB Disk Space
- 100 GB Premium Bandwidth
- 1 CPU Core 500MHz
- 512 MB RAM
- Entry Processes 20
- Unlimited Add On Domain Dan Subdomain
- 5 Email Akun
- 5 Database MySQL
- 98.99% Uptime Guarantee SLA
- 24/7 Free Forum/Group Facebook Support
- 336 SCRIPT AUTO INSTALLER dan selalu bertambah melalui
softaculous
- GARANSI UPTIME 98.99&
- Php support, phpmyadmin, unlimited akses ftp, cron
jobs, akses webmail, akses pop3 / imap, filter spam, forward email
- Layanan support dan bantuan melalui forum / grup facebook
- Kecepatan jaringan server 100mb, ram server 32gb, processor
server dual xeon l5520, raid-10, sistem operasi cloudlinux 6.5
- Dns zone editor, statistik website, custom halaman error,
password pelindung direktori, ip deny manage.
Lebih detail kunjungi webnya atau klik disini.
3· INDOWEBSITE / indowebsite.com
Spesifikasi
yang diberikan :
-
80 MB Disk Space
-
80 GB Bandwidth/month
-
Unlimited Domain/Subdomain/Park
domain
-
Unlimited Database
-
Softaculous Installer
-
cPanel Kontrol Panel
Lebih detail kunjungi webnya atau klik disini.
4· DONASI HOSTING
Donasi Hosting untuk Akun gratis spesifikasi yang diberikan :
- Space
400MB
- Bandwith
Unmetered
- Jika
Anda mengelola 1 blog saja maka hosting sebesar itu sudah cukup untuk memenuhi
kebutuhan blog Anda.
Lebih detail kunjungi webnya atau klik disini.
Sekarang kita ke tutorial, here we go...
Tutorial
hosting web di idhostinger sebagai berikut :
1.
Masuk ke web penyedian hosting gratis yang diinginkan, sangat banyak sekali
bisa Anda cari di google.com. Saya menggunakan idhostinger.com/order.
2.
Lakukan registrasi atau pendaftaran akun seperti
berikut dengan mengisi form, kemudian klik buat Akun jika telah selesai
mengisi.
3.
Untuk dapat mengakses akun Anda, silahkan cek
email yang Anda gunakan untuk registrasi
sebelumnya.
4.
Log in ke Email Anda. Dan temukan link verifikasi
di inbox atau di spam yang akan menuntun Anda masuk ke Akun yang telah dibuat
tadi.
5.
Buka menu Hosting, dan klik Buat Akun Baru.
6.
Pilih yang free atau yang per bulan! Dalam tutor
saya memilih yang free.
7.
Buatlah alamat web yang Anda inginkan, masukkan
subdomain, input password akun idhostinger Anda dan kode captha yang ada.
Kemudian Klik Buat jika sudah selesai.
8.
Selanjutnya akun domain (alamat web) telah
berhasil dibuat dan klik kelola untuk upload file-file web Anda.
9.
Scroll kebawah dan cari ‘File Manajer
(Disarankan)’ untuk Anda klik dan akan membawa Anda ke Rumah Mantan
tempat aplikasi untuk upload file-file web.
10.
Klik Install! Untuk install file manajer
11.
Tunggu hingga proses installasi selesai! Kemudian
Klik ‘Lihat Hasil’.
12.
Delete file ‘default’ yang tertera.
13.
Klik ‘icon upload’ seperti yang saya tunjukkan
pada gambar dibawah ini untuk mengupload.
14.
Masukkan file-file rancangan web Anda.
15.
Pastikan tidak ada file yang tertinggal dan ada file
bernama index.html atau index.htm untuk file utama web-nya. Dan jika sudah
terupload semua, tinggal cek deh alamat domain atau alamat web-nya.
16.
Masukkan url domain yang telah dibuat di search address
browser Anda.
Sekian informasi 4 web penyedia hosting web gratis di Indonesia dan tutorial cara hosting web pada salah satu web hosting versi BIG (Big Informatics Gallery).
Akhir kata saya sebagai Admin BIG mengucapkan
semoga postingan tentang informasi 4 web penyedia hosting web gratis di
Indonesia dan tutorial
cara hosting web pada salah satu web hosting versi BIG (Big Informatics
Gallery) bermanfaat dan saya berharap artikel ini dapat berkenan dihati Anda.
Wabillahitopikwalhidayah, wassalammualaikum wr, wb...
