Laporan pratikum 1

LAPORAN PRATIKUM 1

PRAKTIKUM PEMROGRAMAN BERBASIS WEB

HTML Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang

dibimbing oleh Bapak Didik Dwi Prasetya

Oleh :

GISRA RAHMADHITA

130533608259

S1 PTI 2013 Offering B

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA

JANUARI 2015

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. ALOKASI WAKTU

4 JS (4 x 50 menit) C. PETUNJUK

D. 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.

Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatk an sebagai

berikut:

Pada HTML5, struktur penulisan lebih diringkas dengan bentuk sebagai berikut:

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 Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi web (tidak

diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).

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:

3. Simpan dokumen HTML dengan nama latihan1.1.html dan letakkan di lokasi direktori web (C:\wamp\www atau C:\xampp\htdocs) Perhatikan, wwwdan htdocsmerupakan direktori web dan sebaiknya buat subdirektori di dalamnya.

Bagaimanapun, dokumen HTML memang bisa ditampilkan dengan mengklik ganda di mana pun lokasinya. Namun perlu diperhatikan, langkah ini bukanlah cara untuk menjalankan

halaman web di server lokal. 2. Publikasi Halaman Web

Untuk menguji aplikasi web, kita mempublikasikannya ke web server, baik secara lokal maupun Internet. Lingkungan lokal tentu merupakan pilihan yang efisien, khususnya

ketika aplikasi masih dalam tahap pengembangan. Langkah yang diperlukan untuk publikasi ini sangat sederhana. 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.

3. Format Teks HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.

Heading

Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading

didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan

tipe dengan nilai 1-6.

Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam

implementasinya harus mendeklarasikan semua elemen-elemen dasar. Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.

Paragraf Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri dari kumpulan

paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p>

sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan. Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan

atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri

kanan, dan kanan.

Secara normal, baris baru akan ditambahkan di antara dua paragraf. Adapun jika kita

hanya ingin membuat baru, kita tidak harus menggunakan paragraf. Sebagai gantinya,

gunakan tag line break <br />.

Fontase HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk mengatur font,

seperti huruf tebal, huruf miring, garis bawah, dan masih banyak lagi. Sebagai tambahan, di

sini juga akan dijelaskan mengenai cara mencetak tag. Seperti diketahui, tag <p> di dokumen

secara otomatis akan diterjemahkan sebagai paragraf. Adapun untuk mencetak karakter <p>

di layar, kita perlu menggunakan nama entitas. Sebagai contoh, karakter < dinyatakan dengan

nama entitas < dan karakter > dinyatakan dengan >.

Karakter Khusus Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan

memanfaatkan nama entitas. Tabel berikut memperlihatkan beberapa jenis karakter khusus

yang dapat digunakan beserta nama entitasnya.

4. Garis Horizontal Di HTML, garis horizontal direpresentasikan melalui tag <hr />. Meskipun

kebanyakan browser me-render elemen ini dengan visualisasi yang sedikit berbeda, namun

pada hakekatnya mencerminkan sebuah bentuk garis horizontal.

5. Menggunakan List HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered), dan

definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan melalui tag

<li> berpasangan—yang merepresentasikan item-item list.

6. Pewarnaan

Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag

<body>. Atribut ini dapat diisi dengan nama warna—misalnya red—atau kode

heksadesimal—misalnya #FFFFFF.

Khusus untuk elemen-elemen lain tertentu, tersedia atribut color yang memungkinkan

kita melakukan pewarnaan. Sama seperti bgcolor, nilai atribut ini juga dapat berupa nama

warna atau kode heksadesimal.

7. Bekerja dengan Gambar Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk

keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut.

8. Menggunakan Link

Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks yang memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman lainnya.

Menciptakan Link

HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut) atau singkat (relatif).

Untuk mengetahui cara membuat dan mengaitkan dokumen, ikuti langkah-langkah berikut: 1. Buka editor teks.

2. Ketikkan teks (kode-kode HTML) berikut: 3. Simpan dokumen HTML dengan nama link1.html dan letakkan di lokasi direktori web. 4. Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya akan dikaitkan.

5. Simpan dengan nama link2.html. 6. Untuk menguji hasilnya, buka browser dan arahkan ke alamat link1.html.

7. Klik link yang ada secara bergantian.

Atribut Link Elemen anchor menyediakan sejumlah atribut guna mendukung fungsionalitasnya, dua

di antaranya yang kerap digunakan adalah target dan title. Atribut target digunakan untuk mengatur apakah link akan di buka di window yang sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi untuk menampilkan teks manakala kursor mouse berada di

