Madul 2 Praktikum Rekayasa Web

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-2


 

 


Disusun oleh

Dr. Uung Ungkawa, MT

 

 

 

Text Box: Laboratorium Basis Data
Program Studi Informatika
ITENAS 2020


 

Modul 2

Hypertext Markup Language (HTML)

 

1       Tujuan :

1.      Menunjang mata kuliah Rekayasa  Web

2.      Mengetahui, mengenal dan memahami dokumen HTML

 

2        Jenis Praktikum :

1.      Eksplorasi HTML

 

3        Persyaratan :

1.      Praktikan harus menyiapkan terminal (Windows) perintah.

2.      Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.

3.      Praktikan harus menyiapkan browser (Chrome, Firefox).

 

4        Perangkat praktikum :

1.      PC / Notebook

 

5        Materi

 

Hypertext markup language (HTML) adalah bahasa markup, bukan bahasa pemrograman. HTML hanya mengatur penampilan isi dokumen yang akan diinterpretasikan dan ditampilkan browser. Untuk sekedar menampilkan halaman web statis yang hanya menampilkan isi yang tetap untuk semua keadaan, cukup hanya menggunakan HTML. HTML ini menjadi bahasa markup standar untuk membuat halaman web. HTML juga menentukan struktur halaman web.

Struktur dokumen HTML terdiri dari sejumlah elemen. Secara garis besar dokumen HTML terdiri dari kepala (head) dan badan (body). Di bagian kepala ini didefinisikan berbagai hal berkaitan dengan dokumen seperti judul halaman, corak (ragam, style) yang digunakan, script yang terkait, meta data dan lainnya. Di bagian badan, disusun elemen-elemen pembentuk dokumen seperti judul, isi, tabel, list, gambar, video juga ditentukan tata letak elemen-elemen tersebut. Struktur sederhana dokumen HTML dapat dilihat seperti Gambar 1.

Struktur HTML


Gambar 1
. Struktur HTML


Berbagai elemen HTML dibedakan dan didefinisikan dengan tag-tag HTML. Untuk membuat judul (heading) digunakan tag judul yang terdiri dari enam level dari level 1 (heading 1) sampai dengan judul level 6 (heading 6). Judul level 1 dimarkup dengan tag pembuka <h1> dan diakhiri dengan tag penutup </h1> demikian seterusnya untuk heading di bawahnya. Umumnya tag ada dua: tag pembuka (pemula) atau start tag dan tag penutup (end tag). Untuk membuat paragraf digunakan tag <p> dan diakhiri tag </p>.

Sejarah HTML

HTML ini pertama kali dikembang oleh Tim Berners-Lee seorang warga negara Inggris pada tahun 1991. Dalam sejarahnya, HTML berkembang menjadi beberapa versi hingga sekarang versi 5. Secara singkat, sejarah HTML tertera seperti pada Tabel 1:

Tabel 1. Sejarah HTML

Tahun

Versi

1989

Tim Berners-Lee menciptakan www

1991

Tim Berners-Lee menciptakan HTML

1993

Dave Raggett merancang HTML+

1995

HTML Working Group mendefinisikan HTML 2.0

1997

W3C Recommendation: HTML 3.2

1999

W3C Recommendation: HTML 4.01

2000

W3C Recommendation: XHTML 1.0

2008

WHATWG HTML5 Rancangan umum pertama

2012

WHATWG HTML5 Living Standard

2014

W3C Recommendation: HTML5

2016

W3C Candidate Recommendation: HTML 5.1

2017

W3C Recommendation: HTML5.1 2nd Edition

2017

W3C Recommendation: HTML5.2

 

Deklarasi Dokumen HTML

HTML 5 dideklarasikan dengan tag <!DOCTYPE html>. Tag ini tidak memiliki tag penutup. Deklarasi ini memberitahu browser jika dokumen tersebut adalah dokumen html versi 5. Deklarasi ini dipasang di awal, paling atas.

Elemen HTML

Elemen HTML diawali dengan tag awal (start/open tag) kemudian isi elemen dan diakhiri dengan tag akhir (end tag). Tag akhir hampir sama dengan tag awal, hanya saja ditambah garis miring maju (forward slash, /). Contoh:

                <p>Ini Paradraf di dalam dokumen html.</p>

