Modul HTML-CSS-2

Modul
Pemrograman Web: HTML dan CSS dasar

A. Website
Website adalah kumpulan halaman yang berisi informasi tertentu dan dapat diakses dengan
mudah oleh siapapun, kapanpun, dan di manapun melalui internet.
Mudahnya adalah Website itu bagaikan sebuah buku yang mana didalamnya terdapat
banyak halaman. Website diakses dengan URL (Uniform Resource Locator) melalui Peramban
(browser). Misalnya kita memasukkan URL http://himti.fastikom-unsiq.ac.id/, maka kita akan
diarahkan ke website milik HIMTI UNSIQ.
Seperti terlihat, di website di atas terdapat kumpulan halaman yang berisi informasi
tertentu. Misalnya informasi tentang event, Program Kerja, dan lainnya. Nah, agar pengunjung
lebih mudah untuk mengakses informasi yang mereka cari, halaman-halaman tersebut
dikelompokkan dalam menu yang bisa diakses dari halaman utama.
Pada umumnya, website itu dibangun dengan HTML, CSS, dan JavaScript untuk bagian
tampilannya (Front-End) dan bahasa PHP untuk mengatur bagian server/dapur dari website
tersebut (Back-End). Namun, di modul ini, kita hanya akan membahas tentang HTML dan CSS
saja.
B. HTML
Seperti yang sudah dijelaskan diatas, bahwa tampilan website dibuat dengan HTML, CSS,
JS. dibawah ini adalah ilustrasi hubungan ketiga hal tersebut.
HTML adalah singkatan dari Hypertext Markup Language. HTML merupakan bahasa
markup, bukan pemrograman. Bahasa markup adalah bahasa yang diapit oleh <tag>. Bahasa
markup yang populer selain HTMLadalah XML.
HTML berfungsi sebagai pengatur isi dari website tersebut, mulai dari apa saja yang akan
ditampilkan, bagaimana urutannya, dan lain sebagainya.
HTML bisa dibuat dengan text editor apapun, termasuk yang ada di ponsel. File HTML
memiliki format .html . file tersebut dijalankan menggunakan browser.
1. Struktur HTML
Perhatikan contoh kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>

<h1>Heading 1</h1>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
</body>
</html>
• <!DOCTYPE html> mendefinisikan bahwa pembuatan dokumen menggunakan

