Anda di halaman 1dari 19

DESAIN WEB

LAPORAN TUGAS AKHIR

Oleh :
Nama

: Iqbal Fathur Rizqi

Nim

: 4514210031

Jurusan

: Teknik Informatika

Nama Dosen

: Agung Budi Prasetyo, MT

Nama Asisten

Imam Sampurno Nugroho


Radiana Rianggadewi
Fajar
Fakultas Teknik Universitas Pancasila
Jakarta Selatan

KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Kuasa, karena dengan rahmat dan
karunia-Nya saya dapat menyelesaikan penulisan Laporan Praktikum DESAIN WEB 1 dengan tema
MUSIK.
Laporan ini disusun dalam rangka menyelesaikan tugas akhir praktikum DESAIN WEB 1.
Saya mengucapkan terima kasih kepada dosen dan asisten-asisten dosen Desain Web 1 yang
telah membimbing saya, karena atas bimbingan dan pengarahannya saya dapat menyelesaikan
Laporan Praktikum Desain Web 1 ini.
Dimohon kritik dan Sarannya untuk laporan ini, agar saya dapat memberikan laporan yang
lebih baik kedepannya.

Jakarta, . 2015

Penulis

DAFTAR ISI
2

KATA PENGANTAR........................................................................................................2
DAFTAR ISI ....................................................................................................................3
BAB I

PENDAHULUAN .................................................................................... 4

BAB II

ISI.............................................................................................................. 5
I. Source Code ......................................................................................... 5
II. Print Screen...........................................................................................15

BAB III

KESIMPULAN......................................................................................... 18

BAB I
3

PENDAHULUAN
Web Desain adalah istilah yang sering digunakan untuk menggambarkan bagaimana
tampilan isi suatu website atau situs. Tampilan dari website biasanya berupa hypertext
(HTML) atau hypermedia yang dikirimkan ke user melalui World Wide Web. Untuk
menampilkan suatu desain web atau isi dari suatu website, dibutuhkan sebuah browser web
atau software (perangkat lunak) berbasis web. Tujuan dari web desain adalah untuk membuat
website yang meliputi sekumpulan konten online termasuk dokumen dan aplikasi yang
berada pada web server. Bisa juga, sebuah website berupa sekumpulan teks, gambar, suara
dan konten lainnya, serta dapat bersifat interaktif maupun statis.
Elemen-elemen
seperti
teks, forms, images (GIFs, JPEGs, Portable
Network
Graphics) dan video dapat diletakkan di dalam halaman menggunakan tag-tag
HTML/XHTML/XML. Browser terkadang
juga
memerlukan Plug-ins seperti Adobe
Flash, QuickTime, Java, dan sebagainya untuk menampilkan beberapa media yang diletakkan
di dalam halaman web menggunakan tag-tagHTML/XHTML.
Halaman web dan situs web dapat berupa halaman statis, atau dapat diprogram secara
dinamis sehingga menghasilkan halaman web dengan konten atau tampilan visual yang
diinginkan, tergantung pada berbagai faktor, seperti masukan dari pengguna akhir, masukan
dari Webmaster, atau perubahan dalam lingkungan komputasi (seperti situs yang terkait
dengan database yang telah diubah).

Bahasa Markup (seperti HTML, XHTML dan XML)


Gaya lembar bahasa (seperti CSS dan XSL)
Client-side scripting (seperti JavaScript dan VBScript)
Server-side scripting (seperti PHP dan ASP)
Teknologi database (seperti MySQL dan PostgreSQL)
Teknologi multimedia (seperti Flash dan Silverlight)

Perancang web atau desainer web (web designer) adalah orang yang memiliki keahlian
menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke
pengguna-akhir melalui World Wide Web, menggunakan Web browser atau perangkat lunak
Web-enabled lain seperti televisi internet, Microblogging, RSS, dan sebagainya.
Web Terdiri Dari 4 Bagian :
1. HTTP (Hyper Text Type Protocol)
2. URL (Uniform Resource Locator)
3. Client Server
4. HTML (Hyper Text Markup Language)

BAB II
4

