Tutorial HTML : Membuat Layout Meenggunakan HTML dan CSS

Tutorial HTML : Membuat Layout Meenggunakan HTML dan CSS

16.24

Binti Qomariah – Assalamu’alaikum Wr. Wb.
Hai teman-teman, kali ini saya akan membagikan tutorial saya mengenai Penggunaan HTML yaitu membuat layout. Apa itu layout?. Simak dulu.

A. JUDUL KEGIATAN
Tutorial HTML : Membuat Layout Meenggunakan HTML dan CSS.

B. PENDAHULUAN
1. Pengertian
Menurut blog ciakmedia.com, Layout adalah penyusunan dari elemen-elemen desain yang berhubungan kedalam sebuah bidang sehingga membentuk susunan artistik. Hal ini bisa juga disebut manajemen bentuk dan bidang.
2. Latar Belakang
Layout ini digunakan sebagai tempat atau wadah untuk sebuah website. Jadi, dalam pembuatan sebuah website, kita memerlukan layout.
3. Maksud dan Tujuan
Sebagai wadah untuk menempatkan website.
4. Hasil yang Diharapkan
Dapat membuat layout untuk website meskipun sederhana.

C. ALAT DAN BAHAN
- Text Editor
- Laptop atau Komputer

D. JANGKA WAKTU PELAKSANAAN KEGIATAN
-/+ 15-20 menit.

E. TAHAPAN PENGERJAAN
1. Siapkan text editor, apa saja bisa misalnya saja sublime text, atom, notepad++, gedit, visual studio dan masih banyak lagi. Tetapi kali ini saya menggunakan text editor sublime text.
2. Buat folder dengan nama sesuai selera kita. Disini saya menggunakan nama html layout. Kemudian buat file didalam folder tersebut dengan nama layout.html.
3. Buka file layout.html di text editor kita. Kemudian ketikkan :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>
4. Sama seperti tutorial sebelumnya, isi tag <title> terlebih dahulu. Kali ini tag <title> saya isi dengan Latihan Layout. Kemudian ketikkan ini di dalam tag <body> :
<div class="header">
<h1>Ini Layout</h1>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Galery</li>
<li class="kontak">Contact</li>
<div class="clear"></div>
</ul>
</div>
<div class="konten">
<div class="kiri">
<h2>Kewajiban</h2>
<p>Menyenangkan-Mu</p>
</div>
<div class="kanan">
<ul>
<li>Berita1</li>
<li>Berita2</li>
</ul>
</div>
</div>
Disini, yang kita tuliskan hanya tag <div>, tag <li> dan tag <ul>. Tag <div> yang saya gunakan kali ini adalah tag <div class=””>. Tag ini berfungsi untuk memberi nama yang nama tersebut nantinya akan kita gunakan untuk memanggil di css dan kita gunakan di css.
Untuk tag <ul> ini digunakan untuk membuat list atau daftar yang nantinya akan kita gunakan sebagai navigasi. Sedangkan, tag <li> digunakan untuk membuat list tersebut agar bisa tersusun kebawah, tidak memanjang ke samping.
5. Kemudian save file tersebut. Buka melalui browser, maka hasilnya akan seperti ini :

6. Karena belum ada CSS-nya, maka tampilannya masih polos. Untuk mempercantiknya, kita buat folder CSS-nya, disini saya membuat folder di dalam folder html layout dengan nama css. Selanjutnya kita buat file bernama layout.css.
7. Buka file css-nya di text editor kita. Kemudian untuk mempercantik header, kita ketikkan perintah :
.header {
background-color: orange;
}
Kenapa kita menggunakan tanda . (titik)?. Karena kita menggunakan div class. Jika kita menggunakan div id, kita akan menggunakan #. Disini header-nya saya beri background warna dengan warna oren.
8. Langkah selanjutnya, kita akan memodifikasi bagian navigasi. Ketikkan script :
.nav ul {
padding-left: 0;
}
.nav ul li {
float: left;
list-style: none;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
background-color: lightblue;
color: red;
}
Nav ul ini akan mengeksekusi navigasi di bagian yang ada tag <ul> nya saja di bagian <div class=”nav”> saja. Kemudian untuk nav ul li, dia akan mengeksekusi bagian <div class=”nav”> pada bagian tag <ul> dan tag <li>. Fungsi dari float: left ini adalah membuat list menjadi rata kiri, list-style akan menghilagkan bullet yang ada di list menjadi hilang karena diisi dengan none, padding akan mengatur ukuran yang menjadi border list, background-color akan memberi background warna di dalam navigasi, dan color akan memberi warna pada text navigasi.
9. Langkah selanjutnya, jika kita ingin memindah salah satu navigasi ke bagian kiri, maka kita gunakan perintah :
.nav .kontak {
float: right;
10. Selanjunya, kita akan mengeksekursi di bagian konten di kanan dan kiri. Ketikkan script :
.konten .kiri {
background-color: violet;
float: left;
width: 65%;
}
.konten .kanan {
background-color: lightgreen;
float: right;
width: 35%;
}
Di konten bagian kiri kita memberi warna violet dengan konten berada kanan dan memiliki tinggi 35%. Sedangkan di konten kanan kita samakan saja dengan konten kiri, hanya saja untuk perbandingan, kita ubah warna kontenya menjadi berwarna hijau muda. Save.
11. Kita lihat hasilnya di browser. Ini dia hasilnya.

F. HASIL YANG DIDAPATKAN
Dapat membuat layout menggunakan HTML dan CSS.

G. MASALAH YANG DIHADAPI
Sejauh ini belum ada masalah yang saya hadapi dalam pembuatan layout menggunakan HTML dan CSS.

H. KESIMPULAN
Kita bisa membuat layout sederhana hanya dengan menggunakan html dan CSS. Dan cara pembuatannya pun cukup mudah dan tidak memerlukan banyak waktu

I. REFERENSI


About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »
Langganan: Posting Komentar (Atom)