Perancangan web atau yang sering dikenal dengan Web Design adalah istilah umum yang digunakan untuk mencakup bagaimana konten web ditampilkan, biasanya berupa hypertext atau hypermedia yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser. Tujuan dari web design adalah untuk membuat website atau sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.Namun sebelum merancang sebuah web kita perlu tahu Konsep dasar perancangan web terlebih dahulu, yang akan saya jelaskan dibawah ini.
Pengertian Web
Web adalah aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya, yang menggunakan protokol HTTP (HyperText Transfer Protocol). Untuk mengakses nya menggunakan browser (Firefox, Chrome, Safari, Opera, dll).
Pengertian Situs Web
Situs web yaitu kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain/url yang dapat diakses semua pengguna Internet dengan cara mengetikkan alamatnya.
Istilah-istilah Dalam Perancangan Web
HTTP
HTTP (HyperText Transfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).
WWW
World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi.
URL
Uniform Resource Locator adalah rangkaian karakter menurut suatu format standar tertentu, untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet.
URI
Uniform Resource Identifier adalah sebuah untaian karakter untuk mengidentifikasi nama, sumber, atau layanan di Internet.
Perbedaan URL DAN URI
URL
– URL digunakan oleh browser untuk mengidentifikasi sumberdaya di Internet yang dituliskan dalam satu baris teks.
– URL dapat dikatakan sebagai bagian dari URI.
– URL menunjuk ke suatu halaman web menggunakan “scheme” tanpa code fragment.
Contoh : http://www.ujicoba.org/testing1.htm
URI
– URI digunakan oleh browser untuk mengidentifikasi dokumen tunggal dan dituliskan dalam satu baris teks.
– URI digunakan untuk mengidentifikasi suatu resource dengan lokasi atau nama, atau keduanya.
– URI menunjuk ke suatu halaman web termasuk lokasicode fragment (jika ada) dan “scheme”.
Contoh : http://www.ujicoba.org/testing1.htm#satu
“Scheme” menandakan protocol TCP/IP yang digunakan, contohnya adalah HTTP, HTTPS, FTP, NEWS, MAILTO, FILE, TELNET.
HTML
Kelebihan Kekurangan HTML
HTML sedang dirancang oleh W3C untuk meneruskan kesuksesan HTML dan XHTML. Nampaknya HTML akan menjadi favorit seperti yang terjadi pada DOCTYPE sejuta umat, XHTML 1.0 Transitional.
Kelebihan dan kekurangan HTML
Beberapa kelebihan yang dijanjikan pada HTML :
* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
* Penulisan kode yang lebih efisien.
* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.Yang masih diperdebatkan dalam pengembangan HTML 5:
* Makna semantik beberapa elemen presentasioal.
* Fitur aksesibilitasnya. Seperti atribut alt dan summary.
Contoh HTML
Kesederhanaan HTML :
————————————————————————————————————-
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Contoh dokumen HTML 5</title>
</head>
<body>
<p>Teks paragraf disini.</p>
</body>
</html>
————————————————————————————————————–
Yang menarik dari kesederhanaan kode di atas:
* Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.
* Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.
Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML cukup dideklarasikan dengan format tambahan:
di atas elemen head.
Halaman web lain yang sudah memakai HTML, diantaranya:
* Bruce Lawson
* Anne van Kesteren
* HTML Test Page (Dani Iswara .Net). (Tentatif) Valid HTML versi W3C.
Bukan kebetulan dua orang teratas adalah staf (peramban) Opera. 
Elemen baru di HTML
Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
* section serupa seperti h1-h6.
* article bisa berupa entri blog atau tulisan konten.
* aside menyajikan konten pelengkap.
* header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
* footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
* dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
* yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.
Atribut baru di HTML
Dikenalkan pula beberapa atribut baru, seperti:
* atribut media, ping pada elemen pranala,
* autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,
* reversed pada elemen ol untuk urutan besar ke kecil.
Perubahan makna elemen
Ada beberapa elemen yang berubah makna, diantaranya:
* Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.
* Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
* Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
* dan lain-lain.
Elemen dan atribut yang tidak digunakan
Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML :
* center,
* font,
* strike, u, big,
* frame, frameset, noframes,
* acronym,
* longdesc,
* scope pada td,
* dan sebagainya.
Kesiapan peramban
Peramban bermesin Presto (Opera) versi terbaru nampak lebih banyak mendukung elemen baru HTML. Sementara peramban berbasis Gecko (Firefox dan turunannya), WebKit (Safari, Chrome, Midori), dan Trident (Internet Explorer) versi terbaru baru mendukungsebagian fitur HTML.
Pengertian Web
Web adalah aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya, yang menggunakan protokol HTTP (HyperText Transfer Protocol). Untuk mengakses nya menggunakan browser (Firefox, Chrome, Safari, Opera, dll).
Web adalah aplikasi yang berisikan dokumen-dokumen multimedia (teks, gambar, animasi, video) di dalamnya, yang menggunakan protokol HTTP (HyperText Transfer Protocol). Untuk mengakses nya menggunakan browser (Firefox, Chrome, Safari, Opera, dll).
Pengertian Situs Web
Situs web yaitu kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain/url yang dapat diakses semua pengguna Internet dengan cara mengetikkan alamatnya.
Situs web yaitu kumpulan dari halaman web yang sudah dipublikasikan di jaringan internet dan memiliki domain/url yang dapat diakses semua pengguna Internet dengan cara mengetikkan alamatnya.
Istilah-istilah Dalam Perancangan Web
HTTP
HTTP (HyperText Transfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).
HTTP (HyperText Transfer Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam World Wide Web (WWW).
WWW
World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi.
World Wide Web adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk samudra belantara informasi.
URL
Uniform Resource Locator adalah rangkaian karakter menurut suatu format standar tertentu, untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet.
Uniform Resource Locator adalah rangkaian karakter menurut suatu format standar tertentu, untuk menunjukkan alamat suatu sumber seperti dokumen dan gambar di Internet.
URI
Uniform Resource Identifier adalah sebuah untaian karakter untuk mengidentifikasi nama, sumber, atau layanan di Internet.
Uniform Resource Identifier adalah sebuah untaian karakter untuk mengidentifikasi nama, sumber, atau layanan di Internet.
Perbedaan URL DAN URI
URL
– URL digunakan oleh browser untuk mengidentifikasi sumberdaya di Internet yang dituliskan dalam satu baris teks.
– URL dapat dikatakan sebagai bagian dari URI.
– URL menunjuk ke suatu halaman web menggunakan “scheme” tanpa code fragment.
Contoh : http://www.ujicoba.org/testing1.htm
– URL digunakan oleh browser untuk mengidentifikasi sumberdaya di Internet yang dituliskan dalam satu baris teks.
– URL dapat dikatakan sebagai bagian dari URI.
– URL menunjuk ke suatu halaman web menggunakan “scheme” tanpa code fragment.
Contoh : http://www.ujicoba.org/testing1.htm
URI
– URI digunakan oleh browser untuk mengidentifikasi dokumen tunggal dan dituliskan dalam satu baris teks.
– URI digunakan untuk mengidentifikasi suatu resource dengan lokasi atau nama, atau keduanya.
– URI menunjuk ke suatu halaman web termasuk lokasicode fragment (jika ada) dan “scheme”.
Contoh : http://www.ujicoba.org/testing1.htm#satu
– URI digunakan oleh browser untuk mengidentifikasi dokumen tunggal dan dituliskan dalam satu baris teks.
– URI digunakan untuk mengidentifikasi suatu resource dengan lokasi atau nama, atau keduanya.
– URI menunjuk ke suatu halaman web termasuk lokasicode fragment (jika ada) dan “scheme”.
Contoh : http://www.ujicoba.org/testing1.htm#satu
Kelebihan Kekurangan HTML
HTML sedang dirancang oleh W3C untuk meneruskan kesuksesan HTML dan XHTML. Nampaknya HTML akan menjadi favorit seperti yang terjadi pada DOCTYPE sejuta umat, XHTML 1.0 Transitional.
Kelebihan dan kekurangan HTML
Beberapa kelebihan yang dijanjikan pada HTML :
* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
* Penulisan kode yang lebih efisien.
* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.Yang masih diperdebatkan dalam pengembangan HTML 5:
* Makna semantik beberapa elemen presentasioal.
* Fitur aksesibilitasnya. Seperti atribut alt dan summary.
Contoh HTML
Kesederhanaan HTML :
————————————————————————————————————-
<!doctype html>
Beberapa kelebihan yang dijanjikan pada HTML :
* Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.
* Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.
* Integrasi (‘inline’) MathML dan SVG dengan doctype yang lebih sederhana.
* Penulisan kode yang lebih efisien.
* Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.Yang masih diperdebatkan dalam pengembangan HTML 5:
* Makna semantik beberapa elemen presentasioal.
* Fitur aksesibilitasnya. Seperti atribut alt dan summary.
Contoh HTML
Kesederhanaan HTML :
————————————————————————————————————-
<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Contoh dokumen HTML 5</title>
</head>
<body>
<p>Teks paragraf disini.</p>
</body>
</html>
————————————————————————————————————–
————————————————————————————————————–
Yang menarik dari kesederhanaan kode di atas:
* Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.
* Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.
Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML cukup dideklarasikan dengan format tambahan:
* Tidak perlu lagi memakai <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>. Walau tag meta tersebut masih diijinkan digunakan.
* Deklarasi <!DOCTYPE html> adalah ‘case-insensitive’. Tidak harus huruf besar/kapital semua.
Sebagai XML, dengan tipe media application/xhtml+xml atau application/xml, HTML cukup dideklarasikan dengan format tambahan:
di atas elemen head.
Halaman web lain yang sudah memakai HTML, diantaranya:
* Bruce Lawson
* Anne van Kesteren
* HTML Test Page (Dani Iswara .Net). (Tentatif) Valid HTML versi W3C.
Halaman web lain yang sudah memakai HTML, diantaranya:
* Bruce Lawson
* Anne van Kesteren
* HTML Test Page (Dani Iswara .Net). (Tentatif) Valid HTML versi W3C.
Bukan kebetulan dua orang teratas adalah staf (peramban) Opera.
Elemen baru di HTML
Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
* section serupa seperti h1-h6.
* article bisa berupa entri blog atau tulisan konten.
* aside menyajikan konten pelengkap.
* header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
* footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
* dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
* yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.
Elemen baru di HTML
Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:
* section serupa seperti h1-h6.
* article bisa berupa entri blog atau tulisan konten.
* aside menyajikan konten pelengkap.
* header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
* footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
* dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
* yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.
Atribut baru di HTML
Dikenalkan pula beberapa atribut baru, seperti:
* atribut media, ping pada elemen pranala,
* autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,
* reversed pada elemen ol untuk urutan besar ke kecil.
Dikenalkan pula beberapa atribut baru, seperti:
* atribut media, ping pada elemen pranala,
* autofocus, placeholder, required, autocomplete, dan sebagainya, terkait elemen input dan form,
* reversed pada elemen ol untuk urutan besar ke kecil.
Perubahan makna elemen
Ada beberapa elemen yang berubah makna, diantaranya:
* Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.
* Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
* Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
* dan lain-lain.
Ada beberapa elemen yang berubah makna, diantaranya:
* Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.
* Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.
* Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.
* dan lain-lain.
Elemen dan atribut yang tidak digunakan
Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML :
* center,
* font,
* strike, u, big,
* frame, frameset, noframes,
* acronym,
* longdesc,
* scope pada td,
* dan sebagainya.
Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML :
* center,
* font,
* strike, u, big,
* frame, frameset, noframes,
* acronym,
* longdesc,
* scope pada td,
* dan sebagainya.
Kesiapan peramban
Peramban bermesin Presto (Opera) versi terbaru nampak lebih banyak mendukung elemen baru HTML. Sementara peramban berbasis Gecko (Firefox dan turunannya), WebKit (Safari, Chrome, Midori), dan Trident (Internet Explorer) versi terbaru baru mendukungsebagian fitur HTML.
Tidak ada komentar:
Posting Komentar