LAPORAN PRAKTIKUM KE-5

KOMPUTER DAN PEMROGRAMAN

DISUSUN OLEH:

NAMA : APRINALDO DALVANSA

NPM : C1B022092

KELAS : MANAJEMEN A

Nama Asisten Dosen :

Ferdian Rizki Ananda (G1A020087)

Dosen Pengampu :

Andang Wijanarko M.Kom.

PROGRAM STUDI MANAJEMEN

FAKULTAS EKONOMI DAN BISNIS

UNIVERSITAS BENGKULU

TAHUN 2022
 LANDASAN TEORI

Pengertian dan Sejarah HTML

Hypertext Markup Language atau HTML adalah bahasa markup standar yang
digunakan untuk membuat halaman website dan aplikasi web. Sejarah HTML diciptakan
oleh Tim Berners-Lee, seorang ahli fisika di lembaga penelitian CERN yang berlokasi di
Swiss.
Versi pertama HTML dirilis oleh Tim Berners Lee pada tahun 1991, yang
memiliki 18 tag. Sejak saat itu, setiap kali ada versi barunya, pasti akan selalu ada tag
dan attribute (tag modifier) yang juga baru.
Ketika bekerja dengan bahasa markup ini, Anda menggunakan struktur kode
sederhana (tag dan attribute) untuk mark up halaman website. Misalnya, Anda membuat
sebuah paragraf dengan menempatkan enclosed text di antara tag pembuka <p> dan tag
penutup </p>.

Cara Kerja HTML

Berkat popularitasnya yang terus meningkat, bahasa markup ini kini dianggap
sebagai standar web resmi. Spesifikasi HTML dikelola dan dikembangkan oleh World
Wide Web Consortium (W3C). Berdasarkan HTML Element Reference milik Mozilla
Developer Network, saat ini ada 140 tag HTML, meskipun sebagiannya sudah tidak lagi
didukung oleh beberapa versi terbaru browser.
Kemudian, pada tahun 2014, HTML5 mulai diperkenalkan. Dengan
diperkenalkannya HTML5, terdapat semantic baru
seperti <artcile>, <header>, dan <footer> yang memperjelas bagian-bagian dalam
konten.

Berikut contoh kode dari susunan atau struktur HTML:

 Elemen teratas dan terbawah adalah division sederhana (<div></div>) yang bisa
Anda gunakan untuk mark up bagian konten yang lebih besar.

2 C1B022092
APRINALDO DALVANSA
  Susunan di atas terdiri atas heading (<h1></h1>), subheading (<h2></h2), dua
paragraf (<p></p>), dan satu gambar (<img>).

 Paragraf kedua meliputi sebuah link (<a></a>) dengan attribute href yang terdiri
atas URL tujuan.

 Tag gambar memiliki dua attribute, src untuk path gambar dan alt untuk
deskripsi gambar.

Selain itu, beberapa contoh penggunaan umum HTML adalah:

 Pengembangan web. Developer menggunakan kode HTML untuk mendesain

tampilan elemen halaman web di browser, seperti teks, hyperlink, dan file
media.

 Navigasi internet. Pengguna bisa menelusuri dan menyisipkan link antara

halaman dan website terkait karena HTML banyak digunakan untuk
menyematkan hyperlink.

 Dokumentasi web. HTML bisa digunakan untuk mengatur dan memformat

dokumen, mirip dengan Microsoft Word.

Hubungan antara HTML, CSS dan Javascript

Meskipun dinyatakan sebagai bahasa markup yang canggih dan mudah, HTML tidak
sepenuhnya bisa membuat website yang profesional dan responsif. Bahasa ini hanya bisa
digunakan untuk menambah elemen dan membuat struktur konten.
Namun di satu sisi, bahasa ini bisa bekerja secara maksimal dengan dua bahasa
frontend: CSS (Cascading Style Sheets) dan JavaScript. Jika digabungkan, kedua bahasa
frontend ini bisa meningkatkan pengalaman user dan memberikan fungsi yang lebih
canggih.CSS erat kaitannya dengan styling, seperti background, warna, layout, spacing,
dan animiasi. JavaScript memungkinkan Anda menambahkan fungsionalitas yang
dinamis, seperti slider, pop-up, dan galeri foto. Jika digambarkan, berikut perbedaan
HTML dan CSS dan JavaScript: HTML adalah orang yang tidak mengenakan busana
apa pun, kemudian CSS adalah bajunya, kemudian JavaScript adalah aktivitas dan sikap
orang tersebut.

3 C1B022092
APRINALDO DALVANSA
 SOAL DAN PEMBAHASAN

