ii

Daftar ISI
HTML..............................................................................................................................................1
Pengertian HTML....................................................................................................................... 1
Pengertian HTML....................................................................................................................1
Kegunaan HTML.....................................................................................................................2
Memilih Text Editor................................................................................................................... 2
Memilih text editor yang sesuai dengan keinginan.................................................................3
Mengenal Tag, Element, Atribut HTML......................................................................................9
Tag HTML...............................................................................................................................9
Element HTML......................................................................................................................11
Atribut pada HTML...............................................................................................................11
Heading Pada HTML.................................................................................................................12
Format Text Pada HTML.......................................................................................................... 16
Format Text Pada HTML......................................................................................................16
Membuat Paragraf Pada HTML................................................................................................19
Jenis paragraph......................................................................................................................21
Membuat Tabel Pada HTML.................................................................................................... 22
Membuat Hyperlink Pada HTML..............................................................................................26
Membuat List Pada HTML........................................................................................................26
Ordered List <ol>................................................................................................................. 27
Unordered list <ul>.............................................................................................................. 28
Membuat Form pada HTML.....................................................................................................30
Tag <form>...........................................................................................................................30
Tag <input>.......................................................................................................................... 30
Tag <textarea>..................................................................................................................... 31
Tag <select>......................................................................................................................... 31
Menampilkan Gambar Pada HTML..........................................................................................33
Cara Menampilkan Gambar Pada HTML..............................................................................34
Belajar HTML Tag Iframe Pada HTML.......................................................................................36

Menghubungkan HTML dengan CSS........................................................................................39

iii
 Cara Menghubungkan HTML dengan CSS...........................................................................39
Mengenal Class dan Id Pada HTML..........................................................................................42
Mengenal Class dan Id Pada HTML......................................................................................42
Membuat Symbol pada HTML................................................................................................. 45
CSS............................................................................................................................................ 50
Pengertian dan Pengenalan CSS.............................................................................................. 50
Fungsi dan Kegunaan CSS.................................................................................................... 50
Cara Penggunaan CSS.......................................................................................................... 50
Cara Penulisan CSS...................................................................................................................51
Teknik penulisan CSS Inline Style.........................................................................................52
Teknik penulisan CSS Internal Style......................................................................................53
Teknik penulisan CSS External Style.....................................................................................55
Mengubah Background Dengan CSS........................................................................................58
Mengubah warna background dengan CSS.........................................................................59
Mengubah gambar background dengan CSS.......................................................................60
Margin dan Padding pada CSS................................................................................................. 62
Mengenal Margin pada CSS.................................................................................................63
Mengenal Padding pada CSS................................................................................................65
Mengatur Font dengan CSS..................................................................................................... 67
Mengatur Hyperlink dengan CSS............................................................................................. 70
Mengatur Format Text dengan CSS.........................................................................................74
Cara mengubah warna text dengan CSS..............................................................................75
Belajar CSS Mengatur format text dengan CSS....................................................................78
Mengenal Position CSS............................................................................................................ 80
Static.................................................................................................................................... 80
Relative................................................................................................................................ 81
Fixed.....................................................................................................................................82
Absolute............................................................................................................................... 84

Mengubah border dengan CSS................................................................................................ 85

Mengubah Border Style.......................................................................................................85
iv
 Mengatur Ukuran Border CSS..............................................................................................87
Memberi warna pada border...............................................................................................89
Cara cepat memanipulasi border dengan CSS.....................................................................92
Mengubah List Dengan CSS......................................................................................................94
Menggunakan Float CSS...........................................................................................................98
Cara Mengganti Font Dengan CSS..........................................................................................101
Design Table dengan CSS.......................................................................................................107

iv

v
 HTML

Apa itu HTMl ? mungkin pertanyaan inilah yang terbersit pada benak anda yang
baru mulai masuk kedalam dunia web programming. HTML merupakan bahasa pemrograman
dasar yang wajib di kuasai bagi seorang web developer. karena HTML merupakan unsur dasar
dari pembangunan sebuah website. jika di ibaratkan HTML menjadi pondasi pada sebuah
rumah atau bangunan. karena bentuk pada halaman website di buat menggunakan HTML. pada
pelatihan full stack developer ini akan di jelaskan tentang pengertian dari HTML dan sekilas
tentang sejarah HTML dan perkembangannya.

Pengertian HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa formatting yang digunakan
untuk membuat sebuah halaman website. Di dalam dunia pemrograman berbasis website(Web
Programming), HTML menjadi pondasi dasar pada halaman website. sebuah file HTML di di
simpan dengan ekstensi .html (dot html). dan dapat di eksekusi atau diakses menggunakan web
browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di
jelaskan, HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup
hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat
sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja
maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-
fungsi yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus
mengubah lagi file HTML setiap ingin mengupdate artikel.

HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya
masing-masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat
hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya yang
akan kita bahas pada pelatihan ini.

1
Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan dengan
HTML adalah sebagai berikut :

 Membungkus element-element tertentu sesuai kebutuhan.

 Membuat heading atau format judul.
 Membuat Tabel.
 Membuat List.
 Membuat Paragraf.
 Membuat Form.
 Membuat Tombol.
 Membuat huruf tebal.
 Membuat huruf miring.
 Menampilkan gambar.
 Menampilkan video.

Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur
tambahan salah satunya, dengan HTML5 memungkinkan kita untuk membuat streaming video
tanpa bantuan adobe flash, jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan
pondasi dasar dari pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html
harus menggunakan web browser dan file html di simpan dengan ekstensi .html (dot html).

Memilih Text Editor

Untuk anda yang baru mau belajar bahasa pemrograman, disini khususnya pemrograman web,
tentulah berfikir bagaimana membuatnya, dan apa yang harus gunakan untuk membuat
program ? berikut kami sediakan jawaban yang mungkin terbesit dalam hati/pikiran anda yang
baru mau belajar bahasa pemrograman web. sebelum kita memulai cara penulisan HTML
terlebih dahulu yang harus anda sediakan adalah text editor dan browser.

2
Text Editor merupakan aplikasi yang digunakan untuk menulis syntax atau kode program, disini
khususnya untuk penulisan kode program HTML itu sendiri. Text editor sendiri sangatlah banyak
yang bisa digunakan untuk penulisan kode HTML, contohnya seperti Notepad yang disediakan oleh
sistem operasi windows, Textedit yang disediakan oleh sistem operasi Mac dan Nano yang
disediakan oleh sistem operasi linux. Text editor berbeda dengan Word Processor (Microsoft Word,
King Soft, WordPerfect). Itu dikarenakan text editor tidak bisa digunakan untuk mengatur format
document serta tidak disediakan fitur-fitur yang bisa digunakan untuk desktop publishing.

Browser merupakan aplikasi yang akan kita gunakan untuk menjalankan code program html yang
sudah kita tulis. browser ini ialah syarat yang harus anda penuhi jika anda belajar web programing.
untuk browser itu sendiri bisa digunakan yang sudah disediakan oleh sistem operasi langsung
ataupun bisa juga digunakan aplikasi browser yang lain seperti: Mozilla Firefox, Opera, Chrome
dan sebagainya.

Memilih text editor yang sesuai dengan keinginan

Berikut beberapa text editor yang kami sarankan untuk digunakan dalam penulisan code
program bagi anda yang baru belajar bahasa pemrograman.

Sublime Text Editor

Sublime Text editor adalah text editor yang paling banyak digunakan oleh programer, text
editor ini memiliki tampilan yang elegan, yang khas dengan warna kecoklatannya. Text Editor ini
tersedia untuk windows, Mac, dan Linux. Untuk anda yang ingin menggunakan sublime bisa di
download dari situs resminya langsung, yaitu di [Link]

3
 Gambar 1 : Sublime Text Editor

Notepad ++
Text editor ini bisa digunakan untuk windows dan free licence (dalam artian bebas
digunakan tanpa mengeluarkan biaya). Text Editor ini memiliki ciri khas tersendiri dan banyak
fitur-fitur yang bisa diinstal di text editor ini. untuk anda yang ingin menggunakan text editor
notepad++ bida di download pada situs resminya, yaitu [Link]

4
 Gambar 2 : Notepad ++

Atom
Text editor ini hampir sama dengan sublime namun text ini agak sedikit lebih berat jika
dibandingkan dengan sublime. Text Editor ini bisa digunakan oleh platform Mac, Windows, dan
Linux. Untuk anda yang ingin menggunakan text editor ini bisa di download di [Link]

5
 Gambar 3 Atom

Brackets
Text editor ini memiliki kriteria tersendiri dan hampir sama dengan Atom. Text editor ini
bisa digunakan untuk Platform Mac, Windows dan Linux. untuk anda yang ingin menggunakan
brackest bisa di download di [Link]

6
 Gambar 4 Brackets

Netbeans
Text editor ini merupakan salah satu favorit programer. namun text editor ini bisa di
kategorikan lebih berat dari text editor lain yang disebutkan di atas. kemudahan text editor ini
adalah tampilan kode program yang ditulis lebih rapi. untuk anda yang ingin menikmati editor
ini bisa di download di situs resmi netbeans, yaitu di [Link]

7
 Gambar 5. Netbeans

Dalam praktikum pelatihan HTML dan CSS kita akan menggunakan Visual Studio Code, dimana
tampilannya seperti berikut :

8
 Gambar 6. Visual Studio Code

Selanjutnya persiapan text editor visual studio code sebelum kita melakukan praktikum :

1. Download filenya di : [Link] sesuaikan dengan sistem

operasi yang digunakan.

2. Setelah didownload selanjutnya install text editor visual studio code, tampak seperti
pada gambar berikut :

9
10
Ikuti langkah selanjutnya sampai proses instalasi selesai, setelah visual studio code terintal di
komputer selanjutnya lakukan instalasi extention dimana hal ini berfungsi untuk mempermudah
penulisan perintah-perintah secara otomatis pada saat kita menggunakannya.

