HANDOUT

Pemrograman Web
Kelas : XI RPL

KOMPETENSI DASAR

3.1 Memahami konsep teknologi aplikasi web

4.1 Mempresentasikan pelbagai teknologi pengembangan aplikasi web

INDIKATOR PENCAPAIAN KOMPETENSI

3.1.1 Menjelaskan konsep teknologi aplikasi web.

3.1.2 Menjelaskan berbagai teknologi aplikasi web.
3.1.3 Menjelaskan penggunaan aplikasi berbasis web.
3.1.4 Membedahkan Aplikasi Web Server dan Client
3.1.5 Menerapkan penggunaan web direktori dalam web server.
4.1.1 Mempresentasikan berbagai teknologi web.
4.1.2 Mengistalasi paket aplikasi web server.
4.1.3 Menguji hasil instalasi web server
4.1.4 Menginstalasi aplikasi editor text.
4.1.5 Menjalankan aplikasi web dengan dengan browser.

MATERI POKOK

 Teknologi aplikasi web

 Macam-macam browser
 Konsep Web server
 Macam-macam software webserver.
 Macam-macam editor teks.
 Tool pengembang web

Konsep WWW (World Wide Web)

1. Apa itu WWW?
World Wide Web adalah suatu ruang informasi di internet yang digunakan oleh pengenal global
yang disebut dengan Pengidentifikasi Sumber Ragam/ URI untuk mengenali sumber daya
berguna. World Wide Web berisi kumpulan peladen web dari berbagai seluruh bagian dunia
untuk menyediakan informasi dan data yang bisa digunakan bersama.

World Wide Web sebagai bagian dari internet mengandung informasi-informasi seperti suara,
video, gambar, dan video. Singkatnya, WWW adalah sistem untuk mengirimkan dan
menyebarkan data melalui jaringan internet pada skala yang besar di seluruh penjuru dunia.
Menurut masyarakat awam, WWW adalah keseluruhan dari internet itu sendiri untuk mencari
apapun di mesin pencari Google, kenyatannya WWW hanya sebagian saja. Dalam artikel ini
akan dibahas apa pengertian WWW, fungsi, manfaat, sejarah, contoh, serta kelebihan WWW.
Artikel terkait:

2. Pengertian WWW Menurut Para Ahli

Agar lebih mengerti apa arti WWW, maka kita bisa merujuk pada pendapat beberapa ahli
tentang definisi WWW. Berikut ini adalah pengertian World Wide Web menurut para ahli:
a. MCLeod (Pearson)
Pengertian Www menurut MCLeod adalah informasi yang dapat diakses melalui internet
di mana berbagai dokumen hypermedia/ file-file komputer disimpan dan kemudian
diambil dengan cara-cara yang menggunakan metode penentuan alamat yang unik.
b. V. Djong
Definisi WWW menurut V. Djong adalah fasilitas di internet untuk layanan website yang
menggunakan protocol http, sering kita lihat sebuah nama domain ditulis secara lengkap,
misalnya www.freddset.my.id
c. Akbar Kaelola
Pengertian WWW menurut Akbar Kaelola adalah media bagi manusia dalam kegiatan
berbagi dokumen, gambar, film, musik dan informasi, serta menjual barang dan jasa di
internet.
d. Lisa Kuswayatno
Pengertian WWW / World Wide Web menurut Lisa Kuswayatno adalah suatu layanan
internet dengan menggunakan konsep hypertext antar dokumen yang saling berkaitan.
e. Yuhefizar
Definisi WWW menurut Yuhefizar adalah metode untuk menampilkan informasi di
internet yang dapat diakses melalui sebuah paladen/ browser.
f. F. Budi Hardiman
Menurut F. Budi Hardiman, pengertian World Wide Web adalah fasilitas internet yang
menghubungkan dokumen dalam lingkup lokal maupun jarak jauh.

3. Fungsi WWW dan Manfaat World Wide Web

Sesuai dari pengertian WWW diatas, maka WWW ini berfungsi untuk menyediakan data dan
informasi apapun dan dari manapun agar dapat diakses orang lain dari seluruh bagian dunia.
Dengan adanya WWW di internet dapat memberikan kemudahan dan kecanggihan pengguna
internet secara lebih cepat dan mudah.
WWW memungkinkan pengguna untuk berselancar dengan mudah hanya melalui sebuah alamat
URL (baca: pengertian URL) atau link. Untuk mengakses WWW perlu menggunakan koneksi
internet.
Secara umum, ada empat layanan dan manfaat World Wide Web, diantaranya adalah:
 a. Web Mail Service; Web mail service digunakan untuk mengirimkan surat elektronik
kepada orang lain. Layanan ini bisa didapatkan secara gratis maupun berbayar. Layanan
email gratis misalnya dari Gmail.com, Yahoo.com, dan hotmail.com. Sedangkan email
berbayar ini biasanya untuk keperluan perusahaan dengan menggunakan domain sendiri.
b. Search Engine; Search engine atau mesin pencari merupakan layanan gratis untuk
mencari informasi berdasarkan kata kunci tertentu. Search engine yang cukup populer
saat ini adalah Google, dan Bing.
c. Web Hosting; Ini adalah tempat untuk menyimpan data base sebuah website. Sebuah
website hanya bisa diakses jika domain website tersebut terhubung dengan web hosting
tempat menyimpan data base (baca: pengertian database).
d. Portal; Portal merupakan sebuah layanan di internet dimana terdapat beberapa layanan
sekaligus, misalnya email, news, chatting, tanya jawab. Salah satu portal yang cukup
populer adalah Yahoo.com.

4. Contoh WWW / World Wide Web

Tentunya para pengguna internet sudah tidak asing lagi dengan istilah World Wide Web.
Sebagian besar website yang ada di internet menggunakan WWW pada awal nama domainnya.
Berikut ini adalah beberapa contoh WWW:
 http://www.freddset.my.id
 http://www.google.com
 http://www.wordpress.com
 http://www.youtube.com
 http://www.facebook.com
 http://www.instagram.com
 dan lain lain
5. Sejarah WWW dan Perkembangannya
Istilah WWW pertamakali ditemukan oleh Tim Berners-Lee, pada tahun 1991. Pada
perkembangannya, World Wide Web telah melewati sejarah yang cukup panjang hingga saat ini.
Berikut penjelasannya:
 Tahun 1989; Tim Berners Lee pertamakali mengungkapkan idenya membuat sebuah
protokol di internet yang berfungsi sebagai sistem distribusi informasi.
 Tahun 1990: Tim Berners Lee menemukan tiga teknologi dasar yang menjadi basis
website, yaitu HTML (Hypertext Markup Language), URL (Uniform Resource
Identifier), dan HTTP (Hypertext Transfer Protocol).
 Tahun 1991: Tim Berners Lee menemukan World Wide Web (WWW) yang berawal dari
kebutuhan untuk menyusun arsip dari riset-riset miliknya.
 Tahun 1993: Marc Andersen dan timnya dari NCSA menciptakan web browser yang
diberinama Mosaic dan berbasis grafik untuk OS X-Windows.
 Tahun 1994: Andersen bekerjasama dengan Jim Clark membuat Netscape yang
kemudian menggantikan ketenaran Mosaic sebagai web browser.
 Tahun 1995: Ada sekitar 300.000 website di internet dimana pada tahun sebelumnya
hanya 50 website.
 Tahun 2009: Tim Berners-Lee mendirikan World Wide Web Foundation, dimana
tujuannya adalah untuk membagikan open web kepada masyarakat dunia.

TEKNOLOGI PENGEMBANGAN APLIKASI WEB

Aplikasi web adalah suatu aplikasi yang di akses menggunakan penjelajah web melalui suatu
jaringan seperti internet atau intranet. Ia juga merupakan suatu aplikasi perangkat lunak
komputer yang di kodekan dalam bahasa yang didukung oleh penjelajah web (seperti HTML,
Java Script, AJAX, Java,dll) dan bergantung pada penjelajah penjelajah tersebut untuk
menampilkan aplikasi.

 Profesi dalam pengembangan Aplikasi web.

