BAB 1

TEKNOLOGI DAN FORMAT TEKS APLIKASI WEB

Aplikasi web (Word Elektric Word) adalah suatu aplikasi yang berbentuk klien/server yang
dapat membentuk halaman – halaman web berdasarkan permintaan pengguna. Klien adalah pemakai
yang meminta halaman web, sedangkan server adalah penyedia layanan yang melayani permintaan
dari klien. Web dapat diakses oleh berbagai platform dengan menggunakan browser, misalnya
internet Explorer, Mozilla, Opera dan lain-lain.
Proses pengaksesan suatu web yaitu klien melakukan permintaan suatu halaman web kepada server,
kemudian server akan mencari halaman yang diminta dan mengembalikannya dalam bentuk kode-
kode HTML. Kode-kode HTML tersebut akan diunduh oleh komputer klien, kemudian akan
diterjemahkan oleh browser menjadi suatu tampilan halaman web.

A. Teknologi Aplikasi Web

Aplikasi web diterjemahkan sebagai aplikasi yang diakses menggunakan web browser melalui
jaringan internet atau intranet. Ada beberapa persyaratan untuk membangun suatu aplikasi web,
diantaranya adalah memilih arsitektur dan mengembangkan desain aplikasi web.
Dalam membangun suatu aplikasi web diperlukan pemilihan teknologi yang tepat guna merancang
aplikasi web, distribusi dan intergrasi sistem arsitektur yang memadai. Aplikasi web merupakan suatu
perangkat lunak komputer yang dikodekan dalam bahasa pemprograman yang mendukung perangkat
lunak berbasis web, seperti HTML, JavaScript, CSS, Ruby, Python, Php, dan Java.

1. Konsep World Wide Web (WWW)

World Wide Web (WWW) dikenal sebagai web yaitu merupakan sistem dokumen Hypertext
yang dapat diakses melalui internet.

2. Teknologi Aplikasi web

Dalam teknologi aplikasi web, beberapa aspek dapat digunakan sebagai dasar untuk teknologi
aplikasi web, diataranya paradigma pemprograman, aspek distribusi, dan aspek teknologi.

3. Macam-macam Browser
a. Flock
Flock merupakan browser sosial internasional dunia pertama yang berbasis pada Firefox.
Flock memiliki fitur-fitur untuk berkomunitas sosial di internet sambil browsing.
b. Google Chrome
c. Internet Explorer
d. Links
e. Mozilla Firefox
f. NetScape
g. Opera
h. Safari

4. Konsep Web Server

Web server merupakan sebuah software yang menberikan layanan berbasis data dan
berfungsi menerima permintaan dari HTTP (Hipertex Transfer Protocol) atau HTTPS pada
klien yang dikenal dan biasanya disebut web browser. Web browser kembali hasilnya dalam
bentuk beberapa halaman web dan pada umumnya akan berbentuk dokumen HTML. Web
 server akan mengirim data HTML kepada permintaan web browser sehingga akan terlihat
seperti sebuah tampilan website. Fungsi utama web server adalah untuk melakukan atau
transfer berkas permintaan pengguna melalui protokol komunikasi yang telah ditentukan.
Pemanfaatan web server berfungsi untuk mentransfer seluruh aspek pemberkasan dalam
sebuah halaman web termasuk yang di dalamnya berupa teks, video, gambar, atau banyak
lagi.

5. Macam – macam Software Web Server

a. Web Server Berbayar
Jenis-jenis web server berbayar (komersial) yang paling banyak digunakan, yaitu sebagai
berikut :
1. LiteSpeed
2. Microsoft Internet Information Services (IIS)

b. Web Server Gratis

Beberapa web server gratis yang paling banyak digunakan yaitu
1. Apache
2. Nginx
3. Apache Tomcat
4. Lighttd
5. AMPPS

6. Macam – macam Text Editor