ISI
Source code
>Home.html
<html lang="id">
<head>
<link rel="shortcut icon" href="logo.jpg">
<title>Music</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div class="logo">
<img src="full.jpg" border="0" usemap="#profile
Room"></img>
</div>
<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
<header>
<h1>Tugas Akhir Desain Web1</h1>
</header>
<div id="profile">
<img width='300' height='300' src="rekti1.jpg">
<div id="kanan"><center>
<table border="1" cellspacing="1" border color="black"
width="40%">
<caption><h3><font face="arial" color="black">
<i>PROFIL</i></font></h3></caption>
<tr>
<td align="center"></td>
<td align="center"><b><i>Nama Personil</i></b></td>
</tr>
<tr>
<td align="center">1</td>
<td>Rektivianto Yoewono</td>
</tr>
<tr>
<td align="center">2</td>
<td>Aditya Bagja Mulyana</td>
</tr>

<tr>
<td align="center">3</td>
<td>Farri Icksan Wibisana</td>
</tr>
<tr>
<td align="center">4</td>
<td>Donar Armando Ekana</td>
</tr>
</table>
</center>
</div>
</div>
</div>
</body>
<footer><center><p>Selamat Datang di Blog IqbalFRizqi<br></p>
&copy; Desain Web 1 <em>2014 Iqbal Fathur Rizqi // twitter:@IqbalFRizqi //
Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</html>

>The S.I.G.I.T.html
<html lang="id">
<head>
<link rel="shortcut icon" href="logo.jpg">
<title>The S.I.G.I.T</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
<div align="center">
<div class="logo">
<img src="music.jpg" border="0" usemap="#profile Room">
</map>
</div>
</div>
<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
<header>
<h1>The Super Insurgent Group of Intemperance Talent</h1>
</header>

<article>
<img id="1" src="sigit.jpg">
<p></p><p>The S.I.G.I.T<br></p>
</div>
</article>

<footer><center>&copy; Desain Web 1 <em>2014 // Iqbal Fathur Rizqi //


twitter:@IqbalFRizqi //Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</div>
</body>
</html>

>Artikel.html
<html lang="id">
<head>
<style>
body {
background:Black;
background-position: center;
}
header{
text-align:center;
}
img {
background-position: 10px 15px 50px;
-webkit-border-radius:24px 24px 24px 24px;
-moz-border-radius:24px 24px 24px 24px;
text-align: center;
width:940px;
height: 400px;
margin:0px auto;
}
#menu{
display:block;
overflow:hidden;
width:900px;
margin:5px auto;
padding:center;
}
#menu li{
display:block;
width:123px;
margin:0px auto;
padding:0px;
float:left;
height:24px;
line-height:24px;

background-color:white;
background-position:0 0;
border-width:2px;
border-style:solid;
border-color:black;
}
p {
color:yellow;
}
h3{
color:white;
}
h1{
color:gray;
}
footer{
color:white;
}
#menu li a{
display:block;
height:100%;
text-align:center;
color:orange;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#content{
width:940px;
margin: 0px auto;
padding:12px px 20px;
min-height:800px;
border-width:2px;
border-style:solid;
border-color:white;
-webkit-border-radius:24px 24px 24px 24px;
-moz-border-radius:24px 24px 24px 24px;
}
.logo{
width:940px;
height:200px;
float:inherit;
border-width:2px;
border-style:solid;
border-color:#5eaad2 #2c6185 #2c6185 #5eaad2;
border-radius:8px;
-moz-border-radius:24px 24px 24px 24px;
-webkit-border-radius:24px 24px 24px 24px;
box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
overflow:hidden;
}

