Download - Belajar HTML Dan CSS
-
7/25/2019 Belajar HTML Dan CSS
1/162
-
7/25/2019 Belajar HTML Dan CSS
2/162
i
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
Mempersembahkan :
Belajar
HTML danCSSTutorial fundamental dalam
mempelajari
HTML &CSS
Oleh :
-
7/25/2019 Belajar HTML Dan CSS
3/162
i
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
Rian Ariona
-
7/25/2019 Belajar HTML Dan CSS
4/162
ii
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
Belajar HTML danCSS
Tutorial fundamental dalam mempelajari HTML& CSS
Penulis : Rian Ariona
S!ST Pen"untin# : $ndra A%dul
Hadi A!Md
Cop"ri#t ' ariona!net()*+
-
7/25/2019 Belajar HTML Dan CSS
5/162
iii
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
Janganlangsung Meng-copy Kode-kode dari buku ini dan Mem-
paste-nya ke Text Editor, karena sebagian kode tidak akan
berjalan dengan benar jika anda melakukannya
-
7/25/2019 Belajar HTML Dan CSS
6/162
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
i,
Jika anda merasa terbantu dengan ebook ini dan ingin berbagi kepada
teman anda, bagikanlah link di bawah ini, dengan demikianAnda telah
ikut berkontribusi terhadap ebook ini
http://w wwarionanet/ebo ok-bel aja r-htm l-dan-!s s/
http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/http://www.ariona.net/ebook-belajar-html-dan-css/ -
7/25/2019 Belajar HTML Dan CSS
7/162
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
,
PR-L-.
/ntu0 siapa %u0u ini
1
"uku ini !o!ok untuk anda yang ingin mempelajari#$M% dan &'', baik anda yang tidak tahu
sama sekali apa itu #$M% dan &'' hingga anda yang ingin mempelajarise!ara lanjut #$M%
dan &'', serta mengetahuikonsep (undamental dari #$M% dan &'' itu sendiri
)embahasan dalam buku ini menitikberatkan pada study kasus, !ontoh penggunaan setiap
kode #$M% dan &'' dan tidak akan menjelaskan se!ara terperin!i tag-tag yang
terdapat/disediakan dalam #$M% atau property-property yang ada dalam &'' yang akan
membosankan anda
*ndapun akan diajak untuk mengkon+ersi sebuah desain web menjadisebuah (ile #$M% dan
&'' se!ara utuh, setiap langkah dijelaskan sesederhana mungkin agar mudah di!erna dan
dipahami
2at3 tesi#n4
alam buku ini, anda akan menemukan beberapa tanda sepertiberikut
Catatan,berisi catatansingkat tentang apa yang harus anda perhatikan dan lakukan
atau sebuah peringatan.
Informasi, berisi informasi singkat yang menjelaskan poin poin tertentu dalam
pembahasansetiap materi
*! Apa "an# terdapat dalam %o5 ini adala 0ode dari pem%aasan! 6ode HTML dan CSS ditulis didalam %o5 ini!
(! 6adan# setiap %aris 0ode "an# panjan# memili0i penomoran seperti %o5 ini!
+! Baris 0ode "an# tida0 memili0i nomor %erarti ditulis satu %aris den#an %aris se%elumn"a7seperti %aris ini dan %aris setela nomor *8!
-
7/25/2019 Belajar HTML Dan CSS
8/162
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
,i
Apa "an# diserta0an dalam Pa0et$%oo0
alam paket ebook yang telah anda download, sayajuga menyertakan (ile resour!esip yang
berisi (ile-(ile latihan yang terdapat dalam ebook ini Jika suatu saat anda merasa bingung
mengapa kode yang anda ketik tidak berjalan seharusnya, *nda dapat menyamakan kode
yang anda ketik dengan kode yang terdapat dalam (older resour!es ini
-
7/25/2019 Belajar HTML Dan CSS
9/162
,ii
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTM
9AFTAR S
PROLOG
.ntuk siapa buku ini
V
+
0at!h the sign1
*pa yang disertakan dalam )aket 2book
+
+i
DAFTAR ISI VII
BAB 1 PERSIAPAN 2
33 0eb "rowser 4
34 $e5t 2ditor 6
37 *dd-On 8
BAB 2 PENGENALAN HTML 10
43 *pa itu #$M% 39
44 Membuat 0ebsite dalam 3 Menit 33
47 )engenalan $ag #$M% 34
4 'truktur (ile #$M% 37
BAB 3 MEMUAT GAMBAR 1
73 Mengenal *tribut#$M% 3;
74 &ara penulisan lokasi (ile 3nternet 25plorer E0indowsF,
'a(ari EMa!F dan ?ire(o5 E%inu5 .buntuF
'etiap browser memiliki perbedaan dalam hal menampilkan halaman web dan (itur-
(itur yang didukung dalam #$M% dan &'' "oleh jadi halaman web yang anda
buat ditampilkan benar pada salah satu browser namun a!ak-a!akan pada browser
lainnya .ntuk itu perlu beberapa browser yang terinstall dalam komputer anda untuk
mengujipenampilanwebsite yang dibuat
>su-isu kompatibilitas ini akan anda temui ketika mempelajari &'' nantinya yang
berhubungan dalampenampilanhalaman web
"erikut ini adalah beberapa browser yang dapat anda download dari >nternet serta
re+iew singkat
-
7/25/2019 Belajar HTML Dan CSS
14/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
+
Firefo5
0eb browser ini bisa dikatakan web browser yang paling disenangioleh para de+eloper
web karena kekayaannya dalam hal *dd-on* *nda dapat mendownloadnya di
ttp :
-
7/25/2019 Belajar HTML Dan CSS
15/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
=
Gambar 4 Google &hrome38
Safari
'a(ari adalah web browser dari *pple 'ama halnya dengan &hrome, sa(ari
menggunakan engine webkit sehingga mendukung (itur-(itur terbaru #$M% dan &''
"rowser ini tersedia untuk Ma! dan 0indows saja ttp :
-
7/25/2019 Belajar HTML Dan CSS
16/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
>
nternet$5plorer
"rowser yang pastisudah terinstallpada komputer dengan sistem operasi windows Jika
anda masih menggukan >nternet 25plorer +ersi ;, 8 dan =, saya anjurkan untuk
mendownload +ersi terbaru yakni >nternet 25plorer nternet 25plorer dalam pengujian halaman web sangat tidak dianjurkan
Eterutama +ersi 8 ke bawahF karena dukungannya yang kurang serta proses
penampilan halaman web yang terkadang menjadi berantakan Iamun karena
pengguna >nternet e5plorer di dunia masih mendominasi, mau tidak mau kita harus
menggunakan >nternet 25plorer
Gambar >nternet 25plorer=
*!(! Te5t$ditor
.ntuk membuat halaman 0eb anda memerlukan sebuah te5t editor Jika anda
mempunyai *dobe reamwea+er, saya sarankan untuk tidak menggunakannya,
Mengingat anda masih dalam tahap belajar
$e5t editor yang akan kita gunakan adalah te5t editor ringan namun penuh dengan
-
7/25/2019 Belajar HTML Dan CSS
17/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
?
(itur yang sangat membantu dalam proses Coding!enulisan "ode# #$M% dan &''
-
7/25/2019 Belajar HTML Dan CSS
18/162
?
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
@otepad
$ersedia untuk 0indows, IotepadJJ
memiliki beragam (itur yang sangat
mendukung para programmer
Kemampuannya untuk memperkaya diri
dengan pluginpun menjadi kelebihan
lainnya dengan te5t editorsejenisnya
*nda dapat mendownload Iotepad di
ttp:
-
7/25/2019 Belajar HTML Dan CSS
19/162
.edit
*nda pengguna %inu5 Khususnya %inu5 dengan desktop Gnome sudah memiliki te5t
editorbawaan, G2dit G2dit bisa digunakan untuk menuliskan berbagai ma!am bahasa
pemrograman
*nda pengguna 0indows-pun dapat mendownload G2dit +ersi windows di situs
resminyattp :
-
7/25/2019 Belajar HTML Dan CSS
20/162
D
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
-
7/25/2019 Belajar HTML Dan CSS
21/162
D
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
Gambar = $ampilan?irebugpada (ire(o5
Jika anda menggunakan Google &hrome atau 'a(ari, tidak usah menginstall (irebug
karena kedua browser dengan engine webkit ini sudah memiliki tool serupa yang
dinamai dengan e+eloper$ool
Gambar < e+eloper $ools pada Google &hrome
2e% 9e,eloperTools
*dd-on ini digunakan untuk menguji halaman web dan melakukan beberapa
perubahan/perbaikan sementara terhadap halaman web *nda dapat menginstallnya
dari add-on(ire(o5 atau dari &hrome 0eb 'tore
Gambar 39 0eb e+eloper $ools memiliki sejumlah tools yang sangat membantu
-
7/25/2019 Belajar HTML Dan CSS
22/162
E
>tulah aplikasi-aplikasi yang diperlukan untuk mempelajari #$M% dan &'', tapi yang
terpenting adalah kehadiran Web Browser dan Text editor, sisanya adalah optional
yang keberadannya hanya mendukung akti(itas kita dalam pembangunan halaman web
'eperti ?irebug dan e+eloper tools memang penting namun anda tidak harus
menginstall keduanya Keberadaan kedua tools tersebut sangat membantu untuk
menguji dan memperbaiki kesalahan yang ditimbulkan baik kesalahan dalam
pengetikan kode atau lainnya
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
-
7/25/2019 Belajar HTML Dan CSS
23/162
*)
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
Ba%(
Pen#enalanHTML
(!*! Apa ituHTML1
'emua halaman web yang sering anda buka, seperti (a!ebook!om, twitter!om,
google!om dan lain sebagainya ditampilkan dengan menggunakan #$M% Jadi bisa
dikatakan #$M% adalah bahasa dasar untuk menampilkan halaman web pada web
browser
"uka 0eb browser anda lalu bukalah sebuah situs, ttp:nspe!t 2lementakan menampilkan kode #$M% dari situs yang bersangkutan
http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/http://www.google.com/ -
7/25/2019 Belajar HTML Dan CSS
24/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
**
"aris pertama pasti diawali dengan 49-CTGP$ HTML, ini menandakan
bahwa dokumen yang sedang anda buka saat ini adalah #$M% "egitu juga
denganbaris kedua : HTML, kode tersebut menandakan bahkan kode-kode
yang ditulis di dalamnya adalah kode #$M%
Jika anda ingin tahu kepanjangan #$M%, #$M% adalah kependekan dari
%ypertext&arkup 'anguage *rtinya adalah bahasa markup EpenandaFberbasis
te5t atau bisa juga disebutsebagai formatting language Ebahasa untuk
mem(ormatF, Jadi sudah jelas bahwa #$M% bukanlah bahasa pemrograman,
melainkan bahasa markup/(ormatting
(!(! Mem%uat 2e%site dalam * Menit
'udah siap membuat website Kita mulaimembuat website hanya dalam 3 menit1
3 "ukalah Iotepad All!rograms (Accessories ()otepadF
4 Ketikkanteks berikut :
2e%site pertama sa"a
7 )ilih menu ?ile A 'a+e *s
"eri nama Ilati&an*!&tmlJ Etanpa tanda kutipF
6 )ada bagian 'a+e as type,pilih All *iles+.+# %alu klik tombolsa+e
Gambar 37 'a+e *s type
; 'ekarang klik dua kali (ile #$M% yang telah andabuat,Eatau Klik dan rag ke 0eb
"rowser anda,disini saya menggunakan Google&hromeF
-
7/25/2019 Belajar HTML Dan CSS
25/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*(
Gambar 3 0ebsite pertama anda
emonstrasi di atas hanyalah langkah untuk membuat (ile #$M%, mudahbukan/
(!+! Pen#enalan Ta#HTML
'eperti yang saya sebutkan sebelumnya, bahwa #$M% adalah bahasa Markup,
artinya bahasa #$M% hanya digunakan untuk me-markup suatu dokumen 'ebagai
penyederhanaan kita analogikan dengan pembuatan dokumen di Mi!roso(t 0ord atau
aplikasi0ord )ro!essing lainnya
Ketikamembuat sebuah dokumen word, biasanya kita melakukan formattingpada teks
seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat )enjudulan
E#eadingF, membuat list Ea(tarFdan lain sebagainya )ada #$M%,formatting ini bisa kita
sebut dengan )roses&arkup dan akan dilakukandengan menggunakan tag #$M%
Misalnya, untuk mem-(ormat suatu teks menjadimiring kita tambahkan tagFemHataui!
2dit (ile sebelumnya, menjadisepertiberikut :
2e%site empertama
-
7/25/2019 Belajar HTML Dan CSS
26/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*+
dokumen #$M% )erhatikan bahwa setiap tag memilikipasangan yakni tagpenutupnya
-
7/25/2019 Belajar HTML Dan CSS
27/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*=
*rtinya hanya teks yang berada di dalam tag tersebut yang akan diberi (ormat miring
$ag penutup ditandai dengan penambahan tanda slash E/F sebelum nama tagnya
"erikut ini adalah anatomidari tag #$M% :
namata# atri%utKInilai Atri%utJsi atau 6onten
-
7/25/2019 Belajar HTML Dan CSS
28/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*>
"ingung $enang, saya jelaskantiap baris kode tersebut
49-CTGP$HTML
*dalah $ag awal dari setiapdokumen #$M%, tag ini ber(ungsi untuk mengin(ormasikan
pada browser bahwa dokumen yang sedang dibuka adalah dokumen #$M% $ag ini
perlu di!antumkan disetiap dokumen #$M% yang akan andabuat
HTML N
-
7/25/2019 Belajar HTML Dan CSS
29/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*?
39 baris mungkin hal ini tidak akan menjadimasalah,namun bagaimanajika 3999 baris
)ah loh,-
.ntuk itu kita menambahkan indentasi,disetiap isi EkontenFdarisuatu tag Misalnya :
ead
-
7/25/2019 Belajar HTML Dan CSS
30/162
Ba%+
Memuat.am%ar
'etelah anda mengetahui struktur dari sebuah (ile #$M% dan apa saja yang harus
ditulis pertama kali 'elanjutnya saya akan mengajak anda untuk mempelajari !ara
memuat/menampilkansebuah gambar dan memahamiapa ituatribut #$M%
.ntuk memuat sebuah gambar pada dokumen #$M%, kita akan menggunakan tag
Fim#H %alu dimana kita meletakkangambar tersebut/i dalam tag Fim#H kah/
+!*! Men#enal Atri%utHTML
'etiap tag #$M% dapat memiliki satu atau lebih atribut, atribut ini ber(ungsi untuk
menyimpan in(ormasi yang berkaitan dengan tag tersebut
)ada tag Fim#H kita akan menggunakan atribut sr3 untuk menyimpan lokasi
gambar :
im# sr3
'elanjutnya untuk memasukkan nilai pada atribut,kita gunakan operator sama dengan
EF diikuti dengan lokasi gambar yang diapit oleh tanda kutip
im# sr3KI#am%ar!jp#J
$ag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup Eisebutjuga
sebagai elf Closed TagF, seperti tag-tag lainnya >ni dikarenakan tag ini tidak memiliki
konten seperti:
titleni adala 6onten ta# title
-
7/25/2019 Belajar HTML Dan CSS
31/162
im# sr3KI#am%ar!jp#J
-
7/25/2019 Belajar HTML Dan CSS
32/162
'ekarang saatnya anda men!oba memuat gambar pada (ile #$M%
3 "uatlah (ile #$M%baru dengan nama latihan4html
4 &arilah sebuah gambar dan simpan satu (older dengan (ile #$M% anda
Gambar 36 )enempatan gambar sesuaidengan lokasi (ile #$M%
7 Ketikkanlahkode #$M%berikut :
*! 49-CTGP$ HTML(! HTML+! ead=! titleudul File HTML!
-
7/25/2019 Belajar HTML Dan CSS
33/162
'etiap tag img, selain memiliki atribut sr! untuk menyimpan lokasi gambar, andajuga
harus menyertakan atribut alt yang akan digunakan sebagai teks alternati( ketika
gambar tidakberhasildimuat atau gambar hilang
im# sr3KIlo#o!pn#J altKIni adala te0s alternatifJ
-
7/25/2019 Belajar HTML Dan CSS
34/162
+!(! Cara penulisan lo0asi file
Jikaanda menyimpangambar tersebut pada sebuah (older sepertiberikut
Gambar 3= Menyimpan gambar pada (older images
Maka yang perlu anda lakukan adalah menambahkan nama (older tersebut diikuti
dengan tandaslash E/F dan nama (ile gambar yang akan dimuat:
im# sr3KIima#es
-
7/25/2019 Belajar HTML Dan CSS
35/162
Ba%=
Mem%uatLin0
Lang sering anda temui dalam sebuah website adalah link %ink ini akan membuat
konten atau elemen %T&'= dapat di klik dan akan mengarahkan/membawa anda
ke halaman web lainnya "iasanya suatu link ditampilkan berwarna biru dan
bergarisbawah Eselama belum diberistyleF
=!*! Lin0Standar
%ink atau biasa disebut dengan an!hor EpengaitF dapat dibuat dengan menambahkan
tag FaHpada teks yang ingin kita buat menjadilink
6li0 adisini
-
7/25/2019 Belajar HTML Dan CSS
36/162
$ag-tag #$M%juga biasa sebut dengan elemen
-
7/25/2019 Belajar HTML Dan CSS
37/162
Gambar 3< )enempatan (ilepada (older yang sama
4 Ketikkankode berikut pada (ile latihan7html
*! 49-CTGP$ HTML(! HTML+! ead=! titleudul File HTML!
-
7/25/2019 Belajar HTML Dan CSS
38/162
Gambar 49 tampilan (ile %atihan7html
Ketikalink bukalatihan3di klik,browser akan menampilkan(ile latihan3html
Gambar 43 %ink untuk kembalike halaman utama
an Klik link Kembali ke halaman utama untuk menampilkan latihan7html
kembali
Jika anda perhatikan pada kode yang terdapat dalam latihan7html, ada beberapa tag
yang belum sayajelaskan,yaitu tag F&*H dan %r!
$ag %r digunakan untuk memindahkan teks kebaris baru, sehingga teks yang
dipisahkan dengan tag ini akan ditampilkandibaris yang berbeda Jikaanda menghapus
tag F%rH ini, maka teks akan ditampikan satubaris
-
7/25/2019 Belajar HTML Dan CSS
39/162
Gambar 44 link ditampilkan satu baris tanpa tag @brA
.ntuk membuat link yang menga!u ke halaman web lain, pastikan anda menyertakan
ttp:
-
7/25/2019 Belajar HTML Dan CSS
40/162
=!(! Lin0$mail
*nda juga dapat membuat link email, link ini berisi alamat email yang ketika diklik,
aplikasiuntuk mengirim emailakan otomatis terbuka dan tujuan emailse!ara otomatis
terisi dengan alamat yang telah ditentukan
.ntuk membuat link email,anda tinggal menambahkan ma ilto:a la ma tNema il di dalam
atribut hre(
a refKIm ailt o:m r 5"Q "a u!3o mJ6irim $mail
-
7/25/2019 Belajar HTML Dan CSS
41/162
Ba%>
Headin#
-
7/25/2019 Belajar HTML Dan CSS
42/162
Gambar 4 )enjudulan pada dokumen #$M%
*danya penjudulan dimaksudkanagar suatu dokumen #$M% lebih terstruktur layaknya
sebuah dokumen resmi seperti skripsi /paper yang mengharuskan adanya
perbedaanantara "ab utama dan sub-babnya
)erhatikan !ontoh penggunaan #eading dalam suatu website di di halaman selanjutnya
alam website tersebut, %ogo/Judul dari website diberi #eading %e+el 3, untuk judul
artikel diberi heading le+el 4 dan judul dari bagian-bagian di dalamnya diberi
heading le+el 7 sd
-
7/25/2019 Belajar HTML Dan CSS
43/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
(
-
7/25/2019 Belajar HTML Dan CSS
44/162
(D
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
Ba%?
Mem%uatdaftar
-
7/25/2019 Belajar HTML Dan CSS
45/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
(E
Gambar 46 a(tarberurutan
?!(! /norderedList
"erbeda dengan da(tar berurut, unordered list akan menandai setiap item dengan
simbol "aikberupa lingkaranataupersegi Eanda masihbisa merubahnya dengan &''F
.ntuk membuat da(tar tidak berurut kita gunakan tag ul dan seperti tag ol
item yang terdapat di dalamnya harus diapit dengan tag li!
Jika kita modi(ikasi !ontoh sebelumnya dengan merubah ol menjadi ul maka
yang akan kita dapat adalah sepertiberikut :
*! (Gan# arus dila0u0an ari ini
-
7/25/2019 Belajar HTML Dan CSS
46/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
+)
?!+! 9enitionList
"erbedadengan Ordered %ist dan .nordered %ist yang memiliki struktur sama,ata list
memiliki struktur tersendiri "iasanya data list ini digunakan untuk membuat da(tar
istilahbeserta de(inisinya sepertihalnya dalam kamus
dl
-
7/25/2019 Belajar HTML Dan CSS
47/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
+*
*=! liA=! liLe#al
-
7/25/2019 Belajar HTML Dan CSS
48/162
*?!
-
7/25/2019 Belajar HTML Dan CSS
49/162
Ba%
Memaami Ta# di, 79i,ision8
*nda dapat membuat suatu group dari tag-tag #$M% yang anda buat dengan
menggunakan tag di,, sepertipada !ontoh kasus berikut :
'etiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat
bagian/group Keempatbagian/group ini antara lain :
3 #eader
"agian kepala website yang berisi logo website, nama website, slogan website,
menu website dan lainnya
4 &ontent
"erisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya
berisi postingan terbaru atau in(ormasi lainnya
7 'idebar
"eradadi samping &ontent dan biasanya berisi iklan, kategoriartikeldan widget
atau hiasan situs lainnya
?ooter
"agian kaki dari website yang pada umumnya diisi dengan tag website tersebut,
misalnya copyright 3 4564 bysomeone.
%ebih sederhananya, bayangkanlah 'urat resmi yang memiliki Kop surat,badan surat
dan penutup surat
alam #$M%, kita dapat membagibagian-bagian tersebut dengan menggunakan tag
di, Edi+ision/bagianFdan untuk menamai setiapdi+ kitagunakan atribut id atau
!lass> "erikut !ontoh penggunaan tag di+ jika kitaterapkan padabagian-bagian
website yang
telah kita sebutkan sebelumnya:
6*tribut > dan &lass tidakhanya digunakan dalam tag di+ saja melainkan dapat digunakan di
setiap tag #$M% untuk memberikan penamaan sebagai re(erensijika diperlukan
-
7/25/2019 Belajar HTML Dan CSS
50/162
*! di, idKIeaderJ(! !
-
7/25/2019 Belajar HTML Dan CSS
51/162
Class
&lass digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan
dapat digunakan berulang kali dalam markup EKode#$M%F 'ebagai !ontoh,perhatikan
kode #$M%berikut :
*! ul idKImenuJ(! li 3lassKImeraJBeranda
-
7/25/2019 Belajar HTML Dan CSS
52/162
J
f
Ba%D
Form
alam sebuah website biasanya terdapat
satu atau lebih (orm, seperti (orm
pen!arian, registrasi dan lain sebagainya
?orm ini biasa digunakan untuk
mengumpulkan data dari pengunjung
website
'ebuah (orm, boleh jadi memiliki
beragam kontrol, mulai dari te5t input,
&ombo bo5, "utton dan lain sebagainya
Kita akan mempelajari sebagian kontrol
yang disebutkan diatas karena kontrol di
atas adalah yang paling sering digunakan
dalam halaman web
)ertama-tama,pembuatan sebuah (orm
diawali dengan tag @(ormA, dan setiap
kontrol-kontrol yang dibutuhkan
ditempatkan di dalam tag ini
Gambar 4= ?ormulirE?OBMFpenda(taran Lahoo1
form
-
7/25/2019 Belajar HTML Dan CSS
53/162
Control3ontrolForm
'etiap !ontrolpada (orm dapat dibuat dengan menggunakan tag @inputA an yang
membedakan tipe dari !ontroltersebut berada pada atribut type Etipe kontrolF"erikut
ini adalah sebagian tipe kontrolyang biasa ditemui:
La%el
%abel digunakan untuk memberikan keterangan pada setiap input yang ada Jika anda
perhatikan (ormulir penda(taran situs yahoo, yang disebut dengan label adalah yang
ditandai berikut ini :
Gambar 4< &ontoh%abel pada (orm
la%el forKI@ameJ 6eteran#an nput
-
7/25/2019 Belajar HTML Dan CSS
54/162
Gambar 79 $e5t >nput
Jikate5t input yang akan ditampilkaningin memiliki nilai, maka tuliskannilai tersebut di
dalam atribut +alue
input t"peKIte5tJ nameKInamaJ ,alueKIRian ArionaJ
-
7/25/2019 Belajar HTML Dan CSS
55/162
Com%o Bo5
&ombo "o5 adalah kontrol yang memiliki pilihan ketika diklik )embuatannya sama
sepertipembuatan a(tar/%ist namun dengan tag yang berbeda
la%el forKI0otaJ6ota
-
7/25/2019 Belajar HTML Dan CSS
56/162
'ebagai latihan, kita !oba menggabungkan kontrol-kontrol yang telah anda pelajari
sebelumnya menjadisatu (orm utuh
"uatlah (ile baru,dengan nama (ile latian?!tml, lalu ketikkan kode #$M%berikutpada
(ile latian?!tml
*! 49-CTGP$ HTML(! HTML+! ead=! titleForm!
-
7/25/2019 Belajar HTML Dan CSS
57/162
alam buku ini, saya tidak akan membahas bagaimana !ara memroses data yang
dikumpulkan dari (orm tersebut,karena dalam #$M% kita tidak bisa melakukanproses
pengolahan data >ngat bahwa #$M% hanya digunakan untuk mem(ormat dokumen,
bukan untuk memroses data
.ntuk memroses data, kita bisa menggunakan bahasa pemrograman web, seperti
Ja+as!riptatau )#) atau bahasa pemrograman web lainnya
engan bahasa pemrograman seperti Ja+as!riptatau )#) anda dapat mengolah data-
data yang dikumpulkan dari ?orm #$M% untuk diproses dan dikeluarkan kembali
menjadisuatu in(ormasibaru
-
7/25/2019 Belajar HTML Dan CSS
58/162
Ba% E
Ta%el
.ntuk menampilkan data dengan tipe tabel dalam #$M%, kita bisa menggunakan tag
ta%le!
ta%le
-
7/25/2019 Belajar HTML Dan CSS
59/162
*>! tdRian
-
7/25/2019 Belajar HTML Dan CSS
60/162
E!(! 6esalaan dalam pen##unaanta%le
$ag table digunakan untuk mem(ormat data tabular/data yang membutuhkan (ormat
tabel dalam menampilkannya, seperti !ontoh penggunaan tabel untuk menampilkan
data nilai berikut :
Io Iama Iilai *khir >nde5
3 Jono
-
7/25/2019 Belajar HTML Dan CSS
61/162
Ba%*)
Studi 0asus * 6on,ersi desain 0eHTML
'ebagai seorang web designer, *nda harus mampu menerjemahkan suatu desain web
ke dalam bahasa #$M% dan &'' )roses penerjemahan dari desain ke dalam kode
#$M% ini disebut dengan )embuatan &arkup, yang dilanjutkan dengan proses 'tyling
E)enambahan &'' yang akan kitapelajaripada bab selanjutnyaF
Gambar 78 esain web yang akan kita kon+ersi
)ada bab ini anda akan belajar membuat markup dari sebuah desain web yang telah
disiapkan 'aya tidak akan memberikan desain web yang rumit, sebagai latihan kita
gunakan desain yang sederhana dulu
*)!*!Pesiapan
'ebelum kita mulai proses pembuatan markup untuk desain web tersebut, kita buat
(older baru terlebih dahulu,agar pekerjaan kita rapih dan terstruktur
-
7/25/2019 Belajar HTML Dan CSS
62/162
"uatlah (older baru dengan nama !Latihan "arku#$ dan buatlah (ile #$M% baru
dengan nama !latihan%marku#.html$.
alam (older tersebut buat lagi satu buah (older dengan nama ima&es untuk
menyimpan seluruh gambar yang diperlukan dalam (ile #$M% yang kita buat %alu !opy
gambar yang terdapat di dalam (older resour!es/images yang disertakan bersama
ebook ini
*)!(!2rapper
Kita mulai dari pembuatan sebuah di+ untuk menampung seluruh konten situs yang
akan dibuat 'aya akan menggunakan di+ dengan id wrapper Iantinya di+ ini akan kita
buat rata-tengah, jadi setiap browser di oom-in atau di oom-out, konten situs tetap
berada di tengah
*! 49-CTGP$ HTML(! HTML+! ead=! titleLatian Mar0up!
-
7/25/2019 Belajar HTML Dan CSS
63/162
'emuanya telah anda pelajaripada bab-bab sebelumnya Jadi, Markup untuk bagian
header adalah sepertiberikut :
D! di, idKI;rapperJ
E! di, idKIeaderJ*)! im# sr3KIlo#o!pn#J altKIlo#oJ
-
7/25/2019 Belajar HTML Dan CSS
64/162
Jikaanda perhatikan,disanaterdapat tiga*rtikelyang memilikipenampilandan struktur
yang sama, untuk itu kita akan menggunakan penamaan dengan &lass pada di+ ini
Iamun sebelumnya, kita tulissebuah di+ untuk menampung artikelyang akan kita buat
dengan nama !da'tar%artikel$
((! di, idKIdaftararti0elJ(+! di, 3lassKIarti0elJ(=!(>!
-
7/25/2019 Belajar HTML Dan CSS
65/162
+*! im# sr3KIima#es
-
7/25/2019 Belajar HTML Dan CSS
66/162
>=! li refKIIPotosop! li refKIInspirasi
-
7/25/2019 Belajar HTML Dan CSS
67/162
(>! pBill .ates and Ste,e o%s suare off in te 3lean;ite ,irtual ;orld of te i3oni3 Ma3 ads
-
7/25/2019 Belajar HTML Dan CSS
68/162
Gambar 7 $ampilan dari 'tudi Kasus
?ile #$M% yang ditampilkan akan terlihat plain/polos, tidak sama seperti pada
desain web yang diberikan $api inilah tugas dari #$M% yakni &arkup2*ormatting
*dapun !ara kita menampilkanbagian-bagian kode #$M% agar terlihat sepertipada
desain web yang diberikan, kita akan menggunakan &'' dan akan kitapelajaripada "ab
&''
-
7/25/2019 Belajar HTML Dan CSS
69/162
Ba%**
alidasi Mar0upHTML
Halidasi markup adalah proses dimana kode #$M% kita di+alidasi apakah sudah benar
atau belum oleh aplikasi +alidator dari 07&? Halidasi ini sangatlah diperlukan untuk
memeriksa apakah ada yang salah dengan markup #$M% yang telah kita buat atau ada
beberapa bagian yang terlewatsepertipenutup tag, atribut dan lain sebagainya
'ebagian orang berpendapat bahwa markup #$M% yang +alid akan memper!epat
proses loadingwebsite dan lebih bersahabat dengan 'ear!h 2ngine
.ntuk melakukan +alidasi, silahkan buka alamat berikut: ttp :
Gambar Halidator#$M% dari 07&
*da tiga !ara pengujian Markup #$M%, yakni dengan mengetikkan alamat (ile #$M%
yang akan diuji EHalidateby .B%F opsi ini adalah untuk mem+alidasi halaman #$M% yang
;07& E0orld 0ide 0eb &onsortiumF adalah komunitas internasional yang bekerja untuk
membangun standar web seperti #$M% dan &''h ttp: //www w7o rg/
http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://validator.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://www.w3.org/http://validator.w3.org/http://validator.w3.org/http://www.w3.org/ -
7/25/2019 Belajar HTML Dan CSS
70/162
8earch Engineataumesin pen!ari adalah aplikasiuntuk men!ari berbagai in(ormasidi internet,
seperti Google!om, bing!om dan lain sebagainya
-
7/25/2019 Belajar HTML Dan CSS
71/162
sudah online atau website yang sudah online ara kedua adalah dengan
mengupload (ile #$M% anda EHalidate by (ile uploadF, dan +alidator akan
mem+alidasi kode #$M% yang terdapat dalam (ile tersebut, dan (ara terakhir
adalah dengan mengetikkan langsung kode #$M% dan mem+alidasinya EHalidate by
dire!t inputF
'ebagai !ontoh, kita !oba mem+alidasi latihan markup yang kita buat sebelumnya
dengan !ara Halidate by (ile uploadKlik tab Halidate by (ile upload, lalu klik &hoose
(ile untuk memilih(ile #$M% dan pilihlahlatihan Markup yang telah kita buat pada study
kasus dan Klik tombol&he!k untuk mulaimem+alidasi (ile #$M% kita
Gambar 6 Halidateby ?>le .pload
Jikapengujiansukses, maka akan mun!ulpesan lulus uji markup #$M% sepertiberikut:
Gambar ; #asil +alidasimarkup #$M%
)erhatikan, bahwa kita mendapatkan peringatan,!oba s!roll ke bawah dan anda akan
menemukan peringatan tersebut Ebegitujuga dengan errorP JikaadaF
-
7/25/2019 Belajar HTML Dan CSS
72/162
Gambar 8 )eringatan +alidasi
Kesimpulandari peringatan di atas adalah kitabelum menyertakan in(ormasi !hara!ter
en!oding .ntuk memperbaikinya tambahkan kode berikut di dalam tag head dari (ile
latihan markup kita
ead
-
7/25/2019 Belajar HTML Dan CSS
73/162
Ba%*(
Semanti0
'ebuahdokumen #$M% tidak lain adalah kumpulan dari tag-tag#$M% dan sepertiyang
telah anda ketahui bahwa #$M% adalah bahasa untuk me-markup atau mem-format
suatu dokumen #$M% B)*A+ untuk membuat bagaimana dokumen tersebut
ditampilkan
'ama halnya dengan aplikasi pengolah kata, (ormating yang dilakukan pada suatu
dokumen ditujukan untuk memberikan makna-makna tersendiri pada setiap kata-kata
yang di olahnya
Misalnya, ketika suatu teks ditampilkanmiring, biasanya ada makna tertentu pada teks
tersebut,sepertipada pertanyaan berikut :
IBeri0ut ini adala ta#ta# HTML kecuali :J
Kata ke!uali di sana diberi (ormat miring karena penulis ingin menegaskan bahwa
jawaban yang benar adalah yang bukan tag #$M% Jika kalimat pertanyaan tersebut
diba!a, biasanya akan ada perbedaan intonasi pada kata ke!uali
alam #$M%, terdapat dua tag yang dapat membuat suatu teks miring yakni tag:em(
dan :i(. %alu apa perbedaan kedua tagtersebut/
Jika kita sangkutpautkan pertanyaan ini dengan !ontoh kasus di atas, penggunaan tag
@emA untuk memiringkankata ke!ualiadalah !ara yang benar Mengingat tag @emA
ini memang ber(ungsi untuk memberikan tekanan pada suatu teks EemphasisF
"erbeda dengan tag @iA yang hanya ber(ungsi untuk menampilkanteks menjadimiring
tanpa ada makna sama sekali
-
7/25/2019 Belajar HTML Dan CSS
74/162
*(!*! Ma0sud Semanti0 dalamHTML
'emantik berarti makna yang terkandung dari suatu kata alam #$M%, semantik
berarti makna yang terkandung dari suatu tag #$M% 'eperti pada !ontoh kasus
sebelumnya,penggunaan tag @emA lebihmemiliki nilai semantik dari pada tag @iA
)ada dasarnya, Gunakanlah tag-tag#$M% sesuai dengan maksud/(ungsi dari tag #$M%
tersebut, Jangan menggunakan suatu tag #$M% karena tag tersebut memiliki
penampilanberbeda
Misalnya, penggunaan tag @tableA $ag ini ber(ungsi untuk membuat suatu tabel atau
data tabular, penggunaan diluar itu adalah salah, sepertipenggunaan tag table untuk
pembuatan layout web
.ntuk mengetahui (ungsi dari setiap tag #$M% anda dapat memba!anya di
ttp:
-
7/25/2019 Belajar HTML Dan CSS
75/162
Ba#ian
CSS
-
7/25/2019 Belajar HTML Dan CSS
76/162
Ba%*+
Cas3adin# St"le Seet7CSS8
*+!*! Pen#enalanCSS
&'' adalah kependekan dari &as!ading 'tyle 'heet, ber(ungsi untuk memper!antik
penampilan #$M% atau menentukan bagaimana elemen #$M% ditampilkan, seperti
menentukan posisi, merubah warna teks atau ba!kground dan lain sebagainya
)erhatikan !ontoh kode &''berikut :
Gambar < &ontohKode &''
Sele3to
r
'ele!tor adalah elemen/tag #$M% yang ingin diberi style *nda dapat menuliskan
langsung nama ta& yang ingin diberi style tanpa perlu menambahkan tanda )ada
!ontoh kode &'' di atas, kita akan memberi style pada seluruh tag h3 yang terdapat
dalam (ile #$M%
Jika tag #$M% yang ingin diberi style memiliki >, anda dapat menuliskan nama >
tersebut dengan diawalitanda kress EQF
Ueader
-
7/25/2019 Belajar HTML Dan CSS
77/162
an jika tag yang diberi style memiliki &lass, maka penulisan sele!tor bisa dilakukan
dengan tanda titik EF diikuti dengan nama !lass
-
7/25/2019 Belajar HTML Dan CSS
78/162
!arti0el
Jikaanda hanya menuliskansatu sele!tor, seperti!ontoh kode &'' di atas, maka seluruh
tag h3 yang terdapat dalam (ile #$M% akan memiliki style yang sama "agaimana jika
kita hanya ingin memberi style pada tag h3 yang han y a te r dapat di d a lam & lass artikel
Maka penulisansele!tornya sepertiberikut :
!arti0el *
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h3
yang hanya terdapat di dalam class artikel Eatau - h3 yang merupakan !hild dari !lass
artikelF
*nda-pun dapat memilih lebih dari satu tag untuk penghematan kode &'' Misalnya
ketika anda memiliki dua atau lebih tag dengan warna ba!kground yang sama, dari pada
menuliskankode sepertiini :
*V %a30#round3olor: U?????? WP V %a30#round3olor: U?????? Wa V %a30#round3olor: U?????? W
anda dapat menggabungkan sele!tor dengan menambahkan tanda koma pada nama
tag yang ingin diberistyle
* p a V %a30#round3olor: U????? W
Propert" danalue
)roperty adalah si(at-si(at yang ingin diterapkan pada sele!tor, seperti warna te5t,
warna ba!kground,jarak antar elemen,garis pinggir dan lain sebagainya
.ntuk memberikan nilai/+alue pada property kita gunakan tanda titik dua E : F 'etiap
property diakhiri dengan titik koma ERF, jika anda tidak mengakhirinya maka browser
tidak akan mengetahuimaksud dari property tersebut
)roperty-property pada &'' sangat mudah dimengerti karena lebih mirip bahasa kita
sehari-hari Misalnya untuk merubah warna te5t kita gunakan property !olor, untuk
-
7/25/2019 Belajar HTML Dan CSS
79/162
merubah warna ba!kground kita gunakan property ba!kground-!olor, untuk merubah
ukuran huru( kita gunakan property (ont-sie Mudah dimengertibukan/
!arti0el * V
3olor : red%a30#round3olor : %luefontsie : ()p5
W
Menurut saya, Kode &'' sangat mudah dimengerti, karena kata-kata yang digunakan
sudah tidak asing lagi, perhatikan !ontoh kode &'' sebelumnya, jika kita ubah ke
bahasa kita sehari-hari,kira-kira menjadisepertiberikut :
#ey "row E"rowserF &ari tag h3 yang terdapat di dalam !lass artikel, jika
ditemukan/ada, ubah warnanya menjadi merah, warna ba!kground menjadi biru dan
ukuran huru( menjadi49 pi5el
&ukup perkenalan dengan &''-nya, lalu yang menjadipertanyaan besar anda saat ini
adalah :
imanasaya mengetikkan kode tersebut/
*+!(! PenulisanCSS
*da tiga !arapenulisankode &'', yaitu inline,internal dan e5ternal Ketiganyabisa anda
lakukan sesuai dengan kebutuhan "erikut !ontoh penggunaan dari metode-metode
tersebut:
nline
)enulisan kode &'' dengan metode inline ini bisa dilakukan langsung pada tag
yang ingin diberistyle dengan menggunakan atribut style
* st"leKI3olor : red I udul Situs
-
7/25/2019 Belajar HTML Dan CSS
80/162
&ara ini sangat tidak dianjurkan,karena *nda akan men!ampurkan antara ?ormatdan
)resentasi &ara ini juga tidak e(ekti( ketika anda akan melakukan perubahan pada
&''
nternal
Metode &'' internal ditulis di dalam tag style yang ditempatkan pada taghead
HTML
ead titleudul HTML
-
7/25/2019 Belajar HTML Dan CSS
81/162
Ba% *=
Bo5Model
*=!*! Mar#in
)roperty margin digunakan untuk memberikan jarak antar elemen/tag#$M% Misalnya
jarak antar Fdi,H dan tag-tag#$M% lainnya
'ebagai !ontoh,buatlah (ile #$M%baru dengan nama latianD!tml, lalu tambahkan
kodeberikut:
di, 3lassKI%o5JBo5 0e satu
-
7/25/2019 Belajar HTML Dan CSS
82/162
Gambar 69)enambahan margin-bottompada bo5
Jarak antar bo5 ke satu dan bo5 ke dua sedikitberjauhan, karena kita menambahkan
margin bawah Emargin-bottomFsebesar 69p5
.ntuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat
menghapus property margin-bottomdan perhatikanperbedaannya
*nda juga dapat memberikan jarak dari kanan ErightF, kiri Ele(tF dan atas EtopF Misalnya :
mar#intop:()p5mar#inri#t:+)p5mar#in%ottom:>)p5mar#inleft:=)p5
*=!(!Paddin#
)ada latihan sebelumnya, kita telah memberikan jarak antar elemen #$M% dalam
!ontoh sebelumnya jarak antar di, namun !oba perhatikan antara te5t E"o5 ke 5F
dengan garis pinggir kotak, tidak ada jaraksama sekali, merapat ke sisi bo5 tersebut
.ntuk itu property paddinglah yang akan memberikan jarak antara konten elemen
dengan elemen tersebut
-
7/25/2019 Belajar HTML Dan CSS
83/162
'ebagai !ontoh tambahkan kode &'' berikut, pada !lass bo5 yang kita buat
sebelumnya:
!%o5V
W
%a30#round3olor:#reen3olor: "ello;;idt:*))p5ei#t:*))p5mar#in%ottom:>)p5paddin#left:()p5
Gambar 63 )emberian padding pada bo5
an sekarang, anda dapat melihat jarak antara
te5t yang berada di dalambo5
)erlu diperhatikan juga, bahwa ketika kita
menambahkan padding, ukuran bo5 juga akan
berubah
Misalnya kita menentukan ukuran lebar dari bo5
sebesar 399p5 Ketika kita menambahkan
padding-le(t sebesar 49p5, maka total lebar dari
bo5 tersebut menjadi349p5
Jadijika anda ingin ukuran bo5 tetap 399p5, kita
harus menghitung ulang width dari bo5 tersebut
Misalnya kita ubah menjadi=9p5 enganbegitu,
=9p5 49p5 menjadi399p5
*=!+! CSSSortand
)ada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat
memiliki lebih dari satu jenis, misalnya margin dapat memiliki jenis margin-top,
margin-right, margin-bottom,dan margin-le(t
mar#intop:()p5mar#inri#t:+)p5
mar#in%ottom:>)p5mar#inleft:=)p5
-
7/25/2019 Belajar HTML Dan CSS
84/162
aripada menuliskan seluruh property tersebut, kita bisa menggunakan C../horthand
yaitu menggabungkan seluruh +alue Etop, right, bottom, dan le(tF ke dalam satu
property
'ebagai !ontoh,kita akan menggunakan C/shorthand untuk )roperty margin menjadi
sepertiberikut :
mar#in : ()p5 +)p5 >)p5 =)p5
Masing-masing dari nilai tersebut adalah :
mar#in : top ri#t %ottom left
bisa kita simpulkan bahwa nilai dari &''-shorthand margin ini memiliki urutan searah
jarumjam dan dimulaidari margin-top
Kita juga bisa bermain-main dengan property margin ini, perhatikan dengan seksama
!ontohberikut:
Ketika kita memberikan satu nilai pada property margin, ini artinya kita
memberikan nilai tersebut pada seluruh sisi
mar#in: ()p5
enganpenulisanseperti ini, maka nilai dari margin-top, right, bottom dan le(t adalah
49p5R
Ketikakita memberikan dua nilai pada property margin,berartinilai selanjutnya
mengikutinilai sebelumnya &ontohnya sepertiini :
mar#in: ()p5 +)p5
)ada !ontoh di atas berarti kita memberikan nilai mar#intop dan rightbukan/,
nah nilai dari margin-bottom akan disamakan dengan nilai margin-top dan
margin-le(tsama dengan margin-right
-
7/25/2019 Belajar HTML Dan CSS
85/162
an ketika kitamenuliskanti&a nilai, maka nilai yang tidak diisi akan mengikuti
nilai yang diisi, sama halnya ketika kita memberi4 nilai
mar#in: ()p5 +)p5 =)p5
)ada !ontoh di atas, kita memberikan nilai untuk top, right dan bottom
'edangkan untuk le(t akan disamakan dengan right
)enggunaan nilai seperti ini juga berlaku pada padding, dan property-property
sejenis lainnya
*=!=! Border)roperty border digunakan untuk memberikan garis pinggir pada elemen, setidaknya
ada tiga property yang harus anda set,yaitu !olor, style dan width
%order3olor : %la30%orderst"le : solid%order;idt : >p5
namun andajuga
dapat menggunakanC
shorthandsehingga
menjadisepert
iberikut
:
%order : ;idt st"le 3olor
jadi jika kita ubah !ontoh kode di atas menjadi&''-shorthand, kodenya menjadiseperti
berikut :
%order : >p5 solid %la30
&obalah tambahkan kode tersebut pada latihan
sebelumnya dan yang akan anda dapatkan adalah seperti
berikut :
'ama halnya dengan )adding, penambahan property
borderjuga akan merubah ukuran dari bo5
Jadi,sepertiyang saya jelaskan sebelumnya Ketikaanda
Gambar 64 )enambahan border
-
7/25/2019 Belajar HTML Dan CSS
86/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
ingin membuat ukuran lebar bo5 tetap 399p5, maka anda harus menghitung ulang
width dari bo5 tersebut
Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi bo5, artinya jika
kita tentukan ukuran border sebesar 6p5, maka 39p5 Euntuk width, karena 6p5 untuk
le(t, dan 6p5 untuk rightF akan ditambahkan pada ukuran bo5 tersebut 'ehingga
ukuran bo5 berubah kembalimenjadi339p5
.ntuk itu kita kurangiwidth dari bo5 tersebut menjadi89p5 sehingga : 89p5 EwidthFJ
49p5 EpaddingF 39p5 EborderF 399p5
alam dunia &'', kasus seperti ini disebut dengan bo5-model $erdapat dua property
yang mempengaruhi ukuran dari sebuah bo5 yaitu padding dan border )erhatikan
skemabo5 modelberikut untuk !ontoh kasus di atas :
Gambar 67 skema bo5-model
Tahukah anda, bahwa setiap elemen2tag %T&' ditampilkan dalam bentuk
box2kotak,jadi aturan box/modelberlaku untukseluruh elemen%T&'
-
7/25/2019 Belajar HTML Dan CSS
87/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
Ba% *>
T"po#rap"
'e!ara default EbawaanF,halaman web yang kitabuat akan menggunakan (ont standar
yaitu Times )ew >oman Iamun anda dapat merubahnya dengan property (ont-(amily
"erikut !ontoh penggunaan property (ont-(amily:
fontfamil": 3ali%ri
Iamun perlu diperhatikan bahwa tidak semua )& memiliki (ont yang kita tentukan,
misalnya ketika kita menentukan (ont-(amily dengan !alibri, maka pada )& dengan
sistem operasi %inu5, tidak akan ditemukan (ont-tersebut
.ntuk itu anda dapat memberikan lebih dari satu jenis (ont, (ont-(ont yang disebutkan
selanjutnya akan menjadi pengganti ketika (ont sebelumnya tidak ditemukan
&ontohnya :
fontfamil": 3ali%ri arial taoma ,erdana sansserif
Ketika (ontjenis !alibri tidak ditemukan, maka yang akan digunakan adalah arial, ketika
tidak ditemukan (ont arial maka tahoma yang akan digunakan, begitu seterusnya
sampai kita tentukan jenis (ont yang dipakai, sans-seri( atau seri( dan browser akan
menggunakan (ont yang sesuai denganjenis yang disebutkan Eseri( atau sans-seri(F
"etika nama font memiliki spasi, maka anda harus memberikan tanda
petik2kutippada namafont tersebut.&isalnya ?segoe ui$.
-
7/25/2019 Belajar HTML Dan CSS
88/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
Apa itu Sansserif danSerif
alam typography jenis (ont dibagi menjadi dua yakni seri( dan sans-seri( "agian
ini akan menjelaskan se!ara singkat perbedaan dari keduajenis(ont ini
Serif
Kata 'eri( bisa diartikan sebagai kait,jadi jenis huru( seri( memiliki kait disetiap ujung
huru(nya ?ont jenis seri( yang paling terkenal adalah $imes Iew Boman )erhatikan
detailhuru(nya
?ont jenis ini bisa kita gunakan untuk teks dengan
konteks (ormal atau gaya klasik Iamun anda dapat
memadupadankan jenis (ont ini sehingga memberikan
kesan tertentu pada web anda
Gambar 6 ?ont jenis 'eri( memiliki
kait disetiap ujungnya
Sansserif
*rti dari sans, adalah tanpa Jadi sans-seri( bisa
diartikan sebagai jenis (ont tanpa kait Lang paling
umum digunakan untukjenis sans-seri(adalah arial
Jenis ini memberikan kesan dynamis dan luwes 'eperti
saya sebutkan sebelumnya anda dapat membuat kesan
tersendiri ketika memadupadankannya Gambar 66 ?ont jenis 'ans 'eri(
alam pengaturan browser, kita bisa memilih(ont untuk seri( dan sans-seri(Jadiketika
(ont-(amilymenggunakan seri(, maka (ont yang telah kitapilihlahyang akan digunakan
-
7/25/2019 Belajar HTML Dan CSS
89/162
Gambar 6;pengaturan (ont pada browser Google &hrome
Gambar 68 )engaturan (ont pada (ire(o5
.ntuk menentukan ukuran (ont, kita gunakan property fontsie :
fontsie : *(p5
andajuga dapat menggunakan satuan pt EpointFuntuk ukuran (ont :
fontsie : *(pt
-
7/25/2019 Belajar HTML Dan CSS
90/162
(ont yang kita gunakan pun dapat ditentukan ketebalanna dengan menggunakan
property (ont-weight Iilai yang bisa dipakai pada property ini adalah normal, bold,
bolder
font;ei#t : %old
"ukan tidak mungkin untuk mengatur kerning atau jarak antar huru( alam &'' kita
bisa merubah jarak antar huru( dengan property letter-spa!ing
letterspa3in# : *>p5
'emakin besar nilai pi5elyang diberikan semakin jauh jarak antar huru( *ndapun dapat
menggunakan nilai negati( untuk memperdekat jarak antar huru(
letterspa3in# :(p5
'edangkan untuk memberikan jarak antar baris, kita gunakan property line-height
lineei#t : +)p5
an untuk membuat te5t menjadi rata kiri, tengah atau kanan, kita gunakan
property te5t align Iilai yang dapat digunakan adalah le(t, !enter, right, dan justi(y
untuk rata
kiri-kanan
te5tali#n : 3enter
&obalahuntukbemain-maindengan property tersebut dan perhatikan perubahan yang
didapatkan "uatlah (ile latianE!tml, isi dengan beberapa paragra( beserta headingnya
dan terapkanproperty-propertyyang telah andapelajaridi atas
-
7/25/2019 Belajar HTML Dan CSS
91/162
Ba%*?
CSSma#e
'ebenarnya, berbi!ara tentang image dalam &'', maka kita sedang membi!arakan
ba!kground-image "agaimana menggunakan sebuah gambar menjadi ba!kground
untuk suatu elemen )ada bagian ini anda akan mempelajari penggunaan %a30#round
ima#e, teknik sprite,dan %a30#roundBrepeat
*?!*! %a30#roundima#e
.ntuk memanggil gambar sebagai ba!kground dari elemen, kita gunakan property
ba!kground-image)erhatikan !ontoh penggunaan property ini :
%a30#roundima#e : url 7Iima#es
-
7/25/2019 Belajar HTML Dan CSS
92/162
Gambar 6= "a!kground akan terus diulang untuk memenuhi ukuran elemen
*?!(! %a30#roundrepeat
)engulangan gambar ba!kground tersebut bisa kita atur dengan menggunakan
property ba!kground-repeat *nda bisa mengulang gambar se!ara horiontal Esesuai
sumbu 5F atau se!ara +ertikal EyF atau anda pun dapat tidak mengulangiba!kground
tersebut
%a30#roundrepeat : repeat5
Gambar 6< BepeatS akan mengulang ba!kground se!ara horiontal
-
7/25/2019 Belajar HTML Dan CSS
93/162
%a30#roundrepeat : repeat"
Gambar ;9 )engulangan ba!kground se!ara +erti!aldengan repeat-y
%a30#roundrepeat : norepeat
Gambar ;3 "a!kground tidak diulang
*?!+! %a30#roundposition
)osisi gambar ba!kground dapat kita tentukan letaknya dengan menentukan jarak 5
EhoriontalFdan y E+erti!alF
'ebagai !ontoh,kode berikut akan menggeserba!kground-imagesebesar 69p5 dari kiri
-
7/25/2019 Belajar HTML Dan CSS
94/162
%a30#roundposition5 : >)p5
Gambar ;4ba!kground bergeser selebar 69p5 dari kiri
an !ontoh berikut akan menggeserba!kground-imagesebesar 69p5 kebawah
%a30#roundposition" : >)p5
Gambar ;7 "a!kground turun 69p5 dari posisisebelumnya
*ndapun dapat menggunakan &''-shorthand untukba!kground-position:
%a30#roundposition : nilaiX nilaiG
misalnya
%a30#roundposition: >)p5 >)p5
-
7/25/2019 Belajar HTML Dan CSS
95/162
Gambar ;posisiba!kground ada pada 69p5 dari kiri dan atas
*?!=! ma#eSprite
engan adanya property %a30#roundposition untuk menentukan lokasi penempatan
gambar, kita dapat bermain-main dengan image-sprite >mage 'prite
adalah sekumpulan gambar berbeda yang disatukan dalam satu (ile gambar
Gambar ;6 !ontoh >mage sprite
$eknik ini dilakukan untuk memper!epat loading website tanpa harus memanggil
beberapa (ile gambar yang banyak &ukup satu gambar dan kita tentukan lokasi
gambar yang ingin ditampilkan
"uatlah (ile baru dengan nama (ile latian**!tml dan ketikkan markup #$M% seperti
berikut :
di, idKI%uttonJ
-
7/25/2019 Belajar HTML Dan CSS
96/162
U%utton V;idt:(=)p5ei#t:D+p5%a30#roundima#e : url7sprite!jp#8%a30#roundposition" : )
WU%utton:o,erV
%a30#roundposition" : D+p5
W
'tyle tersebut akan mengabil gambar yang terdapat di posisi 5, 9 dan posisi y turun
=7p5 'ehingga gambar yang ditampilkanadalah bagian berikut :
Gambar ;; #anya sebagian gambar yang ditampilkan
%alu apa maksud dari sele!tor Qbutton:ho+er/ :ho+er adalah salah satu )seudo &lass,
saya akan membahasnya dibab selanjutnya
&ontoh penggunaan >mage sprite ini banyak diimplementasikan pada beberapa situs
besar seperti Google atau (a!ebook, berikut ini adalah image sprite untuk i!on-i!on
yang ada dalam google plus
Gambar ;8 >mage 'prite Google )lus
-
7/25/2019 Belajar HTML Dan CSS
97/162
Ba%*
Floatin#
Jika sebelumnya untuk mengatur te5t/paragra( rata kanan atau kiri kita menggunakan
property te5t-align, namun bagaimana jika yang ingin kitaatur rata kiri atau rata kanan
adalah elemen #$M%
.ntuk itu kita dapat menggunakan property (loat Iilai yang digunakan yaitu le(t dan
right )ehatikan !ontoh pada lati&an*(!&tmlberikutdan perhatikan apa yang terjadi:
"uatlah markup #$M% sepertiberikut :
im# sr3KIlo#o!pn#J altKI#am%arJ
-
7/25/2019 Belajar HTML Dan CSS
98/162
Gambar ;= )enambahan ?loat akan mempengaruhi element disekitarnya
-
7/25/2019 Belajar HTML Dan CSS
99/162
*!*! Permasalaan pada floatin#
*da satu permasalahan ketika anda menambahkan (loating pada suatu elemen,
permasalahan ini bisa anda temuipada !ontoh kasus dalam (ile latian*+!tmlberikut
"uatlah markup #$M% sepertiberikut :
*! di, idKI;rapperJ(! di, idKIeaderJ! di, idKIarti0elJ
-
7/25/2019 Belajar HTML Dan CSS
100/162
Gambar ;< )ermasalahan ketika anda menerapkan ?loating
*da yang janggal LaU3ontent tidak memenuhiisi dari Uarti0el dan Uside%ar 'eharusnya
tinggi U3ontent otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam
kasus ini adalah artikel dengan tinggi 899p5 engan begitu seharusnya tinggi dari
U3ontent adalah 89p5 Editambah dengan padding-top dan padding-bottomF Jika
anda tidak mengerti !obalah untuk membuang property (loat yang ada, dan
perhatikanbahwa Qartikeldan Qsidebar berada di dalam Q!ontent
#al ini dikarenakan kita menambahkan (loating pada Uarti0el dan Uside%ar,sehingga
U3ontentmenganggap tidak ada element didalamnya *da dua !ara untuk
menyelesaikan kasus ini :
3 Menambahkan style o+er(low:hidden pada Q!ontent
U3ontentVNo,erflo;:idden
W
4 Menambahkan di+ kosong dengan style !lear:bothRsebelum penutup !ontent
Ndi, idKIside%arJ
-
7/25/2019 Belajar HTML Dan CSS
101/162
Gambar 89 )enyelesaian masalah ?loat
*!(! CSSReset
)ernahkah anda bertanya darimana warna link dari tag aberasal, atau mengapatag
% bisa menebalkan teks, atau kenapa tag * sampai tag ? memiliki ukuran
(ont yang berbeda-beda dan ketebalan yang berbeda )adahal kita sama sekali
belum menambahkan &''pada markup yang kitabuat/
'etiap browser memiliki 'tyle atau ?ile &'' yang akan diterapkan pada setiap halaman
web yang dibuka Keberadaan style yang dimiliki browser ini sangat membantu namun
terkadangjuga membingungkan bagi sebagian orang
&'' Beset ber(ungsi untuk mereset atau mengatur ulang seluruh property-property
yang telah disetting oleh browser, seperti margin, padding, warna huru( ElinkF ukuran
huru( heading dan lain sebagainya )erhatikan &'' !ontoh berikut
:
Z Vmar#in:)paddin#:)
W
'ele!tor bintang ETF digunakan untuk memberikan style pada 'eluruh elemen/$ag
#$M% alam kasus ini, kita akan mengatur ulang margin dan padding menjadi9 pada
seluruh elemen #$M% yang ada
-
7/25/2019 Belajar HTML Dan CSS
102/162
Ba%*D
Positionin#
alam &'' kitapundapat memposisikan E!ositioningF elemen sesuaikehendak kita #al
ini membuat desain web dengan &'' lebih (leksibel karena kita bisa menempatkan
elemen-elemen#$M% sesuai dengan keinginan kita atau tuntutan desain web
*D!*!Stati3
'e!ara de(ault, seluruh elemen/tag #$M% memiliki positioning stati! *rtinya anda
belum bisa/tidak dapat menentukan posisi elemen tersebut Ketikaanda ingin merubah
posisi dari elemen tersebut maka anda harus memberikan position:relati,e dan
selanjutnya anda dapat menggunakan property top, right, bottom, dan le(t untuk
menentukan posisi elemen yang bersangkutan
'ebagai !ontoh perhatikan kode #$M% dan &''berikut:
di, idKI%o5J
-
7/25/2019 Belajar HTML Dan CSS
103/162
W%a30#round : #reen;idt : +))p5 ei#t: +))p5top : *))p5left : ())p5
-
7/25/2019 Belajar HTML Dan CSS
104/162
Gambar 83 "o5 stati! tidak dapat ditentukanposisinya
*D!(! Relati,e
'ekarang !obalah untuk menambahkan position:relati,epada Qbo5 dan perhatikan
bahwabo5 tersebut bergeser 399p5 dari atas dan 499p5 dari kiri
U%o5V
W
%a30#round : #reen;idt : +))p5 ei#t
: +))p5top : *))p5 left :())p5position:relati,e
Gambar 84 )enambahan position relati+e memungkinkanpenempatanbo5
-
7/25/2019 Belajar HTML Dan CSS
105/162
*D!+!A%solute
)enambahan position:absolute akan membuat elemen tersebut terlepas dari aturan
penempatan elemen dan dibatasi oleh parent yang memiliki positioning relati+e 'ulit
memahamiapa yang saya tulisdiatas, kita langsungke !ontoh kasus
"uatlah markup #$M% sepertiberikut :
di, idKI%o5Jdi, idKI%o5(J)p5%a30#round:"ello;
Gambar 87 &hild elemen akan berada di dalamparentnya
-
7/25/2019 Belajar HTML Dan CSS
106/162
Qbo54 se!ara aturan ditampilkanberada di dalam di+ Qbo5, anda dapat terlepas dari
aturan tersebut dengan menambahkan positioning absolute 'ekarang tambahakan
position:absolutedan tentukan property bottom dan right
U%o5(V
W
;idt:>)p5ei#t:>)p5%a30#round:"ello;position:a%solute%ottom:)ri#t:)
Gambar 8 Qbo54 akan terlepas dari parent ketika ditambahkan position absolute
Qbo54 akan terlepas dari aturan penempatan elemen Ekeluar dari Qbo5F dan berada di
kanan bawah browser .ntuk membatasi pergerakan dari Qbo54 yang memiliki
positioning absolute, maka kita harus menambahkan positioning relati+e pada
parentnya yakni Qbo5
U%o5V
W
;idt:+))p5
ei#t:+))p5%a30#round:#reenposition:relati,e
-
7/25/2019 Belajar HTML Dan CSS
107/162
Gambar 86 )osisi absolute position dapat dibatasioleh olehelemen denga posisirelati+e
'ekarang Qbo54 berada di kanan bawah parentnya Qbo5 *ndapun dapat bermain
dengan nilai negati+e untuk mendapat e(ek tertentu
U%o5(V
W
;idt:>)p5ei#t:>)p5%a30#round:"ello;position:a%solute%ottom:(>p5ri#t:()p5
Gambar 8; )engaturan posisidengan absolute
)erhatikan !ontoh penggunaan absolute position yang sering ditemukan di internet
berikut :
-
7/25/2019 Belajar HTML Dan CSS
108/162
Gambar 88 &ontohKasus penggunaan *bsolute)osition
)erhatikan !ontoh berikut tombol untuk sharing +ia (a!ebook atau twitter dan
nomorposting ditampilkanberjajar sea!ara +erti!al dan setengah keluar dari kotak
artikel
ulit memahami>elati8e/Absolute @ayangkan ?>elati8e$sebagai sangkar bagi
?Absolute$,oleh karena itu pergerakan ?Absolute$dibatasi oleh ?>elati8e$.
*D!=!Fi5ed
'i(at dari position (i5ed hampir sama dengan absolute,namun posisi dari elemen (i5ed
akan tetap berada posisi yang ditentukan walaupun browser di7oom/in2out atau
discrollke atas atau keba
wah
)erhatikan !ontoh kode #$M% dan &''berikut :
di, idKIso3ialJ
-
7/25/2019 Belajar HTML Dan CSS
109/162
"erikut ini adalah !ontoh penggunaan position:(i5ed yang sering ditemuidi internet
Gambar 8= &ontohKasus Jadulpenggunaan (i5ed position
"agian 'ign .p di situs kaskus!oid menggunakan position (i5ed sehingga ketika anda
men-s!rollhalaman web, bagian tersebut tetap berada disana
-
7/25/2019 Belajar HTML Dan CSS
110/162
Ba%*E
PseudoClass
)seudo &lass digunakan untuk memberikan e(ek-e(ek tertentu pada sele!tor Misalnya
e(ek ketika !ursor berada di atas suatu elemen Eho+erF, ketika !ursor meng-klik suatu
elemen dan lain sebagainya
"erikut adalah !arapenulisanpseudo !lass :
sele3tor:pseudo3lass V propert":,alue W
Misalnya kita akan menambahkanpseudo-!lass:ho+er pada sebuah link
a:o,er V3olor : red
W
'tyle tersebut akan memberikan e(ek perubahan warna link menjadi merah ketika
!ursor berada di atasnya
Gambar 8< )seudo-&lass:ho+er memberikan e(ek ketika !ursor berada di atas elemen
*E!*! PseudoClass untu0 Lin0
-
7/25/2019 Belajar HTML Dan CSS
111/162
-
7/25/2019 Belajar HTML Dan CSS
112/162
a:a3ti,e V 3olor: oran#e W
)erhatikan juga urutan ketika penulisan semua pseudo !lass tersebut EJika anda
bermaksud menuliskanseluruh pseudo !lass untuk linkF:
:ho+erharus ditulissesudah :link dan :+isited
:a!ti+e harus ditulissesudah :ho+er
Jikatidak demikian maka e(ek tersebut tidak akan berjalan denganbaik
!seudo Class ho8er dan acti8e tidak hanya bisa digunakan untuk link saja melainkanbisa
diterapkan pada elemen2tag/tag %T&' lainnya. Masih ingat dengan demonstrasi Image
Sprite pada bab sebelumnya
*E!(! PseudoClass :rst3ild dan :last3ild
'elain pseudo-!lass untuk link/an!hor ada juga pseudo !lass :(irst-!hild dan :last-!hild
Keduanyadigunakan untuk memilihelemen pertama dan terakhir dari suatu sele!tor
Misalnya kita mempunyai sebuah unordered list EulF, dengan beberapa list-item di
dalamnya Kita bisa memberikan style khusus untuk list-item yang pertama dan yang
terakhir dengan menggunakan :(irst-!hild dan :last-!hild
ul
-
7/25/2019 Belajar HTML Dan CSS
113/162
Maka yang akan kita dapatkan adalah tampilansepertiberikut :
Gambar =9 )emberian pseudo !lass :(irst-!hild dan :last-!hild
%ist-item yang pertama akan memiliki warna huru( hijau dan yang terakhir memiliki
warna orange $idak hanya pada unordered list, andapun dapat menerapkannyapada
deretan elemen lainnya Misalnya elemen p yang terdapat dalam suatu di+
di,
-
7/25/2019 Belajar HTML Dan CSS
114/162
Ba%()
Studi6asus ( \ Pem%erianSt"le
-
7/25/2019 Belajar HTML Dan CSS
115/162
Gambar =4 )enempatan (ile latihan
-
7/25/2019 Belajar HTML Dan CSS
116/162
%alu tambahkan tag link untuk memanggil(ile style&''pada bagian header
ead
-
7/25/2019 Belajar HTML Dan CSS
117/162
E=
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
Gambar =7 Kontent tetap berada ditengah meskidi-7oom/in atau 7oom/out
)emberian nilai 8=9p5 untuk width bukan tanpa alasan, ini dikarenakan rata-rata
pengguna internet didunia menggunakan layar dengan resolusi minimal 39458;=p5
jadi lebar dari situs kita berada pada ukuran aman meskipun resolusi layar yang
digunakan minimal
'ebenarnya ukuran lebar minimal standar dari sebuah desain web adalah
-
7/25/2019 Belajar HTML Dan CSS
118/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
E>
UeaderV%a30#round: url7ima#es>>ei#t : )p5;idt : *))[paddin#:>p5mar#in : ()p5 )o,erflo; : idden
WUeader im#V ;idt:*+)p5 ei#t:+>p5 W
Kita menggunakan nilai 399U agar lebar dari header sama dengan lebar U;rapper an
untuk ba!kground anda bisa tebak apa yang saya lakukan La,saya menggunakan &''-
shorthand untuk memanggilgambar
)ertama kita tentukan lokasi gambar Eba!kground-imageF lalu jenis pengulangan
Eba!kground-repeatFdan terakhir kita tentukanba!kground-!olorsebagai (allba!kketika
gambar tidakberhasildimuat
Kita juga tambahkan o,erflo; : idden karena di dalam header nantinya akan ada
elemen yang memiliki (loating Emenu dan (ormF
Gambar =6 tampilan #eader setelah diberistyle
()!>!Menu
$idak ada style yang perlu anda tambahkan pada logo, jadi kita lanjut ke bagian menu
Menu yang kita buat adalah sebuah da(tar/list yang se!ara-de(ault ditampilkan
menurun
Kita dapat membuat da(tar tersebut menjadi rata-kanan dengan teknik(loating
UmenuutamaVmar#intop:+p5listst"le:none
W
-
7/25/2019 Belajar HTML Dan CSS
119/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
E?
Kitaberijarakantara menu dengan logo sebesar 7p5, dan property listst"le:none
ber(ungsi untuk menghilangkanlingkarandidepan setiap list
'elanjutnya kita akan membuat list/da(tar menjadi rata-kiri/sejajar dengan
menggunakanpropertidispla":inline :
Umenuutama liVYoat:leftpaddin#:Dp5 ()p5%orderri#t:*p5 solid U>>>>>>
W
0arna teks pada menu EbiruF dan garis bawah berasal dari tag @aA jadi kita ubah warna
dan menghilangkangaris bawahnya
Umenuutama li aV3olor : Uf]fffte5tde3oration:none
W
Gambar =; )enampilan Menu utama setelah diberistyle
()!?! Form
"agian (orm pen!arian ini sangat sederhana, kita hanya akan menentukan tinggi dan
meratakanankan (orm ini
Ueader formVYoat:ri#tmar#intop:p5mar#inri#t: *)p5
W
'elanjutnya kita hilangkanborder bawaan dari tag input, dan kita tentukan tinggi dari
input ini
Ueader form inputV%order:none
ei#t:()p5W
-
7/25/2019 Belajar HTML Dan CSS
120/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
E
Gambar =8 )enampilan akhir header
()!! 9aftar Arti0el
'elanjutnya kitaberistyle pada Udaftararti0el Langakan kita tentukan adalah
lebar/width dari di+ ini
Udaftararti0elV;idt:=)p5
Yoat:leftW
Gambar == )engaturan 0idth dan rata kiripada a(tar *rtikel
()!D! Arti0el
Jika anda perhatikan, setiap di+ artikel memiliki ba!kground putih dan antar artikel
memilikijarak
!arti0elV %a30#round:Uff]ffpaddin#:*)p5mar#in%ottom:()p5o,erflo;:idden
W
-
7/25/2019 Belajar HTML Dan CSS
121/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
ED
)erhatikan juga, gambar dari setiap artikel bisa kita setting denga (loating agar sama
dengan desain yang diberikan Ekarena gambar memiliki nilai (loat, maka kita tambahkan
o+er(low:hidden pada artikelF
!arti0el im#VYoat:leftmar#inri#t:*)p5;idt:())p5ei#t:*?>p5
W
$ak ada yang perlu dirubah untukjudul artikel Langperlu kita beristyle adalah tanggal
dan +iew Kita akan menambahkan warna ba!kground pada kedua bagian tersebut
!arti0el %V 3olor:U?*?)?)%a30#round:U999999 paddin#:+p5fontsie:*(p5 font;ei#t:%oldmar#inri#t:*)p5
W
Karena kedua elemen tersebut menggunakan tag b, maka kita tinggal menambahkan
sele!tor tersebut Kita juga mengatur ulang ukuran (ont dan ketebalan dari (ont
tersebut
"erijarakantar sinopsis dengan tanggal dan link dibawahnya
!arti0el pVmar#in:*)p5 )
W
$erakhir dari bagian artikelini, adalah penembatan link wat!hthiske sebelah kiri
!arti0el aV displa":%lo30te5tali#n:ri#t3olor:U?+?+?+
W
Kita menggunakan metode lain, selain menggunakan (loating Laitu dengan te5t-align
Iamunpertama-tamakita harus mengatur elemen tersebut menjadiblo!k
-
7/25/2019 Belajar HTML Dan CSS
122/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
EE
Bkuran lebar dari elemen adalah lebar dari konten2text yang terdapat di
dalamnya.
-
7/25/2019 Belajar HTML Dan CSS
123/162Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML
*)
%alu kita tentukan jarak perbaris dari te5t
Uside%ar pVlineei#t:()p53olor : U?+?+?+
W
Lang perlu kita beri style selanjutnya adalah da(tar
kategori yang terlalu menjorok ke kiri Kita dapat
merubahnya dengan menambahkan margin-le(t pada
tag ul
Uside%ar ulVmar#inleft:*)p5
W
'ama halnya dengan menu utama, warna biru dan garis
Gambar ni disebabkan oleh (loating yang kita tambahkan pada da(tar-artikeldan
sidebar
.ntuk memperbaikinya kita bisa menggunakan 3lear:%ot pada(ooter
UfooterV 3lear:%otmar#in:()p5 )te5tali#n:3enter%a30#round3olor: Uf)f)f)paddin#:>p53olor:U>>>>>>
W
'aya yakin anda sudah mengerti mengapa saya menambahkan property-property
tersebut,jika masih bingung silahkan ba!a kembalibab-babsebelumnya
-
7/25/2019 Belajar HTML Dan CSS
124/162
Gambar
-
7/25/2019 Belajar HTML Dan CSS
125/162
*)
Belajar HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
Ba%(*
Studi 6asus + \Sli3in#
)ada bab ini kita kembali melakukan latihan Kon+ersi desain web ke dalam #$M%
&'', namun dengan desain web yang berbeda, kita juga akan mempelajaribagaimana
teknik sli!ing gambar-gambaryang diperlukandalam desain web tersebut untukbagian-
bagian tertentu sepertiba!kground, logo, dan slide
Langakan kita kon+ersi kali ini adalah desain web bertema minimalis Jikadiperhatikan,
desain kali ini lebihsederhana dibandingkan desain sebelumnya
Gambar
-
7/25/2019 Belajar HTML Dan CSS
126/162
*)
*gar lebih mudah dalam proses markup, saya buatkan +ersi wire(rame untuk desain
web tersebut :
Gambar
-
7/25/2019 Belajar HTML Dan CSS
127/162
*)
enganbegitupastianda sudah memilikibayangan akan apa yang anda tulisbukan La,
marikita mulaike dalam proses markup #$M%
(*!*! Penulisan Mar0upHTML
'ebelum memulaiproses kon+ersi, buat (older baru untuk latihankon+ersi kita kali ini
dengan nama %atihan 'li!ing atau terserah anda "uat lagi satu (older dengan nama
imagesuntuk menyimpan gambar-gambarpendukung hasil sli!ing nanti
;rapper
'eperti kasus sebelumnya, seluruh konten website yang ada ditampung dalam sebuah
di+ dengan id wrapper,jadi sebagai permulaan kita buat markup standar #$M%beserta
sebuah di+ dengan id wrapper:
*! 4do3t"pe HTML(! HTML+! ead=! titleMiniml!
-
7/25/2019 Belajar HTML Dan CSS
128/162
*)
*! di, idKIeaderJ(! * idKIlo#oJMiniml
-
7/25/2019 Belajar HTML Dan CSS
129/162
*)
"agian ini berisi langkah-langkah Esesuai dengan desainF se!ara konsep,bagian ini
memiliki layout tiga kolom .ntuk itu kita gunakan di+ dengan !lass kolom Jadikira-kira
kodenya menjadisepertiberikut :
*! di, idKIlan#0aJ(! (Ba#aimana menjadi seoran# 2e% 9esi#ner1
-
7/25/2019 Belajar HTML Dan CSS
130/162
$idak sulitbukan untuk membuat markup #$M% dari desain yang diberikan Langperlu
anda lakukan adalah membayangkan layout dan pembagian masing-masing elemen
yang akan digunakan lalu mengkodekannya menjadi#$M%
Kodelengkap dari proses Markup yang telah kita lakukanadalah sepertiberikut:
*! 4do3t"peHTML(! HTML+! ead=! titleMiniml!
-
7/25/2019 Belajar HTML Dan CSS
131/162
'impan dengan nama inde5htmldi dalam (older yang kita buat sebelumnya %atihan
'li!ing
(*!(!Sli3in#
licing adalah proses pemotongan gambar-gambaryang akan digunakan dalam website
agar sesuai dengan desain yang diinginkan Gambar-gambar tersebut meliputi
ba!kground, logo, slide, i!on dan gambar pendukung lainnya
esain 0ebsite tersebut saya sertakan dalam ?ile penyerta buku ini, untuk
membukanya anda membutuhkan so(tware *dobe )hotoshop "uka (ile miniml%
website%desi&n.#sddan kita mulaiproses sli!ing
*da tiga !ara untuk melakukansli!ing denganphotoshop:
3 'li!e $ool : &ara ini lebih e(ekti( untuk melakukan proses sli!ing se!ara
bat!h/sekaligus Kita tinggal menyeleksi bagian-bagian yang akan di sli!e dengan
toolini kemudianpilih menu sa+e (or web de+i!e
Gambar
-
7/25/2019 Belajar HTML Dan CSS
132/162
Gambar 399 'li!ing dengan teknik &ropping
7 Manual 'li!ing : &ara ini adalah !ara manual namun lebih e(ekti( Mengingat
hanyabagian-bagiantertentu yang akan kita ambil, jadi kita !ukup memilihlayer
yang dibutuhkan,!opy, buat (ile baru,paste dan sa+e an &ara ini yang akan
kita gunakan untuk melakukan sli!ing pada desain website yang sedang kita
kerjakan
)ertama-tamakita akan mengambilba!kground, tepatnya di bagian atas gambar )ada
window layer pilih layer dengan nama ba!kground-grunge, lalu tekan TRL dan *lik
pada Laer Thumbnail %angkah ini akan menyeleksi bagian yang terdapat dalam
layer tersebut
Gambar 393 &trl&li!kuntuk menyeleksikonten dari layer
-
7/25/2019 Belajar HTML Dan CSS
133/162
'elanjutnya tekan Kombinasi tombol TRL- untuk meng-copy isi dari layer tersebut
"uat dokumen/!an+as baru dengan menekan TRL-+ ./ile 0 +ew .kuran dari !an+as
baru akan sesuai dengan isi dari seleksiyang kita copy
Gambar 394 Membuat (ilebaru untuk hasil sli!e
$ekan OK, lalu tekan tombol TRL-2 untuk mem-paste apa yang kita copy sebelumnya
#ilangkantanda matapada layer ba!kground untuk menyembunyikan layer ini karena
kita akan membuatnya transparan
Gambar 397 #ilangkan i!on mata untuk menyembunyikan layer
'elanjutnya kita tinggal menekan tombolTRL-ALT-SH3/T-S untuk menyimpan sebagai
gambar web/de+i!e atau pilih menu !/ile 0 Sa4e 'or Web 5 6e4i(es$)ilih (ormat )IG
agar gambar yang dihasilkan dapat memiliki area transparan $ekan 'a+e untuk
menyimpan gambar,simpan di (older >magesyang ada di dalam (older latihan yang kita
buat dengan nama ba(k&round.#n&Etanpa tanda kutipF
-
7/25/2019 Belajar HTML Dan CSS
134/162
Gambar 39 )IG-4 mendukung transparansi pada gambar
Jika gambar yang dibutuhkan memiliki area transparan, selalu pilih preset
!"#$%&
'elanjutnya kita membutuhkan gambar untuk 'lideshow )ada 0indow %ayer, "uka
(older 'lideshow lalu klik layer 'lide %akukanproses sli!ing sepertilangkah sebelumnya,
TRL-*lik, Copy, "uat okumen "aru, !aste Kali ini pilih preset 7P89Hi&h, dan simpan
di (older yang sama sepertisebelumnya dengan nama slide.:#&
Gambar 396 )reset J)G #igh untuk kualitas gambar tinggi
Gambar terakhir yang kita butuhkan adalah tanda panah pada bagian %angkah &ari
%ayer 'eparator di dalam (older langkah lalu lakukan langkah sli!ing seperti
sebelumnya 'impan dengan nama lan&kah.:#& .ntuk bagian ini !ukup satu saja
yang di sli!e, OK
Kini dalam (older images, kita mempunyai 7 gambar pendukung, ba!kgroundpng,
slidejpg dan langkahjpg
-
7/25/2019 Belajar HTML Dan CSS
135/162
Gambar 39; ?ile-(ile hasil sli!ing
(*!+! Pem%erianSt"le
%anjut ke bagian palingmenyenangkan Emenurut sayaF, pemberian 'tyle atau &'' "uat
(ilebaru dengan nama style&'', simpan di (olderyang sama dengan (ile #$M% yang kita
buat sebelumnya
CSSReset
'epertibiasa, kita buat dulu &'' Beset untuk mereset margin dan padding bawaan dari
tiapbrowser
ZVmar#in:)paddin#:)fontfamil":Jse#oe uiJarialsansserif
W
Bod"
.ntuk body kita akan tambahkan warna ba!kground dan gambar ba!kround yang telah
kita slice
%od"V
W
%a30#round3olor:UfDf%f=%a30#roundima#e: url7Iima#esngat, kode diatas bisa anda singkat dengan menggunakan &''-shorthand untuk
ba!kground sepertiberikut:
%a30#round:url7Iima#es
-
7/25/2019 Belajar HTML Dan CSS
136/162
'aya uraikan agar anda mengertimasing-masingbagiannya
Headin#
.ntuk heading, kita akan menggunakan jenis (ont yang berbeda dengan (ont
keseluruhan ?ontyang digunakan adalah museo slab *nda dapat menginstallnya dari
(older resour!es yang disertakan dalam buku ini
*(+=>?Vfontfamil":^Museo Sla% >))^ impa3tarialsansseriffont;ei#t: normal
W
2rapper
ari desain, ukuran wrapper adalah 849p5 *nda bisa menggunakan Buler $ool untuk
mengukur lebar wrapper dengan patokan gambar slide
U;rapperV ;idt:()p5 mar#in:)auto
W
Masih ingat (ungsi mar#in:) auto La,property ini ber(ungsi untuk membuat Qwrapper
menjadirata tengah meski di oom-in atau di oom-out
Header
i dalam header kita akan ada 4 elemen yang memiliki (loating Jadi gunakan solusi
(loating pada di+ header
UeaderVo,erflo;: iddenmar#in%ottom: ()p5paddin#:+)p5 )
W
.ntuk %ogo, karena kita menggunakan h3 maka yang kita perlukan adalah merubah (ont
sesuai dengan yang ada dalam desain ?ont yang digunakan adalah "useo Slab
;
-
7/25/2019 Belajar HTML Dan CSS
137/162
-
7/25/2019 Belajar HTML Dan CSS
138/162
La"out 6olom untu0 Ulan#0a
'eperti yang telah saya singgung, pada bagian Qlangkah kita akan menerapkan layout
kolom &aranya sangatlah mudah Kita hanya akan menambahkan (loating pada kolom
Ulan#0aV o,erflo;:idden%a30#round:;itemar#in:()p5 )
WUlan#0a (V paddin#:*)p5 WUlan#0a !0olomV
;idt:(()p5mar#in:*)p5paddin#:) +)p5 ) )Yoat:left%a30#round:url7Iima#es
-
7/25/2019 Belajar HTML Dan CSS
139/162
te5tde3oration:noneW
*khirnya proses Kon+ersi telah selesai, Jika anda membukanya di browser anda
akan mendapatkan tampilan yang sama dengan desain Iamun masih ada yang
kurang, Kitabelum membuat 'lideshowber(ungsi sebagaimana mestinya
Mengingat #$M% &'' tidak memiliki (ungsionalitas untuk membuat sebuah
slideshowD, maka bersama dengan ini saya akan memperkenalkan Ja+as!riptpada *nda
=)ada kenyataannya kita bisa membuat slideshow dengan menggunakan teknologi&''7, namun
mengingat teknik tersebut adalah teknik lanjut
-
7/25/2019 Belajar HTML Dan CSS
140/162
Ba%((
a,as3ript
((!*! Pen#enalana,as3ript
Ja+as!ript adalah bahasa pemrograman web yang berjalan disisi &lient/"rowser
Ja+as!ript biasa digunakan untuk memanipulasi element-element #$M% dan
menambahkan 'tyle se!ara otomatis atau lebih sederhananya membuat dokumen
#$M% menjadilebih>nterakti(
.ntuk menambahkan '!ript ja+as!ript pada dokumen #$M%, anda dapat
menggunakan tag s!ript dan diletakkandi dalam head atau di area manapun di dalam
tagbody
Nead
titlea,as3ript
-
7/25/2019 Belajar HTML Dan CSS
141/162
ketika (ile #$M% dibuka
-
7/25/2019 Belajar HTML Dan CSS
142/162
Gambar 398 Kotakpesan dengan ja+as!ript
"erikut !ontoh lain dari penggunaan Ja+as!ript yang bias anda lihat dalam (ile
latian*>!tml:
*! s3ript t"peKIte5t! alert7_Apa 0a%ar _nama_4 Sa"a a,as3ript senan# %er0enalan den#an Anda_8?! WelseV! alert7_Hmm sepertin"a anda tida0 mau %er0enalan den#an sa"a!_8D! WE!
-
7/25/2019 Belajar HTML Dan CSS
143/162
Gambar 39= &ontohpenggunaan kondisi
'!ript tersebut adalah !ontoh sederhana dari penggunaan Ja+as!ript, *nda dapat
mempelajarinya se!ara lanjut di http://w w ww7 s !ho ols ! om/j s/
((!(!j`uer"
jCuery, adalah libraryatau sekumpulan kode ja+as!ript siap pakai untuk memanipulasi
elemen #$M% dengan mudah dan !epat *nda dapat mendownload jCuery di situs
resminyahttp://w w wjVuery! om
.ntuk menggunakan jCuery, *nda diharuskan menyertakan jCuery dengan
menggunakan tag '!ript
s3ript t"peKIte5t
-
7/25/2019 Belajar HTML Dan CSS
144/162
'!ript tersebut akan merubah warna body dengan menambahkan atribut style yang
memiliki nilai %a30#round3olor:red!
((!+! j`uer"Plu#in
jCuery )lugin adalah plugin/suplemen untuk menambah (ungsionalitas dari jCuery
)lugin ini biasanya dibuat untuk memudahkan pengguna dalam membuat suatu
aplikasi'alah satunya adalah membuat 'lider, 'lideshowdan lain sebagainya
*nda tinggal memanggil library plugin jVuery tersebut seperti anda memanggil (ile
ja+as!ript, selanjutnya tinggal memanggil(ungsi yang disediakan oleh librarytersebut
'ebagai !ontoh, ada sebuah plugin jCuery 'lider dan kita akan menerapkannya pada
elemen #$M% yang memiliki id slider, )lugin tersebut menyediakan (ungsi sliderEF
untuk membuat markup #$M% kita menjadi sebuah slider jadi anda tinggal
mengetikkan s!riptberikut:
7IUsliderJ8!slider78
*nda dapat men!ariplugin-pluginjCuery yang anda butuhkan di internet atau anda
dapat men!arisebagian plugin jVuerydi ttp:
-
7/25/2019 Belajar HTML Dan CSS
145/162
Gambar 39< jCueryu telah merangkum sebagian plugin jCuery dari *-D
-
7/25/2019 Belajar HTML Dan CSS
146/162
Ba% (+
Studi 6asus = \ Penam%aan j`uer"
Slider
$erkait dengan %atihan 'li!ing sebelumnya kita akan menambahkan (ungsionalitaspada
'lider agar berjalan sebagaimana mestinya alam kasus ini kita akan menggunakan
)lugin "asi! jCuery 'lideryang bisa anda download di http://bas i!-sl ider!om/
ebelum menggunakan plugin juery, sebagiknya anda @aca
-
7/25/2019 Belajar HTML Dan CSS
147/162
7 Jika sudah melakukan poin 3 dan 4 di atas, baru kita panggil (ungsinya seperti
berikut :
7do3ument8!read"7fun3tion78V
7IUidslideso;andaJ8!%js7V_;idt_: E=)_ei#t_: +=)_so;Mar0ers_: true_so;Controls_: true_3enterMar0ers_: false
W8W8
i dalam (ungsi bjVs terdapat beberapa parameter untuk pengaturan slider, *nda
dapat memba!a penjelasan tiap parameternya di link yang saya sebutkan di atas
Penerapan pada Studi 6asus 0e+
)ada 'tudikasus ke- ini, kita akan membuat slider yang terdapat pada studikasus ke-7
ber(ungsi sebagaimana mestinya yakni sebagai slider
Peru%aan Mar0up HTML
'ebelum kita mulai membuat slider ber(ungsi dengan baik, rubah markup #$M%
berikut:
*! di, idKIslideso;J(! im# sr3KIima#es
-
7/25/2019 Belajar HTML Dan CSS
148/162
*)!
-
7/25/2019 Belajar HTML Dan CSS
149/162
A0ti,asi Plu#in
%angkah terakhir adalah pemanggilan (ungsibasi! slider yang akan merubah markup
#$M% kita menjadi'liderbeneran$ambahkan kode berikut setelah kodepemanggilan
library%asi3juer"slider!js di atas
*! !!!(! s3ript t"peKIte5t
-
7/25/2019 Belajar HTML Dan CSS
150/162
Ba%(=
$XTRAS
(=!*! 9e,eloper Tools danFire%u#
Keduaadd-on ini telah saya !eritakan se!ara singkat di awal buku ini ?ungsi keduanya
hampir sama yakni menyediakan berbagai in(ormasi untuk e+eloper web termasuk
in(ormasi tentang dokumen #$M% dan &'' yang menjadikonsentrasi dalam buku ini
$ool ini biasa digunakan untuk mempelajari struktur #$M% dan &'' dari web lain,
misalnya ketika kita ingin mengetahuibagai mana struktur dari suatu bagian dalam
web, anda tinggalklik kanan bagian tersebut,danpilih menu >nspe!t2lement
'e!ara otomatis blo!k #$M% bagian tersebut akan ditampilkan lengkap dengan
style/&'' yang diterapkan
Gambar 333 Kode #$M%beserta 'tyle yang diterapkan
engan begitu anda dapat mempelajari style yang digunakan *nda-pun dapat
menambah, menghapus, dan mengeditnya dengan mengklik dua kali pada kode yang
bersangkutan dan anda dapat melihatlangsung perubahan yang terjadidalambrowser
)erubahan yang anda lakukan tidak bersi(at permanen, ketika browser anda re(resh
semuanya akan kembalisepertisemula
-
7/25/2019 Belajar HTML Dan CSS
151/162
(=!(! enCodin#
Den&oding adalah plugin tambahan yang tersedia untuk beberapa te5t editor, seperti
Iotepad, 'ublimete5t dan masih banyak lagi .ntuk da(tar te5t editor yang didukung
oleh en !odingbisa dilihatdisitus officialnya
http://! odego ogle!o m /p/ en-! oding/
.ntuk instalasi en !oding di Iotepad, anda !ukup masuk ke menu $ools, )lugin
Manager 'elanjutnya s!roll sampai anda melihatDen&oding "eri tanda dan klik tombol
installuntuk mulaimenginstallen !oding
)enggunaan en !oding sangatlah mudah )lugin ini dibuat untuk memper!epat
penulisankode #$M% dan &'', sebagai !ontoh perhatikan kode #$M%berikut :
di, idKI;rapperJdi, idKI3ontentJ
-
7/25/2019 Belajar HTML Dan CSS
152/162
penulisan sele!tor &'' untuk id Eba!a kembalibab pengenalan &''F engan begitu
untuk penulisan sebuah di+ dengan nama !lass artikel anda tinggal menuliskan titik
sebelum nama !lass E.artikelF
Ketika anda tidak menambahkan nama tag yang akan dibuat, maka tag yang akan
dibuat adalah tag di+ Jika *nda ingin membuat tag tertentu anda tinggal mengetikkan
nama tag tersebut Misal :
ulUmenu
*kan menghasilkan
ul idKImenuJ
-
7/25/2019 Belajar HTML Dan CSS
153/162
Den Coding sangat dian'urkan untuk anda yang sudah memahami %T&' dan
C, jika anda masih belum mengerti sepenuhnya akan %T&' dan Csaya
sarankan untuk mengetik kode secara manual agar anda mengingat apa yang
sedang anda pelajari.
'ebenarnya masih banyak lagi tata !ara penulisan kode #$M% dengan bantuan Den
&oding ini, begitu pula penulisan property-property &'', anda dapat memba!a da(tar
singkatan en-!oding yang bisa di download dari situs resminya
(=!+! Menam%a0an 9umm"
Te5tKetika anda membutuhkan sejumlah teks/kalimat/paragra( untuk kepentingan +isual,
*nda akan membutuhkan dummy te5t ummy te5t adalah sekumpulan
kalimat/paragra( tanpa makna seperti:
Lorem ipsum dolor sit amet 3onse3tetur adipisi3in# elit sed do eiusmod tempor in3ididunt utla%ore et dolore ma#na aliua! /t enim ad minim ,eniam uis nostrud e5er3itation ullam3ola%oris nisi ut aliuip e5 ea 3ommodo 3onseuat!
)aragra( tersebut tidak memiliki makna namun berguna ketika kita membutuhkan
konten !epat
.ntuk mendapatkan teks tersebut, jika anda menggunakan te5t editor sublime te5t,
anda tinggalmengetikkan lorem lalu tekan tombol$ab
*nda juga dapat membuatnya dengan menggunakan *plikasi pengolah kata Mi!roso(t
0ord, !aranya dengan mengetikkan :
Klorem7jumlaPara#raf jumla6alimat8
%alu tekan 2nter untuk mendapatkan te5t dummy sesuai dengan jumlah kalimat dan
paragra( yang ditentukan
Jikaanda menggunakan te5t editor 'ublime te5t, anda tinggal mengetikkan kata lorem
dan tekan tab untuk mendapatkan dummy te5t ini
-
7/25/2019 Belajar HTML Dan