Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pengayaan Ujikom 2021 - HTML 2

    Diunggah oleh

    Tresna Retna Asih
    13 tayangan6 halaman
    Dokumen ini memberikan instruksi langkah demi langkah untuk membuat tampilan halaman utama (home) dan mengeditnya. Langkah-langkahnya meliputi membuat file baru home.php, mengubah judul, menu, dan warna tampilan untuk membuat tampilan yang konsisten. Dokumen ini juga menginstruksikan untuk membuat file-file baru catatan_perjalanan.php dan isi_data.php dengan mengcopy isi home.php.

    Deskripsi Asli:

    Judul Asli

    PENGAYAAN UJIKOM 2021 - HTML 2

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen ini memberikan instruksi langkah demi langkah untuk membuat tampilan halaman utama (home) dan mengeditnya. Langkah-langkahnya meliputi membuat file baru home.php, mengubah judul, menu, dan warna tampilan untuk membuat tampilan yang konsisten. Dokumen ini juga menginstruksikan untuk membuat file-file baru catatan_perjalanan.php dan isi_data.php dengan mengcopy isi home.php.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    13 tayangan6 halaman

    Pengayaan Ujikom 2021 - HTML 2

    Diunggah oleh

    Tresna Retna Asih
    Dokumen ini memberikan instruksi langkah demi langkah untuk membuat tampilan halaman utama (home) dan mengeditnya. Langkah-langkahnya meliputi membuat file baru home.php, mengubah judul, menu, dan warna tampilan untuk membuat tampilan yang konsisten. Dokumen ini juga menginstruksikan untuk membuat file-file baru catatan_perjalanan.php dan isi_data.php dengan mengcopy isi home.php.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    LATIHAN PRAKTIK

    UJI KOMPETENSI KEAHLIAN 2021/2022

    Membuat tampilan home


    Halaman home adalah halaman utama. Halaman ini merupakan halaman menu utama yang muncul pertama
    kali ketika pengguna berhasil login.
    Berikut langkah-langkah yang bisa kita lakukan:
    1. Bukalah file dashboard.html pada folder pengayaan_ujikom yang berada di C://xampp/htdocs
    menggunakan aplikasi Sublime Text ataupun Notepad++ (Pada contoh ini saya menggunakan
    Notepad++ karena lebih ringan untuk dijalankan di PC dengan spesifikasi standard).
    Maka akan tampil seperti berikut ini :

    2. Setelah itu, pada keyboard kita tekan Ctrl+A kemudian klik kanan dan pilih Copy
    3. Lalu buatlah file baru di menu File > New
    4. Paste-lah di dalam file baru tersebut kodingan yang tadi dengan cara klik kanan > pilih Paste
    5. Kemudian simpanlah file baru tersebut dengan nama home.php di dalam folder pengayaan_ujikom.
    Jika berhasil disimpan maka teks akan berubah warna.
    6. Untuk mengeceknya, kita buka kembali aplikasi Google Chrome kemudian akseslah
    localhost/pengayaan_ujikom/home.php

    Mengedit tampilan home.php


    Dengan mengacu pada tutorial pertama kemarin cobalah kerjakan tugas ini :
    1. Mengubah Title menjadi “Home”
    2. Mengubah tulisan “Dashboard” menjadi “Home”. Mengubah tulisan “Company Name” menjadi
    “NAMA APLIKASI (Bebas sesuai kalian)” Sehingga tampilannya seperti ini :

    1
    3. Mengubah menu pinggir
    Menu pinggir berguna untuk mengakses halaman-halaman selanjutnya. Menu yang diperlukan ialah :
    - Home
    - Catatan Perjalanan
    - Isi Data
    Untuk mengubahnya, buka home.php kemudian kita cari <div class=”sidebar-sticky pt-3”> kurang
    lebih kodenya seperti ini :

    Untuk mengubah teks, ubahlah tulisan warna hitam menjadi seperti ini :
    - Dashboard menjadi Home
    - Tables menjadi Catatan Perjalanan
    - Forms menjadi Isi Data
    Kemudian untuk mengubah tujuan menu halaman ketika di klik (href), tulisan warna ungu di bagian
    href kita ubah menjadi seperti ini :
    - dashboard.html menjadi home.php
    - tables.html menjadi catatan_perjalanan.php
    - forms.html menjadi isi_data.php

    2
    Sehingga ketika mengakses localhost/pengayaan_ujikom/menu_utama.php menjadi seperti ini :

    4. Mengubah warna menu pinggir


    Seperti yang sudah kita ketahui, mengubah warna berhubungan dengan kode hex. Di atas kode <div
    class=”sidebar-sticky pt-3”> yang telah kita edit tadi, carilah kode seperti ini :
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse"
    style="background-color: #f5f5f5;">

    Untuk merubahnya, perhatikan bagian style="background-color: #f5f5f5;" . Disana terdapat kode


    hex yang bisa kalian rubah. Disini sebagai contoh kita ubah menjadi pink muda (senada dengan
    halaman login), kodenya adalah #ffd6e4. Kalian bebas memakai warna apa saja, ya!
    Jika berhasil, tampilan pasti akan berubah :

    3
    5. Mengubah warna menu atas
    Di bagian atas kode <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block sidebar
    collapse" style="background-color: #f5f5f5;"> yang telah kita edit tadi, carilah kode seperti ini :
    <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow" style="background-
    color: #2e2e2e;">

    Untuk merubahnya, perhatikan bagian style="background-color: #2e2e2e;" . Disana terdapat kode


    hex yang bisa kalian rubah. Disini sebagai contoh kita ubah menjadi pink tua (senada dengan halaman
    login), kodenya adalah #db678f. Kalian bebas memakai warna apa saja, ya!
    Jika berhasil, tampilan pasti akan berubah :

    4
    6. Mengubah warna background
    Di bagian atas kode <nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow"
    style="background-color: #2e2e2e;"> yang telah kita edit tadi, carilah kode seperti ini :
    <body style="background-color: #ffffff;">

    Seperti yang sudah dilakukan sebelumnya untuk mengubahnya kita tinggal mengubah kode hex yang
    ada. Disini saya akan membiarkannya tetap putih.

    Setelah berhasil membuat halaman home.php selanjutnya buatlah file baru dengan mengcopy semua isi dari
    home.php dan merubah tulisannya. File-file baru tersebut ialah :

    catatan_perjalanan.php

    5
    isi_data.php

    Selesai..
    Tinggal melanjutkan ke PENGAYAAN UJIKOM 2021 – PHP di pertemuan selanjutnya!

    Anda mungkin juga menyukai