Belajar HTML Untuk Pemula Part 3: Kode Dasar HTML

Belajar HTML Untuk Pemula Part 3 Kode Dasar HTML

Belajar HTML Untuk Pemula: Kode Dasar HTML - Setelah mengetahui pengertian HTML dan Text Editor pada artikel sebelumnya, sekarang kita masuk pada tahap memahami Kode Dasar HTML.

Kode dasar HTML ini sangat penting untuk dipahami, sehingga pada saat kamu mencoba menuliskan kode HTML, kamu bisa mengerti fungsi dari setiap kode HTML.

Kode dasar HTML ini jugalah yang menciptakan tampilan dasar pada sebuah website yang akan kamu buat. 

Kode Dasar HTML

Ada beberapa kode dasar HTML yang perlu kamu ketahui diantaranya adalah kode dasar dokumen HTML, membuat heading, membuat paragraf, membuat hyperlink, memasukan gambar, membuat tombol dan membuat list pada HTML. Untuk cara membuatnya, berikut adalah caranya:

Bagian 1: HTML Document

Dokumen HTML adalah sebuah file yang berisi kode-kode HTML dan file tersebut diakhiri dengan ekstensi .html atau .htm.

Dokumen HTML harus dimulai dengan deklarasi <! DOCTYPE html>.

Dokumen HTML itu sendiri dimulai dengan <html> dan ditutup dengan </html>.

Bagian yang terlihat dari dokumen HTML adalah diantara <body> dan </body>. Disinilah tempat untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, link dan lainnya.

Contoh Kode :

<!DOCTYPE html>
<html>
<body>

<h1>Websiteku</h1>
<p>Hallo Dunia, Salam Kenal ^_^</p>

</body>
</html> 


Hasilnya :
 
Hasil Kodingan HTML Sederhana
Dalam bahasa pemrograman, ada yang namanya Tag Pembuka dan Tag penutup.

Salah satunya adalah tag pembuka <html> dan tag penutup </html>. Ciri-ciri tag penutup adalah selalu diawali dengan tanda / (Garis Miring) setelah tanda kurung <.

Bagian 2: HTML Heading

Dalam HTML, terdapat tag heading. Tag heading biasanya digunakan untuk membuat judul pada halaman web.

Setiap Judul pada HTML didefinisikan dengan tag dengan tinggkat <h1> sampai <h6>. Semakin besar angkanya, semakin kecil judul yang akan ditampilkan.


Contoh Kode :

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> 


Hasilnya :

Heading HTML

Bagian 3: HTML Paragraph

Pada bagian ini kita akan membuat sebuah paragraph atau tulisan yang akan kita tampilkan di halaman web yang akan kita buat.

Paragraf HTML didefinisikan dengan tag <p> dan ditutup dengan </p>.


Contoh Kode :
<p>Paragraph 1: Aku sedang belajar bahasa pemrograman HTML nih</p>
<p>Paragraph 2: Yeey aku udah bisa dong bikin paragraph</p>
<p>Paragraph 3: Yuk berkunjung ke www.wendyandriyan.info</p> 

Hasilnya :

Membuat Paragraph Di HTML

Bagian 4: HTML Link

Link adalah sebuah tulisan yang diberikan sebuah fungsi, dimana ketika tulisan itu di klik maka akan mengarahkan kita ke halaman lain.

HTML Link didefinisikan dengan tag <a href="[link]"> dan ditutup dengan tag </a>.


Contoh Kode :

 <a href="https://www.wendyandriyan.info/">Ini Adalah Link Yang Akan Mengarah Ke Blog Wendy</a> 

Hasilnya :
 
Membuat Link Di HTML


Bagian 5: HTML Images

Dalam sebuah website, tidak hanya ada tulisan saja. Tetapi ada juga tambahan seperti gambar.

Memasukan gambar di HTML didefinisikan dengan tag <img> dan ditutup dengan tag </img>.

Ada juga File sumber (src), teks alternatif (alt), lebar (width), dan tinggi (height) disediakan sebagai atribut.

Contoh Kode :



 <img src="gambarhtml.jpg" alt="Gambar HTML" width="300" height="200"> 


Hasilnya :

Memasukan Gambar di HTML

Bagian 6: HTML Button

Ketika membuat website dengan HTML, kita bisa membuat sebuah tombol. Tombol ini bisa dijadikan banyak fungsi, salah satunya biasa digunakan bersamaan dengan Link.

Jadi, ketika tombol itu di klik maka langsung mengarah ke halaman lain.

Tombol pada HTML biasanya didefinisikan tag <button> dan di tutup dengan tag </button>.

Contoh Kode : 

<button>Klik Tombol Disini Untuk Berkunjung www.wendyandriyan.info</button> 

Hasilnya :

Membuat Tombol Di HTML

Bagian 7: HTML List

List adalah fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah.

List HTML didefinisikan dengan tag <ul> (bullet list) atau <ol> (List bernomor), diikuti oleh tag <li> (daftar item).


Contoh Kode :

<!DOCTYPE html>
<html>
<body>

<h2>Hoby:</h2>

<ul>
  <li>Rebahan</li>
  <li>Makan</li>
  <li>Tidur</li>
</ul>  

<h2>Makanan Kesukaan:</h2>

<ol>
  <li>Mie Rebus</li>
  <li>Nasi Goreng</li>
  <li>Yang Enak-Enak</li>
</ol> 

</body>
</html>



Hasilnya :

Membuat List Di HTML

Nah itu dia beberapa kode dasar HTML yang digunakan dalam membuat tampilan atau halaman website. Kamu bisa mencobanya sendiri dan menggabungkan beberapa kode dasar HTML sekereatif kamu sebagai bahan untuk latihan.

Panduan Belajar HTML Lainnya

Belajar HTML Untuk Pemula Part 1: Pengertian HTML
Belajar HTML Untuk Pemula Part 2: Text Editor HTML
Belajar HTML Untuk Pemula Part 3: Kode Dasar HTML
Belajar HTML Untuk Pemula Part 4: Mengenal Element HTML
Belajar HTML Untuk Pemula Part 5: Pengertian Atribut HTML 
Belajar HTML Untuk Pemula Part 6: Heading Dalam HTML 

Tidak ada komentar untuk "Belajar HTML Untuk Pemula Part 3: Kode Dasar HTML"

Berlangganan via Email