LAPORAN WEB 1 PENGENALAN HTML

(1)

LAPORAN PRAKTIKUM MODUL 1

PEMROGRAMAN WEB

DASAR-DASAR HTML

Disusun Oleh:

Ananda Putri Syaviri (130533608243)

PTI OFF B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIKINFORMATIKA

(2)

MODUL I

DASAR-DASAR HTML

A.KOMPETENSI DASAR

• Memahami struktur dasar dokumen HTML dan HTML5.

• Mampu membuat dokumen HTML yang baik dan benar.

• Mampu memanfaatkan elemen- elemen dasar untuk menampilkan informasi.

B. PETUNJUK

• Awali setiap aktivitas dengan do’a, semoga berkah dan bermanfaat.

• Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.

• Kerjakan tugas- tugas praktikum dengan baik, sabar dan jujur.

• Tanyakan kepada asisten/ dosen apabila ada hal-hal yang kurang jelas.

C.DASAR TEORI

1. HTML dan XHTML

HTML (HyperText Markup Language) merupakan sebuah bahasa markup, bukan bahasa pemrograman. Bahasa markup (Indonesia: markah) adalah bahasa yang mengombinasikan teks dan informasi tambahan mengenai teks tersebut. HTML merupakan dokumen standar yang digunakan untuk mendesain halaman web. Pada awal tahun 2000, konsorsium W3C (World Wide Web Consortium) membuat perubahan besar melalui XHTML (eXtensible Hypertext Markup Language). Ide dasarnya, dalam upaya meningkatkan kompatibilitas dokumen HTML, W3C menambahkan struktur dan ekstensibilitas XML (eXtensible Markup Language) ke HTML. Perkembangan HTML semakin pesat seiring diperkenalkannya HTML5 pada tahun 2009.HTML5 dibangun oleh konsorsium W3C untuk dimasukkan sebagai perubahan besar berikutnya pada standar HTML. Atas dasar ini, maka penting sekali untuk mengenal dan memahami HTML5 dengan baik.

2. Struktur Dokumen HTML

Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan komplemennya, yakni tag</html> tag. Dokumen HTML juga menyertakan tiga pasang tag.

 Tag <head> dan </head>: digunakan untuk menyatakan informasi mengenai dokumen HTML.

 Tag <title> dan </title>: digunakan untuk menambahkan title di title bar browser.

 Tag <body> dan </body>: digunakan untuk melingkupi semua teks yang terdapat di halaman HTML.

(3)

Pada HTML5, struktur penulisan diringkas menjadi seperti ini :

Di samping elemen utama di atas, masih terdapat berbagai jenis elemen yang dapat digunakan di dalam dokumen HTML. Salah satu elemen yang perlu diperhatikan adalah untuk penulisan komentar. Di HTML, komentar dinyatakan dengan tag .

3. Persiapan Kebutuhan.

Pada praktikum awal ini, meskipun dokumen HTML bisa ditampilkan tanpa menggunakan web server, namun di sini diwajibkan tetap menggunakan. Selain itu, praktikum ini juga menuntut pembuatan kode-kode yang baik, benar, dan valid.Berikut ini adalah kebutuhan-kebutuhan yang minimal diperlukan:

a. XAMPP/WampServer

Paket web server Apache, PHP, dan MySQL. Alasan pemilihan paket bundel seperti ini dikarenakan praktis sehingga tinggal memfokuskan pada pemrograman.

b. Web Browser

Sangat disarankan menggunakan browser utama Mozilla Firefox. Adapun untuk pembanding, sebaiknya juga memanfaatkan browser lain.

c. Editor Teks

(4)

D.LATIHAN

1.Membuat Dokumen HTML

Secara garis besar, struktur dokumen HTML terdiri dari dua bagian: header dan bodi. Di mana header mendefinisikan informasi mengenai dokumen, sedangkan bodi mendefinisikan tubuh atau isi dokumen. Langkah-langkah pembuatan dokumen HTML diperlihatkan sebagai berikut:

1. Buka editor teks.

2. Ketikkan teks (kode-kode HTML) berikut:

<!DOCTYPE html>

<title>Ini judul dokumen</title>

</head>

<body>

Ini adalah teks di body </body>

</html>

Gambar 1.1 kode HTML

Gambar 1.2 Tampilan hasil halaman web

