Dasar-dasar Mark Up dalam HTML dan CSS 1
HTML
1.
<h1>…</h1> untuk heading 1
(Catatan: <h1> dan sejenisnya disebut “tag”)
2.
<h2>...</h2> untuk heading 2 dan
seterusnya
3.
<p>...</p> untuk paragraf
4.
<!--...--> untuk komentar
5.
<a>...</a> untuk anchor (penambat/tautan)
6.
href=”url” ditambahkan di dalam <a...>
untuk menambahkan url tujuan. Contoh: <a href=”https://progate.com”>Progate</a> (Catatan: pisahkan
<a dan href dengan spasi, href merupakan singkatan dari hypertext
reference yang berarti hiperteks referensi, sedangkan url adalah singkatan
dari uniform resource locators yang berarti alamat web)
7.
<img src=”url”> (Catatan: tidak perlu
menambahkan tag penutup karena tidak ada teks yang diapit)
8.
<li>...</li> untuk membuat list
(daftar) (tag <li>...</li> menghasilkan tanda daftar dengan bullet)
9.
<ul>...</ul> untuk elemen induk
yang disimpan diantara daftar. (Misal: <ul> <li>air</li>
<li>udara</li> <li>api</li> </ul>) (Catatan: Selalu
gunakan indentasi antara tag <ul> yang menjadi elemen induk dengan
<li> yang menjadi elemen anak untuk memudahkan mengetahui mana element
induk dan element anak, indentasi diperoleh dengan menekan tombol tab di awal
baris)
10.
Elemen <head></head> dan
<body></body> harus selalu ada dalam apitan elemen
<html>...</html>
Lihat contoh berikut.
11.
Setiap dokumen html harus diawali dengan
elemen <!DOCTYPE html>
12.
<head>...</head> berisi pengaturan
dokumen yang tidak ditampilkan di browser
13.
Menentukan pengodean karakter di atribut
charset seperti <meta charset=”utf-8”>. Pengodean diperlukan untuk
mencegah situs web menjadi kacau. Sedangkan utf-8 adalah karakter yang
direkomendasikan untuk html
14.
<title>...</title> digunakan untuk
menunjukkan judul pada tab browser
15.
Atribut <link rel=”stylesheet”
href=”stylesheet.css”> digunakan untuk menautkan antara html dan file css.
Nama file css ditentukan dengan atribut href
16.
Tag <div>...</div> (division)
digunakan untuk mengelompokkan elemen. Contoh: <div
class=”header”></div>
17.
Bagian layout utama terdiri dari
copy-containers, contents dan contact-form.
18.
Border digunakan untuk menambahkan batas ke
semua sisi. Untuk menambahkan batas ke sisi tertentu gunakan properti berikut:
border-bottom, border-top, border-left, border-right. Contoh: border: 5px solid
red; (5px untuk size, solid untuk style dan red untuk color. Untuk warna bisa
menggunakan nama atau kode seperti #ff0000)
19.
Tag <input> digunakan untuk menerima
satu baris teks sementara tag <textarea> digunakan untuk menerima
beberapa baris teks. Tag <input> tidak memerlukan tag penutup
</input>
20.
Tambahkan atribut type ke dalam elemen
<input> untuk membuat tombol submit (kirim) secara default.
21.
Untuk mengubah tulisan submit dengan tulisan yang
lain, gunakan atribut value pada tag <input>. Contoh: <input
type=”submit” value=”kirim”>
22.
Background-image: url() untuk menambahkan latar
berupa gambar dari suatu situs
23.
Opacity untuk mengatur transparansi dan
kejelasan dengan format ukuran dari 0.0 sampai 1.0
24.
Jarak antar huruf diatur dengan elemen
letter-spacing
25.
Untuk membuat kursor yang ditunjuk menunjukan
elemen, gunakan :hover, tidak ada spasi antara div:hover
26.
Muatkan link CSS Font Awesome didalam tag
<head> pada halaman HTML untuk menambahkan ikon. Tambahkan tag
<span> dengan class fa dan fa-nama ikon
CSS 1
CSS berguna untuk mengubah hal-hal seperti warna, spasi, dan ukuran pada
elemen HTML. CSS diterapkan dengan menentukan apa, bagaimana, dan di mana
pengubahan ingin dilakukan.
1.
Warna pada CSS ditentukan dengan nilai
heksadesimal seperti h1 {color: #ff0000;}
2.
Hal yang harus diperhatikan dalam Sintax CSS
meliputi indentasi, titik dua di awal (:) dan titik koma di akhir (;)
3.
Dalam CSS komentar diapit oleh tanda /*...*/
4.
Ukuran font dapat ditetapkan dengan properti
font-size dan satuan untuk menentukan font adalah px (piksel). Contoh:
font-size: 10px;
5.
Nama font ditentukan dengan properti
font-family: nama font;. Jika nama font memiliki spasi maka harus diapit oleh
tanda petik ganda. Contoh: font-family: “luchida calligraphy”;
6.
Properti untuk mengatur warna latar belakang
yaitu background-color. Jika huruf yang sama memanjang seperti #dddddd dapat
disingkat menjadi #ddd
7.
Untuk mengubah lebar dan tinggi digunakan
properti width (lebar) dan height (tinggi). Satuan unitnya seperti font, yakni
menggunakan px (piksel).
8.
Jika menuliskan li { color: red;} maka akan
mengubah semua daftar menjadi warna merah
9.
Atribut class digunakan untuk menerapkan CSS
yang berbeda pada setiap elemen. Contoh: <li
class=”selected”>HTML</li>. Perhatikan selalu tanda petik dua yang
mengapit. Untuk mengatur warna gunakan format berikut: .selected {color: red;}.
Perhatikan tanda titik sebelum elemen selected.
10.
Li {list style: none;} diguakan untuk
menghilangkan tanda pada list (daftar)
11.
Untuk menyejajarkan daftar secara horizontal
dengan perataan kiri digunakan properti li {float: left;}
12.
Untuk menambahkan ruang di lemen pada semua
sisi di dalam border gunakan properti padding: 00px;. Jika hanya ingin
menamahkan pada satu sisi saja, bisa dipilih dengan menggunakan properti
padding-top; padding-right; padding-bottom; atau padding-left;
13.
Pengaturan padding dapat dilakukan dengan
shorthand padding dengan urutan atas-kanan-bawah-kiri. Contoh: padding: 20 px
10 px 15 px 20 px; . Pisahkan setiap ukuran padding dengan spasi. Saat shortand
padding hanya ditulis dua, maka padding akan ditetapkan berdasarkan urutan
atas/bawah dan bawah/kiri.
14.
Urutan shorthand margin: atas-kanan-bawah-kiri
dan atas/bawah-kanan/kiri
15.
Tanda koma (,) digunakan untuk mengelompokkan
beberapa CSS yang sama. Tanda koma ditaruh di antara dua selector.
16.
Tag <a>...<a> adalah elemen inline
17.
Elemen inline-block untuk membuat block
18.
Display dapat digunakan untuk mengganti tag
<a> pada CSS. Properti display dapat memiliki nilai block, inline-block,
atau inline
19.
Untuk membuat sudut lancip menjadi tidak
lancip, gunakan border-radius
20.
Gunakan properti text-align untuk mengatur
perataan elemen inline dan inline-block. Nilai yang dapat ditetapkan adalah
left, right, dan center
21.
Properti rgba diguanakan untuk mengatur warna
latar belakang saja menjadi transparan. Untuk memahami rgba terlebih dahulu
harus memahami rgb. Rbg mengombinasikan tiga nilai warna yakni merah, hijau, dan biru.
Cara kerjanya sama seperti format heksadesimal
22.
Properti transition digunakan untuk
menambahkan animasi
23.
Properti line-height untuk menentukan tinggi
yang ditempati baris
24.
Font-weight untuk mengubah ketebalan teks