PERTEMUAN KE-4 Desain Hiro Image, Konten dan Footer

Capaian Pembelajaran

Mahasiswa mampu memahami serta mendemonstrasikan cara membuat Hiro Image, Konten dan Footer pada website.

Bahan Pokok Pembelajaran

Hiro Image

Konten

Footer

Tugas

Indikator Penilaian : Ketetapan mahasiswa dalam menangani bahan dari pokok pembelajaran.

1. Hiro Image

Hero image merupakan barner yang tampil pada halam utama sebuah website. Hiro image bisa di ambil dari fhoto atau gambar yang sesuai dengan kebutuhan atau fungsi dari sebuah website tersebut. Berikut ini merupakan contoh dari hiro image yang akan di buat pada bagian ini (yang ditandai warna kotak merah):

Gambar 4.1. Contoh Hiro Image

2. Langkah-langkah Membuat Hiro Image

Berikut ini adalah Langkah-langkah dalam membuat hiro image:

a. Buku Kembali file index.html

Untuk memulai membuat hiro image kita Kembali membuka dan menulis skrip di file index.html, setelah itu kita akan panggil gambar yang sudah kita simpan pada folder image di bahasan pada bab sebelumnya. Adapun skrip yang akan di tulis pada file index.html adalah seperti berikut ini:

Berikut ini adalah tampilan skrip di file index.html pada text editor (yang di kotak hijau).

Gambar 4.2. Contoh Skrip Hiro Image

b. Memberi Style Hiro Image

Untuk memberi style pada hiro image selanjutnya dalah membuka file stayle.css. kita akan menulis skrip untuk mengatur berapa tinggi, lebar serta padding pada bagian hiro image yang akan di tampilkan pada halaman web browser.

Berikut ini merupakan skrip yang harus di tulis pada file stayle.css di bawah skrip yang sudah ada sebelumnya:

.hero {

height: 300px;

background-image: url(..//IMAGE/Hiro.jpg);

background-size: cover;

background-position: 0 -120px;

border-top: 5px solid #00FA9A;

}

Gambar 4.3. Tampilan Hiro Image

3. Konten Website

Konten merupakan artikel-artikel yang terdapat pada sebuah halaman website. Konten ini bisa berisi sebuah Informasi seputar kebutuhan website yang akan di bangun.

Berikut ini adalah contoh konten yang akan dibuat pada bagian ini (yang ditandai kotak warna merah).

Gambar 4.4. Contoh Konten

Adapaun Langkah-langkah dalam membuat konten seperti contoh diatas adalah sebagai berikut ini:

a. Buka file Index.html

Untuk membuat konten seperti contoh kasus yang ada pada gambar diatas, maka kita kembali menulis skrip pada halaman index.html. berikut ini adalah contoh skrip yang di tulis pada file index.html:

<h2>Biografi Diri Saya</h2>

<p class="penulis">Di tulis Oleh

<a href=""> DARMANSAH </a> Pada 13 Juli 2023 </p>

<p>

Tulis sesuai kebutuhan untuk deskripsinya

</p>

</div>

Berikut ini adalah tampilan skrip di file index.html pada text editor (yang di kotak hijau) ketika sudah menulis skrip konten:

Gambar 4.5. Skrip Konten

Berikut ini merupakan tampilan di halaman web browser ketika kita sudah menulis skrip pada file index.html:

Gambar 4.6. Tampilan Konten

b. Memberi Style Konten H2

Pada gambar diatas, kita bisa melihat tampilan halaman website khususnya untuk konten masih belum rapi. Untuk mengatur tata letak dan merapikan konten kita perlu memberikan style css.

Untuk merapikan isi dari konten silahkan buka kembali file stayle.css, kemudian kita akan mengatur padding dan ukuran font Tag h2 dari skrip yang sudah dibuat.

Silahkan tulis skrip ini pada file stayle.css dibawah skrip sebelumnya:

.conten{

padding: 20px;

}

.conten h2{

font-size: 20px;

font-weight: bold;

}

Berikut ini merupakan tampilan di halaman web browser ketika kita sudah menulis skrip style pada file stayle.css:

Gambar 4.7. Tampilan Halaman Web

c. Memberi Style Konten P dan A

Setelah pada tahapan sebelumnya kita sudah memberi style pada konten dan Tag H2, selanjutnya kita akan memberi style pada penulis, paragraph dan aref.

Adapaun Langkah-langkahnya yaitu buka Kembali file stayle.css kemudian tuliskan skrip dibawah ini di bawah skrip sebelumnya:

.conten .penulis{

font-size: 12px;

}

.conten a{

color: #00FA9A;

text-decoration: none;

}

.conten p{

margin-bottom: 20px;

font-size: 12px;

text-align: justify;

}

Berikut ini merupakan tampilan di halaman web browser ketika kita sudah menulis skrip style pada file stayle.css:

Gambar 4.8. Tampilan Halaman Web

Pada tampilan gambar halaman web diatas, terlihat untuk konten sudah rapi, untuk isi konten atau deskripsi disini sudah memiliki rata kiri kanan, kemudian untuk penulis juga sudah terlihat rapi dari tampilan web sebelumnya.

4. Footer

Footer berisi informasi terkait siapa yang membuat/ mempunyai web tersebut. Footer juga berisi alamat atau data data dari sebuah pemilik website.

Berikut ini merupakan contoh dari footer yang akan di buat (yang di tandai di kota warna merah):

Gambar 4.9. Contoh Footer

Berikut adalah Langkah-langkah dalam membuat footer pada halaman website:

a. Buku Kembali file index.html

Pertama adalah membuat div baru untuk menempatkan footer. Silahkan buka Kembali fiile index.html dan tulis skrip di bawah ini:

</div>

Berikut ini adalah tampilan skrip di file index.html pada text editor (yang di kotak hijau) ketika sudah menulis skrip konten:

Gambar 4.10. Skrip Footer

Berikut ini merupakan tampilan di halaman web browser ketika kita sudah menulis skrip footer pada file index.html:

Gambar 4.11. Tampilan Footer

b. Memberi Style Footer

Setelah membuat footer pada tahapan sebelumnya, selanjutnya adalah memberi style pada footer yang sudah dibuat. Pemberian style footer ini untuk merapikan tampilan dari footer yang sudah di buat pada tahapan sebelumnya.

Langkah pertama dalam memberi footer yaitu buka Kembali file stayle.css dan tuliskan skrip berikut dibawah skrip sebelumnya:

.footer{

background-color: #808080;

padding-bottom: 20px;

padding-top: 10px;

}

.footer .copy{

color: white;

text-align: center;

font-style: 12px;

}

Berikut ini merupakan tampilan di halaman web browser ketika kita sudah menulis skrip style footer pada file stayle.css:

Gambar 4.12. Tampilan Footer

5. Tugas

Silahkan desain sebuah halaman website company profile, dimana tampilan dari website tersebut haru memiliki minimal 5 navigasi yang bisa di akses oleh user dan memiliki tampilan dari masing masing navigasi/menu tersebut.