Penjelasan : pada script diatas , untuk baris komentar berwarna hijau , menggunakan struktur penulisan “< !-- -->”. Kemudian DOCTYPE sebagai deklarasi, sangat disarankan untuk ditulis , jika tidak maka menyebabkan penafsiran berbeda saat script html diterjemahkan. Struktur dari html adalah head yang berisi title, kemudian body yang berisi isi dokumen, kemudian untuk menutup atau mengakhiri jangan lupa menyertakan tag penutup “ </body>” , “</html>” sesuai dengan tag pembuka yang dituliskan . script diatas menunjukkan bahwa tittle dokumen tersebut berjudul “ini judul dokumen” dan isi dari dokumen tersebut adalah “ini adalah teks di body”.

2.Publikasi halaman Web

(5)

1. Pastikan bahwafile dokumen sudah diletakkan di direktori web, misalnya untuk WampServer lokasi defaultnya adalah www. Untuk paket web server lainnya, termasuk Apache (versi tunggal) adalah htdocs.

2. Pastikan bahwa web server sudah dijalankan.

3. Buka web browser, kemudian ketikkan alamat URL yang merujuk ke lokasi dokumen.

<!DOCTYPE html>

<title>Ini judul dokumen</title>

</head>

<body>

Ini adalah teks di body </body>

</html>

Penjelasan : script diatas sama dengan script sebelumnya , hanya saja cara membuka atau meload dokumen yang berbeda. Bedanya adalah, scrip sebelumnya diload langsung pada file html yang tersimpan pada direktori computer, sedangkan script diatas diload pada localhost yang tersimpan pada xampp. Sebelumnya file html disimpan pada satu folder yang terletak pada folder htdocs pada program file xampp yang terletak pada direktori C.

3.Format Teks

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.

 Heading .

(6)

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

</body>

Gambar 1.5Kode HTML

Penjelasan : script diatas merupakan struktur penulisan script untuk heading pada html. Heading 1 hingga heading 6. Script diatas menunjukkan perbedaan hasil penulisan heading 1, 2, 3, 4, 5 dan 6. Dari heading 1 sampai 6 penulisan mengecil. Heading digunakan untuk memilih ukuran font untuk pengaturan penulisan judul.

<body>

<h1 align="right">Heading 1</h1> <h2 align="left">Heading 2</h2> <h3 align="center">Heading 3</h3> </body>

(7)

Penjelasan : script diatas merupakan struktur penulisan script untuk pengaturan penulisan judul rata kiri, tengah atauh kanan pada html. Pengaturan untuk penulisan rata kiri, tengah, kanan menggunakan keyword “align”. Pada script diatas dituliskan “<h1 align="right">Heading 1</h1>” ini berarti penulisan judul menggunakan ukuran font heading 1 dengan posisi rata kanan. “<h2 align="left">Heading 2</h2>” artinya penulisan judul menggunakan ukuran font heading 2 dengan posisi rata kiri. “<h3 align="center">Heading 3</h3>” artinya penulisan judul menggunakan ukuran font heading 3 dengan posisi rata tengah ( berada di tengah).

Paragraf

<body>

<p>

Ini paragraf pertama

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore er dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliiquip ex ea commod consequat.

<p>

Ini paragraf ketiga

</body>

(8)

Penjelasan : script diatas menggunakan tag <p> yang berfungsi untuk pindah paragraph. Script diatas menunjukkan cara penulisan pargraf dengan hanya menggunakan tag pembuka. Tag <p> bersifat opsional yang artinya boleh ditulis atau tidak, namun sangat disarankan sebaiknya setiap akhir pargraf tag </p> disertakan untuk kemudahan dan sebagai penanda akhir dari paragraph. Script diatas menunjukkan isi dokumen yang terdiri dari 3 paragraf.

Lorem ipsum dolor sit amet, consectetur adipicising elit, sed do eiusmod tempor incididunt ut labore et dolore

nisi ut aliquip ex ea commodo consequat.

(9)

<body>

Membuat baris baru <br /> Membuat baris baru <br />

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />

sed do eiusmod tempor incididunt ut labore er dolore magna aliqua.

<br />

</body>

Gambar 2.4Kode HTML

Gambar 2.5 Hasil Tampilan Web

Penjelasan : pada script diatas menggunakan tag <br> untuk memasukkan fungsi enter atau diguakan untuk pindah ke baris baru tanpa menekan tombol enter. Script diatas terdiri dari 5 baris dengan 1 spasi.

<body>

<b>Menggunakan tag <b>,,,</b></b><br /> <strong>Menggunakan tag

<strong>...</strong></strong> <br/>

<i>Menggunakan tag <i>,,,</i></i><br /> <em>Menggunakan tag <em>...</em></em><br /> <u>Menggunakan tag <u>...</u></u><br /> <strike>Menggunakan tag

<strike>...</strike></strike><br />

</body>

(10)

Gambar 2.7 Tampilan hasil web

