LAPORAN MINGGUAN

PRAKTIKUM PEMOGRAMAN BERBASIS WEB

PERTEMUAN 2 DAN 3
{ CARA MEMFORMAT DOKUMEN, KARAKTER, MEMBUAT KARAKTER

KHUSUS, MENGGUNAKAN LINK, DAN MENAMBAHKAN GAMBAR PADA

HTML }

DISUSUN OLEH :
NIM
NAMA
KELAS
DOSEN PENGAMPU

: 8020140051
: AHMAD YANI SAPUTRA
: 03 PT4
: ERICK FERNANDO, S.Kom, M.S.I

PROGRAM STUDI TEKNIK INFORMATIKA

STIKOM DINAMIKA BANGSA
JAMBI
2016

PENILAIAN
No.
1.
2.
3.

Kategori Penilaian
Penulisan Materi
Kelengkapan isi materi
Praktikum

Penilaian

Dosen Pengampu

Mahasiswa

Erick Fernando, S.KOM, M.S.I

NIK :

Ahmad Yani Saputra

NIM : 8020140051

LEMBAR PENGESAHAN
Judul Laporan Mingguan

Nama

: Ahmad Yani Saputra

Nim

: 8020140051

Tanggal Penilaian

Dosen Pengampu

Hormat Saya

(Erick Fernando, S.Kom, M.S.I)

NIK :

(Ahmad Yani Saputra)

NIM : 8020140051
2

KATA PENGANTAR
Terima kasih atas segala kesempatan dan kesehatan yang di
berikan, puji syukur kami panjatkan kepada Allah SWT karena atas
berkat dan rahmatNya lah kami dapat menyelesaikan tugas laporan ini
tepat pada waktunya.
Laporan ini saya susun karena merupakan salah satu tugas yang
diberikan pada mata kuliah pemrograman berbasis web di Perguruan
tinggi swasta STIKOM DINAMIKA BANGSA Jambi pada semester genap.
Saya berharap laporan ini dapat bermanfaat dalam proses perkuliahan
khususnya bagi mahasiswa/i program studi Pendidikan ini.
Saya mohon maaf yang sebesar-besarnya apabila terdapat
banyak kekurangan dan kesalahan dalam laporan yang sederhana ini.
Karena pada dasarnya saya hanya manusia biasa yang masih dalam
tahap belajar dan masih harus banyak melakukan perbaikan.
3

Jambi, 26 April 2016

Praktikan
DAFTAR ISI
PENILAIAN .....................................................................................................................ii
LEMBAR PENGESAHAN...............................................................................................iii
KATA PENGANTAR........................................................................................................iv
DAFTAR ISI.....................................................................................................................v
DAFTAR TABEL..............................................................................................................vii
DAFTAR GAMBAR.........................................................................................................viii
BAB I.......................................................................................................................1
DASAR TEORI................................................................................................1
1. Definisi HTML......................................................................................................1
2. Struktur HTML.....................................................................................................1
2.1 Tag....................................................................................................1
3. Element .................................................................................................................1
3.1 Element HTML..............................................................................................2
3.2 Element head dan title.....................................................................................2
3.3 Element body...................................................................................................2
3.4 Atribut ............................................................................................................2
3.5 Komentar ........................................................................................................2
4. Memformat Dokumen HTML.................................................................2
4.1 Tag <br> / line break........................................................................2
4.2 Tag <p> / paragraph.........................................................................3
4.3 Tag <hr> / horizontal ruler...............................................................3
4.4 Tag <hn> / heading...........................................................................3
4.5 Tag list .............................................................................................3
4

5. Memformat Karakter...............................................................................3
5.1 Logical format..................................................................................3
5.2 Physical format.................................................................................3
5.3 Tag <blockquote>.............................................................................4
5.4 Tag <font>........................................................................................4
6. Karakter Khusus......................................................................................4
7. Menggunakan Link ................................................................................5
8. Menggunakan Gambar............................................................................5