Daftar extention yang harus di instal setelah visual studio code terpasang :
1. PHP Intelephense
([Link]
client)
2. Laravel Artisan
([Link]
3. Laravel Snippets
([Link]
4. Laravel Blade Snippets
([Link]
5. Laravel Blade Spacer
([Link]
6. Laravel GoTo View
([Link]
goto-view)

11
itulah beberapa list text editor yang bisa digunakan untuk menulis kode HTML. Text editor ini
selain bisa digunakan untuk menulis kode html bisa juga untuk menulis kode program lainnya
seperti PHP,CSS, JavaScript, dan beberapa kode program untuk desktop.

jadi kesimpulannya, sebelum memulai penulisan kode program, yang harus anda penuhi
terlebih dahulu adalah memilih salah satu text editor yang akan anda digunakan dan browser
untuk menjalankan code program.

Mengenal Tag, Element, Atribut HTML

Setelah sebelumnya kita membahas tentang Pengenalan HTML, Text Editor. kini kita akan
memasuki tutorial pengenalan dan penggunaan Tag, Element dan Atribut dalam HTMl. Ketiga
pembahasan ini merupakan dasar dalam penulisan kode HTML atau dasar dari seluruh tampilan
halaman web yang ada di internet.

Tag HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text
HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya
kepada web browser. baik text itu berupa list, paragraf, link dan sebagainya. disinilah di gunakan
tag. dalam penulisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek
yang di maksudkan berada diantara pembuka dan penutup tag. Berikut penulisan tag yang
digunakan dalam HTML

<tag> Objek yang diisi </tag>

Perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut
pembuka dan di akhiri dengan kurung sudut penutup (< >), sedangkan pada tag penutup
,diawali dengan kurung sudut pembuka, backslash, dan diakhiri dengan penutup kurung sudut
(</>).

12
Jenis tag yang sering digunakan dalam html

berikut beberapa jenis tag yang akan sering anda jumpai kalo di web programing :

Tag Fungsi

<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan

13
<!DOCTYPE
digunakan untuk Mendefinisikan tipe document HTML5
html>

Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara

<a>link</a>
satu dokumen HTML ke dokumen HTML yang lain (membuat link)

.<b> .. </b> membuat teks menjadi tebal

<p> .. </p> membuat pargraf

<h1> .. </h1> membuat heading satu

<h2> .. </h2> membuat heading dua

<body> mendefinisikan body/isi dokument html

<head> mendefinisikan bagian kepala dokumen html

<title> memdefiniskan judul halaman

<div> mendefinisikan halaman

<link> mendefinisikan hubungan antar dokumen

<script> Mendefinisikan client-side script

<table> mendefinisikan table

<th> Mendefinisikan sel header di dalam sebuah table

14
 <td> Mendefinisikan sel di dalam sebuah table

<tr> Membuat baris di dalam sebuah table

<ul> Mendefinisikan daftar dalam format bullet

<li> mendefinisikan list

Element HTML
Element pada HTML merupakan isi atau objek yang berada pada tag. maksudnya, isi yang ada
diantara tag pembuka dan tag penutup di sebut dengan elemen misalkan :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>

pada contoh diatas <h2> adalah heading dua <h2> merupakan element h2 dan isinya ini adalah
heading dua. dalam element ini bisa berupa text ataupun tag lain misalnya <link> dan sebagainya.

Atribut pada HTML

Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi ini bisa
berupa instruksi untuk memberikan efek warna, ketebalan, dll. atribut bisanya memiliki

15
2 bagian yaitu nama dan nilai, dapat ditulis dengan ( name=”value” ). penulisan nilai/value diapit
oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua).

Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan
element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2 align="center">Pengenalalan atribut HTML</h2>
</body>
</html>

Perhatikan pada syntax di atas :

 <h2> adalah tag heading 2

 align adalah nama dari atribut
 center adalah nilai/value dari atribut
 “Pengenalan atribut HTML” adalah element dari tag h2

Tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang bergelut di
web programing akan sering menjumpai tag yang didalamnya terdapat atribut.

Heading Pada HTML

Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting
pada halaman web. element tag heading ini memiliki 6 tingkatan yang berurutan yaitu :

16
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman
web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya
tag/element
<h1> lebih besar dari element/tag <h2> dan seterusnya.

Penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing

tag/element heading yang sering digunakan pada pengolahan halaman web :

<h1> adalah heading yang digunakan untuk penulisan judul utama dari dokumen

<h2> adalah heading yang digunaakan sebagai sub dari <h1>

<h3> adalah heading yang digunakan sebagai sub dari <h2>

untuk penggunaan <h4><h4><h5><h6> tergantung programmer sendiri untuk memperindah

halaman web sesuai keperluan.

berikut contoh penerapan masing-masing element/tag heading :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>

17
 Gambar 5 Heading 1

Contoh lainnya:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
<h2>ini adalah heading 2</h2>
<h3>ini adalah heading 3</h3>
<h4>ini adalah heading 4</h4>
<h5>ini adalah heading 5</h5>
<h6>ini adalah heading 6</h6>
</body>
</html>

Dan hasilnya saat di jalankan pada browser:

18
 Gambar 6 contoh penulisan heading

Dari contoh diatas, dapat anda lihat perbedaan antara masing-masing heading.
penulisan heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan
element heading di dalam tag lain :

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="[Link] adalah heading 1 </h1></a>
</body>
</html>

19
 Gambar 7 Belajar HTML Heading Pada HTML

contoh diatas yaitu penggunaan tag heading yang berada dalam tag <a>. Sedangkan atribut href digunakan
untuk menghubungkan dengan dokumen/link yang lain. ketika diklik pada
“ini adalah heading 1” maka halaman akan di alihkan ke halaman [Link]

Format Text Pada HTML

Dalam penuliasan HTML sangat sering menggunakan format text didalamanya. baik itu dalam penulisan judul,
ataupun isi dari content/halaman website sendiri. penjelasan dan contoh dari Format Text Pada HTML.
Berikut beberapa penjelasan dan contoh dari Format Text Pada HTML.

Format Text Pada HTML

Ada beberapa format text yang umumnya di gunakan, di antaranya adalah:

Membuat huruf tebal (bold) pada HTML

Untuk membuat teks menjadi tebal pada tampilan halaman web, bisa menggunakan tag <b> berikut contoh
syntax HTML untuk membuat format text tebal :

20
 <b>ini text tebal</b>

Membuat huruf miring (italic) pada HTML

untuk membuat teks miring pada HTML, kita bisa menggunakan tag <i>. contohnya:

<i>ini text miring</i>

Membuat huruf bergaris bawah (underline) pada HTML

untuk membuat teks underline/garis bawah pada HTML kita bisa menggunakan tag <u>.
contohnya :

<u>ini text underline</u>

berikut format text yang sering digunanakan dalam HTML.

tag Description

<b> format text bold/tebal

<i> format text italic/miring

<u> format text underline/garis bawah

<small> format text kecil

<strong> format text yang hampir sama dengan format bold

21
 <sub> format subscripted teks

<sup> format superscripted teks

<ins> format text garis bawah

<del> format text dengan garis di tengah

<mark> format text yang berwarna

Berikut contoh penulisan tag/element format text di yang sudah di pelajari di atas :

<!DOCTYPE html>
<html>
<head>
<title>belajar format format text</title>
</head>
<body>
<b>ini format format text tebal</b><br/>
<i>ini format text italic</i><br/>
<u>ini format text underline</u><br/>
<em>ini format text em</em><br/>
<small>ini format text small</small><br/>
<strong>ini format text strong</strong><br/>
_{ini format text sub}<br/>
^{ini format text sup}<br/>
<ins>ini format text ins</ins><br/>
<del>ini format text del</del><br/>
<mark>ini format text mark</mark>
</body>
</html>

22
 Gambar 8 Belajar HTML Format Text Pada HTML

Membuat Paragraf Pada HTML

Untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu
sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu
tag untuk membuat penulisan dalam bentuk paragraf. tag paragraf ini terdapat 3 atribut/tag
yang bisa dikombinasikan langsung dengan tag paragraf <p>. atribut tag tersebut yaitu :

 Membuat paragraf rata kiri menggunakan <p align=”left”> .. isi paragraph </p>
 Membuat paragraf rata kanan menggunakan <p align=”right”> .. isi paragraph </p>
 Membuat paragraf rata tengah menggunakan <p align=”center”> .. isi paragraph </p>
 Membuat paragraf rata kiri kanan menggunaan <p align=”justify”> .. isi paragraph </p>

Perhatikan contoh berikut :

Paragraf menggunakan <p>. berikut inplementasi <p> dalam dokumen HTML :

<!DOCTYPE html>
<html>
<head>
23
<title>belajar membuat paragraf</title>
</head>
<body>
 Gambar 9 Membuat Paragraf Pada HTML

Dari contoh di atas dapat anda lihat bahwa penulisan paragraf pertama dan paragraf kedua di
pisahkan. untuk memisahkan antara paragraf satu dan dua ini menggunakana <p>.

24
Jenis paragraph
Berikut ini adalah beberapa contoh jenis paragraf pada HTML.

Paragraf rata kiri

<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>

Paragraf rata kanan

<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>

Paragraf rata tengah

<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>

Paragraf rata kiri kanan

<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>

Berikut contoh lengkapnya :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat paragraf</title>
</head>
<body>
<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>

25
 Gambar 10 Contoh paragraf pada HTML

Membuat Tabel Pada HTML

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk
baris dan kolom. pada HTML, untuk pembuatan tabel menggunakan tag <table>, dan
menggunakan tag <tr> untuk membuat baris dan <td> untuk membuat kolom. Untuk lebih mudah
memahami dalam pembuatan table pada HTML, berikut penjelasan tag yang terlibat dalam
pembuatan tabel pada HTML. Tag <table> merupakan tag pembuka dalam membuat sebuah
tabel pada html, tanpa <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan
baik. <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris
dalam table HTML. <td> atau dikenal dengan table data merupakan tag yang digunakan untuk
membuat kolom dalam baris. Dan tag <th> untuk membuat table head atau bagian kepala pada
tabel.

Perhatikan contoh pembuatan table pada HTML berikut :

26
 <!DOCTYPE html>
<html>
<head>
<title> Membuat tabel di HTML </title>
</head>
<body>
<table border=”1”>
<tr>
<td>baris 1 / kolom 1</td>
<td> baris 1 / kolom 2</td>
<td> baris 1 / kolom 3</td>

</tr>
<tr>
<td>baris 2 / kolom 1</td>
<td> baris 2 / kolom 2</td>
<td> baris 2 / kolom 3</td>

</tr>
<tr>
<td>baris 3 / kolom 1</td>
<td> baris 3 / kolom 2</td>
<td> baris 3 / kolom 3</td>

</tr>
<tr>
<td>baris 4 / kolom 1</td>
<td> baris 4 / kolom 2</td>
<td> baris 4 / kolom 3</td>

</tr>
</table>
</body>
</html>

Dan coba jalankan pada browser.

27
 Gambar 11 Membuat Tabel Pada HTML

Dari contoh diatas dapat kita lihat sendiri fungsi dari masing-masing tag yang sudah di bahas
diatas. namun pada tag tabel dengan atribut border=’1’. atribut border ini digunakan untuk
memberikan garis pada table dan nilai 1 ini merupakan nilai dari garis tepi pada tabel yang kita
buat tadi (1 untuk membuat garis. Dan 0 jika tidak ingin menggunakan garis).

Dan berikut ini adalah contoh membuat tabel HTML dengan menggunakan tag head atau bagian
kepala tabel.

Contoh penerapannya :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat tabel di html</title>
</head>
<body>
<table border="1">
<tr>
<th>No Pasien</th>
<th>Nama Pasien</th> 28
<th>Alamat</th>
</tr>
Membuat Hyperlink Pada HTML

Hyperlink yang sering di kenal dengan link yaitu menghubungkan antara satu dokumen dengan
dokumen yang lain pada HTML. Tujuan dari hyperlink ini membuat sebuah teks atau gambar yang
ketika diklik akan di alihkan ke halaman tertentu yang sudah di tetapkan dalam penulisan hyerlink
tersebut.

Hyperlink sendiri ditulis dengan menggunakan tag <a>. tag <a> ini selalu di ikuiti oleh atribut href,
dimana didalam href (hypertext reference) ini lah yang akan di isikan alamat yang dituju ketika text
atau gambar di klik. berikut cara penulisan untuk membuat hyperlink :

<a href="[Link] disini</a>

ketika di klik pada kata “klik disini” maka halaman akan di alihkan ke halaman [Link].

hal ini sesuai dengan ketentuan yang telah kita tetapkan pada atribut href.

Membuat List Pada HTML

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan
untuk menampilkan data secara berurutan ke bawah. Dalam HTML penulisan list menggunakan tag
<li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu
ordered list dan unordered list.

Ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang
digunakan dalam ordered list ini yaitu <ol>.

unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di
awalnya. tag yang digunakan untuk membuat unordered list yaitu <ul>

29
untuk lebih mudahnya, perhatikan contoh penulisan list dalam HTML berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>

Gambar 12 Membuat Unordered List Pada HTML (ul)

contoh di atas menggunakan <li> untuk membuat list pada HTML. sendiri bahwa tampilan standar dari list pada
HTML di awali dengan tanda titik.

30
Ordered List <ol>
Menampilkan daftar list dan diawali dengan huruf atau angka, berikut contoh untuk
implementasi ordered list pada HTML.

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ol>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ol>
</body>
</html>

Gambar 13 Ordered list HTML

31
 Unordered list <ul>
Unordered list adalah jenis list HTML dalam bentu titik pada awal list. berikut contoh unordered
list pada HTML :

<!DOCTYPE html>
<html>
<head>
<title>belajar membuat list</title>
</head>
<body>
<ul>
<li>belajar HTML</li>
<li>belajar PHP</li>
</ul>
</body>
</html>

Gambar 14 Membuat List Pada HTML

Dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada HTML.
Penggunaan list pada HTML tidak hanya untuk membuat daftar saja. Dengan
menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada
halaman web.

32
Membuat Form pada HTML

Form merupakan tempat penginputan data sebelum diproses oleh sistem. salah satunya adalah
form login, form comment, form data user, dan lain sebagainya. untuk proses penginputan data
dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk
membuat form ini adalah tag <form> yang didalamnya bisa berupa <input>,
<textarea>,<opstion> dan <select>.

Tag <form>
Dalam tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan
biasanya nilai yang di kirim berupa alamat dari sebuah halaman untuk memproses data inputan.
dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim
oleh web browser. nilai dari method ini biasanya get atau post.

Tag <input>
Tag input merupakan tag yang akan digunakan dalam form pengisian. tag input ini memiliki banyak
sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radio button, sampai
dengan tombol submit berada dalam tag <input>.

Berikut beberapa bentuk dalam tag <input> yang di kategorikan berdasarkan atribut :

<input type=’text’> Form ini bersifat menerima inputan text misalkan: username, nama,
tempat
lahir atau berupa inputan text yang pendek.
<input type=’password’> Form ini bersifat menerima inputan password. Setiap text yang di input
akan di tampilkan sebagai tanda titik(di samarkan), textbox ini biasanya
digunakan untuk membuat inputan password.
<input type=’submit’> inputan ini berupa tombol submit untuk memproses data inputan dari
form.

<input type=’checkbox’> inputan berupa checkbox yang dapat di ceklis oleh user. Inputan ini
memungkinan user untuk men-checklist banyak pilihan sekaligus.
<input type=’radio’> inputan ini berupa radio grup, dimana user dapat memilih salah satu
dari
33
 pilihan yang disediakan dengan menggunakan form [Link] nya
adalah form pemilihan jenis kelamin.

Tag <textarea>
Tag <textarea> adalah tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini
dapat diisikan dengan lebih banyak teks didalamnya secara sekaligus. Contoh nya untuk pengisian
alamat lengkap.

berikut contoh penulisan textarea :

<textarea></textarea>

Tag <select>
Tag <select> merupakan tag yang digunakan user untuk memilih data yang sudah disediakan.
Dalam penggunakan <select> selalu diikuti oleh <option> yang digunakan untuk membuat pilihan.

berikut contoh penulisan <select> pada HTML

<select>
<option>Semarang</option>
<option>Bandung</option>
</select>

Untuk lebih memberikan pemahaman lebih tentang cara membuat form pada HTML, silahkan
perhatikan contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form pada HTML</title>
</head>
<body>
<form>
34
Nama Pasien : <input type="text" name="nama">
<br/> Alamat : <input type="text" name="alamat">
</br/>
Dan jalankan pada browser untuk melihat hasil nya.

Gambar 15 Membuat Form pada HTML

Dari contoh di atas, dapat di perhatikan bahwa ada beberapa jenis form yang terdapat pada
HTML.

35
Menampilkan Gambar Pada HTML
Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam
membuat website atau membuat aplikasi berbasis web, bayangkan apa jadinya jika website tanpa
gambar, maka akan terasa sangat membosankan. oleh karena itu teknik menampilkan gambar
pada HTML termasuk ke dalam teknik yang perlu bahkan wajib. pada tutorial cara menampilkan
gambar pada html ini akan di jelaskan tentang cara menampilkan gambar pada halaman website
menggunakan HTML.

HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. tag HTML
yang berfungsi untuk menampilkan gambar adalah tag ” <img> “. tag <img> di gunakan untuk
menampilkan gambar atau image dengan berbagai ekstensi, bisa itu jpg, png, gif, bmp, ico dan lain-
lain.

Cara Menampilkan Gambar Pada HTML

Untuk menampilkan gambar dengan HTML, anda bisa menggunakan tag <img>. kemudian
masukkan atribut “src=” pada tag <img>. atribut src berguna untuk menghubungkan dengan file
gambar, jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar. jika file
gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka
kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src
ini. tetapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan
gambar maka anda bisa menambahkan nama folder nya seperti misalnya :
“nama_folder/filegambar”. dan jika file gambar berada di luar folder menampilkan gambar
maka anda bisa menambahkan perintah “../”.
Perhatikan contoh berikut untuk cara menampilkan gambar dengan HTML. di sini sudah menyediakan sebuah file
gambar yang berekstensi .png

36
 Gambar 16 menampilkan gambar pada html

Perhatikan letak gambar di atas. Kita akan menampilkan file gambar [Link] berikut ini cara menampilkan
gambar dengan html.

<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | RS POLRI</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | RS POLRI</h1>
<img src="[Link]">
</body>
</html>

37
Gambar 17 cara menampilkan gambar dengan html

38
 dan gambar pun berhasil tampil. Anda bisa menentukan ukuran gambar yang tampil dengan
menambahkan atribut height=”” untuk mengatur tinggi gambar, dan menambahkan aribut
width=”” untuk menentukan lebar gambar yang tampil.
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar pada HTML | RS POLRI</title>
</head>
<body>
<h1>Menampilkan gambar pada HTML | RS POLRI</h1>
<img src="[Link]" height="300px" width="500px;">
</body>
</html>

Tag Iframe Pada HTML

Iframe merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa
harus membuka website tersebut. jadi apabila anda ingin menampilkan website lain dalam
halaman web anda maka anda bisa menggunakan tag <iframe> untuk menampilkannya. caranya
sangat mudah, anda hanya perlu menambahkan atribut src=”” pada tag pembuka <iframe>
untuk meletakkan link url dari website yang ingin anda tampilkan. cara penulisan tag iframe di
awali dengan tag iframe pembuka “<iframe>” dan di akhiri dengan tag iframe penutup </iframe>.

Perhatikan contoh dan penjelasan berikut ini tentang cara menggunakan tag <iframe>.

39
 <!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Tag Iframe Pada HTML | RS POLRI</title>
</head>
<body>
<h1>Belajar HTML Tag Iframe Pada HTML | RS POLRI</h1>
<iframe src="[Link] height="500px" width="1000px"></iframe>
</body>
</html>

Gambar 18 belajar html tag iframe pada html

Perhatikan pada contoh di atas. untuk membuat atau menggunakan tag <iframe> untuk
menampilkan halaman website ada halaman web anda anda bisa menggunakan tag <iframe> dan
kemudian memberikan atribut src=”” untuk meletakkan url dari halaman website yang ingin anda
tampilkan. pada contoh ini kita akan menampilkan halaman website

40
 [Link] sehingga contoh nya seperti berikut. Belajar HTML Tag Iframe Pada
HTML

<iframe src="[Link] height="500px" width="1000px"></iframe>

Menghubungkan HTML dengan CSS

Pelatihan Menghubungkan HTML dengan CSS ini merupakan pelatihan HTML yang bisa di bilang
termasuk ke dalam salah satu tutorial HTML yang paling terpenting. karena jika kita tidak
mengetahui cara menghubungkan HTML dengan CSS secara otomatis pasti kita tidak mengetahui
bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML tidak
terhubung dengan CSS. Bukan hanya HTML sebenarnya. tetapi PHP juga sama, PHP yang akan kita
gunakan untuk membuat website. Setelah anda selesai pelatihan HTML ini di asumsikan untuk
melanjutkan ke pelatihan belajar css dan pelatihan belajar PHP, agar materi yang di pelajari
menjadi terurut dan terstruktur.

Setelah anda mempelajari pelatihan belajar html menghubungkan html dengan css ini
selanjutnya akan di jelaskan lagi pada pelatihan selanjutnya tentang Class dan id pada html.
Pemahaman tentang Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum
anda melangkah lebih jauh mempelajari CSS.

Cara Menghubungkan HTML dengan CSS

Untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah. gunakan tag <link>
untuk menghubungkan html dengan css. tag link di letakkan pada bagian element head pada
struktur HTML. baiklah perhatikan contoh cara menghubungkan html dengan CSS berikut ini. Buat
sebuah file html atau php terserah anda. karena ini merupakan pelatihan HTML maka
menggunakan file HTML untuk di hubungkan dengan CSS. di sini membuat file html dengan nama
[Link]. kemudian buat sebuah file css lagi dengan nama lain, di sini kita membuat file css
dengan nama [Link]. jadi ada dua buah file yang di buat yaitu file [Link] dan file [Link].

41
 [Link]

<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

</body>
</html>

Contoh di atas merupakan cara menghubungkan file html/php dengan CSS. pada contoh di atas
membuat tag link yang berfungsi untuk menghubungkan file html dengan file css yang kita
inginkan.

<link rel="stylesheet" type="text/css" href="[Link]">

atribut rel=”stylesheet” dan type=”text/css” merupakan deklarasi untuk menjelaskan bahwa file
yang kita panggil atau hubungkan adalah file stylesheet atau css. dan pada atribut href digunakan
untuk meletakkan lokasi dan nama file css yang ingin kita hubungkan. pada contoh ini akan
menghubungkan file html dengan file css yang sudah diberinama dengan [Link].

Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong
belum berisi element apapun selain struktur dasar html. untuk mencoba apakah file css sudah
berhasil terhubung dengan file html maka akan kita cek dengan cara berikut ini. kita buat contoh
sederhana dulu dengan cara membuat sebuah element heading 1, dan kemudian kita beri warna
text heading 1 tersebut dengan warna orange.

42
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Menghubungkan HTML dengan CSS | Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
<h1>Belajar HTML menghubungkan html dengan css</h1>

[Link]

h1{
color: orange;
font-family: sans-serif;
text-align: center;
}

Gambar 19 belajar html menghubungkan html dengan css

File html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang kita buat
untuk mengatur element heading 1 html di atas. syntax color pada css di atas merupakan perintah

43
untuk menetapkan warna font/text, font-family untuk mengatur font yang di gunakan dan text-
align untuk mengatur rata text. syntax css di atas merupakan syntax css yang paling dasar yang
akan kita pelajari.

Mengenal Class dan Id Pada HTML

Class dan Id, sesuai dengan yang di jelaskan pada tutorial sebelumnya yaitu cara menghubungkan
HTML dengan CSS di jelaskan bahwa class dan id sangat lah penting. oleh sebab itu pada tutorial
belajar HTML mengenal class dan id pada html ini akan di jelaskan tentang apa sih pengertian dari
class dan id pada HTML? dan apa perbedaan dari class dan id pada HTML.

Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di sini adalah element-
element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar dapat di
manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima
buah kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna
kotak yang ketiga, di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama pada
kotak anda agar bisa di ubah dan kotak yang lain tidak akan berubah.

Mengenal Class dan Id Pada HTML

Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan
tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di
sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil
sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id
hanya bisa di berikan pada satu element saja, perhatikan pada contoh berikut untuk memberikan
pemahaman lebih tentang class dan id pada html ini.

44
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Mengenal Class dan Id pada HTML | Pelatihan Full Stack Devekoper</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>Pelatihan HTML & CSS</h1>
<!-- contoh penggunaan class -->
<div class="kotak">kotak 1</div>
<div class="kotak">kotak 2</div>
<div class="kotak">kotak 3</div>

<!-- contoh penggunaan id -->

<div id="kotak">Kotak 4</div>
</body>
</html>

[Link]
h1{
color: orange;
font-family: sans-serif;
text-align: center;
}

.kotak{
padding: 50px;
width: 100px;
color: #fff;
margin: 10px;
background: orange;
} 45

#kotak{
width: 400px;
dan jika di jalankan pada browser

Gambar 20 Belajar HTML mengenal class dan id pada html

Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class yang
kita beri nama “kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak juga.
maka perbedaannya di sini akan tampak, bahwa class bisa di panggil sekaligus, ini di
buktikan dengan kotak 1,2 dan 3 di beri tanda class yang sama yaitu class kotak. dan kotak 4 kita
beri tanda dengan id kotak.

46
Selanjutnya pada css juga dapat anda lihat, class di panggil dengan tanda titik “.” dan id di
panggil dengan tanda pagar “#”.

Membuat Symbol pada HTML

Selain menyediakan kode warna, HTML juga menyediakan kode untuk membuat symbol. langsung
saja pada kode html yang di sediakan html untuk membuat simbol dengan html. ada dua jenis
kode simbol html yaitu number dan entity, berikut ini adalah beberapa kode html yang bisa di
gunakan untuk membuat simbol.

Daftar beberapa kode simbol HTML

Symbol Number Entity

∀ &#8704; &forall;

∂ &#8706; &part;

∃ &#8707; &exist;

∅ &#8709; &empty;

∇ &#8711; &nabla;

∈ &#8712; &isin;

∉ &#8713; &notin;

∋ &#8715; &ni;q

47
∏ &#8719; &prod;

∑ &#8721; &sum;

Α &#913; &Alpha;

Β &#914; &Beta;

Γ &#915; &Gamma;

Δ &#916; &Delta;

Ε &#917; &Epsilon;

Ζ &#918; &Zeta;

© &#169; &copy;

® &#174; &reg;

€ &#8364; &euro;

™ &#8482; &trade;

← &#8592; &larr;

↑ &#8593; &uarr;

48
 → &#8594; &rarr;

↓ &#8595; &darr;

♠ &#9824; &spades;

♣ &#9827; &clubs;

♥ &#9829; &hearts;

♦ &#9830; &diams;

Untuk membuat symbol html anda bisa menggunakan kode yang berbentuk number atau entity.
Perhatikan contoh membuat symbol dengan html berikut ini. Belajar HTML Membuat symbol pada
HTML

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Membuat symbol pada HTML | [Link]</title>
</head>
<body>
<h1>Membuat symbol pada HTML<br/>Pelatihan HTML</h1>
<p>&#9824;</p>
<a href="#">Simbol panah &#8594;</a><br/>
<a href="#">Simbol panah &rarr;</a><br/>
&#8704;<br/>
&#8711;<br/>
&#8719;<br/>

49
 &#174; <br/>
&#9829;<br/>
&#8594;<br/>
&#8593;<br/>
&#8592;<br/>
&#8482;<br/>
</body>
</html>

Dan jika di jalankan pada browser maka hasilnya:

Gambar 21 belajar html membuat symbol pada html

Dapat di lihat pada contoh di atas, simbol html pun terbentuk sesuai dengan kode symbol

html yang di gunakan. Belajar HTML Membuat symbol pada HTML.

50
 CSS

Pengertian dan Pengenalan CSS

CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan namanya CSS memiliki sifat
”style sheet language” yang berarti bahasa pemrograman yang di gunakan untuk web design. CSS
adalah bahasa pemrograman yang di gunakan untuk men-design sebuah halaman website. dalam
mendesign halaman website, CSS menggunakan penanda yang kita kenal dengan id dan class.
seperti yang sudah kita pelajari tentang pengenalan id dan class pada tutorial edisi belajar HTML
dasar sebelumnya di buku ini.

Seiring berkembang nya dunia pemrograman dan teknologi, CSS tidak cuma di gunakan di HTML
dan XHTML saja. tapi sudah bisa di gunakan untuk mendesign tampilan aplikasi android. CSS di
akses menggunakan id atau class. untuk contoh penulisannya perhatikan pada contoh berikut ini.

Fungsi dan Kegunaan CSS

CSS dapat mengubah font, ukuran font, warna dan format font. mengatur ukuran layout, lebar,
tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive
dan masih banyak lagi yang dapat di lakukan oleh CSS yang tidak akan habis di tuliskan semuanya
di tutorial belajar CSS dasar ini.

Untuk mendesain font dapat dilakukan dengan mendefinisikan font , untuk mengatur warna bisa
menggunakan color, margins digunakan untuk mengatur jarak pada luar element tertentu.
mengatur warna atau gambar pada latar belakang bisa menggunakan “background”. mengatur
ukuran font gunakan “font size”. jenis font menggunakan “font-family” dan banyak lagi lainnya.

Cara Penggunaan CSS

File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file HTML
atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.
<link rel="stylesheet" type="text/css" href="[Link]" />

51
Dengan tag <link> seperti di atas di gunakan untuk menghubungkan file HTML dengan file CSS.
Syntax di atas di letakkan pada file html. pada atribut rel dan type di tag link di atas di gunakan
untuk mendefinisikan bahwa yang di panggil atau yang di hubungkan adalah file Style sheet atau
CSS. kemudian atribut href di gunakan untuk meletakkan letak file CSS. pada contoh di atas file
[Link] terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.

jika file css terletak di luar folder maka bisa menghubungkanya dengan

href="../[Link]"

jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah ” assets “. maka
untuk menghubungkannya

href="assets/[Link]"

Cara Penulisan CSS

CSS (Cascading Style Sheet) merupakan sebuah bahasa pemrograman web yang memiliki fungsi
dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti elemen dan
tag. dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML.
Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat di lakukan
menggunakan CSS untuk mempercantik atau men-design halaman website.

CSS menggunakan selector (id dan class) untuk menentukan element yang akan di modifikasi atau
yang akan di beri sentuhan css. jika di ibaratkan HTML sebagai tiang pada

52
sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah
tersebut. Ada tiga teknik metode penulisan CSS, yaitu :

 Inline CSS Style

 Internal CSS Style
 External CSS Style

Ketiga teknik metode cara penulisan CSS (inline, internal, external) tersebut akan kita bahas dan
pelajari pada tutorial ini.

Teknik penulisan CSS Inline Style

Teknik penulisan syntax css dengan Inline style adalah teknik cara penulisan syntax CSS
yang tidak memerlukan selector (id dan class). Sehingga syntax CSS di letakkan atau langsung di
sisipkan pada element HTML. syntax CSS di letakkan di dalam atribut style=””.

Contoh penulisan inline CSS style :

Untuk membuat contoh penulisan CSS dengan gaya inline caranya sediakan sebuah file HTML atau
PHP. di sini menggunakan HTML. membuat sebuah file dengan nama [Link].

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Inline Style</title>
</head>
<body>

<h1 style="color:blue">Belajar CSS Dasar Di <a href="[Link] Full

Stack Developer</a></h1>

</body>
</html>

53
 perhatikan pada contoh di atas. syntax css di letakkan dalam element h1 menggunakan atribut
style=””. Perintah color adalah perintah css yang berfungsi untuk mengatur warna font. jadi
pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur
menjadi warna biru (Blue).

dan saat di jalankan maka hasilnya sebagai berikut:

Gambar 22 contoh penulisan css inline style

Teknik penulisan CSS Internal Style

Teknik penulisan syntax CSS dengan Internal style adalah teknik cara penulisan syntax css yang di
letakkan satu file dengan file html atau file php. syntax CSS di letakkan di dalam tag <style> dan di
akhiri dengan tag </style>. biasa nya tag <style> .. </style> di letakkan pada bagian tag <head>
pada HTML.

Contoh penulisan internal CSS Style :

54
 <!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color: 10px;
}

.box{
background: red;
padding: 10px;
}
</style>
</head>
<body>

<div class="box">
<h1 id="tulisan">Belajar CSS Dasar Di <a href="[Link] Full
Stack Developer </a></h1>

</div>
</body>
</html>

Perhatikan contoh penulisan internal css style di atas. syntax css di letakkan satu file dengan file
html. syntax css di letakkan di dalam tag <style>. syntax css padding berfungsi sebagai pengatur
jarak pada sisi dalam element. pada contoh ini kita memberikan jarak sebesar 10px atau 10 pixel.
CSS memanggil selector class dengan tanda titik ” . ” dan memanggil selector id dengan tanda
pagar ” # “.

<style type="text/css">
#tulisan{

55
 color: 10px;
}

.box{
background: red;
padding: 10px;
}
</style>
Hasilnya

Gambar 23 Contoh penulisan CSS internal style

Teknik penulisan CSS External Style

Teknik penulisan Syntax CSS dengan External Style adalah teknik penulisan yang memisahkan file
css dan html. penggunaan css yang baik adalah menggunakan teknik penulisan CSS ini karena
kode program kita tidak akan berantakan karena syntax css di simpan ada file css. File css dan
html di hubungkan menggunakan

<link rel="stylesheet" type="text/css" href="file css anda">

Contoh penulisan CSS menggunakan External Style :

56
Untuk membuat contoh penulisan CSS dengan External style siapkan satu buah file html dan
satu buah file css. membuat sebuah file dengan nama [Link] dan [Link]

Gambar 24 Belajar CSS Dasar Cara Penulisan CSS

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

<div class="box">
<h1 id=”tulisan”> Pelatihan CSS Dasar <a href=[Link] Full Stack
</a></h1>
</div>
</body>
</html>

57
[Link]

#tulisan{
color: 10px;
}
.box{
background: red;
padding: 10px;
}

