MODUL I, WEB 1

PENGENALANHTML & XHTML
 

1.      TUJUAN
a.           Mahasiswa dapat membuat halaman Webdengan menggunakan kode HTML.
b.           Mahasiswa dapat menuliskan kode HTMLsecara benar sesuai aturan pada kode XHTML.
2.      TEORI SINGKAT
         Bagiandari sintak html (hiper text markup language) adalah:
    
    
    
    
    
     ………(statemen)
    
    
3.      PRAKTEK
a.      KetikkanScript berikut ini:

Mari belajarhtml dengan menggunakan paragraph

Ini jugaparagraph, silahkan dicoba

Ada tigaparagraph disini
        
         HasilRuning:
        
         Pembahasan:
         Diatas adalah contoh web sangat sederhana yang terdiri dari pokok-pokok bagianyang harus ada pada web yaitu terdiri dari html bertujuan untuk mendeklarasikanuntuk memberikan informasi kepada browser bahwa statemen-statemen program didalamnya merupakan bahasa html. Head adalah bagian dari sebuah web yang wajib,bukan berarti wajib itu harus ada karena menyebabkan program tidak jalanapabila statemen head itu tidak ada, namun sebagai sebuah consensus untukmenengarai atau sebagai sebuah identitas sebuah web dan cenderung sebagai namasebuah web. Sedangkan title sama fungsinya dengan head namun mempunyai perananuntuk menampilkan nama taq pada top bar sehingga pengakses dapat mengetahuinama halaman web yang sedang diakses. Bagian yang paling penting adalah bodydimana body ini merupakan tempat menuliskan isi dari web. Pada body ini dapatdituliskan statemen untuk melayout tampilan atau bahkan melakukan pemrogramankhusus untuk web dinamis.
         Danyang penting kita ingat adalah bahwa masing-masing perintah di atas harus kitatutup dengan harus ditutupdengan , demikian juga untuk juga harus ditutupdengan
         Secarasederhana dapat kita definisikan sebagai berikut:
    
    
    
    
    
        . .. (statement)
    
    
        
b.      Scriptbaru dengan  nama web1.html
Dokumen ini yang akan ditampilkan di webrowser anda.
         WebStstis adalah web yang berisi informasi-informasi yang bersifat statis (tetap).
         WebDinamis adalah web yang menampilkan informasi yang bersifat dinamis(berubah-ubah) dan dapat saling berinteraksi dengan user.
         perhatikanperbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
         Untukmengetahuu sebuah fungsi
, yaitu fungsi untuk memindah baris kalimatmenjadi satu baris di bawahnya. Apabila sebuah kalimat yang dituliskan di dalambahasa html kemudian diakhiri dengan
dimanapun letaknya maka setelahtanda 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 menuliskandengan bahawa xhtml maka yang dianjurkan adalah dengan menulis
.
         Sebagaibukti coba kita lihat penulisan data script di atas, walaupun pada penulisansudah kita enter, posisi sudah pada baris berikutnya. Namun setelah dieksekusibaris tersebut terangkat ke atas dan digabungkan dengan kalimat sebelumnya.Sekarang coba kita lihat dibawah ini. Walaupun penulisan tidak dienter namunkarena adanya script
, maka posisi kalimat dienter di bawah bariskalimat sebelum
.
c.            Dengan menambahkan
atau
pada akhir masing-masing kalimat akan menghasilkan sebagaimanatampilan di bawah:
Dokumen ini yang akan ditampilkan diweb rowser anda.
–     Web Ststisadalah web yang berisi informasi-informasi yang bersifat statis(tetap).
–   Web Dinamis adalahweb yang menampilkan informasi yang bersifat dinamis (berubah-ubah) dan dapatsaling berinteraksi dengan user.
– perhatikanperbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
         HasilTampilan:
        
d.      Mencobascript dengan syntax di bawah ini:
              
