Januari 13, 2014

Ayo Belajar HTML

Add caption

Cara menampilkan text, link dan gambar di dokumen HTML. Sering kali di halaman web selalu disertai text, link dan gambar dengan tujuan untuk mempermudah sipembaca memahami isi dari web yang akan di tampilkan pada halaman website sipemilik. Dengan menampilkan tulisan maupun gambar di halaman web, konten website akan lebih terlihat elegan dan sipembaca pun lebih jelas memahami isi dari website kita.
HTML merupakan dokumen sederhana, berfungsi untuk menampilkan text dan juga halaman gambar, untuk menulis di dokumen HTML biasanya ada paragraf dan baris baru. Akan lebih jelasnya berikut ini contoh meletakkan text di dokumen HTML. Seperti biasa jalankan terlebih dahulu text editornya bisa menggunakan Notepad, Dreamweaver, Notepad++ maupun yang lain sesuaikan dengan selera sahabat saja.

Lihat detail kodenya untuk mengetahui cara membuat dokumen HTML seperti ini :


<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Text Di Dokumen HTML</title>
</head>
<body>
<hr /> <!-- ini adalah garis horizontal -->
<h1>Paragraf Pertama</h1>
<p>Membuat paragraf.</p><br />
<hr /> <!-- ini adalah garis horizontal -->


<h1>Text Rata Tengah</h1>
<p align="center">Membuat text rata tengah.</p><br />
<hr /> <!-- ini adalah garis horizontal -->


<h1>Text Rata Kanan</h1>
<p align="right">Membuat text rata kanan.</p><br />
<hr /> <!-- ini adalah garis horizontal -->


<h1>Text Rata Kiri</h1>
<p align="left">Me.</p><br />
<hr /> <!-- ini adalah garis horizontal -->
</body>
</html>

Lalu simpan kode diatas dengan format .htm atau .html. Sedikit penjelasan HTML mempunyai file perluasan (extension) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi sahabat boleh menyimpan file dokumen HTML dengan extension ".htm" atau ".html". Sebagai contoh simpan saja dengan nama text.html Hasilnya seperti ini ketika kita jalankan di Web Browser. Sahabat bisa melihat tiap paragraf memiliki alignment yang berbeda-beda, di tengah, kanan dan kiri.
Cara menampilkan text, link dan gambar di dokumen HTML

Cara menampilkan text, link dan gambar di dokumen HTML

Penjelasan mengenai kode diatas, ada tag seperti ini  merupakan kode untuk memberikan komentar di dokumen HTML, penulisan komentar tidak di eksekusi dan tidak akan terlihat di browser. Komentar di gunakan untuk memberi catatan atau keterangan tentang kode program. Kode penulisan komentar : 

Menampilkan Link Pada Dokumen HTML
Sebuah halaman web bisa menavigasi ke halaman web lain dengan cara memberikan link. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian di ikuti dengan href sebagai alamat tujuan dari link tersebut. Di HTML, untuk membuat link menggunakan tag <a href="url">Text</a>. Berikut contoh untuk membuat link di dokumen HTML.


<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Link</title>
</head>
<body>
<h2>Contoh Pembuatan Link Ke Halaman Web </h2>
<a href="http://www.google.com">....</a>
<hr />
<h2>Contoh Pembuatan Link Ke Email</h2>
<a href="mailto:email@gmail.com">Klik Untuk mengirim email</a>
<hr />
<h2>....</h2>
<a href="URL kamu" target="_blank">...</a>
<hr />
</body>
</html>

Simpan dan buka di browser, hasilnya terlihat seperti berikut ini :
Cara menampilkan text, link dan gambar di dokumen HTML

Menampilkan Gambar Pada Dokumen HTML
Untuk menampilkan gambar ke dalam halaman web dapat di lakukan dengan menggunakan kode <img src="lokasi_gambar" alt="textalternatif"> . Atribut src di gunakan untuk menunjuk referensi lokasi gambar yang di gunakan. Pastikan gambar tersebut berada pada folder yang sama dengan dokumen HTML. Dan harus tahu nama file gambarnya misalkan nama file gambarnya google.jpg. Akan lebih jelasnya lihat contoh kode berikut :


<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Gambar</title>
</head>
<body>
<h2>Tampilkan Gambar</h2>
<img src="google.jpg" alt="google" width="200" height="100">
</body>
</html>

Simpan dan buka di browser, hasilnya terlihat seperti berikut ini :
Cara menampilkan text, link dan gambar di dokumen HTML

alt ini berguna untuk menampilkan text alternatif dan bisa juga untuk meningkatkan aspek SEO dari website yang bersangkutan. Sedangkan height dan width di gunakan untuk menentukan tinggi dan lebar gambar.
Semoga bisa dipahami ya sahabat. Bagaimana