LAPORAN TUGAS AKHIR

DESAIN WEB

DISUSUN OLEH
Nama : Andreas Hendra Prakosa
NIM : 20502241016
Prodi : Pendidikan Teknik Elektronika

JURUSAN PENDIDIKAN TEKNIK ELEKTRONIKA DAN INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS NEGERI YOGYAKARTA
2023
A. KAJIAN PUSTAKA
Abstrak
Desain web yang menarik dan fungsional merupakan faktor penting dalam
menciptakan pengalaman pengguna yang baik. Salah satu komponen kunci dalam
desain web adalah CSS (Cascading Style Sheets), yang memungkinkan pengaturan
tampilan dan tata letak elemen-elemen dalam sebuah halaman web. Kajian pustaka
ini bertujuan untuk mengeksplorasi berbagai aspek dalam desain web dengan
menggunakan CSS, termasuk pendekatan desain responsif, teknik pemilihan warna,
pengaturan tata letak, dan optimisasi kinerja.

1. Pendahuluan

a. Pentingnya desain Web

Desain web sangat penting karena dengan desain web yang baik maka
pembaca web dapat melihat informasi yang ingin kita sampaikan dengan
mudah sehingga memberikan experience atau pengalaman yang baik.
b. Peran CSS dalam mendesain web
CSS merupakan singkatan dari cascadi style sheet digunakan untuk
menetukan tampilan dan format dari suatu website seperti huruf yang
digunakan, margin, dan susunan dari paragraf tersebut.
c. Pengertian HTML
Hypertext Markup Language adalah bahasa markah standar untuk dokumen
yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh
teknologi seperti Cascading Style Sheets dan bahasa skrip lainnya seperti
JavaScript, VBScript, dan PHP.

B. ISI WEB
A. Halaman beranda
Pada halaman beranda terdiri dari navbar dan hero image. Navbar berisi petunjuk
atau navigasi untuk menuju isi dari web tersebut dan hero image kiri berisi tulisan
sedangkan hero image kanan berisi gambar.
Berikut adalah tampilan web serta koding pada css style dan index html.
1. Navbar
Index html

Css style
Navbar terdiri dari sebuah logo dan 3 menu. Yaitu pada sebelah kiri dengan Judul
“Elektronika” dan pada sebelah kanan yaitu “home,tentang kami dan materi”

2. Hero image
Terdapat dua hero image yaitu left hero image dan right hero image
a. Left hero image
1. Style css

2. Tampilan web
 3. Index html

b. Right hero image

1. Tampilan web
 2. Style css

3. Index html

B. Halaman materi
Pada halaman materi memiliki satu judul dan dua kelas yaitu kelas “isi materi dan
sublist materi”. Pada kelas isi materi berisi gambar dan pada sub list materi berisi
list materi lainnya (catu daya, buck konverter,amplifier dan filter).
1. Kelas isi materi
a. Tampilan web
b. Style css
c. /* Materi utama */
d.
e. #materi-utama {
f. display: flex;
g. margin-top: 120px;
h. }
i.
j. #materi-utama .isi-materi {
k. width: 70%;
l. padding-left: 16px;
m. }
n.
o. #materi-utama .isi-materi h1 {
p. font-size: 40px;
q. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
r. }
s.
t. #materi-utama .isi-materi h4 {
u. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
v. margin-bottom: 16px;
w. }
x.
y. #materi-utama .isi-materi h3 {
z. margin-top: 24px;
aa. font-family: 'Poppins', Arial, Helvetica, sans-serif;
bb. font-weight: 500;
cc. }
dd.
ee. #materi-utama .isi-materi p {
ff. color: #0e0e0e;
gg. font-weight: lighter;
hh. }
ii.
jj. #materi-utama .isi-materi img {
kk. height: 240px;
ll. margin-bottom: 24px;
mm. margin-top: 24px;

c. Index html
d. div class="isi-materi">
e. <h1>Mengenal Rangkaian Shift Register</h1>
f. <h4>Rangkaian SISO, SIPO, PISO, PIPO</h4>
g. <hr>
h. <h3>Rangkaian SISO (Serial Input Serial Output)</h3>
i. <img src="/gambar/siso.png" alt="serial input serial
output">
 j. <p>SISO adalah sejenis shift register dimana pemuatan data