dan jika di jalankan maka hasilnya

Gambar 25 Contoh penulisan CSS external style

Penjelasan ini sangat berguna sebelum anda melanjutkan ke tutorial CSS selanjutnya pada
buku ini.

Mengubah Background Dengan CSS

Background atau latar belakang pada sebuah halaman website merupakan salah satu bagian
yang wajib di design untuk menghasilkan sebuah halaman website yang terlihat menarik dan
modern. ada beberapa cara mempercantik background atau latar belakang website. bisa
mempercantik background website dengan menggunakan gambar. jika tidak ingin

58
menggunakan gambar bisa juga dengan mengubah warna background dengan bantuan CSS.
untuk mengubah background dengan CSS, gunakan property background pada CSS. property
background selain di gunakan untuk mengubah background body website, bisa juga di gunakan
untuk mengubah gambar background pada sebuah elemen HTML yang di inginkan.

Cara mengubah background dengan CSS akan di jelaskan bagaimana cara mengubah
background dengan menggunakan CSS. langsung saja masuk ke cara mengubah background
menggunakan CSS. buat sebuah file html dengan nama file html nya terserah anda. Misalnya
kita beri nama [Link]. kemudian buat sebuah file css dengan membuat file css dengan
nama [Link].

Mengubah warna background dengan CSS