BAB II......................................................................................................................6
1.
2.
3.
4.
5.
6.

Struktur Dasar HTML.............................................................................6

Element Head dan Title...........................................................................6
Element Body..........................................................................................6
Memformat Dokumen HTML.................................................................6
Tag <hn>/ Heading..................................................................................7
Tag List....................................................................................................7
6.1 Unordred list (bullet)........................................................................7
7. Memformat Karakter...............................................................................7
7.1 Tag <blockquote>.............................................................................7
7.2 Tag (font)..........................................................................................8
8. Karakter Khusus......................................................................................8
8.1 Menggunakan Link..........................................................................8
9. Menambahkan Gambar...........................................................................8

BAB III....................................................................................................................10
DAFTAR PUSTAKA

DAFTAR TABEL
Table 1.3 Atribut................................................................................................................2
Table 1.4 Tag <hr> /horizontal ruler..................................................................................3
Table 1.5.1 Logical Format...............................................................................................3
Table 1.5.2 Physical Format..............................................................................................3
Table 1.5.4 Tag Font..........................................................................................................4
Table 1.6 Karakter Khusus................................................................................................4
Table 1.7 Menggunakan Link............................................................................................5
Table 1.8 Menambahkan Gambar
...........................................................................................................................................
5DAFTAR GAMBAR
Gambar 2.1 Struktur dasar HTML....................................................................................6
Gambar 2.2 Element head dan title...................................................................................6
Gambar 2.3 Element body.................................................................................................6
Gambar 2.4 Memformat dokumen HTML........................................................................6
Gambar 2.5 Tag <hn> / Heading.......................................................................................7
Gambar 2.6 Undereder list (bullet)...................................................................................7
Gambar 2.7.1 Tag <blockquote>.......................................................................................7
Gambar 2.7.2 Tag (font)....................................................................................................8
Gambar 2.8.1 Menggunakan Link.....................................................................................8
Gambar 2.9 Menambahkan gambar..................................................................................8

BAB I
DASAR TEORI
1. Definisi HTML
HTML (HyperText Markup Language) adalah sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web dan menampilkan berbagai
informasi di dalam sebuah browser Internet. HTML adalah sebuah standar yang
digunakan secara luas untuk menampilkan halaman web.
Dokumen HTML disimpan dalam format teks reguler dan mengandung tagtag web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan
kode-kode tertentu (tag) untuk menjadi dokumen HTML (file *.htm atau *.html).
2. Struktur HTML
Di setiap perbuatan khususnya perbuatan yang dilakukan oleh manusia
pasti selalu memiliki suatu aturan baik peraturan tertulis maupun yang tidak
tertulis, dimana aturan inilah yang mengatur manusia akan seperti apakah nanti
perbuatan itu dilakukan, seperti apa yang terjadi jika aturan itu diikuti dan apa yang
akan terjadi jika peraturan dilanggar. Dan tentunya peraturan ini diciptakan oleh
sang ahli.
2.1 Tag
Tag Adalah teks khusus (markup) berupa dua karakter "<" dan
">", sebagai contoh <body> adalah tag dengan nama body. Tag harus
ditulis secara berpasangan, yang terdiri atas tag pembuka
penutup (ditambahkan

dan tag

karakter "/" setelah karakter "<"), sebagai contoh

<body> ini adalah tag pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML.
3. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup

3.1 Element HTML

Tag yang berfungsi untuk membuka dan menutup seluruh isi
dalam kode HTML. Isi dokumen

yang ingin ditampilkan di dalam

browser harus berada di dalam tag ini.

Penulisan element HTML :
<HTML> Isi dokumen web </HTML>
3.2 Element head dan title
Tag
Head mendefinisikan
bagian

kepala

dokumen

halaman web. Tag Head digunakan untuk mendeklarasikan

dari
judul

dokumen yang menggunakan tag Title.

