LPK GLOBAL INTERMEDIA |Modul Belajar | Website
advertisement
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
0
DAFTAR ISI
Pendahuluan
Apa itu website ……………………………………………………………………………….
Cara Kerja Website ………………………………………………………………………….
Apa itu Hosting ………………………………………………………………………………
Apa itu Domain ………………………………………………………………………………
Session I | Mendesain
Website dengan CMS Wordpress
Membuat Email baru …………………………………………………………………………
Mendaftar untuk akun baru di www.wordpress.com ………………………………………
Memilih domain free di wordpress.com …………………………………………………….
Masuk Ke Dashboard …………………………………………………………………………
Navigasi Dashboard …………………………………………………………………
Layout Dashboard …………………………………………………………………..
Menu Setting Dashboard ……………………………………………………………
Seting Profile Anda …………………………………………………………………..
Session II | Dasar-dasar HTML ………………………………………………….
Session III | Dasar-dasar CSS ……………………………………………………
Session IV | Import dan Export Database ………………………………………..
Session V | Instal dan Setting Theme , Faficon dan Slider ……………………..
Install Theme gratis dari wordpress.org
Install Tema manual
Mengganti Thema
Kustomasi Thema :
Memasang Favicon
Mengubah layout pada thema simplecatch
Mengubah teks pada menu search
Mengganti Continue Reading
Setting Features Slider
Uninstall Thema
Session VI | Kustomasi Wordpress
Kustomasi Menu
Membuat Menu ke Link tertentu
Membuat menu dari halaman statis/page
Membuat menu untuk kategori tertentu
Mengedit menu, mengatur dan membuat sub menu
Menghapus menu
Widget
Menambah widget
Menonaktifkan widget
Mencari dan menginstall widget
Uninstall widget
Session VII | Plug in Terpenting dalam Wordpress dan Aplikasi Toko Online
Session VIII | Teknik SEO
LAMPIRAN
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
1
Pendahuluan
Website merupakan singkatan dari World Wide Web atau
disingkat www atau orang sering erringbut dengan istilah singkat
web saja. Website adalah halaman informasi yang disediakan
melalui jalur internet sehingga bias diakses seluruh dunia. Website
merupakan kumpulan komponen yang terdiri ats teks, gambar,
suara, video, animasi dan sebagainya. Sehingga merupakan
informasi yang menarik dan dinamis.
Semua informasi dalam website itu disimpan di sebuah internet webserver atau disebut
webserver saja. Informasi tersebut umumnya ditampilkan dalam bentuk HTML ( Hypertext
Markup language). Dari Komputer yang kita gunakan informs itu bisa kita akses melalui web
browser seperti Mozila atau google chrom.
Website sebagai sebuah halaman informasi yang akan kita ekspose itu harus disimpan
dalam server yang disebut web server . Perusahaan jasa tempat menyimpan data-data kita itulah
yang sering disebut dengan perusahaan hosting ( web hosting).
Sedang domain adalah alamat website kita, seperti www.kursus-informatika.com
Domain yang kita gunakan ada yang menggunakan domain utama seperti dot Com, atau .net .
Tetapi ada yang merupakan sub domain , artinya kita menggunakan domain milik pihak lain
seperti isalnya doman.wordpress.com atau doman.blogspot.com. Untuk pelatihan di LPK
Global, kami rekomendasikan dengan sub domain free yaitu dengan wordpress.com dan untuk
memaksimalkan latihan kita menggukan domain free milik idhostinger yang aplikasi dan
plugins bisa dipraktekkan seperti web professional.
Saat ini pembuatan blog atau web site terbilang cukup mudah, hal ini karena adanya
suatu sistem yang disebut Content Management System (CMS), yang bisa dikatakan sebagai
“template website”. Dengan CMS kita tinggal mengupload (copy) CMS ini ke server,
menginstallnya setelah selesai tinggal masuk ke administrator untuk mengatur dan mengisi
artikel yang diinginkan.
Banyaknya CMS open source yang tersedia kadang membuat kita bingung untuk
memilihnya. Tetapi jika masih awam dengan CMS, apalagi belum banyak tahu tentang web
programming maka sebaiknya memilih yang sederhana dan mudah, seperti wordpress dan
Blogspot.
Jika para blogger / pengguna wordpress ditanya mengapa menggunakan wordpress?
Mungkin sebagian akan menjawab karena kemudahannya dan konfigurasi yang relatif
sederhana. Bagi pengguna awal biasanya tidak memerlukan waktu lama untuk bisa menguasai
dan memahaminya. Sederhana bukan berarti minim fasilitas. Memang fasilitas bawaan
wordpress sendiri mungkin masih belum mencukupi jika anda ingin web dengan berbagai
fasilitas yang wah, tetapi dengan besarnya komunitas dan dukungan plugins yang begitu banyak,
kita tinggal menambahkan fasilitas apa yang diinginkan. Mulai dari konfigurasi administrasi,
statistik, forum, iklan, artikel, kalender, dan sebagainya.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
2
SESSION I
Mendesain Website dengan CMS Wordpress
Langkah-langkah untuk mendesain website dengan CMS Wordpress adalah sebagai
berikut :
1.1. Membuat Akun E-mail di mail.google.com
1.2. Buka www.wordpress.com > Login
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
3
1.3. Masuk kembali ke E-mail dan aktifkan blog kita
1.4. Selanjutnya masuk ke setingan Dashboard Wordpress
1.4. Setting Dashboard Wordpress
Ketika blog Anda sudah jadi Anda berarti sudah dapat mengakses semua fitur dan
mengupdate, memodifikasi semua tampilan dan mengakses semua dashboard. Mari kita
kenalai satu-persatu terlebih dahulu menu pada dashboard admin woardpress berikut :
1.
Lay out modul dashboard dan menon aktifkan modul dashboard
2.
Setting Theme terlebih dahulu
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
4
Catatan : Pilih theme yang mendukung dan bersahabat dengan Search engine
optimasing [ SEO ]
3.
Post/Tulisan : Menu post/tulisan pada dashboard terbagi kembali menjadi beberapa
sub menu yang masing-masing sub menu diperuntukan untuk kegunaan yang berbeda
yaitu sebagai berikut :
All Post/semua Tulisan : berfungsi sebagai tempat daftar dan
jumlah postingan .
Add New/Tulisan baru : ini berfungsi sebagai tempat dimana kita bisa
melakukan posting.
Categories/Kategori : Berfungsi untuk penunjuk kategori tulisan pada blog
atau pemetaan Artikel
Tags/penandaan : Berbeda dengan kategori tags berfungsi sebagai penandaan
yang hamper sama dengan kategori.
3. Category dan Tag
Tampilan category ini disetting setelah anda memasukkan artikel, kemuadian pada
kanan bawah anda diminta untuk memasukkan kategori mana artikel anda. Anda juga
diminta untuk memasukkan future image pada kotak dibawahnya.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
5
Tugas :
Langkah awal sebelum pengaturan lainnya lakukan sebagai berikut :
1.Posting minimal 3 artikel terlebih dahulu untuk memudahkan desain tata
letak, menu dan lainnya.
2.Siapkan beberapa Image yang sesuai dengan tema Blog Anda
3. Persiapkan sebuah Header, sebaiknya anda setting dulu di Corel Draw
atau Photo Shop
2.
Appearance/Tampilan : terdiri atas beberapa sub menu
Themes/Tema : Disini anda bisa mengatur tema blog yang sudah tersedia dengan
gratis.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
6
Widgets/Widget : Pengaturan widget blog dari sisi kiri maupun sisi kanan blog
anda.
Menus/Menu : Mengatur menu yang terdapat ada blog anda, termasuk membuat
menu drop down seperti di Blogspot.
Header/: Untuk mengatur tampilan bagian atas atau judul wordpress
Background/Tampilan Dasar : Mengatur tampilan dasar / tampilan awal jendela
word press
Editor/Pengeditan : Menu ini digunakan untuk editing keseluruhan.
2. Media :
Library/Pustaka : berfungsi untuk mengetahui semua jumlah file yang di upload
pada blog yang dikelola.
Add New/Tambahan Baru : Berfungsi sebagai tempat dimana kita dapat
menambahkan file, video, gambar, dll.
3. Pages/Halaman : Berfungsi untuk membuat halaman yang sifatnya permanen.
All Pages/Semua Halam : Berfungsi untuk melihat semua jumlah halaman.
Add New/Tambahkan Baru : Berfungsi untuk membuat Halaman baru.
4. Comments/Komentar : Mengatur komentar yang masuk pada halaman yang dibuat.
6. Users/Pengguna :
All Users/Semua Pengguna : Untuk melihat semua pengguna yang memberikan
contributor terhadap blog Anda.
Add New /Tambahan Baru : Menambahkan engguna baru pada blog.
Your Profile/Profil Pengguna : Melihat profil Anda sendiri.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
7
7. Tools/Perkakas : Melalui menu Perkakas ini, Anda dapat mengatur tag,
mengimpor dan mengekspor tulisan.
8. General Setting :
General/Umum : pengaturan umum pada blog seperti kata-kata, Logo blog, header
blog, dll.
Writing/Menulis : pangaturan menulis yaitu pengaturan yang di peruntukan
sebagai pengaturan media postingan seperti menu font, dll.
Reading/Membaca : pengaturan untuk para pembaca ketika membuka Homepage
blog Anda.
Discussion/Diskusi : Untuk pengaturan diskusi di blog Anda seperti commend pada
postingan.
Media/Media : Pengaturan penyimpanan file yang di upload pada blog.
Permalinks : Permanent Link (bisa diedit untuk kepentingan SEO).
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
8
SESSION II
DASAR-DASAR HTML
Apa perbedaan HTML dan CSS ?
HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks)
struktur dan makna semantik.
CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang
bagus.
DASAR-DASAR HTML
Untuk memalahmi bahasa HTML terlebih dahulu harus mengetahui struktur penulisan HTML.
Dalam penulisan HTM mengenal 3 istilah penting yaitu Elemen, Tag dan Atribut.
Elemen, Tag, dan Atribut
Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika
menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.
(1). Elemen
Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam
dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen
HTML ialah :
p, b, a, h1, div, span, em /<i>, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat
hyperlink ke halaman lain:
<a href : …..>
(2). Tag
Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen
tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka
direpresentasikan dengan nama elemen yang diapit symbol “< >”, contohnya <a>. Tag
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
9
penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”.
Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:
<a>Ini adalah sebuah link</a>
(3). Atribut
Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen.
Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut
standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan
untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan
gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan
di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya
menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya
dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi
elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen
tersebut (href):
<a href=”http://www.globalindo.xyz.com”>Ini adalah
sebuah link</a>
Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini
berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya
“href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan
dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan.
Struktur Dokumen HTML
Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal
yang harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
Apa arti dari struktur tersebut? Mari kita lihat satu per satu.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
10
Elemen DOCTYPE
Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang
digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang
digunakan adalah HTML5.
Elemen HTML
Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen
HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir
dokumen. Atribut HTML lang berfungsi untuk mendeklarasikan (baca: ngasih tahu) mesin
pencari tentang bahasa apa yang digunakan
Elemen head
Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data
(informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke
berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan
nampak pada halaman web hasil tampilan browser.
Elemen title
Memberikan judul dokumen.
Elemen body
Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan
kepada pengguna.
Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode
berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>
<p>
Paragraf kedua.
</p>
</body>
</html>
Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu
File -> Open... pada browser).
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
11
Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan
Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil
tampilan dari kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen
HTML dengan tampilan hasil olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa
elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya
oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan
elemen p kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca
bahwa terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak.
Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan
berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p
berbeda dengan jarak antara h1 dengan p. Hal ini dikarenakan elemen h1, sebagai kepala teks,
dianggap memiliki makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan
memperbesar huruf, serta memberi jarak yang lebar antara elemen h1 dengan elemen-elemen
lainnya).
LATIHAN HTML :
(1). Membuat Paragraf <p>, Header <h1>
<!DOCTYPE html>
<html lang="en">
<head>
<title>BELAJAR HTML</title>
</head>
<body>
<h1>TRIK BELAJAR HTML</h1>
<p>
Belajar HTML yang baik adalah memahami struktur bahasa
HTML terlebih dahulu. Dimulai Memahami ELEMEN,TAG,dan ATRIBUT.
Lalu dipraktekkan dalam pembuatan Website.
</p>
<p>
Langkah kedua adalah erus belajar dan mencoba tidak boleh
bernhenti hingga mahir mempraktekkannya. Ayo terus belajar!..
</p>
</body>
</html>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
12
(2). Perataan Halaman
<HTML><BODY>
<P align="center">paragraf rata tengah</p>
<P align="right">paragraf rata kanan</p>
<P align="justify">paragraf rata kiri dan kanan</p>
</HTML></BODY>
(3). Text Warna
<body>
<font color="#ff0000">selamat siang</font>
</body>
(4) Text Warna dan Ukuran Font
<body>
<font color="#ff0000" size="7">selamat siang</font>
</body>
(5). Cara menambah gambar :
<body>
<font color="#ff0000" size="7">selamat siang</font>
<img src="sample.jpg">
</body>
(6). Agar TEXT pindah ke Bawah < BR >
<body>
<font color="#ff0000" size="7">Wordpress<br>Joomla<br>Drupal<br>
</font>
(7). Membuat Hyperlink
<body>
<font color="#ff0000" size="7">selamat siang</font>
<br> <a href="pindah.html"><img src="sample.jpg"></a>
</body>
(8). Bullet dan Numbering
<ul> ( Bullet )
<li>wordpress</li>
<li>Drupal</li>
<li>Jumla</li>
</ul>
<ol> ( Numbering )
<li>Wordpress</li>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
13
<li>Drupal</li>
<li>Jumla</li>
(9). Running Text
<marquee behavior="alternate" bgcolor="yellow">Selamat Datang Global
Komputer</marquee>
(10). Membuat Garis atas dan Bawah
<h1 align="center" </h1>
<hr align="center" width="70%" color=#000000" size="3">
<div align="center">COMPUTER SHORTCOURSE SPECIALIST</div>
<hr align="center" width="70%" color=#000000" size="3">
(11). Membuat huruf menjorok ke atas <sub> dan Ke bawah <sup>
lambang air adalah H<sub>2</sub>O<br>
7<sup>2</sup> adalah 49
Hasilnya :
(12). Menentukan Marjin
TAMBAHAN
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
14
HTML <hr> element digunakan untuk memisahkan konten atau paragraf satu dengan lainnya
berdasarkan pengelompokkan tema atau topik masing-masing, istilahnya adalah paragraph-level
thematic break.
Untuk memisahkan konten secara tematik, cukup ditulis <hr> saja, tanpa tag penutup (</hr>)
atau lebih baik lagi dengan format self closing tag seperti ini: <hr /> yang biasa digunakan
dalam format XML.
HTML <dt> element menunjukkan sebuah Definition Term yang digunakan untuk
merepresentasikan sebuah istilah pada daftar definisi (Definition list (<dl>)).
<dt> ditulis didalam
dan <dd> merupakan
element <dl> dan biasanya terletak sebelum <dd> element, sehingga <dt>
anak element dari <dl>.
Dalam penggunaannya, element <dt> tidak selalu menunjukkan istilah yang memiliki definisi.
Untuk memarkup konten yang memiliki definisi dengan jelas, maka tambahkan element <dfn>
di dalam <dt> tersebut.
HTML <ins> element merepresentasikan sebuah teks yang dimasukkan atau disisipkan
(inserted text) dalam sebuah dokumen.
<ins>
ditulis beriringan dengan element <del> yang biasanya digunakan untuk memperbaharui
(update) teks atau konten tertentu, <del> menunjukkan konten yang dihapus (ditandai dengan
tulisan yang dicoret) sedangkan <ins> menunjukkan konten baru yang dimasukkan, sebagai
pembaharuan dari konten lama yang dihapus tersebut.
HTML <pre> element digunakan untuk merepresentasikan sebuah blok teks preformat
(preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan
ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file
(dokumen HTML).
<pre>
sering digunakan sebagai induk element bagi <code>, yang mana didalam element pre
terdapat element code yang digunakan untuk menulis source code.
abbr
element menunjukkan sebuah abbreviation (singkatan) atau acronym (akronim), seperti
HTML, PMI, MPR, RT, RW dan lain sebagainya yang semuanya menunjukkan singkatan dan
memiliki kepanjangan. Element <abbr> digunakan bersamaan dengan atribut title yang
menjelaskan kepanjangan dari singkatan tersebut dan tidak boleh berisi keterangan lain.
Kepanjangan yang ditulis pada title attribute dapat dilihat ketika mouse/pointer menyentuh
(berada diatas) element abbr tersebut.
HTML <nav> element merepresentasikan link navigasi (navigational link).
Link-link yang merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan
(digabungkan) di dalam element <nav>. Akan tetapi, tidak semua link dapat ditulis
(digabungkan) dalam element <nav>, seperti beberapa link yang ditulis didalam <footer>
element, tidak tepat bila digabungkan dalam <nav> element.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
15
HTML <iframe> element digunakan untuk merepresentasikan konteks jelajah dari sebuah
dokumen atau file lain untuk dimasukkan (embed) dalam dokumen yang bersangkutan.
<iframe>
element sering digunakan untuk menyisipkan konten dari website lain, contohnya
menyisipkan script iklan dari website pihak ketiga, memasukkan widget atau aplikasi tertentu,
dan memasukkan video dari sumber lain (seperti Youtube, Vimeo dan sejenisnya).
HTML <span> element merupakan element inline (elemen yang tidak membentuk garis baru)
yang digunakan untuk mengelompokkan beberapa element yang dimaksudkan untuk
memudahkan dalam pemberian style (dengan CSS). Misalnya, memudahkan untuk men-style
element ketika digunakan bersama dengan global attributes, contohnya: attribute class, lang
atau dir.
<span>
element hanya digunakan pada sebuah konten yang tidak merepresentasikan apapun,
yang tidak memiliki arti semantic (semantic meaning).
Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut
dilintasi atau disentuh oleh mouse (panah mouse).
HTML <content> element digunakan untuk menyisipkan konten (isi, baik berupa teks maupun
lainnya) didalam Shadow DOM.
<content>
element tidak digunakan sebagaimana biasanya, seperti HTML element lainnya. Ia
digunakan bersamaan dengan Web Component. Oleh karenanya, untuk menggunakan element
ini dan agar kode berjalan dengan baik, maka browser yang digunakan harus mendukung
(support) Web Components.
TML <col> tag menunjukkan kolom (column) didalam sebuah table yang pada umumnya
ditulis didalam element <colgroup>. col didalam colgroup dapat ditulis lebih dari satu yang
menunjukkan urutan kolom dari group kolom (colgroup) tersebut.
HTML <col> tag ditulis didalam element <table> setelah element <caption> dan sebelum
element<thead>, <tbody>, <tfoot> dan <tr>.
HTML <col> tag berguna ketika ingin memberi style sebuah table berdasarkan kolom tertentu
secara serentak, sehingga tidak menggunakan perulangan style yang sama untuk setiap cell
dalam table tersebut.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
16
SESSION III
DASAR-DASAR CSS
Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga
istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan
mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.
(1). Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan
metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya
tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di
bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan
gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML:
p {
....
}
Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector
merupakan seluruh kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen
p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini,
selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas,
ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara
mendalam dapat ditemukan pada bab.
(2). Property
Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah
elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:
p {
color: ...;
font-size: ...;
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
17
}
Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”).
Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu
color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran
teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai
detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat
pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan. Daftar
properti sendiri dapat dibaca di.
(3). Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan
sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin
memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi
nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti
Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam
format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh
value dari properti yang ada pada kode sebelumnya:
p {
color: #FFFF00;
font-size: 50px;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks
dari CSS adalah seperti yang ditampilkan pada gambar berikut:
Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing
property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan
oleh property tersebut.
Penyingkatan Nilai dari Property
Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat
nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:
/*
Bentuk Panjang
*/
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
18
p {
margin-top
margin-right
margin-bottom
margin-left
:
:
:
:
10px;
20px;
10px;
20px;
}
/*
Bentuk Singkat (1)
*/
p {
margin: 10px 20px;
}
/*
Bentuk Singkat (2)
*/
p {
margin: 10px;
}
Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu
per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan
hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right,
kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu
value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat
ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya:
margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai
property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.
Mengimplementasikan CSS pada HTML
Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar
desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara
untuk memberikan referensi CSS, yaitu:
Referensi ke File Eksternal
Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara
referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan
web.
Penulisan CSS pada Elemen Head
CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada
bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena
umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
19
pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan
elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.
CSS di dalam Atribut style pada Elemen
Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh
semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan
seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk
memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini
biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui
Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan
setelah HTML selesai dibaca oleh browser).
Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada
sebuah dokumen HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
<!—CSS1 Referensi pada Elemen Head -->
<style type="text/css">
h1 {
color: red;
}
</style>
<!—CSS2 Referensi pada FILE EXTERNAL -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita
<p>
Elemen
(h1 ==
sebuah
</p>
Utama</h1>
h1 digunakan untuk menandakan sebuah header dari teks
header 1). Konten teks ini sendiri berada di dalam
paragraf, yang ditandai oleh elemen p.
<!—CSS3 langsung pada atribut style -->
<p style="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
Catatan Penting…
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
20
Sebelum menjalankan kode tersebut, tentunya kita harus membuat file style.css yang
direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada
sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru
dengan nama style.css di dalam direktori yang sama dengan referensicss.html. Isikan file style.css dengan kode berikut:
p {
font-size: 50px;
}
Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css
harus berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk
direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat
menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori
“style”, kita dapat mengisikan style/style.css pada atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensicss.html dan lihat hasilnya, seperti pada gambar berikut:
Hasil Eksekusi referensi-css.html
Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit
deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang tidak
memiliki CSS dan yang memiliki CSS:
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
21
Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada
gambar Perbandingan Dokumen HTML tanpa CSS dan dg CSS. Teks pada elemen h1 berubah
menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki
teks yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya
paragraf kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua.
Ketiga CSS yang terpisah tersebut berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file
eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web
yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah
satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file
berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak
melakukan download berulang kali pada file yang sama).
Memahami Perintah CSS
Untuk memulai belajar CSS terlebih dahulu harus mengenal beberapa istilah penting yang
dipergunakan untuk menulis bahasa CSS dalam suatu Blog. Beberapa Istilah penting sekaligus
penerapannya adalah sebagai berikut :
Padding : 10px
= jarak text dengan garis luar 10 pixel
Padding : 10px 40px
= jarak text dengan garis atas bawah 10 pixel, kiri-kanan 40px
Padding : 10px 40px 100px
= jarak dg atas 10, dengan kiri-kanan 40px, dg bawah 100px
Padding : 10px 40px 100px 200px = jarak berurutan jarum jam ( 10 atas, 40 kanan, 100bawah,
200 kiri )
<caption>
= membuat center pada judul di tabel
font-size:30px
= mengatur ukuran font menjadi 30 pixel
color:blue
= memberi warna font BIRU
Overflow:auto
= membuat daftar text scroll down
width:200
= jarak lebar kiri ke kanan 200 pixel
width: 50%
= jarak 50% dari kiri-kanan
Hight:500
= tinggi tabel 500 pixel
line-height:50px
= Mengatur jarak spasi
border: 1px solid #ff0000
= border dengan ketebalan 1 pixel dengan warna merah/red
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
22
background-color: yellow
margin-left: 25px
text-indent: 0.5in
font-style:italic"
font-weight:bold"
font-size:16px
outline-color: red
= membuat garis tepi warna merah
border-radius: 20px
= membuat garis tepi ujung tumpul
text-shadow: 6px 6px 6px #0000ff
= Membuat text bayangan dengan ukuran 6 pixel
background-image:url( alamat url image);
= Membuat gambar background
=membuat warna background Kuning
= jarak margin kiri ke text adalah 25pixel
= Paragraf Menjorok Ke dalam 0,5 inc
= Membuat tulisan miring</p>
= Membuat tulisan tebal</p>
= Tulisan dengan ukuran font 16px</p>
background: linear-gradient(to right, #F00, #F80); = background linier
background: linear-gradient(200deg, #F00, #F80); = background linier
background: radial-gradient(#F00, #FFF); = background linier
Catatan :
Tag <div> adalah sebagai container atau pembatas satu struktur HTML dengan struktur lainnya
Setiap penulisan css diawali tanda kutip “……..” setelah tanda ( = )dan sebelum tanda kurung
tutup (>) untuk HTML tidak perlu tanda kutip.
Setiap penulisan value harus dijeda dengan spasi ( tidak boleh nggabung dengan value atau
property lain)
Sedang penulisan tag kurung buka/tutup (<> harus menyatu, misal <div style…> , <a>, </a>
Contoh Penerapan CSS dan HTML:
(1) MEMBUAT SCROLL DOWN
Contoh :
<div style="padding: 5px ; margin-left: 25px ; overflow : auto ; width: 500px
; height: 100px ; border: 1px solid #ff0000;"> LPK GLOBAL INTERMEDIA KOMPUTER,
LEMBAGA KURSUS DAN PELATIHAN CEPAT ( SHORT COURSE ) SELAMA 1 BULAN DENGAN MATERI
PAKET UTAMA : (1) KURSUS CEPAT DESAIN GRAFIS SEMARANG (2) KURSUS DESAIN WEBSITE
SEMARANG SEMARANG (3) KURSUS TEKNISI KOMPUTER SEMARANGSEMARANG (4) KURSUS
MICROSOFT OFFICE 2010 SEMARANG (5) INHOUSE TRAINING KOMPUTERHUBUNGI KAMI </div>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
23
(2). PENGATURAN WARNA
<p style="color: blue; margin-left: 45px;">CSS INLINE STYLE | Pada teknik ini, style CSS
diletakkan pada tengah tag antara tag . Aturan-aturan dalam style ini diatur sedemikian rupa untuk
digunakan pada suatu tempat maupun untuk keseluruhan situs. Contoh dari teknik ini terlihat pada
contoh beriku</p>
(3). Mengatur Jarak Spasi ( Kerenggangan antar tulisan)
<p style=line-height:50px;> Website merupakan singkatan dari
World Wide Web atau disingkat www atau orang sering disebut dengan istilah singkat
web saja.</p>
(4). Pengaturan dan Penulisan Jenis Font, Size dan Uuran Font
<p style="font-style:italic">Membuat tulisan miring</p>
<p style="font-weight:bold">Membuat tulisan tebal</p>
<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
<font size="6" face="arial black" color=blue> SELAMAT DATANG </font>
<p style="font:bold 16px cooper black; text-align: justify; text-indent: 0.5in ">tulisan
Tebal, 16Px jenis cooper black</p>
(5).Paragraf Menjorok ke dalam
<p style=“text-align: justify; text-indent: 0.5in;”>Tulis disini….</p>
<p style="text-align: justify; text-indent: 0.5in;"> Saat ini pembuatan blog atau web site
terbilang cukup mudah, hal ini karena adanya suatu sistem yang disebut Content Management System
(CMS), yang bisa dikatakan sebagai “template website”. </p>
(5). Membuat Border Sudut Tumpul Dg Css
<div style="padding:10px 40px; border: 5px solid #e1e1e1; width: 300px;
border-radius: 20px; margin-left: 25px;">LPK GLOBAL INTERMEDIA KOMPUTER |
COMPUTER SHORT COURSE SPECIALIST</div>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
24
(6). Membuat Text Shadow
<div style="text-shadow: 6px 6px 6px #0000ff; font-size: 40px; margin-left:
25px;">LPK GLOBAL INTERMEDIA</div>
(7). Membuat Background Colour
<div style="background-color: yellow; width: 300px; outline-style: solid;
outline-color: red; outline-width: 5px; margin-left: 25px; padding: 10px;
border-radius: 20px; border: 5px solid #e1e1e1;">LPK GLOBAL INTERMEDIA
KOMPUTER KURSUS CEPAT KOMPUTER DI SEMARANG (024)40244243 | 0857-0158-9003</div>
(8) Membuat Background Color 2 ( Sudut Tumpul )
<div style="background-color: yellow; width: 300px; outline-width: 5px;
margin-left: 25px; padding: 10px; border-radius: 20px; border: 5px solid
#e1e1e1;">LPK GLOBAL INTERMEDIA KOMPUTER KURSUS CEPAT KOMPUTER DI
SEMARANG (024)40244243 | 0857-0158-9003 </div>
(9). Membuat background belakang artikel
<div style="padding: 10px; background-image: url('http://globalindo.xyz/wpcontent/uploads/2015/11/IMG-20151027-WA0001.jpg'); height: 600px; width: 800px;
background-repeat: repeat; background-position: center;"><strong>RUMAH DIJUAL DI
SEMARANG | RUMAH 2 LANTAI DIJUAL DI PEDURUNGAN SEMARANG | Kondisi Rumah baru
Renovasi, banguna Kokoh dan berada di tengah kota [ 7 menit sampai Simpang Lima Semarang | T.
[024] 40244243 | 0857-0158-9003</strong> </div>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
25
10. Marquee ( Test Berjalan )
Marquee untuk mengatur pengulangan Rotasi :
Contoh codenya :
<marquee loop=6>Teks Berotasi 6 kali</marquee>
Marquee untuk mengatur lebar teks :
Contoh codenya :
<marquee with=50%>Lebar berjalan hanya setengah bidang</marquee>
Marquee untuk kombinasi dengan Link
<marquee direction="left"onmouseover="this.stop()"onmouseout="this.start()"><a
href="http://kursus-website-semarang.esy.es/2014/01/kursus-website-semarang/">
SELAMAT DATANG DI BLOG GLOBAL INTERMEDIA SEMARANG</marquee>
(10). Membuat Tabel
<table style="margin-left: 65px; width: 90%; border: 1px solid #000;"><caption>
<h3>DAFTAR BIAYA KURSUS</h3>
</caption>
<tr>
<th colspan="2">JENIS PROGRAM DAN KELAS</th>
</tr>
<tr>
<th style="border: 1px solid #000; background: yellow;">PROGRAM</th>
<th style="border: 1px solid #000; background: yellow;">KELAS/PRIVAT</th>
</tr>
<tr>
<td style="border: 1px solid #000;">GRAFIS</td>
<td style="border: 1px solid #000;">500/850</td>
</tr>
<tr>
<td style="border: 1px solid #000;">WEBSITE</td>
<td style="border: 1px solid #000;">600/1200</td>
</tr>
<tr>
<td style="border: 1px solid #000;">OFFICE</td>
<td style="border: 1px solid #000;">500/850</td>
</tr>
<tr>
<td style="border: 1px solid #000;">TEKNISI</td>
<td style="border: 1px solid #000;">500/1O00</td>
</tr>
</table>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
26
(11). BACKGROUND WEB
Untuk membuat background perintahnya adalah background-image:url( alamat url);
<!DOCTYPE html>
<html>
<head>
<title>Background Image Goes Wrong</title>
<style type="text/css">
#main {
background-image: url('file:///D:/PICTURES/alam/alam4.jpg');
height: 600px;
width: 800px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
Jika background lebih dari satu caranya sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Multiple Background</title>
<style type="text/css">
#main {
background:
url('grass.png') 0 100% no-repeat,
url('man.png') 95% 100% no-repeat,
url('sky.jpg') 0 0 no-repeat;
height: 450px;
width: 600px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
</html>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
27
(12). Membuat Form Kirim E-mail
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="nama" value="Nama" size="20" />
<br />
Alamat:<br />
<input type="text" name="alamat" value="alamat" size="20" />
<br />
Email:<br />
<input type="text" name="mail" value="email" size="20" />
<br /><br />
<input type="submit" value="Kirim" />
<input type="reset" value="Batal" />
</form>
SESSION IV
Eksport Dan Import Data Base
Import dan ekspor Wordpress Anda sangat diperlukan diantaranya untuk kebutuhan :
1). Backup website jika pada kondisi tertentu hosting mengalami kerusakan yang tidak
bias lagi dipanggil kembali.
2). Memindah hosting dan domain, misalnya selama ini kita menggunakan wordpress
sebagai subdomain, hingga kita ingin pindah kepada domain utama misalnya dot
com. Maka hasil backupan kita ( hasil dari eksporting) tinggal kita import ke
hosting baru. Lagkah-langkahnya sebagai berikut :
Cara Eksport Database Wordpress ke dalam hardisk ( backup)
Klik Dashboard > Tools > Export > Download Export file
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
28
Cara Upload Database ke domain baru / berbayar yang telah kita daftarkan caranya :
1. Siapkan Domain baru yang akan kita Import data dari data hosting sebelumnya.
2. Jika belum ada, Anda bisa mendaftar di Idhostinger.com ( untuk versi gratis
dengan namadomain.esy.es / namadomain.url.ph.
3. Atau bisa dengan yang lebih professional dengan yang berbayar dengan
mendapat namadomain.com). Alamat penyedia Domain dan hosting berbayar
ada pada lampiran dalam modul ini.
4. Jika sudak siap, tinggal lakukan sebagai berikut :
Klik Dashboard Wordpress > Tools > Import >
Arahkan import database wordpress pada alamat hosting dan domain yang telah
kita beli. Selesai…
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
29
Kami contohkan Cara Mendafar di Hosting Professional , dengan situs
www.idhostinger.com. Namun kami akan coba dengan sampel domain dan hosting yang
gratis sebagai berikut :
1. Buka www.idhostinger.com
Klik Order sekarang , kemudian isilah data seperti di bawah ini :
Setelah itu buka e-mail yang kita daftarkan dan konfirmasi untuk mengaktifkannya
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
30
Setelah itu akan muncul tampilan tanda pendaftaran hosting gratis selesai….
2. Pilih paket hosting gratis :
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
31
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
32
3. Setting Cpanel di Idhostinger
Caranya adalah ketikkan cpanel.idhostinger.com
Setelah pilih Auto Installer kemudian install Wordpress sebagai CMS untuk mendesain
website kita…
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
33
Setelah selesai, maka kembali masuk ke admin di wordpress, caranya dengan mengetikkan
alamat website , seperti : kursus-website-semarang.esy.es/wp-admin . Lalu isi user nama
dan password , dan kita akan diarahkan pada dashboard untuk melakukan seting contain,
sebagaimana kita melakukan setting dan setup dengan CMS Wordpress.
SESSION V
SETTING THEME, FAVICON DAN SLIDER
Target : (1). Siswa dapat merubah thame yang sesuai
(2). Siswa dapat memasang Menu Dropdown
(3). Siswa dapat membuat Favicon
(4). Siswa dapat memasang Slider
3.1. Memilih jenis Thema
Cara memilih theme : klik Appearance > lalu pada halaman berikutnya klik
tombol install themes. Agar bisa ditampilkan slider, maka harus memilih thema
yang menyediakan fasilitas theme seperti twenty eleven :
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
34
3.2. Membuat Menu Dropdown
Masuk ke Dashboard > Appearance > Menu > Link > Add to Menu .
Selanjutnya ketikkan Menu Struktur > dan pada Menu Setting > Primary
Menu ( beri centang)
3.3. Memasang Favicon
cara memasang favicon pada website WordPress :
1. Langkah pertama yaitu membuat favicon , untuk membuat sebuah favicon bisa
dengan menggunakan aplikasi pengolah gambar misalkan photoshop atau yang
lain . Favicon adalah gambar persegi yang sederhana , biasanya hanya berisi
sebuah logo dari website tersebut , idealnya sebuah favicon adalah berukuran 32
× 32 piksel atau 16 × 16 piksel
2. Masuk ke Dashboard > Plugins> add New , kemudian download All in One
favicon
3. Buka plugin favicon > setting > klik ICO Frontend > Upload file Icon yang kita
buat.
Lihat gambar di bawah :
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
35
1. Buat logo dengan besar 32x32 pixel di Corel Draw atau Photo Shop untuk Favicon.
2. Buat 3 buah image yang berbeda dengan ukuran 500 pixel x 250 pixel untuk Slider
3.4. Setting Slider
Memasang Slider dengan META SLIDER :
Pastikan pada posting dibuat category Slider
Pastikan Future Image sudah dipasang image yang akan ditampilkan
Install plugin meta slider
Setelah itu setting meta slider dan add slide yang diperlukan :
Pada bagian paling bawah perhatikan ada shortcode : masterlider id=10 ( nilainya
akan berbeda-beda) anda copy dulu nanti akan di pastekan di menu editor indext.php.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
36
Setelah itu buka Appearance > Klik Editor > Klik Indext.php
Ketik short code diatara huruf merah di bawah ( <dif id…………….?>:
get_header(); ?>
<div id="primary">
<div id="content" role="main">
masterlider id=10
<?php if ( have_posts() ) : ?>
Anda isikan di tengahnya seperti di bawah ini:
<?php
echo do_shortcode("[metaslider id=10]");
?>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
37
Hasilnya silahkan anda perhatikan, sebagai contoh bisa di buka sampelnya untuk slider
jenis Meta Slider di : http://kursus-komputer.esy.es
SESSION VI
Kustomasi Wordpress
Target : (1). Siswa dapat Mengetahui Anatomi dan mendesain Header, Posting, Sitebar
dan footer
(2). Memasang berbagai jenis Widget
(3). Membuat menu di halaman statis ( page)
4.1. Anatomi Layout wordpress
Secara umum layout wordpress terbagi 4 bagian:
a. Header, biasanya terdiri dari menu, header image, news, slider atau featured
slider
b. Body, berisi post atau artikel
c. Sitebar, berisi widget-widget tambahan, sidebar bisa terletak sebelah kiri ,
sebelah kanan atau di keduanya dari website.
d. Footer, berisi copyright bisa juga diisi dengan widget.
4.2. Kustomasi Manu
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
38
Cara melakukannya :
Klik Appearance > klik Menu
Dari sini anda bisa membuat menu yang menuju post, kategori, tag tertentu
bahkan menuju website lainnya.
1. Membuat menu ke link / url tertentu, semisal menu HOME
Isikan kelompok menu anda missal (menu utama)
Kemudian klik > Create Menu
Pada modul Themes Location klik menu Dropdown Primary Menu
Kemudian Pilih Menu Utama > Save
Lalu pada bagian customes Links isikan URL website Anda, dan bagian
Label isikan “Home”.
Lalu add Menu > Save menu
2. Membuat menu dari halaman Statis/Page
Jika anda membuat menu yang mengarah ke halaman statis yang pernah
anda buat , maka bagian pages anda tinggal menandai halaman yang akan anda
masukkan kedalam menu. Halaman-halaman yang tertera disini adalah
halaman yang pernah anda buat sebelumnya.
Jika sudah menandai menu yang anda inginkan Klik Add Menu > Save
Menu. Anda bisa menandai lebih dari satu menu sekaligus.
3. Membuat menu untuk kategori tertentu
Klik Appearance > Menu > create new menu > isi menu name > Create menu
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
39
Jika anda membuat menu dengan mengarah ke link tertentu , maka tinggal
anda membuat dan mengcopy link lewat Custom Link
4. Mengedit dan Membuat sub menu
Untuk mengedit dan membuat sub menu caranya tinggal masuk pada menu
struktur dan geser ke kanan untuk membuat sub menu tertentu.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
40
5. Menghapus menu
Klik Appearance dalam dashboard > klik Menu dan kemudian klik remove
6. Widget
Salah satu ciri khas website dengan platform wordpress adalah keberadaan
widget. Widget adala sebuah aplikasi mini yang biasanya berada di sebelah
sitebar atau bahkan di footer. Seperti dalam bentuk recent post, Recent
Comment, images dan sebagainya.
7. Menambah Widget
Buka Dashboard kemudian klik > Appearance > Klik Widget yang
diinginkan lalu simpan.
8. Menon aktifkan widget
Aktifkan widget yang telah terpasang di main sidebar kemudian tekan icon
delete, lalu save.
Catatan :
Pada Pemasangan Widget ini keberadaan gambar sangat penting, maka
Anda harus membuat image/gambar yang mencerminkan website Anda
Tugas :
1. Buat 3 buat desain gambar ( dengan Photoshop atau Corel Draw) yang
akan dipasang di sebelah kanan website Anda dan beri Link pada 3 artikel
Anda
Caranya : gambar anda harus di uploud dulu dalam posting dan
dicopy htmlnya (cetak garis bawah di bawah) lalu pasang widgate >
pastekan di dalamnya
Contoh :
<a href="http://kursus-komputer.esy.es/kursus-teknisi-komputer/kursusteknisi-komputer-semarang/"><img class="alignnone wp-image-267 sizefull" src="http://kursus-komputer.esy.es/wpcontent/uploads/2014/05/k8.jpg" alt="Kursus Teknisi Komputer
Semarang" width="264" height="191" /></a>
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
41
SESSION VII
PEMASANGAN PLUG IN TERPENTING
Pada Bab ini akan kami jelaskan beberapa Plug in Penting dan penerapannya dalam CMS
Wordpress seerta kami sertakan seting plugin untuk took online.
4.1. Beberapa Plug in ini Penting
1. All in One SEO Pack: Plugin ini simple, gampang dan to the point itulah kenapa
saya suka plugin ini. Walaupun ada plugin lain semacam WordPress SEO Yoast
atau SEO Ultimate tetapi saya cenderung memakai AIO SEO karena simple dan
tidak ribet. Walaupun simple dan tidak ribet AIO SEO sudah sangat lengkap untuk
SEO onpage yang baik.
2. W3 Total Cache: Membuat website anda lebih cepat dengan menampilkan static
HTML pada halaman yang telah ter-cache (mengurangi server request). Plugin ini
juga mempunyai fitur kompressi gambar, kode dan CSS
3. WP-Super Chace.Nah, ini merupakan salah satu plugin yang bisa dikatakan paling
penting dari plugin-plugin lainnya. Plugin ini meningkatkan performance blog
secara signifikan.
4. Related Post via category
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
42
This Plugin will display the related posts list via categories. It can automatically
display the related posts list after the content of any single post of selected post
types by options.
5. SEO YOAST, Plugin sangat penting untuk melakukan verifikasi di google
webmaster.
6. Meta Slider
Merupakan fasilitas plug in di wordpress yang sangat mudah penggunannya.
Create SEO optimised responsive slideshows with Nivo Slider, Flex Slider, Coin
Slider and Responsive Slides.
7. Akismet: komentar spam memang sangat mengganggu, apalagi agan males
memilah milah komentar spam satu per satu. Akismet adalah plugin bawaan
WordPress yang di buat oleh team Automattic yang tidak lain adalah perusahaan
dibalik WordPress.com. Plugin ini sangat efektif menyaring spam namun sebelum
dapat menggunakannya Anda diwajibkan mendaftar di WordPress.com untuk
mendapatkan key nya.
8. Shareaholic: Plugin ini duunya bernama SexyBookmark. Plugin ini berfungsi
menambahkan social media sharing di website anda yang memudahkan pembaca
sharing ke social media.
9. SEO Friendly Images by Vladimir Prelovac: plugin ini membantu secara otomatis
menambahkan ALT tag di images anda sesuai dengan nama/title postingan
sehingga memperkuat SEO di images/gambar.
10. Google XML Sitemap By Arne Brachhold: Plugin ini sangat bagus untuk
membantu indexing website anda di Google dengan membuat XML sitemap.
Plugin ini simple tetapi powerfull dan mempunyai pengaturan yang lengkap
sehingga bisa disesuaikan dengan kebutuhan indexing situs anda.
11. Wp. Db Manajer. Plugin yang sangat berguna untuk membuat backup database
website anda. Memiliki beberapa fungsi penting dan yang paling mengesankan
fitur kemampuan untuk mengirim backup database Wordpress ke email anda
12. Woocommerce, adalah plugin yang sangat powerfull untuk mendukung dan
membuat toko online.
4.2. Seting Toko Online dengan Plug in Woocommerce [ Optional ]
WooCommerce adalah plugin buatan WooThemes, jadi bila Anda menggunakan plugin
ini untuk membangun situs toko online sebaiknya juga menggunakan theme WooTheme.
WooCommerce solusi cepat membangun situs toko online karena fitur-fiturnya yang
lengkap, dan suport mata uang Indonesia (IDR).
Berikut ini panduan menggunakan plugin WooCommerce untuk membuat toko online di
Wordpress :
Pastikan WooCommerce sudah terinstall di CMS Wordpress, bila belum silahkan
download di http://www.woothemes.com/.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
43
Lakukan pengaturan pada WooCommerce untuk menyesuaikan mata uang yang dipakai
dengan Indonesia Rupiah (IDR).
WooCommerce > Products > Products.
Cara menambahkan barang yang ingin dijual caranya, Products > Add Product.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
44
Tulis judul products Anda, jangan lupa buat atau pilih products categories untuk
mengelompokkan barang Anda.
Masih dihalaman yang sama seperti gambar di atas, geser halaman dengan scroll ke bawah,
Upload gambar pada Product Image.
SKU (jumlah barang), Regular Price (Rp) & Sale Price (Rp) adalah harga barang Anda.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
45
Beri keterangan mengenai barang yang akan Anda jual.
Langkah terakhir dengan melakukan "Publish".
Products berhasil ditambahkan ke halaman toko online.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
46
Detail tampilan produk yang baru ditambahkan.
Agar Pengunjung Kirim E-mail , pasang skrip sebagai berikut :
<form action="MAILTO:[email protected]" method="post" enctype="text/plain">
Name:<br />
<input type="text" name="nama" value="Nama" size="20" />
<br />
Alamat:<br />
<input type="text" name="alamat" value="alamat" size="20" />
<br />
Email:<br />
<input type="text" name="mail" value="email" size="20" />
<br /><br />
<input type="submit" value="Kirim" />
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
47
<input type="reset" value="Batal" />
</form>
SESSION VIII
Search Engine Optimizer
6.1. Metode Riset Keyword / Kata Kunci
Metode riset bisnis online berupa riset keyword ini harus dilakukan secara sistematis
dan teliti agar menghasilkan keyword yang tepat untuk bisnis kita. Berikut metode riset
keyword untuk bisnis.
1. TENTUKAN PRODUK yang ingin diPromosikan. Dalam contoh kali ini saya
misalkan mau mempromosikan Jual Rumah di Semarang
2. Gunakan Adword Keyword Tools untuk mencari Keyword / Kata Kunci yang
sesuai dengan Produk yang akan kita Promosikan (RISET KEYWORD), caranya.
a. Login ke Adword Keyword Tool
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
48
b.
c.
d.
e.
f.
g.
h.
i.
Pastekan domain website produk pada kolom website
Tentukan Negara dan bahasa yang menjadi target market, misal Indonesia.
Tentukan Local Monthly Searches-nya, misal >= 1000
Tentukan Match Types-nya: [Exact]
Klik : Search
Klik : Download >>> All >>> Download >>> Open with >>> OK
Keluar hasilnya
Kumpulkan sampai ratusan keywords / kata kunci yang berhubungan dengan
produk yang akan dipromosikan
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
49
Catatan :
“Riset keyword Google adalah sebuah riset untuk menghasilkan keyword dengan
menggunakan alat gratis bernama Google Keyword Tool”
“Riset online adalah penelitian untuk mendapatkan data yang diperlukan dan
dilakukan secara online. Riset Keyword menggunakan GKT ini termasuk Riset
Online”
6.2. Riset Kompetisi
OK, saya buat contoh kasus dulu, misalnya saya akan mentarget keyword cara mengetahui
persaingan keyword. Jadi mari kita cek persaingan untuk keyword ini..
Masuk ke google.com, kemudian ketik keyword yang akan ditarget, yaitu cara mengetahui
persaingan keyword.
Lihat blog yang memiliki rank di halaman satu saja. Tapi di artikel ini saya akan analisa yang
rank 1 saja.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
50
Silahkan copy URL artikel yang ada di rank 1
Masuk ke Majesticseo
Silahkan daftar dulu di situs tersebut
Setelah daftar, silahkan login ke akun anda.
Silahkan masukkan URL artikel blog tadi di bagian Site Explorer, kemudian klik Explore
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
51
Lihat hasil dibagian Page Information ( Reffering Domain, External Backlinks ), dan dibagian Link
Profile ( Citation Flow, Trust Flow )
Pada gambar tersebut, nilai Reffering Domain, External Backlinks, Citation Flow, dan Trust Flow
adalah kosong ( - ), ini mendandakan bahwa blog tersebut mudah kita lewati.
Arus Citation ( Arus Kutipan) - Jumlah ini memprediksi bagaimana berpengaruh URL
mungkin didasarkan pada jumlah situs yang terhubung ke itu. Semakin banyak link yang
situs
memiliki,
semakin
tinggi
itu
Citation
Flow.
Kepercayaan Arus - Jumlah ini memprediksi bagaimana bisa dipercaya URL mungkin
didasarkan pada kedekatan backlink ke domain yang terpercaya. Link dari dalam
lingkungan dipercaya lebih dapat dipercaya daripada link dari lingkungan spam.
Jadi untuk mengetahui persaingan keyword, silahkan anda amati Reffering Domain, External
Backlinks, Citation Flow, dan Trust Flow dari semua blog yang ada di halaman satu.
Jika nilai dari Reffering Domain, External Backlinks, Citation Flow, dan Trust Flow sangat besar,
berarti blog tersebut mungkin akan sulit kita lewati. Tapi jika nilainya sangat kecil atau bahkan
tidak ada ( - ) maka blog tersebut mungkin akan mudah kita lewati.
Cara mengalahkan pesaing di google
Setelah anda menentukan keyword yang cocok untuk ditarget, sekarang adalah menaklukkan
keyword tersebut. Yang harus anda lakukan minimal adalah...
1. Membuat sebuah artikel dengan ON-PAGE SEO yang baik
2. Lihat Reffering Domain, External Backlinks, Citation Flow, dan Trust Flow dari artikel blog
pesaing. Silahkan anda kalahkan dengan melebihi jumlah nilai tersebut. Misalnya External
backlinks artikel blog pesaing berjumlah 15, maka anda harus memberikan backlink pada artikel
anda lebih dari 15, misalnya 20. Anda juga harus memperhatikan kualitas backlink yang anda
dapat.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
52
3. Jika peringkat artikel anda masih dibawah blog pesaing, silahkan lakukan ON-PAGE SEO yang
benar pada template anda. Misalnya Title Tag, Heading Tag, Header Halaman, dan lain-lain.
4. Dan jika masih kalah, silahkan tambah backlink sebanyak-banyaknya ke artikel anda. Tapi jangan
sampai melakukan Over Optimization.
Ingat : Riset keyword harus dilakukan secara benar, jika tidak maka bisa saja potensi traffic blog
anda tidak seperti yang anda inginkan.
Cara Melakukan Optimasi SEO ON PAGE (Onsite SEO Optimization) Pada Blog
Cara melakukan Optimasi SEO Onpage pada blog memang sangat mudah. Optimasi ini mencakup
20% dari seluruhnya, dan sisanya adalah Optimasi SEO Offpage. mOptimasi SEO Onpage adalah
optimasi yang dilakukan pada bagian-bagian sebuah halaman website. Ini bisa dilihat langsung oleh
pengunjung. Berbeda dengan Optimasi SEO Offpage, optimasi ini tidak dapat dilihat sepenuhnya
oleh pengunjunng. Jadi mari kita bahas saja mengenai cara melakukan Optimasi SEO Onpage ini..
Cara melakukan Optimasi SEO Onpage Pada Blog
Yang pertama kali saya luruskan adalah bahwa yang bisa bertengger di Search Engine itu adalah
halaman. Jadi berhentilah mengoptimasi homepage situs anda anda tapi optimasilah halaman situs
anda.
Yang harus diperhatikan adalah sebagai berikut :
1. Optimasi Onpage Pada Konten
Anda harus menyediakan konten atau artikel yang dapat membuat orang menetap di blog anda.
jadi begini, anda membuat artikel dan yang terlintas dipikiran anda haruslah untuk pengunjung.
Jadi anda harus membuat artikel dengan konten yang bagus, bermutu, dan memberikan nilai
kepada orang lain. Kata lainnya adalah anda harus mebuat artikel berkualitas.
Untuk membuat pengunjung tidak bosan dengan artikel anda, anda harus langsung menuliskan
apa yang dicari pengunjung dan tidak bertele-tele karena pengunjung tidak suka seperti itu.
2. Optimalisasi Meta Description, Title Tag, dan Heading Tag
Hal pertama yang penting dan yang menjadi ukuran google untuk menentukan apakah halaman
kita relevan dengan sebuah kata kunci adalah dilihat dari Title Tag nya. Letak title tag itu berada
di judul artikel di title bar browser.
Dalam memberi Meta Description, harus memperhatikan beberapa hal berikut..
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
53
Panjang maksimal 160 karakter
Sebaiknya letakkan kata kunci yang anda targetkan dibagian awal deksipsi
Dan menambah Heading Tag sama saja berkata kepada google, "Ini adalah bagian terpenting,
ini lebih penting, ini penting, dan ini bagian agak penting.
3. Optimalkan dengan pemberian Emphasize
Emphasize itu misalnya memberikan bold, italic, underline, dan sebagainya pada kalimat atau
kata terpenting pada artikel.
4. Optimalkan pada : Image Alt Tag ( gambar yang berkualitas )
Jika anda punya artikel sebaiknya anda kasih gambar jika anda bertarung di kata kunci yang
cukup sulit dan sengit, untuk optimasi gambar anda harus meletakkan Image Alt Tag dan Image
File Name pada gambar tersebut
5. Optimasi Onpage Dengan Outbound Link
Outbound link ini adalah link yang kita keluarkan, maksudnya link dari blog anda yang
mengarah ke blog lain. Salah satu ciri dari halaman yang relevan itu biasanya suka
mengeluarkan link, anda bisa lihat halaman di wikipedia dan blog besar lainnya, anda pasti tahu
kalau banyak sekali link keluar dari blog tersebut.
Dengan banyaknya outbound link ini, mencirikan bahwa anda membuat halaman tersebut
semata-mata bukan hanya untuk Search Engine, tapi anda membuatnya untuk pengunjung.
Jadi, jika anda melihat halaman tentang sesuatu yang mengincar kata kunci yang kompetitif ada
baiknya jika anda melakukan outbound link ke blog Authority yang memiliki artikel relevan
dengan artikel anda.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
54
Dengan begitu, anda meningkatkan relevansi artikel anda dan anda juga membantu pengunjung
anda untuk melihat tambahan referensi lainnya dari blog lain.
6. Optimasi Onpage pada Url
URL yang baik itu seharusnya berisikan namadomain/kategori/subkategori/judul-artikel jika
untuk blog wordpress. Sedangkan kalau blogspot sebaiknya ada keyword juga di permalink.
Lihat contoh berikut.
http://kursus-komputer2013.blogspot.com/2013/08/kursus-teknisi-komputer-program-1bulan.html
http://kursusprivatgrafis.wordpress.com/2013/11/29/kursus-privat-desain-grafis-semarang/
Setiap bagian itu harus berisikan keyword yang jelas. Tapi tetap saja, banyak orang yang tidak
mengerti dan membuat url yang tidak jelas. Sebenarnya ini sangat merugikan karena menyianyiakan bagian terpenting dari Onpage SEO. Contoh URL yang tidak jelas seperti ini..
http://www.kursus-informatika.com/123
7. Optimalkan Internal Link. Caranya adalah dengan mengarahkan setiap artikel kepada artikel
lainnya yang memiliki kesamaan content. Bisa juga dengan membuat link seperti readmore, dan
sebagainya.
8. Kecepatan Website. Kecepatan website bisa diukur dengan memasukkan url kita ke :
https://developers.google.com/speed/pagespeed/insights/ Maka jika nilainya kurang dari 75
berarti lambat.
Jadi, itulah poin-poin penting dari Optimasi SEO Onpage. Semoga artikel ini bermanfaat untuk
anda dalam membuat blog yang memiliki nilai SEO Onpage yang baik.
9. Mendaftar Ke Situs Pendeteksi Blog [ Ping]
Pada Session ini kiata akan mendaftarkan artikel kita ke beberapa situs yang
membantu mempercepat pendeteksian web/blog kita. Sehingga web kita akan mudah
dikenal oleh brouwser seperti Google, Yahoo, Ask dan lain-lainnya.
Ada beberapa hal utama agar Blog kita mampu bersaing di page pertama pada
Google dan lainnya:
1.
2.
Daftarkan di Webmaster dan lakukan verifikasi ke Google Webmaster
lakukan ping ke browser penyedia agar segera terindek dengan baik.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
55
Cara Verifikasi dengan Google Webmaster adalah
1). Buka http://www.google.com/webmaster , kemudian lakukan pendaftaran
dengan e-mail anda.
2). Masuk ke search console > Metode Alternatif > copy HTML CODE
nya…
3). Buka Dashboard di Blog WordPress Anda > Masuk ke Tool
4). Copykan HTML CODE yang ada dan save Setting
5). Masuk lagi ke google webmaster > Klik Verifikasi …> Selesai. Akan tampak
perubahannya . Lihat di bawah ini :
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
56
6) Selesai . Anda sudah terdaftar di Google webmaster, selanjutnya tinggal menggelola
website anda dengan SEO melalui Keyword yang baik, sehingga menjadikan
blog/website anda SEO Friendly.
7). Selanjutnya lakukan Ping ke beberapa situs di bawah ini agar blog anda lebih cepat
dikenal browser .
Inilah alamat website untuk melakukan ping :
1.
2.
3.
4.
5.
http://googleping.com/
www.totalping.com
http://pingler.com/
http://autopinger.com/
http://pingmyblog.com/
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
57
LAMPIRAN-LAMPIRAN
KODE WARNA POKOK HTML
Inilah berbagai macam KODE WARNA dalam bahasa HTML
Cyan
Blue
Midnightblue
Mediumslateblue
Aquamarine
Dodgerblue
Royalblue
Blueviolet
Indigo
Darkslateblue
Mediumvioletred
Mediumturquoise
Mediumorchid
Darkorchid
Slateblue
Aqua
| #00ffff
| #0000ff
| #191970
| #7b68ee
| #7fffda
| #1e90ff
| #4169e1
| #8a2be2
| #460082
| #483080
| #071585
| #4801cc
| #ba55d3
| #9932cc
| #6454cd
| #00ffff
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
58
Red
Darkred
Indianred
Firebrick
Lightsalmon
Lightcoral
Maroon
Crimson
Tomato
Salmon
Coral
Pink
Hotpink
Deeppink
White
Linen
Navy
Snow
Orange
Orangered
Burlywood
Darkorange
| #ff0000
| #860000
| #cd5c5c
| #622222
| #ffa07a
| #f08080
| #800000
| #dc143c
| #ff6347
| #fa8072
| #ff7f50
| #ffc0cb
| #ff69ba
| #ff1493
| #ffffff
| #faf0e6
| #000080
| #fffafa
| #ffd000
| #ff4500
| #deb887
| #ff8c00
Sandybrown
Rosybrown
Brown
| #f4a460
| #bc8f8e
| #a52a2a
Gold
Yellow |
Yellowgreen
Goldenrod
| #ffd700
| #ffff00fffe0
| #9acd32
| #daa520
Lime
Green
Seagreen
Palegreen
Lightseagreen
Forestgreen
Lightgreen
Olive
Tan
Teal
Olivedrab
Greenyellow
Darkslategray
Darkolivegreen
Mediumspringgreen
Darkgoldenrod
Darkkhaki
Orchid
| #00ff00
| #008000
| #f4a460
| #98f698
| #20b2aa
| #228622
| #90ee90
| #808000
| #d2b48c
| #008080
| #6b8e23
| #adff2f
| #2f4f45
| #55662f
| #00fa9a
| #688606
| #606766
| #da70d6
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
59
Fuchsia
Darkmagenta
Darkviolet
Mediumpurple
Violet
Purple
Plum
Gray
Dimgray
Lightslategray
Lightgray
Slategray
Darkgray
Silver
Springgreen
Chocolate
| #ff00ff
| #860086
| #940003
| #9370db
| #ee82ee
| #800080
| #dda0dd
| #808080
| #696969
| #778899
| #d3d3d3
| #708090
| #a9a9a9
| #c0c0c0
| #00ff7f
| #d2691e
DAFTAR TAG HTML
Tag
Keterangan
<!-- ... -->
Digunakan untuk memberi sebuah komentar atau keterangan. Kalimat yang
terletak pada kontiner ini tidak akan terlihat pada browser
<!DOCTYPE>
Mendefinisikan informasi tipe dokumen HTML
<a>
Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai
tautan dikarenakan tautan ini digunakan untuk saling menautkan antara
satu dokumen HTML ke dokumen HTML yang lain
<abbr>
Digunakan untuk menguraikan satu ungkapan yang disingkat dan Anda
dapat memberikan informasi bermanfaat kepada penelusur-penulusur page
source(halaman sumber kode) / pembaca layar, sistem terjemahan dan
mesin pencari yang berasal dari singkatan yang sudah diuraikan, tetapi saat
di browser uraian tersebut tidak akan tampil dan hanya sebagai informasi
saja
<acronym>
Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag
<abbr>
<address>
Mendefinisikan informasi kontak untuk penulis/pemilik dokumen
<applet>
Digunakan untuk memasukan file java kedalam dokumen HTML
<area />
Mendefinisikan daerah yang dapat diklik (link) pada peta gambar
<b>
Membuat teks tebal
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
60
<base />
Mendefinisikan URL dasar/target untuk semua URL relatif dalam
dokumen
<basefont />
Membuat atribut teks default, seperti warna, ukuran, jenis font untuk
semua teks dalam dokumen
<bdo>
Digunakan untuk menimpa arah teks
<big>
Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>
Membuat teks berkedip
<blockquote>
Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan
tampil menjorok kedalam
<body>
Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan
bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen
tersebut dapat berupa teks, gambar, animas, link dan seterusnya
<br />
Memberi baris baru/pindah baris
<button>
Mendefinisikan sebuah tombol diklik
<caption>
Membuat caption pada tabel
<center>
Untuk perataan tengah terhadap teks atau gambar
<cite>
Mendefinisikan kutipan
<code>
Mendefinisikan sebuah bagian dari kode komputer
<col />
Mendefinisikan nilai atribut dari satu kolom atau lebih dalam sebuah tabel
<colgroup>
Menentukan kelompok dari satu kolom atau lebih dalam sebuah tabel
untuk performatan
<dd>
Mendefinisikan deskripsi dari item dalam daftar definisi
<del>
Untuk memberi garis tengah pada teks/mencoret teks
<dfn>
Mendefinisikan sebuah istilah definisi
<dir>
Mendefinisikan sebuah daftar direktori
<div>
Mendefinisikan sebuah section dalam dokumen
<dl>
Mendefinisikan sebuah daftar definisi
<dt>
Mendefinisikan istilah (item) dalam daftar definisi
<em>
Membuat teks miring. Fungsi tag ini sama dengan tag <i> tetapi tag <em>
yang lebih dianjurkan/ditekankan pada penggunaan untuk teks miring
<embed>
Digunakan untuk memasukkan file video atau file musik
<fieldset>
Untuk mengelompokkan elemen-elemen yang terkait dalam form /
membuat seperti frame-box di dalam form
<font>
Mendefinisikan jenis font, warna dan ukuran untuk teks
<form>
Mendefinisikan sebuah form HTML untuk input form
<frame />
Mendefinisikan frame dalam fremeset
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
61
<frameset>
Mendefinisikan satu set frame
<h1> to <h6>
Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen
HTML tersebut.
<head>
Digunakan untuk memberikan informasi tentang dokumen tersebut
<hr />
Membuat garis horisontal
<html>
Mendefinisikan root dari suatu dokumen HTML
<i>
Membuat teks miring
<iframe>
Mendefinisikan sebuah inline frame
<img />
Berfungsi untuk menampilkan gambar pada dokumen HTML
<input />
Mendefinisikan input field pada form
<ins>
Membuat teks bergaris bawah
<kbd>
Mendefinisikan teks yang di input dari keyboard
<label>
Mendefinisikan label untuk sebuah elemen <input>
<legend>
Mendefinisikan sebuah caption untuk elemen <fieldset>
<li>
Digunakan untuk menampilkan informasi dalam bentuk item daftar
<link />
Mendefinisikan hubungan antara dokumen dan sumber eksternalnya
<listing>
Fungsi tag ini sama dengan tag <pre> dan dianjurkan menggunakan tag
<pre> karena tag <listing> tidak layak/diprotes
<map>
Mendefinisikan client-side peta gambar
<marquee>
Membuat teks berjalan secara vertikal atau horisontal
<menu>
Mendefinisikan sebuah daftar menu
<meta />
Mendefinisikan metadata tentang sebuah dokumen HTML
<nobr>
Mencegah ganti baris pada teks atau gambar
<noframes>
Jika browser user tidak mendukung frame
<noscript>
Jika browser user tidak mendukung client-side scripts
<object>
meletakkan embed sebuah objek
<ol>
Mendefinisikan daftar dalam format penomoran
<optgroup>
Menampilkan beberapa pilihan yang sudah dikelompokkan dalam bentuk
sebuah daftar drop-down
<option>
Menampilkan beberapa pilihan yang berbentuk dalam sebuah daftar dropdown
<p>
Membuat sebuah paragraf
<param />
Mendefinisikan sebuah parameter untuk objek
<pre>
Membuat teks dengan ukuran huruf yang sama
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
62
<q>
Mendefinisikan sebuah kutipan singkat
<s>
Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama
dengan tag <del> tetapi tag <s> tidak dianjurkan sebagai gantinya
menggunakan tag <del>
<samp>
Mendefinisikan contoh keluaran dari program komputer
<script>
Mendefinisikan client-side script
<select>
Membuat daftar drop-down
<small>
Memperkecil ukuran teks dari ukuran defaultnya
<span>
Mendefinisikan sebuah section dalam dokumen
<strike>
Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama
dengan tag <del>
<strong>
Membuat teks tebal, fungsi tag ini sama dengan tag <b>
<style>
Mendefinisikan informasi style untuk dokumen HTML
<sub>
Memberikan efek subscript pada teks
<sup>
Memberikan efek superscript pada teks
<table>
Membuat table
<tbody>
Untuk mengelompokkan isi body di dalam sebuah tabel
<td>
Mendefinisikan sel di dalam sebuah tabel
<textarea>
Mendefinisikan sebuah kontrol input multiline
<tfoot>
Untuk mengelompokkan isi footer di dalam sebuah tabel
<th>
Mendefinisikan sel header di dalam sebuah tabel
<thead>
Untuk mengelompokkan isi header di dalam sebuah tabel
<title>
Membuat judul untuk dokumen HTML
<tr>
Membuat baris di dalam sebuah tabel
<tt>
Mendefinisikan teletype text
<u>
Membuat teks bergaris bawah, fungsi tag ini sama dengan tag <ins> tetapi
tag <u> tidak dianjurkan untuk kategori HTML text formatting melainkan
termasuk kategori HTML Style
<ul>
Mendefinisikan daftar dalam format bullet
<var>
Mendefinisikan sebuah variabel
<xmp>
Mendefinisikan preformatted text, fungsi tag ini sama dengan tag <pre>
KODE HTML WARNA
Kode Htmlnya
Hasil Fontnya
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
63
Kode Htmlnya
Hasil Fontnya
<font face="Arial">Novan Peace</font>
Novan Peace
<font face="Blunter">Novan Peace</font>
Novan Peace
<font face="Balker">Novan Peace</font>
Novan Peace
<font face="Beltway Prophecy">Novan Peace</font>
Novan Peace
<font face="Bernard MT Condensed">Novan Peace</font> Novan Peace
<font face="bobTag">Novan Peace</font>
Novan Peace
<font face="Bodoni MT">Novan Peace</font>
Novan Peace
<font face="Bodoni MT Black">Novan Peace</font>
Novan Peace
<font face="Boring Lesson">Novan Peace</font>
Novan Peace
<font face="Bring tha noize">Novan Peace</font>
Novan Peace
<font face="Britannic Bold">Novan Peace</font>
Novan Peace
<font face="Broadway">Novan Peace</font>
Novan Peace
<font face="Calibri">Novan Peace</font>
Novan Peace
<font face="Cambria">Novan Peace</font>
Novan Peace
<font face="Castellar">Novan Peace</font>
<font face="Chiller">Novan Peace</font>
Novan Peace
Novan Peace
<font face="Comic Sans MS">Novan Peace</font>
Novan Peace
<font face="Cooper Black">Novan Peace</font>
<font face="Courier New">Novan Peace</font>
Novan Peace
Novan Peace
<font face="Curlz MT">Novan Peace</font>
Novan Peace
<font face="Dafunk2">Novan Peace</font>
Novan Peace
<font face="District">Novan Peace</font>
Novan Peace
<font face="Domestic Manners">Novan Peace</font>
Novan Peace
<font face="Donree's Claws">Novan Peace</font>
Novan Peace
<font face="Earthquake">Novan Peace</font>
Novan Peace
<font face="Eggs">Novan Peace</font>
Novan Peace
<font face="Elephant">Novan Peace</font>
Novan Peace
<font face="Engravers MT">Novan Peace</font>
Novan Peace
Web Hosting Recomended
Beberapa Webhosting yang bisa dijadikan pertimbangan untuk kita pakai sebagai berikut :
1. Rajawebhost.com
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
64
RAJAWEBHOST.com adalah penyedia web hosting provider, reseller, vps dan
dedicated server. Sejak itu, RAJAWEBHOST telah berkembang dari sebuah penyedia web
hosting kecil dengan hanya beberapa pelanggan saja, namun sekarang sudah diakui ratusan
pelanggan hingga kini akan mencapai ribuan. Lebih dari ratusan domain host di
RAJAWEBHOST. Mereka bukan penyedia web hosting kagetan yang sering mempermainkan
pasar industri dengan harga yang fantastis. Mereka lebih fokus pada kontinuitas bisnis. Oleh
karena itu, mereka cenderung lebih mentargetkan market corporate dengan tingkat loyalitas
tinggi dan tahu akan kualitas. Kunjungihttp://www.rajawebhost.com
2. Masterweb.com
Materweb adalah perusahaan yang memfokuskan pada jasa web hosting, yang mencakup
domain name, shared hosting, colocation server, dedicated server dan managed server.
Masterweb adalah pelaku internet yang juga berpengalaman. Provider ini telah
berkecimpung dibidang isp dan web hosting.
3. Idwebhost.com
Satu ini adalah perusahaan domain dan hosting yang diperhitungkan di Indonesia. Hingga
saat ini menjadi salah satu webhosting besar di Indonesia. Pertama di Indonesia sebagai
icann accredited dan diakui internasional sebagai reseller domain terbesar di Indonesia.
Berkembang untuk melayani kebutuhan shared, reseller dan vps hosting dengan memiliki
banyak server shareddanservervps.
4. Rumahweb.com
Didirikan di Yogyakarta, Rumahweb Indonesia tumbuh menjadi salah satu perusahaan
hosting terbesar di Indonesia yang kini melayani lebih dari puluhan domain pelanggan.
Berawal dari satu server, kini rumahweb telah memiliki lebih dari puluhan server untuk
melayani hosting dan vps/cloud.
5. Ardhosting.com
Ardhosting merupakan brand image dari pt. ardh global indonesia yang fokus jasa
layanan di bidang web hosting dan registrasi domain. Dengan slogan fast & reliable
webhosting kami bertekan memberikan layanan web hosting yang murah, cepat dan
handal sesuai kebutuhan Anda.
6. Jagoanhosting.com
Jagoan Hosting Indonesia merupakan penyedia layanan web hosting di Indonesia yang
mengedepankan layanan paling jago namun tetap dengan harga web hosting murah.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
65
Penyajian paket web hosting yang flexibel dan pilihan server web hosting di server us
maupun di server iix mempermudah pilihan yang sesuai dengan kebutuhan Anda.
7.Qwords.com
Qwords didirikan doleh rendy maulana saat masih duduk di bangku kuliah di itb, berawal dari
sebuah ide bahwa ingin memiliki perusahaan yang mendukung aktivitas teman-teman
kuliahnya di internet. Internet indonesia sedang masuk dalam era perkembangan, ditandai
dengan banyaknya pengguna internet yang masuk ke ranah social media pada saat itu.
8. Jakhoster.com
Jakhoster adalah suatu production house yang memfokuskan diri dalam bidang jasa
pelayanan webhosting, registrasi domain, reseller, dan webdesign. Dengan pelayanan
support penuh, akan selalu memberikan yang terbaik bagi pelanggannya serta dengan
kualitas server yang dimiliki, kami siap memberikan pelayanan segala kebutuhan website
Anda dari yang pemula sampai perusahaan besar. Server berbasis linux dengan control panel
terbaru yang selalu terupdate.
9. Plasahosting.com
Plasahosting merupakan jasa layanan teknologi informasi yang mengkhususkan pada
bidang layanan internet service yaitu web hosting, domain dan web design. Plasahosting saat
ini mengelola ribuan domain dan hosting dari customer di seluruh Indonesia dan beberapa
negara lainnya.
9. Dracoola.com
Yang satu ini adalah website layanan yang mengutamakan domain, web hosting, web design,
digital design dan media printing.
11. Idhostinger.com
Yang terakhir ini yang kita pakai untuk latihan, dan jika anda berminat menggunakan hosting
dengan idhostinger ini tinggal pindah domainnya jadi dot com.
Istilah Penting Dunia Internet
Berikut adalah uraian singkat beberapa istilah penting yang sering kita jumpai ketika
berinteraksi dengan internet:
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
66
Address bar: Semacam kota kecil tempat penginputan nama domain atau alamat-alamat
web lainnya pada browser web.
Bandwidth: Istilah yang digunakan untuk mengukur kecepatan (jumlah data) yang
dikirimkan melalui koneksi internet.
Blog: Layanan di web yang digunakan untuk menulis jurnal yang biasanya diupdate
harian atau mingguan. Blog biasanya digunakan secara cuma-cuma. Tapi ada juga yang
berbayar. Melalui blog, kita bisa memposting tulisan-tulisan kita tentang berbagai topik
yang membuat kita menarik untuk dibaca oleh publik. Kegiatan mengupdate informasi
di
blog
disebut
blogging,
sedangkan
pemilik
blog
disebut
blogger.
Browser atau browser web (Web browser) adalah software yang digunakan untuk
menelusuri dan menampilkan informasi dari web server, seperti Internet Explorer,
Opera, Mozilla Firefox, dan Safari.
CSS (Cascading Style Sheets): Bahasa yang direkomendasikan W3C (World Wide Web
Consortium) untuk mendefiniskan style (seperti jenis, ukuran, warna huruf, dan lainlain) pada dokumen web.
Content: Isi sebuah website yang mencakup, teks, gambar, atau media-media lainnya.
Content harus dibedakan dari layout. Yang disebut kemudian berhubungan dengan
bagaimana sebuah halaman web ditampilkan.
Download: Transfer file atau informasi dari komputer lain ke komputer kita. Dalam
istilah web, download berarti transfer file dari server web ke klien web.
Domain: Di dunia internet atau web, domain adalah nama yang digunakan untuk
mengidentifikasi sebuah alamat komputer.
FAQ: Kependekan dari Frequently Asked Questions atau “Pertanyaan yang Sering
Diajukan”. FAQ merupakan salah satu feature website yang menyajikan daftar jawaban
atas pertanyaan yang sering diajukan berkaitan dengan layanan atau penggunaan
informasi yang disajikan oleh website tersebut. Membaca FAQ sangat dianjurkan
sebelum Anda menelusuri lebih jauh halaman-halaman sebuah web untuk mendapatkan
gambaran umum website tersebut.
FTP: File Transfer Protocol, yaitu protokol yang memungkinkan seseorang mentransfer
file dari satu komputer ke komputer lainnya. FTP biasa digunakan untuk menransfer file
web kita ke komputer server atau penyedia hosting.
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
67
Favicon: Favicon atau Favorites Icon adalah grafik yang berukuran kecil yang
dihubungkan dengan sebuah web. Favicon biasa diletakkan di belakang nama domain
sebuah website pada addres bar. File icon ini biasanya berekstensi “.ico”.
GIF: Graphic Interchange Format. Salah satu format file gambar yang ada pada situs
web, digunakan untuk mentransfer file-file grafik ke dan dari layanan-layanan online.
Hidden text (teks yang disembunyikan) adalah teks yang bisa dibaca oleh search
engine, tapi tidak oleh manusia. Teks tersebut tidak bisa dibaca karena memiliki warna
yang sama dengan warna latar (background). Oleh kebanyakan search engine, hidden
text biasanya dianggap sebagai spam
Home Page: Halaman pertama dari situs web.
HTML : HyperText Markup Language. HTML merupakan bahasa yang digunakan untuk
mendefinisikan sejumlah bagian dari sebuah dokumen web dalam bentuk tag, sehingga
browser dapat mengetaui bagaimana menampilkan dokumen web tersebut yang
mencakup, link, text, gambar dan media-media lainnya seperti video dan audio.
HTTP: Kependekan dari Hypertext Transfer Protocol, yaitu aturan-aturan yang
digunakan untuk menghubungkan dan mengirimkan dokumen-dokumen hypertext
seperti web.
Hyperlink: Tanda atau penunjuk ke dokumen lain web Hyperlink sinonim dengan
hotlink, anchortext, atau link.
Hypertext: Dalam dunia web, hypertext adalah teks yang bisa di-klik.
IP: Kependekan dari Internet Protocol. Protokol yang digunakan untuk mengirim data
dalam sebuah jaringan, terutama pada jaringan internet. IP berbentuk bilangan yang
terdiri dari empat angka yang dipisahkan dengan titik. Angka-angka tersebut dapat
diterjemahkan menjadi nama domain.
JPEG atau JPG: Joint Photographic Experts Group, yaitu format grafik yang cocok
digunakan untuk gambar-gambar dengan banyak warna, seperti photo.
Link: Koneksi hypertext antar halaman-halaman web. Sinonim dengan hotlink atau
hyperlink.
Meta Data: Meta data adalah data di atas data. Meta data merupakan informasi tentang
sebuah web yang sedang aktif. Umumnya digunakan dalam hubungannya dengan
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
68
optimasi search engine (SEO). Dalam dokumen HTML, meta data diletakkan antara dan
tag dan . Pada saat sebuah web ditampilkan pada daftar hasil pencarian sebuah search
engine (SERP), meta data akan menyediakan ulasan singkat tentang web yang
ditampilkan tersebut.
URL: Uniform Resource Locator, yaitu alamat dokumen atau sumber-sumber lain di
internet. URL menyajikan informasi tentang bagaimana sebuah server serta alamatalamat file lainnya diakses.
Upload: Kegiatan mentransfer atau mengirim suatu file ke komputer lain.
Search engine: Sejenis program yang digunakan untuk mencari dokumen-dokumen di
internet berdasarkan kata kunci yang dimasukkan. Search engine yang paling populer
saat ini adalah Google dan Yahoo.
Site: Sinonim dengan halaman web atau website. Dalam bahasa Indonesia, kita sering
menyebutnya situs atau situs web.
Surfing: Kegiatan menelusuri dan mencari informasi dalam internet melalui layanan web
Surfer: Orang yang melakukan surfing
Website (web site) merupakan sekumpulan halaman-halaman web (web page), gambar,
video atau aset-aset digital lainnya yang disimpan pada satu atau lebih web server,
biasanya dapat diakses melalui internet.
Web Browser: Lihat Browser
Web Document: Dokumen HTML yang bisa dicari lewat internet.
Webmaster: Seseorang yang melakukan kegiatan manajeman website untuk memastikan
bahwa website tersebut dapat berfungsi dengan baik.
Web Page: Dokumen HTML yang bisa diakses melalui internet.
World Wide Web: Atau dikenal juga dengan istilah WWW atau W3 adalah layanan internet
berbasis hiperteks yang digunakan untuk menelusuri sumber-sumber di internet.
Web server yaitu komputer yang dilengkapi dengan software dan fasilitas-fasilitas
lainnya untuk mengirimkan halaman-halaman web di internet
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
69
W3C: Kependekan dari World Wide Web Consortium, yaitu badan resmi non-profit yang
menyusun aturan-aturan standar untuk teklologi web.
Wiki: Website yang yang disusun oleh para pembacanya. Para pembaca dipersilahkan
untuk mengedit halaman manapun untuk membuat isinya lebih lengkap dan valid.
Contoh website jenis ini adalah Wikipedia; ensiklopedia online dalam format wiki
WYSYWYG: What You See Is What You Get (Apa Yang Anda Lihat, itulah Yang Anda
Dapatkan).
WYSYWYG Editor Program untuk membuat dan mengedit layout, desain atau isi sebuah
web tanpa perlu menuliskan kode-kode HTML, seperti FrontPage, Dreamweaver
Selesai <
LPK GLOBAL INTERMEDIA |Modul Belajar | Website & SEO
70
