Laporan 5 Praktikum Pemrograman Web

LAPORAN 5 PRAKTIKUM
PEMROGRAMAN WEB
“CSS Navigasi dan Layout”
Disusun Oleh:
A.M.Mursalim Bintang
19290401012
PTIK A 2019
Dosen :
Hasrul Bakri, S.Pd., M.T
PRODI PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
FAKULTAS TEKNIK
UNIVERSITAS NEGERI MAKASSAR
2021
A. JUDUL
CSS Navigasi dan Layout
B. TUJUAN
1. Mengenal perintah dasar CSS.
2. Mahasiswa mampu membuat dokumen html menggunakan Navigasi dan Layout serta
menggunakan text editor dan menampilkannya lewat browser
3. Membuat file extensi html dan file.css sederhana menggunakan text editor dan
menampilkan pada browser.
C. Alat dan Bahan
1. Laptop/PC
2. Notepad / Notepad++ / Text editor lainnya
3. Web browser (Firefox, Google Chrome, Internet Explorer atau yang lainnya)
D. Langkah Kerja
1. Bukalah notepad atau program text editor yang lain.
2. Ketikkan script doukumen html :Simpan (File|Save As), dengan nama
Nama_Modul5.html dan file.css (file harus disimpan dengan format .html dan css.)
3. Bukalah dokumen yang anda buat tadi dengan cara klik kanan Open with (pilih salah
satu web browser yang tersedia di komputer/PC Anda
4. Analisis dan jelaskan script Tugas Mandiri.
E. Teori Dasar dan Praktikum
1. Naviagsi
Navigasi bar (navigation bar) atau biasanya disebut dengan navbar merupakan
komponen penting pada suatu website yaitu digunakan sebagai menu yang berisi
link-link yang bersifat umum pada suatu website, misalkan home, about, contant
us, dan lain sebagainya.
Navigasi pada dasarnya adalah daftar link. Navigasi akan menggunakan tag <ul>
dan <li>
Contoh :
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
a. Contoh sederhana
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Output :
Analisis :
b. Navigasi Vertikal
<html>
<head>
<style>
ul
{
list-style-type:none; margin:0; padding:0;
}
a:link,a:visited
{
display:block; font-weight:bold;
color:#FFFFFF; background-color:#98bf21;
width:120px; text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style></head>
<body>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output :
Analisis :
List-style-type:none menghapus bullets. Navigasi utama tidak memerlukan penanda

bullet ini.
Margins dan padding = 0 untuk menghapus pengaturan default browser display:block
- menampilkan link sebagai elemen blok untuk membuat seluruh bagian link dapat
diklik (tidak hanya teks), dan Memungkinkan kita untuk menentukan
lebar.width:60px pengaturan lebar blok.
c. Navigasi Horisontal
<html>
<head>
<style>
ul
{
list-style-type:none; margin:0;
padding:0; overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px; font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style></head>
<body>
<ul>
<li><a href="#berita">Berita</a></li>
<li><a href="#kontak">kontak</a></li>
</ul>
</body>
</html>
Output :
Analisis :
2. Layout
Layout web adalah desain dasar untuk membuat tampilan suatu website terutama
pada penataan elemen-elemen sebuah website. Elemen website umumnya terdiri dari;
header, navigation, sidebar, content, dan footer.
1. Layout 2 Kolom
body {margin:0;
font-family:Verdana, Arial, sans-serif; }
#wrapper { background-color:#e8b9e8;
color:#000066; }
#leftcolumn { float:left;
width:100px; }
#rightcolumn { margin-left:100px;
background-color:#ffffff;
color:#000000; }
#logo { background-color:#eeeeee;
color: #cc66cc;
font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 20px 0 20px; }
#floatright {margin:10px;
float:right; }
.footer {font-size:xx-small;
text-align:center;
clear:right;
padding-bottom:20px; }
.navBar{ text-decoration:none;
margin: 15px;
display:block; }
Output :
Analisis :
2. Layout 3 Kolom
<html>
<head>
<title>contoh css float 3 kolom</title>
<style type="text/css">
<!--
body{background-color:pink;
width:1000px;
margin:auto;}
h2{padding-left:10px;}
#sidebar-kiri{
min-height:500px;/* tinggi minimal*/
float:left;/* menekan ke kiri*/
width:300px;/* lebar */
margin:5px;
background-color:white;
}
#sidebar-tengah-atau-badan{
margin:5px;
}
#sidebar-kanan{
margin:5px;
}
</style>
</head>
<body>
<div id="sidebar-kiri"> <h2>sidebar kiri</h2>
</div>
<div id="sidebar-tengah-atau-badan">
<h2>sidebar tengah</h2>
</div>
<div id="sidebar-kanan">
<h2>sidebar kanan</h2>
</div>
</body></html>
Output :
Analisis :
F. Tugas Mandiri
1. Buatlah Navigasi seperti pada gambar dibawah ini:
Jawab
Script HTML
<html>
<title>
</title>
<link rel="stylesheet" href="style1.css">
<body>
<ul>
<li><a href="no 21.html">Home</a></li>
<li><a href="#berita">Abaout</a></li>
<li><a href="#kontak">List</a></li>
<li><a href="#about">Tutorial</a></li>
<li><a href="#about">Download</a></li>
</ul>
</body>
</html>
Script CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #000000;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #2089eb;
}
Output :
2. Buatalah Navigasi Vertikal disertai 2 kolom layout dan 3 kolom layout

