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

Membuat CV (Curriculum Vitae) Dengan HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. [1]

HTML terdiri dari 2 bagian utama, yaitu:

§  Hypertext, diartikan sebagai suatu link yang dapat dibuat pada halaman web, yang mengarahkan pengunjung ke halaman web lainnya atau secara praktis hal-hal lain pada internet. Berarti informasi di dalam suatu web dapat di akses dari manapun.

§  Universalitas, berarti dokumen HTML disimpan hanya berupa file teks.

Struktur Dasar HTML :

Gambar 1. Struktur Dasar HTML

Kali ini saya mencoba membuat CV (Curriculum Vitae) dengan menggunakan HTML, berikut adalah langkah-langkah membuatnya :

1.      Buka Notepad++ atau Notepad

2.      Dimulai dengan menuliskan ini wajib dimulai diawal pembuatan karena menjelaskan bahwa yang dibuat adalah kode dengan bahasa html

3.      Tulis dan lengkapi coding dengan kode-kode yang digunakan

4.      Sebelum mengakhiri penulisan kode harus ditutup dengan

5.      Pilih lokasi penyimpanan, kemudian save data dengan extention .html

6.      Bila dalam coding terdapat foto yang dihubungkan ke dalam penulisan coding HTML maka foto dan data .html harus disimpan dalam satu folder atau satu tempat

7.     Untuk membuka data yang telah disimpan double klik .html yang telah disave, maka akan otomatis membuka browser atau bisa juga klik kanan --> open with --> pilih browser yang diinginkan

Untuk lebih jelasnya perhatikan gambar langkah pengerjaannya dibawah ini :

Gambar 2. Langkah 2, 3, dan 4

Kode program yang saya gunakan diantaranya :

Gambar 3. Kode-kode yang digunakan

Gambar 4. Langkah 5, dan 6

Gambar 5. Hasil Tampilan CV_RIZKIARIYANI.html

Gambar 6. Hasil Tampilan Sepenggal Hobby.html

Referensi :

 [1] https://id.wikipedia.org/wiki/HTML