DESAIN WEB Pengantar Desain Web Dani Anggoro, M.Kom

http://danianggoro.web.id

Pengenalan Internet

Pengenalan Internet

●

● ●

Keuntungan Internet

Keuntungan Internet

● ● ● ● ●

Kerugian Internet

Kerugian Internet

● ● ●

Internet, Intranet dan Extranet

Perbedaan Internet, Intranet, Extranet

Intranet

● Adalah jaringan komputer dalam sebuah perusahaan/organisasi yang menggunakan teknologi internet sehingga terbentuk lingkungan yang seperti internet tetapi bersifat privat bagi perusahaan yang bersangkutan ● Biasanya Intranet dihubungkan ke jaringan Internet dengan dilengkapi firewall

Extranet

● Adalah jaringan privat yang menggunakan teknologi Internet dan sistem telekomunikasi publik untuk membentuk hubungan yang aman antara pemasok, vendor, mitra kerja, pelanggan, dan pihak bisnis lainnya dalam rangka mendukung operasi bisnis atau pengaksesan informasi bisnis

Internet Servis

Internet Service (WWW)

● World Wide Web (WWW) Dikembangkan tahun 1989 oleh Tim Barners- Lee ● Disebut juga web (www) merupakan sebuah sistem dari server internet yang men-support hypertext ● Mempunyai protokol sendiri yang disebut http ● Dapat mengakses berbagai protokol di internet seperti ftp, telnet, usenet, e-mail , juga http ● Mampu membuat dokumen HTML yang dapat berisi grafik, sound, video serta bahasa pemrograman dan databse

Internet Service (E-Mail)

● E-Mail Electonic mail /e-mail memungkinkan user lokal dan global (worldwide) saling bertukar informasi/pesan ● Setiap user yang mempunyai e-mail mempunyai alamat mailbox dimana pesan dikirim ● File non-ASCII (binary) dapat di attach(lampirkan) pada pesan e-mail ● Contoh aplikasi/program e-mail : MS.Outlook, Eudora, Netscape messenger, yahoo dll

Internet Service (Telnet)

● Adalah program yang memungkinkan user log ke suatu komputer server ● Perintahnya memerlukan 2 argumen : nama komputer dan nomor port komputer server yang akan diakses ● Hanya menampilkan teks

Internet Service (FTP)

● Singkatan dari File Transfer Protokol ● Adalah protokol yang berfungsi untuk mentransfer file dari satu komputer ke komputer lainnya ● memungkinkan user men-transfer file dari ribuan komputer host di internet ke dalam account user

Internet Service (IRC)

● Singkatan dari Internet Relay Chat ● Adalah layanan yang memungkinkan user/participant berkomunikasi satu sama lain pada ratusan saluran/channel ● User yang log ke internet dapat langsung berbicara dengan user lain dalam “chat room” untuk bertukar komentar atas suatu topik yang ada ● Dikenal dengan instant messenging ● Untuk akses IRC diperlukan software pendukung seperti ICQ, yahoo messenger, AOL messenger, dll

Mempersiapkan Website

Mempersiapkan Website

● Untuk membuat website diperlukan beberapa hal, antara lain : 1. Web browser 2. Hardware 3. Menguasai HTML 4. Koneksi Internet 5. Web space 6. Domain Name

Web Browser

Web Browser Web browser berfungsi untuk menampilkan halaman-halaman web dan mencoba seluruh fungsi navigasi serta fungsi lainnya di dalam sebuah website. Web browser yang bisa digunakan, antara lain : Microsoft Internet Explorer, Netscape Navigator, Mozilla, Opera, Mozaic, dll.

Hardware

Selanjutnya (mungkin) juga diperlukan hardware khusus (selain satu unit komputer yang digunakan) untuk melakukan koneksi dengan internet, misalnya : modem telepon, modem ISDN, kartu jaringan, dll

Menguasai HTML

Menguasai HTML Diperlukan untuk memasukkan perintahperintah HTML ke halaman web yang sesungguhnya. Dapat menggunakan aplikasi yang sudah dikembangkan, misalnya : Microsoft Frontpage, Macromedia Dreamweaver, Adobe GoLive, Microvision WebExpress, dll.

Koneksi Internet

Koneksi ke internet diperlukan untuk meletakkan (upload) seluruh file-file halaman web yang telah dibuat. Koneksi ini dapat berupa hubungan langsung dengan ISP.

Web Space

Web space adalah ruang harddisk yang telah secara khusus disediakan untuk meletakkan semua file setiap halaman web. Web space ini berada pada harddisk sebuah web server di Internet.

Domain

Digunakan ketika manusia sulit mengingat alamat IP address (angka numerik) Setiap nama komputer terdiri dari urutan alpha numeric yang dipisahkan oleh titik (dot), contoh: www.budiluhur.ac.id www.detik.com

Pertemuan 2

HTML

HTML (Hypertext Markup Language) merupakan bahasa pemrograman yang digunakan untuk membuat halaman web. Untuk menulis kode HTML digunakan editor seperti NotePad, Frontpage, atau Dreamweaver.

http://danianggoro.web.id

Penggunaan “TAG”

● ● ● ●

http://danianggoro.web.id

Attribut dan Value dalam “TAG”

● ● ●

http://danianggoro.web.id

Perkembangan HTML

HTML Versi 1.0 Kemampuan yang dimiliki versi 1.0 ini antara lain ● Heading, paragraph, hypertext, list, ● Cetak tebal dan miring pada teks, ● Peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya http://danianggoro.web.id

Perkembangan HTML

HTML Versi 2.0 Penambahan kualitas HTML Versi 2.0 antara lain : ● Menampilkan suatu form pada dokumen, ● HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.

http://danianggoro.web.id

Perkembangan HTML

HTML Versi 3.0 Penambahan kualitas HTML Versi 3.0 antara lain : ● Menampilkan fasilitas tabel, ● Versi ini yang disebut juga sebagai HTML+.

http://danianggoro.web.id

Perkembangan HTML

HTML Versi 4.0 Penambahan kualitas HTML Versi 4.0 antara lain : ● Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain

http://danianggoro.web.id

Perkembangan HTML

HTML Versi 5.0 (Versi terbaru) Penambahan kualitas HTML Versi 5.0 antara lain : ● Menyediakan model database SQL yang baru yang dapat dibangun dalam konsep lokal, dalam hal ini di ● Mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS ● Membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end. http://danianggoro.web.id

Contoh HTML

Selamat Belajar HTML

Penulisan HTML

Pasangan tag dan menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML Bagian yang terdapat dalam dan umumnya terbagi atas : ● kepala, ditandai dengan pasangan tag dan ● badan, ditandai dengan pasangan tag dan

Penulisan HTML

● Bagian head berfungsi untuk memberikan informasi tentang dokumen HTML, seperti judul dokumen HTML yang ditulis dalam pasangan tag ● Bagian body berisi semua instruksi untuk mengatur seluruh tampilan halaman web di web browser

Horizontal Line

Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag

---

.

Paragraph

Jika dokumen HTML berisi teks yang cukup panjang maka sangat diperlukan untuk membaginya kedalam beberapa paragraph untuk memudahkan pembacaan oleh pengguna. Pembentukan elemen paragraph ini menggunakan sintaksis :

Isi teks sebuah paragraph

Tag penutup

boleh dituliskan boleh tidak, akan tetapi sebaiknya dituliskan untuk mengetahui berakhirnya sebuah paragraf.

Break

Break Kadangkala diperlukan untuk menulis di baris yang baru dalam sebuah paragraf yang sama pada halaman web yang dibuat. Untuk itu digunakan tag break yang berupa


Font

Salah satu tujuan perancangan halaman web adalah membuat halaman web yang menarik atau "eye catching". Untuk itu dalam suatu paragraph diperlukan suatu variasi huruf atau font style. Berikut ini beberapa font style yang sering digunakan, antara lain : Tag Style

Keterangan Huruf Tebal (Bold) Huruf Miring (Italic) Huruf Garis Bawah (Underline)

