29
39 Workshop Multimedia BAB V TEKNOLOGI APLIKASI, FORMAT TEKS, DAN HYPERLINK DALAM DOKUMEN WEB Kompetensi Dasar: Memahami konsep teknologi aplikasi web Menyajikan teks dalam dokumen web Memeriksa link dan navigasi Materi Pokok: Teknologi Aplikasi Web Format teks dalam dokumen web Hyperlink halaman web A. Profesi dalam Pengembangan Aplikasi Web 1. Profesi dalam bidang Teknologi Informasi Saat ini ada banyak profesi di bidang Teknologi Informasi atau TI. Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari tujuan utamanya, yaitu untuk semakin memudahkan manusia dalam melakukan segala aktifitas. Munculnya bi- dang TI yang baru, juga memunculkan profesi di bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing. Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat dikelom- pokan sesuai bidangnya, misalnya: a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak (software), baik mereka yang merancang Sistem Operasi, Database, maupun Sistem Aplikasi. Dalam lingkup kelompok ini, terdapat pekerjaan-pekerjaan seperti: Sistem analis, merupakan orang yang bertugas menganalisis sistem yang akan diimplementasikan, mulai dari menganalisis syistem yang ada, kelebihan dan ke- kurangannya, sampai studi kelayakan dan desain sistem yang akan dikembang- kan.

Workshop Multimedia - elektro.um.ac.id

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Workshop Multimedia - elektro.um.ac.id

39

Workshop Multimedia

BAB V

TEKNOLOGI APLIKASI, FORMAT TEKS, DAN HYPERLINK DALAM DOKUMEN WEB

Kompetensi Dasar:

Memahami konsep teknologi aplikasi web

Menyajikan teks dalam dokumen web

Memeriksa link dan navigasi

Materi Pokok:

Teknologi Aplikasi Web

Format teks dalam dokumen web

Hyperlink halaman web

A. Profesi dalam Pengembangan Aplikasi Web

1. Profesi dalam bidang Teknologi Informasi

Saat ini ada banyak profesi di bidang Teknologi Informasi atau TI. Perkembangan

dunia TI telah melahirkan bidang baru yang tidak terlepas dari tujuan utamanya, yaitu

untuk semakin memudahkan manusia dalam melakukan segala aktifitas. Munculnya bi-

dang TI yang baru, juga memunculkan profesi di bidang TI yang semakin menjurus sesuai

dengan keahlian masing-masing.

Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat dikelom-

pokan sesuai bidangnya, misalnya:

a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak (software),

baik mereka yang merancang Sistem Operasi, Database, maupun Sistem Aplikasi.

Dalam lingkup kelompok ini, terdapat pekerjaan-pekerjaan seperti:

Sistem analis, merupakan orang yang bertugas menganalisis sistem yang akan

diimplementasikan, mulai dari menganalisis syistem yang ada, kelebihan dan ke-

kurangannya, sampai studi kelayakan dan desain sistem yang akan dikembang-

kan.

Page 2: Workshop Multimedia - elektro.um.ac.id

40

Workshop Multimedia

Programer, merupakan orang yang bertugas mengimplementasikan rancangan

sistem analis, yaitu membuat program (baik Aplikasi maupun Sistem Operasi),

sesuai dengan sistem yang dianalisis sebelumnya.

Web designer, merupakan orang yang melakukan kegiatan perencanaan, terma-

suk studi kelayakan, analisis, dan desain terhadap suatu proyek pembuatan apli-

kasi berbasis web.

Web programmer, merupakan orang yang bertugas mengimplementasikan ran-

cangan web designer, yaitu membuat program berbasis web sesuai dengan desain

yang telah dirancang sebelumnya.

b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras (hardware).

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti:

Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung

dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat

sistem komputer.

Networking engineer, adalah orang yang berkecimpung dalam bidang teknis ja-

ringan komputer, mulai dari maintenance sampai dengan troubleshooting.

c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional system in-

formasi.

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti:

EDP Operator, adalah orang yang bertugas mengoperasikan program-program

yang berhubungan dengan electronic data processing dalam lingkungan sebuah

