Tutorial HTML: Div dan Span

HTML hanyalah berisi perintah-perintah yang terstruktur dimana perintah-perintah tersebut terdiri atas tag-tag penyusun. Menyusun tag-tag HTML untuk membangun sebuah halaman web berarti kita telah melakukan suatu tindakan pemrograman walaupun HTML itu sendiri bukanlah suatu bahasa pemrograman. Menuliskan tag-tag HTML tidak sebatas hanya memasukkan perintah-perintah tertentu ke dalam dokumen HTML agar dokumen tersebut dapat terbaca dan ditampilkan oleh browser.

Namun, membangun sebuah halaman web dengan cara menyusun tag-tag HTML sedemikian rupa merupakan suatu karya seni tersendiri. Bagaimana kita memberikan sebuah arti, memberikan sebuah makna dan tujuan dari setiap baris perintah yang kita tulis. Bagaimana kita menerapkan/mengaplikasikan apa yang kita inginkan, apa yang kita maksud ke dalam sebuah dokumen/file HTML. Seperti misalnya menggunakan tag p untuk menunjukkan bahwa konten yang kita maksud adalah sebuah paragraf dan menggunakan tag h1 (heading 1) untuk menunjukkan suatu konten yang berada di dalamnya adalah sebuah judul dari konten yang kita tulis.

Tutorial HTML: Form

Form digunakan untuk mengumpulkan data yang dimasukkan oleh user/pengguna dan data tersebut dikirim ke halaman lain atau situs web lainnya.

Form tidak akan berguna apabila penggunaannya tanpa melibatkan bahasa pemrograman yang lain. Mengingat fungsi dari form adalah untuk mengumpulkan data yang dimasukkan oleh user dan mengirimkannya ke halaman lain maka form memerlukan bahasa pemrograman lain untuk mengirimkan data tersebut misalnya PHP.

Walaupun demikian, bukanlah masalah kita mempelajari form terlebih dahulu. Yang penting, kita pahami dulu HTML kemudian secara bertahap, nanti kita akan membahas bahasa pemrograman lain yaitu PHP.

Tag-tag dasar HTML yang digunakan dalam form adalah form, input, textarea, select dan option.

Tutorial HTML: Table

Dalam sebuah halaman web, tabel digunakan untuk menyajikan suatu data. Namun, tak sedikit yang menggunakan tabel untuk membuat layout halaman web. Hal tersebut sebenarnya kurang pas mengingat fungsi dari tabel itu sendiri untuk menyajikan data. Untuk penjelasan lebih lanjut mengenai pembuatan layout halaman web tanpa menggunakan tabel akan dibahas pada tutorial CSS.

Ada beberapa tag yang digunakan dalam tabel, namun dalam tutorial ini kita hanya menggunakan tag <table>, <tr>, dan <td>. Tambahkan beberapa baris kode berikut sebelum tag </body> pada file "webpertama.html".

Tutorial HTML: Image

Sebuah halaman web akan tampak membosankan kalau isinya hanya tulisan saja. Kalau diibaratkan makanan, makanan itu rasanya tawar/hambar. Web itu tidak harus melulu berisi tulisan, web itu ibarat panggung pertunjukan, entah itu pertunjukan musik/konser, pertunjukan lawak, pertunjukan puisi, drama dan sebagainya. Jadi web itu bersifat muti-media, kita bisa menampilkan apa saja sesuai dengan keinginan kita karena kita lah pemilik "panggung" tersebut.

Nah, pada pembahasan kali ini, saya akan menjelaskan bagaimana cara untuk memasang/menampilkan sebuah gambar dalam halaman web. Untuk menampilkan gambar, dalam sebuah dokumen HTML kita membutuhkan tag img.

Berikut adalah cara penulisan tag img beserta atributnya (gambar saya ambil dari Google.com):

Tutorial HTML: Link

Sampai tahapan ini, kita telah membuat sebuah halaman web yang sudah cukup baik. Dimana halaman web ini telah berisi informasi judul halaman, judul konten (heading), paragraf dan list. Namun, yang membuat internet itu begitu spesial adalah setiap halaman web dapat saling terhubung satu sama lainnya.

Kepanjangan dari huruf "H" dan "T" dalam "HTML" adalah HyperText yang pada dasarnya berarti sebuah teks atau dokumen yang saling terhubung dengan teks atau dokumen lainnya.

Tag <a> atau anchor digunakan untuk mendefinisikan atau menunjukkan sebuah tautan atau link. Untuk membuat anchor tersebut dapat bekerja sesuai dengan semestinya, kita harus menambahkan tujuan dari anchor tersebut. Tujuan dimana tautan atau link tersebut akan dibawa.

Tutorial HTML: List

Dalam HTML ada tiga tipe list, yaitu unordered lists, ordered lists dan definition lists. Nah, di sini akan kita bahas dua tipe list dahulu yaitu unordered lists dan ordered lists sedangkan definition lists akan kita bahas pada sesi berikutnya.

Unordered lists dan ordered lists sebenarnya fungsinya sama saja akan tetapi peruntukan pemakaiannya yang berbeda. Unordered lists digunakan untuk menyajikan daftar/list yang tidak berurutan yang diawali dengan tanda dot atau lingkaran kecil pada awal daftar/list. Sedangkan ordered lists digunakan untuk menyajikan daftar/list yang berurutan dan diawali dengan angka atau huruf di depannya.

Untuk mendefinisikan unordered lists digunakan tag <ul> sedangkan untuk mendefinisikan ordered lists digunakan tag <ol>. Di antara kedua tag tadi terdapat tag <li> untuk mendefinisikan masing-masing item dari list tersebut.

Tutorial HTML: Heading

Pada saat kita menuliskan sebuah artikel pada sebuah halaman website, tentu kita membutuhkan judul untuk artikel yang kita tulis tersebut. Untuk itulah kita membutuhlan heading.

Secara umum, heading digunakan untuk menuliskan judul atau sub judul. Dalam HTML, heading memiliki 6 tingkatan. Secara berurutan, tag heading sebagai berikut; h1, h2, h3, h4, h5 dan h6 dengan heading 1 atau <h1> adalah yang terbesar hingga heading 6 atau <h6> adalah yang terkecil.

Mari kita terapkan heading ini dalam "webpertama.html".

Tutorial HTML: Paragraph

Sekarang kita memasuki bahasan mengenai struktur dasar dari HTML. Buka kembali "webpertama.html" menggunakan text editor lalu tambahkan baris yang berwarna merah kedalamnya.

<!DOCTYPE html>
<html>
  <head>
    <title>Web Pertamaku</title>
  </head>
  <body>
    Inilah halaman web pertamaku
    Menarik bukan...
  </body>
</html>

Sekarang coba simpan lalu buka kembali "webpertama.html" menggunakan browser.

Tutorial HTML: Page Title

Setiap HTML yang akan kita buat harus memiliki judul di setiap halaman. Nah, kali ini kita akan membahas tentang tag <title> yang berfungsi untuk menunjukkan judul dari dokumen HTML yang kita buat dan cara mengaplikasikannya.

Sekarang buka kembali "webpertama.html" dan tambahkan beberapa baris baru berikut dan simpan:

<!DOCTYPE html>
<html>
  <head>
    <title>Web Pertamaku</title>
  </head>
  <body>
    Inilah halaman web pertamaku
  </body>
</html>

Tutorial HTML: Tags, Attribute dan Element

Setelah sebelumnya kita membahas tentang bagaimana cara membuat file HTML yang sederhana dan membukanya lewat browser, kali ini kita akan mencoba untuk menambahkan beberapa tag HTML agar file HTML yang kita buat terlihat lebih baik.

Tag

Dasar dari struktur HTML adalah tag dimana tag ini biasanya diletakkan di awal dan di akhir konten sehingga konten tersebut menjadi lebih bermakna.

Nah, sekarang kita buka kembali file "webpertama.html" yang telah kita buat sebelumnya menggunakan notepad atau text editor lainnya lalu tambahkan beberapa tag HTML kedalamnya sehingga terlihat seperti berikut.

Tutorial HTML: Mukadimah

HTML atau HyperText Markup Language sangat diperlukan dalam membuat sebuah halaman website. HTML itu sendiri adalah sebuah tulisan yang sederhana dan untuk membuat atau menuliskan file HTML kita hanya memerlukan sebuah aplikasi text editor yang sederhana pula seperti Notepad, TextEdit atau aplikasi text editor lainnya.

Nah, sekarang kita coba memulai menuliskan teks sederhana di notepad atau aplikasi apapun yang ingin kalian gunakan. Tuliskan kalimat berikut ini ke dalam text editor kalian.

Inilah halaman web pertamaku

Sekarang buatlah sebuah folder dengan nama "html" dan simpan dengan nama (Save As...) "webpertama.html".