3.3 Element body
Tag yang mendefinisikan isi halaman web yang ditampilkan oleh browser.
3.4 Atribut
Atribut mendefinisikan property dari suatu element HTML, yang
terdiri atas nama dan nilai.
Tag
<body></body>
Bgcolor=black
Text=yellow

Keterangan
Elemen untuk membuat isi dokumen
Atribut yang mendefinisikan bahwa warna latar/ background dari
dokumen web adalah hitam.
Atribut yang mendefinisikan bahwa warna text dalam dokumen
adalah kuning.

Tabel 1.3 Atribut

3.5 Komentar
Seperti dalam bahasa

pemrograman

yang

lainnya,

HTML juga

memiliki komentar yang dapat digunakan untuk menjelaskan bagian-bagian

dari

isi dokumen

web. Komentar

dalam HTML diatur oleh tanda pembuka

<!-- dan ditutup oleh tanda -->.

4. Memformat dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk
memformat dokumen.
4.1 Tag <br> / line break
Digunakan untuk membuat baris baru (Enter). Tag <br> ini membuat
baris baru tanpa memberi baris kosong. Tag ini tidak memerlukan tag penutup
</br>.
4.2 Tag <p> / paragraph
Digunakan untuk memulai paragraf baru. Tag <p> juga memiliki atribut
untuk mengatur aligment atau pengaturan posisi secara horizontal, yaitu: left,
right, center dan justify.
4.3 Tag <hr> / horizontal ruler

Tag <hr> / Horizontal Ruler Digunakan untuk menggambar garis

horizontal dalam dokumen HTML.
Atribut
Align
Width
Size
Noshade
Color

Fungsi
Menentukan posisi garis. Dengan Value : left | right | center
Menentukan panjang garis, default 100%
Menentukan tebal garis batas dalam pixel
Menonaktifkan efek 3D
Menentukan warna garis batas

Table 1.4 Tag <hr> / horizontal ruler

4.4 Tag <hn> / heading

Digunakan sebagai heading sebuah dokumen. Nilai n berkisar antara 1
hingga Di heading bisa ditambahkan atribut aligment. Tag <h1> akan
menghasilkan tulisan terbesar, sedangkan tag <h6> terkecil.
4.5 Tag list
Untuk membuat daftar pada HTML, kita bisa menggunakan tag List.
5. Memformat Karakter
5.1 Logical format
Logical format akan menerapkan layout dokumen secara logis dan
terstruktur.
Tag
<em></em>
<strong></strong>
<del></del>
<ins></ins>

Keterangan
Text miring / <i>
Text tebal / <b>
Mencoret Text / <strike>
Underline text / <u>

Tabel 1.5.1 Logical Format

5.2 Physical Format

Physical format adalah format terhadap fisik suatu font.
Tag
<b></b>
<i></i>
<u></u>
<tt></tt>
<big></big>
<small></small>
<strike>
</strike>


<center>
</center>

Keterangan
Bold Text
Italic Text
Underline Text
Typewriter Text
Untuk ukuran yang lebih besar dari normal
Ukuran yang lebih kecil dari normal
Untuk memberi garis di tengah text
Superscript text
Subscript text
Center dokumen

Table 1.5.2 Physical format

5.3 Tag <blockquote>

Digunakan untuk menandai bagian yang dikhususkan pada sebuah

dokumen, misalnya kutipan-kutipan dari kitab suci atau kata-kata mutiara, dan
lain-lain. Biasanya teks yang diberi tag ini akan lebih menjorok ke dalam
(indent/quotes).
5.4 Tag <font>
Digunakan untuk mengatur jenis, ukuran, dan warna font.
Atribut
Face