perusahaan atau organisasi.

System Administrator, merupakan orang yang bertugas melakukan administrasi

terhadap sistem, memiliki kewenangan menggunakan hak akses terhadap sistem,

serta hal-hal lain yang berhubungan dengan pengaturan operasional sebuah

sistem.

2. Profesi dalam pengembangan Aplikasi Web

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi. Berikut ini

adalah profesi-profesi yang langsung terkait dalam pengembangan Aplikasi Web, dianta-

ranya:

Page 3: Workshop Multimedia - elektro.um.ac.id

41

Workshop Multimedia

a. Web Designer

Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan

tampilan sebuah website. Tugasnya adalah mendesain tampilan situs (web) mulai dari

pengolahan gambar, tata letak, warna, dan semua aspek visual situs. Fokus utama

mereka adalah tampilan/layout dari web. Mereka lebih konsen dengan bagaimana

halaman terlihat dan apakah berfungsi sempurna ketika sudah diberikan bahasa

pemrograman. Di dalam ‘pendandanan’ suatu situs, seorang Web Designer harus

menguasai : HTML, DHTML, Pengolah Gambar, Animasi dan Movie (Film).

b. Web Programmer

Web Programmer bertugas melakukan peng-coding-an atau pemograman pada se-

buah website agar dapat dikelola dengan mudah oleh web admin. Penguasaan yang

biasanya harus dikuasai oleh seorang Web Programmer, antara lain yaitu: CGI Perl,

PHP, MySQL (Unix base), ASP (NT base), Java Script, dan Applet.

c. Web Administrator

Tugasnya adalah untuk me-maintenance suatu server, mengerti Sistem Operasi Server,

baik mulai dari instalasi sampai dengan troubleshooting. Biasanya seorang Web

Administrator harus menguasai: OS Unix (LInux, FreeBSD, dan sejenisnya), OS NT,

Jaringan (LAN, WAN, Intranet), dan Keamanan Server.

d. Web Master

Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari

disain, program dan keamanan server namun tidak terlalu turut mencampuri ke ma-

sing-masing divisi, cukup dengan mempertanggung jawabkan atas jalannya suatu situs

(web). Penguasaan yang harus dimiliki: HTML, DHTML, CGI Perl, PHP, MySQL, ASP,

Java, Penguasaan bermacam OS (Operating System), Keamanan Server, Jaringan (LAN,

WAN, Intranet).

e. Web Developer

Dalam satu team, kegiatan di atas secara keseluruhan dinamakan Web Developer. Web

developer memberi bantuan, seperti: konsultasi web, konsep web yang akan di buat,

serta membangun sebuat website.

Page 4: Workshop Multimedia - elektro.um.ac.id

42

Workshop Multimedia

B. Sejarah Web

World Wide Web, biasanya disingkat dengan WWW, adalah suatu ruang informasi

yang dipakai oleh pengenal global yang disebut URL (Uniform Resource Locator) untuk

mengenal secara pasti sebuah sumber daya. WWW sering dianggap sama dengan Internet

secara keseluruhan, walaupun sebenarnya ia hanyalah bagian dari Internet. WWW meru-

pakan kumpulan web server seluruh dunia yang mempunyai kegunaan untuk menyediakan

data dan informasi untuk dapat digunakan bersama. WWW adalah bagian yang paling

menarik dari Internet. Melalui web, pengguna dapat mengakses informasi-informasi, yang

tidak hanya berupa teks, tetapi berupa gambar, suara, video, dan animasi.

Sebenarnya WWW merupakan kumpulan dokumen yang tersimpan di dalam pela-

den web, yang tersebar di lima benua (termasuk Indonesia) yang terhubung menjadi satu

melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau dibuat dengan

format HTML (Hypertext Markup Language). Suatu halaman dokumen informasi dapat

terdiri dari teks yang saling terkait dengan teks lainnya, atau bahkan dengan dokumen lain.

Keterkaitan halaman lewat teks ini disebut pranala. Dokumen infomasi ini tidak hanya

terdiri dari teks tetapi dapat juga berupa gambar, mengandung suara, bahkan klip video.

