Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website

Mengedit atau memodifikasi tampilan blog itu menyenangkan dan sebenarnya tidak sulit jika kita mengetahui sedikit banyak tentang script CSS (Cascading Style Sheets), HTML, dan Javascript. Hal tersebut ingin kita lakukan biasanya karena ingin membuat tampilan blog agar lebih keren, memberi warna dan suasana baru, atau mungkin kita bosan dengan tampilan blog yang itu-itu saja.

Membaca script / kode tentu adalah hal yang menyebalkan terkhusus untuk blogger pemula termasuk Saya dulunya. Namun bila kita mengerti sedikit banyak tentang kode itu, hal yang tadinya menyebalkan bisa menjadi menyenangkan loh. Langsung saja simak cara / tutorialnya berikut ini.

• Pertama-tama login ke akun blogger.com > Buka blog yang akan diedit > Pada menu bar blogger sebelah kiri, klik Template > Pada menu Template klik Edit HTML
• Jika sudah membuka Edit HTML biarkan dahulu, sekarang buka blog Sobat, kita akan melakukan pengeditan tampilan blog dari Inspect Elemen terlebih dahulu.
• Inspect Elemen/ Periksa Elemen yang akan kita edit gaya, warna, ukuran dan lain sebagainya. Klik kanan pada bagian yang akan di edit, pilih Periksa Elemen / Inspect Element. 

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

• Untuk pengeditan Saya sarankan menggunakan browser Mozilla Firefox, download disini, karena untuk memodifikasi CSS lebih mudah dan leluasa, atau Chrome juga tidak masalah.
• Kode HTML yang sebelah kiri, dan kode CSS yang disebelah kanan Inspect Element.
• Mengedit kode HTML dengan klik kanan kode HTML yang diinginkan,  kemudian Edit As HTML, atau tekan F2 saja pada kode tersebut. Maka tampilannya seperti pada Gambar 1 (Lihat di bawah postingan).
• Mengedit kode CSS yaitu klik Property / Value CSS yang ada disebelah kanan Inspect Elemen, kemudian ganti atau modifikasi sesuai keinginan. Pada contoh dibawah ini, Saya mengganti value / nilai dari warna background elemen .menu. Contoh pada Gambar 2 (Lihat di bawah postingan).
• Pengguna Firefox, pada bagian inspect element, pilih Style Editor/ Editor Gaya, untuk fokus ke pengeditan CSS. Editing HTML nya pada Inspector / Inspektur tab Inspect Element. Contoh pada Gambar 3 (Lihat di bawah postingan).
• Pilih style utama blog Sobat yang hendak diedit, atau periksa satu persatu kumpulan CSS yang ada disebelah kiri gambar berikut. Silahkan Sobat, mengotak atik CSS yang ada pada kolom tengah. Contoh pada Gambar 4 (Lihat di bawah postingan).
• Jangan sungkan untuk menghapus atau menambahkan kode pada CSS maupun HTML, karena pengeditan ini sifatnya sementara saja, dan hanya terjadi pada komputer Sobat.
• Tetap lanjutkan saja pengeditan, jika sudah menemukan atau menyelesaikan desain yang diinginkan, save atau salin kode HTML dan CSS yang baru tersebut, ke Edit HTML yang ada pada Blog sobat, search saja di blog dengan CTRL+F agar memudahkan menemukan kode yang akan diganti.
• Dan lagi lagi, jangan berhenti berusaha mencoba terus menerus, jika belum berhasil coba dan coba lagi, karena semakin sering kita menemukan masalah dan memecahkannya, semakin banyak pula pengalaman kita dalam mendesain web.
• Gunakan juga tool color generator dan editor HTML CSS blog ini, yang mungkin memudahkan Sobat dalam pengeditan.

Semoga tutorial atau penjelasan yang Saya tuliskan pada artikel ini dapat membantu Sobat blogger sekalian untuk memodifikasi tampilan blog atau websitenya. Lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Belajar Dasar Web Design (Cara mudah memahami perintah HTML dan CSS)

Halo Sobat!, salam designer pemula :D.

Pada kesempatan ini, Saya ingin membagikan pengalaman Saya dalam mempelajari HTML dan CSS, barangkali dapat membantu sobat lebih mudah memahami ke-2 kode pokok untuk membangun atau mendesain web ini. Baiklah simak secara perlahan kelanjutan dari artikel ini.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

