belajar html dan css

Upload: sigit-hari-pranoto

Post on 28-Feb-2018

249 views

Category:

Documents


0 download

TRANSCRIPT

  • 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