Web 1 Semester 3.docx

Pertemuan 1
1.1. Konsep Dasar WEB
1. Pengertian WEB
World Wide Web (www) atau web adalah sebuah system penyebaran informasi melalui
internet. Informasi yang dikirimkan dapat berupa teks, suara (audio), animasi, gambar dan
bahkan dalam format video yang dapat diakses melalui sebuah software yang disebut
browser, seperti internet explorer, mozilla firefox, opera dan lain-lain.
2. Pengertian Internet
2. Internet merupakan kependekan dari kata “Internetwork”, yang berarti rangkain komputer
yang terhubung menjadi beberapa rangkaian jaringan. Sistem komputer terhubung secara
global dan menggunakan TCP/IP sebagai protokol.
3. Fasilitas Internet
Beberapa fasilitas dan layanan Internet yang saat ini sudah sangat populer :
 Layanan File Transfer Protocol yaitu layanan yang memungkinkan pengguna
bertukar, menyalin, dan menempatkan file data di Internet.
 Layanan E-mail yaitu layanan yang memungkinkan pengguna mengirim dan
menerima pesan dalam bentuk surat elektronik.
 Layanan Internet Relay Chat (IRC) atau Chatting yaitu layanan yang memungkinkan
pengguna berkomunikasi dan berinteraksi secara langsung dengan pengguna
internet lainnya
 Layanan World Wide Web(WWW) yaitu layanan yang memungkinkan pengguna
melakukan surfing internet untuk memperoleh suatu data atau informasi tertentu.
 Ghoper yaitu Layanan pencarian file dan informasi
 Telnet yaitu Layanan interaksi secara remote antar komputer yang terhubung di
internet
 VoIP yaitu Layanan komunikasi suara
4. Jenis-jenis WEB
Dalam Pengelompokan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat atau
stylenya dan bahasa pemrograman yang digunakan. Berdasarkan sifat atau style-nya:
A. Web Statis
Merupakan website yang content-nya sangat jarang diubah. Bahasa pemograman yang

digunakan adalah HTML dan belum memanfaatkan database. Misalnya: web profile
organisasi.
B. Web Dinamis
Merupakan yang menyediakan content atau isi yang selalu berubah-ubah setiap saat.
Bahasa pemograman yang digunakan antara lain PHP, ASP, .NET dan memanfaatkan
database MySQL. Misalnya : unprimdn.ac.id
 Berdasarkan pada fungsinya, website terbagi atas:
1. Personal Website : Website yang berisi informasi pribadi seseorang.
2. Commercial Website : Website yang dimiliki oleh sebuah perusahaan yang bersifat
bisnis.
3. Government Website : Website yang dimiliki oleh instansi pemerintahan,
pendidikan yang bertujuan memberikan pelayanan kepada pengguna
4. Non-Profit Organization website : Dimiliki oleh organisasi yang bersifat non-profit
atau tidak bersifat bisnis.
 Berdasarkan bahasa pemrograman yang digunakan:
1. Server Side : Merupakan website yang menggunakan bahasa pemrograman yang
tergantung kepada tersedianya server. Seperti PHP, ASP, .NET dan lain sebagainya.
Jika tidak ada server, maka website yang dibuat dengan bahasa pemrograman
tersebut tidak dapat berfungsi sebagaimana mestinya.
2. Client Side : Website yang tidak membutuhkan server dalam menjalankannya, cukup
diakses melalui browser saja. Misalnya HTML.
5. Elemen dan Komponen Website
1. Title
Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.
2. Nama Domain
Nama domain adalah nama alias dari sebuah website. Nama domain disewa dari
pencatat/register domain per tahun. Domain digunakan agar manusia mudah untuk
mengingat nama sebuah website. Kadangkala nama domain juga mewakili nama sendiri,
nama brand, produk maupun perusahaan. Contoh: www.unprimdn.ac.id.
3. Alamat URL
URL singkatan dari Uniform Resource Locator. Jika sebuah halaman web kita diibaratkan
dengan rumah, maka URL ini adalah alamat lengkap rumah kita. Letaknya ada di addressbar

browser. Setiap Halaman web memiliki url yang unik dan berbeda. Format URL bermacam -
macam. Namun, semuanya selalu diawali dengan nama domain website tersebut.
4. Link/tautan
Jika kita ibaratkan lagi bahwa sebuah halaman web adalah rumah, maka link atau tautan ini
adalah pintu/gerbang/lorong yang menuju ke halaman lain baik itu yang masih satu web
maupun halaman di web yang berbeda. Pengarahan link diatur dalam kode html <a
href=”alamat url halaman website tujuan”>Anchor teks/ Teks yang dilink</a>.
5. Header
Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan
deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs.
6. Konten/Isi
Konten atau isi sebuah situs berupa informasi dan artikel yang biasanya terletak dibagian
tengah. Artikel yang sedang anda baca ini juga adalah bagian dari konten. Konten adalah
bagian terpenting dari sebuah website. Konten di halaman utama sebuah web biasanya
adalah daftar posting.
7. Sidebar
Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten.
Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website. Sidebar diisi
dengan widget-widget. Keberadaan sidebar ini bersifat opsional sesuai keinginan dan
desain web masing-masing. Ada yang hanya satu kolom(tanpa sidebar), ada yang hanya
satu di sebelah kanan ataupun kiri, dan ada juga yang dikedua sisi memiliki sidebar.
8. Widget
Widget adalah sebuah daerah pada website yang isinya berupa informasi tertentu dan
memiliki fungsi tertentu pula. Widget tidak harus terletak pada bagian sidebar. Widget juga
bisa terletak pada bagian atas posting, footer bahkan header (walaupun sangat jarang).
9. Footer
Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah
sebagai kaki dan berisi informasi hak cipta, kepemilikan, link tambahan, sumber daya,
sponsor dan kredit sebuah website bahkan menampilkan widget.
10. Navbar
Navbar adalah kependekan dari Navigation bar. Navbar merupakan bagian website yang
biasanya terletak di bagian paling atas dan bersifat melayang/fixed (Selalu terlihat walaupun
di scroll). Navbar berfungsi untuk mempermudah navigasi sebuah situs. Biasanya berisi link-
link penting yang mungkin dikunjungi dalam situs itu.

11. Menu
Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman
tertentu di sebuah website. Secara fungsi hampir sama dengan navbar yaitu untuk
mempermudah navigasi di web. Namun, teknisnya sedikit berbeda karena biasanya menu
tidak melayang. Menu biasanya terletak di bawah atau di atas header.
12. Breadcrumb
Breadcrumb merupakan sebuah elemen website berbentuk memanjang yang isinya adalah
informasi tentang letak, posisi dan atau jalur halaman yang sedang dikunjungi dalam
website itu. Breadcrumb biasanya hanya ada di halaman spesifik/single seperti halaman
posting dan sejenisnya. Biasanya terletak di atas judul posting.
13. Form
Form dalam bahasa Indonesia disebut formulir. Sebagaimana formulir kertas, form pada
website juga berfungsi untuk penginputan data dari pengakses website baik itu yang
bersifat wajib maupun opsional. Form pada website memiliki berbagai cara input seperti
Textfield, Password, ComboBox, Textarea, Radio, Checkbox, Button dan lain-lain.
14. Sharing button bar (Bar tombol berbagi)
Sharing button bar adalah tempat dimana berbagai jenis tombol berbagi ke media sosial
berada. Tombol berbagi ini berfungsi untuk membagikan posting ataupun isi pada halaman
yang dikunjungi ke media sosial pengunjung. Tombol yang paling sering ada adalah tombol
like facebook, tweet Twitter dan lain sebagainya.
15. Popup
Popup adalah sebuah jendela yang berisi informasi tertentu yang ingin disampaikan oleh
pemilik situs. Ketika muncul jendela popup maka elemen lain di halaman website itu tidak
akan berfungsi sebelum popup itu ditutup lagi. Ketika sebuah jendela popup muncul,
biasanya elemen lain di halaman situs itu tertutupi warna hitam transparan.
6. Tema dan Tujuan Pembuatan Website
Tema dan tujuan pembuatan website dibedakan menjadi 7 kategori :
1. E-Commerce(Electronic Commerce)
Proses hubungan dagang bisnis ke bisnis, memudahkan pembelian atau penjualan antar
perusahaan-perusahaan, shoping online. Proses pembayaran menggunakan Online
Processing Credit Card, Money Transfer atau Cash on Delivery.
2. Alat Pemasaran (Marketing Tool)
Situs ini menampilkan informasi produk atau jasa dari suatu perusahaan untuk menjaring
minat konsumen. Sifatnya promosi, tampilannya simple tapi menarik. Situs ini tidak

menyediakan penjualan online, tetapi pengunjung diberi informasi dimana bisa
mendapatkan produk atau jasa yang dipromosikan.
3. E-Learning
Proses belajar mengajar dapat dilakukan secara online, tanpa harus bertatap muka antara
siswa dengan pengajar (Sekolah Virtual).
4. Nilai Tambah (Value Added)
Website hanya digunakan sebagai informasi tambahan. Biasanya memuat informasi umum
tentang perusahaan atau lembaga, terkadang dibiarkan tanpa updating berkala.
5. E-News
Berisi berita-berita yang dapat diakses di seluruh dunia. Informasinya pun tentu saja lebih
cepat dari berita yang dimuat koran atau majalah konvensional.
6. Komunitas
Situs ini mewadahi pengguna untuk bisa bertukar informasi atau bahkan berdiskusi melalui
Forum online.
7. Personal
Berisi tentang informasi pribadi seseorang.

1.2. Arsitektur Web
1. Pengertian Arsitektur Web
Arsitektur Website adalah suatu pendekatan terhadap desain dan perencanaan situs yang, seperti
arsitektur itu sendiri, melibatkan teknis, kriteria estetis dan fungsional. Seperti dalam arsitektur
tradisional, fokusnya adalah benar pada pengguna dan kebutuhan pengguna. Hal ini memerlukan
perhatian khusus pada konten web, rencana bisnis, kegunaan, desain interaksi, informasi dan
desain arsitektur web. Untuk optimasi mesin pencari yang efektif perlu memiliki apresiasi
tentang bagaimana sebuah situs Web terkait dengan World Wide Web.
2. Komponen arsitektur aplikasi web dasar yaitu:
 Client : melakukan request atau akses halaman, contoh: web browser
 Firewall : software yang mengatur jaringan internet dengan LAN perusahaan
 Proxy : menyimpan halaman web pada cache
 Web server: pendukung protokol web untuk memproses permintaan client.
 Database server: menyediakan data dalam bentuk terstruktur
 Media server: content streaming data besar yang tidak terstruktur
 Content management server: menangani content untuk melayani aplikasi
 Aplikasi server: melayani permintaan akses dari client
Pattern adalah solusi umum yang dapat digunakan kembali pada permasalahan umum yang
sering terjadi pada software design. Design pattern bukan desain final yang dapat
ditransformasikan secara langsung kedalam kode. Ini hanyalah deskripsi atau template untuk
mengetahui bagaimana menyelesaikan permasalahan yang dapat digunakan pada berbagai
macam situasi yang berbeda. Design pattern dari object-oriented secara tipikal menunjukkan
hubungan dan interaksi antara kelas dan objek tanpa menspesifikasikan kelas atau objek dari
aplikasi final yang terlibat didalamnya.
Framework adalah sekumpulan fungsi, class, dan aturan-aturan. Berbeda dengan library yang
sifatnya untuk tujuan tertentu saja, framework bersifat menyeluruh mengatur bagaimana kita
membangun aplikasi. Framework memungkinkan kita membangun aplikasi dengan lebih cepat
karena sebagai developer kita akan lebih memfokuskan pada pokok permasalahan sedangkan
hal-hal penunjang lainnya seperti koneksi database, form validation, GUI, dan security;
umumnya telah disediakan oleh framework. Disamping itu dengan aturan-aturan yang jelas dan
harus dipatuhi, aplikasi kita lebih solid, more readable, dan kolabarasi dalam tim dapat lebih
mudah dilaksanakan.
3. Model-View-Controller atau MVC
Model-View-Controller atau MVC adalah sebuah metode untuk membuat sebuah aplikasi web
dengan memisahkan data (Model) dari tampilan (View) dan cara bagaimana memprosesnya
(Controller). Dalam implementasinya kebanyakan framework dalam apilaksi website adalah

berbasis arsitektur MVC. MVC memisahkan pengembangan aplikasi berdasarkan komponen
utama yang membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan
bagian yang menjadi kontrol dalam sebuah aplikasi web.
 Bagian dari MVC :
1. Model, Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang
membantu seseorang dalam pengelolaan basis data seperti memasukkan data ke basis
data, pembaruan data dan lain-lain.
2. View, View adalah bagian yang mengatur tampilan ke pengguna. Bisa di katakan berupa
halaman web web.
3. Controller, Controller merupakan bagian yang menjembatani model dan view.
Controller berisi skrip-skrip php yang berfungsi untuk memproses suatu data dan
mengirimkannya ke halaman web.
Dengan menggunakan metode MVC maka aplikasi akan lebih mudah untuk dirawat dan
dikembangkan. Untuk memahami metode pengembangan aplikasi menggunakan MVC
diperlukan pengetahuan tentang pemrogram berorientasi objek (Object Oriented Programming).
Ilustrasi aliran proses MVC dapat dilihat seperti gambar berikut ini:
 Jenis MVC pada website
