Professional Documents
Culture Documents
Jobsheet - Pemrograman - Web SI
Jobsheet - Pemrograman - Web SI
Uploaded by
danuartha ownerOriginal Title
Copyright
Available Formats
Share this document
Did you find this document useful?
Is this content inappropriate?
Report this DocumentCopyright:
Available Formats
Jobsheet - Pemrograman - Web SI
Jobsheet - Pemrograman - Web SI
Uploaded by
danuartha ownerCopyright:
Available Formats
JOB SHEET
PERTEMUAN 2 ………………….
10109013 - DANUARTHA
2A
Dosen Pengampu
Mohammad Iqbal,S.Kom.,M.T.
Sari Azhariyah,S.Pd.,M.T.
[Author] 0
POLITEKNIK NEGERI SUBANG
Jurusan : TIK Waktu : 240 Menit
Program Studi : Sistem Informasi Topik :
Mata Kuliah : Pemrograman Web Judul :
Tanggal : …………………. Pertemuan ke : 1
Tujuan : Mahasiswa mampu memahami dan menjelaskan konsep dasar dan mengimplementasi
serta berlatih penggunaan elemen pada HTML.
Alat dan Bahan : XAMPP, Web Browser, Text Editor
Langkah Kerja :
1. Siapkan dan jalankan xampp, web browser, dan text editor
2. Buat folder praktikum pemrograman web pada folder htdocs
3. Lakukan penulisan sintak program pada text editor
4. Simpan file hasil penulisan sintak tersebut kedalam folder praktikum
5. Jalankan web browser
6. Jalankan web pada mode local dengan mengetikan localhost/folder praktikum/file
sintak pada web browser
7. Output program akan tampil pada web browser
[Author] 0
N Pr Output Program Sintak Kode Program Kete
o akt rang
ik an
1 Lat <!DOCTYPE html>
. iha <html> Peng
n <head> guna
Soa <title>Test Tag Font an
l HTML</title> CSS
2.1 </head> Inlin
<body> e
<p>
CSS merupakan bahasanya
<font color="red">desainer
web</font>. Namun
sebenarnya, apa itu CSS?
<br />
<font color="red">CSS
</font> adalah kumpulan
kode yang digunakan untuk
mendefenisikan desain dari
bahasa markup,
< font color="red">salah
satunya adalah
HTML</font>.
<br />
Dengan CSS kita bisa
mengubah desain dari
<font color="red">text,
warna, gambar dan latar
belakang</font> dari
(hampir) semua kode tag
[Author] 1
HTML.
</p>
</body>
</html>
2 Lat <!DOCTYPE html> Css
. iha <html> men
n <head> ggun
Soa <title>Test Background akan
l Color CSS</title> style
2.2 <style type="text/css"> tab
.warna {
color: red;
}
</style>
</head>
<body>
<p>
CSS merupakan bahasanya
<span class=warna>desainer
web</span>. Namun
sebenarnya, apa itu CSS?
br /> <
<span class=warna>CSS
</span>adalah kumpulan
kode yang digunakan untuk
mendefenisikan desain dari
bahasa markup, <span
class=warna salah satunya
adalah HTML</span>.
<br />
[Author] 2
Dengan CSS kita bisa
mengubah desain dari
<span class=warna>text,
warna, gambar dan latar
belakang</span> dari
(hampir) semua kode tag
HTML.
</p>
</body>
</html>
3 Lat <!DOCTYPE html> CSS
. iha <html> men
n <head> ggun
Soa <title>Contoh Inline akan
l Style CSS</title> inlin
2.3 </head> e
<body> style
<h2 style="background-
color: black; color:
white">Text ini akan
bewarna putih dan
background warna
hitam</h2>
</body>
</html>
4 Lat <!DOCTYPE html> CSS
. iha <html> men
n <head> ggun
[Author] 3
Soa <title>Contoh Inline akan
l Style CSS</title> Inter
2.4 <style nal
type="text/css"> Style
h2 {
background-color:
black;
color: white;
}
</style>
</head>
<body>
<h2>Text ini akan
bewarna putih dan
background warna
hitam</h2>
</body>
</html>
Dst <!DOCTYPE html> CSS
… <html> men
<head> ggun
<title>Contoh Inline akan
Style CSS</title> exter
<style nal
type="text/css"> style
@import
url(belajar.css);
</style>
</head>
[Author] 4
<body>
<h2>Text ini akan
bewarna putih dan
background warna
hitam</h2>
</body>
</html>
<!DOCTYPE html> CSS
<html> deng
<head> an
<title>Contoh Inline exter
Style CSS</title> nal
<link rel="stylesheet" link
type="text/css"
href="belajar.css" />
</head>
<body>
<h2>Text ini akan
bewarna putih dan
background warna
hitam</h2>
</body>
</html>
[Author] 5
<!DOCTYPE html> Impl
<html> eme
<head> ntasi
<title>Belajar CSS
Penulisan CSS</title> deng
<style an
type="text/css"> inter
body { nal
font-size: 14px; style
color: navy;
}
P {
font-family:
calibri, helvetica, sans-
serif;
}
h1,
h2 {
text-decoration:
underline;
font-size: 23px;
color: green;
}
</style>
</head>
<body>
<h1>Belajar Aturan dan
Cara Penulisan Kode
CSS</h1>
<h2>Lorem ipsum dolor
[Author] 6
sit, amet</h2>
<p>
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit.
Laboriosam fuga voluptates
dolore ea tempora,
dignissimos rerum sunt
similique quasi, doloribus
inventore tenetur, quas
iusto doloremque atque
numquam mollitia sapiente
ducimus.
</p>
<h2>Lorem ipsum dolor
sit, amet</h2>
<p>
Lorem ipsum dolor
sit amet, consectetur
adipisicing elit.
Laboriosam fuga voluptates
dolore ea tempora,
dignissimos rerum sunt
similique quasi, doloribus
inventore tenetur, quas
iusto doloremque atque
numquam mollitia sapiente
ducimus.
</p>
</body>
[Author] 7
</html>
<!DOCTYPE html> IMpl
<html> eme
<head> ntasi
<title>Belajar CSS
CSS</title> deng
<style an
type="text/css"></style> meto
</head> de
<body> inlin
<h2
e
class="judul">Belajar
with
CSS</h2>
text
<p>Ini
<strong>adalah</strong>
sebuah
<em>paragraf</em></p>
<p id="belajar_html"
class="paragraf">
Saya sedang belajar
HTML dari
<a
href="https://www.duniailk
om.com"
target="_blank">Duniailkom
</a>
akan terbuka pada
tab baru
</p>
[Author] 8
<p id="belajar_css"
class="paragraf">Saya
sedang belajar CSS, mohon
jangan diganggu</p>
<br />
<h3 class="judul
subheader">Daftar
Belanjaan</h3>
<ol>
<li><em>Minyak
Goreng</em></li>
<li>Sabun Mandi</li>
<li>Deterjen</li>
<li>Shampoo</li>
<li>Obat Nyamuk</li>
</ol>
</body>
</html>
[Author] 9
<!DOCTYPE html> Impl
<html> eme
<head> ntasi
<title>Belajar CSS
CSS</title> men
<style ggun
type="text/css"> akan
h2, inter
h3 { nal
color: blue;
style
}
deng
p strong {
an
color: red;
men
}
amb
h2.judul,
.paragraf {
ahka
font-style: n
italic; Clas
} s
#belajar_html,
p#belajar_css,
h3.subheader {
font-size: 14pt;
}
</style>
</head>
<body>
<h2
class="judul">Belajar
CSS</h2>
<p>Ini
[Author] 10
<strong>adalah</strong>
sebuah
<em>paragraf</em></p>
<p id="belajar_html"
class="paragraf">Saya
sedang belajar HTML dari
<a
href="https://ww.duniailko
m.com"
target="_blank">Duniailkom
</a> akan terbuka pada tab
baru</p>
<p id="belajar_css"
class="paragraf">Saya
sedang belajar CSS, mohon
jangan diganggu</p>
<br />
<h3 class="judul
subheader">Daftar
Belanjaan</h3>
<ol>
<li><em>Minyak
Goreng</em></li>
<li>Sabun Mandi</li>
<li>Deterjen</li>
<li>Shampoo</li>
</ol>
<li>Obat Nyamuk</li>
</body>
</html>
[Author] 11
<html> Impl
<head> emta
<style> si
body { CSS
background-image: deng
url("https://polsub.ac.id/ an
wp-content/uploads/2021/12 inter
/logoPOLSUB-HD.png"); nal
background- style
position: right top;
background-repeat:
no-repeat;
background-size:
300px;
}
h1 {
text-shadow: 5px
2px red;
}
p {
text-indent: 30px;
color: #0033ff;
text-align:
justify;
}
i {
letter-spacing: -
[Author] 12
1px;
}
ul {
line-height: 0.8;
}
a {
font-size: 12px;
font-weight: bold;
font-family:
Arial, "Times New Roman";
text-decoration:
none;
text-transform:
lowercase;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>
CSS <i>(Cascading
Style Sheets)</i>
merupakan cara untuk
memisahkan isi dengan
layout dalam halaman-
halaman web. CSS
memperkenalkan template
berupa style untuk membuat
dan mempermudah penulisan
[Author] 13
dari halaman-halaman yang
dirancang. CSS
dapat menciptakan
halaman yang tampak sama
dengan resolusi layar dari
pengunjung yang berbeda
tanpa memerlukan suatu
tabel. Designer web akan
lebih mudah melakukan
setting tampilan
keseluruhan web hanya
dengan menggantikan
atribut-atribut atau
perintah dalam style CSS
dengan atribut yang
diinginkan tanpa harus
mengubah satu per satu
atribut tiap elemen yang
ada dalam situs.
</p>
Referensi :
<ul>
<li><a
href="https://www.w3school
s.com">WWW.W3SCHOOLS.COM</
a></li>
<li><a
href="https://www.keydata.
com">WWW.lkeydata.COM</a><
/li>
</ul>
[Author] 14
</body>
</html>
[Author] 15
Soa <!DOCTYPE html> Men
l <html lang="en"> gerja
Tes <head> kan
Pra <meta charset="UTF-8" tugas
kti /> prakt
ku <meta name="viewport" ikum
m content="width=device-
width, initial-scale=1.0"
/>
<title>Praktikum</title>
<style>
body {
background-image:
url("https://cdn.pixabay.c
om/photo/2017/12/15/13/51/
polynesia-
3021072_640.jpg");
background-size:
cover;
background-
position: center;
height: 100vh;
margin: 0;
display: flex;
flex-direction:
column;
justify-content:
center;
align-items:
center;
text-align:
[Author] 16
[Author] 17
Analisis dan Penjelasan Kode Program dalam Soal Tes Praktikum :
background-image: Menetapkan gambar latar belakang untuk body.
background-size: Memastikan gambar latar belakang mencakup seluruh tinggi
layar.
background-position: Pusatkan gambar latar belakang.
height: Menetapkan tinggi body sebesar 100% dari tinggi viewport (100vh).
margin: Menghilangkan margin default.
display: Menggunakan flexbox untuk layout.
flex-direction: Mengatur item flex dalam kolom.
justify-content: Pusatkan item sepanjang sumbu vertikal.
align-items: Pusatkan item sepanjang sumbu horizontal.
text-align: Pusatkan konten teks ke tengah.
position: Menetapkan konteks penempatan untuk elemen anak.
font-family: Menentukan jenis huruf untuk elemen h1.
position: Memposisikan elemen h1 secara absolut relatif terhadap elemen yang
memiliki posisi.
top: Menetapkan jarak dari atas.
right: Menetapkan jarak dari kanan.
color: Menetapkan warna teks dengan opasitas sebesar 70%.
text-shadow: Menambahkan bayangan teks untuk efek yang halus.
margin-top: Menetapkan margin atas untuk tombol.
background-color: Menetapkan warna latar belakang tombol menjadi transparan.
color: Menetapkan warna teks tombol menjadi putih.
padding: Menetapkan padding internal untuk tombol.
border: Menghapus batas tombol.
cursor: Mengubah kursor menjadi tanda panah saat dihover.
font-family: Menentukan jenis huruf untuk tombol.
margin-top: Menetapkan margin atas untuk paragraf.
color: Menetapkan warna teks paragraf menjadi hitam.
font-size: Menetapkan ukuran huruf paragraf sebesar 12 piksel.
[Author] 0
text-shadow: Menambahkan bayangan teks untuk efek yang halus.
font-family: Menentukan jenis huruf untuk elemen 'down'.
font-size: Menetapkan ukuran huruf untuk elemen 'down'.
position: Memposisikan elemen 'down' secara absolut relatif terhadap elemen yang
memiliki posisi.
bottom: Menetapkan jarak dari bawah.
color: Menetapkan warna teks untuk elemen 'down' menjadi hitam.
left: Menetapkan jarak dari kiri.
text-align: Menganjurkan konten teks elemen 'down' ke kanan.
[Author] 1
You might also like
- Logbook Projek 2Document3 pagesLogbook Projek 2danuartha ownerNo ratings yet
- Tugas Data Warehause PT 2 & 3Document7 pagesTugas Data Warehause PT 2 & 3danuartha ownerNo ratings yet
- Proposal - Jasa Pembuatan Website Pemasaran Berbasis SEO - Kelompok 10Document16 pagesProposal - Jasa Pembuatan Website Pemasaran Berbasis SEO - Kelompok 10danuartha ownerNo ratings yet
- PKM KCDocument8 pagesPKM KCdanuartha ownerNo ratings yet
- 058-Surat Permohonan Media Partner-Tinta HijauDocument1 page058-Surat Permohonan Media Partner-Tinta Hijaudanuartha ownerNo ratings yet
- Surat Peminjaman Tempat-250Document1 pageSurat Peminjaman Tempat-250danuartha ownerNo ratings yet
- Absensi TK 3 Diluar PJ, Alumni, DpoDocument1 pageAbsensi TK 3 Diluar PJ, Alumni, Dpodanuartha ownerNo ratings yet
- Basis Data Kelompok 7Document21 pagesBasis Data Kelompok 7danuartha ownerNo ratings yet
- NoteDocument1 pageNotedanuartha ownerNo ratings yet