Profesi dalam pengembangan Aplikasi web Diantaranya :
a. Web Designer
Tugasnya adalah mendesain tampilan situs web mulai dari pengolahan gamar, tata letak,
warna, dan lain sebagainya. Didalam pendadanan suatu situs web seorang Web Designer
harus menguasai :
– HTML, DHTML
– Pengolah Gambar
– Animasi, Movie (Film)
b. Web Programmer
Jika situs yang akan dibuat mempunyai fasilitas interaksi antara pengunjung dan situs
misalnya menyangkut dengan transaksi, input – output data dan database maka seorang Web
Programmer yang akan mengerjakannya dengan membuat aplikasi-aplikasi yang bekerja di
atas situs web.
a. CGI Perl, PHP, MySQL (Unix Base)
b. ASP(Windows NT Base)
c. Javascript dan Applet
c. Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server,
baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang
Web Administrator harus menguasai :
a. OS Unix (Linux, FreeBSD, dll
b. OS Windows NT
c. Jaringan (LAN,WAN, Intranet)
d. Keamanan Server
d. Web Master
Seorang Web Master adalah seorang yan mengerti akan kesemua hal mulai dari design,
Program dan Keamanan Server namun tidak terlalu mencampuri ke masing-masing divisi,
cukup dengan mempertanggungjawabkan atas jalan-nya suatu situs web. Penguasaan yang
harus dimiliki yaitu :
a. HTML, DHTML
b. CGI Perl, PHP, MySQL, ASP, Java
c. Penguasaan bermacam Operating System / Sistem Operasi
d. Keamanan Server / Server Security untuk melindungai dari Hacker
e. Jaringan LAN, WAN, Internet
e. Web Developer
Kegiatan diatas secara keseluruhan dalam suatu team dinamakan Web Developer

 Sejarah dan Cara Kerja Web

 World Wide Web sering disebut Web adalah Suatu media informasi global dimana pengguna
dapat membaca dan menulis melalui komputer yang tersambung ke Internet. Istilah Web
sering secara tidak dasar di anggap sebagai Internet itu sendiri, walaupun sebetulnya Web
merupakan jasa yang beroperasi di atas Internet sama seperti e-mail. Sejarah Internet terjadi
jauh sebelum Web di kembangkan.
Di tahun 1980, seorang Inggris Tim Berners-Lee, kontraktor independent di CERN (Badan
Tenaga Atom Swiss) membuat ENQUIRE, sebuah basis data personal dan model software,
juga berkesempatan untuk bermain dengan konsep hypertext; dimana setiap halaman
informasi baru di ENQUIRE tersambung secara langsung ke halaman yang ada.
Tahun 1984, Tim Berners-Lee kembali ke CERN dan memperesentasikan masalah bahwa
semua fisikawan di dunia butuh untuk melakukan berbagi data, sayangnya tidak ada
perangkat keras dan perangkat lunak yang memungkinkan hal itu terjadi. Atasan Tim, Mike
Sendall, meminta Tim untuk mengimlementasikan ide-nya di mesin workstation NeXT yang
baru saja di terima oleh CERN. Waktu itu ada beberapa nama yang dipikirkan untuk itu,
mulai dari Information Mesh, The Information Mine atau Mine of Information, akhirnya
dipilihkan World Wide Web.
Bulan Desember 1990, Tim Berners-Lee berhasil membuat semua perangkat yang dibutuhkan
agar Web dapat bekerja: Web browser yang pertama WorldWideWeb (yang juga merupakan
Web editor), Web server pertama (info.cern.ch), dan halaman Web yang pertama yang
menjelaskan tentang proyek tersebut. Browser yang di kembangkan dapat mengakses
kelompok diskusi Usenet dan juga akses file FTP. Sayangnya hanya dapat di jalankan di
NeXT. Nicola Pellow kemudian membuat browser text sederhana yang dapat di operasikan di
hampir semua komputer.
May 1991, Paul Kunz dari Stanford Linear Accelerator Center (SLAC) mengunjungi Cern
dan sangat tertarik dengan Web. Paul membawa pulang perangkat lunak NeXT ke SLAC,
dimana pustakawan Louise Addis mengadaptasikannya untuk sistem operasi VM/CMS di
IBM mainframe untuk memperlihatkan katalog dari dokumen online di SLAC; Web ini
merupakan Web Server pertama di luar Eropa dan pertama di Amerika Utara.
Pada tanggal 6 Agustus 1991, Tim Berners-Lee memposting / menulis resume singkat dari
proyek World Wide Web di kelompok diskusi alt.hypertext. Tanggal ini di tandai sebagai
pertama kali Web muncul secara publik di Internet.
a. Mekanisme Cara Kerja Website User :
b. Pengguna yang akan mengakses suatu website berupa URL melalui Web Browser (yaitu
media untuk menuju URL yang diakses),
c. Web Browser tersebut mengirimkan permintaan/ request berupa HTTP Request kepada
Web Browser melalui layer-layer TCP/IP,
d. Web Server memberikan WebFiles yang di-request jika ada.Web Files yang telah
diberikan tadi tidak langsung ditampilkan/di-display begitu saja, namun Web Server
memberikan respon kembali ke Web Browser melalui HTTP Response yang juga melalui
layer-layer TCP/IP, yang kemudian baru di terima oleh Web Browser, dan kemudian
dikirimkan kepada User berupa Display.
 Alur Pengembangan App Web
Dikelompokan Menjadi Beberapa Fase Diantaranya :
a. Fase penentuan feature dan fungsi : Pada tahapan ini berdasarkan hasil penelusuran
kebutuhan dari aplikasi maka saya menentukan feature dan fungsi apa saja yang akan dibuat
untuk memenuhi kebutuhan yang ada. Feature dibagi menjadi feature utama atau bagian
besar terlebih dahulu baru kemudian didefenisikan menjadi bagian yang lebih kecil.
Misalnya pada aplikasi CMS salah satu feature utama adalah blog, kemudian feature blog
didefenisikan seperti feature tagging, category, comment, dsb. Pada tahapan ini yang perlu
 diperhatikan adalah apakah daftar feature dan fungsi yang dibuat telah memenuhi kebutuhan
yang diinginkan.
b. Fase pengumpulan data: Mencari konten, gambar dan file lain yang dibutuhkan dalam
pengembangan aplikasi. Berdasarkan daftar feature dan fungsi yang akan dikembangkan
maka saya akan mengumpulkan data-data dan file yang diperlukan untuk feature dan fungsi
tersebut.
c. Fase analisa dan perancangan: Pada tahapan ini saya mencoba menganalisa data yang telah
dikumpulkan pada tahapan sebelumnya dan menuangkan hasil analisa kedalam sebuah
rancangan. Misalnya berdasarkan feature yang ada maka saya merancang tabel database
yang dibutuhkan oleh tiap feature. Berdasarkan konten dan data yang ada saya juga
melakukan perancangan tampilan aplikasi. Selain itu saya juga menyusun struktur aplikasi
seperti menu, sitemap, dsb.
d. Fase coding: Pada tahapan ini saya memulai menulis kode program. Biasanya dimulai
dengan mengubah template dari file image Firework ke html. Setelah itu membuat kerangka
aplikasi seperti struktur folder dan file dan memulai pengembangan fungsi untuk tiap
feature.
e. Fase setup and testing: Pada tahapan ini saya melakukan setup di server dimana aplikasi
web nanti akan akan dijalankan. Tentu setelah melakukan testing di komputer lokal terlebih
dahulu dan memastikan bahwa semua fungsi berjalan baik. Pada server juga akan dilakukan
testing untuk memastikan aplikasi dapat berjalan baik pada server tersebut. Pada tahapan ini
juga akan dilakukan beta test dimana beberapa orang akan mencoba menggunakan aplikasi
dan memberikan komentar atau feedback terkait dengan fungsi aplikasi.
f. Fase launching: Pada fase ini setelah dipastikan aplikasi berjalan baik pada server maka
saya akan melakukan sosialisasi baik di dunia nyata atau maya. Beberapa diantaranya
adalah melakukan posting di forum, aplikasi social network seperti facebook, membuat
posting di blog, dan sosialisasi lainnya.

 Perangkat Pengembangan Applikasi Web Beberapa Diantaranya :

1. HTML
HTML adalah singkatan dari Hypernet Markup language. Html adalah untuk membuat dan
menyusun bagian paragraf, heading, link atau tautan, dan blockquote untuk halaman web.
Html bukanlah bahasa pemrograman dan itu berarti HTML tidak punya kemampuan untuk
fungsionalitas yang dinamis. Ketika bekerja dengan HTML, anda menggunakan struktur
kode yang sederhana (tag dan attribute) untuk mark up halaman website. Html sebagai
bahasa mark up sangatlah mudah untuk dipahami bahkan bagi webmaster pemula di bidang
web develpment sekalipun.
2. Javascript
JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam
kurun waktu dua puluh tahun ini. Javascript digunakan untuk meningkatkan fungsionalitas
website hingga mengaktifkan permainan (games) dan software berbasis web. Selain itu,
terdapat ribuan template dan aplikasi JavaScript yang bisa anda gunakan secara gratis.
3. Ajax
AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada
sekumpulan teknis mengembangkan web (web development) yang memungkinkan aplikasi
web untuk bekerja secara asynchronous (secara tidak langsung ) – memproses setiap
request(permintaan) yang datang ke server di sisi background.
4. Java
Java dikenal memiliki moto “Write once, Run Anywhere”. Hal ini menunjukan bahwa
setiap kode program yang ditulis menggunakan Java bisa langsung dijalankan pada platform
berbeda-beda tanpa perlu menyusun ulang. Penulisan kode program Java disimpan dalam
file berekstensi java. Dengan menggunakan javac compiler, kamu bisa menyusun file
 berekstensi java menjadi file berekstensi class. File berekstensi class inilah yang di sebut
sebagai bytecode dan bisa dijalankan di seluruh Java Virtual Machine(JVM)
Sebagai bahasa pemrograman umum kamu bisa memanfaatkan java untuk membuat
berbagai bentuk aplikasi seperti aplikasi berbasis desktop, website, mobile hingga embedded
device seperti perangkat pintar atau microprocessor.
5. Joomla
Joomla merupakan salah satu Conten Management System yang sering digunakan untuk
membuat website privadi atau website bisnis. Saat ini joomla digunakan oleh lebih dari 3
persen dari semua situs yang ada di internet. Joomla biasanya di pakai untuk website Forum,
toko online, reservasi tiket, dan web yang membutuhkan sistem inventaris data yang rapi
6. WordPress
Woredpress merupakan CMS (Conten Management System) yang bersifat open source yang
digunakan untuk membuat website. Sifatnya yang open source membuat WordPress
memiliki banyak komunitas dan dukungan. Karenanya wordpress menjadi software paling
mudah untuk membuat website atau blog yang kuat. Termasuk penulis juga menggunakan
wordpress untuk membuat website dan blog. Berikut website yang saya develop
menggunakan wordpress :
https://freddset.wordpress.com
https://blog.wordpress.com
7. XAMPP
Merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket.
Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web
server Apache, PHP dan MySQL secara manual. XAMPP akan menginstall dan
mengkonfigurasinnya secara otomatis untuk Anda atau Konfigurasi otomatis
XAMPP nantinya akan memfasilitasi anda untuk mengembangkan Aplikasi Web dengan
PHP. Paket yang ada di dalam XAMPP adalah sebagai berikut :
8. Server Apache
Digunakan untuk lokal web server, dengan server apache terinstall di komputer anda, Anda
nanti bekerja di komputer secara lokal, Aplikasi Web anda cukup di uji coba di komputer
lokal saja tanpa harus di Upload ke Web Server Internet secara langsung.
9. PHP
Adalah interpreter yang nanti akan menterjemahkan source kode php agar dapat di baca oleh
browser untuk di tampilkan.
10. MySQL
Adalah sebuah software basis data server untuk menyimpan data aplikasi web yang akan
dikembangkan.
11. PHP MyAdmin
Adalah aplikasi untuk mengatur dan mengelola basis data MySQL agar lebih mudah
digunakan
MACAM – MACAM WEB BROWSER
Browser adalah sebuah software yang fungsinya sebagai wadah atau tempat menampilkan dan
melakukan interaksi didunia maya menggunakan jaringan Internet dengan dokumen yang
disediakan server web.

Saat pertama kali diciptakan, tampilan browser kurang menarik karena masih berupa teks.
Seorang mahasiswa Amerika Marc Andressen, menciptakan web browser pertama dengan
tampilan gambar hingga sekarang kita dapat menjumpai bermacam macam browser dengan
kelebihan dan kekurangannya masing-masing.

Adapun macam-macam browser yang bisa kita gunakan untuk menjelajahi internet yaitu :
1. Google Chrome
Google Chrome merupakan browser buatan Google. Pada interfacenya terlihat bahwa
google ingin para penggunanya lebih fokus pada web dan melupakan browser yang
digunakan. Ini artinya google chrome memiliki tampilan yang tidak mengusik dan nyaman
ketika sedang digunakan. Chrome juga memiliki “modus penyamaran”. Pada modus ini
memungkinkan para penggunanya dapat mengakses website tanpa meninggalkan jejak.
Fungsi yang lain masih merupakan keunggulan chrome adalah kemampuan menebalkan
nama domain sebuah website yang dianggap berbahaya. Contohnya pada sebuah website
penipuan beralamatkan i-bank. Klik BCA. D60pc.com, maka d60pc.com akan ditebalkan
sehingga akan diharapkan para pengguna sadar bahwa itu bukan situs resmi klik BCA.
Kelebihan lain :
a. Tidak menghabiskan Ruang RAM terlalu banyak
b. Ringan dan gesit, termasuk ketika start pertama kali dan berpindah tab
c. Desainnya simple dan minimalis
d. Updatenya murah
e. Sistem security kuat
f. Google menanamkan opti “Make Application Shortcut”. Dengan Fitur ini sebuah aplikasi
web seperto Google Mail atau Google Teader adapat dijalankan lewat shortcut pada
desktop atau Start Menu. sehingga seperti aplikasi Lokal.
Pada setiap tab yang dibuka di chrome memiliki proses yang terpisah, sehingga ketika
error/crash pada salah satu tab tidak akan menyebabkan keseluruhan browser error.
Kekurangan
 Penerjemahan masih belum baikGoogle Chrome memang sudah mendukung
penerjemahan bahasa secara langsung. Misalnya Anda mengunjungi sebuah sebuah situs
berbahasa Inggris, Anda bisa langsung menerjemahkan isi situs tersebut ke bahasa
Indonesia. Sayangnya, hasil terjemahan ini bisa dibilang belum baik dan tidak jarang
justru sulit dipahami.
 Bugs yang bisa saja menggangu
Pengembangan sebuah software tentu akrab dengan bug yang bisa mengakibatkan
gangguan, begitu juga dengan Google Chrome. Oleh karena itu, Google Chrome rutin
menyediakan pembaruan versinya sebagai penyempurnaan. Jika Anda menemukan bugs
seperti ini, Anda bisa memberikan feedback dengan klik alt+shift+i.
2. Mozilla Firefox
Rasa-rasanya tidak cukup instal komputer tanpa menginstal aplikasi browser internet.
Sampai saat ini saya lebih sering menggunakan Mozilla Firefox. Alasan yang paling
mendasar adalah karena browser ini memiliki add on yang sangat beragam dan terus
berkembang, meskipun disisi lain kadang tidak lebih cepat daripada browser lainnya.
Kelebihan Mozilla Firefox
a. Popluer di kalanggan Pengguna Internet
 Berbicara mengenai browser pesaing Google Chrome, tentu Mozilla Firefox
jawabannya. Browser satu ini terbilang lebih dulu muncul di kalangan pengguna
internet dibandingkan dengan Google Chrome. Bahkan pada beberapa tahun lalu,
Mozilla Firefox biasanya menjadi andalan di banyak warnet. Jadi tidak heran kalau
Mozilla Firefox populer di kalangan pengguna internet.
b. Keamaan Terbilang Lebih Rapat di banding yang lain
Hal ini mungkin masih menjadi salah satu alasan kenapa Mozilla Firefox tetap ramai
peminat. Keamanan yang ditawarkan terbilang lebih ampuh dibandingkan browser lain.
Komputer akan relatif lebih aman jika menjelajah dengan Mozilla Firefox.
c. Tampilan Halaman yang minimalis
Seperti Google Chrome, tampilan halaman muka Mozilla Firefox juga minimalis. Tidak
terlalu banyak menu-menu yang kurang dibutuhkan oleh pengguna. Tampilan halaman
muka hanya menampilkan address bar, beberapa situs yang sering dan terakhir
dikunjungi, serta icon menu-menu tertentu.
Kekurangan Mozilla Firefox
Mozilla Firefox juga memiliki kekurangan, yang mungkin di anggap oleh sebagian orang
menggangu sehingga lebih memilih Google Chrome. Berikut kekurangan yang ada pada
browser Mozilla Firefox
1. Dibutuhkan Waktu cukup lama ketika memulai
Mozilla Firefox memang membutuhkan waktu lebih lama ketika baru dimulai
dibandingkan dengan Google Chrome. Pada tahap awal ini, browser tidak jarang berjalan
sangat lambat dan bahkan beberapa kali mengalami not responding
2. Membutuhkan Ruang Ram yang cukup besar
Ruang RAM yang dibutuhkan oleh Mozilla Firefox cukup besar. Memang tetap bisa
digunakan untuk komputer berspesifikasi rendah. Akan tetapi semakin sering dipakai,
maka jalannya browser ini akan semakin lambat.
3. Waktu Loading yang Relatif Lebih lambat
Sebenarnya ini juga tergantung pada provider internet yang digunakan. Akan tetapi
dengan provider dan situs yang sama, waktu loading dari Mozilla Firefox memang lebih
lambat dibanding Google Chrome. Hal ini disebabkan adanya masalah terkait kesesuaian
kode halaman situs dengan Mozilla Firefox.
4. Butuh mengunduh lagi untuk pembaruan
Pembaruan pada Mozilla Firefox tidak dilakukan denga upgrade, melainkan mengunduh
lagi versi terbarunya. Jika memori komputer Anda tidak cukup, biasanya akan sulit
melakukan proses ini. Oleh karena itu, beberapa orang terkadang malas melakukan
pembaruan pada M Firefox-nya.

KONSEP WEB SERVER

Pengertian Web Server

Server web atau yang dalam bahasa inggris disebut web server adalah perangkat lunak
(software) dalam server yang berfungsi untuk menerima permintaan (request) berupa halaman
web melalui protokol HTTP dan atau HTTPS dari klien yang lebih dikenal dengan nama
browser, kemudian mengirimkan kembali (respon) hasil permintaan tersebut ke dalam bentuk
halaman-halaman web yang pada umumnya berbentuk dokumen HTML.
Dari pengertian di atas, dapat disimpulkan bahwa web server merupakan pelayan (pemberi
layanan) bagi web klien (browser) seperti Mozilla, Opera, Chrome, Safari, Internet Explorer, dan
lain sebagainya, supaya browser dapat menampilkan halaman atau data yang Anda minta.

Fungsi Web Server

Fungsi utama dari web server adalah untuk melakukan atau mentransfer berkas permintaan
pengguna melalui protokol komunikasi yang telah ditentukan sedemikian rupa. Halaman web
yang diminta terdiri dari berkas teks, video, gambar, file dan banyak lagi.
Salah satu contoh dari Web Server adalah Apache. Apache (Apache Web Server – The HTTP
Web Server) merupakan web server yang paling banyak dipergunakan di Internet. Program ini
pertama kali didesain untuk sistem operasi lingkungan UNIX. Apache mempunyai program
pendukung yang cukup banyak. Hal ini memberikan layanan yang cukup lengkap bagi
penggunanya.
Bagaimana Cara Kerja Web Server?

Lalu bagaimana prinsip atau cara kerja web server itu sendiri? Cukup sederhana untuk dipahami,
karena pada dasarnya tugas web server hanya ada 2 (dua), yaitu
1. Menerima permintaan (request) dari client, dan
2. Mengirimkan apa yang diminta oleh client (response).

Secara sederhana dapat digambarkan sebagai berikut:

Client disini dapat berupa komputer desktop dengan minimal memiliki browser dan terhubung
ke web server melalui jaringan (intranet atau internet).

Komputer yang berfungsi sebagai server, dimana didalamnya terdapat perangkat lunak web
server. Agar komputer ini dapat diakses oleh client maka komputer harus terhubung ke jaringan
(intranet atau internet).
Dalam jaringan internet, komputer ini bisa saja bernama www.google.com, www.bl.ac.id, atau
memiliki kode komputer (disebut IP Address) seperti 202.10.20.10 dan 200.100.50.25.
Pertama-tama, client (user) akan meminta suatu halaman ke (web) server untuk ditampilkan di
komputer client. Misalnya client mengetikkan suatu alamat (biasa disebut URL) di
browser http://www.google.com.

Client menekan tombol Enter atau klik tombol Go pada browser. Lalu apa yang terjadi? Melalui
media jaringan (bisa internet, bisa intranet) dan melalui protokol http, akan dicarilah komputer
bernama www.google.com. Jika ditemukan, maka seolah-olah terjadi permintaan, “hai google,
ada client yang minta halaman utama nich, ada dimana halamannya?”. Inilah yang disebut
request.

Sekarang dari sisi server (web server). Mendapat permintaan halaman utama google dari client,
si server akan mencari-cari di komputernya halaman sesuai permintaan. Namanya juga mencari,
kadang ketemu, kadang juga tidak ketemu. Jika ditemukan, maka halaman yang diminta akan
dikirimkan ke client (si peminta), namun jika tidak ditemukan, maka server akan memberi pesan
“404. Page Not Found”, yang artinya halaman tidak ditemukan.

MACAM MACAM APLIKASI WEB SERVER

Pengertian Web server adalah software yang memberikan informasi layanan data yang memiliki
fungsi menerima permintaan dari HTTP ataupun HTTPS dari klien yang disebut dengan browser
web dan akan mengirimkan kembali hasil nya yang bentuk halaman-halaman web. Halaman-
halaman tersebut umumnya berbentuk dokumen HTML.

Cara kerja Web Server Web server merupakan mesin dimana tempat aplikasi atau software
beroperasi dalam medistribusikan web page ke user, tentu saja sesuai dengan permintaan user.
Hubungan antara Web Server dan Browser Internet merupakan gabungan atau jaringan
Komputer yg ada di seluruh dunia. Setelah terhubung secara fisik, Protocol TCP/IP (networking
protocol) yg memungkinkan semua komputer dapat berkomunikasi satu dengan yg lainnya.
Pada saat browser meminta data web page ke server maka instruksi permintaan data oleh
browser tersebut di kemas di dalam TCP yg merupakan protocol transport dan dikirim ke alamat
yg dalam hal ini merupakan protocol berikutnya yaitu Hyper Text Transfer Protocol (HTTP).
HTTP ini merupakan protocol yg digunakan dalam World Wide Web (WWW) antar komputer
yg terhubung dalam jaringan di dunia ini.

Secara garis besar, apikasi web server terdiri dari dua jenis, jenis web server gratis dan jenis web
server berbayar. Baik web server gratis maupun web server berbayar terdiri dari macam-macam
web server yang masing-masing memiliki kekurangan dan kelebihan tersendiri. Ada beberapa
jenis web server yang kita kenal dengan beberapa keunggulan masing-masing yang dimilikinya.
Apa sajakah jenis jenis web server? Berikut ini akan dijelaskan beberapa jenis jenis macam web
server yang banyak digunakan saat ini.
 Apache
 Web Server Litespeed
 Web Server Nginx
 Web Server Microsoft IIS
Untuk lebih jelasnya, berikut ini beberapa kelebihan dari masing-masing web server tersebut
yang perlu Anda ketahui:
1. Apache
Apache termasuk jenis freeware yang akan menguntungkan Anda. Selain itu, jenis server ini
juga lebih mudah diinstall dibandingkan dengan beberapa jenis server yang lain. Apache
juga dikenal mampu tetap beroperasi di berbagai platform system operasi yang ada sehingga
bisa digunakan oleh banyak orang. Untuk mengatur konfigurasi jenis server ini juga cukup
mudah, terdapat 4 file konfigurasi yang bisa digunakan. Selain itu, cukup mudah
menambahkan peripheral ke bagian platform web servernya.
2. Web Server Litespeed
Jenis server ini mampu meninkatkan performa PHP hingga mencapai 50%, bahkan mampu
melebihi performa server apache hingga enam kali lebih cepat, memiliki system anti DDoS,
mampu melakukan pembatasan terhadap validasi HTTP request. Memiliki system
pencegahan overloading yang baik sehingga akan menguntungkan untuk Anda. System
recovery terhadap kegagalan juga bisa dilakukan secara langsung dan otomatis, memiliki
system yang cukup kompetibel dengan Cpanel, Plesk dan direct admin. Memiliki dukungan
kompabilitas terhadap system mod_security request filtering. Lebih menguntungkannya
lagi, jenis server ini dapat sesuai atau compatible dengan Apache .htaccess.
3. Web Server Nginx
Sama seperti server yang lain, Web Server Nginx juga memiliki beberapa keunggulan yang
patut Anda pertimbangkan sebagai pilihan. Server ini mampu memberikan konten yang
statis pada penggunaan daya yang lebih efisien dari system. Hal ini akan membuat HTTP
konten lebih dinamis di jaringan yang ada menggunakan FastCGI handler. Selain itu server
ini juga dikenal asynchronous –event. Beberapa fitur yang bisa digunakan pada server ini
diantaranya seperti, Server-side includes, Custom logging, URL rewriting, Ability to handle
more than 10000 simultaneous connections, Handling of static files, index files, and auto-
 indexing, MP4 streaming, using the MP4 streaming module, FastCGI support with caching,
Load balancing, SSL Support, Fault tolerance dan sebagainya.

4. Web Server Microsoft IIS

IIS Merupakan kepanjangan dari Internet Information Service. Web server ini memiliki
banyak fitur yang bisa Anda gunakan, seperti diantaranya File Transfer Protocol (FTP),
pengelola web, NNTP dan Ghoper. Server ini mendukung system operasi untuk Windows
NT, 7 dan Windows Server 2003, Windows 2000 dan Windows XP. Untuk kerja PHP
sendiri IIS lebih stabil, cepat dan baik. Memiliki system diagnotistik yang bisa digunakan
untuk melakukan pengecekan terhadap kesalahan. Sangat kompetible dengan windows
karena memang IIS sendiri dirilis oleh Microsoft.
Anda bisa memilih mana jenis web server yang dibutuhkan oleh system operasional Anda.
Masing-masing memiliki keunggulan sendiri dan tentunya juga memiliki kekurangan. Ada
yang gratis dan ada yang berbayar sesuai dengan kualitas yang ditawarkan. Untuk server
yang bagus tentunya Anda perlu sedikit mengalokasikan anggaran yang dibutuhkan.

Macam Macam Aplikasi Editor Teks

1. Pengertian Text Editor

Text editor adalah sebuah program aplikasi yang sering digunakan para programmer,
terutama programmer web dalam menuliskan kode programnya / syntax ketika akan
membuat program atau website. Pada dasarnya, fungsi text editor hanyalah sebagai tempat
menuliskan kode program tanpa ada compiler. Itulah sebabnya, text editor digunakan untuk
menuliskan kode program bahasa pemrograman dalam membuat website, seperti HTML,
CSS, Javascript, PHP, dll.
Text Editor
a. Sublime Text
Sublime Text ini adalah text editor favorit saya. Saya menggunakan Sublime Text
sebagai text editor dalam mengerjakan projek-projek website saya. Mungkin Anda yang
biasa menggunakan Notepad++ sudah tak asing lagi dengan aplikasi Sublime Text yang
merupakan text editor berbasis Phyton dengan banyak fitur teks. Kelebihan dari
Sublime Text ini adalah adanya fitur Multiple Selection yang berfungsi sebagai
pembuat perubahan kode dalam waktu yang sama dan baris berbeda.
Selain itu, sublime text juga memiliki fitur Command Pallete yang berfungsi untuk
mengakses file shortcut lebih mudah. Namun sublime text juga memiliki kelemahan
yaitu adanya beberapa plug in yang belum tersedia dalam aplikasi ini jika dibandingkan
dengan Notepad++
b. Visual Code Studio
Seperti halnya pada sublime text dan Atom editor text, bahwa Visual Studio Code juga
didukung dengan berbagai jenis bahasa pemrograman seperti Java, JavaScript, PHP,
C++, C#, JSON, hingga Go. Di mana software ini bisa mengidentifikasi jenis bahasa
pemrograman secara otomatis. Visual Studio Code ini merupakan software text editor
terbaik bebas berbasis Electron yang dikembangkan oleh Microsoft. Selain itu, Visual
Studio Code juga sudah terintegrasi dan terhubung secara langsung dengan GitHub.
Dengan begitu, Anda bisa menyimpan dan memanggil semua kode yang sudah Anda
kerjakan sebelumnya lebih mudah dan praktis.
c. Notepad++
Karena adanya batasan penggunaan notepad pada Windows, maka kita perlu
menggunakan Notepad++ yang bisa digunakan secara gratis dalam mengedit kode.
Software ini memiliki fitur tab, sehingga Anda bisa melakukan editing code dengan
banyak file yang terbuka dalam satu jendela. Di tahun 2015, Notepad++ mulai
 dihubungkan ke GitHub untuk memudahkan para programmer menggunakannya.
Semua programmer tahu, bahwa Notepad++ ini selain gratis, juga sangat ringan dan
sederhana penggunaannya. Ditambah lagi software ini sudah aktif dengan notasi http.
Jadi, cukup klik 2 kali url-nya, maka kita bisa menuju halaman situs yang kita maksud.
d. Vim
Vim merupakan aplikasi text editor terbaik buatan Bram Moolenaar, di mana mampu
membuat para programmer lebih produktif saat menggunakan software ini. fungsinya
pun sama dengan Text Editor terbaik lainnya yaitu menulis dan mengedit kode
pemrograman. Bahkan Vim ternyata sangat populer digunakan oleh kebanyakan
programmer luar negeri. Hal ini terbukti adanya beberapa film tentang hacker yang
menggunakan Vim, salah satunya adalah film Social Network. Memang, untuk pemula
akan merasa kesulitan dalam penggunaan Vim. Tapi jika sudah dibiasakan, penggunaan
Vim ini sangat simpel dan mudah digunakan. Uniknya, kita bisa bergerak ke baris lain
tanpa menggunakan mouse jika menggunakan Vim. Fitur ini disebut Motion.

TOOL PENGEMBANG WEB

Menjadi seorang web developer merupakan salah satu pekerjaan yang membutuhkan beberapa
komponen penunjang guna untuk menghasilkan pekerjaan yang dapat dicapai sesuai dengan
tujuan awal. Salah satu komponen penunjang tersebut adalah beberapa tools yang nantinya dapat
digunakan untuk melancarkan aksi mereka.
1. Adobe Dreamweaver
Software ini khusus dikembangkan untuk pengembang website dan menyediakan fitur di
dalamnya. Fitur utama dari Adobe Dreamweaver sebagai berikut :
a. Menyediakan grid yang bisa disesuaikan
b. memudahkan untuk menulis dan mengedit kode HTML, javaScript, CSS dan XTL
c. Tampilkan WYSIWYG(What You See Is What You Get) dan hasinya sama persis
dengan ketik apa yang sudah dikerjakan
2. Bootstrap
Library HTML, CSS, dan JS yang paling popular, Bootstrap adalah library yang bisa
digunakan secara gratis dan open-source. Library ini terdiri dari CSS dan JavaScript
template desain untuk typography, forms, tombol, navigasi, dan komponen lainnya.
Bootstrap sendiri banyak digunakan oleh front-end developer untuk membuat website
semakin cantik dengan HTML, CSS, dan JavaScript.
Fitur Utama :
a. Ada contoh template yang siap dipakai dan bebas digunakan
b. Tidak membuthkan banyak kustomisasi
c. Menyediakan berbagai opsi dukungan
3. Lorem Ipsum – neosh.deviantart.com
Dengan menggunakan tools ini maka seorang web developer akan mudah dalam
memberikan contoh teks yang diberikan pada sebuah halaman web, guna untuk melihat
hasil dari penulisan kode terkait efek yang diberikan pada area yang akan diberi teks.
4. Fontello – fontello.com
Dengan bantual tools ini maka seorang web developer juga akan mudah dalam memilih
berbagai ikon pendukung, dimana dengan dukungan yang ada kita bisa melakukan generate,
serta dukungan untuk editing dengan penyesuaian berdasarkan simbol dan nama.
5. Adobe Edge Inspect – webdesignerdepot.com
Salah satu platform baru dari Adobe yang sangat berguna jika digunakan untuk membangun
dan merencanakan sebuah front-end website interaktif, dengan dukungan tools ini kita bisa
melakukan desain CSS dengan sangat mudah.
 DAFTAR PUSTAKA

https://www.malasngoding.com/belajar-html-format-text-pada-html/
https://www.duniailkom.com/belajar-html-pengertian-html/
https://harmonikediri.wordpress.com/2017/12/12/versi-versi-html/
https://www.apacara.com/category/html/
https://ceosharelink.blogspot.com/2018/10/cara-menggunakan-
quoda-code-editor-di-hp-android.html
https://docplayer.info/46221475-Konsep-teknologi-aplikasi-web.html
https://adoc.pub/konsep-teknologi-aplikasi-web.html
https://jurnal.unnur.ac.id
 HANDOUT
Pemrograman Web
Kelas : XI RPL

KOMPETENSI DASAR
3.2 Menerapkan format teks pada halaman web
4.2 Membuat kode html untuk menampilkan teks dalam format tertentu pada halaman web

INDIKATOR PENCAPAIAN KOMPETENSI

3.2.1 Menjelaskan struktur dasar pemrograman web dengan html.
3.2.2 Menjelaskan berbagai versi dari html.
3.2.3 Menjelaskan tata cara penulisan script html dengan berbagai editor.
3.2.4 Menjelaskan tag-tag dalam html.
3.2.5 Menjelaskan berbagai tag html untuk memformat teks.
3.2.6 Menerapkan format teks dalam script html.
4.2.1 Merancang program tampilan format teks dalam halaman web
4.2.2 Membuat program halaman web yang menampilkan teks dengan berbagai format.
4.2.3 Menguji hasil tampilan halaman web dengan berbagai format teks.

MATERI POKOK

 Struktur dasar html

 Versi html
 Fungsi berbagai tag dalam html
 Format teks dalam html.

1
HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam
HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan
text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang
dapat dijadikan link. Disebut Markup Language karena bahasa HTML menggunakan tanda (mark),
untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan
menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai
HTML tag. Jika anda ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini,
lalu pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome). Akan tampil sebuah
halaman baru yang merupakan kode HTML dari halaman ini.