Kaitan antar-dokumen yang seperti itu biasa disebut hipermedia. Jadi dapat disimpulkan

bahwa WWW adalah sekelompok dokumen multimedia yang saling bertautan dengan

menggunakan tautan hiperteks. Dengan mengeklik pranala (hyperlink), maka para peng-

guna bisa berpindah dari satu dokumen ke dokumen lainnya.

WWW adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun

1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip ri-

setnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu

adalah program piranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee

berhasil menciptakan jaringan yang menautkan berbagai arsip, sehingga memudahkan

pencarian informasi yang dibutuhkan. Inilah yang kelak menjadi dasar dari sebuah per-

kembangan pesat yang dikenal sebagai WWW.

WWW dikembangkan pertama kali di Pusat Penelitian Fisika Partikel Eropa (CERN:

Organisation Europeanne pour la Recherche Nucleaire), Genewa, Swiss. Pada tahun 1989

Berners-lee membuat pengajuan untuk proyek pembuatan hiperteks global. Pada bulan

Page 5: Workshop Multimedia - elektro.um.ac.id

43

Workshop Multimedia

Oktober 1990, World Wide Web sudah dapat dijalankan dalam lingkungan CERN. Pada

musim panas tahun 1991, WWW secara resmi digunakan secara luas pada jaringan Inter-

net.

C. Alur dan Perangkat Pengembangan Aplikasi Web

Berdasarkan persepsi dari bebagai pengembang perangkat lunak dan ahli dalam

bidang rekayasa perangkat lunak (software engineering professional), pengembangan Apli-

kasi Web tidaklah sama dengan rekayasa perangkat lunak, walaupun keduanya melibatkan

pemrograman dan pengembangan perangkat lunak. Walaupun banyak mengadopsi

prinsip-prinsip rekayasa perangkat lunak, pengembangan Aplikasi Web memiliki banyak

pendekatan, metoda, alat bantu, teknik dan panduan yang memenuhi persyaratan pem-

buatan sistem berbasis web. Pengembangan sistem berbasis web berbeda dengan pe-

ngembangan perangkat lunak konvensional, dimana pengembangan sistem berbasis web

lebih banyak menghadapi tantangan. Alternatif model dari pengembangan Aplikasi Web

adalah sebagai berikut:

1. Formulasi (formulation)

Kegiatan ini berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi berbasis

web, serta menentukan batasan sistem. Tujuan yang ingin dicapai bisa dibedakan menjadi

dua kategori, yaitu:

Tujuan yang bersifat informatif

Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, audio, dan

video.

Tujuan yang bersifat fungsional

Merumuskan suatu fungsi yang dibutuhkan oleh pengguna, misal: dengan mengguna-

kan aplikasi tertentu seorang guru dapat memperoleh nilai akhir, statistik nilai ujian,

tugas, kuis, yang ia input ke dalam aplikasi tersebut.

Page 6: Workshop Multimedia - elektro.um.ac.id

44

Workshop Multimedia

2. Perencanaan (planning)

Kegiatan ini dimaksudkan untuk menghitung estimasi biaya proyek pembuatan

aplikasi berbasis web, estimasi jumlah pengembang, estimasi waktu pengembangan, eva-

luasi resiko pengembangan proyek, dan mendefinisikan jadwal pengembangan untuk versi

selanjutnya (jika diperlukan).

3. Analisis (analysis)

Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi

informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang digunakan pada

rekayasa web dilakukan dari empat sisi, yaitu:

a. Analisis isi informasi, mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis

web. Isi informasi dapat berupa teks, grafik, audio, maupun video.

b. Analisis interaksi, yakni analisis yang menunjukkan hubungan antara web dengan

pengguna.

c. Analisis fungsional, yakni analisis tentang proses bagaimana aplikasi berbasis web ini

dapat menampilkan informasi kepada pengguna.

d. Analisis konfigurasi, yakni konfigurasi yang digunakan pada aplikasi berbasis web,

internet, intranet, atau extranet. Selain itu, analisis ini juga meliputi relasi database

dengan web jika diperlukan.

4. Rekayasa (engineering)

Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi dan