HTML5
• <html lang=”en”> bagian html merupakan akar dari elemen-elemen pada
dokumen HTML, sedangkan lang="en" mengidentifikasikan bahwa bahasa yang
digunakan adalah bahasa Inggris (English). Hal ini berfungsi memudahkan Mesin
Pencari untuk menampilkan hasil sesuai dengan yang diinginkan pengguna
• <head> Berisi Metadata, judul, serta Stylesheet, serta Script. Singkatnya, bagian
ini adalah bagian yang menyimpan identitas dari suatu halaman web
• <title> Judul dari halaman website
• <body> Container atau wadah dari apa yang akan ditampilkan di layar. Bagian
inilah semua yang akan dilihat oleh pengunjung dituliskan.
•  Blok komentar. Apa yang ditulis disini tidak akan ditampilkan
• <h1> Heading 1, merupakan heading dengan ukuran terbesar.
• <p> Blok paragraf
2. Elemen HTML
Elemen pada HTML didefinisikan sebagai tag pembuka-isi-tag penutup
<nama_tag> Isi ditulis disini </tag_penutup>
3. Heading
Heading berguna untuk memnunjukkan judul serta subjudul tentang apa yang akan
ditampilkan. Penggunaan heading yang tepat sangat berpengaruh terhadap SEO (Search
Engine Optimization). Heading memiliki 6 tingkatan, yaitu h1-h6
Maka hasilnya adalah seperti ini
4. Paragraf
Paragraf pada HTML diawali dengan tag <p> isi </p>
Setiap text yang diapit dengan tag <p></p> akan dibuat dalam blok baru. Walaupun text
yang dibuat tidak rapi, apabila masih berada di dalam tag <p> akan dirapikan secara
otomatis oleh browser.
Contoh :
<p>Paragraf ini
diketik dengan asal-asalan
namun, akan dirapikan oleh browser
</p>
<p>
Yang ini juga sama,
tapi tenang aja, hasilnya tetap rapi
</p>
Hasil dari blok kode tersebut adalah :
Namun, bagaimana jika ingin membuat teks pada baris yang berbeda dalam 1 paragraf?
Kita bisa menggunakan breaking rules atau preformatted text. Tapi apa sih
perbedaanya?
Breaking Rules
Breaking Rules <br/> itu membuat baris baru, namun format tetap dibuat rapi.
<p>
baris pertama <br/>
baris kedua <br/>
ini adalah baris ketiga
</p>
Preformatted Text
Preformatted Text <pre></pre> menghasilkan teks yang sama persis dengan apa yang
diketik.
<pre>
baris pertama
baris kedua
ini adalah baris ketiga
</pre>
5. Pemformatan Teks
• <b> </b> Teks tebal (bold)
• <u> </u> Teks bergaris bawah (underline)
• <i> </i> Teks Miring (italic)
• <em> </em> Teks miring juga (emphasized text)
• <s> </s> Teks coret (striketrought)
• <strong> </strong> Teks tebal (juga)
• <small> </small> Teks ekstra kecil
• <sub> </sub> Subscript
• <sup> </sup> Superscript
• <mark> </mark> Penanda teks
a) Bold
<p>
Teks <b>Tebal</b>
</p>
b) Underline
<p>
Teks <u>bergaris bawah</u>
</p>
c) Italic
<p>
Teks <i>Miring</i>
</p>
d) Emphasized Text
<p>
Teks <em>Miring juga</em>
</p>
e) Striketrough
<p>
Teks <s>coret</s>
</p>
f) Strong
g) Small
<p>
Teks <small>kecil</small>
</p>
h) Subscript
<p>
Teks <sub>Subscript</sub>
</p>
i) Superscript
<p>
Tulisan <sup>pangkat</sup>
</p>
j) Marked Text
6. Atribut HTML
• Semua elemen HTML dapat memiliki atribut
• Atribut berisi informasi tambahan tentang elemen
• Atribut selalu ditentukan di tag pembuka
• Atribut biasanya datang dalam pasangan nama/nilai seperti: nama="nilai", namun
ada atribut yang tidak memiliki nilai, contohnya adalah atribut required.
Contoh atribut pada tag HTML

<html lang=”en”>
Bagian lang=”en” inilah yang disebut dengan atribut
7. Hyperlink
Hyperlink berfungsi untuk mengunjungi halaman lain hanya dengan satu kali klik.
Ketika menggerakkan mouse dan meletakkan diatas link(tautan), maka cursor akan
berubah bentuk menjadi tangan.
Syntax hyperlink
<a href="tujuan">Teks tautan</a>

