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 &lt;p&gt;&lt;/p&gt; merupakan default atau bentuk baku tag

&lt;p&gt;&lt;/p&gt; dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi

atribut <i>align</i> pada tag &lt;p&gt; 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>&nbsp;</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 prihatms@gmail.com

Perintahnya seperti berikut ini :

<a href=mailto: prihatms@gmail.com>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