Penjelasan : script diatas adalah cara penulisan atau keyword untuk menggunakan bebebrapa font seperti huruf tebal, miring, garis bawah, dll. Tag <b> dan <strong> berfungsi untuk mencetak tebal font, tag <i> dan <em> untuk mencetak miring, tag <u> untuk mencetak garis bawah pada tulisan, tag <strike> untuk mencetak garis yang melewati tulisan.

Karakter Khusus

<!DOCTYPE html>

<title>Demo Karakter Khusus</title> </head>

<body>

£ Pound <br /> € Euro <br /> © Copyright <br /> ® Registered <br />

™ Trademark <br />

</body> </html>

(11)

Gambar 2.9 Tampilan Hasil Web

Penjelasan : script diatas menggunakan atribut “lang” yang fungsinya untuk mengontrol browser dalam menampilkan karakter khusus yang sangat membantu untuk mencari alamat web dan karakter khusus lainnya. Script diatas menunjukkan karakter khusus untuk penulisan pound, euro, copyright, registered dan trademark. Untuk penulisan nama karakter khusus diawali dengan tanda “&” dan diakhiri dengan “;” misalnya untuk penulisan copyright adalah “©” . tidak hanya menggunkan tanda tetapi masing- masing karakter memiliki nama karakter yang berbeda. Seperti yang dicontohkan pada scrip diatas.

4.Garis Horizontal

<body>

Membuat garis horizontal <hr />

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />

sed do eiusmod tempor incididunt ut labore er dolore magna aliqua.

<br />

<hr />

</body>

(12)

Penjelasan : script diatas menggunakan tag <hr> untuk membuat garis horizontal secara penuh pada dokumen html. Satu perintah menunjukkan satu garis lurus. Penulisannya diletakkan sebagai tag penutup.

5.Menggunakan list

<body>

Ordered List <ol>

<hr />

Unordered List <ul>

<hr />

Definiton List <dl>

<hr />

</body>

(13)

Penjelasan : script diatas menggunakan tag <li> untuk penulisan list. Penulisan list ada 3 macam yaitu ordered list yang menggunakan tag <ol>, unordered list menggunakan tag <ul> dan definition list menggunakan tag <dl>. Kemudian menggunakan tag <dd> yang fungsinya untuk membuat teks sebuah paragraph yang masuk ke dalam. Dd merupakan kepanjangan dari definition description. Tag <ul> untuk membuat tem list dengan tanda bullet. Ul sering disebut dengan bulleted list. Ol untuk membuat item list dengan numbering ( angka arab atau romawi), dan Dl untuk membuat item list dengan kalimat terdefinisi.

6.Pewarnaan

<body bgcolor="aqua">

<h3 align="center">Heading 3</h3>

<font color="red">Font berwarna merah</font><br /> <font color="#FF0000">

Font berwarna merah (menggunakan nilai heksa)</font>

</body>

(14)

Penjelasan : scrit diatas menggunakan pewarnaan pada font dan body. Menggunakan kode warna html. Script diatas juga menerapkan align dan heading 3 untuk ukuran font. Script diatas adalah contoh dari gabungan beberapa aspek yang telah dibahas pada script sebelum- sebelumnya. Pada dokumen ini menggunakan 2 warna. Untuk pewarnaan ada beberapa warbna yang kodenya dituliskan dengan huruf biasa da nada juga yang menggunakan perpaduan imbol, huruf dan angka. Untuk warna merah kode htmlnya adalah ="#FF0000. Masih banyak lagi kode kode warna dalam html, dapat diatur sesuai

keinginan untuk pewarnaan dalam html karena sudah banyak tersedia daftar list kode-kode warna yang bisa digunakan.

7.Bekerja dengan Gambar

<img src="exo.jpg" width="100"/>

<hr />

<p>

<img src="http://localhost/prak1/exo.jpg"width="100"align="right"

/>

</body>

(15)

Penjelasan : pada script diatas disisipkan gambar pada masing- masing paragraph. Script diatas terdiri dari 2 paragraf yang didalamnya terdapat sebuah gambar. Untuk menyisipkan gambar sesudah atau setelah paragraph dapat diatur sesuai yang diinginkan. Jika ingin mennampilkan gambar terlebih dahulu maka script gambar dituliskan terlbeih dahulu baru script paragraph, dan begitu sebaliknya. Untuk pengaturan posisi gambar juga dapat menggunakan align. Untuk menyisipkan gambar jangan lupa format penulisan file direktori tempat penyimpanan dan nama file harus benar. Kemudian untuk mengubah lebar dan panjang gambar dapat diatur dengan menambahkan “width=”100”” misalnya ingin mengubah gambar menjadi 100px.

