1 ULANGAN TENGAH SEMESTER 1 - WEBSITE STATIS - TUTORIAL DESAIN COLUMN PADA WEBSITE SEDERHANA LINK TURORIAL = Nama : Kadaryanto NIM : Prodi : Teknik I...
TUTORIAL DESAIN COLUMN PADA WEBSITE SEDERHANA LINK TURORIAL = HTTP://WWW.GETSKELETON.COM
Nama NIM Prodi
: : :
Kadaryanto 12141372 Teknik Informatika Jenjang S1 ( Malam )
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER “STMIK EL RAHMA YOGYAKARTA” Jalan Sisingamangaraja No. 76 Karangkajen, Yogyakarta
2014
1
DAFTAR ISI
1. BAB I PENDAHULUAN .............................................................................................. - Pengertian Website Statis ....................................................................................... - Pengertian Website Dinamis .................................................................................. 2. BAB II PEMBAHASAN .............................................................................................. - Persiapan Pengerjaan .............................................................................................. - Gambaran singkat tema “Skeleton” ........................................................................ - Memilah bagian column pada “Skeleton” .............................................................. 3. BAB III MEMBUAT WEBSITE BERCOLUMN SEDERHANA .............................. - Memulai pembuatan website serderhana ................................................................ - Memulai Coding ..................................................................................................... o Memasukkan Kode HTML di index.html ........................................................ o Memasukkan Kode CSS di style.css ................................................................ o Preview ............................................................................................................. - Uji coba website yang telah di buat ........................................................................ 4. BAB IV PENUTUP ...................................................................................................... - Kesimpulan .............................................................................................................
2
3 3 3 4 4 4 4 7 7 9 9 11 13 15 17 17
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
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, MsDOS, 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 http://www.getskeleton.com pada halaman download. -
Masuk ke http://www.getskeleton.com untuk mengunduh file example framerowk skeleton 4
-
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
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 dan sebagai akhiran head adalah c. Basic Pages Needs, yang terletak di head, merupakan bagian dari title halaman website, untuk mengganti nama web, rename bagian Nama Web Anda 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
-
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
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
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
-
Header Header merupakan tempat dimana diletakkan title (nama website di title bar), memuat link CSS dan javascript (JQuery, dll) Mencoba Membuat Column 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.
9
-
Memulai Container, merupakan wadah dari semua kolom yang nantinya dibuat.
-
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 Column Halaman Semantic
-
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.
<article>
Sejarah TI
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.
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
-
Membuat “kolom 2”, kurang lebih sama dengan kolom 1, hanya saja nanti ada peletakannya akan diletakkan di tengah.
<article>
Apa Itu Website?
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.
10
-
Membuat “kolom 3”, kurang lebih sama dengan kolom 1 dan 2, hanya saja nanti ada peletakannya akan diletakkan pada kolom paling kanan
<article>
Website Semantic
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.
-
Membuat footer, atau penutup sebuah website. Footer dalam semantic di tulis pada css dengan nama
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
-
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
, dan disini settingan judul website yang kita buat (dalam HTML tertuang dalam ). .judul
Disinilah pembagian kolom pada layout yang kita buat. /* Auto Resize Setting Here */ @media 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 : o @media only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script dalam @ 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 kiri. @media 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
o
@media only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script dalam @ 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: 959px).
@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .column1 {width: 28%;} .column2 {width: 28%;} .column3 {width: 28%;} } Penjabarannya adalah : o @media only screen, merupakan bahasa dari CSS3, dimana disitu dapat diartikan sebagai : script dalam @ 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
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
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
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
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