desain arsitektur web. Pada saat tahap desain, ada beberapa hal yang perlu dilakukan:

a. Pembuatan Diagram Wireframe (Gambar Rangka), tujuannya adalah untuk menunjukkan

bagaimana lay out halaman web, dan menunjukkan di mana fungsi serta konten seperti:

navigasi, kotak pencarian, elemen bentuk, dan sebagainya, tanpa desain grafis. Berikut

ini contohnya:

Page 7: Workshop Multimedia - elektro.um.ac.id

45

Workshop Multimedia

Gambar 5.1 Diagram Wireframe Sebuah Halaman Web

b. Diagram Situs, yakni diagram yang menunjukkan struktur situs secara keseluruhan dan

bagaimana halaman individual tersebut berhubungan satu dengan yang lain. Gambar

8.2 menunjukkan diagram situs sederhana.

Page 8: Workshop Multimedia - elektro.um.ac.id

46

Workshop Multimedia

Gambar 5 2 Diagram Situs

c. Storyboard dan diagram alir pengguna, bertujuan untuk menunjukkan langkah-langkah

yang diperlukan dalam menyelesaikan tugas-tugas, opsi yang mungkin, dan juga mem-

perkenalkan beberapa standar jenis halaman.

5. Implementasi (page generation) dan pengujian (testing)

Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web site.

Teknologi yang digunakan tergantung pada kebutuhan yang telah dirumuskan dalam ta-

hap analisis. Dalam tahap pengembangan ini, antara lain meliputi kegiatan:

a. Authoring, adalah istilah yang digunakan untuk mempersiapkan konten yang akan di-

unggah di web, atau menandai konten dengan tag HTML yang menggambarkan isi dan

fungsinya.

b. Styling, meliputi kegiatan: development web, serta penampilan halaman dalam brow-

ser yang dikendalikan oleh aturan style yang ditulis dalam CSS (Cascading Style Sheets).

c. Scripting dan pemrograman, dilakukan dengan menggunakan bahasa pemrograman

web, diantaranya: PHP, Ruby, Python, dan ASP.NET, yang berjalan pada server, serta

mengolah data dan informasi sebelum dikirim ke browser pengguna.

Page 9: Workshop Multimedia - elektro.um.ac.id

47

Workshop Multimedia

Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian meliputi

beberapa parameter yang akan menentukan standar aplikasi berbasis web yang telah

dibuat. Tahap pengujian adalah proses menguji aplikasi berbasis web yang telah selesai

dibuat. Hal ini bertujuan untuk menemukan kesalahan dan kemudian memperbaikinya.

Pengembang aplikasi berbasis web mendapat tantangan besar dalam melakukan peng-

ujian, karena aplikasi ini beroperasi pada jaringan komputer dengan berbagai macam

pengguna, berbagai macam Sistem Operasi, perangkat keras, browser, protokol komuni-

kasi, dan lain sebagainya.

6. Aplikasi Internet

Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka

diperlukan beberapa aplikasi untuk membuka halaman web, yang biasa disebut browser.

Berikut ini beberapa aplikasi browser yang cukup populer, antara lain yaitu: Internet

Explorer, Chrome, Firefox, Safari, dan Opera.

D. Dasar-dasar HTML

HTTP (HyperText Transfer Protocol) merupakan protokol yang digunakan untuk

mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-

dokumen web yang ditulis dalam format HTML (HyperText Markup Language). Dikatakan

‘markup language’ karena HTML berfungsi untuk ‘memperindah’ file teks biasa agar dapat

ditampilkan dalam web browser. Hal ini dilakukan dengan menambahkan elemen, yang

sering disebut ‘tag’ pada file teks tersebut.

Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak

didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia dalam HTML5, antara lain

adalah:

Canvas. Memungkinkan pembuatan gambar dalam kanvas, sehingga gambar ti-

dak lagi diambil dari gambar utuh, melainkan bisa disusun sendiri, seperti meng

gunakan program Paint.

Header. Berguna untuk membuat suatu judul, yang bisa diisi dengan elemen logo

dan nama perusahaan/instansi.

