LAPORAN PRAKTIKUM KE-2

KOMPUTER DAN PEMROGAMAN (CODING)

Disusun Oleh :
Nama : Nadiva Siske Musdalifah
Npm : C1C023102
Kelas : 1D Akuntasi

Asisten Dosen:
Nama : M. Pandu Patana

Npm : G1A019031

Dosen Pembimbing:

Vika Fitranita, SE, M.ak

PROGRAM STUDI AKUNTANSI

FAKULTAS EKONOMI DAN BISNIS
UNIVERSITAS BENGKULU
2023
 LANDASAN TEORI

Bila mengenal HTML, tentunya kamu juga sudah tidak asing dengan
CSS. Konon katanya, membuat website akan kurang bila belum
menggunakan CSS. Lalu, apa itu CSS?

Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang

digunakan untuk menentukan bagaimana dokumen dan website akan
disajikan. CSS dibuat oleh Word Wide Web Consortium (W3C) pada 1996.

Jadi, CSS berisi kumpulan perintah yang digunakan untuk menjelaskan

tampilan halaman situs web dalam mark-up language, seperti HTML yang
terkenal sebagai bahasa pemrograman standar dan sering digunakan dalam
proses pembuatan website. CSS hadir sebagai pemisah konten dari tampilan
visualnya di situs di mana tentunya berpengaruh pada tampilan
sebuah website.
Menghubungkan HTML dengan CSS ini merupakan HTML yang bisa di
bilang termasuk ke dalam salah satu HTML yang paling terpenting. karena jika
kita tidak mengetahui cara menghubungkan HTML dengan CSS secara otomatis
pasti kita tidak mengetahui bagaimana cara untuk mendesign halaman website
yang kita buat karena file HTML tidak terhubung dengan CSS. Bukan hanya
HTML sebenarnya.
Untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah.
gunakan tag untuk menghubungkan html dengan css. tag link di letakkan pada
bagian element head pada struktur HTML. baiklah perhatikan contoh cara
menghubungkan html dengan CSS berikut ini. Buat sebuah file html atau php
terserah anda. karena ini merupakan tutorial HTML maka saya menggunakan file
HTML untuk di hubungkan dengan CSS. di sini saya membuat file html dengan
nama index.html. kemudian buat sebuah file css lagi dengan nama terserah anda,
di sini saya membuat file css dengan nama style.css. jadi ada dua buah file yang
saya buat yaitu file index.html dan fiel style.css.

Nadiva Siske M C1C023102

 File html berhasil di hubungkan dengan css terbukti dengan berhasilnya
syntax css yang kita buat untuk mengatur element heading 1 html di atas. syntax
color pada css di atas merupakan perintah untuk menetapkan warna font/text,
font-family untuk mengatur font yang di gunakan dan text-align untuk mengatur
rata text.

Nadiva Siske M C1C023102

 SOAL DAN PEMBAHASAN

1. Rangkuman praktikum pertemuan sebelumnya minimal 1 halaman.

Membuat Biodata Diri/CV yg dilengkapi dengan identitas diri dan

penggunaan beberapa HTML dan CSS. Penggunaan CSS dimaksud agar
tidak terjadi pengulangan penulisan.
Untuk menampilkan gambar dengan HTML, anda bisa
menggunakan tag <img>. Kemudian masukkan atribut “src=” pada tag
<img>. Atribut src berguna untuk menghubungkan dengan file gambar,
jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file
gambar. jika file gambar terletak satu folder dengan file html yang
bertugas untuk menampilkan gambar ini maka kita bisa langsung
memasukkan nama file gambar yang ingin di tampilkan tersebut pada
atribut src ini. tetapi jika file gambar berada pada folder yang berbeda
dengan file html yang menampilkan gambar maka anda bisa
menambahkan nama folder nya seperti misalnya
“nama_folder/filegambar”. dan jika file gambar berada di luar folder file
html yang menampilkan gambar maka anda bisa menambahkan perintah
“../
Ukuran pada gambar juga bisa diubah. Mengubah ukuran gambar
yang tampil dengan cara menambahkan atribut height=”” untuk mengatur
tinggi gambar, dan menambahkan aribut width=”” untuk menentukan
lebar gambar yang tampil. Tinggal sesuaikan ukuran dengan px berapa
agar gambar stabil memiliki ukuran yang pas ketika akan ditampilkan
nanti. Biasanya menggunakan ukuran 300px x 200px. Tinggal kalian
sesuaikan saja ukuran – ukuirannya.
Lalu selain menambah gambar kami belajar juga cara membuat
margin, membuat foto dengan bentuk lingkaran, segitiga, segiempat.

Nadiva Siske M C1C023102

2. Buatlah CV semenarik mungkin (minimal berisi : foto, data diri,
asal sekolah, pengalaman kerja, skill)