1. Review Praktikum!
Jawaban:

Pada kegiatan praktikum kemarin para mahasiswa mempelajari dan mempraktikan

materi coding tentang html dan css menggunakan aplikasi visual studio code. Pada kegiatan
praktikum itu para mahasiswa diajarkan untuk membuat website responsive untuk sebagai
media login pada sebuah website. Di website tersebut terdapat sebuah media login ,dimana
user disuruh untuk memasukkan username dan passwordnya kemudian akan diarahkan
kesebuah halaman lain.
Halaman website tersebut dapat diedit berdasarkan keinginan user seperti besarnya
kotak, warna kotak, warna huruf dan lain sebagainya. Hal tersebut dapat dilakukan melalui
source code CSS.
Praktikum tersebut membuat saya lebih memahami hubungan antara HTML, CSS,
dan Javascript. Yang dimana ketiganya merupakan satu kesatuan yang tidak dapat dipisahkan
karena dalam membuat website kita memerlukan 3 bahasa pemrograman tersebut agar
website yang kita buat tidak hanya berfungsi dengan baik, namun juga menarik dan dapat
berfungsi secara efisien

2. Sebutkan dan jelaskan 3 cara menggunakan CSS di HTML!

Jawaban :

Cara yang pertama adalah dengan Inline CSS.

Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML
tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style
hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan
yang akan digunakan (rendering) meskipun tag HTML tersebut juga sudah diberi style
melalui internal CSS atau external CSS.

4 C1B022092
APRINALDO DALVANSA
 Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML
perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan
style yang konsisten, Anda juga perlu mengubah style pada tag-tag lainnya. Misalnya, semua
h1 berwarna merah, ketika Anda ingin mengubah h1 menjadi berwarna hijau, Anda perlu
mengubah style di semua h1 satu persatu agar berwana hijau.

Cara yang kedua adalah dengan Internal CSS.

Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman
web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen
head atau tag <head> dari laman web. Anda dapat menggunakan internal CSS bila pemberian
style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web
yang lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar
atau kompleks.

Cara yang ketiga adalah dengan External CSS.

External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan
menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe
konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web
sehingga semua laman web akan memiliki tampilan atau desain yang seragam.

Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text
editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang
akan diberlakukan di laman web. Simpan file CSS di folder yang sama tempat menyimpan
file HTML.

5 C1B022092
APRINALDO DALVANSA
3. Buat web responsive yang ada di modul dengan navbar login harus di isi MIRIP dengan
foto yang ada di bawah ini !
Jawaban :

Gambar 1 (source code html beranda)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title> Website Responsive Aprinaldo D</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="CSS/indeks.css">

</head>

<body>

6 C1B022092
APRINALDO DALVANSA
<div class="container">

<div class="header">

<h1 align="center">Selamat Datang Di Website Responsive</h1>

</div>

<div class="main">

<div class="left">

<h3 align="center">Menu</h3>

<ul>

<li><a href="login.html">Login</a></li>

<li><a href="#">Home</a></li>

<li><a href="#">Daftar Buku</a></li>

</ul>

</div>

<div class="middle">

<h3 align="center">Berita</h3>

<p align="center"><strong><a href="#">Design Web Responsive</a></strong></p>

<p align="center"><img src="foto/denji.jpg"></p>

<p align="center"><a href="#">Baca Selengkapnya>></a>

</div>

<div class="right">

<h3 align="center">Buku Terpopuler</h3>

</p>

7 C1B022092
APRINALDO DALVANSA
 <ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Pemograman</a></li>

<li><a href="#">Database</a></li>

</ul>

</p>

</div>

</div>

<div class="footer">

<p align="center">Belajar CSS Responsive</a></p>

</div>

</div>

</body>

</html>

Penjelasan :

Gambar 1 merupakan gambar source code html pada beranda website responsive
yang akan saya buat dan merupakan source code HTML pada halaman berandanya. Dalam
pelaksanaan coding tersebut, saya menggunakan aplikasi Visual Studio Code agar proses
pembuatan website menjadi lebih efisien

8 C1B022092
APRINALDO DALVANSA
 Gambar 2 (source code html login)

<!DOCTYPE html>

<html lang="en">

<head>

<title>Halaman Login</title>

<link rel="stylesheet" href="CSS/login.css">

</head>

<body>

<center><div id="cover">

<div id="container">

<center>

9 C1B022092
APRINALDO DALVANSA
 <h1>Login</h1>

<h2>Please login to use this site!</h2>

<div>

<p><button style="font-weight: bold; "><img id ="google" src="foto/logo gugel.png"