atas link.

Link Internal Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam satu

dokumen (layaknya bookmark). Untuk mengimplementasikan hal ini, kita memerlukan atribut id.

Langkah pertama untuk mengimplementasikan link internal adalah dengan

mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah berikutnya adalah

menetapkan nilai atribut id di blok yang akan dituju, di mana nilainya sama dengan href namun tanpa prefiks #. Perlu diperhatikan, nilai atribut id tidak boleh sama atau harus unik di

dalam lingkupnya.

Link Email Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk menunjuk ke

suatu alamat email. Adapun dalam implementasinya, kita tinggal mengubah alamat URL

dengan alamat email—yang terlebih dahulu diberi prefiks mailto.

Link Gambar Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa gambar.

Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit tag <img> di antara tag

<a>.

9. Tabel Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris

dan kolom. Perpotongan baris dan kolom di dalam tabel disebut sebagai sel. Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data di

dalam tabel secara atraktif. Artinya, tak hanya sebatas pada data tabular saja, namun juga

mengizinkan kita melakukan pemformatan.

Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah pengorganisasian. Semua tabel harus diawali dengan tag <table>, kemudian ada tiga tag dasar yang

mengikutinya, meliputi:

Tag <th> atau table heading yang berfungsi mendefinisikan header.

Tag <tr> atau table row yang berfungsi mendefinisikan baris.

Tag <td> atau table data yang berfungsi mendefinisikan sel.

Struktur pembentuk tabel dapat dilihat seperti pada Gambar 15.

Pemformatan Tabel

Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat

visualisasi tabel. Tiga atribut pertama yang sering digunakan adalah align (untuk mengatur

posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk

mengatur spasi antara border sel dengan isinya).Atribut lain yang juga cukup penting adalah

width (untuk menentukan lebar tabel atau sel).Perhatikan, pengaturan lebar sel tidak perlu

dilakukan untuk semua baris, tetapi cukup salah satu saja. Bagaimanapun, lebar sel akan

selalu sama antara satu dengan lainnya.

Desain Tabel Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam setiap baris

ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge)

sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar baris

(rowspan) atau kolom (colspan).

Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom maupun baris.

Untuk pengelompokan kolom menggunakan elemen COLGROUP sedangkan pada baris

memanfaatkan TBODY.

E. LATIHAN

2.1. Latihan 1

Sorce Code

<!DOCTYPE html>

<html lang="en">

<head>



<title>Ini judul dokumen</title>

</head>

<body>

ini adalah teks di body

</body>

</html>

Printscreen

Penjelasan

Dalam penulisan bahasa pemrograman web Hyper Text Markup Language

(HTML) harus dimulai dengan menggunakan tag <html> .... </html>. Dalam

bahasa HTML terdapat dua bagian utama yaitu head dan body yang pada

penulisan HTML ditulis dengan menggunakan tag

<head> .... </head>

<body> .... </body>

Dalam bagian head dapat menuliskan judul halaman yang kita buat dengan

menggunakan tag <title> .... </title>. Pada penulisan title pada page di atas

menggunakan penulisan judul

<title>Ini judul dokumen</title>

Sehingga ketika halaman tersebut dijalankan di web browser dengan

menggunakan localhost maka judul halam yang akan terlihat dalam browser

adalah Ini judul dokumen.

Dalam bagian body dapat dituliskan kata atau kalimat atau elemen-elemen lain

yang dapat dibuat dalam bagian body html. Dalam page yang telah dibuat di atas

bagian body ditulis dengan

<body>Ini adalah teks di body</body>

Sehingga ketika dijalankan pada web browser akan menampilkan kalimat berupa

text yaitu Ini adalah teks di body.

2.2. Latihan 2

Source Code

<body>

<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>

Printscreen

Penjelasan

Dalam HTML terdapat elemen pembuatan heading yang dapat digunakan dalam

bagian body html. Heading dideklarasikan dengan menggunakan tag <hn> ....

</hn> dimana n adalah bilangan 1 hingga 6 yang menunjukkan ukuran heading

dan (...) dapat diisi dengan teks. Heading 1 (h1) memiliki ukuran yang paling

besar jika dibandingkan dengan heading yang lain sedangkan heading yang

terkecil yaitu heading 6 (h6).

2.3. Latihan 3

Source Code

<body>

<h1 align="right">Heading 1</h1>

<h2 align="left">Heading 2</h2>

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

</body>

Printscreen

Penjelasan

