MODUL WEB

pertemuan pertama pemrograman berbasis WEB

pertemuan pertama program berbasis WEB

pengertian HTML
HTML atau hyper text markup language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web
###struktur dasar html###
dalam penggunaannya,sebagian besar kode html harus terletak diantara kountainer,yaitu diawali dengan(nama tag) dan diakhiri dengan(/nama tag)
(html)
(head)
(title)judul form/caption(title)
(/head)
(body)
ISI WEB
(/body)
(/html)
pengertian WEB
WEB adalah teknologi internet yang menyediakan inforamasi dalam bentuk text,fisik,vidio,sound.
- format text
- format gambar
- format table
- format form
- format tag
- dinamisasi WEB tergbagi atas 2 yaitu:
(-)WEB setatis adalah isi tidak berubah jika kode tidak berubah
(-)WEB dinamis adalah isi WEB dapat berubah tanpa merubah kode
cuman itu yang aku ingat....
Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam
atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink).
Secara garis besar website dibagi menjadi 2 model : Website Statis dan Website Dinamik.
Website Statis (isi informasi website tetap, jarang berubah, dan isi informasinya hanya searah dari pemilik website).
Sedangkan Website Dinamis (isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah
berasal dari pemilik dan pengguna website, jadi ada hubungan timbal balik).
Biasanya Website menggunakan Domain dan Hosting berbayar jadi siapkan modal yang cukup jika ingin membuat website.
2. Blog
Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai
posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru
dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya
dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

free music at divine-music.info

PERTEMUAN KE DUA
,14-03-2013
materi:
1.mendalami tag-tag dasar
2.format table



(p) membuat pragrap(/p)
(b) membuat tulisan tebal(/b)
(i) membuat tulisan miring(/i)
(u) membuat tulisan garis bawah(/u)
(sup) menaikkan spasi(/sup)
(sub) menurunkan spasi(/sub)
(pre) membuat tampilan lebih bagus(/pre)
(hr) membuat garis horizontal(/hr)
(marquee) membuat tulisan berjalan(/marquee)
(center)membuat tulisan ketengah(/center)
(strike) tulisan di coret(/strike)
(font) membuat ukuran(/font)
(br) membuat spasi ke bawah(/br)
(a href) membuat loncatan ke laman berikut(/a href)



PERTEMUAN KE TIGA
 
hari senin/tgl-21-03-2013
1.web tamplate
web tamplate adalah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis
maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.
2.formulir

di pertemuan ketiga ini kita akan membahas bagaimana cara membuat table

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS,
table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file
yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun
jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag adalah untuk membuat tabel
kemudian di ikuti dengan tag (table rows) adalah untuk membuat baris pada tabel kemudian tag (table data)
adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu
sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.


GOOGLE

free wesite tamplate

search

table banyak digunakan dalam mengatur tata letak informasi data dalam suatu website
contoh: table 5 x 3

no	nama	hp
1	sembiring	0878375837
2	karo-karo	08793759237
3	ginting	087433874638
4	perangin-angin	088463563

gambar di bawah ini merupakan contoh membuat table

PERTEMUAN KE EMPAT
hari/tanggal :kammis/04-04-2013
materi:
1.antar muka web
2.merancang foemulir pendahuluan

web diakses banyak pengguna,dengan demikian,
antar muka web diusahakan sesuai dengan kebutuhan
pengguna tren antar muka web(web user interface)

kearah mutimedia:
-vidio
-animasi
-gambar
-teks
-suara contoh antar muka web

user

pasword

>

< width=100%>
menu home kegiatan service service kontak	web programming pemrograman web merupakan salah satu mata kuliah di priodi teknik informatika,fakultas ilmu komputer,universitas katolik st.thomas sumatera utara medan

PERTEMUAN KELIMA

materi:
frame

HTML (Frame)

    Frame digunakan untuk membangun web page yang memungkinkan penampilan beberapa web page dalam satu window browser. Konsepnya hampir sama dengan table. Perbedaannya terletak pada isi baris dan kolom. Pada table isi baris dan kolom berupa sel, sedangkan pada frame berupa dokumen HTML atau file lainnya.

    Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset  yang akan membungkus keseluruhan file frame. Perlu diingat bahwa pendefinisian frameset tidak boleh dituliskan dalam tag <body></body>. Untuk membuat frame pada dokumen HTML digunakan tag <frameset> dan <frame>. Berikut penjelasan tag-tag tersebut beserta atribut-atributnya : 

Tag-Tag Pembentuk Frame

Elemen	Penjelasan
<frameset> </frameset>	Mendefinisikan sebuah frame dalam HTML.
<frame>	Untuk menampilkan dokumen pada suatu   frame.

Atribut-Atribut Tag

