MEMBUAT WEBSITE HTML CSS PRAKTIS (SESI 1)

MEMBUAT WEBSITE HTML CSS PRAKTIS - SESI 1

PART 1

Dalam pembuatan website, tentu tidak bisa langsung selesai. Kita perlu membuatnya beberapa part pengerjaan, begitu juga artikel Cara Membuat Wesbite Sederhana HTML CSS ini akan dibagi menjadi 11 part karena setiap partnya akan banyak penjelasan yang bisa diikuti dan mudah-mudahan bisa menjadi ilmu baru buat yang belum tahu.

Supaya sesuai dengan judulnya membuat website sederhana, saya sudah gambarkan rencana website sederhana yang akan dibuat seperti ini: (lihat gambar).

Dibagian atas, akan kita gunakan untuk header dan bisa diisi dengan gambar. Dibagian Menu, kita akan terapkan beberapa menu seperti biasanya. Dibagian Artikel Disarankan, bisa terapkan beberapa artikel yang disarankan / artikel andalan yang lebih menonjol dan direkomendasikan pada pengunjung situs web kalian.

Kemudian pada bagian utamanya ada 2 kolom (kiri & kanan), pada bagian kiri kita buat lebih kecil dibanding kolom disebelah kanan karena sebelah kiri akan kita gunakan untuk Sidebar / Widget dan sebelah kanannya bisa kita gunakan untuk menampilkan deretan post terbaru / post arsip / single post nantinya.

Sekarang, silahkan siapkan aplikasi coding / code editor yang akan digunakan, misalnya Adobe Dreamweaver atau Sublime Text, atau Visual Studio Code.

Buat file baru didalam aplikasinya dan save terlebih dahulu supaya syntaxnya enak, simpan file dengan ekstensi .html supaya syntaxnya berupa HTML. Untuk nama filenya bebas misalnya home.html, atau beranda.html, atau index.html, file pertama ini akan kita buat sebagai halaman beranda / halaman utama sebuah situs maka biasa disimpan sebagai index.html tapi saya akan simpan dengan nama membuatwebsite.html saja karena ini sebagai contoh / tutorial saja ya…

Sebaiknya kalian buat folder baru untuk tutorial ini sampai selesai part terakhir supaya lebih rapih kemudian didalam folder itu kalian simpan semua file dari tutorial ini. Saya akan buat dengan nama folder Tutorial Today dan didalamnya akan disimpan filenya.

Setelah filenya disimpan sebagai .html maka syntaxnya sekarang pada aplikasi coding sudah berupa syntax HTML. Selanjutnya, silahkan buat Struktur Dasar HTML. Pada bagian ini akan kita terapkan judul untuk website dan judul ini akan muncul di bagian tab browser. Didalam head buatlah tag dan didalamnya tuliskan judul website kalian.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
</head>
<body>

</body>
</html>

Tulisan dalam <title> itu disebut judul karena akan muncul pada bagian tab browser ketika dibuka di browser, disamping logo ketika membuat favicon.

Sekarang tuliskan tag <header></header> didalam bagian body. Pada bagian header ini akan kita simpan gambar, maka sebaiknya kita buat folder gambar terlebih dahulu. Nantinya folder gambar ini akan kita gunakan untuk menyimpan semua gambar yang kita gunakan pada website. Sebetulnya, kalian bisa simpan gambar dimana saja tapi kita buat folder seperti ini supaya lebih rapih dan saya akan beri nama foldernya images.

Folder images ini sejajar dengan file beranda html, atau index.html ini atau sama-sama berada didalam folder Tutorial Today. Jangan lupa didalam folder images nya simpan gambar yang akan digunakan, saya sudah siapkan beberapa gambar yang akan digunakan dan sudah disimpan didalam folder images ini.

Didalam tag <header> tadi, tuliskan tag untuk menampilkan gambar yaitu <images src=””>.

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
</head>
<body>
<header>
<img src="images/">
</header>
</body>
</html>
Memanggil gambar dalam HTML harus sama dengan nama gambar + ekstensinya, jangan sampai salah karena kalo salah akan error. Misalnya saya akan gunakan gambar yang bernama logo pmd dengan jenisnya JPEG/JPG maka saya tuliskan didalam tag img tadi seperti ini: <image src=”images/logo pmd.jpg”> yang ditulis disitu adalah nama folder yang tadi kita buat untuk menyimpan gambar, kita panggil nama foldernya lalu nama file (gambar) nya yang akan digunakan.

Sekarang klik Save & silahkan cek di browser file HTML yang sudah dibuat, kalo gambarnya tidak muncul maka artinya ada kesalahan dalam penulisannya. Dari codingan yang kita buat diatas, gambar sudah berhasil muncul tapi tidak rapih, karena kita belum atur CSS nya, nanti akan kita atur. Sekarang kita susun kerangka HTML nya terlebih dahulu.

Buatlah tag <menu></menu> dibawah header tadi. Pada menu ini kita akan menggunakan tag daftar / list yang nantinya kita isi dengan link. Untuk menulis daftar silahkan gunakan tag <li> dan didalamnya adalah nama menu yang diinginkan misalnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li>Home</li>
<li>Download</li>
<li>Tutorial</li>
<li>Software</li>
<li>Design</li>
<li>Support</li>
<li>Contact</li>
</menu>
</body>
</html>

Sekarang cek lagi di browser kalian yang masih berantakan dan lihat dibawah gambar yang tadi akan muncul list / daftar menu yang baru saja dimasukkan.