Perhatikan penjelasan berikut ini untuk cara mengubah warna background dengan
menggunakan CSS.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Merubah warna background dengan CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

<h1>Tutorial mengubah warna background dengan CSS</h1>

</body>
</html>

[Link]

body{
background: blue;
color: white;
59
}
Maka hasilnya

Gambar 26 cara merubah warna dengan css

Pada syntax css di atas kita menentukan body yang akan di modifikasi kemudian memberikan
property background dengan value blue (biru) dan warna color font dengan warna white (putih).

Mengubah gambar background dengan CSS

Pada sub judul mengubah gambar background dengan css ini akan di jelaskan bagaimana cara
mengubah background sebuah halaman website dengan menggunakan gambar. oleh sebab itu
anda harus menyediakan sebuah file gambar untuk dijadikan background untuk halaman
website anda. di sini sudah menyediakan sebuah gambar sederhana yang akan jadikan gambar
pada background. letakkan file gambar satu folder dengan file html dan css agar tidak kebingungan
nantinya. nama file gambarnya adalah [Link]

60
 Gambar 27 cara membuat background gambar dengan css

[Link]
<!DOCTYPE html>
<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

<h1>Membuat background gambar dengan CSS</h1>

</body>
</html>

[Link]
body{
background: url('[Link]'); color:
#fff;
}