<frameset> </frameset>
rows="..."	Membagi frame ke dalam baris secara otomatis    sesuai dengan ukuran yang ditentukan   (lihat : Aturan pendefinisian ukuran).
cols="..."	Membagi frame ke dalam kolom secara otomatis   sesuai dengan ukuran yang ditentukan   (lihat : Aturan pendefinisian ukuran).
<frame>
src="..."	Menentukan nama file yang akan ditampilkan pada    baris/kolom frame.
name="..."	Sebagai penanda yang akan digunakan oleh     hyperlink untuk mengaktifkan link halaman ke    dalam frame tertentu yang sesuai dengan target    name-nya.

Aturan Pendefinisian Ukuran :

• Nilai angka dalam pixel.
• Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan area tampilan yang tesedia.
• Tanda bintang (*) yang menandakan sisa ruang yang masih ada.

           Contoh :                     Area tampilan dibagi menjadi 2 baris :

                        <frameset cols="40%,*">     
                         <frame src="url">          
                         <frame src="url">          
                        </frameset>                 

 
                                             Area tampilan dibagi menjadi 3 kolom :

                        <frameset cols="40%,20%,*"> 

                         <frame src="url">          
                         <frame src="url">          
                         <frame src="url">          
                        </frameset>                 

    Dengan mendefinisikan ukuran-ukuran tersebut maka frameset otomatis akan membagi area tampilan frame sebanyak pendefinisian ukurannya.

Membuat Link Pada Frame
    Membuat link pada frame tidak jauh berbeda seperti halnya membuat link pada halaman web biasa (tanpa frame). Hanya ada sedikit perbedaan, terutama pada target link. Berikut penjelasannya :

Target Frame

Target	Penjelasan
_self	Digunakan apabila target frame adalah frame tempat link   berada.
_top	Digunakan apabila target link adalah window tempat frame   berada. Dengan target ini definisi frame pada window    browser otomatis akan hilang dan diganti dengan definisi     frame yang baru (jika ada).
_parent	Digunakan apabila target link adalah setingkat di atas     frame link berada. Akibat dari target frame _parent akan   sama jika tempat frame link berada hanya satu level di   bawah definisi frame window.
_blank	Digunakan apabila target link adalah sebuah window baru.

    Selain target-target di atas, kita juga bisa membuat link navigasi dengan cara memberi atribut "name" pada frame yang dituju, lalu target dari link-nya adalah name dari frame tersebut.

    Contoh :

• Frame name  :    <frame src="url" name="Nama">                 

• Target link     :    <a href="url" target="Nama">Link Navigasi</a> 

IFRAME
    Dalam dokumen HTML suatu frame dapat dibuat tanpa harus membagi seluruh window browser dengan menggunakan tag <iframe>. Tampilan frame ini mirip dengan text-box, jika browser melakukan scroll maka frame ini juga ikut ter-scroll.

    Tag <iframe> juga memiliki atribut src dan name yang fungsinya sama seperti pada tag <frame>, lalu width dan height untuk mengatur luas area frame yang akan ditampilkan, serta atribut align untuk mengatur posisi dari frame dalam dokumen HTML.

pertemuan keenam

Selasa, 25 Juni 2013

