Pada pelajaran sebelumnnya kita telah membahas tentang Tag dan cara penggunaanya. Pada tutorial hari ini kita akan belajar membuat dokument sederhana yang memuat/menampilkan sebuah halaman website yang diisi dengan beberapa Tag/kode sederhana.
Pada pembahasan yang lalu kita telah mengerti bagaimana membuat sebuah dokumen agar dikenal sebagai dokumen HTML dengan memberi ekstensi .html pada dokumen tersebut. Sebelum kita memulai pelajaran hari ini saya ingin mengulas sedikit mengenai cara mengakses sebuah halaman.
INFO PLUS
Sebuah situs biasanya menyimpan file dokumen pada sebuah server yang online agar pengunjung dapat mengaksesnya dan tampil pada komputer pengunjung tersebut. perhatikan pola pada gambar di bawah ini
Mohon maaf. Gambar mengalami masalah karena perpindahan server
Si pemilik situs menletakkan dokumennya pada sebuah server yang selalu online, dan kemudian pengunjung dengan mengetik alamat situsnya tersebut dan menerima tampilan dari dokumen pada komputer yang digunakan. Proses dua arah ini terjadi kerita pengguna melakukan request ke server dan kemudian server mengirimkan permintaan tersebut. Untuk itulah dibutuhkan server yang selalu online agar situs yang dimaksud dapat diakses.
Jika Anda bertanya bagaimana membuat server atau mengirimkan dokumen tersebut ke server agar bisa diakses secara online. Saya rasa mungkin saya akan menjawabnya nanti setelah Anda betul-betul menguasai bahasa pemrograman ini ditutorial lanjutan.
Ada juga cara membuat server pada lokal komputer kita. Tapi saya rasa kalau hanya untuk mengakses dokument HTML mungkin hal itu tidak perlu kita lakukan. Kita bisa mengakses dokumen/halaman tersebut dimana saja kita letakkan. yang kemudian kita buka menggunakan browser. Sebenarnya server tidak hanya berguna sebagai tempat penyimpanan. Tapi juga sebagai pengolah data sebelum dikirimkan ke komputer pengguna/pengunjung. Karena untuk sebuah proses yang dinamis dan pengumpulan informasi sehingga data harus tersaji dalam kondisi siap. Mengenai hal ini juga kita akan bahas dan pelajari pada tutorial lanjutan. Karena untuk mengolah data pada server itu menggunakan bahasa pemrograman yang berbeda. Jadi kuasai terlebih dahulu bahasa sederhana ini.
Kita mulai membuat sebuah halaman HTML. Pada pembahasan sebelumnya kita telah menentukan sebagai contoh tempat penyimpanan file HTML pada disk E dalam folder website (E://website). Jadi selanjutnya kita akan selalu menyimpan file buatan di folder tersebut. Anda bisa menyesuaikan jika Anda ingin menyimpan pada tempat yang berbeda.
Pertama, buatlah document baru dan simpan pada folder tersebut. caranya ada dua:
- Pada folder tersebut. Klik kanan -> Pilih New -> Text Document. Lalu ubah namanya sesuai keinginan Anda ditambah akhiran ".html". Contoh : index.html
- Bukalah notepad Anda. pada notepad tersebut pilih menubar file -> Save. Kemudian simpan dengan nama sesuai keinginan Anda ditambah akhiran .html
Pada kedua cara di atas. Saya menyarankan agar Anda menggunakan cara kedua. Karena pada cara pertama akan menimbulkan beberapa perbedaan untuk komputer dengan pengaturan hidden extention. Dokumennya akan dikenal hanya sebagai teks biasa bukan dokumen HTML.
Setelah Anda selesai membuat dokumen dengan akhiran .html, mari kita coba mengisinya dengan beberapa Tag.
<html>
<head>
<title>Pelajaran Pertama Ku</title>
</head>
<body>
<h1>Halaman HTML Buatan Ku</h1>
<div>
Ini adalah paragraf. Tag <div> digunakan untuk menandai sebuah paragraf. Hari ini saya belajar membuat dokumen HTML sederhana dan menampilkannya pada komputer dengan browser yang saya gunakan sekarang. Tampilan ini dibuat sedemikian rupa agar menarik dan nyaman di mata pengunjung sekalian
</div>
baris baru <br>
baris jeda satu spasi <p>
jeda di antaranya
<p>
<b>tulisan tebal</b> <br>
<i>tulisan mirig</i> <br>
<u>tulisan garis bawah<br>
<s>tulisan coret</s>
<div>
tulisan biasa tanpa rataan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang <i>agar dapat</i> melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini <s>cukup</s> menjadi paragraf panjang.
<div>
<div>
<justify>
tulisan dengan rataan kiri dan kanan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar <b>dapat melihat jelas hasil dan perbedaannya</b> dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.
</justify>
<div>
<div>
<center>
tulisan ditengah. berhubung saya bingung <u>mau nulis apa biar paragraf ini </u> menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.
</center>
<div>
Silahkan Anda coba menulis seperti di atas dan lihatlah hasilnya dengan browser Anda. Maka akan tampak seperti dibawah ini
Halaman HTML Buatan Ku
Ini adalah paragraf. Tag
digunakan untuk menandai sebuah paragraf. Hari ini saya belajar membuat dokumen HTML sederhana dan menampilkannya pada komputer dengan browser yang saya gunakan sekarang. Tampilan ini dibuat sedemikian rupa agar menarik dan nyaman di mata pengunjung sekalian
baris baru
baris jeda satu spasi
jeda di antaranya
tulisan tebal
tulisan mirig
tulisan garis bawah
tulisan coret
tulisan biasa tanpa rataan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan inicukupmenjadi paragraf panjang.
tulisan dengan rataan kiri dan kanan. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang
tulisan ditengah. berhubung saya bingung mau nulis apa biar paragraf ini menjadi agak panjang agar dapat melihat jelas hasil dan perbedaannya dengan tag yang lain. maka saya menulis sembarang tapi tidak ngaco. semuga tulisan ini cukup menjadi paragraf panjang.