Isi dokumen XHTML ditulis di sini, inihampir mirip dengan HTML, mudahkan??
Hasil running:
        
         Scriptdi atas adalah contoh script web dengan bahasa xhtml dimana dapat diketahuiyaitu dengan adanya kode Fungsinya tidak begitu kelihatanhampis sama dengan head sebagai sebuah identitas bahwa script tersebut ditulisdalam xhtml. Walaupun sebenarnya di dalam penulisan html dan xhtml berbedakarena pada xhtml semua sintak harus ditulis dengan huruf kecil tidak sepertidi html diperbolehkan perpaduan huruf capital dan biasa. Padahal pada pemakaiannyamemang berbeda sehingga dapat menghasilkan tampilan tertentu. Namun untukpraktek kali ini tidak ada yang menunjukkan fungsi perbedaan tampilan bahwabahasa tersebut ditulis dengan bahasa html ataupun xhtml. Salah satuperbedaannya adalah ketika web tersebut menjadi web master yang akan dijadikanCSS apabila sudah ditulis dengan bahasa xhtml maka web tersebut sudah siap.
e.      Cobalain script lain sebagaimana dibawah:
        
Melihat perbedaan-perbedaan di atasmaka XHTML sangat disarankan bagi desainer web yang menginginkan konsistensidalam struktur konten halaman webnya
Selain itu, XHTML lebih compatibleuntuk diintegrasikan dengan CSS (Cascade Style Sheet) dibandingkan denganHTML.
         HasilTampilan:
        
4.      LATIHAN
         Mengubahlatihan dengan html menjadi penulisan kode xhtml
a.      Latihan1 dengan xhml.
    

     Mari belajar html dengan menggunakanparagraph

    

     Ini juga paragraph, silahkan dicoba

    

     Ada tiga paragraph disini

         HasilTampilan:
        
Padaweb di atas kita mencoba menggunakan

sebagai sebuah perintahpenulisan script web yang memformat agar setiap kalimat mempunyai spasi.Berbeda apabila kita beri perintah
akan menformat pergantian barissetiap kali ada perintah tersebut, sebagaimana tampilan di bawah:

Lihatlahdi bawah ini, setelah kita tambah beberapa kalimat maka terbentuklah sebuahparagraph yang terdiri dari beberapa kalimat. Dengan perintah

makabrowser akan menampilkan paragraph satu dengan yang lainnya berjarak lebihkurang senggang 1 spasi.

        
b.           Latihan 3 dengan xhtml.
Dokumen ini yang akan ditampilkan diweb rowser anda.
–  WebStstis adalah web yang berisi informasi-informasi yang bersifat statis(tetap).
–  WebDinamis adalah web yang menampilkan informasi yang bersifat dinamis(berubah-ubah) dan dapat saling berinteraksi dengan user.
–  perhatikanperbedaan antara yang menggunakan br dan yang tidak, selamat mencoba!.
        
5.      TUGAS
         Buatlahsebuah surat kepada orang terdekat anda (teman bebas) dalam halaman web.Ketetuan:
a.      Terdiridari 2 paragraf
b.      Tuliskodenya dalam xhtml, perhatikan aturan penulisan yang benar.
Sayangku……, saat ini kanda menuntutilmu dirantau orang. Jauh dari pelupuk mata Dinda, namun Kanda yakin bahwa didalam hatimu senantiasa terhangatkan oleh cinta kita. Rindu…rindu…. Rindumemenuhi kalbuku, menyibak tabir  sepinyamalam untuk selalu bertemu. Mata menerawang bayangan cinta ketika bersua.

Bagaimana dengan si kecil kita akupunselalu merindu dengannya. Canda cerianya selalu menyirami hati. Menghilangkanpedih dan resah ketika sepi menyapaku. Tatapan matanya berbinar penuh harapankapan kita semua berjumpa. Melepaskan rindu yang berat ditahan.
        
         Sedikitberbeda namun hasilnya akan sama ketika perintah

kitaganti dengan satu tanda paragraph yaitu

. Sebagaimana di bawah inikita lihat bahwa hasilnya sama dengan perintah di atas.

        
KESIMPULAN:
  1. 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.
  2. Dalam menuliskan script xhtml harus teliti karena fungsi utama apabila halaman web tersebut diloaded ke CSS tidak akan mendukung.
  3. 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 .

  4. 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. 
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s