• Tidak ada hasil yang ditemukan

Membuat Menu Navigasi

N/A
N/A
Protected

Academic year: 2022

Membagikan "Membuat Menu Navigasi"

Copied!
6
0
0

Teks penuh

(1)

Membuat file HTML untuk Menu Navigasi

Baiklah kita langsung saja , ketikkan kode HTML untuk membuat menu navigasi dibawah ini :

<html>

<head>

<title>Membuat Menu Navigasi</title>

<link href="style.css" rel="stylesheet" type="text/css"

media="all" />

</head>

<body>

<div id="container">

<div id="menu">

<a href="#">HOME</a>

<a href="#">PRODUK</a>

<a href="#">ARTIKEL</a>

<a href="#">MEMBER</a>

<a href="#">TESTIMONIAL</a>

<a href="#">KONTAK</a>

<a href="#">ABOUT US</a>

</div>

</div>

</body>

</html>

Keterangan dari kode HTML diatas:

 Kode tersebut saya ambil hanya bagian menu navigasi saja dari file HTML layout website yang nantinya bisa di gabung lagi sehingga bisa membentuk sebagai website utuh.

 Disini saya hanya menambahkan navigasi mulai Home sampai dengan About

Us, anda bisa merubah sesuai dengan keinginan anda sendiri, dan saya sudah memberikan link yang isinya hanya “#”.

Buatlah folder baru dengan nama Bab II Membuat Menu Navigasi dan simpan file HTML diatas dengan nama menu-navigasi.html

Membuat File CSS dari Menu Navigasi

Selanjutnya anda buat lagi file CSS berikut ini :

#container{

width:1000px;

margin:0 auto;

font-family: verdana;

}

#menu{

background-color:#993300;

width:1000px;

text-align:center;

padding-top:10px;

padding-bottom:10px;

} a:link{

background-color:#FFFF00;

color:#000099;

text-decoration:none;

font-size:14px;

}

(2)

a:hover{

background-color:#0000CC;

color:#FFFFFF;

font-weight:bold;

text-decoration:underline;

font-size:16px;

} a:active{

color:#000000;

background-color:#FFFFFF;

font-weight:100;

}

Penjelasan dari CSS rule diatas sebagai berikut ini :

#container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah.

#menu {…} untuk membuat background menu dengan warna #993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan memberi nilai padding atas dan bawah masing-masing 10 px.

a:link {…} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan

pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px.

