Home artikel Belajar Kode HTML Dasar Bagi Pemula – Teknik Komputer

Belajar Kode HTML Dasar Bagi Pemula – Teknik Komputer

Kode HTML

HTML singkatan dari Hypertext Markup Language adalah bahasa berkembang. HTML berkembang dari waktu ke waktu dengan versi terbarunya yang selalu terupdate. Hal tersebut ditujukan untuk memudahkan kegiatan sebagai contoh membangun web atau blog dan penataan konten yang lebih cantik, efektif dan efisien.

Belajar HTML Teknik Komputer

Kali ini akan dibahas mengenai Dasar kode HTML serta kode lainnya untuk digunakan sebagai sarana praktek sederhana membangun konten menggunakan HTML. Langsung saja ke pembahasanya mulai dari struktur membangun HTML pertama kali.

Pastikan dalam pembuatan konten yang paling utama yaitu dengan memberikan kode <html>...isi konten...</html>. Pada dasarnya tanpa kode itu konten masih tetap bisa diakses.

KODE HTML

Berikut ini adalah kode dasar HTML yang wajib diketahui :

a. Head

Head digunakan untuk judul konten HTML dalam format <head><title>...</title></head> . Selain itu pada head juga digunakan untuk menambahkan meta yang digunakan dalam pengelolaan blog serta biasanya terdapat javascript yang dibutuhkan pada suatu website, pembahasan lebih lanjut akan dituliskan pada artikel berikutnya.

b. Body

Di sini merupakan letak isi konten pada HTML yang mana bisa di isi dengan tulisan teks, gambar, video dan berbagai konten lainya yang diperlukan. Untuk dasar pembelajara HTML ini yang akan dibahas sebagai praktik pada atribut body hanya pengeditan backgroundnya saja yang mana dapat menggunakan Warna ataupun gambar sebagai background. Untuk warna menggunakan bahasa inggris seperti contoh red untuk merah, yellow untuk kuning, tetapi jika anda paham kode warna HTML bisa menggunakanya juga seperti contoh #000000 untuk hitam dan #ffffff untuk kode warna HTML putih.

Contoh Kode HTML Body :

See the Pen OwWzoQ by Aziu (@aziu) on CodePen.34097

1. Format Teks

  • <br> untuk Enter
  • <b></b>Β atau <strong></strong> untuk BoldΒ (tulisan tebal)
  • <i></i> atau <em></em> untuk ItalicΒ (tulisan miring)
  • <u></u> untuk Underline (garis bawah)
Contoh pengeditan format Teks menggunakan kode HTML :

See the Pen bjqePg by Aziu (@aziu) on CodePen.34097

Setelah mengetahui kode HTML untuk menambah format text seperti Bold, Italic dan Underline yang sangat umum dan sering digunakan dalam pembuatan konten artikel. Selanjutnya memahami cara melakukan pengeditan format Paragraf dengan kode HTML.

2. Format Paragraf

<p></p> yang bisanya ditambah dengan pengaturan format paragraf yaitu align=”left|center|right|justify . Left untuk format paragraf rata kiri, center untuk rata tengah yang sebenarnya bisa kode <p align="center"></p> digantikan dengan kode <center></center>, right untuk rata kanan dan Justify rata kanan dan kiri untuk merapikan tulisan agar lebih tertata.

Contoh format paragraf rata Kanan <p align="right">...</p>

See the Pen ajJZgQ by Aziu (@aziu) on CodePen.34097

Contoh format paragraf JustifyΒ <p align="justify">...</p>

See the Pen GBWqVp by Aziu (@aziu) on CodePen.34097

Anda bisa mengubah format “justify” dengan Left, Center atau Right sesuai kebutuhan format paragraf.

3. Font (Format Huruf/Tulisan)

Font menjadi format yang cukup penting dalam kode HTML, karena sering digunakan sehingga kode ini harus dipahami dan dihafal untuk bisa lancar membuat konten menggunakan HTML. Kode utamanya yaitu <font></font>, dengan nama atribusi berupa :

  • face = jenis huruf A
  • color = warna huruf A
  • size = ukuran huruf A

Sebagai contoh kode font bisa dituliskan sebagai berikut ini.

See the Pen gjgvXB by Aziu (@aziu) on CodePen.34097

4. Gambar

Untuk memasukan gambar dalam format HTML yaitu dengan menggunakan kode <img src="Lokasi Gambar/Nama File">. Sebagai contoh jika ingin memasukan gambar (Offline) dari file yang berada di komputer maka menggunakan alamat direktori file gambar tersebut, tentunya jika file HTML dipindah ke komputer lain yang tidak ada file gambar tersebut maka tidak akan muncul di komputer lain. Memasukan gambar secara online yaitu gambar yang berada di Internet maka harus memiliki koneksi Internet agar gambar bisa munul yaitu dengan menggunakan url gambarnya.

See the Pen bjqexe by Aziu (@aziu) on CodePen.34097

5. List

a. Bulleted

Bulleted yaitu list yang tidak menggunakan urutan Nomor dan Abjad. Pada list ini menggunakan kode HTML <ul type="Disc|Circle|Square"></ul> yang mana Disc untuk lingkaran penuh hitam, Circle lingkaran putih dengan garis luar Hitam dan Square yaitu list menggunakan simbol kotak.

See the Pen gjmMEa by Aziu (@aziu) on CodePen.34097

b. Number

Dituliskan pada Dokumen editor Number list tetapi tidak hanya mengacu pada penggunaan list nomor saja, tetapi juga bisa menggunakan abjad urutan huruf Alfabet dan juga angka Romawi. Kode HTML list yaitu <ol type="1|a|A|i|I"></ol> yang mana 1 berarti urut sesuai penomoran, a untuk urutan alfabet huruf kecil, A huruf besar, i untuk angka Romawi kecil dan I untuk angka romawi besar.

See the Pen ZjeOwr by Aziu (@aziu) on CodePen.34097

6. Haris Horisontal

Walaupun tidak sering digunakan dalam membuat artikel, tetapi beberapa blogger sering juga menggunakan kode iniΒ  untuk membuat konten yang dibuat lebih terlihat rapi. <hr size="6" color="yellow" width="60%" align="right" noshade> Penggunaanya cukup mudah, biasanya digunakan untuk membatasi antara konten satu dengan yang lainnya pada satu halaman yang sama.

See the Pen OwpXYN by Aziu (@aziu) on CodePen.34097

Nah itulah beberapa kode dasar HTML yang wajib diketahui untuk bisa membuat konten sederhana. Kode kode tersebut sangat sering digunakan dalam membuat artikel pada blog atau Website.

5/5 (2)

Please rate this