Page 10: Workshop Multimedia - elektro.um.ac.id

48

Workshop Multimedia

Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini ber-

guna untuk menaruh informasi di bagian bawah halaman web.

Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.

Audio. Memungkinkan penyajian player untuk memutar suara.

Video. Memungkinkan penyajian player untuk memainkan film.

1. Struktur Dasar HTML

Dalam penggunaannya, sebagian besar kode HTML harus terletak diantara tag kon-

tainer, yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda

"/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html> <head> <title>Judul Form/Caption</title> </head> <body> ISI WEB </body> </html>

Keterangan:

Nm bm j <html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua

tag tersebut adalah file HTML.

<head> ..

</head>

Sebagai informasi page header. Di dalam tag ini kita bisa

meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT,

STYLE & META.

<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang ter-

letak di dalam tag ini akan muncul pada bagian paling

atas browser (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak di-

tampilkan sebagai isi halaman web. Di dalam tag ini bisa

diletakkan berbagai page attribute, antara lain seperti:

bgcolor, background, text, link, vlink, alink, leftmargin,

dan topmargin.

Page 11: Workshop Multimedia - elektro.um.ac.id

49

Workshop Multimedia

2. Persiapan Kebutuhan

Meskipun dokumen HTML dapat ditampilkan tanpa menggunakan web server, na-

mun di sini diwajibkan untuk tetap menggunakannya. Berikut ini adalah kebutuhan-

kebutuhan yang diperlukan:

a. XAMPP/WampServer

Paket web server: Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini

dikarenakan praktis, sehingga tinggal memfokuskan pada pemrograman.

b. Web Browser

Sangat disarankan menggunakan browser utama: Mozilla Firefox. Adapun untuk pem-

banding, sebaiknya juga memanfaatkan browser lain.

c. Editor Teks

Editor teks digunakan untuk menuliskan kode-kode HTML pembentuk halaman aplikasi

web.

3. Membuat Dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari dua bagian, yaitu: header

dan body. Di mana header mendefinisikan informasi mengenai dokumen, sedangkan body

mendefinisikan tubuh atau isi dokumen. Langkah-langkah pembuatan dokumen HTML

diperlihatkan sebagai berikut:

1) Buka editor teks.

2) Ketikkan teks (kode-kode HTML) berikut:

Page 12: Workshop Multimedia - elektro.um.ac.id

50

Workshop Multimedia

3) Simpan dokumen HTML, dan letakkan di lokasi direktori web. Perhatikan, www

dan htdocs merupakan direktori web, dan sebaiknya dibuat sub direktori di da-

lamnya.

Gambar 5.3 Judul Dokumen dan Teks di Body

4. Publikasi Dokumen HTML

Untuk menguji aplikasi web, kita dapat mempublikasikannya ke web server, baik

secara lokal maupun Internet. Lingkungan lokal, tentu merupakan pilihan yang efisien,

khususnya ketika aplikasi tersebut masih dalam tahap pengembangan. Langkah yang di-

perlukan untuk publikasi ini sangat sederhana.

1) Pastikan bahwa file dokumen sudah diletakkan di dalam direktori web, misalnya untuk

WampServer lokasi default-nya adalah www. Untuk paket web server lainnya,

termasuk Apache (versi tunggal) adalah htdocs.

2) Pastikan bahwa web server sudah dijalankan.

3) Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.

Perhatikan contoh, seperti Gambar 9.2.

Page 13: Workshop Multimedia - elektro.um.ac.id

51

Workshop Multimedia

Gambar 5.4 Tampilan Isi Teks dalam Web Browser

5. Format Teks

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformat-

an teks.

Heading

Heading merupakan salah satu elemen penting dalam dokumen HTML. Heading dide-

finisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe

dengan nilai 1-6.

Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini.

Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam

implementasinya harus dideklarasikan secara lengkap.

Page 14: Workshop Multimedia - elektro.um.ac.id

52

Workshop Multimedia

Gambar 5.5 Tampilan Struktur Heading dalam Web Browser

Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi

teks.

Page 15: Workshop Multimedia - elektro.um.ac.id

53

Workshop Multimedia