HTML merupakan bahasa dasar pembuatan web, karena dalam membuat web jika hanya
menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemrograman web yang
ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Akan tetapi sebelum anda
belajar JavaScript maupun PHP, memahami HTML merupakan hal yang paling awal.
HTML bukanlah bahasa pemrograman (programming language), tetapi bahasa markup (markup
language), hal ini terdengar sedikit aneh, tapi jika anda telah mengenal bahasa pemrograman lain,
dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemrograman
seperti IF, LOOP, maupun variabel.

HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah
halaman. Selain HTML, dikenal juga xHTML yang merupakan singkatan dari eXtensible Hypertext
Markup Language. xHTML merupakan versi lama dari HTML (sebelum era HTML5 seperti saat
ini). xHTML menggunakan aturan penulisan yang lebih ketat. Jika anda menemukan artikel yang
membahas xHTML, bisa disamakan dengan HTML, karena perbedaannya tidak terlalu banyak.

APA PERBEDAAN

WEB STATIS DAN WEB DINAMIS???

Struktur Dasar HTML

2
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link,
text, paragraph, list, dan sebagainya. Tag merupakan bentuk simbol berbentuk “<” sebagai tanda awal
penulisan elemen dan diakhiri tanda “>” sebagai tanda akhir penulisan sebuah elemen. Format
penulisan sebuah elemen adalah sebagai berikut.

