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.

Daftar isi

<!DOCTYPE html>
<html>
<head>
<title>Judul Konten</title>
</head>
<body>
di isi dengan konten
</body>
</html>

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 :

<head>
<title>Back Ground Body</title>
</head>
<body bgcolor="Black" text="ffffff">
Isi konten body dengan bgcolor black atau juga bisa diganti dengan kode warna HTML #000000 membuat backgroundnya menjadi hitam

<center><br>Paragraf 1 menggunakan kode center yang mana membuat paragraf ini menjadi rata tengah</center>

<p align="right">Paragraf 2 menggunakan align paragraf right yang mana membuatnya menjadi rata kanan dan tidak menggunakan kode br karena menggunakan format html P</p>

</body>

1. Format Teks

  untuk Enter
 atau  untuk Bold (tulisan tebal)
 atau  untuk Italic (tulisan miring)
 untuk Underline (garis bawah)

Contoh pengeditan format Teks menggunakan kode HTML :

Cara membuat <b>Tebal</b> Tulisan
<br>Cara membuat <i>Miring</i> tulisan
<br>Cara membuat <u>Garis Bawah</u> tulisan
<br>Cara Membuat <b><i>Tebal dan Miring</i></b> tulisan
<br>Cara membuat <b><u><i>Garis Bawah, Miring dan Tebal</i></u></b> tulisan

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

 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  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">
Paragraf ini adalah hanya sebagai contoh untuk memperlihatkan
seperti apakah itu rata  kiri, rata tengah, rata kanan 
dan rata kiri kanan atau justify. Biasanya pada MS Word 
atau Doc Editor lainya tentu sudah disediakan tombol untuk 
secara langsung menggunakan format tersebut tetapi bagaimana 
jika dilakukan secara manual dengan menggunakan kode html 
left untuk kiri, center untuk tengah dan right untuk 
rata kanan. Dengan belajar dan praktik langsung maka 
akan lebih mudah mengetahuinya.
</p>

Contoh format paragraf Justify ...

<p align="justify">
Paragraf ini adalah hanya sebagai contoh untuk memperlihatkan
seperti apakah itu rata  kiri, rata tengah, rata kanan 
dan rata kiri kanan atau justify. Biasanya pada MS Word 
atau Doc Editor lainya tentu sudah disediakan tombol untuk 
secara langsung menggunakan format tersebut tetapi bagaimana 
jika dilakukan secara manual dengan menggunakan kode html 
left untuk kiri, center untuk tengah dan right untuk 
rata kanan. Dengan belajar dan praktik langsung maka 
akan lebih mudah mengetahuinya.
</p>

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 , 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.

<font face="arial" color="red" size="6">Jenis huruf Arial, warna Merah, Ukuran 6</font>

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.

<img src="https://jagad.id/wp-content/uploads/2018/06/Logo-Jagad.id_.png" border="6" alt="situs jagad" title="Website Jagad.id">

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.

Persiapan untuk membuat blog :
<ul type="circle">
  <li>Manusia</li>
<li>Komputer</li>
<li>Internet</li>
<li>Daya Listrik</li>
<li>dll</li>
  </ul>

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.

Persiapan untuk membuat blog :
<ol type="1">
  <li>Manusia</li>
<li>Komputer</li>
<li>Internet</li>
<li>Daya Listrik</li>
<li>dll</li>
  </ol>

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.

<hr size="6" color="green" width="60%" align="right" noshade>

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.