Elemen di dalam HTML umumnya bersarang (nested), yakni elemen di dalam elemen seperi:

                <body>

                                <p>Paragraf</p>

                </body>

 

Atribut

Umumnya, elemen HTML memiliki atribut. Atribut ini memberikan informasi tambahan tentang elemen. Atribut selalu dipasang di tag awal. Sintaks atribut terdiri dari nama atribut = nilai. Contoh di bawah ini atribut style pada tag p.

                <p style=”color:blue”>Teks dalam paragraf ini berwarna biru</P>

URL

Beberapa atribut menggunakan URL untuk mengakses sumber daya web seperti gambar, atau berkas lainnya. Tag img (<img>) yang digunakan untuk menampilkan gambar dalam HTML memiliki atribut src yang mengakses file gambarnya seperti:

                <img src=”URL”>

URL sebagai lokator, penunjuk lokasi sumber daya yang dibutuhkan, bisa berupa lokasi absolut (mutlak) atau lokasi relatif (nisbi). Lokasi absolut adalah lokasi dengan alamat web penuh seperti https://www.itenas.ac.id/... Sedangkan alamat relatif adalah alamat yang mengacu pada alamat

Corak/Ragam (style)

Tanpa pencorakan (styling) dokumen HTML akan ditampilkan dengan corak default. Pada HTML versi 5 ini dianjurkan pencorakan menggunakan cascading style sheet (CSS), yang akan dibahas dalam modul berikutnya.

Format

HTML memiliki beberapa elemen untuk mendefinisikan teks dengan arti khusus yang ditentukan dengan format teks seperti teks penting, teks yang dihapus dan linnya. Bebrapa format tersebut adalah:

  • <b> - Bold text, teks tebal
  • <strong> - Important text, teks penting
  • <i> - Italic text , teks miring
  • <em> - Emphasized text, teks yang ditekankan
  • <mark> - Marked text , teks yang ditandai
  • <small> - Smaller text , teks yang lebih kecil
  • <del> - Deleted text , teks yang dihapus
  • <ins> - Inserted text, teks yang disisipkan
  • <sub> - Subscript text, teks subskrip, di bawah
  • <sup> - Superscript text, teks superskrip, di atas

Komentar

Seperti dalam bahasa pemrograman, di dalam HTML juga bisa menuliskan komentar. Komentar ini tidak diproses browser dan diperlukan untuk memberi catatan, tanda, ciri atau pengingat. Komentar dalam HTML diawali tag <!-- dan diakhiri -->.

Warna

Kita bisa mengubah warna teks dan latar belakang dengan warna yang baku (standar) tersedia (predefined). Kita juga bisa menentukan warna sendiri dengan dengan campuran warna RGB (Red Green Blue), atau dengan bilangan hexa untuk kode warna atau HSL (hue saturation lightness).

Link (Tautan)

Link banyak dijumpai di halaman web. Linik memungkinkan pindah dari suatu halaman ke halaman yang lain. Link HTML adalah hyperlink, kita bisa pindah ke dokumen lain. Jika ada mouse menempel di tempat link, bentuk mouse berubah menjadi bentuk tangan kecil. Link bisa berupa gambar ataupun teks. Sintaks link:

                <a href=”URL”>Teks link</a>

Link menggunakan tag a (anchor) dan atribut pentingnya adalah href yang menunjukkan tujuan link. Teks link ini yang tampak oleh pengguna dan jika diklik akan membawa pengguna ke halaman yang dituju. Warna teks link berubah sebagai berikut:

·         Link yang belum dikunjungi (diklik) teks link bergaris bawah dan berwarna biru

·         Link yang sudah diklik bergaris bawah dan berwarna orange

·         Link yang sedang aktif (seang diklik) bergaris bawah dan berwarna merah

Atribut target menentukan bagaimana jendela untuk halaman link dibuka:

·         _self - Default. Buka di jendela/tab yang sama

·         _blank - Buka di jenela/tab yang baru

·         _parent - Buka di frame induk

·         _top - Buka di full-body dari jendela

Gambar

Gambar berguna untuk menjelaskan urian, memperindah dan mempercantik halaman web. Menampilkan gambar di dalam halaman web bisa menggunakan tag <img>:

                <img src=”URL” alt=”Gambar tidak ada”>

URL menunjukkan lokasi sumber daya (berkas gambar) yang akan ditampilkan. Nilai atribut alt akan ditampilkan jika sumber daya tidak ada. Ukuran gambar bisa diatur dengan atribut height dan width atau sebaiknya gunakan atribut style.

