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. <html> <head> <title>titel Websiteku</title> </head> <body> Ini adalah dokumen HTML pertamaku </body> </html> 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 bgcolor="0000ff">, 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: <HTML>, <HtMl>, <HTml>, <html>, 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: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html> </html>. Kemudian tag " <head> </head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Tag berikutnya adalah " <title> </title>" merupakan bagian dari Head, tag ini adalah sebagai judul dari dokumen HTML, titel ini akan tampil di title bar browser. Tag "<body> </body>" 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 <font> </font>, 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 <p> </p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa beberapa tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>. Tag <hr> untuk memberi garis lurus menyamping. Selanjutnya tag <h1> </h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, 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: <a href="http://www.yahoo.com > Yahoo </a> 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: <img src="namagambar.jpg" border="1" width="200" height="100" align="left"> 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: <body bgcolor="#ff99ff"> <body bgcolor="rgb(250,250,0)"> <body bgcolor="yellow"> Untuk memberikan gambar background: <body background="background.jpg"> <body background="http://i52.tinypic.com/nmm2cz.jpg"> Format Tabel HTML Untuk membuat tabel dalam dokumen HTML, bisa menggunakan tag <Table>. Biasanya pasangan dari tag <table> adalah: - table rows, untuk membuat baris. - <td> table data, untuk membuat kolom. Berikut ini adalah contohnya: <html> <head><title> Latihan tabel </title></head> <body> <table align= center > <td rowspan= 2 > <center> <b> No. </b> </center></td> <td colspan= 2 > <center> <b> Full Name </b></center> </td> <td rowspan= 2 > <center> <b> Class </b> </center></td> <td> <center> <b> First Name </b> </center> </td> <td> <center> <b> Last Name </b> </center> </td> <td> 1 </td> <td> Justin </td> <td> Bieber </td> <td> 11 IPA 1 </td> <td> 2 </td> <td> Celine </td> <td> Dion </td> <td> 11 IPA 2 </td> </table> </body></html> Hasil dari script di atas adalah: No. Full Name Class First Name Last Name 1 Justin Bieber 11 IPA 1 2 Celine Dion 11 IPA 2 Atribut: Rowspan, digunakan untuk menggabungkan beberapa baris. Colspan, digunakan untuk menggabungkan beberapa kolom. Daftar Urutan HTML Untuk membuat daftar urutan dalam HTML digunakan tag elemen <UL> dan <OL>. 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 <LI> 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 <FRAMESET> untuk mengatur pembuatan frame, dan <FRAME> untuk menentukan file target bagi setiap frame. Baiklah kita mulai membuat file Index.html ini: <HTML> <HEAD> <TITLE>Halaman utama</title> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME SRC="judul.htm"> <FRAMESET COLS="30%,70%"> <FRAME SRC="menu.htm"> <FRAME SRC="isi.htm"> </FRAMESET> </FRAMESET> </HTML> Perhatikanlah bahwa halaman yang berframe tidak membutuhkan tag BODY karena yang menjadi isi dari halaman utama ini adalah isi dari halaman-halaman lain yang menjadi target dari setiap frame. Halaman tersebut terdiri dari atas dua baris dimana baris pertama (atas) lebih kecil (anggaplah 20%) daripada baris kedua (80%). Dan baris kedua terbagi atas dua kolom dimana kolom pertama (kiri) lebih kecil (anggaplah 30%) daripada kolom kedua (70%). Atribut ROWS dalam tag FRAMESET di atas memerintahkan browser untuk membagi halaman menjadi dua baris, baris pertama tingginya 20% dan baris kedua tingginya 80%. Selanjutnya kita harus membagi baris kedua ini dalam dua kolom. Untuk itu, kita harus menambahkan lagi sepasang tag <FRAMESET> yang di dalamnya disisipkan atribut pembagi kolom yaitu COLS.
KAMUS ISTILAH: 1. Homepage, halaman pertama/paling awal dari sebuah website. Website adalah keseluruhan halamanhalaman web yang terdapat dalam sebuah domain yang mengandung informasi. 2. Domain adalah nama unik yang diberikan untuk mengidentifikasi alamat (IP address) server komputer seperti web server atau email server di internet. Domain merupakan alamat situs internet yang unit yang merupakan identitas suatu komputer di internet. 3. Upload, meletakkan file dari komputer lokal ke server internet. Download, mengambil file dari internet. Untuk mengupload/download bisa menggunakan aplikasi FTP (File Transfer Protocol). Contoh aplikasi FTP: CuteFTP, Filezilla, Azureus, Bittorent, Utorrent, Internet Download Manager (IDM), Download Accelerator Plus (DAP). 4. Hosting adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/ program/script dan database. Contohnya: Niagahoster, 000webhost, Hostinger, Indowebsite, JuraganHosting, IndoNet, MasterWeb, dll. 5. Xampp adalah aplikasi yang digunakan sebagai server jika ingin membuat web secara lokal. Di dalamnya sudah termasuk aplikasi Apache (sebagai web server), MySQL (sebagai database server), PhpMyAdmin (sebagai pengolah database berbasis web), Filezilla (sebagai aplikasi transfer file). 6. URL, Uniform Resource Locator. Alamat sebuah situs internet. HTTP, Hypertext Transfer Protocol. Protokol untuk website. 7. Meta tag, tag yang dipasang di tag <head> untuk deskripsi isi web. Bisa juga untuk melekattakn script SEO sebuah web/blog agar lebih mudah ter-index dalam pencarian di internet. LATIHAN SOAL UTS HTML KELAS XI 1. Tuliskan kepanjangan dan pengertian dari: a. HTML b. HTTP c. PHP d. URL e. WWW f. FTP g. DNS h. CMS i. W3C j. SEO 2. a. Sebutkan minimal 5 aplikasi yang termasuk dalam Web Browser! b. Sebutkan minimal 5 aplikasi yang termasuk dalam CMS! c. Sebutkan 3 aplikasi yang terdapat dalam Xampp beserta kegunaannya! 3. Jelaskan kegunaan dari tag/atribut/value berikut ini: a. <td rowspan= 3 > dan <td colspan= 2 > b. <table border= 1 cellspacing= 10 cellpadding= 5 align= center > c. <a href=http://www.google.com target= _new > Google </a> d. <hr size= 3 color= red > e. <img src= sunflower.png width= 500 height= 200 align= center > 4. Tuliskan 5 aplikasi text editor yang bisa digunakan untuk menulis kode-kode HTML! 5. Sebutkan apa saja yang diperlukan jika akan membuat sebuah website secara lokal di komputer! ---ooo000ooo---