Dalam pembuatan halaman di atas untuk mengatur posisi Heading menjadi rata

kanan, rata kiri, dan rata tengah menggunakan

<h1 align = "right">Heading 1</h1>

<h2 align = "left">Heading 2</h2>

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

Sehingga untuk heading 1 (h1) menggunakan align right sehingga heading text

Heading 1 akan rata kanan. Sedangkan untuk heading 2 (h2) menggunakan align

left sehingga heading text Heading 2 akan rata kiri. Serta untuk heading 3 (h3)

karena menggunakan align center maka heading text Heading 3 akan rata tengah.

2.4. Latihan 4

Source Code

<body>

<p>

Ini Paragraf Pertama

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do euismod tempor incididunt ut labore et dolore

magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris

nisi ut aliquip es ea commodo consequat.

<p>

Ini Pargraf Ketiga

</body>

Printscreen

Penjelasan

Dalam halaman diatas dibuat tiga paragraf dengan menggunakan html. Setiap

paragraf harus dimulai dengan memberi tag <p> sedangkan di akhir paragraf tidak

diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak

didefinisikan mempunyai tag akhir. Setiap pergantian paragraf harus dimulai

dengan tag <p> kembali seperti pada pembuatan paragraf pada halaman di atas.

Setiap pembuatan paragraf baru selalu diawali dengan menggunakan tag <p>

seperti berikut ini.

<p>

Ini paragraf pertama

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat.

<p>

Ini paragraf Ketiga

Setiap akan membuat paragraf baru maka selalu menuliskan tag <p> untuk

menandakan pembuatan paragraf.

2.5. Latihan 5

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Paragraf</title>

</head>

<body>

<p align="center">

Ini Pargraf rata tengah

<p align="justify">

Lorem ipsum dolor sit amet , consectetur adipisicing

elit,sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris

nisi ut aliquip ex ea commodo consequat.

<p align="right">

ini paragraf rata kanan

</body>

</html>

Printscreen

Penjelasan

Penggunaan pengaturan posisi text juga diterapkan dalam mengatur posisi atau

alignment dari sebuah paragraf. Sebelumnya untuk membuat sebuah paragraf

harus menuliskan tag <p> dan untuk mengatur alignment paragraf maka dapat

diatur alignnya dengan menuliskannya pada tag <p> tersebut. Pada penulisan page

di atas menggunakan tag <p align=””> ... seperti berikut

<p align = "center"> Ini paragraf rata tengah

<p> Lorem ipsum ... commodo consequat.

<p align = "right"> Ini paragraf rata kanan

Sehingga ketika dijalankan maka paragraf yang dibuat akan mengikuti

alignment yang diterapkan.

2.6. Latihan 6

Source Code

<body>

Membuat baris baru <br />

Membuat baris baru <br />

<p>



Loream ipsum dolor sit amet, consectetur adipisicing

elit,

<br />

sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua.

<br />

ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris


</body>

Printscreen

Penjelasan

Untuk mengganti baris dalam bahasa HTML dapat dengan menggunakan tag

<br>. Karena tag <br> tidak harus didefinisikan elemennya maka tag akhirnya

tidak harus disertakan dalam bahasa HTML cukup dengan memberikan / (slash)

setelah tag <br> sehingga menjadi <br/>.

2.7. Latihan 7

Source Code

<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>

Printscreen

Penjelasan

HTML menyediakan sejumlah elemen yang dapat dimanfaatkan untuk

mengatur font, seperti huruf tebal, huruf miring, garis bawah, dan masih banyak

lagi dengan menggunakan tag. Pada halaman di atas terdapat 6 macam pengaturan

font yaitu:

a. Tag <b> ... </b>, berfungsi mengatur agar font dicetak tebal.

b. Tag <strong> ... </strong>, berfungsi mengatur agar font dicetak tebal dan

lebih tebal jika dibandingkan dengan tag <b>.

c. Tag <i> ... </i>, berfungsi mengatur agar font dicetak miring.

d. Tag <em> ... </em>, berfungsi mengatur agar font dicetak miring dan lebih

miring jika dibandingkan dengan tag <i>.

e. Tag <u> ... </u>, berfungsi mengatur agar font dicetak dengan garis bawah.

f. Tag <strike> ... </strike>, berfungsi mengatur agar font dicetak tercoret.

Karena karakter < dan > dibaca langsung oleh bahasa HTML dengan awal dan

akhir dari sebuah tag, maka perlu ditambahkan dengan “<” untuk karakter <

dan “&gt” untuk karakter >. Sehingga ketika dijalankan < serta > tidak

