MODUL II, WEB 1

PENGATURANTEXT
 

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

beberapa contoh teknologi yang berjalandiserver adalah:

    Common Gateway Interface

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

         Pembahasan:
         Denganmenggunakan perintah
[isi kalimat]

  akan menghasilkan format paragraph rata kanandan kiri. Sedangkan perintah
berfungsi mengenter satu bariskalimat. Sehingga jarak terlihat lebih lebar lebih kurang 2 spasi. Sebenarnyasesuah ada
tidak perlu ada
karena akan menambah jarak,kecuali hal tersebut memang dikehendaki.

         Perintah

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

dimanfaatkanuntuk tulisan atau kalimat judul sebagai sebuah penekanan terhadap judultersebut. Besar kecilnya font tersebut tergantung pada besar kecilnya angkadibelakang H. Angka yang mendefinisikan sebagai font terbesar adalah

mulai mengecil sampai pada angka

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

         Untukmemberikan tab, atau menjorok ke dalam kita dapat menggunakan fungsi
    dimana baris-baris dan paragraph setelah tanda berikut akan dicetak menjorok kedalam sebesar satu tab.  Untukmenormalkan semua perintah tersebut digunakan backslash pada perintah yang samadidalam tanda kurung dibelakangnya. Sebagai contoh semial
    ditutupdengan
    , demikian juga dengan perintah yang lainnya.

                      HasilScript:
                     
    Cobakita lihat ditampilan di bawah ini dapat terlihat jelas fungsialight=”justify”. Tab juga mengalami perubahan ketika kita tambah lagi satuperintah
    , lebih menjorok ke dalam.

                     
             b.      Membuat bullet pada item list.
    Teknologi web pada sisi server memungkinkanpemrosesan kode ini dalam server sehingga kode yang sampai pada pemakai berbedadengan asli pada server.

    beberapacontoh teknologi yang berjalan diserver adalah:

  • Common GatewayInterface
  • Properietary Web SErverAPI
  • Active SErver Page(ASP)
  • Server-SideJavaScript
  • Java Servlets dab JavaServerPage (JSP)
  • PHP

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

               c.      Ketiklah program berikut
      STIMIK AKAKOMYOGYAKARTA

      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:
    Beberapaperintah sudah kita bahas, perintah lain yang belum kita bahas adalah:
    Dengan perintah di atas memerintah browser menampilkan latarbelakang web berwarna abu-abu. Apabila kita mengubah nilai bgcolor diantaratanda “ petik. Maka warna akan berubah sesuai dengan kode. Dapat pula kitamemberikan nilai berupa nama seperti red, aqua, blue, yellow, dsb.
    STIMIK AKAKOMYOGYAKARTA

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

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

    STIMIK AKAKOM YOGYAKARTA

    Yang Pertama dan yang Utama

                      Sebagaimanadi atas, perintah 

    menampilkantulisan STIMIK AKAKOM YOGYAKARTA dengan bentuk besar dan align=”right”memposisikan pada sebelah kanan halaman. Seharusnya kalau tidak ada maksudmengubah besar dan posisi tulisan tidak perlu dituliskan ulang pada barisberikutnya, cukup dengan tidak menutup script

    , termasuk peritah

    STIMIK AKAKOM YOGYAKARTA
    Yang Pertama dan yangUtama

                      HasilScript:
                     
    4.      LATIHAN
             Susunlah scriptHTML agar menghasilkan tampilan web yang baik.
    • initype circle
    • initype disk
    • initype square

    1. ini penomeran
    2. ini juga penomeran

    1. inipenomeran dengan abjad
    2. ini juga denganabjad

             HasilScript:
            
             Pembahasan:
             Scriptweb di atas adalah cara menampilkan daftar list agar terlihat rapi danrepresentative. Salah satu caranya adalah dengan menampilkan dalam bentuknumbering dan bullet. Dengan cara ini pembaca akan melihat batasan keanggotaansebagai 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 sebagaiberikut:
    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
            
             Cobalihat hasil tampilan di bawah ini para baris ke 7 terlihat bahwa penomerantidak melanjutkan menjadi b tetapi berubah menjadi 2 sebagaimana keterangan diatas.
    <!–[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 sebuahhalaman web untuk menampilkan data pribadi tentang anda,
               Ketentuan:
      o  Data tentang adan terdiri dari tigaparagraph
      o  Dengan masing-masing paragraphmenggunakan pengaturan teks yang berbeda-beda baik untuk ukuran font, facefont, maupun warna, serta align font.
      o  Salah satu dari paragraph tersebutmengandung tadna bullet(misalnya untuk menampilkan jenis-jenis makanan kesukaanAnda, dll)


      Pengerjaan:
      PROFIL MUHAMMAD ARIEF SATEJOKINADY

      Selokambang Rt 02 Tamantirto KasihanBantul

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


      • Saya adalahseorang suami dengan satu orang istri dan dua orang anak. Anak pertama sudahkelas 1 SMP, sedang yang kedua baru kelas 1SD. Mereka hoby makan makanan berasal dari laut, semacam kerang,kepiting, cumi dan ikan-ikanan laut.
      • Kebiasaan kamisetiap hari libur mencari kepiting dan kerang mentah di jln. Cik Di Tiro. Karena disana adadistributor jenis ikan-ikannan termasuk kepiting dan kerang. Harganya jugalumayan murah. Hanya saja kita perlu belajar cara memasaknya. Bagi kita sih,enjoy,cukup direbus dengan bawang merah, bawang putih dan garam. Rasanya sudahnikmat. Hanya saja jangan lupa dibersihkan ekstra agar rasanya lebih enak. Bilaada telur kepiting rasanya lebih asoi, wuich nikmat sekali. Biasanya dengan 5buah kepiting rebus dan satu piring kerang gorong kami berempat bisamenghabiskan 1 kiloan nasi.
      • Selain itu Kamisenang jalan-jalan pakai sepeda motor, lebih nyaman dan dapat menikmatikeindahan 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