PENGENALAN HTML & XHTML
1. TUJUAN
a. Mahasiswa dapat membuat halaman Web dengan menggunakan kode HTML.
b. Mahasiswa dapat menuliskan kode HTML secara benar sesuai aturan pada kode XHTML.
2. TEORI SINGKAT
Bagian dari sintak html (hiper text markup language) adalah:
………(statemen)
3. PRAKTEK
a. Ketikkan Script berikut ini:
Mari belajar html dengan menggunakan paragraph
Ini juga paragraph, silahkan dicoba
Ada tiga paragraph disini
Hasil Runing:
Pembahasan:
Di atas adalah contoh web sangat sederhana yang terdiri dari pokok-pokok bagian yang harus ada pada web yaitu terdiri dari html bertujuan untuk mendeklarasikan untuk memberikan informasi kepada browser bahwa statemen-statemen program di dalamnya merupakan bahasa html. Head adalah bagian dari sebuah web yang wajib, bukan berarti wajib itu harus ada karena menyebabkan program tidak jalan apabila statemen head itu tidak ada, namun sebagai sebuah consensus untuk menengarai atau sebagai sebuah identitas sebuah web dan cenderung sebagai nama sebuah web. Sedangkan title sama fungsinya dengan head namun mempunyai peranan untuk menampilkan nama taq pada top bar sehingga pengakses dapat mengetahui nama halaman web yang sedang diakses. Bagian yang paling penting adalah body dimana body ini merupakan tempat menuliskan isi dari web. Pada body ini dapat dituliskan statemen untuk melayout tampilan atau bahkan melakukan pemrograman khusus untuk web dinamis.
Dan yang penting kita ingat adalah bahwa masing-masing perintah di atas harus kita tutup dengan harus ditutup dengan , demikian juga untuk juga harus ditutup dengan
Secara sederhana dapat kita definisikan sebagai berikut:
. . . (statement)
b. Script baru dengan nama web1.html
Dokumen ini yang akan ditampilkan di web rowser anda.
– Web Ststis adalah web yang berisi informasi-informasi yang bersifat statis (tetap).
– Web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
– perhatikan perbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
Untuk mengetahuu sebuah fungsi
, yaitu fungsi untuk memindah baris kalimat menjadi satu baris di bawahnya. Apabila sebuah kalimat yang dituliskan di dalam bahasa html kemudian diakhiri dengan
dimanapun letaknya maka setelah tanda tersebut akan di enter dan diletakkan di bawah kalimat sebelumnya. Tanda
ini dapat dituliskan begitu saja atau dengan menambahkan tanda
sama saja fungsinya. Namun apabila kita nanti akan menuliskan dengan bahawa xhtml maka yang dianjurkan adalah dengan menulis
.
, yaitu fungsi untuk memindah baris kalimat menjadi satu baris di bawahnya. Apabila sebuah kalimat yang dituliskan di dalam bahasa html kemudian diakhiri dengan
dimanapun letaknya maka setelah tanda tersebut akan di enter dan diletakkan di bawah kalimat sebelumnya. Tanda
ini dapat dituliskan begitu saja atau dengan menambahkan tanda
sama saja fungsinya. Namun apabila kita nanti akan menuliskan dengan bahawa xhtml maka yang dianjurkan adalah dengan menulis
.
Sebagai bukti coba kita lihat penulisan data script di atas, walaupun pada penulisan sudah kita enter, posisi sudah pada baris berikutnya. Namun setelah dieksekusi baris tersebut terangkat ke atas dan digabungkan dengan kalimat sebelumnya. Sekarang coba kita lihat dibawah ini. Walaupun penulisan tidak dienter namun karena adanya script
, maka posisi kalimat dienter di bawah baris kalimat sebelum
.
, maka posisi kalimat dienter di bawah baris kalimat sebelum
.
c. Dengan menambahkan
atau
pada akhir masing-masing kalimat akan menghasilkan sebagaimana tampilan di bawah:
atau
pada akhir masing-masing kalimat akan menghasilkan sebagaimana tampilan di bawah:
Dokumen ini yang akan ditampilkan di web rowser anda.
– Web Ststis adalah web yang berisi informasi-informasi yang bersifat statis (tetap).
– Web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
– perhatikan perbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
– Web Ststis adalah web yang berisi informasi-informasi yang bersifat statis (tetap).
– Web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
– perhatikan perbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
Hasil Tampilan:
d. Mencoba script dengan syntax di bawah ini:
Isi dokumen XHTML ditulis di sini, ini hampir mirip dengan HTML, mudahkan??
Hasil running:
Script di atas adalah contoh script web dengan bahasa xhtml dimana dapat diketahui yaitu dengan adanya kode Fungsinya tidak begitu kelihatan hampis sama dengan head sebagai sebuah identitas bahwa script tersebut ditulis dalam xhtml. Walaupun sebenarnya di dalam penulisan html dan xhtml berbeda karena pada xhtml semua sintak harus ditulis dengan huruf kecil tidak seperti di html diperbolehkan perpaduan huruf capital dan biasa. Padahal pada pemakaiannya memang berbeda sehingga dapat menghasilkan tampilan tertentu. Namun untuk praktek kali ini tidak ada yang menunjukkan fungsi perbedaan tampilan bahwa bahasa tersebut ditulis dengan bahasa html ataupun xhtml. Salah satu perbedaannya adalah ketika web tersebut menjadi web master yang akan dijadikan CSS apabila sudah ditulis dengan bahasa xhtml maka web tersebut sudah siap.
e. Coba lain script lain sebagaimana dibawah:
Melihat perbedaan-perbedaan di atas maka XHTML sangat disarankan bagi desainer web yang menginginkan konsistensi dalam struktur konten halaman webnya
Selain itu, XHTML lebih compatible untuk diintegrasikan dengan CSS (Cascade Style Sheet) dibandingkan dengan HTML.
Hasil Tampilan:
4. LATIHAN
Mengubah latihan dengan html menjadi penulisan kode xhtml
a. Latihan 1 dengan xhml.
Mari belajar html dengan menggunakan paragraph
Ini juga paragraph, silahkan dicoba
Ada tiga paragraph disini
Hasil Tampilan:
Pada web di atas kita mencoba menggunakan
sebagai sebuah perintah penulisan script web yang memformat agar setiap kalimat mempunyai spasi. Berbeda apabila kita beri perintah
akan menformat pergantian baris setiap kali ada perintah tersebut, sebagaimana tampilan di bawah:
Lihatlah di bawah ini, setelah kita tambah beberapa kalimat maka terbentuklah sebuah paragraph yang terdiri dari beberapa kalimat. Dengan perintah
maka browser akan menampilkan paragraph satu dengan yang lainnya berjarak lebih kurang senggang 1 spasi.
b. Latihan 3 dengan xhtml.
Dokumen ini yang akan ditampilkan di web rowser anda.
– Web Ststis adalah web yang berisi informasi-informasi yang bersifat statis (tetap).
– Web Dinamis adalah web yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapat saling berinteraksi dengan user.
– perhatikan perbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
5. TUGAS
Buatlah sebuah surat kepada orang terdekat anda (teman bebas) dalam halaman web. Ketetuan:
a. Terdiri dari 2 paragraf
b. Tulis kodenya dalam xhtml, perhatikan aturan penulisan yang benar.
Sayangku……, saat ini kanda menuntut ilmu dirantau orang. Jauh dari pelupuk mata Dinda, namun Kanda yakin bahwa di dalam hatimu senantiasa terhangatkan oleh cinta kita. Rindu…rindu…. Rindu memenuhi kalbuku, menyibak tabir sepinya malam untuk selalu bertemu. Mata menerawang bayangan cinta ketika bersua.
Bagaimana dengan si kecil kita akupun selalu merindu dengannya. Canda cerianya selalu menyirami hati. Menghilangkan pedih dan resah ketika sepi menyapaku. Tatapan matanya berbinar penuh harapan kapan kita semua berjumpa. Melepaskan rindu yang berat ditahan.
Sedikit berbeda namun hasilnya akan sama ketika perintah
kita ganti dengan satu tanda paragraph yaitu
. Sebagaimana di bawah ini kita lihat bahwa hasilnya sama dengan perintah di atas.
KESIMPULAN:
- Bahasa atau scipt yang digunakan dalam html dan xhtml hampir sama, hanya berupa aturan yang mestinya dipenuhi. Karena secara praktis hampir tidak terlihat efek kita menggunakan perintah html dan xhtml. Dari beberapa program web sederhana dari hasil praktikum, latihan dan tugas dapat kita lihat bahwa tidak ada efek yang terlihat jelas.
- Dalam menuliskan script xhtml harus teliti karena fungsi utama apabila halaman web tersebut diloaded ke CSS tidak akan mendukung.
- Berbagai perintah dari scrip web baik html maupun xhtml sangat beragam tinggal efektifitas pemilihan script yang harus kita latih. Bisa jadi satu dua baris script dapat menghasilkan tampilan dan fungsi yang sama dibandingkan dengan script yang tidak efektif. Seminal apabila kita menggunakan
dapat digantikan dengan .
- Mahasiswa dapat dengan mudah mencoba menggunakan tag perintah dalam java script sebagai cara membuat web. Semakin banyak mencoba maka semakin faham dalam menggunakan tag-tag tersebut.
De Totty 