Pada kesempatan kali ini saya akan memberikan contoh penerapan css untuk halaman HTML, dimana didalam css yang saya bagikan ini saya terapkan contoh penerapan css dengan id, class, list, link, hover, vited, dan active.

Visited menyatakan link yang sudah pernah diklik.

Hover menyatakan link yang didekati atau ditunjuk oleh pointer mouse

Active menyatakan link yang sedang diklik

Untuk lebih jelasnya silahkan download scriptnya DISINI

Terdapat beberapa perbedaan antara selektor class dan id, diantaranya :

1. Format Penilisan

ID Selector diawali dengan simbol # (pagar) dan pemanggilan di HTML menggunakan format id  

Class Selector  diawali dengan simbol . (titik) dan pemanggilan di HTML menggunakan format class

Contoh :

Penulisan ID

#judul {

background :#320731;

color :#FFFFFF;

border:3px dashed #F0C0D0;

border-radius:30px 30px 30px 30px;

}

Pemanggilan ID

<div id:"judul">CSS ID</div>

Penulisan CLASS

.judul {

background :#320731;

color :#FFFFFF;

border:3px dashed #F0C0D0;

border-radius:30px 30px 30px 30px;

}

Pemanggilan CLASS

<div class:"judul">CSS CLASS</div>

2. Banyaknya Pemanggilan

ID Selector pemanggilan hanya bisa digunakan satu kali saja untuk satu Tag HTML. Dikarenakan bersifat unik

Class Selector pemanggilan bisa digunakan lebih dari satu kali di dalam Tag HTML nya. Keuntungan menggunakan Class selector ini adalah kita tidak perlu membuat banyak properti Style yang sama berulang-ulang dalam CSS

Contoh :

Penulisan ID

#judul {

background :#320731;

color :#FFFFFF;

border:3px dashed #F0C0D0;

border-radius:30px 30px 30px 30px;

}

Pemanggilan ID

<div id:"judul">CSS ID</div>

Penulisan CLASS

.judul {

background :#320731;

color :#FFFFFF;

border:3px dashed #F0C0D0;

border-radius:30px 30px 30px 30px;

}

.judul2 {

font-size:25px;

}

Pemanggilan CLASS

<div class:"judul judul2">CSS CLASS</div>

CSS dalam dunia pemrograman website sangat penting artinya, karena sangat berguna untuk memformat dokumen HTML sehingga dapat tampil lebih cantik dan enak dipandang mata. Meskipun HTML sudah dilengkapi dengan aneka perintah format, tetapi masih banyak keterbatasan, apalagi kalau untuk menghasilkan design yang indah.

Selain untuk keperluan design, CSS juga berguna untuk menambah interaktifitas halaman website. Misalnya untuk membuat menu dropdown, yang mana tidak bisa dibuat hanya dengan kode HTML. Dengan CSS efektifitas dan efisiensi penulisan kode HTML juga semakin tinggi, karena bisa menghilangkan pengulangan-pengulangan penulisan kode format HTML.

Contoh Penulisan CSS Eksternal :

#Judul {

background :#320731;

color :#FFFFFF;

border:3px dashed #F0C0D0;

border-radius:30px 30px 30px 30px;

        font-size:25px;

        cursor:wait;

}

Untuk mengetahui beberapa code untuk CSS, silahkan klik DISINI

Tabel merupakan sarana untuk menginformasikan data data berupa baris dan kolom. Penggunaan tabel dalam sebuah dokumen HTML dapat meningkatkan kualitas tampilan dari dokumen HTML.

Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan JavaScript. Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>.

Untuk materi Tabel, Form, dan pengenalan PHP bisa download DISINI

Menyimpan HTML :

Setelah menuliskan script atau program html maka sebaiknya anda simpan terlebih dahulu untuk melihat hasilnya melalui browser. Berikut ini langkah-langkah menyimpan program html :

• Klik File - Save As
• Maka akan muncul kotak dialog, pilih folder tujuan anda.
• Save As type diganti All Files dan beri nama file dan diikuti .html dibelakangnya.
• Klik Save, maka script akan tersimpan latihan.html didalam folder tujuan anda.

      Menjalankan HTML :

      Untuk menjalankan program HTML yang telah dibuat tedapat beberapa langkah, yaitu :

•       Buka Windows Explorer – Drive Tujuan (D/E) – Pilih Folder tempat anda menyimpan program HTML.
•       Klik kanan – Open With – Mozilla Firefox
• 
  

HTML (Hyper Text Markup Language) adalah File text murni yang dapat dibuat dengan media editor teks yang dapat dikonversi untuk diubah menjadi sebuah program serta menggunakan kode – kode pemrograman.

Adapun peralatan yang dibutuhkan untuk membuat sebuah halaman web ini, diantaranya :

a.       Sebuah komputer / notebook.

