Penggunaan Tag HTML | mahanani

Penggunaan Tag HTML

Baca Juga :

Penggunaan Tag

· Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.

· Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1>

· Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1>

Atribut Tag

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

Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.

Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

Tag HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML.

Contoh – Listing :

<html>

........................

</html>

Tag Head

Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.

Contoh – Listing:

<head>

<title>Belajar Web Design</title>

</head>

Title

Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.

Contoh – Listing:

<title>Belajar Web Design HTML</title>

Body

Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.

Contoh – Listing :

<html>

<head>

<title>Belajar Web Design</title>

</head>

<body>

ini adalah section HTML yang ditampilkan di browser

</body>

</html>

Paragraf

Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>

Contoh – Listing:

<html>

<head>

<title>Tag Paragraf</title>

</head>

<body>

<p>berikut ini adalah paragraf 1</p>

<p>berikut ini adalah paragraf 2</p>

<p>berikut ini adalah paragraf 3</p>

</body>

</html>

Contoh - Listing : paragraf2.html

<html>

<head>

<title>Paragraf</title>

</head>

<body>

<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik

</p>

<p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p>

</body>

</html>

clip_image002

Gambar  Contoh hasil paragraf2.html

Line Break

Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.

Contoh – Listing :

<html>

<head>

<title>Ganti Baris</title>

<head>

<body>

ini adalah baris ke 1<br>

ini adalah baris ke 2<br>

ini adalah baris ke 3<br>

ini adalah baris ke 4<br>

ini adalah baris ke 5<br>

</body>

</html>

Heading

Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.

Contoh – Listing  :

<html>

<head><title>Heading</title></head>

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

clip_image003

Gambar  Contoh heading

Garis Pembatas

Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>

Atribut

Keterangan

Align

Menentukan letak garis : center,left,right

Color

Menentukan warna garis

Size

Menentukan ukuran garis

Width

Menentukan tebal garis

Contoh – Listing :

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<p align=”center”>Paragraf pertama</p>

<hr align=”center” color=”#0000FF” size=”3” width=”90%”>

<p align=”center”>Paragraf keduapertama</p>

</body>

</html>

clip_image004

Gambar Garis Pembatas

Komentar

Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:

<!-- sebagai awal dan tag --> sebagai akhir komentar.

Contoh – Listing :

<html>

<head>

<title>Horizontal Rule</title>

</head>

<body>

<!-- komentar ni tidak akan ditampilkan di browser -->

<p>Tulisan ini akan ditampilkan di browser</p>

</body>

</html>

Toolbar Dreamweaver untuk dasar HTML

Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar untuk dasar HTML.

clip_image006

Gambar  Toolbar tab Text

Keterangan - tab Text :

· h1 : heading 1

· h2 : heading 2

· h3 : heading 3

· br : Line Break

· p (dibalik) : Paragraf

clip_image008

Gambar Toolbar tab Comment

Keterangan – tab common : terdapat toolbar untuk tag komentar

ditulis dengan judul : Penggunaan Tag HTML

Poskan Komentar

Silahkan berikan komentar anda

Forum Multimedia Edukasi www.formulasi.or.id

Kategori