alt="" style="height: 15px ; float: left;"> Sign up with Gmail</button></p><br>

</div>

</center>

<form action=""

<label id ="email"style="font-weight: bold; ">Email</label><br>

<input type="text" name="Email*" class="form_login" placeholder="Your

Email"><br>

</form>

<form action=""

<label id ="password"style="font-weight: bold; " >Password*</label><br>

<input type="Password" name="Password*" class="form_login"

placeholder="Min 8 Character"><br>

</form>

<form action=""

<label id ="remember" style="font-weight: bold;" ><input type="checkbox"

name="remember" value="remember">Remember me</label>&emsp;

<a href="file:///D:/Aprinaldo/C1B022092_Aprinaldo/C1B022092/indeks.html"
style="color: rgb(0, 185, 0);font-weight: bold; text-decoration: none;">Kembali ke
beranda</a>

</form>

10 C1B022092
APRINALDO DALVANSA
 <input type="submit" value="Login"style="background-color: rgb(0, 185, 0); color: white;
float: right;">

</div>

</div>

</center>

</body>

</html>

Pembahasan:

Gambar 2 merupakan gambar source code html pada halaman login website
responsive yang akan saya buat dan merupakan source code HTML pada halaman loginnya.
Dalam pelaksanaan coding tersebut, saya menggunakan aplikasi Visual Studio Code agar
proses pembuatan website menjadi lebih efisien

Gambar 3 (source code css beranda)

