Belajar HTML Dasar Untuk Pemula

belajar html dasar untuk pemula

Halo sobat Belajar Koding , sebelumnya kalian sudah mengerti belum apa itu html ? Kalau sudah kita lanjut ke pembahasan belajar html dasar untuk pemula ya. Ada beberapa point yang akan kita bahas di postingan ini, yaitu :

  1. Persiapan koding HTML
  2. Pengenalan Tag HTML
  3. Struktur Kode HTML
  4. Mengenal Atribut HTML

Persiapan Koding HTML

  1. Web Browser

    Web browser adalah perangkat utama yang akan kita gunakan untuk menampilkan halaman web yang pada dasarnya terbuat dari HTML dan CSS. Browser yang biasa digunakan untuk koding HTML yaitu Google Chrome, Mozile Firefox, Internet Explorer, Safari dan lain lain. Kalo saya lebih suka pakai Google Chrome karena udah terbiasa dan juga debugging nya menurut saya lebih enak menggunakan Google Chrome.

    Setiap browser memiliki perbedaan dalam hal menampilkan halaman web dan fitur-fitur yang didukung dalam HTML dan CSS. Boleh jadi halaman web yang anda buat ditampilkan benar pada salah satu browser namun acak-acakan pada browser lainnya. Untuk itu perlu beberapa browser yang terinstall dalam komputer anda untuk menguji penampilan website yang dibuat.

  2. Text Editor

    Untuk koding HTML anda butuh yang nama nya text editor. Kalo ada pengguna windows biasa nya default text editor nya itu Notepad. Tapi kalo menggunakan notepad tidak ada warna nya, sama hal nya dengan editor bawaan di ubuntu yaitu Gedit. Kalo mau yang ada warna nya bisa pakai Notepad++, kalo di ubuntu bisa pakai Geany.

    Ada juga editor yang udah canggih seperti Adobe Dreamever, tapi karena anda masih dalam tahap belajar jadi saya tidak menyarankan untuk menggunakan nya. Selain Adobe Dreamever, bisa juga kita menggunakan Netbeans.

    Karena admin menggunakan sistem operasi linux, jadi pakai text editor nya geany. Berikut tampilan text editor geany :

    tampilan geany

     

Pengenalan Tag HTML

Tag HTML ditandai dengan “<” dan ditutup dengan “>”. Berikut anatomi tag HTML yang benar :

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki dari dokumen HTML. Dalam setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

Contoh nya kita ingin menebalkan sebuah kalimat, kita bisa menggunakan tag html yaitu <b></b> seperti ini :

Struktur Kode HTML

Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Misal disini saya buat file nama nya halo.html seperti yang nampak di gambar tampilan geany di atas.

Perlu di ingat, untuk bisa menjalankan file HTML, file nya harus ber-ekstensi .html supaya tag tag html nya bisa terbaca. Admin mengingatkan untuk pengguna windows supaya takut nya anda sudah mengganti ekstensi nya ke .html tetapi masih tidak jalan kodingan anda, bisa jadi tipe file nya masih Text Document. Kalau seperti itu anda harus uncentang dulu konfig yang kalo gak salah nama nya “hide extension” supaya ekstensi yang asli ketahuan.

Berikut contoh struktur kodingan html :

<!DOCTYPE HTML>

Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.

<html> … </html>

Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.

<head> … </head>

Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.

<title> … </title>

Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.

<body> … </body>

Tag body merupakan tag pembuka dari badan dokumen HTML, jadi apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini.

Mengenal Atribut HTML

Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.

Misalkan kita ingin membuat sebuah paragraf dengan align justify, maka kita harus menggunakan tag <p> dan didalam nya kita kasih atribut align lalu nilai nya justify seperti berikut :

Contoh menggunakan lebih dari satu atribut, misalkan kita ingin memberikan warna merah pada kalimat yang ada di ada di paragraf tadi. Berikut kodingan nya :

Dengan menambahkan atribut style kita bisa merubah warna tulisan yang ada didalam paragraf tadi.

Mungkin sampai disini tutorial belajar html dasar untuk pemula nya. Jika ada yang belum dimengerti bisa ditanyakan di kolom komentar. Terimakasih ^_^ #salamKoding

3 thoughts on “Belajar HTML Dasar Untuk Pemula

Leave a Reply

Your email address will not be published. Required fields are marked *