.logo img {
margin: -20px 0px 0px -22px;
}
#profile{
margin-left:30px;
margin-right:20px;
}
#profile img {
width:300px;
}
</style>
<link rel="shortcut icon" href="full.jpg">
<title>Artikel</title>
<meta charset="utf-8">
</head><body>
<div id="content">
<div align="center">
<div class="logo">
<img src="playing.jpg" border="0" usemap="#profile Room">
</map>
</div>
</div>
<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
<header>
<h1>Artikel Musik</h1>
</header>
<article>
<p>Musik
adalah suara yang disusun demikian rupa sehingga mengandung irama, lagu,
dan keharmonisan terutama suara yang dihasilkan dari alat-alat yang dapat
menghasilkan irama. Walaupun musik adalah sejenis fenomena intuisi, untuk
mencipta, memperbaiki dan mempersembahkannya adalah suatu bentuk seni.
Mendengar musik pula adalah sejenis hiburan. Musik adalah sebuah fenomena
yang sangat unik yang bisa dihasilkan oleh beberapa alat music.
Musik dikenal sejak kehadiran manusia modern Homo sapien yakni sekitar
180.000 hingga 100.000 tahun yang lalu. Tiada siapa tahu bila manusia mula
mengenal seni dan musik. Dari penemuan arkeologi pada lokasi-lokasi seperti
pada benua Afrika sekitar 180.000 tahun hingga 100.000 tahun dahulu telah
menunjukkan perubahan evolusi dari pemikiran otak manusia. Dengan otak
manusia yang lebih pintar dari hewan, mereka membuat pemburuan yang lebih
terancang sehingga bisa memburu hewan yang besar. Dengan kemampuan otak
ini, mereka bisa berpikir lebih jauh hingga di luar nalar dan mencapai
imajinasi dan spiritual. Bahasa untuk berkomunikasi telah terbentuk di

antara mereka. Dari bahasa dan ucapan sederhana untuk tanda bahaya dan
memberikan nama-nama hewan, perlahan-lahan beberapa kosa kata muncul untuk
menamakan benda dan nama panggilan untuk sesorang.
Dalam kehidupan yang berpindah-pindah, mereka mungkin mendapat inspirasi
untuk mengambil tulang kaki kering hewan buruan yang menjadi makanan mereka
kemudian meniupnya dan mengeluarkan bunyi. Ada juga yang mendapat inspirasi
ketika memperhatikan alam dengan meniup rongga kayu atau bambu yang
mengeluarkan bunyi. Kayu dibentuk lubang tiup dan menjadi suling purba.
Manusia menyatakan perasaan takut mereka dan gembira menggunakan suarasuara. Bermain-main dengan suara mereka menjadi lagu, hymne atau syair
nyanyian kecil yang diinspirasikan oleh kicauan burung. Kayu-kayu dan
batuan keras dipukul untuk mengeluarkan bunyi dan irama yang mengasyikkan.
Mungkin secara tidak sengaja mereka telah mengetuk batang pohon yang
berongga di dalamnya dengan batang kayu yang mengeluarkan bunyi kuat. Kulit
binatang yang mereka gunakan sebagai pakaian diletakkan pula untuk menutup
rongga kayu tersebut besar menjadi gendang.
</p>
</div>
</article>

<footer><center>&copy; Desain Web 1 <em>2014 // Iqbal Fathur Rizqi //


twitter:@IqbalFRizqi // Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</div>
</body>
</html>

>Alat Musik.html
<html lang="id">
<head>
<link rel="shortcut icon" href="logo.jpg">
<title>Alat Musik</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<div id="content">
<div align="center">
<div class="logo">
<img src="women.jpg" border="0" usemap="#profile Room">
</map>
</div>
</div>

10

<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="musik.html">Musik</a></li>
</ul>
<header>
<h1>Alat-alat Musik </h1>
</header>
<width="300" height="300">
<h1><li>Gitar</h1></li>
<img id="1" src="gitar.jpg">
<body>
<h1><li>Drum</h1></li>
<img src="drum.jpg"/>
</body>

<footer><center>&copy; Desain Web 1 <em>2014 // Iqbal Fathur Rizqi //


twitter:@IqbalFRizqi // Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</div>
</body>
</html>

>Video.html
<html lang="id">
<head>
<link rel="shortcut icon" href="logo.jpg">
<title>Video Clip</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<div id="content">
<div align="center">
<div class="logo">
<img src="full.jpg" border="0" usemap="#profile Room">
</map>
</div>
</div>
<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>

11

<li><a href="musik.html">Musik</a></li>
</ul>
<header>
<h1>Video Clip</h1>
</header>
<video width="930" height="300" autoplay=autoplay
controls=controls loop=loop>
<source src="The S.I.G.I.T. - Black Amplifier (accoustic).mp4"
type="video/mp4 ">
</video>

</body>
<footer><center>&copy; Desain Web 1 <em>2014 // Iqbal Fathur Rizqi //
twitter:@IqbalFRizqi // Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</div>
</body>
</html>