Teks editor identik dengan sofware atau perangkat yang digunakan untuk mengetikkan
kode dalam pembuatan sebuah web. Pada dasarnya, text edttor merupakan tempat meletakkan
barisan – barisan kode. Software text editor yang sering digunakan untuk pemprograman web,
yaitu sebagai berikut :
a. Adobe Dreamweavere
b. ATPad
c. Crimson Editor
d. EditPad Lite
e. Netbeans
f. Notepad
g. Notepad++
h. Sublime Text

7. Tool Pengembang web

Tool (peralatan) identik dengan perangkat lunak yang atau software digunakan dalam
proses pengembangan wedsite. Tool dalam pengembangan aplikasi menjadi bagian penting
karena sangat membantu dan mempersingkat proses pengembangan. Berberapa tools
pengembang web yang sering digunakan, yaitu sebagfai berikut :
a. Adobe Edge Inspect (http://html.adobe.com/edge/).
b. Firebug (https://addons.mozilla.org./n-US/firefox/addon/firebug/).
c. Lorem Ipsum (http://www.lipsum.com/).
d. Favlcon Generator (http://tools.dynamicdrive.com/favicon/).
B. Penerapan Format Teks pada Halaman Web
HTML (Hypertext Markup Language) merupakan bahasa standar yang digunakan file seperti
pada halaman web. Adanya HTML ini dapat membantu Anda untuk membuat halaman-halaman web.
Protokol yang digunakan dalam komunikasi antara web server dan browser adalah HTTP. Dengan
HTML, browser dapat menerjemahkan bahasa HTML yang berupa kode-kode menjadi sesuatu yang
dapat dilihat dan dibaca oleh pengguna browser.

1. Stuktur Dasar HTML

Setiap halaman HTML minimal memiliki struktur dasar yang terdiri atas Tag DTD atau
DOCTYPE, tag html, tag head, dan tag body. Struktur-struktur tersebut sebagai hal mendasar dari
HTML, walaupun HTML tidak hanya berisi struktur tersebut.

a. DTD atau DOCTYPE

Tag paling awal dari HTML adalah DTD atau DOCTYPE. DTD adalah singkatan dari
Document Type Declaration. Fungsinya adalah untuk memberi tahu web browser bahwa dokumen
yang akan diproses adalah HTML. DTD memiliki banyak versi tergantung pada versi HTML yang
digunakan. Jika tidak menuliskan DTD, browser akan tetap menampilkan dan memproses halaman
web seperti tidak terjadi apa-apa. Namun, browser sebenarnya menjalankan halaman HTML pada
mode khusus yang disebut quirk mode.

b. Tag <html>
Tag <html> sebagai tag pembuka dari keseluruhan halaman web. Semua kode HTML harus
berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>.

c. Tag <head>
Elemen pada tag <head> umumnya berisi berbagai definisi halaman, seperti kode CSS,
JavaScript, dan kode-kode lainnya yang tidak tampil di browser.

d. Tag <title>
Tag <title> digunakan untuk menampilkan title dari sebuah halaman web. Title biasanya
ditampilkan pada bagian paling atas web browser.

e. Tag <body>
Tag <body> berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf,
tabel, link, gambar, dan lain-lain. Tag body ini ditutup dengan </body>. Sebagian besar waktu
dalam merancang web akan dihabiskan di dalam tag <body>. Perhatikan bahwa setiap tag akan
diakhiri dengan penutup tag.
Sebuah halaman web bisa memiliki ratusan bahkan ribuan baris, yang ditulis dengan berbagai tag
HTML. Dokumen HTML memiliki struktur dasar atau susunan file sebahai berikut :
 <html>
<head>
<title> Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.
</body>
</html>

2. Versi HTML
Ada berapa versi HTML dari awal hingga sekarang, yaitu sebagai berikut :
a. Versi HTML1
Versi HTML1 merupakan versi awal yang hanya dapat digunakan untuk membuat heading,
hypertext, cetak tebal (bold), cetak miring (italic),list, dan paragrafh.
b. Versi HTML2
Versi HTML2 dapat dikatakan sebagai awal untuk membuat sebuah web interaktif. Versi
HTML2 dirilis pada tanggal 14 Januari 1996 dengan beberapa penambahan fitur baru. Salah
satu fiturnya adalah form.
c. Versi HTML3
Versi HTML3dirilis pada tanggal 18 Desember 1997 (dikenal dengan HTML+). Salah satru
fitur pada masa ini adalah fitur tabel didalam paragraf.
d. Versi HTML4
Versi HTML4 diterbitkan 18 Desember 1997. Perubahan ini terjadi hampir semua perintah
HTML, seperti, table, image, Link, text, meta, imagemaps form, dan lain lain.
e. Versi HTML5
HTML5 merupakan versi yang diperbarui hingga sekarang. HTML5 dirilis pada tahun 2009
yang menjadi standart terbaru sebahgai proyek kerjasama antaraW3C (Word Wide Web
Consurtium) dan WHATG (Word Hypertext Aplication Technology Group).

Beberapa fitur baru HTML5 yang paling menarik sebagai berikut :

1) Video dan elemen audio untuk pemutaran.
2) Unsur kanvas untuk menggambar.
3) Elemen baru, seperti artikel, footer, header, dan nav.
4) Dukungan lebih baik untuk penyimpanan offline lokal.
5) Kontrol bentuk baru, seperti kalender, tanggal, waktu, URL, dan search.

