Bahasa HTML BAB III

Belajar HTML 7 – Paragraf HTML

Menulis dokumen apapun pasti memerlukan paragraf. Mari kita pelajari tag HTML yang digunakan untuk membuat sebuah paragraf HTML yaitu tag <p>.

Kita menggunakan tag <p> untuk membuat sebuah paragraf HTML baru.

Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan di bawah teks paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang menandakan sebuah paragraf HTML dan memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.

Dan…tentu saja kita harus menutup paragraf HTML kita dangan pasangannya yaitu tag </p>.

Contoh kode HTML:

?

1 2	<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik, sehingga kalimat ini tidak ada isinya sama sekali. <p>

Kamu juga bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini sangat mudah dilakukan, yaitu dengan menambahkan atribut HTML align.

Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.

?

1	<p align="justify">Ini adalah paragraf yang rata kanan dan rata kiri.</p>

Kamu bisa ganti-ganti isi atribut align tersebut dengan kata center untuk membuat paragraf menjadi di tengah, left rata kiri, dan right untuk rata kanan.

Belajar HTML 8 – Mengubah Tampilan Teks HTML

Buat kamu yang baru belajar HTML, mungkin penasaran bagaimana cara mengubah huruf atau teks HTML menjadi tebal atau membuatnya menjadi miring. Tampilan huruf seperti ini sangat penting untuk dilakukan, misalnya pada saat kita perlu memberikan penekanan pada kata-kata tertentu yang kita anggap penting, pada umumnya kita menggunakan huruf tebal, atau pada saat menggunakan istilah asing, maka kita perlu membuatnya menjadi miring (atau istilah lainnya italic). Jika iya, maka tutorial HTML kali ini pas banget buat kamu. Gampang kok untuk mengubah tampilan huruf seperti itu.

Seperti yang sudah kamu ketahui dari tutorial elemen HTML ini, kamu pastinya udah tahu kalau HTML menggunakan tag untuk semua perintah yang dilakukannya. Nah, untuk mengubah tampilan dan format teks, HTML juga menggunakan tag-tag seperti <b> (untuk menebalkan huruf) dan <i> (untuk menampilkan huruf miring) untuk menampilkan teks atau huruf sesuai dengan kebutuhan kita.

Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

Tag	Deskripsi
<b>	Menebalkan huruf
<i>	Menampilkan huruf miring
<big>	Menampilkan huruf dalam ukuran besar
<small>	Menampilkan huruf dalam ukuran kecil
<strong>	Mirip dengan <b>, menampilkan dengan tebal
<sub>	Subscript (Tulisan kecil di bawah, misalnya untuk menulis rumus kimia)
<sup>	Superscript (Yang ini kecil di atas, misalnya menulis kuadrat)
<u>	Menulis huruf bergaris bawah.

Bagaimana contoh pemakaiannya? Berikut ini contoh untuk menampilkan tulisan tebal dan miring:

?

1	<b><i>Tulisan ini tebal dan miring</i></b>

Mudah bukan? Selamat mencoba.

Belajar Program HTML – List HTML bag 1

Dalam tutorial belajar program HTML kali ini, kita akan mencoba membuat daftar atau list HTML. Apa itu list HTML? Gini… pada saat kamu menggunakan ms-word untuk membuat sebuah dokumen, maka kemungkinan besar kamu akan membuat sebuah daftar atau yang sering disebut juga dengan istilah list. Dalam ms-word kamu mungkin mengingatnya sebagai bulleteddan numbered list. Nah. kita juga bisa membuat list tersebut menggunakan program HTML lho. Coba yuk…

Dengan HTML, sebenarnya kita bisa membuat beberapa jenis daftar atau list HTML. Namun yang paling umum digunakan adalah apa yang dikenal dengan istilah ordered list HTML dan unordered list HTML. Seperti apa tuh? Mari kita lihat contohnya.
Ordered list HTML adalah daftar yang berurutan, atau gampangnya daftar yang ada nomornya seperti contoh berikut ini:

Saat mempelajari program HTML, kamu harus mempelajari hal-hal berikut ini secara berurutan:

   1. Mempelajari Tag HTML
   2. Membuat paragraf
   3. Membuat link

Sedangkan unordered list HTML biasanya hanya menggunakan bullet seperti daftar berikut ini:

Saat mempelajari program HTML, kamu harus mempelajari hal-hal berikut ini secara berurutan:

    * Mempelajari Tag HTML
    * Membuat paragraf
    * Membuat link

Cara membuat list HTML ini sebenarnya sangat mudah, dan umumnya semua editor HTML sudah bisa membuatnya dengan mudah. Namun tidak ada salahnya kalau kamu juga mengenal tag-tag untuk pembuatan list HTML ini. Hal ini penting untuk kamu pelajari agar pada saat membuat program PHP nantinya, kamu harus membuat list HTML ini berdasarkan beberapa data yang diambil dari tabel, nah disinalah sebenarnya pengetahuan tentang tag list HTML ini akan sangat bermanfaat.

Ok, dalam tutorial berikutnya saya akan sampaikan tag-tag tersebut dimulai dengan tag ordered list HTML.

Belajar Program HTML – Ordered List HTML

Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar atau list HTML, sekarang waktunya untuk mempelajari cara membuat ordered list HTML alias daftar bernomor. Caranya Membaut Program HTML nya guamping……

Kamu cuman perlu tahu 2 tag program HTML untuk ordered list HTML yaitu <OL> dan <LI>.

Tag <OL> adalah tanda mulainya sebuah daftar bernomor urut, sedangkan tag <LI> adalah isi dari ordered list HTML yang ingin kita tuliskan.

Biasa..paling gampang kalau menjelaskan program HTML ini pakai contoh kan?

Nah kode berikut ini:

?

1 2 3

<OL><LI>Mempelajari HTML</LI><LI>Mempelajari PHP</LI> <LI>Mempelajari MySQL</LI></OL>

Program HTML tersebut, skan tampil seperti ini di browser:

1. Mempelajari HTML

2. Mempelajari PHP

3. Mempelajari MySQL

Mudah bukan? Sebagai catatan tambahan, kamu tidak usah repot-repot menuliskan nomornya untuk setiap isi dari daftar ordered list HTML. Hal ini sudah dilakukan secara otomatis oleh browser (tentu saja hal ini sangat memudahkan pembuat kode saat membuat program HTML).

Ok. Tutorial program HTML berikutnya akan membahas tentang tag unordered list HTML. Check back soon ya…

Belajar Program HTML – Unordered List HTML

Ok. Setelah sebelumnya kamu mempelajari konsep dan jenis-jenis daftar atau list HTML dan membuat daftar bernomor atau ordered list HTML, sekarang waktunya untuk mempelajari cara membuat unordered list HTML alias daftar tanpa nomor (cuman pakai bullet ajah). Caranya juga guamping……
Lagi-lagi kamu cuman perlu tahu 2 tag untuk unordered list HTML yaitu <UL> dan tag HTML <LI> yang sudah pernah kita bahas sebelumnya.

Tag <UL> adalah tanda mulainya sebuah daftar tanpa nomor, sedangkan tag <LI> adalah isi dari daftar.

Mari kita lihat contoh program HTML nya.

Kode berikut ini:

?

1 2 3 4 5 6 7 8 9

<UL> <LI>Cara membuat website</LI> <LI>Membuat Website</LI> <LI>Cara membuat web</LI> </UL>

Akan tampil seperti ini di browser:

• Cara membuat website
• Membuat Website
• Cara membuat web

sama seperti sebelumnya…sangat mudah bukan?

Belajar HTML – Review

Sampai saat ini, kamu udah belajar beberapa tag HTML penting.

Sebelum melanjutkan ke materi yang lain, ada baiknya kita review sedikit apa yang sudah kamu dapatkan sampai saat ini dari materi belajar HTML.
Tanda lebih besar dan kecil (< dan >)digunakan untuk mengawali dan mengakhiri tag HTML. Kata-kata yang ada di antara kedua tanda tersebut disebut juga elemen HTML.