dianggap sebuah tag oleh bahasa HTML.

2.8. Latihan 8

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>demo karakter khusus</title>

</head>

<body>

£ Pound <br />

€ Euro <br />

&copy: Copyright <br />

&reg: Registered <br />

™ Trademark <br />

</body>

</html>

Printscreen

Penjelasan

Di HTML, kita juga bisa menampilkan karakter-karakter khusus dengan

memanfaatkan nama entitas dari karakter khusus tersebut. Sama halnya dengan

karakter < dan > yang memiliki entitas > serta <, karakter khusus juga

memiliki entitasnya masing-masing. Pada halaman yang telah dibuat diatas,

entitas dari karakter khusus di atas adalah:

a. Pound &pound

b. Euro &euro

c. Copyright &copy

d. Registered &reg

e. Trademark &trade

2.9. Latihan 9

Source Code

<body>

Membuat Garis horizontal <hr />

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit,

<br />


magna aliqua.

<br />

ut enim ad minim veniam, quis nostrud exercitation

ullamco laboris


<hr />

</body>

Printscreen

Penjelasan

Untuk membuat sebuah garis horizontal dalam bahasa HTML dapat dibuat

dengan menggunakan tag <hr>. Sama dengan tag <br>, karena tag <hr> tidak

harus didefinisikan elemennya maka tag akhirnya tidak harus disertakan dalam

bahasa HTML cukup dengan memberikan / (slash) setelah tag <hr> sehingga

menjadi <hr/>. Sehingga untuk membuat sebuah garis horizontal dalam bahasa

HTML dengan menyisipkan tag <hr/>.

2.10. Latihan 10

Source Code

<body>

Ordered List

<ol>

<li>satu</li>

<li>dua</li>

</ol>

<ht />

unordered list

<ul>

<li>satu</li>

<li>dua</li>

</ul>

<hr />

Definition List

<dl>

<dt>satu</dt>

<dd>satu satu</dd>

<dt>dua</dt>

<dd>dua dua</dd>

</dl>

</body>

Printscreen

Penjelasan

HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered),

dan definisi (definition). Jika dibuat list dalam bentuk Ordered List dan Unordered

list membutuhkan list item untuk menampilkan list yang digunakan dengan

menggunakan tag <li>. Perbedaan unordered dan ordered list terletak pada

pengurutan listnya. Pada ordered list, list yang diinputkan akan terurut sedangkan

pada unordered list tidak terurut. Tag yang digunakan dalam ordered list adalah

tag <ol> sedangkan untuk unordered list menggunakan tag <ul>. Sedangkan

Definition list, list akan ditampilkan dengan menyediakan keterangan (definition)

pada setiap list.

2.11. Latihan 11

Source Code



<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>

Printscreen

Penjelasan

Untuk memberikan warna background dapat dilakukan pada HTML pada atribut

bgcolor di tag <body>. Dalam halaman yang dibuat di atas menggunakan bgcolor

aqua. Tidak hanya atribut background saja yang dapat dilakukan pewarnaan,

namun atribut-atribut lain seperti font dapat dilakukan pewarnaan. Aturan

pewarnaan menggunakan heksadesimal warna RGB. Sehingga untuk membuat

font berwarna merah maka font colornya dapat diset menjadi #FF0000.

2.12. Latihan 12

Source Code

<body>

<p>



<img src="haha.jpg" width="20%" />

lorem ipsum dolor sit amet , consectetur adipisicing

elit,


magna aliqua.

<hr />

<p>



<img src="http://localhost/pratikum1/haha.jpg"

width="20%" align="right" />

Lorem ipsum dolor sit amet,consectetur adipisicing elit,


magna aliqua.

</body>

Printscreen

Penjelasan

Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML.

Untuk keperluan ini, HTML menyediakan tag <img> yang didukung dengan

sejumlah atribut untuk pengolahan gambar dalam sebuah halaman web. Ada dua

macam penyisipan gambar dalam sebuah halaman web yaitu menggunakan path

relative dan menggunakan path absolute. Perbedaan path relative dan path

absolute terdapat pada letak direktori gambar. Ketika menggunakan path relative

maka nama gambar yang diinputkan harus ada dalam direktori page yang telah

dibuat sedangkan untuk absolute path lokasi gambarnya jelas karena absolute path

menunjukkan letak direktori gambar tersebut. Dalam HTML juga dilengkapi

dengan elemen-elemen untuk mengolah gambar seperti mengatur lebar dan tinggi

gambar serta dapat mengatur border pada gambar yang telah disisipkan dalam

suatu halaman web tertentu.

2.13. Latihan 13

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Link</title>

</head>

<body>

<a href-"link2.html">klik disini</a>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Link 2</title>

</head>

<body>

untuk kembali ke halaman pertama

<a href-"linkl.html">klik disini</a>

</body>

</html>

Printscreen

Penjelasan

Fitur fundamental dari hypertext adalah hyperlink dokumen-dokumen; kita dapat

menunjuk lokasi-lokasi lain. Sebagaimana diketahui, hyperlink merupakan teks

yang memungkinkan kita untuk melakukan navigasi dari satu halaman ke halaman

lainnya. Di dalam HTML menyediakan tag <a> (atau disebut anchor) untuk

mendefinisikan sebuah link. Dalam implementasinya, pembuatan link

memerlukan atribut href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa

alamat lengkap (absolut) atau singkat (relatif) seperti yang telah dijelaskan dalam

saat penyisipan gambar.

Seperti yang telah dijelaskan sebelumnya untuk membuat sebuah link ke suatu

halaman web digunakan tag <a href=”lokasi halaman web link”> Teks </a>. Jika

digunakan nama relatif maka nama web yang dituju dapat kita tuliskan secara

langsung namun ketika akan menggunakan absolute path maka alamat halaman

yang dituju harus lengkap sehingga dalam melakukan link dapat berpindah dari

halaman satu ke halaman lain yang dituju.

2.14. Latihan 14

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Atribut Link</title>

</head>

<body>

<a href-"link2.html" target-"_blank" title-"Title

link">klik disini</a>

</body>

</html>

Printscreen

Penjelasan

Elemen anchor menyediakan sejumlah atribut guna mendukung

fungsionalitasnya, dua di antaranya yang kerap digunakan adalah target dan title.

Atribut target digunakan untuk mengatur apakah link akan di buka di window

yang sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi

untuk menampilkan teks manakala kursor mouse berada di atas link. Karena

dalam halaman web di atas menggunakan target blank maka ketika diklik link

yang telah dibuat maka akan membukanya pada tab baru dalam satu windows

seperti pada gambar di atas.

2.15. Latihan 15

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Link Internal</title>

</head>

<body>

menu

<ul>

<li><a href="#pendahuluan">Pendahuluan</a></li>

<li><a href="#pembahassan">Pembahasan</a></li>

<li><a href="#kesimpulan">Kesimpulan</a></li>

</ul>

<h3 id="pendahuluan">Pendahuluan</h3>

<p>

Lorem ipsum dolor sit amet, consectetur adipsicing elit,


magna aliqua.

Ut enim ad minim venim, quis nostrud exercitation ullamco

laboris

nisi ut aliquin ex ae commodo consequat.

<h3 id="pembahasan">Pembahasan</h3>

<p>



magna aliqua.


laboris


<h3 id="kesimpulan">Kesimpulan</h3>

<p>



magna aliqua.


laboris


</body>

</html>

Printscreen

Penjelasan

Langkah pertamaa yang digunakan dalam membuat sebuah link internal adalah

dengan mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah

berikutnya adalah menetapkan nilai atribut id di blok yang akan dituju, di mana

nilainya sama dengan href namun tanpa prefiks #. Contohnya seperti berikut:

<li><a href="#pendahuluan">Pendahuluan</a></li>

...........

<h3 id="pendahuluan">Pendahuluan</h3>

Maka atribut a href yang diberikan prefix #pendahuluan akan melakukan link

terhadap target yang dituju oleh atribut link tersebut ke id pendahuluan.

2.16. Latihan 16

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Link Email</title>

</head>

<body>

<a href="mailto;[email protected]">didik at um dot ac dot

id</a>

</body>

</html>

Printscreen

Penjelasan

Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk

menunjuk ke suatu alamat email. Adapun dalam implementasinya, untuk

membuat link pada sebuah e-mail hanya tinggal mengubah alamat URL dengan

alamat email yang harus terlebih dahulu diberi prefiks mailto. Dalam halaman di

atas atribut link yang digunakan adalah sebagai berikut:

<a href="mailto:[email protected]">didik at um dot ac dot id</a>

Atribut link di atas menunjukkan link ke alamat e-mail [email protected]

dimana teks yang tertulis pada halaman web tersebut adalah didik at um dot ac dot

id.

2.17. Latihan 17

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Link Gambar</title>

</head>

<body>

<a href="http://google.co.id"title-"Search with Googlr">

<img src="haha.jpg"border="0" />