>Musik.html
<html lang="id">
<head>
<link rel="shortcut icon" href="logo.jpg">
<title>Musik</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head><body>
<header style="text-align:center; padding:20px; margin:20px;
border:1px 1px #000000; background-color:black; color:red;">
Welcome... </header>
<iframe height="100%" width="100%"; src="frame.html">not
support</iframe>
<div id="content">
<div align="center">
<div class="logo">
<img src="playing.jpg" border="0" usemap="#profile Room">
</map>
</div>
</div>
<ul id="menu">
<li><a href="Home.html">Home</a></li>
<li><a href="The S.I.G.I.T.html">The S.I.G.I.T</a></li>
<li><a href="Artikel.html">Artikel</a></li>
<li><a href="alat musik.html">alat musik</a></li>
<li><a href="Video.html">Video</a></li>
<li><a href="musik.html">Musik</a></li>

12

</ul>
<header>
<h1>Musik</h1>
<embed src="FIRST_OF_THE_YEAR_(EQUINOX)_-_SKRILLEX.mp3" border="3"
align="center" autostart="false" height="100" width="400">
</body>
</html>
<h2>
<font color="darkred">Skrillex-First Of The Year</font>
</h2>
<hr color="darkred"/>
<h3>
<font color="green">
<footer><center>&copy; Desain Web 1 <em>2014 // Iqbal Fathur Rizqi //
twitter:@IqbalFRizqi // Pin:76C157C1</em> <span><a href="#top"
target="_self"></a></span></center></footer>
</div>
</body>
</html>

>Frame.html
<html>
<head>
<style>
<style>
p {
color: orange;
font-size: 20px;
}
body,td,th {
color: #CCFF33;
}
body {background:tranparent}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591"></head>
<body>
<img width='1300' height='230' src="grup.jpg">
</source>
</audio></h>
</body>
</html>

13

>style.css
body {
background:white;
background-position: center;
}
header{
text-align:center;
}
img {
background-position: 10px 15px 50px;
-webkit-border-radius:24px 24px 24px 24px;
-moz-border-radius:24px 24px 24px 24px;
text-align: center;
width:940px;
height: 400px;
margin:0px auto;
}
#menu{
display:block;
overflow:hidden;
width:900px;
margin:5px auto;
padding:center;
}
#menu li{
display:block;
width:123px;
margin:0px auto;
padding:0px;
float:left;
height:24px;
line-height:24px;
background-color:white;
background-position:0 0;
border-width:2px;
border-style:solid;
border-color:black;
}
p {
color:red;
}red
h3{
color:white;
}
h1{
color:gray;
}
footer{
color:white;
}
#menu li a{
display:block;

14

height:100%;
text-align:center;
color:red;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#content{
width:940px;
margin: 0px auto;
padding:12px px 20px;
min-height:800px;
border-width:2px;
border-style:solid;
border-color:black;
-webkit-border-radius:24px 24px 24px 24px;
-moz-border-radius:24px 24px 24px 24px;
}
.logo{
width:940px;
height:200px;
float:inherit;
border-width:2px;
border-style:solid;
border-color:#5eaad2 #2c6185 #2c6185 #5eaad2;
border-radius:8px;
-moz-border-radius:24px 24px 24px 24px;
-webkit-border-radius:24px 24px 24px 24px;
box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
-moz-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
-webkit-box-shadow:-2px 8px 5px rgba(0, 0, 0, .6);
overflow:hidden;
}
kanan{
float:right;
}
.logo img {
margin: -20px 0px 0px -22px;
}
#profile{
margin-left:30px;
margin-right:20px;
}
#profile img {
width:300px;
float:left;
}

15

Printscreen
Home.html

The S.I.G.I.T.html

Artikel.html

16

Alat Musik.html

Video.html
17

Musik.html

18

BAB III
KESIMPULAN
Website adalah sebagai kumpulan halaman-halaman yang digunakan untuk
menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau gabungan dari
semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian
bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink).
Manfaatnya yang diperoleh ilmu akan terus berkembang apabila selalu di-share ke sesama
orang yang membutuhkan ,Meningkatkan harga diri , Mempunyai potensi teman lebih
banyak.

19

Anda mungkin juga menyukai