HTML

Apa itu HTML?

Yaitu salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, didalam HTML inilah kita membuat kepala / header website, badan / body, footer, dan lain sebagainya, intinya struktur utama dari website ada pada HTML, bila dianalogikan dalam tubuh manusia seperti tulang yang membentuk kerangka tubuh manusia.

Ciri-ciri script / perintah HTML 

• Selalu diawali oleh tag <awal elemen> dan diakhiri oleh </akhir elemen>.
• Perbedaan awal dan akhir hanya pada bentuk tag nya perhatikan untuk awal (Pembuka tag) "< >" dan untuk akhir (Penutup tag) "</ >". 
• Bila menemukan kode yang seperti ini berarti adalah kode HTML. Contoh : <html> dan </html> , <div> dan </div>

Contoh perintah atau tag HTML

• <html> : Sebagai tempat / tubuh utama dari sebuah halaman website
• <head> :
• Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website <style>.
• Sebagai tempat meletakkan javascript <script>.
• Meletakkan judul halaman website <title>.
• Meletakkan meta yaitu tag untuk membungkus keperluan SEO seperti deskripsi/ keterangan website, keyword/ kata kunci, dan lain sebagainya <meta>.
• Meletakkan css external/ css dari luar halaman HTML <link>. Contohnya : <link rel="stylesheet" href="style.css"/>.
• <body> : Sebagai kontainer/ tempat dari elemen-elemen yang akan ditampilkan pada halaman HTML. Seperti <div>, <span>, <nav>, <ul>, <img> dan lain sebagainya.

Struktur dasar halaman HTML

Berikut ini kode untuk struktur dasar halaman HTML pada umumnya.

<html>

<head>

<!-- Tempat diletakkannya elemen <style>, <script>, <title>, <meta>, <link> -->

</head>

<body>

<!-- Didalam body ini tempat diletakkan apa yang akan ditampilkan pada halaman HTML, seperti content wrapper/ elemen konten , sidebar / widget samping, footer / kaki dari halaman website, dan lain sebagainya -->

</body>

</html>

CSS

Lalu apa itu CSS?

Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik tampilan / desain suatu halaman HTML.

Ciri-ciri script / perintah CSS 

• Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.

Contoh: 

<head>

<style>

</style>

<head>

• Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.
• Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS  menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
• Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "header-wrapper".

Contoh kode CSS

• Background 
• CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
• Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
• Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini
• Color
• CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}
• Width
• CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};
• Height
• CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}
• Border
• CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000} 
• Dan lain sebagainya

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Saya rasa sekian saja artikel Belajar Dasar Web Design Memahami Perintah HTML & CSS ini Saya buat. Mohon maaf bila ada kesalahan penulisan, kata-kata atau penjelasan. Semoga bermanfaat, Terima Kasih, dan salam Newbie.

Perbedaan dan Cara Menggunakan Selector ID dan Class Pada HTML dan CSS

Bagi sobat yang belum mengerti perbedaan antara Selector ID dan Class maka tidak ada salahnya untuk membaca artikel ini, karena hal tersebut merupakan salah satu pengetahuan basic atau dasar dalam membangun sebuah website.

ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property "Name" yang khusus mengatur nama dari elemen tersebut.

Mau tau cara mudah research keyword? pakai Tool Pencari Keyword Blog Ini

ID

Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID. 

1. Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
2. Tidak boleh ada ID lebih dari satu
3. Tidak boleh diawali oleh angka
4. Tidak boleh mengandung special characters (~ ! @ # $ %)

Penulisan pada HTML contohnya seperti : 

<div id="header">

Pada contoh diatas menggunakan id "header". 

Penulisan style atau CSS contohnya seperti : 

#header{propertycss: valuecss;}

Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

CLASS

Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.

1. Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
2. Class bisa digunakan dilebih dari satu elemen
3. Bisa menggunakan lebih dari satu nama Class pada satu elemen
4. Tidak boleh diawali oleh angka
5. Tidak boleh mengandung special characters

Penulisan pada HTML contohnya seperti : 

<div class="sidebar sidebar1">Sidebar ke-1</div>

<div class="sidebar sidebar2">Sidebar ke-2</div>

Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen, pada contoh class="sidebar sidebar1".

Penulisan pada CSS contohnya seperti : 

.sidebar{float: left; background: white;}

.sidebar1{width: 100px}

.sidebar2{width: 200px}

Pada contoh kode CSS diatas, elemen dengan selector Class "sidebar" menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector "sidebar1" dan "sidebar2" karena kedua nya termasuk dalam grup class "sidebar". Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class "sidebar1" saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class "sidebar2".

Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Demikianlah artikel ini Saya buat, bila ada kesalahan penulisan atau penjelasan yang ada Saya mohon maaf. Semoga sedikit penjelasan ini dapat berguna, Terima Kasih. 

Belajar Membuat Menu Website / Blog (Menyamping / Melintang dengan Submenu Drop Down Bercabang) - Part 2

Halo Sobat blogger!. Pada artikel ini Saya membahas tentang pembuatan menu menyamping atau melintang (Horizontal) dengan submenu drop down bercabang.

Setelah sebelumnya membahas tentang Membuat Menu Sederhana Menyamping pada Part 1 Belajar membuat menu, artikel ini akan mengupas lebih dalam tentang pembuatan menu.

Drop down disini berarti submenu / cabang dari menu akan terlihat jatuh dari menu utamanya, dan disini kita akan membuat percabangan kedua atau lebih dari submenunya.

Langsung saja berikut ini beberapa kegiatan kita dalam belajar membuat menu tersebut.

• Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
• Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini 
• Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
• Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
• Kemudian copy kode dibawah ini kedalam file html atau kolom html pada editor.

 


<ul class='menudropdown'>

<li><a href='http://alamatyangdituju.com/'>Home</a></li>



<li><a href='#'>Artikel</a><!-- "#" ganti dengan alamat yang dituju -->

<ul class='sbmenu'>

<li><a href='#'>Sub Artikel 1</a></li>

<li><a href='#'>Sub Artikel 2</a></li>

<li><a href='#'>Sub Artikel 3</a></li>

</ul>

</li>



<li>

<a href='#'>Tutorial</a>

<ul class='sbmenu'>

<li><a href='#'>Komputer</a>

<ul class='sbmenu2'>

<li><a href='#'>Internet</a></li>

<li><a href='#'>Windows</a></li>

</ul>

</li>



<li><a href='#'>Web Design</a>

<ul class='sbmenu2'>

<li><a href='#'>HTML&CSS</a>



<ul class='sbmenu3'>

<li><a href='#'>HTML</a></li>

<li><a href='#'>CSS</a></li>

</ul>



</li>

<li><a href='#'>JQUERY</a></li>

</ul>

</li>

</ul>

</li>

</ul>

• Selanjutnya Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.

 


.menudropdown{

font-family: calibri;/*Jenis font Calibri*/

width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */

margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ 

background:#259;

float: left;

}



.menudropdown li{

display: inline-block;/* Mengatur daftar list / li melintang atau menyamping horizontal */

position:relative;

float: left;

}

.menudropdown a{

display: block;

float: left;

color: #fff;

background: #47b;

text-decoration: none;/* Menghilangkan garis bawah(Underline) <a> */

padding: 5px; /* Mengatur padding semua sisi 5px */

border:1px solid #000;

font-size:18px;

transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */

}

.menudropdown a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */

background: #fff;/* Perubahan warna background */

color: #000;/* Perubahan warna tulisan <a> */

}



.sbmenu{

margin: 0px;

padding:0px;

top: 0;/* Meletakkan posisi Submenu ke paling atas dari elemen induknya (Li sebelumnya) */

position:absolute;

visibility:hidden;/* Submenu1 tidak ditampilkan atau di hidden pada awalnya */

opacity: 0; /* Opacity mengatur transparency / tingkat ketransparanan suatu elemen, disini submenu di atur pada nilai 0 */

transition: 0.2s ease;/* Memberikan efek transisi/ efek perubahan pada saat kursor diarahkan(Hover) ataupun kembali selama 0.2 detik */

}

.menudropdown li:hover .sbmenu{ /* Hover disini memberikan pengaruh terhadap Submenu1 pada saat kursor mengarah ke <li> yang memiliki Submenu1 */

visibility: visible;/* Menampilkan Submenu1 mengubah display:none menjadi display: block */

opacity: 1;/* Opacity bernilai 1 atau penuh (Tidak transparan)*/

top: 100%;/* Meletakkan posisi Submenu ke paling bawah dari elemen induknya (Li sebelumnya) */

}

