CODE.ORG LESSON 8 LEVEL 5 (USING IMAGE)

Haloo semuanyaaa, hari ini saya akan mengerjakan Ujian TIK yaitu menjelaskan Code.Org lesson 8 Level 5!, daan tentunya harus menggunakan bahasa sendiri, jadi mohon dimaklumi kalau ada penjelasan yg tdk dipahami yaaa. yuk langsng aja kita kerjain Ujiannyaaa.

Nah di Lesson 8 level 5 ini, kita disuruh membuat tampilan website seperti yg ada di contoh berikut:

Nah yuk kita masuk ke penjelasannya!

STEP 1/TAHAP PERTAMA

Pada awalnya, kita harus mengubah nama file yg panjang dan acak ini menjadi lebih mudah ,
Seperti ini:
BEFORE:

AFTER:

Nahh, keliatan kan bedanyaa?? jadi lebih rapi dan enak dilihat daripada sebelumnya!, kalau sdh seperti ini, kita lanjut ke step berikutnya!

STEP 2/TAHAP KEDUA

di tahap ini, kita harus menambahkan imagenya terlebih dahulu, dengan cara apa?, dengan cara menambahkan tag image yaitu, <img src =”nama file gambar” alt=”nama dekskripsi gambar”>, nah sblm kita lanjut aku mau bahas dulu nih soal tag image ini, jadii, gunamua “src” disini untk mendapatkan file/sumber gambarnya, agar gambar bisa ditampilkan, sementara “alt” untk memeberi dekripsi pada gambar, jadi saaat gambar tdk bisa muncul , maka nanti di website akan menampilkan deksripsi gambarnya saja, kirang lebih begitu penjelasan singkat soal tag image ayo kita lanjut ke pembahasan langakh2nya yaitu cara menambahkan gambar

caranya, tekan file “index.html” nah kita akan menulis kodenya di baris 8/9 atau bida dibilang dibawah tag heading.

setelah itu kita hapus komentarnya, dan disini aku menggunakan tag list yaitu <ol> karna kita mau buat biar ada angkanya, nah agar membuat list dan ada angkanya lngsng ada degn menggunakan tag <ol> atau ordinal list., kurang lebih penulisannya seperti ini.

nah kalau sdh seperti ini kita tinggal masukin tag img, dan tambahin tag heading agar menambah tulisan nama hewan diatas gambar, sekaligus agar sebagai ukuran teks., contohnya seperti ini:

nah disini kita ambil sourcenya lewat file yg namanya sdh kita ubh tadi., pokoknya yg diblkngnya itu ada kata “.png” atau “.jpg”. itu kalin taurh di bagian source, nah untk bagian alt, kalian harus memberi deskripsi gambar contohnya seperti yg diatas, deskripsinya adalah axolotl, maka menunjukkan bahwa gambar itu adlh gambar axolotl.

Lalu jika sudh kalian lakukan hal yg sama, hingga semua gambar/ file gambar sdh kalian tulis semua di file index.html .
kurang lebih hasil nya akan seperti ini:

jika sdh seperti ini maka hasil kodenya akan seperti ini:

Nah jika kalian perhatikan, gambarnya itu ukurannya beda beda, dan tulisan nya juga kurang menarik/tidk ada warnanya maka dari itu kita akan membuat agar, gambarnya memiliki ukuran sama dan tulisannya memiliki warna.

LAST STEP/TAHAP TERAKHIR

Pertama tama, kalian buka file “amphibian.css” karna kita akan mengubah ukuran gambar dan warna teks disini.

nah pertama kita ubah dulu ukuran gambar, cara mengubahnya dengan menulis kode seperti berikut:

disini Width itu untk mengubah lebarnya dan height itu untk mengubah tingginya, dan disini yg kita ubh adlh img, jadi semua yg menggunakan tag image, maka akan mengikuti perubahan/gaya yg kita barikan didalm tanda kurung kurawal tersebut. kurng lebih hasil kodenya akan seperti ini.

nah skrg ukuran teksnya udh sama, kini kita akan mengubah teksnya menjadi berwarna, sesperti pada contoh diatas.
dan gimanasih cara ubahnya?, karna yg mau kita ubah itu teksnya sepeti teks “katak coklat”,”salamander”,”Axolotl”, kita harus tahu nih, dmn kita menulis teks/judul tersebut, kalo caraku ya, aku menulis judul/teksnya di tag heading maka dari itu kita tulis kodenya seperti ini,

nahh dengn menambahkan kode ini maka tampila websitenya akan menjadi seperti ini.

Dengan begini selesai sudah, penjelasan saya di Code.Org Lesson 8 Level 5 sekaligus untk Ujian TIK nya, semoga penjelasan saya membantu, dan dapat kalian pahami, mohon maklumi jika kalian tdk mengerti yaa, karna pada dasarnya saya tdk jago menjelaskan sesuatu kepada org lain. Sekian itu saja dari saya, terimakasih telah membaca postingan ini dari awal sampai akhir, jadi,, See you in the next post!!