Scribd
Unggah
18 tayangan

Modul 1 Geoinformatika

Praktikum ini bertujuan untuk mempelajari penggunaan tag HTML dan CSS dalam desain layout website. Mahasiswa akan belajar mendesain layout menggunakan tabel dan div tag serta menambahkan gaya tampilan menggunakan CSS. Praktikum ini terdiri atas dua tugas yaitu desain layout dengan tabel dan desain layout dengan div tag.

Diunggah oleh

Vemilia Julia
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
18 tayangan

Modul 1 Geoinformatika

Praktikum ini bertujuan untuk mempelajari penggunaan tag HTML dan CSS dalam desain layout website. Mahasiswa akan belajar mendesain layout menggunakan tabel dan div tag serta menambahkan gaya tampilan menggunakan CSS. Praktikum ini terdiri atas dua tugas yaitu desain layout dengan tabel dan desain layout dengan div tag.

Diunggah oleh

Vemilia Julia
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 11

PRAKTIKUM 1 : DESAIN WEBSITE

HTML DAN CSS

TARGET PRAKTIKUM
1. Mengetahui penggunaan berbagai macam tag dalam HTML.
2. Mahasiswa mengetahui perkembangan teknologi HTML5
3. Mengetahui script dasar CSS dan mengerti konsep dasar desain layout website dengan
menggunakan HTML dan CSS

A. TUGAS PENDAHULUAN
1. Berdasarkan sifat kontentnya, Website dibedakan menjadi berapa? Sebutkan dan jelaskan.
2. Apa pengertian HTML? tuliskan struktur penulisan tag HTML.
3. Apa yang anda ketahui tentang HTML5? Jelaskan dan tuliskan struktur penulisan tag HTML5
4. Tuliskan contoh tag HTML beserta fungsi atau kegunaannya, Minimal 30 macam tag.
5. Tuliskan macam macam tag dalam HTML5, dan apa kegunaannya.
6. Apa yang anda ketahui tentang CSS? Tuliskan format penulisan CSS.
7. Sebutkan beberapa cara penempatan kode CSS.
8. Sebutkan beberapa macam selector CSS (Minimal 4)? Tuliskan contohnya

JAWABAN TUGAS PENDAHULUAN


B. TUGAS PRAKTIKUM
1. Desain Layout Dengan Tabel
Dalam praktikum ini kita tidak akan membahas satu persatu komponen tag HTML, hal itu bisa anda
pelajari sendiri dalam modul parktikim website. Dalam praktikum kali ini kita akan langsung belajar
membuat tampilan atau layout website dengan menggunakan table dan menambahkan tag tag HTML
yang umumnya dipakai serta property CSS untuk memperindah tampilan di dalamnya.

a. Buat file dengan nama index.html


Ketikkan kode berikut ini pada file index.html yang telah anda buat.
<html>
<head>
<title>Percobaan Praktikum Pertama</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td colspan="2"> Header </td>
</tr>
<tr>
<td colspan="2">Menu</td>
</tr>
<tr>
<td width="488"> Content</td>
<td width="300"> Sidebar</td>
</tr>
<tr>
<td colspan="2"> Footer</td>
</tr>
</table>
</body>
</html>
Anda buka file index.html yang anda buat, dan perhatikan output yang dihasilkan!

b. Tuliskan kalimat berikut ini pada masing masing bagian kolom yang sudah diberi nama
Header  <h2>Selamat Datang Di Webkami</h2>
Menu 
<ul>
<li>
Home</li>
<li>Profil</li>
<li>Hubungi Kami</li>
</ul>
Foofter  Dibuat Oleh ( Masukkan Nama anda )
Sidebar  Ini Bagian Sidebar
Content 
<h3>Teknik Publish Website </h3>
<p align="justify">Publish web adalah cara untuk mempublikasikan
web statis ataupun dinamis yang sudah kita buat agar dapat
dilihat oleh user melalui browser. Agar dapat diakses oleh user
untuk sebuah website, kita memerlukan Domain dan Hosting. </p>
<p align="center">Bagi anda yang belum mengetahui apaitu Domain,
Singkat cerita Domain adalah sebuah nama alamat yang nantinya akan
digunakan user untuk mengakses, melihat atau menampilkan halaman
web kita.</p>
<p align="left">Domain diatur sedemikian rupa sehingga
memudahkan kita dalam mengakses sebuah webserver, karena kita
tidak perlu lagi menuliskan alamat sebuah webserver dalam bentuk
IP address. Sedangkan Hosting adalah tempat kita meletakkan
script, file, gambar, database dari web yang kita buat.</p>
<strong>Berikut cara mempublish website anda : </strong><br>
<ol>
<li>Mendapatkan Domain </li>
<li> Setting name server di domain</li>
<li> Mendapatkan Hosting </li>
<li>Upload website</li>
<li> Instal database </li>
<li>Tes hasil</li>
</ol>

