ULANGAN TENGAH SEMESTER 1

- WEBSITE STATIS -

TUTORIAL DESAIN COLUMN PADA WEBSITE

SEDERHANA
LINK TURORIAL = HTTP://WWW.GETSKELETON.COM

Nama : Kadaryanto
NIM : 12141372
Prodi : 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 .............................................................................................. 3

- Pengertian Website Statis ....................................................................................... 3
- Pengertian Website Dinamis .................................................................................. 3
2. BAB II PEMBAHASAN .............................................................................................. 4
- Persiapan Pengerjaan .............................................................................................. 4
- Gambaran singkat tema “Skeleton” ........................................................................ 4
- Memilah bagian column pada “Skeleton” .............................................................. 4
3. BAB III MEMBUAT WEBSITE BERCOLUMN SEDERHANA .............................. 7
- Memulai pembuatan website serderhana ................................................................ 7
- Memulai Coding ..................................................................................................... 9
o Memasukkan Kode HTML di index.html ........................................................ 9
o Memasukkan Kode CSS di style.css ................................................................ 11
o Preview ............................................................................................................. 13
- Uji coba website yang telah di buat ........................................................................ 15
4. BAB IV PENUTUP ...................................................................................................... 17
- Kesimpulan ............................................................................................................. 17

2
 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, 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 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 file-
file 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
<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
 - 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
<!-- 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
- 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
 - 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 || 12141372</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
- 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 */
@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

17