serta pengambilan data ke/dari register geser terjadi dalam mode
serial. Pergeseran data dimulai dari input, diteruskan ke FF D3,
ketika ada input data masuk maka akan diteruskan/digeser ke FF
D2, begitu seterusnya.</p>
k. <h3>Rangkaian SIPO (Serial Input Paralel Output)</h3>
l. <img src="/gambar/sipo.png" alt="serial input serial
output">
m. <p>SIPO adalah sejenis Shift Register yang mempunyai satu
saluran masukan dan saluran keluaran sejumlah flip-flop
penyusunnya. Data masuk satu-persatu secara serial dan
dikeluarkan secara serentak.</p>
n. <h3>Rangkaian PISO (Paralel Input Serial Output)</h3>
o. <img src="/gambar/piso.jpg" alt="serial input serial
output">
p. <p>Kebalikan dari SIPO, PISO memiliki inputan sejumlah
flip-flop penyusunnya, dan hanya memiliki satu keluaran. Pada
tipe ini, data diinput secara serentak dengan dikendalikan
sinyal control, sedangkan data keluar satu-persatu secara
serial.</p>
q. <h3>Rangkaian PIPO (Paralel Input Paralel Output)</h3>
r. <img src="/gambar/pipo.jpg" alt="serial input serial
output">
s. <p>PIPO register adalah salah satu jenis shift register
dimana data diinput/dimuat secara parallel dan memiliki
output/data dikeluarkan secara parallel.</p>

2. Kelas sublist materi

a. Tampilan web
 b. Stye css
c. #materi-utama .subList-materi {
d. padding-left: 24px;
e. width: 30%;
f. }
g.
h. #materi-utama .subList-materi h1 {
i. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
j. }
k.
l. #materi-utama .subList-materi .list {
m. margin-top: 24px;
n. display: flex;
o. flex-direction: column;
p. }
q.
r. #materi-utama .subList-materi .list a {
s. margin: 8px;
t. font-weight: 500;
u. padding: 8px 32px;
v.
w. color: #0A4D68;
x. text-decoration: none;
y. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
z. }
aa.
bb. #materi-utama .subList-materi .list a:hover {
cc. background-color: #0A4D68;
dd. color: #fefefe;

c . index html
</div>
<div class="subList-materi">
<h1>Pelajari juga di materi ini</h1>
<div class="list">
<a href="#">Catu Daya</a>
<a href="#">Buck Konverter</a>
<a href="#">Amplifier</a>
<a href="#">Filter</a>
</div>
</div>
</section>
C. Halaman Footer
Halaman footer berisi h3: nama penulis web dan h5:media sosial penulis web
a. Tampilan web

b. Style css
c. footer {
d. margin-top: 48px;
e. padding: 16px 48px;
f. height: 120px;
g. width: 100%;
h. text-align: center;
i. background-color: #0e0e0e;
j. }
k.
l. footer h3 {
m. margin-bottom: 16px;
n. font-weight: 500;
o. font-size: 14px;
p.
q. color: #fefefe;
r. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
s. }
t.
u. footer h5 {
v. margin-bottom: 16px;
w. font-size: 12px;
x. font-weight: 300;
y. color: #fefefe;
z. font-family: 'Montserrat', Arial, Helvetica, sans-serif;
aa. }
bb.
cc. footer a {
dd. padding: 4px 8px;
ee. font-size: 22px;
ff. color: #fefefe;
 c . index html
<footer>
<h3>Ditulis oleh Irjen Andreas Hendra ,SH.,H.SIP</h3>
<h5>Ikuti Kami</h5>
<a href=""><i class="fa-brands fa-facebook"></i></a>
<a href=""><i class="fa-brands fa-instagram"></i></a>
<a href=""><i class="fa-brands fa-twitter"></i></a>

C . KESIMPULAN
Dari percobaan membuat desain web diatas dapat disimpulkan bahwa untuk membuat
web diperlukan format html untuk memasukan tulisan gambar dll. Dan untuk mendesain web
supaya lebih menarik dan tertata rapi menggunakan frame work untuk styling web salah
satunya adalah CSS.