Sampai tahap ini, saya rasa pembaca sudah mulai paham beberapa hal dalam bahasa pemrograman HTML seperti: Struktur dasar, daftar / list, pemanggilan file gambar, tag menu, dll.

Untuk membuat semua struktur HTML diatas terlihat rapih, tentu kita memerlukan bantuan CSS sebagai style. Silahkan buat file baru dengan nama misalnya style.css kemudian simpan didalam folder yang sama dengan file HTML ini atau jika mau dipisahkan silahkan buat folder baru dengan nama CSS artinya file style.css ini berada didalam folder CSS.

Setelah itu, panggil file CSS nya dibagian <head> seperti ini: <link href="css/style.css" type="text/css" rel="stylesheet"> codenya dituliskan di dalam <head> </head> setelah </title>.

Sehingga code code di HTML nya menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li>Home</li>
<li>Download</li>
<li>Tutorial</li>
<li>Software</li>
<li>Design</li>
<li>Support</li>
<li>Contact</li>
</menu>
</body>
</html>

Terapkan kode tersebut tepat dibawah tag <title> didalam <head>. Maka sekarang file HTML ini sudah terintegerasi dengan file CSS. Silahkan buka file style.css tersebut di kode editor dan tambahkan kode berikut didalamnya:

* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

Setelah diterapkan, silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Cara menampilkan hasilnya di browser adalah dengan cara arahkan/posisikan kursor di lembar kerja code editor (Sublime Text), lalu klik kanan, lalu pilih Open in Browser.

Jika ada yang bertanya-tanya apa maksudnya * {}, itu style adalah keseluruhan nilai default pada HTML. Didalamnya saya terapkan margin dan padding 0 karena secara default HTML memiliki margin dan padding dan saya ingin menghilangkannya agar tidak mengganggu codingan style saya yang lain.

Perhatikan pada style header terdapat width dan height, itu adalah lebar dan tinggi header yang sudah kita sisipkan gambar didalamnya. Silahkan tentukan lebar dan tinggi header yang memiliki gambar didalamnya sesuai selera.

Kenapa lebar header dan lebar menu bisa sama padahal header width 900px sedangkan menu width 880px ?

Pertanyaan bagus 😀

Perhatikan pada bagian menu, disitu terdapat padding 10px yang artinya atas kanan bawah dan kiri menu akan memiliki jarak 10px. Ketika lebar 900px dipotong kanan 10px dan kiri 10px maka hasilnya ? Ya 880px, makanya saya tulis 880px.

Nah sampai sini saya rasa sudah lumayan terlihat rapih walaupun baru header dan bagian menu saja. Saya anggap sudah paham dan mari lanjutkan ke part berikutnya.

Jika ingin memberikan dropdown menu / menu tarik-turun silahkan lihat disini bagaimana cara membuat menu dropdown sederhana di HTML CSS. Lihat juga disini jika ingin mempelajari cara membuat dropdown menu dengan banyak submenu / anak menu didalamnya.

Silahkan lanjut ke penjelasan part selanjutnya (Part 2),

Kesimpulan
Menu yang saya buat hanya sekedar contoh saja, jika ingin menambahkan atau mengurangi menu silahkan atur pada tag li dan a href nya. Begitupun dengan gambar, warna dan warna ketika hover silahkan diatur sesuai keinginan. Jangan terlalu terpaku dengan tutorial, explore your self guys !

PART 2
Kali ini kita akan melanjutkan tutorial membuat website sederhana HTML CSS dari tutorial sebelumnya (Part 1), pastikan kalian sudah membaca Part 1 sebelum memulai tutorial dibawah ini.

Belajar membuat sebuah bagian / kolom yang didalamnya akan dibagi menjadi dua, misalnya pada sebuah kotak artikel disarankan akan dibagi menjadi dua bagian. Pada part kedua ini kita membahas sampai tuntas tentang membuat 2 bagian kanan dan kiri di dalam satu kotak atau didalam tempat yang sama menggunakan overflow: hidden.

Pertama, silahkan buat bungkus utamanya. Disini saya contoh kan dengan <div style=””> dan style nya memiliki lebar 100%, overflow hidden. Didalam div tersebut akan saya beri h1 terlebih dahulu sebagai judul, disini saya kasih judulnya “Artikel Disarankan” dan h1 ini akan diterapkan di tengah maka berikan style di CSS nya dengan text-align: center;.

Selanjutnya, karena kita akan bagi menjadi 2 kolom maka saya akan buat 2 div lagi yaitu div untuk sebelah kiri dan div untuk sebelah kanan. Pada masing-masing kolom nanti akan diterapkan gambar, makanya pada kolom ini terdapat tag img untuk memasukkan gambar. Silahkan tentukan gambar yang ingin kalian gunakan.

Selain gambar, ada juga judul untuk artikelnya. Misalnya disini saya akan tampilkan artikel dengan judul “Tutorial Bagi Pemula“, untuk judulnya ini saya gunakan h3 saja supaya tidak terlalu besar.

Setelah itu, kita terapkan kutipan atau excerpt menggunakan tag p saja. Untuk excerpt ini silahkan terapkan deskripsi dari isi blog tersebut dan silahkan sesuaikan panjang kalimatnya supaya terlihat rapih.

Jangan lupa juga berikan link untuk mengarahkan bagian ini ke artikel tersebut dengan tulisan “Baca Selengkapnya / Read More” agar para pengunjung nanti bisa membaca artikel itu secara keseluruhan dengan cara mengklik linknya.

Beginilah code yang saya buat untuk penjelasan diatas:

<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>

