Fatimah Azzahra - B1A022295 LAPORAN PRAKTEK CODING

LAPORAN PRAKTIKUM 1
Disusun Oleh :
Nama : Fatimah Azzahra
NPM : B1A022295
Kelas :F
Nama Asisten Dosen :

Muhammad Fachrurrozi ( G1A021018)
PROGRAM STUDI HUKUM

FAKULTAS HUKUM
UNIVERSITAS BENGKULU
TAHUN 2023
LANDASAN TEORI
HTML merupakan singkatan Hypertat Markup Language yaitu bahasa standar
web yang dikelola penggunaanya oleh W3C (World Wide Web Consortium) berupa
tag-tag yang menyusun setiap elemen dari website, HTML berperan sebagai peyusun
struktur halaman website yung menempatkan setiap elemen website layout yang
diinginkun. HTML biasanya disimpan dalam sebuah file berekstensi Jml. Untuk
mengetikkan skrip HTML. dapat menggunakan text editor seperti Notepad sebagai
bentuk paling sederhana atau text editor khusus yang dapat mengenali setiap unsur.
Menurut Abdulloh, HTML singkatan dari Hyper Text Markup Language, yaitu
skrip yang berupa tag-tog untuk membuat dan mengatur struktur website (2016:2)
Menurut Abdullah, HTML merupakan singkatan dari Hypertext Markup Languange
yaitu bahasa stadar web yang dikelolah penggunanya oleh W3C(World Wide Web
Consortium berupa tag-tag yang menyusun setiap elemen dari website HTML berperan
sebagai penyusun struktur halaman website yang menempatkan setiap elemen website
sesuai layout yang diinginkan (2018:7). HTML merupakan bahasa standar yang
digunakan dokumen yang ada dalam website, Bahasa pemograman HTML
menggunakan tag (akhiran) yang menandakan cara suatu keyword. kebanyakan browse
mengenali akhiran HTML, biasanya tag berpasangan dan setiap tag ditandai dengan
simbol.
Menurut Sarwono, HTML merupakan sebuah format data berupa dokumen

Hyper-text yang dapat dibaca dari satu sistem ke sistem lainnya, tanpa melakukan
suatu perubahan apapun, karena HTML sebenarnya hanya merupakan subuah dokumen
teks biasa. Tulisan- tulisan atau teks dalam HTML disebut Markup Language karena
mengandung tanda-tanda tertentu (tag, element, attribute) yang digunakan untuk
menampilkan teks melalui browser HTML merupakan bahasa dalam Word Wide Web.
(WWW) yang digunakan untuk membuat suatu dokumen tertentu agar dapat
ditampilkan dan dilihat melalui browser 2015:6-8).
CSS adalah singkatan dari Cascading Style Sheet yaitu dokumen web yang
berfungsi mengatur elemen HTML dengan berbagai property yang tersedia sehingga
dapat tampil dengan berbagai gaya yang diinginkan. Sebagian orang menganggap CSS
bukan termasuk salah satu bahasa pemrograman karena memang strukturnya yang
sederhana, hanya berapa kumpulan-kumpulan aturan yang mengatur style elemen
HTML.
Fatimah Azzahra 2 B1A022295

Cara kerja CSS dalam memodifikasi HTML dengan memilih elemen HTML
yang akan diatur kemudian memberikan property yang sesuai dengan tampilan yang
diinginkan. Dalam memberikan aturan pada elemen HTML. skrip CSS terdiri atas 3
bagian yaitu Selector untuk memilih elemen yang akan diberi aturan, properry yang
merupakan aturan yang diberikan dan value sebagai nilai dari aturan yang diberikan.
Website dapat diartikan sebagai kumpulan halaman yang berisi informasi data
digital baik berupa teks, gambar. unimasi, suara dan video atau gabungan dari
semuanya yang disediakan melalui jalur koneksi internet sehingga dapat diakses dan
dilihat oleh semua orang di seluruh dunia. Halaman website dibuat menggunakan
bahasa standar yaitu HTML. Skrip HTML, ini akan diterjemahkan oleh web browser
sehingga dapat ditampilkan dalam bentuk informasi yang dapat dibaca oleh semua
orang. Secara umam, website dibagi menjadi 3 jenis, yaitu website statis, dinamis, dan
interaktif.
Menurut Enterprise. XAMPP merupakan server yang paling banyak digunakan.