<tag_awal_nama_elemen>
“isi script program html”
</tag_akhir_nama_elemen>

Tidak semua elemen dalam dokumen HTML dalam penulisannya harus menggunakan tag awal dan
akhir secara berpasangan. Contohnya adalah sebagai berikut:
~ untuk mencetak garis horizontal menggunakan tag <hr>
~ untuk mencetak kalimat pada baris selanjutnya menggunakan tag <br>
~ penomoran sebuah daftar teks menggunakan list item dengan tag <li>
~ pembuatan format teks dalam bentuk paragraph menggunakan tag <p>
Kelebihan dokumen web berbasis HTML adalah kemampuan untuk mendukung penulisan script
bahasa pemrograman web lainnya dalam badan HTML seperti Vbscript, JavaScript, PHP, ASP, dan
Ajax.

Contoh struktur dasar HTML:

Tag <html>; Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus
berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>
Tag <head>; Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti
kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser.
Tag <title>; dalam contoh kita sebelumnya digunakan untuk menampilkan title dari sebuah halaman
web. Title ini biasanya ditampilkan pada bagian paling atas web browser.
Tag <body>; akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel,
link, gambar, dll. Tag body ini ditutup dengan </body>.

3
HTML 1.0
Ini adalah awal mula dari HTML (pendahulunya). Pada versi ini masih terlihat beberapa
kelemahan dan masih sangat sederhana. Kemampuan yang dimiliki oleh versi 1.0 ini
hanya terbatas pada heading, paragraph, hypertext, list, dan setak tebal atau miring
pada teks.

