Laporan Web 1 - Pengenalan HTML

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
Januari-2014
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.
Bentuk struktur dokumen HTML yang standar sebelum versi HTML5 diperlihatkan
sebagai berikut:
2
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
Editor teks untuk menuliskan kode-kode HTML pembentuk halaman aplikasi
web (tidak diperkenankan menggunakan IDE seperti Dreamweaver dan sebagainya).
3
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>
<html lang="en">
<head>

<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

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.
4
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>
<html lang="en">
<head>

<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 .
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.
5
<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>
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>
6
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>
7
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Paragraf</title>
</head>
<body>
<p align="center">
Ini paragraf rata tengah
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipicising elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
laboris
nisi ut aliquip ex ea commodo consequat.
<p align="right">
Ini paragraf rata kanan
</body>
</html>
Gambar 2.2Kode HTML
8
Penjelasan : script diatas sama dengan script sebelumnya hanya saja , pada script ini
menggunakan keyword “align” untuk pengaturan posisi paragraf. Paragraf pertama
menggunkan align center yang artinya berada pada posisi tengah, pargarf kedua yang berisi
beberapa kalimat berada pada posisi rata kiri-kanan (justify), dan kemudian paragraf ketiga
menggunakan align right yang artinya berada pada posisi rata kanan.
<body>
Membuat baris baru <br />

Membuat baris baru <br />
<p>

<br />
aliqua.
<br />
laboris
</body>
Gambar 2.4Kode HTML
Gambar 2.5 Hasil Tampilan Web
9
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>
Gambar 2.6 Kode HTML
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>
<html lang="en">
<head>
<title>Demo Karakter Khusus</title>
</head>
<body>
£ Pound <br />
1
0
€ Euro <br />
© Copyright <br />
® Registered <br />
™ Trademark <br />
</body>
</html>
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>
<br />
aliqua.
<br />
laboris
<hr />
</body>
1
1
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>
<li>Satu</li>
<li>Dua</li>
</ol>
<hr />
Unordered List
<ul>
<li>Satu</li>
<li>Dua</li>
</ul>
<hr />
Definiton List
<dl>
<dt>Satu</dt>
<dd>Satu Satu</dd>
<dt>Dua</dt>
<dd>Dua Dua</dd>
</dl>
<hr />
</body>
1
2
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>
1
3
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

<body>
<p>

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

<img src="http://localhost/prak1/exo.jpg"width="100"align="right"
/>
aliqua.
</body>
1
4
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>
<html lang="en">
<head>
<title>Demo Link</title>
</head>
<body>
<a href="link2.html">klik disini</a>
</body>
</html>
Link 2:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Link 2</title>
</head>
<body>
1
5
Untuk kembali ke halaman pertama
<a href="link1.html">klik disini</a>
</body>
</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>
<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>
1
6
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
<!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="#pembahasan">Pembahasan</a></li>
<li><a href="#Kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
aliqua.
laboris
<h3 id="pembahasan">Pembahasan</h3>
<p>
aliqua.
laboris
</body>
</html>
1
7
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>
<html lang="en">
<head>
<title>Demo Link Email</title>
</head>
<body>
<a href="mailto:didik@um.ac.id">didik at um dot ac dot id</a>
</body>
</html>
Gambar 4.5 Tampilah hasil web
1
8
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>
<html lang="en">
<head>
<title>Demo Link Gambar</title>
</head>
<body>
<a href="http://google.co.id" title="Search with Google">

<img src="google.jpg" border="0" />
</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>
<html lang="en">
<head>
<title>Demo Table</title>
</head>
<body>
<table border=1>
<caption>Label dari tabel</caption>

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


<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl.Jombang</td>
</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

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Spasi Table</title>
</head>
<body>
<table border=1 align="center" cellspacing=0 cellspacing=10>


<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
2
0
<tr>
<td>1</td>
<td>Ibnu</td>
<td>Jl.Jombang</td>
</tr>
</table>
</body>

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>
<html lang="en">
<head>
<title>Demo Ukuran Table</title>
</head>
<body>

<tr>

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

<tr>
<td>1</td>
<td>Ibnu</td>
2
1
<td>Jl.Jombang</td>
</tr>
</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

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo Span/Merge Sel</title>
</head>
<body>

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

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

<tr>

<td rowspan=2>Span baris 1 dan 2</td>
<td>Ibnu</td>
<td>Jl.Jombang</td>
</tr>


<tr>
<td>Vita</td>
<td>Jl.Jakarta</td>
2
2
</tr>
</table>
</body>
</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>
<body bgcolor="#000080">
<p>
<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>
2
3
<font color="#C0C0C0">Saya masuk di Universitas Negeri Malang tahun 2013
dan diterima di fakultas teknik, jurusan teknik elektro
prodi S1 Pendidikan Teknik Informatika.
<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>
<hr size=7 noshade width="350"align="right">
<img src="http://localhost/prak1/putri.jpg"align="right"
/>
</body>
Hasil Tampilan Web
Penjelasan : script diatas adalah dokumen yang didesain dengan menggunakan atribut
heading1 sebagai judul/ tittle yang diposisikan pada center/tengah. Kemudian, dibuat garis
2
4
horizontal dengan size 7 , artinya garis horizontal ini menggunakan ketebalan nomer 7
disertai noshade. Noshade disini berarti memberikan warna dalam garis sehingga menjadi
lebih tebal. Jika tanpa noshade maka akan tampak seperti garis dengan bentuk persegi
panjang tanpa warna yang mengisi bagian dalam garis. Kemudian, menggunakan
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
Modul Praktikum.2012 . Dasar-dasar HTML. Universitas Negeri Malang Fakultas
Teknik Jurusan Teknik Elektro.
2
5

Laporan Web 1 - Pengenalan HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Web 1 - Pengenalan HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM MODUL 1

UNIVERSITAS NEGERI MALANG

Gambar 1.1 kode HTML

Gambar 1.2 Tampilan hasil halaman web

2. Publikasi halaman Web

Gambar 1.4 Tampilan hasil halaman web

Gambar 1.5Kode HTML

Gambar 1.7 Tampilan hasil halaman web

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

Gambar 1.9 Tampilan hasil halaman web

Membuat baris baru <br />

Gambar 2.5 Hasil Tampilan Web

<b>Menggunakan tag &lt;b&gt;,,,&lt;/b&gt;</b><br />

Gambar 2.7 Tampilan hasil web

&pound; Pound <br />

Gambar 2.9 Tampilan Hasil Web

Membuat garis horizontal <hr />

Gambar 3.1 Tampilan hasil halaman web

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

Gambar 3.4 kode HTML

7. Bekerja dengan Gambar

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

Gambar 3.8 Kode HTML

Gambar 3.9 Tampilan hasil halaman web

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

Gambar 4.1 Tampilan hasil web

10. Link Internal

Gambar 4.2 Kode HTML

11. Link Email

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

Gambar 4.4 Kode HTML

Gambar 4.5 Tampilah hasil web

12. Link Gambar

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

Gambar 4.6 Kode HTML

Gambar 4.7 Tampilan hasil web

Gambar 4.8 Kode HTML

Gambar 4.9 Tampilan hasil web

14. Pemformatan Tabel

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

Gambar 5.0 Kode HTML

Gambar 5.1 Tampilan hasil web

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

Gambar 5.2 Kode HTML

Gambar 5.3 Tampilan hasil web

15. Desain Tabel

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

Gambar 5.4 Kode HTML

Gambar 5.5 Tampilan hasil web

Source Code HTML

Hasil Tampilan Web

Anda mungkin juga menyukai

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

£ Pound <br />