Cara menggunakan html template code

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Table of Contents Show

Bagaimana cara menggunakan HTML?
Apa itu HTML template?
Kode HTML apa saja?
Langkah langkah membuat website HTML dan CSS?

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Sering kali kita dengar soal edit mengedit atau bahkan membuat template. Sebenarnya itu bukanlah hal yang susah jika kita mau dan berusaha untuk belajar dan mencobanya. Hal yang perlu kita kuasai adalah mengetahui kode-kode html, css, dsb. Oke, kali ini saya akan mengajak sobat untuk berlatih membuat template sederhana dengan menggunakan notepad. Disini saya menggunakan campuran antara html dasar dan kode css. Oke langsung saja !

Buka Notepad Terlebih dahulu, kemudian buat kode seperti cara-cara dibawah ini !

1. Pertama buat dulu kode seperti dibawah. Nah, perhatikan kodenya ! Itu semua merupakan kode css yang akan mewakili keseluruhan dari bentuk template. Kenapa harus memakai 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 bagian judul */

<style>

/* CSS */

#wrapper{

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

margin: auto; /* Ini untuk membuat "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 adalah 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 tulisan berada ditengah atau center */

border: 2px solid #000000;

}

</style>

</head>

2. Selanjutnya masukkan terlebih dahulu kode untuk membangun bagian atasnya. Pada kode bawah terdapat 2 kode, yaitu body dan header. Semua itu saya buat untuk mengatur atau membuat tampilan background berupa gambar. Sobat juga bisa merubahnya dengan warna saja dengan memasukkan kode warna entah dengan nama gambar atau url gambar. NB : Jika sobat 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 membuat bagian pada postingan artikel/ isinya. Caranya seperti dibawah, yaitu dengan membuat heading kemudian membuat paragraf. untuk heading disimbolkan dengan kode <h3> dan ditutup dengan </h3> . Kemudian untuk paragraf disimbolkan dengan kode <p> dan ditutup dengan </p> . Pada heading juga bisa diibaratkan sebagai judul artikel/ isi. Nah untuk kode 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 jelek untuk dilihat, tetapi saya telah bersusah payah belajar dan berusaha untuk memahami tentang 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 masalah 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 menawarkan bahan produk kami kepada anda semuanya. Siapa tahu anda tertarik dan ingin membelinya. Kami memproduksi makanan ringan khas Semarang. Yaitu Wingko Babat dan Lumpia. </p>

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

</div>

4. Setelah itu membuat bagian widget tautan artikel. Caranya seperti dibawah dan kode pagar (#) juga sama diisi link yang akan dituju. Pada kode dibawah juga menggunakan kode 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 membuat bagian footer atau kaki pada template. Biasanya diisi dengan credit link atau yang lainya dengan membuat paragraf.

</div>

</body>

</HTML>

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

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

Nah, itulah yang dapat 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 belajar dan saling membenarkan apabila terjadi suatu kesalahan. Okelah, semoga artikel diatas bermanfaat untuk sobat semuanya. Terimakasih~

Bagaimana cara menggunakan HTML?

Cara Membuat Halaman Web Sederhana dengan HTML.

Buka editor teks. ... .

Atur jenis dokumen untuk HTML. ... .

Tambahkan tab judul untuk halaman web kamu. ... .

Ketik di bawah tag "Head" yang tertutup. ... .

Selanjutnya membuat judul halaman. ... .

Tambahkan judul tambahan jika kamu mau. ... .

Membuat paragraf. ... .

Mengubah warna teks..

Apa itu HTML template?

Pada program HTML , Template sendiri berfungsi sebagai layout, tampilan webblog, atau website yang akan dirancang, dan sebuah desain tampilan halaman dengan berisikan dokumen file model tambahan yang dikodekan dalam bahasa program.