Cara Menciptakan Template Sederhana Memakai Notepad

Sering kali kita dengar soal edit mengedit atau bahkan menciptakan template. Sebenarnya itu bukanlah hal yang susah bila kita mau dan berusaha untuk berguru dan mencobanya. Hal yang perlu kita kuasai ialah mengetahui kode-kode html, css, dsb. Oke, kali ini saya akan mengajak teman untuk berlatih menciptakan template sederhana dengan menggunakan notepad. Disini saya menggunakan adonan antara html dasar dan instruksi css. Oke pribadi saja !

Sering kali kita dengar soal edit mengedit atau bahkan menciptakan template Cara Membuat Template Sederhana Menggunakan Notepad

Buka Notepad Terlebih dahulu, kemudian buat instruksi mirip cara-cara dibawah ini !

1. Pertama buat dulu instruksi mirip dibawah. Nah, perhatikan kodenya ! Itu semua merupakan instruksi css yang akan mewakili keseluruhan dari bentuk template. Kenapa harus menggunakan css? Karena dengan css tampilan akan terlihat lebih rapi dan bersih. Untuk keterangan sudah saya berikan dengan himpitan simbol /* dan */ .

<HTML>

<head>

<title>----Micro Cyber KW 2----</title> /* Bagian ini merupakan bab judul */

<style>

/* CSS */

#wrapper{

width: 800px; /* Ini lebar Template secara keseluruhan */

margin: auto; /* Ini untuk menciptakan "CENTER" blog pada Browser */

}

.header{

height: 150px; /* Ini Untuk mengatur tinggi di header */

background-color:#FFA500; /* Ini Untuk mengatur warna background pada header*/

margin: 10px 10px 1px 10px;

padding: 10px;

border: 2px solid #000000; /* Border untuk mengatur ketebalan garis tepi dan #000000 ialah warna untuk garis tepi*/

}

.bagian-post{

float: right; /* Ini Untuk memposisikan Widget di kiri */

width: 525px; /* Ini Untuk mengatur lebar kotak postingan*/

height:400px;

margin: 0 10px 1px 0;

padding: 10px;

background-color: #ffffff;

border: 2px solid #000000;

}

.bagian-widget{

float: left; /* Ini untuk memposisikan Widget di Kanan */

width: 205px;

height:400px;

margin: 0 1px 1px 10px;

padding: 10px;

background-color:#8B0000;

border: solid 2px #000000;

}

.footer{

width: 800x;

background-color: #006400;

margin: 0 10px 10px 10px;

padding: 10px;

text-align: center; /* Ini untuk memposisikan goresan pena berada ditengah atau center */

border: 2px solid #000000;

}

</style>

</head>

2. Selanjutnya masukkan terlebih dahulu instruksi untuk membangun bab atasnya. Pada instruksi bawah terdapat 2 kode, yaitu body dan header. Semua itu saya buat untuk mengatur atau menciptakan tampilan background berupa gambar. Sobat juga sanggup merubahnya dengan warna saja dengan memasukkan instruksi warna entah dengan nama gambar atau url gambar. NB : Jika teman ingin memberi background gambar dengan nama gambar, maka gambar harus dijadikan satu folder dengan notepad yang telah disave ! Untuk keterangan sudah saya berikan dalam himpitan simbol /* dan */ .

<body background="bgcolor.jpg"> /* Ini untuk gambar atau warna background keseluruhan */

<h1><img src="header.png"></h1> /* Ini untuk gambar atau warna background pada header */

</div>

3. Kemudian saatnya menciptakan bab pada postingan artikel/ isinya. Caranya mirip dibawah, yaitu dengan menciptakan heading kemudian menciptakan paragraf. untuk heading disimbolkan dengan instruksi <h3> dan ditutup dengan </h3> . Kemudian untuk paragraf disimbolkan dengan instruksi <p> dan ditutup dengan </p> . Pada heading juga sanggup diibaratkan sebagai judul artikel/ isi. Nah untuk instruksi pagar (#) dibawah, silahkan isi dengan link yang akan dituju/ lanjutan artikel. Karena itu diibaratkan dengan read more atau baca selengkapnya.

<h3>Inilah Template Buatan Pertama Saya</h3>

<p>Mungin ini terlalu buruk untuk dilihat, tetapi saya telah bersusah payah berguru dan berusaha untuk memahami wacana web design. Saya Membuat template ini atas ilmu dari guru saya yang mengajar di smk telekomunikasi tunas harapan, dan juga hasil browshing saya di dunia internet. Saya sangat semangat kalau duduk kasus website, walaupun itu bukan juruan saya hehehehe :D </p>

<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>

<h3>Belanja Murah Disini</h3>

<p>Selamat Siang semua, kali ini saya akan mengatakan materi produk kami kepada anda semuanya. Siapa tahu anda tertarik dan ingin membelinya. Kami memproduksi kudapan khas Semarang. Yaitu Wingko Babat dan Lumpia. </p>

<a href="#"><b>Baca Selengkapnya ...</b></a> <br><br>

</div>

4. Setelah itu menciptakan bab widget tautan artikel. Caranya mirip dibawah dan instruksi pagar (#) juga sama diisi link yang akan dituju. Pada instruksi dibawah juga menggunakan instruksi heading yaitu <h2> dan ditutup dengan </h2> .

<h2>Artikel Terkait</h2>

<li><a href="/">Beranda</a></li>

<li><a href="#">About Me</a></li>

<li><a href="#">Contact Us</a></li>

<li><a href="#">Dasar-dasar CSS</a></li>

<li><a href="#">Website Online ku</a></li>

</ul>

</div>

5. Kemudian yang terakhir saatnya menciptakan bab footer atau kaki pada template. Biasanya diisi dengan credit link atau yang lainya dengan menciptakan paragraf.

</div>

</body>

</HTML>

6. Setelah selesai, kemudian save notepad tadi mirip gambar dibawah ini ! Lalu coba buka hasil dari save-save'an tadi :)

*Mengapa saya gunakan nama Microcyber2 ? Karena itu ialah salahsatu blog kesayangan aku, hahaha :D (www.microcyber2.blogspot.com)

Nah, itulah yang sanggup saya bagikan pada kesempatan kali ini. Untuk para MASTAH WEB DESIGN, Walaupun tutorial diatas memang sangat cupu ya itu memang cupu. Karena saya juga masih belajar, begitu pula dengan pemula lainya. Mari kita sama-sama berguru dan saling membenarkan apabila terjadi suatu kesalahan. Okelah, semoga artikel diatas bermanfaat untuk teman semuanya. Terimakasih

Cara Menciptakan Template Sederhana Memakai Notepad

0 Response to "Cara Menciptakan Template Sederhana Memakai Notepad"

Post a Comment