Pemrograman WEB Desain , Membuat website pribadi menggunakan HTML dan CSS (Tugas Akhir semester 3 ,Makalah Individu)

Oleh
      

          

           Nama: Putu Pradana
           Nim    : 1403040016
           Prodi : Teknik Informatika


UNIVERSITAS MUHAMMADIYAH PURWOKERTO

Makalah Pemrograman WEB
(Teknik Informatika)
Fakultas Teknik

Universitas Muhammadiyah Purwokerto
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.

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>
Tampilan gambar:


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:

menampilkan daftar pemutar lagu dan video,

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

Postingan populer dari blog ini

Object primitif dalam grafika komputer

Oleh
Grafika komputer adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D yang kemudian berkembang menjadi grafika komputer 3D ,Pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Grafika komputer sering dikenal juga dengan istilah visualisasi data. Grafika komputer dapat digunakan di berbagai bidang kehidupan, mulai dari bidang seni, sains, bisnis, pendidikan dan juga hiburan. Berikut adalah bidang aplikasi spesifik dari grafika komputer: · Antarmuka pengguna (Graphical User Interface - GUI) · Peta (Cartography) · Kesehatan · Perancangan objek (Computer Aided Design - CAD) · Sistem multimedia · Presentasi grafik · Presentasi saintifik · Pemrosesan citra · Simulasi Bagian dari grafika komputer meliputi: · Geometri : mempelajari cara menggambarkan permukaan
Baca selengkapnya

IP Address

Oleh
IP Address   adalah sebuah alamat pada komputer agar komputer bisa saling terhubung dengan komputer lain,   IP Address   terdiri dari 4 Blok, setiap Blok di isi oleh angka 0 - 255. Contoh   IP Address   seperti 192.168.100.1 , 10.57.38.223 , ini adalah IPv4. P Address Memiliki 2 bagian, yaitu Network ID dan Host ID , contoh 192.168.100.1 , secara default Net ID nya adalah 192.168.100 dan Host ID nya adalah 1, agar komputer bisa saling terhubung , IP yang digunakan Net ID nya harus sama, dan Host ID nya harus berbeda. Agar mudah ngerti, Net ID adalah nama jalan dan Host ID adalah nomor Rumah, jadi Jln. Diponegoro No 3 , jika nama jalan dari beberapa orang sama, maka nomor rumah mereka tidak mungkin sama. Alamat IP versi 4   (sering disebut dengan   Alamat IPv4 ) adalah sebuah jenis pengalamatan jaringan yang digunakan di dalam protokol jaringan TCP/IP yang menggunakan   protokol IP versi 4 . Panjang totalnya adalah 32-bit, dan secara teoritis dapat mengalamati hingga 4 miliar host
Baca selengkapnya

PROGRAM KERJA ( kewirausahaan)

Oleh
PROGRAM KERJA A. PROGRAM JANGKA PENDEK 1. Program Pusat Pengembangan Kewirausahaan a.        Peningkatan kualitas perencanaan PPKwu jangka pendek dan jangka panjang b.       Peningkatan kualitas layanan c.        Penataan administrasi kelembagaan PPKwu d.       Peningkatan jaringan kerjasama e.        Peningkatan kualitas staf dan peer group f.        Promosi dan pelayanan kepada masyarakat g.       Pengembangan Unit-unit di PPKwu 2. Program Unit Dklat dan Pemagangan Kewirausahaan a.        Lokakarya Pengembangan Paket-paket kurikulum diklat kewirausahaan dan bisnis b.       Diklat Metodologi Penelitian Kewirausahaan bagi Mahasiswa c.        Diklat Pengembangan Jiwa Wirausaha d.       Diklat Penciptaan Calon Wirausaha Baru e.        Pendampingan Penyusunan Proposal Kompetitif bidang kewirausahaan f.        Layanan Konsultasi Bisnis g.       Pengembangan Program Magang Mahasiswa h.       Pemagangan Mahasiswa 3.
Baca selengkapnya