8.Menggunakan Link Link 1 :

<!DOCTYPE html>

<body>

<a href="link2.html">klik disini</a> </body>

</html>

Link 2:

<!DOCTYPE html>

(16)

Untuk kembali ke halaman pertama <a href="link1.html">klik disini</a> </body>

</html>

Gambar 3.8 Kode HTML

Penjelasan : script diatas menunjukkan cara untuk link antar dokumen. Setiap teks adalah link, ditunjukkan dengan teks bergaris bawah dan bergambar tangan ketika kursor mouse menunjuk teks tersebut. Menggunakan atribut href yang fungsinya untuk menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut.

9. Atribut Link

<!DOCTYPE html>

<title>Demo Atribut Link</title> </head>

<body>

<a href="link2.html" target="_blank" title="Title link">klik disini</a>

</body>

</html>

(17)

Penjelasan : script diatas menunjukkan cara untuk link antar dokumen. Setiap teks adalah link, ditunjukkan dengan teks bergaris bawah dan bergambar tangan ketika kursor mouse menunjuk teks tersebut. Menggunakan atribut href yang fungsinya untuk menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut. Sama seperti script sebelumnya, namun pada script ini tidak menggunakan 2 file html, dijadikan satu dalam 1 file html kemudian nantinya ketika diload tetap menuju file html yang dituju. Perbedaannya pada script html diatas dituliskan target file yang akan dituju.

10. Link Internal

</body>

</html>

(18)

Penjelasan : script diatas menggunakan atribut id untuk membuat link atau melakukan navigasi pada satu dokumen. Untuk penggunaan atribut id harus memiliki nilai yang berbeda, tidak boleh sama. Seperti pada script diatas, ada id dengan nilai pendahuluan dan nilai pembahasan. Pada script diatas juga menggunakan atribut li untuk pembuatan item list dengan tanda bullet. Serta penggunaan ukuran font heading 3.

11. Link Email

<!DOCTYPE html>

<title>Demo Link Email</title> </head>

<body>

<a href="mailto:didik@um.ac.id">didik at um dot ac dot id</a>

</body>

</html>

(19)

Penjelasan : script diatas menunjukkan cara untuk link email yaitu melakukan satu pesan mail. Untuk link email memanfaatkan atribut mailt. Untuk dapat menghubungkan harus dengan catatan bahwa web client harus dalam kondisi terpasang.

12. Link Gambar

<!DOCTYPE html>

<title>Demo Link Gambar</title> </head>

<body>

</a>

</body>

</html>

Penjelasan : script diatas menunjukkan cara untuk link gambar. Script diatas menggunakan gambar google, dengan tittle “search with google”, yang nantinya apabila kursor diarahkan ke gambar maka akan muncul tulisan tittle tersebut. Jika diklik maka akan diarahkan ke laman google.

13. Tabel

<!DOCTYPE html>

<title>Demo Table</title> </head>

<body>

<caption>Label dari tabel</caption>

(20)

<th>No</th> <th>Nama</th> <th>Alamat</th> </tr>

<tr>

Penjelasan : script diatas adalah script untuk membuat table pada dokumen html. Elemen-elemen yang diperlukan untuk membuat table adalah <table>....</table> adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. <th> adalah pembentuk sel header tabel. <caption> adalah pembentuk judul tabel yang dapat diberi tag apa saja. <tr> adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. <td> adalah pembentuk sel data dalam tabel. Jadi pada atribut <td> berisi data yang akan diisi pada atribut <th>.

14. Pemformatan Tabel

(21)

<tr>

Penjelasan : sama seperti script sebelumnya namun pada script ini terdapat perubahan cellspacing (jarak spasi antar sel) sehingga bentuk table berbeda dengan table yang sebelumnya . script diatas adalah script untuk membuat table pada dokumen html. Elemen- elemen yang diperlukan untuk membuat table adalah <table>....</table> adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. <th> adalah pembentuk sel header tabel. <caption> adalah pembentuk judul tabel yang dapat diberi tag apa saja. <tr> adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. <td> adalah pembentuk sel data dalam tabel. Jadi pada atribut <td> berisi data yang akan diisi pada atribut <th>.

<!DOCTYPE html>

<th width="50">No</th>

<th width="150">Nama</th> <th width="200">Alamat</th> </tr>

(22)

</table>

</body>

</html>

Penjelasan : sama dengan scrip sebelumnya namun pada script diatas terdapat modifikasi table, terletak pada lebar table dan jarak spasi antar sel yang berbeda dari sebelumnya. Pada script, untuk mengatur lebar table dapat diatur per kolom. Untuk mengatur lebar kolom dapat disisipkan atribut width dengan penulisan <th width="50">No</th>. Artinya semakin banyak angka yang digunakan maka akan semakin lebar kolom tersebut.