</body>

</html>

Printscreen

Penjelasan

mailto:[email protected]

Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa

gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit

tag <img> di antara tag <a> seperti pada halaman web di atas.

<a href="http://google.co.id"title"Search with Google">

<img src="Google.jpg" border="0" width="200" heighth="250"/>

Langkah yang dilakukan yaitu membuat sebuah link ke google.co.id dengan

menggunakan title Search with Google dan kemudian menyisipkan sebuah

gambar untuk disisipi link ke google.co.id tersebut.

2.18. Latihan 18

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Tabel</title>

</head>

<body>

<table border=1>

<caption>Label dari table</caption>



<tr>

<th>No</th>

<th>Nama</th>

<th>Alamat</th>

</tr>



<tr>

<td>1</td>

<td>gisra</td>

<td>banten dalam 44a</td>

</tr>

Printscreen

Penjelasan

Dalam HTML juga disediakan layanan pembuatan sebuah tabel untuk keperluan

mempresentasikan sebuah data dalam bentuk tabel. Dalam pembuatan tabel

menggunakan tag <table> dimana juga menambahkan caption dengan

menambahkan tag <caption> pada table. Dalam pengisian data tabular dalam tabel

terdapat beberapa tag dasar sebagai berikut:

Tag <th> atau table heading yang berfungsi mendefinisikan header dari tabel.



2.19. Latihan 19

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo spasi Tabel</title>

</head>

<body>

<table border=1 align="center" cellspacing=0

cellpadding=10>



<tr>

<th>No</th>

<th>Nama</th>

<th>Alamat</th>

</tr>


<tr>

<td>1</td>

<td>gisra</td>


</tr>

</table>

</body>

Printscreen

Penjelasan

Dalam HTML juga disediakan layanan pemformatan atribut tabel sehingga

dapat dilakukan pemformatan pada tabel. Atribut utama dalam pemformatan tabel

yaitu align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel)

dan cellpadding (untuk mengatur spasi antara border sel dengan isinya).

2.20. Latihan 20

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo ukuran Tabel</title>

</head>

<body>


cellpadding=5>

<tr>



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

<th width="150">Nama</th>

<th width="200">Alamat</th>

</tr>


<tr>

<td>1</td>

<td>gisra</td>


</tr>

</table>

</body>

</html>

Printscreen

Penjelasan

Selain dilakukan pemformatan pada tiga atribut utama sebelumnya juga

terdapat satu pemformatan atribut tabel yaitu atribut width atau lebar dari sebuah

tabel yang dideklarasikan pada tabelheader <th> dari sebuah header pada suatu

halaman web. Pengaturan lebar sel tidak perlu dilakukan untuk semua baris, tetapi

cukup salah satu saja. Bagaimanapun, lebar sel akan selalu sama antara satu

dengan lainnya.

2.21. Latihan 21

Source Code

<!DOCTYPE html>

<html lang="en">

<head>

<title>Demo Span/Marge</title>

</head>

<body>


cellpadding=5>

<tr>

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



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

</tr>


<tr>



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

<td>gisra</td>


</tr>



<tr>

<td>gisra</td>


</tr>

</table>

</body>

</html>

Printscreen

Penjelasan

Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama

dalam setiap baris ataupun kolomnya. Sebagai contoh, mungkin kita perlu melakukan penggabungan (merge) sel. Dalam konteks elemen tabel, penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom (colspan).

Fitur lain yang ada pada tabel adalah pengelompokan sel berdasarkan kolom maupun baris. Untuk pengelompokan kolom menggunakan elemen COLGROUP

sedangkan pada baris memanfaatkan TBODY.

F. STUDI KASUS

Buat halaman web sederhana yang melibatkan elemen teks, garis, warna, dan gambar. Di mana terdapat minimal sebuah heading dan garis berwarna, gambar dengan garis tepi (border), dan

halaman utama dengan latar belakang gambar sembarang.

Source Code

IDENTITAS <!DOCTYPE html>

<html lang="en">



<head>



<title>STUDI KASUS</title>

</head>

<body>





<body background="merah.jpg">





<table border=0 align="center" cellspacing=0 cellpadding=0>

<tr> 





<th colspan="4"height="50"background="merah2.jpg">



<font color="white"><h1>GISRA RAHMADHITA</h1></font></th></tr>




<th width="200" height="50"bgcolor="purple">





<h3 align="center"><a href="foto.html">Foto</h3></a></th>



<th width="200" height="50"bgcolor="red">




<h3 align="center"><a href="identitas.html">Identitas</h3></a></th>



<th width="200" height="50"bgcolor="blue">




<h3 align="center"><a href="corat-coret.html">Corat-Coret</h3></a></th>



<th width="200" height="50"bgcolor="green">




<h3 align="center"><a href="sosmed.html">Social Media</h3></a></th>

</tr>




<tr> 





<th colspan="4"width="800"height="500"bgcolor="pink"><h2>

Nama : GISRA RAHMADHITA</br> 

NIM : 130533608259</br> 

TTL : Padang, 21 Agustus 1994</br> 

Alamat : Komp.Villa Permata Putri Edelwis No.11 </br> 

Prodi : S1 PTI 2013 Offering B </br> 

No. Hp : 085791929285 </br> 

<ol> 

Riwayat Pendidikan : </br> 

<li>TK Telkom Shandy Putra (2000-2001) </li> 

<li>SDN 27 Sawahan Dalam (2001-2007) </li> 

<li>SMPN 9 Padang (2007-2010) </li> 

<li>SMA Semen Padang (2010-2013) </li> 

<li>Universitas Negeri Malang (2013-sekarang) </li> 

</h2></th></tr>

</table>

</body>

</html>

CORET-CORET <!DOCTYPE html>

<html lang="en">


<head>



</head>


<body>



<body background="1.jpg">








<th colspan="4"height="50"background="biru2.jpg">








<h3><font color="white"><a href="foto.html">Foto</font></h3></a></th>





<h3><a href="identitas.html">Identitas</h3></a></th>





<h3><a href="corat-coret.html">Corat-Coret</h3></a></th>





<h3><a href="sosmed.html">Social Media</h3></a></th>

</tr> 







<th colspan="4"width="800"height="500"bgcolor="sky blue"><h2>



<p align="center">

Pada saat seperti ini izinkan aku mempertanyakan,</br> 

Dimana engkau letakkan aku? </br> 

Adakah aku seberharga cincin </br> 

yang melingkar manis di jarimu? </br> 

Ataukah aku senyaman sepatu tuamu, </br> 

yang tak terasa lagi bila dipakai? </br> 

Akankah kau pertahankan aku, </br> 

selayaknya nyawamu sendiri? </br> 

Ataukah namaku hanya akan melintas sekilas </br> 

di detik-detik terakhirmu? </br> 

Untuk kemudian meyublim seperti arwah tersedot surga </br> 

Karena itulah aku ingin hidup nyata </br> 

</br></p>

<p align="right"> 

<em>#dikutip dari Novel Supernova </em></br>

<em>GISRA RAHMADHITA </em></br>

</p></th></tr></table></body></html>

SOSMED <!DOCTYPE html>

<html lang="en">


<head>



</head>


<body>



<body background="hijau.jpg">








<th colspan="4"height="50"background="hijau2.jpg">








<h3 align="center"><a href="foto.html">Foto</h3></a></th>





<h3 align="center"><a href="identitas.html">Identitas</h3></a></th>





<h3 align="center"><a href="corat-coret.html">Corat-Coret</h3></a></th>





<h3 align="center"><a href="sosmed.html">Social Media</h3></a></th>

</tr> 







<th colspan="4"width="800"height="500"bgcolor="blue sky">

<ul> 



<h2><li><a href="www.facebook.com/GisraRahmadhita">Facebook</h2></li></a>



<h2><li><a href="www.twitter.com/GisraRahmadhita">Twitter</h2></li></a>

</ul></th></tr>

</table>

</body>

</html>

FOTO <!DOCTYPE html>

<html lang="en">


<head>



</head>


<body>



<body background="ungu.jpg">




<tr> 





<th colspan="4"height="50"background="ungu2.jpg">




<tr> 



<th width="200" height="50"bgcolor="purple"><h3 align="center">

<font color="white"><a href="foto.html">Foto</font></h3></a></th>



<th width="200" height="50"bgcolor="red"><h3 align="center">

<a href="identitas.html">Identitas</h3></a></th>



<th width="200" height="50"bgcolor="blue"><h3 align="center">

<a href="corat-coret.html">Corat-Coret</h3></a></th>



<th width="200" height="50"bgcolor="green"><h3 align="center">



<a href="sosmed.html">Social Media</h3></a></th>

</tr>






<tr> 





<th colspan="4"width="800"height="500"bgcolor="violet">



<img src ="dita.jpg"></th></tr>

</table>

</body>

</html>

Printscreen

Penjelasan

Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML. Untuk

keperluan ini, HTML menyediakan tag <img> yang didukung dengan sejumlah atribut

