Postingan kali ini saya akan memberikan sedikit tutorial
bagaimana cara nya kita membuat website sederhana dengan menggunakan fitur dari
bahasa HTML dan CSS. Pertama-tama seperti biasa buatlah dokumen baru pada
Notepad++ atau bisa juga dengan hanya menggunakan Notepad bawaan Windows tapi
menurut saya menggunakan Notepad++ akan terasa lebih nyaman karena bisa
langsung di run dan di pratinjau.
Selanjutnya siapkan beberapa gambar yang akan dipakai untuk
menghiasi Web kita nanti, di sini saya menggunakan 3 buah gambar untuk
header/sampul, nav bar, dan untuk diletakkan di dalam kerangka postingannya. Nah
pada bagian ini terserah anda saja mau memilih gambar apa saja. Setelah
bahan-bahan nya terkumpul kita simpan di dalam satu folder, jika terpisah maka
gambar tersebut tidak bisa ditampilkan.
Berikut nya adalah Copy kan saja Source yang telah saya
rancang di bawah ini ke dokumen yang sudah dibuat sebelumnya, lalu kita save
dengan ekstensi (dot)php.
<html>
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:yellow;
text-decoration:blink;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.table-menu{
color:yellow;
text-align:center;
}
.header{
background-color:white;
}
.footer{
background-color:red;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2><p align = "center">MINUM SUSU ITU PENTING COY</p><img src="header.jpg"></td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="">Depan</a></td>
<td align="center"><a href="">Profil</a></td>
<td align="center"><a href="">Produk</a></td>
<td align="center"><a href="">Kontak</a></td>
<td align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:red; font:bold 20px Candara, Arial, Tahoma;">Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:
<ul style="color:black; font:11px Candara, Arial, Tahoma;">
<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu">
<h1>Pengalaman Pribadi</h1>
<p>Saya suka skali minum susu, apalagi yg rasa vanilla, wow dah!
mulai kecil saya sudah dibiasakan minum susu oleh ibu saya.
walaupun sudah besar kebiasaan itu tak akan pernah bisa hilang, setiap tanggal muda saya selalu pergi ke Indomaret untuk membeli susu kotakan yg harga nya 12.500 itu hehehe....
dari kebiasaan itulah saya mendapat banyak manfaat nya, apa ituu? ya, sehabis minum susu tubuh saya terasa lebih kuat dan segar, selain itu banyak minum susu juga akan membuat tinggi badan kita bertambah dan ini adalah TrueStory! masih tidak mau mengkonsumsi susu??? </p>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>
Jika sudah, bagian selanjutnya saya akan menjelaskan tentang keterangan dari beberapa kode CSS yang telah saya pasang ke dalam HTML di atas dengan metode Embedded CSS yaitu dengan cara menempelkan kode CSS diantara tag <head> dan </head> atau bisa juga diantara tag <body> dan </body>.
table{
border-colapse:colapse;
border:1px solid black;
}
Keterangan kode CSS di atas menjelaskan bahwa kita akan membuat tampilan sebuah tabel yang border nya 1px dan berwarna hitam.
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
Keterangan kode CSS di atas menjelaskan untuk membuat background menu yang mengimport gambar yang sudah disediakan sebelumnya dan repeat-x merupakan perintah untuk mengulang gambar secara horizontal atau menyamping.
#menu table{
border:none;
}
#menu a{
color:yellow;
text-decoration:blink;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
Keterangan kode CSS di atas menjelaskan pada menu tabel tidak memiliki border, kemudian text menu akan berwarna Kuning dan ketika text tsb disorot maka secara otomatis text akan berubah menjadi hitam dengan background berwarna putih dan text tsb akan mengeluarkan efek kedap-kedip (blink). Selanjutnya menu akan berada pada posisi Center dan berada pada posisi pas di tengah-tengah (middle) dengan ketebalan border nya adalah 14px.
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
Keterangan kode CSS di atas menjelaskan tentang isi dari web yang ditentukan dengan beberapa lapisan, setelah itu dalam lapisan apabila kita menggunakan tag <p> dan </p> dalam isi maka akan secara otomatis terbentuk karena sudah ditentukan dalam CSS, begitu pula dengan tag <ul> dan </ul> sehingga secara otomatis dia akan terbentuk dengan sendiri nya.
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.table-menu{
color:yellow;
text-align:center;
}
Keterangan kode CSS di atas menjelaskan tentang sebuah tabel menu disamping kanan yg telah kita buat dengan background berwarna biru. Sedangkan isi dalam menu ini untuk text yang berwarna kuning.
.header{
background-color:white;
}
.footer{
background-color:red;
}
Keterangan kode CSS di atas menjelaskan tentang pembuatan header yang berwarna putih dan footer dengan warna merah beraniii!!!!
Nah, inilah bagian yang ditunggu-tunggu. setelah semua nya kelar barulah anda JALANKAN file yang sudah anda buat tadi. Hasil nya akan terlihat seperti Screen Capture di bawah ini:
Akhir nya, sekian dulu dari Saya, kurang dan lebih nya saya mohon maaf, apabila ada kritik dan saran silahkan ada kolom komentar di bawah. Selamat mencoba! Goodluck! ;)
<head>
<style type="text/css">
table{
border-colapse:colapse;
border:1px solid black;
}
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
#menu table{
border:none;
}
#menu a{
color:yellow;
text-decoration:blink;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.table-menu{
color:yellow;
text-align:center;
}
.header{
background-color:white;
}
.footer{
background-color:red;
}
</style>
</head>
<body>
<table width="70%" align="center">
<tr>
<td colspan=2><p align = "center">MINUM SUSU ITU PENTING COY</p><img src="header.jpg"></td>
</tr>
<tr>
<td colspan=2>
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="">Depan</a></td>
<td align="center"><a href="">Profil</a></td>
<td align="center"><a href="">Produk</a></td>
<td align="center"><a href="">Kontak</a></td>
<td align="center"><a href="">Forum</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width="70%">
<div id="isi">
<h1 style="color:red; font:bold 20px Candara, Arial, Tahoma;">Ayo Minum Susu</h1>
<img src="susu.jpg"/>
<p>Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina.
Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat.
Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia.
Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>
<p>Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh.
Dalam segelas susu terdapat antara lain:
<ul style="color:black; font:11px Candara, Arial, Tahoma;">
<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>
<li>Zat besi, mempertahankan kulit tetap bersinar.</li>
<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>
<li>Kalsium, menguatkan tulang.</li>
<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>
<li>Yodium, meningkatkan kerja otak cepat.</li>
<li>Seng, menyembuhkan luka dengan cepat.</li>
<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>
</ul>
</p>
</div>
</td>
<td width="30%" class="table-menu">
<h1>Pengalaman Pribadi</h1>
<p>Saya suka skali minum susu, apalagi yg rasa vanilla, wow dah!
mulai kecil saya sudah dibiasakan minum susu oleh ibu saya.
walaupun sudah besar kebiasaan itu tak akan pernah bisa hilang, setiap tanggal muda saya selalu pergi ke Indomaret untuk membeli susu kotakan yg harga nya 12.500 itu hehehe....
dari kebiasaan itulah saya mendapat banyak manfaat nya, apa ituu? ya, sehabis minum susu tubuh saya terasa lebih kuat dan segar, selain itu banyak minum susu juga akan membuat tinggi badan kita bertambah dan ini adalah TrueStory! masih tidak mau mengkonsumsi susu??? </p>
</td>
</tr>
<tr>
<td colspan=2 height=50 class="footer">
<p style="color:blue; font:bold 12px candara, arial, tahoma; text-align:center;"></p>
</td>
</tr>
</table>
</body>
</html>
Jika sudah, bagian selanjutnya saya akan menjelaskan tentang keterangan dari beberapa kode CSS yang telah saya pasang ke dalam HTML di atas dengan metode Embedded CSS yaitu dengan cara menempelkan kode CSS diantara tag <head> dan </head> atau bisa juga diantara tag <body> dan </body>.
table{
border-colapse:colapse;
border:1px solid black;
}
Keterangan kode CSS di atas menjelaskan bahwa kita akan membuat tampilan sebuah tabel yang border nya 1px dan berwarna hitam.
#menu{
height:40px;
width:960px;
background:url(bg-nav.jpg) repeat-x;
}
Keterangan kode CSS di atas menjelaskan untuk membuat background menu yang mengimport gambar yang sudah disediakan sebelumnya dan repeat-x merupakan perintah untuk mengulang gambar secara horizontal atau menyamping.
#menu table{
border:none;
}
#menu a{
color:yellow;
text-decoration:blink;
}
#menu a:hover{
background-color:white;
color:black;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14px Candara, Arial, Tahoma;
}
Keterangan kode CSS di atas menjelaskan pada menu tabel tidak memiliki border, kemudian text menu akan berwarna Kuning dan ketika text tsb disorot maka secara otomatis text akan berubah menjadi hitam dengan background berwarna putih dan text tsb akan mengeluarkan efek kedap-kedip (blink). Selanjutnya menu akan berada pada posisi Center dan berada pada posisi pas di tengah-tengah (middle) dengan ketebalan border nya adalah 14px.
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font: 11px Candara, Arial, Tahoma;
padding-bottom:5px;
}
#isi img{
boder: 1px solid black;
width: 80px;
height: 100px;
}
Keterangan kode CSS di atas menjelaskan tentang isi dari web yang ditentukan dengan beberapa lapisan, setelah itu dalam lapisan apabila kita menggunakan tag <p> dan </p> dalam isi maka akan secara otomatis terbentuk karena sudah ditentukan dalam CSS, begitu pula dengan tag <ul> dan </ul> sehingga secara otomatis dia akan terbentuk dengan sendiri nya.
.table-menu{
vertical-align: top;
border-colapse: colapse;
border: 1px solid black;
background-color: #0066cc;
}
.table-menu{
color:yellow;
text-align:center;
}
Keterangan kode CSS di atas menjelaskan tentang sebuah tabel menu disamping kanan yg telah kita buat dengan background berwarna biru. Sedangkan isi dalam menu ini untuk text yang berwarna kuning.
.header{
background-color:white;
}
.footer{
background-color:red;
}
Keterangan kode CSS di atas menjelaskan tentang pembuatan header yang berwarna putih dan footer dengan warna merah beraniii!!!!
Nah, inilah bagian yang ditunggu-tunggu. setelah semua nya kelar barulah anda JALANKAN file yang sudah anda buat tadi. Hasil nya akan terlihat seperti Screen Capture di bawah ini:
Akhir nya, sekian dulu dari Saya, kurang dan lebih nya saya mohon maaf, apabila ada kritik dan saran silahkan ada kolom komentar di bawah. Selamat mencoba! Goodluck! ;)
keren bro...
BalasHapushehehe, makasih bro... :)
BalasHapusMantap bro.. Makasih
BalasHapusminta gambar header.jpg sama bg-nav.jpg nya donk gan. please.. punya saya gabisa bisa teratur. gabisa nyampe ujung. itu kenapa ya gan? please jawab...
BalasHapusSangat membantu gan, tapi akan lebih baik jika dijelaskan juga dasar-daasarnya, jadi newbie seperti saya bukan hanya mencontek, tetapi juga bisa berkreasi sendiri dengan dasar yang sudah di jelaskan ;)
BalasHapusSangat membantu gan, tapi akan lebih baik jika dijelaskan juga dasar-daasarnya, jadi newbie seperti saya bukan hanya mencontek, tetapi juga bisa berkreasi sendiri dengan dasar yang sudah di jelaskan ;)
BalasHapusBagian Atasnya (Header) Bisa di perbesar sesuai keinginan nggak gan , dan ukuran bg-navbarnya itu berapa ya ?? Terimakasih.
BalasHapusthanks, sangat membantu
BalasHapussemoga ilmu nya bermanfaat
my blog
my campus
thanks, sangat membantu.
BalasHapusBermanfaat sekali kak dan sangat membantu, thanks
BalasHapusNama: yulinda sari
Nim: 1922500197
Dan link web kampus saya
https://www.atmaluhur.ac.id/