Scribd
Unggah
89 tayangan

HTML Css Basic

HTML adalah bahasa markup standar untuk membuat halaman web, yang digunakan untuk menentukan struktur dan konten halaman tersebut. HTML menggunakan tag untuk membentuk elemen-elemen seperti judul, paragraf, gambar, dan lainnya yang membentuk struktur halaman web."

Diunggah oleh

yuu nishinoya
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
89 tayangan

HTML Css Basic

HTML adalah bahasa markup standar untuk membuat halaman web, yang digunakan untuk menentukan struktur dan konten halaman tersebut. HTML menggunakan tag untuk membentuk elemen-elemen seperti judul, paragraf, gambar, dan lainnya yang membentuk struktur halaman web."

Diunggah oleh

yuu nishinoya
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 20

Learning

HTML adalah satu dari banyak bahasa markup yang menjadi bagian pembangun dasar
sebuah halaman web (webpage). Saat ini versi terbarunya adalah versi 5.1, secara resmi
disebut HTML5. Digunakan untuk membuat dan merepresentasikan secara visual
sebuah webpage. HTML menentukan konten dari sebuah webpage, namun bukan
fungsionalitasnya. Untuk mengetahui hubungan antara HTML, CSS, dan JavaScript
dalam pembuatan website:

 HTML adalah struktur penglihatan (view structure): header, paragraf, tombol, dll
(heading, paragraph, button, etc)
 CSS adalah gaya presentasi (presentational style): warna, ukuan, posisi, dll (color,
size, position, etc)
 JavaScript adalah sifat fungsionalnya (functional behavior): klik, masukan,
perhitungan, dll (click, input, calculation, etc)

Perlu diingat bahwa hanya mengetahui HTML dan CSS belum menjadikan kita sebagai
programmer --karena HTML dan CSS bukan bahasa pemrograman-- melainkan hanya
seorang coder atau developer yang dapat membuat dan mendesain website. Kita perlu
bahasa pemrograman seperti JavaScript untuk menjadi programmer, dan ketiga-tiganya
untuk menjadi web developer.

HyperText itu sendiri maksudnya adalah link (dalam hyperlink) yang menghubungkan
berbagai halaman web satu sama lain, yang menjadikan World Wide Web (WWW) itu
ada. Saat kita membuat dokumen HTML, sama saja membuat halaman web. Halaman
web dapat diunggah (uploaded), dikirim (pushed), atau di-deploy ke server ataupun
Internet.

HTML mudah dipelajari karena hanya sebuah markup, memungkinkan kita untuk
membuat website statis maupun dinamis. Dengan sintaks HTML juga, kita bisa
mendeskripsikan apa-apa saja yang ada dalam sebuah website secara semantik (atau
memiliki arti), dari konten yang ada di website tersebut. Kita sepertinya juga sudah tau
bahwa apapun yang terlihat di browser ditentukan menggunakan HTML.

Sintaks atau cara penulisan HTML biasanya terlihat seperti ini:

<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
yang akan menghasilkan halaman web seperti ini jika di JSBin:

atau seperti ini jika di CodePen:


Cobalah untuk mengetikkan contoh kode tersebut di dalam JSBin atau CodePen.
Lihatlah secara langsung hasilnya di situ. Berikutnya kami akan menunjukkan hasilnya
yang dihasilkan di JSBin saja.

Sebagai pengetahuan umum, istilah sintaks merupakan kosa kata (vocabulary) dan tata
bahasa (grammar) dari sebuah bahasa komputer, markup, dan pemrograman. Sama saja
dengan kata-kata dan perintah-perintah ataupun instruksi untuk disusun sebagai
sebuah hasil tertentu yang biasanya merupakan program aplikasi. Kita menggunakan
sintaks tertentu untuk membuat pernyataan (statement) program, instruksi untuk bisa
dieksekusi oleh browser, compiler, atau interpreter.

Kembali ke HTML, biasanya setiap dokumen HTML yang bagus dan valid memiliki dua
bagian utama berikut:

 Head dan Meta Data (bagian kepala HTML dan meta data)
 Body Sections (bagian-bagian badan HTML)