a:hover {…} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih ( #FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px.

a:active {…} dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam (

#000000 ) lalu ketebalan saya kembalikan lagi seperti asal.

Setelah itu simpan file ini dengan nama style.css didalam folder sama dengan file HTML, lalu anda jalankan.

Berikut screenshotnya :

Menu file HTML menu navigasi tanpa CSS

Menu Navigasi setelah ada CSS dan Ketika file dibuka

Menu Navigasi setelah ada CSS dan Ketika mouse berada diatas

Menu Navigasi setelah ada CSS dan Ketika di klik

(3)

Membuat Desain Layout Website

Pertama kali jika anda akan membuat suatu website, sebagai dasar dari bentuk awal pembuatan website.

Untuk itu silahkan anda buat dulu folder untuk menaruh file hasil praktek, misalnya saya membuat folder Bab1 Layout website

Lalu anda buka folder tersebut dan buatlah lagi folder dengan nama images yang berfungsi untuk menampung images.

Copy file gambar dari lampiran ebook ini yang saya sertakan dalam Folder images yang terdapat dalam folder Bab1 Membuat layout, file gambar tersebut ada 2 buah file yaitu header.jpg dan footer.gif.

File gambar header.jpg

File footer.gif

(4)

Membuat file HTML layout

Oke…sekarang anda buka notepad++ anda, atau jika anda bisa menggunakan software yang biasa anda gunakan lalu ketikkan kode HTML berikut ini:

<html>

<head>

<title>Membuar Layout Web</title>

<link href="style.css" rel="stylesheet" type="text/css"

media="all" />

</head>

<body>

<div id="container">

<div id="header">

</div>

<div id="menu">

</div>

<div id="content">

</div>

<div id="right">

<!--Isi dengan konten/artikel-->

</div>

<div id="footer">

<!--Isi dengan konten/artikel-->

</div>

</div>

</body>

</html>

Keterangan dari kode diatas:

 Kode diatas murni kode HTML dan anda telah membuat tag DIV dengan masing-masing diberikan selector ID, anda masih ingat tentunya dengan selector ID yang dipisahkan dari header,menu navigasi,content, menu kanan,footer. Jika lupa, silahkan and abaca lagi ebook saya yang pertama.

 Kode komentar dengan warna merah perlu anda isi dengan konten atau artikel, karena jika anda tidak mengisi dengan artikel maka hasilnya tidak akan kelihatan (dalam file contoh telah saya beri artikel).

 Kode yang saya tebalkan merupakan link untuk menggabungkan dari File HTML dengan File CSS.

Lalu simpan dalam folder Bab1 Membuat layout yang sudah anda buat, beri nama dengan index.html , jika anda jalankan dengan klik 2 kali maka penampilannya masih tidak karuan hanya tulisan dari content saja karena anda belum membuat kode CSS yang bertujuan mendesain tampilan dan halaman layout web anda.

(5)

Membuat file CSS layout

Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda.

Berikut kode dari file CSS :

* {

margin: 0;

padding: 0;

} body {

font-family: Arial, Helvetica, sans-serif;

}

#container{

width:1000px;

margin:0 auto;

}

#header{

background-image:url(images/header.jpg);

background-repeat:no-repeat;

background-position:center;

background-color:#FFFF99;

width:1000px;

height:160px;

}

#menu{

background-color:#993300;

width:1000px;

height:35px;

}

#content{

background-color:#EBEBEB;

width:700px;

float:left;

}

#right {

width:300px;

background-color:#EBEBEB;

float:left;

}

#footer{

background-image:url(images/footer.gif);

width:1000px;

height:128px;

float:left;

}

Penjabaran dari kode diatas:

 Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0.

 Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif .

 Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto.

 Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px.

 Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px.



(6)

 Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan

background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ).

 Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.

 Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128 px, penempatan Float left.

Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.

Jika benar maka tampilan dari isi folder yang anda buat seperti gambar diatas.

Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya .

Tampilan layout setelah diberi pengaturan CSS Catatan :

 Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet.

 Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada bab tersendiri.

Referensi

Dokumen terkait

Kepala Sub Bagian Kerja Sama Pada Bagian Program dan Kerjasama, Sekretariat Badan Penyuluhan dan Pengembangan Sumberdaya Manusia Kepala Bidang Perencanaan,

Begitu pula dengan hasil observasi siswa menunjukkan adanya peningkatan pada tanggung jawab, kerjasama dan kedisiplinan saat pembelajaran dengan memperoleh nilai

dari Fakultas Ekonomi Universitas Sumatera Utara Medan adalah lulusan yang. mempunyai kualitas yang baik dan mampu bersaing dilapangan

Penyusunan Laporan Akuntabilitas Instansi Pemerintah (LAKIP) ini adalah wujud pertanggungjawaban Pemerintah Kota Pagar Alam, yang berisi tentang informasi kinerja baik

• Capacity Requirement Planning (CRP) adalah suatu metode yang bisa digunakan untuk merencanakan kebutuhan kapasitas produksi, yang merupakan fungsi untuk menentukan, mengukur,

Peningkatan kejadian penyakit periodontal seiring dengan peningkatan usia pasien dan kerusakan jaringan gigi yang menyebabkan daerah edentulous pada pasien dewasa,

Sesuai dengan judul dalam penelitian ini, maka yang menjadi sampel penelitian adalah : Wajib Pajak Badan yang melakukan restitusi PPN LB dan Fiskus.. Berdasarkan pada

 Untuk area dalam kota, manajemen parkir berfokus untuk meminimalisir pengguna kendaraan pribadi sedemikian sehingga mereka lebih memilih menggunakan angkutan umum..  Untuk