PERTEMUAN KE-2 DESAIN HEADER

1. Desain Layout Website

Pada tahapan ini kita akan merancangan halaman utama sebuah website (Layout). Halaman utama website terdiri dari header, navigasi, hero image, artikel dan footer. Adapaun bentuk rancangan yang akan di rancang seperti gambar berikut ini:

Gambar 2.1. Desain Layout Website

Dari gambar 2.1 diatas, kita isa melihat kerangka atau desain layout yang akan dibuat. Adapun rancangan dalam bentuk halaman website dari desain tersebut, dapat di lihat pada gambar dibawah ini:

Gambar 2.2. Contoh Layout Website

Gambar diatas merupakan contoh dari tampilan Layout website sederhana menggunakan HTML dan CSS yang akan kita buat.

2. Header Website

Pada materi diatas kita sudah bisa melihat seperti apa contoh dari halaman website (Layout) yang akan kita. Dari contoh tampilan Layout website tesebut kita akan mendemokan bagaimana cara membuat contoh dari halaman website seperti yang terdapat pada gambar 2.2 diatas.

Berikut ini adalah beberapa tahapan ketika kita akan membuat tampilan dari halaman website yang terdapat pada gambar 2.2 diatas menggunakan HTML dan CSS.

a. Membuat Folder

Langkah pertama dalam membuat projek layout website menggunakan HTML dan CSS, maka kita perlu membuat folder di data (D) atau data (C). untuk penyimpanan folder ini tidak masalah jika kita membuat folder di D atau C, karena kita tidak menggunakan web server dalam perancangan layout tersebut. Adapun nama folder yang akan dibuat adalah “Layout Website”, kemudian didalam folder tersebut terdapat 2 buah anak folder yaitu “CSS dan IMAGE”. Berikut ini adalah contoh struktur tabelnya:

Gambar 2.3. Struktur Tabel

b. Mengisi Data Folder IMAGE

Setelah folder berhasil dibuat seperti gambar 2.3 diatas, maka selanjutnya adalah melengkapi data data yang diperlukan dalam folder IMAGE tersebut, Adapun data yang di perlukan seperti : Fhoto atau gambar yang akan dipakai saat membuat layout tersebut. Untuk mendapatkan gambar gambar yang bisa dipakai dalam pembuatan website bisa di cari di berbagai alamat di google seperti pada alamat www.pexesl.com dan di www.subtlepatterns.com atau disesuaikan dengan kebutuhan website yang akan dibangun. Berikut ini contoh dari gambar gambar yang di pakai dalam pembuatan layout website tersebut:

Gambar 2.4. Isi Folder IMAGE

c. Membuka Text Editor

Setelah data yang dibutuhkan pada folder IMAGE diatas, maka langkah selanjutnya adalah membuka text editor yang dipakai dalam pemrograman web. Pada kesempatan ini menggunakan aplikasi atau text editor sublime text.

Gambar 2.5. Text Editor Sublime Text

setelah aplikasi sublime text dibuka, maka selanjutnya adalah memasukan folder yang sudah dibuat sebelumnya yaitu folder “Layout Website” kedalam aplikasi sublime text yang sudah dibuka sebelumnya. Adapaun cara memasukan atau memanggil folder Layout Website kedalam aplikasi Sublime Text seperti berikut ini:

a) Klik menu file yang terdapat pada pojok kiri text editor.

b) Klik Open Folder.

c) Cari Folder

Berikut ini adalah contoh Langkah memanggil folder Layout Website kedalam aplikasi Sublime Text:

Gambar 2.6. Memanggil Folder Di Sublime Text

d) Selesai

Setelah proses pada langkah point diatas selesai dilakukan maka, tampilan halaman sublime text menjadi seperti gambar di bawah ini:

Gambar 2.7. Folder Di Sublime Text

d. Membuat File Index

Langkah selanjutnya adalah membuat file index.html pada text editor. File index ini nanti yang akan menjadi halaman utama website atau layout website yang akan dibuat. Adapun Langkah-langkah dalam membuat file index,html tersebut seperti berikut ini:

a) Klik File pada pojok kiri atas halaman text editor,

b) Klik New file

Berikut ini adalah tampilan dari Langkah diatas:

Gambar 2.8. Membuat File Index

c) Simpan File

Setelah new file di klik, maka silahkan simpan file tersebut pada folder Layout Website dengan nama file yaitu index.html dan klik simpan.

Berikut ini contoh dari simpan file tersebut:

Gambar 2.9. Simpan File Index

d) File Index Sukses Dibuat.

Ketika sukses membuat file index.html maka file index.html akan masuk di halaman text editor sehingga tampilan dari halaman text editor saat ini seperti gambar dibawah ini:

Gambar 2.10. File Index Sukses

Sedangkan untuk tampilan pada halaman data D seperti berikut ini:

Gambar 2.11. File Index Sukses 1

e. Membuat Header

Setelah pada tahapan sebelumnya sudah berhasil membuat file index.html maka selanjutnya adalah mengisi konten konten yang adakan di tampilkan pada halaman index tersebut. File index.html tersebut merupakan halaman utama dari contoh layout website yang akan dibuat.