Gambar 5.6 Atribut Align untuk Mengatur Posisi Teks pada Web Browser

Paragraf

Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan para-

graf. Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p> sebe-

narnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan.

Page 16: Workshop Multimedia - elektro.um.ac.id

54

Workshop Multimedia

Gambar 5.7 Tampilan Paragraf dalam Web Browser

Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan

atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata te-

ngah, kiri kanan, dan kanan.

Page 17: Workshop Multimedia - elektro.um.ac.id

55

Workshop Multimedia

Gambar 5.8 Tampilan Paragraf Rata Kiri, Tengah, dan Kanan dalam Web Browser

Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita

hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya,

gunakan tag line break <br />.

Page 18: Workshop Multimedia - elektro.um.ac.id

56

Workshop Multimedia

Gambar 5.9 Tampilan Baris Baru dalam Web Browser

Fontase

HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font,

seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi. Sebagai tam-

bahan, di sini juga akan dijelaskan mengenai cara mencetak tag. Seperti diketahui, tag

<p> di dokumen secara otomatis akan diterjemahkan sebagai paragraf. Adapun untuk

Page 19: Workshop Multimedia - elektro.um.ac.id

57

Workshop Multimedia

mencetak karakter <p> di layar, kita perlu menggunakan nama entitas. Sebagai contoh,

karakter < dinyatakan dengan nama entitas &lt; dan karakter > dinyatakan dengan &gt;.

Gambar 5.10 Tampilan Fontase dalam Web Browser

Selain itu terdapat juga beberapa tag baru di HTML 5 yang mengatur fontase teks seperti

yang ditunjukkan dalam Tabel 5.1

Page 20: Workshop Multimedia - elektro.um.ac.id

58

Workshop Multimedia

Tabel 5.1 Beberapa Tag Baru dalam HTML 5

Tag HTML Keterangan

<sub> Mendefinisikan teks di bawah garis

<sup> Mendefinisikan teks di atas garis

<ins> Mendefinisikan teks sisipan

<del> Mendefinisikan teks dicoret

<mark> Mendefinisikan teks ditandai

Gambar 5.11 Tampilan Tag Baru dalam HTML 5 pada Web Browser

Terdapat tag-tag yang menangani penulisan khusus pada teks. Tag-tag ini memudahkan

dalam membuat struktur dan format teks di HTML.

Tag <abbr>

Tag <abbr> ditujukan untuk teks yang berbentuk singkatan seperti ”NASA”, ”HTML”,

atau ”HTTP”. Penggunaan tag ini biasanya juga menyertakan atribut title. Atribut title

berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag <abbr> .

Contoh penulisan :

Hasilnya :

Page 21: Workshop Multimedia - elektro.um.ac.id

59

Workshop Multimedia

Gambar 5.12 Contoh Tampilan Tag <abbr> dalam Web Browser

Tag <cite>

Tag <cite> adalah tag yang digunakan untuk referensi. Di dalam membuat konten web,

biasanya referensi ini bisa berupa buku atau alamat dari web lain. Web browser pada

umumnya akan menampilkan tag <cite> dengan garis miring atau Italic.

Contoh penulisan:

Hasil :

Page 22: Workshop Multimedia - elektro.um.ac.id

60

Workshop Multimedia

Gambar 5.13 Contoh Tampilan Tag <cite> dalam Web Browser

Selain dua tag tersebut, masih terdapat tag lainnya. Tag-tag HTML lainnya ditunjuk-

kan pada tabel berikut:

Tabel 5.2 Tag-tag Lain dalam HTML

Tag HTML Keterangan

<address> Mendefinisikan alamat atau kontak informasi

<bdo> Mendefinisikan arah teks

<blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber lain

<q> Mendefinisikan sebuah kutipan pendek

<dfn> Mendefinisikan sebuah istilah definisi

<code> Mendefinisikan teks kode komputer

<kbd> Mendefinisikan teks keyboard

<samp> Mendefinisikan teks contoh kode

<var> Mendefinisikan teks variabel

<pre> Mendefinisikan teks terformat

Karakter Khusus