.sbmenu li{display: block;/* Membuat list submenu membujur kebawah */ 

background: blue;



}

.sbmenu a{

width: 100px;/* Mengatur lebar <a> submenu sebesar 100 pixel */

}



.sbmenu2,.sbmenu3{/* CSS properti dari Submenu2 dan Submenu3 */

margin: 0px;

padding:0px;

position:absolute;

left:100%;/* Memindahkan posisi dari Submenu 2 atau 3 ke posisi paling kanan dari submenu sebelumnya */

display: none;/* Tidak menampilkan Submenu 2 atau 3*/

}



.sbmenu li:hover .sbmenu2, .sbmenu2 li:hover .sbmenu3{/* Hover disini memberikan pengaruh terhadap Submenu2 dan Submenu3 pada saat kursor mengarah ke <li> yang memiliki Submenu 2 dan 3 */

display: block;/* Menampilkan Submenu 2 atau 3*/

}

• Save file HTML dan CSS, atau lihat pada tampilan editor maka tampilannya akan seperti dibawah ini.

• Home
• Artikel
  • Sub Artikel 1
  • Sub Artikel 2
  • Sub Artikel 3
• Tutorial
  • Komputer
    • Internet
    • Windows
  • Web Design
    • HTML&CSS
      • HTML
      • CSS
    • JQUERY

Nah, Demikianlah tutorial atau belajar membuat menu menyamping dengan Submenu Drop Down bercabang ini Saya buat, semoga ini dapat bermanfaat. Jika ada kesalahan atau kekurangan pada artikel ini Saya mohon maaf, Terima Kasih telah berkunjung.

Belajar Membuat Menu Website / Blog (Sederhana Menyamping / Melintang) - Part 1

Pada kesempatan kali ini Saya membagikan tutorial atau belajar membuat menu Website / Blog dari menu yang standar / biasa-biasa saja terlebih dahulu, hingga menu responsive. Pada artikel ini lebih tepatnya akan membahas tentang pembuatan menu sederhana menyamping atau melintang (Horizontal).

Memodifikasi menu atau navigasi ini tentunya merupakan minat pertama kebanyakan orang yang ingin mendesain web atau blognya, termasuk Saya sendiri pada awalnya mempelajari web design.

Baiklah langsung saja kita coba mempraktikkannya.

• Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.
• Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini 
• Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.
• Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.
• Kemudian copy kode dibawah ini kedalam file html atau kolom html editor.

 




<ul class='menusederhana'>


 <li>


  <a href='http://alamatyangdituju/'>


  Home


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Artikel


  </a>


 </li>


 <li>


  <a href='http://alamatyangdituju/'>


  Hubungi Kami


  </a>


 </li>


</ul>

• Save, kemudian coba buka file html tersebut, maka tampilannya akan seperti dibawah ini

• Selanjutnya kita tambahkan CSS untuk memperindah tampilan menu dan membuat daftarnya menyamping/ memanjang. Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor.

 


.menusederhana{




width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */


margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ 


background:#2af;


padding: 5px 0;/* Mengatur padding atas dan bawah 5px, padding kiri dan kanan 0 */


}




.menusederhana li{


display: inline;/* Mengatur daftar / li dari menu melintang atau menyamping */


}




.menusederhana a{


color: #fff;


padding: 5px; /* Mengatur padding semua sisi 5px */


border:1px solid #000;


transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */


}




.menusederhana a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */


background: #000;/* Perubahan warna background */


color: red;/* Perubahan warna tulisan <a> */


}

• Save CSS maka tampilannya akan seperti dibawah ini

• Home
• Artikel
• Hubungi Kami

Nah, Saya pikir sekian dulu pada artikel ini, untuk tutorial membuat menu selanjutnya klik disini, semoga tutorial ini dapat bermanfaat, lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius

Hai Sobat Blogger!, pada postingan kali ini Saya membuat tutorial yaitu cara membuat gambar membulat atau membentuk lingkaran. Langsung saja berikut ini cara membuatnya.

Contoh gambar yang tidak menggunakan style border-radius



Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="height: 100px;" />

Penjelasan

"https://www.facebook.com/images/fb_icon_325x325.png" ganti dengan link gambar yang ingin kita gunakan.