c. Tambahkan Style pada halaman yang telah dibuat.


Buat Sebuah file dengan nama stylecss.css. Anda lampirkan atau tambahkan file tersebut pada file
index.html. dengan aturan : nim ganjil menggunakan external CSS dan nim genap dengan import
CSS. Cara lihat di modul!
Setelah anda tambahkan lalu masukkan text CSS berikut pada file stylecss.css :
.badan_tabel{
margin: auto; // untuk meletakkan table pada tengah body
border: 1px solid #999999;
}
.header{
background-color: #6699FF;
padding: 5px;
height: 100px;
}

Kemudian tambahkan selector .badan_tabel{} pada table dan .header{} pada kolom header seperti
berikut, dan amati perubahannya!

<table width="800" class="badan_tabel">


<tr>
<td colspan="2" class="header"><h2>Selamat Datang Di
Webkami</h2></td>
</tr>

Anda Tambahkan selector baru dengan nama sesuai dengan kolom yang ada dan tambahkan property
di dalamnya sehingga kurang lebih muncul tampilan seperti dibawah, cara menambahkan selector
bisa dilihat di modul!
d. Selanjutnya menata menu yang ada dalam kolom menu dengan menambahkan atribut CSS.
Buka file stylecc.ss kemudian anda tambahkan kode berikut :
.list_menu{
background-color: #FFCC99;
margin: 0px;
width: auto;
padding: 0px;
}
.list_menu li{
float: left;
display: block;
list-style-type: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
padding: 10px;
}
Tambahkan selector .list_menu() tersebut pada list yang terdapat dalam kolom menu,
sehingga output menjadi seperti berikut :
Lanjutkan dengan menambahkan link pada ketiga menu tersebut, arahkan ke file profil.html dan
kontak.html. kemudian tambahkan selector berikut pada file css:
.list_menu li:hover{
background-color: #FFFFFF;
}
.list_menu li a{
text-decoration: none;
}
.list_menu li a:hover{
font-weight: bold;
color: red;
}
Amati perubahan apa yang terjadi!

2. Desain Layout dengan menggunakan Tag DIV

Untuk kali kita akan mencoba membuat layout website dengan menggunakan div tag layer yang akan kita
tambahkan dengan css sehingga tataletak div bisa kita sesuaikan dengan keinginan kita, untuk
mememulainya silahkan perhatikan desain yang akan kita buat berikut dan lakukan instruksi yang
diperintahkan :
Desain Layout Website

1. Buat file dengan nama sebagai berikut : index.html , profil.html, kontak.html.


2. Buka file index.html kemudian anda ketikkan kode berikut ini, anda perhatikan dan tanyakan jika
ada yang belum dipahami kepada asisten.
<html>
<head><title>Desain Dengan CSS Bagian 2</title></head>
<body>
<div id="badan_utama">
<div id="header"></div>
<div id="menu"></div>
<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
3. Kemudian anda buat sebuah file css dengan nama style.css dan anda tambahkan pada
index.html dengan anturan nim genap menggunakan external CSS dan nim ganjil dengan
import CSS. Cara lihat di modul!
4. Setelah anda tambahkan lalu masukkan text CSS berikut pada file style.css :
#badan_utama{
height: auto;
width: 800px;
vertical-align: middle;
box-shadow: 0px 0px 5px #000;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}

#header{
background-color: #FF9900;
text-align: left;
padding-left: 10px;
height: 100px;
z-index: 3;
overflow: hidden;

#menu {
background-color: #999999;
height: 40px;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
#wrapper{
width: 100%;
z-index: 3;
background-color: #FFFFFF;
height: auto;
}
#content{
float: left;
height: auto;
width: 580px;
padding: 5px;
margin-right: 6px;
z-index: 4;
font-size: 12px;

}
#sidebar{
height: auto;
background-color: #FFFFFF;
text-align: left;
width: 200px;
z-index: 5;
float: left;
overflow: hidden;
}
#footer{
clear: both;
height: 20px;
width: 100%;
z-index: 7;
background-color: #0099FF;
font-size: 11px;
text-align: center;
font-weight: bolder;
}
Kemudian anda buka di browser dan amati perubahan yang terjadi pada file html.index!

5. Selanjutnya anda tambahkan tag berikut ini berdasarkan nama id nya :