Dalam HTML, kita juga bisa menampilkan karakter-karakter khusus dengan memanfa-

atkan nama entitas. Tabel 9.3 memperlihatkan beberapa jenis karakter khusus yang

dapat digunakan beserta nama entitasnya.

Page 23: Workshop Multimedia - elektro.um.ac.id

61

Workshop Multimedia

Tabel 5.3 Beberapa Jenis Karakter Khusus Beserta Entitasnya

Karakter Deskripsi Nama Entitas

¢ Cent &cent;

£ Pound &pound;

¥ Yen &yen;

€ Euro &euro;

© Copyright &copy;

® Registered &reg;

™ Trademark &trade;

Gambar 5.14 Contoh Tampilan Karakter Khusus dalam Web Browser

Page 24: Workshop Multimedia - elektro.um.ac.id

62

Workshop Multimedia

E. Anatomi Hyperlink

Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling

terkait dengan dokumen lain. Link (sebutan singkat dari hyperlink text) adalah suatu

metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang

terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir bisa

dipastikan memiliki link. Secara umum, fungsi link adalah untuk memudahkan

pengunjung web dalam menelusuri/menjelajahi seluruh isi atau informasi yang ter-

simpan dalam situs web tersebut.

Dalam keadaan normal (default), suatu link ditandai dengan teks berwarna biru

yang memiliki garis bawah. Meskipun demikian, warna dan gaya link dapat disesuaikan

dengan kebutuhan dan keinginan melalui pembuatan kode CSS. Jika kursor diarahkan

ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan

dengan satu jari yang sedang menunjuk, seperti yang ditunjukkan pada gambar di

bawah ini.

Contoh link.

Gambar 5.15 Pointer Link

Konsep atau cara kerja link dalam HTML dapat diilustrasikan seperti Gambar

5.16.

Gambar 5.16 Link dalam HTML

Page 25: Workshop Multimedia - elektro.um.ac.id

63

Workshop Multimedia

Pada gambar di atas, masing-masing halaman memiliki keterkaitan satu sama

lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau ditampilkan dari

halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas memiliki link.

Mengenal Tag <a> (anchor)

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>,

yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan

sebagai link. Bentuk umum pembuat link dalam dokumen HTML adalah sebagai berikut

Atribut href dalam tag <a> berfungsi untuk menentukan dokumen atau ha-

laman mana yang akan dipanggil saat link tersebut di klik atau dipilih oleh pengunjung

web.

Contoh:

Pada contoh di atas terdapat tiga buah link, dengan teks: Home, Tentang Kami,

dan Kontak. Ketika pengunjung melakukan klik terhadap link pertama (Home), web

browser akan menampilkan dokumen yang disimpan dalam file index.html. Begitu

juga dengan link kedua (Tentang Kami), dan ketiga (Kontak), setiap di klik akan men-

jadikan web browser menampilkan dokumen yang terdapat pada file about.html dan

contact.html.

Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama

dokumen web, agar link dapat berfungsi dengan baik:

Penamaan file, semuanya dengan huruf kecil.

Jangan ada spasi, serta hindari karakter non-alphabet.

<a href="DokumenLain">Teks

Link</a>

<a href=”index.html”>Home</a><br />

<a href=”about.html”>Tentang Kami</a><br />

<a href=”contact.html”>Kontak</a>

Page 26: Workshop Multimedia - elektro.um.ac.id

64

Workshop Multimedia

F. Jenis-jenis Link dalam HTML

HTML membedakan ketiga jenis link di atas berdasarkan lokasi atau alamat do-

kumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai

atribut href-nya saja. Dalam HTML, link dibedakan menjadi 3 (tiga) jenis, yaitu:

1. Link absolut

Link Absolut adalah link yang menunjuk ke halaman situs web lain. Penulisan

alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs

web yang dibuat adalah pemrograman HTML, maka dapat dibuat link ke situs web lain

yang memiliki tema yang sama atau relevan. Tujuannya adalah agar pengunjung bisa

memperoleh informasi lebih, tentang tema tersebut yang ‘mungkin’ tidak/belum

dibahas dalam situs web.

Contoh : <a href=http://www.w3.org/>W3</a>