Elemen Dasar dengan Tag dan Atribut (Tags dan Attributes)

Dokumen atau konten HTML dalam sebuah halaman web dideskripsikan dengan elemen
HTML atau tag seperti , title, body, article, section, p, div, span, img, picture, dan
banyak lainnya. Elemen-elemen ini membentuk bagian pembangun (building blocks)
sebuah website. Website dapat memiliki sedikit atau banyak dari elemen-elemen
tersebut.

Tag HTML merupakan kata kunci (keywords) atau nama-nama tag (tag names), yang
biasanya dikurung dengan tanda kurung siku (angle brackets) seperti < tagname>sebuah
isi atau teks </tagname> . Kebanyakan tag HTML biasanya berpasangan
seperti <div> dan </div> tapi beberapa tidak seperti <br/>

ag pertama biasanya disebut tag awal atau pembuka, lalu tag kedua disebut tag akhir
atau penutup. Tag penutup ditulis seperti tag pembuka, tapi disertakan tanda garis
miring depan (forward slash) sebelum nama tag-nya.

Dari contoh sebelumnya, beberapa teks terdapat di antara tag pembuka dan penutup:

 <!doctype html> menentukan tipe file/dokumen menjadi HTML


 <html> dan </html> menyatakan dokumen HTML, yang berisi:
o <head> dan </head> memuat meta data/information, yang berisi:
 <title> dan </title>, judul dokumen
 <meta/>, data dan informasi tentang halaman ini
o <body> dan </body> akan menunjukkan konten halaman, yang berisi:
 <div> dan </div> adalah pembagi (divider) atau wadah (container),
yang berisi:
 <h1> dan </h1>, heading atau judul artikel misalnya
 <p> dan </p>, paragraf teks

Inilah ilustrasi atau visualisasi yang HTML strukturkan:

Kita bisa menggabungkan atau mengumpulkan berbagai tag HTML yang berbeda di
dalam satu sama lain. Dalam HTML, penyusunan tag sangat fleksibel.

<div>
<div>
<p>
<em>Hello!<em> Welcome to this website.
</p>
</div>
</div>

Hati-hati untuk selalu menutup tag jika dibutuhkan, jangan sampai tumpang tindih satu
sama lain. Berikut adalah contoh yang salah atau invalid.
<h1><b>Bold Heading</h1>
<h1><b>Bold Heading</h1></b>

Beberapa tag HTML dapat memiliki atribut, seperti href, src, alt, dll:

<a href="http://google.com">Google Homepage</a>


<img src="image.png" alt="Sample Caption">

Ada cara lain untuk melihat berbagai contoh yang ada di berbagai website. Kita dapat
melihat sumber halaman (page source) dari sebuah website (coba
kunjungi www.csszengarden.com misalnya), lalu klik kanan halaman tersebut, biasanya
bekerja baik di area yang kosong (white space) atau bukan sebuah elemen HTML, lalu
pilih "View page source"; atau bisa juga menggunakan shortcut Ctrl+U. Cara lain yang
lebih lanjut juga dapat menggunakan "Inspect Element" (Ctrl+Shift+I) pada elemen
apapun di layar.

Untuk melatih kemampuan menulis HTML, cobalah gunakan JSBin atau CodePen sambil
mendaftar sebuah akun, agar progress dapat disimpan secara online, bahkan juga dapat
dibagikan ke siapapun.

Dikarenakan juga bahasan HTML sangat banyak sekali, di sini kita hanya membahas
sepintas hal-hal yang penting. Sehingga tujuannya mengenalkan seperlunya agar kamu
dapat familiar. Silakan lihat berbagai referensi di bawah untuk belajar lebih lanjut.

Deklarasi Tipe Dokumen (Document Type declaration)

Deklarasi !DOCTYPE di awal membantu browser untuk menampilkan halaman web secara
benar. Secara formal, setiap dokumen HTML yang valid harus menyertakan ini (satu kali
saja di atas) setiap dokumen. Ini juga termasuk mengatur tipe dokumen (yang mana
adalah HTML) dan versinya sekaligus. Untuk sekarang kita hanya perlu HTML versi 5,
atau disebut juga "HTML5". Deklarasinya tidak case sensitive, jadi kita bisa gunakan
bentuk huruf apapun:

