LAPORAN Praktikum

LAPORAN PRAKTIKUM
REKAYASA PERANGKAT LUNAK
Disusun Oleh:
Nama :Shelza Destania ivanda
NIM : D22.2020.03167
KELAS : D22.35
PROGRAM STUDI DIII REKAM MEDIS DAN INFORMASI KESEHATAN

FAKULTAS KESEHATAN UNIVERSITAS DIAN NUSWANTORO
SEMARANG
Pertemuan : UTS
Pokok Bahasan : Mengaplikasikan seluruh materi dari pertemuan
pertama sampai css
Laporan Praktikum
A. Tujuan Praktikum
1. Membuat cv
2. Mengaplikasikan seluruh materi yang sudah diajarkan dari HTML
sampai CSS
B. Tahapan Praktikum
1. Buka tampilan sublime yang sudah di instal
2. Sebelum memulai membuat dokumen klik file ditampilan
sublimesebelah kiri dan pilih save lalu tentukan dokumen yang akan
tersimpan disimpan dimana, lalu kasih nama dokumen dan diakhir
nama dikasih .html lalu klik save.
3. Mulai membuat dokumen HTML nya. Pertama ketik <HTML> lalu
akan muncul skema dasar dokumen HTMLseperti
HTML,HEAD,TITLTE,BODY.
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY> Isi dokumen </BODY>
</HTML>
4. Setelah itu ketik sesuai dengan apa yang akan diisikan, seperti
judulnya apa isi dokumennya dan jangan lupa klik ctrl+S agar dokumen
tersimpan.
5. Lanjut kita mengetik judul html pada bagian <title></title>, disini
karena saya akan membuat tugas UTS maka saya memberikan judul
UTS Semester 3HTML.
6. Membuat isi menggunakan tag <div id="header"> untuk mengelompokan
elemen untuk menjadi satu grup. Namun disini saya menggunakan untuk
mendefinisikan id atau claas dari css.
7. Menggunakan tag <link rel="stylesheet" type="text/css" href="xxxx">
untuk menghubungkan html dengan css. (xxxx) diisi sesuai nama file css.
8. membuat tabel 1 dengan tag<table class="tabel1" width="(ukuran yang
diinginkan)px" border="(ketebalan yang diinginkan)"> dan langsung di
beri formatnya seperti width untuk ukuran keseluruhan tabel, border itu
untuk tebal garis tabel. Dan class itu buat nanti memanggil di koding
cssnya.
9. Lalu gunakan tah <tr></tr> untuk membuat baris pada tabel,di tabel
pertama ini kita memasukan logo universitas dengan cara menggunakan
tag <td align="center" height="150px" width="30%"><img
src="udinus.jpg" width="50%" /></td>didalam nya sudah memuat
ukuran dan letaknya.
10. Lalu membuat judul CV yang sudah ditentukan yaitu WEBSITE TUGAS
TAKE HOME MID GANJIL 2021/2022 dan letaknya di sebelah logo
universitas dengan cara <td align="center" width="600px"
height="150px">WEBSITE TUGAS TAKE HOME MID GANJIL
2021/2022</td>setelah itu tutup tag table nya </table>.
11. Setelah table pertama jadi lalu buat table ke 2 dengan tag <table
class="tabel2" border="0" width="900px">sesuai ukuran yang
dianjurkan.
12. Lalu membuat kata profil untuk keterangan diawali dengan <tr> lalu<td
width="30%" height="25px">Profil :</td>.
13. Setelah itu disini saya akan membuat formulir yang berisi nama,
password, tanggal lahir, jenis kelamin, jurusan, hobi, alamat.
14. Sebelum itu saya membuat table 3 dengan tag <table width="85%"
class="tabel3" border="0" width="550px"> untuk memisahkan profil
dan formulir Yang ingin saya buat.
15. Selanjutnya membuat formulir menggunakan tag <form>
16. Lalu saya membuat judul formulir yaitu “formulir pendaftaran”, yang
pertama saya mebuat baris pada table 3 menggunakan tag <tr>, lalu
saya menggunakan tag <th colspan="3"><font size="30px">Formulir
Pendaftaran</font></th>.
17. Saya membuat form pengisian nama menggunakan tag<input
type="text" name="nama"></td>
18. Saya membuat form penulisan password menggunakan tag <input
type="Password" name="password"></td>
19. Saya membuat form tanggal lahir menggunakan tag <input type="date"
name="tanggal_lahir"></td>
20. Saya membuat form pemilihan jenis kelamin menggunakan tag <input
type="radio" name="jankel" value="Laki laki">Laki laki <br><input
type="radio" name="jankel" value="Perempuan">Perempuan
21. Saya membuat form pemilihan jurusan menggunakan tag
<select><option value="sss">sss</option></select>, mebuat tag
tersebut lebih dari satu agar menjadi option pilihan. “sss” ditulis dengan
jurusan-juruan yang kita ingin tulis untuk di jadikan option.
22. Saya membuat form pemilihan hobi menggunakan tag <input
type="checkbox" name="sss">sss, mebuat tag tersebut lebih dari satu
agar menjadi option pilihan. “sss” ditulis dengan hobi-hobi yang kita
ingin tulis untuk di jadikan option.
23. Saya membuat form pengisian alamat dengan menggunakan tag
<textarea cols="30" rows="6"></textarea>.
24. Setelah saya menyelesaikan pembuatan formulir saya melanjutkan
pengisian profil dengan melanjutkan koding setelah tag tutup table 3
25. Pertama yag dilakukan adalah membuat barisah menggunakan <tr>
26. Lalu masukan foto kita untuk melengkapi data diri kita dengan tag <td
align="center" width="30%"><img src="33.jpg" width="50%"></td>.
Sudah disesuaikan sesuai ukuran dan letak fotonya.
27. Setelah itu untuk melengkapi data nama, nim dan mengisi link-link tugas
disini saya menggunakan tag <table> kembali agar lebih rapi.
Sebelumnya juga sudah menentukan ukuran tabel dan keteballan tabel.
28. Lalu saya ketikan nama dengan tag <tr> lalu
<td>NAMA</td>
<td>:</td>
<td>Nama Mahasiswa </td></tr>
29. Selanjutnya Nim dibuka kembali dengan tag<tr>lalu
<td>NIM</td>
<td>:</td>
<td>NIM Mahasiswa </td></tr>
30. Setelah Nim dilanjutkan dengan kelompok kelas dibuka kembali dengan
tag<tr>lalu
<td>KELOMPOK</td>
<td>:</td>
<td>KELOMPOK KELAS Mahasiswa </td></tr>
31. Setelah itu lalu bagian untuk memasukan link-link tugas dan link website
udinus dibuka kembali dengan tag<tr>lalu
<td width="50px" height="25px">
<ol>
<li><a href="(nama file dikomputer mahasiswa)">Tugas 1</a></li>
<li><a href="https://dinus.ac.id/">UDINUS</a></li>
</ol></td></tr>
32.Karena sudah terisi semua jadi tutup table menggunakan tag</table>