1. Server Side MVC, Server Side MVC biasa terjadi pada aplikasi web tradisional, yang
tidak melibatkan client side seperti Javascript, Java applet, Flash, dan lain-lain. Server
Side MVC menyerahkan keseluruhan proses bisnis pada server, aplikasi pada sisi
pengguna hanya dapat menerima. MVC jenis ini kadang-kadang disebut juga dengan
nama Thin Client.
2. Mixed Client Side and Server Side MVC, Pada Mixed Client Side and Server Side
MVC 1 client tidak menggunakan model sebagai jembatan untuk melakukan komunikasi
pada server, dibandingkan dengan Server Side MVC, arsitektur ini memiliki tingkat
kompleksitas yang lebih tinggi karena lebih banyak komponen yang terlibat. Untuk
selanjutnya arsitektur ini disebut, dengan Mixed MVC 1. Pada Mixed Client Side and

Server Side MVC 2, client menggunakan model sebagai jembatan untuk melakukan
komunikasi pada server, dibandingkan dengan arsitektur MVC yang lain, arsitektur ini
memiliki tingkat kompleksitas yang paling tinggi karena lebih banyak komponen yang
terlibat, sehingga membutuhkan sumber daya yang lebih besar pula. Untuk selanjutnya
arsitektur ini disebut dengan Mixed MVC 2.
3. Rich Internet Application MVC, Application MVC Rich Internet Application (RIA)
disebut juga dengan nama Fat Client, merupakan aplikasi web yang memiliki
kemampuan dan fungsi hampir seperti aplikasi desktop. RIA pada sisi client, memiliki
mesin untuk mengambil data yang berada pada server, sehingga pada client terdapat
bagian MVC sendiri dan hanya membutuhkan bagian model pada sisi server.

Pertemuan 2
1.1. Definisi HTML
1. Pengantar
HTML merupakan kependekan dari Hyper Text Markup language yang merupakan bahasa yang
digunakan untuk membuat suatu halaman web. Dokumen HTML adalah file teks murni yang
dapat dibuat dengan editor teks apapun. Dokumen ini dikenal sebagai web page. dokumen
HTML merupakan dokumen yang disajikan dalam browser web server. Dokumen ini umumnya
berisi informasi ataupun interface aplikasi di dalam internet.
Hypertext Markup Language atau biasa disebut HTML adalah bahasa standar pemrograman
untuk membuat suatu website yang bisa diakses dengan internet. Dengan kata lain halaman
website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan kemudian
diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html merupakan standar
pembuatan website secara luas agar laman website dapat ditampilkan pada layar komputer.
HTML disusun dengan kode dan simbol tertentu yang dimasukkan ke dalam sebuah file atau
dokumen. Jadi setiap membuka website apapun dengan menggunakan browser maka web
tersebut dibuat dengan menggunakan HTML.
Dari singkatan hypertext markup language itu sendiri kita bisa mengetahui makna dari html.
Hypertext adalah suatu metode yang digunakan untuk berpindah laman web ke laman lain yang
terlink atau terhubung baik berupa suatu tulisan atau simbol pada laman website.
Istilah markup pada html sendiri diartikan sebagai suatu hal yang dilakukan tag html terhadap
teks yang berada didalamnya, misal jika mengetik suatu teks dengan tanda tag <b> maka teks
tersebut akan muncul sebagai teks dengan huruf tebal atau bold pada suatu laman website.
Simbol atau tag html tersebut ditulis pada laman html yang sudah disediakan pada dashboard
website pada umumnya. Sementara language dalam html adalah bahasa pemrograman atau script
yang disusun dari tag-tag tertentu yang nantinya akan diterjemahkan kedalam teks atau visual
yang dapat dilihat pada website.
2. Fungsi
HTML yang dikenal sebagai bahasa pemrograman dalam ilmu komputer memiliki beberapa
fungsi, diantaranya adalah sebagai berikut:
1. Fungsi utama html yang diketahui adalah untuk membuat suatu halaman website yang
bisa dibaca dan dipahami oleh pengguna dengan lebih mudah. Seluruh laman website
yang ada dalam internet dibuat dengan html dan tidak ada pengecualian.
2. Menandai teks pada suatu laman, html ditulis pada suatu halaman dokumen dengan tag
atau simbol tertentu dimana simbol dan tag tersebut akan menandai teks menjadi tebal,

miring, bergaris tebal dan lain sebagainya. Misal jika kita membuat suatu teks menjadi
teks miring atau italic, dalam laman html dituliskan kode <i>, <b> untuk teks tebal dan
<u> untuk teks bergaris bawah.
3. Sebagai dasar website, website yang dibuat tentunya memiliki beberapa fitur yang dibuat
dengan menggunakan java script (untuk mengatur perilaku web), implemetasi bahasa
pemrograman server PHP, dan mendesain web menggunakan CSS. Semua bahasa
tersebut dapat diaplikasikan jika web memiliki bahasa html sebagai dasarnya.
4. Menampilkan tabel, gambar, video, dan lainnya. Biasanya dalam website atau blog kita
tidak bisa langsung meletakkan tabel, gambar maupun video oleh sebab itu komponen
tersebut diletakkan pada web dengan menggunakan bahasa html.
5. Menandai elemen dan membuat online form, html juga berfungsi untuk menandai bagian-
bagian dalam website diantaranya header, main, footer, navigation dan lain sebagainya.
Selain itu html juga biasanya digunakan sebagai bahasa dalam membuat suatu online
form atau formulir digital.
1.2. Sejarah dan Perkembangan Versi HTML
1. Sejarah HTML
Markup language atau yang kini dikenal sebagai html awalnya diciptakan oleh suatu perusahaan
penjual perangkat keras dan lunak yakni IBM atau International Bussiness Machines. Sekitar
tahun 1980, IBM menciptakan sebuah bahasa yang menggabungkan tag atau simbol dengan teks
dalam sebuah dokumen.
Bahasa yang diciptakan oleh IBM tersebut dikenal dengan sebutan markup language atau
Generalized markup language (GML). Selanjutnya ditahun 1986, ISO atau International
Standart Organization mengeluarkan pernyataan bahwa GML yang kemudian diubah istilahnya
menjadi SGML (Standart Generalized Markup Language) ditetapkan sebagai standar dalam
membuat berbagai dokumen yang bisa membantu dalam bisnis maupun pekerjaan lainnya.
Di tahun 1989, Tim Berners Lee dari organisasi European Organization for Nuclear Research
(CERN) mencetuskan ide untuk mencptakan suatu skrip bahasa pemrograman pada suatu
dokumen yang kemudian dikenal sebagai html.
Html sendiri adalah bagian dari SGML ( Standard Generalized Markup Language) bahasa yang
awalnya bahasa yang sebelumnya banyak dipakai di dunia percetakan dan penerbirtan dan Tim
Berners Lee diketaui sebagai orang yang menciptakan html. Saat ini penggunaan dan
pengembangan html diatur oleh World Wide Web Consortium (W3C) dan versi terakhir dari
html yang sekarang digunakan adalah html5 dimana jenis html ini memiliki fitur yang lebih baik
dari versi html sebelumnya.
2. Perkembangan Versi HTML
1. HTML v1.0

Versi pertama dari HTML ini adalah pionir dari perkembangan HTML. Tidak heran jika versi ini
memiliki banyak sekali kelemahan termasuk tampilannya yang masih sangat sederhana. HTML
versi 1.0 ini sudah mampu mendukung peletakan image pada dokumen tanpa adanya wrapping,
heading, hypertext, paragraph, cetak tebal dan miring pada penulisan text.
2. HTML v2.0 (24 November 1995)
HTML versi 2.0 adalah pionir dari web interaktif seperti yang kita temukan saat ini.
Dibandingkan dengan versi pertama, struktur HTML lebih tertata rapi dan mampu menampilkan
form dokumen. Dengan adanya form tersebut, kita bisa memasukkan alamat, nama, saran dan
kritik pada suatu dokumen.
3. HTML v3.0
Jika dibandingkan dengan kedua versi HTML sebelumnya, HTML v3.0 tidak memiliki umur
yang lama. Itu disebabkan karena ada versi terbaru dari versi 3, yaitu versi 3.2. Di versi 3.0,
HTML sudah bisa dipergunakan untuk meletakkan tabel dan gambar. Fitur terbaru dari HTML
3.0 juga mampu untuk mendukung penggunaan rumus matematika pada dokumennya.
4. HTML v3.2 (14 Januari 1996)
HTML versi ini adalah pembaruan dari versi 3.0. Hingga saat ini, jenis HTML ini adalah yang
paling sering dipergunakan. Versi ini dipublikasikan dan versi pertama yang dikembangkan serta
distandarisasi khusus oleh W3C. Versi 3.2 ini pada awalnya disebut dengan Wilbur sebelum
dikenal dengan nama HTML versi 3.2.
Fitur yang ada di versi ini diantaranya adalah gambar untuk background, tabel, style,
frame, hingga teks di sekeliling gambar. Jika di versi sebelumnya, kita hanya bisa menggunakan
HTML saja untuk pembuatan dokumen namun di versi ini tidak. Artinya, kita bisa
menggunakan script di luar HTML untuk kinerja HTML yang lebih baik atau untuk tujuan
tertentu. Beberapa script HTML yang bisa dipergunakan diantaranya adalah Javascript dan
VBScript.
5. HTML v4.0 (18 Desember 1997)
Dibandingkan versi sebelumnya, versi ini hadir dengan banyak perubahan dari v3.2. Beberapa
diantaranya ada di tabel, link, image, text, meta, form dan imagemaps.
6. HTML v4.01 (5 Mei 2000)
Setelah ada versi 4.0, terdapat versi 4.01 yang merupakan revisi dari versi sebelumnya. Di versi
ini, ada perbaikan kesalahan minor (kecil). Dari struktur pada HTML yang ada di versi ini,
membuat HTML v4.01 menjadi standarisasi elemen serta atribut script XHTML 1.0.
7. HTML v5.0 (28 Oktober 2014)

Bisa dikatakan, versi 5.0 dari HTML adalah versi paling canggih dan paling stabil dibandingkan
versi sebelumnya. Pembaharuan ini baru diperkenalkan pada tahun 2009. Versi terbaru ini
dikembangkan lagi pada tanggal 4 Maret 2010 oleh W3C dan IETF (Internet Engineering Task
Force). IETF sendiri merupakan organisasi yang sudah menangani HTML sejak v2.0.
HTML v5.0 dikenal juga dengan nama HTML 5. Versi HTML ini adalah menjadi dasar untuk
pembuatan tampilan website dengan penggabungan HTML, CSS dan Javascript. Jika
dibandingkan dengan versi 4 dan XHTML, HTML4 ini adalah best practice dari kedua versi
tersebut.
HTML5 ini lebih sederhana. Misalnya untuk bagian doc tipe, type atribut, meta tag character set
(charset). Di HTML5 juga dilengkapi dengan fitur yang lebih baik. Beberapa fitur elemen seperti
untuk menggambar 2D, memutar multimedia dan kontrol form.
Selain fitur tersebut, ada beberapa keunggulan dari HTML5 ini diantaranya adalah cleaner
code (kode yang lebih sederhana) dan improve semantics.
Improve semantics ini berarti HTML5 memiliki perkembangan nilai semantik seperti di bagian
nav, header dan footer pada sebuah website. Dengan begitu bagian-bagian tersebut dapat
terdefinisi dengan baik dan memiliki maksud yang jelas. Perkembangan nilai dari HTML5 ini
juga membentuk machine readable format yang memungkinkan dokumen bisa terbaca dengan
baik oleh mesin.
3. Hubungan HTML, CSS dan Javascript
HTML tidak bisa dipisahkan dari CSS dan Javascript. Kedua bahasa frontend yaitu Cascading
Style Sheet (CSS) dan Javascript akan membantu HTML bekerja maksimal untuk membuat
website yang responsive. Keduanya juga bisa mengaktifkan fungsi lebih canggih dan
meningkatkan pengalaman user. Dapat dilihat pada gambar dibawah berikut bagaimana ilustrasi
hubungan HTML, CSS dan Javascript.

