Web Pemrograman
Alamat Web : https://yusrilhm.000webhostapp.com/
Deskripsi Web : disini saya membuat website dengan tema web interaktif, yang menjelaskan tentang pengertian dari macam2 bahasa pemrograman, mulai dari php, java script, php, ruby dan pyhton.
Fitur dan cara pembuatan :
1. Pada bagian <head> saya menambahkan beberapa meta dan tag < link> untuk menghubungkan kode cssnya, disini nama file css saya stylee.css
Berikut penjelasan dari beberapa meta yang saya tambahkan :
- <meta charset> untuk menyatakan encoding dari web atau dengan coding apa website dibuat disini saya menggunkan encoding UTF-8
- <meta name="viewport"> untuk mengatur tampilan web pada saat dibuka di device yang berbeda misalkan pada saat dibuka di browser laptop maka ukurannya akan besar jika dibuka di hp maka ukurannya akan mengecil mengikuti lebar dari layar hp, unutk mengatur lebar halaman agar mengikuti device yang bervariasi saya menambahkan content="widht-device-width", dan untuk menetapkan tingjat zoom awal halaman saya menambahkan "initial-scale=1.0"
- <meta http-equiv="X-UA=compatible"> untuk menentuan kode html akan dibuka pada internet explorer versi berapa, nilai atribute content="ie-edge" untuk menginstruksikan agar html yang saya buat untuk ditampilkan di internet explorer/browser versi terbaru.
Pada tag <body> saya menambahkan tag <div> yang didalamnya terdapat header, nav, img, p, dan footer. saya juga mengatur tampilan untuk body dengan css agar lebih menarik
pada badan utama saya menambahkan max-width 1080px untuk mengatur batas lebar elemen dengan ukuran margin 20px, bg-color saya gunakan white, lalu saya menambahkan padding dengan ukuran 20px dan text-align untuk mengatur letak text menjadi menengah dengan atribute center.
untuk header saya memberikan padding dengan ukuran 20px, lalu bg-color saya beri warna dengan kombinasi rgb 20,0,4, dengan warna text putih dan posisi text berada di tengah, untuk header h2 saya menggunan margin-bottom: 7px dan font-size 35px.
saya juga menambahkan fitur navigasi untuk memudahkan pembaca memilih materi apa yang ingin dibaca , saya menggunakan <ul> yang di dalamnya terdapat tag <li> dan tag link <a> dengan code seperti di bawah
agar menarik saya membuat li a , hover agar ketika mouse di kearahkan ke link memberi efek transisi, dengan warna merah, dan durasi transisi 1 detik.
pada isi konten saya menambhakna tag <section> unutk memisahkan setiap materi atau konten dengan mabhkan id sesuai dengan nama judul agar ketika link <a> di navbar di klik maka akan menuju ke konten yang di inginkan, say amembuat judul dengan <h3> dan menambahkan image dengan ukuruan height dan widht menyesuaikan dengan ukuran gambar asli, lalu saya menambahkan tag <p> yang di dalamnya terdapat isi artikel, dan di akhir saya menambahkan tag <a> untuk link ke menu home atau menu utama untuk memudahkan pembaca ketika ingin kembali ke menu utama.
Tidak ada komentar:
Posting Komentar