• Klik tertinggi

  • Backlink

  • Follow Fadilmuhdi's Blog on WordPress.com
  • Masukkan alamat surat elektronik Anda untuk mengikuti blog ini dan menerima pemberitahuan tentang tulisan baru melalui surat elektronik.

    Bergabunglah dengan 1 pengikut lainnya

  • fadilmuhdi

  • Statistik Blog

    • 120,458
  • Kategori

  • Arsip

  • Tulisan Teratas

Elemen dan Tag-Tag HTML

baiklah di postingan sebelumnya saya telah menjelaskan apa itu HTML, dan ini adalah lanjutan dari postingan saya kemarin, disini saya akan menjelaskan apa itu elemen,tag dan cara penggunaanya
Elemen dan Tag HTML
Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Untuk
menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML
terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).
Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan. Diantaranya:
Untitled1

 

 

 

 

 

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut
digunakan untuk mengubah default pemformatan dokumen dengan tag yang
bersangkutan.

Struktur Dasar Html

Untitled

Struktur Element

Untitlxed

Penggunaan Tag dan Atributnya
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat penulisan yaitu:
• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara normal selalu berpasangan misal ()
• Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua
merupakan tag akhir.

• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
• Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh
bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>

Tag Dasar HTML
1 HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen html. Penulisan tag seperti berikut ini :
<html> pada awal dokumen dan </html> pada akhir dokumen
2 Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar akan meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali judul dokumen – tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul dokumen
• Menjembatani hubungan antar dokumen
• Memberitahu browser untuk membuat form pencarian
• Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :
• Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut :
<title>Judul Dokumen</title>
• Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah sebagai berikut berikut :
<base href=”//www.alamat.com/direktori” />
• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai beberapa atribut :

Unctitled

3 BODY
Bagian BODY merupakan isi dari dokumen HTML. Semua informasi yang akan
ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup
</body>.
Atributnya:

11

01.latihan_01.html

zzzzgfjkjmkhgjcxcvdc

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tabel Warna

4 Memberikan Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML, kadang-kadang
ditambahkan komentar ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca
pada browser, maka harus digunakan tanda khusus, yaitu <!– dan diakhiri dengan tanda
–>.
01.latihan_0 2 .htm l
dfafd

 

 

 

 

 

5 Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.
Tag-tag tersebut diantaranya adalah :
• Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
01.latihan_0 3 .html

vvvvvv

 

 

 

 

 

 

 

 

6 Memformat Karakter
Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk
membuat sebuah dokumen menjadi menarik dan informatif.
6.1 Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai
berikut :
• <cite>, digunakan untuk menandai suatu kutipan (citation).
• <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.
• <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh
penulis.
• <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
• <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
• <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks.
• <var>, digunakan untuk menampilkan nama variabel.
• <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

6.2 Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang termasuk physical format adalah sebagai berikut :
• <b>, untuk menampilkan huruf tebal.
• <i>, untuk menampilkan huruf miring.
• <u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf  seperti huruf mesin ketik.
• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
• <big>, untuk menampilkan ukuran huruf yang lebih besar.
• <small>, untuk menampilkan ukuran huruf yang lebih kecil.
• <sub>, untuk menampilkan subscript.
• <sup>, untuk menampilkan superscript.
01.latihan_0 7 .htm l

czxczczxczcxzxczczczx6.3 Tag Font
Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadaaaaaaaaaaaaaaaaaaa

7 Menambahkan Gambar
Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar. Format gambar
yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar
yang dikenal oleh hampir semua browser adalah GIF dan JPEG. Untuk menambah
gambar digunakan tag <img />.
Tag <img /> mempunyai atribut :

<img src=lokasi_file/nama_file.ekstensi file>             : Untuk memasukkan gambar ke halaman web.

Width                    : ukuran lebar gambar

Height                   : ukuran tinggi gambar

 

Contoh script:

<html>

<head><title>Latihan 4</title>

</head>

<body>

<center><b><font size=12>

Gambar ini diubah ukurannya menjadi 200 x 400 pixel menggunakan HTML

</font></b></center><br>

<img src=image/gambar.jpg width=200 height=200>

</body></html>

8 Menambahkan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika
Link diklik maka dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan
Anchor, yaitu tag <a>. Tag <a> mempunyai atribut HREF yang digunakan sebagai link
tujuan.link
9 Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
• Tag <table> : Mendefinisikan sebuah tebel
• Tag <tr> : Mendefinisikan baris tabel
• Tag <th> : Mendefinisikan judul kolom
• Tag <td> : Mendefinisikan isi tiap kolom

<html>
<head>
<title>HTML Tabel</title>
</head>
<body>
<table border=”1″>
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
<td>Baris 1 kolom 3</td>
</tr>
<tr>
14
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
<td>Baris 2 kolom 3</td>
</tr>
</table>
</body>
</html>

01.latihan_ 1 1 .html

HTML Tabel

Kolom 1 Kolom 2 Kolom 3
Baris 1 kolom 1 Baris 1 kolom 2 Baris 1 kolom 3
Baris 2 kolom 1 Baris 2 kolom 2 Baris 2 kolom 3

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: