Setelah kita belajar pada Membuat Halaman Depan Dengan HTML5 & CSS3 pada bagian pertama yaitu tentang :
- Membuat File index.html
- Membuat File style.css
- Menentukan Layout di File index.html
- Memberi Style pada index.html
- Merubah Desain Basic Layout
- Membuat Menu
7. Menentukan Konten
Selanjutnya kita akan isi konten dengan beberapa artikel. Disini kita akan membuat layout artikel seperti berikut.
Sebelumnya, copykan beberapa file gambar yang telah tersedia yang akan digunakan sebagai Featured Image tersebut. Buat direktori images pada direktori tempat anda membuat file index.html dan style.css. Buat juga direktori fonts untuk menempatkan webfont yang akan kita gunakan. Lalu salin gambar dan font ke direktori masing-masing. Pastikan juga anda sudah menyailn beberapa artikel yang sudah tersedia. Lalu tambahkan kode berikut didalam tag <div id=“content”></div>
<div id="single">
<div id="featured-image"
style="background:url(images/1.jpg)"> </div>
<h2>Penemuan Telegram Kabarkan Dahsyatnya Letusan Krakatau</h2>
KOMPAS.com - Dibandingkan letusan Gunung Tambora di Sumbawa (Nusa Tenggara Timur) pada 1815, letusan Gunung Krakatau masih kalah besar, baik kekuatan maupun dampaknya. Berbeda dengan letusan Tambora yang terekam samar dan dampak globalnya baru dideteksi lebih dari 100 tahun kemudian, letusan Krakatau diketahui warga dunia dalam bilangan jam [...]
<div id="more"><a href="article-1.html">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image" style="background:url(images/2.jpg)"> </div>
<h2>Pesawat Tanpa Awak UGM Berdaya Jelajah 200 Kilometer</h2>
JAKARTA, KOMPAS.com - Untuk memantau batas wilayah atau situasi dan kondisi lokasi bencana alam dengan biaya murah dan efektif, dibutuhkan teknologi pesawat tanpa awak. Universitas Gadjah Mada (UGM) turut memamerkan hasil risetnya, berupa pesawat udara tanpa awak mini (Mini UAV) pada Forum Riset Industri Indonesia ke-3 2011, Rabu (30/11/2011) di [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image" style="background:url(images/3.jpg)"> </div>
<h2>Prasasti Maya Bukan Petunjuk Kiamat</h2>
KOMPAS.com — Beberapa waktu lalu, National Institute of Anthropology and History di Meksiko mengumumkan penemuan Prasasti Comalcalco. Prasasti itu memiliki kalender lingkaran, kombinasi posisi hari dan bulan yang berulang tiap 52 tahun. Tanggal yang tertera pada prasasti, diduga 21 Desember 2012, terkait dengan akhir Baktun (periode tiap 394 tahun) ke-13. Angka 13 [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image" style="background:url(images/4.jpg)"> </div>
<h2>Seperlima Gletser Himalaya Mencair</h2>
KOMPAS.com — Sebanyak seperlima gletser di Himalaya telah menyusut karena mencair dalam kurun 30 tahun terakhir. Rinciannya antara lain, 21 persen gletser di Nepal dan 22 persen gletser di Butan mencair. Fakta itu merupakan hasil penelitian International Center for Integrated Mountain Development (Icimod), sebuah organisasi yang berbasis di Kathmandu, Nepal [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image" style="background:url(images/5.jpg)"> </div>
<h2>Asteroid Vesta dalam Video 3D</h2>
PASADENA, KOMPAS.com - Asteroid Vesta adalah salah satu asteroid terbesar di Tata Surya. Diameter asteroid ini mencapai 530 km. Asteroid ini ditemukan oleh Heinrich Wilhelm Olbers pada 29 Maret 1807. Penasaran seperti apa rupa asteroid Vesta? NASA telah memproduksi citra yang menyuguhkan rupa asteroid Vesta dalam versi 3D. Citra tersebut diambil oleh wahana antariksa [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
|
8. Memberi Style pada Konten
Pada awalnya, font yang kita gunakan adalah font standar apabila kita tidak menggantinya. Maka kita gunakan CSS3 Webfont. Letakkan tag berikut pada bagian paling atasfile CSS kita.
@font-face{
font-family:"Cuprum";
src:url("fonts/Cuprum.otf");
font-weight:normal;
}
@font-face{
font-family:"Calibri";
src:url("fonts/calibri.ttf");
font-weight:normal;
}
body{
font-family:Calibri;
}
|
Selanjutnya kita tambahkan style pada konten dengan menghapus #content{} dan menggantinya dengan seluruh tag berikut.
#wrapper #content{
width:620px;
float:left;
padding:10px;
}
#wrapper #content #single{
margin:5px;
border:#DFDFDF 1px solid;
padding:5px;
font-size:13px;
float:left;
overflow:auto;
}
#wrapper #content #single #featured-image{
width:150px;
height:150px;
-moz-background-size:450px 150px; /* CSS3 Mozilla Firefox */
background-size:450px 150px; /* CSS3 Other Browser */
background-position:center;
float:left;
overflow:auto;
margin-right:5px;
}
#wrapper #content #single h2{
margin:0px;
font-family:Cuprum;
font-size:18px;
padding:5px;
border:#DFDFDF 1px solid;
background:#EEEEEE;
margin-bottom:10px;
}
#wrapper #content #single #more a{
float:right;
overflow:auto;
padding:2px 10px 2px 10px;
background:#CF6;
border:#FF9933 1px solid;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
margin-bottom:10px;
margin-right:10px;
margin-top:10px;
text-align:center;
text-decoration:none;
color:#000000;
}
#wrapper #content #single #more a:hover{
background:#BD5;
color:#093;
border:#CC6600 1px solid;
}
|
9. Membuat Text Header
Text Header biasanya digunakan untuk menuliskan nama web kita. Pada modul ini, akan kita beri judul DirectNews.Com. Kita ganti tag isi dari tag header dengan tag berikut
<header>DirectNews.Com</header>
|
Kemudian ganti style <header> menjadi seperti berikut
header{
height:100px;
width:940px;
float:left;
background:url(images/header.jpg);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic;
font-size:32px;
font-weight:bold;
color:#090;
text-shadow:#000 2px 2px 1px;
}
|
Sehingga akan kita dapatkan hasil sebagai berikut
10. Membuat Sidebar
Sidebar biasanya diisi dengan beberapa aksesoris yang menambah fungsionalitas sebuah web. Tidak jarang juga sidebar menjadi tempat untuk memasang link ke situs-situs yang mendukung web tersebut. Misal plugin Facebook Like, plugin Tweet, dan sebagainya.
Kali ini yang akan kita tampilkan pada sidebar adalah
- Popular Post
- Commented Post
- Audio Streaming
Pada umumnya setiap elemen pada sidebar kita kenal dengan Widget. Masing-masing widget diwakili oleh tag <li>. Sehingga perlu kita tuliskan kode berikut diantara <div id=“sidebar”></div>
<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video 3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video 3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/sound.mp3" controls></audio>
</li>
|
Selanjutnya, kita tambahkan styling pada file style.css, kita hapus bagian #wrapper #sidebar{} dan kita ganti dengan kode berikut
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;
}
#wrapper #sidebar .widget{
list-style:none;
}
#wrapper #sidebar .widget ul{
list-style:none;
margin-left:-40px;
}
#wrapper #sidebar .widget li a{
color:#446500;
text-decoration:none;
}
#wrapper #sidebar .widget li a:hover{
text-decoration:underline;
}
|
11. Membuat Footer dengan Tiga KolomSelanjutnya akan kita berikan beberapa elemen pada footer yaitu Dukungan, Kontak, dan Hubungan dengan Jejaring Sosial. Kita tambahkan kode berikut diantara <div id=“footer”></div>
<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan dari kami, kunjungi situs <a href="http://support.directnews.com">support.directnews.com</a> dan submit form anda.
</div>
<div id="column">
<h2>Hubungi Kami</h2>
Jl. Parikesit 75<br>
Surabaya 66666 Jawa Timur<br>
(+6231) 5556667
</div>
<div id="column">
<h2>Temukan Kami di ...</h2>
<a href="http://facebook.com/directnewsaccess">Facebook</a><br>
<a href="http://twitter.com/directnewsaccess">Twitter</a>
</div>
|
Terakhir, kita ganti isi dari #footer dan kita tambahkan kode berikut pada style.css
footer{
float:left;
background:#333333;
width:960px;
color:#BBBBBB;
}
footer #column{
width:300px;
padding:10px;
float:left;
font-size:14px;
}
footer #column h2{
margin:0px;
margin-bottom:10px;
font-family:Cuprum;
font-size:18px;
color:#FFFFFF;
font-weight:bold;
}
footer #column a{
font-weight:bold;
color:#0099CC;
text-decoration:none;
}
footer #column a:hover{
text-decoration:underline;
}
|
Sehingga kita dapatkan hasil output seperti berikut
Selanjutnya, kita percantik tampilan web tersebut dengan menambahkan background dan memberi border pada web utama. Kopikan file background yang telah disediakan ke directori /images. Kita ganti tag body sampai ke header di style.css dengan kode berikut
body{
font-family:Calibri;
background:url(images/bg.jpg);
background-attachment:fixed;
background-position:center;
}
#wrapper{
width:980px;
margin:auto;
}
#container{
padding:10px;
background:#FFFFFF;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
header{
height:100px;
width:938px;
border:#DFDFDF 1px solid;
float:left;
background:url(images/header.jpg);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic;
font-size:32px;
font-weight:bold;
color:#090;
text-shadow:#000 2px 2px; /* CSS3 */
}
|
Jangan lupa mengganti judul yang dari awal masih “Untitled Document”. Misalnya kita ganti judul menjadi
:: Direct News Access :: Deliver News Fastly ::
Sehingga kita dapatkan hasil sebagai berikut
Itu adalah cara Membuat Halaman Depan Dengan HTML5 & CSS3 bagian kedua, Klik disini untuk melihat cara Membuat Halaman Depan Dengan HTML5 & CSS3 dibagian pertama.
Baca artikel lain nya tentang HTML5 dan CSS3 disini
.jpg)
Posts
No comments:
Post a Comment