Belajar CSS Dasar

CSS3 - Belajar CSS Dasar

CSS adalah singkatan dari Cascading Style Sheets yang merupakan sebuah tata cara dalam mengatur komponen yang ada pada sebuah web sehingga menjadi berbentuk dan berpenampilan baik klasik atau modern. Css adalah sebuah bahasa yang tidak digolongkan sebagai bahasa pemrograman akan tetapi hanya sebatas gaya atau style untuk html, css tidak bisa berdiri sendiri tanpa html/xhtml.

CSS hampir sama fungsinya dengan aplikasi pengolahan kata tingkat tinggi seperti Microsoft Word, LibreOffice Writer, OpenOffice Writer, Kingsoft Office Writer dan Corel WordPerfect yaitu dalam hal membuat style atau gaya sebuah dokumen baik heading, title, text, body text, bab, sub bab, header/footer, gambar dan lain-lain. Satu file css bisa digunakan untuk beberapa atau setiap file html.

Sejarah CSS

CSS merupakan sebuah teknologi baru yang disarankan oleh W3C (World Wide Web Consortium) pada tahun 1996, pada saat css distandarisasikan, Netscape Navigator (Sekarang Mozilla Firefox) dan Internet Explorer membuat browser baru untuk disesuaikan dengan mendukung standar css sehingga bisa berjalan bersamaan dengan html pada suatu browser. ada 3 versi css yaitu CSS1 dikembangkan untuk penekanan hanya pada format dokumen html (seperti word/writer) saja. CSS2 dikembangkan untuk berbagai format seperti menentukan posisi konten, format huruf font, tampilan layout, table, form dan media dan sangat dikhususkan untuk bisa dicetak dengan printer, sedangkan CSS3 adalah pengebangan dari CSS2 yang lebih ditekankan kepada desain website modern seperti mendukung animasi, transisi, 3d serta dengan cross platform yaitu bisa berjalan pada desktop, mobile dan table hanya dengan satu file, fitur baru pada CSS3 adalah media query, box-shadow, css math, border-image, css object model dan lain-lain.

Penulisan CSS

CSS bisa ditulis dengan 3 cara atau 3 tempat yaitu pada internal, inline dan eksternal yang akan kita bahas dibawah ini, sekarang kita akan membahas format penulisan css seperti dibawah ini.

p { color : royalblue ; }

Penjelasan: p adalah tag selector atau panggilan dari tag p pada dokumen html, {} adalah selector untuk tag, color adalah property untuk tag p, sedangkan royalblue adalah value (nilai) untuk property color. : adalah sama dengan atau nilai hasilnya sedangkan ; adalah tutup hasil value atau pemisah antara satu property dengan property lainnya.

Tag Selector tidak mesti harus menggunakan nama tag saja akan tetapi bisa juga dengan memanggil nilai atribut class dan id, untuk class biasanya awalannya adalah titik (.) sedangkan id adalah awalannya tanda pagar (#) sebagai contoh:

Class: .paragraf{color:royalblue;}
ID: #paragraf{color:royalblue;}

Inline Style Sheet

Inline style sheet adalah gaya penulisan css dalam tag html atau bisa dibilang menggunakan atribut style=”color:royalblue;” atau lebih jelas lihat contoh dibawah ini.

<p style="color:royalblue;">Ini adalah teks untuk paragraf</p>

Internal Style Sheet

Internal style sheet adalah gaya penulisan css di antara tag head (<head>… disini …</head>) dengan adanya tag <style> … disini sintaks css … </style> untuk lebih jelas silahkan lihat contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<style type="text/css">
body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}
</style>
</head>
<body>
<h1 id="title" class="title">Judul Web</h1>
<p class="paragraf" id="paragraf">Ini adalah artikel</p>
</body>
</html>

Eksternal Style Sheet

Eksternal style sheet adalah gaya penulisan css yang terpisah antara file css dengan file html yang hanya dihubungkan dengan tag <link href=”style.css” rel=”stylesheet”/> pada tag <head>, dengan cara ini bisa dengan hanya 1 file css bisa buat banyak file html sebagai contoh

File style.css

body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}

File index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1 id="title">Judul Web</h1>
<p class="paragraf">Ini adalah artikel</p>
</body>
</html>

