Belajar Web Programming

Kamis, 18 Agustus 2016

Membuat Link Gambar

02.24

Gambar memang multifungsi. Tidak cuma sebagai media untuk mempercantik dan menghias halaman serta menambah ilustrasi di halaman. Namun juga bisa dipakai untuk membuat link. Link yang berupa gambar akan lebih menarik pengunjung. Terutama jika gambarnya menarik dan senada dengan informasi yang akan ditampilkan pada gambar.

Tekniknya sebenarnya simpel. Hanya merupakan gabungan dari tag <a> dan di tengahnya ada tag <img> untuk menampilkan gambar. Jadinya gambar menjadi link. Formatnya seperti berikut:

<a href="url_dari_link"><img src="file_gambar"></a>

Contohnya kode berikut:

<html>
<head>
<title>link dengan gambar</title>
</head>
<body>
<h1> klik pada gambar untuk menuju halaman lain </h1>
<a href="http://detikfood.com"><img src="makanan.jpg" />
</a>
</body>
</html>

Berikut ini tampilannya saat dilihat di browser

Selasa, 16 Agustus 2016

Memberikan Teks Alternatif

18.03

Di awal-awal kemunculan bahasa HTML, tidak semua browser mampu menampilkan gambar. Karena itu bahasa HTML mengakomodasi teks alternatif yang memungkinkan browser yang tidak dapat menampilkan gambar tersebut untuk menampilkan teks.

Sekarang walaupun hampir semua browser mampu menampilkan gambar, namun teks alternatif ini juga masih tetap berguna. Karena diperlukan dalam kampanye SEO (search engine optimization). Alt ini biasanya diisi dengan kata-kata kunci berkaitan dengan gambar yang ditampilkan.

<img src="rumah.jpg" alt="gambar rumah idamanku, rumah, properti">

Jika di browser dibuka, maka tulisan alternatif ini terlihat di kotak gambar bila seandainya gambar gagal dibuka. Dan jika pointer mouse sedang berada di atas (hover) pada gambar.
2

Mengatur Alignment Teks dan Gambar

05.54

Dalam prakteknya, gambar sering kali disandingkan dengan teks. Untuk itu Anda perlu mengatur bagaimana alignment teks terhadap gambar. Caranya dengan menambahkan tag <align> di dalam tag <img>. Format kodenya seperti berikut:

<img src="nama_file_gambar" align=top|middle|bottom>

Maksud tulisan top|middle|bottom adalah Anda bisa menentukan apakah alignment akan top (atas), middle (tengah) atau bottom (bawah). Langsung saja, berikut ini contoh alignment teks. Beserta tampilannya jika dilihat di browser.

<html>
<head>
<title>Aligning Text dan Gambar</title>
</head>
<body>
<h1> Contoh Alignment Teks dan Gambar </h1>
<p>
<img src="site_logo.jpg" align=top />Logo
</p>
<p>
<img src="site_logo.jpg" align=middle />Logo Site
</p>
<p>
<img src="site_logo.jpg" align=bottom />Logo Site.com
</p>
</body>
</html>

Hasilnya akan seperti ini

Senin, 15 Agustus 2016

Membuat Link Email Dalam HTML

04.16

Sering kali Anda perlu untuk membuat link yang memungkinkan user dapat langsung mengklik untuk mengirimkan email ke account email Anda. Ini bisa juga langsung diakomodasi oleh HTML. Namun hati-hati, teknik ini juga bisa mendorong robot dari spammer untuk menuju ke website Anda. Karena itu jangan gunakan kecuali jika terpaksa

Untuk membuat link langsung ke email, format kode yang dapat Anda gunakan adalah seperti berikut:

<a href="mailto:alamatemail@provider.com">Klik untuk kirim email ke saya</A>

Implementasinya tinggal Anda mengklik link tersebut, maka terbuka software mail client Anda, seperti Outlook atau Thunderbird dan kemudian Anda bisa mengirim email.

Minggu, 14 Agustus 2016

Membuat Link Lanjutan Dalam HTML

05.27

Sebenarnya pemformatan link ada beberapa varisai. Pertama adalah tipe link internal. Ini merupakan tipe link di mana halaman yang mengandung link dan halaman yang dituju terletak pada satu domain dan letaknya bisa direlatifkan.

Misalnya Anda punya 2 halaman:

http://www.domain-anda.co.cc/index.html

dan Anda ingin membuat link dari halaman index.html di atas untuk menuju ke:

http://www.domain-anda.co.cc/bukutamu.html

Dari URL-nya, kedua halaman tersebut terletak di satu folder. Ini memungkinkan Anda membuat email dengan menentukan alamat relatif dari halaman kedua melalui halaman pertama. Halaman kedua bukutamu.html tersebut dapat dispesifikasikan lokasinya dengan menggunakan nama file-nya saja, karena lokasinya satu folder. Jadi, Anda bisa menggunakan kode berikut:

Ayo isi buku tamu di <a href="bukutamu.html">Buku tamu gw</A>

Jenis lain adalah link internal. Untuk membuat link internal, Anda harus membuat dahulu anchor di dalam website Anda. Tempat yang di-anchor ini nanti dapat diacu dengan link. Jadi, anchor fungsinya adalah “menandai tempat” sehingga bisa diacu oleh link.

Misalnya Anda ingin memberi nama di bagian tertentu di webpage dengan nama “iklan”. Maka Anda membuat nama anchor seperti berikut:

<a name="iklan">Kotak iklan</a>

Maka link ke kotak iklan tersebut dapat dibuat dari halaman yang sama (misalnya dalam bentuk daftar isi halaman tersebut), dengan menggunakan kode HTML seperti berikut:

<a href="#iklan">Kotak Iklan</a>

