TUGAS PEMOGRAMAN BERBASIS WEB

MINGGU - 2

Disusun Oleh :
Nama : ABDUL HARRIS
NIM : 18076012
Prodi : Pendidikan Teknik Informatika Komputer
Dosen : Dr. Resmi Darni, M.Kom

JURUSAN ELEKTRONIKA
FAKULTAS TEKNIK
UNIVERSITAS NEGERI PADANG
2020
A. Alat dan bahan
1. Sublime text2

B. Langkah Kerja
1. Buka sublime text2
2. Setelah sublime text2 dibuka simpan terlebih dahulu dengan shift+ctrl+s, buat
namanya seperti gambar berikut.

Dalam membuat web menggunakan html menyimpannya dengan format .html

contohnya merdeka.html
3. Ketikan kodingan html kemudian tab maka hasilnya akan seperti gambar berikut.

Kodingan diatas merupakan kodingan standard dan wajib dalam membuat web
menggunakan html.
4. Pada title ketikan nama website yang dibuat seperti gambar berikut.
5. Pada head tambahkan kodingan seperti gambar berikut.

Fungsi dari link adalah untuk melink-kan atau menghubungkan html dan css, pada
href digunakan untuk menunjukkan css mana yang kita gunakan, karena yang kita
link-kan adalah css maka formatnya juga .css
6. Pada body tambahkan kodingan seperti gambar berikut.

Fungsi style adalah untuk mengatur tata letak, ukuran maupun bentuknya,
padding berfungsi mengatur jarak pada web yang akan kita buat.
7. Sekarang kita buat table nya dengan kodingan seperti gambar berikut.
 Maka outputnya akan seperti gambar berikut.

Fungsi table adalah untuk membuat tabel, pada table terdapat border yang
berfungsi untuk menampilkan garis tabelnya, dan width yang berfungsi untuk
mengatur lebar dari table tersebut.
Fungsi tr adalah untuk membuat baris pada table dan td berfungsi untuk membuat
kolom pada table.
8. Ketikan koding seperti gambari berikut.
 Maka outputnya akan seperti gambar berikut.

Fungsi colspan adalah untuk menggabungkan kolom pada table sedangkan

rowspan berfungsi untuk menggabungkan baris pada table.
9. Ketikan koding seperti gambari berikut.

Maka outputnya akan seperti gambar berikut.

Pada kodingan tersebut, kita memasukan gambar pada baris pertama dalam tabel.
img style berfungsi untuk mengatur gambar diman pada kodingan mengatur tinggi
dan lebar gambar, src berfungsi untuk menunjuk letak dan nama gambar yang
digunakan atau yang dimasukkan.
10. Ketikan kodingan seperti gambar berikut.

Maka outputnya akan sepeti gambar berikut.

Pada kodingan tersebut, kita membuat tempat untuk masukan text. Input type
berfungsi untuk menentukan jenis inputan yang dimasukan, float : right berfungsi
untuk mengatur letaknya di kanan, width dan height berfungsi untuk mengatur ukuran
tinggi dan lebarnya, border-radius berfungsi untuk mengatur sudut dari bordernya
semakin tinggi maka semaking bulat sudut dari bordernya, background-color
berfungsi untuk mengatur warna backgroundnya, border-width berfungsi untuk
mengatur ukuran dari bordernya, text-align berfungsi untuk mengatur letak textnya,
placeholder berfungsi untuk membuat label atau text dalam tempat masukan tersebut.

11. Ketikan kodingan seperti gambar berikut ini.

 Maka outputnya akan seperti gambar berikut ini.

Pada kodingan tersebut, kita memasukan text yang jika diklik akan masuk ke
halaman selanjutnya dari web. A href berungsi untuk menunjukkan ke halaman mana
web kita selanjutnya jika diklik, TRENDING berfungsi sebagai label atau text yang
ditampilkan pada web.

12. Ketikan kodingan seperti gambar berikut.

 Maka outputnya akan seperti gambar berikut.

Pada kodingan tersebut, kita memberikan background pada kolom.

13. Ketikan kodingan seperti gambar berikut.

Maka outputnya akan seperti gambar berikut.

Pada kodingan tersebut, kita memasukan text yang jika diklik akan masuk ke
halaman selanjutnya dari web. A href berungsi untuk menunjukkan ke halaman mana
web kita selanjutnya jika diklik, HOT TOPICS berfungsi sebagai label atau text yang
ditampilkan pada web,   berfungsi sebagai tap yang mengasih jarak antara text.
14. Ketikan kodingan seperti gambar berikut.

Maka outputnya akan seperti gambar berikut.

Pada kodingan tersebut, kita memasukan text yang jika diklik akan masuk ke
halaman selanjutnya dari web. A href berungsi untuk menunjukkan ke halaman mana
web kita selanjutnya jika diklik, HOT TOPICS berfungsi sebagai label atau text yang
ditampilkan pada web.
15. Ketikan kodingan seperti gambar berikut.
 Maka outputnya akan seperti gambar berikut.