b.      Editor teks, , seperti : notepad, notepad ++, CodeLobster, dll.

c.   Browser web, seperti : Internet Explore, Mozilla FireFox, Google Chrome, dll

Struktur Dasar HTML :

Struktur dasar HTML merupakan sebuah susunan atau tata urutan elemen-elemen yang terdapat pada

sebuah dokemen HTML. Bentuk penulisan dari struktur dasar HTML sebagai berikut :

<html>

  <head>

       <title>JUDUL DOKUMEN HTML</title>

  </head>

<body>

...isi dokumen html

</body>

</html>

Penjelasan dari elemen-elemen diatas :

a.       <html></html>

Merupakan elemen pertama atau tag pembuka dan tag penutup pada dokumen html. Dengan <html> sebagai tag pembuka dan </html> sebagai tag penutup.

b.      <head></head>

Merupakan elemen kedua setelah tag pembuka. Tag ini merupakan header dari sebuah dokumen HTML. Tag ini digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.

c.       <title></title>

Elemen ketiga yang merupakan pendukung dari tag kedua atau header. Tag title ini akan meenghasilkan tampilan judul pada dokuman web.

d.      <body></body>

    Merupakan elemen keempat / terakhir dalam dokumen HTML. Digunakan untuk menampilkan objek, baik yang berupa teks, gambar atau objek lain yang mendukung untuk ditampilkan pada sebuah browser web

1.        PENGENALAN WEBSITE

WEBSITE adalah kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks, gambar diam atau gambar gerak, animasi, suara, dan atau gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).

Web memudahkan pengguna komputer untuk berinteraksi dengan pelaku internet lainnya dan memudahkan pencarian informasi terkini di internet.

2.        JENIS – JENIS WEBSITE

• Website Statis : Web yang halamannya tidak berubah, basanya untuk melakukan perubahan dilakukan dilakukan secara manual dengan mengubah kode. Contoh : Web Profil
• Web Dinamis :Web yang halamannya selalu update, memiliki arus informasi dua arah. Contoh : Facebook, Twitter, Frienster

3.        FUNGSI WEBSITE

Adapun fungsi website adalah sebagai berikut :

Fungsi Komunikasi : Mempunyai fungsi untuk berkomunikasi yang pada umumnya website dinamis. Ex : web mail, chatting.

 Fungsi Informasi : Memiliki fungsi informasi yang lebih menekankan pada kualitas pada kontennya dan memberikan informasi seperti berita terbaru, profil perusahaan, referensi, dll.

Fungsi Entertaintment : Mempunyai fungsi sebagai sarana hiburan. Ex : game online, music online, film online, dll.

Fungsi Transaksi : Web yang dijadikan sebagai sarana transaksi bisnis.

4.        KRITERIA WEBSITE YANG BAIK

·         Mudah Untuk Dipelajari

·         Mudah Untuk Diingat

·         Halaman Konsisten

·         Menyediakan pesan visual yang jelas

·         Interaktifitas

·         Desain yang menarik

5.        UNSUR – UNSUR WEBSITE

A.           Nama Domain

Domain Name / URL : alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website atau alamat yang digunakan untuk menemukan sebuah website pada dunia internet.

Contoh  :

·         co.id ( perusahaan )

·         ac.id ( akademi )

·         sch.id ( sekolah )

·         go.id ( instansi )

·         or.id ( organisasi ), dll

B.            Web Hosting

Web Hosting : Dapat diartikan sebagai ruangan yang terdapat dalam harddisk tempat menyimpan berbagai data, file-file, gambar dan lain sebagainya yang akan ditampilkan di website. Web hosting diperoleh dengan menyewa.

C.           Bahasa Pemrograman

       Bahasa Pemrograman : bahasa yang digunakan untuk menterjemahkan setiap perintah dalam ke dalam website. Contoh : HTML, CSS, Java Script, PHP, dll. 

Program Orientasi Nama               : Didi Setiawan Jabatan                        : Programmer Bagian/Seksi   : Pembuat Program (IT)

No.                  : Dokumen        : Tgl. Terbit       :

Latar Belakang         :             Program orientasi ini dibuat agar programmer dapat bekerja sesuai dengan baik pada tempat yang tepat. Sehingga proses kerja berjalan dengan baik dan sistematis sesuai dengan aturan yang berlaku di perusahaan. Tujuan                       : 1.      Agar  orang yang bersangkutan memahami cara berhubungan dengan rekan kerja. 2.      Agar orang yang bersangkutan mengetahui sarana prasarana yang ada di perusahaan sehingga pemakaian sarana pendukung pekerjaan yang digunakan tersebut benar. 3.      Agar yang bersangkutan memahami prosedur kerja yang baik sebagai programmer. 4.      Agar yang bersangkutan mengerti tentang alur untuk membuat atau mengembangkan program sesuai kebutuhan perusahaan. 5.      Agar yang bersangkutan dapat mengembangkan bahasa pemrograman yang dikuasai untuk diimplementasikan di dalam perusahaan. Materi                         : 1.      Mempelajari hubungan dengan rekan kerja dan bagian lain. 2.      Mempelajari penggunaan sarana prasarana perusahaan. 3.      Mempelajari prosedur karja sebagai programmer. 4.      Mempelajari alur yang benar untuk membuat program. 5.      Mempelajari satu bahasa pemrograman yang dikuasai untuk lebih didalami. 6.      Laporan presentasi. Laporan Presentasi   : No Uraian Waktu Narasumber 1. Pengenalan antar individu 1-5 Januari 2013 Bambang Pramono 2. Pengenalan sarana dan prasarana perusahaan 6-10 Januari 2013 Sutoyo 3. Mengenal profil perusahaan 11-13 Januari 2013 Heru Kustanto 4. Pemberian arahan tentang prosedur kerja programmer 14 Februari – 14 Maret 2013 Galih Sucipto 5. Mempelajari alur dalam pembuatan program 15 Maret -15 April 2013 Darsono 6. Pendalaman bahasa pemrograman 16 April – 16 Juni 2013 Sujatmiko 6. Presentasi 17 Juni 2013 Nurhidayat Dibuat Disetujui Dijalankan Didi Setiawan Agung Prasetyo Wahyu Irawan

PT. DHARMA WANGSA                            Halaman 1 dari 3             FORMULIR PPK TERKAIT SASARAN 2013                         PELAKSANA ADMINISTRASI	Nomor             :
	Tgl. Terbit       :
Nama Karyawan yang dinilai : Didi Setiawan NIK                                         : 120101044 Divisi/Sub Div./Bagian/Seksi  : Pembuat Program (IT) Periode Penilaian/Tahun         : 2013 Faktor Bobot Terget Nilai 1 2 3 4 1.      TUGAS POKOK 1.1 Deadline program untuk perusahaan 30% 4 >4 Bulan >3 Bulan >2 Bulan ü <2 Bulan 1.2 Pengembangan sistem yang ada di perusahaan 15% 4 Sistem tidak lengkap sesuai dengan kebutuhan Sistem kurang lengkap ü Sistem sudah sesuai kebutuhan tapi masih terdapat kekurangan Sistem lengkap dan tepat sesuai kebutuhan perusahaan 1.3 Membuat sistem yang komunikatif ( user interface ) 20% 4 Sistem susah dipahami Sistem terlalu bertele-tele ü Sistem mudah dipahami tapi masih ada kekurangan Sistem yang dibuat mudah dipahami 2.      TUGAS NON POKOK 2.1 Kerja sama 10% 3 Sama sekali tidak mau kerja sama Mau kerja sama tetapi tidak aktif didalamnya Mau membantu tapi pilih-pilih ü Tidak memilih-milih dalam bekerja sama 2.2 Inisiatif 5% 3 Tidak ada ide sama sekali Ada ide tetapi masih perlu perbaikan ü Sering memberi ide untuk  sistem yang ada di perusahaan Sering memberi ide yang diterapkan pada sistem di perusahaan 2.3 Komunikasi 10% 3 Ada > 2 komplain tentang program yang dibuat. Ada 2 komplain tentang program yang dibuat. ü Ada 1 komplain tentang program yang dibuat. Tidak pernah ada komplain tentang program yang dibuat 2.4 Penguasaan Deskop Programming 10% 3 Hanya bisa membuat proram menggunakan Pascal saja. Hanya bisa membuat proram menggunakan Visual Basic saja. ü Hanya bisa membuat proram menggunakan Pascal, Visual Basic. Hanya bisa membuat proram menggunakan Pascal,Delphi, Visual Basic. Sub Total Bobot 100% 24 Total Bobot Hasil (Nilai Akhir) 3,4 Kategori PPK A
Ø  Kriteria PPK : A = 3,3 – 4                         B = 3 – 3,2                         C = 2,7 – 2,9                         D = < 2,7                                 Jabatan Tanda Tangan Tanggal Penilai Direktur 29 November 2013 Pemberi Konfirmasi Kepala Bagian Programmer 29 November 2013 Yang dinilai Programmer 29 November 2013