Unsur utama dari tag <a> adalah atribut href. Atribut tersebut berfungsi
menunjukkan alamat tujuan, dan “Teks tujuan” adalah bagian yang akan dilihat oleh
pengguna. Hasil dari kode diatas adalah seperti ini
• Atribut target
Atribut target berfungsi untuk menentukan tempat dimana tautan tersebut akan
dibuka. Atribut target ada 4, yaitu:
- _blank. Paling umum digunakan, tautan baru dibuka di tab baru
- _self. Bawaan. Link akan dibuka di tab yang sama dengan yang sedang dibuka
- _parent. Membuka dokumen di bingkai induk
- _top. Membuka dokumen di seluruh body window
• URL Absolut dan Relative
Penulisan URL pada href bisa menggunakan URL absolut(lengkap) maupun
relative(tanpa http://).
Contoh URL Absolut:
<a href="https://www.google.com/">Tautan ke Google</a>
Contoh URL relative:
<a href="google.com">Tautan ke Google</a>
Hasil dari kedua kode tersebut tidak memiliki perbedaan, jadi yang mana yang mau
dipakai, itu sama saja.
• File Path
Penggunaan Hyperlink tidak selalu untuk alamat suatu website, namun juga
ditujuakan ke sebuah berkas/file.
- href=”file.html”. file yang dituju berada didalam folder yang sama
Folder induk
File tujuan
file pengakses
- href=”aset/file.html”. file berada di folder “aset” yang mana folder

tersebut masih satu folder dengan file yang mengakses.
Folder induk
Folder target
File tujuan
file pengakses
- href=”/aset/file.html”. File terletak di folder aset di root web saat ini
- href=”../file.html”. File terletak di folder yang satu tingkat diatas folder

saat ini.
8. Image
Syntax untuk menyisipkan gambar
<img src="gambar.png" alt="gambar 1">

Untuk tag <img> tidak memiliki penutup. Atribut utamanya adalah src=””. Atribut
tersebut menunjukkan lokasi file gambar yang akan digunakan yang mana aturan
penggunaan path untuk gambar sama dengan hyperlink. Sedangkan atribut alt=”” itu
bersifat opsional, fungsinya yaitu memberikan keterangan ketika gambar gagal dimuat.
Seperti ini contohnya:
9. Tabel
seperti tabel pada umumnnya, tabel di HTML terdiri dari baris dan kolom.
Syntax untuk tabel:
<table>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Umur</th>
</tr>
<tr>
<td>Abdul</td>
<td>Kalibeber</td>
<td>23</td>
</tr>
<tr>
<td>Ahmad</td>
<td>Kaliwiro</td>
<td>19</td>
</tr>
</table>
Hasil:
Isi dari tabel harus berada didalam tag <table>. Element utama dari tabel adalah:
- <tr> - table row, mendefinisikan baris pada tabel. Tiap <tr> bisa berisi lebih
dari satu <th> atau <td>
- <th> - table head, kepala tabel. Secara default, teks-nya akan di bold
- <td> - table data, berisi data pada tabel
• Menggabungkan sel (Merge cell)
Sel pada tabel di HTML dapat digabungkan layaknya di excel. Untuk
menggabungkan sel, ada dua pilihan yaitu colspan untuk menggabungkan kolom,
dan rowspan untuk menggabungkan baris
- Colspan
<table>
<tr>
<th colspan="2">Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Abdul</td>
<td>Kalibeber</td>
<td>23</td>
</tr>
<tr>
<td>Ahmad</td>
<td>Kaliwiro</td>
<td>19</td>
</tr>
</table>
Hasil dari kode diatas adalah:
- Rowspan
<table>
<tr>
<th colspan="2">Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>Abdul</td>
<td rowspan="2">Kalibeber</td>
<td>23</td>
</tr>
<tr>
<td>Ahmad</td>
<td>19</td>
</tr>
</table>
Hasil dari kode diatas adalah:
10. List (daftar)
List di HTML terlihat sama persis dengan bullet atau numbering pada aplikasi pengolah
kata seperti MS Word. List dibagi menjadi 2 yaitu
• Ordered List <ol>
Yaitu daftar yang berurutan seperti 1,2,3, dst. atau A., B., C. Dst.
Syntax ordered list:
<h3>Ordered List</h3>
<ol>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>Daftar 3</li>
</ol>
• Unordered List <ul>

Yaitu daftar yang tidak berurutan, penandanya menggunakan bentuk
Syntax unordered list:
<ul>
<li>Daftar 1</li>
<li>Daftar 2</li>
<li>Daftar 3</li>
</ul>
11. Elemen Block dan Inline
Setiap elemen HTML memiliki nilai tampilan default, tergantung pada jenis elemennya.
Ada dua nilai tampilan: blok dan sebaris(inline).
• Elemen Blok
a. Elemen level blok selalu dimulai pada baris baru, dan browser secara otomatis
menambahkan beberapa spasi (margin) sebelum dan sesudah elemen.
b. Elemen level blok selalu menggunakan lebar penuh yang tersedia
(membentang ke kiri dan kanan sejauh mungkin).
c. Dua elemen blok yang umum digunakan adalah: <p> dan <div>.
d. Elemen <p>mendefinisikan paragraf dalam dokumen HTML.
e. Elemen <div>mendefinisikan divisi atau bagian dalam dokumen HTML.
Elemen-elemen yang bersifat blok:
• Elemen Sebaris(inline)
a. Elemen sebaris tidak dimulai pada baris baru.
b. Elemen sebaris hanya membutuhkan lebar sebanyak yang diperlukan.
Elamen-elemen yang bersifat Inline:
12. Class dan Id

• Class
Atribut class digunakan untuk menentukan kelas untuk elemen HTML. Beberapa
elemen HTML dapat berbagi kelas yang sama.
Atribut class ini sering digunakan untuk menunjuk ke nama kelas dalam style sheet.
Itu juga dapat digunakan oleh JavaScript untuk mengakses dan memanipulasi
elemen dengan nama kelas tertentu. Untuk mengakses class, baik Stylesheet
maupun JavaScript menggunakan notasi “.”
• Id
Id bersifat unik. Sebuah elemen HTML tidak bisa menggunakan lebih dari 1 id,
apabila dipaksakan, maka selector baik CSS maupun JS tidak dapat membacanya.
Id juga sering digunakan sebagai bookmark, penggunaannya digabungkan dengan
link.
Contoh penggunaan class dan id
<div class="prodi">
<p id="informatika">Bagian ini memiliki atribut class
prodi dan id informatika</p>
</div>
13. Input
Input atau masukan bertujuan untuk meyetorkan data yang nantinya akan diproses oleh
script attaupun bagian backend. Tag input tidak akan berfungsi jika tidak ada pemroses
seperti JS ataupun bahasa backend seperti PHP, Python, dsb.
Total ada 22 jenis. Namun hanya beberapa yang sering digunakan, antara lain
• Text
• Number
• Button
• Color
• Checkbox
• Radio
• Range
• Password
• Search
• submit
• Tel
• Date
• Datetime-local
Syntax input field
<label for="inputText">Teks</label>
<input type="text" name="inputText" id="text">

<label for="num">angka</label>
<input type="number" name="num" id="">
<input type="button" value="tombol">
<input type="color" name="" id="">
<input type="checkbox" name="" id="">
<input type="radio" name="" id="">
<input type="range" name="" id="">
<label for="pass">password</label>
<input type="password" name="" id="">
<label for="">search</label>
<input type="search" name="" id="">
<input type="submit" value="submit" id="">
<label for="tel">telephone</label>
<input type="tel" name="" id="">
<label for="">tanggal</label>
<input type="date" name="" id="">
<label for="">tanggal dan waktu</label>
<input type="datetime-local" name="" id="">
C. CSS
Cascading Stylesheet (CSS) adalah bahasa yang digunakan untuk menghiasi sebuah
website. CSS mendeskripsikan bagaimana elemen-elemen HTML akan ditampilkan di
layar/media yang lainnya.
1. Menggunakan CSS
CSS dapat digunakan degan 3 cara, yaitu inline, internal, dan eksternal.
a. Inline CSS
CSS dibuat dalam bentuk atribut HTML.
<h2 style="color: tomato;">Sebuah Teks</h2>

Namun, inline CSS tidak direkomendasikan apabila style yang akan dibuat itu
sangat banyak.
b. Internal CSS
Syntax CSS berada didalam file HTML. Syntax tersebut berada di bagian
<head></head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">


<style>
/* kode CSS ditulis disini */
</style>
<title>Judul Dokumen</title>
</head>
c. Eksternal CSS
File CSS terpisah dengan file HTML. Untuk memanggil file CSS adalah dengan
cara berikut
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>html css</title>
<link rel="stylesheet" href="style.css">
</head>
File style.css
h2{
color: tomato;
}
Dari ketiga cara tersebut, hasilnya sama semua

2. Selector
Selector atau identifier berfungsi untuk memilih elemen mana yang akan diganti style-
nya. Selector dibagi dalam beberapa jenis
- Simple selector
Selector yang memilih elemen berbasis nama, id, class
/* tag selector */
h2{
/* blok kode*/
}
/* class selector */
.namaClass{
/* blok kode */
}
/* id selector */
#namaId{
/* blok kode */
}
/* global selector */
*{
/* blok kode */
}
Apabila ada beberapa elemen yang memiliki properti yang sama seperti ini:
p{
color: #ffd555;
}
h1{
color: #ffd555;
}
span{
color: #ffd555;
}
maka bisa dibuat:
p, h1, span{
color: #ffd555;
}
- Combinator selector
Selector yang memilih elemen berdasarkan hubungan spesifik
- Pseudo-class selector
Contoh selector pada tombol ketika mouse diatas tombol:
button:hover{
/* blok kode */
}
- Pseudo-element selector
Contoh selector untuk memilih huruf pertama pada elemen <p>
p::first-letter{
/* blok kode */
}
- Attribute selector
Contoh selector untuk input bertipe text
input[type="text"]{
/* blok kode */
}
3. Warna
Warna ditentukan dengan nama warna atau kode warna seperti RGB, RGBA, HSL
• Warna teks
h2{
color: red;
}
• Warna background
h2{
color: red;
background-color: yellow;
/* atau */
background-color: rgb(255, 255, 0);
}
• Warna Border
h2{
color: red;
/* border */
border: 3px solid;
border-color: rgb(0, 76, 255);
}
• Transparansi dengan RGBA

RGBA adalah singkatan dari Red, Green, Blue, Alpha. Alpha adalah tingkat
transparansi suatu elemen
Pada contoh berikut, transparansi teks akan dibuat 50%
h2{
color: rgba(255, 0, 0, 0.5);
/* border */
border: 3px solid;
border-color: rgb(0, 76, 255);
}
4. Background
Background berfungsi untuk memberikan efek latar belakang(background) pada
elemen HTML. Properti background ada 6:
a. background-color
b. background-image
c. background-repeat
d. backgound-attachment (skip)
e. background (cara yang lebih ringkas)
a. Background-color
Menentukan warna pada background, pengaplikasiannya sudah dijelaskan
diatas.
b. Background-image
Menyisipkan gambar sebagai background.
body{
background-image: url(sky.png);
}
Maka background akan berubah

c. Background-repeat
Secara default, background akan di repeat secara vertikal dan horizontal,
namun apabila gambar yang digunakan berukuran besar, maka gambarnya
terlihat seperti tidak di-repeat.
untuk membuat gambar rapi, perlu dilakukan pemilihan repeat yang tepat
sesuai dengan ukuran gambar. Apabila gambar berbentuk portrait, maka
lebih baik gunakan repeat-x dan apabila gambar berorientasi landscape,
sebaiknya gunakan repeat-y. Contoh perbedaan repeat-x dan repeat-y.
Mengapa hasilnya seperti itu? Karena gambar yang digunakan memiliki
orientasi potrait dan dengan ukuran gambar yang kecil, sehingga apabila
menggunakan repeat-y maka gambar akan diulang dengan arah vertikal,
begitupun sebaliknya.
b) Background-repeat:No.-repeat
Dengan properti ini, gambar background tidak akan di-repeat, sehingga
ukurannya apa adanya.
body{
background-image: url(gradient_bg.png);
background-repeat: no-repeat;
}
Hasilnya seperti ini:
d. Background
Properti ini bisa menggabungkan beberapa propeti diatasnya. Apabila kita
ingin membuat bcakground dengan ketentuan:
background-image: sky.jpg;
background-repeat: no-repeat;
bakground-size: cover;
maka bisa dibuat seperti ini:
body{
background: url(sky.jpg) no-repeat cover;
}
Untuk value properti background boleh dibalik, tidak harus berurtan.
5. Border, Margin, Padding

a. Border
Border(tepi). Memberikan garis tepi untuk elemen HTML. Untuk mengatur border, ada
beberapa properties, natara lain:
a. border-color → memberikan warna pada border
b. border-style → mengatur bentuk border. Ada beberapa style yang sering dipakai
yaitu:
c) solid → garis yang solid
d) dashed → border putus-putus panjang
e) dotted → border putus-putus berbentuk titik
f) Double → border ganda
Untuk mengatur border per-sisi, gunakan:
g) border-top →mengatur border atas
h) barder-bottom → mengatur border bawah
i) border-left → mengatur border kiri
j) border-right → mengatur border kanan
b. Margin
Margin menciptakan ruang disekitar border, dengan kata lain, margin adalah jarak
antara border dengan elemen yang berada diluarnya.
Margin bisa diatur secara individual. Contoh:
.name{
margin-top: 20px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 10px;
}
Kode diatas berari margin atas sebesar 20px, margi kanan 10px, margin bawah
15px, margin kiri 10px.
Dan untuk margin yang
• Margin shorthand
k) Margin 4 value
Utuk mempersingakat jumlah kode, contoh diatas bisa dirubah menjadi
.name{
margin: 20px 10px 15px 10px;
}
Ingat, urutannya harus tepat, yaitu atas-kanan-bawah-kiri.
l) Margin 3 value
Apabila nilai margin hanya ditulis 3 nilai, maka margin yang
terpengaruh adalah margin atas-kanan+kiri-bawah.
.name{
margin: 20px 15px 10px;
}
Margin atas 20px, kanan dan kiri 15px, bawah 10px.
m) Margin 2 value
Apabila nilai margin hanya ditulis 2 nilai, maka margin yang
terpengaruh adalah margin atas+bawah-kanan+kiri
.name{
margin: 20px 10px;
}
Margin atas dan bawah 20px, kanan dan kiri 10px.