61
 perhatikan pada syntax css di atas. untuk membuat gambar background gunakan syntax

background: url('[Link]');

Gambar 28 tutorial cara merubah background gambar dengan css

Gambar pun berhasil di pasang sebagai background halaman.

Margin dan Padding pada CSS

Margin dan padding merupakan yang paling banyak di gunakan dalam mendesain sebuah website
dengan menggunakan CSS. karena margin dan padding di gunakan untuk mengatur sisi dalam dari
pada sebuah element dan mengatur sisi sebelah luar dari sebuah element.

Mengenal Margin pada CSS

Margin adalah sisi luar dari sebuah element. misalnya anda ingin mengatur jarak antar element.
anda bisa menggunakan syntax margin untuk mengaturnya. terdapat beberapa sisi luar margin
yaitu, margin atas di tuliskan pada css dengan ‘margin-top’, margin bawah atau jarak luar bagian
bawah di tulis di CSS dengan ‘margin-bottom’, ‘margin-left’ sebagai jarak luar sebelah kiri element,
dan ‘margin-right’ adalah sisi luar pada bagian sebelah kanan. tetapi jika anda hanya
menggunakan syntax ‘margin’ saja maka akan secara otomatis mengatur jarak atas,bawah, kiri dan

62
kanan element. berikut ini adalah Contoh penggunaan margin pada CSS

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Margin CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

<div class="box">
<h1>Ini adalah box</h1>
</div>

<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>
</body>
</html>

[Link]

.box{
background: blue;
height: 200px;
width: 300px;
margin: 20px;
}