Sesuai dengan contoh desain yang terdapat sebelumnya, maka konten pertama yang akan dibuat pada halaman atau layout website tersebut adalah “Header”.

Header merupakan sarat yang harus dibuat dalam sebuah rancangan website. Header merupakan penunjuk atau kepala dari sebuah website tersebut. Adapaun contoh header yang akan di buat dapat dilihat pada gambar di bawah ini yang di tandai dengan kolom warna merah:

Gambar 2.12. Contoh Header

Berikut ini adalah lagkah Langkah untuk membuat header seperti contoh diatas:

a) Menulis TAG HTML

Tulislah skrip berikut ini pada halaman index.html:

<!DOCTYPE html>

<html>

<head>

<title>Web Dasar 2</title>

</head>

<body>

</body>

</html>

Adapun contoh dari halaman text editor pada file index.html seperti gambar di bawah ini:

Gambar 2.13. Contoh Skrip HTML

b) Menulis Skrip Header

Tulislah skrip berikut ini pada halaman index.html pada bagian “<body>”:

Contoh skrip setelah krip header dibuat pada halaman text editor pada file index.html:

Gambar 2.14. Contoh Skrip Header

Berikut ini adalah contoh tampilan halaman website pada web browser:

Gambar 2.15. Contoh tampilan header

f. Membuat Style CSS

Untuk mengatur tampilan halaman website yang sudah kita jalankan di web browser seperti contoh gambar 2.15 diatas, maka kita perlu membuat CSS untuk mengatur tampilan dari halaman website.

Berikut ini adalah Langkah Langkah dalam membuat CSS:

a) Klik File pada pojok kiri atas halaman text editor,

b) Klik New File

Berikut ini adalah tampilan dari Langkah diatas:

Gambar 2.16. Langkah membuat file CSS

c) Simpan File Stayle.css

Setelah Langkah di atas dilakukan maka silahkan simpan dengan cara tekan tombol ctrl+s dan simpan pada foder CSS yang sudah dibuat sebelumnya. Adapaun nama file yang akan dibuat adalah stayle.css, berikut ini adalah contoh ketika menyimpan file stayle.css:

Gambar 2.17. Simpan File Stayle.css

Adapun contoh dari halaman text editor pada file stayle.css seperti gambar di bawah ini:

Gambar 2.18. Tampilan File Stayle.css

g. Reset CSS

CSS Reset adalah sebuah cara untuk mengatur atau mengendalikan merubah semua elemen HTML menjadi 0, sehingga memudahkan dalam mengatur tampilan dari halaman web yang akan dibuat. Berikut ini adalah skrip yang harus di tulis pada file stayle.css yang sudah dibaut pada Langkah sebelumnya. Untuk krip Reset CSS bisa di ambil pada halaman:

https://meyerweb.com/eric/tools/css/reset/

Adapun bentuk skrip pada halaman stayle.css seperti gambar dibawah ini:

Gambar 2.19. Reset CSS

h. Memanggil File Stayle.css

Setelah selesai menulis skrip reset css pada file stayle.css, maka selanjutnya adalah menghubungkan file stayle.css, dengan file index.html.

Berikut ini adalah Langkah langkahnya:

a) Buka file index.html

Silahkan buka file index.html dan tuliskan skrip berikut ini pada bagian bagian <haed>:

Adapun bentuk tampilan halaman text editor seperti berikut ini (kolom warna hijau):

Gambar 2.20. Memanggil stayle.css

b) Tampilan Halaman Web Browser

Setalah berhasil memanggil file stayle.css dari file index.html, maka silahkan jalan halaman website di browser yang di miliki. Berikut ini adalah tampilan sementara halaman website yang dibuat:

Gambar 2.21. Tampilan Halaman Web Header

i. Memberi Style Header

Sebelumnya kita sudah berhasil memanggil file CSS di halaman index.css. selanjutnya adalah membuat atau memberi statle pada bagian header. Adapun Langkah-langkah nya seperti berikut ini:

a) Buka Kembali file stayle.css

Setelah membuka file stayle.css selanjutnya silahkan tuliskan skrip berikut ini pada file stayle.css dibawah skrip sebelumnya.

body{

background-image: url(..//image/BG1.png);

font: 16px/20px arial;

}

.container{

width: 800px;

margin: auto;

background-color: white;

}

b) Jalankan halaman web di browser

Setelah selesai membuat skrip diatas pada file stayle.css, selanjutnya menjalankan halaman web tersebut di browser, sehingga tampilan halaman website sekarang sudah seperti gambar di bawah ini:

Gambar 2.22. Tampilan Halaman Web Header

c) Memberi Padding Dan Font Header

Setelah mengatur container dan body pada header, selanjutnya adalah memberi ukuran font dan padding pada header. Silahkan tulis skrip berikut di fiile stayle.css di bawah skrip sebelumnya:

.header{

padding: 20px;

padding-bottom: 10px;

}

/* Mengatur besar huruf judul*/

.header .judul{

font-size: 50px;

}

Berikut ini adalah hasil dari skrip di atas ketika halaman web dibuka di web browser: