TUTORIAL DESAIN COLUMN PADA WEBSITE SEDERHANA

Transkripsi

1 ULANGAN TENGAH SEMESTER 1 - WEBSITE STATIS - TUTORIAL DESAIN COLUMN PADA WEBSITE SEDERHANA LINK TURORIAL = Nama : Kadaryanto NIM : Prodi : Teknik Informatika Jenjang S1 ( Malam ) SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER STMIK EL RAHMA YOGYAKARTA Jalan Sisingamangaraja No. 76 Karangkajen, Yogyakarta

2 DAFTAR ISI 1. BAB I PENDAHULUAN Pengertian Website Statis Pengertian Website Dinamis BAB II PEMBAHASAN Persiapan Pengerjaan Gambaran singkat tema Skeleton Memilah bagian column pada Skeleton BAB III MEMBUAT WEBSITE BERCOLUMN SEDERHANA Memulai pembuatan website serderhana Memulai Coding... 9 o Memasukkan Kode HTML di index.html... 9 o Memasukkan Kode CSS di style.css o Preview Uji coba website yang telah di buat BAB IV PENUTUP Kesimpulan

3 BAB 1 PENDAHULUAN Website merupakan salah satu media informasi yang banyak digunakan untuk menyampaikan informasi melalui internet yang cukup digandrungi para penggemar IT, baik dikalangan pribadi maupun e-comerce. Bagaimana tidak, fungsi utama internet sebagai alat komunikasi lebih banyak disajikan sebagai halaman web, diikuti data suara, video, citra gambar atau yang lain. Bagaimana Membuat Halaman Website Membuat halaman website merupakan hal yang tidak mudah. Dibutuhkan pengetahuan standar untuk membuat halaman, seperti HTML, CSS, PHP Mysql, javascript, Jquery, Ajax, dll. Sedangkan website sendiri dibedakan menjadi beberapa jenis website. 1. Website Statis Website statis seperti nama yang melekatnya adalah web yang bersifat statis / tetap. Isi / konten halaman hanya dapat dirubah dengan melakukan update script langsung pada tampilan yang bersangkutan. Website statis biasanya digunakan untuk web halaman profil suatu perusahaan, perorangan ataupun organisasi. Dengan variasi tertentu seperti penempatan isi teks, image/gambar, dan animasi/flash yang tentu saja kurang dapat di index di Search Engine. 2. Website Dinamis Website dinamis merupakan website yang banyak dipakai. Website dinamis menyajikan antarmuka yang fleksibel dengan 2 halaman utama, yaitu frontend (halaman depan) dan backend (halaman administrator). Isi/konten dari website dinamis dapat diubah melalui administrator dan di simpan dalam database / sever, yang secara realtime dapat selalu uptodate tanpa harus mengubah/update script secara langsung. Untuk tutorial ini, saya akan menjelaskan bagaimana menentukan dan membuat struktur website unuk membuat kolom pada tampilan frontpage (halaman depan) website. Kolom yang akan dibuat sudah menggunakan kode layout semantic dan bertype respontif desain, sehingga web dapat menyesuaikan ukuran layar. Hal itu akan mempermudah konsumen untuk mengaksesnya, baik dari perangkat laptop, computer ataupun smartphone. 3

4 BAB II PEMBAHASAN TUTORIAL MEMBUAT COLUMN PADA WEBSITE SEDERHANA 1. Persiapan Pengerjaan Sebelum mengerjakan pembuatan website sederhana, ada beberapa tools untuk mendukung nya, antara lain : - Web Browser ( Program aplikasi internet ) Web Browser adalah komponen penting untuk pembuatan website karena program tersebut adalah aplikasi untuk membuka / load halaman web yang kita buat. Ada berbagai macam web browser antara lain : Opera, Mozilla Firefox, Internet Explorer ( IE ), Safari, Google Chrome, dll. - Notepad / Notepad ++ Hampir sama antara keduanya, hanya saja, Notepad++ memang didesain khusus untuk mempermudah programmer dalam memanage file yang mereka jalankan. Didalam notepad++ lengkap berbagai macam jenis pemrograman. Sebut saja Bahasa C, C++, HTML, Delphi, Ms- DOS, JSP, CSS, Javascript, dll. 2. Gambaran Singkat Tema Skeleton Website yang akan kita buat adalah website dengan bahasa pemrograman HTML dan perpaduan CSS ( Cascading Stylesheet ) sebagai pemanis dan penata layout nya. Sebagai gambaran awal, maka saya ambilkan contoh tema website tutorial framework CSS yaitu skeleton. Gambar 1. Website Skeleton Website diatas terbagi dalam 3 kolom, yaitu kolom kiri (left), tengah (center) dan kanan (right). Website skeleton sudah mengadopsi system bahasa HTML5 / Semantic, dan merupakan website Responsive Desain, karena web tersebut cocok untuk semua ukuran layar device saat ini, baik monitor, laptop, maupun gadget. 3. Memilah Pembagian Column pada Framework Skeleton Untuk mendapatkan source code dan example/contoh dari framework skeleton, anda dapat mendownload nya di pada halaman download. - Masuk ke untuk mengunduh file example framerowk skeleton 4

5 - Setelah kita mengunduh file bernama dhg-skeleton-7a-b6820.tar.gz, kemudian taruh file tersebut kedalam My Documents. Kemudian Extract file rar.gz tersebut hingga menjadi folder dengan nama yang sama. - Buka Folder tersebut sehingga akan muncul file-file dan folder dibawah ini. Keterangan : Folder images berisi file-file image/gambar, folder stylesheets berisi filefile CSS, dan index.html merupakan file utama. - Buka semua file stylesheets / CSS dan index.html menggunakan notepad++, untuk melihat penjabaran dan fungsi dari masing-masing element/tag/dan class. - Perhatikan gambar dibawah, isi dari index.html 5

6 Keterangan Script pada gambar a. Baris 1 sampai dengan 5, adalah konfigurasi untuk website, jika di buka di beberapa browser sesuai dengan konfigurasi nya b. Baris 6 s/d baris 36, merupakan bagian head website. Sebagai awal head adalah <head> dan sebagai akhiran head adalah </head> c. Basic Pages Needs, yang terletak di head, merupakan bagian dari title halaman website, untuk mengganti nama web, rename bagian <title>nama Web Anda</title> d. Mobile Specific Metas, merupakan suatu identitas yang di load kalau website kita diakses menggunakan versi mobile. e. CSS. Ini merupakan scipt memanggil css untuk dimasukkan kedalam index.html. ada 3 CSS yang di panggil yaitu, base.css, skeleton.css, dan layout.css. Href merupakan link address, yang dimana disitu css berada pada folder stylesheet, jadi penulisan link menjadi href= stylesheet/...css. f. Favicons, merupakan script yang menampilkan gambar icon website kita, letak dari icons tersebut berada di sebelah title website di browser. - Bagian Body dari index.html dibawah ini merupakan file yang menunjukan scripting dimana column website dibuat. Dalam framework skeleton ini, website bersifat responsive, jadi bila kita mengakses website dengan berbeda device, maka tampilan akan secara otomatis berubah, menyesuaikan lebar layar. Nah konfigurasi ini dilakukan / di konfigurasi pada file CSS bertipe CSS3 terbaru. 6

7 - Isi dari tag Body Keterangan Script a. Div class dan div id merupakan suatu element yang digunakan untuk memanggil konfigurasi di CSS b. Container, merupakan wadah dari semua column yang akan tampil dalam website. Didalam container ini terdapat beberapa div yang membagi kedalam beberapa kelompok kolom. c. Untuk lebih jelas dan detail, mari kita praktekan bareng-bareng dengan membuat website sederhana Persiapkan perlengkapan, mari kita praktik bersama BAB III PEMBUATAN MEMBUAT WEBSITE BERCOLUMN SEDERHANA 1. Memulai Pembuatan Website Sederhana Untuk membuat website, kita akan membuat sebuah halaman utama, yaitu index.html dan sebuah halaman CSS untuk menempatkan konfigurasi penataan layout yaitu style.css. untuk penempatanya, buat pada My Documents, yaitu folder bernama web2, kemudian, buat kedua file tersebut, bias menggunakan Notepad++. Start > All Programs > Notepad++ Kemudian untuk memilih jenis pemrograman, klik Language > H > HTML 7

8 Kemudian save file tersebut di folder web2 yang telah dibuat tadi dengan men klik File > Save As. Kemudian isikan filename nya dengan nama index, dan Save as type pastikan berisi Hyper Text Markup Language Oke sekarang kita sudah mempunya file utama website, yaitu index.html, sekarang kita harus membuat file style.css. Caranya sama, tetapi untuk language diganti dengan CSS, 8

9 Ctrl + N pada notepad++, kemudian select Language > C > CSS, kemudian save as dengan nama file style, dengan save as type Cascading Stylesheet ( CSS ). Jika step by step di atas telah kita buat dengan runtut, maka kita sudah mempunya 2 file di dalam folder web2, yaitu : - index.html - style.css Kalau sudah benar terdapat kedua file tersebut diatas, maka kita siap untuk memasukkan kode HTML dan CSS nya. 2. Memulai Coding Untuk memulai Coding, kita harus membuka file tersebut kedalam notepad++, untuk lebih memudahkan dalam pengeditan coding, karena dapat disesuaikan dengan bahasa yang digunakan (dalam hal ini HTML dan CSS). a. Memasukkan Kode index.html Isi dari index.html adalah sebagai berikut ini : - Memulai / start HTML <!-- Memulai HTML page --> <html> - Header Header merupakan tempat dimana diletakkan title (nama website di title bar), memuat link CSS dan javascript (JQuery, dll) <!-- Memulai Header --> <head> <!-- Title --> <title>mencoba Membuat Column</title> <!-- Memasukkan CSS --> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <!-- End Header --> Penulisan Link CSS adalah sebagai berikut : Link rel= stylesheet = merupakan pathokan yang harus dipenuhi Href= style.css = merupakan alamat dimana css diletakkan, jika terdapat folder, maka dalam href, dimasukkan alamat folder/file.css Dan type= text/css = merupakan jenis penulisan kode script. - Memulai Membuat body content / isi dari website, disini nanti kita akan membuat/memilah menjadi beberapa kolom. <!-- Memulai Body --> <body> 9

10 - Memulai Container, merupakan wadah dari semua kolom yang nantinya dibuat. <!-- sebagai wadah semua column --> <div class="container"> - Membuat judul halaman, dan dalam penulisan di semantic website, di berikan element header, karena letak nya yang paling atas dan merupakan tempat judul/identitas dari sebuat website. <!-- Membuat Judul halaman --> <div class="judul"> <header> <h1>membuat Column Halaman Semantic</h1> </header> </div> <div class="clear"></div> - Membuat kolom 1, didalam kolom tag div class, terdapat 2 claster, dimana column1 dan column, kan menjadi satu kesatuan kode/css. Artikel kolom 1 akan diletakkan dalam kolom paling kiri. <!-- Membuat Column 1 --> <div class="column1 column"> <article> <h2>sejarah TI</h2> <p> Perkembangan peradaban manusia diiringi dengan perkembangan cara penyampaian informasi (yang selanjutnya dikenal dengan istilah Teknologi Informasi). Mulai dari gambar-gambar yang tak bermakna di dinding-dinding gua, peletakkan tonggak sejarah dalam bentuk prasasti sampai diperkenalkannya dunia arus informasi yang kemudian dikenal dengan nama INTERNET. Informasi yang disampaikan pun berkembang. Dari sekedar menggambarkan keadaan sampai taktik bertempur. </p> </article> </div> Penjelasan dari kolom 1 H2 adalah heading, dimana heading didalam semantic article diartikan sebagai judul dari artikel itu sendiri, sedangkan dalam <article> merupakan satu kesatuan article yang diatur oleh CSS dalam claster <div class= column1 column > - Membuat kolom 2, kurang lebih sama dengan kolom 1, hanya saja nanti ada peletakannya akan diletakkan di tengah. <!-- Membuat Column 2 --> <div class="column2 column"> <article> <h2>apa Itu Website?</h2> <p> Secara makna sebuah WEBSITE adalah sekumpulan halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet. Website merupakan sebuah komponen yang terdiri dari teks, gambar, suara animasi sehingga menjadi media informasi yang menarik untuk dikunjungi oleh orang lain. Nah dari makna itu, bisa kita fahami bahwa definisi website secara sederhana adalah informasi apa saja yang bisa di akses dengan menggunakan koneksi jaringan internet. </p> </article> </div> 10

11 - Membuat kolom 3, kurang lebih sama dengan kolom 1 dan 2, hanya saja nanti ada peletakannya akan diletakkan pada kolom paling kanan <!-- Membuat Column 3 --> <div class="column3 column"> <article> <h2>website Semantic</h2> <p> Menurut Jhon Markoff, WEB SEMANTIK adalah sekumpulan teknologi yang menawarkan cara baru yang efisien dalam membantu komputer mengorganisasi dan menarik kesimpulan dari data online. Melalui web semantik inilah berbagai perangkat lunak akan mampu mencari, membagi, dan mengintegrasi informasi dengan cara yang lebih mudah. Jadi, Web semantik ( semantic web ) adalah perkembangan dari www ( world wide web ) pada tahun 2002, dimana konten web yang di tampilkan tidak hanya dengan format bahasa manusia yang umum tetapi juga bisa di baca dan digunakan oleh bahasa mesin. </p> </article> </div> <div class="clear"></div> - Membuat footer, atau penutup sebuah website. Footer dalam semantic di tulis pada css dengan nama <footer>. Footer berada paling bawah secara umum, dan yang akan kita buat nanti tidak akan mengikuti kolom karena bersifat sebagai penutup website. <footer> Sekian Tutorial dari saya. Jika banyak kesalahan dan kekurangan, saya mohon maaf<hr /> <b>kadaryanto </b><br>&copy 2014 </footer> - Menutup tag container, body, dan HTML. </div> </body> <!-- Mengakhiri Body --> </html> <!-- Mengakhiri HTML --> Ingat, kita sudah membahas di bagian atas, ada html, head, title, css, dan body. Ada 3 kolom yang akan kita buat dan judul yang paling atas. Selanjutnya mari kita ke css nya. b. Memasukkan Kode style.css Dalam memberikan kode css, kita harus selalu memperhatikan setiap koding yang ada di HTML script, jangan sampai terbalik antara penamaan tags, baik ID dan CLASS. Isi dari style.css adalah sebagai berikut : - Dalam body website, settingan yang dilakukan adalah, mengatur font, color / warna tulisan/text, dan margin. Margin merupakan jarak tag dari tag sebelumnya. body{ font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #444444; margin: 0px auto; } 11

12 - Container merupakan wadah dari semua kolom dari website yang kita buat.container {position: relative; width: 960px; margin: 0 auto; padding: 0;} Penjabarannya adalah : o Position : relative Merupakan posisi yang dapat ditempati secara absolute. o Width : 960px Panjang dari container adalah 960px, yang dimuat dalam full layar, (layar maksimal) o Margin : 0 auto; Ini berfungsi agar container berada dalam posisi tengah - Setting lanjutan / tambahan yang terdapat settingan sama, dan dapat digunakan lebih dari 1 elemen..container.column,.container.columns{display: inline; margin-left: 2%; margin-right: 10px; }.clear {clear: both;} Penjabarannya adalah : o Display inline, adalah posisi dimana text di tampilan d atas dari tag yg lain. o Clear : both Script ini digunakan untuk menetralkan dimana didalam tags sebelumnya terdapat floating, atau penempatan posisi element yang terbagi-bagi. - Judul merupakan identifikasi claster yang diberi tanda <div class= judul >, dan disini settingan judul website yang kita buat (dalam HTML tertuang dalam <header>)..judul {background:#e2e2e2; text-align: center; padding: 20px;} - Disinilah pembagian kolom pada layout yang kita buat. /* Auto Resize Setting Here only screen and (min-width: 960px) and (max-width: 1366px) {.container { width: 960px; }.column1 {width: 28%;float: left;}.column2 {width: 28%;float: left;}.column3 {width: 28%;float: left;} } Penjabarannya adalah : only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script media.. { sampai dengan penutup }, akan dijalankan jika layar pengguna memenuhi syarat yaitu, mempunyai panjang minimal 960px (min-width: 960px), dan maksimal panjang nya adalah 1366px (max-width: 1366px). o Column 1,2,3, width : %, dan float left Script ini mengatur panjang dari masing-masing kolom, dimana panjanganya masing-masing 28% dari panjang container total yang dilajalankan. Sedangkan floating left sendiri dapat diartikan, bahwa kolom akan berjajar, bersanding dalam rata kiri / menyesuaikan jajaran dari sebelah lajur only screen and (min-width: 768px) and (max-width: 959px) {.container { width: 768px; }.column1 {width: 28%;float: left;}.column2 {width: 28%;float: left;}.column3 {width: 28%;float: left;} } Penjabarannya adalah : 12

13 only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script media.. { sampai dengan penutup }, akan dijalankan jika layar pengguna memenuhi syarat yaitu, mempunyai panjang minimal 768px (min-width: 768px), dan maksimal panjang nya adalah 959px (max-width: only screen and (min-width: 480px) and (max-width: 767px) {.container { width: 420px; }.column1 {width: 28%;}.column2 {width: 28%;}.column3 {width: 28%;} } Penjabarannya adalah : only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script media.. { sampai dengan penutup }, akan dijalankan jika layar pengguna memenuhi syarat yaitu, mempunyai panjang minimal 480px (min-width: 480px), dan maksimal panjang nya adalah 767px (max-width: 767px). o Ada perbedaan saat settingan berada pada bentang layar yang paling sempit, dimana kolom dihilangkan supaya memudahkan dalam pembacaan isi. - Judul merupakan penutup dari website yang kita buat tadi. Footer berada pada tempat yang paling bawah, dan ini settingan nya, footer{ text-align: center; background: #eaeaea; padding: 10px; } c. Preview Jika kita telah menulis sekian banyak script kedalam 2 file yaitu, index.html dan style.css, maka yang didapat dalam ke 2 file tersebut kurang lebih seperti ini : Index.html 13

14 Dan seterus nya dari file index.html Sedangkan dalam style.css adalah sebagai berikut : Kedua file tersebuat telah kita buat, dan selanjutnya akan diuji coba apakah berjalan sesuai dengan yang kita inginkan, dan sesuai dengan tema yang ditentukan yaitu, skeleton. 14

15 3. Uji Coba Website Untuk menguji coba file website yang telah dibuat yaitu, buka index.html kedalam browser, baik Mozilla Firefox, IE ataupun Opera, atau browser yang lain Klik Kanan file index,html > Open With > Mozilla Firefox Dalam Browser akan muncul tampilan website nya : Dalam tampilan website diatas dibuka menggunakan layar laptop, yang notabene menrupakan layar full / penuh maksimal 1366 pixel width, jadi script yang dijalankan oleh CSS 3 akan penuh dan menjalankan perintah pertama. 15

16 Tampilan layar yang kedua, merupakan layar yang telah dikecilkan. Layar dengan panjang tak lebih dari 950px, akan menjalankan perintah CSS3 dalam mode kedua. Dari hasil script yang kedua, tampilan website menjadi lebih sempit dan trlihat memanjang kebawah. Ini dikarenakan setiap kolom hanya terjatah 28% dari 959 pixel yang telah terkonversi. Ini merupakan setingan yang paling kecil, dimana kolom akan otomatis dihilangkan karena untuk mempermudah pembacaan isi. Layout dengan settingan dibawah 450px biasanya dimiliki oleh gadget/handphone/smartphone yang notabenen mempunyai resolusi layar yang tidak terlalu lebar. Mengapa kolom harus dihilangkan? bagaimana mungkin mata akan nyaman bila mengakses sebuah website akan full dalam banyak kolom sedangkan layar sempit. Maka dari itu perlu dibuat kemudahan dalam pengemasan sebuah website yang lebih memudahkan user experience. 16

17 BAB IV PENUTUP - Kesimpulan Kombinasi antara HTML5 dan CSS3 merupakan perpaduan yang baik karena, selain dapat mempercantik tampilan website, juga dapat dimanfaatkan sebagai pengolah program website secara otomatis, supaya website dapat lebih efisien dan friendly untuk semua perangkat 17