.box-dua{ 63
background: red;
height: 100px;
 Gambar 29 mengenal margin pada css

perhatikan pada contoh di atas. pada kotak dua kita mengatur margin-left atau margin kiri
sebesar 70px atau 70 pixel. dan pada kotak yang berwarna biru kita memberikan margin atau jarak
luar segala sisi sebesar 20px.

Mengenal Padding pada CSS

Padding adalah sisi dalam dari sebuah element. kita bisa menggunakan syntax padding
untuk mengatur jarak pada sisi dalam sebuah element yang kita tentukan. Sama seperti
margin yang memiliki sisi-sisi . seperti top, left, right, bottom. jenis padding yaitu padding atas di
tuliskan pada css dengan ‘padding-top’ yang berarti mengatur sisi dalam sebelah atas sebuah
element, pading bawah atau jarak dalam bagian bawah di tulis di CSS dengan ‘padding-
bottom’, ‘padding-left’ sebagai jarak dalam sebelah kiri element, dan ‘padding-right’ adalah sisi
luar pada bagian sebelah kanan. jika anda hanya menggunakan syntax ‘padding’ saja maka akan
secara otomatis mengatur jarak atas,bawah, kiri dan kanan element yang bagian dalam. berikut ini
adalah Contoh penggunaan padding pada CSS

64
[Link]

<!DOCTYPE html>
<html>
<head>
<title>Padding CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Pelatihan Full Stack Developer</h1>
<div class="box">
<h1>Ini adalah box</h1>
</div>

<div class="box-dua">
<h1>Ini adalah box dua</h1>
</div>

</body>
</html>

[Link]

h1{
text-align: center;
}

.box{
background: blue;
height: 200px;
width: 300px;
padding: 20px;
}

.box-dua{

65
 background: red;
height: 100px;
width: 600px;
padding-left: 70px;
}

Gambar 30 Belajar CSS Margin dan Padding pada CSS

sekian contoh dan penjelasan tentang margin dan padding pada tutorial belajar css margin dan
padding pada css.

Mengatur Font dengan CSS

Pada tutorial belajar css mengatur font dengan css ini akan di jelaskan tentang cara
melakukan pengaturan font dengan css. misalnya seperti merubah font, mengatur ukuran font,
warna font serta jenis bentuk font(garis miring, huruf tebal, tulisan miring).

66
Beberapa syntax css yang digunakan untuk mengatur font:

 font-size digunakan untuk mengatur ukuran font

 font-weight di gunakan untuk mengatur ketebalan font
 font-family untuk mengubah jenis font
 font-style digunakan untuk merubah gaya pada font.
 font-color digunakan untuk merubah warna font.
 berikut ini adalah contoh cara mengatur font dengan

css. [Link]

<!DOCTYPE html>
<html>
<head>
<title>Font CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1 class="tulisan_satu">Pelatihan Full Stack Developer</h1>
<h1 class="tulisan_dua">Pelatihan Full Stack Developer</h1>
<h1 class="tulisan_tiga">Pelatihan Full Stack Developer</h1>
</body>
</html>

[Link]

.tulisan_satu{
font-color: red;
font-family: sans-serif;
font-style: normal;
}

.tulisan_dua{
font-color: green;
67
 font-size: 24pt;
font-style: italic;
}

.tulisan_tiga{
font-color: red;
font-weight: bold;
font-style: oblique;
}

Gambar 31 tutorial css mengatur font dengan css

dapat di lihat pada contoh mengatur font dengan css di atas. untuk merubah warna font bisa menggunakan
perintah ‘color’, font-family digunakan untuk merubah jenis font, font-style digunakan untuk mengatur gaya
font, italic,normal dan lainnta. font-size digunakan untuk mengatur ukuran dari font. dan font-weight
digunakan untuk menentukan lebar dari pada font. sekian tutorial belajar css mengatur font dengan css.

68
Mengatur Hyperlink dengan CSS
Hyperlink merupakan link yang dibuat untuk mengalihkan halaman saat di klik. hyperlink atau link
dibuat dengan menggunakan tag <a> dan di akhiri dengan tag </a> di HTML. dan untuk
mempercantik, mengubah atau mengatur hyperlink dengan css. pada pelatihan belajar css
mengatur hyperlink dengan css ini akan di jelaskan tentang cara mengatur hyperlink dengan css.
mulai dari membuat warna pada link, mengubah link menjadi bentuk tombol, membuat tampilan
hyperlink berubah pada saat di klik dan sebagainya.

Ada empat status yang di miliki oleh hyperlink html dan bisa di manipulasi dengan menggunakan
css. yaitu :

 link . merupakan link aktif biasa.

 visited. merupakan status sebuah link yang telah di kunjungi.
 hover. merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
 active. merupakan status sebuah link atau hyperlink pada saat sudah di klik.

untuk penggunaan atau pemanggilan hyperlink menurut statusnya dapat di tulis dengan syntax:

 a:link = untuk link biasa

 a:visited = merupakan status sebuah link yang telah di kunjungi.
 a:hover = merupakan status sebuah link pada saat diletakkan cursor mouse di atasnya.
 a:active = merupakan status sebuah link atau hyperlink pada saat sudah di klik. Berikut

ini adalah contoh mengatur hyperlink dengan css

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink CSS</title>

69
 <link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<a class="link" href="[Link] di sini</a>
</body>
</html>

[Link]

.link{
font-size: 20pt;
}
.link:hover{
color: red;
}
.link:link{
color: blue;
}

70
 Gambar 32 mengatur hyperlink dengan css

dan saat cursor di letakkan pada link

Gambar 33 saat cursor mouse di letakkan di atas link

design link dengan css

71
 <!DOCTYPE html>
[Link]
<html>
<head>
<title>Hyperlink CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<a class="contoh-link" target="_blank" href="[Link] di sini</a>
</body>
</html>

[Link]

.contoh-link,
.contoh-link:link,
.contoh-link:active,
.contoh-link:visited{
font-size: 20pt;
background: #1ABC9C;
color: #fff;
text-decoration: none;
padding: 10px;
font-family: sans-serif;
}

.contoh-link:hover{
background: #16A085;
}

72
Mengatur Format Text dengan CSS
Pada tutorial belajar CSS Mengatur Format Text Dengan CSS ini akan di jelaskan tentang
penggunaan css dalam mengatur atau memodifikasi text dengan tujuan agar format text dapat
menjadi seperti yang kita inginkan dan kita butuhkan. contohnya untuk mengatur text menjadi
justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text, mengatur
huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga mengatur dekorasi
atau design pada text. silahkan simak penjelasan berikut tentang mengatur format text yang
dapat di lakukan menggunakan CSS.

adapun beberata syntax CSS yang bisa di gunakan untuk mengatur format text diantara nya
adalah:

 color
Di gunakan untuk mengatur warna text, value yang dapat di isi berupa warna atau kode
warna.
 text-align
Di gunakan untuk mengatur posisi align pada text atau rata text, value yang bisa di isi
diantaranya adalah center untuk membuat text rata tengah, left untuk membuat text
menjadi rata kiri, right untuk membuat text menjadi rata kanan dan justify untuk membuat
text menjadi rata kanan dan rata kiri.
 text-decoration
Di gunakan untuk mengatur dekorasi text, value nya berupa none untuk membuat text tidak
memiliki dekorasi, overline untuk membuat text memiliki garis pada bagian atas text, line-
through untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis
pada bawah text(garis bawah).
 text-transform
Digunakan untuk mengatur huruf kapital pada text, value yang bisa di gunakan diantaranya
adalah uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text
menjadi huruf kecil, dan capitalize untuk membuat huruf awal pada tiap kata menjadi huruf
besar.

73
 text-indent
Digunakan untuk mengatur jarak alinea pada text, value yang bisa digunakan berupa nilai pixel
dan lainnya sesuai kebutuhan.
 text-spacing
Digunakan untuk mengatur jarak antar karakter pada text, value yang di isi berupa nilai pixel
dan lain-lain. Mengatur Format Text Dengan CSS.
 word-spacing
Digunakan untuk mengatur jarak antar kata pada text, value yang di isi juga berupa nilai pixel.
 line-height
Digunakan untuk mengatur jarak antar baris pada text value yang di isi berupa nilai.
 text-shadow
Digunakan untuk mengatur efek bayang pada text, value yang di isikan pertama mengisi nilai
untuk jarak kiri kanan, dan kedua mengisi jarak atas bawah dan yang ketiga mengisi warna.
untuk contoh penulisanya 2px 5px blue.
 vertical-align
Digunakan untuk mengatur align dalam bentuk vertikal pada text value yang digunakan adalah
left untuk membuat text rata kiri, right untuk rata atas dan center untuk rata tengah.

Untuk contoh cara mengatur format text dengan css. buat sebuah file html dan sebuah file css.
nama file [Link] dan [Link]

Cara mengubah warna text dengan CSS

untuk mengubah warna text dengan CSS perhatikan contoh berikut ini. [Link]

<!DOCTYPE html>
<html>
<head>
<title>format text CSS</title>

74
 <link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p class="tulisan_warna">Mengatur format text dengan CSS</p>
</body>
</html>

[Link]

.tulisan_warna{
color: blue;
}

dapat di lihat pada contoh di atas terdapat sebuah tag paragraf yang mempunyai class
tulisan_warna. Kemudian mengatur warna biru dengan css. Cara menggunakan text align CSS
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p class="tulisan_kiri">Mengatur format text dengan CSS</p>
<p class="tulisan_kanan">Mengatur format text dengan CSS</p>
<p class="tulisan_tengah">Mengatur format text dengan CSS</p>
<p class="tulisan_justify">
Pelatihan CSS dasar untuk Full Stack Programmer
Mengatur format text dengan CSS. belajar HTML menjadi dasar dalam pengembangan

75
 Untuk menjadi full stack programmer, pemahaman logika algoritma menjadi landasan
dasar dalam memahami bahasa pemrograman.
</p>
</body>
</html>

[Link]

.tulisan_kiri{
text-align: left;
}

.tulisan_kanan{
text-align: right;
}

.tulisan_tengah{
text-align: center;
}

.tulisan_justify{
text-align: justify;
}

76
 Gambar 34 belajar css mengatur format text dengan css

Mengatur format text dengan CSS

untuk contoh mengatur format text dengan CSS lainnya silahkan perhatikan contoh berikut.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS dasar di Pelatihan Full Stack Developer
Mengatur format text dengan CSS. belajar HTML dasar di pelatihan full stack.
Teknologi saat ini sudah menjadi komoditi bagian aktifitas kehidupan yang tidak bisa
di hilangkan

77
 Diperlukan perasn serat semua pihak untuk memanfaatkan dalam pengembanga ilmu
pengertahuan dan teknologi dengan memilik ahlak yang baik.</p>
</body>
</html>

[Link]

.tulisan_satu{
color: blue;
text-decoration: underline;
}

.tulisan_dua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
}