Pada contoh di atas, tujuan link yang dibuat akan mengarah ke situs web

http://www.w3.org/

2. Link relatif

Link relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain

yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penu-

lisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumen-

nya saja, dan nama direktorinya (jika ada).

Perhatikan contoh kode berikut:

Tidak perlu ditulis lengkap seperti berikut:

<a href=”kontak.html”>Kontak</a>

<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler

Sahara</a>

<a href=http://www.situskita.com/kontak.html>Kontak</a>

<a href=http://www.situskita.com/images/jeep/sahara.jpg> Lihat

Foto Jeep Wrangler Sahara</a>

Page 27: Workshop Multimedia - elektro.um.ac.id

65

Workshop Multimedia

3. Link ke bagian dokumen tertentu

Menjadikan gambar sebagai link

Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya se-

benarnya sama saja dengan link berupa teks, perbedaannya hanya perlu meng-

ganti teks yang dijadikan sebagai link dengan tag <img>.

Link yang berupa teks:

Link yang berupa gambar:

G. Link ke Bagian Dokumen Tertentu

Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu

yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya dimiliki

oleh halaman web yang memiliki informasi panjang atau pada dokumen yang memiliki

daftar isi di bagian atasnya. Tujuannya adalah agar pengunjung tidak perlu melakukan

scrolling pada halaman tersebut, untuk menuju/kembali ke dalam dokumen yang

bersangkutan.

Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:

Link ke suatu elemen, dapat menggunakan tanda ”#” di dalam atribut link. Tanda “#”

harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh:

<a href=”dokumenlain”>teks link</a>

<a href=”dokumenlain”><img src=”NamaFileGambar” /></a>

<h1 id="heading1">heading 1</h1>

<a href="#heading1"> Menuju ke heading 1</a>

Page 28: Workshop Multimedia - elektro.um.ac.id

66

Workshop Multimedia

Berikut ini contoh bila ada beberapa link internal

Link ke bagian dokumen tertentu, dapat dibedakan lagi menjadi 2 (dua) jenis, yaitu:

a. Link ke bagian tertentu dalam dokumen yang sama

Untuk membuat link semacam ini, terlebih dahulu perlu adanya id atau nama

pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. Pemberian id

tersebut, dilakukan dengan cara menuliskan kode berikut:

Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang

telah dinamai tersebut, dilakukan dengan menuliskan kode seperti berikut :

Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan berupa file.

b. Link ke bagian tertentu dalam dokumen lain

Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke

sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link se-

macam ini, bagian tertentu dalam dokumen lain tersebut harus ditandai dengan pem-

berian id seperti pada sub-bab sebelumnya. Perbedaan hanya terletak pada penulisan

<html>

<head> </head>

<body>

<a href="#heading1">Link ke heading 1</a>

<a href="#heading2">Link ke heading 2</a>

<h1 id="heading1">heading 1</h1>

<h1 id="heading2">heading 2</h1>

</body>

</html>

<a id=”tujuanLink”>Teks atau gambar</a>

<a href=”#Tujuanlink”>Teks atau gambar</a>

Page 29: Workshop Multimedia - elektro.um.ac.id

67

Workshop Multimedia

tujuan link-nya saja. Pada kasus seperti ini, perlu ditambahkan id pada bagian tujuan

link, seperti berikut:

Sajian Sumber Belajar ini disusun untuk kepentingan belajar, yang dirujuk/disa-lin/disarikan/diadaptasi dari:

Purnomo, Damayanti. 2013. Pemrograman Web untuk SMK/MAK Kelas X Semester 1. Jakarta: Kemendibud.

Duckett, J. 2004. Beginning Web Programming with HTML, XHTML, and CSS. Danvers: Wiley Publishing,

Tutorial Text HTML Part 12: Tag abbr, cite, dfn, dan small untuk Struktur Text HTML. (Online), (http://www.duniailkom.com/ tutorial-text-html-tag-abbr-cite-dfn-dan-small-untuk-struktur-text-html/), diakses 23 Maret 2017.

<a href=”namafile#idBagian”>Teks atau gambar</a>