Belajar HTML – Pengenalan Dasar HTML

Topik kali ini request dari pembaca setia blog dsolusido yang ingin belajar HTML. Kali ini saya akan memberikan posting mengenai pengenalan dasar HTML. Bagi anda yang belum mengetahui apa itu HTML, HTML digunakan untuk membuat layout pada website. Ada berbagai macam cara agar desain menjadi lebih bagus. Untuk desain tentunya desainer lebih ahli dari saya. Mari kita mulai belajar HTML.

Aplikasi Editor HTML

Sebelum kita bisa lebih mudah belajar HTML anda harus mempersiapkan editor yang enak dipakai. Sebenarnya jika anda pakai notepad pada Windows bisa saja tetapi akan lebih susah karena tidak mendukung untuk pemrograman. Saya menyarankan 2 jenis editor yaitu:

  • Notepad++
  • Macromedia Dreamweaver

Dreamweaver lebih bagus daripada Notepad++ karena ada autocorrect untuk syntax sehingga memudahkan anda. Tetapi itu saya kembalikan kepada anda mau memilih mana yang lebih suka.

Tag Dasar HTML

Bagi pemula anda harus memahami format penulisan yang biasanya disebut “Syntax” oleh programmer. Untuk awal dari suatu HTML adalah seperti ini

<html>
<body>
Disini anda bisa menuliskan coding dari HTML
</body>
</html>

Ada berbagai macam tag yang dapat digunakan dan saya tidak bisa memberikan semuanya karena sangat banyak. Untuk belajar praktek langsung saya rekomendasikan w3school. Mengapa? Karena disitu anda bisa praktek dan melihat hasilnya langsung.

Berikut ini tag dasar yang sering dipakai

Tag Keterangan
<p> Untuk paragraph
<h1> Untuk heading (tulisan besar + bold)
<h2> Untuk heading yang kedua dengan ukuran lebih kecil dari H1
<b> Format font bold
<i> Format font italic/miring
<u> Format font underline
<table> Untuk membuat table
<tr> Untuk membuat baris pada tabel
<td> Untuk membuat kolom pada tabel
<div> Untuk membuat layer
<a> Untuk memberikan link
<font> Untuk format font
<ul> Untuk membuat bullet seperti di Microsoft Word
<ol> Untuk membuat numbering
<il> Untuk membuat list di dalam bullet atau numbering
<br> Untuk turun baris
<img> Untuk menampilkan gambar

Contoh aplikasi dari tag-tag sederhana itu:

Code Output
<b>Ini adalah blog Digital Solusindo</b> Ini adalah blog Digital Solusindo
<a href=”dsolusindo.com”>Toko Digital Solusindo</a> Toko Digital Solusindo
<ul>

<li>test 1</li>

<li>test 2</li>

</ul>

·         Test 1

·         Test 2

Untuk memperjelas penggunaan tag-tag dasar ini saya mengupload link contoh file HTML yang dapat anda download agar lebih mudah untuk dimengerti – Download.

Format Layout

Untuk saat ini cara layout sudah sangat mudah dan bagus-bagus. Versi HTML yang hadir saat ini adalah HTML 5 yang mana sudah sangat bagus dibandingkan dengan dulu. Cara format layout sederhana ada 2 yaitu dengan menggunakan table atau layer. Jika menggunakan table maka anda harus menggunakan tag <table> sedangkan jika menggunakan layer anda menggunakan <div>

Untuk memahami cara menggunakan layout saya memberikan contoh pada file html berikut ini

  • Contoh format layout dengan tabel – Download
  • Contoh format layout dengan layer – Download

Menggunakan CSS

Bagi anda pemula mungkin akan memberikan format langsung pada file HTML anda satu per satu tetapi bagi anda yang sudah mengerti atau profesional anda pasti sudah tahu menggunakan CSS sebagai style pada layout anda. Di bawah ini adalah contoh penulisan style pada file CSS.

body {
background-color: #d0e4fe;
}

h1 {
color: orange;
text-align: center;
}

p {
font-family: “Times New Roman”;
font-size: 20px;
}

Tag yang dipakai adalah <style> di dalam file HTML tepatnya pada bagian atas sendiri dan mengisi dengan style yang anda inginkan. Untuk belajar CSS mendetail akan kita bahas tersendiri pada posting lainnya karena akan sangat panjang.

Selain penulisan coding CSS di dalam file HTML, anda dapat menuliskan di file dengan extention CSS di luar file HTML dan melakukan link pada setiap file HTML. Berikut ini adalah contohnya.

<html>
<head>
<link rel=stylesheet type=text/css href=”coba.css” >
</head>
<body>
</body>
</html>

Dalam coding di atas kita mempunyai file namanya “coba.css” kemudian file itu akan dipakai untuk memberikan style pada setiap file HTML anda. Jadi anda lebih mudah karena tidak perlu menuliskan satu per satu style yang akan anda pakai.

Penggunaan class pada CSS sangat membantu pula contohnya adalah sebagai berikut ini:

<style type=”text/css”>
.merah { color:khaki; font-style:italic; }
.ungu { color: purple; }
.hijau { color: olive; }
h1.merah { color:blue; }
.merah { text-decoration:underline; }
span {color:green;}
</style>

Di atas adalah contoh coding pada file CSS, .merah adalah class dengan nama merah. Cara menggunakan class merah adalah:

<h1 class=”merah”>The Proton</h1>

Saya menyediakan berbagai macam file CSS sehingga anda dapat lebih memahami cara menggunakannya. Download

Kesimpulan

Dengan tag dasar, layout dan style anda sudah dapat membuat layout sederhana pada HTML dan anda sudah dapat membuat desain HTML yang bagus. Jika anda ingin belajar mengenai HTML 5 anda bisa request ebook pada saya pada komentar di bawah posting ini nanti akan saya emailkan ebook yang saya punya.

Semoga posting ini berguna bagi anda yang sedang ingin belajar HTML, jika ada penjelasan saya yang tidak jelas bisa langsung menanyakan pada saya pada bagian komentar juga di bawah ini. Selamat belajar.

Baca artikel yang lain mengenai Memilih Power Supply Yang Bagus