Perhatikan di dalam div class recomended terdapat 2 div lagi yaitu div class recomendedKiri dan div clas recomendedKanan, 2 div tersebut akan kita terapkan bersampingan (kiri dan kanan) didalam div utama nya yaitu div class recomended sebagai pembungkus.

Seperti yang saya jelaskan diatas, didalam div kiri dan kanan ini akan kita terapkan gambar, judul dan excerpt. Maka didalamnya terdapat tag img, h3 sebagai judul dan p sebagai excerpt.

Silahkan masukkan gambar yang ingin kalian gunakan, masukkan judul dan masukkan juga excerpt. Sesuaikan semuanya agar terlihat menarik dan rapih.

Selanjutnya silahkan terapkan code berikut pada file CSS yang sudah disediakan seperti yang dijelaskan pada part 1 (style.css):

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

Perhatikan pada .recomended saya terapkan overflow:hidden, apa fungsinya ?

Yaitu untuk menghilangkan bagian bawaan div pada class tersebut karena didalamnya kita akan menerapkan 2 div / di kolom bukan 1 kolom seperti bawaannya div.

Tapi, jangan lupa pada recomended kiri diterapkan float:left agar dia mengapung ke kiri dan secara otomatis si recomended kanan akan ikut disampingnya, pastikan juga lebarnya cukup untuk 2 kolom karena kalo lebih salah satu akan turun kebawah (tidak sejajar).

Perhatikan pada gambar (img), silahkan atur float:left agar nanti gambar dan excerpt bersampingan. Jika tidak ingin bersampingan (gambar diatas dan excertp dibawah) maka jangan atur img dengan float:left.

Silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Pada tag img pun saya terapkan box shadow dan margin. Fungsi box–shadow untuk memberikan bayangan pada pinggiran gambar, silahkan lihat disini untuk mempelajari selengkapnya tentang memberi bayangan pada gambar. Sedangkan fungsi margin pada tag img ini untuk memberikan jarak dengan excerpt agar tidak terlalu rapat karena gambar dan excerpt ini saya buat saling bersampingan.

Kesimpulan
Pada part 2 ini kita telah mempelajari cara membuat 2 kolom didalam div, membuat gambar dan text bersampingan, membuat link untuk read more dan hal lainnya yang dijelaskan diatas. Semoga bisa menjadi ilmu baru untuk temen-temen yang belum tau. Silahkan sesuaikan warna pada tutorial diatas sesuai selera, jangan lupa tentukan juga excerpt nya agar terlihat menarik dan rapih.

Maka sekarang keseluruhan code HTML CSS dari part 1 – part 2 seperti ini:

CODE HTML
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
</body>
</html>

CODE CSS
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

Jika dirasa sudah paham part 1 dan 2 ini, silahkan tunggu dilajurkan di Part 3.

PART 3

Setelah selesai memahami Cara Membuat Website Sederhana HTML & CSS Part 2 , sekarang kita lanjutkan ke part 3. Kali ini kita akan membuat bagian / div utama pada website. Tidak berbeda jauh dari sebelumnya, pada bagian ini akan kita bagi menjadi 2 bagian (kanan & kiri) yang mana sebelah kanan akan menampilkan artikel terbaru dan sebelah kiri (lebih kecil) akan dijadikan sidebar / widget.
Sebelumnya kita sudah menyediakan satu buah gambar yaitu file bernama logo pmd.jpeg, gambar 1 (logo pmd.jpeg) ini telah terpasang di rancangan web sebagai logo dari website tersebut. Selanjutnya tambahkan 3 buah lagi image/gambar berektensi JPEG atau JPG yang masing-masing filenya gambar 2 diberi nama dua.jpeg, gambar 3 diberi nama tiga.jpeg, dan gambar 4 diberi nama empat.jpeg, (gambar 2 hingga gambar 4 hanya sebagai sampel saja sebagai gambar yang sesuai dengan tulisan artikel, yang nantinya gambar dan teks artikel dari gambar tersebut dapat diganti-ganti).

Kita buat div pertama sebagai kolom utama (keseluruhan yang membungkus 2 kolom kanan kiri tersebut) dan jangan lupa berikan class pada div tersebut misalnya disini saya beri class nya buaya. Sekarang, didalam buaya ini silahkan berikan 2 div lagi yang akan digunakan untuk kanan & kiri.
terapkan code HTML berikut di membuatwebsite.html nya, melanjutkan code HTML yang sudah ada sampai part 2, tuliskan di setelah </div> atau di sebelum akhir body (sebelum </body> ):

<div class="buaya">
<div class="widget"></div>
<div class="artikelTerbaru"></div>
</div>

Pada code tersebut terdapat div utama yaitu buaya dan didalamnya mengandung 2 div lagi yaitu class widget dan class artikelTerbaru yang mana kedua 2 div tersebut akan kita buat berdampingan seperti pada tutorial sebelumnya di part 2. Tapi kali ini class artikelTerbaru akan lebih besar ukurannya dibanding class widget yang hanya sebagai sidebar.

Sekarang div class buaya dan bagian bagiannya berupa class widget dan class artikelTerbaru kita beri gayanya dengan menerapkan code CSS berikut di style.css nya. Tuliskan code CSS berikut di style.css nya, melanjutkan code CSS yang sudah ada sampai part 2, tuliskan di setelah /* akhir class recomended */ yaitu:

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}

Perhatikan pada .buaya terdapat overflow:hidden lagi, sama seperti pada penjelasan di part 2 ya ? Kemudian jangan lupa atur lebarnya 100%. Seperti biasa, pada bagian yang dikiri yaitu class widget kita terapkan float:left agar mengapung kekiri dan secara otomatis nanti class artikelTerlaris akan ada disampingnya.

