1 RANGKUMAN UKK TIK KELAS XI Web Desain adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hyper...
RANGKUMAN UKK TIK KELAS XI Web Desain adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Untuk mendesain webuah website, diperlukan management content yang disebut CMS. Beberapa contoh CMS:
CMS untuk blog, contohnya WordPress. CMS untuk web e-Commerce, contohnya PrestaShop, OsCommerce, Opencart, Cubecart. CMS untuk web e-Learning, contohnya Moodle, Claroline, A-Tutor. CMS untuk personal web/company profile, contohnya Joomla, Mambo, Drupal, AuraCMS. CMS untuk web Forum, contohnya phpBB, V-bulletin.
Untuk membangun sebuah website baik secara offline di lokal komputer diperlukan beberapa persiapan antara lain: 1. Persiapan server yaitu Web Server dan Database Server. Aplikasi yang bisa digunakan adalah Xampp karena sudah include beberapa aplikasi server. 2. Persiapan CMS yaitu Content management System yang akan digunakan untuk membangun situs contohnya; Joomla, Wordpress, AuraCMS, Drupal. 3. Pengelolaan database yaitu membuat nama database dan juga user yang memiliki hak akses untuk menangani administrasi database tersebut. 4. Konten/isi website yaitu meliputi artikel, gambar, kategori, banner, logo, dan hal-hal lain yang akan dibuat dan ditampilkan dalam website. 5. Sebuah komputer dan browser yang digunakan untuk mengelola administrasi website. HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web). HTML terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik, animasi, link maupun audio-video. HTML Editor adalah aplikasi yang digunakan untuk mengedit kode-kode HTML. Contoh aplikasinya adalah Notepad, Wordpad, Notepad++, Adobe Dreamweaver, QuantaPlus, Bluefish, Gedit, Netbeans, Microsoft Front Page. Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari, Flock, Google Chrome, dll. HTML mempunyai ekstensi file berupa .htm atau .html. Protokol web disebut HTTP (Hyper Text Transfer Protocol). Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Titel Websiteku Ini adalah dokumen HTML pertamaku
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka " <…>"dan diakhiri dengan tag penutup " ". Kemudian di dalam tag tersebut terdapat teks seperti contoh di atas: html, head, title, body dan yang lainnya ini disebut dengan Elemen HTML. Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): , body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value). Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: , , , , semuanya adalah sama karena tidak bersifat Case Sensitive, artinya script tag tidak mempengaruhi hasil tampilan meskipun ditulis menggunakan huruf besar atau kecil.
Tag Dasar HTML Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Tag pertama pada dokumen HTML adalah: " " tag ini merupakan awal dari suatu dokumen HTML, dan tag " " merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag …. Kemudian tag " …" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Tag berikutnya adalah " …" merupakan bagian dari Head, tag ini adalah sebagai judul dari dokumen HTML, titel ini akan tampil di title bar browser. Tag "…" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Format Font HTML Tag HTML untuk font adalah …, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size) Atribut dari element Font: face="Jenis font yang digunakan", contoh: face="Tahoma" size="Ukuran dari font (1-7)", contoh: size="3" size="Memperbesar ukuran font", contoh: size="+1" size="Memperkecil ukuran font", contoh: size="-1" color="Warna dari font", contoh: color="blue" color="Warna dari font", contoh: color="#FF0000"
Format text HTML Untuk membuat suatu paragraf, tag elemennya adalah
…
, dan untuk baris baru adalah , perlu diketahui bahwa beberapa tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah ada juga . Tag untuk memberi garis lurus menyamping. Selanjutnya tag
…
disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari
sampai
, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6. Selanjutnya tag adalah komentar digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu komentar tidak ditampilakn oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Hyperlink HTML Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut. Berikut contohnya: Yahoo
Tag Img HTML Img merupakan element tag untuk suatu gambar dengan atribut berupa: border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan. Berikut contohnya:
Background HTML Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Background bisa berupa gambar maupun warna. Berikut contohnya:
Untuk memberikan warna background: Untuk memberikan gambar background:
Format Tabel HTML Untuk membuat tabel dalam dokumen HTML, bisa menggunakan tag
. Biasanya pasangan dari tag
adalah: -
table rows, untuk membuat baris. -
table data, untuk membuat kolom. Berikut ini adalah contohnya: Latihan tabel
No.
Full Name
Class
First Name
Last Name
1
Justin
Bieber
11 IPA 1
2
Celine
Dion
11 IPA 2
Hasil dari script di atas adalah: No. Full Name First Name Last Name 1 Justin Bieber 2 Celine Dion Atribut: Rowspan, digunakan untuk menggabungkan beberapa baris. Colspan, digunakan untuk menggabungkan beberapa kolom.
Class 11 IPA 1 11 IPA 2
Daftar Urutan HTML Untuk membuat daftar urutan dalam HTML digunakan tag elemen
dan . Elemen UL (UnOrdered List), untuk membuat daftar urutan berupa symbol. Biasa disebut Bullets. Sedangkan Elemen OL (Ordered List), untuk membuat daftar urutan berupa angka/huruf. Biasa disebut Numberings. Baik OL maupun UL mempunyai pasangan berupa
untuk membuat daftar urutannya. Atribut dan value yang bisa digunakan adalah:
Untuk OL: Type=”1” daftar urutan dari nomor 1, 2, 3, dst. Type=”a” daftar urutan dari huruf a, b, c, dst. Type=”A” daftar urutan dari huruf A, B, C, dst. Type=”I” daftar urutan dari huruf romawi I, II, III, IV, dst. Untuk UL: Type=”circle” Type=”square” Type=”diamond” Type=”ellipse” Type=”check”
Frame HTML Digunakan untuk menampilkan beberapa halaman HTML sekaligus dalam sebuah jendela browser. Artinya dengan membuka sebuah halaman HTML, browser akan menampilkan beberapa halaman sekaligus yang masing-masing termuat dalam sebuah frame. Disamping untuk mempercantik tampilan, fungsi utama frame adalah untuk memudahkan navigasi atau penelusuran isi website. Berikut contoh tampilan Frame: frame I berisi file judul.htm
frame II berisi file menu.htm
frame III berisi file isi.htm
Halaman yang ber-frame ini kita namakan Index.html. File ini menampilkan tiga halaman HTML sekaligus yaitu file judul.html, menu.html dan isi.html. Jadi untuk membuat tampilan seperti di atas kita harus membuat empat buah file HTML, 3 file berfungsi sebagai halaman yang ditampilkan sedang satu file berfungsi sebagai halaman yang menampilkan gabungannya Untuk membuat halaman utama atau halaman yang ber-frame, kita hanya membutuhkan dua buah tag yaitu