untuk pengolahan gambar dalam sebuah halaman web. Ada dua macam penyisipan

gambar dalam sebuah halaman web yaitu menggunakan path relative dan menggunakan

path absolute. Perbedaan path relative dan path absolute terdapat pada letak direktori

gambar. Ketika menggunakan path relative maka nama gambar yang diinputkan harus

ada dalam direktori page yang telah dibuat sedangkan untuk absolute path lokasi

gambarnya jelas karena absolute path menunjukkan letak direktori gambar tersebut.

Dalam HTML juga dilengkapi dengan elemen-elemen untuk mengolah gambar seperti

mengatur lebar dan tinggi gambar serta dapat mengatur border pada gambar yang telah

disisipkan dalam suatu halaman web tertentu.

Untuk memberikan warna background dapat dilakukan pada HTML pada atribut bgcolor

di tag <body>. Dalam halaman yang dibuat di atas menggunakan bgcolor

pink,biru,hijau,ungu. Tidak hanya atribut background saja yang dapat dilakukan

pewarnaan, namun atribut-atribut lain seperti font dapat dilakukan pewarnaan. Aturan

pewarnaan menggunakan heksadesimal warna RGB.

Penggunaan pengaturan posisi text juga diterapkan dalam mengatur posisi atau alignment

dari sebuah paragraf. Sebelumnya untuk membuat sebuah paragraf harus menuliskan tag

<p> dan untuk mengatur alignment paragraf maka dapat diatur alignnya dengan

menuliskannya pada tag <p> tersebut. Pada penulisan page di atas menggunakan tag <p

align=””> ... seperti berikut

o <p align = "center"> Ini paragraf rata tengah

o <p> Pada saat seperti ini izinkan aku mempertanyakan.

o <p align = "right"> Ini paragraf rata kanan

o <p>#dikutip dari Novel Supernova

o Sehingga ketika dijalankan maka paragraf yang dibuat akan mengikuti

alignment yang diterapkan.

G. KESIMPULAN

HTML (HyperText Markup Language) adalah salah satu dari beberapa bahasa

pemrograman web yang menyediakan layanan dalam pengedit halaman web.

Dalam HTML terdapat tag-tag yang mempunyai fungsi-fungsi tersendiri sesuai

dengan keperluan.

Dalam penulisan bahasa HTML dibagi menjadi 2 bagian yaitu bagian head yang

mempunyai tag <head> ... </head> dan body yang mempunyai tag </body>.

Untuk membuat lay out sebuah halaman dapat menggunakan table namun seiring

dengan adanya bahasa CSS (Cascading Style Sheet) pembuatan layout dengan table

sebaiknya dihindari.

Setiap dokumen HTML harus diawali dengan tag <html>dan diakhiri dengan

komplemennya, yakni tag</html> tag. Dokumen HTML juga menyertakan tiga

pasang tag.

Kebutuhan minimal yang diperlukan xampp/WampServer, web browser dan editor

text

Struktur dokumen HTML terdiri dari 2 bagian : header dan body

HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk

pemformatan teks (heading, paragraph, fontase, karakter khusus)

Di HTML, garis horizontal direpresentasikan melalui tag <hr />.

HTML mendukung list dalam bentuk terurut (ordered), tak terurut (unordered),

dan definisi (definition). Untuk setiap bentuk list ini, terdapat list item—dinyatakan

melalui tag <li> berpasangan—yang merepresentasikan item-item list.

Untuk memberikan warna background, HTML menyediakan atribut bgcolor di tag

<body>. Atribut ini dapat diisi dengan nama warna—misalnya red—atau kode

heksadesimal—misalnya #FFFFFF.

Tak hanya teks, kita juga bisa menyisipkan gambar di dalam dokumen HTML.

Untuk keperluan ini, HTML menyediakan tag <img> yang didukung dengan

sejumlah atribut.

HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan

sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut href

yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut)

atau singkat (relatif).

Pada prinsipnya, pembuatan tabel sangat sederhana sekali, hanya masalah

pengorganisasian. Semua tabel harus diawali dengan tag <table>, kemudian ada tiga

tag dasar yang mengikutinya, meliputi:

Tag <th> atau table heading yang berfungsi mendefinisikan header.



H. DAFTAR PUSTAKA

Modul I (HTML) Praktikum Pemrograman Berbasis WEB. Pendidikan Teknik Informatika — Teknik Elektro — Universitas Negeri Malang — 2015.

Laporan pratikum 1

Data & Analytics