Fitumnya lengkap. Gampang digunakan programmer PHP pemula karena yang perlu
gunakan hanyalah menjalankan salah-satu module bernama Apache yang dapat
memproses PHP (2017-2), XAMPP adalah sebuah aplikasi web server instan dan
lengkap dikarenakan segala yang butuhkan untuk membuat sebuah situs web dengan
Content Management System (Joomla) bisa dicoba di dalam aplikasi ini. XAMPP
adalah sebuah paket installer AMP (Apache, MySQL. dan Php) yang sangat mudah
untuk diaplikasikan dalam komputer yang belum memilik server untuk dapat melihat
situs yang buat menggunakan hahasa server dan database server tersebut.
Menurut Supono, Sublime Text merupakan perangkat lunak text editor yang
digunakan untuk membuat atau mengedit suatu aplikasi. Sublime Text mempunyai
fitur plugin tambahan yang memudahkan programmer. Selain itu, Sublime Text juga
memiliki desain yang simpel dan keren menjadikan Sublime Text terkesan elegan
untuk sebuah rymax editor. Selain ringan, IDE ini memiliki kecepatan proses simpan
dan buka file. Tidak heran kalau IDE ini paling banyak digunakan terutama dikalangan
programmer berbasis web (2016:14). Bos, menjelaskan Sublime Text merupakan salah
satu text editor yang sangat powerful yang dapat meningkatkan produktivitas dan
mengembangkan kualitas kode yang tinggi (2014:12).
Menurut Tarmizi, Sublime Text adalah aplikasi editor untuk kode dan teks yang
dapat berjalan diberbagai platform operating system dengan menggunakan teknologi
Phyton API.Terciptanya aplikasi ini terinspirasi dari a plikasi Vim. Aplikasi ini
sangatlah fleksibel dan powerfull. Fungsionalitas dari ap likasi dapat dikembangkan

dengan menggunakan sublime-packages. Sublime Text bukanlah aplikasi opensource d
an juga aplikasi yang dapat digunakan dan didapatkan secara gratis, akan tetapi
beberapa fitur pengembangan fungsional itas (packages) dari aplikasi ini merupakan
hasil dari temuan dan mendapat dukungan penuh dari komunitas sert a memiliki
linsensi aplikasi gratis. dari aplikasi Sublime Text:
1. Multiple Selections Fitur ini memungkinkan user untuk mengubah secara interak tif
banyak baris sekaligus, mengubah nama varia bel dengan mudah. Dan
memanipulasi file lebih sebelumnya.
2. Command Pallete Dengan beberapa keystorkes, user dapat hanya dengan cepat
mencari fungsi yang diinginkan, tanpa harus menavigasi melalu menu.
3. Distraction Free Mode Bila ser memerlukan fokus penuh pada aplikasi ini, fitur ini
dapat membantu user dengan memberikan tampilan layar penuh.
4. Split Editing Dapatkan hasil yang maksimal dari monitor layar lebar dengan
dukungan editing perpecahan. Meng edit sisi file dengan sisi, atau mengedit dus
lokasi di satu file dapat mengedit dengan banyak baris dan kolom yang user
inginkan.
5. Instant Project Switch menangkap semua file yang dimasukkan kodalam project
pada aplikasi ini. Terintegrasi dengan fitur Goto Anything untuk menjelajahi
semua file yang ada ataupun untuk beralih ke file dalam project lainnya dengan
cepat.
6. Cross Platform Aplikasi ini dapat berjalan hampir disemua operating system
modern Windows, OS X, dan Linux based operating system (2017)

