MODUL II, WEB 1

PENGATURAN TEXT
 

1.      TUJUAN
a.            Mahasiswa dapat membuat tampilan dokumen HTML dengan menggunakan permainan warna, dan berbagai jenis pengaturan teks lainnya.
b.            Mahasiswa dapat membuat daftar item (list) dalam dokumen html.
2.      TEORI SINGKAT
         Menampilkan tulisan/teks pada halaman web, dengan mengetikkan teks dalam tag …. dan untuk mengatur peletakkan teks, ada beberapa tag yang digunakan antara lain: center, div, B, small, big, u, I, sub, sup, tt, font.
         Sedangkan untuk pengaturan font dapat diatur pada body text juga dengan cara menambahkan atribut font color=”warna”, dan bgcolor=”warna”. Ukuran font dapat ditentukan dengan atribut size yang dituliskan dengan cara font size=”+4” dan seterusnya dengan merubah value angka.
         Untuk pengaturan letak text kita dapat menggunakan atribut align dengan value isi atribut center, left, right dan justify.
3.      PRAKTEK
 a.     Mencoba scrip sebagai berikut:
Teknologi web pada sisi server memungkinkan pemrosesan kode ini dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server.

beberapa contoh teknologi yang berjalan diserver adalah:

    Common Gateway Interface

    Properietary Web SErver API
    Active SErver Page (ASP)
    Server-Side JavaScript
    Java Servlets dab JavaServer Page (JSP)
    PHP

         Pembahasan:
         Dengan menggunakan perintah
[isi kalimat]

  akan menghasilkan format paragraph rata kanan dan kiri. Sedangkan perintah
berfungsi mengenter satu baris kalimat. Sehingga jarak terlihat lebih lebar lebih kurang 2 spasi. Sebenarnya sesuah ada
tidak perlu ada
karena akan menambah jarak, kecuali hal tersebut memang dikehendaki.

         Perintah

merupakan script untuk menampilkan kalimat yang ada di dalamnya mempunyai karakter font yang lebih besar. Biasanyanya

dimanfaatkan untuk tulisan atau kalimat judul sebagai sebuah penekanan terhadap judul tersebut. Besar kecilnya font tersebut tergantung pada besar kecilnya angka dibelakang H. Angka yang mendefinisikan sebagai font terbesar adalah

mulai mengecil sampai pada angka

