Cara Membuat Template pada Website
Hai Sobat semua! Apa kabar? Pada kesempatan kali ini, saya akan membina cara membuat template pada website. Template ini berguna untuk menu utama yang akan ditampilkan saat website dijalankan. Terdiri dari header, content/body, dan footer. Baiklah, langsung simak saja ya!
1. Tulis kodingnya ya guys di CodeLobster, lalu Save-As dengan nama sesuai keinginan Anda.
<html>
<head>
<title> Selamat Datang</title>
<link
rel="stylesheet" type="text/css"
href="style1.css"/>
</head>
<body>
<div
id="container">
<div
id="logo">
<div
id="logo2">
<img
src="C:/Users/USER/Pictures/Saved Pictures/MU Glory.jpg"
alt="/>
width="270px"
height="100px"/>
</div>
<div
id="logo-text"><font size="18"><b><center>SOCCER
LOVERS</center></b></font></div>
</div>
<center><marquee direction="up"
onmouseover="this.stop()"
width="880px"
onmouseout="this.start()"
scrollamount="4" height="270px">
<div id="banner">
<img src="../../Foto bersama X-TKJ.jpg"
width="880px"
height="270px"/>
<img
src="../../smk4.jpg"
width="880px"
height="270px"/>
<img
src="../../Glory MU.jpg"
width="880px"
height="270px"/>
<img
src="../../MU era Mourinho.jpg"
width="880px"
height="270px"/>
</div></marquee></center>
<div
id="menu"><center>
<div class="mainmenu">
<a
href="home.php"> Home</a>
<a
href="jadwal.php">Jadwal</a>
<a
href="klasemen.php">Klasemen</a>
<a
href="hasil.php">Score</a>
<a
href="tampil_about.php">About</a></center>
</div>
<div id="content"><center><font
size="12px"><b> Keberhasilan Manchester United di Liberty
Stadium</b></font></center><center><br><img
src="C:/Users/USER/Pictures/Saved Pictures/Wayne's skill.jpg"
alt="/>
width="1000px"
height="300px"/></br></center><br>Manchester
United pesta gol 3-1 ke gawang Swansea City pada Minggu (5/11/2016) di markas
Swansea City di Liberty Stadium. Manchester United berhasil meraih poin penuh
di kandang The Swans lewat dua gol Ibrahimovic dan satu gol Paul Pogba di babak
pertama dan The Swans berhasil memperkecil kedudukan lewat gol Van Hoor.
Ibrahimovic menjadi pemain terbaik karena kedua golnya yang luar biasa. Kedua
gol tersebut pun terlahir dari assist sang kapten, Wayne Rooney yang digosipkan
akan pindah dari Manchester United karena performanya yang tidak stabil dan
selalu menghuni bangku cadangan. Namun dalam laga itu, pria berusia 31 tahun
itu tampil sebagai starter dan dapat menunjukkan performa terbaiknya kepada
publik bahwa ia masih pantas di MU. Dalam laga itu, Paul Pogba, pemain termahal
dunia milik MU juga berhasil mencetak satu gol ke gawang yang dikawal Fabianski
tersebut. Hasil tersebut membuat Manchester United naik ke posisi-6 klasemen
sementara Liga Inggris 2016/2017 dengan mengoleksi 18 poin.</br></div>
<div
id="footer">Copyright soccerlovers.com<br> Created by Alvin
Harya Putra</br><br>Published by 4TKJ</br></div>
</div>
</body>
</html>
For your information nih guys :
Title itu untuk menampilan teks apa yang akan tampil di atas kiri halaman saat program dijalankan.
Link href untuk menyambungkan style-nya dengan file koding yang sudah kamu buat seperti diatas.
<img src pada body berguna untuk menampilkan gambar yang terletak pada atas kiri halaman.
Saya disini memakai marquee direction "up" dimana gambar utama pada halaman akan bergerak ke atas dan berganti dengan gambar berikutnya.
<div class="mainmenu"> untuk menu utama yang ingin ditampilkan.
Content berguna untuk menampilkan konten yang diinginkan.
Footer untuk tampilan catatan kaki pada halaman.
2. Selanjutnya, kita buat style pada CSS-nya. Disini tidak boleh menamakan file sesuai keinginan Anda, melainkan harus sesuai dengan link href yang tertera pada koding sebelumnya. File-nya saya namakan style1.css
body{
background-color:
#fe4d01;
}
#container{
width:
900px;
height:
auto;
border:
1px;
background-color:
#090600;
margin:
auto;
padding-top:
10px;
padding-bottom:
10px;
}
#logo{
width:
880px;
height:
130px;
background-color:
#01fef8;
margin:
auto;
}
#logo2{
padding-left:
30px;
padding-top:
20px;
float:
left;
}
#logo-text{
padding-left:
50px;
padding-top:
40px;
font-size:
120px;
margin-left:
85px;
color:
#fd5106;
font-family:
Arial Black;
text-align:
right;
}
#banner{
width:
880px;
height:
270px;
background-color:
#01fef8;
margin:
auto;
}
.mainmenu a{
color:#fff200;
background-color:#2701fe;
font-weight:
bold;
text-decoration:
none;
font-size:
20px;
padding:
8px 60px;
float:
left;
margin:
auto;
}
.mainmenu a:hover{
color:#010600;
background-color:
#0efe01;
padding:
8px 60px;
}
#content{
width:
880px;
height:
800px;
background-color:
#fbfdff;
margin:
auto;
text-align:
justify;
font-size:
18px;
font-style:
Arial;
}
#footer{
width:
880px;
height:
100px;
background-color:
#01fef8;
margin:
auto;
text-align:
center;
font-size:
18px;
}
Background-color pada body berguna untuk memilih warna dasar halaman yang diinginkan.
Mainmenu untuk menampilkan menu utama yang ingin ditampilkan. Cara Membuat Mainmenu pada Website
Content untuk menampilkan konten apa yang ingin Anda tampilkan. background-color untuk warna dasar halaman konten.
Footer untuk mengatur tampilan catatan kaki pada halaman template.
0 komentar:
Posting Komentar