Anda di halaman 1dari 35

Modul 0 : RUNING MODUL

Modul 1 : HTML & CSS


1.1 Tujuan
Setelah mengikuti praktikum ini mahasiswa diharapkan dapat:

1. Memahami pengertian dan konsep dasar HTML dan CSS


2. Dapat mengetahui dan memahami dasar-dasar struktur HTML
3. Dapat memahami sintaks-sintaks dalam HTML dan CSS
4. Dapat menggunakan elemen-elemen HTML
5. Dapat mengaplikasikan CSS dalam pembuatan WEB

1.2 Alat & Bahan


Alat & Bahan yang digunakan adalah sbb :
1. Laptop
2. Software Text Editor Sublime

1.3 Dasar Teori


1.3.1 HTML
HTML ( Hypertext Markup Language) yaitu merupakan sebuah bahasa untuk
mendeskripsikan sebuah halaman web sehingga informasi-informasi yang akan diberikan
tersaji dalam bentuk website. Setelah melakukan penulisan script HTML, maka dokumen
harus disimpan dalam format ekstensi HTML file (.html)

1.3.2 Struktur Dasar HTML


Dalam HTML, Struktur dasarnya adalah sebagai berikut
<html>
<head>
<title> … </title>
</head>

<body> … </body>
</html>

Penjelasanya adalah sebagai berikut


TAG FUNGSI
HTML Untuk penenda bahwa dokumen yang dibuat adalah dokumen web
HEAD Untuk bagian judul
TITLE Judul untuk masing-masing halaman, ditampilkan diatas browser
BODY Informasi yang ingin dimunculkan diletakkan di bagian ini
1.3.2.1 Element HTML
Dalam dokumen HTML, disusun oleh elemen-elemen. Element merupakan
istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Element terdiri
dari tiga bagian yaitu tag pembuka, tag isi dan tag penutup, . Sebagai contoh, untuk
menampilkan judul dokumen HTML pada web browser digunakan element title :

<Title> : tag pembuka


Bengkel Internet of Things : isi
</title> : tag penutup

1.3.2.2 TAG
Pada saat web browser menampilkan suatu web page, browser tersebut akan membaca
teks-teks pada dokumen HTML, dan mencari kode khusus yang disebut tag. Syarat
penulisan, yaitu:

 Tag HTML diapit dengan dua karakter siku ( < dan > )
 Tag HTML secara normal selalu berpasangan, contohnya (<i>...</i>) tag
pertama dalam suatu pasangan adalah tag pembuka, dan tag yang kedua
merupakan tag penutup.
 Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>.
 Jika dalam suatu tag terdapat tag lain, maka penulisan tag terakhir
tidak boleh bersilang dan harus berurutan.

Contoh Penulisan sebagai berikut :

<html>
<body>
Bengkel IOT 2016
</body>
</html>
1.3.2.3 Attribute
Atribute merupakan pelengkap dari suatu element HTML, pelengkap
tersebut terdiri atas 2 bagian yaitu “Property” dan “Value”. Pada umunya, penulisan
value biasanya diapit dengan tanda petik dua “ ” ataupun petik satu ‘ ’.
Struktur penulisaannya adalah sebagai berikut:

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body bgcolor=”Green”>
Modul ini tentang HTML
</body>
</html>

Hasilnya akan seperti ini :

Keterangan:

 Bgcolor : merupakan property


 green : merupakan value/ nilai dari property tersebut
 <body ......> </body> : property dan value akan berlaku didalam body
Attribute yang digunakan untuk perataan objek dokumen HTML.

Berikut adalah contoh penggunaan atribute :

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body bgcolor=”Green”>
<p align-“left>Modul ini tentang HTML</font><br>
<p align=”right”>Modul ini tentang HTML</font><br>
<p align=”center”>Modul ini tentang HTML</font><br>
<body>
</html>

Hasilnya :

1.3.3 Menetukan Format Teks Pada Html


Format yang terdapat dalam HTML adalah sebagai berikut :
a. Membuat Teks Tebal

Untuk membuat teks menjadi tebal, tag yang digunakan adalah <b> sebagai tag
pembuka dan </b> sebagai tag penutupnya.
b. Membuat Teks Miring

Untuk membuat teks menjadi miring, tag yang digunakan adalah <i> sebagai tag
pembuka dan </i> sebagai tag penutupnya.
c. Membuat Teks Bergaris Bawah