Membuat Lingkaran Penuh

Contoh gambar yang menggunakan style border-radius

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 50px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 70px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 90px; height: 180px;" />

Penjelasan

Contoh gambar diatas memiliki tinggi 100px, untuk membuat gambar berbentuk lingkaran penuh harus menggunakan ukuran border-radius setengah atau lebih dari ukuran tinggi (height) atau lebar (width). Maka penulisan style nya : "border-radius : 50px;" jika menggunakan gambar berukuran tinggi dan lebar 100px.

Membuat Lingkaran Tidak Penuh

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 40px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 60px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 80px; height: 180px;" />

Penjelasan

Gambar tidak membentuk lingkaran penuh karena ukuran border-radius tidak mencapai setengah atau lebih dari ukuran tinggi dan lebar.

Demikianlah artikel Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius ini. Semoga bermanfaat.

Tutorial Colspan & Rowspan Tabel HTML (3)

Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, pada tutorial sebelumnya Tutorial Membuat Tabel Halaman HTML (2) kita belajar membuat Tabel pada halaman HTML, kali ini kita akan kembali membahas tentang tabel, yaitu menggunakan perintah Colspan dan Rowspan.

Colspan dan Rowspan berfungsi untuk menggabungkan kolom, sedangkan Rowspan untuk menggabungkan baris.

Contoh :

1. Pertama buka kembali file index.html.

2. Sisipkan Script berikut ini diantara tag <body> dan </body>.

<!--Tabel ini tidak menggunakan Colspan dan Rowspan-->
<h2>Tabel tidak menggunakan Colspan dan Rowspan</h2>
<table border='1'>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
  <td>Baris 1 Kolom 3</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
</tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
 <td>Baris 3 Kolom 3</td>
</tr>
</table>

<br />
<br />
<!--Tabel ini menggunakan Colspan dan Rowspan-->
<h1>Tabel dengan Colspan dan Rowspan</h1>
<table border='1'>
 <tr>
 <td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
  <td rowspan='3'>Gabungan (Baris 1 Kolom 3)<br />, (Baris 2 Kolom 3)<br />, dan (Baris 3 Kolom 3)</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 </tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
</tr>
</table>

3. Save/Simpan, kemudian coba buka file index.html tersebut.

Maka Tampilan Halaman HTML Pada Browser Seperti Ini :

Penjelasan :

- Perintah Colspan atau Rowspan diletakkan diantara <td dan  > , contoh pada perintah <td colspan='2'> yang artinya elemen tabel yang akan digabungkan ada dua kolom, seperti pada contoh diatas. Elemen Baris 1 Kolom 1 digabungkan dengan Baris 1 Kolom 2.

- Pada script yang sebelumnya berbentuk : 

<tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
  <td>Baris 1 Kolom 3</td>
</tr>

setelah diberi perintah Colspan tentu elemen yang digabungkan harus dihilangkan, yaitu elemen Baris 1 Kolom 2 yang telah di gabungkan dengan Baris 1 Kolom 1 maka perubahan script menjadi seperti ini :
<tr>
    <td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
    <td>Baris 1 Kolom 3</td>
 </tr>

- Hal serupa juga dapat kita gunakan pada perintah Rowspan. 
- Perintah <br /> berfungsi untuk membuat baris baru / enter pada bahasa markup (HTML).

Demikian tutorial ini Saya buat semoga dapat berguna bagi sobat sekalian.

Tutorial Membuat Tabel Halaman HTML (2)

Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, disini kita akan coba membuat tabel yang nantinya akan ditampilkan pada halaman HTML. Pastikan sobat sudah membaca postingan Belajar HTML dan CSS (1) sebelumnya.

1. Pertama buka kembali file index.html dengan Notepad++ atau software lainnya, untuk yang belum memiliki file nya, buka postingan sebelumnya Belajar HTML dan CSS (1).

2. Sisipkan Script berikut ini diantara tag <body> dan </body>.

<table border='1'>
 <tr>

 </tr>

 <tr>

 </tr>

  <tr>

 </tr>
</table>

Penjelasan :

- Untuk membuat tabel perintah/ tag yang digunakan adalah </table> dan jangan lupa menutupnya dengan perintah </table>.

