o ya gan, langsung saja. Saya akan memberikan beberapa contoh tag-tag dalam HTML.
Sebelumnya membahas fungsinya tag sedikit gan.
Fungsi dari Tag itu digunakan untuk menentukan tingkah laku web browser.
Tag dinyatakan dengan tanda lebih kecil "<" (dibagian awal) dan tanda lebih besar ">" (dibagian akhir).
Beberapa tag-tag dalam HTML :
- Tag untuk format HTML
- Tag Heading
- Tag Paragraf
- Tag Memformat Dokumen
- Tag Break
- Tag Garis Pemisah Horisontal
- Tag Font
- Tag Link
- Tag Membuat Gambar
- Tag Warna Background
- Tag List
1. Tag Untuk Format HTML
Secara umum isi dokumen HTML terdiri dari head dan body.
Langsung saja gan, ini contoh scriptnya :
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Saya Belajar HTML
</body>
</html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Saya Belajar HTML
</body>
</html>
- Didalam dokumen HTML terdapat <head></head> itu merupakan kepala dari sebuah dokumen.
- Dan didalam head terdapat <title><title> itu mrupakan judul dari sebuah dokumen HTML.
- Dan ada juga <body></body> yang fungsinya untuk menuliskan isi yang anda inginkan.
2. Tag Untuk Heading
Tag untuk heading biasa difungsikan sebagai penulisan judul pada dokumen HTML.Langsung saja, saya akan memberikan contoh script dari Tag Heading.
Dalam penulisan heading terdapat heading 1 sampai heading 6. Dimulai dari heading 1 yang paling besar sampai heading 6 yang paling kecil.
Penulisan heading berupa <h1>, <h2>, <h3>, ... , <h6> (penulisan diawal) dan penulisan heading berupa </h1>, </h2>, </h3>, ..., </h6> (penulisan di akhir atau penutup).
<html>
<head>
<title>Contoh Heading</title>
</head>
<body>
<h1 align = "center">Heading1 : HTML</h1>
<h2 align = "center">Heading2 : HTML</h2>
<h3 align = "center">Heading3 : HTML</h3>
<h4 align = "center">Heading4 : HTML</h4>
<h5 align = "center">Heading5 : HTML</h5>
<h6 align = "center">Heading6 : HTML</h6>
</body>
</html>
<head>
<title>Contoh Heading</title>
</head>
<body>
<h1 align = "center">Heading1 : HTML</h1>
<h2 align = "center">Heading2 : HTML</h2>
<h3 align = "center">Heading3 : HTML</h3>
<h4 align = "center">Heading4 : HTML</h4>
<h5 align = "center">Heading5 : HTML</h5>
<h6 align = "center">Heading6 : HTML</h6>
</body>
</html>
Dan dibawah ini merupakan gambar outputan dari script diatas.
3. Tag Untuk Paragaraf
Tag untuk paragraf sama halnya menulis seperti paragraf biasanya.Untuk peunlisan tag paragraf dimulai dari <p> dan berakhir </p>.
Dan untuk perataan paragraf sama seperti dengan apa yang ada pada dalam Ms. Office Word (rata kanan "right", rata kiri "left", dan rata tengah "center").
Langsung saja, dibawah ini saya akan memberikan contoh script dari tag paragraf.
<html>
<head>
<title>Contoh Paragraf</title>
</head>
<body>
<p align = "right">Belajar Untuk Membuat Paragraf</p>
<p align = "left">Belajar Untuk Membuat Paragraf</p>
<p align = "center">Belajar Untuk Membuat Paragraf</p>
</body>
</html>
<head>
<title>Contoh Paragraf</title>
</head>
<body>
<p align = "right">Belajar Untuk Membuat Paragraf</p>
<p align = "left">Belajar Untuk Membuat Paragraf</p>
<p align = "center">Belajar Untuk Membuat Paragraf</p>
</body>
</html>
Dan gambar dibawah ini merupakan outputan dari script diatas.
4. Tag Untuk Memformat Dokumen
Tag untuk memformat dokumen ini sama halnya seperti mengatur model teks pada Micosoft Office Word.Contohnya seperti bold untuk mempertebal huruf atau teks. Model Bold diawali dengan tanda <b> dan diakhiri dengan tanda </b>.
Italic untuk huruf atau teks miring. Model Italic diawali dengan tanda <i> dan diakhiri dengan tanda </i>.
Superscripted untuk huruf atau teks seperti pangkat. Model Superscripted diawali dengan tanda <sup> dan diakhiri dengan tanda </sup>.
Subscripted kebalikan dari Superscripted. Untuk Superscipted seperti pangkat diatas, sedangkan Subscripted untuk pangkat dibawah. Model Subscripted diawali dengan tanda <sub> dan diakhiri dengan tanda </sub>.
Struckthrough untuk huruf atau teks seperti hurufnya dicoret. Model Struckthrough diawali dengan tanda <del> dan diakhiri dengan tanda </del>.
Langsung saja gan, saya akan memberikan contoh scriptnya dibawah.
<html>
<head>
<title>Contoh Memformat Dokumen</title>
</head>
<body>
<p>Contoh<b> Untuk Huruf Tebal</b></p>
<p>Contoh<i> Untuk Huruf Miring</i></p>
<p>Contoh<sup> Untuk Huruf Pangkat diatas</sup></p>
<p>Contoh<sub> Untuk Huruf Pangkat dibawah</sub></p>
<p>Contoh<del> Untuk Huruf Seperti dicoret</del></p>
</body>
</html>
<head>
<title>Contoh Memformat Dokumen</title>
</head>
<body>
<p>Contoh<b> Untuk Huruf Tebal</b></p>
<p>Contoh<i> Untuk Huruf Miring</i></p>
<p>Contoh<sup> Untuk Huruf Pangkat diatas</sup></p>
<p>Contoh<sub> Untuk Huruf Pangkat dibawah</sub></p>
<p>Contoh<del> Untuk Huruf Seperti dicoret</del></p>
</body>
</html>
Dan gambar dibawah ini merupakan outputan dari script diatas.
5. Tag Break
Tag untuk Break ini fungsinya sama seperti tombol Enter yaitu untuk pindah baris dibawahnya.Tanda dari tag break adalah <br/>.
Langsung saja ya gan ini scriptnya.
<html>
<head>
<title>Coba Break</title>
</head>
<body>
Nama Saya Budi<br/>
Saya 2 Barsaudara<br/>
Cita-cita saya ingin menjadi programmer<br/>
</body>
</html>
<head>
<title>Coba Break</title>
</head>
<body>
Nama Saya Budi<br/>
Saya 2 Barsaudara<br/>
Cita-cita saya ingin menjadi programmer<br/>
</body>
</html>
Dan ini langsung saja gambar outputannya.
6. Tag Garis Pemisah Horisontal
Tag garis pemisah horisontal sama halnya dengan garis pemisah.Tag ini ditandai dengan tanda <hr/> pada akhir kita menulis kata-kata pada script yang kita tulis.
Langsung saja, dibawah ini contoh scriptnya :
<html>
<head>
<title>Tag Garis Pemisah Horisontal</title>
</head>
<body>
<p>Nama Saya Budi</p><hr/>
<p>Ibu Saya Ibu Budi</p><hr/>
<p>Bapak Saya Bapak Budi</p>
</body>
</html>
Dan dibawah ini merupakan gambar outputan dari script diatas :<head>
<title>Tag Garis Pemisah Horisontal</title>
</head>
<body>
<p>Nama Saya Budi</p><hr/>
<p>Ibu Saya Ibu Budi</p><hr/>
<p>Bapak Saya Bapak Budi</p>
</body>
</html>
7. Tag Font
Tag Font merupakan suatu format untuk tulisan. Mulai dari ukuran(size), model(face),dan warna(color).
Tag font ditandai dengan tanda <font> pada awal script dan </font> pada akhir script.
Didalam script font kita dapat menuliskan ukuran, model dan color.
Contoh Penulisannya :
<font face = "nama untuk pemodelan tulisan" size = "ukuran tulisan" color = "warna tulisan">Apa Yang Anda Pikirkan ?</font>
Lanhsung saja, dibawah ini merupakan contoh script dari tag font :
<html>
<head>
<title>Tag Font</title>
</head>
<body>
<font>Nama Saya Budi</font><br/>
<font size = "7px">Nama Saya Budi</font><br/>
<font face = "algerian">Nama Saya Budi</font><br/>
<font color = "red">Nama Saya Budi</font><br/>
<font size = "7px" face = "algerian" color = "red">Nama Saya Budi</font>
</body>
</html>
Dan dibawah ini merupakan gambar outputan dari script diatas.<head>
<title>Tag Font</title>
</head>
<body>
<font>Nama Saya Budi</font><br/>
<font size = "7px">Nama Saya Budi</font><br/>
<font face = "algerian">Nama Saya Budi</font><br/>
<font color = "red">Nama Saya Budi</font><br/>
<font size = "7px" face = "algerian" color = "red">Nama Saya Budi</font>
</body>
</html>
8. Tag Link
Tag Link merupakan tag yang berfungsi untuk memindahkan halaman web satu ke halaman web yang lain.Tag Link ditandai dengan tanda <a href = "nama_link">...</link>.
Tag Link merupakan tulisan yang bergaris bawah.
nama_link merupakan alamat html ataupun alamat web.
Dan Link ini berfungsi untuk adanya keterkaitan antara halaman web satu dengan halaman web yang lain.
Dan juga html satu dengan html yang lain. Jika foldernya berupa html, html satu dan html yang lainnnya harus bertempat pada folder yang sama.
Lansung saja dibawah ini merupakan contoh scriptnya :
HTML 1.
<html>
<head>
<title>Tag Link HTML 1</title>
<head>
<body>
<h2><a href = "menuju_html2.html">Menuju Ke HTML 2</a></h2>
</body>
</html>
Dan dibawah ini merupakan hasil gambar dari script html 1.<head>
<title>Tag Link HTML 1</title>
<head>
<body>
<h2><a href = "menuju_html2.html">Menuju Ke HTML 2</a></h2>
</body>
</html>
Dan script dalam HTML 2 merupakan hasil dari link script HTML 1.
Script HTML 2 bisa ditulis script yang lain.
HTML 2
<html>
<head>
<title>Tag Link HTML 2</title>
</head>
<body>
<p>Hasil dari HTML 1</p>
</body>
</html>
Dan dibawah ini merupakan hasil gambar dari script html 2.<head>
<title>Tag Link HTML 2</title>
</head>
<body>
<p>Hasil dari HTML 1</p>
</body>
</html>
9. Tag Membuat Gambar
Tag membuat gambar ini berfungsi untuk menampilkan gambar pada halaman web.Gambar yang bisa ditampilkan berupa gambar yang berformat jpg, png, gif.
Tag membuat gambar ditandai dengan tanda atau script <img src = "nama gambar dan formatnya" width = "ukuran panjang gambar" height = "ukuran tinggi gambar">.
Dan gambar yang ditampilkan harus satu folder dengan script htmlnya.
Langsung saja, dibawah ini contoh scriptnya :
<html>
<head>
<title>Membuat Gambar</title>
</head>
<body>
<p>Ini gambar yang saya buat</p><br/>
<img src = "gambar.jpg" width = "100" height = "100">
</body>
</html>
Dan ini gambar dari script diatas.<head>
<title>Membuat Gambar</title>
</head>
<body>
<p>Ini gambar yang saya buat</p><br/>
<img src = "gambar.jpg" width = "100" height = "100">
</body>
</html>
10. Tag Warna Background
Tag warna background ini berfungsi untuk mengganti warna background sesuka anda.Script untuk tag background ini dituliskan bersamaan script <body> pada awal dan ditambahi BGcolor untuk cuma mengganti warna bankground dan Background untuk mengganti background dengan gambar.
Contohnya <body BGcolor = "nama warna gambar"> dan <body background = "nama gambar untuk mengganti background">
Langsung saja, ini scriptnya :
<html>
<head>
<title>Warna Background</title>
</head>
<body BGcolor = blue>
Ini merupakan warna untuk backgroundnya ...
</body>
</html>
Dan ini gambar dari script diatas :<head>
<title>Warna Background</title>
</head>
<body BGcolor = blue>
Ini merupakan warna untuk backgroundnya ...
</body>
</html>
11. Tag List
List dalam HTML ada dua :a. Unordered List
b. Ordered List
Unordered List
Unordered list adalah list yang menggunakan bullet sebagai tanda point.
Unordered list ditandai dengan tanda <ul> pada awal dan tanda </ul> pada akhir.
Dan didalam tanda <ul> ada tanda <li></li>. Dan didalam tanda <li></li> terdapat tulisan yang ingin kita tulis.
Langsung saja, dibawah ini merupakan contoh scriptnya :
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Contoh Unordered List</p>
<ul>
<li>apples</li>
<li>bananas</li>
<li>grapefruit</li>
</ul>
</body>
</html>
Dan dibawah ini gambar dari script diatas.<head>
<title>Unordered List</title>
</head>
<body>
<p>Contoh Unordered List</p>
<ul>
<li>apples</li>
<li>bananas</li>
<li>grapefruit</li>
</ul>
</body>
</html>
Oredered List
Ordered list adalah list yang menggunakan angka untuk tanda point.
Penulisan ordered list sama halnya dengan penulisan unordered list,
tapi yang membedakan cuma penulisan <ul></ul> diganti dengan <ol></ol>.
Ini contoh scriptnya :
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Contoh Ordered List</p>
<ol>
<li>oranges</li>
<li>peaches</li>
<li>grapes</li>
</ol>
</body>
</html>
Dan ini gambar dari script diatas. <head>
<title>Ordered List</title>
</head>
<body>
<p>Contoh Ordered List</p>
<ol>
<li>oranges</li>
<li>peaches</li>
<li>grapes</li>
</ol>
</body>
</html>
Selamat mencoba ya gan. Saya minta maaf jika ada kata-kata yang tidak sopan dalam blog saya.
Saya hanya menyampaikan apa yang sudah saya alami sebelumnya.
Sekali lagi, jika ada kata-kata yang salah, tidak sopan, atau pun artikel yang saya tulis tidak lengkap, saya minta maaf sebesar-besarnya.
0 komentar:
Posting Komentar