Pemrograman WEB Desain , Membuat website pribadi menggunakan HTML dan CSS (Tugas Akhir semester 3 ,Makalah Individu)
Nama: Putu Pradana
Nim : 1403040016
Prodi : Teknik Informatika
UNIVERSITAS
MUHAMMADIYAH PURWOKERTO
Makalah
Pemrograman WEB
(Teknik
Informatika)
Fakultas
Teknik
Membuat WEB pribadi sederhana dengan
menggunakan bahasa pemrograman HTML dan CSS
Pendahuluan
· Latar Belakang
Dengan
maraknya berbagai jenis media sosial dan akun web pribadi dikalangan pengguna
internet yang semakin beragam dan
bermacam macam bentuk tampilan serta kemudahan dalam mengakses data untuk dapat
digunakan pada masyarakat luas khususnya para pekerja seni dan musisi musisi
didunia sangatlah penting , karna bukan hanya sebagai biografi oleh pengguna
tersebut disamping itu juga digunakan sebagai media promosi tentang hasil karya
si musisi itu sendiri atau pekerja seni lainnya yang ingin mengapresiasikan
karyanya kepada masyarakat luas melalui jejaring sosial dan akun akun web
pribadi agar dapat mudah tersampaikan kepada publik . Disini saya sebagai
pendengar penyimak pemerhati sekaligus perilaku akan berbagi tentang catatan
saya membuat WEB pribadi sendiri secara sederhana baik didalam pengkodingan
maupun tampilan tampilan web tersebut, kebetulan saya mempunyai sebuah group
band yang hanya sekedar meluapkan hobi sembari kuliah tapi tetap dengan terus
mengembangkan minat dan bakat kami agar dapat berkarya dengan baik ,mula mula band
ini terbentuk pada saat saya menginjakan kaki di universitas saya belajar,
makanya tak heran saya selalu berfikir pada saat saya sedang bermain main
dengan media sosial kebetulan saya mengambil konsentrasi belajar jurusan
tentang teknik informatika dan saya tiba tiba memahami tentang konsep tampilan
tampilan serta desain pada akun web musisi musisi baik didalam maupun luar
negri yang sudah mempunya alamat website sendiri sangatlah praktis dan terusuun
rapi semua informasi tentang musisi itu sendiri didalam website pribadi si
pemilik. Seiring berjalannya waktu saya pun memutuskan untuk terus belajar
tentang pemrograman web dan kebetulan yang dapat mudah saya pahami saat ini
menggunakan bahasa pemrograman HTML dan CSS , agar bisa membuat website pribadi
dengan tangan dan pemikiran saya sendiri meskipun pada awalnya susah untuk
langsung paham tentang pemrograman web tersebut
saya memutuskan membuat website pribadi band saya sendiri sebagai awal saya
untuk mengembangkan skill dan performa membuat program program tentang web
desain. Disamping sebagai penyemangat belajar dab berkarya saya memadukan hobi
dan kreatifitas kedalam bentuk mata kuliah yang saya ambil sekarang dengan
membuat website pribadi tentang informasi dari group band yang saya naungi saat
ini.
Kebetulan
pada tugas akhir kali ini saya diberi kesempatan untuk membuat sebuah aplikasi
web desain , meskipun masih secara sederhana pada web yang saya akan buat kali
ini tapi berharap nanti masih bisa dikembangkan lagi secara baik dengan
tampilan yang dinamis dan menarik dari segala sisi layak untuk digunakan pada
server.
Pertama tama
yang saya buat pada web ini adalah tentang isi dan tampilan pada web,
sebelumnya untuk fungsi Html sendiri dan css adalah sebagai berikut
Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
– Menentukan format suatu teks
– Membuat list tentang sekelompok hal
– Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
– Menyisipkan citra atau gambar.
– Menampilkan informasi dalam bentuk tabel
– Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
– Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
– Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.
Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa dilakukan dengan HTML yaitu:
– Menentukan format suatu teks
– Membuat list tentang sekelompok hal
– Membuat link ke dokumen lain atau bagian lain dari dokumen yang sama.
– Menyisipkan citra atau gambar.
– Menampilkan informasi dalam bentuk tabel
– Memodifikasi.Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan dokumen secara online sehingga bisa di akses dari seluruh dunia.
– Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
– Menambahkan object-object seperti image, audi, video dan juga java applet dalam dokumen HTML.
Berikut
pengkodingan dan contoh gambar tampilan pada setiap bagian web yang saya buat ,
untuk dapat melihat tampilan kode program hanya bisa dijalan kan dengan
localhost pada browser langkah pertama saya membuat menu dengan kode program
berikut :
<!DOCTYPE
html>
<html>
<head>
<title>
RuntoChase-Web
</title>
</head>
<body>
<style>
header {
background-color:black;
font-family:friday13sh;
color:white;
text-align:center;
padding:10px;
}
h1{
font-size:50px;
font-family:friday13sh;
}
*{
margin:0px;padding:0px;list-style:none;
}
a{
color:black;
text-decoration:;
}
a:hover{
background:lightblue;
}
body{
background:url("20150517_162110.jpg")center
fixed no-repeat;
background-size:cover;
-webkit-background-size:cover;
}
.top-panel{
max-width:2200px;
width:100%;
background:rgba(100,100,100,0.5);
overflow:hidden;
margin:auto;
}
.top-panel > ul {
font-family:"friday13";
font-size:20px
}
.top-panel > ul > li {
text-align:center;
text-transform:uppercase;
}
.top-panel > ul > li > a {
float:left;
display:block;
width:100px;
padding-top:10px;
padding-bottom:10px;
}
</style>
<header>
<h1>RuntoChase
Web</h1>
</header>
<div
class="top-panel">
<ul>
<li><a
href="menu.html">Home</a></li>
<li><a
href="home.html">Members</a></li>
<li><a
href="kontak.html">Contact</a></li>
<li><a
href="Gallery.html">Gallery</a></li>
<li><a
href="about.html">About</a></li>
<li><a
href="musik.html">Music</a></li>
<li><a
href="video.html">Video</a></li>
<li><a
href="lyric.html">Lyric</a></li>
<li><a
href="show.html">Show</a></li>
<li><a
href="blog.html">Blog</a></li>
<div class="top-panel">
<audio controls
style="float:right;">
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
</ul>
</div>
</body>
</html>
Tampilan Menu
Pada tampilan menu terdiri dari beberapa kolom seperti
home untuk menampilkan beranda atau tetap pada tampilan menu
utama,
members
kode program:
<!DOCTYPE html>
<html>
<head><title>Profil Members</title>
<body>
<header>
<h1>Profil</h1>
</header>
<style>
h1 {
font-family:friday13;
}
body{
background-color:white
; center fixed no-repeat;
background-size:cover;
-webkit-background-size:cover;
}
body{color:black}
header {
background-color:black;
font-family:friday13;
color:white;
text-align:center;
padding:15px;
}
nav {
line-height:30px;
background-color:lightblue;
font-family:friday13;
height:550px;
width:100px;
float:left;
padding:10px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
font-family:friday13;
clear:both;
text-align:center;
padding:10px;
}
a {
color:white;}
</style>
</head>
<nav>
Members :
<br>
Putu Pradana<br>
Nova Denas<br>
Luthfi yahya<br>
</nav>
<section>
<h1>Putu Pradana</h1>
<p>
Guitar/Vocal
</p>
<p>
-0821-3890-8354
<br>
-putupradana45@gmail.com
<p/>
<p>
#Biodata
</p>
</section>
<section>
<h1>Nova Denas</h1>
<p>
Bass
</p>
<p>
#Biodata
</p>
</section>
<section>
<h1>Luthfi Yahya</h1>
<p>
Drums
</p>
<p>
#Biodata
</p>
</section>
<footer>
<li><a href="menu.html">RuntoChase-Web</a></li>
</footer>
</body>
</html>
Tampilan gambar:
untuk menampilkan
profil dan biografi dari masing masing personil band ,
Contact
Kode program :
<html>
<head>
<title>Contact</title>
</head>
<body>
<style>
body{
background:url("Untitled-7.jpg")center
fixed no-repeat;
background-size:cover;
-webkit-background-size:700px;
color:black;
font-size:10px;
}
footer {
background-color:black;
font-family:friday13;
clear:both;
float:left;
text-align:center;
padding:10px;
}
a {
color:white;
font-size:15px;
}
</style>
<button type="button"
onclick="document.getElementById('demo').innerHTML =
Date()"> Date and Time.</button>
<p id="demo"></p>
<h1>
Email : Runtochase@gmail.com
<br>
Phone : 082138908354
</h2>
<footer>
<a href="menu.html">Home</a>
</footer>
</body>
</html>
Tampilan gambar:
yaitu menampilkan informasi kontak dasar seperti nomor
telp atau email ,
Gallery
Kode program:
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
</head>
<body>
<header>
<h2>RuntoChase-Gallery</h2>
</header>
<style>
header {
background-color:black;
font-family:friday13;
color:black;
text-align:center;
padding:15px;
}
body{
background:url("RTC.png")center
fixed no-repeat;
background-size:cover;
-webkit-background-size:700px;
}
h2{
color:white;
font-family:friday13;
}
.foto{
max-width:2000px;
width:80px
}
div.img {
margin: 1px;
padding: 1px;
border: 10px solid
#000000;
height: auto;
width: auto;
float: center;
text-align:
center;
}
div.img img {
margin: 10px;
border: 10px
solid #000000;
}
div.img a:hover img {
border: 10px
solid #0a7bc4;
}
div.desc {
color:#0a7bc4;
text-align:
center;
font-weight:
normal;
font-size:20px;
width:
120px;
margin:
10px
}
footer {
background-color:black;
font-family:friday13;
clear:both;
text-align:center;
padding:10px;
}
a { color:white;}
</style>
<div class="img">
<a
target="_blank" href="foto1.html"><img
src="20150517_1024222.jpg" alt="20150517_102422"
width="110" height="90"></a>
<div
class="desc">We Are young 2015</div>
</div>
<div class="img">
<a
target="_blank" href="foto2.html"><img
src="bg.jpg" alt="bg" width="110"
height="90"></a>
<div
class="desc">Milad 20 Teknik UMP</div>
</div>
<div class="img">
<a
target="_blank" href="foto3.html"><img
src="_MG_0298 (2).jpg" alt="_MG_0298 (2)"
width="110" height="90"></a>
<div
class="desc">WFM 2015 Gasebu UMP</div>
</div>
<div class="img">
<a
target="_blank" href="foto4.html"><img
src="IMG_20151104_104005 (2).jpg" alt="IMG_20151104_104005
(2)" width="110" height="90"></a>
<div
class="desc">Disnatalis ukm Master IAIN</div>
</div>
<div
class="img">
<a
target="_blank" href="foto5.html"><img
src="a.jpg" alt="a" width="110"
height="90"></a>
<div class="desc">Bergegas dan
Berkreasi</div>
</div>
<footer>
<a
href="menu.html">RuntoChase-web</a>
</footer
</body>
</html>
untuk menampilkan foto foto atau gambar agar tersusun
keterangan foto dan gambar tersebut pada setiap keterangan juga masih terhubung
ke link selanjutnya tentang berbagai foto dan tampilan berikutnya untuk dapat
melihat semua foto yang ada didalamnya .
About
Kode program:
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body>
<header>
<h2>RuntoChase-About</h2>
</header>
<style>
header {
background-color:black;
font-family:friday13;
color:white;
text-align:center;
padding:15px;
}
body{
background-color:lightblue
; center fixed no-repeat;
background-size:cover;
-webkit-background-size:cover;
color:white;
font-size:15px;}
h1 {
font-family:friday13;
font-size:20px;
color:black;
margin:
1px;
padding: 10px;
border: 5px
solid #000000;
height: auto;
width: auto;
float: center;
text-align:
center;
}
footer {
background-color:black;
font-family:friday13;
clear:both;
text-align:center;
padding:10px;
}
a{color:white;}
</style>
<p>
<h1>
<pre>
#Biodata</h1>
</pre>
</p>
<footer>
<a
href="menu.html">RuntoChase-web</a>
</footer>
</body>
</html>
Tampilan gambar:
tentang informasi profil band tersebut,
Music
Kode program:
<!DOCTYPE html>
<html>
<head>
<title>Music</title>
</head>
<body>
<style>
body{
background:url("20150517_102422.jpg")center
fixed no-repeat;
background-size:cover;
-webkit-background-size:cover;
}
p{
font-family:friday13;
font-size:15px;
color:black;
}
.top-panel{
text-align:right;
text-transform:uppercase;
}
footer {
background-color:black;
font-family:friday13;
clear:both;
float:right;
text-align:center;
padding:10px;
}
a { color:white;
}
</style>
<div class="top-panel">
<p>Mimpi (live)</p>
<audio controls>
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
<div class="top-panel">
<p>Mimpi (live)</p>
<audio controls>
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
<div class="top-panel">
<p>Mimpi (live)</p>
<audio controls>
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
<div class="top-panel">
<p>Mimpi (live)</p>
<audio controls>
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
<div class="top-panel">
<p>Mimpi (live)</p>
<audio controls>
<source
src="Mimpi(live)-RTC.mp3" type="audio/mpeg">
</audio>
</div>
<footer>
<a href="menu.html">Home</a>
</footer
</body>
</html>
Tampilan gambar:
Video
Kode program:
<html>
<head>
<title>Video</title>
</head>
<body>
<header>
<h2>video</h2>
</header>
<style>
header {
background-color:black;
font-family:friday13;
color:white;
text-align:center;
padding:10px;
}
body{
background:url("rtc.png")center
fixed no-repeat;
background-size:cover;
-webkit-background-size:700px;
}
footer {
background-color:black;
font-family:friday13;
color:white;
clear:both;
text-align:center;
padding:10px;
}
a {
color:white;}
</style>
<div
style="text-align:left">
<button
onclick="playPause()">Play/Pause</button>
<button
onclick="makeBig()">Big</button>
<button
onclick="makeSmall()">Small</button>
<button
onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1"
width="420" controls>
<source src="Blink 182 live in
Reading Festival 2014 Full HD.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo =
document.getElementById("video1");
function
playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function
makeBig() {
myVideo.width = 960;
}
function
makeSmall() {
myVideo.width = 220;
}
function
makeNormal() {
myVideo.width = 420;
}
</script>
<p>Video
courtesy of <a href="link url"
target="_blank">RuntoChase-Video</a>.</p>
<footer>
<a
href="menu.html">RuntoChase-web</a>
</footer
</body>
</html>
Tampilan gambar:
Lyrik
Kode program:
<!DOCTYPE html>
<html>
<head>
<title>Lyric</title>
</head>
<body>
<header>
<h1>RuntoChase-Lyric</h1>
<p>Bergegas dan berkreasi sesuka hati, berkarya
bernyanyi ikuti suara hati!</p>
</header>
<style>
header {
background-color:black;
font-family:friday13;
color:lightblue;
text-align:center;
padding:10px;
}
body {
background-color:black;
color:lightblue;
font-size:15px;
}
div.third {
font-size:15;
font-family:friday13;
margin: 1px;
padding: 10px;
border: 5px
solid #000000;
height: auto;
width: auto;
float: center;
text-align:
center;
}
nav {
line-height:30px;
background-color:lightblue;
font-family:friday13;
color:black;
height:auto;
width:auto;
float:top;
text-align:left;
padding:10px;
}
footer {
background-color:lightblue;
font-family:friday13;
clear:both;
text-align:center;
padding:10px;
}
a { color:black;
}
</style>
<nav>
1. Mimpi
2. Tertawa Bersama(Teman)
3. I Love You
</nav>
<div class="third">
<h2>Mimpi</h2>
<p>
<pre>
#lyriclagu
</pre>
</p>
</div>
<div class="third">
<h2>Tertawa
Bersama(Teman)</h2>
<p>
<pre>
#Lyriclagu
</pre>
</p>
</div>
<div class="third">
<h2>I Love
You</h2>
<p>
<pre>
#Lyriclagu
</pre>
</p>
</div>
<footer>
<a
href="menu.html">RuntoChase-web</a>
</footer>
</body>
</html>
Tampilan gambar:
untuk menampilkan beberapa lyrik lagu yang dimiliki band
tersebut .
show dan Blog masih
kosong tapi show juga bisa diisi tentang event gigs band tersebut perform dan event yang akan datang , sedangkan pada
blog bisa juga diisi tentang press release atau cerita dan artikel artikel,
pada tampilan dan kolom pada menu akan menampilkan serta mengubungkan ke link
selanjutnya , background , colour dan font style beserta size juga telah
ditambahkan pada kode program ,hanya saja masih sangat sederhana dan banyak
kekurangan pada tampilan serta desain dan belum memasukan animasi pada web
tersebut agar terlihat lebih menarik untuk dikunjungi .
Demikian rangkuman tugas akhir saya tentang pembuatan web
menggunakan bahasa pemrograman html dan css , semoga makalah ini bisa menjadi
acuan bagi saya sendiri tentunya untuk dapat terus mengembangkan kemampuan
tentang betapa senangnya bisa mempelajari bahasa pemrograman untuk pembuatan
web desain .
Terima Kasih,
Komentar
Posting Komentar