<!DOCTYPE HTML>
<!DOCTYPE html>
<!doctype html>

Komentar (Comment)

Kadang kala kita butuh menjelaskan apa yang terjadi atau menaruh penjelasan di
beberapa tempat. Kita dapat gunakan komentar yang disertakan di baris sendiri atau di
tempat yang tepat. Kita bisa juga gunakan ini sebagai teks sementara (placeholder).

<!-- This is an article -->


<article>
<h1><!-- Insert your article title here -->
<p>My cool story.
<!-- Still in progress -->
</article>

Meta Data/Information

Meta data/information adalah sebuah cara untuk menyertakan hal penting tentang
sebuah dokumen yang akan dibaca oleh komputer/browser, walau tidak terlalu
diperhatikan pengunjung website pada umumnya, walaupun developer biasanya
membacanya. Ada beberapa tag meta data umum yang digunakan seperti head, meta,
link, style, dan script. Biasanya mereka ada di bagian head.

<html>
<head>
<meta charset="utf-8">
<title>My Simple Website Title</title>
<meta description="Showing what HTML can do">
<link href="/favicon.png" rel="icon" type="image/png">
<link href="/index.css" rel="stylesheet" type="text/css"
media="all">
<style>
h1 {
color: orange;
}
</style>
<script>
console.log("I am JavaScript");
</script>
</head>
<body>
<!-- body content -->
</body>
</html>

Untuk sementara kita bisa mengabaikan tag style dan script. Karena kita hanya perlu
memahami pengetahuan HTML untuk pertama kalli. Tapi di sini kita bisa lihat ada
berbagai pilihan meta data yang tersedia. Setelah bagian head dan meta data, barulah
kita lanjut ke berbagai elemen yang ada di body.

Header dan Footer

Untuk sebagian besar bagian teks, kita biasanya memerlukan header yang dapat berisi
headings dan subheadings. Lalu di akhir halaman, bisa juga kita memerlukan footer. Ada
enam varian heading, diurutkan (ranked) tergantung dari pentingnya dan ukurannya,
menggunakan angka seperti h1, h2, h3, h4, h5, h6, sementara footer tidak ada urutannya.
Heading dapat disertakan dalam elemen header jika dibutuhkan.

<header>
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Two</h3>
<!-- dan so on -->
</header>
<p>
<!-- some paragraphs -->
</>
<footer>
Created by Me
</footer>

Paragraf dan Varian/Format Teks

Kamu sudah melihat paragraf, teks panjang yang berisi sebuah penjelasan atau cerita
(apapun!), yang juga dapat terbagi ke beberapa bagian (section). Kita bisa gunakan
paragraf untuk menyajikan teks polos apapun.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

"Lorem ipsum bla bla bla" adalah teks bohongan atau sementara yang digunakan oleh
berbagai developer dan desainer jika belum tahu apa yang harus disertakan ke dalam
bagian tertentu. Kita hanya menunjukkan ini agar kita tahu saja. Namun diharapkan
untuk proyek sungguhan, hindari pemakaian lorem ipsum karena seringkali tidak jelas
maksudnya apa. Gunakanlah teks yang lebih jelas atau deskriptif seperti di bawah.

<p>
Today I learn about HTML. It's a basic markup that structure a
website.
I also learn about "Lorem ipsum".
</p>

Ada beberapa elemen lain yang bisa kita cari tahu sendiri dalam membuat paragraf
seperti small, abbr, sub, sup, dan lainnya.
Penggayaan (Styling)

Dalam paragraf atau heading, kita bisa gunakan strong (strong) untuk hal penting yang kuat dan
emphasis (em) untuk penekanan. Ada juga styling umum lain seperti bold (b), italic (i), underline
(u), dan strike-through (s).