Semua dokumen HTML memiliki tag-tag utama sebagai berikut:

<html>…</html> tag file HTML

<head>…</head> tag HTML informasi umum untuk header dan info lainnya

<title>…</title> tag HTML judul

<body>…</body> tag HTML body tempat content anda berada
Untuk membuat jarak di antara paragraf, gunakan tag HTML paragraf:

<p>…</p>

Untuk membuat baris baru gunakan tag HTML:

<br />

Daftar / list HTML bisa bernomor (ordered list HTML) atau tanpa nomor (unordered list HTML).

Cara membuatnya:

<ol>…</ol> tag HTML ordered list

<ul>…</ul> tag HTML unordered list

<li>…</li> tag HTML isi daftar

Ternyata belajar HTML tidak serumit yang dibayangkan ya?

Daftar Warna pada HTML

Pada saat menggunakan atribut color (warna) pada HTML, kita bisa menggunakan 2 cara. Kita bisa menuliskan warna tersebut menggunakan kode hexa atau nama warnanya sendiri.

HTML memiliki beberapa warna standar yang bisa dipanggil langsung namanya. Sesuai standar W3C, HTML mengenal 16 warna yang valid digunakan dalam HTML.

Nama warna-warna tersebut adalah:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Jika mencoba menuliskan warna lain selain nama-nama tersebut, maka bisa saja jalan, tapi ndak ngikutin standar valid HTML.

Saran saya gunakan selalu kode hex untuk menuliskan isi dari atribut color ini agar lebih terjamin validitasnya.

Cara Membuat Website dengan Facebook Like This

Ok. Pada artikel kali ini, saya akan coba jelaskan secara singkat cara membuat website yang dilengkapi box facebook like this atau facebook suka, seperti yang ada di box sebelah kanan halaman ini.

Langkah pertama adalah anda harus membuat fanpage terlebih dahulu. Tentu saja saya mengasumsikan kalau kamu sudah memiliki akun facebook. Buatlah fan page ini dari halaman login utama facebook di facebook.com.

Setelah selesai, masuklah ke halaman fanpage tersebut dan perhatikan alamat yang tertera di tempat kamu biasa menulis alamat website pada browser kamu.

Di sana ada alamat fanpage kamu, dan copy angka yang ada di bagian akhir alamat tersebut. Ini adalah page id facebook fanpage kamu.

Kamu bisa gunakan fanpage untuk komunitas saat diminta memilih.

Setelah ok, silakan ke halaman facebook developer inihttp://developers.facebook.com/docs/reference/plugins/like-box

Kamu bisa pilih apakah mau berbentuk button atau box dan melakukan kustomisasi tampilan sesuai yang diinginkan. Paste angka yang tadi kamu copy tadi ke field facebook page id.

Setelah beres, klik Get Code.

Langkah selanjutnya adalah copykan kode dari facebook ini ke halaman website kamu. Kalau kamu pake joomla atau mambo seperti prothelon.com ini, tinggal buat sebuah modul HTML baru, dan pastekan kode facebook ini ke sana.

Beres deh.

Selamat mencoba.

Membuat Website secara Instan

Banyak pengunjung yang masih bingung dalam membedakan cara membuat website. Beberapa dari mereka belum bisa membedakan cara membuat website menggunakan HTML, PHP dan MySQL dengan menggunakan cara instan seperti blogspot, wordpress atau CMS.

Saya yakin, bahwa banyak dari teman-teman pengunjung prothelon.com sudah memiliki facebook kan? Nah, sebenarnya kita juga bisa membuat halaman web sendiri di facebook, seperti yang bisa kita lakukan di multiply atau website social network lainnya.

Apakah ketika bisa membuat website dengan cara itu, maka sudah bisa dikatakan “membuat website”?

Menurut saya pribadi jawabannya ya.

Kita bisa membuat website dengan berbagai cara. Cara paling mudah dan murah adalah dengan memanfaatkan fasilitas di facebook untuk membuat halaman web seperti fan page. Atau jika kita ingin sedikit lebih fleksibel, maka kita bisa memanfaatkan blogspot atau wordpress.

