Sunday 16 March 2014

Membuat Dokument HTML

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




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:
  1. Pada folder tersebut. Klik kanan -> Pilih New -> Text Document. Lalu ubah namanya sesuai keinginan Anda ditambah akhiran ".html". Contoh : index.html
  2. 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 ini cukup menjadi 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.

Silahkan Anda berkreasi dengan imajinasi Anda. pahami dan kuasai terlebih dahulu. Selanjutnya kita Akan membahas mengenai TAG lanjutan lainnya. Sampai jumpa.

No comments:

Post a Comment

Silahkan tinggalkan komentar, kritik, saran maupun pertanyaan Anda