HTML 2.0
Versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan
diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif
dan mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan
homepage interaktif.

HTML 3.0
Dirilis pada 18 Desember 1997 yang sering disebut sebagai HTML+ yang mempunyai
kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam
paragraph, akan tetapi versi ini tidak bertahan lama.

HTML 3.2
Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan
penyempurnaan versi 3.0 ini yaitu HTML veri 3.2, keluarnya versi ini dikarenakan
adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan
pendekatan dengan cara lain yang justru hal tersebut menjadi popular, maka dibakukan
versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang
browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan
versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape
dan Microsoft.

HTML 4.0
Yang terakhir perombakan terjadi pada tahun 1999 tepatnya tanggal 24 Desember yaitu
HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta,
imagemaps. Image dan lain-lain sebagai penyempurnaan versi 3.2. Di samping itu versi
ini ditambahkan tag-tag baru seperti ABBR, ACRONYM, BUTTON, PARAM, BUTTON,
TBODY, THEAD dan lain sebagainya.

HTML 5.0
Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasannya HTML versi 5.0
masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet
Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi
2.0.

4
 FUNGSI BERBAGAI TAG DALAM
HTML

Bagian Head
Bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik
judul halaman, konten, jenis halaman, dan jenis karatket penulisan. Diawali dengan <head>
diakhiri dengan </head>. Contoh:
<head>
<title>ini adalah halaman web</title>
</head>
Penjelasan:
~ <head> = sebagai awal penanda script bagian head HTML
~ <title> = sebagai awal tanda judul sebuah halaman web
~ ini adalah halaman web = judul halaman web yang akan ditampilkan
~ </title> = tag akhir title
~ </head> = tag akhir head
Bagian Body
Diawali dengan <body> diakhiri dengan </body>. Perhatikan contoh script berikut:
<!—file studikasus2-1.html-->
<html>
<head>
<title>ini biodataku</title>
</head>
<body>
Ini adalah web pertama saya dengan html
</body>
<html>
Mengganti Baris
Untuk mencetak baris selanjutnya menggunakan tag <br>.
~ mencetak kalimat tanpa tag <br>

<!—file studikasus2-2.html-->
<html>
<head>
<title>mencetak halaman web tanpa tag br</title>
</head>
<body>
NIS : 110211178
Nama : Farah Dea Fanny
Kelas : XII TKJC
</body>
</html>

~ mencetak kalimat dengan tag <br>