<p>
He is <strong>the strongest hero<strong> in <em>Universe 7</em>.
<b>"But I also need to compare with heroes in other universes,
<i>right</i>?"</b>, said <s>them</s> him.
</p>

Kutipan Blok (Block Quote)

Kutipan dari sumber lain, atau membuat teks kita terlihat keren seperti sebuah kuripan/quote.

<blockquote>
"There are only 10 types of people in this world—or universe—:
those who understand binary, dan those who don't."
— cliché computer joke
</blockquote>

Jangkar (Anchor) untuk Tautan (Link)

Jika kita butuh menautkan halaman ke halaman lain, gunakan anchor dengan URL. Anchor ini
juga disebut hyperlink (hypertext anchor).

<a>Clickable but unknown link></a>


<a href="https://google.com">Go to Google></a> ><!-- kamu akan sering
membutuhkan anchor -->

Beberapa atributnya yang bisa digunakan antara lain adalah target, rel, media, hreflang, dan type;
juga mereka memerlukan atribut href agar bisa bekerja.

Tombol (Button)

Orang-orang biasanya suka mengklik sebuah tombol yang dapat melakukan sesuatu. Gunakan
tombol untuk membuat masukan sekali (one-time input) atau bahkan saklar (switch) saat diklik.
Tombol dapat diaktifkan atau dinon-aktifkan tergantung dari keinginan kita.

<button name="nice">Nice Button</button>


<button disabled name="danger">Disabled Dangerous Button</button>
Daftar (List)
<ul>
<li>Alpha</li>
<li>Beta</li>
<ol>
<li>One</li>
<li>Two</li>
</ol>
</ul>

Figure dengan Gambar (Image), Video, atau Audio

Sebuah gambar bermakna ribuan kata. Namun bukan hanya untuk gambar, figur dapat juga
sebuah foto, ilustrasi, diagram, listing kode (code listings), video, lagu audio, dan lain-lain.
Dalam HTML5, direkomendasikan untuk menggunakan figure yang dapat berisi berbagai
informasi yang juga sejalan dengan sebuah judul/caption (figcaption) seperti gambar/image
(img), video (video), dan audio (audio).

<figure>
<img src="assets/my-photo.jpg" alt="My Photo" width="100px"
height="200px">
<figcaption>My latest photo.</figcaption>
</figure>

Menggunakan video:

<figure>
<video src="video.mp4" controls poster="static-image.jpg" width="640"
height="480">
<a href="video.mp4">Download this video</a>
</video>
</figure>

Menggunakan audio:

<figure>
<audio src="music.mp3" controls></audio>
<a href="music.mp3">Download this music</a>
</audio>
</figure>

Tidak apa-apa menggunakan elemen-elemen tersebut tanpa figure jika tidak terlalu dibutuhkan.

<img src="assets/my-photo.jpg">
<video src="video.mp4" controls></video>
<audio src="music.mp3" controls></audio>
Metode-metode memasukkan hal multimedia ini juga disebut embedding.

iFrame

Dengan HTML, kita dapat menyertakan HTML di dalam HTML! Seringkali disebut framing,
seperti embedding juga, kita dapat gunakan iframe.

<iframe src="https://google.com" height="300" width="800"></iframe>

Tabel (Table)

Mari kita menyajikan atau menunjukkan data dan informasi dalam dua dimensi! Gunakan table
untuk melakukannya. Berhati-hatilah bahwa table bukan untuk digunakan sebagai layout atau
memposisikan sebuah halaman, namun sebaiknya hanya untuk menyajikan data saja. Gunakan
kombinasi table dengan caption, thead, tbody, tfoot, tr, th, td, col, colgroup.

<table>
<thead>
<tr>
<th>Animal Name</th>
<th>Required Meat (kg)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lion</td>
<td>60</td>
</tr>
<tr>
<td>Tiger</td>
<td>40</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>

Penempatan Elemen

