Menghias HTML dengan CSS

HTML (HyperText Markup Language)

• Format standar untuk membuat dokumen web
• Bahasa bertanda,menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus

Penjelasan tentang HTML sudah pernah saya posting sebelumnya, silahkan klik :)

CSS (Cascading Style Sheet)

• Suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.
• Digunakan untuk :
• Mempercantik halaman web
• Membuat layout halaman web
• Template
• Code-code penting dalam CSS :
• Inline à digunakan dengan menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi beberapa propertis CSS atau dapat dikatakan untuk mengatur bagian tertentu
• Embedded à untuk mengatur secara general
• Linked à untuk membuat suatu halaman (page) terhubung dengan halaman lainnya

Definisi CSS

Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita.

CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.

Keuntungan CSS

• Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturanaturan CSS tersebut untuk diterapakan pada seluruh dokumendokumen HTML pada halaman situs kita.
• User yang berbeda dapat mempunyai style-sheet yg berbeda pula.
• Ukuran dan kompleksitas document code dapat diperkecil.

Contoh Menghias HTML dengan CSS

1. Buat folder terlebih dahulu pada suatu drive, disini saya membuat dengan nama folder PEMROG_WEB. Semua data yang dibutuhkan seperti file gambar, .html disave di folder ini. Perhatikan gambar 1.
2. Buka Notepad++ kemudian tuliskan script HTML dan CSS, setelah selesai save dengan nama index.html (perhatikan gambar 2) dan about.html (perhatikan gambar 3)
3. Bila sudah selesai double klik file dengan exstension .html maka akan membuka secara otomatis ke browser anda. Web sederhana yang kita buat dengan HTML dan CSS bisa dijalankan. Tampilan output pada browser untuk index.html (perhatikan gambar 4) dan about.html (perhatikan gambar 5) 

Gambar 1. File-File Yang Berada Dalam Folder PEMROG_WEB

Gambar 2. Script index.html Pada Notepad++

Gambar 3. Script about.html Pada Notepad++

Gambar 4. Output Pada Browser Untuk index.html

Gambar 5. Output Pada Browser Untuk about.html

Penjelasan Script/Coding HTML dan CSS :

• Pada awal penulisan saya menuliskan (head) (style) dan diakhiri dengan (/head) (/style) script tersebut menjelaskan tentang pembuatan warna background,  jenis huruf, keterangan setiap class (class rizki dan class ribbon), dan letak tampilannya. Dibagian ini lebih menunjukkan ke desain dari web yang dibuat dengan HTML dan CSS.
• Script (body) (/body) berisi script untuk menampilkan pembuatan judul yaitu IDENTITAS DIRI yang teridiri dari foto, nama, TTL, jenis kelamin, alamat, kewarganergaraan, e-mail, dan blog.
• Script (a href='about.html' title='Halaman Selanjutnya')(img src='panah_kanan.png' style="width: 35px;float: right;")(/a) berfungsi sebagai link untuk pindah ke halaman selanjutnya dengan nama file about.html
• Script (img src="rizki_ariyani.jpg" style="width: 70px;float: right;margin-right: 5px;"/) berfungsi untuk memunculkan gambar pada web

Referensi :

http://lulu.staff.gunadarma.ac.id/Downloads/folder/0.2