.tulisan_tiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}

.tulisan_empat{
text-transform: uppercase;
text-indent: 30px;
line-height: 30px;
letter-spacing: 5px;
}

78
Mengenal Position CSS
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. terkadang kita ingin
membuat atau menetapkan posisi sebuah element dengan element yang lain. maka dengan
menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai
dengan yang kita inginkan. belajar css mengenal position css.

Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah element
HTML adalah :

 static
 relative
 fixed
 absolute

secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan
posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur
terlebih dahulu. karena property lain tergantung dengan position yang di tetapkan.

Static
Position static digunakan untuk mengatur element menjadi statis secara default. element akan
mengikuti posisi normal secara default.
contoh penggunaan
<!DOCTYPE html> position static
<html>
[Link]
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>

79
 <div class="kotak">Tutorial mengenal position css di Pelatihan Full Stack Programmer</div>
</body>
</html>

[Link]

.kotak{
background: blue;
position: static;
}

Gambar 35 contoh position static css

Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.
[Link]

<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

80
 <body>
<div class="kotak">Tutorial position css di pelatihan Full Stack Developer</div>
</body>
</html>

[Link]

.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
}

Gambar 36 contoh position relative css

Fixed
Sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap. tanpa ada
perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right
pada position fixed.

81
[Link]

<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<div class="kotak">Tutorial position css di Pelatihan Full Stack Programmer</div>
</body>
</html>

[Link]

.kotak{
background: blue;
position: fixed;
left: 40px;
padding: 10px;
}

82
 Gambar 37 contoh position fixed css

Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain. position
adalah salah satu property position css yang sangat berguna. salah satunya adalah untuk membuat
menu dropdown dengan HTML dan CSS.

Gambar 38 contoh position absolute css

83
Mengubah border dengan CSS
Pada tutorial ini kita akan membahas tentang manipulasi border dengan menggunakan
CSS .CSS memungkinkan kita untuk memanipulasi atau mengubah ukuran, warna, dan gaya
atau bentuk pada border. Misalnya border yang berbentuk titik-titik, strip dan yang bermodel
biasa saja .

untuk contoh mengubah border dengan CSS silahkan simak penjelasan berikut ini.

Mengubah Border Style

Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk titik-
titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style/gaya yang bisa di
gunakan pada garis dengan CSS . untuk membuat garis sekaligus memberikan value style yang
kita inginkan kita bisa menggunakan property css border-style. silahkan perhatikan contoh di
bawah ini.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>

84
</html>

[Link]

#garis_1{
border-style:solid;
}
#garis_2{
border-style: dotted;
}
#garis_3{
border-style: dashed;
}
#garis_4{
border-style: double;
}
#garis_5{
border-style: groove;
}
#garis_6{
border-style: inset;
}
#garis_7{
border-style: outset;
}
#garis_8{
border-style: ridge;
}

Berikut adalah contoh border-style saat di jalankan pada browser

85
 Gambar 39 contoh border style css

Mengatur Ukuran Border CSS

Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-width. Berikut ini
adalah contoh garis.

[Link] cara penulisan property border-width untuk membuat ukuran

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>

86
 <p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>

[Link]

#garis_1{
border-style:solid;
border-width: 5px;
}
#garis_2{
border-style: dotted;
border-width: 10px;
}
#garis_3{
border-style: dashed;
border-width: 3px;
}
#garis_4{
border-style: double;
border-width: 9px;
}
#garis_5{
border-style: groove;
border-width: 25px;
}
#garis_6{
border-style: inset;
border-width: 5px;
}
#garis_7{
border-style: outset;

87
 border-width: 5px;
}
#garis_8{
border-style: ridge;
border-width: 50px;
}

dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.

Gambar 40 mengatur ukuran garis dengan border-width

Memberi warna pada border

untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut adalah
contoh membuat warna pada garis menggunakan CSS.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack</title>
<link rel="stylesheet" type="text/css" href="[Link]">

88
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dashed</p>
<p id="garis_4">Garis dengan gaya double</p>
<p id="garis_5">Garis dengan gaya groove</p>
<p id="garis_6">Garis dengan gaya inset</p>
<p id="garis_7">Garis dengan gaya outset</p>
<p id="garis_8">Garis dengan gaya ridge</p>
</body>
</html>

[Link]

#garis_1{
border-style:solid;
border-width: 5px;
}
#garis_2{
border-style: dotted;
border-width: 10px;
border-color:red;
}
#garis_3{
border-style: dashed;
border-width: 3px;
border-color:blue;
}
#garis_4{
border-style: double;
border-width: 9px;
border-color:green;

89
 }
#garis_5{
border-style: groove;
border-width: 25px;
border-color:#12ff00;
}
#garis_6{
border-style: inset;
border-width: 5px;
border-color:#333333;
}
#garis_7{
border-style: outset;
border-width: 5px;
border-color:yellow;
}
#garis_8{
border-style: ridge;
border-width: 50px;
border-color: violet;
}

Dan hasilnya

90
 Gambar 41 Belajar CSS Dasar : Mengubah border dengan CSS

Cara cepat memanipulasi border dengan CSS

Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita bisa
langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis dan
warna. untuk cara cepat memanipulasi border dengan csssilahkan perhatikan contoh berikut
ini.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p id="garis_1">Garis dengan gaya solid</p>
<p id="garis_2">Garis dengan gaya dotted</p>
<p id="garis_3">Garis dengan gaya dotted</p>

91
 </body>
</html>

[Link]

#garis_1{
border:1px solid blue;
}
#garis_2{
border:10px dotted green;
}
#garis_3{
border:30px dashed #12ff00;
}

perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung
menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border.

border:1px solid blue;

contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan
berwarna biru. maka hasilnya.

Gambar 42 Belajar CSS Mengubah border dengan CSS

92
Dan berikut adalah beberapa property lain yang di gunakan untuk mengubah
tampilan border dengan CSS :

 border-bottom, Mengatur garis yang terletak di bawah.

 border-bottom-color, Mengatur warna garis yang terletak di bawah.
 border-bottom-style, Mengatur style garis yang terletak di bawah.
 border-bottom-width, Mengatur ukuran garis yang terletak di bawah.
 border-color, Mengatur warna garis.
 border-left, Mengatur garis yang terletak di sebelah kiri.
 border-left-color, Mengatur warna garis yang terletak di sebelah kiri.
 border-left-style, Mengatur style garis yang terletak di sebelah kiri.
 border-left-width, Mengatur ukuran garis yang terletak di sebelah kiri.
 border-right, Mengatur garis yang terletak di sebelah kanan.
 border-right-color, Mengatur warna garis yang terletak di sebelah kanan.
 border-right-style, Mengatur style garis yang terletak di sebelah kanan.
 border-right-width, Mengatur ukuran garis yang terletak di sebelah kanan.
 border-style, Mengatur style garis.
 border-top, Mengatur garis yang terletak di sebelah atas.
 border-top-color, Mengatur warna garis yang terletak di sebelah atas.
 border-top-style, Mengatur style garis yang terletak di sebelah atas.
 border-top-width, Mengatur ukuran garis yang terletak di sebelah atas.
 border-width, Mengatur ukuran garis.

Mengubah List Dengan CSS

CSS memiliki kemampuan untuk memanipulasi atau mengubah list HTML. CSS sangat berguna
ketika anda ingin membuat daftar list dengan model tertentu misalnya list yang berbentuk
angka, titik, angka romawi dan lainnya. Dengan menggunakan CSS kita dapat memanipulasi list
HTML dengan mengubah bentuk tanda listnya. untuk mengubah list HTML dengan CSS kita bisa
menggunakan property “list-style-type” yang berarti tipe gaya list. Untuk mengubah list HTML
dengan CSS perhatikan contoh berikut ini.

93
[Link]
<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Tutorial cara mengubah list dengan CSS di <br/> Pelatihan Full Stack Developer</h1>
<!-- unordered list -->
<ul class="jenispoli">
<li>Poli Umum</li>
<li>Poli THT</li>
<li>Poli Penyakit Dalam</li>
<li>Poli Mata</li>
</ul>
<ul class="politht">
<li>Telinga</li>
<li>Hidung</li>
<li>Tenggorokan</li>
</ul>

<!-- ordered list -->

<ol class="penyakitdalam">
<li>Lambung</li>
<li>Ginjal</li>
<li>Ginjal</li>
<li>Lambung</li>

94
 <li>Usus</li>
</ol>
<ol class="kulit">
<li>Tangan</li>
<li>Kaki</li>
<li>Pipi</li>
<li>Kepala</li>
</ol>
</body>
</html>

[Link]

h1{
text-align: center;
}
[Link]{
list-style-type: square; /* list dengan bentuk square */
}
[Link]{
list-style-type: circle; /* list dengan bentuk lingkaran */
}
[Link]{
list-style-type: upper-alpha; /* list dengan bentuk alpha */
}
[Link]{
list-style-type: upper-roman; /* list dengan bentuk romawi */
}

maka hasilnya

95
 Gambar 43 Belajar CSS Mengubah List Dengan CSS

Belajar CSS Mengubah List Dengan CSS . dapat di lihat pada contoh di atas bahwa untuk
membuat list dengan bentuk square bisa menggunakan property dan value css:

list-style-type: square; /* list dengan bentuk square */

untuk membuat list dengan bentuk lingkaran kecil bisa menggunakan property dan value css:

list-style-type: circle; /* list dengan bentuk lingkaran */

untuk membuat list dengan bentuk alphabet bisa menggunakan property dan value css:

list-style-type: upper-alpha; /* list dengan bentuk alphabet */

untuk membuat list dengan bentuk angka romawi bisa menggunakan property dan value css:

list-style-type: upper-roman; /* list dengan bentuk romawi */

96
 sedikit tambahan untuk menghilangkan tanda list anda bisa menggunakan
propery dan value sebagai berikut:

list-style-type: none; /* menghilangkan tanda list */

Sekian lah penjelasan singkat tentang cara mengubah list dengan CSS.