c. Padding
Padding adalah jarak antara konten sebuah elemen dengan border. Aturan penulisan
nilai padding sama dengan penulisan nilai pada margin.
Hubungan margin, border, dan padding adalah sseperti gambar dibawah ini:
d. Pemformatan teks dan fonts

• Mengubah warna
P{
color: value;
}
• Perataan teks
.p1{
/* rata kiri(default) */
text-align: left;
}
.p2{
/* tengah */
text-align: center;
}
.p3{
/* rata kanan */
text-align: right;
}
.p4{
/* rata kanan-kiri */
text-align: justify;
}
• Mengubah ukuran font
.p1{
font-size: value;
}
contoh:
.p1{
font-size: 30px;
}
Setelah dirubah:
Selain menggunakan ukuran langsung, nilai pada properti font-size juga

bisa menggunakan nilai-nilai berikut:
n) large
o) larger
p) x-large
q) xx-large
r) medium
s) small
t) smaller
u) x-small
v) xx-small
• Mengubah jenis font
Gunakan font-family: value; untuk mengubah jenis font. Didalam CSS
sudah disediakan beberapa jenis font, antara lain Courier New, Lucida Sans,
Times New Roman, Arial, dsb.
Lalu, bisa memilih banyak font/typeface untuk satu elemen?

