CSS3Ps Adalah sebuah web/cloud berbasis plugin untuk photoshop yang digunakan untuk mengubah objek yang dibuat di photoshop menjadi kode CSS3. Plugin ini memudahkan para web designer dalam mendesain sebuah halaman web di photoshop, dengan satu klik saja sudah bisa menampilkan berderet-deret kode CSS3.

Fitur-Fitur CSS3Ps:

• Multiple Layers 
• Prefixes 
• Size
• Border Radius 
• Stroke 
• Inner Shadow 
• Inner Glow 
• Gradients Overlay 
• Outer Glow
• Drop Shadow 
• Text Layers

Fitur tersebut merupakan beberapa hal yang bisa di convert ke dalam CSS3.

Link Download

Untuk Adobe Photoshop CC 2014

Untuk Adobe Photoshop CS5, CS6, dan CC

Untuk Adobe Photoshop CS3, dan CS4

Untuk Tutorial Instalasinya bisa di lihat disini

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR  terlebih dahulu .  CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda

Cara Penulisan CSS: 

1. Inline Style Sheet
2. Embed Style Sheet
3. Linked Style Sheet

CSS3 merpukan generasi ke-3 dari perkembangan CSS sebelumnya. Jadi pada dasarnya, pengertian CSS3 sama saja dengan pengertian CSS generasi paling awal. Hanya saja, beberapa standar baru untuk CSS3 menggantikan CSS2 dan mungkin akan membuat kiat dapat bereksplorasi lebih dalam lagi untuk membuat tampilan situs lebih menarik dan mulai meninggalkan situs yang membuat menunggu dengan loading yang lama.

Keunggulan CSS3:

•         Struktur data sederhana
•         CSS3 mampu membuat efek animasi secara independent tanpa membutuhkan software  tambahan seperti Adobe Flash dan Microsoft Silverlight.
•         CSS3 mampu memberikan efek grafis terhadap teks, kolom, table serta penataan huruf.
•         CSS3 mampu menampilkan berbagai macam dan jenis huruf selain web-safe fonts.
•         CSS3 mampu merekonstruksi secara visual tampilan block, seperti merubah ukuran kotak, transformasi 2D/ 3D, memberikan efek sudut dan bayangan.
•         CSS3 mampu memanipulasi secara visual warna, desain maupun tekstur.
•         Bisa mengurangi ukuran file yang akan di-load dan lebih ringan.
•         Lebih mudah dan simple serta dapat menghindari penggunaan tag yang berulang-ulang.
•         Banyak yang beranggapan bahwa peran jQuery sudah tidak dibutuhkan lagi setelah CSS3  semakin berkembang kedepannya. Apalagi dari segi size, jQuery jauh lebih besar size-nya daripada CSS3. Tidak hanya jQuery saja, peran Flash saja sudah mulai tergantikan dengan adanya CSS3.
•        Sebaiknya membuat file CSS3 yang terpisah dari file html (External Style Sheet) dan dapat  dipanggil di file html. Hal ini dapat mempermudah kita jika terjadi pengeditan file. Karena, jika terjadi perubahan layout pada website, kita hanya perlu mengedit file cssnya saja, tanpa mengubah file htmlnya. Oleh karena itu, External Style Sheet lebih direkomendasikan daripada Inline Style Sheet

Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.


Tapi...  Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.

Contoh Template Bootstrap

DEMO | DOWNLOAD

DEMO | DOWNLOAD

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ).
Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>

Sintaks Penulisan Table:

<table>

<tr>

<td>Data Tabel</td>

<tr>

</table>  

Elemen-elemen dalam Table

Elemen	Penjelasan
<table> . . . </table>	Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>	Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>	Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>	Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>	Pembentuk sel data dalam tabel.

Catatan :  

• Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.
• Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.
• Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.  

Atribut tag Dalam <table>

Atribut tag dalam <tr>

Atribut tag Dalam <th> dan <td>

Setelah Mengenal tag tag penulisan dalam table, selanjutnya kita akan membuat template sederhana menggunakan table. Berikut langkah-langkahnya :

1. Buka Notepad++ anda (jika belum punya silahkan download di sini)

2. Ubah Language notepad++ anda menjadi bahasa HTML. lihat gambar di bawah ini

3. Ketikan code berikut di notepad++ anda

<html> 

<head>

<title>Latihan Membuat Tamplate Sederhana</title>

</head>

<body>

<table width="80%" height="80%" border="1" bordercolor="#FF0000" align="center">

<tr>

<th colspan="3" height="300"><h1>HEADER</h1></th>

</tr >

<tr>

<th colspan="3"><h3>Menu</h3>

</tr>

<tr>

<td colspan="2" align="center" height="400"><H2>Area Postingan</h2></td>

<td align="center" width="300"><h2>Area Widget</h2></td>

</tr>

<tr>

<td colspan="3" height="100" align="center"><h3>Footer</h3></td>

</tr>

</table>

</body>

</html> 

4. Setelah itu save file tersebut dengan format html, lalu jalankan file tersebut menggunakan browser anda, maka akan tampil seperti ini

Sekian tutorial dari saya, semoga bermanfaat buat anda. dan jika tutorialnya masih kurang, nanti akan saya posting lagi tutorial html yang lain, tapi anda juga harus kreatif mengembangkan tutorial ini :D. Terimakasih

HTML atau HyperTxt Markup Language merupakan sebuah salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang di sajikan pada browser. Selanjutnya saya akan Beri tutorial membuat web sederhana menggunakan Notepad++. Untuk Link Download Notepad++ bisa di SINI

Jika sudah punya Notepad++, kita mulai saja langsung membuat web HTML. Berikut langkah-langkah membuat web HTML


1. Buka Notepad++ lalu ubah bahasanya, ubah menjadi HTML. Seperti gambar di bawah ini

2. Tuliskan script/code di bawah ini ke dalam notepad++ anda

<html>
<head>
<title>Belajar menulis dengan HTML</title>
</head>
<body>
<h1>Selamat Datang</h1>
</br>
<p>Ini adalah halaman web pertama saya. Hore... Saya bisa!!</p>
</body>
</htmlL>

3. Jika sudah selesai simpan hasilnya. Pilih file>Save/Save as>Beri nama file>ubah typenya menjadi html>klik save

4. Setelah Di save maka buka file yang di simpan tadi dan hasilnya akan menjadi seperti ini

Selamat anda sudah bisa membuat WEB HTML!! :D