CSS sendiri memiliki fungsi yang berkaitan dengan style sehingga untuk mempercantik tampilan
website, perlu CSS. Sedangkan Javascript memungkinkan kita sebagai user untuk fungsionalitas
yang dinamis. Misalnya saja penambahan dan penggunaan galeri foto, pop-up dan slider.
Jadi, dari pengertian tersebut bisa dikatakan jika HTML adalah kita. Kemudian segala sesuatu yang
berkaitan dengan style seperti baju dan make up adalah CSS. Untuk melengkapinya, maka dibutuhkan
‘tingkah laku’ atau sikap dan sifat yang diibaratkan sebagai Javascript. Walaupun ketiganya berbeda,
namun ketiganya melengkapi satu dengan yang lainnya.
1.3. Software Editor HTML
1. Pengantar
Dasar dalam membuat website dapat dibuat oleh aplikasi text editor manapun. Namun, tidak ada
salahnya, jika kita mengutamakan HTML editor untuk melakukan pekerjaan ini. Tool ini dapat
digunakan untuk menambahkan fungsionalitas, mengecek error atau kesalahan, dan lain
sebagainya. Dengan mengaktifkan HTML editor, aktivitas dan pekerjaan menjadi lebih mudah,
seperti ketika menulis kode (tool ini akan meng-highlight syntax), menambahkan elemen dan
struktur HTML yang kerap digunakan, dan juga dalam menjalankan fitur autocompletion.
Teks yang menggunakan HTML editor juga dapat diterjemahkan ke bahasa lain, seperti CSS,
XML, atau JavaScript. Hanya saja, seperti yang kita tahu selama ini, tidak semua hal diciptakan
atau dibuat sama. Ada aplikasi text editor yang unggul di kemudahan penggunaan, tapi ada juga
yang unggul di jumlah fitur yang ditawarkan.
HTML editor merupakan tool yang sangat penting baik bagi developer pemula maupun yang sudah
berpengalaman. Meng-highlight syntax serta menambahkan elemen dan autocompletion HTML adalah
contoh dari fitur dasar HTML editor. Semua fitur yang ada di tool ini bertugas untuk memastikan kode
yang ditulis tetap berfungsi dan terhindar dari kesalahan penulisan. Sebagai contoh, editor akan
mengingatkan kita bilamana kita lupa memasukkan end tag </ di elemen kode.
2. Jenis Tipe Editor
Dalam merancang atau membuat suatu website, software editor memiliki 2 tipe editor yaitu:
a. WYSIWYG editor
b. HTML editor tekstual
A. WYSIWYG editor
WYSIWYG adalah akronim dari What You See Is What You Get jika diartikan maka artinya
adalah apa yang kamu lihat apa yang kamu dapatkan. WYSIWYG merupakan sebuah editor
yang memiliki kemampuan menghasilkan output yang sama seperti yang terlihat, seperti pada
microsoft word. Editor ini menyediakan editing interface yang menunjukkan tampilan kode di

halaman web yang aktif. Untuk menggunakan editor WYSIWYG, kita tidak perlu
memahami coding dan bahasa pemrograman lainnya – tool alternatif yang sangat cocok bagi
para developer pemula atau yang sama sekali tidak punya pengetahuan akan coding.
Beberapa jenis Editor WYSIWYG HTML :
1. Editor WYSIWYG pertama adalah TinyMCE Editor , Editor ini sudah banyak sekali
digunakan dan banyak perusahaan besar yang menggunakan editor ini, misalnya saja Bootstrap
dan Wordpress. Editor TinyMCE memberikan banyak fitur lengkap didalamnya. Akan tetapi
tidak semua fitur didalamnya bisa kita gunakan untuk yang gratisan (free), seperti tidak bisa
upload gambar, jika ingin menggunakan full fitur kalian harus membayar sesuai dengan paket
yang tersedia yaitu paket premium, pro, developer dan A La Carte.
2. Summernote Editor, editor ini sangat simple untuk digunakan dan tentunya sangat mudah juga untuk
cara instalasinya karena summernote Editor sudah memberikan dokumentasi tentang bagaimana cara
instalasinya. Software editor dapat dilihat pada link berikut https://summernote.org/

3. CKEditor, Editor ini lumayan simple akan tetapi memiliki fitur yang cukup lengkap, fitur
yang terdapat didalamnya seperti upload gambar, Drag dan Drop dan tentunya masih banyak
fitur lainnya. CKEditor menawarkan beberapa varian paket yang bisa dipilih yaitu paket
standard, Plus, Business Plus, Enterprise dan tentunya yang gratis yaitu paket Open Source.
B. HTML Editor Tekstual
Seperti namanya, HTML editor tekstual merupakan editor yang berbasis teks. Untuk
menggunakan tipe editor ini, kita harus paham HTML terlebih dulu. Pada umumnya sejumlah
fitur, termasuk file pembuka ataupun itu file single, seluruh proyek, atau beberapa proyek,
tersedia di semua editor. Ketika menggunakan editor berbasis teks, kita tidak dapat melihat
hasilnya secara langsung di situs yang aktif (live preview).
Dengan menggunakan tipe editor seperti ini, kita bisa lebih bebas dalam mengelola dan
melakukan personalisasi terhadap berbagai opsi dan lebih leluasa dalam mengoptimalkan
halaman website agar muncul di mesin pencari. Misalnya, kita bisa membuat halaman website
sesuai dengan anjuran Web Content Accessibility Guidelines (WCAG) sehingga orang-orang
yang tidak punya akses login dapat melihat dan membaca konten web kita.
Setiap orang punya kebutuhan dan keinginannya masing-masing. Ketika tiba saatnya memilih
platform untuk membuat dan mengonlinekan website, pastikan platform tersebut mampu
memenuhi berbagai kebutuhan kita dan juga website. Pada dasarnya tiap editor memiliki fungsi
yang sama. Namun, jika ditelaah lebih jauh, kita akan tahu bahwa ada editor yang menyediakan
representasi visual lebih banyak, ada juga yang menawarkan fitur tambahan untuk diinstall, dan
sebagainya.
Beberapa jenis HTML editor tekstual:
1. Atom

Atom diperkenalkan pada tahun 2014, dan sejak saat itu popularitasnya kian menanjak. Tool ini
bersifat gratis dan open source serta dikembangkan oleh GitHub team. Untuk fitur yang
ditawarkan, Atom menerapkan lisensi software gratis yang dikelola oleh GitHub community.
Meski gratis, Atom tetap ingin menjadi editor yang menawarkan pengalaman premium kepada
usernya, termasuk fleksibilitas dalam mengkostumisasikan software tersebut.
Atom diklaim sebagai salah satu text editor terbaik yang paling mudah dihack di abad ke-21 ini.
Kata mudah dihack sendiri bukan berkonotasi negatif, melainkan menunjukkan bahwa tool
mempersilakan siapa pun yang ingin berkontribusi dalam mengedit, mengembangkan, mengubah
atau mengganti, dan membagikan source code serta membuat fitur mereka sendiri demi kebaikan
dan kemajuan Atom. Tampilan Editor Atom dapat dilihat pada gambar dibawah ini:
Fitur unggulan
 Walaupun Atom telah dilengkapi dengan 81 fitur bawaan, kita masih bisa menambahkan
7.500 fitur. Bahkan kita boleh membuat fitur kita sendiri.
 Text Editor yang open-source. Keseluruhan editor Atom bersifat gratis dan open source
serta tersedia di GitHub.
 Atom kompatibel dengan Teletype, yang merupakan fitur penting jika kita ingin bekerja
sama dengan developer lainnya secara real time.

 Mendukung berbagai panel. Atom dapat membagi interface atau software antarmuka
menjadi banyak jendela (windows) sehingga kita bisa membandingkan dan menulis kode
secara berdampingan.
Penilaian desain
Atom menawarkan desain yang rapi dengan tampilan premium.
Mengapa developer memilih Atom?
 Kemudahan kustomisasi. Atom sangat mudah untuk dikustomisasikan. Selain itu, kita
juga bisa mengatur tampilan interfacenya dan menambahkan fitur penting lainnya.
Bahkan kita diperbolehkan untuk membuat fitur dan tema dari nol. Opsi lain, install pre-
made fitur dan tema yang tersedia di komunitas (community).
 Atom di Dev Mode. kita bisa mencoba menambahkan fitur baru ke sistem intinya.
 Integrasi Git dan GitHub.
 Edit lintas platform. Atom berfungsi di semua sistem operasi.
Dapat digunakan di: Windows, OS X, dan Linux (64-bit).
2. Notepad++
Notepad++ merupakan editor yang dikembangkan untuk perangkat berbasis Windows, dan user
Linux bisa menggunakannya via Wine. Software ini didistribusikan sebagai software gratis dan
repositorinya juga tersedia di GitHub. Sama seperti proyek community lainnya, Notepad++ juga
kompatibel dengan plugin pihak ketiga. Notepad++ sangat simpel dan sederhana serta ringan.
Untuk lebih praktisnya, tersedia juga versi mobile-nya. Tampilan Editor Notepad++ dapat dilihat
pada gambar dibawah ini:

Fitur unggulan
 Interface Notepad++ sederhana, ringan, dan cepat.
 Mendukung berbagai bahasa coding, mulai dari ActionScript, CSS, hingga visual basic.
 Sepenuhnya kompatibel dengan Windows. Jika ingin mengaktifkannya di sistem operasi
(OS) lain, dibutuhkan software tambahan.
Mengapa developer memilih Notepad++?
 Gratis.
 Dapat dikembangkan – kita bisa menambahkan plugin yang tersedia di komunitas atau
membuat plugin sendiri.
 Dapat dikustomisasikan – developer bisa melakukan personalisasi pada fitur dan interface
sesuai dengan keinginan mereka.
Penilaian desain
Notepad++ interface sangat minimalis. Untungnya, developer diperbolehkan untuk
mengkustomisasikannya lebih jauh.
Dapat digunakan di: Windows dan Linux (via Wine)
3. Sublime text editor
Sublime text editor merupakan satu dari sekian aplikasi text editor terbaik yang sayang untuk
dilewatkan. Software ini dikembangkan oleh sebuah perusahaan yang berbasis di Sidney dan

masuk dalam kategori freemium. Freemium berarti Sublime dapat digunakan secara cuma-cuma,
tapi kita harus membeli lisensinya jika ingin memanfaatkan semua fitur yang tersedia.
Sublime termasuk aplikasi text editor yang terus-menerus diperbarui. User diizinkan untuk
menginstall plugin yang tersedia di community atau membuat pluginnya sendiri. Sebenarnya,
menggunakan versi gratis Sublime saja sudah lebih dari cukup. Namun, apabila menginginkan
fitur yang lebih banyak, maka kita harus membeli lisensi berbayarnya. Tampilan sublime text
editor dapat dilihat pada gambar dibawah ini:
Fitur unggulan
 Sublime kompatibel dengan Python API yang memungkinkan plugin untuk
mengembangkan fungsionalitas defaultnya.
 Editing yang serentak. kita dapat melakukan perubahan di sejumlah area terpilih pada
waktu bersamaan.
 Lintas platform. Sublime tersedia di Windows, OS X, dan Linux. Developer hanya
memerlukan satu lisensi untuk menggunakan Sublime di komputer mana saja.
Mengapa developer memilih Sublime Text?
 Ekosistem API dan fitur yang powerful. Sublime menawarkan ribuan fitur (package)
yang tersedia dan juga dikembangkan oleh community. Fitur-fitur ini bersifat open
source.
 Editing terpisah. Developer dapat menggunakan berbagai monitor dan mengedit beragam
tipe kode di waktu bersamaan.
 Digunakan untuk apa saja. Fitur ini dapat digunakan untuk membuka file dengan
keystroke, mencari simbol, line, atau kata.

Penilaian desain
Interface Sublime Text unggul dari segi estetika.
Dapat digunakan di: Windows, OS X, dan Linux (32/64 bit).
4. Adobe Dreamweaver
Dikembangkan dan dikelola oleh perusahaan teknologi terbesar, Adobe Inc, Adobe
Dreamweaver merupakan tool editor premium yang powerful dan canggih. Software ini dapat
digunakan baik untuk pengembangan back-end maupun front-end. Sebagai software yang
closed-source, Dreamweaver dirancang untuk berfungsi di dalam ekosistem Adobe. Adobe
menyediakan bantuan, plugin, dan fitur untuk memastkan proses coding berjalan dengan baik.
Dreamweaver adalah salah satu editor yang menjalankan metode tekstual dan juga WYSIWYG.
Jadi, kita bisa memilih apakah ingin menulis code dengan menampilkan live presentasi atau cara
klasik, yakni tidak menggunakan live preview. Tampilan editor adobe dreamweaver dapat dilihat
pada gambar dibawah ini:
Fitur unggulan
 Dreamweaver memungkinkan kita untuk menulis kode di semua bahasa pemrograman
utama.
 Menjalankan mode tekstual editor dan juga WYSIWYG editor.
 Terintegrasi sepenuhnya dengan ekosistem software Adobe.
 Performa yang kuat serta support yang dapat diandalkan dari Adobe Inc.
Mengapa developer memilih Adobe Dreamweaver?

 Kode dan preview. Dengan begini, developer dapat menulis kode sambil melihat hasilnya
secara live di bagian end.
 Mengonfirmasi kode serta kemudahan akses halaman. Adanya keunggulan ini
memudahkan para developer untuk mematuhi Web Content Accessibility Guidelines
(WCAG).
 Akses ke cloud library. Tersedianya akses premium ke sejumlah aset di eksositem Adobe,