Pada kodingan tersebut, kita memasukkan gambar dan tulisan dimana tulisan
tersebut bisa diklik untuk masuk ke halaman web selanjutnya. A href berungsi untuk
menunjukkan ke halaman mana web kita selanjutnya jika diklik, div berfungsi untuk,
br berfungsi untuk membuat garis baru, font berfungsi untuk.
16. Ketikan kodingan seperti gambar berikut.

Maka outputnya akan seperti gambar berikut.

 Pada kodingan tersebut, kita memasukkan gambar dan tulisan dimana tulisan
tersebut bisa diklik untuk masuk ke halaman web selanjutnya. A href berungsi untuk
menunjukkan ke halaman mana web kita selanjutnya jika diklik, div berfungsi untuk
membuat layar yang akan mempermudah kita untuk membuat layout sesuai dengan
desain yang diinginkan, br berfungsi untuk membuat garis baru, font berfungsi untuk
digunakan untuk mengatur huruf seperti warna, ukuran dan jenisnya.

17. Ketikan kodingan seperti gambar berikut untuk membuat class pada setiap item yang
akan diakses oleh css.
18. Selanjutnya kita buat file cssnya dengan membuat project baru menggunakan ctrl+n
kemudian simpan dengan nama style.css. file css ini berfungsi untuk membuat
penggayaan atau pengaturan dari tampilan web.

19. Buat gaya/style dari class yang kita buat di html dengan nama classnya, sebelum
nama classnya kita kasih titik terlebih dahulu.
a. kita buat pengaturan menunya seperti gambar berikut.

Maksudnya kita membuat lebarnya 100px dan tingginya 30px, warna

backgrounya abu-abu(menggunakan kode hexa), jenis font(font-family)nya
Calibri, ukuran font(font-size)nya 10pt, dan letaknya/posisinya(text-align)nya
tengah(center).
 Maka hasilnya seperti gambar berikut.

b. Membuat pengaturan warna

Maksudnya kita membuat lebarnya 100%, tingginya 5px, ukuran

bordernya 1px dan solid.
 Maka hasilnya akan seperti gambar berikut.

c. Membuat pengaturan hasteg yang ada dibawah warna

Maksudnya kita membuat lebarnya 100px dan tingginya 30px, warna

backgrounya abu-abu(menggunakan kode hexa), jenis font(font-family)nya
sans-serif, ukuran font(font-size)nya 10pt, dan letaknya/posisinya(text-
align)nya tengah(center).
 Maka hasilnya akan seperti gambar berikut.

d. Selanjutnya kita buat pengaturan untuk tulisan berita terbaru sama dengan
hastag yang dibuat tadi(disini saya menyebutnya hastag yang dibawah/ yang
ke-2).

Maksudnya kita membuat lebarnya 100px dan tingginya 30px, warna

backgrounya abu-abu(menggunakan kode hexa), jenis font(font-family)nya
sans-serif, ukuran font(font-size)nya 10pt, dan letaknya/posisinya(text-
align)nya tengah(center).
 Maka hasilnya akan seperti gambar berikut.

e. Selanjutnya kita akan membuat pengaturan untuk gambar starbucks dan

tulisan serta membuat effect transparansinya

Maksudnya pada wrappe kita membuat lebar background/gambar 100%

dan tingginya 300px, overflow digunakan ketika ada konten yang melebihi
parent elementnya, hidden digunakan untuk menyembunyikan jadi overflow:
hidden berfungsi untuk menyembunyikan konten yang berlebih, position:
relative untuk membuat elemen yang bertumpuk tumpukan,
Pada wrappe img kita membuat lebar background/gambar 100% dan z-
idex berfungsi untuk mengatur tumpukan dari position absolute.
 Pada la kita membuat transparansi dari warna dengan lebarnya 85% dan
tingginya 200px, warna backgroundnya menggunakan rgb code dengan angka
terakhir sebagai keteparansiannya/ besar transparansinya, position absolute
berfungsi untuk menhilangkan/mencabut elemen sehingga element tersebut
diabaikan seakan akan element tidak ada didalam parentnya, left berfungsi
untuk mengatur jaraknya dari kiri dan bottom mengatur jaraknya dengan
bawah parentnya
Pada la a kita membuat jenis font(font-family)nya sans-serif, ukuran
font(font-size)nya 24pt, gaya hurufnya tebal dan warnanya putih.
Maka hasilnya akan seperti gambar berikut.

f. Selanjutnya kita lakukan hal yang sama pada gambar yang lain dengan
kodingan seperti gambar.
 Penjelasannya sama seperti langkah sebelumnya. Maka outputnya akan
seperti gambar berikut.

g. Selanjutnya kita merubah warna teks yang biru menjadi hitam serta
menghilangkan garis bawahnya dengan koding seperi gambar.
 Maksudnya kita merubah warnanya menjadi hitam dan mehilangkan
dekorasi atau disini garis bawahnya. Maka hasilnya akan seperti gambar
berikut.

h. Yang terakhir kita buat ukuran dari teks seperti 6 menit yang lalu/ yang ada
diantara <font></font> dengan kodingan seperti gambar berikut.
 Maksudnya ukuran font menjadi 10 pt. maka hasilnya seperi gambar
berikut.

Maka tampilan awal web kita sudah jadi.