15. Desain Tabel

<th width="350" colspan=2>Span Nama dan Alamat</th> </tr>

<td rowspan=2>Span baris 1 dan 2</td> <td>Ibnu</td>

<td>Jl.Jombang</td> </tr>

(23)

</html>

Penjelasan : pada script diatas terdapat atribut rowspan dan colspan , yang fungsinya untuk menggabungkan beberapa kolom dan baris . Script diatas menggabungkan kolom nama dan alamat dengan atribut colspan , dan baris 1 -2 dengan atribut rowspan. Dengan aturan penulisan, rowspan= 2 yang artinya , pada awalnya row berjumlah 3 dan kemudian dengan menggunakan rowspan maka diganti jumlahnya menjadi 2 karena baris no , 1 dan 2 diubah menjadi no dan baris 1. Begitu juga dengan colspan.

E. STUDI KASUS

1. Membuat halaman web yang sederhana melibatkkan elemen teks, garis, warna, dan gambar. Dan minimal terdapat sebuah heading dan garis berwarna, gambar dengan garis tepi atau border.

Source Code HTML

<body>

<h1 align="center"> Ananda Putri Syaviri </h1> <hr size=7 noshade>

<font color="#C0C0C0">Nama saya : Ananda Putri Syaviri, sering dipanggil

putri dan saya berasal dari Lombok, Nusa Tenggara Barat <br />

<font color="#C0C0C0">Saya sekolah dan besar di lombok, saat ini saya

sedang menempuh perkuliahan disalah satu

universitas di Malang, Jawa Timur. Jawa Timur bukanlah wilayah asing bagi saya karena kedua orang tua saya

berasal dari Jawa Timur. <br />

<font color="#C0C0C0">Saat ini saya sudah menempuh 3 semester di universitas ini. saat ini saya sedang menjalani semester ke-4.

<p>

<font color="#C0C0C0">Saya masuk di Universitas Negeri Malang tahun 2013

(24)

<br/>

<font color="#C0C0C0">Saya bertemu dengan beragam suku , bangsa dan

budaya di universitas ini. Saya mulai beradaptasi dengan budaya disini. <br/>

<font color="#C0C0C0">Di universitas ini saya juga menjalani kegiatan

UKM sebagai anggota paduan suara mahasiswa "Swara Satata Ciakti", sebagai

kegiatan lain selain kuliah. <hr size=4 noshade>

<img src="http://localhost/prak1/putri.jpg"align="right"

/> </body>

Hasil Tampilan Web

(25)

background colour untuk body dengan warna navy yang memiliki kode ="#000080. Lalu

tag <p> menandakan pargraf baru, lalu berisikan tulisan yang diatur dengan warna silver =”#C0C0C0”. Setiap akhir kalimat diberi tag <br/> untuk pindah ke baris baru. Kemudian setelah selesai menulis isi , membuat garis horizontal dengan size 4 (ketebalan nomer 4 ) dan garis horizontal dengan size 7 (ketebalan 7 ) tepat dibawahnya dengan posisi rata kanan dan panjang garis sebesar 350. Terakhir menyisipkan gambar dengan format penulisan script, letak file dan nama file dengan posisi rata kanan.

F. Kesimpulan

 Untuk pengaturan ukuran judul/ tittle terdapat 6 ukuran mulai dari heading 1 sampai 6.

 Tag <p> digunakan untuk pindah ke paragraph selanjutnya.

 Tag <br> digunakan untuk pindah ke baris selanjutnya.

 Tag item list yang digunakan ada 3 yaitu ordered list, unordered list dan definition list.

 Untuk mengubah warna background, font atau garis terdapat kode- kode warna html yang sudah tersedia tentunya dengan format penulisan script yang benar agar

hasilnya benar.

 Elemen- elemen dalam pembuatan table terdiri dari <table>....</table> adalah tag pembentuk tabel, jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0-30. <th> adalah pembentuk sel header tabel. <caption> adalah pembentuk judul tabel yang dapat diberi tag apa saja. <tr> adalah penjelasan baris tabel. atribut yang dipakai adalah align atau valign. <td> adalah pembentuk sel data dalam tabel.

 Untuk membuat sebuah dokumen pada html maka perlu mengetahui struktur penyusunan dokumen, yaitu : head, body, dan tag penutup.

 Sangat disarankan menyertakan deklarasi DOCTYPE dalam penulisan script HTML.

G. Daftar Pustaka