Tentukan lebar untuk class widget sesuai keperluan, biasanya sidebar tidak perlu terlealu lebar maka saya terapkan 245px saja. Lalu pada class artikelTerlaris tidak perlu diberikan lebar agar nanti dia menyesuaikan secara otomatis dan bergantung pada isi didalamnya, cukup tambahkan margin kanan-kiri saja agar tidak terlalu nempel.

Pada div pertama didalam buaya akan menjadi sidebar / widget dan div kedua akan menjadi daftar artikel terbaru dan jangan lupa diberi class pada masing-masing div nya misalnya disini saya akan beri nama class widget pada div pertama dan class artikelTerbaru pada div kedua.

Selanjutnya di bagian div class widget akan saya tampilkan 3 widget lagi yaitu artikel terlaris, media sosial dan kontak form (subscribe). Maka silahkan buat 3 div baru didalam class widget masing-masing div diberi class dengan nama yang diinginkan misalnya class artikelTerlaris, class mediaSosial dan class subscribe. Tuliskan code HTML berikut di setelah <div class="widget"> yaitu:

<div class="artikelTerlaris"></div>
<div class="mediaSosial"></div>
<div class="subscribe"></div>
</div>

sehingga hasil code HTML nya adalah berikut ini:

<div class="buaya">
<div class="widget">
<div class="artikelTerlaris"></div>
<div class="mediaSosial"></div>
<div class="subscribe"></div>
</div>
<div class="artikelTerbaru"></div>
</div>

Kalian dapat menyesuaikan nama class sesuai keinginan dan kalian dapat menentukan berapa jumlah widget didalam class widget. Disini saya contoh kan dengan 3 widget didalam class widget dan masing-masing memiliki jenis yang berbeda.

Selanjutnya pada class artikelTerlaris akan saya tampilkan 3 sub artikel lagi sebagai artikel terlaris lengkap dengan gambar, judul dan kutpian / excerpt, yaitu Terlaris Satu, Terlaris Dua, dan Terlaris Tiga.
Tuliskan code HTML berikut di setelah <div class="artikelTerlaris"> yaitu:

<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>

Harus tepat terapkan kode tersebut didalam div class artikelTerlaris, tuliskan di setelah <div class="artikelTerlaris">

Perhatikan pada kode itu terdapat h3 yang fungsinya sebagai judul dari widget artikelTerlaris agar nanti semua pengunjung paham apa maksud 3 artikel yang ada disini. Ada juga a href didalam tag h4 yang diterapkan sebagai judul artikel terlaris agar dapat diisi link dan dapat di klik oleh pengunjung.

Sekarang widget artikelTerlaris kita beri gayanya dengan menerapkan code CSS berikut di style.css nya. Tuliskan code CSS berikut di style.css nya, melanjutkan code CSS yang sudah ada, tuliskan di setelah /buaya .widget .artikelTerlaris { margin: 0 5px; }
CSS dari widget artikel terlaris tersebut saya buat seperti ini:

.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

Tambahkan code tersebut di CSS untuk style widget class artikelTerlaris. Pada gambar jangan lupa di float:left agar dapat bersampingan dengan excerpt dan jangan lupa dikasih margin supaya tidak terlalu rapat.

Silahkan sesuaikan style yang kalian inginkan untuk widget class artikelTerlaris ini, jangan terlalu terpaku dengan code diatas karena hanya sekedar contoh saja.

Sampai sini, sidebar telah memiliki 1 widget yang diisi dengan 3 artikel terlaris yang dilengkapi gambar, link, judul dan excerpt. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Sampai sini masih semangat ? 😀

Kalau semangat dan yakin sudah paham, silahkan lanjutkan ke part 4.

Maka keseluruhan code HML CSS dari part 1 sampai part 3 akan seperti ini:

CODE HTML:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Membuat Website Sederhana - HTML CSS</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial"></div>
<div class="subscribe"></div>
</div>
</div>
</body>
</html>

CODE CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}
/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

Kesimpulan
Pada part 3 ini tidak berbeda jauh dengan part 2 yang membuat 2 kolom didalam div, tapi sedikit perbedaannya yaitu dari ukuran kolom tapi tetap sama menggunakan overflow:hiddern. Dan pastikan excerpt yang dimasukkan tidak terlalu panjang agar terlihat rapih seperti pada gambar diatas, tapi terserah sih 😀

PART 4

Homepage / Newsfeed

Kali ini kita akan lanjutkan dari tutorial membuat website sederhana HTML CSS sebelumnya (part 3) dengan membuat daftar artikel terbaru (blog) di kolom sebelah kanan. Pada umumnya, daftar artikel / post terbaru sebuah blog itu menampilkan judul, gambar andalan, kutipan / excerpt dan link menuju artikel tersebut.

Pada part 3 kita telah membuat 4 buah gambar, selanjutnya kita tambahkan satu image/gambar lagi gambar 5 yang nama filenya diberi adalah lima.jpeg, file gambar lima.jpeg ini kita simpan di folder yang sama dengan yang sebelumnya. Kemudian pada part 3 kita telah akan membuat 3 widget di sidebar kiri tapi baru selesai 1 widget saja yaitu widget class artikelTerlaris, 2 widget lainnya yaitu widget class mediaSosial dan widget class subscribe kita skip saja dulu dan kita lanjutkan ke kolom yang sebelah kanan untuk menampilkan daftar pos terbaru agar terlihat rapih dan memastikan kolom sebelah kanan berfungsi dengan baik.

