 |
| Halaman html dengan css |
CSS adalah kependekan dari Cascading styyle Sheet, dimana fungsi dari CSS ini sendiri adalah untuk memberikan efek dari suatu halaman HTML, menentukan bagaimana halaman HTML itu ditampilkan, seperti mnentukan posisi, merubah background, mengganti tipe dan warna teks dan masih banyak yang lainnya.
Untuk artikel kali ini tentang Tutorial Mempercantik Halaman HTML Dengan CSS, saya akan mengambil kasus tentang artikel sebelumnya yaitu Tutorial membuat satu halaman sederhana HTML yang tampilannya masih sangat sederhana.
*{
margin:0;
padding:0;
font-family:calibri, "segoe ui", arial, tahoma, sans-serif;
}
body {
background-color:#DDDDDD;
}
#wrapper {
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{ background: url(header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{
width:130px ;
height:27.5px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:5px
solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
}
#header form input{
border:none;
height:20px;
}
#daftar-artikel{
width:470px;
float:left;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#sidebar{
width:270px;
float:right;
}
#sidebar h2{
font-size:18px;
margin:10px 0;
}
#sidebar p{
line-height:20px;
color : #636363;
}
#sidebar ul{
margin-left:10px;
}
#sidebar ul li a{
color:#636363;
text-decoration:none;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
margin:0;
padding:0;
font-family:calibri, "segoe ui", arial, tahoma, sans-serif;
}
body {
background-color:#DDDDDD;
}
#wrapper {
width : 780px;
margin: 0 auto;
overflow: hidden;
}
#header{ background: url(header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
#header img{
width:130px ;
height:27.5px ;
}
#menu-utama{
margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:5px
solid #555555;
}
#menu-utama li a{
color : #ffffff;
text-decoration:none;
}
#header form{
float:right;
margin-top:7px;
margin-right: 10px;
}
#header form input{
border:none;
height:20px;
}
#daftar-artikel{
width:470px;
float:left;
}
.artikel{
background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
#sidebar{
width:270px;
float:right;
}
#sidebar h2{
font-size:18px;
margin:10px 0;
}
#sidebar p{
line-height:20px;
color : #636363;
}
#sidebar ul{
margin-left:10px;
}
#sidebar ul li a{
color:#636363;
text-decoration:none;
}
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
silahkan simpan script tersebut dengan nama style.css.
ada tiga cara dalam penulisan CSS, yang pertama inline, penulisan diberikan langsung pada tag yang ingin dieri style. yang kedua internal, penulisan diberikan dalam tag style yang ditempatkan didalam tag head, dan yang ketiga eksternal, membuat file CSS yang nantinya di panggil di dalam tag head.
untuk Tutorial Mempercantik Halaman HTML Dengan CSS kali ini, penulisan CSS saya lakukan secara eksternal, ini saya lakukan karena mudah dipahami dan mempermudah jika suatu saat ada perubahan sttye sesuai yang kita inginkan.
setelah anda menyimpan script diatas, kta perlu mengedit file html yang sebelumnya dibuat menambahkan sedikit script untuk pemanggilan file CSS yang sekarang kita buat, adapun penambahannya sebagai berikut
<!DOCTYPE HTML>
<HTML>
<head>
<title> Latihan </title>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8">
</head>
setelah dirubah silahkan buka file html anda di browser dan liat perubahannya.
penjelasan dari cript CSS yang tadi sudah dibuat :
1. mengatur ulang pada margin, padding dan font, agar tidak menggunakan style bawaan pada browser, adapun scriptnya
*{
margin:0;
padding:0;
font-family:calibri, "segoe ui", arial, tahoma, sans-serif;
}
2. Body
pemberian style pada backgrond desan, disini saya memberi dasar warna abu-abu
body {
background-color:#DDDDDD;
}
3. wrapper.
kalau kita perhatikan tag id wrapper merupakan induk dari tag id yang lainnya. merupakan batasan desain web yang akan kita buat.
#wrapper {width : 780px;
margin: 0 auto;
overflow: hidden;
}
width merupakan lebar halaman, sedangkan margin saya beri nilai 0 dan auto, akan membirikan nilai jarak dari atas sebesar 0 dan pemberian nilaiauto agar setiap sisinya tetap berada ditengah walaupun browser di zoom-in dan zoom-out.
4 header
#header{ background: url(header.jpg) repeat-x #555;
height : 70px;
width : 100%;
padding:5px;
margin : 20px 0;
overflow : hidden;
}
untuk header saya menggunakan gambar yang mana stylenya saya buat berulang ulang megikuti garis horizontal, penampakan aslinya adalah
nilai #555 diberikan ketika gambar gagal dimuat, 70px nilai tinggi yang diberikan 70px, pemberian nilai widht 100% maka akan mengikuti nilai dari width id wrapper, 5px nilai padding diberikan untuk memberikan jarak antara konten elemen dengan elemen tersebut. pemberian nilai margin 20px, 0 yangberarti jarak 20px ke atas dan kebawah dengan tag yang lainnya, dan 0 dari sisi kanan dan sisi kirinya.
catatan: untuk pemberian nilai pada margin dan padding, ada cara cepat untuk pemberian nilainya, misalkan ketika kita memberi nilai margin : 20px; ini berarti memberikan nilai pada seluruh sisinya baik atas, bawah, kanan, dan kiri, ketika kita memberikan nilai misalkan margin : 20px, 10px, ini berarti memberikan nilai pada margin atas dan bawah sebesar 20px, sisi kanan dan kiri sebesar 10px. penilaian akan diberikan sesuai dengan arah jarum jam.
5. logo
pemberian nilai pada logo disebelah kiri atas
#header img{
width:130px ;
height:27.5px ;
}
6. Menu
secara default list menu ditamilkan menurun, disini kita akan membuatnya menjadi rata ke kanan dengan teknik floating
#menu-utama{margin-top:3px;
list-style:none;
}
#menu-utama li{
float:left;
padding:8px 20px;
border-right:5px
solid #555555;
}
7. Teks menu
efek default yang ditampilkan ketika menulis script pada tag <a> adalah teks berwarna biru dan bergaris bawah. kita akan mengubah warnanya dan menghilangkan garis bawahnya
#menu-utama li a{ color : #ffffff;
text-decoration:none;
}
8. Tabel
menentukan tinggi dan meletakannya di sebelah kanan, menghilangkan border bawaan dan menentukan tinggi input
#header form{float:right;
margin-top:7px;
margin-right: 10px;
}
#header form input{
border:none;
height:20px;
}
9. Daftar Artikel
menentukan lebar dan meletakannya sebelah kiri
#daftar-artikel{
width:470px;
float:left;
}
10. artikel
menetukan warna background artikel dan jarak antar artikel, tata letak dan ukuran dari gambar artikel, pemberian style pada tanggal dan view, jarak sinopsis dengan tanggal dan link dibawahnya, dan style pada link watch this.
.artikel{background:#ffffff;
padding:10px;
margin-bottom:20px;
overflow:hidden;
}
.artikel img{
float:left;
margin-right:10px;
width:200px;
height:165px
}
.artikel b{
color:#616060;
background:#DDDDDD;
padding:3px;
font-size:12px;
font-weight:bold;
margin-right:10px;
}
.artikel p{
margin:10px 0;
}
.artikel a{
display:block;
text-align:right;
color:#636363;
}
11. Sidebar
mengatur posisi menjadi di sebelah kanan, mengubah style judul, menentukan jarak perbaris dan warna teks, mengatur margin pada sidebar list, mengubah style yag ber tag <a>
#sidebar{width:270px;
float:right;
}
#sidebar h2{
font-size:18px;
margin:10px 0;
}
#sidebar p{
line-height:20px;
color : #636363;
}
#sidebar ul{
margin-left:10px;
}
#sidebar ul li a{
color:#636363;
text-decoration:none;
}
12. footer
mengatur posisi, margin, padding, posisi teks dan style footer.
#footer{
clear:both;
margin:20px 0;
text-align:center;
background-color: #f0f0f0;
padding:5px;
color:#555555;
}
untuk mempelajari semuanya, anda bisa mengedit sendiri pada script diatas kemudian refresh halaman htmlnya, perhatikan dan analisis setiap perubahan yang terjadi.
dengan pemberian CSS, halaman yang sebelemnya kita buat menjadi lebih teratur dan lebih enak untuk dilihat. tentunya masih banyak lagi style yang disediakan CSS dan disini sya menggunakan hanya sesuai dengan kebutuhan.
sekian Tutorial Mempercantik Halaman HTML Dengan CSS dari kasus diartikel sebelunnya yaitu Tutorial membuat satu halaman sederhana HTML, silahkan baca artike yang lainnya, semoga bermanfaat dan terimakasih.
baca juga : tutorial membuat satu halaman sederhana HTML
baca juga : tutorial membuat satu halaman sederhana HTML
0 komentar:
Posting Komentar