3. HTML Head, Title, dan Body

Kesalahan akibat peletakan atau penggunaan tag HTML tidak akan meng akibatkan sistem
komputer menjadi rusak. Kesalahan tersebut hanya berakibat pada tampilan halaman web
tersebut. Jika ada tag HTML yang tidak diketahui dalam halaman web yang sedang diproses maka
web browser akan mengabaikannya seakan-akan tag tersebut tidak ada. Hal ini karena web
browser sengaja dirancang dengan kemampuan mengenali dan melaksanakan hanya beberapa tag
HTML dari keseluruhan tag standard W3C.

a. HTML
HTML merupakan dasar atau tulang punggung dalam pembuatan sebuah web. Penulisan tag
HTML adalah incasesensitive yang artinya <HTML> akan sama dengan <html> atau <Html>.
Selanjutnya, akan dibagi menjadi dua seksi, yaitu head dan body. Dalam setiap file HTML selalu
didahului dengan Tag <HTML>. Tag ini akan membuat web browser mencoba untuk membaca
file yang ada di dalam tag tersebut. untuk ditampilkan dalam web browser. Pada akhir baris, harus
selalu mengakhiri tag <HTML> dengan </HTML>. Sehingga akan kelihatan bahwa pada setiap
tag HTML akan selalu <html> dan diakhiri dengan </html>.

<!DOCTYPE HTML>
<html>
<head>
<title>Selamat Datang HTML</title>
</head>
<body>
<p>Halo dunia!</p>
<p><b>Tulisan tebal</b>, <i>tulisan miring<i>, <u>tulisan bergaris
bawah</u></p> </body>
</html>

b. Head
Header berfungsi sebagai tanda pengenal pada halaman yang akan dibuat. Untuk
mendefinisikan header dalam tag HTML maka lakukan penambahan <HEAD> dan </HEAD> tag
di bawah tag <HTML> sebagai berikut.

1. <html>
2. <head>
3. </head>
4. </html>

c. Title
Tag <title> berfungsi untuk membuat judul website. Sementara itu tag <head> berfungsi
untuk membuat kepala dokumen. Tag <title> harus diletakkan di dalam Tag <head>. Hasilnya
berupa teks yang ada di Tag <title> akan ditampilkan sebagai judul website. Tag <h1> berfungsi
untuk membuat judul artikel. H1 adalah ukuran judul terbesar di HTML. Sementara itu, Tag <p>
berfungsi untuk membuat paragraf. Guna memberikan nama atau judul pada halaman web yang
akan dapat digunakan.
Tag <TITLE> dan </TITLE>. Judul akan terlihat pada sudut kiri atas pada halaman web. Tag
<TITLE> akan berada di dalam Tag <HEAD>

d. Body
HTML element body menunjukkan konten sebuah dokumen. Isi dari sebuah dokumen HTML
yang akan ditampilkan pada jendela browser yang terdapat pada element <body>, sedangkan
informasi dan keterangan lainnya yang berkaitan dengan dokumen tersebut dapat ditulis pada
element <head>. Pada sebuah dokumen, hanya terdapat satu element <body>. Bagian body
merupakan bagian untuk menuliskan berbagai teks yang ingin tampilkan pada halaman web. Guna
mendefinisikan body harus diketikkan Tag <body> dan ditutup dengan tag </body> di bawah tag
header, sehingga akan terlihat seperti berikut.
 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Judul dokumen</title>
</head>
<body>Konten/Isi dari dokumen disini (diantara<body> dan </body>).
</body>
</html>

4. Tag Syntax dan Option

Pada dasarnya, HTML berisi kode-kode tertentu berbasis teks yang disebut "Tag" Tag bisa
artikan sebagai tanda khusus yang telah didefinisikan untuk menunjukkan kepada browser apa yang
harus ditampilkan kepada pengguna. Setiap tag memiliki arti dan tersendiri serta dituliskan saling
berpasangan. Tag pembuka dan penutup biasanya dibedakan oleh tanda slash (garis miring) yang
menunjukkan tag Denutup. Misalnya, Tag <b> dan </b>, yang akan menjadikan teks yang ada di
antara ab tersebut akan ditampilkan dalam format cetak tebal (bold). Selain itu, ada lagi ag <i> dan
</i> yang akan menjadikan teks, di antaranya sebagai cetak miring dan ontoh-contah tag lainnya.
Jenis-jenis syntax dan option HTML beserta fungsinya. san disajikan pada tabel berikut.

Jenis-Jenis Syntax dan Option HTML

Tag Dasar
No Nama Tag Fungsi
1 <! DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML
2 <html> Tag pembuka untuk membuat dokumen HTML
3 <head> Memberikan informasi tentang dokumen tersebut
4 <title> Membuat judul halaman yang nantinya akan ditampilkan di
browser
5 <body> Tempat dibuatnya semua konten website menggunakan HTML

Contoh penggunaan :

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Judul Pertama Saya</h1> <p>Paragraf
Pertama Saya.</p>
</body>
</html>
Priview :
Judul Pertama Saya

Paragraf Pertama Saya.

Tag Judul
No Nama Tag Fungsi
1 <h1> Membuat judul atau heding
s/d
<h6>

2 <hr> Memisahkan konten (biasanya ditampilkan garis pembatas)

Contoh penggunaan :
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

Priview :

This is heading 1
This is some text.
This is heading 2
This is some other text.
This is heading 2
This is some other text.
Tag Paragraf
No Nama Tag Fungsi
1 <p> Membuat paragraf
2 <br> Membuat garis baru /pindah baris
3 <pre> Memformat teks atau kalimat

Contoh penggunaan :
<!DOCTYPE html>
<html>
<body>
<p>Ini adalah sebuah paragraf yang berisi beberapa
kalimat. Saya sedang belajar HTML di SMK-BM
Sinar Husni. Saat ini sedang belajar paragraf.
</p>
<br> Contoh :
<p>
Rambut berantakan tak pernah disisir.
Orang melihat tertawa keseangan.
Pengangguran berserakan seperti pasir.
Kurang usaha dan keterampilan.
</p>
</body>
</html>