Silahkan masukkan code HTML berikut didalam div class artikelTerbaru, tempatkan di setelah <div class="subscribe"></div> </div> yaitu sebagai berikut:

<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://pmdsesawi-ak.com"><h2>Artikel Terbaru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Terbaru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Terbaru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>

Perhatikan pada kode diatas terdapat img yang dibungkus a href artinya img ini disisipkan gambar sebagai gambar andalan pos tersebut dan dapat di klik, silahkan tentukan link didalamnya mengarah ke pos tunggal / halaman detail pos tersebut.

Ada juga tag h2 yang dibungkus dengan a href yang fungsinya untuk judul dari pos tersebut dan dapat di klik, silahkan tentukan link didalam a href nya menuju ke halaman masing-masing artikel.

Tidak lupa juga tag <p> yang fungsinya untuk excerpt atau kutipan beberapa kata yang diambil dari masing-masing pos.

Disini saya contohkan 3 artikel / pos saja per halaman, silahkan tentukan jumlah pos per halaman sesuai keperluan. Pada daftar artikel terbaru ini tidak ditambahkan link read more (baca selengkapnya) karena saya rasa sudah cukup dengan menyisipkan link pada gambar andalan dan judul pos tapi jika ingin menambahkan link read more (baca selengkapnya) silahkan saja.

Selanjutnya, div class artikelTerlaris ini kita beri gaya dengan membuat kustomnya di CSS, terapkan code berikut di style.css, terapkan di setelah <div class="subscribe"></div> </div> yaitu berikut ini:

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}

/* akhir class artikelTerbaru */

Pada class artikelTerbaru ini saya terapkan lebarnya 650px karena lebar keseluruhan adalah 900px dikurangi sidebar 245px dan dikurangi margin-left pada class artikelTerbaru 5px maka total akan sama yaitu 900px seperti header dan menu diatas (sama rata sisinya).

Selanjutnya masalah warna dan ukuran gambar silahkan disesuaikan aja, disini saya contohkan dengan gambar yang lebar dan lumayan besar. Silahkan di Save dan lihat hasilnya di browser. (lihat gambar)

Nah, sampai sini ternyata kolom kiri dan kanan yang ada didalam class buaya berfungsi dengan baik.

Masih bingung ? atau sudah paham ? Yuk lanjut ke part 5.

Dari part 1 sampai part 4 ini code HTML CSS kalian harusnya seperti ini:

Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial"></div>
<div class="subscribe"></div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Terbaru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Terbaru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Terbaru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div>
</body>
</html>

Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
.buaya .pagination li {
list-style: none;
margin: 5px;
}
.buaya .pagination a {
text-decoration: none;
color: #fff;
}
.buaya .pagination .kiri {
float: left;
}
.buaya .pagination .kanan {
float: right;
}

/* akhir class artikelTerbaru */

Kesimpulan
Pada part 4 ini kita hanya ingin memastikan bahwa kolom sebelah kanan didalam class buaya berfungsi dengan baik makanya kita lewatkan widget-widget lain (widget class mediaSosial dan widget class subscribe) yang akan diterapkan di sidebar kiri. Semua berfungsi dengan baik, maka pada tutorial berikutnya kita akan kembali lagi menambahkan widget-widget tersebut di sebelah kiri.

Jika dirasa sudah paham part 3 dan 4 ini, silahkan tunggu dilajurkan di Part 5.

PART 5

Membuat Ikon Media Sosial di Sidebar Widget

Setelah mempelajar Part 1, Part 2, Part 3 dan Part 4, sekarang kita lanjutkan ke Part 5. Pada Part 5 ini kita akan membuat daftar media sosial di widget / sidebar yang sudah dibuat pada part 3. Biasanya pada blog / situs web selalu mempromosikan media sosialnya seperti Facebook Twitter atau Google+.

Pada media sosial ini akan kita buat berupa icon / gambar media sosial yang diisi link / url yang mengarah ke profil media sosial milik pribadi. Selain itu, media sosial ini akan dibuat responsive / menyesuaikan ukurannya dengan ukuran widget yang ada.

Silahkan siapkan icon media sosialnya terlebih dahulu, disini saya contohkan berupa gambar transparan yang sudah saya buat sebelumnya menggunakan Adobe Photoshop. Gambar ini memiliki ukuran 120px x 120px, silahkan tentukan ukuran yang menurut kalian bagus untuk ditempelkan pada sidebar. File gambar media sosial bisa yang berektensi jpg atau png untuk icon class media sosial ini, perhatikan penulisan nama filenya di lembar kerja code editor (sublime text) harus benar, icon media sosial tersebut adalah seperti berikut ini:

Kalau belum ada gambarnya atau males bikinnya, silahkan dicopy disini gambar media sosial yang saya gunakan, setelah dicopykan lalu dipotong satu demi satu. Nah, pada part 3 kan sudah bikin widget class mediaSosial ya ?
Nah sekarang tinggal tambahkan kode HTML ini didalam class mediaSosial, tuliskan di setelah <div class="mediaSosial"></div> atau di sebelum <div class="subscribe"> /div> sebagai berikut:

<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div>

Tag h3 diatas adalah judul untuk widget Media Sosial ini, silahkan ubah judulnya kalo perlu. Pada tag img disini dibungkus dengan tag a href agar gambar tersebut berisi link dan dapat di klik oleh pengunjung.

source gambar / src=”” itu adalah nama gambar yang digunakan, silahkan panggil gambar sesuai nama dan ekstensi gambarnya. title=”...” adalah judul untuk gambar tersebut, silahkan hapus jika dirasa tidak perlu.