Cara membuat website seperti itu, menurut saya praktis dan instan. Sangat cocok bagi Anda yang masih pemula dan ingin segera memulai bisnis atau sekedar memiliki web site di internet.

Bagaimana dengan cara lainnya? Dan apakah masih perlu belajar cara membuat website menggunakan HTML, PHP dan MySQL?

Alternatif PHP Redirect – HTTP Redirect

Redirect atau pengalihan menggunakan HTTP memiliki fungsi yang sama dengan redirect menggunakan PHP. Perintahnya mudah, mari kita perhatikan contoh berikut:

?

1	<meta http-equiv="Refresh" content="[waktu-tunda]; URL=[url-tujuan]">

 Untuk mengubah waktu tunda pengalihan, kamu bisa mengganti [waktu-tunda] dengan berapa detik waktu yang pengen kamu atur untuk pengalihan tersebut. Parameter perintah ini akan membuat browser menunda selama beberapa detik sesuai keperluan kamu, sebelum kemudian mengalihkan halaman yang ada perintah tersebut ke halaman web lainnya.

Nah, bagian pentingnya adalah [url-tujuan]. Untuk mengalihkan sebuah halaman web, kamu bisa mengganti [url-tujuan] dengan target URL yang menjadi tujuan pengalihan atau redirect kamu.

Contoh perintah HTTP Redirect nya akan menjadi seperti ini:

?

1	<meta http-equiv="Refresh" content="5;  URL=http://www.sejahtera-sejati.toko.pro">

 Contoh Redirect HTTP di atas akan menunda browser selama 5 detik sebelum kemudian mengalihkan halaman menuju ke prothelon.com, tempat kamu bisa belajar cara membuat website ini.

Oh iya, perintah redirect menggunakan HTTP ini kudu kamu taruh di area header. Jadi letakkan baris perintah redirect HTTP tersebut di antara <header> dan </header>.

Berikutnya, kita akan membahas tentang redirect menggunakan javascript.

Redirect PHP, HTML atau Javascript?

Kita sudah mempelajari berbagai metode untuk melakukan redirect, yaitu redirect menggunakan PHP, redirect menggunakan HTTP, dan redirect menggunakan javascript. Maka pertanyaan berikutnya adalah mau pakai yang mana?

Nah, pada umumnya redirect menggunakan PHP lebih bisa diandalkan dibandingkan redirect pakai HTTP atau javascript. Misalnya, redirect menggunakan javascript tidak akan bekerja jika setting javascript pada browser yang digunakan pengunjung dimatikan.

Redirect PHP bisa bekerja apapun setting browser yang dimiliki pengunjung.

Redirect PHP bisa selalu bekerja dalam kondisi setting browser apapun tersebut karena PHP adalah script yang bekerja di sisi server, bukan di sisi client (browser). Karena itulah redirect PHP tidak tergantung pada setting browser yang dimiliki pengunjung, tidak seperti Javascript misalnya, yang dieksekusi di sisi client.

Membuat favicon

Membuat favicon? Apa tuh favicon. Tulisan ini diawali ketika beberapa waktu lalu, ada salah seorang pengunjung menanyakan tentang membuat favicon. Berikut ini isi emailnya:

 bagai mana membuat gambar di dekat url web pada jendela browser nya pak

Wah, apa tuh yang dimaksud dengan “membuat gambar dekat url web pada jendela browser”?

 Coba sekarang perhatikan di tempat kamu biasa nulis alamat website yang ingin kamu kunjungi. Kadang-kadang di dekat alamat tersebut muncul sebuah gambar kecil yang berbeda-beda untuk tiap website dan biasanya menggambarkan icon untuk website tersebut.

 Gambar kecil itu biasanya dikenal dengan nama favicon. Dan cara membuat favicon itulah yang dimaksudkan dalam pertanyaan di atas.

 Kita bisa membuat favicon pada saat proses membuat website, atau bisa juga melakukan editing setelah website jadi. Bagaimana caranya?

Nanti akan kita bahas pada tulisan berikutnya.