HTML dasar yang pemula wajib tahu.

Daftar isi

Elemen HTML dasar.

1. 1.Heading (kepala halaman)
2. 2.Paragraph
3. 3.Blockquote (kutipan)
4. 4.Text (teks)
5. 5.HTML format teks
6. 6.Font (jenis gaya teks)
7. 7.Link (tautan)
8. 8.Image (gambar)
9. 9.List (daftar)
   9.1 Ordered List (ol)

   9.2 Unordered List (ul)
10. 10.Tabel

Elemen HTML dasar.

Elemen dasar HTML ini sebenarnya cenderung mirip dengan materi pelajaran disekolah tentang karangan atau surat dalam pelajaran Bahasa Indonesia. Karena erat kaitannya dengan tata cara menyusun karangan / surat resmi. Termasuk pemformatan teksnya.

Dan pada dasarnya HTML adalah cara lain dari menulis yang umumnya menggunakan alat tulis dan media kertas, HTML juga bisa dikatakan menulis namun menggunakan komputer / laptop dengan media internet (virtual).

Apabila dengan alat tulis, kita bisa dengan mudah mengatur tata letak teks, tulisan kalimat, paragraf, ukuran huruf dsb. Maka dimedia internet kita mengatur semua itu menggunakan kode. Dan kode tersebut adalah HTML.

Dibawah ini beberapa elemen HTML dasar yang paling umum digunakan dalam menulis sebuah artikel.

Pengertian HTML, baca di halaman : Apa itu HTML?

Daftar elemen HTML untuk awal belajar pemula / non developer.

1.Heading (kepala halaman)

Kepala halaman dalam HTML disebut head / heading / header.

Kepala halaman umumnya berkaitan dengan judul atau dalam HTML disebut title

Elemen title dibagi menjadi 6 karena dalam kerangka artikel umumnya juga terbagi dalam beberapa bagian, seperti Judul utama untuk kepala halaman. Sub judul untuk menjelaskan pokok bahasan / topik utama, lalu judul yang lebih kecil untuk bagian isi dst.

No	Penulisan elemen	Tampilan
1	<h1>Title h1</h1>	Title h1
2	<h2>Title h2</h2>	Title h2
3	<h3>Title h3</h3>	Title h3
4	<h4>Title h4</h4>	Title h4
5	<h5>Title h5</h5>	Title h5
6	<h6>Title h6</h6>	Title h6

Catatan:
Perlu diketahui bahwa elemen HTML selalu dibuka dengan kode <x> dan ditutup dengan kode </x>
Kode pembuka dan penutup ini biasa disebut sebagai tag.
x adalah inisial atau nama elemen. Misal:
-<p> berarti tag paragraf untuk elemen paragraf,
-<table> berarti tag tabel untuk elemen tabel, dsb.

2.Paragraph

Paragraf merupakan sekumpulan kalimat. Pengaturan pada paragraf ini hanya sebatas tata letak agar kalimat-kalimat tersebut lebih mudah dibaca, tidak membingungkan pembacanya.

Penulisan elemen Tampilan
<p style='text-align:left'> Paragraf alinea kiri </p> Ini contoh Paragraf alinea kiri
<p style='text-align:center'> Paragraf alinea tengah </p> Ini contoh Paragraf alinea tengah
<p style='text-align:right'> Paragraf alinea kanan </p> Ini contoh Paragraf alinea kanan

3.Blockquote (kutipan)

Elemen blockquote atau kutipan ini digunakan untuk menandai bahwa satu atau beberapa kalimat dikutip dari buku atau sumber lain.
Tag Elemen blockquote : <blockquote>isi kutipan</blockquote>

Misal, dibawah ini paragraf dengan kutipan lirik lagu didalamnya:

Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.

Tanah airku Indonesia, negeri elok yang amat ku cinta.

Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.Ini teks paragraf contoh.

4.Text (teks)

Pada HTML teks, paragraf dan blockquote juga termasuk elemen teks. Selain paragraf, elemen teks lain contohnya sbb:

No	Penulisan elemen	Tampilan
1	<span>teks span</span>	teks span
2	<code>teks kode</code>	teks kode
3	<caption>teks caption</caption>	teks caption

5.HTML format teks

No	Penulisan elemen	Tampilan
1	<b>teks bold tebal</b>	teks bold tebal
2	<i>teks italic miring</i>	teks italic miring
3	<u>teks undeline</u>	teks underline
4	<s>teks s</s>	teks s
5	<q>teks</q>	teks quote kutip
7	teks<sup>superscript</sup>	tekssuperscript
8	teks<sub>subscript</sub>	tekssubscript
9	<kbd>teks keyboard</kbd>	teks keyboard
10	<del>teks delete</del>	teks delete
11	<em>teks em</em>	teks em
12	<label>teks label</label>	teks label

6.Font (jenis gaya teks)

Font adalah gaya tampilan dari teks.

• Pengelompokan jenis gaya tampilan teks disebut font-family.
• font-family BUKAN / TIDAK termasuk elemen HTML melainkan suatu gaya atau style dari elemen HTML khususnya elemen teks.
• Contoh font-family bisa dilihat di :
  -halaman Font web ringan.
  -halaman Font coding.

Contoh penggunaan font-family pada elemen HTML :

<p style='font-family: Georgia,serif'>
Ini adalah paragraf dengan font-family Arial
</p>

Tampilan :

Ini adalah paragraf dengan font-family Arial

<p style='font-family: Brush Script,cursive'>
Ini adalah paragraf dengan font-family Arial
</p>

Tampilan :

Ini adalah paragraf dengan font-family Brush Script

<p style='font-family: Garamond,serif'>
Ini adalah paragraf dengan font-family Arial
</p>

Tampilan :

Ini adalah paragraf dengan font-family Garamond

7.Link (tautan)

Link atau tautan adalah elemen HTML yang bisa mengarahkan pembaca ke bagiah halaman lain atau ke halaman lain.
Misal, klik teks dibawah ini:
"Beranda" link ini akan mengarah halaman lain.
"Tabel" link ini akan mengarah ke bagian bawah halaman ini.

Penulisan elemen	Tampilan
<a href='https://www.facebook.com' target='_blank'> Facebook </a>	Facebook

8.Image (gambar)

Penulisan elemen	Tampilan
<img alt='' src=''/>

Baca selengkapnya tentang Menambahkan gambar dengan kode HTML

9.List (daftar)

Elemen list atau daftar dalam HTML terdiri dari 2 elemen yaitu list dan list-item (li)
Sedangkan elemen list sendiri dibagi menjadi 2 jenis yaitu:

9.1 Ordered List (ol)

Daftar berurutan.

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>dst..</li>
</ol>

Tampilan :

1. item 1
2. item 2
3. item 3
4. dst..

9.2 Unordered List (ul)

Daftar tak berurutan.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>dst..</li>
</ul>

Tampilan :

• item 1
• item 2
• item 3
• dst..

10.Tabel

<table>
 <tbody>
 <tr><th>head 1</th><th>head 2</th></tr>
  <tr><td>item 1</td><td>item a</td></tr>
  <tr><td>item 2</td><td>item b</td></tr>
  <tr><td>item 3</td><td>item c</td></tr>
  <tr><td>dst..</td><td>dst..</td></tr>
 </tbody>
</table>

Tampilan :

head 1	head 2
item 1	item a
item 2	item b
item 3	item c
dst..	dst..

⇐ Sebelumnya

Selanjutnya ⇒