Pada link a href silahkan masukkan link media sosial yang kalian miliki apa nama akunnya, dan sesuai dengan gambarnya ya jangan sampe ketuker 😀 ntar gak nyambung jadinya.

Sekarang class media sosial tersebut kita kustom (beri gaya) di CSS, terapkan kode CSS berikut di file style.css nya, tuliskan di setelah /* akhir class artikelTerbaru */ sebagai berikut:

/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */

Silahkan atur gaya ketika disentuh mouse / hover, ukuran gambar, jarak antara gambar, border atas sebagai pemisah antara widget class mediaSosial dan widget diatasnya sesuai selera kalian sendiri.

Karena ikon media sosial seperti ini biasanya berukuran kecil ketika disimpan di sidebar, jadi jangan terlalu besar supaya enak dilihat. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Sampai sini sudah bisa dikatakan mantap website / blog walaupun baru halaman depan saja.

Masih bingung ?, kalau sudah yakin paham, yuk lanjut ke part 6.

Dari part 1 sampai part 5 ini, kode HTML CSS akan jadi seperti ini:

Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div>
<div class="subscribe"></div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div>
</body>
</html>

Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}

/* akhir class artikelTerbaru */

/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */

Kesimpulan
Ikon / gambar media sosial yang digunakan pada tutorial ini tidak terlihat begitu menarik, silahkan buat sendiri atau download ikon / gambar yang menarik supaya situs kalian terlihat lebih menarik dan usahakan warna nya kustom disesuaikan dengan warna situs.

Sampai part 5 ini saya anggap sudah pada paham, tapi jangan tinggalkan tutorial-tutorial berikutnya juga sampai selesai karena ada beberapa pengetahuan baru yang mungkin akan bermanfaat.

Jika dirasa sudah paham part 5 ini, silahkan tunggu dilajurkan di Part 6.

PART 6

Membuat Formulir Kontak / Subscribe Form

Setelah menyelesaikan tutorial membuat website sederhana HTML CSS Part 1 sampai Part 5, sekarang kita lanjutkan ke Part 6. Pada tutorial kali ini akan menjelaskan bagaimana cara membuat kontak form sederhana untuk ditempelkan di sidebar sebelah kiri yang sudah dibuat sebelumnya.

Di tutorial sebelumnya sudah disediakan div class subscribe yang diletakkan dibawah div class mediaSosial, nah sekarang tinggal masukkan code HTML berikut didalam div class subscribe sebagai kontak form, tuliskan di sesudah <div class="subscribe"></div> atau di sebelum <div class="artikelTerbaru"> sebagai berikut:

<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>

Seperti biasa, tag h3 diatas merupakan judul untuk widget kontak ini silahkan tentukan judul kalian sendiri. Pada pembuatan form HTML memerlukan tag <form>, ini hanya sekedar contoh saja form yang sangat sederhana. Selengkapnya lihat tutorial tentang membuat form HTML CSS.

Selanjutnya class subscribe tersebut kita kustom (beri gaya) di CSS, terapkan kode CSS berikut di file style.css nya, tuliskan di setelah /* akhir class mediaSosial */ sebagai berikut:

/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */

Seperti biasa berikan margin pada pembungkus dan border-top sebagai garis pemisah, silahkan tentukan warna garis sesuai selera kalian.

Pada lebar input form ini saya berikan 95% agar tidak terlalu rapat sisinya dengan batas widget, silahkan tentukan lebar sesuai keperluan website kalian masing-masing.

Pada input type submit / tombol terdapat cursor:pointer artinya ketiak mouse menyentuh bagian ini akan berubah menjadi pointer (jari) bukan panah seperti biasanya, silahkan dihapus dan lihat perbedaannya.

Setelah berhasil membuat kode diatas, silahkan Save dan lihat hasilnya di browser. (lihat gambar)

Gimana, masih mau lanjut ? 😀

Masih bingung ? Lihat : Video Tutorial Membuat Website Part 6. Jika sudah paham, silahkan lanjutkan ke part 7.

Sekarang, jika tidak ada code yang diubah dari part 1 sampai part 6 akan seperti ini:

Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div>
</body>
</html>

Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}

/* akhir class artikelTerbaru */

/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */

/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */

Kesimpulan
Pada tutorial part 6 hanya membuat form saja di sidebar yang sudah disediakan pada part-part sebelumnya. Formulir ini hanya sekedar contoh dan terbilang sangat sederhana, silahkan buat form yang lebih menarik untuk website kalian dan tambahkan bidang / field lain jika memang diperlukan.

Selamat mencoba !

Jika dirasa sudah paham part 5 dan 6 ini, silahkan tunggu dilajurkan di Part 7.

PART 7

Favicon Branding

Setelah menyelesaikan tutorial membuat website sederhana HTML CSS dari part 1 sampai part 6, sekarang kita lanjutkan ke part 7. Pada tutorial kali ini kita akan sisipkan favicon pada website.

Apa itu favicon ?
Favicon merupakan icon sebuah situs yang ditampilkan pada tab browser tepat disamping judul dari halaman situs tersebut, favicon ini hanya akan terlihat ketika dibuka di browser desktop / laptop / perangkat yang sedikit lebar dan memiliki ruang lebih pada tab browsernya untuk menampilkan favicon ini.

Jika kalian membuka artikel ini di browser desktop / laptop silahkan lihat dibagian tab browser dibagian atas tepat disamping judul halaman ini pada tab browser terdapat logo / icon. Nah itulah favicon. seperti berikut ini contohnya:

