1. prihat maulana s-modul-buku teks pelajaran pemrograman web
TRANSCRIPT
KOMPETENSI DASAR :
KI 3.1 : Memahami konsep teknologi aplikasi web
KI 4.1 : Menyajikan pelbagai teknologi pengembangan aplikasi web
Teknologi Aplikasi Web
Sejarah web
Timothy John ¨Tim¨ Berners-Lee yang pada awalnya bermaksud untuk membuat sebuah sistem yang
dapat memudahkan pekerjaan rekan – rekan penelitinya untuk mengakses informasi dengan cepat,
sehingga terciptalah Website. Website yang terhubung dengan jaringan pertama kali muncul pada
tahun 1991 dan dipublikasikan oleh perusahaan tempat Tim Berners Lee bekerja (CERN) pada tahun
1993 dimana CERN mempublikasikan bahwa Web dapat digunakan oleh orang di seluruh dunia
dengan gratis. Sebuah website sendiri ditulis dengan ,enggunakan bahasa yang disebut HTML (Hyper
Text Markup Language) yang selalu bisa diakses melalui protokol yang menyampaikna informasi dari
web server ke web browser.Sebuah website dibuat didalam sebuah sistem komputer yang dikenal
dengan server web, juga disebut HTTP Server, dan pengertian ini juga bisa menunjuk pada software
yang dipakai untuk menjalankan sistem ini, yang kemudian menerima lalu mengirimkan halaman-
halaman yang diperlukan untuk merespon permintaan dari pengguna.
Teknologi web
Web adalah sebutan bagi sekelompok halaman web (web page), yang umumnya merupakan bagian
dari suatu nama domain (domain name) atau subdomain di World Wide Web (WWW) di Internet.
WWW terdiri dari seluruh situs web yang tersedia kepada publik. Halaman-halaman sebuah situs web
diakses dari sebuah URL yang menjadi "akar"(root), yang disebut homepage dan biasanya disimpan
dalam server yang sama.
Web memiliki kemampuan link yang sangat bagus. Keistimewaan inilah yang telah
menjadikan Web sebagai service yang paling cepat pertumbuhannya. Web mengizinkan
pemberian highlight pada kata atau gambar dalam sebuah dokumen untuk dihubungkan ke media lain
seperti dokumen, frase, movie clip, atau file suara. Dengan sebuah browser yang memiliki Graphical
User Interface (GUI), link-link dapat dihubungkan ke tujuannya dengan menunjuk link tersebut
dengan mouse dan menekannya. Sistem informasi yang terdistribusi oleh web berbasis hypertext.
Dokumen yang menjadi unsur utama di dalamweb dapat dinyatakan dalam beberapa tipe. Tipe yang
paling populer adalah dokumen hypertext yang disusun menurut bahasa khusus, seperti Hypertext
Markup Language (HTML) sedangkan untuk interaktif web atau dynamic page terdapat banyak
pilihan, salah satunya adalah PHP Hypertext Preprocessor (PHP).
Proses pengaksesan suatu web yaitu klien melakukan permintaan suatu halaman web kepada server,
kemudian server akan mencari halaman yang diminta dan mengembalikannya dalam bentuk kode
kode HTML. Kode-kode HTML ini akan didownload oleh komputer klien dan kemudian akan
1
diterjemahkan oleh browser menjadi suatu tampilan halaman web.Aplikasi web dibangun oleh 2 jenis
scripting yaitu sebagai berikut:
a. Server Side Scripting Pemrograman dari sisi server maksudnya adalah membuat kode-kode
program yang hanya dieksekusi di server menjadi bentuk tag-tag HTML untuk dikirim ke klien. Tag-
tag inilah yang akan diterjemahkan oleh browser klien menjadi halaman web. Kode-kode program ini
tidak akan kelihatan di klien.Contoh bahasa pemrograman dari sisi serveryaitu seperti PHP, ASP, JSP
dan lainnya.Bahasa pemrograman ini digunakan untuk membuat suatu halaman web menjadi dinamis.
b. Client Side Scripting Pemrograman web dari sisi klien maksudnya adalah membuat kode-kode
program yang dieksekusi di klien khususnya oleh browser.Kode-kode program ini bisa dilihat oleh
klien.Contoh bahasa pemrograman dari sisi klien yaitu HTML, javascript, CSS. HTML adalah tag-tag
yang diterjemahkan oleh browser untuk membentuk secara visual suatu halaman web. HTML
sekarang dikembangkan menjadi eXtensible HyperText MarkupLanguage (XHTML), sebuah versi
yang lebih matang dan stabil. XHTML datang bersama beberapa cara dan pemikiran yang baru
mengenai tag dalam halaman web. Aturan aturan dalam XHTML lebih ketat dibandingkan HTML
dari segi cara penulisan.XHTML dapat merupakan perpaduan antara HTML dan XML karena
merupakan formulasi ulang HTML dalambentuk XML.
Sekarang ini, XHTML menjadi standar suatu web berdasarkan rekomendasi W3C (World Wide Web
Consortium). CSS dan javascript adalah bahasa program untuk membuat tampilan web menjadi
interaktif.CSS dan javascript disisipkan di antara sintaksHTML.Berbagai contoh aplikasi web yaitu
seperti mesin pencari atau search engine(google,yahoo), tokoonline(amazon), situs berita(detikcom),
layanan akademis perguruan tingg i(website IT Telkom) dan lain-lain.
Pada prinsipnya web bekerja dengan cara menampilkan file PHP yang berasal dari server web pada
program client, yaitubrowser web. Program browser pada client mengirim permintaan kepada server
web, yang kemudian dikirimkan oleh serverdalam bentuk Format HTML. File PHP berisi instruksi-
instruksi yang diperlukan untuk membentuk dynamic page. Perintah-perintah PHP ini kemudian
diterjemahkan oleh browser sehingga isi informasinya dapat ditampilkan secara visual kepada
pengguna di layar komputer. Pada penggunaannya, mekanisme web juga dapat diakses melalui Local
Area Network (LAN) sehingga tidak perlu terhubung dengan internet. Suatu halaman web dapat kita
akses melalui browser dengan menuliskan URLnya atau mengikuti link yang mau dituju.
Adapun step-step bagaimana web itu dapat bekerja diantaranya sebagai berikut :
1. URL menunjukkan lokasi dokumen yang dikelola oleh sebuah serverWeb.
2. URL diubah menjadi alamat IP server Web
3. Browser kemudian mengirimkan request http
4. Server Web akan menjawab dengan memberikan dokumen yang diminta, dalam format
HTML
2
Referensi: NetSains.com
Perkembangan Teknologi Web
web 1.0
secara umum dikembangkan untuk pengaksesan informasi dan memiliki sifat yang sedikit
interaktif. Sifat web 1.0 adalah read. Web 1.0 adalah generasi pertama dari website di internet. Pada
tipe ini pengunjung hanya bisa mencari (searching) dan melihat-lihat (browsing) data informasi yang
ada di web. Jadi web tipe ini terlihat seperti papan pengumuman di dunia maya.Dalam hal ini
pengunjung tidak ada proses input data ke website.
World wide web pertama kali menemukan bentuknya di November 1990. Hingga tahun 1993,
jaringan internet berkembang demikian pesatnya. Perkembangan jaringan internet up to (seperti
promosi ISP saja ) 341,000% .
3
Layanan yang internet kala itu masih
berkisar diantara static website yang saling
dihubungkan dengan hyperlink. Umumnya
website berformat “brosur online” –
website yang menyampaikan informasi satu
arah – umumnya berbentuk profile, portal
berita, toko online, layanan email, dll. Web
kala itu dihuni oleh website-website yang
di desain menggunakan table dan flash. Contohnya adalah DotCom Bubble Burst, atau DotCom
Crash, atau DotCOm Doom.
Tahun 1998, Google berdiri dan internet menjadi semakin mudah untuk dijamah. di kala itu potensi
website dengan format portal berita dan toko online (seperti amazon.com) di lirik besar-besaran oleh
investor. Di US, dana jutaan dollar diinvestasikan untuk masuk ke bidang online yang sayangnya,
tidak semua website dengan modal jutaan dollar tadi dapat menghasilkan. Pada pertengahan 2000,
gelembungan dana (bubble) yang masuk ke internet pecah (burst) juga. Dana yang masuk tidak
berputar kembali menjadi keuntungan.
Web 2.0
Inovasi dalam dunia web semakin hari kian mengalami perkembangan yang berarti, ini dibuktikan
dengan adanya Teknologi Web 2.0 yang dikembangkan sekitar tahun 2004.
Menurut Tim O’Reilly, Web 2.0 dapat didefinisikan sebagai berikut: “Web 2.0 adalah revolusi bisnis
di industri komputer yang disebabkan oleh penggunaan internet sebagai platform, dan merupakan
suatu percobaan untuk memahami berbagai aturan untuk mencapai keberhasilan pada platform baru
tersebut. Salah satu aturan terutama adalah: Membangun aplikasi yang mengeksploitasi efek jaringan
untuk mendapatkan lebih banyak lagi pengguna aplikasi tersebut”
Teknik yang digunakan web 2.0
• CSS (Cascading Style Sheet) untuk bahan isi dan presentasi serta mempercantik desain.
• Falksonomi (metoda penandaan content dimana dengan konsep ini dimunculkan kata-kata yang
berkaitan dengan content tersebut).
• XML(eXtensible Markup Language) yang digunakan untuk mendefinisikan format data.
• Teknik Aplikasi Internet
• HTML dan XHTML (eXtensible HyperText Markup Language).
• Weblog-publishing tools
• Wiki atau forum software,dll
• JavaScript untuk membuat tampilan yang dinamis,
4
• Teknologi penggabungan dari JavaScript dan XML saat ini yang marak disebut dengan AJAX
(Asynchorous JavaScript And XML) yang menekankan pada pengelolaan content dalam website
adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web yang interaktif.
Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan
pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang
secara keseluruhan setiap kali seorang pengguna melakukan perubahan.
Era pengembangan web kedua (Web 2.0) di mana pengunjung mulai dapat melakukan interaksi
dengan diatur oleh sistem yang ada pada web. Web 2.0 sendiri merupakan sebuah istilah yang
pertama kali dicetuskan pada tahun 2003 oleh O’Reilly Media, dan dipopulerkan pada konferensi web
2.0 pertama di tahun 2004.
Web 2.0 memiliki beberapa ciri mencolok yaitu share, collaborate dan exploit. Di era Web 2.0
sekarang, penggunaan web untuk berbagi, pertemanan, kolaborasi menjadi sesuatu yang penting. Web
2.0 hadir seiring maraknya pengguna blog, Friendster, Myspace, Youtube dan Fickr. Jadi disini
kehidupan sosial di dunia maya benar-benar terasa.
Banyak perusahaan online tumbang di masa DotCom Bubble burst, namun banyak juga yang
bertahan. Google, Yahoo, Amazon dan eBay adalah beberapa diantaranya. Kehancuran selalu
menyisakan pemain berkualitas yang bertahan. Dari keruntuhan DotCom Bubble burst tersebut, wajah
world wide web perlahan mulai berubah.
Di tahun 2001, wikipedia di luncurkan. Apple mendirikan iTunes. Di tahun 2002, friendster di
luncurkan. Perlahan, world wide web mulai di huni oleh website – website dengan karakteristik yang
berbeda dengan website – website yang eksis sebelum dotcom bubble burst. Website website tersebut
memiliki satu ciri mencolok bernama partisipasi sehingga pada tahun 2003, istilah web 2.0 muncul.
Istilah web 2.0 tidak mengklasifikasikan world wide web berdasarkan teknologinya, namun
berdasarkan karakter website tersetbut. Istilah web 2.0 juga memunculkan istilah web 1.0: Satu istilah
untuk era sebelum web 2.0.
Pada garis besarnya, web 2.0 berbicara mengenai partisipasi. hubungan komunikasi many-to-many.
Jika pada era web 1.0 (era sebelum web 2.0, dari 1990 hingga 2001) pengguna internet dengan mudah
membrowse internet, namun pengadaan konten di internet masih ‘dikuasai’ oleh para geek yang
menguasai bahasa HTML untuk membuat halaman web. Komunikasi yang terjadi pun hanya satu
arah: dari pemilik website ke pengunjungnya. Pada era web 2.0, pengadaan konten di internet tidak
lagi dikuasai oleh geek. Website – website yang digolongkan ke dalam kategori web 2.0 (kita akan
menuliskan lebih rinci tentang web 2.0 di tulisan selanjutnya) memfasilitasi pengguna internet biasa
untuk menuliskan konten mereka sendiri: Website sharing foto seperti flickr, blog service seperti
wordpress.com, blogger.com, video sharing seperti YouTube, dll. Komunikasi pun terjadi secara dua
arah, dimana pengunjung web juga bisa memberikan informasi.
Web 3.0
5
Lambat laun kebiasaan dan kebutuhan orang di dunia maya selalu berubah dan bertambah. Hal ini
juga sejalan dengan semakin cepatnya akses internet broadband dan teknologi komputer yang
semakin canggih. Jika pada telekomunikasi sudah mulai terdengar isu era 4G, begitu juga yang terjadi
pada dunia website yang juga memunculkan isu akan segera hadirnya era baru yaitu Web 3.0.
Teknologi web generasi ketiga ini merupakan perkembangan lebih maju dari Web 2.0 dimana disini
web seolah-olah sudah seperti kehidupan di alam nyata. Web 3.0 memiliki ciri-ciri umum seperti
suggest, happen dan provide.
Jadi, disini web seolah-olah sudah seperti asisten pribadi kita. Dengan menggunakan teknologi 3D
animasi, kita bisa membuat profil avatar yang sesuai dengan karakter, kemudian melakukan aktivitas
di dunia maya seperti layaknya di dunia nyata. Kita bisa berjalan-jalan, pergi ke mall, bercakap-cakap
dengan teman yang lain. Ya, Web 3.0 adalah dunia virtual kita.
Web 3.0 adalah generasi ketiga dari layanan internet berbasis web. Konsep Web 3.0 pertama kali
diperkenalkan pada tahun 2001, saat Tim Berners- Lee, penemu World Wide Web menulis sebuah
artikel ilmiah yang menggambarkan Web 3.0 sebagai sebuah sarana bagi mesin untuk membaca
halaman-halaman Web. Hal ini berarti bahwa mesin akan memiliki kemampuan membaca Web sama
seperti yang manusia dapat lakukan sekarang ini.
Web 3.0 berhubungan dengan konsep Web Semantik, yang memungkinkan isi web dinikmati tidak
hanya dalam bahasa asli pengguna, tapi juga dalam bentuk format yang bisa diakses oleh agen-agen
software. Beberapa ahli bahkan menamai Web 3.0 sebagai Web Semantik itu sendiri.
Keunikan dari Web 3.0 adalah konsep dimana manusia dapat berkomunikasi dengan mesin pencari.
Kita bisa meminta Web untuk mencari suatu data spesifik tanpa bersusah-susah mencari satu per satu
dalam situssitus Web. Web 3.0 juga mampu menyediakan keterangan-keterangan yang relevan
tentang informasi yang ingin kita cari, bahkan tanpa kita minta.
Web 3.0 terdiri dari:
· Web semantik
· Format mikro
· Pencarian dalam bahasa pengguna
· Penyimpanan data dalam jumlah besar
· Pembelajaran lewat mesin
· Agen rekomendasi, yang merujuk pada kecerdasan buatan Web
Web 3.0 menawarkan metode yang efisien dalam membantu computer mengorganisasi dan menarik
kesimpulan dari data online. Web 3.0 juga memungkinkan fitur Web menjadi sebuah sarana
penyimpanan data dengan kapasitas yang luar biasa besar. Web 3.0 telah memiliki beberapa standar
operasional untuk bisa menjalankan fungsinya dalam menampung metadata, misalnya Resource
Description Framework (RDF) dan the Web Ontology Language (OWL). Konsep Web Semantik
6
metadata juga telah dijalankan pada Yahoo’s Food Site, Spivack’s Radar Networks, dan sebuah
development platform, Jena, di Hewlett-Packard.
Hosting
Hosting adalah suatu jasa penyediaan server dan aplikasinya kepada pelanggan-pelanggannya. Satu
server ini dipakai untuk banyak client supaya biayanya terjangkau. Hosting ini biasa dipakai untuk
keperluan web server dan mail server. Web server bisa dipakai sebagai company profile, product
catalog, gallery, portal komunitas, portal berita, portal perdagangan dan sebagainya. Mail server
dipakai sebagai sarana komunikasi elektronis antara seorang dengan yang lain baik dalam perusahaan
yang sama maupun berbeda perusahaan.
Web server dan mail server dan diletakkan di dalam server yang sama, tetapi bisa juga dipisah
menjadi dua buah server. Pemisahan maupun penggabungan tergantung dari kebijakan masing-masing
penyedia jasa. Penggabungan memiliki keuntungan mudahnya maintenance, sedangkan pemisahan
memiliki keuntungan dalam hal pengaturan bandwidth.
Hosting semakin berkembang tidak terbatas pada web server dan mail server saja. Ada aplikasi-
aplikasi lain seperti DNS server yang juga disewakan. Aplikasi DNS server yang sering disewakan
biasanya terkait dengan Secondary DNS yang merupakan backup dari Primary DNS.
Pada dasarnya sebuah server web hosting menggunakan adalah sebuah komputer biasa namun
menggunakan beberapa komponen dan program dasar sebuah server serta disarankan harus mampu
untuk online 24 jam setiap hari dan tanpa harus dimatikan dalam jangka waktu lebih lama daripada
komputer biasa.
7
Berikut jenis layanan Web Hosting yang umum ditawarkan oleh Hosting Provider dan akan sering
anda jumpai
1. Free Hosting / Web Hosting Gratis
Diluar sana terdapat banyak layanan Web Hosting Gratis, tetapi biasanya jenis hosting seperti ini
tidaklah benar-benar gratis. Ada ‘balasan jasa’ yang harus anda ‘bayar’ ketika anda memakai hosting
gratis tersebut, diantaranya adalah memperbolehkan iklan mereka tayang di situsmu, atau sebuah
link/tautan dipasang di bagian footer situs anda, atau pembatasan fitur dengan opsi upgrade, dsb.
Belum lagi semua Database situsmua adalah milik mereka, artinya, kapan saja mereka bisa stop
memberikan pelayanan tanpa perlu persetujuan atau penjelasan kepada anda. Sehingga jenis layanan
Free Hosting biasanya sangat tidak bisa diandalkan, bila anda ingin menjalankan sebuah website
bisnis serius.
Free Hosting / Web Hosting Gratis biasanya dijalankan oleh individu yang memiliki kapasitas hosting
berlebih, yang kemudian dimanfaatkan dengan cara meyewakannya kembali kepada orang lain untuk
menutup biaya servernya sendiri. Penawaran layanan hosting gratis seperti ini mudah ditemukan di
forum-forum besar atau bahkan berbentuk situs penawaran hosting gratis.
Jika anda serius dengan bisnis online anda maka sebaiknya hindari memakai Free Hosting / Hosting
Gratis.
2. Shared Hosting / Web Hosting Berbagi
Shared Hosting adalah jenis pelayanan server hosting yang paling banyak dipakai saat ini, baik oleh
para pemula maupun para veteran disaat situs mereka masih kecil. Alasannya simpel, mereka tidak
perlu mengeluarkan biaya besar disaat situs masih kecil. Dengan harga sekitar Rp.200.000-
Rp.600.000/tahun (tergantung paket dan biasanya sudah termasuk harga Domain) anda telah dapat
memiliki sebuah shared hosting yang handal dan berkualitas.
Shared Hosting Server atau Server Hosting Berbagi adalah tempat dimana situsmu bersama-sama
dengan situs-situs milik orang lain berbagi menggunakan sebuah Server besar. Dengan cara
menempatkan banyak situs ke dalam sebuah server besar, perusahaan Hosting Provider dapat
memberikan layanan jasa hosting yang lebih murah kepada pelanggannya. Tetapi cara ini bukannya
tanpa kelemahan, yaitu anda harus berbagi sumber daya server bersama dengan situs orang lain juga.
Sehingga tidak ada yang namanya sumber daya ‘Unlimited’ (Unlimited Resource) seperti yang sering
anda lihat di kebanyakan iklan dan daftar pelayanan Hosting Provider terkenal seperti Hostgator,
Godaddy, BlueHost, Idwebhost dll. Kata ‘unlimited’ disini hanya trik marketing saja.
Mengapa seperti itu? karena sama seperti komputer rumah atau laptop anda, setiap Server ada batas
kemampuannya. Walaupun sumber daya sebuah server jauh diatas komputer rumah, tetap saja suatu
saat limit itu akan tercapai jika semua sumber dayanya telah terpakai. Diantara banyak faktor-faktor
lain, lalu lintas/traffic situs yang besar adalah salah satu faktor yang berpotensi membebani sebuah
server. Jika hal ini terjadi maka biasanya Hosting Provider akan ‘memaksa’ secara halus agar segera
meng-upgrade web hosting ke paket yang lebih tinggi. Karena jika tidak, kinerja situs tadi bisa
8
mengganggu keseluruhan kinerja dari situs-situs lain yang bertempat di Shared Hosting Server
tersebut.
Terlepas dari semua itu, Shared Hosting adalah yang paling banyak dipakai karena prinsip
ekonominya. Yaitu ketika situsmu masih kecil anda perlu menekan biaya pengeluaran dengan
menggunakan layanan paket shared hosting murah untuk menekan biaya diawal. Kemudian sebanding
dengan semakin besarnya situs maka anda juga diharuskan memakai layanan web hosting yang lebih
besar, yang artinya semakin mahal juga. That’s fair and economist. Pembagiaan paket Shared Web
Hosting ada beragam macam menurut besar kapasitas server dan harga.
Shared Hosting adalah solusi yang terbaik untuk bisnis kecil dan menengah atau personal.
3. VPS Web Hosting
VPS atau Virtual Private Server mengacu pada mesin virtual server. VPS adalah metode memartisi
sebuah fisik komputer server induk menjadi sebuah/beberapa server anak yang memiliki Bandwidth,
Kapasitas Disk dan Operating System terpisah sendiri. Keistimewaannya adalah walaupun anda
berbagi pemakaian fisik server bersama dengan banyak situs-situs lain, anda tidak berbagi sumber
daya server bersama mereka. Kelebihan lainnya adalah anda memiliki kontrol yang lebih luas, hampir
menyamai kontrol Dedicated Server. Anda menikmati privasi seperti memiliki dedicated server
sendiri dan bebas mengkonfigurasinya untuk menjalankan spesifik software.
Layanan VPS Web Hosting menawarkan kontrol yang lebih besar dalam lingkungan web
dibandingkan Shared Hosting tetapi dengan biaya dibawah biaya layanan Dedicated Server.
Untuk menggunakan VPS dibutuhkan banyak pengetahuan teknis dalam hal mengelola dan
pemakaiannya secara optimal. Sehingga jika anda awam tetapi membutuhkan VPS Web Hosting,
maka sebaiknya anda pastikan perusahaan Hosting Provider yang ingin anda pakai juga menyediakan
jasa teknisi yang membantu mengelola VPS-mu setiap saat 24/7/365.
VPS Web Hosting hanya disarankan untuk situs dengan traffic pengunjung yang telah tinggi,
perusahaan kecil atau menengah yang membutuhkan lingkungan web yang aman dan terkendali,
perusahaan besar, atau web developer/designer yang membutuhkan fitur server yang lebih luas.
4. Dedicated Web Hosting / Dedicated Server
Dedicated Web Hosting adalah sebuah fisik server yang bisa anda sewa dari perusahaan hosting
provider. Ini artinyakontrol penuh atas segala hal mengenai server tersebut. Mulai dari Hardwarenya,
Keamanannya, Operating Systemnya, Antivirus & Anti- malware, dll. Anda memiliki kontrol penuh
atas sumber daya server dan bisa mengubahsuai menurut kehendakmu. Tentu saja anda dituntut untuk
tahu banyak pengetahuan teknis sebuah server sebelum anda bisa menggunakannya. Perusahaan besar
pada umumnya mempekerjakan administrator server sendiri untuk hal ini. Akan tetapi jika anda tidak
memiliki kemampuan teknis yang mumpuni maka sebaiknya anda mencari Hosting Provider yang
bisa menyediakan teknisi untuk mengelola Dedicated Server-mu setiap saat 24/7/365.
Keuntungan dengan memiliki Dedicated Server adalah situs anda menempati server tersebut sendirian
dan anda bebas menambah situs-situs lain milik sendiri di server tersebut. Karena hanya dipakai
9
sendiri maka tidak ada kekawatiran situs-situs orang lain bisa memasukkan malware atau virus ke
situs anda seperti yang bisa terjadi di Shared Web Hosting. Anda bahkan juga bisa menyewakan
sebagian sumber daya servermu kepada orang lain, jika anda mau.
Dedicated Hosting Server hanya digunakan oleh perusahaan menengah dan besar dan jarang dipakai
untuk keperluan personal kecuali lalulintas pengunjung situs yang ekstrim tinggi.
5. Managed Hosting
Managed Hosting / Web Hosting Terkelola ini adalah web hosting yang dikhususkan untuk situs
dengan Platform yang sama. Seperti misalnya Managed WordPress Hosting maka web hosting
tersebut hanya dikhususkan untuk situs-situs yang dibuat dengan WordPress saja. Keuntungannya
disini adalah anda tidak direpotkan soal instalasi jika anda tidak tahu cara install WordPress di web
hosting. Dan karena hanya menjalankan platform yang sama, biasanya hosting seperti ini memiliki
sistem keamanan yang sangat prima, penyelenggaraan yang sangat optimal, dan teknisinya memiliki
pengetahuan platform yang sangat memadai saat memberi bantuan ke pelanggan. Kekurangannya
adalah biasanya biaya penyewaan hosting menjadi lebih mahal. Ada banyak jenis Managed Hosting
untuk platform lainnya seperti Joomla, Drupal, Blogger dll jika anda tertarik.
Layanan Managed Hosting cocok untuk semua orang dan jenis bisnis. Baik itu pemula, orang awam,
atau mereka yang tidak ingin ribet dengan segala urusan teknis seperti maintenance, backup dll.
Tergantung keperluan kita, kita bisa memilih shared hosting, reseller hosting, VPS atau dedicated
server. Jika website yang ditangani satu saja lebih baik memakai shared hosting, jika lebih dari 5
silahkan memakai reseller hosting, di atas 50 lebih baik memakai VPS dan di atas 100 lebih baik
memakai dedicated server. Server yang baik rata-rata memiliki uptime 99%. atau dalam satu bulan
dapat hidup sekitar 715 jam. Biasanya setiap hosting sudah menampilkan up time nya di halaman
depan layanan mereka.
Jenis-Jenis Hosting
Berdasarkan Biaya
Free hosting adalah hosting yang disediakan secara gratis
Trial hosting adalah hosting yang diberikan kepada calon pelanggan untuk ujicoba kehandalan
dan fasilitas hosting. Biasanya trial hosting diberikan 30-60 hari saja.
Paid Hosting adalah hosting yang mengharuskan membayar biaya sewa. Hosting jenis ini
paling banyak digunakan. Tidak lain karena pelayanan dan kualitasnya tentu tidak asal-asalan.
Berdasarkan Client
Shared hosting yaitu hosting/server yang digunakan secara bersama-sama (berbagi) oleh
banyak pelanggan. Hosting jenis ini paling banyak dipilih karena harganya jauh lebih murah.
10
Virtual Privat Server (VPS) adalah server hosting yang digunakan secara pribadi (privat).
Pelanggan VPS mempunyai akses penuh terhadap VPS tidak seperti Shared yang terbatas pada
level user. Dalam 1 server masih dimungkinkan digunakan oleh beberapa user.
Dedicated server adalah sebuah server yang benar-benar digunakan perorangan. 1 server 1
pengguna. Server ini memiliki tingkat security yang tinggi karena tidak ada intervensi dari
pengguna lain. Biasanya digunakan oleh perusahaan corporate yang memiliki data-data penting
dan situs-situs yang memiliki trafik puluhan ribu perhari
Cloud Hosting adalah teknologi hosting dimana file-file hosting ditempatkan dilebih dari 1
server. Sistem pembayarannya pun berbeda dengan tipe hosting lain. Sistem pembayarannya
pun cukup unik. Klien hanya akan dikenakan biaya sesuai dengan resiurce yang digunakan.
Berdasarkan Lokasi
Sebenarnya setiap negara memiliki server sendiri-sendiri. Hal ini lebih ditekankan ke geo targeting.
Jika target kita di indonesia, maka gunakan server Indonesia (IIX), target Asia bisa menggunakan
server singapura (SGP) atau bahkan serber USA untuk target market Amerika dan Eropa.
Domain
Domain adalah nama situs anda yang unik di dunia internet. Unik disini berarti nama situs anda hanya
andalah pemiliknya di internet. Contohnya google.com. Apakah ada situs lain selain google yang
namanya sama? Tentu saja tidak ada. Nama google di internet hanya satu. Tidak seperti nama
manusia, bisa jadi nama wita ada banyak orang yangmenggunakannya.Jadi domain adalah identitas
anda di Internet
Domain itu sendiri adalah alat pengingat untuk mempermudah manusia dalam mengakses komputer
di internet. Dalam dunia jaringan komputer, dikenal dengan nomor ip. Sebenarnya itulah kode yang
digunakan komputer untuk mengakses suatu situs. Contoh nomor ip diinternet adalah 203.30.236.154.
Itu hanya baru satu situs. Bayangkan bila anda bekerja pada beberapa situs yang berbeda. Tentu akan
susah mengingat angka-angka tersebut bukan. Maka dari itulah dibuat fasilitas domain. Bila
diumpamakan lagi, domain itu bagaikan buku telepon pada sebuah handphone. Orang-orang tentu
lebih mengingat nama dibandingkan nomor telepon bila hendak ingin menghubungi seseorang.
Domain dibagi menjadi 3 :
1. Domain TLD (Top Level Domain) : adalah domain-domain yang paling populer di pakai di
seluruh dunia seperti .com, .org, .net, .info dan beberapa ekstensi lainnya
2. Second Level Domain : adalah domain level 2 seperti yang saya gunakan sekarang ini.
willymerdiansyah.com (willymerdiansyah=second level domain, .com = top level domain). Di
Indonesia kita juga kenal seperti .co.id, .web.id, net.id dan beberapa ekstensi lainnya
3. Lower Level Domain : biasanya juga disebut dengan subdomain. misal seperti
blog.willymerdiansyah.com
11
Berikut jenis-jenis domain berdasarkan Top Level Domainnya. Alias pembagian nama domain
berdasarkan ekstensi domain tersebut :
1. Global Top Level Domain (gTLD) adalah domain yang menggunakan ekstensi global/TLD
internasional. Ada banyak jumlah GTLD yang bisa digunakan untuk website, diantaranya :
.COM (Commercial) untuk perusahaan komersil
.NET (Network) untuk perusahaan jaringan/networking
.ORG (organization) diperuntukkan bagi badan organisasi
.TV (television) khusus untuk perusahaan penyiaran televisi
.GOV (government) untuk lembaga pemerintahan.
dan masih banyak yang lain seperti .cc, .in, .co, .im dan sebagainya.
2. Country Code Top Level Domain (ccTLD) adalah domain yang dikhususkan untuk digunakan di
masing-masing negara. Untuk bisa menggunakan ekstensi domain ini harus memenuhi persyaratan
yang telah ditentukan pada masing-masing negara. Kalau di Indonesia sendiri minimal
mewajibkan.ID (Indonesia) ekstensi domain untuk Indonesia
.AU (Australia) ekstensi domain untuk Australia
.MY (Malaysia) ekstensi domain untuk Malaysia
.UK (United Kingdom) ekstensi domain untuk Inggris
.SG (Singapore) untuk negara Singapura
dan masih banyak yang lain tergantung negara masing-masing.
Domain di indonesia
Domain Indonesia (.id) adalah ekstensi domain yang digunakan di Indonesia. Berikut detail
penggunaan dan syarat untuk mendapatkan domain khusus Indonesia
1. Jenis-jenis domain indonesia
.CO.ID = untuk perusahaan komesial
.WEB.ID = untuk individu/kelompok
.SCH.ID = untuk sekolahan
.AC.ID = untuk perguruan tinggi
.OR.ID = untuk organisasi
.GO.ID = untuk bedan pemerintahan
.NET.ID = untuk perusahaan jaringan
2. Persyaratan Daftar Domain Di Indonesia
.CO.ID = KTP*, akta niotaris/SIUP dan hak merk
.WEB.ID = KTP*
.SCH.ID = KTP*, surat kuasa, surat permohonan dari kepala sekolah
.AC.ID = KTP*, SK Depdiknas Pendirian, Akta Notaris Pendirian, Surat Kuasa Pimpinan
Lembaga
12
.OR.ID = KTP*, Akta Notaris atau SK Organisasi
.NET.ID = KTP*, SIUP, Kepemilikan Merk, SIUP Telekomunikasi (ISP, Telco, VSAT, dsb)
.GO.ID = KTP*, Surat permohonan di tanda tangani oleh Sekjen/Sekut/Sekmen untuk
Pemerintah Pusat atau Sekda untuk Pemda, dan Surat kuasa
KOMPETENSI DASAR :
KI 3.2 : Memahami format teks pada halaman web
KI 4.2 : Menyajikan teks dalam format tertentu pada halaman web
Format teks halaman web
Pengertian HTML
Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah
simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan
halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x>
dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan
tanda </x> seperti tag <br>, <input> dan lainnya.
Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu berakhiran
dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan
ekstensi *.html maka anda membuat file yang berformat HTML.
Menggunakan Tag pada HTML
Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12 pt</font>
hasil
Ini Font Arial berwarna merah dan berukuran 12 pt
13
Keterangan
Atribut color digunakan untuk menentukan warna tulisan.
Atribut face digunakan untuk menentukan jenis huruf.
Atribut size digunakan untuk menentukan ukuran huruf.
Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang terakhir
adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser hanya membaca
isi dari properi bukan urutan atributnya.
Daftar Tag pada HTML
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
14
Font
15
Menggunakan Atribut dari Tag
Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang
bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab2 dan
seterusnya. Jika anda praktik pada bab 2 maka simpanlah file anda pada folder bab 2. Demikian
untuk seterusnya.
Pada bab 2 ini materi yang diharapkan dapat anda kuasai antara lain Menggunakan berbagai attribut
dari tag diantaranya:
Tag p, font dan attribut universal
Contoh-contoh penggunaan tag dan atributnya
Pada bab sebelumnya telah anda pelajari macam-macam atribut dari tag yang terdapat pada HTML.
Sekarang saatnya kita menerapkan atribut tersebut dalam sebuah file. Untuk lebih memudahkan anda
dalam memahami kita langsung saja pada contoh.
• Pertama jalankan software “notepad ++”
• Klik menu File – New
Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh
yang pertama ini kita akan menggunakan atribut dari tag <p>…</p>.
A. Tag <p>…</p>
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu kalau
paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas ketik kode di
bawah ini.
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
16
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan
batas tepi halaman. Oh ya, tag <p></p> merupakan default atau bentuk baku tag
<p></p> dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi
atribut <i>align</i> pada tag <p> maka browser akan menganggap rata kiri.</p>
</body>
</html>
Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak dialog
Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di folder anda
tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as Type adalah
HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan muncul output dari
kode anda.
Tampilan saat dijalankan di web browser
B. Tag <font>…</font>
Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf, telah kita singgung
penggunaan atribut font. Namun kita akan lebih bereksperimen dengan atribut ini.
17
Seperti biasa klik File – New
Ketik kode di bawah ini.
<html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
<p><font face="Arial">Ini Font Arial</font></p>
<p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>
<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarna biru
sekaligus tebal</b></font>
<p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna merah, tebal
dan berada di tengah</b></font><p>
<p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah, </font>
<font face="Verdana" color="blue">Sedangkan ini adalah font Verdana
berwarna biru</font></p>
</body>
</html>
Hasil :
18
Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini :
<H1> … </H1> (Heading 1)
<H2> … </H2> (Heading 2)
<H3> … </H3> (Heading 3)
<H4> … </H4> (Heading 4)
<H5> … </H5> (Heading 5)
<H6> … </H6> (Heading 6)
Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html>
<head>
<title>belajar tag heading</title>
</head>
<body>
19
<h1>ukuran heading 1</h1>
<h2>ukuran heading 2</h2>
<h3>ukuran heading 3</h3>
<h4>ukuran heading 4</h4>
<h5>ukuran heading 5</h5>
<h6>ukuran heading 6</h6>
</body>
</html>
seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang
bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.
Menampilkan Garis Horisontal (Horizontal Row)
Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa
ditambahkan atribut-atribut seperti berikut ini :
Size : Untuk mengubah ketebalan garis
Width : Untuk merubah lebar garis
Align : Untuk mengatur tata letak teks dalam baris
Noshade : Untuk merubah garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html>
<head>
<title>belajar membuat garis </title>
</head>
<body>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left noshade>
Jl. Jambu 1 No. 12<br>
20
Gedung Meneng<br>
Bandar Lampung 35145
</body>
</html>
Penggunaan Tag Divisi
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama. Fungsinya bisa juga disamakan dengan tag <P>. perhatikan pada contoh berikut
ini :
Divisi.html
<html>
<head>
<title>belajar tag div </title>
</head>
<body>
<div align=”right”>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</div>
</body>
</html>
Membuat daftar/list di HTML.
Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag List. Dalam HTML, tag
list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan) Ordered list akan
ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered
list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri
menggunakan tag <li>
Contoh penggunaan tag ordered list <ol>:
Tag Attribute Value Description
21
<OL>
<OL>
TYPE
START
I
i
A
a
n
Upper Roman
Lower Roman
Upercase
Lowercase
Begin Number
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ol>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ol>
</body>
</html>
Untuk menjadi unordered list, tinggal ganti tag <ol> menjadi <ul>.
Tag Attribute Value Description
<UL> TYPE SQUARE Bullet Kotak
22
DISC
CIRCLE Bullet Titik
Bullet Lingkaran
Contoh penggunaan tag unordered list <ul>:
<!DOCTYPE html>
<html>
<head>
<title>penggunaan tag list </title>
</head>
<body>
<h1>daftar belanjaan</h1>
<ul>
<li>minyak goreng</li>
<li>sabun mandi</li>
<li>deterjen</li>
<li>shampoo</li>
<li>obat nyamuk</li>
</ul>
</body>
</html>
Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat
digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu home, dan daftar link
pada sidebar halaman ini.
23
KOMPETENSI DASAR :
KI 3.3 : Memahami format tabel pada halaman web
KI 4.3 : Menyajikan tabel pada halaman web
Format Tabel Halaman Web
Tabel
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada penggunanya. Terdapat
banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan
tabel. Untuk menampilkan data dengan grafik pada HTML, kita dapat menggunakan gambar
(elemen img), sementara daftar jelas dibuat menggunakan elemen list. Bagaimana dengan tabel?
HTML memiliki elemen khusus untuk membuat tabel, yaitu table.
Struktur Tabel
Meskipun terlihat sederhana, pembangunan tabel yang telah kita lakukan sampai sejauh ini masih
merupakan sebuah tabel yang hanya menyimpan data. Data yang disimpan dan ditampilkan sendiri
24
tidak memiliki strukutr, sehingga tidak terdapat organisasi data yang baik. Pengorganisasian data yang
baik dan benar pada sebuah tabel HTML akan sangat membantu kita dalam mengembangkan aplikasi
web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris tabel saja tidak cukup untuk mengorganisasikan data pada tabel, karena
kita tidak dapat secara langsung mengetahui mana bagian dari tabel yang merupakan data, mana yang
merupakan isi data, dan mana yang merupakan nilai agregasi dari data. Kita juga tidak dapat
mengetahui tujuan atau deskripsi dari sebuah tabel dengan hanya baris dan kolom tabel. HTML
menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal yang disebutkan
sebelumnya, yaitu elemen caption, thead, tfoot, dan tbody.
Table Caption
Untuk menambahkan deskripsi atau judul dari sebuah tabel, kita dapat menggunakan
elemen caption yang diletakkan di dalam table. Elemen caption ini harus dituliskan setelah tag
pembuka tabel. Posisi standar dari sebuah caption ialah di atas tabel, tetapi seperti seluruh elemen
lainnya, tentunya kita kita dapat mengubah posisi tersebut dengan menggunakan CSS.
<table>
<caption>DreamHack Invitational Scores</caption>
Contoh Caption pada Tabel
Perubahan posisi caption sendiri dapat dilakukan dengan menggunakan properti caption-side pada
elemen table. Nilai yang dapat diisikan pada properti ini yaitu top, bottom, dan inherit.
table {
caption-side: bottom;
}
25
Contoh Caption Bawah pada Tabel
Table Head, Body, dan Foot
Sebuah tabel dapat dibagi menjadi beberapa bagian, biasanya header, footer, dan body. Header dari
tabel digunakan untuk mendeskripsikan data, body tabel untuk menampilkan isi data, dan footer dari
tabel digunakan untuk menampilkan agregasi dari data tersebut.
Contoh Tabel dengan Header, Body, dan Footer
Elemen-elemen HTML yang digunakan untuk membuat masing-masing bagian dari tabel tersebut
yaitu thead, tbody, dan tfoot. Elemen paling pertama yang harus diletakkan
setelah caption ialah thead, dan setelah thead, kita bebas meletakkan tfoot atau tbody terlebih dahulu.
<table>
<caption>...</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
<tfoot>
26
...
</tfoot>
</table>
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di
antara tag <TABLE> dan </TABLE>
1.<TABLE>
Terdiri dari atribut :
align – perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor – warna latar belakang (background) dari tabel.
border – ukuran lebar border tabel (dalam pixel).
width – ukuran tabel dalam pixel atau percent.
Contoh :
<TABLE align=”center” bgcolor=”#0000FF” border=”2″ width=”50%”>
2.<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
align – perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor – warna latar belakang dari baris.
valign – perataan vertikal : top, middle atau bottom.
Contoh :
<TR align=”right” bgcolor=”#0000FF” valign=”top”>
3.<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
align – perataan
background – image yang digunakan sebagai latar belakang dari kolom.
bgcolor – warna latar belakang
height – ukuran tinggi cell dalam pixels.
valign – perataan vertikal :top, middle atau bottom.
width – ukuran kolom dalam pixel atau percen.
Pembuatan Tabel
Sebuah tabel selalu terdiri dari dua elemen utama, yaitu baris dan kolom. Tentunya HTML memiliki
elemen untuk membuat baris dan kolom dari sebuah tabel, tetapi sebelum membuat baris dan kolom
27
dari tabel kita harus membuat tabelnya terlebih dahulu. Pembuatan tabel dimulai dari inisialisasi tabel,
menggunakan elemen table:
<table>
<!-- Data -->
</table>
dan selanjutnya, kita dapat menambahkan baris ke dalam tabel tersebut dengan menggunakan
elemen tr:
<table>
<tr>
<!-- Isi Baris Tabel -->
</tr>
<tr>
<!-- Isi Baris Tabel -->
</tr>
</table>
dan setiap baris dari tabel tentunya harus diisikan dengan data, yang akan menghasilkan kolom tabel.
Pengisian data pada tabel dilakukan dengan menggunakan elemen td, seperti berikut:
<table>
<tr>
<td>NIM</td>
<td>Nama</td>
</tr>
<tr>
<td>23511000</td>
<td>Alex Xandra Albert Sim</td>
</tr>
</table>
Pembatas (Border) Tabel
Pembuatan tabel yang telah kita lakukan sampai pada titik ini merupakan tabel yang tidak memiliki
pembatas antar sel tabel. Tampilan standar yang diberikan HTML seperti ini sangat jarang dijumpai di
dalam dokumen pada umumnya. Biasanya, tabel yang kita jumpai selalu memiliki batas antar setiap
sel, sehingga membuat tabel tanpa batas akan menjadi aneh dan membingungkan pengguna.
28
Untungnya, CSS telah memberikan fasilitas untuk memberikan tabel pada elemen-elemen yang ada,
melalui propertiborder. Kita dapat menggunakan properti ini untuk memberikan garis pembatas antar
setiap sel pada tabel, seperti berikut:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<style type="text/css">
table {
border: 1px solid #C6C6C6;
}
</style>
</head>
<body>
<table>
<tr>
<th> </th>
<th>Senin</th>
<th>Selasa</th>
<th>Rabu</th>
</tr>
<tr>
<th scope="row">TI-A</th>
<td>Basis Data</td>
<td>Desain Web</td>
<td>Matematik</td>
</tr>
<tr>
<th>TI-B</th>
<td>Desain Web</td>
<td>Struktur Data</td>
<td>Basis Data</td>
</tr>
<tr>
29
<th>TI-C</th>
<td>Struktur Data</td>
<td>Pemrograman</td>
<td>Matematika</td>
</tr>
</table>
</body>
</html>
Coba jalankan kode di atas untuk mendapatkan hasil seperti berikut:
Pembatas Tabel
Ternyata properti border tidak dapat menghasilkan pembatas pada sel tabel secara otomatis! Untuk
menanggulanginya, kita perlu menambahkan kode border tersebut pada elemen td dan th juga,
sehingga kode CSS menjadi seperti berikut:
table, td, th {
border: 1px solid #C6C6C6;
}
dan kita akan mendapatkan pembatas pada setiap sel:
Pembatas Tabel pada Setiap Sel
Seperti yang dapat dilihat pada gambar Pembatas Tabel pada Setiap Sel, secara otomatis browser
akan menambahkan jarak pada setiap sel yang ada. Untuk menambah dan mengurangi jarak antar sel
ini kita dapat menggunakan properti CSSborder-spacing, yang hanya dapat digunakan untuk
elemen table. Tambahkan kode CSS baru berikut untuk melihat contoh penggunaan border-spacing:
table {
border-spacing: 15px;
30
}
Jarak Tiap Sel pada Tabel
Jika ingin menghilangkan keseluruhan jarak pada sel, kita dapat menggunakan properti border-
collapse, yang sama seperti border-spacing hanya dapat digunakan pada elemen table.
Properti border-collapse dapat diisikan dengan dua nilai, yaitu separate dan collapse. Nilai standar
dari browser ialah separate, yang akan menghasilkan jarak antar sel. Nilai collapse, seperti yang telah
dapat ditebak, akan menghilangkan segala jarak antar sel.
table {
border-collapse: collapse;
}
Menghilangkan Jarak Tiap Sel pada Tabel
Spanning / Menggabungkan Beberapa Sel
Dalam membuat tabel, seringkali kita akan memerlukan penggabungan beberapa sel sekaligus.
Mungkin saja nilai dari sel pada beberapa baris adalah sama. Bisa juga penggabungan dilakukan
untuk memperindah tampilan tabel. HTML menyediakan fasilitas untuk menggabungkan beberapa sel
dengan menggunakan atribut colspan dan rowspan pada elemen td atau th.
Seperti namanya, colspan digunakan untuk menggabungkan beberapa kolom sekaligus,
dan rowspan digunakan untuk menggabungkan beberapa baris sekaligus. Nilai yang diisikan pada
kedua atribut ini ialah berapa banyak sel yang ingin digabungkan. Misalnya jika ingin
menggabungkan tiga kolom, maka kita dapat menuliskan colspan="3". Setelah menggabungkan sel,
tentunya kita harus menuliskan lebih sedikit baris atau kolom pada bagian tabel berikutnya.
31
Untuk mempermudah ilustrasi, perhatikan kode berikut:
<table>
<tr>
<th rowspan="2">Teams</th>
<th colspan="3">Scores</th>
</tr>
<tr>
<th scope="col">Win</th>
<th scope="col">Draw</th>
<th scope="col">Lost</th>
</tr>
<tr>
<th scope="row">Na'Vi</th>
<td>4</td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th scope="row">invictus Gaming</th>
<td>6</td>
<td>1</td>
<td>1</td>
</tr>
</table>
yang akan menghasilkan tabel seperti berikut:
Menggabungkan Kolom dan Baris pada Tabel
32
Perhatikan bagaimana jumlah th berbeda pada baris pertama dan baris kedua, sesuai dengan
penggabungan kolom yang dilakukan. th pertama pada baris pertama memiliki
atribut rowspan="2" yang berarti sel yang bersangkutan akan bergabung dengan sel pada kolom yang
sama di baris berikutnya, sehingga tr untuk baris kedua hanya memiliki tiga buah th.
Selanjutnya, th kedua pada baris pertama memiliki atribut colspan="3", yang berarti tiga kolom
selanjutnya akan digabungkan ke dalam satu kolom, sehingga hanya terdapat dua th pada baris ini
(dua th selanjutnya tidak perlu dituliskan lagi karena telah digabungkan pada th kedua).
Perhatikan juga bagaimana atribut scope digunakan pada th yang relevan (memiliki arti langsung pada
data) seperti jumlah kemenangan dan nama tim, tetapi browser tidak dapat secara langsung sel yang
bersangkutan merupakan nilai kombinasi. Browser dapat mengetahui bahwa sebuah tim memiliki
empat kemenangan, dan Na’vi memiliki skor 4/1/3, tetapi browser tidak dapat mengetahui bahwa
Na’vi memiliki empat kemenangan.
Jika kita dapat secara langsung melihat tabel hasil penampilan browser tentunya hal ini tidak menjadi
masalah. Tetapi untuk pengguna yang menggunakan alat bantu seperti screen reader, kita perlu
memberitahukan secara khusus ke browser sel-sel yang relevan terhadap sebuah nilai. Pemberian
makna semantik seperti ini dapat dilakukan dengan memanfaatkan atribut headers pada elemen td.
Atribut headers menerima nilai berupa id dari sel bersangkutan yang memberikan arti pada tabel
tersebut. Karena model dari tabel yang mengharuskan kita melihat beberapa sel sekaligus, maka kita
dapat mengisikan beberapa idsekaligus ke dalam atribut ini, dengan pemisah berupa spasi. Misalnya,
kita dapat memberikan id pada setiap th yang ada pada tabel seperti berikut:
<table>
<tr>
<th id="team" rowspan="2">Teams</th>
<th id="score" colspan="3">Scores</th>
</tr>
<tr>
<th id="win" scope="col">Win</th>
<th id="draw" scope="col">Draw</th>
<th id="lost" scope="col">Lost</th>
</tr>
<tr>
<th id="navi" scope="row">Na'Vi</th>
dan kemudian memberitahukan setiap sel yang menyimpan nilai masing-masing id yang relevan
terhadap nilai tersebut, seperti berikut:
<td headers="team navi win score">4</td>
33
<td headers="team navi draw score">1</td>
<td headers="team navi lost score">3</td>
</tr>
sehingga perangkat lunak screen reader mengetahui bahwa sel yang berisi nilai “4” merupakan
pencatatan akan jumlah kemenangan sebuah tim yang bernama “Na’vi”. Bahkan sebenarnya sebuah
perangkat lunak screen reader yang baik akan membaca sel tersebut sebagai “Teams Na’Vi Win
Scores is 4”, sesuai dengan isi dari masing-masing sel.
Contoh lain penggunaan spanning table
<table border="1">
<tr>
<td colspan="5">Gabungan Kotak 1-5</td>
</tr>
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>
dan hasilnya akan menjadi seperti ini:
Gabungan kotak 1-5
Kotak 1 Kotak 2 Kotak 3 Kotak 4 Kotak 5
Dengan menyetting colspan menjadi “5”, kotak di barisan pertama akan melebar menjadi gabungan
dari 5 kolom. Berikut adalah contoh lain untuk pemahaman yang lebih baik:
<table border="1">
<tr>
<td colspan="3">Kotak 1-3</td>
<td>Kotak A</td>
<td>Kotak B</td>
</tr>
34
<tr>
<td>Kotak 1</td>
<td>Kotak 2</td>
<td>Kotak 3</td>
<td>Kotak 4</td>
<td>Kotak 5</td>
</tr>
</table>
dan anda bisa lihat di browser, hasilnya akan seperti ini:
Kotak 1-3 Kotak A Kotak B
Kotak 1 Kotak 2 Kotak 3 Kotak 4 Kotak 5
Bagaimana dengan Rowspan? Rowspan tugasnya untuk menyatukan kotak- kotak row kebawah
sehingga menjadi satu unit yang panjang. Contohnya seperti ini:
<table border="1">
<tr>
<td rowspan="5">Kotak 1-5</td>
<td>Kotak 1</td>
</tr>
<tr>
<td>Kotak 2</td>
</tr>
<tr>
<td>Kotak 3</td>
</tr>
<tr>
<td>Kotak 4</td>
</tr>
<tr>
<td>Kotak 5</td>
</tr>
</table>
35
dan ini hasilnya pada browser anda:
Kotak 1-5
Kotak 1
Kotak 2
Kotak 3
Kotak 4
Kotak 5
KOMPETENSI DASAR :
KI 3.4 : Memahami tampilan format multimedia pada halaman web
KI 4.4 : Menyajikan tampilan format multimedia pada halaman web
Multimedia Pada Halaman Web
Untuk mendapatkan sebuah website yang menarik, kita harus mampu mengkombinasikan berbagai
unsur pendukung dalam sebuah halaman website. Selain informasi disajikan dalam bentuk teks yang
menarik dan frame yang enak dilihat, unsur lain yang sangat menunjang diantaranya adalah perlu
ditambahkan multimedia. Multimedia berupa teknologi yang memadukan unsur teks, gambar diam,
animasi gambar, suara dan bahkan video. Namun yang perlu diperhatikan bahwa tidak semua browser
mendukung adanya multimedia khususnya yang berkaitan dengan audio dan video. Untuk
menagtisipasi hal ini diperlukan software eksternal, misalnya winamp untuk memainkan suara atau
windows media player untuk memainkan film ataupun suara.
Tipe suara dan video yang dapat disertakan dalam halaman web antara lain :
Format Kategori Ekstensi
AVI Video avi
MPEG Video mpg, mpeg
Quick Time Video qt, mov
AIFF Audio aif, aiff
AU Audio au
36
MIDI Audio mid, midi
WAV Audio wav
Perlu diketahui bahwa tidak semua browser menyediakan fasilitas untuk memainkan berkas-berkas
yang disebutkan diatas. Sebagai gantinya, diperlukan perangkat lunak eksternal; misalnya WinAmp
untuk memainkan suara atau Windows Media Player untuk memainkan film ataupun suara.
1. Format tampilan gambar pada halaman web
Perintah dasar minimal :
<img src="nama-file-gambar.jpg" />
dengan perintah diatas gambar akan ditampilkan sesuai ukuran aslinya. Kode yang dianjurkan :
<img src="nama-file-gambar.jpg" width="lebar" height="tinggi" border="garisluar" alt="text
alternatif" title="Text pesan" />
Keterangan atribut :
src : diisi dengan nama file lengkap dengan jenis gambar, jika berada di sub folder :
namafolder/namafile.jpg tambahan opsional (boleh diguankan jika diperlukan)
width : diisi dengan angka lebar ukuran gambar ditampilkan sesuai ruang yang tersedi
height : diisi dengan angka tinggi ukuran gambar ditampilkan sesuai ruang yang tersedia
border : diisi dengan angka ketebalan garis luar dari nilai minimal 0 yang berarti tanpa garis
alt : text alternatif jika gambar belum selesai/gagal ditampilkan
title : text yang akan muncul jika mouse diarahkan diatas gambar
Contoh penggunaan tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Image</title>
</head>
<body>
<h1>Belajar Tag Gambar</h1>
<img src="koala.jpg" />
</body>
</html>
Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />
37
- See more at: http://www.zainalhakim.web.id/posting/cara-memasukkan-gambar-dalam-halaman-
web.html#sthash.KuorOTKk.dpuf
2. Format tampilan audio pada halaman web
Sampai sekarang, belum ada standar untuk memainkan file audio pada sebuah halaman web. Hari ini,
sebagian besar file audio diputar melalui plug-in (seperti flash). Namun, browser yang berbeda
mungkin memiliki berbagai plug-in.
HTML5 mendefinisikan sebuah elemen baru yang menentukan cara standar untuk menanamkan file
audio pada halaman web: elemen <audio>.
Browser Dukungan
Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung elemen <audio>.
Catatan: Internet Explorer 8 dan versi sebelumnya, tidak mendukung elemen <audio>.
HTML5 Audio - Cara Bekerja :
Untuk memainkan file audio di HTML5, ini adalah semua yang Anda butuhkan:
Contoh
38
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Atribut control menambahkan kontrol audio, seperti play, pause, dan volume. Anda juga harus
memasukkan konten teks antara <audio> dan </ audio> tag untuk browser yang tidak mendukung
elemen <audio>.
Unsur <audio> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file audio
yang berbeda. Browser akan menggunakan format diakui pertama. Audio Format dan Dukungan
Browser. Saat ini, ada 3 format file yang didukung untuk elemen <audio>: MP3, Wav, dan Ogg:
Browser MP3 Wav Ogg
Internet Explorer 9 YA NO NO
Firefox 4.0 NO YA YA
Google Chrome 6 YA YA YA
Apple Safari 5 YA YA NO
Opera 10,6 NO YA YA
HTML5 Audio Tags
Tag Deskripsi
<audio> Mendefinisikan isi suara
<source>Mendefinisikan beberapa sumber daya media untuk elemen
media, seperti <video> dan <audio>
39
INFO :
HTML5 membuat video dan audio anda benar-benar diakses dengan tag <video> dan tag <audio>. Tag video dan audio ini dibuat hampir sama dengan tag untuk image/gambar yaitu :<video src=”url”/>.
1. <audio autoplay="autoplay" controls="controls">2. <source src="file.ogg" />3. <source src="file.mp3" />4. <a href="file.mp3">Download this file.</a>5. </audio>
Tag tersebut berfungsi untuk menyisipkan file audio dan video tentunya. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.
Untuk mengetahui apakah suatu website menggunakan HTML 4 atau HTML 5 adalah
Menyisipkan Audio Menggunakan Yahoo Media Player
Yahoo player is free. Untuk menggunakan tinggal sisipkan kode JavaScript pada bagian bawah
halaman web.
Contoh :
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js"></script>
Kemudian lakukan link ke file MP3 dalam HTML, dan kode JavaScript otomatis menciptakan tombol
play untuk setiap lagu:
<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js">
</script>
40
INFO :
HTML5 membuat video dan audio anda benar-benar diakses dengan tag <video> dan tag <audio>. Tag video dan audio ini dibuat hampir sama dengan tag untuk image/gambar yaitu :<video src=”url”/>.
1. <audio autoplay="autoplay" controls="controls">2. <source src="file.ogg" />3. <source src="file.mp3" />4. <a href="file.mp3">Download this file.</a>5. </audio>
Tag tersebut berfungsi untuk menyisipkan file audio dan video tentunya. Berbeda dengan versi HTML pendahulunya yang harus menyisipkan flash untuk memutar audio/video, HTML5 akan dengan mudah menyisipkan file multimedia tersebut ke dalam webnya.
Untuk mengetahui apakah suatu website menggunakan HTML 4 atau HTML 5 adalah
Menyisipkan Audio Menggunakan Google
<a href="song.mp3">Play Song</a>
<embed type="application/x-shockwave-flash" wmode="transparent"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=song.mp3"
height="27" width="320">
</embed>
3. Format tampilan video dan animasi pada halaman web
Salah satu keunggulan yang diusung oleh HTML 5 adalah
kemudahan untuk menampilkan file Video pada halaman
Web tanpa harus menggunakan Plugin Khusus atau plugin
tambahan seperti Flash. Tetapi cukup hanya dengan
menggunakan element yang ada. Element yang dimaksud
adalah element <video>.
Sebelum mencobanya, ada beberapa hal yang perlu diketahui
:
1. Hampir semua web browser sudah mendukung penggunakan HMTL5. Jadi install-lah terlebih
dahulu salah satu web browser yang menjadi favorit anda. Disarankan menggunakan Google Chrome.
2. Format file video yang didukung oleh HTML5 adalah berformat .mp4, .oog dan .WebM.
Format video: (jika bisa akan ditulis versi minimalnya)
Format IE Firefox Opera Chrome Safari
ogg Tidak Bisa 3.5+ 10.5+ 5.0+ Tidak Bisa
mp4 9.0+ Tidak Bisa Tidak Bisa 5.0+ 3.0+
Adapun cara menuliskannya adalah sbb :
<video width="320" height="240" controls>
<source src="video_anda.mp4" type="video/mp4">
<source src="video_anda.ogg" type="video/ogg">
</video>
Untuk melengkapi penggunaan element, dapat menambahkan beberapa properties :
width=”dalam pixel” (Untuk Menentukan lebar video)
height=”dalam pixel” (Untuk Menentukan tinggi video)
controls=”controls” (Untuk Menampilkan tombol kontrol video)
autoplay=”autoplay” (Untuk Memutar video secara otomatis)
41
loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)
Keterangan lebih lengkapnya bisa dibaca di http://www.w3schools.com/tags/ref_av_dom.asp
Sehingga penulisan tag HTML nya bisa seperti dibawah ini :
<video width="320" height="240" autoplay=”autoplay” controls=”controls” poster=”cover.jpg”
loop=”loop”>
<source src="video_anda.mp4" type="video/mp4">
<source src="video_anda.ogg" type="video/ogg">
</video>
Tag <embed>
Tujuan tag <embed> untuk menempelkan elemen multimedia kedalam halaman HTML . Kode
HTML berikut menampilkan Flash video yang di-embedded kedalam halaman web:
<embed src="intro.swf" height="200" width="200"/>
Menggunakan Tag <object>
Tujuan tag <object> untuk menempelkan elemen multimedia kedalam halaman HTML . Kode HTML
berikut menampilkan Flash videoyang di-embedded kedalam halaman web:
<object data="intro.swf" height="200" width="200"/>
Video YouTube
Jika anda ingin memainkan video, anda dapat meng-upload video ke YouTube dan menyisipkan kode
HTML untuk memainkan video kedalam halaman web anda.
<iframe width="420" height="345" src=http://www.youtube.com/embed/XGSy3_Czz8k
frameborder="1">
</iframe>
42
KOMPETENSI DASAR :
KI 3.5 : Memahami kaitan antar dan inter halaman web
KI 4.5 : Menyajikan kaitan antar dan inter halaman web
Hyperlink Halaman Web
1. Pengertian dan fungsi hyperlink
Pranala atau hipertaut (Inggris: hyperlink) adalah sebuah acuan dalam dokumen hiperteks(hypertext)
ke dokumen yang lain atau sumber lain. Seperti halnya suatu kutipan di dalam literatur.
Dikombinasikan dengan sebuah jaringan data dan sesuai dengan protokol akses, sebuah komputer
dapat diminta untuk memperoleh sumber yang direferensikan.
Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Sebuah embedded link
(pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan: satu atau lebih
dari kata-kata yang menggunakan tipe/gaya teks khusus.
43
Fungsi Hyperlink adalah untuk menghubungkan setiap masing-masing halaman website anda satu
sama lainnya atau ke website yang lain, jadi jika pengunjung website anda sedang mengeklik suatu
kata atau gambar yang mengandung hyperlink, maka ia akan diarahkan untuk menuju ke alamat URL
yang ada di dalam hyperlink tersebut.
Link yang merupakan singkatan dari "hyperlink" adalah sebuah fungsi dalam HTML yang digunakan
untuk memudahkan user untuk menelusuri seluruh isi atau informasi yang tersimpan dalam website
bersangkutan. Link juga berguna untuk menghubungkan antar dokumen HTML. Dalam HTML,
sebuah objek teks yang berupa link akan ditampilkan dengan font berwarna birustyle underline
(bergaris bawah). Jika cursor mouse didekatkan pada objek yang berupa link, maka cursor akan
berubah menjadi gambar tangan yang menunjuk pada link tersebut, kemudian jika sebuah link sudah
pernah diakses atau dikunjungi, maka warna dari teks / objek link tersebut akan berubah menjadi
ungu. dengan
Di dalam situs web biasanya anda akan melihat teks yang warnanya berbeda, bergaris bawah atau
berada dalam kotak (tombol). Inilah yang disebut hyperlink atau link.Jika bagian ini diklik, anda akan
dibawa ke halaman web lainnya. Kita akan mengetahui bahwa teks tersebut aktif (link) karena jika
melewatkan pointermouse di atasnya, pointer itu berubah menjadi pointing finger.
2. Format link antar isi pada satu halaman web
Saat ini kita akan bahas cara membuat link untuk alamat yang dituju masih dalam satu halaman yang
sama. Biasa di sebut link anchor. Ini cocok digunakan untuk teman-teman yang membuat satu
halaman yang panjang atau tulisan dalam satu halaman yang terdiri dari bab-bab.
Tag html yang digunakan yaitu <a>. Sedangkan atribut yang kita gunakan adalah name dan href.
Sebagai contoh yang mungkin sering di temui adalah disaat kita membaca suatu halaman sampai
habis(sampai bawah), terkadang kita menemui tulisan “Kembali ke atas” atau Top di sertai tanda
panah ke atas, setelah di klik maka kita akan kembali ke bagian atas halaman yang kita baca. Itulah
yang kita bahas kali ini.
Langkah pertama kita membuat anchor name, contoh kodenya adalah sebagai berikut :
<a name="atas">ini awal halaman</a>
Letakkan kode anchor name itu pada bagian yang akan kita tuju, jika nantinya link di klik. Pada
contoh tersebut kita akan letakkan kodenya di awal halaman. Untuk atribut name kita bebas mau
memberikan nama apa aja, yang penting disesuaikan dengan bagian yang akan kita tuju. Dan untuk
teks “ini awal halaman” boleh dihilangkan sehingga kode di atas bisa kita tulis <a
name=”atas”></a>
Langkah selanjutnya kita membuat link nya. Seperti membuat link sebelumnya kita memakai
atribut href, sehingga kodenya jadi seperti ini :
<a href="#atas">Kembali keatas</a>
44
Dari kode diatas pada atribut href harus sama dengan yang kita tulis pada atribut name, tapi pada href
diawali dengan tanda #. Selanjutnya teks Kembali keatas itu yang akan ditampilkan dan nantinya jika
kita klik maka kita kan dibawa kebagian atas halaman yang kita baca. Letakkan kode linknya di mana
kamu suka, sesuai kebutuhan.
3. Format link antar halaman web untuk membentuk sitemap
Sitemap adalah sebuah lokasi yang menempatkan semua url yang ada di halaman web/blog kita
sebagai tinjauan bagi pengunjung untuk mengetahui lebih jauh isi dari blog tersebut. Apabila
diibaratkan, sitemap adalah sebuah denah jalan atau peta situs.
Peta situs ini seperti berbagai macam jalan yang nantinya akan menghubungkan antara jalan yang satu
dengan yang lainnya bahkan melebihi dari satu kota. Apa maksudnya? Maksudnya adalah sitemap ini
dibuat agar pengunjung mengetahui lokasi artikel yang ia baca dan dia cari bahkan dapat
menghubungkan lokasi artikel tersebut ke search engine atau situs blog lain.
Fungsi Sitemap
Fungsi sitemap ini adalah untuk menginformasikan url-url yang berada di blog kita agar lebih mudah
di crawl dan dijelajahi oleh para tools atau robot-robot search engine dan akan memudahkan
pengunjung mencari artikel yang dibutuhkannya. Selain itu, pembuatan dari sitemap ini secara tidak
langsung akan manambah nilai SEO di blog kita agar lebih terindex. SEO adalah singkatan dari
Search Engine Optimization. Yang secara arti kata adalah sebuah proses yang dilakukan oleh pemilik
website agar websitenya bisa optimal di search engine, sehingga website tersebut bisa masuk di urutan
atas di hasil pencarian search engine dengan kata kunci tertentu.
Tag link ditulis dengan <a>, singkatan cari anchor (jangkar) Setiap tag link setidaknya memiliki
sebuah atribut href. Dimana href akan berisi alamat yang dituju. (href adalah singkatan dari hypertext
reference). Silahkan buka text editor dan buat kode seperti dibawah ini.
Contoh penggunaan tag link <a>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar HTML dari
<a href="http://www.duniailkom.com">Duniailkom</a></p>
45
</body>
</html>
Contoh diatas menggunakan alamat absolut, artinya kita menuliskan alamat link dengan lengkap.
Namun jika halaman web yang kita tuju adalah di dalam folder tempat kita menjalankan file ini,
tidak perlu menuliskan alamat lengkap dari link tersebut, atau disebut juga alamat relatif.
Seandainya kita ingin membuat link kepada file hello.html pada folder yang sama, kode
HTMLnya akan menjadi :
Contoh penggunaan tag link <a>:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Halaman HTML pertama saya adalah <a href="hello.html">Hello</a></p>
</body>
</html>
46
alamat absolute ditulis dengan lengkap, seperti http://www.duniailkom.com, atau jika kita
merujuk kepada halaman tertentu, menjadi http://www.duniailkom.com/nama_halaman.html.
Alamat relatif maksudnya adalah relatif kepada file tempat kita memanggil link ini. Seandainya
nama file adalah belajar_link.html, dan dalam folder yang sama terdapat
halaman belajar_list.html, kita dapat menggunakan href=”belajar_list.html”.
Jika file tersebut berada di dalam folder lagi_belajar, maka alamat relatifnya
menjadihref=”lagi_belajar/belajar_list.html”. Namun bagaimana jika halaman tersebut berada
2 tingkat di luar folder saat ini? Kita dapat menggunakan href=”../../belajar_list.html”, untuk
naik 2 folder diatasnya.
4. Format target link, email dan telepon
Format target link
Secara default, setiap link yang kita tulis akan terbuka pada halaman itu juga, jika ingin halaman
tersebut terbuka pada tab lain, tunakan atribut target=”_blank”.
Contoh penggunaan tag link <a> dengan atribut target:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Link </title>
</head>
<body>
<h1>Belajar Tag Link</h1>
<p>Saya sedang belajar html dari <a href="http://www.duniailkom.com"
target=”_blank”>Duniailkom</a> dan akan terbuka pada tab baru</p>
</body>
</html>
47
Link yang tidak Tergarisbawahi
Link dapat ditampilkan teks yang tidak digaris bawahi dengan cara memberi style.
Contoh:
Ketikan <a href=" contoh1.html" target ="_blank" Style="text-decoration:none"> Sampul
Ilmu</a>
Format target link, email dan telepon
Untuk link menuju email hanya memerlukan tag untuk link aktif "mailto". Contohnya yang adalah
prihat, tetapi apabila diklik teks prihat tersebut akan langsung membuka e-mail baru yang ditujukan
kepada nama tersebut misalnya dengan alamat [email protected]
Perintahnya seperti berikut ini :
<a href=mailto: [email protected]>prihat</a>
Format link ke nomor telepon
saat ini akses halaman web via handphone atau perangkat mobile sangat meningkat. Sehingga ada
banyak perubahan pada desain website. Pada kesempatan ini saya ingin membagikan sedikit ilmu
yang mungkin bermanfaat untuk anda dalam membuat desain website untuk mobile yaitu bagaimana
cara membuat link ke nomor telp sehingga kalau link tersebut di klik akan langsung memanggil
nomor telp yang telah kita sediakan pada kode html.
Berikut adalah kode program yang bisa anda gunakan untuk membuat link ke nomor telp atau nomor
handphone:
<p>Jika anda butuh penjelasan silahkan hubungi saya <a href="tel:081366205760">Klik untuk
menelpon Saya!</a></p>
<p><a href="tel://081366205760"><img src="Phone.png" /></a></p>
<p><a href="tel://081366205760">0813 6620 5760</a></p>
Hasilnya adalah sebagai berikut:
Jika anda butuh penjelasan silahkan hubungi saya Klik untuk menelpon Saya!
48
0813 6620 5760
Silahkan anda coba buka halaman ini melalui handphone anda kemudian klik link diatas maka akan
langsung menuju ke menu panggilan di hp anda.
49