Menggunakan Float CSS

Teknik Floating pada bagian web design merupakan sebuah kebutuhan yang paling banyak di
perlukan. float berfungsi untuk mengatur letak element secara horizontal. ada empat value yang
bisa di gunakan untuk property float, yaitu left, right, inherit dan none.

Salah satu contoh penggunaan float yang paling sering di temukan adalah ketika kita ingin mebuat
gaambar postigan website yang terletak di bagian samping tulisan konten. berikut akan diberikan
contoh tentang penggunaan float pada CSS.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Border style CSS Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Tutorial Float dengan CSS di <br/> Pelatihan Full Stack</h1>

<div class="kotak">

97
 <img class="gambar" src="[Link]">
<p>
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur
tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi
untuk memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium ) pada tahun
1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang
berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan
banyak masalah bagi developer. Karena website memiliki berbagai font, warna
background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses
yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan
masalah ini.
HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup
(fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan
tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.
Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website.
Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa
modifikasi apa pun.
Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML.
Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan
lain-lain secara terpisah.
Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu
menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil,
markup HTML bisa lebih mudah di-maintain.
Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-
masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang
digunakan pun lebih singkat, dan error dapat diminimalisir.
Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk
menerapkan berbagai macam style pada satu halaman HTML.

</p>
</div>
</body>

</html>

98
 [Link]

h1{
text-align: center;
}

.gambar{
width: 300px;
float: left;
margin-right: 10px;
}

Gambar 44 cara menggunakan float css

perhatikan pada contoh di atas. kita meletakkan float:left pada element gambar sehingga
gambar di letakkan ke samping dan text akan menjorok mengikuti element gambar.

untuk lebih lanjut anda bisa mencoba menggunakan float:right dan inherit untuk melihat
perbedaan dari masing-masing value property float CSS.

99
Cara Mengganti Font Dengan CSS
Disini kita akan mencoba belajar cara mengganti tulisan atau font pada halaman website dengan
menggunakan css. memang jika menggunakan font standart kesannya tampilan website kita akan
terlalu monoton. dan terlihat biasa saja. seperti kurang interaktif. jadi pada kesempatan kali ini
akan kita bahas cara mengubah font atau tulisan dengan css. Ada beberapa cara mengubah atau
menggunakan font dengan css. ada cara menggunakan
font yang terletak di server lain. seperti misalnya menggunakan font yang google. dengan
haya mencantumkan link font yang ingin digunakan. di sediakan oleh ada juga cara
menggunakan font standart yang tersedia secara default. dan ada juga cara mendownload font
yang di inginkan, kemudian meletakkannya pada directory project, dan menghubungkan atau
memanggilnya dengan css.

untuk mengganti font dengan css yang pertama yang harus teman-teman lakukan adalah
mendapatkan dan memilih font yang di inginkan terlebih dulu. teman-teman bisa mendowload
atau mendapatkan link nya di [Link]

Gambar 45 cara mengganti font dengan css

100
 atau bisa mendownload font yang di inginkan [Link] contoh kan beberapa
cara mengganti font atau tulisan dengan css. untuk mengubah atau mengganti font dengan css,
anda bisa menggunakan property ‘font- family’. dan kemudian pada value nya masukkan nama
font yang ingin di gunakan. pada contoh di bawah ini akan menetapkan font ‘sans-serif’ pada
element h2. dan menetapkan font ‘courier’ pada element paragraf.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | Pelatihan Full Stack</h1>

<div class="ketengah">

<hr>

<h2>Cara Mengganti Font Dengan CSS</h2>

<p>
untuk mengubah atau mengganti font dengan css, anda bisa menggunakan property ‘font-
family’. dan kemudian pada value nya masukkan nama font yang ingin di gunakan. pada contoh
di bawah ini akan menetapkan font ‘sans-serif’ pada element h2. dan menetapkan font ‘courier’
pada element paragraf
</p>

</div>
</body>
</html>

101
[Link]

body{
background: #35A9DB;
font-family: roboto;
text-align: center;
color: #fff;
}

.ketengah{
margin: 10px auto;
width: 1150px;
}

h2{
font-family: sans-serif;
}

p{
font-family: courier;
}

Maka hasilnya bias di lihat pada browser

102
 Gambar 46 cara mengubah font dengan css

perhatikan pada syntax css berikut. yang menentukan font dengan font-family

h2{
font-family: sans-serif;
}

p{
font-family: courier;
}

Cara lain mengganti font dengan css

cara lain mengganti font dengan css adalah bisa dengan mendownload font. Kemudian
meletakkan nya pada director project untuk di hubungkan dan bisa juga dengan cara
menghubungkannya langung ke link font online. Download sebuah font dan meletakkan nya pada
project contoh ini.

103
 Gambar 47 mengganti font

bisa di lihat pada gambar di atas. font dengan nama [Link]. dan selanjutnya tinggal di
hubungkan dengan css.

[Link]

<!DOCTYPE html>
<html>
<head>
<title>Cara mengganti/mengubah font dengan css | Pelatihan Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Cara mengganti/mengubah font dengan css | Pelatihan Full Stack Developer</h1>

<div class="ketengah">

<hr>

<h2>cara mengganti font dengan css</h2>

104
</div>
</body>
</html>
[Link]

body{
background: #35A9DB;
font-family: roboto;
text-align: center;
color: #fff;
}

.ketengah{
margin: 10px auto;
width: 1150px;
}

@font-face {
font-family: tulisan_keren;
src: url([Link]);
}

h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}

Seperti yang anda perhatikan pada contoh di atas. kita hubungkan font dengan fungsi url(). dan
memberikan namanya dengan tulisan_keren. jadi @font-face di sini berfungsi untuk
penghubung font. dan pada element h2 kita berikan font-family nya dengan nama
tulisan_keren tadi.

@font-face {

105
 font-family: tulisan_keren;
src: url([Link]);
}

h2{
font-family: 'tulisan_keren';
font-size: 70pt;
font-variant: inherit;
}

hasilnya

Gambar 48 mengubah font dengan css

Design Table dengan CSS

Setalah mempelajari tentang cara membuat tabel di HTML pada pembahasan yang lalu, pasti
banyak di antara kita merasa tampilan dari tabel standar HTML tampilannya masih sangat kurang
menarik. karena tampilan tabel standar dari HTML sendiri memiliki tampilan yang biasa saja. oleh
karena itu Pada pembahasan belajar CSS design tabel ini akan di jelaskan tentang bagaimana
cara design sebuah tabel HTML dengan menggunakan CSS.

Pelatihan ini akan menjelaskan cara men-design table step by step. pertama kita buat kerangka
tabel nya dulu.

<!DOCTYPE html>
<html>
106
<head>
<title>Cara Design Table Dengan CSS | Pelatihan Full Stack Developer</title>
</head>
<body>

<td>34569871</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>456987412</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>56879321</td>
<td>Pelatihan Full Stack</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

dan tampilan nya masih standar dan biasa saja.

107
Seperti yang tampak pada gambar di atas. tampilan dari table kita masih sangat standar.
sekarang kita akan langsung memulai mendesign table nya. buat sebuah file css dan langsung
hubungkan dengan file html nya.

<link rel="stylesheet" type="text/css" href="[Link]">

Sehingga file html nya menjadi seperti

berikut [Link]

<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | Pelatihan Full Stack</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Cara Design Table Dengan CSS | Pelatihan Full Stack</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No Pasien</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>12345678</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>
<td>23456897</td>

108
 <td>34569871</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>456987412</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>56879321</td>
<td>Pelatihan Full Stack</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

[Link]

/*design table 1*/

.table1 {
font-family: sans-serif;
color: #232323;

109
 border-collapse: collapse;
}

.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}

contoh di atas adalah membuat design table [Link] :

Perhatikan pada gambar di atas. table kita sudah agak kelihatan lebih bersih. Pada
element tabel kita menentukan font yang ingin kita gunakan. karena kita akan mengganti font
nya. agar lebih terlihat menarik. silahkan ganti font dengan css. dan menetapkan warna font
nya dengan warna #232323. dan yang paling penting adalah border- collapse:collapse. ini
berfungsi untuk membuat garis pada tabel menjadi sebaris.

.table1 {

110
 font-family: sans-serif;
color: #232323;
border-collapse: collapse;
}

kemudian lagi pada element table head dan table body nya kita tentukan warna
table nya dengan kode warna #999. dan memberikan padding atas bawah
sebesar 8px. dan kiri kanan 20px.

.table1, th, td {
border: 1px solid #999;
padding: 8px 20px;
}

Contoh source code design table lainnya [Link]

111
<!DOCTYPE html>
<html>
<head>
<title>Cara Design Table Dengan CSS | Full Stack Developer</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<h1>Cara Design Table Dengan CSS | Full Stack Developer</h1>
<h4>Design table 1</h4>
<table class="table1">
<tr>
<th>No Pasien</th>
<th>Nama</th>
<th>Alamat</th>
<th>Usia</th>
</tr>
<tr>
<td>12345678</td>
<td>Andi Saputra</td>
<td>Magelang</td>
<td>21</td>
</tr>
<tr>

112
 <td>34569871</td>
<td>Calvin Sanusi</td>
<td>Malang</td>
<td>29</td>
</tr>
<tr>
<td>456987412</td>
<td>Diki</td>
<td>Bandung</td>
<td>24</td>
</tr>
<tr>
<td>56879321</td>
<td>Pelatihan Full Stack</td>
<td>Medan</td>
<td>23</td>
</tr>
</table>
</body>
</html>

113
[Link]

.table1 {
font-family: sans-serif;
color: #444;
border-collapse: collapse;
width: 50%;
border: 1px solid #f2f5f7;
}

.table1 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}

.table1, th, td {
padding: 8px 20px;
text-align: center;
}

.table1 tr:hover {
background-color: #f5f5f5;
}

.table1 tr:nth-child(even) {
background-color: #f2f2f2;
}

114
Gambar 49 Cara design table dengan css

115