SOAL DAN PEMBAHASAN
1. Jelaskan atribut atribut CSS yang sudah dibahas pada praktikum sebelumnya
sertakan contohnya.
Jawab:
Atribut-atribut CSS yang dibahas pada saat praktikum:
1. Color : digunakan untuk mengatur warna pada teks yang dibuat, contoh :
.container{
color: white;
2. Border : Property ini digunakan untuk membuat elemen disekitar bingkai.

Contoh:
.container{
border: 3px solid blue;
3. Border-bottom : Digunakan untuk mengatur jenis style border pada bagian

bawah selector. Contoh:
.container{
border-bottom: ;

4. Border-radius : properti untuk membuat suatu element memiliki tepian yang
elips atau umumnya disebut sudut lengkungan. Contoh:
.container{
border-radius: 10px;
5. Margin-top : margin yang berfungsi untuk memberikan jarak pada kertas ke

bagian kertas lainnya.Ada kata top yang menandakan bahwa ini batas jarak
kertas bagian atas. Contoh:
.container{
margin-top: 3px;
6. Margin-bottom : Margin battom, sesuai namannya margin ini memberikan jarak

dibagian kanan kertas. Fungsinya pun juga memberikan ruang dan jarak untum
bagian bawah. Contoh:
.container{
margin-bottom: 3px;
7. Margin-left : jarak kertak dibagian kiri. Biasannya dibagian margin left

diberikan ruang lebih lebar. Contoh:
.container{

margin-left: 3px;
8. Padding : Digunakan untuk memberikan spasi pada sisi dalam ebuah element.
Contoh:
.container{
padding: 3px;
9. Padding-top : Padding adalah mengatur jarak dari dalam. Sedangkan untuk

penulisan padding bagian atas. Contoh:
.container{
padding-top: 3px;
10. Padding-left : Padding adalah mengatur jarak dari dalam. Sedangkan untuk
penulisan padding bagian kiri. Contoh:
.container{
padding-left: 3px;
11. Padding-bottom : Padding adalah mengatur jarak dari dalam. Sedangkan untuk
penulisan padding bagian bawah. Contoh:

.container{
padding-bottom: 3px;
12. Background-color : Digunakan untuk menentukan warna latar belakang elemen

HTML. Contoh:
.container{
background-color: #fafafa;
13. Background-size : Properti yang digunakan untuk menentukan ukuran

background. Contoh:
.container{
background-size: cover;
14. Background-image : Digunakan untuk untuk menentukan lokasi filr yang akan
dijadikan background image. Contoh:
.container{
background-image: url (https://www.freecodecamp.org

/content/images/2022/09/jonatan-pie-3l3RwQdHRHg-unsplash.jpg);

15. Background-position : Properti yang digunakan untuk menentukan posisi dari
background. Contoh:
.container{
background-position: center;
16. Background-repeat : Berfungsi untuk mengatur apakah background image yang

kita terapkan akan ditampilkan secara berulang atau hanya sekali atau satu buah
gambar saja. Contoh:
.container{
background-repeat: repeat-x;
17. Font-family : Digunakan untuk memiih jenis font. Contoh:
.container{
font-family: initial;
18. Font-size : Digunakan untuk menentukan ukuran font. Contoh:
.container{
font-size: 18px;

19. Height : Untuk mengatur ukuran tinggi sebuah elemen. Contoh:
.container{
height: 50px;
20. Position : Properti yang digunakan untuk menentukan metode pemposisian pada
suatu element. Contoh:
.container{
position: absolute;
21. Left : Digunakan untuk mengatur posisi elemen berada disebelah kiri. Contoh:
.container{
left: 35px;
22. Top : Digunakan untuk mengatur posisi elemen berada disebelah atas. Contoh:
.container{
top: 30px;

23. Text-align : Properti dari CSS yang dapat digunakan untuk melakukan
penyesuaian posisi pada teks. Contoh:
.container{
text-align: right;
24. Widht : Untuk mengatur ukuran lebar sebuah elemen. Contoh:
.container{
widht: 400px;
25. Box-shadow : Sebuah perintah yang di sediakan css3 untuk membuat bayangan
pada sebuah element. Contoh:
.container{
box-shadow: 0 0 20px rgba(255, 255, 255, 0.0);
2. Buatlah sebuah halaman web seperti gambar dibawah dengan menggunakan

HTML dan juga CSS(link background:
https://www.freecodecamp.org/news/content/images/2022/09/jonatan-
pie3l3RwQdHRHg-unsplash.jpg)
Jawab :

Gambar 1.1 saurce code form pendaftaran HTML
Saurce code :
<!DOCTYPE html>
<html>
<head>
<title>B1A022295</title>
<link rel="stylesheet" type="text/css" href="B1A022295.css">

</head>
<body>
<div class="container">
<h2>Formulir Pendaftaran</h2>
<form>
<label>Nama:</label><br>
<input type="text"><br>
<label>Email:</label><br>
<input type="Email"><br>
<label>Alamat:</label><br>
<input type="Alamat"><br>
Jenis Kelamin:<br>
<br>
<label>Laki-
laki           &n
bsp;           &
nbsp;
           &nbsp
; </label for="Jenis Kelamin_1">

<input type="radio" name="Jenis Kelamin" id="Jenis
Kelamin_1"><br>
<br>
<label>Perempuan        &n
bsp;           &
nbsp;
           &nbsp
; </label for="Jenis Kelamin_1">
<input type="radio" name="Jenis Kelamin" id="Jenis

Kelamin_1"><br>
<br>
Hobi:<br>
<br>
<label>Membaca
           &nbsp
;           &nbs
p;           &nb
sp;          </label
for="Hobi_1">
<input type="checkbox" name="Hobi" id="Hobi_1"><br>
<br>

<label>Menulis        &nbs
p;           &nb
sp;           &n
bsp;           &
nbsp;     </label for="Hobi_1">
<br>
<label>Menggambar
           &nbsp
;           &nbs
p;          </label
for="Hobi_1">
<br>
<button>Submit</button>
</form>
</div>

</body>
</html>
Penjelasan :
Kita membuat source code diatas dengan membuat sebuah variabel yaitu nama, email,
dan alamat yang diinput kan pada suatu page yaitu page login. Untuk pengisian atribut
pada sebuah variabel jenis kelamin yang berisikan laki-laki, dan perempuan
menggunakan radio; serta hobi yang berisikan text membaca, menulis,dan menggambar
itu menggunakan checkbox. Digunakan kode yang bertujuan untuk
memberikan spasi pada atribut atau variabel tersebut. Pada kolom terakhir ditambah
variabel yaitu subunit dengan menggunakan button.

Gambar 1.2 saurce code form pendaftaran CSS

Source Code:
*{
margin: 0;
padding: 0;
outline: 0;
font-family: serif;
body{
height: 100vh;
background-image:
url(https://www.freecodecamp.org/news/content/images/2022/09/jonatan-pie-
3l3RwQdHRHg-unsplash.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

p{
color: white;
font-family: serif;
padding-top: 10px;
h2{
text-align: center;
padding-left: 145px;
padding-bottom: 25px;
a{
color: white;
font-family: serif;
.container{

position: absolute;
padding: 20px 55px;
left: 28%;
top: 2%;
width: 480px;
background-color: #f0f0ff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.0);
border-radius: 10px;
.container h2{
text-align: left;
color: #000000;
margin-top: 20px;
.container label{
text-align: left;

color: #000000;
.container form input[type=text], input[type=email], select {
width: 480px;
padding: 5px 8px;
margin-bottom: 20px;
border-bottom: ;
color: #fafafa;
font-size: 15px;
border-radius: 5px;
.container form input[type=alamat], select {
width: 480px;
padding: 5px 8px;
margin-bottom: 20px;

border-bottom: ;
color: #fafafa;
font-size: 30px;
border-radius: 5px;
.container form button{
width: 100px;
height: 40px;
padding: 5px 0;
border: none;
background-color: #03c03c;
font-size: 18px;
color: #fafafa;
border-radius: 5px;

Penjelasannya:
Kita membuat saurce code diatas dengan menggunakan jenis font yaitu serif dan
menggunakan beberapa warna dengan menggunakan atribut color dan background
color untuk memperjelas bentuk dan warna tulisan dari saurce code pada gambar 1.1
untuk hasil yang lebih maksimal, serta menambahkan background pada form
pendaftaran tersebut dengan menggunakan body yang ditambah atribut background-
image dan menempelkan link gambar.
Gambar 1.3 output form pendaftaran
Penjelasannya :
Lihatlah gambar pada 1.3 merupakan hasil dari saurce code diatas yang sudah
dijelaskan tadi, inilah hasil dari penggunaan variabel-variabel yang diinputkan pada
satu page dan pengisian atribut dengan menggunakan radio dan checkbox. Dan
tampilan background yang menggunakan backgound-image dan link serta bentuk font
yang berubah menjadi bentuk serif serta warna pada huruf dan tombol button submit.

3. Buatlah halaman web sederhana seperti berikut dengan HTML dan CSS:
Jawab:
Gambar 1.4 source code program HTML
Source code:
<!DOCTYPE html>
<html>
<head>
<title>halaman1</title>
<link rel="stylesheet" type="text/css" href="halaman.css">

</head>
<body>
<h1>B1A022295</h1>
<h2 class="internal style">  Internal Style
<p>Internal Style merupakan metode penulisan CSS langsung didalam

file HTML tepatnya berada diantara tag head dengan diapit tag style terlebih dahulu
sebelum memuali kode CSS. Pada teknik ini style diletakkan pada tengah tag. Aturan -
aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat
maupun untuk keseluruhan situs.</p>
</h2>
<h2 class="eksternal style">Eksternal Style
<p>Eksternal Style merupakan metode penulisan CSS secara terpisah

dengan memberikan ekstensi .css untuk nama filenya. Metode ini sangat dinajurkan
untuk menuliskan kode CSS karena kita akan dengan mudah mengubah kode yang
terkumpul dalam satu file.</p>
</h2>
<h1 class="container">2023 MKU Coding</h1>
</body>
</html>

Penjelasannya:
Program ini dibuat sesuai dengan perintah penugasan ketiga. Disini digunakan html
yang terbagi kedalam kedua kelas yang berbeda. Yaitu internal style dan eksternal
style pada head, dibuat judulnya sebagai halaman1. Hal ini akan mengunggah nama
pada program di bagian tab web sebagai "halaman1". Pada body di h1, diinputkan nim
dengan ukuran sesuai h1.Selanjutnya pada h2, dibuat sebuah kelas internal style.
Digunakan kode yang bertujuan untuk memberikan spasi pada atribut atau
variabel tersebut. Dibuat sebuah paragraf (p) seperti pada code diatas.Begitupun untuk
class selanjutnya, dibuat dengan ukuran sama pada h2, dengan kelasnya adalah
eksternal style. kemudian untuk terakhir dibuat sebuah class cointainer dengan
tampilan sebagai 2023 MKU Coding dengan menggunakan h1 pada html.
Gambar 1.5 source code program CSS
Source code:
h1{
text-align: center;

color: white;
border: 5px solid black;
margin-top: 20px;
padding: 10px;
background-color: black;
h2{
color: bold #000000;
font-family: sans-serif;
font-size: 17px;
margin-left: 10px;
margin-right: 10px;
border: 2px solid black;
background-color: white;
p{

color: #000000;
font-family: sans-serif;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
.container{
text-align: center;
color: white;
font-family: serif;
font-size: 15px;
Penjelasannya:
Program ini dibuat sesuai dengan perintah penugasan ketiga. Disini digunakan css yang
digunakan untuk menambah bentuk dan warna pada program html yang sudah dibuat.
Dengan variabel h1, dan h2 yang dimasukkan border pada setiap variabel dengan
border berwarna hitam dan ditambahkan background color pada setiap border.

Gambar 1.4 output program
Penjelasannya:
Sesuai dengan soal penugasaan dan source code dari html dan css ini lah hasil dari
program pada gambar 1.4 dan 1.5 dengan menggunakan beberapa variabel dan
atribute seperti head dan body dapat menghasilkan sebuah halaman web program
sederhana.

KESIMPULAN DAN SARAN
Kesimpulan:
HTML merupakan sebuah format data berupa dokumen Hyper-text yang dapat
dibaca dari satu sistem ke sistem lainnya, tanpa melakukan suatu perubahan apapun,
karena HTML sebenarnya hanya merupakan subuah dokumen teks biasa. Tulisan -
tulisan atau teks dalam HTML disebut Markup Language karena mengandung tanda-
tanda tertentu (tag, element, attribute) yang digunakan untuk menampilkan teks
melalui browser HTML merupakan bahasa dalam Word Wide Web. (WWW) yang
digunakan untuk membuat suatu dokumen tertentu agar dapat ditampilkan dan dilihat
melalui browser.
CSS adalah singkatan dari Cascading Style Sheet yaitu dokumen web yang
berfungsi mengatur elemen HTML dengan berbagai property yang tersedia sehingga
dapat tampil dengan berbagai gaya yang diinginkan. Sebagian orang menganggap CSS
bukan termasuk salah satu bahasa pemrograman karena memang strukturnya yang
sederhana, hanya berapa kumpulan-kumpulan aturan yang mengatur style elemen
HTML.
CSS memiliki banyak atribut yang berfungsi mengatur elemen yang terdapat di
HTML sehingga dapat mengubah bentuk dan warna yang terdapat pada HTML. Fitur
HTML dan CSS dapat kita gunakan melalui aplikasi sublimetext dengan indikatornya
xampp. XAMPP adalah sebuah aplikasi web server instan dan lengkap dikarenakan
segala yang butuhkan untuk membuat sebuah situs web dengan Content Management
System (Joomla) bisa dicoba di dalam aplikasi ini. XAMPP adalah sebuah paket
installer AMP (Apache, MySQL. dan Php) yang sangat mudah untuk diaplikasikan
dalam komputer yang belum memilik server untuk dapat melihat situs yang buat
menggunakan hahasa server dan database server tersebut. Sublime Text adalah aplikasi
editor untuk kode dan teks yang dapat berjalan diberbagai platform operating system
dengan menggunakan teknologi Phyton API.Terciptanya aplikasi ini terinspirasi dari a
plikasi Vim. Aplikasi ini sangatlah fleksibel dan powerfull.
Hasil dari elemen HTML yang diatur dengan CSS dapat dilihat melalui halaman
website dengan pengembangan dapat menyediakan berbagai komponen yang telah
dihasilkan melalui aplikasi xampp dan sublimetext.

Saran:
Saran pada praktikum kali ini diharapkan teman-teman lebih fokus lagi dalam
pembelajaran coding dan lebih memperhatikan lagi apa saja yang dijelaskan oleh
pengajar terhadap kita.

DAFTAR PUSTAKA
Abdurahman Hidayat dkk... (2019). MEMBANGUN WEBSITE SMA PGRI GUNUNG

RAYA RANAU MENGGUNAKAN PHP DAN MYSQL.....
https://journal.unmaha.ac.id/index.php/jtim/article/download/35/35
Atikah Permata Sari', Suhendi… (2020) RANCANG BANGUN SISTEM INFORMASI

PENGELOLAAN TALENT FILM.....
https://journal.nurulfikri.ac.id/index.php/jit/article/download/255/212/1423

Fatimah Azzahra - B1A022295 LAPORAN PRAKTEK CODING

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Fatimah Azzahra - B1A022295 LAPORAN PRAKTEK CODING

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM 1

Nama Asisten Dosen :

PROGRAM STUDI HUKUM

Menurut Sarwono, HTML merupakan sebuah format data berupa dokumen

Fatimah Azzahra 2 B1A022295

Menurut Enterprise. XAMPP merupakan server yang paling banyak digunakan.

Fatimah Azzahra 3 B1A022295

Fatimah Azzahra 4 B1A022295

Atribut-atribut CSS yang dibahas pada saat praktikum:

2. Border : Property ini digunakan untuk membuat elemen disekitar bingkai.

border: 3px solid blue;

3. Border-bottom : Digunakan untuk mengatur jenis style border pada bagian

Fatimah Azzahra 5 B1A022295

5. Margin-top : margin yang berfungsi untuk memberikan jarak pada kertas ke

6. Margin-bottom : Margin battom, sesuai namannya margin ini memberikan jarak

7. Margin-left : jarak kertak dibagian kiri. Biasannya dibagian margin left

Fatimah Azzahra 6 B1A022295

9. Padding-top : Padding adalah mengatur jarak dari dalam. Sedangkan untuk

Fatimah Azzahra 7 B1A022295

12. Background-color : Digunakan untuk menentukan warna latar belakang elemen

13. Background-size : Properti yang digunakan untuk menentukan ukuran

background-image: url (https://www.freecodecamp.org

Fatimah Azzahra 8 B1A022295

16. Background-repeat : Berfungsi untuk mengatur apakah background image yang

17. Font-family : Digunakan untuk memiih jenis font. Contoh:

18. Font-size : Digunakan untuk menentukan ukuran font. Contoh:

Fatimah Azzahra 9 B1A022295

Fatimah Azzahra 10 B1A022295

24. Widht : Untuk mengatur ukuran lebar sebuah elemen. Contoh:

box-shadow: 0 0 20px rgba(255, 255, 255, 0.0);

2. Buatlah sebuah halaman web seperti gambar dibawah dengan menggunakan

Fatimah Azzahra 11 B1A022295

<link rel="stylesheet" type="text/css" href="B1A022295.css">

Fatimah Azzahra 12 B1A022295

Fatimah Azzahra 13 B1A022295

<input type="radio" name="Jenis Kelamin" id="Jenis

<input type="checkbox" name="Hobi" id="Hobi_1"><br>

Fatimah Azzahra 14 B1A022295

<input type="checkbox" name="Hobi" id="Hobi_1"><br>

<input type="checkbox" name="Hobi" id="Hobi_1"><br>

Fatimah Azzahra 15 B1A022295

Fatimah Azzahra 16 B1A022295

Fatimah Azzahra 17 B1A022295

Fatimah Azzahra 18 B1A022295

Fatimah Azzahra 19 B1A022295

padding: 20px 55px;

box-shadow: 0 0 20px rgba(255, 255, 255, 0.0);

Fatimah Azzahra 20 B1A022295

.container form input[type=text], input[type=email], select {

padding: 5px 8px;

.container form input[type=alamat], select {

padding: 5px 8px;

Fatimah Azzahra 21 B1A022295

.container form button{

Fatimah Azzahra 22 B1A022295

Gambar 1.3 output form pendaftaran

Fatimah Azzahra 23 B1A022295

Gambar 1.4 source code program HTML

<link rel="stylesheet" type="text/css" href="halaman.css">

Fatimah Azzahra 24 B1A022295

<h2 class="internal style">&nbsp;&nbsp;Internal Style

<p>Internal Style merupakan metode penulisan CSS langsung didalam

<h2 class="eksternal style">Eksternal Style

<h2 class="internal style"> Internal Style