Technology

Latihan Pemrograman Website HTML5 (Bagian 1)

 

   

Jika kemarin kita sudah praktek mendesain template website menggunakan Photoshop, maka kali ini kita akan belajar mengenai bagaimana menerjemahkan desain yang kemarin sudah kita buat ke dalam kode HTML. Berikut seri pertamanya:

Langkah 1. Sebelum beranjak kemana-mana, pertama kita definisikan dulu bagian – bagian apa saja yang terdapat dalam sebuah desain. Jadi kita tahu urutan-urutan apa saja yang harus dikerjakan. Mari perhatikan gambar 1.

Langkah 2. Bila layout di atas diterjemahkan ke dalam kode HTML, maka hasilnya adalah sebuah kerangka HTML sebagai berikut.

<!DOCTYPE html>
<html lang="id">
	<head>
		<meta charset="utf-8">
		<link href="css/style.css" rel="stylesheet" media="screen" type="text/css">
	</head>
	<body>
		<header id="header">
			<section class="wrapper">Konten Header disini</section>			
		</header>
		<section id="slides">
			<section class="wrapper">Konten Slides disini</section>
		</section>
		<section id="mainContent" class="wrapper">
			<section id="steps">disini</section>
			<section id="articles">disini</section>
			<section id="footerContent">disini</section>
		</section>
		<footer id="footer">
			<section class="wrapper">Konten Footer disini</section>
		</footer>
	</body>
</html>

Anda bisa kopi paste kode HTML di atas kemudian simpan dengan nama index.html.

Langkah 3. Setelah kerangka website di atas jadi, sekarang kita bisa styling / membentuk tampilannya melalui CSS. Di dalam file CSS ini, kita akan mendefinisikan berbagai properti seperti body-background, body-color, wrapper-width, dlsb. Contohnya:

body{ 
background:#e6e6e6; 
color:#333; 
font:12px/1.3 Arial; 
margin:0; padding:0;}

a{ 
-webkit-transition:0.2s all ease-in-out; 
-moz-transition:0.2s all ease-in-out; 
-o-transition:0.2s all ease-in-out; 
transition:0.2s all ease-in-out;}

.wrapper{ width:940px; margin:0 auto;}

.clear{ clear:both;}

File CSS di atas bisa di copy paste. Kemudian buat sebuah folder dengan nama css dan simpan kopian kode di atas dengan nama style.css.

Langkah 4. Selanjutnya, silakan slice desain awal untuk mendapatkan bagian header di mana terdapat element background gradient. Sebab CSS tidak bisa memunculkan efek gradient; lebih jelasnya perhatikan pada gambar 2. Proses slicing bisa dilakukan dengan Slice Tools (K) pada Adobe Photoshop. Simpan file hasil slicing dengan format JPG.

Langkah 5. Sekarang kita susun kode HTML untuk bagian header. Anda bisa kopi paste contoh kode HTML berikut:

<section class="logo">
	<a href="#">PantiSosial</a>
</section>
<nav class="nav">
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Events</a></li>
		<li><a href="#">Media</a></li>
		<li><a href="#">Archive</a></li>
		<li><a href="#">Contact Us</a></li>
		<li><a href="#">News</a></li>
	</ul>
</nav>
<nav class="nav-right">
	<a href="#">Detail Program</a>
	<a href="#">Unduh Program</a>
</nav>
<div class="clear"></div>

Sisipkan kode HTML di atas ke dalam tags < header id=”header” >  pada kerangka HTML yang telah kita buat di langkah 2.


Artikel Terkait

3 komentar

  • 6 February 2013 - pukul 17:38

    wah terima kasih gan.. bisa belajar banyak dari ini

  • andi rachmat
    4 November 2013 - pukul 7:51

    artikel yg sangat menarik. sy punya keinginan sangat besar untuk membuat template sendiri. maksudnya supaya unik. sudah lama saya mengembara di dunia maya mencari tutorial namun belum ada solusi. mau kursus langsung di daerah saya tdk tersedia tempat kursus khusus pembuatan atau memodifikasi template (terutama template joomla). akhir sy menemui web ini yg menurut saya relatif lebih gampang diikuti. namun segampang2nya tetap saja bagi pemula seperti saya masih menghadapi kendala. oleh karena itu sy sangat ingin mendapat bimbingan dari bro. sy siap memberikan sekadar biaya ngopi untuk bro hehehe…

    • 5 November 2013 - pukul 11:10

      Halo mas andi, terima kasih sudah membaca artikel ini. Untuk pembuatan atau modifikasi template memang membutuhkan waktu dan tenaga ekstra untuk mendalaminya, apalagi kalau langsung terjun dalam framework atau CMS, akan sangat menyulitkan bagi pemula. Ada baiknya jika mas andi membuat template sederhana menggunakan HTML. Untuk kursus atau bimbingan, ini hal yang menarik, memangnya mas andi bertempat tinggal di mana? :)

Berikan Komentar

Your email address will not be published. Required fields are marked *