Pengantar Pemrograman WEB
21
PENGANTAR PEMROGRAMAN WEB Swasta Priambada
description
Pengantar Pemrograman WEB. Swasta Priambada. Pengantar HTML. Teori Dasar HTML. Untuk membangun sebuah web page , dibutuhkan sebuah bahasa pemrograman yang lebih dikenal dengan web scripting . - PowerPoint PPT Presentation
Transcript of Pengantar Pemrograman WEB
PENGANTAR PEMROGRAMAN WEBSwasta Priambada
PENGANTAR HTML
Teori Dasar HTML Untuk membangun sebuah web page, dibutuhkan sebuah
bahasa pemrograman yang lebih dikenal dengan web scripting.
Berdasarkan letak proses interpreter, maka web scripting dibagi menjadi 2, yaitu yang bersifat client side dan server side.
Client side dilakukan oleh web browser seperti Internet Explorer, Firefox, Netscape dan Opera.
Contoh bahasa client side: HTML, CSS, Javascript, VBscript, XML.
Server side dilakukan oleh web server seperti PWS (Personal Web Server untuk sistem operasi Windows 98), IIS (untuk Sistem Operasi Windows 2000/Windows XP), Apache, Tomcat, Xitami, ZOPE.
Untuk contoh bahasa server side: ASP (.Net), PHP, JSP, CFM, CGI/PL
Teori Dasar HTML Web scripting yang bersifat client side akan
menghasilkan web page yang statis, artinya lebih menekankan pada desain format tampilan informasi dan informasi yang disajikan tidak dapat diupdate seketika,
karena tidak dapat dilakukan request interaktif dari pengguna, dan proses tidak terjadi di server sehingga tidak akan menghasilkan output apapun.
Sehingga sangatlah tidak mungkin untuk menciptakan aplikasi web yang bersifat dinamis dengan web scripting yang bersifat client side,
jadi harus dikombinasikan dengan web scripting yang bersifat server side.
Teori Dasar HTML HTML (Hypertext Markup Language) adalah bahasa dasar untuk
web scripting bersifat client side yang memungkinkan untuk menampilkan informasi dalam bentuk teks, grafik, multimedia, serta untuk menghubungkan antartampilan web page (hyperlink)
Tidak diperlukan suatu program editor khusus untuk menggunakan kode-kode perintah HTML.
Dapat dipergunakan Notepad, Edit Plus, atau editor lain yang berbasis GUI (Graphical User Interface) seperti Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive.
Dengan program ini, kita tidak perlu mengetik kode HTML-nya, semua perintah diwujudkan secara icon base.
Tetapi kemampuan penguasaan terhadap kode-kode HTML sangatlah diperlukan, sehingga disarankan untuk menguasai kode perintah HTML menggunakan editor teks (contoh Notepad)
Aturan Penulisan HTML (1) Memiliki struktur minimal dari dokumen
HTML (head dan body)
Aturan Penulisan HTML (2) Bentuk tulisan di atas disebut “tag”. Tag memiliki pembuka <tag>, tetapi tidak semua
memiliki penutup </tag>. Tag memberi instruksi interpreter kepada browser
(misalnya Internet Explorer). Contoh pada dokumen di atas, tag yang pertama
memberitahukan kepada browser bahwa dokumen HTML dengan tag pembuka <HTML> pada awal dokumen, dan tag penutup </HTML> pada akhir dokumen.
Dalam dokumen HTML, penggunaan tag-tag penutup HTML disesuaikan dengan urutan penggunaan tag tersebut.
Aturan Penulisan HTML (3) Di dalam sebuah tag HTML, terdapat atribut
tag. Atribut yang terkandung dalam tag satu
dengan yang lain belum tentu sama. Atribut yang dipakai tidak memiliki urutan
pendefinisian tertentu. Atribut tag digunakan untuk memodifikasi
sifat-sifat dari tag, bergantung dari nilai yang diberikan.
Namun, juga ada atribut tag yang tidak memiliki nilai.
Aturan Penulisan HTML (4) Penulisan tag bersifat non-case sensitive.
Artinya, bahwa penulisan tag dengan huruf besar atau dengan huruf kecil akan dianggap sama. Sebagai contoh: <HTML> akan sama dengan <html> atau <HtMl>
Aturan Penulisan HTML (5) Setelah tanda ”<“ harus langsung diikuti oleh
tag dan ditutup dengan tanda”>”, tidak boleh ada spasi, angka, tanda baca.
Nama atau istilah untuk tag adalah standart. Tidak dapat dibuat sendiri.
Nama tag harus mengikuti standar W3C, yaitu sebuah lembaga atau organisasi internasional yang mengatur standarisasi web (http://www.w3c.org)
Aturan Penulisan HTML (6) Dalam dokumen HTML diperlukan tag
<HEAD></HEAD>. Di dalam tag ini diletakkan judul web page
dengan menggunakan tag <TITLE>judul web page</TITLE>
Sedangkan di dalam tag <BODY></BODY> berisikan isi dari web page.
Untuk eksistensi dari file HTML, perlu ditambahkan .html atau .htm di belakang nama file-nya (contoh: coba.htm)
Aturan Penulisan HTML (7) Penulisan tag-tag HTML tidak akan
terpengaruh oleh perintah langsung keyboard seperti penekanan tombol enter atau spasi. Sehingga diperbolehkan menyusun tag-tag HTML secara continue horizontal seperti berikut:<HTML><HEAD><TITLE>Judul Web Page</TITLE></HEAD></HTML>
2. Heading Heading digunakan untuk menampilkan
format huruf yang besar dan dicetak tebal, biasanya digunakan untuk judul topik utama dari sebuah paragraf, ukurannya dari yang terbesar <H1> sampai dengan yang terkecil <H6>
Untuk mengatur posisi heading digunakan atribut “align”, contoh: <H1 align=“…”> ditutup dengan </H1>
Nilai atribut: left (rata kiri), center (rata tengah), right (rata kanan)
3. Paragraf Untuk memformat padagraf agar rata
kiri,, kanan atau tengah, digunakan tag pembuka <P align=“…”> dan penutup </P>
1. Body <BODY bgcolor = “green” text=“yellow”>
4. Breaking Now Tag <Br> digunakan untuk berpindah ke
baris baru dalam isi dokumen. Ini adalah salah satu tag yang tidak
memerlukan tag penutup.
5. Horizontal Ruler Tag ini dibuat untuk membuat garis
horizontal Atibut yang dimiliki adalah “align” untuk
perataan, “size” untuk mengatur ketebalan garis (dalam pixel) dan “width” untuk mengatur lebar garis (dalam pixel atau persen).
Penggunaan satuan persen memiliki arti bahwa ukuran garis horizontal akan diambil persentase terhadap width tampilan jendela. Tag <HR> ini tidak memiliki tag penutup.
6. Preformat Untuk memformat dokumen HTML dengan
menggunakan fasilitas Preformat. Dengan fasilitas ini, tampilan yang akan diformat sama persis dengan isi yang ada dalam tag <PRE>isi</PRE>.
Di dalam tag <PRE> tombol enter untuk ganti baris atau spasi untuk jeda dapat digunakan.
7. Bold, Italic, Under line, Subscript, Superscript, Stripe
Berikut adalah cara memberikan efek cetak huruf dalam dokumen HTML
Untuk memberikan efek huruf tebal (bold)<b>kata atau kalimat</b>
Untuk memberikan efek huruf miring (italic)<i>kata atau kalimat</i>
Untuk memberikan efek huruf yang diberi garis bawah (under line)<u>kata atau kalimat</u>
7. Bold, Italic, Under line, Subscript, Superscript, Stripe
Untuk memberikan efek huruf sebagai superscript<sup>kata atau kalimat</sup>
Untuk memberikan efek huruf sebagai subscript<sub>kata atau kalimat</sub>
Untuk memberikan efek huruf sebagai huruf yang dicoret (strike)<s>kata atau kalimat</s>
8. List Dalam dokumen HTML dapat menamplikan daftar list seperti bullet
dan numbering pada MS word UnorderedList (mirip bullet) tag <UL> sebagai pembbuka dan </UL>
sebagai penutup OrderedList (mirip numbering) tag <OL> sebagai pembuka dan
</OL> sebagai penutup Untuk item-item list yang ada di dalamnya digunakan tag <LI> untuk
mengawali. Atribut “type” unorderedlist, yaitu bentuk bullet-nya: disc (default),
circle (bentuk lingkaran berlubang), square (kotak) Atribut “type” ordered list:
1 untuk penomoran 1, 2, 3… A untuk penomoran A, B, C… I untuk penomoran I, II, III… A untuk penomoran a, b, c… i untuk penomoran i, ii, iii…