Jawab
Script HTML
<html>
<title>
</title>
<body>
<div id="sidebar">
<h1>Daftar harga laptop:</h1>
<ul>
<li>
<h3>kategori</h3>
<li><a href="#">laptop</a></li>
<li><a href="#">Mouse</a></li>
<li><a href="#">hardisk</a></li>
<li><a href="#">Ram</a></li>
</li>
</ul>
</div>
<div id="sidebar-kiri">
<h2>laptop asus</h2>
<div id="dialog">
<img src="img/asus.jpeg" alt="">
<a>laptop asus ini memiliki tipe yaitu ASUS Chromebook
C425TA – H53464 dengan sangat mumpuni digunakan untuk kuliah ataupun
desain
grafis, game dan lain lain. laptop ini di bandrol dengan
harga 9.000.000
.</a><br> <p>Rp.9.000.000</p>
<input type="submit" value="pesan sekarang" name="t1">
</div>
</div>
<h2>laptop hp</h2>
<div id="dialog">
<img src="img/hp.jpeg" alt="">
<a> dengan spesifikasi laptop ini sangat mumpuni dengan tipe
HP PAVILION GAMING 15 - R5 4600H 16GB 256GB SSD GTX1650
4GB WIN10 FHD laptop ini
di banrol dengan harga 11.799.000 saja anda sudah
mendapatkan laptop ini yang begitu sangat waw.</a><br>
<p>Rp.11.799.000</p>
</div>
</div>
<h2>laptop ROG</h2>
<div id="dialog">
<img src="img/rog.jpeg" alt="">
<a>laptop ini sangat bagus laptop ini tentunya bagi kaum
sultan wkkwkwk, dengan memiliki tipe sangat waw yang sangat cocok di
segala hal
yang tipenya ASUS ROG Zephyrus M GM501GM-EI031T
i7-8750H 16GB 1TB+256GB GTX1060 6GB, laptop ini di banrol dengan
harga 20 juta saja kita sudah
mendapatkan laptop sultan ini wkwkw.</a><br>
<p>Rp.20.000.000</p>
</div>
</div>
<footer>
<b>Copy-right @ 2021</b><br>
<b>salim.co</b>
</footer>
</body>
</html>
Script CSS
ul {
margin-left: -10%;
margin-top: -85px;
padding: 0; width: 10%;
background-color: rgb(255, 30, 68);
position: fixed;
height: 30.3%;
overflow: auto;
} li a { display: block; color: #000;
padding: 8px 0px 8px 16px;
text-decoration: underline;
}
li a.active {
background-color: #4caf50; color: white;
}
li a:hover:not(.active) {
background-color: rgb(230, 24, 24); color: white;
}
ul {
border: 1px solid #555;
margin-top: -60px;
}
li { text-align: center;
border-bottom: 1px solid #fff;
}
li:last-child {
border-bottom: #555;
}
body {
background-image: url("img/gambar1.jpg");
background-size: cover;
width: 1000px;
margin: auto;
} h1 { margin-top: 50px;
margin-left: 5px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
} h2 { padding-left: 10px;
margin-top: 0px;
text-align: center;
}
#sidebar-kiri {
min-height: 500px;
float: left;
width: 325px;
margin-top: -20px;
margin-left: 5px;
background-color: rgb(255, 255, 255, 0.7);
border-style: solid;
border-width: 2px;
}
#sidebar-tengah-atau-badan {
min-height: 500px;
float: left;
width: 320px;
margin-top: -20px;
margin-left: 5px;
border-width: 2px;
}
#sidebar-kanan {
min-height: 500px;
float: left;
width: 325px;
margin-top: -20px;
margin-left: 5px;
border-width: 2px;
}
#dialog {
width: 310px;
height: 210;
margin: 7px;
margin-top: -20px;
}
.b { color: white;
} img {
width: 300px;
height: 200;
margin: 5px;
}
input[type=submit] {
font-size: 20px;
border: none;
color: rgb(0, 0, 0);
padding: 6px 4px;
font-family: sans-serif;
margin: 4px 2px;
cursor: pointer;
cursor: pointer; -webkit-border-radius: 5px;
border-radius: 5px;
} p{
font-size: 20px;
color: rgb(0, 0, 0);
font-family: serif;
font-weight: bold;
}
footer {
text-align: center;
}
Output :
3. Buatlah Navigasi Horisontal disertai 2 kolom layout dan 3 kolom layout yang
didalamnya terdapat form pengisian checkout pembelian barang.
Jawab
Script HTML
<html>
<title>
</title>
<body>
<div id="sidebar">
<h1>Daftar harga laptop:</h1>
<ul>
<li>
<h3>kategori</h3>
<li><a href="#">laptop</a></li>
<li><a href="#">Mouse</a></li>
<li><a href="#">hardisk</a></li>
<li><a href="#">Ram</a></li>
</li>
</ul>
</div>
<div id="sidebar-kiri">
<h2>laptop asus</h2>
<div id="dialog">
<img src="img/asus.jpeg" alt="">
<a>laptop asus ini memiliki tipe yaitu ASUS Chromebook C425TA –
H53464 dengan sangat mumpuni digunakan untuk kuliah ataupun desain
grafis, game dan lain lain. laptop ini di bandrol dengan harga
9.000.000
.</a><br> <p>Rp.9.000.000</p>
</div>
</div>
<h2>laptop hp</h2>
<div id="dialog">
<img src="img/hp.jpeg" alt="">
<a> dengan spesifikasi laptop ini sangat mumpuni dengan tipe HP
PAVILION GAMING 15 - R5 4600H 16GB 256GB SSD GTX1650 4GB
WIN10 FHD laptop ini
di banrol dengan harga 11.799.000 saja .</a><br>
<p>Rp.11.799.000</p>
</div>
</div>
<h2>laptop ROG</h2>
<div id="dialog">
<img src="img/rog.jpeg" alt="">
<a>laptop ini sangat bagus laptop ini tentunya bagi kaum sultan
wkkwkwk, ang sangat cocok di segala halyang tipenya ASUS ROG
Zephyrus M GM501GM-EI031T
i7-8750H 16GB 1TB+256GB GTX1060 6GB,harganya 20 juta saja
wkwkw.</a><br>
<p>Rp.20.000.000</p>
</div>
</div>
<footer>
<b>Copy-right @ 2021</b><br>
<b>salim.co</b>
</footer>
</body>
</html>
Script CSS
h3 {
color: #FFFFFF;
font-size: larger;
}
ul {
padding: 0;
overflow: hidden;
margin-left: 10px;
} li { float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
text-align: center; padding: 4px;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #f5183d;
}
body {
background-image: url("img/gambar1.jpg");
background-size: cover;
width: 1000px;
margin: auto;
}
h1 { margin-top: 0px;
margin-left: 5px;
background-color: rgba(24, 236, 243, 0.7);
color: white;
}
h2 { padding-left: 10px;
margin-top: 0px;
text-align: center;
}
#sidebar-kiri {
min-height: 450px;
float: left;
width: 325px;
margin-top: -20px;
margin-left: 5px;
border-width: 2px;
}
#sidebar-tengah-atau-badan {
min-height: 450px;
float: left;
width: 320px;
margin-top: -20px;
margin-left: 5px;
border-width: 2px;
}
#sidebar-kanan {
min-height: 450px;
float: left;
width: 325px;
margin-top: -20px;
margin-left: 5px;
border-width: 2px;
}
#dialog {
width: 310px;
height: 210;
background-color: black;
margin: 7px;
margin-top: -20px;
}
.b { color: white;
}
img {
width: 300px;
height: 200;
margin: 5px;
}
input[type=submit] {
font-size: 20px;
border: none;
color: black;
padding: 6px 4px;
font-family: sans-serif;
margin: 4px 2px;
cursor: pointer;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
p{
font-size: 20px;
color: black;
font-family: serif;
font-weight: bold;
} footer {
text-align: center;
}
Output :

Laporan 5 Praktikum Pemrograman Web

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

Laporan 5 Praktikum Pemrograman Web

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN 5 PRAKTIKUM

PRODI PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

List-style-type:none menghapus bullets. Navigasi utama tidak memerlukan penanda

2. Buatalah Navigasi Vertikal disertai 2 kolom layout dan 3 kolom layout

Anda mungkin juga menyukai