mulai dari warna, kata, grafis, layer, karakter, dan lain sebagainya.
Penilaian desain
Dreamweaver memiliki tampilan desain yang premium serta berkelas dan juga menarik. Tak
heran karena software ini buatan dari Adobe, perusahaan yang namanya sudah melambung tinggi
di industri kreatif.
Dapat digunakan di: Windows dan OS X.
Pada pertemuan ini, kita akan menggunakan dasar editor html bawaan dari windows, yaitu
notepad. Cara mengaktifkan notepad dengan shortcut : Tekan Logo windows pada keyboard
bersamaan dengan huruf R, maka akan muncul kotak dialog RUN setelah itu ketik notepad lalu
klik tombol OK. Dapat dilihat seperti tampilan gambar dibawah ini.
Dapat dilihat tampilan dasar editor notepad seperti bawah ini:

1.4. Pengertian Tag, Elemen dan Atribut Pada HTML
1. TAG
Tag berfungsi untuk memberi tahu kepada browser untuk apa sebuah text tersebut, apakah text
itu di tulis sebagai paragraf atau list dan juga sebagai link. Tag HTML di lengkapi dengan tag
pembuka < > dan penutup </ >. Dalam HTML, tanda ini dikenal dengan istilah tag.
Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag
penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup.
Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua
kurung siku:
“<” dan “>”.
Berikut adalah format dasar penulisan tag HTML:
<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>
Sebagai contoh, perhatikan kode HTML berikut :
<p> Ini adalah sebuah paragraf </p>
Keterangan:
 <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
 </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda
backslash(/)
Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” hal ini dan tetap
menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun hal ini memudahkan
kita, namun tidak disarankan.
HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>. Pada awal
kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag
agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML
mewajibkan huruf kecil untuk semua tag. Dalam HTML5, aturan ini kembali tidak diharuskan.
Akan tetapi kebiasaan web programmer saat ini adalah menggunakan huruf kecil untuk seluruh
tag.
2. ELEMEN
Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen
kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun
dokumen HTML dalam diagram HTML tree.

Pada diagram tersebut, terdapat tiga macam node yaitu: Node elemen, Node atribut, dan Node
teks. Elemen dibentuk dari tag pembuka, isi tag, dan tag penutup. Terkadang juga ditambahkan
beberapa atribut. Dapat dilihat seperti contoh penulisan script dibawah ini:
Pada contoh di atas, terdapat satu elemen <p> dengan atribut align="center" dan memiliki isi
berupa teks, yakni Hello World!.
Elemen tidak selalu berisi teks, kadan ia juga akan berisi elemen lain. Ini biasanya kita sebut
dengan nested element atau elemen di dalam elemen.
Bila digambarkan dalam bentuk kotak persegi, maka akan terlihat seperti ini:

Elemen HTML ada banyak jenisnya. Ada elemen khusus untuk teks, ada elemen untuk
multimedia, script, tabel, metadata, dan lain sebagainya.
3. ATRIBUT
Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai
modifier yang akan menentukan perilaku dari elemen. Dapat dilihat seperti contoh penulisan
script dibawah ini:
Atribut dapat ditambahkan pada elemen manapun. Ada juga elemen yang mewajibkan menggunakan
atribut seperti elemen <a>, <img>, <video>, dan lain sebagainya.

Pertemuan 3
3.1. Heading
Heading merupakan elemen atau tag HTML yang berfungsi untuk menunjukkan bagian penting
pada halaman web. Elemen tag heading ini memiliki enam tingkatan yang berurutan yaitu
<h1><h2><h3><h4><h5><h6> yang bias digunakan untuk menambah ke struktur halaman web.
Dapat diartikan juga Heading adalah sekumpulan kata yang menjadi judul atau sub judul dalam
dokumen HTML, dengan berbagai ukuran yang berbeda. Untuk menyusun Heading dan sub-
heading dengan HTML, kita akan menggunakan format heading yang telah disediakan.
Heading tulisan akan ditampilkan dengan huruf yang lebih besar dan ditebalkan. Heading juga
dimanfaatkan untuk menunjukkan bagian penting dari teks yang dituliskan. Setiap heading dalam
dokumen harus diberi tag tergantung pada kebutuhan teks tersebut.
Berikut mengenai fungsi dari Tag Heading H1, H2, H3, H4, H5, dan H6, di bawah ini :
1. Tag Heading <h1> : digunakan untuk judul utama dari dokumen. Tag ini sering juga
digunakan pada nama blog/website (jika berada pada homepage) dan akan berubah
menjadi <h2> pada halaman posting.
2. Tag Heading <h2> : digunakan sebagai sub <h1>. Tag ini sering juga digunakan pada
judul artikel blog (jika berada pada homepage) dan akan berubah menjadi <h1> pada
halaman posting.
3. Tag Heading <h3> : digunakan sebagai sub <h2>. Tag ini sering juga digunakan pada
sub-judul atau penjelasan dari judul artikel atau posting, dan bisa juga digunakan pada
judul widget.
4. Tag Heading <h4> : tag ini digunakan untuk judul artikel terkait, komentar atau bisa
juga digunakan pada judul widget.
5. Tag Heading <h5> : tag ini digunakan sebagai nama komentator atau nama pemberi
komentar.
6. Tag Heading <h6> : tag ini digunakan sebagai footer seperti "All Rights Reserved" atau
"Powered by Blogger" yang letaknya berada paling bawah.
Heading tidak memiliki atribut khusus. Biasanya menggunakan atribut globel.
Contohnya seperti:
 id untuk memberikan nama id unik. Biasanya ini akan digunakan oleh link, CSS, dan
Javascript;
 class untuk memberikan nama class yang akan dipakai oleh CSS;
 style untuk memberikan kode css secara langsung;
 title untuk menambahkan informasi tambahan; dan lain sebagainya.
Bentuk umum:

<h1>…</h1>
Contoh:
<h1> Belajar Heading </h1>
3.2. Paragraf
Paragraf merupakan serangkaian kalimat yang terdiri atas satu kalimat pokok dan beberapa
kalimat penjelas. Di dalam sebuah dokumen HTML, tentunya terdapat paragraf yang digunakan
untuk membangun sebuah wacana (artikel) atau tulisan di dalamnya. Cara membuatan paragraf
di HTML, dimulai dengan penggunaan tag <p> untuk membuat paragraph.
Sebuah paragraf di HTML ditandai dengan pasangan tag <p> dan tag </p>. Tag <p> menyatakan awal
suatu paragraf sedangkan akhir paragraf ditandai dengan tag </p>
Tag P (<p>) itu adalah singkatan dari paragraph. Jadi, pada dasarnya tag ini memang dirancang khusus
bagi para pembuat website untuk membuat paragraf. Dengan kata lain, <p> itu berfungsi untuk
membuat paragraf.
Pada tag <p> terdapat atribut align yang digunakan untuk menampilkan paragraf dengan rata kanan,
kiri, tengah ataupun kiri dan kanan.
Berikut ini nilai pada atribut align :
Nilai Fungsi Tampilan
Left Untuk meratakan heading ke kiri
Center Untuk meratakan heading ke tengah
Right Untuk meratakan heading ke kanan
Justify Untuk meratakan teks ke kiri dan
kanan
Bentuk umum: <p>…</p>
Contoh: Script Tag Paragraf
<p> “Pendidikan adalah senjata paling mematikan di dunia, karena dengan pendidikan, Anda dapat
mengubah dunia." (Nelson Mandela). Pendidikan merupakan hal terpenting dalam kehidupan, sebab
pendidikan selalu akan digunakan dalam menjalani kehidupan.</p>
Contoh: Script Tag Paragraf dengan atribut align

<p align="left"> “Pendidikan adalah senjata paling mematikan di dunia, karena dengan pendidikan,
Anda dapat mengubah dunia." (Nelson Mandela). Pendidikan merupakan hal terpenting dalam
kehidupan, sebab pendidikan selalu akan digunakan dalam menjalani kehidupan.</p>
3.3. Quotation dan Citation
Pada sebuah dokumen HTML, terkadang kita menemukan Quotation (kutipan) yaitu kutipan
pendek atau kutipan panjang. Kutipan adalah suatu kalimat yang berisi ide, pendapat atau
gagasan seseorang yang dianggap menarik yang diambil dari berbagai sumber.
Kalimat gagasan tersebut umunya diambil dari artikel, buku, majalah, kamus, ensiklopedia, dan
lain sebagainya. Pada dasarnya kita tentu pernah menggunakan kutipan untuk mengambil sumber
referensi atau acuan guna mendukung, memperkuat, menambah dan memperjelas tulisan atau
artikel.
HTML telah menyediakan tag – tag yang dapat digunakan untuk membuat sebuah kutipan. Berikut jenis-
jenis tag-tag Quotation (kutipan) di HTML yang terdapat pada sub topik.
3.3.1. Short Quotation
1. Short quotation dengan tag <q>
Tag <q> digunakan untuk mengutip kalimat yang pendek (kutipan pendek) yang akan disatukan
dengan text yang ada karena memiliki sifat inline element yang artinya kutipan pendek yang
terletak didalam baris (inline). Tag ini juga merupakan versi inline dari tag <blockquote>. Di
HTML, text yang berada diantara pasangan tag <q> …. tag </q> akan berada dalam tanda kutip
saat ditampilkan di web browser.
Adapun atribut yang ada pada tag <q> yaitu :
Atribut Nilai Fungsi
Cite URL Menentukan URL pada kutipan
Penambahan atribut cite didalam tag <q> mungkin kita perlukan untuk merujukkan sumber dari kutipan
tersebut dengan mereferensikan alamat URL dari teks yang dikutip.
Atribut cite berfungsi untuk mendefinisikan sumber dari quote yang kita ambil. Nilai pada atribut cite
tidak akan muncul di browser, tetapi itu dapat berguna untuk search engine untuk mendapatkan
informasi lebih mengenai quote (kutipan) tersebut.
Bentuk umum: <q>...</q>

Contoh:
<q>Menyelenggarakan pendidikan yang unggul di bidang socio-technopreneurship</q>
Contoh: Menggunakan atribut
<q cite="http://unprimdn.ac.id/pages/7-visi-dan-misi">Menyelenggarakan pendidikan yang unggul di
bidang socio-technopreneurship</q>
3.3.2. Long Quotation
2. Long quotation dengan tag <blockquote>
Tag <blockquote> digunakan untuk menuliskan kutipan teks yang panjang yang diambil dari
sumber lain sebagai referensi. Umumnya, elemen blockquote memiliki style teks dengan
indentasi yang agak rapat ke dalam. Kita dapat menggunakan CSS Margin property untuk
mengubah tampilan indentasinya.
Adapun atribut yang ada pada tag <blockquote> yaitu :
Cite URL Menentukan URL pada kutipan
Bentuk umum: <blockquote>...</blockquote>
Contoh:
<blockquote>Untuk menjawab dinamika perkembangan zaman serta tuntutan dan preferensi
stakeholder yang senantiasa berkembang, Universitas Prima Indonesia yang terletak di kota
Medan (bagian dari Sumatera Utara) dan menjadi pusat di regional Barat Indonesia,
mahasiswanya berasal dari keluarga multi etnis yang memiliki harapan anaknya menjadi orang
yang berjiwa wirausaha guna meningkatkan peran dan fungsinya dalam memajukan kehidupan
bangsa melalui potensi hebat, untuk melayani masyarakat dengan berbagai karakteristik dan
budaya sehingga merumuskan visinya menjadi: Unggul dalam Socio-
Technopreneurship</blockquote>
Contoh: Menggunakan atribut
<blockquote cite="http://unprimdn.ac.id/pages/7-visi-dan-misi">Untuk menjawab dinamika
perkembangan zaman serta tuntutan dan preferensi stakeholder yang senantiasa berkembang,
Universitas Prima Indonesia yang terletak di kota Medan (bagian dari Sumatera Utara) dan
menjadi pusat di regional Barat Indonesia, mahasiswanya berasal dari keluarga multi etnis yang
memiliki harapan anaknya menjadi orang yang berjiwa wirausaha guna meningkatkan peran dan
fungsinya dalam memajukan kehidupan bangsa melalui potensi hebat, untuk melayani

masyarakat dengan berbagai karakteristik dan budaya sehingga merumuskan visinya menjadi:
Unggul dalam Socio-Technopreneurship</blockquote>
3.3.3. Abbreviation
3. Abbreviation dengan tag <blockquote>
Tag <abbr> adalah singkatan dari Abbreviation. Abbreviation berarti singkatan dan sesuai
dengan namanya, ditujukan untuk text yang berbentuk singkatan seperti "UNPRI", ”NASA”,
”HTML”, atau ”HTTP” maupun singkat yang lainnya. Penggunaan tag ini biasanya juga
menyertakan atribut title.
Atribut title berfungsi untuk menampilkan kepanjangan dari singkatan yang ada pada tag
<abbr>. Isi dari atribut title hanya ditampilkan ketika mouse berada diatas tag <abbr> atau mouse
pointer diarah pada singkatan text.
Tag <abbr> termasuk kedalam tipe tag inline, yang akan mengikuti alur text yang ada.
Bentuk umum: <abbr>...</abbr>
Contoh:
<p>Fakultas Teknik Ilmu Komputer<abbr title="Universitas Prima Indonesia">
UNPRI</abbr> Gelar Kuliah Umum Secara Virtual</p>
3.3.4. Address
4. Address dengan tag <address>
Address artinya alamat. HTML element address digunakan untuk menunjukkan kontak informasi yang
berkaitan dengan element induknya (element yang menaunginya).
Tag Address ditandai dengan tag <address> dan diakhiri dengan tag </address>. Tag address biasa
digunakan untuk memberikan kontak informasi berupa alamat, misalnya alamat perusahaan atau
lainnya. Hal ini merupakan hal yang umum dalam dokumen HTML, terutama website yang berupa profil
perusahaan. Dengan adanya tag address, maka penulisan alamat dapat distandarkan. Tag address
biasanya akan menampilkan alamat dalam format italic/miring, dan terdapat baris kosong sebelum dan
sesudah alamat.
Bentuk umum: <address>...</address>
Contoh:

<p>Kampus 2:</p>
<address> UNPRI || Jl. Sekip Simp. Sikambing || Telp. (061)-4578870 || Email :
ontact@unprimdn.ac.id </address>
3.3.5. Citation
5. Citation dengan tag <cite>
Tag <cite> untuk Membuat Sumber Referensi
Tag <cite> adalah singkatan dari Citation. Citation adalah sebutan untuk referensi. Di dalam
membuat konten web, biasanya referensi ini bisa berupa sebuah buku, lagu, film, lukisan atau
alamat dari web lain. Web browser pada umumnya akan menampilkan tag <cite> dengan garis
miring atau italic.
Bentuk umum: <cite>...</cite>
Contoh:
<p>Animo Kepercayaan Masyarakat terhadap unpri meningkat</p>
<p>Sesuai motto UNPRI <cite>The Best Choice</cite>, maka mahasiswa mesti bisa memilih
hal terbaik untuk meningkatkan kompetensinya.</p>
3.3.6. Bi-Directional Override
6. Bi-Directional Override dengan tag <bdo>
Tag Bi-Directional Override ditandai dengan tag <bdo> dan diakhiri dengan tag </bdo>. Tag
bdo berfungsi untuk membalik arah penulisan teks.
Attribute dir harus disebutkan didalam element bdo, dengan value ltr untuk arah left-to-right
(kiri-ke-kanan) dan rtl untuk arah right-to-left (kanan-ke-kiri) dan auto.
Bentuk umum: <bdo>...</bdo>
Contoh:
<bdo dir="rtl">Belajar Pemrograman Web Satu</bdo>
3.4. Preformatted Text
HTML <pre> element digunakan untuk merepresentasikan sebuah blok teks preformat
(preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan
ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file
(dokumen HTML).

<pre> sering digunakan sebagai induk element bagi <code>, yang mana didalam element pre
terdapat element code yang digunakan untuk menulis source code.
Bentuk umum: <pre>...</pre>
Contoh:
<pre>
Nama : Budi
Tempat lahir : Medan
Jenis kelamin : Pria
</pre>
3.5. Divider dan Center
Elemen DIV digunakan untuk membagi-bagi dokumen HTML dalam suatu hieraki yang terstruktur. Teks
yang dikelilingi oleh tag <DIV>……..</DIV> akan diformat menurut nilai atribut ALIGN yang ditentukan di
dalamnya. Nilai atribut ALIGN yaitu, Left, Center dan Right.
Penggunaan DIV dengan Align=”center” dapat diganti dengan tag <CENTER>….<CENTER>. Keduanya
menghasilkan hasil yang sama
Bentuk umum: <div>...</div>
Contoh:
<div align="left">Teks rata kiri</div>
<div align="right">Teks rata kanan</div>
<div align="center">Teks rata tengah</div>
<center>TEKS RATA TENGAH</center>
3.6. Karakter Spesial
Pada keyboard komputer, tidak dicantumkan karakter-karakter tertentu sehingga digantikan yang
oleh entitas karakter. Oleh karena itu, digunakan entitas karakter saat menuliskan suatu karakter
tertentu, khususnya karakter yang tidak ada pada keyboard komputer.
Karakter-karakter spesial adalah karakter-karakter yang penggunaannya dalam HTML harus
menggunakan kode-kode tertentu. Tanda < dan > adalah salah satu contoh dari karakter spesial.
Karakter-karakter ini merupakan karakter khusus yang digunakan untuk menandai suatu tag
HTML. Untuk menampilkan karakter-karakter ini dalam suatu web page diperlukan suatu kode
khusus yang disebut entity.

Terdapat dua macam entity dalam HTML, yaitu karakter entity dan numerik entity yang
menggunakan suatu kode angka untuk mewakili suatu karakter spesial.
Karakter entity menggunakan suatu nama tertentu sebagai ganti karakter spesial dan diawali
dengan tanda & serta diakhiri dengan tanda ;
Seperti saat kita ingin menampilkan tanda lebih dari (less than) (<) kita harus menulis: < atau
<
Dalam menuliskan entitas, kita juga bisa menggunakan nama entitas (entity name). Dalam
penulisannya, ada kelebihan dan kelemahannya masing-masing.
 Keuntungan menggunakan nama entitas adalah kemudahannya untuk diingat. Kita akan
lebih mudah mengingat copy dari pada ©.
 Kelemahannya adalah tidak semua browser mendukung penggunaan nama entitas,
sehingga dalam penulisan entitas, penggunaan entitas angka akan lebih baik digunakan.
Berikut ini adalah tabel beberapa entitas yang umum digunakan:
Karakter Khusus Angka Entitas Nama Entitas Keterangan
“ " " Petik ganda
‘ ' ' Petik tunggal (apostrophe)
& & & Ampersand
< < < Lebik kecil
> > > Lebih besar
    Spasi
₵ ¢ ¢ Sen
¥ ¥ ¥ Yen
© © © Copyright
® ® ® Registered trademark
± ± ± Plus minus
¶ ¶ ¶ Paragraf
Bentuk umum penulisan entitas karakter: &entity_name; atau &#entity_number;
Contoh:
<p>Buku Panduan Belajar Pemrograman Web</p>
<p>© 2020 HTML CSS Javascript.com </p>
3.7. Komentar
Komentar digunakan untuk memberikan suatu penjelasan perintah HTML yang tidak akan ditampilkan di
dalam browser. Untuk membuat komentar suatu teks diapit oleh tanda .

Contoh:

<p>Menyelenggarakan pendidikan yang unggul di bidang socio-technopreneurship</p>
Maka jika dijalankan paragraf yang diberi perintah komentar tidak akan dimunculkan di browser.
3.8. List Item
List atau biasanya kita kenal dengan istilah daftar berurutan, merupakan bagian yang cukup
penting didalam HTML yang digunakan untuk menampilkan data secara berurutan, dengan
menggunakan daftar ini kita dapat membuat beberapa hal di HTML, seperti :
1. Daftar Urutan
2. Daftar Item
3. Navigasi Web
4. dsb...
Dalam HTML penulisan list menggunakan tag <li>, pembuatan list pada HTML terdapat 3 jenis
yaitu:
1. ordered list adalah list yang terurut;
2. unordered list adalah list yang tidak terurut;
3. defenition list atau descriptiona list adalah list yang berisi defennisi.
Untuk menambah pemahaman mengenai ke tiga list item dapat dilihat pada sub topik list item
3.8.1. Ordered List
Ordered list merupakan suatu list dimana item – item yang ada di dalamnya memiliki nomor urutan.
Penggunaan ordered list dimulai dengan tag <ol> dan diakhiri dengan tag </ol> dimana diantara kedua
tag tersebut terdapat tag <li>……</li> sebagai list item.
Ordered List ini digunakan untuk membuat daftar dengan menggunakan urutan, list jenis ini baik
digunakan untuk menampilkan perintah yang sifat memiliki urutan, seperti membuat step – step intruksi
yang memiliki urutan. Di dalam tag <ol>, terdapat beberapa atribut yaitu :

Atribut Fungsi
type=”A” Membuat list berurut dengan huruf besar ( A, B, C, D, ….. )
type=”a” Membuat list berurut dengan huruf kecil ( a, b, c, d, …. )
type=”I” Membuat list berurut dengan huruf romawi besar ( I, II, III, IV, ….. )
type=”i” Membuat list berurut dengan huruf romawi kecil ( i, ii, iii, iv, ……. )
type=”1″ Membuat list berurut dengan angka ( 1, 2, 3, 4, …… )
compact
Menyatakan bahwa item dalam list pendek sehingga browser menampilkannya dalam bentuk
yang lebih padat (atribut ini tidak didukung di banyak browser)
start=”n” Menentukan nilai awal dari item dalam daftar dimana n = nilai awal
Perlu diketahui, secara default jika tidak menuliskan tipe list pada tag <ol> maka tipe list yang akan
tampil dalam format angkat seperti 1, 2, 3, dst.
contoh:
<p>Daftar Nama</p>
<ol>
<li>Andi</li>
<li>Budi</li>
<li>Cindy</li>
<li>Deni</li>
<li>erni</li>
</ol>
contoh: Menggunakan atribut type

<p>Daftar Nama</p>
<ol type="A">
<li>Andi</li>
<li>Budi</li>
<li>Cindy</li>
<li>Deni</li>
<li>erni</li>
</ol>
contoh: Menggunakan atribut start
<p>Daftar Nama</p>
<ol start="5">
<li>Andi</li>
<li>Budi</li>
<li>Cindy</li>
<li>Deni</li>
<li>erni</li>
</ol>
3.8.2. Unordered List
Unordered list merupakan suatu list dimana item – item yang ada di dalamnya tidak diberi nomor
urutan dengan kata lain item – item tersebut tampil sembarang. Penggunaan unordered list ditandai
dengan penggunaan tag <ul> sebagai awalan dan tag </ul> sebagai akhiran dan diantara keduanya
terdapat tag <li> sebagai list item.

Unordered list ini digunakan untuk menampilkan daftar yang sifatnya tidak membutuhkan urutan,
contohnya untuk menampilkan daftar item, intinya untuk daftar yang tidak membutuhkan urutan angka
ataupun huruf, untuk penulisan skripnya hampir sama, yang berbeda hanya tag pembuka dan tag
penutup saja
Secara umum, penggunaan unordered list ditandai dengan bulatan hitam, lingkaran , dan kotak pada
awal list item. Tag <ul> memiliki beberapa atribut diantaranya adalah :
Atribut Fungsi
type=”disc” Membuat tanda bulatan hitam untuk item (menjadi default jika atribut type tidak ditulis)
type=”circle” Membuat tanda lingkaran putih untuk item
type=”square” Membuat tanda kotak untuk item
Perlu diketahui, secara default jika tidak menuliskan tipe list pada tag <ul> maka tipe list yang akan
tampil adalah tanda bulatan hitam (disc).
contoh:
<p>Daftar Dasar Pemrograman Web</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
contoh: Menggunakan atribut type

<p>Daftar Dasar Pemrograman Web</p>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
3.8.3. Definition List
List definis merupakan daftar list yang dilengkapi dengan adanya deskeripsi atau uraian pada
masing masing list. Kegunaannya list definisi itu sendiri terletak pada masing masing list yang
memiliki item penjelasan singkat. Untuk menggunakan list definisi kita harus mengenal beberapa
tag yang dibutuhkan yaitu:
 Tag <dl> (definition list), untuk menyatakan tempat daftar definisinya.
 Tag <dt> (definition term), untuk menyatakan tempat istilah yang akan dijadikan
definisinya.
 Tag <dd> (definition description), untuk menyatakan tempat definisi istilah.
List jenis ini mungkin jarang kita gunakan, kebanyakan hanya menggunakan 2 jenis saja yaitu
ordered list dan unordered list, list jenis ini biasanya digunakan untuk menampilkan daftar yang
berisi penjelasan.
Untuk tata letaknya dimulai dengan tag <dl> sebagai pertama tagnya. Kedua menggunakan tag
<dt> dan terakhir menggunakan tag <dd>.
contoh:
<p>Bagian Penting Dalam HTML</p>
<dl>
<dt>TAG</dt>
<dd>Tag berfungsi untuk memberi tahu kepada browser untuk apa sebuah text tersebut, apakah
text itu di tulis sebagai paragraf atau list dan juga sebagai link. Tag HTML di lengkapi dengan
tag pembuka < > dan penutup </ >. Dalam HTML, tanda ini dikenal dengan istilah tag.<dd>
<dt>Elemen</dt>
<dd>Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen
kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun
dokumen HTML dalam diagram HTML tree.</dd>

<dt>Atribut</dt>
<dd>Atribut adalah kata khusus yang berada di dalam tag pembuka. Atribut juga disebut sebagai
modifier yang akan menentukan perilaku dari elemen.</dd>
</dl>
3.9. Horizontal Rule
Elemen HTML hr merupakan elemen yang ditujukan untuk pemisah antara elemen paragraf
(misalnya, perubahan adegan dalam cerita, atau pergeseran topik) atau untuk memisahkan antar
konten dalam dokumen HTML.
Dalam HTML versi sebelumnya, elemen HTML hr digunakan untuk membuat garis horisontal.
Elemen ini sampai saat ini masih akan menampilkan garis horizontal pada halaman browser dan
penggunaan-nya lebih ke tujuan semantik, bukan untuk sekedar membuat garis. Semua atribut
yang dimiliki dalam elemen HTML ini sudah dihapus di HTML5 maka gunakan CSS sebagai
gantinya.
Jika penggunaan hanya digunakan untuk sekedar membuat garis horisontal maka lebih
dianjurkan untuk mengganti elemen HTML <hr> dengan CSS, intinya gunakan elemen ini hanya
sebagai elemen pemisah. Tag ini tidak memiliki penutup, cuma penggunaan dalam dokumen
HTML tag <hr> cukup ditulis tanpa garis miring sedangkan dalam dokumen XHTML tag <hr>
harus dilengkapi dengan menambahkan garis miring seperti ini <hr />.
Berikut ini beberapa atribut <hr> yang bisa digunakan:
Atribut Nilai Keterangan
align left, center, right Untuk menentukan posisi garis.
size pixels Untuk menentukan ukuran garis.
width pixels, % Untuk menentukan lebar garis.
color Jenis warna Untuk menentukan warna garis.
contoh:
<p>Horizontal line 1 </p>
<hr color="red" align="center" size="10px" width="50%">
<hr color="blue" align="right" size="20px" width="30%">

<hr color="green" align="left" size="20px" width="30%">
<hr>
3.10. Line Break
Tag <br> merupakan tag yang di sediakan pada html untuk membuat baris baru atau sering
disebut dengan membuat enter.
Tujuan elemen HTML br sangat sederhana, elemen HTML br atau biasa disebut tag line break
akan menciptakan satu baris baru dalam blok teks, tanpa meninggalkan padding atau margin
antara dua blok teks yang telah diciptakan oleh elemen ini.
Jika dalam penulisan di notepad kita sering tekan tombol enter untuk ganti baris, maka dalam file
HTML perintah untuk ganti baris dilakukan dengan menambahkan skrip <br> atau tag line
break. Tag ini tidak memiliki penutup dan tidak memiliki atribut.
Elemen HTML br masih valid untuk digunakan dalam HTML, hal ini berguna untuk menulis
puisi atau alamat, di mana pembagian garis sangat dibutuhkan. Jangan gunakan elemen HTML
<br> untuk menambah jarak antara baris teks; gunakan properti Margin pada CSS atau elemen
HTML paragraf <p>.
contoh:
<p>Biodata Mahasiswa</p>
<br>
<p>Nama : Budi</p>
<p>Umur : 19 Tahun</p>
<p>Tempat Lahir : Medan</p>
<br>
<p>Jurusan : Sistem Informasi</p>

Pertemuan 4
4.1. Font
Font pada HTML sebenarnya sudah dianjurkan tidak dipakai lagi oleh W3C, dan sebagai
gantinya digunakan CSS (Cascading Style Sheet). Dalam font HTML kita dapat gunakan
berbagai macam ukuran dan berbagai macam jenis font (tergantung yang tersedia di komputer).
1. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE>memiliki beberapa
atribut untuk mengatur ukuran huruf yang akan digunakan. Attribute dari element ini adalah size yang
merupakan ukuran huruf dengan nilai "1" sampai dengan "7"
2. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan
string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
4.2. Color
Selain ukuran dan jenis tulisan, font HTML dapat pula dibuat warna latar belakang maupun gambar latar
belakang dengan menggunakan tag bgcolor dan background yang dapat disisipkan pada tag body.
Pewarnaan pada font HTML selain menggunakan tipe warna red, green, yellow, orange dan sebagainya,
bisa juga menggunakan bilangan hexadesimal.
Kode warna dapat dilihat pada link berikut ini : https://www.niagahoster.co.id/blog/daftar-kode-warna-
pada-html/
4.3. Alignment
Menata susunan kaliamat pada halaman web dengan text alignment sangatlah mudah. Cukup dengan
mengatur dan menempatkan tag. Simbol “#” adalah jenis pengaturan yang hendak digunakan, yaitu left
(rata kiri), right (rata kanan), center (tengah), dan justify (rata kiri-kanan). Format default jika align tidak
digunakan adalah rata kiri.
4.4. Hyperlink

Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu
teks dan/atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web
akan menyorot teks atau gambar yang diidentifikasi sebagai link dengan warna dan/atau garis
bawah untuk menunjukkan bahwa itu adalah hyperteks link (sering disingkat hyperlink atau
link).
Link atau hyperlink itu ditulis dengan menggunakan tag <a> sebagai pembuka kemudian ditutup
dengan menggunakan tag </a>.
<a> adalah kependekan dari anchor (jangkar) yaitu sebuah tag untuk mendefinisikan sebuah teks
atau gambar yang memiliki tujuan atau rujukan ke halaman lain atau pada halaman itu sendiri,
tag <a> di tulis secara berpasangan antara tag pembuka <a> dan tag penutup </a> dimana
elemen didalam digunakan untuk mendefinisikan sebuah hyperlink.
Tidak semua elemen yang di tulis antara tag <a> menjadi sebuah hyperlink, pembuatan link
dengan tag <a> ini bergantung pada atribut href, apabila sebuah teks atau gambar di definisikan
dengan menggunakan tag <a> dan tidak memiliki atribut href didalamnya elemen tersebut adalah
menunjukan sebuah placeholder.
Berikut ini adalah atribut-atribut yang terdapat pada tag <a> (anchor link) yang dapat di gunakan
untuk membuat link di html, tidak semua atribut tag <a> dicantumkan pada tabel di bawah ini:
Atribut Nilai Keterangan
href URL Menentukan alamat atau ID tujuan
hreflang language_code Menentukan bahasa yang digunakan
target
_blank, _parent, _self, _top,
framename
Untuk menentukan bagaimana perlakuan
untuk membuka link tersebut.
rel
alternate, author, bookmark,
help, license, next, nofollow,
noreferrer, prev, search, tag
Menentukan hubungan (relationship)
antara dokumen yang sedang di buka atau
dokumen lain yang di rujuk link tersebut.
Bentuk umum : <a href="link_tujuan">Nama link</a>
Atribut Target Pada Tag <a>, atribut target ini memiliki 4 nilai, yaitu _self, _blank, _parent, dan
_top. Namun, yang sering dipakai itu blank. Penjelasannya adalah sebagai berikut:
 _self : Membuka halaman website di tab ini.
 _blank :Membuka halaman website di tab baru.
 _parent : Membuka halaman website pada parent frame.
 _top : Membuka halaman website dan membatalkan semua frame.
Untuk nilai _parent dan _top itu sudah deprecated pada HTML5. Jadi, tidak perlu menggunakan
kedua nilai tersebut. Itu karena website sekarang sudah tidak menggunakan frameset lagi. Atribut
ini tidak wajib diisi, tetapi apabila tidak diisi maka defaultnya adalah _self.

Bentuk umum: <a href="link tujuan" target="self" title="pesan">Index</a>
Berdasarkan jenisnya, link dibagi menjadi 2, yaitu:
1. Link relatif adalah link yang bisa dikatakan link yang mengarah langsung pada lokasi
path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa di awali
dengan alamat domain website tersebut, sehingga dalam pengunaannya sangat tergantung
pada lokasi file berada
2. Link absolut adalah link yang mengarah langsung pada website tertentu, dimana sebuah
dokumen di kunci pada alamat valid sebuah website, dan tidak tergantun pada direktori
lokasi dokumen html berada. Sehingga alamat dapat di gunakan pada lain website selama
alamat tersebut masih valid
4.5. Tag formatting karakter
1. Membuat Teks Tebal
Teks tebal biasanya digunakan untuk memberikan penegasan pada teks tertentu, misalnya seperti
judul, sub judul, huruf penting, dan lain-lain.
Tag yang digunakan untuk membuat teks tebal di HTML adalah tag <b> (bold) dan
tag <strong>.
2. Membuat Teks Miring
Teks miring biasanya digunakan untuk menegaskan sebuah kata atau istilah baru. Teks miring di
HTML dapat kita buat dengan tag <i> (italic) dan juga tag <em> (emphasis).
3. Membuat Garis Bawah pada Teks
Garis bawah biasanya digunakan untuk menandai teks yang disisipkan atau teks yang memiliki
arti penting dibandingkan teks normal lainnya.
Garis bawah di HTML dapat kita buat dengan tag <u> (underlaine) atau juga tag <ins> (insert).
4. Membuat Teks Tercoret
Teks tercoret memiliki arti teks yang dihapus. Biasanya untuk memberitahu pembaca bahwa teks
tersebut tidak dipakai atau dihapus.
Tag untuk membuat teks tercoret di HTML adalah tag <s> (strikethrough) atau bisa juga dengan
tag <del> (delete).
5. Membuat Pangkat di HTML

Pangkat biasanya digunakan pada rumus. Ada dua jenis pangkat yang bisa dibuat di HTML,
yaitu pangkat yang berada di atas (superscript) dan pangkat di bawah (subscript).
Tag untuk membuat pangkat di HTML adalah tag <sup> dan <sub>.
 <sup> untuk membuat pangkat di atas
 <sub> untuk membuat pangkat di bawah
6. Membuat Marker untuk Teks
Marker biasanya digunakan untuk menandai teks yang penting atau kata kunci yang penting.
Marker di HTML dapat dibuat dengan tag <mark>.
7. Membuat Text Berjalan
Marquee biasanya digunakan untuk membuat text berjalan atau sering juga disebut running text.
Dalam tag Marquee ini mempunyai beberapa attribute seperti dibawah ini :
 bgcolor : untuk mengatur background dari text marquee
 direction : untuk mengatur gerakan text (up,down,left,right)
 scrollamount : untuk mengatur kecepatan gerakan text
 behaviour : untuk mengatur effect dari gerakan :
1. behavior="scroll" yaitu atribut yang menampilkan variasi berjalan terus tanpa berhenti.
2. behavior="alternate" yaitu atribut yang menampilkan variasi berjalan pada saat telah
sampai di ujung akan kembali lagi dan sebaliknya.
3. behavior="slide"yaitu atribut yang menampilkan variasi berjalan saat sampai di ujung
akan berhenti dan tidak akan berjalan lagi.
 width : untuk mengatur lebar area gerakan
 height : untuk mengatur tinggi area gerakan
 align : untuk mengatur posisi
 onmouseover : untuk menghentikan effect ketika mouse mendekat
 onmouseout : untuk menjalankan effect ketika mouse menjauh

Pertemuan 5
5.1. Pengantar
Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara,
gambar, animasi audio dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna
dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi. Multimedia hadir dengan
berbagai format dan hampir dapat menjadi apapun yang kita dengar atau lihat. Seperti teks,
gambar, musik, suara video rekaman, film, animasi dan sebagainya.
Pada pertama kali penggunaan browser internet hanya mendukung teks saja, bahkan teks yang
didukungpun sangat terbatas hanya pada satu jenis huruf saja dalam satu warna. Kemudian pada
perjalanannya browser pun datang dengan dukungan pada warna, jenis huruf dan teks style, serta
menambahkan dukungan untuk gambar untuk selanjutnya mendukung penambahan multimedia dan
akan masih terus berkembang. Dukungan untuk suara, animasi dan video ditangani secara berbeda-
beda pada setiap browser. Beberapa elemen dapat ditangani oleh browser itu sendiri namun, ada juga
beberapa elemen yang membutuhkan sebuah program pembantu tambahan (plug-in).
Pada umumnya elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang
paling umum untuk melihat format sebuah media adalah dengan melihat ekstensi yang digunakan oleh
file tersebut. Ketika browser menemukan file berekstensi ".htm/.html" maka browser akan berasumsi
bahwa file tersebut merupakan halaman HTML. Ektensi ".xml" diindikasikan sebagai file XML dan
ekstensi ".css" diindikasikan sebagai file style sheet, sedangkan ekstensi untuk format gambar yang
diakui seperti ".jpg , .gif , dan lain-lain. Selain itu elemen multimedia juga mempunyai format filenya
sendiri yang memiliki ekstensi yang berbede-beda seperti .swf , .wmv , .mp3 , dan .mp4.
5.2. Image
1. Gambar (Image)
Menampilkan gambar pada html termasuk yang bisa di bilang terpenting dalam membuat website atau
membuat aplikasi berbasi web, apa jadinya jika website tanpa gambar, maka akan terasa sangat
membosankan. Oleh karena itu tekni menampilkan gambar pada HTML termasuk ke dalam teknik yang
wajib diketahui.
HTML menyediakan sebuah tag yang khusus untuk menampilkan gambar atau image. Tag HMTL yang
berfungsi untuk menampilkan gambar adalah tag <img>. Tag <img> digunakan untuk menampilkan
gambar atau image dengan berbagai ekstensi, baik itu jpg, png, gif, bmp, ico dan lain-lain.

2. Atribut Penggunaan Tag <img>
Atribut Fungsi
src Menunjukkan URL atau folder/direktori lokasi file gambar berada
width Lebar gambar (default : pixel)
height Tinggi gambar (default : pixel)
align Menentukan posisi teks di sekitar gambar
alt Sebagai kata kunci gambar di search engine semisal Google dan menampilkan teks
pengganti gambar jika gambar tidak dapat ditampilkan misalnya karena koneksi
lambat
title Memberikan keterangan gambar ketika cursor diarahkan ke gambar tersebut
border Memberikan bingkai (garis tepi) pada gambar dengan nilai menggunakan satuan
pixel (default)
Bentuk umum:
Contoh: <img src="logo-unpri.png"/>
Dalam menampilkan gambar dengan HTML menggunakan tag <img> wajib diikuti dengan atribut scr,
dimana seperti sudah dijelaskan bahwa atribut scr berfungsi untuk melakukan pemanggilan lokasi dan
nama file gambar yang ingin ditampilkan.
4. Jenis Perintah Dalam Memanggil File Gambar
1. <img src="namafile.ekstensi"/>
Memanggil file gambar dalam direktori/folder yang sama pada file .html.
contoh: <img src="namafile.ekstensi"/>
2. <img src="../namafile.ekstensi">

Memanggil file gambar dalam direktori/folder yang berada 1 tingkatan di luar file .html.
contoh: <img src="D:/Folder1/namafile.ekstensi">
3. <img src="../../namafile.ekstensi">
Memanggil file gambar dalam direktori/folder yang berada 2 tingkatan di luar file .html.
contoh: <img src="D:/Folder1/Folder2/namafile.ekstensi">
4. <a href=”url link”><img src=”url gambar”></a>
Memanggil file gambar berdasarkan url link atau url gambar
contoh: <a href=”url link”>text</a> atau <img src=”url gambar”>
5.3. Sound
1. Pengantar
HTML audio element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web
dan diputar untuk didengarkan.
Penggunaan elemen audio ditandai dengan pasangan tag <audio> …. </audio>. Diantara pasangan tag
<audio> terdapat elemen source dan dapat ditambahkan teks yang akan tampil jika browser tidak
mendukung elemen audio.
Bentuk umum :
Penggunaan atribut controls menghasilkan controls audio yang tampilannya berbeda – beda untuk
setiap browser.
Jika hanya menggunakan atribut src langsung pada tag <audio> maka hanya akan ada satu format audio
yang digunakan. Sedangkan, dari penjelasan sebelumnya, jelas bahwa tidak semua format didukung
oleh semua browser.
Agar audio tersebut tetap dapat didukung oleh browser yang berbeda-beda maka digunakan format
audio yang lebih dari satu dengan menggunakan elemen source yang ditandai dengan penggunaan tag
<source>. Adapun atribut yang terdapat pada elemen source yang berhubungan dengan elemen audio
yaitu:
src URL lokasi
file audio
Menunjukkan lokasi penyimpanan file audio atau URL yang
menunjukkan keberadaan audio file tersebut.
type MIME_type Menentukan MIME type dari audio tersebut

2. Media Formats
Format Keterangan Extensi File MIME Types
MP3 MP3 adalah MPEG-1 atau MPEG-2 Audio Layer III,
merupakan format audio paling terkenal yang
menggunakan format lossy data compression.
.mp3 audio/mp3
Ogg Vorbis Format free, open standar yang menyuguhkan kualitas
audio lebih baik dari MP3.
.ogg audio/ogg
WAV Format original untuk raw digital audio. Format WAV
tidak menggunakan metode kompresi file sehingga
ukurannya lebih besar dari format lainnya.
.wav audio/wav
Bentuk umum: Penggunaan audio dengan tag source
Penggunaan HTML audio element yang menampilkan format audio lebih dari satu didalam element
<source> untuk dukungan browser yang berbeda-beda.
3. Atribut Penggunaan Tag <audio>
autoplay – Menentukan bahwa audio akan diputar langsung ketika halaman sudah
diload secara otomatis.
controls – Menunjukkan bahwa controls audio (setiap browser memiliki tampilan
controls audio yang berbeda – beda) ditampilkan seperti player yang
biasanya berisi perintah seperti tombol play/pause, slider, volume dan lain
sebagainya.
muted – Digunakan untuk mematikan atau membisukan suara yang berarti audio
akan diputar tanpa suara pada awal inisial.
loop – Digunakan untuk memutar ulang audio yang sudah selesai diputar.
src URL lokasi
file audio
Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan
keberadaan audio file tersebut.
preload auto, none,
metada
Menunjukkan seberapa penting audio harus diload ketika halaman web
dimuat.

Jenis perintah dalam pemanggilan file audio sama halnya seperti yang sudah dijelaskan pada
pemanggilan gambar atau image.
5.4. Video
1. Pengantar
HTML <video> element digunakan untuk menampilkan sumber file video, sehingga dapat
diputar (dimainkan) pada halaman web.
Dalam menampilkan sumber file video, digunakan attribute src yang menunjukkan source
(sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam
element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber
video lebih dari satu format, sehingga browser dapat memilih format video yang tepat
(didukung).
Didalam element <video> dapat ditulis konten (teks), untuk browser lawas yang tidak
mendukung HTML5 video. Teks ini, akan tampil sebagai ganti dari video yang tidak dapat
diputar. HTML <video> merupakan tag yang baru diperkenalkan pada HTML5.
Bentuk umum
:
2. Media Formats
Format FILE Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
Bentuk umum: Penggunaan video dengan tag source
Penggunaan HTML video element yang menampilkan format video lebih dari satu didalam element
<source> untuk dukungan browser yang berbeda-beda.
3. Atribut Penggunaan Tag <video>

Nama Atribut Nilai Fungsi
autoplay true/false Agar video diputar otomatis
controls true/false Untuk mengaktifkan control video player
loop true/false Untuk memutar video terus menerus
muted true/false Untuk menonaktifkan audio
poster Image Path Untuk menentukan gambar cover dari video
width & height angka Untuk menentukan tinggi dan lebar video
playsinline true/false Untuk memutar video secara ‘inline’
Jenis perintah dalam pemanggilan file video sama halnya seperti yang sudah dijelaskan pada
pemanggilan gambar atau image.

Pertemuan 6
6.1. Definisi dan Tujuan
1. Definisi
Tabel adalah daftar yang berisi susunan informasi atau data yang ditampilkan dalam bentuk baris
dan kolom. Secara umum suatu tabel terdiri dari atas beberapa elemen antara lain: baris, kolom,
sel dan garis.
Terdapat 3 tag utama sebagai syarat untuk membuat tabel htm, ketiga tag tersebut antara lain:
<table>, <tr>, <td>. Selain ketiga tag tersebut terdapat juga ta lain yang bersifat (optional) antara
lain: <thead>, <tbody>, <th>, <tfoot> dan sebagainya.
Pada Html, tabel sering digunakan untuk menampilkan data yang berasal dari Database. Untuk
itu, sangatlah penting dalam mempelajari bagaimana cara membuat tabel dalam web
programming khususnya pada HTML.
Bentuk umum: membuat tabel pada html
2. Tujuan
Tabel adalah hal yang umum dan sering digunakan dalam website. Dengan tabel, data/informasi
yang ditampilkan akan terlihat rapi, atau bahkan dalam bentuk struktur yang lebih kompleks.
Tujuan pembuatan tabel adalah untuk menyajikan informasi data secara ringkas dalam bentuk
daftar, sehingga akan lebih mudah untuk dibaca. Misalnya untuk menampilkan rincian data siswa
atau data keuangan.
Perhatikan tabel pada gambar dibawah ini, dimana tabel pada html tersusun atas beberapa bagian
antara lain: bagian caption, header, body dan footer. Beberapa bagian tersebut disusun dan ditulis
didalam elemen tabel <table>.

6.2. Tag HTML Dalam Membuat Tabel
Bahasa pemrograman HTML telah menyediakan tag-tag khusus yang bisa digunakan dalam
pembuatan tabel. Berikut dapat dilihat beberapa perintah tag HTML dalam membuat tabel
beserta penjelasannya.
No Tag Keterangan
1 <table> Tag Utama yang digunakan untuk mendefinisikan sebuah Tabel
2 <thead> Tag yang menunjukkan bagian dari kepala Tabel(Header)
3 <tbody>
Tag yang digunakan untuk mendefinisikan bagian isi dari
suatu Tabel(body)
4 <tfoot> Tag ini mendefinisikan bagian penutup dari tabel(footer)
5 <tr>
Tag Utama yang digunakan untuk membuat baris pada tabel(elemen
baris)
6 <td> Tag Utama yang digunakan untuk membuat kolom tabel
7 <th>
fungsinya hampir sama dengan tag <td>, pada Tag <th> konten/teks akan
tercetak tebal dan rata tengah(center)
Tabel diatas pada dasarnya juga dibuat menggunakan tag-tag HTML seperti yang sudah dijelaskan.
Sebagai seorang programmer, pastinya juga sudah mengetahui cara membuat tabel HTML seperti pada
tampilan tabel diatas.
Elemen Tabel <table> adalah wajib dalam pembuatan tabel, didalam elemen tabel terdapat elemen-
elemen lain, seperti elemen baris <tr>, elemen kolom <td>, <th>, sedangkan elemen cell adalah hasil
dari bertemunya elemen baris dan kolom. Sehingga bisa disimpulkan bahwa syarat utama dalam
membuat tabel HTML adalah menggunakan 3 tag yaitu <table>, <tr> dan <td>, sedangkan tag-tag lain
yang berkaitan dalam pembuatan tabel hanya bersifat optional (tidak wajib).
6.3. Atribut Tag Tabel

Secara default, pembuatan tabel HTML hanya menggunakan tag saja akan memiliki tampilan biasa.
Untuk membuat tampilan tabel lebih menarik, maka berikut beberapa atribut html yang mendukung
dalam pembuatan tabel.
No Atribut Keterangan
1 align mengatur perataan teks pada tabel : center, justify, left, right
2 background menentukan gambar latar belakang pada tabel
3 bgcolor menentukan warna latar belakang pada tabel
4 border membuat dan menentukan tebal garis tabel
5 cellspacing menentukan jarak spasi antar cell
6 cellpadding menentukan jarak antara garis cell dengan isi cell(padding)
7 height menentukan tinggi table (dalam % atau pixel)
8 width menentukan lebar table (dalam % atau pixel)
9 valign
menentukan posisi vertikal text pada dalam cell : baseline, top,
bottom, middle
Pada HTML5, beberapa atribut dalam tabel diatas sudah tidak lagi di support, namun masih bisa
digunakan, sebagai alternatif. Bisa juga menggunakan css untuk memformat tabel html.
6.4. Bagian Header Tabel pada Html
Dalam membuat header tabel pada HTML, dengan menggunakan tag khusus yaitu tag <th>. Tag <th>
adalah singkatan dari kata "Table Head" yang berfungsi untuk membuat judul kolom dari baris-baris
dibawahnya. Pada penggunaan tag <th>, perlu disertakan tag lain yaitu tag <table> dan tag <tr>. Secara
default teks yang terletak antara tag <th> dan </th> akan ditampilkan dalam bentuk huruf tebal dan
center (perataan berada ditengah kolom). Selain ketiga tag tersebut, bisa juga menambahkan tag
<thead> atau disebut dengan "Table Header".
Tag <thead> diguanakan untuk membuat konten yang terletak dibagian atas tabel (header), dimana
menunjukkan bagian kepala dari suatu tabel. Dapat dilihat seperti contoh tabel dibawah ini:
6.5. Bagian Body Tabel pada Html
Untuk membuat body tabel secara sederhana, hanya perlu membutuhkan tag <td>, <tr> dan <table>.
Namun, untuk membuat body tabel lebih terstruktur, dapat menambahkan tag <tbody> atau disebut

dengan "Table Body". Tag <tbody> menunjukkan isi tabel dari HTML. Seperti terlihat pada tabel dibawah
ini:
6.6. Bagian Footer Tabel pada Html
Bagian footer tabel menunjukkan bagian penutup dari suatu tabel. Namun, dalam penggunaan
footer tabel ini jarang digunakan. Hasil penggunaan dari tag <tfoot) atau disebut dengan "Table
Foot" akan menampilkan konten dibagian bawah setelah body tabel. Seperti terlihat pada tabel
dibawah ini:
6.7. Bagian Caption Tabel pada Html
Caption tabel di HTML dapat digunakan untuk membuat judul tabel, perintah caption tabel
menggunakan tag <caption>. Penulisan tag <caption> ditulis setelah penulisan tag <table>.
Secara defult, suatu caption tabel akan terletak diatas tabel dan berada ditengah-tengah (center).
Sebagai catatan hanya dapat membuat satu caption per tabel. Seperti terlihat pada tabel dibawah
ini:

6.8. Colspan dan Rowspan
Dalam membuat tabel tentu berkaitan dengan bagaimana menggabungkan tabel atau disebut
merge cell. Mungkin tidak asing bagi kita dengan istilah "merge cell" pada Microsoft Excel
ataupun Microsoft Word. Merge cell adalah suatu metode menggabungkan beberapa sel menjadi
satu dalam sebuat tabel.
Penggunaan merge cell tentunya sangat dibutuhkan dalam penyusunan informasi dalam tabel
yang membutuhkan penggabungan beberapa sel menjadi satu. HTML sendiri juga sudah
menyediakan atribut khusus untuk merge cell yaitu rowspan dan colspan.
Mayoritas browser seperti firefox, chrome, opera, safari dan internet explorer mendukung
penggunaan colspan dan rowspan. Colspan dan rowspan juga didukung oleh HTML5.
Penggunaan atribut colspan dan rowspan diterapkan pada tag <td> dan tag <th>.
Colspan berarti penggabungan beberapa kolom sel menjadi satu sel.
rowspan berarti penggabungan beberapa baris sel menjadi satu baris sel.
Bentuk umum: colspan
Bentuk umum: rowspan
Nilai “number” pada colspan dan rowspan menunjukkan jumlah kolom ataupun baris yang
akan digabungkan menjadi satu. Seperti terlihat pada tabel dibawah ini:

Pertemuan 7
7.1. Defenisi dan Fungsi
1. Defenisi
Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima
masukan dari pengguna, untuk selanjutnya masukan dari pengguna tersebut diolah
menggunakan bahasa pemrograman web, baik secara server side scripting(misalkan PHP,
JSP) ataupun client-side scripting (javascript). Form dapat digunakan untuk berbagai
keperluan seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau
meminta umpan balik dari pengguna, menawarkan barang/jasa secara on-line dan
sebagainya. Form sangat sering kita jumpai dalam satu aplikasi sistem informasi berbasis
web.
2. Fungsi
Form dapat ditemukan pada halaman web yang memiliki fungsi komunikasi, bukan hanya
komunikasi antar pengguna internet seperti chatting, social network, dan email, tetapi juga
komunikasi antara pengguna internet dengan web server seperti format pendaftaran untuk
membuat account sebuah situs. Saat seseorang hendak membuat account sebuah situs, dia
memberikan informasi kepada web server yang biasanya berupa identitas diri. Identitas
tersebut diinputkan melalui form kemudian dikirim ke database web server.
Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga
memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form
memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah
elemen kontrol.
Akan tetapi, penggunakan form yang hanya menggunakan HTML saja tidak akan terlalu
berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data
dari user, dan akan diproses dengan bahasa pemograman seperti JavaScript atau PHP, dan
disimpan di dalam database MySQL. Seperti terlihat pada gambar ilustrasi dibawah ini:

3. Cara Membuat Form di HTML
Untuk membuat form di HTML, membutuhkan setidaknya 2 komponen, yaitu tag <form>
dan form field:
 Tag <form> digunakan untuk mendefinisikan awal dan akhir form pada HTML. Tag
<form> harus memiliki atribut action dan atribut method.
 Form field adalah elemen-elemen yang ada di dalam form yang digunakan user
untuk mengisi data.
Bentuk umum: Struktur dasar form di HTML
<form action="namafile.ext" method="post/get">

</form>
7.2. Atribut Tag Form
1. Action

Action attribute pada HTML Form digunakan untuk menentukan tujuan form dikirim dan
diproses.
Berfungsi untuk mendefinisikan tindakan apa yang akan dilakukan ketika formulir
dikirimkan. Umumnya untuk mengirim data ke server adalah dengan menggunakan tombol
submit. Dengan kata lain, action attribute ini artinya mau dieksekusi ke mana data itu ketika
tombol submit diklik.
2. Method
Method attribute pada HTML Form digunakan untuk menentukan cara pengiriman data.
untuk menentukan bagaimana cara informasi dari suatu form (computer klien) dikirimkan ke
komputer server. Penggunaan method terdiri dari 2 bagian value yaitu Post dan Get.
a. Method Get
Nilai get pada atribut method digunakan untuk mengirimkan data ke server dengan
memerintahkan web browser untuk menambah nilai yang dimasukkan oleh user ke dalam
URL. Informasi yang akan ditambahkan ke URL memiliki format berupa pasangan
nama/nilai, yang ditulis dalam bentuk nama=nilai. Nama yang dimaksud di sini adalah nama
dari elemen control yang menyimpan data (misalnya element text), sedangkan nilai adalah
data yang dimasukkan oleh user. Method get ini biasanya digunakan
untuk query pencarian.
Contoh:
?nim=183303040296

Di sini, “nim” adalah nama elemen control dan “183303040296” adalah nilainya. Jika data
yang dikirimkan lebih dari satu, maka akan ditambahkan tanda &.
Contoh:
?nim=183303040296&nama=Lilis Suryani Aritonang&alamat=medan
b. Method Post
Nilai post pada atribut method dari tag <form> pada dasarnya memiliki fungsi yang sama
seperti get. Perbedaannya, pada metode pengiriman ini, data yang dimasukkan oleh user
tidak akan ditambahkan/ditampilkan ke dalam URL. Method post biasanya digunakan
untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil
form tidak akan terlihat pada browser.
3. Name
Name attribute pada HTML Form digunakan untuk menentukan nama dari suatu form
dengan value text
4. Target
Target attribute pada HTML Form digunakan untuk menentukkan tempat dari respon yang
diterima setelah mengirim form dengan value _blank | _self | _parent | _top
7.3. Elemen atau Objek form
Penggunaan Form dalam suatu web biasanya terdiri atas beragam jenis elemen control,
seperti text field, radio button, check box, list (combo box maupun list box), dan lalin-lain.
Elemen-elemen control tersebut pada umumnya dibuat menggunakan tag <input> dengan
segala type-nya, meskipun ada juga yang dibuat menggunakan tag <select> dan
<textarea>. Untuk lebih jelasnya dapat dilihat pada bagian subtopik bagaimana
penggunaan masing-masing jenis elemen control tersebut.
7.3.1. Tag Input

Tag <input> memiliki bermacam-macam tipe misalnya jika ingin membuat input teks
seperti di atas maka type=teks, jika ingin membuat input berupa password maka
type=password, dan lain sebagainya.
Berikut ini macam macam input type pada html:
1. Input type text
Type text digunakan untuk membuat field untuk teks biasa. Tidak ada pembatasan huruf
jadi dapat diisi angka, huruf dan karakter. Contoh untuk menanyakan username.
Bentuk umum: <input type="text" name="text" />
Contoh:
2. Input type number
Type number digunakan untuk membuat kolom isian angka. Selain angka tidak akan bisa
dimasukkan ke kolom ini. Contoh penggunaan untuk menanyakan umur.
Bentuk umum: <input type="number" name="text" />
Contoh:
3. Input type email
Type email untuk membuat field kusus email. Saat user mengisinya dengan teks yang bukan
email address maka akan muncul warning.
Bentuk umum: <input type="email" name="text" />
Contoh:
4. Input type password

Type password digunakan untuk membuat field untuk password. Saat user mengisinya
maka teks tidak dapat dibaca.
Bentuk umum: <input type="password" name="text" />
Contoh:
5. Input type date
Type date untuk membuat kolom isian tanggal. Saat user mengisinya maka akan ada
tampilan kalender untuk mempermudah mengisinya.
Bentuk umum: <input type="date" name="text" />
Contoh:
6. Input type file
Type file untuk membuat form upload file. Tampilan field ini berupa tombol jika di-klik maka
akan menampilkan file browser untuk memilih file mana yang akan diupload.
Bentuk umum: <input type="file" name="text" />
Contoh:
7. Input type radio
Type radio berfungsi untuk membuat pilihan berupa bulatan.
Untuk membuat radio button di html tag <input> harus lebih dari 1 dan menggunakan type
radio. Setiap tag harus memiliki name yang sama dan tag tersebut harus ditambahkan
atribut value yang berisi data yang akan dikirimkan. Misalnya untuk membuat field jenis
kelamin:
Bentuk umum: <input type="radio" name="text" value="text"> text

Contoh:
Penjelasan: Kedua field di atas menggunakan atribut type=”radio”. Dengan name yang
sama yaitu “jeniskelamin” menandakan kedua field tersebut untuk mengisinya harus
memilih salah satu (user hanya dapat memilih pria atau wanita, tidak bisa kedua-duanya).
8. Input type checkbox
Type checkbox digunakan untuk membuat field centang pada pilihan.
Untuk membuat checkbox di html, tag <input> harus menggunakan type checkbox dan
memiliki atribut name. Selain itu, atribut value harus digunakan untuk mendefinisikan data
yang akan dikirimkan. Misalnya untuk membuat pertanyaan berupa ceklist:
Bentuk umum: <input type="checkbox" name="text" value="text">
Contoh:
9. Input type reset
Type reset digunakan untuk membuat tombol reset pengisian data. Jika user menekan
tombol reset maka semua isian yang sudah diisi pada form akan direset atau dihapus
sehingga user dapat mengisi dari awal lagi.
Bentuk umum: <input type="reset" value="text">
Contoh:
10. Input type submit
Type submit digunakan untuk membuat tombol kirim. Ini adalah tipe input yang wajib
digunakan saat membuat sebuah form. Jika tombol ini di-klik user maka form akan diproses
oleh file yang sudah ditentukan di atribut action pada tag <form>.

Bentuk umum: <input type="submit" value="text">
Contoh:
Selain menggunakan tag <input>, penggunaan tombol atau komponen button dapat
dibuat dengan tag <button>.
Bentuk umum: <button>text</button>
Terdapat beberapa atribut yang sering digunakan pada komponen button:
a. Atribut Type
Terdapat dua nilai untuk atribut type pada tag input dan tag button,
 Submit yaitu jenis button untuk mensubmit nilai pada form yang nantinya akan di
proses ke server (jika menggunakan php).
 Reset yaitu fungsinya untuk mereset kembali inputan user pada suatu form sehingga
nilai inputan akan di kosongkan kembali.
b. Atribut Disabled
Atribut disabled juga penting dan sering digunakan. Fungsinya untuk mengatur apakah
button tersebut dapat di klik/ digunakan oleh pengguna atau tidak. Penggunaan atribut ini
dapat langsung di buat didalam tag button atau input type submit/reset tanpa memiliki nilai
(value).
Button yang diberi atribut disabled akan berwarna pucat jika dibandingkankan dengan
button yang tidak di disabled. dan ketika kursor mouse diarahkan ke button tersebut, maka
tidak dapat diklik.
c. Atribut Class dan ID
Kedua atribut ini akan di gunakan saat membuat website dengan html dan javascript.
Atribut class dan id digunakan sebagai penanda pada setiap elemen. Dalam hal ini termasuk
elemen button. ketika ingin membuat event ketika user mengklik tombol maka event akan
dijalankan berdasarkan penanda pada atribut class maupun id.

Contoh :
11. Input type hidden
Type hidden untuk membuat field yang disembunyikan. Biasanya type hidden digunakan
web developer untuk mengirimkan data yang tidak perlu diisi oleh user, misalnya kode
verifikasi halaman untuk keamanan web, id dari user dan sebagainya. Field ini tidak akan
tampil di halaman web.
Bentuk umum: <input type="hidden" name="text" value="text">
Contoh:
7.3.2. Tag Select
Tag <select> digunakan untuk membuat form inputan berdasarkan pilihan yang sudah
disediakan.
Select Option dibuat menggunakan tag <select> dengan atribut name. Lalu di dalam select
ditambahkan daftar pilihan-pilihan menggunakan tag <option> dengan atribut value.
Perbedaan antara select dengan input adalah tag <select> biasanya berupa menu
dropdown yang value-nya berada pada tag <option> sedangkan tag <input> berupa
checkbox atau radio button yang harus mendefinisikan value-nya di dalam atribut tag
<input>.
Bentuk umum:
<select name="text">
<option value="text">text</option>
.
.
<option value="text">text</option>
</select>

Contoh:
7.3.3. Tag Textarea
Tag <textarea> digunakan untuk membuat field berupa text namun dengan ukuran yang
lebih besar. Perbedaannya dengan input type text adalah pada ukurannya.
Penggunaan pada halaman web biasanya untuk menginputkan teks yang lebih banyak
seperti paragraf atau bahkan konten tulisan 1 halaman. Berbeda dengan input type text
yang hanya digunakan untuk menginputkan 1 kalimat.
Bentuk umum: <textarea rows="number" cols="number" name="text"></textarea>
Atribut rows digunakan untuk menentukan tinggi dari textarea, sedangkan cols digunakan
untuk menentukan lebar dari textarea.
Dari perintah diatas adalah isi dari textarea, boleh diisi banyak kata mulai dari 1 kata, 1
paragraf hingga 1 halaman penuh.
Contoh:
Ketiga tag di atas <input>, <select> dan <textarea> adalah elemen-elemen untuk
menginputkan data. Dalam form juga terdapat elemen-elemen yang digunakan untuk
mempercantik tampilan diantaranya adalah <label>, <fieldset> dan <legend>.
7.3.4. Tag Label
Tag <label> digunakan untuk memberi label, keterangan atau judul pada sebuah field. Tag
<label> disarankan menggunakan atribut for yang fungsinya jika teks label tersebut di-klik

Web 1 Semester 3.docx

Recommended

Recommended

More Related Content

Similar to Web 1 Semester 3.docx

Similar to Web 1 Semester 3.docx (20)

Recently uploaded

Recently uploaded (20)

Web 1 Semester 3.docx