SLIP PENGGAJIAN PT. MEKAR JAYA Nama               : Budi NIK                 : 120101044 Jabatan                        : Administrasi Penggajian Bag./Seksi       : HRD Penggajian Alamat                        : Jl. Pleret Selatan I No.4, Banyuanyar, Surakarta Status              : 4 1.      PENGHASILAN 1.1  Gaji                                   : 2.750.225 1.2  Lembur                              : 1.454.573 Upah Lembur /Jam            : 1/173 x 2.750.225                                           : 15.897           -24 Nov    : 6 Jam (Lembur mulai jam 16.00)                  : 6 Jam B                         : 6 (31.794)                         : 190.764 -25 Nov    : 8 Jam                  : 1 Jam A + 7 Jam B                         : 23.845 + 7 (31.794)                         : 246.403 -26 Nov    : 2 Jam                  : 1 Jam A + 1 Jam B                         : 23.845 + 31.794                         : 55.639 -27 Nov    : 9 Jam                  : 1 Jam A + 7 Jam B + 1 Jam C                         : 23.845 + 7 (31.794) + 47.691                         : 294.094 -28 Nov    : 10 Jam                  : 1 Jam A + 7 Jam B + 2 Jam C                         : 23.845 + 7 (31.794) + 2(47.691)                         : 341.785 -29 Nov    : 2 Jam                  : 1 Jam A + 1 Jam B                         : 23.845 + 31.794                         : 55.639 -30 Nov    : 8 Jam (Lembur mulai jam 16.00)                  : 7 Jam B + 1 Jam C                         : 7 (31.794) + 47.691                         : 270.249 1.3  THR                      : - 1.4  Bonus                    : - 1.5  JHT                       : 2.750.225 x 3,7 %       = 101.758 1.6  JK                          : 2.750.225 x 0,37 %     = 10.175 1.7  JKK                       : 2.750.225 x 0,87 %     = 23.926 1.8 JPK                       : 2.750.225 x (3 x 4) %                                     : 2.750.225 x 12%         = 330.027 Total Penghasilan                                            = 4.670.684 2.      POTONGAN 2.1  PTKP                    : 240.000 + 3(120.000)                               : 600.000 2.2  Pinjaman               : 500.050 2.3  Tunjangan Jabatan: 2.750.225 x 5%           = 137.511 2.4  JHT                       : 2.750.225 x 5,7 %       = 156.762 2.5  JK                          : 2.750.225 x 0,37%      = 10.175 2.6  JKK                       : 2.750.225 x 0,87%      = 23.926 2.7 JPK                       : 2.750.225 x (3 x 4) %                                     : 2.750.225 x 12%         = 330.027 2.8 Absensi                 : 1/30 x 2.750.225         = 91.674 Total Potongan                                                = 1.850.125 Netto (Total Penghasilan – Total Potongan)     = 2.820.559 PPH                 : 2.820.559 – 2.000.000                                     : 820.559 x 5%                          = 41.027 Gaji Bersih (Netto – PPH)                              = 2.779.532

SLIP PENGGAJIAN PT. MAJU KUSUMA BANGSA Nama               : Susanti NIK                 : 120101044 Jabatan                        : Manajer Personalia Bag./Seksi       : Alamat                        : Jl. Pleret Selatan I No.4, Banyuanyar, Surakarta Status              : 3 1.      PENGHASILAN 1.1  Gaji                       : 15.850.330 1.2  Lembur                  : - 1.3  THR                      : 15.850.330 1.4  Bonus                    : 2 x 15.850.330                               : 31.700.660             Netto THR + Bonus   : 15.850.330 + 31.700.660                                                 : 47.550.990             PPH                             : 47.550.990 – 2.000.000                                                 : 45.550.990 x 10%                                                 : 4.555.099             Total THR + Bonus  : 47.550.990 + 4.555.099                                                 : 42.995.891 1.5  JHT                       : 15.850.330 x 3,7 %     = 586.462 1.6  JK                          : 15.850.330 x 0,37 %   = 58.646 1.7  JKK                       : 15.850.330 x 0,87 %   = 137.897 1.8 JPK                       : 15.850.330 x (3 x 3) %                                     : 15.850.330 x 9%         = 1.426.864 Total Penghasilan                                            = 18.059.864 2.      POTONGAN 2.1  PTKP                    : 240.000 + 2(120.000)                               : 480.000 2.2  Pinjaman               : - 2.3  Tunjangan Jabatan: 15.850.330 x 5%         = 108.000 2.4  JHT                       : 15.850.330 x 5,7 %     = 903.468 2.5  JK                          : 15.850.330 x 0,37%    = 58.646 2.6  JKK                       : 15.850.330 x 0,87%    = 137.897 2.7 JPK                       : 15.850.330 x (3 x 3) %                                     : 15.850.330 x 9%         = 1.426.529 2.8 Absensi                 : 3/30 x 15.850.330       = 1.585.033 Total Potongan                                                = 4.591.573 Netto (Total Penghasilan – Total Potongan)     = 13.468.291 PPH                 : 13.468.291 – 2.000.000                                     : 11.468.291 x 5%                     = 573.414 Gaji (Netto – PPH)                                          = 12.894.768 Total Gaji Bersih                               = 12.894.768 + 42.995.891 (Gaji + Total THR & Bonus)           = 55.890.786