Belajar Perancangan Website Dasar (Mata Kuliah Perancangan web 1)

Perancangan web 1

Perancangan web 1 adalah salah satu  matakuliah pilihan pada jurusan sistem komputer di UNIVERSITAS PUTRA INDONESIA YPTK PADANG.

Materi yang di ajarkan pada mata kuliah ini adalah tentang perancangan interface website, dengan menggunkan bahasa Css(cascading style sheet) dan PHP.

Pada perancangan web 1 ini kita mengunakan software virtual localhost  Easywamp. Silahan download program Easywamp terlebih dahulu. Berikut interface web yang akan kita buat.

yang di butuhkan dalam belajar  perancangan web 1 adalah:

1.Easywamp
2.Browser (Mozilla,GoogleChrome,Opera dll)
3.Notepad atau text editor lain nya.

Berikut tutorial perancangan web 1

-install Easywamp sampai selesai

-buka browser

-ketik kan localhost atau ip lokal 127.0.0.1 seperti di gambar


-buka folder direktori  easywamp di install,buka folder www

-buat sebuah folder dengan nama yang anda ingin kan, misal "073"
  tanpa tanda petik

-buka notepad, kemudian ketik kan script css berikut


body{

background-color:#ffffff;
}
#badan{
background-color:#FF8000;
width:990px;
height:580px;
margin-right:auto;
margin-left:auto;
border-radius:1em 1em 1em 1em;}


#isi{
float: left;
width: 920px;
height:500px;
padding: 15px;
border: 1px #a0b1a0 solid;
margin-top: 20px;
margin-left: 20px;
background-color:#999999;
margin-bottom: 5px;
border-radius:1em 1em 1em 1em;}

#isi1{
background-color:#000000;
width:200px;
height:450px;
float:left;
marin-top:5;
margin-right:5;
margin-left:5;
border-radius:1em 1em 1em 1em;}



#isi2{
background-color:#000000;
width:700px;
height:450px;
float:right;
margin-top:5;
margin-right:5;
margin-left:5;
border-radius:1em 1em 1em 1em;}



#badan #isi a{
    border-radius:1em 1em 1em 1em;
    background-color:#000000;
    float:left;
    height:26px;
    width:170px;
    margin:15px;

}

#badan #isi a:hover{
    border-radius:1em 1em 1em 1em;
    background-color:#B2B300;
    float:left;
    height:26px;
    width:170px;
    margin:15px;
}



    
akan lebih baik jika di ketik dari pada hanya di copy paste agar anda lebih  mengerti:)

-kemudian simpan di folder yang anda buat pada folder www tadi dengan nama 1.css

-buka kembali notepad,ketikan script PhP berikut


<html>

<head>
<title>WEB SISTEM KOMPUTER</title>
<link href="1.css"

rel="stylesheet"type="text/css">
<head>

<body>
<div id="badan">
<div id="isi">
<div id="isi2">
    
</div>
        <a href="www.andyarunner.blogspot.com">Channel1</a>
    <a href="">Channel2</a>
    <a href="">Channel3</a>
    <a href="">Channel4</a>
    <a href="">Channel5</a>
    <a href="">Channel6</a>
        <a href="">Channel7</a>

</div>
</div>
</body>
</html>


-kemudian simpan kembali pada folder yang anda buat di dalam www  tadi  dengan nama index.php

-buka kembali browser,ketik kan localhost/"nama folder anda", seperti pada gambar, dan akan keluar hasil nya sepeti ini.


Seselai, silah kan di coba, klik menu dan lihat apa yang terjadi, Berikut nya silah kan Anda ber eksperimen dan pelajari sendiri, Selamat mencoba.

jika berminat untuk mempelajari lebih lanjut tentang design web, anda downlooad ebook gratis dari malasngoding.com tentang dasar HTML dan CSS untuk membangun website, silahkan klik di sini gratis di sini 


Demikian artikel Belajar Perancangan Website Dasar (Mata Kuliah Perancangan web 1), Semoga Bermanfaat, Terimakasih.


Related Posts

Posting Komentar