<!—file studikasus2-3.html-->
<html>
<head>
<title>mencetak halaman web dengan br</title>
</head>
<body>
NIS : 110211178 <br>
Nama : Farah Dea Fanny <br>
Kelas : XII RPL
</body>
</html>

5
Membentuk Paragraf
Dengan memberikan tanda tag awal paragraf <p> diikuti teks yang akan ditampilkan pada web
browser dan diakhiri tag akhir paragraf </p>, maka informasi teks akan disusun menyerupai
model paragraf.
Tag
Garis Horizontal
Untuk membuat garis horizontal menggunakan tag <hr>.
<!—file studikasus2-6.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar.
</body>
</html>
Membuat Komentar
Untuk menambahkan komentar diawali dengan tanda “<!—“ diikuti komentar kemudian diakhiri
dengan tanda “-->”
<!—file studikasus2-7.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar. <!—konten
halaman web-->
</body>
</html>
Pengaturan Properti Dokumen
Properti document adalah pengaturan tampilan web melalui atribut-atribut yang terdapat dalam
elemen <body>.
 Atribut Elemen <body>
a) BACKGROUND = Latar belakng dokumen image dokumen
b) BGCOLOR = Warna latar belakng dokumen, biasanya putih
c) TEXT = Warna teks dokumen, biasanya hitam
d) LINK = Warna link dokumen, biasanya biru
e) VLINK = Warna visited link dokumen, biasanya ungu
f) ALINK = Warna aktif link dokumen, biasanya merah
Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai
heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi
warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna
merah dalam kobinasi warna berikut ini adalah contoh kode warna:

WARNA HEXADESIMAL WARNA HEXADESIMAL

White #FFFFFF Black #B87333
Red #FF0000 Green #00FF00
Blue #0000FF Magenta #FF00FF
Cyan #00FFFF Yellow #FFFF00
Aquamarine #70DB93 Chocolate #5C3317
Violet #9F5F9F Brass #B5A642
Coper #B87333 Pink #FF6EC7

6
 FORMAT TEKS DALAM HTML

Memanipulasi Tampilan Teks pada Halaman Web

a. Mencetak tebal teks : <b>teks</b>
b. Mencetak tebal teks dengan strong : <strong>teks</strong>
c. Mencetak miring teks : <i>teks</i>
d. Mencetak teks bergaris bawah : <u>teks</u>
e. Memberi tekanan teks : <em>teks</em>
f. Membesarkan huruf : <big>teks</big>
g. Mengecilkan huruf : <small>teks</small>
h. Mencetak superscript teks : ^teks
i. Mencetak subscript teks : _teks
j. Mencetak teks berkedip : <blink>teks</blink>
k. Mencetak teks berjalan : <marquee>teks</marquee>
l. Mencetak teks dengan coretan : <s>teks</s>

Format Heading
Fungsi utama heading adalah untuk mengatur besar ukuran teks dalam halaman web yang
biasanya diterapkan pada sebuah judul atau tema informasi yang terdapat pada halaman web.
Penulisan heading diawali dengan tag <h1> dan diakhiri dengan tag </h1>, dengan formasi
heading yang memiliki 6 ukuran dari 1 sampai 6.

Bentuk Preformat teks

Seperti telah dijelaskan sebelumnya bahwa untuk mencetak teks pada baris selanjutnya
digunakan tag <br>, sementara untuk format paragraf menggunakan tag <p>. Besar jarak spasi
antarbaris dalam halaman web adalah 1 spasi, sehingga ketika ingin menambahkan jaraknya
menjadi 2 spasi, perlu ditambahkan tag <br>. Dalam HTML fungsi preformat teks yang berguna
untuk mencetak teks pada web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan
kode program HTML bagian body dengan menambahkan tag awal <pre> dan diakhiri tag </pre>.

Format Address
Tag <address> merupakan standar kode HTML yang digunakan untuk penulisan sebuah alamat
institusi yang berfungsi sebagai informasi kontak sebuah institusi. Hasil output yang ditampilkan
akan dicetak miring, dan ketika penulisan alamat lebih dari satu baris, maka harus diserakan tag
ganti baris.

Format Keluaran Program Komputer

Bebrapa script HTML yang dapat digunakan untuk mendefinisikan proses secara komputerisasi
adalah sebagai berikut.
~ <code>...</code> = untuk mendefinisikan kode pogram tertentu yang ditampilkan pada web
page
~ <var>...</var> = untuk mendefinisikan variabel dalam program
~ <samp>...</samp> = untuk mendefinisikan contoh keluaran program
~ <tt>...</tt> = untuk mendefinisikan teletype text

Format Abbr dan Acronym

Tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi
kepanjangan sebuah teks. Ini sering digunakan untuk mempersingkat sebuah istilah dengan
tujuan mempermudah pengguna ketika menjelajah internet dalam mencari keyword
tertentu.

Mengubah Arah Tampilan Teks

7
 Untuk mengubah arah tampilan penulisan teks dari kanan ke kiri menggunakan <bdo>.
Secara default web browser akan mencetak teks dari arah kiri menuju ke kanan, sebagai
contoh “selamat datang”. Dengan tag <bdo dir=”rtl”>, maka hasil penulisannya menjadi
terbalik. Argument rtl digunakan untuk menulis teks dari arah kanan ke kiri (right to left),
sedangkan argument ltr digunakan untuk menulis teks dari arah kiri ke kanan (left to right).

Membuat Kutipan Teks

a) Tag <q> digunakan untuk membuat kutipan pendek. Kutipan menggunakan tag <q> akan
ditulis tanpa menjorok ke dalam halaman web. Selain itu kutipan diawali dengan tanda petik
dua (“) dan diakhiri dengan tanda petik dua (“)
b) Tag <blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali dengan
penulisan teks secara menjorok kedalam.

Penyisipan dan Penghapusan Teks

Untuk menghapus data salah, dapat digunakan tag <del> yang memiliki efek teks dicoret
tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag <s> seperti yang
telah dijelaskan pada subbab sebelumnya. Untuk melakukan koreksi informasi yang salah
pada web, dapat digunakan tag <ins> yang memiliki efek tulisan bergaris bawah seperti
efek tulisan dengan tag <a href=” “>

List Html
List berarti daftar, ukuran, rangkaian, atau menu. List HTML merupakan bentuk struktur dalam
HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
 List Bernomor Urut (Ordered List)
