Skip navigation

Tag Archives: CSS


Just share a bit. When we want to commit source code, it’s better to check locally before pushing the source code to repository which then check them at the build server.

Here’s a source code for the wrapper script. The needed binaries are PHPCS, ESLint, and Stylelint.

To execute in the pre-commit, you can just use this.

SOURCE_FILES=${SOURCE_FILES:-`git diff-index --name-only --diff-filter=ACMR HEAD`}
export SOURCE_FILES
./checkstyle.sh

exit $?

Sedikit sharing tentang desain HTML. Gw beberapa hari ini lagi bikin theme wordpress buat website kantor meski pada dasarnya gw gak jago desain. Meski demikian, gw lumayan bisa kalo layout HTML dan CSS. Oke, sering kita ngeliat pada halaman web sering ada sebuah halaman yang memiliki bingkai gradasi atau pola-pola menarik. Di CSS yang sekarang kita gak bisa set bingkai (border) sebuah elemen menjadi sebuah gradasi atau pola. Tapi kita bisa menyiasatinya.

Layout HTML yang dipakai adalah sebagai berikut

<body>
<div id="page_wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

Selanjutnya kita sediakan sebuah gambar berukuran 920*2 pixel. Sebenarnya ukurannya lebarnya bisa terserah berkisar antara 900 s.d. 800an pixel dan tingginya hanya 1 s.d. 3 pixel. Di kedua pinggirnya kita siapkan pola atau gradasi. Contoh dapat dilihat di sini.

Nah, setelah itu kita tinggal bermain-main CSS.

body {margin:0px;padding:0px;background:#aaffb0;}
#page_wrapper {width:920px;background:url(page-border.png) repeat-y;margin:auto;}
#header {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}
#content {width:860px;margin:0px 30px 0px 30px;height:400px;border:1px solid #00ff12;background:#ffffff;}
#footer {width:860px;margin:0px 30px 0px 30px;height:100px;border:1px solid #00ff12;background:#00ff12;}

Page wrapper adalah sebuah elemen yang menampilkan gambar background di atas dan membungkus elemen-elemen utama : header, content, dan footer. Pada gambar yang disertakan, ukuran gradasi adalah 30px masing-masing. Oleh karena itu ukuran lebar header harusnya 60px lebih kecil dari  page wrapper dan harus memiliki margin 30px di kedua sisi kanan dan kiri. Margin ini akan memberi tempat bagi bingkai tersebut agar dapat terlihat.

Hasilnya nanti seperti di bawah.

Kode dapat diunduh di sini.

(seperti biasa, rename extension ke *.zip)


Tugas besar Pemrograman Internet kali ini adalah untuk menyusun sebuah situs mirip jejaring sosial yang berisi profil-profil diri dari anggota kelompok yang terkait satu sama lain menggunakan hyperlink. Salah satu poin yang gw propose di spesifikasi tugas besar tersebut adalah Web Standard compliance.

Apa sih itu Web Standard? Web Standard adalah sebuah teknologi atau spesifikasi yang telah disusun untuk membuat atau menginterpretasikan konten berbasis web. Standar-standar ini didefinisikan terutama oleh World Wide Web Consortium. Setiap pengembang web seharusnya mengikuti standar yang telah ditetapkan tersebut. Dan untungnya Pak Riza, dosen yang bersangkutan, sangat setuju dengan adanya spesifikasi tersebut.

Kenapa sih harus ikut Web Standard?

Read More »

%d blogger menyukai ini: