Showing posts with label Programming. Show all posts
CSS dan Penerapannya
Setelah beberapa waktu tidak posting artikel apapun, akhirnya Gudang Receh mulai ngeblog lagi. Pada posting kali ini Gudang Receh akan sedikit berbagi tentang CSS. Apa itu CSS ?
CSS adalah singkatan dari "Cascading Style Sheets" merupakan suatu bahasa markup (bukan bahasa pemrograman) yang berfungsi untuk mengatur style pada webpage html. Apakah fungsi CSS ?
Apabila dalam suatu web page html akan membuat style untuk suatu element, maka pada sebagian element yang lain harus menuliskan script untuk stylenya lagi. Disinilah fungsi dari CSS, yaitu untuk meringkas style tersebut sehingga tidak perlu diulang-ulang. Bahkan juga dapat diterapkan pada web page lainnya.
Penerapan CSS
Ada 3 cara dalam menerapkan script CSS pada web page yang kita buat:
1. Inline
Pada metode ini, script CSS di letakkan didalam suatu tag html. Contohnya dibawah ini:
<html>
<head>
<title>Contoh Penulisan CSS Inline</title>
</head>
<body bgcolor="#FFFFFF">
<div id="contoh1">
Ini adalah contoh text tanpa ditambahkan script CSS </div>
<div id="contoh2" style="font-size: 24pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point </div>
<div id="contoh3" style="color: blue; font-size: 14pt;">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru </div>
</body>
</html>
Hasilnya akan seperti dibawah:
Ini adalah contoh Text ini tanpa ditambahkan script CSS
Text ini ditambahkan script CSS inline. Besar font 24 point
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru
Namun menurut saya pribadi, metode ini kurang efektif, karena hampir sama dengan pemformatan tulisan pada html biasa yang harus mengulang - ulang script tersebut.
2. Embedded
Pada metode ini script di tulis diantara tag <style> </style> yang ada dalam head. Contohnya seperti dibawah:
<html>
<head>
<title>Contoh Penulisan CSS Embedded</title>
<style>
#contoh1 {
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
</style>
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>
Dan hasilnya akan seperti dibawah ini:
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.
Penerapan metode embedded lebih efektif dibanding dengan metode inline, karena tidak perlu mengulang-ngulang script pada setiap tag. Namun pada metode ini masih kurang efektif karena hanya bisa diterapkan dalam satu web page html saja. Untuk diterapkan pada web page html lainnya maka kita harus menuliskannya lagi atau dapat juga copy dan paste.
3. External
Maksud dari external adalah, style script yang kita tulis disimpan dengan nama sendiri, dengan ekstensi file .css . Kemudian dipanggil oleh web page html yang telah dibuat. Contoh penerapan CSS External:
<html>Script diatas adalah script html yang akan diberi style. Simpan dengan nama sesuka anda. Misal "index.html"
<head>
<title>Contoh Penulisan CSS External</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="contoh1">
Ini adalah contoh Text yang ditambahkan script CSS. Warna font biru.</div>
<br>
<div id="contoh2">
<br />
Text ini ditambahkan script CSS inline. Besar font 24 point dan warna merah.</div>
<p class="contoh3">
<br />
Text ini ditambahkan script CSS inline. Besar font 14 point, dan menggunakan warna biru.</div>
</body>
</html>
Dan script berikut adalah script CSS untuk memberi style pada web page html diatas.
#contoh1 {Simpan dengan nama yang sama dengan file yang dipanggil dalam tag <link rel="stylesheet" type="text/css" href="style.css" />
color:blue;
}
#contoh2 {
color:red;
font-size:24pt;
}
.contoh3 {
color:green;
font-size:14pt;
}
Pada metode ini, menurut saya pribadi adalah paling efektif untuk diterapkan pada pembuatan web anda. Karena beberapa web page sekaligus dapat memanggil satu style script.
Itulah sedikit yang dapat Gudang Receh bagi, dan sepertinya masih banyak salah dan kata yang membingungkan. Mohon komentarnya untuk kritik dan saran.
Source gambar
Tags: css, script, style, html, web page, web, page, sheets,
Form dan Table di HTML
Sudah kurang lebih 1 Minggu Gudang Receh tidak posting artikel apapun, dikarenakan tugas kuliah yang numpuk dan belum selesai semua (curhat). Namun ada satu tugas yang saya paling sukai, yaitu tugas ini, posting review materi ke blog masing - masing, lumayan untuk menambah posting di blog yang masih sedikit.
Kali ini Gudang Receh membahas tentang Form dan Table pada HTML sebagai tugas review mingguan.
Form
Form adalah kolom yang berfungsi untuk mengumpulkan informasi dari blog / website kita. Misalnya informasi untuk login, register, search, dll.
Contoh form:
 |
| Pada halaman utama facebook terdapat 2 form, form login dan form register. |
 |
| Setelah login terdapat form search, form status, dan form comment. |
Contoh script untuk membuat form dengan informasi yang diminta Nama, Alamat, Jenis Kelamin, Nomor Telepon, Profesi, dan Hobi:
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="#" method="post">
Nama:<br />
<input type="text" name="nama" /><br />
Alamat:<br />
<textarea cols="60" rows="5"></textarea><br />
Jenis kelamin:<br />
<input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan<br />
Nomor telepon:<br />
<input type="text" name="nhp" /><br />
Pekerjaan:<br>
<select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select>
<br />
Hobi:<br />
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
Hasilnya akan seperti dibawah ini.
Form
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
Untitled Document
Keterangan:
- Pada atribut action, digunakan "#" karena action ke halaman pemroses belum tersedia, biasanya ditulis dengan bahasa .php
- Pada atribut method dapat dipilih metode "post" ataupu "get". Namun terdapat perbedaan antara keduanya, jika menggunakan metode "get" maka informasi yang dipakai akan tampil di address bar. Namun apabila menggunakan metode "post" maka informasi tidak di tampilkan di address bar.
Table
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.
Contoh script tabel:
<html>Hasilnya akan seperti dibawah ini.
<head>
<title>Tabel</title>
</head>
<body>
<table width="400" border="1">
<tr>
<td width="112">Nama</td>
<td width="21">:</td>
<td width="245"> </td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td> </td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td> </td>
</tr>
</table>
</body>
</html>
| Nama | : | |
| Alamat | : | |
| Jenis kelamin | : | |
| Nomor telepon | : | |
| Pekerjaan | : | |
| Hobi | : |
Keterangan:
- Tag <tr> adalah table rows
- Tag <td> adalah table data
Kolaborasi Form dan Table
Banyak orang mengkombinasikan fungsi dari table untuk merapikan form. Dan berikut ini adalah script kombinasi keduanya.
<html>Dan hasilnya akan seperti:
<head>
<title>Form & Table</title>
</head>
<body>
<form action="#" method="post">
<table width="647" border="0">
<tr>
<td width="209">Nama</td>
<td width="10">:</td>
<td width="421"><input type="text" name="nama" /></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea cols="60" rows="5"></textarea></td>
</tr>
<tr>
<td>Jenis kelamin</td>
<td>:</td>
<td><input type="radio" name="jeniskelamin" value="lakilaki" />Laki-laki
<input type="radio" name="jeniskelamin" value="perempuan" />Perempuan</td>
</tr>
<tr>
<td>Nomor telepon</td>
<td>:</td>
<td><input type="text" name="nhp" /></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select>
<option value="mhs">Mahasiswa
<option value="pns">PNS
<option value="wiraswasta">Wiraswasta
</select></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td>
<input type="checkbox" name="hobi" value="mancing" />Mancing
<input type="checkbox" name="hobi" value="membaca" />Membaca
<input type="checkbox" name="hobi" value="musik" />Musik
<input type="checkbox" name="hobi" value="sport" />Sport</td>
</tr>
</table>
</form>
</body>
</html>
Keterangan:
- Value dari atribut border pada tag <table> dapat diganti - ganti. Agar border tidak terlihat, gunakan 0.
Itulah review dari Gudang Receh tentang Form dan Table, Semoga bermanfaat.
Tags: tugas, tugas html, html, tabel, table, form,
Tag :
Programming,
Web Programming
Notepad++
Notepad++ adalah sebuah text editor pengganti Notepad yang mendukung beberapa bahasa termasuk HTML, PHP, CSS, dll. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan source code berbagai bahasa pemrograman.
Notepad++ didistribusikan sebagai perangkat lunak bebas. Proyek ini dilayani oleh Sourceforge.net telah diunduh lebih dari 27 juta kali dan dua kali memenangkan penghargaan SourceForge Community Choice Award for Best Developer Tool.
Bahasa Pemrograman yang didukung Oleh Notepad++:
- ActionScript, Ada, ASP, Assembler, autoIt
- Batch
- C, C++, C#, Caml, Cmake, COBOL, CSS
- D, Diff
- Flash ActionScript, Fortran
- Gui4CLI
- Haskell, HTML
- Berkas INI, InnoSetup
- Java, Javascript, JSP
- KiXtart
- LISP, Lua
- Makefile, Matlab, MS-DOS
- NSIS
- Objective-C
- Pascal, Perl, PHP, Postscript, PowerShell, Properties file, Python
- R, Resource file, Ruby
- Shell, Scheme, Smalltalk, SQL
- TCL, TeX
- Visual Basic, VHDL, Verilog
- XML
- YAML
Tags: html, notepad, notepad++, editor, text, text editor,
Iptekini