Elemen HTML pada umumnya bisa berupa elemen dengan level/tingkat block atau inline. Jika
jenisnya block maka penempatan antar elemen pada saat ditambahkan akan membentuk baris
baru, atau menumpuk, atau mengambil lebar yang masih tersedia. Contohnya elemen yang
berbentuk penting atau besar seperti div, heading, paragraf, dll. Kemudian jika jenisnya inline
maka penempatan antar elemen tidak membentuk baris baru, mengalir begitu saja. Contohnya
elemen yang bentuknya kecil seperti strong, emphasis, span, dll.

Learning
Form pada HTML adalah satu dari banyak cara untuk berinteraksi di sebuah website
atau web app dengan pengguna (users). Dengan cara ini, pengguna dapat memasukkan
(input) beberapa teks atau data/informasi yang dibutuhkan oleh pemilik website,
kemudian diproses atau diterima oleh form tersebut, yang pada akhirnya dikirim ke
server. Sering juga dapat menghasilkan keluaran (output) yang dihasilkan oleh server
dan form secara bersamaan. Kadang data tesebut bisa diatur oleh form tanpa bantuan
server.

Form tidak dapat berdiri sendiri, butuh berbagai elemen penyusun yang bisa juga
disebut widget; seperti text fields (satu atau beberapa baris), label, select box, button,
radio button, checkbox, datalist, option dan lain sebagainya. Kebanyakan masukan/input
memerlukan label agar lebih jelas data apa yang harus kita masukkan.

Ada beberapa elemen yang dapat bekerja dengan form:

 fieldset: kumpulan atau koleksi input field yang memiliki tujuan yang sama
o legend: penjelasan tentang simbol atau elemen form, seperti label untuk
fieldset
o label: penjelasan pada widget spesifik, label untuk input
o input: kontrol interaktif (interactive controls) dengan berbagai tipe atribut
seperti:
 number
 url
 email
 tel (telephone)
 password
 file
 range
 date
 time
 datetime
 button
o textarea: beberapa baris text input
o button: tombol aksi (action button) yang bisa diklik, untuk
menginformasikan melakukan sesuatu selanjutnya
o select: select box atau combo box, kolom untuk memilih satu atau lebih
nilai (value) yang sudah didefinisikan
o datalist: daftar dari data atau nilai yang telah diatur (list of preset data or
values), biasanya juga untuk text field
o optgroup: kumpulan pilihan (options)
 option: pilihan yang dapat dipilih pengguna

Biasanya, form memiliki atribut aksi (action) dan metode (method) agar dapat bekerja
dengan baik. Kita akan membahas ini lebih lanjut jika sudah terbiasa. Untuk sementara
waktu, kita cukup mempelajari HTML saja tanpa berinteraksi dengan sebuah server.

<form action="sukses_submit_form.html" method="post">


<!-- form elements -->
</form>

Inilah beberapa contoh kode yang dapat membantu kamu membuat formulir kontak.

Form dengan fieldset, legend, label, dan berbagai input

<form>
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="full-name">Full Name</label>
<input id="full-name" name="fullName" type="text">
</p>
<p>
<label for="email">Email Address</label>
<input id="email" name="email" type="email">
</p>
</fieldset>
<fieldset>
<legend>Work Information</legend>
<!-- some other inputs -->
</fieldset>
</form>

Form dengan label, input, dan beberapa daftar/list data

<form>
<p>
<label for="programming">Your preferred programming
languages?</label>
<input type="text" name="programming" list="programmingLangs" />
<datalist id="programmingLangs">
<select name="altProgrammingLangs">
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
</select>
</datalist>
</p>
</form>

Form dengan radio button

<form>
<label for="gender">Gender:</label>
<input id="male-radio" type="radio" name="gender" value="male">
<label for="male-radio">Male</label>
<input id="female-radio" type="radio" name="gender"
value="female">
<label for="female-radio">Female</label>
</form>

Form dengan masukan tombol di akhir

<form>
<label for="skill">Skill:</label>
<input id="writing-checkbox" type="checkbox" name="skill"
value="writing">
<label for="writing-checkbox">Writing</label>
<input id="reading-checkbox" type="checkbox" name="skill"
value="reading">
<label for="reading-checkbox">Reading</label>
<input type="submit" value="Submit">
</form>

Form Submit dan Action