Jika link itu dibuat dari halaman lain, Anda bisa menggunakan kode HTML seperti berikut:

<a href="http://www.domainanda.co.cc/file_tertentu.htm#iklan">Lihat kotak iklannya di sini</a>

Membuat Aneka Macam List Dalam HTML

05.10

Sering kali di sebuah website, diperlukan pembuatan daftar atau list. Daftar ini ada berbagai macam variasinya di pemrograman HTML. Yaitu ordered list, unordered list dan definition list.
Untuk membuat daftar berurutan, Anda perlu 2 kode:

Semua list dibuka dengan tag <ol> dan ditutup dengan tag </ol>. Tag OL ini adalah singkatan dari ordered list.
Tiap item dari list yang ada dibuka dengan tag <li> dan ditutup dengan tag </li>. LI ini adalah singkatan dari list item.

Setelah list bernomor sebelumnya, Anda dapat juga bisa membuat jenis yang kedua, yaitu list bullet. Yaitu berjenis unorderd list. Nama bullet ini disebabkan browser menampilkan ikon bulat-bulat di sebelah kiri tiap list item yang dimasukkan. Kodenya hampir mirip dengan ordered list, di mana:

Semua list dibuka dengan tag <ul> dan ditutup dengan tag </ul>. Tag UL ini adalah singkatan dari unordered list
Tiap item dari list dibuka dengan tag <li> dan ditutup dengan tag </li>.

Berikut ini kode yang mengandung tipe ordered list dan unordered list:

<html>
<head>
<title>Unordered dan Orderd List</title>
</head>
<body>
<h1>Daftar Komponen PC</h1>
<ul>
<li>Case</li>
<li>Mother Board </li>
<li>CPU (Central Processing Unit) </li>
<li>RAM (Random Access Memory)</li>
<li>Hard Disk Drive</li>
<li>Video Display Adapter</li>
<li>Monitor </li>
<li>Input Device</li>
<li>Printer</li>
</ul>
<h1> Cara merakit PC</h1>
<ol>
<li>Pasang Prosesor ke Motherboard</li>
<li>Pasang Memory ke Motherboard</li>
<li>Pasang Motherboard ke Casing</li>
<li>Pasang Powersupply dan Kabelnya</li>
<li>Pasang kabel controller depan</li>
<li>Pasang hard drive dan drive optik</li>
<li>Oke, selesai</li>
</ol>
</body>
</html>

Jika dilihat di browser, tampilan list ini terlihat seperti berikut

Tipe list ketiga adalah definition list. Tipe ini fungsinya memformat teks dalam bentuk seperti kamus, sehingga Anda dapat menuliskan kata dan mendefinisikan artinya. Jadi tipe ini memiliki 2 bagian, yaitu istilah dan arti istilah tersebut. Namun tag-nya ada tiga, yaitu:

Kata yang akan dijelaskan menggunakan tag <dt> yang merupakan singkatan dari definition term.
Kata penjelasannya menggunakan tag <dd> yang artinya definition description.
Semua tag ini diawali oleh tag <dl> yang merupakan singkatan dari definition list.

Contoh kode HTML yang menampilkan definition list ini adalah:

<head>

<title>Definition List</title>

</head>

<body>

<h1> Definisi Komponen PC</h1>

<dl>

<dd>Tempat untuk menyimpan semua komponen komputer</dd>

<dt>Mother Board</dt>

<dd>Tempat untuk menancapkan semua komponen dan perkabelan</dd>

<dt>CPU (Central Processing Unit)</dt>

<dd> Otaknya komputer</dd>

<dt>RAM (Random Access Memory) </dt>

<dd>Tempat penyimpanan data sementara</dd>

<dt>Hard Disk Drive</dt>

<dd>Tempat penyimpanan data permanen</dd>

<dt>Video Display Adapter </dt>

<dd>Tempat me-render gambar</dd>

<dt>Monitor</dt>

<dd>Tempat menampilkan gambar</dd>

<dt>Input Device</dt>

<dd>Tempat memasukkan masukan ke komputer</dd>

</dl>

</body>

</html>

Jika dilihat di browser, terlihat webpage seperti ini.

List-list di atas dapat juga dikombinasikan. Caranya sama seperti ketika meng-combo-kan style pada teks. Jadi, Anda hanya perlu memainkan peletakan tag di dalam tag list lainnya.

<dl>

<dt>Komponen-komponen komputer yang penting:</dt>

<dd>

List-nya adalah seperti berikut:

<ul>

<li>Monitor</li>

<li>Sistem operasi</li>

</ul>

</dd>

</dl>

Jika dilihat di browser, tampilan unordered list akan ada di dalam bagian definition description. Karena tag <ul> ada di dalam tag <dd>.

Sabtu, 13 Agustus 2016

Memasukkan Garis Horizontal Dalam HTML

06.29

Garis horizontal adalah garis yang membujur secara horizontal di halaman web. Ini dapat dimasukkan menggunakan tag <hr/> di kode Anda. HR ini adalah singkatan dari horizontal ruler. Garis horizontal ini adalah salah satu teknik yang bisa dipakai untuk memisahkan atau mempartisi konten halaman web Anda.
Langsung saja, berikut ini contoh kode untuk memasukkan garis horizontal:

<html>
<head>
<title>Horizontal Line</title>
</head>
<body>
<h1>Puisi dengan HR</h1>
<hr/>
Aku bercita-cita menjadi programmer lebih tepatnya web master, aku sedang berusaha belajar agar cita-citaku tercapai dan aku bisa membahagiakan kedua orang tuaku dan membalas jasa-jasa mereka, aku tidak boleh menyerah agar bisa terus maju
<hr/>
</body>
</html>

Jika dibuka di browser, tampilannya terlihat seperti berikut. Ada bagian horizontal ruler di atas dan bawah teks.