DASAR DASAR HTML


Elemen-elemen h1,h2,h3,h4,h5,h6 adalah elemen headings ( h = heading ).
Dimana h1 adalah adalah tingkat pertama dan teks dari h1 adalah yg terbesar diikuti oleh h2 hingga h6 yang merupakan elemen headings yang terakhir.
Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading
Browser secara otomatis menambahkan satu bagian kosong/empty space pada setiap heading.

Kode dari tampilan headings di atas :
Codingku HTML Editori
<html> 
<body> 
<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6> 
</body> 
</html>
Elemen <Title> digunakan untuk menyatakan judul sebuah halaman web. Posisinya berada di dalam elemen <head>.
<html>
<head>
<title>Judul Halaman websiteku</title>
</head>
<body>
Isi dari halaman websiteku
</body>
</html>
Sebelum kita melangkah lebih jauh kami akan mengenalkan kepada anda mengenai konsep dari HTML komentar/comment.
Meskipun 'komentar' sifatnya adalah opsional namun ada kalanya pemberian 'komentar' akan sangat membantu anda.
Komentar adalah bagian dari kode HTML, tujuannya adalah untuk menjelaskan bagian-bagian dari kode.
Contoh syntax dari sebuah komentar HTML :
<!-- isi dari komentar HTML -->
Komentar HTML selalu dimulai dengan <!> dan diakhiri dengan >> , hal ini memberitahukan kepada browser darimana sebuah komentar dimulai dan diakhiri.
Contoh penggunaannya : 
Codingku HTML Editori
<html> 
<body> 
<!-- ini adalah heading Bab A --> 
<h3> Jakarta </h3> 
</body> 
</html>
Tag <p> mendefinisikan sebuah paragraf.
Dengan menggunakan tag ini, maka browser secara otomatis akan memasukkan garis/space kosong di bagian atas dan bawah paragraf.
Codingku HTML Editori
<p>Paragraf pertamaku</p> 
<p>Paragraf keduaku</p> 
<p>Paragraf ketigaku</p>
HTML memiliki banyak tag-tag lain yang berfungsi untuk mengubah sebuah tulisan.
Tulisan ini bold 

Tulisan ini italic

Tulisan ini strike

Tulisan ini strong

Tulisan ini emphasized

Tulisan ini code/computer

Tulisan ini subscript dan superscript
source code contoh di atas :
Codingku HTML Editori
<p><b>Tulisan ini bold</b></p> 
<p><i>Tulisan ini italic</i></p> 
<p><strike>Tulisan ini strike</strike></p> 
<p><strong>Tulisan ini strong</strong></p> 
<p><em>Tulisan ini emphasized</em></p> 
<p><code>Tulisan ini code/computer</code></p> 
<p>Tulisan ini <sub>subscript</sub> dan <sup>superscript</sup></p>
Anak Pak Raden :
  • Budi
  • Wati
  • Joni
Urutan anak Pak Raden :
  1. Budi
  2. Wati
  3. Joni

Dengan HTML <ul> "unordered list" dan <ol> "ordered list" anda bisa membuat daftar seperti di atas.

Berikut adalah kode dari tampilan di atas :
Codingku HTML Editori
<p>Anak Pak Raden :</p> 
<ul> 
<li>Budi</li> 
<li>Wati</li> 
<li>Joni</li> 
</ul> 
<p>Urutan anak Pak Raden :</p> 
<ol> 
<li>Budi</li> 
<li>Wati</li> 
<li>Joni</li> 
</ol>
HTML Attribute
  • Elemen HTML bisa memiliki atribut di dalamnya.
  • Atribut memberikan informasi tambahan terhadap sebuah elemen.
  • Atribut selalu ditempatkan di tag pembuka sebuah elemen.
  • Atribut berisi nama dan nilai di dalamnya mis: color="red".
Contoh Attribute

Ok, tanpa basa-basi lebih jauh lagi kita lihat contoh berikut :
Paragraf 1
Paragraf 2
Paragraf 3
Seperti anda lihat, teks paragraf di atas memiliki posisi yang berbeda-beda, hal itu terjadi karena penambahan attribut ke dalam tag <p>
Codingku HTML Editori
<p align="right">Paragraf 1</p> 
<p align="center">Paragraf 2</p> 
<p align="left">Paragraf 3</p>

Postingan populer dari blog ini

Komponen Utama Komputer

Hitung nilai mahasiswa pascal

Turbo pascal hitung nilai mahasiswa