Kita ambil baris pertama pada gambar diatas sebagai contoh
‘Courier New’, Courier, monospace
Maka kita akan menggunakan font Courier New. Apabila tidak tersedia di
komputer, maka komputer akan menampilkan salah satu jenis font Courier
seperti Courier Prime, Screenplay, standard, dsb., apabila tidak ada font
Courier yang tersedia maka komputer akan menampilkan font dari keluarga
monospace.
Selain menggunakan jenis font yang disediakan oleh CSS, kita juga bisa
menggunakan Font eksternal.
Untuk menggunakan font eksternal , ada dua cara, yaitu dengan font online, dan
font yang tersimpan secara lokal.
a) Font online
Misalkan font yang akan digunakan berasal dari Google Font
(https://fonts.google.com/)
Untuk menggunakannya, cukup salin bagian @import url(url font);

Penggunaan @import tidak berada di dalam selector.
.p1{
/* salah */
@import
url('https://fonts.googleapis.com/css2?family=Montserrat:wgh
t@500&display=swap');
font-family: 'Montserrat', sans-serif;
}
/* benar */
@import
url('https://fonts.googleapis.com/css2?family=Montserrat:wgh
t@500&display=swap');
.p1{
font-family: 'Montserrat', sans-serif;
}
b) Font lokal
Untuk menggunakan font lokal, syntaxnya adalah
@font-face {
font-family: 'nama font';
src: url(url font);
}
Contoh:
@font-face {
font-family: 'Death Star';
src: url(./assets/font/Death\ Star.otf);
}
.p1{
font-family: 'Death Star', sans-serif;
}
Format font yang didukung adalah: ttf, otf, woff, woff2, eot, svg. Namun
tidak semua browser mendukung format eot dan svg.
• Position
Properti position menentukan jenis metode penentuan posisi yang
digunakan untuk elemen.
Properti position memiliki 5 value:
a) Absolute
b) Relative
c) Static
d) Sticky
e) Fixed
a) Absolute
Sebuah elemen dengan position: absolute; diposisikan relatif terhadap
parent yang diposisikan(bukan diposisikan relatif terhadap viewport,
seperti fixed). Namun; jika elemen yang diposisikan absolute tidak
memiliki parent yang diposisikan, elemen tersebut menggunakan body
dokumen, dan bergerak bersama dengan pengguliran(scroll) halaman.
Catatan: Elemen posisi absolut dihilangkan dari flow normal, dan
elemen dapat tumpang tindih(override).
HTML
CSS
Maka hasilnya adalah
b) Relative
Elemen dengan position: relative; aka diposisikan relatif dengan posisi
aslinya. Posisi ini akan menempati ruang, walaupun posisinya ada
diatas elemen lainnya.
Lebarnya mengikuti panjang viewport. Menambahkan properti top,
right, bottom, left tidak memengaruhi panjangnya kecuali jika
ditentukan panjangnya.
Hasilnya adalah:
c) Static
Elemen dengan position: static; tidak akan terpengaruh oleh properti
top, right, bottom, left (padding dan margin masih memengaruhinya).
Posisi ini adalah posisi default tiap elemen HTML.
d) Fixed
Elemen dengan position: fixed; memiliki posisi yang tetap walaupun
sebuah halaman di scroll elemennya akan tetap pada posisinya.
Pemosisian elemen dohitung berdasarkan viewport, bukan container
pembungksnya
e) Sticky
Posisi ini adalah gabungan dari posisi relative dan fixed. Value ini
bekerja berdasarkan scroll. Apabila sebuah element belum sampai pada
batas viewport, maka elemennya masih bisa berpindah posisi, namun
apabila sudah discroll dan elemennya mencapai batas viewport, maka
elemennya akan memiliki posisi yang tetap.
Untuk contoh penerapannya, bisa dilihat di

https://codepen.io/rezt03/pen/NWMvYMd
• Display
Properti display mengatur apakah suatu elemen diperlakukan sebagai
elemen blok atau elemen sebaris serta layout yang digunakan untuk turunannya,
seperti layout flow, grid, atau flex. Secara formal, properti display mengatur
tipe tampilan dalam dan luar elemen. Tipe luar mengatur partisipasi elemen
dalam tata letak flow; tipe dalam mengatur tata letak child. Beberapa value
display sepenuhnya ditentukan dalam spesifikasi masing-masing; misalnya
detail dari apa yang terjadi ketika display: flex; dideklarasikan didefinisikan
dalam spesifikasi flexible box model.
Pada modul ini kita hanya akan membahas 4 jenis display, yaiut
a) block
b) inline
c) inline-block
d) flex
a) block
jenis tampilan block menjadikan setiap elemen bersiat block, tidak
ada konten disampingmya. Contoh dibawah ini akan mengubah
elemen inline <span> menjadi block.
<p>
Normalnya, elemen <kbd><span></kbd> secara
default bersifat inline, namun <span class="block">elemen
ini</span> bersifat block
</p>
.block{
display: block;
}
hasilnya adalah:
b) inline
Jenis tampilan inline menjadikan tampilan sebuah elemen menjadi
inline terhadap elemen berikutnya. Namun, elemen inline tidak bisa
diatur tinggi dan lebarnya
c) inline-block
Jenis tampilan inline-block adalah gabungan dari kedua elemen
diatas. Posisi dari elemen ini akan terlihat seperti inline, namun tiap
elemennya memiliki sifat blok, bisa diatur tinggi dan lebarnya,
elemen ini tidak akan menumpuk(override) elemen lainnya, apabila
diatur tinggi dan lebarnya, elemen dengan inline-block akan
memiliki jarak dengan elemen berikutnya sesuai dengan panjang
dan lebarnya.
<p>
Normalnya, elemen <kbd><span></kbd> secara default bersifat
inline, namun <p class="inline-block">elemen ini</p> bersifat
inline-block
</p>
.inline-block{
display: inline-block;
width: 100px;
height: 30px;
}
30px
100px
d) flex
Display flex atau sering disebut sebagai flexbox, bertujuan
untuk mengatur layout suatu konten yang ukurannya dinamis/ belum
diketahui ukurannya.
Tujuan utama penggunaan layout flex adalah untuk memberi
kemampuan container agar dapat memanipulasi elemen-elemen
yang ada didalamnya, baik itu merubah tinggi dan lebar, urutan
posisi elemen, serta jarak antar elemen.
Ada 2 elemen utama pada flexbox, yaitu flex container dan
flex item.
Pada dasarnya, flexbox itu bersifat block, namun bisa

