Assalamu'alaikum Wr Wb.
Artikel ini merupakan seri kedua dari Belajar HTML BatWeber. Bagi yang belum membaca artikel pertama silahkan klik Pengenalan dan Teori Dasar HTML. Sebelum praktek, saya sarankan Anda mendownload dulu aplikasi Notepad++ dari situs resminya. Notepad++ merupakan salah satu aplikasi yang banyak digunakan untuk belajar membuat Website.
Baik, langsung saja kita ke pembahasan.
A. HEADING / JUDUL
Terdapat 6 tingkatan judul dalam HTML, dimulai dari h1 sampai h6. Coba ketik script berikut pada Notepad++ yang sudah Anda download tadi :
<html> <head> <title>Judul / 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>
Simpan dengan nama heading.html kemudian jalankan pada web browser. Berikut tampilan yang kita dapatkan.
 |
| Heading |
- Seperti yang telah kita bahas pada tutorial pertama, bahwa konten yang akan kita munculkan, semua diapit oleh tag body. Maka tag h1 sampai h6 yang kita pelajari saat ini, semua kita simpan di antara tag body.
- Setiap heading diapit oleh tag masing-masing, h1-h6. Maka format penulisannya pun akan menyesuaikan dengan tag yang mengapitnya. Di mana ukuran heading dengan tag h1 berukuran paling besar, diikuti h2, h3, dan seterusnya.
Dalam HTML, paragraf dinyatakan dengan tag p. Maka setiap paragraf yang kita buat akan diapit di antara tag pembuka <p> dan tag penutup </p>. Silahkan ketik contoh berikut :
<html> <head> <title>Paragraf</title> </head> <body> <p>
Paragraf pertama</p> <p>
Paragraf kedua</p> <p>
HTML adalah sebuah bahasa markah (markup language) yang digunakan untuk membuat halaman web</p> </body> </html>
Simpan dengan nama paragraf.html, kemudian jalankan pada web browser. Berikut tampilan yang kita dapatkan.
 |
| Paragraf |
C. LINK / TAUTAN
Link / tautan merupakan bagian pada halaman web yang menghubungkan satu halaman dengan halaman lain. Sebuah link dalam HTML diapit di antara tag pembuka <a> dan tag penutup </a>.
Ketik script berikut pada Notepad++ Anda :
<html> <head> <title>Link</title> </head> <body> <p> <a href="http://batweber.blogspot.co.id">
Klik di sini</a> untuk ke halaman utama BatWeber</p> </body> </html>
Simpan dengan nama link.html kemudian jalankan pada web browser. Maka berikut tampilan yang kita dapatkan :
 |
| Link |
Penjelasan :
- Pada contoh di atas, kita mencoba menyisipkan tautan di antara paragraf, yaitu di antara tag <p> dan </p>
- Ketika kita akan menyisipkan link / tautan pada sebuah kalimat, maka kalimat tersebut kita apit oleh tag <a> dan </a>. Dalam hal ini kita mengapit kalimat "klik di sini". Maka seluruh kalimat yang diapit (kalimat "klik di sini" ) akan berubah menjadi link yang menghubungkan ke sebuah halaman.
- Terdapat script href="http://batweber.blogspot.co.id". href adalah script untuk menambahkan halaman mana yang akan kita akses melalui link tersebut. Untuk menambahkan halaman yang kita inginkan, kita bisa tuliskan halaman yang kita maksud setelah href= dengan dilengkapi tanda kutip. Saya menggunakan contoh link batweber.blogspot.co.id yang merupakan halaman utama blog ini. Anda bebas mengganti bagian tersebut sesuai kebutuhan.
Kita bisa menyisipkan gambar pada sebuah halaman dengan menggunakan tag img.
Sebelumnya, siapkan sebuah gambar. Tempatkan dalam sebuah folder. Beri nama gambar tersebut, misal dengan nama batman.jpg
Kemudian silahkan ketik script berikut ;
<html> <head> <title>Gambar</title> </head> <body> <p><img src="batman.jpg" /></p> </body> </html>
Simpan dengan nama gambar.html. Tempatkan pada folder yang sama dengan gambar yang tadi telah kita siapkan lebih dahulu. Berikut contoh tampilan dengan sisipan gambar :
 |
| Gambar |
Penjelasan :
- Berbeda dengan tag-tag HTML pada umumnya, tag <img> tidak memerlukan tag penutup.
- Atribut src berarti rujukan lokasi gambar yang akan kita tampilkan. Dalam hal ini, contoh <img src="batman.jpg" /> batman.jpg berarti merupakan lokasi dan nama gambar yang akan kita tampilkan. Anda bisa menggantinya sesuai kebutuhan dengan syarat, nama gambar asli harus sama dengan nama gambar yang kita sisipkan dalam script.
0 komentar:
Post a Comment
Terima kasih atas kunjungannya, semoga artikel ini bermanfaat. Silahkan berikan komentar Anda.