Lalu buat footer dengan tag
<div id="footer" >By Nama Mahasiswa tahun 2021</div>
33.Langkah terakhir di HTML ini kita save kodingnya dan membuka file yang
kita buat dengan menggunakan chrome dan refresh untuk melihat hasil
koding.
34. Selanjutnya membuat css, habis itu membuat file baru bernama denga format
Index.css lalu save
35.Mengedittag bodybody{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
Margin untukmengatursebuhasisidalamdan padding
mengatursisidalamdariluar element
Box-sizing untukmengatursebuahborder,padding,heightdan width
List-style digunakanuntukmenentukanbentukataugayapenandaatau
marker padatiap list
36.Mengedit tag table 1
background-color: #1C2833;
color: #FDFEFE;
font-size: 55px;
font-family: 'Montserrat', sans-serif;
background color : #1C2833;untukmenentukan background warna yang
berada di dalam table pertama
color: #FDFEFE;untukmewarnai font yang berada di dalam table
pertamayaitu website tugas take home mid ganjil 2021/2022
background-color:#283747 ;Untukmewarnai background table kedua
color: #FDFEFE;Untukmewarnai font yang berada di dalam table kedua
background-color: #FDFEFE;Untukmewarnai table background ketiga
color: #212F3D;Untukmewarnai font huruf yang berada di table ketiga
margin-left: auto;
margin-right: auto;
margin untukmemberijaraktepigarisluarkanandankiri
41.Mengedit tag footer
text-align: center;
font-size: 20px;
background-color: #A6ACAF;
width: 900px;
Text align:;Untukmengatur pertain kalimatatau paragraph
Font-size:;Untukmengaturukuransuatuhuruf yang terdapat di suatu
footer
Background-color:;Sebagailatarbelakangwarna yang berada di bagian
footer
Width;;Untukmengatursebuahpanjang footer
42.Mengedit tag link
text-decoration: ;Untukmemberikanefekgarispada kata atau underline
color: ;Memberikanwarnapadasebuah link
43.Mengedit tag link visited
text-decoration:;Untukmemberikanefekgarispada kata atau underline
44.Mengedit tag link hover
45.Mengedit tag link active

color: ;Memberikanwarnapadasebuah link.
C. Hasil Praktikum
1. Coding
A. HMTL
B. CSS
2. Hasil
D. Deskripsi Hasil Praktikum
1. <h1></h1> mengatur besarnya huruf, biasanya di gunakan untuk
membuat judul paragraf atau lainnya.
2. <table ><table>, berfungsi untuk menampilakan data dalam bentuk
table.
3. <tr></tr>, berfungsi untuk membuat baris pada table.
4. <tb></tb>,berfungsi untuk mebuat kolom pada garis.
5. <th></th>, berfungsi untuk membuat kolom namun terletak pada
baris pertama dan sebagai header dari table.
6. Align=”center”, berfungsi untuk pengatur text atau paragraph agar
tampilannya rata tengah.
7. Style="margin:0px 0px 0px 0px;" berfungsi untuk mengaplikasikan
jarak tepi margin memiliki 4 elemen yaitu top, right,bottom, left.
8. Border="1/0", berfungsi untuk menampilkan garis table jika
berangkasatu, tetapi jika berangka nol maka garis table akan hilang.
9. Colspan="x", berfungsi untuk menyatukan beberapa kolom. “X” bisa di
isi sesuai kolom yang ingin digabungkan.
10. Rowspan="x", berfungsi untuk menyatukan beberapa baris. “X” bisa di
isi sesuai baris yang ingin digabungkan.
11. Valign="top", berfungsi untuk pengatur text atau paragraph agar
tampilannya naik ke atas.
12. Width="x.px", berfungsi untuk mengatur ukuran lerbar suata
gambar, table atau lainnya.
13. <Img src="nama gambar.jenis file gambar">, berfungsi
untukmemasukan gambar.
14. <font face=”jenis huruf”>, berfungsi untuk mengubah
jenis huruf.
15. <br>, berngsi membuat baris baru.

16. <u></u> untuk membuat garis bawah pada text
17. <b></b> untuk menebalkan text.

LAPORAN Praktikum - Take Homem (UTS)

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

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

LAPORAN Praktikum - Take Homem (UTS)

Diunggah oleh

Hak Cipta:

Format Tersedia

REKAYASA PERANGKAT LUNAK

PROGRAM STUDI DIII REKAM MEDIS DAN INFORMASI KESEHATAN

32.Karena sudah terisi semua jadi tutup table menggunakan tag</table>

color: ;Memberikanwarnapadasebuah link

45.Mengedit tag link active

15. <br>, berngsi membuat baris baru.

Anda mungkin juga menyukai