Dasar Dasar Membuat Web Dengan HTML Beserta Contoh Lengkap

Posted on

Setelah kita mengkaji tentang pengertian HTML dan unsur unsur didalamnya pada postingan sebelumnya.. Kali ini kita mencoba membuat contoh pemograman sederhana menggunakan HTML. Mari kita simak bersama-sama penjelasan dibawah ini .

Apa Saja yang Dibutuhkan untuk Belajar HTML?

  1.  Sebuah komputer yang siap web. Komputer dengan Windows 95/98/NT, Mac, atau Unix.
  2. Editor teks, notepad atau lainnya.
  3. Koneksi ke server web (kalau mungkin koneksi ke Internet).
  4. Browser web, direkomendasikan Internet Explorer (4.0 atau yang terbaru) atau Netscape Navigator (4.0 yang terbaru).
  5. Langkah berikutnya adalah surfing Internet, melihat-lihat web site untuk mendapatkan dan membangun ide dari apa yang dilihat.

Mencoba adalah kunci dari cara belajar HTML ini untuk mengetahui langsung apa yang dihasilkan dari setiap tag yang digunakan untuk membuat.

Buat direktori kerja di drive C Anda dengan nama latihan, kemudian buat lagi subdirektori di bawahnya dengan nama html. Jalankan Notepad.
Tuliskan ke dalamnya teks seperti berikut:

html2

<!—contoh.html–>
<html >!
<head>
<title>Judul Halaman</title>
</head>
<body>
Ini adalah homepage pertamaku.
<b>Ini sekedar teks lainnya</b>
</body>
</html>

Penjelasan Contoh

Tag pertama pada dokumen html Anda adalah <html>. Tag ini memberi tahu bahwa ini adalah awal dari dokumen HTML. Tag terakhir pada dokumen Anda adalah </html>. Tag ini memberi tahu  browser Anda bahwa ini adalah akhir dari dokumen HTML.
Teks antara <head>dan </head> adalah informasi header. Informasi header tidak ditampilkan pada window browser. Hanya teks yang berada di antara tag <body> dan </body> yang akan ditampilkan pada browser Anda.
Teks di antara tag <title> dan </title> adalah judul dokumen Anda. Judul ditampilkan pada window caption Anda.

Petunjuk untuk Menggunakan Tag

  • Tag HTML diapit dengan dua karakter kurung bersudut (angle bracket) <dan>.
  • Tag HTML secara normal selalu berpasangan seperti <b> dan </b>. 0 Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
  • Tag html tidak ‘case sensitive’. <b> berarti sama dengan <B>.
  • Jika dalam suatu tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut. Misalnya <b><I>Huruf Tebal dan miring</Ix/b>.

Gunakan tag dengan huruf kecil (lowercase).

Tag HTML tidak case sensitive: sebagai contoh <B> berarti sama dengan <b>. Jika Anda melakukan surfing dalam web, Anda akan mencatat kebanyakan tutorial HTML menggunakan tag HTML dengan huruf besar (uppercase) pada contoh-contohnya. Pada contoh kita menggunakan huruf kecil. Mengapa?
Karena:

  • Untuk menyiapkan Anda menggunakan HTML pada generasi berikutnya.
  • W3C merekomendasikan menggunakan tag dengan huruf kecil pada rekomendasi HTML 4.0, dan XHTML cenderung menggunakan tag dengan huruf kecil.

Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.

Tag berikut tidak mempunyai atribut: <body>.
Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna dasar putih.

Tag berikut mempunyai atribut: <body bgcolor=’’red” >.
Tag <body> ini menggunakan atribut bgcolor dengan nilai “red”, maka dokumen yang ditampilkan akan mempunyai warna background merah.

Tag berikut tidak mempunyai atribut: <table>.
Tag tanpa atribut ini menyebabkan tabel ditampilkan tanpa menggunakan garis batas (border).

Tag berikut mempunyai atribut: <table border=”i”>.
Atribut ini akan menyebabkan tabel ditampilkan dengan meng¬gunakan garis batas (border) pada tabel yang ditampilkannya.

Secara umum tag dengan atributnya adalah sebagai berikut:
<namatag atrl = “nilai-atrl” atr2 = “nilai_atr2” …> …</namatag>

Atribut setiap tag akan berbeda-beda.
Catatan;
(Berlaku apabila telah menggunakan stAndar HTML 4.0) Walaupun setiap tag mempunyai atribut, tidak dianjurkan pemrogram web untuk menggunakan atribut ini untuk mengubah default dari suatu tag. Karena pemrogram HTML harus menggunakan style sheet. lihat penjelasan dan latihan tentang style sheet.

Tips: Belajar HTML Lewat Source HTML Lain

Belajar HTML akan lebih efektif jika kita sering berlatih dan melihat irapimana programmer web lain melakukannya.
Pernahkah Anda melihat suatu web page dan terkagum melihatnya: Bagaimana mereka membuatnya?”.
Untuk mengetahuinya, mudah saja: klik menu VIEW pada menu bar, kemudian pilih SOURCE atau PAGE SOURCE.
Ini akan membuka sebuah window baru yang memperlihatkan HTML sebenarnya dari page tersebut. Dengan melihat source ini diharapkan Anda dapat melihat dan mempelajari teknik untuk menghasilkan halaman web yang Anda kagumi tadi.

Menu di atas tidak sama antarbrowser. Pada intinya Anda dapat menggunakan menu atau pilihan yang ada di menu untuk menampilkan source dari web page tersebut.

Pertanyaan yang Sering Ditanyakan

T: Setelah saya melakukan edit suatu file HTML, saya tidak bisa menampilkan hasilnya pada browser saya, mengapa?
J: Yakinkan bahwa file tersebut telah disimpan dengan nama yang benar dan mempunyai ekstensi .htm atau .html. Juga periksa apakah nama yang dituliskan pada browser Anda sama dengan yang nama file yang dibuat.
T: Saya telah mengubah suatu file HTML tetapi perubahaan yang dilakukan tidak ditampilkan dalam browser. Mengapa?
J: Browser melakukan ‘cache’ pada setiap page yang ditampilkan pada browser, sehingga tidak perlu membaca dua kali page yang sama. Jika Anda telah melakukan perubahan suatu page. Browser tidak mengetahuinya. Gunakan tombol Refresh/Reload browser untuk memaksa browser membaca page yang telah diedit.
T: Dapatkan saya menggunakan browser Internet Explorer dan Netscpae?
J: Ya, Anda dapat menggunakan keduanya untuk mencoba latihan- latihan yang ada pada dokumen ini. Namun tidak semuanya bisa dilakukan karena pada beberapa contoh untuk materi yang sifatnya lanjut, dianggap Anda menggunakan Internet Explorer versi 4.0 atau lebih baru.
T: Apakah komputer saya harus menggunakan Windows, bagaimana dengan MAC/Unix?
J: Anda dapat melakukan semua latihan pada komputer nonwindow. Akan tetapi mungkin beberapa contoh pada materi yang lanjut menganggap Anda menggunakan Windows 95/98/NT.

Demikian penjelasan singkat yang bisa admin sampaikan tentang Dasar Dasar Membuat Web Dengan HTML Beserta Contoh Lengkap. Semoga ilmu yang dibagikan dapat bermanfaat bagi pembaca. Sampai bertemu di postingan-postingan selanjutnya.. ^^