Keterangan
Untuk menentukan jenis font biasanya dalam satu list ada beberapa font
dan akan di baca mulai dari yang paling kiri.
Untuk menentukan warna font, anda bisa menggunakan nama font atau
hexadecimal (#000000 - #ffffff)
Untuk menentukan ukuran font dari font 1-7

Color
Size

Tabel 1.5.4 Tag font

6. Karakter Khusus
HTML telah menyediakan beberapa simbol untuk menampilkan karakter- karakter tertentu,
beberapa di antaranya adalah:
Simbol

Karakter

&cent; &pound; &yen;

&copy; &reg;
&amp;

&

Tabel 1.6 Karakter khusus

&divide;

Menggunakan Link
Link

&pi;

merupakan

&frac14; &frac12; &frac34;

gambar atau teks

&le; &ge; &lt; &gt;

<>

yang terkait dengan

&dagger;

7. &deg;

&spades;
&diams;

&clubs;

&hearts;

suatu

suatu

alamat

tertentu. Jika link

diklik, maka dokumen HTML akan menuju ke alamat tersebut. Link berhubungan
erat dengan apa yang disebut anchor. Anchor merupakan sesuatu yang dapat
digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai
tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor
ditandai dengan tag <a>
Atribut
Herf
name

Keterangan
Digunakan jika sebuah anchor akan digunakan sebagai link
Digunakan jika anchor akan digunakan sebagai tujuan

Tabel 1.7 Menggunakan Link

8. Menambahkan Gambar
Gambar adalah elemen yang sangat penting dalam menampilkan informasi.
Dengan ditambahkannya gambar, dokumen HTML akan makin menarik. Ada
banyak format gambar, tapi ada tiga jenis format yang paling sering di gunakan :
GIF (Graphical Interchange Format) (.GIF), JPEG (Joint Photographic Expert
Image) (.JPG), PNG (Portable Network Graphics). Untuk menambahkan gambar ke
dalam dokumen html digunakan tag <img>.
Atribut
src

align

Fungsi
Merujuk pada URL atau direktori file gambar.

width

Top, bottom, middle digunakan untuk menentukan

posisi gambar terhadap teks
Left, right, center untuk menentukan posisi gambar
di dokument
Menentukan lebar dari gambar dalam pixel

height

Menentukan tinggi dari gambar dalam pixel

alt

hspace

Menampilkan teks pengganti gambar jika gambar tidak dapat

ditampilkan. (Pada browser tertentu dapat pula ditampilkan
sebagai tool tip)
Mengatur frame yang mengeliligi gambar secara horizontal

vspace

Mengatur frame yang mengeliligi gambar secara vertikal

Tabel 1.8 menggunakan gambar

BAB II
PEMBAHASAN
1. Struktur Dasar HTML
<html>
<head>
<title> Judul Dokumen WEB </title>
<body>
<h1>Isi Halaman WEB</h1>
Gambar 2.1 Struktur dasar HTML
</body>
</head>
</html>

2. Element Head dan Title

Penulisan element head dan title adalah :

<head>
<title> Judul Dokumen Web </title>
</head>

Gambar 2.2 Element Head dan Title

3. Element Body
<head>
<title> Judul Dokumen Web </title>
<body> Isi halaman Web </body>
</head>

Gambar 2.3 Element body

4. Memformat Dokumen HTML
<html>
<head>
<title> Judul Dokumen Web </title>
<body> <p align=justify>
World Wide Web (WWW) / Web menggunakan HTTP (HyperText Transfer
Protokol)
sebagai protokol komunikasi dan menyampaikan informasi berbasis
web kepada pemakai dalam bentuk HTML (HyperText Markup
Language).
</p>
</body>
</head>
</html>

Gambar 2.4 Memformat Dokumen HTML

5. Tag <hn> / Heading

<head>
<title> TAG Heading </title>
<body>
<h1> Ini Heading 1 </h1>
<h2> Ini Heading 2 </h2>
<h3> Ini Heading 3 </h3>
<h4> Ini Heading 4 </h4>
<h5> Ini Heading 5 </h5>
<h6> Ini Heading 6 </h6>
</body>
</head>

Gambar 2.5 Tag <hn> / Heading

6. Tag List
6.1 Unordered list (bullet)
<head>
<title>TAG LIST</title>
</head>
<body>
<u1>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</u1>
<hr color="maroon">
<ul>
<li type=square>Monday</li>
<li type=disk>Tuesday</li>
<li type=circle>Wednesday</li>
</ul>
</body>
</head>

Gambar 2.6 Unordered List(Bullet)

7. Memformat Karakter
7.1 Tag <blockquote>
<html>
<head>
<title> Tag blockquote </title>
<body>
<blockquote> A web server is sometimes called an HTTP server.
Common web servers include IIS, Netscape Enterprise Server,
iPlanet Web Server, and Apache HTTP Server. </blockquote>
</body>
</head>
</html>

Gambar 2.7.1 tag <blockquote>7.2 Tag (font)

<html>
<head>
<title> Tag Font </title>
<body>

<font face="Arial" size=2 color=#FF0080> Internet </font>

<font face="Courier New, Courier, Mono" size=7 color=blue>
World Wide Web </font>
<html>
</body>
</head>
</html>

Gambar 2.7.2 Tag (font)

8. Karakter Khusus
8.1 Menggunakan Link
<html>
<head>
<title> Menggunakan Link </title>
</head>
<body>
<a href="http://www.yahoo.com"> Klik di sini </a> untuk menuju
www.yahoo.com.<br>
Atau dapat juga mengklik gambar ini:
<a href="http://www.yahoo.com">
<img src="D:\My Documents\yahoo0.jpg" alt="www.yahoo.com"> </a>
<br><br>
<a href="#Tengah"> Jika ini yang diklik </a> akan menuju ke
bagian tengah dokumen.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><b r><br><br><br><br><br><br>
<a name=Tengah> Ini adalah bagian tengah dokumen.</a>
</body>
</html>

Gambar 2.8.1 Menggunakan link

9. Menambahkan Gambar
<html>
<head>
<title> Menambahkan gambar </title>
</head>
<body>
<p><img src="file:///D:/ping.JPG" height="100"
width="100">Default Alignmant At The Bottom</p>
<p><img src="file:///D:/tulips.JPG" height="100" width="100"
align="top">Aligned at Top</p>
<p><img src="file:///D:/bunga.JPG" height="100" width="100"
align="middle">Aligned at Middle</p>
<img src="file:///D:/koalakumal.JPG" height="100" width="100"
alt="Bunga teratai">
</body>
</html>

Gambar 2.9 Menambahkan Gambar

BAB III
KESIMPULAN
Beberapa kesimpulan yang didapat :
1.

Penggunaan heading dalam HTML menggunakan tag <h1>..<h6> dalam

pembuatannya.

2.

Tag <br> memberikan garis baru atau new line ke kalimat di bawahnya sehingga
tidak menyatu satu sama lain.

3.

Pembuatan garis pembagi dengan tag <hr> dapat diatur sesuai dengan kondisi
HTML yang akan dibuat dengan color, width, dan height.

4.

Pembuatan paragraf menjadi lebih efektif dengan adanya penambahan align di

bagian tag <p> pada HTML, membuat paragraf menjadi lebih simetris.

5.

Kalimat yang memiliki bagian dapat diberi tag <ul> pada bagian awal dan <li>
pada bagian kalimat yang menjadi bagiannya.

6.

Pemberian tipe pada tag <li> dimaksudkan agar membedakan antara tag <li> yang
satu dengan yang lain,

7.

Blockquote pada HTML bersifat new line sehingga akan memisahkan diri dari
bagian teks sebelumnya yang ada di HTML.

DAFTAR PUSTAKA
http://bagibidang.blogspot.co.id/2014/03/memahami-dasar-dasar-html.html
http://www.ilmuwebsite.com/belajar-html-dasar-2-dasar-dasar-html
http://belajarpw.blogspot.co.id/2015/02/text-editor-sublime-text-2.html

10