List bernomor adalah teknik menampilkan daftar tertentu dalam halaman web menggunakan
item penomoran, seperti 1,2,3 hingga seterusnya. Untuk menggunakan List bernomor,
digunakan tag <ol> dan diakhiri dengan </ol>.
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara
standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.
type Fungsi
I Untuk menampilkan nomor urut dengan angka dalam romawi besar
(I,II,III, dan seterusnya)
i Untuk menampilkan nomor urut dengan angka dalam romawi kecil
(i,ii,iii, dan seterusnya
a Untuk menampilkan nomor urut dengan menggunakan abjad kecil
(a,b,c,d, dan seterusnya)
A Untuk menampilkan nomor urut dengan menggunakan abjad besar
(A,B,C,D, dan seterusnya)

 List Tanpa Urutan Nomor (Unordered List)

Untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran dapat
menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda
unordered list seperti berikut
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
Tipe Keterangan Contoh Penulisan
Disk Tanda bulatan hitam <ul type=”disk”>
Circle Tanda bulatan putih <ul type=”circle”>
Square Tanda kotak <ul type=”square”>

 List Terdefinisi

8
 List terdefinisi (definition list) adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri
dengan </dl>. Untuk menyatakan terminasi sub list digunakan tag <dt> dan diakhiri dengan
</dt>, sedangkan untuk menjelaskan pengertian dari sub list yang telah dijelaskan
sebelumnya digunakan tag <dd> dan diakhiri dengan </dd> yang memiliki efek penulisan
teks agak menjorok kedalam.

 List Bersarang
<!—file studikasus2-20.html-->
<html>
<head>
<title>list bersarang</title>
</head>
<body>
Menu bersarang
<ol>
<li>daging</li>
<ul>menu ayam
<li>ayam bakar</li>
<li>bebek panggang</li>
</ul>
<li>sayur</li>
<ol>menu sayur
<li>sayur sup</li>
<li>sayur sup</li>
</ol>
</body>
</html>

9
 DAFTAR PUSTAKA

https://www.malasngoding.com/belajar-html-format-text-pada-html/
https://www.duniailkom.com/belajar-html-pengertian-html/
https://harmonikediri.wordpress.com/2017/12/12/versi-versi-html/
https://www.apacara.com/category/html/
https://ceosharelink.blogspot.com/2018/10/cara-menggunakan-quoda-
code-editor-di-hp-android.html

10
Kompetensi Dasar
3.3 Menerapkan format tabel pada halaman web
4.3 Membuat kode html untuk menampilkan tabel pada halaman web

Fungsi dari tabel sendiri adalah untuk mengatur agar informasi dari halaman web dapat disajikan
dengan tampilan yang baik untuk dibaca.

 TAG dalam membuat table

Berikut yang harus anda pahami tag yang berfungsi untuk pembuatan sebuah tabel:
Tag Fungsi
<table>…</table> Tag harus ditulis yang berguna sebagai pembuka dan penutup
sebuah tabel
<caption>…</caption> Membuat judul tabel
<th>…</th> Membuat judul kolom
<tr>…</tr> Menentukan sebuah baris dalam tabel
<td>…</td> Membuat sel data

Setelah anda mengerti tag diatas, langsung saja yukk kita praktekkan !!

Membuat Tabel Sederhana dengan HTML

Berikut source code membuat tabel sederhana :
<html>
<head>
<title> Membuat Tabel Sederhana </title>
</head>
<body>
<table>
<caption>Daftar Teman Saya</caption>
<tr><th>Nama</th><th>Jenis Kelamin</th></tr>
<tr><td>Yogo</td><td>Laki-laki</td></tr>
<tr><td>Fungky</td><td>Laki-laki</td></tr>
</table>
</body>
</html>

 Berikut ini beberapa atribut tag tabel

Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
cellspacing jarak antar cell
cellpadding jarak teks ke cell
border lebar garis batas, 0=tanpa garis batas
  Berikut ini atribut tag-tag <th> dan <td>, bila disebutkan di tag <tr> maka atribut di tag
<th> dan <td> diabaikan.
Atribut Fungsi
bgcolor warna background
width, height lebar dan tinggi tabel (dalam % atau pixel)
align (left, right, center) pengaturan posisi horisontal isi sel, rata kanan/kiri/tengah
valign (top, bottom, pengaturan posisi vertikal terhadap isi sel, di atas, bawah atau
middle) tengah
colspan=n Menggabungkan kolom ke kanan
rospan=n Menggabungkan baris ke bawah
nowrap mematikan word wrapping

Contoh1.
<html>
<head> <title> </title>
</head>
<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5" bgcolor="yellow">
<tr>
<th>sel 1</th>
<th>sel 2</th>
<th>sel 3</th>
</tr>
<tr>
<td align=left> sel 4</td>
<td align=center>sel 5</td>
<td align=right>sel 6</td>
</tr>
<tr bgcolor="orange">
<td width="100" height="75" valign=top>sel 7</td>
<td width="35%" height="75" valign=middle>sel 8</td>
<td height="75" valign=bottom>sel 9</td>
</tr>
</table>
</body>
</html>

Contoh 2:
<html>
<head> <title> </title>
</head>
<body>
<table width="100%" border="2" cellspacing="5" cellpadding="5" bgcolor="#9999CC">
<tr>
<td width="30%">&nbsp;</td>
<td colspan="3">colspan=3</td>
</tr>
<tr>
<td rowspan="4" bgcolor="#FFFF00">rowspan=4</td>
<td width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
<td bgcolor="white" width="20%">&nbsp;</td>
</tr>
<tr>
<td width="31%">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
<td bgcolor="white">&nbsp;</td>
</tr>
</table>
</body>
</html>

Contoh script pembuatan table bisa di akses di laman berikut:

http://faculty.petra.ac.id/dwikris/docs/desgrafisweb/html_dasar/contoh/ex_tables.html
Kompetensi Dasar

3.4 Menerapkan tampilan format multimedia pada halaman web

4.4 Membuat kode html untuk menampilkan tampilan format multimedia pada halaman web

1. Format Gambar pada halaman Web

Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan bila tidak
disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir
semuanya memasukkan unsur gambar, animasi, bahkan audio dan video untuk menarik dan
membuat tercengang para pengunjungnya.
Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam suatu
halaman web sangatlah mudah. HTML telah menyediakan tag khusus untuk keperluan ini,
yaitu <img>. Tag ini merupakan tag tunggal atau tidak memiliki pasangan. Atribut
terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang
akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah:
<img src=”logo.jpg”>
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di situs web lain,
makan perlu menyebutkan juga lokasi dari file tersebut.
Contoh:
<img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>
 Atribut Untuk Tag <img>
Atribut untuk tag <img> dapat mencakup atribut global dan atribut event. Namun
untuk materi kali ini akan saya informasikan beberapa atribut yang umumnya sering
digunakan bersamaan dengan tag <img>.
Atribut-atribut ini yaitu:
 src – menentukan alamat lokasi atau url gambar yang akan ditampilkan
 alt – membuat teks alternatif gambar
 width – menentukan lebar gambar
 height – menentukan tinggi gambar
 style – menentukan style atau gaya dari gambar
contoh penerapan atribut pada tag <img>
<body>
<img src="kucing.jpg" style="width: 200px; height: 150px;" />
<img src="kucing.jpg" style="width: 200px; height: 150px; border: 5px solid
green;" />
<img src="kucing.jpg" style="width: 200px; height: 150px; border: 5px solid
green; border-radius: 100%" />
</body>
2. Format Audio pada halaman web
Tahukah kalian selain teks dan gambar, yang namanya konten website juga dapat
berupa audio. Dalam dunia digital yang perkembangannya semakin pesat ini banyak
sekali bermunculan konten audio seperti musik, audiobook, hingga yang sedang trend
saat ini yaitu podcast. dalam HTML 5 sudah tersedia tag tersendiri untuk memutar
audio, yaitu dengan menggunakan tag <audio>.
Tag <audio> digunakan untuk membuat atau menambahkan audio player di browser.
Contoh script untuk menambahakan format audio:
<body>
<h1>Tutorial Audio di HTML 5</h1>
<audio controls>
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
</body>

 Atribut Untuk Tag <audio>

Ada dua atribut penting yang perlu diingat untuk menentukan file audio beserta
formatnya, antara lain.
 src – berfungsi untuk menentukan alamat lokasi atau sumber dari suatu file media
seperti gambar, audio, dan lain-lain. Atribut ini selain dapat ditambahkan ke
dalam tag <img>, ia juga dapat ditambahkan ke dalam tag <audio> dan <source>.
 type – mendefinisikan kode media internet (MIME), dalam konteks audio
berfungsi untuk mendefinisikan jenis atau tipe dari format file audio yang
ditentukan pada tag <source>.
 Atribut controls
Atribut controls digunakan untuk menampilkan atau mengaktifkan tombol kontrol
audio seperti tombol play, pause, stop, volume, dan minute scroll.
Karena nilai atribut controls berupa nilai boolean maka kita dapat mendefinisikannya
dengan dua cara yaitu seperti di bawah ini.

<audio controls>
<source src="creativeminds.mp3" type="audio/mpeg">
</audio>
<!-- Atau -->
<audio controls="true">
<source src="creativeminds.mp3" type="audio/mpeg">
</audio>

 Atribut autoplay
Atribut autoplay akan membuat file audio berputar secara otomatis. Nilai masukan
dari atribut autoplay adalah nilai boolean yaitu true dan false.
Jika nilai yang dimasukkan true maka file audio akan diputar secara otomatis,
sedangkan jika false maka tidak diputar secara otomatis.
Atribut autoplay juga memiliki dua cara pendefinisian bila bernilai true
 <audio controls autoplay>
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
<!-- Atau -->
<audio controls autoplay="true">
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>

 Atribut loop
Atribut loop akan membuat file audio diputar secara berulang-ulang. Cara kerja
atribut ini sama dengan fitur repeat one di pemutar audio handphone kita.
Sama seperti atribut yang lain, nilai atribut loop juga berupa boolean yang berarti
hanya ada dua true dan false.
Contoh penerapan
<audio controls loop>
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
<!-- Atau -->
<audio controls loop="true">
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
 Atribut muted
Atribut muted digunakan untuk mensenyapkan audio. Jadi ketika atribut ini
ditambahkan maka secara default volume dari file audio yang diputar beralih ke
mode senyap.
Nilai yang diberikan juga berupa nilai boolean, true dan false.
<audio controls muted>
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
<!-- Atau -->
<audio controls muted="true">
<source src="creativeminds.mp3" type="audio/mpeg" />
</audio>
 Atribut src
Sudah sering kali dijelaskan bahwa atribut ini berfungsi untuk menentukan alamat
lokasi atau sumber dari beberapa file media seperti gambar, audio, dan lain-lain.
Dalam penerapan sebelumnya atribut ini disisipkan ke dalam tag <source>, namun
sebenarnya atribut ini juga dapat disisipkan ke dalam tag <audio>.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Audio HTML 5</title>
</head>
<body>
<h1>Tutorial Audio di HTML 5</h1>
 <audio controls src="creativeminds.mp3"></audio>
</body>
</html>

3. Format video pada halaman web

Dahulu sebelum HTML berkembang menjadi HTML 5, untuk membuat media player pada
HTML dibutuhkan campur tangan program eksternal seperti adobe flash player. Namun
sekarang tidak perlu lagi karena HTML 5 sudah memiliki tag <video> yang memungkinkan
kita untuk menambahkan <video> pada browser.

Contoh penerapan format video ke dalam halaman html

<!DOCTYPE html>
<html>
<head>
<title>Belajar Video di HTML</title>
</head>
<body>
<h1>Tutorial Video HTML</h1>

<video controls width="320" height="240">

<source src="coffee.mp4" type="video/mp4">
</video>
</body>
</html>

 Atribut Untuk Video

Tag video mendukung beberapa atribut di bawah ini:
Atribut Fungsi Nilai
autoplay membuat video diputar otomatis true/false
controls menampilkan pengaturan kontrol video true/false
loop membuat video diputar berulang-ulang true/false
muted membuat video menjadi senyap true/false
poster menentukan gambar cover dari video lokasi gambar
preload menentukan seberapa penting video dimuat auto, metadata, none
src menentukan alamat lokasi video URL video
width mengatur lebar video angka
height mengatur tinggi video angka
Kompetensi Data
3.5 Menerapkan format kaitan pada halaman web
4.5 Membuat kode html untuk menampilkan format kaitan pada halaman web

Mengenal Link di HTML

Hyperlink atau link sering digunakan untuk menghubungkan suatu halaman website ke
halaman yang lain. Elemen yang menjadi link nantinya dapat diklik, yang mana selanjutnya
akan mengarahkan kita ke halaman yang sudah ditentukan.

Membuat Link di HTML

Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor.

<a href="url">teks link</a>

Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan
alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.

Mengenal Jenis-Jenis Link Pada HTML

Dalam HTML yang namanya link terbagi atas dua jenis yaitu internal link dan eksternal link.
Apa itu internal link dan eksternal link?
Internal link merupakan jenis link yang mengarahkan kita ke halaman yang masih dalam
domain atau website itu sendiri. Contohnya, pada saat ini kita buka halaman tutorial html dan
kemudian berpindah ke halaman tutorial css yang masih tetap berada dalam satu website.

Eksternal link merupakan jenis link yang mengarahkan kita ke halaman yang dimiliki oleh
domain atau website lain. Contohnya, kita ingin berbagi halaman tutorial html dari website
ini ke facebook, yang mana saat link berbagi di klik maka akan mengarahkan kita ke
facebook.
Sederhananya, bila link tersebut masih membuka website itu sendiri maka disebut internal.
Sedangkan bila yang dibuka sudah ranah website lain berarti eksternal.
Nah sekarang kita coba praktikan melalui kode HTML supaya lebih paham.
Contoh Penerapan Internal Link dan External Link
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
</head>
<body>
<h1>Selamat Datang di Beranda!</h1>
<p>Pilih Menu</p>
Penerapan Internal Link
<a href="index.html">Beranda</a> ||
<a href="tentang.html">Tentang</a> ||
<a href="kontak.html">Kontak</a>
Penerapan Eksternal Link
<a href="https://github.com/Kopidingin" target="_blank">GitHub
Kopiding.in</a>
</body>
</html>
Bermacam Atribut Untuk Link
Selain menggunakan atribut khusus seperti href. Tag <a> nyatanya dapat bekerja dengan
bermacam atribut lain di bawah ini:
Atribut Target
Atribut target digunakan untuk menentukan target dimana link akan dibuka, ada bermacam
value atau nilai untuk atribut ini seperti:
 _blank – membuka link pada tab baru
 _self – membuka link pada halaman itu sendiri. Nilai ini digunakan sebagai nilai default
atribut target.
 _top – membuka link dengan menuju bagian paling atas pada halaman
 _parent – membuka link pada frame induk
 nama-frame – membuka link pada <iframe> dengan nama tertentu.

Atribut Title
Atribut title digunakan untuk membuat tooltips. Tooltips merupakan informasi tambahan
yang akan ditampilkan saat pointer menyentuh link.

Tambahkan atribut title di setiap link pada halaman index.html.

<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
</head>
<body>
<h1>Selamat Datang di Beranda!</h1>
<p>Pilih Menu</p>
<a href="index.html" title="Halaman Beranda Website">Beranda</a> ||
<a href="tentang.html" title="Halaman Tentang Website">Tentang</a> ||
<a href="kontak.html" title="Halaman Kontak Website">Kontak</a>
</body>
</html>
Tidak hanya pada link saja, tooltip juga dapat ditampilkan pada beberapa elemen lain seperti
paragraf, heading, dan lain sebagainya asalkan elemen-elemen tersebut diberi atribut title.

Apa Lagi Fungsi dari Link?

Fungsi link tidak hanya digunakan untuk menghubungkan antar halaman website saja. Lebih
dari itu link memiliki fungsi lain yang nantinya akan berguna saat kita membuat suatu
website.
Membuat Link Buntu
Link buntu merupakan link yang tidak akan mengarah kemanapun, artinya ketika link ini
diklik maka ia tidak akan melakukan reaksi apapun.
Link buntu sering digunakan hanya sebagai sampel atau placeholder saja.
Untuk membuatnya kita hanya perlu menambahkan nilai berupa tanda pagar (#) di atribut
href
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
</head>
<body>
<h1>Selamat Datang di Beranda!</h1>
<p>Pilih Menu</p>
<a href="#">Beranda</a> ||
<a href="#">Tentang</a> ||
<a href="#">Kontak</a>
</body>
</html>

Sebenarnya tanda pagar ini merupakan anchor atau jangkar. Kegunaan anchor ini akan
membawa kita ke lokasi tertentu dalam dokumen HTML tersebut. Namun bila hanya
didefinisikan tanda pagar saja, maka ia tidak akan mengarahkan kita kemana-mana.
Membuat Link Anchor
Sudah disinggung sedikit sebelumnya bahwa link anchor adalah link yang akan membawa
kita ke lokasi tertentu pada dokumen HTML itu sendiri. Dinamakan link ancor atau jangkar
karena cara kerjanya persis dengan jangkar kapal. Ketika jangkar dikaitkan otomatis kita
akan ikut terbawa ke arah sana.
Untuk membuat link jangkar ini kita memerlukan tanda pagar (#) ditambah nilai dari atribut
id untuk menetapkan elemen mana yang nantinya akan dituju.
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
</head>
<body>
<h1>Selamat Datang di Beranda!</h1>
<p>Pilih Menu</p>
<a href="index.html">Beranda</a> ||
<a href="tentang.html">Tentang</a> ||
<a href="kontak.html">Kontak</a>

<h2>Daftar Isi</h2>
<ol>
<li><a href="#sub-1">Mengenal Link di HTML</a></li>
<li><a href="#sub-2">Membuat Link di HTML</a></li>
 <li><a href="#sub-3">Mengenal Jenis-Jenis Link Pada HTML</a></li>
</ol>

<h2 id="sub-1">Mengenal Link di HTML</h2>

<p>
Hyperlink atau link merupakan elemen HTML yang sering digunakan untuk
menghubungkan suatu halaman website ke halaman yang lain. Elemen yang menjadi link atau
tautan nantinya dapat diklik dan selanjutnya akan mengarahkan kita ke halaman yang sudah
ditentukan.
</p>

<h2 id="sub-2">Membuat Link di HTML</h2>

<p>
Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari
anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk
mendefinisikan alamat yang akan dituju. Kepanjangan dari href adalah Hypertext Reference.
</p>
<h2 id="sub-3">Mengenal Jenis-Jenis Link Pada HTML</h2>
<p>
Mengapa alamat URL pada atribut href di atas dinamai dengan nama filenya? Bukankah
kita harus menulis alamat URL-nya secara lengkap menggunakan http://.......? <br>
Hal ini karena pada contoh kasus di atas halaman tentang.html merupakan internal link
terlebih lagi file tentang.html masih dalam satu folder dengan file tautan.html.<br>
Penulisan alamat secara lengkap ini biasa juga disebut dengan penulisan alamat absolut.
Yaitu penulisan suatu alamat file dengan disertai nama websitenya.
</p>
<a href="#top">Kembali ke atas</a>
</body>
</html>

Membuat Link Dengan Gambar

Link tidak hanya bisa dikaitkan dengan teks, tapi ia juga dapat dikaitkan dengan gambar.
Tujuannya untuk menginformasikan kepada pengguna kemana selanjutnya link tersebut akan
mengarah.
Untuk contoh penerapan, coba edit file tentang.html menjadi seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tentang</title>
</head>
<body>
<h1>Tentang Website</h1>
<p>Pilih Menu</p>
<a href="index.html">Beranda</a> ||
<a href="tentang.html">Tentang</a> ||
 <a href="kontak.html">Kontak</a>
<p>Website ini dibuat untuk keperluan edukasi dan berbagi proyek open source. Untuk
mendownload proyek-proyek open source dari website kopiding.in, klik gambar di bawah
ini</p>
<a href="https://github.com/Kopidingin" target="_blank" title="Link GitHub
Kopiding.in"><img src="github-icon.svg" width="100px" height="100px"></a>
</body>
</html>
Pada kode di atas kita masukkan gambar logo github dengan menggunakan tag <img> yang
selanjutnya diapit oleh elemen <a>.

Hasilnya:

Membuat Link Untuk Memanggil Fungsi Javascript

Link juga dapat digunakan untuk memanggil fungsi javascript. Pemanggilan fungsi ini
biasanya dilakukan dengan atribut event seperti onclick, onmouseover, onmouseout, dan
lain-lain.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML 5</title>
</head>
<body>
<p>
<a href="#" onclick="alert('Selamat Datang')">Klik di sini</a>
</p>
</body>
</html>

Membuat Link Untuk Mengirim Email

Link juga dapat digunakan untuk mengirim email. Untuk membuatnya ganti URL tujuan dari
link dengan mailto dan selanjutnya diikuti dengan alamat email yang akan menerima email.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML 5</title>
</head>
<body>
<p>
Jika ingin bertanya sesuatu bisa hubungi saya di sini:
<a href="mailto:alamat@email.com">Kirim Email</a>
</p>
</body>
</html>
Ketika link di atas diklik maka selanjutnya secara otomatis akan membuka aplikasi email
yang secara default terpasang pada pc. Contoh pada penerapan di bawah ini akan membuka
aplikasi Thunderbird.

Membuat Link Untuk Mengunduh File

Link sering juga digunakan untuk link download atau unduh file. Cara membuatnya sangat
mudah.
Hanya perlu memasukkan alamat file yang akan didownload. Bila file unduhan berada satu
lokasi dengan file dari halaman website saat ini, maka kita tinggal saja tuliskan nama file
beserta ekstensinya.
<!DOCTYPE html>
<html>
<head>
<title>Download File</title>
</head>
<body>
<p>
Unduh file di sini
<a href="download.zip">Download</a>
</p>
</body>
</html>
Sedangkan jika berada di lokasi yang berbeda, maka tuliskan alamat url-nya beserta nama
berkas dan ekstensinya secara lengkap.

Mengubah Style Default dari Link

Nah, sesuai janji kita akan coba buktikan bahwa style default dari hyperlink ini bisa diubah.
Buat file baru dengan nama index.html. Selanjutnya salin kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Beranda</title>
</head>
<body>
<h1>Selamat Datang di Beranda!</h1>
<p>Pilih Menu</p>
<a href="index.html" style="color: red;">Beranda</a> ||
<a href="tutorial.html" style="color: blue; text-decoration: none;">Tutorial</a> ||
<a href="blog.html" style="background-color: pink;">Blog</a> ||
<a href="tentang.html" style="color: black; background-color: yellow;">Tentang</a> ||
<a href="kontak.html" style="color: white; background-color: green; text-decoration:
none;">Kontak</a>
</body>
</html>