Struktur dan Sintak Dasar Javascript
Ditinjau dari segi pembuatan dan penulisannya, javascript tidak jauh beda dengan HTML seperti pada pertemuan awal kita, sehingga file yang menggunakan sintak javascript di dalam script HTML dapat menggunakan ekstension HTML juga.Script dasar dalam javascript diawali dengan sintak dan diakhiri dengan sintak . Agar text editor dapat mengidentifikasikan bahwa sintak tersebut merupakan sintak javascript yang digunakan untuk aplikasi di web, maka perlu penambahan sintak di dalam sintak script yaitu:
Sedangkan ruang yang ada di antara sintak javascript tersebut kita dapat mencantukkan ekspresi, fungsi, pernyataan dan lain sebagainya sesuai keinginan kita. Di dalam penulisan javascript untuk menampilkan suatu pernyataan atau kalimat kita dapat menggunakan sintak:
Document. write( “kalimat yang akan di tampilkan”);
Dan pada setiap akhir pernyataan umumnya disertai dengan tanda titik koma (;) kecuali pada kondisi tertentu saja yang akan kita bahas pada bab­bab berikutnya. Terkadang ada beberapa browser yang lama tidak dapat mengidentifikasikan script javascript secara baik sehingga tampilan di browser tersebut akan menjadi kurang indah untuk dilihat. Oleh karena itu kita harus mengantisipasinya dengan menggunakan tanda “<!­“ setelah penulisan dan tanda “//­>” sebelum penulisan .
Di dalam script javascript juga dikenal tanda komentar yang apabila kita bubuhkan tanda tersebut maka kalimat yang ada di samping ataupun di antara tanda tersebut perfungsi sebagai komentar saja dan tidak tertampilkan di browser. Tanda ini sangat membantu bagi pemula atau yang baru mempelajari javascript agar lebih memahami fungsi maupun peran sintak yang di terangkan oleh tanda keterangan tersebut. Tanda tersebut ada beberapa jenis antara lain:
1. “//”, Tanda tersebut apabila kita letakkan di text editor yang menjadi wahana pembuatan script javascript maka kalimat apapun yang ada di sampingnya akan menjadi keterangan dan tidak dapat tertampilkan di browser. Tanda tersebut biasanya digunakan untuk keterangan yang hanya satu baris saja.
2. “/* */ “, tanda tersebut merupakan tanda komentar yang apabila ada kalimat di antaranya maka kaliamat tersebut akan menjadi keterangan biasa dan tidak tertampilkan oleh browser. Tanda ini biasanya digunakan pada keterangan yang sbanyaknya beberapa baris.
Dari segi peletakan posisi sintak javascript, kita dapat membaginya menjadi 2 kondisi, sebagai berikut:
1. Sintak javascript ditulis dengan file yang berbeda.
2. Sintak javascript terintegrasi dengan sintak HTML.
Di bawah ini kita akan menguraikan secara rinci perbedaan antara kedua kondisi di atas yaitu:
1. Sintak javascript ditulis dengan file yang berbeda
Tata cara penulisan seperti ini yaitu memisahkan sintak javascript dengan sintak HTML dapat memudahkan bagi pembuat web apabila kita ingin membuat web yang berisi berbagai aplikasi javascript di setiap halaman yang kita buat. Penulisan secara manual sintak javascript di setiap lembar web akan cukup merepotkan bagi kita terlebih lagi hal tersebut dapat memperberat kerja server karena besarnya file yang harus di kerjakan di server akibat banyaknya script javascript yang berulang­ulang di setiap file web tersebut. Hal ini dapat di atasi dengan membuat suatu file khusus bagi script javascript yang sama dari beberapa file yang menggunakan script tersebut sehingga file utama akan mencari file tersebut dengan sintak tertentu.
Script javascript yang kita buat tersebut kemudina kita simpan dalam suatu
file dengan ekstension “.js”. Dalam file tersebut kita tidak perlu
mencatumkan sintak pembuka dan sintak penutup .File utama terserbut akan mencari file yang berekstention “.js” tersebut dengan sintak :
Dengan menggunakan sintak terserbut, kita dapat memanggil kapanpun dan diposisi manapun kita ingin menampilkan aplikasi javascript. Metode ini sangat memudahkan dan cukup praktis bagi pembuat web.
2. Sintak javascript terintegrasi dengan sintak HTML
Metode ini sudah cukup banyak digunakan oleh para pembuat web di dunia dan cakupan script yang digunakan tidaklah terlalu banyak sehingga tidak terlalu memberi efek berarti bagi daya kerja server untuk mengirim web yang beraplikasi javascript ke browser. Sintak­sintak javascript yang menggunakan metode ini biasanya tidak terlalu sering dibuat oleh sipembuat web karena bila ada script javascript yang ingin digunakan secara berulang­ulang maka akan lebih efisien kalau dibuat dengan cara seperti cara nomor di atas. Bila kita letakkan sintak javascript bersamaan dengan sintak HTML biasa dan kita buat secara berulang­ulang di setiap lembar web yang kita buat maka hal tersebut akan menjadikan ukuran web kita akan menjadi lebih besar dibandingkan bila kita menggunakan cara pertama seperti di atas.
Posisi Script Javascript di File HTML
Dari segi penulisan javascript, kita dapat menulis sintak (script) javascript di beberapa posisi pada bagian tertentu di sintak HTML yang telah ada. Di bawah ini kita akan membahas berbagai posisi yang dapat diletakkan sintak javascript di bagan file HTML seperti pada bagian HEAD maupun BODY.
1. Script javascript diletakkan di antara ….
Posisi ini sering sekali kita jumpai hampir disetiap web. Posisi ini cukup membantu kecepatan tampilan web yang menggunakan aplikasi javascript. Karena sifatnya interpreter, maka ketika browser pertama sekali membaca sebuah web yang dipanggil olehnya, apabila script javascript tersebut diletakkan di antara sintak … . maka browser akan pertama sekali membaca dan mengidentifikasi sintak tersebut sebelum browser membaca isi dari . Hal ini sangat membantu dari segi kecepatan tampilan sebuah web di browser.
2. Script javascript diletakkan di antara ….
Penempatan script javascript di antara sintak BODY merupakan salah satu metode posisi pengetikan script javascript selain seperti yang di atas. Jika kita meletakkan script javascript di dalam sintak BODY maka ketika browser menerima sebuah web dari salah satu web server maka sintak javascript dan sintak HTML lainnya akan bersamaan diproses sehingga kecepatannya akan sedikit berkurang bila dibandingkan sintak javascript diletakkan di antara HEAD. Hal ini disebabkan javascript bersifat interpreter. Penempatan posisi ini juga dapat mengatur posisi aplikasi javascript pada tubuh website yang kita buat dengan mengaturnya melalui table agar preposisi javascript dapat dengan mudah diletakkan

 struktur java script

<script>
      <peryataan>
  </script>

contoh 1.
kode js untuk mencetak string unika santho thomas
<script>
    objek
    document.write("unika st.thomas");
</script>


contoh 2.
   <script>
     var a;
   a=5;
a="unika"
a=w+5+7;
a=a+7;
a="ip"
</script>