dirubah dengan mengganti display: flex; menjadi display: inline-
flex. Kedua value tersebut memengaruhi ukuran container flexbox.
Selain itu, ada beberapa properti yang bisa digunakan
dengan flexbox container.

1) Flex-direction
Properti ini berfungsi untuk mengatur arah dari elemen yang berada
dalam flex.
2) Flex-wrap
Secara default flex-item akan berusaha memposisiskan diri agar
bisa berada dalam 1 baris yang sama. melalui property ini kita bisa
mengatur agar item bisa di”wrap”. Terdapat 3 nilai untuk property
ini yaitu no-wrap (nilai default), wrap, wrap-reverse.
3) Flex-flow
Shorthand untuk memadukan flex-direction dan flex-wrap. Syntax-
nya adalah: flex-flow: <flex-direction> <flex-wrap>.
.class{
flex-flow: column wrap;
}
4) Justify-content
Justify-content digunakan untuk mensejajarkan setiap items yang
ada pada flex container, agar container tersebut mendistribusikan
ruang kosong yang tersisa. Pengisian ruang ini diatur berdasarkan
sumbu-x (horizontal).
5) Align-items
Properti ini hampir sama dengan justify-content, bedanya adanya
align-items diatur berdasarkan sumbu-y (vertikal).
6) Align-content
Align-content adalah perpaduan dari justify-content dan align-items,
yatu mensejajarkan item secara vertikal dan horizontal.

Modul HTML-CSS-2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML-CSS-2

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul

Pemrograman Web: HTML dan CSS dasar

• <!DOCTYPE html> mendefinisikan bahwa pembuatan dokumen menggunakan

Maka hasilnya adalah seperti ini

Contoh atribut pada tag HTML

<a href="tujuan">Teks tautan</a>

<a href="https://www.google.com/">Tautan ke Google</a>

Contoh URL relative:

<a href="google.com">Tautan ke Google</a>

- href=”aset/file.html”. file berada di folder “aset” yang mana folder

- href=”/aset/file.html”. File terletak di folder aset di root web saat ini

- href=”../file.html”. File terletak di folder yang satu tingkat diatas folder

<img src="gambar.png" alt="gambar 1">

Hasil dari kode diatas adalah:

• Unordered List <ul>

Elemen-elemen yang bersifat blok:

12. Class dan Id

Contoh penggunaan class dan id

<input type="text" name="inputText" id="text">

<h2 style="color: tomato;">Sebuah Teks</h2>

Dari ketiga cara tersebut, hasilnya sama semua

• Transparansi dengan RGBA

Maka background akan berubah

Hasilnya seperti ini:

Untuk value properti background boleh dibalik, tidak harus berurtan.

5. Border, Margin, Padding

Ingat, urutannya harus tepat, yaitu atas-kanan-bawah-kiri.

Margin atas 20px, kanan dan kiri 15px, bawah 10px.

Margin atas dan bawah 20px, kanan dan kiri 10px.

d. Pemformatan teks dan fonts

Selain menggunakan ukuran langsung, nilai pada properti font-size juga

Lalu, bisa memilih banyak font/typeface untuk satu elemen?

Untuk menggunakannya, cukup salin bagian @import url(url font);

Untuk contoh penerapannya, bisa dilihat di

Pada dasarnya, flexbox itu bersifat block, namun bisa

dengan flexbox container.

Anda mungkin juga menyukai