Coding Practice

Untuk Kebutuhan trial kali ini, silahkan klik tombol di bawah untuk membuka projek

Klik Disini

Coba perhatikan kode di sebelah kiri. Kode ini disebut HTML yang berfungsi untuk membangun website. Kode HTML terdiri dari banyak jenis tag yang menyusun website.

Kali ini kamu akan belajar beberapa tag HTML.

Coba perhatikan lagi website tersebut! Sebenarnya website ini belum lengkap! Website ini belum memiliki Judul. Untuk menampilkan Judul, gunakan tag HTML yaitu tag h1. Format penulisan kode tag h1 seperti berikut.

Kode di atas terdiri dari tag pembuka, isi teks yang ingin ditampilkan dan tag penutup. Dengan menggunakan kode tersebut sebuah teks akan memiliki ukuran yang besar dan ketebalan yang berbeda dibandingkan dengan teks lainnya. Ayo gunakan tag ini untuk melengkapi website tadi!

1. Coba tambahkan judul utamanya dengan teks “It's Hoodie.me” atau kamu boleh menggunakan Judulmu sendiri. Gunakan tag yang baru saja kamu pelajari!

Letakan kodenya pada baris ke-20.
Lalu klik preview. Apakah Judul yang kalian buat sudah tampil?

Nah berikutnya, agar lebih menarik kita tambahkan gambar disamping judul utama. Dengan menambahkan gambar, tampilan website ini akan menjadi semakin menarik dan berkarakter.

Untuk menampilkan gambar, gunakan tag HTML lain yaitu tag img. Format penulisan kode tag img dapat dilihat pada gambar di bawah.

Ukuran setiap gambar pasti berbeda tergantung kualitas gambar dan bagaimana gambar tersebut diabadikan. Gambar-gambar yang kamu tampilkan tidak selalu memiliki lebar dan tinggi yang sama antara satu dan yang lainnya. Untuk mengatur gambar agar sesuai dengan keinginan, gunakan kode ini:

Kode diatas dapat kamu letakan di dalam tag img seperti ini ya:

Kode ini akan menampilkan gambar yang telah kamu atur lebarnya sebesar 300 pixel. Tinggi gambarnya akan mengikuti perbandingan lebarnya. Jadi tidak perlu khawatir, gambar yang kamu tampilkan akan tetap memiliki proporsi yang sama dengan gambar aslinya. Selamat Mencoba!

2. Coba tambahkan gambar menggunakan kode yang baru saja kamu pelajari. Ukuran gambar ini sangat besar. Jadi, pastikan kamu mengatur ukuran gambarnya sehingga memiliki lebar 400 pixel!

Letakan pada baris ke-26! Berikut Data yang harus kamu masukan:

Lalu klik preview lagi dan lihat perubahannya! Apakah gambarnya sudah muncul?

Coba lihat preview website dan perhatikan bagian Reseller. Pada bagian ini kita akan menampilkan teks bercetak tebal. Untuk menampilkan teks cetak tebal gunakan tag b.
Tag b akan membantu pembaca menemukan informasi penting di dalam suatu website karena tampilannya yang berbeda dengan teks lainnya. Format penulisan kode tag b seperti ini.

Sama seperti tag h1, Tag b terdiri tag pembuka, isi teks yang ingin ditampilkan menjadi teks cetak tebal, dan tag penutup. Ayo tunggu apalagi, gunakan tag ini untuk melengkapi website tadi! Selamat Mencoba!

3. Sekarang website ini membutuhkan informasi kontak yang bisa dihubungi oleh Reseller. Tambahkan informasi yakni namamu dengan teks cetak tebal!

Letakan kodenya pada baris ke-43, kemudian klik “preview” untuk melihat hasilnya!

4. Nama saja tidak cukup bukan? Kita perlu menambahkan nomor telepon untuk bisa dihubungi oleh calon Reseller.Ayo tampilkan nomor telepon yang bisa dihubungi dengan teks cetak tebal!

Letakan pada baris ke-46! Kamu bisa menggunakan nomor teleponmu jika kamu mau. Klik “preview” dan lihat hasilnya!