Gambar bisa dijadikan anker untuk link dan bisa dipetakan untuk beberapa link dalam satu gambar. Misalnya gambar dibagi empat bagian, tiap bagian menjadi link untuk tujuan berbeda dengan tag <map>. Gambar juga bisa dijadikan gambar latar belakang beberapa elemen.

 

Block dan Inline

Setaip elemen HTML memiliki nilai tampilan (display) default. Ada dua nilai tampilan: block dan inline. Elemen dengan tampilan block akan selalu tampil di baris baru dan mengambil tempat seluruh lebar yang ada (merentang dari kiri ke kanan). Sedangkan elemen yang inline, tidak memulai tampilan di baris baru dan hanya mengambil tempat secukupnya (seperlunya).

Secara default, elemen <div> termasuk elemen level block. Elemen <div> sering digunakan sebagai wadah untuk elemen lain. Elemen <div> tidak memiliki atribut wajib, tapi sering menggunakan atribut style, class dan id. Di amping elemen <div> ada elemen <span> yang bersifat inline. Elemen ini digunakan untuk wadah untuk mengubah sebagian teks atau sebagian dokumen. Elemen ini juga tidak memiliki atribut wajib tetapi lazim menggunakan atribut style, class dan id. Elemen <div> dan <span> itu berbeda di tampilan, yang satu block yang lain inline.

Class dan Id

Atribut class digunakan untuk menentukan satu kelas elemen HTML. Beberapa elemen HTML dapat memiliki kelas yang sama secara bersama. Atribut class seringkali digunakan untuk menunjuk nama suatu kelas dalam lembar style (style sheet). Atribut ini juga bisa digunakan Javascript untuk mengakses dan memanipulasi elemen melalui nama kelasnya. Sintaks untuk kelas menggunakan tanda titik (.) dan diikuti nama kelasnya.

kalau class menunjukkan sekelompok elemen, di pihak lain, Id menunjukkan satu elemen secara unik, tidak ada duanya. Atribut id digunakan untuk menentukan satu elemen secara unik sehingga tidak boleh menentukan dua elemen dengan id yang sama dalam satu dokumen. Atribut id digunakan untuk menunjukkan satu elemen unik untuk ditentukan coraknya, atau untuk diakses dan dimanipulasi. Sintaks id adalah karakter hash (pagar, #) diikuti nama idnya. Atribut id juga bisa digunakan untuk bookmark dan melakukan navigasi halaman dengan bookmark itu.

Form

Kita sering membutuhkan form untuk meminta data/masukan dari pengguna. Form terdiri dari beberapa isian (field) dan diberi tombil submit untuk mengirim data. Isian form bisa ditentukan wajib tidaknya dan divalidasi jika perlu. Validasi form dilakukan untuk memastikan jika data yang diberikan sesuai kriteria. Misal, alamat email, harus memiliki karakter @, ada nama alamat situs, dan seterusnya. Karena ada berbagai jenis data, maka ada banyak jenis isian form: input, label, option, slection, text area, dan sebagainya. Isian input sendiri ada banyak ragamnya: text, radio, checkbox, tombol, warna, tanggal dan sebagainya.

 

6        Latihan

Eksplorasi HTML

·         Siapkan browser Chrome atau Firefox

·         Siapkan penyunting teks (text editor) seperti Eclipse, VS Code, Netbean, Notepad++ atau yang lainnya.

·         Buatkan halaman web sederhana dengan struktur HTML yang lengkap, dengan cara membuat file dengan ekstensi htm atau html.

·         Buka file tersebut dengan browser.

 

7        Tugas Akhir

1.      Buatkan file html yang menampilkan 10 orang mahasiswa di kelas praktikum anda dengan tabel.

2.      Buatkan file html yang menampilkan sejumlah produk minuman dengan list yang tidak urut (unordered list)

3.      Buatkan file html yang menampilkan kandidat ketua mahasiswa sesuai hasil perhitungan.

4.      Buatkan bookmark untuk navigasi halaman dengan id dan link di dalam dokumen html

5.      Buatkan file html yang menampilkan form data mahasiswa yang mencakup NRP, Nama, Alamat, No HP, Alamat email.

 


Last modified: Sunday, 4 October 2020, 11:12 AM