Secara default, form yang di submit akan diarahkan ke halaman lain yang telah kita
sebutkan di form. Halaman lain yang akan kita arahkan kita letakkan di attribute action.

<form action="halaman_sukses_submit.html" method="POST">


<label>
Nama:
<input type="text" name="nama" />
</label>
<input type="submit" value="Kirim" />
</form>

Contoh html di atas akan mengirimkan halaman kita ke halaman bernama


halaman_sukses_submit.html jika kita telah melakukan submit di form kita.

References

 Learn to Code HTML & CSS, by Shay How (lesson 10: Building Forms)
 HTML5 forms introduction and new attributes, on HTML5 Doctor
 Making Forms Fabulous with HTML5, on HTML5 Rocks
 HTML5 - Web Forms 2.0, on TutorialsPoint
 Design Better Forms, by Andrew Coyle on UXDesign.cc

Objectives

 Mengulas dasar-dasar CSS.

Learnings

CSS secara harfiah berarti Lembar Penggayaan yang Mengalir ke Bawah. Oke, ternyata
jika diterjemahkan malah membingungkan, mari hanya pedulikan bahasa Inggrisnya.
CSS merupakan bahasa style sheet yang berguna untuk membantu menyajikan
dokumen yang ditulis dengan HTML maupun XML bahkan SVG. CSS mengatur
bagaimana elemen-elemen seharusnya ditampilkan di layar, di kertas, dan berbagai
media lainnya. Hal-hal seperti warna, ukuran, posisi, dll (color, size, position, etc) dapat
diatur oleh CSS. Tentu saja berarti CSS membutuhkan HTML agar dapat bekerja. Saat ini
versi terbarunya adalah versi 3, secara resmi disebut CSS3.

Sintaks atau cara penulisan CSS biasanya terlihat seperti ini:

h1 {
font-weight: 800;
color: gray;
}
p {
color: orange;
}
#website-title {
padding: 10px;
}
.menu {
margin: 5em;
}
button:hover {
background-color: #FFECB3;
}

yang akan menghasilkan halaman web bisa ditampilkan seperti ini jika di JSBin:

atau seperti ini jika di CodePen:


Dikarenakan bahasan CSS juga sangat banyak sekali layaknya HTML, di sini kita hanya
membahas sepintas hal-hal yang penting. Sehingga tujuannya mengenalkan seperlunya
agar kamu dapat familiar. Silakan lihat berbagai referensi di bawah untuk belajar lebih
lanjut.

Menyertakan CSS untuk HTML

Ada 4 metode utama untuk menyertakan CSS agar dapat mengubah layout HTML.

(1) Embed dalam dokumen HTML

<style type="text/css" media="screen">


selector { property: value; }
</style>

(2) Link ke file CSS terpisah. Dengan cara menaruh meta data berikut di head HTML.

<link href="mystyles.css" rel="stylesheet" type="text/css"


media="screen">

(3) Inline CSS pada elemen/tag HTML

<tag style="color:orange; background:yellow;">isi tag</tag>

(4) Import CSS dalam file CSS, misalnya di dalam mainfile.css

@import "otherfile.css";

Pemilih Elemen (Selector)

Setiap elemen HTML yang ada di halaman web dapat dimodifikasi ataupun dihias
dengan CSS. Selector menunjuk elemen apa yang ada di HTML untuk diterapkan
style/modifikasinya (seperti warna, ukuran, posisi). Selector dapat merupakan satu atau
kombinasi syarat (qualifiers) untuk memilih elemen yang unik, tergantung spesifikasi
yang kita tulis.

Bentuk umum selector seperti berikut:


selector { property: value; /* properti lainnya */ }

Terdapat perbedaan cara seleksi antara:

 semua paragraf yang ada di halaman web


 suatu paragraf yang ada di dalam div

/* semua paragraf */
p {
color: orange;
}
/* paragraf di dalam div */
div p {
background-color: coral;
}

Selector juga biasanya menunjuk nilai atribut (attribute value)


seperti id atau class ataupun tipe elemen seperti <h1> atau </p> . Setelah menunjuk
atribut atau elemen, terdapat definisi yang menggunakan kurung keriting (curly bracket)
seperti { } yang berisi style/modifikasi yang ingin dilakukan terhadap atribut atau elemen
yang dituju.

Misalkan ada elemen HTML seperti berikut:

<img id="logo" class="gambar kecil" src="logo.png">

Maka kita dapat mendefinisikan CSS selector seperti berikut:

img {
width: 100px;
}
#logo {
background-color: white;
}
.gambar {
border: 1px solid black;
}
.gambar.kecil {
width: 50px;
}
Properti (Properties)

Setelah elemen dipilih, properti dari style yang tersedia dapat diterapkan pada elemen
tersebut. Nama properti diikuti dengan tanda titik dua (colon) (:) diikuti dengan
nilai/value yang ditutup dengan titik koma (;).

Ada beberapa properti umum yang bisa digunakan seperti:

 color
 background
 font-size
 height and weight

Komentar (Comments)

Kita bisa menambahkan komentar jika perlu.

/* Komentar atau penjelasan */


selector { property: value; } /* Komentar lain */

Box Model dan Posisi (Positioning)

Sekarang, bagaimana cara elemen-elemen ditampilkan pada halaman dan diatur ukuran
serta posisinya? Untuk itu kita perlu mengetahui box model. Juga ingat kembali tentang
adanya level penempatan elemen, antara block atau inline yang mana setiap elemen
memiliki value default tersebut pada properti display. Ada berbagai value lain
seperti inline-block, float, absolute, relative, fixed, dan none.

Value display diatur seperti berikut:

p {
display: inline-block;
}

inline-block berarti bersifat seperti elemen level block, punya berbagai properti box
model, namun tetap ditampilkan sebaris (inline) dengan elemen lain, tidak memulai
baris baru.

Sehubungan dengan box model, umpamakan setiap elemen HTML seperti kotak yang
memiliki beberapa lapisan jarak (padding), batas (border), pinggiran (margin),
dan posisi (position); diilustrasikan seperti ini, yang bahkan kamu bisa lihat dengan
membuka Chrome Dev Tools.

Transisi (Transitions)

Transition memungkinkan kita untuk mengubah value properti dengan halus dalam
durasi tertentu, jika terdapat kondisi yang berubah misalnya dari static/non-hover
(selector biasa) kemudian di-hover dengan mouse (selector:hover).

Misalnya mengubah ukuran font heading jika di-hover:

h1 {
font-size: 20px;
transition: all 1s;
}
h1:hover {
font-size: 30px;
}

Jika tanpa property transition, maka perubahan akan terlihat sangat tiba-tiba.

Transformasi (Transforms)

Transform memungkinkan kita untuk mengubah bentuk atau orientasi elemen seperti
scale, rotate, translate, skew. Hal ini juga dapat dikombinasikan dengan transition.

h1 {
transition: all 1s;
}
h1:hover {
transform: scale(1,2) skew(-15deg);
}
Animasi (Animation)

Dengan animation kita bisa menspesifikasikan beberapa keyframe (bingkai kunci) yang
menjadi titik utama animasi. Yaitu style-style apa saja yang akan diatur pada waktu
tertentu.

@keyframes resize {
0% { padding: 0; }
50% { padding: 0 10px; }
100% { padding: 0 30px; }
}
h1 {
animation: resize 1s alternate infinite ease-in-out;
}

References

Basics

 CSS Tutorials, by TutorialsPoint


 Getting started with CSS, by Mozilla
 Introduction to CSS, by CSS Basics
 Learn to Code HTML & CSS, by Shay How
 Learn to Code Advanced HTML & CSS, by Shay Howe
 Meet the Pseudo Class Selectors, on CSS Tricks
 How To Use CSS3 Pseudo-Classes, by Richard Shepherd on Smashing Magazine
 Decoupling HTML From CSS, by Jonathan Snook on Smashing Magazine
 Belajar CSS dari dasar, oleh Sekolah Koding
 Belajar CSS3, oleh Sekolah Koding

Anda mungkin juga menyukai