LAPORAN TETAP PRAKTIKUM

PENGANTAR ILMU KOMPUTER

Oleh :

Nama : Wardatul Jannah

NIM : 08011282025051
Fakultas / Jurusan : MIPA / Matematika
Kelompok / Hari : II/ Sabtu
Tanggal Praktikum : 14 November 2020
Tanggal Penyerahan : 19 November 2020
Dosen Pengajar : Drs. Ali Amran, M.T.
Anita Desiani, M.Kom.
Nama Asisten : Mutiara Saviera (2018)
Chairunisa Apriyani (2018)
Aprilia Dina Asnawati (2019)
Wim Handerson (2019)

JUDUL PRAKTIKUM : HYPERTEXT MARKUP LANGUAGE

LABORATORIUM KOMPUTASI
JURUSAN MATEMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SRIWIJAYA
2020
I. Judul Praktikum : HyperText Markup Language
II. Tujuan Praktikum :
1. Untuk mengetahui sejarah singkat dari HyperText Markup Language.
2. Untuk mengetahui struktur umum dari HyperText Markup Language.
3. Untuk mengenal perintah-perintah dasar HyperText Markup Language.
4. Untuk mengenal kode-kode di dalam HyperText Markup Language.
5. Untuk mengetahui contoh-contoh HyperText Markup Language editor.
III. Dasar Teori
HTML (HyperText Markup Language) adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web yang menampilkan berbagai informasi di dalam sebuah
penjelajah web internet dan formatting hypertext sederhana yang ditulis kedalam bahasa berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain,
berkas yang dibuat dalam perangkat lunak pengolah k ata dan disimpan ke dalam format ASCII
normal sehingga menjadi homepage dengan perintah-perintah HTML. HTML sendiri
dipublikasikan di World Wide Web (WWW), dan semua nama file dokumen html mempunyai
eksistensi html atau htm itu sendiri. HTML berawal dari sebuah bahasa yang sebelumnya
banyak dipakai di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Language).
Dapat disimpulkan bahwa HTML merupakan sebuah standard yang digunakan secara luas
untuk menampilkan situs. Saat ini, HTML merupakan standard internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML merupakan
kode-kode tag yang mengintruksikan penjelaja situs untuk menghasilkan tampilan sesuai
dengan yang diinginkan. Sebuah file yang merupakan HTML dapat dibuka dengan
menggunakan web browser, seperti Microsoft Interner Explore, Mozilla Firefox, atau web
browser lainnya.
HTML sudah menjadi teknologi utama web dari 1990an setelah Tim Berners Lee, yang
merupakan ahli fisika dari Lembaga Penelitian CERN, menciptakannya di tahun 1989 dan
dipopulerkan oleh browser Mosaic dikembangkan di NCSA. Selama tahun 1990an telah
berkembang dengan pertumbuhan eksplosif web. Selama waktu ini, HTML telah diperpanjang
dalam beberapa cara. Web tergantung pada halaman web penulis dan vendor berbagi konvensi
yang sama untuk HTML. Hal ini telah termotivasi bekerja bersama spesifikasi untuk HTML.
HTML 2.0 (November 1995) telah dikembangkan di bawah perlindungan dari Interner
Engineering Task Force (IETF) untuk mengkodifikasi praktik umum di akhir tahun 1994.
HTML + (1993) dan HTML 3.0 (1995) mengusulkan jauh lebih kaya versi HTML. Meskipun
tidak pernah menerima consensus dalam standar diskusi, konsep ini mengarah pada adopsi
berbagai fitur baru. Upaya dari World Wide Web Consortium’s HTML Workinh Group untuk
menata common praktik pada tahun 1996 menghasilkan HTML 3.3 (Januari 1997).
Kebanyakan orang setuju bahwa dokumen HTML harus bekerja dengan baik di berbagai
browser dan platform. Mencapai interoperabilitas menurunkan biaya untuk penyedia konten
karena mereka harus mengembangkan hanya satu versi dokumen. Jika upaya ini tidak
dilakukan, ada resiko yang lebih besar bahwa Web akan berpindah ke dalam dunia perangkat
lunak berpemilik format tidak sesuai, akhirnya mengurangi potensi komersial Web untuk
semua peserta. Setiap versi HTML telah berupaya untuk merefleksikan consensus di antara
industry yang lebih besar sehingga investasi yang dilakukan oleh penyedia konten tidak akan
sia-sia dan bahwa dokumen mereka tidak akan menjadi tak terbaca dalam waktu singkat. HTML
telah dikembangkan dengan visi bahwa segala macam perangkat tersebut harus dapat
menggunakan informasi di Web : PC dengan tampilan grafis, telepon seluler, perangkat tangan
manusia, perangkat untuk pidato output dan input, komputer dengan bandwidth yang tinggi
atau rendah dan seterusnya.
Di dalam HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut
ini adalah versi-versi perkembangan HTML. Yang pertama adalah HTML versi 1.0, merupakan
pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar jika tampilan
yang dihasilkan sangat sederhana. Kemampuan yang dimiliki versi 1.0 ini antara lain heading,
paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung
peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping).
Yang kedua adalah HTML Versi 2.0, pada HTML versi ini, penambahan kualitas HTML
terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya
form ini, kita dapat memasukkan nama, alamat, serta saran dan kritik. HTML versi 2.0 ini
merupakan pionir dari adanya web interaktif. Selanjutnya ada HTML versi 3.2, HTML versi
ini merupakan HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk
meletakkan teks di sekeliling gambar, gambar latar belakang, tabel, frame, style sheet dan lain-
lain. Selain itu pada HTML versi ini bisa menggunakan script di luar HTML untuk mendukung
kinerja HTML tersebut, seperti Javascript, VBScript, dan lain-lain.
Selanjutnya ada HTML Versi 4, HTML ini memuat banyak sekali perubahan dan revisi
pendahulunya yaitu HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti
tabel, image, link, text, meta, imagemaps, form dan lain-lain. Berikutnya ada HTML Versi 4.01,
HTML ini merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-
kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 juga menjadi standarisasi
untuk elemen dan atribut dari script XHTML 1.0.
Yang terakhir ada HTML Versi 5.0, teknologi ini mulai dimunculkan pada tahun 2009,
tetapi pada tanggal 4 maret 2010 terdapat sebuah informasi bahwa W3C (World Wide Web
Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang
menangani HTML sejak versi 2.0 telah mengembangkan versi HTML terbaru, yaitu versi 5.0.
HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan
penggabungan antara CSS, HTML itu sendiri dengan JavaScript. Berikut ini beberapa
kelebihan yang dimiliki oleh HTML Versi 5.0 adalah sebagai berikut. Yang pertama adalah
Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks HTML Versi 5.0,
maka kode Nampak terlihat lebih sederhana daripada penggabungan antara HTML, CSS dan
JavaScript. Yang kedua adalah Greater Consistency, HTML V.5.0 telah melakukan banyak
sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada
sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan
konsistensi dalam membangun sebuah web. Kelebihan berikutnya adalah Improve Semantics,
berbagai elemen kode di dalam HTML V.5.0 yang telah di standarisasi, maka nilai semantic
dari sebuah web dapat lebih ditingkatkan. Itu berartu bahwa bagian-bagian dari web seperti
header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta
tujuannya. Selain itu juga terbentuk dalam sebuah “machine readable format”. Kemudian ada
Improved Accessibility, teknologi HTML V.5.0 yang memudahkan struktur pembangunan
sebuah web, maka developer dapat membangun pemahaman yang lebih detail mengenai
halaman web.
Kelebihan berikutnya Client-side Database, HTML V.5.0 menyediakan model database
SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini disisi client.
Selanjutnya ada Geolocation, HTML V.5.0 mempunyai API yang terintegrasi terhadap
geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google
Latitude pada iphone. Berikutnya ada Offline Aplication Cache, kelebihan ini membuat
pengguna dapat melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan
internet. Kelebihan berikutnya adalah Smarter Forms, di smarters forms ini terdapat semacam
regular expression (regex) yang membuat form mampu mengenali secara lebih baik tentang
input , validasi data dan interaksi dengan elemen lain misalnya format email, password, dll.
Yang terakhir ada Sharper Focus on Web Application Requiments, HTML V.5.0 membuat
sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag
and drop, video player, pengolah grafis dan masih banyak lagi.
HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan
untuk membuat halaman sebuah web dan menampilkan berbagai informasi di dalam sebuah
browser internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia
penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup
Language), HTML adalah sebuah standard yang digunakan secara luas untuk menampilkan
halaman Web. HTML saat ini merupakan standard internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C).
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka
dengan menggunakan browser Web seperti Mozilla Firefox atau Microsoft Internet Explorer.
HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain
yang memiliki kemampuan browser. HTML dokumen tersebut mirip dengan dokumen teks
biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode
atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan
menjadi tebal, maka penulisannya dilakukan dengan cara <b> Tebal </b>. tanda <b> digunakan
untuk mengaktifkan intruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri
dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.
Meskipun HTML bukanlah sebuah bahasa pemograman,HTML juga memiliki struktur
sebagai dasar untk memberikan tampilan website.struktur dasar pada HTML cukup simple dan
mungkin sangat mudah dipahami. HTML dimulai dengan <html> dan ditutup dengan </html>.
Di didalam script html tersebut terdapat <head> dan body. Pada <head> diisi dengan <meta>
dan file. File dari luar seperti CSS, Javascript, dll. Dan pada bagian <body> inilah design dibuat.
HTML juga memiliki struktur walaupun tidak seperti bahasa pemrograman yang sulit
dipahami, struktur-struktur HTML adalah sebagai berikut. Yang pertama ada DocType atau
kalau pada notepad ditulis <!DOCTYPE>, pada dasarnya Doctype atau biasa disingkat DTD
merupakan sebuah singkatan dari Document Type Declaration. Fungsi dari penulisan DTD ini
adalah untuk memberikan informasi pada bagian web browser mengenai jenis dokumen yang
nantinya akan diproses pada bagian HTML. DTD sendiri memiliki banyak versinya dan itu
sangat tergantung dengan HTML yang digunakan. Misalkan tidak menulis DTD pada awal
HTML, maka hal yang terjadi adalah browser tetap menampilkan web yang dibuat. Akan tetapi,
sebenarnya browser hanya menampilkan halaman yang dibuat dengan mode Quirk Mode.
Meskipun terlihat biasa saja jika dilihat secara sekilas, akan tetapi jika melihatnya dari sisi web
browser, halaman tersebut dianggap halaman yang tidak layak. Hal ini akan sangat berpengaruh
pada saat website yang dibuat telah dipublikasikan pada khalayak umum.
Struktur berikutnya adalah <html>, tag pembuka ini harus menggunakan kode HTML
seperti yang sudah dibuat sebelumnya. Hal tersebut disebabkan tag HTML merupakan wadah
yang nantinya akan diisi oleh berbagai macam isi yang disebut dengan CSS. Pada bagian
ujungnya, bisa dilihat tulisan </html>. Hal tersebut dimaksudkan sebagai penutup HTML dan
wajib ditulis. Apabila lupa menulis tag tersebut, maka web browser akan menganggap belum
menyelesaikan fondasi HTML yang telah dibuat. Dengan menuliskan kode tersebut, maka bisa
dikatakan semua isi di dalam HTML sudah terkunci dengan baik. Pada bagian inilah baru
memasukkan berbagai macam isi sesuai dengan keinginan kita.
Struktur berikutnya adalah <head> pada bagian tag <head>, dapat menuliskan judul dan
berbagai macam kode-kode yang tidak tampil pada browser. Kode-kode yang dapat ditulis pada
bagian <head> ini adalah CSS dan juga JavaScript. Hal tersebut membuat kita dapat melakukan
kreasi pada bagian head ini. Sturuktur selanjutnya adalah <title>, sesuai dengan namanya, title
atau jika diterjemahkan adalah judul merupakan kode yang berisi tentang informasi yang
terdapat pada website tersebut. Biasanya dapat digunakan kode ini sebagai judul website atau
penjelasan singkat mengenai website yang dibuat. Oleh sebab itu, pada bagian title ini bisa
bebas mengisi dengan nama yang relevan dengan website yang dibuat. Kemudian ada <body>,
struktur HTML yang terakhir adalah Body. Pada bagian ini,, dapat dimasukkan beberapa unsur
elemen yang nantinya akan muncul pada bagian website. Bagian ini dapat diisi dengan gambar,
tautan, tulisan, dan berbagai isi website lainnya. Sama halnya dengan bagian HTML, kita harus
menutupnya dengan penulisan </body> di dalam website.
Secara garis besar, terdapat empat jenis elemen dari HTML, elemen tersebut meliputi
structural, elemen atau tanda ini merupakan tanda yang menentukan level atau tingkatan dari
sebuah tulisan tulisan misalkan <h1> Praktikum</h> akan memerintahkan peramban / web
untuk menampilkan “Praktikum” sebagai tulisan tebal besar yang menunjukkan sebagai
Heading 1. Selanjutnya ada Presentasional, tanda ini yang menentukan tampilan dari sebuah
tulisan tidak peduli dengan level dari tulisan tersebut, misalkan <b> bold face</b> akan
menampilkan bold. Tanda ini sekarang sudah mulai diganti dengan CSS dan tidak
direkomendasikan untuk mengatur tampilan tulisan. Selanjutnya ada hypertext, tanda ini
merupakan tanda yang menunjukkan pranala ke bagian dari dokumen atau dari dokumen ke
pranala ke dokumen lain. Berikutnya ada elemen widget yang membuat objek-objek lain seperti
tombol <button>, list <1i> dan garis horizontal <hr>. konsep hypertext pada HTML
memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian
manapun dalam word wide web.
Dokumen HTML adalah file yang diakhiri dengan ekstensi .html atau .htm. Ekstensi file
ini bisa dilihat dengan menggunakan web browser apapun misalnya Google Chrome, Safari,
atau Mozila FireFox. Browser tersebut memca file HTML dan me-render kontennya sehingga
user internet bisa melihat dan membacanya. Biasanya rata-rata situs web menyertakan sejumlah
halaman HTML yang berbeda-beda, contohnya beranda utama, halaman tentang kami, halaman
kontak yang semuanya memiliki dokumen terpisah. Masing-masing halaman HTML terdiri atas
seperangkat tags (atau biasa disebut elements) yang mengacu pada building block halaman
website. Tag tersebut membuat hirarki yang menyusun konten hingga menjadi bagian,
paragraph, heading, dan block konten lainnya. Sebagian besar element HTML memiliki tag
pembuka dan penutup yang menggunakan syntax <tag></tag>.
Tag HTML memiliki dua tipe utama, yaitu tag block-level dan inline tags. Yang pertama
Tag block-level, elemen ini memakai semua space yang tersedia dan selalu membuat line baru
di dalam dokumen. Contohnya adalah heading dan paragraph. Tiga tag block-level yang harus
dimiliki oleh setiap dokumen HTML adalah <html>, <head>, dan <body>. Tag <html></html>
adalah elemen yang tertinggi yang menyertakan setiap halaman HTML. Tag <head></head>
menyimpan informasi mata, seperti judul dan charset halaman. Tag <body></body> merupakan
tags yang melampirkan semua konten yang muncul pada suatu halaman.
Di HTML heading memiliki enam level. Level tersebut bervariasi mulai dari <h1></h1>
sampai ke <h6></h6>, dimana h1 merupakan level tertinggi dan h6 merupakan level terendah.
Paragraph fibuka dan ditutup dengan tag <p></p>, sedangkan blockquote menggunakan tag
<blockquote></blockquote>. Division, divison merupakan bagian konten yang lebih besar dan
biasanya terdiri atas beberapa paragraph, gambar, kadang-kadang blockquote dan elemen lebih
kecil lainnya. Di division juga bisa membuat mark up dengan menggunakan tag <div></div>.
Di dalam elemen ini juga terdapat tag div lainnya. Selain tag div bisa juga menggunakan tag
<ol></ol> untuk list yang berurutan dan <ul></ul> untuk list yang tidak berurutan. Masing-
masing list item harus dibuka dan ditutup dengang tag <li></li>.
Tag inline, elemen ini hanya memakai space sesuai dengan kebutuhannya dan tidak
membuat line baru di halama. Biasanya elemen ini akan memformat isi konten dari elemen
block-level. Contoh dari tag inline adalah link dan emphasized strings. Sebagian besar tag inline
digunakan untuk mempformat teks. Sebagai contoh, tag <strong></strong> akan render elemen
bold, sedangkan tag <em></em> akan ditampilkan dalam format italic. Hyperlink adalah
elemen inline yang mewajibkan adanya tag <a></a> dan attribute href untuk mengindakasi
tujuan link. Gambar (image) juga merupakan elemen inline. Pengguna dapat menambahkan
satu gambar dengan menggunakan <img> tanpa harus membubuhkan tag penutup. Hanya saja,
disarankan menggunakan attribute src untuk menetukan path.
Sama seperti yang lainnya dalam dunia web, HTML juga mempunyai kelebihan dan
kekurangannya. Kelebihan dari HTML itu sendiri yaitu, Html merupakan bahasa pengkodean
yang lintas platform (cross platform), maksudnya HTML dapat digunakan diberbagai macam
sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan
editor karakter ASCII. Kelebihan berikutnya adalah dapat disisi[I gambar baik gambar statis
atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink. Gambar
disini digunakan untuk merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah
didefinisikan berupa rectangular (kotak), polygon (kurva tak beraturan ) atau lingkaran yang
digunakan untuk jump ke halaman lain, atau link ke halaman di luar web yang bersangkutan.
Selanjutnya HTML juga dapat disisipi animasi berupa Java Applet atau file-file animasi dari
Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki
plug-in khusus untuk menjalankan file-file animasi ini). Kelebihan lainnya adalah HTML dapat
disisipi bahasa pemrograman untuk mempercantik halaman web seperti Javascript, VBScript,
Active Server Pages, Perl Tcl, PDP dan sebagainya. Kelebihan berikutnya adalah HTML bukan
merupakan bahasa pemrograman jadi tidak memerlukan compiler. Cara menjalankannya cukup
dengan menggunakan browser.
Selain memiliki kelebihan HTML juga tentunya mempunyai kekurangan. Adapun
kekurangan tersebut antara lain adalah Menghasilkan halaman yang statis, yang diketahui untuk
memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti
JavaScript atau VBScript dan animasi seperti Flash atau Shockwave. Kelebihan lainnya adalah
memiliki tag-tag yang begitu banyak sehingga sulit dipelajari untuk orang yang masih awam.
Kelebihan lainnya adalah tidak dapat menghasilkan halaman yang interaktif. Interaktif disini
maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu HTML harus disisipi
bahasa pemrograman yang dapat menangani hal tersebut, contohnya Perl atau Tcl.
Di dalam website ada empat bagian buat tag, diantaranya adalah <HTML> , fungsi dari
<HTML> itu sendiri adalah sebagai tanda awal dokumen HTML. Html tidak membedakan
penggunaan hurud besar maupun huruf kecil dari suatu elemen. HTML terdiri dari tag-tag
beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<)
dan tanda lebih besar (>). Berikutnya ada <HEAD> bagian ini berfungsi sebagai informasi page
header. Dokumen HTML diapit oleh tag <HEAD></HEAD>. Bagian selanjutnya ada
<TITLE>, bagian ini berfungsi title atau judul halaman. Kalimat yang terletak di dalam tag ini
akan muncul pada bagian paling atas browser pada title bar. Bagian terakhir ada <BODY>,
bagian ini berfungsi sebagai sebuah halaman website. Bagian Body yang dinyatakan dengan
tag <BODY></BODY>, merupakan tubuh atau isi dari dokumen HTML dimana pengguna
meletakkan informasi yang akan ditampilkan pada browser.
Tag biasanya biasanya merupakan suatu pasangan yang disebut dengan Tag awal dan Tag
akhir. Tag awal dinyatakan dalam bentuk <nama tag> sedangkan Tag akhir dinyatakan dalam
bentuk </nama tag>. Misalnya untuk menampilkan format teks miring, perintah yang anda
perlukan untuk HTML adalah <i></i>.
Berikut ini penjelasan dari code-code yang terdapat pada HTML. Yang pertama adalah
Tag <!- ->, tag ini berfungsi memberi komentar atau keterangan. Kalimat yang terletak pada
tag kontiner ini tidak akan terlihat pada browser. Yang kedua ada tag <a href>, tag ini digunakan
untuk mebuat link ke halaman lain atau kebagian dari halaman tersebut. Selanjutnya ada tag <a
name>, tag ini digunakan untuk membuat nama bagian yang di definisikan pada link di halaman
yang sama. Selanjutnya adalah <applet> yang berfungsi sebagai awal dari Java Applets.
Berikutnya ada tag <area> yang berfungsi untuk mendefinisikan daerah yang dapat di klik atau
link pada image map. Lalu ada <b> yang digunakan untuk membuat teks tebal. Lalu ada
<basefont> yang berfungsi untuk membuat atribut teks default seperti jeni, ukuran dan warna
font. Lalu selanjutnya ada <bgsound> yang berfungsi memberi (suara latar) background sound
pada halaman web. Berikutnya ada <big> yang berfungsi untuk memperbesar ukutan teks
sebesar satu point dari defaultnya. Selanjutnya ada tag <blink> yang berfungsi untuk membuat
teks berkedip. Lalu kemudian ada tag <br> yang berfungsi untuk pindah baris. Selanjutnya ada
<caption> yang digunakan untuk membuat caption pada tabel. Selanjutnya ada <font> yang
digunakan untuk mengganti jenis, ukuran, dan warna huruh yang akan digunakan untik teks.
Berikutnya ada <form> yang digunakan untuk mendefinisikan input form. Lalu ada tag
<frame> yang digunakan untuk mendefinisikan fram. Selanjutnya ada <frameset> digunakan
untuk mendefinisikan attribute halaman yang akan menggunakan frame. Lalu ada <h1>…<h6>
yang digunakan untuk mengatur ukuran font. Lalu ada <hr> yang digunakan untuk membuat
garis horizontal. Tag <html> berarti dokumen html. Lalu ada <i> yang digunakan untuk
membuat teks miring. Selanjutnya ada <img> yang digunakan untuk menginput image,
imagemap atau sebuah animasi. Lalu ada <li> yang digunakan untuk membuat bullet point atau
baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> dan <ul>.
Meskipun dinyatakan sebagai bahasa Mark Up yang powerful, HTML tidak sepenuhnya
bisa membuat website yang professional dan responsive. HTML hanya bisa digunakan untuk
menambah elemen dan membuat struktur konten. Namun disatu sisi, HTML bisa bekerja secara
maksimal dengan dua bahasa fronted CSS (Cascading Style sheets) dan JavaScript. Jika
digabungkan, kedua bahasa fronted ini bisa meningkatkan pengalaman user dan mengaktifkan
fungsi yang lebih canggih. CSS erat kaitannya dengan styling, seperti background, warna,
layout, spacing, dan animasi. Sedangkan JavaScript memungkinkan pengguna untuk
menambahkan fungsionalitas yang dinamis, seperti slider, pop-up, dan galeri foto.
Untuk membuat sebuah Website, dibutuhkan aplikasi teks editor. Teks editor adalah
sebuah aplikasi yang biasa dipakai programmer untuk menyusun kode program sehingga
menjadi aplikasi baru. Berikut ini aplikasi text editor terbaik yang bisa digunakan untuk
membuat website, diantaranya adalah sebagai berikut. Yang pertama ada aplikasi Notepad++,
aplikasi ini menyediakan fitur tambahan yang lebih modern dan canggih. Notepad hanya
menggunakan tampilan menu yang simple dengan latar putih, sedangkan di notepad++ akan
terlihat banyak tampilan pilihan ikon dan menu. Aplikasi ini bisa embaca berbagai macam
bahasa pemrograman, tersedia juga menu plugin untuk menambah fitur. Notepad++
menggunakan tampilan jendela tab. Fitur ini akan sangat berguna ketika pengguna membuka
beberapa file dalam satu waktu.
Berikutnya ada aplikasi Sublime text, salah satu keunggulan dari sublime text adalah
tampilannya yang dinamis. Tersedia juga beberapa tema yang dapat dipilih sesuai selera.
Sublime text termasuk editor yang mendukung berbagai macam sistem seperti Windows, Mac,
dan Linux. Keunggulan lainnya dar sublime adalah cepat dan dapat digunakan bahkan di
perangkat resource yang kecil. Selanjutnya ada aplikasi Visual Code Studio, tampilan pada
aplikasi ini cukup menarik dengan beberapa ornament yang khas disana. Visual Code Studio
merupakan text eeditor yang powerful sehingga pengguna pasti menyukainya. Visual code ini
menyediakan fitur yang dapat melengkapi baris kode yang ditulis secara otomatis.
Selanjutnya, ada aplikasi Komodo edit, aplikasi ini cukup mirip dengan sublime text.
Keduanya memiliki fitur-fitur yang cukup dipakai diberbagai macam sistem operasi seperti
windwos, linux, dan Mac OS. Selanjutnya ada aplikasi Atom, aplikasi ini tidak kalah dengan
sublime text. Selain tampilannya menarik dan desain yang elegan aplikasi ini juga mendukung
banyak bahasa. Jika menginginkan fitur tambahan, dapat juga langsung menambahkannya
melalui menu plugin yang tersedia. Lalu ada aplikasi BlueFish, aplikasi ini meskipun terbilang
ringan aplikasi ini bisa juga digunakan untk menangangi aplikasi yang cukup besar secara
berkala. Aplikasi Text Editor lainnya adalah VIM, Emacs, Geany, Brackets, dan masih banyak
aplikasi lainnya.
IV. Pembahasan
HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap
browser serta di maintain oleh World Wide Web Consortium. Berdasarkan cara kerja HTML,
pengguna bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web
dengan memakai coding HTML sederhana. HTML merupakan level terbawah dari teknologi
frontend dan berfungsi sebagai dasar styling yang bisa anda tambahkan dengan CSS dan
fungsionalitas yang dapat dijalankan menggunakan JavaScript.
Sebelum membuat sebuah web sebaiknya kita mengenal dulu bagian-bagian kode beserta
keterangannya. Yang pertama ada kode <!- -> yang digunakan untuk memberi komentar atau
keterangan. Kalimat yang terletak pada tag kontiner ini akan terlihat pada browser. Lalu ada <a
href> digunakan untuk membuat link ke halaman lain atau ke bagian lain dari halaman tersebut.
Kemudian untuk membuat nama bagian yang di definisikan pada link di halaman yang sama.
Selanjutnya untuk mendefinisikan daerah yang dapat di klik (link) pada image map. Lalu ada
<applet> sebagai awal dari Java applets. Untuk membuat teks tebal bisa menggunakan tag <b>.
Kemudian untuk membuat atribut teks default seperti jenis, ukuran dan warna font
menggunakan tag <basefont>. Selanjutnya untuk memberi latar suara (background sound) pada
web yang dibuat bisa menggunakan tag <bgsound>.
Selanjutnya ketika ingin memperbesar ukuran teks sebesar satu point dari defaultnya
menggunakan kode <big>. Lalu untuk membuat teks berkedip-kedip menggunakan kode
<blink>. Untuk membuat teks pada baris selanjutnya atau untuk pindah baris menggunakan tag
<br>. Setelah itu untuk membuat caption pada tabel bisa menggunakan kode <caption> dan
kemudian utnuk membuat teks atau gambar berposisi di tengah web bisa gunakan kode
<center>. Kode untuk meletakkan komentar pada halaman web dan tidak akan tampak pada
browser adalah <Comment>. Untuk mengindents teks gunakan kode<dd>. Lalu untuk mewakili
bagian teks yang berbeda bisa menggunakan kode <div>. Untuk menambahkan sound atau file
AVI ke halaman web bisa menggunakan kode <embed>. Kemudian untuk membuat nama
bagian yang di definisikan pada link selain bisa menggunakan <a name> bisa juga
menggunakan <fn>. Selanjutnya untuk mengganti jenis, ukuran, warna huruf yang akan
digunakan bisa menggunakan kode <font>. Kemudian untuk mendefinisikan input form bisa
menggunakan kode <form>. Lalu untuk mendefinisikan frame bisa menggunakan kode tag
<frame>. Untuk mendefinisikan attribute halaman yang akan menggunakan frame bisa
menggunakan kode tag <frameset>.
Kemudian untuk mengubah ukuran font bisa menggunakan kode <h1>…<h6>. Untuk
membuat gasri horizontal pada web bisa menggunakan kode <hr>. Lalu kode <html> berarti
dokumen html. Kemudian untuk membuat teks miring gunakan kode tag <i>. Lalu untuk
menambahkan gambar atau animasi bisa menggunakan kode <img>. Berikutnya untuk
mendefinisikan input field pada form bisa menggunakan kode tag <input>. Berikutnya ketika
ingin membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>,
<ol> dan <ul> bisa menggunakan tag <li>. Lalu untuk membuat scrolling teks atau teks berjalan
bisa menggunakan kode tag <marquee>. Untuk mencegah ganti baris pada teks atau images
bisa menggunakan tag <nobr>. Jika pada browser tidak mendukung frame bisa menggunakan
tag <noframes>. Untuk mendefinisikan awal dan akhir pada list bisa menggunakan tag <ol>
untuk mengganti paragraph bisa menggunakan kode <p>. Untuk membuat teks dengan ukuran
yang sama bisa menggunakan kode tag <script>. Untuk membuat table bisa menggunakan kode
tag <table>. Sedangkan untuk membuat kolombya bisa menggunakan <td> dan untuk barisnya
bisa menggunakan kode <tr>. Untuk membuat teks bergaris bawah bisa menggunakan <u>.
Sebelum membuat HTML pada web, pertama yang diperlukan untuk membuat html adalah
aplikasi teks editor. Aplikasi ini akan menjadi tools untuk kalian membuat kode-kode HTML
yang dibutuhkan untuk membangun sebuah halaman website. Pada kali ini saya menggunakan
aplikasi notepad++ sebagai aplikasi teks editor untuk membuat website. Kedua yang diperlukan
adalah browser untuk menjalankan website nya. Disini browser yang direkomendasikan adalah
google chrome atau mozzila firefox. Setelah mengenal struktur apasaja yang ada pada html,
sekarang akan dijelaskan cara-cara membuat website sederhana menggunakan aplikasi
notepad++.
Langkah pertama yang harus dilakukan adalah menginstall aplikasi notepad++ terlebih
dahulu, setelah selesai menginstall dan memasang aplikasi Notepad++ pada laptop anda,
langkah berikutnya adalah membuka aplikasi tersebut. Setelah aplikasi terbuka kemudian
ketikkan <HTML> lalu klik enter kemudian ketikkan lagi <HEAD> setelah itu ketikkan
<TITLE>, misalkan disini saya akan membuat judul Tugas Praktikum TIK, jadi saya harus
mengetikkannya dengan format <TITLE>Tugas Praktikum PIK</TITLE> (untuk bagian
belakangnya harus dikunci karena apabisa bagian itu tidak ditulis maka web akan menganggap
tulisan kita belum selesai). Kemudian selanjutnya ketikkan </HEAD> untuk menguncinya juga.
Lalu klik enter. Setelah itu ketikkan format <BODY> lalu ketikkan lagi <H1>masukkan teks
yang akan diisi</H1> kemudian kunci lalu ketikkan <HR><P> untun membuat paragraph baru/
baris baru, lalu kunci dengan menggunakan</P><HR></BODY><</HTML> setelah itu
simpan di folder yang dinginkan, simpan file tersebut dengan format html.
Berikut ini dasar-dasar pada HTML. Untuk membuat judul tab dalam halaman web, buka
notepad++ kemudian ketikkah kode berikut <html> lalu enter kemudian ketikkan <head> lalu
enter lagi kemudian ketikkan <title> (teks yang ingin dimasukkan)</title> lalu enter lagi
kemudian ketikkan </head> untuk mengunci judulnya kemudian klik enter lagi lalu ketikkan
<body BGCOLOR=”Green” TEXT=”Red”> format berikut maksudnya adalah agar
beckgroundnya warna hijau dan tulisan pada webnya warna merah, lalu ketikkan teksnya tanpa
menggunakan kode misalkan SELAMAT DATANG di WEB SAYA lalu klik enter kemudian
ketikkan kode </body> untuk menguncinya agar tidak berubah, lalu klik enter lagi setelah itu
ketikkan <body bgcolor=”> lalu klik enter kemudian tutup dengan </html>.
Untuk mengatur paragraph pada notepad++ ketikkan kode <html> lalu klik enter kemudian
ketikkan <head> lalu klik enter lagi kemudian ketikkan kode <title> Tag P, Br dan Hr</title>
lalu klik enter kemudian </head> lalu ketikkan kode <body> setelah itu klik enter kemudian
ketikkan kode <p>(lalu ketik isi paragraph). <br><br></p> fungsi kode <br> itu adalah untuk
membuat baris baru. lalu klik enter kemudian ketikkan kode <p> (isi paragraph) </p> lalu klik
enter setelah itu klik </body> lalu klik enter <body bgcolor=”warna”> lalu ketik kode </html>.
Untuk mengatur ukuran huruf di notepad++ caranya sama seperti yang sebelum-
sebelumnya yaitu ketikkan <html> lalu klik enter kemudian ketik <head> kemudian klik enter
kembali lalu ketikkan <title> Tag Heading </title> lalu klik enter setelah itu ketik kode <body>
lalu kli enter lagi dan kemudian ketik kode ukuran fontnya, jika ingin menggunakan font yang
paling besar bisa ketikkan kode <h1>(isi tulisan)</h1>, dan apabila ingin menggunakan font
yang paling kecil bisa menggunakan kode <h6>(isi tulisan)</h6> lalu klik enter kemudian ketik
</body> lalu klik enter lagi kemudian ketikkan <body bgcolor=”sesuai warna yang
diinginkan”> lalu tutup dengan kode </html>.
Untuk mengatur format teks di notepad++ , caranya adalah ketikkan kode <html>
kemudian klik enter lalu ketik kode <head> klik enter lagi kemudian ketikkan kode <title>
format tulisan</title> lalu klik enter kemudian ketik </head> lalu ketik <body> lalu enter
kemudian ketikkan teks normat <br> lalu enter lagi setelah itu ketikkan kode <small>(teks yang
ingin dibuat)</small><br>, kita bisa mengganti kata small dengan kata big atau b untuk tulisan
yang tebal dan I untuk tulisan miring, lalu ada u untuk teks bergaris (disesuaikan dengan format
yang diinginkan).
Berikutnya adalah cara untuk membuat form komentar pada notepad++, caranya adalah
ketikkan kode <html> kemudian klik enter lalu ketik kode <head> klik enter lagi kemudian
ketikkan kode <title> form komentar</title> lalu klik enter kemudian ketik </head> lalu ketik
<body> lalu enter, kemudian ketik kode <table> lalu klik enter, setelah itu ketikkan kode <tr>
lalu setelah itu klik enter lagi kemudian ketikan kode <tdcolspan=”3”>&nbsp:</td></tr><tr>
misalkan contohnya <td solspan=”3”><h3>(isi format teks yang akan dibuat”:</h3(heading
disesuaikan)></td>. Setelah itu enter kemudian klik kode </tr> lalu klik enter lagi, dan setelah
itu ketikkan kode <tr> lalu enter kemudian ketikkan <td>(isi sesuai format yang
diinginkan)</td> lalu klik enter selanjutnya ketikkan kode <td>:</td> lalu klik enter kemudian
ketikkan kode <td><input type=text name=”isi sesuai format masing-masing”></td> lalu
selanjutnya lakukan hal yang sama untuk membuat kolom form selanjutnya. Setelah selesai klik
enter kemudian untuk membuat tombol submitnya kita bisa memasukkan kode <td
cosplan=”3”><input type=submit name=”submit” lalu klik enter kemudian ketikkan kode
value=submit></td> lalu setelah itu klik enter kemudian ketikkan kode </tr> lalu klik enter lagi,
selanjutnya ketikkan kode </table> lalu klik enter dan ketikkan kode </body> dan klik enter
lagi setelah itu sesuaikan warna backgroundnya sesuai keinginan lalu yang terakhir ketikkan
kode </html>.
Berikutnya adalah cara membuat website sederhana di notepad++. Hal pertama yang harus
dilakukan adalah membuka aplikasi notepad++ nya terlebih dahulu, kemudian ketikkan <html>
lalu klik enter dan ketikkan <head> lalu klik enter lagi setelah itu ketikkan titlenya dengan
format <title>(isikan judul yang akan dibuat</title> dan setelah itu klik enter dan ketikkan
</head> untuk menutup file tersebut. Setelah bagian atasnya selesai kita bisa masuk kebagian
body atau isi untuk si website tersebut. Pertama yang bis akita lakukan adalah menambahkan
background pada web yang kita buat, format yang digunakan untuk background gambar adalah
<body background=”(format foto)”> jika hanya ingin menggunakan background warna
formatnya adalah <body bgcolor=”warna yang disesuaikan”>. Selanjutnya untuk judul pada
website ukurannya bisa disesuaikan, misalkan kita ingin memilih ukuran yang paling besar bisa
menggunakan heading 1 cara menulis formatnya adalah <h1> setelah itu bisa ditambahkan font
sesuai keinginan kita misalkan kita ingin warna font kita putih, tampilannya huruf times new
roman dan posisinya ditengah kita bisa menuliskannya dengan format <font color=”white”
face=”times new roman”><center>lalu isikan judul pada websitenya kemudian jangan lupa
ditutup dengan menggunakan format </font> dan </center>.
Langkah selanjutnya adalah klik enter, kemudian ketikkan format <br> untuk garis baru
(agar tulisannya turun ke bawah tidak sejajar dengan judul) disini saya akan membuat format
biodata, jadi disini saya akan menambahkan foto saya dengan posisi yang berada tepat dibawah
judul tadi, caranya adalah dengan mengetikkan format <img src=”nama file fotonya.jpg”
width=”ukuran fotonya disesuaikan dengan keinginan” height=” ukuran fotonya disesuaikan
dengan keinginan”></br>. Setelah menambahkan foto disini saya akan membuat form di
HTML caranya adalah klik enter lalu ketikkan format <table> untuk membuat tulisan berada
ditengan tinggal tambahkan saja format <center> lalu warnanya disesuaikan seperti yang
dilakukan untuk membuat judul lagi. Disini saya tidak akan membuat table yang terlihat, jadi
di formatnya tidak ditambahkan menu tags border. Lalu klik enter kemudan yang pertama kita
akan membuat form nama, caranya adalah ketikkan <tr> lalu kemudian klik enter kemudian
ketikkan formatnya <td> font color=”white”><nama</font></td> lalu klik enter dan ketikkan
format< td><font color="white">:</font></td> dan klik enter lagi kemudian ketikkan format
<td><font color="white"><input type=text name="Nama"></font></td> setelah itu klik enter
dan kunci dengan </tr>. Langkah selanjutnya adalah klik enter kemudian ketikkan <tr> lalu
klik enter lagi, dibawah nama saya akan membuat form NIM, langkahnya sama saja seperti
membuat form nama. Setelah form NIM dibuat, selanjutnya klik enter dan ketikkan tags <tr>
lalu setelah itu klik enter lagi, selanjutnya saya akan membuat form tanggal lahir, form tanggal
lahir disini tidak menulis manual melainkan memilih dari tanggal, caranya adalah dengan
mengetikkan format <td><font color="white">TTL</font></td>, lalu setelah itu klik enter dan
ketikkan format <td><font color="white"><input type="date" name="tanggal"></font></td>
kemudian klik enter dan tutup dengan </tr> fungsinya adalah agar tidak tercampur dengan
kalimat dibawahnya.
Setelah membuat form tanggal, saya melanjutkan untuk membuat form agama, form ini
hanya bisa dipilih 1 saja. Caranya adalah, hal pertama yang harus dilakukan adalah membuat
judulnya dulu lalu kemudian klik enter setelah itu ketikkan format sebagai berikut. <td><font
color="white"><input type="radio" name="Agama" value="Islam">Islam</font></td>
lakukan cara yang sama sampai anda membuat beberapa opsi. Setelah selesai membuat opsi,
anda bisa mengklik enter kemudian tutup dengan format </tr>. Setelah itu saya akan membuat
form jenis kelamin, caranya sama saja seperti membuat form agama. Setelah selai membuat
form jenis kelamin, dilanjutkan dengan membuat form email, cara membuat form email adalah
sebagai berikut, yang pertama adalah mengetikkan format sebagai berikut <td><font
color="white">E-mail</font></td> lalu klik enter dan tulis format berikut <td><font color="
white"><input type="e-mail" name="E-mail" placeholder="Your email..."></font></td>.
Fungsi placeholder disini adalah sebagai pesan. Setelah selai dari itu, lalu klik enter dan jangan
lupa di tutup.
Selanjutnya saya akan membuat form hobi, misalkan hobi kita lebih dari 1 bisa
menggunakan format “checkbox” untuk agama seperti diatas tadi karena hanya dibolehkan 1
maka menggunakan format radio, lain halnya dengan checkbox yang bisa digunakan untuk
memilih lebih dari satu pilihan. Caranya adalah dengan mengetikkan format <td><font
color="white">Hobi</font></td> terlebih dahulu, lalu selanjutnya klik enter dan kemudian
ketikkan format <td><font color="white"><input type="checkbox" name="Hobi"
value="Memasak">Memasak</font></td>. Lalukan hal yang sama sampai semua opsinya
selesai ditulis. Saya juga disini melakukan hal yang sama pada form dosen favorit dan makanan
favorit.
Setelah selesai membuat form di website yang sama saya juga menuliskan kesan dan pesan
selama praktikum. Kesan dan pesan ini ditulis dalam bentuk table, kalau yang diatas tabelnya
tidak kelihatan tapi yang ini tabelnya diperlihatkan. Caranya adalah yang pertama membuat
judul terlebih dahulu, formatnya adalah sebagai berikut. <h1><font color="white" size="6"
face="comic sans MS"><b><center>PESAN dan KESAN untuk ASLAB</font></br>. Disini
saya menggunakan font color nya warna putih, heading yang saya pakai adalah heading 1
karena itu untuk judul, jadi harus besar. Posisinya saya atur menjadi ditengah dan tampilan
hurufnya adalah comic san ms. S. setelah itu klik enter kemuadian ketikkan format <table
border="1" cellpadding="10"><font color="white" face="comic sans MS"> cellpadding disini
berfungsi sebagai penentu jarak antar tabel, setelah itu bisa mulai mengetikkan kesan dan
pesannya. Lalu jika semuanya sudah selesai tutup dengan mengetikkan format </html>. Dan
jadilah web yang dibuat, simpan dengan format .html.
V. Kesimpulan
1. HTML diciptakan pertama kali oleh Tim Berners Lee pada tahun 1989.
2. Struktur umum dari HTML adalah HTML, HEAD, dan BODY.
3. Perintah-perintah dasar pada HTML misalkan kode <h> untuk membuat teks menjadi
tebal dan <center> untuk membuat teks berada di tengah layer.
4. Misalkan kita mengetikkan kode <i>KESIMPULAN</i>, maka hasilnya adalah
KESIMPULAN (hurufnya miring).
5. Contoh editor text yang bisa digunakan untuk membuat website diantaranya adalah
Notepad++, Sublime text, Microsoft Frontpage, dan lainnya.
 Daftar Pustaka

Helianthusonfri, Jefferly. 2015. Cepat Praktis dan Gratis Membuat Website Panduan Lengkap
Membuat Website dengan Cepat dan Gratis. Jakarta: Penerbit PT Elex Media
Komputindo.

Nugroho, Nurcahyo Budi dan Badrul Anwar. 2008. Desain Web Menggunakan HTML dan
Javascript. Jurnal Saintikom vol. 4 no. 1 (Hal.100)
Paskisvisva. 2014. Cara Membuat HTML dengan Notepad. https://paskiviska.wordpress.com/.
(di akses pada tanggal 16 November 2020 pukul 19.43).
Tim Asisten. 2018. BAB VIII HyperText Markup Language. Indralaya : Laboratorium
Komputasi Jurusan Matematika Universitas Sriwijaya.
Lampiran Soal
1. Buatlah biografi diri sendiri di HTML sekreatif mungkin. (Screenshoot hasilnya lengkap-
lengkap).
Jawab:

Dengan syntax di atas hasilnya akan seperti ini

2. Buatlah kesan dan pesan untuk asistes lab komputasi dan kesan pesan selama praktikum
sekreatif mungkin. (screenshoot hasilnya lengkap-lengkap).
Jawab:

Hasilnya akan menjadi seperti ini:

Note:
Gunakan sintaks-sintaks yang bervariasi (boleh gunakan sintaks yang tidak ada pada modul/
hasil searching).
Lampiran E-book, Jurnal, dan Website