Gambar 1 Source Code CV.

Source Code:

<!DOCTYPE html><html lang="en"><head> <title>Biodata

Siske</title></head><body> <h1 align="center">BIODATA DIRI</h1>
<hr width="600px"> <table align="center" cellpadding="10px"
width="600px"> <tr><td>Nama Lengkap</td><td>: Nadiva Siske
M</td><td rowspan="8"><img src="foto.jpg" height="250px"
width="240px"></td></tr><tr> <td>NPM</td><td>:
C1C0231012</td></tr><tr><td>Tempat, Tanggal Lahir</td><td>: Sido

Nadiva Siske M C1C023102

 Mukti, <br> 29 Juli 2003</td></tr><tr> <td>Prodi</td><td>: S1
Akuntansi</td> </tr><tr><td>Jenis Kelamin</td><td>:
Perempuan</td></tr><tr><td>Agama</td><td>:
Islam</td></tr><tr><td>Hobi</td> <td>: Shopping</td></tr><tr>
<td>Cita-Cita</td><td>:
Entrepreneur</td></tr><tr><td>Zodiak</td><td>: Leo</td></tr>
<tr><td>Instagram</td> <td>: @ndvsiskeee_</td></tr>
</table></BR><h3>Tentang Saya</h3><p>"Perkenalkan saya seorang
Mahasiswa S1 Akuntansi di Universitas Bengkulu, Saya mengambil
Akuntansi karna kesukaan saya adalah menghitung uang. Pribadi yg
percaya diri, komunikatif, teliti dan menyukai mengelola
uang."</p><h3>Organisasi</h3><ul><li>Pramuka</li></ul><h3>Pendidi
kan</h3><ul><li>SDN 092 Bengkulu Utara</li> <li>SMPN 29 Bengkulu
Utara</li><li>SMKN 03 Bengkulu
Utara</li></ul><h3>Skill</h3><ul><li>Mengoperasikan
Komputer</li><li>Mengoperasikan Adobe
Photoshop</li><li>Mengoperasikan CorelDRAW</li><li>Desain
Poster</li></ul></body></html>

Penjelasan Source Code :

<!DOCTYPE html>

Baris ini merupakan deklarasi tipe dokumen HTML yang digunakan, dan dalam
hal ini, menggunakan HTML versi 5.

<html lang="en">

Membuka elemen HTML dan menetapkan atribut lang dengan nilai "en" untuk
menandakan bahwa bahasa yang digunakan dalam halaman web adalah bahasa
Inggris.

<head> <title>Biodata Siske</title> </head>

Nadiva Siske M C1C023102

Elemen <head> berisi informasi tentang dokumen HTML, dalam hal ini, sebuah
judul untuk halaman web yang akan ditampilkan di tab browser.

<body>

Membuka elemen <body>, yang berisi konten yang akan ditampilkan di halaman
web.

<h1 align="center">BIODATA DIRI</h1>

Judul utama halaman dengan ukuran heading 1, dan diatur untuk terpusat.

<hr width="600px">

Elemen <hr> untuk membuat garis horizontal dengan lebar 600 piksel.

<table align="center" cellpadding="10px" width="600px">

Membuka elemen tabel dengan atribut align, cellpadding, dan width.

<tr> <td>Nama Lengkap</td> <td>: Nadiva Siske M</td> <td

rowspan="8"><img src="foto.jpg" height="250px" width="240px"></td>
</tr>

Baris pertama dari tabel yang berisi informasi Nama Lengkap, dan menggunakan
atribut rowspan untuk menggabungkan sel untuk gambar.

<!-- (Baris 2 - Baris 8): Informasi-informasi lainnya seperti NPM, Tempat

Tanggal Lahir, Prodi, Jenis Kelamin, Agama, Hobi, Cita-Cita, Zodiak, dan
Instagram -->

</table>

Menutup elemen tabel.

<br>

Elemen <br> untuk membuat baris baru.

<h3>Tentang Saya</h3>

Nadiva Siske M C1C023102

Heading level 3 untuk subjudul "Tentang Saya".

<p>"Perkenalkan saya seorang Mahasiswa S1 Akuntansi di Universitas

Bengkulu, Saya mengambil Akuntansi karena kesukaan saya adalah menghitung
uang. Pribadi yang percaya diri, komunikatif, teliti, dan menyukai mengelola
uang."</p>

Paragraf yang berisi teks tentang diri sendiri.

<h3>Organisasi</h3>

Heading level 3 untuk subjudul "Organisasi".

<ul> <li>Pramuka</li> </ul>

Unordered list (daftar tak terurut) yang berisi satu item, yaitu "Pramuka".

<h3>Pendidikan</h3>

Heading level 3 untuk subjudul "Pendidikan".

<ul> <li>SDN 092 Bengkulu Utara</li> <li>SMPN 29 Bengkulu