Untuk membuat teks bergaris bawah, tag yang digunakan adalah <u> sebagai
tag pembuka dan </u> sebagai tag penutupnya.
d. Membuat Format Superscript

Format superscript adalah format teks yang ukuran hurufnya diperkecil dan
posisinya dinaikkan ke atas, seperti angka yang digunakan dalam perpangkatan.
e. Membuat Format Subscript

Format Subscript adalah format teks yang yang merupakan kebalikan dari
Superscript.
Teks atau karakter tersebut ditempatkan
dibawah.

Contoh Penulisannya

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body>
<b> Contoh Penulisan Huruf Tebal </b><br>
<i> Contoh Penulisan Huruf Miring
</b><br>
<u> Contoh Penulisan Huruf Bergaris Bawah
</b><br>
<p> Contoh Penulisan Superscript </p>
CO<sup>2</sup><br>
<p> Contoh Penulisan Subscript </p>
H<sub>2</sub>O
</body>
<html>
Hasil Tampilannya

f. Membuat Heading (Judul Text)


Pada HTML menyediakan 6 jenis ukuran dalam penulisan judul, penulisannya menggunakan
tag <hn> </hn>. Dimana nilai n merupakan bilangan 1 sampai dengan 6.

Contoh penulisan

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body>
<h1> Judul Menggunakan Heading 1 </h1>
<h2> Judul Menggunakan Heading 2 </h2>
<h3> Judul Menggunakan Heading 3 </h3>
<h4> Judul Menggunakan Heading 4 </h4>
<h5> Judul Menggunakan Heading 5 </h5>
<h6> Judul Menggunakan Heading 6 </h6>
</body>
</html>

Tampilannya akan seperti ini

1.3.4 HTML Hyperlink


Hyperlink dalam HTML ini untuk membuat sebuah teks yang di klik akan berpindah ke
halaman lain. Tag yang digunakan adalah <a>. Link <a> merupakan singkatan dari Anchor
yang berarti Jangkar. Setiap tag <a> biasanya diikuti dengan href yang merupakan singkatan
dari hypertext reference.
Contoh penulisan

<html>
<head>
<title> MODUL BENGKEL IOT </title>
<head>
<body>
<p> Membuat Link dengan Tag a<br>
<a href=”https://google.com”>Klik disini</a>
</p
</body>
</html>
Tampilannya sebagai berikut

1.3.5 HTML List


HTML LIST digunakan untuk membuat daftar list. Ada beberapa jenis penulisan list dalam
HTML, sebagai berikut :

1.3.5.1 Ordered List


Nomor item secara default menggunakan angka 1,2,3…dst sampai dengan dalam list
tersebut. Kita dapat mengubah nomor dalam Ordered List dengan model angka yang
lain, dengan mengisi atribut type pada tag <ol>.
Contohnya seperti berikut
<body>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ol type="1">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ol>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ol type="A">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ol>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ol type="I">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ol>
</body>
Tampilannya akan seperti ini

1.3.5.2 Unordered List


Unordered List juga biasa disebut bulleted list, mempunyai bullet default seperti noktah.
Dalam penulisannya diawali dengan tag <ul > dengan pasangannya </ul> dan di dalamnya
ada tag <li> dengan pasangannya </li>. Contoh penulisan script untuk unordered list
adalah sebagai berikut :
<body>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ul type="square">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ul>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ul type="circle">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ul>
<h3>Daftar Mata Kuliah Jaringan</h3>
<ul type="disc">
<li>Jaringan Data Broadband</li>
<li>Komunikasi Data Broadband</li>
<li>Bengkel IOT</li>
</ul>
</body>

Tampilannya sebagai berikut

1.3.6 HTML TABLE


Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas
baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi
menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. Baris dibuat dengan tag
<tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.
Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang
dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :
Atribut Nilai Keteranga
Border Angka 0, 1 dst Digunakan untuk n menentukan tebal
garis batas tepi tabel
Cellspacing Angka 1,2,3 dst Digunakan untuk menentukan
jumlah spasi/celah diantara tiap-tiap
Cellpadding Angka 1,2,3 dst Digunakan
sel untuk menentukan jumlah
spasi antara data dalam suatu sel
Digunakan untuk mengatur lebar
width Pixel / persentase tabel, dapat menggunakan ukuran
piksel atau persentasi %
Align Left, center.right Digunakan untuk perataan tabel
secara horizontal
Valign Middle, Digunakan untuk perataan tabel
bottom, secara vertikal
bgcolor Warna/bil.hexadesima
baseline Warna latar dari tabel atau pada sel
Rowspan l
Angka 1,2,3 dst Menggabungkan beberapa baris tabel
Colspan Angka 1,2,3 dst Menggabungkan beberapa kolom tabel