Bagaimana Cara Menerapkan Favicon ?
Cara menerapkan favicon ini sudah pernah saya bahas di artikel sebelumnya tentang menambahkan favicon pada HTML, silahkan dilihat dan diikuti langkah-langkahnya kemudian terapkan ke situs sederhana HTML CSS ini.

Contoh gambar favicon yang akan saya tampilkan di bagian tab browser dibagian atas tepat disamping judul halaman website PMD Sesawi-AK adalah berikut ini:

File gambar untuk favicon ini berukuran 290px X 290px dan saya beri namanya favicon, berekstensi png (favicon.png) yang disimpan di folder yang sama dengan gambar-gambar sebelumnya. Agar mendapatkan hasil terbaik, tentu harus memakai standar ukuran favicon yang ideal dengan menggunakan gambar persegi empat sama sisi (bujur sangkar) dengan ukuran 16 X 16 pixel agar favicon bisa tampil maksimal di browser internet. Selain itu perlu mengubah format file gambar menjadi .ico agar bisa terbaca oleh browser internet. Bagaimana cara mengubah gambar menjadi persegi dan berformat favicon.ico? yaitu dengan cara bantuan platform online yang bisa membuat file menjadi berektensi .ico. Terdapat banyak favicon generator yang dapat mengubah gambar menjadi bersegi dan formatnya menjadi .ico, Beberapa favicon generator yang direkomendasikan adalah sebagai berikut:

GenFavicon Favicon-Generat RealFaviconGenerator FaviconGenerator

Favicomatic Favikon Favicon.pro Faviconit Antifavicon Faviconr

Nah sekarang membuat faviconnya tinggal tambahkan kode HTML ini <link rel="shortcut icon" type="image/png" href="images/favicon.png"/> didalam head (di antara <head> </head>), tuliskan code HTML tersebut di setelah <title>Membuat Website - HTML PMD Sesawi-AK</title>  atau di sebelum <link href="css/style.css" type="text/css" rel="stylesheet">

Setelah berhasil diterapkan pada situs HTML CSS sederhana yang kita buat ini, silahkan Save dan lihat hasilnya di browser. Favicon akan terlihat sebagai icon website yang kita rancang yang ditampilkan pada tab browser tepat disamping judul dari halaman website tersebut.

Pada gambar diatas sudah berhasil menampilkan favicon di tab browser, begitulah caranya.

Masih bingung ? Kalo sudah yakin paham silahkan lanjutkan ke part berikutnya.

Sampai part 7 ini, code HTML CSS kalian seharusnya seperti dibawah ini jika tidak ada yang diubah:

Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div>
</body>
</html>

Code CSS:
{margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}

/* akhir class artikelTerbaru */

/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */

/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */

Kesimpulan
Sebetulnya, pada tutorial part 7 ini tidak hanya menambahkan favicon saja tapi ada beberapa hal yang mungkin bisa bermanfaat.

Selamat mencoba !

Jika dirasa sudah paham part 7 ini, silahkan tunggu dilajurkan di Part 8.

PART 8

Membuat Bagian Footer

Artikel ini merupakan artikel lanjutan dari tutorial sebelumnya (Membuat Website Sederhana HTML & CSS Part 1 – Part 7), pastikan kalian sudah mengikuti part-part sebelumnya.

Pada part 8 ini kita hanya membuat Footer Copyright saja, mungkin bisa bermanfaat buat teman-teman yang belum tahu.

Silahkan buka codingan sebelumnya (file HTML dan CSS nya) kemudian tambahkan code berikut pada file HTML:

<div class="footer">
<p>@Copyright 2020 | PMD Sesawi-AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div>

Tuliskan code HTML tersebut di setelah  </div>  atau di sebelum akhir body (</body>)

Disini menggunakan div dengan class footer, silahkan tentukan sesuai selera jika ingin berbeda dengan contoh diatas misalnya tidak menggunakan div tapi langsung menggunakan tag <footer>.

Pada bagian footer biasanya terdapat link yang menuju ke halaman author sebagai perkenalan pada pengunjung bahwa template ini dibuat oleh author tersebut.

Silahkan berikan link website / link lainnya yang diperlukan. Dan ada hak cipta atau yang lebih dikenal dengan Copyright, tidak lupa juga ditambahkan tahun.

Biasanya copyright diterapkan dibagian paling bawah sebuah situs web maka saya terapkan code tersebut dibagian bawah file HTML agar muncul dibagian paling bawah.

Sampai sini tentu belum terlihat rapih karena belum diatur CSS nya, silahkan tambahkan code CSS berikut pada file style.css yang bersangkutan untuk memberi gaya (style) pada bagian footer tersebut. Tuliskan code CSS berikut ini di setelah  /* akhir class subscribe */ yaitu :

.footer {
width: 100%;
height: 50px;
background-color: blue;
margin-top: 10px;
position: relative;
}
.footer p {
color: #fff;
position: absolute;
bottom: 10px;
left: 350px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}

Karena ini merupakan part 8. saya rasa tidak perlu dijelaskan lagi secara rinci tentang gaya yang ada pada code diatas karena sudah pernah dijelaskan di part-part sebelumnya. Silahkan tentukan gaya / style untuk footer sesuai dengan kebutuhan dan desain web agar terlihat lebih menarik. Lihat hasil akhir dari part 1 hingga part 8 berikut ini : (lihat gambar)

Jika ingin menambahkan simbol / ikon Copyright © pada footer ini, cukup tambahkan saja code & copy;pada code diatas maka akan muncul sebagai ©. Ikuti tutorial yang mempelajari lebih lanjut tentang membuat simbol hak cipta / copyright pada HTML.

Masih bingung ? Jika sudah yakin paham, silahkan lanjut ke Part 9.

