Belajar HTML Part 3: Kode Dasar HTML

Belajar HTML Part 3: Kode Dasar HTML

Selamat datang di artikel belajar HTML dasar untuk pemula bagian 3 yaitu Kode Dasar HTML.

Pada bagian ini kamu akan berkenalan dengan kode-kode dasar HTML yang paling umum digunakan dalam pemrograman web. 

Setelah mengetahui pengertian HTML dan Text Editor HTML pada artikel sebelumnya, sekarang kita masuk ke tahap koding nih supaya lebih semangat belajarnya HTMLnya.

Kode dasar HTML ini sangat penting untuk dipahami, agar kamu bisa belajar cara mengetik kode pemrograman HTML dengan lancar dan 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 :

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 :

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 :

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 :

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 :

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 : 

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 :


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.

Leave a Reply