Sekian tutorial kali ini semoga bermanfaat dan bisa menjadi ilmu baru bagi pelajar baru pemrograman web, terima kasih banyak karena telah mengunjungi blog saya ini.

Belajar HTML Dasar

HTML5 - belajar html dasar

HTML merupakan singkatan dari Hyper Text Markup Language yang berarti sebuah bahasa yang digunakan dalam membangun sebuah web, html adalah kerangka sebuah website jadi tanpa html website tidak akan dapat dibuat, dokumen html mempunyai ekstensi atau akhiran .html, .htm dan .xhtml, namun yang sering digunakan adalah ekstensi .html dengan nama default-nya yaitu index.html, file ini hanya berjalan pada sisi klien atau cuma pada browser web seperti Mozilla Firefox, Google Chrome, Opera Browser, Microsoft Edge/IE, Apple Safari, Maxthon, dan browser lainnya. Html dapat ditulis dengan menggunakan perangkat pengolahan kata biasa seperti Notepad++, Bracket, Atom, Sublime Text, Komodo Edit, dan lain-lain serta disimpan dalam format ASCII normal dengan nama dan format index.html.

Sejarah HTML

Berawal dari sebuah bahasa yang umum digunakan untuk percetakan dan penerbitan yaitu bahasa SGML singkatan dari Standard Generalized Markup Language, Html adalah sebuah bahasa standar Internet yang dikendalikan semua permasalahan oleh W3C (World Wide Web Consortium). Html adalah bahasa yang dibuat oleh kolaborasi antara Caillau TIM dengan Berners-lee Robert ketika waktu mereka masih bekerja di perusahaan CERN (1989). Untuk lebih jelas bisa baca wikipedia.

Penggunaan HTML

Cara menggunakan html sangatlah mudah tinggal anda install dulu perangkat pengolahan kata biasa beserta dengan browser kemudian buka perangkat lunak tersebut kemudian tulis sintaks/tag html yang paling dasar kemudian simpan dengan nama index.html kemudian jalankan index.html dengan browser (bisa double klik atau open with browser) dan lihat hasilnya.

Hasil dari html tidaklah keren karena html merupakan kerangka biasa dan hasilnya seperti kita menulis teks biasa pada perangkat pengolahan kata untuk teks biasa namun jika dipadukan dengan CSS dan JavaScript, hasil html barulah berbentuk keren dan profesional, css merupakan bahasa yang tidak bisa berdiri sendiri karena memiliki ketergantungan permanen kepada html, berbeda halnya dengan javascript walaupun juga memiliki ketergantungan kepada html namun sangatlah kecil presentasinya karena javascript bisa membuat tag html, efek, aksi dan bahkan penyimpanan atau pengolahan data.

Penulisan HTML

Dalam menulis html berbeda dengan menulis teks biasa karena setiap tag memiliki pembuka dan penutup seperti tag pembuka paragraf <p> dan penutupnya </p>, namun ada juga tag yang tidak memiliki pembuka dan penutup seperti <img />, <br />, <hr />, <input />, <link /> dan lain-lain. Bentuk yang paling dasar dan wajib ada dalam setiap dokumen html/web adalah seperti dibawah ini.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dokumen HTML Pertama</title>
</head>
<body>
    <p>Selamat Datang dunia!</p>
</body>
</html>

Tag HTML

Tag html adalah tag yang merupakan sebagai deklarasi yang menyatakan bahwa dokumen tersebut merupakan dokumen html dengan adanya penanda yang menyatakan bahwa dokumen tersebut adalah dokumen html5 yaitu <!DOCTYPE html>.

Tag Head, Meta, Title

Tag head adalah tag untuk kepala halaman atau dengan kata lain tag untuk mengontrol tampilan baik gaya pewarnaan atau yang lainnya serta juga terdapat style css dan javascriptm, sedangkan tag meta adalah tag yang menyatakan format teks yang digunakan pada dokumen html tersebut beserta dengan meta keyword, description, author dan lain-lain, sedangkan tag title adalah tag untuk menampilkan judul halaman pada tab bar browser dan judul website pada mesin pencarian (Google, Yahoo, Bing, Yandex).

Tag Body, Tag P

Tag body adalah tag yang berisi konten dan bentuk konten yang akan ditampilkan kedalam browser sedangkan tag p adalah tag paragraf yang digunakan untuk menulis teks kedalam dokumen html. Sekian tutorial kali ini semoga bermanfaat.