Desain dan Pemrograman Web Pengenalan Internet By: Resianta Perangin Angin
INTERNET INTERnational NETworking Merupakan 2 komputer atau lebih yang saling berhubungan membentuk jaringan komputer hingga meliputi jutaan komputer di dunia (internasional), yang saling berinteraksi dan bertukar informasi. INTERconnected NETworking Sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.
SEJARAH INTERNET (1) Departemen Pertahanan Amerika membentuk suatu jaringan komputer yang disebut ARPANET, untuk memungkinkan personil militer dan peneliti sipil bertukar informasi yang berkaitan dengan hal-hal militer. Melalui proyek ARPA (Advance Research Project Agency) mereka mendemonstrasikan hardware dan software komputer yang berbasis UNIX dapat melakukan komunikasi dalam jarak tak berhingga melalui saluran telepon.
SEJARAH INTERNET (2) Diperkenalkan pada Oktober 1972, pada tahun 1981 hanya 231 komputer, tahun 1986 bertambah menjadi 2.308 komputer, dan 1,5 juta komputer pada tahun 1993. Awal tahun 1980 jaringan ARPANET (karena sudah diberhentikan) diubah menjadi TCP/IP (Transmission Control Protocol / Internet Protocol). Dilanjutkan kembali dan dibiayai oleh NSF (National Science Foundation) bekerja sama dengan CSNET (Computer Science Networking) berubah nama menjadi NSFNET.
KATA YANG SERING MUCUL NTERNET (1) WORLD WIDE WEB (WEB) Mengakses informasi berupa teks, gambar, suara, film, dll. Software browser yaitu Microsoft Internet Explorer dan Netscape Communicator. 2. ELECTRONIC MAIL (EMAIL) Surat elektronik adalah pesan yang dapat dikirimkan, diterima maupun disimpan dan sewaktu-waktu dapat diambil kembali oleh user melalui internet/jaringan eletronik. 3. TELNET Kita bisa menggunakan komputer untuk berhubungan dengan komputer orang lain dan mencari atau mengambil informasi yang ada dikomputer tersebut.
FASILITAS INTERNET(2) 4. FILE TRANSFER PROTOCOL (FTP) Melalui FTP user bisa mengirimkan data atau file dari satu komputer ke komputer yang lain, Download dan Upload. 5. CHAT GROUPS / INTERNET RELAY CHAT (IRC) Forum dimana user dapat saling berdiskusi atau berbincang-bincang dengan user lain. 6. NEWSGROUP Ruang percakapan bagi para user yang mempunyai kepentingan bersama.
SYARAT TERHUBUNG INTERNET MODEM JARINGAN SOFTWARE INTERNET SERVICE PROVIDER
ISTILAH DALAM INTENET (1) WEB SITE Tempat sekumpulan halaman web milik seseorang atau suatu perusahaan dikumpulkan dan dikemas. HOMEPAGE Istilah untuk menyebutkan halaman pertama yang akan muncul jika sebuah situs web diakses. URL (Universal Resource Locator) Alamat yang unik dan khas setiap halaman dan situs dalam WWW. Bentuk dasar ; protocol://hostname/[path/[filename]] Contoh http://www.pefeua.tripod.com/indext.htm
ISTILAH DALAM INTENET (2) Protocol Suatu mekanisme yang sudah distandarkan untuk mentransfer atau manipulasi data. HTTP (HyperText Transfer Protocol) Suatu protocol internet yang digunakan oleh WWW. Host Alat yang memiliki Internet protocol (IP) Address di suatu network TCP/IP atau Internet. HYPERTEXT MARKUP LANGUAGE (HTML) Suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsir oleh browser agar halaman tersebut dapat ditampilkan secara benar.
Fungsi Internet Informasi yang didapatkan lebih cepat dan murah Mengurangi biaya kertas dan biaya distribusi Sebagai media promo si Komunikasi interaktif Sebagai alat Research and Development Sarana pendidikan (E-Learning) Perdagangan atau bisnis lewat internet (E-Commerce) Banking
Dampak Penggunaan Internet Dampak Positif Media komunikasi tanpa menggenal waktu Media pertukaran data Media untuk mencari informasi atau data Media Hiburan & Rekreasi Kemudahan bertransaksi dan berbisnis dalam bidang perdagangan sehingga tidak perlu pergi menuju ke tempat penawaran/penjualan dll
Dampak Negatif Penipuan Pornografi Perjudian Cyberstalking Copyright dll
Etika dalam menggunakan Internet Perlakukan E – mail secara Pribadi Jangan Membicarakan orang lain Jangan Menggunakan huruf kapital Jangan Menggunakan format HTML Gunakan singkatan kata yang lazim di gunakan dll
DNS URL Penulisan Alamat Domain Name System Metode untuk mengorganisir seluruh nama – nama komputer yang ada di internet DNS URL Alamat Website Uniform Resource Locator
Penulisan Alamat http:// www usm ac.id http : (hyper text transfer protocol) protocol untuk akses internet/web www : nama mesin yang digunakan (World Wide Web) yang umum digunakan sebagai homepage sebuah institusi usm : subdomain berupa nama organisasi / instansi ac.id : topdomain berupa status / kode
Browsing Mencari dan menemukan informasi di dalam dunia internet (cyber space) Browser machine --> program aplikasi komputer yang digunakan untuk mengakses fasilitas WWW atau homepage Microsoft Internet explorer Mozilla Firefox Opera Safari Netscape Navigator
Web Desain
Halaman Web
Pengertian Web desain adalah Seni dalam membuat suatu halaman website yang melibatkan keindahan dan mekanisme dalam proses membuat sebuah halaman website. Membuat suatu halaman website terlihat lebih menarik dengan mengintegrasikan unsur gambar, animasi, text, dan video
Yang harus dikuasai Web Desainer Seni Keindahan, perpaduan warna, sketsa dasar, ide, multimedia Typografi (kemampuan memilih font yang tepat) Tata letak halaman (menguasai kemampuan membagi ruang halaman) Tool pendukung perancangan web Aplikasi design grafis, aplikasi layout web, animasi web Teknik membuat interface Memahami komponen pembuat web (bahas html, css, multimedia, dll)
Konsep Dasar dan Teknologi Web World Wide Web secara luas lebih dikenal dengan istilah Web/WWW Web pertama kali diperkenalkan pd thn 1992 Internet & web adalah dua hal yang berbeda Internet lebih merupakan perangkat keras (Hardware), sedangkan web adalah perangkat lunak (Software). Internet menggunakan TCP/IP sebagai protokol operasionalnya, sedangkan web menggunakan HTTP (Hyper Text Transfer Protocol).
Standar Teknologi Web Structural Layer Presentation Layer Behavioral Layer
Struktur Layer Layer ini berhubungan dengan struktur dokumen dokumen web. Bagaimana sebuah dokumen tersusun, format apa yang dipakai, tanda atau mark up apa yang digunakan merupakan bagian dari layer ini. Standar Teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML versi terakhir (4.01) yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk menyusun bahasa markup.
Presentation Layer Layer ini berhubungan dengan bagaimana mengatur tampilan dokumen pada layar, suara yang keluar, atau bagaimana format pencetakan dokumen. Pada teknologi web lama bagian ini menyatu dengan structural layer. Tapi pada standar baru, layer ini disarankan untuk dipisah. Yang termasuk teknologi ini adalah Cascading Style Sheets (CSS).
Behavioral Layer Layer ini berhubungan dengan masalah penggunaan bahasa skrip dan pemrogramannya untuk tujuan meningkatkan sisi interaktif dan dinamis halaman web. Yang termasuk dalam layer ini adalah Document Object Model (DOM) dan JavaScript. DOM memungkinkan suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan style dari dokumen. JavaScript merupakan teknologi yang cukup lama dan tetap digunakan untuk menambah dokumen menjadi lebih interaktif.
Prinsip-prinsip web design (1) Situs web dibuat untuk pengguna Seorang web designer harus mem-fokuskan desainnya pada kepentingan pengguna Harus memertimbangkan karakter pengguna, baik dari latar belakang, budaya, pendidikan dan kepentingan yang berbeda Utility dan Usability Utility adalah kegunaan atau fungsionalitas web Usability adalah sifat situs web yang mendukung kemampuan pengguna dalam memanipulasi situs web, sehingga pengguna memperoleh apa yang diperlukan
Prinsip-prinsip web design (2) 3. Correctness Tidak ada kesalahan dalam penulisan script HTML Gambar-gambar yang ditampilkan sesuai yang diharapkan Elemen-elemen yang interaktif (javascript, flash,dll) dapat berfungsi dengan benar Tidak ada kesalahan dalam sistem navigasi (link yang kosong atau broken link) 4. Struktur Link dan Navigasi Terdapat Link untuk menghubungkan satu halaman ke halaman yang lain Perancangan Link agar menarik 5. Tampilan Visual Tampilan visual website sesuai kebutuhan
Unsur-unsur website Domain alamat yang digunakan untuk menemukan situs kita pada dunia internet. Hosting ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di situs. Diperoleh dengan menyewa Script/syntax/bahasa program Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam situs yang pada saat diakses
Memilih Hosting (1) Kapasitas perhatikan kapasitas yang dibutuhkan, hosting yang dipilih harus sesuai kapasitas Teknologi yang digunakan perhatikan teknologi yang disediakan, apakah mendukung teknologi dalam website yang dibuat (misal PHP, Java, dll) Support Periksa apakah perusahaan hosting yang ingin anda beli memiliki layanan support yang baik selama 24jam Database Apabila anda membuat website dinamis, pastikan anda memeriksa apakah mereka menyediakan database
Memilih Hosting (2) Backup pastikan hosting memiliki fasilitas back up setiap hari Bandwidth perhatikan kapasitas bandwidth yang disediakan
Bagian Website Header paket informasi yang sebelum data objek. Memberikan informasi awal atau data yang berguna untuk transmisi tujuan. Umumnya terletak di bagian paling atas halaman website Footer berarti sesuatu yang ada di bagian bawah. Dalam halaman website biasa terdapat di bagian paling bawah halaman website, biasanya berisi copyright atau pemilik website tersebut. Menu bar sederatan menu yang biasanya berisi navigasi ke halaman lain, iklan, social conect, animasi, dll. Content isi website
Web Statis dan Web Dinamis
Pengertian Web statis dan dinamis tidak ditentukan oleh ada atau tidaknya animasi bergerak pada halaman-halaman web, tetapi ditentukan oleh isi atau informasi yang ada pada halaman-halaman tersebut.
Web statis Web dinamis Informasi tidak berubah-ubah Informasi selalu berubah Data tidak update Data terupdate Dokumen web yang dikirim kepada client akan sama isinya dengan apa yang ada di web server Dokumen yang sampai di client akan berbeda dengan dokumen yang ada di web server
Persiapan Pembuatan Web Perangkat Keras Perangkat Lunak Sistem operasi Web server Aplikasi HTML Editor Web Browser
Contoh Aplikasi Berbasis Web E-Commerce: describes the concept of conducting transactions between a buyer and a seller over an electronic network (Internet) E-Business: describes all aspects of doing business on/with/through the Internet. E-Business includes all aspects of E-commerce E-Learning, E-Government, dan lain lain
HTML
Tentang HTML HTML : format standar untuk membuat dokumen web HTML versiterakhir: HTML 4.01 Spesifikasi HTML standar: http://www.w3.org/TR/html4 HTML merupakan bahasa bertanda,menggunakan rangkaian teks tertentu(tag) untuk menandai teks yang mempunyai interpretasi khusus File HTML berupafile teks(plain text file), bukan binary file
Contoh Dokumen HTML <html> <head> <title>Homepage saya</title> </head> <body> <h1>Saya</h1> <h2>Perkenalan</h2> <p>Perkenalkan, nama saya..... Ini adalah<i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentang cara membuat<b><i>homepage</i></b>. </p> </body> </html> <!—akhir dokumen HTML -->
Daftar Tag <html> Dokumen <br> Ganti baris <head> Header < font> Font <title> Judul dokumen <li> Enumerasi <body> Isi dokumen <hr> Garis mendatar <h1> Judul paragraf <img> Gambar <p> Paragraf <a> Link (kaitan) <b> <i> <u> <table> Tabel <sup> <sub> Atribut <!----> Komentar
Mengenai Penulisan Tag Tag dibentuk oleh suatu kata(keyword) yang diapit oleh tanda kurung lancip (<tag>) Tag boleh ditulis dalam huruf kecil maupun kapital Tag harus berpasangan, yaitu tag awal diikuti tag akhir, kecuali tag tunggal <p> teks</p> <br> <hr /> Diantara tag awal dan tag akhir bisa terdapat tag lain Penulisan tag tidak boleh tumpang tindih <tag1><tag2> teks</tag1></tag2> →penulisanyang salah <tag1><tag2> teks</tag2></tag1> →penulisanyang benar
Skema Dasar HTML < HTML> <HEAD> <TITLE>Juduldokumen</TITLE> </HEAD> <BODY> Isidokumen </BODY> </HTML>
Tag Dasar HTML: menandai awal dan akhir dokumen HTML <html>dokumen</html> Head: menandai bagian header dokumen HTML <head>header</head> Title: memberi judul pada dokumen HTML <title>judul dokumen</title> Body: menandai awal dan akhir isi dokumen <body>isidokumen</body> <body text="#xxxxxx" bgcolor="#xxxxxx" background="filegambar" link="#xxxxxx" vlink="#xxxxxx">isidokumen</body>
Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf
Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
Tag Atribut1 (Bold, Italic, Underline) <b>Kalimatyang dicetaktebal</b> <i>Kalimatyang dicetakmiring</i> <u>Kalimatyang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan /atau digaris bawahi.
Tag Atribut2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi</sup> <sub>bagian yang dicetak rendah</sub> Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
Tag Ganti Baris (Break line) <br> Untuk pindah kebaris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br/>
Tag Fontd (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
Tag Fontd (face) Memformat suatu bagian kalimat dengan ukuran, jenishuruf, atau warna tertentu. Tag : font Parameter : size, face, color
Tag Fontd (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color
Selesai