Contoh Penulisan

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body>
<table border="2">
<tr>
<th>Kolom Utama 1</th>
<th>Kolom Utama 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>

Tampilannya akan seperti ini


Merge adalah penggabungan. Penggabungan antar baris atau kolom, sehingga dapat
dilebarkan lebih dari satu kolom atau baris. Penggabungan antar baris menggunakan perintah
“rowspan” sedangkan penggabungan antar kolom menggunakan perintah “colspan” yang
dituliskan didalam atribut <td> .

Contoh penulisan

<html>
<head>
<title> MODUL BENGKEL IOT </title>
</head>
<body>
<table border="5">
<tr>
<th colspan="2">Kolom 1 dan 2
Bergabung</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
</body>
</html>

1.3.7 Menyisipkan Gambar


Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis
format gambar yang dapat digunakan pada halaman web, antara lain:
 GIF (Grafical Interchange Format) (.gif)
 JPEG (Joint Photographic Expert Image) (.jpg)
 PNG( Portable Network Graphic) (.png)
 BMP (Bitmap) (.bmp)
Untuk menyisipkan gambar dalam halaman web dapat dilakukan dengan menggunakan
tag
<IMG>. Tag tersebut memiliki elemen tambahan sebagai berikut:
ELEMEN ATRIBUT KETERANGAN
SRC URL gambar Diisi dengan alamat yang menunjuk
pada sumber file gambar
Menentukan tulisan yang akan
ditampilkan (biasanya ditempatkan
ALT Teks antara tanda petik). Apabila browser
tidak dapat menampilkan gambar
untuk alasan tertentu.
Top, bottom, middle digunakan
Center | Justify | Left | untuk menentukan posisi image
ALIGN terhadap teks
Right | Baseline | Top |
Left, Right, Center untuk
Bottom | Middle
menentukan posisi image pada
dokumen
HEIGHT Angka Digunakan untuk menentukan ukuran
tinggi gambar
WIDTH Angka Digunakan untuk menentukan ukuran
lebar gambar
BORDER Angka Digunakan untuk memberikan
bingkai pada gambar

Terdapat dua cara untuk membuat gambar dalam web dengan menggunakan tag <img>:
 Penggunaan absolute path, biasanya gambar diletakkan pada folder yang sama
dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat
berupa alamat dari suatu website.
Contoh :
<img src=”foto.jpg”>

 Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah
dengan folder halamannya.
Contoh :
<img src=”/image/foto.jpg”>
1.3.8 HTML FORM
Form adalah suatu cara untuk mejadikan halaman web menjadi lebih
interaktif , karena akan mendaptakan umpan balik dari pengunjung situs
web. Form dapat digunakan untuk membuat buku tamu, formulir
pemesanan, survey, meminta komentar dan lain sebagianya.
Adapun cara untuk membuat form adalah dengan menggunakan elemen
FORM kemudian ditambah dengan komponen-komponen pembentuk form
seperti input, checkbox, option dan sebagainya.
struktur untuk membuat form yaitu :
<form method=”post / get” action=”url” >
<input>
<input>
</form>
Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action
sering diisi dengan URL tempat pemrosesan form selanjutnya.
Elemen Atribut fungsi
INPUT TYPE Bentuk masukan. Diisi dengan
TEXT atau PASSWORD
NAME Nama komponen input
VALUE Isi/nilai dari komponen input
SIZE Panjang komponen input
MAXLENGTH Batasan panjang penulisan isi input
INPUT
TYPE Bentuk masukan RADIO

NAME Nama komponen input radio


VALUE Pemberian nilai pada radio
CHEKED Memilih salah satu radio
INPUT TYPE Bentuk masukan CHECKBOX
NAME Nama komponen input checkbox
VALUE Pemberian nilai pada checkbox
CHEKED Memilih checkbox
SELECT NAME Nama komponen select /pull down
list
OPTION Pilihan dalam list
VALUE Isi pada list
SELECTED Option yang dipilih
SIZE Ukuran list
TEXTAREA TYPE Bentuk komponen TEXTAREA
NAME Nama komponen textarea
ROWS Jumlah baris pada textarea
COLS Jumlah kolom pada textarea