- Script "table border='1'" memiliki arti tabel yang akan kita buat menggunakan border/ bingkai berukuran 1 Pixel, penulisan ukuran pada script HTML bisa di tulis '1' dan bisa juga '1px'. Tebal border dapat diganti sesuai kebutuhan.

- 3 Pasang Tag <tr> dan </tr> memiliki arti, tabel yang akan dibuat terdiri dari 3 baris.

3. Save dokumen index.html, dan coba buka filenya pada web browser, maka tabel tidak muncul pada halaman HTML. Hal ini disebabkan kita belum meletakkan data apapun pada tabel tersebut. Lanjut, sekarang sisipkan script berikut ini diantara 3 Tag <tr> dan </tr>.

<tr>

 <td>Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
 <td>Baris 1 Kolom 3</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
</tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
 <td>Baris 3 Kolom 3</td>
</tr>

Tampilan Pada Web Browser :

Penjelasan :

- Tag <td> dan </td> memiliki arti tabel data, yaitu setiap perintah/ code yang kita tuliskan diantara Tag <td> dan </td> akan masuk kedalam elemen tabel. Untuk menambah tabel data cukup dengan menambahkan Tag <td> dan </td> sebanyak yang dibutuhkan.


Demikian tutorial membuat tabel pada halaman HTML, untuk tutorial berikutnya klik Tutorial Colspan & Rowspan Tabel HTML (3).

Pengenalan HTML & CSS, Membuat Halaman HTML (1)

Halo sobat blogger :D

Kali ini Saya mencoba membuat tutorial HTML dan CSS, sebelum mempelajari adakalanya kita mencari tahu terlebih dahulu apa itu HTML dan CSS.

Pengertian HTML

HTML(Hyper Text Markup Language) adalah salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa pemrograman web yang digunakan untuk mengatur tampilan suatu dokumen HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Membuat Halaman HTML Sederhana

Pertama-tama siapkan tool/alat tempurnya :

1. Notepad++ (Download), Notepad biasa bawaan windows juga bisa pelajari caranya disini, atau bisa juga Adobe Dreamweaver, dan masih banyak lagi tool/software lainnya yang bisa digunakan, tapi disini ane akan menggunakan Notepad++

2.Web Browser. Mozzila Firefox, Google Chrome, dll.

Setelah peralatan sudah tersedia, sekarang mari kita coba belajar membuat HTML & CSS sederhana

- Buka Notepad++ 

- Klik tab File - New

- Lalu klik tab File - Save As, pada File name tuliskan  index , pada Save as type pilih Hyper Text Markup Language file (html... . Tampilan 1

- Lalu klik tab File - New lagi, kemudian File-Save As, pada File name tuliskan style , pada Save as type pilih Cascade Style Sheets File (*.css). Tampilan 2

- Setelah file index.html dan style.css terbuat, lanjut untuk mengisi file tersebut.

- Didalam setiap perintah pada bahasa pemrograman html selalu diawali tag < > dan diakhiri oleh tag < / >.

- Isi file index html tadi dengan script berikut ini :

<!doctype html>

<html>



</html>

- Diantara perintah <html> dan </html> inilah kita akan meletakkan kode-kode/ script untuk membangun sebuah halaman HTML. Sekarang akan kita coba untuk mengisi perintah didalamnya. Masukkan script ini diantara <html> dan </html>.

<head>
<title> Belajar HTML </title>
</head>

<body>
Ini Halaman HTML
</body>

- Tag <head> dan </head> adalah tag untuk kita meletakkan title / judul dari sebuah halaman website, diantara tag ini juga kita dapat meletakkan perintah/kode CSS, jika ingin menggabungkan perintah CSS didalam halaman HTML.

- Tag <body> dan </body> adalah tag untuk kita meletakkan segala perintah yang akan ditampilkan pada halaman HTML. 

- Save dokumen HTML nya dengan menekan tombol CTRL+S atau File - Save.

- Kemudian buka file index.html yang telah kita buat tadi.

- Agar dokumen style.css (CSS) nya include atau tergabung dengan dokumen HTML, salin / copy kode berikut ini diatas kode </head> :
 <link rel="stylesheet" type="text/css" href="style.css" />

Demikian tutorial ini Saya buat semoga bermanfaat bagi sobat sekalian, untuk tutorial berikutnya klik Tutorial Membuat Tabel Halaman HTML (2).