11 C1B022092
APRINALDO DALVANSA
*{

padding : 0;

margin : 0;

box-sizing : border-box;

body{

background :#dedede;

font-family : 'Verdana',arial,sans-serif;

font-size : 15px;

p{

margin-bottom : 20px;

line-height : 1.5em;

h3{

margin-bottom : 20px;

line-height : 1px solid #aaa;

a{

text-decoration: none;

color:#333;

12 C1B022092
APRINALDO DALVANSA
a:hover{

color: #666;

.container{

max-width: 1080px;

margin: 20px auto;

background: #fff;

overflow: hidden;

padding: 10px;

.header{

border: 1px solid #dedede;

padding: 10px;

margin: 10px;

background: #9e9afb;

.left{

width: 250px;

border: 1px solid #dedede;

padding: 10px;

margin: 10px;

float: left;

13 C1B022092
APRINALDO DALVANSA
}

.left ul li a{

display: block;

border-bottom: 1px solid #dedede;

margin-bottom: 10px;

padding: 10px 5px;

flood-color:#d3d2ed;

.lift ul li a:hover{

color: #461AF3;

.middle{

width: 500px;

border: 1px solid #dedede;

padding: 10px;

margin: 10px;

float: left;

.middle img{

max-width: 100%;

height: auto;

14 C1B022092
APRINALDO DALVANSA
.middle a{

font-weight:bold;

.right{

width: 250px;

border: 1px solid #dedede;

padding: 10px;

margin: 10px;

float: left;

.right ul{

list-style-type: none;

.right ul li{

display: block;

.right ul li a{

display: block;

border-bottom: 1px solid #dedede;

margin-bottom: 10px;

padding: 10px 5px;

15 C1B022092
APRINALDO DALVANSA
.right ul li a:hover{

color:#461AF3;

.footer{

clear: both;

border: 1px solid #dedede;

padding: 15px;

@media screen and (max-width:959px) {

#container{

width: 100%;

#lift-column{

width: 70%;

#right-columan{

width: 30;

img{

width: 100%;

16 C1B022092
APRINALDO DALVANSA
 }

@media screen and (max-width:1080px)

.container{

width: 100%;

.left{

width: 25%;

background: #d6ccfe;

.middle{

width:68%;

float: right;

.right{

clear:both;

padding:1% 4%

width=auto;

float:none;

background:#D6CCFE

17 C1B022092
APRINALDO DALVANSA
}

@media screen and (max-width:780px)

.header,

.footer{

text-align: center;

.left{

width: auto;

float: none;

.middle{

width: auto;

float: none;

Penjelasan :

Gambar 3 merupakan gambar source code css pada halaman beranda website
responsive yang akan saya buat dan merupakan source code CSS untuk source code HTML
pada halaman berandanya. Dalam pelaksanaan coding tersebut, saya menggunakan aplikasi
Visual Studio Code agar proses pembuatan website menjadi lebih efisien

18 C1B022092
APRINALDO DALVANSA
 Gambar 4 (source code css login)

body{

font-family: sans-serif;

background: white;

#container{

width: 350px;

background: white;

padding: 10px 30px;

border-radius: 50px;

#cover{

19 C1B022092
APRINALDO DALVANSA
 width: 700px;

background: white;

box-shadow: -5px 5px 10px ;

border: 1px solid rgb(235, 235, 235);

margin:100px auto;

padding: 60px 50px;

border-radius: 50px;

h1{

font-size: 40 px;

font-family: Arial, Helvetica, sans-serif;

padding: 0.5px;

h2{

font-size: 14px; line-height: 0.5px;

font-family: Arial, Helvetica, sans-serif;

padding: 3px;

font-weight: normal;

#google{

width: 14px 18px;

padding: 1px;

20 C1B022092
APRINALDO DALVANSA
}

button{

font-family: sans-serif;

font-size: 14px;

border: white 3px solid;

border-radius: 80px;

padding: 4px 10px;

input[type=text],

input[type=password]{

font-size: 15px;

width: 100%;

padding: 12px ;

margin: 8px 0;

box-sizing: border-box;

border: 2px solid #ccc;

background-size: 30px;

border-radius: 20px;

#email{

text-align: left;

21 C1B022092
APRINALDO DALVANSA
#password{

text-align: left;

#remember{

text-align: left;

input[type=submit] {

font-family: sans-serif;

font-size: 15px;

border: white 3px solid;

border-radius: 20px;

padding: 6px;

Penjelasan :

Gambar 4 merupakan gambar source code css pada halaman login website
responsive yang akan saya buat dan merupakan source code CSS untuk source code HTML
pada halaman loginnya. Dalam pelaksanaan coding tersebut, saya menggunakan aplikasi
Visual Studio Code agar proses pembuatan website menjadi lebih efisien

22 C1B022092
APRINALDO DALVANSA
4. Kritik dan saran untuk evaluasi asdos kedepannya!

Jawaban :

Harapan saya untuk abang asdos kedepannya agar jangan terlalu terburu-buru dalam
menjelaskan materi praktikum coding, dan akan lebih baik lagi jika memastikan dulu apakah
kami para mahasiswa yang masih awam sudah paham atau belum dengan materi yang
disampaikan.Selain itu, saya harap asdos dapat lebih keatat lagi dalam membimbing kami
agar materi praktikum dapat diterapkan dan dipraktekkan dengan baik. Selain itu, saat ada
beberapa hal yang masih sulit kami mengerti kami sebenarnya ingin bertanya, tapi kami tidak
tahu ingin bertanya mulai dari bagian mana. Asdosnya juga cukup sulit untuk dihubungi dan
jarang sekali membaca whatsapp dari kami para mahasiswa dan kalaupun dibaca dan
dibalas,membalasnya juga sangat lama sampai sampai baca chat dan membalas chat beberapa
jam setelahnya. Selain itu, abang asdos diharapkan supaya juga dapat membantu kami tidak
hanya saat tatap muka tetapi juga dapat membantu menjelaskan lewatt chat whatsapp juga.

Untuk selebihnya asdos sangat asyik dalam menyampaikan materi tidak kaku dan
tidak terlalu formal sehingga .kami para mahasiswa juga tidak canggung untuk bertanya dan
memberitahu jika ada masalah selama dalam proses kegiatan praktikum. Asdos juga sering
bercanda pada para mahassiswa untuk mencairkan suasana dan baik serta ramah kepada para
mahasiswa. Saya berharap asdos kedepannya dapat terus berkembang menjadi lebih baik
dalam membimbing kami para mahasiswa pada mata kuliah komputer dan pemrograman ini
sehingga ilmu hyang kami dapatkan pada saat praktikum dapat kami gunakan dalam
kehidupan sehari hari.

Sekian kritik dan saran yang dapat saya berikan kepada abang asdos. Mohon maaf
bila ada salah kata dan ketidak sempurnaan saya dalam menulis laporan selama ini. Semoga
abang asdos tidak bosan untuk membimbingkami.

23 C1B022092
APRINALDO DALVANSA
 DAFTAR PUSTAKA

Hostinger. 2004. “Apa Itu HTML? Fungsi dan Cara Kerja HTML”, https://www.ho
stinger.co.id/tutorial/apa-itu-html, diakses pada 21 November 2022.

Mahardika, RI. 2015. “Landasan Teori HTML”, http://e-journal.uajy.ac.id

/6353/4/TF306026.pdf, diakses pada 21 November 2022.

Nayoan, Aldwin. 2022. “Apa Itu CSS? Pengertian, Fungsi, dan Contohnya”,
https://www.niagahoster.co.id/blog/pengertian-css/. diakses pada 21
November 2022.

24 C1B022092
APRINALDO DALVANSA