. Jika diisi dengan angka lebih dari 3 maka tidak ada efeknya. Apabila diisi dengan 0, maka font menjadi normal.

         Untuk memberikan tab, atau menjorok ke dalam kita dapat menggunakan fungsi
    dimana baris-baris dan paragraph setelah tanda berikut akan dicetak menjorok ke dalam sebesar satu tab.  Untuk menormalkan semua perintah tersebut digunakan backslash pada perintah yang sama didalam tanda kurung dibelakangnya. Sebagai contoh semial
    ditutup dengan
    , demikian juga dengan perintah yang lainnya.

                      Hasil Script:
                     
    Coba kita lihat ditampilan di bawah ini dapat terlihat jelas fungsi alight=”justify”. Tab juga mengalami perubahan ketika kita tambah lagi satu perintah
    , lebih menjorok ke dalam.

                     
             b.      Membuat bullet pada item list.
    Teknologi web pada sisi server memungkinkan pemrosesan kode ini dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server.

    beberapa contoh teknologi yang berjalan diserver adalah:

  • Common Gateway Interface
  • Properietary Web SErver API
  • Active SErver Page (ASP)
  • Server-Side JavaScript
  • Java Servlets dab JavaServer Page (JSP)
  • PHP

                  Hasil Script:                      
                 
                  Pembahasan:
     Dengan menambah satu perintah lain yaitu
  • maka akan terlihat tampilan bullet pada kalimat yang ditambahi perintah tersebut sebagaimana tampilan di atas. Untuk menghilangkan efek bullet tinggal menuput tag tersebut dengan
      .

               c.      Ketiklah program berikut
      STIMIK AKAKOM YOGYAKARTA

      Jl. Raya Janti No. 143
      Yogyakarta55198

      Jenjang S1

      Teknik Informatika

      Sistem Informatika

    Jenjang D3

      Manajemen Informatika
      Teknik Komputer
      Komputerisasi Akuntansi

    STIMIK AKAKOM YOGYAKARTA

    Yang Pertama dan yang Utama

    Pembahasan:
    Beberapa perintah sudah kita bahas, perintah lain yang belum kita bahas adalah:
    Dengan perintah di atas memerintah browser menampilkan latar belakang web berwarna abu-abu. Apabila kita mengubah nilai bgcolor diantara tanda “ petik. Maka warna akan berubah sesuai dengan kode. Dapat pula kita memberikan nilai berupa nama seperti red, aqua, blue, yellow, dsb.
    STIMIK AKAKOM YOGYAKARTA

    Sedangkan di atas ini adalah script untuk menampilkan font tulisan STIMIK AKAKOM YOGYAKARTA dengan warna biru yang besarnya normal.
    Jl. Raya Janti No. 143
    Dari awal font adalah pemformatan untuk huruf berupa color yaitu pendefinisian warna huruf. Pada kasus ini warna yang dipilih adalah warna aqua, kemudian size adalah besarnya font yang digunakan interval antara -4 s/d 4.
    Yogyakarta 55198
    Demikian juga halnya dengam script di atas adalah untuk memformat font sesuai dengan ukuran yang diinginkan pada tulisan “Yogyakarta 55198”.

    Script HR adalah untuk menampilkan sebuah garis horizontal, dengan letak berada di tengah halaman web diatur pada pernyataan color=”#0000FF”. Sedangkan noshade berfungsi untuk memberikan ketebalan garis sebesar 10 point.

    STIMIK AKAKOM YOGYAKARTA

    Yang Pertama dan yang Utama

                      Sebagaimana di atas, perintah 

    menampilkan tulisan STIMIK AKAKOM YOGYAKARTA dengan bentuk besar dan align=”right” memposisikan pada sebelah kanan halaman. Seharusnya kalau tidak ada maksud mengubah besar dan posisi tulisan tidak perlu dituliskan ulang pada baris berikutnya, cukup dengan tidak menutup script

    , termasuk peritah

    STIMIK AKAKOM YOGYAKARTA
    Yang Pertama dan yang Utama

                      Hasil Script:
                     
    4.      LATIHAN
             Susunlah script HTML agar menghasilkan tampilan web yang baik.
    • ini type circle
    • ini type disk
    • ini type square

    1. ini penomeran
    2. ini juga penomeran

    1. ini penomeran dengan abjad
    2. ini juga dengan abjad

             Hasil Script:
            
             Pembahasan:
             Script web di atas adalah cara menampilkan daftar list agar terlihat rapi dan representative. Salah satu caranya adalah dengan menampilkan dalam bentuk numbering dan bullet. Dengan cara ini pembaca akan melihat batasan keanggotaan sebagai daftar list. Kita dapat menggunakan berbagai macam tipe bullet, khususnya tiga bentuk yang bisa digunakan yaitu: type circle (lingkaran), disk (bulat tertutup) dan square (kotak). Adapun penggunaannya adalah sebagai berikut:
    Keterangan
    Berfungsi untuk menyiapkan area untuk daftar lis dengan criteria non penomeran dan akan menempatkan teks menjorok ke dalam 1 tab.
  • ini type circle
  • Memformat bullet dengan tipe circle
  • ini type disk
  • Memformat bullet dengan tipe Disk
  • ini type square
  • Memformat bullet dengan tipe Square
    Mengembalikan posisi teks ke left 0
    Sebagaimana
      namun dengan model penomeran. Adapun tipe penomeran dapat menyesuaikan dengan variable lainnya, sebagaimana dibawah.
  • ini penomeran
  • Berarti tipe penomeran menggunakan angka arab dan dimulai dari angka 1
  • ini juga penomeran
  • Melanjutkan penomeran di atasnya dengan angka 2.
    Mengembalikan posisi tab dan menutup daftar list.
  • ini penomeran dengan abjad
  • Jika penempatannya seperti ini maka akan terjadi perubahan penomeran. Pada baris ini memang akan diberi nomer abjad dari a, namun untuk selanjutnya akan berubah menjadi penomeran arab walaupun melanjutkan menjadi nomer 2. Oleh karena itu yang paling tepat adalah dengan meletakkan tipe pada tab
      sehingga menjadi
  • ini juga dengan abjad
  • Melanjutkan penomeran tetapi dengan angka 2 bukan melanjutkan penomeran abjad menjadi b.
    Menutup tag daftar list
            
             Coba lihat hasil tampilan di bawah ini para baris ke 7 terlihat bahwa penomeran tidak melanjutkan menjadi b tetapi berubah menjadi 2 sebagaimana keterangan di atas.
    <!–[if gte vml 1]>

    Sebuah kesalahan perintah! Seharusnya tag tipe

      <![endif]–><img alt="Line Callout 2: Sebuah kesalahan perintah! Seharusnya tag tipe

        ” height=”91″ src=”file:///C:/Users/De/AppData/Local/Temp/msohtmlclip1/01/clip_image012.gif” v:shapes=”_x0000_s1027″ width=”321″ />

              

      5.      TUGAS
               Buatlah sebuah halaman web untuk menampilkan data pribadi tentang anda,
               Ketentuan:
      o   Data tentang adan terdiri dari tiga paragraph
      o   Dengan masing-masing paragraph menggunakan pengaturan teks yang berbeda-beda baik untuk ukuran font, face font, maupun warna, serta align font.
      o   Salah satu dari paragraph tersebut mengandung tadna bullet(misalnya untuk menampilkan jenis-jenis makanan kesukaan Anda, dll)


      Pengerjaan:
      PROFIL MUHAMMAD ARIEF SATEJO KINADY

      Selokambang Rt 02 Tamantirto Kasihan Bantul

      1. Nama     : Muhammad Arief Satejo Kinady
      2. NIM      : 093110035
      3. Jurusan  : Manajemen Informatika
      4. Jenjang  : D3
      5. Alamat   : Selokambang Rt 02 Tamantirto Kasihan


      • Saya adalah seorang suami dengan satu orang istri dan dua orang anak. Anak pertama sudah kelas 1 SMP, sedang yang kedua baru kelas 1 SD. Mereka hoby makan makanan berasal dari laut, semacam kerang, kepiting, cumi dan ikan-ikanan laut.
      • Kebiasaan kami setiap hari libur mencari kepiting dan kerang mentah di jln. Cik Di Tiro. Karena disana ada distributor jenis ikan-ikannan termasuk kepiting dan kerang. Harganya juga lumayan murah. Hanya saja kita perlu belajar cara memasaknya. Bagi kita sih, enjoy,cukup direbus dengan bawang merah, bawang putih dan garam. Rasanya sudah nikmat. Hanya saja jangan lupa dibersihkan ekstra agar rasanya lebih enak. Bila ada telur kepiting rasanya lebih asoi, wuich nikmat sekali. Biasanya dengan 5 buah kepiting rebus dan satu piring kerang gorong kami berempat bisa menghabiskan 1 kiloan nasi.
      • Selain itu Kami senang jalan-jalan pakai sepeda motor, lebih nyaman dan dapat menikmati keindahan alam. Kami sering touring ke Surabaya, Semarang, Cilacap dan Tuban.

      Hasil script:
      KESIMPULAN:
      • Harus berhati-hati dan cermat dalam membuka dan menutup tag karena bisa jadi menyebabkan tampilan tidak seperti yang kita inginkan.
      • Cukup mudah untuk membuat tampilan web dengan script java setidaknya untuk web static.
    1. 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