Tutorial ini lanjutan dari tutorial :
Cara buat file html layout
Cara buat menu navigasi
Kita langsung saja menuju tutorial nya di bawah ini.
File HTML ini saya ambil dari sebagian layout website yang sudah di buat pada tutorial sebelum nya.
<html>
<head>
<title>Mengedit Content</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<body>
<div id="container"> <div id="content">
<h1>JUDUL</h1> <p id="indent" class="indent">ISI TULISAN 1..... </p> <p>ISI TULISAN 2 ..... <span class="rtk">ISI TULISAN 3 ..... </span>.</p>
<p>ISI TULISAN 4 ..... </p>
<p>ISI TULISAN 5 ..... </p>
<blockquote class="preset">ISI TULISAN 6 ..... </blockquote>
<p>ISI TULISAN 7 ..... </p>
<p>ISI TULISAN 7 ..... </p>
</div>
</div>
</body>
</html>
<head>
<title>Mengedit Content</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<body>
<div id="container"> <div id="content">
<h1>JUDUL</h1> <p id="indent" class="indent">ISI TULISAN 1..... </p> <p>ISI TULISAN 2 ..... <span class="rtk">ISI TULISAN 3 ..... </span>.</p>
<p>ISI TULISAN 4 ..... </p>
<p>ISI TULISAN 5 ..... </p>
<blockquote class="preset">ISI TULISAN 6 ..... </blockquote>
<p>ISI TULISAN 7 ..... </p>
<p>ISI TULISAN 7 ..... </p>
</div>
</div>
</body>
</html>
Keterangan : Anda ganti isi tulisan 1 - 7 atau content tersebut dan ini HTML saya ambil sebagian dari tutorial sebelum nya dan telah saya beri selector id maupun class.
Yang lain hanya text content dengan beberapa tag HTML biasa semisal <p> untuk paragraph, H1 untuk heading 1 dan lain-lain.
Sekarang kita membuat file CSS nya. CSS rule yang akan membuat content tersebut menjadi enak di baca dan menarik untuk di lihat, di bawah ini adalah CSS rule nya :
#container { width:1000px; margin:0 auto; font-family:Verdana;
font-size:12px;
}
#content { background-color:#EBEBEB; width:675px; float:left; padding:15px 10px 15px 15px; letter-spacing:1px; word-spacing:1px; text-align:justify;
}
h1 { text-decoration:underline; text-transform:uppercase; font-family:Arial; font-size:30px;
}
.indent:first-letter { font-size:70px; color:#0000CC; font-weight:bold; float:left;
}
.rtk { text-decoration:blink; font-weight:bold; color:#FF0000; background-color:#CCCC00;
}
.preset { font-style:italic; font-weight:bold;
}
}
#content { background-color:#EBEBEB; width:675px; float:left; padding:15px 10px 15px 15px; letter-spacing:1px; word-spacing:1px; text-align:justify;
}
h1 { text-decoration:underline; text-transform:uppercase; font-family:Arial; font-size:30px;
}
.indent:first-letter { font-size:70px; color:#0000CC; font-weight:bold; float:left;
}
.rtk { text-decoration:blink; font-weight:bold; color:#FF0000; background-color:#CCCC00;
}
.preset { font-style:italic; font-weight:bold;
}
Keterangan :
#container {…} untuk pengaturan page di buat dengan ukuran lebar 1000px dengan margin 0 dengan posisi di tengah (auto) untuk pengaturan jenis font (font family) verdana dengan ukuran font12 px.
#content {…} pengaturan area content dengan di berikan background color abu-abu #EBEBEB lebar dari area content 675 px pengaturan float kiri, padding 15 px, padding kanan 10 px, padding bawah 15 px, padding kiri 15 px (contoh penulisan ringkas dari css) anda bisa menggunakan padding-top, padding-right, padding-bottom, padding-left di mulainya dari top dan berjalan searah jarum jam dengan nilai masing-masing, untuk setting jarak antar huruf anda bisa menggunakan letter-spacing dengan jarak 1px dan untuk jarak antar kata anda bisa menggunakan word-spacing dengan jarak 1px juga dengan pengaturan tulisan rata kiri maupun kanan (textalign:justify).
h1 {…} untuk pengaturan dari heading 1 dengan di berikan underline menggunakan text-decoration lalu seluruh tulisan menggunakan huruf besar semua dengan pengaturan text-transform dengan nilai uppercase, lalu font mengunakan arial dengan ukuran 30 px.
.indent:first-letter{…} untuk pengaturan huruf pertama menjadi besar atau biasa di sebut "Drop Caps" dengan ukuran 70 px warna biru #0000CC dengan huruf tebal (font-weight: bold ).
.rtk {…} untuk selector class ini mempunyai settingan yang membuat tulisan menjadi berkedip-kedip (text-decoration:blink) lalu tulisan di buat tebal (bold) dengan warna font merah #FF0000 dengan background tulisan kuning #CCCC00 untuk jenis font memang tidak di sebutkan dan itu nanti akan mengacu pada (#container) untuk sebuah selector class, anda bisa menaruh beberapa selector dalam halaman web, berbeda dari selector ID yang mana diijinkan hanya satu saja.
.preset {…} untuk selector ini anda bisa menaruh settingan untuk pengaturan font dengan tulisan miring (italic) dan tebal (bold).
1. Cara buat file html layout
2. Cara buat menu navigasi
3. Cara buat file html dari content
4. Cara buat file html colom right
5. Cara buat file html footer
Baca juga :
» Cara membuat template bawaan blogger menjadi responsive