INPUT TYPE Bentuk masukan tombol. Diisi


dengan SUBMIT atau RESET
VALUE Judul pada tombol
Pembuatan Form HTML
1. Buka Text editor, kemudian buat project baru lalu save dengan nama index.html

2. Kemudian ketikan struktur dasar dari script HTML

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

3. Isi bagian title untuk memberi judul pada browser yang kalian gunakan

<head>
<title>contoh membuat form</title>
</head>
4. Beralih ke bagian tag <body>, lalu isikan script berikut untuk memberikan judul pada
tampilan web

<h1 align="center">form pendaftaran online</h1>


<hr size=3 color="black">

5. Selanjutnya kita buat form inputan untuk nama dan alamat menggunakan inputan Text

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


<table>
<tr>
<td>nama</td>
<td>:</td>
<td><input type="text" name="varnama"></td>
</tr>
<tr>
<td>alamat</td>
<td>:</td>
<td><input type="text" name="varalamat"></td>
</tr>

6. Selanjutnya kita buat daftar agama untuk pilihan menggunakan inputan pull down

<tr>
<td>agama</td>
<td>:</td>
<td><select name="agama">
<option> </option>
<option>islam</option>
<option>kristen</option>
<option>budha</option>
<option>hindu</option>
<option>konghucu</option>
</select>
</td>
</tr>
7. Selanjutnya kita buat pilihan jenis kelamin dengan menggunakan radio button

<tr>
<td>jenis kelamin</td>
<td>:</td>
<td>
<input checked type="radio" name="kelamin" value="pria">Pria
<input type="radio" name="kelamin" value="wanita">Wanita
</td>
</tr>
8. Selanjutnya kita buat pilihan hobi dengan menggunakan checkbox

<tr>
<td>hobi </td>
<td>:</td>
<td>
<input type="checkbox" name="hobi" value="soccer">sepakbola
<input type="checkbox" name="hobi" value="badminton">bulutangkis
<input type="checkbox" name="hobi" value="computer">komputer
<input type="checkbox" name="hobi" value="game">permainan video
<input type="checkbox" name="hobi" value="internet">internet
</td>
</tr>

9. Selanjutnya kita buat kolom komentar dengan menggunakan text area


<tr>
<td>komentar</td>
</tr>
<tr>
<td colspan="3"><textarea cols="30" rows="5" name="komentar"></textarea></td>
</tr>

10. Terakhir buat tombol proses baik itu untuk dikirim ataupun untuk di reset dengan
menggunakan script berikut

<tr>
<td>
<input type="submit" value="Kirim">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>

11. Akan terlihat hasil akhir nya seperti berikut


1.3.9 Penjelasan CSS

CSS (Cascading Style Sheet ) adalah Metode yang digunakan untuk mempersingkat
script HTML dan memisahkan dari konten utama skrip HTML .Konten-konten yang
dipisahkan seperti Font, Size,Color, Tabel,dan lebih banyak lagi .Konten-konten tersebut
dapat dipisahkan scriptnya dari HTML sehingga tidak terdapat pengulangan penulisan
script.
Maksud dari Cascading itu sendiri, bahwa satu file scrip CSS dapat digunakan untuk
banyak halaman serta satu halaman web dapat diubah-ubah dengan satu file script CSS.
Ada 2 jenis CSS yang dapat digunakan yaitu CSS yang bersifat sebagi berikut :
a. CSS bersifat Internal
Pada sifat Internal pada halaman, bila ada perubahan format harus melakukan banyak
pengeditan pada semua file.

b. CSS Bersifat Eksternal


Pada sifat ini script CSS akan tersimpan berupa file CSS sendiri, sehingga menjadi lebih
mudah dalam melakukan edit karena biasanya dihubungkan menggunakan link. Jika
melakukan perubahan format, cukup melakukan perubahan pada file CSS, maka
halaman yang terhubung dengan file CSS tersebut akan ikut berubah.
Kegunaan CSS :
1) CSS sangan mempermudah karena mempersingkat penulisan HTML
dan bisa digunakan di beebrapa file HTML.
2) CSS berguna untuk mempercepat penulisan skrip HTML
3) CSS dapat melakukan apa yang tidak bisa digunakan pada HTML
4) Lebih hemat waktu yang fungsinya seperti master halaman
5) Pada loading halaman yang menjadi lebih cepat, karena ukuran file tiap
halaman web menjadi lebih kecil
6) CSS berguna untuk mempercantik tampilan web yang tidak bisa di dapat dari
HTML.

1.3.10 Aturan penulisan CSS


Didalam penulisan script CSS terdapat dua komponen utama yaitu :
b) Deklarator adalah Perintah untuk membuat tampilan pada selector sesuai
dengan perintah yang ada pada deklarator sehingga hasil dari deklarator dapat
ditampilkan di browser. Deklarator terdiri dari Property dan Value.
c) Selector adalah tag HTML yang akan diberi style CSS ,contoh selector tag HTML
yaitu body,table,h1,dan lain-lain.
Selector dasar pada CSS ada 5 jenis,yaitu:
1. Universal Selector

Universal selector hanya ada 1 saja di dalam CSS, yaitu tanda bintang “*”. Selector
ini bertujuan untuk diterapkan pada semua tag yang ada.
Contoh Universal Selector CSS:
*{
margin: 0;
padding: 0;
background-color: blue;
color: red;
}

Kode CSS diatas bermaksud untuk membuat seluruh tag HTML memilikiki margin
dan padding sebesar 0 dengan warna teks berwarna merah serta background
berwarna biru.
2. Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya
merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector,
dan seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:
*{
margin: 0;
padding: 0;
background-color: blue;
color: red;
}

h1{
font-family: monospace;
text-decoration: underline;
font-weight: bold;
}

p{
font-size: 16px;
}
 Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris
bawah,hurufnya tebal,dan jenis font yang digunakan adalah
monospace. Sedangkan untuk seluruh tag <p> akan berukuran 14pixel.
 Efek dari element type selector yaitu dari awal hingga akhir tag. Jika didalam
tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 16 pixel,
sampai ditemui tag penutup </p>.

3. Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class
dengan nilai yang sesuai. Untuk penggunaan Class Selector, kita harus memiliki tag
HTML yang mempunyai atribut class.
Contohnya:

<h2 class=”judul”>Belajar CSS Dasar</h2>


<h3 class=”judul berwarna”>Aturan penulisan CSS</h3>

 Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class
dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat
dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari
1 class.

 Contohnya dalam baris terakhir pada contoh diatas,tag h3 memiliki atribut


class=”judul berwarna”. Tag ini teridiri dari 2 class, yaitu judul dan
berwarna.

Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:


.judul{
color: green;
}
.berwarna{
text-decoration: underline;
}
 Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda
titik sebelum nama dari class.

 Class yang memiliki nilai “judul”, warna text akan menjadi hijau. Dan
seluruh class berwarn akan menjadi teks bergaris bawah.

Cara lain dalam pemanggilan class yaitu menggunakan tag <div


class=”nama_class”> ....</div> . Contohnya sebagai berikut:

<div class=”judul”>Belajar CSS Dasar</div>


<div class=”judul berwarna”>Aturan penulisan CSS</div>

Akan tetapi hasilnya akan berbeda dengan pemanggilan yang terjadi pada tag html
umum (mengikuti aturan tag tersebut),seperti contoh diatas menggunakan tag <h2>
karena class selector dipanggil pada tag tersebut maka otomatis ukurannya
mengikuti ukuran heading untuk tag <h2>. Sehingga pemanggilan class selector
menggunkan tag <div> isinya hanya bergantung pada class yang dibuat.

4. ID Selector

ID Selector bersama-sama dengan class selector merupakan selector paling umum


dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector
hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita
menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan
atribut id.

Contoh penggunaan atribut id pada tag HTML

<h1 id=”judul artikel”>Memahami ID Selector</h1>


<p id=”artikel”>ID Selector adalah. . . . . .</p>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-
masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang
digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan
satu kali dalam sebuah halaman web dan tidak boleh sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:

#artikel{
font-family: sans-serif;
font-size: 12px;
}
#judul_artikel{
font-size: 20px;
font-weight: bold;
color: yellow;
}

Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita
mencari tag yang memiliki id tersebut.

Tidak seperti class selector yang bisa dipanggil dua kali dalam satu tag html, id
selector hanya bisa dipanggil satu kali saja.

5. Attribut Selector
Selector dasar terakhir kita adalah attribute selector. Selector ini sedikit lebih
advanced dibandingkan dengan selector-selector sebelumnya. Atribut Selector ini
digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {
Font-size: 20px;
}
[type=”submit”] {
Width: 30px;
}

 Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada
diantara tanda kurung siku “[” dan “]”.
 [href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari
href (href biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan
cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal
ini adalah tombol submit dalam form.
 Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut
selector ini tidak terlalu sering digunakan.
Cara penulisan CSS dibagi menjadi tiga yaitu :
1. Inline style sheet

Merupakan skrip CSS disisipkan dalam skrip HTML dengan kata lain skrip CSS berada di
dalam skrip HTML dengan menambah style pada deklarator.
Berikut contoh penulisan CSS Line Style Sheet

Hasil dati penulisan CSS line style sheet :

2. Embedded Style Sheet

Embedded Style Sheet adalah penulisan skrip CSS dimana skrip tersebut berada
dalam tag
<style> ......</style> dan dan tag tersebut disisipkan atau berada di dalam skrip
HTML. Tag
<style> ini dapat diletakan diluar tag <html> sehingga tidak harus setelah tag
</head>. Berikut contoh penulisan CSS Embedded Style Sheet
<html>
<head>
<title>Casscading Style Sheet</title>
<style type="text/css">
P{
color: green;
font-family: calibri;
font-style: italic;
font-size: 20px;
}
body {
background-color: black;
}
</style>
</head>
<body>
<p> Rumput tetangga terlihat lebih hijau dari rumput sendiri </p>
</body>
</html>

Hasil dari penulisa CSS Embedded Style Sheet :

3. Link Style Sheet

Link Style sheet adalah penulisan CSS dimana script CSS disimpan pada file yang
berbeda dengan file script HTML. File CSS tersebut harus disimpan dengan ,css contoh
(nama_file.css) Ciri dari penulisan CSS Link Style Sheet :

a) Script CSS berada diluar file script HTML


b) Didalam HTML terdapat tag link yang berfungsi untuk menghubungkan css dan
html
c) Karena script CSS disimpan di file yang berbeda dengan script HTML oleh
karena itu style yang berada di CSS bisa digunakan di beberapa file HTML

Contoh penggunaan penulisan CSS Link Style Sheet :


Pada contoh penggunaan CSS link style sheet, file CSS disimpan berbeda dalam file HTML

.paragraf{
text-size: 30px;
color: green;
text-align: left;
text-decoration: underline;
font-weight: bold;
}
#kotak{
background-color: aqua;
width: 200px;
height: 200px;
}

<html>
<head>
<title>Casscading Style Sheet</title>
<link rel='stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="paragraf"> Persegi mempunyai 4 sisi </p>
<div id="kotak"> Kotak/persegi </div>
</body>
</html>
Hasil dari Link Style Sheet
1.3.11 Property pada CSS
1. Property text style

2. Property Text
3. Property List

4. Property Background
Memperindah tampilan Form dengan CSS link style sheet
1. Buat file baru dengan nama style.css kemudian save di project pengerjaan html

2. Hubungkan file css pada syntax html dengan menggunakan script berikut

<head>
<title>contoh membuat form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

3. Deklarasikan property css yang dibutuhkan


*{
margin: 0px
}

body{
background-color: #ffffff;
}

/* Header */
header{
background: #006caa;
padding: 10px 20px;
margin-bottom: 0;
position: relative;
z-index: 10;
overflow: hidden;
}
header img{
float: left; height: 100px;
width: 100px;
}
header h1{
margin-top:20px;
margin-left:80px;
color: #dddddd;
}

/* Pembatas */
.pembatas{
background: #009cf2;
height: 20px;
width: 100%;
}
/* Isi */
.isi{
position: absolute;
top: 25%;
bottom: 100px;
margin-left: -400px;
left: 50%;
margin-bottom: 150px;
max-width: 650px;
}
input[type=text], input[type=password], select, textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=button], input[type=submit], input[type=reset] {
background-color: #009cf2;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
cursor: pointer;
}
/* Footer */
footer{
background: #009cf2;
height: 20px;
width: 100%;
position:absolute;
bottom: 0px;
color: #ffffff;
}

4. Sisipkan bagian css pada script html sesuai posisinya

<header>
<img src="img/telnet_kecil.png">
<h1 align="center">form pendaftaran online</h1>
<hr size=3 color="black">
</header>

<div class="pembatas">

</div>

<div class="isi">
<form method="" action="">
<table>
<tr>
<td>nama</td>
5. Jika sudah sesuai, Akan terlihat hasil seperti berikut