Sampai disini, maka seluruh code HTML CSS kalian akan seperti ini (jika tidak ada yang diubah):

Code HTML:
<!doctype html>
<html>
<head>
<title>Membuat Website - HTML PMD Sesawi-AK</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<img src="images/logo pmd.jpg">
</header>
<menu>
<li><a href="">Home</a></li>
<li><a href="">Download</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Software</a></li>
<li><a href="">Design</a></li>
<li><a href="">Support</a></li>
<li><a href="contoh-halaman.html">Kontak</a></li>
</menu>
<div class="recomended">
<h1>Artikel Disarankan</h1>
<div class="recomendedKiri">
<img src="images/dua.jpg">
<h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p>
</div>
<div class="recomendedKanan">
<img src="images/tiga.jpg">
<h3><a href="">Hi, There</a></h3>
<p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p>
</div>
</div>
<div class="buaya">
<div class="widget">
<div class="artikelTerlaris">
<h3>Artikel Terlaris</h3>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Satu</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Dua</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/>
<img src="images/empat.jpg">
<a href=""><h4>Terlaris Tiga</h4></a>
<p>ey College in Virginia, looked up one of the more obscure Latin words</p>
</div>
<div class="mediaSosial">
<h3>Media Sosial, Let's Connect !</h3>
<a href="https://plus.google.com/+sr.pakpahan,sst"><img src="images/icon googleplus.jpg" title="Follow Me on G+"></a>
<a href="http://www.facebook.com/sukma riadi pakpahan" target="_blank"><img src="images/icon fb.jpg" title="Like Us on Facebook"></a>
<a href="http://www.twitter.com/sr.pakpahan,sst"><img src="images/icon twitter.jpg"></a>
<a href="http://www.instagram.com/sr.pakpahan,sst"><img src="images/icon instagram.png"></a>
<a href="https://www.linkedin.com//feed/sr.pakpahan,sst"><img src="images/icon linkedin.png"></a>
<a href="https://www.youtube.com/c/sr.pakpahan,sst"><img src="images/icon youtube.png"></a>
<a href="https://www.pinterest.com/sr.pakpahan,sst"><img src="images/icon pinterest.png"></a>
</div>
<div class="subscribe">
<h3>Subscribe</h3>
<form>
Nama:<br/><input type="text" required><br/>
Email:<br/><input type="email" required>
<input type="submit" value="Kirim">
</form>
</div>
</div>
<div class="artikelTerbaru">
<a href=""><img src="images/lima.jpg"></a>
<a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Dua</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/>
<a href=""><img src="images/lima.jpg"></a>
<a href=""><h2>Artikel Baru Tiga</h2></a>
<p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
</div>
</div>
<div class="footer">
<p>@Copyright 2020 | PMD Sesawi-AK | <a href="https://PMD Sesawi-AK.com" target="_blank">SR.Pakpahan,SST</a></p>
</div>
</body>
</html>

Code CSS:
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}

header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}

menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}

menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}

/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */

/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}

/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */

/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}

/* akhir class artikelTerbaru */

/* class mediaSosial */
.buaya .widget .mediaSosial {
margin: 5px;
border-top: 5px solid #333;
}
.buaya .widget .mediaSosial h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .mediaSosial img {
width: 30px;
height: 30px;
}
.buaya .widget .mediaSosial img:hover {
opacity: 0.5;
}
/* akhir class mediaSosial */

/* class subscribe */
.buaya .widget .subscribe {
margin: 0 5px;
border-top: 5px solid #333;
}
.buaya .widget .subscribe h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .subscribe input[type="text"] {
width: 95%;
}
.buaya .widget .subscribe input[type="email"] {
width: 95%;
margin-bottom: 5px;
}
.buaya .widget .subscribe input[type="submit"] {
width: 50%;
padding: 5px;
cursor: pointer;
margin-bottom: 5px;
margin-left: 50px;
}
/* akhir class subscribe */

/* footer */
.footer {
width: 100%;
height: 50px;
background-color: blue;
margin-top: 10px;
position: relative;
}
.footer p {
color: #fff;
position: absolute;
bottom: 10px;
left: 350px;
}
.footer p a {
text-decoration: none;
color: #fff;
}
.footer p a:hover {
color: #f90;
}

Kesimpulan
footer pada sebuah situs web tidak selalu hanya berupa hak cipta / copyright saja tapi juga ada yang menerapkan widget yang biasa digunakan untuk link-link situs yang tidak diterapkan dibagian menu seperti About Us – Contact Us – Advertising dan lainnya.
Ini semua tergantung dari bagaimana kalian ingin membuat situs web kalian karena ada juga beberapa situs web yang tidak menggunakan widget dibagian footer. Jika ingin menggunakan widget, bisa ikuti tutorial part-part sebelumnya yang menjelaskan tentang sidebar & widget kemudian kalian bisa terapkan tutorial itu di bagian widget.

Selamat mencoba !

Jika dirasa sudah paham part 7 dan part 8 ini, silahkan tunggu
dilanjutkan di Sesi 2 (7 Part).

Bersambung ke...
MEMBUAT WEBSITE HTML-CSS PRAKTIS (SESI 2)

BAHASA PEMOGRAMAN

Cari Blog Ini

MEMBUAT WEBSITE HTML CSS PRAKTIS (SESI 1)

Komentar

Posting Komentar

Postingan populer dari blog ini

Pemograman R Studio

MIGRASI DATABASE DARI SQLite KE MySQL (Part-1)

Cara Menjadi Pengembang Front End – Keterampilan Front End Web Dev