DIV dengan ID Selector Header :
<h2>Selamat Datang Di Web Kami</h2>
DIV dengan ID Selector Menu :
<ul class="list_menu">
<li><a href="#">Home</a> </li>
<li><a href="#">Profil</a> </li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Hubungi Kami</a></li>
</ul>
DIV dengan ID Selector sidebar :
<table width="100%">
<tr>
<td><h3>Berita Populer</h3></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><h3>Kategori Berita</h3></td>
</tr>
</table>
DIV dengan ID Selector Footer :
Copyright By. Praktikum Website 2012

Arahkan link ketiga alamat tersebut pada file yang sebelumnya telah anda buat, Lalu anda buka
dibrowser dan amati perubahan yang terjadi, kemudian lanjutkan dengan menambahkan text css
berikut ini pada file style.css yang tadi sudah anda buat :
#header h2 {
text-shadow: 0px 0px 2px #000;
color: #FFFFFF;
}
.list_menu{
float: left;
margin: 0px;
padding: 0px;
width: 100%;
}
.list_menu li {
padding: 10px;
height: auto;
list-style-type: none;
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
width: auto;
text-align: center;
}
.list_menu li a{
text-decoration: none;
}
.list_menu li a:hover{
font-weight: bold;
color: #h1h1h1;
text-shadow: 0px 0px 2px #000;
}
.list_menu li:hover{
background-color: #FFFFFF;
}
h3,h4,h5{
color: #FF9900;
font-family: Georgia,"Times New Roman",Serif;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
margin-left: 5px;
margin-top: 5px; }
Amati perubahan yang terjadi dan catat menurut pemahaman anda kemudian jelaskan kepada
asisten saat penilaian dilakukan!

Jika ingin web anda lebih menarik silahkan tambahkan gambar dan mungkin beberapa kolom di
bagian sidebar atau content sesuai dengan keinginan dan kreatifitas anda.

3. Desain Layout dengan tag HTML5


Berbeda dengan HTML sebelumnya, HTML5 menyediakan beberapa tag baru yang memang
digunakan untuk mendesain layout sebuah website, tag baru HTML5 dikembangkan untuk
mempermudah desainer website dalam membuat tampilan website, dan mengelompokkan fungsi
yang memang khusus digunakan dalam menyusun sebuah tampilan website seperti header, artikel
navigasi, dan lainnya.
Langsung saja, anda buat sebuah file HTML baru dengan nama desainhtml5.html dan ketikkan
kode berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Struktur Halaman</title>
</head>
<body>
<header id="judul_hal">
<h1>FoliaPesona</h1>
</header>
<nav id="navigasi">
<ul>
<li><a href="index.html">Home</a> </li>
<li><a href="profil.html">Profil</a> </li>
<li><a href="kontak.html">Kontak</a> </li>
</ul>
</nav>
<section id="seksi_artikel">
<article class="artikel">
<header><h2>Alocasia &quot;Hilo Beauty&quot;</h2></header>
<aside class="aside_artikel"><p>&quot;Percobaan Halaman HTML5&quot;</p></aside>
<p class="isi_artikel"> Ini adalah Halaman Artikel</p>
</article>
</section>
<footer><p>&copy;2012 FolioPesona</p></footer>
</body>
</html>

Tampilan yang dihasilkan dari kode yang anda tuliskan diatas masih terlihat tidak rapi,
untuk merapikannya kita gunakan CSS. Langsung saja buat sebuah file CSS bernama style.css
dan lampirkan file tersebut pada halaman HTML yang telah anda buat sebelumnya.
body {
background-color: #ccff66; /* latarbelakang */
}
#navigasi {
text-align: center;
}
#navigasi a:link, #navigasi a:visited {
color: #003300;
background-color: #99cc66;
text-decoration: none;
padding: 4px 10px 4px 10px;
}
#navigasi ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#navigasi li {
display: inline;
}

#seksi_artikel {
width: 400px;
position: relative;
}
#judul_hal {
text-align: center;
}
#catkaki_hal {
position: relative;
text-align: center;
color: #ffff66;
background-color: #006666;
}
.info_posting {
font-variant: small-caps;
color: green;
}

.aside_artikel {
position: absolute;
left: 220px;
width: 200px;
height: 100px;
padding: 5px;
background-color: #003300;
color: yellow;
text-align: center;
border-radius: 10px;
}
.isi_artikel {
position: relative;
left: 0px;
width: 200px;
padding: 5px;
}
Stelah anda ketikkan CSS tersebut, silahkan anda jalankan halaman HTML ke browser, dan pastikan
browser anda sudah mendukung HTML5 dan CSS3.

Selamat Mengerjakan 

Anda mungkin juga menyukai