HTML Tutorials : Tag-Tag Dasar Kode HTML
HTML
Tutorials : Tag-Tag Dasar Kode HTML
Pada tutorial
sebelumnya kita telah membahas mengenai HTML Tutorials : Editor Kode
HTML. Pada tutorial kali ini, kita akan membahas mengenai HTML Tutorials : Tag-Tag Dasar
Kode HTML.
------------------------------------------------------------------------------------------------
Struktur Tag pada Dokumen HTML
Dasar dari
struktur tag pada dokumen HTML
diantaranya adalah :
·
<!DOCTYPE html > harus mengawali dokumen HTML.
·
<html>…</html> tag pembuka dan penutup
dokumen HTML.
·
<head>…<.head> informasi penting halaman
website.
·
<body>…</body> menampilkan konten di
dalamnya pada web browser.
Di dalam tag
body ini ada berbagai tag dasar yang harus kita kuasai dulu untuk membuat
sebuah halaman website.
------------------------------------------------------------------------------------------------
Tag Heading
Tag Heading adalah tag khusus yang
digunakan untuk membuat sebuah judul suatu artikel dalam HTML. Tag heading
dibagi menjadi 6 (enam) jenis menurut ukuran dan tingkat kepentingannya.
Penulisan tag heading dapat ditulis dengan <h1>
hingga <h6>,
dimana tag h1 memiliki ukuran terbesar dan tag h6 memiliki ukuran terkecil. Berikut
ini contoh sederhana penggunaan tag heading.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar HTML</title>
</head>
<body>
<h1>Heading dengan Tag <h1></h1>
<h2>Heading dengan Tag <h2></h2>
<h6>Heading dengan Tag <h6></h6>
</body>
</html>
|
------------------------------------------------------------------------------------------------
Tag Paragraf
Tag Paragraf digunakan untuk membuat
sebuah paragraf. Dalam HTML, tag paragraf dituliskan dengan pembuka <p> dan penutup </p>. Berikut ini contoh kode HTML
mengenai pemggunaan dasar tag ini.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar</title>
</head>
<body>
<h1>Dasar Tag Paragraf <p></h1>
<p>Belajar tag dasar paragraf HTML di mahaamesha.com</p>
</body>
</html>
|
------------------------------------------------------------------------------------------------
Tag Link
Tag Link merupakan tag yang paling identik dengan fungsi HTML,
yaitu hypertext. Tag link dituliskan
dengan <a>…</a>
yang mana a sendiri memiliki singkatan anchor.
Tag <a> setidaknya harus digunakan bersama atribut href. Atribut ini berisi
sumber dari link. Berikut ini contoh dasar dari penggunaan tag link.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar</title>
</head>
<body>
<h1>Penggunaan Tag Dasar Link</h1>
<p>Test this link by click this</p>
<a href="http://mahaamesha.blogspot.com">Click
me</a>
</body>
</html>
|
------------------------------------------------------------------------------------------------
Tag Image
Tag Image adalah tag khusus yang disediakan HTML dan digunakan
untuk memunculkan gambar. Berbeda dengan sebelumnya, tag ini berdiri sendiri.
Artinya, tag ini terdiri dari pembuka tag saja, tanpa penutup tag. Penulisannya
ialah dengan <img>.
Untuk menampilkan gambar, tag ini membutuhkan atribut src. Berikut ini contoh
sederhana penggunaan tag img dengan atribut src.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar</title>
</head>
<body>
<h1>Penggunaan Tag Dasar Image</h1>
<p>Ketik sumber gambar berikut dan akan muncul gambar barbel
saya.</p>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSc0V14OHByXea4S04q6NiqWc5uNcHAzF2ZHgPv7hB4Ux949M3L">
</body>
</html>
|
Jika gambar
barbell tidak muncul, mungkin Anda sedang offline. Sebab, gambar ini saya
uploud di internet dan Anda membutuhkan koneksi internet untuk dapat
memunculkan gambar yang bersumber dari internet. mahaamesha.com
------------------------------------------------------------------------------------------------
Tag List
Tag List adalah tag yang digunakan untuk membuat sebuah daftar
atau list. Tag ini penting untuk memberi kesan penting terhadap suatu tulisan. Penulisan
tag list dalam HTML adalah dengan menuliskan <li>. Tag ini tidak dapat
bekerja sendiri tanpa tag <ul> atau <ol>. Berikut contoh
sederhana penggunaan tag ini.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar</title>
</head>
<body>
<h1>Penggunaan Tag Dasar List</h1>
<p>Pada tutorial HTML kali ini kita belajar tag-tag dasar HTML
:</p>
<ol>
<li>Struktur Tag
pada Dokumen HTML,</li>
<li>Tag
Heading,</li>
<li>Tag
Paragraf,</li>
<li>Tag Link,
dll</li>
</ol>
</body>
</html>
|
------------------------------------------------------------------------------------------------
Tag Tabel
Tag Tabel adalah tag untuk membuat sebuah tabel dalam HTML. Tag
ini dituliskan dengan <table>…</table>. Tag ini harus
disertai kedua temannya, yaitu tag <tr> dan <td>. Berikut ini
contoh sederhana dari penggunaan tag ini.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html>
<head>
<title>Ma Haamesha | Tag Dasar</title>
</head>
<body>
<h1>Penggunaan Tag Dasar Tabel</h1>
<p>Berikut tabel koordinat baris dan kolom</p>
<table border="1">
<tr>
<td>Baris 1,
Kolom 1</td>
<td>Baris 1,
Kolom 2</td>
<td>Baris 1,
Kolom 3</td>
</tr>
<tr>
<td>Baris 2,
Kolom 1</td>
<td>Baris 2,
Kolom 2</td>
<td>Baris 2,
Kolom 3</td>
</tr>
</table>
</body>
</html>
|
------------------------------------------------------------------------------------------------
Setelah kita
menguasai tag-tag dasar dari kode HTML, pada tutorial selanjutnya kita akan
membahas mengenai HTML Tutorials : Apa itu Elements.
Created by mahaamesha :}
Comments
Post a Comment