Priview :
Ini adalah sebuah paragraf yang berisi beberapa kalimat.
Saya sedang belajar HTML di SMK-BM Sinar Husni. Saat
ini sedang belajar paragraf.

Contoh :

Rambut berantakan tak pernah disisir.

Orang melihat tertawa keseangan.
Pengangguran berserakan seperti pasir.
Kurang usaha dan keterampilan.

Tag Style
No Nama Tag Fungsi
1 <style> Mendefenisikan informasi style untuk dokumen HTML
2 <background-color> Memberikan warna latar belakang
3 <font-family> Mengubah font pada teks
4 <color> Memberikan warna pada Teks
5 <font-size> Mengatur ukuran font
6 <text-align> Mengatur perataan teks
Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center;">Centered
Heading</h1>
<p style="text-align: center;">Centered
paragraph.</p>
</body>
</html>

Priview :
Centered Heading
Centered paragraph.

Tag Formating
No Nama Tag Fungsi
1 <b> Membuat teks tebal
2 <stong> Membuat teks penting
3 <i> Membuat teks miring
4 <em> Membuat teks ditekankan
5 <mark> Membuat teks ditandai
6 <small> Membuat teks kecil
7 <del> Teks dihapus
8 <ins> Teks dimasukkan
9 <sub> Teks subcsript
10 <sup> Teks superscript

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is_subscript and
^superscript</p>

</body>
</html>

Priview :
Tag gambar
No Nama Tag Fungsi
1 <img> Elemen untuk mendefinisikan gambar
2 <src> Atribut untuk menentukan URL gambar
3 <alt> Mendefinisikan teks gambar, jika gambar tidak dapat ditampilkan
4 <width-height> Menentukan ukuran gambar
5 < float > Properti untuk float image pada CSS
6 < map > Mendefenisikan gambar peta
7 <area> Mendefinisikan area atau daerah-daerah gambar pada peta
8 < picture> Menampilkan gambar yang berbeda untuk perangkat yang
berbeda

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>KEGIATAN MPLS</h2>

<p> Atribut alt harus mencerminkan

konten gambar, sehingga pengguna yang
tidak dapat melihat gambar mendapatkan
pemahaman tentang isi gambar :</p>

<img src="rapat.jpg" alt="rapat.jpg"

width="350" height="250">

</body>
</html>
Priview :

Tag Form
No Nama Tag Fungsi
1 <form> Membuat formulir untuk mengumpulkan input pengguna
2 <input> Membuat tipe inputan pada form yang akan dibuat
3 < textare > Elemen untuk mendefinisikan field input
4 <label> Memberikan label pada elemen input
5 < fielset> Mengelompokan elemen yang terdapat pada sebuah form
6 < select > Membuat input dengan pilihan yang berbentuk list drop
down
7 < optgroup > Mengelompokan beberapa pilihan pada daftar pilihan input
8 < option> Mendefinisikan opsi yang bisa dipilih
9 < button> Membuat button
10 < datalist> Membuat daftar pilihan untuk input data
11 < output> Menampilkan hasil dari hitungan

Contoh penggunaan :

<!DOCTYPE html>
<html>
<body>

<h2>Elemen daftar data<h2>

<p>Elemen daftar data menentukan daftar opsi
yang telah ditentukan sebelumnya untuk elemen
input.</p>

<form action="/action_page.php">
<input list="browsers" name="browser">
 <datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value-Safari">
</datalist>
<input type="submit">
<form>

<p><b>Note:</b>Catatan : Tag datalist tidak

didukung di Safari IE9 (dan sebelumnya).</p>

</body>
</html>

Colspan atau column span merupakan atribute HTML yang berfungsi untuk menggabungkan
beberapa kolom, sederhananya menggabungkan kolom ke samping.
Rowspan merupakan atribut HTML yang fungsi utamanya adalah menggabungkan beberapa baris,
sederhananya menggabungkan baris ke bawah.