Utara</li> <li>SMKN 03 Bengkulu Utara</li> </ul>

Unordered list yang berisi informasi pendidikan seperti sekolah dasar, sekolah
menengah pertama, dan sekolah menengah kejuruan.

<h3>Skill</h3>

Heading level 3 untuk subjudul "Skill".

<ul> <li>Mengoperasikan Komputer</li> <li>Mengoperasikan Adobe

Photoshop</li> <li>Mengoperasikan CorelDRAW</li> <li>Desain
Poster</li> </ul>

Unordered list yang berisi keterampilan atau skill, seperti kemampuan

mengoperasikan komputer dan software desain grafis.

</body>

Menutup elemen <body>.

Nadiva Siske M C1C023102

 </html>

Menutup elemen <html>, menyelesaikan struktur dasar halaman HTML.

Output:

Gambar 2 Tampilan output CV

Penjelasan :

Halaman web ini menampilkan laporan praktikum ke-2 dengan focus pada
CV yg berisi Penambahan foto dan beberapa identitas diri saya.

Nadiva Siske M C1C023102

3. Jelaskan apa itu CSS minimal 1 Halaman!

Cascading Style Sheets (CSS) merupakan bahasa pemrograman

yang digunakan untuk menentukan bagaimana dokumen
dan website akan disajikan. CSS dibuat oleh Word Wide Web
Consortium (W3C) pada 1996.
Jadi, CSS berisi kumpulan perintah yang digunakan untuk
menjelaskan tampilan halaman situs web dalam mark-up language,
seperti HTML yang terkenal sebagai bahasa pemrograman standar
dan sering digunakan dalam proses pembuatan website. CSS hadir
sebagai pemisah konten dari tampilan visualnya di situs di mana
tentunya berpengaruh pada tampilan sebuah website.
CSS dan HTML memiliki keterikatan satu sama lain. CSS
merupakan kode-kode yang dipakai untuk mendesain laman HTML.
Bila diibaratkan dengan bahasa awam, HTML dapat dikatakan
sebagai handphone dan CSS adalah casing yang akan
membuat handphone terlihat semakin cantik.
CSS berfungsi untuk membantu para web designer agar dapat
mengubah dan menambahkan, baik teks, gambar, hingga latar
belakang sebuah halaman HTML. Biasanya, keberadaan CSS dapat
langsung terlihat dengan adanya perbedaan pada warna teks. CSS
memberi perintah teks berwarna biru dengan tag <span> dengan
tambahan tag class=” nama warna”. Dengan demikian, setiap
tag <span> muncul, teks yang mengikutinya pun akan berwarna
sesuai warna yang diinginkan dan seterusnya.
Fungsi CSS
Berikut beberapa fungsi CSS lainnya yang baik untuk website,
antara lain:
1. Proses loading halaman web lebih cepat
Satu rangkaian kode CSS dapat diaplikasikan untuk beberapa
halaman website sekaligus sehingga jumlah kode dapat
diminimalkan. Hal ini tentunya akan membuat

Nadiva Siske M C1C023102

 beban loading website menjadi lebih kecil. Alhasil, kecepatan
saat loading website pun akan menjadi lebih cepat.

2. Beragam variasi

Seperti yang kita ketahui, HTML memang dapat digunakan

untuk mengatur tampilan website. Sayangnya, terbatas. Namun
hal ini tidak berlaku bagi CSS yang menawarkan lebih banyak
style tampilan pada halaman website.

3. Tampilan website akan lebih rapi

Dengan menggunakan CSS, tampilan halaman website pun

akan rapi dan optimal di berbagai ukuran layar pengguna, baik
itu desktop maupun smartphone. Sehingga pemilik website
tidak perlu repot mengatur dan pusing memikirkan website
tidak maksimal dibuka dari perangkat-perangkat pengunjung.

Hal ini disebabkan oleh kelebihan CSS yang memiliki

berbagai property untuk mengatur tampilan konten agar sesuai
kebutuhan layar, salah satunya dengan max-width. Saat
menggunakan property tersebut, ukuran elemen HTML pun
akan berubah sesuai ukuran layar yang digunakan untuk
menampilkan website. Kehadiran CSS bagi website terbilang
penting. Tanpa adanya CSS, tampilan website tentu akan
monoton dan membutuhkan waktu yang lama untuk loading.

Nadiva Siske M C1C023102

 DAFTAR PUSTAKA

Guntoro, (2023). October8, 65 tag HTML di lengkapi fungsi dan

contoh penggunaannya dalam Badoystudio.

PT BIZNET GIO NUSANTARA, (2022). Januari2, Mengenal apa

itu CSS dalam midplaza

Diki Alfarabi, (2023). Belajar HTML & CSS Dasar dalam

www.malasngoding.com

Nadiva Siske M C1C023102