Modul yang dibuat sebagai acuan dalam kegiatan perkuliahan praktikum Mata Kuliah Pemrograman Web di STMIK Amikom Yogyakarta Disusun Oleh Bernadhed, M.Kom Mulia Sulistiyono, M.KomBAB 1. PENGENALAN HTML Tujuan 1. Mahasiswa mengetahui dasar-dasar HTML 2. Mahasiswa mengetahui HTML Editor 3. Mahasiswa mampu membuat dokumen HTML dan melakukan formatting terhadap dokumen tersebut 4, Mahasiswa mampu melakukan text formatting 5. Mahasiswa mampu melakukan listing pada dokumen HTML 6. Mahasiwa mampu membuat listing bersarang pada dokumen HTML Overview Sebuah aplikasi web dibangun menggunakan tag HTML. Pada sesi pertemuan ini akan dipelajari bagaimana membuat dokumen HTML sederhana, memformat tampilan pada dokumen HTML dan membuat list yang yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Untuk praktikum ini akan menggunakan notepad sebagai HTML editornya. . Format Penulisan HTML Untuk membuat suatu halaman HTML standar digunakan tag , , beserta tag penutupnya masing-masing. Susunan tag — tag tersebut membentuk dokumen HTML sebagai berikut : z 3 +++ dnfoxmasi tentang dokumen HTML ‘ +++ dnformasi yang akan dirampilkan di web browser Gambar 1.1 Format Penulisan HTMLPROGRAMMING 1.2. Memulai Membuat Dokumen dengan Format HTML Langkah — langkah untuk memulai membuat dokumen HTML sebagai berikut : 1. Buka notepad++ sebagai editor dokumen HTML. 2. Buat skrip sederhana seperti di bawah ini di notepad++ : J ini adalah web pertama saya dan sukses bisa!!! Gambar 1.2 Format Penulisan HTML 3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi html Path directory :..../nama_folder/soo.hmtl aes +) O@em Name Datemodtied Type 9 FIRST We 121072014801 AM Firefox HT 2 HEADING 12/1072018.804 AM Firefox (9). RERATA PARAGRAF 12/1072018 809 AM Firefox HT (© UNE BREAK 12/1072018981 AM FiefoxHT (©) 5. PREFORMATED TY N0/2014 946 AM Firefox HI [95 FORMAT PENUUSAN 12/1072018 1228... FiefoxHT FORMAT PENULISAN 1220 IO. Firefox HT (© 8. FONT PROPERTIES 12/2018 1026. Firefox (8 9.LINEHORSONTAL 12/4/2014723 PM Fiefox |e) 10. unoROERED UST T22W2018 15. Firefox (1 onDeReD UST 12/30/2014856 AM Feefox HT Flenane: 1 FIRST WEE Seve Seeatnpe: [hyper Tes Mata Language le Chi” nee! Gambar 1.3 Format Penyimpanan HTML pln an Canscaner -htm atauPROGRAMMING 4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut menggunakan web browser. Dengan klick Run ~ Launch in IE. Judul Dokumen HTML, Gambar 1. 4. Tampilan Hasil Eksekusi Contoh 1.3. Tag Dasar dalam HTML 1.3.1 Heading Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam dokumen HTML, dengan berbagai ukuran yang berbeda. Pada dasarnya untuk menyatakan suatu Heading, digunakan tag dimana x adalah level 1 sampai 6. Tag Heading atau adalah tag berpasangan, yaitu tag yang mempunyai tag awal dan tag penutup . sampai

... Format :

.. Contoh : Heading 1

Heading 2

Heading 3

Heading 4
Heading $

Heading 6
adalah 24 Point

adalah 18 Point

adalah 14 Point

adalah 12 Point adalah 10 Point adalah 7 Point MS . pln an CanscanerPROGRAMMING 1.3.2 Paragraf a, Melakukan Formating Paragraf Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus, untuk mendefinisikan teks dengan makna khusus. HTML menggunakan unsur-unsur seperti dan untuk memformat output, seperti teks tebal atau miring. Elemen format yang dirancang untuk menampilkan jenis khusus dari teks: = teks tebal : menggunakan tag teks penting : menggunakan tag © teks miring : menggunakan tag © teks menekankan —: menggunakan tag ‘* teks menandai—_: menggunakan tag teks kecil : menggunakan tag + teks menghapus —_: menggunakan tag © teks memasukkan : menggunakan tag ‘© subscript / pangkat dibawah ——_: menggunakan tag © superscripts / pangkat di atas. : menggunakan tag b. Menggunakan Line Break Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol Enter, maka tidak kan dianggap 1 pun. Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya fungsi tombol Enter pada keyboard. Line break menggunakan tag
c. Preformatted Text Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam editor teks, maka teks yang bersangkutan harus di beri tanda tag

 di
awalnya dan 

di akhir teks, Dengan tag

, yang mempunyai
kepanjangan “preformatted” teks akan di tampilkan dalam browser dengan

pln an CanscanerPROGRAMMING

 

ukuran font dengan lebar - fix. Tag ini juga akan menjaga spasi, baris baru, dan tap
sesuai dengan aslinya pada saat di tampilkan dalam browser.

e. Mengolah Properti Dari Font
Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin
karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style="property. value" untuk mengubah style property dari font. Gunakan atribut
style untuk elemen styling HTML

+ background-color untuk warna latar belakang

color untuk warna teks

‘© font-family untuk font teks

font-size untuk ukuran teks

+ text-align untuk perataan teks

f. Membuat garis Horizontal
Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah 
. Beberapa atributnya adalah ALIGN, SIZE,
dan WIDTH. Tag hr seperti halnya tag br (
) adalah tag yang beridiri sendiri.
Jadi tidak perlu ditutup dengan tag penutup.

1.3.3 List

List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list,
unordered list dan definition list.

a. List Tanpa Urutan (Unordered Lists)

Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol
atau special character pada HTML. nama lain dari unordered list sendiri adalah bullet
list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat
suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini,
pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada
jenis synthax yang digunakan dimana unordered list akan menggunakan 
.

pln an CanscanerPROGRAMMING

 

b. List Berurut (Ordered Lists)
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka,
abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis
elemen yang dibutuhkan yaitu 
 yang merupakan singkatan ordered list dan
> yang merupakan singkatan list item

 

c. Definition List
Definition list merupakan jenis daftar yang _umumnya digunakan untuk
mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga
daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benar-
benar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga
jenis tag : Diawali dengan 
 yang merupakan singkatan definition list; 

yang merupakan singkatan definition term (digunakan untuk kata yang akan
didefinisikan); 
 definition description yang merupakan penjelasan dari suatu
istilah (
).

pln an Canscaner