Belajar Kode Dasar HTML untuk Pemula

Galihdesign - Belajar Dasar HTML untuk Pemula - Maasuk ke tahap selanjutnya dalam pembelajara kode html, disini saya akan memberikan beberapa kode html dasar. Jika teman-teman belum paham terhadap kode html berikut ini, tenang saja karena setelah postingan ini akan saya jelaskan hingga teman-teman paham.

HTML Documents

Perlu teman-teman pahami, HTML Document terdiri dari beberapa bagian seperti tampak pada gambar berikut ini,

HTML Document selalu diawali dengan kode document type <!DOCTYPE html> .

Diikuti kode <head>isi</head> yanag berisi tag meta dan css.

Lalu ada kode <body>isi</body> yang berisi konten yang akan ditampilkan pada browser misalnya Header, artikel, link, dan lain sebagainya.

Membuat Heading

Kode heading pada html terdiri dari :

Perlu teman-teman pahami, semakin kecil nomor heading, semakin penting headiing tersebut dianggap oleh browser. Contoh Penulisan Heading :

<h1>Ini adalah Heading 1</h1>
<h2>Ini adalah Heading 2</h2>
<h3>Ini adalah Heading 3</h3>
<h4>Ini adalah Heading 4</h4>
<h5>Ini adalah Heading 5</h5>
<h6>Ini adalah Heading 6</h6>

Sekarang tugas teman-teman adalah menulis kode heading diatas menggunakan aplikasi Editor. lalu simpan.

Kemudian buka file html yang sudah kamu simpan. Buka menggunakan Browser Chrome atau mozilla.

Membuat Paragraf

Untuk membuat paragraf , teman-teman harus menggunakan kode html <p> . Contoh penggunaannya seperti berikut ini :

<p>Ini adalah sebuah Paragraf</p>
<p>Ini adalah Paragraf lainnya</p>

Membuat Link

Untuk membuat sebuah link, teman-teman harus menggunakan kode html <a>. Contoh penggunaannya seperti berikut ini :

<a href='http://www.galihdesign.com'>Ini adalah sebuah link</a>

Tujuan kemana Link akan pergi setelah di klik ditempatkan dalam atribut href. Teman-teman akan belajar tentang atribut link pada postingan yang lain.

Memasang Gambar

Untuk menampilkan sebuah gambar (image), gunakan kode html <img>. Contoh penggunaanya seperti berikut ini :

<img src='http://www.galihdesign.com/gambar1.jpg' alt='galihdesign'  width='50px' height='30px'/>

Setelah tag img, kamu perlu memberikan url sumber gambar ditempatkan. Disini sebagai contoh, alamat url gambar yang saya ambil adalah dari www.galihdesign.com/gambar1.jpg
Kamu bisa mengganti url gambar sesuai yang kamu mau.
Lalu ada atribut width, yakni untuk menentukan lebar gambar.
Dan juga atribut height, yakni untuk menentukan tinggi gambar.

Membuat Tombol

Untuk membuat sebuah tombol. teman-teman harus menggunakan kode html <button>. Contoh :

<button>Klik disini</button>

Membuat List

Untuk membuat list (daftar), teman-teman harus menggunakan kode <ul> (unordered) atau bisa menggunakan <ol> (ordered), diikut oleh kode <li>. Contoh :

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Sirup</li>
<ul>

Cobalah kode diatas!

Selanjutnya : Belajar HTML - Element