Font Dalam mengatur layout sebuah halaman web yang berisi teks, pengaturan besarnya huruf, warna dan ukuran adalah hal yang sangat penting untuk dilakukan oleh seorang perancang web. Pengaturan ini dapat menggunakan tag Font dengan sintaksis sebagai berikut :

Ukuran font dapat ditentukan dengan angka 1 sampai 7 dengan nilai default 2. Sedangkan warna dapat diganti dengan warna lain. Contoh penggunaan :

Teks arial biru ukuran 5 Teks arial hijau ukuran 3

Atribut Warna

Untuk lebih mempercantik tampilan sebuah halaman web, permainan warna menjadi satu hal penting dalam perancangan halaman web. Penulisan atribut warna dapat menggunakan nilai heksa desimal (6 digit) ataupun nama warnanya.

Daftar List

HTML mendukung beberapa format list, yaitu Unordered List dan Ordered List. Unordered List adalah list yang menggunakan bullet sebagai tanda point. Contoh sintaks :

• apples
• bananas
• grapefruit

Daftar List

Ordered List List yang menggunakan angka urut sebagai tanda point. Contoh sintaksis :

1. apples
2. bananas
3. grapefruit

Daftar List

Ordered list di bagi atas beberapa macam yaitu dengan tipe angka, abjad, angka romawi. macam macam type ordered list : Jika type="1"

maka akan menampilkan 1,2,3,....

Jika type="a"

maka akan menampilkan a,b,c,....

Jika type="A"

maka akan menampilkan A,B,C,....

Jika type="i"

maka akan menampilkan i,ii,iii,....

Jika type="I"

maka akan menampilkan I,II,III,....

Daftar List

Unordered list di bagi atas beberapa macam yaitu dengan tipe berbentuk lingkaran dengan warna hitam (default), lingkaran berwarna putih dan bentuk kotak. Macam macam type unordered list : type="disc" (default) untuk bentuk lingkaran berwarna hitam type="square" untuk bentuk lingkaran kotak

Pertemuan 3

Heading

● Heading biasa digunakan untuk membuat judul pada content halaman web. ● Tag yang digunakan adalah dengan nilai n antara 1 sampai dengan 6. ● Semakin besar nilai n maka semakin kecil huruf yang tercetak. ●

Pendahuluan

Spesial Charakter

● Untuk menampilkan karakter khusus, digunakan tanda & (ampersand) diakhiri oleh tanda ; (titik koma) ● Bisa menggunakan nama maupun angka ● Contoh: < < ® ® & & > > " “ © ©   spasi

Tag Image

● Untuk menyisipkan gambar dapat memanfaatkan tag . ● Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya png, jpg, gif, dan sebagainya. ● Untuk menampilkan animasi file GIF, penggunaannya sama seperti file gambar biasa.

Tag Image (Lanjutan)

Contoh Syntak : Contoh Penggunaan :

Tag Hiperlink

● Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. ● Dengan hyperlink, dapat membuka dokumen HTML lain. ● Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image. ● Bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda.

Tag Hiperlink (Lanjutan)

Sintaksis penulisan : Teks hyperlink Contoh penggunaan : Tag Hyperlink

Tag Hiperlink (Lanjutan)

● Bila file HTML tujuan berada pada domain name yang sama tetapi pada direktori yang tidak sama maka kita bisa menggunakan url relatif, yaitu path name relatif berdasarkan posisi file saat ini. Misalnya kita akan membuka file atas.html yang berada 2 tingkat diatasnya maka hyperlink-nya berbentuk seperti : Keatas

Tag Hiperlink (Lanjutan)

● Bila file yang akan dikaitkan berada pada domain name yang berbeda dengan domain name file yang sekarang ini, maka kita harus menggunakan url lengkap file tujuan tersebut. Misalnya : Budi Luhur

Mailto

● Untuk memudahkan pengguna mengirimkan email ke suatu alamat email tertentu, dapat dilakukan dengan tag hyperlink ini. Yaitu dengan menambah "mailto" dan alamat email tujuan. Sintaksis penulisannya sebagai berikut : Kirim email