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.